/* specials */


/* ------------------------------------------------------------------------------ */
/* DETAILS AND SUMMARY                                            6.00/00 - 03-01-24
/* ------------------------------------------------------------------------------ */
/* link   -> https://codepen.io/jdsteinbach/pen/GYmQjo */
/* update -> 22-02-2019 */
/* info   -> css only - no javascript necessary */
/* ------------------------------------------------------------------------------ */

details {
  position:relative;
  width:100%;
  max-width:calc(100% - 1rem);
  margin: 1.2rem auto;
  padding: 0 1rem;
  border: 1px solid var(--det-bdr-col);
  border-radius:var(--det-bdr-rnd);
  background:var(--det-bgr-col);
  color: var(--main-col-h3);
  transition: background-color 0.2s;
}
details > :last-child {
  margin-bottom: 1.4rem;
}
details::before {
  content:'';
  position:absolute;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  border-radius:inherit;
  opacity:.15;
  box-shadow:var(--det-shadow);/* self 0 0.25em 0.5em #263238; */
  pointer-events:none;
  transition:opacity 0.25s;
  z-index: -1;
}
details[open] {
  background-color: #FFF;
}
details[open]::before {
  opacity:.6;
}
/* headline */
summary {
  position: relative;
  display: block;
  padding: 1rem 2em 1rem 0;
  /* border: 1px solid orange; */
  font-size: 1.2rem;
  text-transform: uppercase;
  cursor: pointer;
}
/* the cross "-" and "+" */
summary::before, summary::after {
  content:'';
  position:absolute;
  top: 50%;
  right:0;
  width:.75em;
  height: 2px;
  background:currentColor;
  /*border:1px solid var(--color-primary);*/
  text-align:right;
  transform:translateY(-50%);
  transition:transform 0.3s ease-in-out;
}
summary::after {
  transform:translateY(-50%) rotate(90deg);
}
[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
summary::-webkit-details-marker {
  display:none;
}

/* line colored in <div> */
.sum-line {
  border-top: 1px solid var(--color-primary);
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------------------ */
/* vcard - simple */
/* link -> https://codepen.io/abcretrograde/pen/MPRgRN */
/* upd  -> 12-09-2021 */

:root {
  --card-size: 320px;
  --card-width: calc(100vw - var(--grid-gap) * 2);
  --card-height: calc(var(--card-width) * 0.6);
  --grid-gap: 2.4rem;
}

* {
  box-sizing: border-box;
}

.container {
  min-height: 100%;
  max-width: 1600px;
  margin: auto;
  padding: var(--grid-gap);
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-column-gap: var(--grid-gap);
  grid-row-gap: calc(var(--grid-gap) - 0.3rem);
}

.card {
  text-align: center;
  border: 1px solid #f2f2f2; /* self */
  border-radius: 6px;
  user-select: none;
}
.card:hover {
  opacity: 0.7;
}
.card__img {
  width: var(--card-width);
  height: calc(var(--card-height) - 2em);
}
.card__img img {
  display: block;
  height: 100%;
  width: 100%;
  border: none !important;
  object-fit: contain; /* OR cover */
}
.card__header {
  margin: 0.7em 0 0.55em;
  font-family: 'MainFont';
  font-size: 1rem;
  line-height: 1.13;
  font-weight: 100;
  letter-spacing: 0.05em;
}
.card__description {
  margin: 0;
  padding: 0 6px; /* self */
  letter-spacing: 0.025em;
}

@media (min-width: 600px) {
  :root {
    --card-height: calc(var(--card-size) * 0.7);
    --card-width: var(--card-size);
  }

  .container {
    padding: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, var(--card-width));
  }

  .container--space-evenly {
    --grid-column-gap: 3.5vw;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--grid-column-gap) * 2) !important;
    padding-right: calc(var(--grid-column-gap) * 2) !important;
    justify-content: space-evenly;
    grid-column-gap: calc(var(--grid-column-gap) * 0.6);
  }
}


/* ------------------------------------------------------------------------------ */
/* list-container */
.list-container {
  width:100%;
  margin: 2em auto; 
  padding: 1rem;
  border: 0px solid orange;
}
/* list row - referenzen */
.list-row {
  display: flex;
  align-items: stretch; /* Änderung auf "stretch" */
  margin-bottom: 2px; /* Optionaler Abstand zwischen den Zeilen */
}

