/*******Basic settings**********/
*{
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
body{
  font-family: "Open Sans", Arial, Helvetica, sans-serif; color: #FFF;
} 

img{
  border: 0px;
}
a{
  text-decoration: none;
}
sup {
	font-size:9px;
	line-height:9px;
}

#ad{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}

#banner{  
  width: 300px; 
  height: 250px;
  display: block;
  cursor: pointer;  
  overflow: hidden;
  position:absolute;
  visibility: visible;  
  border: 1px #444444 solid;
  background: #EEEEEE;
}

#all-animation,
#frm-1,
#frm-2,
#frm-3,
#frm-4,
#frm-5,
#frm-6,
#frm-7 {  
  top: 0px;
  width: 100%;
  height: 100%;
}

#banner * {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#banner.is-visible * {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

/* ie-fallback */
.ie-fallback{
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
}

/* clickTAG   */
#clickTAG {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0;
   width: 100%;
   height: 100%;
   z-index: 9;
   cursor:pointer;
   margin: 0;
}

/*******Frame one css start * Animation duration: 3 Sec *********/

.bg{
  left: 0;
  top: 0;
  position: absolute;
}

.badge{
  top: 80px;
  left: 122px;
  position:absolute;

  -webkit-animation: aw-1 3s linear 0s both;
          animation: aw-1 3s linear 0s both;
}
.funding-1st{
  bottom: 13px;
  left: 12px;
  position: absolute;

  -webkit-animation: fade-out 2.9s linear .1s both;
          animation: fade-out 2.9s linear .1s both;
}
.vandor-text-1st{
  width:135px;
  font-size: 12px;
  line-height: 14px;
  left: 88px;
  bottom: 12px;
  position: absolute;

  -webkit-animation: fade-out 2.9s linear .1s both;
          animation: fade-out 2.9s linear .1s both;
}
.vandor_text1 sup{
  font-size: 8px;
  line-height: 9px;
  padding-left: 1px;
}
/*******Frame one css end **********/

/*******Frame two css start * Animation duration: 2 Sec *********/

.frm-2-text {
  width:300px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  top:12px;
  position: absolute;

  -webkit-animation: fade-out 2.2s linear 3s both;
          animation: fade-out 2.2s linear 3s both;
}
.product1{
  position: absolute;
     top: 68px;
    left: 68px;
  z-index:2;
  -webkit-animation: product1 2s linear 3s both;
          animation: product1 2s linear 3s both;


}
.cta{
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  left: 7px;
  bottom: 20px;
  position: absolute;

  -webkit-animation: cta-in 11.8s linear 3s both;
          animation: cta-in 11.8s linear 3s both;
}

.cta span{
  font-size: 13px;
  line-height: 12px;
  position: relative;
  top: -1px;
}
/*******Frame two css end **********/

/*******Frame three css start * Animation duration: 2 Sec *********/

.frm-3-text {
  width:300px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  top:12px;
  position: absolute;

  -webkit-animation: fade-out 2s linear 5.2s both;
          animation: fade-out 2s linear 5.2s both;
}
.product2{
  position: absolute;
   top: 68px;
    left: 58px;
  -webkit-animation: product2 2.2s linear 5s both;
          animation: product2 2.2s linear 5s both;


}
/*******Frame three css end **********/

/*******Frame four css start * Animation duration: 2 Sec *********/

.frm-4-text {
  width:260px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  top:12px;
  left: 20px;
  position: absolute;

  -webkit-animation: fade-out 2s linear 7.4s both;
          animation: fade-out 2s linear 7.4s both;
}
.product3{
  position: absolute;
  top: 32px;
  left: 70px;
  -webkit-animation: product3 2.2s linear 7.2s both;
          animation: product3 2.2s linear 7.2s both;
}

/*******Frame four css end **********/

/*******Frame five css start * Animation duration: 2 Sec *********/

.frm-5-text {
  width:220px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.16em;
  /*text-transform: uppercase;*/
  top:12px;
  left: 40px;
  position: absolute;

  -webkit-animation: fade-out 2.2s linear 9.6s both;
          animation: fade-out 2.2s linear 9.6s both;
}

.product4{
  position: absolute;
  top: 55px;
  left: 70px;
  -webkit-animation: product3 2.2s linear 9.6s both;
          animation: product3 2.2s linear 9.6s both;
}

/*******Frame five css end **********/

/*******Frame six css start * Animation duration: 3 Sec *********/
.product5{
  position: absolute;
      top: 50px;
    left: 100px;
    width: 245px;
  -webkit-animation: fade-in 3s linear 11.8s both;
          animation: fade-in 3s linear 11.8s both;
}

