/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Apple Style
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/apple-style/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------
    SEQUENCE 1
------------------------------------------------------------------------------------------------------------------------------------------------ */
.sequence-theme {
  /* this container is just to ensure the background color stretches all the way across on bigger screens */
  background: #D9D9D9;border-bottom:1px solid #ccc;box-shadow: 0 1px 2px 1px rgba(0,0,0,0.1);-webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,0.1);
}
#sequence {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  color: white;
  font-size: 0.625em;
  margin: 0 auto;
  position: relative;
  height: 500px;
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 
  background-image: -webkit-linear-gradient(top, #fff, #eee); background-image: -moz-linear-gradient(top, #fff, #eee); 
  background-image: -ms-linear-gradient(top, #fff, #eee); background-image: -o-linear-gradient(top, #fff, #eee); 
  background-image: linear-gradient(#fff, #eee);  
  background-image:url(../images/bg.jpg);
 }
#sequence > .sequence-canvas {
  height: 100%;
  width: 100%;
}
#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: -50%;
}
#sequence > .sequence-canvas > li img {
  /* height: 96%  */
}
#sequence > .sequence-canvas li > * {
  position: absolute;
  /* only cause the left and opacity properties to transition */
  -webkit-transition-property: left, opacity;
  -moz-transition-property: left, opacity;
  -ms-transition-property: left, opacity;
  -o-transition-property: left, opacity;
  transition-property: left, opacity;
}

.sequence-next,
.sequence-prev {
  color: #a349a4;
  font-size:80px;
  cursor: pointer;
  display: none;
  padding: 10px;
  position: absolute;
  top: 50%;
  z-index: 1000;
  height: 75px;
  margin-top: -47.5px
}

.sequence-pause {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1000;
}

.sequence-paused {
  opacity: 0.3;
}

.sequence-prev {
  left: 3%;
}

.sequence-next {
  right: 3%;
}

#sequence-preloader {
  background: #d9d9d9;
}

