.camera {
  background-image: url("camera.png");
  background-size: 115%;
  height: 215vw;
  background-position: -20px -110px;
  background-repeat: no-repeat;
  position: relative;
  z-index: 4;
} 

.presentation {
  border: 5px solid #444444;
  background: #5E5E5E;
  height: 23vw;
  width: 75vw;
  position: relative;
  left: 10%;
  top: 62vw;
  border-radius: 15px;
}

.photomoi {
  position: relative;
  top: 2.3vw;
  left: 3%;
  width: 17vw;
  border-radius: 5px;
}

.presentation h4 {
  color: white;
  position: relative;
  top: -21vw;
  left: 28%;
  font-size: 2vw;
  width: 51vw;
  height: 18vw;
  color: white;
  font-family: normale;
}

.presentation h5 {
  color: #F8D545;
  font-size: 2.5vw;
  font-family: normale;
  position: relative;
  left: 28%;
  top: -19vw;
  width: 20vw;
}

.camera .retrouve {
  color: #2D2D2D;
  position: relative;
  top: 65vw;
  left: 2.5%;
  font-size: 3vw;
  width: 51vw;
  height: 18vw;
  font-family: normale;
}


.crc h4{
  color: white;
  position: relative;
  top: 50vw;
  padding: 2.5vw;
  font-size: 2vw;
  width: 100%;
  font-family: normale;
  background: #2D2D2D;
  border: 4px solid #5E5E5E;
}

.crc h4:hover {
  color: #F8D545;
  transition: 0.3s;
}

.crc h5{
  color: white;
  position: relative;
  top: 47vw;
  padding: 2.5vw;
  font-size: 2vw;
  width: 100%;
  font-family: normale;
  background: #2D2D2D;
  border: 4px solid #5E5E5E;
}

.crc h5:hover {
  color: #F8D545;
  transition: 0.3s;
}

.crc h6{
  color: white;
  position: relative;
  top: 42.75vw;
  padding: 2.5vw;
  font-size: 2vw;
  width: 100%;
  font-family: normale;
  background: #2D2D2D;
  border: 4px solid #5E5E5E;
}

.crc h6:hover {
  color: #F8D545;
  transition: 0.3s;
}

.bande2 {
  background: #B6E3E2;
  height: 30vw;
  width: 80%;
  position: relative;
  left: 10%;
  top: 43vw;
}

.bande2 h1 {
  font-family: normale;
  padding: 4vw;
  font-size: 3vw;
}

.bande2 h2 {
  padding: 4vw;
  font-size: 2vw;
  text-indent: 5%;
  position: relative;
  top: -7vw;
}

.bande2 h3 {
  padding: 4vw;
  font-size: 2vw;
  position: relative;
  top: -13vw;
}

.bande2 a{
  color: #5E5E5E;
  font-family: normale;
}

.bande2 a:hover {
  text-decoration: underline;
  transition: 0.3s;
}

.camera .rapide {
  color: #2D2D2D;
  position: relative;
  top: 43vw;
  left: 2.5%;
  font-size: 3vw;
  width: 90vw;
  font-family: normale;
}

div.chaine {
  width: 20%;
  background-color: #5E5E5E;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
  left: 60%;
  top: 16vw;
  border: 5px solid #2D2D2D;
  border-radius: 10px;
}

div.chaine:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

div.H24 {
  width: 20%;
  background-color: #5E5E5E;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
  left: 20%;
  top: 45vw;
  border: 5px solid #2D2D2D;
  border-radius: 10px;
}

div.H24:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

div.container {
  color: white;
  font-family: normale;
  font-size: 2vw;
  text-align: center;
  padding: 0.5vw 1vw;
}

@media screen and (max-width: 980px) {
  div.chaine {
    top: 14vw;
  }
}

@media screen and (max-width: 850px) {
  .camera {
    background-position: 10% -5%;
  }
}

@media screen and (max-width: 650px) {
  div.chaine {
    top: 12vw;
  }
  .camera {
    height: 225vw;
  }
}

@media screen and (max-width: 650px) {
  div.chaine {
    top: 8vw;
  }
  .camera {
    height: 235vw;
  }
}

@media screen and (max-width: 500px) {
  .camera {
    background-position: 10% -3%;
  }
  .ensemble {
    position: relative;
    top: 5vw;
  }
}

@media screen and (max-width: 390px) {
  .camera {
    background-position: 10% -1%;
  }
  .ensemble {
    position: relative;
    top: 7vw;
  }
}