/* ==========================================================================
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #fff;
}

body {
    font-size: 1em;
    line-height: 1.4;
     height: 100%;
  overflow: hidden;
  overflow-y: hidden;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}
p {
      font-size: 1.3rem;
    line-height: 2rem;
}
.fp-tableCell {
  position: relative;
  overflow-y: hidden;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   ========================================================================== */

html,
body {
    width: 100%;
    height: 100%;
}
canvas {
  position: absolute !important;
  top:0 !important;
  right: 0;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
#particle-slider {

      margin: 0 auto;
      height: 300px;
width: 100%;
position: absolute;
bottom: 0px;
/*margin-bottom: 33px;*/
z-index: 1;
  margin-bottom: -45px;
  margin-left: -6%;
display: inline-block;

/*left: 50%;*/
    }

      #particle-slider div {
        display: none;
      }

    section.fixed {
        background-size: cover !important;
        background-position:center !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }

    #cercle {
        position: fixed;
        display: block;
        top: 50%;
        left: 50%;
        margin: -200px 0 0 -200px;
        width: 400px;
        height: 400px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;

        border-radius: 50%;
        background: #ee4959;
        z-index: 9999;
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }

    #cercle:hover {
        opacity: 1.0;
        filter : alpha(opacity=100);
    }


    .g_cercle {
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        position: relative;
            height: 400px;
    }
    .g_cercle div {
      height: 400px;
        line-height: 400px;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }
    .g_cercle p {
      width: 400px;
      font-size: 2.5vw;
      line-height: 2.7rem;
      vertical-align: middle;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 40%;
        left: 50%;
    }
.socialmedia {
  position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 1;
}
.socialmedia a {
  text-decoration: none;
  color: #FFF;
}
.ketsulogo {

}

.arrow-fond {
      position:fixed;
    right: 10%;
    bottom: 10%;
    width: 150px;
    z-index: 99;
     display: none;
}
.arrow-fond img {
  width: 100%;
}
.arrow-cercle {
   width: 230px;
    position: absolute;
    top: 0px;
    right: -29%;
    display: none;

}
.arrow-cercle img {
  width: 100%;
}
.oneicones p {
  display: inline-block;
  margin: 100px 4px;
}
.twoicones {
margin: 10px 0px 13px 0px;
}
.twoicones p{ display: inline-block; margin: 0px 4px;}
.threeicones p {
  display: inline-block;
      margin: 0px 4px;
}
/*////////////////////////////// A N I M A T I O N  C E R C L E S //////////////////////////////*/

#cercle #cercle-contenu {
    position: relative;
    text-align: center;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -200px;
}

.mobile a {
    display: none;
}

.navigateur a {
        display: inline-block;
    position: relative;
    z-index: 99;
    width: 35px;
    height: 35px;
}



@media only screen and (max-width: 768px) {
    #cercle {
        margin: -150px 0 0 -150px;
        width:300px;
        height:300px;
    }
    p {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }

  /* #cercle_section2 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }
  #cercle_section3 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }
   #cercle_section4 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }
  #cercle_section5 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }
   #cercle_section6 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }
  #cercle_section7 .backsection1 > p:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  } */
/*  #cercle_section9 > div:first-child {
    width: 200px;
    margin: 0px auto;
    display: inline-block;
    margin-top: -20px;
  }*/
  #cercle #cercle-contenu {
    height: auto;
  }
}




/* link "scroll to top" */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  /* position: fixed; */
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8) url(./img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #000;
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
  .arrow-cercle {
    top: -66px;
    right: -5%;
}
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}

.invisible {
    visibility:hidden;
}

