@charset "UTF-8";
:root {
  --preto: #23212F;
  --cinza: #999999;
  --branco: #E4E4E4;
  --filtroBranco: brightness(0) saturate(100%) invert(97%) sepia(2%) saturate(5%) hue-rotate(177deg) brightness(115%) contrast(79%);
  --brancoPuro: #ffffff;
  --azul: #23212F;
  --filtroAzul: brightness(0) saturate(100%) invert(10%) sepia(6%) saturate(2945%) hue-rotate(209deg) brightness(95%) contrast(91%);
  --vermelho: #E6263B;
  --verde: #008f39;
  --offsetTexto: 50%;
  --offset13: calc(100%/3);
  --bordas: 10px;
  --tamanho: 50px;
  --tamanhoMax: calc(var(--tamanho)*2);
  --tamanhoMax2x: calc(var(--tamanhoMax)*2);
  --tamanhoMin: calc(var(--tamanho)/2);
  --tamanhoMin2x: calc(var(--tamanhoMin)/2);
  --tamanhoMin4x: calc(var(--tamanhoMin2x)/2);
  --tamanhoHeader: 111px;
  --tamanhoLarguraScrollbar: 15px;
  --fontTitulo: 300 6rem/7.2rem "Host Grotesk", sans-serif;
  --fontTituloSeccao: 600 2.2rem/3.5rem "Host Grotesk", sans-serif;
  --fontTituloSlider: 300 9.6rem/10.4rem "Host Grotesk", sans-serif;
  --fontTituloOutrosProjetos: 500 4.2rem/4.6rem "Host Grotesk", sans-serif;
  --fontCorpo: 300 2.2rem/3.5rem "Host Grotesk", sans-serif;
  --fontCorpoMenor: 300 1.8rem/2.8rem "Host Grotesk", sans-serif;
  --fontTags: 300 1.8rem/2rem "Host Grotesk", sans-serif;
  --fundoLeitura: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  font-family: "Host Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  background: var(--branco);
  font-size: 50%;
}

body {
  width: 100%;
  position: relative;
}
body main {
  padding-top: calc(var(--tamanhoHeader) + var(--tamanhoMax));
  padding-left: var(--tamanho);
  padding-right: var(--tamanho);
}

figure {
  border-radius: var(--bordas);
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

h1 {
  font: var(--fontTitulo);
}

h2 {
  font: var(--fontTituloSeccao);
}

p, dt, dd, input, textarea, h3 {
  font: var(--fontCorpo);
}

.tituloseccao {
  text-transform: uppercase;
  color: var(--preto) !important;
}

h1, h2, p, dt, dd, input, textarea, h3, a, li {
  color: var(--preto);
}

button {
  border: 0;
  background: inherit;
  font: inherit;
  padding: 0;
}

.botao {
  padding: var(--tamanhoMin2x) var(--tamanhoMin);
  background: var(--preto);
  color: var(--branco);
  border-radius: var(--bordas);
  display: block;
  width: fit-content;
  font: var(--fontCorpo);
  line-height: 2.2rem;
  cursor: pointer;
}
.botao.branco {
  background: var(--branco);
  color: var(--preto);
}

.tags {
  display: flex;
  gap: var(--tamanhoMin2x);
}
.tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tamanhoMin4x) var(--tamanhoMin2x);
  font: var(--fontTags);
  border: 1px solid var(--branco);
  border-radius: 1000px;
  color: var(--branco);
}

.menu {
  padding: var(--tamanhoMin) var(--tamanho);
  border-bottom: 1px solid var(--preto);
  position: fixed;
  width: 100%;
  font: var(--fontCorpo);
  background: var(--branco);
  z-index: 9;
  transition: top 0.35s ease;
  top: 0;
}
.menu.escondido {
  top: calc(var(--tamanhoHeader) * -1);
}
.menu.escondido .botao.escondido {
  opacity: 1;
}
.menu.transparente {
  background: transparent;
}
.menu nav {
  display: flex;
  align-items: center;
  gap: var(--tamanho);
}
.menu nav .logo {
  flex: 1;
}
.menu nav .logo img {
  height: 58px;
  width: auto;
}
.menu nav ul {
  display: flex;
  gap: var(--tamanho);
}
.menu nav .botao {
  opacity: 0;
}
.menu nav .botao.escondido {
  opacity: 1;
  position: fixed;
  top: var(--posicaoBotaoHeader);
  right: var(--tamanho);
}

