@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: 300px;
  height: 250px;
}

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 25s 1 ease normal;
          animation: oc_fondu_debut 25s 1 ease normal;
}

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

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

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

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

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

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

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

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

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

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

#oc_frame1 {
  background-color: #000000;
  border: 0.5px #000000 solid;
  left: -1200px;
}

#oc_frame2 {
  left: -900px;
}

#oc_frame3 {
  left: -600px;
}

#oc_frame4 {
  left: -300px;
}

#oc_frame5 {
  left: 0;
}

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

#oc_frame7 {
  opacity: 1;
  background-color: #000000;
}

/*** FRAME 1 ***/
#oc_f1_txt1 {
  -webkit-animation: oc_f1_txt1 25s 1 ease normal;
          animation: oc_f1_txt1 25s 1 ease normal;
}

#oc_adresse1 {
  width: 300px;
  text-align: center;
  top: 112px;
  font-size: 14px;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

#oc_adresse2 {
  width: 300px;
  text-align: center;
  top: 85px;
  font-size: 15px;
  color: #f669c8;
  font-family: 'Audi Type Extended';
  -webkit-animation: oc_f6_txt 25s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_f6_txt 25s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_date {
  width: 300px;
  text-align: center;
  top: 217px;
  font-size: 14px;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

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

#oc_f2_txt1b {
  -webkit-animation: oc_f2_txt1b 25s 1 ease normal;
          animation: oc_f2_txt1b 25s 1 ease normal;
}

#oc_f2_txt1c {
  -webkit-animation: oc_f2_txt1c 25s 1 ease normal;
          animation: oc_f2_txt1c 25s 1 ease normal;
}

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

/*** FRAME3 ***/
#oc_f3_txt1a {
  -webkit-animation: oc_f3_txt1a 25s 1 ease normal;
          animation: oc_f3_txt1a 25s 1 ease normal;
}

#oc_f3_txt1b {
  -webkit-animation: oc_f3_txt1b 25s 1 ease normal;
          animation: oc_f3_txt1b 25s 1 ease normal;
}

#oc_f3_txt1c {
  -webkit-animation: oc_f3_txt1c 25s 1 ease normal;
          animation: oc_f3_txt1c 25s 1 ease normal;
}

/*** FRAME4 ***/
#oc_f4_txt1a {
  -webkit-animation: oc_f4_txt1a 25s 1 ease normal;
          animation: oc_f4_txt1a 25s 1 ease normal;
}

#oc_f4_txt1b {
  -webkit-animation: oc_f4_txt1b 25s 1 ease normal;
          animation: oc_f4_txt1b 25s 1 ease normal;
}

#oc_f4_txt1c {
  -webkit-animation: oc_f4_txt1c 25s 1 ease normal;
          animation: oc_f4_txt1c 25s 1 ease normal;
}

/*** FRAME5 ***/
#oc_f5_voiture {
  left: -147px;
  -webkit-animation: oc_f5_voiture 25s 1 ease normal;
          animation: oc_f5_voiture 25s 1 ease normal;
}

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

#oc_f5_txt2 {
  opacity: 0;
  -webkit-animation: oc_f5_txt2 25s 1 ease normal;
          animation: oc_f5_txt2 25s 1 ease normal;
}

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

#oc_f6_txt1 {
  -webkit-animation: oc_f6_txt 25s 1 ease normal;
          animation: oc_f6_txt 25s 1 ease normal;
}

/*** FRAME7 ***/
#oc_logo3 {
  -webkit-animation: oc_logo3 25s 1 ease normal;
          animation: oc_logo3 25s 1 ease normal;
}

#oc_f7_txt1 {
  -webkit-animation: oc_f7_txt1 25s 1 ease normal;
          animation: oc_f7_txt1 25s 1 ease normal;
}

