@charset "utf-8";
label{cursor:pointer}
a{
    cursor:pointer;
    text-transform:uppercase;
    text-decoration:underline;
}
.container{
    text-align:center;
    padding-top: 140px;
}
.login-box{
    display: block;
    width: 300px;
    margin: auto;
    margin-top: 15px;
    border: 1px solid #333;
    padding: 20px;
    border-radius: 10px;
    line-height: 40px;
}
input{
    border:1px solid #999;
    vertical-align: middle;
}
input::placeholder{
    color:#333;
}
input[type=text],input[type=password],input[type=submit],
input[type=button],input[type=email]{
    background:#777;
    height:28px;
    width:160px;
    border-radius:3px;
    padding:5px;
}
input[type=submit],input[type=button]{
    background:#222;
    border-color:#333;
    color:#999;
    height:36px;
    cursor: pointer;
}
input[type=submit]:active,
input[type=button]:active{
    background:#111;
    transform:translateY(1px);
}
input[type=text]:focus,input[type=password]:focus{
    background:#DDD;
}

.logo.error{
    animation-name: ani-shake;
    animation-duration: 0.3s;
}
.logo.hide{opacity:0;}
@keyframes ani-shake{
	0%{
    	transform: translateX(-5px);
    }
    20%{
        transform: translateX(5px);
    }
    40%{
        transform: translateX(-5px);
    }
    60%{
        transform: translateX(5px);
    }
    80%{
        transform: translateX(-5px);
    }
    100%{
        transform: translateX(0);
    }
}
.logo-ani{
    position:absolute;
    top: 140px;
    width: 100%;
}
.logo-ani>img{
    position:absolute;
    left:50%;
    transition:transform 400ms;
}
.logo-ani .logo{
    width: 50px;
    margin-left: -25px;
    transform:rotateY(0deg);
    opacity:0;
}
.logo-ani .logoA{
    width: 25px;
    margin-left: -12px;
    transform:rotateY(90deg);
}
.logo-ani.show{
    animation-name: ani-logo-down;
    animation-duration: 0.4s;
    top: 11px;
}
.logo-ani.show>img{
	left: 25px;
	animation-name: ani-logo-left;
	animation-duration: 0.4s;
}

.logo-ani.show .logo{
    transform:rotateY(90deg);
	opacity:1;
}
.logo-ani.show .logoA{
    transform:rotateY(0);
}

@keyframes ani-logo-down{
    0%{
        top:140px;
    }
	30%{
    	top:40%;
    	animation-timing-function: ease-out;
    }
    100%{
        top:11px;
    	animation-timing-function: ease-in;
    }
}
@keyframes ani-logo-left{
    0%{
        left:50%;
    }
    100%{
        left:25px;
    	animation-timing-function: ease-out;
    }
}


.popup{
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height:100%;
    /* background:#4b4b4b; */
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
}
.popup.open{
    pointer-events: auto;
    opacity: 1;
}
.popup>.inner{
    position: absolute;
    border: 1px solid #333;
    top: 180px;
    width: 320px;
    height:350px;
    left:50%;
    background:#000;
    margin-left: -160px;
    border-radius: 10px;
    transform: translateY(30px);
    transition: transform 200ms;
    padding:20px;
    line-height: 40px;
    text-align:center;
}
.popup.open>.inner{
    transform: none;
}
.popup>.inner input{
    width:200px;
}

@media screen and (max-width: 500px){
    @keyframes ani-logo-down{
        0%{
            top:140px;
        }
    	30%{
        	top:60%;
        	animation-timing-function: ease-out;
        }
        100%{
            top:11px;
        	animation-timing-function: ease-in;
        }
    }
}