/* ---------------------------------- STYLE DE BASE ---------------------------------- */
*{
	margin: 0;
	padding: 0;
}
html {
	font-size:100%;
	height:100%;
}
body {
    color: #626161;	
    font-family: "montserratregular", verdana, sans-serif;
    letter-spacing: 0.02em;
	height:100%;
	position:relative;
	background:url('img/fd_body.png') repeat-y top left #dfdfdf;
}

h1, .h1-like {
    font-size: 17px; 
	line-height:20px;
    font-weight: normal;
	color:#fff;
	font-family: 'montserratbold', sans serif, arial;
	text-transform:uppercase;
}
h2, .h2-like {
	font-size: 12px; 
	font-weight: normal;
	line-height:16px;
	color:#000;
	font-family:"montserratregular", verdana, sans-serif;
	vertical-align:bottom;
}
h3, .h3-like {
	color:#c00609;
	font-family: "montserratbold", verdana, sans-serif;
	font-size:18px;
	line-height:21px;
	margin-bottom: 10px;
	font-weight: normal;
	text-transform:uppercase;
}
h4, .h4-like {
	color:#ffffff;
	font-family: "montserratregular", verdana, sans-serif;
	font-size:18px;
	line-height:18px;
}
h5, .h5-like {
	color:#ffffff;
	font-family: "montserratregular", verdana, sans-serif;
	font-size:15px;
	line-height:15px;
}
h6, .h6-like {
    font-size: 1.1429em; /* equiv 16px */
    font-weight: normal;
    line-height: 1.3125em;
    margin:  1.3125em 0 0 0;
}

/* alternate font-sizing */
.smaller {
    font-size: .7143em; /* equiv 10px */
    line-height: 2.1em;
}
.small {
    font-size: .8571em; /* equiv 12px */
    line-height: 1.75em;
}
.big {
    font-size: 1.1429em; /* equiv 16px */
    line-height: 1.3125em;
}
.bigger {
    font-size: 1.2857em; /* equiv 18px */
    line-height: 1.1667em;
}
.biggest {
    font-size: 1.4286em; /* equiv 20px */
    line-height: 1.05em;
}

/* soft reset */
html,
body,
textarea,
figure,
label {
    margin: 0;
    padding: 0;
}
ul,
ol {
    padding-left: 0;
	list-style-type:none;
}
code, 
pre,
samp {
    white-space: pre-wrap;
    font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}
code { line-height: 1em; }
table { margin-bottom: 1.5em; }

/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}
/* avoid margins on nested elements */
li p,
li ul,
li ol {
    margin-top: 0;
    margin-bottom: 0;
}
/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
/* max values */
table, td, blockquote, code, pre, textarea, input, video {
    max-width: 100%;
}
/* you shall not pass */
p {
	text-align:justify;
	margin:0;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}
/* pictures */
img {
    width: auto;
	max-width:100%;
    /*height: auto;*/
    vertical-align: middle;
}
#supersized img{
	max-width:none;
}
a img { border: 0; }
/* scripts */
body > script {display: none !important;}
/* skip-links */
.skip-links {
    position: absolute;
}
.skip-links a {
    position: absolute;
    left: -9999px;
    padding: 0.5em;
    background: #000;
    color:#fff;
    text-decoration: none;
}
.skip-links a:focus {
    position: static;
}
strong{
	font-family: 'montserratbold', sans serif, arial;
	font-weight:normal;
}
#page .col_milieu a{
	color:#1070a7;
}
#page .col_milieu a:hover{
	color:#000;
	text-decoration:none;
}
/* ---------------------------------- BASE ---------------------------------- */

#menu{
	width:250px;
	float:left;
}

#canvas{
	margin-left:250px;
}

.block{
	display:inline-block;
}

.bouton{
	text-transform:uppercase;
	color:#fff;
	font-size:20px;
	line-height:23px;
}
.bouton span{
	display:block;
}
.picto{
	width:50px;
	height:50px;
	margin:0 auto;
}
#include{
    overflow: auto;
    padding-bottom: 2%;
}
/* ---------------------------------- MENU ---------------------------------- */

#form_recherche{
	padding:0 10%;
	margin:10% 0;
}
#form_recherche input{
	display:inline-block;
	vertical-align:middle;
}
#form_recherche #recherche{
	font-size:14px;
	line-height:17px;
	padding:4%;
	border:1px solid #c2c2c2;
    width: 75%;
}
#form_recherche #submit_recherche{
	width:16px;
	height:15px;
	padding:0;
	background:url('img/picto_recherche.png') no-repeat top left transparent;
	border:none;
	margin-left:3%;
	cursor:pointer;
}

