.mapper{
    background: #fff;
    padding: 10px 0;
    border: 1px solid #dddfe2;
    border-radius: 3px;
    margin: 10px 0;
}

.mapper *{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mapcontrols{
    margin: 0 15px;
}

.mapcontrols span{
    display: inline-block;
    margin-right: 15px;
    line-height: 34px;
    border-radius: 3px;
    color: #fff;
    padding: 0 16px;
    background: #00A7DF;
    transition: all 0.3s;
    cursor: pointer;
}

.mapcontrols span:hover{
    background: #002A65;
    transition: all 0.3s;
}

.mapsource{
    overflow: hidden;
    margin: 15px;
    position: relative;
    border: 1px solid #dddfe2;
    transition: all 0.5s;
    height: 50vh;
}

.mapholder{
    cursor: grab;
    transition: all 0.5s;
}

/*=== Phone ===*/
@media (max-width: 768px){
    .mapsource{
        height: 50vh;
    }
}