<input type="checkbox" checked="checked" id="toggle" />
<section id="sect">
	<!-- <input type="checkbox" id="toggleView" checked> -->
	<input type="checkbox" id="toggleSize" />
	<table id="list">
		<caption>
			<h3>1div css loader</h3>
			<h4><label for="toggle" class="ckbx one">show <b>unnecessary efx</b> <span class="small">aka <i>increased motion</i>, like filters, etc.</span></label></h4><h4><label for="toggleSize" class="ckbx two">bigger <b>font-size</b></label></h4>
			<!-- <h4><label for="toggleView" class="ckbx three">toggle <b>view</b></label></h4> -->
		</caption>
		<tbody>
		<tr>
			<td class="no- prio">
				<h2>.loader-heart</h2>
				<div class="loader-heart"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-wifi</h2>
				<div class="loader-wifi"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-◯▢△</h2>
				<div class="loader-◯▢△"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-loader.loader-3</h2>
				<div class="loader-loader loader-3 loading"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-loader.loader-2</h2>
				<div class="loader-loader loader-2 loading"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-loader.loader-1</h2>
				<div class="loader-loader loader-1 loading"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-loader</h2>
				<div class="loader-loader loading"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-blob</h2>
				<div class="loader-blob loading"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-inzoom</h2>
				<div class="loader-inzoom"></div>
			</td>
			<td class="no- prio">
				<h2>.loader-ball</h2>
				<div class="loader-ball"></div>
			</td>
		<td class="no- prio flex">
				<h2>.loader-playflix-button</h2>
				<button class="loader-playflix-button" data-icon="▶︎" data-label="Next"></button>
			</td>
			<td class="no- prio">
				<h2>.loader-3-dots</h2>
				<div class="loader-3-dots"></div>
			</td>
			<td>
				<h2>.loader-drip</h2>
				<div class="loader-drip">Loading</div>
			</td>
				<td>
				<h2>.loader-gears</h2>
				<div class="loader-gears"></div>
			</td>
			<td>
				<h2>.loader-pendulums</h2>
				<div class="loader-pendulums"></div>
			</td>
			<td>
				<h2>.loader-wheel-of-fortune</h2>
				<div class="loader-wheel-of-fortune">▼</div>
			</td>
			<td>
				<h2>.loader-progress-bar</h2>
				<div class="loader-progress-bar"></div>
			</td>
			<td>
				<h2>.loader-bricks</h2>
				<div class="loader-bricks"></div>
			</td>
			<td>
				<h2>.loader-funky-bar</h2>
				<div class="loader-funky-bar"></div>
			</td>
			<td>
				<h2>.loader-wobble</h2>
				<div class="loader-wobble">loading</div>
			</td>
			<td>
				<h2>.loader-drippy</h2>
				<div class="loader-drippy"></div>
			</td>
			<td>
				<h2>.loader-radar</h2>
				<div class="loader-radar"></div>
			</td>
			<td>
				<h2>.loader-bubble-disks</h2>
				<div class="loader-bubble-disks"></div>
			</td>
			<td>
				<h2>.loader-cycle-disks</h2>
				<div class="loader-cycle-disks"></div>
			</td>
			<td>
				<h2>.loader-3-bars</h2>
				<div class="loader-3-bars"></div>
			</td>
				<td>
					<h2>.loader-stopwatch</h2>
				<div class="loader-stopwatch"></div>
			</td>
			<td>
				<h2>.loader-peace-sign</h2>
				<div class="loader-peace-sign"></div>
			</td>
			<td>
				<h2>.loader-beaker</h2>
				<div class="loader-beaker"></div>
			</td>
			<td>
				<h2>.loader-floppy-disk</h2>
				<div class="loader-floppy-disk"></div>
			</td>
			<td>
				<h2>.loader-zoom</h2>
				<div class="loader-zoom"></div>
			</td>
			<td>
				<h2>.loader-spinna</h2>
				<div class="loader-spinna"></div>
			</td>
			<td>
				<h2>.loader-pacman</h2>
				<div class="loader-pacman"></div>
			</td>
			<td>
				<h2>.loader-pulsing</h2>
				<div class="loader-pulsing"></div>
			</td>
			<td>
				<h2>.loader-battery</h2>
				<div class="loader-battery"></div>
			</td>
			<td>
				<h2>.loader-vinyl</h2>
				<div class="loader-vinyl"></div>
			</td>
			<td data-3d="true">
				<h2>.loader-triangle</h2>
				<div class="loader-triangle">loading</div>
			</td>
			<td data-3d="true">
				<h2>.loader-wheel</h2>
				<div class="loader-wheel"></div>
			</td>
			<td class="no-prio" data-3d="true">
				<h2>.loader-disc-bouncer</h2>
				<div class="loader-disc-bouncer"></div>
			</td>
			<td class="no-prio" data-3d="true">
				<h2>.loader-butterfly</h2>
				<div class="loader-butterfly"></div>
			</td>
			<td class="no-prio" data-3d="true">
				<h2>.loader-blow-up</h2>
				<div class="loader-blow-up"></div>
			</td>
			<td data-3d="true">
				<h2>.loader-road</h2>
				<div class="loader-road"></div>
			</td>
			<td>
				<h2>.loader-wiggle</h2>
				<div class="loader-wiggle"></div>
	</tr>
		</tbody>
	</table>
</section>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
	<defs>
		<filter id="filter-goo">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
			<feComposite in="SourceGraphic" operator="atop" in2="goo"></feComposite>
		</filter>
		<filter id="filter-goo2">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 29 -14" result="goo"></feColorMatrix>
			<feComposite in="SourceGraphic" noperator="atop" in2="goo"></feComposite>
		</filter>
		<filter id="filter-goo3">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -11" result="goo"></feColorMatrix>
			<feComposite in="SourceGraphic" noperator="atop" in2="goo"></feComposite>
		</filter>
 <filter id="turbulence-1">
    <feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-2">
    <feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-3">
    <feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-4">
    <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-5">
    <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>
		<filter id="filter-outline" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
	<feMorphology operator="dilate" radius="2 2" in="SourceAlpha" result="morphology"/>
	<feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
	<feComposite in="flood" in2="morphology" operator="in" result="composite"/>
	<feMorphology operator="erode" radius="2 2" x="0%" y="0%" width="100%" height="100%" in="SourceAlpha" result="morphology1"/>
	<feComposite in="composite" in2="morphology1" operator="out" result="composite1"/>
</filter>
	</defs>
</svg>

// vars
// settings
// $fz: 16px; // size/scale of the loaders
$fz: unquote('calc(1vw + 1vh - .6vmin)');
$time: 1s; // time for delay/timing of loaders
// @media (min-width: 400px) and (max-width: 1024px) { body { $fz: calc(13px + (14 - 11) * ( (100vw - 400px) / ( 1024 - 400))); } }
// @media (min-width: 1024px) { body { $fz: 14px; } }

$unnecessary-efx: true;

$f: unquote("'Podkova', serif");
$fb: unquote("'Trebuchet MS', Helvetica, sans-serif");
// colors
$random_color: rgba(rd(255),rd(255),rd(255),.5);

$c: ( // colors
	t: transparent,
	s: #000,
	w: #fff,
	gr: desaturate(rgb(rd(120)+100,rd(120)+100,rd(120)+100), 100%),
	r: rgb(rd(255),rd(50),rd(50)),
	g: rgb(rd(50),rd(255),rd(50)),
	b: rgb(rd(50),rd(50),rd(255)),
	magenta: #f0f,
	cyan: #0ff,
	ok: #080,
	cancel: #800,
	bg: $random_color,
	cp: ( // color palette
		1: #081E3F,
		2: #083D56,
		3: #0E5F76,
		4: #19A6CF,
	),
);

i {
	font-style: oblique;
}

[class*='loader'] {
	position: relative;
	top: 40%;
	display: inline-block;
	margin: 0 auto;
	cursor: wait;
	text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	// -webkit-box-reflect: below .25em linear-gradient(rgba(#fff, .4), rgba(#fff, .1));
}
// ----------------------------------------------
// -------- loader-playfix  ---------------------------
// ----------------------------------------------

.loader-playflix-button {
	display: flex;
	font-size: .75em;
	font-family: $f;
	height: 3em;
	border-radius: .25em;
	background-color: clr(cp, 2);
	color: clr(cp, 4);
	overflow: hidden;
	counter-reset: playflix-counter 5;
	appearance: none;
	border: none;
	cursor: pointer;
	transition: all $time/4;
	animation: playflix-text $time*5 linear infinite forwards;
	
	&:hover {
		background-color: mix(clr(cp, 2), clr(cp, 3), 50%);
	}
	
	&:active {
		color: clr(w);
		
		&,
		&:after,
		&:before {
			animation: none;
			}
		&:before {
			background-color: clr(ok);
			width: calc(100% + 1em);
			counter-reset: playflix-counter 0;
		}
	}
	
	&:before,
	&:after {
		pointer-events: none;
	}
	
	&:before {
		content: attr(data-icon);
		font-size: 2em;
		line-height: 1.2;
		position: absolute;
		width: 0%;
		left: -.5em;
		top: 0;
		z-index: 0;
		text-align: left;
		padding: 0.25em;
		text-indent: .5em;
		animation: playflix $time*5 linear infinite forwards;
	}
	
	&:after {
		content: attr(data-label) '  '  counter(playflix-counter);
		font-weight: 700;
		display: block;
		font-size: 1.5em;
		line-height: 1;
		padding: .5em;
		position: relative;
		white-space: nowrap;
		animation: playflix-countdown $time*5 linear infinite forwards;
}
	
	&[data-icon]:not([data-icon=""]) { // if icon is present
		&:after {
			padding-left: 2em;
		}
	}
}

@keyframes playflix {
	0% {
		width: 0%;
		background-color: clr(cp, 3);
	}
	89% {
		width: calc(100% + .5em);
		background-color: clr(cp, 3);
	}
	89.5%, 100% {
		width: calc(100% + .5em);
		background-color: clr(ok);
	}
}

@keyframes playflix-countdown {
	0% {
		counter-increment: playflix-counter 0;
	}
	20% {
		counter-increment: playflix-counter -1;
	}
	40% {
		counter-increment: playflix-counter -2;
	}
	60% {
		counter-increment: playflix-counter -3;
	}
	80% {
		counter-increment: playflix-counter -4;
	}
	100% {
		counter-increment: playflix-counter -5;
	}
}
@keyframes playflix-text {
	0%, 89% {
			color: clr(cp, 4);
	}
	89.5%, 100% {
			color: clr(w);
	}
}


