body {
	margin : 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: "Arial"; /*"Ropa Sans";*/
}

#headbar {
	background: #fff;
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	z-index: 9999;
}
#headbar .headbar_container { 
	position: absolute;
    top: 50%;
    transform: translateY(-20%);
    width: 100%;
}

#headbar .titre { 
    text-transform: uppercase;
    color: #116084;
    font-size: 20px;
    margin-left: 30px;
    float: left;	font-family: 'Montserrat', sans-serif;
}

#headbar .burger { 
	display:none;
}

#headbar .functionality_holder { 
	float: right; 
	margin-right: 30px; 

}


#headbar .functionality_holder .functionality {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #000000;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: white;
	outline: 1px solid #ffffff;
	margin: 1px;
}

#headbar .functionality_holder .chapitres { 
	background-image: url('chapitres.jpg');

}
#headbar .functionality_holder .reseauxsociaux { 
	background-image: url('http://www.freeiconspng.com/uploads/options-icon-11.png');
}
#headbar .functionality_holder .options { 
	background-image: url('http://www.freeiconspng.com/uploads/options-icon-11.png');
}

/*#container { 
	width: 100%;
    height: calc(100% - 50px);
    display: block;
    background: #000000;
    position: relative;
    top: 50px;
    margin-top: 50px;
}

*/


#slides {
	/* position:relative; */
}

.slide {
	position: absolute;
	height: 0;
	transform: translateX(-50%);
	left: 50%;
	display: none;
	/*transition: height 10s;*/
}

.slide.active {
    display: block;
    height: 100%;
}

#slides .goto_prev {
	width: 35%;
}
#slides .goto_next {
	width: 35%;
	right: 0;
}

#slides .goto_action { 
	position:absolute;
	height: 100%;
}


#slides .goto_action.clickable { 
	cursor:pointer;
}


#slides .goto_action.clickable:hover {
	opacity: 0.8;
	background-repeat: no-repeat;
	background-size: 70px;
}
#slides .goto_next.clickable:hover {
	background-image: url('right.png');
	background-position: 90% 50%;
}
#slides .goto_prev.clickable:hover {
	background-image: url('left.png');
	background-position: 10% 50%;
}


#video {
	background: #000000;
}


.fullscreen {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	padding: none;
	top: 0;
	right: 0;
	position: absolute;
}


.windowed {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 320px;
	height: 197px;
	border: 1px solid #000000;
	outline: 2px solid #ffffff;
	/* padding: 2px; */
	z-index: 9000;
	transition: width 1s, height 1s, top 1s, right 1s, bottom 1s, left 1s;
	
}
.background_layer {
	position: absolute;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	z-index: 9400;
	display:none;
	cursor:pointer;
}
#paneling {
	position: fixed;
	top: -500px;
	width: 100%;
	height: 388px;
	background: rgba(17,96,132, 0.75);
	/* border-bottom: 1px solid #ffffff; */
	z-index: 9500;
	transition: top 0.5s; 
}


#paneling.active { 
	top:50px;
}

#paneling .panel_functionality {
	display: block;
	width: calc(100% - 150px);
	height: 75px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}


#paneling .panel_functionality .panel_functionality_holder {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}



#paneling .panel_functionality .functionality {
	 display: inline-block;
	 color: #969696;
	 text-transform: uppercase;
	 border: 1px solid transparent;
	 padding: 10px 12px;
	 margin: 0 5px;
	 cursor:pointer;
}

#paneling .panel_functionality .functionality {
    /*background: rgba(187, 209, 0, 0.5);*/
}

.functionality:hover {
    /*background:  rgba(0, 0, 0, 1);*/
}



#paneling .panel_functionality .functionality.active {
	 /* color: #ffffff; */
	 /* text-transform: uppercase; */
	 border: 2px solid #bbd100;
	 /* padding: 9px 11px; */
	 /* margin: 0 5px; */
}



#paneling .panel { 
	display: none;
}	

#paneling .panel.chapitres {
	width: 10000px;
	/* overflow: scroll; */
}


