@charset "UTF-8";

@import
	url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	
	body{
		margin: 0;
		font-family: "IBM Plex Sans", sans-serif, 'Montserrat ital';
	}
	
	body * {
		box-sizing: border-box;
	}
	
	.main-login{
		width: 100vw;
		height: 100vh;
		background-color: #eaeef0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.left-login{
		width: 50vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.left-login > h1{
		font-size: 3vw;
		color: #000000;
	}
	
	.left-image-login{
		width: 35vw;
	}
	.right-login{
		width: 50vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.card-login{
		width: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 30px 35px;
		background: #c3cee0;
		border-radius: 15px; 
		box-shadow: 0px 10px 40px #caccee;
	}
	
	.card-login > h1 {
		color: #000000;
		font-weight: 800;
		margin: 0;
	}
	
	.textfield{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		margin: 10px 0px;
	}
	
	.textfield > input{
		width: 100%;
		border: none;
		border-radius: 10px;
		padding: 15px;
		background: #ebebeb;
		color: #000000;
		font-size: 12pt;
		outline: none;
		box-sizing: border-box;
	}
	
	.textfield > label{
		color: #060c5f;
		margin-bottom: 10px;
	}
	
	.btn-login{
		width: 100%;
		padding: 16px 0px;
		margin: 15px;
		border: none;
		border-radius: 8px;
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 3px;
		color: #000000;
		background: #aeb1e2;
		cursor: pointer;
		box-shadow: 0px 10px 40px -12px #627db0;
	}

	.btn-convidado{
		width: 100%;
		margin: 5px;
		border: none;
		border-radius: 8px;
		text-transform: uppercase;
		font-weight: 300;
		letter-spacing: 3px;
		color: #000000;
		background: #aeb1e2;
		cursor: pointer;
		box-shadow: 0px 10px 40px -12px #627db0;
	}
	
footer{
    position: absolute;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 30px;
    justify-content: center;
    align-items: center;
}

footer a{
    text-decoration: none;
    color: #070c58;
}

footer p{
    font-weight: bold;
    text-align: center;
    font-size: 11px;
}
	
	@media only screen and (max-width: 950px){
		.card-login{
			width: 85%
		}
	}
	
	@media only screen and (max-width: 600px){
		.main-login{
			flex-direction: column;
		}
		.left-login > h1{
			display: none;
		}
		.left-login{
			width: 100%;
			height: auto;
		}
		.right-login{
			width: 100%;
			height: auto;
		}
		.left-image-login{
			width: 50vh;
		}
		.card-login{
			width: 90%;
		}
	}