/*
Theme Name: MyDecor Child
Theme URI: https://demo.theme-sky.com/mydecor/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: mydecor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: mydecor-child
*/

/* Functionality: Custom thumbnail size in product image gallery
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 */

/* DESKTOP */
.woocommerce .flex-control-thumbs {
  margin: 10px auto 10px auto !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: 30% !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 auto 10px auto !important;
    width: 25% !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: 80% !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 auto 10px auto !important;
    width: 25% !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: 80% !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: 75% !important;
    left: 25% !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .woocommerce .flex-viewport {
	width: 75% !important;
    left: 25% !important;
  }
}
@media (min-width: 1025px) {
  .woocommerce .flex-viewport {
    width: 75% !important;
    left: 25% !important;
  }
}