.mapboxgl-marker {
    background-color: #ed6a0a;
    background-size: cover;
    width: 4px;
    height: 4px;
    opacity: .75;
    border-radius: 50%;
    cursor: default;
    z-index:3;
}

.mapboxgl-marker.main-marker {
    background-color: #ed6a0a;
    background-size: cover;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    z-index:5;

    /*position: relative;*/
}

.mapboxgl-marker.main-marker:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px solid #fff;
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-iteration: 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: Ripple;
    animation-name: Ripple;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-backface-visibility: hidden;
    width:12px;
    height:12px;
    -webkit-transform-origin:center center;
    transform-origin:center center;

    /*-ms-transform-origin:0 0;*/
    /*-ms-*/


}

.mapboxgl-marker.main-marker.active-marker-map:before {
    -webkit-animation-name: none;
    animation-name: none;
    border: 1px solid #ed6a0a;
    width: 20px;
    content:"";
    height: 20px;
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
    position: absolute;
    border-radius: 50%;
    opacity: 1;
}


.mapboxgl-marker.main-marker.active-marker-map:after {
    display: none;
}

@-webkit-keyframes Ripple {
    from {
        /*width: 12px;*/
        /*height: 12px;*/
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform:scale(1.0);
        opacity: 1
    }

    to {
        /*width: 30px;*/
        /*height: 30px;*/
        -webkit-transform: scale(2.5);

        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes Ripple {
    from {
        /*width: 12px;*/
        /*height: 12px;*/
        -webkit-transform: scale(1.0) ;

        transform: scale(1.0);

        opacity: 1
    }

    to {
        /*width: 30px;*/
        /*height: 30px;*/
        -webkit-transform: scale(2.5);
        transform: scale(2.5);

        opacity: 0
    }
}


@media(max-width: 766px){
.single-post .meta>div{
    height:auto;
}

}