// ----------------------------------------------
// -------- loader-heart  ---------------------------
// ----------------------------------------------

.loader-heart	{
	width: 3em;
	height: 3em;
	padding: 1em;
	color: clr(cp, 1);
	background-color: currentColor;
	position: relative;
	filter: url('#filter-goo3');
	transform: rotate(315deg);
	transform-origin: center center;
	animation: heart-roll $time*10 $time*1.25 steps(4, end) infinite reverse,
		heart-colors $time*10 ease(overshot) infinite forwards alternate;
	z-index: 1;

	&:before, &:after {
      content: "";
		background-color: currentColor;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		z-index: -1;
   }
	
	--offset: 50%;
	&:before {
		transform-origin: var(--offset, 25%) 50%;
		transform: translateX(-50%);
		animation: heart-circle1 $time*2.5 ease(overshot) infinite forwards alternate;
	}
	&:after {
		transform-origin: 50% var(--offset, 25%);
		transform: translateY(-50%);
		animation: heart-circle2 $time*2.5 ease(wtf) infinite alternate;
	}
}

@keyframes heart-circle1 {
	0% {
		transform: translateX(-51%) rotate(0deg);
	}
	25% {
		transform: translateX(-51%) rotate(360deg);
	}
	50% {
		transform: translateX(0%) rotate(360deg);
	}
	75% {
		transform: translateX(51%) rotate(0deg);
	}
	100% {
		transform: translateX(51%) rotate(0deg);
	}
}
@keyframes heart-circle2 {
	0% {
		transform: translateY(51%) rotate(0deg);
	}
	25% {
		transform: translateY(51%) rotate(360deg);
	}
	50% {
		transform: translateY(0%) rotate(360deg);
	}
	75% {
		transform: translateY(-51%) rotate(0deg);
	}
	100% {
		transform: translateY(-51%) rotate(0deg);
	}
}

@keyframes heart-roll {
	0% {
      transform: rotate(-45deg);
   }
	100% {
		transform: rotate(315deg);
	}
}

@keyframes heart-colors {
	33.4% {
       color: clr(cp, 3);
   }
	67% {
       color: clr(cp, 4);
   }
	100% {
			color: clr(cp, 2);
	}
}
// ----------------------------------------------
// -------- loader-1  ---------------------------
// ----------------------------------------------

.loader-wobble { // loading circle cycle
	font-size: .8em;
	top: 50%;
	display: inline-block;
	width: 5em;
	height: 1em;
	line-height: 1.3;
	position: relative;
	color: clr(cp, 3);
	text-align: center;
	user-select: none;
	border-bottom: .1em solid;
	margin-left: -5em;
	transform: translateX(50%);
	animation: 
		loadingText $time infinite ease(wtf) alternate, 
		loadingBar $time*8 infinite ease(in-out-sine) alternate;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation:
			loadingTextMove $time infinite ease(wtf) alternate, 
			loadingText $time infinite ease(wtf) alternate, 
			loadingBar $time*8 infinite ease(in-out-sine) alternate;
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before, &:after {
		content: '';
		width: 7em;
		height: 7em;
		position: absolute;
		top: -3em;
		left: -.5em;
		right: 0;
		bottom: 0;
		border-radius: 50%;
	}
	
	&:before {
		box-shadow: inset 0 0 0 .2em rgba(clr(cp, 2), .5);
		animation: loadingInner $time infinite ease(wtf) alternate;
	}
	
	&:after {
	color: clr(cp, 2); //currentColor; 
	border-radius: 50%;
	border: .2em dashed;
	border-top: .2em solid clr(cp, 3);
	transform-origin: center center;
	animation: loading $time infinite ease(full-circle);
	}
}
// -------- loader-1 keyframes ------------------
@keyframes loading {
	to {
		transform: rotate(360deg);
	}
}

@keyframes loadingInner {
	to {
		transform: scale(0);
	}
}

@keyframes loadingText {
	0% {
		color: clr(cp, 3);
		width: 0em;
	}
	100% {
		color: clr(cp, 1);
		width: 4em;
	}
}

@keyframes loadingTextMove {
	0% {
		text-indent: 1em;
	}
	100% {
		text-indent: -1em;
	}
}

@keyframes loadingBar {
	0% {
		width: 0em;
	}
	100% {
		width: 6em;
	}
}

// ----------------------------------------------
// -------- loader-2 ----------------------------
// ----------------------------------------------

.loader-bricks { // bricks loader
	position: relative;
	display: inline-block;
	font-size: 1rem;
	width: 8em;
	height: 1em;
	z-index: 1;
	border-style:  solid;
	border-width: .1rem 0;
	color: clr(cp, 4);
	background-image: linear-gradient(
		to right,
		transparent 0%,
		transparent 49.9%,
		clr(cp,3) 50%,
		clr(cp,3) 100%
	);
	background-size: 25%;
	animation: loaderBar $time infinite linear;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.3em .3em .3em rgba(clr(s), .5));
	}
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		right: 0;
		z-index: 0;
		width: 1em;
		height: 1em;
		margin-top: -.1rem;
		border: .1rem solid clr(cp, 4);
		border-width: .1rem 0;
		color: clr(cp, 3);
		background-color: currentColor;
		animation: loaderBox $time*2 infinite linear;
	}
	
	&:after {
		animation-delay:  $time;
	}
}
// -------- loader-2 keyframes ------------------

@keyframes loaderBar {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 2em;
	}
}
@keyframes loaderBox {
	0% {
		color: clr(cp, 3);
		width: 1em;
		right: 0;
		top: 0;
		border-color: clr(cp,4);
	}
	27% {
		color: clr(cp, 3);
		width: 1em;
		right: -1em;
		top: 0;
		border-color: transparent;
		// filter: blur(0px);
	}
	37.5% {
		color: clr(cp, 2);
		width: 1em;
		right: -1em;
		top: -1em;
		border-color: transparent;
		// filter: blur(1px);
	}
	// 50% {
	// 	color: clr(cp, 2);
	// 	width: 1em;
	// 	right: 4em;
	// 	top: -1em;
	// 	border-color: transparent;
	// }
	50% {
	// 100% {
		color: clr(cp, 2);
		width: 1em;
		right: 8em;
		top: -1em;
		border-color: transparent;
		// filter: blur(1px);
	}
	55% {
		color: clr(cp, 3);
		width: 1em;
		right: 8em;
		top: 0em;
		border-color: transparent;
		// filter: blur(0px);
	}
	100% {
		color: clr(cp, 3);
		width: 0em;
		right: 7em;
		top: 0;
		border-color: clr(cp,4);
	}
}
// ----------------------------------------------
// -------- loader-3 ----------------------------
// ----------------------------------------------

.loader-funky-bar { // funky loader
	display: inline-block;
	width: 5em;
	height: 1em;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	color: clr(w);
	box-shadow: 0 0 0 2px clr(cp, 1),
		0 0 0 4px clr(cp, 3);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.25em .25em .25em rgba(clr(s), .5));
	}
	
	&:before {
		content: 'loading...';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		animation: loaderText $time infinite alternate ease(perpetuum);

		#toggle:checked ~ #sect & { // unnecessary efx
			animation: 
				loaderText $time*2 infinite alternate ease(perpetuum),
				textIndent $time infinite alternate ease(perpetuum);
			
		}
	}
	
	&:after {
		content: '';
		width: 11em;
		height: 11em;
		position: absolute;
		left: -6em;
		top: -5em;
		z-index: 1;
		box-shadow: 
			inset 0 0 0 0.5em clr(cp, 3),
			inset 0 0 0 1em clr(cp, 2),
			inset 0 0 0 1.5em clr(cp, 3),
			inset 0 0 0 2em clr(cp, 2),
			inset 0 0 0 2.5em clr(cp, 3),
			inset 0 0 0 3em clr(cp, 2),
			inset 0 0 0 3.5em clr(cp, 3),
			inset 0 0 0 4em clr(cp, 2),
			inset 0 0 0 4.5em clr(cp, 3),
			inset 0 0 0 5em clr(cp, 2),
			inset 0 0 0 5.5em clr(cp, 3),
			inset 0 0 0 6em clr(cp, 2);
		border-radius: 16em 14em / 16em 20em;
		transform-origin: center center;
		animation: loaderRotate $time*5 linear infinite, loaderMover $time*15 linear infinite;
	}
}
// -------- loader-3 keyframes ------------------
@keyframes loaderRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes loaderMover {
	from {
		left: -11em;
	}
	to {
		left: -6em;
	}
}
@keyframes textIndent {
	from {
		text-indent: -2em;
	}
	to {
		text-indent: 2em;
	}
}
@keyframes loaderText {
	from {
		color: clr(cp, 4);
	}
	to {
		color: clr(cp, 1);
	}
}

// ----------------------------------------------
// -------- loader-4 ----------------------------
// ----------------------------------------------
.loader-drippy { // drippy drop loader
	display: inline-block;
	position: relative;
	width: 3em;
	height: 3em;
	top: 30%;
	border-radius: 50% 0em 50% 50%;
	box-shadow: 
		0 0 0 .25em clr(cp, 1),
		0 0 0 .5em clr(cp, 3);
	transform: rotate(135deg);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		box-shadow: 
		0 0 0 .25em clr(cp, 1),
		0 0 0 .5em clr(cp, 3),
		-.2em -.2em .2em .5em rgba(clr(s), .25);
	}
	
	&:before {
		content: '';
		position: absolute;
		display: block;
		border-radius: 50% 0em 50% 50%;
		overflow: hidden;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: 
			repeating-linear-gradient(
				45deg,
				clr(cp, 2) 0,
				clr(cp, 2) 9px,
				transparent 10px,
				transparent 19px
			);
		background-position: center center;
		background-size: 100% 100%;
		animation: loaderZoom $time ease(downhill) infinite;
	}
	
	&:after {
		content: '';
		width: 1em;
		height: 1em;
		position: absolute;
		bottom: 90%;
		left: 90%;
		z-index: -2;
		border-radius: 50%;
		background-color: clr(cp, 2);
		box-shadow: 
			inset -0.05em -0.25em .05em clr(cp, 3);
		animation: loaderDrip $time*3 ease(gravity) infinite forwards;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			box-shadow: 
				inset -0.05em -0.25em .05em clr(cp, 3),
				-.2em -.2em .2em rgba(clr(s), .25);
		}
	}
}
// -------- loader-4 keyframes ------------------

