@import url("fontawesome-all.min.css");

@font-face {
  font-family: 'Century-Bold';
  src: url(../fonts/century-gothic/centurygothic_bold.ttf);
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: 'Century-Normal';
  src: url(../fonts/century-gothic/centurygothic.ttf);
  font-weight: normal;
  font-style: normal;
}


body {
  /* font-family: 'Poppins' !important; */
  margin: 0;
  padding: 0;

  font-family: 'Century-Bold' !important;
  /* font-size: 56px !important; */

}

/* Loading page*/

.loader-page {
  position: fixed;
  z-index: 25000;
  background: rgb(255, 255, 255);
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.loader-page::before {
  content: "";
  position: absolute;
  border: 2px solid #6b1d1d;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-sizing: border-box;
  border-left: 2px solid rgba(50, 150, 176, 0);
  border-top: 2px solid rgba(50, 150, 176, 0);
  animation: rotarload 1s linear infinite;
  transform: rotate(0deg);
}

.loader-page::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(107, 29, 29, .5);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-sizing: border-box;
  border-left: 2px solid rgba(50, 150, 176, 0);
  border-top: 2px solid rgba(50, 150, 176, 0);
  animation: rotarload 1s ease-out infinite;
  transform: rotate(0deg);
}


@keyframes rotarload {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

/* Fin Loading page*/

.ept {
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 10px auto;
}

.ept img {
  width: 75% !important;
}


header {
  height: auto;
  background-size: cover;
}

.contenedor {
  max-width: 1280px;
  width: 100%;
  margin: auto;
}

/* Carrousel */

.boton-link-carrousel {
  text-decoration: none !important;
  color: white !important;
  position: absolute;
  top: 75%;
  left: 40%;
  padding: 15px 32px;
  border-radius: 10px;
  background: rgba(0, 0, 128, 0.6);
}

.boton-link-carrousel:hover {
  color: white !important;
  font-size: 15px;
  transition: all 500ms;
}

[data-slide-to="0"] {
  background-color: #6b1d1d !important;
}

[data-slide-to="1"] {
  background-color: #bc9459 !important;
}

[data-slide-to="2"] {
  background-color: #6b1d1d !important;
}

[data-slide-to="3"] {
  background-color: #bc9459 !important;
}

[data-slide-to="4"] {
  background-color: #6b1d1d !important;
}

/* Fin Carrusel */

/* Infografias */
.video-noti {
  max-width: 1280px;
  width: 80%;
  margin: 50px auto;
}

.fb-noti {
  max-width: 1280px;
  width: 80%;
  margin: 50px auto;
}

.fb-noti2 {
  max-width: 1280px;
  width: 80%;
  margin: 0px auto;
}

.jumbotron {
  background-image: url("../images/BackCafe.png");
  color: white !important;
  width: 100% !important;
}

.jumbotron-guinda {
  background-image: url("../images/BackGuinda.png");
  color: white !important;
  width: 100% !important;
}

.jumbotron-gris {
  /* background-image: url("../images/BackGris.png"); */
  color: black !important;
  /* width: 90% !important; */
  margin: auto;
  background: #f5f5f5;
  padding: 30px;
}

/* Fin Infografias */



/*  Enterate Taxco */

.caption-et a {
  text-decoration: none !important;
  color: black !important;
}

.caption-et a:hover {
  color: #6b1d1d !important;
}

/*  Fin Enterate Taxco */

/* Blog */
.thumbnail {
  width: auto;
  overflow: auto;
  cursor: default;
  height: 680px !important;
}

.thumbnail img {
  width: auto !important;
  height: 300px !important;
  overflow: hidden !important;
}

/* Fin Blog*/


/* Blog Part */
.titulo-blog {
  margin-bottom: 30px;
}

.fecha-blog {
  border-right: 5px solid #6b1d1d;
  text-align: center;
  padding-right: 0px !important;
}

.img-blog img {
  max-width: 100%;
  height: auto;
}

.texto-blog p {
  margin: auto;
  font-size: 16px !important;
}

.caption-blog-part a {
  text-decoration: none !important;
  color: black !important;
}

.caption-blog-part a:hover {
  color: #6b1d1d !important;
}


/* Fin Blog Part */


/* Pagos */
#pagosT {
  margin-bottom: 50px;
}

