* {
    margin: 0;
    padding: 0;
    border: 0;
}  

/* Começo da parte que controla a estrura de PC, Celular e Tablet automaticamente */


/* Header */
header {

	height: 8%;
}

/*COMEÇO da parte que controla a largura da parte onde vai a foto e texto */

#Quadro_Foto_Cliente{}

.Quadro_Foto_Cliente{
	width: 27%;
	float: left;
	margin-top: 15px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-left: auto;
	margin-right: auto;
}

#Quadro_Fotos_Aleatorias_Principal{}

.Quadro_Fotos_Aleatorias_Principal{
	width: 330px;
	margin-top: 160px;
	padding-left: 10px;
	margin-left: auto;
	margin-right: auto;
}

#Quadro_Fotos_Aleatorias{}

.Quadro_Fotos_Aleatorias {
    width: 48%;
    float: left;
    margin-top: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 15px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#Quadro_Texto{}

.Quadro_Texto {
	width: 48%;
	float: left;
	margin-top: 15px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 10px;
	padding-right: 15px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	text-align: justify;
	margin-left: auto;
	margin-right: 10px;
	background:url("../imagens/Degrade Menu.png");
	color: #FFFFFF;
}

#Outros{}

.Outros {
	width: 20%;
	float: left;
	margin-top: 15px;
	padding-bottom: 1px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	padding-right: 10px;
	text-align: center;

}

/*FIM da parte que controla a largura da parte onde vai a foto e texto */


#Quadro_Geral {
	width: 100%;
    background-image: url("../imagens/Fundo_Site.png");
	background-repeat: repeat-x;
	margin-left: auto;
	margin-right: auto;
}

.Quadro_Geral:after {
	align-content: center; 
	text-align: center;
	content: "";
    display: table;
    clear: both;
}

#Retangulo_Menu {
	width: 100%;
	padding-top: 10px;

}

.Retangulo_Menu:After{
	align-content: left; 
	content: "";
    display: table;
    clear: both;
}


#Div_Nome {
	width: 100%;
	height: 100px;
	padding-top: 40px;
	align-content: center;
}

.div_nome{
	text-shadow: #FF7600 10px 4px 13px;
	font-size: 50px;
	text-align: center;
	color: #131211;
	font-family: sans-serif;
	font-weight:bold;
}


#Retangulo_Cliente_Foto_Texto{
	width: 100%;
	align-content: center; 
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.Retangulo_Cliente_Foto_Texto:After{
	content: ""; 
    display: table;
    clear: both;
}

.Retangulo_Texto:after{
	
	/* Adiciona efeitos ou comandos depois da função principal do navegador para enganar ele */
	
	align-content: left; 
	content: ""; /*Usa-se esse comando para para uma DIV aparecer com conteúdo na página de html.*/
    display: table;
    clear: both;
}

#quadro_central_fotos {
    width: 300px;
	height: 300px;
	float: left;
    text-align: center;
    position: relative;
    margin-top: 10%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 10px;	
}

#Retangulo_central_redes_sociais{
	width: 100%;
	background: #313331;
	text-align: center;

}

.Retangulo_central_redes_sociais:after {
	content: "";
    display: table;
    clear: both;
	align-content: center;
}


#Retangulo_Redes_Sociais {

}

.Retangulo_Redes_Sociais{
    width: 295px;
	height: 43px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#Quadrado_sociais {
    width: 36px;
    height: 36px;
    font-style: normal;
	margin: 3px;
	text-align: center;
	align-content: center;
	float: left;
}

#Retangulo_Rodape{
	width: 100%;
	text-align: center;

}

.Retangulo_Rodape:after {
	content: "";
    display: table;
    clear: both;
	align-content: center;
	margin-left: auto;
	margin-right: auto;
}

#botao{
	
}

.botao {
	width: 200px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.botao:hover {
	background-color: #53413C;
	color: #FFFFFF;
	cursor: pointer;
}

#copyright{
	
}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	margin-left: auto;
	margin-right: auto;
}

#Quadro_Video{}

.Quadro_Video{
	width: 31%;
	height: 250px;
    float: left;
    margin-top: 15px;
    padding: 2px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    align-content: center;
    margin:4px;
	border: 3px solid #FFFFFF;
	background: url("../imagens/Degrade Menu.png");
	margin-left: auto;
	margin-right: auto;
}

#Retangulo_Video_Texto{}

.Retangulo_Video_Texto{
	width: 94%;
	height: 80px;
    margin: 5px;
	padding-top: 10px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    align-content: center;
	color: #FFFFFF;
	font-weight: bold;
}

#Retangulo_Video{}

.Retangulo_Video{
	width: 94%;
	height: 160px;
    margin: 5px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    align-content: center;
	color: #ffffff;
}

#iframe{}

.iframe{
	
	width: 100%;
	height: 160px;
}