body {
	/*background: #d2d2c1 url('imagens/fundo.png'); /* O fundo será a imagem. Mas se esta n carregar, será a cor*/
	background: url(imagens/fundo2.png); /*#F2F5A9;*/
	font: 16px sans-serif;
}

#principal-index {
	width: 1320px;		
	margin-left: 10px;
	margin-right: 10px;
}


#email{
	color: white;
}


#principal-contato {
	/*margin: 0;
	padding: 0;
	box-sizing: border-box;*/
	font-family: sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background:#101026;
	/* border: 1px solid red;
	Só para desmonstrar o tamanho da div
	*/
	
	/* height: 500px; 
	Eu poderia definir uma altura desta forma. Caso eu não defina, a largura será de acordo com o conteúdo
	*/
}

section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 10px, 45px;
	background: #1d1d2e;
	width: 500px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
/* usar o box shadow
https://getcssscan.com/css-box-shadow-examples
*/

section h2 {
	color: #f5f5f5;
	font-size: 2.5rem;
	margin: 2rem;
}

section form {
	display: flex;
	flex-direction: column;	
	width: 90%;
}

form label {
	color: #f5f5f5;
	font-size: 17px;
	margin-bottom: 4px;
}

form input {
	padding: 15px;
	outline: none;
	border: 0;
	margin-bottom: 20px;
	font-size: 15px;
	transition: all 0.5s;
}

form input:focus {
	border-radius: 16px;
}

form textarea {
	padding: 10px;
	outline: none;
	border: 0;
	font-size: 16px;
	margin-bottom: 30px;
	transform: all 0.5s;
}

form textarea:focus {
	border-radius: 16px;
}

form button {
	margin-bottom: 20px;
	padding: 15px;
	cursor: pointer; /* coloca a mãozinha em cima do button */
	font-size: 16px;
	background: transparent;
	border: 2px solid #f5f5f5;
	color: #f5f5f5;
	transition: all 1s;
}	

form button:hover{
	background: #f5f5f5;
	color: #101026;
	border-radius: 16px;
}

#menu-contato {
	 /* Aplica um espaçamento interno */
	float: right;
	margin: 30px 100px 0px 0px;		
}


.clique a:hover{
	background: white;	
	color: #101026;
	text-decoration: none;	
		
}

#m1 a:hover{
	background: #a9901e;
	color: #101026;
}

#m2 a:hover{
	background: #a9901e;
	color: black;
}

#m3 a:hover{
	background: #a9901e;
	color: black;
}

#m4 a:hover{
	background: #a9901e;
	color: black;
}

#m1{
	margin-left: 29px;
	float: right;
}

#m2{
	margin-left: 29px;
	float: right;
}

#m3{
	margin-left: 29px;
	float: right;
}

#m4{
	margin-left: 29px;
	float: right;
}

#menu-index {
	background: #c7dffd;
	margin-top: -5px;
	padding: 18px; /* Aplica um espaçamento interno */
	/*box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
*/}


#conteudo-index {
	background: #101026;
	padding: 10px;
	height: 700px;
}

#conteudo-nossos-servicos {
	background: #101026;
	/*padding: 10px;*/
	height: 750px;	
}

#conteudo-clientes {
	background: #101026;
	/*padding: 10px;*/
	height: 1300px;	
}

#pacheco{
	display: flex;
	/*flex-direction: column;*/
	
}

#estacaonet{
	display: flex;
	/*flex-direction: column;*/
	
}

#pontomix{
	display: flex;
	/*flex-direction: column;*/
	
}

#belaferraz{
	display: flex;
	/*flex-direction: column;*/
	
}

#kinoplex{
	display: flex;
	/*flex-direction: column;*/
	
}

#parme{
	display: flex;
	/*flex-direction: column;*/
	
}

#starbucks{
	display: flex;
	/*flex-direction: column;*/
	
}

#casaevideo{
	display: flex;
	/*flex-direction: column;*/
	
}

#filho-logo{
	margin-top: 20px;	
	margin-left: auto;
	margin-right: auto;	
	height: 100px;
	padding: 20px;

}

#filho{
	margin-top: 20px;	
	margin-left: -70px;
	margin-right: 20px;	
	width: 65%;
	height: 100px;
	padding: 20px;
	font-size: 18px;
}




h1 {
	color: white;
	font-size: 30px;
	margin-left: 15px;	
}

p {
	color: white;
	line-height: 1.6;
	text-indent: 30px;	
	text-align: justify;		
	margin: -5px 20px 0px 20px;
}

a {
	/*color: black;*/
	text-decoration: none; /* para remover o underline no link */
	font-weight: bold;
	/* border: 1px solid red; */
	padding: 5px;
	font-size: 17px;
}


a:hover{
	color: #101026;
	background-color: white;	
	border-radius: 16px;
}

#conteudo-dividido{
	float: left;
	margin-left: 20px;
	margin-top: 20px;	
}

#conteudo-liberdade{
	float: left;
	margin-left: 20px;
	margin-top: 20px;	
	
}

.missao{
	color: white;	
}

#div-missao{
	float: right;	
	width: 700px;	
	padding: 20px;
	margin-right: 20px;
}

#div-texto-liberdade{
	float: right;	
	width: 700px;	
	padding: 20px;
	margin-right: 20px;	
	margin-bottom: -50px;
}


#div-texto-liberdade-2{
	float: left;
	padding: 15px;
	margin-top: 15px;


}

.rodape {
	text-align: center; /* cener, left, right */	
}

.rodape-cor{
	color: black;
	font-size: 12px;
	text-align: center;
	padding: 30px;
}

.img-campanha {
	border: 10px solid #c3c3ae;
}

#area-logo {
	padding-bottom: 5px;
	background-color: white;
}

#whats {	
	position: fixed; /* fixar a div em determinado lugar p sempre */
	top: 25px; /* localização da div */
	right: 20px;
	z-index: 9999; /* priorizar uma div em cima de outras 
	z-indez 3 fica por cima da 2 que fica por cima da 1 */
}

#whats-contato {	
	position: fixed; /* fixar a div em determinado lugar p sempre */
	bottom: 25px; /* localização da div */
	right: 20px;
	z-index: 9999; /* priorizar uma div em cima de outras 
	z-indez 3 fica por cima da 2 que fica por cima da 1 */
}

/*
.lateral {
	background: #1d1d2e;
	border: 1px solid gray;
	width: 320px;
	height: 1100px;
	float: right;
	margin: 50px;
}*/

.main-obrigado{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #101026;
	flex-direction: column;
}

.text-obrigado{
	font-size: 45px;
	color: #f5f5f5;
	margin-bottom: 30px;
}

.paragrafo-obrigado{
	color: #f5f5f5;
	margin-bottom: 50px;
}

.button-obrigado{
	padding: 15px, 55px;
	background: #f5f5f5;
	text-decoration: none;
	color: #101026;
	font-size: 18px;
	transition: all 0.5s;
}

.button-obrigado:hover{
	border-radius: 16px;
}



/* nossos-servicos.html */

.subtitulo{
	font-weight: bold;
	color: yellow;
	line-height: 1.6;
	text-indent: 30px;	
	text-align: justify;		
	margin: -5px 20px 0px 20px;
	font-size: 20px;
}

.subtitulo-texto-obrigatoriedade{
	font-weight: bold;
	color: yellow;
	line-height: 1.6;
	text-indent: 30px;	
	text-align: justify;		
	margin: -5px 20px 0px 20px;
	font-size: 20px;	
}