body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
	
}
.banner {
	font-family: Arial, Helvetica, sans-serif;
    width:298px;
    height:248px;
	background:#000;
    border:1px solid #000;
    overflow:hidden;
    display:block !important;
    position:relative;
	opacity:0;
}
strong {
    font-weight: bold;
}
sup {
    font-size: 6px;
    position: relative;
    top: -0.5em;
}
.positionAb {
    position: absolute;
}
.aC {
    left:0;
    right:0;
    margin: 0 auto;
}

/*///////////////////////////////*/
#loader-container {
    display:none;
}
/*///////////////////////////////*/


/*/////////////////////////////////////////////*/


#frame1, #frame2, #frame3, #frame4, #frame5, #frame6, #frame7{ top:0; left: 0; width:300px; height:250px; opacity:1;}


#frame3{ opacity:0;}

#frame1 { z-index: 1;}

#frame1_txt{  top:0px;  left: 0px; width:300px; height:250px; background:url(frame1_text.png);; z-index: 2 }

#frame2_txt{  top:0px;  left: 0px; width:300px; height:250px; background:url(frame2_text.png);; z-index: 2 }

#frame3_txt{  top:0px;  left: 0px; width:300px; height:250px; background:url(frame3_text.png);; z-index: 2 }

#frame6{ background:#fff;}

#frame6_txt{  top:0px;  left: 0px; width:300px; height:250px; opacity:0; background:url(frame6_text.png);; z-index: 2 }



#copy{  top:0px;  left: 0px; width:300px; height:250px; background:url(copy.png);; z-index: 2; opacity:0; }

#top_txt {top: 0; left: 0; width:300px; height:40px; background: url(top.png); opacity:1; z-index: 3  }

#top {top: 0; left: 0; width:300px; height:40px; background: url(top_bg.png); opacity:0; z-index: 3;  }


#repeat {
    background: url(refresh.png) #000 no-repeat;
    width: 15px;
    height: 17px;
    top: 4px;
    right: -15px;
    z-index: 1000;
    
    cursor: pointer;
	-webkit-transition: 500ms ease-out;
	-moz-transition: 500ms ease;
	-o-transition: 500ms ease-out;
	-ms-transition: 500ms ease-out;
	transition: 500ms ease-out;
	opacity: 0;
}


/*/////////////////////////////////////////////
BG_EXIT
/////////////////////////////////////////////*/
#bg_exit{
	background: url(clicktag.png) no-repeat;
	top:0px;
	left: 0px;
    width:300px;
    height:250px;   
    cursor:pointer;
    z-index: 997;
    display: block;
    position: absolute;
}


/*/////////////////////////////////////////////
CTA
/////////////////////////////////////////////*/

#cta{
	background: url(cta.png) no-repeat 0px 0px;
	top:0px;
	left:0px;
    width:300px;
    height:250px;   
    cursor:pointer;
	opacity: 0;
    z-index: 3;
}






#frame4{ z-index:2;}

/**********/
/*/BUBBLE/*/
.progressIndicator {
  left: 0px;
  top: 0px;
  width: 300px;
  height: 250px;
  margin: 0px 0 0 0px;
  overflow: hidden;
  position: absolute;
}

.progressIndicatorPlaying {
  -webkit-animation: containerAnimation 5s forwards;
          animation: containerAnimation 5s forwards;
}

@-webkit-keyframes containerAnimation {
  00% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
		
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
		
  }
  45% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  55% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
		
  }
  65% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
			
  }
}

@keyframes containerAnimation {
  30% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  55% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  65% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.progressIndicator > span {

background: url(circle.png);
background-size: cover;

  height: 5px;
  opacity: 0;
  position: absolute;
  width: 5px;
  top:90%;
  left:85%;
}

.progressIndicatorPlaying > span {
  -webkit-animation: bubbleAnimation 3s forwards;
          animation: bubbleAnimation 3s forwards;
}

@-webkit-keyframes bubbleAnimation {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(2);
            transform: scale(2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(7);
            transform: scale(7);
  }
}

@keyframes bubbleAnimation {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(2);
            transform: scale(2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(7);
            transform: scale(7);
  }
}

/* Dimensions */
.progressIndicator > span:nth-child(3n) {
  height:30px;
  width: 30px;
    -webkit-animation-delay: 2s !important;
          animation-delay: 2s !important;
}

.progressIndicator > span:nth-child(3n + 1) {
  height: 10px;
  width: 10px;
}

/* Delay and position */
.progressIndicator > span:nth-child(1) {
  left: 15%;
  top: 80%;
}

.progressIndicator > span:nth-child(2) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
  left: 30%;
  top: 60%;
}

.progressIndicator > span:nth-child(3) {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
  left: 66%;
  top: 30%;
}

.progressIndicator > span:nth-child(4) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
  left: 45%;
  top: 50%;
}

.progressIndicator > span:nth-child(5) {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
  left: 65%;
  top: 15%;
}

.progressIndicator > span:nth-child(6) {
  -webkit-animation-delay: 0.20s;
          animation-delay: 0.20s;
  left: 25%;
  top: 32%;
}

.progressIndicator > span:nth-child(7) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
  left: 34%;
  top: 90%;
}

.progressIndicator > span:nth-child(8) {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
  left: 80%;
  top: 30%;
}

.progressIndicator > span:nth-child(9) {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
  left: 50%;
  top: 45%;
}

.progressIndicator > span:nth-child(10) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
  left: 60%;
  top: 85%;
}

.progressIndicator > span:nth-child(11) {
  -webkit-animation-delay: 0.40s;
          animation-delay: 0.40s;
  left: 70%;
  top: 60%;
}

.progressIndicator > span:nth-child(12) {
  -webkit-animation-delay: 0.44s;
          animation-delay: 0.44s;
  left: 68%;
  top: 68%;
}

.progressIndicator > span:nth-child(13) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
  left: 60%;
  top: 30%;
}
.progressIndicator > span:nth-child(14) {
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
  left: 13%;
  top: 22%;
}

.progressIndicator > span:nth-child(15) {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
  left: 14%;
  top: 40%;
}

.progressIndicator > span:nth-child(16) {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
  left: 10%;
  top: 70%;
}

.progressIndicator > span:nth-child(17) {
  -webkit-animation-delay: 0.64s;
          animation-delay: 0.64s;
  left: 15%;
  top: 35%;
}

.progressIndicator > span:nth-child(18) {
  -webkit-animation-delay: 0.68s;
          animation-delay: 0.68s;
  left: 30%;
  top: 30%;
}

.progressIndicator > span:nth-child(19) {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
  left: 50%;
  top: 70%;
}

.progressIndicator > span:nth-child(20) {
  -webkit-animation-delay: 0.76s;
          animation-delay: 0.76s;
  left: 83%;
  top: 52%;
}

.progressIndicator > span:nth-child(21) {
  -webkit-animation-delay: 0.80s;
          animation-delay: 0.80s;
  left: 0%;
  top: 60%;
}

.progressIndicator > span:nth-child(22) {
  -webkit-animation-delay: 0.84s;
          animation-delay: 0.84s;
  left: -10%;
  top: 40%;
}