#paneling .panel.chapitres .chapitre {
	cursor: pointer;
	/*border: 2px solid #000;*/
	margin-bottom: 5px;
	padding: 8px;
	background: rgba(23, 135, 186, 0.5);
}

#paneling .panel.chapitres .chapitre:hover {
	background: rgba(23, 135, 186, 1);
}

#paneling .panel.chapitres .chapitre.active {
	/*background: rgba(187, 209, 0, 1);*/
	/*border: 2px solid white;*/
}

#panel_holder {
	height: calc(100% - 75px);
	width: calc(100% - 150px);
	left: 50%;
	position: relative;
	transform: translateX(-50%);
	overflow: hidden;
}


#panel_holder .chapitres {
	display: none;
}

#panel_holder .chapitres .chapitre {
	display: inline-block;
	width: 300px;
	/* height: calc(100% - 10px); */
	/* border: 1px solid #ffffff; */
	margin-right: 30px;
}

#panel_holder .documents .document {
	background-color: #116084; 
	margin-bottom: 30px; 
	padding: 10px; 
}
#panel_holder .liens .lien {
	background-color: #116084; 
	margin-bottom: 10px; 
	padding: 10px; 
}


#panel_holder .chapitres .chapitre .image {
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #000000;
	height: 150px;
}


#panel_holder .chapitres .chapitre .titre, 
#panel_holder .liens .lien .titre, 
#panel_holder .documents .document .titre {
	color: #FFFFFF;
	font-weight: bold;		font-family: 'Montserrat', sans-serif;
	/* margin-top: 10px; */
}

#panel_holder .chapitres .chapitre .contenu {
	color: #fff;		font-family: 'Arial', sans-serif;
	font-weight: normal;		font-size: 14px;
	margin-top:  10px;
	/*height: 105px;*/
	overflow: hidden;
}
#panel_holder .documents .document .contenu {
	color: #fff;		font-family: 'Arial', sans-serif;
	font-weight: normal;		font-size: 14px;
	margin-top:  10px;
	overflow: hidden;
	padding: 0px 10px 10px 0; /*    padding: 10px 10px 10px 0;*/
}

#panel_holder .documents .document .downloadLinkHolder {
	text-align:right;
	padding-right: 10px;

}
#panel_holder .documents .document .downloadLinkHolder a {
	color: #bbd100;	text-decoration:none;	font-size: 14px;

}

#panel_holder .options {
	display: block;
}

#panel_holder .options .column {
	display: inline-block;
	width: 33%;
}


#panel_holder .options .column .row {
	width: 100%; 
	display: block; 
}
#panel_holder .options .column .row .control {
	width: 18%;
	display: inline-block;
	text-align: right;
}

#panel_holder .options .column .row .legend {
	width: 80%;
	display: inline-block;
	text-align: left;
}


#paneling .panel_close {
	width: 100%;
	height: 40px;
	text-align: center;
	display: block;
	cursor: pointer;
	background-image: url('up.png');
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(17,96,132,-0.25);
	background-size: contain;
}


.switch_holder:hover { 
	cursor: pointer;
}
.switch_holder {
	width: 50px;
	height: 26px;
	background-color: white;
	border-radius: 15px;
	position: relative;
}

.switch_bitonio {
    position: absolute;
    width: 22px;
    height: 22px;
    background: black;
    border-radius: 15px;
    left: 2px;
    top: 2px;
    transition: left 0.5s;
}

.switch_bitonio.active {
    left: 26px;
    background-color: green;
}

.reseau {
	display: inline-block;
	/*width: 20px;*/
	height: 60px; /*20px;*/	padding-top:10%;
	/*border: 1px solid #000000;*/
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
	/*background-color: white;*/
	/*outline: 1px solid #ffffff;*/
	margin: 5px;
}

