.marker-layout {
        position: absolute;
        padding: 0;
        margin: 0;
        box-shadow: 0 3px 7px rgba(0,0,0,.18);
        background-color: #0c3b65;
        border-radius: 5px;
        min-width: 80px;
        transform: translateX(-50%);
        top: -38px;
        z-index: 2;
    }
    .marker-layout__text {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        font-family: Roboto,Arial,sans-serif;
        height: 100%;
        width: 110%;
        font-size: 15px;
        font-weight: 400;
        padding: 5px 10px;
        white-space: nowrap;
    }
    .marker-layout:before {
        content: '';
        position: absolute;
        bottom: -5px;
        background-color: inherit;
        height: 10px;
        width: 10px;
        right: calc(50% - 5px);
        transform: rotate(45deg);
    }
    [class*="ymaps-2"][class*="-ground-pane"] {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        /* Firefox 3.5+ */
        -webkit-filter: grayscale(100%);
        /* Chrome 19+ & Safari 6+ */
    }
    .ec-rating-stars span, .ec-stars, .ec-stars span {
 
           background-image: url(../img/rating-icons20.png) !important;
 
    }