/* SEB CSS*/
  * {
                font-family: 'Varela Round', sans-serif !important;
            }


            #cercle {

               /* transform-style: preserve-3d;
                 -webkit-transform-style: preserve-3d; */
                transform-origin: center right;
                transition: transform 1s;
                -webkit-transform-origin: center right;
                -webkit-transition: transform 1s;
            }

             #cercle.is-flipped {
                transform: translateX(-100%) rotateY(-181deg);
                 -webkit-transform: translateX(-100%) rotateY(-181deg);

            }
            #cercle.is-flipped .front {
                display: none;
            }
            /* Section 1*/
            .backsection1 {
                display: none;
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg);
            }

            #cercle.is-flipped .backsection1 {
                display: inline-block;
            }

            /* Section 2*/
            #section2 {
            /* background-color:#54b948;*/
            }
            .background-section2 {
              position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;

              -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              -o-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;

            }
           .image-grid div {
            width: 14.28%;
            float: left;
            padding-bottom: 14.28%;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
             /* width: 20%;
              height: 135px;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;*/
            }

            .image-grid {
              display: flex;
              flex-wrap: wrap;
            }


            /* Logo */
            .image01 { background-image: url('../img/logo_site/1.jpg'); }
            .image02 { background-image: url('../img/logo_site/2.jpg'); }
            .image03 { background-image: url('../img/logo_site/3.jpg'); }
            .image04 { background-image: url('../img/logo_site/4.jpg'); }
            .image05 { background-image: url('../img/logo_site/5.jpg'); }
            .image06 { background-image: url('../img/logo_site/6.jpg'); }
            .image07 { background-image: url('../img/logo_site/7.jpg'); }
            .image08 { background-image: url('../img/logo_site/8.jpg'); }
            .image09 { background-image: url('../img/logo_site/9.jpg'); }
            .image10 { background-image: url('../img/logo_site/10.jpg'); }
            .image11 { background-image: url('../img/logo_site/11.jpg'); }
            .image12 { background-image: url('../img/logo_site/12.jpg'); }
            .image13 { background-image: url('../img/logo_site/13.jpg'); }
            .image14 { background-image: url('../img/logo_site/14.jpg'); }
            .image15 { background-image: url('../img/logo_site/15.jpg'); }
            .image16 { background-image: url('../img/logo_site/16.jpg'); }
            .image17 { background-image: url('../img/logo_site/17.jpg'); }
            .image18 { background-image: url('../img/logo_site/18.jpg'); }
            .image19 { background-image: url('../img/logo_site/19.jpg'); }
            .image20 { background-image: url('../img/logo_site/20.jpg'); }
            .image21 { background-image: url('../img/logo_site/21.jpg'); }
            .image22 { background-image: url('../img/logo_site/22.jpg'); }
            .image23 { background-image: url('../img/logo_site/23.jpg'); }
            .image24 { background-image: url('../img/logo_site/24.jpg'); }
            .image25 { background-image: url('../img/logo_site/25.jpg'); }
            .image26 { background-image: url('../img/logo_site/26.jpg'); }
            .image27 { background-image: url('../img/logo_site/27.jpg'); }
            .image28 { background-image: url('../img/logo_site/28.jpg'); }
            .image29 { background-image: url('../img/logo_site/29.jpg'); }
            .image30 { background-image: url('../img/logo_site/30.jpg'); }
            .image31 { background-image: url('../img/logo_site/31.jpg'); }
            .image32 { background-image: url('../img/logo_site/32.jpg'); }
            .image33 { background-image: url('../img/logo_site/33.jpg'); }
            .image34 { background-image: url('../img/logo_site/34.jpg'); }
            .image35 { background-image: url('../img/logo_site/35.jpg'); }
            .image36 { background-image: url('../img/logo_site/36.jpg'); }
            .image37 { background-image: url('../img/logo_site/37.jpg'); }
            .image38 { background-image: url('../img/logo_site/38.jpg'); }
            .image39 { background-image: url('../img/logo_site/39.jpg'); }
            .image40 { background-image: url('../img/logo_site/40.jpg'); }
            .image41 { background-image: url('../img/logo_site/41.jpg'); }
            .image42 { background-image: url('../img/logo_site/42.jpg'); }
            .image43 { background-image: url('../img/logo_site/43.jpg'); }
            .image44 { background-image: url('../img/logo_site/44.jpg'); }
            .image45 { background-image: url('../img/logo_site/45.jpg'); }


            /*Production Image */
            .image-grid_prod div {
              width: 20%;
              padding-bottom: 20%;
              float: left;
             /* display: inline-table;*/
               display: inline-block;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
            }

            .image-grid_prod {
              display: flex;
              flex-wrap: wrap;
            }



            .imagek01 { background-image: url('../img/production/ketsu1.jpg'); }
            .imagek02 { background-image: url('../img/production/ketsu2.jpg'); }
            .imagek03 { background-image: url('../img/production/ketsu3.jpg'); }
            .imagek04 { background-image: url('../img/production/ketsu4.jpg'); }
            .imagek05 { background-image: url('../img/production/ketsu5.jpg'); }
            .imagek06 { background-image: url('../img/production/ketsu6.jpg'); }
            .imagek07 { background-image: url('../img/production/ketsu7.jpg'); }
            .imagek08 { background-image: url('../img/production/ketsu8.jpg'); }
            .imagek09 { background-image: url('../img/production/ketsu9.jpg'); }
            .imagek10 { background-image: url('../img/production/ketsu10.jpg'); }
            .imagek11 { background-image: url('../img/production/ketsu11.jpg'); }
            .imagek12 { background-image: url('../img/production/ketsu12.jpg'); }
            .imagek13 { background-image: url('../img/production/ketsu13.jpg'); }
            .imagek14 { background-image: url('../img/production/ketsu14.jpg'); }
            .imagek15 { background-image: url('../img/production/ketsu15.jpg'); }
            .imagek16 { background-image: url('../img/production/ketsu16.jpg'); }
            .imagek17 { background-image: url('../img/production/ketsu17.jpg'); }
            .imagek18 { background-image: url('../img/production/ketsu18.jpg'); }
            .imagek19 { background-image: url('../img/production/ketsu19.jpg'); }
            .imagek20 { background-image: url('../img/production/ketsu20.jpg'); }


             /*Production Image */
            .image-grid_social div {
                  width: 25%;
              float: left;
             display: inline-block;
              padding-bottom: 25%;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
            }

             @media screen and (max-width: 415px) {
              .image-grid div, .image-grid_prod div, .image-grid_social div  {
                  width: 33.3%;
                  float: left;
                  padding-bottom: 33.3%;
              }


              .arrow-cercle {
                  top: -60px;
                  right: -5%;
                }
           }
            .image-grid_social {
              display: flex;
              flex-wrap: wrap;
            }

            .images01 { background-image: url('../img/reseauxsociaux/1.jpg'); }
            .images02 { background-image: url('../img/reseauxsociaux/2.jpg'); }
            .images03 { background-image: url('../img/reseauxsociaux/3.jpg'); }
            .images04 { background-image: url('../img/reseauxsociaux/4.jpg'); }
            .images05 { background-image: url('../img/reseauxsociaux/5.jpg'); }
            .images06 { background-image: url('../img/reseauxsociaux/6.jpg'); }
            .images07 { background-image: url('../img/reseauxsociaux/7.jpg'); }
            .images08 { background-image: url('../img/reseauxsociaux/8.jpg'); }
            .images09 { background-image: url('../img/reseauxsociaux/9.jpg'); }
            .images10 { background-image: url('../img/reseauxsociaux/10.jpg'); }
            .images11 { background-image: url('../img/reseauxsociaux/11.jpg'); }
            .images12 { background-image: url('../img/reseauxsociaux/12.jpg'); }
            .images13 { background-image: url('../img/reseauxsociaux/13.jpg'); }
            .images14 { background-image: url('../img/reseauxsociaux/14.jpg'); }
            .images15 { background-image: url('../img/reseauxsociaux/15.jpg'); }
            .images16 { background-image: url('../img/reseauxsociaux/16.jpg'); }
            .images17 { background-image: url('../img/reseauxsociaux/17.jpg'); }
            .images18 { background-image: url('../img/reseauxsociaux/18.jpg'); }
            .images19 { background-image: url('../img/reseauxsociaux/19.jpg'); }
            .images20 { background-image: url('../img/reseauxsociaux/20.jpg'); }
            .images21 { background-image: url('../img/reseauxsociaux/21.jpg'); }
            .images22 { background-image: url('../img/reseauxsociaux/22.jpg'); }
            .images23 { background-image: url('../img/reseauxsociaux/23.jpg'); }
            .images24 { background-image: url('../img/reseauxsociaux/24.jpg'); }


          /* NEW GRID DESKTOP 4 */
          .image-grid_four {
              display: flex;
              flex-wrap: wrap;
            }
          .image-grid_four div {
              width: 25%;
              float: left;
              display: inline-block;
              padding-bottom: 25%;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
            }


          /* NEW GRID DESKTOP 3 */
          .image-grid_three {
              display: flex;
              flex-wrap: wrap;
            }
          .image-grid_three div {
              width: 33%;
              padding-bottom: 31%;
              float: left;
              display: inline-block;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
          }

           @media screen and (max-width: 415px) {
            .image-grid_four div, .image-grid_three div  {
                  width: 50%;
                  float: left;
                  padding-bottom: 50;
              }
           }





            /* VIdeo */
            /*.video-wrapper {
                  position: relative;
                  left: -1px;
                  width: calc(100% + 1px);
                  margin-bottom: 0;
                  background: transparent;
              }

              .video-container {
                  position: relative;
                  padding-bottom: 56.25%;
                  height: 0;
                  overflow: hidden;
                  background: transparent;
              }
*/
             /* .videowrapper {
                float: none;
                clear: both;
                width: 100%;
                position: relative;
                padding-bottom: 56.25%;
                padding-top: 25px;
                height: 0;
            }
            .videowrapper iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }*/
              .video-container {
                  position: relative;
                  padding-bottom: 56.25%;
                  height: 0;
                  overflow: hidden;
                  background: transparent;
              }
               .video-container .mejs-container {
                 position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: transparent;
                  width: 100% !important;
                  height: 100% !important;
                  object-fit: cover;
                   background-color: black!important;
               }
              .video-container iframe,
              .video-container object,
              .video-container video,
              .video-container embed {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: transparent;
                  width: 100% !important;
                  height: 100% !important;
                  object-fit: cover;
              }
               .slider__video{
              /*position: absolute !important;
              left: 0 !important;
              bottom: 0 !important;
              top:0 !important;
              right:0 !important;
              width: 100% !important;
              height: 100% !important;
              background-size: 100% 100% !important;
              background-color: black!important;
                background-position: center center;
                background-size: contain;
                object-fit: cover; /*cover video background */

            }

            /* Section 3*/
            #section3 {
             /*background-color:#794C96;*/
            }
            .background-section3 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
                 -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              -o-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;

            }
            /* Section 4 */

            .background-section4 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
                 -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;

            }
            /* Section 5 */

            .background-section5 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
             z-index: 1;
               -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              -o-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;

            }
            /* Section 6 */

            .background-section6 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
               z-index: 1;
                 -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;

            }
            /* Section 7 */

            .background-section7 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
              z-index: 1;
                -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

            }
            /* Section 8 */

            .background-section8 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
                -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

            }
            /* Section 9 */

            .background-section9 {

               position: absolute;
              top:0;
              bottom: 0;
              left: 0;
              opacity: 1;
              right: 0;
              width:100%;
              height: 100%;
                -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

            }

