#login-form {
  &, * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  width:100%;
  height:100%;
  padding:20px 0;

  .login-wrap {
    width:300px;
    margin: 20px auto;
    border:1px solid $color-primary;

    .login {
      background-color: #FFF;
      padding: 20px;
      border-radius: 5px;

      header h1 {
        text-align: center;
        color: #777;
        font-size:1.67em;
        margin:0.67em 0;
      }

      legend {
        display:none;
      }

      .login-form {
        text-align:center;

        .control-group {
          margin-bottom: 10px;

          &:after {
            @include clear-fix();
          }

          > label {
            display:none;
          }

          > input {
            text-align: center;
            background-color: #ECF0F1;
            border: 2px solid transparent;
            border-radius: 3px;
            font-size: 16px;
            font-weight: 200;
            padding: 10px 0;
            width: 250px;
            transition: border .5s;

            &:focus {
              border: 2px solid $color-primary;
              box-shadow: none;
            }
          }

          .checkbox {
            text-align:left;
          }

        }

        .btn {
          @include button-default();
          @include transition();

          border: 2px solid transparent;
          background: $color-primary;
          color: #ffffff;
          font-size: 16px;
          line-height: 25px;
          padding: 10px 0;
          text-shadow: none;
          border-radius: 3px;
          box-shadow: none;
          transition: 0.25s;
          display: block;
          width: 250px;
          margin: 0 auto;

          &:hover {
            background-color: $color-primary;
          }
        }

        .social-login {
          margin:15px 0px 0px 0px;
          padding:0;
          list-style:none;

          &, li {
            font-size:0px;
          }

          li {
            &, a {
              display:inline-block;
            }
            a > img {
              display:block; margin:0 auto;
            }
            + li {
              margin-left:5px;
            }
          }
        }
      }
    }
  }
}