@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");
@import url("slick.css");

:root {
    --c0: #232323;
    --c1: #217DEA;
    --c1d: #33639b;
    --c2: #EB5E04;
    --f-s: max(12px, 14rem);
    --f-d: max(12px, 18rem);
    --f-m: max(16px, 24rem);
    --f-b: max(20px, 32rem);
    --f-l: max(24px, 40rem);
    --f-xl: max(40px, 64rem);
}

@keyframes blink {
    5% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }
}

html {
    font-size: 0.0625vw;
}

.todo {
    background-color: red;
    display: block;
}

.document {
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    font-size: var(--f-d);
    line-height: 1.55;
    color: var(--c0);
    background-color: #fff;
}

.no-scroll {
    overflow: hidden !important;
}

.icon {
    display: flex;
    max-height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 0;
    max-width: 100%;
    width: auto;
    height: auto;
}

.logo {
    max-width: max(140px, 200rem);
}

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

.fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.c1 {
    color: var(--c1);
}

.c2 {
    color: var(--c2);
}

.theme-dark .c1 {
    color: var(--c1d);
}

.rub {
    white-space: nowrap;
}

.rub:not(:empty)::after {
    content: "\a0\20bd";
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 80rem;
}

.button {
    border: 1rem solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    user-select: none;
    cursor: pointer;
    min-height: max(50px, 50rem);
    min-width: max(50px, 50rem);
    border-radius: 999rem;
}

.button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.button-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10rem;
}

.button__default {
    background-color: var(--c1);
    border-color: var(--c1);
    color: #fff;
    padding: 10rem max(40px, 40rem);
}

.button__secondary {
    color: #fff;
    padding: 10rem max(40px, 50rem);
}

.button__secondary.button__contrast {
    color: var(--c1);
}

.button__wide {
    width: 100%;
}

.theme-dark .button__default {
    background-color: #217DEA;
    border-color: #217DEA;
}

.theme-dark .button__secondary.button__contrast {
    color: var(--c1d);
}

.theme-dark #reviews-form .button__default {
    background-color: var(--c1);
    color: #fff;
    border-color: #fff;
}

.theme-dark #reviews-form .button__default:hover {
    background-color: #fff;
    color: var(--c1);
    border-color: #fff;
}

.button .button-icon:first-child {
    margin-left: 0;
}

.button .button-icon:last-child {
    margin-right: 0;
}

.button .button-icon:only-child {
    margin: 0 -16rem;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

.header {
    flex: none;
    position: relative;
    z-index: 1;
}

.topbar {
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    padding: 20rem 0;
}

.topbar-nav {
    display: flex;
}

.topbar-action {
	align-items: center;
	gap: 10rem;
	display: flex;
}

.topbar-action .button_desk_menu {
	padding: 0;
	border-radius: 50%;
}

.mainnav {
    margin: 0 auto;
    display: inline-flex;
    height: max(50px, 50rem);
    border-radius: 999rem;
    border: 1rem solid #E9E9E9;
    padding: 5rem 7rem;
}

.mainnav-item {
    padding: 0 max(20px, 20rem);
    position: relative;
    border-radius: 999rem;
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    color: #fff;
}

.menu-new {
	position: absolute;
    top: -17rem;
    right: 0;
    background: #F6A100;
    border-radius: 20rem;
    padding: 3rem 10rem;
    font-size: 12rem;
}

.theme-switch {
    width: 86rem;
    display: block;
    position: relative;
    cursor: pointer;
}

.main {
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main .hero {
	background-color: #aab8cd;
}

.class_pointer {
	cursor: pointer;
	user-select: none;
}

.section-title {
    font-size: var(--f-l);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--c1);
    font-weight: 500;
}

.theme-dark .section-title {
    color: #fff;
}

.section-title__contrast {
    color: inherit;
}

.theme-dark .section-title__contrast {
    color: inherit;
}

.section-note {
    padding-left: 12rem;
    border-left: 2rem solid;
    font-weight: 700;
}

.theme-dark .hero::before {
    background: #2C2279;
    opacity: 0.8;
    mix-blend-mode: multiply;
}

.hero-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    z-index: 1;
}

.hero-content-main {
	min-height: 74vh;
	justify-content: center;
}

.hero-title {
    font-size: 56rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.01em;
	text-align: center;
}

.hero-title h1 {
    font-size: 53rem;
	padding: 0;
	margin-bottom: 50rem;
    filter: drop-shadow(0px 4px 20px rgba(0.10196078568696976, 0.019607843831181526, 0.3490196168422699, 0.699999988079071));
}

.hero-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 40rem;
    align-items: center;
    margin-top: 50rem;
}

.hero .player-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}

.sound-button {
    width: 45rem;
    height: 45rem;
    position: relative;
    cursor: pointer;
}

.sound-button-on,
.sound-button-off {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform .15s;
}

.sound-button-on {
    transform: scale(0);
}

.sound-button-on img,
.sound-button-off img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.sound-button.active .sound-button-on {
    transform: scale(1);
}

