*{
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
}
@media  screen and (min-width: 320px){
    body{
            position: relative;
            height: 100%;
            max-width: 100%;
            font-family: 'Roboto', Arial, sans-serif;
        }
#scroll-btn {       
    opacity: 0;   
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: brown;
    position: fixed;
    bottom: 5%;
    right: 2%;    
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    font: normal 25px monospace;       
    transition: opacity 0.5s, transform 0.5s;
}
#scroll-btn.show {      
    opacity: 1;  
    transition: opacity 1s, transform 1s;     
}
    
      #container{
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        perspective: 2px;
        -webkit-perspective: 2px;
        -ms-perspective: 2px;
        -moz-perspective: 2px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        scroll-behavior: smooth;
        -webkit-scroll-behavior: smooth;
        -ms-scroll-behavior: smooth;
        -moz-scroll-behavior: smooth;
        background-color: #022c44;
      }
      .section{
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -moz-flexbox;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        position: relative;
        height: 70vh;
        color: #fff;
        text-shadow: 0 0 5px #000;
      }
      .parallax::before{
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: top center;
        z-index: -1;
      }
      .static{
        background-color: brown;
        max-width: 100%;
        flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -moz-flex-direction: column;
        margin-bottom: -80px;
      }
      .static h2{
        text-align: center;
        margin-bottom: 15px;
        /* alignement oblique inverse au bloc */
        transform: skewY(-10deg);
        -webkit-transform: skewY(-10deg);
        -ms-transform: skewY(-10deg);
        -moz-transform: skewY(-10deg);
    }
    .static p{
           text-align: justify;
           line-height: 25px;
           margin: 15px;
           /* alignement oblique inverse au bloc */
           transform: skewY(-10deg);
           -webkit-transform: skewY(-10deg);
           -ms-transform: skewY(-10deg);
           -moz-transform: skewY(-10deg);    
    }
        .text1{
          position: absolute;
          top: 45%;
          margin: auto;
          text-align: center;
          height: 80px;
          width: 100%;
          opacity: 0;
          animation: fadeIn 2s ease-in-out forwards;
          -webkit-animation: fadeIn 2s ease-in-out forwards;
          -ms-animation: fadeIn 2s ease-in-out forwards;
          -moz-animation: fadeIn 2s ease-in-out forwards;
        }
        @keyframes fadeIn{
          from {opacity: 0;}
          to {opacity: 1;}
        }
        @-webkit-keyframes fadeIn{
          from {opacity: 0;}
          to {opacity: 1;}
        }
        @-ms-keyframes fadeIn{
          from {opacity: 0;}
          to {opacity: 1;}
        }
        @-moz-keyframes fadeIn{
          from {opacity: 0;}
          to {opacity: 1;}
        }
        .text1 span{
          height: 80px;
          width: 400px;
          margin: auto;
          padding: 20px;
          background-color: brown;
          color: #fff;
          font-size: 32px;
          letter-spacing: 6px;
        }
        .stat1{
          color: #fc6202;
          background-color: #022c44;
          font-size: 16px;
          height: 300px;
          justify-content: center;
          -webkit-justify-content: center;
          -ms-justify-content: center;
          -moz-justify-content: center;
          /* alignement oblique du bloc */
          transform: skewY(10deg);
          -webkit-transform: skewY(10deg);
          -ms-transform: skewY(10deg);
          -moz-transform: skewY(10deg);
        }
        .stat2{
          transform: skewY(-10deg);
          -webkit-transform: skewY(-10deg);
          -ms-transform: skewY(-10deg);
          -moz-transform: skewY(-10deg);
          height: auto;
          padding: 45px 0;
        }
        .stat2 aside{
          transform: skewY(10deg);
          -webkit-transform: skewY(10deg);
          -ms-transform: skewY(10deg);
          -moz-transform: skewY(10deg);
        }
        .stat2 li p{
          transform: skewY(0deg);
          -webkit-transform: skewY(0deg);
          -ms-transform: skewY(0deg);
          -moz-transform: skewY(0deg);
        }
        .bg1::before {
          /* The image used */
          background-image: url('../images/background-montagne.jpg');
          /* Set a specific height */
        }
        .bg2::before {
          /* The image used */
          background-image: url('../images/biographie-venise.jpg');
          /* Set a specific height */
        }
        .bg3::before {
          /* The image used */
          background-image: url('../images/biographie.jpg');
          /* Set a specific height */
        }
      .bg4::before {
        /* The image used */
        background-image: url('../images/livraison-projet.jpg');
        /* Set a specific height */
      }
  .text{width:100%;margin:auto;}
	.text ul{padding:10px;}
	.text li{
		color:#fff;
		width: 100%;
		height:auto;
		border-bottom:thin dotted #fff;
		padding:10px 0px;
	}
	.text-domain{
	
		height:0px;
		overflow: hidden;
		transition: height 500ms linear;
		-webkit-transition: height 500ms linear;
    -ms-transition: height 500ms linear;
    -moz-transition: height 500ms linear;
	}
	
	.target-show, .target-hide{display:none;}
	
	a.arrow-open, a.arrow-close{display:block;float:right;width:10%;text-align:center;}
	a.arrow-close{display:none;}
	
	.target-show:target ~ a.arrow-open{display:none;}
	.target-show:target ~ a.arrow-close{display:block;}
	
	.target-show:target ~ .text-domain{height:110px;}
	.target-hide:target ~ .text-domain{height:0px;}
  .stat3{
		display:flex;
		display:-webkit-flex;
		display:-moz-box;
		display:-ms-flexbox;
		flex-direction: column ;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    background-color: brown;
    height: auto;
    padding: 45px 0;
    transform: skewY(10deg);
    -webkit-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
	}
	.stat3 h2{top:0;left:0;}
	.stat3 form{
    color:#fff;
    width:100%;
    margin:auto;
    text-align:center;
    transform: skewY(-10deg);
    -webkit-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
  }
	.stat3 legend{font-size:20px;}
	.stat3 input{
		display:block;
		font-size:16px;
		border:thin solid #fff;
		background-color:#002337;
		color:#fff;
		height:50px;
		width:100%;
		margin:20px auto;
		padding:5px;
	}
	.stat3 input:focus{border:thin solid #002337;box-shadow:-2px -2px 10px #fff, 2px 2px 10px #fff;}
	.stat3 input[type="submit"]:focus{box-shadow:0 0 0 transparent, 0 0 0 transparent;}
	.stat3 input::placeholder{color:#fff;opacity:0.7;font-style:italic;}
	.stat3 input[type="submit"]{background-color:#2767b1;cursor:pointer;}
	.stat3 input[type="submit"]:hover{background-color:#2767d9}
      footer{
        text-align: center;
        background-color: #022c44;
        min-height: 200px;
        padding: 45px 20px;
        color: hsla(0,0%,100%,.7);
        background-position: bottom;
        transform: skewY(-10deg);
        -webkit-transform: skewY(-10deg);
        -ms-transform: skewY(-10deg);
        -moz-transform: skewY(-10deg);
      }
      footer section{transform: skewY(10deg);}
      footer h3{
        color: #fff;
      }
      footer hr{
        width: 100%;
        height: 1px;
        background-color: hsla(0,0%,100%,.7);
      }
      footer .com p img{
        width: 200px;
      }
      footer .social{
        margin: 30px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      footer .social a{
        display: block;
        width: 40px;
        height: 40px;
      }
      footer .social a img{
        width: 100%;
        height: 100%;
      }
      footer .social a:nth-child(1){
        margin-left: 0;
      }
      .dmkt-whatsapp-button{
        position: fixed;
        bottom: -80px;
        left: -80px;
        width: 60px;
        height: 60px;
        z-index: 100;
        border-radius: 50%;
        animation:btn-whatsapp-bottom 500ms 10s linear forwards, btn-whatsapp-left 500ms 8s linear forwards;
      -webkit-animation:btn-whatsapp-bottom 500ms 10s linear forwards, btn-whatsapp-left 500ms 8s linear forwards;
      -moz-animation:btn-whatsapp-bottom 500ms 10s linear forwards, btn-whatsapp-left 500ms 8s linear forwards;
      -ms-animation:btn-whatsapp-bottom 500ms 10s linear forwards, btn-whatsapp-left 500ms 8s linear forwards;
    }
    /* animation apparition btn whatsapp */
    @keyframes btn-whatsapp-bottom{
        from{bottom:-80px;}
        to{bottom:0px;}
    }
    @-webkit-keyframes btn-whatsapp-bottom{
        from{bottom:-80px;}
        to{bottom:0px;}
    }
    @-moz-keyframes btn-whatsapp-bottom{
        from{bottom:-80px;}
        to{bottom:0px;}
    }
    @-ms-keyframes btn-whatsapp-bottom{
        from{bottom:-80px;}
        to{bottom:0px;}
    }
    @keyframes btn-whatsapp-left{
        from{left:-80px;}
        to{left:0px;}
    }
    @-webkit-keyframes btn-whatsapp-left{
        from{left:-80px;}
        to{left:0px;}
    }
    @-moz-keyframes btn-whatsapp-left{
        from{left:-80px;}
        to{left:0px;}
    }
    @-ms-keyframes btn-whatsapp-left{
        from{left:-80px;}
        to{left:0px;}
    }
    .dmkt-whatsapp-button:hover{
        opacity: 0.8;
      /*animation:btn-bottom 200ms infinite forwards, btn-left 200ms infinite forwards;*/
    }
    /* animation btn whatsapp qui bouge sur hover 
    @keyframes btn-bottom{
      0%{bottom:15px;}
      50%{bottom:12px}
      100%{bottom:15px;}
    }
    @keyframes btn-left{
      0%{left:15px;}
      50%{left:12px;}
      100%{left:15px;}
    }*/
    .dmkt-whatsapp-button a{
        display: block;
        width:100%;
        height: 100%;
    }
    .dmkt-whatsapp-button a img{
        max-width: 100%;
        height: auto;
    }
    .dmkt-whatsapp-button .fa-whatsapp:before {
        color:#fff;
        border-radius:50%;
        font-size:50px;
        background-color: #25D366;
        padding: 15px;
    }
    }
    @media screen and (min-width: 375px) 
    {
      
    }
    @media screen and (min-width: 500px) 
    {
      
    }
    @media screen and (min-width: 576px) 
    {
      
    }
    @media screen and (min-width: 768px) 
    {
      
    }
    @media screen and (min-width: 960px) 
    {
      
    }
    @media screen and (min-width: 1024px) {
      .stat1{
          transform: skewY(6deg);
          -webkit-transform: skewY(6deg);
          -ms-transform: skewY(6deg);
          -moz-transform: skewY(6deg);
    }
    .stat2{
      transform: skewY(-6deg);
      -webkit-transform: skewY(-6deg);
      -ms-transform: skewY(-6deg);
      -moz-transform: skewY(-6deg);
}
.stat3{
  transform: skewY(6deg);
  -webkit-transform: skewY(6deg);
  -ms-transform: skewY(6deg);
  -moz-transform: skewY(6deg);
}
footer{
  transform: skewY(-3deg);
      -webkit-transform: skewY(-3deg);
      -ms-transform: skewY(-3deg);
      -moz-transform: skewY(-3deg);
}
    .static h2, .static p{
          transform: skewY(-6deg);
          -webkit-transform: skewY(-6deg);
          -ms-transform: skewY(-6deg);
          -moz-transform: skewY(-6deg);  
    }
    .stat2 aside{
      transform: skewY(6deg);
      -webkit-transform: skewY(6deg);
      -ms-transform: skewY(6deg);
      -moz-transform: skewY(6deg);
}
.stat3 form{
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
  -ms-transform: skewY(-6deg);
  -moz-transform: skewY(-6deg);  
}
footer section{
  transform: skewY(3deg);
      -webkit-transform: skewY(3deg);
      -ms-transform: skewY(3deg);
      -moz-transform: skewY(3deg);
}
    .static h2{
      font-size: 50px;
    } 
    .static p{
      font-size: 40px;
    }
      #scroll-btn a{
        
        font-size: 32px;
      }
      .static{
        padding: 20px 150px;
        height: 70%;
      }
    }
    @media screen and (min-width: 1440px) 
    {
      footer .social{justify-content: space-around;}
    }