.container {
  min-width: 80%;
}
.icono{
    cursor: pointer;
    fill:steelblue
}
.icono:hover{
  fill: azure;
}
.crad{
  width:100%;
  height: 100px; background-color: #12a544ff; color: white; border-radius:
  100px 0 0 0; align-items: center; display: flex; justify-content:
  center;
} 
.crad2{
  height: 100px; background-color: #ed711cff; color: white;
  border-radius:0 0 0 100px; align-items: center; display: flex;
  justify-content: center;
}
.conten {
   width:70px;
}
.contm{
} 
.contm img {
  height:100%;
  width:100%;
}
.a1{
  border-radius:0 100px 0 0;
  height: 95px;
  background-color: red;
  padding: 0 10px 0 10px;
  width:50%;
}
.a2{
  border-radius:0 0 100px 0;
  height: 95px;
  background-color: green;
  padding: 0 10px 0 10px;
  width:50%;
}
.bo{
   background-color:#12a544ff;
   position:relative;
}
.star{
  position: relative;
  width: 50%;
  height: 85%;
  bottom: 109px;
}

.rutas img{
width:100%;
padding:0 10px 10px 0;
}
.rutasc{

}
.header-rutas{
  display: flex;
  margin: 0 auto;
  justify-content: center;
}
.mapa{
  width:100%;
}
  .zoom {
    position: relative;
    /*width: 254px;*/
    /*height: 278px;*/
    overflow: hidden;
    display: grid;
    place-items: center;
    padding:7px;
  }

  .zoom-nav {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 10;
  }

  .zoom-nav > button {
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border: 2px solid rgba(0, 0, 0, 0.8);
    margin: 0.5rem 0;
    cursor: pointer;
    user-select: none;
  }

  .zoom-map {
    fill: rgba(0, 0, 0, 0.8);
  }
  .zoom-in:hover{
    /*transform: scale(1.2);
    animation: 3s infinite alternate slide-in;*/
  }
  .zoom-out:hover{
    /*transform: scale(1.2);
    animation: 3s infinite alternate slide-in;*/
  }
  .expand:hover{
    /*transform: scale(1.1);
    animation: 3s infinite alternate slide-in;*/
  }
  .active {
    cursor: move;
  }
  #location-white-s-path1 {
    fill: #312449;
  }
  #g1 path:hover {
    /*fill: #424525 !important;*/
  }

  #location:hover {
    stroke: #ff0000 !important;
  }
  /* The animation code */
  @keyframes example {
    50% {
      opacity: 0;
    }
  }

  /* The element to apply the animation to */
  .pm {
    background-color: red;
    fill: red !important;
    animation: example 2s infinite;
  }
  .pcc {
    background-color: red;
    fill: red !important;
    animation: example 2s infinite;
  }
  .pi {
    background-color: red;
    fill: red !important;
    animation: example 2s infinite;
  }
  .pccr {
    background-color: red;
    fill: red !important;
    animation: example 2s infinite;
  }
  .pcp {
    background-color: red;
    fill: red;
    animation: example 2s infinite;
  }
  .ppa {
    background-color: red;
    fill: red !important;
    animation: example 2s infinite;
  }
  #texto1 {
    font-style: italic;
    justify-content: center;
    display: grid;
  }
  #texto2{
    display: flex;
    text-align:justify;
  }
  #texto3{
    text-align:justify;
  }
  #nombre {
    display: flex;
    justify-content: left;
  }
  #g1 path {
    fill: #d8d0c8 !important;
  }

  .aparece {
    display:inline;
    animation: fadeIn .6s;
    animation-fill-mode: forwards;
  }
  .fade-in-image { animation: fadeIn 5s; }

  @keyframes fadeIn {
    0% { opacity: 0; }
    50% {opacity:.5}
    100% { opacity: 1; }
  }
  .fadeOut {
      animation: out .6s;
      animation-fill-mode: forwards;
      display:inline;
  }
  @keyframes out {
      from { opacity: 1; }
      to { opacity: 0; }
  }

  .coles {
    flex: .5 0 0%;
  /* padding: .5vw .2vh .5vh .2vh !important;*/
  }
  .thumbs-zonas{
  background:#f4f0f0;
  }
  .message{
    background: rgb(255, 67, 67);
    /*top: -16px;
    right: 12px;*/
    border-radius: 0.22rem;
    font-size: 1.2rem;
    /*position: relative;*/
    z-index: 11;
    padding:2px;
    position: absolute;
    opacity:.08;
  }

  .formulario {
    opacity:0.8;
    padding: 10px;
    position: fixed;
    top:10vh;
    right: 43vw;
    width: 230px;
    background-color: bisque;
    margin:0px;
    z-index:3;
    display:none;
  }
.bg-c1 {
  --bg-opacity: 1;
  background-color: #12a544ff !important;
}
.bg-c2 {
  --bg-opacity: 1;
  background-color:#dc0256ff !important;
}
.bg-c3 {
  --bg-opacity: 1;
  background-color:#ed711cff !important;
}
.bg-c4 {
  --bg-opacity: 1;
  background-color:#3081c3ff !important;
}
.bg-c5 {
  --bg-opacity: 1;
  background-color:#f8b76fff !important;
}