@import url(http://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

body, html {
	width:100%;
	height:100%;
	margin:0;
}

body {
	margin:0;
	background:#fff;
}

img {
   max-width: 100%;
   height: auto;
   border:none;
}

sup {
	vertical-align:text-top;
}

a {
	text-decoration: none;
}

#menu .item-resp {
	display:none;
	visibility:hidden;
}

#top{
	position:fixed;
	bottom:20px;
	right:20px;
	font-size:2em;
	color:#fff;
	width:2em;
	height:2em;
	line-height:2em;
	text-align:center;
	text-decoration:none;
	background:#23470D;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	-webkit-transition:all .4s ease;
	transition:all .4s ease;
	display:none;
	cursor:pointer;
	z-index:1000;
}
#top:hover{
	background:#000;
	color: #c3c8a0;
}

#main {
	width:100%;
	height:100%;
}

#menu {
	position:fixed;
	top:0px;
	width:96%;
	height:150px;
	padding:0 2%;
	background-color: #23470D;
	text-align:right;
	line-height:150px;
	z-index:500;
}
#menu a {
	text-decoration:none;
	-webkit-transition:all .4s ease;
	transition:all .4s ease;
}
#menu .item {
	display:inline-block;
	font:300 20px 'Raleway', sans-serif;
	color:#fff;
	text-transform:uppercase;
}
#menu .item a, #menu .item-resp a {
	color:#c3c8a0;
	margin:0 10px;
}
#menu .item a:hover, #menu .item a.on, #menu .item-resp a:hover, #menu .item-resp a.on {
	color:#fff;
}

#menu .logo {
	display:inline-block;
	position:relative;
	float:left;
	margin:10px 0 0 0;
	width:auto;
	height:130px;
	-webkit-transition:all .4s ease;
	transition:all .4s ease;
}
#menu .logo img {
	width:auto;
	height:130px;
	border:none;
}
#menu .logo span.diplomes {
	position:absolute;
	top:90px;
	left:128px;
	font:200 13px 'Raleway', sans-serif;
	text-transform:none;
	z-index:800;
}
#menu .logo span.diplomes a {
	color:#fff;
	font-weight:400;
	letter-spacing:1px;
}
#menu .logo span.diplomes a:hover {
	color:#ddd;
}

#main .mots {
	position:absolute;
	top:150px;
	right:0px;
	background:rgba(255,255,255,0.60);
	padding:20px;
	z-index:400;
}

#main .accroche {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	width: auto;
	text-align: center;
	font: 400 26px 'Raleway', sans-serif;
	color: #fff;
	line-height: 1.4;
	background-color: rgba(35,71,13,0.8);
	padding: 5px 30px;
	border-radius: 12px;
	z-index: 300;
}
#main .accroche strong {
	font-size: 30px;
	font-weight: 600;
	color: #c3c8a0;
}
#main .accroche a {
	color: #c3c8a0;
	transition: .3s linear;
}
#main .accroche a:hover {
	color: #fff;
}


/* ancres +++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.ancre {
  display: block;
  height: 10px;
  /*margin-top: -100px;*/
  visibility: hidden;
}

#rubrique {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 136px;
	text-align: left;
	position: relative;
}
#rubrique .content {
	width: 100%;
	background-color: rgba(255,255,255,0.85);
	padding-bottom: 40px;
	text-align: left;
}
#rubrique .content .txt {
	display: inline-block;
	margin: 0 5%;
	width: 90%;
	font: 400 20px 'Raleway', sans-serif;
	color: #000;
	line-height: 26px;
}
#rubrique .content .txt:last-of-type {
	margin: 1.5em 5% 0;
}
#rubrique .content .txt h4, #rubrique .content .special h4 {
	font: 600 30px 'Barlow Condensed', sans-serif;
	color: #23470D;
}
#rubrique .content .txt span.chapo, #rubrique .content .special span.chapo {
	font-weight:600;
	color: #23470D;
}
#rubrique .content .txt span.chapo strong, #rubrique .content .special span.chapo strong {
	font-size:24px;
}
#rubrique .content .txt span.logo-article {
	float: right;
	width: 30%;
	margin: 0 0 1em 30px;
}
#rubrique .special .txt span.logo-standard {
	float: right;
	width: 40%;
	margin: 0 0 1em 20px;
}
#rubrique .content .txt a, #rubrique .content .special a {
	color: #23470D;
	transition: .25s linear;
}
#rubrique .content .txt a:hover, #rubrique .content .special a:hover {
	color: #000;
}

#rubrique .content .special {
	display: inline-block;
	margin: 0 5%;
	width: 90%;
	font: 400 20px 'Raleway', sans-serif;
	color: #000;
	line-height: 26px;
}

