*{box-sizing: border-box}
:root {
    --green: #3e840d;
    --lightGreen: #f0f5f1;
    --pastelGreen: #97c37f;
}
body, html {margin:0; background-color:rgb(255, 255, 255); font-family: 'Roboto Slab', serif; font-size:0px; position: relative; overflow-x: hidden; scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6{outline:none;font-weight:inherit;font-size:inherit;color:inherit;margin:0;padding:0;display:inline}
a {text-decoration: none; color: inherit;}
.wrapper {margin:0px auto; max-width: 1270px; width: 95%;}
.text-wrapper {max-width: 800px; padding: 40px 0;}
.title {font-size:32px}
.heading {font-size:25px}
.subtitle {font-size:20px}
.text {font-size:14px; line-height:22px; margin: 0;}
.white {color:#FFF}
.bg-white {background-color:#FFF}
.black {color:#000}
.bg-black {background-color:#000}
.green {color: var(--green);}
.bg-green {background-color: var(--green);}
.lightGreen {color: var(--lightGreen);}
.bg-lightGreen {background-color: var(--lightGreen);}
.pastelGreen {color: var(--pastelGreen);}
.bg-pastelGreen {background-color: var(--pastelGreen);}
.caps {text-transform:uppercase}
.bolder {font-weight:900}
.bold {font-weight:700}
.semi-bold {font-weight: 500;}
.light {font-weight:300}
.rtl {direction:rtl}
.ltr {direction:ltr}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.hidden {display: none !important; opacity: 0;}
.relative {position: relative;}

input, textarea, button {font-family: 'Roboto Slab', serif}
.greenline {margin-top: 10px; padding: 4px; background-color: #3e840d; border: none;}

.etiquette {margin-bottom: 15px;}

.cta {padding: 10px 30px; background-color: #3e840d; color: white; text-transform: uppercase; font-size: 14px; font-weight: bold; display: inline-block; margin-top: 40px;}
.cta:hover {background-color: #3f840dac; transition: ease-in-out .1s;}

.customInput {background-color: transparent; border: white 1px solid; color: white; padding: 6px 10px; min-width: 300px; background-image: url(../img/icone-enveloppe.svg); background-repeat: no-repeat; background-position: 98%; background-size: 8%;}
.customInput::placeholder {color: rgba(255, 255, 255, 0.537); font-family: 'Roboto Slab', serif;}
.subscribe-btn {border: none; padding: 7px 10px; background-color: white; margin: 10px 0 0 0; cursor: pointer;}

#navigation {}
#navigation .logo-container {width: 25%; margin: 40px auto;}
#navigation .logo-container-mobile {width: 25%; margin: 40px auto; display: none;}
#navigation .nav-wrapper {display: flex; justify-content: space-between;}
#navigation .nav-wrapper a:hover {color: #3e840d;}
#navigation .newsletter-container {}
#navigation .newsletter-container .newsletter-widget {display:inline-block; padding:5px 15px 15px; background-color: #3e840d; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.mobile-nav-wrapper {}

/*Burger-menu*/

.bg-menu-nav {display: none; width: 100%; position: fixed; z-index: 10000000; padding: 15px; text-align: right;}
.bg-menu-nav:hover {color: black;}

.burger-menu-container {display: none; position: relative; z-index: 1000000;}
.burger-menu-container .tabs {vertical-align: middle; margin-right: 20px;}
.burger-menu-container .burger-menu-wrapper {display: inline-block; vertical-align: middle; margin-right: 2px;}

.background-bg-menu {position: fixed; width: 100%; height: 54px; z-index: 50000; display: none;}

.btn {position: sticky; width: 30px; cursor: pointer;}
.bg-menu-span {display: block; width: 100%; border-radius: 3px; height: 3px; background: #3e840d; transition: all .3s; position: relative; border: 1px solid var(--wine);}
.bg-menu-span + .bg-menu-span {margin-top: 9px;}
.active .bg-menu-span:nth-child(1) {animation: ease .7s top forwards;}
.not-active .bg-menu-span:nth-child(1) {animation: ease .7s top-2 forwards;}
.active .bg-menu-span:nth-child(2) {animation: ease .7s scaled forwards;}
.not-active .bg-menu-span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
.active .bg-menu-span:nth-child(3) {animation: ease .7s bottom forwards;}
.not-active .bg-menu-span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

@keyframes top {0% {top: 0; transform: rotate(0);} 50% {top: 12px; transform: rotate(0);} 100% {top: 12px; transform: rotate(45deg);}}
@keyframes top-2 {0% {top: 12px; transform: rotate(45deg);} 50% {top: 12px; transform: rotate(0deg);} 100% {top: 0; transform: rotate(0deg);}}
@keyframes bottom {0% {bottom: 0; transform: rotate(0);} 50% {bottom: 12px; transform: rotate(0);} 100% {bottom: 12px; transform: rotate(135deg);}}
@keyframes bottom-2 {0% {bottom: 12px; transform: rotate(135deg);} 50% {bottom: 12px; transform: rotate(0);} 100% {bottom: 0; transform: rotate(0);}}
@keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);}}
@keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}}

.bg-menu {display: none; position: fixed; top:0; bottom:0; right:0; transition: left .6s; z-index: 100000; overflow-x: hidden;}
.bg-menu .article-container {display: inline-block; width: 49%; padding: 40px; box-sizing: border-box;}
.bg-menu-closed {left: 3000px;}
.bg-menu-opened {left: 0px;}
.bg-menu .menu {padding: 100px 40px;}
.bg-menu .menu .tabs {padding: 20px 0;}
.bg-menu .menu .tabs a {border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 5px 0;}
.bg-menu .menu .tabs a:hover {color: #97ab63;}
.bg-menu .bg-menu-content {padding: 200px 0 0 0;}
.bg-menu .bg-menu-content .bg-menu-tabs {margin: 20px 0;}

/*-------------------------------*/



.slideshow {display:inline-table; width:90%; max-width:1600px; padding:120px 0px 80px}
.slideshow .arrow {display:table-cell; width:5%; min-width:20px; vertical-align:middle; cursor:pointer}
.slideshow .arrow img {max-width:30px; width:100%}
.slider-container {display:table-cell; width:90%; vertical-align:middle; overflow:hidden}
.slider-container .slide-wrapper {white-space: nowrap; transition: ease-in-out .3s; overflow:hidden; scroll-behavior:smooth}
.slider-container .slide {white-space:initial; width:20%; display:inline-block; vertical-align:top; background:url(../img/white_dot.png) no-repeat center 40%; background-size:50%}
.slider-container .img-wrapper {width:90%; height:40vw; max-height:400px; background:#ccc; display:inline-block; overflow:hidden; position:relative}
.slider-container .slide .img {width:100%; object-fit:cover; object-position:center; height:100%}


.littleTree2 {min-width: 80px;}

.two-cell {margin-bottom: 40px;}
.two-cell .two-cell-container {display: inline-block; width: 50%; padding: 20px; vertical-align: middle;}

.multi-cell {}
.multi-cell-container {display: inline-block; width: 20%; vertical-align: top; padding: 30px;}
.multi-cell-container .bookImg {box-shadow: #3e840d -7px 7px 0px 0px;}

.realisation {}
.realisation .realisation-container {display: inline-block; vertical-align: top; width: 33.33%; padding: 30px;}
.realisation .realisation-container .realisation-block {cursor: pointer;}
.realisation .realisation-container .realisation-block .realTitle {display: flex; justify-content: space-between; align-items: center; padding: 15px 15px 0;}
.realisation .realisation-container .realisation-block .real-img {transform: translate(20px, 15px);}

.projets {}
.projets .projet-container {padding: 40px 0;}
.projets .projet-container .img-container {display: inline-block; width: 30%; vertical-align: middle; padding: 15px 0 15px 0;}
.projets .projet-container .img-container img {width: 100%; margin-left: 15px;}
.projets .projet-container .text-container {display: inline-block; width: 70%; vertical-align: middle; padding: 0 0 0 100px;}

@media (max-width:1000px) {
    .multi-cell-container {width: 33.33%;}
}

@media (max-width:900px) {
    .two-cell .two-cell-container {width: 100%;}
    .two-cell .two-cell-container:first-of-type {padding-top: 60px;}

    #navigation .logo-container {width: 40%;}
    #navigation .nav-wrapper {display: none;}

    .bg-menu {display: initial;}
    .burger-menu-container {display: inline-block;}

    .realisation .realisation-container {width: 50%;}

    #navigation .logo-container {display: none;}
    #navigation .logo-container-mobile {display: block; margin: 0; width: 40%;}
    .mobile-nav-wrapper {display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
}

@media (max-width:700px) {
    .projets .projet-container {padding: 10px;}
    .projets .projet-container .img-container {width: 100%; padding: 10px;}
    .projets .projet-container .img-container img {margin-left: 0px;}
    .projets .projet-container .text-container {width: 100%; padding: 20px 0;}
}

@media (max-width:600px) {
    #navigation .newsletter-container .newsletter-widget {width: 100%;}
    #navigation .logo-container-mobile {display: block; margin: 0; width: 50%;}

    .multi-cell-container {width: 50%;}

    .realisation .realisation-container .realisation-block .real-img {transform: translate(0px);}
    .realisation .realisation-container {padding: 10px;}
    .realisation .realisation-container .realisation-block .realTitle {padding: 15px 10px;}

    .customInput {width: 80%; min-width: unset; background-size: 25px;}
    .subscribe-btn {width: 20%; min-width: 85px;}
}