@charset "UTF-8";

* { box-sizing:border-box; }
html, body { width:100%; height:100%; padding:0; margin:0; font-family: 'Source Sans Pro', sans-serif; color:#666; }
a { text-decoration:none; color:inherit; }
a:hover { text-decoration:none; color:#2db8e2; }

.email::after { content:'visualevents@protonmail.com'; }

h1 { font-size:1.5em; color:#2db8e2; }

header { width:100%; height:70px; background-color:#fcfcfc; border-bottom:1px solid #ddd; text-align:center; position:fixed; top:0; }
	header .logo { margin-top:22px; }
.container { width:100%; min-height:100%; display:flex; text-align:center; padding:100px 0 80px 0; }
	.centered { max-width:75%; margin:auto; }
		/* attente */
		.logo-centered { max-width:512px; text-align:center; margin-bottom:45px; }
			.logo-centered img { width:100%; height:auto; }
		.services { width:100%; max-width:512px; text-align:center; }
			.service { width:90px; height:90px; border-radius:50%; background-color:#2db8e2; display:inline-block; text-align:center; color:#eee; line-height:90px; font-size:1.5em; }
			.service:nth-child(2) { margin:0 45px; }
				.service img { height:100%; width:auto; }
				.service h1 { color:#2db8e2; font-size:1em; margin:0; padding:0; height:1em; line-height:1em; position:relative; top:-25px; }
		.message { width:100%; max-width:512px; text-align:center; font-weight:300; }
		/* references */
		.centered h1 { margin-bottom:50px; }
		.centered img { display:inline-block; }
		/* form */
		form { width:688px; margin:0 auto; padding:20px 0; background:#fcfcfc; border:1px solid #ddd; border-radius:5px; text-align:left; }
			label { width:128px; height:2em; display:inline-block; text-align:right; line-height:2em; padding:0 20px; vertical-align:top; }
				label.required:before { color:#2db8e2; content:attr(data-content) "* "; }
			input, select, textarea { background:#fff; padding:7px; border:1px solid #ddd; border-radius:5px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.12) inset; }
			input { width:320px; }
			textarea { width:520px; height:10em; }
				input.button { width:100px; margin:20px; background-color:#2db8e2; text-transform:uppercase; text-align:center; }
		.alert { width:100%; padding:10px; background-color:#f97e81; color:#eee; text-align:center; position:absolute; top:70px; left:0; right:0; z-index:100; }
		.success { width:100%; padding:10px; background-color:#5cb85c; color:#eee; text-align:center;  position:absolute; top:70px; left:0; right:0; z-index:100; }

footer { width:100%; height:50px; border-top:1px solid #ddd; background-color:#fcfcfc; text-align:center; font-size:0.85em; line-height:50px; color:#aaa; position:fixed; bottom:0; }
	.fa-circle { font-size:1.5em; }
		.fa-circle:hover { color:#2db8e2; }

@media screen and (max-width:728px) {
h1 { font-size:1.25em; }
header { height:55px; }
		header img { height:20px; width:auto; }
		header .logo { margin-top:18px; }
.container { padding:75px 0 75px 0; }
	.centered { max-width:100%; padding:0 10px; }
		.logo-centered { margin-bottom:25px; }
			.service { width:50px; height:50px; line-height:50px; font-size:1em; }
			.service:nth-child(2) { margin:0 20px; }
				.service h1 { top:-10px; }
		.centered h1 { margin-bottom:30px; }
		form { width:100%; padding:0 10px; }
			label, input { width:100%; display:block; text-align:left; }
			label { padding:0; }
			textarea { max-width:100%; }
footer { height:40px; font-size:0.70em; line-height:40px; }
	.fa-circle { font-size:1.5em; }
}