@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'),
		 url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	font-display: swap;
}

* {
	box-sizing:border-box
}

body {
	/*background-image: url("images/fond.png");*/
	background-color: #383838;
	text-align:center;
	font-family: 'Open Sans', sans-serif;
}

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000000;
	color: white;
	padding: 8px;
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

.colored {
	width: 100%;
	border: none;
}

.colored td.cl1 { 
	background-color: #267ac8;
	border: none;
}

.colored td.cl2 {
	background-color: #019875;
	border: none;
}
	
.colored td.cl3 {
	background-color: #cb8d44;
	border: none;
}
	
.colored td.cl4 {
	background-color: #2f4d99;
	border: none;
}
	
.colored td.cl5 {
	background-color: #815b97;
	border: none;
}

.header {
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background-position: center center;
  	background-size: cover;
  	background-image:url('images/photo2.jpg');
  	height:290px;
}

.content {
	padding-top: 220px;
}

.bg_menu {
	position:absolute;
	top:220px;
	height: 70px;
	background: linear-gradient(to top, #383838, rgba(0,0,0,0));
}

.navbar {
	min-height: 70px;
	border-bottom: 1px solid white;
}
	
.navbar-nav {
	float:none;
	margin-right: 0;
	text-align: center;
}
	
.navbar-nav > li {
	display: inline-block;
	float:none;
}

@media (min-width: 768px) {
	.bg-custom {
		background: linear-gradient(to top, #383838, rgba(0,0,0,0));
	}
}

@media (max-width: 767px){
	.bg-custom {
		background-color: #666666;
		border-top: 1px solid white;
	}
}

.nav-link {
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
}

#mon_nom {
	color: white;
	font-size: 20pt;
	font-family: 'Open Sans', sans-serif;
	font-weight: 1000
}

#mon_nom:hover {
	border-bottom: 2px solid currentColor;
}

.nav-link:hover {
	color: white;
    font-weight: 800;
}

.actif {
	font-weight: 800;
}

#bouton {
	display: inline-block;
	cursor: pointer;
}
  
.bar1, .bar2, .bar3 {
	width: 25px;
	height: 4px;
	background-color: white;
	margin: 4px 0;
	transition: 0.4s;
}
  
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-4px, 3px);
	transform: rotate(-45deg) translate(-4px, 3px);
}
  
.change .bar2 {opacity: 0;}
  
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}

#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 3;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 8px 10px 8px 10px;
	border-radius: 10%;
	background-color: rgba(255, 255, 255, 0.2);
}
  
#myBtn:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

#fond_accueil {
	background-image: url("images/globe_noir.png");
	background-repeat: no-repeat;
	background-size: 500px 500px;
	background-position: 15% 50%; 
}

#accueil {
	margin-left: 20%;
	margin-top: 30%;
	margin-bottom: 8%;
}

.bienvenue {
    color: #adadad;
    text-align: center;
	font-weight: 200;
	font-size: 20pt;
	letter-spacing: 0px;
}

.bienvenue_gros {
    color: #ffffff;
    text-align: center;
	font-weight: 600;
	font-size: 25pt;
}

#exp {
	margin-top: 30px;
	text-align: left;
}

.titre_exp {
	color: white;
	font-size: 15pt;
	font-weight: bold;
	margin-bottom: 0px;
	text-align: center;
}

.logo {
	max-width: 17px;
	margin-bottom: 5px;
}

.logo_exp {
	max-width: 20px;
	margin-bottom: 5px;
	transform: rotate(90deg)
}

.nom_exp {
	color: white;
	font-size: 15pt;
	font-weight: bold;
	float:left
}

.date_exp {
	color: #eeeeee;
	float: right;
}

.statut{
	line-height: 0px;
	margin-left: 23px;
	color: #acacac;
	font-size: 11pt;
}

.descript_exp {
	margin-top: 30px;
	color: #acacac;
	font-size: 11pt;
	margin-bottom:0;
}

.list_exp {
	margin-top:0;
	color: #acacac;
	font-size: 11pt;
}

.strong {
	font-weight: bold;
}

.skill_bar {
	width: 100%;
	background-color: rgb(70, 70, 70);
	border-radius: 5px;
}

.skill_name {
	color: #acacac;
	font-size: 9pt;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 15px;
}

.skills {
	text-align: right;
	font-size: 8pt;
	font-weight: bold;
	padding-right: 10px;
	color: black;
}

