@media (max-width: 576px) 

{

.petitlog {
     width:90%;
}


  .imagelogo {
  width:20%
  }  

  .nav-container {
  position: fixed;
  display: none;
  overflow-y: auto;
  z-index: -1;
  top: 0;
  right: 0;
  width: 60vw;
  height: 100%;
  background-color:#B5A092;
  border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;


  }

  .nav-tabs {
  flex-direction: column;
  align-items: flex-end;
  margin-top: 80px;
  width: 100%;
  }

  .nav-tab:not(:last-child) {
  padding: 20px 25px;
  margin: 0;
  border-right: unset;
 
  }

  .nav-tab:last-child {
  padding: 15px 25px;
  }

  .menu-btn {
  position: relative;
  display: block;
  margin: 0;
  width: 30px;
  height: 45px;
  cursor: pointer;
  z-index: 2;
  padding-top: 38px;
  padding-right:38px;
  border-radius: 10px;
  }

  .menu-btn .menu {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #faead6;
  }

  .menu-btn .menu:nth-child(2) {
  margin-top: 4px;
  opacity: 1;
  }

  .menu-btn .menu:nth-child(3) {
  margin-top: 4px;
  }

  #menuToggle:checked + .menu-btn .menu {
  transition: transform 0.2s ease;

  }

  #menuToggle:checked + .menu-btn .menu:nth-child(1) {
  transform: translate3d(0, 6px, 0) rotate(45deg);

  }

  #menuToggle:checked + .menu-btn .menu:nth-child(2) {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
  }

  #menuToggle:checked + .menu-btn .menu:nth-child(3) {
  transform: translate3d(0, -6px, 0) rotate(-45deg);
  }

  #menuToggle:checked ~ .nav-container {
  z-index: 1;
  display: flex;
  animation: menu-slide-left 0.3s ease;

  }
  @keyframes menu-slide-left {
  0% {transform: translateX(200px);}
  to {transform: translateX(0);}

  }

  .background-video { display:none}
  
   #hautcomm{
    font-size:1.5rem;
    text-align: center;
    margin-right:auto;
    margin-left: auto;
    margin-top:37%;
    margin-bottom:5%;
    line-height:1.5rem;
    z-index:1
  }

  .italhaut {font-size: .8rem; display:none;}


  .mainlanding {
    margin-top:15%
  }

  h1 {margin-top:30%;
      font-size:2.2rem}

  h2 {font-size: 1.5rem;}

  h3 {padding-top:10%;
      font-size:1.5rem}

  h4 {font-size: 1.5rem;
      padding-top: 10%;}

 #titredroite {  font-size:.9rem}        

 .texteanime {padding-top:10%;
    font-size:1.3rem; letter-spacing: -1px;}
      
  i {font-size:2em} 

  ul {
    margin-left:1px
   }
   .ital { font-size:.8rem}
   .container {
      width:98%; 
      text-align:center; 
      margin-right:auto; 
      margin-left:auto; 
      display:block}

  .slider .image-items .image img{
      width: 78%;
      }

  .landingtext{
      font-size: 1.2rem; 
      text-align: left;
      padding-top: 10px;
      }

  .imglanding {
      width: 10%;
      text-align: center;
      clear: both;
      margin-bottom: 11%;
      margin-top: 3%;}
      
  .arrowButton{ transform: translateY(-90%);}

  .arrowButton.left{
        left: -3% !important;   }
          
  .arrowButton.right{
        right: -3% !important;}


.blue {display:block}

.fictif {display: block;}

.imgfooter {width:15%}

div#quad { 
  background-color: #fAEAD6; 
  font-size: 0; width: 90%; 
  margin: 0 auto;
}

div#quad figure figcaption { 
  margin: 0; opacity: 0; 
  background: #977665c6; 
  color: #fAEAD6; padding: 0.1rem; 
  font-size: 0.5rem; 
  position:absolute; 
   bottom:0; width: 100%;
  transition: 1s 1s opacity; 
  line-height: 1rem;
  font-weight: 200;
}

 div#quad figure.expanded figcaption {opacity:1}

