.leftside, .rightside{
  height: 50vh;
  width:100%;
}

@media screen and (min-width:750px)
{
.leftside, .rightside{

  height:100vh;
}

}



.leftside{
background-color: aquamarine;

}

.rightside{
  background-color: whitesmoke;

}

/* slider box*/
*{
  box-sizing:border-box;
}

body{

font-family:'montserrat', sans-serif;
background:paleturquoise;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
margin:-20px 0 50px ;

}

h1{

  font-weight:bold;
  margin:0;
}

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;
text-decoration:none;
margin:15px 0;

}

.container{
 background: #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:480px;

}

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

}



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

}

button{
 border-radius: 20px;
 border:1px solid #ff4b2b;
 background:#ff4b2b;
 color:#fff;
 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:transparent;
border-color:#fff;
}

.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;

}

.sign-up-container{
  left:0;
  width:50%;
  opacity:0;
  z-index: 2;

}

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

}

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

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

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

.overlay-left {
  transform: translatex(-20%);
 }
/*Animation*/

/* Move Sign In to the right side*/
.container.right-panel-active.sign-in-container{
  transform:translateX(100%);
}
/* Move overlay to the left side*/
.container.right-panel-active.overlay-container{
  transform:translateX(-100%);
}

/*Overlap Sign Up Over Sign In*/
.container.right-panel-active.overlay-container .sign-up-container{

  transform:translateX(100%);
  opacity:1;
  Z-index:5;
}

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

.container.right-panel-active.overlay-left{
  transform:translateX(0);
 }

 .container.right-panel-active.overlay-right{
  transform:translateX(20%);
 }