@media screen {
#sequence-theme {width: 100%; height:403px;  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:403px;  width: 100%;  max-width: 980px;  margin: 0 auto;  /*background: white;*/  /* Preloader */  /* !Preloader */  /* Frame Animations */  /* !Frame Animations */}
#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 h2 {  font-family: Arial, Helvetica, sans-serif;  font-size: 2em; margin: 0 0 10px 0;color:#fff;font-weight:bold;text-shadow: 1px 1px #000;}
#sequence .slide3 span.htitle{color:#fff;font-weight:bold;display:block;margin-bottom:5px}
#sequence p{line-height:20px;font-size:12px;color:#000000}
#sequence span.call-us{color:#fff;font-size:2em;padding-top:12px;display:block;font-weight:bold;text-shadow: 1px 1px #000;}
#sequence h3 { font-family: "Magra", sans-serif;  font-size: 20px;}
#sequence-theme .controls { /* height:75px;*/  margin: 0 auto;  position: relative;  top:0;  /*width: 198px;*/  z-index: 10;}
#sequence-theme .sequence-prev,#sequence-theme .sequence-next {/*  opacity: 0.7;*/}
#sequence-theme .sequence-next,#sequence-theme .sequence-prev,#sequence-theme .sequence-pause {  position: absolute;  z-index: 10000;  top:170px;}
#sequence-theme .sequence-next {  background: url(../images/bt-next.png) 0 0 no-repeat;  height: 50px;right:-50px;  /* right:0*/ width:50px;cursor:pointer;}
#sequence-theme:hover .sequence-next{
right:0;-webkit-transition: all .8s ease;
 -moz-transition: all .8s ease;
 -o-transition: all .8s ease;
 transition: all .8s ease;}
*+ html #sequence-theme .sequence-next,*+ html #sequence-theme:hover .sequence-next{right:0}*+ html #sequence-theme .sequence-prev,*+ html #sequence-theme:hover .sequence-prev{left:0}
#sequence-theme .sequence-next:hover,
#sequence-theme .sequence-prev:hover,
#sequence-theme .sequence-pause:hover {  background-position:0 0}
#sequence-theme .sequence-prev {  left:-50px;  background: url(../images/bt-prev.png) 0 0 no-repeat;  height: 50px;  width: 50px;cursor:pointer}
#sequence-theme .sequence-prev:hover,#sequence-theme .sequence-next:hover{opacity:0.7}
#sequence-theme:hover .sequence-prev{
left:0;-webkit-transition: all .8s ease;
 -moz-transition: all .8s ease;
 -o-transition: all .8s ease;
 transition: all .8s ease;}