#menu ul{
	list-style-type:none;
	border-top:1px solid #cbcbcb;
} 
#menu ul li{
	display:block;
}
#menu ul li a{
	display:block;
	border-bottom:1px solid #cbcbcb;
	text-transform:uppercase;
	text-decoration:none;
	font-size:14px;
	line-height:17px;
	color:#000;
	padding:3% 10%;
    transition: all 0.3s;
}
#menu ul li a:hover{
	padding:3% 8% 3% 12%;
}
#menu ul li a:hover,#menu ul li.actif a, #menu ul li #btn_facebook:hover, #menu ul li #btn_contact:hover,#menu ul li a.btn_contact.actif, #menu ul li #btn_sondages:hover,#menu ul li a.btn_sondages.actif {
	background:#dfdfdf;
} 
#menu ul li a .block_image{
	width:26px;
	margin:0 6% 0 0;
	text-align:center;
}
#menu ul li a span{
	vertical-align:middle;
	display:inline-block;
}
#menu ul li #btn_facebook{
	background:#1070a7;
	border:none;
	color:#fff;
	margin:10% 0 2% 0;
}
#menu ul li #btn_contact{
	background:#000;
	border:none;
	color:#fff;
	margin:0 0 2% 0;
}
#menu ul li #btn_sondages{
	background:#c00609;
	border:none;
	color:#fff;
	margin:0 0 6% 0;
}
#menu ul li #btn_facebook:hover, #menu ul li #btn_contact:hover,#menu ul li a.btn_contact.actif, #menu ul li #btn_sondages:hover,#menu ul li a.btn_sondages.actif {
	color:#000;
}
#menu ul #btn_map {
	background:url('img/fd_map.jpg') no-repeat center 35px  transparent ;
	height:140px;
}
#menu ul #btn_map a {
	height:105px;
	border:none;
}
#menu ul #btn_map a:hover, #menu ul #btn_map a.actif{
	background:none;
	color:#c00609;
}
#menu p{
	font-size:12px;
	line-height:15px;
	color:#000;
	margin:0;
	padding:0 10%;
}
#menu p.titre{
	padding:8% 10% 0 10%;
	margin:8% 0 0 0;
	font-size:14px;
	line-height:17px;
	color:#c00609;
	text-transform:uppercase;
	border-top:1px solid #cbcbcb;	
}
#menu p.marge{
	margin-top:6%;
}
#menu p.bottom{
	padding:0 10% 8% 10%;	
}

/* ---------------------------------- BANDEAU ---------------------------------- */
header{
	padding:0 2% 2% 2%;
	background:#201f1f;
	overflow:auto;
}
header .col_gauche{
	float:left;
	width:475px;
}
header #bandeau{
	margin-left:475px;
	position:relative;
	overflow:hidden;
	height:339px;
}
header .block{
	height:147px;
	width:435px;
	background:#fff;
	padding:9px 20px 20px;
	vertical-align:top;
	text-align:center;
    position: relative;
}
header .block a{
	vertical-align:bottom;
}
header .block a.pictoacc{
	position: absolute;
    bottom: 4%;
    left: 3%;
}
header #coordonnees{
	width:260px;
	height:135px;
	background:#c00609;
}
header #coordonnees h1{
	text-align: left;
}
header #coordonnees p{
	color:#fff;
	font-size:14px;
	line-height:17px;
}
header #coordonnees p.marge{
	margin-top:4%;
}
header .block.bouton{
	width:135px;
	height:125px;
    padding: 19px 20px 20px;
	background:#000;
    text-decoration: none;
}
header #bandeau img{
	max-width: none;
    max-height: 399px;
}
header #bandeau ol{
	position:absolute;
	bottom:3%;
	left:3%;
	padding:5px 8px;
	background:#fff;
	z-index:20;
}
header #bandeau ul li{
	/*display:inline-block;
	margin:0 2px;*/
}
header #bandeau ul li a{
	display:block;
	width:15px;
	height:15px;
	background:#000;
}
header #bandeau ul li a:hover,header #bandeau ul li a.actif {
	background:#c00609;
}
header .legende{
	position:absolute;
	padding:5px 8px;
	background:url('img/fd_legende.png');
	font-family: 'montserratregular', sans serif, arial;
	font-size:14px;
	line-height:19px;
	bottom:3%;
	right:3%;
	z-index:20;
    color: #fff;
}

