.icon {
    display: inline-block;
    height: 1em;
    fill: currentColor;
}

.icon-arrow-right {
    font-size: 2.6em;
    width: 1em;
}

.icon-arrow_link {
    font-size: 2.6em;
    width: 1em;
}

.icon-checkmark {
    font-size: 3.2em;
    width: 1em;
}

.icon-close {
    font-size: 4em;
    width: 1em;
}

.icon-logo {
    font-size: 4.3em;
    width: 1.9069767442em;
}

.icon-logo2 {
    font-size: 3.3em;
    width: 1.2121212121em;
}

.icon-move404 {
    font-size: 9.4em;
    width: 1em;
}

.icon-newLogo {
    font-size: 3.5em;
    width: 3.9428571429em;
}

.icon-underline {
    font-size: 2.2em;
    width: 9.6818181818em;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

a img,
fieldset,
img {
    border: none
}

input[type=email],
input[type=tel],
input[type=text],
textarea {
    -webkit-appearance: none
}

button,
input[type=submit] {
    cursor: pointer;
}

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

textarea {
    overflow: auto;
}

button,
input {
    margin: 0;
    padding: 0;
    border: 0;
}

a,
a:focus,
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
span,
textarea {
    outline: 0;
}

ol,
ul {
    list-style-type: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
:after,
:before {
    box-sizing: inherit;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
}

button {
    -webkit-user-select: none;
    user-select: none;
}

body {
    position: relative;
    max-width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: 16px;
}

@font-face {
    font-family: satoshi;
    font-display: swap;
    src: url(../assets/fonts/Satoshi-Variable.ttf) format("truetype")
}

@font-face {
    font-family: Austin;
    font-display: swap;
    src: url(../assets/fonts/Austin-Light-Web.woff2) format("woff2")
}

@font-face {
    font-family: AustinItalic;
    font-display: swap;
    src: url(../assets/fonts/Austin-LightItalic-Web.woff2) format("woff2")
}

@font-face {
    font-family: editorial;
    font-display: swap;
    src: url(../assets/fonts/EditorialNew-Thin.otf)
}

@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Variable.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: satoshi;
    src: url(../assets/fonts/satoshi/Satoshi-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.font-italic {
    font-family: AustinItalic, serif;
    font-style: normal;
}

.font-sans {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-family: Austin, sans-serif;
    font-style: normal;
}

.font-light {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-weight: 300;
}

html {
    overflow-x: unset !important;
}

body {
    font-size: 16px;
    /* background-color: #dadada; */
}

.container {
    margin: 0 auto;
}

@media only screen and (max-width:1440px) {
    .container {
        width: 1280px;
    }
}

#scroller {
    max-width: 100vw;
    overflow: hidden !important;
    position: relative;
    will-change: transform;
    -webkit-perspective: 1px;
    perspective: 1px;
}

canvas {
    isolation: isolate;
}

main {
    position: relative;
}

body {
    font-size: 16px;
    /* background-color: #dadada; */
}

.container {
    margin: 0 auto;
}

@media only screen and (max-width:1440px) {
    .container {
        width: 1280px;
    }
}

#translate {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    max-height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    pointer-events: none;
}

#first,
#second,
#third {
    visibility: hidden;
}

.split-word {
    overflow: hidden;
    display: inline-block;
    padding-left: 10px;
    margin-left: -10px;
}

.split-char {
    letter-spacing: .001px;
    line-height: 1;
    -webkit-text-rendering: optimizeSpeed;
    text-rendering: optimizeSpeed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-left: -10px;
    padding-left: 10px;
    will-change: transform;
}

.whitebg {
    position: relative;
    z-index: 6;
    background-color: #f5f5eb;
}

.title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 100px;
    font-weight: 300;
    line-height: .93;
    overflow: hidden;
}

@media only screen and (max-width:1440px) {
    .title {
        font-size: 80px;
    }
}

@media only screen and (max-width:1200px) {
    .title {
        font-size: 72px;
    }
}

@media only screen and (max-width:767px) {
    .title {
        font-size: 52px;
    }
}

@media only screen and (max-width:480px) {
    .title {
        display: block;
    }
}

.text-block {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.22;
    margin-bottom: 20px;
    color: #1b1c1e;
}

@media only screen and (max-width:1024px) {
    .text-block {
        font-size: 18px;
        line-height: 1.33;
    }
}

.green-pill {
    font-family: Austin, serif;
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    line-height: 110%;
    color: #fbbc05;
    padding: .5rem 1rem;
    border: 1px solid #fbbc05;
    border-radius: 999px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

@media only screen and (max-width:1024px) {
    .green-pill {
        font-size: 28px;
    }
}

@media only screen and (max-width:768px) {
    .green-pill {
        font-size: 24px;
        padding: 8px 12px;
        height: 42px;
    }
}

.button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    padding: 19px 30px;
    height: 62px;
    width: 100%;
    border-radius: 34px;
    background-color: #fbbc05;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #fff;
    transition: color .3s ease-in;
}

@media only screen and (min-width:768px) {
    .button:hover {
        color: #fff;
    }

    .button:hover .button__arrow {
        stroke: #fff;
    }

    .button:hover .button__hover {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        border-radius: 0;
    }
}

.button__arrow {
    flex-shrink: 0;
    font-size: 26px;
    stroke: #fff;
    margin-left: auto;
}

.button__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
    background-color: #1b1c1e;
    border-radius: 50% 50% 0 0;
    transition: border-radius .5s ease-out, -webkit-transform .5s ease-out;
    transition: transform .5s ease-out, border-radius .5s ease-out;
    transition: transform .5s ease-out, border-radius .5s ease-out, -webkit-transform .5s ease-out;
    pointer-events: none;
}

@media only screen and (max-width:767px) {
    .button__hover {
        display: none;
    }
}

.button-round {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    border: 1px solid #1b1c1e;
    padding: 10px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: transparent;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    line-height: 24px;
    color: #1b1c1e;
    transition: color .3s ease-in;
}

@media only screen and (max-width:767px) {
    .button-round {
        font-size: 18px;
        width: 100px;
        height: 100px;
    }
}

@media only screen and (min-width:768px) {
    .button-round:hover {
        color: #fff
    }

    .button-round:hover .button-round__arrow {
        stroke: #fff
    }

    .button-round:hover .button-round__hover {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        border-radius: 50% 50% 0 0
    }
}

.button-round__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
    background-color: #1b1c1e;
    border-radius: 35% 35% 0 0;
    transition: border-radius .5s ease-out, -webkit-transform .5s ease-out;
    transition: transform .5s ease-out, border-radius .5s ease-out;
    transition: transform .5s ease-out, border-radius .5s ease-out, -webkit-transform .5s ease-out
}

@media only screen and (max-width:767px) {
    .button-round__hover {
        display: none
    }
}

.header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    top: 1rem;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    z-index: 100;
    width: 100vw;
    pointer-events: none
}

.header--mobile {
    display: none;
    top: 11px;
    padding: 0 11px 0 18px
}

@media only screen and (max-width:767px) {
    .header {
        display: none
    }

    .header--mobile {
        display: flex
    }
}

.header__menu-block {
    z-index: 2;
    display: flex;
    pointer-events: all
}

.header__menu {
    height: 51px;
    border-radius: 100px;
    background-color: grey;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 24px 11px;
    background-color: #f5f5eb
}

@media only screen and (max-width:900px) {
    .header__menu {
        padding: 10px 16px 11px
    }
}

.header__menu:not(.header__menu--help) {
    margin-right: 12px
}

@media only screen and (max-width:767px) {
    .header__menu:not(.header__menu--help) {
        margin-right: 4px
    }
}

.header__menu.with-logo {
    padding-left: 22px;
    padding-right: 26px;
    gap: 0
}

.header__menu.with-logo .header__menu-item:not(:last-child) {
    margin-right: 12px
}

@media only screen and (max-width:767px) {
    .header__menu.with-logo {
        padding: 0;
        background-color: transparent
    }
}

.header__menu--help {
    background-color: #fbbc05;
    color: #fff;
    cursor: pointer;
    font-size: 1.125rem;
    margin-right: 0
}

.header__logo-animation {
    position: relative;
    width: 137px;
    height: 24px;
    margin-bottom: 10px;
}

.header__logo-animation .header__menu-item {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
    opacity: 0;
    text-align: left;
    width: 100%;
    line-height: 24px
}

.header__logo-link-mob {
    z-index: 2
}

.header__menu-item {
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1.2;
    flex-shrink: 0
}

.header__menu-item:not(:last-child) {
    margin-right: 20px
}

.header__menu-item:hover {
    opacity: .78
}

.header__menu-item.header__logo {
    font-size: 33px
}

.header .new__custom_menu {
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
}

.header .new__custom_menu .header__menu-item {
    background: #f5f5eb;
    height: 51px;
    display: flex;
    margin: 0;
    padding: 0 24px;
    align-items: center;
    color: #000;
    transition: color .3s ease-in-out
}

.header .new__custom_menu .header__menu-item:nth-child(2) {
    margin: 0 2px
}

.header .new__custom_menu .header__menu-item:nth-child(1) {
    border-radius: 100px 0 0 100px
}

.header .new__custom_menu .header__menu-item:nth-child(3) {
    border-radius: 0 100px 100px 0
}

.header .new__custom_menu .header__menu-item:hover {
    opacity: 1;
    color: rgba(0, 0, 0, .75)
}

.header__menu--button {
    cursor: pointer
}

.header__menu--button .header__menu-icon-top {
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out
}

.header__menu--button .header__menu-icon-bottom {
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out
}

.header__menu--button.is-active .header__menu-icon-top {
    -webkit-transform: translate(2px, -8px) rotate(45deg);
    transform: translate(2px, -8px) rotate(45deg)
}

.header__menu--button.is-active .header__menu-icon-bottom {
    -webkit-transform: translate(2px, 7px) rotate(-45deg);
    transform: translate(2px, 7px) rotate(-45deg)
}

.header .header__logo-animation .header__menu-item:nth-child(n+1) {
    -webkit-animation-name: logo-title1;
    animation-name: logo-title1;
    -webkit-animation-duration: 6.6s;
    animation-duration: 6.6s;
    -webkit-animation-delay: 2.15s;
    animation-delay: 2.15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.header .header__logo-animation .header__menu-item:nth-child(n+2) {
    -webkit-animation-name: logo-title1;
    animation-name: logo-title1;
    -webkit-animation-duration: 6.6s;
    animation-duration: 6.6s;
    -webkit-animation-delay: 4.3s;
    animation-delay: 4.3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.header .header__logo-animation .header__menu-item:nth-child(n+3) {
    -webkit-animation-name: logo-title1;
    animation-name: logo-title1;
    -webkit-animation-duration: 6.6s;
    animation-duration: 6.6s;
    -webkit-animation-delay: 6.45s;
    animation-delay: 6.45s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes logo-title1 {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }

    8.25% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    38% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }
}

@keyframes logo-title1 {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }

    8.25% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    38% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    background-color: #dadada;
    padding: 0 28px 28px;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    transition: opacity .5s cubic-bezier(.33, 1, .68, 1), -webkit-transform .5s cubic-bezier(.33, 1, .68, 1);
    transition: transform .5s cubic-bezier(.33, 1, .68, 1), opacity .5s cubic-bezier(.33, 1, .68, 1);
    transition: transform .5s cubic-bezier(.33, 1, .68, 1), opacity .5s cubic-bezier(.33, 1, .68, 1), -webkit-transform .5s cubic-bezier(.33, 1, .68, 1)
}

