body {
  margin: 0;
  padding: 0;
}

.head-continer {
  background-image: linear-gradient(rgba(231, 224, 224, 0), hsla(0, 0%, 96%, 0)),
    url("./images/desktop/image-hero.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.head-continer .navbar .navbar-brand {
  font-family: "Alata", sans-serif;
  color: aliceblue;
  font-size: 30px;
}
.head-continer .navbar .nav-link {
  color: aliceblue;
}
.head-continer .navbar .none {
  display: none;
}

.text-head-page {
  color: aliceblue;
  font-family: "Josefin Sans", sans-serif;
  font-size: 50px;
  line-height: 1em;
}

.text-continer .row div {
  margin-left: 13%;
  margin-top: 5%;
  padding: 2%;
}

@media screen and (max-width: 1000px) {
  .navbar {
    background-color: black;
    color: rgb(255, 255, 255);
  }
  .text-continer .row div {
    margin-left: 8%;
    margin-top: 28%;
    padding: 0%;
    display: flex;
    align-items: center;
  }
  .text-head-page {
    color: aliceblue;
    font-family: "Josefin Sans", sans-serif;
    font-size: 45px;
    line-height: 1em;
  }
}

#container1 {
  position: relative;
  margin-left: 50px;
  margin-top: 25px;
  display: flex;
  
  /* margin: auto; */
}

.interactive {
  position: absolute;
  height: 400px;
  width: 550px;
  /* border: 2px solid greenyellow; */
  margin: auto;
  /* width: 100px; */
}

.preum{
  height: 100%;
  width: 100%; 
}

.text {
  position: absolute;
  justify-content: center;
  margin-top: 170px;
  background-color: white;
  margin-right: -150%;
  margin-left: 420px;
  height: 250px;
  /* border: 2px solid slateblue; */
}

.ecrit {
  text-align: justify;
  margin-top: 16px;
  margin-left: 34px;
  margin-right: 10px;
  font-size: 20px;
  height: 50px;
  
}

.title {
  margin-right: 2px;
  text-align: justify;
  text-transform: uppercase;
  letter-spacing: 2px;
  height: 90px;
  font-size: 40px;
  margin-bottom: 40px;
  margin-top: 10px;
  margin-left: 33px;
}

#container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* border: 1px solid green; */
  width: 60%;
  /* position: relative; */
  margin: 80px auto; 

}

.loop{
  /* margin-left: 1px; */
}

#container1{
  /* border: 2px solid yellow; */
  position: relative;
  margin-right: 55px;
  height: 450px;
}

.ig{
  /* border: 2px solid blue; */
  width: 180px;
  height: 300px;
  margin: 70px auto 0px;
  
}

.img1 {
  position: relative;
  height: auto;
  width: 100%;  
  z-index: 0;
  
}

.titre1 {
  position: absolute;
  margin-top: -62px;
  margin-left: 100px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* position: fixed; */
  width: 17px;
  min-width: 16px;
  /* font-size: calc(5px + 1.3vw);  */
  
}

.creations {
  position: absolute;
  margin-left: 10px;
}

.fond {
  background-color: white;
  position: absolute;
  color: black;
  border: solid black 1px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 20px;
  letter-spacing: 3px;
  margin-left: 713px;
  margin-top: 10px;
  
}

.img2 {
  /* afin de ne pas avoir de si grosse margin-top il me fallait mettre le 
    container2 en position absolute comme ça j'aurai juste a bougé le container avec
    sa margin-top */
  position: relative;
  height: auto;
  width: 100%; 
  
 
}

