.button__switch,
.button__switch--black,
.button__switch--white {
    margin: 0 auto;
    pointer-events: all;
    cursor: pointer
}

.button__main,
.button__main-- {
    display: flex;
    align-items: center;
    font-size: 16px
}

@keyframes clickbg {
    50% {
        background-color: #fff
    }
}

@keyframes clickbgop {
    0%,
    100% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

@keyframes click {
    0%,
    100% {
        left: 3px
    }
    50% {
        left: 32px;
        background-color: #E737FF
    }
}

@keyframes click-dark {
    0%,
    100% {
        left: 3px
    }
    50% {
        left: 32px;
        background-color: #000
    }
}

.button__switch {
    width: 56px;
    height: 27px;
    display: flex;
    border-radius: 13px;
    position: relative;
    background-color: #fff;
    overflow: hidden
}

.button__switch span {
    background: linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.button__switch--white:before,
.button__switch:before {
    background-color: #fff;
    content: ' ';
    z-index: 3
}

.button__switch:before {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
    transition: transform .5s cubic-bezier(.99, .005, .065, 1), opacity .5s linear, background-color .5s linear
}

.button__main--:after,
.button__switch:after {
    width: calc(100% - 4px);
    height: calc(100% - 4px)
}

.button__switch:after {
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 14px;
    background-color: var(--main-bg-color)
}

.button__switch.click {
    animation: clickbg .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch.click span {
    animation: clickbgop .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch.click:before {
    animation: click .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch.anm {
    transition: background-color .5s linear
}

.button__switch.anm span {
    transition: opacity .5s linear
}

.button__switch.anm:before {
    transition: all .5s cubic-bezier(.62, -.005, .385, 1)
}

.button__switch.active span {
    opacity: 1
}

.button__switch.active:before {
    left: 33px;
    background-color: #E737FF
}

.button__switch--white {
    width: 56px;
    height: 27px;
    display: flex;
    border: 2px solid #fff;
    border-radius: 13px;
    position: relative;
    overflow: hidden
}

.button__switch--white:before {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 3px;
    transition: transform .5s cubic-bezier(.99, .005, .065, 1), opacity .5s linear, background-color .5s linear
}

.button__switch--white.click {
    animation: clickbg .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--white.click span {
    animation: clickbgop .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--white.click:before {
    animation: click-dark .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--white.anm {
    transition: background-color .5s linear
}

.button__switch--white.anm span {
    transition: opacity .5s linear
}

.button__switch--white.anm:before {
    transition: all .5s cubic-bezier(.62, -.005, .385, 1)
}

.button__switch--white.active span {
    opacity: 1
}

.button__switch--white.active:before {
    left: 33px;
    background-color: var(--main-bg-color)
}

.button__switch--black {
    width: 56px;
    height: 27px;
    display: flex;
    border: 2px solid #000;
    border-radius: 13px;
    position: relative;
    overflow: hidden
}

.button__switch--black:before {
    content: ' ';
    z-index: 3;
    width: 18px;
    height: 18px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 3px;
    transition: transform .5s cubic-bezier(.99, .005, .065, 1), opacity .5s linear, background-color .5s linear
}

.button__switch--black.click {
    animation: clickbg .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--black.click span {
    animation: clickbgop .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--black.click:before {
    animation: click-dark .5s cubic-bezier(.62, -.005, .385, 1) 1
}

.button__switch--black.anm {
    transition: background-color .5s linear
}

.button__switch--black.anm span {
    transition: opacity .5s linear
}

.button__switch--black.anm:before {
    transition: all .5s cubic-bezier(.62, -.005, .385, 1)
}

.button__switch--black.active span {
    opacity: 1
}

.button__switch--black.active:before {
    left: 33px;
    background-color: var(--main-bg-color)
}

.button__main-- {
    cursor: pointer;
    padding: 12px 32px;
    justify-content: center;
    background: linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%);
    position: relative;
    color: #FFF;
    font-style: normal;
    font-weight: 800;
    line-height: 1.7em;
    text-transform: uppercase;
    border-radius: 36px;
    overflow: hidden;
    transition: color .6s linear
}

.button__main-- span {
    position: relative;
    z-index: 2
}

.button__main--:after,
.button__main--:before {
    position: absolute;
    top: 50%;
    content: ' ';
    border-radius: 36px
}

.button__main--:after {
    left: 50%;
    background-color: var(--main-bg-color);
    transform: translate(-50%, -50%)
}

.button__main--:before {
    left: 50%;
    height: calc(100% - 20px);
    background: linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%);
    z-index: 2;
    transition: all .6s cubic-bezier(1, -.005, .005, .995), opacity .6s linear;
    width: 36px;
    transform: translate(-50%, -50%);
    opacity: 0
}

.button__main--:hover {
    color: var(--main-bg-color)
}

.button__main,
.button__main_spl {
    padding: 15px 32px 13px;
    color: #FFF;
    font-style: normal;
    line-height: 1em;
    cursor: pointer
}

.button__main--:hover:before {
    width: 100%;
    height: 100%;
    opacity: 1
}

.button__main {
    justify-content: center;
    position: relative;
    font-weight: 800;
    text-transform: uppercase;
    min-height: 46px
}

.button__main_spl,
.header__logoswitch span {
    display: flex;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase
}

.button__main span {
    position: relative;
    z-index: 2
}

.button__main:after,
.button__main:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%) border-box;
    border-radius: 36px;
    border: 1px solid transparent;
    transition: opacity .6s linear
}

.button__main:after,
.button__main:hover:before {
    opacity: 0;
    transition: opacity .3s linear
}

.button__main:after {
    background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, linear-gradient(91deg, #E737FF 1.32%, #752EFF 41.62%, #34B6FF 81.09%) border-box
}

.button__main:hover:after {
    opacity: 1;
    transition: opacity .6s linear
}

.button__main_spl {
    align-items: center;
    justify-content: center;
    position: relative;
    height: 46px;
    border-radius: 36px;
    border: 1px solid transparent;
    transition: none
}

.button__main_spl:after,
.button__main_spl:before,
.header__logoswitch .sw:after,
.header__logoswitch .sw:before {
    content: ' ';
    background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%) border-box;
    border-radius: 36px
}

@media (min-width:768px) {
    .button__main_spl {
        font-size: 16px
    }
}

.button__main_spl:after,
.button__main_spl:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    transition: opacity .6s linear
}

.button__main_spl:after,
.button__main_spl:hover:before {
    opacity: 0;
    transition: opacity .3s linear
}

.button__main_spl:after {
    background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, linear-gradient(91deg, #E737FF 1.32%, #752EFF 41.62%, #34B6FF 81.09%) border-box
}

.button__main_spl:hover:after {
    opacity: 1;
    transition: opacity .6s linear
}

.isWhite .button__main_spl:after,
.isWhite .button__main_spl:hover:before {
    opacity: 0;
    transition: all .3s linear
}

.button__main_spl span.spanbt {
    position: relative;
    z-index: 2
}

.isWhite .button__main_spl span.spanbt {
    color: #000
}

.isWhite .button__main_spl:after,
.isWhite .button__main_spl:before {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%) border-box
}

.isWhite .button__main_spl:after {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(91deg, #E737FF 1.32%, #752EFF 41.62%, #34B6FF 81.09%) border-box
}

.isWhite .button__main_spl:hover:after {
    opacity: 1;
    transition: all .6s linear
}

.button__home {
    color: #fff
}

@media (max-width:767px) {
    .button__main {
        padding: 9px 12px 7px;
        font-size: 11px;
        min-height: 22px
    }
    .button__switch {
        width: 50px;
        height: 26px
    }
    .button__switch.active:before {
        left: 28px
    }
}

.gradient__cd {
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none
}

.gradient,
.gradient img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0
}

@media (min-width:1024px) {
    .gradient__cd .gradient:nth-child(1) {
        animation: flow 5s linear infinite
    }
}

@keyframes flow {
    0%,
    100% {
        opacity: 50%
    }
    50% {
        opacity: 100%
    }
}

.gradient {
    height: 0
}

.gradient img {
    object-fit: contain;
    height: 100vh
}

.gradient-top-left img {
    object-position: left top
}

.gradient__sticky {
    position: sticky;
    top: 0
}

.gradient__sticky--st {
    height: 100vh;
    width: 0
}

.gradient__sticky--st .gradient {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: calc(100vw - 60px)
}

.gradient__sticky--st-r {
    height: 100vh;
    width: 0
}

.gradient__sticky--st-r .gradient {
    position: absolute;
    right: 0;
    left: initial;
    top: 0;
    height: 100vh;
    width: calc(100vw - 60px)
}

.gradient__sticky--st-r .gradient img {
    object-position: right top
}

.gradient-top-left-50 img {
    transform: translateY(-33vh);
    object-position: left top
}

.gradient-top-right img {
    object-position: right top
}

.gradient-center-left img {
    object-position: left top
}

.gradient-center-right img {
    object-position: right top
}

.gradient-bottom-left img {
    object-position: left top
}

.gradient-bottom-right img {
    object-position: right top
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    height: 126px;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 100;
    transition: all .3s ease-in-out;
    pointer-events: none
}

.header__container {
    padding: 0 37px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.isWhite:not(.opened) .header__logo .logo:before {
    opacity: 0
}

.isWhite:not(.opened) .header__logo .logo:after {
    opacity: 1
}

.header__logoswitch {
    position: relative;
    width: 56px;
    height: 26px;
    cursor: pointer;
    pointer-events: all;
    box-sizing: border-box
}

.header__logoswitch:before {
    content: ' ';
    position: absolute;
    left: -20px;
    top: -20px;
    z-index: 5;
    width: 70px;
    height: 50px
}

@media (max-width:767px) {
    .header__logoswitch:before {
        width: 100px;
        height: 70px
    }
}

.header__logoswitch .sw {
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    width: 54px;
    box-sizing: border-box
}

.header__logoswitch .sw:after,
.header__logoswitch .sw:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    transition: opacity .6s linear
}

.header__logoswitch .sw:after {
    background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, linear-gradient(91deg, #E737FF 1.32%, #752EFF 41.62%, #34B6FF 81.09%) border-box;
    opacity: 0;
    transition: opacity .3s linear
}

.header__logoswitch .dot {
    z-index: 3;
    width: 18px;
    height: 18px;
    background-color: #FFF;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
    transition: transform .5s cubic-bezier(.99, .005, .065, 1), opacity .5s linear, background-color .5s linear
}

.header__logoswitch .bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 26px;
    width: 56px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="26" viewBox="0 0 56 26" fill="none"><rect width="56" height="26" rx="13" fill="url(%23paint0_linear_477_5352)"/><defs><linearGradient id="paint0_linear_477_5352" x1="2.99194" y1="-7.18422" x2="49.6852" y2="6.78211" gradientUnits="userSpaceOnUse"><stop stop-color="%2334B6FF"/><stop offset="0.505208" stop-color="%23752EFF"/><stop offset="1" stop-color="%23E737FF"/></linearGradient></defs></svg>');
    transition: opacity .5s linear;
    opacity: 0
}

.header__logoswitch span {
    z-index: 5;
    position: absolute;
    left: 0;
    top: 1px;
    height: 26px;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .5s linear, color .5s linear
}

.loading .header__right,
[hidden],
template {
    display: none
}

.header__logoswitch.on span,
.isWhite .header__logoswitch span {
    color: #000
}

.isWhite .header__logoswitch .dot {
    background-color: #000
}

.isWhite .header__logoswitch .sw:after,
.isWhite .header__logoswitch .sw:before {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(91deg, #34B6FF 1.32%, #752EFF 41.62%, #E737FF 81.09%) border-box
}

.isWhite .header__logoswitch .sw:after {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(91deg, #E737FF 1.32%, #752EFF 41.62%, #34B6FF 81.09%) border-box
}

.header__talk,
.header__talk .bg {
    width: 154px;
    height: 51px;
    background-repeat: no-repeat
}

@media (min-width:768px) {
    .header__logoswitch.hover .dot {
        opacity: 0
    }
    .header__logoswitch.hover span {
        opacity: 1
    }
}

.header__logoswitch.on .dot {
    transform: translateX(30px);
    background-color: #000
}

.header__logoswitch.on .bg {
    opacity: 1
}

.header__talk {
    cursor: pointer;
    border-radius: 26px;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="154px" height="51px" viewBox="0 0 154 51" enable-background="new 0 0 154 51" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-209.9478" y1="147.9844" x2="-90.9748" y2="98.0944" gradientTransform="matrix(1 0 0 -1 214.3398 143.0391)"><stop offset="0" style="stop-color:%2334B6FF"/><stop offset="0.5052" style="stop-color:%23752EFF"/><stop offset="1" style="stop-color:%23E737FF"/></linearGradient><path fill="none" stroke="url(%23SVGID_1_)" d="M25.5,0.5h103c13.807,0,25,11.193,25,25l0,0c0,13.807-11.193,25-25,25h-103c-13.807,0-25-11.193-25-25l0,0C0.5,11.693,11.693,0.5,25.5,0.5z"/></svg>');
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    position: relative
}

.header__talk span {
    color: #fff;
    transition: color .5s linear;
    position: relative;
    z-index: 3
}

.header__talk .bg {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="154px" height="51px" viewBox="0 0 154 51" enable-background="new 0 0 154 51" xml:space="preserve"><g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-209.9414" y1="147.9824" x2="-90.9786" y2="98.0967" gradientTransform="matrix(1 0 0 -1 214.3398 143.0391)"><stop offset="0" style="stop-color:%2334B6FF"/><stop offset="0.5052" style="stop-color:%23752EFF"/><stop offset="1" style="stop-color:%23E737FF"/></linearGradient><path fill="url(%23SVGID_1_)" d="M128.5,51h-103C11.439,51,0,39.561,0,25.5S11.439,0,25.5,0h103C142.561,0,154,11.439,154,25.5S142.561,51,128.5,51z"/></g></svg>');
    transition: opacity .5s linear;
    opacity: 0;
    background-size: 100% 100%
}

.header__talk:hover span {
    color: #000
}

.header__talk:hover .bg {
    opacity: 1
}

.header.not-top {
    height: 94px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .9) 62%, rgba(0, 0, 0, 0) 100%)
}

.header.not-top.down {
    transform: translateY(-130px)
}

.header.not-top.isWhite {
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 62%, rgba(255, 255, 255, 0) 100%)
}

.services-in-view .header {
    visibility: hidden;
    pointer-events: none
}

@media (max-width:1100px) {
    .services-in-view .header__right {
        display: none;
        pointer-events: none
    }
    body.mt {
        cursor: pointer
    }
}

.loading .header {
    visibility: hidden
}

@media (max-width:767px) {
    .header,
    .header.not-top {
        height: 52px
    }
    .header.not-top.down {
        transform: translateY(-52px)
    }
    .header__container {
        padding: 0 20px
    }
    .header__logo .logo {
        width: 134px;
        height: 14px;
        margin-left: 16px
    }
    .header__logoswitch {
        width: 30px;
        height: 14px
    }
    .header__logoswitch .sw {
        width: 25px;
        height: 12px
    }
    .header__logoswitch .dot {
        width: 8px;
        height: 8px;
        left: 3px;
        top: 3px
    }
    .header__logoswitch .bg {
        height: 13px;
        width: 26px;
        background-size: cover;
        border-radius: 999px
    }
    .header__logoswitch span {
        display: none !important;
        height: 12px;
        font-size: 8px
    }
    .header__logoswitch.on .dot {
        transform: translateX(13px)
    }
    .header__right.active,
    .header__right.active-magnet {
        transform: translate(calc(-50vw + 25px), calc(50vh - 40px))
    }
}

.main-menu,
.main-menu__bg {
    width: 100%;
    height: 100%;
    top: 0
}

.layout {
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: var(--main-bg-color);
    margin-bottom: 168px
}

.layout-hp {
    margin-bottom: 0
}

@media (min-width:768px) {
    .layout {
        width: 100%
    }
}

.main-menu {
    position: fixed;
    left: 100%;
    opacity: 0;
    z-index: 90;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.main-menu__bg {
    position: absolute;
    left: 0;
    background-color: #000;
    opacity: 0;
    transition: opacity .3s linear;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 80% 100%;
    background-image: url(/wp-content/themes/scr/img/content/header-eclypse.svg)
}

ul.main-menu__items {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
    padding-top: 5%
}

ul.main-menu__items li {
    opacity: 0;
    transform: translateX(-100%);
    transition: all .5s cubic-bezier(.12, .38, .05, 1.18)
}

ul.main-menu__items li:nth-child(1) {
    transition-delay: .1s
}

ul.main-menu__items li:nth-child(2) {
    transition-delay: .2s
}

ul.main-menu__items li:nth-child(3) {
    transition-delay: .3s
}

ul.main-menu__items li:nth-child(4) {
    transition-delay: .4s
}

ul.main-menu__items li:nth-child(5) {
    transition-delay: .5s
}

ul.main-menu__items li:nth-child(6) {
    transition-delay: .6s
}

ul.main-menu__items li:nth-child(7) {
    transition-delay: .7s
}

ul.main-menu__items li:nth-child(8) {
    transition-delay: .8s
}

ul.main-menu__items li a {
    position: relative;
    display: inline-block;
    font-size: clamp(20px, 11vh, 100px);
    transform: translateX(-.2em);
    line-height: .88em
}

ul.main-menu__items li a span {
    margin-left: 50px ;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    line-height: .88em;
    text-transform: uppercase;
    transition: transform .4s cubic-bezier(.38, .485, .12, 1.005), opacity .3s linear;
    padding-right: .6em
}

ul.main-menu__items li a span.hover {
    transition: transform .4s cubic-bezier(.38, .485, .12, 1.005), opacity .4s linear;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    width: 130%;
    background: linear-gradient(91deg, #FFC225 4.34%, #FF6A29 48.14%, #FF4D14 92.85%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    line-height: .88em
}

ul.main-menu__items li a:hover span {
    transform: translateX(.6em);
    opacity: 0
}

ul.main-menu__items li a:hover span.hover {
    opacity: 1
}

ul.main-menu__items li:nth-child(3n+2) a span.hover {
    background: linear-gradient(91deg, #3FFFB5 4.51%, #2780FF 56.13%, #1D5CFF 91.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

ul.main-menu__items li:nth-child(3n+3) a span.hover {
    background: linear-gradient(94deg, #FFEA29 7.87%, #BFFD62 32.74%, #3AFF71 55.94%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-menu.opened {
    left: 0;
    opacity: 1
}

.main-menu.opened .main-menu__bg {
    opacity: 1
}

.main-menu.opened ul.main-menu__items li {
    opacity: 1;
    transform: translateX(0)
}

.main-menu.closed {
    animation: csdelayB 1s 1
}

.main-menu.closed .main-menu__bg {
    transition-delay: .6s;
    opacity: 0
}

.main-menu.closed ul.main-menu__items li {
    transition: all .5s cubic-bezier(.95, 0, 1, .545);
    opacity: 0
}

.main-menu.closed ul.main-menu__items li:nth-child(1) {
    transition-delay: .1s
}

.main-menu.closed ul.main-menu__items li:nth-child(2) {
    transition-delay: .2s
}

.main-menu.closed ul.main-menu__items li:nth-child(3) {
    transition-delay: .3s
}

.main-menu.closed ul.main-menu__items li:nth-child(4) {
    transition-delay: .4s
}

.main-menu.closed ul.main-menu__items li:nth-child(5) {
    transition-delay: .5s
}

.main-menu.closed ul.main-menu__items li:nth-child(6) {
    transition-delay: .6s
}

.main-menu.closed ul.main-menu__items li:nth-child(7) {
    transition-delay: .7s
}

.main-menu.closed ul.main-menu__items li:nth-child(8) {
    transition-delay: .8s
}

@keyframes csdelayB {
    0%,
    100% {
        left: 0;
        opacity: 1
    }
}

.main-menu__r {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%
}

.main-menu__r .iphone {
    width: 370px;
    height: 752px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media (max-height:950px) {
    .main-menu__r .iphone {
        width: 39.36vh;
        height: 80vh
    }
}

.main-menu__r .iphone .iphone--mood {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.main-menu__r .iphone .iphone--mask {
    position: absolute;
    left: 4.5%;
    top: 2%;
    width: 91%;
    height: 96%;
    border-radius: 30px;
    background-color: #212121;
    overflow: hidden
}

a,
button {
    background-color: transparent
}

button,
hr,
input {
    overflow: visible
}

.main-menu__r .iphone .iphone--mask video {
    object-fit: contain
}

.iphone__cd {
    opacity: 0;
    transition: all .4s ease-out;
    transform: translateY(50px);
    position: absolute;
    left: 0;
    top: 50%
}

.opened .iphone__cd {
    opacity: 1;
    transform: translateY(0)
}

.js__anim__item,
.lazy {
    opacity: 0
}

@media (max-width:1024px) {
    ul.main-menu__items li a {
        font-size: clamp(20px, 7vw, 100px)
    }
}

@media (max-width:767px) {
    .main-menu__r {
        display: none
    }
    ul.main-menu__items li a {
        font-size: clamp(20px, 12vw, 100px)
    }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

details,
main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: ButtonText dotted 1px
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

:root {
    --main-bg-color: #070707;
    --main-color: #00EB96;
    --main-color-green: #00EB96;
    --main-text-color: #1B1534;
    --main-color-boxbg: #1e1f21;
    --container-width: 1260px;
    --padding-pc: 15px;
    --padding-mt: 10px;
    --col-width: 8.333%;
    --size: calc(100vw / 1600);
    --size-h: calc(100vh / 700)
}

#wpadminbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: initial !important
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 18px;
    background-color: var(--main-bg-color);
    color: var(--main-text-color)
}

body::-webkit-scrollbar {
    width: 10px
}

.container,
.w100 {
    width: 100%
}

body::-webkit-scrollbar-track {
    background: 0 0;
    border-radius: 5px
}

body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px
}

body::-webkit-scrollbar-thumb:hover {
    background: #555
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline-style: none
}

a,
a:hover,
a:link,
a:visited {
    outline: 0;
    text-decoration: none;
    box-shadow: none
}

.bootstrap-select .dropdown-toggle:focus,
:focus,
button,
button:active,
button:focus,
input:active,
input:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
    outline: 0 !important
}

button {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    color: var(--main-text-color)
}

body.stopScroll,
html.stopScroll {
    overflow: hidden !important
}

.hidden {
    display: none !important
}

.df,
.row {
    display: flex
}

.container {
    max-width: var(--container-width);
    padding: 0 calc(var(--padding-mt) * 2);
    margin: 0 auto
}

.row {
    flex-wrap: wrap;
    width: calc(100% + var(--padding-mt) * 2);
    margin: 0 calc(var(--padding-mt) * -1)
}

@media (min-width:768px) {
    .container {
        padding: 0 calc(var(--padding-pc) * 2)
    }
    .row {
        margin: 0 calc(var(--padding-pc) * -1);
        width: calc(100% + var(--padding-pc) * 2)
    }
}

.df-xc {
    justify-content: center
}

.df-xs {
    justify-content: flex-start
}

.df-xe {
    justify-content: flex-end
}

.df-yc {
    align-items: center
}

.df-ys {
    align-items: flex-start
}

.df-ye {
    align-items: flex-end
}

.df-wrap {
    flex-wrap: wrap
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    width: var(--col-width);
    padding: var(--padding-mt)
}

.slick-list,
ul,
ul li {
    margin: 0;
    padding: 0
}

.col-1 {
    width: calc(var(--col-width) * 1)
}

.col-2 {
    width: calc(var(--col-width) * 2)
}

.col-3 {
    width: calc(var(--col-width) * 3)
}

.col-4 {
    width: calc(var(--col-width) * 4)
}

.col-5 {
    width: calc(var(--col-width) * 5)
}

.col-6 {
    width: calc(var(--col-width) * 6)
}

.col-7 {
    width: calc(var(--col-width) * 7)
}

.col-8 {
    width: calc(var(--col-width) * 8)
}

.col-9 {
    width: calc(var(--col-width) * 9)
}

.col-10 {
    width: calc(var(--col-width) * 10)
}

.col-11 {
    width: calc(var(--col-width) * 11)
}

.col-12 {
    width: calc(var(--col-width) * 12)
}

@media (min-width:768px) {
    .col-md-1 {
        width: calc(var(--col-width) * 1)
    }
    .col-md-2 {
        width: calc(var(--col-width) * 2)
    }
    .col-md-3 {
        width: calc(var(--col-width) * 3)
    }
    .col-md-4 {
        width: calc(var(--col-width) * 4)
    }
    .col-md-5 {
        width: calc(var(--col-width) * 5)
    }
    .col-md-6 {
        width: calc(var(--col-width) * 6)
    }
    .col-md-7 {
        width: calc(var(--col-width) * 7)
    }
    .col-md-8 {
        width: calc(var(--col-width) * 8)
    }
    .col-md-9 {
        width: calc(var(--col-width) * 9)
    }
    .col-md-10 {
        width: calc(var(--col-width) * 10)
    }
    .col-md-11 {
        width: calc(var(--col-width) * 11)
    }
    .col-md-12 {
        width: calc(var(--col-width) * 12)
    }
}

.abs,
div {
    width: 100%;
}

ul {
    list-style: none
}

.relative {
    position: relative
}

.abs {
    position: absolute !important;
    left: 0;
    top: -30px;
    height: 100%
}

.slick-list,
.slick-slider,
.slick-track {
    position: relative;
    display: block
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/inter-v13-latin_latin-ext-300.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/inter-v13-latin_latin-ext-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/inter-v13-latin_latin-ext-500.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/inter-v13-latin_latin-ext-600.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/inter-v13-latin_latin-ext-700.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/inter-v13-latin_latin-ext-800.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/inter-v13-latin_latin-ext-900.woff2) format("woff2")
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icons/icomoon.eot?gvqq4);
    src: url(../fonts/icons/icomoon.eot?gvqq4#iefix) format("embedded-opentype"), url(../fonts/icons/icomoon.ttf?gvqq4) format("truetype"), url(../fonts/icons/icomoon.woff?gvqq4) format("woff"), url(../fonts/icons/icomoon.svg?gvqq4#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-ytb_play:before {
    content: "\e908";
    color: #fff
}

.icon-arrowdown:before {
    content: "\e907";
    color: #005eb8
}

.icon-link1:before {
    content: "\e902"
}

.icon-access_time:before {
    content: "\e906"
}

.icon-time:before {
    content: "\e905"
}

.icon-wallet1:before {
    content: "\e904"
}

.icon-cash:before,
.icon-money:before,
.icon-wallet:before {
    content: "\e903"
}

.icon-share:before {
    content: "\e901"
}

.icon-arrow:before {
    content: "\e900"
}

.icon-envelope-o:before {
    content: "\f003"
}

.icon-star:before {
    content: "\f005"
}

.icon-check:before {
    content: "\f00c"
}

.icon-map-marker:before {
    content: "\f041"
}

.icon-play:before {
    content: "\f04b"
}

.icon-calendar:before {
    content: "\f073"
}

.icon-facebook-square:before {
    content: "\f082"
}

.icon-linkedin-square:before {
    content: "\f08c"
}

.icon-twitter:before {
    content: "\f099"
}

.icon-facebook-f:before,
.icon-facebook:before {
    content: "\f09a"
}

.icon-chain:before,
.icon-link:before {
    content: "\f0c1"
}

.icon-envelope:before {
    content: "\f0e0"
}

.icon-linkedin:before {
    content: "\f0e1"
}

.icon-angle-left:before {
    content: "\f104"
}

.icon-angle-right:before {
    content: "\f105"
}

.icon-angle-up:before {
    content: "\f106"
}

.icon-angle-down:before {
    content: "\f107"
}

.icon-play-circle:before {
    content: "\f144"
}

.icon-youtube-play:before {
    content: "\f16a"
}

.icon-instagram:before {
    content: "\f16d"
}

.icon-long-arrow-down:before {
    content: "\f175"
}

.icon-long-arrow-up:before {
    content: "\f176"
}

.icon-long-arrow-left:before {
    content: "\f177"
}

.icon-long-arrow-right:before {
    content: "\f178"
}

.icon-dribbble:before {
    content: "\f17d"
}

.icon-free-code-camp:before {
    content: "\f2c5"
}

.slick-slider {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    overflow: hidden
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    left: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}