@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');




















button {





	border-radius: 20px;





	border: 1px solid #d33;





	background-color: #d33;





	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;





}











form {





	background-color: #FFFFFF;





	display: flex;





	align-items: center;





	justify-content: center;





	flex-direction: column;





	padding: 0 50px;





	height: 100%;





	text-align: center;





}

















.container-rec {





	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: 600px;





}








.buttons {





    padding-block: .5rem;





    display: flex;





    gap: 1rem;





}








section{


    display: flex;


    flex-direction: row;


    justify-content: center;


    align-items: center;


}





.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-rec.right-panel-active .sign-in-container {





	transform: translateX(100%);





}











.sign-up-container {





	left: 0;





	width: 50%;





	opacity: 0;





	z-index: 1;





}











.container-rec.right-panel-active .sign-up-container {





	transform: translateX(100%);





	opacity: 1;





	z-index: 5;





	animation: show 0.6s;





}











@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-rec.right-panel-active .overlay-container{





	transform: translateX(-100%);





}











.overlay {





	background: #d33;





	background: -webkit-linear-gradient(to right, #d33, rgb(221, 69, 69));





	background: linear-gradient(to right, #d33, rgb(210, 79, 79));





	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-rec.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-rec.right-panel-active .overlay-left {





	transform: translateX(0);





}











.overlay-right {





	right: 0;





	transform: translateX(0);





}











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





}


























.previous {





	border: 1px solid #d33;





	background-color: #FFFFFF;





	color: #d33;





}











.previous_link{





    margin: 0px 0px 0px 0px !important;





}











.previos_box{





	padding-block: .5rem;





    display: flex;





    gap: 1rem;





	justify-content: center;





}











.pass_recovery{





	height: 30vh;





}








input {





	background-color: #eee;





	border: none;





	padding: 12px 15px;





	margin: 8px 0;





	width: 100%;





}








.container-recovery{





    display: flex;





	align-items: center;





    flex-direction: column;





    justify-content: center;





}