body {
    position: relative;
    background-color: #fce9f3;
  }
  
  a:link,
  a:visited,
  a:active {
    text-decoration: none;
  }
  
  h1,
  h2 {
    color: #c13a67;
    font-weight: lighter;
  }
  
  p {
    color: #c13a67;
    font-size: 1vw;
    /* font-weight: bold; */
    text-align: justify;
  }

  /* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


/*===================*/
/* BOB
/*===================*/

@-webkit-keyframes bob-on-hover {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bob-on-hover {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes bob-on-hover-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes bob-on-hover-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.bob-on-hover {
  /* display: inline-block; */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
  -webkit-animation-name: bob-on-hover-float, bob-on-hover;
  animation-name: bob-on-hover-float, bob-on-hover;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

.box2:hover {
  transform: scale(1.02);
  box-shadow:7px 7px 7px 7px rgba(0, 0, 0, 0.25);
}


/*====================*/
/* BUZZ OUT
/*====================*/

@-webkit-keyframes buzz-out-on-hover {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes buzz-out-on-hover {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.buzz-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out-on-hover:hover, .buzz-out-on-hover:focus, .buzz-out-on-hover:active {
  -webkit-animation-name: buzz-out-on-hover;
  animation-name: buzz-out-on-hover;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/*===================*/
/* WOOBLE VERTICAL
/*===================*/

@-webkit-keyframes wobble-vertical-on-hover {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes wobble-vertical-on-hover {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.wobble-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical-on-hover:hover, .wobble-vertical-on-hover:focus, .wobble-vertical-on-hover:active {
  -webkit-animation-name: wobble-vertical-on-hover;
  animation-name: wobble-vertical-on-hover;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
  
  /* .carousel-control-next-icon,
  .carousel-control-prev-icon{
    background-color: #ce788e;
  } */
  /* .barra_navegacion {
      display: flex;
      position: sticky;
      top: -1px;
  } */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
  }
  
  .icono_ite {
    float: center;
    max-width: 17vw;
    max-height: 17vh;
  }
  
  .icono_redes {
    float: right;
    max-width: 6vw;
    max-height: 6vh;
    padding-left: 0.5vw;
  }
  
  .icono_redes_infe {
    max-width: 6.5vw;
    max-height: 6.5vh;
    padding-left: 0.5vw;
  }
  
  .ite {
    font-size: 2vw;
  }
  
  .infografia {
    margin-bottom: 5%;
    max-width: 80%;
    max-height: 80%;
    box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 20px;
  }
  
  .infografia2 {
    margin-bottom: 10%;
    max-width: 100%;
    max-height: 100%;
    box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 20px;
  }
  
  .shadow {
    margin-right: 1vw;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px;
  }
  
  .puntos {
    border-bottom-style: dotted;
    border-bottom-width: 7px;
    color: #ce788e;
  }
  
  .puntos2 {
    border-bottom-style: dotted;
    border-bottom-width: 7px;
    color: #e7bfc9;
  }
  
  .center {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  
  .acuerdo {
    height: 100%;
    background-color: #c55e78;
  
    border-radius: 15px;
  }
  /* 
  .card-body .acuerdo {
    background-color: #b06b7c;
  } */
  
  .titulo-a {
    /* font-size:100%; */
    font-size: 100%;
    border-radius: 15px;
    background-color: #c13a67;
    color: white;
    text-align: center;
    width: 40%;
    height: 15%;
    position: relative;
    top: 15px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card {
    border-radius: 15px;
    border: none;
  }
  
  .card-juicio {
    height: 50%;
    background-color: #c13a67;
    border-radius: 15px;
    color: white;
  }
  
  .box-cat {
    display: flex;
    flex-direction: row-reverse;
  }
  
  .card-text2 {
    font-size: 100%;
    text-align: center;
    color: white;
    font-weight: lighter;
    margin-bottom: 0;
  }
  
  .linea {
    border-top: 1px solid white;
    height: 2px;
    padding: 0;
    margin: 20px auto 0 auto;
  }
  
  .ali-de-in {
    text-align: right;
    margin-top: 200px;
    color: #808085;
    font-size: 100%;
  }
  
  .cen-red {
    display: flex;
    justify-content: center;
  }
  
  .tamaño {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
  
  .container-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .centrar-div {
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
  }
  
  .flex-container {
    text-align: center;
  }
  
  /* ESTILOS DE MAPA */
  #mapa {
    width: 100%;
    /* height: 100vh; */
  }
  
  .highcharts-tooltip tbody tr:nth-child(odd) {
    background-color: #8a8a8a;
    color: #ffffff;
  }
  
  .highcharts-tooltip tbody tr:nth-child(even) {
    background-color: #ffffff;
  }
  
  .highcharts-tooltip tbody tr td {
    padding: 5px 10px;
  }
  
  .highcharts-tooltip th {
    letter-spacing: 10px;
    word-spacing: 8px;
    border-bottom: 2px solid #5c5c5c;
  }
  
  .lista_municipios {
    margin: 1rem auto;
    width: 100%;
    padding: 0 20px 20px;
    box-sizing: border-box;
    column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
  }
  
  .lista_municipios .card {
    margin: 0 0 -10px 0;
    max-width: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
  }
  
  .lista_municipios .card .card-header {
    font-weight: bolder;
    color: #d06baf;
    letter-spacing: 2px;
    word-spacing: 3px;
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
  }
  
  .lista_municipios .card .card-body {
    color: #000000;
    padding: 0;
  }
  
  .lista_municipios .card .card-body ul {
    margin-top: -10px !important;
  }
  
  .tableHighcharts thead {
    background-color: #000000;
    color: #ffffff;
  }
  
  .tableHighcharts tbody tr:nth-child(odd) {
    background-color: #8a8a8a;
    color: #ffffff;
    padding: 5px 100px;
  }
  
  .tableHighcharts tbody tr:nth-child(even) {
    background-color: #ffffff;
    padding: 5px 100px;
  }
  
  /* FIN DE ESTILOS DE MAPA */
  
  /* BOTON UP */
  .btn-scrolltop {
    position: fixed;
    bottom: 53px;
    right: 15px;
    padding: 10px 15px;
    background: #d06baf;
    color: white;
    border: 1px solid #d06baf;
    border-radius: 100%;
    cursor: pointer;
    transform: translateY(100px);
    transition: 0.3s;
  }
  
  .btn-scrolltop-on {
    transform: translateY(0);
  }
  
  /* FIN BOTON UP */
  
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .lista_municipios {
      column-count: 2;
      -moz-column-gap: 10px;
      -webkit-column-gap: 10px;
      column-gap: 10px;
    }
  
    .botones {
      max-width: 100%;
      background-color: #ce788e;
      text-align: center;
      font-weight: bolder;
      vertical-align: middle;
      color: white !important;
      border-radius: 5px;
      border: 1px solid #d0d0d0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .text-acuerdo {
      font-size: 67%;
      text-align: justify;
      color: white;
      font-weight: lighter;
    }
  
    .anexo {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e8a6b9;
      color: white;
      width: 100%;
      height: 4.5vh;
      /* text-align: center; */
      font-size: 100%;
    }
  
    .card-catalogo {
      /* height: 10vh; */
      /* width: 30vw; */
      background-color: #c13a67;
      border-radius: 15px 15px 15px 15px;
      color: white;
    }
  
    .dialogo {
      position: absolute;
      width: 45%;
      z-index: 1;
    }
  }
  
  @media screen and (max-width: 767px) {
    /* Estilos mapas */
    .lista_municipios {
      column-count: 1;
      -moz-column-gap: 10px;
      -webkit-column-gap: 10px;
      column-gap: 10px;
    }
  
    .labelHighcharts,
    .tableHighcharts thead,
    .tableHighcharts tbody tr:nth-child(odd),
    .tableHighcharts tbody tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0);
      color: rgba(255, 255, 255, 0);
    }
  
    .tooltipHighcharts {
      font-size: 12px;
    }
  
    .highcharts-tooltip tbody tr td {
      padding: 1px 1px;
      font-size: 12px;
    }
  
    .highcharts-tooltip th {
      letter-spacing: 2px;
      word-spacing: 1px;
      font-size: 12px;
    }
  
    /* Fin estilos mapa */
  
    .botones {
      max-width: 100%;
      background-color: #ce788e;
      text-align: center;
      font-weight: bolder;
      vertical-align: middle;
      color: white !important;
      border-radius: 5px;
      border: 1px solid #d0d0d0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .text-acuerdo {
      font-size: 67%;
      text-align: justify;
      color: white;
      font-weight: lighter;
    }
  
    .anexo {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e8a6b9;
      color: white;
      width: 100%;
      height: 4.5vh;
      /* text-align: center; */
      font-size: 100%;
    }
  
    .card-catalogo {
      /* height: 10vh; */
      /* width: 30vw; */
      background-color: #c13a67;
      border-radius: 15px 15px 15px 15px;
      color: white;
    }
  
    .dialogo {
      position: absolute;
      width: 45%;
      z-index: 1;
    }
  }
  
  @media (min-width: 992px) {
    .botones {
      max-width: 100%;
      background-color: #ce788e;
      font-size: 1vw;
      font-weight: bold;
      /* font-size: 15px; */
      text-align: center;
      vertical-align: middle;
      font-weight: bolder;
      color: white !important;
      height: 14vh;
      width: 7.8vw;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .botones2 {
      max-width: 100%;
      background-color: #ce788e;
      font-size: .7vw;
      font-weight: bold;
      /* font-size: 15px; */
      text-align: center;
      vertical-align: middle;
      font-weight: bolder;
      color: white !important;
      height: 8vh;
      width: 7.8vw;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .notop{
     padding-top: 29px;
      width: 60vw;
      height: 57px;
      background-color: #fce9f3;
    }
  
    .text-acuerdo {
      /* font-size: 100%; */
      text-align: justify;
      color: white;
      font-weight: lighter;
      line-height: 1.1vw;
    }
  
    .anexo {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e8a6b9;
      color: white;
      width: 100%;
      height: 4.5vh;
      /* text-align: center; */
      /* font-size: 1.3vw; */
    }
  
    .card-catalogo {
      /* height: 10vh; */
      /* width: 30vw; */
      background-color: #c13a67;
      border-radius: 15px 0px 0px 15px;
      color: white;
    }
  
    .dialogo {
      top: 20px;
      right: 40%;
      position: absolute;
      width: 45%;
      height: 45%;
      z-index: 1;
    }
  
    .v-line {
      border-left: thick solid #b03357;
      height: 94%;
      left: 100%;
      position: absolute;
      z-index: 1;
    }
  }