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;
}

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

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

.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%;
}

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

.img-1 {
    position: absolute;
    left: 3.91%;
    top: 26.98%;
    width: 44.84%;
    height: auto;
    transform-origin: top left;
}
.img-2 {
    position: absolute;
    left: 50.94%;
    top: 26.98%;
    width: 45%;
    height: auto;
    transform-origin: top right;
}
.img-3 {
    position: absolute;
    left: 3.91%;
    top: 48.44%;
    width: 44.84%;
    height: auto;
    transform-origin: center left;
}
.img-4 {
    position: absolute;
    left: 50.94%;
    top: 48.44%;
    width: 45%;
    height: auto;
    transform-origin: center right;
}
.img-5 {
    position: absolute;
    left: 3.91%;
    top: 69.9%;
    width: 44.84%;
    height: auto;
    transform-origin: bottom left;
}
.img-6 {
    position: absolute;
    left: 50.94%;
    top: 69.9%;
    width: 45%;
    height: auto;
    transform-origin: bottom right;
}
.img-cover {
    opacity: 0;
}
.cta-arrow {
    position: absolute;
    left: 89.34%;
    top: 92.29%;
    width: 8.59%;
    height: auto;
}
.cta {
    position: absolute;
    left: 65.78%;
    top: 92.29%;
    width: 27.83%;
    height: auto;
}

.star-5 {
    position: absolute;
    left: 69.53%;
    top: 16.67%;
    width: 2.81%;
    height: auto;
}
.star-4 {
    position: absolute;
    left: 65.94%;
    top: 16.67%;
    width: 2.97%;
    height: auto;
}
.star-3 {
    position: absolute;
    left: 62.5%;
    top: 16.67%;
    width: 3.13%;
    height: auto;
}
.star-2 {
    position: absolute;
    left: 58.91%;
    top: 16.67%;
    width: 2.97%;
    height: auto;
}
.star-1 {
    position: absolute;
    left: 55.16%;
    top: 16.67%;
    width: 3.13%;
    height: auto;
}
.tomato {
    position: absolute;
    left: 29.69%;
    top: 13.85%;
    width: 45.78%;
    height: auto;
}
.text-1 {
    position: absolute;
    left: 4.06%;
    top: 3.65%;
    width: 32.5%;
    height: auto;
}
.text-2 {
    position: absolute;
    left: 4.06%;
    top: 6.88%;
    width: 52.97%;
    height: auto;
}

.photo {
    position: absolute;
    left: 62.66%;
    top: -2.71%;
    width: 48.59%;
    height: auto;
}

.logo {
    position: absolute;
    left: 3.91%;
    top: 92.29%;
    width: 18.44%;
    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%;
}
.tomatoL {
    position: absolute;
    left: 31.59%;
    top: -0.31%;
    width: 44.69%;
    height: auto;
    display: none;
}

@media (min-aspect-ratio: 10/15){
    .container {
        width: 66.666666vh;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-aspect-ratio: 10/17) {

    .inner-text {
        width: 120%;
        padding-top: 180%;
    }
    .elements {
        top: 58%;
        width: 130%;
        left: -30%;
        padding-top: 190%;
    }
}
@media (max-aspect-ratio: 10/18) {
    .cta-container {
        top: auto;
        bottom: 2%;
        left: -20%;
        width: 120%;
    }
    .logo {
        left: 3.91%;
        bottom: 2%;
        top: auto;
        width: 22%;
        height: auto;
    }
    .gazetka {
        bottom: 4%;
    }
    .inner-text {
        width: 130%;
        padding-top: 187.5%;
    }
    .elements {
        top: 64%;
        width: 140%;
        left: -40%;
        padding-top: 210%;
    }
}
@media (max-aspect-ratio: 1/2) {
    .cta-container {
        top: auto;
        bottom: 2%;
        left: -20%;
        width: 120%;
    }
    .logo {
        left: 3.91%;
        bottom: 2%;
        top: auto;
        width: 22%;
        height: auto;
    }
    .gazetka {
        bottom: 4%;
    }
    .inner-text {
        width: 130%;
        padding-top: 187.5%;
    }
    .elements {
        top: 64%;
        width: 140%;
        left: -40%;
        padding-top: 210%;
    }
    .tomatoL {
        display: block
    }
    .tomato {
        display: none
    }
}