footer{
    position: absolute;
    width: 100%;
    height: 18%;
    bottom: 0;
    background-image: linear-gradient(0deg, rgb(255, 94, 58) 0%, rgb(255, 42, 104) 100%);
}
 
.col{
    display: inline-block;
    /*border: 1px solid magenta;*/
    vertical-align: top;
}
.col h2{
    font-family: pacificoregular;
    font-size: 1.5em;   
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 0;
}

.col.c2{
    width: 45%;
}
.col.c3{
    width: 33%;
}
.col.c50p{
    width: 60%;
}
.col.c60p{
    width: 60%;
}
.col.c70p{
    width: 70%;
}
.col.c80p{
    width: 80%;
}
.col.auto{
    width: auto;
}
.col.meio{
    vertical-align: middle;
}
.center-me{
    display: block;
    margin: 10px auto;
}
.img-responsive{
    width:100%;
   
}
html,body{
    color: rgb(19, 49, 52);
}
#pontuacao{
    position: absolute;
    top: 25px;
    right: 15%;
    font-family: 'pacificoregular';
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    line-height:0;
}
#p-texto{
    float: left;
}
#p-pic{
    float: right;
    margin-left: 10px;
    margin-top: 15px;
}
#p-pic img{
    width: 70px;
}
.txt-pontos{    
    color: rgb(61, 215, 178);
    text-align: right;
    margin-right: 0px;
    font-size: 0.7em;
    margin-top: -3px;
    margin-bottom: -3px;

}
#footer-pontos{
    font-size: 4rem;
    margin-right: -5px;
}
#logo_curso{
    position: absolute;
    left: 12%;
    bottom: 0;
    width: 450px
}
header{
    top: 8.6%;
    right: 11%;    
}
header img{
    width: 227px
}

.imgRight{
    float: right;
}
nav{
    display: block;
    position: absolute;
    z-index: 9;
    bottom: 18%;
    /*border: 1px solid magenta;*/
    width: 560px;
    height: 90px;
    left:Calc(50% - 280px);

}
#navegacao{
    background-image: url(../img/agilidade_gentileza_03.png),url(../img/agilidade_gentileza_04.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top left, top right;    
}
.pagina{
    display: block;
    position: relative;
    width: 80%;
    max-width: 900px;
    /*border: lime 1px solid;*/
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: 'source_sans_proregular';
    outline: none;
    min-height: 500px
}
.pagina strong{
    font-family: 'source_sans_probold';
    font-weight: bold
}

.pagina h1{
    font-family: 'pacificoregular';
    font-size: 2em;
    font-weight: 400;
    line-height: 1
}

.tela-principal{
    box-sizing: border-box;
    padding-top: 150px;
}

nav button, #btavanc button{
    border: none;
    background-color: transparent;
    width: 114px;
    height: 101px;
    margin-top: -20px;
}
#bt-avancar{
    position: absolute;
    left: Calc(50%);
    top: 0;
    margin-left:10px;

}
#bt-voltar{
    position: absolute;
    right: Calc(50%);
    top: 0;
    margin-right: 10px;

}

.grbutton{
    position: absolute;
    top: 0;
    bottom: 0
}
#bt-voltar #vb{
    opacity: 0;
    transition: 500ms
}
#bt-voltar:hover #vb{
    opacity: 1;
    transition: 500ms
}

#bt-voltar #va{
    opacity: 1; 
    transition: 500ms
}
#bt-voltar:hover #va{
    opacity: 0;
    transition: 500ms
}

#bt-avancar #ab{
    opacity: 0;
    transition: 500ms
}

#bt-avancar:hover #ab{
    opacity: 1;   
    transition: 500ms
}
#bt-avancar #aa{
    opacity: 1;
    transition: 500ms
}

#bt-avancar:hover #aa{
    opacity: 0;
    transition: 500ms
}

/*
#addPontos{
    position: absolute;
    z-index: 10;
    display: block;
    border: cyan 1px solid;
    bottom: 200px;
    right: 10% ;
    width:141px; 
    height: 139px;  
}*/

#addPontos{
    position: absolute;
    z-index: 10;
    display: block;
    /*border: cyan 1px solid;*/
    bottom: 60px;
    right: 20% ;
    width:60px; 
    height: 60px; 
    display: none; 
}

#addPontos img{
    max-width: 100%;
}

.clearfix{
    clear: both;
}



