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

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: 728px;
  height: 90px;
}

/*** 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 690px 0px 15px);
          clip-path: inset(0px 690px 0px 15px);
  -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 669px 0px 39px);
          clip-path: inset(0px 669px 0px 39px);
  -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 649px 0px 59px);
          clip-path: inset(0px 649px 0px 59px);
  -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 628px 0px 80px);
          clip-path: inset(0px 628px 0px 80px);
  -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 101px);
          clip-path: inset(0px 0px 0px 101px);
  -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, 150px 0px, 174px 90px, 0px 90px);
          clip-path: polygon(0px 0px, 150px 0px, 174px 90px, 0px 90px);
  -webkit-animation: oc_logo2 10s 3 ease normal;
          animation: oc_logo2 10s 3 ease normal;
}

#oc_facette2 {
  -webkit-clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
          clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
  -webkit-animation: oc_facette2 10s 3 ease normal;
          animation: oc_facette2 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_txt1_4 {
  -webkit-animation: oc_txt1_4 10s 3 ease normal;
          animation: oc_txt1_4 10s 3 ease normal;
}

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

#oc_fond_cta {
  background-color: #0E3A2F;
  width: 110px;
  height: 20px;
  border-radius: 15px;
  left: 601px;
  top: 28px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  border: 1px solid #0E3A2F;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -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: #78FAAE;
}

@-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);
  }
  18%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_txt1 {
  0%, 10% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  18%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_txt1_4 {
  0%, 10% {
    opacity: 0;
  }
  13%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_4 {
  0%, 10% {
    opacity: 0;
  }
  13%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_txt1_3 {
  0%, 12% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_3 {
  0%, 12% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_txt1_2 {
  0%, 14% {
    opacity: 0;
  }
  17%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_2 {
  0%, 14% {
    opacity: 0;
  }
  17%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_txt1_1 {
  0%, 16% {
    opacity: 0;
  }
  19%, 100% {
    opacity: 1;
  }
}
@keyframes oc_txt1_1 {
  0%, 16% {
    opacity: 0;
  }
  19%, 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 0px, -24px 0px, 0px 90px, 0px 90px);
            clip-path: polygon(0px 0px, -24px 0px, 0px 90px, 0px 90px);
  }
  35%, 100% {
    -webkit-clip-path: polygon(0px 0px, 150px 0px, 174px 90px, 0px 90px);
            clip-path: polygon(0px 0px, 150px 0px, 174px 90px, 0px 90px);
  }
}
@keyframes oc_logo2 {
  0%, 25% {
    -webkit-clip-path: polygon(0px 0px, -24px 0px, 0px 90px, 0px 90px);
            clip-path: polygon(0px 0px, -24px 0px, 0px 90px, 0px 90px);
  }
  35%, 100% {
    -webkit-clip-path: polygon(0px 0px, 150px 0px, 174px 90px, 0px 90px);
            clip-path: polygon(0px 0px, 150px 0px, 174px 90px, 0px 90px);
  }
}
@-webkit-keyframes oc_facette2 {
  0%, 35% {
    -webkit-clip-path: polygon(778px 0px, 728px 0px, 728px 90px, 728px 90px);
            clip-path: polygon(778px 0px, 728px 0px, 728px 90px, 728px 90px);
  }
  45%, 100% {
    -webkit-clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
            clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
  }
}
@keyframes oc_facette2 {
  0%, 35% {
    -webkit-clip-path: polygon(778px 0px, 728px 0px, 728px 90px, 728px 90px);
            clip-path: polygon(778px 0px, 728px 0px, 728px 90px, 728px 90px);
  }
  45%, 100% {
    -webkit-clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
            clip-path: polygon(458px 0px, 728px 0px, 728px 90px, 408px 90px);
  }
}
@-webkit-keyframes oc_fond_cta {
  0%, 71% {
    width: 20px;
    -webkit-transform: translateX(45px) scale(0);
            transform: translateX(45px) scale(0);
  }
  72% {
    width: 20px;
    -webkit-transform: translateX(45px) scale(1);
            transform: translateX(45px) scale(1);
  }
  74%, 100% {
    width: 110px;
    -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
  }
}
@keyframes oc_fond_cta {
  0%, 71% {
    width: 20px;
    -webkit-transform: translateX(45px) scale(0);
            transform: translateX(45px) scale(0);
  }
  72% {
    width: 20px;
    -webkit-transform: translateX(45px) scale(1);
            transform: translateX(45px) scale(1);
  }
  74%, 100% {
    width: 110px;
    -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);
  }
}