@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: 100%;
  height: 100%;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

img {
  border: none;
}

body {
  background-color: white;
}

.oc_fondu {
  background-color: #000000;
  opacity: 0;
  pointer-events: none;
}

#oc_conteneur {
  position: relative;
  display: block;
  margin: auto;
  width: 66.66vh;
  height: 100vh;
}

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

#oc_fondu_fin {
  -webkit-animation: oc_fondu_fin 18s 0 ease normal;
          animation: oc_fondu_fin 18s 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, .oc_taille {
  width: 100%;
  height: 100%;
}

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

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

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

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

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

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

#oc_frame1 {
  background-color: #000000;
  border: 0.5px #000000 solid;
  left: -400%;
  box-sizing: border-box;
}

#oc_frame2 {
  left: -300%;
}

#oc_frame3 {
  left: -200%;
}

#oc_frame4 {
  left: -100%;
}

#oc_frame5 {
  left: 0;
}

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

/*** FRAME 1 ***/
#oc_adresse1 {
  width: 100%;
  text-align: center;
  top: 50%;
  font-size: 2.8vh;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

#oc_adresse2 {
  width: 100%;
  text-align: center;
  top: 45.5%;
  font-size: 2.8vh;
  color: #f669c8;
  font-family: 'Audi Type Extended';
  -webkit-animation: oc_f6_txt 18s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_f6_txt 18s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_date {
  width: 100%;
  text-align: center;
  top: 91%;
  font-size: 2.3vh;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

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

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

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

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

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

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

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

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

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

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

/*** FRAME5 ***/
#oc_f5_voiture {
  width: 158%;
  left: -58%;
  -webkit-animation: oc_f5_voiture 18s 1 ease normal;
          animation: oc_f5_voiture 18s 1 ease normal;
}

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

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

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

#oc_logo2 {
  top: -30px;
}

#oc_cta {
  border: 1px solid #ffffff;
  top: 74%;
  left: 20.5%;
  width: 60.5%;
  height: 10.3%;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
  -webkit-animation: oc_cta 18s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
          animation: oc_cta 18s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

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

#oc_cta2 {
  width: 100%;
  height: 100%;
  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 18s 1 ease normal;
          animation: oc_hl 18s 1 ease normal;
}

@media screen and (max-aspect-ratio: 600 / 900) {
  #oc_conteneur {
    width: 100vw;
    height: 150vw;
    top: calc(50vh - 75vw);
  }

  #oc_adresse1 {
    font-size: 4.2vw;
  }

  #oc_adresse2 {
    font-size: 4.2vw;
  }

  #oc_date {
    font-size: 3.5vw;
  }
}
@-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%, 15% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  20%, 100% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
}
@keyframes oc_frame1 {
  0%, 15% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  20%, 100% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
}
@-webkit-keyframes oc_f1_txt1 {
  0%, 1% {
    opacity: 0;
  }
  3% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f1_txt1 {
  0%, 1% {
    opacity: 0;
  }
  3% ,100% {
    opacity: 1;
  }
}
/*** FRAME 2 ***/
@-webkit-keyframes oc_frame2 {
  0%, 15% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  20%, 33% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  38%, 100% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
}
@keyframes oc_frame2 {
  0%, 15% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  20%, 33% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  38%, 100% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
}
@-webkit-keyframes oc_f2_txt1a {
  0%, 22% {
    opacity: 0;
  }
  27% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1a {
  0%, 22% {
    opacity: 0;
  }
  27% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_txt1b {
  0%, 22.5% {
    opacity: 0;
  }
  27.5% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1b {
  0%, 22.5% {
    opacity: 0;
  }
  27.5% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_txt1c {
  0%, 23% {
    opacity: 0;
  }
  28% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_txt1c {
  0%, 23% {
    opacity: 0;
  }
  28% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f2_voiture2 {
  0%, 22% {
    opacity: 0;
  }
  31% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f2_voiture2 {
  0%, 22% {
    opacity: 0;
  }
  31% ,100% {
    opacity: 1;
  }
}
/*** FRAME 3 ***/
@-webkit-keyframes oc_frame3 {
  0%, 33% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  38%, 44% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  49%, 100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@keyframes oc_frame3 {
  0%, 33% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  38%, 44% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  49%, 100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@-webkit-keyframes oc_f3_txt1b {
  0%, 38% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  41% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f3_txt1b {
  0%, 38% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  41% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_f3_txt1c {
  0%, 38% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  41% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f3_txt1c {
  0%, 38% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  41% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME 4 ***/
@-webkit-keyframes oc_frame4 {
  0%, 44% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  49%, 55% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  60%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame4 {
  0%, 44% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  49%, 55% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  60%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f4_txt1b {
  0%, 49% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  52% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1b {
  0%, 49% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  52% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_f4_txt1c {
  0%, 49% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  52% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1c {
  0%, 49% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  52% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME 5 ***/
@-webkit-keyframes oc_frame5 {
  0%, 55% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  60%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame5 {
  0%, 55% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  60%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f5_voiture {
  0%, 60% {
    -webkit-transform: translateX(27%);
            transform: translateX(27%);
  }
  75%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes oc_f5_voiture {
  0%, 60% {
    -webkit-transform: translateX(27%);
            transform: translateX(27%);
  }
  75%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes oc_f5_txt1 {
  0%, 57% {
    opacity: 0;
  }
  60% ,100% {
    opacity: 1;
  }
}
@keyframes oc_f5_txt1 {
  0%, 57% {
    opacity: 0;
  }
  60% ,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f5_txt2 {
  0%, 60% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  63%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f5_txt2 {
  0%, 60% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  63%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME6 ***/
@-webkit-keyframes oc_frame6 {
  0%, 75% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes oc_frame6 {
  0%, 75% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f6_txt {
  0%, 80% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@keyframes oc_f6_txt {
  0%, 80% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_cta {
  0%, 85% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  88%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_cta {
  0%, 85% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  88%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_hl {
  0%, 88% {
    opacity: 1;
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  93% {
    opacity: 1;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  93.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}
@keyframes oc_hl {
  0%, 88% {
    opacity: 1;
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  93% {
    opacity: 1;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  93.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}