/*****--**-----*****--|NAV|-*****-----**--*****/
     #navsticky{
          box-shadow: black 14px 14px 0px 0px;
     }

     .bar{
          background-color: black;
     }
/*****--**-----*****--|NAV|-*****-----**--*****/

body{
     background-color:#394F92;
     overflow-x: hidden;
}

.lepetitbonusstorytellingp{
     display: block;
}

.lepetitbonusseop{
     display: none;
}

.lepetitbonuscopywritingp{
     display: none;
}

/*****--**-----*****--|STORYTELLING ACCUEIL|-*****-----**--*****/
     #storytellingaccueil{
          width: 60vw;
          max-width: 960px;
          margin: auto;
          padding: 13vh 0;
     }

     #storytellingaccueil h1{
          margin: 0;
          font-family: BouhC;
          color: white;
          font-size: 5.5vw;
          line-height: 0.90em;
     }

     #storytellingaccueil article{
          width: 70%;
          padding: 36px 14px 0 14px;
     }

     #storytellingaccueil article p{
          font-size: 14px;
          color: white;
          font-family: Valizas;
          font-weight: 600;
          padding: 12px 0;
     }

     /*****--**-----*****--|STORYTELLING ACCUEIL TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingaccueil {
                    min-height: auto;
                    width: 80%;
                    padding: 10vh 0;
               }

               #storytellingaccueil h1{
                    font-size: 12vw;
               }

               #storytellingaccueil article{
                    width: 100%;
               }

               #storytellingaccueil article p {
                    font-size: 24px;
               }
          }
     /*****--**-----*****--|STORYTELLING ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING ACCUEIL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
               #storytellingaccueil{
                    width: 100%;
                    height: auto;
                    min-height:100vh;
                    padding: 0;
               }

               #storytellingaccueil h1{
                    font-size: 15vw;
                    padding: 9vh 12px 12px 12px;
               }

               #storytellingaccueil article{
                    padding: 14px;
               }

               #storytellingaccueil article p {
                    font-size: 21px;
               }
          }
     /*****--**-----*****--|STORYTELLING ACCUEIL MOBILE|-*****-----**--****/

     /*****--**-----*****--|STORYTELLING ACCUEIL ANIMATION|-*****-----**--****/
          #storytellingaccueil h1{
               -webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
                       animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
          }

          #storytellingaccueil article p:nth-child(1){
               -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
                       animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
          }
          #storytellingaccueil article p:nth-child(2){
               -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s both;
                       animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s both;
          }
          #storytellingaccueil article p:nth-child(3){
               -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.4s both;
                       animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.4s both;
          }
          #storytellingaccueil article p:nth-child(4){
               -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.6s both;
                       animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.6s both;
          }
          #storytellingaccueil article p:nth-child(5){
               -webkit-animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.8s both;
                       animation: tilt-in-fwd-bl 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.8s both;
          }

          @-webkit-keyframes tilt-in-fwd-tr {
               0% {
                    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                    opacity: 0;
               }
               100% {
                    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                    opacity: 1;
               }
          }
          @keyframes tilt-in-fwd-tr {
               0% {
                    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
                    opacity: 0;
               }
               100% {
                    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                    opacity: 1;
               }
          }

          @-webkit-keyframes tilt-in-fwd-bl {
               0% {
                    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                            transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                    opacity: 0;
               }
               100% {
                    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                    opacity: 1;
               }
          }
          @keyframes tilt-in-fwd-bl {
               0% {
                    -webkit-transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                            transform: rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg);
                    opacity: 0;
               }
               100% {
                    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                    opacity: 1;
               }
          }
     /*****--**-----*****--|STORYTELLING ACCUEIL ANIMATION|-*****-----**--****/
