#bottomIllustration img.mobileOnly {
        display:none;
    }

/*-----animation habitation-----*/

.animationHabitation {
    overflow:hidden;
    height:665px;
    position:relative;
}
.animationHabitation img {
    position: absolute;
    max-width: 100%;
    width: auto;
}
.animationHabitation #animationTv {
    left:0;
    right:0;;
    margin:auto;
    opacity:1;
    bottom:135px;
    /*width:35.365vw;*/
}
.animationHabitation #animationVague1 {
    bottom:-5%;
    /*width:100vw;*/
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationHabitation #animationVague2 {
    bottom:7%;
    /*width:100vw;*/
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationHabitation #animationVague3 {
    bottom:15.5%;
    /*width:100vw;*/
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationHabitation #animationPlante {
    right:24%;
    bottom:120px;
    /*width:8.958vw;*/
}
.animationHabitation #animationCadre {
    left: 0;
    bottom: 59%;
    right: calc(0% + 514px);
    margin: auto;
    /*width:12.969vw;*/
}
.animationHabitation #animationHorloge {
    left: calc(0% + 620px);
    bottom: 71%;
    right:0;
    margin: auto;
    /*width:6.823vw;*/
}
.animationHabitation #animationPrise {
    right: 0;
    bottom: 33%;
    left: calc(0% + 665px);
    margin: auto;
    /*width:1.823vw;*/
}
.animationHabitation #animationPersonnage {
    left: 25%;
    bottom: 82px;
    /*width:7.031vw;*/
}
#bottomIllustration.playing .animationHabitation #animationTv {
    animation-name: animationTv;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationHabitation #animationVague2 {
    animation-name: animationvague2;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationVague3 {
    animation-name: animationvague3;
    animation-duration: 1.3s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationPlante {
    animation-name: animationPlante;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationCadre {
    animation-name: animationCadre;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationHorloge {
    animation-name: animationHorloge;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationPrise {
    animation-name: animationPrise;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}
#bottomIllustration.playing .animationHabitation #animationPersonnage {
    animation-name: animationPersonnage;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

@keyframes animationTv {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animationvague2 {
  from   {bottom:0;}
  to {bottom:45px;}
}
@keyframes animationvague3 {
  from   {bottom:0;}
  to {bottom:105px;}
}
@keyframes animationPlante {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animationCadre {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:59%;}
}
@keyframes animationHorloge {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:71%;}
}
@keyframes animationPrise {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:33%;}
}
@keyframes animationPersonnage {
  from   {opacity: 0; left:30%;}
  to {opacity: 1; left:25%;}
}

/*-----Animation entreprise-----*/

.animationEntreprise {
    overflow:hidden;
    height:665px;
    position:relative;
}
.animationEntreprise img {
    position: absolute;
    max-width: 100%;
    width: auto;
}
.animationEntreprise #animationPersoVert {
    left: 41%;
    right: 0;
    margin: auto;
    bottom: 50px;
}
.animationEntreprise #animationPersoOrange {
    left: calc(41% + 305px);
    right: 0;
    margin: auto;
    bottom: 50px;
}
.animationEntreprise #animationBuildVert {
    bottom: 113px;
    margin: auto;
    left: 0;
    right: calc(36% - 847px);
}
.animationEntreprise #animationRue {
    bottom:0px;
    margin:0 auto -1px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationEntreprise #animationArbreDevant {
    bottom: 50px;
    right: 0;
    margin: auto;
    left: 80%;
}
.animationEntreprise #animationBuildBleu {
    right: 36%;
    bottom: 93px;
    left: 0;
    margin: auto;
}
.animationEntreprise #animationGazon {
    bottom: 30px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationEntreprise #animationBuildOrange {
    right: calc(36% - 285px);
    bottom: 78px;
    left:0;
    margin:auto;
}
.animationEntreprise #animationArbreFond {
    bottom: 140px;
    left: 0;
    margin: auto;
    right: 80%;
}
.animationEntreprise #animationNuages {
    top:50px;
}

#bottomIllustration.playing .animationEntreprise #animationPersoVert {
    animation-name: animationPersoVert;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationEntreprise #animationPersoOrange {
    animation-name: animationPersoOrange;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationEntreprise #animationBuildVert {
    animation-name: animationBatimentVert;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationEntreprise #animationArbreDevant {
    animation-name: animationArbre1;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationEntreprise #animationBuildBleu {
    animation-name: animationBatimentBleu;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationEntreprise #animationGazon {
    animation-name: animationGazon;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationEntreprise #animationBuildOrange {
    animation-name: animationBatimentOrange;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationEntreprise #animationArbreFond {
    animation-name: animationArbre2;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationEntreprise #animationNuages {
    animation-name: animationNuage;
    animation-duration: 3s;
    animation-timing-function: ease;
}

