body {
  margin: 0px;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

div {
  position: absolute;
  overflow: hidden;
  text-align: left;
  -webkit-backface-visibility: hidden;
  color: #fff;
}

img {
  position: absolute;
}

#conteneur {
  width: 300px;
  height: 600px;
  background-size: cover;
  box-sizing: border-box;
  background-color: #000000;
  cursor: pointer;
}

#oc_bordure {
  width: 300px;
  height: 600px;
  border: 1px solid black;
  box-sizing: border-box;
  pointer-events: none;
}

.oc_frame {
  width: 300px;
  height: 600px;
}

#oc_frame_logo {
  -webkit-animation: oc_frame_logo 13s 2 ease normal;
          animation: oc_frame_logo 13s 2 ease normal;
}

#oc_logo_sosh1 {
  -webkit-animation: oc_logo_sosh1 26s 1 ease normal;
          animation: oc_logo_sosh1 26s 1 ease normal;
}

#oc_logo_sosh2 {
  -webkit-animation: oc_logo_sosh2 26s 1 ease normal;
          animation: oc_logo_sosh2 26s 1 ease normal;
}

#oc_frame1 {
  opacity: 0;
  -webkit-animation: oc_frame1 13s 2 ease normal;
          animation: oc_frame1 13s 2 ease normal;
}

#oc_frame2 {
  opacity: 0;
  -webkit-animation: oc_frame2 13s 2 ease normal;
          animation: oc_frame2 13s 2 ease normal;
}

#oc_frame3 {
  opacity: 0;
  -webkit-animation: oc_frame3 13s 2 ease normal;
          animation: oc_frame3 13s 2 ease normal;
}

#oc_frame4 {
  opacity: 0;
  -webkit-animation: oc_frame4 13s 2 ease normal;
          animation: oc_frame4 13s 2 ease normal;
}

#oc_frame_fin {
  opacity: 1;
  background-color: #000000;
  -webkit-animation: oc_frame_fin 13s 2 ease normal;
          animation: oc_frame_fin 13s 2 ease normal;
}

#oc_ecran2 {
  opacity: 0;
  -webkit-animation: oc_ecran2 13s 2 ease normal;
          animation: oc_ecran2 13s 2 ease normal;
}

#oc_etoile {
  -webkit-animation: oc_etoile 13s 2 ease normal;
          animation: oc_etoile 13s 2 ease normal;
}

#oc_traits1 {
  -webkit-transform: translate3d(300px, -170px, 0);
          transform: translate3d(300px, -170px, 0);
  -webkit-animation: oc_traits1 13s 2 ease normal;
          animation: oc_traits1 13s 2 ease normal;
}

#oc_traits2 {
  -webkit-transform: translate3d(200px, 600px, 0);
          transform: translate3d(200px, 600px, 0);
  -webkit-animation: oc_traits2 13s 2 ease normal;
          animation: oc_traits2 13s 2 ease normal;
}

.oc_cta {
  bottom: 0px;
  right: 0px;
  height: 25px;
  width: 300px;
  background-color: #00A1AB;
  background-position: center center;
  background-repeat: no-repeat;
}

#oc_cta {
  opacity: 0;
  background-image: url("img/cta.png");
  -webkit-animation: oc_cta 13s 2 ease normal;
          animation: oc_cta 13s 2 ease normal;
}

#oc_voir_conditions {
  background-image: url("img/voir_conditions.png");
  -webkit-animation: oc_voir_conditions 13s 2 ease normal;
          animation: oc_voir_conditions 13s 2 ease normal;
}

#oc_condition {
  top: 600px;
  transition: top 0.6s ease;
  background-color: #000000;
  width: 300px;
  height: 600px;
}

