.full-image-block
  height: 100vh
  position: relative
  width: 100%

  .image
    height: 100vh
    background-position: center
    background-size: cover
    position: absolute
    left: 0
    top: 0
    &.large, &.medium
      display: none

  &.light-gray
    background-color: $whitish
  .background
    position: absolute
    height: 100%
    width: 100%
    .gray
      height: calc(100% - 280px)
      width: 100%
      bottom: 0
      left: 0
      background-color: $grayBrownish
      position: absolute
      z-index: -1
  .content-container
    +flex(flex-end, flex-start)
    position: relative
    height: 100vh

  .scroll-button
    width: 120px
    height: 120px
    max-width: 120px
    max-height: 120px
    position: absolute
    right: -120px
    bottom: 0
    background-color: $yellow
    display: block
    transition: all 0.4s
    a
      +flex(center, center)
      height: 100%
      width: 100%
      span
        +arrowWhite
        +transform(rotate(90deg))
        margin-bottom: -6px
        +movingDown90deg
    &:hover
      background-color: darken($yellow, 10%)
      a span
        animation-play-state: running

  .right-content
    width: $contentGrid*5
    margin-right: 0
    height: 100%

    &.home-content
      width: 50%
      margin-right: -$contentGrid
      .text
        height: 343px

    .inner-image
      display: none
      width: 100%
      height: 400px
      background-position: center
      background-size: cover
      img
        width: 100%
    .logo.white
      +flex(center, center)
      height: 280px
      .placeholder
        +flex(center, center)
        +flex-rows
        position: relative
        max-width: 340px
        span
          display: inline-block
          +sprite(0 0, 340px, 64px)
        p
          margin: 0
          +font-light(13px, 16px)
          color: $darkGray
          text-transform: uppercase
          text-align: right
          width: 100%
          margin-top: 20px
          padding-top: 15px
          border-top: 2px solid rgba(0,0,0,0.5)
    .logo.black
      width: 245px
      height: 68px
      background-color: $darkGray
      +flex(center, center)
      span
        display: inline-block
        +sprite(-125px -65px, 154px, 31px)
    .text
      width: $contentGrid*8
      margin: auto
      //height: auto
      height: calc(100vh - 300px)
      +flex(flex-start, center)

      .placeholder
        width: 100%

      h1
        +font-header(24px, 28px)
        color: $turquoise
        margin-bottom: 20px
      p
        color: black
        +font-light(16px, 24px)

        &.link
          margin-top: 25px
          color: $turquoise
          text-transform: uppercase
          +font-default(14px, 16px)
          letter-spacing: 1.4px
          cursor: pointer
          a
            color: $turquoise
            text-transform: uppercase
            +font-default(14px, 16px)
            letter-spacing: 1.4px
            &:after
              display: inline-block
              content: ''
              margin-left: 5px
              +arrowTurquoise
              +translate3d(0,0,0)
              transition: all 0.3s
            &:hover
              &:after
                +translate3d(8px,0,0)

  .latest-post
    width: $contentGrid*6
    position: absolute
    height: 360px
    max-height: 33vh
    bottom: 0
    right: 0
    background-color: $turquoise
    transition: all 0.4s
    a
      +flex(space-between, flex-start)
      height: 100%
      width: 100%

      .text
        +flex(center, center)
        width: 50%
        height: 100%
        .placeholder
          text-align: center
          padding-top: 20px
          p
            letter-spacing: 1.4px
            color: white
            +font-default(15px, 16px)
            text-transform: uppercase
            margin: 0
          h4
            color: white
            +font-default(28px, 34px)
            width: 75%
            margin: 25px auto 20px
          .arrow
            display: inline-block
            +arrowWhite
            +translate3d(0,0,0)
            transition: all 0.3s
      .latest-article-image
        display: block
        height: 100%
        width: 50%
        background-size: cover
        background-position: center
        position: relative
        background-color: $grayBrownish
        &:after
          content: ''
          position: absolute
          width: 100%
          height: 100%
          background-color: $turquoise
          opacity: 0
          transition: all 0.3s
    &:hover
      background-color: darken($turquoise, 5%)
      a
        .latest-article-image:after
          opacity: 0.3
        .text
          .placeholder
            .arrow
              +translate3d(15px,0,0)
  .social-link
    width: $contentGrid*8
    margin: auto
    padding-bottom: 75px
    p
      display: block
      color: $darkerGray
      +font-default(12px, 15px)
      letter-spacing: 2.4px
      text-transform: uppercase

    .icons
      display: block
    a
      margin-right: 10px
      display: inline-block
      span
        +translate3d(0,0,0)
        transition: all 0.25s
        display: inline-block

        &.twitter
          +sprite(0 -152px, 35px, 35px)
        &.linkedin
          +sprite(-36px -152px, 35px, 35px)
        &.facebook
          +sprite(-72px -152px, 35px, 35px)
      &:hover
        span
          +translate3d(0, -3px, 0)
    p.mail
      margin: 0 0 50px
      text-transform: lowercase
      a
        letter-spacing: 0
        +font-header(18px, 21px)