footer {
  background: var(--azul);
}
footer::after {
  content: "";
  background: var(--vermelho);
  height: 44px;
  width: 100%;
  display: block;
}
footer .formulario-caixa {
  position: relative;
}
footer .formulario-caixa .imagem figure {
  height: 50vh;
  border-radius: 0;
}
footer .formulario-caixa .imagem::after {
  content: "";
  display: block;
  background: var(--azul);
  height: 50vh;
  width: 100%;
}
footer .formulario-caixa form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--branco);
  padding: var(--tamanho);
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: var(--tamanho);
}
footer .formulario-caixa form h2 {
  font: var(--fontTitulo);
}
footer .formulario-caixa form input, footer .formulario-caixa form textarea {
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--preto);
  flex: 0 0 100%;
  display: block;
}
footer .formulario-caixa form input {
  height: fit-content;
}
footer .formulario-caixa form textarea {
  height: 20vh;
}
footer .formulario-caixa form .dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tamanhoMin);
}
footer .formulario-caixa form .dados input:nth-child(1), footer .formulario-caixa form .dados input:nth-child(2) {
  flex: 0 0 calc(50% - var(--tamanhoMin2x));
}
footer .formulario-caixa form .enviar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .formulario-caixa form .enviar .checkboxcaixa {
  display: flex;
  align-items: center;
  gap: var(--tamanhoMin2x);
}
footer .formulario-caixa form .enviar .checkboxcaixa .checkbox {
  height: 15px;
  width: 15px;
  background: var(--preto);
  border-radius: 100%;
  display: block;
}
footer .formulario-caixa form .enviar .checkboxcaixa p {
  font: var(--fontCorpoMenor);
}
footer .formulario-caixa form .enviar .checkboxcaixa p a {
  text-decoration: underline;
  text-underline-offset: 15%;
}
footer .footer {
  padding: var(--tamanho);
  display: flex;
  gap: var(--tamanho);
}
footer .footer .icone {
  width: var(--offsetTexto);
}
footer .footer .icone img {
  width: 400px;
}
footer .footer dl {
  display: flex;
  gap: var(--tamanho);
  flex: 1;
  height: fit-content;
  align-self: end;
}
footer .footer dl div {
  flex: 1;
}
footer .footer dl div dt {
  text-transform: uppercase;
  opacity: 0.2;
  margin-bottom: var(--tamanhoMin);
}
footer .footer dl div dt, footer .footer dl div dd, footer .footer dl div a {
  color: var(--branco);
}

.inicio {
  padding: 0;
}
.inicio section {
  padding: 0 var(--tamanho);
  margin: var(--tamanhoMax) 0;
}
.inicio .slider {
  height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
}
.inicio .slider figure {
  height: 100%;
  border-radius: 0;
}
.inicio .slider figure img {
  height: 100%;
}
.inicio .slider .fundo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--fundoLeitura);
}
.inicio .slider .info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--tamanho);
}
.inicio .slider .info h2 {
  color: var(--branco);
  font: var(--fontTituloSlider);
}
.inicio .slider .info h2 b {
  font-weight: 600;
}
.inicio .slider .info p {
  color: var(--branco);
}
.inicio .counters {
  border-bottom: 1px solid var(--preto);
  padding: var(--tamanhoMax) 0;
  margin: 0;
}
.inicio .counters dl {
  display: flex;
  padding: 0 var(--tamanho);
}
.inicio .counters dl div {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
}
.inicio .counters dl div dd {
  font: var(--fontTituloSlider);
}
.inicio .apresentacao {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--tamanho);
}
.inicio .apresentacao .header {
  flex: 1;
}
.inicio .apresentacao .header .botao {
  margin-top: var(--tamanhoMin);
}
.inicio .apresentacao .info {
  width: var(--offsetTexto);
}
.inicio .testemunhos .header {
  margin-bottom: var(--tamanho);
}
.inicio .testemunhos .header p {
  font: var(--fontTitulo);
}
.inicio .testemunhos .info {
  display: flex;
  gap: var(--tamanhoMin);
}
.inicio .testemunhos .info figure {
  flex: 1;
  background: var(--brancoPuro);
  padding: var(--tamanhoMin);
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
  justify-content: space-between;
}
.inicio .testemunhos .info figure img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-position: center;
}
.inicio .testemunhos .info figure div {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
}
.inicio .testemunhos .info figure blockquote p, .inicio .testemunhos .info figure figcaption p {
  font: var(--fontCorpoMenor);
}
.inicio .testemunhos .info figure blockquote p::before, .inicio .testemunhos .info figure blockquote p::after {
  content: '"';
}
.inicio .testemunhos .info figure figcaption p {
  font-weight: 600;
}

