/*Animation key frames*/

@-webkit-keyframes input-highlight {
	0% { background-size: 0 2px, 100% 1px; } 100% { background-size: 100% 2px, 100% 1px; }
}
@keyframes input-highlight {
	0% { background-size: 0 2px, 100% 1px; } 100% { background-size: 100% 2px, 100% 1px; }
}
@-webkit-keyframes checkbox-on {
	0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; }
	50% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px; }
	100% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; }
}
@keyframes checkbox-on {
	0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;}
	50% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;}
	100% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;}
}
@-webkit-keyframes checkbox-off {
	0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
	25% {box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;}
	50% {
		-webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-left: 6px; width: 0;height: 0;
		box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
	}
	51% {
		-webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px;
		box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 10px inset;
	}
	100% {
		-webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px;
		box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
	}
}
@keyframes checkbox-off {
	0% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; }
	25% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; }
	50% {
		-webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-left: 6px; width: 0; height: 0;
		box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
	}
	51% {
		-webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px;
		box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 10px inset;
	}
	100% {
		-webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; margin-left: -2px; width: 20px; height: 20px;
		box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
	}
}

@-webkit-keyframes rippleOn {
	0% { opacity: 0; } 50% { opacity: 0.2; } 100% { opacity: 0; }
}
@keyframes rippleOn {
	0% { opacity: 0;} 50% { opacity: 0.2; } 100% { opacity: 0;}
}
@-webkit-keyframes rippleOff {
	0% {opacity: 0;} 50% {opacity: 0.2;} 100% {opacity: 0;}
}
@keyframes rippleOff {
	0% { opacity: 0; } 50% { opacity: 0.2; } 100% { opacity: 0;}
}

@keyframes pulse {
  0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
}

@keyframes move {
  0% { background-position: 44px 44px; } 100% { background-position: 0 0; }
}