/*
 * Styles for Animated Illustration block
 * The parent container MUST have position: relative for this to work.
 */
.wp-block-youthhostels-animated-arrow {
  position: absolute;
  z-index: 1;
  width: var(--svg-width, 150px);
  height: var(--svg-height, auto);
}
.wp-block-youthhostels-animated-arrow:not(.block-editor-block-list__block) {
  pointer-events: none;
}
.wp-block-youthhostels-animated-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-block-youthhostels-animated-arrow svg [class*=svg-elem-] {
  stroke-dashoffset: var(--stroke-length, 100px);
  transition: stroke-dashoffset var(--stroke-duration, 1s) var(--stroke-easing, cubic-bezier(0.47, 0, 0.745, 0.715)) var(--stroke-delay, 0s), fill var(--fill-duration, 0.7s) var(--fill-easing, cubic-bezier(0.47, 0, 0.745, 0.715)) var(--fill-delay, 0.8s);
}
.wp-block-youthhostels-animated-arrow svg.active [class*=svg-elem-] {
  stroke-dashoffset: 0 !important;
}
.wp-block-youthhostels-animated-arrow svg.active .dashed {
  stroke-dasharray: 3.2 3.2;
}
.wp-block-youthhostels-animated-arrow svg.active .svg-fill-animate {
  fill: var(--fill-color, currentColor) !important;
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-stroke-animate {
  stroke-dashoffset: var(--stroke-length, 100);
  transition: stroke-dashoffset var(--stroke-duration, 1s) var(--stroke-easing, cubic-bezier(0.47, 0, 0.745, 0.715)) var(--stroke-delay, 0s);
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-stroke-animate.animate {
  stroke-dashoffset: 0;
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-fill-animate {
  fill: transparent;
  transition: fill var(--fill-duration, 0.7s) var(--fill-easing, cubic-bezier(0.47, 0, 0.745, 0.715)) var(--fill-delay, 0.8s);
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-fill-animate.animate {
  fill: var(--fill-color, currentColor);
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-animation-fade {
  opacity: 0;
  transition: opacity var(--fade-duration, 0.6s) var(--fade-easing, ease-in-out) var(--fade-delay, 0s);
}
.wp-block-youthhostels-animated-arrow svg.is-animating .svg-animation-fade.animate {
  opacity: 1;
}
.wp-block-youthhostels-animated-arrow svg.svg-animation-slow {
  --animation-duration: 1.5s;
}
.wp-block-youthhostels-animated-arrow svg.svg-animation-fast {
  --animation-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-youthhostels-animated-arrow svg.active [class*=svg-elem-],
  .wp-block-youthhostels-animated-arrow svg.active .svg-stroke-animate,
  .wp-block-youthhostels-animated-arrow svg.active .svg-fill-animate,
  .wp-block-youthhostels-animated-arrow svg.active .svg-animation-fade, .wp-block-youthhostels-animated-arrow svg.is-animating [class*=svg-elem-],
  .wp-block-youthhostels-animated-arrow svg.is-animating .svg-stroke-animate,
  .wp-block-youthhostels-animated-arrow svg.is-animating .svg-fill-animate,
  .wp-block-youthhostels-animated-arrow svg.is-animating .svg-animation-fade {
    transition: none;
  }
  .wp-block-youthhostels-animated-arrow svg.active [class*=svg-elem-],
  .wp-block-youthhostels-animated-arrow svg.active .svg-stroke-animate, .wp-block-youthhostels-animated-arrow svg.is-animating [class*=svg-elem-],
  .wp-block-youthhostels-animated-arrow svg.is-animating .svg-stroke-animate {
    stroke-dashoffset: 0;
  }
  .wp-block-youthhostels-animated-arrow svg.active .svg-fill-animate, .wp-block-youthhostels-animated-arrow svg.is-animating .svg-fill-animate {
    fill: var(--fill-color, currentColor);
  }
  .wp-block-youthhostels-animated-arrow svg.active .svg-animation-fade, .wp-block-youthhostels-animated-arrow svg.is-animating .svg-animation-fade {
    opacity: 1;
  }
}
.wp-block-youthhostels-animated-arrow #animated-icon-lecker .svg-elem-1 {
  stroke-dashoffset: 575.4000244141px;
  stroke-dasharray: 575.4000244141px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-lecker .svg-elem-2 {
  stroke-dashoffset: 172.5208129883px;
  stroke-dasharray: 172.5208129883px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-lecker .svg-elem-3 {
  stroke-dashoffset: 296.6990661621px;
  stroke-dasharray: 296.6990661621px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-lecker .svg-elem-4 {
  stroke-dashoffset: 93.1529464722px;
  stroke-dasharray: 93.1529464722px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-lecker .svg-elem-5 {
  stroke-dashoffset: 264.061340332px;
  stroke-dasharray: 264.061340332px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-smiley .svg-elem-1 {
  stroke-dashoffset: 78.6446151733px;
  stroke-dasharray: 78.6446151733px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-smiley .svg-elem-2 {
  stroke-dashoffset: 138.2799987793px;
  stroke-dasharray: 138.2799987793px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow01 .svg-elem-1 {
  stroke-dashoffset: 432.9918212891px;
  stroke-dasharray: 432.9918212891px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow01 .svg-elem-2 {
  stroke-dashoffset: 24.1471595764px;
  stroke-dasharray: 24.1471595764px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow02 .svg-elem-1 {
  stroke-dashoffset: 75.1806259155px;
  stroke-dasharray: 75.1806259155px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow02 .svg-elem-2 {
  stroke-dashoffset: 26.4437828064px;
  stroke-dasharray: 26.4437828064px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow03 .svg-elem-1 {
  stroke-dashoffset: 171.8203125px;
  stroke-dasharray: 171.8203125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow03 .svg-elem-2 {
  stroke-dashoffset: 12.9335660934px;
  stroke-dasharray: 12.9335660934px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow04 .svg-elem-1 {
  stroke-dashoffset: 91.7523651123px;
  stroke-dasharray: 91.7523651123px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow04 .svg-elem-2 {
  stroke-dashoffset: 12.9187278748px;
  stroke-dasharray: 12.9187278748px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow05 .svg-elem-1 {
  stroke-dashoffset: 20.5457763672px;
  stroke-dasharray: 20.5457763672px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
.wp-block-youthhostels-animated-arrow #animated-icon-arrow05 .svg-elem-2 {
  stroke-dashoffset: 18.9005966187px;
  stroke-dasharray: 18.9005966187px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}