.blog-detail
  .back-overview
    a
      +font-default()
      font-size: 15px !important
      line-height: 15px !important
      color: $orange
      &:before
        content: ''
        margin-right: 8px
        +arrowOrange
        +transition(all 0.3s)
        +translate3dRotate(0, 0,0, 180deg)

    &:hover
      a:before
        +translate3dRotate(-5px, 0,0, 180deg)

  h1
    +font-light(32px)
    color: $darkBlue
    max-width: 700px
  h2
    +font-light(24px)
    color: $lightBlue

  .image-container
    width: 100%
    margin: 40px 0 20px
    img
      width: 100%

.blog-placeholder
  margin-top: 40px
  border-top: 1px solid $lighterGray
  padding: 60px 0
  .next, .previous
    width: 45%
    max-width: 300px
    .direction
      +font-default()
      font-size: 15px !important
      line-height: 15px !important
      color: $orange
    h2
      +font-light()
      font-size: 15px !important
      line-height: 18px !important
      color: $darkBlue
    .date
      +font-light()
      font-size: 14px !important
      line-height: 18px !important
      color: $gray

  .next
    float: right
    .direction
      &:after
        content: ''
        margin-left: 8px
        +arrowOrange
        +transition(all 0.3s)
        +translate3d(0, 0,0)
    &:hover
      .direction:after
        +translate3d(5px, 0, 0)
  .previous
    float: left
    .direction
      &:before
        content: ''
        margin-right: 8px
        +arrowOrange
        +transition(all 0.3s)
        +translate3dRotate(0, 0,0, 180deg)
    &:hover
      .direction:before
        +translate3dRotate(-5px, 0,0, 180deg)

+media-query(580px)
  .blog-placeholder
    .next
      margin-bottom: 55px
    .next, .previous
      width: 100%
      float: none
      margin-left: auto
      margin-right: auto