.reseau.mail { 
	/*background-image: url('mail.png');*/    padding-bottom: 20px;
}
.reseau.twitter { 
	/*background-image: url('twitter.png');*/    padding-bottom: 20px;
}
.reseau.facebook { 
	/*background-image: url('facebook.png');*/    padding-bottom: 20px;	/*padding-left: 18px;*/
}
.reseau.linkedin { 
	/*background-image: url('linkedin.png');*/    padding-bottom: 20px;
}
.reseau.google { 
	/*background-image: url('google.png');*/    padding-bottom: 20px;
}






/***********************************MEDIAS********************************/



@media (max-width: 479px) 
{
	#headbar .titre {    font-size: 10px;    margin-left: 30px;	width: 200px;	}
	#searchinput {	display:none;	}
	.providerLogo {display:none;}
	#paneling .panel_close1{display:none;}
	.logo-mobile {	border: 0px solid #1787ba;	    margin-top: -19px;}	
	.logopicto {   background-image: url(logo.jpg);	float:right;	width: 25px;    height: 25px;	margin-top: 0px;}a span{	position: absolute;    margin-top: -16px;    margin-left: -38px;    color: #116084;    background: rgba(255,255,255,.9);    padding: 5px;    border-radius: 6px;    box-shadow: 2px 2px 2px 2px rgba(131,141,287,0.1);    transform: scale(0) rotate(-12deg);    transition: all .25s;    opacity: 0;    font-size: 8px;    z-index: 1;}
	a:hover span, a:focus span{     transform:scale(1) rotate(0); 	 opacity:1;}
}



@media (min-width: 480px) and (max-width: 768px) 
{
	#headbar .titre {    
		font-size: 10px;   
		margin-left: 30px;	
		width: 500px;	
	}

	#searchinput {	
		display:none;	
	}

	.providerLogo {
		display:none;
	}

	#paneling .panel_close1{
		display:none;
	}	

	.logo-mobile {	
		border: 0px solid #1787ba;	    margin-top: -19px;
	}	

	.logopicto {   
		background-image: url(logo.jpg);	float:right;	width: 25px;    height: 25px;	margin-top: 5px;
	}	

	#paneling .panel_functionality {    
		left: 40%;	
	}	
}



@media (min-width: 769px) and (max-width: 1024px) {
	
	#headbar .titre {
	    font-size: 13px;    
	    margin-left: 30px;	
	    width: 600px;	
	    margin-top: 4px;	
	}

	#searchinput {	
		display:none;	
	}

	.providerLogo {
		display:none;	
	}
	#paneling .panel_close1{
		display:none;	
	}

	.logo-mobile {	
		border: 0px solid #1787ba;	    margin-top: -19px;	
	}	

	.logopicto {   
		background-image: url(logo.jpg);	float:right;	width: 25px;    height: 25px;	margin-top: 2px;	
	}

	a span{	position: absolute;    margin-top: -16px;    margin-left: -38px;    color: #116084;    background: rgba(255,255,255,.9);    padding: 5px;    border-radius: 6px;    box-shadow: 2px 2px 2px 2px rgba(131,141,287,0.1);    transform: scale(0) rotate(-12deg);    transition: all .25s;    opacity: 0;    font-size: 8px;    z-index: 1;}
	a:hover span, a:focus span{     transform:scale(1) rotate(0); 	 opacity:1;	}
}



#searchresults { 
	display: none; 
	background: white;
    width: 250px;
    border-left: 1px solid #1787ba;
    position: relative;
    top: -20px;
    left: -1px;
    padding-top: 20px;
    border-right: 1px solid #1787ba;
    border-bottom: 1px solid #1787ba;
    z-index: -1;
}

#searchresults .result {
    width: 229px;
    height: auto;
    display: block;
    margin: 5px;
    border: 1px solid #1787ba;
    padding: 5px;
    cursor: pointer;
}

#searchresults .result.clickable {
    cursor: pointer;
}

#searchresults .result.clickable:hover {
 	background: rgba(17,96,132, 0.1);
}

#searchresults .result .titre {
    margin-left: 0; 
    float: none;
}


#loader { 
	background: red;
	width: 100%;
	height:100%;
	z-index:9999;
}
#loaded { 
	background: blue;
	width: 100%;
	height:100%;
	z-index:9998;
	display:none;
}