* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

li, p {
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Caveat', serif;
  color: #FCDEF5;
}

h1 a, h2 a, h4 a {
  color: #FCDEF5;
  cursor: pointer;
}

h4 {
  font-size: 2.5em;
  
}

.email {
  font-size: 2.5em;
  font-family: 'Caveat', serif;
}

@media screen and (max-width: 960px) {
  .email {
    font-size: 0.8rem;
  }
}

header {
  min-height: 50vh;
  min-width: 100vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: 'titles titles burger';
  overflow-x: hidden;
  padding: 2em 1em;
  background: rgba(0, 0, 0, 0.5) url("img/sofa-no-armch-edit.9c437cfb.jpg");
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  background-blend-mode: darken;
}

@media screen and (max-width: 960px) {
  header {
    display: -ms-grid;
    display: grid;
    grid-template: "titles burger" / 75% 25%;
  }
}

header h1 {
  font-size: 5em;
}

header h2 {
  font-size: 2em;
}

header h3 {
  font-size: 2em;
  color: #FCDEF5;
}

@media screen and (max-width: 960px) {
  header h1 {
    font-size: 3em;
  }
  header h4 {
    font-size: 2em;
  }
  header h3 {
    font-size: 1em;
  }
}

@media screen and (max-width: 600px) {
  header h1 {
    font-size: 2em;
  }
  header h4 {
    font-size: 1.6em;
  }
}

.titles {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: titles;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  position: relative;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

@media screen and (max-width: 960px) {
  .titles {
    margin: 5em 0em 0em 0em;
  }
}

@media screen and (max-width: 600px) {
  .titles {
    margin: 3em 0em 0em 0em;
  }
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  grid-area: navul;
  color: #FCDEF5;
  padding-left: auto;
  padding-right: auto;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  height: 100%;
}

@media screen and (max-width: 960px) {
  nav {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

nav hr {
  border-top: 2px  #FCDEF5;
  width: 80%;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: absolute;
  top: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(black));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), black);
  -webkit-transform: translateX(500px);
          transform: translateX(500px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  height: 50vh;
  z-index: 5;
  padding: 5em 2em 1em 2em;
}

@media screen and (max-width: 960px) {
  nav ul {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.3)), to(black));
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), black);
  }
}

@media screen and (max-width: 960px) {
  nav ul {
    width: 110vw;
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
  }
}

nav ul li {
  margin-top: 1em;
  cursor: pointer;
}

nav ul a {
  color: #FCDEF5;
  font-size: 1em;
}

@media screen and (max-width: 600px) {
  nav ul a {
    font-size: 1em;
    margin-top: 0.2em;
  }
}

@media screen and (max-width: 400px) {
  nav ul a {
    font-size: 0.9em;
  }
}