/* ---------------------------------- BANDEAU ---------------------------------- */

#home ul{
	padding: 2%;
}
#home ul ul{
	padding: 0%;
}
#home nav li{
	background:#5c5b5b;
	margin:0 2% 2% 0;
	height:30%;
    vertical-align: top;
    float: left;
}
#home nav li.droite{
	background:#5c5b5b;
	margin:0 0 2% 0;
}
#home nav li.bas{
	background:#5c5b5b;
	margin:0 2% 0 0;
}
#home nav li.droite.bas{
	background:#5c5b5b;
	margin:0 0 0 0;
}
#home nav li.simple{
	width:23.5%;
    background: #0000ff;
    height: 250px;
}
#home nav li.double{
	width:49%;
    height: auto;
    margin: 0 2% 0 0;
    background: none;
}
#home nav li li.double{
	width:100%;
    background: #ff0000;
    height: 250px;
    margin: 0 0 4%;
}
#home nav li span.blockacc{
	display: block;
    width: 135px;
    height: 135px;
    text-align: center;
    padding: 15px;
    line-height: 135px;
    transition: all 0.3s;
}
#home nav li:hover span.blockacc{
    width: 160px;
    height: 160px;
}
#home nav li span.blockacc span{
	display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}
#home nav li a{
	color: #fff;
    font-family: 'montserratregular';
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    -webkit-hyphens: none;  
    -moz-hyphens: none;  
    -ms-hyphens: none;  
    hyphens: none; 
    word-wrap: break-word;
    display: block;
    height: 100%;
}
#home nav li span.blockacc img{
	margin: 10px 0;
}

#home nav li span.blockdouble{
	display: inline-block;
    height: 125px;
    text-align: center;
}
#home nav li span.blockdouble a{
	color: #fff;
    font-family: 'montserratbold';
    text-transform: uppercase;
    text-decoration: none;
    font-size: 17px;
    -webkit-hyphens: none;  
    -moz-hyphens: none;  
    -ms-hyphens: none;  
    hyphens: none; 
    word-wrap: break-word;
    display: inline-block;
    height: 100%;
    line-height: 20px;
    vertical-align: top;
}
#home nav li span.blockdouble a .textactu{
	text-transform: none;
    font-family: 'montserratregular';
    font-size: 14px;
    line-height: 17px;
}
#home nav li span.blockdouble a.blockactu{
    background: #f7941e;
    padding: 20px;
    width: 260px;
    line-height: 135px;
}

#home nav li span.blockdouble a.blockactu span{
    line-height: 20px;
    vertical-align: middle;
    display: inline-block;
}
#home nav li span.blockdouble a.blockagenda{
    background: #fff;
    padding: 20px;
    width: 260px;
    line-height: 120px;
    color: #585656;
}

#home nav li span.blockdouble a.blockagenda span{
    line-height: 20px;
    vertical-align: middle;
    display: inline-block;
}

#home nav li span.blockdouble a.blockactuall{
	color: #fff;
    font-family: 'montserratbold';
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    -webkit-hyphens: none;  
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none; 
    word-wrap: break-word;
    display: inline-block;
    height: 100%;
    line-height: 125px;
    vertical-align: top;
    width: 135px;
    padding: 20px;
    background: #000;
    opacity:0.8;
    -moz-opacity : 0.8;
    filter:alpha(opacity=80);
}

#home nav li span.blockdouble a h2{
	color: #fff;
    font-family: 'montserratregular';
    text-transform: uppercase;
    text-decoration: none;
    font-size: 17px;
    -webkit-hyphens: none;  
    -moz-hyphens: none;  
    -ms-hyphens: none;  
    hyphens: none; 
    word-wrap: break-word;
    margin-bottom: 10px;
}
#home nav li span.blockdouble a.blockagenda h2{
	color: #c00609;
}