.menu.is-active {
    transition: opacity .5s cubic-bezier(.33, 1, .68, 1), -webkit-transform .5s cubic-bezier(.33, 1, .68, 1);
    transition: transform .5s cubic-bezier(.33, 1, .68, 1), opacity .5s cubic-bezier(.33, 1, .68, 1);
    transition: transform .5s cubic-bezier(.33, 1, .68, 1), opacity .5s cubic-bezier(.33, 1, .68, 1), -webkit-transform .5s cubic-bezier(.33, 1, .68, 1);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.menu__list {
    list-style: none;
    margin-top: 124px
}

.menu__list li {
    margin-bottom: 28px
}

.menu__list-item {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 42px;
    font-weight: 300;
    line-height: 38px;
    cursor: pointer
}

.menu__list-item i {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-size: 42px;
    font-weight: 300;
    line-height: 38px
}

.menu__list-item:hover {
    opacity: .8
}

.menu__socials {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    justify-content: space-between
}

.menu__social-btn {
    font-size: 18px;
    padding-left: 26px;
    padding-right: 26px
}

.menu__social {
    display: block;
    width: calc(50% - 5px);
    margin-bottom: 10px
}

.menu__social:last-child {
    width: 100%;
    margin-bottom: 0
}

.hero {
    position: relative;
    width: 100%;
    z-index: 5;
    margin-bottom: -40vw;
    -webkit-backface-visibility: hidden
}

@media only screen and (max-width:767px) {
    .hero {
        margin-bottom: -50vw
    }
}

.hero__podium {
    width: 88%;
    height: 44vw;
    background-color: #f5f5eb;
    overflow: hidden;
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    position: relative;
    margin: 0 auto;
    margin-top: -118px;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

@media only screen and (max-width:1200px) {
    .hero__podium {
        margin-top: -90px
    }
}

@media only screen and (max-width:1024px) {
    .hero__podium {
        margin-top: -70px
    }
}

@media only screen and (max-width:992px) {
    .hero__podium {
        width: 100vw;
        height: 55vw
    }
}

@media only screen and (max-width:767px) {
    .hero__podium {
        width: calc(100vw - 20px);
        height: 55vw;
        margin-top: 0
    }
}

.hero__podium-text {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 50px;
    line-height: 1.20;
    letter-spacing: 0;
    text-align: center;
    padding-top: 215px;
    width: 800px;
    margin: 0 auto;
    color: #1b1c1e;
    opacity: 1
}

@media only screen and (max-width:1440px) {
    .hero__podium-text {
        font-size: 45px;
        width: 700px;
        padding-top: 170px
    }
}

@media only screen and (max-width:1200px) {
    .hero__podium-text {
        font-size: 58px;
        width: 640px;
        padding-top: 130px
    }
}

@media only screen and (max-width:1024px) {
    .hero__podium-text {
        font-size: 46px;
        width: 590px;
        padding-top: 100px
    }
}

@media only screen and (max-width:992px) {
    .hero__podium-text {
        width: 510px;
        padding-top: 126px;
        font-size: 68px
    }
}

@media only screen and (max-width:767px) {
    .hero__podium-text {
        font-size: 40px;
        width: 315px;
        padding-top: 10%
    }
}

.hero__podium-text .italic {
    font-family: AustinItalic, serif;
    font-style: normal;
    font-size: inherit;
    display: inline-block
}

.hero__podium-text .italic--wave {
    position: relative
}

.hero__podium-text .italic--wave .hero__underline {
    width: 100%;
    height: auto;
    bottom: -28px;
    z-index: -1
}

.hero__podium-text .italic--wave .hero__underline img {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

@media only screen and (max-width:1200px) {
    .hero__podium-text .italic--wave .hero__underline {
        bottom: -14px
    }
}

.hero__podium-text .italic--line {
    position: relative
}

.hero__podium-text .italic--line .hero__underline {
    height: 5px;
    background-color: #fbbc05;
    width: 100%;
    position: absolute;
    bottom: 0
}

@media only screen and (max-width:1200px) {
    .hero__podium-text .italic--line .hero__underline {
        height: 3px
    }
}

.hero__underline {
    position: absolute;
    overflow: hidden;
    bottom: -15px;
    left: 0;
    right: 0;
    width: 100%
}

.hero__underline img {
    height: 22px
}

@media only screen and (max-width:1200px) {
    .hero__underline img {
        height: 12px
    }
}

@media only screen and (max-width:767px) {
    .hero__underline {
        stroke: 3px;
        bottom: -16px
    }
}

.hero__ball {
    display: block;
    position: relative;
    width: 610px;
    height: 610px;
    margin: -305px auto 0;
    border-radius: 50%;
    -webkit-transform: translate3d(0 -200vh 0);
    transform: translate3d(0 -200vh 0);
    z-index: 2
}

.hero__ball img {
    width: 100%;
    height: 100%
}

@media only screen and (max-width:1440px) {
    .hero__ball {
        width: 500px;
        height: 500px;
        margin: -250px auto 0
    }
}

@media only screen and (max-width:1024px) {
    .hero__ball {
        width: 380px;
        height: 380px;
        margin: -190px auto 0
    }
}

@media only screen and (max-width:767px) {
    .hero__ball {
        width: 250px;
        height: 250px;
        margin: -125px auto 0
    }
}

.hero__space {
    width: 610px;
    margin: 0 auto;
    height: 70vh;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

@media only screen and (max-width:1440px) {
    .hero__space {
        width: 500px
    }
}

@media only screen and (max-width:1024px) {
    .hero__space {
        width: 380px
    }
}

@media only screen and (max-width:767px) {
    .hero__space {
        width: 250px
    }
}

.hero__title {
    position: absolute;
    z-index: 4;
    width: 610px;
    top: 49vh;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    pointer-events: none
}

.hero__name {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 200px;
    color: #1b1c1e;
    line-height: .5;
    margin-left: -450px
}

@media only screen and (max-width:1440px) {
    .hero__name {
        font-size: 118px;
        margin-left: -350px
    }
}

@media only screen and (max-width:1024px) {
    .hero__name {
        font-size: 92px;
        margin-left: -240px
    }
}

@media only screen and (max-width:599px) {
    .hero__name {
        margin-left: -190px;
        font-size: 80px
    }
}

.hero__surname {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 200px;
    color: #1b1c1e;
    line-height: 1.2;
    margin-left: 326px
}

@media only screen and (max-width:1440px) {
    .hero__surname {
        font-size: 118px;
        margin-right: 50px
    }
}

@media only screen and (max-width:1024px) {
    .hero__surname {
        font-size: 92px;
        margin-left: 160px
    }
}

@media only screen and (max-width:599px) {
    .hero__surname {
        margin-left: 100px;
        font-size: 80px
    }
}

.hero__bottom-space {
    width: 100vw;
    height: 1260px;
    margin: 0 auto 0;
    position: relative;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: calc(var(--vh, 1vh) * -50 + 305px)
}

.hero__bottom-space::-webkit-scrollbar {
    display: none
}

.hero__podium-bg {
    z-index: 1;
    background-color: #dadada;
    width: 1260px;
    position: relative;
    margin: -630px auto 0;
    height: 300px
}

@media only screen and (max-width:1440px) {
    .hero__podium-bg {
        margin-top: -512px;
        height: 400px
    }
}

.hero__dashes-section {
    position: absolute;
    height: 110vh;
    width: 100vw;
    z-index: 0;
    height: 110vh;
    height: calc(65vh + 200px + 20vw)
}

@media only screen and (max-width:992px) {
    .hero__dashes-section {
        height: calc(65vh + 200px + 20vw)
    }
}

@media only screen and (max-width:767px) {
    .hero__dashes-section {
        height: calc(68vh + 125px + 20vw)
    }
}

@media only screen and (max-width:460px) {
    .hero__dashes-section {
        height: calc(72vh + 125px + 20vw)
    }
}

.hero__dashes-section .hero__space {
    background-color: #dadada
}

.hero__dashes {
    overflow: hidden;
    position: absolute;
    top: 0;
    margin: 0 auto;
    background-color: #dadada;
    background-repeat: repeat-x;
    height: 100%;
    width: 78vw;
    left: 11vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((78vw - 1px)/ 24 - 1px), rgba(255, 255, 255, .6) calc((78vw - 1px)/ 24 - 1px), rgba(255, 255, 255, .6) calc((78vw - 1px)/ 24)), linear-gradient(to left, transparent 1px, transparent calc((78vw - 1px)/ 24 - 1px), rgba(255, 255, 255, .6) calc((78vw - 1px)/ 24 - 1px), rgba(255, 255, 255, .6) calc((78vw - 1px)/ 24));
    background-size: calc((78vw - 1px)/ 24) 100%, calc((78vw - 1px)/ 24) 93%;
    background-position-x: calc((78vw - 1px)/ 24 / 2), calc((78vw - 1px)/ 24)
}

@media only screen and (max-width:992px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 4px)/ 14 - 1px), rgba(255, 255, 255, .6) calc((88vw - 4px)/ 14 - 1px), rgba(255, 255, 255, .6) calc((88vw - 4px)/ 14)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 4px)/ 14 - 1px), rgba(255, 255, 255, .6) calc((88vw - 4px)/ 14 - 1px), rgba(255, 255, 255, .6) calc((88vw - 4px)/ 14));
        background-size: calc((88vw - 4px)/ 14) 100%, calc((88vw - 4px)/ 14) 93%;
        background-position-x: calc((88vw - 4px)/ 14 / 2), calc((88vw - 4px)/ 14)
    }
}

@media only screen and (max-width:767px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 10)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 10));
        background-size: calc((88vw - 2px)/ 10) 98%, calc((88vw - 2px)/ 10) 97%;
        background-position-x: calc((88vw - 2px)/ 10 / 2), calc((88vw - 2px)/ 10)
    }
}

@media only screen and (max-width:520px) {
    .hero__dashes {
        width: calc(88vw + 2px);
        left: 6vw;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px)/ 8 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 8 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 8)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px)/ 8 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 8 - 1px), rgba(255, 255, 255, .6) calc((88vw - 2px)/ 8));
        background-size: calc((88vw - 2px)/ 8) 100%, calc((88vw - 2px)/ 8) 97%;
        background-position-x: calc((88vw - 2px)/ 8 / 2), calc((88vw - 2px)/ 8)
    }
}

.introduction {
    position: relative;
    z-index: 4;
    width: 88%;
    margin: 0 auto;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    background-color: #FFFFE0;
    padding-top: 46.5277777778vw;
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    padding-bottom: 515px
}

@media only screen and (max-width:1200px) {
    .introduction {
        padding-bottom: 515px;
        padding-top: 46.5277777778vw
    }
}

@media only screen and (max-width:992px) {
    .introduction {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .introduction {
        width: calc(100% - 20px);
        padding: 0 18px 156px;
        margin: 64px auto 0;
        padding-top: 61.0666666667vw
    }
}

.introduction .font-italic div div:nth-child(2) {
    padding-right: 5px
}

.introduction .font-italic div div:nth-child(3) {
    padding-left: 5px
}

.introduction__title {
    margin-bottom: 25px
}

@media only screen and (min-width:416px) {
    .introduction__title br {
        display: none
    }
}

.introduction__info {
    display: flex;
    justify-content: space-between
}

@media only screen and (max-width:767px) {
    .introduction__info {
        flex-direction: column;
        margin-top: 22px
    }
}

.introduction__info-block {
    width: 50%
}

@media only screen and (max-width:767px) {
    .introduction__info-block {
        width: 100%
    }
}

.introduction__info-block.with-padding {
    padding-left: 38px
}

@media only screen and (max-width:1024px) {
    .introduction__info-block.with-padding {
        padding-left: 16px
    }
}

@media only screen and (max-width:767px) {
    .introduction__info-block.with-padding {
        padding-left: 0
    }
}

.introduction__paragraph {
    width: 480px
}

@media only screen and (max-width:1440px) {
    .introduction__paragraph {
        width: 400px
    }
}

@media only screen and (max-width:1200px) {
    .introduction__paragraph {
        width: 360px
    }
}

@media only screen and (max-width:1024px) {
    .introduction__paragraph {
        width: 300px
    }
}

@media only screen and (max-width:767px) {
    .introduction__paragraph {
        width: 100%
    }
}

.introduction__also {
    display: inline-block
}

@media only screen and (max-width:767px) {
    .introduction__also {
        display: none
    }
}

.introduction__also--mobile {
    display: none
}

@media only screen and (max-width:767px) {
    .introduction__also--mobile {
        display: block
    }
}

@media only screen and (max-width:416px) {
    .introduction__also--mobile {
        display: inline-block;
        margin-top: 5px;
        position: absolute;
        margin-left: 10px
    }
}

.snake__ball {
    position: relative;
    width: 630px;
    height: 630px;
    margin: -315px auto -315px;
    background-color: #fbbc05;
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    z-index: 4;
    margin-bottom: 247px;
    overflow: visible;
    isolation: isolate;
    will-change: transform
}

@media only screen and (max-width:1440px) {
    .snake__ball {
        width: 500px;
        height: 500px;
        margin: -250px auto 247px
    }
}

@media only screen and (max-width:1024px) {
    .snake__ball {
        width: 380px;
        height: 380px;
        margin: -250px auto 247px
    }
}

@media only screen and (max-width:767px) {
    .snake__ball {
        width: 330px;
        height: 330px;
        margin: 0 auto 247px;
        margin-bottom: 185px
    }
}

.snake__image {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    display: block;
    overflow: hidden;
    will-change: transform
}

.snake__image-1 {
    width: 470px;
    height: 600px;
    left: 0;
    padding: 2px
}

.snake__image-1.is-savemode {
    display: none
}

@media only screen and (max-width:1440px) {
    .snake__image-1 {
        left: -8%
    }
}

@media only screen and (max-width:1200px) {
    .snake__image-1 {
        width: 352px;
        height: 450px
    }
}

@media only screen and (max-width:1024px) {
    .snake__image-1 {
        left: -5%
    }
}

@media only screen and (max-width:767px) {
    .snake__image-1 {
        width: 200px;
        height: 253px;
        left: 10%;
        top: 14%
    }
}

.snake__image-2 {
    width: 360px;
    height: 240px;
    object-position: center 18%;
    right: 0
}

.snake__image-2 img {
    width: 100%;
    height: auto
}

@media only screen and (max-width:1440px) {
    .snake__image-2 {
        right: -8%
    }
}

@media only screen and (max-width:1200px) {
    .snake__image-2 {
        width: 288px;
        height: 180px;
        right: -5%
    }
}

@media only screen and (max-width:767px) {
    .snake__image-2 {
        top: 14%;
        right: 10%;
        width: 178px;
        height: auto
    }
}

.snake .card {
    width: 100%;
    object-fit: cover;
    object-position: center
}

.snake .card:not(:first-child) {
    object-position: center 18%
}

.snake__snake-container {
    position: relative;
    width: 500px;
    height: 811.4035087719px;
    margin: 0 auto
}

@media only screen and (max-width:1440px) {
    .snake__snake-container {
        width: 460px
    }
}

@media only screen and (max-width:1024px) {
    .snake__snake-container {
        width: 330px;
        height: 535.5263157895px
    }
}

.snake__snake {
    z-index: 1;
    width: 500px;
    height: 811.4035087719px;
    position: absolute;
    display: block;
    top: -20px;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed
}

.snake__snake path {
    stroke: transparent;
    fill: none;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    shape-rendering: optimizeSpeed
}

@media only screen and (max-width:1440px) {
    .snake__snake {
        width: 460px;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
}

@media only screen and (max-width:1024px) {
    .snake__snake {
        width: 330px;
        height: 535.5263157895px
    }
}

.snake__text {
    font-size: 4px;
    font-family: Austin, serif;
    font-style: normal;
    pointer-events: none;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed
}

.portfolio {
    position: relative;
    z-index: 3
}

.portfolio__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 3rem;
    text-align: center;
    color: #1b1c1e;
    font-weight: 300;
    margin-bottom: 48px
}

@media only screen and (max-width:767px) {
    .portfolio__title {
        font-size: 1.875rem
    }
}

.portfolio__items {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box
}

@media only screen and (min-width:768px) {
    .portfolio__items {
        padding-bottom: 218px;
        display: block
    }
}

@media only screen and (max-width:767px) {
    .portfolio__items {
        padding-bottom: 90px
    }
}

.portfolio__item {
    cursor: pointer;
    position: relative;
    display: block
}

@media only screen and (max-width:767px) {
    .portfolio__item {
        border: 1px solid #1b1c1e;
        border-radius: 50%;
        width: 71vw;
        height: 71vw
    }

    .portfolio__item .portfolio__item-title {
        font-size: 30px
    }

    .portfolio__item .portfolio__item-descr {
        font-size: 16px
    }

    .portfolio__item:hover .portfolio__image-darken {
        background-color: rgba(0, 0, 0, .5647058824)
    }

    .portfolio__item:nth-child(1) {
        margin-top: 0vw;
        margin-left: -8.5333333333vw;
        height: 74.6666666667vw;
        width: 74.6666666667vw
    }

    .portfolio__item:nth-child(1) .portfolio__item-descr {
        width: 154px;
        margin: 0 auto;
        margin-top: 8px
    }

    .portfolio__item:nth-child(2) {
        margin-top: 0vw;
        margin-left: 35.7333333333vw;
        height: 64vw;
        width: 64vw
    }

    .portfolio__item:nth-child(2) .portfolio__item-descr {
        margin-top: 18px
    }

    .portfolio__item:nth-child(3) {
        margin-top: -14.6666666667vw;
        margin-left: -6.6666666667vw;
        height: 53.3333333333vw;
        width: 53.3333333333vw
    }

    .portfolio__item:nth-child(3) .portfolio__item-descr {
        width: 130px;
        margin: 0 auto;
        margin-top: 11px
    }

    .portfolio__item:nth-child(4) {
        margin-top: -14.1333333333vw;
        margin-left: 35.7333333333vw;
        height: 64.5333333333vw;
        width: 64.5333333333vw
    }

    .portfolio__item:nth-child(4) .portfolio__item-descr {
        width: 154px;
        margin: 0 auto;
        margin-top: 8px
    }

    .portfolio__item:nth-child(5) {
        margin-top: -4.8vw;
        margin-left: -5.8666666667vw;
        height: 74.6666666667vw;
        width: 74.6666666667vw
    }

    .portfolio__item:nth-child(5) .portfolio__item-descr {
        width: 140px;
        margin: 0 auto;
        margin-top: 11px
    }

    .portfolio__item:nth-child(6) {
        margin-top: -8vw;
        margin-left: 46.9333333333vw;
        height: 53.3333333333vw;
        width: 53.3333333333vw
    }

    .portfolio__item:nth-child(6) .portfolio__item-descr {
        width: 110px;
        margin: 0 auto;
        margin-top: 11px
    }
}

@media only screen and (min-width:768px) {
    .portfolio__item {
        transition: z-index .7s linear
    }

    .portfolio__item.is-active {
        z-index: 100
    }

    .portfolio__item.is-active .portfolio__image-container {
        transition: -webkit-clip-path .7s ease-in-out .4s;
        transition: clip-path .7s ease-in-out .4s;
        transition: clip-path .7s ease-in-out .4s, -webkit-clip-path .7s ease-in-out .4s;
        flex-shrink: 0;
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%)
    }

    .portfolio__item.is-active img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .portfolio__item.is-active .portfolio__item-title {
        color: #fbbc05;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    .portfolio__item.is-active .portfolio__item-descr {
        color: #fbbc05;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    .portfolio__item.is-inactive {
        z-index: 1
    }

    .portfolio__item.is-inactive .portfolio__item-title {
        opacity: 30%
    }

    .portfolio__item.is-inactive .portfolio__item-descr {
        opacity: 30%
    }

    .portfolio__item.is-active .portfolio__image-container.first_transition {
        transition: -webkit-clip-path .7s ease-in-out 0s;
        transition: clip-path .7s ease-in-out 0s;
        transition: clip-path .7s ease-in-out 0s, -webkit-clip-path .7s ease-in-out 0s
    }
}

