@include pageflow-page-type(text_page);

$nav-bar-margin: 85px;

$inverted-background-color: black;

@mixin pageflow-text-page-block-image {
  @include wide_desktop {
    width: 42%;
  }
  @include narrow_desktop {
    display: block;
    position: relative;
    top: 0 !important;
    width: auto;
    margin: 0 0 1em 0;
    padding: 0;
    /*padding-right: 20px; */
    float: none;
    max-width: 100%;
    @content;
  }
}

.text_page {
  .page_background_asset {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.page .text_page, .js .page .text_page, .js .page:first-child .text_page, .page:first-child .text_page {
  h3 {
    font-size: 1em;
  }

  .page_background {

    .fixed_header_area {
      position: absolute;
      width: 100%;
      .page_header_wrapper {
        padding: 200px 12% 0% 8%;
        @include mobile {
          padding: 85px 12% 0% 8%;
        }

        .page_header {

          h3 {
            margin: 0;
          }
        }
      }
    }
  }

  .scroller {
    > div {
      padding: 0;
      position: relative;

      width: auto;

      .contentInnerWrapper {
        position: relative;
        color: black;

        .content_background_layer {
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          content: "";
          display: block;
          background-color: white;
          z-index: -1;
        }

        .page_header {
          position: absolute;
          bottom: 100%;
          width: 100%;
          color: white;
          display: none;

          h3 {
            text-align: center;
            padding: 2em 0;
            margin: 0;
            span {
              margin-right: auto;
              margin-left: auto;
            }

            .subtitle {
              margin-bottom: 0em;
            }

            padding-right: $nav-bar-margin;

            @include pad_portrait {
              padding-right: 0;
            }

          }

          .header_background_layer {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: black;
            opacity: 1;
            z-index: -1;
          }
        }

        .page_text > * {
          margin: 0 auto;

          @include phone {
            margin: 0;
          }
        }

        .page_text {
          max-width: 500px;
          margin: auto;
          min-height: 300px;
          padding: 6em 0 12em 0;
          box-sizing: border-box;

          @include phone {
            max-width: 84%;
          }

          @include pad_portrait {
            padding-right: 0;
          }

          .page_sub_header {
            width: 100%;
          }

          @include pad_portrait {
            padding-right: 0;
          }

          .inline_image {
            max-width: 380px;
            height: auto;
            background-size: cover;
            background-position: center;
            float: right;
            position: relative;
            display: block;
            margin-left: 20px;
            margin-top: 0;
            margin-bottom: 20px;
            margin-right: -70px;
            pointer-events: all;
            cursor: default;
            text-decoration: none;

            &.allow_fullscreen {
              cursor: pointer;
            }

            padding: 0;

            &.no_image_assigned {
              display: none !important;
            }

            @include phone {
              float: none;
              width: 100%;
              max-width: 500px;
              margin: 0 0 1em 0;
            }

            .default-image {
              height: 196px;
              background: #efefef;
            }
            img {
              width: 100%;
              height: auto;
              display: block;
              border: 0;
              outline: 0;
            }
            div {
              width: auto;
            }

            &:before, &:after {
              display: none;
            }
            div.bigscreen_toggler {
              width: 30px;
              height: 31px;
              background-image: image-url('pageflow/text_page/fs_close_sprite.png');
              background-position: 0 0;
              background-repeat: no-repeat;
              position: absolute;
              top: 18px;
              right: 18px;
              text-indent: -4000px;
              opacity: 0;
              cursor: pointer;
              display: none;

              @include transition(opacity 0.5s ease);

              .has_mobile_platform & {
                opacity: 1;
              }

            }

            &.allow_fullscreen {
              div.bigscreen_toggler {
                display: block;
              }

              &:hover div.bigscreen_toggler {
                opacity: 1;
              }
            }
          }

          .paragraph {
            width: 100%;
          }
        }
      }
    }

    &.inline_text_position_left {
      > div .contentInnerWrapper .page_text {
        margin-left: 8%;
        padding-right: 0;

        .inline_image {
          float: none;
          position: absolute;
          right: 0;
          width: 35%;
          margin-right: 8%;
          max-width: 42%;

          @include pageflow-text-page-block-image;
        }
      }
    }

    &.inline_text_position_right {
      > div .contentInnerWrapper .page_text {
        margin-right: 12%;
        padding-right: 0;

        .inline_image {
          float: none;
          position: absolute;
          left: 0;
          width: 35%;
          margin-right: auto;
          margin-left: 8%;
          max-width: 42%;

          @include pageflow-text-page-block-image;
        }
      }
    }
  }
}

.text_position_right.page .text_page {
  h3 .title,
  h3 .subtitle,
  h3 .tagline {
    max-width: 500px;
  }
}

.text_position_center, .text_position_right .text_position_center {
  .text_page {
    .shadow {
      display: none !important;
    }
    .fixed_header_area {
      display: none !important;
    }
    .contentInnerWrapper .page_header {
      display: block !important;
      max-width: initial;
      margin-left: initial;
    }
  }
}

.inline_text_position_center {
  .inline_image {
    float: right;
    margin-right: -80px;
    margin-left: 30px;

    @include phone {
      float: none;
      width: 100%;
      margin: 0 0 1em 0;
    }
  }
}

.page .text_page, .js .page .text_page, .js .page:first-child .text_page, .page:first-child .text_page {
  &.content_and_background.sticky_inline_image .inline_text_position_center.scroller .content_wrapper {
    .inline_image {
      position: absolute;
      display: inline-block;
      left: 50%;
      width: 35%;
      max-width: 500px;
      margin: 0 0 0 50px;
      padding: 0 0 2em 0;

      @include narrow_desktop {
        display: block;
        position: static;
        left: auto;
        width: auto;
        max-width: auto;
        margin: 0 0 1em 0;
        padding: 0;
        float: none;
      }
    }

    .page_text {
      @media screen and (min-width: 1101px) {
        max-width: 1000px;
        width: 84%;

        .page_sub_header,
        .paragraph {
          margin: 0;
          max-width: 500px;
        }

        @include narrow_desktop {
          width: 500px;
        }
      }
    }
  }
}

.invert {

  .contentInnerWrapper {

    .page_header {
      border-bottom: 1px solid rgb(216, 216, 216);

      h3 {
        color: black;
      }
    }
  }

  .header_background_layer {
    background-color: white !important;
  }
}

.page .text_page, .js .page .text_page {
  .scroller {
    > div {
      .page_text {
        a {
          color: black;
        }
      }
    }
  }
  &.invert_text .scroller {
    > div {
      .contentInnerWrapper {
        color: white;

        .content_background_layer {
          background-color: black;
        }
      }

      .page_text {
        a {
          color: white;
        }
      }
    }
  }
}

.inline_image.out-of-scroller {
  width: 260px;
  height: 260px;
  background-size: cover;
  background-position: center;
  margin-left: 30px;
  margin-top: 0;
  margin-bottom: 30px;
  margin-right: -80px;
  display: none;
  position: fixed;
  right: 10%;
  top: 50%;
  z-index: 1;
}

.narrow_background {
  .content_background_layer, .header_background_layer {
    width: 800px !important;
    left: 50% !important;
    margin-left: -400px;
  }
  .contentInnerWrapper .page_text .inline_image {
    margin-right: 0 !important;
  }

  &.text_position_right {
    .contentInnerWrapper .page_text .inline_image {
      margin-left: 0 !important;
    }
  }
}

.transparent_background {
  .content_background-layer, .header_background-layer {
    opacity: 0.9 !important;
  }
}

.slideshow section.fade[data-template="text_page"] {

  .black_layer {
    display: none;
  }
  .page_background {
    background-color: black;
    -webkit-backface-visibility: hidden;
    opacity: 1;
  }

  &.invert .page_background {
    background-color: white;
  }

  &.active .content_and_background {
    @include transition (opacity 1s ease);
  }

  &.active.animate-in-forwards .content_and_background {
    opacity: 1;
  }

  &.animate-in-forwards .content_and_background {
    opacity: 0;
  }
  &.animate-out-forwards .content_and_background {
    opacity: 1;
  }
  &.animate-in-backwards .content_and_background {
    opacity: 0;
  }
  &.animate-out-backwards .content_and_background {
    opacity: 1;
  }

  &.active .content_and_background {
    opacity: 1;
  }

  &.active.animate-in-forwards .page_background, &.active.animate-in-backwards .page_background {
    opacity: 1;
  }

  &.animate-in-forwards .page_background {
    opacity: 0;
  }
  &.animate-out-forwards .page_background {
    opacity: 1;
  }
  &.animate-in-backwards .page_background {
    opacity: 0;
  }
  &.animate-out-backwards .page_background {
    opacity: 1;
  }

  div.content {
    @include transition(1s ease);
    -webkit-backface-visibility: hidden;
    @include transform(translate3d(0, 0, 0));
  }

  &.active.animate-in-forwards div.content {
    opacity: 1;
    pointer-events: none;
    @include transform(translate3d(0, 0, 0));
  }

  &.animate-in-forwards {
    z-index: 2;

    div.content {
      pointer-events: none;
      opacity: 1;
      @include transform(translate3d(0, 0, 0));
    }
  }
  &.animate-out-forwards {
    div.content {
      opacity: 1;
      pointer-events: none;
      @include transform(translate3d(0, 0, 0));
    }
  }
  &.animate-in-backwards {
    z-index: 2;

    .content {
      opacity: 1;
      pointer-events: none;
      @include transform(translate3d(0, 0, 0));
    }
  }
  &.animate-out-backwards {
    .content {
      opacity: 1;
      pointer-events: none;
      @include transform(translate3d(0, 0, 0));
    }
  }
}

.slideshow {
  .text_page .paragraph,
  .page_sub_header span,
  .inline_image_text,
  .fixed_header_area .page_header_wrapper {
    @include transition(0.5s ease);
  }

  .hidden_by_overlay .text_page {
    .content {
      opacity: 1;

      .paragraph,
      .page_sub_header span,
      .inline_image_text {
        opacity: 0;
      }
    }

    .fixed_header_area .page_header_wrapper {
      opacity: 0;
    }
  }
}

section.hide_title {
  .fixed_header_area {
    display: none;
    height: 0;
  }
  .contentInnerWrapper .page_header {
    border: 0;
  }
}

.hideText {
  .text_page .shadow {
    opacity: 0 !important;
    @include transition(0.8s ease !important);
    visibility: hidden;
  }

  .text_page .fixed_header_area .page_header_wrapper {
    opacity: 0;
  }

  .text_page .content .content_wrapper {
    @include transform(none);
  }
}

.image_fullscreen_view {
  position: absolute;
  height: 100%;
  width: 100%;
  color: black;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.95);
  text-align: center;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;

  .bigScreen & {
    display: block;
  }

  .image_fullscreen_wrapper {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    cursor: pointer;

    .image_fullscreen_inner_wrapper {
      position: relative;
      display: inline-block;
      height: 100%;

      @include desktop {
        margin-right: 85px;
      }
      @include pad_portrait {
        margin-right: 0;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        position: relative;
        top: 50%;
        @include transform(translate(0, -50%));
      }
    }

    .inline_image_text {
      position: absolute;
      bottom: 0;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
    }
  }
  .invert_text & {
    background-color: black;
    background-color: rgba(0, 0, 0, 0.95);
  }
}

.js .text_page .close_button, .js .invert .text_page .close_button {
  @include mobile {
    display: none;
  }

  @include pad_portrait {
    display: none;
  }
}

.js .text_page .close_button .label {
  color: #2b2b2b;
  text-shadow: 1px 1px 4px #fff;
}

.js .text_page.invert_text .close_button .label {
  color: #FFFEFE;
  text-shadow: 1px 1px 4px #2b2b2b;
}