.pago-guinda {
  height: 250px;
  background-image: url("../images/BackGuinda.png");
  /* background-color: #6b1d1d; */
  margin-bottom: 50px;
  color: white;
  text-align: center;
  border-radius: 15px;
}

.pago-guinda h2 {
  padding-top: 100px;
}

.pago-cafe {
  height: 250px;
  /* background-image: url("../images/BackGuinda.png"); */
  background-color: #bc9459;
  margin-bottom: 50px;
  color: white;
  text-align: center;
}

.pago-cafe h2 {
  padding-top: 100px;
}

.pagos a {
  text-decoration: none !important;
}

.pagos {
  margin-top: 50px;
}

/* Fin Pagos */



/* Transparencia */
.transparencia-1 a {
  background-color: #bc9459;
  display: block;
  border-radius: 5px;
  height: 120px;
  width: 120px;
  font-size: 18px;
}

.transparencia-2 a {
  background-color: #6b1d1d;
  display: block;
  border-radius: 5px;
  height: 120px;
  width: 120px;
  color: white !important;
  font-size: 18px;
}

.iconos-transparencia a {
  text-decoration: none !important;
  color: black;
  height: 230px;
  width: 250px;
  padding: 8px;
  margin-bottom: 30px;
}

.iconos-transparencia a:hover {
  color: black;
  font-weight: bold;
}

.iconos-transparencia a:visited {
  color: black;
}

.iconos-transparencia img {
  height: 80px;
  margin: 22px;
}

.caption-et img {
  height: 320px;
  width: 450px;
  padding: 20px;
}

#oci h3 {
  text-transform: uppercase;
}


/* Notificaciones */

.iconos-notificacion {
  margin-bottom: 30px;
}

.notificacion-1 a {
  background-color: #bc9459;
  display: block;
  border-radius: 5px;
  height: 120px;
  width: 120px;
  padding: 8px;
}

.notificacion-2 a {
  background-color: #6b1d1d;
  display: block;
  border-radius: 5px;
  height: 120px;
  width: 120px;
  padding: 8px;
}

/* Fin Notificaciones*/

/* Portal */
.boton-trans {
  color: rgb(125, 1, 1);
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}

/* Portal */
.boton-trans:visited {
  color: rgb(125, 1, 1);
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}

.boton-trans:hover {
  background: linear-gradient(0deg, rgba(41, 0, 0, 1) 0%, rgba(107, 29, 29, 1) 31%, rgba(107, 29, 29, 1) 90%, rgba(255, 255, 255, 0.8016456582633054) 100%);
  padding: 15px 32px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 15px;
  color: rgb(255, 255, 255);
  transition: all 200ms;
}

#poster:before,
#poster:after {
  margin-top: 120px;
  position: absolute;
  content: '';
  width: 25%;
  height: 100%;
  top: 0;
  left: 25%;
  border-left: 10px solid rgb(255, 255, 255);
  border-right: 10px solid rgb(255, 255, 255);
  box-sizing: border-box;
  /* background-color: red; */
  height: 577px;
}

#poster:after {
  left: 75%;
  border-right: 0;
  /* background-color: red; */
  height: 577px;
}