@keyframes loaderZoom {
	from {
		background-size: 200% 200%;
	}
	to {
		background-size: 141% 141%;
	}
}

@keyframes loaderDrip {
	0% {
		bottom: 105%;
		left: 105%;
		width: 0.1em;
		height: 0.1em;
		border-radius: 3em 3em 3em 3em;
		opacity: 1;
	}
	70% {
		bottom: 120%;
		left: 120%;
		width: 1em;
		height: 1em;
		border-radius: 6em 6em 6em 0;
		opacity: 1;
	}
	80% {
		bottom: 130%;
		left: 130%;
		border-radius: 3em 6em;
		opacity: 1;
	}
	94% {
		bottom: 150%;
		left: 150%;
		border-radius: 2em 6em;
		opacity: 1;
	}
	100% {
		bottom: 150%;
		left: 150%;
		border-radius: .5em 6em;
		opacity: 0;
	}
}

// ----------------------------------------------
// -------- loader-5 ----------------------------
// ----------------------------------------------
.loader-stopwatch { // grannys clock loader
	display: inline-block;
	position: relative;
	top: 30%;
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: .38em dotted rgba(clr(cp, 3), .5);
	transform-origin: center -300%;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: rotateClock 5s infinite ease-in-out;
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before {
		content: '';
		position: absolute;
		left: 50%;
		top: 2.14em;
		z-index: 1;
		display: block;
		height: 2em;
		width: 0;
		transform-origin: center top;
		box-shadow: 0 0 0 .11em clr(cp,3);
		animation: rotatePointer $time*3 infinite steps(30) linear;
	}
	
	&:after {
		content: '\2022';
		position: absolute;
		left: .7em;
		top: .7em;
		width: 3em;
		height: 3em;
		line-height: 0;
		color: transparent;
		text-indent: 3em;
    text-shadow: -3px -5px 3px clr(cp,4);
		border-radius: 50% 0 50% 50%;
		border: 3px solid clr(cp, 3);
		background-color: clr(cp, 2);
		transform-origin: center center;
		animation: rotatePointer $time*10 infinite linear;
	}
}
// -------- loader-5 keyframes ------------------
@keyframes rotatePointer {
	to {
		transform: rotate(359deg);
	}
}

@keyframes rotateClock {
	0%, 100% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
}

// ----------------------------------------------
// -------- loader-6 ----------------------------
// ----------------------------------------------
.loader-peace-sign { // peace sign loader
	display: inline-block;
	position: relative;
	border-radius: 50%;
	border: .5em solid currentColor;
	top: 30%;
	width: 5em;
	height: 5em;
	color: clr(cp, 2);
	text-align: center;
	background-color: rgba(clr(cp, 3),.75);
	animation: peace $time*2 infinite ease(wtf) alternate,
		boxFill $time*15 infinite ease-out;
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		display: block;
	}
	
	&:before { // |
		top: 0;
		left: 1.8em;
		height: 4.2em;
		width: 0;
		//box-shadow: 0 0 0 .25em currentColor;
		border-left: solid .5em currentColor;
	}
	
	&:after { // L
		height: 2.5em;
		width: 2.5em;
		bottom: -.5em;
		left: .78em;
		transform-origin: center center;
		border: solid currentColor;
		border-width: .5em .5em 0 0;
		transform: rotate(-45deg);
	}
}
// -------- loader-6 keyframes ------------------
@keyframes peace {
	to {
		color: clr(cp, 2);
		transform: scale(1.2) rotate(-10deg);
	}
}

@keyframes boxFill {
	0% {
		box-shadow: 
			inset 0 5em 0 clr(cp, 1),
			0 0 0 clr(cp, 2);
	}
	90%, 93%, 100% {
		box-shadow: 
			inset 0 0 0 clr(cp, 1),
			0 0 0 clr(cp, 2);
	}
	92% {
		box-shadow: 
			inset 0 0 0 clr(cp, 1),
			0 0 2em .5em clr(cp, 2);
	}
}

// ----------------------------------------------
// -------- loader-7 ----------------------------
// ----------------------------------------------
.loader-bubble-disks { // two bubbling circles
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 3em;
	height: 3em;
	transform: translateX(-50%);
	
	&:before,
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
		color: rgba(clr(cp, 3), .25);
		background-color: currentColor;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			box-shadow: .1em .1em .1em rgba(clr(s), .25);
		}
		
		animation: scaleCircles $time*2 infinite ease(perpetuum) alternate;
	}
	
	&:after {
		animation-delay: -$time;
	}
}
// -------- loader-7 keyframes ------------------
@keyframes scaleCircles {
	0% {
		z-index: 1;
		// color: rgba(clr(cp, 3), .25);
		transform: scale3d(0,0,0);
	}
	100% {
		z-index: 2;
		// color: rgba(clr(cp, 3), .25);
		transform: scale3d(1,1,1);
	}
}

// ----------------------------------------------
// -------- loader-8 ----------------------------
// ----------------------------------------------
.loader-cycle-disks { // two discs
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 4em;
	height: 2em;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: url('#filter-goo2');
	}
	
	&:before,
	&:after {
		content: '';
		left: 0;
		position: absolute;
		width: 2em;
		height: 2em;
		border-radius: 50%;
		background-color: clr(cp, 3);
		// box-shadow: .25em .25em .25em rgba(clr(s), .25);
		animation: movingCircles $time*2 infinite ease-in-out;
	}
	
	&:after {
		animation-delay: -$time;
		background-color: clr(cp, 2);
	}
}
// -------- loader-8 keyframes ------------------
@keyframes movingCircles {
	0% {
		z-index: 1;
		transform: translate(0, 0);
	}
	50% {
		z-index: 1;
		transform: translate(120%, 0);
	}
	50.1% {
		z-index: 0;
		transform: translate(120%, 0);
	}
	100% {
		z-index: 0;
		transform: translate(0, 0);
	}
}

// ----------------------------------------------
// -------- loader-9 ----------------------------
// ----------------------------------------------
.loader-progress-bar { // progress bar mac like
	width: 6em;
	height: 1.5em;
	border-radius: .5em;
	border: .125em solid;
	color: clr(cp, 3);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before, &:after {
		content: '';
		top: .2em;
		left: .2em;
		right: .2em;
		bottom: .2em;
		border-radius: .25em;
		display: block;
		position: absolute;
		overflow: hidden;
	}
		
	&:after {
		right: 100%;
		animation: 
			loaderBarInfinite $time*10 infinite linear,
			loaderBarScroll $time*10 infinite linear;
		box-shadow: 
			inset 0 .5em .5em rgba(clr(cp,4), .25),
			inset 0 -.5em .5em rgba(clr(cp,1), .5);
		background-image: repeating-linear-gradient(
		45deg,
		clr(cp, 2) 0px,
		clr(cp, 2) 4px,
		clr(cp, 3) 5px,
		clr(cp, 3) 9px);
		background-size: 26px 13px;
	}
}
// -------- loader-10 keyframes -----------------
@keyframes loaderBarInfinite {
	from {
		background-position: 104px 0;
	}
	to {
		background-position: -104px 0;
	}
}
@keyframes loaderBarScroll {
	to {
		right: 2%;
	}
}

// ----------------------------------------------
// -------- loader-10 ---------------------------
// ----------------------------------------------
.loader-3-bars { // 3 bars loader
	color: clr(cp, 3);
	// box-shadow:
	// 	inset -1px -1px 3px rgba(clr(cp,3), .2),
	// 	inset 1px 1px 3px rgba(clr(s), .2);
	width: .75em;
	height: 2em;
	top: 60%;
	left: 1em;
	border-radius: 2px;
	background-color: clr(cp, 2);
	transform: rotate(180deg);
	transform-origin: center top;
	animation: da3bars $time infinite ease(downhill);

	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(-.15em -.15em .15em rgba(clr(s), .25));
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		width: .75em;
		height: 2em;
		display: inline-block;
		color: clr(cp, 3);
		// box-shadow:
		// 	inset -1px -1px 3px rgba(clr(cp,3), .2),
		// 	inset 1px 1px 3px rgba(clr(s), .2);
		background-color: clr(cp, 2);		
		border-radius: 2px;
		left: 1em;
		top: 0;
		animation: da3bars $time infinite ease(downhill);
		animation-delay: $time/10;
	}
	
	&:after {
		left: 2em;
		animation-delay: $time/5;
	}
}
// -------- loader-10 keyframes -----------------

@keyframes da3bars {
	0%, 100% {
		height: 2em;
		background-color: clr(cp, 2);		
		// color: clr(cp, 4);		
	}
	75% {
		height: 1em;
		background-color: clr(cp, 2);		
		// color: clr(cp, 3);		
	}
}

// ----------------------------------------------
// -------- loader-11 ---------------------------
// ----------------------------------------------
.loader-radar { // radar loader
	width: 4em;
	height: 4em;
	top: 33%;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid clr(cp, 3);
	z-index: 1;
	background-color: rgba(clr(cp, 2), .2);
	background-image:
		repeating-radial-gradient(
			clr(t) 0,
			clr(t) .39em,
			rgba(clr(cp,2), .5) .45em,
			rgba(clr(cp,2), .5) .5em
		);

	#toggle:checked ~ #sect & { // unnecessary efx
		background-image:
			repeating-radial-gradient(
				clr(t) 0,
				clr(t) .39em,
				rgba(clr(cp,2), .5) .45em,
				rgba(clr(cp,2), .5) .5em
			),
			repeating-radial-gradient(
				clr(t) 0,
				clr(t) .39em,
				rgba(clr(s), .25) .45em,
				rgba(clr(s), .25) .5em
			);
		background-position: 0px 0px, 1px 1px;
			box-shadow: 
				.25em .25em .25em rgba(clr(s), .25),
				inset .25em .25em .25em rgba(clr(s), .25);
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		display: block;
	}
	
	&:before {
		z-index: 0;
		width: 2.5em;
		height: 2em;
		top: 50%;
		left: 50%;
		transform-origin: left top;
		border-left: .1em solid clr(cp, 4);
		background-image: linear-gradient(
			to right,
			rgba(clr(cp, 2), .75) 0%,
			transparent 85%
		);
		// box-shadow: inset 0 .25em .5em clr(cp, 1);
		animation: radar $time*2 infinite linear;
	}
	
	&:after {
		left: 62%;
		top: 34%;
		width: 2px;
		height: 2px;
		border-radius: 50%;
		background-color: currentColor;
		animation:
			radarDotGlow $time*2 infinite linear,
			radarDotMove $time*15 infinite ease(impetus);
	}
}
// -------- loader-11 keyframes -----------------
@keyframes radar {
	to {
		transform: rotate(359deg);
	}
}

