/*
=====================================================================
= CSS Animations
=====================================================================
*/
@keyframes pulseit{
	 0%{
		  opacity:1;
	 }
	 50%{
		  opacity:0;
	 }
	 100%{
		  opacity:1;
	 }
}

@keyframes spin{
	 0% {
		  transform: rotate(0deg);
	 }
	 50% {
		  transform: rotate(180deg);
	 }
	 100% {
		  transform: rotate(359deg);
	 }
}

.spinner {
	 animation: spin 4s linear infinite;
}

.nospin {
	  transform: rotate(0deg);
}

.oneeighty {
	transform: rotate(180deg);
}

/* Note. Because CSS is SO fucking dumb, it works out width and height
before applying the rotation. Thus, using this breaks any layout where
width and height aren't fixed to a specific and identical number of pixels. */
.ninety {
	transform: rotate(90deg);
}

@keyframes switchback {
	0% {
		left: -20%;
		width: 10%;
	}
	25% {
		width: 50%;
		left: 50%;
	}
	50% {
		width: 10%;
		left: 110%;
	}
	75% {
		width: 50%;
		left: 50%;
	}
	100% {
		width: 10%;
		left: -20%;
	}
}

.wafflebanger-moving {
	animation: switchback 6s linear infinite;
}

.wafflything {
	position: relative;
	overflow:hidden;
	height: var(--waiting-swinger-height) !important;
	border: none !important;
	margin-bottom: 4px;
}

.wafflebanger {
	height: 100%;
	width: 10%;
	position: relative;
	background-image: var(--waiting-swinger-bg-image);
}

@keyframes clickflash {
	 0%{
		  background-color: rgba(255,255,255,0.7);
	 }
	 50%{
		 background-color: rgba(255,255,255,0.3);
	 }
	 100%{
		 background-color: rgba(255,255,255,0);
	 }
}

.clickflash {
	animation: clickflash 0.75s linear 1;
}

