a p h1 h2 h3 h4 h5 span {
    font-family: roboto;
}



@media only screen and (max-width: 1920px) and (min-width: 1025px){

    .navbar-toggler{
        z-index: 1002;
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 50px;
    margin-top: 120px;
    margin-left: 150px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 50px;
    margin-top: 320px;
    margin-left: 270px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 50px;
    margin-top: 545px;
    margin-left: 155px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 50px;
    margin-top: 525px;
    margin-left: -90px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 50px;
    margin-top: 325px;
    margin-left: -185px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 50px;
    margin-top: 120px;
    margin-left: -85px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: 80px;
    position: absolute;
    color: white;
    font-size: 13px;
    margin-left: 10px;
    text-align: center;
    z-index: 1000;
    }     
    
    
    #prcedimentos2{
    margin-top: 190px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 255px;
    text-align: center;
    z-index: 1000;
    }     
    
    
    #prcedimentos3{
    margin-top: 450px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 265px;
    text-align: center;
    z-index: 1000;
    }  
    
    #prcedimentos4{
    margin-top: 560px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 20px;
    text-align: center;
    z-index: 1000;
    }  
    
    #prcedimentos5{
    margin-top: 450px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: -200px;
    text-align: center;
    z-index: 1000;
    }  
    
    #prcedimentos6{
    margin-top: 190px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: -205px;
    text-align: center;
    z-index: 1000;
    }  
    
    
    /*----------------------------------------------------------------*/
    /*Estilos das esferas*/
    
    #ball1{
    padding: 60px;
    text-align:center;
    background-color: #052669;
    position:absolute; 
    margin-top: 5%;
    border-radius:100%;
    transition: 0.5s;
    } 
    
    #ball2{
    padding: 60px;
    background-color: #0579cc;  
    position:absolute; 
    margin-left:30%; 
    margin-top:20%; 
    border-radius:100%;
    }
    
    #ball3{
    padding: 60px;
    background-color:  #05bcfe;  
    position:absolute; 
    margin-left:0%; 
    margin-top: 70%;  
    border-radius:100%;
    
    }     
    
    #ball4{
    padding: 60px;
    position:absolute; 
    background-color: #05bc5e;  
    margin-left:30%; 
    margin-top:55%; 
    border-radius:100%;
    
    }
    
    
    
    #ball6{
    padding: 60px;
    background-color: #ffcc05; 
    position:absolute; 
    margin-left: -30%; 
    margin-top:20%; 
    border-radius:100%;
    }
    
    #ball5{
    padding: 60px;
    background-color: #9ddd58;  
    
    position:absolute; 
    margin-left: -30%; 
    margin-top:55%; 
    border-radius:100%;
    }
    
    /*---------------------Outros estilos---------------------------*/    
    
    #msgTitulo{
    margin-top: 80%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    color: #052669;
    font-size: 25px;
    }
    
    
    #informacion{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    
    }
    
    #informacion2{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    
    }
    
    #informacion3{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    
    }
    
    #informacion4{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    
    }
    
    #informacion5{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute;
    
    }
    
    #informacion6{
    margin-top: 125%;
    margin-left: -125%;
    justify-content: right;
    position: absolute; 
    
    }
    
    #alinhamento {
    margin-left: 20%; 
    margin-top:5%;
    }
    
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    }
    
    #icon {
    font-size: 30px;
    }
    
    }
    




@media only screen and (max-width: 1024px) and (min-width: 769px) {

    .navbar-toggler{
    z-index: 1002;
}


/*Estilos flechas*/

#flecha1{
    position: absolute;
    font-size: 50px;
    margin-top: 105px;
    margin-left: 135px;
    transform: rotate(122deg);
    color: #666666;
}

#flecha2{
    position: absolute;
    font-size: 50px;
    margin-top: 275px;
    margin-left: 235px;
    transform: rotate(180deg);
    color: #666666;
}

