body {
  background-image : url('images/photo/paysage/IMG 79.jpg');
  background-size : cover;
}

div#bg-cl {
  position: absolute;
  z-index: 1;
  top : 0;
  left : 0;
  width : 100vw;
  height : 100vh;
  background-color : #070707;
  opacity: 0.5;
}

div#titre_1 {
  width : 100vw;
  left : 0;
  top : 28.5vh;
  z-index : 2;
  position : absolute;
  text-align: center;
}

div#titre_1 > h1 {
  font-family: 'Copperplate', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 6vw;
  color : #ffffff;
  letter-spacing : 0.2vw;
  text-shadow: 5px 5px 5px #00000070;
}

div#titre_1 > h2 {
  margin-top: -8vh;
  font-family: 'Andalé Mono', monospace;
  font-style: normal;
  font-weight: lighter;
  font-size: 2vw;
  color : #ffffff;
  text-shadow: 5px 5px 5px #00000070;
}

.social_1 {
  width : 2.25vw;
  top : 12.5vh;
  opacity : 1;
  transition: all 0.25s ease-out;
}

.social_1:hover {
  opacity : 0.7;
}

.social_1_2 {
  margin-left: 2.25vw;
}

.social_1_3 {
  margin-left: 2.25vw;
}

@media (max-width : 600px) {
  
  body {
    background-image : url('images/photo/paysage/IMG 79.jpg');
    background-size : cover;
    background-position-x: -120vw;
    background-size: 300%;
  }

  div#titre_1 {
    width : 100vw;
    left : 0;
    top : 35.5vh;
    z-index : 2;
    position : absolute;
    text-align: center;
  }

  div#titre_1 > h1 {
    font-family: 'Copperplate', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11vw;
    color : #ffffff;
    letter-spacing : 0.2vw;
    text-shadow: 5px 5px 5px #00000070;
  }

  div#titre_1 > h2 {
    margin-top: -3vh;
    font-family: 'Andalé Mono', monospace;
    font-style: normal;
    font-weight: lighter;
    font-size: 4.5vw;
    color : #ffffff;
    text-shadow: 5px 5px 5px #00000070;
  }

  .social_1 {
    width : 5.25vw;
    top : 21.5vh;
    opacity : 1;
    transition: all 0.25s ease-out;
  }

  .social_1:hover {
    opacity : 0.7;
  }

  .social_1_2 {
    margin-left: 5.25vw;
  }

  .social_1_3 {
    margin-left: 5.25vw;
  }

}