/*************************************************
BFX - Brutal Effects v.3.0
https://codepen.io/jdelibas/pen/WNbmgE
https://freefrontend.com/css-animation-examples/
**************************************************/
@import url('variables.css');

/* BLINKER FLUID */
.blink-slow { animation: blinker 750ms steps(1, end) infinite; }
.blink { animation: blinker 500ms steps(1, end) infinite; }
.blink-182 { animation: blinker 364ms steps(1, end) infinite; }
.blink-fast { animation: blinker 160ms steps(1, end) infinite; }
.strobe { animation: blinker 80ms steps(1, end) infinite; }
@keyframes blinker {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

/* BRUTAL TEXT FX */
.cellophane-text, .bitshadow {letter-spacing: 0.1em;}
.brutal-text {
    text-shadow: 0.35rem -0.35rem rgba(178, 217, 35, 0.75), -0.3rem -0.3rem rgba(39, 172, 227, 0.75), 0 0.5rem rgba(255, 213, 25, 0.75);
}
.brutal-text-mono {
    text-shadow: 0.35rem -0.35rem rgba(100, 100, 100, 0.75), -0.3rem -0.3rem rgba(150, 150, 150, 0.75), 0 0.5rem rgba(200, 200, 200, 0.75);
}
.neon-text, .brutal-text-neon {
    text-shadow: 0.4rem -0.4rem 2px rgba(255, 105, 180, 0.9), -0.4rem -0.2rem 2px rgba(251, 167, 58, 0.9), -0.2rem 0.3rem 2px rgba(72, 222, 252, 0.9), -0.5rem 0.5rem 2px #3EFF28;
}
.cellophane {text-shadow: 0px 0px 2px #eee, 4px 4px 2px teal, -4px -2px 2px maroon; }
.bitshadow{text-shadow: 0.256rem 0.128rem 0 #E79C10, -0.128rem -0.256rem 0 #D53A33;}
.baffle-forever{font-family: Arial, Helvetica, sans-serif;}

/* FITTEXT */
.fittext, .fittext-c, .fittext-cc, .fittext-x, .fittext-xx { line-height: 100%; }
.fittext-x, .fittext-xx { max-width: 100%; }

/* ROTATE TEXT */
.rotate-arena { display: inline-block; }

/* TumbleText */
.tumbletext span {
	display: inline-block; position: relative;
}
.tumbletext.backwards > span {animation: tumbleBackwards 1s ease-in-out forwards;}
.tumbletext.forwards > span {animation: tumbleForwards 1s ease-in-out forwards;}
.tumbletext.mixed > span:nth-child(even){animation: tumbleBackwards 1s ease-in-out forwards;}
.tumbletext.mixed > span:nth-child(odd){animation: tumbleForwards 1s ease-in-out forwards;}
@keyframes tumbleForwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: .9em; transform: rotate(-15deg); }
}
@keyframes tumbleBackwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: 1em; transform: rotate(25deg); }
}

/* RUMBLER */
.rumble, .crumble, .strumble, .trumble, .caffeinated {cursor: pointer;}
.hrumble {cursor: -webkit-grabbing; cursor: grabbing;}
.mdrumble {cursor: crosshair;}

