html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.full-size {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-top: 150%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.inner-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
}

.inner-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
}

.scale-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100vh / 3 * 2);
    height: 100%;
    transform: translate(-50%, 0);
}

.bg {
    position: absolute;
    top: -3%;
    left: 0;
    width: 100%;
    height: auto;
    /*transform: translate(0, -50%);*/
    /*-webkit-transform: translate(0, -50%);*/
}

.logo-m {
    position: absolute;
    left: 32.5%;
    top: 2.81%;
    width: 35.16%;
    height: auto;
}


.text-footer {
    position: absolute;
    left: 24.69%;
    top: 93.44%;
    width: 23.44%;
    height: auto;
}

.footer-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(0, 0);
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

.marvel-1 {
    position: absolute;
    left: 26.09%;
    top: 10.52%;
    width: 43.59%;
    height: auto;
}

.marvel-2 {
    position: absolute;
    left: 34.69%;
    top: 15.42%;
    width: 31.09%;
    height: auto;
}

.marvel-3 {
    position: absolute;
    left: 32.5%;
    top: 12.4%;
    width: 36.09%;
    height: auto;
}

.m1b, .m2b, .m3b {
    opacity: 0;
}
.cover {
    position: absolute;
    left: 5%;
    top: 53%;
    width: 90%;
    height: 32%;
}
.video-container {
    position: absolute;
    left: 17.03%;
    top: 57%;
    width: 65%;
    height: 24.38%;
    background: #000;
}

.player {
    width: 100%;
    height: 100%;
}

.pause, .volume {
    position: absolute;
    bottom: -2%;
    width: 18%;
    height: 28%;
}
.pause svg {
    width: 50%;
    padding-top: 32%;
}

.volume svg {
    width: 50%;
    padding-top: 32%;
    padding-left: 45%;
}
.pause {
    left: 0;
}

.volume {
    right: 0;
}

.legal {
    position: absolute;
    left: 97.81%;
    top: 49.06%;
    width: 1.41%;
    height: auto;
}

.logo {
    position: absolute;
    left: 51.72%;
    top: 88.44%;
    width: 23.28%;
    height: auto;
}


.border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}

.border-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}

.cta_ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.marvel-3-light {
    position: absolute;
    left: 32.5%;
    top: 12.81%;
    width: 36.09%;
    height: auto;
    opacity: 0;
}

.m3-light4 {
    position: absolute;
    left: 41.25%;
    top: 18.02%;
    width: 4.53%;
    height: auto;
    opacity: 0;
    transform-origin: bottom center;
}

.m3-light3 {
    position: absolute;
    left: 44.38%;
    top: 20.31%;
    width: 5%;
    height: auto;
    opacity: 0;
    transform-origin: bottom left;
}

.m3-light2 {
    position: absolute;
    left: 44.22%;
    top: 23.75%;
    width: 4.84%;
    height: auto;
    opacity: 0;
    transform-origin: top center;
}

.m3-light1 {
    position: absolute;
    left: 36.09%;
    top: 23.65%;
    width: 9.53%;
    height: auto;
    opacity: 0;
    transform-origin: top right;
}

.marvel-2-light {
    position: absolute;
    left: 36.72%;
    top: 16.04%;
    width: 26.41%;
    height: auto;
    opacity: 0;
}

.marvel-1-light {
    position: absolute;
    left: 32.5%;
    top: 12.4%;
    width: 33.13%;
    height: auto;
    opacity: 0;
}

.m1-light3 {
    position: absolute;
    left: 49.69%;
    top: 15.52%;
    width: 8.75%;
    height: auto;
    transform-origin: left center;
    opacity: 0;
}

.m1-light2 {
    position: absolute;
    left: 43.44%;
    top: 13.54%;
    width: 10.78%;
    height: auto;
    transform-origin: bottom center;
    opacity: 0;
}

.m1-light1 {
    position: absolute;
    left: 39.06%;
    top: 15.21%;
    width: 8.59%;
    height: auto;
    transform-origin: right center;
    opacity: 0;
}

.m2-light2 {
    position: absolute;
    left: 40.47%;
    top: 20.1%;
    width: 9.06%;
    height: auto;
    opacity: 0;
    transform-origin: right center;
}


.m2-light3 {
    position: absolute;
    left: 41.72%;
    top: 24.06%;
    width: 9.06%;
    height: auto;
    opacity: 0;
    transform-origin: right center;
}

.m2-light1 {
    position: absolute;
    left: 39.84%;
    top: 23.44%;
    width: 9.06%;
    height: auto;
    transform-origin: right center;
    opacity: 0;
}
.slider {
    top: 2%;
}
@media (min-aspect-ratio: 10/15) {
    .footer-container {
        left: 50%;
        width: calc(100vh / 3 * 2);
        transform: translate(-50%, 0);
    }
}