/* ----------------------------------------------------WEB VIEW-------------------------------- */
@media screen and (min-width: 800px){
    body{
        background-color: white;
    }

    /*Gallery Container*/
    #index-gallery-t, #index-gallery-h, #index-gallery-w , #index-gallery-all{
        padding-top: 2%;
        padding-bottom: 5%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
        grid-template:
            "img1 img2 img3 img4" 
            "img5 img6 img7 img8"
            "img9 img10 img11 img12"
            "img13 img14 img15 img16"
            "img17 img18 img19 img20"
            "img21 img22 img23 img24"
            "img25 img26 img27 img28"
            "img29 img30 img31 img32"
            "img33 img34 img35 img36"
            "img37 img38 img39 img40"
            ;
    }

    #index-gallery-t .tile-gallery-img, #index-gallery-h .hardwood-gallery-img, #index-gallery-w .woodfloor-gallery-img, #index-gallery-all .all-gallery-img{
        width: 200px;
        height: 200px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        cursor: pointer;
    }


    /* Gallery image styling*/
    .tile-gallery-img div , .hardwood-gallery-img div, .woodfloor-gallery-img div , .all-gallery-img div{
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tile-gallery-img a , .hardwood-gallery-img a , .woodfloor-gallery-img a, .all-gallery-img a{
        font-size: 10px;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
    }
    .tile-gallery-img div:hover, .hardwood-gallery-img div:hover, .woodfloor-gallery-img div:hover, .all-gallery-img div:hover{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
    }

    /* Popup window when clicked*/
    .img-window {
    margin-top: 5%;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    -webkit-animation: fadeIn 0.5s ease;
    animation: fadeIn 0.5s ease;
    overflow: auto;
}

.img-window img {
    max-height: 80vh;
    max-width: 80vw;
    -webkit-animation: fadeIn 0.5s ease;
    animation: fadeIn 0.5s ease;
    transition: transform 0.3s ease;
}

.img-window img:hover {
    transform: scale(1.05);
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

    @-webkit-keyframes fadeIn {
        0% {opacity: 0;}
        20% {opacity: 1;}
    }
    @keyframes fadeIn {
        0% {opacity: 0;}
        20% {opacity: 1;}
    }
    

    /* Button Next */
    .img-btn-next{
        display: block;
        padding: 0px 20px;
        border-radius: 50%;
        background-color: white;
        position: fixed;
        top: 68vh;
        z-index: 500;
        color: black;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 50px;
    }
    .img-btn-next:hover {
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(1.08);
    }
    .img-btn-next:active{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(0.95);
        color: rgb(85, 109, 189);
    }

    /* Button Prev */
    .img-btn-prev {
        display: block;
        padding: 0px 20px;
        border-radius: 50%;
        background-color: white;
        position: fixed;
        top: 68vh;
        z-index: 500;
        color: black;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 50px;
    }
    .img-btn-prev:hover {
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(1.08);
    }
    .img-btn-prev:active{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(0.95);
        color: rgb(189, 3, 3);
    }

}

/*------------------------------------------------------ PHONE VIEW ------------------------------------------------------ */
@media screen and (max-width: 799px){

    body{
        background-color: white;
    }

    /*Gallery Container*/
    #index-gallery-t, #index-gallery-h, #index-gallery-w,  #index-gallery-all{
        position: relative;
        padding-top: 5%;
        padding-bottom: 20%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 15px;
        grid-template:
            "img1 img2" 
            "img3 img4"
            "img5 img6"
            "img7 img8"
            "img9 img10"
            "img11 img12"
            "img13 img14"
            "img15 img16"
            "img17 img18"
            "img19 img20"
            "img21 img22"
            "img23 img24"
            "img25 img26"
            "img27 img28"
            "img29 img30"
            "img31 img32"
            "img33 img34"
            "img35 img36"
            "img37 img38"
            "img39 img40"
            ;
    }

    #index-gallery-t .tile-gallery-img, #index-gallery-h .hardwood-gallery-img, #index-gallery-w .woodfloor-gallery-img , #index-gallery-all .all-gallery-img{
        width: 120px;
        height: 120px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        cursor: pointer;
    }


    /* Gallery image styling*/
    .tile-gallery-img div , .hardwood-gallery-img div, .woodfloor-gallery-img div, .all-gallery-img div{
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tile-gallery-img a , .hardwood-gallery-img a , .woodfloor-gallery-img a, .all-gallery-img a{
        font-size: 10px;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
    }
    .tile-gallery-img div:hover, .hardwood-gallery-img div:hover, .woodfloor-gallery-img div:hover, .all-gallery-img div:hover{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
    }

    /* Popup window when clicked*/
    .img-window {
    margin-top: 5%;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    -webkit-animation: fadeIn 0.5s ease;
    animation: fadeIn 0.5s ease;
    overflow: auto;
}

.img-window img {
    max-height: 80vh;
    max-width: 80vw;
    -webkit-animation: fadeIn 0.5s ease;
    animation: fadeIn 0.5s ease;
    transition: transform 0.3s ease;
}

.img-window img:hover {
    transform: scale(1.05);
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

    @-webkit-keyframes fadeIn {
        0% {opacity: 0;}
        20% {opacity: 1;}
    }
    @keyframes fadeIn {
        0% {opacity: 0;}
        20% {opacity: 1;}
    }

    /* Button Next */
    .img-btn-next{
        display: block;
        margin-right: 15px;
        padding: 0px 15px;
        border-radius: 50%;
        background-color: white;
        position: fixed;
        top: 50vh;
        z-index: 500;
        color: black;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 50px;
        -webkit-tap-highlight-color: transparent;
    }
    .img-btn-next:hover {
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(1.08);
    }
    .img-btn-next:active{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(0.95);
        color: rgb(85, 109, 189);
    }

    /* Button Prev */
    .img-btn-prev {
        display: block;
        margin-left: 15px;
        padding: 0px 15px;
        border-radius: 50%;
        background-color: white;
        position: fixed;
        top: 50vh;
        z-index: 500;
        color: black;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 50px;
        -webkit-tap-highlight-color: transparent;
    }
    .img-btn-prev:hover {
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(1.08);
    }
    .img-btn-prev:active{
        opacity: 0.7;
        transition: all ease-in-out 100ms;
        transform: scale(0.95);
        color: rgb(85, 109, 189);
    }
}




/* Library Wrapper */
.wrapper-gallery{
    margin:0 20vw;
    margin-left: 16%;
    margin-right: 14%;
} 





 /* --------------------------------------------------Tile Images--------------------------------------*/

#index-gallery-t .img1{
    grid-area: img1;
    background-image: url("imgs/img/thumbs/Tiles/img1.jpg");
}
#index-gallery-t .img2{
    grid-area: img2;
    background-image: url("imgs/img/thumbs/Tiles/img2.jpg");
}
#index-gallery-t .img3{
    grid-area: img3;
    background-image: url("imgs/img/thumbs/Tiles/img3.jpg");
}
#index-gallery-t .img4{
    grid-area: img4;
    background-image: url("imgs/img/thumbs/Tiles/img4.jpg");
}
#index-gallery-t .img5{
    grid-area: img5;
    background-image: url("imgs/img/thumbs/Tiles/img5.jpg");
}
#index-gallery-t .img6{
    grid-area: img6;
    background-image: url("imgs/img/thumbs/Tiles/img6.jpg");
}
#index-gallery-t .img7{
    grid-area: img7;
    background-image: url("imgs/img/thumbs/Tiles/img7.jpg");
}
#index-gallery-t .img8{
    grid-area: img8;
    background-image: url("imgs/img/thumbs/Tiles/img8.jpg");
}
#index-gallery-t .img9{
    grid-area: img9;
    background-image: url("imgs/img/thumbs/Tiles/img9.jpg");
}
#index-gallery-t .img10{
    grid-area: img10;
    background-image: url("imgs/img/thumbs/Tiles/img10.jpg");
}
#index-gallery-t .img11{
    grid-area: img11;
    background-image: url("imgs/img/thumbs/Tiles/img11.jpg");
}
#index-gallery-t .img12{
    grid-area: img12;
    background-image: url("imgs/img/thumbs/Tiles/img12.jpg");
}
#index-gallery-t .img13{
    grid-area: img13;
    background-image: url("imgs/img/thumbs/Tiles/img13.jpg");
}
#index-gallery-t .img14{
    grid-area: img14;
    background-image: url("imgs/img/thumbs/Tiles/img14.jpg");
}
#index-gallery-t .img15{
    grid-area: img15;
    background-image: url("imgs/img/thumbs/Tiles/img15.jpg");
}
#index-gallery-t .img16{
    grid-area: img16;
    background-image: url("imgs/img/thumbs/Tiles/img16.jpg");
}
#index-gallery-t .img17{
    grid-area: img17;
    background-image: url("imgs/img/thumbs/Tiles/img17.jpg");
}
#index-gallery-t .img18{
    grid-area: img18;
    background-image: url("imgs/img/thumbs/Tiles/img18.jpg");
}
#index-gallery-t .img19{
    grid-area: img19;
    background-image: url("imgs/img/thumbs/Tiles/img19.jpg");
}
#index-gallery-t .img20{
    grid-area: img20;
    background-image: url("imgs/img/thumbs/Tiles/img20.jpg");
}


