body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.users-body {
  position: relative;
  z-index : 1;
}

.users-wrap {
  position      : relative;
  z-index       : 1;
  padding       : 10px 15px 20px;
  display       : flex;
  flex-direction: column;
  height        : calc((var(--vh, 1vh) * 100) - 60px);
  box-sizing    : border-box;
}

.users-card {
  position: relative;
  z-index : 1;
  height  : calc(100% - 120px);
}

.user {
  display   : block;
  width     : 160px;
  transition: all 0.5s ease;
  transform : translateY(-50%);
}

.user__wrap {
  position  : relative;
  height    : 100%;
  width     : 100%;
  opacity   : 0;
  transition: all 0.5s ease;
}

.user__name {
  font-family   : 'GT America Th';
  display       : none;
  font-size     : 23px;
  line-height   : 0.84;
  color         : #000;
  letter-spacing: -0.96px;
  position      : absolute;
  bottom        : -18px;
  left          : 0;
  opacity       : 0;
  transition    : all 0.3s ease;
}

.user__name span {
  color: #e3dcdc;
}

.user--eight .user__name {
  top   : 0;
  bottom: auto;
  left  : -80px;
}

.users-text {
  font-family  : 'GT America Lt';
  font-size    : 11px;
  font-weight  : 400;
  margin-bottom: 0;
  opacity      : 0;
  animation    : users-text 2s ease 21s forwards;
  margin-top   : auto;
}

