* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-image: url(/Images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font: 100%/1 "Helvetica Neue", Arial, sans-serif;
}


.login {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    height: 25rem;
    left: 50%;
    margin: -10rem 0 0 -10rem;
    padding: 20px;
    position: absolute;
    top: 400px;
    width: 25rem;
}

.logo {
    left: 43%;
    overflow: hidden;
    position: absolute;
    top: 93px;
    width: 291px;
}

img {
    width: 100%;
}

.text1 img {
    width: 100%;
}

.login:hover > .login-header, .login.focused > .login-header {
    width: 2rem;
}

    .login:hover > .login-header > .text, .login.focused > .login-header > .text {
        font-size: 1rem;
        transform: rotate(-90deg);
    }

.login.loading > .login-header {
    width: 20rem;
}

    .login.loading > .login-header > .text {
        display: none;
    }

    .login.loading > .login-header > .loader {
        display: block;
    }

.login-header {
    height: 25rem;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.5s ease-in-out 0s;
    width: 25rem;
    z-index: 1;
    background-color: #0089ff;
    -webkit-box-shadow: 10px 10px 28px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 28px -4px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 28px -4px rgba(0,0,0,0.75);
}


    .login-header > .text {
        color: #fff;
        display: block;
        font-size: 70px;
        line-height: 11rem;
        position: unset;
        text-align: center;
        transition: all 0.5s ease-in-out 0s;
        font-family: fantasy;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
    }

    .login-header > .text1 {
        align-self: center;
        left: 32%;
        position: absolute;
        text-align: center;
        transition: all 0.5s ease-in-out 0s;
    }


    .login-header > .loader {
        display: none;
        position: absolute;
        left: 5rem;
        top: 5rem;
        width: 10rem;
        height: 10rem;
        border: 2px solid #fff;
        border-radius: 50%;
        animation: loading 2s linear infinite;
    }

        .login-header > .loader:after {
            content: "";
            position: absolute;
            left: 4.5rem;
            top: -0.5rem;
            width: 1rem;
            height: 1rem;
            background: #fff;
            border-radius: 50%;
            border-right: 2px solid #0089FF;
        }

        .login-header > .loader:before {
            content: "";
            position: absolute;
            left: 4rem;
            top: -0.5rem;
            width: 0;
            height: 0;
            border-right: 1rem solid #fff;
            border-top: 0.5rem solid transparent;
            border-bottom: 0.5rem solid transparent;
        }

@keyframes loading {
    50% {
        opacity: 0.5;
    }

    100% {
        transform: rotate(360deg);
    }
}

.login-form {
    margin: 2rem 0 0 2rem;
    padding: 0.5rem;
}

.login-input {
    border-color: #ccc;
    border-width: 0 0 2px;
    box-shadow: none;
    display: block;
    font-size: 20px;
    margin-bottom: 20px;
    padding: 0.5rem 2rem;
    width: 100%;
}

    .login-input + .login-input {
        margin: 10px 0 0;
    }

    .login-input:focus {
        border-bottom-color: #0089ff;
        display: block;
        font-size: 11px;
        margin-bottom: 20px;
        outline: medium none;
        padding: 0.8rem 2rem;
        width: 100%;
        transition: all 0.2s ease-in-out;
        /*transform:translateY(-100%);*/
    }

.login-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 5rem;
    height: 5rem;
    border: none;
    background: #0089FF;
    border-radius: 50%;
    font-size: 0;
    border: 0.6rem solid transparent;
    transition: all 0.3s ease-in-out;
}

    .login-btn:after {
        position: absolute;
        left: 1rem;
        top: 0.8rem;
        width: 0;
        height: 0;
        border-left: 2.4rem solid #fff;
        border-top: 1.2rem solid transparent;
        border-bottom: 1.2rem solid transparent;
        transition: border 0.3s ease-in-out 0s;
    }

    .login-btn:hover, .login-btn:focus, .login-btn:active {
        background: #fff;
        border-color: #0089FF;
        outline: none;
        cursor: pointer;
    }

        .login-btn:hover:after, .login-btn:focus:after, .login-btn:active:after {
            border-left-color: #0089FF;
        }

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
}

.fpass {
    float: right;
    padding-left: 10px;
    padding-top: 40px;
    position: unset;
}

    .fpass a {
        color: #333333;
        font-family: Verdana;
    }

.icon {
    color: #232323;
    font-size: 20px;
    margin-left: 0;
    padding: 0.5rem 0rem;
    position: absolute;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.lock {
    font-size: 35px !important;
    left: 31%;
    position: absolute;
    top: 15px;
}
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-dismissable {
  padding-right: 35px;
}

.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.login-header1 {
    width: 2rem;
}

@media all and (min-width: 320px) and (max-width:568px) {
    .login {
        left: 55%;
        width: 18rem;
    }

    .login-header {
        width: 18rem;
    }
}

@media all and (min-width: 320px) and (max-width:600px) {
    .logo {
        left: 20%;
        width: 53%;
    }
}