/* SCSS Variables */
/* Mixins */
/*
 * Styles for Animated Illustration block
 * The parent container MUST have position: relative for this to work.
 */
.wp-block-youthhostels-animated-line-background {
  position: absolute;
  width: var(--svg-width, 150px);
  height: var(--svg-height, auto);
  z-index: -1;
  /*
  	// Specific sizes for each line
  	// Lines with 100vw width (full width)
  	&[data-line="02"]{
  		width: 1440px;
  		height: 660px;
  		max-width: none;
  	}
  	&[data-line="08"] {
  		width: 100vw !important;
  		height: auto !important;
  		max-width: 100vw !important;
  	}

  	// Fixed width lines
  	&[data-line="03"] {
  		width: 1000px !important;
  		height: auto !important;
  	}

  	&[data-line="04"] {
  		width: 800px !important;
  		height: auto !important;
  	}

  	&[data-line="05"],
  	&[data-line="06"],
  	&[data-line="07"] {
  		width: 600px !important;
  		height: auto !important;
  	}

  	&[data-line="09"] {
  		width: 1440px;
      height: 575px;
      max-width: none;
  	}
  	*/
}
.wp-block-youthhostels-animated-line-background:not(.block-editor-block-list__block) {
  pointer-events: none;
}
.wp-block-youthhostels-animated-line-background svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.3;
}
.wp-block-youthhostels-animated-line-background svg path {
  stroke-width: 0.8rem;
}
@media (min-width: 782px) {
  .wp-block-youthhostels-animated-line-background svg path {
    stroke-width: 1.1rem;
  }
}
.wp-block-youthhostels-animated-line-background 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-line-background svg.active [class*=svg-elem-] {
  stroke-dashoffset: 0 !important;
}
.wp-block-youthhostels-animated-line-background svg.active .dashed {
  stroke-dasharray: 3.2 3.2;
}
.wp-block-youthhostels-animated-line-background svg.active .svg-fill-animate {
  fill: var(--fill-color, currentColor) !important;
}
.wp-block-youthhostels-animated-line-background 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-line-background svg.is-animating .svg-stroke-animate.animate {
  stroke-dashoffset: 0 !important;
}
.wp-block-youthhostels-animated-line-background 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-line-background svg.is-animating .svg-fill-animate.animate {
  fill: var(--fill-color, currentColor);
}
.wp-block-youthhostels-animated-line-background 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-line-background svg.is-animating .svg-animation-fade.animate {
  opacity: 1;
}
.wp-block-youthhostels-animated-line-background svg.svg-animation-slow {
  --animation-duration: 1.5s;
}
.wp-block-youthhostels-animated-line-background svg.svg-animation-fast {
  --animation-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-youthhostels-animated-line-background svg.active [class*=svg-elem-],
  .wp-block-youthhostels-animated-line-background svg.active .svg-stroke-animate,
  .wp-block-youthhostels-animated-line-background svg.active .svg-fill-animate,
  .wp-block-youthhostels-animated-line-background svg.active .svg-animation-fade, .wp-block-youthhostels-animated-line-background svg.is-animating [class*=svg-elem-],
  .wp-block-youthhostels-animated-line-background svg.is-animating .svg-stroke-animate,
  .wp-block-youthhostels-animated-line-background svg.is-animating .svg-fill-animate,
  .wp-block-youthhostels-animated-line-background svg.is-animating .svg-animation-fade {
    transition: none;
  }
  .wp-block-youthhostels-animated-line-background svg.active [class*=svg-elem-],
  .wp-block-youthhostels-animated-line-background svg.active .svg-stroke-animate, .wp-block-youthhostels-animated-line-background svg.is-animating [class*=svg-elem-],
  .wp-block-youthhostels-animated-line-background svg.is-animating .svg-stroke-animate {
    stroke-dashoffset: 0;
  }
  .wp-block-youthhostels-animated-line-background svg.active .svg-fill-animate, .wp-block-youthhostels-animated-line-background svg.is-animating .svg-fill-animate {
    fill: var(--fill-color, currentColor);
  }
  .wp-block-youthhostels-animated-line-background svg.active .svg-animation-fade, .wp-block-youthhostels-animated-line-background svg.is-animating .svg-animation-fade {
    opacity: 1;
  }
}
.wp-block-youthhostels-animated-line-background #animated-line-01, .wp-block-youthhostels-animated-line-background #animated-line-02, .wp-block-youthhostels-animated-line-background #animated-line-03, .wp-block-youthhostels-animated-line-background #animated-line-04, .wp-block-youthhostels-animated-line-background #animated-line-05, .wp-block-youthhostels-animated-line-background #animated-line-06, .wp-block-youthhostels-animated-line-background #animated-line-07, .wp-block-youthhostels-animated-line-background #animated-line-08, .wp-block-youthhostels-animated-line-background #animated-line-09, .wp-block-youthhostels-animated-line-background #animated-line-10, .wp-block-youthhostels-animated-line-background #animated-line-11, .wp-block-youthhostels-animated-line-background #animated-line-12, .wp-block-youthhostels-animated-line-background #animated-line-13, .wp-block-youthhostels-animated-line-background #animated-line-14 {
  min-width: 1440px;
}
.wp-block-youthhostels-animated-line-background #animated-line-01 .svg-elem-1 {
  stroke-dashoffset: 2963.2536621094px;
  stroke-dasharray: 2963.2536621094px;
  -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-line-background #animated-line-02 .svg-elem-1 {
  stroke-dashoffset: 3153.0158691406px;
  stroke-dasharray: 3153.0158691406px;
  -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-line-background #animated-line-03 .svg-elem-1 {
  stroke-dashoffset: 4102.029296875px;
  stroke-dasharray: 4102.029296875px;
  -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-line-background #animated-line-04 .svg-elem-1 {
  stroke-dashoffset: 4093.517578125px;
  stroke-dasharray: 4093.517578125px;
  -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-line-background #animated-line-05 .svg-elem-1 {
  stroke-dashoffset: 3768.1728515625px;
  stroke-dasharray: 3768.1728515625px;
  -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-line-background #animated-line-06 .svg-elem-1 {
  stroke-dashoffset: 5737.7265625px;
  stroke-dasharray: 5737.7265625px;
  -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-line-background #animated-line-07 .svg-elem-1 {
  stroke-dashoffset: 7924.69921875px;
  stroke-dasharray: 7924.69921875px;
  -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-line-background #animated-line-08 .svg-elem-1 {
  stroke-dashoffset: 7077.22265625px;
  stroke-dasharray: 7077.22265625px;
  -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-line-background #animated-line-09 .svg-elem-1 {
  stroke-dashoffset: 7839.0971679688px;
  stroke-dasharray: 7839.0971679688px;
  -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-line-background #animated-line-10 .svg-elem-1 {
  stroke-dashoffset: 6068.0693359375px;
  stroke-dasharray: 6068.0693359375px;
  -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-line-background #animated-line-11 .svg-elem-1 {
  stroke-dashoffset: 11078.8193359375px;
  stroke-dasharray: 11078.8193359375px;
  -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-line-background #animated-line-12 .svg-elem-1 {
  stroke-dashoffset: 11377.626953125px;
  stroke-dasharray: 11377.626953125px;
  -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-line-background #animated-line-13 .svg-elem-1 {
  stroke-dashoffset: 7003.28515625px;
  stroke-dasharray: 7003.28515625px;
  -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-line-background #animated-line-14 .svg-elem-1 {
  stroke-dashoffset: 5434.8540039063px;
  stroke-dasharray: 5434.8540039063px;
  -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;
}