.sequence-pagination {
  bottom: 1%;
  display: none;
  right: 6%;
  position: absolute;
  z-index: 10;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.sequence-pagination li {
  display: inline-block;
  *display: inline;
  /* Hack for IE7 and below as they don't support inline-block */
  height: 140px;
}
.sequence-pagination li img {
  cursor: pointer;
  opacity: 0.5;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: margin-bottom, opacity;
  -moz-transition-property: margin-bottom, opacity;
  -ms-transition-property: margin-bottom, opacity;
  -o-transition-property: margin-bottom, opacity;
  transition-property: margin-bottom, opacity;
}
.sequence-pagination li img:hover {
  margin-bottom: 4px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sequence-pagination li.current img {
  opacity: 1;
}

#sequence h2 {font: 48px 'OpenSansLight';color:#a349a4;text-shadow: 1px 1px 0 rgba(255,255,255,0.8);letter-spacing:-.025em}
#sequence h3 {font :18px 'OpenSansLight';color:#4f4e70;text-shadow: 1px 1px 0 rgba(255,255,255,0.8);line-height:32px}

.sequence-next,
.sequence-prev {
  position: absolute;
  opacity: 0.85;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.sequence-next:hover,
.sequence-prev:hover {
  color: #a349a4;  
  opacity: 1;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -ms-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
}

.title {
  font: 3.2em 'OpenSansRegular';
  text-shadow: 1px 1px 0 rgba(255,255,255,0.9);
  left: 65%;
  width: 45%;
  opacity: 0;
  bottom: 16%;
  z-index: 50;
}

.animate-in .title {
  left: 45%;
  opacity: 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;
}

.animate-out .title {
  left: 35%;
  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;
}

.subtitle {
  color: black;  
  text-shadow: 1px 1px 0 rgba(255,255,255,0.9);
  font-size: 1.8em;
  left: 35%;
  width: 42%;
  opacity: 0;
  bottom: -5%;
}

.animate-in .subtitle {
  left: 45%;
  opacity: 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;
}

.animate-out .subtitle {
  left: 65%;
  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;
}

.appstore {
  left: 35%;
  width: 220px;
  opacity: 0;
  bottom: -25%;
  cursor:pointer
}

.animate-in .appstore {
  left: 45%;
  opacity: 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;
}

.animate-out .appstore {
  left: 65%;
  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;
}

.model.one {
  left: 30%;
  bottom: -32%;
  opacity: 0;
  position: relative;
  min-width: 127px;
  max-width: 160px;
}

.model.two {
  left: 30%;
  bottom: -40%;
  opacity: 0;
  position: relative;
  min-width: 127px;
  max-width: 160px;
}

.model.three {
  left: 30%;
  bottom: -46%;
  opacity: 0;
  position: relative;
  min-width: 127px;
  max-width: 160px;
}

.animate-in .model {
  left: 18%;
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.animate-out .model {
  left: 15%;
  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;
}


@media only screen and (max-width: 1050px) {
.title {width:50%}
.subtitle {width:50%}
.animate-in .title{left:40%}
.animate-in .subtitle{left:40%}
.animate-in .appstore{left:40%}
}

@media only screen and (max-width: 900px) {
.title {bottom: 18%}
.subtitle {bottom: -9%}
.appstore {bottom: -30%} 

}

@media only screen and (max-width: 838px) {
  #sequence {height: 500px}
  #sequence .model {width: auto}
  .subtitle {width:52%}
}

@media only screen and (max-width: 820px) {
  #sequence .model {width: auto;left:12%}
}

@media only screen and (max-width: 768px) {
  #sequence {height: 500px}
  #sequence .sequence-next,
  #sequence .sequence-prev {
    height: 60px;
    margin-top: -40px;
  }
  #sequence .model {width: auto}
}

@media only screen and (max-width: 680px) {
  #sequence .model {left: 50%;
    /*prevents the model from shrinking when the browser is resized*/
  }
  #sequence .animate-in .model {
    left: 50%;
    margin-left: -17%;
  }
  
   #sequence .animate-in .model.one {
    left: 50%;
    margin-left: -13%;
  }
  
  #sequence .animate-out .model {
    left: 50%;
    margin-left: -13%;
  }
  
    #sequence .animate-out .model.one {
    left: 50%;
    margin-left: -13%;
  } 
  
  #sequence .title {
    background: #a1a1a1;text-align:center;color:#fff;text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    background: rgba(0, 0, 0, 0.5);  font-size: 2.9em;
    bottom: 0;  
    left: 100%;
    padding: 2.5% 4% 4% 4%;
    bottom: -54%;
    width: 100%;
    z-index: 10;
  }
  #sequence .animate-in .title {
    left: 0%;
  }
  #sequence .animate-out .title {
    left: -100%;
  }
  #sequence .subtitle {
    visibility: hidden;
  }
   #sequence .appstore {
    visibility: hidden;
  } 
  
  #sequence .sequence-pagination {
    bottom: 40px;
  }
  #sequence .sequence-pagination li img {
    height: 100px;
  }
}
@media only screen and (max-width: 518px) {
  #sequence {
    height: 450px;
  }
}
@media only screen and (max-width: 468px) {
  #sequence {
    height: 415px;
  }
  #sequence .sequence-pagination {
    opacity: 0;
    visibility: hidden;
  }
}
@media only screen and (max-width: 418px) {
  #sequence {
    height: 375px;
  }
}
@media only screen and (max-width: 368px) {
  #sequence {
    height: 325px;
  }
  #sequence .title {
    font-size: 2.2em
  }
}
@media only screen and (max-width: 320px) and (orientation: portrait) {
  /*iphone portrait*/
  #sequence {
    height: 320px;
  }
  #sequence .model {
    min-width: 45%;
    width: 45%;
  }
  #sequence .animate-in .model {
    margin-left: -22.5%;
  }
  #sequence .animate-out .model {
    margin-left: -22.5%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
  #sequence {
    height: 260px;
  }
  #sequence .model {
    min-width: 24%;
    width: 24%;
  }
  #sequence .animate-in .model {
    left: 17.5%;
    margin-left: 0;
  }
  #sequence .animate-out .model {
    left: 17.5%;
    margin-left: 0;
  }
  #sequence .sequence-pagination {
    right: 17.5%;
  }
}




/* ---------------------------------------------------------------------------------------------------------------------------------------------
    SEQUENCE 2
------------------------------------------------------------------------------------------------------------------------------------------------ */
#sequence2-theme {
  max-width: 500px;
  width:100%;
  height: 300px;  
  margin: 47px auto 60px auto;
  overflow: hidden
}

/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#sequence2.sequence-fallback {
  overflow: hidden;
}

