/*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: 100%;

	height: 100%;

	justify-content: space-between;

	align-items: center;

	position: relative;

}



.content::before{

	content: "";

	position: absolute;

	background-color: #16a085;

	width: 100%;

	height: 40%;

	border-top-left-radius: 15px;

	border-top-right-radius: 15px;

	top: 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;

}



.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: #58af9b;
	border-radius: 1px solid #58af9b;
	transition: background-color .5s;
	margin-bottom: 20px;
}



.btn-second:hover{

	background-color: #fff;

	border: 1px solid #58af9b;

	color: #58af9b;;

}



/****** FORMATAÇÃO DE IMAGEM DE PERFIL NA TELA DE ALTERAÇÃO DA IMÁGEM ******/

.img-profile{

	width: 100px;

	height: 100px;

	border-radius: 50px;

	border: 5px solid #fff;

}



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



.first-content{

	display: flex;

	flex-wrap: wrap;

}

.first-content .second-column{

	z-index: 11;

}

.first-column{

	text-align: center;

	width: 100%;

	z-index: 10;

}

.second-column{

	width: 100%;

	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: 100%; */
}

.form input{height: 25px;border: none;width: 100%;background-color: #ecf0f1;margin: 4px;}

.form select{
height: 25px;
border: none;
width: 100%;
background-color: #ecf0f1;
margin: 4px;
}

.label-input{
background-color: #ecf0f1;
display: flex;
align-items: center;
margin: 8px auto auto auto;
width: 260px;
}

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

}















































/*CSS RESPONSIVO PARA MOBILE*/

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



	.content{

		width: 100%;

		height: 100%;

	}



	.content::before{
		width: 100%;
		height: 55%;
		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: 30%;
		left: 0;
		border-radius: 0;
	}


	.form{
width: 100%;
}

}

/*Fim so CSS responsivo para MOBILE*/