/* START HP MAP */
#inner-page-wrapper{
    margin-bottom: 0;
}
#inner-page-wrapper > .container{
    width: 100%;
    padding: 0;
}
.ip-breadcrumbs-container{
    padding: 15px;
}
.map-wrap{
    position: relative;
    max-width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
}
.map-wrap-inner {
    display: flex;
    flex-wrap: wrap;
}
.map_left_wrap {
    width: 25.53%;
    /* max-width: fit-content; */
    /* position: absolute; */
    z-index: 2;
    padding-top: 9.15%;
    pointer-events: none !important;
}
.ip-map-title h2{

}
.ip-map-title h2 span{
    color: var(--accent-color);
}
.map_left_txt {
  margin-top: 25px;
}
.map_left_txt ul {
  width: 100%;
    display: none;
}
.map_left_txt li {
  width: 100%;
  margin-bottom: 10px;
}
.map_left_txt li a {
  display: flex;
  align-items: center;
  padding: 0px 0;
  color: var(--font-color-default);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-family-default);
  position: relative;
  pointer-events: auto;
  width: max-content;
  padding-right: 27px;
  padding-left: 10px;
}
.map_left_txt li a span{
    position: relative;
}
.map_left_txt li a span::before{
    position: relative;
    width: 14px;
    height: 19px;
    display: inline-block;
    top: 3px;
    margin-right: 10px;
    content: '';
    background-image: url(https://cdn.agentimagehosting.com/Pd86WPaBce9taRyp0sBNT/2024/01/icon-pin.png);
    background-size: contain;
    background-position: center;
    pointer-events: none;
    transition: var(--default-transition);
}
.map_left_txt li a:hover span::before{
    background-image: url(https://cdn.agentimagehosting.com/Pd86WPaBce9taRyp0sBNT/2024/01/icon-pin-hover.png);
}

.map_right_wrap {
    width: 74.47%;
    padding: 155px 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
}
#map_wrap {
    position: relative;
    width: 477px;
    line-height: 0;
}
#map_wrap::before {
    content: '';
    display: block;
    position: absolute;
    aspect-ratio: 1100/850;
    width: 230.60%;
    height: auto;
    top: -20%;
    left: -90%;
    background-image: url(../../images/ip-map/map-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
#map_wrap #map {
  width: 100%;
  position: relative;
}
#map_wrap img {
  width: auto;
  max-width: 100%;
}
#transparent {
  width: 100% !important;
  aspect-ratio: 477/612;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  opacity: 0;
}
#map_wrap img.map-img{
    position: absolute; 
    left: 0;
    top: 0;
    width: 477px;
    height: 612px;
}
#map .map_hovers {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
/*  z-index: 2;*/
}
#map .map_hovers div {
  position: absolute;
/*    z-index: 1;*/
  
}
#map .map_hovers .maphover{
  width: 100%;
  height: 100%;
}
#map .map_hovers .maphover.hovered{
/*  z-index: 4;*/
}
#map .map_hovers div .map-hover {
  opacity: 0;
/*    opacity: 1;*/
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
pointer-events: none;
}
#map .map_hovers div .map-icon{
  position: absolute;
}
.map_txt {
  position: absolute;
  width: auto;
/*  z-index: 3;*/
    height: 100%;
    width: 100%;
    pointer-events: none;
}
.map_txt a{
    color: #0d556b;
    text-transform: uppercase;
    transition: var(--default-transition);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    pointer-events: all;
    position: absolute;
    letter-spacing: 0.02em;
    z-index: 5;
}

.map_txt span {

}
.map_txt span::before {

}

/* MAP HOVER STATE */
/*
.map_left_txt li a:hover,
.map_left_txt li.active a{
    color: #ffffff;
    background: var(--hover-color);
}
*/
.map_left_txt li a:hover{
    color: var(--accent-color);
}

.map_left_txt li a:hover i,
.map_left_txt li.active a i{
    opacity: 1;
}

.maphover.hovered .map-hover{
    opacity: 1 !important;
    z-index: 6;
}
.maphover.active .map-hover{
    opacity: 1 !important;
    z-index: 6;
}



area.hovered .map_txt a{
    color: var(--accent-color);
    z-index: 6;
}
.maphover.hovered .map_txt a{
    color: var(--accent-color);
    z-index: 6;
}

.map_txt a:hover{
    color: var(--accent-color);
    z-index: 6;
}


/*MAP BG*/
.bg-map::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 38%,rgba(255,255,255,0) 100%);
    opacity: 1;
}
.bg-map canvas{
    filter: grayscale(1);
    opacity: 17%;
}


