/* ==========================================================================
   Slider Animations
   ========================================================================== */


/*SLIDE 1 ANIMATIONS */
.slide.one{ left: 0%; width: 52%; max-width: 578px; max-height: 754px; bottom: -100%; }
.slide.one.animate-in { bottom: -50%; }
.slide.one.animate-out { }

.title.one { left: 58%; width: 35%; bottom: 10%; }
.title.one.animate-in { bottom: 6%; }
.title.one.animate-out { }

.subtitle.one { top: 99%; width: 35%; left: 58%; }
.subtitle.one.animate-in { top: 96%; }
.subtitle.one.animate-out { }




/*SLIDE 2 ANIMATIONS */
.slide.twoOne, .slide.twoThree, .slide.twoTwo{ left: 17%; top: 0%; width: 50%; max-width: 261px; max-height: 523px !important; }
.slide.twoTwo{ left: 35%; max-width: 327px; max-height: 653px !important; }
.slide.twoThree{ left: 60%; }

.slide.twoOne.animate-in{ top: 79%; }
.slide.twoTwo.animate-in{ top: 72%;
	-webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -o-transition-duration: 1.5s; -ms-transition-duration: 1.5s; transition-duration: 1.5s;
}
.slide.twoThree.animate-in{ top: 79%;
	-webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s;
}
.slide.twoOne.animate-out{ }
.slide.twoTwo.animate-out{ -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -o-transition-duration: 1.5s; -ms-transition-duration: 1.5s; transition-duration: 1.5s; }
.slide.twoThree.animate-out{ -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }


/*SLIDE 3 ANIMATIONS */
.slide.three{ left: 50%; margin-left: -501px; width: 1003px; max-width: 1003px; max-height: 521px !important; top: 180%;}
.slide.three.animate-in{ top: 100%; }
.slide.three.animate-out{ top: 180%; }

.title.three { left: 0%; width: 100%; text-align: center; bottom: 100%; }
.title.three.animate-in { bottom: 22%; }
.title.three.animate-out { }

.subtitle.three { top: 78%; width: 100%; left: 0%; text-align: center; display: block;  }
.subtitle.three.animate-in {}
.subtitle.three.animate-out {  }




