.news-detail-container
  margin-top: -700px
  position: relative
  min-height: 800px
  .background
    background-color: $blue
    position: absolute
    z-index: -1
    height: 100%
    width: 100%
    top: 0
    left: 0
  .placeholder
    width: 95%
    max-width: 1440px
    margin: auto
    .return-row
      h2
        display: inline-block
        margin:  30px 0  30px calc(100% / 12 * 4 - 5px)

        a
          +flex(flex-start, center)
          &:before
            content: ''
            background-image: url("/images/structure/returnHome.png")
            background-size: contain
            background-repeat: no-repeat
            height: 40px
            width: 40px
            display: inline-block
            margin-right: 20px
          +font-bold(26px, 32px)
          color: white

  .blue-header
    background-color: $blue
    height: 100px
    width: 100%
    box-sizing: border-box
    padding: 20px 12.5%
    +flex(space-between, center)
    h4, p
      margin: 0

    h4
      +font-bold(18px, 21px)
      color: white

  .recent-news
    width: calc(100% / 12 * 3)
    background-color: white
    display: inline-block
    vertical-align: top

    ul
      padding: 80px 12.5%
      list-style: none

      li
        border-bottom: 2px solid $lighterGray
        padding:  0 0 12px
        margin-bottom: 30px
        p
          margin: 0
          +font-default()
          line-height: 22px !important
          &.date
            color: $orange
            text-transform: lowercase
            font-size: 14px !important
          &.title
            color: $gray
            font-size: 15px !important

        &.active
          border-bottom: 1px solid $blue
          p, p.date, p.title
            color: $blue
  .news-detail
    width: calc(100% / 12 * 8)
    margin-left: calc(100% / 12 - 5px )
    margin-bottom: -60px
    position: relative
    z-index: 5

    display: inline-block
    vertical-align: top

    &.no-shadow
      &:after
        display: none

    &:after
      content: ''
      background-image: url('/images/structure/shadow.png')
      background-size: contain
      height: 20px
      width: 100%
      position: absolute
      bottom: 40px
      pointer-events: none
      left: 0

    .blue-header
      margin-bottom: 20px
      padding: 20px 60px
      p, p a
        +font-bold()
        color: white
        font-size: 15px !important
        line-height: 21px !important
        &.root
          opacity: 0.7
        &.date
          float: right
          opacity: 0.7
        span
          background-image: url("/images/structure/arrowRight.png")
          background-size: contain
          background-repeat: no-repeat
          display: inline-block
          height: 10px
          margin: 0 12px
          width: 8px

    .info
      margin-top: 20px
      background-color: white
      padding: 70px calc(100% / 8) 0
      h1
        +font-bold(26px)
        color: $blue
        margin: 0 0 45px

    .resource
      position: relative
      height: 60px
      background: white
      p, p a
        +font-default()
        font-size: 14px !important
        line-height: 60px !important
        color: $lightGray

    a.internalLink
      border: 2px solid $blue
      +box-sizing(border-box)
      border-radius: 6px
      +font-bold(18px, 18px)
      color: $blue
      display: inline-block
      padding: 14px 20px
      margin: 0 0 60px
      &:after
        content: ''
        +arrowBlue()
        display: inline-block
        margin-left: -9px
        margin-top: 7px
        position: absolute
        +transform(translate3d( 0,-40px,0))
        opacity: 0
        +transition(all 0.3s)

      span
        +arrowBlue
        display: inline-block
        margin-left: 15px
        position: relative
        +transform(translate3d( 0,0,0))
        opacity: 1
        +transition(all 0.3s)

      &:hover
        &:after
          +transform(translate3d( 0,0,0))
          opacity: 1
        span
          opacity: 0
          +transform(translate3d( 0,40px,0))
      &.readMore
        span
          +transform(translate3d( 0, 0,0) rotate(-90deg))
        &:after
          +transform(translate3d( 0, -40px,0) rotate(-90deg))
        &:hover
          span
            +transform(translate3d( 0,40px,0) rotate(-90deg))
          &:after
            +transform(translate3d( 0,0,0) rotate(-90deg))

  &.news-overview
    min-height: 0
    margin-top: -750px
    padding-bottom: 100px
    .background
      display: none
    .recent-news
      width: 80%
      margin-left: 10%
      ul
        height: 352px
        padding: 40px 12.5%
    .placeholder
      .return-row h2
        margin-left: calc(100% / 12 * 2.5 - 20px)
.nav-posts
  background: $orangeBlock
  overflow: hidden
  position: relative
  min-height: 200px

  .icon-background
    position: absolute
    height: 100%
    width: 100%
    top: 0


    background: url("/images/structure/backgroundOrange.svg") 0 0 no-repeat
    background-size: 100% 150%
    background-position: 50% 50%

  .content-container
    width: 95%
    max-width: 1440px
    margin: auto
    height: 100%
    min-height: 200px
    +flex(space-between, center)

  .previous, .next
    position: relative
    width: calc(100% / 12 * 4)
    min-width: 320px
    padding-bottom: 15px
    margin: 100px 0 65px
    border-bottom: 2px solid rgba(255,255,255, 0.3)
    &.no-border
      border-bottom: none
      margin: auto
    .post-small-list-item
      a
        .inner-content
          width: calc(100% / 4 * 3)
          float: right
        p
          +font-bold(18px, 30px)
          color: white
          margin: 0
        h4
          +font-default(18px, 30px)
          color: white
          min-height: 60px
          margin: 0
        span
          position: absolute
          top: calc(50% - 8px)
          left: 10px
          +arrowWhite
          +transition(all 0.3s)
          +transform(rotate(90deg) translate3d(0,0,0) scale(1.2))
  .previous
    .post-small-list-item
      a
        .inner-content
          float: left 
        span
          left: auto
          right: 10px
          +transform(rotate(-90deg) translate3d(0,0,0) scale(1.2))
    &:hover
      .post-small-list-item a span
        +transform(rotate(-90deg) translate3d(0, 8px,0) scale(1.2))

  .next:hover .post-small-list-item a span
    +transform(rotate(90deg) translate3d(0, 8px,0) scale(1.2))


+media-query(1200px)
  .news-detail-container
    .news-detail
      .blue-header
        display: block
        p.date
          margin-top: 10px
          float: none
          font-weight: 300

+media-query(900px)
  .news-detail-container
    .placeholder
      +flex(flex-start, flex-start)
      +flex-wrap(wrap)
      +flex-direction(row)
      +flex-flow(row wrap)

      .return-row, .news-detail, .recent-news
        width: 80%
        margin-left: auto
        margin-right: auto

      .return-row
        +order(1)
        h2
          margin-left: calc(100% / 8)
      .news-detail
        +order(2)
        .blue-header
          padding-left: calc(100% / 8)

      .recent-news
        +order(3)
        margin-top: 120px
        margin-bottom: -60px
        position: relative
        z-index: 5
        .blue-header
          background-color: $gray

+media-query(740px)
  .nav-posts
    .content-container
      +flex-wrap(wrap)
      +flex-direction(row)
      +flex-flow(row wrap)
      padding: 90px 0
      .previous, .next
        width: 80%
        max-width: 400px
        margin-left: auto
        margin-right: auto
        .post-small-list-item
          a
            .inner-content
              h4
                min-height: 0

+media-query(500px)
  .news-detail-container
    .placeholder
      width: 100%
      .return-row, .news-detail, .recent-news
        width: 100%
      .news-detail
        .blue-header
          height: 120px