dd {
  flex: 2;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-width: 0 0 1px 0;
  font-size:1rem;
  white-space: normal; /* Text umbrechen erlauben */
  overflow: hidden; /* Versteckt den überlaufenden Text */
  transition: background 0.4s, border-color 0.8s; /* Füge eine sanfte Einblendung hinzu */
}

/* Den ersten dd auf 5% Breite setzen */
dd:first-child {
  flex: 0.5;
  max-width:6ch;
  /*margin:0 auto;*/
  /*padding:4px 6px 0 0;*/
  text-align:right;
  vertical-align:middle;
}

/* Die letzte dd auf maximal 15 Zeichen Breite begrenzen */
dd:last-child {
  max-width: 15ch;
  text-align: center;
}

/* headline - TRICKY !!! */
.list-row:first-of-type {
  margin: 0 0 4px 0;
  padding: 6px 0;
  background: #999;
  color:#fff;
  border-radius: 6px 6px 0 0;
}
.list-row:first-of-type:hover {
  background: #999;
  border: none;
}

/* Füge Hintergrund und ändere border-bottom-Farbe bei :hover */
.list-row:hover {
  background: #f5f5f5; /* Leicht grauer Hintergrund bei Hover */
}
.list-row:hover dd {
  border: 1px solid #999; /* Dunklere border-bottom bei Hover */
  border-width: 0 0 1px 0;
}
/* Füge eine graue border-right zur letzten Spalte bei Hover hinzu */
.list-row:hover dd:last-child {
  border: 1px solid #999;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 6px 0;
}

/* Füge ein rotes Chevron (Font Awesome) nur im ersten dd der Zeile hinzu */
/*
.list-row:hover dd:first-child::before {
  content: '\f054';
  display:inline-block;
  margin: 0;
  padding-left:2px;
  vertical-align:middle;
  font-family: 'FontAwesome';
  text-align:left;
  color:var(--color-primary);
}
*/
/* Verstecke das Chevron-Right-Symbol standardmäßig */
.chevron {
  display:none;
}
/* Zeige das Chevron-Right-Symbol im ersten dd der Zeile nur bei Hover */
.list-row:hover dd:first-child .chevron {
  display:inline-block;
  color:var(--color-primary); /* Rote Farbe */
  /*margin-right:4px;*/
  padding: 1px 0 0 6px;
  vertical-align:middle;
  float:left;
}

.text {
  text-align:right;
  padding:0 6px 0 0;
}


/* ------------------------------------------------------------------------------ */
/* Scroll Triggered Highlights w/ CSS Scroll Driven Animations */
/* see  -> specials.js
/* use  -> index.php
/* https://codepen.io/jh3y/pen/qBgRLxb */
/* 07-11-2023 */
/* ------------------------------------------------------------------------------ */

:root {
  --hue-red: 0;
  --lightness-red: 95%; /* Helleres Rot */

  --hue-blu: 190;
  --lightness-blu: 90%; /* Dunkleres Blau */

  --hue-org: 240;
  --lightness-org: 95%; /* Helleres Orange */

  --hue-grn: 150;
  --lightness-grn: 95%; /* Normales Grün */

  --hue-gry: 0;
  --lightness-gry: 30%; /* Dunkleres Grau */

  --hue-yel: 59.31;   /* #F4F39E; /* hsl(59.31 80% 79%) */
  --lightness-yel: 82%; /* Marker yellow */
  
}

mark        {color: hsl(0 0% 6%);}
.dark mark  {color: hsl(0 0% 98%);}

mark {
	--lightness: 90%; /* self 80% */
  --highlighted: 1;
  --highlight:hsl(var(--hue-yel, 45) 80% var( --lightness-yel));
  background:transparent;
  /* color: #fff; */
}

@supports (animation-timeline: view()) {
  mark {
    --highlighted: 0;
    animation: highlight steps(1) both;
    animation-timeline: view();
    animation-range: entry 100% cover 10%;
  }
}

.dark mark { --lightness: 35%; }

mark span {
  background: linear-gradient(120deg, var(--highlight, lightblue) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
  background-position: calc((1 - var(--highlighted)) * 110%) 0;
  transition: background-position 4s;
}

mark::after {
  content: attr(data-author);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  position: absolute;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--highlight);
  font-weight: 80;
  top: 0;
  left: 100%;
  translate: 50% 0;
  font-size: 0.875rem;
  scale: var(--highlighted);
  transition: scale 10s;
}

@keyframes highlight {
  to {
    --highlighted: 1;
  }
}