#flecha3{
    position: absolute;
    font-size: 50px;
    margin-top: 470px;
    margin-left: 140px;
    transform: rotate(242deg);
    color: #666666;
}

#flecha4{
    position: absolute;
    font-size: 50px;
    margin-top: 470px;
    margin-left: -90px;
    transform: rotate(310deg);
    color: #666666;
}

#flecha5{
    position: absolute;
    font-size: 50px;
    margin-top: 280px;
    margin-left: -160px;
    transform: rotate(360deg);
    color: #666666;
}

#flecha6{
    position: absolute;
    font-size: 50px;
    margin-top: 100px;
    margin-left: -65px;
    transform: rotate(55deg);
    color: #666666;
}


/*Estilos das Informaciones de la esferas*/
#prcedimentos{
    margin-top: 70px;
    position: absolute;
    color: white;
    font-size: 13px;
    margin-left: 8px;
    text-align: center;
    z-index: 1000;
}     


#prcedimentos2{
    margin-top: 160px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 218px;
    text-align: center;
    z-index: 1000;
}     


#prcedimentos3{
    margin-top: 380px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 228px;
    text-align: center;
    z-index: 1000;
}  

#prcedimentos4{
    margin-top: 480px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: 20px;
    text-align: center;
    z-index: 1000;
}  

#prcedimentos5{
    margin-top: 380px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: -170px;
    text-align: center;
    z-index: 1000;
}  

#prcedimentos6{
    margin-top: 165px;
    position: absolute;
    color: white;
    font-size: 14px;
    margin-left: -175px;
    text-align: center;
    z-index: 1000;
}  


/*----------------------------------------------------------------*/
/*Estilos das esferas*/

#ball1{
padding: 60px;
text-align:center;
background-color: #052669;
position:absolute; 
margin-top: 5%;
border-radius:100%;
transition: 0.5s;
} 

#ball2{
padding: 60px;
background-color: #0579cc;  
position:absolute; 
margin-left:30%; 
margin-top:20%; 
border-radius:100%;
}

#ball3{
padding: 60px;
background-color: #05bc58;  
position:absolute; 
margin-left:0%; 
margin-top: 70%;  
border-radius:100%;

}     

#ball4{
padding: 60px;
position:absolute; 
background-color: #05bcfe;  
margin-left:30%; 
margin-top:55%; 
border-radius:100%;

}



#ball6{
padding: 60px;
background-color: #ffcc05; 
position:absolute; 
margin-left: -30%; 
margin-top:20%; 
border-radius:100%;
}

#ball5{
padding: 60px;
background-color: #9ddd58;  

position:absolute; 
margin-left: -30%; 
margin-top:55%; 
border-radius:100%;
}

/*---------------------Outros estilos---------------------------*/    

#msgTitulo{
margin-top: 80%;
margin-left: -125%;
justify-content: right;
position: absolute;
color: #052669;
font-size: 23px;
}


#informacion{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute;

}

#informacion2{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute;

}

#informacion3{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute;

}

#informacion4{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute;

}

#informacion5{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute;

}

#informacion6{
margin-top: 127%;
margin-left: -125%;
justify-content: right;
position: absolute; 

}

#alinhamento {
margin-left: 20%; 
margin-top:5%;
}

#palavrameio{
position: absolute;
margin-top: 24%;
margin-left: -5%;
font-size: 40px;
text-align: center;
font-weight: bold;
color: #666666;
}

#icon {
font-size: 25px;

}

}




/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 768px*/