/*SLIDE 4 ANIMATIONS */
.slide.four{ left: 38%; bottom: -110%; width: 60%; max-width: 622px; max-height: 780px;
	-moz-transform: scale(1) rotate(-50deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-webkit-transform: scale(1) rotate(-50deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-o-transform: scale(1) rotate(-50deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-ms-transform: scale(1) rotate(-50deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	transform: scale(1) rotate(-50deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.slide.four.animate-in{ left: 42%; opacity: 1; bottom: -45%;
	-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.slide.four.animate-out{ left: 40%; }

.title.four { left: 5%; width: 30%; bottom: 7%; }
.title.four.animate-in { bottom: 4%; }
.title.four.animate-out { }

.subtitle.four { left: 5%; top: 101%; width: 30%; } 
.subtitle.four.animate-in { top: 98%; }
.subtitle.four.animate-out { }




/*SLIDE 5 ANIMATIONS */
.slide.five{ left: 0%; width: 50%; max-width: 502px; max-height: 610px !important; top: 73%; }
.slide.five.animate-in{ left: 4%; }
.slide.five.animate-out{ left: 0%; }

.title.five { left: 55%; width: 35%; bottom: 5%; }
.title.five.animate-in { bottom: 3%; }
.title.five.animate-out { opacity: 0; }

.subtitle.five { left: 55%; top: 102%; width: 35%; }
.subtitle.five.animate-in { top: 99%; }
.subtitle.five.animate-out { }


/*SLIDE 6 ANIMATIONS */
.title.six { left: 0%; width: 100%; text-align: center; bottom: 0%; font-size: xx-large; text-shadow: none; top: 120px;}
.title.six.animate-in { top: 400px;}
.title.six.animate-out { }

.stats.six{ 
	left: 50%; 
	margin-left: -501px;
	width: 1003px; 
	max-width: 1003px; 
	max-height: 521px !important; 
	top: 100%; 
	position: absolute;
	color: #606060;
	text-shadow: none;
	
}
.stats.six.animate-in{ top: 75%; }
.stats.six.animate-out{ top: 10%; }

.slide.six{ left: 50%; margin-left: -501px; width: 1003px; max-width: 1003px; max-height: 521px !important; top: 10%;}
.slide.six.animate-in{ top: 88%; }
.slide.six.animate-out{ top: 10%; }

.subtitle.six {  top: 125%; width: 100%; left: 0%; text-align: center; display: block; font-size: xx-large; text-shadow: none;}
.subtitle.six.animate-in {top: 132%;}
.subtitle.six.animate-out {  }




/* ==========================================================================
   GLOBAL ANIMATION SPEEDS
   ========================================================================== */
.animate-in{
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
	opacity: 1;
}
.animate-out {
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	-ms-transition-duration: .5s;
	transition-duration: .5s;
	opacity: 0;
}


.prevNext{
	display: none;
}

#header { 
	height: 100vh;

}
.header-container {
	background-image: url('../img/windingroadscenic.jpg') !important;
	background-size: cover;
	background-position: center bottom; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
}




@media only screen and (max-width : 768px) {
	.title{ left: 0%; bottom: 25%; width: 90%; text-align: center; padding: 0 5%; }
	.subtitle{ left: 0%; top: 77%; width: 90%; text-align: center; padding: 0 5%; }
	.title.animate-in, .title.animate-out, .subtitle.animate-in, .subtitle.animate-out{ left: 0%; width: 100%; }
	.title.animate-in, .title.animate-out{ bottom: 25%; }
	.subtitle.animate-in, .subtitle.animate-out{ top: 77%; }
	.slide.animate-in, .slide.animate-out{ left: 0px; }
	.stats.animate-in, .slide.animate-out{ left: 0px; }

	#nav{ top: 15%; display: none!important; }
	.prevNext{ display: block; }
	.next, .prev {
		position: absolute; opacity: 1; width: 100px;height: 100px; border-radius: 50px; z-index: 9999; cursor: pointer; top: 45%;
		background-color: rgba(0, 0, 0, .1);
		-webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s;	
	}
		
	.prev { left: -50px; background-position: 40px center!important; }
	.next { right: -50px; background-position: -120px center!important;  }
	
	.next:hover,.prev:hover {
		background-color: rgba(0, 0, 0, .6);
		-webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s;
	}
	
	
	/* SLIDE SIX */
	.title.six{ width: 90%;}

	.stats.six { left: 50%; margin-left: -400px; width: 800px; }
	.stats.six.animate-in { top: 75%; }

	.slide.six { left: 50%; margin-left: -400px; width: 800px; }
	
	.subtitle.six{ top: 100%; width: 90%;}
	.subtitle.six.animate-in {top: 128%;}

/*
	.header-container {
		background-image: url("/img/bg800w.jpg");
	}
*/

 }




/* ==========================================================================
   MEDIA QUERIES - 736
   ========================================================================== */ 
@media only screen and (max-width : 736px) {
	
	/* SLIDE SIX */

	.title.six{ font-size: x-large;}
	.title2ndline {font-size: large}
	
	.stats.six { left: 50%; margin-left: -333px; width: 667px; font-size: x-large}
	.stats.six.animate-in { top: 72%; }
	
	.slide.six { left: 50%; margin-left: -333px; }
	
	.subtitle.six{ top: 90%; font-size: xx-large}
	.subtitle.six.animate-in {top: 128%;}

/*
	.header-container {
		background-image: url("/img/bg736w.jpg");
	}
*/


}

/* ==========================================================================
   MEDIA QUERIES - 568
   ========================================================================== */ 
@media only screen and (max-width : 568px) {
	
	/* SLIDE SIX */
	.title.six{ font-size: x-large}
	.title2ndline {font-size: large}

	.stats.six { left: 50%; margin-left: -284px; width: 568px; font-size: x-large}
	.stats.six.animate-in { top: 72%; }

	.slide.six { left: 50%; margin-left: -284px; width: 568px; }

	.subtitle.six{ top: 100%; }
	.subtitle.six.animate-in {top: 128%;}

/*
	.header-container {
		background-image: url("/img/bg568w.jpg");
	}
*/

}


/* ==========================================================================
   MEDIA QUERIES - 414
   ========================================================================== */
@media only screen and (max-width : 414px) {
	
	/* SLIDE SIX */
	.title.six{ font-size: large}
	.title2ndline {font-size: medium}

	
	.stats.six { left: 50%; margin-left: -207px; width: 414px; font-size: medium}
	.stats.six.animate-in { top: 72%; }
	
	.slide.six { left: 50%; margin-left: -207px; width: 414px; }
	
	.subtitle.six{ top: 125%; }
	.subtitle.six.animate-in {top: 128%;}
	
/*
	.header-container {
		background-image: url("/img/bg414w.jpg");
	}
*/

 }
 
 /* ==========================================================================
   MEDIA QUERIES - 375
   ========================================================================== */
@media only screen and (max-width : 375px) {
	
	/* SLIDE SIX */
	.title.six{ font-size: medium}
	.title2ndline {font-size: small}


	.stats.six { left: 50%; margin-left: -187px; width: 375px; font-size: medium}
	.stats.six.animate-in { top: 85%; }	
	
	
	.slide.six { left: 50%; margin-left: -187px; width: 375px; }
	

	.subtitle.six{ top: 127%; }
	.subtitle.six.animate-in {top: 128%;}

/*
	.header-container {
		background-image: url("/img/bg375w.jpg");
	}
*/
	
 }


/* ==========================================================================
   MEDIA QUERIES - 320
   ========================================================================== */
@media only screen and (max-width : 320px) {

	
	/* SLIDE SIX */
	.title.six{ font-size: small}
	.title2ndline {font-size: smaller}
	
	.stats.six { left: 50%; margin-left: -160px; width: 320px; font-size: small}
	.stats.six.animate-in { top: 75%; }	
	
	.slide.six { left: 50%; margin-left: -160px; width: 320px; }
	
	.subtitle.six{ font-size: large}
	.subtitle.six.animate-in {top: 128%;}
}
/*
	.header-container {
		background-image: url("/img/bg320w.jpg");
	}
*/

@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   .title.six{ width: 60%}
   	.slide.six { width: 50%; }
}