.main-link {
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.main-link:hover {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.main-link:visited {
  color: white;
  text-decoration: none;
}

.main-link:focus {
  text-decoration: none;
  color: white;
}

.hit-the-floor {
  color: #6b1d1d;
  font-size: 24px;
  font-weight: bold;
  /* font-family: Helvetica; */
  text-transform: uppercase;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
  margin-bottom: 25px;
  text-align: center;
}

.divcenter {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Fin Portal */


/* Footer */
.footer-tax {
  background-image: url("../images/BackGuinda.png");
  /* height: 280px; */
  color: white;
  margin-top: 60px;
}

.footer-contenido {
  border-left: 10px solid #bc9459;
  border-top: 10px solid #bc9459;
  border-right: 10px solid #bc9459;
  /* border-bottom: 10px solid #bc9459; */
  height: 180px;
}

.logo-footer img {
  height: 75px;
  margin: -10px 0px 0px 93px;
  /* margin: auto; */
}

.cintillo {
  width: 100%;
  margin-top: -27px;
}

/* Fin footer */

.presidente img {
  height: 410px;
  margin-left: auto;
  display: block;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 250px;
}

.encuesta-vid {
  width: auto;
  height: 720px;
  border-radius: 20px;
  border: solid;
}



/* directorio */
#ch {
  width: 100%;
  box-shadow: 5px 5px 15px 5px rgba(106, 28, 50, 0.9);
  background: #fff;
}

.mayus {
  text-transform: uppercase;
}

.icon-fracc {
  width: 120px;
}

.folder_cerrado {
  background-image: url('assets/images/icons/folder_close.png');
}

.folder_abierto {
  background-image: url('assets/images/icons/folder_open.png');
}

.parrafo-bold {
  font-weight: bold;
}

.links-81 p {
  font-size: 16px;
}

/* fin directorio */


/* Mapa */
#map {
  margin: auto;
  height: 600px;
  width: 100%;
}

.gm-style-iw-d {
  margin-top: -40px !important;
}


/* fin Mapa */

/* Portal Transparencia Modales*/
.mision-vision {
  background-image: url('../images/transparencia/background.png');
  background-size: 115%;
  background-repeat: no-repeat;
  width: 75%;
  background-position-x: -42px;
  background-position-y: -18px;
  height: 610px;
  margin: auto;
}

.mision-vision .close {
  margin: 8px;
}

.mision-vision .modal-header {
  text-align: center;
  margin-top: 40px;
  border: none;
}

.mision-vision .modal-body {
  margin-left: 50px;
}

.mision-vision .modal-footer {
  margin-top: 30px;
  border: none;
}

.cabildo-modal {
  background-image: url('../images/transparencia/background.png');
  background-size: 110%;
  background-repeat: no-repeat;
  width: 110%;
  background-position-x: -50px;
  background-position-y: -30px;
  height: 810px;
  margin: auto;
}

.cabildo-modal .close {
  margin: 8px;
}

.cabildo-modal .modal-header {
  margin-left: 38px;
  margin-top: 50px;
  border: none;
  text-align: center;
}

.cabildo-modal .modal-body {
  margin-left: 38px;
  text-align: center;
}

.cabildo-modal h4 {
  color: #6b1d1d;
}

.cabildo-modal h5 {
  font-size: 14px;
}

.cabildo-modal h6 {
  font-size: 12px;
  color: #6b1d1d;
}

/* Fin Portal Transparencia Modales */

/* Apoyos Comunidades */

#bodyContent {
  text-align: center;
}

.modulos-apoyos {
  margin: 8px;
  height: 140px;
  width: 140px;
}

.modal-apoyos {
  background-image: url('../images/backgroudApoyos.png');

  background-repeat: no-repeat;
  /* width: 110%; */
  /* background-position-x: -90px;
  background-position-y: -60px; */
  /* height: 810px; */
  margin: auto;
  /* overflow-y: auto; */
}

.modal-apoyos .modal-header {
  margin: auto;
  text-align: center;
  border: none;
}

.modal-apoyos .modal-body {
  margin-left: 40px;
  text-align: justify;
}

.modal-apoyos .modal-texto {
  padding: 30px !important;
  padding-top: 0px !important;
  margin-top: 60px;
}

.modal-apoyos .close {
  margin: 10px;
}

.modal-apoyos .modal-footer {
  border: none !important;
  padding: 20px !important;
  margin-top: -25px;
}

