/* INTRO */

.camera {
  background-image: url("camera_2.png");
  background-size: 115%;
  height: 190vw;
  background-position: -50px 35px;
  background-repeat: no-repeat;
  position: relative;
  z-index: 4;
}	

/* LES 24H DU WEB */

.bande1 {
  border: 5px solid #444444;
  background: #5E5E5E;
  height: 23vw;
  width: 75vw;
  position: relative;
  left: 10%;
  top: 62vw;
  border-radius: 15px;
}

.logo24H:hover {
  transform: scale(1.10);
  color: #135299;
}

.logo24H {
  position: relative;
  top: 2.3vw;
  left: 3%;
  width: 18vw;
  transition: transform .2s;
}

.bande1 h4 {
  color: white;
  position: relative;
  top: -23vw;
  left: 30%;
  font-size: 2.2vw;
  width: 51vw;
  height: 18vw;
  color: white;
}

.bande1 h5 {
  color: #F8D545;
  font-size: 2.5vw;
  font-family: normale;
  position: relative;
  left: 30%;
  top: -21vw;
  width: 20vw;
  text-decoration: underline;
}

.bande1 h5:hover {
  color: #2D2D2D;
  text-decoration: none;
  transition: all .2s;
}

@media screen and (max-width: 1000px) {
  .bande1 {
    top: 64vw;
  }
}

@media screen and (max-width: 650px) {
  .bande1 {
    top: 66vw;
  }
  .logo24H {
    top: 2vw
  }
  .bande1 h4 {
    top: -24vw;
  }
}

@media screen and (max-width: 450px) {
  .bande1 {
    top: 68vw;
  }
  .logo24H {
    top: 1.5vw
  }
  .bande1 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande1 h5 {
    top: -21.9vw;
  }
}

@media screen and (max-width: 350px) {
  .bande1 {
    top: 71vw;
  }
  .logo24H {
    top: 1vw
  }
  .bande1 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande1 h5 {
    top: -22.5vw;
  }
}

/* YOUTUBE */

.bande2 {
  border: 5px solid #444444;
  background: #5E5E5E;
  height: 23vw;
  width: 75vw;
  position: relative;
  left: 10%;
  top: 82vw;
  border-radius: 15px;
}

.pdp:hover {
  transform: scale(1.10);
  color: #135299;
}

.pdp {
  position: relative;
  top: 2.3vw;
  left: 73%;
  width: 18vw;
  transition: transform .2s;
}

.bande2 h4 {
  color: white;
  position: relative;
  top: -23vw;
  left: 1.7%;
  font-size: 2.1vw;
  width: 51vw;
  height: 18vw;
  color: white;
  text-align: right;
}

.bande2 h5 {
  color: #F8D545;
  font-size: 2.5vw;
  font-family: normale;
  position: relative;
  left: 39%;
  top: -21vw;
  width: 23vw;
  text-align: right;
  text-decoration: underline;
}

.bande2 h5:hover {
  color: #2D2D2D;
  text-decoration: none;
  transition: all .2s;
}

@media screen and (max-width: 1000px) {
  .bande2 {
    top: 84.5vw;
  }
  .camera {
    height: 192vw;
  }
}

@media screen and (max-width: 650px) {
  .bande2 {
    top: 86.5vw;
  }
  .pdp {
    top: 2vw
  }
  .bande2 h4 {
    top: -24vw;
  }
  .camera {
    height: 194vw;
  }
}

@media screen and (max-width: 450px) {
  .bande2 {
    top: 88.5vw;
  }
  .pdp {
    top: 1.5vw
  }
  .bande2 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande2 h5 {
    top: -21.9vw;
  }
  .camera {
    height: 196vw;
  }
}

@media screen and (max-width: 350px) {
  .bande2 {
    top: 91.5vw;
  }
  .pdp {
    top: 1vw
  }
  .bande2 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande2 h5 {
    top: -22.5vw;
  }
  .camera {
    height: 199vw;
  }
}

/* CE SITE */

.bande3 {
  border: 5px solid #444444;
  background: #5E5E5E;
  height: 23vw;
  width: 75vw;
  position: relative;
  left: 10%;
  top: 102vw;
  border-radius: 15px;
}

.www:hover {
  transform: scale(1.10);
  color: #135299;
}

.www {
  position: relative;
  top: 2.3vw;
  left: 3%;
  width: 18vw;
  transition: transform .2s;
}

.bande3 h4 {
  color: white;
  position: relative;
  top: -23vw;
  left: 30%;
  font-size: 2.2vw;
  width: 51vw;
  height: 18vw;
  color: white;
}

.bande3 h5 {
  color: #F8D545;
  font-size: 2.5vw;
  font-family: normale;
  position: relative;
  left: 30%;
  top: -21vw;
  width: 20vw;
  text-decoration: underline;
}

.bande3 h5:hover {
  color: #2D2D2D;
  text-decoration: none;
  transition: all .2s;
}

@media screen and (max-width: 1000px) {
  .bande3 {
    top: 104.5vw;
  }
}

@media screen and (max-width: 650px) {
  .bande3 {
    top: 106.5vw;
  }
  .www {
    top: 2vw
  }
  .bande3 h4 {
    top: -24vw;
  }
}

@media screen and (max-width: 450px) {
  .bande3 {
    top: 108.5vw;
  }
  .www {
    top: 1.5vw
  }
  .bande3 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande3 h5 {
    top: -21.9vw;
  }
}

@media screen and (max-width: 350px) {
  .bande3 {
    top: 111.5vw;
  }
  .www {
    top: 1vw
  }
  .bande3 h4 {
    top: -25vw;
    width: 50vw;
  }
  .bande3 h5 {
    top: -22.5vw;
  }
}