.expanded { transform: scale(2.1); z-index: 5; background-color: #fAEAD6;}

.speech  {font-size:1.1rem}

#contact-section {
  display:block;}

.formonepage {
  background-image: none;

}  

#contactgauche {  
  width:90%}

.fondduformulaire {
  width:90%
}  

.mentionslegales {
  margin-top:25%;
  padding:1%
}

.mentionslegales h4 {
  margin:0;
  padding:0
}


/* page CV */

#cv {width:90%}

#hautcv {
  font-size: 2em;
  text-align: center;
  margin-right:auto;
  margin-left: auto;
  margin-top:30%
}

.deuxcol {
  display:block; 
  text-align:left
}

.colgauche {width:80%; text-align: left; padding:2%}

.coldroite {width:80%; text-align: left; padding:2%}

.colcentrer {
  text-align: center; width:80%; padding:2%;
  margin-bottom:14%;
  }

}









@media (min-width: 577px) and (max-width: 767px)

{
    
.petitlog {
     width:80%;
}    

.background-video { display:none}

.imagelogo {
  width:10%
 }
 
h1 {margin-top:30%;
  font-size:2.2rem}

h2 {font-size: 2rem;}

h3 {padding-top:10%;
  font-size:1.5rem}

h4 {font-size: 1.5rem;}

#titredroite {  font-size:.9rem}  

.texteanime {padding-top:10%;
  font-size:1.5rem; letter-spacing: -1px;}
  
i {font-size:2em} 

ul {
margin-left:1px
}

.ital {font-size:.8rem}

.italhaut {font-size:.8rem}

.nav-container {
    position: fixed;
    display: none;
    overflow-y: auto;
    z-index: -1;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background-color:#B5A092;
    border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;
    }

.nav-tabs {
  flex-direction: column;
  align-items: flex-end;
  margin-top: 80px;
  width: 100%;
  }

.nav-tab:not(:last-child) {
  padding: 20px 25px;
  margin: 0;
  border-right: unset;
  }

.nav-tab:last-child {
  padding: 15px 25px;
  }

.menu-btn {
  position: relative;
  display: block;
  margin: 0;
  width: 30px;
  height: 15px;
  cursor: pointer;
  z-index: 2;
  padding: 20px;
  border-radius: 10px;
  }

.menu-btn .menu {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #faead6;
  }

.menu-btn .menu:nth-child(2) {
  margin-top: 4px;
  opacity: 1;
  }

.menu-btn .menu:nth-child(3) {
  margin-top: 4px;
  }

#menuToggle:checked + .menu-btn .menu {
  transition: transform 0.2s ease;
  }

#menuToggle:checked + .menu-btn .menu:nth-child(1) {
  transform: translate3d(0, 6px, 0) rotate(45deg);
  }

#menuToggle:checked + .menu-btn .menu:nth-child(2) {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
  }

#menuToggle:checked + .menu-btn .menu:nth-child(3) {
  transform: translate3d(0, -6px, 0) rotate(-45deg);
  }

#menuToggle:checked ~ .nav-container {
  z-index: 1;
  display: flex;
  animation: menu-slide-left 0.3s ease;
  }

  @keyframes menu-slide-left {
  0% {transform: translateX(200px);}
  to {transform: translateX(0);}
  }

 #hautcomm{
    font-size: 3rem;
    text-align: center;
    margin-right:auto;
    margin-left: auto;
    margin-top:30%;
    margin-bottom:5%;
    line-height:3rem;
    z-index:1
  }
  
.mainlanding {
    margin-top:10%
  }

.container {
    width:98%; 
    text-align:center; 
    margin-right:auto; 
    margin-left:auto; 
    display:block}

      
i {font-size:2em} 


.slider .image-items .image img{
    width: 78%;
     }

.landingtext{
     font-size: 1.2rem; 
     text-align: left; 
     padding-top: 10px;
        }

.imglanding {
     width: 10%;
     text-align: center;
     clear: both;
      margin-bottom: 11%;
      margin-top: 3%;}
      
.arrowButton{ transform: translateY(-90%);}

.arrowButton.left{
        left: -3% !important;   }
          
.arrowButton.right{
        right: -3% !important;}