/*****--**-----*****--|STORYTELLING ACCUEIL|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 1 - CALL TO ACTION|-*****-----**--*****/
     #storytellingsection1{
          background-color: white;
          padding: 10vh 20%;
     }

     #storytellingsection1 p{
          font-family: Valizas;
     }

     #storytellingsection1 ul {
          list-style-type: none;
     }

     #storytellingsection1 ul li{
          font-family: BouhC;
          font-size: 54px;
          line-height:0.8em;
          color:#394F92;
          padding: 6px 12px;
          max-width: 640px;
          margin:auto;
     }

     #storytellingsection1 ul li:nth-child(1){
          transition: 0.3s;
     }
     #storytellingsection1 ul li:nth-child(2){
          transition: 0.6s;
     }
     #storytellingsection1 ul li:nth-child(3){
          transition: 0.9s;
     }
     #storytellingsection1 ul li:nth-child(4){
          transition: 1.2s;
     }

     #storytellingsection1 div{
          display: flex;
     }

     #storytellingsection1 div img{
          width: 29%;
          height: 100%;
          transition: 0.3s;
          transition-delay: 1.2s;
     }

     #storytellingsection1 article{
          background-color: #394F92;
          padding: 36px;
          margin: 36px;
     }

     #storytellingsection1 article p{
          font-size: 14px;
          color: white;
          padding: 6px 0;
     }

     #storytellingsection1 #storytellingsection1partie2 {
          display: block;
          width: 60%;
          padding-left: 6%;
          text-align: justify;
     }

     #storytellingsection1 #storytellingsection1partie2 p{
          padding: 6px 0;
          color: #394F92;
     }

     #storytellingsection1 #storytellingsection1partie2 p b{
          font-size: 21px;
     }
     /*****--**-----*****--|STORYTELLING CALL TO ACTION TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection1{
                    padding: 10vh 15%;
               }

               #storytellingsection1 #storytellingsection1partie2 {
                    width: 94%;
                    padding-top: 6%;
               }
          }
     /*****--**-----*****--|STORYTELLING CALL TO ACTION TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING CALL TO ACTION MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection1 {
                    padding: 5vh 5%;
               }

               #storytellingsection1 div img {
                    width: 45%;
               }
          }
     /*****--**-----*****--|STORYTELLING CALL TO ACTION MOBILE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING CALL TO ACTION ANIMATION|-*****-----**--*****/
          #storytellingsection1:hover ul li{
               font-size: 64px;
          }

          #storytellingsection1:hover div img{
               transform: scale(1.3);
          }

          #storytellingsection1 ul #storytellingsection1ulli5:hover{
               line-height:1em;
               color: black;
          }
     /*****--**-----*****--|STORYTELLING CALL TO ACTION ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 1 - CALL TO ACTION|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING AIDE MOI|-*****-----**--*****/
     #storytellingspanaidemoi button{
          font-family: BouhC;
          font-size: 21vw;
          color: white;
          border: none;
          background-color: transparent;
          line-height: 10vw;
          padding: 76px 0 96px 0;
          width: 100%;
          transition: 0.3s;
     }

     #storytellingspanaidemoi button a{
          text-decoration: none;
          color: white;
     }
     /*****--**-----*****--|STORYTELLING AIDE MOI MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingspanaidemoi button{
                    font-size: 25vw;
                    line-height: 21vw;
               }
          }
     /*****--**-----*****--|STORYTELLING AIDE MOI MOBILE|-*****-----**--*****/
     /*****--**-----*****--|STORYTELLING AIDE MOI ANIMATION|-*****-----**--*****/
          #storytellingspanaidemoi button:hover{
               font-size: 30vw;
               padding: 142px 0 181px 0;
          }
     /*****--**-----*****--|STORYTELLING AIDE MOI ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING AIDE MOI|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 2 - STORYTELLING KEZAKO|-*****-----**--*****/
     #storytellingsection2{
          background-color: #5292c4;
          padding: 12vh 0;
     }

     #storytellingsection2 article{
          width: 50%;
          max-width: 640px;
          margin: auto;
     }

     #storytellingsection2 article h2{
          font-family: Bouh;
          color: white;
          font-size: 41px;
          padding: 0;
          text-align: center;
     }

     #storytellingsection2 article p{
          font-family: Valizas;
          font-weight: 400;
          font-size: 14px;
          color: white;
     }

     #storytellingsection2 .storytellingsection2rotate {
          font-size: 21px;
          font-weight: 700;
          padding: 36px 0;
          width: 100%;
          text-align: center;
          transition: 0.2s;
     }
     /*****--**-----*****--|STORYTELLING KEZAKO TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection2 {
                    padding: 12vh 0;
                    min-height: auto
               }
               #storytellingsection2 article{
                    width: 70%;
               }
          }
     /*****--**-----*****--|STORYTELLING KEZAKO TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING KEZAKO MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection2 {
                    padding: 8vh 0;
               }

               #storytellingsection2 article{
                    width: 90%;
               }

               #storytellingsection2 article .storytellingsection2rotate{
                    padding: 21px 12px;
                    width: 100%;
               }
          }
     /*****--**-----*****--|STORYTELLING KEZAKO MOBILE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING KEZAKO ANIMATION|-*****-----**--*****/
          #storytellingsection2:hover .storytellingsection2rotate{
               transform: scale(1.6)!important;
          }
     /*****--**-----*****--|STORYTELLING KEZAKO ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 2 - STORYTELLING KEZAKO|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 3 - STORYTELLING EXEMPLE TITRE|-*****-----**--*****/
     #storytellingsection3{
          background-color: white;
          padding: 15vh 0 15vh 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
     }

     #storytellingsection3 b h2{
          color: #394f92;
          font-family: BouhC;
          text-align: center;
          font-size: 9vw;
          line-height:7vw;
          width: 50%;
          margin: auto;
          transition: 0.3s;
          padding-bottom: 5vh;
     }

     #storytellingsection3:hover b h2{
               transform: scale(1.2) rotate(2deg);
               font-size: 8vw;
          }

     #storytellingsection3 span{
          height: 12px;
          width: 12px;
          background-color: black;
          margin: 0 auto;
     }

     #storytellingsection3 svg{
          margin: 36px auto -5vw auto;
          width: 36px;
     }
     /*****--**-----*****--|STORYTELLING EXEMPLE TITRE TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection3{
                    padding: 5vh 0;
                    margin-top: -1px;
               }

               #storytellingsection3 b h2 {
                    font-size: 13vw;
                    line-height: 11vw;
               }

               #storytellingsection3:hover b h2{
                    transform: scale(1) rotate(2deg);
                    font-size: 13vw;
               }
          }
     /*****--**-----*****--|STORYTELLING EXEMPLE TITRE TABLETTE|-*****-----**--*****/
     /*****--**-----*****--|STORYTELLING EXEMPLE TITRE MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection3 b h2 {
                    font-size: 17vw;
                    line-height: 14vw;
                    width: 90%;
                    padding-bottom: 0;
               }
          }
     /*****--**-----*****--|STORYTELLING EXEMPLE TITRE MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 3 - STORYTELLING EXEMPLE TITRE|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 4 - STORYTELLING PARFUM|-*****-----**--*****/
     #storytellingsection4{
          background-color: white;
          overflow-x: hidden;
     }

     #storytellingsection4 svg{
          fill: #394f92;
          display: block;
     }

     #storytellingsection4 article{
          background-color: #394f92;
          display: flex;
          margin: -1px 0;
          justify-content: center;
          align-items: center;
     }

     #storytellingsection4 article div p{
          font-family: Valizas;
          font-weight: 400;
          font-size: 14px;
          line-height: 16px;
          color: white;
          padding: 6px;
          max-width: 640px;
          margin: auto;
     }

     #storytellingsection4 article img:nth-child(2){
          width: 20%;
     }

     #storytellingsection4 article #storytellingsection4parfum{
          padding: 5vh 5vh 0 5vh;
          font-style: italic;
     }

     #storytellingsection4 article #storytellingsection4parfum p{
          font-size: 18px;
          line-height: 1.2em;
     }

     #storytellingsection4 article p b{
          font-family: Valizas;
          font-weight: 900;
          color: white;
          text-transform: uppercase;
          font-size: 42px;
     }

     #storytellingsection4 #storytellingsection4svg2{
          transform: rotate(180deg);
     }
     /*****--**-----*****--|STORYTELLING PARFUM TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection4 article{
                    flex-direction: column-reverse;
               }

               #storytellingsection4 article img{
                    padding: 4vh 0;
               }
          }
     /*****--**-----*****--|STORYTELLING PARFUM TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING PARFUM MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection4 article:nth-child(2) div,
               #storytellingsection4 article:nth-child(5) div{
                    width: 80%;
               }

               #storytellingsection4 article p b{
                    font-size: 24px!important;
               }
          }
     /*****--**-----*****--|STORYTELLING PARFUM MOBILE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING PARFUM ANIMATION|-*****-----**--*****/
          #storytellingsection4 article img,
          #storytellingsection4 article:nth-child(4) p{
               -webkit-animation: pulsate-fwd 3s ease-in-out infinite both;
                       animation: pulsate-fwd 3s ease-in-out infinite both;
               z-index: 9;
          }

          @-webkit-keyframes pulsate-fwd {
               0% {
                    -webkit-transform: scale(1);
                            transform: scale(1);
               }
               50% {
                    -webkit-transform: scale(1.1);
                            transform: scale(1.1);
               }
               100% {
                    -webkit-transform: scale(1);
                            transform: scale(1);
               }
          }
          @keyframes pulsate-fwd {
               0% {
                    -webkit-transform: scale(1);
                         transform: scale(1);
               }
               50% {
                    -webkit-transform: scale(1.1);
                         transform: scale(1.1);
               }
               100% {
                    -webkit-transform: scale(1);
                         transform: scale(1);
               }
          }

     /*****--**-----*****--|STORYTELLING PARFUM ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 4 - STORYTELLING PARFUM|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 5 - STORYTELLING INCEPTION|-*****-----**--*****/
     #storytellingsection5{
          background-color: white;
          overflow-x: hidden;
          padding: 36px 0 54px 0;
     }

     #storytellingsection5 aside{
          margin: auto;
          width: 60%;
          padding: 12vh 0 6vh 0;
     }

     #storytellingsection5 aside p{
          font-family: Valizas;
          font-weight: 800;
          font-size: 36px;
          color: black;
          text-align: center;
     }

     #storytellingsection5 article p{
          font-family: Valizas;
          font-weight: 600;
          font-size: 14px;
          color: black;
          width: 420px;
          padding: 14px 0;
          margin: auto;
     }

     #storytellingsection5 a{
          text-decoration: none;
     }

     #storytellingsection5 a p{
          font-family: BouhR;
          color: #394F92;
          font-size: 6vw;
          line-height:5vw;
          transform: rotate(-2deg);
          text-align: center;
          padding: 36px;
          margin: 41px 0 96px 0;
     }
     /*****--**-----*****--|STORYTELLING INCEPTION TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){

          }
     /*****--**-----*****--|STORYTELLING INCEPTION TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING INCEPTION MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection5 aside p{
                    font-size: 24px;
               }

               #storytellingsection5 article{
                    width: 80%;
                    margin: auto;
               }

               #storytellingsection5 article p{
                    width: auto;
               }

               #storytellingsection5 a p {
                    font-size: 12vw;
                    line-height: 11vw;
               }
          }
     /*****--**-----*****--|STORYTELLING INCEPTION MOBILE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING INCEPTION ANIMATION|-*****-----**--*****/
          #storytellingsection5 a p{
               -webkit-animation: pulsate-fwdr 2s ease-in-out infinite both;
                       animation: pulsate-fwdr 2s ease-in-out infinite both;
          }

          @-webkit-keyframes pulsate-fwdr {
               0% {
                    -webkit-transform: scale(1)rotate(-4deg);
                            transform: scale(1)rotate(-4deg);
               }
               25% {
                    -webkit-transform: scale(1.3)rotate(0deg);
                            transform: scale(1.3)rotate(0deg);
               }
               50% {
                    -webkit-transform: scale(1)rotate(4deg);
                            transform: scale(1)rotate(4deg);
               }
               75% {
                    -webkit-transform: scale(1.3)rotate(0deg);
                            transform: scale(1.3)rotate(0deg);
               }
               100% {
                    -webkit-transform: scale(1)rotate(-4deg);
                            transform: scale(1)rotate(-4deg);
               }
          }
          @keyframes pulsate-fwdr {
               0% {
                    -webkit-transform: scale(1)rotate(-4deg);
                            transform: scale(1)rotate(-4deg);
               }
               25% {
                    -webkit-transform: scale(1.3)rotate(0deg);
                            transform: scale(1.3)rotate(0deg);
               }
               50% {
                    -webkit-transform: scale(1)rotate(4deg);
                            transform: scale(1)rotate(4deg);
               }
               75% {
                    -webkit-transform: scale(1.3)rotate(0deg);
                            transform: scale(1.3)rotate(0deg);
               }
               100% {
                    -webkit-transform: scale(1)rotate(-4deg);
                            transform: scale(1)rotate(-4deg);
               }
          }
     /*****--**-----*****--|STORYTELLING INCEPTION ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 5 - STORYTELLING INCEPTION|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 6 - STORYTELLING DISCLAIMER|-*****-----**--*****/
     #storytellingsection6{
          background-color: black;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20vh 0;
     }

     #storytellingsection6 h2{
          font-size: 4vw;
          color: white;
          font-family: Valizas;
          font-weight: 100;
          text-transform: uppercase;
          line-height: 3.4vw;
          width: 60%;
          text-align: center;
          transition: 0.3s;
     }

     #storytellingsection6 article{
          display: flex;
          width: 60%;
          max-width: 960px;
          margin: auto;
          align-items: center;
          padding: 3%;
     }

     #storytellingsection6 article div{
          padding: 0 10% 0 0;
     }

     #storytellingsection6 article div p{
          font-size: 14px;
          color: white;
          font-family: Valizas;
          font-weight: 500;
          padding: 7px 36px;
          line-height: 18px;
     }

     #storytellingsection6 article div ul{
          width: 70%;
          margin: auto;
     }

     #storytellingsection6 article div ul li{
          font-family: Valizas;
          font-size: 14px;
          padding: 6px 0;
     }

     #storytellingsection6 article img{
          height: 100%;
          width: 40%;
          -webkit-animation: pulsate-fwd 1s ease-in-out infinite both;
                  animation: pulsate-fwd 1s ease-in-out infinite both;
     }

     #storytellingsection6 button{
          background-color: #394f92;
          border: none;
          color: white;
          font-family: Valizas;
          font-weight: 600;
          text-align: center;
          font-size: 3vw;
          display: block;
          margin: auto;
          padding: 24px 42px;
          transition: 0.4s;
     }
     /*****--**-----*****--|STORYTELLING DISCLAIMER TABLETTTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection6{
                    padding: 10vh 0;
               }

               #storytellingsection6 article{
                    width: 90%;
               }

               #storytellingsection6 article img {
                    width: 30%;
               }
          }
     /*****--**-----*****--|STORYTELLING DISCLAIMER TABLETTTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING DISCLAIMER MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection6 h2 {
                    font-size: 36px;
                    line-height: 36px;
                    width: 90%;
               }

               #storytellingsection6 article{
                    flex-direction: column-reverse;
                    width: 90%;
               }

               #storytellingsection6 article img{
                    margin: auto;
               }

               #storytellingsection6 article div {
                    padding: 0;
               }

               #storytellingsection6 article div p{
                    padding: 24px;
                    text-align: justify;
               }

               #storytellingsection6 button{
                    font-size: 5vw;
               }
          }
     /*****--**-----*****--|STORYTELLING DISCLAIMER MOBILE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING DISCLAIMER ANIMATION|-*****-----**--*****/
          #storytellingsection6:hover h2,
          #storytellingsection6 button:hover{
               font-weight: 1000;
          }
     /*****--**-----*****--|STORYTELLING DISCLAIMER ANIMATION|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 6 - STORYTELLING DISCLAIMER|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 7 - COPYWRITING ETHIQUE|-*****-----**--*****/
     #storytellingsection7{
          background-color: white;
          padding-bottom: 15vh;
     }

     #storytellingsection7 h2{
          margin: 0;
          font-family: BouhR;
          font-size: 6vw;
          line-height: 0.90em;
          padding: 5% 10% 7% 10%;
     }

     #storytellingsection7 div{
          background-color: #394f92;
          width: 50%;
          max-width: 720px;
          margin: auto;
          padding: 54px 96px;
     }

     #storytellingsection7 div p{
          padding: 6px 0;
          font-size: 14px;
          font-family: Valizas;
          font-weight: 500;
          color: white;
     }

     #storytellingsection7 .storytellingsection7bold{
          width: 50%;
          margin: auto;
          padding: 36px 8%;
          font-size: 21px;
          font-family: Valizas;
          font-weight: 700;
          text-align: center;
     }

     #storytellingsection7 div p a{
          text-decoration: none;
          background-color: white;
          color: black;
          padding: 2px 14px;
          font-weight: 700;
          transition: 0.3s;
     }

     #storytellingsection7 a{
          text-decoration: none;
     }

     #storytellingsection7 a p{
          width: 50%;
          margin: auto;
          padding: 36px 8%;
          font-size: 5vw;
          font-family: Valizas;
          font-weight: 700;
          text-align: center;
          color: black;
          transition: 0.3s;
     }

     #storytellingsection7 a p{
          font-weight:800;
          -webkit-animation: epilepsie 2s ease-in-out infinite both;
                  animation: epilepsie 2s ease-in-out infinite both;
     }

     @-webkit-keyframes epilepsie {
               0% {
                    -webkit-font-weight:800;
                            font-weight:800;
               }
               50% {
                    -webkit-font-weight:100;
                            font-weight:100;
               }
               100% {
                    -webkit-font-weight:800;
                            font-weight:800;
               }
          }
          @keyframes epilepsie {
               0% {
                    -webkit-font-weight:800;
                            font-weight:800;
               }
               50% {
                    -webkit-font-weight:100;
                            font-weight:100;
               }
               100% {
                    -webkit-font-weight:800;
                            font-weight:800;
               }
          }
     /*****--**-----*****--|STORYTELLING ETHIQUE TABLETTTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection7{
                    padding-bottom: 5vh;
               }

               #storytellingsection7 div {
                    padding: 36px 54px;
               }
          }
     /*****--**-----*****--|STORYTELLING ETHIQUE TABLETTTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING ETHIQUE MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection7{
                    padding-top: 5vh;
               }

               #storytellingsection7 h2{
                    font-size: 11vw;
               }

               #storytellingsection7 div{
                    width: 80%;
                    padding: 19px 24px;
               }

               #storytellingsection7 div p{
                    font-size: 14px;
               }

               #storytellingsection7 .storytellingsection7bold {
                    width: 90%;
               }

               #storytellingsection7 a p {
                    width: 100%;
                    font-size: 11vw;
               }
          }
     /*****--**-----*****--|STORYTELLING ETHIQUE MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 7 - COPYWRITING ETHIQUE|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 8 - STORYTELLING AUTRES EXPERTISES|-*****-----**--*****/
     #storytellingsection8{
          padding: 2%;
          display: flex;
     }

     #storytellingsection8 div{
          width: 41%;
     }

     #storytellingsection8 img{
          width: 65%;
          margin: -2% -2% -2% 2%;
          max-height: 100vh;
     }

     #storytellingsection8 div h2{
          font-family: BouhC;
          font-size: 3.5vw ;
          color: white;
          width: 75%;
          line-height: 3.2vw;
     }

     #storytellingsection8 div p{
          font-family: Valizas;
          font-weight: 400;
          font-size: 13px;
          color: white;
          padding: 9px 16px;
          max-width: 410px;
     }
     /*****--**-----*****--|STORYTELLING AUTRES EXPERTISES TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection8 div h2 {
                    font-size: 36px;
                    width: 100%;
                    line-height: 36px;
                    text-align: center;
               }
          }
     /*****--**-----*****--|STORYTELLING AUTRES EXPERTISES TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING AUTRES EXPERTISES MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection8 {
                    flex-direction: column-reverse;
               }

               #storytellingsection8 div {
                    width: 100%;
               }

               #storytellingsection8 div h2{
                    margin-top: 2vh;
               }

               #storytellingsection8 img {
                    width: 104%;
                    height: 50vh;
                    margin: -2%;
               }
          }
     /*****--**-----*****--|STORYTELLING AUTRES EXPERTISES MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 8 - STORYTELLING AUTRES EXPERTISES|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 9 - COPYWRITING STORY SEO|-*****-----**--*****/
     #storytellingsection9{
          height: 100vh;
          display: flex;
     }
     #storytellingsection9 div{
          margin: auto;
          width: 50%;
          max-width: 540px;
          color: black;
     }

     #storytellingsection9 div svg{
          width: 45%;
          display: block;
          margin: auto;
          padding: 24px;
     }

     #storytellingsection9 div p{
          font-family: Valizas;
          font-weight: 400;
          font-size: 13px;
          padding: 12px;
     }

     #storytellingsection9 div p span{
          background-color: black;
          padding: 6px 16px 0 16px;
          color: white;
          font-weight: 600;
     }

     #storytellingsection9 div p b{
          width: 90%;
          padding: 0 36px;
          text-align: center;
          display: block;
          margin: auto;
          font-size: 14px;
     }
     /*****--**-----*****--|STORYTELLING STORY SEO TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection9 div {
                    width: 510px;
               }
          }
     /*****--**-----*****--|STORYTELLING STORY SEO TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLINGSTORY SEO MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection9 div {
                    width:90%;
               }
          }
     /*****--**-----*****--|STORYTELLING STORY SEO MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 9 - COPYWRITING STORY SEO|-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 10 - STORYTELLING BONUS |-*****-----**--*****/
     #storytellingsection10{
          min-height: 100vh;
          display: flex;
          border: solid 5vw white;
          background-color: #5292C4;
     }

     #storytellingsection10 div{
          width: 60%;
     }

     #storytellingsection10 div h3{
          color: white;
          font-family: BouhC;
          font-size: 11vw;
          width: 60%;
          line-height:9vw;
          transform: rotate(-11deg);
          margin-bottom: 10vh;
     }

     #storytellingsection10 div p{
          font-family: Valizas;
          font-weight: 500;
          font-size: 16px;
          padding: 24px;
          margin: 0 10% 0 10%;
     }

     #storytellingsection10 div p b{
          font-size: 36px;
          font-weight: 900;
          text-transform: uppercase;
     }

     #storytellingsection10 div a span{
          background-color: #394F92;
          padding: 16px 48px;
     }

     #storytellingsection10 div a{
          display: block;
          text-decoration: none;
          color: white;
          font-family: Valizas;
          font-weight: 800;
          font-size: 24px;
          margin: 0 10% 0 10%;
          transform: rotate(-2deg);
     }

     #storytellingsection10 div div{
          display: flex;
          margin:auto;
          justify-content: space-around;
          margin-top: 6vh ;
     }

     #storytellingsection10 div img{
          width: 96px;
     }

     #storytellingsection10 img{
          width: 50%;
          margin-right: -10%;

     }
     /*****--**-----*****--|STORYTELLING BONUS TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection10 div h3{
                    font-size: 18vw;
                    width: 90%;
                    line-height: 14vw;
                    margin-bottom: 5vh;
               }

               #storytellingsection10 div p b{
                    font-size: 26px;
               }

               #storytellingsection10 div a{
                    font-size: 2vw;
               }

               #storytellingsection10 div a span{
                    padding: 2vw;
               }
          }
     /*****--**-----*****--|STORYTELLING BONUS TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING BONUS MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection10{
                    flex-direction: column;
               }

               #storytellingsection10 div {
                    width: 100%;
               }

               #storytellingsection10 div h3 {
                    font-size: 37vw;
                    width: 100%;
                    line-height: 30vw;
               }

               #storytellingsection10 div p{
                    font-size: 14px;
                    padding: 24px 12px;
               }

               #storytellingsection10 div div{
                    display: none;
               }

               #storytellingsection10 img {
                    width: 120%;
                    margin-top: -25%;
               }

               #storytellingsection10 div a {
                    font-size: 4vw;
                    text-align: center;
               }
          }
     /*****--**-----*****--|STORYTELLING BONUS MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 10 - STORYTELLING BONUS |-*****-----**--*****/