.projeto header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--tamanhoMax);
  column-gap: var(--tamanho);
}
.projeto header .tituloseccao, .projeto header h1 {
  flex: 0 0 100%;
}
.projeto header dl {
  display: flex;
  flex-wrap: wrap;
  width: var(--offsetTexto);
  margin-top: var(--tamanho);
  gap: var(--tamanhoMin);
}
.projeto header dl div {
  flex: 0 0 300px;
}
.projeto header dl div dt {
  color: var(--preto);
}
.projeto header dl div dd {
  color: var(--cinza);
  display: inline-block;
}
.projeto header dl div dd:not(:last-of-type)::after {
  content: ",";
  margin-right: 0.25em;
}
.projeto header dl div.areas {
  flex: 0 0 calc(100% - 300px - var(--tamanhoMin));
}
.projeto header .descricao {
  flex: 1;
  margin-top: var(--tamanho);
  color: var(--cinza);
}
.projeto .principal {
  position: relative;
}
.projeto .principal img {
  height: calc(100vh - var(--tamanhoMax));
}
.projeto .sobre {
  display: flex;
  gap: var(--tamanho);
  margin: var(--tamanhoMax) 0;
}
.projeto .sobre h2 {
  width: var(--offsetTexto);
}
.projeto .sobre .textos {
  flex: 1;
}
.projeto .sobre .textos p {
  color: var(--cinza);
}
.projeto .sobre .acordions {
  font: var(--fontCorpo);
}
.projeto .sobre .acordions div {
  margin: var(--tamanhoMin) 0;
}
.projeto .sobre .acordions div:last-of-type {
  margin-bottom: 0;
}
.projeto .sobre .acordions div h3 {
  border-bottom: 1px solid var(--preto);
  padding-bottom: var(--tamanhoMin2x);
}
.projeto .sobre .acordions div h3 button, .projeto .sobre .acordions div h3 div {
  width: 100%;
  text-align: start;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.projeto .sobre .acordions div h3 button::after, .projeto .sobre .acordions div h3 div::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/recursos/midias/seta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--filtroAzul);
}
.projeto .sobre .acordions div p {
  margin-top: var(--tamanhoMin);
}
.projeto .galeria h2 {
  display: none;
}
.projeto .galeria > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--tamanhoMin);
  row-gap: var(--tamanho);
}
.projeto .galeria > div figure {
  flex: 0 0 100%;
  position: relative;
}
.projeto .galeria > div figure img {
  height: calc(100vh - var(--tamanhoMax));
}
.projeto .galeria > div figure.metade {
  flex: 0 0 calc(50% - var(--tamanhoMin2x));
}
.projeto .galeria > div figure.metade img {
  height: auto;
  max-height: calc(100vh - var(--tamanhoMax));
}
.projeto figure .extras {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: calc(100%);
}
.projeto figure .extras figcaption {
  opacity: 0;
  height: fit-content;
  margin: var(--tamanhoMin);
  font: var(--fontCorpo);
  border-radius: var(--bordas);
  padding: var(--tamanhoMin2x);
  background: var(--branco);
  transition: opacity 0.3s ease;
}