#home nav li span.blockdouble a.blockactuall span{
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
}
.bjqs{
}
.bandL{
}
.bandR{
    height: 100%;   
}
/* ---------------------------------- PAGE CONTENU ---------------------------------- */
#page{
    padding: 2%;   
}
.col_gauche{
    float: left;
    width: 15%;
    background: #585656;
    hyphens: auto;
}
#page .col_gauche{
    min-height: 500px;
}
.col_gauche ul, .col_gauche_carteinteract{
    padding-bottom: 4%;
}
.col_gauche_carteinteract{
    color: #fff;
}
.col_gauche_carteinteract ul{
    margin-bottom: 15px;
}
.col_gauche_carteinteract label{
    margin: 10px 20px 6px;
}
.col_gauche_carteinteract ul li label{
    margin: 10px 6px 6px;
}
.col_gauche_carteinteract input{
    width: 86%;
    border: 1px solid #fff;
    color: #626161;
    margin: 0 0 6px 20px;
    padding: 1%;
}
.col_gauche_carteinteract input[type="button"]{
    background: none repeat scroll 0 0 #c00609;
    border: medium none;
    color: #fff;
    font-family: "montserratregular";
    font-size: 14px;
    text-transform: uppercase;
    width: 30%;
}
.col_gauche_carteinteract ul label, .col_gauche_carteinteract #contener_map li{
    text-align: left;
    text-transform: none;
}
.col_gauche_carteinteract label.vert{
    border-bottom: 1px solid #aeadad;
    display: block;
    font-size: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    text-transform: uppercase;
    width: 88%;
}
.col_gauche_carteinteract p{
    background: none repeat scroll 0 0 #201f1f;
    margin-bottom: 20px;
    padding: 10px 0;
    text-transform: uppercase;
}
.col_gauche_carteinteract ul input{
    width: 25px;
}
.col_gauche li, .col_gauche_carteinteract li{
    text-transform: uppercase;
    text-align: center;
}
.col_gauche li a, .col_gauche_carteinteract li a{
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid #a5a5a5;
    text-align: center;
    color: #fff;
    display: block;
    transition: all 0.3s;
}
.col_gauche ul ul li a{
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid #a5a5a5;
    text-align: center;
    color: #585656;
    display: block;
    transition: all 0.3s;
    background: rgba(255,255,255,0.75);
}
.col_gauche ul ul li a:hover, .col_gauche ul ul li a.actif{
    background: rgba(255,255,255,0.90);
}
.col_gauche li a:hover, .col_gauche li a.actif, .col_gauche_carteinteract li a:hover, .col_gauche_carteinteract li a.actif{
    background: rgba(255,255,255,0.90);
    color: #585656;
}
.col_gauche li.colgtitre, .col_gauche_carteinteract li.colgtitre{
    font-size: 20px;
    border-bottom: 1px solid #fff;
    padding: 15px 4px;;
    color: #fff;
}
.col_droite{
    width: 25%;
    min-height: 200px;
    float: right;
}
.col_droite #carte, .col_droite_carteinteract #carte{
    width: 100%;
    height: 500px;
}
.col_milieu{
    margin: 0 27% 0 17%;
    background: #fff;
    padding: 2%;
}
.col_milieu h2, .col_contact_gauche h2{
    border-bottom: 1px solid #999;
    font-size: 24px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    margin-right: 72px;
    line-height: 23px;
	text-transform:uppercase;
}
.col_milieu img{
    margin-bottom: 10px;
}
.col_gauche_carteinteract{
    width: 28%;
    float: left;
    background: #585656;
}
.col_droite_carteinteract{
    margin-left: 30%;
    background: #fff;
    padding: 2%;
}
.imgmenu{
    height: 200px;
}

.sondage{
    width: 100%;
}
.sondage h3{
    text-transform: uppercase;
    margin: 14px 0 8px;
}
.sdg_bar{
    background: none repeat scroll 0 0 #c00609;
    display: inline-block;
    height: 15px;
	margin-left:30px;
}
.sdg_lbl{
    display: inline-block;
}
.valid_sondage{
    cursor: pointer;
	color:#1070a7;
}
.valid_sondage:hover{
	color:#000;
	text-decoration:underline;
}
.sondquest{
	color:#000;
	margin-bottom:15px;
}
.deja_vote{
	margin-bottom:15px;
	font-size:12px;
	color:#c00609;
}
.sdg_num{
	display:inline-block;
	margin-right:10px;
	color:#626161;
}
.sdg_num img{
	margin-left:5px;
	vertical-align:middle;
}
.affich_result ul li p{
	color:#000;
}
.nb_reponses{
	color:#c00609;
}
.affich_result ul li{
	margin-bottom:20px;
}
#recherche .col_gauche ul{
    min-height: auto;   
}
#recherche .col_gauche{
    min-height: 500px;   
}
#recherche .col_gauche p{
    margin: 5px 20px;
    color: #fff;
}
h3.recherche {
    margin: 15px 0 5px;
    text-transform: uppercase;
}
.ctn_result a {
    color: #201f1f;
    text-decoration: none;
}
.ctn_result a:hover {
    color: #585656;
}

