/* Product categories block styles */
@keyframes grow {
    0% { max-height: var(--lineHeight); }
    100% { max-height: calc(var(--lineHeight) * var(--lines)); }
  }

  @keyframes grow {
    0% { max-height: var(--lineHeight); }
    100% { max-height: calc(var(--lineHeight) * var(--lines)); }
  }
  
  @keyframes carriageReturn {
    0% { top: 0; }
    100% { top: calc(var(--lineHeight) * var(--lines)); }
  }
  
  @keyframes type {
    0% { width: 100%; }
    100% { width: 0%; }
  }
  
  @keyframes caret {
    0% { color: var(--bgColor); }
    100% { color: black; }
  }

.hero-block {
    --caption-load-time: 1s;
}

.heading-container {
    display: inline-block;
}

.hero-block h1 {
    color: #13336d;
    text-transform: none;
    font-weight: 600;
    font-size: 2.5rem;
}
  
  .typed-out {
    --bgColor: white;
    --lines: 500;
    --lineHeight: 3.25rem;
    --timePerLine: 0.5s;
    --widthCh: 25;
    --width: calc(var(--widthCh) * 1ch);
    /* do not touch the time property!!! */
    --time: calc(var(--lines) * var(--timePerLine));
    animation: grow var(--time) steps(var(--lines));
    animation-fill-mode: forwards;
    background: var(--bgColor);  
    line-height: var(--lineHeight);
    max-height: var(--lineHeight);
    overflow: hidden;
    position: relative;
    width: var(--width);
    /* word-break: break-all; */
  }
  
  .typed-out::before {
    content: "";
    animation: 
      type var(--timePerLine) linear infinite, 
      carriageReturn var(--time) steps(var(--lines)) var(--lines),
      caret 0.5s steps(2) infinite;
    background: var(--bgColor);
    bottom: 0;
    height: 3.25rem;
    position: absolute;
    right: 0;
    width: 100%;
  }



.hero-links {
    animation: videoTitleFadeIn var(--caption-load-time) ease-in-out;
    -webkit-animation: videoTitleFadeIn var(--caption-load-time) ease-in-out;
    -moz-animation: videoTitleFadeIn var(--caption-load-time) ease-in-out;
    -o-animation: videoTitleFadeIn var(--caption-load-time) ease-in-out;
    -ms-animation: videoTitleFadeIn var(--caption-load-time) ease-in-out;

    opacity: 0;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-3em);
}

.hero-links .link-wrapper {
    display: flex;
}

.hero-links .link-wrapper img.link-arrow {
    align-self: center;
}

.hero-links a.link {
    font-size: 1.5rem;
    font-weight: 300;
    display: inline-block;
    transition: transform 200ms ease-out;
    padding-left: .5rem;
}

.hero-links a.link:hover {
    text-decoration: none;
    transform: translateX(.3rem);
}
/* 
.hero-links a.link::before {
    content: '\f061';
    font-family: 'Fontawesome';
    padding-right: 1rem;
} */

@keyframes videoTitleFadeIn {

    0% {
        transform: translateY(3em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }

}

/* RESPONSIVE */
@media screen and (max-width: 525px) {
    .typed-out {
        --widthCh: 20;
    }
}