body{
	font-family: Nunito, sans-serif;
	color: #1c1c1c;
}

h1,h2,h3,h4,h5{
	font-family: Asap, sans-serif;
	color: #000000;
}

.botao{
	color: #FFFFFF;
	text-decoration: none;
	padding: 10px 30px;
	background-color: #142156;
	font-size: .9em;
	border-radius: 3px;
}

nav{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #142156;
}

nav > a{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: 800;
	font-size: 32px;
	font-family: Yellowtail, serif;
}

nav ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	padding: 0;
	width: 100%;
}

nav ul li{
	text-align: center;
	width: 100%;
}

nav ul li a{
	display: inline-block;
	padding: 10px 0;
	width: 100%;
	text-decoration: none;
	color: #FFFFFF;
}

header{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px;
}

header p{
	margin-bottom: 2em;
}

#sobre{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 10px 10px 20px 20px;
	background-color: #142156;
	color: #FFFFFF;
}

#sobre h2{
	color: #FFFFFF;
}

#sobre p{
	margin-bottom: 2.5em;
	max-width: 1000px;
}

#sobre .botao{
	background-color: #f1f1f1;
	color: #1c1c1c;
}

#pricipios{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#principios div{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-right: 25%;
	margin-left: 25%;
	margin-top: 30px;
}

#principios h2{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 30px;
}

#principios img{
	width: 80%;
}

#contato{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px;
	text-decoration: none;
}

#contato div p a{
	color: #142156;
	text-decoration: none;
}

#contato div img{
	height: 5em;
}

#contato h2{
	color: #000000;
}

footer{
	text-align: center;
	padding: 10px;
	background-color: #142156;
	color: #FFFFFF;
}

footer a{
	text-decoration: none;
	color: #00FFFF;
}

@media screen and (min-width: 768px){
	nav{
		flex-direction: row;
		justify-content: space-around;
	}
	nav ul{
		flex-direction: row;
		width: 70%;
	}
	header{
		height: 600px;
		height: 60vh;
		justify-content: center;
	}
	#sobre{
		height: 150px;
		height: 15vh;
		justify-content: center;
		min-height: 250px;
	}
	
	#contato{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		max-width: 500px;
		margin: 0 auto;
	}

	#contato h2, #contato h3{
		padding: 10px;
		width: 100%;
	}

}