/*==========================================================================
  Three main page buttons
  ========================================================================== */

.main-buttons
  position: relative
  z-index: 4
  +flex(center, flex-start)
  margin-bottom: 75px

  .wrapper
    +flex(center, flex-start)
    margin-top: -100px
    box-shadow: 0px 5px 5px 0px rgba($blue, 0.06)
    border-radius: 12px
    background-color: white


  .main-button
    width: 200px
    height: 150px
    +flex(center, center)
    text-align: center
    text-decoration: none
    background-color: transparent
    transition: background 0.2s

    .placeholder
      display: block
      font-size: 0
      line-height: 0

    &:nth-child(2)
      border-right: 1px solid $lightGray2
      border-left: 1px solid $lightGray2

    .icon
      height: 40px
      width: 45px
      display: inline-block
      line-height: 0
      font-size: 0

      span
        display: block

    p
      +phenomena
      font-size: 1.2rem
      line-height: 1.2
      color: $brown
      margin: 10px 0 0
      transition: color 0.2s

    .line
      margin-top: 10px
      display: inline-block
      width: 12px
      height: 2px
      background-color: $blue
      opacity: 0.5
      transition: opacity 0.2s, width, 0.4s

    svg
      opacity: 0.1

      &#location
        #hover-waves
          #hover-wave1
            +waveSurroundingHoverEffect

          #hover-wave2
            +waveSurroundingHoverEffectInvert
            animation-direction: alternate-reverse
            animation-delay: 1s

    &.invest
      .icon
        margin-right: -12px

    &:first-child
      border-radius: 10px 0 0 10px

    &:last-child
      border-radius: 0 10px 10px 0

    &.active
      p
        color: $blue
      .line
        background-color: $brown

    &:hover
      background-color: $blue

      p
        color: $lightGray2 

      .line
        background-color: $brown
        width: 24px

      #diamond, #surrounding
        path
          fill: white !important

      #location
        .st1
          fill: $blue !important
        .st2
          fill: white !important

        #hover-waves
          display: block

          path
            animation-play-state: running !important

  +respond-to-width(750)
    .wrapper
      margin-top: 0
      display: block
      width: 100%
      border-radius: 0
      box-shadow: none

    .main-button
      width: 100%
      height: 130px
      border-radius: 0 !important

      &:nth-child(2)
        background-color: darken(white, 3%)
        &:hover
          background-color: $blue

      &:nth-child(3)
        background-color: darken(white, 6%)
        &:hover
          background-color: $blue


// Styling for when it's a row on it's own
.main-buttons-row
  padding: 50px 0 65px

  background:
    size: cover
    position: bottom center
    image: url("/img/backgrounds/beach.jpg")

  +respond-to-width(1750)
    background-image: url("/img/backgrounds/beach@0,75x.jpg")


  >p
    font-size: 1.1rem
    line-height: 1.2
    color: white
    text-align: center
    margin: 0
    padding: 20px

  .main-buttons
    margin-bottom: 0
    .wrapper
      margin-top: 0

  +respond-to-width(750)
    padding: 50px 50px 65px !important

    background:
      size: cover !important
      position: bottom center !important
      image: url("/img/backgrounds/beach@0,75x.jpg") !important

    >p
      font-size: 1.3rem !important
      padding-left: 0
      padding-right: 0
      color: white  !important
      +metropolisSemiBold

    .background
      display: none

    .main-buttons
      .wrapper
        background-color: transparent
        .main-button
          margin-bottom: 20px
          background-color: white
          border: none !important

          &:hover
            background-color: $blue