h1, h2 {
  font-family: 'Archivo Black', sans-serif;
}

h3, h4, h5, h6 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
}

p, a {
  font-family: 'Roboto Mono', sans-serif;
}

p.smaller {
  font-size: 12px;
}

.slide h1 {
  font-weight: bold;
}

.slides.firstSlide .panel.top.hideFirstSlideOnly {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}

.popup:not([class*=fade]) {
    background: rgba(0,0,0, 0.92);
}

.popup .close {
  left: 0;
  right: auto !important;
  padding: 30px !important;
}

.zoom-img, .zoom-img-wrap {
  z-index: 999;
}

.panel svg {
  transition: fill .5s .25s;
}

.panel a {
  transition: .5s .25s;
}

.stage-1 p {
  margin-left: 15px;
  margin-right: 15px;
}

.stage-1 p.hero {
  /* font-weight: 500; */
}

.mouse-scroll {
  position: fixed;
  margin: auto;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 9999;
}
.mouse-scroll .mouse {
  height: 34px;
  width: 44px;
  border-radius: 5px;
  border: 3px solid transparent;
  margin: 0 auto;
}
.mouse-scroll p {
  font-family: 'Roboto Mono', sans-serif;
  font-size: 11px;
  padding: 0 20px;
}
.mouse-scroll .mouse-in {
  height: 12px;
  width: 12px;
  display: block;
  margin: 3px auto;
  background: rgba(0, 0, 0, 1);
  border: 1.25px solid #fff;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}
.mouse-scroll .mouse-in {
  animation: animated-mouse 2s ease infinite;
}

@keyframes animated-mouse {
  0% {
    transform: translateY(80px) scale(1);
    opacity: 0.75;
  }
  20% {
    transform: translateY(80px) scale(2);
    opacity: 0.5;
  }
  60% {
    transform: translateY(0) scale(2);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0) scale(2);
    opacity: 0;
  }
}

/* Titans first slide */

.slides nav.side.hideFirstSlideOnly {
  transform: translate3d(0, 0, 0);
  transition: .5s .25s;
}

.slides.firstSlide nav.side.hideFirstSlideOnly {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}

.scroller-wrapper {
  /* How long one slide is visible on screen (from entering screen to leaving it) */
  --scrolling-gallery-item-duration: 80s;
  /* How many items we want to see on screen at once */
  --scrolling-gallery-items-visible: 9;
  /* How many items are to scroll */
  --scrolling-gallery-items-total: 10;

  --scrolling-gallery-items-padding: 20px;
  will-change: transform;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .scroller-wrapper {
    --scrolling-gallery-item-duration: 70s;
    --scrolling-gallery-items-visible: 8;
  }
}
@media (max-width: 1024px) {
  .scroller-wrapper {
    --scrolling-gallery-item-duration: 60s;
    --scrolling-gallery-items-visible: 7;
  }
}
@media (max-width: 767px) {
  .scroller-wrapper {
    --scrolling-gallery-item-duration: 30s;
    --scrolling-gallery-items-visible: 5;
  }
}
@media (max-width: 435px) {
  .scroller-wrapper {
    --scrolling-gallery-item-duration: 20s;
    --scrolling-gallery-items-visible: 4;
  }
}

.scroller {
  animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
  animation-timing-function: linear;
  animation-name: scrolling-gallery;
  animation-iteration-count: infinite;
  display: flex;
  white-space: nowrap;
}

.scroller-wrapper:nth-child(even) .scroller {
  animation-direction: reverse;
}

.scroller-container {
  /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
  width: 100vw;
}

.scroller-item {
  flex: 1 0 calc(100% / var(--scrolling-gallery-items-visible));
  /* Without this, block elements will take width from their contents and thus making wrong calculations,
     so this just force elements to take only exact part of the container (screen) and equal for all */
  width: 0px;
  /* If you want to have it continuous without any spaces, remove two lines below */
  box-sizing: border-box;
  padding: var(--scrolling-gallery-items-padding);
  position: relative;
}

