/* 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: 728px; height: 90px; /*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 .text, #wrapper #stage #line, #wrapper #stage #teardrop, #wrapper #stage #logo, #wrapper #stage #cta, #wrapper #stage #cta .cta-line { 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; /*37px*/ }
#wrapper #stage #scene01, #wrapper #stage #scene02 { position: absolute; bottom: 0; left: 0; width: 1090px; height: 600px; }
#wrapper #stage .text { position: absolute; width: 100%; height: 100%; left: 0; }
#wrapper #stage #text01, #wrapper #stage #text02 { top: 45px; }
#wrapper #stage #text03 { top: 45px; }
#wrapper #stage #text04 { top: 36px; }
#wrapper #stage #sky { position: absolute; top: 0; left: 0; }
#wrapper #stage #foreground { position: absolute; left: 0; bottom: 0; }
#wrapper #stage #balloon { position: absolute; left: 808px; top: 300px; }
#wrapper #stage .element-with-transform { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#wrapper #stage #line { position: absolute; top: 0; left: 0; width: 1px; height: 15px; background-color: #000; }
#wrapper #stage #teardrop { position: absolute; left: 0; top: 25px; }
#wrapper #stage #logo { position: absolute; left: 36px; top: 0; 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; right: 60px; top: 0; width: 122px; height: 30px; background-color: rgba(0, 153, 153, 0.95); }
#wrapper #stage #cta .cta-text { position: absolute; }
#wrapper #stage #cta .cta-line { position: absolute; width: 1px; height: 1px; background-color: #009999; }
#wrapper #stage #cta .cta-line-left { left: 0; bottom: 0; }
#wrapper #stage #cta .cta-line-right { right: 0; top: 0; }
#wrapper #stage #overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; }
#wrapper #stage #guides { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#wrapper #stage #guides .guide { position: absolute; background-color: cyan; }
#wrapper #stage #guides .guideL, #wrapper #stage #guides .guideR { width: 1px; height: 100%; top: 0; }
#wrapper #stage #guides .guideT, #wrapper #stage #guides .guideB { width: 100%; height: 1px; left: 0; }
#wrapper #stage #guides .guideL { left: 0; }
#wrapper #stage #guides .guideR { right: 0; }
#wrapper #stage #guides .guideT { top: 0; }
#wrapper #stage #guides .guideB { bottom: 0; }