#mc_embed_signup
  +flex(center, center)
  +flex-rows
  height: 100%

  .placeholder
    width: 100%

    h4
      color: white
      width: 100%
      padding: 0 10%
      margin: 0
      display: block
      text-align: center
      +font-default(18px, 22px)
      text-transform: uppercase

    p
      margin: 5px 0 0
      +font-default(14px, 22px)

    form
      margin-top: 15px

      .mc-field-group
        position: relative
        padding: 0 10%
        margin-bottom: 10px

        label
          width: 100%
          display: block
          color: white
          text-transform: uppercase
          +font-default(14px, 14px)

        input
          +appearance(none)
          background-color: rgba(255,255,255, 0.3)
          margin-top: 5px
          height: 40px
          width: 100%
          +font-default(16px, 40px)
          padding: 0 10px
          color: $darkGray
          border: 1.5px transparent solid

          &:focus
            outline: none

          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            transition: 9999s background-color
            -webkit-text-fill-color: $darkGray
            transition-delay: 9999s


        div.mce_inline_error
          position: absolute
          right: 10%
          top: 0
          margin: 0
          padding: 0
          background-color: transparent
          color: $red
          +font-default(13px, 14px)
          letter-spacing: 0.8px

      #mc-embedded-subscribe
        display: block
        +appearance(none)
        border: none
        background-color: $darkGray
        color: white
        +font-default(14px, 21px)
        text-transform: uppercase
        height: 35px
        width: 100%
        max-width: 180px
        margin: 20px 10% 0 auto
        transition: background-color 0.3s
        cursor: pointer
        &:focus
          outline: none
        &:hover
          background-color: darken($darkGray, 10%)