@media only screen and (min-width:768px) {
    .portfolio__headers {
        margin: 0 auto;
        display: block;
        width: 100%
    }

    .portfolio__headers:not(:last-child) {
        padding-bottom: 76px
    }
}

@media only screen and (max-width:767px) {
    .portfolio__headers {
        z-index: 2;
        width: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.portfolio__item-title {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    text-align: center;
    color: #1b1c1e;
    font-size: 100px;
    font-weight: 300;
    line-height: .98;
    z-index: 1;
    transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

@media only screen and (max-width:1440px) {
    .portfolio__item-title {
        font-size: 80px
    }
}

@media only screen and (max-width:767px) {
    .portfolio__item-title {
        font-size: 2.25rem;
        line-height: 1.05;
        -webkit-user-select: none;
        user-select: none
    }
}

.portfolio__item-descr {
    position: relative;
    font-family: satoshi, sans-serif;
    font-style: normal;
    text-align: center;
    color: #1b1c1e;
    font-weight: 300;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 2px;
    z-index: 1;
    transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1), -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
}

@media only screen and (max-width:1440px) {
    .portfolio__item-descr {
        font-size: 1.125rem
    }
}

@media only screen and (max-width:767px) {
    .portfolio__item-descr {
        font-size: 1.125rem;
        margin-top: 8px;
        line-height: 1.33;
        -webkit-user-select: none;
        user-select: none
    }
}

.portfolio__image-container {
    position: absolute;
    z-index: 0;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: -webkit-clip-path .7s ease-in-out 0s;
    transition: clip-path .7s ease-in-out 0s;
    transition: clip-path .7s ease-in-out 0s, -webkit-clip-path .7s ease-in-out 0s;
    pointer-events: none
}

@media only screen and (min-width:768px) {
    .portfolio__image-container {
        -webkit-clip-path: circle(0);
        clip-path: circle(0)
    }
}

.portfolio__image-container--1 {
    top: -100%;
    left: -20%
}

.portfolio__image-container--2 {
    top: -20vw;
    left: 50%;
    width: 44vw;
    height: 44vw
}

.portfolio__image-container--3 {
    width: 38vw;
    height: 38vw;
    left: -4%;
    top: -10vw
}

.portfolio__image-container--4 {
    top: -20vw;
    left: 50%;
    width: 44vw;
    height: 44vw
}

.portfolio__image-container--5 {
    width: 44vw;
    height: 44vw;
    left: 1.4vw;
    top: -5.28vw
}

.portfolio__image-container--6 {
    width: 38vw;
    height: 38vw;
    left: 58%;
    bottom: -1.52vw
}

.portfolio__image-container--7 {
    width: 50vw;
    height: 50vw;
    left: 62.5%;
    top: -31vw
}

@media only screen and (max-width:767px) {
    .portfolio__image-container {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        pointer-events: all;
        width: 100%;
        height: 100%
    }
}

.portfolio__image {
    width: 100%;
    height: 100%
}

.portfolio__image img {
    width: 100%;
    height: 100%;
    object-position: center center;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform 10s ease-out;
    transition: transform 10s ease-out;
    transition: transform 10s ease-out, -webkit-transform 10s ease-out
}

@media only screen and (max-width:767px) {
    .portfolio__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fbbc05;
        position: absolute;
        bottom: 0;
        right: 20%;
        color: #fff;
        font-size: 26px
    }
}

.portfolio__arrow {
    font-size: 21px;
    stroke: #fff
}

@media only screen and (min-width:768px) {
    .portfolio__arrow {
        display: none
    }
}

.portfolio__dashes {
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: -800px;
    bottom: 0;
    background-color: #dadada;
    background-repeat: repeat-x;
    width: 88vw;
    left: 6vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 1px)/ 28)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 1px)/ 28));
    background-size: calc((88vw - 1px)/ 28) 100%, calc((88vw - 1px)/ 28) 100%;
    background-position-x: calc((88vw - 1px)/ 28 / 2), calc((88vw - 1px)/ 28)
}

@media only screen and (max-width:992px) {
    .portfolio__dashes {
        width: calc(100vw - 48px);
        left: 24px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px)/ 16 - 1px), rgba(255, 255, 255, .6) calc((100vw - 48px - 1px)/ 16 - 1px), rgba(255, 255, 255, .6) calc((100vw - 48px - 1px)/ 16)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px)/ 16 - 1px), rgba(255, 255, 255, .6) calc((100vw - 48px - 1px)/ 16 - 1px), rgba(255, 255, 255, .6) calc((100vw - 48px - 1px)/ 16));
        background-size: calc((100vw - 48px - 1px)/ 16) 100%, calc((100vw - 48px - 1px)/ 16) 100%;
        background-position-x: calc((100vw - 48px - 1px)/ 16 / 2), calc((100vw - 48px - 1px)/ 16)
    }
}

@media only screen and (max-width:767px) {
    .portfolio__dashes {
        width: calc(100vw - 20px);
        left: 10px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px)/ 12 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 1px)/ 12 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 1px)/ 12)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px)/ 12 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 1px)/ 12 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 1px)/ 12));
        background-size: calc((100vw - 20px - 1px)/ 12) 100%, calc((100vw - 20px - 1px)/ 12) 100%;
        background-position-x: calc((100vw - 20px - 1px)/ 12 / 2), calc((100vw - 20px - 1px)/ 12)
    }
}

@media only screen and (max-width:520px) {
    .portfolio__dashes {
        width: calc(100vw - 20px);
        left: 11px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 2px)/ 10)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 2px)/ 10 - 1px), rgba(255, 255, 255, .6) calc((100vw - 20px - 2px)/ 10));
        background-size: calc((100vw - 20px - 2px)/ 10) 100%, calc((100vw - 20px - 2px)/ 10) 100%;
        background-position-x: calc((100vw - 20px - 2px)/ 10 / 2), calc((100vw - 20px - 2px)/ 10)
    }
}

