/*estilos generales para la páginas de destinos*/
body{
    font-family: Montserrat, sans-serif !important;
}
.site-navbar{
    background-color: #97C5DF;
}

html{
    background-color: #97C5DF;
}

.map-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 65%; /* Esto establece la relación de aspecto (50% en este caso) */
    background-image: url('../media/destinos/mapa.png');
    background-size: cover;
    background-color: #97C5DF;
}

.marker {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #B49252;
    border: #ECCF97 5px solid;
    border-radius: 50%;
}

.marker:hover{

    background-color: #dc6a1d;
    border: #c3870d 5px solid;
    border-radius: 50%;
    cursor:default ;
}

.text-marker {
    margin-top: -14px;
    margin-left: 22px;
    font-size: 15px;
    line-height: 17px;
    font-weight: 700;
    color: #464336;
}

.title-destinos{
    margin-top: 20vh;
    color: white;
    font-size: 48px;
}

.sub-title{
    font-size: 30px;
}

.img-container {
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
}

.img-container img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center center; 
}

.element-tooltip {
    cursor: pointer;
  }
  
.tooltip {
    position: relative;
    visibility: hidden;
    width: 300px;
    background-color: white;
    color: #dc6a1d;
    text-align: left;
    border-radius: 10px;
    z-index: 1;
    left: -15px;
    opacity: 0;
    transition: opacity 0.3s;
}
  
  .element-tooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
.img-title{
    width: 200px;
    margin: 10px 0;
}

.description{
    font-size: 15px;
    font-weight: 500;
    color: #78829D;
}

.more-information{
    padding: 10px 0px;
}


  /*hardcoding*/
.Holbox{
    left: 65%;
    top: 5%;
}

.Costa{
    left: 70%;
    top: 8%;
}
.Isla{
    left: 74%;
    top: 12%;
}
.Cancún{
    left: 71.5%;
    top: 16%;
}

.Morelos{
    left: 69.5%;
    top: 22.5%;
}

.Carmen{
    left: 65.5%;
    top: 29%;
}

.Cozumel{
    left: 69.5%;
    top: 34%;
}

.Tulum{
    left: 62%;
    top: 38%;
}

.Maya{
    left: 50%;
    top: 50%;
}

.Mahahual{
    left: 59%;
    top: 72%;
}

.Bacalar{
    left: 50%;
    top: 74%;
}

.Chetumal{
    left: 46%;
    top: 84%;
}

.Chetumal .tooltip{
    margin-top: -300px;
}

/*end /*hardcoding*/

.map-container{
    display: block;        
}

.map-container-mobile{
    display: none;        
}
/*telefonos*/
@media only screen and (max-width: 600px) {
    .map-container-mobile{
        display: block;      
    }
    .map-container{
        display: none;        
    }

    html{
        background-color: #f4f4f4;
    }

    .title{
        margin-top: 20px;
        font-size: 50px;
	    color: #A90C3C;
        font-weight: 700;
        text-align: center;
    }

    .description{
        text-align: justify;
    }
    
    .card {
        height: 100%;
        margin: 10px; 
    }

    .col-md-4{
        margin-bottom: 25px;
    }
}

/*table*/
@media only screen and (min-width:600px) and (max-width: 999px){
    .col-md-4{
        margin-bottom: 20px;
    }
    .map-container-mobile{
        display: block;    
    }
    .map-container{
        display: none;        
    }

    html{
        background-color: #f4f4f4;
    }

    .title{
        margin-top: 20px;
        font-size: 50px;
	    color: #A90C3C;
        font-weight: 700;
        text-align: center;
    }

    .description{
        text-align: justify;
    }

    .card {
        height: 100%;
        margin: 10px; 
    }

    .img-container img {
        height: 100%;
        object-fit: cover;
    }

}