@font-face {
  font-family: 'Audi Type Extended';
  src: local("Audi Type Extended Normal"), local("AudiType-ExtendedNormal"), url("AudiType-ExtendedNormal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*** 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: #01061e;
  opacity: 0;
  pointer-events: none;
}

#oc_fondu_debut {
  -webkit-animation: oc_fondu_debut 28s 1 ease normal;
          animation: oc_fondu_debut 28s 1 ease normal;
}

#oc_fondu_fin {
  -webkit-animation: oc_fondu_fin 28s 0 ease normal;
          animation: oc_fondu_fin 28s 0 ease normal;
}

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

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

#oc_conteneur {
  background-color: #010924;
}

#oc_bordure {
  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 28s 1 ease forwards;
          animation: oc_frame1 28s 1 ease forwards;
}

#oc_frame2 {
  -webkit-animation: oc_frame2 28s 1 ease forwards;
          animation: oc_frame2 28s 1 ease forwards;
}

#oc_frame3 {
  -webkit-animation: oc_frame3 28s 1 ease forwards;
          animation: oc_frame3 28s 1 ease forwards;
}

#oc_frame4 {
  -webkit-animation: oc_frame4 28s 1 ease forwards;
          animation: oc_frame4 28s 1 ease forwards;
}

#oc_frame5 {
  -webkit-animation: oc_frame5 28s 1 ease forwards;
          animation: oc_frame5 28s 1 ease forwards;
}

#oc_frame6 {
  -webkit-animation: oc_frame6 28s 1 ease forwards;
          animation: oc_frame6 28s 1 ease forwards;
}

#oc_frame7 {
  -webkit-animation: oc_frame7 28s 1 ease forwards;
          animation: oc_frame7 28s 1 ease forwards;
}

#oc_frame1, #oc_frame6 {
  background-color: #000000;
  left: 0;
}

#oc_adresse1 {
  width: 205px;
  left: 515px;
  top: 13px;
  font-size: 13px;
  text-align: left;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

#oc_adresse2 {
  width: 205px;
  left: 515px;
  top: 13px;
  font-size: 13px;
  text-align: left;
  color: #f669c8;
  opacity: 0;
  font-family: 'Audi Type Extended';
  -webkit-animation: oc_f6_txt 28s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_f6_txt 28s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_date {
  width: 200px;
  left: 302px;
  top: 18px;
  font-size: 14px;
  color: #f669c8;
  text-align: right;
  font-family: 'Audi Type Extended';
}

#oc_f2_voiture1, #oc_f2_voiture2 {
  left: -1077px;
}

#oc_f3_voiture {
  left: -718px;
}

#oc_f4_voiture {
  left: -359px;
  bottom: 0.5px #34393D solid;
}

#oc_conteneur_visuels {
  right: 0;
  width: 359px;
  height: 90px;
}

/*** FRAME 1 ***/
#oc_f1_fond {
  left: 0;
  -webkit-animation: oc_f1_fond 28s 1 ease normal;
          animation: oc_f1_fond 28s 1 ease normal;
}

#oc_f1_txt1 {
  top: 8px;
  opacity: 0;
  -webkit-animation: oc_f1_txt1 28s 1 ease normal;
          animation: oc_f1_txt1 28s 1 ease normal;
}

/*** FRAME2 ***/
#oc_f2_txt1a {
  opacity: 0;
  -webkit-animation: oc_f2_txt1a 28s 1 ease normal;
          animation: oc_f2_txt1a 28s 1 ease normal;
}

#oc_f2_txt1b {
  opacity: 0;
  -webkit-animation: oc_f2_txt1b 28s 1 ease normal;
          animation: oc_f2_txt1b 28s 1 ease normal;
}

#oc_f2_txt1c {
  opacity: 0;
  -webkit-animation: oc_f2_txt1c 28s 1 ease normal;
          animation: oc_f2_txt1c 28s 1 ease normal;
}

#oc_f2_voiture1 {
  -webkit-animation: oc_f2_voiture1 28s 1 ease normal;
          animation: oc_f2_voiture1 28s 1 ease normal;
}

#oc_f2_voiture2 {
  -webkit-animation: oc_f2_voiture2 28s 1 ease normal;
          animation: oc_f2_voiture2 28s 1 ease normal;
}

/*** FRAME3 ***/
#oc_f3_txt1b {
  opacity: 0;
  -webkit-animation: oc_f3_txt1b 28s 1 ease normal;
          animation: oc_f3_txt1b 28s 1 ease normal;
}

#oc_f3_voiture {
  -webkit-animation: oc_f3_voiture 28s 1 ease normal;
          animation: oc_f3_voiture 28s 1 ease normal;
}

