#oct-promo{
    --red: #bf2432;
    font-size: 16px;
}
#oct-hero{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-image: url(../../../images/25/oct/hero/back.jpg);
	background-image: -webkit-image-set(url("../../../images/25/oct/hero/back.jpg") 1x, url("../../../images/25/oct/hero/back@2x.jpg") 2x);
}
#oct-hero .container{
    width: 1391px !important;
}
#oct-hero svg{
    display: block;
}
#oct-hero .oh-left{
    padding-top: 100.5px;
    padding-bottom: 83.5px;
}
#oct-hero .container:after,
#oct-hero .oh-left:before,
#oct-hero .oh-left:after{
    content: '' !important;
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#oct-hero .container:after{
    width: 1126px;
    max-width: 82.7332843497428%;
    height: auto;
    aspect-ratio: 1 / 0.25133214920071;
    right: -21.0139603232917%;
    top: 0;
	background-image: url(../../../images/25/oct/hero/graphic-right.png);
	background-image: -webkit-image-set(url("../../../images/25/oct/hero/graphic-right.png") 1x, url("../../../images/25/oct/hero/graphic-right@2x.png") 2x);
}
#oct-hero .oh-left:before{
    width: 312px;
    max-width: 76.0975609756098%;
    aspect-ratio: 1 / 1;
    height: auto;
    left: -76.0975609756098%;
    z-index: 1;
    top: 0;
	background-image: url(../../../images/25/oct/hero/graphic-left.png);
	background-image: -webkit-image-set(url("../../../images/25/oct/hero/graphic-left.png") 1x, url("../../../images/25/oct/hero/graphic-left@2x.png") 2x);
}
#oct-hero .oh-left:after{
    width: 193.6%;
    height: auto;
    aspect-ratio: 1 / 0.866391184573003;
    margin-left: 23%;
    margin-bottom: 2.5%;
    z-index: -1;
	background-image: url(../../../images/25/oct/hero/main-back.png);
	background-image: -webkit-image-set(url("../../../images/25/oct/hero/main-back.png") 1x, url("../../../images/25/oct/hero/main-back@2x.png") 2x);
}
#oct-hero .oh-right{
    margin-left: 16.348273328435%;
    max-width: 51.2123438648053%;
    margin-top: 5%;
}
#oct-hero .button{
    width: 192px;
    height: 41px;
    border-radius: 21px;
    margin-top: 25px;
    font-size: 1.125em;
    padding: 0;
}
#oct-hero .gif-text{
    margin-bottom: 22px;
}
#oct-hero .desktop-anim{
    width: auto;
    aspect-ratio: 1 / 0.326041666666667;
}
#oct-hero .mobile-anim{
    width: auto;
    aspect-ratio: 1 / 1.770666666666667;
}
.ua-windows_nt #oct-hero .button{
}
@media screen and (min-width: 1240px) {
    #oct-promo {
        width: 100vw;
        max-width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}
@media screen and (max-width: 1199px) {
    #oct-hero .container #desktop{
        z-index: 0;
    }
}
@media screen and (max-width: 991px) {
    #oct-hero .oh-left {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
@media screen and (max-width: 767px) {
    #oct-hero .container{
        justify-content: center;
        flex-direction: column;
    }
    #oct-hero .container:after{
        display: none;
    }
    #oct-hero .oh-left{
        padding-top: 34.5px;
        padding-bottom: 67px;
    }
    #oct-hero .oh-left:after{
        width: 145%;
        aspect-ratio: 1 / 1;
        margin-left: 0;
        margin-bottom: 10%;
        background-image: url(../../../images/25/oct/hero/main-back-m.png);
        background-image: -webkit-image-set(url("../../../images/25/oct/hero/main-back-m.png") 1x, url("../../../images/25/oct/hero/main-back-m@2x.png") 2x);
    }
    #oct-hero .gif-text{
        margin-bottom: 18px;
    }
    #oct-hero .button{
    }
    #oct-hero .oh-right {
        margin: 0 auto;
        max-width: 100%;
        padding-bottom: 126px;
    }
}
@media screen and (max-width: 567px) {
    #oct-hero{
        background-image: url(../../../images/25/oct/hero/back-m.jpg);
        background-image: -webkit-image-set(url("../../../images/25/oct/hero/back-m.jpg") 1x, url("../../../images/25/oct/hero/back-m@2x.jpg") 2x);
    }
    #oct-hero .oh-left:before{
        width: 442px;
        max-width: inherit;
        aspect-ratio: 1 / 0.841628959276018;
        left: -134px;
        pointer-events: none;
        background-image: url(../../../images/25/oct/hero/graphics-m.png);
        background-image: -webkit-image-set(url("../../../images/25/oct/hero/graphics-m.png") 1x, url("../../../images/25/oct/hero/graphics-m@2x.png") 2x);
    }
    #oct-hero .oh-left:after{
        width: 351px;
        margin-bottom: 8%;
    }
    #oct-hero .button{
        width: 184px;
        height: 39px;
        border-radius: 20px;
        margin-top: 18px;
        font-size: 1.25em;
        position: relative;
        z-index: 2;
    }
}