::view-transition-new(root) {
	animation: grow 6s; /* self 1s */
}
::view-transition-old(root) {
	animation: none;
}

@keyframes grow {
	0% {
		clip-path: polygon(50vmax 50vmax, 50vmax 50vmax, 50vmax 50vmax);
	}
	100% {
		clip-path: polygon(50vmax -100vmax, -100vmax 200vmax, 200vmax 200vmax);
	}
}

/*
a {
	color: hsl(212 100% 50%);
	text-decoration: none;
}

a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 6px;
}
*/

/* ------------------------------------------------------------------------------ */
/* ASIDE - CITY SIGN                                                     23-05-25 */
/* https://codepen.io/machtweb/pen/GgRrxJQ                                        */
/* ------------------------------------------------------------------------------ */
/* CITY-SIGN */
.city-sign {
  display: inline-block;
  position: relative;
  width: 300px;
  margin:0 0 24px 0;
  padding:20px;
  border-radius:15px;
  text-align:center;
  font-family: "Arial", sans-serif;
  font-size:24px;
  background-color: #d79b00; /* Typisches Verkehrszeichen-Gelb */
  /*font-weight: bold;*/
  box-shadow:var(--box-shadow);
}

.city-sign::before {
  content:'';
  position:absolute;
  top:5px;
  right:5px;
  bottom:5px;
  left:5px;
  border:4px solid black;
  border-radius:10px;
}

.city-name {
  font-size:38px;
  /*font-weight: bold;*/
  color: black;
}

.city-name.sign-small {
  font-size:28px;
}

.city-add {
  margin-top:10px;
  font-size:24px;
  color: black;
}

/* ------------------------------------------------------------------------------ */
/* TEXT-ROTATE */
/* https://codepen.io/Twikito/pen/KVBoeJ */
/* 02-02-2016 */
/* ------------------------------------------------------------------------------ */

