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

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

#oc_conteneur {
  width: 100vw;
  height: 15.625vw;
  margin-top: calc((100vh - 15.625vw) / 2);
}

/*** 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: -400%;
  box-sizing: border-box;
}

#oc_frame2 {
  left: -300%;
}

#oc_frame3 {
  left: -200%;
}

#oc_frame4 {
  left: -100%;
}

#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 {
  background: url("img/oc_f6_txt1.png") no-repeat center;
  background-size: contain;
  width: 33.2%;
  height: 24.5%;
  left: 30%;
  top: 42%;
  -webkit-animation: oc_f1_txt1 25s 1 ease normal;
          animation: oc_f1_txt1 25s 1 ease normal;
}

.oc_conteneur_adresse {
  width: 31%;
  height: 100%;
  display: table;
}

#oc_conteneur_adresse1 {
  left: 61%;
}

#oc_conteneur_adresse1bis {
  left: 28.7%;
}

#oc_conteneur_adresse2 {
  left: 61%;
}

#oc_adresse1 {
  width: 100%;
  text-align: left;
  font-size: 1.5vw;
  position: relative !important;
  display: table-cell;
  vertical-align: middle;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

#oc_adresse2 {
  width: 100%;
  text-align: left;
  font-size: 1.5vw;
  position: relative !important;
  display: table-cell;
  vertical-align: middle;
  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: 100%;
  text-align: right;
  top: 32%;
  font-size: 1.4vw;
  color: #f669c8;
  font-family: 'Audi Type Extended';
}

#oc_cta_f1 {
  border: 1px solid #ffffff;
  top: 35.5%;
  right: 6%;
  width: 23%;
  height: 30%;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  transition: background;
  background: url("img/oc_cta1.png") no-repeat center #000000;
  background-size: contain;
  transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
}

#oc_conteneur:hover #oc_cta_f1 {
  background: url("img/oc_cta2.png") no-repeat center #ffffff;
  background-size: contain;
}

#oc_logo1 {
  background: url("img/oc_logo.png") no-repeat center;
  background-size: contain;
  left: 3%;
  top: 37.5%;
  width: 15%;
  height: 25%;
}

/*** FRAME2 ***/
#oc_f2_txt1a {
  background: url("img/oc_f2_txt1a.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -webkit-animation: oc_f2_txt1a 25s 1 ease normal;
          animation: oc_f2_txt1a 25s 1 ease normal;
}

#oc_f2_txt1b {
  background: url("img/oc_f2_txt1b.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -webkit-animation: oc_f2_txt1b 25s 1 ease normal;
          animation: oc_f2_txt1b 25s 1 ease normal;
}

#oc_f2_voiture1 {
  width: 100%;
  height: 100%;
  background: url("img/oc_f2_voiture1.jpg") no-repeat center;
  background-size: cover;
}

#oc_f2_voiture2 {
  width: 100%;
  height: 100%;
  background: url("img/oc_f2_voiture2.jpg") no-repeat center;
  background-size: cover;
  -webkit-animation: oc_f2_voiture2 25s 1 ease normal;
          animation: oc_f2_voiture2 25s 1 ease normal;
}

/*** FRAME3 ***/
#oc_f3_txt1a {
  background: url("img/oc_f2_txt1a.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -webkit-animation: oc_f3_txt1a 25s 1 ease normal;
          animation: oc_f3_txt1a 25s 1 ease normal;
}

#oc_f3_txt1b {
  background: url("img/oc_f3_txt1b.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -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;
}

#oc_f3_voiture {
  width: 100%;
  height: 100%;
  background: url("img/oc_f3_voiture.jpg") no-repeat center;
  background-size: cover;
}

/*** FRAME4 ***/
#oc_f4_txt1a {
  background: url("img/oc_f2_txt1a.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -webkit-animation: oc_f4_txt1a 25s 1 ease normal;
          animation: oc_f4_txt1a 25s 1 ease normal;
}

#oc_f4_txt1b {
  background: url("img/oc_f4_txt1b.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 53%;
  width: 46.5%;
  height: 36.5%;
  -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;
}

#oc_f4_voiture {
  width: 100%;
  height: 100%;
  background: url("img/oc_f4_voiture.jpg") no-repeat center;
  background-size: cover;
}

/*** FRAME5 ***/
#oc_f5_voiture {
  background: url("img/oc_f5_voiture.jpg") no-repeat top left;
  background-size: cover;
  width: 100%;
  height: 173%;
  top: -73%;
  -webkit-animation: oc_f5_voiture 25s 1 ease normal;
          animation: oc_f5_voiture 25s 1 ease normal;
}

#oc_f5_txt1 {
  background: url("img/oc_f5_txt1.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 24.5%;
  width: 39%;
  height: 73.5%;
  opacity: 1;
  -webkit-animation: oc_f5_txt1 25s 1 ease normal;
          animation: oc_f5_txt1 25s 1 ease normal;
}

#oc_f5_txt2 {
  background: url("img/oc_f5_txt2.png") no-repeat top left;
  background-size: contain;
  left: 3.5%;
  top: 24.5%;
  width: 39%;
  height: 73.5%;
  opacity: 1;
  -webkit-animation: oc_f5_txt2 25s 1 ease normal;
          animation: oc_f5_txt2 25s 1 ease normal;
}

