@font-face {
  font-family: Satoshi;
  src: url('../fonts/Satoshi-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: Greycliffcf;
  src: url('../fonts/GreycliffCF-ExtraBold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

:root {
  --dark-black: #1c1c25;
  --smoke: #c4c4c4;
  --blue: #2a4bb3;
  --medium-black: #25252f;
  --black: #101016;
  --soft-black: #3b3b44;
  --dark-blue: #213e9a;
  --black-blue: #1f367e;
  --dark-red: #95234c;
  --dark-yellow: #b58622;
  --dark-purple: #4548a9;
  --red: #e72a6e;
  --yellow: #ecb236;
  --white-smoke: #f7efdd;
  --purple: #7174db;
  --green: #44ac9e;
  --dark-green: #267267;
  --light-blue: #536cbb;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  background-color: var(--dark-black);
  color: var(--smoke);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: greycliff-cf, sans-serif;
  font-size: .9vw;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  margin-bottom: 0;
  font-size: 4.72em;
  font-weight: 900;
  line-height: 1;
}

a {
  text-decoration: none;
}

.section {
  background-color: var(--dark-black);
  outline-offset: 0px;
  outline: 0 #c4c4c4;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 98.68em;
  margin-top: auto;
  margin-bottom: auto;
  padding: 3.33em 2.22em;
  display: flex;
}

.main-grid {
  grid-column-gap: 1.11em;
  grid-row-gap: 1.11em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr 1fr;
}

.device {
  background-color: var(--blue);
  width: 30.63em;
  height: 100%;
  color: var(--smoke);
  border-radius: .83em;
  flex-direction: column;
  padding-top: 1.11em;
  display: flex;
  position: relative;
}

.card {
  border: 1px solid var(--medium-black);
  background-color: var(--medium-black);
  box-shadow: 0 0 1em 0 var(--black);
  border-radius: .83em;
  transition: border-color .2s, background-color .2s;
  position: relative;
}

.card:hover {
  background-color: #2d2d38;
  border-color: #c4c4c4b3;
  outline-color: #3b3b44;
}

.card.is--portfolio {
  flex: 1;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
}

.card.is--colors {
  flex: 1;
}

.card.is--side-projects {
  height: 100%;
}

.card.is--years {
  flex: 1;
  margin-left: 1.11em;
}

.card.is--popup {
  width: 100%;
}

.device__screen {
  background-color: var(--black);
  border-radius: .83em;
  height: 18.89em;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
  padding: .9em;
  position: relative;
  overflow: hidden;
}

.c-screws {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.c-screws.is--sound {
  height: 2.22em;
}

.c-screws.is--popup {
  margin-top: 1.11em;
}

.screw {
  width: 2.22em;
  height: 2.22em;
  color: var(--soft-black);
  justify-content: center;
  align-items: center;
  display: flex;
}

.screw.is--device {
  opacity: .12;
  color: var(--smoke);
}

.screw.is--easter {
  color: #51515d;
  cursor: pointer;
  transition: color .2s, transform .2s;
  position: absolute;
}

.screw.is--easter:hover {
  color: var(--smoke);
  transform: scale(1.2);
}

.device__c-line {
  flex-direction: row;
  display: flex;
}

.screen__bg {
  background-color: var(--medium-black);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: background-color .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.screen__bg.is--card {
  padding: 0;
}

.small-screw {
  border-radius: 100%;
  width: .54em;
  min-width: .54em;
  height: .54em;
  min-height: .54em;
}

.small-screw.is--grey {
  background-color: var(--soft-black);
}

.small-screw.is--blue {
  background-color: var(--dark-blue);
}

.small-screw.is--dark {
  background-color: #000;
}

.device__text {
  color: var(--smoke);
}

.device__text.is--title {
  font-size: 1.1em;
}

.device__c-round-btn {
  background-color: var(--dark-black);
  cursor: pointer;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 4.17em;
  min-width: 4.17em;
  height: 4.17em;
  min-height: 4.17em;
  margin-left: .5em;
  margin-right: .5em;
  display: flex;
}

.device__c-round-btn.is--exit {
  background-color: var(--black-blue);
  width: 5.56em;
  min-width: 5.56em;
  height: 5.56em;
  min-height: 5.56em;
  margin-left: 1.11em;
  margin-right: 0;
}

.device__c-round-btn.is--popup {
  background-color: var(--medium-black);
  box-shadow: 0 0 1em 0 var(--black);
  margin-left: 1.11em;
  margin-right: 0;
  position: absolute;
  inset: -2em 1.11em auto auto;
}

.device__c-round-btn.is--door {
  z-index: 1;
  background-color: var(--dark-black);
  position: absolute;
}

.device-line__c-content {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.11em 1.11em 1.11em 2em;
  display: flex;
}

.device__round-btn {
  cursor: pointer;
  border-radius: 100%;
  width: 2.78em;
  height: 2.78em;
  overflow: hidden;
}

.device__round-btn.is--exit {
  background-color: var(--dark-red);
  width: 3.7em;
  height: 3.7em;
}

.device__round-btn.is--yellow {
  background-color: var(--dark-yellow);
}

.device__round-btn.is--purple {
  background-color: var(--dark-purple);
}

.device__round-btn.is--grey {
  background-color: #a8a8a8;
}

.device__round-btn.is--red {
  background-color: var(--dark-red);
}

.device-round-btn__up {
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2.78em;
  height: 2.78em;
  transition: box-shadow .1s, transform .1s;
  display: flex;
}

.device-round-btn__up.is--popup-exit {
  background-color: var(--red);
  width: 3.7em;
  height: 3.7em;
}

.device-round-btn__up.is--yellow {
  background-color: var(--yellow);
  color: var(--dark-yellow);
}

.device-round-btn__up.is--grey {
  background-color: var(--white-smoke);
  color: #a6a6a6;
}

.device-round-btn__up.is--purple {
  background-color: var(--purple);
  color: var(--dark-purple);
}

.device-round-btn__up.is--red {
  background-color: var(--red);
  color: var(--dark-red);
}

.c-small-screws {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100%;
  display: flex;
}

.c-small-screws.is--intro {
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: auto;
}

.device__c-btn {
  background-color: var(--dark-blue);
  border-radius: .83em;
  padding: 1.11em;
}

.device__c-btn.is--slider {
  width: 100%;
}

.device__c-skill {
  background-color: var(--blue);
  cursor: pointer;
  border-radius: .56em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 5.5em;
  margin-bottom: 1.11em;
  padding-left: 1.11em;
  transition: background-color .1s;
  display: flex;
  overflow: hidden;
}

.device__c-skill:hover {
  background-color: var(--black-blue);
}

.device__btn {
  min-height: 4em;
  color: var(--black-blue);
  cursor: pointer;
  border-radius: .28em;
  margin-top: -.5em;
  overflow: hidden;
}

.device__btn.is--popup {
  width: 100%;
  position: relative;
}

.device__btn.drag--handle {
  z-index: 2;
  cursor: grab;
  position: relative;
}

.device__btn.is--slider-right {
  border-radius: 100em;
  margin-left: 1.11em;
}

.device__btn.is--slider-left {
  border-radius: 100em;
}

.round-btn-up__line {
  border-radius: 100rem;
  width: .31em;
  height: 1.04em;
}

.round-btn-up__line.is--yellow {
  background-color: var(--dark-yellow);
}

.round-btn-up__line.is--purple {
  background-color: var(--dark-purple);
}

.round-btn-up__line.is--grey {
  background-color: #ababab;
}

.round-btn-up__line.is--red {
  background-color: var(--dark-red);
}

.device-btn__up {
  border-radius: .28em;
  justify-content: center;
  align-items: center;
  min-height: 3.54em;
  padding-left: 1.81em;
  padding-right: 1.81em;
  transition: box-shadow .1s, transform .1s;
  display: flex;
}

.device-btn__up.is--yellow {
  background-color: var(--yellow);
  color: var(--dark-yellow);
}

.device-btn__up.is--green {
  background-color: var(--green);
  color: var(--dark-green);
}

.device-btn__up.is--grey {
  background-color: var(--medium-black);
  color: var(--smoke);
  border-radius: 100em;
  padding-left: 1.11em;
  padding-right: 1.11em;
}

.device-btn__up.is--red {
  background-color: var(--red);
  color: var(--dark-red);
}

.device-btn__text {
  font-size: 1.25em;
}

.sound-dot {
  background-image: radial-gradient(circle at 50% 100%, #1c1c2500, #1010169c 93%);
  border-radius: 100%;
  width: .46em;
  min-width: .46em;
  height: .46em;
  min-height: .46em;
  margin: .14em;
}

.c-sound-dots__line {
  display: flex;
}

.device__logo {
  width: 2.39em;
  height: 1.55em;
  margin-right: .97em;
}

.device__c-title {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 1.11em;
  padding-right: 1.11em;
  display: flex;
}

.screen__grain {
  opacity: .67;
  mix-blend-mode: overlay;
  display: flex;
  position: absolute;
  inset: 0%;
}

.screen__grain.is--portfolio {
  z-index: 1;
}

.device-screen__reflect {
  z-index: 2;
  opacity: .06;
  mix-blend-mode: normal;
  background-color: #fff;
  height: 10em;
  position: absolute;
  inset: -13% 0% auto -21%;
  transform: rotate(-11deg);
}

.device-screen__c-dialog {
  z-index: 1;
  background-color: var(--white-smoke);
  width: 100%;
  min-height: 3.47em;
  box-shadow: 0 0 2em 0 var(--medium-black);
  border-radius: .6em .6em 0 0;
  justify-content: center;
  align-items: center;
  margin-bottom: -3.6em;
  padding: 1.11em;
  display: flex;
  position: absolute;
  bottom: 0%;
}

.device-btn__btn-slider {
  background-color: var(--black-blue);
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.device-screen__wifi-plastic {
  background-color: var(--medium-black);
  border-top-left-radius: .83em;
  border-top-right-radius: .83em;
  width: 100%;
  height: 3.33em;
  margin-left: 2.08em;
  margin-right: 2.08em;
}

.btn-slider__arrow {
  color: #213e9a;
  width: 2.5em;
  height: 2.5em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.dialog-text {
  color: var(--dark-black);
  transition: opacity .2s;
  position: absolute;
}

.device-screen__c-face {
  justify-content: center;
  align-items: center;
  width: 13em;
  height: 13em;
  margin-top: -2.5em;
  margin-left: -3em;
  display: flex;
  position: relative;
}

.device-screen__face {
  width: 13em;
  height: 13em;
  position: absolute;
}

.device-screen__face.is--face {
  color: var(--purple);
}

.device-screen__face.is--hair {
  color: #373076;
  transform: rotate(0);
}

.device-screen__face.is--bad-mouth {
  opacity: 0;
  color: var(--dark-purple);
}

.device-screen__face.is--accessory {
  opacity: 0;
  margin-top: -3em;
  transition: transform .2s, opacity .2s;
}

.device-screen__face.is--little-smile {
  z-index: 1;
  color: var(--dark-purple);
}

.face__eye {
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.face__eye.is--right {
  margin-top: .3em;
  margin-right: -.3em;
}

.face__c-eyes {
  display: flex;
  position: relative;
  top: 2.66em;
  left: 2.87em;
}

.face-eye__pupil {
  background-color: #383b8f;
  border-radius: 100%;
  width: 1.4em;
  height: 1.4em;
  position: relative;
}

.face__eyelib {
  background-color: var(--dark-purple);
  border-radius: 100%;
  width: 4em;
  height: 4em;
  margin-top: -6.6em;
  position: absolute;
}

.face__mouth {
  z-index: 1;
  opacity: 0;
  width: 13em;
  height: 13em;
  position: absolute;
}

.device-screen__face--move {
  cursor: pointer;
}

.screen__glass-blur {
  z-index: 1;
  position: absolute;
  inset: 0%;
}

.screen__glass-blur-img {
  opacity: .2;
  object-fit: cover;
  object-position: 0% 0%;
  width: 100%;
  height: 100%;
}

.screen__glass-blur-img.is--portofolio {
  opacity: .1;
}

.device-title__c-name {
  align-items: center;
  display: flex;
}

.c-face__c-stroke {
  position: absolute;
  inset: 0%;
}

.card__container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.11em;
  display: flex;
}

.card__container.is--rs {
  flex-direction: row;
}

.card__container.is--sound {
  z-index: 2;
  background-color: var(--dark-black);
  box-shadow: 0 0 1.11em 0 var(--black);
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.card__container.is--colors, .card__container.is--years {
  flex-direction: row;
}

.card__c-title {
  background-color: var(--dark-black);
  border-radius: .56em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.11em;
  transition: background-color .1s;
  display: flex;
}

.card__c-title.is--margin-right {
  margin-right: 1.11em;
}

.card-title__c-icon {
  background-color: var(--dark-black);
  border-radius: .42em;
  justify-content: center;
  align-items: center;
  width: 3.87em;
  height: 3.87em;
  margin-right: 1.11em;
  display: flex;
}

.card-title__text {
  font-size: 1.11em;
}

.card-title__c-text {
  align-items: center;
  display: flex;
}

.card-title__icon {
  width: 1.56em;
  height: 1.56em;
}

.card__c-big-round-btn {
  background-color: var(--dark-black);
  border-radius: .56em;
  justify-content: space-between;
  align-items: center;
  min-width: 10.42em;
  min-height: 10.42em;
  padding: 1.11em;
  display: flex;
}

.card__c-big-round-btn.is--right {
  margin-left: 1.11em;
}

.card__c-big-round-btn.is--rs {
  width: 100%;
}

.card__c-sound {
  background-color: var(--dark-black);
  border-radius: .56em;
  max-width: 100%;
  height: 100%;
  margin-top: 1.11em;
  position: relative;
  overflow: hidden;
}

.card__c-sound-dots {
  grid-column-gap: .51em;
  grid-row-gap: .51em;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  width: 8em;
  height: 8em;
}

.card__big-round-btn {
  cursor: pointer;
  border-radius: 100em;
  justify-content: center;
  min-height: 7em;
  margin-top: -.5em;
  transition: color .1s;
  display: flex;
  overflow: hidden;
}

.card__big-round-btn.is--years, .card__big-round-btn.is--on {
  min-height: 4.5em;
}

.card__big-round-btn.is--doors {
  min-height: 5em;
  position: absolute;
}

.card__big-round-btn.is--rs {
  color: #656572;
}

.card__big-round-btn.is--rs:hover {
  color: var(--smoke);
}

.big-round-btn__up {
  background-color: var(--medium-black);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 6.5em;
  height: 6.5em;
  transition: transform .1s, box-shadow .1s;
  display: flex;
}

.big-round-btn__up.is--years {
  background-color: var(--purple);
  width: 4em;
  height: 4em;
}

.big-round-btn__up.is--on {
  background-color: var(--yellow);
  width: 4em;
  height: 4em;
}

.big-round-btn__up.is--door {
  border: 2px solid var(--dark-black);
  width: 4.5em;
  height: 4.5em;
}

.big-round-btn__project-icon {
  width: 100%;
  max-width: 3.85em;
  height: 100%;
  max-height: 2.7em;
}

.ml__text {
  color: #888;
  margin-left: 1.11em;
}

.ml-container {
  align-items: center;
  display: flex;
}

.ml-bar {
  background-image: url('../images/bar.svg');
  background-position: 0%;
  background-repeat: repeat-x;
  background-size: contain;
  background-attachment: scroll;
  flex: 1;
  height: 80%;
}

.c-intro {
  z-index: 997;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.c-contact {
  z-index: 999;
  background-color: #1c1c25e6;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.c-contact.is--show {
  display: block;
}

.popup__device {
  z-index: 1;
  background-color: var(--blue);
  border-radius: .83em;
  flex-direction: column;
  width: 100%;
  max-width: 53.82em;
  padding-top: 1.11em;
  padding-bottom: 1.11em;
  display: flex;
  position: relative;
  box-shadow: 0 0 1em #000;
}

.s-popup__c-form {
  height: 100%;
  margin-bottom: 0;
  padding-left: 1.11em;
  padding-right: 1.11em;
}

.s-popup__form {
  flex-direction: column;
  padding-top: 1.11em;
  display: flex;
}

.s-popup-form__text-area {
  background-color: var(--dark-black);
  min-height: 3em;
  color: var(--smoke);
  border: 1px #000;
  border-radius: .3em;
  margin-bottom: .5em;
  padding: 1.11em;
  font-family: Satoshi, sans-serif;
  font-size: 1rem;
}

.s-popup-form__text-area.is--message {
  max-height: 15em;
}

.device-link__base {
  background-color: var(--yellow);
  border-radius: 100em 100em 0 0;
  width: 1.6em;
  height: 1.53em;
  min-height: 1.53em;
  margin-top: -.2em;
}

.blue-link__vertical-link {
  background-color: var(--blue);
  width: .63em;
}

.blue-link__vertical-link.is--down {
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  height: 100%;
}

.blue-link__vertical-link.is--up {
  border-bottom-right-radius: 100em;
  border-bottom-left-radius: 100em;
  height: 200%;
  margin-top: -100%;
  position: relative;
}

.device-link__c-blue-link {
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
}

.device-round-btn__exit-icon {
  width: 1.3em;
  height: 1.3em;
}

.popup-device__line {
  background-color: var(--dark-blue);
  border-radius: .56em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .83em;
  display: flex;
}

.popup-device__mail {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1.11em;
}

.popup-form__submit-btn {
  z-index: 1;
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.popup__bg-exit {
  cursor: pointer;
  position: absolute;
  inset: 0%;
}

.is--hidden {
  display: none;
}

.popup-device__c-screen {
  background-color: var(--black);
  border-radius: .56em;
  width: 14.24em;
  height: 5.56em;
  margin-left: 1.11em;
  padding: .8em;
  position: relative;
}

.popup-screen__bg {
  background-color: var(--soft-black);
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.popup-screen__c-text {
  align-items: center;
  padding-right: 1.11em;
  display: flex;
}

.popup-device__c-content {
  flex-direction: column;
  display: flex;
}

.popup-device__c-header {
  border-bottom: .14em solid var(--black-blue);
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr 5.56em;
  width: 100%;
  padding-bottom: 1.11em;
  padding-left: 1.11em;
  padding-right: 1.11em;
  display: flex;
}

.popup-screen__hire-text {
  color: var(--smoke);
  white-space: nowrap;
  font-size: 2.36em;
}

.popup-screen__c-text-wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.device__step {
  min-width: 100%;
  padding-bottom: 1.11em;
  padding-left: 1.11em;
  padding-right: 1.11em;
}

.device__c-steps {
  display: flex;
  position: relative;
  overflow: hidden;
}

.crank__c-steam {
  background-color: var(--black-blue);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 3.82em;
  height: 3.82em;
  display: flex;
}

._404-crank__c-crank {
  justify-content: flex-end;
  align-items: center;
  width: 16em;
  height: 16em;
  padding: 1.11em;
  display: flex;
  position: relative;
}

._404-crank__img {
  width: 16em;
  height: 16em;
}

._404-crank__handle {
  cursor: grab;
  background-image: url('../images/crank__handle.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5em;
  height: 4.17em;
  position: absolute;
}

.crank-path {
  width: 14.31em;
  position: absolute;
}

._404-crank__crank-container {
  background-color: var(--dark-blue);
  box-shadow: inset 1px 1px 1em 0 var(--black-blue);
  border-radius: .83em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.11em;
  padding: 1.11em;
  display: flex;
}

._404-crank__wheel {
  width: 1.53em;
  height: 1.88em;
  color: var(--smoke);
}

.c-main-grid {
  opacity: 0;
  width: 100%;
}

.c-device {
  z-index: 1;
  height: 100%;
  position: relative;
}

.device__c-content {
  padding-left: 1.11em;
  padding-right: 1.11em;
}

.btn-slider__c-bg {
  border-radius: .28em;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.btn-slider__bg-img {
  width: 14.4em;
  height: 3.6em;
}

.btn-slider__bg-wrapper {
  margin-left: -6.8em;
  display: flex;
}

.screen__percentage-text {
  color: var(--white-smoke);
  font-size: 1.3em;
}

.device-screen__c-percentage {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #25252f78;
  border-radius: .3em;
  justify-content: flex-end;
  align-items: center;
  width: 7.6em;
  height: 5em;
  padding: .4em;
  display: none;
  position: absolute;
  inset: 0%;
}

.panel {
  z-index: 1000;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--black);
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  padding: 2em;
  display: none;
  position: absolute;
  inset: auto auto 0% 0%;
}

.screen-percent__c-percentage {
  background-color: var(--soft-black);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
}

.screen-percent__c-nb {
  justify-content: center;
  align-items: center;
  width: 4em;
  padding: .3em .5em;
  display: flex;
}

.device__c-skills {
  background-color: var(--dark-blue);
  border-radius: .83em;
  margin-top: 1.11em;
  padding-top: 1.11em;
  padding-left: 1.11em;
  padding-right: 1.11em;
}

.main-grid__column {
  flex-direction: column;
  display: flex;
}

.c-portfolio__c-head {
  border-radius: 0 0 .83em .83em;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.c-portfolio__title {
  text-align: center;
  max-width: 12ch;
  margin-top: .5em;
  font-size: 1.11em;
}

.c-portfolio__c-icon {
  justify-content: center;
  align-items: center;
  margin-bottom: .5em;
  display: flex;
}

.c-portfolio__year-text {
  color: var(--dark-purple);
  font-size: 2.2em;
  line-height: 1;
  transition: color .1s;
  position: absolute;
}

.big-round-btn__icon {
  width: 2em;
  height: 2em;
}

.big-round-btn__icon.is--webflow {
  margin-right: -.3em;
}

.c-color__c-btn {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: .5em;
  padding-bottom: .5em;
  display: flex;
}

.c-work__c-content {
  grid-column-gap: 1.11em;
  grid-row-gap: 1.11em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 1.11em;
  display: grid;
}

.card__screen {
  background-color: var(--black);
  border-radius: .83em;
  min-height: 20em;
  margin-top: 1.11em;
  padding: .9em;
  position: relative;
  overflow: hidden;
}

.screen-slider__img {
  object-fit: cover;
  width: 100em;
  height: 20em;
  transition: transform .2s;
}

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

.btn__icon {
  width: 1.6em;
  height: 1.39em;
}

.btn__icon.is--180 {
  transform: rotate(180deg);
}

.c-portfolio__c-title {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.c-portfolio__c-nav-btn {
  min-height: 3.54em;
  margin-left: 1.11em;
  display: flex;
}

.splide__track {
  z-index: 0;
  width: 100%;
  max-width: 34.72em;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.splide__list {
  min-width: 100%;
  height: 100%;
  display: flex;
}

.splide__slide {
  min-width: 100%;
  margin-right: .9em;
}

.splide {
  height: 100%;
}

.splide__arrow {
  width: 1em;
  height: 1em;
}

.screen-slider__c-fullscreen {
  z-index: 1;
  background-color: var(--medium-black);
  height: 4.44em;
  box-shadow: 0 0 .5em 0 var(--black);
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  margin-bottom: -5em;
  padding: 1.11em;
  transition: transform .3s;
  position: absolute;
  inset: auto auto 0% 1.11em;
}

.screen-slider__fullscreen-icon {
  width: 1.39em;
  height: 1.39em;
}

.device__line {
  background-color: var(--black-blue);
  height: .14em;
  margin-top: 1.11em;
}

.face-eye__closed-eye {
  opacity: 0;
  width: 1.4em;
  height: 1.4em;
  color: var(--dark-purple);
  position: absolute;
}

.face-eye__closed-eye.is--left {
  margin-right: -.4em;
}

.face-eye__closed-eye.is--right {
  margin-left: -.4em;
}

.face-eye__bg-eye {
  background-color: var(--white-smoke);
  border-radius: 100em;
  width: 100%;
  height: 100%;
  position: absolute;
}

.device-screen__attack-star {
  display: none;
  position: absolute;
  inset: 0%;
}

.c-face__c-accesories {
  z-index: 1;
  position: absolute;
  inset: 0%;
}

.c-sound {
  z-index: 998;
  background-color: var(--medium-black);
  cursor: pointer;
  border-radius: .4em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 3.56em;
  max-height: 3.56em;
  padding: 1em;
  transition: background-color .1s;
  display: flex;
  position: fixed;
  inset: 3.33em 3.33em auto auto;
  overflow: hidden;
  box-shadow: 0 0 1em #10101647;
}

.c-sound:hover {
  background-color: var(--soft-black);
}

.sound-icon {
  width: 1.56em;
  min-width: 1.56em;
  height: 1.56em;
  min-height: 1.56em;
}

.sound-icon.is--on {
  color: var(--smoke);
  margin-bottom: 1em;
}

.sound-icon.is--off {
  color: var(--red);
}

.sound-icon.is--intro {
  color: #c4c4c4cf;
  width: 1.3em;
  min-width: 1.3em;
  height: 1.3em;
  min-height: 1.3em;
  margin-left: .7em;
}

.c-sound__container {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.card-line {
  height: 100%;
  display: flex;
}

.c-color__line {
  display: flex;
}

.c-color__line.is--down {
  margin-top: 1em;
}

.device__toggl {
  background-color: var(--dark-blue);
  border-radius: 100em;
  width: 6.66em;
  padding: .52em;
}

.device-toggl__dot {
  background-color: var(--light-blue);
  border-radius: 1010em;
  width: 2.22em;
  height: 2.22em;
  transition: background-color .2s, transform .2s;
  position: relative;
}

._404__c-crank {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: auto;
}

.panel__grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.popup-form__c-success {
  outline-offset: 0px;
  border-radius: .4em;
  outline: 3px #c4c4c4;
  margin-top: 1.11em;
  padding: 1.11em;
}

.c-success__form-text {
  width: 100%;
  color: var(--blue);
  text-align: center;
}

.c-success__form-text.is--error {
  color: var(--dark-red);
}

.popup-form__c-error {
  background-color: var(--white-smoke);
  border-radius: .4em;
  margin-top: .69em;
  padding: 1.11em;
}

.is--toggl-on {
  background-color: var(--smoke);
  transform: translate(100%);
}

.is--toggl-on.is--js-trigger {
  background-color: #3898ec;
  transform: none;
}

.is--show-text-dialog {
  opacity: 1;
}

.s-link-popup {
  z-index: 999;
  background-color: #1c1c25e6;
  border-radius: .83em;
  display: none;
  position: absolute;
  inset: 0%;
}

.s-link-popup.is--show {
  display: flex;
}

.card-title__link-icon {
  max-width: 3.85em;
  max-height: 2.7em;
  margin-right: 1.11em;
}

.card-container__popup-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.screen__skill-bg {
  opacity: 0;
  position: absolute;
  inset: 0%;
  transform: rotate(25deg)scale(1.5);
}

.screen__skill-bg.is--01 {
  background-image: url('../images/01.png');
  background-position: 50%;
  background-repeat: repeat;
  background-size: 28.5em 19em;
  background-attachment: scroll;
}

.screen__skill-bg.is--02 {
  background-image: url('../images/02.png');
  background-position: 50%;
  background-repeat: repeat;
  background-size: 28.5em 19em;
}

.screen__skill-bg.is--03 {
  background-image: url('../images/03.png');
  background-position: 50%;
  background-size: 28.5em 19em;
}

.screen__c-skill-bg {
  position: absolute;
  inset: 0%;
}

.link-popup__c-card {
  justify-content: center;
  align-items: center;
  padding: 1.11em 2.22em;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.card-container__popup-c-text {
  margin-top: 1.11em;
  margin-bottom: 2.22em;
}

.card__popup-title {
  color: var(--smoke);
  font-size: 1.11em;
}

.face-eye__heart {
  z-index: 1;
  opacity: 0;
  width: 1.5em;
  height: 1.5em;
  color: var(--dark-purple);
  position: absolute;
}

.card-container__popup-text {
  letter-spacing: 0;
  text-transform: none;
  font-family: Satoshi, sans-serif;
  font-size: 1.11em;
  font-weight: 700;
  line-height: 1.3;
}

.text--white {
  color: var(--white-smoke);
}

.screen__c-color-waves {
  justify-content: center;
  align-items: center;
  padding-top: .2em;
  padding-left: .2em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.screen__color-wave {
  border-style: solid;
  border-width: 1px;
  border-radius: 100%;
  width: 2em;
  height: 2em;
  transition: transform .5s, opacity .5s;
  position: absolute;
}

.screen__color-wave.is--red {
  border-color: var(--red);
}

.screen__color-wave.is--yellow {
  border-color: var(--yellow);
}

.screen__color-wave.is--purple {
  border-color: var(--purple);
}

.screen__color-wave.is--grey {
  border-color: var(--white-smoke);
}

.is--show-wave {
  opacity: 0;
  transform: scale(10);
}

.is--show-wave.is--js-trigger {
  opacity: 1;
  transform: none;
}

.screen__glass-broken-img {
  z-index: 1;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background-image: url('../images/broken-glass.jpg');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
}

.is--show-broken {
  opacity: .2;
}

.is--show-broken.is--js-trigger {
  opacity: 1;
}

.device-screen__loading {
  opacity: 0;
  width: 8em;
  height: 8em;
  position: absolute;
}

.device-screen__new-lottie {
  width: 3em;
  height: 3em;
  position: absolute;
  inset: 4em auto auto 1em;
  transform: rotate(25deg);
}

.c-intro__device {
  z-index: 1;
  background-color: var(--blue);
  width: 25em;
  box-shadow: 0 0 1.11em 0 var(--black);
  -webkit-text-fill-color: inherit;
  background-clip: padding-box;
  border-radius: 1.3em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.11em;
  display: flex;
  position: relative;
}

.c-intro__device.is--credits {
  width: 28em;
}

.intro-device__on-icon {
  width: 2em;
  height: 2em;
}

.c-intro__c-btn {
  background-color: var(--black-blue);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
  display: flex;
}

.device-side {
  flex-direction: column;
  flex: 1;
  align-items: center;
  min-height: 2.22em;
  display: flex;
}

.device-side.is--down {
  min-height: 6em;
}

.card__door {
  background-color: var(--medium-black);
  width: 50%;
  height: 100%;
  padding: 1.11em;
  display: flex;
  position: relative;
}

.card__door.is--left {
  border-right: 2px solid var(--dark-black);
}

.card__door.is--right {
  border-left: 2px solid var(--medium-black);
  justify-content: flex-end;
}

.card__c-door {
  z-index: 3;
  color: var(--yellow);
  cursor: pointer;
  border-radius: .83em;
  justify-content: center;
  align-items: center;
  transition: color .2s;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.card__c-door.is--click-sound:hover {
  color: var(--white-smoke);
}

.blue-link__spring-img {
  z-index: -1;
  width: 3.3em;
  height: 9.5em;
  margin-top: -.5em;
  margin-bottom: -.5em;
  position: relative;
}

.intro-device__c-bubble {
  z-index: 1;
  justify-content: flex-end;
  align-items: flex-start;
  width: 17em;
  height: 17em;
  display: flex;
  position: absolute;
}

.device-round-btn__icon {
  width: 1.2em;
  height: 1.2em;
  margin-top: -.2em;
}

.card-door__noise {
  opacity: .2;
  width: 100%;
  padding: .5em;
  display: flex;
}

.card-door__noise.is--right {
  border-top-right-radius: .3em;
  border-bottom-right-radius: .3em;
  justify-content: flex-end;
}

.card-door__noise.is--left {
  border-top-left-radius: .3em;
  border-bottom-left-radius: .3em;
}

._404__crank-device {
  background-color: var(--dark-blue);
  width: 28em;
  box-shadow: 0 0 1em 0 var(--black);
  border-radius: .83em;
  flex-direction: column;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
  padding: 1.61em 1.11em 1.11em;
  display: flex;
  position: relative;
}

.is--ml-link {
  cursor: pointer;
  text-decoration: underline;
}

.c-credits {
  z-index: 999;
  background-color: #1c1c25e6;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.credit__c-text {
  background-color: var(--dark-blue);
  border-radius: .5em;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
  padding: 1.11em;
}

.credits__bg-exit {
  cursor: pointer;
  position: absolute;
  inset: 0%;
}

.credit__text {
  letter-spacing: 0;
  text-transform: none;
  font-family: Satoshi, sans-serif;
  font-weight: 700;
}

._404__h2 {
  margin-top: 0;
  margin-bottom: .2em;
  font-size: 2em;
  line-height: 1;
}

.c-404-img {
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.error-img {
  object-fit: contain;
  width: 20em;
  height: 7.8em;
  transform: none;
}

.error-img.is--01 {
  object-position: 100% 50%;
  transform: translate(-100%);
}

.error-img.is--02 {
  object-position: 0% 50%;
  transform: translate(100%);
}

._404__text {
  color: #83838f;
  text-align: justify;
  letter-spacing: 0;
  text-transform: none;
  font-family: Satoshi, sans-serif;
  font-size: 1.11em;
  font-weight: 700;
}

.crank-screen__c-reset {
  background-color: var(--black-blue);
  border-radius: .5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 1.11em;
  padding: 1.11em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.link-popup__icon {
  width: 2.22em;
  height: 2.22em;
  margin-right: 1.11em;
}

.crank-screen__door {
  background-color: var(--dark-black);
  padding: 1.1em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.crank-screen__door-inner {
  opacity: .2;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1.11em;
  display: flex;
}

.c-intro__c-info {
  background-color: var(--medium-black);
  border-radius: .5em;
  justify-content: center;
  align-items: center;
  width: 25em;
  margin-top: 1.11em;
  padding: 1.11em;
  display: flex;
}

.c-info__text {
  color: #c4c4c461;
  text-align: center;
}

.link-popup__bg-exit {
  cursor: pointer;
  position: absolute;
  inset: 0%;
}

.c-face__hi-img {
  width: 13em;
  height: 13em;
  position: absolute;
}

.c-404_c-img {
  align-items: center;
  width: 50%;
  display: flex;
  position: relative;
}

.c-error-img {
  width: 100%;
  display: flex;
}

.c-error-img.is--left {
  justify-content: flex-end;
  display: flex;
}

.card__open-door-trigger {
  z-index: 1;
  position: absolute;
  inset: 0%;
}

.c-sound__bg-easter {
  z-index: 1;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 1.11em;
  display: flex;
  position: absolute;
  box-shadow: inset 0 0 1em #16161f;
}

.c-easter-screw {
  border: 2px solid var(--medium-black);
  background-color: #17171e;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.22em;
  height: 2.22em;
  display: flex;
}

.c-password-form {
  background-color: var(--dark-blue);
  text-align: center;
  border-radius: .83em;
  flex-direction: column;
  align-items: stretch;
  width: 20em;
  margin-top: auto;
  margin-bottom: auto;
  padding: 1.11em;
  display: flex;
}

.password-form__submit {
  z-index: 1;
  opacity: 0;
  position: absolute;
  inset: 0%;
}

.password-form__field {
  background-color: var(--medium-black);
  border: 1px #000;
  border-radius: .2em;
  height: 3.33em;
  margin-top: 1.11em;
  margin-bottom: 1.5em;
  padding: .5em .7em .5em 1.11em;
  font-family: Satoshi, sans-serif;
}

.password-form__icon {
  width: 2.22em;
  height: 2.22em;
  margin-top: 1.11em;
  margin-left: auto;
  margin-right: auto;
}

.password-form {
  flex-direction: column;
  display: flex;
}

.password-form__title {
  margin-top: .5em;
  margin-bottom: .5em;
  font-size: 2.22em;
  line-height: 1;
}

.password-form__label {
  margin-bottom: 0;
}

.crank-screen {
  background-color: var(--dark-black);
  border-radius: .5em;
  margin-top: 1.11em;
  margin-bottom: 1.11em;
  padding: 1.11em;
  position: relative;
}

.crank-screen__c-content {
  background-color: var(--medium-black);
  border-radius: .3em;
  padding: 1.51em;
  position: relative;
  overflow: hidden;
}

.easter__c-crank {
  justify-content: flex-end;
  align-items: center;
  width: 8em;
  height: 8em;
  padding: 1em;
  display: flex;
  position: relative;
}

.easter__crank-img {
  width: 6em;
  height: 6em;
}

.easter__crank-handle {
  cursor: grab;
  background-image: url('../images/easter-crank-handle.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.5em;
  height: 2em;
  position: absolute;
}

.easter__c-screen {
  background-color: var(--black);
  border-radius: .5em;
  max-width: 100%;
  height: 100%;
  margin-top: 1.11em;
  padding: .9em;
  position: relative;
  overflow: hidden;
}

.easter__crank-path {
  width: 6em;
  height: 6em;
  position: absolute;
}

.easter-screen__text-container {
  align-items: center;
  width: 100%;
  display: flex;
}

.easter__crank-container {
  background-color: var(--medium-black);
  border-radius: .5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}

.easter__crank-reset-btn {
  background-color: var(--yellow);
  color: var(--dark-yellow);
  border-radius: .5em;
  padding: 1em 1.5em;
}

.easter__screen-text {
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
  font-family: Satoshi, sans-serif;
  font-size: 1em;
}

.easter-screen__c-content {
  background-color: var(--medium-black);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-top: .5em;
  padding-bottom: .5em;
  display: flex;
  overflow: hidden;
}

.easter-screen__c-reset {
  justify-content: center;
  min-width: 100%;
  margin-left: -100%;
  display: flex;
  position: relative;
  left: 100%;
}

.card-door__c-info {
  background-color: var(--medium-black);
  border-radius: .3em;
  justify-content: flex-end;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding-left: .5em;
  padding-right: .5em;
  transition: width .2s;
  display: flex;
  position: absolute;
  inset: 1.11em 1.11em auto auto;
  overflow: hidden;
}

.card-door__info-text {
  opacity: .42;
  color: var(--white-smoke);
  white-space: nowrap;
}

.device-skill__title {
  color: var(--light-blue);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  font-family: Satoshi, sans-serif;
  font-size: 1.2em;
}

.device-skill__c-title {
  color: var(--smoke);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.11em;
  display: flex;
}

.device-skill-title__icon {
  width: 2em;
  height: 2em;
  margin-right: 1.11em;
}

.device-skill__title-container {
  align-items: center;
  margin-right: 1.11em;
  display: flex;
}

.easter-screen__c-text {
  justify-content: center;
  align-items: center;
  min-width: 100%;
  margin-right: 100%;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.card-door__info-icon {
  opacity: .4;
  width: 1.5em;
  height: 1.5em;
  color: var(--smoke);
  margin-left: 1.11em;
}

.device-skill__title-line {
  background-color: var(--blue);
  border-radius: 100em;
  flex: 1;
  height: .3em;
}

.popup__c-move {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 2.22em;
  padding-right: 2.22em;
  display: flex;
  position: relative;
}

.intro__loading-text {
  position: absolute;
}

.is--disable-scroll {
  height: 100vh;
}

.is--disable-scroll.is--js-trigger {
  height: auto;
}

.intro-h1 {
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0;
  margin-bottom: .3em;
  font-family: Satoshi, sans-serif;
  font-size: 2.22em;
}

.is--show-success {
  display: flex;
}

.device-dots__img {
  object-fit: contain;
  width: 4.2em;
  height: 1.2em;
}

.card-dots__img {
  object-fit: contain;
  width: 3.47em;
  height: 2em;
}

.screen__static-grain {
  opacity: .67;
  mix-blend-mode: overlay;
  background-image: url('../images/bg-noise.png');
  background-position: 50%;
  background-size: contain;
  position: absolute;
  inset: 0%;
}

.s-popup-form__recaptcha {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 3vw;
  }

  .container {
    padding: 1.11em;
  }

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

  .device {
    width: 100%;
  }

  .card {
    box-shadow: none;
  }

  .card:hover {
    border-color: var(--medium-black);
    background-color: var(--medium-black);
    transform: none;
  }

  .card.is--rs {
    order: 1;
  }

  .card.is--colors {
    order: -1;
  }

  .device__c-skill:hover {
    background-color: var(--blue);
  }

  .device-screen__c-dialog {
    box-shadow: none;
  }

  .card__container.is--rs {
    flex-direction: column;
  }

  .card__c-big-round-btn.is--rs {
    margin-bottom: 1.11em;
  }

  .card__c-big-round-btn.is--rs.is--right {
    margin-left: 0;
  }

  .card__c-sound-dots {
    margin-top: 2.22em;
    margin-bottom: 2.22em;
  }

  .ml__text {
    text-align: center;
    max-width: 28ch;
  }

  .ml-container {
    justify-content: center;
    padding-top: 1.11em;
    padding-bottom: 1.11em;
  }

  .ml-bar {
    display: none;
  }

  .c-intro, .c-contact {
    overflow: auto;
  }

  .s-popup-form__text-area.is--message {
    min-height: 10em;
  }

  .popup-device__line {
    justify-content: center;
  }

  .popup-device__mail {
    margin-right: 0;
  }

  .popup-device__c-screen {
    width: 100%;
    display: none;
  }

  .popup-device__c-header {
    grid-template-columns: 1fr 5.56em;
    justify-content: space-between;
  }

  .panel {
    grid-template-columns: 1fr;
    width: 100%;
    height: 30vh;
    position: fixed;
    inset: auto 0% 0%;
  }

  .c-portfolio__title {
    margin-left: 1.11em;
    margin-right: 1.11em;
  }

  .card__screen {
    height: 20em;
  }

  .splide__track {
    max-width: 100%;
  }

  .screen-slider__c-fullscreen, .c-sound {
    display: none;
  }

  .card-line {
    order: -1;
  }

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

  .screen__skill-bg.is--03 {
    background-size: contain;
  }

  .c-intro__device {
    box-shadow: none;
  }

  .card__c-door {
    display: none;
  }

  .c-credits {
    overflow: auto;
  }

  .popup__c-move {
    padding-left: 1.11em;
    padding-right: 1.11em;
  }
}

@media screen and (max-width: 767px) {
  .device__text {
    text-align: center;
  }

  .sound-dot.is--desk {
    display: none;
  }
}

#w-node-_7a653da9-be54-d615-07b0-c40701a7c16d-01a7c16c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7a653da9-be54-d615-07b0-c40701a7c16e-01a7c16c {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_7a653da9-be54-d615-07b0-c40701a7c172-01a7c16c, #w-node-_7a653da9-be54-d615-07b0-c40701a7c178-01a7c16c, #w-node-a47aa3b1-ee34-9cf8-6d67-52a85e1606de-01a7c16c, #w-node-c1db7a68-4a2a-902c-92d2-f04005d2f741-01a7c16c, #w-node-_650aca88-ac42-526e-2ab1-6302d8b1b3c6-01a7c16c, #w-node-_41d9414d-d9a9-5130-5fd2-726288474728-01a7c16c, #w-node-_2a544967-758c-b50a-653a-940303077859-01a7c16c, #w-node-_179c6926-815d-3461-8933-ea0e09e34a8c-01a7c16c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6dc66bf0-3456-ef5b-97e3-a2df5bb6a7ba-01a7c16c {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_6dc66bf0-3456-ef5b-97e3-a2df5bb6a7c2-01a7c16c, #w-node-_6dc66bf0-3456-ef5b-97e3-a2df5bb6a7c4-01a7c16c, #w-node-_6dc66bf0-3456-ef5b-97e3-a2df5bb6a7c6-01a7c16c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a85-01a7c16c {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a87-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a8d-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a8f-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a91-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a93-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a95-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a97-01a7c16c, #w-node-_685a2de3-67c4-be59-318e-77c979e429ee-01a7c16c, #w-node-_6a104880-5c63-44fa-5b3d-1bd1a0d9d2c5-01a7c16c, #w-node-_0d30d97a-0406-0273-2830-e82fe4af5993-95b06ce4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_424ef766-d2a7-d1a3-2afe-44f1d44768d9-95b06ce4 {
  grid-area: span 4 / span 1 / span 4 / span 1;
}

#w-node-_6eff90bb-de52-6127-1653-bba4e890e48c-95b06ce4, #w-node-b031a917-a3b1-6bcf-acbc-c34c6ae0ac34-95b06ce4, #w-node-_8ac90dec-c9fb-64e3-a498-dbb85c689e01-95b06ce4, #w-node-ca8084f3-1b84-02fd-e593-8d2698c38057-95b06ce4, #w-node-a54a4fcd-0b13-b5a6-17ec-3faadbb73796-95b06ce4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_83437d4e-5d83-d4d5-b5af-bf709e52f5a4-95b06ce4 {
  grid-area: span 4 / span 1 / span 4 / span 1;
}

#w-node-d88235ea-649f-0fae-47c9-3a5220add092-95b06ce4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_9e5bf9a8-b6ec-d5ff-ec28-17d5f8c74a91-95b06ce4, #w-node-_68005bde-2dc4-e993-a102-55f66f4999e4-95b06ce4, #w-node-dc41648f-8db9-450f-835e-a39f8e41acb7-95b06ce4, #w-node-dc41648f-8db9-450f-835e-a39f8e41acd9-95b06ce4, #w-node-_9ea95617-a234-c5ec-522e-58a32570c7f5-95b06ce4, #w-node-f58a9d6a-f056-05b3-475f-7a52f19cbae0-95b06ce4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_019586c2-946d-221a-f802-d95c03c43066-95b06ce4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-c6066086-659e-1185-3f3d-34df3e511189-95b06ce4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5477e647-9ec9-df6f-3a4f-836019f25d0b-95b06ce4 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

@media screen and (max-width: 991px) {
  #w-node-_7a653da9-be54-d615-07b0-c40701a7c16e-01a7c16c, #w-node-_6dc66bf0-3456-ef5b-97e3-a2df5bb6a7ba-01a7c16c, #w-node-_492b72d7-fe19-2f3f-a5b0-017554fc8a85-01a7c16c {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2a52a7a3-7cbc-a7d1-1ca7-abc3d23de967-95b06ce4 {
    order: 9999;
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_424ef766-d2a7-d1a3-2afe-44f1d44768d9-95b06ce4, #w-node-b031a917-a3b1-6bcf-acbc-c34c6ae0ac34-95b06ce4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_8ac90dec-c9fb-64e3-a498-dbb85c689e01-95b06ce4 {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-ca8084f3-1b84-02fd-e593-8d2698c38057-95b06ce4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_83437d4e-5d83-d4d5-b5af-bf709e52f5a4-95b06ce4 {
    grid-area: 3 / 1 / 4 / 2;
  }

  #w-node-_5477e647-9ec9-df6f-3a4f-836019f25d0b-95b06ce4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_424ef766-d2a7-d1a3-2afe-44f1d44768d9-95b06ce4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Greycliffcf';
  src: url('../fonts/GreycliffCF-ExtraBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}