#header-wrapper.trans {
  transition: all 1s ease;
}


.clip {
  clip-path: polygon(0 -50%, 100% -50%, 100% 98%, 50% 100%, 0 98%);
}

@media (min-width: 768px) {
  .clip {
    clip-path: polygon(0 -50%, 100% -50%, 100% 80%, 50% 100%, 0 80%);
  }
}

.unfixed {
  transform: translateY(-100%);
  opacity: 0;
}

.h1 span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.h1.letter-visible span {
  opacity: 1;
  transform: translateY(0);
}


.path-owner {
  animation: march-owner 0.2s linear infinite;
  stroke-dashoffset: 0;
}

.path-carrier {
  animation: march-carrier 0.3s linear infinite;
  stroke-dashoffset: 0;
}

@keyframes march-owner {
  to {
    stroke-dashoffset: -30;
  }
}

@keyframes march-carrier {
  to {
    stroke-dashoffset: 30;
  }
}