/* Définition des polices */

@font-face {
    font-family: 'rochester';
    src: url('polices/Rochester-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

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

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

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

/*------------------------------------------------------------------------------------*/
/*-------------------------------------- Header --------------------------------------*/
/*------------------------------------------------------------------------------------*/

#header_ligne_haut
{
	height: 2%;
	background: #ffffff;
	position: fixed;
	opacity: 0.95;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
}

#header_bloc
{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;	
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	background: url(img/tn_header_img_fond.jpg) center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 1%;
	height: 96vh;
	opacity: 1;
	position: relative;
}

@media all and (min-width: 500px) and (max-width: 700px)
{
	#header_bloc
	{
		height: 97vh;
	}
}

@media all and (max-width: 500px)
{
	#header_bloc
	{
		height: 98vh;
	}
}

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
	#header_bloc 
	{
		height: 660px;/*738px;*/
		background-attachment: scroll;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{
	#header_bloc
	{
		height: 910px;/*983px;*/
		background-attachment: scroll;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) 
{
	#header_bloc 
	{
		height: 300px;/*313px;*/
		background-attachment: scroll;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) 
{
	#header_bloc
	{
		height: 530px;/*557px;*/
		background-attachment: scroll;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) 
{
	#header_bloc
	{
		height: 235px;/*314px;*/
		background-attachment: scroll;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) 
{
	#header_bloc
	{
		height: 400px; /*470px;*/
		background-attachment: scroll;
	}
}

#header_section_logo
{
	position: relative;
	height: 65%;
	width: 35%;
	margin-bottom: 10%;
	cursor: pointer;
}

@media all and (min-width: 620px) and (max-width: 750px)
{
	#header_section_logo
	{
		width: 42%;
	}
}

@media all and (min-width: 500px) and (max-width: 620px)
{
	#header_section_logo
	{
		width: 50%;
	}
}

@media all and (min-width: 440px) and (max-width: 500px)
{
	#header_section_logo
	{
		width: 60%;
	}
}

@media all and (max-width: 440px)
{
	#header_section_logo
	{
		width: 65%;
	}
}

#svg-logo-entier
{
	position: absolute;
	height: 100%;
	width: 100%;
}

.logo_triangle
{
	position: absolute;
	bottom: -15px;
	left: 49%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.svg-logo_triangle
{
	position: absolute;
	height: 100%;
	width: 100%;
}

.logo_triangle:hover
{
	bottom: -8px;
}

/* Menu de navigation*/

#header_nav
{
	width: 100%;
	background: #ffffff;
	opacity: 0.95;
	z-index: 999;
}

nav
{
	width: 60%;
	min-width: 700px;
	margin: auto;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

@media all and (max-width: 750px)
{
	nav
	{
		width: 95%;
		min-width: 100px;
	}
}

nav ul
{
    width: 40%;
	height: 40px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	-webkit-transition: width 1s;
    -moz-transition: width 1s;
    -ms-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.menu_small_device
{
	display:none;
}

#menu_logo_droite
{
	display:none;
	width: 70%;
	padding: 0px 5% 0px 5%;
}

#menu_logo_droite li
{
	height: 20px;
	width: 20px;
	position: relative;
	margin: 0px;
	padding:0px;
}

.nav-svg-logo
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
	width: 100%;
}

/*logo itinéraire*/
.nav-svg-logo #path4138, .nav-svg-logo #path4173-1-19, .nav-svg-logo #path4173-1-19-2, .nav-svg-logo #path4173-1-19-0, .nav-svg-logo #path4173-1-19-01
{
	stroke:#6e6e6e;
	fill:#6e6e6e;
}

.nav-svg-logo #path4138-6, .nav-svg-logo #path4166
{
	stroke:#6e6e6e;
	fill:none;
}

/*logo journal*/
.nav-svg-logo #path4181, .nav-svg-logo #path4143  
{
	opacity:1;
	fill:none;
	fill-opacity:1;
	stroke:#6e6e6e;
}

.nav-svg-logo #rect4138, .nav-svg-logo #path4183, .nav-svg-logo #path4183-5
{
	opacity:1;
	fill:#6e6e6e;
	fill-opacity:1;
	stroke:#6e6e6e;
}

.nav-svg-logo #rect4145-8, .nav-svg-logo #path4214, .nav-svg-logo #rect4223, .nav-svg-logo #rect4223-9, .nav-svg-logo #rect4223-9-1
{
	opacity:1;
	fill:#6e6e6e;
	fill-opacity:1;
	stroke:none;
}

.nav-svg-logo #rect4223-9-1-6, .nav-svg-logo #rect4223-9-1-6-6, .nav-svg-logo #rect4223-9-1-6-1, .nav-svg-logo #rect4223-9-1-6-63, .nav-svg-logo #rect4223-9-1-6-9
{
	opacity:1;
	fill:#6e6e6e;
	fill-opacity:1;
}

/*logo coups d'oeil*/
.nav-svg-logo #path6576
{
	fill:#6e6e6e;
}

/*logo coups de coeur*/
.nav-svg-logo #path5886
{
	fill:none;
	stroke:#6e6e6e;
}

.nav-svg-logo #path5903
{
	fill:#6e6e6e;
}

.nav-svg-logo #path5905, .nav-svg-logo #path5905-0
{
	fill:#6e6e6e;
	fill-opacity:1;
	stroke:#6e6e6e;
}

/*logo itinéraire*/
#menu_logo_droite li a:hover .nav-svg-logo #path4138, #menu_logo_droite li a:hover .nav-svg-logo #path4173-1-19, #menu_logo_droite li a:hover .nav-svg-logo #path4173-1-19-2, #menu_logo_droite li a:hover .nav-svg-logo #path4173-1-19-0, #menu_logo_droite li a:hover .nav-svg-logo #path4173-1-19-01
{
	stroke:#5e94be;
	fill:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #path4138-6, #menu_logo_droite li a:hover .nav-svg-logo #path4166
{
	stroke:#5e94be;
	fill:none;
}

/*logo journal*/
#menu_logo_droite li a:hover .nav-svg-logo #path4181,#menu_logo_droite li a:hover .nav-svg-logo #path4143  
{
	stroke:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #rect4138,#menu_logo_droite li a:hover .nav-svg-logo #path4183, .nav-svg-logo #path4183-5
{
	fill:#5e94be;
	stroke:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #rect4145-8,#menu_logo_droite li a:hover .nav-svg-logo #path4214,#menu_logo_droite li a:hover .nav-svg-logo #rect4223,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1
{
	fill:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1-6,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1-6-6,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1-6-1,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1-6-63,#menu_logo_droite li a:hover .nav-svg-logo #rect4223-9-1-6-9
{
	fill:#5e94be;
}

/*logo coups d'oeil*/
#menu_logo_droite li a:hover .nav-svg-logo #path6576
{
	fill:#5e94be;
}

/*logo coups de coeur*/
#menu_logo_droite li a:hover .nav-svg-logo #path5886
{
	stroke:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #path5903
{
	fill:#5e94be;
}

#menu_logo_droite li a:hover .nav-svg-logo #path5905,#menu_logo_droite li a:hover .nav-svg-logo #path5905-0
{
	fill:#5e94be;
	stroke:#5e94be;
}

@media all and (min-width: 460px) and (max-width: 620px)
{
	#menu_gauche
	{
		display: none;
	}
	.menu_small_device
	{
		display:block;
	}
	#menu_droite
	{
		width: 75%;
		padding: 0px 0px 0px 0px;
	}
	nav
	{		
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;	
		-webkit-justify-content: center;
		-moz-justify-content: center;
		justify-content: center;
	}
}

@media all and (min-width: 360px) and (max-width: 460px)
{
	#menu_gauche
	{
		display: none;
	}
	.menu_small_device
	{
		display:block;
	}
	#menu_droite
	{
		width: 85%;
		padding: 0px 0px 0px 0px;
	}
	nav
	{		
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;	
		-webkit-justify-content: center;
		-moz-justify-content: center;
		justify-content: center;
	}
}

@media all and (max-width: 360px)
{
	#menu_gauche
	{
		display: none;
	}
	#menu_droite
	{
		display: none;
	}
	#menu_logo_droite
	{
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: -moz-flex;		   /* Firefox 18+*/
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
	nav
	{		
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;	
		-webkit-justify-content: center;
		-moz-justify-content: center;
		justify-content: center;
	}
}

.nav_titre
{
	width: 0%;
	text-align: center;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#nav_titre_small_device
{
	display: none;
}

@media all and (max-width: 460px)
{
	#nav_titre_small_device
	{
		display: block;
	}
	#nav_titre_big_device
	{
		display: none;
	}
}

nav ul li a
{
	font-family: ralewaylight;
	font-size: 1em;
	color: #6e6e6e;
    padding: 0px;
    text-decoration: none;
	margin: 0px;
}

@media all and (max-width: 400px)
{
	nav ul li a
	{
		font-size: 0.9em;
	}
}

.nav_titre a
{
	font-family: rochester;
	font-size: 0em;
	color: #5e94be;
    padding: 0px;
    text-decoration: none;
	margin: 0px;
	-webkit-transition: font-size 1s;
    -moz-transition: font-size 1s;
    -ms-transition: font-size 1s;
    -o-transition: font-size 1s;
    transition: font-size 1s;
}

nav ul li a:hover
{
    color: #5e94be;
}

.nav_titre a:hover
{
    opacity: 0.5;
}

#header_nav_ligne
{
	height: 1px;
	width: 0%;
	margin: auto;
	background: #6e6e6e;
	opacity: 0;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#header_nav.fixed
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 999;
}

#header_nav.fixed  #menu_gauche
{
	width: 35%;
}

#header_nav.fixed  #menu_droite
{
	width: 35%;
}

@media all and (min-width: 460px) and (max-width: 620px)
{
	#header_nav.fixed  #menu_droite
	{
		width: 73%;
		padding: 0px 2% 0px 0px;
	}
}

@media all and (max-width: 460px)
{
	#header_nav.fixed  #menu_droite
	{
		width: 85%;
		padding: 0px 0px 0px 0px;
	}
}

#header_nav.fixed #header_nav_ligne
{
	width: 100%;
	opacity: 0.2;
}

#header_nav.fixed .nav_titre
{
	width: 25%;
}

@media all and (min-width: 460px) and (max-width: 620px)
{
	#header_nav.fixed .nav_titre
	{
		width: 27%;
		text-align: left;
	}
}

@media all and (min-width: 360px) and (max-width: 460px)
{
	#header_nav.fixed .nav_titre
	{
		width: 15%;
		text-align: left;
	}
}

@media all and (max-width: 360px)
{
	#header_nav.fixed .nav_titre
	{
		width: 20%;
		text-align: left;
	}
}

#header_nav.fixed .nav_titre a
{
	font-size: 1.4em;
}

@media all and (max-width: 400px)
{
	#header_nav.fixed .nav_titre a
	{
		font-size: 1.25em;
	}
}

/*------------------------------------------------------------------------------------*/
/*-------------------------------- Contenu de la page --------------------------------*/
/*------------------------------------------------------------------------------------*/

/* Compteur */

#section_counter
{
	max-width: 750px;
	width: 95%;
	margin: auto;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	font-size: 1.5em;
	line-height: 1.75;
	padding-top: 100px;
}

@media all and (min-width: 400px) and (max-width: 750px)
{
	#section_counter
	{
		padding-top: 75px;
	}
}

@media all and (min-width: 340px) and (max-width: 400px)
{
	#section_counter
	{
		padding-top: 60px;
		font-size: 1.3em;
	}
}

@media all and (min-width: 280px) and (max-width: 340px)
{
	#section_counter
	{
		padding-top: 60px;
		font-size: 1.2em;
	}
}

@media all and (max-width: 280px)
{
	#section_counter
	{
		padding-top: 60px;
		font-size: 1em;
	}
}

#section_counter span
{
	color: #5e94be;
}

#counters
{
	width: 77%;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
}

@media all and (max-width: 340px)
{
	#counters
	{
		width: 90%;
	}
}

#localisation
{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;	
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
}

#geolocalisation
{
	height: 25px;
	width: 18px;
	margin-right: 5px;
	position: relative;
}

#svg-geolocalisation
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
	width: 100%;
}

/* descriptif du projet */

#section_descriptif
{
	max-width: 750px;
	width: 98%;
	margin: auto;
	padding: 75px 1% 0px 1%;
}

@media all and (min-width: 400px) and (max-width: 750px)
{
	#section_descriptif
	{
		padding-top: 50px;
	}
}

@media all and (max-width: 400px)
{
	#section_descriptif
	{
		padding-top: 40px;
	}
}

#corps_du_texte
{
	font-size: 1em;
	text-align: justify;
	line-height: 1.5;
	margin: 0px;
	padding: 0px;
}

@media all and (max-width: 400px)
{
	#corps_du_texte
	{
		font-size: 0.9em;
	}
}

#Bouton
{
	width: 100%;
	padding: 0px;
	margin-top: 30px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	text-align: right;
}

#Bouton:hover
{
	opacity: 0.5;
}
	
#Bouton a
{
	text-decoration: none;
	font-size: 0.8em;
	color: #5e94be;
	border-radius: 1px;
	border: #5e94be 1px solid;
	padding: 7px 12px 7px 12px;
}

/* Section nouvelles publications*/

#separation_articles
{
	max-width: 830px;
	width: 100%;
	margin: auto;
	margin-top: 100px;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
}

@media all and (max-width: 750px)
{
	#separation_articles
	{
		margin-top: 50px;
	}
}

#separation_articles_trait_gauche
{
	background: #d6d6d6;
	height: 1px;
	width: 30%;
	margin: 0px;
}

#separation_articles_trait_droit
{
	background: #d6d6d6;
	height: 1px;
	width: 30%;
	margin: 0px;
}

@media all and (min-width: 440px) and (max-width: 620px)
{
	#separation_articles_trait_gauche, #separation_articles_trait_droit
	{
		width: 24%;
	}
}

@media all and (min-width: 340px) and (max-width: 440px)
{
	#separation_articles_trait_gauche, #separation_articles_trait_droit
	{
		width: 17%;
	}
}

@media all and (min-width: 280px) and (max-width: 340px)
{
	#separation_articles_trait_gauche, #separation_articles_trait_droit
	{
		width: 15%;
	}
}

@media all and (max-width: 290px)
{
	#separation_articles_trait_gauche, #separation_articles_trait_droit
	{
		width: 8%;
	}
}

h1
{
	font-size:1.3em;
}

@media all and (min-width: 340px) and (max-width: 400px)
{
	h1
	{
		font-size:1.2em;
	}
}

@media all and (max-width: 340px)
{
	h1
	{
		font-size:1.1em;
	}
}


#section_carousel
{
	margin: 0px 0px 100px 0px;
	padding: 50px 0px 0px 0px;
	overflow:hidden;
    width:100%;
	position: relative;
}

@media all and (max-width: 400px)
{
	#section_carousel
	{
		margin: 0px 0px 50px 0px;
		padding: 25px 0px 0px 0px;
	}
}

.panes
{
	width:250%;
	position: relative;
	left: -43.5%;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: -moz-flex;		   /* Firefox 18+*/
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
}

@media all and (max-width: 620px)
{
	.panes
	{
		width: 400%;
		left: -100%;
	}
}

.photo_carousel
{
    position:relative;
    float:left;
	width: 23%;
	margin: 0px;
	margin-left: 1%;
	margin-right: 1%;
	padding: 0px;
}

@media all and (max-width: 620px)
{
	.photo_carousel
	{
		width: 23%;
	}
}

.photo_carousel img
{
    display:block;
    width:100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.titre_photo_carousel
{
    font-size:1.3em;
    padding: 0px;
	margin: 0px;
    position:absolute;
    right:0px;
    top:40%;
    left:0px;
    text-align:center;
    color:#ffffff;
	font-family: ralewaylight;
}

.titre_photo_carousel h2
{
	padding: 0px 0px 15px 0px;
	margin: 0px;
}

@media all and (min-width: 1000px) and (max-width: 1150px)
{
	.titre_photo_carousel
	{
		font-size:1.1em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 10px 0px;
	}
}

@media all and (min-width: 900px) and (max-width: 1000px)
{
	.titre_photo_carousel
	{
		font-size:1em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 8px 0px;
	}
}

@media all and (min-width: 800px) and (max-width: 900px)
{
	.titre_photo_carousel
	{
		font-size:0.9em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 7px 0px;
	}
}

@media all and (min-width: 700px) and (max-width: 800px)
{
	.titre_photo_carousel
	{
		font-size:0.85em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 6px 0px;
	}
}

@media all and (min-width: 620px) and (max-width: 700px)
{
	.titre_photo_carousel
	{
		font-size:0.8em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 6px 0px;
	}
}

@media all and (min-width: 570px) and (max-width: 620px)
{
	.titre_photo_carousel
	{
		font-size:1.1em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 10px 0px;
	}
}

@media all and (min-width: 500px) and (max-width: 570px)
{
	.titre_photo_carousel
	{
		font-size:1em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 8px 0px;
	}
}

@media all and (min-width: 440px) and (max-width: 500px)
{
	.titre_photo_carousel
	{
		font-size:0.9em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 7px 0px;
	}
}

@media all and (min-width: 380px) and (max-width: 440px)
{
	.titre_photo_carousel
	{
		font-size:0.8em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 6px 0px;
	}
}

@media all and (min-width: 340px) and (max-width: 380px)
{
	.titre_photo_carousel
	{
		font-size:0.7em;
	}

	.titre_photo_carousel h2
	{
		padding: 0px 0px 5px 0px;
	}
}

@media all and (max-width: 340px)
{
	.titre_photo_carousel
	{
		font-size:1.2em;
		top:43%;
	}

	.titre_photo_carousel h2
	{
		display: none
	}
}

.chapitre-carousel
{
	font-family: ralewaylightitalic;
	display: inline-block;
	padding:0;
	margin:0;
}

#trait_separation
{
	background-color: #ffffff;
	display: inline-block;
	height: 1px;
	width: 50px;
	padding:0;
	margin:0px 20px 5px 20px;
}

@media all and (max-width: 340px)
{
	.chapitre-carousel
	{
		font-family: ralewaylight;
	}

	#trait_separation
	{
		display: none
	}
}

.bouton_defilement-droite
{
	position: absolute;
	top: 52%;
	right: 10%;
	height: 7%;
	width: 7%;
	margin: 0px;
	padding:0px;
	cursor: pointer;
	z-index: 2;
}

.bouton_defilement-gauche
{
	position: absolute;
	top: 52%;
	left: 10%;
	height: 7%;
	width: 7%;
	margin: 0px;
	padding:0px;
	cursor: pointer;
	z-index: 2;
}

@media all and (min-width: 620px) and (max-width: 900px)
{
	.bouton_defilement-droite
	{
		top: 55%;
	}

	.bouton_defilement-gauche
	{
		top: 55%;
	}
}

@media all and (max-width: 620px)
{
	.bouton_defilement-droite
	{
		top: 52%;
		right: 5%;
		height: 10%;
		width: 10%;
	}

	.bouton_defilement-gauche
	{
		top: 52%;
		left: 5%;
		height: 10%;
		width: 10%;
	}
}

.svg-fleche 
{
	position: absolute;
	height: 100%;
	width: 100%;
}

#path-droite
{
	stroke:#ffffff;
	stroke-width:13;
	stroke-opacity:0;
}

#path-gauche
{
	stroke:#ffffff;
	stroke-width:13;
	stroke-opacity:0;
}

#circle-droite
{
	stroke:none;
	fill:#ffffff;
	fill-opacity:0;
}

#circle-gauche
{
	stroke:none;
	fill:#ffffff;
	fill-opacity:0;
}

#layer-droite:hover #path-droite
{
	stroke-opacity:0.9;	
}

#layer-gauche:hover #path-gauche
{
	stroke-opacity:0.9;
}