+media-query(2000px)
  .full-image-block .image
    &.xlarge
      display: none
    &.large
      display: block

+media-query(1680px)
  .full-image-block
    .right-content, .right-content.home-content
      width: 41.7%
      margin-right: 0

+media-query(1580px)
  .full-image-block
    .scroll-button
      right: 0 !important
      height: 100px !important
      width: 100px !important
    .latest-post
      right: 100px

+media-query(1300px)
  .full-image-block
    .right-content
      .text
        width: 80%

+media-query(1200px)
  .full-image-block
    .right-content
      .logo.white
        +transform-origin(center)
        +transform(scale(0.85))

    .latest-post
      a
        .text
          .placeholder
            h4
              margin: 15px auto 10px
              font-size: 21px

+media-query-height(950px)
  .full-image-block
    .right-content
      .logo.white
        height: 200px

      .text
        height: calc(100vh - 255px)

      .social-link
        padding-bottom: 30px

    .background
      .gray
        height: calc(100% - 200px)

+media-query-height(850px)
  .full-image-block
    .right-content
      .logo.white
        height: 130px
        .placeholder
          +transform-origin(50% 50%)
          +transform(scale(0.8))

      .text
        width: 80%
        height: calc(100vh - 195px)

      .social-link
        .mail
          display: none

    .background
      .gray
        height: calc(100% - 130px)

+media-query-height(700px)
  .full-image-block
    .latest-post
      a
        .text
          .placeholder
            h4
              margin: 15px auto 10px
              font-size: 21px
    .right-content
      .inner-image
        width: 100%
+media-query-height-or-width(900px, 750px)
  .full-image-block:not(.detail-page)
    padding-top: 60px
    height: auto
    .image.large, .image.xlarge
      display: none
    .background
      display: none
    .content-container
      width: 100%
      height: auto
      display: block
    .right-content
      width: 100%
      &.home-content
        width: 100%
        max-width: 900px
        margin: 0 auto
      .logo.white
        height: 135px
      .logo.black
        display: none
      .inner-image.large
        display: block
      .text, .social-link
        width: 100%
        padding: 50px 10%
        height: auto !important
      .social-link
        padding: 20px 10%
    .latest-post
      height: auto
      right: 0
      position: relative
      width: 100%
      max-width: 900px
      max-height: none
      margin: 0 auto

    .scroll-button
      display: none

+media-query(550px)
  .full-image-block
    .right-content
      .logo.white
        +transform-origin(center)
        +transform(scale(0.7))

    .right-content
      .inner-image
        height: 350px
        &.large
          display: none !important
        &.medium
          display: block
    .latest-post
      height: auto !important
      a
        +flex-rows
        .text
          +order(2)
          width: 100%
          height: 150px
          +flex(flex-start, center)
          padding: 0 10%
          position: relative
          .placeholder
            text-align: left
            padding-top: 0
            p
              font-size: 13px
            h4
              margin: 10px 0 0 0
              font-size: 21px
              line-height: 24px
            .arrow
              position: absolute
              right: 10%
              top: calc(50% - 7.5px)
        .latest-article-image
          +order(1)
          width: 100%
          height: 350px
          position: relative