.menu__bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    padding: 0 50px;
}

.menu__soc {
    position: static;
    display: flex;
    z-index: 3;
    margin-bottom: 8px;
}

.menu__inner {
    height: 100%

}


.menu-bottom__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 48px;
}

.menu__contacts a,
.menu__address,
.menu__copy {
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #FFFFFF;
}

.menu__copy,
.menu__contacts {
    margin-left: auto;
}

.menu__address {
    margin-left: 100px;
}


.menu--black img.menu__logo-bl {
    opacity: 0;
}

.menu--black img.menu__logo-wt {
    opacity: 1;
}

.menu--black .menu__close:after {
    opacity: 0;
}

.menu--black .menu__close:before {
    opacity: 1;
}

.menu--black .menu-soc__item:before {
    opacity: 1;
}

.menu--black .menu-soc__item:after {
    opacity: 0;
}

.menu--black .menu-list__item span {
    -webkit-text-stroke: transparent;
}

.menu--black .menu-list__item:hover span {
    color: #fff;
}


@media (min-width: 767px) {
    #glass {
        overflow: hidden;
        position: absolute;
        background: linear-gradient(100.38deg, #FF0038 3.85%, #E8007D 97.86%);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;

        filter: blur(6vh);
    }

    .bubble {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
    }

    .bubble:nth-child(1) {
        background-image: url(images/b1.svg);
        width: 30%;
        bottom: -12%;
        height: 87%;
        right: 29%;
        z-index: 3;
    }

    .bubble:nth-child(2) {
        background-image: url(images/b2.svg);
        width: 39%;
        bottom: -28%;
        height: 72%;
        right: 9%;
        opacity: .8;
        z-index: 6;
    }

    .bubble:nth-child(3) {
        background-image: url(images/b3.svg);
        width: 25%;
        bottom: 25%;
        height: 50%;
        right: -10%;
        z-index: 6;
    }

    .bubble:nth-child(4) {
        background-image: url(images/b4.svg);
        background-image: url(images/b2.svg);
        width: 30%;
        bottom: 74%;
        height: 50%;
        right: -10%;
        z-index: 6;
    }

    .bubble:nth-child(5) {
        background-image: url(images/b5.svg);
        right: -4%;
        top: -8%;
        width: 50%;
        height: 80%;
        z-index: 3;
    }

    .bubble:nth-child(6) {
        background-image: url(images/b6.svg);
        width: 61%;
        bottom: 53%;
        height: 61%;
        right: 6%;
        z-index: 2;
    }

    .menu--active #glass .bubble:nth-child(1),
    .menu--animation-process #glass .bubble:nth-child(1) {
        animation-name: b1;
        animation-duration: 20s;
        animation-duration: 10s;
    }

    .menu--active #glass .bubble:nth-child(2),
    .menu--animation-process #glass .bubble:nth-child(2) {
        animation-name: b2;
        animation-duration: 22s;
        animation-duration: 14s;
    }

    .menu--active #glass .bubble:nth-child(3),
    .menu--animation-process #glass .bubble:nth-child(3) {
        animation-name: b3;
        animation-duration: 24s;
        animation-duration: 18s;
    }

    .menu--active #glass .bubble:nth-child(4),
    .menu--animation-process #glass .bubble:nth-child(4) {
        animation-name: b4;
        animation-duration: 26s;
        animation-duration: 20s;
    }

    .menu--active #glass .bubble:nth-child(5),
    .menu--animation-process #glass .bubble:nth-child(5) {
        animation-name: b5;
        animation-duration: 28s;
        animation-duration: 22s;
    }

    .menu--active #glass .bubble:nth-child(6),
    .menu--animation-process #glass .bubble:nth-child(6) {
        animation-name: b6;
        animation-duration: 30s;
        animation-duration: 26s;
    }
}


@keyframes b1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(-20%, 50%) rotate(45deg) scale(1.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
}

@keyframes b2 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(30%, -30%) rotate(120deg) scale(1.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
}

@keyframes b3 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(-20%, 50%) rotate(120deg) scale(1.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);

    }
}

@keyframes b4 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(20%, 80%) rotate(120deg) scale(.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
}

@keyframes b5 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(-20%, 40%) rotate(120deg) scale(1.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
}

@keyframes b6 {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
    50% {
        transform: translate(20%, 20%) rotate(120deg) scale(1.5);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1.0);
    }
}