.portfolio .its-safari {
    width: 89vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((89vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((89vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((89vw - 1px)/ 28)), linear-gradient(to left, transparent 1px, transparent calc((89vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((89vw - 1px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((89vw - 1px)/ 28));
    background-size: calc((89vw - 1px)/ 28) 100%, calc((89vw - 1px)/ 28) 100%;
    background-position-x: calc((89vw - 1px)/ 28 / 2), calc((89vw - 1px)/ 28)
}

.portfolio .its-windows {
    width: 88vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 17px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 17px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 17px)/ 28)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 17px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 17px)/ 28 - 1px), rgba(255, 255, 255, .6) calc((88vw - 17px)/ 28));
    background-size: calc((88vw - 17px)/ 28) 100%, calc((88vw - 17px)/ 28) 100%;
    background-position-x: calc((88vw - 17px)/ 28 / 2), calc((88vw - 17px)/ 28)
}

.portfolio .this-is-test-for-deploy {
    opacity: 1
}

.portfolio__space {
    background-color: #dadada;
    width: 610px;
    top: -800px;
    bottom: 0;
    position: absolute;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: calc((100vw - 610px)/ 2);
    z-index: -1
}

@media only screen and (max-width:1440px) {
    .portfolio__space {
        width: 500px;
        left: calc((100vw - 500px)/ 2)
    }
}

@media only screen and (max-width:1024px) {
    .portfolio__space {
        width: 380px;
        left: calc((100vw - 380px)/ 2)
    }
}

@media only screen and (max-width:767px) {
    .portfolio__space {
        width: 250px;
        left: calc((100vw - 250px)/ 2)
    }
}

.modals {
    height: 0;
    overflow: hidden
}

.modal {
    position: relative;
    top: 0;
    opacity: 1;
    pointer-events: all;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #fff;
    overflow: hidden;
    transition: opacity .3s ease-out;
    position: relative
}

@media only screen and (max-width:992px) {
    .modal {
        overflow: visible;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }
}

.modal__progress {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 100;
    width: calc(50% - 40px);
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

@media only screen and (max-width:992px) {
    .modal__progress {
        display: none
    }
}

.modal__progress-number {
    color: #fff;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left
}

.modal__progress-bar {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 11px 28px 0 20px
}

.modal__progress-bar-inner {
    width: 100%;
    height: 2px;
    background-color: #fff;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.modal .slide-content {
    width: 50vw;
    height: calc(var(--vh, 1vh) * 100)
}

@media only screen and (max-width:992px) {
    .modal .slide-content {
        width: 100%
    }
}

.modal__wrapper {
    width: 100%;
    display: flex;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.modal__wrapper::-webkit-scrollbar {
    display: none
}

.modal.is-active {
    opacity: 1;
    pointer-events: all;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.modal__close {
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 2000
}

.modal__close:hover .modal__close-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media only screen and (max-width:992px) {
    .modal__close {
        border-radius: 50%;
        width: 44px;
        height: 44px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.modal__close-icon {
    font-size: 40px;
    stroke: #1b1c1e;
    stroke-width: 2px;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

@media only screen and (max-width:992px) {
    .modal__close-icon {
        font-size: 22px;
        stroke-width: 4px
    }
}

.portfolio-content {
    position: relative
}

.portfolio-content__slider {
    width: 50%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden
}

@media only screen and (max-width:992px) {
    .portfolio-content__slider {
        display: none
    }
}

.portfolio-content__awards {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 0 30px 0 0;
    z-index: 1
}

@media only screen and (max-width:992px) {
    .portfolio-content__awards {
        padding: 0 16px 9px 0
    }
}

.portfolio-content__awards canvas {
    width: 100%;
    height: 100%
}

.portfolio-content__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.portfolio-content__image img {
    max-width: 90%;
    max-height: 80%
}

@media only screen and (max-width:992px) {
    .portfolio-content__image {
        width: 80%
    }
}

.portfolio-content__slide-number {
    position: absolute;
    bottom: 18px;
    left: 20px;
    color: #f5f5eb;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px
}

.portfolio-content__slide-total {
    position: absolute;
    bottom: 18px;
    right: 18px;
    color: #f5f5eb;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px
}

.portfolio-content video {
    width: calc(100% - 60px);
    height: auto;
    z-index: 2
}

.portfolio-content__content {
    width: 50%
}

@media only screen and (max-width:992px) {
    .portfolio-content__content {
        width: 100%
    }
}

@media only screen and (min-width:992px) {
    .portfolio-content__content .portfolio-content__slide {
        display: none
    }
}

.portfolio-content__block {
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    padding: 22px 70px 0 34px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    pointer-events: none
}

.portfolio-content__block.is-active {
    pointer-events: all
}

.portfolio-content__block:not(:first-child) {
    margin-top: calc(var(--vh, 1vh) * -100)
}

@media only screen and (max-width:992px) {
    .portfolio-content__block {
        pointer-events: all;
        padding: 16px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }

    .portfolio-content__block:not(:first-child) {
        margin-top: 0
    }
}

.portfolio-content__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 100px;
    font-weight: 300;
    line-height: 1;
    z-index: 2
}

@media only screen and (max-width:1280px) {
    .portfolio-content__title {
        font-size: 72px
    }
}

@media only screen and (max-width:992px) {
    .portfolio-content__title {
        font-size: 56px
    }
}

.portfolio-content__signature {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 8px;
    margin-bottom: 30px;
    z-index: 2
}

@media only screen and (max-width:1280px) {
    .portfolio-content__signature {
        margin-top: 12px;
        font-size: 18px
    }
}

.portfolio-content__pill {
    height: 45px;
    padding: 0 16px;
    background-color: #1b1c1e;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 45px;
    color: #e0e1d1;
    margin-bottom: 15px;
    border-radius: 22px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.portfolio-content__bottom-content {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    right: 0;
    left: 0
}

@media only screen and (max-width:992px) {
    .portfolio-content__bottom-content {
        position: relative;
        display: flex;
        bottom: 0
    }
}

.portfolio-content__live {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 2
}

@media only screen and (max-width:992px) {
    .portfolio-content__live {
        position: relative;
        margin-left: auto;
        margin-top: 48px;
        margin-bottom: 12px;
        right: unset;
        bottom: unset
    }
}

.portfolio-content__download {
    width: 200px;
    height: 200px
}

@media only screen and (max-width:992px) {
    .portfolio-content__download {
        width: 180px;
        height: 180px
    }
}

.portfolio-content__text-content {
    z-index: 2
}

.portfolio-content__text-content p {
    margin-bottom: 30px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400
}

@media only screen and (max-width:1280px) {
    .portfolio-content__text-content p {
        font-size: 18px
    }
}

.portfolio-content__text-content b {
    font-weight: 700
}

.portfolio-content__buttons {
    bottom: 20px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    position: absolute
}

@media only screen and (max-width:1200px) {
    .portfolio-content__buttons {
        flex-direction: column
    }
}

@media only screen and (max-width:992px) {
    .portfolio-content__buttons {
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
        margin-top: 30px
    }
}

.portfolio-content__link {
    display: block;
    width: calc(50% - 6px)
}

@media only screen and (max-width:1200px) {
    .portfolio-content__link {
        width: 100%
    }

    .portfolio-content__link:first-child {
        margin-bottom: 10px
    }
}

.portfolio-content__link--single {
    width: 100%
}

.portfolio-content__link--single:first-child {
    margin-bottom: 0
}

.portfolio-content__button {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    border: 1px solid #1b1c1e;
    background-color: transparent;
    color: #1b1c1e;
    height: 62px;
    width: 100%
}

.portfolio-content__button .button__arrow {
    stroke: #1b1c1e
}

.portfolio-content__slide {
    height: 100%;
    width: 50%;
    top: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none
}

@media only screen and (max-width:992px) {
    .portfolio-content__slide {
        position: relative;
        visibility: visible !important;
        opacity: 1 !important;
        height: unset;
        width: 100%
    }
}

.portfolio-content__outer {
    width: 100%;
    height: 100%;
    overflow-y: hidden
}

@media only screen and (max-width:992px) {
    .portfolio-content__outer {
        overflow-y: visible
    }
}

.portfolio-content__inner {
    width: 100%;
    height: 100%;
    overflow-y: hidden
}

@media only screen and (max-width:992px) {
    .portfolio-content__inner {
        overflow-y: visible
    }
}

.portfolio-content__bg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-size: cover;
    background-position: center
}

@media only screen and (max-width:992px) {
    .portfolio-content__bg {
        position: relative;
        height: 80vw;
        width: 100%;
        overflow: hidden;
        min-width: 100%;
        display: flex;
        margin-bottom: 30px
    }
}

.principles {
    position: relative;
    overflow: hidden;
    width: 88%;
    z-index: 2;
    margin: 0 auto;
    padding-top: 132px;
    padding-bottom: 384px;
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    background-color: #FFFFE0;
    border-radius: 0 0 9999px 9999px
}

@media only screen and (max-width:1200px) {
    .principles {
        padding-bottom: 515px
    }
}

@media only screen and (max-width:1024px) {
    .principles {
        padding: 132px 48px 300px;
        padding-bottom: 300px
    }
}

@media only screen and (max-width:992px) {
    .principles {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .principles {
        width: calc(100% - 20px);
        padding: 26px 18px 198px
    }
}

.principles__title {
    position: relative;
    overflow: hidden;
    z-index: 3;
    margin-bottom: 25px
}

@media only screen and (max-width:767px) {
    .principles__title {
        margin-bottom: 10px;
        padding-bottom: 13px
    }
}

@media only screen and (max-width:480px) {
    .principles__title {
        display: block
    }
}

.principles .principles__title div:nth-child(1) {
    padding-bottom: 6px
}

.principles .principles__title .for-relative {
    position: relative;
    display: inline-block;
    top: -6px
}

.principles .font-italic {
    margin-left: 15px
}

.principles .font-italic div {
    padding-bottom: 6px
}

.principles .font-italic div div:nth-child(1),
.principles .font-italic div div:nth-child(2),
.principles .font-italic div div:nth-child(8) {
    padding-right: 5px
}

.principles .font-italic div div:nth-child(2),
.principles .font-italic div div:nth-child(3),
.principles .font-italic div div:nth-child(9) {
    padding-left: 5px
}

.principles__info {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .principles__info {
        flex-direction: column;
        gap: 28px
    }
}

.principles__info-block {
    width: 50%
}

@media only screen and (max-width:767px) {
    .principles__info-block {
        width: 100%
    }
}

.principles__info-block:not(:first-child) {
    padding-left: 38px
}

@media only screen and (max-width:1024px) {
    .principles__info-block:not(:first-child) {
        padding-left: 16px
    }
}

@media only screen and (max-width:767px) {
    .principles__info-block:not(:first-child) {
        padding-left: 0
    }
}

.principles__paragraph {
    max-width: 480px;
    margin-bottom: 20px
}

@media only screen and (max-width:1440px) {
    .principles__paragraph {
        width: 400px
    }
}

@media only screen and (max-width:1200px) {
    .principles__paragraph {
        width: 360px
    }
}

@media only screen and (max-width:1024px) {
    .principles__paragraph {
        width: 300px
    }
}

@media only screen and (max-width:767px) {
    .principles__paragraph {
        width: 100%
    }
}

.principles__paragraph:first-child {
    width: 380px
}

@media only screen and (max-width:1440px) {
    .principles__paragraph:first-child {
        width: 320px
    }
}

@media only screen and (max-width:1200px) {
    .principles__paragraph:first-child {
        width: 280px
    }
}

@media only screen and (max-width:1024px) {
    .principles__paragraph:first-child {
        width: 240px
    }
}

@media only screen and (max-width:767px) {
    .principles__paragraph:first-child {
        width: 100%
    }
}

.principles__items {
    position: relative;
    display: flex;
    flex-direcrion: row;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 2;
    margin-top: 70px
}

@media only screen and (max-width:768px) {
    .principles__items {
        flex-direction: column;
        margin-top: 40px
    }
}

.principles__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: none;
    height: 160px;
    border-radius: 160px;
    width: calc(50% - 24px);
    margin-bottom: 30px;
    padding: 30px 40px 30px 40px;
    background-color: #f9f9eb
}

@media only screen and (max-width:1280px) {
    .principles__item {
        width: calc(50% - 12px)
    }
}

@media only screen and (max-width:768px) {
    .principles__item {
        width: 100%;
        height: 90px;
        margin-bottom: 14px;
        padding: 18px 4px 18px 16px
    }
}

.principles__item-lottie {
    height: 100px;
    width: 100px;
    margin-right: 20px;
    flex-shrink: 0
}

@media only screen and (max-width:1280px) {
    .principles__item-lottie {
        margin-right: 10px
    }
}

@media only screen and (max-width:768px) {
    .principles__item-lottie {
        margin-right: 20px;
        width: 54px;
        height: 54px
    }
}

.principles__item-text {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.5rem;
    color: #1b1c1e;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: left
}

@media only screen and (max-width:1580px) {
    .principles__item-text {
        font-size: 2rem
    }
}

@media only screen and (max-width:1480px) {
    .principles__item-text {
        font-size: 1.5rem
    }
}

.principles__ball {
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    min-height: 100vw
}

.principles__ball canvas {
    width: 100%;
    height: 100%
}

.principles__ball-pic {
    width: 100%;
    height: 100%
}

.principles__ball-pic img {
    width: 100%;
    height: 100%
}

.awards {
    position: relative;
    z-index: 1;
    width: 88%;
    height: 88vw;
    padding: 132px 110px 132px;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 9999px;
    border: 2px solid #1b1c1e;
    margin-top: -34%;
    margin-bottom: 200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

@media only screen and (max-width:1200px) {
    .awards {
        padding: 0 110px
    }
}

@media only screen and (max-width:1024px) {
    .awards {
        padding: 0 48px
    }
}

@media only screen and (max-width:992px) {
    .awards {
        width: calc(100% - 48px);
        height: calc(100vw - 48px)
    }
}

@media only screen and (max-width:767px) {
    .awards {
        width: calc(100% + 4px);
        margin-left: -2px;
        height: 500px;
        border-top: none;
        border-radius: 9999px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 0 28px;
        margin-top: 120px;
        align-items: flex-start
    }
}

@media only screen and (max-width:550px) {
    .awards {
        height: calc(100vw - 10px)
    }
}

.awards__text {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .awards__text {
        flex-direction: column;
        align-items: flex-start;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }
}

.awards__header {
    margin-right: 53px;
    margin-bottom: 10px
}

.awards__canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1
}

@media only screen and (max-width:767px) {
    .awards__canvas {
        height: 100vh
    }
}

.awards__canvas canvas {
    width: 100%;
    height: 100%
}

.teacher {
    padding-top: 0;
    position: relative
}

.teacher__header {
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    width: 88%;
    margin: 0 auto;
    margin-bottom: 33px
}

@media only screen and (max-width:992px) {
    .teacher__header {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .teacher__header {
        margin: 0;
        margin-bottom: 26px;
        padding-left: 28px;
        padding-right: 0;
        width: 264px
    }
}

.teacher__text {
    padding-left: 7.6388888889vw;
    padding-right: 7.6388888889vw;
    width: 88%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 140px
}

@media only screen and (max-width:992px) {
    .teacher__text {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .teacher__text {
        display: block;
        font-size: 18px;
        margin: 0;
        margin-bottom: 80px;
        padding-left: 28px;
        padding-right: 28px;
        width: 100%
    }
}

.teacher__text-item {
    width: 50%
}

@media only screen and (max-width:767px) {
    .teacher__text-item {
        width: 100%;
        margin-bottom: 18px
    }
}

@media only screen and (min-width:768px) {
    .teacher__text-item:not(:first-child) {
        padding-left: 38px
    }
}

.teacher__main {
    position: relative;
    height: 154vw
}

@media only screen and (max-width:992px) {
    .teacher__main {
        height: 154vw
    }
}

@media only screen and (max-width:767px) {
    .teacher__main {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }
}

.teacher__ball {
    position: absolute;
    top: -20%;
    left: 0;
    width: 88vw;
    height: 88vw;
    margin-left: 6vw;
    border-radius: 50%;
    -webkit-transform-origin: center;
    transform-origin: center;
    background-color: #f5f5eb;
    z-index: -1
}

@media only screen and (max-width:767px) {
    .teacher__items {
        display: flex;
        flex-direction: column
    }
}

.teacher .teacher__item {
    width: 22.22vw
}

.teacher .teacher__item--1 {
    position: absolute;
    top: -3.1944444444vw;
    left: 44.9305555556vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--1 {
        order: 2
    }
}

.teacher .teacher__item--2 {
    position: absolute;
    top: 4.4444444444vw;
    left: 15.2777777778vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--2 {
        order: 1
    }
}

.teacher .teacher__item--3 {
    position: absolute;
    top: 21.7361111111vw;
    left: 58.5416666667vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--3 {
        order: 3
    }
}

.teacher .teacher__item--4 {
    position: absolute;
    top: 51.25vw;
    left: 22.7777777778vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--4 {
        order: 5
    }
}

.teacher .teacher__item--5 {
    position: absolute;
    top: 58.4722222222vw;
    left: 61.3888888889vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--5 {
        order: 4
    }
}

.teacher .teacher__item--6 {
    position: absolute;
    top: 81.6666666667vw;
    left: 15.2777777778vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--6 {
        order: 7
    }
}

.teacher .teacher__item--7 {
    position: absolute;
    top: 91.7361111111vw;
    left: 44.9305555556vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--7 {
        order: 6
    }
}

.teacher .teacher__item--8 {
    position: absolute;
    top: 124.3055555556vw;
    left: 64.0277777778vw
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item--8 {
        order: 8
    }
}

@media only screen and (max-width:900px) {
    .teacher .teacher__item {
        width: 24vw
    }
}

@media only screen and (max-width:767px) {
    .teacher .teacher__item {
        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 46px);
        margin: 0 auto;
        border-bottom: 1px solid #1b1c1e;
        padding-bottom: 20px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end
    }
}

.teacher__item-event {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 12px
}

@media only screen and (max-width:1280px) {
    .teacher__item-event {
        font-size: 1rem;
        margin-bottom: 6px
    }
}

@media only screen and (max-width:900px) {
    .teacher__item-event {
        font-size: .8rem
    }
}

@media only screen and (max-width:767px) {
    .teacher__item-event {
        font-size: 1.125rem;
        padding-bottom: 8px
    }
}

.teacher__item-image {
    position: relative;
    margin-bottom: 20px;
    width: 100%
}

@media only screen and (max-width:767px) {
    .teacher__item-image {
        display: none
    }
}

.teacher__item-image img {
    width: 100%;
    height: auto
}

.teacher__item-image-mob {
    display: block
}

.teacher__item-image-mob img {
    height: 100%
}

@media only screen and (min-width:768px) {
    .teacher__item-image-mob {
        display: none
    }
}

.teacher__item-image-mob--2 {
    height: 80px
}

.teacher__item-image-mob--3 {
    height: 40px
}

.teacher__item-image-mob--4 {
    height: 32px
}

.teacher__item-image-mob--8 {
    height: 35px
}

.teacher__item-desc {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.125rem;
    font-weight: 300;
    line-height: 1;
    margin-top: 20px
}

@media only screen and (max-width:1280px) {
    .teacher__item-desc {
        font-size: 1.5rem;
        margin-top: 10px
    }
}

@media only screen and (max-width:900px) {
    .teacher__item-desc {
        font-size: 1.25rem
    }
}

@media only screen and (max-width:767px) {
    .teacher__item-desc {
        font-size: 1.5rem
    }
}

.articles {
    background-color: #f5f5eb;
    position: relative;
    padding: 154px 0 160px
}

@media only screen and (max-width:767px) {
    .articles {
        padding-top: 43px;
        padding-bottom: 80px
    }
}

.articles .font-italic div div:nth-child(2),
.articles .font-italic div div:nth-child(6) {
    padding-right: 5px
}

.articles .font-italic div div:nth-child(3),
.articles .font-italic div div:nth-child(7) {
    padding-left: 5px
}

.articles__title {
    z-index: 2;
    position: relative;
    margin-bottom: 154px;
    margin-left: 13.8888888889vw
}

.articles__title .split-char:first-child {
    padding-left: 20px
}

@media only screen and (max-width:992px) {
    .articles__title {
        width: calc(100% - 48px);
        margin-left: 10vw
    }
}

@media only screen and (max-width:767px) {
    .articles__title {
        margin-bottom: 140px;
        width: 100%;
        margin-left: 28px
    }
}

.articles__books {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    z-index: 2;
    position: relative
}

.articles__canvas {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: -50vh;
    width: 100%;
    height: calc(100% + 50vh);
    z-index: 1;
    opacity: .7
}

.articles__canvas canvas {
    width: 100%;
    height: 100%
}

.book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #1b1c1e;
    margin-bottom: 20px;
    color: #1b1c1e;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: color .3s ease-out .1s, background-color .3s ease-out .1s, border .3s ease-out .1s, -webkit-transform .3s ease-out .1s;
    transition: color .3s ease-out .1s, background-color .3s ease-out .1s, transform .3s ease-out .1s, border .3s ease-out .1s;
    transition: color .3s ease-out .1s, background-color .3s ease-out .1s, transform .3s ease-out .1s, border .3s ease-out .1s, -webkit-transform .3s ease-out .1s;
    background-color: #f5f5eb;
    cursor: pointer
}

.book:hover {
    color: #fff;
    border: 2px solid transparent
}

.book:hover .book__year {
    border-left: 2px solid #fff
}

.book:hover img {
    -webkit-filter: brightness(1.25);
    filter: brightness(1.25)
}

.book__author {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-right: 25px;
    padding-left: 36px
}

@media only screen and (max-width:767px) {
    .book__author {
        display: none
    }
}

.book__image img {
    height: 100%;
    width: auto;
    transition: -webkit-filter .3s ease-out .1s;
    transition: filter .3s ease-out .1s;
    transition: filter .3s ease-out .1s, -webkit-filter .3s ease-out .1s
}

@media only screen and (max-width:767px) {
    .book__image img {
        padding-left: 28px
    }
}

.book__title {
    font-family: Austin, serif;
    font-style: normal;
    color: inherit;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1;
    padding: 34px 36px 34px 24px;
    flex-grow: 1
}

.book__title:hover {
    text-decoration: underline
}

@media only screen and (max-width:1200px) {
    .book__title {
        font-size: 1.75rem
    }
}

@media only screen and (max-width:767px) {
    .book__title {
        font-size: 1.375rem
    }
}

.book__year {
    width: 78px;
    color: inherit;
    border-left: 2px solid #1b1c1e;
    transition: border-left .3s ease-out .1s;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center
}

.book__dates {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 30px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media only screen and (max-width:767px) {
    .book__dates {
        font-size: 1.125rem
    }
}

.book--1 {
    width: 64.7222222222vw;
    margin-left: 8.8888888889vw;
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
    margin-bottom: 40px
}

@media only screen and (max-width:992px) {
    .book--1 {
        width: 95%;
        margin-left: 2.5%
    }
}

.book--1:hover {
    background-color: #fbbc05;
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg)
}

.book--1 .book__icon {
    height: 100px
}

@media only screen and (max-width:992px) {
    .book--1 .book__icon {
        height: 44px
    }
}

.book--2 {
    width: 69.4444444444vw;
    -webkit-transform: rotate(-.333deg);
    transform: rotate(-.333deg)
}

@media only screen and (max-width:992px) {
    .book--2 {
        width: 92%;
        margin-left: 4%
    }
}

.book--2 .book__icon {
    height: 56px
}

@media only screen and (max-width:992px) {
    .book--2 .book__icon {
        height: 30px
    }
}

.book--2:hover {
    background-color: #fbbc05;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

.book--3 {
    width: 64.7916666667vw;
    margin-left: 2.0833333333vw;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg)
}

@media only screen and (max-width:992px) {
    .book--3 {
        width: 95%;
        margin-left: 2.5%
    }
}

.book--3:hover {
    background-color: #a79a85;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg)
}

.book--3 .book__icon {
    height: 73px
}

@media only screen and (max-width:992px) {
    .book--3 .book__icon {
        height: 43px
    }
}

.book--4 {
    width: 73.2638888889vw;
    margin-left: .1388888889vw;
    -webkit-transform: rotate(-.97deg);
    transform: rotate(-.97deg)
}

@media only screen and (max-width:992px) {
    .book--4 {
        width: 95%;
        margin-left: 2.5%
    }
}

.book--4:hover {
    background-color: #fbbc05;
    -webkit-transform: rotate(.97deg);
    transform: rotate(.97deg)
}

.book--4 .book__icon {
    height: 67px
}

@media only screen and (max-width:992px) {
    .book--4 .book__icon {
        height: 36px
    }
}

.book--5 {
    width: 64.7222222222vw;
    margin-left: 5.6944444444vw;
    -webkit-transform: rotate(.39deg);
    transform: rotate(.39deg)
}

@media only screen and (max-width:992px) {
    .book--5 {
        width: 90%;
        margin-left: 5%
    }
}

.book--5:hover {
    background-color: #fbbc05;
    -webkit-transform: rotate(-.39deg);
    transform: rotate(-.39deg)
}

.book--5 .book__icon {
    height: 72px
}

@media only screen and (max-width:992px) {
    .book--5 .book__icon {
        height: 38px
    }
}

.book--6 {
    width: 64.7222222222vw;
    margin-left: 2.4305555556vw;
    background-color: #fbbc05;
    border: 2px solid transparent;
    color: #fff
}

@media only screen and (max-width:992px) {
    .book--6 {
        width: 96%;
        margin-left: 2%
    }
}

.book--6:hover {
    background-color: #1b1c1e
}

.book--6 .book__icon {
    height: 68px
}

@media only screen and (max-width:992px) {
    .book--6 .book__icon {
        height: 40px
    }
}

.book--6 .book__year {
    border-left: 2px solid #fff
}

.mentorship {
    width: 100%;
    position: relative;
    z-index: 3
}

.mentorship .font-sans {
    position: relative;
    top: -6px
}

.mentorship .font-italic div {
    padding-bottom: 6px
}

.mentorship .font-italic div div:nth-child(3) {
    padding-right: 5px
}

.mentorship .font-italic div div:nth-child(4) {
    padding-left: 5px
}

.mentorship__inner {
    position: relative;
    z-index: 1;
    width: 88%;
    padding: 90px 120px 217px;
    margin: 0 auto;
    background-color: #e0e1d1;
    border-bottom-left-radius: 9999px;
    border-bottom-right-radius: 9999px;
    display: flex
}

@media only screen and (max-width:1024px) {
    .mentorship__inner {
        padding: 132px 48px 300px
    }
}

@media only screen and (max-width:992px) {
    .mentorship__inner {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .mentorship__inner {
        flex-direction: column;
        width: calc(100% - 20px);
        padding: 26px 18px 228px
    }
}

.mentorship__title {
    width: 50%;
    margin-bottom: 25px
}

.mentorship__title .font-italic .split-char {
    padding-bottom: 2px
}

.mentorship__title .font-italic .split-char:first-child {
    padding-left: 4px
}

@media only screen and (max-width:1175px) {
    .mentorship__title {
        flex-direction: column;
        width: 100%
    }
}

@media only screen and (max-width:992px) {
    .mentorship__title {
        font-size: 56px
    }
}

@media only screen and (max-width:767px) {
    .mentorship__title {
        margin-bottom: 16px;
        padding-bottom: 10px;
        width: 100%
    }
}

.mentorship__items {
    width: 50%
}

@media only screen and (max-width:1175px) {
    .mentorship__items {
        width: 100%
    }
}

@media only screen and (max-width:992px) {
    .mentorship__items {
        padding-left: 20px
    }
}

@media only screen and (max-width:767px) {
    .mentorship__items {
        width: 100%;
        padding-left: 0
    }
}

.mentorship__item {
    position: relative;
    padding-left: 87px;
    cursor: pointer
}

@media only screen and (max-width:1175px) {
    .mentorship__item {
        padding-left: 0
    }
}

@media only screen and (max-width:767px) {
    .mentorship__item {
        padding-left: 0
    }
}

.mentorship__item:not(:last-child) {
    margin-bottom: 50px
}

@media only screen and (max-width:767px) {
    .mentorship__item:not(:last-child) {
        margin-bottom: 30px
    }
}

@media only screen and (min-width:992px) {
    .mentorship__item:hover .mentorship__item-image {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0)
    }
}

.mentorship__item-event {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1
}

@media only screen and (max-width:992px) {
    .mentorship__item-event {
        font-size: 2rem
    }
}

@media only screen and (max-width:767px) {
    .mentorship__item-event {
        font-size: 2.25rem;
        margin-bottom: 15px
    }
}

.mentorship__item-pills {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 12px
}

.mentorship__item-title {
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    margin-right: 10px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 40px;
    color: #f5f5eb;
    background-color: #1b1c1e
}

@media only screen and (max-width:992px) {
    .mentorship__item-title {
        font-size: 1rem
    }
}

.mentorship__item-dates {
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    margin-right: 10px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 40px;
    color: #1b1c1e;
    border: 1px solid #1b1c1e
}

@media only screen and (max-width:992px) {
    .mentorship__item-dates {
        font-size: 1rem
    }
}

.mentorship__item-image {
    position: absolute;
    pointer-events: none;
    transition: -webkit-clip-path .3s ease-out;
    transition: clip-path .3s ease-out;
    transition: clip-path .3s ease-out, -webkit-clip-path .3s ease-out;
    z-index: 3;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    top: 0;
    left: 0
}

.working {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    margin-bottom: 100px
}

@media only screen and (max-width:992px) {
    .working {
        margin-bottom: 100px
    }
}

@media only screen and (max-width:850px) {
    .working {
        margin-bottom: 160px
    }
}

@media only screen and (max-width:767px) {
    .working {
        margin-bottom: 0;
        padding-top: 80px;
        height: 178.6666666667vw
    }
}

.working .font-italic div {
    padding-bottom: 6px;
    position: relative;
    top: 6px
}

.working__title {
    margin-bottom: 25px;
    margin-left: 13.8888888889vw
}

@media only screen and (max-width:767px) {
    .working__title {
        width: calc(100% - 48px);
        margin-left: 10vw
    }
}

@media only screen and (max-width:767px) {
    .working__title {
        margin-bottom: 0;
        margin-left: 28px
    }
}

@media only screen and (max-width:480px) {
    .working__title {
        display: block
    }
}

.working__photos {
    position: relative;
    margin: 0 auto;
    z-index: 5;
    width: 36.1111111111vw;
    height: 36.1111111111vw
}

@media only screen and (max-width:767px) {
    .working__photos {
        display: none
    }
}

.working__photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0
}

.working__photo.is-active img {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.working__photo img {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out
}

.working .working__ball-fill {
    transition: .85s cubic-bezier(.25, .46, .45, 1)
}

.working__balls {
    position: relative;
    padding-top: 70px
}

.working__ball {
    width: 13.1944444444vw;
    height: 13.1944444444vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1b1c1e;
    border-radius: 50%;
    cursor: pointer;
    background-color: #f5f5eb
}

.working-ball-text{
    color: #fbbc05;
    text-align: center;
    font-weight: 600;
    font-size: 25px;
}

@media only screen and (min-width:1024px) {
    .working__ball img {
        z-index: 2;
        transition: .85s cubic-bezier(.25, .46, .45, 1);
        -webkit-filter: brightness(1) invert(0);
        filter: brightness(1) invert(0)
    }

    .working__ball:hover .working__ball-fill {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .working__ball:hover img {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1)
    }
    .working-ball-text{
        font-size: 20px;
    }
    
}

@media only screen and (min-width:768px) {
    .working__ball.is-active .working__ball-fill {
        -webkit-transform: scale(1);
        transform: scale(1);
        z-index: -1
    }

    .working__ball.is-active img {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1)
    }
    .working-ball-text{
        font-size: 15px;
    }
}

@media screen and (min-width:320px) and (max-width:425px) {
    .working-ball-text{
        font-size: 18px;
    }
}

.working__ball--space {
    position: absolute;
    top: 20.2777777778vw;
    left: 88.2638888889vw
}

.working__ball--we {
    position: absolute;
    top: 14.7916666667vw;
    left: 5.3611111111vw
}
.working__ball--wee {
    position: absolute;
    top: 3.7916666667vw;
    left: 17.3611111111vw
}

.working__ball--lifehouse {
    position: absolute;
    top: 22.9861111111vw;
    left: 17.6388888889vw
}

.working__ball--crysis {
    position: absolute;
    top: 39.2361111111vw;
    left: 19.0972222222vw
}

.working__ball--tough {
    position: absolute;
    top: 30.4861111111vw;
    left: 0vw
}

.working__ball--netrix {
    position: absolute;
    top: 22.5vw;
    left: 70.4166666667vw
}

.working__ball--rapp {
    position: absolute;
    top: 0vw;
    left: 63.8888888889vw
}

.working__ball--stacked {
    position: absolute;
    top: 7.6388888889vw;
    left: 77.0833333333vw
}

@media only screen and (max-width:767px) {
    .working__ball {
        height: 30.4vw;
        width: 30.4vw
    }

    .working__ball--space {
        position: absolute;
        top: 5.0666666667vw;
        left: 18.4vw
    }

    .working__ball--we {
        position: absolute;
        top: 27.4666666667vw;
        left: -2.1333333333vw
    }
    .working__ball--wee {
        position: absolute;
        top: 60.4666666667vw;
        left: -2.1333333333vw
    }

    .working__ball--lifehouse {
        position: absolute;
        top: 77.8666666667vw;
        left: 34.9333333333vw
    }

    .working__ball--crysis {
        position: absolute;
        top: 42.9333333333vw;
        left: 26.9333333333vw
    }

    .working__ball--tough {
        position: absolute;
        top: 98.4vw;
        left: 7.2vw
    }

    .working__ball--netrix {
        position: absolute;
        top: 90.1333333333vw;
        left: 62.6666666667vw
    }

    .working__ball--rapp {
        position: absolute;
        top: 29.3333333333vw;
        left: 59.4666666667vw
    }

    .working__ball--stacked {
        position: absolute;
        top: 56.8vw;
        left: 72.2666666667vw
    }
}

.working__ball-image {
    -webkit-transform: translate3d(0, 0, 0);
    height: auto
}

.working__ball-image--netrix {
    -webkit-transform: scale(.7);
    transform: scale(.7)
}

.working__ball-image--space {
    width: 10.9722222222vw
}

.working__ball-image--we {
    width: 11.5277777778vw
}

.working__ball-image--lifehouse {
    width: 8.6111111111vw
}

.working__ball-image--crysis {
    width: 8.75vw;
    padding-bottom: 20%
}

.working__ball-image--tough {
    width: 10.8333333333vw
}

.working__ball-image--netrix {
    width: 10.8333333333vw
}

.working__ball-image--rapp {
    width: 7.9166666667vw
}

.working__ball-image--stacked {
    width: 6.25vw
}

@media only screen and (max-width:767px) {
    .working__ball-image--space {
        width: 25.3333333333vw
    }

    .working__ball-image--we {
        width: 26.9333333333vw
    }

    .working__ball-image--lifehouse {
        width: 19.7333333333vw
    }

    .working__ball-image--crysis {
        width: 20vw;
        padding-bottom: 20%
    }

    .working__ball-image--tough {
        width: 24.8vw
    }

    .working__ball-image--netrix {
        width: 18.1333333333vw
    }

    .working__ball-image--rapp {
        width: 18.1333333333vw
    }

    .working__ball-image--stacked {
        width: 14.6666666667vw
    }
}

.working__content-inner {
    position: absolute;
    position: absolute;
    top: 17.5vw;
    left: 12.8472222222vw;
    width: 33.3333333333vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in-out
}

@media only screen and (max-width:1280px) {
    .working__content-inner {
        width: 41.6666666667vw;
        position: absolute;
        top: 19.5833333333vw;
        left: 5.5555555556vw
    }
}

@media only screen and (max-width:922px) {
    .working__content-inner {
        position: absolute;
        top: 19.5833333333vw;
        left: -1.3888888889vw;
        width: 47.2222222222vw
    }
}

@media only screen and (max-width:767px) {
    .working__content-inner {
        position: absolute;
        top: 15.2777777778vw;
        left: 12.8472222222vw;
        width: 37.5vw
    }
}

.working__content-inner.is-active {
    opacity: 1;
    pointer-events: all;
    transition: opacity .5s ease-in-out .25s
}

.working__content {
    position: relative;
    margin-top: -17.5694444444vw;
    width: 51.6666666667vw;
    height: 51.6666666667vw;
    padding-right: 70px;
    background-color: #fbbc05;
    margin-left: calc(100% - 18px - 51.6666666667vw);
    border-radius: 50%;
    padding-left: 185px
}

@media only screen and (max-width:1280px) {
    .working__content {
        padding-left: 40px
    }
}

@media only screen and (max-width:767px) {
    .working__content {
        display: none
    }
}

.working__content h4 {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 6px
}

@media only screen and (max-width:1280px) {
    .working__content h4 {
        font-size: 28px
    }
}

.working__content-subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px
}

@media only screen and (max-width:1280px) {
    .working__content-subtitle {
        font-size: 16px;
        margin-bottom: 8px
    }
}

.working__content-content p {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2
}

@media only screen and (max-width:1280px) {
    .working__content-content p {
        font-size: 13px
    }
}

.working__social {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    padding: 8px 16px;
    height: 42px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 34px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #1b1c1e;
    transition: .3s background-color ease-out;
    border: 1px solid #1b1c1e
}

.working__social:hover {
    background-color: #1b1c1e;
    color: #fff
}

.working__social:hover .working__socials-arrow {
    stroke: #fff
}

.working__socials-arrow {
    font-size: 26px;
    stroke: #1b1c1e;
    margin-left: 13px
}

.working__ball-fill {
    background-color: #1b1c1e;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: .6s -webkit-transform ease-out;
    transition: .6s transform ease-out;
    transition: .6s transform ease-out, .6s -webkit-transform ease-out
}

.working__dashes {
    overflow: hidden;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 6%;
    width: 88%;
    margin: 0 auto;
    background-color: #f5f5eb;
    background-image: linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, .6) 49px, rgba(210, 211, 195, .6) 50px), linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, .6) 49px, rgba(210, 211, 195, .6) 50px);
    background-size: 50px 100%, 50px 100%;
    background-position-x: 0, 25px;
    background-repeat: repeat-x;
    height: 210%;
    top: -50%;
    width: 88vw;
    left: 6vw;
    background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px)/ 28 - 1px), rgba(210, 211, 195, .6) calc((88vw - 1px)/ 28 - 1px), rgba(210, 211, 195, .6) calc((88vw - 1px)/ 28)), linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px)/ 28 - 1px), rgba(210, 211, 195, .6) calc((88vw - 1px)/ 28 - 1px), rgba(210, 211, 195, .6) calc((88vw - 1px)/ 28));
    background-size: calc((88vw - 1px)/ 28) 100%, calc((88vw - 1px)/ 28) 100%;
    background-position-x: calc((88vw - 1px)/ 28 / 2), calc((88vw - 1px)/ 28)
}

