
	#debug {
		position:absolute;
		top:0;
		left:10%;
		display:none;
	}
	#second_ovl {
		z-index:3;
		color: #FFF;
		background-color: rgba(0,0,0,0.8);
		overflow: auto;
		padding: 0 50px 0 5%;
	}
	#second_ovl a.close {
		font-size:3em;
		position: fixed;
		left:10px;
		top:10px;
		font-weight:900;
	}
	#mp_denis {
		width:90px;
	}
	@media screen and (min-width: 680px) {
		#mp_denis { width:120px; }
	}
	@media screen and (min-width: 993px) {
		#mp_denis { width:150px; }
	}

/*
--------------------------------------------
			DOUL CSS 
--------------------------------------------			
*/
	html {
		scroll-behavior: smooth;
	}
	#cache {
		position:absolute;
		top:-200px;
	}
	a {
		text-decoration:none;
	}
/*
--------------------------------------------
			MAIN HEADER 
--------------------------------------------			
*/
	#main {
		margin-right:50px;
		z-index:0;
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}
	img.main-logo {	
		width:90px;
		text-align:right;
	}
	h1.main-titre {
		font-weight:600;
		margin-left:12%;
	}
	h2.main-titre  {
		font-weight:300;
		font-style:italic;
		margin-left:18%;
		padding-left:8%;
	}
	h1.resp {font-size: 20px;}
	h2.resp {font-size: 16px;}
	h3.resp {font-size: 14px;}
	h4.resp {font-size: 12px;}
	h5.resp {font-size: 11px;}
	h6.resp {font-size: 10px;}
	p.resp, li.resp, a.resp, td, th {font-size: 10px;}
	img.icon-resp {width:22px;vertical-align:text-bottom;}
	
	@media screen and (min-width: 380px) {
		img.main-logo {width: calc(90px + 100 * (100vw - 380px) / 960);}
		h1.resp {font-size: calc(20px + 31 * (100vw - 380px) / 960);}
		h2.resp {font-size: calc(16px + 19 * (100vw - 380px) / 960);}
		h3.resp {font-size: calc(14px + 16 * (100vw - 380px) / 960);}
		h4.resp {font-size: calc(12px + 14 * (100vw - 380px) / 960);}
		h5.resp {font-size: calc(11px + 12 * (100vw - 380px) / 960);}
		h6.resp {font-size: calc(10px + 11 * (100vw - 380px) / 960);}
		p.resp, li.resp, a.resp, td, th {font-size: calc(10px + 10 * (100vw - 380px) / 960);}
		img.icon-resp {width:24px;}
	}
	@media screen and (min-width: 680px) {
		#main { margin-right:235px; }
		img.icon-resp {width:28px;}
	}
	@media screen and (min-width: 993px) {
		img.main-logo {width: 160px;}
		h1.resp {font-size: 40px;}
		h2.resp {font-size: 28px;}
		h3.resp {font-size: 24px;}
		h4.resp {font-size: 20px;}
		h5.resp {font-size: 18px;}
		h6.resp {font-size: 16px;}
		p.resp, li.resp, a.resp, td, th {font-size: 15px;}
		img.icon-resp {width:31px;}
	}
	img.icon {
		position:relative;
		left:-6px;
		top:-3px;
		margin:0 6px 0 0;
		padding:0;
	}
	img.icon_2 {
		position:relative;
		left:-10px;
		top:0px;
		margin:0 6px 0 0;
		padding:0;
	}
	div.icon_3 {
		width:65px;
		margin:0;
		padding:0;
		text-align:right;
	}
	img.icon_3 {
		position:relative;
		top:20px;
		width:45px;
		padding:0;
	}
	@media only screen and (max-width: 380px) {
		div.icon_3 {width:25px;}
		img.icon_3 {width:25px;}
	}
	
/*
--------------------------------------------
			NAVIGATION 
--------------------------------------------			
*/
	#sidebar {
		position:fixed;
		top:0;
		right:0px;
		width:235px;
		margin:0;
		padding:0;
		z-index:5;
		overflow:hidden;
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}
	#side_header {
		position:relative;
		top:60px;
		transition:0.5s;
	}
/*
--------------------------------------------
			SLIDE SHOWS
--------------------------------------------			
*/
	.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides {
		display: none
	}
	img {
		vertical-align: middle;
	}
	
/* Slideshow container */
	.slideshow-container {
		max-width: 1000px;
		position: relative;
		margin: auto;
	}
/* Add a pointer when hovering over the thumbnail images */
	.cursor {
	  cursor: pointer;
	}

/* Next & previous buttons */
	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 48%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: white;
		font-weight: bold;
		font-size: 32px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
	}
/* Position the "next button" to the right */
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}
/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
		background-color: rgba(254, 254, 254, 0.4);
	}
/* Caption text */
	.text {
		display:none;
	}
/* On smaller screens, decrease text size */
	@media only screen and (max-width: 380px) {
		.prev, .next {top:42%}
		.text {font-size: 11px}
	}
/* Number text (1/3 etc) */
	.nb {
		color: #f2f2f2;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		top: 0;
	}
/* Container for image text */
	.caption-container {
		text-align: center;
		padding: 2px;
	}
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
/* Six columns side by side */
	.column {
		float: left;
		width: 16.66%;
	}
/* The dots/bullets/indicators */
	.dot1, .dot2, .dot3, .dot4 {
		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}
	.active, .dot1:hover, .dot2:hover, .dot3:hover, .dot4:hover {
		background-color: #717171;
	}
/* Add a transparency effect for thumnbail images */
/*	.demo0, .demo1, .demo2 {*/
/*		opacity: 0.4;*/
/*	}*/
/*	.active,*/
/*	.demo0:hover, .demo1:hover, .demo2:hover {*/
/*		opacity: 1;*/
/*	}*/
/* Fading animation */
	.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}
	@-webkit-keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
	}
	@keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
	}
/*
--------------------------------------------
			ACCUEIL MELTING POT PHOTOS
--------------------------------------------			
*/

	#mp_row {
		background-color:#f0f8fb;
		padding:1% 0;
	}	
	#mp_row div {
		background-color:#f0f8fb;
		padding:1% 1%;
	}
	img.mp {
		width:100%;
	}
/*
--------------------------------------------
			FOOTER
--------------------------------------------			
*/
	#footer {
		position:relative;
		height:50px;
		width:100%;
		overflow:hidden;
	}
	.footer {
		color:#fff;
		font-weight: 600;
	}
		