@keyframes animationBatimentVert {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animationBatimentOrange {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animationBatimentBleu {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animationNuage {
  from   {top:0;opacity:0;}
  to {top:50px;opacity:1;}
}
@keyframes animationGazon {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:30px;}
}
@keyframes animationPersoVert {
  from   {opacity: 0; left:0%;}
  to {opacity: 1; left:41%;}
}
@keyframes animationPersoOrange {
  from   {opacity: 0; left:100%;}
  to {opacity: 1; left:calc(41% + 305px);}
}
@keyframes animationArbre1 {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes animationArbre2 {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/*-----Animation condo-----*/

.animationCondo {
    overflow:hidden;
    height:665px;
    position:relative;
}
.animationCondo img {
    position: absolute;
    max-width: 100%;
    width: auto;
}
.animationCondo #animCondoRue {
    bottom:0px;
    margin:0 auto -1px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationCondo #animCondoGazon {
    bottom: 30px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationCondo #animCondoArbreGrand {
    bottom: 50px;
    right: 8%;
}
.animationCondo #animCondoArbrePetit {
    left: 8.5%;
    bottom: 144px;
}
.animationCondo #animCondoNuage {
    top:50px;
}
.animationCondo #animCondoBuildBleuGrand {
    bottom: 98px;
    margin: auto;
    left: 0;
    right: 2.5%;
}
.animationCondo #animCondoBuildOrange {
    bottom: 87px;
    margin: auto;
    left: calc(0% + 494px);
    right: 0;
}
.animationCondo #animCondoBuildBleuPetit {
    bottom: 151px;
    margin: auto;
    left: 0;
    right: calc(2.5% + 648px);
}
.animationCondo #animCondoPerso {
    left: 0;
    right: 59.5%;
    margin: auto;
    bottom: 36px;
}

#bottomIllustration.playing .animationCondo #animCondoGazon {
    animation-name: animCondoGazon;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationCondo #animCondoArbreGrand {
    animation-name: animCondoArbreGrand;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationCondo #animCondoArbrePetit {
    animation-name: animCondoArbrePetit;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationCondo #animCondoNuage {
    animation-name: animCondoNuage;
    animation-duration: 3s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationCondo #animCondoBuildBleuGrand {
    animation-name: animCondoBuildBleuGrand;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationCondo #animCondoBuildOrange {
    animation-name: animCondoBuildOrange;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationCondo #animCondoBuildBleuPetit {
    animation-name: animCondoBuildBleuPetit;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationCondo #animCondoPerso {
    animation-name: animCondoPerso;
    animation-duration: 2s;
    animation-timing-function: ease;
}

@keyframes animCondoBuildBleuGrand {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animCondoBuildOrange {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animCondoBuildBleuPetit {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animCondoNuage {
  from   {top:0;opacity:0;}
  to {top:50px;opacity:1;}
}
@keyframes animCondoGazon {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:30px;}
}
@keyframes animCondoPerso {
  from   {opacity: 0; right: 100%;}
  to {opacity: 1; right: 59.5%;}
}
@keyframes animCondoArbreGrand {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes animCondoArbrePetit {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/*-----Animation auto-----*/

.animationAuto {
    overflow:hidden;
    height:665px;
    position:relative;
}
.animationAuto img {
    position: absolute;
    max-width: 100%;
    width: auto;
}
.animationAuto #animAutoRue {
    bottom:0px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationAuto #animAutoGazon {
    bottom: 30px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationAuto #animAutoArbre {
    bottom: 50px;
    right: 0;
    left: 55%;
    margin: auto;
}
.animationAuto #animAutoMaison {
    left: 3.5%;
    bottom: 100px;
}
.animationAuto #animAutoNuage {
    top:50px;
    right:8%;
}
.animationAuto #animAutoVoitureBleu {
    bottom: 75px;
    margin: auto;
    left: 0;
    right: calc(35% - 1134px);
}
.animationAuto #animAutoVoitureVerte {
    bottom: 74px;
    margin: auto;
    left: 0;
    right: 35%;
}
.animationAuto #animAutoPersoGris {
    bottom: 32px;
    margin: auto;
    left: -7%;
    right: 0;
}
.animationAuto #animAutoPersoVert {
    bottom: 32px;
    margin: auto;
    left: calc(-7% + 202px);
    right: 0;
}
.animationAuto #animAutoPersoOrange {
    bottom: 32px;
    margin: auto;
    left: calc(-7% + 348px);
    right: 0;
}