@media only screen and (max-width:992px) {
    .working__dashes {
        width: calc(100vw - 48px);
        left: 24px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px)/ 16 - 1px), rgba(210, 211, 195, .6) calc((100vw - 48px - 1px)/ 16 - 1px), rgba(210, 211, 195, .6) calc((100vw - 48px - 1px)/ 16)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px)/ 16 - 1px), rgba(210, 211, 195, .6) calc((100vw - 48px - 1px)/ 16 - 1px), rgba(210, 211, 195, .6) calc((100vw - 48px - 1px)/ 16));
        background-size: calc((100vw - 48px - 1px)/ 16) 100%, calc((100vw - 48px - 1px)/ 16) 100%;
        background-position-x: calc((100vw - 48px - 1px)/ 16 / 2), calc((100vw - 48px - 1px)/ 16)
    }
}

@media only screen and (max-width:767px) {
    .working__dashes {
        width: calc(100vw - 20px);
        left: 10px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px)/ 12 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 1px)/ 12 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 1px)/ 12)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px)/ 12 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 1px)/ 12 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 1px)/ 12));
        background-size: calc((100vw - 20px - 1px)/ 12) 100%, calc((100vw - 20px - 1px)/ 12) 100%;
        background-position-x: calc((100vw - 20px - 1px)/ 12 / 2), calc((100vw - 20px - 1px)/ 12)
    }
}