@keyframes radarDotGlow {
	0%, 59.9%, 87%, 100% {
		color: rgba(clr(cp, 4), .33);
		box-shadow: 0 0 .1em .05em currentColor;
	}
	62% {
		color: rgba(clr(cp, 4), 1);
		box-shadow: 0 0 .1em .1em currentColor;
	}
}

@keyframes radarDotMove {
	0% {
		top: 0%;
		left: 85%;
	}
	40% {
		top: 30%;
		left: 70%;
	}
	100% {
		top: 50%;
		left: 50%;
	}
}

// ----------------------------------------------
// -------- loader-12 ---------------------------
// ----------------------------------------------

.loader-beaker { // laboratory glass
	top: 30%;
	width: 2em;
	height: 4em;
	border-radius: 5%;
	border: .15em solid clr(cp, 1);
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 .2em 0 .2em clr(cp, 3);
	
		#toggle:checked ~ #sect & { // unnecessary efx
			// filter: url('#filter-goo2');
			filter: drop-shadow(-.2em .2em .2em rgba(clr(cp, 3), .3)) url('#filter-goo2');
			animation: pour $time*15 infinite ease(liquid);
			
	}

	&:before {
		content: '';
		position: absolute;
		z-index: -1;
		left: -1.5em;
		top: 100%;
		width: 6em;
		height: 6em;
		background-color: rgba(clr(cp, 2), .75);
		border-radius: 66% 100% 100% 66% / 50% 150% 100% 150%;
		animation: 
			waveRot $time*15 infinite ease(liquid);
	}
	
	&:after {
		content: '        100\a            75\a            50\a            25';
		white-space: pre;
		text-align: left;
		font-size: .5em;
		font-weight: bold;
		line-height: 2.3;
		color: clr(cp, 3);
		position: absolute;
		left: 0;
		top: -.8em;
		bottom: 0;
		right: 50%;
		@include mix(12);
		background-image: repeating-linear-gradient(
			to bottom,
			clr(cp, 2) 0,
			clr(cp, 2) 1px,
			clr(t) 2px,			
			clr(t) 9px			
		);
		background-position-y: .9em;
	}
}

@keyframes waveRot {
	to {
		transform: translateY(-70%) rotate(-1440deg);
	}
}
@keyframes waveRot2 {
	to {
		transform: translateY(-65%) rotate(-1080deg);
	}
}
@keyframes pour {
	0%, 90%, 100% {
		transform: rotate(0deg);
	}
	15% {
		transform: rotate(45deg);
	}
}

// ----------------------------------------------
// -------- loader-13 ---------------------------
// ----------------------------------------------

.loader-floppy-disk {
	border: .2em solid clr(cp, 3);
	top: 30%;
	width: 3em;
	height: 3em;
	border-radius: 0 10px 0 0;
	background-image: repeating-linear-gradient(
		to bottom,
		clr(cp, 3) 0,
		clr(cp, 3) 1px,
		clr(t) 2px,
		clr(t) 3px,
		clr(cp, 3) 5px,
		clr(t) 6px
	);
	background-size: 7px 12px;
	background-repeat: no-repeat;
	background-position: 42% 0%;

	#toggle:checked ~ #sect & { // unnecessary efx
		box-shadow: .2em .2em .2em rgba(clr(s), .3);
}

	&:before {
		content: 'HD';
		line-height: 1.4;
		font-weight: 700;
		color: clr(cp, 1);
		position: absolute;
		left: 8%;
		bottom: -.15em;
		width: 80%;
		height: 1.6em;
		border-radius: .1em .1em 0 0;
		background-color: clr(cp, 2);
		border: .2em solid clr(cp, 3);
		transform: rotate(180deg);
		animation: floppyLabel $time*10 infinite linear;
	}
	
	&:after {
		content: '';
		position: absolute;
		left: .65em;
		top: -.1em;
		width: 1.5em;
		height: 1.2em;
		border-radius: .1em .1em 0 0;
		border: .3em solid clr(cp, 3);
		box-shadow: inset .43em 0 0 0 clr(cp, 3);
		animation: floppy $time infinite linear alternate;
	}
}

@keyframes floppy {
	to {
		transform: translateX(-30%);
	}
}

@keyframes floppyLabel {
	from {
		box-shadow: inset 0 0em 0 rgba(clr(cp, 3), .75);
	}
	to {
		box-shadow: inset 0 1.3em 0 rgba(clr(cp, 3), .75);
	}
}
// ----------------------------------------------
// -------- loader-13 ---------------------------
// ----------------------------------------------

.loader-zoom {
	width: 2em;
	height: 2em;

	#toggle:checked ~ #sect & { // unnecessary efx
	// @include mix(7);
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .3));
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		border: 2px solid clr(cp, 3);
		background-color: rgba(clr(cp, 2), .5);
		animation: boxZoom $time*2 infinite ease(overshot) alternate;
	}
	
	&:before {
	}
	
	&:after {
		// animation-delay: $time;
		border-radius: 100%;
		animation-direction: alternate-reverse;
	}
}

@keyframes boxZoom {
	from {
		z-index: 1;
		background-color: rgba(clr(cp, 1), 1);
		transform: /* translate(30%, -30%) */ scale(.5) rotateX(180deg) /* rotateY(0deg) rotateZ(-180deg) */;
	}
	to {
		z-index: 0;
		border-radius: 10%;
		transform: scale(1.5) rotateX(0deg) rotateY(180deg)/*  rotateZ(180deg) */;
	}
}

// ----------------------------------------------
// -------- loader-14 ---------------------------
// ----------------------------------------------

.loader-spinna {
	width: 4em;
	height: 4em;
	top: 25%;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	background-color: rgba(clr(cp, 1), 1);
	
	&:before, &:after {
		content: '';
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 50%;
		z-index: 1;
	}
	
	&:before {
		border: 3px solid rgba(clr(cp,1), 0);
		box-shadow: inset 0 0 0 3em rgba(clr(cp,1), 1);

		#toggle:checked ~ #sect & { // unnecessary efx
		border: 3px dotted rgba(clr(cp,1), 1);
		}
	}
	
	&:after {
		z-index: 0;
		border-width: 10px;
		border-style: solid;
		border-image: linear-gradient(to bottom, clr(cp, 4) 0%, /* clr(t) 80%, */ clr(t) 100%);
		border-image-slice: 0 0 0 20;
		animation: spinnaRot $time infinite linear;
	}
}

@keyframes spinnaRot {
	to {
		transform: rotate(359deg);
	}
}


// ----------------------------------------------
// -------- loader-15 ---------------------------
// ----------------------------------------------

.loader-pacman {
	// display: none;
	width: 7em;
	height: .75em;
	// border-top: 3px dotted clr(cp, 2);
  background: 
    repeating-radial-gradient(clr(cp, 2), clr(cp, 2) .2em, transparent .2em, transparent 100%);
  background-size: .8em .8em;
	animation:
		pac-dots $time*5 linear infinite;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .3));
	}
	
	&:before, &:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: -.615em;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		border: 1em solid clr(cp, 3);
	}
	
	&:before {
		border-color:  clr(t) clr(cp, 3) clr(cp, 3) clr(t);
		animation: pac-top $time/2 linear infinite alternate;
	}
	
	&:after {
		border-color: clr(cp, 3) clr(t) clr(t) clr(cp, 3);
		top: auto;
		bottom: -.615em;
		animation: pac-bot $time/2 linear infinite alternate;
	}
}
@keyframes pac-dots {
	to {
		background-position: -200% 0;
	}
}
@keyframes pac-move {
	to {
				width: 1em;
	}
}
@keyframes pac-top {
	from {
		transform: rotate(0deg + 45);
	}
	to {
		transform: rotate(60deg + 45);
	}
}
@keyframes pac-bot {
	from {
		transform: rotate(0deg + 45);
	}
	to {
		transform: rotate(-60deg + 45);
	}
}

// ----------------------------------------------
// -------- loader-16 ---------------------------
// ----------------------------------------------

.loader-pulsing {
	border-radius: 50%;
	background-color: currentColor;
	width: 1.5em;
	height: 1.5em;
	color: clr(cp, 2);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: pulseColor $time*3 ease infinite;
	}	
	&:before, &:after {
		content: '';
		position: absolute;
		top: 0;
		color: clr(cp, 2);
		background-color: currentColor;
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
		transition: all $time;
		animation: pulse $time*3 ease-out infinite;
	}
	
	&:after {
		animation-delay: $time/2.5;
	animation-timing-function: ease(pendulum);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0);
		color: clr(cp, 2);
	}
	75%, 100% {
		transform: scale(4);
		color: clr(t);
	}
}
@keyframes pulseColor {
	50%, 90% {
		color: clr(cp, 2);
	}
	70% {
		color: clr(cp, 3);
	}
}

// ----------------------------------------------
// -------- loader-16 ---------------------------
// ----------------------------------------------
.loader-battery {
	top: 25%;
	width: 2em;
	height: 5em;
	border: .2em solid;
	border-radius: .25em;
	z-index: 1;
	color: clr(cp, 2);
	animation: batteryColor $time*10 linear infinite;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		// transform: rotate(90deg);
		filter: drop-shadow(.3em .3em .3em rgba(clr(s), .3));
	}
	&:before, &:after {
		content: '';
		position: absolute;
		display: inline-block;
	}
	
	&:before {
		@include mix(8);
		content: '+\a\a\a-';
		white-space: pre;
		// position: fixed;
		padding-top: .3em;
		line-height: 1.15;
		font-weight: bold;
		border: .1em solid;
		border-width: .2em 0 0 0;
		width: 1em;
		left: 50%;
		top: -.45em;
		z-index: 4;
		border-radius: .1em .1em 0 0;
		transform: translateX(-50%);
	}
	
	&:after {
		// width: 100%;
		// height: 100%;
		top: .2em;
		left: .2em;
		right: .2em;
		bottom: .2em;
		z-index: 1;
		box-shadow: inset 0 0 0;
		animation: batteryFill $time*10 linear infinite;
	}
}

@keyframes batteryFill {
	to {
		box-shadow: inset 0 -4.5em 0;
	}
}

