html, body, .oc_fondu, #oc_conteneur, #oc_bordure {
  width: 300px;
  height: 600px;
}

body, html {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.oc_fondu {
  background-color: #FEFDF3;
  opacity: 0;
}

#oc_fondu_debut {
  animation: oc_fondu_debut 10s 3 ease normal;
}

#oc_fondu_fin {
  animation: oc_fondu_fin 10s 2 ease normal;
}

#oc_conteneur {
  background-color: #FEFDF3;
}

#oc_conteneur div, #oc_conteneur, #oc_conteneur img {
  position: absolute;
  overflow: hidden;
}

#oc_contain_decli {
  top: 180px;
  width: 300px;
  height: 250px;
}

#oc_bordure {
  box-sizing: border-box;
  border: 1px solid #000000;
  pointer-events: none;
}

.oc_taille {
  width: 300px;
  height: 250px;
}

#oc_mot1 {
  animation: oc_mot1 10s 3 ease normal;
}

#oc_mot2 {
  animation: oc_mot2 10s 3 ease normal;
}

#oc_mot3 {
  animation: oc_mot3 10s 3 ease normal;
}

#oc_mot4 {
  animation: oc_mot4 10s 3 ease normal;
}

#oc_mot5 {
  animation: oc_mot5 10s 3 ease normal;
}

#oc_mot6 {
  animation: oc_mot6 10s 3 ease normal;
}

#oc_mot7 {
  animation: oc_mot7 10s 3 ease normal;
}

#oc_mot8 {
  animation: oc_mot8 10s 3 ease normal;
}

#oc_mot9 {
  animation: oc_mot9 10s 3 ease normal;
}

#oc_mot10 {
  animation: oc_mot10 10s 3 ease normal;
}

#oc_mot11 {
  animation: oc_mot11 10s 3 ease normal;
}

#oc_mot12 {
  animation: oc_mot12 10s 3 ease normal;
}

#oc_mot13 {
  animation: oc_mot13 10s 3 ease normal;
}

#oc_mot14 {
  animation: oc_mot14 10s 3 ease normal;
}

#oc_mot4 {
  transform-origin: 139px 51px;
}

#oc_mot13_1 {
  transform-origin: 61px 128px;
  animation: oc_mot13_1 10s 3 ease normal;
}

#oc_mot13_2 {
  transform-origin: 83px 128px;
  animation: oc_mot13_2 10s 3 ease normal;
}

#oc_mot14_1 {
  transform-origin: 113px 128px;
  animation: oc_mot14_1 10s 3 ease normal;
}

#oc_mot14_2 {
  transform-origin: 133px 128px;
  animation: oc_mot14_2 10s 3 ease normal;
}

#oc_mot14_3 {
  transform-origin: 153px 128px;
  animation: oc_mot14_3 10s 3 ease normal;
}

#oc_mot14_4 {
  transform-origin: 174px 128px;
  animation: oc_mot14_4 10s 3 ease normal;
}

#oc_mot14_5 {
  transform-origin: 199px 128px;
  animation: oc_mot14_5 10s 3 ease normal;
}

#oc_mot14_6 {
  transform-origin: 219px 128px;
  animation: oc_mot14_6 10s 3 ease normal;
}

#oc_mot14_7 {
  transform-origin: 241px 128px;
  animation: oc_mot14_7 10s 3 ease normal;
}

#oc_mcdo {
  animation: oc_mcdo 10s 3 ease normal;
}

#oc_arbre1 {
  transform-origin: 13px 213px;
  animation: oc_arbre 10s 3 ease normal;
}

#oc_arbre2 {
  transform-origin: 112px 213px;
  animation: oc_arbre 10s 3 ease normal;
}

#oc_conteneur_soleil {
  width: 300px;
  height: 392px;
  animation: oc_conteneur_soleil 10s 3 ease normal;
}

#oc_soleil {
  top: -100px;
  left: -427px;
  animation: oc_soleil 10s 3 ease-in-out normal;
}

#oc_parceque {
  transform-origin: 150px 216px;
  transform: scale(1.3);
  top: 250px !important;
  animation: oc_parceque 10s 3 ease normal;
}

#oc_ml {
  opacity: 1;
  bottom: 5px !important;
  animation: oc_ml 10s 3 ease normal;
}

#oc_logo {
  top: 250px !important;
}

@keyframes oc_fondu_debut {
  0% {
    opacity: 1;
  }
  4% {
    opacity: 0;
  }
}

