@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }

.content-wrapper {
  @include centered-1200;
  @include box-sizing(border-box);
}

.video_container {
  video {
    vertical-align: middle;
  }

  > video {
    max-width: 100%;
    height: auto;
  }

  .responsive {
    overflow: hidden;
    position: relative;

    video {
      max-width:100%;
      height:auto;
      left: 0;
      position: absolute;
      top: 0;
    }

    iframe {
      border: 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    &.ratio-169 {
      padding-top: 56.25%;
    }
    &.ratio-1610 {
      padding-top: 62.5%;
    }
    &.ratio-219 {
      padding-top: 42.85%;
    }
    &.ratio-43 {
      padding-top: 75%;
    }
    &.ratio-32 {
      padding-top: 66.66%;
    }
  }
}

.image_container {

  &,
  picture {
    overflow: hidden;
  }

  img {
    vertical-align: middle;
  }

  a {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    position: relative;

    &:before/*,
    &:after*/ {
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -ms-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
    }

    &:before {
      //background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"></svg>');
      background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1.5em" height="1.5em" viewBox="0 0 32 32"%3E%3Cpath d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"/%3E%3C/svg%3E') 50% 50% no-repeat;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      content: '';
    }
    /*&:after {
      @include icon('\e906',26px);
      position: absolute;
      left: 50%;
      top: 50%;
      visibility: hidden;
      opacity: 0;
      margin: -13px 0 0 -13px;
      color: rgba(0, 0, 0, 0.75);
      -webkit-transform: scale3d(0.5,0.5,1);
      -moz-transform: scale3d(0.5,0.5,1);
      -ms-transform: scale3d(0.5,0.5,1);
      -o-transform: scale3d(0.5,0.5,1);
      transform: scale3d(0.5,0.5,1);
    }*/

    &:hover {
      &:before/*,
      &:after*/ {
        opacity: 1;
        visibility: visible;
      }

      /*&:after {
        -webkit-transform: scale3d(1,1,1);
        -moz-transform: scale3d(1,1,1);
        -ms-transform: scale3d(1,1,1);
        -o-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
      }*/
    }
  }

  figcaption {
    padding: 5px 0 0;
    font-size: font-size(13px);
    color: $color-text-breadcrumb;
    line-height: 1.3;
  }

  &.float_right {
    float: right;
    margin: 0 0 $gutter-default $gutter-default;
  }

  &.float_left {
    float: left;
    margin: 0 $gutter-default $gutter-default 0;
  }

  @media screen and (max-width: 599px) {
    &.float_right {
      float: none;
      margin: 0 0 $gutter-default;
    }

    &.float_left {
      float: none;
      margin: 0 0 $gutter-default;
    }
  }
}

.embed-wrapper {
  position: relative;
  &.embed-map {
    z-index: 1;
    overflow: hidden;
    @include aspect-ratio(2,1);
  }
  iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/**
 * Icon handling
 */
*[data-icon] {
  &:before {
    @include icon;
    content: attr(data-icon);
    margin-right: 0.5ex;
  }
  &.-after {
    &:before {
      content: none;
    }
    &:after {
      @include icon(attr(data-icon));
      margin-left: 0.5ex;
    }
  }
}

.show-mobile {
  display: none;
  @include for-mobile {
    display: block;
  }
}
.show-tablet {
  display: none;
  @include for-tablet {
    display: block;
  }
}
.show-tablet-up {
  display: none;
  @include for-tablet-up {
    display: block;
  }
}
.show-desktop-up {
  display: none;
  @include for-desktop-up {
    display: block;
  }
}

/**
 * Separator
 */
hr {
  border: none;
  border-bottom: 1px $color-stroke-grey solid;
  margin: 1.5em 0;
}

/**
 * Lists
 */
ul,
ol {
  &.list {
    padding-top: 0.25em;
    margin-bottom: 0.75em;

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

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

      &:before {
        //@include icon("\e913",100%,1);
        line-height: 1;
        font-size: 100%;
        content: '\2022';
        color: $color-list-icon;
        position: absolute;
        left: 0;
        top: 0.1em;
      }

      &[data-icon] {
        &:before {
          content: attr(data-icon);
        }
      }
    }

    &.list-check {
      li {
        &:before {
          content: '\e98e';
        }
      }
    }
  }

  &.attribute_list {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .attribute {
      font-size: font-size(13px);
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1/13*(12*1.5);
      letter-spacing: 0.1em;
      position: relative;
      padding: 0.25em 0 0.25em 140px;
      min-height: 1.5em;

      .label {
        font-size: font-size(12px);
        text-transform: uppercase;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1em;
        color: $color-bg-quaternary;
        position: absolute;
        max-width: 130px;
        left: 0;
        top: 0.25em;

        &:after {
          //content: ':';
        }
      }

      @include for-mobile {
        padding-left: 0;
        margin-bottom: 0.5em;
        .label {
          position: relative;
          left: auto;
          top: auto;
          display: block;
        }
      }

      &.rows {
        padding-left: 0;
        font-family: $font-family-alternate;
        font-size: font-size(16px);
        letter-spacing: normal;
        text-transform: none;
        line-height: 1/16*(12*1.5);
        margin-bottom: 0.5em;

        p {
          margin-bottom: 0.5em;
        }

        .label {
          font-family: $font-family;
          font-size: font-size(12px);
          position: relative;
          left: auto;
          top: auto;
          display: block;
        }
      }

      &.spacing {
        margin-bottom: 1.5em;
      }
    }
  }
}

ol {
  padding-left: 1.1em;

  &.list {
    li {
      padding-left: 5px;

      &:before {
        content: none;
      }
    }
  }
}

.ce_text,
.hero-wrapper,
.ce_hyperlink {
  ul,ol {
    @extend .list;
  }

  a:not(.button) {
    &[target="_blank"]:not(.-ico-dl),
    &.-emphasised-block:not(.-ico-dl),
    .-emphasised-block& {
      &: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));
        }
      }
    }
    &.-emphasised-block,
    .-emphasised-block& {
      @include font-size(25px);
      text-transform: uppercase;
      font-weight: 700;
      font-family: $font-family-alternate;
      letter-spacing: 0.05em;

      &.-underlined,
      .-underlined& {
        padding-bottom: 0.3em;
        position: relative;
        &:after {
          position: absolute;
          left: 0.8em;
          right: 0;
          height: 0;
          @include border-radius(99em);
          border-color: currentColor;
          content: "";
          bottom: -0.15em;
          border-bottom-width: 10px;
          border-bottom-style: solid;
        }
      }
    }
    /*&.-ico-dl {
      &:before {
        @include icon('\e908');
        margin-right: 5px;
      }
    }
    &.-ico-goto {
      &:before {
        @include icon('\e90a');
        margin-right: 5px;
      }
    }*/
  }
}

