.pay-off
  margin: 90px auto
  text-align: center
  width: 95%
  +font-default(32px, 40px)
  strong
    display: block


.block
  display: inline-block
  width: 250px
  border: solid lightgrey 1px
  margin: 20px
  padding: 10px

.pages-header
  height: 120px
  position: fixed
  background-color: transparent
  +transition(all 0.3s)
  .content-container
    height: 120px
    .link
      opacity: 1 !important
    .page-link
      order: 0
      &:before
        content: ''
        +arrowWhite
        +transform(rotate(180deg))
        display: inline-block
        margin-right: 20px
      float: left !important
  &.scrolled
    background-color: $darkBlue
.news-header
  background-color: $darkBlue
  position: fixed
  webkit-box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)
  -moz-box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)
  box-shadow: -1px 8px 15px -11px rgba(0,0,0,0.75)

  .content-container
    &:after
      display: none


.pages.vision-row
  .background
    height: 800px !important
    canvas
      height: 800px !important
  .vision
    padding-top: 240px
    padding-bottom: 100px
    .vision-text
      width: 80%
      margin-left: 10%

      h1
        +font-semi-bold(24px)
        color: white
        margin-bottom: 65px

      p
        color: $almostWhite
        font-size: 16px !important
        line-height: 22px !important
.all-news
  padding-top: 80px
  margin-top: 120px
  .background
    background-color: $lightGray
    left: auto !important
    right: 0

.all-news.single-news
  padding-bottom: 80px
  .content-container
    +flex(space-between, flex-start)
  .news-block
    padding-bottom: 80px
    p
      a
        text-decoration: underline
        font-style: italic

    h1
      +font-semi-bold(28px, 36px)
    .date
      +font-light(16px, 22px)
      font-size: 16px !important
      line-height: 22px !important
      color: $lightBlue
      margin-top: 3px
    .link a
      +font-bold(16px, 22px)
      font-size: 16px !important
      line-height: 22px !important
      color: $gradient2
      text-decoration: none
      font-style: normal
      &:before
        content: ''
        +arrowPink
        display: inline-block
        margin-right: 8px
        +transform(rotate(180deg))

.news-lists
  .content-container
    padding: 60px 0 120px
    position: relative
    h2
      margin-bottom: 50px
  ul
    width:  $contentGrid*5.5
    display: inline-block
    list-style: none
    padding: 2px 0 0 0
    li
      margin-top: 45px
      border-bottom: 1px solid rgba(123, 134, 174, 0.2)
      &:first-child
        margin-top: 0
      a
        h4
          +font-semi-bold(20px, 26px)
          font-size: 20px !important
          line-height: 26px !important

        .content
          *
            +font-default(16px, 22px)
            font-size: 16px !important
            line-height: 22px !important
            margin-top: 5px
            margin-bottom: 15px

        .link
          +font-bold(16px, 22px)
          font-size: 16px !important
          line-height: 22px !important
          color: $gradient2
          float: left
          &:after
            content: ''
            +arrowPink
            display: inline-block
            margin-left: 8px
            +translate3d(0,0,0)
            +transition(all 0.3s)

        .date
          +font-light(16px, 22px)
          font-size: 16px !important
          line-height: 22px !important
          color: $lightBlue
          float: right

        &:hover
          .link:after
            +translate3d(5px,0,0)
  .right-block
    position: absolute
    right: 10%
    top: 0
    height: 100%
    width: $contentGrid*5.5
    text-align: right
    +flex(flex-end, center)
  .cta-block
    display: inline-block
    width: 80%
    background-color: $navyBlue
    padding: 60px 10px
    text-align: center

    p
      +font-default(32px, 40px)
      color: white
      text-align: center
      margin: 0

    .button
      margin-top: 65px

.news-nav
  max-width: 1440px
  position: relative
  width: 95%
  margin: auto
  padding-bottom: 80px

  .wrapper
    width: $contentGrid*11
    margin-left: $contentGrid*0.5
    padding: 0 $contentGrid
    padding-bottom: 20px
    padding-top: 20px
    +flex(space-between, center)

    .previous-btn, .next-btn
      display: inline-block

    a
      +font-bold(16px, 22px)
      font-size: 16px !important
      line-height: 22px !important
      color: $gradient2
      text-shadow: 2px 2px rgba(123, 134, 174, 0.2)

    .previous-btn
      margin-right: 40px
      a:before
        content: ''
        +arrowPink
        display: inline-block
        +transform(rotate(180deg))
        margin-right: 20px

    .next-btn
      a:after
        content: ''
        +arrowPink
        display: inline-block
        margin-left: 20px

+media-query(1200px)
  .latest-news.all-news
    .news-block
      width: 59%
      padding-right: $contentGrid/2

    .cta-block
      width: 35%
      margin-right: 5%
      margin-left: 5%
      p
        +font-default(28px, 34px)



+media-query(900px)
  .news-lists
    .content-container
      h2
        width: 80%
        margin-left: 10%
    ul
      width: 80%
      margin: auto 10%

    .right-block
      display: none

+media-query(850px)
  .news-nav
    padding-bottom: 20px
    padding-top: 60px
    .wrapper
      a
        color: white
      .previous-btn
        a:before
          +arrowWhite
          display: inline-block

      .next-btn
        a:after
          +arrowWhite
          display: inline-block
  .all-news.single-news .content-container
    display: block
  .latest-news.all-news
    .news-block
      width: $contentGrid*11
      padding-right: $contentGrid/2

    .cta-block
      width: 80%
      max-width: 500px
      margin-right: auto
      margin-left: auto

+media-query(740px)
  .pages.vision-row
    margin-top: 0
  header.pages-header
    display: block

+media-query(500px)
  .pages.vision-row
    .background
      display: block

  .news-lists
    .content-container
      padding-top: 0
      h2
        width: 90%
        margin-left: 5%
    ul
      width: 90%
      margin-left: 5%

  .pages.vision-row.news
    .vision
      .vision-text
        width: 100%
        margin-left: 0

+media-query(450px)
  header.pages-header
    .content-container
      display: block
      padding-top: 20px
      &:after
        display: none
    .link
      float: none
      display: block
      width: 100%
      &.page-link
        margin-bottom: 20px
        float: none !important
      span
        margin-left: 35px