.promo-banner {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    height: 1250px;
    justify-content: flex-start;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    max-height: 200px;
    max-width: 2000px;
    overflow: hidden;
    width: 300px;
}



.promo-banner .promo {
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all .6s cubic-bezier(0.39, 0.26, 0, 0.91);
    width: 0%;
    background-color: #050505;
}
.promo-banner .promo::after {
    content: "";
    display: block;
    padding-bottom: 37.04%;
}
.promo-banner .promo.current {
    height: auto;
    max-height: 1250px;
    max-width: 2000px;
    min-height: 150px;
    width: 100%;
}



.promo-banner .promo .bgntx {
    align-items: center;
    background-color: #00000046;
    display: flex;
    height: 100%;
    left: 0%;
    margin-left: -250px;
    position: absolute;
    transition: margin-left .6s cubic-bezier(0.39, 0.26, 0, 0.91), padding .6s cubic-bezier(0.39, 0.26, 0, 0.91);
    top: 0%;
    width: 2000px;
    z-index: 2;
}
.promo-banner .promo.current .bgntx {
    margin-left: 0px;
    padding: 20px;
}

.promo-banner .promo .bgntx.v {
    background-color: #00000078;
}



.promo-banner .promo .bgntx .texts {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 50px;
    transition: margin-top .8s cubic-bezier(0, 0, 0, 0.92);
    width: 230px;
}
.promo-banner .promo.current .bgntx .texts {
    margin-top: 0px;
}


.promo-banner .promo .bgntx.welcome .texts p { /* welcome banner */
    text-align: center;
}


.promo-banner .promo .bgntx .texts p.title {
    font-size: 1.15rem;
}


.promo-banner .promo .bgntx .texts p.des {
    font-size: .8rem;
    opacity: 90%;
    transition: translate .5s cubic-bezier(0.76, 0.5, 0.59, 0.97);
    transition-delay: 500ms;
    translate: 0px 5px;
}
.promo-banner .promo.current .bgntx .texts p.des {
    translate: 0px 0px;
}


.promo-banner .promo .bgntx .texts .button-outline {
    display: flex;
    margin-top: 20px;
}

.promo-banner .promo .bgntx .texts .button-outline.wh:focus-visible {
    outline: var(--focus-outline-wh);
}

.promo-banner .promo .bgntx .texts .button-outline.bl:focus-visible {
    outline: var(--focus-outline-bl);
}


.promo-banner .promo .bgntx .texts .button-outline a {
    margin: 3px;
    opacity: 0;
    transition: all .5s ease-out;
    transition-delay: .8s;
    translate: 0px 10px;
}
.promo-banner .promo.current .bgntx .texts .button-outline a {
    opacity: 1;
    translate: 0px 0px;
}


.promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
    font-size: .8rem;
    padding: 10px 40px;
}
/* white */
.promo-banner .promo .bgntx .texts .button-outline a p.pack-btn.wh {
    background-color: var(--cta-wh);
    color: var(--text-bl);
    /* outline: 2px solid var(--cta-wh); */
}
.promo-banner .promo .bgntx .texts .button-outline a:active p.pack-btn.wh {
    outline: 2px solid var(--cta-wh);
}
/* black */
.promo-banner .promo .bgntx .texts .button-outline a p.pack-btn.bl {
    background-color: var(--cta-bl);
    color: var(--text-wh);
    /* outline: 2px solid var(--cta-bl); */
}
.promo-banner .promo .bgntx .texts .button-outline a:active p.pack-btn.bl {
    outline: 2px solid var(--cta-bl);
}
/**/
.promo-banner .promo .bgntx .texts .button-outline a:hover p.pack-btn {
    background-color: var(--rfb-green);
    color: var(--text-bl);
    /* outline: 2px solid var(--rfb-green); */
}
.promo-banner .promo .bgntx .texts .button-outline a:active p.pack-btn {
    background-color: var(--rfb-blue);
    color: var(--text-bl);
    /* outline: 2px solid var(--rfb-blue); */
}


.promo-banner .promo img {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
}


.promo-banner .promo video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
}



/* @media area for banner */

@media (max-width: 2560px) and (max-height: 1000px) {
    .promo-banner {
        max-width: 1556px;
    }

}



@media (max-width: 2560px) and (max-height: 700px) {
    .promo-banner {
        max-width: 1050px;
    }
}



@media (max-width: 2560px) and (max-height: 600px) {
    .promo-banner {
        max-width: 600px;
    }
}



@media (max-width: 2560px) and (max-height: 500px) {
    .promo-banner {
        max-width: 500px;
    }
}



@media (min-width: 300px) and (min-height: 400px) {
    .promo-banner {
        max-height: 250px;
        width: 100%;
    }
}



