/*==========================================================================
  CTA Block with picture on homepage
  ========================================================================== */

/**
  * CTA Picture block
  *
  */

.cta-picture-block
  position: relative

  .cta-picture-home
    padding: 0 30px
    width: 100%
    height: 850px
    background:
      image: url('/img/structure/home/airpicture.png')
      size: cover
      repeat: no-repeat
      position: center

    +respond-to-width(1280)
      height: 400px
      background:
        position: bottom

  .cta-picture-sentence
    padding-top: 50px
    color: $white
    text-align: center
    font-size: 1.7rem
    font-family: "Coda Caption", sans-serif
    margin-bottom: 35px
    line-height: 2.5rem

  .cta-picture-button
    @extend .button-default
    color: $white
    border-color: $white

    &:hover
      background:
        color: $white
      color: $blue

  .cta-picture-settings
    position: absolute
    +respond-to-width(1280)
      display: none

  .cta-picture-sleep
    @extend .cta-picture-settings
    top: 18%
    left: 60%


  .cta-picture-play
    @extend .cta-picture-settings
    top: 42%
    left: 34%

  .cta-picture-theater
    @extend .cta-picture-settings
    top: 58%
    left: 25%

  .cta-picture-shop
    @extend .cta-picture-settings
    top: 65%
    left: 10%

  .cta-picture-do
    @extend .cta-picture-settings
    top: 65%
    left: 40%

  .cta-picture-eat
    @extend .cta-picture-settings
    top: 58%
    left: 50%