.aw_logo{
  top: 18px;
  left:18px;
  width: 263px;
  height: 26px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 11.8s both;
          animation: fade-in 3s linear 11.8s both;
}
.funding-last{
  bottom: 15px;
  left: 12px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 11.8s both;
          animation: fade-in 3s linear 11.8s both;
}
.vandor-text-last{
  width:90px;
  font-size: 12px;
  line-height: 14px;
  left: 80px;
  bottom: 16px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 11.8s both;
          animation: fade-in 3s linear 11.8s both;
}
.vandor-text1 sup{
  font-size: 8px;
  line-height: 9px;
  padding-left: 1px;
}
.spec{
  width:145px;
  font-size: 14px;
  line-height:16px;
  top: 60px;
  left:7px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 11.9s both;
          animation: fade-in 3s linear 11.9s both;
}
.spec sup{
  font-size: 8px;
  line-height: 6px;
  padding-left: 1px;
}
.price-point{
  width:300px;
  font-size: 12px;
  line-height:12px;
      top: 79px;
    left: 7px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 12s both;
          animation: fade-in 3s linear 12s both;
}
.bold-price-doller{
  font-size: 12px;
  top: 90px;
  left: 7px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 12s both;
          animation: fade-in 3s linear 12s both;
}
.bold-price{
  font-size: 20px;
  top: 91px;
  left: 15px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 12s both;
          animation: fade-in 3s linear 12s both;
}
.normal-price{
  font-size: 12px;
  line-height: 11px;
  top: 93px;
  left: 50px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 12s both;
          animation: fade-in 3s linear 12s both;
}
.camp_text{
  font-size: 12px;
  line-height:14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  bottom: 16px;
  right:15px;
  width: 100px;
  position: absolute;
  -webkit-animation: fade-in 3s linear 11.8s both;
          animation: fade-in 3s linear 11.8s both;
}
.small-text{
  width:90px;
  font-size: 12px;
  line-height:14px;
     top: 70px;
    left: 7px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 12s both;
          animation: fade-in 3s linear 12s both;
}
/*******Frame six css start **********/

/****** START:animation keyframes*******/

