*{box-sizing:border-box;}

body{
  align-items:center;
  background:#23262d;
  display:flex;
  flex-direction:column;
  font-family:'Montserrat', sans-serif;
  height:100vh;
  justify-content:center;
  margin:-20px 0 50px;
  margin-top:20px;
}

h1{
  font-weight:bold;
  margin:0;
}

p{
  font-size:14px;
  font-weight:100;
  line-height:20px;
  letter-spacing:.5px;
  margin:20px 0 30px;
}

span{font-size:12px;}

a{
  color:#333333;
  font-size:14px;
  margin:15px 0;
  text-decoration:none;
}

.container{
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 14px 28px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2);
  min-height:480px;
  max-width:100%;
  overflow:hidden;
  position:relative;
  width:768px;
}

.form-container form{
  background:#ffffff;
  display:flex;
  flex-direction:column;
  padding: 0 50px;
  height:100%;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.social-container{margin:20px 0;}

.social-container a{
  align-items:center;
  border:1px solid #ddd;
  border-radius:50%;
  display:inline-flex;
  justify-content:center;
  height:40px;
  margin:0 5px;
  width:40px;
}

.form-container input{
  background:#eee;
  border:none;
  padding:12px 15px;
  margin:8px 0;
  width:100%;
}

button{
  width:100%;
  background:#ff445c;
  /* border-radius:20px; */
  border:1px solid #ff4b2b;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  letter-spacing:1px;
  padding:12px 45px;
  text-transform:uppercase;
  transition:transform 80ms ease-in;
}

button:active{transform:scale(.95);}

button:focus{outline:none;}

button.ghost{
  background:transparent;
  border-color:#fff;
}

button.responsive{display:none;}

.form-container{
  height:100%;
  position:absolute;
  top:0;
  transition:all .6s ease-in-out;
}

.login-container{
  left:0;
  width:50%;
  z-index:2;
}

.forgot-password-container{
  left:0;
  opacity:0;
  z-index:1;
  width:50%;
}

.overlay-container{
  left:50%;
  height:100%;
  overflow:hidden;
  position:absolute;
  top:0;
  transition:transform .6s ease-in-out;
  width:50%;
  z-index:100;
}

.overlay{
  background:#fec701;
  background:linear-gradient(to right, #ff4b2b, #fec701) no-repeat 0 0 / cover;
  color:#fff;
  height:100%;
  left:-100%;
  position:relative;
  transform:translateY(0);
  transition:transform .6s ease-in-out;
  width:200%;
}

.overlay-panel{
  align-items:center;
  display:flex;
  flex-direction:column;
  height:100%;
  position:absolute;
  justify-content:center;
  padding:0 40px;
  text-align:center;
  top:0;
  transform:translateY(0);
  transition:transform .6s ease-in-out;
  width:50%;
}

.overlay-right{
  right:0;
  transform:translateY(0);
}

.overlay-left{transform:translateY(-20%);}

/* Move signin to right */
.container.right-panel-active .login-container{transform:translateY(100%);}

/* Move overlay to left */
.container.right-panel-active .overlay-container{transform:translateX(-100%);}

/* Bring signup over signin */
.container.right-panel-active .forgot-password-container{
  opacity:1;
  transform:translateX(100%);
  z-index:5;
}

/* Move overlay back to right */
.container.right-panel-active .overlay{transform:translateX(50%);}

/* Bring back the text to center */
.container.right-panel-active .overlay-left{transform:translateY(0);}

/* Same effect for right */
.container.right-panel-active .overlay-right{transform:translateY(20%);}

.footer{
  margin-top:25px;
  text-align:center;
}

.icons{
  align-items:center;
  display:flex;
  height:30px;
  letter-spacing:15px;
  width:30px;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width:576px){

  .container{width:284px;}

  .container .form-container{width:100% !important;}
  .container.right-panel-active .forgot-password-container{transform:translateX(0%);}

  .overlay-container{display:none;}

  button.responsive{display:block;}

}

/* Medium devices (tablets, 768px and up) */
@media (max-width:768px){


}

/* Large devices (desktops, 992px and up) */
@media (max-width:992px){


}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width:1200px){

}