mo-assets/src/files/scss/_base-style.scss

/*MAIN PAGE*/

p {
    a {
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}

body {
    font-family: $fontopensans;
    min-height: 100vh;
    position: relative;
    padding-bottom: 333px;

    footer {
        bottom: 0;
    }
}

header {
    position: fixed;
    /*height: 45px;*/
    min-height: 45px;
    width: 100%;
    background: #3b434d;
    z-index: 99999999;
}

a:focus {
    text-decoration: none;
}

header .menu {
    position: relative;
    height: 100%;
    width: 100%;
}

header .menu ul li a {
    height: 100%;
    color: #fff;
    font-family: $fontcuprum;
    font-size: 16px;

}

header .menu ul li a:hover {
    text-decoration: none;
    color: #5597d1;
}

header .menu ul li a.active {
    color: #eb914e;
}

header .menu ul {
    padding: 0;
    margin-bottom: 0;
    height: 100%;
    width: 100%;
    list-style: none;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

header .menu ul li {
    padding-top: 13px;
    padding-bottom: 13px;
    margin: 0 10px;
    height: 100%;
    float: left;
}

header .menu .circles {
    right: 0;
    position: absolute;
    padding-top: 5px;
}

header .circles .circle,
#searchToggle {
    margin: 5px 2px;
    float: left;
    width: 30px;
    height: 30px;
    background: url(../img/style/circle-1.png);
}

header .circles .circle:nth-child(2) {
    background: url(../img/style/circle-2.png);
}

header .circles .circle:nth-child(3) {
    background: url(../img/style/circle-3.png);
}

header .burger {
    display: none;
    margin: 7px 2px 5px;
    width: 30px;
    height: 30px;
    background: url(../img/style/menu-burger.png) center no-repeat;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

header .menu-mobile {
    list-style: none;
    text-align: center;
    color: #000;
    background: #3b434d;
}

header .menu-mobile ul {
    list-style: none;
}

header .menu-mobile ul li {
    margin-top: 10px;
}

header .menu-mobile ul li a {
    color: #fff;
    font-family: $fontcuprum;
    font-size: 18px;
}

header .menu-mobile ul li a:hover {
    text-decoration: none;
    cursor: pointer;
    color: #5597d1;
}

.main-container {
    padding-top: 60px;
}

.left-side {
    font-family: $fontcuprum;
    font-weight: 400;
    width: 20%;
}

.left-side .info {
    /*padding: 0 10px;*/
    margin-bottom: 20px;
}

.left-side .logo {
    text-align: center;
    margin-bottom: 15px
}

.left-side .logo-subtitle {
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    color: #a1a1a1;
}

.left-side .howtoget_button {
    font-size: 14px;
    display: block;
    cursor: pointer;
    padding: 5px 0;
    text-align: center;
    text-decoration: underline;
    color: #929292;
    background: #ebebeb;
    margin: 10px 0;
}

/*.howtoget_button:hover{
	background: #004d7b;
	color: #fff;
}

*/

.left-side .contact {
    color: #929292;
    font-size: 14px;
}

.left-side .value {
    font-size: 16px;
    margin-bottom: 5px;
}

.left-side .all-phones {
    display: block;
    text-decoration: underline;
}

.left-side .all-phones img {
    margin-left: 5px;
}

.left-side .specializations .spec-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    background: #929292;
    color: #fff;
}

.left-side .specializations .spec-header a {
    display: inline-block;
    float: right;
}

.left-side .spec {
    display: block;
    color: inherit;
    text-decoration: none;
    margin-top: 10px;
    height: 60px;
    background: #ebebeb;
    border-radius: 32px 0 0 32px;
    position: relative;
}

.left-side .spec .spec-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    position: absolute;
    margin-left: -10px;
    z-index: 10;
    left: 12px;
    top: 5px;
}

.left-side .spec .text {
    margin-left: 55px;
    padding-top: 5px;
}

.left-side .spec .text .subtitle {
    font-size: 14px;
    color: #929292;
}

.left-side .spec .text .title {
    font-size: 16px;
    line-height: 16px;
}

.left-side .more {
    text-align: right;
    margin-top: 10px;
}

.left-side .more a {
    font-size: 14px;
    color: #929292;
}

.left-side .add-info {
    width: 100%;
    display: inline-block;
    margin-top: 40px;
}

.left-side .add-info .info {
    padding-top: 20px;
    height: 90px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    background: #ebd0ce;
    text-align: center;
    color: #fff;
}

.main-title {
    position: relative;
}

.main-title .title {
    font-family: $fontcuprum;
    font-weight: 700;
    color: #004d7b;
    @media(min-width: 1201px) {
        max-width: 790px;
    }
}

.main-title .subtitle {
    font-family: $fontcuprum;
    font-weight: 700;
    font-size: 16px;
    color: #929292;
    margin-bottom: 20px;

    a {
        color: inherit;
    }
}

.soc {
    position: absolute;
    right: 60px;
    top: 30px;
}

.soc .social {
    float: left;
    width: 25px;
    height: 25px;
    margin-right: 4px;
    border-radius: 50%;
    background: blue;
    display: block;
}

.soc .fb {
    background: url(../img/style/soc-fb.png)
}

.soc .vk {
    background: url(../img/style/soc-vk.png)
}

.soc .ok {
    background: url(../img/style/soc-ok.png)
}

.soc .tw {
    background: url(../img/style/soc-twitter.png)
}

.soc .fb:hover {
    background: url(../img/style/soc-fb-hover.png)
}

.soc .vk:hover {
    background: url(../img/style/soc-vk-hover.png)
}

.soc .ok:hover {
    background: url(../img/style/soc-ok-hover.png)
}

