html, body, .map-container, .map
{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    margin: 0px;
    padding:0px;
}

.map {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    contain: strict;    
    background-color: #f3f7fb;
}


/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

.map-container
{
    overflow:hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.additional-map-media
{
    opacity: 0;
    position: absolute;
}

.marker
{
    display: none;
    position: absolute;
    width: 2vh;
    height: 2vh;
    z-index: 500;
}

.marker.marker-active
{
    cursor: pointer;
}

.marker.marker-active img
{
    animation: pulse 2s infinite;
}

.marker > img
{
    width: 100%;
    height: 100%;
}

.zoom-button
{
    position: fixed;
    right: 1.5rem;
    display: flex;
    flex-direction: column;    
    z-index: 1;
    margin-bottom: 1rem;
    background-color: #0F7C7B;
    color: #fff;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 10;    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;    
}


.zoom-button:hover
{
    background: transparent;
    border: 3px solid #0F7C7B;
    color: #0F7C7B;
}

.zoom-button img
{
    max-width: 100%;
    max-height: 100%;
}

.zoom-button.zoom-in
{
    top: 120px;
}

.zoom-button.zoom-out
{
    top: 180px;
}

.zoom-button.reset-zoom
{
    top: 240px;
}

@keyframes pulse
{
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}



#hide-buttons
{
    position: fixed;
    left: 1.5rem;
    display: flex;
    flex-direction: column;    
    z-index: 1;
    margin-bottom: 1rem;    
    background-color: #0F7C7B;
    border: 3px solid #0F7C7B;
    color: #fff;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 10;    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    top: 120px;
}