.outrosprojetos {
  display: flex;
  gap: var(--tamanho);
  margin: var(--tamanhoMax) 0;
  position: relative;
}
.outrosprojetos h2 {
  width: var(--offset13);
}
.outrosprojetos .itens {
  display: flex;
  gap: var(--tamanhoMin);
  justify-content: end;
  flex: 1;
}
.outrosprojetos .itens a {
  position: relative;
  border-radius: var(--bordas);
  overflow: hidden;
}
.outrosprojetos .itens a figure img {
  height: 35vh;
  width: 100%;
}
.outrosprojetos .itens a .info {
  color: var(--branco);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--tamanhoMin);
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: var(--tamanhoMin2x);
  background: var(--fundoLeitura);
}
.outrosprojetos .itens a .info h2 {
  font: var(--fontTituloOutrosProjetos);
  width: fit-content;
  color: var(--branco);
}
.outrosprojetos .itens a .bandeiras {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--tamanhoMin);
  color: var(--branco);
}
.outrosprojetos .itens a .bandeiras li {
  background: var(--preto);
  border-radius: var(--bordas);
  border-color: var(--azul);
}
.outrosprojetos.dedicado {
  margin-top: 0;
}
.outrosprojetos.dedicado .itens {
  flex-wrap: wrap;
  justify-content: start;
}
.outrosprojetos.dedicado .itens a {
  flex: 0 0 calc(50% - var(--tamanhoMin2x));
}
.outrosprojetos.dedicado .itens a figure img {
  height: 55vh;
}
.outrosprojetos.inicio {
  background: var(--azul);
  flex-direction: column;
  padding: 0;
}
.outrosprojetos.inicio .header {
  position: relative;
  margin: var(--tamanho);
  margin-bottom: 0;
}
.outrosprojetos.inicio .header h2, .outrosprojetos.inicio .header p {
  color: var(--branco) !important;
}
.outrosprojetos.inicio .header p {
  font: var(--fontTitulo);
}
.outrosprojetos.inicio .header .botao {
  position: absolute;
  bottom: 0;
  right: 0;
}
.outrosprojetos.inicio .itens {
  justify-content: start;
  overflow-x: scroll;
  padding-bottom: var(--tamanho);
}
.outrosprojetos.inicio .itens a {
  flex: 0 0 calc(40% - var(--tamanhoMin));
}
.outrosprojetos.inicio .itens a:first-of-type {
  margin-left: var(--tamanho);
}
.outrosprojetos.inicio .itens a:last-of-type {
  margin-right: var(--tamanho);
}

.filtros {
  margin-bottom: var(--tamanhoMin);
}
.filtros ul {
  display: flex;
  flex-wrap: wrap;
}
.filtros ul li {
  border-color: var(--preto);
  border-radius: var(--bordas);
  width: 14vw;
  text-align: center;
  color: var(--preto);
}
.filtros.areas ul li {
  width: fit-content;
  border-radius: 1000px;
}
.filtros.bandeiras ul li {
  width: fit-content;
  background: var(--azul);
  color: var(--branco);
}

.sobrenos {
  display: flex;
  position: relative;
}
.sobrenos .imagem {
  width: var(--offsetTexto);
}
.sobrenos .imagem img {
  height: 100%;
}
.sobrenos .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--tamanho);
}
.sobrenos .info p {
  color: var(--cinza);
  margin-top: var(--tamanho);
}
.sobrenos .info dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tamanho);
  margin-top: var(--tamanho);
}
.sobrenos .info dl div {
  flex: 0 0 calc(50% - var(--tamanhoMin));
}
.sobrenos .info dl div dd {
  color: var(--cinza);
}
.sobrenos.ondeestamos {
  margin-bottom: var(--tamanhoMax);
}
.sobrenos.ondeestamos .imagem {
  position: relative;
}
.sobrenos.ondeestamos .imagem .botao {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: var(--tamanhoMin);
}
.sobrenos.ondeestamos .info dl div {
  flex: 1;
}

.quemsomos {
  display: flex;
  gap: var(--tamanho);
  margin: var(--tamanhoMax) 0;
}
.quemsomos h2 {
  width: var(--offset13);
}
.quemsomos div {
  flex: 1;
  display: flex;
  gap: var(--tamanhoMin);
}
.quemsomos div article {
  flex: 1;
}
.quemsomos div article figure {
  position: relative;
}
.quemsomos div article figure img {
  height: 65vh;
}
.quemsomos div article figure figcaption {
  position: absolute;
  bottom: 0;
  padding: var(--tamanhoMin);
}
.quemsomos div article figure figcaption h3 {
  font: var(--fontTituloOutrosProjetos);
  color: var(--branco);
}
.quemsomos div article p {
  color: var(--cinza);
  margin-top: var(--tamanhoMin);
}

