/*==========================================================================
  News detail page
  ========================================================================== */

.news-detail
  @extend .page

  .main
    .content
      h1
        margin-bottom: 0

      h2
        font-size: 1.4rem
        margin-top: 30px
        margin-bottom: 5px

      .date
        display: inline-block
        font-size: 0.9rem
        color: $blue
        margin: 10px 0 50px

  .image-and-other-news
    position: relative
    z-index: 3
    right: column(-1, 24)
    width: column(9, 24)
    vertical-align: top
    padding-top: 60px
    overflow: visible

    figure
      position: relative
      width: 100%
      padding-bottom: 75%
      background-color: $darkBlue
      [class^="vso"] &
        background-color: $turquoise

      // Image
      .image
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0
        z-index: 1
        transition: opacity 0.4s

        &.active
          opacity: 1
          z-index: 2

        // Separate span for different image size
        span
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-size: cover
          background-position: center

          &.small
            display: none

      .image-slider-nav
        position: absolute
        right: 0
        bottom: 0
        z-index: 5
        width: column(1, 6)
        +flex(space-between, center)
        background-color: $green

        .nav-button
          +flex(center, center)
          height: 50px
          width: 50%
          background-color: transparent
          transition: background-color 0.3s
          cursor: pointer

          &:after
            content: ''
            position: relative
            top: 2px
            +arrowWhite
            display: inline-block
            opacity: 1

          &.previous
            &:after
              transform: rotate(180deg)

          &:hover
            background-color: $darkGreen

  &[class^="vso"]
    .main
      .content
        .date
          color: $turquoise

    .image-and-other-news
      figure
        background-color: $turquoise