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

  .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-arrow {
    z-index: 2;
    background-color: $color-bg-tertiary;
    color: $color-text-invert;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 60%;
    right: calc(50% + 250px);

    @include for-max-size(1200px) {
      right: auto;
      width: 250px;
    }

    &: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%;
    }

    + .embed-map {
      right: 0;
      left: 40%;
      left: calc(50% - 250px);
      width: auto;

      @include for-max-size(1200px) {
        left: 0;
        padding-left: 250px;

        iframe {
          left: 250px;
          right: 0;
          width: calc(100% - 250px);
        }
      }
    }
  }
  .embed-map {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

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

  .embed-arrow-inside {
    @include aspect-ratio(2,0.75,true);
    @include centered-1200;
    //z-index: 1;
    display: flex;
    align-items: center;

    .embed-arrow-text-holder {
      display: inline-flex;
      justify-content: center;
      width: 50%;
      padding-right: 250px;
      @include box-sizing(border-box);

      @include for-max-size(1200px) {
        width: 235px;
        padding-right: 0;
      }
    }
    .embed-arrow-text {
      z-index: 2;
      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;
        }
      }
    }
  }

  @include for-mobile {
    display: flex;
    flex-direction: column;
    .embed-arrow {
      display: none;

      + .embed-map {
        order: 2;
        position: relative;
        padding: 0;
        @include aspect-ratio(2,1);

        iframe {
          width: 100%;
          left: 0;
        }
      }
    }
    .embed-arrow-inside {
      width: 100%;
      justify-content: center;
      order: 1;
      background: $color-bg-tertiary;

      .embed-arrow-text-holder {
        padding: 50px 0;
        &,
        h1,h2,h3,h4,h5,h6 {
          text-align: center;
        }
      }
    }
  }
}

/**
 * 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 {
  ul,ol {
    @extend .list;
  }

  a:not(.button) {
    &[target="_blank"]:not(.-ico-dl) {
      &:before {
        content: '';
        width: 1em;
        height: 1em;
        display: inline-block;
        position: relative;
        background: $color-link;
        -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
        mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        vertical-align: top;
        margin-right: 10px;
        @include transition(all 0.2s ease);
      }

      &:hover {
        &:before {
          background: mix($color-link,#000,80%);
          @include transform(translateX(5px));
        }
      }
    }
    /*&.-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 {
  @include box;
  line-height: 35px;
  display: flex;
  p {
    font-size: font-size(14px);
    float: left;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 auto 0 0;
  }

  ul {
    text-align: center;
    position: relative;
    padding: 0;
    margin: 0 0 0 auto;
  }

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

    a {
      &:hover {
        border-bottom-color: $color-bg-secondary;
        color: mix($color-link,#000,60%);
      }
    }

    a,strong {
      font-weight: 400;
      display: block;
      min-width: 1.5em;
      height: 2em;
      line-height: 2em;
      padding: 0 0.125em;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border-bottom: 2px transparent solid;
      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
      {
        border-bottom-color: $color-bg-secondary;
        color: $color-text;
        font-weight: 600;
      }

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

      &.previous {
        &:before {
          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
        }
      }

      &.last {
        &:before {
          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;
        }
      }

      &.first {
        &:before {
          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%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};

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