.liActive {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

@media screen and (max-width: 960px) {
  .liActive {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}

.menu-holder {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 2em;
}

.holder {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: burger;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.menu-btn {
  position: relative;
  height: 80px;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-top: 1em;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 10;
}

.menu-btn .burger1, .menu-btn .burger2, .menu-btn .burger3 {
  z-index: 10;
  width: 50px;
  height: 6px;
  border-radius: 5px;
  background-color: #FCDEF5;
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.menu-btn .burger2 {
  -webkit-transform: translateY(-16px);
          transform: translateY(-16px);
}

.menu-btn .burger3 {
  -webkit-transform: translateY(16px);
          transform: translateY(16px);
}

.menu-btn.open .burger1 {
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  background: transparent;
}

.menu-btn.open .burger2 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.menu-btn.open .burger3 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

footer {
  min-height: 20vh;
  background-color: #FCDEF5;
  display: -ms-grid;
  display: grid;
  grid-template: "FooterNav" "Copyright"/100%;
}

footer .additional-nav {
  grid-area: FooterNav;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

footer .additional-nav ul {
  padding: 1em 8em;
}

footer .additional-nav ul .footer-li {
  font-size: 1em;
  color: black;
}

@media screen and (max-width: 960px) {
  footer .additional-nav {
    display: block;
  }
  footer .additional-nav ul {
    padding: 1em 0em 0em 0em;
    text-align: center;
    text-decoration: none;
  }
}

footer .Copyright {
  grid-area: Copyright;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em;
}

@media screen and (max-width: 960px) {
  footer .Copyright {
    padding: 1em 0em 3em 0em;
  }
}

.index-main {
  min-height: 100vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template: "About Image" "Imgtrio Imgtrio"/ 55% 45%;
  -webkit-column-gap: 20px;
          column-gap: 20px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media screen and (max-width: 1200px) {
  .index-main {
    grid-template: "Image" "About" "Imgtrio" / 100%;
  }
}

.index-text {
  grid-area: About;
  padding: 1em;
}

.index-text h2 {
  color: black;
  font-size: 2em;
}

.index-text p {
  font-size: 1.2em;
  padding-bottom: 1em;
}

@media screen and (max-width: 600px) {
  .index-text p {
    font-size: 1em;
  }
}

.index-img {
  grid-area: Image;
  padding-right: 1em;
}

.index-img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  padding: 2em 2em;
}

.trio-img {
  grid-area: Imgtrio;
  min-height: 70vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template: "Image1 Image2 Image3" / 1fr 1fr 1fr;
  -webkit-column-gap: 20px;
          column-gap: 20px;
  padding: 1em 4em;
}

@media screen and (max-width: 960px) {
  .trio-img {
    min-height: 30vh;
  }
}

.trio-img .Image1 {
  grid-area: Image1;
}

.trio-img .Image2 {
  grid-area: Image2;
}

.trio-img .Image3 {
  grid-area: Image3;
}

.trio-img .Image1, .trio-img .Image2, .trio-img .Image3 {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 600px) {
  .trio-img {
    grid-template: "Image1" "Image2" "Image3"/ 100%;
    row-gap: 20px;
  }
}

.passe-main {
  min-height: 100vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template: "Image About About" "ImgTrio1 ImgTrio1 ImgTrio1" / 1fr 1fr 1fr;
  -webkit-box-pack: justify;
}

@media screen and (max-width: 960px) {
  .passe-main {
    grid-template: "About" "Image" "ImgTrio1"/ 100%;
  }
  .passe-main h2 {
    text-align: center;
  }
}

.passe-text {
  grid-area: About;
  padding: 1em 2em 1em 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 960px) {
  .passe-text {
    padding: 1em;
  }
}

.passe-text h2 {
  color: black;
  font-size: 2em;
}

.passe-text h4 {
  color: #52a7a2;
  font-size: 2em;
}

.passe-text p {
  font-size: 1.2em;
  padding-bottom: 1em;
}

@media screen and (max-width: 600px) {
  .passe-text p {
    font-size: 1em;
  }
}

.imgtrio1 {
  grid-area: ImgTrio1;
  min-height: 50vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template: "Image4 Image5 Image6"/ 1fr 1fr 1fr;
  -webkit-column-gap: 20px;
          column-gap: 20px;
  padding: 1em 4em 2em 4em;
}

@media screen and (max-width: 960px) {
  .imgtrio1 {
    min-height: 30vh;
  }
}

@media screen and (max-width: 600px) {
  .imgtrio1 {
    grid-template: "Image4" "Image5" "Image6"/100%;
    row-gap: 20px;
    padding: 1em;
  }
}

.imgtrio1 .Image4 {
  grid-area: Image4;
}

.imgtrio1 .Image5 {
  grid-area: Image5;
}

.imgtrio1 .Image6 {
  grid-area: Image6;
}

.imgtrio1 .Image4, .imgtrio1 .Image5, .imgtrio1 .Image6 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.passe-img {
  grid-area: Image;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.passe-img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  padding: 1em 1em 1em 3em;
}

@media screen and (max-width: 960px) {
  .passe-img img {
    padding: 1em;
  }
}

.pourquoi-main {
  min-height: 100vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-template: "About Image1" "Image2 Image3"/ 1fr 1fr;
  -webkit-column-gap: 20px;
          column-gap: 20px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media screen and (max-width: 960px) {
  .pourquoi-main {
    grid-template: "About" "Image1" "Image2" "Image3"/100%;
  }
  .pourquoi-main h2 {
    text-align: center;
  }
}

.pourquoi-text {
  grid-area: About;
  padding: 1em 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.pourquoi-text h2 {
  color: black;
  font-size: 2em;
  text-align: center;
}

.pourquoi-text p {
  font-size: 1.2em;
  padding-bottom: 1em;
}

@media screen and (max-width: 600px) {
  .pourquoi-text p {
    font-size: 1em;
  }
}

.pourquoi-img {
  grid-area: Image1;
  padding-right: 1em;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pourquoi-img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  padding: 2em 2em;
}

.pourquoi-img2 {
  grid-area: Image2;
  overflow: hidden;
  padding: 2em;
}

.pourquoi-img2 img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 80vh;
  width: 100%;
}

.pourquoi-img3 {
  grid-area: Image3;
  overflow: hidden;
  padding: 2em;
}

.pourquoi-img3 img {
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 80vh;
  width: 100%;
}

.grid-title {
  font-size: 3em;
}

.enf-main, .adu-main, .adol-main {
  min-height: 100vh;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}

.enf-main {
      grid-template-areas: "enfimg1 enftitle" "enftext1 enfimg2" "enfimg3 enftext2";
}

@media screen and (max-width: 960px) {
  .enf-main {
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        grid-template-areas: "enftitle" "enfimg1" "enftext1" "enfimg2" "enftext2" "enfimg3";
  }
}

.adu-main {
      grid-template-areas: "adutitle adutitle" "aduimg1 adutext2" "adutext3 aduimg2";
}

@media screen and (max-width: 960px) {
  .adu-main {
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        grid-template-areas: "adutitle" "adutext2" "aduimg1" "adutext3" "aduimg2";
  }
}

.adol-main {
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "adoltitle adoltitle adoltitle" "adoltext1 adoltext1 adolimg1 " "adolimg2 adoltext2 adoltext2 ";
}

@media screen and (max-width: 960px) {
  .adol-main {
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        grid-template-areas: "adoltitle" "adoltext1" "adolimg1" "adoltext2" "adolimg2";
  }
}

/*@media screen and (max-width: 600px) {
    .adol-main {
        grid-template-columns: 100%;
        grid-template-areas: "adoltitle"
        "adoltext1"
        "adolimg1"
        "adoltext2"
        "adolimg2";
    }
} */
.adol-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: adoltitle;
  background-color: #E6D7CA;
  min-height: 20vh;
}

.adol-title h2 {
  color: #233537;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .adol-title h2 {
    font-size: 2em;
  }
}

.adol-text1 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: adoltext1;
  background-color: #94CCC1;
}

.adol-text2 {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-area: adoltext2;
  background-color: #ECCEFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.adol-p {
  margin: 2em;
}

@media screen and (max-width: 600px) {
  .adol-p {
    margin: 0;
  }
}

.adol-image1 {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: adolimg1;
  max-height: 70vh;
}

.adol-image2 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: adolimg2;
  max-height: 70vh;
}

.adu-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: adutitle;
  min-height: 20vh;
  background-color: #E6D7CA;
  text-align: center;
}

.adu-title h2 {
  color: #275351;
}

@media screen and (max-width: 600px) {
  .adu-title h2 {
    font-size: 2em;
  }
}

.adu-text2 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: adutext2;
  background-color: #94CCC1;
}

