@charset "utf-8";

@media (max-width: 360px){
}
/* Sidenav menu */

nav {
	top: 0px;
	width: 100%;
	height: 50px;
	position: fixed;
	background-color: white;
}

.sidenav {
  height: 100%;
  width: 360px;
  position: fixed;
  /*position: absolute;*/
  z-index: 10000;
  top: 0;
  left: -360px;
  background-color: #e8e8e8;
  padding-top: 60px;
  transition: left 0.5s ease;
}

.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Sidenav menu links */
.sidenav a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #111;
}

/* Active class */
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.burger-icon {
  display: block;
  margin: 12px 12px;
}

.burger-icon span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 6px;
}

section, iframe {
  margin: 0px;
  padding: 0px;
  margin-bottom: -3px;
}

article {
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.4;
}

.top50 {
	height: 50px;
}

#perso {
	padding-top: 60px;
}

#hante {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color: black;
  background-image: url("images/hante.jpg");
  background-size: cover;
  color: white;
}

#jour {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color: #FFC300;
  color:#001464;
}

#nocturne {
	margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color: black;
  background-image: url("images/hante.jpg");
  background-size: cover;
  color: white;
}

#zombies {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color: black;
  background-image: url("images/hante.jpg");
  background-size: cover;
  color: white;
}

#anniv {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color:#FF9300;
  color: white;
}

#loisirs {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
  background-color:#FF9300;
  color: white;
}

#plan {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
}

#contact {
  margin: 0px;
  padding: 12px;
  padding-top: 60px;
}

/*#plan {
	padding: 0px;
	margin: 0px;
	padding-top: 60px;
}*/

H1 {
  font-family: 'Mystery Quest', system-ui;
  font-weight: 400;
  font-size: 40px;
  color: #0eafaa;
}

H2 {
  font-family: 'Mystery Quest', system-ui;
  font-weight: 400;
  font-size: 30px;
}

.decal {
  margin-top: 16px;
  margin-bottom: 16px;
}

.gras {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #0eafaa;
}

.bleu {
  color: #0eafaa;
}

.grasj {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #FFC300;
}

.grasb {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

.petit {
  font-size: 11px;
}

.leul {
	margin-left: 24px;
	list-style: disc;
}

.tel {
	font-weight: 900;
	text-decoration:none;
	color: white;
}

.teln {
	font-weight: 900;
	text-decoration:none;
	color: #222222;
}

#map {
	z-index: 20;
	width: 100%;
	height: 500px;
}

.map-link {
	text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;
}

.map-link:hover {
	text-decoration-style:solid;
}

form {
	text-align: center;
}

input {
 	 font-family: 'Roboto', sans-serif;
	padding: 5px;
	margin-top: 12px;
	width: 95%;
}

textarea {
	font-family: 'Roboto', sans-serif;
	padding: 5px;
	margin-top: 12px;
	width: 95%;
}

:required {
   border: 2px dotted 
orange;
}