/**
 * Multi column text
 */
.ce_text {

  &.layout_2col {

    .text {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: $gutter-default;
      -moz-column-gap: $gutter-default;
      column-gap: $gutter-default;

      p, div, ul, ol, dl {
        break-inside: avoid-column;
        break-before: auto;
      }

      h1, h2, h3, h4, h5, h6 {
        break-inside: avoid-column;
        break-after: avoid-column;
      }
    }

    @media screen and (max-width: 599px) {
      .text {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
      }
    }
  }
}

/**
 * Back links
 */
p.back,
.ce_hyperlink.back {
  clear: both;
  > a {
    text-transform: uppercase;
    font-size: font-size(14px);
    font-weight: 600;
    color: $color-text;
    letter-spacing: 0.1em;

    svg {
      vertical-align: -1px;
      font-size: font-size(12px);
    }
  }
}

/**
 * Boxes
 */
%box {
  @include box;
}

%box-white {
  @include box-white;
}

%box-grey {
  @include box-grey;
}

.box {
  @extend %box;
}

/**
 * Slider related
 */
.negate-slider-pagination {
  margin-bottom: -30px;

  /*@media screen and (max-width: 900px) {
    &.-medium-col-1-1 {
      margin-bottom: 0;
    }
  }
  @media screen and (max-width: 599px) {
    &.-small-col-1-1 {
      margin-bottom: 0;
    }
  }*/
}