.soc .tw:hover {
    background: url(../img/style/soc-twitter-hover.png)
}

.main-container .col-lg-10 {
    width: 80%;
}

/*.main-container .content{
	padding-right: 0; 
}*/

.content-left {
    padding-right: 0;
}

.content-left .slider {
    position: relative;
}

.content-left .arrow {
    width: 10px;
    height: 16px;
    position: absolute;
    z-index: 10;
    top: 50%;
    cursor: pointer;
}

.content-left .arrow-left {
    background: url(../img/style/slide-arrow-left.png);
    left: 10px;
}

.content-left .arrow-right {
    background: url(../img/style/slider-arrow-right.png);
    right: 10px;
}

.content-left .swiper-slide img {
    display: block;
}

.content-left .about {
    display: block;
    margin-top: 35px;
    @extend %clearFix;
}

.content-left .about .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.content-left .about .block-header img {
    float: right;
    margin-top: 3px;
}

.about .doctor {
    font-family: $fontcuprum;
    font-weight: 400;
}

.about .doctor .doctor-avatar {
    margin-bottom: 8px;
    text-align: center;
}

.about .doctor .doctor-avatar img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.about .doctor .doctor-name {
    text-align: center;
    font-size: 20px;
    color: #004d7b;
    line-height: 22px;
    margin-bottom: 4px;
}

.about .doctor .doctor-desc {
    line-height: 15px;
    text-align: center;
    color: #929292;
}

.about .doctor .doctor-link {
    padding: 0;
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
    background: #ebebeb;

    a {
        color: #929292;
        text-decoration: underline;
        padding: 9px 0;
        display: block;

        &:hover {
            color: #fff;
            background: #004d7b;
        }
    }
}

.about .about-text .title {
    color: #3b434d;
    font-family: $fontcuprum;
    font-weight: 700;
    line-height: 20px;
    font-size: 20px;
    margin-bottom: 10px;
}

.about .about-text .text {
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    color: #626971;
}

.content-left .about .more-text {
    font-family: Open Sans, sans-serif;
    margin-top: 10px;
}

.about .more {
    margin-top: 10px;
    text-align: right;
}

.about .more a {
    font-size: 14px;
    color: #929292;
}

.content-left .clinics {
    margin-top: 40px;
}

.content-left .clinics .clinic {
    min-height: 75px;
    width: 100%;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    border: 1px solid #ebebeb;
}

.content-left .clinics .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.content-left .clinics .block-header img {
    float: right;
    margin-top: 3px;
}

.content-left .clinics .clinic-image {
    margin-right: 15px;
    display: block;
    float: left;
    height: 100%;
}

.content-left .clinics .text {
    /*padding-left: 115px;*/
}

.content-left .clinics .text .title {
    color: #3b434d;
    padding-top: 10px;
    padding-right: 10px;
    font-size: 19px;
    line-height: 18px;
    font-family: $fontcuprum;
}

.content-left .clinics .text .subtitle {
    font-family: Open Sans, sans-serif;
    color: #a1a1a1;
    font-size: 13px;
    padding-left: 10px;
}

.content-left .clinics .clinic .recomended {
    position: absolute;
    left: -7px;
    bottom: 5px;
    height: 36px;
    width: 196px;
    padding-top: 6px;
    font-family: $fontcuprum;
    font-size: 16px;
    color: #fff;
    padding-left: 6px;
    background: url(../img/style/green-recomended.png) no-repeat;
}

.clinics .arrow-right-blue {
    cursor: pointer;
    position: absolute;
    background: url(../img/style/arrow-right-blue.png) no-repeat center;
    right: 3px;
    top: 0;
    width: 20px;
    height: 75px;
}

.content-left .clinics .more {
    font-family: $fontcuprum;
    text-align: right;
}

.content-left .clinics .more a {
    font-size: 16px;
    color: #929292;
}

.content-right {
    padding-left: 0;
}

/*.content*/
.importants {
    font-family: Open Sans, sans-serif;
}

.content-right .importants .important {
    margin-left: 10px;
}

/*.content*/
.importants .important {
    height: 90px;
    margin-bottom: 10px;
    padding: 0;
    display: block;
    background: #d7d7d7;
}

/*.content */
.importants .important:hover {
    text-decoration: none;
    background: #004d7b;
}

/*.content*/
.importants .important:focus {
    text-decoration: none;
}

/*.content*/
.importants .important:nth-child(1) .description {
    padding-top: 20px;
}

/*.content*/
.importants .important:nth-child(2) .description {
    padding-top: 15px;
    padding-left: 0;
}

/*.content*/
.importants .important:nth-child(4) .description {
    padding-top: 10px;
}

/*.content*/
.importants .important:nth-child(6) .description {
    padding-top: 20px;
}

/*.content*/
.importants .important .important-image {
    padding-top: 20px;
    margin-left: 5px;
    height: 100%;
    width: 25%;
    display: block;
    float: left;
}

/*.content*/
.importants .important .description {
    color: #fff;
    font-weight: 700;
    height: 100%;
    font-size: 15px;
    padding-left: 65px;
}

.today {
    margin-top: 25px;
    padding-left: 15px;
    display: block;
    @extend %clearFix;
}

.today .today-item .inner {
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-radius: 10px 0 0 0;
}

.today .today-item .head {
    display: block;
    cursor: pointer;
    background: #929292;
    padding: 12px 5px;
    font-size: 13px;
    font-family: $fontcuprum;
    text-align: right;
    height: 40px;
    color: #fff;
    border-radius: 10px 0 0 0;
}

.today .today-item .head:hover {
    text-decoration: none;
}

.today .today-item .head-blue {
    background: #5597d1;
}

.today .today-item .head .date {
    float: left;
    display: block;
}