#cercle img {
  display: inline-block;

}
.icones1 img, .icones2 img, .icones3 img, .icones4 img {
   width: 35px;
   height: 35px;
   position: relative;
   z-index: 10;
}
.clickedback, .clickedbackvideo {
  opacity: 0;
   -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.clickref {
    background-color: #FD6C9E !important;
    cursor: pointer;
}
.mentionslegales {
  color: #FFF;
  z-index: 2;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  cursor: pointer;

}
.mentionslegales a {
color: #FFF;
text-decoration: none;
}
.section-description {
 position: relative;
 padding-bottom: 5rem;
 padding-right: 1.2rem;
 text-align: left;
z-index: 1;
display: flex;
flex-direction: row-reverse;

}
.contentsection {
  width: 450px;
}
.section-description.descsection9 {
  position: absolute;
  padding-bottom: 0rem;
  left: 1rem;
  top:65%;
  text-align: left;
  z-index: 1;
}
.section-description.alignleft {
text-align: left;
padding-left: 1.2rem;
flex-direction: row;
}
.section-description.alignright {
    /* text-align: center;
      right: 0rem;
      left: 0rem;
      width: 100%;
      top: 85%;
      padding-right: 0px;
      padding-left: 0px; */
      text-align: right;
        padding-right: 1.2rem;
        flex-direction: row;
        right: 1rem;
          left: auto;
     
}
.section-description p {
    display: inline;
   margin: 0;
    padding: 0;
   font-size: 1.4vw;
     line-height: 150%;
}
.bounce-upfirst p {
  font-size: 2.5vw;
}

/* color picker */

.picker {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00acdf;
}

.cursor {
  z-index: 2;
  position: fixed;
  width: 0rem;
  height: 0rem;
  top: 110vh;
  pointer-events: none;
}
.cursor g {
  fill: currentColor;
  transition: fill 200ms linear;
}


.picked {
  pointer-events: none;
  position: fixed;
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%) scale(0.2);
transform: translate(-50%, -50%) scale(0.2);
}



