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

    .header {
      background-color: rgb(255, 255, 255);
      box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
      position: fixed;
      width: 100%;
      z-index: 3;
    }
  
    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      background-color: #fff;
    }
  
    .header li a {
      display: block;
      padding: 20px 20px;
      border-right: 1px solid #f4f4f4;
      text-decoration: none;
      color: rgb(245, 158, 59);
    }
    
    .header li a:hover, .header .menu-btn:hover {background-color: #f4f4f4;}
  
    .header .logo {
      display: block;
      float: left;
      font-size: 2em;
      padding: 10px 20px;
      text-decoration: none;
      color: orange;
    }
    /*------------------------------ MENU ------------------------------*/
  
    .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height .2s ease-out;
    }
  
    .menu ul li {display: inherit;}
  
    .menu a {
      display: block;
      color: black;
    }
  
    /*------------------------------ MENU ICON ------------------------------*/
  
    .header .menu-icon {
      cursor: pointer;
      float: right;
      padding: 28px 20px;
      position: relative;
      user-select: none;
    }
  
    .header .menu-icon .navicon {
      background: #333;
      display: block;
      height: 2px;
      position: relative;
      transition: .2s ease-out;
      width: 18px;
    }
  
    .header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
      background: #333;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }
  
    .header .menu-icon .navicon:before {top: 5px;}
    .header .menu-icon .navicon:after {top: -5px;}
  
    /*------------------------------ MENU BOUTON DROIT ------------------------------*/
    .header .menu-btn {display: none;}
    .header .menu-btn:checked~.menu {max-height: 400px;}
    .header .menu-btn:checked~.menu-icon .navicon {background: transparent;}
    .header .menu-btn:checked~.menu-icon .navicon:before {transform: rotate(-45deg);}
    .header .menu-btn:checked~.menu-icon .navicon:after {transform: rotate(45deg);}
    .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {top: 0;}
  	
  /*------------------------------ SLIDES ------------------------------*/
  
  	.in{display : none;}
    #slide2, #slide3{overflow: hidden;}
    #slide2 h2, p, li{margin-left: 10%;}
    .img_floatMob{
        width: 40%;
        margin-left:16%;
    }
    .img_hist{
        width: 50%;
        margin:auto;
        margin-left:5%;
    }
    #slide3 p{margin-right:40%;}
    .button_contact {display:none;}
    #slide5, #slide6 .p_slide6{font-size: .8em;}
    #slide5, #slide6{
        height: 500px;
        overflow: hidden;
    }
    #slide5 .slide_inside{font-size: 1.2em;}
  	#button, #button2{ display : none;}
  .img_centrale{display:none;}
    .centralM2, .centralM{
        float: right;
        width: 20%;
        margin:1%;
        margin-top:10%;
    }
   .text_align{margin-left:32%;}
    #slide_centrale2{
        overflow: hidden;
        width: 100%;
    }
    #slide_centrale2 h3{
        margin-left:10%;
      	text-align:center;
    }
  	#slide8 .slide_inside{width: 80%;}
  	.mach_conv ul{width: 80%;}
    .mach_convO ul{width: 90%;}
  	div_sav{margin-right:6%;}
    #slide5_sav .list li{
        font-size: .8em;
        font-weight: bold;
    }
    #slide5_sav ul{
        overflow: hidden;
    }
    .inv{display:none;}
    .img_float2{display:none;}
  	#slide6_sav{width:51%;}
    #slide6_sav p{
        font-size: .9em;
        font-weight: bold;
    }
    .monbouton{
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        color:orange;
    }
  }