@-webkit-keyframes oc_logo_sosh1 {
  0%, 25% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  26%, 49% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50%, 75% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  76% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes oc_logo_sosh1 {
  0%, 25% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  26%, 49% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50%, 75% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  76% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes oc_logo_sosh2 {
  0%, 25% {
    opacity: 0;
  }
  26%, 49% {
    opacity: 1;
  }
  50%, 75% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
}

@keyframes oc_logo_sosh2 {
  0%, 25% {
    opacity: 0;
  }
  26%, 49% {
    opacity: 1;
  }
  50%, 75% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_frame_logo {
  0%, 10% {
    opacity: 1;
  }
  10.01%, 74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

@keyframes oc_frame_logo {
  0%, 10% {
    opacity: 1;
  }
  10.01%, 74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_frame1 {
  0%, 10% {
    opacity: 0;
  }
  10.01%, 30% {
    opacity: 1;
  }
  30.01% {
    opacity: 0;
  }
}

@keyframes oc_frame1 {
  0%, 10% {
    opacity: 0;
  }
  10.01%, 30% {
    opacity: 1;
  }
  30.01% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_frame2 {
  0%, 30% {
    opacity: 0;
  }
  30.01%, 76.5% {
    opacity: 1;
  }
  76.51% {
    opacity: 0;
  }
}

@keyframes oc_frame2 {
  0%, 30% {
    opacity: 0;
  }
  30.01%, 76.5% {
    opacity: 1;
  }
  76.51% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_ecran2 {
  0%, 30% {
    opacity: 1;
    -webkit-transform: translateY(170px);
            transform: translateY(170px);
  }
  30.01%, 38% {
    opacity: 1;
    -webkit-transform: translateY(170px);
            transform: translateY(170px);
  }
  42%, 48% {
    opacity: 1;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  52%, 74.5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  74.51% {
    opacity: 0;
  }
}

@keyframes oc_ecran2 {
  0%, 30% {
    opacity: 1;
    -webkit-transform: translateY(170px);
            transform: translateY(170px);
  }
  30.01%, 38% {
    opacity: 1;
    -webkit-transform: translateY(170px);
            transform: translateY(170px);
  }
  42%, 48% {
    opacity: 1;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  52%, 74.5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  74.51% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_etoile {
  0%, 31% {
    opacity: 0;
  }
  31.01% {
    opacity: 1;
  }
}

@keyframes oc_etoile {
  0%, 31% {
    opacity: 0;
  }
  31.01% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_frame3 {
  0%, 38% {
    opacity: 1;
    -webkit-transform: translateY(600px);
            transform: translateY(600px);
  }
  42%, 48% {
    opacity: 1;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  52%, 75.5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75.51% {
    opacity: 0;
  }
}

@keyframes oc_frame3 {
  0%, 38% {
    opacity: 1;
    -webkit-transform: translateY(600px);
            transform: translateY(600px);
  }
  42%, 48% {
    opacity: 1;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  52%, 75.5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75.51% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_frame4 {
  0%, 48% {
    opacity: 1;
    -webkit-transform: translateY(600px);
            transform: translateY(600px);
  }
  52%, 75.99% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  76% {
    opacity: 0;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes oc_frame4 {
  0%, 48% {
    opacity: 1;
    -webkit-transform: translateY(600px);
            transform: translateY(600px);
  }
  52%, 75.99% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  76% {
    opacity: 0;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes oc_traits1 {
  0%, 8% {
    -webkit-transform: translate3d(-480px, 100px, 0);
            transform: translate3d(-480px, 100px, 0);
  }
  15% {
    -webkit-transform: translate3d(300px, -170px, 0);
            transform: translate3d(300px, -170px, 0);
  }
}

@keyframes oc_traits1 {
  0%, 8% {
    -webkit-transform: translate3d(-480px, 100px, 0);
            transform: translate3d(-480px, 100px, 0);
  }
  15% {
    -webkit-transform: translate3d(300px, -170px, 0);
            transform: translate3d(300px, -170px, 0);
  }
}

@-webkit-keyframes oc_traits2 {
  0%, 26% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
  }
  40% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
    opacity: 1;
  }
  40.01% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
    opacity: 0;
  }
  70.99% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
    opacity: 0;
  }
  71% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
    opacity: 1;
  }
  85% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
  }
}

@keyframes oc_traits2 {
  0%, 26% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
  }
  40% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
    opacity: 1;
  }
  40.01% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
    opacity: 0;
  }
  70.99% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
    opacity: 0;
  }
  71% {
    -webkit-transform: translate3d(-400px, -620px, 0);
            transform: translate3d(-400px, -620px, 0);
    opacity: 1;
  }
  85% {
    -webkit-transform: translate3d(200px, 600px, 0);
            transform: translate3d(200px, 600px, 0);
  }
}

@-webkit-keyframes oc_voir_conditions {
  0%, 74.98% {
    bottom: -30px;
    opacity: 0;
  }
  76.99% {
    bottom: 0px;
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
}

@keyframes oc_voir_conditions {
  0%, 74.98% {
    bottom: -30px;
    opacity: 0;
  }
  76.99% {
    bottom: 0px;
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
}

@-webkit-keyframes oc_cta {
  0%, 77% {
    opacity: 1;
  }
  77.01% {
    opacity: 0;
  }
}

@keyframes oc_cta {
  0%, 77% {
    opacity: 1;
  }
  77.01% {
    opacity: 0;
  }
}

@-webkit-keyframes oc_frame_fin {
  0%, 100% {
    opacity: 0;
  }
}

@keyframes oc_frame_fin {
  0%, 100% {
    opacity: 0;
  }
}