@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 {
    background-color: $color-bg-lightplatin;
  }
  &.-alt-color2 {
    background-color: $color-bg-footer;

    &,
    h1,h2,h3,h4,h5,h6 {
      color: $color-text-footer;

    }
  }
  &.-alt-color3 {
    background-color: $color-bg-footer2;
  }
  &.-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;
    flex-direction: column;
    //justify-content: center;
    > .background-wrapper-inner {
      flex: 0 0 auto;
      width: 100%;
    }

    .-va-top& {
      justify-content: flex-start;
    }
    .-va-middle& {
      justify-content: center;
    }
    .-va-bottom& {
      justify-content: flex-end;
    }

    /*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 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    > .background-wrapper-helper {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;

      > .background-wrapper-inner {
        flex: 0 0 auto;
        width: 100%;
      }
    }
  }*/

  &.-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;
        }
      }
    }
  }
}

.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;
  }

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

}

/**
 * Reference cards
 */

.ref-cards {

  .rs-columns {
    align-items: stretch;
    justify-content: space-between;
    margin: 0;
  }

  .rs-column {
    margin: 0;

    @include column-classes(0, 6, large);
    @include for-tablet {
      @include column-classes(0, 6, medium);
    }
    @include for-mobile {
      @include column-classes(0, 6, small);
    }
  }

  .ref-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 115px;
    position: relative;
    @include aspect-ratio(1,1,true);

    &:nth-child(even) {
      .ref-card-helper {
        background-color: $color-bg-tertiary;
      }
    }

    .image-wrapper {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 1;
    }

    .ref-card-helper {
      position: relative;
      flex: 1 1 0;
      display: flex;
      flex-direction: row;
      background-color: $color-bg-secondary;
      @include transition(all 1.5s cubic-bezier(0.19, 1, 0.22, 1));
    }

    .ref-card-content {
      padding: 15px;
      flex: 1 1 0;
      align-self: center;
      color: $color-text-invert;

      p:last-child {
        margin-bottom: 0;
      }
    }

    .ref-card-headline {
      @include headline(font-size(30px));
      text-transform: uppercase;
    }
    .ref-card-headline,
    .ref-card-text {
      color: $color-text-invert;
      @include transition(all 1.5s cubic-bezier(0.19, 1, 0.22, 1));
    }

    .ref-card-content {
      text-align: center;
    }

    &.-align-center {
      .ref-card-content {
        text-align: center;
      }
    }
    .-align-left&,
    &.-align-left {
      .ref-card-content {
        text-align: left;
      }
    }
    .-align-right&,
    &.-align-right {
      .ref-card-content {
        text-align: right;
      }
    }

    &.-align-middle {
      .ref-card-content {
        align-self: center;
      }
    }
    .-align-top&,
    &.-align-top {
      .ref-card-content {
        align-self: flex-start;
      }
    }
    .-align-bottom&,
    &.-align-bottom {
      .ref-card-content {
        align-self: flex-end;
      }
    }

    &.-has-image {

      .image-wrapper {
        img {
          position: absolute;
          left: 50%;
          top: 50%;
          @include transform(translate(-50%,-50%));
          vertical-align: middle;
        }
        .normal {
          visibility: visible;
          opacity: 1;
          @include transition(all 0.5s 0.25s cubic-bezier(0.19, 1, 0.22, 1));
        }
        .invert {
          visibility: hidden;
          opacity: 0;
          @include transition(all 0.5s cubic-bezier(0.19, 1, 0.22, 1));
        }
      }

      .ref-card-link {
        overflow: hidden;
        z-index: 1;
        &:before {
          content: '';
          background: $color-bg-secondary;
          @include transform(translate(0,-100%));
          @include transition(all 0.25s);
          @include transition(all 1.25s cubic-bezier(0.19, 1, 0.22, 1));
        }

        &,
        &:before,
        a {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
    }

    &.-link {
      &.-has-image {
        .ref-card-link {
          a {
            span {
              position: absolute;
              bottom: 15px;
              right: 15px;
              color: $color-text-invert;
              font-size: font-size(20px);
              visibility: hidden;
              opacity: 0;
              @include transition(all 0.25s);

              &:after {
                margin-left: 10px;
                @include icon('\e99f', 75%);
              }
            }
          }
        }

        .image-wrapper {
          overflow: hidden;

          img {
            //@include transition(all 2.5s cubic-bezier(0.19, 1, 0.22, 1));
            @include transition(all 1.25s cubic-bezier(0.19, 1, 0.22, 1));
          }
        }

        &:hover {

          .ref-card-helper {
            background-color: $color-bg-primary;
          }

          .ref-card-link {
            /*&:before {
              @include transform(translate(0, 0));
            }*/

            /*a {
              span {
                opacity: 1;
                visibility: visible;
                @include transition(all 1.25s 0.25s);
              }
            }*/
          }

          .image-wrapper {
            .normal {
              opacity: 0;
              visibility: hidden;
            }
            .invert {
              opacity: 1;
              visibility: visible;
              filter: grayscale(1);
            }
          }

          .ref-card-headline,
          .ref-card-text {
            color: $color-text;
          }
        }
      }

      &:not(.-has-image) {
        padding-bottom: 55px;
        .ref-card-link {
          position: absolute;
          bottom: 15px;
          right: 15px;
          a {
            //@include button($border-color: mix($color-bg-blue, #000, 60%), $background-color: $color-bg-blue, $border-color-hover: mix($color-bg-blue, #000, 50%), $background-color-hover: mix($color-bg-blue, #fff, 90%));
            //@include button-no-icon;
            font-weight: 700;
            &:before {
              margin-right: 5px;
              @include icon('\e99f', 75%);
            }
          }
        }
      }
    }
  }
}

/**
 * Feature Text
 */
$shadow-color: #fff;
.feature-text {
  //@include clearfix;
  position: relative;
  overflow: hidden;
  &.-image-centered {
    text-align: center;
  }
  &.-vertical-centered {
    display: table;
    table-layout: fixed;
    /* Fixes IE bug */
    width: 100%;
    @include for-mobile {
      //display: block;
    }
  }
  &.-small {
    min-height: 300px;
    &.-vertical-centered {
      height: 300px;
    }
    @include for-mobile {
      min-height: 200px;
      &.-vertical-centered {
        height: auto;
      }
    }
  }
  &.-medium {
    min-height: 600px;
    &.-vertical-centered {
      height: 600px;
    }
    @include for-mobile {
      min-height: 400px;
      &.-vertical-centered {
        height: auto;
      }
    }
  }
  &.-large {
    min-height: 900px;
    &.-vertical-centered {
      height: 900px;
    }
    @include for-mobile {
      min-height: 600px;
      &.-vertical-centered {
        height: auto;
      }
    }
  }
  &.-headline-dropshadow {
    h1, h2, h3, h4, h5, h6 {
      color: $color-text-invert;
      text-shadow: $text-shadow-image;
    }
  }
  &.-alternate-text {
    .feature-text-text {
      color: $color-text;
    }
    &.-headline-dropshadow {
      h1, h2, h3, h4, h5, h6 {
        color: $color-headline;
      }
    }
  }
}

.feature-text-text {
  margin: font-size(100px) col(12, 25) font-size(100px) 0;
  color: $color-text-invert;
  @include for-tablet {
    margin-right: col(6, 16);
  }

  @include for-mobile {
    margin: font-size(36px) 0;
  }

  .-image-left > & {
    margin-right: 0;
    margin-left: col(12, 25);
    @include for-tablet {
      margin-left: col(6, 16);
    }

    @include for-mobile {
      margin-left: 0;
    }
  }
  .-image-centered > & {
    margin-right: col(4, 25);
    margin-left: col(4, 25);
    @include for-tablet {
      margin-right: 0;
      margin-left: 0;
    }

    + .feature-text-image {
      margin-top: font-size(-36px);
      @include for-mobile {
        margin-top: 0;
      }
    }
  }
  .-vertical-centered > & {
    display: table-cell;
    vertical-align: middle;
    width: col(14, 25);
    margin: 0;
    padding: font-size(72px) col(1, 25) font-size(72px) 0;
    @include for-tablet {
      width: col(11, 16);
    }

    @include for-mobile {
      //display: block;
      width: auto;
      padding-right: 0;
    }
  }
  .-vertical-centered.-image-left > & {
    padding-right: 0;
    padding-left: col(1, 25);
    @include for-mobile {
      padding-left: 0;
    }
  }
  .-vertical-centered.-image-centered > & {
    width: 100%;
    padding-right: col(5, 25);
    padding-left: col(5, 25);
    @include for-tablet {
      padding-right: 0;
      padding-left: 0;
    }
  }
  .-no-image > & {
    width: 100%;
  }
  .-color-inverted & {
    color: $color-text-invert;
  }
  .no-margin & {
    margin: 0;
    padding: 0;
  }
  .no-margin-top & {
    margin-top: 0;
    padding-top: 0;
  }
  .no-margin-bottom & {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: $color-headline;
    font-size: font-size(32px);
    font-weight: bold;
    @include for-mobile {
      font-size: font-size(22px);
    }

    & + a {
      margin-top: font-size(24px);
    }
    .-color-inverted & {
      color: $color-text-invert;
    }
    &.-small {
      font-size: font-size(21px);
    }
    &.-medium {
      font-size: font-size(38px);
      @include for-mobile {
        font-size: font-size(30px);
      }
    }
    &.-large {
      font-size: font-size(46px);
      @include for-mobile {
        font-size: font-size(32px);
      }
    }
    &.-super-size {
      font-size: font-size(58px);
      @include for-mobile {
        font-size: font-size(36px);
      }
    }
  }
  p {
    font-size: font-size(18px);
  }
}

.feature-text-link {
  @include button($border-color: mix($color-bg-secondary, #000, 60%), $background-color: $color-bg-secondary, $border-color-hover: mix($color-bg-secondary, #000, 50%), $background-color-hover: mix($color-bg-secondary, #fff, 90%));
  @include button-no-icon;
}

.feature-text-image {
  display: block;
  float: right;
  width: col(11, 25);
  margin: font-size(48px) 0 font-size(48px) col(1, 25);
  @include for-tablet {
    width: col(5, 16);
  }

  @include for-mobile {
    width: 100%;
  }

  .-image-left > & {
    float: left;
    margin-right: col(1, 25);
    margin-left: 0;
    @include for-mobile {
      float: none;
      margin-right: 0;
    }
  }
  .-image-centered > & {
    float: none;
    width: col(16, 25);
    margin-right: auto;
    margin-left: auto;
    @include for-tablet {
      width: 100%;
    }

    + .feature-text-text {
      margin-top: font-size(48px);
    }
  }
  .-image-top > & {
    margin-top: 0;
  }
  .-image-bottom > & {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    @include for-mobile {
      position: static;
      margin-bottom: font-size(48px);
    }
  }
  .-image-bottom.-image-left > & {
    right: auto;
    left: 0;
  }
  .-vertical-centered > & {
    display: table-cell;
    vertical-align: middle;
    float: none;
    margin: 0;
    padding: font-size(48px) 0;
    @include for-mobile {
      display: block;
      padding-top: font-size(24px);
      padding-bottom: font-size(24px);
    }
  }
  .-image-rounded > & img {
    border-radius: 99em;
  }
}

.feature-text-text, .feature-text-image {
  .in-view > & {
    @include transition(opacity 0.6s linear, transform 0.6s ease-out);
  }
  .not-in-view > &.-fade {
    opacity: 0;
  }
  .in-view > &.-fade {
    opacity: 1;
  }
  .not-in-view > &.-move {
    @include transform(translate(100%, 0));
  }
  .not-in-view > &.-move-right {
    @include transform(translate(-100%, 0));
  }
  .not-in-view > &.-move-top {
    @include transform(translate(0, 100%));
  }
  .not-in-view > &.-move-bottom {
    @include transform(translate(0, -100%));
  }
  .in-view > &.-move {
    @include transform(translate(0, 0));
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

.hero-wrapper {
  position: relative;
  height: 100%;

  /*&:not(.-full-vh) {
    @include aspect-ratio(1920, 500, true);
  }*/

  &.-small > .hero-background {
    min-height: 250px;
  }
  @media screen and (max-width: 599px) {
    &.-small > .hero-background {
      min-height: 150px;
    }
  }
  &.-medium > .hero-background {
    min-height: 450px;
  }
  @media screen and (max-width: 599px) {
    &.-medium > .hero-background {
      min-height: 300px;
    }
  }
  &.-large > .hero-background {
    min-height: 750px;
  }
  @media screen and (max-width: 599px) {
    &.-large > .hero-background {
      min-height: 450px;
    }
  }

  &.-alt-color {
    background-color: $color-bg-senary;
  }

  .hero-background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 100%;

    :not(.-full-vh):not(.-small):not(.-medium):not(.-large)&:not([class*='ratio-']) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    &.ratio-169 {
      @include aspect-ratio(16,9,true);
    }
    &.ratio-1610 {
      @include aspect-ratio(16,10,true);
    }
    &.ratio-219 {
      @include aspect-ratio(21,9,true);
    }
    &.ratio-83 {
      @include aspect-ratio(8,3,true);
    }
    &.ratio-43 {
      @include aspect-ratio(4,3,true);
    }
    &.ratio-32 {
      @include aspect-ratio(3,2,true);
    }

    /*&:not(.video_container) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }*/

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      font-family: 'object-fit: cover;';
    }

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

      &.video_container > div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }

  .hero-content,
  .hero-html {
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .hero-text {
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    margin: 0;
    line-height: 1.3;
    font-family: $font-family-alternate;
    font-size: font-size(40px);
    //text-shadow: $text-shadow-image;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: $color-text-invert;

    .-fs-medium& {
      font-size: font-size(32px);

    }
    .-fs-small& {
      font-size: font-size(27px);

    }
  }

  .-arrow& svg.arrow {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    fill: #fff;
    border-bottom: 2px #fff solid;
    margin-bottom: -2px;

    .-arrow-alternate& {
      fill: #000;
      border-bottom-color: #000;
    }
  }
}

/**
 * PHOTO / TEXT COMBI
 */
.arrow-wrapper {
  position: relative;

  .arrow-background {
    z-index: 1;
    background-color: $color-bg-tertiary;
    color: $color-text-invert;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 50%;

    &:before {
      position: absolute;
      top:0;
      bottom: 0;
      left: 100%;
      width: 50px;
      content: '';
      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
  }

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

  .arrow-inside {
    @include centered-1200;
    display: flex;
    align-items: stretch;
    padding: 100px 0;
    z-index: 1;

    > * {
      flex:  0 0 50%;
    }

    p,
    h1,h2,h3,h4,h5,h6 {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .arrow-wall,
  .text-wall {
    display: flex;
    align-items: center;
  }

  .text-wall {

    &-content {
      position: relative;
      @include box-sizing(border-box);
      padding: $gutter-default*1.5 0 $gutter-default*1.5 100px;
    }

    .cta {
      @include button($border-color: mix($color-bg-secondary, #000, 60%), $background-color: $color-bg-secondary, $border-color-hover: mix($color-bg-secondary, #000, 50%), $background-color-hover: mix($color-bg-secondary, #fff, 90%));
      @include transform(translate(-50%,-50%));
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  .arrow-wall {
    z-index: 1;
    em, i {
      font-style: normal;
      color: $color-text-alt;
    }
    & {
      color: $color-text-invert;
    }
    h1,h2,h3,h4,h5,h6 {
      text-align: left;
      color: $color-text-alt;

      em,i {
        color: $color-text-invert;
      }
    }
    &-content {
      @include box-sizing(border-box);
      padding: $gutter-default*1.5 50px $gutter-default*1.5 0;
    }
  }

  &.-alt-color {
    .arrow-background {
      background-color: $color-bg-secondary;
      &:before {
        background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23BA0C2F%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
      }
    }
    .arrow-wall {
      em, i {
        font-style: normal;
        color: $color-headline-invert;
      }
      & {
        color: $color-text;
      }
      h1,h2,h3,h4,h5,h6 {
        color: $color-headline-invert;
        em, i {
          color: $color-text;
        }
      }
    }
  }

  &.-arrow-left {
    .arrow-background {
      left: 50%;
      right: 0;
      &:before {
        left: auto;
        right: 100%;
        background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        .-alt-color& {
          background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23BA0C2F%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }
      }
    }
    .text-wall-background {
      right: 50%;
      left: 0;
    }
    .arrow-inside {
      flex-direction: row-reverse;
    }

    .text-wall {
      &-content {
        padding-right: 100px;
        padding-left: 0;
      }
    }
    .arrow-wall {
      &-content {
        padding-left: 50px;
        padding-right: 0;
      }
    }

  }

  @include for-tablet {
    .arrow-inside {
      flex-direction: column;
      padding: 0;
    }

    .arrow-background {
      display: none;
    }

    .text-wall-background {
      left: 0;
    }

    .arrow-wall {
      position: relative;
      padding: 50px 30px;
      background: #000;
      justify-content: center;

      &-content {
        padding: 0;
        &,
        h1,h2,h3,h4,h5,h6 {
          text-align: center;
        }
      }

      &:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 50px;
        content: '';
        background: url('data:image/svg+xml; charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="100" fill="%23000000" viewBox="0 0 432 47" preserveAspectRatio="none" %3E%3Cpath d="M217.187,46.446L0,0L431.98,0L217.187,46.446Z"%3E%3C/path%3E%3C/svg%3E') no-repeat 100% 50%;
        //background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20432%2047%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
      }
    }

    .text-wall {
      padding: 100px 30px 50px;

      &-content {
        padding: 0;
      }
    }
  }

}

/**
 * Icon cards
 */
.icon-cards-item {
  position: relative;
  outline: none;
  text-align: left;
  margin-bottom: 30px;

  .icon-cards-item-wrapper {
    height: 100%;
    position: relative;

    > {
      h1, h2, h3, h4 {
        text-transform: uppercase;
        font-size: font-size(30px);
        line-height: 1.3;
        margin: 0;

        @include for-mobile {
          font-size: font-size(25px);
        }

        + .icon-cards-item-text {
          margin-top: 30px;
        }
      }
    }
  }

  .icon-cards-item-icon {
    font-size: 100px;
    line-height: 0;
    text-align: center;e
    &,
    svg {
      @include transition(all 0.25s cubic-bezier(.2, .38, .51, .99));
    }

    + h3 {
      @include for-mobile {
        font-size: font-size(25px);
      }
    }

    + h3,
    + .icon-cards-item-text {
      margin-top: 15px;
    }
  }

  .background-wrapper & {
    .-alt-color& {
      color: $color-text-invert;

      .icon-cards-item-icon {
        color: $color-text;
      }
    }

    .-alt-color2& {
      color: $color-text-invert;

      .icon-cards-item-icon {
        color: $color-bg-secondary;
      }
    }
  }

  &.-align-center {
    text-align: center;
  }
  &.-align-right {
    text-align: right;
  }

  .-side-padding & {
    .icon-cards-item-wrapper {
      padding: 0 30px;
    }
  }

  .icon-cards-item-text {
    font-weight: 300;
    font-size: font-size(17px);
    line-height: 1.2;
  }

  .icon-cards-item-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
  }

  &.-has-link{
    &:hover {
      .icon-cards-item-icon {
        @include transform(scale(1.15, 1.15));
      }
    }
    &:active {
      .icon-cards-item-icon {
        @include transition(all 0.05s cubic-bezier(.2, .38, .51, .99));
        @include transform(scale3d(1, 1, 1));
      }
    }
  }
}

.zoom-hotspots {
  .zoom-hotspots-wrapper {
    display: inline-block;
    position: relative;

    > img {
      vertical-align: middle;
    }
  }
  .hotspot-trigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #76B82A;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border: 2px #fff solid;
    -webkit-box-shadow: 0 0 5px rgba(#000,50%);
    -moz-box-shadow: 0 0 5px rgba(#000,50%);
    box-shadow: 0 0 5px rgba(#000,50%);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    &:hover {
      background-color: #fff;
      -webkit-transform: translate(-50%,-50%) scale(1.1,1.1);
      -moz-transform: translate(-50%,-50%) scale(1.1,1.1);
      -ms-transform: translate(-50%,-50%) scale(1.1,1.1);
      -o-transform: translate(-50%,-50%) scale(1.1,1.1);
      transform: translate(-50%,-50%) scale(1.1,1.1);
      &:before,
      &:after {
        //background: #76B82A;
        color: #76B82A;
      }
    }
    /*&:before,*/
    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      -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: #fff;
      color: #fff;
      content: '\e0cb';
    }
    /*&:before {
      width: 2px;
      height: 15px;
    }*/
    &:after {
      /*height: 2px;
      width: 15px;*/

      font: 100%/1 "RockSolid Icons";
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      text-indent: 0;
      margin-right: 0.26667em;
    }
  }
  .hotspot-modal {
    display: none;
  }

  @media screen and (max-width: 599px) {
    .hotspot-trigger {
      width: 25px;
      height: 25px;
      border-width: 1px;
      &:after {
        font-size: 0.7em;
      }
    }
  }

}

.hotspot-modal {
  .image_container {
    display: block;
    text-align: center;

    img {
      max-width: 100%;
      width: auto;
      display: inline;
    }
  }
}

.pricing-table {

  &.-valign-stretch {
    .rs-columns {
      align-items: stretch;
    }
  }

  .pricing-table-item {
    padding: 1em 0;
    position: relative;

    &.-featured {
      padding: 0;

      .pricing-table-item-content {
        padding: 2.75em 2em 8em;
        border-top: 0.25em solid $color-bg-secondary;

        .main-content {
          margin-top: -2.75em;
          padding-top: 2.75em;
        }

        .link {
          //bottom: 4.25em;
        }
      }

      /*&:before {
        z-index: 1;
        position: absolute;
        top: 0.2em;
        left: 0;
        right: 0;
        height: 1.75em;
        content: '';
        background: url('data:image/svg+xml; charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="10" fill="%23BA0C2F" viewBox="0 0 100 10" preserveAspectRatio="none" %3E%3Cpath d="M0,0 L50,10 L100,0z"%3E%3C/path%3E%3C/svg%3E') no-repeat 100% 50%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
      }
      &:after {
        z-index: 1;
        content: attr(data-feature-label);
        position: absolute;
        top: 0.55em;
        left: 50%;
        @include transform(translateX(-50%));
        color: $color-text-invert;
        font-size: font-size(12px);
      }*/
    }

    .pricing-table-item-content {
      background-color: $color-bg-lightgrey;
      height: 100%;
      color: $color-text;
      padding: 2em 2em 6em;
      text-align: center;
      position: relative;
      @include box-sizing(border-box);
      @include transition(all 0.5s cubic-bezier(0.25, 1, 0.5, 1));
      @include transform(scale3d(1,1,1));

      &:hover,
      &:focus {
        @include box-shadow(0 0 10px 5px rgba(255,79,115,.9));
        @include transform(scale3d(1.01,1.01,1));
      }

      .main-content {
        background-color: #fff;
        margin: -2em -2em 2.75em;
        padding: 2em 2em 0.5em;
        position: relative;

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

      .title-wrapper {
        min-height: 6em;
        margin-bottom: #{font-size(19px)};
      }

      .title {
        color: $color-bg-secondary;
        font-size: font-size(38px);
      }

      .subtitle {
        font-weight: 600;
        margin-top: -#{font-size(19px)};
      }

      .price-wrapper {
        color: $color-bg-secondary;
        position: relative;
        margin-bottom: #{font-size(19px)};
      }
      .price {
        font-weight: 500;
        font-size: 2.5em;

        .unit {
          font-size: 0.5em;
          vertical-align: super;
        }
      }

      .period {
        font-weight: 400;
        font-size: 1.25em;
        display: inline-block;
        padding: 0 0 0 0.5em;
        color: #777;
      }

      .text {
        font-weight: 400;
      }

      .features {
        font-size: font-size(15px);
        text-align: left;

        li {
          line-height: 1.3;
          padding: 0.25em 0 0.25em 1.75em;
          position: relative;

          &:before {
            position: absolute;
            top: 0.25em;
            left: 0;
            width: 1.25em;
            height: 1.25em;
            background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 16' fill='%23BA0C2F'%3E%3Cpath d='M6 10.781l7.063-7.063 0.938 0.938-8 8-3.719-3.719 0.938-0.938z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
            content: '';
          }
        }
      }

      .link {
        @include button($button-height: 50px, $button-padding-horizontal: 40px, $background-color: $color-bg-secondary, $border-color: $color-bg-secondary, $background-color-hover: $color-bg-tertiary, $border-color-hover: $color-bg-tertiary);
        //margin-top: 1.5rem;
        position: absolute;
        bottom: 2em;
        left: 2em;
        right: 2em;
        display: block;
      }
    }
  }
}

/**
 * PHOTO / TEXT COMBI
 */
.photo-text-wrapper {
  position: relative;

  .photo-text-wrapper-background {
    @extend .background-wrapper-background;
  }

  &.-valign-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    > .text-wall {
      flex: 0 0 auto;
      width: 100%;
    }

    &.-valignTop {
      justify-content: flex-start;
    }
    &.-valignBottom {
      justify-content: flex-end;
    }
  }

  .photo-wall {
    position: absolute;
    //margin-left: $gutter-default;
    left: 50%-$gutter-default/2;
    right: 0;
    top: 0;
    height: 100%;

    &-content {
      height: 100%;
      overflow: hidden;
      background: 50% 50% no-repeat;
      background-size: cover;
    }
  }
  .text-wall {
    @include centered-1200;

    &-content {
      max-width: 50%;
      margin-right: auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-right: 75px;

      .-bg-dark& {
        &,
        h1,h2,h3,h4,h5,h6 {
          color: $color-text-invert;
        }
      }

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

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

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

  &.-alt-color {
    background-color: $color-bg-secondary;

    /*&,
    h1,h2,h3,h4,h5,h6 {
      color: $color-headline-invert;
    }*/
  }

  &.-bg-dark {
    background-color: #000;
  }

  &.-text-right {
    .photo-wall {
      margin-left: 0;
      margin-right: $gutter-default;
      left: 0;
      right: 50%-$gutter-default/2;
    }

    .text-wall {
      &-content {
        margin-right: 0;
        margin-left: auto;
        padding-right: 0;
        padding-left: 75px;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .photo-wall {
      margin-left: 60px;
    }

    .text-wall {
      &-content {
        padding-right: 0;
      }
    }

    &.-text-right {
      .photo-wall {
        margin-right: 60px;
      }

      .text-wall {
        &-content {
          padding-left: 0;
        }
      }
    }
  }

  @media screen and (max-width: 599px) {
    .photo-wall {
      position: relative;
      right: auto;
      left: auto;
      top: auto;
      margin: 0 0 15px;
      padding: 15px 15px 0;
    }

    .photo-wall-content {
      min-height: 66vw;
    }

    .text-wall {
      &-content {
        padding-right: 0;
        max-width: none;
      }
    }

    &.-text-right {
      .photo-wall {
        margin-right: 0;
        right: 0;
      }
    }
  }

}


/******************
 * Featured Block
 ******************/
.feature-wrapper {

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  &.-alt-color {
    background-color: $color-bg-lightplatin;
  }
  &.-alt-color2 {
    background-color: $color-bg-footer;

    &,
    h1,h2,h3,h4,h5,h6 {
      color: $color-text-footer;

    }
  }
  &.-alt-color3 {
    background-color: $color-bg-footer2;
  }

  &.-valign-center {
    justify-content: center;
  }
  &.-valign-top {
    justify-content: flex-start;
  }
  &.-valign-bottom {
    justify-content: flex-end;
  }

  &.-viewportHeight {
    min-height: 100vh;

    /*> .background-wrapper-helper {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;

      > .background-wrapper-inner {
        flex: 0 0 auto;
        width: 100%;
      }
    }*/
  }

  .feature-wrapper-boundary {
    @include centered();
    width: 100%;
  }

  .feature-wrapper-cols {
    display: flex;
    align-items: stretch;

    .-text-left& {
      flex-direction: row-reverse;
    }

    .media-col,
    .content-col {
      flex: 0 1 50%;
    }
  }

  .media-col-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .-valign-center& {
      justify-content: center;
    }

    > * {
      width: 100%;
      flex: 0 0 auto;
    }

    .feature-video,
    .feature-image {
      picture,
      img,
      video {
        /*position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;*/
        max-height: 66.666vh;

        :not(.-valign-center)& {
          min-height: 50vh;
        }
      }
    }

    :not(.-valign-center)&.feature-image {
      flex: 1 1 auto;
    }

    .feature-video {
      object-fit: cover;
      font-family: 'object-fit: cover';
    }

    .feature-link {
      text-align: left;
      padding-top: 30px;

      &.-alignCenter {
        text-align: center;
      }
      &.-alignRight {
        text-align: right;
      }

      a {
        font-size: 1.25em;
        text-transform: uppercase;
        font-weight: 700;
        font-family: $font-family-alternate;
        letter-spacing: 0.05em;

        span {
          display: inline;
          position: relative;

          &:last-child {
            padding-bottom: 0.3em;

            &:after {
              position: absolute;
              left: 0;
              width: 100%;
              height: 0;
              @include border-radius(99em);
              border-color: inherit;
              content: "";
              bottom: -0.15em;
              border-bottom-width: 6px;
              border-bottom-style: solid;
            }
          }
        }

        &:before {
          content: '';
          width: .5em;
          height: 1em;
          display: inline-block;
          position: relative;
          background: $color-link;
          background: currentColor;
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          vertical-align: middle;
          margin-right: 10px;
          @include transition(all 0.2s ease);
        }

        &:hover {
          &:before {
            background: mix($color-link,#000,80%);
            @include transform(translateX(5px));
          }
        }
      }
    }
  }

  .content-col-inside {
    padding: 160px 0 0 30px;

    .-text-left& {
      padding-left: 0;
      padding-right: 30px;
    }

    h1, h2 {
      font-size: font-size(50px);
    }
  }

  &.is-animated {
    .media-col,
    .content-col {
      opacity: 0;
      visibility: hidden;
      @include transition(opacity 0.6s 0.25s linear, transform 0.6s 0.25s ease-out);
    }
    .media-col {
      @include transform(translate3d(0,50px,0));
    }
    .content-col {
      @include transform(translate3d(50px,0,0));
      .-text-left& {
        @include transform(translate3d(-50px,0,0));
      }
    }

    &.-in-view {
      .media-col,
      .content-col {
        opacity: 1;
        visibility: visible;
        @include transform(translate3d(0,0,0));
      }
    }
  }
}
