body{
    background-image: url('../img/bg_20.png') ;
    -webkit-background-size: auto;
    background-position: 50% 50%;
    height: 100vh;
    /*background-color: #1b1e25;*/
    background-repeat: no-repeat;
    background-color: rgba(51,51,51,7);
    /*background-color: rgba(0,0,0,0.7);*/
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}


footer {
    /*width:auto;*/
    /*height:auto;*/
    /*position:absolute;*/
    /*bottom:10px;*/
    /*background:transparent;*/
    /*text-align: center;*/
    /*color: white;*/
    margin-top: -50px;
    position: fixed;
    bottom:0;
    width: 100%;
    z-index: 1;
    text-align:center;
    color: #0e1320;
}

.login-wrap{
    position: relative;
    z-index: 999;
    text-align: left;
    top: 50%;
    transform: translate(0%, -50%);

    width:100%;
    margin:auto;
    max-width:450px;
    min-height:400px;
    /*position:relative;*/
    /*background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;*/
    box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}

.content{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    text-align: center;
    padding: 30px 32px;
    width: 400px;
    transform: translate(-50%,-50%);
    /*background: rgba(255,255,255,0.04);*/
    background: rgba(4, 14, 29, .68);
    color: #fff;
    box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.login-html{
    width:100%;
    height:100%;
    position:absolute;
    padding:45px 45px 45px 45px;
    background:rgba(18,24,35,.30);
    /*background: rgba(4, 14, 29, .68)*/
}

.login-html .sign-in-htm,
.login-html .sign-up-htm{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    transform:rotateY(180deg);
    backface-visibility:hidden;
    transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
    display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
    text-transform:uppercase;
}
.login-html .tab{
    font-size:22px;
    margin-right:15px;
    padding-bottom:5px;
    margin:0 15px 10px 0;
    display:inline-block;
    border-bottom:2px solid transparent;
    color: #b7b7b7;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
    color:#fff;
    border-color:#1161ee;
}
.login-form{
    min-height:345px;
    position:relative;
    perspective:1000px;
    transform-style:preserve-3d;
}
.login-form .group{
    margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
    width:100%;
    color:#fff;
    display:block;
}
.login-form .group .input,
.login-form .group .button{
    border:none;
    padding:15px 20px;
    border-radius:25px;
    background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
    text-security:circle;
    -webkit-text-security:circle;
}
.login-form .group .label{
    color:#aaa;
    font-size:12px;
}
.login-form .group .button{
    background:#1161ee;
}
.login-form .group label .icon{
    width:15px;
    height:15px;
    border-radius:2px;
    position:relative;
    display:inline-block;
    background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
    content:'';
    width:10px;
    height:2px;
    background:#fff;
    position:absolute;
    transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
    left:3px;
    width:5px;
    bottom:6px;
    transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
    top:6px;
    right:0;
    transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
    color:#fff;
}
.login-form .group .check:checked + label .icon{
    background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
    transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
    transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
    transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
    transform:rotate(0);
}

.hr{
    height:2px;
    margin:30px 0 50px 0;
    background:rgba(255,255,255,.2);
}
.foot-lnk{
    text-align:center;
}
.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    width: 48%;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: #1161ee5f;
    background-image: linear-gradient(to top left,
    rgba(0, 0, 0, .2),
    rgba(0, 0, 0, .2) 30%,
    rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
    inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: #1161ee;
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
    inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.styled_default {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    width: 48%;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: #3D3F424f;
    background-image: linear-gradient(to top left,
    rgba(0, 0, 0, .2),
    rgba(0, 0, 0, .2) 30%,
    rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
    inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled_default:hover {
    background-color: #3E4042;
}

.styled_default:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
    inset 2px 2px 3px rgba(0, 0, 0, .6);
}