.today .today-item .head .name {
    float: right;
    display: block;
}

.today .today-item {
    padding-right: 0px;
    padding-left: 8px;
}

.today .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.today .block-header img {
    float: right;
    margin-top: 3px;
}

.today .image {
    position: relative;
    margin-top: 10px;
}

.today .image img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

.today .logo {
    border-radius: 50px;
    position: absolute;
    top: 7px;
    font-family: $fontcuprum;
    right: 10px;
    width: 60px;
    height: 60px;
}

.today .logo img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.today .free {
    position: absolute;
    padding-top: 5px;
    padding-left: 7px;
    top: 60px;
    left: -7px;
    font-family: $fontcuprum;
    color: #fff;
    width: 200px;
    height: 40px;
    background: url(../img/style/free-bg.png) no-repeat;
}

.today .desc {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: $fontcuprum;
    padding-left: 5px;
    font-size: 14px;
    line-height: 15px;
}

.today .org {
    cursor: pointer;
    display: block;
    font-family: $fontcuprum;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #ebebeb;
    padding-top: 5px;
    color: #004d7b;
}

.today .org:hover {
    text-decoration: none;
}

.today .adress {
    margin-top: 5px;
    font-family: $fontcuprum;
    font-size: 14px;
    padding: 15px 0;
    background: #ebebeb;
    color: #929292;
    text-align: center;
}

.content-right .news .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.content-right .news .block-header img {
    float: right;
    margin-top: 3px;
}

.content-right .news-item {
    /*height: 320px;*/
    display: block;
    color: inherit;
    cursor: pointer;
    padding: 0 10px;
    padding-right: 0;
    margin-bottom: 20px;
}

.content-right .news-item:hover {
    text-decoration: none;
}

.content-right .news-item .inner {
    height: inherit;
    background: #ebebeb;
    border-radius: 10px 0 0 0;
    overflow: hidden;
}

.content-right .news {
    margin-top: 25px;
    padding-left: 15px;
}

.content-right .news .image {
    font-family: $fontcuprum;
    color: #fff;
    height: 160px;
    /*	width: 205px;*/
    margin: 0 auto;
    position: relative;
}

.content-right .news .image img {
    display: block;
    margin: 0 auto;
}

.content-right .news .image .title {
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    bottom: 10px;
    display: block;
    color: #fff;
    left: 5%;
}

.content-right .news .desc {
    font-family: Open Sans, sans-serif;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 40px;
    font-size: 14px;
    line-height: 17px;
    border-bottom: 1px solid #d4d4d4;
}

.content-right .news .data {
    padding: 5px 0;
    padding-right: 10px;
    color: #929292;
    text-align: right;
}

/*footer*/
footer {
    position: absolute;
    margin-top: 40px;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 20px;
    display: inline-block;
    background: #3b434d;
    overflow-x: hidden;
}

footer .list {
    position: relative;
    list-style: none;
    float: left;
    width: 20%;
    font-family: $fontcuprum;
    font-size: 16px;
}

footer .list a {
    color: #f2f2f3
}

footer .list li {
    margin-bottom: 5px;
}

footer .list li:nth-child(1) a {
    color: #75787b;
    font-weight: 700;
    font-size: 20px;
}

footer .admin-button {
    background: #ebebeb;
    margin-top: 25px;
    padding: 10px 5px;
    text-align: center;
    display: block !important;
}

footer .admin-button a {
    font-size: 14px;
    color: #929292;
    text-decoration: underline;
}

footer .admin-button a:hover {
    text-decoration: underline;
}

footer .copyright {
    float: right;
    height: auto;
    margin-top: 40px;
}

footer .copyright .text {
    color: #919293;
    font-family: Open Sans, sans-serif;
    float: left;
    width: 60%;
    text-align: right;
}

footer .copyright a {
    font-family: Open Sans, sans-serif;
    padding-left: 8px;
    text-decoration: underline;
    color: #9e9e9e;
}

footer .copyright a:hover {
    color: #9e9e9e;
    text-decoration: underline;
}

footer .copyright .logo {
    text-align: center;
    float: left;
    margin-left: 20px;
}

/**/

.mobile {
    display: none;
}

/*MAIN CONTENT END*/
/*END MAIN PAGE*/

/*CONTACTS PAGE*/

.contacts-container .side-bar .logo {
    margin-bottom: 50px;
}

.contacts-container .main-title {
    padding-left: 40px;
}

.contacts-container .main-title .title {
    font-size: 34px;
}

.side-bar ul {
    list-style: none;
    padding-left: 0;
}

.side-bar li {
    padding: 7px 0;
    text-align: right;
    border-bottom: 1px solid #ebebeb;
}

.side-bar li:first-child {
    border-top: 1px solid #ebebeb;
}

.side-bar li a {
    color: #004d7b;
    font-family: $fontcuprum;
    font-weight: 600;
    font-size: 17px;
}

.side-bar li a:hover {
    text-decoration: none;
}

.contacts-container .map {
    margin-bottom: 50px;
}

.contacts-container #map {
    height: 345px;
    margin: auto;
}

.contacts-container .right-side-bar .info {
    margin-bottom: 10px;
}

.contacts-container .right-side-bar .soc {
    position: static;
    display: inline-block;
    text-align: center;
    /*padding: 0 10px;*/
    margin-top: 0;
    margin-bottom: 20px;
}

.contacts-container .center-content .work-time {
    margin-bottom: 40px;
}

.contacts-container .center-content .work-time .min-title {
    margin-bottom: 20px;
    font-family: $fontcuprum;
    font-size: 20px;
    font-weight: 700;
}

.contacts-container .center-content .work-time .text {
    font-size: 15px;
}

.contacts-container .center-content .to-doctors {
    display: block;
}