@media (min-width: 767px) {
    #glass2 {
        overflow: hidden;
        position: absolute;
        background: linear-gradient(100.38deg, #FF0038 3.85%, #E8007D 97.86%);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        filter: blur(6vh);
    }

    .bubble_n {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        will-change: transform, filter

    }

    .bubble_n svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .bubble_n:nth-child(1) {
        width: 30%;
        bottom: -12%;
        height: 87%;
        right: 29%;
        z-index: 3;
    }

    .bubble_n:nth-child(2) {
        width: 39%;
        bottom: -28%;
        height: 72%;
        right: 9%;
        opacity: .8;
        z-index: 6;
        transform: rotate(110deg)
    }

    .bubble_n:nth-child(3) {
        width: 25%;
        bottom: 25%;
        height: 50%;
        right: -10%;
        z-index: 6;
    }

    .bubble_n:nth-child(4) {
        width: 30%;
        bottom: 74%;
        height: 50%;
        right: -10%;
        z-index: 6;
    }

    .bubble_n:nth-child(5) {
        right: -4%;
        top: -8%;
        width: 50%;
        height: 80%;
        z-index: 3;
        transform: rotate(45deg)
    }

    .bubble_n:nth-child(6) {
        width: 61%;
        bottom: 53%;
        height: 61%;
        right: 6%;
        z-index: 2;
    }
}


.menu-bq a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
}


.menu__list {
    width: 300px;
    padding: 0;
}

.menu__main {
    /*max-width: 100%;*/
    padding: 120px 0px 120px 0px;
}

.menu__inner {
    display: block;
}

.menu__list-sub {
    width: 300px;
}

.menu__list-sub a {
    display: block;
}


.menu-bq__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

}


.menu-bq {
    position: relative;
    width: calc(400px + 400px + 400px);
}

.menu-bq a {
    transition: transform .3s;
    font-weight: 500;
    font-size: 27px;
    line-height: 40px;
    margin-bottom: 15px;
}

.menu-bq li:hover > .menu-bq__top > a,
.menu-bq li:hover > a {
    transform: translateX(15px);
}

.menu-bq ul {
    position: absolute;
    top: 0;
    left: 0;
}

.menu-bq li {
    list-style-type: none;
}

.menu-bq > ul > li {
    margin-bottom: 20px;
    overflow: hidden;
}

.menu-bq > ul {
    width: 400px;
    position: static;
    margin-bottom: 0;
}

.menu-bq > ul > li > ul {
    left: 400px;
    width: 400px;
    overflow-x: auto;
    max-height: 100%
}

.menu-bq > ul > li > ul > li > ul {
    left: 400px;
    width: 400px;
}

.menu-bq > ul > li > a,
.menu-bq > ul > li > .menu-bq__top > a {
    font-weight: 600;
    font-size: 44px;
    line-height: 55px;
}

.menu-bq > ul > li > ul > li > ul a {
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
}

.menu-bq > ul > li > ul {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #FD0140 transparent;
    scrollbar-width: thin
}

.menu-bq > ul > li > ul::-webkit-scrollbar {
    width: 3px;
    padding-right: 10px
}

.menu-bq > ul > li > ul::-webkit-scrollbar-track {
    background: transparent
}

.menu-bq > ul > li > ul::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #FD0140;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s
}


.menu-bq ul ul {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    transform: translateX(-15px);
}

.menu-bq ul .menu-bq__li--active > ul {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0px);
}

.menu-bq__top {
    position: relative;
    padding-right: 60px;
}

.menu-bq__arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 30px;
    top: calc(50% - 10px);
    transition: transform .3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /*background-image: url(../images/r-arrow-white.svg);*/
}

.menu-bq__top--active .menu-bq__arrow {
    transform: rotate(90deg);
}

.menu-bq li.all-serv {
    margin-top: 50px
}

.menu-bq li.all-serv a {
    display: inline-block;
    padding-right: 60px;
    position: relative;
}

.menu-bq li.all-serv a:before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    right: 30px;
    top: calc(50% - 10px);
    transition: transform .3s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(images/r-arrow-white.svg);
    transform: rotate(-45deg);
}

.menu-bq__contacts-img {
    position: absolute;
    transition-delay: .3s;
pointer-events: none;
}

.menu .menu-bq__contacts-img--1 {
    width: 240px;
    right: 450px;
    top: -70px;
    z-index: 1;
    transform: translate(-20%, -20%);
    opacity: 0;
    transition: transform .6s, opacity .6s;

}

.menu .menu-bq__contacts-img--2 {
    width: 600px;
    right: 0;
    top: 0;
    transform: translate(0%, -20%);
    opacity: 0;
    transition: transform .6s, opacity .6s;
}

.menu-bq__contacts--active .menu-bq__contacts-img {
    opacity: 1;
    transform: translate(0%, 0%);
}

