@keyframes slidingBannerAnimation {
  0%   {
    transform: translate(100vw, 0%)
  }
  100%  {
    transform: translate(-100%, 0%)
  }
}

#homepage {
  width: 100%;
  max-height: 100vh;
  overflow: scroll;
}

@media (max-width: 767px) {
  #slidingBannerContainer {
    display: none;
  }
  #container {
    height: calc(100%) !important;
    padding-top: 0 !important;
  }
  #slidingBannerContainer {
    height: 0;
    display: none;
  }
  .part4 {
    height: calc(75vh + 22px);
  }

  .part3 {
    height: 86vh;
  }

  #projectDetail figure {
    margin: 0;
  }
  #projectDetail img {
    width: 100%;
  }
  #homepageDescription {
    padding: 0 5% !important;
    height: 100vh !important;
  }

  .HHButton {
    width: 100%;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    font-weight: 500;
  }
  
  .HHButton button {
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 1rem 2rem;
    border: 2px solid black;
    font-size: 0.9rem;
    gap: 2rem;
  }
  
  .HHButton button a{
    color: black;
    text-decoration: none;
  }
  
}

#slidingBannerContainer {
  width: 100%;
  height: 20vw;
  line-height: 20vw;
  border-bottom: 2px solid black;
  border-top: none;
  background: white;
  z-index: 99999;
}

#slidingBannerContainer:before {
  content: "";
}

#slidingBanner {
  z-index: 99999;
  height: 100%;
  font-size: 40px;
  white-space: nowrap;
  animation-name: slidingBannerAnimation;
  animation-duration: calc(200s * 4);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  text-transform: uppercase;
  display: flex;
  padding-top: 1px;
}

#homepageDescription {
  font-size: 20px;

  display: flex;
  flex-flow: column;
  padding: 0 15%;
  justify-content: space-between;
  height: 100%;

}

#homepageDescription > p {
  line-height: 1.5;
  font-weight: 500;
  font-style: italic;
  margin: 6.6%;
}