.contacts-container .center-content .to-doctors .min-title {
    margin-bottom: 20px;
    font-family: $fontcuprum;
    font-size: 18px;
    font-weight: 700;
}

.contacts-container .center-content .callback .min-title-text {
    font-size: 16px;
    font-family: $fontcuprum;
    font-weight: 700;
}

.contacts-container .center-content .to-doctors .personal-doctor {
    width: 33.33333333332%;
    display: inline-block;
    color: #000;
    padding: 0;
    padding-right: 10px;
    text-decoration: none;
    margin-bottom: 40px;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-type {
    font-size: 14px;
    font-family: $fontcuprum;
    color: #929292;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-header {
    display: inline-block;
    width: 100%;
    background: #ebebeb;
    border-radius: 30px 0 0 30px;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-image {
    float: left;
    border-radius: 50%;
    overflow: hidden;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-name {
    padding-top: 10px;
    padding-left: 65px;
    font-family: $fontcuprum;
    color: #004d7b;
    font-size: 18px;
    line-height: 18px;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-category .image {
    width: 13%;
    float: left;
    padding-top: 70px;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text {
    padding-top: 10px;
    width: 87%;
    float: left;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text .category {
    color: #929292;
    margin-bottom: 10px;
}

.contacts-container .center-content .to-doctors .personal-doctor .doctor-category .text .otdels {
    color: #004d7b;
    font-family: Open Sans, sans-serif;
}

.contacts-container .center-content .to-doctors .personal-doctor .contacts {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    background: #ebebeb;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.contacts-container .center-content .to-doctors .personal-doctor .contact {
    color: #929292;
    font-size: 14px;
    font-family: $fontcuprum;
}

.contacts-container .center-content .to-doctors .personal-doctor .value {
    font-size: 16px;
    margin-bottom: 5px;
    font-family: $fontcuprum;
}

.contacts-container .center-content .to-doctors .personal-doctor .value a {
    font-size: 15px;
}

.contacts-container .center-content .to-doctors .personal-doctor .priem {
    margin-top: 10px;
    font-weight: 700;
    font-size: 16px;
    font-family: $fontcuprum;

}

.contacts-container .center-content .callback {
    width: 100%;
    display: inline-block;
}

.contacts-container .center-content .callback .min-title {
    margin-bottom: 20px;
    font-family: $fontcuprum;
    font-size: 20px;
    font-weight: 700;
}

.contacts-container .center-content .callback .min-title-text {
    font-size: 19px;
    margin-bottom: 30px;
}

.contacts-container .center-content .callback form p {
    font-size: 12px;
    color: #929292;
}

.contacts-container .center-content .callback form input {
    margin-bottom: 10px;
    padding-left: 5px;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 30px;
    color: #929292;
    background: #ebebeb;
    border: none;
}

.contacts-container .center-content .callback form input[type = "checkbox"] {
    width: 20px;
    height: inherit;
}

.contacts-container .center-content .callback form span {
    font-size: 12px;
    color: #929292;
}

.contacts-container .center-content .callback form textarea {
    width: 100%;
    height: 110px;
    padding-left: 5px;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    color: #929292;
    background: #ebebeb;
    border: none;
    resize: none;
}

.contacts-container .center-content .callback form .form-button {
    margin-top: 10px;
    cursor: pointer;
    padding: 7px 0;
    color: #fff;
    text-align: center;
    font-family: $fontcuprum;
    font-weight: 700;
    background: #004d7b;
    border: 0;
}

.contacts-container .center-content .to-doctors .doctor-button {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
    text-decoration: underline;
    font-family: $fontcuprum;
    padding: 7px 0;
    color: #929292;
    background: #ebebeb;
}

.contacts-container .center-content .to-doctors .doctor-button:hover {
    color: #fff;
    background: #004d7b;

}

.contacts-container .center-content .to-doctors .petition-button {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
    text-decoration: underline;
    font-family: $fontcuprum;
    padding: 7px 0;
    color: #929292;
    background: #ebebeb;
}

.contacts-container .center-content .to-doctors .petition-button:hover {
    color: #fff;
    background: #004d7b;

}
/*
.contacts-container .center-content .*/

/*CONTACTS PAGE END*/

/*SPECIALISTS PAGE*/

.specs-container .center-content .classes {
    margin-bottom: 15px;
}

.specs-container .center-content .classes a {
    display: block;
    color: #004d7b;
}

.specs-container .center-content .text {
    font-family: Open Sans, sans-serif;
    margin-bottom: 20px;
}

.specs-container .adds .today {
    padding-left: 0px;
}

.specs-container .today {
    width: 100%;
    margin-top: 25px;
    /*	padding-left: 15px;
        padding-right: 15px;*/
    display: inline-block;
}

.specs-container .today .today-item {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 20px;
}

.specs-container .today .today-item .head {
    display: block;
    cursor: pointer;
    background: #929292;
    padding: 12px 5px;
    font-size: 13px;
    font-family: $fontcuprum;
    text-align: right;
    height: 40px;
    color: #fff;
    border-radius: 10px 0 0 0;
}

.specs-container .today .today-item .head:hover {
    text-decoration: none;
}

.specs-container .today .today-item .head-blue {
    background: #5597d1;
}

.specs-container .today .today-item .head .date {
    float: left;
    display: block;
}

.specs-container .today .today-item .head .name {
    float: right;
    display: block;
}

/*.contacts-container .today .today-item{
	padding-right: 0;
}
*/
.specs-container .today .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.specs-container .today .block-header img {
    float: right;
    margin-top: 3px;
}

.specs-container .today .image {
    position: relative;
    margin-top: 10px;
}

.specs-container .today .image img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

.specs-container .today .logo {
    position: absolute;
    top: 0;
    font-family: $fontcuprum;
    right: 15px;
    width: 60px;
    height: 60px;
}

.specs-container .today .logo img {
    width: 60px;
    height: 60px;
}

.specs-container .today .free {
    position: absolute;
    padding-top: 5px;
    padding-left: 7px;
    top: 60px;
    left: -5px;
    font-family: $fontcuprum;
    color: #fff;
    width: 200px;
    height: 40px;
    background: url(../img/style/free-bg.png) no-repeat;
}

.specs-container .today .desc {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: $fontcuprum;
    padding-left: 5px;
    font-size: 14px;
}

.specs-container .today .org {
    font-family: $fontcuprum;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #ebebeb;
    padding-top: 5px;
    color: #004d7b;
}

.specs-container .today .adress {
    margin-top: 5px;
    font-family: $fontcuprum;
    font-size: 14px;
    padding: 10px 0;
    background: #ebebeb;
    color: #929292;
    text-align: center;
}

.specs-container .center-content .vacancies {
    margin-bottom: 40px;
}

.specs-container .center-content .vacan-table {
    border-top: 1px solid #ebebeb;
}

.specs-container .center-content .vacancies .vac {
    padding: 7px 10px;
}

.specs-container .center-content .vacancies .vac:nth-child(even) {
    background: #ebebeb;
}

.specs-container .center-content .vacancies .vacation {
    float: left;
}

.specs-container .center-content .vacancies .vacation a {
    color: #004d7b;
}

.specs-container .center-content .vacancies .value {
    text-align: right;
}

/*SPECIALISTS PAGE END*/
/*NEWS*/

.left-side .add-info-news {
    margin-top: 15px;
}

.right-side-bar .today {
    width: 100%;
    margin-top: 25px;
    display: inline-block;
}

.right-side-bar .today .today-item {
    padding-left: 15px;
    padding-right: 0px;
}

.right-side-bar .today .today-item .head {
    display: block;
    background: #929292;
    padding: 12px 5px;
    font-size: 13px;
    font-family: $fontcuprum;
    text-align: right;
    height: 40px;
    color: #fff;
    border-radius: 10px 0 0 0;
}

.right-side-bar .today .today-item .head-blue {
    background: #5597d1;
}

.right-side-bar .today .today-item .head .date {
    float: left;
    display: block;
}

.right-side-bar .today .today-item .head .name {
    float: right;
    display: block;
}

.right-side-bar .today .today-item {
    margin-bottom: 15px;
}

.right-side-bar .today .today-item .inner {
    border: 1px solid #ebebeb;
    border-radius: 10px 0 0 0;
}

.right-side-bar .today .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.right-side-bar .today .block-header img {
    float: right;
    margin-top: 3px;
}

.right-side-bar .today .image {
    position: relative;
    margin-top: 10px;
}

.right-side-bar .today .image img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

.right-side-bar .today .logo {
    position: absolute;
    top: 10px;
    font-family: $fontcuprum;
    right: 20px;
    width: 60px;
    height: 60px;
}

.right-side-bar .today .logo img {
    width: 60px;
    height: 60px;
}

.right-side-bar .today .free {
    position: absolute;
    padding-top: 5px;
    padding-left: 7px;
    top: 60px;
    left: -5px;
    font-family: $fontcuprum;
    color: #fff;
    width: 200px;
    height: 40px;
    background: url(../img/style/free-bg.png) no-repeat;
}

.right-side-bar .today .desc {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: $fontcuprum;
    padding-left: 5px;
    font-size: 14px;
}

.right-side-bar .today .org {
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-family: $fontcuprum;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #ebebeb;
    padding-top: 5px;
    color: #004d7b;
}

.right-side-bar .today .adress {
    margin-top: 5px;
    font-family: $fontcuprum;
    font-size: 14px;
    padding: 10px 0;
    background: #ebebeb;
    color: #929292;
    text-align: center;
}

.contacts-container .center-content .news .block-header {
    padding: 6px 10px;
    font-size: 22px;
    font-weight: 700;
    font-family: $fontcuprum;
    background: #929292;
    color: #fff;
    margin-bottom: 10px;
}

.contacts-container .center-content .news .block-header img {
    float: right;
    margin-top: 3px;
}

.contacts-container .center-content .news-item {
    display: block;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    height: 320px;
    padding: 0 10px;
    padding-right: 0;
    margin-bottom: 20px;
}

.contacts-container .center-content .news-item .inner {
    height: inherit;
    background: #ebebeb;
    border-radius: 10px 0 0 0;
    overflow: hidden;
}

.contacts-container .center-content .news {
    display: inline-block;
    margin-top: 25px;
    padding-left: 0px;
}

.contacts-container .center-content .news .image {
    font-family: $fontcuprum;
    color: #fff;
    height: 160px;
    /*	width: 205px;*/
    margin: 0 auto;
    position: relative;
}

.contacts-container .center-content .news .image img {
    display: block;
    margin: 0 auto;
}

.contacts-container .center-content .news .image .title {
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    bottom: 10px;
    display: block;
    color: #fff;
    left: 5%;
}

.contacts-container .center-content .news .desc {
    font-family: Open Sans, sans-serif;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 40px;
    font-size: 14px;
    line-height: 17px;
    border-bottom: 1px solid #d4d4d4;
}

.contacts-container .center-content .news .data {
    padding: 5px 0;
    padding-right: 10px;
    color: #929292;
    text-align: right;
}

.center-content .pagination-container {
    /*background: #ebebeb;*/
    padding-left: 10px;
}

.center-content .pagination {
    font-family: Open Sans, sans-serif;
    font-weight: 500;
    width: 100%;
    height: 40px;
    background: #ebebeb;
}

.center-content .pagination .number {
    cursor: pointer;
    padding-top: 10px;
    /*margin: 0 10px;*/
}

.center-content .pagination .number:hover {
    color: #e77140;
}

.center-content .pagination .active {
    color: #e77140;
    border-bottom: 2px solid #e55e26;
}

.center-content .pagination .arrow-left {
    background: url(../img/style/pagination-left.png) no-repeat center;
    cursor: pointer;
}

.center-content .pagination .arrow-right {
    background: url(../img/style/pagination-right.png) no-repeat center;
    cursor: pointer;
}

.center-content .pagination div {
    height: 40px;
    float: left;
    width: 7.14%;
    text-align: center;
}

/*NEWS END*/

/*ABOUT*/

/*.center-content .about{
	display: inline-block;
}*/

.center-content .about .doctor {
    padding-left: 0;
}

.center-content .about .about-text .title {
    font-family: $fontcuprum;
    font-weight: 700;
    font-size: 24px;
}

.center-content .about-main-text {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
}

.center-content .about-main-text .image {
    text-align: center;
    float: right;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.center-content .youtube {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.center-content .to-doctors-about {
    padding-left: 0;
    margin-bottom: 0 !important;
    margin-top: 40px;
}

.center-content .to-doctors-about .personal-doctor .doctor-name span {
    display: block;
    float: left;
}

.center-content .to-doctors-about .personal-doctor .doctor-name .span-cat {
    font-size: 14px;
    float: right;
    padding-right: 20px;
}

.center-content .to-doctors-about .personal-doctor {
    width: 100% !important;
    border-bottom: 1px solid #ebebeb;
}

.center-content .to-doctors-about .doctor-header {
    height: 40px;
    border-radius: 70px 0 0 30px;
}

.center-content .to-doctors-about .personal-doctor .image {
    padding-top: 30px !important;
}

.center-content .equip {
    margin-bottom: 40px;
}

.center-content .media {
    margin-bottom: 40px;
    overflow: visible;
    position: relative;
    padding-top: 30px;
    border-top: 1px solid #ebebeb;
}

.center-content .media .swiper-button-next {
    background: url(../img/style/media-arrow-right.png) no-repeat center;
    top: 60%;
    right: -25px;
}

.center-content .media .swiper-button-prev {
    background: url(../img/style/media-arrow-left.png) no-repeat center;
    top: 60%;
    left: -30px;
}

.center-content .media .swiper-container {
    width: inherit;
    height: 140px;
    margin: 20px auto;
}

.center-content .media .swiper-container iframe {
    width: 100%;
    height: 100%;
}

.center-content .media .swiper-slide {
    width: 30% !important;
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.center-content .media-text {
    line-height: 20px;
    font-size: 15px;
}

.center-content .pagination .show-all {
    text-align: center;
    padding-top: 10px;
    font-size: 13px;
    display: inline-block;
    color: #fff;
    background: #3b434d;
    width: 20%;
    height: 100%;
    float: right;
}

.center-content .pagination .show-all:hover {
    text-decoration: none;
    background: #e65e26;
}

.center-content .pagination .show-all:focus {
    text-decoration: none;
}

.center-content .documents {
    font-family: Open Sans, sans-serif;
    color: #3b434d;
    background: #ebebeb;
}

.center-content .documents .row {
    margin-right: 0;
    margin-left: 0;
}

.center-content .documents .doc-item {
    width: 20%;
    float: left;
    padding: 5px;
}

.center-content .documents .year {
    width: 8%;
}

.center-content .documents .doc-name {
    color: #004d7b;
    width: 22%;
}

.center-content .documents .doc-data {
    width: 14%;
}

.center-content .documents .doc-desc {
    width: 25%;
}

.center-content .documents .doc-org {
    width: 25%;
}

/*ABOUT END*/

/*SERVICES*/
.service-text {
    font-family: $fontcuprum;
}

.service-title {
    font-family: $fontcuprum;
    font-weight: 600;
    font-size: 26px;
    margin: 30px 0;
}

.service-item {
    font-family: $fontcuprum;
    color: #404040;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    width: 100%;
    display: inline-block;
}

.service-row {
    display: inline-block;
    width: 100%;
    padding: 4px 5px;
}

.service-row:nth-child(even) {
    background: #ebebeb;
}

.service-item .service-unit {
    width: 11%;
    float: left;
}

.service-item .service-unit:nth-child(1) {
    width: 9%;
}

.service-item .service-unit:nth-child(2) {
    width: 50%;
}

.service-item .service-unit:nth-child(3) {
    width: 11%;
}

.service-item .service-unit:nth-child(4) {
    width: 9%;
    text-align: center;
}

.service-item .service-unit:nth-child(5) {
    width: 9%;
    text-align: center;
}

.service-more {
    display: none;
    text-align: right;
    margin-top: 10px;
}

.service-more a {
    font-size: 14px;
    color: #929292;
}

.service-more:last-child {
    margin-bottom: 60px;
}

/*SERVICES END*/

/*TODAY*/
.today-page {
    width: 100%;
    margin-top: 25px;
    padding-left: 0px;
    display: inline-block;
}

.today-page .today-item .head {
    background: #929292;
    padding: 12px 5px;
    font-size: 13px;
    font-family: $fontcuprum;
    text-align: right;
    height: 40px;
    color: #fff;
    border-radius: 10px 0 0 0;
}

.today-page .today-item .head-blue {
    background: #5597d1;
}

.today-page .today-item .head .date {
    float: left;
    display: block;
}

.today-page .today-item .head .name {
    float: right;
    display: block;
}

.today-page .today-item {
    padding-right: 8px;
    padding-left: 8px;
    margin-bottom: 20px;
}

.today-page .image {
    position: relative;
    margin-top: 10px;
}

.today-page .image img {
    display: block;
    width: 200px;
    margin: 0 auto;
}

.today-page .logo {
    position: absolute;
    top: 0;
    font-family: $fontcuprum;
    right: 15px;
    width: 60px;
    height: 60px;
}

.today-page .logo img {
    width: 60px;
    height: 60px;
}

.today-page .free {
    position: absolute;
    padding-top: 5px;
    padding-left: 7px;
    top: 60px;
    left: -5px;
    font-family: $fontcuprum;
    color: #fff;
    width: 200px;
    height: 40px;
    background: url(../img/style/free-bg.png) no-repeat;
}

.today-page .desc {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: $fontcuprum;
    padding-left: 5px;
    font-size: 14px;
}

.today-page .org {
    font-family: $fontcuprum;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #ebebeb;
    padding-top: 5px;
    color: #004d7b;
}

.today-page .adress {
    margin-top: 5px;
    font-family: $fontcuprum;
    font-size: 14px;
    padding: 10px 0;
    background: #ebebeb;
    color: #929292;
    text-align: center;
}

.pagination-mobile {
    display: none;
}

/*TODAY END*/
/*PATIENT*/

.min-title {
    margin-bottom: 20px;
    font-family: $fontcuprum;
    font-size: 20px;
    font-weight: 700;
}

.patients-text {
    font-family: $fontcuprum;
    line-height: 22px;
    margin-bottom: 20px;
}

/*PATIENT END*/

/*PATIENTS*/

.left-side .today {
    padding-left: 0;

}

.left-side .today .today-item {
    width: 100%;
}

/*PATIENTS END*/
/*VACANCIES*/

.vacancy .vacancy-header {
    font-family: $fontcuprum;
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 10px;
    background: #d7d7d7;
    width: 100%;
}

.vacancy-wrap {
    display: inline-block;
    margin-bottom: 15px;
}

.vacancy .vacancy-header .name {
    display: inline-block;
    font-family: $fontcuprum;
    font-weight: bold;
    width: 60%;
    float: left;
    font-size: 18px;
}

.vacancy .vacancy-header .date {
    padding-top: 5px;
    height: 20px;
    width: 40%;
    font-size: 13px;
    color: #929292;
    text-align: right;
    float: left;
}

.vacancy .vacancy-data {
    margin-bottom: 15px;
    padding-left: 0;
}

.vacancy-data .org .text {
    font-size: 14px;
    font-family: $fontcuprum;
    color: #929292;
}

.vacancy-data .org .org-name {
    font-size: 18px;
    font-family: $fontcuprum;
    font-weight: 400;
    color: #004d7b;
    margin-bottom: 15px;
}

.vacancy .vacancy-table {
    display: inline-block;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.vacancy .vacancy-table .vacancy-row {
    width: 100%;
    display: inline-block;
    padding: 5px 10px;
}

.vacancy .vacancy-table .vacancy-row:nth-child(even) {
    background: #ebebeb;
}

.vacancy .vacancy-table .vacancy-row .name {
    width: 50%;
    float: left;
}

.vacancy .vacancy-table .vacancy-row .data {
    width: 50%;
    float: left;
    text-align: left;
}

.vacancy .contact {
    font-family: $fontcuprum;
    color: #929292;
    font-size: 14px;
}

.vacancy .contacts .otd a {
    font-size: 17px;
    color: #115984;
}

.vacancy .value {
    font-size: 16px;
    margin-bottom: 5px;
}

.vacancy .vacancy-contacts {
    padding-left: 0;
}

.vacancy .contacts .value {
    color: #004d7b;
    font-size: 16px;
    font-family: $fontcuprum;
}

.mini-title-2 {
    font-family: $fontcuprum;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.vacancy-text {
    font-family: Open Sans;
    margin-bottom: 40px;
}

/*VACANCIES END*/
/*UNITS*/
.content-left .unit-clinics {
    margin-top: 0;
}

.soc .contact {
    font-family: $fontcuprum;
    color: #929292;
    font-size: 14px;
}

.soc .value {
    font-family: $fontcuprum;
    font-size: 16px;
    margin-bottom: 5px;
}

.under-title .soc {
    position: static;
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    margin-top: 0;
    margin-bottom: 20px;
}

.content .more {
    margin-bottom: 10px;
}

.container .content .unit-clinics {
    display: block;
}

.container .importants-unit {
    display: block;
}

/*UNITS END*/

/*CONTROLS-ORG-PAGE*/
.control-org {
    width: 100%;
    margin-bottom: 40px;
    display: inline-block;
    border: 1px solid #ebebeb;
}

.control-org .col-lg-4 {
    height: 100%;
    padding-right: 0;
}

.control-org .col-md-3:first-child {
    padding-left: 0;
}

.control-org .col-md-4:last-child {
    padding-right: 15px;
}

.control-org .col-md-4:last-child .subtext {
    text-align: center;
}

.control-org .control-org-header {
    display: block;
    width: 100%;
    color: #000;
    margin-bottom: 10px;
    text-decoration: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 10px;
    font-family: $fontcuprum;
    background: #ebebeb;
}

.control-org .control-org-header:hover {
    background: #004d7b;
    color: #fff;
}

.control-org .image {
    text-align: center;
    margin-bottom: 10px;
}

.control-org .value {
    font-family: $fontcuprum;
    margin-bottom: 5px;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.control-org .work-time .mini-title {
    font-size: 14px;
    font-family: $fontcuprum;
    color: #929292;
}

.control-org .work-time .text {
    margin-top: 2px;
    font-size: 18px;
    font-family: $fontcuprum;
    font-weight: bold;
}

.control-org .subtext {
    font-size: 14px;
    font-family: $fontcuprum;
    color: #929292;
    line-height: 16px;
}

.control-org .howtoget_button {
    font-family: $fontcuprum;
    font-size: 14px;
    display: block;
    cursor: pointer;
    padding: 5px 0;
    text-align: center;
    text-decoration: underline;
    color: #929292;
    background: #ebebeb;
    margin: 10px 0;
}

.howtoget_button:hover {
    background: #004d7b;
    color: #fff;
}

.control-org .phone {
    font-family: $fontcuprum;
    font-weight: 600;
    font-size: 22px;
    padding: 7px 0;
    color: #004d7b;
    text-align: center;
}

/*CONTROLS-ORG-PAGE END*/
/*UNIT*/
.control-org-unit {
    border: none;
    margin-bottom: 0;
}

.control-org-unit .subtext {
    text-align: center;
}

.control-org-unit .all-phones {
    font-family: $fontcuprum;
    margin-bottom: 5px;
    color: #929292;
    display: inline-block;
    text-decoration: underline;
}

.control-org-unit .all-phones img {
    margin-left: 5px;
}

.control-org-unit .contact {
    font-family: $fontcuprum;
    color: #929292;
}

.control-org-unit .col-md-4:last-child {
    padding-right: 0;
}

.control-org-unit .personal-doctor {
    width: 100%;
    display: inline-block;
    color: #000;
    padding: 0;
    text-decoration: none;
    margin-bottom: 40px;
}

.control-org-unit .personal-doctor .doctor-type {
    font-size: 14px;
    font-family: $fontcuprum;
    color: #929292;
}

.control-org-unit .personal-doctor .doctor-header {
    display: inline-block;
    width: 100%;
    background: #ebebeb;
    border-radius: 30px 0 0 30px;
}

.control-org-unit .personal-doctor .doctor-image {
    float: left;
    border-radius: 50%;
    overflow: hidden;
}

.control-org-unit .personal-doctor .doctor-name {
    padding-top: 10px;
    padding-left: 65px;
    font-family: $fontcuprum;
    color: #004d7b;
    font-size: 18px;
    line-height: 18px;
}

.control-org-unit .personal-doctor .doctor-category .image {
    width: 13%;
    float: left;
    padding-top: 70px;
}

.control-org-unit .personal-doctor .doctor-category .text {
    padding-top: 10px;
    width: 87%;
    float: left;
}

.control-org-unit .personal-doctor .doctor-category .text .category {
    color: #929292;
    margin-bottom: 10px;
}

.control-org-unit .personal-doctor .doctor-category .text .otdels {
    color: #004d7b;
    font-family: Open Sans, sans-serif;
}

.control-org-unit .personal-doctor .contacts {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    background: #ebebeb;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.control-org-unit .personal-doctor .contact {
    color: #929292;
    font-size: 14px;
    font-family: $fontcuprum;
}

.control-org-unit .personal-doctor .value {
    font-size: 16px;
    margin-bottom: 5px;
    font-family: $fontcuprum;
}

.control-org-unit .personal-doctor .value a {
    font-size: 15px;
}

.control-org-unit .personal-doctor .priem {
    margin-top: 10px;
    font-weight: 700;
    font-size: 16px;
    font-family: $fontcuprum;

}

.center-content .more {
    text-align: right;
    margin-top: 10px;
}

.center-content .more a {
    font-family: $fontcuprum;
    font-size: 14px;
    color: #929292;
}

.center-content .youtube-unit {
    display: none;
}

.control-org-unit .soc {
    margin-top: 40px;
    position: static;
}

.documents-unit {
    margin-bottom: 30px;
}

/*UNIT END*/
/*FAQ*/

.qa {
    padding: 10px 10px;
    width: 100%;
    margin-bottom: 20px;
    font-family: $fontcuprum;

}

.qa .name {
    font-size: 16px;
    font-weight: 600;
    width: 50%;
    float: left;
}

.qa .date {
    font-size: 16px;
    text-align: right;
    width: 50%;
    color: #929292;
    float: left;
}

.qa .text {
    margin-top: 25px;
    font-family: Open Sans;
}

.question {
    background: #d7d7d7;
}

.answer {
    margin-left: 2%;
    width: 98%;
    border: 2px solid #d7d7d7;
    padding-top: 10px;
    position: relative;
    z-index: 0;
    background: #fff;
    color: #000;
}

.answer::after, .answer::before {
    content: '';
    position: absolute;
    background: #fff;
    border-bottom: 2px solid #d7d7d7;
    border-left: 2px solid #d7d7d7;
    left: 20px;
    top: -12px;
    width: 20px;
    height: 20px;
    z-index: -1;
    transform: rotate(45deg);
    -webkit-transform: rotate(135deg);
}

.answer::before {
    z-index: 1;
}

/*FAQ END*/

.pegi {
    max-width: 40px;
}

.go-top-link {
    width: 33px;
    height: 33px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: none;
    background: url('../img/go-top-icon.png');
    cursor: pointer;
}


.slide-fancybox-video {
    position: relative;

    &:before {
        display: block;
        content: '';
        position: absolute;
        background: rgba(50, 4, 4, 0.8);
        height: 50px;
        width: 80px;
        top: 50%;
        left: 50%;
        margin-left: -40px;
        margin-top: -25px;
        border-radius: 5px;
        z-index: 2;
    }

    &:hover:before {
        background: #bd0505;
    }

    &:after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 30px solid #ffffff;
        margin-left: -15px;
        margin-top: -15px;
        z-index: 3;
    }
}

a[href^="https://metrika.yandex.ru"] {
    position: absolute;
    bottom: 10px;
    right: 10px;
}