.modal-apoyos .modal-footer2 {
  border: none;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.firstHeading {
  text-align: center;
  padding: 5px;
  color: #6b1d1d;
  text-shadow: 2px 1px 2px #000000;
}

.spacio {
  margin-top: 30px;
}

.modulos-apoyos p {
  white-space: break-spaces;
  margin: 0 !important;
}

/* colores botones */
.btn-alumbrado {
  color: #fff;
  background-color: #db4c1c;
  border-color: #d2481a;
}

.btn-alumbrado:hover {
  color: #fff !important;
  background-color: #bd380b;
  border-color: rgb(178, 52, 10);
}

.btn-alumbrado:focus {
  color: #fff !important;
  background-color: #bd380b;
  border-color: rgb(178, 52, 10);
}

.btn-obras {
  color: #fff;
  background-color: #6b1d1d;
  border-color: #d2481a;
}

.btn-obras:hover {
  color: #fff !important;
  background-color: #bd380b;
  border-color: rgb(178, 52, 10);
}

.btn-obras:focus {
  color: #fff !important;
  background-color: #bd380b;
  border-color: rgb(178, 52, 10);
}

.btn-sociales {
  color: #fff;
  background-color: #76168b;
  border-color: #710887 !important;
}

.btn-sociales:hover {
  color: #fff !important;
  background-color: #630b77;
  border-color: #710887 !important;
}

.btn-sociales:focus {
  color: #fff !important;
  background-color: #630b77;
  border-color: #710887 !important;
}

.btn-sociales:active {
  color: #fff !important;
  background-color: #520663;
  border-color: #710887 !important;
}


.btn-parques {
  color: #fff;
  background-color: #44910d;
  border-color: #387d07 !important;
}

.btn-parques:hover {
  color: #fff !important;
  background-color: #387d07;
  border-color: #387d07 !important;
}

.btn-parques:focus {
  color: #fff !important;
  background-color: #387d07;
  border-color: #387d07;
}

.btn-parques:active {
  color: #fff !important;
  background-color: #2f6806;
  border-color: #387d07;
}

.btn-parques img {
  width: 100% !important;
}

.btn-educacion {
  color: #fff;
  background-color: #76168b;
  border-color: #710887 !important;
}

.btn-educacion:hover {
  color: #fff !important;
  background-color: #630b77;
  border-color: #710887 !important;
}

.btn-educacion:focus {
  color: #fff !important;
  background-color: #630b77;
  border-color: #710887 !important;
}

.btn-educacion:active {
  color: #fff !important;
  background-color: #520663;
  border-color: #710887 !important;
}

.agua {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/agua.png');
  background-size: cover;
  background-position: center;
  margin: auto;
  border-radius: 100%;
}

.parques {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/parques.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.alumbrado {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/alumbrado.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.obras {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/obras.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.maquinaria {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/maquinaria.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.sociales {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/sociales.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.urbana {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/urbana.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

.salud {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/salud.png');
  background-size: cover;
  background-position: center;
  margin: auto;
  /* width: 200px;
  height: 200px; */
  border-radius: 50%;
  object-fit: cover;
  /* Asegura que la imagen no se deforme */
}

.educacion {
  width: 88%;
  height: 80%;
  background-image: url('../apoyos/logos/educacion.png');
  background-size: cover;
  background-position: center;
  margin: auto;
}

/* fin colores botones */

.contenido-resumen {
  overflow-y: auto;
  height: 220px;
  /* background-image: url("../images/JumilOficialOp.png"); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 20px;
}

.modal-apoyos .modal-header {
  margin: -60px;
}

.modal-title {
  text-align: center;
  padding-bottom: 5px !important;
  margin-top: 20px !important;

}

.modulos-apoyos:focus {
  outline-color: #6b1d1d !important;
  /* outline-width: 10px; */
}

/* modal meses */
.anio {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.modulos-meses {
  background-color: #6b1d1d !important;
  border-color: #7f2424 !important;
  margin: 8px;
}

.modulos-meses:focus {
  outline-color: #bc9459 !important;
}

.modal-apoyos .botones-meses {
  text-align: center;
  /* text-wrap: nowrap; */
}

.carousel-apoyos {
  width: 30% !important;
  height: 320px !important;
  text-align: center;
  margin: auto;
  /* max-height: 350px !important; */
}

.video-apoyos {
  display: flex;
}

.video-apoyos video {
  width: auto;
  height: 250px;
  margin: auto;
}

.modal-tamaño {
  width: 920px !important;
  height: 740px !important;
}

.modal-center {
  width: 100vw !important;
}

.gm-style .gm-style-iw-c {
  max-height: 580px !important;
  top: 30px;
  box-shadow: 0px 0px 20px 7px #000;
}

.gm-style-iw-d {
  max-height: 540px !important;
}

.gm-style .gm-style-iw-tc {
  top: 30px !important;
}

.carousel-control {
  border-radius: 15px;
}

.carousel-inner>.item>img {
  border-radius: 15px;
}

.gm-style .gm-style-iw-t {
  bottom: 0px;
}

.img-carrusel {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
}


.titulo {
  text-align: center;
}

.descripcion {
  text-align: justify;
}

/* Fin Apoyos Comunidades */


.modal-pdf {
  top: 60px;
}

.manuales {
  padding: 5px;
}

.manuales a {
  text-decoration: none;
  color: #000;
  display: inline-block;
  transition: transform 0.3s ease;
}

.manuales a:hover {
  text-decoration: none;
  color: #000;
  transform: scale(1.2);
}

.manuales a:visited {
  text-decoration: none;
  color: #000;
}

.manuales a:active {
  text-decoration: none;
  color: #000;
}

.manuales a:focus {
  text-decoration: none;
  color: #000;
}

.manuales p {
  font-size: 10px;
  padding-left: 40px;
  padding-right: 40px;
}

.modalManual {
  width: 40% !important;
}

.modalManual .modal-content {
  height: 810px !important;
}

 /* El carrusel se ajusta al ancho de la imagen activa */
#myCarousel {
    display: table;          /* se adapta al contenido */
    margin: auto;            /* centra el carrusel */
    width: auto !important;  /* ignora el 100% de bootstrap */
}

/* Cada slide se centra */
#myCarousel .item {
    text-align: center;
}

/* Las imágenes mantienen su ancho original */
#myCarousel .item img {
    display: inline-block;
    height: 450px;       /* ajusta si quieres otra altura */
    width: auto !important;
    max-width: 100%;     /* evita que desborde */
}

/* Sobrescribir los controles de Bootstrap */
#myCarousel .carousel-control {
    width: 8% !important;       /* área clickeable más angosta */
    height: 100% !important;    /* igual al alto de la imagen */
    top: 0 !important;
    bottom: 0 !important;
    background: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Responsive Design */
/* Mostrar en pantallas menores o iguales a 950px (ej. móviles) */
@media(max-width:950px) {

  #map {
    margin: auto;
    height: 400px !important;
    width: 100% !important;
  }

  .logo-footer img {
    height: 70px;
    margin: 30px 10px 10px 10px;
  }

  .footer-contenido {
    height: 320px;
  }

  .footer-tax {
    height: 320px;
  }

  /* #myCarousel img {
    width: auto !important;
    height: auto !important;
  } */

 /* El carrusel se ajusta al ancho de la imagen activa */
#myCarousel {
    display: table;          /* se adapta al contenido */
    margin: auto;            /* centra el carrusel */
    width: auto !important;  /* ignora el 100% de bootstrap */
}

/* Cada slide se centra */
#myCarousel .item {
    text-align: center;
}

/* Las imágenes mantienen su ancho original */
#myCarousel .item img {
    display: inline-block;
    height: 450px;       /* ajusta si quieres otra altura */
    width: auto !important;
    max-width: 100%;     /* evita que desborde */
}

/* Sobrescribir los controles de Bootstrap */
#myCarousel .carousel-control {
    width: 8% !important;       /* área clickeable más angosta */
    height: 100% !important;    /* igual al alto de la imagen */
    top: 0 !important;
    bottom: 0 !important;
    background: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

  .presidente img {
    height: 410px;
    margin-left: auto;
    display: block;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .encuesta-vid {
    width: 360px;
    height: auto;
  }

  .link-encuesta {
    margin-top: 10% !important;
  }

  .link-encuesta2 {
    display: none;
  }

  .jumbotron-gris {
    padding-bottom: 5%;
  }

  .gm-style .gm-style-iw-c {
    max-width: 300px !important;
    min-width: 200px !important;
    max-height: 345px !important;
    top: 30px;
  }

  .modal-tamaño {
    width: 95% !important;
    height: 680px !important;
  }

  .modal-apoyos .modal-body {
    margin-left: 0px;
  }

  .firstHeading {
    font-size: 16px;
    font-weight: bold;
  }

  .carousel-apoyos {
    width: 70% !important;
    text-align: center;
    margin: auto;
  }

  .modal-apoyos {
    background-image: url('../images/backgroudApoyos.png');
    background-size: 125%;
    background-repeat: no-repeat;
    width: 110%;
    background-position-x: -58px;
    background-position-y: 5px;
    margin: 0px;
  }

  .modal-apoyos .modal-footer {
    padding: 10px !important;
    margin-top: -35px;
  }

  .modulos-apoyos p {
    margin: 0 !important;
    font-size: 10px;
  }

  .modulos-apoyos {
    margin: 5px;
    height: 10vh;
    width: 12vh;
  }

  .modal-title {
    padding-bottom: 0px !important;
    text-align: center;
    padding-bottom: 5px !important;
    margin-top: 0px !important;
    font-size: 15px;
  }

  .contenido-resumen {
    margin-top: 10px !important;
    line-height: 1.3;
    height: 200px;
  }

  .contenido-resumen p {
    font-family: 'Century-Bold' !important;
    font-size: 14px;
    font-weight: 500;
  }

  .gm-style img {
    width: 5vh;
  }

  .video-apoyos video {
    width: auto;
    height: 170px;
    margin: auto;
  }
}