@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
body {
  background-color: #ACAFB8;
  color: #fff;
  font-family: arial, helvetica, sans-serif;
  line-height: 1.4;
  font-size: 0.6em;
}

*, *:before, *:after {
  box-sizing: border-box;
}



.login-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 270px;
  border-radius: 3px;
  background-color: #272E38;
  overflow: hidden;
  .denied & {
    animation: shake 0.35s normal forwards ease-in-out;
  }
  fieldset {
    border: none;
  }
  header {
    background-color: #202731;
    color: #C5C6C8;
    display: block;
    padding: 1.5em;
    text-align: center;
    font-size: 12px;
  }
  .input-wrapper {
    position: relative;
    display: block;
    margin: 2em auto;
    border-bottom: 1px solid #FC7148;
    border-radius: 3px;
    width: 170px;
    padding-left: 20px;
    input {
      width: 100%;
      line-height: 2;
      background-color: transparent;
      border: none;
      color: #F3F6F4;
      padding: .6em .5em;
      outline: 0;
      &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
        color: #9EA2AB;
      }
    }
    &:before {
      font-family: FontAwesome;
      position: absolute;
      display: inline-block;
      top: 9px;
      left: 8px;
      font-size: 12px;
      color: #FC7148;
    }
    &:nth-child(1):before {
      content: "\f007";
    }
    &:nth-child(2):before {
      content: "\f023";
    }
  }
  button {
    outline: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    background-color: #FC7148;
    color: #fff;
    border: none;
    border-radius: 3px;
    width: 200px;
    padding: 1.2em 0;
    margin: 4em auto;
    display: block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    &:hover {
      border-bottom-color: darken(#FC7148, 25);
    }
  }
}

@keyframes shake {
  0% { margin-left: 0 }
  12% { margin-left: 0 }
  25% { margin-left: -10px }
  50% { margin-left: 10px }
  75% { margin-left: -10px }
  87% { margin-left: 0 }
  100% { margin-left: 0 }
}

@media only screen and (max-width: 600px) {
  body {
      font-size: 16px;
  }
  input {
	  font-size: 16px;
  }
}