#sequence-theme{width:100%;height:556px;overflow:hidden}
/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#sequence.sequence-fallback{ overflow:hidden}
#sequence{position:relative;height:556px;width:100%;max-width:1900px;margin:0 auto}
#sequence > .sequence-canvas{height:100%;width:100%}
#sequence > .sequence-canvas > li{position:absolute;width:100%;height:100%;z-index:1;top:0;left:0}
#sequence > .sequence-canvas li > *{position:absolute}
#sequence .sequence-preloader{height:100%;position:absolute;width:100%;z-index:999999}
#sequence .sequence-preloader img{
  background: #ff9933;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  display: inline-block;
  height: 12px;
  opacity: 0;
  position: relative;
  top: -50%;
  width: 12px;
  -webkit-animation: preload 1s infinite;
  -moz-animation: preload 1s infinite;
  -ms-animation: preload 1s infinite;
  -o-animation: preload 1s infinite;
  animation: preload 1s infinite;
}
#sequence .sequence-preloader .preloading{height:12px;margin:0 auto;top:50%;position:relative;width:48px}
#sequence .sequence-preloader img:nth-child(2){
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  -ms-animation-delay: 0.15s;
  -o-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
#sequence .sequence-preloader img:nth-child(3){
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#sequence .sequence-preloader .preloading-complete{
  opacity: 0;
  visibility: hidden;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .controls {
  background: url("http://ianlunn.github.com/Sequence/themes/apple-style/images/bg-controls.png") no-repeat;
  height: 49px;
  margin: 0 auto;
  position: relative;
  top: 0;
  width: 198px;
  z-index: 9999;
}
#sequence .sequence-prev,
#sequence .sequence-next {
  opacity: 0.7;
}
#sequence .sequence-next,
#sequence .sequence-prev,
#sequence .sequence-pause {
  position: absolute;
  z-index: 10000;
  top: 10px;
}
#sequence .sequence-next {
  background: url("http://ianlunn.github.com/Sequence/themes/apple-style/images/bt-next.png") 50% 4px no-repeat;
  height: 34px;
  left: 128px;
  width: 41px;
}
#sequence .sequence-next:hover,
#sequence .sequence-prev:hover,
#sequence .sequence-pause:hover {
  background-position: 50% -26px;
}
#sequence .sequence-prev {
  left: 28px;
  background: url("http://ianlunn.github.com/Sequence/themes/apple-style/images/bt-prev.png") 50% 4px no-repeat;
  height: 34px;
  width: 41px;
}
/*#sequence button{position:absolute;top:50%;left:15px;width:50px;height:50px;border:2px solid #0f0;cursor:pointer;z-index:10000}
#sequence button.seq-next{left:auto;right:15px}*/
/*-- Start Animation Layers --*/
/*-- SLIDE 1 --*/
/*-- Layer 1 --*/

#sequence .layer-1 {
	right:0;
	bottom:0;
	position: absolute;
	z-index: 10 ;
	-webkit-transition-delay: 1.5s;
	-moz-transition-delay: 1.5s;
	-ms-transition-delay: 1.5s;
	-o-transition-delay: 1.5s;
	transition-delay: 1.5s;
	opacity:0
}
#sequence .animate-in .layer-1{
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  /*-webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;*/
  opacity:1
}

#sequence .animate-out .layer-1{
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity:0;
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -ms-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}

/*-- Layer 2 --*/
#sequence .layer-2 {
  left:0;
  top:0;
  opacity:0;
  position: absolute;  
  width:100%;
  background:url(../images/slide1.jpg) no-repeat center 0;
  height:556px;
  z-index: 2; 
  /*-webkit-transition-delay: 0.05s;
  -moz-transition-delay: 0.05s;
  -ms-transition-delay: 0.05s;
  -o-transition-delay: 0.05s;
  transition-delay: 0.05s;*/
}
#sequence .animate-in .layer-2 {
  opacity:1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -ms-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#sequence .animate-out .layer-2 {
  opacity:0.5;
  -webkit-transition-duration:.5s;
  -moz-transition-duration:.5s;
  -ms-transition-duration:.5s;
  -o-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -ms-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

