section {
  &.header {
    .carousel-maps {
      height: 31rem;
      background-image: url("../img/bg/bg-maps.jpg");
      background-repeat: no-repeat;
      background-position: left center;
      background-size: cover;
      @media (max-width: 768px) {
        height: 38rem;
      }
      @media (max-width: 599px) {
        display: none;
      }
      .carousel-caption {
        max-width: 500px;
        @media (max-width: 1199px) {
          max-width: 400px;
          top: calc(50% - 70px);
          right: 2%;
        }
        @media (max-width: 1024px) {
          max-width: 300px;
          top: calc(50% - 70px);
          right: 2%;
        }
        @media (max-width: 768px) {
          max-width: 100%;
          left: 10px;
          bottom: 0;
          top: auto;
        }
      }
      .card-popup {
        @media (max-width: 1024px) {
          left: auto;
          right: 5%;
        }
      }
    }
  }
}


.bg {
	width: 100%;
	height: 100%;
	/* background-image: url(../img/map.svg); */
    background-repeat: no-repeat;
	margin: 2rem;
	position: relative;
	/* box-shadow: 0 1rem 3rem -.4rem rgba(88,67,128,0.6); */
	border-radius: 1rem;
	margin-bottom: 5rem;
    max-width:558px;
    max-height: 446px;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.point {
	/* position: absolute; */
/* 	width: 1.3rem;
	height: 1.3rem; */
	/* background-color: #9976dd; */
	border-radius: 50%;
	cursor: pointer;
	background-image: url(../img/cross.svg);
	transition: .5s ease-in-out;
    display: none;
}
.point.show {
    display: block;
}

/* @keyframes waves {
  from {
    r: 1%;

  }
  to {
    r: 2%;
    opacity: 0;
  }
} */
.info {
	width: 25rem;
	height: 20rem;
}

.content_container {
	background-color: #dfdce3;
	box-shadow: 0 1rem 3.1rem -.4rem rgba(88,67,128,0.6);
	border-radius: .7rem;
	position: absolute;
	animation: appear 1s;
	transition: 1s;
}

.st1{
    fill: #bdccd4;
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
    transition: 1s ease-in-out;
    cursor: pointer;
}
.st1 path {
    fill: #bdccd4;
    stroke: #FFFFFF;
    transition: .1s ease-in-out;
}
.st1:hover,
.st1:hover path,
.st1.click,
.st1.click path {
    fill: #f29006;
}
.st2{
    fill: #D2C7E2;
    stroke: #DBD7E0;
    stroke-miterlimit: 10;
}


.maps {
  .circle-maps {
    fill: #f29006;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: waves;
    transform-origin: center center;
    animation-fill-mode: forwards;
    r: 0%;
    opacity: 1;
    transition: 2s ease-in-out !important;
  }
  .circle-maps:nth-of-type(2n) {
    animation-delay: 1s;
    /* fill: #a58fdb; */
  }
  .circle-maps:nth-of-type(3n - 1) {
    animation-delay: 1.5s;
    /* fill: darkred; */
  }
  &:hover {
    .circle-maps {
      /* opacity: 0; */
      /* animation-iteration-count: initial; */
      animation-name: none;
      opacity: 0;


    }
  }
}


@keyframes waves {
  0% {
    r: 0%;
    opacity: 0;
  }
  50% {
    opacity: .7;
  }
  99% {
    opacity: 0;
    r: 5%;
  }
  100% {
    opacity: 0;
    r: 0;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
	opacity: 0;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.card-popup {
  position: absolute;
  top: 15%;
  left: 55%;
  .title {
    width: 25rem;
    height: 4rem;
    background-color: #f29006;
    border-radius: .7rem .7rem 0 0;
    font-weight: 700;
    font-size: 1.5rem;
      padding: 1rem 3rem 1rem 1rem;
    text-align: center;
  }
  .title .close {
      width: 42px;
      transform: rotate(45deg);
      position: absolute;
      right: 12px;
      top: 10px;
  }
  .text {
    padding: 2rem;
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #777;
  }

}