:root {
    --laranja: #F9A431;
    --amarelo: #F6BE00;
    --azul-sesc: #004C99;
    --azul-claro: #02B3C5;
    --azul-medio: #0884A3;
    --azul-escuro: #1F385B;
    --cinza-medio: #747678;
    --cinza-claro: #D0D0CE;
    /*<------cores areas------>*/
    --esporte: #FECD29;
    --educacao: #6699FF;
    --programacao: #8947B5;
    --saude: #92D5DF;
    --cultura: #E75557;
    --assistencia: #C8A2CB;
    --turismo: #A8CF45;
    --administrativo: #0d0c0c;
    --mesa: #158c15;
    /*<------cores areas gradientes------>*/
    --esporte-gradiente: -webkit-linear-gradient(left, #fad961 0%, #f76b1c 100%);
    --educacao-gradiente: -webkit-linear-gradient(left, #17ead9 0%, #6078ea 100%);
    --saude-gradiente: -webkit-linear-gradient(left, #42e695 0%, #388288 100%);
    --cultura-gradiente: -webkit-linear-gradient(left, #f36265 0%, #961276 100%);
    --assistencia-gradiente: -webkit-linear-gradient(left, #c56cd6 0%, #3425af 100%);
    --turismo-gradiente: -webkit-linear-gradient(left, rgba(168,207,69,1) 0%, rgba(2,197,142,1) 100%);
    --administrativo-gradiente: -webkit-linear-gradient(left, #0d0c0c 0%, rgba(153,153,153,1) 100%);
    --mesa-gradiente: -webkit-linear-gradient(left, #158c15 0%, rgba(21,162,127,1) 100%);
    /*<------cores classificação idade------>*/
    --clr-livre: #01a550;
    --clr-10: #0094d9;
    --clr-12: #ffcc03;
    --clr-14: #f78420;
    --clr-16: #ed1b25;
    --clr-18: black;
}


/*============BACKGROUNDS============*/
.bg-dark-blue {
    background-color: var(--azul-escuro);
}

.bg-blue {
    background-color: var(--azul-medio);
}

.bg-light-blue {
    background-color: var(--azul-claro);
}

.bg-blue {
    background-color: var(--azul-sesc);
}

.bg-educacao {
    background-color: var(--educacao);
    font-weight: bold;
    color: white !important
}

.bg-educacao-gradiente {
    background: var(--educacao-gradiente) !important;
    font-weight: bold;
    color: white !important
}

.bg-esporte {
    background-color: var(--esporte);
    font-weight: bold;
    color: white !important
}

.bg-esporte-gradiente {
    background: var(--esporte-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-saude {
    background-color: var(--saude);
    font-weight: bold;
    color: white !important
}

.bg-saude-gradiente {
    background: var(--saude-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-cultura {
    background-color: var(--cultura);
    font-weight: bold;
    color: white !important
}

.bg-cultura-gradiente {
    background: var(--cultura-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-assistencia {
    background-color: var(--assistencia);
    font-weight: bold;
    color: white !important
}

.bg-assistencia-gradiente {
    background: var(--assistencia-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-turismo {
    background-color: var(--turismo);
    font-weight: bold;
    color: white !important
}

.bg-turismo-gradiente {
    background: var(--turismo-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-mesa {
    background-color: var(--mesa);
    /*font-weight: bold;*/
    color: white !important
}

.bg-mesa-gradiente {
    background: var(--mesa-gradiente);
    /*font-weight: bold;*/
    color: white !important
}

.bg-administrativo {
    background-color: var(--administrativo);
    font-weight: bold;
    color: white !important
}

.bg-administrativo-gradiente {
    background: var(--administrativo);
    /*font-weight: bold;*/
    color: white !important
}

.bg-roxo {
    background: rgb(143,85,154)
}

.bg-roxo-sombra {
    background: rgb(111, 67, 120)
}

.bg-azul-claro {
    background: var(--azul-claro)
}

.bg-azul-claro-sombra {
    background: #00a4b5;
}

.bg-amarelo {
    background: rgb(255,198,0)
}

.bg-amarelo-sombra {
    background: rgb(191, 149, 2)
}

/*============BOTÕES============*/
.btn-area-educacao {
    font-weight: bold;
    border: 1px solid var(--educacao);
    color: var(--educacao);
    background: white;
}

    .btn-area-educacao:hover {
        text-decoration: none;
        border: 1px solid var(--educacao);
        color: white;
        background: var(--educacao);
    }


.btn-area-esporte {
    font-weight: bold;
    border: 1px solid rgb(250, 217, 97);
    color: rgb(250, 217, 97);
    background: white;
}

    .btn-area-esporte:hover {
        text-decoration: none;
        border: 1px solid rgb(250, 217, 97);
        color: white;
        background: rgb(250, 217, 97);
    }

.btn-area-saude {
    font-weight: bold;
    border: 1px solid rgb(66, 230, 149);
    color: rgb(66, 230, 149);
    background: white;
}

    .btn-area-saude:hover {
        text-decoration: none;
        border: 1px solid rgb(66, 230, 149);
        color: white;
        background: rgb(66, 230, 149);
    }

.btn-area-cultura {
    font-weight: bold;
    border: 1px solid rgb(243, 98, 101);
    color: rgb(243, 98, 101);
    background: white;
}

    .btn-area-cultura:hover {
        text-decoration: none;
        border: 1px solid rgb(243, 98, 101);
        color: white;
        background: rgb(243, 98, 101);
    }

.btn-area-assistencia {
    font-weight: bold;
    border: 1px solid rgb(197, 108, 214);
    color: rgb(197, 108, 214);
    background: white;
}

    .btn-area-assistencia:hover {
        text-decoration: none;
        border: 1px solid rgb(197, 108, 214);
        color: white;
        background: rgb(197, 108, 214);
    }
/*
.btn-area-turismo {
    color: var(--turismo);
}*/



/*============TEXTOS============*/
.text-educacao {
    color: var(--educacao);
}

.text-esporte {
    color: var(--esporte);
}

.text-saude {
    color: var(--saude);
}

.text-cultura {
    color: var(--cultura);
}

.text-assistencia {
    color: var(--assistencia);
}

.text-turismo {
    color: var(--turismo);
}

.text-mesa {
    color: var(--mesa) !important;
}

.text-administrativo {
    color: var(--administrativo);
}

.text-acqua {
    color: var(--azul-claro) !important;
}