/*****--**-----*****--|STORYTELLING SECTION 11 - STORYTELLING ROUTINE |-*****-----**--*****/
     #storytellingsection11{
          background-color: white;
          padding-bottom: 10vh;
     }

     #storytellingsection11 h2{
          color: #394F92;
          font-family: BouhC;
          font-size: 7vw;
          line-height:6vw;
          width: 38%;
          margin: auto;
          padding: 10vh 0;
     }

     #storytellingsection11 div{
          display: flex;
          margin: auto;
          width: 50%;
          max-width: 620px;
          align-items: center;
          padding: 36px 0;
     }

     #storytellingsection11 div img{
          width: 210px;
     }

     #storytellingsection11 div p{
          color: black;
          font-family: Valizas;
          font-weight: 500;
          font-size: 13px;
          padding: 24px;
     }

     /*****--**-----*****--|STORYTELLING ROUTINE TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #storytellingsection11 h2 {
                    font-size: 13vw;
                    line-height: 10vw;
                    width: 70%;
                    padding: 7vh 0;
               }

               #storytellingsection11 div{
                    width: 60%;
               }
          }
     /*****--**-----*****--|STORYTELLING ROUTINE TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|STORYTELLING ROUTINE MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #storytellingsection11 div{
                    flex-direction:column;
                    padding: 0;
                    width: 80%;
                    padding-bottom: 36px;
               }

               #storytellingsection11 div img {
                    width: 50%;
               }
          }
     /*****--**-----*****--|STORYTELLING ROUTINE MOBILE|-*****-----**--*****/
/*****--**-----*****--|STORYTELLING SECTION 11 - STORYTELLING ROUTINE |-*****-----**--*****/