#sequence2 {
  position: relative;
  height: 300px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  /* Preloader */
  /* !Preloader */
  /* Frame Animations */
  /* !Frame Animations */
  
  background: url(../images/sellmicell_screen.png); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(../images/sellmicell_screen.png); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(../images/sellmicell_screen.png); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(../images/sellmicell_screen.png); /* Standard syntax */
/*IE10*/  background: -ms-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(../images/sellmicell_screen.png); /* For Firefox 3.6 to 15 */
  
  background-position: 0 0;
  -webkit-background-size: cover;  -moz-background-size: cover;background-size: cover;
  -webkit-border-radius: 7px; -moz-border-radius: 7px;border-radius: 7px
  }
#sequence2 > .sequence-canvas {
  height: 100%;
  width: 100%;
}
#sequence2 > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#sequence2 > .sequence-canvas li > * {
  position: absolute;
}

#sequence2 h1 {font: 80px 'OpenSansRegular';color:rgba(255,255,255,.9);text-shadow: 1px 1px 1px rgba(0,0,0,0.9);background:rgba(0,0,0,0.2);text-align:center;margin:0 auto}

#sequence2 .sequence-preloader {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999999;
}
#sequence2 .sequence-preloader img {
  background: #a349a4;
  -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;
}
#sequence2 .sequence-preloader .preloading {
  height: 12px;
  margin: 0 auto;
  top: 50%;
  position: relative;
  width: 48px;
}
#sequence2 .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;
}
#sequence2 .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;
}
#sequence2 .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;
}

/* -------------------------------------------------------------------------------------------------
    LOGOTYPE Part 1
------------------------------------------------------------------------------------------------- */
#sequence2 .logotype-part1 {
  position: absolute;
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence2 .animate-in .logotype-part1 {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(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;
}
#sequence2 .animate-out .logotype-part1  {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

/* -------------------------------------------------------------------------------------------------
    LOGOTYPE Part 2
------------------------------------------------------------------------------------------------- */
#sequence2 .logotype-part2 {
  position: absolute;
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence2 .animate-in .logotype-part2 {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(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;
}
#sequence2 .animate-out .logotype-part2  {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}


/* -------------------------------------------------------------------------------------------------
    LOGOTYPE Part 3
------------------------------------------------------------------------------------------------- */
#sequence2 .logotype-part3 {
  position: absolute;
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence2 .animate-in .logotype-part3 {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(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;
}
#sequence2 .animate-out .logotype-part3  {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}


/* -------------------------------------------------------------------------------------------------
    LOGOTYPE Full
------------------------------------------------------------------------------------------------- */
#sequence2 .logotype-full {
  position: absolute;
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence2 .animate-in .logotype-full {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(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;
}
#sequence2 .animate-out .logotype-full  {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}








/* ---------------------------------------------------------------------------------------------------------------------------------------------
    SEQUENCE 3
------------------------------------------------------------------------------------------------------------------------------------------------ */
#sequence3-theme {
  max-width: 204px;
  width:100%;
  height: 500px; 
  overflow: hidden;  position: relative;left:23px;bottom:24px
}

/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#sequence3.sequence-fallback {
  overflow: hidden;
}

#sequence3 {
  position: relative;
  height: 500px;
  width:100%;

  }
#sequence3 > .sequence-canvas {
  height: 100%;
  width: 100%;
}
#sequence3 > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#sequence3 > .sequence-canvas li > * {
  position: absolute;
}


#sequence3 h1 {font: 80px 'OpenSansRegular';color:rgba(255,255,255,.9);text-shadow: 1px 1px 1px rgba(0,0,0,0.9);background:rgba(0,0,0,0.2);text-align:center;margin:0 auto}

#sequence3 .sequence-preloader {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999999;
}
#sequence3 .sequence-preloader img {
  background: #a349a4;
  -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;
}
#sequence3 .sequence-preloader .preloading {
  height: 12px;
  margin: 0 auto;
  top: 50%;
  position: relative;
  width: 48px;
}
#sequence3 .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;
}
#sequence3 .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;
}
#sequence3 .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;
}

/* -------------------------------------------------------------------------------------------------
    App Screenshots (app_sc)
------------------------------------------------------------------------------------------------- */
#sequence3 .app_sc{
  position: absolute;
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  -ms-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
#sequence3 .animate-in .app_sc {
  top: 97px;
  width:100%;
  margin:0 auto;
  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;
}
#sequence3 .animate-out .app_sc {
  top: 97px;
  width:100%;
  margin:0 auto;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}