/* style-000.css */

/*
	Colours

	Material Design
	Teal 200	#80cbc4
	Teal 500	#009688
	Teal 800	#00695c
	Indigo 500	#3f51b5

*/

/* Keyframes */

@keyframes moveRight {
	25% {
		left: -115%;
	}
	
	75% {
		left: 15%;
	}
	
	100% {
		left: 0%;
	}
}

/* Generic */

* { color: #fff; }

/* Elements */

h1 {
	text-align: center;
	color: #3f51b5;
}

textarea {
	color: #222;
	padding:1em;
	border: 1px solid #009688;
	width: 100%;
	box-sizing: border-box;
}

label {
	display: block;
}

/* Objects */

.site-header  { background-color: #80cbc4; }
.site-content { background-color: #009688; }
.site-footer  { background-color: #3f51b5; }

/* Components */

.site-title { color: #3f51b5; }
.site-footer a { color: #b3e5fc; }

.site-content {
	overflow: hidden;
	position: relative;
}

.form,
.thank-you {
	max-width: 30rem;
	margin: 1rem auto 0;
	padding: 1rem;
}

.form {
	background-color: #00695c;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);
}

.button-send {
	margin: 1rem auto 0;
	background-color: #b3e5fc;
	color: #00695c;
	display: block;
}

.leave-form-container {
	width: 200%;
	display: flex;
	position: relative;
	left: -100%;
}

.form-container,
.thank-you-container {
	width: 50%;
}

.form-container {
	order: 2;
}

.thank-you-container {
	order: 1;
}

.thank-you p {
	font-size: 1.6em;
	text-align: center;
}

/* Trumps */

/* Animation */

.is-animated {
	animation: moveRight 1s ease-out forwards;
}