/*-- Layer 3 --*/
#sequence .layer-3 {
  margin-left:-500px;
  opacity:0;
  z-index: 100;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay:1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
#sequence .animate-in .layer-3{
  margin-left:0;
  opacity:1;
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
 /* -webkit-transition-delay:1.5s;
  -moz-transition-delay: 1.5s;
  -ms-transition-delay:1.5s;
  -o-transition-delay: 1.5s;
  transition-delay:1.5s;*/
}
#sequence .animate-out .layer-3{
  margin-left:-200px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/*-- Layer 4 --*/
#sequence .layer-4 {
  position:absolute;
  bottom:5px;
  right:0;
  z-index: 10 ;
  text-align:center;
  width:100%;
  opacity:0;
  -webkit-transition-delay: 1.9s;
  -moz-transition-delay: 1.9s;
  -ms-transition-delay:1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;

}
#sequence .animate-in .layer-4{
  bottom:30px;
  opacity:1;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#sequence .animate-out .layer-4{
  bottom:5px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
   -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

#sequence .layer-4 p{width:900px;margin:0 auto}
/*-- Layer 5 --*/
/*#sequence .layer-5 {
  margin-right:-350px;
  margin-top:120px;
  opacity:0;
  z-index: 100;
  -webkit-transition-delay: 1.5s;
  -moz-transition-delay: 1.5s;
  -ms-transition-delay:1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;

}
#sequence .animate-in .layer-5{
  margin-right:0;
  opacity:1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

#sequence .animate-out .layer-5{
  margin-right:-300px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
*/
/*-- SLIDE2 --*/
/*-- Layer 2 --*/
#sequence .s2-layer-2 {
  left:0;
  top:0;
  opacity:0;
  position: absolute;  
  width:100%;
  background:url(../images/slide2.jpg) no-repeat center 0;
  height:556px;
  z-index: 2; 
  -webkit-transition-delay: 0.05s;
  -moz-transition-delay:  0.05s;
  -ms-transition-delay:  0.05s;
  -o-transition-delay:  0.05s;
  transition-delay:  0.05s;
}
#sequence .animate-in .s2-layer-2 {
  opacity:1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -ms-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#sequence .animate-out .s2-layer-2 {
	opacity:0.5;
  -webkit-transition-duration:.5s;
  -moz-transition-duration:.5s;
  -ms-transition-duration:.5s;
  -o-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -ms-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

/*-- SLIDE2 --*/
/*-- Layer 4 --*/
#sequence .s2-layer-4 {
  position:absolute;
  bottom:5px;
  right:0;
  z-index: 10 ;
  text-align:center;
  width:100%;
  opacity:0;
  -webkit-transition-delay: 1.9s;
  -moz-transition-delay: 1.9s;
  -ms-transition-delay:1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;

}
#sequence .animate-in .s2-layer-4{
  bottom:40px;
  opacity:1;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#sequence .animate-out .s2-layer-4{
  bottom:5px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
   -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
#sequence .s2-layer-4 p{width:900px;margin:0 auto}
/*-- SLIDE3 --*/
/*-- Layer 2 --*/
#sequence .s3-layer-2 {
  left:0;
  top:0;
  opacity:0;
  position: absolute;  
  width:100%;
  background:url(../images/slide3.jpg) no-repeat center 0;
  height:556px;
  z-index: 2; 
  -webkit-transition-delay: 0.05s;
  -moz-transition-delay:  0.05s;
  -ms-transition-delay:  0.05s;
  -o-transition-delay:  0.05s;
  transition-delay:  0.05s;
}
#sequence .animate-in .s3-layer-2 {
  opacity:1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -ms-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#sequence .animate-out .s3-layer-2 {
	opacity:0.5;
  -webkit-transition-duration:.5s;
  -moz-transition-duration:.5s;
  -ms-transition-duration:.5s;
  -o-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -ms-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

