.map {
  position: relative;
  background-image: url(../images/mapa_pt.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
  max-width: 700px; }

.data {
  position: absolute;
  top: 0;
  z-index: 99; }

.item {
  letter-spacing: -0.04em;
  text-align: left;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  max-width: 200px; }
  .item:hover {
    -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.06);
            box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.06);
    background-color: #fff; }
    .item:hover .title {
      color: #57a0d7;
      font-weight: 500; }
    .item:hover #show {
      display: block; }
      @media only screen and (max-width: 690px) {
        .item:hover #show {
          display: none !important; } }
    .item:hover .details {
      display: block; }

.title {
  color: #828282;
  font-size: 16px;
  line-height: 16px; }

.value {
  color: #000;
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  margin-right: 1rem; }

.marker {
  background-image: url(../images/location.svg);
  position: absolute;
  display: none;
  width: 20px;
  height: 24px; }
  .marker-1 {
    top: 16%;
    left: 180%; }
  .marker-2 {
    top: 16%;
    left: 229%; }
  .marker-3 {
    top: 36%;
    left: 200%; }
  .marker-4 {
    top: 64%;
    left: 150%; }
  .marker-5 {
    top: 75%;
    left: 143%; }
  .marker-6 {
    top: 65%;
    left: 167%; }
  .marker-7 {
    top: 78%;
    left: 193%; }
  .marker-8 {
    top: 126%;
    left: 179%; }
  .marker-9 {
    top: 126%;
    left: 96%; }

.details {
  position: relative;
  margin-top: 1rem;
  display: none;
  min-width: 200px;
  font-size: 15px;
  opacity: 0;
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transform-origin: top;
          transform-origin: top; }
  .details td {
    padding: .25rem; }
    .details td:first-child {
      text-align: right;
      color: #000;
      font-weight: 500; }

.animate {
  -webkit-animation: anim .5s forwards;
          animation: anim .5s forwards; }

@-webkit-keyframes anim {
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8; } }

@keyframes anim {
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8; } }