/*** FRAME 6 ***/
#oc_logo2 {
  background: url("img/oc_logo.png") no-repeat center;
  background-size: contain;
  left: 3%;
  top: 37.5%;
  width: 15%;
  height: 25%;
  -webkit-animation: oc_f6_txt 25s 1 ease normal;
          animation: oc_f6_txt 25s 1 ease normal;
}

#oc_f6_txt1 {
  width: 33.2%;
  height: 24.5%;
  left: 30%;
  top: 36%;
  background: url("img/oc_f6_txt1.png") no-repeat center;
  background-size: contain;
  -webkit-animation: oc_f6_txt 25s 1 ease normal;
          animation: oc_f6_txt 25s 1 ease normal;
}

/*** FRAME7 ***/
#oc_f7_txt1 {
  width: 31%;
  height: 38%;
  left: 30.5%;
  top: 35%;
  background: url("img/oc_f7_txt1.png") no-repeat center;
  background-size: contain;
  -webkit-animation: oc_f7_txt1 25s 1 ease normal;
          animation: oc_f7_txt1 25s 1 ease normal;
}

#oc_cta {
  border: 1px solid #ffffff;
  top: 35.5%;
  right: 6%;
  width: 23%;
  height: 30%;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  transition: background;
  background: url("img/oc_cta1.png") no-repeat center #000000;
  background-size: contain;
  transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 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_conteneur:hover #oc_cta {
  background: url("img/oc_cta2.png") no-repeat center #ffffff;
  background-size: contain;
}

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

/*
@media screen and (min-aspect-ratio: 1280/200) {
    #oc_conteneur{
        width: 640vh;
        height: 100vh;
        margin-top: auto;
        margin: auto;
        position: relative;
    }
    #oc_adresse1{
        font-size: 9vh;
    }
    #oc_adresse2{
        font-size: 9vh;
    }

    #oc_date{
        font-size: 7vh;
    }
} */
@-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(400%, 0);
            transform: translate(400%, 0);
  }
  15%, 100% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
}
@keyframes oc_frame1 {
  0%, 11% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  15%, 100% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 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(400%, 0);
            transform: translate(400%, 0);
  }
  15%, 26% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  30%, 100% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
}
@keyframes oc_frame2 {
  0%, 11% {
    -webkit-transform: translate(400%, 0);
            transform: translate(400%, 0);
  }
  15%, 26% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  30%, 100% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
}
@-webkit-keyframes oc_f2_txt1a {
  0%, 17% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  22% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_f2_txt1a {
  0%, 17% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  22% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_f2_txt1b {
  0%, 17.5% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  22.5% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_f2_txt1b {
  0%, 17.5% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  22.5% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-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(300%, 0);
            transform: translate(300%, 0);
  }
  30%, 36% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  40%, 100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@keyframes oc_frame3 {
  0%, 26% {
    -webkit-transform: translate(300%, 0);
            transform: translate(300%, 0);
  }
  30%, 36% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  40%, 100% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 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%, 36% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  40%, 46% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame4 {
  0%, 36% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
  40%, 46% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f4_txt1b {
  0%, 40% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  43% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1b {
  0%, 40% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  43% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_f4_txt1c {
  0%, 40% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  43% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_f4_txt1c {
  0%, 40% {
    opacity: 0;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
  43% ,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*** FRAME 5 ***/
@-webkit-keyframes oc_frame5 {
  0%, 46% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes oc_frame5 {
  0%, 46% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes oc_f5_voiture {
  0%, 50% {
    -webkit-transform: translateY(40%);
            transform: translateY(40%);
  }
  56%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes oc_f5_voiture {
  0%, 50% {
    -webkit-transform: translateY(40%);
            transform: translateY(40%);
  }
  56%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes oc_f5_txt1 {
  0%, 47% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  50% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes oc_f5_txt1 {
  0%, 47% {
    opacity: 0;
    -webkit-transform: translateX(-0.5px);
            transform: translateX(-0.5px);
  }
  50% ,100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes oc_f5_txt2 {
  0%, 50% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  53%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes oc_f5_txt2 {
  0%, 50% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  53%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
/*** 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%, 76% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes oc_frame7 {
  0%, 76% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_f7_txt1 {
  0%, 80% {
    opacity: 0;
  }
  83%, 100% {
    opacity: 1;
  }
}
@keyframes oc_f7_txt1 {
  0%, 80% {
    opacity: 0;
  }
  83%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_cta {
  0%, 82% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  85%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes oc_cta {
  0%, 82% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  85%,100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes oc_logo3 {
  0%, 84% {
    opacity: 0;
  }
  87%,100% {
    opacity: 1;
  }
}
@keyframes oc_logo3 {
  0%, 84% {
    opacity: 0;
  }
  87%,100% {
    opacity: 1;
  }
}
@-webkit-keyframes oc_hl {
  0%, 87% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  91% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  91.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes oc_hl {
  0%, 87% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  91% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  91.1%, 100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}