/*-- Layer 4 --*/
#sequence .s3-layer-4 {
  position:absolute;
  bottom:10px;
  right:0;
  z-index: 10 ;
  text-align:center;
  width:100%;
  opacity:0;
  -webkit-transition-delay: 1.9s;
  -moz-transition-delay: 1.9s;
  -ms-transition-delay:1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;

}
#sequence .animate-in .s3-layer-4{
  bottom:60px;
  opacity:1;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#sequence .animate-out .s3-layer-4{
  bottom:10px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
   -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
#sequence .s3-layer-4 p{width:900px;margin:0 auto}

/*-- SLIDE4 --*/

/*-- Layer 2 --*/
#sequence .s4-layer-2 {
  left:0;
  top:0;
  opacity:0;
  position: absolute;  
  width:100%;
  background:url(../images/slide2.jpg) no-repeat center 0;
  height:556px;
  z-index: 2; 
  -webkit-transition-delay: 0.05s;
  -moz-transition-delay:  0.05s;
  -ms-transition-delay:  0.05s;
  -o-transition-delay:  0.05s;
  transition-delay:  0.05s;
}
#sequence .animate-in .s4-layer-2 {
  opacity:1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -ms-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#sequence .animate-out .s4-layer-2 {
	opacity:0.5;
  -webkit-transition-duration:.5s;
  -moz-transition-duration:.5s;
  -ms-transition-duration:.5s;
  -o-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -ms-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

/*-- Layer 4 --*/
#sequence .s4-layer-4 {
  position:absolute;
  bottom:5px;
  right:0;
  z-index: 10 ;
  text-align:center;
  width:100%;
  opacity:0;
  -webkit-transition-delay: 1.9s;
  -moz-transition-delay: 1.9s;
  -ms-transition-delay:1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;

}
#sequence .animate-in .s4-layer-4{
  bottom:25px;
  opacity:1;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#sequence .animate-out .s4-layer-4{
  bottom:5px;
  opacity:0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
   -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
#sequence .s4-layer-4 p{width:900px;margin:0 auto}

/*----- Start Media Query for Responsive Layout -----*/ 

@media screen and (max-width: 1024px) {
/*#wrapper{ border:2px solid red}*/
}
@media screen and (max-width: 980px) {
.slideshow{width:92%}
#sequence .layer-4 p,#sequence .s2-layer-4 p,#sequence .s3-layer-4 p,#sequence .s4-layer-4 p{width:90%;}

/*#sequence .layer-5{margin-top:144px}*/
/*#wrapper{ border:2px solid #0f0}*/
}
@media screen and (max-width: 800px) {
.slideshow{width:92%}
#intro .slideshow h1,#intro .slideshow h2{font-size:30px;}
#sequence .animate-in .layer-4,#sequence .animate-in .s2-layer-4{bottom:20px}
#sequence .animate-in .s4-layer-4{bottom:40px}
/*#sequence .layer-5{margin-top:170px;}*/
/*#wrapper{ border:2px solid #f0f}*/
}

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

#intro h1 em,#intro h2 em{display:block}
#sequence .layer-3,#sequence .layer-4,#sequence .s2-layer-4,#sequence .s3-layer-4,#sequence .s4-layer-4/*,#sequence .layer-5*/{position:static}
/*#wrapper{ border:2px solid #ff0}*/

}
@media screen and (max-width: 480px) {
/*#sequence .layer-5{margin-top:225px;}*/
#intro .slideshow h1,#intro .slideshow h2{font-size:32px;margin-bottom:15px}
.slideshow{min-height:435px;width:94%;padding:100px 15px 22px}
/*#wrapper{ border:2px solid #0ff}*/

}
@media screen and (max-width: 400px) {

/*#intro .slideshow h1,#intro .slideshow h2{font-size:24px;}*/
/*#wrapper{ border:2px solid purple}*/
/*#sequence .layer-5{margin-top:278px;}*/
}
@media screen and (max-width: 320px) {	
	/*#sequence .layer-5{margin-top:300px;}*/
	/*#wrapper{ border:2px solid pink}*/
}