@media (min-width: 530px) {
  #Logo-NavBar {
    width: 380px;
  }
}

@media (min-width: 300px) {
  #Hero_Index {
    width: 100%;
  }
}

@media (min-width: 768px) {
  #Hero_Index {
    width: 500px;
  }
}

@media (min-width: 768px) {
  #Hero_Index.h1 {
    font-size: 12px;
  }
}

@media (min-width: 300px) {
  #Hero_Index.h1 {
    font-size: 12px;
  }
}

@media (min-width: 300px) {
  #Hero_Index h1 {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  #Hero_Index h1 {
    font-size: 20px;
  }
}

@media (min-width: 300px) {
  #Hero_Logo {
    width: 90%;
    margin-bottom: 10px;
  }
}

@media (min-width: 768px) {
  #Hero_Logo {
    width: 100%;
    margin-bottom: 25px;
  }
}

@media (min-width: 991px) {
  .Hero-1 {
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .Hero-1 {
    font-size: 12px;
  }
}

@media (min-width: 991px) {
  .Hero-2 {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .Hero-2 {
    font-size: 19px;
  }
}

@media (max-width: 991px) {
  .Hero-3 {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .Hero-3 {
    font-size: 12px;
  }
}

@media (min-width: 991) {
  .Hero-3 {
    font-size: 15px;
  }
}

@media (min-width: 991px) {
  .Hero-4 {
    font-size: 20px;
    margin-top: 25px;
  }
}

@media (max-width: 991px) {
  .Hero-4 {
    font-size: 15px;
    margin-top: 10px;
  }
}

@media (max-width: 991px) {
  .Hero-5 {
    font-size: 8px;
  }
}

@media (min-width: 991px) {
  .Hero-5 {
    font-size: 17px;
  }
}

@media (max-width: 575px) {
  .Citation {
    font-size: 30px;
    line-height: 30px;
  }
}

@media (min-width: 575px) {
  .Citation {
    font-size: 45px;
    line-height: 50px;
  }
}

@media (max-width: 991px) {
  .Citation-Explication {
    font-size: 15px;
    line-height: 20px;
  }
}

@media (min-width: 991px) {
  .Citation-Explication {
    font-size: 20px;
    line-height: 28px;
  }
}