@keyframes batteryColor {
	96.5% {
		color: clr(cp, 3);
	}
	97%, 99% {
		color: clr(cp, 4);
	}
}

// ------------------------------------
// -----------------------------------

.loader-vinyl {
	width: 4em;
	height: 4em;
	top: 28%;
	z-index: 1;
	border-radius: 50%;
	overflow: hidden;
	border: .2em solid clr(cp, 2);
		background-image:
			repeating-radial-gradient(
				clr(t) 0px,
				clr(t) 1px,
				rgba(clr(cp, 2), .3) 2px,
				rgba(clr(cp, 2), .3) 3px
			);
	background-position: 0 0;
	// animation: grooves $time linear infinite;

	&:before {
		position: absolute;
		content: '';
		top: 0.8em;
    left: -0.65em;
		width: 0;
		height: 0;
		display: block;
    border-width: 1em 2.5em;
		border-style: solid;
    border-color: transparent rgba(clr(cp, 3), .6);
		animation: lightHouseTurn $time*3 linear infinite;
	}
	
	&:after {
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: -.2em;
		border-radius: 50%;
		background-image:
			radial-gradient(
				clr(cp, 1) 0%,
				clr(cp, 2) 7%,
				clr(cp, 2) 25%,
				clr(t) 25.1%
			),
		;
	}
}

@keyframes lightHouseTurn {
	to {
		transform: rotate(359deg);
	}
}

@keyframes grooves {
	from {
		background-image:
			repeating-radial-gradient(
				clr(t) 0px,
				clr(t) 2px,
				clr(cp, 2) 3px,
				clr(cp, 2) 5px
			);
	}
	
	to {
		background-image:
			repeating-radial-gradient(
				clr(cp,2) 0px,
				clr(cp,2) 1px,
				clr(t) 2px,
				clr(t) 4px,
				clr(cp,2) 5px,
				clr(cp,2) 6px
			);
	}
}
// ----------------------------------------------
// -------- loader-18 ---------------------------
// ----------------------------------------------

td[data-3d] {
	perspective: 600px;
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: drop-shadow(.2em .2em .2em rgba(clr(s), .2));
	}
}

.loader-triangle {
	width: 4em;
	height: 1.5em;
	line-height: 1.5;
	color: clr(cp, 4);
	background-color: clr(cp, 2);
	// transform: rotateY(80deg);
	transform-style: preserve-3d;
	transform-origin: center center -1.15em;
	animation:
		triRot $time*3 linear infinite reverse,
		reflex $time*3 linear infinite reverse;

	&:before, &:after, & {
		background-size: 12em 2em;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			text-shadow: 2px 2px 2px rgba(clr(s), .5);
			background-image: repeating-linear-gradient(
					to right,
					rgba(clr(s), .15) 0em,
					rgba(clr(s), .15) 3em,
					clr(t) 4.5em,
					clr(t) 7.5em,
					rgba(clr(w), .05) 9em,
					rgba(clr(w), .05) 13em
				);
		}
	}
	
	&:before, &:after {
		// backface-visibility: hidden;
		background-color: clr(cp, 2);
		position: absolute;
		width: 4em;
		height: 1.5em;
		top: 0;
		animation:
			reflex $time*3 linear infinite reverse;
		}
	
	&:before {
		content: 'wait…';
		left: -100%;
		transform-origin: right center;
		transform: rotateY(-121deg);
		animation-delay: -$time;
	}
	
	&:after {
		content: 'please';
		right: -100%;
		transform-origin: left center;
		transform: rotateY(120deg);
		animation-delay: -$time*2;
	}
}

// @keyframes triRot {
// 	0%, 2.9% {
// 		transform: rotateY(0deg);
// 	}
// 	30.3%, 36.3% {
// 		transform: rotateY(120deg);
// 	}
// 	63.6%, 69.6% {
// 		transform: rotateY(240deg);
// 	}
// 	96.9%, 100% {
// 		transform: rotateY(360deg);
// 	}
// }
@keyframes triRot {
	0%{
		transform: rotateY(0deg);
	}
	33.3% {
		transform: rotateY(120deg);
	}
	66.6% {
		transform: rotateY(240deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes reflex {
	0% {
		background-position-x: -4em;
	}
	100% {
		background-position-x: -16em;
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
td[data-3d] {
	perspective: 600px;
}

.loader-road {
	font-size: .66em;
	z-index: 1;
	top: 45%;
	width: 4em;
	height: 28em;
	border-style: solid;
	border-width: 0 .2em;
	color: clr(cp, 3);
	background-color: rgba(clr(cp, 2), .2);
	transform-style: preserve-3d;
	transform: rotateX(87deg);
	transform-origin: center top;
	
	&:before, &:after {
		content: '';
		position: absolute;
	}
	
	&:before {
		content: '--------';
		white-space: pre;
		line-height: .5;
		width: .2em;
		left: 1.8em;
		z-index: 0;
		top: 0;
		bottom: 0;
		text-indent: -1.75em;
		font-weight: bold;
		background-image: repeating-linear-gradient(
			to bottom,
			clr(cp, 3) 0em,
			clr(cp, 3) 2em,
			clr(t) 2.01em,
			clr(t) 4em
		);
		background-size: 2em 4em;
		background-position: 0 0;
		animation: 
			middleTrack $time linear infinite,
			middleTrackText $time*8 linear infinite,
			;
	}
	
	&:after {
		font-size: .5em;
		content: 'loading';
		line-height: 1.2;
		border: .2em solid clr(cp, 3);
		color: clr(cp, 4);
		border-width: .2em .2em 0;
		height: 3.75em;
		z-index: 2;
		top: 0; //27em;
		left: -.2em;
		right: -.2em;
		border-radius: 1em 1em 0 0;
		box-shadow: 
			inset 0 1em 0 rgba(clr(cp, 1), .5),
			inset 0 1.2em 0 clr(cp, 3),
			;
		transform-origin: center bottom;
		transform: rotateX(-87deg) translateZ(-1px);
		animation: highwaySign $time*5 linear infinite;
	}
}

@keyframes middleTrackText {
	0%, 50.1%, 100% {
		padding-top: 0;
	}
	50% {
		padding-top: 27em;
	}
}

@keyframes middleTrack {
	to {
		background-position: 0 8em;
	}
}

@keyframes highwaySign {
	0% {
		transform: rotateX(-87deg) translateZ(0) translateY(0em);
		opacity: 0;
		filter: blur(.25em);
	}
	10% {
		opacity: 1;
		filter: blur(.1em);
	}
	80% {
		transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
		opacity: 1;
		filter: blur(0em);
	}
	81% {
		opacity: 0;
		transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
	}
	100% {
		opacity: 0;
		transform: rotateX(-87deg) translateZ(0em) translateY(0em);
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-wheel {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: .2em solid;
	color: clr(cp, 2);
	background-color: rgba(clr(cp, 2), .2);
	animation: spinTheWheel $time*4 ease(downhill) infinite;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: rollTheWheel $time*4 ease(downhill) infinite alternate;
		box-shadow: 0 0 .5em .2em rgba(clr(s), .25);
	}
	
	@keyframes spinTheWheel {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(359deg * 4);
		}
	}

	@keyframes rollTheWheel {
		from {
			transform: translateX(-100%) rotate(0deg);
		}
		to {
			transform: translateX(100%) rotate(359deg);
		}
	}
	&:before,
	&:after {
		content: '';
		position: absolute;
		border-radius: 50%;
		border-width: .2em;
	}
	
	&:before {
		width: 4em;
		height: 4em;
		left: .3em;
		top: .3em;
		border-style: dotted;
	}
	
	&:after {
		width: 3em;
		height: 3em;
		border-style: solid;
		left: .8em;
		top: .8em;
		background-color: clr(cp, 1);
		background-image:
			radial-gradient(
				clr(cp,1) 0,
				clr(cp,2) 1px,
				clr(cp,3) 2px,
				clr(cp,2) 4px,
				clr(t) 		5px
			);
		background-repeat: no-repeat;
	}
}


// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-disc-bouncer {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	background-color: clr(cp, 2);
	z-index: 0;
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		border-radius: 50%;
	}

		&,
		&:before,
		&:after {
			#toggle:checked ~ #sect & { // unnecessary efx
				box-shadow: 0 0 .75em  rgba(clr(s), .5);
			}
}
	
	&:before {
		width: 3em;
		height: 3em;
		left: 1em;
		top: 1em;
		z-index: 1;
		background-color: clr(cp,3);
			animation: bounce-disks $time infinite alternate ease(downhill);
	}
	
	&:after {
		width: 1em;
		height: 1em;
		left: 2em;
		top: 2em;
		background-color: clr(cp,4);
		z-index: 2;
			animation: bounce-disks2 $time $time/2 infinite alternate ease(downhill);
	}
}

@keyframes bounce-disks {
	to {
		transform: scale(1.5);
	}
}
@keyframes bounce-disks2 {
	to {
		transform: scale(2);
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-butterfly {
	font-size: 2em;
	width: 2em;
	height: 2em;
	transform: rotateZ(-13deg);
	animation: insect-fly $time/3 infinite alternate ease(swing);
	
	&:before, 
	&:after {
		content: '';
		position: absolute;
		width: 1em;
		height: 1.5em;
		border: 1px solid clr(cp, 3);
		background-color: rgba(clr(cp, 2), .5);
		animation: wings $time/3 infinite ease(full-circle) alternate;
	}
	
	&:before {
		left: 0;
		border-radius: 40% 20% 50% 50%;
		transform-origin: right center;
	}
	
	&:after {
		right: 0;
		border-radius: 20% 40% 50% 50%;
		transform-origin: left center;
		animation-direction: alternate-reverse;
	}
	
	@keyframes wings {
		from {
				transform: rotateX(60deg) rotateY(-60deg);
		}
		to {
				transform: rotateX(60deg) rotateY(60deg);
		}
	}
	
	@keyframes insect-fly {
		from {
			margin-top: -.3em;
		}
		to {
			margin-top: .3em;
		}
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-blow-up {
	width: 3em;
	height: 3em;
	position: relative;
	z-index: 2;
	
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: drop-shadow(.1em .1em .1em rgba(clr(s), .2));
		}
	
	&:before {
		content: '';
		display: block;
		position: absolute;
		left: .75em;
		top: .75em;
		border-radius: 50%;
		background-color: clr(cp, 2);
		width: 1.5em;
		height: 1.5em;
		z-index: 1;
		animation: blow-grow $time*4 infinite ease(swing);
	}
	
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1rem;
		height: 1rem;
		z-index: 0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: 
			blow-fade-in $time infinite ease(swing),
			blow-shadow $time infinite ease(swing);
	}
		
	@keyframes blow-fade-in {
		0% {
			opacity: 0;
		}
		2%, 100% {
			opacity: 1;
		}
	}
	
	@keyframes blow-shadow {
		0% {
			box-shadow: 
				-4em 0 0 .015em clr(cp, 2),
				4em 0 0 .015em clr(cp, 2);
		}
		75%, 100% {
			box-shadow: 
				0 0 0 .4em clr(cp, 2),
				0 0 0 .4em clr(cp, 2);
		}
	}

	@keyframes blow-grow {
		0% {
			transform: scale(0);
			background-color: clr(cp, 2);
		}
		25% {
			transform: scale(.5);
			background-color: clr(cp, 2);
		}
		50% {
			transform: scale(1);
			background-color: clr(cp, 3);
		}
		75% {
			transform: scale(1.5);
			background-color: clr(cp, 3);
		}
		100% {
			transform: scale(2);
			background-color: clr(cp, 4);
		}
	}
}


// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-pendulums {
	font-size: 2rem;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at center center,
		clr(cp, 2) 0%,
		clr(cp, 2) 32.9%,
		clr(t) 33%,
		clr(t) 100%
	);
	border: .1em solid rgba(clr(cp, 2), .25);
	// box-shadow: inset 0 0 0 2px rgba(clr(cp, 2), .25), 0 0 0 2px rgba(clr(cp, 2), .25);
	
	&:before,
	&:after {
		content: '';
		width: 2em;
		height: 2em;
		left: -.1em;
		top: -.1em;
		padding: .1em;
		display: block;
		border-radius: 50%;
		position: absolute;
		transform-origin: center center;
		border: .1em solid;
		border-color: clr(cp, 4) clr(t) clr(t) clr(t);
		animation: pendulum infinite $time*2 easing(pendulum);
	}
	
	&:before {
		border-color: clr(cp, 3) clr(t) clr(t) clr(t);
		animation-delay: -$time;
		animation-name: pendulum2;
	}
}

@keyframes pendulum {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

@keyframes pendulum2 {
	from {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(520deg);
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
$offset-discs: 180 + 45;

.loader-wheel-of-fortune {
	font-size: 0.66em;
	width: 5em;
	height: 5em;
	border-radius: 50%;
	// background-color: clr(cp, 2);
	position: relative;
	z-index: 0;
	color: rgba(clr(cp, 4), .75);
	border: .1em solid clr(cp, 3);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.1em .1em .1em rgba(clr(s),.5));
		text-shadow: .1em .1em .1em rgba(clr(s),.75);
	}
	
	&:before,
	&:after {
		content: '';
		
		#toggle:checked ~ #sect & { // unnecessary efx
			content: '°';
		}
		
		color: clr(cp, 4);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border-width: 2.25em;
		border-style: solid;
		border-color: clr(cp, 3) clr(cp,1);
		z-index: -1;
		opacity: 0.5;
		animation: wheel-of-fortune $time*5 ease(gravity) infinite;

		#toggle:checked ~ #sect & { // unnecessary efx
			animation:
				wheel-of-fortune $time*5 ease(gravity) infinite,
				wheel-of-fortune-blur $time*5 ease-in-out infinite;
		}
	}
	
	&:after {
		border-color: clr(cp, 2) clr(cp,3);
		transform: rotate(0deg + $offset-discs);
		animation-name: wheel-of-fortune-2;

		#toggle:checked ~ #sect & { // unnecessary efx
			animation-name:
				wheel-of-fortune-2,
				wheel-of-fortune-blur;
		}
	}
}

