@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
*{box-sizing:border-box;}
body{background: url(../img/login.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;
	display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:'Montserrat',sans-serif;height:100vh;margin:-20px 0 50px;}
h1{font-weight:bold;margin:0;}
h2{text-align:center;height: 60px;line-height: 60px;}
p{font-size:14px;font-weight:100;line-height:20px;letter-spacing:0.5px;margin:20px 0 30px;}
span{font-size:12px;}
a{color:#333;font-size:14px;margin:15px 0;}
button{border-radius:20px;border:1px solid #FF4B2B;background-color:#FF4B2B;color:#FFFFFF;font-size:12px;font-weight:bold;padding:12px 45px;letter-spacing:1px;text-transform:uppercase;transition:transform 80ms ease-in;}
button:active{transform:scale(0.95);}
button:focus{outline:none;}
button.ghost{background-color:transparent;border-color:#FFFFFF;}
form{background-color:#FFFFFF;display:flex; justify-content:center;flex-direction:column;padding:0 50px;height:100%;text-align:center;}
form .layui-btn{background-color:#f22a35;}
input{background-color:#eee;border:none;padding:12px 15px;margin:5px 0;width:100%;}
.mobile-show{display: none;}
.align-center{text-align: center;}
.container{background-color:#fff;border-radius:10px;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);position:relative;overflow:hidden;width:768px;max-width:100%;min-height:500px;}
.form-container{position:absolute;top:0;height:100%;transition:all 0.6s ease-in-out;}
.sign-in-container{left:0;width:50%;z-index:2;}
.container.right-panel-active .sign-in-container{transform:translateX(100%);}
.sign-up-container{left:0;width:50%;opacity:0;z-index:1;}
.container.right-panel-active .sign-up-container{transform:translateX(100%);opacity:1;z-index:5;animation:show 0.6s;}
.form-container .layui-tab{background-color:#FFFFFF;display:flex; justify-content:center;flex-direction:column;padding:0 50px;height:100%;text-align:center;margin: 0 auto;}
.layui-tab-brief>.layui-tab-title .layui-this:after{    border-bottom: 2px solid #f22a35;}
.form-container .layui-tab .layui-tab-title li{width: 50%;}
.layui-tab-brief>.layui-tab-title .layui-this{color: #fa3e2f;}
.form-container .layui-tab form{padding:0!important;}
@keyframes show{0%,49.99%{opacity:0;z-index:1;}
50%,100%{opacity:1;z-index:5;}
}
.overlay-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform 0.6s ease-in-out;z-index:100;}
.container.right-panel-active .overlay-container{transform:translateX(-100%);}
.overlay{background:#f22a35;background:-webkit-linear-gradient(to right,#FF4B2B,#f22a35);background:linear-gradient(to right,#FF4B2B,#f22a35);background-repeat:no-repeat;background-size:cover;background-position:0 0;color:#FFFFFF;position:relative;left:-100%;height:100%;width:200%;transform:translateX(0);transition:transform 0.6s ease-in-out;}
.container.right-panel-active .overlay{transform:translateX(50%);}
.overlay-panel{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 40px;text-align:center;top:0;height:100%;width:50%;transform:translateX(0);transition:transform 0.6s ease-in-out;}
.overlay-left{transform:translateX(-20%);}
.container.right-panel-active .overlay-left{transform:translateX(0);}
.overlay-right{right:0;transform:translateX(0);}
.container.right-panel-active .overlay-right{transform:translateX(20%);}
.social-container{margin:20px 0;}
.social-container a{border:1px solid #DDDDDD;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;margin:0 5px;height:40px;width:40px;}
footer{background-color:#222;color:#fff;font-size:14px;bottom:0;position:fixed;left:0;right:0;text-align:center;z-index:999;}
footer p{margin:10px 0;}
footer i{color:red;}
footer a{color:#3c97bf;text-decoration:none;}

.container_h{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;}
.container_h input{flex:1;margin-right:10px;}
.container_h img{height: 38px;;border: 1px solid #D2D2D2;border-radius: 2px;}

@media (max-width:991px){
	body{background:#fff;}
	h2{display: block;/*border-bottom: 1px solid #ccc;padding: 0 20px;*/}
	.pc{display: none;}
	.mobile{display: block;}
	.mobile-show{display: block;}
	.container{ width: 100%; overflow: hidden; box-shadow:none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; }
	.sign-up-container{width: 100%;}
	.overlay-container{width: 100%;display: none;}
	.sign-in-container{width: 100%;}
	.container.right-panel-active .sign-up-container {transform: translateX(0%);}

	
}