:root {
    --header: #d8d8d8;
    --art-culture: #ffcb05;
    --family-fun: #f7941d;
    --food-drink: #ed1c24;
    --history: #00a4e0;
    --outdoors: #cbdb2a;
    --shopping: #f27180;
    --sports-gaming: #be60be;
}

.ski-map {
    max-width: 1190px;
    margin: 0 auto 15px;
    padding: 0 15px;
}

.ski-map .topbox {
    margin-bottom: 30px;
}

.ski-map .topbox .text-cont h2 {
    font-family: var(--font-body-bold);
    font-size: 36px;
    color: #000;
    line-height: 42px;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.ski-map .topbox .text-cont p {
    font-family: var(--font-body-reg);
    font-size: 20px;
    color: #000;
    line-height: 1.6;
    margin: 0 0 20px;
}

.ski-map .topbox .text-cont .actions {
    text-align: center;
}

.ski-map .topbox .text-cont .actions a {
    font-family: var(--font-body-smbld);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
}

.ski-map .topbox .text-cont .reports {
    display: inline-block;
    color: #eb2328;
    margin-bottom: 30px;
}

@media (min-width: 769px) {
    .ski-map {
        margin-top: 50px;
    }

    .ski-map .topbox {
        margin-bottom: 0;
        display: flex;
    }

    .ski-map .topbox .text-cont {
        flex: 1;
        margin-right: 10px;
    }

    .ski-map .topbox .text-cont h2 {
        margin: -8px 0 18px;
    }

    .ski-map .topbox .text-cont .actions {
        text-align: left;
    }

    .ski-map .topbox .text-cont .reports {
        margin-bottom: 20px;
    }

}

@media (min-width: 1025px) {
    .ski-map {
        padding: 0;
    }
    .ski-map .topbox .text-cont {
        flex: 1 1 580px;
        margin-right: 50px;
    }

    .ski-map .topbox .text-cont h2 {
        font-size: 48px;
        line-height: 1;
    }

    .ski-map .topbox .text-cont p {
        margin: 0 0 33px;
    }

    .ski-map .topbox .text-cont .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* Map Styles */
.ski-map .map-container {
    position: relative;
    height: 70vw;
    min-height: 290px;
    margin: 0 -15px;
}

.ski-map .map-container .map-cover {
    height: 100%;
    background-size: cover;
    background-position: center;
}

.ski-map .map-container .map-cover.desktop-cover {
    display: none;
}

.ski-map .view-map {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.ski-map .view-map span {
    position: absolute;
    left: 15px;
    top: 15px;
    background-color: #f2002c;
    border-radius: 5px;
    padding: 10px 12px 11px;
    font-family: var(--font-body-smbld);
    font-size: 15px;
    text-transform: uppercase;
    width: max-content;
}

@media (min-width: 641px) {
    .ski-map .map-container .map-cover.mobile-cover {
        display: none;
    }

    .ski-map .map-container .map-cover.desktop-cover {
        display: block;
    }

    .ski-map .gm-style-iw {
        padding: 2px;
        border-radius: 0;
    }

    .ski-map .gm-style-iw-d {
        overflow: hidden !important;
    }

    .ski-map .map-info {
        width: 175px;
    }

    .ski-map .map-info img {
        width: 171px;
        height: 115px;
        object-fit: cover;
        object-position: center;
    }

    .ski-map .map-info h3 {
        font-family: var(--font-body-bold);
        font-size: 16px;
        color: #000;
        line-height: 1;
        margin: 10px 10px 5px;
    }

    .ski-map .map-info .moreinfo {
        padding: 0;
        margin: 0 10px 10px;
        background: transparent;
        font-family: var(--font-body-bold);
        font-size: 14px;
        color: #eb2328;
        text-transform: uppercase;
        display: inline-block;
    }

    .ski-map .gm-ui-hover-effect {
        background-color: #fff !important;
        color: #000;
        opacity: 1;
        top: 0 !important;
        right: 0 !important;
        width: 30px !important;
        height: 25px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .ski-map .gm-ui-hover-effect span {
        -webkit-mask-repeat: no-repeat;
    }
}

@media (min-width: 1025px) {
    .ski-map .map-container {
        height: 740px;
        margin: 0;
    }

    .ski-map .view-map span {
        left: 254px;
        top: 38px;
        padding: 14px 14px 15px;
        font-size: 18px;
    }
}

/* Bottom infowindow slider */
.ski-map .bottombox {
    display: none;
}

@media (max-width: 641px) {
    .ski-map .gm-style-iw-t {
        display: none;
    }

    .ski-map .bottombox {
        display: block;
        margin: 0 -15px;
        border-bottom: 2px solid rgb(0 0 0 / 15%);
        max-height: 0;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
    }

    .ski-map.active .bottombox {
        max-height: 500px;
    }

    .ski-map .bottombox .item:not(:first-of-type) {
        display: none;
    }

    .ski-map .bottombox.slick-initialized .item {
        display: block;
    }

    .ski-map .item {
        padding: 10px;
        margin: 10px 4px 13px;
        box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    }

    .ski-map .item .textcont {
        min-height: 65px;
    }

    .ski-map .item h3 {
        font-family: var(--font-body-bold);
        font-size: 16px;
        color: #000;
        line-height: 1;
        margin: 10px 0 5px;
    }

    .ski-map .item .moreinfo {
        padding: 0;
        margin: 0;
        background: transparent;
        font-family: var(--font-body-bold);
        font-size: 14px;
        color: #eb2328;
        text-transform: uppercase;
    }
}