body,
body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}


#ad {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 0px;
    left: 0px;
    margin: auto;
    background-color: #f12f35;
}


#content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    overflow: hidden;
}


#clickthrough-button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 400;
}
#border{
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid #000000;
    width:300px;
    height:250px;
    z-index: 300;
    box-sizing: border-box;
}
.canvas_size {
    position: absolute;
    background-repeat: no-repeat;
    width: 300px;
    height: 250px;

}
/* FRAME 1 */
.bg1{
    background-image: url("../img/1bg.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 1;
}
.tt1{
    background-image: url("../img/1tt.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 2;
}
.url1{
    background-image: url("../img/1url.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 3;
}

/* DOLL'S HOUSE */

.bg2{
    background-image: url("../img/2bg.jpg");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 4;
}
.logo2{
    background-image: url("../img/2logo.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 5;
}
.date2{
    background-image: url("../img/2date.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 5;
}
.billing2{
    background-image: url("../img/2billing.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index:6;
}
.tt21{
    background-image: url("../img/2tt1.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 6;
}
.tt2{
    background-image: url("../img/tt2.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.l_a{
    background-image: url("../img/2letter_a.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 64px;
    z-index: 6;
}
.l_d{
    background-image: url("../img/2letter_d.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 84px;
    z-index: 6;
}
.l_o{
    background-image: url("../img/2letter_o.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 100px;
    z-index: 6;
}
.l_l{
    background-image: url("../img/2letter_l.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 116px;
    z-index: 6;
}
.l_ll{
    background-image: url("../img/2letter_l.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 129px;
    z-index: 6;
}
.l_ap{
    background-image: url("../img/2letter_.png");
    background-size: contain;
    width: 13px;
    height: 16px;
    top: 10px;
    left: 136px;
    z-index: 6;
}
.l_s{
    background-image: url("../img/2letter_s.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 145px;
    z-index: 6;
}
.l_h{
    background-image: url("../img/2letter_h.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 164px;
    z-index: 6;
}
.l_oo{
    background-image: url("../img/2letter_o.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 180px;
    z-index: 6;
}
.l_u{
    background-image: url("../img/2letter_u.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 196px;
    z-index: 6;
}
.l_ss{
    background-image: url("../img/2letter_s.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 211px;
    z-index: 6;
}
.l_e{
    background-image: url("../img/2letter_e.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 10px;
    left: 225px;
    z-index: 6;
}
.l_com{
    background-image: url("../img/2letter_.png");
    background-size: contain;
    width: 13px;
    height: 16px;
    top: 20px;
    left: 237px;
    z-index: 6;
}
.l_p{
    background-image: url("../img/2letter_p.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 26px;
    left: 116px;
    z-index: 6;
}
.l_aa{
    background-image: url("../img/2letter_a.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 26px;
    left: 130px;
    z-index: 6;
}
.l_r{
    background-image: url("../img/2letter_r.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 26px;
    left: 146px;
    z-index: 6;
}
.l_t{
    background-image: url("../img/2letter_t.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 26px;
    left: 160px;
    z-index: 6;
}
.l_2{
    background-image: url("../img/2letter_2.png");
    background-size: contain;
    width: 16px;
    height: 16px;
    top: 26px;
    left: 179px;
    z-index: 6;
}

/* THE TRIALS */
.bg3{
    background-image: url("../img/3bg.jpg");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 7;
}
.bg3_lines{
    background-image: url("../img/3bg_lines.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 9;
}
.tt3{
    background-image: url("../img/3tt.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 7;
}
.billing3{
    background-image: url("../img/3billing.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 12;
}
.logo3{
    background-image: url("../img/3logo.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 12;
}
.bg4{
    background-image: url("../img/4bg.jpg");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 7;
}
/* .bg4_blur{
    background-image: url("../img/4bg_blur.jpg");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
} */
.logo4{
    background-image: url("../img/4logo.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.tt4{
    background-image: url("../img/4tt.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.date4{
    background-image: url("../img/4date.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.billing4{
    background-image: url("../img/4billing.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 11;
}
.smudge1{
    background-image: url("../img/4smudge1.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 9;
}
.smudge2{
    background-image: url("../img/4smudge2.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 9;
}
/* BAND'S VISIT */
.bg5{
    background-image: url("../img/5bg.jpg");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.tt5{
    background-image: url("../img/5tt.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.logo5{
    background-image: url("../img/5logo.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.date5{
    background-image: url("../img/5date.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.line5_blur{
    background-image: url("../img/5line_blur.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.line5{
    background-image: url("../img/5line.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}

/* WE BLACK WOMEN */
.bg6{
    background-image: url("../img/6bg.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.billing6{
    background-image: url("../img/6billing.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.logo6a{
    background-image: url("../img/6logo_women_line.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.logo6aa{
    background-image: url("../img/6logo_women_fill.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 12;
}
.logo6b{
    background-image: url("../img/6logo_black_line.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.logo6bb{
    background-image: url("../img/6logo_black_fill.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 12;
}
.logo6c{
    background-image: url("../img/6logo_we_line.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 10;
}
.logo6cc{
    background-image: url("../img/6logo_we_fill.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 12;
}
.btn{
    background-image: url("../img/btn.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 24;
}
.btn_over{
    background-image: url("../img/btn_over.png");
    background-size: contain;
    width: 300px;
    height: 250px;
    z-index: 25;
}