/* RESPONSIVIDADE

All: Para todos os dispositivos
Braille: para dispositivos táteis
Embossed: para dispositivos que imprimem em braile
Handheld: para dispositivos portáteis, geralmente com telas pequenas e banda limitada
Print: para impressão em papel
Projection: para apresentações como PPS
Screen: para monitores de computador, tablets, smartphones, etc.
Speech: para leitores de tela, como os usados por pessoas com deficiência visual

ORIENTAÇÃO
portrait: para telas em modo retrato (vertical)
landscape: para telas em modo paisagem (horizontal)


*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	color: #5D5D7D;
}

.wrapper{
	height: 100vh; /* VIEW HEIGHT (vh)*/
	width: 100vw;
}

.container-left{
	display: inline-block;
	width: 60%;
	padding-left: 136px;
	margin-top: 10%;
}

.container-right{
	display: inline-block;
	background-color: rgba(93, 93, 125, 0.16);
	height: 100em;
	width: 40%;
	position: absolute;
}

.img-girl{
	position: relative;
	top: 5%;
	right: 120px;
}

h1{
	font-size: 70px;
	line-height: 80px;
	

}

p {
	font-size: 28px;
	line-height: 48px;
	opacity: 0.6;
	margin: 15px 0;
	width: 540px;
}

button {
	width: 269px;
	height: 62px;
	background: #9499EA;
	box-shadow: 0px 10px 24px rgba(148, 153, 234, 0.0979959);
	border-radius: 30px;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	color: #FFFFFF;
	cursor: pointer;

}

button:hover{
	opacity: .8;
}

button:active{
	opacity: .5;
}

a{
	font-size: 28px;
	line-height: 41px;
	color: #5D5D7D;
	margin-right: 41px;
	cursor: pointer;

}

a:nth-child(2){
	opacity: 0.4;
}

a:hover{
	opacity: 0.4;
}

a:active{
	opacity: 0.8;
}

header{
	margin: 24px 0 0 57px;
}


/* ****** DISPOSITIVOS MÓVEIS ****** */
@media screen and (max-width: 980px)
{
	.container-left{
		width: 100%;
		height: 15%;
		padding: 0;
		margin: 0;
	}

	.container-right{
		display: block;
		height: auto;
		width: 100%;
		position: static;
		padding: 40px;
	}

	.img-girl {
		position: static; 
		margin-left: 320px;
		max-width: 90%;
		height: 300px;

	}
	header{
		display: none;
	}
	
	h1{
		font-size: 36px;
		line-height: 52px;
		width: auto;
		margin: 58px 50px 0 50px;
		text-align: center;
	}

	p{
		margin: 15px 40px;
		width: auto;
		text-align: center;
		font-size: 18px;
		line-height: 24px;
	}

	button{
		margin: 0 auto;
		display: block;
	}
}