@media only screen and (max-width:520px) {
    .working__dashes {
        width: calc(100vw - 20px);
        left: 11px;
        background-image: linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px)/ 10 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 2px)/ 10 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 2px)/ 10)), linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px)/ 10 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 2px)/ 10 - 1px), rgba(210, 211, 195, .6) calc((100vw - 20px - 2px)/ 10));
        background-size: calc((100vw - 20px - 2px)/ 10) 100%, calc((100vw - 20px - 2px)/ 10) 100%;
        background-position-x: calc((100vw - 20px - 2px)/ 10 / 2), calc((100vw - 20px - 2px)/ 10)
    }
}

.working__space {
    background-color: #f5f5eb;
    width: 610px;
    bottom: 0;
    position: absolute;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: calc((100vw - 610px)/ 2);
    z-index: 0;
    height: 200%;
    top: -50%
}

@media only screen and (max-width:1440px) {
    .working__space {
        width: 500px;
        left: calc((100vw - 500px)/ 2)
    }
}

@media only screen and (max-width:1024px) {
    .working__space {
        width: 380px;
        left: calc((100vw - 380px)/ 2)
    }
}

@media only screen and (max-width:767px) {
    .working__space {
        width: 250px;
        left: calc((100vw - 250px)/ 2)
    }
}

.help {
    position: relative;
    z-index: 3
}

@media only screen and (max-width:767px) {
    .help {
        padding-top: 64px
    }
}

.help__inner {
    position: relative;
    width: 88%;
    margin: 0 auto;
    background-color: #e0e1d1;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    padding: 0 3.4722222222vw calc(69.0277777778vw + 48px)
}

@media only screen and (max-width:992px) {
    .help__inner {
        width: calc(100% - 48px);
        margin: 0 auto
    }
}

@media only screen and (max-width:767px) {
    .help__inner {
        width: calc(100% - 20px);
        padding-bottom: 141.6vw
    }
}

.help__placeholder {
    width: 100%;
    height: 1px
}

.help__text {
    width: 88%;
    z-index: 1;
    position: absolute;
    top: 5.5vw;
    left: 5.5vw;
    display: block;
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed
}

.help__text path {
    stroke: transparent;
    fill: none;
    -webkit-transform: translateY(40px);
    transform: translateY(40px)
}

.help__text-path {
    font-size: 140px;
    fill: #fbbc05;
    font-family: Austin, serif;
    font-style: normal
}

.help__balls {
    z-index: 4;
    position: relative
}

.help__ball {
    position: absolute;
    z-index: 1;
    border: 1px solid #1b1c1e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: #e0e1d1
}

.help__ball--mentorship {
    width: 13.8888888889vw;
    height: 13.8888888889vw;
    position: absolute;
    top: 37.4305555556vw;
    left: 18.125vw
}

@media only screen and (max-width:767px) {
    .help__ball--mentorship {
        width: 33.0666666667vw;
        height: 33.0666666667vw;
        position: absolute;
        top: 98.9333333333vw;
        left: 18.4vw
    }
}

.help__ball--audit {
    width: 15.9722222222vw;
    height: 15.9722222222vw;
    position: absolute;
    top: 26.1111111111vw;
    left: 28.4722222222vw
}

@media only screen and (max-width:767px) {
    .help__ball--audit {
        width: 28.2666666667vw;
        height: 28.2666666667vw;
        position: absolute;
        top: 45.3333333333vw;
        left: 54.6666666667vw
    }
}

.help__ball--consulting {
    width: 16.5277777778vw;
    height: 16.5277777778vw;
    position: absolute;
    top: 48.125vw;
    left: 29.0277777778vw
}

@media only screen and (max-width:767px) {
    .help__ball--consulting {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        position: absolute;
        top: 58.9333333333vw;
        left: 1.0666666667vw
    }
}

.help__ball--design {
    width: 13.8888888889vw;
    height: 13.8888888889vw;
    position: absolute;
    top: 23.8888888889vw;
    left: 46.5277777778vw
}

@media only screen and (max-width:767px) {
    .help__ball--design {
        width: 34.6666666667vw;
        height: 34.6666666667vw;
        position: absolute;
        top: 23.4666666667vw;
        left: 21.6vw
    }
}

.help__ball--workshops {
    width: 16.6666666667vw;
    height: 16.6666666667vw;
    position: absolute;
    top: 38.2638888889vw;
    left: 42.4305555556vw
}

@media only screen and (max-width:767px) {
    .help__ball--workshops {
        width: 34.6666666667vw;
        height: 34.6666666667vw;
        position: absolute;
        top: 74.6666666667vw;
        left: 44.2666666667vw
    }
}

.help__ball-fill {
    background-color: #1b1c1e;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.help__ball-text {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 2.3611111111vw;
    font-weight: 300;
    letter-spacing: 0;
    text-align: center;
    z-index: 2;
    color: #1b1c1e;
    transition: .4s color ease-out
}

@media only screen and (max-width:767px) {
    .help__ball-text {
        font-size: 24px
    }
}

.help .help__ball:nth-child(n+1) {
    -webkit-animation-name: animate1;
    animation-name: animate1;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.help .help__ball:nth-child(n+2) {
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.help .help__ball:nth-child(n+3) {
    -webkit-animation-name: animate3;
    animation-name: animate3;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.help .help__ball:nth-child(n+4) {
    -webkit-animation-name: animate4;
    animation-name: animate4;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.help .help__ball:nth-child(n+5) {
    -webkit-animation-name: animate5;
    animation-name: animate5;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes animate1 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(5px) translateX(9px);
        transform: translateY(5px) translateX(9px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate1 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(5px) translateX(9px);
        transform: translateY(5px) translateX(9px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes animate2 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(3px) translateX(7px);
        transform: translateY(3px) translateX(7px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate2 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(3px) translateX(7px);
        transform: translateY(3px) translateX(7px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes animate3 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(3px) translateX(3px);
        transform: translateY(3px) translateX(3px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate3 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(3px) translateX(3px);
        transform: translateY(3px) translateX(3px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes animate4 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(5px) translateX(8px);
        transform: translateY(5px) translateX(8px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate4 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(5px) translateX(8px);
        transform: translateY(5px) translateX(8px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes animate5 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(4px) translateX(5px);
        transform: translateY(4px) translateX(5px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate5 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(4px) translateX(5px);
        transform: translateY(4px) translateX(5px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes animate6 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(7px) translateX(2px);
        transform: translateY(7px) translateX(2px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes animate6 {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }

    50% {
        -webkit-transform: translateY(7px) translateX(2px);
        transform: translateY(7px) translateX(2px)
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes snakeHead {
    0% {
        -webkit-transform: translateX(0) translateY(0) rotate(0);
        transform: translateX(0) translateY(0) rotate(0)
    }

    33.2% {
        -webkit-transform: translateX(170px) translateY(0) rotate(0);
        transform: translateX(170px) translateY(0) rotate(0)
    }

    33.3333% {
        -webkit-transform: translateX(170px) translateY(0) rotate(90deg);
        transform: translateX(170px) translateY(0) rotate(90deg)
    }

    49.95% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(90deg);
        transform: translateX(170px) translateY(80px) rotate(90deg)
    }

    50% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(180deg);
        transform: translateX(170px) translateY(80px) rotate(180deg)
    }

    83.2% {
        -webkit-transform: translateX(0) translateY(80px) rotate(180deg);
        transform: translateX(0) translateY(80px) rotate(180deg)
    }

    83.3333% {
        -webkit-transform: translateX(0) translateY(80px) rotate(270deg);
        transform: translateX(0) translateY(80px) rotate(270deg)
    }

    100% {
        -webkit-transform: translateX(0) translateY(0) rotate(270deg);
        transform: translateX(0) translateY(0) rotate(270deg)
    }
}

@keyframes snakeHead {
    0% {
        -webkit-transform: translateX(0) translateY(0) rotate(0);
        transform: translateX(0) translateY(0) rotate(0)
    }

    33.2% {
        -webkit-transform: translateX(170px) translateY(0) rotate(0);
        transform: translateX(170px) translateY(0) rotate(0)
    }

    33.3333% {
        -webkit-transform: translateX(170px) translateY(0) rotate(90deg);
        transform: translateX(170px) translateY(0) rotate(90deg)
    }

    49.95% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(90deg);
        transform: translateX(170px) translateY(80px) rotate(90deg)
    }

    50% {
        -webkit-transform: translateX(170px) translateY(80px) rotate(180deg);
        transform: translateX(170px) translateY(80px) rotate(180deg)
    }

    83.2% {
        -webkit-transform: translateX(0) translateY(80px) rotate(180deg);
        transform: translateX(0) translateY(80px) rotate(180deg)
    }

    83.3333% {
        -webkit-transform: translateX(0) translateY(80px) rotate(270deg);
        transform: translateX(0) translateY(80px) rotate(270deg)
    }

    100% {
        -webkit-transform: translateX(0) translateY(0) rotate(270deg);
        transform: translateX(0) translateY(0) rotate(270deg)
    }
}

@-webkit-keyframes snakeRotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    33.3% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    33.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    83.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@keyframes snakeRotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    33.3% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    33.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    83.3333% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@-webkit-keyframes topSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px)
    }
}

@keyframes topSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(280px);
        transform: translateX(280px)
    }
}

@-webkit-keyframes rightSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px)
    }
}

@keyframes rightSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px)
    }
}

@-webkit-keyframes leftSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-220px);
        transform: translateY(-220px)
    }
}