.titre2 {
  position: absolute;
  margin-top: -62px;
  margin-left: 85px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img3 {
  position: relative;
  height: auto;
  width: 100%; 
  
}

.titre3 {
  position: absolute;
  margin-top: -62px;
  margin-left: 75px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img4 {
  position: relative;
  height: auto;
  width: 100%; 
}

.titre4 {
  position: absolute;
  margin-top: -62px;
  margin-left: 110px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img5 {
  position: relative;
  height: auto;
  width: 100%; 
}

.titre5 {
  position: absolute;
  margin-top: -62px;
  margin-left: 65px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img6 {
  position: relative;
  height: auto;
  width: 100%; 
}

.titre6 {
  position: absolute;
  margin-top: -62px;
  margin-left: 65px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img7 {
  position: relative;
  height: auto;
  width: 100%; 
}

.titre7 {
  position: absolute;
  margin-top: -62px;
  margin-left: 60px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.img8 {
  position: relative;
  height: auto;
  width: 100%; 
}

.titre8 {
  position: absolute;
  margin-top: -62px;
  margin-left: 85px;
  color: white;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.bas {
  background-color: black;
  color: white;
  /* margin-top: 95px; */
  display: flex;
  flex-direction: row;
  width: 100%;
}

.left {
  margin-left: 200px;
  
}

.right {
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 300px;
  /* justify-content: space-around; */
}

#container3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 70px;
  justify-content: space-between;
  margin-left: 0px;
  margin-right: 250px;
}

.item1, .item2, .item3, .item4, .item5 {
  margin: 2px;
}

.loop {
  margin-bottom: 20px;
  margin-top: 5px;
  margin-left: 1px;
  justify-content: center; 
  font-weight: bold;
}

.all {
  margin-left: 20px;
}

.reserved {
  margin-right: 20px;
  margin-bottom: 8px;
  padding-bottom:24px;
  /* padding-right: 15px; */
}

.fb {
  margin-left: 17px;
  margin-top: 25px;
}

.tw {
  margin-left: 50px;
  margin-top: 25px;
}

.pint {
  margin-left: 50px;
  margin-top: 25px;
}

.insta {
  margin-left: 50px;
  margin-top: 25px;
}

.attribution {
  background-color: black;
  color: white;
  padding-bottom: 10px;
  font-size: 15px;
  
}

.img_mobile1, .img_mobile2, .img_mobile3, .img_mobile4, .img_mobile5, .img_mobile6, .img_mobile7, .img_mobile8 
{
  display: none;
} 


@media screen and  (max-width: 685px) {
  /*  le fait que j'ai mis mon container2 en absolute dans mon média query fait que 
    il peut maintenant bouger tout seul au dessus du container1 qui lui est en position
    relative */
  /* #container2 {
    flex-direction: column;
    position: absolute;
    margin-top: 150px;
  }

  .img1 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
  }

  .img2 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img3 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img4 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img5 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img6 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img7 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  }

  .img8 {
    width: 340px;
    height: 160px;
    margin-left: 16px;
    margin-top: 40px;
  } */

  .attribution{
    font-size: calc(15px + 0.01vw);
  }

  .interactive {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 450px;
    
  }

  .preum{
    margin-left: -59px;
  }

  #container1 {
    margin-left: 30px;

  }

  .text {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 400px;
    margin: 500px 60px ;
    /* prêt */
  }

  .title {
    display: flex;
    flex-direction: column;
    margin-top: 220px;
    margin-right: 80px;
    width: 380px;
    font-size: 40px;
    /* text-align: center; */
  }

  .ecrit {
    display: flex;
    margin-top: 30px;
    margin-left: 10px;
    width: 340px;
    text-align: justify;
    margin-bottom: 392px;
    padding-bottom: 10px;
  }

  .creations {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    letter-spacing: 5px;
    font-weight: lighter;
    /* margin-top: 560px; */
    text-align: center;
  }

  .fond {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    color: black;
    margin-left: 7px;
  }

  .bas {
    margin-top: 50px;
    position: absolute;
    width: 100%;
  }

  /* .titre1 {
    margin-left: 30px;
  }

  .titre2 {
    margin-left: 30px;
  }

  .titre3 {
    margin-left: 30px;
  }

  .titre4 {
    margin-left: 30px;
  }

  .titre5 {
    margin-left: 30px;
  }

  .titre6 {
    margin-left: 30px;
  }

  .titre7 {
    margin-left: 30px;
  }

  .titre8 {
    margin-left: 30px;
  } */

  .bas {
    display: flex;
    flex-direction: column;
  }

  .left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30px;
    margin-right: 190px;
    border: 2px orchid  ;
  
    /* margin-top: 10px; */
    /* justify-content: space-between; */
  }

  .right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* margin-left: 190px; */
    width: 100%;
    margin-top: 60px;
    margin-left: 1px;
    justify-content: center;
  }

  .fb {
    margin-left: 60px;
  }

  .loop {
    
    margin-left: 7px;
  }

  .reserved {
  
    margin-right: 30px;
    
   
  }
  .item3{
    margin-top: 5px;
  }

  #container2{
    margin-top: 450px;
    margin-bottom: 80px;
    margin-left: 80px;
  }
}


/* new media query */

@media screen and (max-width: 1100px) and (min-width:686){
  .text{
    margin: 500px 170px;
  }
}

@media screen and (max-width: 1100px) {
  /*  le fait que j'ai mis mon container2 en absolute dans mon média query fait que 
    il peut maintenant bouger tout seul au dessus du container1 qui lui est en position
    relative */
  /* #container2 {
    flex-direction: column;
    position: absolute;
    margin-top: 150px;
  }

  .img1 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
  }

  .img2 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img3 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img4 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img5 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img6 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img7 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .img8 {
    width: 340px;
    height: 160px;
    margin-left: 300px;
    margin-top: 40px;
  }

  .interactive {
    display: flex;
    flex-direction: column;
    width: 420px;
    height: 100px;
    margin-left: -6px;
    margin-bottom: 5px;
  }

  #container1 {
    margin-left: 300px;
    
  }*/

  #container2{
    margin-top: 430px;
    margin-left: 80px;
  }

  .text {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100px;
    margin: 500px 60px;
    
   
  } 

   .title {
    /* display: flex;
    flex-direction: column; */
    margin-left: -15px;
    margin-top: 220px;
    width: 380px;
    font-size: 40px;
    text-align: center;
  } 

  .ecrit {
    display: flex;
    margin-top: 5px;
    margin-left: 2px;
    width: 340px;
    text-align: justify;
    margin-bottom: 290px;
  }

  .interactive{
    margin-left: 80px;
    
  }

  .creations {
    display: flex;
    flex-direction: column;
    margin-left: 35px;
    letter-spacing: 5px;
    font-weight: lighter;
    /* margin-top: 560px; */
    text-align: center;
  }

  .fond {
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    color: black;
    margin-left: 370px;
  }

  .bas {
    margin-top: 20px;
    position: absolute;
    width: 100%;
  }

  /* .loop{
    margin-left: 70px;
    margin-top: 20px;
    
  } */

  /* .titre1 {
    margin-left: 340px;
  }

  .titre2 {
    margin-left: 340px;
  }

  .titre3 {
    margin-left: 340px;
  }

  .titre4 {
    margin-left: 340px;
  }

  .titre5 {
    margin-left: 340px;
  }

  .titre6 {
    margin-left: 340px;
  }

  .titre7 {
    margin-left: 340px;
  }

  .titre8 {
    margin-left: 340px;
  } */

  .bas {
    display: flex;
    flex-direction: column;
    
    
  }

  .left {
    display: flex;
    flex-direction: column;
    width: 30px;
    margin-left: 235px;
    margin-top: 10px;
    
  }



  .right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -55px;
    margin-top: 70px;
    
  }

  .fb {
    margin-left: 60px;
    
  }

  .loop {
    margin-left: -40px;
  }

  .reserved {
    margin-left: 65px;
    margin-top: 24px;
  }

   #container3{
     margin-left: -25px; 
     margin-right: 430px;
  } 
}