.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(//iifjs.com/wp-content/themes/iifjas/assets/fonts/Satoshi-Variable.ttf) format("truetype");
}
@font-face {
font-family: Austin;
font-display: swap;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/Austin-Light-Web.woff2) format("woff2");
}
@font-face {
font-family: AustinItalic;
font-display: swap;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/Austin-LightItalic-Web.woff2) format("woff2");
}
@font-face {
font-family: editorial;
font-display: swap;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/EditorialNew-Thin.otf);
}
@font-face {
font-family: satoshi;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/satoshi/Satoshi-Light.ttf) format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: satoshi;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/satoshi/Satoshi-Variable.ttf) format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: satoshi;
src: url(//iifjs.com/wp-content/themes/iifjas/assets/fonts/satoshi/Satoshi-Medium.ttf) format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: satoshi;
src: url(//iifjs.com/wp-content/themes/iifjas/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: #f9d6d6;
}
.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: #f9d6d6;
}
.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: 0.001px; line-height: 1.12;
-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: #ffdfea;
}
.title {
font-family: Austin, serif;
font-style: normal;
font-size: 100px;
font-weight: 300;
line-height: 0.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: 600; font-size: 36px;
line-height: 110%;
color: #e01d85; padding: 0.5rem 3rem;
border: 1px solid #e01d85;
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 30px; }
}
.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: #e01d85;
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 0.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 0.5s ease-out, -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out, border-radius 0.5s ease-out;
transition: transform 0.5s ease-out, border-radius 0.5s ease-out, -webkit-transform 0.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; 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 0.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 0.5s ease-out, -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out, border-radius 0.5s ease-out;
transition: transform 0.5s ease-out, border-radius 0.5s ease-out, -webkit-transform 0.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: #ffdfea;
}
@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: #e01d85;
color: #fff;
cursor: pointer;
font-size: 1.125rem;
margin-right: 0; display:none; }
.header__logo-animation {
position: relative;
width: 180px;
height: 24px;
}
.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; background: #ffdfea;
border-radius: 100px;
padding: 0px 10px 0px 15px;
}
.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: 0.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: #ffdfea;
height: 51px;
display: flex;
margin: 0;
padding: 0 24px;
align-items: center;
color: #000;
transition: color 0.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) {
margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(4) {
margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(5) {
margin: 0 2px 0px 0px;
}
.header .new__custom_menu .header__menu-item:nth-child(6) {
border-radius: 0 100px 100px 0;
}
.header .new__custom_menu .header__menu-item:hover {
opacity: 1;
color: rgba(0, 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 0.15s ease-out;
transition: transform 0.15s ease-out;
transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out;
}
.header__menu--button .header__menu-icon-bottom {
-webkit-transform-origin: left;
transform-origin: left;
transition: -webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out;
transition: transform 0.15s ease-out, -webkit-transform 0.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__logo-animation .header__menu-item:nth-child(1) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 0s;
}
.header__logo-animation .header__menu-item:nth-child(2) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 2.15s;
}
.header__logo-animation .header__menu-item:nth-child(3) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 4.3s;
}
.header__logo-animation .header__menu-item:nth-child(4) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 6.45s;
}
.header__logo-animation .header__menu-item:nth-child(5) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 8.6s;
}
.header__logo-animation .header__menu-item:nth-child(6) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 10.75s;
}
.header__logo-animation .header__menu-item:nth-child(7) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 12.9s;
}
.header__logo-animation .header__menu-item:nth-child(8) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 15.05s;
}
.header__logo-animation .header__menu-item:nth-child(9) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 17.2s;
}
.header__logo-animation .header__menu-item:nth-child(10) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 19.35s;
}
.header__logo-animation .header__menu-item:nth-child(11) {
animation: logo-title 23.65s infinite ease-in-out;
animation-delay: 21.5s;
}
@keyframes logo-title {
0% {
transform: translateY(24px);
opacity: 0;
}
4.22% {
transform: translateY(0);
opacity: 1;
}
8.44% {
transform: translateY(0);
opacity: 1;
}
12.65% {
transform: translateY(-24px);
opacity: 0;
}
12.66% {
transform: translateY(24px);
opacity: 0;
}
100% {
transform: translateY(24px);
opacity: 0;
}
}
.menu {
position: fixed;
top: 0;
left: 0;
height: calc(var(--vh, 1vh) * 100);
width: 100vw;
background-color: #f9d6d6;
padding: 0 28px 28px;
pointer-events: all;
display: flex;
flex-direction: column;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.menu.is-active {
transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.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: 0.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: #ffdfea; background-image: url(https://iifjs.com/wp-content/uploads/2025/05/Semi-circle-below-pink-dot_1.png);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom; 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: 70px;
line-height: 0.96;
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: 72px;
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: 34px;
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: #e01d85;
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: 65vh;
-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;
height: 40vh;
}
}
.hero__title {
position: absolute;
z-index: 4;
width: 610px; top: 47vh;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
pointer-events: none;
}
@media only screen and (max-width: 767px) {
.hero__title {
top: 30vh;
}
}
.hero__name { font-family: ALANTA ROSERY;
font-style: normal;
font-size: 200px;
color: #1b1c1e;
line-height: 0.5;
margin-left: -450px;
}
@media only screen and (max-width: 1440px) {
.hero__name { font-size: 130px; margin-left: -314px;
}
}
@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: -170px;
font-size: 80px;
}
}
.hero__surname { font-family: ALANTA ROSERY;
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: 130px;
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: #f9d6d6;
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: #f9d6d6;
}
.hero__dashes {
overflow: hidden;
position: absolute;
top: 0;
margin: 0 auto;
background-color: #f9d6d6;
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, 0.6) calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24)),
linear-gradient(to left, transparent 1px, transparent calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.6) calc((78vw - 1px) / 24 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 4px) / 14 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 10 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 2px) / 8 - 1px), rgba(255, 255, 255, 0.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: #f4c2c2;
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;
}
.principles__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 {  margin-top: 25px;  }
}
.snake__ball {
position: relative;
width: 630px;
height: 630px;
margin: -315px auto -315px;
background-color: #e01d85;
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: 836px;
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: 180px;
height: 253px; left: 18%;
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, 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 0.7s linear;
}
.portfolio__item.is-active {
z-index: 100;
}
.portfolio__item.is-active .portfolio__image-container {
transition: -webkit-clip-path 0.7s ease-in-out 0.4s;
transition: clip-path 0.7s ease-in-out 0.4s;
transition: clip-path 0.7s ease-in-out 0.4s, -webkit-clip-path 0.7s ease-in-out 0.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: #e01d85;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.portfolio__item.is-active .portfolio__item-descr {
color: #e01d85;
-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 0.7s ease-in-out 0s;
transition: clip-path 0.7s ease-in-out 0s;
transition: clip-path 0.7s ease-in-out 0s, -webkit-clip-path 0.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: 60px;
font-weight: 300;
line-height: 0.98;
z-index: 1;
transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (max-width: 1440px) {
.portfolio__item-title { font-size: 50px;
}
}
@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 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.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 0.7s ease-in-out 0s;
transition: clip-path 0.7s ease-in-out 0s;
transition: clip-path 0.7s ease-in-out 0s, -webkit-clip-path 0.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: #e01d85;
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: #f9d6d6;
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, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28)),
linear-gradient(to left, transparent 1px, transparent calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((89vw - 1px) / 28 - 1px), rgba(255, 255, 255, 0.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, 0.6) calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.6) calc((88vw - 17px) / 28 - 1px), rgba(255, 255, 255, 0.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: #fbe0e0;
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 0.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 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.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: #ffdfea;
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: #ffdfea;
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: 68px;
font-weight: 300;
line-height: 1;
z-index: 2;
}
@media only screen and (max-width: 1280px) {
.portfolio-content__title { font-size: 60px;
}
}
@media only screen and (max-width: 992px) {
.portfolio-content__title { font-size: 45px;
}
}
.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: #f4c2c2;
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;
font-size:18px;
}
.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);
}
.jwlx .portfolio-content__link {
display: block;
width: calc(37% - 6px);
}
@media only screen and (max-width: 1200px) {
.portfolio-content__link {
width: 100%;
}
.jwlx .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-size: contain;
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: #f4c2c2;
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: 480px;
}
@media only screen and (max-width: 1440px) {
.principles__paragraph:first-child {
width: 480px;
}
}
@media only screen and (max-width: 1200px) {
.principles__paragraph:first-child {
width: 380px;
}
}
@media only screen and (max-width: 1024px) {
.principles__paragraph:first-child {
width: 340px;
}
}
@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 { flex-direction: row;
align-items: center;
min-width: none; border-radius: 160px;
width: calc(50% - 24px);
margin-bottom: 30px;
padding: 30px 40px 30px 40px; background-color: #e01d85;
}
@media only screen and (max-width: 1280px) {
.principles__item {
width: calc(50% - 12px);
}
}
@media only screen and (max-width: 768px) {
.principles__item {
width: 100%; 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: #ffffff;
font-weight: 300;
line-height: 1.1;
letter-spacing: 0;
text-align: center;
}
@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: 124vw;
}
@media only screen and (max-width: 992px) {
.teacher__main { height: 124vw;
}
}
@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: #ffdfea;
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: 0.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--1 {
height: 80px;
}
.teacher__item-image-mob--2 {
height: 80px;
}
.teacher__item-image-mob--3 {
height: 80px;
}
.teacher__item-image-mob--4 {
height: 80px;
}
.teacher__item-image-mob--5 {
height: 80px;
}
.teacher__item-image-mob--6 {
height: 80px;
}
.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: #ffdfea;
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: 0.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 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s, -webkit-transform 0.3s ease-out 0.1s;
transition: color 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s;
transition: color 0.3s ease-out 0.1s, background-color 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, border 0.3s ease-out 0.1s, -webkit-transform 0.3s ease-out 0.1s;
background-color: #ffdfea;
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 0.3s ease-out 0.1s;
transition: filter 0.3s ease-out 0.1s;
transition: filter 0.3s ease-out 0.1s, -webkit-filter 0.3s ease-out 0.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 0.3s ease-out 0.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: bold;
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: #e01d85;
-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(-0.333deg);
transform: rotate(-0.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: #e01d85;
-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: 0.1388888889vw;
-webkit-transform: rotate(-0.97deg);
transform: rotate(-0.97deg);
}
@media only screen and (max-width: 992px) {
.book--4 {
width: 95%;
margin-left: 2.5%;
}
}
.book--4:hover {
background-color: #ba8585;
-webkit-transform: rotate(0.97deg);
transform: rotate(0.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(0.39deg);
transform: rotate(0.39deg);
}
@media only screen and (max-width: 992px) {
.book--5 {
width: 90%;
margin-left: 5%;
}
}
.book--5:hover {
background-color: #6e5c62;
-webkit-transform: rotate(-0.39deg);
transform: rotate(-0.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: #e01d85;
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: #f4c2c2;
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: #ffdfea;
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 0.3s ease-out;
transition: clip-path 0.3s ease-out;
transition: clip-path 0.3s ease-out, -webkit-clip-path 0.3s ease-out;
z-index: 3;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: scale(0.5);
transform: scale(0.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: 0px;
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: 0.85s cubic-bezier(0.25, 0.46, 0.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: #ffdfea;
}
@media only screen and (min-width: 1024px) {
.working__ball img {
z-index: 2;
transition: 0.85s cubic-bezier(0.25, 0.46, 0.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);
}
}
@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--space {
position: absolute;
top: 20.2777777778vw;
left: 88.2638888889vw;  }
.working__ball--we {
position: absolute;
top: 14.7916666667vw;
left: 7.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--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(0.7);
transform: scale(0.7);
}
.working__ball-image--space { width: 7.9722222222vw;
}
.working__ball-image--we { width: 7.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: 20.3333333333vw;
}
.working__ball-image--we { width: 19.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: 45.3333333333vw;
opacity: 0;
pointer-events: none;
transition: opacity 0.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 0.5s ease-in-out 0.25s;
}
.working__content {
position: relative;
margin-top: -17.5694444444vw;
width: 65.6666666667vw;
height: 65.6666666667vw;
padding-right: 70px;
background-color: #fff;
margin-left: calc(100% - 18px - 65.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: 20px;
font-weight: 400;
line-height: 1.2;
}
@media only screen and (max-width: 1280px) {
.working__content-content p {
font-size: 16px;
}
}
.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: 0.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: #e01d85;
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: 0.6s -webkit-transform ease-out;
transition: 0.6s transform ease-out;
transition: 0.6s transform ease-out, 0.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: #ffdfea;
background-image: linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, 0.6) 49px, rgba(210, 211, 195, 0.6) 50px),
linear-gradient(to left, transparent 1px, transparent 49px, rgba(210, 211, 195, 0.6) 49px, rgba(210, 211, 195, 0.6) 50px);
background-size: 50px 100%, 50px 100%;
background-position-x: 0, 25px;
background-repeat: repeat-x;  height: 150%;
top: 0;
width: 88vw;
left: 6vw;
background-image: linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28)),
linear-gradient(to left, transparent 1px, transparent calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.6) calc((88vw - 1px) / 28 - 1px), rgba(210, 211, 195, 0.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: 767px) {
.working__dashes{
background-color: unset;
}
.working__photo{
top: 97px;
right: 30px;
}
.working__photos{
display:block !important;
}
}
@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, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 48px - 1px) / 16 - 1px), rgba(210, 211, 195, 0.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, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 1px) / 12 - 1px), rgba(210, 211, 195, 0.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, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10)),
linear-gradient(to left, transparent 1px, transparent calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.6) calc((100vw - 20px - 2px) / 10 - 1px), rgba(210, 211, 195, 0.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: #ffdfea; width: unset;
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: unset;
left: calc((100vw - 500px) / 2);
}
}
@media only screen and (max-width: 1024px) {
.working__space { width: unset;
left: calc((100vw - 380px) / 2);
}
}
@media only screen and (max-width: 767px) {
.working__space { width: unset;
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: #f4c2c2;
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: 146.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: #000000;
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: #f4c2c2;
}
.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: #e01d85;
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: 0.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(10px) translateX(10px);
transform: translateY(10px) translateX(10px);
}
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(10px) translateX(10px);
transform: translateY(10px) translateX(10px);
}
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(2px) translateX(5px);
transform: translateY(2px) translateX(5px);
}
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(2px) translateX(5px);
transform: translateY(2px) translateX(5px);
}
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(6px) translateX(9px);
transform: translateY(6px) translateX(9px);
}
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(6px) translateX(9px);
transform: translateY(6px) translateX(9px);
}
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(4px);
transform: translateY(5px) translateX(4px);
}
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(4px);
transform: translateY(5px) translateX(4px);
}
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(10px) translateX(10px);
transform: translateY(10px) translateX(10px);
}
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(10px) translateX(10px);
transform: translateY(10px) translateX(10px);
}
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(1px) translateX(3px);
transform: translateY(1px) translateX(3px);
}
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(1px) translateX(3px);
transform: translateY(1px) translateX(3px);
}
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: #f9d6d6;
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: 0.97s;
animation-delay: 0.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: #f9d6d6;
-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 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s, -webkit-transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s;
transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s, -webkit-transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.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 0.4s ease-out;
transition: transform 0.4s ease-out;
transition: transform 0.4s ease-out, -webkit-transform 0.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 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s, -webkit-transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.4s, -webkit-transform 0.6s cubic-bezier(0.65, 0, 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 0.4s ease-out;
transition: transform 0.4s ease-out;
transition: transform 0.4s ease-out, -webkit-transform 0.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; overflow: auto;
scrollbar-width: thin;
padding: 0px 20px;
}  .help-modal__container {
scrollbar-width: thin;
scrollbar-color: #e01d85 transparent; } .help-modal__container::-webkit-scrollbar {
width: 10px; }
.help-modal__container::-webkit-scrollbar-track {
background: transparent; }
.help-modal__container::-webkit-scrollbar-thumb {
background-color: #e01d85;
border-radius: 20px;
}
.help-modal__container::-webkit-scrollbar-thumb:hover {
background-color: #c2186f;
} @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;
margin-top: 40px;
}
@media only screen and (max-width: 767px) {
.help-modal__blocks {
flex-direction: column;
margin-top:0px;
}
.help-modal__blocks:first-child {
margin-top:40px;
}
}
.help-modal__block {
width: calc(42% - 40px);
display: flex;
flex-direction: column;
margin-bottom:40px;
}
.help-modal__block:first-child { }
@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: #ffdfea;
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;
margin-top:30px;
}
@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: #ffdfea;
}
@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: #ffdfea;
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 #ffdfea;
color: #ffdfea;
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 #ffdfea;
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: #ffdfea;
transition: color 0.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: #ffdfea;
font-size: 26px;
transition: color 0.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: #ffdfea;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
transition: border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out, -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out, border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out;
transition: transform 0.5s ease-out, border-top-right-radius 0.5s ease-out, border-top-left-radius 0.5s ease-out, -webkit-transform 0.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 #ffdfea;
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: #ffdfea;
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: #ffdfea;
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: #ffdfea;
}
.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: 9vw;
font-weight: 300;
text-align: center;
z-index: 2;
}
@media only screen and (max-width: 992px) {
.form__email {
font-size: 10vw;
}
}
@media only screen and (max-width: 767px) {
.form__email {
font-size: 9vw;
margin-bottom:15px;
}
}
.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(//iifjs.com/wp-content/themes/iifjas/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 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.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: #f4c2c2;
}
.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: 0.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: #e01d85;
}
.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: 0.3s background-color ease-out;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.form__submitted {
display: none;
}
}
.form__submitted:hover {
background-color: #e01d85;
}
.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;
}
.visitor-registration-button{
justify-content: center;
margin-top:-32px;
position:relative;
z-index:1;
}
@media only screen and (max-width: 767px) {
.visitor-registration-button {
margin-top: -32px !important;
margin-left:25px;
margin-right:25px;
}
}
.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: #e01d85;
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: #ffdfea;
display: flex;
justify-content: center;
align-items: center;
transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
transition: transform 0.4s ease-out, -webkit-transform 0.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: #ffdfea;
-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: #ffdfea;
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(//iifjs.com/wp-content/themes/iifjas/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 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.3s cubic-bezier(0.33, 1, 0.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: #ffdfea;
}
.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: 0.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: #e01d85;
}
.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;
} .help-modal p{
font-family: satoshi, sans-serif;
font-style: normal;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
color: #fff;
margin-bottom: 30px;
}
.help-modal li{
font-family: satoshi, sans-serif;
font-style: normal;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
color: #fff;
margin-bottom: 10px;
list-style-type: disc;
margin-left: 20px;
}
.help-modal ul{
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.help-modal p {
font-size: 1.125rem;
margin-bottom: 40px;
}
.help-modal li {
font-size: 1.125rem;
margin-bottom: 20px;
}
}
.portfolio-content__text-content li{
font-family: satoshi, sans-serif;
font-style: normal;
font-size: 20px;
font-weight: 400;
list-style-type: disc;
margin-left: 20px;
} .video-wrapper {
position: relative;
width: 100%;
max-width: 400px; aspect-ratio: 16 / 9; border: 4px solid #e01d85;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.video-wrapper:hover {
transform: scale(1.03);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.video-wrapper iframe {
width: 100%;
height: 100%;
pointer-events: none; }
.video-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.video-modal__content {
position: relative;
width: 90%;
max-width: 800px;
background: #fff;
border: 4px solid #e01d85;
border-radius: 12px;
padding: 20px;
}
.video-modal__video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-modal__video-wrapper iframe {
width: 100%;
height: 100%;
}
.video-modal__close {
position: absolute;
top: -10px;
right: -10px;
font-size: 24px;
color: #fff;
background: #e01d85;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
}
.video-modal__close:hover {
background: #c01870;
}
@media only screen and (min-width: 767px){
.help-modal__item--2 .help-modal__block{
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}}