@if not-imported("import_once_func") { @import "inc/import_once_func"; }
//@import "inc/normalize.css"; // Normalize browser defaults

@if not-imported("framework") { @import "inc/framework"; } // Load framework

/* ------ COMMON CLASSES ------ */
@if not-imported("common") { @import "inc/common"; }
/* ------ BASE FONT STYLING ------ */
@if not-imported("font") { @import "inc/font"; }
/* ------ BASE FORM STYLING ------ */
@if not-imported("form") { @import "inc/form"; }
/* ------ CUSTOM ELEMENTS ------ */
@if not-imported("custom-elements") { @import "inc/custom-elements"; }

html {
  height: 100%;
}

#logo {
  position: absolute;
  max-width: 35%;
  left: 35px;
  top: 25px;
  width: 215px;

  svg {
    width: 100%;
    vertical-align: middle;
  }

  @include for-mobile {
    max-width: 20%;
    left: 25px;
    top: 15px;
  }
}

.background-wrapper {
  display: flex;
  align-items: center;
  height: 100%;

  .background-wrapper-helper,
  .background-wrapper-inner {
    width: 100%;
  }

  .background-wrapper-inner {
    width: 100%;
    text-align: center;
    padding: 100px 0;
    /*flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;*/
  }
}

.teaser,
.form {
  max-width: 100%;
  margin: 0 auto;

  &.form {
    //background: rgba(#fff,0.1);
    padding: 40px 0 20px;
    text-align: right;
  }

  @include for-max-size(1400px) {
    width: 66%;
  }

  @include for-mobile {
    width: auto;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  .more,
  .goto {
    margin-top: 3em;
    font-size: $font-size-default;
    padding-bottom: 1.5em;
    a {
      @include button($color: $color-text-invert, $border-color: $color-text-invert, $background-color: transparent, $background-color-hover: transparent);
      letter-spacing: 0.1em;
      font-weight: 400;
      height: 30px;
      line-height: 20px;
      padding: 3px 10px;
      overflow: hidden;
      z-index: 0;
      text-transform: none;
    }
  }
}
.slideMeta {
  .number {
    position: absolute;
    font-family: $font-family-alternate;
    font-size: 535px;
    left: 0;
    top: 50%;
    @include transform(translate(-33%, -50%));
    opacity: .1;

    @include for-max-size(1200px) {
      font-size: 42vw;
    }
  }

  .display {
    position: absolute;
    font-family: $font-family-handwriting;
    font-size: 54px;
    left: 0;
    bottom: 50%;
    @include transform(translateY(35vh));
    opacity: .4;

    @include for-max-size(1200px) {
      font-size: 5vw;
    }

    @include for-mobile {
      font-size: 30px;
    }
  }
}

.content-modal,
.content-modal-transparent {
  color: $color-text-invert;
  font-family: $font-family;
  font-size: font-size(18px);
  font-weight: 300;
  line-height: 1.3;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.25);
  @include box-sizing(border-box);
  @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);

  body > & {
    z-index: 1000;
  }

  h1,h2,h3,h4,h5,h6 {
    color: $color-headline;
    line-height: 1;
  }

  &.-show {
    opacity: 1;
    visibility: visible;
    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));

    .full-content {
      @include transform(translateX(0));
      @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
    }
  }

  .image_container {
    &.float_above {
      margin: 0 0 2rem 0;
    }
  }

  .full-content {
    @include box-sizing(border-box);
    @include transform(translateX(100%));
    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
    position: absolute;
    max-width: 100vw;

    :not(.content-modal-transparent)& {
      top: 0;
      right: 0;
      bottom: 0;
      width: 650px;
      text-align: center;
      background-color: #000;
      padding: 50px 45px 50px 60px;
      overflow: hidden;
    }

    .content-modal-transparent& {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      width: 1200px;
      max-height: 100vh;
      //max-height: -webkit-fill-available;
      max-height: calc(100vh - 80px);
      background-color: rgba(#000,0.8);
      @include box-shadow(0 0 50px 10px #000);
      padding: 80px 40px 60px;
      overflow: hidden;
      @include transform(translate(-50%,-50%));
    }

    .scrollcontent {
      :not(.content-modal-transparent)& {
        position: absolute;
        top: 60px;
        right: 60px;
        bottom: 60px;
        left: 60px;
        padding: 10px 15px 10px 0;
        max-height: calc(100vh - 100px);
      }
      @include box-sizing(border-box);
      max-height: 100vh;
      max-height: calc(100vh - 140px);
      overflow-y: auto;
    }

    .close-modal {
      position: absolute;
      top: 15px;
      left: 15px;
      width: 30px;
      height: 30px;
      background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
      //border: 1px $color-text solid;
      cursor: pointer;

      &:hover {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BA0C2F' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
      }

      .content-modal-transparent& {
        left: 50%;
        @include transform(translateX(-50%));
      }
    }
  }

  .ce_hyperlink {
    font-size: font-size(14px);
    font-family: $font-family;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;

    a {
      display: inline-block;
      color: $color-text;
      padding: 10px 30px 10px 20px;
      position: relative;
      @include transition(all 0.25s ease);
      border: 1px $color-link solid;
      background-color: #000;

      &:before {
        position: absolute;
        right: 0.5em;
        top: 50%;
        margin-top: -0.5em;
        font-size: 1.25em;
        width: 1em;
        height: 1em;
        content: '';
        background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
      }

      &:hover {
        color: $color-link;
      }
    }

    &.alternate {
      font-size: font-size(20px);
      letter-spacing: normal;
      font-family: $font-family-alternate;
      text-transform: none;
      font-weight: 700;

      a {
        background: none;
        border: none;
        padding: 0;
        border-bottom: 2px $color-text solid;

        &:before {
          display: none;
        }
      }
    }

  }
}

#vertical-navigation {
  opacity: 1;
  visibility: visible;
  @include transition(all 0.25s ease-out);
  .mod_articlelist {
    position: fixed;
    right: 25px;
    top: 50%;
    width: 30px;
    height: 50vh;
    margin-top: -25vh;
    z-index: 1000;

    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    li.-hide {
      display: none;
    }

    li:not(.-hide) {
      flex: 3 3 0;
      padding: 5px 0;

      &.-small {
        flex: 1 1 0;
      }

      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        padding-bottom: 0;
      }

      a {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        background: #fff;
        line-height: 1;
        font-size: 0;
        opacity: .35;
        @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
        @include transition(none);

        div {
          opacity: 0;
          visibility: hidden;
          position: absolute;
          right: 100%;
          top: 2px;
          color: $color-text-invert;
          text-transform: lowercase;
          font-size: font-size(16px);
          font-weight: 400;
          padding-top: 3px;
          padding-right: 2px;
          @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
          @include transform(translate(0, 15px));

          &:before {
            position: absolute;
            left: 0;
            bottom: 100%;
            right: -10px;
            height: 2px;
            background-color: $color-link;
            content: '';
          }

          .label-holder {
            line-height: 1.3;
            color: $color-text;
            width: 150px;
            min-height: 2.6em;
            display: flex;
            align-items: center;
            background-color: $color-bg-senary;
            padding: 5px;

            .label {
              flex: 1 0 0;
              text-align: center;
            }
          }
        }

        &:hover,
        &.active {
          background: $color-bg-secondary;

          &:before {
            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;}

          &:after {
            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;}
        }
        &:hover {
          div {
            opacity: 1;
            visibility: visible;
            @include transform(translate(0,0));
          }
        }

        &:before {
          position: absolute;
          left:0;
          right: 0;
          bottom: 100%;
          height: 10px;
          content: '';
          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }

        &:after {
          position: absolute;
          left:0;
          right: 0;
          top: 100%;
          height: 10px;
          content: '';
          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }
      }

      &:first-child {
        a {
          &:before {
            display: none;
          }
        }
      }
    }

    @include for-mobile {
      right: 15px;
      top: 50%;
      width: 20px;
    }
  }
}