.adu-text3 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: adutext3;
  background-color: #ECCEFF;
}

.adu-title, .adu-text1, .adu-text2, .adu-text3, .adol-title, .adol-text1, .adol-text2, .enf-title, .enf-text2, .enf-text1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #275351;
}

.adu-title p, .adu-text1 p, .adu-text2 p, .adu-text3 p, .adol-title p, .adol-text1 p, .adol-text2 p, .enf-title p, .enf-text2 p, .enf-text1 p {
  font-size: 1.2em;
  padding: 1em 2em;
}

@media screen and (max-width: 600px) {
  .adu-title p, .adu-text1 p, .adu-text2 p, .adu-text3 p, .adol-title p, .adol-text1 p, .adol-text2 p, .enf-title p, .enf-text2 p, .enf-text1 p {
    font-size: 1em;
  }
}

.adu-image1 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: aduimg1;
}

.adu-image2 {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: aduimg2;
}

.adu-image1, .adu-image2 {
  overflow: hidden;
}

.adu-image1 img, .adu-image2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.enf-title {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: enftitle;
  background-color: #E6D7CA;
  min-height: 20vh;
}

.enf-title h2 {
  color: #233537;
}

@media screen and (max-width: 600px) {
  .enf-title h2 {
    font-size: 2em;
  }
}

.enf-text1 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: enftext1;
  background-color: #94CCC1;
}

.enf-text2 {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: enftext2;
  background-color: #ECCEFF;
}

.enf-image1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: enfimg1;
}

.enf-image2 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: enfimg2;
}

.enf-image3 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: enfimg3;
}

.enf-image1, .enf-image2, .enf-image3, .adol-image1, .adol-image2 {
  overflow: hidden;
}

.enf-image1 img, .enf-image2 img, .enf-image3 img, .adol-image1 img, .adol-image2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.line {
  padding: 0em 1em;
  margin-bottom: 1em;
  width: 1000%;
  height: 3px;
  background-color: #52a7a2;
  -webkit-animation-name: lineanim;
          animation-name: lineanim;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes lineanim {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}

@keyframes lineanim {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}
/*# sourceMappingURL=style.css.map */