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

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

img {
  border: none;
}

body {
  background-color: white;
}

#oc_conteneur {
  background-color: #fff0df;
}

#oc_fondu {
  background-color: #fff0df;
  opacity: 0;
  pointer-events: none;
  animation: oc_fondu 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 {
  width: 300px;
  height: 600px;
}

/*** GENERATION AUTOMATIQUE DE L'ASSIGNIATION DES ANIMATIONS POUR LES FRAMES ***/
#oc_frame1 {
  animation: oc_frame1 10s 3 ease forwards;
}

#oc_frame2 {
  animation: oc_frame2 10s 3 ease forwards;
}

#oc_frame3 {
  animation: oc_frame3 10s 3 ease forwards;
}

#oc_decor {
  opacity: 1;
  animation: oc_decor 10s 3 ease forwards;
}

#oc_decor_fin {
  opacity: 1;
  transform-origin: bottom right;
  animation: oc_decor_fin 10s 3 ease forwards;
}

#oc_frame2 {
  left: -300px;
  transform: scale(1);
  transform-origin: center 80px;
}

/*** FRAME 1 ***/
#oc_f1_txt1 {
  opacity: 0;
  animation: oc_f1_txt1 10s 3 ease forwards;
}

#oc_f1_txt2 {
  opacity: 0;
  animation: oc_f1_txt2 10s 3 ease forwards;
}

#oc_f1_txt3 {
  opacity: 0;
  animation: oc_f1_txt3 10s 3 ease forwards;
}

#oc_f1_txt1_bleu {
  top: -220px;
  left: -65px;
}

#oc_f1_txt2_bleu {
  top: -290px;
  left: -65px;
}

#oc_f1_txt3_bleu {
  top: -340px;
  left: -53px;
}

#oc_masque_txt1 {
  width: 0px;
  height: 85px;
  top: 220px;
  left: 65px;
  animation: oc_masque_txt1 10s 3 ease forwards, oc_f1_txt1_bleu 10s 3 ease forwards;
}

#oc_masque_txt2 {
  width: 0px;
  height: 85px;
  top: 290px;
  left: 65px;
  animation: oc_masque_txt2 10s 3 ease forwards, oc_f1_txt2_bleu 10s 3 ease forwards;
}

#oc_masque_txt3 {
  width: 0px;
  height: 85px;
  top: 340px;
  left: 53px;
  animation: oc_masque_txt3 10s 3 ease forwards, oc_f1_txt3_bleu 10s 3 ease forwards;
}

#oc_chapeau {
  width: 206px;
  height: 198px;
  transform: translate(-205px, 302px);
  animation: oc_chapeau 10s 3 ease forwards;
}

/*** OC DECOR ***/
#oc_feuille1 {
  width: 123px;
  height: 111px;
  top: 100px;
  left: 221px;
  transform-origin: top right;
  animation: oc_feuille1 10s 3 linear forwards;
}

#oc_feuille2 {
  width: 187px;
  height: 150px;
  top: 455px;
  left: -63px;
  transform-origin: 64px 140px;
  animation: oc_feuille2 10s 3 linear forwards;
}

#oc_feuille3 {
  width: 14px;
  height: 56px;
  top: 531px;
  left: 203px;
  transform-origin: 7px 44px;
  animation: oc_feuille3 10s 3 linear forwards;
}

#oc_feuille4 {
  width: 13px;
  height: 50px;
  top: 499px;
  left: 272px;
  transform-origin: 8px 36px;
  animation: oc_feuille4 10s 3 linear forwards;
}

#oc_feuille5 {
  width: 12px;
  height: 66px;
  top: 484px;
  left: 280px;
  transform-origin: 5px 48px;
  animation: oc_feuille5 10s 3 linear forwards;
}

#oc_plante1 {
  width: 44px;
  height: 99px;
  top: 507px;
  left: 218px;
  transform-origin: 29px 92px;
  animation: oc_plante1 10s 3 linear forwards;
}

#oc_plante2 {
  width: 28px;
  height: 87px;
  top: 526px;
  left: 255px;
  transform-origin: 14px 73px;
  animation: oc_plante2 10s 3 linear forwards;
}

#oc_plante3 {
  width: 31px;
  height: 86px;
  top: 538px;
  left: 165px;
  transform-origin: center 60px;
  animation: oc_plante3 10s 3 linear forwards;
}

#oc_nuage {
  width: 155px;
  height: 30px;
  top: 161px;
  transform: translateX(300px);
  animation: oc_nuage 10s 3 linear forwards;
}

/*** F2 - OC POOL ***/
#oc_pool {
  width: 206px;
  height: 379px;
  top: 141px;
  left: 47px;
}

#oc_conteneur_bouee {
  width: 36px;
  height: 80px;
  top: 210px;
  left: 85px;
  overflow: visible !important;
  animation: oc_conteneur_bouee 10s 3 ease forwards;
}

#oc_bouee {
  width: 63px;
  transform-origin: center 40%;
  animation: oc_bouee 10s 3 ease-in-out forwards;
}

