/*** FRAMES ***/
html, body, #oc_fondu, #oc_conteneur, #oc_bordure {
  width: 300px;
  height: 250px;
}

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

img {
  border: none;
}

body {
  background-color: white;
}

#oc_fondu {
  background-color: white;
  opacity: 0;
  pointer-events: none;
  -webkit-animation: oc_fondu 30s 1 linear normal;
          animation: oc_fondu 30s 1 linear normal;
}

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

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

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

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

/*** GENERATION AUTOMATIQUE DE L'ASSIGNIATION DES ANIMATIONS POUR LES FRAMES ***/
#oc_frame1 {
  -webkit-animation: oc_frame1 10s 3 linear forwards;
          animation: oc_frame1 10s 3 linear forwards;
}

#oc_frame2 {
  -webkit-animation: oc_frame2 10s 3 linear forwards;
          animation: oc_frame2 10s 3 linear forwards;
}

#oc_frame3 {
  -webkit-animation: oc_frame3 10s 3 linear forwards;
          animation: oc_frame3 10s 3 linear forwards;
}

/*** FRAME 1 ***/
#oc_txt1 {
  -webkit-animation: oc_txt1 10s 3 ease normal;
          animation: oc_txt1 10s 3 ease normal;
}

#oc_etiquette {
  opacity: 0;
  -webkit-animation: oc_etiquette 10s 3 ease normal;
          animation: oc_etiquette 10s 3 ease normal;
}

#oc_prix {
  opacity: 0;
  -webkit-animation: oc_prix 10s 3 ease normal;
          animation: oc_prix 10s 3 ease normal;
}

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

#oc_logo1_1 {
  -webkit-clip-path: inset(0px 103px 0px 176px);
          clip-path: inset(0px 103px 0px 176px);
  -webkit-animation: oc_logo1_1 10s 3 ease normal;
          animation: oc_logo1_1 10s 3 ease normal;
}

#oc_logo1_2 {
  -webkit-clip-path: inset(0px 82px 0px 196px);
          clip-path: inset(0px 82px 0px 196px);
  -webkit-animation: oc_logo1_2 10s 3 ease normal;
          animation: oc_logo1_2 10s 3 ease normal;
}

#oc_logo1_3 {
  -webkit-clip-path: inset(0px 60px 0px 219px);
          clip-path: inset(0px 60px 0px 219px);
  -webkit-animation: oc_logo1_3 10s 3 ease normal;
          animation: oc_logo1_3 10s 3 ease normal;
}

#oc_logo1_4 {
  -webkit-clip-path: inset(0px 35px 0px 245px);
          clip-path: inset(0px 35px 0px 245px);
  -webkit-animation: oc_logo1_4 10s 3 ease normal;
          animation: oc_logo1_4 10s 3 ease normal;
}

#oc_logo1_5 {
  -webkit-clip-path: inset(0px 0px 0px 266px);
          clip-path: inset(0px 0px 0px 266px);
  -webkit-animation: oc_logo1_5 10s 3 ease normal;
          animation: oc_logo1_5 10s 3 ease normal;
}

#oc_logo2 {
  -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
          clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
  -webkit-animation: oc_logo2 10s 3 ease normal;
          animation: oc_logo2 10s 3 ease normal;
}

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

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

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

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

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

#oc_fond_cta {
  background-color: #78FAAE;
  width: 85px;
  height: 24px;
  border-radius: 12px;
  left: 15px;
  top: 89px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  -webkit-animation: oc_fond_cta 10s 3 linear normal;
          animation: oc_fond_cta 10s 3 linear normal;
}

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

#oc_txt_cta2 {
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#oc_conteneur:hover #oc_txt_cta2 {
  opacity: 1;
}
#oc_conteneur:hover #oc_fond_cta {
  background-color: #0E3A2F;
}

@-webkit-keyframes oc_fondu {
  0% {
    opacity: 1;
  }
  2%, 31% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  35%, 64% {
    opacity: 0;
  }
  66.66% {
    opacity: 1;
  }
  69%, 100% {
    opacity: 0;
  }
}

@keyframes oc_fondu {
  0% {
    opacity: 1;
  }
  2%, 31% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  35%, 64% {
    opacity: 0;
  }
  66.66% {
    opacity: 1;
  }
  69%, 100% {
    opacity: 0;
  }
}
/*** FRAME 1 ***/
@-webkit-keyframes oc_logo1 {
  0% {
    opacity: 0;
  }
  10%, 100% {
    opacity: 1;
  }
}
@keyframes oc_logo1 {
  0% {
    opacity: 0;
  }
  10%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_logo1_1 {
  0% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_logo1_1 {
  0% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_logo1_2 {
  0% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_logo1_2 {
  0% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_logo1_4 {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_logo1_4 {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_logo1_5 {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_logo1_5 {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  10%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_txt1 {
  0%, 10% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  16%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_txt1 {
  0%, 10% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  16%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_txt1_3 {
  0%, 10% {
    opacity: 0;
  }
  13%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_3 {
  0%, 10% {
    opacity: 0;
  }
  13%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_txt1_2 {
  0%, 12% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_2 {
  0%, 12% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_txt1_1 {
  0%, 14% {
    opacity: 0;
  }
  17%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_1 {
  0%, 14% {
    opacity: 0;
  }
  17%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_etiquette {
  0%, 17% {
    opacity: 0;
  }
  20%, 37% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}
@keyframes oc_etiquette {
  0%, 17% {
    opacity: 0;
  }
  20%, 37% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_prix {
  0%, 40% {
    opacity: 0;
  }
  43%, 67% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@keyframes oc_prix {
  0%, 40% {
    opacity: 0;
  }
  43%, 67% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_logo2 {
  0%, 25% {
    -webkit-clip-path: polygon(0px -80px, 300px -80px, 300px 0px);
            clip-path: polygon(0px -80px, 300px -80px, 300px 0px);
  }
  35%, 100% {
    -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
            clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
  }
}
@keyframes oc_logo2 {
  0%, 25% {
    -webkit-clip-path: polygon(0px -80px, 300px -80px, 300px 0px);
            clip-path: polygon(0px -80px, 300px -80px, 300px 0px);
  }
  35%, 100% {
    -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
            clip-path: polygon(0px 0px, 300px 0px, 300px 81px);
  }
}
@-webkit-keyframes oc_fond_cta {
  0%, 71% {
    width: 24px;
    -webkit-transform: translateX(28px) scale(0);
            transform: translateX(28px) scale(0);
  }
  72% {
    width: 24px;
    -webkit-transform: translateX(28px) scale(1);
            transform: translateX(28px) scale(1);
  }
  74%, 100% {
    width: 85px;
    -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
  }
}
@keyframes oc_fond_cta {
  0%, 71% {
    width: 24px;
    -webkit-transform: translateX(28px) scale(0);
            transform: translateX(28px) scale(0);
  }
  72% {
    width: 24px;
    -webkit-transform: translateX(28px) scale(1);
            transform: translateX(28px) scale(1);
  }
  74%, 100% {
    width: 85px;
    -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
  }
}
@-webkit-keyframes oc_txt_cta {
  0%, 74% {
    opacity: 0;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
  }
  77%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_txt_cta {
  0%, 74% {
    opacity: 0;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
  }
  77%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}