/*MAP HOVERS POSITION*/
#map_holbox .map-hover{
    top: 1px;
    left: 339px;
}
#map_isla_mujeres .map-hover{
    top: -4px;
    left: 376px;
}
#map_cancun .map-hover{
    top: 55px;
    left: 388px;
}
#map_puerto .map-hover{
    top: 69px;
    left: 360px;
}
#map_playa .map-hover{
    top: 111px;
    left: 251px;
}
#map_cozumel .map-hover{
    top: 156px;
    left: 412px;
}
#map_tulum .map-hover{
    top: 164px;
    left: 232px;
}
#map_bacalar_chetumal .map-hover{
    top: 377px;
    left: -10px;
}
#map_mahahual .map-hover{
    top: 421px;
    left: -9px;
}

#map_nolabel .map-hover{
    left: 663px;
    top: 344px;
}
#map_siankaan .map-hover{
  left: 784px;
  top: 293px;
}
#map_isla_costa .map-hover{
  left: 1011px;
  top: 112px;
}

/*MAP LABEL POSITION*/
.map_txt_isla_blanca > a{
    left: 1218px;
    top: 112px;
}
.map_txt_holbox > a{
  left: 1218px;
  top: 133px;
}
.map_txt_costa_mujeres > a{
  left: 1218px;
  top: 154px;
}
.map_txt_isla_mujeres > a{
  left: 1218px;
  top: 185px;
}
.map_txt_cancun > a{
  left: 1218px;
  top: 214px;
}
.map_txt_puerto > a{
  left: 1218px;
  top: 244px;
}
.map_txt_playa > a{
  left: 1218px;
  top: 280px;
}
.map_txt_cozumel > a{
  left: 1218px;
  top: 304px;
}
.map_txt_tulum > a{
  left: 1218px;
  top: 340px;
}
.map_txt_siankaan > a{
  left: 1218px;
  top: 447.5px;
}
.map_txt_mahahual > a{
  left: 1218px;
  top: 530px;
}
.map_txt_bacalar > a{
  left: 1218px;
  top: 569px;
}
.map_txt_chetumal > a{
  left: 1218px;
  top: 591px;
}

/*MAP PIN POSITION*/
.map_txt a span{
    position: relative;
}
.map_txt a span::before{
    position: absolute;
    width: 14px;
    height: 19px;
    display: block;
    content: '';
    background-image: url(https://cdn.agentimagehosting.com/Pd86WPaBce9taRyp0sBNT/2024/01/icon-pin.png);
    background-size: contain;
    background-position: center;
    pointer-events: none;
    transition: var(--default-transition);
}
.map_txt_isla_blanca a span::before{
    left: -151px;
    top: -7px;
}
.map_txt_holbox a span::before{
    left: -158px;
    top: -5px;
}
.map_txt_costa_mujeres a span::before{
    left: -97px;
    top: -5px;
}
.map_txt_isla_mujeres a span::before{
    left: -85px;
    top: -5px;
}
.map_txt_cancun a span::before{
    left: -108px;
    top: -6px;
}
.map_txt_puerto a span::before{
    left: -123px;
    top: -7px;
}
.map_txt_playa a span::before{
    left: -159px;
    top: -6px;
}
.map_txt_cozumel a span::before{
    left: -107px;
    top: -4px;
}
.map_txt_tulum a span::before{
    left: -206px;
    top: -6px;
}
.map_txt_siankaan a span::before{
    left: -215px;
    top: -4px;
}
.map_txt_mahahual a span::before{
    left: -235px;
    top: -5px;
}
.map_txt_bacalar a span::before{
    left: -345px;
    top: -9px;
}
.map_txt_chetumal a span::before{
    left: -345px;
    top: -8px;
}

.map_txt a:hover span::before{
    background-image: url(https://cdn.agentimagehosting.com/Pd86WPaBce9taRyp0sBNT/2024/01/icon-pin-hover.png);
}
.hovered .map_txt a span::before{
    background-image: url(https://cdn.agentimagehosting.com/Pd86WPaBce9taRyp0sBNT/2024/01/icon-pin-hover.png);
}

/*MAP PIN POSITION*/
.map_txt a span::after{
    position: absolute;
    width: 300px;
    height: 1px;
    display: block;
    top: 58%;
    right: calc(100% + 3px);
    transform: translateY(-50%);
    content: '';
    background: #0d556b;
    pointer-events: none;
    transition: var(--default-transition);
}
.map_txt_isla_blanca a span::after{
    width: 139px;
/*
    left: ;
    top: ;
*/
}
.map_txt_holbox a span::after{
    width: 149px;
/*
    left: ;
    top: ;
*/
}
.map_txt_costa_mujeres a span::after{
    width: 88px;
/*
    left: ;
    top: ;
*/
}
.map_txt_isla_mujeres a span::after{
    width: 76px;
/*
    left: ;
    top: ;
*/
}
.map_txt_cancun a span::after{
    width: 99px;
/*
    left: ;
    top: ;
*/
}
.map_txt_puerto a span::after{
    width: 114px;
/*
    left: ;
    top: ;
*/
}
.map_txt_playa a span::after{
    width: 151px;
/*
    left: ;
    top: ;
*/
}
.map_txt_cozumel a span::after{
    width: 98px;
/*
    left: ;
    top: ;
*/
}
.map_txt_tulum a span::after{
    width: 197px;
/*
    left: ;
    top: ;
*/
}
.map_txt_siankaan a span::after{
    width: 197px;
/*
    left: ;
    top: ;
*/
}
.map_txt_mahahual a span::after{
    width: 197px;
/*
    left: ;
    top: ;
*/
}
.map_txt_bacalar a span::after{
    width: 336px;
/*
    left: ;
    top: ;
*/
}
.map_txt_chetumal a span::after{
    width: 336px;
/*
    left: ;
    top: ;
*/
}

.map-logo{
    /* position: absolute; */
    width: 100%;
    max-width: 278px;
    height: auto;
    left: 230px;
    top: 280px;
    top: 35%;
    left: 14.5%;
}

.map-logo-mobile{
    display: none;
}

.text-under-logo {
    font-weight: 500;
    margin: 25px 0 30px;
}

.map_list {
    position: absolute;
    width: 500px;
    top: -55px;
    left: calc(100% + 70px);
    font-family: 'Carlito', sans-serif;
}

.map_list > ul {
    column-count: 2;
}

.map_list > ul > li {
    display: block;
    position: relative;
    margin-bottom: 35px;
}

.map_list > ul > li:last-child {
    margin-bottom: 100px;
}

.map_list > ul > li > a {
    display: block;
    position: relative;
    font-size: 18px;
    color: #0d556b;
    line-height: 1;
    text-transform: uppercase;
    outline: none !important;
    transition: var(--default-transition);
}

.map_list > ul > li:hover > a {
    color: var(--accent-color);
}

.map_list_sub {
    display: none;
    margin-left: 12px;
    margin-top: 10px;
}

.map_list_sub ul {
    margin-left: 24px;
    margin-top: 10px;
}

.map_list_sub li {
    display: block;
    position: relative;
}

.map_list_sub li:not(:last-child) {
    margin-bottom: 10px;
}

.map_list_sub li a {
    display: block;
    position: relative;
    font-size: 16px;
    color: #474747;
    line-height: 1;
    padding-left: 14px;
    outline: none !important;
}
.map_list_sub li:hover > a {
    color: var(--accent-color);
}
.map_list_sub li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #474747;
}
.map_list_sub ul a::before {
    border-radius: 0;
}

/**************************************************/
/*         MEDIA AND OTHER MOBILE STYLES          */
/**************************************************/
@media only screen and (min-width: 1700px){
    
}
@media only screen and (max-width: 1480px){
    
}
@media only screen and (max-width: 1366px){
    
}
@media only screen and (max-width: 1199px){
    .map-logo{
        left: 9%;
        max-width: 200px
    }
}
@media only screen and (max-width: 991px){	
    .ip-map-title h1.entry-title {
        text-align: center;
        font-size: 12vw;
    }
    .map_left_wrap {
        width: 100%;
        padding: 50px 15px;
        position: relative;
        left: 0;
        margin: auto;
    }
    .map_left_txt ul{
        display: block;
    }
    .map-logo{
        display: none;
    }
    .map-logo-mobile{
        display: block;
        width: 100%;
        max-width: 278px;
        margin: auto;
        margin-top: 20px;
    }
    .map_left_txt li a{
        width: 100%;
        padding: 0;
        justify-content: center;
    }
	.text-under-logo {
		display: none;
	}
    .map_right_wrap {
        width: 100%;
        padding: 0;
    }

    #map_wrap {
        width: 100%;
        height: auto !important;
    }
    #map_wrap::before {
        display: none;
    }
    #map_wrap #map {
        transform: none !important;
    }
    #myMap,
    #transparent,
    #truemap,
    .map_hovers {
        display: none;
    }
    .map_list {
        position: relative;
        width: 100%;
        top: inherit;
        left: inherit;
    }
    .map_list > ul {
        column-count: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .map_list_sub {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: left;
        margin-left: 0;
    }
    .map_list_sub ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        margin-left: 0;
    }
    .map_list_sub li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 767px){
    
}
@media only screen and (max-width: 480px){
    .ip-map-title h2 {
        font-size: 40px;
    }
    .map_left_txt li a{
        font-size: 16px;
    }
    
}