.headline {
  position: relative;

  
}



.headline .animation-container {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.headline .animation-container svg {
  position: absolute;
  top: -5px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 8px);
  pointer-events: none;
}

.headline path {
  stroke: var(--c-brand);
  stroke-width: .25em;
  stroke-dasharray: 0 1500;
}

.headline_under .animation-container svg {
  top: auto;
  left: 0;
  right: 0;
  bottom: -3px;
  width: 100%;
  height: calc(100% + 8px);
  fill: transparent;
  stroke-linecap: round;
}

.headline_under .animation-container svg.round-box.gara-round-box {
  top: auto;
  left: -20px;
  right: 0;
  bottom: -3px;
  width: 115%;
  fill: transparent;
  stroke-linecap: round;
}
   
.headline_under path {
  stroke-dasharray: 0 700;
}
    

.headline path {
  stroke-width:10px;
  stroke:#E62048;
}

/*em:hover path {
  animation: draw 1s forwards;
}*/
    

    
 [data-aos="example-anim3"].aos-animate path {
    animation: draw 1s forwards;
    animation-delay: 1s;
  }

  [data-aos="example-anim2"].aos-animate path {
    animation: drawline 2s forwards;
    
  }

  [data-aos="example-anim4"].aos-animate path {
    animation: drawline 4s forwards;
    animation-delay: 1s;
  }

  [data-aos="example-anim5"].aos-animate path {
    animation: draw 1s forwards;
    animation-delay: 1s;
  }

  @keyframes drawline {
    0% {stroke-dasharray: 0 700;}
    100% {stroke-dasharray: 700 700;}
  }



@keyframes draw {
  0% {stroke-dasharray: 0 1500;}
  100% {stroke-dasharray: 1500 1500;}
}

@media only screen and (max-width: 767px) {

.headline_under .animation-container svg.round-box.gara-round-box {
  top: auto;
  left: -10px;
  right: 0;
  bottom: -3px;
  width: 115%;
  fill: transparent;
  stroke-linecap: round;
}

}