.blue {display:block}

.fictif {display: block;}

.imgfooter {width:15%}

#contact-section {
  display:block;}

#contactgauche {  
  width:90%}

.fondduformulaire {
  width:90%
} 

.mentionslegales {
  margin-top:15%;
  padding:1%
}

.mentionslegales h4 {
  margin:0;
  padding:0
}

/* page CV */

#cv {width:90%}

#hautcv {
  font-size: 2em;
  text-align: center;
  margin-right:auto;
  margin-left: auto;
  margin-top:22%
}

.deuxcol {
  display:block; 
  text-align:left
}

.colgauche {width:80%; text-align: left; padding:2%}

.coldroite {width:80%; text-align: left; padding:2%}

.colcentrer {
  text-align: center; width:80%; padding:2%;
  margin-bottom:12%;
  }


}













@media (min-width: 768px) and (max-width: 810px)

{

.petitlog {
     width:70%;
}


  .background-video { padding-top:9%}

  .imagelogo {
    width:20%
   }
   
  .logo-container {
    width:40%
  }

  .nav-container {
      position: fixed;
      display: none;
      overflow-y: auto;
      z-index: -1;
      top: 0;
      right: 0;
      width: 50vw;
      height: 100%;
      background-color:#B5A092;
      border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;
      }
  
  .nav-tabs {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 80px;
    width: 100%;
    }
  
  .nav-tab:not(:last-child) {
    padding: 20px 25px;
    margin: 0;
    border-right: unset;
    }
  
  .nav-tab:last-child {
    padding: 15px 25px;
    }
  
  .menu-btn {
    position: relative;
    display: block;
    margin: 0;
    width: 20px;
    height: 15px;
    cursor: pointer;
    z-index: 2;
    padding: 45px;
    border-radius: 10px;
    }
  
  .menu-btn .menu {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #faead6;
    }
  
    .menu-btn .menu:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
    }
  
    .menu-btn .menu:nth-child(3) {
    margin-top: 4px;
    }
  
    #menuToggle:checked + .menu-btn .menu {
    transition: transform 0.2s ease;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(1) {
    transform: translate3d(0, 6px, 0) rotate(45deg);
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(2) {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(3) {
    transform: translate3d(0, -6px, 0) rotate(-45deg);
    }
  
    #menuToggle:checked ~ .nav-container {
    z-index: 1;
    display: flex;
    animation: menu-slide-left 0.3s ease;
    }
    @keyframes menu-slide-left {
    0% {transform: translateX(200px);}
    to {transform: translateX(0);}
    }
  
  
.mainlanding {
    margin-top:9%
    }
 
h1 {margin-top:0;
  font-size:2.2rem}

h2 {font-size: 2rem;}

h3 {padding-top:10%;
  font-size:1.5rem}

h4 {font-size: 1.5rem;}


#titredroite {  font-size: 1rem}  

.texteanime {padding-top:10%;
  font-size:1.5rem}
  
i {font-size:2em} 

ul {
margin-left:1px
}
.ital {font-size:1rem}

.italhaut {font-size:1rem}

#hautcomm{
  font-size: 3.5rem;
  text-align: center;
  margin-right:auto;
  margin-left: auto;
  margin-top:5%;
  margin-bottom:5%;
  line-height:3.5rem;
  z-index:1
}

        
 i {font-size:2em} 
  
 .container {
    width:92%; 
    text-align:center; 
    margin-right:auto; 
    margin-left:auto; 
    display:block}

 .slider .image-items .image img{
    width: 78%; }

 .landingtext{
   font-size: 1.2em; 
    text-align: left; 
    padding-top: 10px; }
  
  .imglanding {
      width: 10%;
      text-align: center;
      clear: both;
      margin-bottom: 11%;
      margin-top: 3%;}
        
  .arrowButton{ transform: translateY(-90%);}
  
  .arrowButton.left{left: -3% !important;   }
  
  .arrowButton.right{right: -3% !important;}
  
  
.blue {display:block}

.fictif {display: block;}
  
.landingtext3 {
  margin-bottom:10%
}

.imgfooter {width:15%}

