#slide {
  height: 87.4vh;
  width: 100%;
  position: relative;
}

#slidepic {
 width:100% ;
 height:100% ;
 position: relative;
 cursor: pointer;
}

#buttonleft {
  left: -6em;
}

#buttonright {
  right: -6em;
}

.button {
  position: absolute;
  top: 50%;
  z-index: 2;
  background-color: #343a40!important;
  border: none;
  color: #fff;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  cursor: pointer;
}

.arrow {
  position: absolute;
  font-size: 3em;
  top: -14px;
  right: 0;
  left: 0;
}

#caption {
	position:absolute;
	left:0; right:0; bottom: 0px;
	padding: 20px;
	margin:0;
	text-align:center;
	background: rgba(255,255,255,0.8);
}

#map {
  height: 90vh;
  width: 100%;
}

#info {
  width: 25%;
  background-color: #343a40!important;
  display: none;
}

.text {
  color: white;
}

#reservation {
  height: 10vh;
  display: flex;
  flex-direction: column;
}

#canvas {
  background-color: white;
}

.reservationcenter {
  margin: auto;
}

.titleInfo {
  margin-bottom: 1em;
}

.infoColor {
  color: #fd0003;
}

#signature {
  display: none;
  margin-top: 1em;
}

.margintop {
  margin-top: 1em;
}

#compteur {
  color: #fd0003;
  visibility: hidden;
}

#annulerReservation {
  visibility: hidden;
}

@media screen and (max-width: 1335px) {

  #buttonleft {
    left: 0;
  }
  
  #buttonright {
    right: 0;
  }
  
}

@media screen and (max-width: 1090px) {
  #mapDiv {
    display: block;
  }

  #info {
    width: 100%!important;
  }

  #map {
    width: 100%!important;
  }



}