/**
 * PAGINATION
 */
.pagination {
  line-height: 35px;
  display: flex;
  p {
    font-size: font-size(14px);
    font-family: $font-family-alternate;
    letter-spacing: 0.125em;
    float: left;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 auto 0 0;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 0;
      width: 100%;
      @include border-radius(99em);
      background-color: $color-text;
      height: 3px;
    }
  }

  ul {
    font-size: font-size(15px);
    text-align: center;
    position: relative;
    padding: 0;
    margin: 0 0 0 auto;
  }

  li {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;

    a {
      &:hover {
        color: $color-text;
        background-color: $color-bg-tertiary;
      }
    }

    a,strong {
      @include border-radius(9999em);
      font-weight: 400;
      display: block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      padding: 0 0.125em;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      color: $color-link;
      text-align: center;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -ms-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;

      &.active
      {
        background-color: $color-bg-primary;
        color: $color-text-invert;
        font-weight: 400;
      }

      &.next,
      &.previous,
      &.first,
      &.last {
        position: relative;
        text-indent: -9999em;
        overflow: hidden;
        //color: $color-link;
        &:before,
        &:after {
          content: '';
          width: 1em;
          height: 1em;
          position: absolute;
          left: 50%;
          top: 50%;
          @include transform(translate(-50%,-50%));
        }
      }

      &.next {
        &:before {
          background: 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") 50% 50% no-repeat;
        }
      }

      &.previous {
        &:before {
          background: 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='M1.678,65.45c-1.409,-2.509 -1.409,-5.581 0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 50% 50% no-repeat;
        }
      }

      &.last {
        &:before {
          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 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.322,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%3Cpath d='M100,6.617c0,-3.652 -2.965,-6.617 -6.617,-6.617l-13.233,-0c-3.651,-0 -6.616,2.965 -6.616,6.617l-0,109.266c-0,3.652 2.965,6.617 6.616,6.617l13.233,0c3.652,0 6.617,-2.965 6.617,-6.617l0,-109.266Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};'/%3E%3C/svg%3E") 50% 50% no-repeat;
        }
      }

      &.first {
        &:before {
          background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 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='M39.678,65.45c-1.409,-2.509 -1.409,-5.581 -0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3Cpath d='M26.466,6.617c0,-3.652 -2.965,-6.617 -6.616,-6.617l-13.233,-0c-3.652,-0 -6.617,2.965 -6.617,6.617l-0,109.266c-0,3.652 2.965,6.617 6.617,6.617l13.233,0c3.651,0 6.616,-2.965 6.616,-6.617l0,-109.266Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};'/%3E%3C/svg%3E") 50% 50% no-repeat;
        }
      }
    }
  }
}


