@charset "utf-8";
/* CSS Document */

body { margin:0 auto; padding:0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

#container { position:absolute; width:300px; height:250px; overflow:hidden; top:0px; left:0px; background-color:#eae8db; display:none; }

/*-------------------*/
/*     C L A S S     */
/*-------------------*/
.adSize { position:absolute; top:0px; width:300px; height:250px; }
.defPos { position:absolute; top:0px; left:0px; }
.hideElm { display: none; }
.btn { cursor: pointer; }
.anchorCenter { -webkit-transform-origin: center center; transform-origin: center center; }


/*-------------*/
/*     I D     */
/*-------------*/
/*SHINE*/
.dot{ position:absolute; left: -20px; top: -20px; width:40px; height:40px; background: url(shine.png) no-repeat; background-size: 100%; }

/* Border */
#border { box-sizing: border-box; border: 1px solid #ABABAB; }
#resolve, #sparkles {position:absolute;top: 0px;left: 0px;width:300px;height:450px;}

/* Background */
#bg1 { background: url(bg1.jpg) no-repeat; background-size: 100%;}
#bg2 { background: url(bg2.jpg) no-repeat; background-size: 100%;}
#bg3 { background: url(bg3.jpg) no-repeat; background-size: 100%;position:absolute;top: 0px;left: 0px;width:300px;height:450px; will-change: transform;}
#frame2, #frame3 {position:absolute;top: 0px;left: 0px;width:300px;height:250px; background-color: #fff;}
#frame4 {position:absolute;top: 0px;left: 0px;width:300px;height:250px; background-color: #000;}
/* Headlines */
#m1 { background: url(m1.png) no-repeat; background-size: 100%; }
#m2a { background: url(m2a.png) no-repeat; background-size: 100%; }
#m2b { background: url(m2b.png) no-repeat; background-size: 100%; }
#m3a { background: url(m3a.png) no-repeat; background-size: 100%; }
#m3b { background: url(m3b.png) no-repeat; background-size: 100%; }
#m4a { background: url(m4a.png) no-repeat; background-size: 100%; }
#m4b { background: url(m4b.png) no-repeat; background-size: 100%; }
#txt1Mask { position:absolute; width: 300px; height: 250px; overflow: hidden; }

/* End Frame */
#t1 { background: url(t1.png) no-repeat; background-size: 100%; }
#t2 { background: url(t2.png) no-repeat; background-size: 100%; }
#logo { background: url(logo.png) no-repeat; background-size: 100%; }
#logo2 { background: url(logo2.png) no-repeat; background-size: 100%; }
#logo3 { background: url(logo3.png) no-repeat; background-size: 100%; }
#dummy1 { background: url(logo3.png) no-repeat; background-size: 100%; top:0px; left:-300px;}
#dummy2 { background: url(logo3.png) no-repeat; background-size: 100%; top:0px; left:-300px;}

/* CTA */
#cta_out { background: url(cta_out.png) no-repeat; background-size: 100%; }
#cta_over { background: url(cta_over.png) no-repeat; background-size: 100%; opacity:0;}