@keyframes leftSnake {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-220px);
        transform: translateY(-220px)
    }
}

@-webkit-keyframes bottomSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-310px);
        transform: translateX(-310px)
    }
}

@keyframes bottomSnake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-310px);
        transform: translateX(-310px)
    }
}

@-webkit-keyframes firstDisable {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes firstDisable {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes secondDisable {
    0% {
        opacity: 0
    }

    55% {
        opacity: 0
    }

    56% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    91% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes secondDisable {
    0% {
        opacity: 0
    }

    55% {
        opacity: 0
    }

    56% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    91% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes thirdDisable {
    0% {
        opacity: 0
    }

    55% {
        opacity: 0
    }

    56% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    91% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes thirdDisable {
    0% {
        opacity: 0
    }

    55% {
        opacity: 0
    }

    56% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    91% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.preloader {
    position: fixed;
    background-color: #d1d1c2;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    -webkit-perspective: 2px;
    perspective: 2px;
    overflow: hidden;
    flex-wrap: wrap;
    height: calc(var(--vh, 1vh) * 100)
}

.preloader .pre_wrapper {
    width: 180px;
    height: 90px;
    position: relative;
    overflow: hidden
}

.preloader .pre_wrapper .first {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    top: 0;
    right: 0;
    -webkit-animation-name: firstDisable;
    animation-name: firstDisable;
    -webkit-animation-duration: 10ms;
    animation-duration: 10ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.preloader .pre_wrapper .second {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    bottom: 0;
    right: 50px;
    -webkit-animation-name: secondDisable;
    animation-name: secondDisable;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.preloader .pre_wrapper .third {
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #191a1b;
    top: 50px;
    left: 0;
    -webkit-animation-name: thirdDisable;
    animation-name: thirdDisable;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.preloader .pre_wrapper .snake_new .last_snake {
    position: absolute;
    height: 10px;
    width: 110px;
    background: #191a1b;
    display: inline-block;
    top: 0;
    left: -110px;
    -webkit-animation-name: topSnake;
    animation-name: topSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s
}

.preloader .pre_wrapper .snake_new .top_snake {
    position: absolute;
    height: 10px;
    width: 110px;
    background: #191a1b;
    display: inline-block;
    top: 0;
    left: -110px;
    -webkit-animation-name: topSnake;
    animation-name: topSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s
}

.preloader .pre_wrapper .snake_new .bottom_snake {
    position: absolute;
    height: 10px;
    width: 140px;
    background: #191a1b;
    display: inline-block;
    bottom: 0;
    right: -140px;
    -webkit-animation-name: bottomSnake;
    animation-name: bottomSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.preloader .pre_wrapper .snake_new .right_snake {
    width: 10px;
    height: 110px;
    background: #191a1b;
    display: inline-block;
    position: absolute;
    right: 0;
    top: -110px;
    -webkit-animation-name: rightSnake;
    animation-name: rightSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: .97s;
    animation-delay: .97s
}

.preloader .pre_wrapper .snake_new .left_snake {
    width: 10px;
    height: 130px;
    background: #191a1b;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -130px;
    -webkit-animation-name: leftSnake;
    animation-name: leftSnake;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-delay: 2.47s;
    animation-delay: 2.47s
}

.preloader .pre_wrapper .snake_new .head {
    display: inline-block;
    width: 10px;
    position: absolute;
    height: 10px;
    background: #d1d1c2;
    -webkit-animation-name: snakeHead;
    animation-name: snakeHead;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2
}

.preloader .pre_wrapper .snake_new .head:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 3px;
    background: #191a1b;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: 4px
}

.preloader .pre_wrapper .snake_new .head:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 3px;
    background: #191a1b;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 2px;
    left: 4px
}

.working-modal {
    position: fixed;
    z-index: 3000;
    top: calc(var(--vh, 1vh) * 110)
}

@media only screen and (min-width:993px) {
    .working-modal {
        display: none
    }
}

@media only screen and (max-width:992px) {
    .working-modal.is-active .working-modal__item {
        opacity: 0;
        pointer-events: none
    }

    .working-modal.is-active .working-modal__item.is-active {
        opacity: 1;
        pointer-events: all;
        -webkit-transform: translateY(calc(var(--vh, 1vh) * -105));
        transform: translateY(calc(var(--vh, 1vh) * -105));
        transition: opacity .4s cubic-bezier(.33, 1, .68, 1) .5s, -webkit-transform .7s cubic-bezier(.65, 0, .35, 1) .5s;
        transition: transform .7s cubic-bezier(.65, 0, .35, 1) .5s, opacity .4s cubic-bezier(.33, 1, .68, 1) .5s;
        transition: transform .7s cubic-bezier(.65, 0, .35, 1) .5s, opacity .4s cubic-bezier(.33, 1, .68, 1) .5s, -webkit-transform .7s cubic-bezier(.65, 0, .35, 1) .5s
    }
}

.working-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
    transition: transform .4s ease-out, -webkit-transform .4s ease-out
}

.working-modal__close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.working-modal__inner {
    overflow: scroll;
    height: 100%;
    padding: 40px 28px 22px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto
}

.working-modal__socials {
    margin-top: 30px
}

.working-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2px
}

.working-modal__item {
    position: absolute;
    top: 0;
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 95);
    background-color: #fff;
    border-radius: 40px 40px 0 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity .4s cubic-bezier(.33, 1, .68, 1) .4s, -webkit-transform .6s cubic-bezier(.65, 0, .35, 1);
    transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .4s cubic-bezier(.33, 1, .68, 1) .4s;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .4s cubic-bezier(.33, 1, .68, 1) .4s, -webkit-transform .6s cubic-bezier(.65, 0, .35, 1);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto
}

.working-modal__item::-webkit-scrollbar {
    display: none
}

.working-modal__photo {
    margin: 0 auto 18px;
    display: block;
    width: 60%;
    min-width: 200px
}

.working-modal__photo img {
    width: 100%
}

.working-modal__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 8px
}

.working-modal__subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 20px
}

.working-modal__content {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 30px
}

.working-modal__social {
    width: 100%;
    border: 1px solid #1b1c1e;
    color: #1b1c1e;
    border-radius: 60px;
    height: 54px;
    background-color: transparent;
    font-size: 1.125rem
}

.working-modal__social:first-child {
    margin-bottom: 10px
}

.working-modal__social .button__arrow {
    stroke: #1b1c1e
}

.help-modal {
    position: fixed;
    top: 0;
    z-index: 4000;
    top: calc(var(--vh, 1vh) * 110);
    width: 100vw;
    opacity: 0;
    pointer-events: none
}

.help-modal.is-active {
    opacity: 1;
    pointer-events: all
}

.help-modal.is-active .help-modal__close {
    pointer-events: all;
    -webkit-transform: translateY(calc(var(--vh, 1vh) * -110));
    transform: translateY(calc(var(--vh, 1vh) * -110))
}

.help-modal.is-active .help-modal__close:hover {
    -webkit-transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg);
    transform: translateY(calc(var(--vh, 1vh) * -110)) rotate(180deg)
}

.help-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
    transition: transform .4s ease-out, -webkit-transform .4s ease-out;
    z-index: 4000;
    cursor: pointer;
    pointer-events: none
}

@media only screen and (max-width:767px) {
    .help-modal__close {
        background-color: #fff
    }
}

.help-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2px
}

@media only screen and (max-width:767px) {
    .help-modal__close-icon {
        stroke: #1b1c1e
    }
}

.help-modal__item {
    display: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: calc(var(--vh, 1vh) * -10);
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #1b1c1e;
    padding: 22px 40px 40px;
    overflow: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-overflow-style: none;
    scrollbar-width: none
}

.help-modal__item::-webkit-scrollbar {
    display: none
}

@media only screen and (max-width:767px) {
    .help-modal__item {
        padding: 15px 16px
    }
}

.help-modal__container {
    position: relative;
    height: 100%;
    min-height: 650px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media only screen and (max-width:767px) {
    .help-modal__container {
        height: unset;
        min-height: unset;
        max-height: unset
    }
}

.help-modal__title {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 100px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    margin-bottom: 8px
}

@media only screen and (max-width:767px) {
    .help-modal__title {
        font-size: 56px
    }
}

.help-modal__subtitle {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 30px
}

@media only screen and (max-width:767px) {
    .help-modal__subtitle {
        font-size: 1.125rem;
        margin-bottom: 40px
    }
}

.help-modal__blocks {
    display: flex;
    flex-direction: row;
    justify-content: flex-start
}

@media only screen and (max-width:767px) {
    .help-modal__blocks {
        flex-direction: column
    }
}

.help-modal__block {
    width: calc(42% - 40px);
    display: flex;
    flex-direction: column
}

.help-modal__block:first-child {
    margin-right: 80px
}

@media only screen and (max-width:767px) {
    .help-modal__block {
        width: 100%
    }

    .help-modal__block:first-child {
        margin-bottom: 40px
    }
}

.help-modal__pill {
    height: 64px;
    padding: 0 20px;
    background-color: #f5f5eb;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 64px;
    color: #1b1c1e;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 32px;
    margin-bottom: 15px
}

@media only screen and (max-width:767px) {
    .help-modal__pill {
        height: 49px;
        font-size: 1.5rem;
        line-height: 49px
    }
}

.help-modal__text {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5eb
}

@media only screen and (max-width:767px) {
    .help-modal__text {
        font-size: 1.125rem
    }
}

.help-modal__text p {
    margin-bottom: 30px
}

.help-modal__text a {
    text-decoration: underline
}

.help-modal__subtext {
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5eb;
    margin-top: auto
}

@media only screen and (max-width:767px) {
    .help-modal__subtext {
        font-size: 1.125rem
    }
}

.help-modal__subtext p {
    margin-bottom: 0
}

.help-modal__subtext a {
    text-decoration: underline;
    cursor: pointer
}

.help-modal__list {
    max-width: 420px;
    margin-top: 21px
}

@media only screen and (max-width:767px) {
    .help-modal__list {
        max-width: 100%
    }
}

.help-modal__list-item {
    display: block;
    border-bottom: 1px solid #f5f5eb;
    color: #f5f5eb;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    padding-bottom: 6px;
    margin-bottom: 18px
}

@media only screen and (max-width:767px) {
    .help-modal__list-item {
        font-size: 1.125rem
    }
}

.help-modal__next-section {
    width: 50%
}

@media only screen and (max-width:767px) {
    .help-modal__next-section {
        width: 100%;
        padding-bottom: 20px
    }

    .help-modal__next-section .help-modal__subtext {
        display: none
    }
}

.help-modal__next {
    margin-top: 30px;
    width: 66%;
    border: 1px solid #f5f5eb;
    border-radius: 60px;
    height: 62px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 26px;
    cursor: pointer;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.33;
    color: #f5f5eb;
    transition: color .3s ease-in
}

@media only screen and (max-width:767px) {
    .help-modal__next {
        width: 100%;
        margin-top: 30px
    }
}

@media only screen and (min-width:768px) {
    .help-modal__next:hover {
        color: #1b1c1e
    }

    .help-modal__next:hover .help-modal__next-icon {
        stroke: #1b1c1e
    }

    .help-modal__next:hover .help-modal__hover {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }
}

.help-modal__next-icon {
    stroke: #f5f5eb;
    font-size: 26px;
    transition: color .5s ease-out
}

.help-modal__hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    background-color: #f5f5eb;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    transition: border-top-right-radius .5s ease-out, border-top-left-radius .5s ease-out, -webkit-transform .5s ease-out;
    transition: transform .5s ease-out, border-top-right-radius .5s ease-out, border-top-left-radius .5s ease-out;
    transition: transform .5s ease-out, border-top-right-radius .5s ease-out, border-top-left-radius .5s ease-out, -webkit-transform .5s ease-out
}

@media only screen and (max-width:767px) {
    .help-modal__hover {
        display: none
    }
}

.help-modal__actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    width: 100%
}

.help-modal__actions>.help-modal__subtext {
    display: none
}

@media only screen and (min-width:1280px) {
    .help-modal__actions.help-modal__actions--single {
        justify-content: flex-end
    }

    .help-modal__actions.help-modal__actions--single .help-modal__buttons {
        position: absolute;
        right: 0;
        bottom: 0
    }

    .help-modal__actions.help-modal__actions--single .help-modal__subtext {
        position: absolute;
        width: 40%;
        bottom: 120px
    }
}

@media only screen and (max-width:767px) {
    .help-modal__actions {
        flex-direction: column;
        margin-top: 30px
    }

    .help-modal__actions>.help-modal__subtext {
        display: block;
        margin-bottom: 30px
    }
}

.help-modal__buttons {
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .help-modal__buttons {
        width: 100%;
        justify-content: space-between
    }
}

.help-modal__button {
    width: 200px;
    height: 200px;
    border: 1px solid #f5f5eb;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0
}

@media only screen and (max-width:922px) {
    .help-modal__button {
        width: 140px;
        height: 140px
    }

    .help-modal__button:last-child {
        margin-left: auto
    }
}

.help-modal__button-text {
    color: #f5f5eb;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    max-width: 140px;
    text-align: center
}

@media only screen and (max-width:767px) {
    .help-modal__button-text {
        font-size: 1.125rem
    }
}

.help-modal__button-or {
    color: #f5f5eb;
    font-family: satoshi, sans-serif;
    font-style: normal;
    font-size: 1.25;
    font-weight: 400;
    line-height: 1.2;
    padding: 0 16px
}

.help-modal__button--discuss {
    background-color: #f5f5eb
}

.help-modal__button--discuss .help-modal__button-text {
    color: #1b1c1e
}

.form {
    position: relative;
    z-index: 2;
    padding: 72px 0
}

@media only screen and (max-width:767px) {
    .form {
        padding: 40px 0
    }
}

.form__container {
    width: 81.9444444444vw;
    margin: 0 auto
}

@media only screen and (max-width:992px) {
    .form__container {
        width: calc(100% - 48px)
    }
}

@media only screen and (max-width:767px) {
    .form__container {
        width: 81.9444444444vw
    }
}

.form__email {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 10vw;
    font-weight: 300;
    text-align: center;
    z-index: 2
}

@media only screen and (max-width:992px) {
    .form__email {
        font-size: 11vw
    }
}

@media only screen and (max-width:767px) {
    .form__email {
        font-size: 10vw
    }
}

.form__inputs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2
}

.form #form {
    display: none
}

