/*
 * Please place your own CSS code to this file
 *
 */  


/*
 * Rotate logo at the front page
 *
 */  
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotatemainlogo {
  animation: rotate 8s linear infinite;
}

/*
 * Type and erase effect
 *
 */  

.wrappertx{
  color: #fff;  
  padding-top: 30px;
}
.wrappertx .static-txt{
  font: lighter 3rem "poppins", sans-serif;
  color: #000000;
  font-size: 60px;
  font-weight: 400;
}
.wrappertx .dynamic-txts{
  list-style: none;
  --height: 90px;
  height: var(--height);
  line-height: var(--height);
  overflow: hidden;
}

.wrappertx .dynamic-txts li{
  font-size: 50px;
  animation: slidingup 12s infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
@keyframes slidingup {
  0%, 10% {
    transform: translateY(0%);
  }
  15%, 25% {
    transform: translateY(-100%);
  }
  30%, 40% {
    transform: translateY(-200%);
  }
  45%, 55% {
    transform: translateY(-300%);
  }
  60%, 70% {
    transform: translateY(-400%);
  }
  75%, 85% {
    transform: translateY(-500%);
  }
  100% {
    transform: translateY(-500%);
  }
}
.wrappertx .dynamic-txts li span{
  font-weight: 600;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(20deg, #18CCCC, #C918CC); 
  -webkit-background-clip: text;
  white-space: nowrap;
}
.dynamic-txts li span::aftertx{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  border-left: 2px solid #000000;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}


/* --- Responsive Design --- */
/* Mobile version */
@media all and (max-width: 912px) {

.wrappertx .dynamic-txts li {
  font-size: 23px;
  animation: slidingup 12s infinite;
}

.wrappertx .dynamic-txts{
  list-style: none;
  --height: 50px;
  height: var(--height);
  line-height: var(--height);
  overflow: hidden;
}
}