#oc_ombre_bouee {
  width: 63px;
  transform-origin: center 40%;
}

#oc_conteneur_matelas {
  width: 82px;
  height: 129px;
  top: 252px;
  left: 133px;
  overflow: visible !important;
  animation: oc_conteneur_matelas 10s 3 ease forwards;
}

#oc_matelas {
  width: 82px;
  transform-origin: 40% 40%;
  animation: oc_matelas 10s 3 ease-out forwards;
}

#oc_ombre_matelas {
  width: 82px;
  transform-origin: 40% 53%;
  animation: oc_ombre_matelas 10s 3 ease-out forwards;
}

#oc_conteneur_femme {
  width: 83px;
  height: 93px;
  top: 387px;
  left: 129px;
  overflow: visible !important;
  animation: oc_conteneur_femme 10s 3 cubic-bezier(0, -0.71, 1, 1.71) forwards;
}

#oc_femme {
  width: 83px;
  height: 93px;
  overflow: visible !important;
  transform-origin: 40% 40%;
  animation: oc_femme 10s 3 cubic-bezier(0, -0.71, 1, 1.71) forwards;
}

#oc_femme #oc_corps_femme {
  width: 83px;
}

#oc_femme #oc_cheveux_femme {
  width: 83px;
}

#oc_femme #oc_bras_gauche_femme {
  width: 83px;
  transform-origin: 70px 23px;
  animation: oc_bras_gauche_femme 10s 3 linear forwards;
}

#oc_femme #oc_bras_droit_femme {
  width: 83px;
  transform-origin: 58px 12px;
  animation: oc_bras_droit_femme 10s 3 linear forwards;
}

#oc_femme #oc_jambe_gauche_femme {
  width: 83px;
  transform-origin: 48px 37px;
  animation: oc_jambe_gauche_femme 10s 3 linear forwards;
}

#oc_femme #oc_jambe_droit_femme {
  width: 83px;
  transform-origin: 41px 28px;
  animation: oc_jambe_droit_femme 10s 3 linear forwards;
}

#oc_ombre_femme {
  width: 83px;
  transform-origin: 60% 60%;
  animation: oc_ombre_femme 10s 3 cubic-bezier(0, -0.71, 1, 1.71) forwards;
}

/***  F3 ***/
#oc_f3_txt1 {
  opacity: 0;
  animation: oc_f3_txt1 10s 3 ease forwards;
}

#oc_f3_txt2 {
  opacity: 0;
  animation: oc_f3_txt2 10s 3 ease forwards;
}

#oc_conteneur_cta {
  width: 184px;
  height: 0px;
  left: 58px;
  bottom: 31px;
  border-radius: 24px;
  background-color: #fcb814;
  animation: oc_conteneur_cta 10s 3 ease forwards;
}

#oc_cta, #oc_cta_hover {
  width: 133px;
  top: 0;
  left: 26px;
}

#oc_cta_hover {
  opacity: 0;
  transition: opacity 0.2s;
}

#oc_fond_cta_hover {
  width: 100%;
  height: 0%;
  bottom: 0%;
  background-color: #254679;
  transition: height 0.2s;
}

#oc_conteneur:hover #oc_cta_hover {
  opacity: 1;
}

#oc_conteneur:hover #oc_fond_cta_hover {
  height: 100%;
}

@keyframes oc_fondu {
  0% {
    opacity: 1;
  }
  2%,
  31% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  35%,
  64% {
    opacity: 0;
  }
  66.66% {
    opacity: 1;
  }
  69%,
  100% {
    opacity: 0;
  }
}

/*** OC_DECOR ***/
@keyframes oc_decor {
  0%,
  65% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
  }
}

@keyframes oc_decor_fin {
  0%,
  65% {
    transform: scale(1);
  }
  70%,
  100% {
    transform: scale(0.8);
  }
}

@keyframes oc_feuille1 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  30% {
    transition-timing-function: ease-in-out;
    transform: rotate(-2deg);
  }
  60% {
    transition-timing-function: ease-in-out;
    transform: rotate(8deg);
  }
  90%,
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(-2deg);
  }
}

@keyframes oc_feuille2 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  12.5% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  37% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg);
  }
  49.5% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  62% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg);
  }
  74.5% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(10deg);
  }
}

@keyframes oc_feuille3 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg) skewX(0deg);
  }
  30% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(7deg);
  }
  60% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg) skewX(0deg);
  }
  90%,
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(-7deg);
  }
}

@keyframes oc_feuille4 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg) skewX(5deg);
  }
  50% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
  75% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg) skewX(-5deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
}

@keyframes oc_feuille5 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(8deg) skewX(5deg);
  }
  50% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
  75% {
    transition-timing-function: ease-in-out;
    transform: rotate(-8deg) skewX(-5deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg) skewX(0deg);
  }
}

