/* ------------------------------ */
/* ----------- Banner ----------- */
/* ------------------------------ */

.section > .section__banner {
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.section > .section__banner, .section > .section__banner + div[class^="section__"] {
    padding-top: var(--spacing-10);
}

.banner {
    position: relative;
}

.banner__media {
    background-color: var(--color-grey);
}

.section__banner:not(.section__banner--content) .banner__media {
    position: relative;
    width: 100%;
    height: 100%;
}

.section__banner--content .banner__media, .section__banner--content .banner__media .video_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section__banner--content .banner__media::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), color-stop(40%, rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 0.62)));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.62) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.62) 100%);
}

.banner__media__container {
    position: relative;
    z-index: 2;
}

.banner__inside {
    width: 100%;
}

.banner__content {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    z-index: 4;
    width: 100%;
    height: 100%;
    padding: var(--spacing-7) 0;
}

.banner__content {
    color: var(--color-white);
}

.banner__content h2 {
    margin-bottom: 0;
}

.section__banner--button .banner__content__container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.banner__content__container .button {
    margin-top: 0 !important;
}

.banner__content__container .button a {
    background-color: transparent;
}

.no-touchevents .banner__content__container .button a:hover {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-white);
}


/* Video loader */
.video_loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .video_loader__container {
    overflow: hidden;
    width: 10vw;
    height: 3px;
    background-color: var(--color-white);
  }
  
  body.color-dark .video_loader__container {
    background-color: var(--color-black);
  }
  
  .video_loader__progress {
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    -webkit-animation: video-load 2s linear 0s infinite forwards;
            animation: video-load 2s linear 0s infinite forwards;
  }
  
  body.color-dark .video_loader__progress {
    background-color: var(--color-white);
  }
  
  @-webkit-keyframes video-load {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  
    50% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
  
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }
  
  @keyframes video-load {
    0% {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
  
    50% {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
    }
  
    100% {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
  }




/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 768px) {

    .banner__content__title + .banner__content__container {
        margin-top: var(--spacing-3);
    }

    .banner__content__container > span {
        font-size: var(--font-size-4);
    }

}


@media all and (min-width: 992px) {

    .banner:not(.banner--big) {
        height: 65svh;
        max-height: 650px;
        min-height: 500px;
    }

    .banner.banner--big {
        height: 85svh;
        min-height: 600px;
    }

    .banner__content__container > span {
        margin-right: var(--spacing-6);
    }

}


@media all and (min-width: 1400px) {

    .section:last-of-type > div:last-child.section__banner {
        margin-bottom: calc(var(--spacing-10) * -1);
    }

}


@media all and (max-width: 1399.98px) and (min-width:576px) {

    .section:last-of-type > div:last-child.section__banner {
        margin-bottom: calc(var(--spacing-11) * -1);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .banner:not(.banner--big) {
        height: 60svh;
        max-height: 550px;
        min-height: 400px;
    }

    .banner.banner--big {
        height: 80svh;
        min-height: 500px;
    }

}


@media all and (max-width: 991.98px) {

    .banner__content__container > span {
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-4);
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .banner {
        max-height: 500px;
    }

    .banner:not(.banner--big) {
        height: 55svh;
        max-height: 500px;
        min-height: 350px;
    }

    .banner.banner--big {
        height: 75svh;
        min-height: 450px;
    }

    .banner__content__container > span {
        font-size: calc(var(--font-size-4) - 2px);
    }

}


@media all and (max-width: 575.98px) {

    .section:last-of-type > div:last-child.section__banner {
        margin-bottom: calc(-1 * (var(--spacing-11) + 10px));
    }

    .banner__content__container > span {
        font-size: calc(var(--font-size-4) - 3px);
        margin-bottom: var(--spacing-5);
    }

}


@media all and (max-width: 575.98px) and (min-width: 360px) {

    .banner {
        max-height: 450px;
    }

    .banner:not(.banner--big) {
        height: 50svh;
        max-height: 450px;
        min-height: 300px;
    }

    .banner.banner--big {
        height: 70svh;
        min-height: 400px;
    }

}


@media all and (max-width: 359.98px) {

    .banner {
        max-height: 400px;
    }

    .banner:not(.banner--big) {
        height: 45svh;
        max-height: 400px;
        min-height: 280px;
    }

    .banner.banner--big {
        height: 65svh;
        min-height: 350px;
    }

}