#index-gallery-w .img1{
    grid-area: img1;
    background-image: url("imgs/img/thumbs/Woodfloor/img1.jpg");
}
#index-gallery-w .img2{
    grid-area: img2;
    background-image: url("imgs/img/thumbs/Woodfloor/img2.jpg");
}
#index-gallery-w .img2{
    grid-area: img2;
    background-image: url("imgs/img/thumbs/Woodfloor/img2.jpg");
}
#index-gallery-w .img3{
    grid-area: img3;
    background-image: url("imgs/img/thumbs/Woodfloor/img3.jpg");
}
#index-gallery-w .img4{
    grid-area: img4;
    background-image: url("imgs/img/thumbs/Woodfloor/img4.jpg");
}
#index-gallery-w .img5{
    grid-area: img5;
    background-image: url("imgs/img/thumbs/Woodfloor/img5.jpg");
}
#index-gallery-w .img6{
    grid-area: img6;
    background-image: url("imgs/img/thumbs/Woodfloor/img6.jpg");
}
#index-gallery-w .img7{
    grid-area: img7;
    background-image: url("imgs/img/thumbs/Woodfloor/img7.jpg");
}
#index-gallery-w .img8{
    grid-area: img8;
    background-image: url("imgs/img/thumbs/Woodfloor/img8.jpg");
}
#index-gallery-w .img9{
    grid-area: img9;
    background-image: url("imgs/img/thumbs/Woodfloor/img9.jpg");
}
*#index-gallery-w .img10{
    grid-area: img10;
    background-image: url("imgs/img/thumbs/Woodfloor/img10.jpg");
} 
#index-gallery-w .img11{
    grid-area: img11;
    background-image: url("imgs/img/thumbs/Woodfloor/img11.jpg");
}
#index-gallery-w .img12{
    grid-area: img12;
    background-image: url("imgs/img/thumbs/Woodfloor/img12.jpg");
}
#index-gallery-w .img13{
    grid-area: img13;
    background-image: url("imgs/img/thumbs/Woodfloor/img13.jpg");
}
#index-gallery-w .img14{
    grid-area: img14;
    background-image: url("imgs/img/thumbs/Woodfloor/img14.jpg");
}
#index-gallery-w .img15{
    grid-area: img15;
    background-image: url("imgs/img/thumbs/Woodfloor/img15.jpg");
}
#index-gallery-w .img16{
    grid-area: img16;
    background-image: url("imgs/img/thumbs/Woodfloor/img16.jpg");
}
#index-gallery-w .img17{
    grid-area: img17;
    background-image: url("imgs/img/thumbs/Woodfloor/img17.jpg");
}
#index-gallery-w .img18{
    grid-area: img18;
    background-image: url("imgs/img/thumbs/Woodfloor/img18.jpg");
}
#index-gallery-w .img19{
    grid-area: img19;
    background-image: url("imgs/img/thumbs/Woodfloor/img19.jpg");
}
#index-gallery-w .img20{
    grid-area: img20;
    background-image: url("imgs/img/thumbs/Woodfloor/img20.jpg");
}
#index-gallery-w .img21{
    grid-area: img21;
    background-image: url("imgs/img/thumbs/Woodfloor/img21.jpg");
}
#index-gallery-w .img22{
    grid-area: img22;
    background-image: url("imgs/img/thumbs/Woodfloor/img22.jpg");
}
#index-gallery-w .img23{
    grid-area: img23;
    background-image: url("imgs/img/thumbs/Woodfloor/img23.jpg");
}
#index-gallery-w .img24{
    grid-area: img24;
    background-image: url("imgs/img/thumbs/Woodfloor/img24.jpg");
}
#index-gallery-w .img25{
    grid-area: img25;
    background-image: url("imgs/img/thumbs/Woodfloor/img25.jpg");
}
#index-gallery-w .img26{
    grid-area: img26;
    background-image: url("imgs/img/thumbs/Woodfloor/img26.jpg");
}
#index-gallery-w .img27{
    grid-area: img27;
    background-image: url("imgs/img/thumbs/Woodfloor/img27.jpg");
}
#index-gallery-w .img28{
    grid-area: img28;
    background-image: url("imgs/img/thumbs/Woodfloor/img28.jpg");
}
#index-gallery-w .img29{
    grid-area: img29;
    background-image: url("imgs/img/thumbs/Woodfloor/img29.jpg");
} 


 /* --------------------------------------------------ALL Images--------------------------------------*/

 #index-gallery-all .img1{
    grid-area: img1;
    background-image: url("imgs/img/thumbs/All/img1.jpg");
}
#index-gallery-all .img2{
    grid-area: img2;
    background-image: url("imgs/img/thumbs/All/img2.jpg");
}
#index-gallery-all .img3{
    grid-area: img3;
    background-image: url("imgs/img/thumbs/All/img3.jpg");
}
#index-gallery-all .img4{
    grid-area: img4;
    background-image: url("imgs/img/thumbs/All/img4.jpg");
}
#index-gallery-all .img5{
    grid-area: img5;
    background-image: url("imgs/img/thumbs/All/img5.jpg");
}
#index-gallery-all .img6{
    grid-area: img6;
    background-image: url("imgs/img/thumbs/All/img6.jpg");
}
#index-gallery-all .img7{
    grid-area: img7;
    background-image: url("imgs/img/thumbs/All/img7.jpg");
}
#index-gallery-all .img8{
    grid-area: img8;
    background-image: url("imgs/img/thumbs/All/img8.jpg");
}
#index-gallery-all .img9{
    grid-area: img9;
    background-image: url("imgs/img/thumbs/All/img9.jpg");
}
#index-gallery-all .img10{
    grid-area: img10;
    background-image: url("imgs/img/thumbs/All/img10.jpg");
}
#index-gallery-all .img11{
    grid-area: img11;
    background-image: url("imgs/img/thumbs/All/img11.jpg");
}
#index-gallery-all .img12{
    grid-area: img12;
    background-image: url("imgs/img/thumbs/All/img12.jpg");
}
#index-gallery-all .img13{
    grid-area: img13;
    background-image: url("imgs/img/thumbs/All/img13.jpg");
}
#index-gallery-all .img14{
    grid-area: img14;
    background-image: url("imgs/img/thumbs/All/img14.jpg");
}
#index-gallery-all .img15{
    grid-area: img15;
    background-image: url("imgs/img/thumbs/All/img15.jpg");
}
#index-gallery-all .img16{
    grid-area: img16;
    background-image: url("imgs/img/thumbs/All/img16.jpg");
}
#index-gallery-all .img17{
    grid-area: img17;
    background-image: url("imgs/img/thumbs/All/img17.jpg");
}
#index-gallery-all .img18{
    grid-area: img18;
    background-image: url("imgs/img/thumbs/All/img18.jpg");
}
#index-gallery-all .img19{
    grid-area: img19;
    background-image: url("imgs/img/thumbs/All/img19.jpg");
}
#index-gallery-all .img20{
    grid-area: img20;
    background-image: url("imgs/img/thumbs/All/img20.jpg");
}
#index-gallery-all .img21{
    grid-area: img21;
    background-image: url("imgs/img/thumbs/All/img21.jpg");
}
#index-gallery-all .img22{
    grid-area: img22;
    background-image: url("imgs/img/thumbs/All/img22.jpg");
}
#index-gallery-all .img23{
    grid-area: img23;
    background-image: url("imgs/img/thumbs/All/img23.jpg");
}
#index-gallery-all .img24{
    grid-area: img24;
    background-image: url("imgs/img/thumbs/All/img24.jpg");
}
#index-gallery-all .img25{
    grid-area: img25;
    background-image: url("imgs/img/thumbs/All/img25.jpg");
}
#index-gallery-all .img26{
    grid-area: img26;
    background-image: url("imgs/img/thumbs/All/img26.jpg");
}
#index-gallery-all .img27{
    grid-area: img27;
    background-image: url("imgs/img/thumbs/All/img27.jpg");
}
#index-gallery-all .img28{
    grid-area: img28;
    background-image: url("imgs/img/thumbs/All/img28.jpg");
}
#index-gallery-all .img29{
    grid-area: img29;
    background-image: url("imgs/img/thumbs/All/img29.jpg");
}
#index-gallery-all .img30{
    grid-area: img30;
    background-image: url("imgs/img/thumbs/All/img30.jpg");
}
#index-gallery-all .img31{
    grid-area: img31;
    background-image: url("imgs/img/thumbs/All/img31.jpg");
}
#index-gallery-all .img32{
    grid-area: img32;
    background-image: url("imgs/img/thumbs/All/img32.jpg");
}
#index-gallery-all .img33{
    grid-area: img33;
    background-image: url("imgs/img/thumbs/All/img33.jpg");
}
#index-gallery-all .img34{
    grid-area: img34;
    background-image: url("imgs/img/thumbs/All/img34.jpg");
}
#index-gallery-all .img35{
    grid-area: img35;
    background-image: url("imgs/img/thumbs/All/img35.jpg");
}
#index-gallery-all .img36{
    grid-area: img36;
    background-image: url("imgs/img/thumbs/All/img36.jpg");
}
#index-gallery-all .img37{
    grid-area: img37;
    background-image: url("imgs/img/thumbs/All/img37.jpg");
}
#index-gallery-all .img38{
    grid-area: img38;
    background-image: url("imgs/img/thumbs/All/img38.jpg");
}

