/* --------------------------------------------------*/
/* 					CSS DOCUMENT					 */
/* --------------------------------------------------*/

* {
    box-sizing: border-box;
}

body {
    /*background:#CCCCCC;*/
	background:#FFFFFF;
	color:#333;
	font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.42857;
	margin:0;
	padding:0;
	width:100%;
}

nav {
	margin:0;
	padding:0;
}

nav a {
	margin:0;
	padding:0;
}

@media only screen and (max-width:1280px) {
#horizontal {
	display:none;
}
}

@media only screen and (min-width:1280px) {
#vertical {
	display:none;
}
}

ul {
	margin:0;
	padding:0;
}

li  {
	margin:0;
	padding:0;
}

h1,.h1{font-size: 1.9em;font-weight:bold;}
h2 {font-size: 1em;font-weight:bold;}
h3,.h3{
	font-size: 1.2em;
	font-weight:bold;
	display:block;
	width:100%;
	background:#333;
	color:white;
    padding: 8px 12px;
	text-transform: uppercase;
}
.h2{clear:both;font-size: 1em;font-weight:bold;background:none;text-transform: none;height:40px;}
h4,.h4{font-size: 1.1em;font-weight:bold;}
h5,.h5{font-size: 1em;font-weight:bold;}
h6,.h6{font-size: .85em;font-weight:bold;}

@media only screen and (max-width: 800px) {

	.h2 {
	text-align:center;
	display:block;
	width:100%;
	background:#333;
	color:white;
	height:50px;
	line-height:50px;
	margin:0 0 10px 0;
	padding:0;
	text-transform: uppercase;
	}
	
	.h2 a {
		color:white;
	}

}

a{
	color: #000000;
	text-decoration: none;
}
a:hover,a:focus{color:#FF0000;}

.credit {display:block; font-family: Arial; color: #999999; font-size: 10px; text-align:right; padding-right:5px; }
.biographie {display:block; font-family: Arial; color: red; font-size: 16px; font-weight:bold; text-align:left; padding-left:5px; }
.creditMin {display:block; font-family: Arial; color: #999999; font-size: 9px; text-align:right; padding-right:5px; }

/* --------------------------------------------------*/
/* 							HEADER					 */
/* --------------------------------------------------*/

#header {
	z-index:1;
	background:#000000;
	display:block;
	margin:0;
	width:100%;
	top:0;
	height:60px;
	text-align:left;
	position:fixed;
	
}

#header h1 {
	top:0;
	margin:0;
	padding:0;	
}

#header .logo {
	top:0;
    width: 220px;
	margin:5px 0 0 50px;
}

#header a .logo {
	float:left;
}

#header .pub {
	top:0;
	margin:auto;
}

@media only screen and (max-width: 1280px) {

.pub {
	display:none;
}

}


@media only screen and (max-width: 800px) {
	#header .logo {
		top:0;
	    width: 150px;
		margin:20px 0 0 50px;
	}

}

#header #search {
	position:absolute;
	margin:0 150px 0 150px;
	width:50%;
	right:0;
	top:0;
	display:none;
	padding:0;
}

#banniere {
		display:none;
}






@media only screen and (max-width:1280px) {

#toggle {
		position:fixed;
		display:block;
		top:0;
		left:0;
		width:50px;
		z-index:100000;
		margin:5px 0 0 0;
		padding:0;
		text-align:left;
}

#toggle img {
		width:80%;
		cursor: pointer;
		margin:0;
		padding:0;
}


#toggle a {
		cursor: pointer;
		margin:0;
		padding:0;
}

}

@media only screen and (min-width:1280px) {
#toggle {
	display:none;
}
}

#toggle-search {
		position:fixed;
		display:block;
		top:0;
		right:100px;
		width:40px;
		z-index:100000;
		margin:18px 5px 0 0;
		padding:0;
		text-align:left;
}

#toggle-search img {
		width:60%;
		cursor: pointer;
		margin:0;
		padding:0;
}


#toggle-search a {
		cursor: pointer;
		margin:0;
		padding:0;
}
@media only screen and (max-width:1280px) {
/* --------------------------------------------------*/
/* 							MENU					 */
/* --------------------------------------------------*/
#overlay {
    display: none;
}

.overlay{
    display: block;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: #000000;
    opacity: 0.5;
    z-index: 100000;
}

@media only screen and (min-width: 600px) {
	.overlay {
		display:none;
	}
}

#menu-mobile {
	z-index:100000;
    background-color: #333;
	margin:0;
	bottom:0;
	font-size:12px;
	display:none;
	position:fixed;
	top:0;
	width:300px;
}

