@charset "utf-8";

#site { float: left; width: 100%;}
#site .navegar { float: left; width: 100%;}

#site .espacamento { float: right; width: 100%; min-height: 200px; margin: 71px 0;}

#site .titulo { float: left; width: 100%; margin: 0 0 14px;}
#site .titulo h1 { float: left; width: 100%; padding: 62px 20px 20px; outline: 0px solid rgb(222 222 222); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.4em; line-height: 0; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#site .titulo h2 { float: left; width: 100%; padding: 62px 20px 20px; outline: 0px solid rgb(222 222 222); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.4em; line-height: 0; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}

#site .texto { float: left; width: 100%;}
#site .texto h3 { float: left; width: 100%; padding: 21px 0; font-size: 1.2em;}
#site .texto h3.center { text-align: center;}
#site .texto h3.justify { text-align: justify;}

#site .erro404 { float: left; width: 100%; padding: 51px 0 71px; position: relative;}
#site .erro404 .nome { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 5em; line-height: 1;}
#site .erro404 .numero { float: left; width: 100%; margin: 20px 0; text-align: center; font-size: 12em;}
#site .erro404 .numero b { padding: 0 20px; outline: 2px solid rgb(150 150 150);}
#site .erro404 .infor { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em; line-height: 1;}

#site .cds .imagem {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#site .cds .imagem::before {
  content: "\25B6"; /* Código Unicode para o ícone de "play" (um triângulo direcionado para a direita) */
  font-size: 40px; /* Tamanho do ícone */
  color: rgba(255, 255, 255, 0.8); /* Cor do ícone */
  border: 5px solid #fff; /* Adiciona uma borda ao redor do ícone */
  border-radius: 50%; /* Deixa o ícone redondo */
  width: 40px; /* Largura do círculo */
  height: 40px; /* Altura do círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza vertical e horizontalmente */
  transition: opacity 0.2s;
}

#site .cds .imagem:hover::before {
  opacity: 0.7; /* Reduz a opacidade do ícone quando a imagem é hover */
}

/* Media query para esconder o ícone em aparelhos celulares (telas menores) */
@media (max-width: 767px) {
  #site .cds .imagem::before {
    display: none; /* Esconde o ícone em telas menores (celulares) */
  }
}


#site .cds { float: left; width: 100%;}
#site .cds .quatro { float: left; width: 23%; margin: 0 1% 10px;}
#site .cds .seis { float: left; width: 14.6666%; margin: 0 1% 10px;}
#site .cds .imagem { float: left; width: 100%; position: relative;}
#site .cds .imagem .obs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: 50%;}
#site .cds .imagem .obs:hover { background-color: rgba(0 0 0 / 50%); background-image: url('../../imagens/site/link.png');}
#site .cds .imagem .img { float: left; width: 100%;}
#site .cds .nomes h3 { float: left; width: 100%;}
#site .cds .nomes h3 { float: left; width: 100%; margin: 12px 0 0; text-align: center; font-size: 1em;}
#site .cds .nomes h4 { float: left; width: 100%; margin: 8px 0 0; text-align: center; font-size: 0.9em;}
#site .cds .quatro_l2 { float: left; width: 100%; height: 1px; display: none;}
#site .cds .quatro_l4 { float: left; width: 100%; height: 1px;}
#site .cds .seis_l2 { float: left; width: 100%; height: 1px; display: none;}
#site .cds .seis_l3 { float: left; width: 100%; height: 1px; display: none;}
#site .cds .seis_l6 { float: left; width: 100%; height: 1px;}

#site .usuarios { float: left; width: 100%;}
#site .usuarios .item { float: left; width: 120px; padding: 10px; margin: 0 5px 20px 5px; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px;}
#site .usuarios .item .visitar { float: left; width: 100%;}
#site .usuarios .item .imagem { float: left; width: 100%; position: relative; overflow: hidden;}
#site .usuarios .item .imagem img { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#site .usuarios .item .nome { float: left; width: 100%; padding: 20px 0; text-align: center; line-height: 0; overflow: hidden;}
#site .usuarios .item .opcao { float: left; width: 100%; text-align: center;}
#site .usuarios .item .seguidor { padding: 15px 10px 14px; text-transform: uppercase; font-weight: bold; font-size: 0.9em; color: rgb(250 250 250);}
#site .usuarios .item .seguidor.seguir { background-color: rgb(0 150 130);}
#site .usuarios .item .seguidor.seguir:hover { background-color: rgb(0 170 100);}
#site .usuarios .item .seguidor.seguindo { background-color: rgb(90 90 90);}
#site .usuarios .item .seguidor.seguindo:hover { background-color: rgb(90 90 90 / 90%);}
#site .usuarios .item:hover { -webkit-box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%);}

