/* Style the Image Used to Trigger the Modal */

/**
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

**/

#myImg {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

#myImg:hover  {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}


.myModal .close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.25rem;
  z-index: 10;
  filter: invert(1) grayscale(100);
}



.myModal .modal-content {
  width: 100%;
  background-color: rgb(0,0,0);
}

.myModal .modal-body {
  display: flex;
  align-items: center;
  padding: 0; 
}


.myModal .container-fluid img {  
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  height:100vh;
}

/* smartphones */
@media (min-width: 576px) {
  .myModal .container-fluid {
    max-width: 90%;
  }
}

/* tablettes */
@media (min-width: 768px) {
  .myModal .container-fluid {
    max-width: 85%;
  }
}

/* PC */
@media (min-width: 992px) {
  .myModal .container-fluid {
    max-width: 80%;
  }
}


/* PC */
@media (min-width: 1200px) {
  .myModal .container-fluid {
    max-width: 70%;
  }
}

/* tres grands écrans */
@media (min-width: 1400px) {
  .myModal .container-fluid {
    max-width: 55%;
  }
}