@-webkit-keyframes aw-1 {
  0%{opacity: 0;}
  20%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes aw-1 {
  0%{opacity: 0;}
  20%{opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 0;}
}
/*@-webkit-keyframes product1 {
   0%{transform:translate(0px,0px) scale(1,1); opacity: 0;}
   3%{transform:translate(0px,0px) scale(1,1); opacity: 1;}
   58%{transform:translate(0px,0px) scale(1,1); opacity: 1;}
   60%{transform:translate(0px,0px) scale(1.2,1.2); opacity: 1;}
   75%{transform:translate(0px,0px) scale(1.2,1.2); opacity: 1;}
  78%{transform:translate(47px,-20px) scale(.6,.6); opacity: 1;}
  100%{transform:translate(47px,-20px) scale(.6,.6); opacity: 1;}
}
@keyframes product1 {
   0%{transform:translate(0px,0px) scale(1,1); opacity: 0;}
   3%{transform:translate(0px,0px) scale(1,1); opacity: 1;}
   58%{transform:translate(0px,0px) scale(1,1); opacity: 1;}
   60%{transform:translate(0px,0px) scale(1.2,1.2); opacity: 1;}
   75%{transform:translate(0px,0px) scale(1.2,1.2); opacity: 1;}
  78%{transform:translate(48px,-30px) scale(.6,.6); opacity: 1;}
  100%{transform:translate(48px,-30px) scale(.6,.6); opacity: 1;}
}
@-webkit-keyframes product2 {
   0%{transform:translate(0px,-25px) scale(1,1); opacity: 0;}
   8%{transform:translate(210px,-25px) scale(1,1); opacity: 1;}
   50%{transform:translate(210px,-25px) scale(1,1); opacity: 1;}
   53%{transform:translate(200px,-25px) scale(1.2,1.2); opacity: 1;}
   72%{transform:translate(200px,-25px) scale(1.2,1.2); opacity: 1;}
  75%{transform:translate(300px,-60px) scale(.7,.7); opacity: 1;}
  100%{transform:translate(300px,-60px) scale(.7,.7); opacity: 1;}
}
@keyframes product2 {
   0%{transform:translate(0px,-25px) scale(1,1); opacity: 0;}
   8%{transform:translate(210px,-25px) scale(1,1); opacity: 1;}
   50%{transform:translate(210px,-25px) scale(1,1); opacity: 1;}
   53%{transform:translate(200px,-25px) scale(1.2,1.2); opacity: 1;}
   72%{transform:translate(200px,-25px) scale(1.2,1.2); opacity: 1;}
  75%{transform:translate(300px,-60px) scale(.7,.7); opacity: 1;}
  100%{transform:translate(300px,-60px) scale(.7,.7); opacity: 1;}
}
@-webkit-keyframes product3 {
   0%{transform:translate(0px,0px) scale(1,1); opacity: 0;}
   8%{transform:translate(-195px,0px) scale(1,1); opacity: 1;}
   37%{transform:translate(-195px,0px) scale(1,1); opacity: 1;}
   41%{transform:translate(-185px,0px) scale(1.2,1.2); opacity: 1;}
   65%{transform:translate(-185px,0px) scale(1.2,1.2); opacity: 1;}
  68%{transform:translate(-190px,-34px) scale(.7,.7); opacity: 1;}
  100%{transform:translate(-190px,-34px) scale(.7,.7); opacity: 1;}
}
@keyframes product3 {
   0%{transform:translate(0px,0px) scale(1,1); opacity: 0;}
   8%{transform:translate(-195px,0px) scale(1,1); opacity: 1;}
   37%{transform:translate(-195px,0px) scale(1,1); opacity: 1;}
   41%{transform:translate(-185px,0px) scale(1.2,1.2); opacity: 1;}
   65%{transform:translate(-185px,0px) scale(1.2,1.2); opacity: 1;}
  68%{transform:translate(-190px,-34px) scale(.7,.7); opacity: 1;}
  100%{transform:translate(-190px,-34px) scale(.7,.7); opacity: 1;}
}*/
@-webkit-keyframes cta-in {
   0%{opacity: 0;transform:translate(0px,0px);}
   3%{opacity: 1;transform:translate(0px,0px);}
   75%{opacity: 1;transform:translate(0px,0px);}
  76%{opacity: 0;transform:translate(0px,-0px);}
  78%{opacity: 0;transform:translate(0px,-70px);}
  81%{opacity: 1;transform:translate(0px,-70px);}
  100%{opacity: 1;transform:translate(0px,-70px);}
}
@keyframes cta-in {
   0%{opacity: 0;transform:translate(0px,0px);}
   3%{opacity: 1;transform:translate(0px,0px);}
   75%{opacity: 1;transform:translate(0px,0px);}
  76%{opacity: 0;transform:translate(0px,-0px);}
  78%{opacity: 0;transform:translate(0px,-70px);}
  81%{opacity: 1;transform:translate(0px,-70px);}
  100%{opacity: 1;transform:translate(0px,-70px);}
}
@-webkit-keyframes fade-out {
    0%{opacity: 0;}
   20%{opacity: 1;}
   95%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes fade-out {
    0%{opacity: 0;}
   20%{opacity: 1;}
   95%{opacity: 1;}
  100%{opacity: 0;}
}
@-webkit-keyframes fade-in {
    0%{opacity: 0;}
   20%{opacity: 1;}
   90%{opacity: 1;}
  100%{opacity: 1;}
}
@keyframes fade-in {
    0%{opacity: 0;}
   20%{opacity: 1;}
   80%{opacity: 1;}
  100%{opacity: 1;}
}

@-webkit-keyframes product1{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
@keyframes product1{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}

@-webkit-keyframes product2{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
@keyframes product2{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}

@-webkit-keyframes product3{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
@keyframes product3{
	0%{opacity:0;}
	10%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
.spec1 {
	  width:145px;
  font-size: 14px;
  line-height:16px;
  top: 60px;
  left:7px;
  position: absolute;

  -webkit-animation: fade-in 3s linear 11.9s both;
          animation: fade-in 3s linear 11.9s both;
}

.pro {
   width:135px;
  font-size: 12px;
  line-height: 14px;
    left: 136px;
    bottom: 34px;
  position: absolute;

  -webkit-animation: fade-out 2.2s linear 3s both;
          animation: fade-out 2.2s linear 3s both;
}

.pro1 {
	  width:135px;
  font-size: 12px;
  line-height: 14px;
    left: 112px;
    bottom: 53px;
  position: absolute;
	
	  -webkit-animation: fade-out 2s linear 5.2s both;
          animation: fade-out 2s linear 5.2s both;
}

.pro2 {
	  width:135px;
  font-size: 12px;
  line-height: 14px;
    left: 128px;
    bottom: 50px;
  position: absolute;
	
	  -webkit-animation: fade-out 2s linear 7.4s both;
          animation: fade-out 2s linear 7.4s both;
}