@charset "utf-8";

*{
margin: 0;
padding: 0;
box-sizing: border-box;

}

html{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    background-color:#FFFFFF;
    
}

body{
width: 90%;
min-height: 100vh;
background-color: #FFFFFF;
font-size: 1.0rem;
display: flex;
flex-direction: column;
align-items: center;


}

strong, b {
    font-weight: bold;} /*para correção do browser que não me deixava obter resultado com a teg STRONG ou BOLD. se substituir o BOLD por 700 tenho o mesmo resultado*/

/* ################## INICIO DA FORMATAÇÃO RESPONSIVA DA PÁGINA DAS POLITICAS ####################################*/


.contentor-politica{
    max-width: 1100px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#FFFFFF;
    margin-top: 20px;
    
}

.contentor-politica #cabecalho{

    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
   }

#cabecalho img{
    width: 100%;
    border: 1px solid #cb6614;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(255,0,0, 0.7);
    padding: 3px;
}

#cabecalho h1{
width: 90%;
text-align: center;
font-weight:bold;
color: #FFF;
margin-top: 15px;
background-color: #cb6614;
border-radius: 8px;
}


#principal{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    border-radius: 8px;
    margin-top: 20px;
}

 #principal h1, h2, h3{
    width: 90%;
    text-align: center;
    margin-top: 10px;
    color: #000080;
    font-weight: 700;
 }  

 #principal h4{
    width: 90%;
    text-align: left;
    color: #000080;
    font-weight: 500;
}  

 #principal p{
    width: 90%;
    text-align: justify;
    margin-top: 0px;
}
     
#principal hr{

    width: 90%;
    border: 1px solid #cb6614;

}

#rodape{
width: 90%;
height: 50px;
background-color: #FFFFFF;
margin-top: 5px;
margin-bottom: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}

#link-botao{
    display: block;
    padding: 3px 15px;
    background-color: #cb6614;
    color:#FFFFFF;
    border-radius: 8px;
    align-content: space-between;
    text-decoration: none;

}
#link-botao:hover{
    background-color: #FFFFFF;
    color: #cb6614;
    border: 1px solid #cb6614;
}


@media (max-width: 600px) {
    #cabecalho h1{font-size: 1.5em;}
    #principal h2, h3{font-size: 1.2em;}
    #principal h4{font-size: 1em;}
    #principal p{font-size: 0.875em;}
    #link-botao{font-size: 0.8em;}
}

@media (min-width: 601px) and (max-width:1024px) {
    #cabecalho h1{font-size: 2.7em;}
    #principal h2, h3{font-size: 2em;}
    #principal h4{font-size: 1.3em;}
    #principal p{font-size: 1.0em;} 
    #link-botao{font-size: 1.0em;}
}

@media (min-width: 1025px) {
    #cabecalho h1{font-size: 3.7em;}
    #principal h2, h3{font-size: 3em;}
    #principal h4{font-size: 2em;}
    #principal p{font-size: 1.4em;}
    #link-botao{font-size: 1.2em;}
}