html {
  font-family: 'SUIT', sans-serif;
  background-color: #f0f0f5;
  color: #131315;
  font-size: 16px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-x: hidden;
}

.bebas {
  font-family: 'Bebas Neue', sans-serif;
}

header{
    background-color: #000;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100vw;
}

header>menu, header>menu>ul{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

header>menu{padding: 12px 24px;}
header>menu>ul>li:first-child{padding-right: 12px;}

/* Title */
.title {
  display: flex;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
}

.title-box {
  width: 50%;
  height: calc(100vh - 48px);
  display: flex;
  padding: 24px;
  overflow-x: hidden;
  overflow-x: hidden;
}

.svg-container {
  position: relative;
  width: 25vw;
  height: calc(100vh - 88px);
  padding: 0px 8px;
}

.svg-content-responsive {
  width: 100%;
  height: calc(100vh - 88px);
}

.svg-container:first-child {
  padding-left: 0px;
}

.svg-container:last-child {
  padding-right: 0px;
}

/* people */

.people{
  position: absolute;
  bottom: 10px;
  width: 70vw;
  left: -70vw;
  -webkit-animation: translateinfinite 10s linear infinite;
  animation: translateinfinite 10s linear infinite;
}

.pink {
  animation-delay: 2.5s;
}

.yellow {
  animation-delay: 4.5s;
}

.blue {
  animation-delay: 6.5s;
}

.green {
  animation-delay: 8.5s;
}

.purple {
  animation-delay: 10.5s;
}


@-webkit-keyframes translateinfinite {
  100% {
    transform: translateX(calc(300px * 12));
  }
}

@keyframes translateinfinite {
  100% {
    transform: translateX(calc(300px * 12));
  }
}

.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}