html, body, p, span {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}


html {
    width: 100%;
    height: 100%
}

body {
    margin: 0;
    padding: 0;
    line-height: 1;
    position: relative;
    width: 100%;
    background-color: #000
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

::-webkit-input-placeholder {
    color: #fff
}

::-moz-placeholder {
    color: #fff
}

:-ms-input-placeholder {
    color: #fff
}

:-moz-placeholder {
    color: #fff
}

@-moz-keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}


body {
    min-height: 100vh;
    height: 100%;
    font: 16px/1.2 Arial, Helvetica, sans-serif;
    color: #fff;
    margin: 0 auto;
    background: url("/images/marketing/ny2020_landing/bg-pattern.jpg") repeat center center;
}


.control {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
    right: 0;
    left: 50%;

}

.wrap {
    position: relative;
    width: 100%;
    height: 100%;
}


.next {
    display: block;
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 13%;
    height: 8%;
    background: url("/images/marketing/ny2020_landing/en/next-button-eng.png") no-repeat center center;
    background-size:  contain;
}

.good {
    display: block;
    position: absolute;
    bottom: 52%;
    left: 13%;
    width: 6%;
    height: 10%;
    background: url(/images/marketing/ny2020_landing/en/good-button.png) no-repeat center center;
    background-size: contain;
}

.goodtext {
    display: block;
    position: absolute;
    bottom: 32%;
    left: 2%;
    width: 27%;
    height: 13%;
}

.eviltext {
    display: block;
    position: absolute;
    bottom: 32%;
    right: 2%;
    width: 27%;
    height: 13%;
}


.c5 .goodtext {
    background: url(/images/marketing/ny2020_landing/en/green-button-p5-eng.png) no-repeat center center;
    background-size:  contain;
}
.c9 .goodtext {
    background: url(/images/marketing/ny2020_landing/en/green-button-p9-eng.png) no-repeat center center;
    background-size:  contain;
    bottom: 6%;
}
.c13 .goodtext {
    background: url(/images/marketing/ny2020_landing/en/green-button-p13-eng.png) no-repeat center center;
    background-size:  contain;
    bottom: 6%;
    left: 21%;
}

.c5 .eviltext {
    background: url(/images/marketing/ny2020_landing/en/red-button-p5-eng.png) no-repeat center center;
    background-size:  contain;
}
.c9 .eviltext {
    background: url(/images/marketing/ny2020_landing/en/red-button-p9-eng.png) no-repeat center center;
    background-size:  contain;
    bottom: 6%;
}
.c13 .eviltext {
    background: url(/images/marketing/ny2020_landing/en/red-button-p13-eng.png) no-repeat center center;
    background-size:  contain;
    bottom: 6%;
    right: 18%;
}

.evil {
    display: block;
    position: absolute;
    bottom: 52%;
    right: 13%;
    width: 6%;
    height: 10%;
    background: url("/images/marketing/ny2020_landing/en/evil-button.png") no-repeat center center;
    background-size:  contain;
}

.again {
    display: block;
    position: absolute;
    bottom: 32%;
    right: 14%;
    width: 10%;
    height: 3%;
    background: url("/images/marketing/ny2020_landing/en/again-button-eng.png") no-repeat center center;
    background-size:  contain;
}

.share_text {
    display: block;
    position: absolute;
    bottom: 48%;
    right: 11%;
    width: 16%;
    height: 3%;
    background: url("/images/marketing/ny2020_landing/en/share-results-eng.png") no-repeat center center;
    background-size:  contain;
}


.weapon {
    display: block;
    width: 49.2%;
    height: 60%;
    position: absolute;
    top: 6%;
    left: 21%;
    background: url("/images/marketing/ny2020_landing/weapons.png") no-repeat 0 0;
    background-size:  cover;
    z-index: 10;
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('/images/marketing/ny2020_landing/sword.png') url('/images/marketing/ny2020_landing/bow.png') url('/images/marketing/ny2020_landing/stuff.png') ;
}