@keyframes wheel-of-fortune {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg * 5);		
	}
}

@keyframes wheel-of-fortune-2 {
	0% {
		transform: rotate(0deg + $offset-discs);
	}
	100% {
		transform: rotate(359deg * 5 + $offset-discs);		
	}
}

@keyframes wheel-of-fortune-blur {
	0%, 100% {
		filter: blur(3px);
	}
	50% {
		filter: blur(0px);		
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-gears {
	// background-color: rgba(clr(cp, 2), .5);
	position: relative;
	width: 3em;
	height: 3em;
	overflow: hidden;
	border-radius: .25em;
	// border: .1em solid clr(cp, 2);
	box-shadow: 
		0 0 0 .1em clr(cp, 2),
		inset 0 0 0 3em rgba(clr(cp, 2), .5);

	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.5em .5em .25em rgba(clr(s), .25));
	}

	&:before, 
	&:after {
		content: '';
		z-index: 1;
		display: block;
		position: absolute;
		width: 2.7em;
		height: 2.7em;
		border-radius: 50%;
		border: .16em dashed clr(cp, 1);
		box-shadow: 
			/* inset 0 0 0 .1em clr(cp,1),
			inset 0 0 0 .2em clr(cp,2), */
			inset 0 0 0 .9em clr(cp,1)/* ,
			inset 0 0 0 .96em clr(cp,2) */;
		animation: gear-rotate infinite linear $time*3 forwards;
	}
	
	&:before {
		left: -.7em;
		top: 1.1em;

	#toggle:not(:checked) ~ #sect & { // :not() unnecessary efx
			filter: drop-shadow(0 0 1.15em rgba(clr(cp, 4), 1));
		}
		
		#toggle:checked ~ #sect & { // unnecessary efx
			animation: 
				gear-rotate infinite linear $time*3 forwards,
				gear-glow infinite linear $time*6 forwards;
		}
	}
	&:after {
		left: 1.15em;
		top: -.85em;
		animation-direction: reverse;
			}
	
	
}

@keyframes gear-rotate {
	to {
		transform: rotate(359deg);
	}
}

@keyframes gear-glow {
	0%, 100% {
		filter: drop-shadow(0 0 0 rgba(clr(cp, 4), 0));
	}
	
	60% {
		filter: drop-shadow(0 0 1.75em rgba(clr(cp, 4), 1));

	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-wiggle {
	border-radius: 50%;
	width: 4em;
	height: 4em;
	opacity: 0.5;
	background-color: clr(cp, 2);
	position: relative;

	
	&:before,
	&:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		border-radius: 50%;
		background-color: clr(magenta);
		@include mix(3);
	}
	
	&:after {
		background-color: clr(cyan);
			animation: wiggle-r $time ease(gravity) infinite forwards;
}
	
	&:before {
		animation: wiggle-l $time ease(gravity) infinite forwards;
	}
}

@keyframes wiggle-l {
	0%, 15%, 25%, 100%  {
		transform: translate(0, 0);
	}
	17% {
		transform: translate(-20%, 0);
	}
	22% {
		transform: translate(30%, 0);
	}
	24% {
		transform: translate(-10%, 0);
	}
}
@keyframes wiggle-r {
	0%, 25%, 35%, 100%  {
		transform: translate(0, 0);
	}
	27% {
		transform: translate(20%, 0);
	}
	32% {
		transform: translate(-30%, 0);
	}
	34% {
		transform: translate(10%, 0);
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-drip {
	
	$left-position: 90%;
	
	// text-decoration: underline;
	color: clr(cp, 4);
	position: relative;
	// background-color: clr(cp, 3);
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: url('#filter-goo2');
	}
	
	&:before,
	&:after {
		content: '';
		background-color: currentColor;
		position: absolute;
	}
	
	&:before { // drip-line
		width: 3px;
		height: 1px;
		z-index: 2;
		top: calc(1em - 1px);
		left: $left-position;
		border-radius: 0% 40% 40% 0%;
		animation: drip-line $time*5 $time*2 ease(gravity) infinite forwards;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: url('#turbulence-4');
		}
	}
	&:after { // drip
		width: 1px;
		height: 1px;
		top: 1em;
		left: $left-position;
		z-index: 0;
		border-radius: 0 50% 50% 50%;
		transform: rotate(45deg) translate(-33%, 0%);
		animation: drip $time*5 $time*2 ease(gravity) infinite forwards;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: url('#turbulence-3');
			box-shadow: inset -.15em 0 .15em rgba(clr(s), .24);
		}

	}
}

@keyframes drip-line {
	to {
		height: 1.2em;
	}
}
@keyframes drip {
	to {
		top: 2em;
		width: 7px;
		height: 7px;
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-3-dots {
	$time: $time/3;
	--pos: 10%;
	--post: 10.1%; //calc(var(--pos) + .1);
	
	width: 4em;
	height: 1em;
	position: relative;
	
	&:before,
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	&,
	&:before,
	&:after { 
		background-image: radial-gradient(
				circle at center,
				clr(cp, 2) 0%,
				clr(cp, 2) var(--pos),
				clr(t) var(--post),
			);
		background-size: 2em 2em;
		background-repeat: no-repeat;
		animation: pulse-dot $time ease(full-circle) infinite alternate;
	}
	
	& {
		background-position: 100% 50%;

	}
	&:before {
			background-position: 50% 50%;
			animation-delay: -$time/2;
	}
	&:after {
			background-position: 0% 50%;
			animation-delay: -$time;
	}
	
	#toggle:checked ~ #sect & { // unnecessary efx
		
	}
	
	@keyframes pulse-dot {
		0% {
			--pos: 10%;
		}
		33% {
			--pos: 15%;
		}
		50% {
			--pos: 20%;
		}
		66% {
			--pos: 25%;
		}
		100% {
			--pos: 30%;
		}
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-ball {
	width: 4em;
	height: 4em;
	border: .25em solid clr(cp, 4);
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	mask: radial-gradient(
			ellipse at center,
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) 20%,
			rgba(0,0,0,1) 20.1%,
			rgba(0,0,0,1) 75%,
			rgba(0,0,0,1) 100%
		);
	animation: bouncing-ball 1.5*$time linear infinite;

	
	&:before,
	&:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0;
		right: 0;
		animation: ball-rotate 6*$time linear infinite;
	}
	
	&:before {
		top: 0;
		background-color: clr(cp, 3);
		transform-origin: center bottom;
	}
	
	&:after {
		top: 50%;
		background-color: clr(cp, 2);
		transform-origin: center top;
	}
}

@keyframes ball-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(8*360deg - 1);
	}
}

