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: #FFDE1D;
  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 {
  opacity: 0;
  animation: oc_frame_logo 10s 3 ease normal;
}

#oc_logo_sosh1 {
  animation: oc_logo_sosh1 10s 3 ease normal;
}

#oc_logo_sosh2 {
  animation: oc_logo_sosh2 10s 3 ease normal;
}

#oc_frame1 {
  opacity: 0;
  animation: oc_frame1 10s 3 ease normal;
}

#oc_frame2 {
  opacity: 0;
  animation: oc_frame2 10s 3 ease normal;
}

#oc_texte1 {
  animation: oc_texte1 10s 3 ease normal;
}

#oc_texte2 {
  animation: oc_texte2 10s 3 ease normal;
}

#oc_bulle1 {
  transform: scale(1);
  transform-origin: 50% 37%;
  animation: oc_bulle1 10s 3 ease normal;
}

#oc_bulle2 {
  transform: scale(1);
  transform-origin: 50% 37%;
  animation: oc_bulle2 10s 3 ease normal;
}

#oc_rapport_arcep {
  opacity: 1;
  animation: oc_rapport_arcep 10s 3 ease normal;
}

#oc_frame_fin {
  opacity: 1;
  animation: oc_frame_fin 10s 3 ease normal;
}

#oc_cta {
  top: 0px;
  right: 0px;
  background-color: #000000;
  opacity: 0;
  animation: oc_cta 10s 3 ease normal;
}

#oc_voir_conditions {
  top: 0px;
  right: 0px;
  animation: oc_voir_conditions 10s 3 ease normal;
}

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

.listened {
  width: 1px;
  height: 1px;
}

#oc_anim1_1 {
  animation: oc_listened 30s 1 ease normal;
}

#dessin_svg {
  position: absolute;
}

.st0, .st1 {
  stroke-dasharray: 60, 400;
  stroke-dashoffset: 0;
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.go_dash {
  -moz-animation: dash 1s linear forwards;
  -webkit-animation: dash 1s linear forwards;
  -ms-animation: dash 1s linear forwards;
  -o-animation: dash 1s linear forwards;
  animation: dash 1s linear forwards;
}

.go_undash {
  -moz-animation: undash 1s linear forwards;
  -webkit-animation: undash 1s linear forwards;
  -ms-animation: undash 1s linear forwards;
  -o-animation: undash 1s linear forwards;
  animation: undash 1s linear forwards;
}

#stroke1, #stroke2, #stroke3 {
  stroke: #fff;
}

#stroke16, #stroke4, #stroke5 {
  stroke: #000;
}

#stroke10, #stroke11, #stroke6, #stroke8 {
  stroke: #F4386E;
}

#stroke12, #stroke13, #stroke14, #stroke15, #stroke7, #stroke9 {
  stroke: #00A1AB;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undash {
  to {
    stroke-dashoffset: 1000;
  }
}

.point {
  width: 6px;
  height: 6px;
  border-radius: 20px;
}

#point1, #point2, #point3 {
  background-color: #00A1AB;
}

#point11, #point4, #point5, #point6 {
  background-color: #fff;
}

#point10, #point7, #point8, #point9 {
  background-color: #F4386E;
}

#point1 {
  top: 153px;
  left: 28px;
}

#point2 {
  top: 116px;
  left: 204px;
}

#point3 {
  top: 540px;
  left: 110px;
}

#point4 {
  top: 83px;
  left: 69px;
}

#point6 {
  top: 68px;
  left: 248px;
}

#point7 {
  top: 393px;
  left: 33px;
}

#point8 {
  top: 39px;
  left: 155px;
}

#point9 {
  top: 153px;
  left: 248px;
}

#point10 {
  top: 468px;
  left: 203px;
}

#point11 {
  top: 543px;
  left: 274px;
}

@keyframes oc_listened {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes oc_logo_sosh2 {
  0%, 50% {
    opacity: 0;
  }
  51%, 100% {
    opacity: 1;
  }
}

@keyframes oc_frame1 {
  0%, 10% {
    opacity: 0;
  }
  10.01%, 50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
}

@keyframes oc_frame2 {
  0%, 50% {
    opacity: 0;
  }
  50.01%, 90% {
    opacity: 1;
  }
  90.01% {
    opacity: 0;
  }
}

@keyframes oc_bulle1 {
  0%, 10% {
    transform: scale(5);
  }
  13%, 90% {
    transform: scale(1);
  }
}

@keyframes oc_bulle2 {
  0%, 50% {
    transform: scale(5);
  }
  53%, 90% {
    transform: scale(1);
  }
}

@keyframes oc_rapport_arcep {
  0%, 50% {
    opacity: 0;
  }
  50.01%, 90% {
    opacity: 1;
  }
  90.01%, 100% {
    opacity: 0;
  }
}

@keyframes oc_voir_conditions {
  0%, 100% {
    top: -30px;
    opacity: 0;
  }
}

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

@keyframes oc_frame_logo {
  0%, 10% {
    opacity: 1;
  }
  10.01%, 90% {
    opacity: 0;
  }
  90.01%, 100% {
    opacity: 1;
  }
}

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