@charset "UTF-8";
/* CSS Document */

.photoFrame{
	position:relative;
	padding-top:50px;
	/*padding-bottom:200px;*/
	margin-bottom:2vw;
}
.collectionThumbs{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows:150px;
    grid-gap:15px;
    xbackground: #ffffff;
    padding-bottom:20px;
}
.collectionNavThumbs{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows:150px;
    grid-gap:15px;
}
.lightbox{
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-rows:150px 300px;
    grid-gap:4px;
    grid-auto-flow: dense;
}
.collectionThumbs .image{
    box-sizing: border-box;
    border: 1px solid #666;
    /*box-shadow: 1px 1px 4px rgba(0,0,0,.3);*/
}
.productWrap{
	position:relative;
	padding-top:10px;
	/*padding-bottom:200px;*/
	margin-bottom:25vw;
}
.productIndex{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows:200px;
    grid-gap:15px;
}
.gallery-item{
    width:100%;
    height:100%;
    position:relative;
}

.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}
.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.gallery-item:hover .image img{
    transform:scale(1.5);
}
.gallery-item .itemtext{
    text-align: left;
    color:#999999;
    padding: 5px;
}
.gallery-item .label{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
	font-family:Arial, Helvetica, sans-serif;
    color: #fff;
	background-color: rgba(0,0,0,.3);
	border-radius:5px;
    font-size:15px;
    pointer-events:none;
    z-index:4;
    transition: .3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
}

.gallery-item:hover .label{
    opacity:1;
    animation: move-down .3s linear;
    padding:1em;
    width:80%;
}

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}

@media screen and (max-width:560px){ 
    .productIndex{
        grid-template-columns: repeat(4,1fr);
    }
}
@media screen and (max-width:760px){
    .productIndex{
        grid-template-columns: repeat(3,1fr);
    }

}
@media screen and (max-width:500px){
    
    .collectionThumbs{
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows:200px;
    } 
	.productIndex{
        grid-template-columns: repeat(1,1fr);
		grid-auto-rows:400px;
    }
    .lightbox{
        grid-template-columns: repeat(1,1fr);
    }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
    }
	/* .h-1,.h-2,.h-3,.h-4,.h-5,.h-6{
        grid-column:span 2;
    }*/
}
/
@media screen and (min-width:640px){ 
	.collectionThumbs{
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows:100px;
	}
} 
@media screen and (min-width:840px){ 
	.collectionThumbs{
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows:130px;
	}
} 
@media screen and (min-width:960px){ 
	.collectionThumbs{
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows:150px;
	}
} 
@media screen and (min-width:1160px){ 
	.collectionThumbs{
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows:180px;
	}
} 
@media screen and (min-width:1280px){ 
	.collectionThumbs{
		grid-template-columns: repeat(6,1fr);
		grid-auto-rows:200px;
	}
} 
@media screen and (max-width:360px){
    .collectionThumbs{
        grid-template-columns: repeat(1,1fr);
        grid-auto-rows:200px;
    } 	
}

@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}