@media screen and (max-width:900px){  
    html{overflow: unset;}
    body{
        overflow-y: auto;
    }

    nav{
        position: relative;
        bottom: unset;       
            
    }
    .col{
        display: block;
        margin: 10px auto;
    }
    .col.c2, .col.c3, .col.c50p,.col.c60p,.col.c70p,.col.c80p, .col.auto{
        width: auto;
        max-width: 98%;
    }
    .col > img{
        max-width: 100%;  
        margin: 0 auto;
        display: block;      
    }
    .moldura{
        position: fixed;
    }
    .tela-principal{
        height: auto;
        
    }
    /* CORRIGE O FOOTER */
    footer{
        height: 100px;
        overflow: hidden;
        position: fixed;
        box-shadow: 0 3px 0 0 rgba(0,0,0,0.2);
        top: 0;
        z-index: 9;
    }
    #logo_curso{
        bottom: -20px;
        width: 300px;
        left: 2%;
    }
 
    #pontuacao{
        top: 8px;
        transform: scale(0.8);
        transform-origin: top;
        right: 2%;
    }

    #mrt{    
        right: 1.9%;
        top: 115px;
    }
    #mlt{
        left: 1.9%;
        top: 115px;
    }
    header{
        top: 130px;
        right: Calc(50% - 110px);   
        position: fixed; 
    }
    .tela-principal{
        margin-top: 80px;       
    }

    #addPontos{
        position: fixed;
        z-index: 10;
        display: block;
        /*border: cyan 1px solid;*/
        top: 40%;       
        right: Calc(40% - 40px);
        width:60px; 
        height: 60px; 
        display: none;
        transform: scale(1.8);
        transform-origin: center; 
    }


}

@media screen and (max-width:620px){
    nav{
        width: 300px;
        left:Calc(50% - 150px);
        margin-top: 5%;
        margin-bottom: 15%;
    }
    #navegacao{
         background-position: bottom left, bottom right;
    }
}


@media screen and (max-width:500px){
    .pagina{
        width:100%;
    }
    .pagina h1 {        
        font-size: 1.6em;
               
    }
    #logo_curso {
        bottom: -5px;
        width: 220px;
        left: -6%;
    }
    #pontuacao {
        top: 8px;
        transform: scale(0.7);
        transform-origin: top;
        right: -6%;
    }
}


@media screen and (min-width:901px) and (max-width:1440px) and (max-height:800px){
   /* TOPO */
    #mrt{    
        right: 1.9%;
        top: 2%;
    }
    #mlt{
        left: 1.9%;
        top: 2%;
    }
    header{
        top: 4%;
        right: 8%;    
    }
    /*topo da area das paginas*/
    .tela-principal{     
        padding-top: 80px;
    }
    nav{
        bottom:15%;
    }
    html,body{
        overflow-y: auto;
    }

}

@media screen and (min-width:901px) and (max-width:1370px) and (max-height:800px){
   
    /*topo da area das paginas*/
    .tela-principal{     
        padding-top: 50px;
    }
    nav{
        bottom:70px;
    }
    footer{
        height: 100px;
    }
    #logo_curso{
        bottom: -50px;
        width: 400px
    }
 
    #pontuacao{
        top: 8px;
        transform: scale(0.8);
        transform-origin: top;
    }
    html,body{
        overflow-y: auto;
    }

}

@media screen and (min-width:901px) and (max-width:1024px) and (max-height:800px){
    header{
        right: 12%;
    }

    #logo_curso{
        bottom: -35px;
        width: 350px;
    }
    html,body{
        overflow-y: auto;
    }
}

@media screen and (min-width:901px) and (max-width:1280px) and (max-height:600px){
    body{
        overflow-y: scroll;
    }
    footer{
        position: relative;
        overflow: hidden;
    }
    nav{
        position: relative;
         bottom: unset;
         margin-top: 20px
    }
    .tela-principal{
        height: auto;
       
    }
    html,body{
        overflow-y: auto;
    }
    
}

@media screen and (min-width:1280px) and (max-height:700px){
    html,body{
        overflow-y: auto;
    }
    footer{
        position: relative;
        height: 150px;
       overflow: hidden;
    }
    nav{
        position: relative;
         bottom: unset;
         margin-top: 20px
    }
    .tela-principal{
        height: auto;
       
    }
    html,body{
        overflow-y: auto;
    }
    
}

.hashtag{
    font-family: 'amatic_scregular';
    font-size: 2rem;
    font-weight: 600;  
}


.destaque{
    font-family: pacificoregular;
    font-size: 1.3em;
    line-height: 1em
}
.amarelo{
        color: rgb(255, 231, 0);
}
.azul{
    color: rgb(40, 92, 96);
}
.floating{
        display: block;
        float: left;
        margin: 25px;
}

.destaque2{
    font-family: 'amatic_scregular';
    font-size: 2em;
    font-weight: 400;  
}

.citacao{
    font-family: 'amatic_scregular';
    font-size: 2em;  
    font-weight: 700;
}

.acessivel{
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: inline-block;
}

.italico{
    font-style: italic;
}
.f-direita{
    float: right;
}
.f-esquerda{
    float: left;
}