/*
Sequence.js (http://www.sequencejs.com/)
Custom Theme for Crisp Bootstrap Template by Christina Arasmo Beymer
*/

.no-js #sequence-slider-wrapper {display:none}

.lt-ie9 #sequence li,
.lt-ie9 #sequence li * {
		/*By making sure IE filters never run, jQuery won't animate a fade between frames in IE6/7/8. This prevents the black halo around transparent images.*/
    filter: "" !important;
		-ms-filter: "" !important;
}
#sequence-slider {
		height: 300px; /********** height of slider **********/
		position: relative;
		margin: 0 auto;
		overflow: hidden;
		-webkit-text-stroke: 0.35px;

}
#sequence {margin:0 auto;position:relative;max-width:1900px;}


#sequence-slider-wrapper {
		position:relative;
		height:300px;
		margin:5px 0 3%;
}
#sequence ul {
		margin:0;
		padding:0;
		list-style:none;
}
.bg-animate img {max-width:100%;}

#sequence {
		/*backface-visibility prevents graphical glitches when frames are animating*/
	-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
}
#sequence-slider-wrapper .next:hover,
#sequence-slider-wrapper .prev:hover {
		opacity: 1;
		-webkit-transition-duration: .4s;
		-moz-transition-duration: .4s;
		-o-transition-duration: .4s;
		-ms-transition-duration: .4s;
		transition-duration: .4s;
}
#sequence-slider-wrapper .next,
#sequence-slider-wrapper .prev {
		cursor: pointer;
		position: absolute;
		z-index: 200;
		height: 50px;
		right: 10px;
		text-indent: -9999px;
		display: block;
		top: 40%;
		width: 40px;
		height: 80px;
    	background:url(../img/sliderarrows.png) -140px 50% no-repeat;
    	opacity: .5
}
#sequence-slider-wrapper .prev {
		left: 10px;
		right: auto;
		background-position: -180px 50%;
}
#sequence-slider-wrapper .next:hover,
#sequence-slider-wrapper .prev:hover {
		opacity: 1
}
#sequence li > * {
		position: absolute;
}
#sequence {
		height: 300px;
		margin: 0 auto;
		position: relative;
}
#sequence .info h2 {
		font-size: 320%;
		line-height: 1.2;
		margin-bottom: 3%;
}
#sequence .info p {
		font-size:125%;
		line-height:1.5;
}
#sequence .info {
		right: 150%;
		top: 10px;
		width: 610px;
		z-index: 10;
		vertical-align: middle;
		-webkit-transition-duration: 2s;
		-moz-transition-duration: 2s;
		-o-transition-duration: 2s;
		-ms-transition-duration: 2s;
		transition-duration: 2s;
}
#sequence .animate-in .info {
		right: 60px;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
}
#sequence .animate-out  .info {
		right: -150%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
}

.animate-3 {
		left: -100%;
		max-width: 450px;
		top: 0%;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 6;
}
.animate-in .animate-3 {
		left: 0px;
		top: 0%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 4;
}
.animate-out .animate-3 {
		left: -100%;
		top: 0%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		z-index: 2;
}
.bg-animate {
		height: auto;
		width: 100%;
		left: -10%;
		opacity: 0;
		top: -5%;
		vertical-align: middle;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 1;
}
.animate-in .bg-animate {
		left: 0%;
		opacity: 1;
		top: -5%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 1;
}
.animate-out .bg-animate {
		left: 10%;
		opacity: 0;
		top: -5%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 1;
}

/* end global desktop styles below are media queries */

@media only screen and (max-width: 1200px) {

	#sequence-slider,
	#sequence,
	#sequence-slider-wrapper {
		height:260px;
	}
.animate-3 img {
	max-height:240px;
}

#sequence .info {
		right: 150%;
		top: 10px;
		width: 480px;
}

#sequence .info h2 {
		font-size: 250%;
}	

#sequence .info  p {
	font-size:110%;
}
.animate-3 {
		left: -100%;
		max-width: 50%;
		top: 0%;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 6;
}
.animate-in .animate-3 {
		left: 0px;
		top: 0;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 4;
}
.animate-out .animate-3 {
		left: -100%;
		top: 0%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		z-index: 2;
}

}/**/


/************ 0 to 979 px **************/
@media only screen and (max-width:979px) {

	#sequence-slider,
	#sequence,
	#sequence-slider-wrapper {
		height:200px;
	}
.animate-3 img {
	max-height:190px;
}

#sequence .info {
		right: 150%;
		top: 0px;
		width: 355px;
}

#sequence .info h2 {
	font-size:16pt;
	margin-bottom:5px;
}



#sequence .info  p {
	font-size:0.9em;
	line-height:130%;
}
	
.animate-3 {
		left: -100%;
		max-width: 50%;
		top: 0%;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 6;
}
.animate-in .animate-3 {
		left: 0px;
		top: 0;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		z-index: 4;
}
.animate-out .animate-3 {
		left: -100%;
		top: 0%;
		-webkit-transition-duration: 4s;
		-moz-transition-duration: 4s;
		-o-transition-duration: 4s;
		-ms-transition-duration: 4s;
		transition-duration: 4s;
		-webkit-transition-property: left top;
		-moz-transition-property: left top;
		-o-transition-property: left top;
		-ms-transition-property: left top;
		transition-property: left top;
		-webkit-transition-property: left top -webkit-transform;
		-moz-transition-property: left top -moz-transform;
		-o-transition-property: left top -o-transform;
		-ms-transition-property: left top -ms-transform;
		transition-property: left top transform;
		z-index: 2;
}

}/**/

/************ 0 to 767 px **************/
@media only screen and (max-width: 767px) {
.sequence-slider-outer {display:none;}	

}

/* ================================================== 
	RETINA BACKGROUND IMAGE REPLACEMENT & RETINA INFORMATION
	http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/
	http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
	http://www.webresourcesdepot.com/3-solutions-for-serving-high-res-images-to-retina-display-devices/
================================================== */

/*	change the webkit number to 1 to test on webkit to make sure 
	the sizes and the images show up correctly then switch back before launch */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
 	only screen and (-o-min-device-pixel-ratio: 3/2),
 	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) 
{

/* 

arrows

*/


}/* end retina */