* {
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', sans-serif;
  }
  
  body {
    background:#2c3e50; /*From http://flatuicolors.com/ */
  }
  
  form.login {
    position:relative;
    width:360px;
    height:360px;
    margin:50px auto;
    text-align:center;
    background:#ecf0f1;
    padding:40px;
    -webkit-border-radius:20px 0 0 0;
       -moz-border-radius:20px 0 0 0;
            border-radius:20px 0 0 0;
    -webkit-box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
       -moz-box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
            box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
    box-shadow: 20px 20px 20px;
  }
  
  form.register {
    position:relative;
    width:360px;
    height:420px;
    margin:50px auto;
    text-align:center;
    background:#ecf0f1;
    padding:40px;
    -webkit-border-radius:20px 0 0 0;
       -moz-border-radius:20px 0 0 0;
            border-radius:20px 0 0 0;
    -webkit-box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
       -moz-box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
            box-shadow: 0px 1px 0px #ad392d, inset 0px 1px 0px white;
    box-shadow: 20px 20px 20px;
  }
  
  h4 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:2em;
    font-weight:300;
    margin-bottom:5px;
    color:#7f8c8d;
    text-shadow:1px 1px 0px white;
  }
  
  input, .input {
    display:block;
    width:315px;
    padding:14px;
    -webkit-border-radius:6px;
       -moz-border-radius:6px;
            border-radius:6px;
    border:0;
    margin-bottom:12px;
    color:#7f8c8d;
    font-weight:600;
    font-size:16px;
  }
  
  input:focus {
    background:#fafafa;
  }
  
  
  li {
    position:absolute;
    right:40px;
    bottom:62px;
    list-style:none;
  }
  
  a, a:visited {
    text-decoration:none;
    color:#7f8c8d;
    font-weight:400;
    text-shadow:1px 1px 0px white;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
  }
  
  .button {
    position:relative;
    float:left;
    width:145px;
    margin-top:10px;
    background:#3498db;
    color:#fff;
    font-weight:400;
    text-shadow:1px 1px 0px #2d7baf;
    box-shadow:0px 3px 0px #2d7baf;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
  }
  
  .error {
  color: red;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px
  }
  
  .success {
  color: #3498db;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px
  }
  
  .form-group {
    position: relative;
    margin-bottom: 1.5rem;
    text-align:left;
    
  }
  
  .form-control-placeholder {
    position: absolute;
    top: 0;
    padding: 7px 0 0 13px;
    transition: all 200ms;
    opacity: 0;
  }
  
  .form-control:focus + .form-control-placeholder,
  .form-control:valid + .form-control-placeholder {
    font-size: 75%;
      font-weight: bold;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }