/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Functionality: Custom thumbnail size in product image gallery


/* DESKTOP */
.woocommerce .flex-control-thumbs {
    margin: 10px 0px 10px -5px !important; /* Thumbnails separation top and bottom */
    width: 100% !important; /* Controls width of thumbnails container on desktop - Horizontally */
	display: flex;
}
/* Controls thumbnails width on desktop - vertically
 * Enable this ONLY for VERTICAL display
 */ 
ol.flex-control-nav.flex-control-thumbs li {
	width: 15% !important; 
}
/* Enable this ONLY for HORIZONTAL display */
/*ol.flex-control-nav.flex-control-thumbs li {
	width: 18% !important; 
}*/

/* PHONES */
@media (max-width:414px){
	ol.flex-control-nav.flex-control-thumbs li {
		width: 18% !important; /* Controls thumbnails width on mobile - Horizontally */
	}
}

/* TABLETS */
@media (min-width:568px) and (max-width:768px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 15% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 90% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}
@media (min-width:769px) and (max-width:1024px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 12% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 100% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}

/* Functionality: Product page image thumbnails on left side
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 * Disable this segment if you want to display horizontally
 */
@media (min-width:568px) {
	.woocommerce .flex-control-nav { 
		position: absolute; 
		top:-10px; 
		left: 0px;
	}
	.flex-control-thumbs {
		display: flex;
		flex-direction: column;
	}
}
@media (min-width:568px) and (max-width:768px){
	.woocommerce .flex-viewport {
		width: 86.5% !important;
		left: 100px !important;
	}
}
@media (min-width:769px) and (max-width:1024px){
	.woocommerce .flex-viewport {
		width: 87% !important;
		left: 95px !important;
	}
}
@media (min-width:1025px){
	.woocommerce .flex-viewport {
		width: 85% !important;
		left: 80px !important;
	}	
}