@keyframes oc_fondu_fin {
  0%, 96% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes oc_mcdo {
  0%, 25% {
    transform: translateX(-150px);
  }
  30% {
    transform: translateX(0px);
  }
}

@keyframes oc_arbre {
  0%, 30% {
    transform: scale(0);
  }
  35% {
    transform: scale(1.3);
  }
  39% {
    transform: scale(1);
  }
}

@keyframes oc_soleil {
  0%, 30% {
    opacity: 1;
    transform: scale(0) rotate(-300deg);
  }
  33% {
    transform: scale(1) rotate(-300deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot1 {
  0% {
    transform: translateX(130px) translateY(-100px);
  }
  3% {
    transform: translate(40px, 16px);
    margin-left: -2px;
    margin-top: -5px;
  }
  4% {
    margin-top: 0;
  }
  7% {
    transform: translate(40px, 0px);
    margin-left: 0px;
  }
  12% {
    transform: translate(0px, 0px);
  }
}

@keyframes oc_mot2 {
  0%, 7% {
    transform: translate(150px, 0);
  }
  12% {
    transform: translate(0, 0);
  }
}

@keyframes oc_mot3 {
  0%, 16% {
    transform: translateX(-150px);
  }
  21% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot4 {
  0%, 12% {
    transform: scale(0) rotate(25deg);
  }
  17% {
    transform: scale(1.1) rotate(-2deg);
  }
  21% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot5 {
  0%, 16% {
    transform: translateX(150px);
  }
  21% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot6 {
  0%, 19% {
    transform: translateX(-150px);
  }
  24% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot7 {
  0%, 19% {
    transform: translateX(150px);
  }
  24% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot8 {
  0%, 19.5% {
    transform: translateX(150px);
  }
  24.5% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot9 {
  0%, 40.5% {
    transform: translateX(-150px);
  }
  45.5% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot10 {
  0%, 40% {
    transform: translateX(-150px);
  }
  45% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot11 {
  0%, 40% {
    transform: translateX(150px);
  }
  45% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot12 {
  0%, 40.5% {
    transform: translateX(150px);
  }
  45.5% {
    transform: translateX(0px);
  }
}

@keyframes oc_mot13_1 {
  0%, 47% {
    transform: scale(0) rotate(30deg);
  }
  53% {
    transform: scale(1.05) rotate(-7deg);
  }
  57% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot13_2 {
  0%, 47.5% {
    transform: scale(0) rotate(-30deg);
  }
  53.5% {
    transform: scale(1.05) rotate(7deg);
  }
  57.5% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_1 {
  0%, 48% {
    transform: scale(0) rotate(30deg);
  }
  54% {
    transform: scale(1.05) rotate(-7deg);
  }
  58% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_2 {
  0%, 48.5% {
    transform: scale(0) rotate(-30deg);
  }
  54.5% {
    transform: scale(1.05) rotate(7deg);
  }
  58.5% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_3 {
  0%, 49% {
    transform: scale(0) rotate(30deg);
  }
  55% {
    transform: scale(1.05) rotate(-7deg);
  }
  59% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_4 {
  0%, 49.5% {
    transform: scale(0) rotate(-30deg);
  }
  55.5% {
    transform: scale(1.05) rotate(7deg);
  }
  59.5% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_5 {
  0%, 50% {
    transform: scale(0) rotate(30deg);
  }
  56% {
    transform: scale(1.05) rotate(-7deg);
  }
  60% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_6 {
  0%, 50.5% {
    transform: scale(0) rotate(-30deg);
  }
  56.5% {
    transform: scale(1.05) rotate(7deg);
  }
  60.5% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_mot14_7 {
  0%, 51% {
    transform: scale(0) rotate(30deg);
  }
  57% {
    transform: scale(1.05) rotate(-7deg);
  }
  61% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes oc_ml {
  0%, 8% {
    opacity: 0;
  }
  12%, 100% {
    opacity: 1;
  }
}

@keyframes oc_parceque {
  0%, 8% {
    opacity: 0;
    transform: scale(1.3);
  }
  12%, 65% {
    opacity: 1;
    transform: scale(1.3);
  }
  70% {
    opacity: 1;
    transform: scale(1.4);
  }
  75% {
    opacity: 1;
    transform: scale(1.3);
  }
  80% {
    opacity: 1;
    transform: scale(1.4);
  }
  85% {
    opacity: 1;
    transform: scale(1.3);
  }
  90% {
    opacity: 1;
    transform: scale(1.4);
  }
  95% {
    opacity: 1;
    transform: scale(1.3);
  }
}