:root {
/*
	If changed, update utils/highcharts.php as well
*/
    --blue: #0094C6;
    --white: #F2F7F2;
    --red: #DD1C1A;
    
    --lightblue: #63aec7;
    --lightred: #de7e7c;
    
    --black: #040F16;
    --grey: #C2C7C2;
    --black-op: rgba(0,0,0,0.9);
    --orange: #F7B538;
    
    --gold: #E3B505;
    --purple: #BD93BD;
    --yellow: #FFFD82;
    --green: #53DD6C;

	--twitter-blue: #1DA1F2;
}


html {
	min-height:100%;
	background: var(--white);
	height:100%;
}

.notranslate {
    content: "notranslate";
}

body {
    margin : 0;
	height:100%;
    /*font-family: 'averia-sans-libre', cursive;*/
	font-family: 'Montserrat', sans-serif;
	font-size: medium;
    color: var(--black);
}

div#all_page {
	width:100%;
}
div.header {
	display: inline-block;
	background: var(--white);
	font-size: 50px;
  	vertical-align: middle;
	height: 100px;
	line-height: 100px; /*V center*/
	top:0;
	width: 50%;
	z-index: 100;
}
div#header_l {
	background-image:-moz-linear-gradient(left, var(--blue), var(--white));
	background-image:linear-gradient(to right, var(--blue), var(--white));
	text-align: right;
}
div#header_r {
	background-image:-moz-linear-gradient(left, var(--white), var(--red));
	background-image:linear-gradient(to right, var(--white), var(--red));
	text-align: left;
}

iframe.full_width_video {
    width: 960px;
    height: 540px;
    text-align: center;
}
iframe.half_width_video {
    width: 480px;
    height: 270px;
    text-align: center;
}
video.full_width_video {
    width: 960px;
    height: 540px;
    text-align: center;
}
video.half_width_video {
    width: 480px;
    height: 270px;
    text-align: center;
}

ul.side {
	text-align: center;
	position: fixed;
	display: block;
	top: 0;
	width: min-content;
}
ul.side li {
	display: inline-block;
	width: 100%;
}
ul.side a {
	display: block;
	color: var(--white);
	text-decoration: none;
}
ul.side img {
	width: 60px;
}
ul.side a p {
	display: none;
	padding: 0 10px 0 10px;
}
ul.side li:hover a p {
	display: block;
	width: 250px;
}
ul.side li {
	height:70px;
	opacity: 0.2;
}
ul.side li:hover {
	width:330px;
	opacity: 1;
}
.left {
	float: left;
	left:0;
	text-align: left;
}
.right {
	float: right;
	right: 0;
	text-align: right;
}
ul.left_part a {
	background:var(--blue);
}
ul.right_part a {
	background:var(--red);
}


div.left_part {
    width:50%;
    background-color: var(--blue);
    position:fixed;
    z-index: -1;
    height: 100%;
}
div.right_part {
    width:50%;
    background-color: var(--red);
    position:fixed;
    z-index: -1;
    height: 100%;
}

div#central_part {
	width: auto;
    max-width: 960px;
	border: 0;
    background-color: var(--white);
	border-left: 100px solid var(--blue);
	border-right: 100px solid var(--red);
	margin: auto;
	min-height: 100hv;
}




/*hr style: https://css-tricks.com/examples/hrs/*/
hr {
	border: 0;
	height: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
	background: var(--black);
	background-image: -moz-linear-gradient(to right, var(--blue), var(--white), var(--red));
	background-image: linear-gradient(to right, var(--blue), var(--white), var(--red));
}
/*end hr*/



/*v Table v*/
table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid var(--black);
    text-align: center;
}

table tr {
    background-color: var(--lightred);
}
table tr:nth-child(even) {
    background-color: var(--lightblue);
}
table tr:hover {
    background-color: var(--white);
}
table th {
    background-color: var(--black);
    color: var(--white);
}

table.fake {
    background-color: var(--white);
    color: var(--black);
}
table.fake th {
    background-color: var(--white);
    color: var(--black);
    border: none;
}
table.fake td {
    background-color: var(--white);
    color: var(--black);
    border: none;
}

table.not-full {
	width: auto;
    margin:auto;
}
.center {
	text-align: center;
}
/*^ Table ^*/



.center {
	text-align: center;
}
.third_width {
	width: 33.33%;
}
.half_width {
	width: 50%;
}
.half_center {
	width: 50%;
	margin-left: 25%;
}
.full_width {
	width: 100%;
}
p {
	padding: 1em 2% 1em 2%;
	text-align: center;
}

img.border {
	border-radius: 20px;
}
p.empty {
	height: 90px;
}


/*Menu*/
ul {
	padding: 0;
	list-style: none;
	margin: 0;
}

/*end menu*/


/*Pi page: retour à ligne*/
p#pi {
	text-overflow: ellipsis;
	word-wrap: break-word;
}
/*end pi*/

/*Titles*/
h1 {
	background: var(--black);
	color: var(--white);
	text-align: center;
	padding: 12px 0px;
}


/*Diapo TDF, change img (contient js)*/
div.diapo_content {
	position: relative;
}
div.diapo_previous {
	position:absolute;
	top:0px;
	left:0px;
	width:50%;
	height:100%;
	z-index:2;
	cursor: url(micons/left.png), auto;
}
div.diapo_next {
	position:absolute;
	top:0px;
	right:0px;
	width:50%;
	height:100%;
	z-index:2;
	cursor: url(micons/right.png), auto;
}
/*end diapo TDF*/



/*Spoiler afficher/cacher, films*/
div.spoiler {
    width: 100%;
    cursor: pointer;
}

pre.films {
	font-family: 'Montserrat', sans-serif;
	font-size: small;
	text-align: center;
	display: none;
}
.hide {
	display: none;
}
h2.films {
	text-align: center;
	font-size: xx-large;
	margin: 0;
}
/*end spoiler films*/



/*Youtube*/
div#youtube {
	display:none;
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left:0;
	background-color: var(--black-op);
	text-align: center;
}

div#youtube iframe {
	border:0
}

div.yt_link {
	cursor: pointer;
	border-radius: 25px;
}
/*End Youtube*/

/*Comment part*/
div#comment {
	display:none;
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left:0;
	background-color: var(--black-op);
	text-align: center;
	color: var(--white);
}
div#comment form {
	width: 50%;
	margin: auto;
}

/*Footer*/
img.icon_footer {
    width: 5%;
    margin-left: 3%;
    margin-right: 3%;
    vertical-align: middle;
}

/*Links*/
a:link {
  color: var(--blue);
}
a:visited {
  color: var(--blue);
}
a:hover {
  color: var(--blue);
}
a:active {
  color: var(--blue);
}

/*End Links*/

/* Buttons */
button:hover {
    box-shadow: 0px 0px 0 0;
    background-color: var(--blue);
    cursor: pointer;
}
button {
    padding: 5px;
    margin: 5px;
    background-color: var(--red);
    color: var(--white);
    border-width: 3px;
    border-color: var(--black);
    border-radius: 20px 5px;
    box-shadow: 5px 5px 3px 0 var(--grey);
}
button.blue {
	background-color: var(--blue);
}
button.blue:hover {
	background-color: var(--red);
}
input {
    border-radius:5px;
    background-color: var(--white);
}



/* end buttons*/