/* ==========================================================================
   Home page
   ========================================================================== */
.landings-page
  position: relative
  background: linear-gradient($darkGradient)
  min-height: 100vh

  .swoosh
    position: fixed
    top: 100px
    right: 0
    height: calc(100vh - 200px)
    width: 30%
    background:
      position: right center
      repeat: no-repeat
      size: contain
      image: url("../../img/swoosh.svg")

    +respond-to-width(900)
      display: none 


  .content
    height: calc(100vh - 100px)
    padding-top: 70px
    min-height: 750px

    .logo
      width: 250px
      margin-bottom: 10vh
      img
        width: 100%
        max-height: 85px

    h1
      color: white
      font-size: 3rem
      line-height: 1.2

      +respond-to-width(800)
        font-size: 2rem

      +respond-to-width(400)
        font-size: 1.6rem

    p
      color: rgba(white, 0.6)
      font-size: 1rem
      line-height: 1.4

    .buttons
      margin-top: 45px
      +flex(flex-start, center)

      > span
        display: inline-block
        padding: 0 25px
        color: white
        font-size: 0.6rem
        line-height: 1.2
        font-weight: bold
        text-transform: uppercase

      a
        +flex(center, center)
        width: 225px
        height: 45px
        padding: 10px 15px
        color: white
        font-size: 0.8rem
        line-height: 1.2
        border-radius: 22px
        text-decoration: none
        transition: background-color 0.3s, color 0.3s

        &.colored
          position: relative
          overflow: hidden

          span
            position: relative
            z-index: 3

          &:before, &:after
            content: ''
            position: absolute

            left: 0
            top: 0
            width: 100%
            height: 100%

          &:before
            background: linear-gradient($blueGradient)
            z-index: 2
            opacity: 1
            transition: opacity 0.3s

          &:after
            background-color: $blue
            z-index: 1
            opacity: 0
            transition: opacity 0s ease 0.3s

          &:hover
            &:after
              opacity: 1
              transition-delay: 0s

            &:before
              opacity: 0


        &.lined
          border: 2px solid white
          background-color: transparent

          &:hover
            color: $darkBlue
            background-color: white

  footer
    height: 100px

    .grid-row
      +flex(space-between, center)

      .social-media
        a
          display: inline-block
          width: 20px
          opacity: 0.6
          transition: opacity 0.2s

          + a
            margin-left: 25px

          &:hover
            opacity: 1

      p
        color: rgba(white, 0.6)
        font-size: 0.7rem
        line-height: 1