/* define variables*/
body { color: #000000; font-size: 100%; font-family: Arial, sans-serif; line-height: 1.48; border: 0; margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

*, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a, img { border: 0; outline: none; }

/*common styles to extend*/
.display-ad-size, #wrapper, #wrapper #stage { display: block; margin: 0; padding: 0; width: 300px; height: 250px; /*overflow: hidden;*/ -webkit-backface-visibility: hidden; cursor: pointer; }

.display-abs-pos { position: absolute; display: block; opacity: 1; filter: alpha(opacity=1); }

.hide-abs-pos { position: absolute; display: block; opacity: 0; filter: alpha(opacity=0); }

.hide, #wrapper #stage #line, #wrapper #stage #teardrop, #wrapper #stage #logo, #wrapper #stage #cta { opacity: 0; filter: alpha(opacity=0); }

svg { position: absolute; left: 0; top: 0; }

/*ad styling*/
#wrapper { position: absolute; background-color: #fff; left: 0; top:0;}
#wrapper #bg-exit { background-color: rgba(255, 255, 255, 0); cursor: pointer; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 100; }
#wrapper #stage { border: 1px solid #ececec; position: absolute; overflow: hidden; }
#wrapper #stage #scene { position: relative; top: 0; left: 0; width: 518px; height: 452px; }
#wrapper #stage #sky, #wrapper #stage #island, #wrapper #stage #foreground, #wrapper #stage #cloud { position: absolute; }
#wrapper #stage #cloud { top: 90px; right: 0; }
#wrapper #stage .text { position: absolute; width: 100%; height: 100%; left: 0; }
#wrapper #stage #text01, #wrapper #stage #text02, #wrapper #stage #text03 { top: 60px; }
#wrapper #stage #text04 { top: 80px; }
#wrapper #stage #sky { top: 0; left: 0; }
#wrapper #stage #island { top: 32px; right: -30px; }
#wrapper #stage #girls { bottom: 0; left: 0; }
#wrapper #stage #foreground { bottom: 0; left: 0; }
#wrapper #stage #birds { position: absolute; width: 100%; height: 100%; top: 224px; left: 260px; }
#wrapper #stage #line { position: absolute; top: 0; left: 0; width: 1px; height: 25px; background-color: #000; }
#wrapper #stage #teardrop { position: absolute; left: 0; top: 35px; }
#wrapper #stage #logo { position: absolute; left: 0; top: 15px; width: 66px; height: 56px; }
#wrapper #stage #logo div { position: absolute; }
#wrapper #stage #logo .animation-container { left: 10px; top: 0; width: 88px; height: 84px; overflow: hidden; }
#wrapper #stage #logo .animation { left: 0; top: 0; }
#wrapper #stage #logo .crystal { bottom: 0; }
#wrapper #stage #cta { position: absolute; left: 0; top: 100px; width: 122px; height: 30px; background-color: rgba(0, 153, 153, 0.85); }
#wrapper #stage #cta .cta-text { position: absolute; }