body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("../image1/mculture03.jpg");
  min-height: 80%;
}

.bgimg-2 {
  background-image: url("../image1/mculture01.jpg");
  min-height: 80%;
}

.bgimg-3 {
  background-image: url("../image1/mculture02.jpg");
  min-height: 80%;
}


/* ##################   texte sur l'image  ####################### */
.caption {
	position: absolute;
	left: 10px;
	top: 50%;
	width: 30%;
	text-align: left;
	background-color:transparent;
	
	color: #ffffff;
	    font-family: 'Kavoon';font-size: 3em;
    text-shadow: 2px 2px 3px #000000, 6px 6px 6px #000000;
	 
}
#cont1 {
	width:100%;
	padding: 40px 0;
	}
/* ##################   block01 mission ####################### */

#block01 {
	font-size: 1.2em;
	position:relative;
	padding: 4% 6%;

	}
#block01 div{
	font-size: 1.2em;
	background-color: white;
	padding: 10px 40px;
	box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.9);
	line-height: 1.5em;

	}	
#block01 p::first-letter {
    font-family: 'Great Vibes';font-size: 2em;
	color: #000;
	}
#mission { border: 1px solid black; }


/* ##################   block02 map ####################### */
#block02 {
	font-size: 1.2em;
	}
#block02.column1 {
	    padding: 20px;
	}

#col1-1 {
	box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.9);
	}
#map {
	box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.9);
	}

.column2 {
  padding: 20px;
	}

/* ##################   block03 Histoire ####################### */

#block03 {
	font-size: 1.2em;
	position:relative;
	padding: 4% 6%;
	}
#block03 div{
	font-size: 1.2em;
	background-color: white;
	padding: 10px 40px;
		box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.9);
		line-height: 1.5em
	}	
#block03 p::first-letter {
    font-family: 'Great Vibes';font-size: 2em;
	color: #000;
	}	
	
	
#hist { border: 1px solid black; }

/* ##################   block0 Histoire ####################### */

#block04 {
	position:relative;
	padding: 2% 16%;
	}
#block04 div{
	font-size: 1.2em;
	background-color: white;
	padding: 15px 40px;
		box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.9);
		line-height: 1em
	}	
/* ##################   block4 Form contacte ####################### */

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

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

input[type=submit]:hover {
  background-color: #45a049;
}

label {
	font: bold 1.1em Arial, sans-serif;
	
}


/*  [][]][]][][]][][][]][][]  side nav [][][]]][][]]][[]  */
#mySidenav  {
	background-color: #59441C;
	position: fixed;
	top: 90;
	width: 100%;
	font: italic  bold 18px Georgia, serif;
	z-index: 9;
}

#mySidenav a {
	text-align: right;
	position: absolute;
	left: -80px;
	transition: 0.3s;
	padding: 10px;
	width: 110px;
	text-decoration: none;
	font-size: 20px;
	color: white;
	border: 2px solid black;
	border-radius: 0 8px 8px 0;
}

#mySidenav a:hover {
  left: 0;
}

#ma1 {
  top: 30px; 
 }

#ma2 {
  top: 80px;
  
}

#ma3 {
  top: 130px;
 }

#ma4 {
  top: 180px;
 }
@media screen and (max-width: 1000px) {
	#sidenav { 
	      display: none;
  }
}