@import url('./position-body-styles.css');

@media screen and (max-width:550px) and (min-width:320px){
    
    .hero {
    height:500px;
    background-position: center;
    position: relative;
    right:0;
    }
    
    #logo {
    height: 70px;
    margin-left:-1em;
    margin-top:-1em;
    }
    
    .hero h1 {
     margin-left:-3.1em;
     margin-top:-0.5em;
     font-size: 0.7rem;
    }
    
    .hero h2 {
    font-size: 2.3rem;
    margin-top:1em;
    }
    
    .hero h3 {
    font-size: 1.6rem;
    }
    
    img[src="images/fond-plus2.png"] {
    display:none;
    }
    
/*******                   A PROPOS                    **********/
    
   
    
    .overlay {
        margin-left:17%;
    }
    
    .a-propos {
        height:1050px;
    }
    
    .a-propos h4 {
        font-size: 1.5em;
        margin-top:-1em;
        margin-left:2em;

    }
    
    .a-propos p {
        font-size:0.9em;
        width:80%;
        text-align: justify;
        margin-left:2em;

    }
    
    /*******                     PROJETS                       **********/

/*******                  NATURE BOUTURE                         **********/
    
    .nature-bouture {
        margin-top:-34em;
        margin-left:-30%;
        width:180%;
        height:500px;

    }
    
     .nature-bouture h4 {
        font-size: 1.5em;
        margin-left:-4em;
        margin-top:-6em;
    }
    
    .nature-bouture h5 {
        font-size: 1.4em;
        margin-left:-4.5em;
    }
    
/*******                  TERRE GOURMANDE                      **********/    
    
    .terre-gourmande {
        margin-top:-10em;
        margin-left:-32%;
        width:135%;
        height:400px;
    }
    
      .terre-gourmande h4 {
        font-size: 1.5em;
        margin-left:2em;
        margin-top:-0em;
      }
    
     .terre-gourmande h5 {
        font-size: 1.4em;
        margin-left:2.5em;
    }
    
/*******                  GREEN LIFE                       **********/    
    
    .green-life {
        margin-top:-3em;
        margin-left:-35%;
        width:160%;
        height:400px;

        }
    
    .green-life h4 {
        font-size: 1.5em;
        margin-left:2em;
        margin-top:-0em;
    }
    
    .green-life h5 {
        font-size: 1.4em;
        margin-left:2.5em;
    }
    
    /*******                  ENCRE DES COTEAUX                        **********/
    
    .encre-des-coteaux {
        margin-top:-3em;
        margin-left:-32%;
        width:160%;
        height:650px;

    }
    
    .encre-des-coteaux h4 {
        font-size: 1.5em;
        margin-left:0em;
        margin-top:-13em;
    }
    
   .encre-des-coteaux h5 {
        font-size: 1.4em;
        margin-left:0em;
    }
    
/*******                  PHOTOS                       **********/    
    
    .photos {
        margin-top:-20em;
        margin-left:-25%;
        width:145%;
        height:350px;
        margin-bottom:20em;
    }
    
     .photos h4 {
        font-size: 1.5em;
        margin-left:0em;
        padding-top:10em;
    }
    
    .photos h5 {
        font-size: 1.4em;
        margin-left:0em;
    }
}