@media only screen and (min-width: 800px) {
#menu-mobile {
		top:0;
		width:300px;
	    background-color:#000000;
}
}

#menu-mobile ul {
	z-index:100000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#000000;
}

#menu-mobile li {
	z-index:100000;
    float: left;
	width: 100%;

}

#menu-mobile .titres {
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
	z-index:100000;
    display: block;
    background-color:#666666;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	width:100%;
	border-bottom:1px solid #666666;
	border-right:none;
	font-weight:bold;
}


#menu-mobile li a:link, #menu-mobile li a:visited {
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
	z-index:100000;
    display: block;
    background-color:#000000;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	width:100%;
	border-bottom:1px solid #666666;
	border-right:none;	
}

#menu-mobile li a:hover, #menu-mobile li a:active {
	z-index:100000;
    background-color: #666666;
	width:100%;
	border-right:none;	
}
}

@media only screen and (min-width:1280px) {
#menu-mobile {
	display:none;
}
}
/* --------------------------------------------------*/
/* --------------------------------------------------*/
/* 							MAIN					 */
/* --------------------------------------------------*/
/* --------------------------------------------------*/

/* --------------------------------------------------*/
/* 							CENTRE					 */
/* --------------------------------------------------*/
.center-div {
	 position:relative;
	 margin: 0 auto;
	 margin-top:60px;
     width: 100%;
	 padding:0;
	 background-color:transparent;
}

@media only screen and (min-width: 1024px) {
.center-div {
     width: 1024px;
}
}

@media only screen and (min-width: 1280px) {
.center-div {
     width: 1280px;
}
}




/* --------------------------------------------------*/
/* 							chapitre				 */
/* --------------------------------------------------*/

article {
	margin:0;
	padding:0;
}

figure {
	margin:0;
	padding:0;
}

.chapitre {
	clear:both;
	background:#FFFFFF;
	margin:0;
	z-index:10000;
	width:100%;
	text-align:justify;
	padding:0;
}

@media only screen and (max-width: 800px) {
	.chapitre {
		margin-top:100px;
	}
}


.chapitreCenter {
	clear:both;
	background:#FFFFFF;
	margin:0;
	z-index:10000;
	width:100%;
	padding:0;
	display:block;
	height:100px;
	text-align:center;
}

.chapitre p {
	z-index:10002;
	margin:5px;
}

.chapitre ul {
	clear:both;
	margin:0;
	padding:0;
}

.chapitre li {
	display : list-item;
	list-style:none;
}

.chapitre a {
/*	color:#FFFFFF;*/
	cursor:pointer;
}

.chapitre a:hover {
	color:red;
}
/*
article h2 {
	text-align:left;
	display:block;
	font-size:14px;
	width:100%;
	margin:5px;
	padding:0;
	height:40px;
}*/

.year {
	clear:both;
	padding:5px;
	margin:20px 10px 10px 10px;
	text-decoration:none;
	color:red;
	font-size:2em;
}

.article {
	color:#333;
	text-align:center;
	width:100%;
}

.article figure {
	float:left;
	margin:0;
	padding:0;
}

.article figure img {
	width:100%;
	padding:10px;
}


.article p {
	margin:10px;
	padding:10px;
	text-align:justify;
}

.commentaire {
	width:98%;
	padding:10px;
	margin:5px;
	border:1px solid #999999;
}

.commentaire figure img {
	float:left;
	width:50px;
	margin:10px;
}


.commentaire p {
	margin:10px;
	padding:10px;
	text-align:justify;
}



.cadreImgPl {display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:250px;vertical-align:text-bottom;}
.cadreImgPl figure {width:30%;float:left;}
.cadreImgPl img {width:98%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}
.cadreImgPl p {float:right;width:65%;text-align:justify;	margin:10px;
	padding:10px;
}



@media only screen and (max-width: 800px) {
	/* Only for desktop */
	.cadreImgPl { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:800px;vertical-align: text-bottom;}
	.cadreImgPl figure {width:100%;}
	.cadreImgPl img {width:100%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}
	.cadreImgPl p {width:100%;text-align:justify;	margin:10px;
	padding:10px;
}
}

@media only screen and (max-width: 600px) {
	/* Only for desktop */
	.cadreImgPl { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:700px;vertical-align: text-bottom;}
	.cadreImgPl figure {width:100%;}
	.cadreImgPl img {width:100%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}
	.cadreImgPl p {width:100%;text-align:justify;margin:10px;padding:10px;}
}


