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

@import url(https://fonts.googleapis.com/css?family=Istok+Web);
/*
@keyframes slidy {
	
	0% { left: 0%; opacity:0 }
	1% { left: 0%; opacity:1 }
	20% { left: 0%; opacity:1 }
	24% {left:0%; opacity: 0}
	25% { left: -100%; opacity:0 }
	26% { left: -100%; opacity:1 }
	45% { left: -100%; opacity:1 }
	46% { left: -100%; opacity:0 }
	50% { left: -200%; opacity:0 }
	51% { left: -200%; opacity:1 }
	70% { left: -200%; opacity:1 }
	71% { left: -200%; opacity:0 }
	75% { left: -300%; opacity:0 }
	76% { left: -300%; opacity:1 }
	95% { left: -300%; opacity:1 }
	96% { left: -300%; opacity:0 }
	100% { left: -400%; opacity:0 }
}
*/
@keyframes slidy {
	
	0% { left: 0%}
	8.3% { left:0%}
	16.6% { left:-100%}
	24.9% { left: -100%}
	33.2% { left: -200%}
	41.5% { left: -200%}
	49.8% { left: -300%}
	58.1% { left: -300%}
	66.4% { left:-400%}
	74.7% { left: -400%}
	83% { left: -500%}
	91.3% { left: -500%}
	100% { left:0%}
}
* {
  box-sizing: border-box;
}
#Slide-1 {
			background-image:url("/images/Slide-7.jpg");
		}
		#Slide-2 {
			background-image: url("/images/Slide-8.jpg");
		}
		#Slide-3 {
			background-image: url("/images/Slide-9.jpg");
		}
		#Slide-4 {
			background-image: url("/images/Slide-10.jpg");
		}
		#Slide-5 {
			background-image: url("/images/Slide-11.jpg");
		}
		#Slide-6 {
			background-image: url("/images/Slide-12.jpg");
		}
		/*
		@media screen and (min-width:768px) and (orientation:portrait) {
			#Slide-1 {
				background-image:url(images/slideshow/Slide5_TabletP.jpg);
			}
			#Slide-2 {
				background-image: url(images/slideshow/Slide6_TabletP.jpg);
			}
			#Slide-3 {
				background-image: url(images/slideshow/Slide2_TabletP.jpg);
			}
			#Slide-4 {
				background-image: url(images/slideshow/Slide4_TabletP.jpg);
			}
		}
		
		@media screen and (min-width:768px) and (orientation:landscape){
			#Slide-1 {
				background-image:url(images/slideshow/Slide5_TabletL.jpg);
			}
			#Slide-2 {
				background-image: url(images/slideshow/Slide6_TabletL.jpg);
			}
			#Slide-3 {
				background-image: url(images/slideshow/Slide2_TabletL.jpg);
			}
			#Slide-4 {
				background-image: url(images/slideshow/Slide4_TabletL.jpg);
			}
		}
		*/
		@media screen and (min-width:1025px){
			#Slide-1 {
				background-image:url("/images/Slide-1.jpg");
			}
			#Slide-2 {
				background-image: url(/images/Slide-2.jpg);
			}
			#Slide-3 {
				background-image: url(/images/Slide-3.jpg);
			}
			#Slide-4 {
				background-image: url("/images/Slide-4.jpg");
			}
			#Slide-5 {
				background-image: url("/images/Slide-5.jpg");
			}
			#Slide-6 {
				background-image: url("/images/Slide-6.jpg");
			}
		}
#captioned-gallery { 
  	width: 100%; 
	height: 70vh;
	overflow: hidden; 
	background-color:#000;
}

figure {
	margin:0;
	width:100%;
	height: 100vh;
	overflow: hidden;
}
figure.slider { 
	position: relative; 
	width: 600%;
	animation: 30s slidy infinite; 
	background-color:#000;
}
figure.slider figure { 
  	width: 16.666%; 
  	display:block;
	float: left;
	position: inherit; 
	padding:0;
}
figure.slider-img { 
	width: 100%;
	height:100vh;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

figure.slider figure figcaption { 
		color: #fff; 
		width:100%;
		font-size: 3em;
		font-family: "DIN";
		text-align: center;
		display: block;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		margin-top:50vh;
	}

@media screen and (min-width:768px) and (orientation:portrait) {
	#captioned-gallery {
		width:100%;
		height:100vh;
	}
}

@media screen and (min-width:768px) and (orientation:landscape){
	#captioned-gallery {
		width:100%;
		height:100vh;
	}
	
	figure.slider figure {
		height:100%;
	}
	
	figure {
		margin:0;
		width:100%;
		height: 100vh;
		overflow: hidden;
	}
	
	figure.slider figure figcaption { 
		border-radius: 0;
	}
}

@media screen and (min-width:1025px){
	#captioned-gallery {
		width:100%;
		height: 70vh;
		z-index: 1;
	}
	
	figure.slider figure {
		height:100%;
	}
	
	figure {
		margin:0;
		width:100%;
		height: 100vh;
		overflow: hidden;
	}
	
	figure.slider figure figcaption { 
		color: #fff; 
		max-width:70%;
		font-size: 5em;
		font-family: "DIN";
		text-align: center;
		display: block;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		margin-top:50vh;
	}
}