<!-- DEFAULT / AU CODE -->
<!-- ************************************ -->
<!--   START 1widthHEADERBANNERBanner CSS    -->
<!--   Identifier: HEADERBANNER              -->
<!-- ************************************ -->
<style type="text/css">
    .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer-FULL1widthHEADERBANNERcontainer-1 {
        /*margin-top: 15px;*/
        overflow: hidden;
        width: 100%;
        /*padding-top: 15px;*/
    }

    .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
        position: relative;
        /*border: 1px solid white;*/
    }

    .CBpage-INNER1widthHEADERBANNERcontainer {
        float: left;
        left: 0px;
        width: calc(100% - 0px);
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
        display: inline-block;
        /*border: 1px dotted black;*/
        /*left:11px; width: calc(50% - 22px); margin-left: 5px; margin-right: 5px;*/
    }

    /* .INNER1widthHEADERBANNERcontainer-CTAbutton-1, .INNER1widthHEADERBANNERcontainer-CTAbutton-2, .INNER1widthHEADERBANNERcontainer-CTAbutton-3 { border: 2px solid #000; border-radius: 12px ; } */
    .slide2-button-color {
        color: white !important;
        background-color: #F47322 !important;
    }

    .slide2-button-color:hover {
        color: black !important;
        background-color: rgba(255, 255, 255, 0.7) !important;
    }




    .INNER1widthHEADERBANNERcontainer-CTAbutton-1EXTRA20 {
        position: absolute;
        top: calc(78%);
        left: calc(50% - 25%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #000;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-2EXTRA20 {
        position: absolute;
        top: calc(78%);
        left: calc(50% - 10%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #000;
        top: 76.5%;
        border-radius: 0px !important;


    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-3EXTRA20 {
        position: absolute;
        top: calc(78%);
        left: calc(50% + 10%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #000;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-4EXTRA20 {
        position: absolute;
        top: calc(78%);
        left: calc(50% + 25%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #000;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-1EXTRA20:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #0000002f;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-2EXTRA20:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #0000002f;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-3EXTRA20:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #0000002f;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-4EXTRA20:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #0000002f;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTA-header-font {
        font-size: 4vw;
        text-align: center;
        letter-spacing: 1.5px;
        color: white;
        font-weight: 600;
        /*line-height: normal;*/
    }

    .INNER1widthHEADERBANNERcontainer-CTA-cover {
        opacity: 0;
        background-color: black;
        position: absolute !important;
        width: 100%;
        height: 99.9%;
        top: 0px;
        left: 0px;
        transition: 0.4s;
    }

    .INNER1widthHEADERBANNERcontainer-CTA-cover:hover {
        opacity: 0;
        /*opacity: 0.1; HOVER FOR WHOLE IMAGE*/
    }

    .button-border {
        border: 1px solid black;
        /*border-radius: 3px;*/
    }

    .button-border-1 {
        border: 1px solid white;
        /*border-radius: 3px;*/
    }


    @media only screen and (max-width: 1024px) {
        .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer-FULL1widthHEADERBANNERcontainer-1 {
            margin-top: 0px;
        }

        .INNER1widthHEADERBANNERcontainer-CTA-cover:hover {
            opacity: 0;
        }

        .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer {
            width: 100%;
        }

        .CBpage-INNER1widthHEADERBANNERcontainer {
            left: 0px;
            width: calc(100% - 0px);
            /*margin-bottom: 10px;*/
            /*margin-left: 0px; margin-right: 0px;*/
        }

        .INNER1widthHEADERBANNERcontainer-CTA-header-font {
            font-size: 18px;
            display: none;
        }

        .slide2-button-color:hover {
            color: white !important;
            background-color: #F47322 !important;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1EXTRA20 {
            top: calc(83.5% - 20px);
            left: calc(50% - 21.5%);
            width: 30%;
            min-width: 140px;
            padding: 6px 3px;
            /* FIX */
            top: calc(83.5% - 55px);
            top: calc(83.5% - 27px);
            left: calc(50% - 21.5%);
            top: calc(85% - 47px);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1EXTRA20:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-2EXTRA20 {
            top: calc(83.5% - 20px);
            left: calc(50% + 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(83.5% - 55px);
            top: calc(83.5% - 27px);
            left: calc(50% + 21.5%);
            top: calc(85% - 47px);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-2EXTRA20:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-3EXTRA20 {
            top: calc(84.5% + 20px);
            left: calc(50% - 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(84.5% - 15px);
            top: calc(84.5% + 7px);
            top: calc(84.5% + 17px);
            top: calc(85% + -8px);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-3EXTRA20:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: white;
            background-color: #000;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-4EXTRA20 {
            top: calc(84.5% + 20px);
            left: calc(50% + 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(84.5% - 15px);
            top: calc(84.5% + 7px);
            top: calc(84.5% + 17px);
            top: calc(85% + -8px);
            color: white;
            background-color: #000;

        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-4EXTRA20:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: white;
            background-color: #000;
        }
    }

    video.thisVid {
        width: 100%;
        height: auto;
    }

    .CBwebchannelDesktop {
        display: inline-block;
    }

    .CBwebchannelMobile {
        display: none;
    }

    @media only screen and (max-width: 1024px) {
        .CBwebchannelDesktop {
            display: none;
        }

        .CBwebchannelMobile {
            display: block;
        }
    }
    @media screen and (max-width: 450px) {
        .WELCOMEpopup-btn {
            left: 257px;
            bottom: -17px;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
        }
    }
</style>
<!-- **************** -->
<!--  END SIDENAV CSS -->
<!-- **************** -->



<!--START SLICK CAROUSEL CSS-->
<link rel="stylesheet" type="text/css"
    href="https://www.citybeach.com/on/demandware.static/-/Library-Sites-CityBeachSharedLibrary/default/js/SlickBannerRotator/slick/slick.css" />
<link rel="stylesheet" type="text/css"
    href="https://www.citybeach.com/on/demandware.static/-/Library-Sites-CityBeachSharedLibrary/default/js/SlickBannerRotator/slick/slick-theme.css" />
<style>
    .cbHeaderBannerRotatorContainer {
        /*margin-top: 15px;*/
        overflow: hidden;
        width: 100%;
        /*padding-top: 15px;*/
        display: block;
        /*padding-bottom: 10px;*/
    }

    /* PADDING BETWEEN SLIDE */
    /* the slides */
    .cbHeaderBannerRotatorContainer .slick-slide {
        margin: 0 20px !important;
    }

    /* the parent */
    .cbHeaderBannerRotatorContainer .slick-list {
        margin: 0 -20px !important;
        /*width: calc(100% + 75px);*/
        /*width: 100%;*/
    }

    /* PADDING BETWEEN SLIDE */
    .cbHeaderBannerRotatorContainer .slider {
        width: 100%;
        margin: 0px auto;
    }

    .cbHeaderBannerRotatorContainer .slick-slide img {
        width: 100%;
    }

    .cbHeaderBannerRotatorContainer .slick-prev:before,
    .cbHeaderBannerRotatorContainer .slick-next:before {
        color: lightgray;
        font-weight: bolder;
    }

    .cbHeaderBannerRotatorContainer .slick-slide {
        transition: all ease-in-out 0.1s;
        opacity: 1;
    }

    .cbHeaderBannerRotatorContainer .slick-active {
        opacity: 1;
    }

    .cbHeaderBannerRotatorContainer .slick-current {
        opacity: 1;
    }

    .cbHeaderBannerRotatorContainer .slick-next:before {
        /*content: '→';*/
        content: "〉";
        font-size: 25px;
    }

    .cbHeaderBannerRotatorContainer .slick-prev:before {
        /*content: '→';*/
        content: "〈";
        font-size: 25px;
    }

    .cbHeaderBannerRotatorContainer .slick-prev,
    .cbHeaderBannerRotatorContainer .slick-next {
        z-index: 2;
        opacity: 0.0;
    }

    .cbHeaderBannerRotatorContainer .slick-prev {
        left: 30px;
    }

    .cbHeaderBannerRotatorContainer .slick-next {
        right: 30px;
    }

    .cbHeaderBannerRotatorContainer .slick-dots {
        bottom: 5px;
    }

    .cbHeaderBannerRotatorContainer .slick-dots li button:before,
    .cbHeaderBannerRotatorContainer .slick-dots li.slick-active button:before {
        font-size: 8px;
        color: black;
        content: unset;
    }

    .cbHeaderBannerRotatorContainer .slick-dots li {
        width: unset;
    }

    .cbHeaderBannerRotatorContainer .slick-dots li button {
        background-color: lightgrey;
        /*border: 0.5px solid #000;*/
        /*border-radius: 5px;*/
        /*box-shadow: inset 1px 1px 1px #888;*/
        display: inline-block;
        height: 5px;
        width: 40px;
        padding: 0px;
    }

    .cbHeaderBannerRotatorContainer .slick-dots li.slick-active button {
        background-color: grey;
    }

    .cbHeaderBannerRotatorContainer ul.slick-dots {
        margin-bottom: 5px;
    }

    /* .cbHeaderBannerRotatorContainer .slick-dots li.slick-active button:before { font-size: 5px; color: black; } */
    .cbHeaderBannerRotatorContainer .slick-dotted.slick-slider {
        margin-bottom: 5px !important;
    }

    .cbHeaderBannerRotatorContainer .slick-track {
        display: flex !important;
        background-color: white;
    }

    .cbHeaderBannerRotatorContainer .slick-slide {
        height: auto;
    }

    .cbHeaderBannerRotatorContainer .CBpage-INNER1widthTOPCATEGORIEScontainer {
        width: calc(100%) !important;
        margin-left: 0px;
    }

    @media only screen and (max-width: 1024px) {
        .cbHeaderBannerRotatorContainer .CBpage-INNER1widthTOPCATEGORIEScontainer {
            /*width: unset !important;*/
        }
    }
</style>
<link rel="stylesheet"
    href="https://staging.citybeach.com/on/demandware.static/-/Library-Sites-CityBeachSharedLibrary/default/vb0d6f7200b99056227e785fd8bb61ad08c77798c/css/promo%2Dhero%2Dbanner%2Dbuttons.css?version=1,716,878,096,772">
<style type="text/css">
    .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer-FULL1widthHEADERBANNERcontainer-1 {
        overflow: hidden;
        width: 100%;
    }

    .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
        position: relative;
    }

    .CBpage-INNER1widthHEADERBANNERcontainer {
        float: left;
        left: 0px;
        width: calc(100% - 0px);
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
        display: inline-block;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-1BOGO {
        position: absolute;
        top: calc(78%);
        left: calc(100% / 4*1.5);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 280px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #000;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-2BOGO {
        position: absolute;
        top: calc(78%);
        left: calc(50% - 10%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #ed1b24;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-3BOGO {
        position: absolute;
        top: calc(78%);
        left: calc(100% / 4* 2.5);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 280px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #ed1b24;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-4BOGO {
        position: absolute;
        top: calc(78%);
        left: calc(50% + 25%);
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: bold;
        width: 19.8%;
        max-width: 220px;
        margin: auto;
        padding: 9px;
        display: table;
        letter-spacing: 0.5px;
        transition: 0.4s;
        font-size: max(14px, min(18px, 0.99vw));
        color: var(--buttonFontHeader);
        background-color: var(--buttonBackgroundHeader);
        color: white;
        background-color: #ed1b24;
        top: 76.5%;
        border-radius: 0px !important;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-1BOGO:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #ed1b2654;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-2BOGO:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #ed1b2654;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-3BOGO:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #000000b3;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTAbutton-4BOGO:hover {
        color: var(--buttonFontHeaderHover);
        background-color: var(--buttonBackgroundHeaderHover);
        box-shadow: unset;
        background-color: #ed1b2654;
        color: white;
    }

    .INNER1widthHEADERBANNERcontainer-CTA-header-font {
        font-size: 4vw;
        text-align: center;
        letter-spacing: 1.5px;
        color: white;
        font-weight: 600;
    }

    .INNER1widthHEADERBANNERcontainer-CTA-cover {
        opacity: 0;
        background-color: black;
        position: absolute !important;
        width: 100%;
        height: 99.9%;
        top: 0px;
        left: 0px;
        transition: 0.4s;
    }

    .INNER1widthHEADERBANNERcontainer-CTA-cover:hover {
        opacity: 0;
    }

    .button-border {
        border: 1px solid var(--buttonHeaderBorder);
        border: 3px solid white;
    }

    @media only screen and (max-width: 1500px) and (min-width: 1024px) {

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1BOGO,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-2BOGO,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-3BOGO,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-4BOGO {
            width: 15%;
        }
    }

    @media only screen and (max-width: 1500px) and (min-width: 1024px) {

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1EXTRA20,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-2EXTRA20,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-3EXTRA20,
        .INNER1widthHEADERBANNERcontainer-CTAbutton-4EXTRA20 {
            width: 15%;
        }
    }

    @media only screen and (max-width: 1024px) {
        .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer-FULL1widthHEADERBANNERcontainer-1 {
            margin-top: 0px;
        }

        .INNER1widthHEADERBANNERcontainer-CTA-cover:hover {
            opacity: 0;
        }

        .CBpage-INNER1widthHEADERBANNERcontainer-OUTER1widthHEADERBANNERcontainer {
            width: 100%;
        }

        .button-border {
            border: none;
        }

        .CBpage-INNER1widthHEADERBANNERcontainer {
            left: 0px;
            width: calc(100% - 0px);
        }

        .INNER1widthHEADERBANNERcontainer-CTA-header-font {
            font-size: 18px;
            display: none;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1BOGO {
            top: calc(83.5% - 20px);
            left: calc(50% - 21.5%);
            width: 30%;
            min-width: 140px;
            padding: 6px 3px;
            /* FIX */
            top: calc(83.5% - 55px);
            top: calc(83.5% - 27px);
            left: calc(50% - 21.5%);
            top: calc(85% - 30px) !important;
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-1BOGO:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-2BOGO {
            top: calc(83.5% - 20px);
            left: calc(50% + 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(83.5% - 55px);
            top: calc(83.5% - 27px);
            left: calc(50% + 21.5%);
            top: calc(85% - 47px) !important;
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-2BOGO:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-3BOGO {
            top: calc(84.5% + 20px);
            left: calc(50% + 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(84.5% - 15px);
            top: calc(84.5% + 7px);
            top: calc(84.5% + 17px);
            top: calc(85% + -30px);
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-3BOGO:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: #000;
            background-color: #fff;
        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-4BOGO {
            top: calc(84.5% + 20px);
            left: calc(50% + 21.5%);
            width: 30%;
            min-width: 140px;
            height: 30px;
            padding: 6px 3px;
            /* FIX */
            top: calc(84.5% - 15px);
            top: calc(84.5% + 7px);
            top: calc(84.5% + 17px);
            top: calc(85% + -8px);
            color: #000;
            background-color: #fff;

        }

        .INNER1widthHEADERBANNERcontainer-CTAbutton-4BOGO:hover {
            color: var(--buttonFontHeader);
            background-color: var(--buttonBackgroundHeader);
            color: #000;
            background-color: #fff;
        }
    }

    .termsandconditions-block {
        color: #000;
        position: absolute;
        text-align: center;
        bottom: 35px;
        transform: translate(-50%, -50%);
        width: 100%;
        left: 50%;
        max-width: 100%;
        font-size: 10px;
    }


    @media only screen and (max-width: 1500px) and (min-width: 1024px) {
        .termsandconditions-block {
            line-height: 0px;
            bottom: 35px;
        }
    }

    @media only screen and (max-width: 1024px) {
        .termsandconditions-block {
            max-width: 90%;
            bottom: 29px;
            line-height: 10px;
            font-size: 7px;
            text-align: center;
            left: 50%;
        }
    }
</style>