*{
    box-sizing: border-box;
}

html, body{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /*font-family: Arial, Helvetica, sans-serif;*/
    scroll-behavior: smooth;
}

/*? Div-Info */
#info{
    background-color: #185510;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

#info p{
    margin-left: 10px;
    margin-right: 10px;
    color: white;
    font-weight: bold;
    font-size: 1rem;
}

/*? Menu */
.menu-header{
    display: block;
    background-color: #41901C;
}

.menu-header .menu-principal{
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.menu-header .menu-principal .menu-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.menu-header .menu-principal .menu-logo img{
    /*max-width: 320px;
    height: 150px;*/
    max-width: 280px;
    height: 120px;
}

.menu-header .menu-nav{
    max-width: 100%;
    display: block;
    background-color: #87D936;
}

/*.menu-header .menu-nav .fixo{
    top: 0;
    position: fixed;
    max-width: 100%;
}

.menu-nav .fixo + .conteudo-principal{
    padding-top: 60px;
}*/

.menu-header .menu-nav ul{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.menu-header .menu-nav li{
    border: 1px  solid #87D936;
    padding: 8px 15px 8px 15px;
}

.menu-header .menu-nav i{
    margin-right: 5px;
}

.menu-header .menu-nav a, .menu-nav i{
    font-size: 1.4rem;
    text-decoration: none;
    color: white;
}

.menu-header .menu-nav li:hover{
    border: 1px solid #185510;
    background-color: #185510;
    transition: 1s;
}

.menu-header .menu-nav .active, .menu-nav .active a, .menu-nav .active i{
    border: 1px solid #185510;
    background-color: #185510;
    color: #D9B855;
}

/*? Conteúdo Principal */
.conteudo-principal.inicio, .conteudo-principal.ciclo-do-oleo, .conteudo-principal.pontos-coleta, .conteudo-principal.contato{
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 10px 40px 10px;
}

.conteudo-principal.inicio h1, .conteudo-principal.ciclo-do-oleo h1, .conteudo-principal.pontos-coleta h1, .conteudo-principal.contato h1{
    font-size: 2.5rem;
}

.conteudo-principal.inicio .projeto h1::before, .conteudo-principal.ciclo-do-oleo .ciclo-oleo h1::before{
    content: "";
    border-left: 7px solid #185510;
    margin-right: 10px;
}

.conteudo-principal.inicio .beneficios h1::before, .conteudo-principal.ciclo-do-oleo .descarte-oleo h1::before, 
.conteudo-principal.pontos-coleta h1::before{
    content: "";
    border-left: 7px solid #41901C;
    margin-right: 10px;
}

.conteudo-principal.inicio .equipe h1::before, .conteudo-principal.ciclo-do-oleo .produtos-reciclagem h1::before{
    content: "";
    border-left: 7px solid #87D936;
    margin-right: 10px;
}

.conteudo-principal.inicio .parcerias h1::before, .conteudo-principal.ciclo-do-oleo .reciclagem-caseira h1::before,
.conteudo-principal.contato h1::before{
    content: "";
    border-left: 7px solid #D9B855;
    margin-right: 10px;
}

.conteudo-principal.inicio .projeto, .conteudo-principal.inicio .beneficios, .conteudo-principal.inicio .equipe,
.conteudo-principal.ciclo-do-oleo .ciclo-oleo, .conteudo-principal.ciclo-do-oleo .descarte-oleo, 
.conteudo-principal.ciclo-do-oleo .produtos-reciclagem{
    border-bottom: 3px solid #F2E7AE;
}

.conteudo-principal.inicio .projeto h1, .conteudo-principal.ciclo-do-oleo .ciclo-oleo h1{
    color: #185510;
}

.conteudo-principal.inicio .beneficios h1, .conteudo-principal.ciclo-do-oleo .descarte-oleo h1,
.conteudo-principal.pontos-coleta h1{
    color: #41901C;
}

.conteudo-principal.inicio .equipe h1, .conteudo-principal.ciclo-do-oleo .produtos-reciclagem h1{
    color: #87D936;
}

.conteudo-principal.inicio .parcerias h1, .conteudo-principal.ciclo-do-oleo .reciclagem-caseira h1,
.conteudo-principal.contato h1{
    color: #D9B855;
}

.conteudo-principal.inicio .projeto .conteudo-info .fonte-referencia,
.conteudo-principal.inicio .beneficios .creditos p,
.conteudo-principal.inicio .parcerias .link, 
.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .creditos p,
.conteudo-principal.ciclo-do-oleo .descarte-oleo .creditos, 
.conteudo-principal.ciclo-do-oleo .descarte-oleo .creditos a{
    font-size: 1rem;
    color: #ccc;
    text-decoration: none;
}

.conteudo-principal.inicio .beneficios .creditos p a, 
.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .creditos p a{
    color: #D9B855;
    text-decoration: none;
    font-weight: bold;
}

/*? Conteúdo Inicial - Seção de Projeto */
.conteudo-principal.inicio .projeto{
    font-size: 1.3rem;
}

.conteudo-principal.inicio .projeto .boas-vindas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px;
}

.conteudo-principal.inicio .projeto .boas-vindas img{
    max-width: 260px;
    max-height: 180px;
    align-self: center;
}

.conteudo-principal.inicio .projeto .conteudo-info{
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.conteudo-principal.inicio .projeto .conteudo-info p{
    line-height: 1.7rem;
    margin-bottom: 0;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao{
    max-width: 800px;
    border: 2px solid #D9B855;
    border-radius: 20px;
    align-self: center;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao .titulo-ods{
    background-color: #D9B855;
    margin-top: 0;
    padding: 5px 0;
    text-align: center;
    border-radius: 15px 15px 0 0;
    color: #fff;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao .objetivo, 
.conteudo-principal.inicio .projeto .conteudo-info .citacao .artigos{
    padding: 0 15px 15px 15px;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao .objetivo{
    font-size: 1.7rem;
    color: #a78c3b;
    margin-bottom: 0;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao .artigos{
    font-size: 1.2rem;
    margin-top: 0;
}

.conteudo-principal.inicio .projeto .conteudo-info .citacao .artigos .artigo{
    color: #D9B855;
}

/*? Conteúdo Inicial - Seção de Benefícios */
.conteudo-principal.inicio .beneficios .card-container-beneficios{
    display: grid;
    grid-template-columns: repeat(3, 270px);
    justify-content: center;
    gap: 35px;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 15px;
    box-shadow: 1px 5px 5px gray;
    padding: 20px 0;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios:hover{
    transform: scale(1.1);
    transition: .8s;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios img{
    margin-top: 10px;
    align-self: center;
    width: 120px;
    height: 75px;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios .titulo{
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    border: 1px solid;
    border-width: 3px 0;
    margin-bottom: 0;
    padding: 5px;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios .conteudo{
    margin-top: 0;
    padding: 5px 25px;
    align-self: center;
    color: #fff;
    font-size: 1.1rem;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios .conteudo sub{
    font-size: .8rem;
}

/*? Card Solo */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.solo{
    background-color: #523838;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.solo .titulo{
    border-color: #785252;
    background-color: #785252;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.solo .conteudo{
    background-color: #664545;
}*/

/*? Card Água */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.agua{
    background-color: #407093;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.agua .titulo{
    background-color: #9DC6FB;
    border-color: #9DC6FB;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.agua .conteudo{
    background-color: #7aacf1;
}*/

/*? Card Atmosfera */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.atmosfera{
    background-color: #b63d45;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.atmosfera .titulo{
    background-color: #DD636E;
    border-color: #DD636E;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.atmosfera .conteudo{
    background-color: #DA4A54;
}*/

/*? Card Renda */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.renda{
    background-color: #185510;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.renda .titulo{
    background-color: #87D936;
    border-color: #87D936;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.renda .conteudo{
    background-color: #41901C;
}*/

/*? Card Animais Aquáticos */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.animais-aquaticos{
    background-color: #07A9F4;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.animais-aquaticos .titulo{
    background-color: #64e9fd;
    border-color: #64e9fd;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.animais-aquaticos .conteudo{
    background-color: #3ec2ff;
}*/

/*? Card Produtos Químicos */
.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.produtos-quimicos{
    background-color: #D9B855;
}

.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.produtos-quimicos .titulo{
    background-color: #ffd968;
    border-color: #ffd968;
}

/*.conteudo-principal.inicio .beneficios .card-container-beneficios .card-beneficios.produtos-quimicos .conteudo{
    background-color: #FFC14F;
}*/

/*? Conteúdo Inicial - Seção de Equipe */
.conteudo-principal.inicio .equipe .card-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 20px;
}

.conteudo-principal.inicio .equipe .card-participante{
    margin: 0;
    max-width: 500px;
    text-align: center;
    color: #a78c3b;
    font-weight: bold;    
    border-radius: 15px;
    padding: 0 20px;
}

.conteudo-principal.inicio .equipe .card-participante img{
    width: 180px;
    border-radius: 100px;
    height: 180px;
    box-shadow: 1px 5px 5px gray;
}

.conteudo-principal.inicio .equipe .card-participante .container-content p{
    font-size: 1.4rem;
}

/*? Conteúdo Inicial - Seção de Parcerias */
.parceiros{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 auto;
}

.parceiros .fatec-osasco a, .parceiros .cps a{
    text-decoration: none;
}

figure.fatec-osasco, figure.cps{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

figure.fatec-osasco img, figure.cps img{
    max-width: 280px;
    height: 150px;
}

/*? Conteúdo Ciclo do Óleo */
.conteudo-principal.ciclo-do-oleo .ciclo-oleo{
    padding-bottom: 5px;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo p{
    font-size: 1.3rem;
}

.conteudo-principal.inicio .projeto h1,
.conteudo-principal.ciclo-do-oleo .ciclo-oleo h1,
.conteudo-principal.ciclo-do-oleo .descarte-oleo h1,
.conteudo-principal.ciclo-do-oleo .reciclagem-caseira h1{
    margin-bottom: 0;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo h2{
    margin: 0;
    font-size: 1.6rem;
    padding: 8px;
    color: #fff;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo h3{
    font-size: 1.4rem;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .titulo-ambientais{
    background-color: #87D936;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .titulo-sociais{
    background-color: #D9B855;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .agua{
    color: #407093;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .solo{
    color: #664545;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .atmosfera{
    color: #b63d45;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo .intro-impactos-ambientais{
    padding: 0;
}

.conteudo-principal.ciclo-do-oleo .ciclo-oleo .ciclo-oleo-conteudo p{
    padding: 0 20px 0 0;
}

.conteudo-principal.ciclo-do-oleo .descarte-oleo .passos-descarte{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 10px;
}

.conteudo-principal.ciclo-do-oleo .descarte-oleo .passos-descarte img{
    max-width: 1000px;
    height: 310px;
}

.conteudo-principal.ciclo-do-oleo .descarte-oleo .passos-descarte .creditos{
    align-self: flex-start;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 40px;
    justify-content: center;
    text-align: center;
    list-style: none;
    font-size: 1.3rem;
    padding-bottom: 20px;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 50px 0 50px;
    border-radius: 15px;
    box-shadow: 1px 5px 5px gray;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos:hover{
    transform: scale(1.1);
    transition: .8s;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos img{
    width: 120px;
    height: 75px;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.biodiesel{
    background-color: #185510;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.sabao{
    
    background-color: #407093;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.produtos-limpeza{
    background-color: #3E6DAB;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.tintas{
    background-color: #f5cc50;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.massa{
    background-color: #41901C;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .card-produtos.racao{
    background-color: #a78c3b;
}

.conteudo-principal.ciclo-do-oleo .produtos-reciclagem .card-container-produtos .titulo{
    color: white;
}

.conteudo-principal.ciclo-do-oleo .reciclagem-caseira p{
    font-size: 1.3rem;
}

.conteudo-principal.ciclo-do-oleo .reciclagem-caseira .receita{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    font-size: 1.3rem;
}

.conteudo-principal.ciclo-do-oleo .reciclagem-caseira .receita iframe{
    align-self: center;
}

.conteudo-principal.ciclo-do-oleo .reciclagem-caseira .receita h2{
    color: #41901C;
}

.conteudo-principal.ciclo-do-oleo .reciclagem-caseira .receita .lista-materiais,
.conteudo-principal.ciclo-do-oleo .reciclagem-caseira .receita .modo-preparo{
    margin: 0;
    padding-right: 50px;
    line-height: 1.7rem;
}

/*? Conteúdo Pontos de Coleta */
.conteudo-principal.pontos-coleta .painel-pontos-coleta .info{
    font-size: 1.3rem;
}

.conteudo-principal.inicio .projeto .conteudo-info a,
.conteudo-principal.ciclo-do-oleo .reciclagem-caseira a,
.conteudo-principal.pontos-coleta .painel-pontos-coleta .info a{
    text-decoration: none;
    color: #D9B855;
    transition: .8s;
}

.conteudo-principal.inicio .projeto .conteudo-info a:hover,
.conteudo-principal.ciclo-do-oleo .reciclagem-caseira a:hover,
.conteudo-principal.pontos-coleta .painel-pontos-coleta .info a:hover{
    color: #a78c3b;
}

.conteudo-principal.pontos-coleta .painel-pontos-coleta h2{
    font-size: 1.9rem;
    background-color: #D9B855;
    color: #fff;
    padding: 5px 10px;
    text-shadow: 1px 1px 2px black;
}

.conteudo-principal.pontos-coleta .painel-pontos-coleta .pontos-coleta{
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, 400px);
    row-gap: 30px;
    justify-content: space-evenly;
}

.conteudo-principal.pontos-coleta .painel-pontos-coleta .pontos-coleta .local{
    max-width: 500px;
    border: 2px solid #41901C;
    border-radius: 20px;
}

.conteudo-principal.pontos-coleta .painel-pontos-coleta .pontos-coleta .local .endereco{
    margin: 0;
    background-color: #41901C;
    padding: 10px 15px;
    color: #fff;
    border-radius: 15px 15px 0 0;
}

.conteudo-principal.pontos-coleta .painel-pontos-coleta .pontos-coleta .local .info-local{
    font-size: 1.2rem;
    color: #41901C;
    padding: 0 15px 0 15px;
}

/*? Conteúdo Contato */
.conteudo-principal.contato .contato .container-contato{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    flex-wrap: wrap;
}

.conteudo-principal.contato .container-contato hr{
    height: 50vh;
    border: 1px solid #F2E7AE;
}

.conteudo-principal.contato .contato .container-contato .msg-contato, 
.conteudo-principal.contato .contato .container-contato .form-contato{
    margin: 0 auto;
    font-size: 1.3rem;
}

.conteudo-principal.contato .contato .container-contato .msg-contato{
    max-width: 400px;
}

.conteudo-principal.contato .contato .container-contato .msg-contato b{
    color: #D9B855;
} 

.conteudo-principal.contato .contato .container-contato .form-contato{
    line-height: 45px;
    top: -5px;
}

.conteudo-principal.contato .contato .container-contato .form-contato label{
    margin: 0;
}

.conteudo-principal.contato .contato .container-contato .form-contato input[type="text"], 
.conteudo-principal.contato .contato .container-contato .form-contato input[type="email"], 
.conteudo-principal.contato .contato .container-contato .form-contato textarea{
    border-radius: 5px;
    border: 2px solid;
    border-color: #D9B855;
    padding: 10px 10px 10px;
    width: 480px;
    font-size: 1.2rem;
    font-weight: bold;
}

.conteudo-principal.contato .contato .container-contato .form-contato input[type="text"]::placeholder, 
.conteudo-principal.contato .contato .container-contato .form-contato input[type="email"]::placeholder, 
.conteudo-principal.contato .contato .container-contato .form-contato textarea{
    font-weight: bold;
    margin: 0;
    font-size: 1.1rem;
    font-family: Arial, Helvetica, sans-serif;
}

.conteudo-principal.contato .contato .container-contato .form-contato .btn-form{
    margin-top: 25px;   
    background-color: #185510;
    color: white;
    border-radius: 5px;
    border: 3px solid #185510;
    font-weight: bold;
    text-transform: uppercase;
    padding: 11px 25px 11px 25px;
    cursor: pointer;
}

.conteudo-principal.contato .contato .container-contato .form-contato .btn-form.limpar{
    margin-left: 15px;
    background-color: #fff;
    color: #185510;
}

.conteudo-principal.contato .contato .container-contato .form-contato .btn-form:hover{
    color: #185510;
    background-color: #fff;
    transition: all ease-in-out .8s;
}

.conteudo-principal.contato .contato .container-contato .form-contato .btn-form.limpar:hover{
    color: #fff;
    background-color: #185510;
    transition: all ease-in-out .8s;
}

.conteudo-principal.contato .contato .container-contato .form-contato label.erro{
    color: rgb(206, 33, 33);
}

.conteudo-principal.contato .contato .container-contato .form-contato input.erro,
.conteudo-principal.contato .contato .container-contato .form-contato textarea.erro
{
    outline-color: rgb(206, 33, 33);
    border: 2px solid rgb(206, 33, 33);
}

.conteudo-principal.contato .contato .container-contato .form-contato input.erro:focus,
.conteudo-principal.contato .contato .container-contato .form-contato textarea.erro:focus{
    outline-color: rgb(206, 33, 33);
}

.conteudo-principal.contato .contato .container-contato .form-contato input.sucess,
.conteudo-principal.contato .contato .container-contato .form-contato textarea.sucess{
    border: 2px solid #099b4b;
}

.conteudo-principal.contato .contato .container-contato .form-contato .msg-erro{
    margin: 0;
    display: none; 
    color: rgb(206, 33, 33);
    font-size: 1rem;
}

.conteudo-principal.contato .contato .container-contato .form-contato #msg-process-form{
    display: none;
    color: #fff;
    background-color: rgb(206, 33, 33);
    border-radius: 5px;
    padding-left: 15px;
}

.conteudo-principal.contato .contato .container-contato .form-contato #msg-process-form.sucess{
    display: none;
    color: #fff;
    background-color: #099b4b;
    border-radius: 5px;
    padding-left: 15px;
}

/*? Footer */
footer{
    display: flex;
    background-color: #87D936;
    height: 100px;
    align-items: center;
}

footer p{
    font-size: 1.4rem;
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #185510;
}

/*? Botão de voltar ao topo*/
#btn-topo{
    display: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 3px solid #185510;
    border-radius: 20px;
    background-color: #185510;
    position: fixed;
    cursor: pointer;
    color: white;
    right: 25px;
    bottom: 25px;
    transition: right .7s;
}

#btn-topo i{
    font-size: 1.1rem;
    font-weight: bold;
}

#btn-topo:hover{
    background-color: white;
    color: green;
    border-color: 1px solid #fff;
    transition: .8s;
}