#bottomIllustration.playing .animationAuto #animAutoGazon {
    animation-name: animAutoGazon;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationAuto #animAutoArbre {
    animation-name: animAutoArbre;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationAuto #animAutoMaison {
    animation-name: animAutoMaison;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationAuto #animAutoNuage {
    animation-name: animAutoNuage;
    animation-duration: 3s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationAuto #animAutoVoitureBleu {
    animation-name: animAutoVoitureBleu;
    animation-duration: 2.5s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationAuto #animAutoVoitureVerte {
    animation-name: animAutoVoitureVerte;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationAuto #animAutoPersoGris {
    animation-name: animAutoPersoGris;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-delay: 1.5s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationAuto #animAutoPersoVert {
    animation-name: animAutoPersoVert;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-delay: 1.8s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationAuto #animAutoPersoOrange {
    animation-name: animAutoPersoOrange;
    animation-duration: 1.7s;
    animation-timing-function: ease;
    animation-delay: 1.8s;
    animation-fill-mode: backwards;
}

@keyframes animAutoMaison {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animAutoNuage {
  from   {top:0;opacity:0;}
  to {top:50px;opacity:1;}
}
@keyframes animAutoGazon {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:30px;}
}
@keyframes animAutoPersoGris {
  from   {opacity: 0; left: -30%;}
  to {opacity: 1; left: -7%;}
}
@keyframes animAutoPersoVert {
  from   {opacity: 0; left: 29%;}
  to {opacity: 1; left: calc(-7% + 202px);}
}
@keyframes animAutoPersoOrange {
  from   {opacity: 0; left: 40%;}
  to {opacity: 1; left: calc(-7% + 348px);}
}
@keyframes animAutoArbre {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes animAutoVoitureBleu {
    0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
@keyframes animAutoVoitureVerte {
    0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/*-----Animation générale-----*/

.animationGenerale {
    overflow:hidden;
    height:665px;
    position:relative;
}
.animationGenerale img {
    position: absolute;
    max-width: 100%;
    width: auto;
}
.animationGenerale #animGenRue {
    bottom:0px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationGenerale #animGenGazon {
    bottom: 30px;
    min-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}
.animationGenerale #animGenArbre {
    bottom: 50px;
    right: 13%;
}
.animationGenerale #animGenNuage {
    top:50px;
    right:8%;
}
.animationGenerale #animGenPersoVert {
    bottom: 32px;
    margin: auto;
    left: 26%;
    right: 0;
}
.animationGenerale #animGenPersoOrange {
    bottom: 32px;
    margin: auto;
    left: calc(26% + 305px);
    right: 0;
}
.animationGenerale #animGenMaison {
    left: 3.5%;
    bottom: 100px;
}
.animationGenerale #animGenAppartement {
    left: 24%;
    bottom: 110px;
}
.animationGenerale #animGenVoiture {
    bottom: 97px;
    margin: auto;
    left: 0;
    right: 0;
}

#bottomIllustration.playing .animationGenerale #animGenGazon {
    animation-name: animGenGazon;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationGenerale #animGenArbre {
    animation-name: animGenArbre;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationGenerale #animGenMaison {
    animation-name: animGenMaison;
    animation-duration: 2s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationGenerale #animGenAppartement {
    animation-name: animGenAppartement;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationGenerale #animGenNuage {
    animation-name: animGenNuage;
    animation-duration: 3s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationGenerale #animGenVoiture {
    animation-name: animGenVoiture;
    animation-duration: 2.5s;
    animation-timing-function: ease;
}
#bottomIllustration.playing .animationGenerale #animGenPersoVert {
    animation-name: animGenPersoVert;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-delay: 0.8s;
    animation-fill-mode: backwards;
}
#bottomIllustration.playing .animationGenerale #animGenPersoOrange {
    animation-name: animGenPersoOrange;
    animation-duration: 1.8s;
    animation-timing-function: ease;
    animation-delay: 1.1s;
    animation-fill-mode: backwards;
}

@keyframes animGenMaison {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animGenAppartement {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
@keyframes animGenNuage {
  from   {top:0;opacity:0;}
  to {top:50px;opacity:1;}
}
@keyframes animGenGazon {
  from   {opacity: 0; bottom:0;}
  to {opacity: 1; bottom:30px;}
}
@keyframes animGenPersoVert {
  from   {opacity: 0; left: 100%;}
  to {opacity: 1; left: 26%;}
}
@keyframes animGenPersoOrange {
  from   {opacity: 0; left: 100%;}
  to {opacity: 1; left: calc(26% + 305px);}
}
@keyframes animGenArbre {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes animGenVoiture {
    0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}


@media screen and (max-width: 1080px) {
    
    #bottomIllustration img {
        display:none;
    }
    #bottomIllustration img.mobileOnly {
        display:block;
        position:relative;
    }
    #bottomIllustration > div {
        height:auto;
    }
}