/* Para 768px */  
@media only screen and (max-width: 768px) and (min-width: 541px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 130px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 170px;
    margin-left: 240px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 350px;
    margin-left: 140px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 350px;
    margin-left: -100px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 170px;
    margin-left: -190px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 15px;
    margin-left: -80px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -35px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 90px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 252px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 290px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 10px;
    margin-left: 252px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 415px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 8px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 290px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -225px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 70px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -227px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 300%;
    margin-top: -150%;
    margin-left: -900%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 300%;
        margin-top: -150%;
        margin-left: -900%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion3{
        padding: 300%;
        margin-top: -150%;
        margin-left: -900%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 300%;
        margin-top: -150%;
        margin-left: -900%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 300%;
        margin-top: -150%;
        margin-left: -900%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 300%;
        margin-top: -150%;
        margin-left: -900%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 39%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }





/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 540px*/

/* Para 540px */  
@media only screen and (max-width: 540px) and (min-width: 415px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 130px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 170px;
    margin-left: 240px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 350px;
    margin-left: 140px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 350px;
    margin-left: -100px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 170px;
    margin-left: -190px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 15px;
    margin-left: -80px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -25px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 85px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 228px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 260px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 10px;
    margin-left: 230px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 380px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 8px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 265px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -200px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 70px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -205px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 200%;
    margin-top: 80%;
    margin-left: -1600%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1600%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion3{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1600%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1600%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1600%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1600%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 39%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }





/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 414px*/

/* Para 414px */  
@media only screen and (max-width: 414px) and (min-width: 411px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 90px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: 175px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: 95px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: -55px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: -125px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 20px;
    margin-left: -50px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -15px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 70px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 180px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 215px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 185px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 305px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 8px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 215px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -155px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 60px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -160px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 200%;
    margin-top: 80%;
    margin-left: -1200%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion3{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 37%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }





/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 411px*/

/* Para 411px */  
@media only screen and (max-width: 411px) and (min-width: 376px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 90px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: 175px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: 95px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: -55px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: -125px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 20px;
    margin-left: -50px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -15px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 70px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 180px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 215px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 185px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 305px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 8px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 215px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -155px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 60px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -160px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 200%;
    margin-top: 80%;
    margin-left: -1200%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion3{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 200%;
        margin-top: 80%;
        margin-left: -1200%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 37%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }



/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 375px*/

/* Para 375px */  
@media only screen and (max-width: 375px) and (min-width: 361px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 90px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: 175px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: 95px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: -55px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: -125px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 20px;
    margin-left: -50px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -12px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 70px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 170px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 200px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 175px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 285px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 8px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 200px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -145px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 60px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -148px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 120%;
    margin-top: 80%;
    margin-left: -1060%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 120%;
    margin-top: 80%;
    margin-left: -1060%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion3{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1060%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1060%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1060%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 120%;
    margin-top: 80%;
    margin-left: -1060%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #alinhamento {
    margin-left: 35%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }



/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 360px*/

/* Para 360px */  
@media only screen and (max-width: 360px) and (min-width: 321px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 90px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: 175px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: 95px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: -55px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 25px;
    margin-top: 125px;
    margin-left: -125px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 20px;
    margin-left: -50px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -10px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 65px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 165px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 190px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 170px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 270px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 10px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 190px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -140px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 60px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -140px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 120%;
    margin-top: 80%;
    margin-left: -1020%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1020%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion3{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1020%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1020%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1020%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 120%;
        margin-top: 80%;
        margin-left: -1020%;
        font-size: 10px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 35%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 320px*/

/* Para 320px */  
@media only screen and (max-width: 320px) and (min-width: 279px)  {  
  
#ball1{

background-color: #052669;
padding: 35px;
text-align:center;
position:absolute; 
margin-top: -15%;
width: 20%;
border-radius:100%;

} 

#ball2{

background-color: #0579cc;  
padding: 35px;
position:absolute; 
margin-left:65%; 
margin-top:20%; 
width: 20%;
border-radius:100%;

}

#ball3{

background-color:  #05bcfe ;  
padding: 35px;
position:absolute; 
margin-left:0%; 
margin-top: 110%;
width: 20%;
border-radius:100%;


}     

#ball4{

background-color: #05bc58;   
padding: 35px;
position:absolute; 
margin-left:65%; 
margin-top:75%; 
width: 20%;
border-radius:100%;




}

#ball6{

background-color: #ffcc05; 
padding: 35px;
position:absolute; 
margin-left: -65%; 
margin-top:15%; 
width: 20%;
border-radius:100%;

}

#ball5{

background-color: #9ddd58;  
padding: 35px;
position:absolute; 
margin-left: -65%; 
margin-top:75%; 
width: 20%;
border-radius:100%;

}


/*Estilos flechas*/

#flecha1{
position: absolute;
font-size: 25px;
margin-top:15px;
margin-left: 90px;
transform: rotate(122deg);
color: #666666;
}

#flecha2{
position: absolute;
font-size: 25px;
margin-top: 115px;
margin-left: 160px;
transform: rotate(180deg);
color: #666666;
}

