@charset "UTF-8";
@import url("https://use.typekit.net/vyg7swb.css");


/* Variáveis */

:root {
    --cor-primaria: #CD1F1F;
    --cor-secundaria: #D96262;
    --cor-terciaria: #D43333;
    --background: #F7F7F7;
    --fonte-cor: #0D0D0D;
}

/* Código... */
* {
    margin: 0;
    padding: 0;
    
}

*::selection {
    background-color: var(--cor-secundaria);
    color: var(--background);
}

html, body {
    font-family: 'Rig Sans', sans-serif, Arial, Helvetica, sans-serif;
    height: 100%;
    color: var(--fonte-cor);
    scroll-behavior: smooth;
}

header {
    display: flex;
    padding: 5px 0;
    position: fixed;
    height: 50px;
    z-index: 1000;
    width: 100%;
    align-items: center;
    justify-content: center;
}

a.gt_switcher-popup {
    color: #fff !important;
}

.gt_switcher-popup > span {
    display: none;
}

@media screen and (min-width: 1400px) {
    a.gt_switcher-popup {
        position: relative;
        right: 232px;
    }
}

a.glink {
    font-family: 'Rig Sans', sans-serif;
    color: #000000;
    font-weight: medium;
}

header > .cabecalho {
    display: flex;
    width: 100%;
    max-width: 1110px;
    align-items: center;
    justify-content: space-between;
}

header > .cabecalho > a.logo > img {
    max-width: 50px;
    width: 50px;
    left: -2px;
}

header > .cabecalho > nav {
     margin: auto;
     display: flex;
}

header > .cabecalho > nav ul {
    display: flex;
    gap: 15px;
    list-style-type: none;
}

li.dropdown > ul.drop {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
}

li.dropdown > ul.drop > li {
    padding: 10px;
    margin-top: 20px;
    backdrop-filter: blur(8px);
    background-color: #4d4d4d;
}

.cll-drop {
    opacity: 0;
    max-height: 0;
}

li.dropdown > ul.drop > li > a::after {
    position: relative;
}

li.dropdown:hover > ul.drop {
    position: absolute;
    opacity: 1;
    visibility: visible;
    max-height: 100%;
}

header a {
    padding-bottom: 5px;
    color: #fff;
    justify-content: flex-end;
    position: relative;
    text-decoration: none;
    font-weight: normal;
}

header a:hover {
    transition: .5s;
    color: #c0c0c0;
}

header > .cabecalho > nav{ margin: 0; }

nav.menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--cor-primaria);
    transition: width 0.3s ease-out, left 0.3s ease-out 0.3s;
  }

  @media screen and (min-width: 992px) and (max-width: 1400px) {
    .logo {
        margin: 0;
        left: -5%;
    }
  }

header a:hover::after {
    width: 100%;
    left: 0;
    transition: width 0.3s ease-in, left 0.3s ease-in;
}


.ativo {
    transition: .5s;
    -webkit-backdrop-filter: blur(8px);
    background-color: #222222ce;
    backdrop-filter: blur(8px);
}

div.suba-ativo {
    display: block;
}

.scroll-down-button {
    position: fixed;
    bottom: 20px;
    right: 0%;
    fill: #CD1F1F;
    background-color: #CD1F1F;
    border-radius: 50%;
    color: var(--cor-secundaria);
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 9999;
  }
  
  .symbol {
    fill: #fff;
    width: 40px;
    height: 40px;
  }
  

main {
    display: flex;
    justify-content: center;
    padding: 50px 30px;
    flex-direction: column;
    gap: 80px;
    margin: auto;
    position: relative;
    max-width: 1100px;
}

h1 {
    font-size: 2rem;
    color: var(--cor-terciaria);
}

h2 {
    font-size: 1.8rem;
    color: var(--cor-secundaria);
}

h3 {
    font-size: 1.4rem;
    color: var(--cor-secundaria);
}

p {
    font-size: 1.2rem;
}

main > section b {
    color: var(--cor-secundaria);
}

.video {
    width: 80%;
    height: 100%;
    margin: 30px auto;
    align-items: center;
    justify-content: center;
}

.video > div {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
}

.video > div > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

main > section#conheca > div#propaganda > img {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
    padding-right: 15px;
}

main > section#conheca > div#propaganda > div > h2 {
    padding-bottom: 5px;
}

