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

		#showImage1{
			
			position:relative;
			display:block;
			grid-area:Area1;
			z-index: 3;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
		}
		
		#showImage2{
			
			position:relative;
			display:none;
			grid-area: Area1;
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
		}
		
		#showImage3{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}


		#showImage4{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}
		
		#showImage5{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}

		#showImage6{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}


		#showImage7{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}


		#showImage8{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}


		#showImage9{
			position:relative;
			display:none;
			grid-area: Area1;			
			z-index: 2;
			Transition-timing-function: cubic-bezier(.95,.01,.07,.99);
			
		}



		
.Main-gallery{
	border: 1px dashed var(--toggle);
	/* background-color:turquoise; */
	display:grid;
	grid-template-columns: 1fr minmax(auto, 800px) 1fr;
	grid-template-rows:1fr;
	grid-template-areas:".Area1.";
	flex-shrink: 1;
	cursor: pointer;
		
}

.main-gallery-image-dots{
	cursor:pointer;
	
}

#placeholder{
	grid-area:Area1;
	display:none;
}

.thumbnails{
	border: 1px dashed var(--toggle);
	cursor:pointer;
		}		

.divider {
	border: 1px dashed var(--toggle);
	height:50px;
}		



.Grid-dynamic-size{
	border: 1px dashed var(--toggle);
	grid-area: Area1;
	
}


@keyframes fade {
	from {opacity: .4;}
	to {opacity:1;}
}




@keyframes grow {
	from{ width: 0%;object-position:center; padding-top: 50%}
	to { width:100%; object-position:center;}
		}		
		

	
@keyframes reveal {
		0%{
		clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0% );
		}
		
		100%{
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		}