.qm-map-wrapper {
    position: relative;
}

.qm-map {
    width: 100%;
    height: 100%;
}

.qm-map-details-wrapper {
    position: absolute;

    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 0px;

    overflow-y: auto;
    overflow-x: hidden;

    background-color: #FFF;

    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

.qm-map-details-wrapper.qm-map-details-active {
    width: 500px;
}

.qm-map-details {
    width: 500px;
}

.qm-map-details-close {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 5px 10px;
    z-index: 510;

    color: #595959;
}
.qm-map-details-close:hover {
    cursor: pointer;
}

.qm-map-legende {
    padding-left: 20px;
    padding-right: 20px;
    color: #8F8878;
}

.qm-map-legende:hover {
    color: #595959;
    cursor: pointer;
}

.qm-map-marker-title {
    color: #595959;
    font-weight: 600;
    text-align: center;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
}