#site .estilos { float: left; width: 100%;}
#site .estilos .item { float: left; width: 20%; padding: 10px;}
#site .estilos .item .imagem { float: left; width: 100%;}
#site .estilos .item .imagem img { float: left; width: 100%;}
#site .estilos .item .detalhes { float: left; width: 100%; margin: 10px 0 0;}
#site .estilos .item .detalhes h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em;}


#site .blog { float: left; width: 100%;}
#site .blog .item { float: left; width: 25%; padding: 10px;}
#site .blog .item .imagem { float: left; width: 100%;}
#site .blog .item .imagem img { float: left; width: 100%;}
#site .blog .item .detalhes { float: left; width: 100%; margin: 10px 0 0;}
#site .blog .item .detalhes h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; opacity: 0.7;}
#site .blog .item .detalhes h3 { float: left; width: 100%; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px solid rgb(90 90 90 / 30%); text-align: center; font-size: 1em; opacity: 0.7;}
#site .blog .quatro_l2 { float: left; width: 100%; height: 1px; display: none;}
#site .blog .quatro_l4 { float: left; width: 100%; height: 1px;}


#site .carrosel { float: left; width: 100%; height: 0; position: relative;}
#site .carrosel .crs { float: left; width: 100%; position: relative;}
#site .carrosel .owl-carousel { float: left; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; display: none; }
#site .carrosel .owl-carousel.owl-loaded { display: block;}
#site .carrosel .owl-carousel.owl-loading { opacity: 0; display: block;}
#site .carrosel .no-js .owl-carousel { display: block;}
#site .carrosel .owl-stage-outer { position: relative; overflow: hidden;}
#site .carrosel .owl-stage-outer .owl-item { float: left; position: relative; -webkit-tap-highlight-color: transparent;}
#site .carrosel .owl-stage-outer .owl-item .item { float: left; width: 100%;}
#site .carrosel .owl-nav { position: absolute; top: -38px; right: 0;}
#site .carrosel .owl-nav button { position: absolute; width: 30px; padding: 12px 0; background-position: 50%; background-repeat: no-repeat; font-size: 0; line-height: 0; cursor: pointer; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px;}
#site .carrosel .owl-nav button.owl-prev { opacity: 0.7; right: 50px; background-image: url('../../imagens/site/seta-recuar.png?d2');}
#site .carrosel .owl-nav button.owl-next { opacity: 0.7; right: 0; background-image: url('../../imagens/site/seta-avancar.png?d2');}
#site .carrosel .owl-nav button:hover { opacity: 1;}
#site .carrosel .owl-nav button.disabled { opacity: 0.5;}
#site .carrosel .owl-nav button.disabled:hover { opacity: 0.5;}
#site .carrosel .owl-dots { display: none;}

#site .alerta { bottom: 55px;}

#site .icoplay { position: absolute; width: 35px; height: 35px; bottom: 10px; left: 10px; background-image: url('../../imagens/site/icoplay.png?d'); background-position: 50%; background-repeat: no-repeat;}

@media only screen and (max-width: 1000px){
  #site .espacamento { margin: 71px 0;}

  #site .cds .seis { width: 31.3333%;}
  #site .cds .seis_l2 { display: none;}
  #site .cds .seis_l3 { display: none;}
  #site .cds .seis_l6 { display: block;}

  #site .erro404 .numero { font-size: 8em;}
  #site .erro404 .infor { font-size: 1.5em;}
}
@media only screen and (max-width: 800px){
  #site .estilos .item { width: 33.3%;}

  #site .blog .item { width: 50%;}
  #site .blog .quatro_l2 { display: block;}
  #site .blog .quatro_l4 { display: none;}
}
@media only screen and (max-width: 700px){
  #site .carrosel .owl-nav { top: -34px;}
  #site .carrosel .owl-nav button.owl-prev { display: none;}
}
@media only screen and (max-width: 500px){
  #site .cds .quatro { width: 48%;}
  #site .cds .quatro_l2 { display: block;}
  #site .cds .quatro_l4 { display: none;}

  #site .cds .seis { width: 48%;}
  #site .cds .seis_l2 { display: block;}
  #site .cds .seis_l3 { display: none;}
  #site .cds .seis_l6 { display: none;}
}
@media only screen and (max-width: 400px){
  #site .blog .item { width: 100%;}
  #site .blog .quatro_l2 { display: none;}
  #site .blog .quatro_l4 { display: none;}
}