.sizetext{
    float: right;
    color: #000;
    font-size: 24px;
    line-height: 23px;
}
.sizetext a{
    cursor: pointer;    
}
.agenda_date{
    font-size: 14px;
    color: #585656;
}
.galerie{
    margin-top: 25px;   
}
.galerie li {
    display: inline;
}
.galerie li a {
    display: inline-block;
    height: 180px;
    margin: 0 1% 1% 0;
    width: 32%;
    position: relative;
}
.galerie li span{
    background: #585656;
    color: #fff;
    display: block;
    line-height: 24px;
    position: absolute;
    bottom: 0;
    width: 97%;
    padding: 1px 0 3px 3%;
}
#form_contact{
    margin: 0 0 30px;
}
#form_contact p{
    margin:15px 0;
}
#form_contact .blockgd p{
    margin: 0 0;
}
#form_contact .blockgd {
    margin: 15px 0;
}
#form_contact input, #form_contact textarea, #form_contact select {
    border: 1px solid #dedede;
    padding: 8px 2%;
    transition: all 0.3s;
}
#form_contact input:focus, #form_contact textarea:focus {
    border: 1px solid #d71016;
}
#form_contact input {
    width: 96%;
}
#form_contact input[type="submit"] {
    background: #585656 none repeat scroll 0 0;
    color: #fff;
    padding: 8px 30px;
    width: auto;
    font-family: "montserratregular";
    font-size: 16px;
}
#form_contact input[type="submit"]:hover {
    background: #282626;
}
/*#form_contact input:hover {
    background: #1070a7
}*/
#form_contact textarea {
    width: 96%;
    height: 120px;
}
#form_contact select {
    width: 100%;
}

.infos_noir::before{
	content: "";
	display:inline-block;
	width:6px;
	height:12px;
	background:url('img/fleche_noire.png') no-repeat top left;
	margin-right:5px;
}
.infos_gris::before{
	content: "";
	display:inline-block;
	width:6px;
	height:12px;
	background:url('img/fleche_grise.png') no-repeat top left;
	margin-right:5px;
}
/* ---------------------------------- CONTACT ---------------------------------- */
#contact{
    padding: 2%;
}
.col_contact_gauche{
    width: 45%;
    padding: 2%;
    float: left;
    background: #fff;
}
.col_contact_gauche .colg{
    width: 49%;
    float: left;
}
.col_contact_gauche p, .col_contact_gauche .blockgd{
    margin-bottom: 8px;
}
.col_contact_gauche .cold{
    margin-left: 49%;
    padding-left: 2%;
}
.col_contact_gauche label{
    color: #c00609;
    text-transform: uppercase;
}
.col_contact_gauche input, .col_contact_gauche textarea{
    border: 1px solid #000;
    width: 98%;
    padding: 1%;
}
.col_contact_gauche input[type='submit']{
    color: #fff;
    text-transform: uppercase;
    border: none;
    width: 30%;
    padding: 1%;
    background: #c00609;
    font-family: 'montserratregular';
    font-size: 14px;
    float: right;
}
.col_contact_gauche textarea{
    height: 250px;
}
.col_contact_droite{
    margin-left: 51%;
}

.col_contact_droite #carte{
    height: 100%;
    min-height: 500px;
}

/* ---------------------------------- ERREUR 404 ---------------------------------- */

#erreur404{
	left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
    background: #c00609 ;
    opacity:0.9;
    -moz-opacity : 0.9
    filter:alpha(opacity=90);	
	padding:40px 0;
}
#erreur404 p{
	text-align:center;
	color:#fff;
	
}

/* ---------------------------------- FONT ---------------------------------- */

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

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

/* ---------------------------------- RESPONSIVES ---------------------------------- */

@media (max-width:1300px){
	
	/*#home nav li.double {
		width: 53%;
	}
	
	#home nav li.simple {
		width: 21.5%;
	}*/

}


@media (max-width:1200px){
	
	#home nav li.double{
		float:none;
		width:100%;
	}
	
	#home nav li.simple {
		width: 48%;
	}
	
}