/* MAPA */

@keyframes anim-pin{
    from{
        transform: translateY(5%);
    } 
    to{
        transform: translateY(0%);
    }
}
.item-menu-mapa{
    width: fit-content;
}
.pin{
    width:8%;
   height:8%;
   position: absolute;
   cursor: pointer;
   z-index: 30;
}
.trajetos{
    position: absolute;
    display: block;
    width: 0;
    left: 0px;
    top: 0px;
    height: 100%;
    transition: 0.6s ease-out;
    background: transparent;
    overflow: hidden;
}
.img-trajeto{
    max-width: none !important;
}
.pin:hover{
    animation: anim-pin 1s infinite alternate;
}
.pin-01{
    bottom:25%;
    left:1.2%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-dark.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* .pin:hover > .pin-text {
    display: block;
} */

.pin-01 .pin-text, .pin-02 .pin-text, .pin-03 .pin-text, .pin-04 .pin-text{
    position: absolute;
    top:-70%;
    left:50%;
    transform:translatex(-50%);
    white-space:nowrap;
    display: block;
    padding: 2% 6%;
    background-color: rgba(255, 255, 255, 0.8);
}

.pin-text{
    position: absolute;
    top:-70%;
    left:50%;
    transform:translatex(-50%);
    white-space:nowrap;
    display: block;
    padding: 2% 6%;
    font-weight: bold;
}
.pin-01 .pin-text h3, .pin-02 .pin-text h3, .pin-03 .pin-text h3, .pin-04 .pin-text h3{
    color:#3D424F;
    font-size: 1vw;
    /* text-shadow: 1px 1px 1px #000; */
    text-shadow: none !important;
}
.pin-text h3{
    color:#ffffff;
    font-size: 1vw;
    text-shadow: 1px 1px 1px #000;
}

.pin-02{
    bottom:32.8%;
    left:26.8%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-02 .pin-text{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left:-40%;
    white-space:nowrap;
    display: block;
    padding: 2% 6%;
}
.pin-03{
    bottom:27.5%;
    left:40.3%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-03 .pin-text{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left:73%;
    white-space:nowrap;
    display: block;
    padding: 2% 6%;
}
.pin-04{
    bottom:18.5%;
    left:79.3%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-04 .pin-text img{
    padding: 2% 2%;
    max-width: 10vw;
    height: auto;
}
.pin-04 .pin-text {
    top:-90%;
}
.map-localization{
    transform-origin: 0% 0%;
}
.pin-05{
    top:47%;
    left:29.5%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-06{
    top:40%;
    left:34.9%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-07{
    top:44%;
    left:38%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-08{
    top:41%;
    left:42.5%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-09{
    top:52.4%;
    left:52.8%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-10{
    top:34%;
    left:64.4%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-11{
    top:26%;
    left:76.3%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-12{
    top:26%;
    left:83.5%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pin-13{
    top:1%;
    right:1%;
}
.pin-13 .pin-text {
    top:0%;
}
.pin-14{
    top:53%;
    left:-0.7%;
    background-image:   url(../img/ribeira-d-ilhas-villas/map/pin-white.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.pin-14 .pin-text {
    top:-90%;
}
.pin-14 .pin-text h3{
    line-height: 90%;
}