/**
 * CURTAIN
 */

#curtainstage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background-color: rgb(0,0,0);
  box-shadow: 0 0 0 2px white inset;*/
}
#curtain {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

#curtain .left,
#curtain .right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  //filter: brightness(120%);
  background-image: url("/files/pub/Landingpage/Wein/curtain_rot.svg");
  background-size: cover;
  background-repeat: no-repeat;
}

#curtain .left {
  left: 0;
  transform-origin: top right;
}
#curtain .right {
  left: 50%;
  transform-origin: top left;
}

/* **********
	opening
********** */

#curtainstage {
	animation-name: curtain-remove;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

#curtain.open .left,
#curtain.open .right {
  filter: brightness(100%);
}
#curtain.open .left {
  animation-fill-mode: forwards;
  animation-name: curtain-opening, left-curtain-opening;
  animation-duration: 2s, 4s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-delay: 0s, 0s;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
}
#curtain.open .right {
  animation-fill-mode: forwards;
  animation-name: curtain-opening, right-curtain-opening;
  animation-duration: 2s, 4s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-delay: 0s, 0s;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
}

/* **********
	animations
********** */

@keyframes curtain-remove { /* 2s */
  from { visibility: visible; }
  to { visibility: hidden; }
}

@keyframes curtain-opening { /* 2s */
  from { filter: brightness(100%); }
  to { filter: brightness(100%); }
}