.menu__inner {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #FD0140 transparent;
    scrollbar-width: thin
}

.menu__inner::-webkit-scrollbar {
    width: 3px;
    padding-right: 10px
}

.menu__inner::-webkit-scrollbar-track {
    background: transparent
}

.menu__inner::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #FD0140;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s
}


@media (max-width: 1700px) {
    .menu__main {
        padding: 120px 0px 120px 0px;
    }

    .menu-bq a {
        font-size: 22px;
        line-height: 35px;
    }

    .menu-bq > ul > li > a,
    .menu-bq > ul > li > .menu-bq__top > a {
        font-size: 39px;
        line-height: 50px;
    }

    .menu-bq > ul > li > ul > li > ul a {
        font-size: 19px;
        line-height: 24px;
    }

    .menu-bq > ul {
        width: 300px
    }

    .menu-bq > ul > li > ul,
    .menu-bq > ul > li > ul > li > ul {
        left: 300px;
        width: 300px;
    }

    .menu-bq {
        width: calc(280px + 280px + 280px);
    }

    .menu .menu-bq__contacts-img--2 {
        width: 440px;
    }

    .menu .menu-bq__contacts-img--1 {
        width: 180px;
        right: 340px;
    }
}


@media (max-width: 1229px) {
    .menu-bq a {
        margin-bottom: 0;
    }

    .menu-bq ul ul a {
        margin-bottom: 10px;
    }

    .menu__main {
        padding: 100px 50px 120px 50px;
        max-width: 100%;
    }

    .menu-bq {
        width: 100%;
    }

    .menu__bottom {
        padding: 0px 50px;
    }
}

@media (max-width: 991px) {
    .menu .menu-bq__contacts-img {
        display: none !important
    }

    .menu__soc,
    .menu__contacts,
    .menu__address,
    .menu__copy {
        width: 50%;
        margin-left: 0;
        padding-top: 10px
    }

    .menu-bottom__wrap {
        align-items: center;
        padding-bottom: 50px
    }

    .menu__inner {
        height: calc(100% - 60px);

    }

    .menu__main {
        padding: 100px 15px 120px 15px;
    }

    .menu__bottom {
        padding: 0px 15px;
    }


    .menu-bq ul {
        position: static;
        width: 100% !important
    }

    .menu-bq ul ul {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: initial;
        display: none
    }


    .menu-bq > ul > li {
        margin-bottom: 10px
    }

    .menu-bq__arrow {
        background-image: url(images/plus-white.svg);
        width: 24px;
        height: 24px;
        right: 30px;
        top: calc(50% - 12px);
    }

    .menu-bq__top--active .menu-bq__arrow {
        transform: rotate(45deg);
    }

    .menu-bq li:hover > .menu-bq__top > a, .menu-bq li:hover > a {
        transform: none;
    }

    .menu-bq__wrap {
        display: block
    }

    .menu__fones {
        display: none;
    }
}

@media (max-width: 767px) {
    .menu__main {
        height: 100vh;
    }

    /*
    header {
        display: block
    }*/
    .header__mail, .header__tel {
        display: none
    }

    .header__burger {
        margin-left: auto
    }

    .menu__main {
        padding-bottom: 140px
    }

    .menu-bottom__wrap {
        padding-bottom: 80px
    }

    .menu__inner {
        width: calc(100% + 15px);
        margin-right: -15px;
    }

    .menu-bq__top {
        padding-right: 30px;
    }

    .menu-bq__arrow {
        right: 15px;
    }
}

@media (max-width: 767px) {
    .menu-bottom__wrap {
        align-items: flex-end;
    }

    .menu__address,
    .menu__copy {
        display: none
    }

    .menu__inner {
        height: 100%;
    }

    .menu__contacts {
        text-align: right;
    }

    .menu__soc {
        padding-top: 0;
        margin-top: -3px
    }

}


#glass3 {
    overflow: hidden;
    position: absolute;
    background: linear-gradient(100.38deg, #FF0038 3.85%, #E8007D 97.86%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    filter: blur(6vh);
}

#glass3 #canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

canvas#canvas {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(0deg) scale(2) translateY(-0%);
    --gradient-color-1: #FD0140;
    --gradient-color-2: #A234DA;
    --gradient-color-3: #FF825A;
    --gradient-color-4: #7966FF;
    --gradient-speed: 0.000006;
}


.menu-services {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 130px);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    transform: translateX(-15px);
    padding: 200px 120px 0;
}

.menu-services.is-active {
    opacity: 1;
    transform: translateX(0px);
    pointer-events: auto;
}