#contact-section {
  display:block;}

#contactgauche {  
  width:90%}

.fondduformulaire {
  width:90%
}  

.mentionslegales {
  margin-top:10%;
  padding:1%
}

.mentionslegales h4 {
  margin:0;
  padding:0
}

/* page CV */

#cv {width:90%}

#hautcv {
  font-size: 2em;
  text-align: center;
  margin-right:auto;
  margin-left: auto;
  margin-top:22%
}

.deuxcol {
  display:block; 
  text-align:left
}

.colgauche {width:80%; text-align: left; padding:2%}

.coldroite {width:80%; text-align: left; padding:2%}

.colcentrer {
  text-align: center; width:80%; padding:2%;
  margin-bottom:10%;
  }

}










@media (min-width: 811px) and (max-width: 1023px)



{
    
.petitlog {
     width:70%;
}
    
    
    
    .headeronepage {
width:100%;
overflow: hidden;
display:block;

}

  .imagelogo {
    width:12%
   }
  
  .logo-container {
    width:40%
  }
  .nav-container {
    position: fixed;
    display: none;
    overflow-y: auto;
     z-index: -1;
    top: 0;
    right: 0;
     width: 40vw;
     height: 100%;
    background-color:#B5A092;
    border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;
      }
  
  .nav-tabs {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 80px;
    width: 100%;
    }
  
  .nav-tab:not(:last-child) {
    padding: 20px 25px;
    margin: 0;
    border-right: unset;
    }
  
  .nav-tab:last-child {
    padding: 15px 25px;
    }
  
  .menu-btn {
    position: relative;
    display: block;
    margin: 0;
    width: 20px;
    height: 15px;
    cursor: pointer;
    z-index: 2;
    padding-right:48px;
    border-radius: 10px;
    }
  
  .menu-btn .menu {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: #faead6;
    }
  
    .menu-btn .menu:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
    }
  
    .menu-btn .menu:nth-child(3) {
    margin-top: 4px;
    }
  
    #menuToggle:checked + .menu-btn .menu {
    transition: transform 0.2s ease;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(1) {
    transform: translate3d(0, 6px, 0) rotate(45deg);
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(2) {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(3) {
    transform: translate3d(0, -6px, 0) rotate(-45deg);
    }
  
    #menuToggle:checked ~ .nav-container {
    z-index: 1;
    display: flex;
    animation: menu-slide-left 0.3s ease;
    }

    @keyframes menu-slide-left {
    0% {transform: translateX(200px);}
    to {transform: translateX(0);}
    }
  
  .backgroundvideo {padding-top:%}
  
   #hautcomm{
    font-size: 3.5rem;
    text-align: center;
    margin-right:auto;
    margin-left: auto;
    margin-top:5%;
    margin-bottom:5%;
    line-height:3.5rem;
    z-index:1
  }
  
    .mainlanding { margin-top:8%}
  
    h1 {margin-top:0;font-size:2.2rem}

    h2 {font-size: 2rem;}

    h3 {padding-top:10%;
      font-size:1.5rem}

    h4 {font-size: 1.5rem;}

    .texteanime {padding-top:10%;
      font-size:1.5rem}
      
    i {font-size:2em} 
    
    ul {
    margin-left:1px
    }

  .ital {font-size:1.1rem}

  .italhaut {font-size:1.1rem}
        
  i {font-size:2em} 
  
 .container {width:90%; 
    text-align:center; 
     margin-right:auto; 
     margin-left:auto; 
     display:block
    }

  .slider .image-items .image img { width: 78%; }

  .landingtext{
    font-size: 1.2em; 
     text-align: left; 
     padding-top: 10px;
     }
  
   .imglanding {
     width: 10%;
     text-align: center;
    clear: both;
     margin-bottom: 11%;
      margin-top: 3%;}
        
    .arrowButton{ transform: translateY(-90%);}
  
    .arrowButton.left{
          left: -3% !important;   }
            
    .arrowButton.right{
          right: -3% !important;}
  
  
  .blue {display:block}

  .imgblue {width:70%}

  .fictif {display: block;}
  
.landingtext3 {
  margin-bottom:10%
}
  
