@font-face {
    font-family: "Maax-Bold";
    src: url("../fonts/Maax-Bold.eot");
    src: url("../fonts/Maax-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Maax-Bold.woff") format("woff"),
        url("../fonts/Maax-Bold.svg#Maax-Bold") format("svg"), url("../fonts/Maax-Bold.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

#map a {
	color: inherit;
	text-decoration: none;
}
.map-wrapper,
#map {
	position: relative;
	background-color: #fff;
	text-align: left;
}
#map .marker,
#map .marker-logo {
	-webkit-user-select: none;
	-moz-user-select: none;  
	user-select: none;
	font-weight: bold;
	text-align: center;
}
#map .marker {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	cursor: pointer !important;
}

#map .marker-logo {
	display: block;
	width: 50px;
	height: 100px;
	background-repeat: no-repeat;
	background-image: url('../img/map-marker.svg');
	background-size: cover;
    background-size: 50px 100px;
    background-position: center;	
}

#map .marker .marker-content {
        display: none;
}

@media (min-width: 767px) {
    #map .marker .marker-content {
        display: none;
        position: absolute;
        white-space: nowrap;
        z-index: 1;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        padding: 0px 30px;
        text-align: center;
        background: rgb(39, 103, 250);;
        color: #fff;
        font-family: 'Maax-Bold';
        font-weight: normal;
        font-style: normal;
    }

    #map .marker.map2 .marker-content {
        background: #000000;
    }

    #map .marker.map3 .marker-content {
        background: #7c634c;
    }

    #map .marker.map4 .marker-content {
        background: #5d8dfb;
    }

    #map .marker .marker-content p {
        color: #fff;
    }

    #map .marker .marker-content:after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: -5px;
        margin: 0 0 -5px 0px;
        width: 0; 
        height: 0; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgb(39, 103, 250);;
    }

    #map .marker.map2 .marker-content:after {
        border-top: 10px solid #000000;
    }

    #map .marker.map3 .marker-content:after {
        border-top: 10px solid #7c634c;
    }

    #map .marker.map4 .marker-content:after {
        border-top: 10px solid #5d8dfb;
    }

    #map .marker .marker-content h3 {
        margin: 10px 0;
        line-height: inherit;
        font-size: 14px;
        letter-spacing:0;
        font-weight: 500;
    }

    #map .marker .marker-content a:hover {
        text-decoration: underline;
    }

    .marker { 
        background-repeat: no-repeat;
        background-image: url('../img/icon-map1.svg');
        /* background-color: #fff; */
        background-size: 15px 15px;
        background-position: center center;
        width: 15px;
        height: 15px;
        transition: all 0.5s ease;
    }

    .marker.map1 { 
        background-image: url('../img/icon-map1.svg');
    }

    .marker.map1:hover,
    .marker.map1.active{
        background-image: url('../img/icon-map1_hover.svg');
    }

    .marker.map2 { 
        background-image: url('../img/icon-map2.svg');
    }

    .marker.map2:hover,
    .marker.map2.active{
        background-image: url('../img/icon-map2_hover.svg');
    }

    .marker.map3 { 
        background-image: url('../img/icon-map3.svg');
    }

    .marker.map3:hover,
    .marker.map3.active{
        background-image: url('../img/icon-map3_hover.svg');
    }

    .marker.map4 { 
        background-image: url('../img/icon-map5.svg');
    }

    .marker.map4:hover,
    .marker.map4.active{
        background-image: url('../img/icon-map5_hover.svg');
    }
}