/*** FRAME4 ***/
#oc_f4_txt1b {
  opacity: 0;
  -webkit-animation: oc_f4_txt1b 28s 1 ease normal;
          animation: oc_f4_txt1b 28s 1 ease normal;
}

#oc_f4_voiture {
  -webkit-animation: oc_f4_voiture 28s 1 ease normal;
          animation: oc_f4_voiture 28s 1 ease normal;
}

/*** FRAME5 ***/
#oc_f5_voiture {
  top: -30px;
  left: 0;
  -webkit-animation: oc_f5_voiture 28s 1 ease normal;
          animation: oc_f5_voiture 28s 1 ease normal;
}

#oc_f5_txt1 {
  opacity: 0;
  -webkit-animation: oc_f5_txt1 28s 1 ease normal;
          animation: oc_f5_txt1 28s 1 ease normal;
}

#oc_f5_txt2, #oc_ml {
  opacity: 0;
  -webkit-animation: oc_f5_txt2 28s 1 ease normal;
          animation: oc_f5_txt2 28s 1 ease normal;
}

/*** FRAME 6 ***/
#oc_logo2 {
  opacity: 1;
  -webkit-animation: oc_logo2 28s 1 ease normal;
          animation: oc_logo2 28s 1 ease normal;
}

#oc_f6_txt1 {
  opacity: 0;
  -webkit-animation: oc_f6_txt 28s 1 ease normal;
          animation: oc_f6_txt 28s 1 ease normal;
}

/*** FRAME7 ***/
#oc_f7_txt1 {
  -webkit-animation: oc_f7_txt1 28s 1 ease normal;
          animation: oc_f7_txt1 28s 1 ease normal;
}

#oc_cta {
  border: 1px solid #ffffff;
  top: 24px;
  left: 484px;
  width: 168px;
  height: 43px;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
  -webkit-animation: oc_cta 28s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_cta 28s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_cta1 {
  width: 168px;
  height: 43px;
  opacity: 1;
  transition: opacity 0.2s;
  transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
}

#oc_cta2 {
  width: 168px;
  height: 43px;
  opacity: 0;
  transition: opacity 0.2s;
  background-color: #ffffff;
  transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
}

#oc_conteneur:hover #oc_cta1 {
  opacity: 0;
}
#oc_conteneur:hover #oc_cta2 {
  opacity: 1;
}

#oc_hl {
  opacity: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, white 50%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
  background-blend-mode: multiply;
  -webkit-animation: oc_hl 28s 1 ease normal;
          animation: oc_hl 28s 1 ease normal;
}

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

