/*--------------- START - PRODUCT IMAGE GALLERY ---------------*/
.product-images .product-images-container {
    position: relative;
    margin: 0 auto;
    padding: 12px 12px 0;
    width: auto;
    
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    align-content: flex-start;
}
.product-images .product-images-container img:hover {
    cursor: pointer;
}
/* Flexbox Fallback Layout */
.product-images .product-images-container img {
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    height: auto;
    max-height: 800px;
    margin: 0;
    
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
@media screen and (min-width: 380px) {
    .product-images .product-images-container img {
        min-width: 50px;
        width: 33.3333333%;
    
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	    flex: 0 0 auto;
    }
}
@media screen and (min-width: 768px) {
    .product-images .product-images-container {
        max-width: 874px;
        padding: 12px;
    }
    .product-images .product-images-container img {
        min-width: 50px;
        width: 25%;
        margin: 0;
    
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	    flex: 0 0 auto;
    }
}
/* Grid version of the image gallery */
@supports (display: grid) {
    .product-images .product-images-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(auto, 1fr));
        -ms-grid-columns: (minmax(auto, 1fr))[3];
        grid-column: 1 / span 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-gap: 12px;
    
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    
	    -webkit-justify-content: center;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container {
            padding: 12px;
        }
    }
    /* Default Image Size (covers 1 to 12 images) */
    .product-images .product-images-container img {
        max-width: 100%;
        min-width: 100%;
        padding: 0;
        margin: 0;
        grid-column: span 1;
        grid-row: span 1;
    }

    /* 12 IMAGES */
    .product-images .product-images-container.asset-count-12 img:nth-child(1),
    .product-images .product-images-container.asset-count-12 img:nth-child(7) {
        height: auto;
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-12 {
            grid-template-columns: repeat(4, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[4];
            grid-column: 1 / span 4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
        }
        .product-images .product-images-container.asset-count-12 img:nth-child(1),
        .product-images .product-images-container.asset-count-12 img:nth-child(4),
        .product-images .product-images-container.asset-count-12 img:nth-child(7),
        .product-images .product-images-container.asset-count-12 img:nth-child(10) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-12 {
            grid-template-columns: repeat(6, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[6];
            grid-column: 1 / span 6;
            -ms-grid-column: 1;
            -ms-grid-column-span: 6;
        }
        .product-images .product-images-container.asset-count-12 img:nth-child(7),
        .product-images .product-images-container.asset-count-12 img:nth-child(10) {
            grid-column: span 1;
            grid-row: span 1;
            -ms-grid-column-span: 1;
        }
        .product-images .product-images-container.asset-count-12 img:nth-child(1),
        .product-images .product-images-container.asset-count-12 img:nth-child(4) {
            grid-column: span 2;
            grid-row: span 2;
            -ms-grid-column-span: 2;
        }
    }
    
    /* 11 Images */
    .product-images .product-images-container.asset-count-11 {
        grid-template-columns: repeat(5, minmax(auto, 200px));
        -ms-grid-columns: (minmax(auto, 200px))[5];
        grid-column: 1 / span 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }
    .product-images .product-images-container.asset-count-11 img {
        grid-column: span 1;
        grid-row: span 1;
    }
    .product-images .product-images-container.asset-count-11 img:nth-child(1),
    .product-images .product-images-container.asset-count-11 img:nth-child(2),
    .product-images .product-images-container.asset-count-11 img:nth-child(7){
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-11 {
            grid-template-columns: repeat(4, minmax(auto, 200px));
            -ms-grid-columns: (minmax(auto, 200px))[4];
            grid-column: 1 / span 4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-11 {
            grid-template-columns: repeat(11, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[11];
            grid-column: 1 / span 11;
            -ms-grid-column: 1;
            -ms-grid-column-span: 11;
        }
        .product-images .product-images-container.asset-count-11 img {
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-11 img:nth-child(1),
        .product-images .product-images-container.asset-count-11 img:nth-child(7){
            grid-column: span 3;
            grid-row: span 3;
        }
        .product-images .product-images-container.asset-count-11 img:nth-child(2){
            grid-column: span 4;
            grid-row: span 4;
        }
    }

    /* 10 Images */
    .product-images .product-images-container.asset-count-10 {
        grid-template-columns: repeat(4, minmax(auto, 200px));
        -ms-grid-columns: (minmax(auto, 200px))[4];
        grid-column: 1 / span 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
    }
    .product-images .product-images-container.asset-count-10 img {
        grid-column: span 1;
        grid-row: span 1;
    }
    .product-images .product-images-container.asset-count-10 img:nth-child(1),
    .product-images .product-images-container.asset-count-10 img:nth-child(7){
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-10 {
            grid-template-columns: repeat(10, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[10];
            grid-column: 1 / span 10;
            -ms-grid-column: 1;
            -ms-grid-column-span: 10;
        }
        .product-images .product-images-container.asset-count-10 img:nth-child(1) {
            grid-column: span 4;
            grid-row: span 4;
        }
        .product-images .product-images-container.asset-count-10 img:nth-child(2),
        .product-images .product-images-container.asset-count-10 img:nth-child(3),
        .product-images .product-images-container.asset-count-10 img:nth-child(4),
        .product-images .product-images-container.asset-count-10 img:nth-child(5) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-10 img:nth-child(10) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
    
    /* 9 Images */
    .product-images .product-images-container.asset-count-9 img {
        grid-column: span 1;
        grid-row: span 1;
    }
    .product-images .product-images-container.asset-count-9 img:nth-child(1),
    .product-images .product-images-container.asset-count-9 img:nth-child(7){
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-9 {
            grid-template-columns: repeat(6, minmax(auto, 200px));
            -ms-grid-columns: (minmax(auto, 200px))[6];
            grid-column: 1 / span 6;
            -ms-grid-column: 1;
            -ms-grid-column-span: 6;
        }
        .product-images .product-images-container.asset-count-9 img:nth-child(1),
        .product-images .product-images-container.asset-count-9 img:nth-child(2),
        .product-images .product-images-container.asset-count-9 img:nth-child(7),
        .product-images .product-images-container.asset-count-9 img:nth-child(8),
        .product-images .product-images-container.asset-count-9 img:nth-child(9) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-9 {
            grid-template-columns: repeat(9, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[9];
            grid-column: 1 / span 9;
            -ms-grid-column: 1;
            -ms-grid-column-span: 9;
        }
        .product-images .product-images-container.asset-count-9 img:nth-child(1) {
            grid-column: span 4;
            grid-row: span 4;
        }
        .product-images .product-images-container.asset-count-9 img:nth-child(2),
        .product-images .product-images-container.asset-count-9 img:nth-child(3),
        .product-images .product-images-container.asset-count-9 img:nth-child(6),
        .product-images .product-images-container.asset-count-9 img:nth-child(7) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-9 img:nth-child(10) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
    
    /* 8 Images */
    .product-images .product-images-container.asset-count-8 {
        grid-template-columns: repeat(4, minmax(auto, 200px));
        -ms-grid-columns: (minmax(auto, 200px))[4];
        grid-column: 1 / span 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
    }
    .product-images .product-images-container.asset-count-8 img {
        grid-column: span 1;
        grid-row: span 1;
    }
    .product-images .product-images-container.asset-count-8 img:nth-child(1)  {
        grid-column: span 3;
        grid-row: span 3;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-8 {
            grid-template-columns: repeat(7, minmax(auto, 200px));
            -ms-grid-columns: (minmax(auto, 200px))[7];
            grid-column: 1 / span 7;
            -ms-grid-column: 1;
            -ms-grid-column-span: 7;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(4) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(1),
        .product-images .product-images-container.asset-count-8 img:nth-child(2) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-8 {
            grid-template-columns: repeat(8, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[8];
            grid-column: 1 / span 8;
            -ms-grid-column: 1;
            -ms-grid-column-span: 8;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(4) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(1) {
            grid-column: span 4;
            grid-row: span 4;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(2),
        .product-images .product-images-container.asset-count-8 img:nth-child(3),
        .product-images .product-images-container.asset-count-8 img:nth-child(6) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-8 img:nth-child(10) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
    
    /* 7 Images */
    .product-images .product-images-container.asset-count-7 img {
        grid-column: span 1;
        grid-row: span 1;
    }
    .product-images .product-images-container.asset-count-7 img:nth-child(1)  {
        grid-column: span 3;
        grid-row: span 3;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-7 {
            grid-template-columns: repeat(12, minmax(auto, 200px));
            -ms-grid-columns: (minmax(auto, 200px))[12];
            grid-column: 1 / span 12;
            -ms-grid-column: 1;
            -ms-grid-column-span: 12;
        }
        .product-images .product-images-container.asset-count-7 img:nth-child(1),
        .product-images .product-images-container.asset-count-7 img:nth-child(2),
        .product-images .product-images-container.asset-count-7 img:nth-child(3) {
            grid-column: span 4;
            grid-row: span 4;
        }
        .product-images .product-images-container.asset-count-7 img {
            grid-column: span 3;
            grid-row: span 3;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-7 {
            grid-template-columns: repeat(7, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[7];
            grid-column: 1 / span 7;
            -ms-grid-column: 1;
            -ms-grid-column-span: 7;
        }
        .product-images .product-images-container.asset-count-7 img:nth-child(1) {
            grid-column: span 4;
            grid-row: span 4;
        }
        .product-images .product-images-container.asset-count-7 img:nth-child(2),
        .product-images .product-images-container.asset-count-7 img:nth-child(6) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-7 img:nth-child(10) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }

    /* 6 IMAGES */
    .product-images .product-images-container.asset-count-6 img:nth-child(1),
    .product-images .product-images-container.asset-count-6 img:nth-child(7){
        height: auto;
        width: 500px;
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (min-width: 520px) and (max-width: 767px) {
        .product-images .product-images-container.asset-count-6 {
            grid-template-columns: repeat(4, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[4];
            grid-column: 1 / span 4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
        }
        .product-images .product-images-container.asset-count-6 img:nth-child(1),
        .product-images .product-images-container.asset-count-6 img:nth-child(4),
        .product-images .product-images-container.asset-count-6 img:nth-child(7){
            grid-column: span 2;
            grid-row: span 2;
        }
        .product-images .product-images-container.asset-count-6 img:nth-child(12){
            grid-column: span 4;
            grid-row: span 4;
        }
    }
    @media screen and (min-width: 768px) {
        .product-images .product-images-container.asset-count-6 {
            grid-template-columns: repeat(6, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[6];
            grid-column: 1 / span 6;
            -ms-grid-column: 1;
            -ms-grid-column-span: 6;
        }
        .product-images .product-images-container.asset-count-6 img,
        .product-images .product-images-container.asset-count-6 img:nth-child(7){
            grid-column: span 1;
            grid-row: span 1;
        }
        .product-images .product-images-container.asset-count-6 img:nth-child(1),
        .product-images .product-images-container.asset-count-6 img:nth-child(4) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    /* 5 IMAGES */
    .product-images .product-images-container.asset-count-5 {
        grid-template-columns: repeat(10, minmax(auto, 1fr));
        -ms-grid-columns: (minmax(auto, 1fr))[10];
        grid-column: 1 / span 10;
        -ms-grid-column: 1;
        -ms-grid-column-span: 10;
    }
    .product-images .product-images-container.asset-count-5 img:nth-child(1),
    .product-images .product-images-container.asset-count-5 img:nth-child(4) {
        grid-column: span 6;
        grid-row: span 6;
    }
    .product-images .product-images-container.asset-count-5 img:nth-child(2),
    .product-images .product-images-container.asset-count-5 img:nth-child(3),
    .product-images .product-images-container.asset-count-5 img:nth-child(5) {
        grid-column: span 4;
        grid-row: span 4;
    }
    @media screen and (min-width: 520px) {
        .product-images .product-images-container.asset-count-5 {
            grid-template-columns: repeat(7, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[7];
            grid-column: 1 / span 7;
            -ms-grid-column: 1;
            -ms-grid-column-span: 7;
        }
        .product-images .product-images-container.asset-count-5 img:nth-child(1),
        .product-images .product-images-container.asset-count-5 img:nth-child(3){
            grid-column: span 3;
            grid-row: span 3;
        }
        .product-images .product-images-container.asset-count-5 img:nth-child(2),
        .product-images .product-images-container.asset-count-5 img:nth-child(4),
        .product-images .product-images-container.asset-count-5 img:nth-child(5) {
            grid-column: span 1;
            grid-row: span 1;
        }
    }

    /* 4 IMAGES */
    .product-images .product-images-container.asset-count-4 {
        grid-template-columns: repeat(2, minmax(auto, 1fr));
        -ms-grid-columns: (minmax(auto, 1fr))[2];
        grid-column: 1 / span 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }
    @media screen and (min-width: 520px) {
        .product-images .product-images-container.asset-count-4 {
            grid-template-columns: repeat(4, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[4];
            grid-column: 1 / span 4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
        }
    }

    /* 3 IMAGES */
    .product-images .product-images-container.asset-count-3 {
        grid-template-columns: repeat(3, minmax(auto, 1fr));
        -ms-grid-columns: (minmax(auto, 1fr))[3];
        grid-column: 1 / span 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    .product-images .product-images-container.asset-count-3 img:nth-child(1){
        grid-column: 1 / span 1;
    }
    @media screen and (min-width: 520px) {
        .product-images .product-images-container.asset-count-3 {
            grid-template-columns: repeat(3, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[3];
            grid-column: 1 / span 5;
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
        }
        .product-images .product-images-container.asset-count-3 img:nth-child(1){
            grid-column: 1 / span 1;
        }
    }

    /* 2 IMAGES */
    .product-images .product-images-container.asset-count-2 {
        grid-template-columns: repeat(2, minmax(auto, 1fr));
        -ms-grid-columns: (minmax(auto, 1fr))[2];
        grid-column: 1 / span 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }
    .product-images .product-images-container.asset-count-2 img:nth-child(1){
        grid-column: span 1;
    }
    @media screen and (min-width: 520px) {
        .product-images .product-images-container.asset-count-2 {
            grid-template-columns: repeat(4, minmax(auto, 1fr));
            -ms-grid-columns: (minmax(auto, 1fr))[4];
            grid-column: 1 / span 4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
        }
        .product-images .product-images-container.asset-count-2 img:nth-child(1){
            grid-column: 2 / span 1;
        }
    }
    
    /* 1 IMAGE */
    .product-images .product-images-container.asset-count-1 img {
        grid-column: 2;
    }
}
/*--------------- END - PRODUCT IMAGE GALLERY ---------------*/