.login{
 display:flex;
 justify-content:center;
 align-items:center;
}
.container{
 position:relative;
 width:850px;
 height:550px;
 margin:20px;
 background:#fff;
 border-radius:30px;
 box-shadow:0 0 30px rgba(0, 0, 0, .2);
 overflow:hidden;
}

.form-box{
 position:absolute;
 right:0;
 width:50%;
 height:100%;
 background:#fff;
 display:flex;
 align-items:center;
 color:#333;
 text-align:center;
 padding:40px;
 z-index:1;
 transition:.6s ease-in-out 1.2s, visibility 0s 1s;
}

.form-box.register{
 visibility:hidden;
}

.container.active .form-box.register{
 visibility:visible;
}

form{
 width:100%;
}

.container h1{
 font-size:36px;
 margin:-10px 0;
}

.input-box{
 position:relative;
 margin:30px 0;
}

.input-box input{
 width:100%;
 padding:13px 50px 13px 20px;
 background:#eee;
 border-radius:8px;
 border:none;
 outline:none;
 font-size:16px;
 color:#333;
 font-weight:500;
}

.input-box input::placeholder{
 color:#888;
 font-weight:400;
}

.input-box i{
 position:absolute;
 right:20px;
 top:50%;
 transform:translateY(-50%);
 font-size:20px;
 color:#888;
}

.forgot-link{
 margin:-15px 0 15px;
}

.forgot-link a{
 font-size:14.5px;
 color:#333;
 text-decoration:none;
}

.btn{
 width:100%;
 height:48px;
 background:#7494ec;
 border-radius:8px;
 box-shadow:0 0 10px rgba(0, 0, 0, .1);
 border:none;
 cursor:pointer;
 font-size:16px;
 color:#fff;
 font-weight:600;
}

.container p{
 font-size:14.5px;
 margin:15px 0;
}

.social-icons{
 display:flex;
 justify-content:center;
}

.social-icons a{
 display:inline-flex;
 padding:10px;
 border:2px solid #ccc;
 border-radius:8px;
 font-size:24px;
 color:#333;
 text-decoration:none;
 margin:0 8px;
}

.toggle-box{
 position:absolute;
 width:100%;
 height:100%;
}

.toggle-box::before{
 content:'';
 position:absolute;
 left:-250%;
 width:300%;
 height:100%;
 background:#7494ec;
 border-radius:150px;
 transition:1.8s ease-in-out;
 z-index:2;
}

.container.active .form-box{
 right:50%;
}

.container.active .toggle-box::before{
 left:50%;
}

.toggle-panel{
 position:absolute;
 width:50%;
 height:100%;
 color:#fff;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 z-index:2;
 transition:.6s ease-in-out;
}

.toggle-panel.toggle-left{
 left:0;
 transition-delay:1.2s;
}

.container.active .toggle-panel.toggle-left{
 left:-50%;
 transition-delay:.6s;
}

.toggle-panel.toggle-right{
 right:-50%;
 transition-delay:.6s;
}

.container.active .toggle-panel.toggle-right{
 right:0;
 transition-delay:1.2s;
}

.toggle-panel p{
 margin-bottom:20px;
}

.toggle-panel .btn{
 width:160px;
 height:46px;
 background:transparent;
 border:2px solid #fff;
 box-shadow:none;
}

/* Media Query */
@media screen and (max-width:650px){
 .container{
  height:calc(100vh - 40px);
 }
 .form-box{
  bottom:0;
  width:100%;
  height:70%;
 }

 .container.active .form-box{
  right:0;
  bottom:30%;
 }

 .toggle-box::before{
  left:0;
  top:-270%;
  width:100%;
  height:300%;
  border-radius:20vw;
 }

 .container.active .toggle-box::before{
  left:0;
  top:70%;
 }

 .toggle-panel{
  width:100%;
  height:30%;
 }

 .toggle-panel.toggle-left{
  top:0;
 }

 .container.active .toggle-panel.toggle-left{
  left:0;
  top:-30%;
 }

 .toggle-panel.toggle-right{
  right:0;
  bottom:-30%;
 }

 .container.active .toggle-panel.toggle-right{
  bottom:0;
 }
}

@media screen and (max-width:400px){
 .form-box{
  padding:20px;
 }
 .toggle-panel h1{
  font-size:30px;
 }
}