/*--------------------------------------------------------
    Author: Shawn Ramsey
    Website: bluefaqs.com
    Use wherever you want
----------------------------------------------------------*/

/*--------------------- TOOLTIPS -------------------------*/
.tooltiptext_elpremio {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: 15px;
}

.tooltiptext_elpremio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}


.tooltiptext_pesona {
  width: 120px;
  background-color:black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: 15px;
}

.tooltiptext_pesona::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-right: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}


.tooltiptext_here {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: 15px;
}

.tooltiptext_here::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}


.tooltiptext {
  width: 120px;
  background-color:transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: 15px;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
}


.tooltiptext_zone_a {
  width: 120px;
  background-color:#8338ec;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: large;
}

.tooltiptext_zone_a::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #8338ec transparent transparent transparent;
}


.tooltiptext_zone_b {
  width: 120px;
  background-color:#d90429;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: large;
}

.tooltiptext_zone_b::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #d90429 transparent transparent;
}


.tooltiptext_zone_c {
  width: 120px;
  background-color:#fb8b24;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: large;
}

.tooltiptext_zone_c::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #fb8b24;
}


.tooltiptext_zone_d {
  width: 120px;
  background-color:#0466c8;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: large;
}

.tooltiptext_zone_d::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #0466c8 transparent transparent;
}


.tooltiptext_zone_e {
  width: 120px;
  background-color:#fce809;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  font-size: large;
}

.tooltiptext_zone_e::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fce809 transparent transparent transparent;
}
/*--------------------- TOOLTIPS -------------------------*/




/*Designate how the animation will take place*/
@keyframes pulsate {
    0% {
    transform: scale(0.1);
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
    100% {
    transform: scale(1.2);
    opacity: 0;
    }
}

.map-bg {
    position: fixed;
    top: -10%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Alter the top and left positions to sit on top of your map location */
.marker {
    width: 100px;
    height: 50px;
    position: absolute;
    display: block;
}

.pin {
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: 38px;
    left: 38px;
    border-radius: 50%;
    z-index: 1000;
    text-align: center;
    padding-top:1px;
    padding-right: 1px;
}

.pin-effect {
    width: 120px;
    height: 120px;
    position: absolute;
    top: -10px;
    left: -10px;
    display: block;
    background: rgba(5, 124, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2000ms ease-out infinite;

}

/* Adjusts the background image and marker for smaller screens */
@media only screen and (max-width: 414px) {
    .map-bg {
        background-position: -100px 0px;
    }

    .marker {
        left: 100px;
    }
}