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

body, html {
  margin: 0;
  padding: 0;
}

body, .oc_fondu {
  background-color: white;
}

.oc_anim .oc_fondu {
  opacity: 0;
}

.oc_anim #oc_fondu_debut {
  -webkit-animation: oc_fondu_debut 15s 2 ease normal;
          animation: oc_fondu_debut 15s 2 ease normal;
}

.oc_anim #oc_fondu_fin {
  -webkit-animation: oc_fondu_fin 15s 1 ease normal;
          animation: oc_fondu_fin 15s 1 ease normal;
}

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

#oc_conteneur {
  position: relative;
  background-color: #77c4e2;
  overflow: hidden;
}

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

#bg_exit {
  width: 300px;
  height: 600px;
  cursor: pointer;
}

#oc_scene {
  width: 300px;
  height: 600px;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  opacity: 0.8;
  top: 250px;
}

.oc_anim #oc_scene {
  -webkit-animation: oc_scene 15s 2 ease normal;
          animation: oc_scene 15s 2 ease normal;
}

.oc_txt {
  font-family: 'Droid Sans', sans-serif;
  color: #ffffff;
  width: 300px;
  text-align: center;
  margin-top: 100px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}

#oc_offre {
  width: 300px;
  line-height: 42px;
  background-color: #005d9d;
  color: #ffffff;
  text-align: center;
  font-family: 'Droid Sans', sans-serif;
  font-size: 18px;
}

#oc_ml_fin {
  color: #26ace3;
  text-align: right;
  font-family: 'Droid Sans', sans-serif;
  font-size: 8px;
  right: 12px;
  bottom: 1px;
}

.oc_anim #oc_ml_fin {
  -webkit-animation: oc_ml_fin 15s 2 ease normal;
          animation: oc_ml_fin 15s 2 ease normal;
}

#conteneur_cta {
  width: 300px;
  height: 32px;
  top: 240px;
  text-align: center;
}

#oc_cta {
  display: inline-block;
  color: #ffffff;
  font-size: 12px;
  line-height: 32px;
  background-color: #abca3c;
  text-align: center;
  font-family: 'Droid Sans', sans-serif;
  text-transform: uppercase;
  padding: 0px 18px;
  border-radius: 16px;
}

.oc_anim #oc_cta {
  -webkit-animation: oc_cta 15s 2 ease normal;
          animation: oc_cta 15s 2 ease normal;
}

#oc_fleche_blanche_cta {
  position: relative !important;
  margin-left: 6px;
}

#oc_cercle_vert {
  background-color: #91C636;
  border-radius: 50%;
  width: 770px;
  height: 770px;
  top: 160px;
  left: 160px;
}

#oc_conteneur_terre_contenu, #oc_conteneur_terre_fond {
  width: 1090px;
  height: 1090px;
  top: -32px;
  left: -395px;
}

#oc_conteneur_terre_contenu {
  -webkit-transform: rotate(-120deg);
      -ms-transform: rotate(-120deg);
          transform: rotate(-120deg);
}

.oc_anim #oc_conteneur_terre_contenu {
  -webkit-animation: oc_conteneur_terre_contenu 15s 2 linear normal;
          animation: oc_conteneur_terre_contenu 15s 2 linear normal;
}

#oc_conteneur_terre_fond {
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
          transform: rotate(-50deg);
}

.oc_anim #oc_conteneur_terre_fond {
  -webkit-animation: oc_conteneur_terre_fond 15s 2 linear normal;
          animation: oc_conteneur_terre_fond 15s 2 linear normal;
}

.oc_lieu_depart {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.oc_lieu_arrive {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}

#oc_nuages {
  top: -26px;
  left: -395px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.oc_anim #oc_nuages {
  -webkit-animation: oc_nuages 15s 2 linear normal;
          animation: oc_nuages 15s 2 linear normal;
}

#oc_txt1 {
  width: 190px;
  left: 55px;
  text-transform: uppercase;
  top: 20px;
  font-weight: bold;
  font-size: 22px;
  opacity: 0;
}

.oc_anim #oc_txt1 {
  -webkit-animation: oc_txt1 15s 2 ease normal;
          animation: oc_txt1 15s 2 ease normal;
}

#oc_txt2 {
  width: 220px;
  left: 40px;
  top: 14px;
  font-size: 17px;
  opacity: 0;
}

