.imgNav{
    margin-top: 2rem;
    width: 100%;
    height: 400px;
    background-image: url('../images/oeuvres/20.jpg');
    background-position: 20% 65%;
    background-attachment: fixed;
    box-shadow: 1px 1px 14px 12px black;
    position: relative;
    overflow: hidden;
}
.response{
  height: 35rem;
  display: none;
   position: relative;
   overflow: hidden;
   box-shadow: -19px 13px 14px black;
}

#cloud1 {
    z-index: 900;
    position: absolute;
    left: 1000px;
    top: 1.5em;
    height: -3px;
    width: 50px;
    
    animation: moveCloud 40s linear infinite;
    -webkit-animation: moveCloud 40s linear infinite;
    -moz-animation: moveCloud 40s linear infinite;
    background-color: #22ff00;
  }
  #cloud2 {
    z-index: 772;
    position: absolute;
    left: 400px;
    top: 0.2em;
    height: 20rem;
width: 30px;
   
    animation: moveCloud 25s linear infinite;
    font-size: 15em;
    -webkit-animation: moveCloud 25s linear infinite;
    -moz-animation: moveCloud 25s linear infinite;
    background-color: #ffe600;
  }
  #cloud3 {
    z-index: 551;
    position: absolute;
    left: 400px;
    top: 0.3rem;
    height: 30px;
width: 70px;
    
    animation: moveCloud 46s linear infinite;
    -webkit-animation: moveCloud 46s linear infinite;
    -moz-animation: moveCloud 46s linear infinite;
    font-size: 5em;
    background-color: #ff05c1;
    
    
  }
  #cloud4 {
    z-index: 552;
    position: absolute;
    left: 500px;
    top: .2em;
    height: 30px;
width: 30px;
   
    animation: moveCloud 15s linear infinite;
    -webkit-animation: moveCloud 15s linear infinite;
    -moz-animation: moveCloud 15s linear infinite;
    background-color: #fd0404;
    font-size: 9em;
  }
  #cloud5 {
    z-index: 266;
    position: absolute;
    left: 1000px;
    top: 0.1em;

    height: 30px;
width: 30px;
    animation: moveCloud 20s linear infinite;
    -webkit-animation: moveCloud 20s linear infinite;
    -moz-animation: moveCloud 20s linear infinite;
    font-size: 21em;
    color: #2ed3e6;
  }
 
  
  @keyframes moveCloud {
    0% {
      transform: translate(2000px);
    }
    100% {
      transform: translate(-500px);
    }
  }
  @-webkit-keyframes moveCloud {
    0% {
      transform: translate(2000px);
    }
    100% {
      transform: translate(-500px);
    }
  }
  @-moz-keyframes moveCloud {
    0% {
      transform: translate(2000px);
    }
    100% {
      transform: translate(-500px);
    }
  }
/* µµ***************************************************** */
  
#cloud13 {
    z-index: 900;
    position: absolute;
    left: -50px;
    top: 0.5em;
    height: 10rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    animation: moveCloud 28s linear infinite;
    -webkit-animation: moveCloud 28s linear infinite;
    -moz-animation: moveCloud 28s linear infinite;
    background-color: greenyellow;
    font-size: 9em;
  }
  #cloud14 {
    z-index: 772;
    position: absolute;
    left: -5px;
    top: 0.2em;
    height: 20rem;
    width: 30px;
   
    animation: moveCloud 21s linear infinite;
    font-size: 15em;
    -webkit-animation: moveCloud 21s linear infinite;
    -moz-animation: moveCloud 21s linear infinite;
    background-color: #ffe600;
  }
  #cloud15 {
    z-index: 551;
    position: absolute;
    left: 0px;
    bottom: 3em;
    height: 30px;
width: 70px;
    
    animation: moveCloud 10s linear infinite;
    -webkit-animation: moveCloud 10s linear infinite;
    -moz-animation: moveCloud 10s linear infinite;
    font-size: 5em;
    background-color: #ff05c1;
    
    
  }
  #cloud16 {
    z-index: 552;
    position: absolute;
    left: -15px;
    /* bottom: 2.5rem; */
    height: 30px;
    width: 30px;
   
    animation: moveCloud 15s linear infinite;
    -webkit-animation: moveCloud 15s linear infinite;
    -moz-animation: moveCloud 15s linear infinite;
    background-color: #fd0404;
    font-size: 9em;
  }
  #cloud17 {
    z-index: 266;
    position: absolute;
    left: 0px;
    /* bottom: 5em; */

    height: 30px;
width: 30px;
    animation: moveCloud 20s linear infinite;
    -webkit-animation: moveCloud 20s linear infinite;
    -moz-animation: moveCloud 20s linear infinite;
    font-size: 21em;
    color: #2ed3e6;
  }
  #cloud18 {
    z-index: 772;
    position: absolute;
    left: -30px;
    /* bottom: 3em; */
    width: 40px;
    height: 80px;
   
    animation: moveCloud 18s linear infinite;
    -webkit-animation: moveCloud 18s linear infinite;
    -moz-animation: moveCloud 18s linear infinite;
    background-color: rgb(17, 139, 226);
    font-size: 10em;
  }

   @keyframes moveCloud {
    0% {
      transform: translate(1000px);
    }
    100% {
      transform: translate(-1400px);
    }
  }
  @-webkit-keyframes moveCloud {
    0% {
      transform: translate(1000px);
    }
    100% {
      transform: translate(-1400px);
    }
  }
  @-moz-keyframes moveCloud {
    0% {
      transform: translate(1000px);
    }
    100% {
      transform: translate(-1400px);
    }
  }



  /* responsive */

  @media screen and (max-width: 1024px)
{
    .imgNav{
    
    display: none;
    }
    .response{
     
      display: flex;
      }
}