@media (min-width: 400px) and (min-height: 550px) {
    .promo-banner {
        max-height: 300px;
    }
}



@media (min-width: 500px) and (min-height: 600px) {
    .promo-banner {
        max-height: 400px;
    }
}



@media (min-width: 700px) and (min-height: 660px) {
    .promo-banner {
        max-height: 500px;
    }
}



@media (min-width: 800px) and (min-height: 300px) {
    .promo-banner {
        max-height: 150px;
    }
}



@media (min-width: 800px) and (min-height: 400px) {
    .promo-banner {
        max-height: 200px;
    }
}



@media (min-width: 800px) and (min-height: 500px) {
    .promo-banner {
        max-height: 300px;
    }
}



@media (min-width: 800px) and (min-height: 600px) {
    .promo-banner {
        max-height: 400px;
    }
}



@media (min-width: 800px) and (min-height: 700px) {
    .promo-banner {
        max-height: 500px;
    }
}



@media (min-width: 900px) and (min-height: 800px) {
    .promo-banner {
        max-height: 600px;
    }
}



@media (min-width: 1000px) and (min-height: 900px) {
    .promo-banner {
        max-height: 700px;
    }
}



@media (min-width: 1000px) and (min-height: 1000px) {
    .promo-banner {
        max-height: 800px;
        max-width: 2000px;
    }
}



@media (min-width: 1760px) and (min-height: 1400px) {
    .promo-banner {
        max-height: 1200px;
    }
}



/* @media area for banner texts */

@media (min-height: 400px) and (min-width: 360px) {
    .promo-banner .promo .bgntx .texts {
        width: 300px;
    }
}



@media (min-height: 400px) and (min-width: 550px) {
    .promo-banner .promo .bgntx .texts {
        margin-top: 100px;
        width: 400px;
    }



    .promo-banner .promo .bgntx .texts p.title {
        font-size: 1.5rem;
    }


    .promo-banner .promo .bgntx .texts p.des {
        font-size: 1rem;
    }


    .promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
        font-size: 1rem;
    }
}



@media (min-height: 500px) and (min-width: 457px) {
    .promo-banner .promo .bgntx .texts p.title {
        font-size: 1.75rem;
    }
}



@media (min-height: 601px) and (min-width: 610px) {
    .promo-banner .promo.current .bgntx {
        padding: 50px;
    }



    .promo-banner .promo .bgntx .texts {
        margin-top: 150px;
        width: 500px;
    }

    .promo-banner .promo .bgntx .texts p.title {
        font-size: 2rem;
    }


    .promo-banner .promo .bgntx .texts p.des {
        font-size: 1.25rem;
        translate: 0px 7px;
    }


    .promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
        font-size: 1.25rem;
    }
}



@media (min-height: 601px) and (min-width: 750px) {
    .promo-banner .promo.current .bgntx {
        padding: 70px;
    }



    .promo-banner .promo .bgntx .texts {
        width: 600px;
    }

    .promo-banner .promo .bgntx .texts p.title {
        font-size: 2.5rem;
    }
}



@media (min-height: 701px) and (min-width: 900px) {
    .promo-banner .promo.current .bgntx {
        padding: 90px;
    }



    .promo-banner .promo .bgntx .texts {
        margin-top: 200px;
        width: 700px;
    }

    .promo-banner .promo .bgntx .texts p.title {
        font-size: 3rem;
    }


    .promo-banner .promo .bgntx .texts .button-outline {
        margin-top: 40px;
    }


    .promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
        font-size: 1.25rem;
    }
}



@media (min-height: 800px) and (min-width: 1050px) {
    .promo-banner .promo .bgntx .texts {
        width: 800px;
    }
}



@media (min-height: 800px) and (min-width: 1400px) {
    .promo-banner .promo.current .bgntx {
        padding: 120px;
    }



    .promo-banner .promo .bgntx .texts {
        margin-top: 300px;
        width: 900px;
    }

    .promo-banner .promo .bgntx .texts p.title {
        font-size: 4rem;
    }


    .promo-banner .promo .bgntx .texts p.des {
        font-size: 1.5rem;
        translate: 0px 10px;
    }


    .promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
        font-size: 1.5rem;
    }
}



@media (min-height: 1400px) and (min-width: 1400px) {
    .promo-banner .promo.current .bgntx {
        padding: 150px;
    }



    .promo-banner .promo .bgntx .texts p.title {
        font-size: 5rem;
    }


    .promo-banner .promo .bgntx .texts p.des {
        font-size: 2rem;
        translate: 0px 15px;
    }


    .promo-banner .promo .bgntx .texts .button-outline {
        margin-top: 50px;
    }


    .promo-banner .promo .bgntx .texts .button-outline a p.pack-btn {
        font-size: 2rem;
    }
}