@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }
/**
 * Custom Elements
 */


/**
 * WRAPPER
 */
.background-wrapper {
  zoom: 1;
  position: relative;
  clear: both;
  background: 50% 50% no-repeat;
  background-size: cover;
  overflow: hidden;

  &:before {
    content: "";
    display: table;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  &.-alt-color,
  &.-alt-color2 {
    color: $color-text-invert;

    &:not(.-alt-color2)
    {
      h1,h2,h3,h4,h5,h6 {
        color: $color-headline-invert;
      }
    }
  }
  &.-alt-color {
    background-color: $color-bg-secondary;

    a {
      color: $color-bg-tertiary;

      &:hover {
        color: mix($color-bg-tertiary,#fff,70%);
      }
    }

    .ce_text {
      a[target="_blank"]:not(.button):not(.-ico-dl) {
        &:before {
          background: $color-bg-tertiary;
        }
        &:hover {
          &:before {
            background: mix($color-bg-tertiary, #fff, 80%);
          }
        }
      }
    }
  }
  &.-alt-color2 {
    background-color: $color-bg-tertiary;
  }
  &.-small > .background-wrapper-helper > .background-wrapper-inner {
    min-height: 250px;
  }
  @media screen and (max-width: 599px) {
    &.-small > .background-wrapper-helper > .background-wrapper-inner {
      min-height: 150px;
    }
  }
  &.-medium > .background-wrapper-helper > .background-wrapper-inner {
    min-height: 450px;
  }
  @media screen and (max-width: 599px) {
    &.-medium > .background-wrapper-helper > .background-wrapper-inner {
      min-height: 300px;
    }
  }
  &.-large > .background-wrapper-helper > .background-wrapper-inner {
    min-height: 750px;
  }
  @media screen and (max-width: 599px) {
    &.-large > .background-wrapper-helper > .background-wrapper-inner {
      min-height: 450px;
    }
  }

  &.-background-mousemove,
  &.-background-mousemove-inverted,
  &.-background-parallax {
    overflow: hidden;
  }

  &.-full-vh > .background-wrapper-helper {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    > .background-wrapper-inner {
      width: 100%;
      //height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      > * {
        flex: 1 0 auto;
      }

      .client-showcase & {
        > *:last-child {
          flex: 0 0 auto;
        }
      }
    }
  }

  &.-full-vh-header > .background-wrapper-helper {
    height: 90vh;
    //height: calc(100vh - #{$header-height});
    //height: 100%;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    > .background-wrapper-inner {
      width: 100%;
      height: 100%;
      display: table-cell;
    }

  }

  &.-valign-center > .background-wrapper-helper {
    display: flex;
    align-items: center;
    height: 100%;

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

  &.-shadow {
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
  }

  &.-invert {
    color: $color-text-invert;
    h1, h2, h3, h4, h5, h6 {
      color: $color-text-invert;
    }
  }
  &.-text-shadow {
    text-shadow: 0 0 5px #fff;

    &.-invert {
      text-shadow: 0 0 5px #000;
    }
  }

  &.-bg-restraint,
  .background-wrapper-helper {
    @include centered-1200;
    /*padding-left: $gutter-default/2;
    padding-right: $gutter-default/2;*/
  }

  &.-width-expand > .background-wrapper-helper {
    max-width: none;
    /*padding-left: 15px;
    padding-right: 15px;*/
    .background-wrapper-inner {
      > .rs-columns {
        margin-top: -30px;

        > .rs-column {
          margin-top: 30px;
        }
      }
    }
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
  }
}

.background-wrapper-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: 50% 50% no-repeat;
  background-size: cover;

  video {
    /* Change this to `object-fit: cover;` once all browsers support it, */
    /* see http://stackoverflow.com/a/20851590 */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .-background-mousemove > &, .-background-mousemove-inverted > & {
    right: -12%;
  }
}

.background-wrapper-inner {
  position: relative;

  /*& {
    @include centered-1200;
  }*/

  &.-padding {
    padding: $gutter-default*1.5 0;
  }
  &.-medium-padding {
    padding: 50px 0;
  }
  &.-large-padding {
    padding: 100px 0;
  }

  &.-padding-top {
    padding: $gutter-default*1.5 0 0;
  }
  &.-medium-padding-top {
    padding: 50px 0 0;
  }
  &.-large-padding-top {
    padding: 100px 0 0;
  }

}