@keyframes bouncing-ball {
	0%   {
		transform: scale(1,1) translateY(-80%);
	}
	25%   {
		transform: scale(1,1.1) translateY(-45%);
	}
	50%   {
		transform: scale(1,1.5) translateY(10%);
	}
	66%   {
		transform: scale(2,.75) translateY(25%);
	}
	75%   {
		transform: scale(1,1.25) translateY(10%);
	}
	100%   {
		transform: scale(1,1) translateY(-80%);
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-inzoom {
	width: 3em;
	height: 3em;
	// border-radius: 50%;
	// overflow: hidden;
	// clip-path: polygon(
	// 	25% 0%,
	// 	75% 0%,
	// 	100% 50%,
	// 	75% 100%,
	// 	25% 100%,
	// 	0% 50%
	// );
	
	&:before,
	&:after {
		content: '';
		display: block;
		clip-path: polygon(
			50% 0%,
			100% 39%,
			81% 100%,
			19% 100%,
			0% 39% 
		);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		animation: inzoom $time*2 ease(gravity) forwards infinite;
		background-color: clra(.5, cp, 4);
		// mix-blend-mode: difference;
	}
	
	&:after {
		animation-delay: -$time;
		background-color: clra(.5, cp, 2);
	}
}
	
	@keyframes inzoom {
		50% {
			width: 0;
			height: 0;
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-blob {
	width: 4em;
	height: 4em;
	box-shadow: 0 0 0 .2ex;
	overflow: hidden;
	color: clr(cp, 4);
	border-radius: 60%;
	mix-blend-mode: exclude;
	--dist: -80%;
	--br1x: calc(19% - var(--dist, 0%));
	--br2x: calc(41% - var(--dist, 0%));
	--br3x: calc(62% - var(--dist, 0%));
	--br1y: 88%;
	--br2y: 85%;
	--br3y: 88%;
	--moonlight: #{clra(.5, w)};

		&.loading {
			animation:
					blob-rotate $time*20 ease(full-circle) infinite forwards,
					blob-radius $time*20 ease(full-circle) infinite forwards alternate,
					blob-cloud-parts-x $time*12 linear infinite forwards,
					blob-cloud-parts-y $time*3 ease(gravity) infinite forwards,
				;
		}
	
	#toggle:checked ~ #sect & { // unnecessary efx

		&.loading {
			animation:
					blob-opa $time*3 ease infinite forwards alternate,
					blob-rotate $time*20 ease(full-circle) infinite forwards,
					blob-radius $time*20 ease(full-circle) infinite forwards alternate,
					blob-cloud-parts-x $time*12 linear infinite forwards,
					blob-cloud-parts-y $time*3 ease(gravity) infinite forwards,
				;
		}
	}
	
	&:after {
		content: '';
		display: block;
		width: 120%;
		height: 120%;
		position: absolute;
		left: -10%;
		top: -10%;
		transform-origin: center center;
		background-image:
			radial-gradient(
				circle at 50% 50%,
				clr(cp, 2),
				clr(cp, 2) 60%,
				clr(t) 75%,
			),
			radial-gradient(
				circle at 50% 50%,
				#ddd,
				#ddd 60%,
				clr(t) 75%,
			),
			linear-gradient(
				to bottom,
				clr(cp, 2) 2.7em,
				var(--moonlight) 2.8em,
				// clra(.5, w) 2.8em,
				clr(cp, 3) 4em,
			),
			;
		background-size: 4ex 4ex, 3ex 3ex, 100% 100%;
		background-repeat: no-repeat, no-repeat;
		background-position: 3ex 1ex, 5ex 2ex, 0 0;
	}

	&:before {
		content: '';
		display: block;
		opacity: .85;
		width: 110%;
		height: 50%;
		left: -5%;
		top: 0;
		z-index: 1;
		position: absolute;
		background-image: 
			radial-gradient(
			ellipse at var(--br1x) var(--br1y),
			clr(w) 1ex,
			clr(t) 1ex,
		),
			radial-gradient(
			ellipse at var(--br2x) var(--br2y),
			clr(w) 1.75ex,
			clr(t) 1.75ex,
		),
			radial-gradient(
			ellipse at var(--br3x) var(--br3y),
			clr(w) .8ex,
			clr(t) .8ex,
		),
			;
		filter: url('#filter-goo3');
		transform-origin: center bottom;
	}
	
	&.loading {
		&:after {
			animation:
				blob-rotate $time*20 ease(full-circle) infinite reverse,
				blob-moon $time*50 linear infinite forwards,
				blob-moonlight $time*25 linear infinite forwards alternate,
				;
		}
		
		&:before {
		animation:
			blob-rotate $time*20 ease(full-circle) infinite reverse,
			;
		}
	}
}

@keyframes blob-opa {
	from {
		opacity: 0.9;
	}
	to {
		opacity: 0.25;
	}
}

@keyframes blob-moonlight {
	@for $ml from 0 through 100 {
		#{$ml}% {
			--moonlight: #{mix(clr(cp, 3), clr(cp, 4), ($ml * 1%))};

		}

	}
}

@keyframes blob-moon {
	from {
		background-position: 1ex 1ex, 5ex 2ex, 0 0;
	}	
	
	to {
		background-position: 8ex 2.5ex, 5ex 2ex, 0 0;
	}
}

@keyframes blob-radius {
	10% {
		border-radius: 46% 54% 72% 28% / 59% 35% 65% 41%;
	}
	20% {
		border-radius: 64% 36% 66% 34% / 45% 26% 74% 55%;
	}
	30% {
		border-radius: 31% 69% 30% 70% / 58% 64% 36% 42%;
	}
	40% {
		border-radius: 47% 53% 62% 38% / 33% 27% 73% 67%;
	}
	50% {
		border-radius: 42% 58% 29% 71% / 64% 37% 63% 36%;
	}
	60% {
		border-radius: 45% 55% 46% 54% / 66% 38% 62% 34%;
	}
	70% {
		border-radius: 49% 51% 47% 53% / 51% 61% 39% 49%;
	}
	80% {
		border-radius: 36% 64% 56% 44% / 42% 26% 74% 58%;
	}
	90% {
		border-radius: 55% 45% 33% 67% / 53% 25% 74% 47%;
	}
	100% {
		border-radius: 48% 52% 74% 25% / 62% 48% 52% 38%;
	}
}

@keyframes blob-rotate {
	@for $m from 0 through 100 {
		#{$m}% {
			transform: rotate(#{0deg + ($m * 36)});
		}

	}
}


@keyframes blob-cloud-parts-y {
	25% {
	--br1y: 87%;
	--br2y: 85%;
	--br3y: 86%;
	}
	50% {
	--br1y: 88%;
	--br2y: 83%;
	--br3y: 85%;
	}
	75% {
	--br1y: 87%;
	--br2y: 85%;
	--br3y: 84%;
	}
}

@keyframes blob-cloud-parts-x {
	@for $l from 0 through 100 {
		#{$l}% {
			--dist: #{-100% + $l * 2};
		}

	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-loader {
	width: 2em;
	height: 2em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
		
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: /* url(#filter-goo) */ drop-shadow(.2em .2em .2em clra(.5, s));
	}
		
	&:before {
		content: '';
		display: block;
		width: 100%;
		height: 2em;
		color: clr(cp, 4);
		background-color: currentColor;
		animation: 
			loader-loader $time*2 /*ease(downhill) */ linear  infinite forwards,
			loader-loader-pseudo $time*2 ease(downhill) infinite reverse,
			;
	}
	
	&.loader-1,
	&.loader-2,
	&.loader-3 {
		height: 5em;
		
		&:after {
			content: '';
			display: block;
			width: 100%;
			height: 0;
			background-color: clr(cp, 4);
			animation: loader-loader-stack $time*8 ease(gravity) forwards infinite;
		}
	}
	
	&.loader-2 {
		box-shadow: inset 0 -3.5em 0 clr(cp, 2);
	}
	
	&.loader-2 {
		filter: url(#filter-goo2);
		
		&:before {
			animation-name: 
			loader-loader2,
			loader-loader-pseudo;
		}
		
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: url(#filter-goo2) drop-shadow(.2em .2em .2em clra(.5, s));
		}
	}
	
	&.loader-3 {
		filter: url(#filter-goo);
		
		&:before {
			flex: 1 0 2em;
		}
		
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: url(#filter-goo) drop-shadow(.2em .2em .2em clra(.5, s));
		}
	}
}

@keyframes loader-loader-stack {
	0%, 20% {
		height: 0;
	}
	25%, 45% {
		height: 1em;
	}
	50%, 70% {
		height: 2em;
	}
	75%, 95% {
		height: 3em;
	}
}


@keyframes loader-loader2 {
	0% {
		clip-path: polygon(50% 0, 0 0, 30% 0, 30% 0, 70% 0, 70% 0, 100% 0);
	}
	20% {
		clip-path: polygon(50% 30%, 0 0,    30% 0,   30% 0,  70% 0,    70% 0,    100% 0);
	}
	55% {
		clip-path: polygon(50% 100%, 0 70%, 30% 70%, 30% 0%,  70% 0%,    70% 70%,  100% 70%);
	}
	
	75% {
		clip-path: polygon(50% 100%, 0 100%, 30% 70%, 30% 70%, 70% 70%, 70% 70%, 100% 100%);
	}
	85% {
		clip-path: polygon(50% 100%, 0 100%, 0% 70%, 30% 70%,  68% 70%, 100% 70%, 100% 100%);
	}
	100% {
		clip-path: polygon(50% 100%, 0 100%, 0 100%, 30% 100%, 70% 100%, 100% 100%, 100% 100%);
	}
}
@keyframes loader-loader {
	0% { // arrow flat top
		clip-path: polygon(30% 0, 70% 0, 70% 0%, 100% 0%, 70% 0%, 50% 0%, 30% 0%, 0 0%, 30% 0%);
	}
	5% { // arrow tip top
		clip-path: polygon(30% 0, 70% 0, 70% 0%, 100% 0%, 70% 9%, 50% 15%, 30% 9%, 0 0%, 30% 0%);
	}
	15% { // arrow tip top
		clip-path: polygon(30% 0, 70% 0, 70% 0%, 100% 0%, 70% 19%, 50% 30%, 30% 19%, 0 0%, 30% 0%);
	}
	50% { // arrow full
		clip-path: polygon(30% 0%, 70% 0%, 70% 70%, 100% 70%, 70% 89%, 50% 100%, 30% 89%, 0 70%, 30% 70%);
	}
	90% { // arrow => box
		clip-path: polygon(30% 70%, 70% 70%, 70% 70%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0 70%, 30% 70%);
	}
	100% { // flat box
		clip-path: polygon(30% 100%, 70% 100%, 70% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%, 0 100%, 30% 100%);
	}
}
@keyframes loader-loader-pseudo {
	0%, 10% {
		color: clr(cp, 4);
	}
	100% {
		color: clr(cp, 2);
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-◯▢△ {
	width: 3em;
	height: 3em;
	color: clr(cp, 4);
	animation:
		◯▢△2 $time*5 linear infinite forwards, 
		◯▢△-color $time*5 linear infinite forwards, 
		;
	
	&:before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		// box-shadow: inset 0 0 0 1px clr(cp, 4);
		background-color: currentColor;
	}
	
	&:before {
		animation: ◯▢△1 $time*5 linear infinite forwards;
	}
}

// @keyframes abc {
// 	0%, 30%, 100% {
// 		border-radius: 50%;
// 	}
// 	33%, 90% {
// 		border-radius: 0%;
// 	}
// 	0%, 57%, 95%, 100% {
// 		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
// 	}
// 	60%, 92% {
// 		clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
// 	}
// }

@keyframes ◯▢△1 {
	0%, 23%, 100% {
		clip-path: circle(50% at 50% 50%);
	}
	33%, 90% {
		clip-path: circle(100% at 50% 50%);
	}
}


@keyframes ◯▢△2 {
	0%, 60%, 100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	66%, 93% {
		clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
	}
}

@keyframes ◯▢△-color {
	0%, 26%, 100% {
		color: clr(cp,3);
	}
	30%, 65% {
		color: clr(cp, 2);
	}
	66%, 97% {
		color: clr(cp, 4);
	}
}
// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-wifi {
	font-size: 2em;
	width: 3em;
	height: 3em;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	border: .25ex solid clr(cp, 4);
	border-color: clr(cp, 4) clr(t) clr(t) clr(t);
	
	&:before {
		content: '';
		width: 400%;
		height: 400%;
		display: block;
		position: absolute;
		left: -150%;
		top: -150%;
		transform: rotate(45deg) scale(.5);
		clip-path: polygon(0 0, 50% 0, 50% 50%, 0% 50%);
		animation: wifi $time linear infinite forwards;
		background-image: repeating-radial-gradient(
			circle at 50% 50%, 
			clr(cp, 3) .5ex,
			clr(cp, 3) 1ex,
			clr(t) 1ex,
			clr(t) 1.5ex,
			clr(cp, 3) 1.5ex,
			clr(cp, 3) 2ex,
			clr(t) 2ex,
			clr(t) 2.5ex,
		);
	}
	
	&:after {
		content: '';
		width: 80%;
    height: 100%;
    display: block;
    position: absolute;
    left: 16%;
    top: -64%;
		transform: rotate(45deg);
		border: .25ex solid clr(cp, 4);
		border-color: clr(t) clr(cp, 4) clr(cp, 4) clr(t);
	}
}

@keyframes wifi {
	0% {
		background-position: .77ex .77ex; 
	}
	100% {
		background-position: 0 0;
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
// -------------------------------------
// -------------------------------------
// -------------------------------------
// -------------------------------------
// -------------------------------------
// ease():
// default, in-cubic, out-cubic, in-out-cubic, in-circ, out-circ, in-out-circ, in-expo, out-expo", in-out-expo, in-quad, out-quad, in-out-quad, in-quart, out-quart, in-out-quart, in-quint, out-quint, in-out-quint, in-sine, out-sine, in-out-sine, in-back, out-back, in-out-back, liquid, bounce, in-out-bounce, perpetuum, impetus, full-circle, gravity, overshot, downhill, pendulum, wtf, swing
// separator
hr.from-here {
	content: "--------- don't copy from here --------";
}
// ###############################################
// ########### defaults for layout ###############
// ###############################################
// --------- defaults ---------
* {
	&:focus {
		outline: 0;
	}
	
	&, &:before, &:after {
		box-sizing: border-box;
	}
}
// --------------------
html {
	background-color: clr(s);
	font-size: 10px;
	
	body {
		font-size: $fz;
		font-family: $f;
		color: clr(w);
		// font-size: 1em;
		overflow-x: hidden;
		background-color: darken(clr(cp, 1), 2%);
	}
	
	&, body {
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 0;
		// bottom: 0;
		float: left;
		width: 100vw;
		min-height: 100vh;
		// overflow: auto;
	}
}

.hide,
#toggle,
#toggleSize,
#toggleView {
	display: none;
}

.flex {
	display: flex;
}

#sect	{
	width: 90vw;
	margin: 3vh auto 0;
	
	#toggleSize:checked {
		+ #list tbody {
			font-size: 1.5em;
		}
	}
	
	#toggleView:checked {
		~ #list {
			tr {
				display: grid;
				width: 100%;
				height: 50vh;
				grid-template-columns: 47.5% 47.5%;
				grid-template-rows: 70% 25%;
				grid-gap: 5%;
				justify-content: stretch;
				justify-items: stretch;
				grid-template-areas:
					"mainDiv mainDiv"
					"prevDiv nextDiv";
			}
			
			td {
				margin: 0;
				> div:not(:nth-child(2)) {
					font-size: 0.75em;
				}
				
				
				&:nth-child(1) {
					grid-area: prevDiv;
					justify-self: left;
					height: auto;
					box-shadow: inset 0 0 0 2px clr(cp,4);
				}
				&:nth-child(2) {
					grid-area: mainDiv;
					max-width: 100%;
					width: 100%;
					height: 100%;
					overflow: hidden;
					box-shadow: inset 0 0 0 2px clr(cp,4);							font-size: 2em;
					
					h2 {
						margin-top: -0.125em;
						background-color: clra(.125, w);
					}
				}
				&:nth-child(3) {
					grid-area: nextDiv;
					justify-self: right;
					height: auto;
					box-shadow: inset 0 0 0 2px clr(cp,4);
				}
				&:nth-child(n+4) {
					display: none;
				}
			}
		}
	}
	
	h3 {
		font-weight: 700;
	}
	
	h4 {
		margin-top: .25em;
		display: inline-block;
		vertical-align: middle;
		
		&:not(:first-of-type) {
			margin-left: 1em;
		}
		
		label {
			display: inline-block;
			transition: all $time/3;
			
			&:hover {
				color: clr(w);
			}
		}
	}
	
	.ckbx {
		position: relative;
		display: inline-block;
		font-size: .5em;
		padding-left: 1.5em;
		cursor: pointer;
		vertical-align: top;
		line-height: 1.3;
		
		.small {
			font-size: .7em;
			display: block;
			line-height: 1.5;
			text-align: left;
		}
		
		&:before {
			content: '';
			position: absolute;
			display: inline-block;
			left: 0;
			top: 0.2em;
			width: 1em;
			height: 1em;
			border: 2px solid clr(cp, 2);
			border-radius: .2em;
			margin-right: .5em;
		}
		
		&:after {
			content: '';
			display: inline-block;
			position: absolute;
			left: .4em;
			top: 0.7em;
			width: 0;
			height: 0;
			opacity: 0;
			border: 5px solid clr(cp, 4);
			border-width: 0 5px 5px 0;
			transform: rotate(35deg);
			transition: all $time/3;
		}
	}
	
	table {
		width: 100%;
		margin: 0 auto;
		margin-top: 8em;
		
		caption {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: clr(cp, 1);
			box-shadow: 0 .5em .5em clr(cp, 1);
			width: 100vw;
			font-size: 2em;
			color: clr(gr);
			padding-top: .5em;
			padding-bottom: .5em;
			border-bottom: 1px solid;
			margin-bottom: .5em;
		}
		
		tr {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: stretch;
		}
		
		td {
			// border: 1px solid;
			// padding: 3em;
			text-align: center;
			vertical-align: middle;
			position: relative;
			max-width: 25vw;
			width: 100%;
			min-width: 12em;
			min-width: clamp(12em, 50%, 20vmax);
			text-align: center;
			height: 20vh;
			min-height: 10em;
			margin: .5em;
			order: 2;
			border-radius: .5em;
			transform-origin: center 33%;
			transition: all $time/3 ease(gravity);
			background-color: clr(cp, 1);
			box-shadow: inset 0 0 0 .1em clra(.1, s);
			overflow: hidden;
				
			h2 {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				line-height: 1.5;
				display: block;
				font-size: .8em;
				text-align: center;
				color: clra(.75, cp, 4);
				transition: all $time/3 ease(gravity);
				background-color: clra(.1, s);
			}
			
			&:hover {
				background-color: clr(cp, 1);
				box-shadow: .2em .2em .2em rgba(clr(s), .2);
				transform: scale(1.33);
				backdrop-filter: blur(3px);
				z-index: 1000;
				
				h2 {
					font-size: 1em;
					color: clr(w);
				}
			}
			
			&.prio {
				order: 0;
				// font-size: 2em;
			}
			
			&:not(.prio) {
				// display: none;
			}
			&.hidden {
				display: none !important;
			}
		}
	}
}

