#prj-logo-thot {
  background: transparent;
}

#section1,
#section2,
#section3 {
  min-height: 100vh;
}

#section1 {
  display: flex;
  align-items: center;
}

#section1 svg {
  margin: 67vh 0 0;
}

.scrollDown {
  color: rgba(224, 231, 235, 0.4);
}

svg {
  max-width: 100%;
}
#logo-thot-dec {
  max-width: 250px;
  filter: contrast(0);
}

#heroSection {
  z-index: -1;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

#heroSection svg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  max-width: 550px;
  filter: contrast(0);
}
#dec > path:nth-child(1) {
  animation: animate-svg-fill 2s infinite;
}

#dec > path:nth-child(2) {
  animation: animate-svg-fill 2s infinite 0.05s;
}

#dec > path:nth-child(3) {
  animation: animate-svg-fill 2s infinite 0.1s;
}

#dec > path:nth-child(4) {
  animation: animate-svg-fill 2s infinite 0.15s;
}

#dec > path:nth-child(5) {
  animation: animate-svg-fill 2s infinite 0.2s;
}

#dec > path:nth-child(6) {
  animation: animate-svg-fill 2s infinite 0.25s;
}

#dec > path:nth-child(7) {
  animation: animate-svg-fill 2s infinite 0.3s;
}

#dec > path:nth-child(8) {
  animation: animate-svg-fill 2s infinite 0.35s;
}

#dec > path:nth-child(9) {
  animation: animate-svg-fill 2s infinite 0.4s;
}

#dec > path:nth-child(10) {
  animation: animate-svg-fill 2s infinite 0.45s;
}

#dec > path:nth-child(11) {
  animation: animate-svg-fill 2s infinite 0.5s;
}

#dec > path:nth-child(12) {
  animation: animate-svg-fill 2s infinite 0.55s;
}

#dec > path:nth-child(13) {
  animation: animate-svg-fill 2s infinite 0.6s;
}

#dec > path:nth-child(14) {
  animation: animate-svg-fill 2s infinite 0.65s;
}

#dec > path:nth-child(15) {
  animation: animate-svg-fill 2s infinite 0.7s;
}

#dec > path:nth-child(16) {
  animation: animate-svg-fill 2s infinite 0.75s;
}

#dec > path:nth-child(17) {
  animation: animate-svg-fill 2s infinite 0.8s;
}

#dec > path:nth-child(18) {
  animation: animate-svg-fill 2s infinite 0.85s;
}

#dec > path:nth-child(19) {
  animation: animate-svg-fill 2s infinite 0.9s;
}

#dec > path:nth-child(20) {
  animation: animate-svg-fill 2s infinite 0.95s;
}

#dec > path:nth-child(21) {
  animation: animate-svg-fill 2s infinite 1s;
}

#dec > path:nth-child(22) {
  animation: animate-svg-fill 2s infinite 1.05s;
}

#dec > path:nth-child(23) {
  animation: animate-svg-fill 2s infinite 1.1s;
}

#dec > path:nth-child(24) {
  animation: animate-svg-fill 2s infinite 1.15s;
}

#dec > path:nth-child(25) {
  animation: animate-svg-fill 2s infinite 1.2s;
}

#dec > path:nth-child(26) {
  animation: animate-svg-fill 2s infinite 1.25s;
}

#dec > path:nth-child(27) {
  animation: animate-svg-fill 2s infinite 1.3s;
}

#dec > path:nth-child(28) {
  animation: animate-svg-fill 2s infinite 1.35s;
}

#dec > path:nth-child(29) {
  animation: animate-svg-fill 2s infinite 1.4s;
}

#dec > path:nth-child(30) {
  animation: animate-svg-fill 2s infinite 1.45s;
}

#dec > path:nth-child(31) {
  animation: animate-svg-fill 2s infinite 1.5s;
}

#dec > path:nth-child(32) {
  animation: animate-svg-fill 2s infinite 1.55s;
}

#dec > path:nth-child(33) {
  animation: animate-svg-fill 2s infinite 1.6s;
}

#dec > path:nth-child(34) {
  animation: animate-svg-fill 2s infinite 1.65s;
}

#dec > path:nth-child(35) {
  animation: animate-svg-fill 2s infinite 1.7s;
}

#dec > path:nth-child(36) {
  animation: animate-svg-fill 2s infinite 1.75s;
}

#dec > path:nth-child(37) {
  animation: animate-svg-fill 2s infinite 1.8s;
}

#dec > path:nth-child(38) {
  animation: animate-svg-fill 2s infinite 1.85s;
}

#dec > path {
  fill: rgba(250, 250, 250, 0.09);
  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-name: animate-svg-fill;
  animation-duration: 4s;
}

#dec > path:hover {
  fill: rgb(212, 17, 46);
}

@keyframes animate-svg-fill {
  0% {
    fill: rgb(212, 17, 46);
  }

  100% {
    fill: rgba(250, 250, 250, 0.09);
  }
}
/* MEDIA QUERY FOR RESPONSIVE DESIGN *
/* 2048 */
@media (min-width: 2048px) {
  #section1 svg {
    margin: 77vh 0 0;
  }
  #heroSection svg {
    max-width: 900px;
  }
}
/* 1280 */

@media (min-width: 1290px) {
}

/* 1024 */

@media (max-width: 1024px) {
  #section1 {
    justify-content: center;
  }
  #section1 svg {
    margin: 55vh 0 0;
  }
}

/* 991 - 481 */

@media (max-width: 991px) {
  #section1 {
    justify-content: center;
  }
  #section1 svg {
    margin: 55vh 0 0;
  }
}

/* SMART PHONE */

@media (max-width: 480px) {
  #section1 {
    justify-content: center;
  }
  #section1 svg {
    margin: 25vh 0 0;
  }
}