@import url('https://fonts.googleapis.com/css?family=Lato:100,400,900');
@import url('./position-body-styles.css');


/*******                   HEADER/HERO                  **********/

.hero {
    background-image: url(../images/hero.jpg);
    /*background-attachment:fixed;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    height: 1100px;
}



#logo {
    padding: 2rem 2rem 0.4rem 2rem;
    margin-left: 1rem;
    height: 90px;
}

@media screen and (max-width:1600px){
    #logo {
    height: 85px;
    }
}

@media screen and (max-width:1260px){
    #logo {
    height: 80px;
    }
}

.hero h1 {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 100;
    padding-left: 3.4rem;
}
@media screen and (max-width:1600px){
    .hero h1 {
    font-size: 0.9rem;
    }
}

@media screen and (max-width:1260px){
    .hero h1 {
    font-size: 0.8rem;
    }
}


nav {
    float: right;
    margin: -3em 0;
    margin-right: 5em;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    z-index: 3;
    position: relative;
}

@media screen and (max-width:800px) {
    nav {
    display:none;
    }
}

nav a {
    padding: 4em;
    font-weight: 400;
}

nav a:hover {
    font-weight: bold;
}

/*------------------------------------------
   animation-titre-hero
----------------------------------------*/

.animation-titre-hero {
  animation-name: pulse;
  animation-duration: 5s;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}


.hero h2 {
    font-family: 'Lato', sans-serif;
    padding-top: 15%;
    font-size: 4.5em;
    font-weight: bold;
    display: flex;
    justify-content: center;
}
@media screen and (max-width:1700px){
    .hero h2{
    margin-top:1em;
    }
}

@media screen and (max-width:1600px){
    .hero h2{
    margin-top:1em;
    }
}

@media screen and (max-width:1400px){
    .hero h2{
    margin-top:2em;
    }
}

@media screen and (max-width:1260px){
    .hero h2{
    font-size: 4em;
    }
}

.hero h3 {
    font-family: 'Lato', sans-serif;
    display: flex;
    justify-content: center;
    font-size: 3em;
    font-weight: 100;
}

@media screen and (max-width:1260px){
    .hero h3{
    font-size: 2.5em;
    }
}


img[src="images/fond-plus2.png"] {
    margin-top: -600px;
    height: 150%;
    width: 150%;
    position:fixed;
    display:block;
}




/*******                   A PROPOS                    **********/



/* centrage des titres dans a propos ? */

.titres {
    margin-left: 11.3%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin-left: 11.3%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
}

.a-propos {
    background-color: white;
    transform: rotate(-5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -7%;
    height: 1000px;
    
}

@media screen and (max-width:1400px) and (min-width:1200px){
.a-propos{
        height:1000px;
    }
}

.a-propos h4 {
    transform: rotate(5deg);
    font-family: 'Lato', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    padding-top: 4.5em;
}


@media screen and (max-width:1750px){
    .a-propos h4 {
        padding-top:4em;
}
}

@media screen and (max-width:1600px){
    .a-propos h4 {
        font-size: 2em;
}
}

@media screen and (max-width:1400px){
    .a-propos h4{
    }
}

.a-propos p {
    transform: rotate(5deg);
    width: 32%;
    padding-top: 2em;
    font-family: 'Lato', sans-serif;
    weight: 100;
    text-align: center;
    font-size:1.1em;
}

@media screen and (max-width:1600px){
    .a-propos p {
        font-size: 1em;
}
}

@media screen and (max-width:1400px){
    .a-propos p{
        font-size: 1em;
    }
}

@media screen and (max-width:1260px){
    .a-propos p{
        font-size: 1em;
        width:50%;
    }
}



/*******                     PROJETS                       **********/


/*******                  NATURE BOUTURE                      **********/

.nature-bouture {
    transform: rotate(5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -15em;
    height: 1100px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.nature-bouture:hover .image {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.nature-bouture .image {
    background-image: url(../images/nature-bouture-couverture.png);
    height: 110%;
    width: 110%;
    background-repeat: no-repeat;
    background-size:cover;
    margin: -5px -10px -10px -5px;
    transition: 0.5s;
}

@media screen and (max-width:1600px){
    .nature-bouture {
        margin-top:-22em;
        margin-left:-17%;
    }
}

@media screen and (max-width:1400px){
    .nature-bouture {
        margin-top:-25em;
        transform:rotate(4deg);
        width:130%;
        height: 900px;
        padding-bottom:20%;
        margin-left:-19%;
    }
}

@media screen and (max-width:1260px){
    .nature-bouture{
        margin-top:-25em;
    }
}
@media screen and (max-width:1000px){
    .nature-bouture{
        transform:rotate(3deg);
        width:140%;
    }
}

.nature-bouture h4 {
    font-family: 'Lato', sans-serif;
    font-size: 2.7em;
    font-weight: bold;
    transform: rotate(-5deg);
    margin-top: -6em;
}
@media screen and (max-width:1600px){
    .nature-bouture h4 {
        margin-top:-9em;
        font-size: 2.5em;
    }
}

@media screen and (max-width:1400px){
    .nature-bouture h4{
        transform:rotate(-4deg);
    }
}

@media screen and (max-width:1260px){
    .nature-bouture h4{
        margin-top:-12em;
    }
}
@media screen and (max-width:1000px){
    .nature-bouture h4{
        margin-top:-16em;
        transform:rotate(-3deg);
        font-size: 2em;
        margin-right: -15%;
    }
}

.nature-bouture h4 .encadre {
    background-color: #f2ceca;
    padding: 0 10px;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(90deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    45% {
        -webkit-transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    70% {
        -webkit-transform: rotate(270deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}



.nature-bouture h5 {
    font-family: 'Lato', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    color: #fff;
    transform: rotate(-5deg);
}
@media screen and (max-width:1600px){
    .nature-bouture h5 {
    }
}

@media screen and (max-width:1400px){
    .nature-bouture h5{
        transform:rotate(-4deg);
        font-size: 2em;
    }
}

@media screen and (max-width:1260px){
    .nature-bouture h5{
    }
}
@media screen and (max-width:1000px){
    .nature-bouture h5{
        transform:rotate(-3deg);
        font-size: 1.6em;
        margin-right: -15%;
    }
}

.nature-bouture h5 span {
    background-color: black;
    padding: 0 10px;
}


/*******                  TERRE GOURMANDE                       **********/

.terre-gourmande {
    transform: rotate(-5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -18em;
    height: 1100px;
    display: flex;
    overflow: hidden;
    position: relative;
}


.terre-gourmande:hover .image {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.terre-gourmande .image{
    background-image: url(../images/terre-gourmande-couverture.png);
    height: 110%;
    width: 110%;
    background-repeat: no-repeat;
    background-size:cover;
    margin: -5px -10px -10px -5px;
    transition: 0.5s;
}

@media screen and (max-width:1600px){
    .terre-gourmande{
        margin-top:-24em;
        width:125%;
        transform:rotate(-5deg);
    }
}

@media screen and (max-width:1400px){
    .terre-gourmande{
        margin-top:-28em;
        transform:rotate(-4deg);
    }
}

@media screen and (max-width:1260px){
    .terre-gourmande{
        width:120%;
        margin-left:-13%;
        margin-top:-33em;
    }
}

@media screen and (max-width:1070px){
    .terre-gourmande{
        width:115%;
        margin-top:-35em;
        margin-left:-10%;
        transform:rotate(-3deg);
    }
}

.terre-gourmande h4 {
    transform: rotate(5deg);
    font-family: 'Lato', sans-serif;
    font-size: 2.7em;
    font-weight: bold;
    margin-top: -5em;
}

@media screen and (max-width:1600px){
    .terre-gourmande h4 {
        font-size: 2.5em;
    }
}

@media screen and (max-width:1400px){
    .terre-gourmande h4{
        transform:rotate(4deg);
    }
}

@media screen and (max-width:1260px){
    .terre-gourmande h4{
        margin-top:-9em;
    }
}
@media screen and (max-width:1070px){
    .terre-gourmande h4{
        margin-top:-12em;
        transform:rotate(3deg);
        font-size: 2em;
    }
}

.terre-gourmande h4 .encadre {
    background-color: #f2ceca;
    padding: 0 10px;
}

.terre-gourmande h5 {
    font-family: 'Lato', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    color: #fff;
    transform: rotate(5deg);
}

@media screen and (max-width:1600px){
    .terre-gourmande h5 {
    }
}

@media screen and (max-width:1400px){
    .terre-gourmande h5{
        font-size: 2em;
        transform:rotate(4deg);

    }
}

@media screen and (max-width:1260px){
    .terre-gourmande h5{
    }
}
@media screen and (max-width:1070px){
    .terre-gourmande h5{
        font-size: 1.6em;
        transform:rotate(3deg);

    }
}

.terre-gourmande h5 span {
    background-color: black;
    padding: 0 10px;
}


/*******                  GREEN LIFE                       **********/

.green-life {
    transform: rotate(-5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -18em;
    height: 1100px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.green-life:hover .image {
-webkit-filter: blur(5px);
  filter: blur(5px);
}

.green-life .image{
    background-image: url(../images/green-life-couverture.png);
    height: 110%;
    width: 110%;
    background-repeat: no-repeat;
    background-size:cover;
    margin: -5px -10px -10px -5px;
    transition: 0.5s;
}

.green-life h4 {
    transform: rotate(5deg);
    font-family: 'Lato', sans-serif;
    font-size: 2.7em;
    font-weight: bold;
    margin-top: -6em;
}

@media screen and (max-width:1600px){
    .green-life h4 {
    margin-top:-7.5em;
    }
}

@media screen and (max-width:1400px){
    .green-life h4{
        font-size: 2.5em;
        margin-top:-9em;
    }
}

@media screen and (max-width:1260px){
    .green-life h4{
        margin-top:-13em;
    }
}
@media screen and (max-width:1070px){
    .green-life h4{
        margin-top:-17em;
        font-size: 2em;
    }
}

.green-life h4 .encadre {
    background-color: #f2ceca;
    padding: 0 10px;
}

.green-life h5 {
    font-family: 'Lato', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    color: #fff;
    transform: rotate(5deg);
}

@media screen and (max-width:1600px){
    .green-life h5 {
    }
}

@media screen and (max-width:1400px){
    .green-life h5{
        font-size: 2em;
    }
}

@media screen and (max-width:1260px){
    .green-life h5{
    }
}
@media screen and (max-width:1070px){
    .green-life h5{
        font-size: 1.6em;
    }
}

.green-life h5 span {
    background-color: black;
    padding: 0 10px;
}


/*******                  ENCRE DES COTEAUX                        **********/

.encre-des-coteaux {
    background-image: url(../images/encre-des-coteaux.jpg);
   transform: rotate(5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -18em;
    height: 1100px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.encre-des-coteaux:hover .image {
    -webkit-filter: blur(5px);
  filter: blur(5px);
}

.encre-des-coteaux .image{
    background-image: url(../images/encre-des-coteaux.jpg);
    height: 110%;
    width: 110%;
    background-repeat: no-repeat;
    background-size:cover;
    margin: -5px -10px -10px -5px;
    transition: 0.5s;
}

@media screen and (max-width:1600px){
    .encre-des-coteaux{
        margin-top:-24em;
        width:125%;
        transform:rotate(5deg);
    }
}

@media screen and (max-width:1400px){
    .encre-des-coteaux{
        margin-top:-28em;
        transform:rotate(4deg);
    }
}

@media screen and (max-width:1260px){
    .encre-des-coteaux{
        width:120%;
        margin-left:-13%;
        margin-top:-33em;
    }
}

@media screen and (max-width:1070px){
    .encre-des-coteaux{
        width:115%;
        margin-top:-35em;
        margin-left:-10%;
        transform:rotate(3deg);
    }
}



.encre-des-coteaux h4 {
    transform: rotate(-5deg);
    font-family: 'Lato', sans-serif;
    font-size: 2.7em;
    font-weight: bold;
    margin-top: -5em;
}

@media screen and (max-width:1600px){
    .encre-des-coteaux h4 {
        margin-top:-8em;
    }
}

@media screen and (max-width:1400px){
    .encre-des-coteaux h4{
        transform:rotate(-4deg);
        font-size: 2.5em;
        margin-top:-10em;
    }
}

@media screen and (max-width:1260px){
    .encre-des-coteaux h4{
        margin-top:-12em;
    }
}
@media screen and (max-width:1070px){
    .encre-des-coteaux h4{
        transform:rotate(-3deg);
        font-size: 2em;
        margin-top:-15em;
    }
}

.encre-des-coteaux h4 .encadre {
    background-color: #f2ceca;
    padding: 0 10px;
}

.encre-des-coteaux h5 {
    font-family: 'Lato', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    color: #fff;
    transform: rotate(-5deg);
}

@media screen and (max-width:1600px){
    .encre-des-coteaux h5 {
    }
}

@media screen and (max-width:1400px){
    .encre-des-coteaux h5{
        font-size: 2em;
        transform:rotate(-4deg);
    }
}

@media screen and (max-width:1260px){
    .encre-des-coteaux h5{
    }
}
@media screen and (max-width:1070px){
    .encre-des-coteaux h5{
        font-size: 1.6em;
        transform:rotate(-3deg);
    }
}

.encre-des-coteaux h5 span {
    background-color: black;
    padding: 0 10px;
}


/*******                  PHOTOS                       **********/

.photos {
    transform: rotate(-5deg);
    width: 130%;
    margin-left: -15%;
    margin-top: -18em;
    height: 900px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.photos:hover .image {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.photos .image{
    background-image: url(../images/photographie-lotus.jpg);
    height: 110%;
    width: 110%;
    background-repeat: no-repeat;
    background-size:cover;
    margin: -5px -10px -10px -5px;
    transition: 0.5s;
}

@media screen and (max-width:1600px){
    .photos{
        margin-top:-24em;
        width:145%;
        transform:rotate(-5deg);
        height:700px;
    }
}

@media screen and (max-width:1400px){
    .photos{
        margin-top:-28em;
        transform:rotate(-4deg);
    }
}

@media screen and (max-width:1260px){
    .photos{
        width:120%;
        margin-left:-13%;
        margin-top:-33em;
    }
}

@media screen and (max-width:1070px){
    .photos{
        width:115%;
        margin-top:-35em;
        margin-left:-10%;
        transform:rotate(-3deg);
    }
}



.photos h4 {
    transform: rotate(5deg);
    font-family: 'Lato', sans-serif;
    font-size: 2.7em;
    font-weight: bold;
}
@media screen and (max-width:1600px){
    .photos h4 {
    }
}

@media screen and (max-width:1400px){
    .photos h4{
        transform:rotate(4deg);
        font-size: 2.5em;
    }
}

@media screen and (max-width:1260px){
    .photos h4{
        margin-top:-0em;
    }
}
@media screen and (max-width:1070px){
    .photos h4{
        margin-top:-9em;
        transform:rotate(3deg);
        font-size: 2em;
    }
}

.photos h4 .encadre {
    background-color: #f2ceca;
    padding: 0 10px;
}

.photos h5 {
    font-family: 'Lato', sans-serif;
    font-size: 2.3em;
    font-weight: 100;
    color: #fff;
    transform: rotate(5deg);
}
@media screen and (max-width:1600px){
    .photos h5 {
    }
}

@media screen and (max-width:1400px){
    .photos h5{
        font-size: 2em;
        transform:rotate(4deg);
    }
}

@media screen and (max-width:1260px){
    .photos h5{
    }
}
@media screen and (max-width:1070px){
    .photos h5{
        font-size: 1.6em;
        transform:rotate(3deg);
    }
}

.photos h5 span {
    background-color: black;
    padding: 0 10px;
}


/*******                  CONTACT                       **********/

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5em;
}
    
.contact h4 {
    font-family: 'Lato', sans-serif;
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0 0.5em 0;
}

.contact h5 {
    font-family: 'Lato', sans-serif;
    font-size: 1.5em;
    font-weight: 100;
}


.contact a,
.contact address {
    font-family: 'Lato', sans-serif;
    text-align: center;
    ;
}

.contact img {
    height: 30px;
    margin: 1em 0 0 0;
    display:block;
}


/*******                  FOOTER                       **********/

.footer {
    background-color: #434343;
     height: 100px;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*change le sens des parametres align-items et justify-content*/
}



img[src="images/fb.svg"] {
    z-index: 1;
    width: 50%;
    height: 100%;
}

.footer .instagram {
        width: 40px;
        height: 100%;
}

.footer .linkedin {
      width: 35px;
        height: 100%;

}