@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {

  //Adjust the Centering of Text if Header is fixed

  &.theme-4 {
    .ce_rsce_headimagelogo .mainimage--content .mainimage--content-inner {
      margin-top: rfs-value(40px);
    }
  }

  .ce_rsce_headimagelogo {
    margin-top: 0px !important;

    .swiper-slide {
      overflow: hidden;
    }

    &.pull-content {
      > .ce--inner {
        margin-bottom: rfs-value(-200px);
      }

      & + * {
        z-index: 5;
        position: relative;
      }

      .mainimage--content {
        top: 35%;
        //transform: translate(0%, -35%) !important;
      }
    }

    .with-boxed-logo {
      margin-bottom: 6rem;
    }

    .boxed-logo {
      display: inline-block;
      position: absolute;
      right: 50%;
      transform: translate(50%, 50%);
      bottom: 0;
      text-align: center;
      z-index: 5;


      @include media-breakpoint-down(sm) {
        width: 80%;
      }


      img {
        max-width: calc(300px + 4rem);
        width: 100%;
        height: auto;
        padding: 2rem;
        background-color: $body-bg;
        box-shadow: $box-shadow;
      }
    }

    .mainslider {
      &.with-diagonalCut {
        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          border-right: 100vw solid $body-bg;
          border-top: 10vw solid transparent;
          z-index: 9;
        }
      }

      &:not(.not-fullHeight):not(.no-text) {
        .image--holder {
          height: 100vh;
        }
      }


      .swiper-button-prev {
        @include media-breakpoint-up(sm) {
          left: 2.5vw;
        }

      }

      .swiper-button-next {
        @include media-breakpoint-up(sm) {
          right: 2.5vw;
        }
      }

    }

    .ce--mainimage {
      position: relative;
      //overflow: hidden;

      .image--holder {
        position: relative;
        background-size: cover !important;
        background-position: center center;
        //overflow: hidden;

        @media (orientation: landscape) {
          //height: rfs-value(450px);
        }

        &.with-video {
          overflow: hidden;
        }

        video {
          min-width: 100vw;
          min-height: 100vh;
          width: auto;
          height: auto;
          z-index: -1000;
          overflow: hidden;
          max-width: none;
          object-fit: fill;
          transform: translate(-50%, -50%);
          position: absolute;
          top: 50%;
          left: 50%;
          max-height: none;
        }

        .mainimage--content {
          height: 100%;
          width: 100vw;

          > .container {
            position: relative;
            height: 100%;
          }

          .mainimage--content-inner {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding: 10px 1rem 10px 0px;

            @include media-breakpoint-down(sm) {
              width: 100%;
              padding-left: 1rem;
              padding-right: 1rem;
            }

            &:not([class*="pos-"]) {
              transform: translate(0%, -50%);
              top: 50%;
              left: 0;
            }

            &[class*="-bottom"] {
              bottom: rfs-value(75px);
            }

            span {
              display: block;
              line-height: 1;

              &.first-line {
                font-weight: $font-weight-bold;


                &:not([class*="dynamic-fontsize"]) {
                  @include font-size(26px);
                  @include media-breakpoint-up(md) {
                    @include font-size(36px);
                  }
                }
              }

              &.second-line {
                @include font-size(18px);
                margin-top: 8px;
                font-weight: $font-weight-semibold;

                &:not([class*="dynamic-fontsize"]) {
                  @include font-size(18px);
                  @include media-breakpoint-up(md) {
                    @include font-size(22px);
                  }
                }


              }
            }

            h1 {
              font-weight: $font-weight-bold;

              &:not([class*="dynamic-fontsize"]) {
                @include font-size(36px);
              }
            }

            .infotext--text {
              margin-top: 1.25rem;
            }

            .button--wrapper {
              > .btn {
                margin-bottom: rfs-value(5px);
              }
            }
          }
        }
      }

      &.style-1 {
        .mainimage--content {
          .mainimage--content-inner {
            @include media-breakpoint-down(sm) {
              width: 75% !important;
              max-width: 75% !important;
            }

            span:not([class*="dynamic-fontsize"]) {
              &:first-of-type {
                @include font-size(70px);
              }

              &:last-of-type {
                @include font-size(60px);
              }
            }

            h1:not([class*="dynamic-fontsize"]) {
              @include font-size(70px);
            }

            h1 {
              margin-bottom: 0px;
            }

            .button--wrapper {
              margin-top: 1.75rem;
            }
          }
        }
      }

      &.style-2 {
        .mainimage--content {
          .container {
            @include media-breakpoint-down(sm) {
              padding: 0px;
            }
          }

          .mainimage--content-inner {
            position: absolute;
            z-index: 10;
            min-width: 50vw;

            @include media-breakpoint-up(md) {
              max-width: 75%;
            }


            &:before {
              content: "";
              position: absolute;
              right: 0;
              bottom: 0;
              width: 100%;
              background-color: var(--bs-white);
              height: 100%;

              @include media-breakpoint-up(sm) {
                width: 100vw;
              }
            }

            .mainimage--content-inner--wrapper {
              //padding: 10px 2rem 10px 0px;

              @include media-breakpoint-up(sm) {
                &:after {
                  content: "";
                  display: block;
                  position: absolute;
                  left: 100%;
                  top: 0;
                  clip-path: polygon(0 0, 0% 100%, 100% 0);
                  background-color: var(--bs-white);
                  width: 200px;
                  height: 100%;
                }
              }

              > * {
                position: relative;
              }

              .button--wrapper {
                margin-top: 1.5rem;
              }
            }
          }
        }
      }
    }
  }
}