.kartar{width:940px;margin:100px auto 50px;position:relative;}
#tm-footer .kartar p.serv{text-align:center;color: #ffcc00;font-weight:700;text-transform:uppercase;margin-bottom:45px;font-size:30px;text-indent:0;line-height:45px;font-family:Arial, sans-serif;display:block;}
.contacts-towns{margin:0 auto 84px;user-select:none;}

.emu-table {
    display: table;
}

.emu-tr {
    display: table-row;
}

.contacts-towns .emu-td {
    padding: 0 10px 1px;
    vertical-align: top;
}

.emu-td {
    display: table-cell;
}

.contacts-town {
    position: relative;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    border-radius: 14px;
    padding: 0 15px 6px 33px;
}

.contacts-town:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    height: 15px;
    width: 15px;
    border-radius: 11px;
    background-color: #f1f1f5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.19);
    background-image: linear-gradient(to bottom, #ff0066 -22.5%, #ff7956 122.5%);
}

.contacts-town:after {
    content: '';
    position: absolute;
    top: 13px;
    left: 11px;
    height: 4px;
    width: 4px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
}

.contacts-map {
    position: relative;
    background: url(contacts-map.webp) left top no-repeat;
    height: 399px;
}

.contacts-mark {
    position: absolute;
    top: 110px;
    left: 150px;
    height: 16px;
    width: 18px;
    cursor: pointer;
    background: url(caont-map--mark.webp) left top no-repeat;
}

.contacts-mark--in {
    opacity: 0;
    visibility: hidden;
    position: relative;
    transition: opacity .3s linear, visibility 0s linear .3s;
}

.contacts-mark .contacts-mark--in:before, .contacts-mark .contacts-mark--popup {
    transition: all .3s linear;
}

.contacts-mark--in:before {
    content: '';
    width: 37px;
    height: 43px;
    position: absolute;
    left: -5px;
    bottom: -11px;
    z-index: 3;
    background: url(cont-map--ballun.webp) left top no-repeat;
}

.contacts-mark--popup {
    position: absolute;
    bottom: -16px;
    left: -16px;
    width: 300px;
    z-index: 1;
    cursor: default;
    padding: 17px 10px 11px 10px;
    border-radius: 3px;
    background-clip: padding-box;
    background-color: rgba(1,151,209,.9);
    box-shadow: 0 2px 0 #0ea1dc, inset 0 0 6px rgba(255,255,255,.23);
}

.contacts-mark--body {
    text-align: right;
    min-height: 50px;
    margin: 0 0 12px;
    color: #fff;
    font-weight: 600;
}

.contacts-mark--body p{text-align: right;margin:0;}
.contacts-mark--body #telty div{display:none;}

.contacts-mark--body > .garad {
    color: #ffcc00;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 20px;
}

.garad {
    font-size: 14px;
}

.tright {
    text-align: right;
}

.contacts-mark--button button {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border: none;
    padding: 7px 13px 6px;
    display: inline-block;
    text-shadow: 0 1px 0 rgba(0,0,0,.12);
    background-color: #00a4e3;
    box-shadow: 0 2px 3px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.19);
    background-image: linear-gradient(to bottom,#ff0066 -22.5%, #ff7956 122.5%);
}

.contacts-mark.active .contacts-mark--in {
    visibility: visible;
    opacity: 1;
    transition: all .3s linear;
}

.contacts-mark.active .contacts-mark--popup {
    bottom: 6px;
}

.contacts-town:hover, .contacts-town.active {
    color: #fff;
    background: #00a4e3;
}

@media (max-width: 939px) {
#tm-footer .kartar{display:none;}
}