.loginModal
  background-color: rgba(0, 0, 0, .95)
  padding: 3rem 2rem
  border-radius: 20px
  max-width: 400px!important
  @media (min-width: 768px)
    max-width: 450px!important
  .close
    top: 1rem
    right: 1rem
  @media (min-width: 768px)
    padding: 3rem
    .close
      top: 2rem
      right: 2rem
  .content
    width: 100%
    align-items: center
    @media (min-width: 1280px)
      align-items: flex-start
    h2
      color: $yellow
      text-align: center
      //text-transform: uppercase
      margin-bottom: 2rem
      @media (min-width: 1024px)
        font-size: 24px
      @media (min-width: 1280px)
        margin-bottom: 3rem
      @media (min-width: 1440px)
        font-size: 26px
      @media (min-width: 1600px)
        font-size: 28px
  .content form
    width: 100%
    label
      color: $white
      margin-bottom: 1rem
    input
      width: 100%
      border-bottom: 1px solid $white
      color: $white
      background: none
      margin-bottom: 3rem
      padding: 0 5px 5px
      &::placeholder
        color: #535353
      @media (min-width: 1024px)
        margin-bottom: 2rem
    .forgot
      align-items: center
      gap: 2rem
      p
        color: $white
        font-size: 14px
        @media (min-width: 1280px)
          font-size: 16px
      p a
        color: $yellow
        font-size: 14px
        @media (min-width: 1280px)
          font-size: 16px
      .btnLogin
        display: grid
        place-items: center
        background: $yellow
        border-radius: 20px
        padding: .6rem 1rem
      @media (min-width: 1024px)
        flex-direction: row
        align-items: center
        justify-content: space-between