body {

  font-family: 'Righteous';

  width: 100%;

  text-align: center;

  background-image: url("images/bg.jpg");

  /*background-position: center;*/

  background-size: cover;

  background-repeat: repeat;

}



/***** EN TETE****/

header {

  margin-top: 5%

}



.logo {

  width: 60%;

  height: 60%;



}



/*Menu*/

.navbar ul {

  list-style-type: none;

}



.navbar a {

  color: #e0a80f;

  font-size: 1.5em;

  text-shadow: 2px 1px 1px black;

}



/*Titre principal*/

h1 {

  color: #e0a80f;

  text-shadow: 2px 1px 1px black;

  padding-top: 3%;

}



/***** DIAPORAMA*****/

#slideshow {

  margin-top: 5%;

  padding-top: 2%;

  padding-bottom: 2%;

  background-color: #1e7f7a;

  box-shadow: -10px 10px 10px rgba(96, 96, 96, 0.5);

}



#description {

  font-size: 1.5em;

  font-weight: bold;

  height: 300px;

  width: 500px;

  box-shadow: -3px 2px 2px #636363;

  vertical-align: middle;

  display: table-cell;

  background-color: white;

}



#slideshow img {

  height: 300px;

  width: 440px;

  box-shadow: -2px 2px 2px #636363;

}



/*  paramètres communs à tous les boutons*/

button {

  cursor: pointer;

  background-color: rgb(224, 168, 15);

  color: black;

  border-radius: 50px;

  border: 1px solid black;

  ;

}



/****Boutons pour diaporama manuel***/

.prevBtn, .pauseBtn, .playBtn, .nextBtn {

  cursor: pointer;

  color: #e0a80f;

  margin-top: 2%;

}



.prevBtn:hover, .pauseBtn:hover, .playBtn:hover, .nextBtn:hover {

  color: white;

  font-size: 3em;

  cursor: pointer;

}



/***** separation section******/

.separator hr {

  width: 70%;

  height: 2px;

  border-top: 5px dotted #e0a80f;

  margin-top: 5%;

  text-shadow: -10px 10px 10px black;

}



.fa-map-marked-alt, .fa-hourglass-start {

  color: #e0a80f;

  font-size: 3em;

  padding: 2%;

  text-shadow: -10px 10px 10px black;

}



/***** MAP******/

h2 {

  color: black;

  text-shadow: 1px 1px 1px grey;

  padding-bottom: 2%;

}



#map_form_container {

  border-top: 3px solid rgba(224, 168, 15, 0.6);

  border-right: 3px solid rgba(224, 168, 15, 0.6);

  box-shadow: -10px 10px 10px rgba(96, 96, 96, 0.5);

  padding-bottom: 2%;

  background-color: white;

}



/* légende*/

.icons {



  margin-bottom: 1%;

}



.icons img {

  width: 25px;

  height: 25px;

  margin-left: 1%;

  margin-right: 1%;

}



/* Carte */

#mapid {

  height: 500px;

  width: 500px;

  box-shadow: -2px 2px 2px #606060;

}



/* Les markers visibles sur la carte*/

.marker {

  background-image: url("images/markerGreen.png");

  background-size: cover;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  cursor: pointer;

}



.markerRed {

  background-image: url("images/markerRed.png");

  background-size: cover;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  cursor: pointer;

}



.markerOrange {

  background-image: url("images/markerOrange.png");

  background-size: cover;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  cursor: pointer;

}



/* popup*/

.mapboxgl-popup {

  max-width: 200px;

}



/* Panneau info station*/

#panneau-station {

  font-size: 0.8em;

}



#info-station {

  box-shadow: -5px 5px 5px #606060;

  background-color: rgb(224, 168, 15);

  border-radius: 10px;

  width: 100%;

  padding: 2%;

  height: 500px;

  line-height: 2.5;

}



/*Bouton réserver*/

#submit {

  width: 150px;

  height: 50px;

  margin-bottom: 2%;

  font-size: 1.5em;

  box-shadow: -5px 5px 5px black;

}



