@font-face
{
font-family: 'Contact';
src: url('Contact.woff') format('woff');
font-weight: normal;
font-style: normal;
}
form#contact
{
width: 90%;
max-width: 720px;
margin: auto;
}
form#contact input, form#contact textarea, form#contact button
{
display: block;
box-sizing: border-box;
width: 100%;
margin-bottom: 1em;
padding: 1.25em;
background: rgba(255,255,255,0.75);
box-shadow: inset 0px 0 0 #578eb5;
border: 1px solid #578eb5;
border-radius: 4px;
color: black;
font-size: 1.15em;
transition: 0.5s;
}
form#contact:not(.envoi) input:hover, form#contact:not(.envoi) textarea:hover, form#contact:not(.envoi) button:hover
{
box-shadow: inset 0px 0 0 2px #578eb5;
transition: 0s;
}
form#contact input:focus, form#contact textarea:focus, form#contact button:focus
{
box-shadow: inset 720px 0 0 #578eb5 !important;
color: white;
transition: 0.5s !important;
}
form#contact > *::-moz-selection {background: rgba(0,0,0,0.25);}
form#contact > *::selection {background: rgba(0,0,0,0.25);}
form#contact input, form#contact textarea {padding-left: 4em;}
form#contact > i
{
display: block;
position: absolute;
padding: 0.7em;
font-family: Contact;
font-size: 2em;
font-weight: 400;
font-style: normal;
}
form#contact textarea
{
height: 10em;
min-height: 10em;
resize: vertical;
}
form#contact [type=submit]
{
background: #578eb5;
border: none;
color: white;
font-weight: 600;
text-transform: uppercase;
transition: background 0.5s, color 0.5s;
}
form#contact [type=submit]:hover {text-shadow: 0 0 10px white;}
form#contact [type=submit] span i
{
display: inline-block;
margin-left: 0.2em;
font-family: Contact;
font-weight: 400;
font-style: normal;
text-transform: none;
}
form#contact [type=submit] span:not(:first-child) {display: none;}
form#contact.envoi [type=submit] .idle, form#contact.envoye [type=submit] .idle {display: none;}
form#contact.envoi > :not([type=submit]) {filter: blur(3px);}
form#contact.envoi [type=submit]
{
cursor: default;
background: rgb(25,25,25);
}
form#contact.envoi [type=submit] .wait {display: block;}
form#contact.envoi [type=submit] .wait i {animation: tourne 1s reverse linear infinite;}
form#contact.envoi [type=submit] .good {display: none;}
form#contact.envoye [type=submit]
{
background: rgb(25,25,25);
color: rgb(150,200,50);
}
form#contact.envoye [type=submit] .wait {display: none;}
form#contact.envoye [type=submit] .good {display: block;}
@media (max-height: 800px) {
	form#contact input, form#contact textarea, form#contact button {padding: 0.5em;}
	form#contact input, form#contact textarea {padding-left: 2.5em;}
	form#contact > i {font-size: 1.3em;}
}