.imgfooter {width:15%}
  
#contact-section {
  display:block;}

#contactgauche {  
  width:90%}

.fondduformulaire {
  width:90%
}   

.mentionslegales {
  margin-top:10%;
  padding:1%
}

.mentionslegales h4 {
  margin:0;
  padding:0
}

/* page CV */

#cv {width:90%}


}










@media  (min-width:1024px) and (max-width:1600px)


{
    
    
.headeronepage {
width:100%;
overflow: hidden;
display:block;

}    

.imagelogo { width: 5%;}

.nav-tabs {

  display: block;
  font-weight: 400;
  font-size: 18px;
  list-style: none;
  padding-right: 50px;
  color: #fAEAD6;
  }

.nav-container {
  position: fixed;
  display: none;
  overflow-y: auto;
  z-index: -1;
  top: 0;
  right: 0;
  width: 40vw;
  height: 100%;
  background-color:#B5A092;
  border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;
  }
  
  .nav-tab:not(:last-child) {
    padding: 20px 25px;
    margin: 0;
    border-right: unset;
    }
  
  .nav-tab:last-child {
    padding: 15px 25px;
    }
  
  .menu-btn {
    position: relative;
    display: block;
    margin: 0;
    width: 20px;
    height: 15px;
    cursor: pointer;
    z-index: 2;
    border-radius: 10px;
    padding-right:58px
    }
  
  .menu-btn .menu {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: #faead6;
    }
  
    .menu-btn .menu:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
    }
  
    .menu-btn .menu:nth-child(3) {
    margin-top: 4px;
    }
  
    #menuToggle:checked + .menu-btn .menu {
    transition: transform 0.2s ease;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(1) {
    transform: translate3d(0, 6px, 0) rotate(45deg);
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(2) {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
    }
  
    #menuToggle:checked + .menu-btn .menu:nth-child(3) {
    transform: translate3d(0, -6px, 0) rotate(-45deg);
    }
  
    #menuToggle:checked ~ .nav-container {
    z-index: 1;
    display: flex;
    animation: menu-slide-left 0.3s ease;
    }
    @keyframes menu-slide-left {
    0% {transform: translateX(200px);}
    to {transform: translateX(0);}
    }
    
    .mainlanding {
      margin-top:6%
    }
  
    h1 {font-size:2.8rem; margin-top:0}

    h2 {font-size: 2.5rem;}

    h3 {padding-top:10%;
      font-size:2rem}

    h4 {font-size: 2rem;}

    .texteanime {padding-top:1%;
      font-size:2rem}
      
    i {font-size:2em} 
    
    ul {
    margin-left:1px
    }
    
    #hautcomm{
      font-size: 4.5rem;
      text-align: center;
      margin-right:auto;
      margin-left: auto;
      margin-top:5%;
      margin-bottom:5%;
      line-height:5rem;
      z-index:1
    }
    
    .ital {font-size:1.1rem}

    .italhaut {font-size:1.1rem}
        
     i {font-size:2em} 
  
    .container {width:98%; 
      text-align:center;
       margin-right:auto;
       margin-left:auto; 
       display:block}
  
      .slider .image-items .image img{
          width: 78%;
          }

    .landingtext{
        font-size: 1.2rem; 
        text-align: left; 
         padding-top: 10px;
         }
  
    .imglanding {
        width: 10%;
        text-align: center;
        clear: both;
        margin-bottom: 11%;
        margin-top: 3%;}
        
  .arrowButton{ transform: translateY(-90%);}
  
  .arrowButton.left{
    left: 2% !important;   }
            
  .arrowButton.right{
    right: 2% !important;}
  
  .blue {display:block}

  .imgblue {width:70%}

  .fictif {display: block;}

.landingtext3 {
  margin-bottom:10%
}


#contact-section {
  display:block;}

#contactgauche {  
  width:90%}

.fondduformulaire {
  width:90%
}   

#logodubas {
  width: 20%;
  margin-top: 3%;
}
.mentionslegales {
  margin-top:8%;
  padding:1%
}

.mentionslegales h4 {
  margin:0;
  padding:0
}

  }