@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;
}

html, body, .oc_fondu, #oc_conteneur, #oc_bordure {
  width: 300px;
  height: 600px;
}

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

img {
  border: none;
}

.oc_fondu, #oc_conteneur {
  background-color: #000000;
}

.oc_fondu {
  opacity: 0;
  pointer-events: none;
}

#oc_fondu_debut {
  animation: oc_fondu_debut 30s 1 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: 300px;
  height: 600px;
}

#oc_adresse1 {
  width: 300px;
  text-align: center;
  top: 330px;
  font-size: 16px;
  color: #ffffff;
  font-family: 'Audi Type Extended';
}

#oc_adresse2 {
  width: 300px;
  text-align: center;
  top: 324px;
  font-size: 16px;
  color: #ffffff;
  font-family: 'Audi Type Extended';
  animation: oc_txt5 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

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

#oc_frame0 {
  transform: translateX(-300px);
  animation: oc_frame0 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_frame1 {
  transform: translateX(-300px);
  animation: oc_frame1 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_frame2a {
  transform: translateX(-300px);
  animation: oc_frame2a 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_frame2b {
  transform: translateX(-300px);
  animation: oc_frame2b 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_frame3 {
  transform: translateX(0px);
  animation: oc_frame3 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt1_1 {
  animation: oc_txt1_1 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt1_2 {
  animation: oc_txt1_2 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt1_3 {
  animation: oc_txt1_3 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt3 {
  opacity: 0;
  width: 300px;
  height: 600px;
  animation: oc_txt3 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_prix {
  opacity: 0;
  animation: oc_prix 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_block_noir {
  width: 300px;
  height: 600px;
  background-color: #000000;
  transform: scaleX(1) scaleY(1);
  animation: oc_block_noir 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt4 {
  opacity: 0;
  animation: oc_txt4 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_txt5 {
  animation: oc_txt5 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_logo {
  animation: oc_txt5 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_img3 {
  transform: translateX(-318px);
  animation: oc_img3 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

#oc_cta {
  width: 300px;
  height: 600px;
  animation: oc_txt5 30s 1 cubic-bezier(0.75, 0.02, 0.5, 1) normal;
}

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

#oc_cta2 {
  opacity: 0;
  transition: opacity 0.2s;
  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;
}

@keyframes oc_fondu_debut {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 0;
  }
}

@keyframes oc_frame0 {
  0%, 9.5% {
    transform: translateX(0px);
  }
  12%, 100% {
    transform: translateX(-300px);
  }
}

@keyframes oc_frame1 {
  0%, 9.5% {
    transform: translateX(300px);
  }
  12%, 18% {
    transform: translateX(0px);
  }
  20.5%, 100% {
    transform: translateX(-300px);
  }
}

@keyframes oc_txt1_1 {
  0%, 12% {
    transform: translateX(-150px);
    opacity: 0;
  }
  14%, 100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes oc_txt1_2 {
  0%, 12.25% {
    transform: translateX(-150px);
    opacity: 0;
  }
  14.25%, 100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes oc_txt1_3 {
  0%, 12.5% {
    transform: translateX(-150px);
    opacity: 0;
  }
  14.5%, 100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes oc_frame2a {
  0%, 18% {
    transform: translateX(300px);
  }
  20.5%, 28% {
    transform: translateX(0px);
  }
  30.5%, 100% {
    transform: translateX(-300px);
  }
}

@keyframes oc_frame2b {
  0%, 28% {
    transform: translateX(300px);
  }
  30.5%, 38% {
    transform: translateX(0px);
  }
  40.5%, 100% {
    transform: translateX(-300px);
  }
}

@keyframes oc_frame3 {
  0%, 38% {
    transform: translateX(300px);
  }
  40.5%, 100% {
    transform: translateX(0px);
  }
}

@keyframes oc_img3 {
  0%, 38.5% {
    transform: translateX(0px);
  }
  69.5%, 100% {
    transform: translateX(-318px);
  }
}

@keyframes oc_txt3 {
  0%, 51% {
    opacity: 1;
  }
  52%, 100% {
    opacity: 0;
  }
}

@keyframes oc_prix {
  0%, 52% {
    opacity: 0;
  }
  53%, 61% {
    opacity: 1;
  }
  63%, 100% {
    opacity: 0;
  }
}

@keyframes oc_block_noir {
  0%, 63% {
    transform: scaleX(0.7) scaleY(0);
  }
  64%, 66% {
    transform: scaleX(0.9) scaleY(0.08);
  }
  67%, 100% {
    transform: scaleX(1) scaleY(1);
  }
}

@keyframes oc_txt4 {
  0%, 63% {
    opacity: 0;
  }
  64%, 67.5% {
    opacity: 1;
  }
  68.5%, 100% {
    opacity: 0;
  }
}

@keyframes oc_txt5 {
  0%, 68.5% {
    opacity: 0;
  }
  69.5%, 100% {
    opacity: 1;
  }
}