/*IMPORTAÇÃO DAS FONTES DO SITE DO SITE DO GOOGE FONTS */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

*{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}

body{

	font-family: 'Open Sans', sans-serif;

}

input:-webkit-autofill{

	-webkit-box-shadow: 0 0 0px 1000px #ecf0f1 inset !important;

	-webkit-text-fill-color: #000 !important;

}

.container{

	display: flex;

	justify-content: center;

	align-items: center;

	height: 100vh;

	background-color: #ecf0f1;

}

.content{

	border-radius: 15px;

	background-color: #ffffff;

	width: 80%;

	height: 60%;

	justify-content: space-between;

	align-items: center;

	position: relative;

}

.content::before{

	content: "";

	position: absolute;

	background-color: #1abc9c;

	width: 40%;

	height: 100%;

	border-top-left-radius: 15px;

	border-bottom-left-radius: 15px;

	left: 0;

}

.title{

	font-size: 28px;

	font-weight: bold;

	/*text-transform: capitalize;*/

	color: #58af9b;

}

.title-primary{

	color: #fff;

}

.description{

	font-size: 14px;

	font-weight: 300;

	line-height: 30px;

	color: #fff;

}

.description::first-letter{

	text-transform: capitalize;	

}

.description-primary{

	color: #fff;

}

.description-second{

	color: #7f8c8d;

}

.description.description-second.sogi{

	color: #7f8c8d;

	margin-top: 10px;

	font-size: 10px;

}

.description.description-primary.sogi{

	color: #fff;

	margin-top: 10px;

	font-size: 10px;

}

.btn{

	border-radius: 15px;

	text-transform: uppercase;

	color: #fff;

	font-size: 10px;

	padding: 10px 50px;

	cursor: pointer;

	font-weight: bold;

	width: 200px;

	align-self: center;

	border-width: 0px;

	margin-top: 1rem;

}

.btn-primary{

	background-color: transparent;

	border: 1px solid #fff;

	transition: background-color .5s;	

}

.btn-primary:hover{

	background: #fff;

	color: #58af9b;

}

.btn-second{

	background-color: #1abc9c;

	border-radius: 1px solid #1abc9c;

	transition: background-color .5s;

}

.btn-second:hover{

	background-color: #fff;

	border: 1px solid #58af9b;

	color: #58af9b;

}



/****** FIRST CONTENT *******/



.first-content{

	display: flex;

}

.first-content .second-column{

	z-index: 11;

}

.first-column{

	text-align: center;

	width: 40%;

	z-index: 10;

}

.second-column{

	width: 60%;

	display: flex;

	flex-direction: column;

	align-items: center;

}

.social-media{

	margin: 1rem 0;

}

.list-social-media{

	display: flex;

	list-style-type: none;

}



.item-social-media{

	border: 1px solid #95a5a6;

	border-radius: 50%;

	width: 35px;

	height: 35px;

	line-height: 35px;

	text-align: center;

	color: #95a5a6;

}

.link-social-media:not(:first-child){

	margin-left: 15px;

}

.link-social-media:hover .item-social-media{

	background-color: #58af9b;

	color: #fff;

	border: #58af9b;

}

.link-social-media .item-social-media{

	transition: background-color .5s;

}

.form{

	display: flex;

	flex-direction: column;

	width: 55%;

}

.form input{

	height: 25px;

	border: none;

	width: 100%;

	background-color: #ecf0f1;

	margin: 8px;

}

.form select{

	height: 25px;

	border: none;

	width: 100%;

	background-color: #ecf0f1;

	margin: 8px;

}

.label-input{

	background-color: #ecf0f1;

	display: flex;

	align-items: center;

	margin: 8px;

}

.icon-modify{

	color: #7f8c8d;

	padding: 0 5px;

}



/******* SECOND CONTENT ********/



.second-content{

	position: absolute;

	display: flex;

}

.second-content .first-column{

	order: 2;

	z-index: -1;

}

.second-content .second-column{

	order: 1;

	z-index: -1;

}

.password{

	color: #34495e;

	font-size: 14px;

	margin: 15px 0;

	text-align: center;

}

.password::first-letter{

	text-transform: capitalize;

}



.sign-up-js .content::before{

	animation: slideLeft .5s;

	z-index: 12;

}



.sign-in-js .first-content .first-column{

	z-index: -1;

}



.sign-in-js .second-content .second-column{

	z-index: 11;

}



.sign-in-js .second-content .first-column{

	z-index: 13;

}



.sign-in-js .content::before{

	left: 60%;

	border-top-right-radius: 15px;

	border-bottom-right-radius: 15px;

	border-top-left-radius: 0px;

	border-bottom-left-radius: 0px;

	animation: slideRight .5s;

	z-index: 12;

}



.sign-up-js .first-content .second-column{

	z-index: 11;

}

.sign-up-js .first-content .first-column{

	z-index: 13;

}

.sign-up-js .second-content .first-column,

.sign-up-js .second-content .second-column{

	z-index: -1;

}



.sign-in-js .first-content .second-column{

	z-index: -1;

	position: relative;

	animation: deslocaConteudoLeft .5s;

}

