body {
  background-color: rgba(81, 190, 158, 0.692);
}
.container {
  padding-top: 20px;
}

svg {
  background-color: transparent;
  border: transparent;
  border-radius: 30px;
}
path {
  fill: rgba(172, 218, 214, 0.5);
}
text {
  font-size: 12px;
  font-family: monospace;
}

.caja {
  width: 840px;
  height: 200px;
  position: absolute;
  z-index: -1;
}

#tribu {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: transparent;
  position: relative;
  left: 930px;
}
#logo {
  position: relative;
  left: 10px;
  width: 80px;
  height: 120px;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/*#letra {
  position: absolute;
  left: 310px;
  top: 50px;
  font-size: 15px;
  color: brown;
  
}
*/
span {
  font-size: 23px;
  position: absolute;
  left: 20px;
  color: black;
  letter-spacing: 3px;
  font-weight: 800;
}

#fecha {
  font-size: 15px;
  position: absolute;
  left: 48px;
  color: white;
  margin-top: 10px;
}

.card-header {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

path {
  stroke: black;
  stroke-width: 2px;
}
#info {
  position: absolute;
  top: 400px;
  left: 205px;
}
li {
  font-size: 10px;
}
.acapulco,
.chilpo,
.ome,
.zihua,
.iguala,
.tlapa,
.alta {
  cursor: pointer;
}

.cajas {
  width: 25px;
  height: 10px;
  margin-right: 10px;
}

.modal-title {
  color: white;
  letter-spacing: 3px;
}
.modal-header {
  background-color: black;
}
.modal-body {
  background-color: rgba(77, 199, 236, 0.815);
}

.popover-header {
  font-size: 12px;
  color: brown;
}
.fa-times-circle {
  color: whitesmoke;
  cursor: pointer;
}
iframe {
  border-radius: 20px;
}

/*animaciones*/
@keyframes rotate360 {
  to {
    transform: rotateY(360deg);
  }
}
#tribu {
  animation: 5s rotate360 infinite linear;
}
@keyframes rotate360 {
  to {
    transform: rotateY(360deg);
  }
}
img {
  animation: 5s rotate360 infinite linear;
}

@media only screen and (max-width:500px){
    iframe{
        width:250px;
    }
}

@media only screen and (min-width:500px){
    iframe{
        width:400px;
    }
}
@media only screen and (min-width:1000px){
    iframe{
        width:600px;
    }
}