/* GLITCH EFFECT */
.glitch {
	-webkit-animation: glitch1 2.5s infinite;
	animation: glitch1 2.5s infinite;
}
span.glitch { -webkit-animation: glitch2 1.25s infinite; animation: glitch2 1.25s infinite; }
@-webkit-keyframes glitch1 {
  0% { -webkit-transform: none; transform: none; opacity: 1; }
  7% { -webkit-transform: skew(-0.5deg, -0.9deg); transform: skew(-0.5deg, -0.9deg); opacity: 0.75; }
  10% {  -webkit-transform: none; transform: none; opacity: 1; }
  27% { -webkit-transform: none; transform: none; opacity: 1; }
  30% { -webkit-transform: skew(0.8deg, -0.1deg); transform: skew(0.8deg, -0.1deg); opacity: 0.75; }
  35% { -webkit-transform: none; transform: none; opacity: 1; }
  52% { -webkit-transform: none; transform: none; opacity: 1; }
  55% { -webkit-transform: skew(-1deg, 0.2deg); transform: skew(-1deg, 0.2deg); opacity: 0.75; }
  50% { -webkit-transform: none; transform: none; opacity: 1; }
  72% { -webkit-transform: none; transform: none; opacity: 1; }
  75% { -webkit-transform: skew(0.4deg, 1deg); transform: skew(0.4deg, 1deg); opacity: 0.75; }
  80% { -webkit-transform: none; transform: none; opacity: 1; }
  100% { -webkit-transform: none; transform: none; opacity: 1; }
}
@keyframes glitch1 {
  0% { -webkit-transform: none; transform: none; opacity: 1; }
  7% { -webkit-transform: skew(-0.5deg, -0.9deg); transform: skew(-0.5deg, -0.9deg); opacity: 0.75; }
  10% { -webkit-transform: none; transform: none; opacity: 1; }
  27% { -webkit-transform: none; transform: none; opacity: 1; }
  30% { -webkit-transform: skew(0.8deg, -0.1deg); transform: skew(0.8deg, -0.1deg); opacity: 0.75; }
  35% { -webkit-transform: none; transform: none; opacity: 1; }
  52% { -webkit-transform: none; transform: none; opacity: 1; }
  55% { -webkit-transform: skew(-1deg, 0.2deg); transform: skew(-1deg, 0.2deg); opacity: 0.75; }
  50% { -webkit-transform: none; transform: none; opacity: 1; }
  72% { -webkit-transform: none; transform: none; opacity: 1; }
  75% { -webkit-transform: skew(0.4deg, 1deg); transform: skew(0.4deg, 1deg); opacity: 0.75; }
  80% { -webkit-transform: none; transform: none; opacity: 1; }
  100% { -webkit-transform: none; transform: none; opacity: 1; }
}
@-webkit-keyframes glitch2 {
  0% { -webkit-transform: none; transform: none; opacity: 1; }
  7% { -webkit-transform: skew(-0.7deg, -5deg); transform: skew(-0.7deg, -5deg); opacity: 0.75; }
  10% {  -webkit-transform: none; transform: none; opacity: 1; }
  27% { -webkit-transform: none; transform: none; opacity: 1; }
  30% { -webkit-transform: skew(0.6deg, -0.2deg); transform: skew(0.6deg, -0.2deg); opacity: 0.5; }
  35% { -webkit-transform: none; transform: none; opacity: 1; }
  52% { -webkit-transform: none; transform: none; opacity: 1; }
  55% { -webkit-transform: skew(-45deg, 5deg); transform: skew(-45deg, 5deg); opacity: 0.75; }
  50% { -webkit-transform: none; transform: none; opacity: 1; }
  72% { -webkit-transform: none; transform: none; opacity: 1; }
  75% { -webkit-transform: skew(0.5deg, 12deg); transform: skew(0.5deg, 12deg); opacity: 0.25; }
  80% { -webkit-transform: none; transform: none; opacity: 1; }
  100% { -webkit-transform: none; transform: none; opacity: 1; }
}
@keyframes glitch2 {
  0% { -webkit-transform: none; transform: none; opacity: 1; }
  7% { -webkit-transform: skew(-0.7deg, -5deg); transform: skew(-0.7deg, -5deg); opacity: 0.75; }
  10% {  -webkit-transform: none; transform: none; opacity: 1; }
  27% { -webkit-transform: none; transform: none; opacity: 1; }
  30% { -webkit-transform: skew(0.6deg, -0.2deg); transform: skew(0.6deg, -0.2deg); opacity: 0.5; }
  35% { -webkit-transform: none; transform: none; opacity: 1; }
  52% { -webkit-transform: none; transform: none; opacity: 1; }
  55% { -webkit-transform: skew(-15deg, 0.5deg); transform: skew(-15deg, 0.5deg); opacity: 0.75; }
  50% { -webkit-transform: none; transform: none; opacity: 1; }
  72% { -webkit-transform: none; transform: none; opacity: 1; }
  75% { -webkit-transform: skew(0.5deg, 12deg); transform: skew(0.5deg, 12deg); opacity: 0.25; }
  80% { -webkit-transform: none; transform: none; opacity: 1; }
  100% { -webkit-transform: none; transform: none; opacity: 1; }
}
.shift-glitch {
	-moz-animation: shift 4s ease-in-out infinite alternate;
  -webkit-animation: shift 4s ease-in-out infinite alternate;
  animation: shift 4s ease-in-out infinite alternate;
}
@-moz-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -moz-transform: skewX(0deg);transform: skewX(0deg);
  }
  41% {-moz-transform: skewX(10deg);transform: skewX(10deg);}
  42% {-moz-transform: skewX(-10deg);transform: skewX(-10deg);}
  59% {-moz-transform: skewX(40deg) skewY(10deg);transform: skewX(40deg) skewY(10deg);}
  60% {-moz-transform: skewX(-40deg) skewY(-10deg);transform: skewX(-40deg) skewY(-10deg);}
  63% {-moz-transform: skewX(10deg) skewY(-5deg);transform: skewX(10deg) skewY(-5deg);}
  70% {-moz-transform: skewX(-50deg) skewY(-20deg);transform: skewX(-50deg) skewY(-20deg);}
  71% {-moz-transform: skewX(10deg) skewY(-10deg);transform: skewX(10deg) skewY(-10deg);}
}
@-webkit-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -webkit-transform: skewX(0deg);transform: skewX(0deg);
  }
  41% {-webkit-transform: skewX(10deg);transform: skewX(10deg);}
  42% {-webkit-transform: skewX(-10deg);transform: skewX(-10deg);}
  59% {-webkit-transform: skewX(40deg) skewY(10deg);transform: skewX(40deg) skewY(10deg);}
  60% {-webkit-transform: skewX(-40deg) skewY(-10deg);transform: skewX(-40deg) skewY(-10deg);}
  63% {-webkit-transform: skewX(10deg) skewY(-5deg);transform: skewX(10deg) skewY(-5deg);}
  70% {-webkit-transform: skewX(-50deg) skewY(-20deg);transform: skewX(-50deg) skewY(-20deg);}
  71% {-webkit-transform: skewX(10deg) skewY(-10deg);transform: skewX(10deg) skewY(-10deg);}
}
@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    -moz-transform: skewX(0deg);-ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);transform: skewX(0deg);
  }
  41% {
    -moz-transform: skewX(10deg);-ms-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);transform: skewX(10deg);
  }
  42% {
    -moz-transform: skewX(-10deg);-ms-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);transform: skewX(-10deg);
  }
  59% {
    -moz-transform: skewX(40deg) skewY(10deg);-ms-transform: skewX(40deg) skewY(10deg);
    -webkit-transform: skewX(40deg) skewY(10deg);transform: skewX(40deg) skewY(10deg);
  }
  60% {
    -moz-transform: skewX(-40deg) skewY(-10deg);-ms-transform: skewX(-40deg) skewY(-10deg);
    -webkit-transform: skewX(-40deg) skewY(-10deg);transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    -moz-transform: skewX(10deg) skewY(-5deg);-ms-transform: skewX(10deg) skewY(-5deg);
    -webkit-transform: skewX(10deg) skewY(-5deg);transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    -moz-transform: skewX(-50deg) skewY(-20deg);-ms-transform: skewX(-50deg) skewY(-20deg);
    -webkit-transform: skewX(-50deg) skewY(-20deg);transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    -moz-transform: skewX(10deg) skewY(-10deg);-ms-transform: skewX(10deg) skewY(-10deg);
    -webkit-transform: skewX(10deg) skewY(-10deg);transform: skewX(10deg) skewY(-10deg);
  }
}
.glitchtext,.glitchtext-h:hover{animation: glitchtext .5s linear infinite;}
.glitchtext-h{cursor: pointer;}
@keyframes glitchtext {
 0%, 100% {text-shadow: -1.5px -1.5px 0 #0ff, 2px 2px 0 #f00;}
 25% {text-shadow: 2px 2px 0 #0ff, -1.5px -1.5px 0 #f00;}
 50% {text-shadow: 1.5px -2px 0 #0ff, -2px 1.5px 0 #f00;}
 75% {text-shadow: -2px 1.5px 0 #0ff, 1.5px -2px 0 #f00;}
}

/* THROB */
.throb {
  animation-name: throb; display: inline-block !important; 
  animation-iteration-count: infinite; animation-duration: 2s; 
}
@keyframes throb {
  0% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  20% { transform: scale( 1 );-webkit-transform: scale( 1 );-ms-transform: scale( 1 );}
  40% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  60% { transform: scale( 1 );-webkit-transform: scale( 1 );-ms-transform: scale( 1 );}
  80% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  100% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
}
.throb-throw {
  animation-name: throbthrow; display: inline-block !important;
  animation-iteration-count: infinite; animation-duration: 2.5s; 
}
@keyframes throbthrow {
  0% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  20% { transform: rotate(45deg) scale( 1.25 );-webkit-transform: rotate(45deg) scale( 1 );-ms-transform: rotate(45deg) scale( 1 );}
  40% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  60% { transform: rotate(45deg) scale( 1.25 );-webkit-transform: rotate(45deg) scale( 1 );-ms-transform: rotate(45deg) scale( 1 );}
  80% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
  100% { transform: scale( .75 );-webkit-transform: scale( .75 );-ms-transform: scale( .75 );}
}

/* SPIN ANIMATIONS */
.spin, .spin-fast, .spin-reverse, .spin-r, .spin-r-fast, .spin-reverse-fast, .spin-cycle, .spin-xfast, .spin-r-xfast { 
	animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}
.spin{animation-name: spin; animation-duration: 5000ms;}
.spin-fast{animation-name: spin;animation-duration: 1500ms;}
.spin-r, .spin-reverse{animation-name: spin-reverse;animation-duration: 5000ms;}
.spin-r-fast, .spin-reverse-fast{animation-name: spin-reverse;animation-duration: 1500ms;}
.spin-xfast{animation-name: spin;animation-duration: 500ms;}
.spin-r-xfast{animation-name: spin-reverse;animation-duration: 500ms;}
.spin-cycle{animation-name: spin-cycle;animation-duration: 5000ms;}
@keyframes spin { 
	from { transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
	to { transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}
@keyframes spin-reverse {
    from { transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);}
    to { transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}
@keyframes spin-cycle {
    0%   {transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);}
	25%  {transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
	50%  {transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);}
	75%	 {transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);}
	100% {transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}

/* BOUNCY ANIMATION */
.bouncy { 
	animation: bouncy 0.5s; animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
	-webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
@keyframes bouncy {
    from { transform: translate3d(0, 0, 0);}
    to { transform: translate3d(0, 100%, 0);}
}
@-webkit-keyframes bouncy {
    from {-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to { -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
    }
}

/* ANIMATED BACKGROUNDS 
 * =============================
 */
.dotgrid,.dotgrid-throb {
	background: radial-gradient(#333 8%, transparent 8%), #fff;
	background-position: 0 0, 25px 25px; background-size:25px 25px;
}
.dotgrid-throb{	animation: dotthrob 6s linear infinite;}
@keyframes dotthrob{
	0% {
		background: radial-gradient(#333 9%, transparent 9%), #fff;
		background-position: 0 0, 25px 25px; background-size:25px 25px;
	}
	25%{
		background: radial-gradient(#333 9%, transparent 9%), #fff;
		background-position: 0 0, 26px 26px; background-size:26px 26px;
	}
	50%{
		background: radial-gradient(#333 10%, transparent 10%), #fff;
		background-position: 0 0, 27px 27px; background-size:27px 27px;
	}
	75%{
		background: radial-gradient(#333 9%, transparent 9%), #fff;
		background-position: 0 0, 26px 26px; background-size:26px 26px;
	}
	100%{
		background: radial-gradient(#333 9%, transparent 9%), #fff;
		background-position: 0 0, 25px 25px; background-size:25px 25px;
	}
}

.lcd-trip {
   background: linear-gradient(gold 30%, transparent 30%), linear-gradient(90deg, cyan 50%, rgba(100, 48, 10, 1) 50%);
   background-size: 15px 15px, 5px 5px; background-position: 0 15px, 0 0; background-color: #fff;
   filter: saturate(130%) contrast(110%);
   animation: lcdtrip 5s linear infinite;
}
@keyframes lcdtrip {
 0% {background-position: 0 -50%;}
}

.gathering {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Gradient {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.fright-night { 
background: rgb(134,0,0);
background: radial-gradient(circle, rgba(134,0,0,1) 0%, rgba(97,11,11,1) 50%, rgba(0,0,0,1) 100%);
	background-size: 500% 500%;
	-webkit-animation: Vampire 23s ease infinite;
	-moz-animation: Vampire 23s ease infinite;
	animation: Vampire 23s ease infinite;
}
@-webkit-keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Vampire {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.pastelize { 
background: linear-gradient(217deg, rgba(255,0,0,1), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,1), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,1), rgba(0,0,255,0) 70.71%);
	background-size: 400% 400%;
	-webkit-animation: Pastel 13s ease infinite;
	-moz-animation: Pastel 13s ease infinite;
	animation: Pastel 13s ease infinite;
}
@-webkit-keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Pastel {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.heat { color: #000;
background: linear-gradient(98deg, #ff0000, #ffab40, #ff9800, #F4FA58);
	background-size: 400% 400%;
	-webkit-animation: Hot 12s ease infinite;
	-moz-animation: Hot 12s ease infinite;
	animation: Hot 12s ease infinite;
}
@-webkit-keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-o-keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Hot {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.flood { color: #fff;
background-image: radial-gradient(circle, #add8e6, #81d4fa, #2196f3, #81d4fa, #add8e6);
	background-size: 500% 500%;
	-webkit-animation: Water 22s ease-in-out infinite;
	-moz-animation: Water 22s ease-in-out infinite;
	animation: Water 22s ease-in-out infinite;
}
@-webkit-keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-o-keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Water {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.shine { color: #000;
background: linear-gradient(-45deg, #808080, #808080, #e6e6e6, #808080, #808080, #e6e6e6, #808080, #808080, #e6e6e6);
	background-size: 400% 400%;
	-webkit-animation: Shine 9s ease-in-out infinite;
	-moz-animation: Shine 9s ease-in-out infinite;
	animation: Shine 9s ease-in-out infinite;
}
@-webkit-keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Shine {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.neon { color: #000;
background: linear-gradient(-60deg, #000000, #00ff00, #00ccff, #ff3399, #cc66ff, #000000, #83ff17, #fffb21, #000000, #ff1c27, #ff1c27, #000000, #ff1c8a, #ff1c8a, #ff1c27, #ff1c27);
	background-size: 500% 500%;
	-webkit-animation: Neon 14s ease-in-out infinite;
	-moz-animation: Neon 14s ease-in-out infinite;
	animation: Neon 14s ease-in-out infinite;
}
@-webkit-keyframes Neon {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Neon {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-o-keyframes Neon {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Neon {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

.earthly { color: #fff;
background: linear-gradient(55deg, #305ca8, #2f673b, #2f673b, #2f673b, #305ca8, #305ca8, #305ca8, #5a4f2f, #5a4f2f, #5a4f2f, #2f673b, #2f673b, #2f673b, #305ca8, #305ca8, #305ca8);
	background-size: 450% 450%;
	-webkit-animation: Earth 24s ease-in-out infinite;
	-moz-animation: Earth 24s ease-in-out infinite;
	animation: Earth 24s ease-in-out infinite;
}
@-webkit-keyframes Earth {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-moz-keyframes Earth {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@-o-keyframes Earth {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}
@keyframes Earth {
	0% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	100% { background-position: 0% 50% }
}

/* Infinity (light) */
@-webkit-keyframes bg-scrolling-reverse {
  100% {background-position: 50px 50px;}
}
@-moz-keyframes bg-scrolling-reverse {
  100% {background-position: 50px 50px;}
}
@-o-keyframes bg-scrolling-reverse {
  100% {background-position: 50px 50px;}
}
@keyframes bg-scrolling-reverse {
  100% {background-position: 50px 50px;}
}
@-webkit-keyframes bg-scrolling {
  0% {background-position: 50px 50px;}
}
@-moz-keyframes bg-scrolling {
  0% {background-position: 50px 50px;}
}
@-o-keyframes bg-scrolling {
  0% {background-position: 50px 50px;}
}
@keyframes bg-scrolling {
  0% {background-position: 50px 50px;}
}

.infinitile {
  /* img size is 50x50 */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
  -webkit-animation: bg-scrolling-reverse .92s infinite;
  /* Safari 4+ */
  -moz-animation: bg-scrolling-reverse .92s infinite;
  /* Fx 5+ */
  -o-animation: bg-scrolling-reverse .92s infinite;
  /* Opera 12+ */
  animation: bg-scrolling-reverse .92s infinite;
  /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

.psychedelic {
  background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
  background-blend-mode: hard-light;
  -webkit-animation: hue-rotate 3s linear infinite; animation: hue-rotate 3s linear infinite;
}
@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0); filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg);
  }
}
@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0); filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg);
  }
}

/* BRICKBUILD Background */
:root {
  --s: 100px;
  --c1: var(--color1);
  --c2: var(--color2);
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
}
.brickbuild{
  background:
    calc( .9*var(--s)) calc( .9*var(--s))/var(--_p),calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
    calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
    conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 
     0 0/var(--s) var(--s);
  animation: m 3s infinite;
}
@keyframes m {
  0% {
   background-position: 
    calc( .9*var(--s)) calc( .9*var(--s)),calc(-.1*var(--s)) calc(-.1*var(--s)),
    calc( .7*var(--s)) calc( .7*var(--s)),calc(-.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  25% {
   background-position: 
    calc(1.9*var(--s)) calc( .9*var(--s)),calc(-1.1*var(--s)) calc(-.1*var(--s)),
    calc(1.7*var(--s)) calc( .7*var(--s)),calc(-1.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  50% {
   background-position: 
    calc(1.9*var(--s)) calc(-.1*var(--s)),calc(-1.1*var(--s)) calc( .9*var(--s)),
    calc(1.7*var(--s)) calc(-.3*var(--s)),calc(-1.3*var(--s)) calc( .7*var(--s)),0 0
  }
  75% {
   background-position: 
    calc(2.9*var(--s)) calc(-.1*var(--s)),calc(-2.1*var(--s)) calc( .9*var(--s)),
    calc(2.7*var(--s)) calc(-.3*var(--s)),calc(-2.3*var(--s)) calc( .7*var(--s)),0 0
  }
  100% {
   background-position: 
    calc(2.9*var(--s)) calc(-1.1*var(--s)),calc(-2.1*var(--s)) calc(1.9*var(--s)),
    calc(2.7*var(--s)) calc(-1.3*var(--s)),calc(-2.3*var(--s)) calc(1.7*var(--s)),0 0
  }
}


/* TRIANGLIFY */
.triangle-dark, .triangle-light { position: relative; width: 100%; height: 100%; overflow: hidden; }
.triangle-dark .content, .triangle-light .content { position: relative !important; }
.triangle-pattern, .upsdwn-triangle{ position: absolute; z-index: inherit; } 

/* Blenders */
.multi-blend { mix-blend-mode: multiply; }
.screen-blend { mix-blend-mode: screen; }
.overlay-blend { mix-blend-mode: overlay; }
.darken-blend { mix-blend-mode: darken; }
.lighten-blend { mix-blend-mode: lighten; }
.dodge-blend { mix-blend-mode: color-dodge; }
.burn-blend { mix-blend-mode: color-burn; }
.hard-blend { mix-blend-mode: hard-light; }
.soft-blend { mix-blend-mode: soft-light; }
.diff-blend { mix-blend-mode: difference; }
.exc-blend { mix-blend-mode: exclusion; }
.hue-blend { mix-blend-mode: hue; }
.sat-blend { mix-blend-mode: saturation; }
.color-blend { mix-blend-mode: color; }
.lum-blend { mix-blend-mode: luminosity; }
.init-blend { mix-blend-mode: initial; }
.inherit-blend { mix-blend-mode: inherit; }
.isolate-blend { mix-blend-mode: isolate; }
.unblend { mix-blend-mode: unset !important; }

/* ========= BETA ELEMENTS ======== */

/* SPOTLIGHT Cursor Effect */
.spotlight {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(50px 50px at center center, transparent, transparent 100px, rgba(0, 0, 0, 0.6) 150px);
  opacity: 0; animation: fadein 2s 1s 1 both;
}
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.swede-split {
  --s: 20vmin;
  --p: calc(var(--s) / 2);
  --c1: yellow;
  --c2: blue;
  --c3: white;
  --bg: var(--c3);
  --d: 6000ms;
  --e: cubic-bezier(0.76, 0, 0.24, 1);
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c2) 75%);
  background-size: var(--s) var(--s);
  background-position: 
    calc(var(--p) *  1) calc(var(--p) *  0), 
    calc(var(--p) * -1) calc(var(--p) *  1), 
    calc(var(--p) *  1) calc(var(--p) * -1), 
    calc(var(--p) * -1) calc(var(--p) *  0);
  animation: 
    color var(--d) var(--e) infinite,
    position var(--d) var(--e) infinite;
}

@keyframes color {
  0%, 25% {
    --bg: var(--c3);
  }
  26%, 50% {
    --bg: var(--c1);
  }
  51%, 75% {
    --bg: var(--c3);
  }
  76%, 100% {
    --bg: var(--c2);
  }
}

@keyframes position {
  0% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  0), 
      calc(var(--p) * -1) calc(var(--p) *  1), 
      calc(var(--p) *  1) calc(var(--p) * -1), 
      calc(var(--p) * -1) calc(var(--p) *  0);
  }
  25% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  4), 
      calc(var(--p) * -1) calc(var(--p) *  5), 
      calc(var(--p) *  1) calc(var(--p) *  3), 
      calc(var(--p) * -1) calc(var(--p) *  4);
  }
  50% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 8), 
      calc(var(--p) * -3) calc(var(--p) * 9), 
      calc(var(--p) *  2) calc(var(--p) * 7), 
      calc(var(--p) * -2) calc(var(--p) * 8);
  }
  75% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 12), 
      calc(var(--p) * -3) calc(var(--p) * 13), 
      calc(var(--p) *  2) calc(var(--p) * 11), 
      calc(var(--p) * -2) calc(var(--p) * 12);
  }
  100% {    
    background-position: 
      calc(var(--p) *  5) calc(var(--p) * 16), 
      calc(var(--p) * -5) calc(var(--p) * 17), 
      calc(var(--p) *  5) calc(var(--p) * 15), 
      calc(var(--p) * -5) calc(var(--p) * 16);
  }
}
@media (prefers-reduced-motion) {
  .swedesplit {animation: none;}
}

/* Crossfade */
@-webkit-keyframes xfade {
  0% {opacity: 1;}
  19.6666666667% {opacity: 1;}
  33.3333333333% {opacity: 0;}
  86.3333333333% {opacity: 0;}
  100% {opacity: 1;}
}
@-moz-keyframes xfade {
  0% {opacity: 1;}
  19.6666666667% {opacity: 1;}
  33.3333333333% {opacity: 0;}
  86.3333333333% {opacity: 0;}
  100% {opacity: 1;}
}
@-o-keyframes xfade {
  0% {opacity: 1;}
  19.6666666667% {opacity: 1;}
  33.3333333333% {opacity: 0;}
  86.3333333333% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes xfade {
  0% {opacity: 1;}
  19.6666666667% {opacity: 1;}
  33.3333333333% {opacity: 0;}
  86.3333333333% {opacity: 0;}
  100% { opacity: 1; }
}
@-webkit-keyframes xgradient {
  0% { background-position: 5% 0%; }
  50% { background-position: 96% 100%; }
  100% { background-position: 5% 0%; }
}
@-moz-keyframes xgradient {
  0% {background-position: 5% 0%;}
  50% {background-position: 96% 100%;}
  100% {background-position: 5% 0%;}
}
@-o-keyframes xgradient {
  0% { background-position: 5% 0%; }
  50% { background-position: 96% 100%; }
  100% { background-position: 5% 0%; }
}
@keyframes xgradient {
  0% { background-position: 5% 0%; }
  50% { background-position: 96% 100%; }
  100% { background-position: 5% 0%; }
}
.xfade { position: relative; width: 100vw; }
.xfade>.element {
  position: absolute; top: 0; left: 0; width: 100%;
  -webkit-animation-name: xfade; -moz-animation-name: xfade; -o-animation-name: xfade; animation-name: xfade;
  -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite; animation-iteration-count: infinite;
  -webkit-animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; animation-duration: 12s;
}
.xfade>.element:nth-child(1) {
  -webkit-animation-delay: -8s; -moz-animation-delay: -8s;
  -o-animation-delay: -8s; animation-delay: -8s;
}
.xfade>.element:nth-child(2) {
  -webkit-animation-delay: -4s; -moz-animation-delay: -4s;
  -o-animation-delay: -4s; animation-delay: -4s;
}
.xfade>.element:nth-child(3) {
  -webkit-animation-delay: 0s; -moz-animation-delay: 0s;
  -o-animation-delay: 0s; animation-delay: 0s;
}
/*
.xfade>.element:before {
  position: absolute;
  bottom: 10px; right: 10px;
}
.xfade>.element:after {
  content: "";
  position: absolute; bottom: -40px;
  width: 12px; height: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50% 50%; opacity: 1;
}
.xfade>.element:nth-child(1):after {
  left: 50%; margin-left: -22px;
}
.xfade>.element:nth-child(2):after {
  left: 50%; margin-left: -6px;
}
.xfade>.element:nth-child(3):after {
  left: 50%; margin-left: 10px;
}*/

.gradient-text {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* BONUS: InfiniPlane */
.infiniplane-wrap{overflow: hidden; position: relative; width: 100%; height: 100vh;}
.infiniplane {
  width: 100%; height: 100%; position: absolute; margin: 0 auto;
  perspective: 360px; background: linear-gradient(#6084d7 25%, #a2cef4 50%, #a2cef4 50%, #6084d7 100%);
  perspective-origin: 50% 50%;
}
.top-plane, .bottom-plane {
  width: 200%; height: 130%; position: absolute; bottom: -30%; left: -50%;
  background-image: -webkit-linear-gradient(#a2cef4 2px, transparent 2px), -webkit-linear-gradient(left, #a2cef4 2px, transparent 2px);
  background-size: 100px 100px,100px 100px;
  background-position: -1px -1px,-1px -1px;
  transform: rotateX(85deg); animation: planeMoveTop 2s infinite linear;
}
.bottom-plane {
  transform: rotateX(-85deg); top: -30%;
  animation: planeMoveBot 2s infinite linear;
}
@keyframes planeMoveTop {
  from {background-position: 0px -100px,0px 0px;}
  to {background-position: 0px 0px, 100px 0px;}
}
@keyframes planeMoveBot {
  from {background-position: 0px 0px,0px 0px;}
  to {background-position: 0px -100px, 100px 0px;}
}
@media (max-height: 350px) {
  .infiniplane {perspective: 210px;}
}