@import url('https://fonts.googleapis.com/css2? family= Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,600;1,700;1,900 & display=trocar');

/*GERAL ================= */
:root{
    margin:0;
    padding:0;
    box-sizing:border-box; 

}

body{
    margin:0;
    padding:0;
    box-sizing:border-box; 
    font-family: 'Source Serif Pro', sans-serif;

}
.title{
    color:#018DD7;
}
a{
    text-decoration:none;
    color:inherit;
    
}

.hidden{
    display:none;
    visibility:hidden;
    transition:2s;
}

/*CABEÇALHO ===========*/

header{
    margin:0;
    padding:0;
    box-sizing:border-box; 
    overflow:hidden;
}

#responsive-icon{
    display:none;
    visibility:hidden;
}

#div-top-image{
    display:flex;
    overflow-x:hidden;
    width:100vw;

    
}
#top-image{
    width:100%;

}

.active{
    border:1px solid white;
    padding:4px;
    border-radius:3px;
    
}
a:hover{
    border-color:rgba(255, 255, 255, 0.686);
    transition: .5s;
}

nav{
    display:flex;
    margin:0;
    padding:0;
    box-sizing:border-box; 
    padding: 0 5%;
    background-color: #018DD7;


    
}

nav ul{
    display:flex;
    align-items:center;
    text-align:center;
    width:100vw;
    height:70px;
    list-style:none;

    margin:0;
    padding:0;
    box-sizing:border-box; 
}

nav ul li{
    color:white;
    font-family: 'Source Serif Pro', sans-serif;
    padding:5px;
    font-size:2vw;
    text-align:center;
    width:100%;
}

.borda{
    border-right:1px solid rgba(51, 51, 51, 0.623); 
}

/*MAIN ===========================*/
main{
    overflow-x:hidden;
}
/*RODAPÉ ========================*/
footer{
    background-color: #018DD7;
    color:white;
    overflow-x:hidden;
}
#div-informacoes{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:flex-start;
    margin:0 0 3% 0;
}

#div-img-redes{
    display:flex;
    justify-content:space-around;
}
#face-logo{
    width:40px;
}
#insta-logo{
    width:40px;
}

#div-copyright{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: black;

}
#div-copyright a{
    font-weight:bold;
}

#whats-logo{
    bottom:0;
    right:1%;
    width:10vw;
    position:fixed;
}
/*RESPONSIVIDADE ================*/

@media (max-width:500px){
    nav{
        flex-direction: column;
        position:fixed;
        width:50%;
        height:100%;
        text-align:center;
        right:0;
        top:0;
        z-index: 2;

        opacity:0.98;
     
        
    }
    nav ul{
        flex-direction: column;
        height:100%;
        width:100%;
        background-color: #018DD7;
        
    }
    nav ul li{
        margin:30px 0;
        font-size:15px;

    }
    .borda{
        border-style:none;

    }
    #responsive-icon{
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        
        position:fixed;
        right:-10px;
        top:15%;
    
        border: 2px solid black;
        border-radius: 25px 0 0 25px;

        width:30px;
        height:30px;
        background-color: #018DD7;
        
        z-index:3;
        cursor: pointer;
        visibility: visible;
    }
    .responsive-line{
        width:50%;
        height:2px;
    
        margin:3px 0;
        background-color: white
    
    }

    #div-informacoes{
        flex-direction:column;
        align-items:center;
        margin:0px;
    }
    #div-contato{
        text-align:center;
    }

    #div-copyright{
        text-align:center;

    }
}

@media (max-width:300px){   
    #email {
       font-size:13px;
    }   
}