html{
  scroll-behavior: smooth;
}
html, body{
  height: 100%;
}

body{
  padding: 0;
  margin: 0;
  /*font-size: 18px;*/
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  /*font-weight: 300;*/
  font-style: normal;
  color: black;

}
/* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
}
ul, li{
  list-style: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  padding: 2em;
  min-height: 100%;
  display: flex;
}
.left{
  display: flex;
    flex-direction: column;
    justify-content: center;
}
.left header .logo{
  width: 75%;
  /*margin-bottom: 2em;*/

}
.left img{
  width: 100%;
}
.left section p.tagline {
  color: #b7a695;
  font-weight: 700;
  font-size: 1.2em;
  font-size: 6vw;
  line-height: 1.3em;
  letter-spacing: -0.75px;
  width: 103%;
}
.left section p.construction { 
  color: #4c6444;
  font-weight: 700;
  font-size: 5vw;
}
.left section .signature {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}
.left .signature .gauche{
  width: 47%;
}
.left .signature .droite{
  width: 47%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.left .signature h1 {
  color: #4c6444;
  font-size: 1em;
  font-size: 5vw;
  margin: 0;
  padding: 0;
  line-height: 1.2em;
}
.left .signature h2 {
  color: #b7a695;
  font-size: 0.8em;
  font-size: 4vw;
  margin: 0.5em 0 0;
  padding: 0;
  line-height: 1.2em;
}

.left a.contact {
  width: 100%;
  padding: 10px 20px;
  background: #4c6444;
  border-radius: 50px;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-top: 2em;
  font-weight: 400;
}
.left a:hover.contact{
  background: #5f7d55;
}

.left section .signature .gauche img {
  border-radius: 200px;
}
.left footer{
  margin-top: 1em;
  /*text-align: center;*/
}
.left footer small {
  font-size: 0.8em;

}
.right{
  display: none;
}
footer{
  color: #b7a695 ;
}




@media (min-width: 425px) {
  
}

/*/////// iPad 1, 2, Mini and Air ////////*/

@media (min-width: 768px){

  .wrapper {
    padding: 4em;
  }

  .left header .logo {
    width: 50%;
  }
  .left section p.tagline {
    font-size: 5vw;
  }
  .left section .signature {
    width: 75%;
  }
  .left section .signature h1{
    font-size: 4vw;
  }
  .left section .signature h2{
    font-size: 3vw;
  }
  .left footer{
    margin-top: 2em;
  }

}

@media (min-width: 1024px){

  .wrapper{
    justify-content: space-between;
    max-width: 960px;
        margin: auto;
  }
  .left{
    width: 40%
  }
      .left header .logo {
        width: 100%;
        margin-bottom: 2em;
    }
        .left section .signature {
        width: 100%;
    }
        .left section .signature h1 {
        font-size: 1.4em;
    }
    .left section .signature h2 {
        font-size: 1em;
    }

  .left section.texte{
    display: none;
  }
  .right{
    display: flex;
    width: 55%;
    flex-direction: column;
        justify-content: center;
  }
  .right section p.tagline {
  color: #b7a695;
  font-weight: 700;
  font-size: 2.1em;
  line-height: 1.3em;
  letter-spacing: -0.75px;
  width: 103%;
  margin: 0;
}
.right section p.construction { 
  color: #4c6444;
  font-weight: 700;
  font-size: 1.5em;
  margin: 2em 0 0;
}

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

@media only screen 
  and (min-device-width: 1280px) 
  and (max-device-height: 720px){

    
}

@media only screen 
  and (min-device-width: 1366px) {

}



/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

@media (min-width: 1280px){
  
}

@media (min-width: 1366px){
  
}

@media (min-width: 1440px) {
  
}

@media only screen 
  and (min-device-width: 1536px) 
  and (max-device-height: 864px){
    
}

@media screen and (max-height: 450px) {
  
  
}