#logo-animated-container {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}
  @media (max-width:810px) { 
    #logo-animated-container {
        width: 74%;
        margin-left: 13%;
        margin-right: 13%;
    }
  }
  @media (max-width:640px) { 
    #logo-animated-container {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
  }
#logo-animated {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 1300px;
    max-height: 1000px;
    overflow: hidden;
    
}

  #logo-animated svg {
    position: absolute;
    width: 100%;
    height: auto;
    max-width: 1030px;
    top: 0;
    left: 0;
  }
  #logo-animated  img {
    position: absolute;
    opacity: 0;
  }
  #consultation-couleur {
    left: min(17%, 180px);
    top: 0.5%;
    width: 32%;
    max-width: 330px;
  }
  #consultation-noir {
    left: min(17%, 180px);
    top: 0.5%;
    width: 32%;
    max-width: 330px;
  }
  #quartier-couleur {
    width: 60%;
    max-width: 620px;
    left: min(30%, 310px);
    top: 3%;
  }
  #quartier-noir {
    width: 60%;
    max-width: 620px;
    left: min(30%, 310px);
    top: 3%;
  }