.hash-indicator {
  visibility: hidden;
  position: absolute;
  margin-top: -61px;
}

.section-wrapper {
  margin-top: 6%;
  overflow: hidden;
}
@media #{$gl-md} {
  .section-wrapper {
    margin-top: $container-padding;
  }
}

.page-template-sections-blue-line .section {
  background: #fff;
  overflow: hidden;
}
.section {
  position: relative;
  padding: 0 0 4% 0;
  z-index: 9;

  &#section-1 {
    padding-bottom: 7%;
  }

  .section-title {
    padding-bottom: 3%;

    em, strong {
      br {
        display: none;
      }
    }

    &.on-top {
      padding-bottom: 0.5rem;
    }
  }

  .indent .section-title {
    padding-bottom: 0;
  }

  &.blue-line {
    z-index: 8;
  }

  .inner-content .section-title {
    margin-bottom: 0;
  }

  .section-inner {
    overflow: hidden;
    position: relative;
  }

  .side-by-side {
    position: relative;
    display: flex;
    justify-content: center;

    .left, .right {
      width: 50%;
      display: flex;

      .image-wrap {
        overflow: visible;
        text-align: center;

        video {
          max-width: 100% !important;
        }
      }

      &.flush .image-wrap {
        img, video {
          display: block;
          margin: auto;
          max-width: 960px !important;
        }
      }
    }

    &.sixty-five .right .inner-content {
      padding-left: 160px;
    }

    .right img {
      margin-left: 4%;
    }

    .inner-content {
      width: 100%;
      max-width: 549 + $container-padding;
      margin: 0 0 0 auto;
      box-sizing: border-box;
    }

    .flush {
      &.left .image-wrap img,
      &.left .image-wrap video {
        float: right;
      }
      &.right .image-wrap img,
      &.right .image-wrap video {
        float: left;
      }
    }

    .left {
      .inner-content {
        margin: 0 0 0 auto;
        padding-right: 30px;
      }
    }
    .right {
      .inner-content {
        margin: 0 auto 0 0;
        padding-left: 30px;
      }
    }

    .flush {
      .inner-content {
        max-width: none;
      }
    }
  }

  .image-wrap {
    position: relative;

    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }

  .flush-right {
    position: absolute;
    right: 0;
    top: 0;
  }

  .section-content {
    position: relative;
  }

  &.first-blue.blue-line {
    .feature-list.section-content:before {
      top: 15px;
    }
  }
  // blue line
  &.blue-line .section-content {
    position: relative;

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="color"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input[list],
    input[type="file"],
    select,
    textarea {
      border-color: $medium-blue-border;
    }

    &:before {
      content: '';
      width: 1px;
      position: absolute;
      left: -43px;
      height: 1000000px;
      background: $medium-blue-border;
      display: block;
      top: -50000px;
    }

    h2.no-line {
      padding-bottom: 4.5rem;
      background: #fff;
      margin: -400px 0 0 -99999px;
      padding-left: 99999px;
      padding-top: 400px;
      z-index: 9;
      position: relative;
    }
  }

  .line-attach {
    position: relative;
    z-index: 9;
    margin-top: -15px;

    &:after {
      content: '';
      width: 25px;
      position: absolute;
      left: -35px;
      height: 1px;
      background: $medium-blue-border;
      display: block;
      top: 15px;
    }
  }

  &.blue-line .right .section-content {
    &:before {
      display: none;
    }
  }
}

@media #{$gl-md}{
  .section .side-by-side {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    padding: 0 20px;

    .left, .right {
      width: 100%;

      .inner-content {
        max-width: none;
        padding: 0;
      }

      img {
        float: none;
        display: block;
        margin: auto auto 40px;
      }
    }

    .left {
      img.img-flush {
        margin-right: -16%;
      }
    }
    .right {
      img.img-flush {
        margin-left: -16%;
      }
    }
  }
}

@media #{$gl-md-min} {
  .section .indent {
    margin-left: 18%;
  }
  .section .section-title {
    &.on-top {
      max-width: none;
    }
  }
  .section {
    .section-title {
      em, strong {
        br {
          display: block;
        }
      }
    }
  }
}


@media #{$gl-md-min} {
  .section .side-by-side {
    .left .image-wrap img,
    .left .image-wrap video {
      float: right;
    }
  }
}

@media #{$gl-lg} {
  .section .side-by-side .inner-content {
    padding: 0 $container-padding;
  }
}

@media #{$gl-sm} {
  .section {
    .side-by-side {
      .left, .right {
        &.flush {
          .image-wrap {
            img, video {
              max-width: 100% !important;
            }
          }
        }
      }
    }
  }
}

.section-text-content:after {
  content: "";
  display: table;
  clear: both;
}