.oc_anim #oc_txt2 {
  -webkit-animation: oc_txt2 15s 2 ease normal;
          animation: oc_txt2 15s 2 ease normal;
}

.gros {
  font-size: 22px;
}

#oc_txt3 {
  width: 250px;
  left: 25px;
  top: 20px;
  font-size: 20px;
  opacity: 1;
}

.oc_anim #oc_txt3 {
  -webkit-animation: oc_txt3 15s 2 ease normal;
          animation: oc_txt3 15s 2 ease normal;
}

.oc_anim.offre #oc_txt3 {
  top: 50px;
  -webkit-animation: oc_txt3 15s 2 ease normal, oc_txt3_si_offre 15s 2 ease normal;
          animation: oc_txt3 15s 2 ease normal, oc_txt3_si_offre 15s 2 ease normal;
}

#oc_picto_elec {
  left: 90px;
}

#oc_picto_gaz {
  right: 90px;
}

#oc_picto_elec, #oc_picto_gaz {
  opacity: 0;
  top: 195px;
}

.oc_anim #oc_picto_elec, .oc_anim #oc_picto_gaz {
  -webkit-animation: oc_txt2 15s 2 ease normal;
          animation: oc_txt2 15s 2 ease normal;
}

.oc_anim #oc_offre {
  -webkit-animation: oc_offre 15s 2 ease normal;
          animation: oc_offre 15s 2 ease normal;
}

#oc_soleil {
  width: 72px;
  height: 72px;
  left: 18px;
  top: -10px;
}

#oc_soleil_centre {
  background-color: #f8da67;
  width: 47px;
  height: 47px;
  left: 12px;
  top: 12px;
  border-radius: 50%;
}

#oc_soleil_rayon1 {
  width: 60px;
  height: 60px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background-color: rgba(248, 218, 103, 0.2);
}

.oc_anim #oc_soleil_rayon1 {
  -webkit-animation: oc_soleil_rayon 15s 2 ease normal;
          animation: oc_soleil_rayon 15s 2 ease normal;
}

#oc_soleil_rayon2 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(248, 218, 103, 0.2);
}

.oc_anim #oc_soleil_rayon2 {
  -webkit-animation: oc_soleil_rayon 15s 2 ease normal;
          animation: oc_soleil_rayon 15s 2 ease normal;
}

#oc_carton {
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-transform-origin: 150px 500px;
      -ms-transform-origin: 150px 500px;
          transform-origin: 150px 500px;
  opacity: 1;
}

.oc_anim #oc_carton {
  -webkit-animation: oc_carton 15s 2 linear normal;
          animation: oc_carton 15s 2 linear normal;
}

#oc_camion {
  top: 332px;
  left: 103px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transform-origin: 50px 450px;
      -ms-transform-origin: 50px 450px;
          transform-origin: 50px 450px;
}

.oc_anim #oc_camion {
  -webkit-animation: oc_camion 15s 2 linear normal;
          animation: oc_camion 15s 2 linear normal;
}

#oc_pc {
  -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
          transform: rotate(-40deg);
  -webkit-transform-origin: 150px 500px;
      -ms-transform-origin: 150px 500px;
          transform-origin: 150px 500px;
  top: -70px;
}

.oc_anim #oc_pc {
  -webkit-animation: oc_pc 15s 2 ease normal;
          animation: oc_pc 15s 2 ease normal;
}

#oc_personnage, #oc_maison_depart {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-transform-origin: 150px 500px;
      -ms-transform-origin: 150px 500px;
          transform-origin: 150px 500px;
}

.oc_anim #oc_personnage, .oc_anim #oc_maison_depart {
  -webkit-animation: oc_maison_depart 15s 2 linear normal;
          animation: oc_maison_depart 15s 2 linear normal;
}

#oc_personnage2, #oc_maison_arrive {
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-transform-origin: 150px 500px;
      -ms-transform-origin: 150px 500px;
          transform-origin: 150px 500px;
}

.oc_anim #oc_personnage2, .oc_anim #oc_maison_arrive {
  -webkit-animation: oc_maison_arrive 15s 2 linear normal;
          animation: oc_maison_arrive 15s 2 linear normal;
}

.oc_anim .oc_eolienne {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: oc_eolienne 2s infinite linear normal;
          animation: oc_eolienne 2s infinite linear normal;
}

#oc_eolienne_chemin {
  top: 318px;
  left: 898px;
}

