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




/*SLIDE 3 ANIMATIONS */
.slide.three{ left: 38%; bottom: -110%; width: 60%; max-width: 622px; max-height: 780px !important;
	-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.three.animate-in{ left: 42%; opacity: 1; bottom: -50%;
	-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.three.animate-out{ left: 40%; }

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

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



/*SLIDE 4 ANIMATIONS */
.slide.four{ left: 38%; bottom: -110%; width: 60%; max-width: 622px; max-height: 780px !important;
	-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: -50%;
	-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 { }








/* ==========================================================================
   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;
}




/* ==========================================================================
   MEDIA QUERIES - 800
   ========================================================================== */
@media only screen and (max-width : 800px) {
	#header {  height: 900px; }
	.title{ left: 0%!important; bottom: 25%!important; width: 90%!important; text-align: center; padding: 0 5%; }
	.subtitle{ left: 0%!important; top: 77%!important; width: 90%!important; 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%!important; }
	.subtitle.animate-in, .subtitle.animate-out{ top: 77%!important; }
	.slide.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 THREE */
	.slide.three { left: 50%; margin-left: -160px; bottom: -100%; width: 100%; max-width: 380px; }
	.slide.three.animate-in{ left: 48%; bottom: -52%;; }
	
	
	/* SLIDE FOUR */
	.slide.four { left: 50%; margin-left: -160px; bottom: -100%; width: 100%; max-width: 380px; }
	.slide.four.animate-in{ left: 48%; bottom: -52%;; }
	
	
	
 }


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


/* ==========================================================================
   MEDIA QUERIES - 480
   ========================================================================== */
@media only screen and (max-width : 480px) {
	/* SLIDE ONE */
	
 }


/* ==========================================================================
   MEDIA QUERIES - 320
   ========================================================================== */
@media only screen and (max-width : 380px) {
	
	/* SLIDE THREE */
	.slide.three { left: 56%; top: 100%; width: 100%; }
	.slide.three.animate-in{ left: 40%; top: 95%; height: 400px;}
	
	
	/* SLIDE FOUR */
	.slide.four { left: 56%; top: 100%; width: 100%; }
	.slide.four.animate-in{ left: 40%; top: 95%; height: 400px;}
	
	.logo, .logofoot {
	position: relative;
		max-width: 106px;}
	
	
		
		
 }