#sword {
    width: 49.2%;
    height: 60%;
    position: absolute;
    top: 6%;
    left: 21%;
    background: url("/images/marketing/ny2020_landing/sword.png") no-repeat  0 0;
    background-size:  cover;
    opacity: 0;
    z-index: 0;
}
#bow {
    width: 49.2%;
    height: 60%;
    position: absolute;
    top: 6%;
    left: 21%;
    background: url("/images/marketing/ny2020_landing/bow.png") no-repeat 0 0;
    background-size:  cover;
    opacity: 0;
    z-index: 1;
}
#stuff {
    width: 49.2%;
    height: 60%;
    position: absolute;
    top: 6%;
    left: 21%;
    background: url("/images/marketing/ny2020_landing/stuff.png") no-repeat 0 0;
    background-size:  cover;
    opacity: 0;
}

.weapon area {outline: none;}
.weapon img#map {width: 100%; height: 100%; z-index: 20; display: block; position: static;}


.c10 .share_text, .c11 .share_text {
    bottom: 44%;
    left: 13%;
    right: auto;
}
.c14 .share_text, .c15 .share_text {
    bottom: 45%;
    left: 9%;
    right: auto;
}


.c10 .again, .c11 .again {
    bottom: 27%;
    left: 15%;
    right: auto;
}
.c14 .again, .c15 .again  {
    bottom: 29%;
    left: 11%;
    right: auto;
}


.c10 .fb, .c11 .fb {
    bottom: 37%;
    left: 17%;
    right: auto;
}
.c14 .fb, .c15 .fb {
    bottom: 38%;
    left: 13%;
    right: auto;
}

.c10 .tw, .c11 .tw {
    bottom: 37%;
    left: 21%;
    right: auto;
}
.c14 .tw, .c15 .tw {
    bottom: 38%;
    left: 17%;
    right: auto;
}

.c10 .crea, .c11 .crea, .c14 .crea, .c15 .crea {
    right: 17%;
    left: auto;
}

.c9 .evil, .c13 .evil {
    bottom: 23%;
}
.c9 .good, .c13 .good {
    bottom: 23%;
}
.c13 .good {
    left:32%;
}
.c13 .evil {
    right:29%;
}

.fb {
    display: block;
    position: absolute;
    bottom: 41%;
    right: 19.5%;
    width: 3%;
    height: 4.5%;
    background: url("/images/marketing/ny2020_landing/en/fb-button.png") no-repeat center center;
    background-size:  contain;
}

.tw {
    display: block;
    position: absolute;
    bottom: 41%;
    right: 15.5%;
    width: 3%;
    height: 4.5%;
    background: url("/images/marketing/ny2020_landing/en/tw-button.png") no-repeat center center;
    background-size:  contain;
}



.crea {
    display: block;
    position: absolute;
    bottom: 5%;
    left: 11%;
    width: 29%;
    height: 14%;
    background: url("/images/marketing/ny2020_landing/en/crea-button-eng.png") no-repeat center center;
    background-size:  contain;
}


.next, .good, .evil {
    -webkit-animation: pulsate 2s infinite;
    -moz-animation: pulsate 2s infinite;
    -o-animation: pulsate 2s infinite;
    animation: pulsate 2s infinite
}


.control .wrap > a, .control .wrap > div {
    display: none;
}

.control.c1 .p1 {
    display: block;
}
.control.c2 .p2 {
    display: block;
}
.control.c3 .p3 {
    display: block;
}
.control.c4 .p4 {
    display: block;
}
.control.c5 .p5 {
    display: block;
}
.control.c6 .p6 {
    display: block;
}
.control.c7 .p7 {
    display: block;
}
.control.c8 .p8 {
    display: block;
}
.control.c9 .p9 {
    display: block;
}
.control.c10 .p10 {
    display: block;
}
.control.c11 .p11 {
    display: block;
}
.control.c12 .p12 {
    display: block;
}
.control.c13 .p13 {
    display: block;
}
.control.c14 .p14 {
    display: block;
}
.control.c15 .p15 {
    display: block;
}

.control a:hover {
    transform: scale(1.1);
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

.page {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;

}
.stage1 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_1_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage2 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_2_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage3 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_3_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage4 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_4_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage5 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_5_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage6 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_6_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage7 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_7_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage8 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_8_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage9 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_9_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage10 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_10_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage11 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_11_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage12 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_12_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage13 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_13_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage14 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_14_eng.jpg") no-repeat center center;
    background-size:  contain;
}
.stage15 {
    background: url("/images/marketing/ny2020_landing/en/NY_comics_page_15_eng.jpg") no-repeat center center;
    background-size:  contain;
}