/* ANIMATION */
.animation-element {
  /* opacity: 0;*/
  position: relative;
}


.bounce-upfirst {
  opacity: 0;
  -moz-transition: all 800ms ease-out;
  -webkit-transition: all 800ms ease-out;
  -o-transition: all 800ms ease-out;
  transition: all 800ms ease-out;
  -moz-transform: translate3d(0px, 300px, 0px);
  -webkit-transform: translate3d(0px, 300px, 0px);
  -o-transform: translate(0px, 300px);
  -ms-transform: translate(0px, 300px);
  transform: translate3d(0px, 300px, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-upfirst.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px,);
  -ms-transform: translate(0px, 0px,);
  transform: translate3d(0px, 0px, 0px);
}

.bounce-up {
  opacity: 0;
  -moz-transition: all 800ms ease-out;
  -webkit-transition: all 800ms ease-out;
  -o-transition: all 800ms ease-out;
  transition: all 800ms ease-out;
  -moz-transform: translate3d(0px, 50%, 0px);
  -webkit-transform: translate3d(0px, 50%, 0px);
  -o-transform: translate(0px, 50%);
  -ms-transform: translate(0px, 50%);
  transform: translate3d(0px, 50%, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, -100%, 0px);
  -webkit-transform: translate3d(0px, -100%, 0px);
  -o-transform: translate(0px, -100%);
  -ms-transform: translate(0px, -100%);
  transform: translate3d(0px, -100%, 0px);
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


.animation-element.fadein {
  opacity: 0;
  -moz-transition: all 4s linear;
  -webkit-transition: all 4s linear;
  -o-transition: all 4s linear;
  transition: all 4s linear;

}

.animation-element.fadein.in-view {
  opacity: 1;
  -moz-transition: all 4s linear;
  -webkit-transition: all 4s linear;
  -o-transition: all 4s linear;
  transition: all 4s linear;
}
.mobileview {
  display: none !important;
}

.desktopeview {
  display: inline;
}
.closecross {
    background-color: #74D0F1;
    position: absolute;
    top: 1rem;
    width: 20px !important;
     padding-bottom: 0px !important;
     height: 20px !important;
     display: none;
     padding: 12px !important;
     text-align: center;
     right: 1rem;
     cursor: pointer;
     color: #000;
     font-size: 30px;
    line-height: 24px;
}

/*********** COLOURS VARIABLES **********************/
/* BACKGROUND COLOUR PAGE */
.background-section1 {
  background-color: #74D0F1;
}
.background-section2 {
  background-color: #0ABAB5;
}
.background-section3 {
  background-color: #C9A0DC;
}
.background-section4 {
    background-color: #0B2249;
}
.background-section5 {
  background-color: #BBD2E1;
}
.background-section6 {
  background-color: #961D68;
}
.background-section7 {
  background-color: #3A8EBA;
}
.background-section8 {
  background-color: #FD6C9E;
}
.background-section9 {
    background-color: #74D0F1;
}

/* COLOUR TEXT AND BACKGROUND FOR EACH SECTIONS */
/* Background Text Section 1 */
.descsection1 {
  background-color: #74D0F1;
}
/* Text Section 1 */
/* .descsection1 p {
  background: #FD6C9E
} */
/* Background Text Section 2 */
.descsection2 {
  background-color: #0ABAB5;
}
/* Text Section 2 */
/* .descsection2 p {
  background: #74D0F1;
} */

/* Background Text Section 3 */
.descsection3 {
  background-color: #C9A0DC;
}
/* Text Section 3 */
/* .descsection3 p {
  background: #0ABAB5;
} */
/* Background Text Section 4 */
.descsection4 {
  background-color: #0B2249;
}
/* Text Section 4 */
/* .descsection4 p {
  background: #C9A0DC;
} */
/* Background Text Section 5 */
.descsection5 {
  background-color: #BBD2E1;
}
/* Text Section 5 */
/* .descsection5 p {
  background: #0B2249;
} */
/* Background Text Section 6 */
.descsection6 {
  background-color: #961D68;
}
/* Text Section 6 */
/* .descsection6 p {
  background: #BBD2E1;
} */
/* Background Text Section 7 */
.descsection7 {
  background-color: #3A8EBA;
}
/* Text Section 7 */
/* .descsection7 p {
  background: #961D68;
} */
/* Background Text Section 8 */
.descsection8 {
  background-color: #FD6C9E;
}
/* Text Section 8 */
/* .descsection8 p {
  background: #3A8EBA;
} */
/* Background Text Section 9 */
.descsection9 {
  background-color: transparent;
}
/* Text Section 9 */
/* .descsection9 p {
  background: #74D0F1;
} */
/* COULEUR DU CERCLE ***/
#cercle {
  background: #74D0F1;
}
/* Pour les autres pages cela se trouve dans le fichiers main.js a partir de la ligne 32, chaque destinations.index numero indique la section
Et tu peux remplacer le code couleur dans la ligne qui contient $('#cercle').css('background-color', '#DA3D88'); remplace le code couleur par celui que
tu veux dans chaque section qui correspond a chaque page ********/


@media only screen and (max-width: 1300px) {
.contentsection {
  width: 300px;
}
}
@media only screen and (max-width: 767px) {
  .section-description.alignleft.descsection1 .bounce-upfirst {
        opacity: 1;
          display: block;
          transform: translate3d(0px, -300px, 0px);
  }
    .section-description {
display: block;
    }
   
.section-description p {
    font-size: 3.8vw;
  }
  .descsection1 p {
    font-size: 6vw;
  }
    .contentsection {
      width: 95%;
              padding-left: 20px;
    }
    .section-description.alignleft, .section-description.alignright {
      text-align: center;
    }
     #cercle {
       top: 30%;
     }
     .g_cercle p {
        font-size: 6vw;
         line-height: 2.2rem;
    }
     #cercle {
          margin: -100px 0 0 -100px;
          width: 200px;
          height: 200px;
     }
     #cercle img {
         display: inline-block;
          width: 100px;
       }

        #cercle #cercle_section9 img {
          display: inline-block;
          width: 35px;
        }

        .icones6 {
          padding-top: 0 !important;
        }
       .socialmedia a {
         display: block;
          }
         .socialmedia {
           position: absolute;
           right: auto;
           z-index: 1;
           bottom: 3rem;
           left: 1rem;
           width: 60%;
           z-index: 10;
         }
                    .socialmedia span {
                      display: none;
                    }
        .mentionslegales {
           bottom: 1rem;
           left: 1rem;
           }
     .section-description.descsection9 {
       position: absolute;
       padding-bottom: 0rem;
       right: auto;
       top: 85%;
       text-align: center;
       z-index: 1;
        left: 50%;
        transform: translateX(-50%);
         width: 90%;

     }
     .closecross {
           position: fixed;

       }
     .section-description.alignright.descsection9 {
        top:75%;
      padding-right: 0;
         }
     .mobileview {
      display: inline !important;
     }
    .desktopeview {
       display: none !important;
      }
            #cercle #cercle-contenu {
              width: 200px;
              height: 200px;
              margin: -100px 0 0 -100px;
            }
         .g_cercle {
           height: 200px;
         }

         .g_cercle div {
           height: 200px;
           line-height: 200px;
         }

         .g_cercle p {
          top: 37%;
           width: 200px;

         }
            .oneicones p {
              display: inline-block;
              margin: 81px 4px;
            }
            .section-description {
              height: 100px;
            }
}