.is-services-active .menu-bq > ul > li > *:not(.menu-services) {
    transition: opacity .3s;
}


.is-services-active .menu__inner {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.is-services-active .menu__inner::-webkit-scrollbar {
    display: none;
}

.is-services-active .menu-bq > ul > li > *:not(.menu-services) {
    opacity: 0;
    pointer-events: none;
}

.is-services-active .menu-bq__top .menu-bq__arrow {
    opacity: 0;
    pointer-events: none;
}

.menu-list__item--services .menu-bq__top .menu-bq__arrow {
    display: none;
}

.menu-bq > ul > li.menu-list__item--services > ul {
    display: none !important;
}

.menu-services__wrap {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

}

.menu-services__list {
    display: flex;
    flex-wrap: wrap;
}

.menu-services__col {
    width: 50%;
    max-width: 800px;
    padding-right: 20px;
}

.menu-services__close {
    width: 58px;
    height: 58px;
    background: #fff url(/local/templates/main/images/svg/ico-arr-previous-black.svg) no-repeat center;
    background-size: 60%;
    position: absolute;
    left: 0;
    top: 196px;
}

.menu-services-item__links {
    display: flex;
    flex-wrap: wrap;
}

.menu-services__item {
    margin-bottom: 40px;
}

.menu-services-item__top {
    position: relative;
}

.menu-services-item__top .menu-bq__arrow {
    display: none;
}

.menu-bq a.menu-services__title {
    font-weight: 600;
    font-size: 70px;
    width: 100%;
    margin-bottom: 78px;
}

.menu-bq .menu-services-item__links a {
    padding: 12px 20px;
    border-radius: 40px;
    border: 1px solid #fff;
    margin: 0 6px 6px 0;
    line-height: 1;
    font-size: 17px;
    transition: background-color .3s, color .3s;
}

.menu-bq a.menu-services-item__title {
    font-weight: 500;
    font-size: 39px;
    position: relative;
    transition: padding-left .3s;
    line-height: 1.2;
    margin-bottom: 18px;
}

.menu-bq a.menu-services-item__title:before {
    content: '';
    position: absolute;
    left: 0;

    top: 7px;
    transform: scaleX(-1);
    width: 30px;
    height: 30px;
    background: url(/local/templates/main/images/svg/ico-arr-previous.svg) no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity .3s;
}

@media (any-hover: hover),(hover: hover) and (pointer: fine) {
    .menu-bq .menu-services-item__links a:hover {
        background-color: #fff;
        color: #FA0045;
    }

    .menu-bq a.menu-services-item__title:hover {
        padding-left: 50px;
    }

    .menu-bq a.menu-services-item__title:hover:before {
        opacity: 1;
    }
}

@media (max-height: 900px) and (min-width: 992px) {
    .menu-services {
        padding-top: 110px !important;
    }

    .menu-services__close {
        top: 100px !important;
    }
}


@media (max-width: 1700px) {
    .menu-services {
        padding: 200px 90px 0;
    }


    .menu-bq a.menu-services__title {
        font-size: 50px;
        width: 100%;
        margin-bottom: 40px;
    }

    .menu-services__close {
        top: 190px
    }


    .menu-bq a.menu-services-item__title {
        font-size: 30px;
    }

    .menu-bq a.menu-services-item__title:before {
        top: 5px;
    }
}
@media (min-width: 992px) {
    .menu-services-item__bottom
    {
        display: block!important;
    }

}
@media (max-width: 991px) {
    .menu-services {
        padding-top: 110px;
        height: calc(100% - 180px);
    }
    .menu-services__col {
        width: 100%;
    }

    .menu-services__close {
        top: 100px;
    }

    .menu-bq a {
        font-size: 16px;
    }

}

@media (max-width: 767px) {
    .menu-services {
        height: calc(100% - 140px);
        padding: 110px 15px 0 50px;
        text-align: left;
    }

    .menu-bq a.menu-services-item__title {
        font-size: 25px;
    }

    .menu-bq a.menu-services__title {
        padding-left: 0;
        font-size: 39px;
    }

    .menu-services__close {
        width: 38px;
        height: 38px;
        top: 110px;
    }

    .menu-bq a {
        font-size: 14px;
    }

    .menu-services__item {
        margin-bottom: 25px;
    }
    .menu-services-item__top
    {
        padding-right: 50px;
    }
    .menu-services-item__top .menu-bq__arrow {
        display: block;
    }
    .menu-services-item__top--active .menu-bq__arrow {
        transform: rotate(45deg);
    }

    .menu-services-item__bottom{
        display: none;
    }


}