#oc_cta {
  border: 1px solid #ffffff;
  top: 99px;
  left: 66px;
  width: 168px;
  height: 43px;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
  -webkit-animation: oc_cta 25s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_cta 25s 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 25s 1 ease normal;
          animation: oc_hl 25s 1 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%, 97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes oc_fondu_fin {
  0%, 97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*** FRAME 1 ***/
@-webkit-keyframes oc_frame1 {
  0%, 11% {
    -webkit-transform: translate(1200px, 0);
            transform: translate(1200px, 0);
  }
  15%, 100% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
}
@keyframes oc_frame1 {
  0%, 11% {
    -webkit-transform: translate(1200px, 0);
            transform: translate(1200px, 0);
  }
  15%, 100% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
}
@-webkit-keyframes oc_f1_txt1 {
  0%, 0% {
    opacity: 0;
  }
  3% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f1_txt1 {
  0%, 0% {
    opacity: 0;
  }
  3% ,100% {
    opacity: 1;
  }
}
/*** FRAME 2 ***/
@-webkit-keyframes oc_frame2 {
  0%, 11% {
    -webkit-transform: translate(1200px, 0);
            transform: translate(1200px, 0);
  }
  15%, 26% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
  30%, 100% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
}
@keyframes oc_frame2 {
  0%, 11% {
    -webkit-transform: translate(1200px, 0);
            transform: translate(1200px, 0);
  }
  15%, 26% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
  30%, 100% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
}
@-webkit-keyframes oc_f2_txt1a {
  0%, 17% {
    opacity: 0;
  }
  22% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1a {
  0%, 17% {
    opacity: 0;
  }
  22% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_txt1b {
  0%, 17.5% {
    opacity: 0;
  }
  22.5% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1b {
  0%, 17.5% {
    opacity: 0;
  }
  22.5% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_txt1c {
  0%, 18% {
    opacity: 0;
  }
  23% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1c {
  0%, 18% {
    opacity: 0;
  }
  23% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_voiture2 {
  0%, 17% {
    opacity: 0;
  }
  26% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_voiture2 {
  0%, 17% {
    opacity: 0;
  }
  26% ,100% {
    opacity: 1;
  }
}
/*** FRAME 3 ***/
@-webkit-keyframes oc_frame3 {
  0%, 26% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
  30%, 33% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
  37%, 100% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
}
@keyframes oc_frame3 {
  0%, 26% {
    -webkit-transform: translate(900px, 0);
            transform: translate(900px, 0);
  }
  30%, 33% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
  37%, 100% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
}
@-webkit-keyframes oc_f3_txt1b {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  33% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f3_txt1b {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  33% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_f3_txt1c {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  33% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f3_txt1c {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  33% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME 4 ***/
@-webkit-keyframes oc_frame4 {
  0%, 33% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
  37%, 43% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
  47%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame4 {
  0%, 33% {
    -webkit-transform: translate(600px, 0);
            transform: translate(600px, 0);
  }
  37%, 43% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
  47%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f4_txt1b {
  0%, 37% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  40% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1b {
  0%, 37% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  40% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_f4_txt1c {
  0%, 37% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  40% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1c {
  0%, 37% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  40% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME 5 ***/
@-webkit-keyframes oc_frame5 {
  0%, 43% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
  47%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame5 {
  0%, 43% {
    -webkit-transform: translate(300px, 0);
            transform: translate(300px, 0);
  }
  47%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f5_voiture {
  0%, 47% {
    -webkit-transform: translateX(147px);
            transform: translateX(147px);
  }
  56%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_f5_voiture {
  0%, 47% {
    -webkit-transform: translateX(147px);
            transform: translateX(147px);
  }
  56%, 100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_f5_txt1 {
  0%, 44% {
    opacity: 0;
  }
  47% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f5_txt1 {
  0%, 44% {
    opacity: 0;
  }
  47% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f5_txt2 {
  0%, 47% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  50%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f5_txt2 {
  0%, 47% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  50%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME6 ***/
@-webkit-keyframes oc_frame6 {
  0%, 56% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
@keyframes oc_frame6 {
  0%, 56% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f6_txt {
  0%, 60% {
    opacity: 0;
  }
  63%, 100% {
    opacity: 1;
  }
}
@keyframes oc_f6_txt {
  0%, 60% {
    opacity: 0;
  }
  63%, 100% {
    opacity: 1;
  }
}
/*** FRAME 7 ***/
@-webkit-keyframes oc_frame7 {
  0%, 73% {
    opacity: 0;
  }
  77%, 100% {
    opacity: 1;
  }
}
@keyframes oc_frame7 {
  0%, 73% {
    opacity: 0;
  }
  77%, 100% {
    opacity: 1;
  }
}
@-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%, 79% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  82%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_cta {
  0%, 79% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  82%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_logo3 {
  0%, 81% {
    opacity: 0;
  }
  84%,100% {
    opacity: 1;
  }
}
@keyframes oc_logo3 {
  0%, 81% {
    opacity: 0;
  }
  84%,100% {
    opacity: 1;
  }
}
@-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);
  }
}