.sound-button.active .sound-button-off {
    transform: scale(0);
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.u2-2 .card {
    padding-left: 70rem;
}

.card1 {
    min-height: 100%;
}

.card1 .card-media {
    margin-bottom: auto;
    display: flex;
    position: relative;
    flex: auto;
}

.card1 .card-media>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

.card1 .card-title {
    margin-top: 60rem;
    font-size: var(--f-m);
    font-weight: 500;
    color: var(--c1);
}

.theme-dark .card1 .card-title {
    color: #fff;
}

.theme-dark .card1 .card-subtitle {
    color: #6BC6E0;
}

.card2 .card-note {
    margin-top: 20rem;
}

.theme-dark .card2 .card-text {
    color: #6BC6E0;
}

.theme-dark .card2 .card-note {
    color: #fff;
}

.theme-dark .section-note {
    color: #fff;
}

.card3 {
    border-radius: 60rem 65rem 65rem 60rem;
    background-color: var(--c1);
    color: #fff;
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    width: 100%;
}

.u4-2 .card3 {
	padding-left: 50rem;
}

.theme-dark .card3 {
    background-color: #217DEA;
}

.card3 .card-content {
    padding: 20rem;
    display: flex;
    flex-direction: column;
}

.card3 .card-pretitle {
    font-weight: 500;
}

.card3 .card-title {
    font-size: var(--f-b);
    font-weight: 500;
    line-height: 1.2;
}

.card3 .card-subtitle {
    margin-top: 20rem;
    margin-bottom: auto;
}

.card3 .card-action {
    margin-top: 90rem;
}

.card3 .card-media {
    position: relative;
    border-radius: 0 60rem 60rem 0;
    overflow: hidden;
    pointer-events: none;
    margin-top: -1px;
    margin-bottom: -1px;
}

.card3 .card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.card3-1 {
    grid-template-columns: 1fr 1fr;
}

.card3-1 .card-content {
    padding: 60rem 0 60rem 80rem;
    justify-content: center;
}

.card3-1 .card-title {
    font-size: var(--f-l);
}

.card3-1 .card-subtitle:last-child {
    margin-bottom: 0;
}

.card3-1 .card-action {
    margin-top: 30rem;
}

.card3-2 {
    min-height: 340rem;
}

.card3-2 .card-pretitle {
    margin-bottom: 40rem;
}

.card3-2 .card-title {
    margin-top: auto;
    font-size: var(--f-m);
}

.card4 {
    background-color: #fff;
    border-radius: 60rem;
    color: var(--c1);
    position: relative;
    background-image: linear-gradient(180deg, #FFFFFF -3.46%, #A6CBF7 233.69%);
    min-height: 100%;
}

.card4 .card-media {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.card4 .card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

.u5-2 .card4 .card-media img {
	position: absolute;
    bottom: 0;
    right: 0;
	left: inherit;
	top: inherit;
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: bottom right;
}

.u5-2 .card-media-afo {
	right: 25rem;
}

.u5-2 .card4 .card-media-afo img {
	top: inherit;
	bottom: 20rem;
}

.card4 .card-content {
    padding: 40rem;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 236rem;
    position: relative;
    z-index: 2;
}

.card4 .card-title {
    font-size: var(--f-m);
    font-weight: 500;
    line-height: 1.2;
    padding-right: 50%;
}

.card4 .card-action {
    margin-top: 40rem;
}

.card5 {
    border-radius: 60rem;
    min-height: 340rem;
    position: relative;
    z-index: 1;
}

.card5 .card-content {
    display: flex;
    flex-direction: column;
    flex: auto;
    position: relative;
    z-index: 1;
    padding: 60rem;
    background-image: linear-gradient(180deg, #217DEA 15.41%, rgba(166, 203, 247, 0) 251.6%);
    color: #fff;
}

.card5 .card-title {
    font-size: var(--f-m);
    font-weight: 500;
}

.card5 .card-subtitle {
    margin-top: 20rem;
    margin-bottom: 40rem;
}

.card5 .card-action {
    margin-top: auto;
}

.card5 .card-media img {
    z-index: -1;
}

.card5 .video_icon {
    background: url(/images/video_icon.svg) no-repeat center left;
    background-size: contain;
    padding: 0 36rem 0 52rem;
}

.card5 .video_icon_block {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 50rem;
}

.card5 .audio_icon {
    background: url(/images/audio_icon.svg) no-repeat center left;
    background-size: contain;
    padding: 0 36rem 0 52rem;
}

.card5 .audio_icon_block {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 50rem;
}

.card5-kb .card-action {
    margin-top: 20rem;
}

.card6 {
    min-height: 150rem;
    box-shadow: inset 0 0 0 1rem var(--c1);
    border-radius: 60rem;
    position: relative;
    padding: 20rem 40rem 30rem;
    display: flex;
    flex-direction: column;
    color: var(--c1);
    cursor: pointer;
}

.card6 .card-header {
    margin-bottom: auto;
}

.card6 .card-footer {
    margin-top: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card6 .card-image {
    width: 50rem;
    height: 60rem;
    position: relative;
    pointer-events: none;
    margin-left: 20rem;
    flex: none;
}

.card6 .card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

.card7 {
    background-color: var(--c1);
    color: #fff;
    border-radius: 60rem;
    z-index: 1;
    position: absolute;
    min-height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 40rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 24px #98C2F3;
}

.card7 .card-header {
    margin-bottom: auto;
    display: flex;
    justify-content: space-between;
}

.card7 .card-close-button {
    margin-left: 20rem;
    flex: none;
    cursor: pointer;
    margin-top: -20rem;
}

.card7 .card-title {
    font-size: var(--f-s);
    font-weight: 700;
}

.card7 .card-footer {
    margin-top: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card7 .card-text {
    line-height: 1.2;
}

.card7 .card-image {
    width: 50rem;
    height: 60rem;
    position: relative;
    pointer-events: none;
    margin-left: 20rem;
    flex: none;
}

.card7 .card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

.card-switch {
    position: relative;
}

.card-switch:not(.active) .card7 {
    visibility: hidden;
}

.faces-group {
    display: grid;
    grid-gap: 20rem;
    grid-auto-flow: column;
    width: 100%;
}

.face {
    background-image: linear-gradient(180deg, #217DEA, rgba(166, 203, 247, 0));
    display: flex;
    overflow: hidden;
    border-radius: 999rem;
}

.face::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: calc(180 / 135 * 100%);
}

.face:nth-child(4n) {
    background-image: url(../img/04/face_dark.svg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.carousel:not(.slick-initialized) .carousel-slide:nth-child(n + 2) {
    display: none;
}

.slick-track {
    height: 100%;
    display: flex;
}

.slick-slide {
    height: auto;
}

.slick-dots {
    margin-top: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-dots li {
    margin: 0 5rem;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: var(--c1);
    opacity: .3;
    transition: opacity .3s;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.theme-dark .slick-dots li {
    opacity: 1;
    background: #217DEA;
}

.slick-dots li.slick-active {
    opacity: 1;
    pointer-events: none;
}

.theme-dark .slick-dots li.slick-active {
    background-color: #6BC6E0;
}

.carousel__alt .slick-dots li {
    background-color: #fff;
}

.u1 {
    overflow: hidden;
    position: relative;
    padding: 200rem 0;
    background-color: #000;
    color: #fff;
}

.u1 .player-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: opacity .5s;
}

.u1.aos-init .player-video {
    opacity: 0;
}

.u1.aos-animate .player-video {
    opacity: 1;
}

.u1-1 {
    max-width: 625rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.u2 {
    padding: 120rem 0 0;
    overflow: hidden;
}

.u2-1 {
    text-align: center;
}

.u2-4 {
    margin-top: 20rem;
}

.u2-5 {
    margin-top: 60rem;
}

.u2-2 {
    display: block;
}

.u2-2 .slick-dots {
    margin: 0 0 0 35px;
    flex-direction: column;
    position: absolute;
    top: 0;
    height: 100%;
    left: 100%;
}

.u2-2 .slick-dots li {
    margin: 5rem 0;
}

.u2-6 {
    display: block;
    margin: 0;
    overflow: hidden;
}

.u2-6 .carousel {
    overflow: hidden;
	margin: 0;
}

.u2-6 .card2_img {
	padding-left: 0;
	width: 30%;
	height: 100%;
}

.u2-6 .card2_img_mb {
	transform: translate(0, 40rem)
}

.u2-6 .carousel-slide {
    margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
}

.u2-2 .card2_text {
	width: 70%;
	height: 100%;
}

.u2-7 {
    display: flex;
    margin: -50rem 0;
    position: relative;
    pointer-events: none;
}

.u2-7::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
}

.u2-7 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.u2-8 {
    margin-top: 40rem;
    font-size: var(--f-s);
}

.u3 {
    background-color: var(--c1);
    color: #fff;
    padding: 40rem 0 0;
}

.u3-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100rem;
}

.u3-2 {
    margin: 40rem 0 20rem;
    position: relative;
    z-index: 1;
}

.u3-3 {
    text-align: left;
    display: flex;
    transform: translateX(-25%);
}

.u3-3::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
}

.u3-5 {
    margin-top: 20rem;
}

.u3-6 {
    margin-top: 40rem;
    background-color: #fff;
    color: var(--c0);
    padding: 40rem;
    border-radius: 60rem;
    position: relative;
    overflow: hidden;
}

.u3-7 {
    margin-top: 20rem;
    font-size: var(--f-s);
}

.u3-8 {
    margin-top: 40rem;
}

.u3-9 {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 60rem;
    margin-top: 15rem;
    color: var(--c1);
}

.theme-dark .u3-9 {
    color: var(--c1d);
}

.u3-10 {
    display: inline-grid;
    grid-gap: 15rem;
    align-items: flex-start;
    grid-template-columns: auto 1fr;
}

.u3-11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .15s;
    padding: 40rem;
    background-color: #fff;
    border-radius: 60rem;
}

.u3-11.active,
.u3-11.mobile-active {
    opacity: 1;
    visibility: visible;
}

.u3-12 {
    font-weight: 500;
    font-size: var(--f-b);
    margin-bottom: 20rem;
    color: var(--c1);
}

.u3-13 {
    margin-top: 20rem;
}

.u4 {
    text-align: center;
    padding-top: 120rem;
}

.u4-2 {
    margin-top: 60rem;
    text-align: left;
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: 1fr 1fr;
}

.u4-3 {
    max-width: 1050rem;
    margin: 120rem auto 0;
}

.u4-4 {
    max-width: 1050rem;
    margin: 40rem auto 0;
}

.u4-5 {
    width: 50%;
    max-width: 548rem;
    margin: 0 auto 0;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.u4-5::before {
    content: "";
    position: absolute;
    bottom: -26%;
    left: 0;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    z-index: 1;
    background-image: linear-gradient(180deg, #217DEA, rgba(166, 203, 247, 0));
}

.u4-5 img {
    position: relative;
    z-index: 1;
}

.u4-5.aos-init::before {
    opacity: 0;
    transition: opacity .5s;
}

.u4-5.aos-init img {
    opacity: 0;
    transition: opacity .5s .5s;
}

.u4-5.aos-animate::before,
.u4-5.aos-animate img {
    opacity: 1;
}

.u5 {
    margin: 80rem 0;
}

.u5-1 {
    text-align: center;
}

.u5-2 {
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40rem;
}

.u6 {
    flex: auto;
    display: flex;
    padding: 70rem 0;
    align-items: center;
    width: 100%;
}

.u6-1 {
    max-width: 1000rem;
    width: 100%;
    margin: auto;
    min-height: 500rem;
    display: flex;
}

.u7 {
    flex: auto;
    display: flex;
    padding: 70rem 0;
    align-items: center;
    width: 100%;
}

.u7-1 {
    display: grid;
    grid-template-columns: 2.375fr 1fr;
    grid-gap: 20rem;
    max-width: 1200rem;
    width: 100%;
    margin: 0 auto;
}

.u7-2 {
    border-radius: 60rem;
    background-color: #fff;
    color: var(--c0);
    padding: 80rem 40rem 40rem 80rem;
    display: flex;
    overflow: hidden;
}

.theme-dark .u7-2 {
    background-color: #217DEA;
    color: #fff;
}

.u7-2:only-child {
    grid-column-end: span 2;
    max-width: 956rem;
    margin: 0 auto;
    padding: 80rem;
}

.u7-2 .carousel {
    overflow: hidden;
    width: 100%;
}

.u7-3 {
    border-radius: 60rem;
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: rgba(0, 0, 0, .1);
}

.u7-3::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 145%;
}

.u7-3 .carousel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.u7-3 .carousel .slick-list {
    height: 100%;
}

.u7-4 {
    font-size: var(--f-b);
    font-weight: 500;
    color: var(--c1);
    line-height: 1.1875;
}

.theme-dark .u7-4 {
    color: #100566;
}

.theme-dark .u8-7 span {
    color: #100566;
}

.u7-5 {
    margin: 40rem 0;
}

.u7-6 {
    margin-top: auto;
}

.u7-7 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.u7-8 {
    margin: 20rem auto 0;
    max-width: 640rem;
}

.u7-8 .steps {
    flex-direction: row;
    margin: 0;
}

.u7-8 .step {
    flex-direction: row;
}

.u7-8 .step::after {
    width: auto;
    height: 1rem;
    min-height: 0;
    min-width: 20rem;
}

.u7-8 .step.active::before {
    background-color: #fff;
    border-color: #fff;
    color: var(--c1);
}

.u8 {
    flex: auto;
    display: flex;
    padding: 70rem 0;
    align-items: center;
    width: 100%;
}

.u8-1 {
    max-width: 1000rem;
    width: 100%;
    margin: auto;
    min-height: 500rem;
    display: flex;
}

.u8-2 {
    flex: none;
    width: 0;
    display: flex;
    justify-content: flex-end;
    padding: 70rem 0;
}

.u8-3 {
    flex: 1;
    margin-right: 10rem;
    background-color: var(--c1);
    color: #fff;
    border-radius: 60rem;
    overflow: hidden;
}

.u8-3 .carousel {
    padding: 60rem;
}

.u8-4 {
    flex: 1;
    margin-left: 10rem;
    display: flex;
    overflow: hidden;
}

.u8-4 .carousel {
    width: 100%;
    height: 100%;
}

.u8-4 .carousel .slick-list {
    height: 100%;
    width: 100%;
}

.u8-4 .carousel-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.u8-4 .carousel-slide u8-5 {
    transition: transform 1s;
}

.u8-4 .carousel-slide.slick-current .u8-5 {
    transform: translateX(0);
    transition-duration: 0s;
}

.u8-5 {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 60rem;
    overflow: hidden;
    position: relative;
    flex: auto;
}

.u8-6 {
    margin: 20rem 40rem 0;
    flex: none;
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: 1fr 1fr;
}

.u8-7 {
    font-size: var(--f-b);
    font-weight: 500;
    line-height: 1.175;
}

.u8-8 {
    margin-top: 40rem;
}

.u9 {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    flex: auto;
	margin-top: 100rem;
}

.u9_wrapper {
	position: relative;
	background: linear-gradient(0deg, #FFFFFF -3.46%, #A6CBF7 142.78%);
	border-radius: 64rem;
	width: 100%;
	height: 100%;
}

.react-menu {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    border: 2px solid #e9e9e9;
    border-radius: 60rem;
	margin: 80rem 0 40rem 0;
}

.react-menu a {
	background-color: #ffffff;
	width: 48%;
	border: 2px solid #e9e9e9;
	border-radius: 60rem;
	margin: 15rem 0;
	padding: 4rem 10rem;
	font-size: 27rem;
	color: #217de9;
	font-weight: 400;
    line-height: 1.2;
    height: 82rem;
    align-items: center;
    display: flex;
    text-align: center;
    transition: all 0.3s;
}

.react-menu a span {
	display: inline-block;
    padding-left: 0;
    width: 100%;
}

.react-menu a:before {
	content: "";
    width: 46rem;
    height: 46rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-size: 60%;
    border-radius: 50%;
    margin-left: 5rem;
	border: 2px solid #e9e9e9;
    position: absolute;
	top: inherit;
	left: inherit;
	display: inline-block;
}

.react-menu .react-1.active:before {
	background-image: url(/images/check_wb.svg);
}

.react-menu .react-1.active {
	background-color: #217de9;
	color: #ffffff;
}

.react-menu .react-2.active:before {
	background-image: url(/images/check_wo.svg);
}

.react-menu .react-2.active {
	background-color: #eb5e04;
	color: #ffffff;
}

.u9-1 {
    width: calc(70% + 40rem);
	padding: 50rem 80rem;
}

.u9-1 p {
	line-height: 1.4;
	margin: 0 0 10rem 0;
}

.u9-1 ul {
	padding-left: 20rem;
	margin: 0 0 10rem 0;
	list-style: disc;
}

.u9-1 li {
    list-style: inherit;
}

.theme-dark .u9-1 {
	color: #000;
}

.u9-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
	display: flex;
	align-items: normal;
	width: auto;
	height: 100%;
}

.u9-4 {
    margin-top: 40rem;
    max-width: 694rem;
}

.u10 {
    margin: 0 auto;
    max-width: 1400rem;
    width: 100%;
}

.u10-1 {
    display: grid;
    grid-gap: 40rem;
    align-items: flex-start;
    grid-template-columns: 1fr auto;
}

.u10-2:only-child {
    grid-column: 1/-1;
}

.u10-4 {
    margin-top: 40rem;
    max-width: 680rem;
}

.u10-5 {
    min-width: 350rem;
    position: relative;
    display: flex;
}

.u10-5::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
}

.u10-6 {
    border-left: 2rem solid var(--c1);
    margin-top: 40rem;
    padding-left: 20rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.u10-6 .button {
    min-width: 160rem;
}

.u10-7 {
    font-size: var(--f-m);
    color: var(--c1);
    font-weight: 500;
}

.u10-7:not(:last-child) {
    margin-bottom: 15rem;
}

.u11 {
    margin: 50rem auto 0;
    max-width: 1400rem;
    width: 100%;
}

.u11-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20rem;
}

.u12 {
    margin-top: 60rem;
    color: #5F5F5F;
    font-size: var(--f-s);
}

.u13 {
    width: 100%;
    margin: 40rem auto;
    max-width: 1400rem;
}

.u13-2 {
    margin-top: 60rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20rem;
}

.u13-3 {
    margin-top: 40rem;
    display: grid;
    grid-template-columns: 250rem 1fr;
    grid-gap: 50rem;
}

.u13-4 {
    font-size: var(--f-m);
    font-weight: 500;
    color: var(--c1);
}

.u13-5 {
    max-width: 680rem;
}

.u14 {
    max-width: 1400rem;
    width: 100%;
    margin: 40rem auto 60rem;
}

.u15 {
    margin: 40rem auto;
    max-width: 1480rem;
    width: 100%;
}

.u16 {
    flex: auto;
    position: relative;
    margin-top: 40rem;
    padding: 60rem 0;
    overflow: hidden;
}

.u16-1 {
    max-width: 1560rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.u17 {
    overflow: hidden;
    min-height: 620rem;
    margin-bottom: 40rem;
}

.u17-1 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-gap: 1.4em 56rem;
    max-width: 1240rem;
    width: 100%;
    margin: 0 auto;
    grid-template-areas: "a1 a2" "a3 a2";
}

.u17-2 {
    grid-area: a1;
    padding-top: 40rem;
}

.u17-2:only-child {
    grid-column: 1/-1;
    max-width: 900rem;
}

.u17-3 {
    grid-area: a2;
    position: relative;
    pointer-events: none;
}

.u17-4 {
    margin: 1.4em 0;
}

.u17-4:first-child {
    margin-top: 0;
}

.u17-4:last-child {
    margin-bottom: 0;
}

.u17-4 a {
    color: var(--c1);
}

.u17-5 {
    grid-area: a3;
}

.u18 {
    margin: 60rem auto 0;
    max-width: 1400rem;
    width: 100%;
}

.u18-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 40rem;
    max-width: 1240rem;
    width: 100%;
    margin: 0 auto;
    grid-template-areas: "a1 a2" "a3 a2";
}

.u18-2 {
    grid-area: a1;
}

.u18-3 {
    grid-area: a3;
}

.u18-4 {
    grid-area: a2;
    pointer-events: none;
}

.u18__a .u18-2 {
    margin-top: auto;
}

.u18__a .u18-3 {
    margin-bottom: auto;
}

.u19 {
    padding: 80rem 0;
}

.u19-2 {
    text-align: center;
}

.u19-3 {
    text-align: center;
    margin-top: 40rem;
    font-weight: 500;
}

.u19-4 {
    display: grid;
    grid-gap: 0 80rem;
    grid-template-columns: 1fr 1.5fr 1fr;
    margin: 45rem 0 0;
    align-items: flex-start;
}

.u19-5 {
    display: flex;
    justify-content: center;
    margin: 20rem 0 0;
}

.u19-6 {
    width: 100%;
    max-width: 540rem;
}

.u19-7 {
    padding: 20rem 0;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10rem;
}

.u19-8 {
    display: flex;
    position: relative;
}

.u19-8::before {
    content: "";
    width: 100%;
    padding-top: 100%;
    background-image: linear-gradient(180deg, #217DEA -3.46%, rgba(166, 203, 247, 0) 100%);
    border-radius: 50%;
}

.u19-9 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 30rem;
    grid-template-rows: 1fr auto 1fr;
}

.u19-9::before {
    content: "";
}

.u19-10 {
    margin: 0 -65rem;
    pointer-events: none;
}

.u19-11 {
    text-align: center;
    font-size: var(--f-s);
}

.u20 {
    flex: auto;
    padding: 120rem 0 80rem;
    background-color: var(--c1);
    color: #fff;
    margin-bottom: 40rem;
}

.u20-1 {
    text-align: center;
}

.u20-2 {
    margin-top: 100rem;
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: 1fr 1fr;
}

.u21-1 {
    margin: 0 auto;
    width: 100%;
    max-width: 1220rem;
    background-color: var(--c1);
    border-radius: 60rem;
    padding: 80rem 80rem 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.u21-2 {
    color: #fff;
    text-align: center;
}

.u21-3 {
    margin: 0 auto;
    width: 100%;
    max-width: 960rem;
    margin-top: 25rem;
}

.u21-4 {
    margin: 55rem auto 0;
}

.u22 {
    margin: 60rem 0;
}

.u22-1 {
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: auto;
}

.u22-2 {
    border-radius: 60rem;
    border: 1rem solid var(--c1);
}

.u22-3 {
    margin-top: 40rem;
    display: flex;
    justify-content: center;
}

.u22-4 {
    margin-top: 40rem;
    display: flex;
    justify-content: center;
}

.paging {
    display: inline-flex;
    margin: auto;
    align-items: center;
    line-height: 1;
}

.paging-nav {
    display: inline-grid;
    margin: 0 30rem;
    grid-gap: 15rem;
    grid-auto-flow: column;
}

.paging-nav-item.active {
    font-weight: 500;
}

.paging-arrow {
    font-weight: 500;
}

.rcard {
    background-color: #fff;
    border-radius: 60rem;
    padding: 40rem;
    display: flex;
}

.theme-dark .rcard {
    background-color: #2C2279;
}

.theme-dark .u22-2-review .rcard {
    background-color: #217DEA;
}

.rcard .card-image {
    width: 80rem;
    height: 80rem;
    margin-right: 20rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex: none;
    background-color: #fff;
    background-image: linear-gradient(#217DEA -3.46%, rgba(166, 203, 247, 0) 100%);
}

.rcard .card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.rcard .card-footer {
    margin-top: 20rem;
    color: var(--c1);
}

.theme-dark .rcard .card-footer {
    color: #6BC6E0;
}

.brandcard {
    background-color: #fff;
    border-radius: 60rem;
    padding: 40rem 50rem;
    color: var(--c1);
    margin-top: 75rem;
}

.brandcard .card-image {
    margin-top: -115rem;
    pointer-events: none;
}

.brandcard .card-content {
    margin-top: 30rem;
    display: grid;
    grid-gap: 20rem;
    grid-template-columns: auto;
}

.brandcard .card-row {
    border-top: 1rem solid var(--c1);
    padding-top: 20rem;
}

.brandcard .card-items-group {
    margin: -10rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.brandcard .card-item {
    margin: 10rem;
}

.card-item-break {
    width: 100%;
}

.brandcard .card-description {
    display: flex;
    align-items: center;
    padding: 0 15rem;
    justify-content: center;
    min-height: 115rem;
}

.brandcard .card-description ._image {
    margin: -10rem 40rem -10rem 0;
    height: 100rem;
    pointer-events: none;
    min-width: 80rem;
    display: flex;
}

.brandcard .card-description ._image img {
    max-height: 100%;
    width: auto;
    margin: auto 0;
}

.brandcard .card-description ._text {
    color: var(--c0);
}

.brandcard .card-info-1 {
    color: #5F5F5F;
    padding: 0 5rem;
}

.brandcard .card-info-2 {
    display: flex;
    padding: 0 5rem;
}

.brandcard .card-info-2 ._image {
    position: relative;
    flex: none;
    margin-right: 10rem;
    width: 50rem;
    height: 50rem;
}

.brandcard .card-info-2 ._image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.brandcard .card-footer {
    margin-top: 40rem;
}

.blist li {
    position: relative;
    max-width: 720rem;
    display: flex;
}

.blist li ._icon {
    flex: none;
    margin-right: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blist li ._icon::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--c1);
}

.blist li ._text {
    margin-top: -.2em;
}

.blist li:not(:last-child) ._text {
    padding-bottom: 1.4em;
}

.blist li:not(:last-child) ._icon::after {
    content: "";
    width: 1rem;
    flex: auto;
    background-color: var(--c1);
}

.theme-dark .blist li ._text,
.theme-dark .blist li ._text .c1 {
    color: #6BC6E0;
}

.k-form-holder {
    display: flex;
    line-height: 1;
}

.k-form {
    background-color: var(--c1);
    color: #fff;
    border-radius: 0 0 60rem 60rem;
    padding: 30rem 40rem;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.k-form ._title {
    font-weight: 500;
    margin-right: 20rem;
    font-size: var(--f-m);
    line-height: 1.25;
}

.k-form ._action {
    min-width: 150rem;
}

.contacts {
    max-width: 600rem;
    width: 50%;
    background-color: var(--c1);
    color: #fff;
    border-radius: 60rem;
    padding: 60rem 80rem;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20rem;
    pointer-events: all;
}

.contacts-row a[href^="mailto:"] {
    text-decoration: underline;
}

.contacts-title {
    font-weight: 700;
}

.map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    right: -25%;
    background-color: #eee;
}

[class*="ground-pane"] {
    filter: grayscale(1);
}

.expand-list {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20rem;
}

.expand {
    box-shadow: inset 0 0 0 1rem var(--c1);
    border-radius: 60rem;
    padding: 40rem;
    position: relative;
}

.expand-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 40rem;
    align-items: flex-start;
    color: var(--c1);
    cursor: pointer;
}

.expand-header-title {
    font-weight: 500;
    font-size: var(--f-m);
    min-height: 24rem;
}

.expand-header-icon {
    display: inline-flex;
    align-items: center;
    min-height: calc(1.55 * var(--f-m));
    line-height: 1;
}

.expand-header-icon ._icon {
    width: auto;
    height: 24rem;
}

.expand-content {
    display: none;
    line-height: 1.5;
    margin-top: 20rem;
    max-width: 100%;
}

.expand-content a {
    white-space: nowrap;
    color: var(--c1);
}

.expand-note {
    margin-top: 40rem;
    font-size: var(--f-s);
    color: #5F5F5F;
    max-width: 520rem;
}

.expand.active .expand-content {
    display: block;
}

.expand.active .expand-header-icon ._icon {
    transform: scaleY(-1);
}

.canvas-1 {
    visibility: hidden;
    transition: visibility 0s;
}

.canvas-1 .j6 {
    opacity: 0;
    transition-duration: 1s;
    transform: translateY(20rem);
    transition-property: opacity, transform, filter;
    filter: grayscale(0);
}

.canvas-1 .j7 {
    opacity: 0;
    transition: opacity .5s .5s;
}

.canvas-1 .j5 {
    opacity: 0;
    transition: opacity 1s;
}

.canvas-1 .j1 {
    opacity: 0;
}

.canvas-1.dark .j5 {
    opacity: 1;
}

.canvas-1.dark .j6 {
    filter: grayscale(1);
}

.canvas-1.dark .j1 {
    animation: blink infinite linear 2s;
}

.aos-animate .canvas-1 {
    visibility: visible;
}

.aos-animate .canvas-1 .j6 {
    opacity: 1;
    transform: translateY(0);
}

.aos-animate .canvas-1 .j7 {
    opacity: 1;
}

.fab-container {
    position: sticky;
    bottom: 100rem;
    display: flex;
    align-items: flex-end;
    margin-top: 20rem;
    z-index: 5;
}

.fab {
    display: flex;
    pointer-events: none;
}

.fab-button {
    display: none;
}

.fab-button ._icon {
    max-height: 100%;
    height: auto;
    width: 100%;
    max-width: 36rem;
}

.fab-container.active .fab-button {
    width: 80rem;
    height: 80rem;
    margin-left: auto;
    background-color: var(--c1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    border-radius: 50%;
    padding: 3rem 3rem 0 0;
    line-height: 1;
    color: #ffffff;
    box-shadow: 0px 4px 12px rgba(33, 125, 234, 0.4);
    position: relative;
	border: 2px solid #ffffff;
}

.player {
    display: flex;
    position: relative;
    background-color: var(--c0);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.player-button {
    width: 160rem;
    height: 160rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c1);
    background-color: #fff;
    padding-left: 8rem;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -80rem 0 0 -80rem;
}

.player .player-video {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.player.active .player-video {
    opacity: 1;
    pointer-events: all;
}

.player.active .player-button {
    visibility: hidden;
}

.steps {
    margin-right: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    counter-reset: index;
}

.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--c1);
    align-items: center;
}

.step::before {
    content: counter(index);
    counter-increment: index;
    border: 1rem solid;
    color: currentColor;
    width: 32rem;
    height: 32rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--f-d);
    font-weight: 500;
    flex: none;
    line-height: 1;
    font-family: sans-serif;
    transition: color .25s;
}

.step::after {
    content: "";
    flex: auto;
    background-color: currentColor;
    min-height: 30rem;
    width: 1rem;
    transition: background-color .25s;
}

.step:last-child {
    flex: none;
}

.step:last-child::after {
    display: none;
}

.step.active::after,
.step.active~.step {
    color: #D9D9D9;
}

.step-button {
    height: 40rem;
    border-radius: 999rem;
    padding: 0 20rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 0;
    background: red;
    width: 100%;
    color: #fff;
    line-height: 1;
    align-items: center;
}

.step-button__left {
    background-color: var(--c1);
}

.step-button__right {
    background-color: var(--c2);
    background-image: linear-gradient(210.07deg, #FF9C78, #E25B04);
}

.step-button__right::before {
    content: "";
}

.step-button-text {
    font-weight: 700;
    width: 64rem;
    padding: 0 10rem;
    text-align: center;
}

.bodyparts-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 60rem;
    color: var(--c0);
}

.formbox {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10rem;
}

.check {
    display: inline-flex;
    align-items: center;
    user-select: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.check-control {
    position: absolute;
    right: 100%;
    opacity: 0;
}

.check-icon {
    flex: none;
    display: inline-flex;
    background-color: #fff;
    border: 1px solid;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 10rem;
    transition: color .25s;
    color: #D9D9D9;
    line-height: 1;
}

.check-icon::after {
    content: "";
    background-color: var(--c1);
    transition: transform .25s;
    border-radius: 50%;
    will-change: transform;
    transform: scale(0);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 1px;
}

.theme-dark .check-icon::after {
    background-color: #2c2279;
}

.check-control:checked~.check-icon {
    color: var(--c1);
}

.check-control:checked~.check-icon::after {
    transform: scale(1);
}

.footer {
    flex: none;
    padding: 70rem 0 50rem;
    background-color: #fff;
}

.theme-dark .footer {
    background-color: #2c2279;
}

.theme-dark .warning_block {
    background-color: #1a1255;
}

.theme-dark .fancybox-content {
    background: #2c2279;
}

.footer-grid {
    display: grid;
    grid-gap: 30rem 50rem;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "a1 a2 a3" "a4 a2 .";
}

.footer-logo {
    grid-area: a1;
}

.footer-nav {
    grid-area: a2;
    display: flex;
}

.footer-nav ul {
    column-count: 2;
    column-gap: 100rem;
    margin-left: 200rem;
}

.footer-nav ul li {
    break-inside: avoid;
    margin-bottom: 5rem;
}

.footer-nav ul li a {
    color: #5F5F5F;
}

.footer-share {
    grid-area: a3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-copyright {
    grid-area: a4;
    color: #5F5F5F;
}

.theme-dark .footer-nav ul li a {
    color: #fff;
}

.theme-dark .footer-copyright {
    color: #fff;
}

.share {
    display: inline-grid;
    grid-gap: 20rem;
    margin-top: 15rem;
    grid-auto-flow: column;
}

.share-item {
    position: relative;
    line-height: 0;
}

.impressum {
    padding: 0 1vw;
    padding-top: 20rem;
    margin-top: auto;
}

.blue {
	color: var(--c1);
}

.body-blue .container {
    background-color: var(--c1);
    color: #fff;
}

.theme-dark.body-blue .container {
    background-color: #2C2279;
}

.theme-dark .u7-2 .carousel-slide .button__secondary.button__contrast {
    border-color: #fff;
    color: #fff;
}

.body-blue .header .button__default,
.popup__menu .button__default {
    background-color: #fff;
    border-color: #fff;
    color: var(--c1);
}

.body-blue .header .mainnav-item.active {
    color: var(--c1);
    background-color: #fff;
}

.body-white .header .button__default {}

.body-white .header .mainnav-item.active {
    background-color: var(--c1);
}

.body-white .header .mainnav-item:not(.active) {
    color: var(--c0);
}

.theme-dark .header .mainnav-item:not(.active) {
    color: #fff;
}

.body-white .header .topbar-logo {
    background-image: url(../img/tbt_logo_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.theme-dark .header .topbar-logo {
    background: none;
}

.body-white .header .topbar-logo .logo {
    opacity: 0;
}

.theme-dark .header .topbar-logo .logo {
    opacity: 1;
}

.popup-msg {
    padding: 20rem 0;
}

.popup-msg-title {
    text-align: center;
    font-weight: 500;
    font-size: var(--f-b);
}

.popup-msg-subtitle {
    margin-top: 20rem;
    text-align: center;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(33, 125, 234, .75);
    display: flex;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all .25s;
}

.preloader-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    margin: auto;
    transition: opacity .25s .25s;
}

.preloader-title {
    max-width: 540rem;
    margin-bottom: 40rem;
}

.preloader-subtitle {
    font-weight: 500;
    margin-top: 10rem;
    pointer-events: none;
}

.preloader-action {
    margin-top: 40rem;
    min-width: 150rem;
}

.preloader-value {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-weight: 500;
    font-size: 112rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.preloader__incomplete .preloader-content {
    opacity: 0;
    transition-delay: 0s;
}

.preloader__incomplete .preloader-value {
    opacity: 1;
    transition-delay: 0s;
}

.burger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
}

.burger-icon {
    position: relative;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transition: background-color 0s .25s;
}

.burger-icon::before,
.burger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: currentColor;
}

.burger-icon::before {
    bottom: 6px;
    transition-property: bottom, transform;
    transition-duration: .25s;
    transition-delay: .25s, 0s;
}

.burger-icon::after {
    top: 6px;
    transition-property: top, transform;
    transition-duration: .25s;
    transition-delay: .25s, 0s;
}

.burger.active .burger-icon {
    background-color: rgba(0, 0, 0, 0);
}

.burger.active .burger-icon::before {
    bottom: 0;
    transform: rotate(-45deg);
    transition-delay: 0s, .25s;
}

.burger.active .burger-icon::after {
    top: 0;
    transform: rotate(45deg);
    transition-delay: 0s, .25s;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: all .15s;
    background-color: rgba(0, 0, 0, .5);
}

.popup__menu {
    background-color: var(--c1);
    color: #fff;
    padding-bottom: 60rem;
}

.theme-dark .popup__menu {
    background-color: #2C2279;
}

.theme-dark .popup-list_item {
    color: #6BC6E0;
}

.popup:not(.popup__menu) {
    align-items: center;
}

.popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-inner {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.popup-header {
    flex: none;
}

.popup-main {
    flex: auto;
    display: flex;
    flex-direction: column;
    padding: 40rem 0;
}

.popup-list {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 50rem;
    margin: auto 0;
}

.popup-list_item {
    position: relative;
    font-size: var(--f-xl);
    font-weight: 700;
    line-height: 1.1;
}

.popup-list_item span {
	position: absolute;
    top: -20px;
    left: 2px;
    background: #F6A100;
    border-radius: 20rem;
    padding: 3rem 10rem;
    font-size: 14rem;
    font-weight: 300;
}

.popup-footer {
    flex: none;
}

.popup-form {
    background-color: var(--c1);
    color: #fff;
    max-width: 800rem;
    border-radius: 60rem;
    padding: 40rem;
    margin: auto;
    position: relative;
}

.popup-form-header {
    font-weight: 500;
    font-size: var(--f-b);
    line-height: 1.1;
    padding-right: 80rem;
}

.popup-form-subtitle {
    margin-top: 20rem;
    font-size: var(--f-s);
}

.popup-form-main {
    margin: 40rem 0;
}

.popup-form-footer {
    display: flex;
    justify-content: center;
}

.popup-form-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 30rem;
    line-height: 1;
    cursor: pointer;
}

.popup-form__alt {
    background-color: #fff;
    color: var(--c0);
    max-width: 800rem;
    max-width: 624rem;
}

.popup-form__alt .textfield-input {
    box-shadow: inset 0 0 0 1rem #E9E9E9;
}

.popup-alert {
    background-color: #fff;
    margin: auto;
    max-width: 800rem;
    border-radius: 60rem;
    padding: 60rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20rem;
    align-items: flex-start;
}

.popup-alert-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 30rem;
    line-height: 1;
    cursor: pointer;
}

.popup-alert-title {
    font-size: var(--f-m);
    line-height: 1.1;
    color: var(--c1);
}

.popup-alert-action {
    margin-top: 40rem;
}

.popup-alert-note {
    color: #5F5F5F;
    margin-top: 40rem;
    font-size: var(--f-s);
}

.formbox {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20rem;
}

.textfield {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.textfield-label {
    margin-bottom: 4rem;
}

.textfield-input {
    min-height: 60rem;
    border-radius: 15rem;
    padding: 16rem 20rem;
    background-color: #fff;
    color: var(--c0);
    resize: none;
}

.bodyparts {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bodyparts-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.bodyparts-image {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity .25s;
    background-color: var(--c1);
}

.bodyparts-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.bodyparts-dot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1rem solid #fff;
    transform: translate(-50%, -50%);
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.bodyparts-dot__a {
    top: 41%;
    left: 54%;
}

.bodyparts-dot__b {
    top: 58%;
    left: 60%;
}

.bodyparts-dot__c {
    top: 39%;
    left: 65%;
}

.bodyparts-dot__d {
    top: 75%;
    left: 63%;
}

.bodyparts-dot__e {
    top: 56%;
    left: 42%;
}

.bodyparts-dot__f {
    top: 52%;
    left: 55%;
}

.bodyparts-dot__g {
    top: 29%;
    left: 65%;
}

.bodyparts-dot__h {
    top: 67%;
    left: 50%;
}

.bodyparts-dot__i {
    top: 24%;
    left: 54%;
}

.bodyparts-dot__j {
    top: 60%;
    left: 74%;
}

.bodyparts-dot__k {
    top: 11%;
    left: 58%;
}

.bodyparts-dot::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
}

.bodyparts-card {
    position: absolute;
    left: 100%;
    top: 0;
    width: 342rem;
    min-height: 120rem;
    margin-top: -60rem;
    opacity: 0;
    pointer-events: none;
    margin-left: 40rem;
}

.bodyparts-card::before {
    content: "";
    height: 1rem;
    width: 40rem;
    position: absolute;
    background-color: #fff;
    right: 100%;
    top: 71rem;
}

.bodyparts-item__default .bodyparts-image {
    opacity: 1;
}

@media screen and (max-width: 1240px) {
	.u5-2 .card-media-afo {
		right: -8rem;
	}
	.u5-2 .card4 .card-media-afo img {
		top: inherit;
		bottom: 15rem;
	}
}

@media screen and (max-width: 1023.98px) {
    :root {

        --f-s: 12rem;
        --f-d: 16rem;
        --f-m: 18rem;
        --f-b: 24rem;
        --f-l: 24rem;
        --f-xl: 32rem;

    }

    .theme-switch {
        display: none !important;
    }

    .theme-switch.mobile {
        display: block !important;
    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .document {
        line-height: 1.4;
    }

    .wrapper {
        padding: 0 20rem;
        max-width: 600rem;
    }
	
    .wrapperbox {
        padding: 0 20rem;
        max-width: 600rem;
    }

    .page-form .wrapper {
        padding: 0 70rem;
    }

    .button {
        min-width: 40rem;
        min-height: 40rem;
        width: 100%;
    }

    .button__default,
    .button__secondary {
        padding: 8rem 16rem;
    }

    .button-text {
        font-size: 14rem;
    }

    .topbar {
        grid-gap: 10rem;
        grid-template-columns: 1fr auto auto;
        padding: 15rem 0;
    }

    .topbar-logo .logo {
        max-width: 100rem;
    }

    .footer {
        padding: 20rem 0 40rem;
    }

    .footer-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas: "a1 a1" "a2 a2" "a4 a3";
        grid-gap: 20rem;
    }

    .footer-logo .logo {
        max-width: 120rem;
    }

    .footer-nav {
        margin-bottom: 0;
    }

    .footer-nav ul {
        margin: 0;
		column-count: 1;
        column-gap: 20rem;
    }

    .footer-copyright {
        align-self: flex-end;
    }

    .hero-content {
        padding: 40rem 0 100rem;
    }

    .hero-controls {
        margin-top: 40rem;
    }

    .hero-action {
        margin-right: auto;
        min-width: 150rem;
    }

    .card1 .card-title {
        margin-top: 20rem;
    }

    .card3 {
        grid-template-columns: auto;
        grid-gap: 0;
        border-radius: 60rem 60rem 65rem 65rem;
    }

    .card3 .card-content {
        padding: 40rem 40rem 20rem;
        border-radius: 60rem;
    }

    .card2 .card-text {
        margin-top: 20rem;
    }

    .card3 .card-pretitle {
        margin-bottom: 10rem;
    }

    .card3 .card-subtitle {
        margin-top: 10rem;
    }

    .card3 .card-action {
        margin-top: 20rem;
    }

    .card3 .card-media {
        border-radius: 0 0 60rem 60rem;
        height: auto;
    }

    .card3 .card-media img {
        position: relative;
        width: 100%;
        height: auto;
    }

    .card3-1 .card-subtitle {
        margin-top: 20rem;
    }

    .card3-1 .card-action {
        margin-top: 40rem;
    }

    .card5 {
        min-height: 200rem;
    }

    .card5 .card-content {
        padding: 40rem;
    }

    .card5 .card-subtitle {
        margin-top: 10rem;
    }

    .steps {
        flex-direction: row;
        width: 100%;
        margin-right: 0;
    }

    .step {
        flex-direction: row;
    }

    .step::after {
        min-height: 0;
        height: 1rem;
        width: auto;
    }

    .step-button {
        height: 32rem;
        padding: 0 16rem;
    }

    .step-button-text {
        width: 50rem;
    }

    .faces-group {
        grid-gap: 10rem;
    }

    .bodyparts-card {
        display: none;
    }

    .bodyparts::after {
        content: "";
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 40rem;
        background-image: linear-gradient(rgba(0, 0, 0, 0), var(--c1));
    }

    .bodyparts-dot:hover {
        background-color: #fff;
        z-index: 3;
    }

    .bodyparts-dot:hover::after {
        background-color: var(--c1);
    }

    .bodyparts-dot:hover~.bodyparts-image {
        opacity: 1;
    }

    .u1 {
        padding: 100rem 0;
        min-height: 100vh;
    }

    .u2 {
        padding: 80rem 0 40rem;
    }

    .u2-2 {
        padding: 0;
        grid-template-columns: auto;
    }

    .u2-2 .slick-dots {
        position: relative;
        flex-direction: row;
        margin: 0;
        left: 0;
        height: auto;
    }

    .u2-2 .slick-dots li {
        margin: 0 5rem;
    }

    .u2-5 {
        margin-top: 20rem;
    }

    .u2-6 {
        order: 1;
    }

    .u2-6 .slick-track {
        height: auto;
        display: block;
    }

    .u2-6 .carousel-slide {
        margin: 0;
    }

    .u2-7 {
        margin: 0;
        order: -1;
        border-radius: 50%;
        overflow: hidden;
    }

    .u2-8 {
        margin-top: 20rem;
    }

    .u3 {
        padding-bottom: 20rem;
    }

    .u3-1 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .u3-2 {
        margin: 0;
    }

    .u3-3 {
        margin: 0 -60rem;
        transform: translateX(0);
    }

    .u3-6 {
        margin-top: 20rem;
        padding: 40rem;
    }

    .u3-7 {
        margin: 0;
    }

    .u3-8 {
        margin-top: 20rem;
    }

    .u3-9 {
        grid-auto-flow: row;
        margin-top: 20rem;
        grid-gap: 20rem;
    }

    .u4 {
        padding-top: 80rem;
    }

    .u4-2 {
        margin-top: 20rem;
        grid-template-columns: auto;
    }

    .u4-3 {
        text-align: left;
        margin: 60rem 0 0;
    }

    .u4-4 {
        text-align: left;
        margin: 40rem 0 0;
    }

    .u4-5 {
        width: 100%;
        margin: 0;
    }

    .u5 {
        margin: 80rem 0 40rem;
    }

    .u5-2 {
        margin-top: 20rem;
        grid-template-columns: auto;
    }

    .u6 {
        padding: 0 0 20rem;
    }

    .u6-1 {
        min-height: 0;
    }

    .u7 {
        padding: 0 0 20rem;
    }

    .u7-1 {
        grid-template-columns: auto;
    }

    .u7-2,
    .u7-2:only-child {
        padding: 40rem;
        grid-column-end: span 1;
        max-width: 100%;
    }

    .u7-3::before {
        padding-top: 75%;
    }

    .u7-5 {
        margin-top: 20rem;
    }

    .u7-8 {
        margin: 20rem -20rem 0;
        overflow: auto;
        padding: 0 20rem;
        max-width: none;
    }

    .u7-8 .steps {
        justify-content: flex-start;
    }

    .u7-8 .steps::after {
        content: "";
        width: 20rem;
        flex: none;
    }

    .u8 {
        padding: 20rem 0;
    }

    .u8-1 {
        flex-direction: column;
    }

    .u8-2 {
        width: 100%;
        padding: 0;
        margin-top: 20rem;
        order: 1;
    }

    .u8-3 {
        margin: 0;
    }

    .u8-3 .carousel {
        padding: 40rem;
    }

    .u8-4 {
        margin: 20rem 0 0;
    }

    .u8-5 {
        height: 230rem;
    }

    .u8-6 {
        margin: -16rem 0 0;
        grid-gap: 16rem;
        position: relative;
        z-index: 1;
    }

    .u9 {
        padding: 20rem 0 0;
    }

    .u9-1 {
        width: auto;
    }

    .u9-2 {
        position: relative;
        margin: 50rem auto 0;
        right: auto;
        left: auto;
    }

    .u9-4 {
        margin-top: 20rem;
    }

    .u10 {
    }

    .u10-1 {
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .u10-4 {
        margin-top: 20rem;
    }

    .u10-5 {
		display: none;
        /* min-width: 100%; */
    }
	
	.audio-page .u10-5 {
		display: none;
		/* max-width: 200rem; */
		/* min-width: auto; */
	}
		
	.audio-page .audio-line {
		border-left: none;
		padding-left: 0;
	}

    .u10-6 {
        margin-top: 20rem;
    }

    .u11-1 {
        grid-template-columns: auto;
        grid-gap: 10rem;
    }

    .u12 {
        margin-top: 40rem;
        text-align: center;
    }

    .u13-2 {
        grid-template-columns: auto;
        grid-gap: 10rem;
        margin-top: 20rem;
    }

    .u13-3 {
        grid-template-columns: auto;
        grid-gap: 10rem;
    }

    .u15 {
        margin: 20rem 0;
    }

    .u16 {
        margin: 20rem 0 20rem;
        overflow: visible;
        padding: 0;
    }

    .u17-1 {
        grid-template-areas: "a1" "a2" "a3";
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .u17-2 {
        padding-top: 20rem;
    }

    .u17-3 img {
        max-width: 100%;
        height: auto;
        width: 100%;
        position: relative;
    }

    .u18-1 {
        grid-template-areas: "a1" "a2" "a3";
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .u18__a .u18-1 {
        grid-template-areas: "a1" "a3" "a2";
    }

    .u18__a .u18-4 {
        margin-top: 20rem;
    }

    .u19 {
        padding: 25rem 0 40rem;
    }

    .u19-1 {
        display: flex;
        flex-direction: column;
    }

    .u19-2 {
        text-align: left;
    }

    .u19-3 {
        text-align: left;
        margin-top: 20rem;
    }

    .u19-4 {
        order: 1;
        grid-template-columns: auto;
        grid-gap: 10rem;
        margin: 30rem 0 0;
    }

    .u19-6 .button-text {
        white-space: normal;
        line-height: 1.2;
    }

    .u19-7 {
        padding: 0;
    }

    .u19-8 {
        order: -1;
        margin: 0 40rem 20rem;
    }

    .u19-9 {
        margin: 0 -40rem;
        width: auto;
        grid-gap: 20rem;
    }

    .u19-10 {
        margin: 0;
    }

    .u20 {
        padding: 80rem 0 40rem;
    }

    .u20-1 {
        text-align: left;
    }

    .u20-2 {
        grid-template-columns: auto;
        margin-top: 40rem;
        grid-gap: 40rem;
    }

    .u21-1 {
        border-radius: 0;
        margin: 0 -20rem;
        padding: 40rem 20rem;
        width: auto;
    }

    .u21-4 {
        margin: 20rem auto 0;
        max-width: 250rem;
        width: 100%;
    }

    .u22 {
        margin: 40rem 0;
    }

    .rcard {
        padding: 40rem 20rem;
        flex-direction: column;
    }

    .rcard .card-image {
        margin-right: 0;
        margin-bottom: 15rem;
    }

    .brandcard {
        padding: 40rem 20rem;
        margin-top: 40rem;
    }

    .brandcard .card-image {
        margin-top: -80rem;
    }

    .brandcard .card-description {
        flex-direction: column;
    }

    .brandcard .card-description ._image {
        margin: 0;
    }

    .brandcard .card-description ._text {
        margin-top: 10rem;
        text-align: center;
    }

    .brandcard .card-items-group {
        align-items: flex-start;
        display: grid;
        margin: 0;
        grid-template-columns: auto;
        grid-gap: 10rem;
        justify-content: stretch;
    }

    .brandcard .card-item {
        margin: 0;
    }

    .brandcard .card-info-1 {
        padding: 0;
        text-align: center;
    }

    .brandcard .card-info-2 {
        padding: 0;
    }

    .player-button {
        width: 60rem;
        height: 60rem;
        margin: -30rem 0 0 -30rem;
        padding: 16rem 16rem 16rem 20rem;
    }

    .preloader-title {
        max-width: 230rem;
    }

    .preloader-subtitle {
        max-width: 250rem;
    }

    .preloader-value {
        font-size: 64rem;
    }

    .impressum {
        margin-top: 20rem;
        padding: 0 20rem;
        display: flex;
        justify-content: center;
    }

    .impressum img {
        max-width: 600rem;
    }

    .sound-button {
        width: 30rem;
        height: 30rem;
    }

    .popup:not(.popup__menu) {
        align-items: flex-start;
        padding: 20rem 0;
    }

    .popup-alert {
        grid-template-columns: auto;
        grid-gap: 20rem;
        padding: 60rem 40rem;
    }

    .popup-alert-col__start {
        order: -1;
    }

    .popup-form {
        padding: 40rem 30rem;
        border-radius: 40rem;
    }

    .textfield-input {
        min-height: 50rem;
    }

    .fab-button {
        width: 60rem;
        height: 60rem;
        color: var(--c1);
        background-color: #fff;
    }

    .fab-button ._icon {
        max-width: 28rem;
    }

    .expand-header {
        grid-gap: 20rem;
    }

    .expand-header-title {
        font-size: var(--f-d);
    }

    .expand-header-icon {
        max-height: calc(1.55 * var(--f-d));
    }

    .expand-header-icon ._icon {
        height: 16rem;
    }

    .expand-content {
        font-size: var(--f-s);
    }

    .k-form-holder {
        margin-top: 20rem;
    }

    .k-form {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 20rem;
        border-radius: 30rem;
    }

    .k-form ._title {
        margin-right: 0;
        margin-bottom: 15rem;
    }

    .map {
        right: 0;
        position: relative;
        height: 100vh;
    }

    .contacts {
        max-width: none;
        width: 100%;
        padding: 40rem;
        margin-bottom: 25rem;
    }
}

@media screen and (max-width: 767.98px) {
    .contacts {
        margin-bottom: -100rem;
    }

    .page-form .wrapper {
        padding: 0 44rem;
    }
}

@media screen and (max-width: 459.98px) {
    .face:nth-child(n + 5) {
        display: none;
    }

    .u9-2 {
        margin-left: -20vw;
        margin-right: -20vw;
    }
}

@media screen and (max-width: 359.98px) {
    .button-text {
        font-size: 12rem;
    }
}

@media screen and (min-width: 1024px) {
    .mobile {
        display: none !important;
    }
}

@media screen and (min-width: 1600px) {
    html {
        font-size: 1px;
    }
}

/* hover animations */
@media (hover: hover) and (pointer: fine) {
    .button {
        transition: all .15s;
    }

    .button__default:hover {
        background-color: #fff;
        color: var(--c1);
        border-color: #fff;
    }

    .button__default.button__main:hover {
        background-color: #fff;
        color: var(--c1);
        border-color: var(--c1);
    }

    .button__secondary:hover {
        background-color: #fff;
        color: var(--c1);
        border-color: #fff;
    }

    .button__secondary.button__contrast:hover {
        background-color: var(--c1);
        color: #fff;
        border-color: var(--c1);
    }

    .body-blue .header .button__default:hover {
        background-color: rgba(0, 0, 0, 0);
        color: #fff;
    }

    .body-white .header .button__default:hover,
    .popup-alert .button__default:hover {
        background-color: rgba(0, 0, 0, 0);
        border-color: var(--c1);
    }

    .mainnav-item {
        transition: color .15s;
    }

    .card4 .card-action,
    .card5 .card-action,
    .card6 .card-action {
        transition: transform .25s;
        will-change: transform;
    }

    .card4:hover .card-action,
    .card5:hover .card-action,
    .card6:hover .card-action {
        transform: translateX(10rem);
    }


    .bodyparts-card {
        transition: all .15s;
        transform: translateX(-10rem);
    }

    .bodyparts-card::before {
        transition: transform .15s;
        transform: translateX(10rem);
    }

    .bodyparts-dot:hover {
        background-color: #fff;
        z-index: 3;
    }

    .bodyparts-dot:hover::after {
        background-color: var(--c1);
    }

    .bodyparts-dot:hover~.bodyparts-image {
        opacity: 1;
    }

    .bodyparts-dot:hover .bodyparts-card {
        opacity: 1;
        transform: translateX(0);
    }

    .bodyparts-dot:hover .bodyparts-card::before {
        transform: translateX(0);
    }
}

@media screen and (max-device-width: 1023.98px) and (orientation: landscape) {
    .popup-main {
        padding-top: 20rem;
    }

    .popup-list {
        grid-gap: 15rem;
        margin-bottom: 40rem;
    }
}

.main-card {
	display: flex;
	align-items: baseline;
	width: 100%;
	margin-top: 50rem;
}

.main-card-box {
	display: block;
	width: 100%;
	padding: 0 10rem;
}

.main-card-box-content {
	-webkit-backdrop-filter: blur(30rem);
    backdrop-filter: blur(30rem);
    color: #000000;
    border-radius: 53rem;
    border: 3rem solid #ffffff57;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.4000000059604645);
}

.main-card-box-title {
	background: #6fb1ff;
	border-radius: 50rem;
	height: 130rem;
	display: flex;
    align-items: center;
	overflow: hidden;
}

.main-card-box-img {
	background: rgb(255 255 255 / 78%);
	min-width: 190rem;
    width: auto;
    height: 100%;
    border-radius: 50rem;
    overflow: hidden;
	display: flex;
}

.main-card-box-title img {
	width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
	margin: 0 auto;
}

.main-card-box-name {
	display: block;
	color: #ffffff;
	width: 100%;
	text-align: center;
	font-size: 32rem;
	line-height: 1.2;
	font-weight: 600;
	margin-left: -10rem;
}

.main-card-box-action {
	padding: 30rem 30rem 20rem 30rem;
    box-sizing: border-box;
    font-size: 16rem;
    min-height: 240rem;
}

.main-card-box-action p {
	line-height: 1.4;
	margin: 0 0 10rem 0;
}

.main-card-box-action ul {
	padding-left: 20rem;
	margin: 0 0 10rem 0;
	list-style: disc;
}

.main-card-box-action li {
    list-style: inherit;
}

.main-card-box-button {
    text-align: center;
    padding-bottom: 35rem;
}

.topbar-theme.desktop {
	direction: rtl;
}

@media screen and (max-width: 1024px) {
	.hero-title h1 {
		font-size: 29rem;
		padding: 0;
		margin-bottom: 0;
	}
	
	.main-card {
		display: block;
	}
		
	.main-card-box-content {
		border-radius: 25rem;
		margin-bottom: 20rem;
	}
		
	.main-card-box-title {
		border-radius: 25rem;
		height: 70rem;
	}
	
	.main-card-box-img {
		border-radius: 25rem;
		min-width: 0;
	}
	
	.main-card-box-name {
		font-size: 22rem;
	}
	
	.main-card-box-action {
		padding: 30rem;
		box-sizing: border-box;
		font-size: 16rem;
		min-height: auto;
	}
	
    .hero-content-main {
        padding: 40rem 0 40rem;
		justify-content: flex-start;
    }
	
	.main-card-box .button {
        width: 60%;
    }
}

.video-page, .audio-page {
	margin-bottom: 40rem;
}

.video-line, .audio-line {
	border-left: 2px solid #217de9;
	padding-left: 50rem;
}

.card-video {
	display: flex;
	align-items: normal;
	margin-bottom: 50rem;
	position: relative;
}

.card-audio {
	display: flex;
	align-items: normal;
	margin-bottom: 100rem;
	position: relative;
}

.card-video:last-child, .card-audio:last-child {
	margin-bottom: 0;
}

.card-video-disabled, .card-audio-disabled {
	opacity: 0.2;
	pointer-events: none;
}

.card-video-player {
	width: 30%;
}

.card-video-desc {
	width: 70%;
	padding-left: 50rem;
	padding-top: 0;
}

.card-audio-player {
	width: 30%;
}

.card-audio-desc {
	width: 70%;
	padding-left: 50rem;
	padding-top: 0;
}

.card-audio-player .link {
	margin: 0 0 15rem 0;
	color: #1d8df7;
	font-weight: bold;
	display: block;
}

.card-video-desc p, .card-audio-desc p {
	font-size: 0.89em;
	margin: 1.0em 0;
	padding-left: 0;
}

.card-video-desc p.title, .card-audio-desc p.title {
	padding-left: 0;
	font-size: 1em;
}

.card-video-desc-vp p, .card-audio-desc-vp p {
	font-size: 0.89em;
	margin: 1.0em 0;
	padding-left: 18rem;
}

.card-video .player-button {
    width: 54rem;
    height: 54rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c1);
    background-color: #fff;
    padding-left: 6rem;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
}

.card-video .icon {
    display: flex;
    max-height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 0;
    max-width: 24rem;
    width: auto;
    height: auto;
}
/*
.audio-player {
	display: flex;
    align-items: center;
	background: url(/images/audio_icon_1.svg) center left no-repeat;
	background-size: 55rem 55rem;
	padding-left: 80rem;
}

.audio-player .player-button {
    width: 170rem;
    height: 55rem;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #217dea;
    z-index: 1;
    transform: none;
	position: relative;
    top: inherit;
    left: inherit;
    margin: 0;
    padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	user-select: none;
}
*/
.player-button.playing {
	transform: scale(1.02);
}

.player-button .icon {
	transition: transform 0.2s ease;
	transform-origin: center;
}

.player-button span {
	transition: opacity 0.2s ease;
}
/*
.audio-player .player-button span {
    width: 93rem;
    margin-right: 0;
    text-align: center;
}

.audio-player .mic {
    width: auto;
	height: 55rem;
    margin: 0 20rem 0 0;
}
*/
.card-audio .icon {
    display: flex;
    max-height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 0;
    max-width: 24rem;
    width: auto;
    height: auto;
}

.card-video-desc strong.title, .card-audio-desc strong.title {
	font-weight: 700;
}

@media screen and (max-width: 1024px) {
	.card-video, .card-audio {
		display: block;
	}
	
	.card-audio {
		margin-bottom: 0rem;
	}
	
	.card-video-player, .card-audio-player {
		width: 100%;
	}
	
	.card-video-desc, .card-audio-desc {
		width: 100%;
		padding-left: 0;
		padding-top: 30rem;
		padding-bottom: 50rem;
	}
	
	.card-video:last-child, .card-audio:last-child {
		margin-bottom: 0;
	}
	
	.u11-1 .card5-kb {
		min-height: 300rem;
	}
	
	.u9_about {
		padding: 20rem 0 0;
		margin-top: 0;
	}
	
	.u9_about .u9-1 {
		padding: 50rem 50rem;
	}
	
	.u9_about .u9-2 {
		margin: 0 auto;
	}
	
	.u9_about .u9-2 .mobile {
		max-width: 100%;
		max-height: 100%;
		height: auto;
		width: auto;
	}
	
	.react-menu {
		display: block;
		border-radius: 24rem;
		margin: 80rem 0 20rem 0;
	}
	
	.react-menu a {
		width: calc(100% - 10rem);
		border-radius: 24px;
		margin: 5rem;
		padding: 4rem 10rem 4rem 70rem;
		font-size: 16rem;
	}

	.react-menu a:before {
		margin-left: -50rem;
	}
	
    .u2-6 .carousel-slide {
        display: block;
    }
	
	.u2-2 .card {
		padding-left: 0;
		width: 100%;
		transform: inherit;
	}
	
	.u2-2 .card img {
		max-width: 300rem;
		margin: 0 auto;
	}
	
	.card2_img {
		text-align: center;
	}
		
	.u4-2 .card3 {
		padding-left: 0;
	}
	
	.u5-2 .card-media-afo {
		right: 25rem;
	}
	
	.u5-2 .card4 .card-media-afo img {
		bottom: 25rem;
	}
	
	.u5-2 .card4 .card-content {
		padding: 30rem;
		min-height: 230rem;
	}
	
	.card4 .card-title a {
		background: #eff6fe8a;
	}
	
	.card-video .player-button {
		width: 54rem;
		height: 54rem;
		margin: auto;
		padding: 0 0 0 4rem;
	}
	
	.u5-2 .card4 .card-media img {
		object-fit: inherit;
		width: auto;
		height: 140rem;
	}
}

.breadcrumbs-prev {
	background: url(/images/prev_icon.svg) no-repeat center left;
    background-size: 34rem 34rem;
    padding-left: 40rem;
    color: #217dea;
    font-size: 17rem;
    margin-bottom: 30rem;
}

.space-video, .space-audio {
	display: block;
	margin: 60rem 0 0 0;
}

.snoska {
	font-size: 80%;
}

#warningHTML .warning_block {
	-webkit-backdrop-filter: blur(30rem);
    backdrop-filter: blur(30rem);
    background-color: rgba(255, 255, 255, 0.4000000059604645);
}

#warningHTML .warning_text {
	color: #61616173;
}

.copylink {
	background: #fff url(/images/link.svg) no-repeat center;
    background-size: 65%;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 0;
    border-radius: 2px;
    z-index: 2;
    opacity: 0.7;
	transition: opacity 0.3s;
}

.copylink:hover {
    opacity: 1;
}