@font-face{
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Light.ttf") format("truetype");
}

/* The Modal (background) */
.modal {
  visibility: hidden; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;  
  top: 0; 
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  margin: 0 auto;
  vertical-align: middle;
}

div.modal.active {
  visibility: visible;
}

div.modal table {
  width: 100%;
  margin: auto;
}

/* Modal Content */
/* TOUS */
.modal-content-impression, .modal-content-cession, .modal-content-shooting {
  position: absolute;
  width: 800px;
  top: 50%; 
  left: 50%;
  background-color: #fefefe;
  padding: 50px 50px;
  font-family: Montserrat;
  font-size: 14px;
  border: 1px solid #888;
  border-radius: 25px;
}

.modal-content-impression h3, .modal-content-cession h3, .modal-content-shooting h3 {
  font-weight: bolder;
}

/* INDIVIDUELS*/
.modal-content-impression {
  margin-top: -400px; /* moitie de la hauteur du content */
  margin-left: -450px; /* moitie de la largeur du content + padding */
}
.modal-content-cession {
  margin-top: -150px; /* moitie de la hauteur du content */
  margin-left: -450px; /* moitie de la largeur du content + padding */
}
.modal-content-shooting {
  margin-top: -150px; /* moitie de la hauteur du content */
  margin-left: -450px; /* moitie de la largeur du content + padding */
}

/* Modal Animation */

div.modal>div h3 {
  position: relative;
  font-size: 25px;
  font-weight: bolder;
  opacity:0;
  top: 10px;
  transition: opacity 300ms ease-in-out 100ms,
              top 300ms ease-in-out 100ms;
}

div.modal>div p,
div.modal>div span{
  position: relative;
  opacity:0;
  top: 10px;
  transition: opacity 300ms ease-in-out 200ms,
              top 300ms ease-in-out 200ms;
}

div.modal>div button {
  position: relative;
  opacity:0;
  top: 10px;
  transition: opacity 300ms ease-in-out 300ms,
              top 300ms ease-in-out 300ms;
}

div.modal.active>div h3,
div.modal.active>div p,
div.modal.active>div span,
div.modal.active>div button {
  top: 0px;
  margin-top: -10px;
  padding-bottom: 5px;
  opacity:1;
}

/* The Close Button */
#close-presta-impression, #close-presta-cession, #close-presta-shooting {
}

.close-presta-button {
  outline: none;
  height: 50px;
  width: 150px;
  border: 2px solid #111;
  border-radius: 10px;
  font-family: Montserrat;
  font-weight: 600;
  cursor: pointer;
  background-color: #111;
  color: #fff;
  transition: background-color 300ms ease-in-out,
              color 300ms ease-in-out;
}

.close-presta-button:hover {
  background-color: #fff;
  color: #111;
}

#close-presta-impression:hover,
#close-presta-impression:focus,
#close-presta-cession:hover,
#close-presta-cession:focus,
#close-presta-shooting:hover,
#close-presta-shooting:focus{
  text-decoration: none;
  cursor: pointer;
}