#sequence-theme .sequence-pause {  background:url(../images/bt-pause.png) 50% 4px no-repeat;  cursor: pointer;  height: 33px;  left: 78px;  width: 42px;}
#sequence-theme .sequence-pause.paused {  background:#f00 url(../images/bt-play.png) 50% 4px no-repeat;  height: 33px;  left: 78px;  width: 42px;}
#sequence-theme .sequence-pause.paused:hover {  background-position: 50% -25px;}
#sequence .status {background: url(../images/status-bar.png) -119px 0 repeat-y;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  height: 6px;
  margin: 0 auto;
  position: relative;
  top: 4px;
  width: 118px;
}
#sequence .status.paused {
  -webkit-animation: paused 1s linear alternate infinite;
  -moz-animation: paused 1s linear alternate infinite;
  -ms-animation: paused 1s linear alternate infinite;
  -o-animation: paused 1s linear alternate infinite;
  animation: paused 1s linear alternate infinite;
}
#sequence .status.active {
  -webkit-animation: status-bar 4s linear;
  -moz-animation: status-bar 4s linear;
  -ms-animation: status-bar 4s linear;
  -o-animation: status-bar 4s linear;
  animation: status-bar 4s linear;
}
#sequence .pause-icon {  right: 20px;  position: absolute;  bottom: 20px;}
#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 .iphone2 {
  left:50px;
  position: absolute;
  top: -570px;
  z-index: 3;
}
#sequence .animate-in .iphone2 {
  left:20px;
  top:70px;
  -webkit-transition-duration: 2.5s;
  -moz-transition-duration: 2.5s;
  -ms-transition-duration: 2.5s;
  -o-transition-duration: 2.5s;
  transition-duration: 2.5s;
  -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;
}
*+ html #sequence .animate-in .iphone2,* #sequence .animate-in .iphone2{left:40px}
#sequence .animate-out .iphone2 {
  left: 600px;
  top: 770px;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  transform: rotate(100deg);
  -webkit-transition-duration: 2.5s;
  -moz-transition-duration: 2.5s;
  -ms-transition-duration: 2.5s;
  -o-transition-duration: 2.5s;
  transition-duration: 2.5s;
}
#sequence .iphone2-shadow {
  position: absolute;
  left: 398px;
  opacity: 0;
  top: 360px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .animate-in .iphone2-shadow {
  left:60px;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
#sequence .animate-out .iphone2-shadow {
  left:60px;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

#sequence .iphone3 {
  left:210px;
  top: -570px;
  position: absolute;
  z-index: 2;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
#sequence .animate-in .iphone3 {
  left:165px;
  top: 85px;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -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 .iphone3 {
  left: 700px;
  top: 770px;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  transform: rotate(100deg);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}
#sequence .iphone4 {
  left:-16px;
  top: -570px;
  position: absolute;
  z-index: 1;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
#sequence .animate-in .iphone4 {
  left:-16px;
  top:85px;
  -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;
  -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 .iphone4 {
  left: 800px;
  top: 770px;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  transform: rotate(100deg);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
*+html #sequence .animate-in .iphone4,* #sequence .animate-in .iphone4{left:0;}

#sequence .slide3 {
  position: absolute;
  left: 500px;
  opacity: 0;
  top:85px;
  
}
#sequence .animate-in .slide3 {
  left: 600px;
  opacity: 1;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#sequence .animate-out .slide3 {
  left: 400px;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
}
/*===== Media Queries ============================================================= */
@media screen and (max-width: 1024px) {
	#sequence .slide3{width:48%;width:380px;}#sequence .animate-in .slide3{left:58%;width:380px;}#sequence .animate-out .slide3{left:38%;width:380px;}
}
/***** smaller than 980 *************************************************************/
@media screen and (max-width: 980px) {
	#sequence,#sequence-theme{height:350px}
	#sequence .slide3,#sequence .animate-in .slide3,#sequence .animate-out .slide3{top:60px}
	#sequence .animate-out .iphone2,#sequence .animate-in .iphone2{width:45%}#sequence .animate-in .iphone2{top:60px}
	#sequence .animate-in .iphone2-shadow{top:288px;left:35px}
	#sequence .animate-out .iphone3,#sequence .animate-in .iphone3,#sequence .animate-in .iphone4,#sequence .animate-out .iphone4{width:35%}
	#sequence .animate-in .iphone3,#sequence .animate-in .iphone4{top:80px}
	#sequence .animate-in .slide3{width:300px}#sequence h2,#sequence span.call-us{font-size:1.4em}
}
/****** smaller than 800 ***********************************************************/
@media screen and (max-width: 800px) {
	
}
@media only screen and (max-width: 768px) {
	#sequence,#sequence-theme{height:370px}
	#sequence .slide3,#sequence .animate-in .slide3,#sequence .animate-out .slide3{left:3%;bottom:25px;width:88%;top:auto}
	#sequence .animate-in .iphone2{left:28%;top:15px}#sequence .iphone2{left:28%}
	#sequence .animate-in .iphone2-shadow{left:20%;top:185px}
	#sequence .animate-in .iphone3,#sequence .animate-in .iphone4{top:30px}
	#sequence .iphone3,#sequence .animate-in .iphone3{left:48%}
	#sequence .iphone4,#sequence .animate-in .iphone4{left:19%}
}
/***** smaller than 640 **************************************************************/
@media screen and (max-width: 640px) {
	#sequence .animate-in .iphone2-shadow{top:170px;left:16%}
	
}
/***** smaller than 560 *************************************************************/
@media screen and (max-width: 560px){
	
}
/***** smaller than 480 **************************************************************/
@media screen and (max-width: 480px) {
	#sequence .animate-in .iphone2{width:58%;left:20%}
	#sequence .iphone3, #sequence .animate-in .iphone3{left:48%}#sequence .iphone4, #sequence .animate-in .iphone4{left:8%}
	#sequence .animate-out .iphone3, #sequence .animate-in .iphone3, #sequence .animate-in .iphone4, #sequence .animate-out .iphone4{width:42%}
	#sequence .iphone2-shadow{display:none}
	}
/***** smaller than 320 *************************************************************/
@media screen and (max-width: 320px) {
	#sequence h2, #sequence span.call-us{text-shadow:none;font-size:1em}#sequence .slide3 span.htitle{font-size:0.75em}
	#sequence .animate-in .iphone2{left:12%;width:75%}
	#sequence .animate-out .iphone3, #sequence .animate-in .iphone3, #sequence .animate-in .iphone4, #sequence .animate-out .iphone4{width:50%}
	#sequence .iphone4, #sequence .animate-in .iphone4{left:1%}
	#sequence .animate-in .iphone3, #sequence .animate-in .iphone4{top:50px}#sequence .animate-in .iphone2{top:35px}
}
/***** smaller than 240 *************************************************************/
@media screen and (max-width: 240px) {
	/*#wrapper{border:1px solid green}*/
}
