@font-face {
    font-family: 'GothamL';
    src: url('fonts/gotham-light-webfont.eot');
    src: url('fonts/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham-light-webfont.woff2') format('woff2'),
         url('fonts/gotham-light-webfont.woff') format('woff'),
         url('fonts/gotham-light-webfont.ttf') format('truetype'),
         url('fonts/gotham-light-webfont.svg#gothamlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-regular-webfont.eot');
    src: local('x'),
    	 url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-regular-webfont.woff') format('woff'),
         url('fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('fonts/oswald-regular-webfont.svg#oswaldbook') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="search"] {
-webkit-appearance: none;
}

body {
text-align: center;
line-height: 20px;
color: #454545;
font-weight: normal;
overflow-x: hidden;
font: normal 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#body {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#06070b+0,1b1f2b+50 */
background: #06070b; /* Old browsers */
background: -moz-linear-gradient(top,  #06070b 0%, #1b1f2b 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #06070b 0%,#1b1f2b 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #06070b 0%,#1b1f2b 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06070b', endColorstr='#1b1f2b',GradientType=0 ); /* IE6-9 */

}

:focus {
outline: 0;
}

::selection{
background-color: #ecb31e;
color: #ffffff;
}

/* Firefox */
::-moz-selection {
background-color: #6fc9c2;
color: #ffffff;
}

.footer { clear: both;}

#spip-admin{
z-index: 1000000000000000000000000000000000000000000000000000000000000000000;
font: 12px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
position: fixed;
right: -130px;
top: 50%;
padding: 20px 5px 5px 5px;
text-transform: uppercase;
transform: rotate(90deg);
}

.spip-admin-float {
float: none;
}

#ecrire,#var_mode,#voir_article,#voir_rubrique,#statistiques{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
background-color: #fff;
border: 1px solid #000000;
color: #000000;
opacity: 1;
}

#ecrire:hover,#var_mode:hover,#voir_article:hover,#voir_rubrique:hover,#statistiques:hover{
background-color: #000000;
border: 1px solid #000000;
color: #fff;
}

.spip-admin-boutons{
background-color: #fff;
border: 1px solid #000000;
color: #000000;
font: 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
}

/************* MENU MENU MENU *************/
/************* MENU MENU MENU *************/
/************* MENU MENU MENU *************/

body#body-header {
position: relative;
margin: 0;
padding: 0;
border: 0;
background: #ffffff url('img/header-banniere.jpg') no-repeat center top;
background-size: 100%;
}

header.large {
position: fixed;
top: 0;
width: 100%;
text-align: center;
}

header.large .logo a h1#logo{
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

position: relative;
display: inline-block;
z-index: 9999999;
width: 60%;
height: auto;
max-width: 400px;
max-height: 300px;
margin: 7% auto 30px auto;
}

header.large .logo a h1#logo img.img-logo{
position: relative;
width: 100%;
height: auto;
}

header.small{
z-index: 999999;
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
height: 170px;
}

header.small #small-center {
width: 90%;
max-width: 800px;
height: 150px;
margin: auto;
text-align: left;
}

header.small .logo a h1#logo{
position: relative;
display: inline-block;

width: 160px;
height: 130px;
margin: 20px 0 0 0;
}

header.small .logo a h1#logo img.img-logo{
position: relative;
width: 100%;
height: auto;
}


/************* CORPS DE LA PAGE D'ACCUEIL *************/
/************* CORPS DE LA PAGE D'ACCUEIL *************/
/************* CORPS DE LA PAGE D'ACCUEIL *************/

div#corps {
width: 90%;
max-width: 800px;
margin: 0 auto 0 auto;
padding-top: 600px;
padding-bottom: 60px;
}

@media screen and (max-width: 2440px){
div#corps{
padding-top: 550px;
}
}

@media screen and (max-width: 1600px){
div#corps{
padding-top: 470px;
}
}

@media screen and (max-width: 670px){
div#corps{
padding-top: 400px;
}
}

@media screen and (max-width: 530px){
div#corps{
padding-top: 350px;
}
}

div#corps2 {
width: 90%;
max-width: 800px;
margin: 0 auto 0 auto;
padding-top: 0;
padding-bottom: 60px;
}

#les-autres-articles {
position: relative;
display: block;
margin: 0 0 50px 0;
font: normal 30px 'Oswald', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
color: #000000;
}

#les-autres-articles i {
color: #9ab914;
font-style: normal;
}

div#corps img.spip_logo, div#corps2 img.spip_logo {
width: 100%;
height: auto;
margin-bottom: 25px;
}

div#corps a, div#corps2 a {
text-decoration: none;
color: #000000;
width: 100%;
margin: 0;
padding: 0;
height: 168px;
}

div#corps a:hover, div#corps2 a:hover {
background-color: #efefef;
}

div#corps a.articles-a-venir, div#corps2 a.articles-a-venir {
position: relative;
display: block;
clear: both;
text-align: left;
}

div#corps span.photo-article-a-venir, div#corps2 span.photo-article-a-venir {
position: relative;
display: block;
width: 300px;
height: 168px;
vertical-align: top;
float: left;
margin-right: 25px;
}

@media screen and (max-width: 870px){
div#corps span.photo-article-a-venir img.spip_logo, div#corps2 span.photo-article-a-venir img.spip_logo{
width: 30%;
height: auto;
margin-right: 5%;
}
}

div#corps a:hover img.spip_logo, div#corps2 a:hover img.spip_logo {
opacity: 0.7;
}