@keyframes oc_fondu_debut {
  0% {
    opacity: 1;
  }
  3% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_fondu_fin {
  0%, 97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes oc_fondu_fin {
  0%, 97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*** FRAME 1 ***/
@-webkit-keyframes oc_frame1 {
  0%, 8% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
  13%, 100% {
    opacity: 0;
  }
}
@keyframes oc_frame1 {
  0%, 8% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
  13%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_f1_fond2 {
  0%, 63% {
    opacity: 0;
  }
  68%, 100% {
    opacity: 1;
  }
}
@keyframes oc_f1_fond2 {
  0%, 63% {
    opacity: 0;
  }
  68%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f1_txt1 {
  0%, 0% {
    opacity: 0;
  }
  3% , 27% {
    opacity: 1;
  }
  27.5%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f1_txt1 {
  0%, 0% {
    opacity: 0;
  }
  3% , 27% {
    opacity: 1;
  }
  27.5%, 100% {
    opacity: 0;
  }
}
/*** FRAME 2 ***/
@-webkit-keyframes oc_f1_fond {
  0%, 8% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  13%, 100% {
    -webkit-transform: translateX(-561px);
            transform: translateX(-561px);
  }
}
@keyframes oc_f1_fond {
  0%, 8% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  13%, 100% {
    -webkit-transform: translateX(-561px);
            transform: translateX(-561px);
  }
}
@-webkit-keyframes oc_f2_txt1a {
  0%, 15% {
    opacity: 0;
  }
  20% , 38% {
    opacity: 1;
  }
  41%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f2_txt1a {
  0%, 15% {
    opacity: 0;
  }
  20% , 38% {
    opacity: 1;
  }
  41%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_f2_txt1b {
  0%, 15.5% {
    opacity: 0;
  }
  20% , 22% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f2_txt1b {
  0%, 15.5% {
    opacity: 0;
  }
  20% , 22% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_f2_voiture2 {
  0%, 15% {
    opacity: 0;
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  23% , 25% {
    opacity: 1;
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27%, 100% {
    opacity: 1;
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
}
@keyframes oc_f2_voiture2 {
  0%, 15% {
    opacity: 0;
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  23% , 25% {
    opacity: 1;
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27%, 100% {
    opacity: 1;
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
}
@-webkit-keyframes oc_f2_voiture1 {
  0%, 15% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  23% ,25% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27%, 100% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
}
@keyframes oc_f2_voiture1 {
  0%, 15% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  23% ,25% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27%, 100% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
}
/*** FRAME 3 ***/
@-webkit-keyframes oc_f3_voiture {
  0%, 25% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27% ,33% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
  35%, 100% {
    -webkit-transform: translate(359px, 0);
            transform: translate(359px, 0);
  }
}
@keyframes oc_f3_voiture {
  0%, 25% {
    -webkit-transform: translate(1077px, 0);
            transform: translate(1077px, 0);
  }
  27% ,33% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
  35%, 100% {
    -webkit-transform: translate(359px, 0);
            transform: translate(359px, 0);
  }
}
@-webkit-keyframes oc_f3_txt1b {
  0%, 25% {
    opacity: 0;
  }
  32% ,30% {
    opacity: 1;
  }
  33%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f3_txt1b {
  0%, 25% {
    opacity: 0;
  }
  32% ,30% {
    opacity: 1;
  }
  33%, 100% {
    opacity: 0;
  }
}
/*** FRAME 4 ***/
@-webkit-keyframes oc_f4_voiture {
  0%, 33% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
  35% ,38% {
    -webkit-transform: translate(359px, 0);
            transform: translate(359px, 0);
  }
  42%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_f4_voiture {
  0%, 33% {
    -webkit-transform: translate(718px, 0);
            transform: translate(718px, 0);
  }
  35% ,38% {
    -webkit-transform: translate(359px, 0);
            transform: translate(359px, 0);
  }
  42%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f4_txt1b {
  0%, 33% {
    opacity: 0;
  }
  38% ,38% {
    opacity: 1;
  }
  41%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f4_txt1b {
  0%, 33% {
    opacity: 0;
  }
  38% ,38% {
    opacity: 1;
  }
  41%, 100% {
    opacity: 0;
  }
}
/*** FRAME 5 ***/
@-webkit-keyframes oc_f5_voiture {
  0%, 38% {
    -webkit-transform: translate(359px, 30px);
            transform: translate(359px, 30px);
  }
  42% {
    -webkit-transform: translate(0px, 30px);
            transform: translate(0px, 30px);
  }
  58% ,100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes oc_f5_voiture {
  0%, 38% {
    -webkit-transform: translate(359px, 30px);
            transform: translate(359px, 30px);
  }
  42% {
    -webkit-transform: translate(0px, 30px);
            transform: translate(0px, 30px);
  }
  58% ,100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@-webkit-keyframes oc_f5_txt1 {
  0%, 41% {
    opacity: 0;
  }
  48% ,53% {
    opacity: 1;
  }
  55%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f5_txt1 {
  0%, 41% {
    opacity: 0;
  }
  48% ,53% {
    opacity: 1;
  }
  55%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_f5_txt2 {
  0%, 55% {
    opacity: 0;
  }
  58% ,63% {
    opacity: 1;
  }
  68%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f5_txt2 {
  0%, 55% {
    opacity: 0;
  }
  58% ,63% {
    opacity: 1;
  }
  68%, 100% {
    opacity: 0;
  }
}
/*** FRAME6 ***/
@-webkit-keyframes oc_frame6 {
  0%, 63% {
    opacity: 0;
  }
  68%, 100% {
    opacity: 1;
  }
}
@keyframes oc_frame6 {
  0%, 63% {
    opacity: 0;
  }
  68%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_logo2 {
  0%, 67% {
    opacity: 0;
  }
  70%,100% {
    opacity: 1;
  }
}
@keyframes oc_logo2 {
  0%, 67% {
    opacity: 0;
  }
  70%,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f6_txt {
  0%, 68% {
    opacity: 0;
  }
  70%, 73% {
    opacity: 1;
  }
  77%, 100% {
    opacity: 0;
  }
}
@keyframes oc_f6_txt {
  0%, 68% {
    opacity: 0;
  }
  70%, 73% {
    opacity: 1;
  }
  77%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes oc_f7_txt1 {
  0%, 77% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes oc_f7_txt1 {
  0%, 77% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_cta {
  0%, 80% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  82%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_cta {
  0%, 80% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  82%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_hl {
  0%, 84% {
    opacity: 1;
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  88% {
    opacity: 1;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  88.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}
@keyframes oc_hl {
  0%, 84% {
    opacity: 1;
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  88% {
    opacity: 1;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  88.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}