/**********************/
/*-----> BANNER <-----*/
/**********************/

.site-banner {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: var(--padding-container);
    padding-right: var(--padding-container);
    background-color: var(--black);
    overflow: hidden;
}

.site-banner .background_pattern {
    content: '';
    display: inline-block;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 6vw;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
       -moz-transform: translateX(-50%) rotate(45deg);
        -ms-transform: translateX(-50%) rotate(45deg);
         -o-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotate(45deg);
    opacity: .5;
    pointer-events: none;
}

.site-banner .media-banner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.site-banner .content-banner {
    position: relative;
    z-index: 1;
    max-width: 660px;
}

.site-banner .content-banner p {
    max-width: 490px;
}

.site-banner .content-banner h1 {
    font-size: var(--text-4xl);
    line-height: 1.15;
    margin-bottom: 15px;
}

.site-banner .content-banner.content_white {
    color: var(--white);
}

.site-banner .content-banner.content_white .whbutton-fill--black .cta-whbutton {
    background-color: var(--white);
    color: var(--black);
}

.site-banner .content-banner.content_white .cta-whbutton .icon-cta {
    -webkit-filter: brightness(0);
            filter: brightness(0);
}

.site-banner .content-banner.content_white .btn-banner-popup .cta-whbutton .icon-cta {
    -webkit-filter: none;
    filter: none;
}

.site-banner.banner-size-medium {
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* custom */
.site-banner.pattern-not-rotate .background_pattern {
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%)
}

.site-banner.pattern-not-rotate .background_pattern img {
    -o-object-fit: contain;
       object-fit: contain;
    max-height: 420px;
}

#btn-banner-popup.whbutton-color--black-block .cta-whbutton {
    padding: var(--padding-button);
    background-color: var(--black);
}

@media all and (min-width: 601px) {
    .site-banner .media-banner .thumbnail-banner.image-mobile {
        display: none;
    }
}

@media all and (min-width: 1300px) {
    .site-banner.banner-size-large {
        min-height: 100vh;
    }
    
    .site-banner.banner-size-medium {
        min-height: 600px;
    }
    
    .site-banner.banner-size-large {
        padding-top: 8.854166666666668vw;
        padding-bottom: 300px;
    }

    .site-banner.banner-size-medium {
        padding-top: 5.208333333333334vw;
        padding-bottom: 5.208333333333334vw;
    }

    .content-banner .button-group-banner {
        margin-top: 4.166666666666666vw;
    }
}

@media all and (max-width: 1299px) {
    .site-banner.banner-size-large,
    .site-banner.banner-size-medium {
        min-height: 450px;
    }
    
    .site-banner {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .site-banner.banner-size-large {
        padding-bottom: 250px;
    }

    .content-banner .button-group-banner {
        margin-top: 16px;
    }
}



@media all and (min-width: 601px) and (max-width: 1299px) {
    .site-banner .content-banner {
        max-width: 50%;
    }
}

@media all and (max-width: 600px) {
    .content-banner .button-group-banner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
           -moz-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    
    .content-banner .button-group-banner .btn-banner-primary {
        margin-bottom: 16px;
    }

    .site-banner .media-banner .thumbnail-banner:not(.image-mobile) {
        display: none;
    }

    .site-banner.banner-mobile-old {
        background-color: var(--white);
        padding-top: 394px;
        padding-bottom: 48px;
    }

    .site-banner.banner-mobile-old .content-banner h1,
    .site-banner.banner-mobile-old .content-banner h2 {
        width: 50vw;
    }

    .site-banner.banner-mobile-old .media-banner {
        max-width: 70vw;
        max-height: 350px;
        margin-left: auto;
        margin-top: 71px;
    } 

    .site-banner.banner-mobile-old .btn-banner-secondary .label-cta {
        color: var(--black);
    }
}