html{
	height:100vh;
}
body{
	height:100%;
}
main{
	flex:1;
}
.loginContainer{
	background-color: var(--bg-primary);
	color: var(--c-text-primary);
	/*border-radius: 10px;*/
	/* -webkit-box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); */
	/* -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
	/* box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); */
	overflow: hidden;
	display: flex;
	flex-direction: row;
	position: relative;
	height: 100%;
}


.loginContainer h1{
	font-weight: bold;
	margin: 0;
}
.loginContainer h2{
	text-align: center;
}
.loginContainer p{
	font-size: 14px;
	font-weight: 100;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}
.loginContainer span{
	font-size: 12px;
}
/*.loginContainer a{*/
/*	color: #333333;*/
/*	font-size: 14px;*/
/*	text-decoration: none;*/
/*	margin: 15px 0;*/
/*}*/
.loginContainer 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;
}
.loginContainer button:active{
	transform: scale(0.95);
}
.loginContainer button:focus{
	outline: none;
}
.loginContainer button.ghost{
	background-color: transparent;
	border-color: #ffffff;
}
.loginContainer form{
	background-color: var(--bg-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}
.loginContainer input{
	background-color: #eeeeee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
}
.loginContainer .form-container{
	position: relative;
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loginContainer .form-container form{
	height: 60%;
	width: 60%;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	/*align-items: center;*/
	/*justify-content: center;*/
}
.loginContainer .form-container form input{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.loginContainer .loginContainer.right-panel-active .sign-in-container{
	transform: translateX(100%);
}
.loginContainer .loginContainer.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;
	}
}
.loginContainer .overlay-container{
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}
.loginContainer.right-panel-active .overlay-container{
	transform: translateX(-100%);
}
.loginContainer .overlay{
	background: #ff416c;
	background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
	background: linear-gradient(to right, #ff4b2b, #ff416c);
	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;
}
.loginContainer.right-panel-active .overlay{
	transform: translateX(50%);
}
.loginContainer .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;
}
.loginContainer .overlay-left{
	transform: translateX(-20%);
}
.loginContainer.right-panel-active .overlay-left{
	transform: translateX(0);
}
.loginContainer .overlay-right{
	right: 0;
	transform: translateX(0);
}
.loginContainer.right-panel-active .overlay-right{
	transform: translateX(20%);
}
.loginContainer .social-container{
	margin: 20px 0;
}
.loginContainer .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;
}