/* --- CALLOUTS --- */
.callout {
  border-left: 30px solid #BBB;
  background-color: #EEE;
  padding: 15px 15px 15px 15px;
  display: block;
  position: relative;
  margin-bottom: 0.75em;

  &.info {
    border-left-color: #fab200;
    background-color: #fff3d4;
    color: #966c00;

  }

  &.success {
    border-left-color: #52A256;
    background-color: #e7f3e7;
    color: #376c39;

    &:before {
      content: "\e86c";
    }
  }

  &.warning {
    border-left-color: #e27b41;
    background-color: #faeae0;
    color: #b6531c;

    &:before {
      content: "\e002";
    }
  }

  &.danger {
    border-left-color: #E84F4F;
    background-color: #fce8e8;
    color: #b91818;

    &:before {
      content: "\e000";
    }
  }

  &:before {
    position: absolute;
    left: -15px;
    top: 50%;
    line-height: 1;
    text-align: center;
    @include iconfont;
    font-size: font-size(20px);
    color: #fff;
    content: "\eaae";
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}


/**
 * Gallery
 */
.ce_gallery {
  ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-left: -#{$gutter-default};

    .-centered& {
      align-items: center;
      justify-content: center;
    }

    .-flex-inline& {
      display: inline-flex;
    }

    .-valign-center& {
      align-items: center;
    }

    .-variable-grid& {
      margin-left: 0;
      align-items: stretch;
      flex-wrap: nowrap;

      > li {
        margin-left: 0;
        flex-grow: 1;
        background-color: $color-bg-lightgrey;
        height: 25vw;
        max-height: 600px;
      }

      @for $i from 1 through 12 {
        &.cols_#{$i} > li {
          flex-basis: auto;
        }
      }

      figure {
        display: inline;
      }
      img {
        max-height: 600px;
        height: 25vw;
        object-fit: cover;
        max-width: 100%;
        min-width: 100%;
        vertical-align: bottom;
      }
    }

    :not(.-variable-grid)& {

      & > li {
        flex: 0;
        max-width: 100%;
        min-width: 0;
        margin-top: $gutter-default;
        margin-left: $gutter-default;

        &.row_first {
          margin-top: 0;
        }

      }

      @for $i from 1 through 12 {
        &.cols_#{$i} > li {
          flex-basis: 100% / $i - $gutter-default;
        }
      }

      @media screen and (max-width: 900px) {
        $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
        margin-left: -#{$gutter};

        & > li {
          margin-top: $gutter;
          margin-left: $gutter;

          &.row_first {
            margin-top: 0;
          }
        }

        @for $i from 1 through 12 {
          &.cols_#{$i} > li {
            flex-basis: 100% / $i - $gutter;
          }
        }
      }

      @media screen and (max-width: 599px) {
        $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
        margin-left: -#{$gutter};

        & > li {
          margin-top: $gutter;
          margin-left: $gutter;

          &.row_first {
            margin-top: $gutter;
          }

          &:first-child {
            margin-top: 0;
          }
        }

        @for $i from 1 through 12 {
          &.cols_#{$i} > li {
            flex-basis: 100% - $gutter;
          }
        }
      }
    }
  }
}

.ce_form {
  position: relative;
  //padding: 0 12.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  @include for-tablet {
    padding: 6.25%;
  }
  @include for-mobile {
    padding: 0;
  }
}

p.info {
  font-size: font-size(12px);
  text-transform: uppercase;
  color: $color-text-info;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-weight: 600;
}

.modal-content {
  display: none;
}

@-webkit-keyframes swiperNextAnimation {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  50% {
    opacity: .5;
    @include transform(scale(0.75));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) scale(1));
  }
}
@keyframes swiperNextAnimation {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  50% {
    opacity: .5;
    @include transform(scale(0.75));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) scale(1));
  }
}
@-webkit-keyframes swiperPrevAnimation {
  0% {
    opacity: 0;
    @include transform(translateX(0));
  }
  45% {
    opacity: .7;
    @include transform(scale(0.75));
  }
  90% {
    opacity: 0;
    @include transform(scale(0.75));
  }
  100% {
    opacity: 0;
    @include transform(translateX(0) scale(1));
  }
}
@keyframes swiperPrevAnimation {
  0% {
    opacity: 0;
    @include transform(translateX(0));
  }
  45% {
    opacity: .7;
    @include transform(scale(0.75));
  }
  90% {
    opacity: 0;
    @include transform(scale(0.75));
  }
  100% {
    opacity: 0;
    @include transform(translateX(0) scale(1));
  }
}

@keyframes underlineAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/**
 * Text Positioning
 */

