/*** COULEURS ***/
/*** NUAGES ***/
/*** AVION ***/
/*** SAUT PARACHUTE ***/
/*** GENERAL ***/
/*** GESTION FRAMES ***/
html, body, .oc_fondu, #oc_conteneur, #oc_bordure, #oc_big_bordure {
  width: 300px;
  height: 250px;
}

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

body {
  background-color: #FFF;
}

.oc_fondu {
  opacity: 0;
  background: #000;
}

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

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

#oc_conteneur {
  background: #000;
}

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

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

#oc_conteneur img {
  position: absolute;
  border: none;
}

#clickthrough-button {
  cursor: pointer;
}

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

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

#oc_frame1 {
  -webkit-animation: oc_frame1 10s 3 ease normal;
          animation: oc_frame1 10s 3 ease normal;
}

#oc_frame2 {
  -webkit-animation: oc_frame2 10s 3 ease normal;
          animation: oc_frame2 10s 3 ease normal;
}

#oc_frame3 {
  -webkit-animation: oc_frame3 10s 3 ease normal;
          animation: oc_frame3 10s 3 ease normal;
}

#oc_frame4 {
  -webkit-animation: oc_frame4 10s 3 ease normal;
          animation: oc_frame4 10s 3 ease normal;
}

#oc_frame2 {
  -webkit-transform: translate(0, 250px);
      -ms-transform: translate(0, 250px);
          transform: translate(0, 250px);
}

/*** GENERAL ***/
#oc_logo1 {
  opacity: 0;
  -webkit-animation: oc_logo1 10s 3 ease normal;
          animation: oc_logo1 10s 3 ease normal;
}

/*** FRAME 1 ***/
#oc_avion_container {
  width: 199px;
  height: 94px;
  top: 58px;
  left: 50px;
  -webkit-animation: oc_avion_container 10s 3 ease-in-out forwards;
          animation: oc_avion_container 10s 3 ease-in-out forwards;
}

#oc_avion_helice {
  width: 3.5px;
  height: 45px;
  left: 189px;
  top: 37px;
  -webkit-animation: oc_avion_helice 10s 3 linear forwards;
          animation: oc_avion_helice 10s 3 linear forwards;
}

#oc_avion {
  width: 199px;
  height: 94px;
}

/*** NUAGES ***/
#oc_nuage1 {
  width: 115px;
  height: 68px;
  top: 144px;
  -webkit-animation: oc_nuage1 10s 3 linear forwards;
          animation: oc_nuage1 10s 3 linear forwards;
}

#oc_nuage2 {
  width: 115px;
  height: 68px;
  top: 104px;
  -webkit-animation: oc_nuage2 10s 3 linear forwards;
          animation: oc_nuage2 10s 3 linear forwards;
}

#oc_nuage3 {
  width: 173px;
  height: 102px;
  top: 184px;
  -webkit-animation: oc_nuage3 10s 3 linear forwards;
          animation: oc_nuage3 10s 3 linear forwards;
}

/*** FRAME 2 ***/
#oc_frame2_red_rect {
  width: 250px;
  height: 150px;
  left: 25px;
  top: 63px;
  background: #e2211c;
}

/*** FRAME 3 ***/
#oc_cta {
  box-sizing: border-box;
  width: 239px;
  height: 47px;
  left: 32px;
  top: 161px;
  background: url("img/oc_cta_txt.png") #e2211c center;
  background-size: 239px 47px;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-animation: oc_cta 10s 3 linear normal;
          animation: oc_cta 10s 3 linear normal;
}

#oc_jumper {
  width: 300px;
  height: 500px;
  top: 30px;
  -webkit-animation: oc_jumper 10s 3 linear forwards;
          animation: oc_jumper 10s 3 linear forwards;
}

/*** FRAME 4 ***/
#oc_logo2 {
  width: 100px;
  height: 85px;
  left: 100px;
  top: 10px;
  -webkit-animation: oc_logo2 10s 3 ease normal;
          animation: oc_logo2 10s 3 ease normal;
}