.sign-up-js .second-content .second-column{

	z-index: -1;

	position: relative;

	animation: deslocaConteudoRigth .5s;

}



/* ANIMAÇÃO CSS */



/* ANIMAÇÃO DO CONTEÚDO*/

@keyframes deslocaConteudoLeft{

	from{

		left: 0;

		opacity: 1;

		z-index: 12;

	}

	25%{

		left: -80px;

		opacity: .5;

	}

	50%{

		left: -100px;

		opacity: .2;

	}

	to{

		left: -110px;

		opacity: 0;

		z-index: -1;

	}

}



@keyframes deslocaConteudoRigth{

	from{

		left: 0;

		z-index: 12;

	}

	25%{

		left: 80px;

		opacity: .5;

	}

	50%{

		left: 100px;

		opacity: .2;

	}

	to{

		left: 110px;

		z-index: -1;

	}

}





/* ANIMAÇÃO DO PISEUDO BEFORE */

@keyframes slideRight{

	from{

		left: 0;

		width: 40%;

	}

	10%{

		width: 50%;

	}

	20%{

		width: 60%;

	}

	30%{

		width: 70%;

	}

	40%{

		width: 80%;

	}

	50%{

		left: 10%;

		width: 90%;

	}

	60%{

		left: 20%;

		width: 80%;

	}

	70%{

		left: 30%;

		width: 70%;

	}

	80%{

		left: 40%;

		width: 60%;

	}

	90%{

		left: 50%;

		width: 50%;

	}

	to{

		left: 60%;

		width: 40%;

	}

}



@keyframes slideLeft{

	from{

		left: 60%;

		width: 40%;

	}

	10%{

		left: 40%;

		width: 50%;

	}

	20%{

		left: 30%;

		width: 60%;

	}

	30%{

		left: 20%;

		width: 70%;

	}

	40%{

		left: 10%;

		width: 80%;

	}

	50%{

		left: 0;

		width: 90%;

	}

	60%{

		width: 80%;

	}

	70%{

		width: 70%;

	}

	80%{

		width: 60%;

	}

	90%{

		width: 50%;

	}

	to{

		left: 0;

		width: 40%;

	}

}



/*

 *

 *

 *CSS RESPONSIVO PARA MOBILE

 *

 *

 */

@media screen and (max-width: 980px){

	.content{

		width: 100%;

		height: 100%;

	}

	.content::before{

		width: 100%;

		height: 33%;

		top: 0;

		border-radius: 0;

	}

	.first-content, .second-content{

		flex-direction: column;

		justify-content: space-around;

	}

	.first-column, .second-column{

		width: 100%;

	}



	.sign-in-js .content::before{

		top: 65%;

		height: 35%;

		left: 0;

		border-radius: 0;

	}

	.form{

		width: 50%;

	}



	/* ANIMAÇÃO CSS MOBILE */



	/* ANIMAÇÃO DO CONTEÚDO*/

	/*ONDE O ESQUERDO SERIA O TOP*/

	@keyframes deslocaConteudoLeft{

		from{

			top: 0;

			opacity: 1;

			z-index: 12;

		}

		25%{

			top: -80px;

			opacity: .5;

		}

		50%{

			top: -100px;

			opacity: .2;

		}

		to{

			top: -110px;

			opacity: 0;

			z-index: -1;

		}

	}



	@keyframes deslocaConteudoRigth{

		from{

			top: 0;

			z-index: 12;

		}

		25%{

			top: 80px;

			opacity: .5;

		}

		50%{

			top: 100px;

			opacity: .2;

		}

		to{

			top: 110px;

			z-index: -1;

		}

	}





	/* ANIMAÇÃO DO PISEUDO BEFORE ANIMAÇÃO CSS MOBILE */

	@keyframes slideRight{

		from{

			top: 0;

			height: 40%;

		}

		10%{

			height: 50%;

		}

		20%{

			height: 60%;

		}

		30%{

			height: 70%;

		}

		40%{

			height: 80%;

		}

		50%{

			top: 10%;

			height: 90%;

		}

		60%{

			top: 20%;

			height: 80%;

		}

		70%{

			top: 30%;

			height: 70%;

		}

		80%{

			top: 40%;

			height: 60%;

		}

		90%{

			top: 50%;

			height: 50%;

		}

		to{

			top: 60%;

			height: 40%;

		}

	}



	@keyframes slideLeft{

		from{

			top: 60%;

			height: 40%;

		}

		10%{

			top: 40%;

			height: 50%;

		}

		20%{

			top: 30%;

			height: 60%;

		}

		30%{

			top: 20%;

			height: 70%;

		}

		40%{

			top: 10%;

			height: 80%;

		}

		50%{

			top: 0;

			height: 90%;

		}

		60%{

			height: 80%;

		}

		70%{

			height: 70%;

		}

		80%{

			height: 60%;

		}

		90%{

			height: 50%;

		}

		to{

			top: 0;

			height: 40%;

		}

	}

}

@media screen and (max-width: 360px){

	.form{

		width: 90%;

	}
	.hide{
		display: none;
	}

}

/*Fim so CSS responsivo para MOBILE*/