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

/**
  * News page setting
  *
  * 1. Give blue background to seperation different news items.
  *
  */

.newsItem-block
  background: $white
  padding: 25px 25px 25px 25px

  &.blue-bg /* 1 */
    background: $lightBlue

  .content-image
    margin: 25px 0 25px 0
    img
      width: 100%

  .content-description
    margin: 25px 0 25px 0
    align-self: center
    padding: 0 50px 0 50px

    +respond-to-width($smGridBreakpoint)
      padding: 0

    a
      text-decoration: none
      color: $blue
      transition: color 0.4s ease

      &:hover
        color: $darkBlueGreen

    h2
      font-size: 2.4rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 2rem
      font-family: "olivierregular", serif
      color: #5398be
      transition: color 0.4s ease

      &:hover
        color: $darkBlueGreen

    .date
      display: block
      color: #5398be
      font-size: 0.9rem
      font-weight: black()
      margin-bottom: 25px


    p
      padding: 0
      margin: 0
      font-size: 1rem
      +respond-to-width($mdGridBreakpoint)
        font-size: 0.9rem

.newsDetail
  padding: 50px 25px

  h2
    font-size: 2.4rem
    font-family: "olivierregular", serif
    color: #5398be

  .newsDetailContent
    padding: 0 50px 30px 50px

.back-button
  @extend .button-default
  float: right
  +respond-to-width($mdGridBreakpoint)
    float: none
    margin: 20px auto

  position: relative
  display: inline-block
  color: $darkBlueGreen
  border-color: $darkBlueGreen

  &:hover
    background:
      color: $darkBlueGreen
    color: $white