.cadreImg { display:block;width:33.3%;text-align:center;margin:0;padding:0;float:left;height:350px;vertical-align:text-bottom;}
.cadreImg img {width:98%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}

@media only screen and (min-width: 600px) {
	/* Only for desktop */
	.cadreImg h2 {height:70px;vertical-align:text-bottom;}
	.cadreImg h3 {height:70px;vertical-align:text-bottom;}	
}
/*
@media only screen and (max-width: 800px) {
	.cadreImg { display:block;width:50%;text-align:center;margin:0;padding:0;float:left;height:400px;vertical-align: text-bottom;}
	.cadreImg figure {margin:0;padding:0;}
	.cadreImg figure a {margin:0;padding:0;}
	.cadreImg figure img {width:100%;margin:0;padding:0;}
}
*/
@media only screen and (max-width: 600px) {
	/* Only for desktop */
	.cadreImg { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:500px;vertical-align: text-bottom;}
	.cadreImg figure {margin:0;padding:0;}
	.cadreImg figure a {margin:0;padding:0;}
	.cadreImg figure img {width:100%;margin:0;padding:0;}
}

@media only screen and (max-width: 400px) {
	/* Only for desktop */
	.cadreImg { height:300px;}
}




.cadreImgTXT { display:block;width:33.3%;text-align:center;margin:0;padding:0;float:left;height:550px;vertical-align:text-bottom;}
.cadreImgTXT img {width:98%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}
.cadreImgTXT p {display:block;width:96%;text-align:justify;margin:0;padding:5px;float:left;height:160px;vertical-align:text-top;}

@media only screen and (min-width: 600px) {
	/* Only for desktop */
	.cadreImgTXT h2 {vertical-align:text-bottom;}
	.cadreImgTXT h3 {vertical-align:text-bottom;}	
}
/*
@media only screen and (max-width: 800px) {
	.cadreImg { display:block;width:50%;text-align:center;margin:0;padding:0;float:left;height:400px;vertical-align: text-bottom;}
	.cadreImg figure {margin:0;padding:0;}
	.cadreImg figure a {margin:0;padding:0;}
	.cadreImg figure img {width:100%;margin:0;padding:0;}
}
*/
@media only screen and (max-width: 600px) {
	/* Only for desktop */
	.cadreImgTXT { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:650px;vertical-align: text-bottom;}
	.cadreImgTXT figure {margin:0;padding:0;}
	.cadreImgTXT figure a {margin:0;padding:0;}
	.cadreImgTXT figure img {width:100%;margin:0;padding:0;}
}

@media only screen and (max-width: 400px) {
	/* Only for desktop */
	.cadreImgTXT { height:700px;}
}





.cadreImgP2 { display:block;width:33.3%;text-align:center;margin:0;padding:0;float:left;height:400px;vertical-align:text-bottom;}
.cadreImgP2 img {width:98%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}

@media only screen and (min-width: 600px) {
	/* Only for desktop */
	.cadreImgP2 h2 {height:40px;vertical-align:text-bottom;}
	.cadreImgP2 h3 {height:40px;vertical-align:text-bottom;}	
}
/*
@media only screen and (max-width: 800px) {
	.cadreImg { display:block;width:50%;text-align:center;margin:0;padding:0;float:left;height:400px;vertical-align: text-bottom;}
	.cadreImg figure {margin:0;padding:0;}
	.cadreImg figure a {margin:0;padding:0;}
	.cadreImg figure img {width:100%;margin:0;padding:0;}
}
*/
@media only screen and (max-width: 600px) {
	/* Only for desktop */
	.cadreImgP2 { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:500px;vertical-align: text-bottom;}
	.cadreImgP2 figure {margin:0;padding:0;}
	.cadreImgP2 figure a {margin:0;padding:0;}
	.cadreImgP2 figure img {width:100%;margin:0;padding:0;}
}

@media only screen and (max-width: 400px) {
	/* Only for desktop */
	.cadreImgP2 { height:400px;}
}






