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

/*SLIDE 1 ANIMATIONS */
.slide.one{ left: 0%; width: 52%; max-width: 578px; max-height: 754px !important; 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.two{ left: 0%; width: 49%; top: 77%; }
.slide.two.animate-in{ left: 4%; }
.slide.two.animate-out{ left: 0%; }

.title.two { left: 55%; width: 35%; bottom: 6%; }
.title.two.animate-in { bottom: 1%; }
.title.two.animate-out { opacity: 0; }

.subtitle.two { left: 55%; top: 96%; width: 35%; }
.subtitle.two.animate-in { top: 101%; }
.subtitle.two.animate-out { }

/*SLIDE 3 ANIMATIONS */
.slide.three{ left: 38%; bottom: -110%; width: 45%; max-width: 660px; max-height: 793px !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: -27%;
	-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: 24%; }
.title.three.animate-in { bottom: 19%; }
.title.three.animate-out { }

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

/*SLIDE 4 ANIMATIONS */
.slide.four{ left: 38%; bottom: -110%; width: 43%; max-width: 660px; max-height: 793px !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: 10%; }
.title.four.animate-in { bottom: 7%; }
.title.four.animate-out { }

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

/*SLIDE 5 ANIMATIONS */
.slide.five{ left: 0%; width: 38%; max-width: 532px; max-height: 606px !important; top: 72%; }
.slide.five.animate-in{ left: 4%; }
.slide.five.animate-out{ left: 0%; }

.title.five { left: 48%; width: 35%; bottom: -1%; }
.title.five.animate-in { bottom: -6%; }
.title.five.animate-out { opacity: 0; }

.subtitle.five { left: 48%; top: 103%; width: 35%; }
.subtitle.five.animate-in { top: 108%; }
.subtitle.five.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 { 
        padding: 3% 0;
    }
    .container_12, .grid_2, .grid_12, .grid_4, #cover #title h3 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #product-features .grid_4 {
        margin-bottom: 5% !important;
    }
    #slider-holder {
        top: 6%;
        bottom: 0;
    }
    #slider-holder div.slide-panel {
        position: static;
    }
    #header .grid_2 {
        text-align: center;
    }
    #header .grid_2 img {
        max-height: 100%;
        max-width: 50%;
    }
    #header .grid_10 {
        display: none;
    }
    #cover .cover_container, #product-features {
        padding: 5%;   
        background: transparent;
    }
    #cover #title p {
        margin: 0 0 4%;
    }
    #cover #title h3 {
        text-align: center;
    }
    #cover #title h3 a {
        float: none;
        font-size: 11px;
        padding: 0 1em !important;
    }
    #cover #title h3 a.glink {
       font-size: 10px;
       padding: 0 !important;
    }
    #cover #title {
        padding: 0;
        width: 100%;
        height: auto;
        min-height: 0px;
    }
    #cover .flexslider {
        display: none;
    }
	.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 ONE */
	.slide.one{ left: 50%; margin-left: -240px; width: 380px; bottom: -58%; }
	.slide.one.animate-in { bottom: -58%; }
	
	/* SLIDE TWO */
	.slide.two { width: 380px; margin-left: -225px; left: 50%; top: 100%; }
	.slide.two.animate-in{ left: 50%; }
	.slide.two.animate-out{ left: 50%; }
	
	/* SLIDE THREE */
	.slide.three { left: 50%; margin-left: -160px; bottom: -100%; width: 100%; max-width: 380px; }
	.slide.three.animate-in{ left: 50%; bottom: -35%; }
	
	/* SLIDE FOUR */
	.slide.four { left: 50%; margin-left: -160px; bottom: -100%; width: 100%; max-width: 380px; }
	.slide.four.animate-in{ left: 50%; bottom: -50%;; }
	
	/* SLIDE FIVE */
	.slide.five { width: 380px; margin-left: -225px; left: 50%; top: 100%; }
	.slide.five.animate-in{ left: 50%; }
	.slide.five.animate-out{ left: 50%; }
	
}

/* ==========================================================================
   MEDIA QUERIES - 640
   ========================================================================== */ 
@media only screen and (max-width : 640px) {
	/* SLIDE ONE */
	.slide.one{ left: 50%; margin-left: -220px; width: 360px; bottom: -100%; }
	.slide.one.animate-in { bottom: -52%; }

	/* SLIDE TWO */
	.slide.two { left: 46%;  top: 102%;  width: 320px; margin-left: -180px;}
	.slide.two.animate-in{ left: 46%; }
	
	/* SLIDE FIVE */
	.slide.five { left: 46%;  top: 102%;  width: 320px; margin-left: -180px;}
	.slide.five.animate-in{ left: 46%; }

}

/* ==========================================================================
   MEDIA QUERIES - 480
   ========================================================================== */
@media only screen and (max-width : 480px) {
	/* SLIDE ONE */
	.slide.one{ left: 50%; margin-left: -220px; width: 360px; bottom: -100%; }
	.slide.one.animate-in { bottom: -52%; }
	
        /* SLIDE TWO */
	.slide.two { left: 46%; top: 102%;  width: 320px; margin-left: -180px; }
	.slide.two.animate-in{ left: 46%; }

	/* SLIDE FIVE */
	.slide.five { left: 46%; top: 102%;  width: 320px; margin-left: -180px; }
	.slide.five.animate-in{ left: 46%; }	
}

/* ==========================================================================
   MEDIA QUERIES - 320
   ========================================================================== */
@media only screen and (max-width : 380px) {
	/* SLIDE ONE */
	.slide.one{ left: 50%; margin-left: -190px; width: 300px; bottom: -100%; }
	.slide.one.animate-in { bottom: -50%; }
	
	
	/* SLIDE TWO */
	.slide.two { left: 46%; margin-left: -135px; top: 106%; width: 270px!important; }
	.slide.two.animate-in{ left: 46%; }

	/* SLIDE THREE */
	.slide.three { left: 52%; top: 150%; width: 100%; }
	.slide.three.animate-in{ left: 52%; top: 103%; }
	
	/* SLIDE FOUR */
	.slide.four { left: 52%; top: 150%; width: 100%; }
	.slide.four.animate-in{ left: 52%; top: 103%; }

	/* SLIDE FIVE */
	.slide.five { left: 46%; margin-left: -135px; top: 106%; width: 270px!important; }
	.slide.five.animate-in{ left: 46%; }	
 }