@charset "UTF-8";

body{
    margin:0px;
    overflow-x: hidden;
}

.wrapper{
    margin:auto; /* para centralizar */
    display:flex;  /* para transformar em blocos */
    flex-direction: row; /* também tem colunas */
    flex-wrap: wrap; /* quando utilizamos blocos eles ficam um ao lado do outro mesmo que tenha tamanho total da tela, então para resolver isso, utilizamos o flex wrap. */
    justify-content: space-around; /* alinhando os blocos na horizontal denro do principal (wrapper) */
    align-items: center; /* alinhamento dos blocos na vertical dentro do principal (wrapper) */
    width:100%;  /* largura do principal */
    height: auto;
    padding:0px;  /* espaço entre as caixas para ficarem distantes */
}   

h1{
    font-family: calibri;
    font-size: 5em;
    margin:0px;
    padding:0px;
    }

h2{
    font-family: calibri;
    font-size: 1.8em;
    padding:0px;
    margin:0px;
    }
        
p{
    font-family:calibri;
    font-size:1.3em;
    padding:0px;
    margin:0px;
    text-align:justify;
    }


    .titulo1{ /* Titulo do cabeçalho */
        position:relative;
        font-family:calibri;
        font-size:6.5vw;
        font-weight:bold;
        text-align:right;
        color:gray;
        padding-right:20px;
        padding-top:2%;
        }
        
        .titulo2{ /* Texto do cabeçalho */
        font-family:calibri;
        font-size:3.5vw;
        font-weight:bold;
        text-align:right;
        color:gray;
        padding-right:20px;
        padding-bottom:5%;
        }   

.cabecalho{
    width: 100%;
    height: auto;
    background-color: none;
    background-image: url("../CSS/Fundo.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

.titulo{
    width: 100%;
    height: auto;
    background-color: none;
}

.SFB4{
    width: 49%;
    height: auto;
    padding-top: 2%;
    padding-right:1%;
    padding-bottom: 2%;
}

.SFB6{
    width: 47%;
    height: auto;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
}


section{
    width: 100%;
    height: auto;
    text-align: justify;
    margin-left: 1%;
    margin-right: 1%;
}

section details summary{
    font-family:calibri;
    font-size:1.3em;
    /* font-weight:bold; */
    background-image: linear-gradient(to right, lightgray, #bebebe, lightgray);
    padding: 1%;
    color:gray;
    cursor: pointer;
}

section details summary:hover{
    background-image: linear-gradient(to right, #57B952, #70c26b, #57B952);
    color:white;
}

.borda{
    border-bottom: 2px solid #282828;
}

section details p{
    font-family:calibri;
    font-size:1em;
    background-color: #282828;
    color:#fff;
    padding: 1%;
    margin:0px;
}

.descricao{
    padding:1%;
}

.descricao p{
    font-family:calibri;
    font-size:1.2em;
    width:100%;
    height: auto;
}

.dropdown{
    display:flex;
    width:100%;
    height: auto;
    clear:both;
}

hr{
    width: 100%;
    color:#282828;
    margin: 1%;
}

.master{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    height: auto;
    clear:both;
}


ul li{
    font-family:calibri;
    font-size:1.3em;
}


.center{
    text-align: center;
}

/* media queries */

@media(max-width: 992px){
    p{
        font-size:1.2em;
    }

    ul li{
        font-size:1.2em;
    }

    h2{
        font-size: 1.5em;
    }

    .SFB4, .SFB6{

        margin:0px;
    }
    .SFB4{
        width:100%;
        height: auto;
        margin-bottom: 1%;
        margin-right: 1%;
    }

    .SFB6{
        width:100%;
        height: auto;
        margin-bottom: 1%;
    }

    section details summary{
        font-size:1.1em;
    }
   
}

@media(max-width: 390px){

    p{
        font-size:1.2em;
    }

    ul li{
        font-size:1.2em;
    }

    h2{
        font-size: 1.5em;
    }

    .SFB4, .SFB6{
        width:100%;
        margin:0px;
        text-align: justify;
        padding-right: 1%;
        padding-left: 1%;
    }

    .SFB4, .SFB6{ /* margem de baixo caixa difuso e refletivo */
        margin-bottom: 2%;
    }

    section details summary{
        font-size:1em;
    }
}