km-frontbox
  display: block
  width: 100vw
  height: 100vh

  display: -webkit-box
  display: -webkit-flex
  display: -moz-flex
  display: -ms-flexbox
  display: flex
  -webkit-flex-wrap: wrap
  -moz-flex-wrap: wrap
  -ms-flex-wrap: wrap
  flex-wrap: wrap
  -webkit-box-pack: center
  -ms-flex-pack: center
  -webkit-justify-content: center
  -moz-justify-content: center
  justify-content: center
  -webkit-box-align: center
  -ms-flex-align: center
  -webkit-align-items: center
  -moz-align-items: center
  align-items: center
  flex-direction: column
  -ms-flex-direction: column
  -moz-flex-direction: column
  -webkit-flex-direction: column

  background-color: #efefef
  background-position: 50% 50%
  background-size: cover
  background-repeat: no-repeat

  form
    position: relative
    margin: 0
    border: 0
    border-radius: 3px
    padding: 0
    min-width: 300px
    background-color: #f9f9f9
    box-shadow: 0 0 10px rgba(#000, 0.1), 0 10px 10px -10px rgba(#000, 0.1)

    header
      display: block
      padding: 3rem 0 3rem
      text-align: center
      box-shadow: 0 10px 5px -10px rgba(#000, 0.1)
      img
        display: block
        margin: auto
        width: 100%
        max-width: 250px
    
    main
      display: block
      padding: 2rem
      p
        margin: 1rem 0
      ka-control + ka-control,
      ka-input + ka-input
        margin-top: 1.5rem

    footer
      display: block
      padding: 2rem
      box-shadow: 0 -10px 5px -10px rgba(#000, 0.1)

    button, ka-button
      margin: 0

    ka-input
      margin-bottom: 3rem