.qgis {
	width: 95%;
	background-color: #4CAF50;
	border-radius: 5px;
	animation-name: qgis;
	animation-duration: 4s;
	-webkit-animation-name: qgis;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes qgis {
	from {width: 95%;}
	to {width: 15%;}
}

.arcgis {
	width: 90%;
	background-color: #2196F3;
	border-radius: 5px;
	animation-name: arcgis;
	animation-duration: 4s;
	-webkit-animation-name: arcgis;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes arcgis {
	from {width: 90%;}
	to {width: 15%;}
}

.mapinfo {
	width: 80%;
	background-color: #f44336;
	border-radius: 5px;
	animation-name: mapinfo;
	animation-duration: 4s;
	-webkit-animation-name: mapinfo;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes mapinfo {
	from {width: 80%;}
	to {width: 15%;}
}

.idrisi {width: 60%;
	background-color: #808080;
	border-radius: 5px;
	animation-name: idrisi;
	animation-duration: 4s;
	-webkit-animation-name: idrisi;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes idrisi {
	from {width: 60%;}
	to {width: 15%;}
}

.fme {
	width: 80%;
	background-color: #bb56be;
	border-radius: 5px;
	animation-name: fme;
	animation-duration: 4s;
	-webkit-animation-name: fme;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes fme {
	from {width: 80%;}
	to {width: 15%;}
}

.postgre {width: 90%;
	background-color: #a7a40f;
	border-radius: 5px;
	animation-name: postgre;
	animation-duration: 4s;
	-webkit-animation-name: postgre;
	-webkit-animation-duration: 4s;
	animation-direction: reverse;
}
@keyframes postgre {
	from {width: 90%;}
	to {width: 15%;}
}

#circles {
	max-width: 100%;
	overflow: hidden;
}

.circle {
	float: left;
	width: 33%;
	text-align: center;
}

.circle p {
	margin-top: 0px;
	margin-bottom: 10px;
}

.legend {
	height: 10px;
	width: 10px;
	border-radius: 50%;
	display: inline-block;
}

.langue {
	margin-left: 10px;
}

#graph {
	text-align: center;
	animation-name: pie;
	animation-duration: 4s;
	-webkit-animation-name: pie;
	-webkit-animation-duration: 4s;
}
@keyframes pie {
	from {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
	to {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
}

.formation {
	margin-top: 515px;
}

.source {
	color: #acacac;
	font-size: 9pt;
	font-style: italic;
}

#list_for {
	text-align: left;
}

#carte {
	z-index: 1;
	position: absolute;
	top: 290;
	width: 100%;
	height: 510px;
}
.leaflet-control-layers-toggle {
	background-size: 26px;
}

.mylabel {
	all: revert;
  	color: #464646;
  	font-size: 9pt;
 	font-weight: bold;
 	background-color: none;
 	border-color: none;
 	background: none;
 	border: none;
 	box-shadow: none;
 	margin: 0px;
 	cursor: none;
}

#titre_creation {margin-top: 30px; margin-bottom: 30px;}

.mySlides > img {
	margin: auto;
	max-width: 60%;
}
  
/* Position the image container (needed to position the left and right arrows) */
.creation {
	position: relative;
}
  
/* Hide the images by default */
.mySlides {
	display: none;
}
  
/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}
  
/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	font-weight: bold;
	font-size: 20px;
	border-radius: 10%;
	user-select: none;
	-webkit-user-select: none;
}

.prev {
	left: 15%;
}

/* Position the "next button" to the right */
.next {
	right: 15%;
}
  
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
  
/* Number text (1/3 etc) */
.numbertext {
	color: #acacac;
	font-size: 9pt;
	font-weight: bold;
	padding: 8px 12px;
	position: absolute;
	top: 0;
	left: 15%
}
  
/* Container for image text */
.caption-container {
	width: 60%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.2);
	color: white;
	padding-top: 16px;
	padding-bottom:  2px;
	margin: auto;
}
  
.row:after {
	content: "";
	display: inline;
	clear: both;
}
  
/* Six columns side by side */
.column {
	width: 16.6666%;
}

.column > img {
	width: 100%;
}
  
/* Add a transparency effect for thumnbail images */
.demo {
	opacity: 0.6;
}
  
.active,
.demo:hover {
	opacity: 1;
}

#contact {margin-top: 30px;}

.formulaire > label {
	color: rgb(236, 236, 236);
	font-weight: bold;
	float: left;
	margin-left: 2%;
}

input[type=text], textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}

input[type=submit] {
	background-color: #006850;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #005a45;
}

.contact_form {
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 20px;
} 

#test_mail {
	width: 50px;
	border-radius: 5px;
}

#requete {
	margin-top: 30px;
}

.select_nom {
	width: 200px;
	margin: auto;
}

.select_cond {
	width: 80px;
	margin: auto;
}

.requete_form {
	margin-right: 20px;
	margin-left: 20px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 20px;
}

.label_resto {
	color: white;
}

.slider {
	-webkit-appearance: none;
	width: 90%;
	height: 15px; 
	background: rgba(0,0,0,0);
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
  
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: #019875;
	cursor: pointer;
}
  
.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #019875;
	cursor: pointer;
}

#input_nomresto {
	background-image: url('images/search.png');
	background-size: 30px 30px;
  	background-position: 10px 10px;
	background-repeat: no-repeat;
	border-radius: 10px 10px 0 0;
	padding-left: 50px;
	margin-bottom: 0px;
}

#table_resto {
	font-size: 9pt;
	border-collapse: collapse;
	border-spacing:0;
	margin:auto;
	font-family: 'Open Sans', sans-serif;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}

#table_resto > tr > td{
	text-align: center;
	border: none;
	padding: 5px;
}

td{
	width: 10%;
}
th {
    background-color: #019875;
    color: white;
}

.apercu {color: black;}

.apercu:hover {
	font-weight: bold;
	color: white;
	text-decoration: none;
}

tr:nth-child(even) {background-color: white;}

tr:nth-child(odd) {background: rgba(255,255,255,.8);}

tr:hover {background-color: rgba(255,255,255,.2);color:white;}

.login {
	color: #acacac;
	font-weight: bold;
	float: left;
	margin-left: 2%;
}

.login_true {
	color: white;
	font-weight: bold;
}

input[type=password] {
	width: 100%;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid grey;
	border-radius: 5px;
}

.deconnect {
	margin-top: 30px;
}

.link {
	color: white;
	font-weight: normal;
}

.link:hover {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.footer {
	font-size: 10pt;
}