/* START hero
 * ==================================== */

.internal-page
  .hero
    &.has-hero-image
      position: relative

      &::before
        background: #000
        content: ''
        height: 100%
        left: 0
        opacity: .9
        position: absolute
        width: 100%
        z-index: 1

    .hero-body
      position: relative
      z-index: 2

      .container
        .eyebrow
          color: $primary
          font-size: 18px
          letter-spacing: 2px
          text-transform: uppercase

        .title
          font-size: 60px
          font-weight: 300

        .subtitle
          font-size: 22px
    /* &.has-hero-image */
  /* .internal page hero */

/* ====================================
 * END hero */

/* START content area
 * ==================================== */

/* START papers and publications page */

.publications
  .citation
    align-items: flex-start
    border-bottom: 1px solid lighten($gray, 20%)
    display: flex

    &:last-child
      border-bottom: 0
      margin-bottom: 20px

    .citation-text
      h4
        font-size: 22px
        margin-bottom: 5px
      p
        color: $grey-darker
        margin-bottom: 7px
        font-size: 14px

      .citation-numbers
        color: #7a7a7a
        font-size: 14px

    .citation-link-icon
      color: $primary
      font-size: .7em
      margin-left: 20px
      margin-top: 8px
  /* .citation */
/* .publications */

/* START demos and examples page */

.demos
  width: 100%
  border-bottom: 1px solid lighten($gray, 20%)
  padding-bottom: 35px
  margin-top: 20px

  h4
    color: #363636
    font-size: 30px
    margin-bottom: 10px

  p
    font-size: 18px
    padding-right: 20px

    .icon-border
      border: 1px solid lighten($gray, 10%)
      font-size: 20px
      margin-left: 5px
      margin-right: 5px
      padding: 2px

  img
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2), 0 2px 5px rgba(0, 0, 0, .2)

  .demo-buttons
    background-color: $secondary
    border-color: transparent
    color: #fff
    margin-top: 20px
    transition: background .15s ease-in-out, color .15s ease-in-out

    &:hover
      background: #fff
      border-color: $secondary
      color: #363636
/* .demos */

/* START success stories list */

.success-stories
  .story
    border-bottom: 1px solid lighten($gray, 20%)
    padding: 20px 0

    &:last-of-type
      border-bottom: 0

    .story-image
      padding: 20px 0

      img
        box-shadow: 0 5px 20px rgba(0, 0, 0, .2), 0 2px 5px rgba(0, 0, 0, .2)

/* START success stories page */

.success-story
  .story-content
    padding-bottom: 25px

  .story-references
    padding-top: 25px

    p
      font-size: 13px

/* START system overview page */
.system-overview
  background: #f7f7f7

.system-overview-page
  padding-bottom: 50px
  padding-top: 20px

  code
    background-color: #ededed

// START documentation

.documentation
  .page-content
    & > .column
      align-items: flex-start
      display: flex

      .contents
        flex: 1

        li
          font-size: 13px !important

      .content
        flex: 3
        padding-left: 50px

    .doc-main-section
      border-bottom: 1px solid lighten($gray, 30%)
      margin: 0 !important
      padding: 30px 0 !important

    .doc-sub-section
      border-bottom: 1px solid lighten($gray, 30%)
      border-left: 6px solid lighten($gray, 30%)
      padding: 30px

      &.columns
        margin: 0 !important

      .doc-image
        font-size: 11px
        font-style: italic
        line-height: 1.25em

/* ====================================
 * END content area */

@media screen and (max-width: 768px)
  .documentation
    .page-content
      & > .column
        display: block

        .content
          padding-left: 0