.form #form_main .form__send-text {
    width: 284px;
    display: none;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:1200px) {
    .form #form_main .form__send-text {
        font-size: 20px
    }
}

@media only screen and (max-width:900px) {
    .form #form_main .form__send-text {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .form #form_main .form__send-text {
        font-size: 28px
    }
}

.form #form_main .form__lottie,
.form #form_main .form__send-text,
.form #form_main .form__submitted {
    display: none
}

.form #form_main.is-send {
    border-radius: 34px;
    border: 1px solid #1b1c1e;
    padding: 8px 16px
}

.form #form_main.is-send .button,
.form #form_main.is-send .custom-select-container,
.form #form_main.is-send .form__input,
.form #form_main.is-send .form__text-input,
.form #form_main.is-send select {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

@media only screen and (max-width:767px) {

    .form #form_main.is-send .button,
    .form #form_main.is-send .custom-select-container,
    .form #form_main.is-send .form__input,
    .form #form_main.is-send .form__text-input,
    .form #form_main.is-send select {
        position: relative
    }
}

.form #form_main.is-send .form__send-text {
    display: block
}

.form #form_main.is-send .form__submitted {
    display: flex
}

.form #form_main.is-send .form__lottie {
    display: block;
    width: 100%
}

.form #form_main.is-send .form__lottie svg {
    height: auto !important;
    width: 100%
}

@media only screen and (max-width:767px) {
    .form #form_main.is-send .form__lottie {
        position: absolute;
        width: calc(100% - 32px)
    }
}

.form .custom-select-container {
    position: relative;
    width: 25%;
    z-index: 100;
    font-size: 20px
}

.form .custom-select-container::after {
    content: url(../assets/svg/chevron.svg);
    position: absolute;
    z-index: 200;
    top: 20px;
    right: 28px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition: -webkit-transform .3s cubic-bezier(.33, 1, .68, 1);
    transition: transform .3s cubic-bezier(.33, 1, .68, 1);
    transition: transform .3s cubic-bezier(.33, 1, .68, 1), -webkit-transform .3s cubic-bezier(.33, 1, .68, 1);
    pointer-events: none
}

.form .custom-select-container.is-open::after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.form .custom-select-container.is-open .custom-select-panel {
    display: block
}

@media only screen and (max-width:992px) {
    .form .custom-select-container {
        width: calc(33% - 12px);
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .form .custom-select-container {
        height: 54px;
        font-size: 18px;
        width: 100% !important;
        margin-bottom: 14px;
        width: 100%
    }
}

.form .custom-select-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 26px;
    border: 1px solid #1b1c1e;
    background-color: #e0e1d1
}

.form .custom-select-option {
    font-family: satoshi, sans-serif;
    font-style: normal;
    padding: 16px 30px 0;
    background-color: transparent;
    flex-shrink: 0;
    font-size: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.form .custom-select-option:last-child {
    padding-bottom: 16px
}

@media only screen and (max-width:992px) {
    .form .custom-select-option {
        padding: 18px 26px 0
    }
}

.form .custom-select-opener {
    display: flex;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    height: 62px;
    border-radius: 42px;
    padding: 16px 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    font-size: inherit;
    cursor: pointer
}

@media only screen and (max-width:992px) {
    .form .custom-select-opener {
        font-size: 18px;
        padding: 18px 26px
    }
}

@media only screen and (max-width:767px) {
    .form .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px
    }
}

.form__input-inner {
    width: 100%;
    height: 100%;
    border-radius: 34px;
    padding: 0 30px;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    font-size: 20px
}

.form__input-inner::-webkit-input-placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1
}

.form__input-inner::placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1
}

@media only screen and (max-width:992px) {
    .form__input-inner {
        font-size: 18px;
        padding: 0 26px
    }
}

@media only screen and (max-width:767px) {
    .form__input-inner {
        font-size: 18px
    }
}

.form__input {
    position: relative;
    height: 62px;
    flex-shrink: 0
}

@media only screen and (max-width:767px) {
    .form__input {
        height: 54px;
        width: 100% !important;
        margin-bottom: 14px
    }
}

.form__input::after {
    content: "";
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: #933333
}

@media only screen and (max-width:767px) {
    .form__input::after {
        width: 18px;
        height: 18px;
        top: 18px;
        right: 18px
    }
}

.form__input.not-valid .form__input-inner {
    border-color: #933333;
    color: #933333
}

.form__input.not-valid .form__input-inner::-webkit-input-placeholder {
    color: #933333
}

.form__input.not-valid .form__input-inner::placeholder {
    color: #933333
}

.form__input.not-valid::after {
    display: block
}

.form__input-4 {
    width: calc(25% - 11px)
}

@media only screen and (max-width:992px) {
    .form__input-4 {
        width: 67%
    }
}

.form__input-2 {
    width: 50%
}

@media only screen and (max-width:992px) {
    .form__input-2 {
        width: 100%;
        margin-top: 10px
    }
}

@media only screen and (max-width:767px) {
    .form__input-2 {
        margin-top: 0
    }
}

.form__text-input {
    position: relative;
    margin-top: 14px;
    width: 100%
}

@media only screen and (max-width:767px) {
    .form__text-input {
        margin-top: 0
    }
}

.form__text-input .form__input {
    width: 100%
}

.form__submit {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
    top: 4px;
    transition: .3s background-color ease-out;
    cursor: pointer;
    z-index: 20
}

@media only screen and (max-width:767px) {
    .form__submit {
        display: none
    }
}

.form__submit:hover {
    background-color: #fbbc05
}

.form__submit-arrow {
    font-size: 26px;
    stroke: #fff;
    fill: #fff
}

.form__submitted {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4px;
    bottom: 4px;
    transition: .3s background-color ease-out;
    cursor: pointer
}

@media only screen and (max-width:767px) {
    .form__submitted {
        display: none
    }
}

.form__submitted:hover {
    background-color: #fbbc05
}

.form__checkmark {
    display: block;
    font-size: 32px;
    fill: transparent;
    stroke: #fff
}

.form__submit-mob {
    display: none;
    background-color: #1b1c1e;
    -webkit-user-select: none;
    user-select: none;
    color: transparent
}

.form__submit-mob:hover {
    color: transparent
}

@media only screen and (max-width:767px) {
    .form__submit-mob {
        display: flex
    }
}

.form__socials {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap
}

.form__socials-arrow {
    font-size: 26px;
    stroke: #fff;
    margin-left: 13px
}

@media only screen and (max-width:767px) {
    .form__socials {
        margin-top: 50px;
        justify-content: space-between
    }
}

.form__social-link {
    margin-right: 10px
}

@media only screen and (max-width:767px) {
    .form__social-link {
        display: block;
        width: calc(50% - 5px);
        margin-bottom: 10px;
        flex-shrink: 0;
        margin-right: 0
    }

    .form__social-link:last-child {
        width: 100%
    }
}

.form__social {
    height: 62px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 7px;
    border-radius: 34px;
    background-color: #fbbc05;
    font-size: 20px;
    color: #fff;
    width: 100%
}

.footer {
    z-index: 1
}

.footer__made {
    font-family: Austin, serif;
    font-style: normal;
    margin-top: 34px;
    padding-bottom: 38px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    text-align: center
}

@media only screen and (max-width:767px) {
    .footer__made {
        margin-top: 40px;
        padding-bottom: 26px;
        font-size: 24px;
        line-height: 1
    }
}

.footer__made--link {
    text-decoration: underline
}

.form-modal {
    position: fixed;
    top: 0;
    z-index: 5000;
    top: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    opacity: 0;
    pointer-events: none
}

.form-modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f5f5eb;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
    transition: transform .4s ease-out, -webkit-transform .4s ease-out;
    z-index: 100;
    cursor: pointer
}

.form-modal__close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.form-modal__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: #f5f5eb;
    -webkit-transform-origin: center;
    transform-origin: center;
    border-radius: 50%
}

.form-modal__close-icon {
    width: 22px;
    height: 22px;
    stroke: #1b1c1e;
    stroke-width: 2px
}

.form-modal__inner {
    display: none;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 0;
    width: 100vw;
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #f5f5eb;
    padding: 22px 40px 40px;
    overflow: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.form-modal__inner::-webkit-scrollbar {
    display: none
}

@media only screen and (max-width:767px) {
    .form-modal__inner {
        padding: 100px 28px
    }
}

.form-modal__email {
    position: relative;
    font-family: Austin, serif;
    font-style: normal;
    font-size: 10vw;
    font-weight: 300;
    z-index: 2;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block
}

@media only screen and (max-width:767px) {
    .form-modal__email {
        font-size: 11vw;
        margin-bottom: 10px
    }
}

@media only screen and (max-width:420px) {
    .form-modal__email {
        font-size: 10vw
    }
}

.form-modal__inputs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    width: 80.5555555556vw
}

@media only screen and (max-width:767px) {
    .form-modal__inputs {
        width: 100%
    }
}

.form-modal #form-modal-select {
    display: none
}

.form-modal .custom-select-container {
    position: relative;
    width: 25%;
    z-index: 100;
    font-size: 20px
}

.form-modal .custom-select-container::after {
    content: url(../assets/svg/chevron.svg);
    position: absolute;
    z-index: 200;
    top: 20px;
    right: 28px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition: -webkit-transform .3s cubic-bezier(.33, 1, .68, 1);
    transition: transform .3s cubic-bezier(.33, 1, .68, 1);
    transition: transform .3s cubic-bezier(.33, 1, .68, 1), -webkit-transform .3s cubic-bezier(.33, 1, .68, 1);
    pointer-events: none
}

@media only screen and (max-width:1280px) {
    .form-modal .custom-select-container::after {
        top: 23px
    }
}

@media only screen and (max-width:767px) {
    .form-modal .custom-select-container::after {
        top: 20px
    }
}

.form-modal .custom-select-container.is-open::after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.form-modal .custom-select-container.is-open .custom-select-panel {
    display: block
}

@media only screen and (max-width:1280px) {
    .form-modal .custom-select-container {
        width: calc(40% - 12px);
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .form-modal .custom-select-container {
        height: 54px;
        font-size: 18px;
        width: 100% !important;
        margin-bottom: 14px;
        width: 100%
    }
}

.form-modal .custom-select-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 26px;
    border: 1px solid #1b1c1e;
    background-color: #f5f5eb
}

.form-modal .custom-select-option {
    font-family: satoshi, sans-serif;
    font-style: normal;
    padding: 16px 30px 0;
    background-color: transparent;
    flex-shrink: 0;
    font-size: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.form-modal .custom-select-option:last-child {
    padding-bottom: 16px
}

@media only screen and (max-width:1280px) {
    .form-modal .custom-select-option {
        padding: 18px 26px 0
    }
}

.form-modal .custom-select-opener {
    display: flex;
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    height: 62px;
    border-radius: 42px;
    padding: 16px 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    font-size: inherit;
    cursor: pointer
}

@media only screen and (max-width:1280px) {
    .form-modal .custom-select-opener {
        font-size: 18px;
        padding: 18px 26px
    }
}

@media only screen and (max-width:767px) {
    .form-modal .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .form-modal .custom-select-opener {
        height: 54px;
        padding: 14px 30px;
        font-size: 18px
    }
}

.form-modal__input-inner {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    border-radius: 34px;
    padding: 0 30px;
    background-color: transparent;
    border: 1px solid #1b1c1e;
    font-size: 20px;
    width: 100%;
    height: 100%
}

.form-modal__input-inner::-webkit-input-placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1
}

.form-modal__input-inner::placeholder {
    font-family: satoshi, sans-serif;
    font-style: normal;
    color: #1b1c1e;
    opacity: 1
}

@media only screen and (max-width:767px) {
    .form-modal__input-inner {
        font-size: 18px
    }
}

.form-modal__input {
    position: relative;
    height: 62px;
    flex-shrink: 0
}

@media only screen and (max-width:767px) {
    .form-modal__input {
        height: 54px;
        width: 100% !important;
        margin-bottom: 10px
    }
}

.form-modal__input::after {
    content: "";
    display: none;
    position: absolute;
    width: 21px;
    height: 21px;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background: #933333
}

@media only screen and (max-width:1280px) {
    .form-modal__input::after {
        top: 23px
    }
}

@media only screen and (max-width:767px) {
    .form-modal__input::after {
        width: 18px;
        height: 18px;
        top: 18px;
        right: 18px
    }
}

.form-modal__input.not-valid .form-modal__input-inner {
    border-color: #933333;
    color: #933333
}

.form-modal__input.not-valid .form-modal__input-inner::-webkit-input-placeholder {
    color: #933333
}

.form-modal__input.not-valid .form-modal__input-inner::placeholder {
    color: #933333
}

.form-modal__input.not-valid::after {
    display: block
}

.form-modal__input-4 {
    width: calc(25% - 11px)
}

@media only screen and (max-width:1280px) {
    .form-modal__input-4 {
        width: 60%
    }
}

.form-modal__input-2 {
    width: 50%
}

@media only screen and (max-width:1280px) {
    .form-modal__input-2 {
        width: 100%;
        margin-top: 10px
    }
}

@media only screen and (max-width:767px) {
    .form-modal__input-2 {
        margin-top: 0
    }
}

.form-modal__textarea {
    height: 241px
}

@media only screen and (max-width:767px) {
    .form-modal__textarea {
        height: 170px;
        margin-bottom: 8px
    }
}

.form-modal__textarea .form-modal__input-inner {
    padding: 20px 30px;
    resize: none
}

.form-modal__text-input {
    position: relative;
    margin-top: 14px;
    width: 100%
}

@media only screen and (max-width:767px) {
    .form-modal__text-input {
        margin-top: 0
    }
}

.form-modal__text-input .form-modal__input {
    width: 100%
}

.form-modal__submit {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #1b1c1e;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 19px;
    bottom: 26px;
    transition: .3s background-color ease-out;
    cursor: pointer
}

@media only screen and (max-width:767px) {
    .form-modal__submit {
        display: none
    }
}

.form-modal__submit:hover {
    background-color: #fbbc05
}

.form-modal__submit-arrow {
    font-size: 26px;
    fill: #fff;
    stroke: #fff
}

.form-modal__submit-mob {
    display: none;
    background-color: #1b1c1e;
    -webkit-user-select: none;
    user-select: none;
    color: transparent
}

.form-modal__submit-mob:hover {
    color: transparent
}

@media only screen and (max-width:767px) {
    .form-modal__submit-mob {
        display: flex
    }
}

.form-modal__success {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none
}

.form-modal__logo {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 30px
}

.form-modal__logo-image {
    font-size: 29px
}

.form-modal__success-text {
    font-family: Austin, serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-align: center
}