.backoffice {
  padding: var(--tamanho);
}
.backoffice .toltip {
  position: fixed;
  background: var(--branco);
  border: 1px solid var(--preto);
  padding: var(--tamanhoMin2x);
  border-radius: var(--bordas);
  max-width: 400px;
  z-index: 9;
  bottom: var(--tamanho);
}
.backoffice .toltip p:nth-child(1) {
  display: flex;
  align-items: center;
  gap: var(--tamanhoMin4x);
  margin-bottom: var(--tamanhoMin4x);
}
.backoffice .toltip p:nth-child(1)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/recursos/midias/seta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--filtroAzul);
  background-image: url("/recursos/midias/ajuda.svg");
  filter: var(--filtroAzul);
}
.backoffice .adicionar, .backoffice .editar, .backoffice .visibilidade, .backoffice .adicionar-projeto, .backoffice .adicionar-imagem, .backoffice .guardar, .backoffice .alterar, .backoffice .mover, .backoffice .voltar, .backoffice .apagar {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.backoffice .adicionar:hover::before, .backoffice .editar:hover::before, .backoffice .visibilidade:hover::before, .backoffice .adicionar-projeto:hover::before, .backoffice .adicionar-imagem:hover::before, .backoffice .guardar:hover::before, .backoffice .alterar:hover::before, .backoffice .mover:hover::before, .backoffice .voltar:hover::before, .backoffice .apagar:hover::before {
  max-width: 200px;
  margin-right: var(--tamanhoMin4x);
}
.backoffice .adicionar::before, .backoffice .editar::before, .backoffice .visibilidade::before, .backoffice .adicionar-projeto::before, .backoffice .adicionar-imagem::before, .backoffice .guardar::before, .backoffice .alterar::before, .backoffice .mover::before, .backoffice .voltar::before, .backoffice .apagar::before {
  transition: max-width 0.35s ease, margin 0.35s ease;
  content: "Editar";
  max-width: 0;
  margin-right: 0;
  font: var(--fontTags);
  overflow: hidden;
  text-wrap: nowrap;
}
.backoffice .adicionar::before, .backoffice .adicionar-projeto::before, .backoffice .adicionar-imagem::before {
  content: "Criar";
  color: var(--branco);
}
.backoffice .guardar::before {
  content: "Guardar";
}
.backoffice .alterar::before {
  content: "Alterar";
}
.backoffice .voltar::before {
  content: "Voltar";
}
.backoffice .mover.frente::before {
  content: "Mover para Frente";
}
.backoffice .mover.tras::before {
  content: "Mover para Trás";
}
.backoffice .apagar::before {
  content: "Apagar";
}
.backoffice .modal.flutuante {
  position: fixed;
  z-index: 8;
  background: var(--branco);
  padding: var(--tamanho);
  margin: var(--tamanho);
  border-radius: var(--bordas);
  width: calc(100% - var(--tamanhoMax2x));
}
.backoffice .modal .filtros.bandeiras ul li {
  background: transparent;
  color: var(--azul);
}
.backoffice .modal .filtros ul li:hover {
  cursor: pointer;
}
.backoffice .modal .filtros ul li.selecionado {
  background: var(--azul);
  color: var(--branco);
}
.backoffice .modal .filtros.bandeiras li::after {
  filter: var(--filtroBranco);
}
.backoffice .outrosprojetos {
  margin-bottom: 0;
}
.backoffice .outrosprojetos .itens {
  gap: 25px;
}
.backoffice .outrosprojetos .itens a {
  flex: 0 0 calc((100% - var(--tamanho)) / 3);
}
.backoffice .outrosprojetos .itens a img {
  height: 40vh !important;
}
.backoffice .outrosprojetos .itens a.adicionar-projeto {
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
}
.backoffice .outrosprojetos .itens a.adicionar-projeto::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/recursos/midias/seta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--filtroAzul);
  background-image: url("/recursos/midias/mais.svg");
  filter: var(--filtroBranco);
}
.backoffice .comandos, .backoffice .comandosgerais {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: var(--tamanhoMin);
  display: flex;
  gap: var(--tamanhoMin2x);
}
.backoffice .comandos .editar, .backoffice .comandos .visibilidade, .backoffice .comandos .guardar, .backoffice .comandos .alterar, .backoffice .comandos .mover, .backoffice .comandos .voltar, .backoffice .comandos .apagar, .backoffice .comandosgerais .editar, .backoffice .comandosgerais .visibilidade, .backoffice .comandosgerais .guardar, .backoffice .comandosgerais .alterar, .backoffice .comandosgerais .mover, .backoffice .comandosgerais .voltar, .backoffice .comandosgerais .apagar {
  background: var(--branco);
  padding: var(--tamanhoMin2x);
  border-radius: var(--bordas);
}
.backoffice .comandos .editar::after, .backoffice .comandos .visibilidade::after, .backoffice .comandos .guardar::after, .backoffice .comandos .alterar::after, .backoffice .comandos .mover::after, .backoffice .comandos .voltar::after, .backoffice .comandos .apagar::after, .backoffice .comandosgerais .editar::after, .backoffice .comandosgerais .visibilidade::after, .backoffice .comandosgerais .guardar::after, .backoffice .comandosgerais .alterar::after, .backoffice .comandosgerais .mover::after, .backoffice .comandosgerais .voltar::after, .backoffice .comandosgerais .apagar::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/recursos/midias/seta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--filtroAzul);
  background-image: url("/recursos/midias/editar.svg");
  filter: var(--filtroAzul);
  z-index: 1;
}
.backoffice .comandos .visibilidade.online, .backoffice .comandosgerais .visibilidade.online {
  background: var(--verde);
}
.backoffice .comandos .visibilidade.online::before, .backoffice .comandosgerais .visibilidade.online::before {
  content: "Online";
}
.backoffice .comandos .visibilidade.online::after, .backoffice .comandosgerais .visibilidade.online::after {
  background-image: url("/recursos/midias/certo.svg");
}
.backoffice .comandos .visibilidade.offline, .backoffice .comandosgerais .visibilidade.offline {
  background: var(--vermelho);
}
.backoffice .comandos .visibilidade.offline::before, .backoffice .comandosgerais .visibilidade.offline::before {
  content: "Offline";
}
.backoffice .comandos .visibilidade.offline::after, .backoffice .comandosgerais .visibilidade.offline::after {
  background-image: url("/recursos/midias/anonimo.svg");
}
.backoffice .comandos .guardar::after, .backoffice .comandosgerais .guardar::after {
  background-image: url("/recursos/midias/guardar.svg");
}
.backoffice .comandos .alterar::after, .backoffice .comandosgerais .alterar::after {
  background-image: url("/recursos/midias/alterar.svg");
}
.backoffice .comandos .voltar::after, .backoffice .comandosgerais .voltar::after {
  background-image: url("/recursos/midias/setaesq.svg");
  transform: rotate(180deg);
}
.backoffice .comandos .apagar:hover, .backoffice .comandosgerais .apagar:hover {
  background: var(--vermelho);
}
.backoffice .comandos .apagar::after, .backoffice .comandosgerais .apagar::after {
  background-image: url("/recursos/midias/apagar.svg");
}
.backoffice .comandos .mover.frente::after, .backoffice .comandosgerais .mover.frente::after {
  background-image: url("/recursos/midias/setaesq.svg");
}
.backoffice .comandos .mover.tras::after, .backoffice .comandosgerais .mover.tras::after {
  background-image: url("/recursos/midias/setaesq.svg");
  transform: rotate(180deg);
}
.backoffice .menuflutuante {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: var(--tamanho);
  display: flex;
  align-items: center;
  background: var(--branco);
  border-radius: var(--bordas);
  border: 1px solid var(--preto);
  z-index: 9;
}
.backoffice .menuflutuante p {
  margin: var(--tamanhoMin);
  margin-right: 0;
}
.backoffice .menuflutuante .comandosgerais {
  position: initial;
}
.backoffice .menuflutuante .comandosgerais > * {
  outline: 1px solid var(--preto);
}
.backoffice .menuflutuante .comandosgerais .alterar::before {
  content: "Alterar URL";
}
.backoffice *[contenteditable]:focus {
  outline: none;
  text-transform: initial;
}
.backoffice .projeto .filtros.bandeiras ul li {
  background: transparent !important;
  color: var(--azul);
}
.backoffice .projeto .filtros.bandeiras ul li:hover {
  cursor: pointer;
}
.backoffice .projeto .filtros.bandeiras ul li.selecionado {
  background: var(--azul) !important;
  color: var(--branco);
}
.backoffice .projeto figure {
  background: var(--vermelho);
}
.backoffice .projeto figure picture::after {
  background: var(--azul);
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  mix-blend-mode: multiply;
}
.backoffice .projeto figure .comandos {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: fit-content;
  width: fit-content;
  margin: 0;
  cursor: pointer;
}
.backoffice .projeto figure figcaption {
  z-index: 2;
}
.backoffice .projeto figure:hover picture::after {
  opacity: 0.75;
}
.backoffice .projeto figure:hover .comandos {
  opacity: 1;
}
.backoffice .projeto figure:hover figcaption {
  opacity: 1;
}
.backoffice .projeto .galeria .adicionar-imagem {
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(100vh - var(--tamanhoMax));
  min-height: 45vh;
}
.backoffice .projeto .galeria .adicionar-imagem::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/recursos/midias/seta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--filtroAzul);
  background-image: url("/recursos/midias/mais.svg");
  filter: var(--filtroBranco);
}