div#corps div.infos-article-a-venir, div#corps2 div.infos-article-a-venir {
position: relative;
display: inline;
float: left;
width: 450px;
margin-bottom: 70px;
}

div#corps div.infos-article-a-venir a.img, div#corps2 div.infos-article-a-venir a.img {
width: 100%;
height: auto;
}

@media screen and (max-width: 870px){
div#corps div.infos-article-a-venir, div#corps2 div.infos-article-a-venir{
width: 65%;
}
}

@media screen and (max-width: 870px){
div#corps a, div#corps2 a{
min-height: 220px;
}
}

div#corps div.infos-article-a-venir .date-article-a-venir, div#corps2 div.infos-article-a-venir .date-article-a-venir {
position: relative;
display: inline-block;
text-transform: uppercase;
font: normal 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin-bottom: 10px;
padding-top: 10px;
}

div#corps div.infos-article-a-venir h1, div#corps2 div.infos-article-a-venir h1 {
position: relative;
display: block;
margin: 0;
padding: 0;
font: normal 20px 'Oswald', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
background-color: #9ab914;
color: #ffffff;
padding: 5px 10px;
}

div#corps div.infos-article-a-venir h2, div#corps2 div.infos-article-a-venir h2 {
position: relative;
display: block;
color: #000000;
font: normal 16px 'Oswald', Helvetica, Arial, sans-serif;
display: inline-block;
margin-top: -10px;
margin-bottom: -20px;
}

div#corps div.infos-article-a-venir h2 i, div#corps2 div.infos-article-a-venir h2 i {
color: #9ab914;
font-style: normal;
}

div#corps div.infos-article-a-venir .texte-centre, div#corps2 div.infos-article-a-venir .texte-centre {
position: relative;
display: block;
font: normal 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.spip_doc_inner a img {
width: 100%;
height: auto;
}



/************* CORPS DE LA PAGE ARTICLE *************/
/************* CORPS DE LA PAGE ARTICLE *************/
/************* CORPS DE LA PAGE ARTICLE *************/

div#corps-page-article {
width: 90%;
max-width: 800px;
margin: 0 auto 0 auto;
padding-top: 600px;
padding-bottom: 60px;
}

@media screen and (max-width: 2440px){
div#corps-page-article{
padding-top: 550px;
}
}

@media screen and (max-width: 1600px){
div#corps-page-article{
padding-top: 470px;
}
}

@media screen and (max-width: 670px){
div#corps-page-article{
padding-top: 400px;
}
}

@media screen and (max-width: 530px){
div#corps-page-article{
padding-top: 350px;
}
}

div#corps-page-article img.spip_logo {
width: 100%;
height: auto;
margin-bottom: 25px;
}

div#corps-page-article h1 {
text-align: center;
color: #ffffff;
font: normal 32px 'Oswald', Helvetica, Arial, sans-serif;
background-color: #9ab914;
display: inline-block;
padding: 8px 35px;
text-transform: uppercase;
}

div#corps-page-article h2 {
text-align: center;
color: #000000;
font: normal 18px 'Oswald', Helvetica, Arial, sans-serif;
display: inline-block;
text-transform: uppercase;
margin-top: -10px;
}

div#corps-page-article h2 i {
color: #9ab914;
font-style: normal;
}

div#corps-page-article h3 p {
text-align: center;
color: #000000;
font: normal 18px 'Oswald', Helvetica, Arial, sans-serif;
display: inline-block;
text-transform: uppercase;
margin-top: -10px;
}

div#corps-page-article h3 p i {
color: #9ab914;
font-style: normal;
}

div#corps-page-article p {
text-align: left;
margin-top: 25px;
margin-bottom: 30px;
font: normal 16px Helvetica, Arial, sans-serif;
line-height: 23px;
}

div#corps-page-article h2.spip {
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;

padding: 3px 6px 3px 10px;

text-align: left;
color: #ffffff;
font: normal 18px 'Oswald', Helvetica, Arial, sans-serif;
display: block;
text-transform: uppercase;
background-color: #9ab914;
margin-top: 25px;
margin-bottom: -15px;
}

span.tiret {
z-index: 0;
color: #9ab914;
font: normal 25px Arial, sans-serif;
line-height: 0;
}

div#corps-page-article a {
color: #000000;
}

div#corps-page-article a:hover {
text-decoration: none;
}

span.photo-article2 {
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 60%;
margin-bottom: 30px;
}

/************* PIED DE PAGE *************/
/************* PIED DE PAGE *************/
/************* PIED DE PAGE *************/

.footer {
z-index: 999;
position: relative;
display: block;
clear: both;
width: 95%;
margin: 100px auto 180px auto;
text-align: center;
}

.footer a {
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

display: inline;
font: normal 14px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #000000;
text-decoration: none;
text-transform: uppercase;
}

a.retour-haut {
position: relative;
display: inline-block;
margin: auto;
width: 60px;
height: 60px;
background: #ffffff url('img/up.png') no-repeat center center;
background-size: contain;
margin-bottom: 60px;
opacity: 0.5;
}

a.retour-haut:hover {
opacity: 1;
}

.footer ul#partenaires{
position: relative;
}

.footer ul#partenaires li{
list-style: none;
display: inline;
float: none;
margin: 0;
padding: 0;
}

.footer ul#partenaires li a{
position: relative;
display: inline;
}

.footer ul#partenaires li a img{
height: 60px;
width: auto;
margin: 0 5px 10px 5px;
}