#oc_eolienne_fond1 {
  top: 111px;
  left: 409px;
}

#oc_eolienne_fond2 {
  top: 97px;
  left: 440px;
}

.depart_ville #oc_eolienne_depart {
  top: 135px;
  left: 337px;
}

.depart_campagne #oc_eolienne_depart {
  top: 126px;
  left: 350px;
}

.arrive_ville #oc_eolienne_arrive {
  top: 554px;
  left: 945px;
}

.arrive_campagne #oc_eolienne_arrive {
  top: 570px;
  left: 947px;
}

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

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

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

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

@-webkit-keyframes oc_eolienne {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes oc_eolienne {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes oc_soleil_rayon {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  30% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  30.01% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  60.01% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes oc_soleil_rayon {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  15% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  30% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  30.01% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  60.01% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes oc_conteneur_terre_contenu {
  0%, 20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}

@keyframes oc_conteneur_terre_contenu {
  0%, 20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}

@-webkit-keyframes oc_conteneur_terre_fond {
  0%, 20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
}

@keyframes oc_conteneur_terre_fond {
  0%, 20% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
}

@-webkit-keyframes oc_nuages {
  0%, 20% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  60%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes oc_nuages {
  0%, 20% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  60%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes oc_txt1 {
  0%, 20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}

@keyframes oc_txt1 {
  0%, 20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_txt2 {
  0%, 30% {
    opacity: 0;
  }
  35%, 50% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
}

@keyframes oc_txt2 {
  0%, 30% {
    opacity: 0;
  }
  35%, 50% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_txt3 {
  0%, 60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
}

@keyframes oc_txt3 {
  0%, 60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_txt3_si_offre {
  0%, 75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes oc_txt3_si_offre {
  0%, 75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes oc_cta {
  0%, 70% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  72% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  74% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  76% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes oc_cta {
  0%, 70% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  72% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  74% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  76% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@-webkit-keyframes oc_ml_fin {
  0%, 75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}

@keyframes oc_ml_fin {
  0%, 75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_offre {
  0%, 75% {
    -webkit-transform: translateY(-42px);
            transform: translateY(-42px);
  }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes oc_offre {
  0%, 75% {
    -webkit-transform: translateY(-42px);
            transform: translateY(-42px);
  }
  80% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes oc_scene {
  0%, 75% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  80% {
    opacity: 0.8;
    -webkit-filter: blur(3px);
            filter: blur(3px);
  }
}

@keyframes oc_scene {
  0%, 75% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  80% {
    opacity: 0.8;
    -webkit-filter: blur(3px);
            filter: blur(3px);
  }
}

@-webkit-keyframes oc_pc {
  0%, 27% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  35%, 42% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}

@keyframes oc_pc {
  0%, 27% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  35%, 42% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}

@-webkit-keyframes oc_camion {
  0% {
    -webkit-transform: rotate(-35deg);
            transform: rotate(-35deg);
  }
  13%, 15% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  33%, 40% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  48%, 70% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
}

@keyframes oc_camion {
  0% {
    -webkit-transform: rotate(-35deg);
            transform: rotate(-35deg);
  }
  13%, 15% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  33%, 40% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
  48%, 70% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
  }
}

@-webkit-keyframes oc_carton {
  0%, 13% {
    opacity: 1;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  15%, 59.99% {
    opacity: 0;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}

@keyframes oc_carton {
  0%, 13% {
    opacity: 1;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  15%, 59.99% {
    opacity: 0;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}

@-webkit-keyframes oc_maison_depart {
  0%, 20% {
    -webkit-transform: rotate(-13deg);
            transform: rotate(-13deg);
  }
  28% {
    -webkit-transform: rotate(-42deg);
            transform: rotate(-42deg);
  }
}

@keyframes oc_maison_depart {
  0%, 20% {
    -webkit-transform: rotate(-13deg);
            transform: rotate(-13deg);
  }
  28% {
    -webkit-transform: rotate(-42deg);
            transform: rotate(-42deg);
  }
}

@-webkit-keyframes oc_maison_arrive {
  0%, 46% {
    -webkit-transform: rotate(32deg);
            transform: rotate(32deg);
  }
  60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}

@keyframes oc_maison_arrive {
  0%, 46% {
    -webkit-transform: rotate(32deg);
            transform: rotate(32deg);
  }
  60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}