@mixin text-position-wrapper($horizontal: center, $vertical: middle) {
  display: flex;
  align-items: center;

  @if $horizontal == center {
    justify-content: center;
  } @else if $horizontal == left {
    justify-content: flex-start;
  } @else if $horizontal == right {
    justify-content: flex-end;
  } @else if $horizontal == centerright {
    justify-content: center;
  } @else if $horizontal == centerleft {
    justify-content: center;
  }

  > * {
    max-width: 100%;
    //display: block;

    @if $vertical == middle  {
      align-self: center;
    } @else if $vertical == top {
      align-self: flex-start;
    } @else if $vertical == bottomtop {
      align-self: flex-start;
      //@include transform(translateY(100%));
      padding-top: 1.5rem;
    } @else if $vertical == topmiddle {
      align-self: center;
      padding-bottom: 1.5rem;
      @include transform(translateY(-100%));
    } @else if $vertical == bottommiddle {
      align-self: center;
      padding-top: 1.5rem;
      @include transform(translateY(100%));
    } @else if $vertical == topbottom {
      align-self: flex-end;
      padding-bottom: 1.5rem;
      //@include transform(translateY(-100%));
    } @else if $vertical == bottom {
      align-self: flex-end;
    }

    @if $horizontal == centerright {
      @if $vertical == topmiddle {
        @include transform(translate(100%,-100%));
      } @elseif $vertical == bottommiddle {
        @include transform(translate(100%,100%));
      } @else {
        @include transform(translateX(100%));
      }
    } @else if $horizontal == centerleft {
      @if $vertical == topmiddle or $vertical == topbottom {
        @include transform(translate(-100%,-100%));
      } @elseif $vertical == bottommiddle or $vertical == bottomtop {
        @include transform(translate(-100%,100%));
      } @else {
        @include transform(translateX(-100%));
      }
    }
  }

  @include for-tablet {
    > * {
      @if $horizontal == centerright {
        @if $vertical == topmiddle {
          @include transform(translate(30vw,-100%));
        } @elseif $vertical == bottommiddle {
          @include transform(translate(30vw,100%));
        } @else {
          @include transform(translateX(30vw));
        }
        margin-left: -25vw;
      } @else if $horizontal == centerleft {
        @if $vertical == topmiddle or $vertical == topbottom {
          @include transform(translate(-30vw,-100%));
        } @elseif $vertical == bottommiddle or $vertical == bottomtop {
          @include transform(translate(-30vw,100%));
        } @else {
          @include transform(translateX(-30vw));
        }
        margin-right: -25vw;
      }
    }
  }

  @include for-max-size(1230px) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  @include for-max-size(399px)
  {
    justify-content: center;
    > * {
      @if $vertical == bottomtop {
        @include transform(translateY(100%));
      } @else if $vertical == topmiddle {
        @include transform(translateY(-100%));
      } @else if $vertical == bottommiddle {
        @include transform(translateY(100%));
      } @else if $vertical == topbottom {
        @include transform(translateY(-100%));
      } @else {
        @include transform(none);
      }
      margin: 0;
    }
  }
}

/**
 * Custom Formats
 */

.emphasised {
  font-size: 1.125em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: $font-family-alternate;
  letter-spacing: 0.05em;
  color: $color-bg-secondary;
}

.color-default {
  color: $color-text;
}
.color-platin {
  color: $color-bg-secondary;
}
.color-brown {
  color: $color-bg-primary;
}
.color-white {
  color: $color-text-invert;
}

/**
 * EYE-CATCHER
 */

.eye-catcher {
  background-color: $color-bg-secondary;
  color: $color-text-invert;
  padding: 15px;
  @include font-alt;
  line-height: 1.2;
  font-size: font-size(24px);

  &.floating {
    @include box-shadow(2px 2px 5px 0 rgba(0,0,0,0.7))
  }

  &.round {
    @include aspect-ratio(1,1,true);
    @include border-radius(9999em);
    border: 6px $color-text-invert solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &[class*="right middle positioned"] {
    position: absolute;
    right: 0;
    top: 50%;
    @include transform(translateY(-50%));
  }

  .content {
    span {
      font-size: 80%;
    }
  }

}