@keyframes oc_plante3 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(-10deg);
  }
  50% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  75% {
    transition-timing-function: ease-in-out;
    transform: rotate(10deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_plante2 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(10deg);
  }
  50% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  75% {
    transition-timing-function: ease-in-out;
    transform: rotate(-10deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_plante1 {
  0% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  25% {
    transition-timing-function: ease-in-out;
    transform: rotate(-10deg);
  }
  50% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
  75% {
    transition-timing-function: ease-in-out;
    transform: rotate(10deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_chapeau {
  0%,
  5% {
    transform: translate(-205px, 322px) rotate(0deg);
  }
  35%,
  100% {
    transform: translate(319px, 129px) rotate(360deg);
  }
}

@keyframes oc_nuage {
  0% {
    transform: translateX(-33px);
  }
  70%,
  100% {
    transform: translateX(300px);
  }
}

/*** FRAME 1 ***/
@keyframes oc_masque_txt1 {
  0%,
  11% {
    width: 0px;
  }
  20%,
  100% {
    width: 200px;
  }
}

@keyframes oc_masque_txt2 {
  0%,
  11% {
    width: 0px;
  }
  20%,
  100% {
    width: 200px;
  }
}

@keyframes oc_masque_txt3 {
  0%,
  11% {
    width: 0px;
  }
  20%,
  100% {
    width: 200px;
  }
}

@keyframes oc_f1_txt1 {
  0%,
  2% {
    opacity: 0;
    transform: translateY(10px);
  }
  7%,
  30.9% {
    opacity: 1;
    transform: translateY(0px);
  }
  31%,
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

@keyframes oc_f1_txt2 {
  0%,
  3% {
    opacity: 0;
    transform: translateY(10px);
  }
  8%,
  30.9% {
    opacity: 1;
    transform: translateY(0px);
  }
  31%,
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

@keyframes oc_f1_txt3 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(10px);
  }
  9%,
  30.9% {
    opacity: 1;
    transform: translateY(0px);
  }
  31%,
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

@keyframes oc_f1_txt1_bleu {
  0%,
  31% {
    opacity: 1;
    transform: translateY(0px);
  }
  34%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes oc_f1_txt2_bleu {
  0%,
  33% {
    opacity: 1;
    transform: translateY(0px);
  }
  36%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes oc_f1_txt3_bleu {
  0%, 35% {
    opacity: 1;
    transform: translateY(0px);
  }
  38%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/*** FRAME 2 - POOL ***/
@keyframes oc_frame2 {
  0%,
  33% {
    opacity: 0;
    transform: translateX(-300px) scale(1);
  }
  41%,
  66% {
    opacity: 1;
    transform: translateX(300px) scale(1);
  }
  73%,
  100% {
    opacity: 1;
    transform: translateX(300px) scale(0.8);
  }
}

@keyframes oc_conteneur_bouee {
  0%,
  23% {
    transform: translate(0px, 0px);
  }
  98%,
  100% {
    transform: translate(30px, -30px);
  }
}

@keyframes oc_bouee {
  0%,
  28% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes oc_conteneur_matelas {
  0%,
  28% {
    transform: translate(0px, 0px);
  }
  98%,
  100% {
    transform: translate(-20px, 10px);
  }
}

@keyframes oc_matelas {
  0%,
  38% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(40deg);
  }
}

@keyframes oc_ombre_matelas {
  0%,
  38% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(40deg);
  }
}

@keyframes oc_conteneur_femme {
  0%,
  33% {
    transform: translate(0px, 0px);
  }
  68% {
    transform: translate(-4px, -3px);
  }
  98% {
    transform: translate(0px, 0px);
  }
}

@keyframes oc_femme {
  0%,
  38% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes oc_bras_gauche_femme {
  0%,
  32% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg);
  }
  49% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  66% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg);
  }
  83% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_bras_droit_femme {
  0%,
  32% {
    transition-timing-function: ease-in-out;
    transform: rotate(-6deg);
  }
  49% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  66% {
    transition-timing-function: ease-in-out;
    transform: rotate(6deg);
  }
  83% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(-6deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_jambe_gauche_femme {
  0%,
  32% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg);
  }
  49% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  66% {
    transition-timing-function: ease-in-out;
    transform: rotate(-5deg);
  }
  83% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(5deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_jambe_droit_femme {
  0%,
  32% {
    transition-timing-function: ease-in-out;
    transform: rotate(-6deg);
  }
  49% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  66% {
    transition-timing-function: ease-in-out;
    transform: rotate(6deg);
  }
  83% {
    transition-timing-function: ease-in-out;
    transform: rotate(0);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(-6deg);
  }
  100% {
    transition-timing-function: ease-in-out;
    transform: rotate(0deg);
  }
}

@keyframes oc_ombre_femme {
  0%,
  38% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

/*** FRAME 3 ***/
@keyframes oc_f3_txt1 {
  0%,
  68% {
    opacity: 0;
    transform: translateY(-10px);
  }
  73%,
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes oc_f3_txt2 {
  0%,
  69% {
    opacity: 0;
    transform: translateY(-10px);
  }
  74%,
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes oc_conteneur_cta {
  0%,
  71% {
    opacity: 0;
    height: 0;
  }
  76%,
  100% {
    opacity: 1;
    height: 49px;
  }
}