@font-face { 
  font-family: 'WalRegular'; 
  src: url('../font/gt-walsheim-thin-web.ttf'); 
}
@font-face { 
  font-family: 'WalMedium'; 
  src: url('../font/gt-walsheim-regular-web.ttf'); 
}
@font-face { 
  font-family: 'RepRegular'; 
  src: url('../font/Replica-Light.otf'); 
}

html {
  height: 100%;
  font-size: 1em;
}

h1{
  font-family: WalRegular, Arial;
  font-size: 1.9em;
  color: #0dd6af;
  margin: 0;
}

h2{
  font-family: WalRegular, Arial;
  font-size: 2.5em;
  line-height: 1.2em; 
  color: #ede8a9;
  margin: 0;
}

h3{
  font-family: WalRegular, Arial;
  font-size: 1.67em;
  color: #f2f2f2;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1em;
}

h4{
  font-family: WalMedium, Arial;
  font-size: 0.88em;
  color: #0dd6af;
  margin: 0;
}

h5{
  font-family: WalRegular, Arial;
  font-size: 1.9em;
  color: #f2f2f2;
  margin: 0;
  letter-spacing: 0.02em;
}


body {

  width : 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #212121;
  min-width: 320px;

}

#wrapper {

  width : 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  position: relative;

  display: none;

}

a:link {color: #0dd6af; text-decoration: none;}
a:visited {color: #0dd6af; text-decoration: none;}
a:hover {color: #0dd6af; text-decoration: none;}
a:active {color: #0dd6af; text-decoration: none;}


#chargement {
  position: relative;
  width: 70%;
  margin: 0 auto;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  transform: translateY(-50%);


}
#chargement-infos {
  width: 100%;
  white-space: nowrap;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
    font-family: WalMedium, Arial;
  font-size: 22em;
  color: #1a1a1a;
  letter-spacing: 0em;
  z-index: -1000;
}

#Progress{
  width: 13.15em;
  height: 1.5em;
  position: relative;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  transform: translateY(-50%);
  margin: 0 auto;
  z-index: 0;

}

#LoaderH1{
   width: 11.5em; 
   height: auto;
   float: left;
   margin-right: 0.7em;
   text-align: right;


}


#MenuResponsive{
    width: 100%;
    height: 0;
    padding-bottom: 5.5em;
    position: relative;

}


.Menu {
  width: 88%;
  height: 100%; 
  background-color: #212121;
  overflow: hidden;
  padding: 0 6% 0 6%;
  margin: 0 auto;
  position: absolute;
  top: 0;

}

#Logo{
  width: 50%;
  position: absolute;
  top: 50%; /* poussé de la moitié de hauteur du référent */
  transform: translateY(-50%);

}

#LogoFooter{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

#TitreH1{
   width: 75%; 
   height: auto;
   float: left;
   margin-left: 0.7em;

}

#TitreH2{
   width: auto; 
   height: auto;
   padding-top: 45%;
   padding-left: 40%;

}

#Fleche{
    width: 4.1em;
    height: 1.25em;
    margin-top: 1.55em;
    margin-left: 40%;
    background-image: url("../img/Fleche.svg");
    background-repeat: no-repeat;

background-size: cover; 
-moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%;        /* Opera 9.5 */
-webkit-background-size: 100% 100%;   /* Safari 3.0 */
background-size: 100% 100%; 

}

.Blink{
  width: 0.93em;
  height: 1.65em;
  background-color: #ede8a9;
  float: left;
  margin-top: 0.3em;

  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;

  }

  @keyframes blink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}



#BlinkBottom{
    background-color: #0dd6af;
    animation : none;

}

.BlinkBug{

      margin-top: -0.2em;
}

.Nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 6%;
    z-index: 2;

}

#NavTop{
  margin-top: -0.2em;

}

#NavIndex{
    width: 100%;
    height: 100%;
    position: relative;

}

.Bouton{
    width: 1.75em;
    height: 1.75em;
    background-color: #f2f2f2;
    float: right;
    margin-left: 0.725em;

}


#Langue{
    opacity: 1;


}

#Langue:hover{

  opacity: 0;
}


#Qui{
      width: 1.25em;
      height: 1.25em;
      background-color: transparent;
      background-image: url("../img/Qui.svg");
      background-position : center center;
      background-size: 100% 100%;

      border: 0.25em solid #ede8a9;

              transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;



}

#Qui:hover{

      background-size: 80% 80%;

}


#MenuD{
       background-color: #0dd6af;
       background-image: url("../img/MenuD.svg");
       background-position : center center;
             background-size: 100% 100%;

                     transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;

}


#MenuD:hover{

      background-size: 80% 80%;

}


#Twitter{
  background-image: url("../img/Twitter.svg");
  background-position : center center;
  background-color: transparent;
  background-size: 100% 100%;

}

#Linkdin{
  background-image: url("../img/In.svg");
  background-position : center center;
  background-color: transparent;
  background-size: 100% 100%;

}

#Mail{
  background-image: url("../img/Mail.svg");
  background-position : center center;
  background-color: transparent;
  background-size: 100% 100%;

}


#MenuDerContener{
width: 15.6em;
height: 21.9em;
background-color: #f2f2f2;
position: absolute;
right: 0;
top: 0;
margin: 4.5em 6% 0 0;
z-index: 1000;
display: none;

}

#MenuDer{
width: 70%;
height: 80%;
top: 0;
margin: 0 auto;
z-index: 2000;

}

li{
list-style-type: none;
  font-family: WalMedium, Arial;
  font-size: 1.55em;
  line-height: 1.45em;
  color: #212121;
  margin: 0;


}

ul{
      padding-left: 0;
      margin:15% 0 15% 0;
}

#Vert{

  color: #0dd6af;
}

#AboutContener{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 2000;
margin: 0;
padding: 0;
top: 0;
display: none;



}

#About{
width: 80%;
background-color: #f2f2f2;
margin: 10% 10% 0 10%;
position: relative;
overflow: auto;
padding-bottom: 5%;

}

#AboutTete{
  position: absolute;
  width: 100%;
  height: 20%;
  margin: 5% 0 0 0;


}

#NavAbout{
position: absolute;
right: 0;
width: 75%;
margin: 1% 6% 0 0;

}

#AboutClose{
  background-color: #0dd6af;
  background-image: url("../img/Croix.svg");
  background-size: 100% 100%;


}

#AboutTwitter{
  background-image: url("../img/Twitter.svg");
  background-position : center center;
  background-color: #ede8a9;
  background-size: 100% 100%;

}

#AboutLinkdin{
  background-image: url("../img/In.svg");
  background-position : center center;
  background-color: #ede8a9;
  background-size: 100% 100%;

}

#AboutMail{
  background-image: url("../img/Mail.svg");
  background-position : center center;
  background-color: #ede8a9;
  margin-right: 3%;
  background-size: 100% 100%;

}

#TitreAbout{
  position: absolute;
  font-family: WalMedium, Arial;
  font-size: 2.5em;
  margin: 0 0 0 6%;
  width: 25%;

}

#AboutTexte{
  position: relative;
  width: 88%;
  margin: 14% 5% 0 6%;
  font-family: RepRegular, Arial;
  font-size: 1.88em;

}

#BlinkAbout{
    background-color: #0dd6af;
    position: absolute;
    margin: 1% 0 0 6%;

}


#GeneralResponsive{
    width: 100%;
    height: 0%;
    position: relative;
    overflow: hidden;
    padding-bottom: 47%;

}

.General {
    width: 100%;
    height: 100%;
    margin : 0 auto;
    position: absolute;
    top: 0;
    background-color: #212121;
    background-image: url("../img/Grille.svg");
    background-position : center center;
    background-repeat: repeat;

}

#GeneralBarre{
    width: 88%;
    height: 100%;
    padding: 0 6% 0 6%;
    margin: 0 auto;
    background-image: url("../img/Barre.svg");
    background-position : center center;
    background-repeat: no-repeat;

    background-size: 0% 0%;

 animation-name: Barre;
 animation-duration: 1s;
 animation-iteration-count: 1;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 0s;

}

@keyframes Barre {
  0% {
    background-size: 0% 0%;
  }

  100% {
    background-size: 88% 100%;
  }
}


#GeneralGradient{
    width: 100%;
    height: 100%;
    position: relative;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#212121+27,212121+100&1+30,0+100 */
background: -moz-linear-gradient(top,  rgba(33,33,33,1) 27%, rgba(33,33,33,1) 30%, rgba(33,33,33,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 27%,rgba(33,33,33,1) 30%,rgba(33,33,33,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(33,33,33,1) 27%,rgba(33,33,33,1) 30%,rgba(33,33,33,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 ); /* IE6-9 */

}

#GBas{
    width: 88%;
    height: 0;
    padding: 0 6% 9% 6%;
    margin: 0 auto;
    background-color: #0dd6af;
    position: absolute;
    bottom: 0;

}


#ContenerGeneral{
  width: 100%;
  height: 100%; 
  margin: 0 auto;
  position: relative;

}

#B{
    width: 49%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    left: 0;

}

#Aa{
width: 50%;
height: 0;
padding-bottom: 100%;
float: left;

    background-image: url("../img/Aa.svg");
    background-repeat: no-repeat;

-moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%;        /* Opera 9.5 */
-webkit-background-size: 100% 100%;   /* Safari 3.0 */
background-size: 100% 100%;
      background-position : center center;


}

#Ab{
width: 50%;
height: 0;
padding-bottom: 100%;
float: left;

}

#Ba{
width: 100%;
height: 0;
padding-bottom: 100%;

    background-image: url("../img/Ba.svg");
    background-repeat: no-repeat;


background-size: 100% 100%;  
background-position: center center;


}


#Bb{
width: 100%;
height: 0;
padding-bottom: 100%;

    background-image: url("../img/Bb.svg");
    background-repeat: no-repeat;

    background-size: 100% 100%;
background-position: center center;
opacity: 0;

 animation-name: Bb;
 animation-duration: 3s;
 animation-iteration-count: 1;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 1.5s;

}

@keyframes Bb {
  0% {

          opacity: 0;

  }
  
  50% {

          opacity: 0.8;

  }

  100% {

          opacity: 1;

  }
}

#GD{
    width: 51%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    right: 0;
    z-index: 0;
    top: 0;
    opacity: 0;

 animation-name: GD;
 animation-duration: 1s;
 animation-iteration-count: 1;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 1s;

}

@keyframes GD {
  0% {

          opacity: 0;

  }


  100% {

          opacity: 1;

  }
}

.etage{
width : 88%;
height : 0;
background : #f2f2f2;
margin: 0 auto;
padding: 0 6% 0 6%;
position: relative;
overflow: hidden;

}

#Hello{
  background-color: #f2f2f2;
  font-family: RepRegular, Arial;
  font-size: 1.56em;
  color: #212121;
  line-height: 1.21em;
  text-align: center;
  padding-bottom: 15%;

}

#TexteHello{
    width: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;

}

#Brief{
  background-color: #f2f2f2;
  font-family: RepRegular, Arial;
  font-size: 1.125em;
  color: #212121;
  line-height: 1.2em;
  letter-spacing: 0.017em;
  text-align: left;
  padding-bottom: 20em;

}

#TexteBrief{
    width: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    opacity: 0;

 animation-name: BBB;
 animation-duration: 3s;
 animation-iteration-count: 1;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 0;

}

@keyframes BBB {
  0% {

          opacity: 0;

  }
  
  50% {

          opacity: 0.8;

  }

  100% {

          opacity: 1;

  }
}

.Line{
    width: 88%;
    border-bottom: 1px solid #0dd6af;
    position: absolute;
    bottom: 0;

}

#LineBold{
  padding-bottom: 1.5%;
  background-color: #0dd6af;

}

#Portfolio{
  background-color: #f2f2f2;
  font-family: WalMedium, Arial;
  font-size: 2.5em;
  color: #212121;
  text-align: center;
  padding-bottom: 13%;
}

#TextePortfolio{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;

}


.Brique{
  overflow: hidden;
  margin: 7% auto 0 auto;
  padding-bottom: 100%;

}


.Block{
    max-width: 100%;
    height: auto;
    margin: 7% auto 0 auto;
    display: block;

}

#DemiBlock{
  width: 90%;
}


.Next{
      margin: 7% auto 0 auto;
      width: 30%;
      height: 0;
      padding-bottom: 7%;
      border: 0.2em solid #0dd6af;
      position: relative;

        transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;

}

.Next:hover{
background-color: #0dd6af;
}


#NextTexte{
  margin: 0 auto;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
  color: #0dd6af;
  font-size: 2.06em;
  margin: 0;
  letter-spacing: 0.02em;
  font-family: WalMedium, Arial;

          transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}


.Next:hover #NextTexte{
  color: #fff;
}


.wrappervideo{
  width: 90%;
  margin: 0 auto;

}

.videomarging{
  margin-top: 7%;
}


.video-container {
width: 100%;
height: 0;
margin: 0 auto;
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 

.ImgNoMargin{
  margin: 0 auto 0 auto!important;
}

#TailleMiM{
    padding-bottom: 58%;
}

#TailleI3S{
    padding-bottom: 108%;
}

#TailleMotionPlus{
    padding-bottom: 58%;
}

#TailleMeltingWorld{
    padding-bottom: 331%;
}

#TailleSecondWind{
    padding-bottom: 333%;
}

#TailleTrustYourFood{
    padding-bottom: 167%;
}

#TailleUReflect{
    padding-bottom: 279%;
}

#Premier{
  width: 88%;
  padding-bottom: 23%;
  overflow: hidden;
  margin: 0 auto 2% auto;

}

.Dalle{
  width: 88%;
  height: 100%;
  color: #212121;
  position: absolute;
  top: 0;
  background-color: #000000;

}

#DalleContener{
  width: 88%!important;
  height: 100%!important;
  position: absolute;
  top: 0;

}

.DalleL{
  width: 62.7%!important;
  height: 100%!important;
  background-color: #212121;
  float: right;

}

.DalleS{
  width: 35%!important;
  height: 100%!important;
  background-color: #212121;

}

.DalleLL{
  width: 62.7%!important;
  height: 100%!important;
  background-color: #212121;

}

.DalleSS{
  width: 35%!important;
  height: 100%!important;
  background-color: #212121;
  float: right;

}

#SecondWind{
  background-image: url("../img/SecondWind/Ban.png");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: 100% auto;
}


#SecondWind:hover{
  background-size: 106% auto;

}

#MiM{
  background-image: url("../img/MiM/Ban.jpg");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: 100% auto;
}


#MiM:hover{
  background-size: 106% auto;

}

#I3S{
  background-image: url("../img/I3S/Ban.png");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: auto 100%;
}


#I3S:hover{
  background-size: auto 106%;

}

#MotionPlus{
  background-image: url("../img/MotionPlus/Ban.png");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: 100% auto;
}


#MotionPlus:hover{
  background-size: 106% auto;

}

#MeltingWorld{
  background-image: url("../img/MeltingWorld/Ban2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: 100% auto;
}


#MeltingWorld:hover{
  background-size: 106% auto;

}

#UReflect{
  background-image: url("../img/UReflect/Ban.jpg");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
   
  background-size: 100% auto;
}


#UReflect:hover{
  background-size: 106% auto;

}


.Espace{
  padding-bottom: 11%;

}

#Espace{
  padding-bottom: 7%;

}

#FooterGeneral{
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 13%;

}

#ContenerFooterGeneral{
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;

}

#footer{
  padding-bottom: 13%;
  position: absolute;
  background-color: transparent;
  top: 0;

}

#FooterFond{
  width: 100%;
  padding: 0 0 13% 0;
  position: relative;

}

#FooterContenerFond{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;

}

#PBFond{
  width: 40.9%;
  height: 100%;
  float: left;
  background-color: #212121;


}

#WorkwithFond{
  width: 59.1%;
  height: 100%;
  float: right;
  background-color: #0dd6af;

}

#FooterContener{
  width: 88%;
  height: 100%;
  position: absolute;
  top: 0;

}

#PB{
  width: 40%;
  height: 100%;
  float: left;
  position: relative;

}

#Workwith{
  width: 60%;
  height: 100%;
  float: right;
  position: relative;

}

#TexteWorkwith{
  width: 55%;
  font-family: WalMedium, Arial;
  font-size: 1.31em;
  color: #212121;
  line-height: 1.2em;
  text-align: left;
  padding: 0 0 2.5% 11%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

}

a.HoverFooter:link {color: #f2f2f2; text-decoration: none;}
a.HoverFooter:visited {color: #f2f2f2; text-decoration: none;}
a.HoverFooter:hover {color: #f2f2f2; text-decoration: none;}
a.HoverFooter:active {color: #f2f2f2; text-decoration: none;}


#NavFooter{
    width: 100%;
    height: 100%;

}

#Share{
    width: 20%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;

}

.Legende{
  font-family: RepRegular, Arial;
  font-size: 1.13em;
  color: #f2f2f2;
  line-height: 1.21em;
  text-align: left;
  padding: 4%;

}

.LegendeContener{

    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);

    opacity: 0;

    transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;

}

#UReflect:hover .UReflect{
  opacity: 1;

}

#MeltingWorld:hover .MeltingWorld{
  opacity: 1;

}

#MotionPlus:hover .MotionPlus{
  opacity: 1;

}

#I3S:hover .I3S{
  opacity: 1;

}

#MiM:hover .MiM{
  opacity: 1;

}

#SecondWind:hover .SecondWind{
  opacity: 1;
}

#LegendeContenerPetit{
width: 35%

}

#LegendeContenerMoyen{
width: 62.7%

}

.Description{

    padding-top: 1em;
    letter-spacing: 0.02em;
    color: #808080;

}

#Grand{
    width: 33%;

}

#Moyen{
    width: 47%;
    padding: 6%;

}

#Petit{
    width: 78%;
    padding: 11%;

}


@media screen and (min-width: 1921px) {



    html{    font-size: 1.5em;
  }

  .General{
    background-image: url("../img/Grille+1.svg");
  }


}

@media screen and (min-width: 1441px) and (max-width: 1921px) {


  html{    font-size: 1.25em;
  }

  .General{
    background-image: url("../img/Grille+1.svg");
  }

  #chargement-infos {
    font-size: 21em;
  }

}

@media screen and (min-width: 1195px) and (max-width: 1441px) {


  html{    font-size: 1em;
  }


}

@media screen and (min-width: 1025px) and (max-width: 1195px) {


  html{    font-size: 0.85em;
  }

  .General{
    background-image: url("../img/Grille-1.svg");
  }

    #chargement-infos {
    font-size: 22em;
  }

}

@media screen and (min-width: 900px) and (max-width: 1025px) {


    html{    font-size: 0.75em;
  }

  .General{
    background-image: url("../img/Grille-1.svg");
  }

  #chargement-infos {
    font-size: 23em;
  }

}

@media screen and (min-width: 641px) and (max-width: 900px) {


    html{    font-size: 0.6em;
  }

  #Fleche {
    width: 4em;
    height: 1.1em;
    margin-top: 1.1em;
  }

  h2{
    font-size: 2em;
    line-height: 1.2em;
  }

  #Share {
    width: 25%;
  }

  #Brief{
    font-size: 1.2em;
  }

  #NextTexte{
    font-size: 1.6em;
  }

  .General{
    background-image: url("../img/Grille-1.svg");
  }

  #chargement-infos {
    font-size: 20em;
  }

}

@media screen and (min-width: 495px) and (max-width: 641px) {


  html{
    font-size: 0.5em;
  }

  #Fleche {
    width: 4em;
    height: 1.1em;
    margin-top: 1.1em;
  }

  h2{
    font-size: 2em;
    line-height: 1.2em;
  }

  #Share {
    width: 25%;
  }

   #Qui{
  background-size: 110% 110%;
  }

  .Legende{
    font-size: 11px;
  }

  #Brief{
    font-size: 11px;
  }

  #TexteBrief{
    width: 70%;
  }

  #NextTexte{
    font-size: 1.43em;
  }

    .General{
    background-image: url("../img/Grille-2.svg");
  }

  #chargement-infos {
    font-size: 18em;
  }

  #Progress{
    width: 14.15em;
  
  }

  #LoaderH1{
    width: 12.5em;
  
  }

}

@media screen and (max-width: 501px) {


  html{
    font-size: 0.5em;
  }

  #Fleche {
    width: 4em;
    height: 1.1em;
    margin-top: 1.1em;
  }

  h2{
    font-size: 2em;
    line-height: 1.2em;
  }

  #Share {
    width: 100%;
  }

  #Brief{
    font-size: 11px;
    padding-bottom: 23em;
  }

  #NextTexte{
    font-size: 1.43em;
  }

  #Qui{
  background-size: 110% 110%;
  }

  #GD{
    display: none;
  }

  #B{
    width: 80%;
    margin: 0 auto;
    top: 7.5%;
    position: relative;
  }

  #GeneralResponsive{
    padding-bottom: 100%;
  }

  #GBas{
    padding: 0 6% 10% 6%;
  }

  #About{
  padding-bottom: 10%;
  }

  #AboutTexte{
  margin: 22% 5% 0 6%;
  }

  #TexteHello {
    width: 70%;
  }

  #Hello{
    padding-bottom: 25%;
  }

  #Portfolio{
  padding-bottom: 20%;
  }

  .Description{
    display: none;
  }

  #Grand {
    width: 75%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }

  #Petit{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }

  #Moyen{
    width: 70%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }

  /* Footer */

  #PBFond {
    width: 66%;
  }

  #WorkwithFond {
    width: 34%;
}

  #PB {
    width: 68%;
  }

  #Workwith {
    width: 32%;
  }

  #TexteWorkwith {
    display: none;
  }

  /* Pages */

  #TexteBrief{
    width: 70%;
  }

  #Portfolio{
    font-size: 2em;
  }

  .Next{
    width: 35%;
    padding-bottom: 8%;
  }

  .General{
    background-image: url("../img/Grille-2.svg");
  }

  #TailleSecondWind {
    padding-bottom: 334%;
}

#TailleMotionPlus {
    padding-bottom: 59%;
}

#TailleTrustYourFood {
    padding-bottom: 168%;
}

#TailleUReflect {
    padding-bottom: 281%;
}

#TailleMeltingWorld {
    padding-bottom: 333%;
}

#TailleMiM {
    padding-bottom: 59%;
}

#Bb{
  background-image: url("../img/Bbeige.svg");
}

  #chargement-infos {
    font-size: 12em;
    color: #111111;

  }

  #Progress{
    width: 14.15em;
    display: none;
  
  }
  
  #LoaderH1{
    width: 12.5em;
  
  }

}