@keyframes left-curtain-opening { /* 4s */
  from { transform: translate(0) rotate(0) scale(1,1); }
  to { transform: translate(-100%) rotate(20deg) scale(0,2); }
}

@keyframes right-curtain-opening { /* 4s */
  from { transform: translate(0) rotate(0) scale(1,1); }
  to { transform: translate(100%) rotate(-20deg) scale(0,2); }
}

.ce_gallery {
  &.-references {
    ul {
      justify-content: center;

     > li {
       flex: 0 1 31.666%;
       margin-bottom: 25px;
       min-width: 150px;
       figure {
         text-align: center;
       }
     }
    }
  }
}

.background-wrapper{
  .fp-section:not(:last-child) & {
    .overlay {
      &:before {
        background-image: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' stroke='none' fill='%23FFFFFF' viewBox='0 0 64 64'%3E%3Cpath d='M45.5,13.5c0,-7.451 -6.049,-13.5 -13.5,-13.5c-7.451,0 -13.5,6.049 -13.5,13.5l0,21c0,7.451 6.049,13.5 13.5,13.5c7.451,0 13.5,-6.049 13.5,-13.5l0,-21Zm-1.047,0l-0,21c-0,6.873 -5.58,12.453 -12.453,12.453c-6.873,-0 -12.453,-5.58 -12.453,-12.453l0,-21c0,-6.873 5.58,-12.453 12.453,-12.453c6.873,0 12.453,5.58 12.453,12.453Z'/%3E%3Cpath d='M34,8.5c0,-1.104 -0.896,-2 -2,-2c-1.104,0 -2,0.896 -2,2l0,6c0,1.104 0.896,2 2,2c1.104,0 2,-0.896 2,-2l0,-6Zm-1.047,0l-0,6c-0,0.526 -0.427,0.953 -0.953,0.953c-0.526,-0 -0.953,-0.427 -0.953,-0.953c0,-0 0,-6 0,-6c0,-0.526 0.427,-0.953 0.953,-0.953c0.526,0 0.953,0.427 0.953,0.953Z'/%3E%3Cpath d='M18.318,50.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3Cpath d='M18.318,55.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3C/svg%3E");
        width: 64px;
        height: 64px;
        content: '';
        position: absolute;
        bottom: 2rem;
        left: 50%;
        margin-left: -32px;
        opacity: 0;
      }
    }
  }
  .fp-section:not(:last-child).active & {
    .overlay {
      &:before {
        -webkit-animation: scroll-indicator 5s linear 6s infinite;
        -moz-animation: scroll-indicator 5s linear 6s infinite;
        animation: scroll-indicator 5s linear 6s infinite;
      }
    }
  }
}

@-webkit-keyframes scroll-indicator {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
  }
  35% {
    /*-webkit-transform: translateY(0.5rem);
    -moz-transform: translateY(0.5rem);
    -ms-transform: translateY(0.5rem);
    -o-transform: translateY(0.5rem);
    transform: translateY(0.5rem);*/
  }
  75% {
    opacity: 0.5;
    /*-webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);*/
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}
@-moz-keyframes scroll-indicator {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
  }
  35% {
    /*-webkit-transform: translateY(0.5rem);
    -moz-transform: translateY(0.5rem);
    -ms-transform: translateY(0.5rem);
    -o-transform: translateY(0.5rem);
    transform: translateY(0.5rem);*/
  }
  75% {
    opacity: 0.5;
    /*-webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);*/
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}
@keyframes scroll-indicator {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
  }
  35% {
    /*-webkit-transform: translateY(0.5rem);
    -moz-transform: translateY(0.5rem);
    -ms-transform: translateY(0.5rem);
    -o-transform: translateY(0.5rem);
    transform: translateY(0.5rem);*/
  }
  75% {
    opacity: 0.5;
    /*-webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);*/
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(1rem);
    -moz-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    -o-transform: translateY(1rem);
    transform: translateY(1rem);
  }
}