#index-gallery-all .img39{
    grid-area: img39;
    background-image: url("imgs/img/thumbs/All/img39.jpg");
}

#index-gallery-all .img40{
    grid-area: img40;
    background-image: url("imgs/img/thumbs/All/img40.jpg");
}
#index-gallery-all .img41{
    grid-area: img41;
    background-image: url("imgs/img/thumbs/All/img41.jpg");
}
#index-gallery-all .img42{
    grid-area: img42;
    background-image: url("imgs/img/thumbs/All/img42.jpg");
}
#index-gallery-all .img43{
    grid-area: img43;
    background-image: url("imgs/img/thumbs/All/img43.jpg");
}
#index-gallery-all .img44{
    grid-area: img44;
    background-image: url("imgs/img/thumbs/All/img44.jpg");
}
#index-gallery-all .img45{
    grid-area: img45;
    background-image: url("imgs/img/thumbs/All/img45.jpg");
}
#index-gallery-all .img46{
    grid-area: img46;
    background-image: url("imgs/img/thumbs/All/img46.jpg");
}
#index-gallery-all .img47{
    grid-area: img47;
    background-image: url("imgs/img/thumbs/All/img47.jpg");
}
#index-gallery-all .img48{
    grid-area: img48;
    background-image: url("imgs/img/thumbs/All/img48.jpg");
}