html, body, textarea, input {font-family: 'Rokkitt', serif}
html {position: relative; min-height: 100%}
body {background: #fff url(img/index.jpg) no-repeat center;background-size:cover;margin-bottom: 5rem;background-attachment: fixed}
a {color:#903e5e}
a:hover {color: #c83063}
/* header */

header h1 {margin-top: 40px}
header h3 {font-size: 170%;margin-top: -1em;text-transform: uppercase;font-family: 'Allerta Stencil', sans-serif;color:#fff}

.nav {position: absolute; top: 72px; margin-left:320px;background:#fff;border: 5px solid #000;padding: 0 15px}
nav a {text-transform: uppercase;font-size: 173%;font-family: 'Allerta Stencil', sans-serif;color:#000}
nav a:hover {color:#903e5e}
.nav-fill .nav-item {border: 0}
.nav-fill .nav-item:last-child {border-right:0 }
nav .nav-link {padding:0;margin: 3px}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background: #fff;color:	 #903e5e}

.nav-item:after  {content:" \2002 \007c \2002 "}
.nav-item:last-child:after {content:"  "}

/* content */

article {margin-top: -235px; margin-left:420px;margin-right:60px;background:#fff url(img/bg_content.gif);padding: 1em; font-size: 120%;border: 5px solid #000}
article h3 {font-size: 100%; text-transform: uppercase;font-weight: 600}
article blockquote {font-size: 170%; padding: 0;color:#903e5e;line-height: 120%}
article dl {font-size: 85%;text-align: left}

.mejs__pixplayer .paused .mejs__controls,
.mejs-audio-wrapper-skin-pixplayer {margin: 0 !important}

#formulaire_contact {margin-bottom: 3em}
#formulaire_contact legend {display: none}
#formulaire_contact .editer {margin: .6em 0} 
#formulaire_contact ul {padding: 0}
#formulaire_contact li {list-style-type: none;margin-bottom: 1rem;padding:0}
#formulaire_contact label {display: block;margin:0}
#formulaire_contact label strong {display:none}
#formulaire_contact .text, textarea {background-color: #dbdbdb;border:0 none;padding: .1em .3em}
#formulaire_contact textarea {width: 100%}
#formulaire_contact  .submit {cursor: pointer;background:#000;color:#fff;border: 0 none;margin-top: .6em;padding:.2em .6em}
.erreur_message {color: red}
.erreur .text,
.erreur textarea {border: 1px solid red}

/* footer */

footer {position:absolute;bottom:0;width:100%;padding: 1.4rem;text-align: right}
footer p {text-transform: uppercase;font-size: 170%;font-family: 'Allerta Stencil', sans-serif;color:#fff;margin-bottom: 0}

/* small screen */

@media screen and (max-width: 1198px) { 
	header h1 img {width:280px;height: auto}
	.nav {margin-left:255px}
	nav a {font-size: 133%}
	article {margin-top: -180px; margin-left:310px;padding: .8em}
	article .spip_document_image img {width: 100%; height: auto}

}
@media screen and (max-width: 990px) { 
	header h1 {margin-top: 20px}
	header h1 img {width:230px;height: auto}
	header h3 {font-size: 120%;margin-top: -.8em}
	.nav {margin-left:250px;top: 42px}
	nav a {font-size: 110%}
	.nav .nav-link {padding:0px;margin: 2px}
	article {margin-top: -150px; margin-left:250px;padding: .8em;font-size: 110%}
	.container {max-width: 95%}
	footer p {font-size: 120%}

}
@media screen and (max-width: 640px) {
	body {font-size: 80%}
	header h1 img {width:165px;height: auto}
	header h3 {font-size: 100%;margin-top: -.5em}
	.nav {margin-left:188px;top: 32px;width: 124px;border: 3px solid #000}
	nav a {font-size: 105%}
	.nav .nav-link {padding:0;margin: 2px}
	.nav-fill .nav-item {text-align: left}
	.nav-item:after {content:"  "}
	article {margin: 20px 0 10px 0;padding: .8em;font-size: 110%;border: 3px solid #000}
	article blockquote {font-size: 110%}
	#formulaire_contact .text {width: 100%}
	.erreur_message {display: block;font-size: 90%}
}