/* style-000.css */

/*

	Colours

	Material Design
	Orange 200	#ffcc80
	Orange 500	#ff9800
	Orange 800	#ef6c00
	Light_Green 500	#8bc34a

	Warnings
	Red200	#ffcdd2
	Red800	#c62828



*/

/* Keyframes */

/*
@keyframes loginError {
	10% {  transform: translateX(-7rem); }
	32% {  transform: translateX(6rem); }
	51% {  transform: translateX(-5rem); }
	67% {  transform: translateX(4rem); }
	79% {  transform: translateX(-3rem); }
	89% {  transform: translateX(2rem); }
	96% {  transform: translateX(-1rem); }
	100% { transform: translateX(0); }
}
*/

@keyframes loginError {
	14% {transform: translateX(-1.25rem);}
	41% {transform: translateX(1rem);}
	63% {transform: translateX(-0.75rem);}
	81% {transform: translateX(0.5rem);}
	93% {transform: translateX(-0.25rem);}
	100% {transform: translateX(0);}
}


/* Generic */

/* Elements */

h1 {
	text-align: center;
}

/* Objects */

.site-header  { background-color: #ff9800; }
.site-content { background-color: #ffcc80; }
.site-footer  { background-color: #8bc34a; }
.site-footer * { color: #222; }

/* Components */

.play { background-color: #8bc34a; }

.anim-container {
	
}

.login-form {
	max-width: 30rem;
	background-color: #ff9800;
	padding: 1rem;
	margin: 1rem auto 0;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);	
}

.error-message {
	background-color: #ffcc80;
	border: 1px solid #ef6c00;
	transition: max-height .4s;
	max-height: 0;
	height: auto;
	overflow: hidden;
	visibility: hidden;
}

.error-message-show {
	max-height: 10rem;
	padding: 1rem;
	display: block;
	visibility: visible;
}

.login-button {
	display: block;
	margin: 1rem auto 0;
	background-color: #ef6c00;
}

/* Trumps */

/* Animation */

.js-login-error {
	animation: loginError 0.3s ease-out;
}