.cadreImgP { display:block;width:33.3%;text-align:center;margin:0;padding:0;float:left;height:60px;vertical-align:text-bottom;}
.cadreImgP img {width:98%;margin:0;padding:0;vertical-align:text-bottom;border:1px solid #000000;}

@media only screen and (max-width: 800px) {

	.cadreImgP { display:none;}
}

/*
@media only screen and (min-width: 600px) {

	.cadreImgP h2 {height:50px}
}

@media only screen and (max-width: 600px) {

	.cadreImgP { display:block;width:100%;text-align:center;margin:0;padding:0;float:left;height:500px;vertical-align: text-bottom;}
	.cadreImgP figure {margin:0;padding:0;}
	.cadreImgP figure a {margin:0;padding:0;}
	.cadreImgP figure img {width:100%;margin:0;padding:0;}
}

@media only screen and (max-width: 400px) {

	.cadreImgP { height:400px;}
}

*/



.sectionmain {
	width:100%;
	margin:0;
	padding:0;
}

.sectionvideo {
	width:100%;
	margin:0;
	padding:0;
}


@media only screen and (min-width: 1024px) {
.sectionmain {
	width:72%;
	margin:0;
	padding:0;
	float:left;
}
}


/* --------------------------------------------------*/
/* 							Programmes				 */
/* --------------------------------------------------*/
#grille table {
	text-align:center;
}

#grille tr {
}

#grille td {
	width:12,5%;
	padding:5px;
	margin:0;
	background-color:
	#DBDBDB;
}

#grille .b {
	background-color:
	#666666;
	color:#FFFFFF;	
}

#grille .r {
	background-color:
	#858585;
}

#grille .g {
	background-color:
	#A3A3A3;
}

#grille .w {
	background-color:
	#C0C0C0;
}

#grille .y {
	background-color:
	#A8A8A8;
}

#grille .c {
	background-color:
	#F4F4F4;
}

#grille .d {
	background-color:#020202;
	color:#FFFFFF;
}


/* --------------------------------------------------*/
/* 					VIDEO				 */
/* --------------------------------------------------*/

@media only screen and (max-width: 800px) {
	.ordi {
		display:none;
	}
}


	.videoOrdi {
		padding:0;
		background:transparent;
		padding:0;
		margin:0;
		border:0;
	}

@media only screen and (min-width: 800px) {
	.videoOrdi {
		height:600px;
	}
}

@media only screen and (min-width: 1280px) {
	.videoOrdi {
		height:700px;
	}
}

	.videoOrdiSingle {
		padding:0;
		background:transparent;
		padding:0;
		margin:0;
		border:0;
	}

@media only screen and (min-width: 800px) {
	.videoOrdiSingle {
		height:500px;
	}
}

@media only screen and (min-width: 1280px) {
	.videoOrdiSingle {
		height:400px;
	}
}

.titreOrdi2018 {
	font-weight:bold;
	padding:10px;
	margin:0;
	background:transparent;
	color:#333;
	text-align:center;
	width:100%;
	display:block;
}

.buttonVote {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 20px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
	font-weight:bold;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 8px;	
}

.disabledVote {
    opacity: 0.6;
    cursor: not-allowed;
	background-color: #f44336;
}

/* --------------------------------------------------*/
/* 							Aside				 */
/* --------------------------------------------------*/
.aside {
	display:block;
	width:25%;
	margin:-3px 0 0 0;
	padding:0;
	float:right;
	text-align:left;

}

@media only screen and (max-width:1024px) {
	/* Only for desktop */
	.aside {
	width:100%;
	margin:0;
	}
}


/* --------------------------------------------------*/
/* 							Reseaux				 */
/* --------------------------------------------------*/
@media only screen and (max-width: 320px) {
	/* Only for desktop */
	.addthis_horizontal_follow_toolbox {
		display:none;
	}
}



@media only screen and (min-width:1280px) {


#menu-horizontal {
	display:block;
	margin-bottom:100px;
	position:fixed;
    margin: 0;
    padding: 0;
	width:1280px;
}

#menu-horizontal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

}

#menu-horizontal li {
    float: left;
    margin: 0;
    padding: 0;	
}

#menu-horizontal li a, .dropbtn {
    margin: 0;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 10px 12px 10px 12px;
    text-decoration: none;
}

#menu-horizontal li a:hover, .dropdown:hover .dropbtn {
    background-color: #666666;
}

#menu-horizontal li.dropdown {
    display: inline-block;
}

#menu-horizontal .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#menu-horizontal .dropdown-content a {
    color: black;
    padding: 8px 12px 8px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#menu-horizontal .dropdown-content a:hover {background-color: #f1f1f1}

#menu-horizontal .dropdown:hover .dropdown-content {
    display: block;
}

.active {
    background-color: #666666;
}

}

@media only screen and (max-width:1280px) {
#menu-horizontal {
	display:none;
}
}

.red {
	color:red;
}

.sautLigne {
	clear:both;
	margin:20px;
}

.justify {
	text-align:justify;
}


.slideshow {
   width: 728px;
   height: 140px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
   padding-top:50px;
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 400%;
   height: 90px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   float: left;
}

.suggestions ul {
   list-style: none;
}

.gcse-search {
	background-color:#FFFFFF;
}