.baixeja h3 {
    margin-bottom: 30px;
    padding-top: 10px;
    text-align: center;
}

main > section#conheca svg {
    text-align: center;
    width: 100%;
    margin: auto;
}
.baixeja {
    margin: 30px 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.baixeja a {
    text-decoration: none;
}
.baixeja img {
    width: 250px;

}

.baixeja img:hover {
    opacity: 50%;
    transition: ease .5s;
}

main > section#conheca > div {
    padding: 20px 0;
}

main > section#conheca > p {
    padding: 10px 0;
}

main > section#conheca > img{
    margin: 20px auto;
    display: flex;
    align-items: center;
    width: 50%;
}

main > section#conheca > h2 {
    margin-top: 30px;
    text-align: center;
}

main > section#conheca .video {
    z-index: 0;
    margin: 0 auto  auto;
    height: 10%;
}

a button {
    width: 20%;
    padding: 10px;
    font-size: 1.2rem;
    background-color: var(--cor-primaria);
    border: none;
    border-radius: 30px;
    box-shadow: 3px 3px 3px #0d0d0d8c;
    margin: auto;
    cursor: pointer;
    display: flex;
    color: #fff;
    text-decoration: none;
    justify-content: center;
}

a button:hover {
    opacity: .5;
    transition: ease-in-out .5s;
}

a{
    text-decoration: none;
    cursor: pointer;
}

main > section#apoiador {
    margin: -90px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    align-items: center;
}

main > section#apoiador > a {
    width: 100%;
    display: flex;
}

main > section#apoiador img {
    width: 260px;
    text-align: center;
    margin: auto;
}
section.form {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

section.form > h1 {
    margin-top: 10px;
}

section.form > form > div {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 5px;
    width: 250px;
}
input, textarea {
    padding: 10px;
    border: none;
    border-radius: 10px;
    resize: none;
    background-color: var(--background);
    outline-color: var(--cor-primaria);
}

input[type="submit"] {
    background-color: var(--cor-primaria);
    color: var(--background);
    font-size: 1.1rem;
    margin-top: 15px;
    cursor: pointer;
}
input[type="submit"]:hover {
    opacity: .5;
    transition: .3s;
}

.drop-ftn > li {
    list-style: none;
    padding-bottom: 10px;
}

.drop-ftn > li a{
    color: #fff;
    text-decoration: none;
    padding-bottom: 3px;
}

.icon-munici {
    width: 150px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 150px;
}

section.cidades > .icon-munici {
    width: 150px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 150px;
}

footer {
    background-color: #0D0D0D;
    color: #fff;
    height: 30rem;
    align-items: center;
    display: flex;
    max-width: 100%;
    justify-content: center;
    flex-direction: column;
}


footer > span {
    vertical-align: middle;
    text-align: center;
    padding-top: 20px;
}

footer a {
    color: #fff;
}

footer a:hover {
    transition: .5s;
    color: var(--cor-secundaria);
}

footer > div { display: grid; padding: 10px 0; width: 100%; justify-content: center; grid-template-columns: repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--background) }
footer > div > div.nave { margin: auto }
footer > div > div.nave > h1 { color: var(--background); margin-bottom: 10px }
footer > div > div.nave > nav > ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 10px }
footer > div > div.nave > nav > ul > li { border-bottom: 1px solid var(--background) }
footer > div > div.nave > nav > ul > li:hover { transition: .5s; opacity: .5 }
footer > div > div.nave > nav > ul > li > a { vertical-align: middle; align-items: center; display: flex; padding: 5px; color: var(--background); text-decoration: none }
footer > div > a { text-align: center }
footer > div > div.ftn-redes { margin: auto }
footer > div > a > img { width: 150px; max-width: 150px }
footer > div > div.ftn-redes > a > img { width: 50px }
footer > div > div.ftn-redes > a:hover { opacity: .5; transform: .5s }

.menu-itens { display: none; order: -1; }

img {
    min-width: 0px;
    max-width: 100vw;
}



aside.slideshow > div { display: none }
aside.slideshow > .desktop { display: block }
aside.slideshow > div img { width: 100vw; height: 100vh; object-fit: cover }

