/* FILE to hold only Keyframes without variables - preloader has issues if it is in compiled less */
@-webkit-keyframes h-move {
	0% {
		left: -5px;
	}

	100% {
		left: 100%;
	}
}

@-moz-keyframes h-move {
	0% {
		left: -5px;
	}

	100% {
		left: 100%;
	}
}

@-ms-keyframes h-move {
	0% {
		left: -5px;
	}

	100% {
		left: 100%;
	}
}

@-o-keyframes h-move {
	0% {
		left: -5px;
	}

	100% {
		left: 100%;
	}
}

@keyframes h-move {
	0% {
		left: -5px;
	}

	100% {
		left: 100%;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes circle-center {
	5%, 90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes circle-center {
	5%, 90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes circle-small {

	10% {
		opacity: 0;
	}

	30%, 60% {
		opacity: 1;
	}

	70% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes circle-small {

	10% {
		opacity: 0;
	}

	30%, 60% {
		opacity: 1;
	}

	70% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes circle-big {
	20% {
		opacity: 0;
	}

	40%, 50% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes circle-big {
	20% {
		opacity: 0;
	}

	40%, 50% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes wobble-hor-bottom {
	0%, 100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	15% {
		-webkit-transform: translateX(-10px) rotate(-6deg);
		transform: translateX(-5px) rotate(-6deg);
	}

	30% {
		-webkit-transform: translateX(5px) rotate(6deg);
		transform: translateX(2px) rotate(6deg);
	}

	45% {
		-webkit-transform: translateX(-5px) rotate(-3.6deg);
		transform: translateX(-2px) rotate(-3.6deg);
	}

	60% {
		-webkit-transform: translateX(3px) rotate(2.4deg);
		transform: translateX(1px) rotate(2.4deg);
	}

	75% {
		-webkit-transform: translateX(-2px) rotate(-1.2deg);
		transform: translateX(-1px) rotate(-1.2deg);
	}
}

@keyframes wobble-hor-bottom {
	0%, 100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	15% {
		-webkit-transform: translateX(-10px) rotate(-6deg);
		transform: translateX(-5px) rotate(-6deg);
	}

	30% {
		-webkit-transform: translateX(5px) rotate(6deg);
		transform: translateX(2px) rotate(6deg);
	}

	45% {
		-webkit-transform: translateX(-5px) rotate(-3.6deg);
		transform: translateX(-2px) rotate(-3.6deg);
	}

	60% {
		-webkit-transform: translateX(3px) rotate(2.4deg);
		transform: translateX(1px) rotate(2.4deg);
	}

	75% {
		-webkit-transform: translateX(-2px) rotate(-1.2deg);
		transform: translateX(-1px) rotate(-1.2deg);
	}
}

@-webkit-keyframes shake-button {
	0%, 100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
/*		-webkit-box-shadow: @ess-button-shake-animation__box-shadow;
		box-shadow: @ess-button-shake-animation__box-shadow;
*/	}

	10% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	20%, 40%, 60% {
		-webkit-transform: rotate(-7eg);
		transform: rotate(-7deg);
	}

	30%, 50%, 70% {
		-webkit-transform: rotate(7deg);
		transform: rotate(7deg);
	}

	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	90% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}

@keyframes shake-buttom {
	0%, 100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
/*		-webkit-box-shadow: @ess-button-shake-animation__box-shadow;
		box-shadow: @ess-button-shake-animation__box-shadow;
*/	}

	10% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	20%, 40%, 60% {
		-webkit-transform: rotate(-7deg);
		transform: rotate(-7deg);
	}

	30%, 50%, 70% {
		-webkit-transform: rotate(7deg);
		transform: rotate(7deg);
	}

	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	90% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}

/*Animation keyframes stay in nocompile.css, but those stay in this file because we need variables for all the different themes*/

@keyframes pulse-critical {
    0% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0; 
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }

    100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }
}

@-webkit-keyframes pulse-critical {
    0% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0; 
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }

    100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }
}

@keyframes pulse-warning {
    0% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0; 
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }

    100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }
}

@-webkit-keyframes pulse-warning {
    0% {
        transform: scale(0.6);
        box-shadow: 0 0 0 0; 
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }

    100% {
        transform: scale(0.6);
        box-shadow: 0 0 0 10px; 
        opacity: 0;
    }
}

@keyframes pulse-fade-critical {
    0% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 0; 
        opacity: 0.7;
    }

    70% {
        height: 1em;
        width: 1em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }

    100% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }
}

@-webkit-keyframes pulse-fade-critical {
    0% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 0;
        opacity: 0.7;
    }

    70% {
        height: 1em;
        width: 1em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }

    100% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }
}

@keyframes pulse-fade-warning {
    0% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 0;
        opacity: 0.7;
    }

    70% {
        height: 1em;
        width: 1em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }

    100% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }
}

@-webkit-keyframes pulse-fade-critical {
    0% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 0;
        opacity: 0.7;
    }

    70% {
        height: 1em;
        width: 1em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }

    100% {
        height: 0.2em;
        width: 0.2em;
        border-radius: 50%;
        box-shadow: 0 0 0 10px;
        opacity: 0;
    }
}

@keyframes loading {
	to {
		transform: rotate(1turn)
	}
}

@-webkit-keyframes loading {
	to {
		transform: rotate(1turn)
	}
}