.text-rotate {
  display:inline-block;
  width:auto;
  height:auto;
  margin: .2rem 1rem;
  padding: 1.4rem 0;
  font-weight: 600;
  font-size:var(--font-size-h3); /* self 40px; */
  border:0px solid orange;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.txt-start, .txt-rotate {display:inline-block;vertical-align:top;margin:0;}
.txt-word {position:absolute;width:100%;opacity:0;}
.letter         {display:inline-block;position:relative;float:left;transform:translateZ(25px);transform-origin:50% 50% 25px;}
.letter.out     {transform:rotateX(90deg);transition:transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.letter.behind  {transform:rotateX(-90deg);}
.letter.in      {transform:rotateX(0deg);transition:transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
/* colors */
.rotate-0 {color:var(--rot-col-0);}
.rotate-1 {color:var(--rot-col-1);} /* #8e44ad; */
.rotate-2 {color:var(--rot-col-2);} /* #2980b9; */
.rotate-3 {color:var(--rot-col-3);} /* #c0392b; */
.rotate-4 {color:var(--rot-col-4);} /* #16a085; */
.rotate-5 {color:var(--rot-col-5);} /* #2c3e50; */
.rotate-6 {color:var(--rot-col-6);} /* #2c3e50; */

/* do not show on smartphones due to wrong word-break */
@media only screen and (max-width: 767px) {
  .text-rotate {
    display: none;
  }
}

/* ------------------------------------------------------------------------------ */
/* CUBE - ANIMATED - see leistungen.php */ 
/* https://codepen.io/josetxu/pen/vYaLMWB */
/* 17-01-2023 */
/* ------------------------------------------------------------------------------ */
:root {
	--size: 14;
	--speed: 8;
	--trans: linear;
	--hole: #ccc;
	--start: #213F66;
	--line:#829CBD; /* self #46433f; */
	--ini: from 90deg at;
	--end: 0 25%, #fff0 0 100%;
	--bg:	
		conic-gradient(var(--ini) 97.5% 97.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 95% 95%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 92.5% 92.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 90% 90%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 87.5% 87.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 85% 85%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 82.5% 82.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 80% 80%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 77.5% 77.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 75% 75%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 72.5% 72.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 70% 70%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 67.5% 67.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 65% 65%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 62.5% 62.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 60% 60%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 57.5% 57.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 55% 55%, var(--line) var(--end)), 
		conic-gradient(var(--ini) 52.5% 52.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 50% 50%, var(--start) var(--end)), 
		conic-gradient(var(--ini) 47.5% 47.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 45% 45%, var(--line) var(--end)),
		conic-gradient(var(--ini) 42.5% 42.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 40% 40%, var(--line) var(--end)),
		conic-gradient(var(--ini) 37.5% 37.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 35% 35%, var(--line) var(--end)),
		conic-gradient(var(--ini) 32.5% 32.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 30% 30%, var(--line) var(--end)),
		conic-gradient(var(--ini) 27.5% 27.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 25% 25%, var(--line) var(--end)),
		conic-gradient(var(--ini) 22.5% 22.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 20% 20%, var(--line) var(--end)),
		conic-gradient(var(--ini) 17.5% 17.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 15% 15%, var(--line) var(--end)),
		conic-gradient(var(--ini) 12.5% 12.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 10% 10%, var(--line) var(--end)),
		conic-gradient(var(--ini) 7.5% 7.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 5% 5%, var(--line) var(--end)),
		conic-gradient(var(--ini) 2.5% 2.5%, var(--hole) var(--end)), 
		conic-gradient(var(--ini) 0% 0%, var(--start) var(--end));
}

.cube {
	width: calc(var(--size) * 1vmin);
	height:  calc(var(--size) * 1vmin);
	background: var(--bg), var(--hole);
	background-size: 200% 200%;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	transform: rotateX(45deg) rotateZ(45deg) translateZ(calc(calc(var(--size) * 1vmin) / 2));
	transform-style: preserve-3d;
	animation: move-top calc(var(--speed) * 1s) var(--trans) 0s infinite;
  float: right;
  z-index:-99;
  margin: 5rem 3.6rem 5rem 3.6rem;
  border: 0px solid #5A709B;
  display:block;

}

.cube:before, .cube:after {
	content: "";
	background: var(--bg), var(--hole);
	background-size: 200% 200%;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	transform: rotate(180deg) rotateY(-90deg) translateY(calc(var(--size) * 1vmin));
	transform-origin: right bottom;
	animation: move-side calc(var(--speed) * 1s) var(--trans) calc(var(--speed) * -0.95s) infinite;
	opacity: 0.65;
} 

.cube:after {
	transform: rotate(180deg) rotateY(-90deg) rotateX(-90deg) translateY(calc(var(--size) * 1vmin));
	opacity: 0.35;
}

@keyframes move-top {
	100% { background-position: 100% 100%; }
}
@keyframes move-side {
	100% { background-position: 0% 0%; }
}

.cube:hover, .cube:hover:before, .cube:hover:after {
	animation-play-state: paused;
}


/* ------------------------------------------------------------------------------ */
/* IMG1 - MICROCHIP */
/* use-in -> tools/start/page/microchip_ani.add.php */
/* update -> 26-02-2025 */
/* green original */

/*
:root {
  --hue: 153; 
  --primary1: hsl(var(--hue),90%,90%);
  --primary3: hsl(var(--hue),90%,70%);
  --primary7: hsl(var(--hue),90%,30%);
  --primary9: hsl(var(--hue),90%,10%);
  --trans-dur: 0.3s;
}
*/
/* gray */
:root {
  --primary1: #F2F2F2;
  --primary3: #E0E0E0;
  --primary5: #CCC;
  --primary7: #999;
  --primary9: #666;
  --trans-dur: 1s;
}

/*
:root {
  --primary1: #FFBC80;
  --primary3: #FFA04D;
  --primary5: #A44A14;
  --primary7: #D95C17;
  --primary9: #EF741C;
  --trans-dur: 1s;
}
*/
/*
:root {
  --primary1: rgb(255, 188, 128,.5);
  --primary3: rgb(255, 160, 77,.5);
  --primary5: rgb(239, 116, 28,.5);
  --primary7: rgb(217, 92, 23,.5);
  --primary9: rgb(164, 74, 20,.5);
  --trans-dur: 1s;
}
*/
.microchip {
  display: block;
  margin: auto;
  width: 10em;
  height: auto;
  float: right;
}
.microchip__center, .microchip__dot, .microchip__line, .microchip__lines, .microchip__spark, .microchip__wave {
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
}
.microchip__core, .microchip__dot {
  fill: var(--primary7);
  transition: fill var(--trans-dur);
}
.microchip__center, .microchip__wave {
  transform-origin: 25px 25px;
}
.microchip__center {
  animation-name: center-scale;
}
.microchip__dot--1 {
  animation-name: dot-scale1;
  transform-origin: 3px 38px;
}
.microchip__dot--2 {
  animation-name: dot-scale2;
  transform-origin: 3px 54px;
}
.microchip__dot--3 {
  animation-name: dot-scale3;
  transform-origin: 3px 70px;
}
.microchip__dot--4 {
  animation-name: dot-scale4;
  transform-origin: 3px 3px;
}
.microchip__dot--5 {
  animation-name: dot-scale5;
  transform-origin: 20px 3px;
}
.microchip__dot--6 {
  animation-name: dot-scale6;
  transform-origin: 3px 30px;
}
.microchip__dot--7 {
  animation-name: dot-scale7;
  transform-origin: 37px 3px;
}
.microchip__dot--8 {
  animation-name: dot-scale8;
  transform-origin: 54px 3px;
}
.microchip__dot--9 {
  animation-name: dot-scale9;
  transform-origin: 71px 3px;
}
.microchip__line, .microchip__spark, .microchip__wave {
  transition: stroke var(--trans-dur);
}
.microchip__line {
  stroke: var(--primary7);
}
.microchip__line--1 {
  animation-name: line-draw1;
}
.microchip__line--2 {
  animation-name: line-draw2;
}
.microchip__line--3 {
  animation-name: line-draw3;
}
.microchip__line--4 {
  animation-name: line-draw4;
}
.microchip__line--5 {
  animation-name: line-draw5;
}
.microchip__line--6 {
  animation-name: line-draw6;
}
.microchip__line--7 {
  animation-name: line-draw7;
}
.microchip__line--8 {
  animation-name: line-draw8;
}
.microchip__line--9 {
  animation-name: line-draw9;
}
.microchip__lines {
  animation-name: lines-scale;
  transform-origin: 54px 54px;
}
.microchip__spark, .microchip__wave {
  animation-timing-function: linear;
  stroke: var(--primary3);
}
.microchip__spark--1 {
  animation-name: spark1;
}
.microchip__spark--2 {
  animation-name: spark2;
}
.microchip__spark--3 {
  animation-name: spark3;
}
.microchip__spark--4 {
  animation-name: spark4;
}
.microchip__spark--5 {
  animation-name: spark5;
}
.microchip__spark--6 {
  animation-name: spark6;
}
.microchip__spark--7 {
  animation-name: spark7;
}
.microchip__spark--8 {
  animation-name: spark8;
}
.microchip__spark--9 {
  animation-name: spark9;
}
.microchip__wave--1 {
  animation-name: wave-scale1;
}
.microchip__wave--2 {
  animation-name: wave-scale2;
}

/* Animations */
@keyframes center-scale {
  from, to {
    transform: scale(0);
  }
  12.5%, 75% {
    transform: scale(1);
  }
}
@keyframes dot-scale1 {
  from, 20%, 81.25%, to {
    transform: scale(0);
  }
  32.5%, 68.75% {
    transform: scale(1);
  }
}
@keyframes dot-scale2 {
  from, 10.5%, 87.5%, to {
    transform: scale(0);
  }
  23%, 75% {
    transform: scale(1);
  }
}
@keyframes dot-scale3 {
  from, 20%, 81.25%, to {
    transform: scale(0);
  }
  32.5%, 68.75% {
    transform: scale(1);
  }
}
@keyframes dot-scale4 {
  from, 20%, 81.25%, to {
    transform: scale(0);
  }
  32.5%, 68.75% {
    transform: scale(1);
  }
}
@keyframes dot-scale5 {
  from, 11.5%, 87.5%, to {
    transform: scale(0);
  }
  24%, 75% {
    transform: scale(1);
  }
}
@keyframes dot-scale6 {
  from, 14.5%, 85%, to {
    transform: scale(0);
  }
  27%, 72.5% {
    transform: scale(1);
  }
}
@keyframes dot-scale7 {
  from, 20%, 81.25%, to {
    transform: scale(0);
  }
  32.5%, 68.75% {
    transform: scale(1);
  }
}
@keyframes dot-scale8 {
  from, 11%, 87.5%, to {
    transform: scale(0);
  }
  23.5%, 75% {
    transform: scale(1);
  }
}
@keyframes dot-scale9 {
  from, 20%, 81.25%, to {
    transform: scale(0);
  }
  32.5%, 68.75% {
    transform: scale(1);
  }
}
@keyframes line-draw1 {
  from, 93.75%, to {
    stroke-dashoffset: 59;
  }
  25%, 68.75% {
    stroke-dashoffset: 17;
  }
}
@keyframes line-draw2 {
  from, 93.75%, to {
    stroke-dashoffset: 42;
  }
  25%, 68.75% {
    stroke-dashoffset: 0;
  }
}
@keyframes line-draw3 {
  from, 93.75%, to {
    stroke-dashoffset: 59;
  }
  25%, 68.75% {
    stroke-dashoffset: 17;
  }
}
@keyframes line-draw4 {
  from, 93.75%, to {
    stroke-dashoffset: 78;
  }
  25%, 68.75% {
    stroke-dashoffset: 18;
  }
}
@keyframes line-draw5 {
  from, 93.75%, to {
    stroke-dashoffset: 60;
  }
  25%, 68.75% {
    stroke-dashoffset: 0;
  }
}
@keyframes line-draw6 {
  from, 93.75%, to {
    stroke-dashoffset: 91;
  }
  25%, 68.75% {
    stroke-dashoffset: 31;
  }
}
@keyframes line-draw7 {
  from, 93.75%, to {
    stroke-dashoffset: 60;
  }
  25%, 68.75% {
    stroke-dashoffset: 17;
  }
}
@keyframes line-draw8 {
  from, 93.75%, to {
    stroke-dashoffset: 43;
  }
  25%, 68.75% {
    stroke-dashoffset: 0;
  }
}
@keyframes line-draw9 {
  from, 93.75%, to {
    stroke-dashoffset: 60;
  }
  25%, 68.75% {
    stroke-dashoffset: 17;
  }
}
@keyframes lines-scale {
  from {
    opacity: 1;
    transform: scale(0);
  }
  12.5%, 75% {
    opacity: 1;
    transform: scale(1);
  }
  93.75%, to {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes spark1 {
  from, 27.5% {
    stroke-dashoffset: 59;
  }
  50%, 52.5% {
    stroke-dashoffset: -25;
  }
  75%, to {
    stroke-dashoffset: -109;
  }
}
@keyframes spark2 {
  from, 27.5% {
    stroke-dashoffset: 42;
  }
  50%, 52.5% {
    stroke-dashoffset: -42;
  }
  75%, to {
    stroke-dashoffset: -126;
  }
}
@keyframes spark3 {
  from, 27.5% {
    stroke-dashoffset: 59;
  }
  50%, 52.5% {
    stroke-dashoffset: -25;
  }
  75%, to {
    stroke-dashoffset: -109;
  }
}
@keyframes spark4 {
  from, 27.5% {
    stroke-dashoffset: 78;
  }
  50%, 52.5% {
    stroke-dashoffset: -42;
  }
  75%, to {
    stroke-dashoffset: -162;
  }
}
@keyframes spark5 {
  from, 27.5% {
    stroke-dashoffset: 60;
  }
  50%, 52.5% {
    stroke-dashoffset: -60;
  }
  75%, to {
    stroke-dashoffset: -180;
  }
}
@keyframes spark6 {
  from, 27.5% {
    stroke-dashoffset: 91;
  }
  50%, 52.5% {
    stroke-dashoffset: -29;
  }
  75%, to {
    stroke-dashoffset: -149;
  }
}
@keyframes spark7 {
  from, 27.5% {
    stroke-dashoffset: 60;
  }
  50%, 52.5% {
    stroke-dashoffset: -26;
  }
  75%, to {
    stroke-dashoffset: -112;
  }
}
@keyframes spark8 {
  from, 27.5% {
    stroke-dashoffset: 43;
  }
  50%, 52.5% {
    stroke-dashoffset: -43;
  }
  75%, to {
    stroke-dashoffset: -129;
  }
}
@keyframes spark9 {
  from, 27.5% {
    stroke-dashoffset: 60;
  }
  50%, 52.5% {
    stroke-dashoffset: -26;
  }
  75%, to {
    stroke-dashoffset: -112;
  }
}
@keyframes wave-scale1 {
  from, 0%, 25%, 50%, 75% {
    stroke-width: 6px;
    transform: scale(1);
  }
  10%, 35%, 60%, 85%, to {
    animation-timing-function: steps(1);
    stroke-width: 0;
    transform: scale(2);
  }
}
@keyframes wave-scale2 {
  from, 5%, 30%, 55%, 80% {
    stroke-width: 6px;
    transform: scale(1);
  }
  15%, 40%, 65%, 90%, to {
    animation-timing-function: steps(1);
    stroke-width: 0;
    transform: scale(2);
  }
}



/* IMG2 - STICKER - ROTATED */
.rotated-image {
transform: rotate(-10deg);
}
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */