/* @group Example
------------------------------------ */
.overview-map {
    position: relative;
    overflow: hidden;
    --gap-between-elements: 1.2rem;
}
.overview-map .row {
    max-width: 144rem;
}
.overview-map .col-map,
.overview-map .col-info {
    margin: 0;
    padding: 0 2rem;
    flex: none;
    width: 100%;
}
.overview-map .col-map .img-box {
    margin: 0;
    z-index: var(--z-index-lowest);
    transition: opacity .7s;
    opacity: 1;
}
.overview-map .col-map.show .img-box {
    opacity: 0;
}
.overview-map .col-map .img-box img {
    object-fit: contain !important;
    object-position: center top !important;
}
.overview-map .col-map .outer-routes {
    opacity: 0;
    transition: opacity .7s;
    transition-delay: .3s;
}
.overview-map .col-map.show .outer-routes {
    opacity: 1;
}
.overview-map .col-map .outer-routes circle {
    transition: all .7s;
}
.overview-map .col-map .outer-routes svg {
    width: 100%;
    height: auto;
}
.overview-map header {
    margin: 0 0 2.8rem;
}
.overview-map .items-container {
    padding-bottom: 2rem;
}
.overview-map h2 {
    font-family: var(--font-pragmatica);
    font-weight: var(--font-pragmatica-weight-book);
    font-size: 2.8rem;
    line-height: 128.571%;
    color: var(--marron, #54514A);
    font-style: normal;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.overview-map h3 {
    font-family: var(--font-pragmatica-cond);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: var(--font-pragmatica-cond-weight-book);
    line-height: normal;
    text-transform: uppercase;
    color: var(--marron, #54514A);
    margin: 0 0 var(--gap-between-elements);
}
.overview-map .buttons {
    margin: 0 0 var(--gap-between-elements);
}
.overview-map .col-info .item:last-child .buttons {
    margin: 0;
}
.overview-map .bttn--map {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    border-radius: 5px;
    border: 0.5px solid var(--dorado, #B38B67);
    opacity: 0.8;
    background: var(--marron, #54514A);
    box-shadow: 0px 12px 16px -4px rgba(65, 75, 90, 0.15), 0px 4px 6px -2px rgba(65, 75, 90, 0.10);
    font-family: var(--font-pragmatica);
    font-weight: var(--font-pragmatica-weight-book);
    font-size: 1.4rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--crema-claro, #FCFBF8);
}
.overview-map button:not(:last-child) {
    margin: 0 0 var(--gap-between-elements);
}
/* // POPOVER */
.overview-map .popover {
    width: 100%;
    height: 100%;
    translate: 5rem 0;
    padding: 0 2rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--z-index-medium);
}
.overview-map .popover header {
    margin: 0 0 2.2rem;
}
.overview-map .popover .go-back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 2.6rem;
}
.overview-map .popover .go-back svg {
    width: 1.2rem;
    height: 1.8rem;
    pointer-events: none;
}
.overview-map .popover .go-back span {
    pointer-events: none;
    font-family: var(--font-pragmatica-cond);
    font-size: 1.8rem;
    line-height: normal;
    font-style: normal;
    font-weight: var(--font-pragmatica-cond-weight-book);
    color: var(--marron, #54514A);
    text-transform: uppercase;
    margin-left: 2.6rem;
}
.overview-map .popover h3 {
    font-size: 2.8rem;
    line-height: 128.571%;
    letter-spacing: .05em;
    margin: 0 0 1.7rem;
}
.overview-map .popover .download-bttn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}
.overview-map .popover .download-bttn span {
    color: var(--dorado---GG, #B38B67);
    font-family: var(--font-pragmatica);
    font-weight: var(--font-pragmatica-weight-book);
    font-size: 1.6rem;
    font-style: normal;
    line-height: 150%;
    text-transform: uppercase;
}
.overview-map .popover .download-bttn svg {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: .8rem;
}
.overview-map .popover figure img {
    width: 100%;
    height: auto;
}
.overview-map .popover .dropdown__internal {
    padding: 2rem 0 3rem;
}
/* // ACTIVITIES */
.overview-map .popover .activity:not(:last-child){
    margin: 0 0 1.8rem;
}
.overview-map .popover .activity h3 {
    font-size: 2rem;
    line-height: 128.571%;
    letter-spacing: .05em;
    margin: 0 0 1.2rem;
}
/* // ANIMATIONS */
.overview-map .catalogue {
    transition: translate .7s, opacity .7s, visibility .7s;
}
.overview-map[data-catalogue=hide] .catalogue {
    opacity: 0;
    visibility: hidden;
    translate: 2rem 0;
}
.overview-map[data-catalogue=show] .catalogue {
    opacity: 1;
    visibility: visible;
    translate: 0;
}
.overview-map .popover {
    opacity: 0;
    visibility: hidden;
    transition: translate .7s, opacity .7s, visibility .7s;
}
.overview-map[data-popover=show] .popover {
    opacity: 1;
    visibility: visible;
    translate: 0;
}
.overview-map[data-popover=hide] .popover {
    opacity: 0;
    visibility: hidden;
    translate: 2rem 0;
}
/* // DROWPDOWN */
.overview-map .dropdown {
    height: 0;
    overflow: hidden;
    transition: height .7s, opacity .7s;
}
.overview-map .dropdown[data-status=closed] {
    opacity: 0;
}
.overview-map .dropdown[data-status=open] {
    opacity: 1;
    height: var(--internalDiv-height);
}
/* // CONTROL ZOOM MOBILE */
.overview-map .control-zoom {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 3rem;
}
.overview-map .control-zoom span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    width: 35px;
    height: 35px;
}
.overview-map .control-zoom i {
    pointer-events: none;
    color: var(--marron);
    font-size: 16px;
}
.overview-map .control-zoom .icon-minus {
    font-size: 2px;
}

/* // MAP SVG */
.overview-map tspan {
    font-family: var(--font-pragmatica);
    font-weight: var(--font-pragmatica-cond-weight-book);
}

@media only screen
and (min-width : 961px) {

    .overview-map .row {
        column-gap: 3.8rem;
    }
    .overview-map .col-map,
    .overview-map .col-info {
        padding: 0;
    }
    .overview-map .col-map {
        flex: 1;
        max-width: 100%;
        margin-left: 2.5rem;
        margin-top: 8.5rem;
    }
    .overview-map .col-map,
    .overview-map .col-map .img-box {
        height: 75.4rem;
    }
    .overview-map .col-info {
        flex: 0 1 34.5rem;
        max-width: 34.5rem;
        margin-right: 5.7rem;
        margin-top: 4.3rem;
    }
    .overview-map header {
        margin: 0 0 2rem;
    }
    .overview-map .items-container {
        height: 56rem;
        overflow-y: auto;
        padding-right: 1rem;
        /* scroll-snap-type: y mandatory; */
        padding-bottom: 0;
    }
    .overview-map .popover {
        padding: 0;
    }
    .overview-map .outer-routes {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-index-medium);
    }
    /* SCROLL BAR */
    .overview-map .items-container::-webkit-scrollbar {
        width: 1rem;
        height: 1rem;
    }
    .overview-map .items-container::-webkit-scrollbar-thumb {
        background-color: var(--marron-o-20);
    }
    .overview-map .items-container::-webkit-scrollbar-thumb:hover {
        background-color: var(--soft-cream);
    }
    .overview-map .items-container::-webkit-scrollbar-track {
        background-color: var(--fondo);
    }
    .overview-map[data-catalogue=show] .catalogue .items-container {
        height: 66rem;
    }
    .overview-map[data-popover=show] .popover .items-container {
        height: 56rem;
    }
    /* MAP TOUCH CIRCLES */
    .overview-map .col-map svg g {
        pointer-events: none;
    }
    .overview-map .col-map svg circle {
        pointer-events: all;
        cursor: pointer;
        transition: all .7s;
    }
    .overview-map .col-map svg circle:hover {
        opacity: .7;
    }

    /* Hover */
    .overview-map button:not(.go-back):hover {
        background-color: var(--dorado);
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

    .overview-map .col-info {
        min-height: 50rem;
    }
    .overview-map .popover {
        position: static;
    }

    .overview-map[data-catalogue=hide] .catalogue {
        display: none;
    }
    .overview-map[data-catalogue=show] .catalogue {
        display: block;
    }
    .overview-map .popover {
        display: none;
    }
    .overview-map[data-popover=show] .popover {
        display: block;
    }
    .overview-map[data-popover=hide] .popover {
        display: none;
    }

    .overview-map [data-image] {
        margin: 0 0 3rem;
        overflow: hidden;
    }
    .overview-map [data-image] .overflow-container {
        overflow: hidden;
    }
    .overview-map [data-image] figure {
        position: relative;
    }
    .overview-map [data-image] svg {
        width: 100%;
        height: auto;
    }

}

/* @end */

/* LOADER */
.overview-map .loader {
    width: 24px;
    height: 24px;
    border: 5px solid var(--dorado);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-medium-low);
    transition: opacity .7s;
    pointer-events: none;
}
.overview-map[data-loader=hide] .loader {
    opacity: 0;
}
.overview-map[data-loader=show] .loader {
    opacity: 1;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}