#submit:hover {

  background-color: white;

  width: 200px;

  height: 60px;

}



#submit.notshow {

  display: none;

}



/***** CANVAS******/

#canvas_container {

  display: none;

}



#canvas_container.show {

  display: flex;

  flex-direction: column;

  margin-left: 5%;

  box-shadow: -5px 5px 5px #606060;

  width: 90%;

  border-radius: 10px;

  background-color: #1e7f7a;

}



#canvas_container p {

  color: white;

}



/* cadre pour signature*/

#sign {

  background-color: #F6F6F6;

  /*width: 90%;*/

  margin: auto;

}



.canvasBtn {

  display: flex;

  flex-direction: row;

  justify-content: center;

}



/*Boutons du canvas*/

#confirm, #reset, #close {

  width: 80px;

  height: 30px;

  margin-bottom: 2%;

  margin-left: 2%;

  margin-right: 2%;

  box-shadow: -5px 5px 5px black;

}



/****** PANNEAU INFO RESERVATION  *****/

#info-resa.off {

  display: none;

}



#info-resa {

  box-shadow: -10px 10px 10px rgba(96, 96, 96, 0.5);

  background-color: #e0a80f;

  width: 70%;

  color: black;

  padding-top: 2%;

  padding-bottom: 2%;

}



/* couleur pour la mention un "vélo est reservé"*/

#resaok {

  color: white;

  font-size: 1.5em;

}



/*******MEDIA QUERIES*****/

/* media query pour les écrans supérieurs à 2560px, les textes et images sont augmentés*/

@media all and (min-width: 2560px) {

  h1 {

    font-size: 4em;

  }



  h2 {

    font-size: 2.5em;

  }

  h4{

    font-size: 3em;

  }

  #submit{

      font-size: 2.5em;

  width: 300px;

  height:100px;

}

#submit:hover{



width: 350px;

height:100px;

background-color: white;

}

  .navbar a {

    font-size: 2.5em;

  }



  p {

    font-size: 2.7em;

  }

form{

  font-size: 2.7em;

}

  #slideshow img {

    height: 600px;

    width: 800px;

  }



  #description {

    height: 600px;

    width: 1000px;

  }



  #mapid {

    height: 900px;

  width: 900px;

  }



  #info-station {

    height: 900px;



  }

#resaok{

  font-size: 2.5em;

}

  .iconText {

    font-size: 1.7em;

  }



  #timer {

    font-size: 2.5em;

  }

}



/*regle d'affichage pour les écrans < à 1024px*/

@media all and (max-width:1023px) {

  h1 {

    font-size: 1.7em;

  }



  h2 {

    font-size: 1.3em;

  }



  p {

    font-size: 0.9em;

  }



  h4 {

    font-size: 1.3em;

  }



  #description {

    font-size: 1em;

  }



  #mapid {

    height: 700px;

  }

  #info-station {

    height: 700px;

line-height: 2.8;

  }



  #submit {

    width: 120px;

    height: 35px;

    font-size: 1em;

  }



  #submit:hover {

    width: 140px;

    height: 50px;

  }



  #confirm, #reset, #close {

    width: 60px;

    height: 20px;

    font-size: 0.7em;

  }



  #resaok {

    font-size: 1em;

  }

}



/*regle affichage pour tablettes et petits écrans*/

@media all and (min-width:768px) and (max-width:1023px) {

  #mapid {

    height: 300px;

  }

  #info-station {

    height: 300px;

    line-height: 1.5;

  }



}



/*regle affichage pour les tous petits mobiles*/

@media all and (max-width:425px) {

  #mapid {

    height: 200px;

  }

  #info-station {

    height: 300px;

    line-height: 1.2;

  }

}

/*regle affichage pour les  mobiles*/

@media all and (min-width:426px) and (max-width:767px){

  #info-station{

    line-height: 1.2;

    height: 300px;

  }

}