* {
  padding: 0;
  margin: 0;
  position: relative;
}

:root {
  --black: #121613;
  --white: #c3cece;
}

html {
  scroll-snap-type: y mandatory;
}

body {
  font-family: "Raleway", sans-serif;
  background: var(--black);
  color: var(--white);
}

h1, h2 {
  font-family: "Gloock", serif;
  font-weight: 400;
}

.line {
  position: absolute;
  top: 50vh;
  left: 8vw;
  width: 84vw;
  height: 1px;
  background-color: var(--white);
  transform: scaleX(0);
  transition: 1s cubic-bezier(0.85, 0, 0.15, 1);
  transform-origin: left;
}

.logo {
  position: absolute;
  display: flex;
  flex-direction: column;
}

header, section, footer {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  background: var(--black);
}

header .line {
  top: 42vh;
  transform-origin: right;
}
@media (orientation: portrait) {
  header .line {
    top: 50vh;
  }
}
header h1 {
  position: absolute;
  left: 8vw;
  bottom: 12vh;
  display: flex;
  flex-direction: column;
  font-size: 6vw;
  line-height: 1.2;
  color: var(--white);
  overflow: hidden;
}
header h1 span {
  font-weight: 400;
  transform: translateY(25vw);
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
header h1 span:nth-of-type(1) {
  animation-delay: 0.1s;
}
header h1 span:nth-of-type(2) {
  animation-delay: 0.2s;
}
header h1 span:nth-of-type(3) {
  animation-delay: 0.3s;
}
@media (min-aspect-ratio: 2/1) {
  header h1 {
    font-size: 4vw;
  }
}
@media (orientation: portrait) {
  header h1 {
    font-size: 8vw;
    bottom: 20vh;
  }
  header h1 span {
    transform: translateY(25vh);
  }
}
header .logo {
  top: 6vw;
  right: 8vw;
  width: 20vw;
}
@media (orientation: portrait) {
  header .logo {
    top: 30vh;
    width: 40vw;
  }
}
header .scroll {
  position: absolute;
  right: 8vw;
  bottom: 14.3vh;
  width: 1px;
  height: 30px;
  background: #ffffff;
  animation: scrolldown 2s cubic-bezier(0.85, 0, 0.15, 1) 3s infinite both;
}

.centria {
  width: 90%;
}
.centria .letter {
  transform: translateY(400px);
}
.centria .letter:nth-of-type(1) {
  animation-delay: 0.1s;
}
.centria .letter:nth-of-type(2) {
  animation-delay: 0.2s;
}
.centria .letter:nth-of-type(3) {
  animation-delay: 0.3s;
}
.centria .letter:nth-of-type(4) {
  animation-delay: 0.4s;
}
.centria .letter:nth-of-type(5) {
  animation-delay: 0.5s;
}
.centria .letter:nth-of-type(6) {
  animation-delay: 0.6s;
}
.centria .letter:nth-of-type(7) {
  animation-delay: 0.7s;
}
.centria .symbol {
  transform-origin: 192px 356px;
  transform: scale(0) rotate(-45deg);
}
.centria .symbol.s2 {
  animation-delay: 0.4s;
}
.centria .symbol.s3 {
  animation-delay: 0.8s;
}

@keyframes logoletters {
  from {
    transform: translateY(400px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes logosymbols {
  to {
    transform: scale(1) rotate(0deg);
  }
}
.concept {
  width: 80%;
  align-self: end;
}
.concept path {
  transform: translateY(320px);
}
.concept path:nth-of-type(1) {
  animation-delay: 0.03s !important;
}
.concept path:nth-of-type(2) {
  animation-delay: 0.06s !important;
}
.concept path:nth-of-type(3) {
  animation-delay: 0.09s !important;
}
.concept path:nth-of-type(4) {
  animation-delay: 0.12s !important;
}
.concept path:nth-of-type(5) {
  animation-delay: 0.15s !important;
}
.concept path:nth-of-type(6) {
  animation-delay: 0.18s !important;
}
.concept path:nth-of-type(7) {
  animation-delay: 0.21s !important;
}
.concept path:nth-of-type(8) {
  animation-delay: 0.24s !important;
}
.concept path:nth-of-type(9) {
  animation-delay: 0.27s !important;
}
.concept path:nth-of-type(10) {
  animation-delay: 0.3s !important;
}
.concept path:nth-of-type(11) {
  animation-delay: 0.33s !important;
}
.concept path:nth-of-type(12) {
  animation-delay: 0.36s !important;
}
.concept path:nth-of-type(13) {
  animation-delay: 0.39s !important;
}
.concept path:nth-of-type(14) {
  animation-delay: 0.42s !important;
}
.concept path:nth-of-type(15) {
  animation-delay: 0.45s !important;
}
.concept path:nth-of-type(16) {
  animation-delay: 0.48s !important;
}
.concept path:nth-of-type(17) {
  animation-delay: 0.51s !important;
}
.concept path:nth-of-type(18) {
  animation-delay: 0.54s !important;
}
.concept path:nth-of-type(19) {
  animation-delay: 0.57s !important;
}
.concept path:nth-of-type(20) {
  animation-delay: 0.6s !important;
}

@keyframes scrolldown {
  0% {
    transform: scaleY(0);
    transform-origin: center top;
  }
  49% {
    transform-origin: center top;
  }
  50% {
    transform: scaleY(1);
  }
  51% {
    transform-origin: center bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}
.title {
  position: absolute;
}
.title div {
  display: flex;
  gap: 1.5vw;
  overflow: hidden;
}
.title div span {
  font-family: "Gloock", serif;
  font-size: 7vmin;
  line-height: 1.2;
  color: var(--white);
  transform: translateY(10vmin);
}
@media (orientation: portrait) {
  .title div {
    flex-wrap: wrap;
  }
}

.text {
  position: absolute;
}
.text div {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.text div span {
  font-family: "Raleway", sans-serif;
  font-size: 1.2vw;
  line-height: 1.6;
  color: var(--white);
  transform: translateY(6vmin);
}
@media (orientation: portrait) {
  .text div span {
    font-size: 3vw;
  }
}
.text div span.number {
  width: 4vw;
  font-size: 1.6vw;
  letter-spacing: 0.1vw;
}
@media (orientation: portrait) {
  .text div span.number {
    width: 10vw;
    font-size: 5vw;
  }
}
.text.limited-max-width div span {
  max-width: 50%;
}
@media (orientation: portrait) {
  .text.limited-max-width div span {
    max-width: 70%;
  }
}

.d1 {
  animation-delay: 0.1s !important;
}

.d2 {
  animation-delay: 0.2s !important;
}

.d3 {
  animation-delay: 0.3s !important;
}

.d4 {
  animation-delay: 0.4s !important;
}

.d5 {
  animation-delay: 0.5s !important;
}

.d6 {
  animation-delay: 0.6s !important;
}

.d7 {
  animation-delay: 0.7s !important;
}

.d8 {
  animation-delay: 0.8s !important;
}

.onscreen .centria .letter {
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
.onscreen .centria .symbol {
  animation: logosymbols 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
.onscreen .concept path {
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
.onscreen .title div span {
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
.onscreen .text div span {
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}
.onscreen .line {
  transform: scaleX(1);
}
.onscreen .slider::before {
  transform: translate(81vw, 1vw) rotate(45deg) scale(1);
}
.onscreen .slider div:first-of-type img, .onscreen .slider div:first-of-type span, .onscreen .slider div:first-of-type p, .onscreen .slider div:first-of-type i {
  animation: logoletters 3s cubic-bezier(0.85, 0, 0.15, 1) both;
}

#about .line {
  transform-origin: left;
}
#about .title {
  left: 8vw;
  top: 55vh;
}
#about .text {
  right: 8vw;
  bottom: 55vh;
}
#about .text div {
  justify-content: flex-end;
}

#network .line, #partners .line {
  transform-origin: right;
}
#network .text, #partners .text {
  left: 8vw;
  top: 55vh;
}
#network .title, #partners .title {
  right: 8vw;
  bottom: 55vh;
}
#network .title div, #partners .title div {
  justify-content: flex-end;
  text-align: right;
}

.slider {
  position: absolute;
  left: 8vw;
  top: 58vh;
  width: 84vw;
  height: 30vh;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-top: 58vh;
  scrollbar-width: none;
}
.slider div {
  display: flex;
  gap: 5vw;
  min-width: 84vw;
  height: 100%;
  scroll-snap-align: start;
}
@media (orientation: landscape) {
  .slider div {
    scroll-margin-top: 58vh;
  }
}
.slider div > img {
  height: 30vh;
  width: 30vh;
  object-fit: cover;
}
@media (orientation: portrait) {
  .slider div > img {
    height: 20vw;
    width: auto;
    aspect-ratio: 1/1;
  }
}
.slider span {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.slider figure {
  display: flex;
  align-items: center;
  gap: 3vw;
  padding-bottom: 3vw;
  overflow: hidden;
}
.slider figure i {
  display: flex;
  align-items: center;
  width: 3vw;
  height: 1px;
  background: var(--white);
}
.slider figure i::after {
  content: "";
  position: absolute;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white);
  transform: rotate(45deg);
}
.slider figure img {
  height: 3vw;
}
@media (orientation: portrait) {
  .slider figure img {
    height: 5vw;
  }
}
.slider h2 {
  font-size: 2.5vw;
  line-height: 1.5;
}
@media (orientation: portrait) {
  .slider h2 {
    font-size: 5vw;
  }
}
.slider small {
  font-size: 0.8vw;
  letter-spacing: 0.2vw;
  flex: 1;
}
@media (orientation: portrait) {
  .slider small {
    font-size: 1.5vw;
  }
}
.slider p {
  font-size: 1.2vw;
  line-height: 1.6;
  max-width: 80%;
}
@media (orientation: portrait) {
  .slider p {
    font-size: 2.5vw;
  }
}
.slider a {
  position: absolute;
  right: 0;
  width: 5vw;
  height: 100%;
}
.slider::before {
  content: "";
  z-index: 2;
  pointer-events: none;
  position: sticky;
  align-self: flex-start;
  left: 0;
  display: flex;
  min-width: 2vw;
  min-height: 2vw;
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white);
  transform: translate(81vw, 1vw) rotate(45deg) scale(0);
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1) 1s;
}
.slider::-webkit-scrollbar {
  display: none;
}

footer .line {
  transform-origin: center;
}
footer .logo {
  top: 25vh;
  left: 6.3vw;
  width: 20vw;
}
@media (orientation: portrait) {
  footer .logo {
    top: 30vh;
    width: 40vw;
  }
}
footer .text.address {
  left: auto;
  right: 8vw;
  top: 60vh;
}
footer .text.address div {
  align-items: flex-end;
  justify-content: flex-end;
}
footer .text {
  display: flex;
  flex-direction: column;
  left: 8vw;
  top: 60vh;
}
footer .text div {
  flex-direction: column;
  align-items: flex-start;
}
footer .text a {
  font-size: 1.5vw;
  color: #86A584;
  text-decoration: none;
}
@media (orientation: portrait) {
  footer .text a {
    font-size: 3vw;
  }
}
footer .text small {
  font-size: 0.9vw;
}
@media (orientation: portrait) {
  footer .text small {
    font-size: 2.3vw;
  }
}/*# sourceMappingURL=styles.css.map */