#rubrique .content h1 {
	background:#23470D;
	width:100%;
	height:100px;
	line-height:100px;
	font:200 38px 'Raleway', sans-serif;
	color:#fff;
	text-transform:uppercase;
	margin:0;
}
#rubrique .content h1 span.titre-rubrique {
	float:right;
	margin:30px 30px 0 0;
}
#rubrique .content h1 img {
	float:left;
	width:auto;
	height:60px;
	margin:20px auto 0 30px;
}
a .item {
	background-color: rgba(35,71,13,0.7);
	padding: 15px;
	border-radius: 6px;
	color: #fff;
	transition: .3s linear;
}
a .item h5 {
	font: 400 15px 'Raleway', sans-serif;
	margin: 6px 0 0;
}
a:hover .item {
	background-color: rgb(35,71,13);
}

/* Contacts *********************************************************/
h2 {
	font:400 28px 'Barlow Condensed', sans-serif;
	color:#23470D;
	margin:20px 0 .5em 0;
	line-height:30px;
}
h2.noir {
	color:#000;
}
.txt-contacts {
	font:600 20px 'Raleway', sans-serif;
	color:#000;
	line-height:28px;
}
.txt-contacts strong {
	color:#23470D;
}
p.share {
	margin-bottom: 2.5em;
	text-align: center;
}
.txt-contacts a, span.chapo a {
	text-decoration:none;
	color:#23470D;
	-webkit-transition:all .4s ease;
	transition:all .4s ease;
}
span.chapo a:hover {
	color:#23470D;
}
p.share a img {
	display: inline-block;
	width: 32px;
	background-color: #23470D;
	padding: 10px;
	text-align: center;
	margin: 0 8px;
	border-radius: .2em;
	transition: .4s ease;
}
p.share a img:hover, .txt-contacts a:hover {
	background-color: #000;
	border-radius: 1em;
}
#rubrique .content .txt span.chapo span.gold {
	font-size:26px;
	font-weight:400;
	color:#23470D;
}
.baseline {
	width: 100%;
	text-align: center;
	font: 400 14px Verdana, Helvetica, sans-serif;
	color: #000;
}
.baseline a {
	color: #23470D;
	transition: .25s linear;
}
.baseline a:hover {
	color: #000;
}

/* formulaire ********************************************************/

.formulaire_spip {
	display: inline-block;
	width: 100%;
	margin: 2em auto 0 auto;
}
label {
	display: inline-block;
	width: 17%;
	text-align: right;
	height: 30px;
	line-height: 30px;
	margin: 0 2% .8em 0;
	font: 400 1.2em 'Raleway', sans-serif;
	color: #000;
	text-transform: uppercase;
}
input.text {
	display: inline-block;
	width: 76%;
	height: 30px;
	line-height: 30px;
	padding: 10px 2%;
	background-color: #C1C89E;
	border: 0;
	border-radius: 6px;
	margin-bottom: .8em;
	font-size: 1em;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	transition: .25s linear;
}
textarea {
	display: inline-block;
	width: 76%;
	padding: 10px 2%;
	background-color: #C1C89E;
	border: 0;
	border-radius: 6px;
	font-size: 1em;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	transition: .25s linear;
}
input.text:focus, textarea:focus {
	background-color: #fff;
}
p.boutons {
	margin: 1em 0 0;
	text-align: right;
}
button {
	cursor: pointer;
	background-color: #23470D;
	color: #fff;
	font-size: 1.25em;
	text-transform: uppercase;
	transition: .3s linear;
	border: 0;
	border-radius: 6px;
	padding: 10px 20px;
}
button:hover {
	background-color: #000;
}


/*********************************************************************** */
@media (max-width: 1100px) {
	
#menu .item {
	font:200 16px 'Raleway', sans-serif;
}
#main .mots {
	width:35%;
}
	
}

/*********************************************************************** */
@media (max-width: 910px) {
	
#menu .item {
	display:none;
	visibility:hidden;
}
#main .mots {
	width:40%;
}
#menu .item-resp {
	display:inline-block;
	visibility:visible;
	font:300 18px 'Raleway', sans-serif;
	text-transform:uppercase;
	margin-top:22px;
}
#menu .item-resp a {
	display:inline-block;
	width: 100%;
	margin:0 20px 8px 0 !important;
}
	
}

/*********************************************************************** */
@media (max-width: 640px) {
	
#menu {
	width:98%;
	padding:0 1%;
}
#menu .item-resp {
	font: 500 20px 'Barlow Condensed', sans-serif;
	margin-top:18px;
}
#menu .item-resp a {
	margin:0 20px 6px 0 !important;
}

#main .mots {
	width:50%;
}

}

/*********************************************************************** */
@media (max-width: 520px) {
	
#menu .logo {
	margin:25px 0 0 0;
	height:100px;
}
#menu .logo img {
	height:100px;
}
#main .mots {
	display:none;
	visibility:hidden;
}
#main {
	display:block;
	height:1000px;
}

}