#toggle:checked ~ #sect .ckbx.one:after,
#toggleSize:checked ~ #list .ckbx.two:after,
#toggleView:checked ~ #list .ckbx.three:after{
	opacity: 1;
	width: .6em;
	left: .2em;
	top: 0em;
	height: 1.2em;
}




 @media (min-width: 769px) {
	 html body {
		 #sect {
		 font-size: 1em;
		 
			 #list {
				 td {
					 max-width: 10em;
				 }
			 }
		 }
	 }
  }
 @media (max-width: 769px) {
	 html body {
		 
		 #sect {
			 font-size: 1.4em;
			 width: 100vw;

			 td {
				 max-width:31vmax;
			 }
			 
				#toggleSize:checked {
					+ #list tbody {
						font-size: 1.75em;

					 td {
						 max-width: 100%;
					 }
					}
			 }
		 }
	 }
}
 @media (max-width: 360px) {
	 html body {
		 #sect {
			 #list {
				 font-size: 1.3em;

				 td {
					 max-width: 100%;
				 }
			 }
		 }
	 }
}
View Compiled
// ######################
// # look mommy, no JS! #
// ######################
// ----------------------
// © iGadget.de
// twitter @escapewarrior 

External CSS

  1. https://codepen.io/iGadget/pen/xGBMXq.scss
  2. https://fonts.googleapis.com/css?family=Podkova:400,700

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js