#oc_frame4_txt1 {
  -webkit-animation: oc_frame4_txt1 10s 3 ease normal;
          animation: oc_frame4_txt1 10s 3 ease normal;
}

#oc_frame4_txt2 {
  -webkit-animation: oc_frame4_txt2 10s 3 ease normal;
          animation: oc_frame4_txt2 10s 3 ease normal;
}

@-webkit-keyframes oc_fondu_debut {
  0% {
    opacity: 1;
  }
  3%, 100% {
    opacity: 0;
  }
}

@keyframes oc_fondu_debut {
  0% {
    opacity: 1;
  }
  3%, 100% {
    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;
  }
}
/* FRAME 1 */
@-webkit-keyframes oc_avion_container {
  0% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
  28%, 100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes oc_avion_container {
  0% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
  28%, 100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@-webkit-keyframes oc_avion_helice {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  28%, 100% {
    -webkit-transform: rotateY(900deg);
            transform: rotateY(900deg);
  }
}
@keyframes oc_avion_helice {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  28%, 100% {
    -webkit-transform: rotateY(900deg);
            transform: rotateY(900deg);
  }
}
@-webkit-keyframes oc_nuage1 {
  0% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  32%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
@keyframes oc_nuage1 {
  0% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  32%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
@-webkit-keyframes oc_nuage2 {
  0%, 5% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  53%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
@keyframes oc_nuage2 {
  0%, 5% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  53%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
@-webkit-keyframes oc_nuage3 {
  0%, 10% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  78%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
@keyframes oc_nuage3 {
  0%, 10% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  78%, 100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
/* FRAME 2 */
@-webkit-keyframes oc_frame2 {
  0%, 25% {
    -webkit-transform: translate(-300px, 0);
            transform: translate(-300px, 0);
  }
  31%, 48% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  54%, 100% {
    -webkit-transform: translate(0, 250px);
            transform: translate(0, 250px);
  }
}
@keyframes oc_frame2 {
  0%, 25% {
    -webkit-transform: translate(-300px, 0);
            transform: translate(-300px, 0);
  }
  31%, 48% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  54%, 100% {
    -webkit-transform: translate(0, 250px);
            transform: translate(0, 250px);
  }
}
/* FRAME 3 */
@-webkit-keyframes oc_logo1 {
  0%, 48% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes oc_logo1 {
  0%, 48% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_jumper {
  0%, 48% {
    -webkit-transform: translateY(-570px) scale(0.5);
            transform: translateY(-570px) scale(0.5);
  }
  68% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  78%, 100% {
    -webkit-transform: translateY(570px) scale(1);
            transform: translateY(570px) scale(1);
  }
}
@keyframes oc_jumper {
  0%, 48% {
    -webkit-transform: translateY(-570px) scale(0.5);
            transform: translateY(-570px) scale(0.5);
  }
  68% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  78%, 100% {
    -webkit-transform: translateY(570px) scale(1);
            transform: translateY(570px) scale(1);
  }
}
@-webkit-keyframes oc_cta {
  0%, 48% {
    -webkit-transform: translateY(-570px) scale(0.5);
            transform: translateY(-570px) scale(0.5);
  }
  68%, 100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}
@keyframes oc_cta {
  0%, 48% {
    -webkit-transform: translateY(-570px) scale(0.5);
            transform: translateY(-570px) scale(0.5);
  }
  68%, 100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}
/* FRAME 4 */
@-webkit-keyframes oc_logo2 {
  0%, 68% {
    opacity: 0;
    -webkit-transform: scale(5);
            transform: scale(5);
  }
  74%, 100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes oc_logo2 {
  0%, 68% {
    opacity: 0;
    -webkit-transform: scale(5);
            transform: scale(5);
  }
  74%, 100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes oc_frame4_txt1 {
  0%, 74% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
}
@keyframes oc_frame4_txt1 {
  0%, 74% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_frame4_txt2 {
  0%, 75% {
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
}
@keyframes oc_frame4_txt2 {
  0%, 75% {
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
}