@media only screen and (min-width: 310px) {

    
    .panelEdicaoUsuario{
        float:left; 
        width: 100%; 
    }
    
    .formElements{
        margin: 10px; 
        padding: 50px; 
        border-radius: 10px 10px 10px 10px; 
        float: left; 
        background-color: rgba(255,255,255,0.7); 
        width: 100%;
    }
    
    .formBox{
        margin-top: 10px; 
        padding: 10px; 
        border-radius: 10px 10px 10px 10px; 
        float: left; 
        background-color: rgba(255,150,150,0.7); 
        width: 100%;
    }
    


    .credito{
        float:left; 
        font-size: 2vw; 
        font-family: impact;
        width: 100%;
        text-align: center;
    }

    .imgAlbumAtividade{
        width: 100%;
        height: 18vw;
        object-fit: cover;
    }

    .quadro{
        float:left;
        width: 98%;
    }


    .fillArea{
        width: 99%;
    }

    .AdicionarNovoMarcador{
        float:left; 
        width: 30%; 
        margin-left: 10%; 
        margin-top: 5%;
    }

    .painelBuscaMarcadores{
        width: 50%;
        float: left;
    }
    .imagemVisualizador{
        float:left; 
        width: 75%;
    }

    .containerMensagemSucesso{
        background-color: rgba(255,255,255,0.4);
        border-radius: 50px 50px 50px 50px;
        padding-top: 4%;
        padding-bottom: 4%;
        width: 100%;
    }

    .textoExtenso{
        font-size: 1.2vw;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        color: #173e43;
        display: block;
        text-align: justify;
        width: 90%;
        margin: 5%;
    }


    .textoCurto{
        font-size: 2vw;
        font-family: sans-serif;
        color: #333;
        display: block;
        text-align: center;
        width: 100%

    }

    .bannerSucesso{
        font-size: 4vw;
        font-family: impact;
        color: #33B73E;
        display: block;
        text-align: center;
        width: 100%;
    }

    .bannerFalha{
        font-size: 5vw;
        font-family: impact;
        color: #a94442;
        display: block;
        text-align: center;
        width: 100%;
    }

    #logo{
        float: left;
        margin-left: 19%;
        margin-top: 2%;
    }

    .bigButton{
        font-size: 2vw;
        font-family: impact;
        font-weight: normal;
    }

    .mediumButton{
        font-size: 1.5vw;
        font-family: impact;
        font-weight: normal;
        color: #fff
    }

    .headerLogoSite{
        text-align: right;
        width: 100%;
        min-height: 5%;
        float: left;
        background-color: #173e43;
    }



    .headerLogoTitulo{
        font-family: Lobster, sans-serif;
        font-weight: 300;
        font-size: 3vw;
        margin: 2.5%;
        color:#dddfd4;
    }



    body{
        background-attachment: fixed; /* force image to stay put */
    }


    .cabecalho{
        float: right;
        width: 100%;
    }

    .positionSideMenu{
        float: right;
        width: 21%;
        height: 100%;
        margin: 2%;
        background-color: #3fb0ac

    }
    
    .positionOnTheTop{
        float: right;
        width: 100%;
        margin: 2%;
        background-color: #3fb0ac

    }

    .separator{
        float: left;
        width: 100%;
        background-color: #dddfd4;
        height: 3vw;
    }

    .sideMenu{

        float: right;
        margin: 20px;
        background-color: #e3e3e3;
        width: 20%;
        height: 100%;
        -webkit-box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
        -moz-box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
        box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
    }

    .navigationBar{

        float: left;
        font-family: oswald;
        font-size: 1.5vw;  
        width: 100%;

    }
    
    .navigationBarHorizontal{

        float: left;
        font-family: oswald;
        font-size: 1.5vw;  
        width: 100%;

    }

    .navigationBar li{
        text-align: center;
        padding-top: 3%;
        color: #173e43;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 3%;
        width: 100%;
        height: 100%;
    }


    .navigationBar li:hover{
    }

    .tituloInfo{
        text-align: center;
        font-family: oswald;
        font-weight: lighter;
        float: left;
        margin: 2%;
        font-size: 1.2vw;
        padding: 0.5%;
        width: 97%;
        background-color: #fff;
        color: #333;
        border-radius:10px 10px 10px 5px;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;
    }

    .tituloNav{
        text-align: center;
        font-family: impact;
        font-weight: lighter;
        float: left;
        margin-top: 3vw;
        margin-bottom: 3vw;
        margin-left: 1%;
        font-size: 1.5vw;
        padding: 0.5%;
        width: 97%;
        background-color: #fff;
        color: #333;
        border-radius:10px 10px 10px 5px;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;


    }

    .tituloTopico{
        text-align: left;
        font-family: oswald;
        font-weight: lighter;
        float: left;
        font-size: 2vw;
        margin-top: 15px;
        margin-bottom: 15px;
        width: 100%;
        color: #dddfd4;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;

    }





    .formLogin{
        margin-top: 30vh;
        width: 35%;
        margin-left: 32vw;

    }



    .textoExibirAtividade{
        margin: 3%;
        padding: 1%;
        text-align: justify;
        font-size: 1.2vw;
        border-radius: 5px 5px 5px 5px;
        float: left; 
        width: 95%;
    }

    .content{
        float:left;
        width: 100%;
        height: 100%;
        background-color: #3fb0ac;
    }


    .page-content{
        width: 54%;
        float:right;
        padding: 10px;
    }

    .editingMode{
        width: 73%;
    }

    .page-content p{
        font-family: Roboto, sans-serif;
        float: left;

    }


    .page-content a{
        text-decoration: none;
        color: #333;

    }

    .page-content a:hover{
        color: #4fb2ff;
        transition: 0.5s ease-in-out;
    }

    .footer{
        clear: both;
        background-color: #173e43;
        margin: 0%;
    }

    .endereco div{
        font-family:verdana;
        font-size: 1vw;
        color: #fff;
        font-weight: 100;
        width: 100%;
        text-align: center;
        padding-top: 1%;
    }

    .admin href{
        font-family:verdana;
        font-size: 1.8vw;
        color: #fff;
        font-weight: 100;
        padding-top: 4%;
    }

    .contatos div{
        font-family:verdana;
        font-size: 1vw;
        color: #fff;
        font-weight: 100;
        padding-top: 4%;
    }


    .endereco{
        float: left;
        margin-left: 3%;
        width: 30%;
    }

    .compartilhe{
        text-align: center;
        float: left; 
        margin-left: 3%;
        width: 30%;
    }

    .contatos{
        text-align: center;
        margin-left: 3%;
        width: 30%;
        float: left;
    }

    .admin{
        text-align: center;
        margin-left: 5%;
        float: right;
    }

    .imgNav{
        max-width: 10%;
        max-width: 10%;
    }

    .imgFot{
        max-width: 20%;
        max-height: 20%;
    }


    .footer h4{
        font-family: oswald;
        text-align: center;
        font-size: 2vw;
        color: #fff;
        font-weight: 100;
        background-color: #3fb0ac;
        border-radius: 8px 8px 8px 8px;
        margin:3%;
    }



    .texto-footer{
        padding: 1%;
        font-family: fjalla one;
        color: #fae596;
        font-size: 1.2vw; 
        font-weight: normal; 
        text-align: center;
    }



    .bannerComImagem{
        width: 45%;
        height: 100%;
        float:left;
        background-color: #FFF;
        border-radius: 20px 20px 20px 20px;
        box-shadow: 2px 2px 2px #999;
        border: 1px solid #ccc;
        margin: 1%;

        display: block;
        padding: 4px;
        margin-bottom: 20px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        -webkit-transition: border .2s ease-in-out;
        -o-transition: border .2s ease-in-out;
        transition: border .2s ease-in-out;
    }

    .bannerComImagemTexto{
        text-align: center;
        float:left;
        width: 70%;
    }

    .positionSideLinks{
        float: left;
        width: 19%;
        margin-left: 2%;
    }
    
    .positionSideLinksEditMode{
        float: left;
        width: 44%;
        margin-left: 0%;
    }

    .boardManipulateTag{
        float: left;
        margin-top: 5%;
        width: 100%;
    }

    .tree{
        width: 16%;
        margin-right: 1%;
        margin-left: 1%;
    }

    .widgetTree{
        width:100%; 
        float:right;
    }

    .colorLink{
        background-color: #e6af4b;
        color:#333;
        font-family: Oswald;
        text-align: center;
        font-size: 2vw;
        margin-right: 10%;
        margin-top: 10%;
        padding: 10%;
        border: 1px dashed #333;

    }

    .first{
        background-color: #c9c9c9;
    }

    .second{
        background-color: #e3e3e3;
    }

    .third{
        background-color: #9ad3de
            ;
    }

    .forth{
        background-color: #6ed3cf;
        margin-bottom: 1vw;
    }


    .bannerComImagemTexto #tituloPrincipal{
        font-size: 1vw; 
        font-weight: 600;
    }

    .bannerComImagemTexto #primeiroSubtopico{
        font-size: 1vw; 
        font-weight: 600;
    }

    .bannerComImagemTexto #segundoSubtopico{
        font-size: 1vw; 
    }

    .bannerComImagemImagem{
        float:left;
        width: 30%;
        height: 100%;
    }



    .todosDireitosReservados{
        clear: both;
        padding: 1%;
        color: #fae596; 
        font-size: 0.9vw; 

        font-weight: bold; 
        text-align: center;
    }

    .todosDireitosReservados a{
        text-decoration: none;
        color: #fae596;
        font-family: roboto;
    }



    .adminPageContent{
        width: 100%; 
        height: 100vh; 
        float:left
    }

    .usuarioSenhaGrid{
        width: 100%;
    }



    .centralizar{
        width: 100%;
        display: block;
        text-align: center;
    }

    .smallMargin {
        margin-top: 7%;
    }
    
    .imgPrincipalAtividade{
        width: 98%;
        height: 18vw;
        object-fit: cover;
    }

}
@media only screen and (min-width: 1300px) {

    .panelEdicaoUsuario{
        float:left; 
        width: 100%; 
    }
    
    .formElements{
        margin: 10px; 
        padding: 30px; 
        border-radius: 10px 10px 10px 10px; 
        float: left; 
        background-color: rgba(255,255,255,0.7); 
        width: 100%;
    }
    
    .formBox{
        margin-top: 10px; 
        padding: 10px; 
        border-radius: 10px 10px 10px 10px; 
        float: left; 
        background-color: rgba(255,150,150,0.7); 
        width: 100%;
    }
    


    .credito{
        float:left; 
        font-size: 2vw; 
        font-family: impact;
        width: 100%;
        text-align: center;
    }

    .imgAlbumAtividade{
        width: 100%;
        height: 18vw;
        object-fit: cover;
    }

    .quadro{
        float:left;
        width: 98%;
    }


    .fillArea{
        width: 99%;
    }

    .AdicionarNovoMarcador{
        float:left; 
        width: 30%; 
        margin-left: 10%; 
        margin-top: 5%;
    }

    .painelBuscaMarcadores{
        width: 50%;
        float: left;
    }
    .imagemVisualizador{
        float:left; 
        width: 75%;
    }

    .containerMensagemSucesso{
        float: left;
        background-color: rgba(255,255,255,0.4);
        border-radius: 50px 50px 50px 50px;
        padding-top: 4%;
        padding-bottom: 4%;
        width: 100%;
    }

    .textoExtenso{
        font-size: 1.2vw;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        color: #173e43;
        display: block;
        text-align: justify;
        width: 90%;
        margin: 5%;
    }


    .textoCurto{
        font-size: 2vw;
        font-family: sans-serif;
        color: #333;
        display: block;
        text-align: center;
        width: 100%

    }

    .bannerSucesso{
        font-size: 4vw;
        font-family: impact;
        color: #33B73E;
        display: block;
        text-align: center;
        width: 100%;
    }

    .bannerFalha{
        font-size: 5vw;
        font-family: impact;
        color: #a94442;
        display: block;
        text-align: center;
        width: 100%;
    }

    #logo{
        float: left;
        margin-left: 19%;
        margin-top: 2%;
    }

    .bigButton{
        font-size: 2vw;
        font-family: impact;
        font-weight: normal;
    }

    .mediumButton{
        font-size: 1.5vw;
        font-family: impact;
        font-weight: normal;
        color: #fff
    }

    .headerLogoSite{
        text-align: right;
        width: 100%;
        min-height: 5%;
        float: left;
        background-color: #173e43;
    }



    .headerLogoTitulo{
        font-family: Lobster, sans-serif;
        font-weight: 300;
        font-size: 3vw;
        margin: 2.5%;
        color:#dddfd4;
    }



    body{
        background-attachment: fixed; /* force image to stay put */
    }


    .cabecalho{
        float: right;
        width: 100%;
    }

    .positionSideMenu{
        float: right;
        width: 21%;
        height: 100%;
        margin: 2%;
        background-color: #3fb0ac

    }
    
    .positionOnTheTop{
        float: right;
        width: 100%;
        margin: 2%;
        background-color: #3fb0ac

    }

    .separator{
        float: left;
        width: 100%;
        background-color: #dddfd4;
        height: 3vw;
    }

    .sideMenu{

        float: right;
        margin: 20px;
        background-color: #e3e3e3;
        width: 20%;
        height: 100%;
        -webkit-box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
        -moz-box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
        box-shadow: 0px 0px 0px 6px rgba(220,208,192,1);
    }

    .navigationBar{

        float: left;
        font-family: oswald;
        font-size: 1.5vw;  
        width: 100%;

    }
    
    .navigationBarHorizontal{

        float: left;
        font-family: oswald;
        font-size: 1.5vw;  
        width: 100%;

    }

    .navigationBar li{
        text-align: center;
        padding-top: 3%;
        color: #173e43;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 3%;
        width: 100%;
        height: 100%;
    }


    .navigationBar li:hover{
    }

    .tituloInfo{
        text-align: center;
        font-family: oswald;
        font-weight: lighter;
        float: left;
        margin: 2%;
        font-size: 1.2vw;
        padding: 0.5%;
        width: 97%;
        background-color: #fff;
        color: #333;
        border-radius:10px 10px 10px 5px;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;
    }

    .tituloNav{
        text-align: center;
        font-family: impact;
        font-weight: lighter;
        float: left;
        margin-top: 3vw;
        margin-bottom: 3vw;
        margin-left: 1%;
        font-size: 1.5vw;
        padding: 0.5%;
        width: 97%;
        background-color: #fff;
        color: #333;
        border-radius:10px 10px 10px 5px;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;


    }

    .tituloTopico{
        text-align: left;
        font-family: oswald;
        font-weight: lighter;
        float: left;
        font-size: 2vw;
        margin-top: 15px;
        margin-bottom: 15px;
        width: 100%;
        color: #dddfd4;
        border-top: 1px solid #D0D1D3;
        border-bottom: 1px solid #D0D1D3;

    }





    .formLogin{
        margin-top: 30vh;
        width: 35%;
        margin-left: 32vw;

    }



    .textoExibirAtividade{
        margin: 3%;
        padding: 1%;
        text-align: justify;
        font-size: 1.2vw;
        border-radius: 5px 5px 5px 5px;
        float: left; 
        width: 95%;
    }

    .content{
        float:left;
        width: 100%;
        height: 100%;
        background-color: #3fb0ac;
    }


    .page-content{
        width: 54%;
        float:right;
        padding: 10px;
    }

    .editingMode{
        width: 73%;
    }

    .page-content p{
        font-family: Roboto, sans-serif;
        float: left;

    }


    .page-content a{
        text-decoration: none;
        color: #333;

    }

    .page-content a:hover{
        color: #4fb2ff;
        transition: 0.5s ease-in-out;
    }

    .footer{
        clear: both;
        background-color: #173e43;
        margin: 0%;
    }

    .endereco div{
        font-family:verdana;
        font-size: 1vw;
        color: #fff;
        font-weight: 100;
        width: 100%;
        text-align: center;
        padding-top: 1%;
    }

    .admin href{
        font-family:verdana;
        font-size: 1.8vw;
        color: #fff;
        font-weight: 100;
        padding-top: 4%;
    }

    .contatos div{
        font-family:verdana;
        font-size: 1vw;
        color: #fff;
        font-weight: 100;
        padding-top: 4%;
    }


    .endereco{
        float: left;
        margin-left: 3%;
        width: 30%;
    }

    .compartilhe{
        text-align: center;
        float: left; 
        margin-left: 3%;
        width: 30%;
    }

    .contatos{
        text-align: center;
        margin-left: 3%;
        width: 30%;
        float: left;
    }

    .admin{
        text-align: center;
        margin-left: 5%;
        float: right;
    }

    .imgNav{
        max-width: 10%;
        max-width: 10%;
    }

    .imgFot{
        max-width: 20%;
        max-height: 20%;
    }


    .footer h4{
        font-family: oswald;
        text-align: center;
        font-size: 2vw;
        color: #fff;
        font-weight: 100;
        background-color: #3fb0ac;
        border-radius: 8px 8px 8px 8px;
        margin:3%;
    }



    .texto-footer{
        padding: 1%;
        font-family: fjalla one;
        color: #fae596;
        font-size: 1.2vw; 
        font-weight: normal; 
        text-align: center;
    }



    .bannerComImagem{
        width: 45%;
        height: 100%;
        float:left;
        background-color: #FFF;
        border-radius: 20px 20px 20px 20px;
        box-shadow: 2px 2px 2px #999;
        border: 1px solid #ccc;
        margin: 1%;

        display: block;
        padding: 4px;
        margin-bottom: 20px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        -webkit-transition: border .2s ease-in-out;
        -o-transition: border .2s ease-in-out;
        transition: border .2s ease-in-out;
    }

    .bannerComImagemTexto{
        text-align: center;
        float:left;
        width: 70%;
    }

    .positionSideLinks{
        float: left;
        width: 19%;
        margin-left: 2%;
    }
    
    .positionSideLinksEditMode{
        float: left;
        width: 44%;
        margin-left: 0%;
    }

    .boardManipulateTag{
        float: left;
        margin-top: 5%;
        width: 100%;
    }

    .tree{
        width: 16%;
        margin-right: 1%;
        margin-left: 1%;
    }

    .widgetTree{
        width:100%; 
        float:right;
    }

    .colorLink{
        background-color: #e6af4b;
        color:#333;
        font-family: Oswald;
        text-align: center;
        font-size: 2vw;
        margin-right: 10%;
        margin-top: 10%;
        padding: 10%;
        border: 1px dashed #333;

    }

    .first{
        background-color: #c9c9c9;
    }

    .second{
        background-color: #e3e3e3;
    }

    .third{
        background-color: #9ad3de
            ;
    }

    .forth{
        background-color: #6ed3cf;
        margin-bottom: 1vw;
    }


    .bannerComImagemTexto #tituloPrincipal{
        font-size: 1vw; 
        font-weight: 600;
    }

    .bannerComImagemTexto #primeiroSubtopico{
        font-size: 1vw; 
        font-weight: 600;
    }

    .bannerComImagemTexto #segundoSubtopico{
        font-size: 1vw; 
    }

    .bannerComImagemImagem{
        float:left;
        width: 30%;
        height: 100%;
    }



    .todosDireitosReservados{
        clear: both;
        padding: 1%;
        color: #fae596; 
        font-size: 0.9vw; 

        font-weight: bold; 
        text-align: center;
    }

    .todosDireitosReservados a{
        text-decoration: none;
        color: #fae596;
        font-family: roboto;
    }



    .adminPageContent{
        width: 100%; 
        height: 100vh; 
        float:left
    }

    .usuarioSenhaGrid{
        width: 100%;
    }



    .centralizar{
        width: 100%;
        display: block;
        text-align: center;
    }

    .smallMargin {
        margin-top: 7%;
    }
    
    .imgPrincipalAtividade{
        width: 98%;
        height: 18vw;
        object-fit: cover;
    }
}