@media (max-width: 1200px) {
  .scroller-item {
    --scrolling-gallery-items-padding: 10px;
  }
}
@media (max-width: 1024px) {
  .scroller-item {
    --scrolling-gallery-items-padding: 8px;
  }
}
@media (max-width: 767px) {
  .scroller-item {
    --scrolling-gallery-items-padding: 6px;
  }
}
@media (max-width: 435px) {
  .scroller-item {
    --scrolling-gallery-items-padding: 4px;
  }
}

.scroller img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.scroller .scroller-item::before {
  display: block;
  content: "";
  position: absolute;
  top: var(--scrolling-gallery-items-padding);
  left: var(--scrolling-gallery-items-padding);
  right: var(--scrolling-gallery-items-padding);
  bottom: var(--scrolling-gallery-items-padding);
  z-index: 1;
}

.scroller .scroller-item.border::before {
  border: 0.5px solid rgba(0,0,0,.1);
}

.scroller img, .scroller .scroller-item::after, .scroller .scroller-item::before {
  border-radius: 22.5%;
}

@supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
  .scroller .scroller-item.border::before {
    background: url(../assets/img/app-icons/mask-border.svg) center/100% 100% no-repeat;
  }

  .scroller img, .scroller .scroller-item.border::before {
    border: none;
  }
  .scroller img, .scroller .scroller-item::after {
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A") center/100% 100% no-repeat
  }
}

@keyframes scrolling-gallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--scrolling-gallery-items-total) * -100vw / var(--scrolling-gallery-items-visible)));
  }
}

.scroller:hover,
.scroller:focus {
  /* animation-play-state: paused; */
}

@media (max-width: 1024px) {
  .stage-2 p.title {
    text-align: left;
  }
}

.stage-3 {
  background-color: #000;
  color: #fff;
}

.slides.stage-3 .panel svg {
  fill: #fff;
}

.slides.stage-3 .panel .button {
  background-color: #fff;
  color: #000;
}

.slides.stage-3 .panel .button.stroke {
  color: #fff;
}

.slides.stage-3 .navigation li:after {
  background-color: #fff;
}

.stage-4 {
  background-color: #fff;
  color: #202020;
}

svg.stage-4-badge {
  fill: #202020;
}

.slides.stage-4 .panel svg {
  fill: #202020;
}

.slides.stage-4 .panel .button {
  background-color: #202020;
  color: #fff;
}

.slides.stage-4 .panel .button.stroke {
  color: #202020;
}

.slides.stage-4 .navigation li:after {
  background-color: #202020;
}

/* Clients */

.slide[data-name=clients] img {
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 24px;
  transition: opacity 0.1s ease-in, transform 0.15s cubic-bezier(0.5, 0, 0.25, 2.5);
}
@media (max-width: 767px) {
  .slide[data-name=clients] img {
    margin-top: 14px;
    margin-bottom: 14px;
  }
}
@media (max-width: 435px) {
  .slide[data-name=clients] img {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.desktop .slide[data-name=clients] img:hover {
  transform: scale(1.05);
}
.slide[data-name=clients] .tintLogos {
  /* filter: brightness(0.2); */
}

.stage-5 {
  background-color: #000;
  color: #00ffff;
}

.stage-5-link {
  color: rgba(0,255,255,0.7);
  position: relative;
  box-shadow: 0 2px rgba(0,255,255,0.7);
}

svg.stage-5-badge {
  fill: #00ffff;
}

.slides.stage-5 .panel svg {
  fill: #00ffff;
}

.slides.stage-5 .panel .button {
  background-color: #00ffff;
  color: #000;
}

.slides.stage-5 .panel .button.stroke {
  color: #00ffff;
}

.slides.stage-5 .navigation li:after {
  background-color: #00ffff;
}

.slides.stage-5 a {
  color: #00ffff;
}