body { 
	font-family: 'Montserrat', sans-serif;
}

main {
	background: linear-gradient(#FEFEFE, #888888);

}

header {
	background: #BBBBBB;
	box-shadow: inset 0 0 15PX #7B564D;

}

/* Defintir a margem no 'main' */

.caixa {
	position: relative;
	width: 940px;
	margin: 0 auto;

}

h2 {
	font-size: 30px;
	font-family: 'Lobster', cursive;
	position: absolute;
	top: 100px;
	left: 250px;

}

nav {
	position: absolute;
	top: 110px;
	right: 0;

}
nav li {

	display: inline;
	margin: 0 0 0 15px;

}


nav a {
	text-transform: uppercase;
	color: #000000;
	font-weight: bold;
	font-size: 22px;
	text-decoration: none;

}

nav a:hover {

	color: #C78C19;
	text-decoration: underline;
	transition: 0.3s;


	/*COR DO TEXTO DIFERENTE DA BORDA 

	color: #C78C19;
	border: 2px solid black ;
	padding: 1px;
	border-radius: 4px;*/

}


.banner {
    width: 99.5%;
    height: 750px;
    object-fit: cover;
    border: 5px solid black;
    object-position: 0 73%;
}

.titulo-principal {
	text-align: center;
	font-size: 2em;
	clear: left;
	padding: 1em 0;
	color: rgba(0,0,0,0.7);
	font-weight: bold;
	text-shadow: 1px 1px grey;

}

/*

.titulo-principal:firstletter {
    font-style: italic;
}

.titulo-principal:before{
	content: "[ ";

}.titulo-principal:after {
	content: " ]";
} */



/*
p:first-line {
	font-style: italic;

} */

.principal {
	width: 940px;
	margin: 1em auto;
	

}

.principal p  {
		/* Topo, direita, baixo, esquerda, em pixels */
	margin: 0 0 1em;
	font-size: 22px;
	
}

.principal strong {
	font-weight: bold;

}

.principal em {
	font-style: italic;
	
}

.utensilios{
	width: 150px;
	float: left;
	margin: 22px 20px 60px 0;


}

.itens {
	font-family: font-family: 'Montserrat', sans-serif;
	font-style: italic;
	line-height: 1.5;

}

.itens:before {

	content: "•";

}

/* first-child || nth-child(2n) vai de 2 em 2 */
.itens:nth-child(1) {
	font-weight: bold;

}


.mapa{
	padding: 3em 0;


}

.mapa-conteudo {
	padding: 1em 0;
	width: 940px;
	margin: 0 auto;
	
}

.mapa p {
	margin: 15px;
	text-align: center;
	font-size: 20px;

}

.beneficios {
	padding: 3em 0;
	/*inset= sombra interna, 0 0= posicionada a partir do centro, espaçamento para FUNCIONAR cor, */
	
	

}

.conteudo-beneficios {
	width: 940px;
	margin: 0 auto;


}

.lista-beneficios {
	width: 40%;
	display: inline-block;
	vertical-align: 120px;
	font-size: 23px;

}

.imagem-beneficios {

	/*Como fazer cálculos
		width:calc (60% - ((26px * 4) /4);
	*/

	width: 60%;
	opacity: 0.9;

	/*EixoX, EixoY,BLur(espalhamento), Intensidade da borda(o quão mais ela vai se espalhar a partida da borda. Lembrar do rgba caso queira colocar opacidade*/
	box-shadow: 
	10px 10px 5px 5px grey, 
	-10px -10px  black;
	/*-20px 20px rgba(255,0,0,50%);*/

	
}

.imagem-beneficios:hover {
	width: 60%;
	opacity: 0.65;
	transition: 0.3s;
	/* */
	
}

.video {
	width: 560px;
	margin: 2em auto;
	

}

footer {
	text-align: center;
	background: url("bg.jpg");
	padding: 40px 0px;
	color: white;

}

/* VISIBILIDADE NO DESKTOP E NAO NO CELULAR

@media screen and (min-width: 501px) {
.teste {
     	visibility: visible;

	}
}

@media screen and (max-width: 500px) {
	.teste {
		visibility: hidden;

	}

} */

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

	.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video{
	width: auto;

	}

	header {	
		height: 350px;

	}

	h1 {
		text-align: center;

	}

	h2 {
		text-align: center;
		position: static;

	}

	nav {
		position: static;
		margin: 20px 0;
		text-align: center;

	}

	main {
		padding: 0 0 10px 0;

	}

	.utensilios {  
		margin: 15px 15px 13px 0;

	}

	.principal{
		padding: 0.5em;
		width: 80%;
		margin: 15px auto;

	}

	.principal > p {
		font-size: 19px;

	}


	.titulo-principal {
		padding: 0.5em;
		width: 80%;

	}

	 .mapa, .beneficios {
		padding: 0.5em;
		width: 80%;
		margin: 15px auto;
		

	}

	h4 {
		padding: 0.5em;

	}

	.lista-beneficios {
		width: 100%;
		font-size: 15px;
		text-align: center;
	}

	.imagem-beneficios {
		text-align: center;
	    width: 90%;
	    margin: 20px;
	    margin-top: -70px;

	}

	.video {
		width: 90%;
	}

}

/*

main > p {
	background: red;
		Selecioanr apenas os filhos diretos do main
}

img + p {
	background: blue;
		Selecionar o primeiro parágrafo depois de imagens

}

img ~ p {
	background: yellow;
		Selecionar todos os parágrafos depois de imagens 

}

.principal p:not(#missao) {
	background: orange;
		Exclusão. Selecionar todos os parágrafos, menos o da missao

		EX: Como selecionar O último h2: Resposta= section > p + h2
		 	<h2>
			<section>
			<h2>
			<p>
			</p>
		    <h2> 

} */



/* Forma de gradiente

.externo{
        display: flex;
        align-items: center;
        width: 50rem;
        height: 20rem;
        overflow: hidden;
        background-color: grey;
    }
.interno{
        margin-left: auto;
        margin-right: auto;
        width: 49rem;
        height: 19rem;
        box-shadow: #000 0px 0px 1rem;
    }
    */