@keyframes users-text {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.users-text span {
  font-size  : 10px;
  font-family: 'GT America Bl';
}

.user__img {
  width : 100%;
  height: 100%;
}

.user__img--end img {
  margin-left: auto;
}

.user__img img {
  max-width : 100%;
  max-height: 100%;
  display   : block;
}

.user--one {
  position : absolute;
  width    : 37.8vw;
  height   : 49%;
  top      : 15px;
  left     : 0;
  transform: translate(0, 0);
}

.user--two {
  position : absolute;
  width    : 26vw;
  height   : 14%;
  top      : 0;
  right    : 23px;
  transform: translate(0, 0);
}

.user--three {
  position : absolute;
  width    : 15vw;
  height   : 16%;
  left     : 56%;
  top      : 42%;
  transform: translate(-50%, -50%);
}

.user--four {
  position: absolute;
  width   : 26.5vw;
  height  : 13%;
  top     : 22%;
  right   : 70px;
}

.user--five {
  position: absolute;
  width   : 26vw;
  height  : 16%;
  right   : 0;
  top     : 52%;
}

.user--six {
  position: absolute;
  width   : 22vw;
  height  : 11%;
  top     : 36%;
  right   : 0;
}

.user--seven {
  position: absolute;
  width   : 29vw;
  height  : 16%;
  left    : 0;
  top     : 70%;
}

.user--eight {
  position: absolute;
  width   : 49.8vw;
  height  : 27%;
  top     : 85%;
  right   : 0;
}

@media screen and (max-width:1024px) and (min-width: 500px) {
  .user--eight {
    position: absolute;
    width   : 36.8vw;
    height  : 27%;
    top     : 85%;
    right   : 0;
  }
}

.anim-one .user__wrap {
  animation: user-anim 2.5s ease 1s forwards;
}

.anim-two .user__wrap {
  animation: user-anim 2.5s ease 3.5s forwards;
}

.anim-three .user__wrap {
  animation: user-anim 2.5s ease 6s forwards;
}

.anim-four .user__wrap {
  animation: user-anim 2.5s ease 8.5s forwards;
}

.anim-five .user__wrap {
  animation: user-anim 2.5s ease 11s forwards;
}

.anim-six .user__wrap {
  animation: user-anim 2.5s ease 13.5s forwards;
}

.anim-seven .user__wrap {
  animation: user-anim 2.5s ease 16s forwards;
}

.anim-eight .user__wrap {
  animation: user-anim 2.5s ease 18.5s forwards;
}

@keyframes user-anim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* text anim */
.anim-text-wrap {
  margin-top: auto;
  position  : relative;
  z-index   : -1;
}

@keyframes text-wrap-anim {
  0% {
    height: auto;
  }

  100% {
    height: 1px;
  }
}

.anim-text {
  font-family   : 'GT America Th';
  position      : absolute;
  bottom        : 0;
  left          : 0;
  font-size     : 53px;
  line-height   : 0.8;
  letter-spacing: -2.65px;
  color         : #000000;
  text-transform: uppercase;
  opacity       : 0;
}

.text-anim-one {
  animation: anim-user-text 2.5s ease 1s forwards;
}

.text-anim-two {
  animation: anim-user-text 2.5s ease 3s forwards;
}

.text-anim-three {
  animation: anim-user-text 2.5s ease 6s forwards;
}

.text-anim-four {
  animation: anim-user-text 2.5s ease 8.5s forwards;
}

.text-anim-five {
  animation: anim-user-text 2.5s ease 11s forwards;
}

.text-anim-six {
  animation: anim-user-text 2.5s ease 13.5s forwards;
}

.text-anim-seven {
  animation: anim-user-text 2.5s ease 16s forwards;
}

.text-anim-eight {
  animation: anim-user-text 2.5s ease 18.5s forwards;
}


@keyframes anim-user-text {
  0% {
    transform: rotateX(90deg);
    opacity  : 0;
  }

  99% {
    background-color: rotateY(-90deg);
    opacity         : 1;
  }

  100% {
    opacity: 0;
  }
}


@media screen and (max-width: 767px) {
  .mySidenav {
    padding: 0px 15px 0px 15px !important;
  }

  .site-logo {
    padding-right: 0px !important;
  }
}

@media (min-width: 768px) {
  .mySidenav {
    padding: 0px 30px 0px 0px;
  }

  .users-wrap {
    padding: 25px 30px 40px;
  }

  .anim-text {
    font-size: 94px;
  }

  body {
    height: 100vh;
  }

  .user {
    height   : auto;
    transform: translateY(0);
  }

  .user--one {
    top  : 0;
    width: 34.8vw;
  }

  .user--two {
    top      : 4.557vw;
    right    : auto;
    left     : calc(50% + 4vw);
    transform: translateX(-50%);
  }

  .user--three {
    top      : 30vw;
    right    : auto;
    left     : calc(50% + 4vw);
    transform: translateX(-50%);
  }

  .user--four {
    top  : 0;
    right: 0;
  }

  .user--five {
    top: 39.583vw;
  }

  .user--six {
    top: 20.182vw;
  }

  .user--seven {
    top : 65.104vw;
    left: 5.8vw;
  }

  .user--eight {
    top: 63.932vw;
  }

  .users-text {
    font-size  : 18px;
    line-height: 23px;
  }

  .users-text span {
    font-size  : 16px;
    font-weight: 700;
  }
}

@media (min-width: 1025px) {

  .essay {
    bottom: 50px;
  }

  .anim-text-wrap {
    position: absolute;
    bottom  : 28px;
    left    : 105px;
    z-index : 1;
    overflow: visible;
  }

  .users-wrap {
    height  : 100vh;
    overflow: hidden;
    padding : 40px 50px 40px 111px;
  }

  .users-card {
    height: 100%;
  }

  .user__name {
    display: block;
  }

  .anim-text {
    font-size: 90px;
    bottom   : 8px;
  }

  .user--one {
    width: 20.2vw;
  }

  .user--two {
    width    : 15.7vw;
    left     : 25.171vw;
    transform: none;
    top      : 4.683vw;
  }

  .user--three {
    width    : 9vw;
    top      : 20vw;
    left     : 30.732vw;
    transform: none;
  }

  .user--four {
    width: 15.6vw;
    top  : 0;
    right: 22.732vw;
  }

  .user--five {
    width: 15.6vw;
    top  : 19vw;
    right: 5.756vw;
  }

  .user--six {
    width: 13.3vw;
    top  : 16.098vw;
    right: 26.146vw;
  }

  .user--seven {
    width: 17.3vw;
    top  : 0;
    left : auto;
    right: 0;
  }

  .user--eight {
    width : 25vw;
    top   : auto;
    bottom: 0;
  }

  .users-text {
    width   : 590px;
    position: absolute;
    bottom  : 8px;
  }
}

@media (min-width: 1366px) {
  .user__name {
    font-size  : 35px;
    line-height: 30px;
    bottom     : -29px;
  }

  .user--eight .user__name {
    top   : 0;
    bottom: auto;
    left  : -126px;
  }

  .user--six .user__name {
    left     : 100%;
    transform: translateX(-112px);
  }

  .user--five .user__name {
    left     : 100%;
    transform: translateX(-122px);
  }

  .user--three .user__name {
    left: -20px;
  }

  .anim-text {
    font-size: 135px;
  }

  .user--one {
    width: 15.4vw;
  }

  .user--two {
    width: 12.8vw;
    top  : 3.514vw;
    left : 21.303vw;
  }

  .user--three {
    width: 7.03vw;
    top  : 15.007vw;
    left : 34.041vw;
  }

  .user--four {
    width: 12.8vw;
    left : 41.142vw;
  }

  .user--five {
    width: 12.8vw;
    top  : 17.350vw;
    right: 7.613vw;
  }

  .user--six {
    top  : 12.079vw;
    width: 10.9vw;
    right: 27.672vw;
  }

  .user--seven {
    width: 14.2vw;
  }

  .user--eight {
    width: 24.3vw;
  }

  .users-text {
    max-width: 595px;
  }
}

/* @media (min-width: 1920px) {
  .user--five {
    top: 23.122vw;
  }

  .user--eight {
    width: 22vw;
  }
} */