:root {
    --filter-cont-w: 50px;
    --filter-cont-w-open: 210px;
}

.filter-cont {
    position: relative;
    top: 50vh;
    transform: translateY(-50%);
    left: 10px;
    width: var(--filter-cont-w-open);
    z-index: 999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.map-cont {
    position: relative;
    height: 100vh;
}

.mapid-cont {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
}


.filter-el {
    width: var(--filter-cont-w);
    height: var(--filter-cont-w);
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 5px;
    transition: .2s;
    position: relative;
    overflow: hidden;
    pointer-events: visible;
}

.filter-el:hover {
    width: 100%;
}

.filter-el[f-sel="1"] {
    background: #00b9f2;
}

.filter-el[f-sel="0"] {
    background: white;
}

.filter-el[f-sel="1"] .filter-desc {
    color: white;
}

.filter-desc {
    position: absolute;
    line-height: 100%;
    left: var(--filter-cont-w);
    width: calc(var(--filter-cont-w-open) - var(--filter-cont-w));
    color: #00b9f2;
}

@media screen and (max-width: 500px) {
    .filter-cont {
        top: 130px;
        transform: translateY(0%);
        height: 65vh;
    }

    .filter-el:hover {
        width: var(--filter-cont-w);
    }
}

.filter-img {
    height: 60%;
    position: relative;
    left: calc(var(--filter-cont-w)/2);
    transform: translateX(-50%);
    
}

.filter-img img {
    height: 100%;
}