section#saiba { display: flex; flex-direction: column; gap: 30px; margin-bottom: 20px; word-wrap: break-word;}
section#saiba > h1 { padding-bottom: 10px }
section#saiba b { color: #440000 }
section#saiba > div > ul, ol { padding-left: 50px }
section#saiba img { width: 50%; max-width: 1400px; margin: auto }
section#saiba a { color: var(--cor-primaria); }
section#saiba > h2 { color: var(--cor-secundaria); }

section.blog { margin-bottom: 30px }
section.blog > h1 {max-width: 20rem; width: auto; margin: 60px auto; text-align: center; border-bottom-width: 10px; border-bottom: 3px solid var(--cor-primaria) }
section.blog > .cards { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin: auto }
section.blog > .cards > .card { box-shadow: 3px 3px 3px #b8b8b87a; display: flex; flex-direction: column; background-color: var(--background); border-radius: 20px }
section.blog > .cards > .card { width: 100%; max-width: 340px;}
section.blog > .cards > .card > .foto > img { width: 100%; max-width: 340px; height: 220px; object-fit: cover; border-top-left-radius: 10px; border-top-right-radius: 10px }
section.blog > .cards > .card > .date { padding: 10px; margin: 10px; width: 150px; color: #fff; font-weight: bold; text-align: center; border-radius: 10px; background-color: var(--cor-secundaria) }
section.blog > .cards > .card > .text > h2 > a { color: #000; font-size: 1.5rem; text-decoration: none }
section.blog > .cards > .card > .text > h2 > a:hover { color: var(--cor-secundaria); transition: .5s ease-out }
section.blog > .cards > .card > .text { padding: 10px; text-decoration: none }
section.blog > .cards > .card > .text > p > a { text-decoration: none; color: #4d4d4d }
section.blog > .cards > .card > .text > p { font-size: 1rem }

section.entrevistado > aside.veja > div.cards > div.card > img {
    width: 140px;
}

.saibamaisBlog {
    color: #CD1F1F;
}

section.cidades { display: flex; flex-direction: column; text-align: center; margin-bottom: 30px }

section.cidades img { width: 50%; margin: auto }

section.cidades > div { display: flex; flex-wrap: wrap; margin: 10px auto; flex-direction: column; width: 150px; gap: 5px }
.btns-city button { margin-top: 10px; width: 150px; padding: 10px; background-color: var(--cor-terciaria); border: none; border-radius: 10px }
.btns-city   button:hover { opacity: .5; transition: .5s ease-out; cursor: pointer }
.btns-city button  { color: var(--background); font-weight: bold; text-decoration: none }

section.city-parceira { text-align: center; margin: auto; display: flex; justify-content: center; align-items: center; flex-direction: column }
section.city-parceira > div > img { width: 50%; margin: auto }
section.city-parceira > div { justify-content: center; margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 30px }

section.noticias {
     display: flex; flex-direction: column; align-items: center; text-align: center;}
.notic-button { width: 100%; background-color: var(--cor-primaria); padding: 10px; border: none; border-radius: 20px; cursor: pointer }
a .notic-button { color: #fff; font-size: 1.3rem }
.redes-city { width: 70px }

.contato { display: flex; flex-direction: column; }
.contato > div { display: flex; gap: 30px;}
.contato > div > img {height: 100%; width: 100%;}


.notic-flex img{ width: 100%; }

#cadastro-empresas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#cadastro-empresas input {
    width: 100%;
    display: block;
    max-width: 100%;
}

#cadastro-empresas select {
    background-color: var(--background);
    border-radius: 12px;
    width: 100%;
    border: none;
    padding: 10px;
}

#cadastro-empresas input[type="submit"] {
    width: 250px;
}

.colabore {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.blog h1{
    word-wrap: break-word;
}

.colaboreTxt {
    resize: both;
    max-width: 300px;
}

.logoSpmp {
    width: 13rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logosp {
    width: 130px !important;
}

#sec {
    width: 450px !important;
}

.text h3 {
    font-size: 1.3rem;
}

.button_galery {
    padding: .5rem;
    display: flex;
    flex-direction: row;
    border: none;
    border-radius: 2px;
    width: 40px;
    height: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.add {
    background-color: #00c000;
    font-size: 1.3rem;
    color: #fff;
}

.remove {
    background-color: var(--cor-primaria);
}

.form_galery {
    display: flex;
    gap: 1rem;
}