#flecha3{
position: absolute;
font-size: 25px;
margin-top: 225px;
margin-left: 95px;
transform: rotate(242deg);
color: #666666;
}

#flecha4{
position: absolute;
font-size: 25px;
margin-top: 225px;
margin-left: -55px;
transform: rotate(310deg);
color: #666666;
}

#flecha5{
position: absolute;
font-size: 25px;
margin-top: 115px;
margin-left: -110px;
transform: rotate(360deg);
color: #666666;
}

#flecha6{
position: absolute;
font-size: 25px;
margin-top: 20px;
margin-left: -50px;
transform: rotate(55deg);
color: #666666;
}


/*Estilos das Informaciones de la esferas*/
#prcedimentos{
margin-top: -7px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 6.5px;
margin-left: 6px;
text-align: center;
z-index: 1001;

}     


#prcedimentos2{
margin-top: 60px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 7px;
margin-left: 150px;
text-align: center;
z-index: 1001;

}     


#prcedimentos3{
margin-top: 175px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 7px;
margin-left: 155px;
text-align: center;
z-index: 1001;

}  

#prcedimentos4{
margin-top: 242px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 8px;
margin-left: 11px;
text-align: center;
z-index: 1001;

}  

#prcedimentos5{
margin-top: 175px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 8px;
margin-left: -118px;
text-align: center;
z-index: 1001;

}  

#prcedimentos6{
margin-top: 50px;
position: absolute;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bolder;
text-decoration: underline;
color: white;
font-size: 7px;
margin-left: -122px;
text-align: center;
z-index: 1001;


}  


#icon{
font-size: 14px;
}
#informacion{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#informacion2{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#informacion3{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#informacion4{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#informacion5{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#informacion6{
padding: 100%;
margin-top: 80%;
margin-left: -900%;
font-size: 10px;
text-align: center;
position: absolute;
}
#alinhamento {
margin-left: 35%; 
margin-top:15%;
}
#palavrameio{
position: absolute;
margin-top: 22%;
margin-left: -3%;
font-size: 40px;
text-align: center;
font-weight: bold;
color: #666666;
display: none;
}
#caixaInfo{
margin:80%;
margin-top: 10%;
}
#msgTitulo{
display: none;
}
}


.dropdown:hover>.dropdown-menu{
 display: block;
}



#bannerComunidade{
    padding: 10%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    opacity: 0.9;
}

#banner2{
    text-align: center; 
    color:white; 
    font-weight: bolder;
    font-size: 42px;
    background-color: #00000066;
    padding: 1%;
}

/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/
/*-------------------------------------------------------------------------------------------------*/
/*Responsividade 280px*/

