/* ==========================================================================
   Home page
   ========================================================================== */
.login

  > .placeholder
    position: relative

    +respond-to-width(650)
      box-shadow: none


    &:after
      content: '+'
      display: block
      position: absolute
      z-index: 0
      font-size: 480px
      text-align: right
      color: white
      font-weight: 900
      top: 0
      left: 0
      width: 100%
      height: 64%
      padding-top: 2%
      background: linear-gradient(90deg, #FFFFFF 0%, #F7F8FA 80%)

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

    > form
      position: relative
      z-index: 5

      .general-alert
        display: block
        background-color: $logoRed
        padding: 10px
        position: absolute
        top: auto
        margin-top: -55px
        left: 0
        width: 100%
        color: white
        border-radius: 5px

        &:first-letter
          text-transform: capitalize

  h1
    color: $semiBlack
    font-size: 1.6rem
    font-weight: bold
    line-height: 2
    margin: 0
    margin-bottom: 55px

    +respond-to-width(850)
      padding-left: 50px

    +respond-to-width(425)
      font-size: 1.3rem

  label
    width: column(6, 8)
    display: block
    margin-bottom: 24px

  input
    width: column(6, 8)
    margin-bottom: 30px
    border: none
    border-bottom: solid 1px rgba($ctaBackground, 0.8)
    font-size: 0.8rem
    line-height: 1.1
    padding: 8px 0
    color: $placeholderGray

    +respond-to-width(1024)
      width: 100%

    &[type=submit]
      display: block
      padding: 10px 15px
      margin: 30px 0
      color: white
      font-size: 0.8rem
      font-weight: bold
      line-height: 1.1
      text-transform: uppercase
      border-radius: 3px
      background-color: $logoRed
      width: auto
      min-width: 240px
      text-align: left
      cursor: pointer
      transition: background-color 0.3s

      &:hover
        background-color: lighten($logoRed, 10%)

      +respond-to-width(425)
        width: 100%

    +placeholder
      font-size: 0.8rem
      line-height: 1.1
      opacity: 0.45
      color: $placeholderGray

  a.forgotPassword
    display: inline-block
    margin-bottom: 100px
    text-decoration: none
    color: $semiBlack
    cursor: pointer
    transition: color 0.3s
    padding-left: column(1, 10)
    +flex(flex-start, center)

    &:hover
      color: $redTheme2


    +respond-to-width(650)
      background-color: white
      padding-bottom: 30px
      margin-bottom: 0
      padding-left: column(0.5, 8)

    p
      display: inline-block
      margin: 0
      border-bottom: solid 1px

    span.lock
      svg
        height: 25px
        width: 25px
        transition: opacity 0.2s




  .registerLink
    color: $semiBlack
    font-style: italic
    margin: 50px 0 85px 0

    +respond-to-width(650)
      margin: 30px 0 0 0

    a
      text-decoration: none
      color: $semiBlack
      border-bottom: solid 1px
      cursor: pointer
      transition: color 0.3s

      &:hover
        color: $redTheme2