/* Para 320px */  
@media only screen and (max-width: 280px) and (min-width: 5px)  {  
  
    #ball1{
    
    background-color: #052669;
    padding: 35px;
    text-align:center;
    position:absolute; 
    margin-top: -15%;
    width: 20%;
    border-radius:100%;
    
    } 
    
    #ball2{
    
    background-color: #0579cc;  
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:20%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball3{
    
    background-color:  #05bcfe ;  
    padding: 35px;
    position:absolute; 
    margin-left:0%; 
    margin-top: 110%;
    width: 20%;
    border-radius:100%;
    
    
    }     
    
    #ball4{
    
    background-color: #05bc58;   
    padding: 35px;
    position:absolute; 
    margin-left:65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    
    
    
    }
    
    #ball6{
    
    background-color: #ffcc05; 
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:15%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    #ball5{
    
    background-color: #9ddd58;  
    padding: 35px;
    position:absolute; 
    margin-left: -65%; 
    margin-top:75%; 
    width: 20%;
    border-radius:100%;
    
    }
    
    
    /*Estilos flechas*/
    
    #flecha1{
    position: absolute;
    font-size: 25px;
    margin-top:15px;
    margin-left: 90px;
    transform: rotate(122deg);
    color: #666666;
    }
    
    #flecha2{
    position: absolute;
    font-size: 20px;
    margin-top: 105px;
    margin-left: 145px;
    transform: rotate(180deg);
    color: #666666;
    }
    
    #flecha3{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: 95px;
    transform: rotate(242deg);
    color: #666666;
    }
    
    #flecha4{
    position: absolute;
    font-size: 25px;
    margin-top: 225px;
    margin-left: -55px;
    transform: rotate(310deg);
    color: #666666;
    }
    
    #flecha5{
    position: absolute;
    font-size: 20px;
    margin-top: 105px;
    margin-left: -95px;
    transform: rotate(360deg);
    color: #666666;
    }
    
    #flecha6{
    position: absolute;
    font-size: 25px;
    margin-top: 20px;
    margin-left: -50px;
    transform: rotate(55deg);
    color: #666666;
    }
    
    
    /*Estilos das Informaciones de la esferas*/
    #prcedimentos{
    margin-top: -3px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 7px;
    margin-left: 5px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos2{
    margin-top: 55px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 132px;
    text-align: center;
    z-index: 1001;
    
    }     
    
    
    #prcedimentos3{
    margin-top: 155px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 136px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos4{
    margin-top: 215px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: 9px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos5{
    margin-top: 155px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -105px;
    text-align: center;
    z-index: 1001;
    
    }  
    
    #prcedimentos6{
    margin-top: 50px;
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    text-decoration: underline;
    color: white;
    font-size: 8px;
    margin-left: -110px;
    text-align: center;
    z-index: 1001;
    
    
    }  
    
    
    #icon{
    font-size: 14px;
    }
    #informacion{
    padding: 100%;
    margin-top: 80%;
    margin-left: -790%;
    font-size: 8px;
    text-align: center;
    position: absolute;
    }
    #informacion2{
    padding: 100%;
    margin-top: 80%;
    margin-left: -790%;
    font-size: 10px;
    text-align: center;
    position: absolute;
    }
    #informacion3{
        padding: 100%;
        margin-top: 80%;
        margin-left: -790%;
        font-size: 8px;
        text-align: center;
        position: absolute;
    }
    #informacion4{
        padding: 100%;
        margin-top: 80%;
        margin-left: -790%;
        font-size: 8px;
        text-align: center;
        position: absolute;
    }
    #informacion5{
        padding: 100%;
        margin-top: 80%;
        margin-left: -790%;
        font-size: 8px;
        text-align: center;
        position: absolute;
    }
    #informacion6{
        padding: 100%;
        margin-top: 80%;
        margin-left: -790%;
        font-size: 8px;
        text-align: center;
        position: absolute;
    }
    #alinhamento {
    margin-left: 35%; 
    margin-top:15%;
    }
    #palavrameio{
    position: absolute;
    margin-top: 22%;
    margin-left: -3%;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #666666;
    display: none;
    }
    #caixaInfo{
    margin:80%;
    margin-top: 10%;
    }
    #msgTitulo{
    display: none;
    }
    }
    
    
    .dropdown:hover>.dropdown-menu{
     display: block;
    }
    
    
    
    #bannerComunidade{
        padding: 10%; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        opacity: 0.9;
    }
    
    #banner2{
        text-align: center; 
        color:white; 
        font-weight: bolder;
        font-size: 42px;
        background-color: #00000066;
        padding: 1%;
    }