mCCForm {
  box-shadow: 0px; }

.mCCF {
  background-color: #FCEF9E;
  padding: 1%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-around; }
  .mCCF #mCCButton {
    background: #0E1D35;
    color: #fff;
    border: 3px solid #FCEF9E;
    border-radius: 36px;
    padding: 2% 6%; }
  .mCCF .mCCF__message {
    color: #0E1D35; }

.mCCF--dark.mCCF--bottom {
  box-shadow: 0px 0px 0px; }

body {
  color: #0E1D35;
  background-color: #F6F5F1;
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative; }

.active {
  font-weight: 600; }

header {
  position: absolute;
  z-index: 3;
  width: 100%; }
  header a img {
    width: -webkit-fill-available; }
  header nav {
    align-items: center; }
    header nav a {
      border-radius: 36px;
      color: #0E1D35;
      text-transform: uppercase; }
    header nav a:last-of-type {
      padding: 1.5% 3%; }
  header .mobile-header {
    padding: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FCEF9E;
    position: fixed;
    bottom: 0;
    width: 100%;
    /* The Overlay (background) */
    /* Position the content inside the overlay */
    /* Position the close button (top right corner) */
    /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ }
    header .mobile-header .overlay {
      /* Height & width depends on how you want to reveal the overlay (see JS below) */
      height: 0;
      width: 100%;
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      left: 0;
      top: 0;
      background-color: #0E1D35;
      overflow-x: hidden;
      /* Disable horizontal scroll */
      transition: 0.5s;
      /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ }
    header .mobile-header .overlay-content {
      position: relative; }
      header .mobile-header .overlay-content a {
        color: #fff; }
    header .mobile-header .overlay .close-btn {
      font-size: 35px; }
    @media screen and (max-height: 450px) {
      header .mobile-header .overlay a {
        font-size: 20px; }
      header .mobile-header .overlay .close-btn {
        font-size: 35px; } }
  header .desktop-header {
    display: none; }

footer {
  background-color: #F6F5F1;
  color: #0E1D35;
  padding: 3% 5%; }
  footer a {
    color: #0E1D35; }
  footer ul > li > h5 {
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase; }
  footer ul > li > a > img {
    padding-right: 25px; }
  footer .contact > li > a {
    text-decoration: underline; }

#map {
  height: 100%;
  width: 100%;
  border-radius: 36px; }

.cta-btn {
  margin: 25px 0;
  border: 3px solid #FCEF9E;
  border-radius: 36px;
  color: #0E1D35;
  text-align: center;
  padding: 6%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .cta-btn img {
    width: 15px;
    margin-right: 15px; }

.testimony {
  background-color: #fff;
  padding: 6%; }

.landing {
  padding: 0 3%;
  min-height: 660px;
  height: auto; }
  .landing .welcomeblock {
    border-radius: 36px;
    background-color: #fff; }
    .landing .welcomeblock h2 {
      text-transform: uppercase;
      font-weight: 900; }
  .landing .landingimage {
    border-radius: 36px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover; }
    .landing .landingimage img {
      height: -webkit-fill-available; }

.body .intro {
  padding: 3%; }
  .body .intro .bodyimage1, .body .intro .bodyimage2, .body .intro .bodyimage3 {
    border-radius: 36px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }
  .body .intro .infoblock {
    padding: 6% 0;
    border-radius: 36px;
    background-color: #fff; }
    .body .intro .infoblock div {
      font-size: 15px;
      line-height: 22px; }

#home .landing .landingimage {
  background-image: url("../img/home-landing.jpg"); }
#home .serviceblock {
  padding: 0 3%; }
  #home .serviceblock h3 {
    padding: 15%;
    border: 3px solid #fff;
    border-radius: 36px;
    text-align: center;
    align-self: center; }
    #home .serviceblock h3 a {
      color: #0E1D35; }
#home .body .intro .bodyimage1 {
  background-image: url("../img/home-body-1.jpg"); }
#home .body .intro .bodyimage2 {
  background-image: url("../img/home-body-2.jpg"); }
#home .body .intro .bodyimage3 {
  background-image: url("../img/home-body-3.jpg"); }
#home .body .spot-items {
  padding: 0 3%; }
  #home .body .spot-items .spot-item {
    padding: 20% 0;
    font-size: 18px;
    line-height: 33px;
    border-bottom: 3px solid #fff; }
    #home .body .spot-items .spot-item h3 {
      text-align: center;
      font-weight: 900;
      text-transform: uppercase;
      padding: 25px 0; }
    #home .body .spot-items .spot-item .item-text {
      padding: 6%;
      text-align: center; }
  #home .body .spot-items .spot-item:nth-of-type(1) {
    background-image: url("../img/icons/S.svg");
    background-repeat: no-repeat;
    background-position: center bottom; }
  #home .body .spot-items .spot-item:nth-of-type(2) {
    background-image: url("../img/icons/P.svg");
    background-repeat: no-repeat;
    background-position: center bottom; }
  #home .body .spot-items .spot-item:nth-of-type(3) {
    background-image: url("../img/icons/O.svg");
    background-repeat: no-repeat;
    background-position: center bottom; }
  #home .body .spot-items .spot-item:nth-of-type(4) {
    background-image: url("../img/icons/T.svg");
    background-repeat: no-repeat;
    background-position: center bottom; }

#aboutus .landing .landingimage {
  background-image: url("../img/aboutus-landing.jpg"); }
#aboutus .body .intro .bodyimage1 {
  background-image: url("../img/aboutus-body-1.jpg"); }
#aboutus .body .intro .bodyimage2 {
  background-image: url("../img/aboutus-body-2.jpg"); }
#aboutus .body .intro .bodyimage3 {
  background-image: url("../img/aboutus-body-3.jpg"); }

#services .landing .landingimage {
  background-image: url("../img/service-landing.jpg"); }
#services .landing .welcomeblock .cta-btn img {
  transform: rotate(90deg); }
#services .body {
  padding: 12% 3%; }
  #services .body h2 {
    text-align: center;
    font-weight: 900; }
  #services .body .service-item, #services .body .contact {
    border-radius: 36px;
    padding: 6% 12%;
    font-size: 20px;
    line-height: 33px; }
  #services .body .service-item:nth-of-type(1) {
    background-color: #fff; }
  #services .body .service-item:nth-of-type(2) {
    border: 3px solid #fff; }
  #services .body .service-item:nth-of-type(3) {
    background-color: #fff; }
  #services .body .service-item:nth-of-type(4) {
    border: 3px solid #fff; }
  #services .body .service-item:nth-of-type(5) {
    background-color: #FCEF9E; }
  #services .body .service-item:nth-of-type(6) {
    border: 3px solid #fff; }
  #services .body .service-item:nth-of-type(7) {
    background-color: #fff; }
  #services .body .service-item:nth-of-type(8) {
    background-color: #FCEF9E; }
  #services .body .contact {
    background-color: #fff; }
    #services .body .contact .cta-btn:hover {
      box-shadow: inset 20em 0 0 0 #FCEF9E;
      transition: box-shadow 0.9s ease; }
  #services .body .bodyimage1, #services .body .bodyimage2, #services .body .bodyimage3 {
    border-radius: 36px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; }
  #services .body .bodyimage1 {
    background-image: url("../img/service-body-1.jpg"); }
  #services .body .bodyimage2 {
    background-image: url("../img/service-body-2.jpg"); }
  #services .body .bodyimage3 {
    background-image: url("../img/service-body-3.jpg"); }

#workflow .landing .landingimage {
  background-image: url("../img/workflow-landing.jpg"); }
#workflow .body {
  padding: 3%; }
  #workflow .body .workflow-item {
    padding: 2%; }
    #workflow .body .workflow-item .workflow-icon {
      background-color: #fff;
      border-radius: 36px;
      border: 3px solid #fff;
      margin: 1%;
      height: 100%; }
    #workflow .body .workflow-item .workflow-content {
      padding: 0 6%;
      border-radius: 36px;
      border: 3px solid #fff; }
      #workflow .body .workflow-item .workflow-content span {
        color: #FCEF9E;
        font-weight: 900; }
      #workflow .body .workflow-item .workflow-content h2 {
        font-weight: 900;
        text-transform: uppercase; }
      #workflow .body .workflow-item .workflow-content div {
        font-size: 20px;
        line-height: 33px; }

#workshops .landing .landingimage {
  background-image: url("../img/workshops-landing.jpg"); }
#workshops .landing .welcomeblock .cta-btn img {
  transform: rotate(90deg); }
#workshops .body {
  padding: 12% 3%; }
  #workshops .body h2 {
    text-align: center;
    font-weight: 900; }
  #workshops .body .workshop-item, #workshops .body .contact {
    font-size: 20px;
    line-height: 33px;
    border-radius: 36px;
    padding: 6% 12%; }
  #workshops .body .workshop-item:nth-of-type(1) {
    background-color: #fff; }
  #workshops .body .workshop-item:nth-of-type(2) {
    border: 3px solid #fff; }
  #workshops .body .workshop-item:nth-of-type(3) {
    background-color: #fff; }
  #workshops .body .workshop-item:nth-of-type(4) {
    border: 3px solid #fff; }
  #workshops .body .workshop-item:nth-of-type(5) {
    background-color: #FCEF9E; }
  #workshops .body .contact {
    background-color: #fff; }
    #workshops .body .contact .cta-btn:hover {
      box-shadow: inset 20em 0 0 0 #FCEF9E;
      transition: box-shadow 0.9s ease; }

#team .landing .landingimage {
  background-image: url("../img/team-landing.jpg"); }
#team .body .intro .infoblock a > img {
  transform: rotate(90deg); }
#team .body .intro .bodyimage1 {
  background-image: url("../img/team-body-1.jpg"); }
#team .body .intro .bodyimage2 {
  background-image: url("../img/team-body-2.jpg"); }
#team .body .intro .bodyimage3 {
  background-image: url("../img/team-body-3.jpg"); }
#team .body .team-members {
  padding: 12% 3%; }
  #team .body .team-members .member-item {
    border-top: 3px solid #0E1D35; }
    #team .body .team-members .member-item h3 {
      padding: 6% 0;
      text-align: center;
      font-weight: 900;
      text-transform: uppercase; }
    #team .body .team-members .member-item a > img {
      margin-bottom: 6%; }

#team-member .landing h1 {
  font-weight: 900;
  text-transform: uppercase; }
#team-member .landing .cta-btn img {
  transform: rotate(180deg); }

#pricing .landing .landingimage {
  background-image: url("../img/pricing-landing.jpg"); }

#contact .landing .welcomeblock .contact li > h2 {
  font-weight: 900;
  text-transform: uppercase; }
#contact .landing .welcomeblock .contact a {
  text-decoration: underline;
  color: #0E1D35; }

#appointment .landing .landing-content {
  border-radius: 36px;
  background-color: #fff; }
  #appointment .landing .landing-content .location h2 {
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    padding: 50px 0; }
  #appointment .landing .landing-content .location .cta-btn {
    width: 70%;
    margin: 0 auto; }
  #appointment .landing .landing-content .location:last-child > .cta-btn {
    margin-bottom: 50px; }
#appointment .testimony {
  margin-top: 200px; }

@supports (display: grid) {
  header .mobile-top-logo {
    width: 100%;
    padding: 5% 25%; }
  header .mobile-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 40px;
    grid-template-areas: "home appoint appoint burger"; }
    header .mobile-header .home-btn {
      grid-area: home;
      width: 25px;
      margin-left: 15px; }
    header .mobile-header span {
      grid-area: burger;
      width: 50px;
      justify-self: flex-end; }
    header .mobile-header .mobile-appoint {
      grid-area: appoint;
      text-transform: uppercase;
      color: #0E1D35;
      text-align: center; }
    header .mobile-header .overlay > .overlay-content {
      height: 100vh;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr 2fr 1fr;
      grid-gap: 10px;
      grid-template-areas: " . logo logo ." ". nav nav ." ". close close . "; }
      header .mobile-header .overlay > .overlay-content .home-btn-mobile {
        grid-area: logo;
        padding: 3%;
        justify-self: center;
        align-self: center; }
      header .mobile-header .overlay > .overlay-content nav {
        grid-area: nav;
        display: flex;
        flex-direction: column;
        justify-content: space-around; }
      header .mobile-header .overlay > .overlay-content .close-btn {
        grid-area: close;
        width: 25px;
        justify-self: center;
        align-self: center; }

  footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: ". logo logo . " ". locations locations locations" ". contact contact contact"; }
    footer .footer-logo {
      grid-area: logo;
      padding: 6% 0; }
    footer .contact {
      grid-area: contact;
      padding: 6% 0;
      padding-bottom: 100px; }
    footer .locations {
      grid-area: locations; }
    footer nav {
      display: none; }

  .landing {
    height: auto;
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(250px, auto);
    grid-gap: 10px;
    grid-template-areas: "welcome welcome welcome welcome" "img img img img"; }
    .landing .welcomeblock {
      padding: 6%;
      grid-area: welcome;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " title title title title " " text text text text " "  btn btn btn btn   "; }
      .landing .welcomeblock h2 {
        grid-area: title;
        font-size: 28px;
        align-self: flex-end;
        padding: 2% 0; }
      .landing .welcomeblock p {
        grid-area: text;
        font-size: 40px;
        line-height: 48px;
        margin: 0; }
      .landing .welcomeblock .cta-btn {
        grid-area: btn;
        align-self: flex-start; }
    .landing .landingimage {
      grid-area: img; }

  .testimony {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: "quote quote quote quote"; }
    .testimony img {
      grid-area: 1/1/1/2;
      align-self: flex-end; }
    .testimony div {
      grid-area: quote;
      font-size: 25px;
      line-height: 40px; }

  .body .intro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(250px, auto);
    grid-gap: 10px;
    grid-template-areas: "img1 img1 img1 img1" "info info info info" "img2 img2 img2 img2" "img3 img3 img3 img3"; }
    .body .intro .bodyimage1 {
      grid-area: img1; }
    .body .intro .bodyimage2 {
      grid-area: img2; }
    .body .intro .bodyimage3 {
      grid-area: img3; }
    .body .intro .infoblock {
      padding: 6%;
      grid-area: info;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " text text text text " " cta cta cta cta "; }
      .body .intro .infoblock div {
        grid-area: text; }
      .body .intro .infoblock .cta-btn {
        grid-area: cta; }

  #home .serviceblock {
    padding: 6% 3%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: " serv1 serv1 serv2 serv2" "serv3 serv3 serv4 serv4"; }
    #home .serviceblock h3:nth-of-type(1) {
      grid-area: serv1; }
    #home .serviceblock h3:nth-of-type(2) {
      grid-area: serv2; }
    #home .serviceblock h3:nth-of-type(3) {
      grid-area: serv3; }
    #home .serviceblock h3:nth-of-type(4) {
      grid-area: serv4; }
  #home .body .spot-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: "item1 item1 item1 item1" "item2 item2 item2 item2" "item3 item3 item3 item3" "item4 item4 item4 item4"; }
    #home .body .spot-items .spot-item h3 {
      font-size: 34px; }
    #home .body .spot-items .spot-item:nth-of-type(1) {
      grid-area: item1; }
    #home .body .spot-items .spot-item:nth-of-type(2) {
      grid-area: item2; }
    #home .body .spot-items .spot-item:nth-of-type(3) {
      grid-area: item3; }
    #home .body .spot-items .spot-item:nth-of-type(4) {
      grid-area: item4;
      margin-bottom: 150px; }

  #services .body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(250px, auto);
    grid-gap: 10px; }
    #services .body .service-item, #services .body .contact {
      grid-column: span 4; }
    #services .body .contact {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr 3fr;
      grid-gap: 10px;
      grid-template-areas: ". . title title title title . ." "btn btn btn btn btn btn btn btn "; }
      #services .body .contact h2 {
        grid-area: title; }
      #services .body .contact a {
        grid-area: btn; }
    #services .body .bodyimage1 {
      grid-area: 5/1/5/5; }
    #services .body .bodyimage2 {
      grid-area: 9/1/9/5; }
    #services .body .bodyimage3 {
      grid-area: 12/1/12/5; }

  #workflow .body .workflow-item .workflow-content {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center; }
    #workflow .body .workflow-item .workflow-content span {
      font-size: 30vw; }
    #workflow .body .workflow-item .workflow-content h2 {
      font-size: 20px;
      letter-spacing: 2px; }

  #workshops .body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 0.25fr 1fr;
    grid-gap: 10px; }
    #workshops .body .workshop-item, #workshops .body .contact {
      grid-column: span 4; }
    #workshops .body .contact {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr 3fr;
      grid-gap: 10px;
      grid-template-areas: ". . title title title title . ." ". btn btn btn btn btn btn . "; }
      #workshops .body .contact h2 {
        grid-area: title; }
      #workshops .body .contact a {
        grid-area: btn; }

  #team-member .landing {
    height: auto;
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 10px;
    grid-template-areas: "img img img img" "name name name name" "quote quote quote quote" "text text text text" "cta cta cta cta"; }
    #team-member .landing .landingimage {
      grid-area: img;
      min-height: 500px; }
    #team-member .landing h1 {
      grid-area: name;
      font-size: 34px;
      align-self: center; }
    #team-member .landing h3 {
      grid-area: quote;
      font-size: 50px; }
    #team-member .landing .team-member-text {
      grid-area: text; }
    #team-member .landing .cta-btn {
      grid-area: cta; }

  #contact .landing #map {
    grid-area: img; }

  #appointment .landing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(250px, auto);
    grid-gap: 10px;
    grid-template-areas: "welcome welcome welcome welcome" "content content content content"; }
    #appointment .landing .welcomeblock {
      grid-area: welcome;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr); }
    #appointment .landing .landing-content {
      padding: 3%;
      grid-area: content;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-gap: 10px;
      grid-template-areas: "moerzeke moerzeke" "grembergen grembergen"; }
      #appointment .landing .landing-content .location:nth-of-type(1) {
        grid-area: moerzeke; }
      #appointment .landing .landing-content .location:nth-of-type(2) {
        grid-area: grembergen; }
      #appointment .landing .landing-content .location {
        align-self: center; }
      #appointment .landing .landing-content .location:last-child > .cta-btn {
        margin-bottom: 0px; }

  #pricing .landing .welcomeblock {
    display: block; }
    #pricing .landing .welcomeblock ul {
      list-style: disc; }
    #pricing .landing .welcomeblock h1, #pricing .landing .welcomeblock h3 {
      font-weight: 600;
      margin: 10px 0; }
    #pricing .landing .welcomeblock h1 {
      margin-bottom: 25px; }

  @media screen and (min-width: 700px) {
    header {
      height: auto;
      position: fixed; }
      header .mobile-top-logo {
        display: none; }
      header .mobile-header {
        display: none; }
      header .desktop-header {
        font-size: 12px;
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-auto-rows: minmax(40px, auto);
        grid-gap: 1%;
        grid-template-areas: " . . . . . . . . . . logo logo logo logo . . . . . . . . . .  " " nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav ";
        align-items: center;
        background-color: transparent;
        padding: 2% 4%;
        transition: background-color 0.5s ease; }
        header .desktop-header .home-btn {
          grid-area: logo; }
        header .desktop-header nav {
          grid-area: nav;
          display: flex;
          justify-content: space-between;
          align-self: center; }
          header .desktop-header nav a:hover {
            font-weight: bold; }
          header .desktop-header nav a:last-of-type {
            background-color: #FCEF9E;
            border: 1.5px solid #0E1D35; }
          header .desktop-header nav a:last-of-type:hover {
            box-shadow: inset 16em 0 0 0 #fff;
            transition: box-shadow 0.9s ease; }
          header .desktop-header nav a:active {
            font-weight: 900; }

    footer {
      padding: 6% 3%;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 1%;
      grid-template-areas: ". logo logo logo logo . . contact contact contact contact contact contact . locations locations locations locations locations . nav nav nav ."; }
      footer .footer-logo {
        padding: 0%; }
      footer .contact {
        padding: 0; }
      footer .locations {
        padding-bottom: 0px; }
      footer nav {
        grid-area: nav;
        display: flex;
        flex-direction: column;
        justify-content: space-between; }

    .landing {
      padding-top: 150px;
      height: 85vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  welcome welcome welcome welcome img img img img img img img img img img img img"; }
      .landing .welcomeblock {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: " . title title title title title title . " " .text text text text  text text . " " . btn btn btn btn  btn btn .  "; }
        .landing .welcomeblock h2 {
          font-size: 36px;
          align-self: flex-end;
          padding: 0; }
        .landing .welcomeblock p {
          margin: 1em 0; }

    .testimony {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " . quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote . "; }
      .testimony img {
        grid-area: 1/1/1/5; }
      .testimony div {
        font-size: 55px;
        line-height: 70px; }

    .body .intro {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " img1 img1 img1 img1 img1 info info info info info info info info info info info info info img2 img2 img2 img2 img2 img2" " img1 img1 img1 img1 img1 info info info info info info info info info info info info info img3 img3 img3 img3 img3 img3"; }
      .body .intro .infoblock {
        padding: 0;
        grid-area: info;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 10px;
        grid-template-areas: ". text text text text text text ." ". cta cta cta cta cta cta . "; }
        .body .intro .infoblock div {
          font-size: 20px;
          line-height: 33px; }

    .cta-btn:hover {
      box-shadow: inset 16em 0 0 0 #FCEF9E;
      transition: box-shadow 0.9s ease;
      border: 1px solid #0E1D35 !important; }

    #services .body {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-auto-rows: minmax(350px, auto);
      grid-gap: 10px; }
      #services .body h2 {
        font-size: 18px; }
      #services .body .service-item, #services .body .contact {
        grid-column: span 8;
        display: grid;
        grid-template-rows: minmax(100px, auto); }
        #services .body .service-item div, #services .body .contact div {
          align-self: flex-start; }
        #services .body .service-item h2, #services .body .contact h2 {
          align-self: center; }
      #services .body .bodyimage1 {
        grid-area: 2/17/2/25; }
      #services .body .bodyimage2 {
        grid-area: 3/1/3/9; }
      #services .body .bodyimage3 {
        grid-area: 4/17/4/25; }

    #workflow .body .workflow-item {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 10px;
      align-items: center; }
      #workflow .body .workflow-item .workflow-icon {
        grid-area: img; }
      #workflow .body .workflow-item .workflow-content {
        margin-bottom: 0;
        display: block;
        grid-area: content; }
        #workflow .body .workflow-item .workflow-content span {
          font-size: 8vw; }
        #workflow .body .workflow-item .workflow-content h2 {
          font-size: 34px;
          letter-spacing: 3px; }
    #workflow .body .workflow-item:nth-of-type(odd) {
      grid-template-areas: "img img img img img img img img content content content content content content content content content content content content content content content content"; }
    #workflow .body .workflow-item:nth-of-type(even) {
      grid-template-areas: " content content content content content content content content content content content content content content content content img img img img img img img img"; }

    #workshops .body {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-auto-rows: minmax(350px, auto);
      grid-gap: 10px; }
      #workshops .body h2 {
        font-size: 18px; }
      #workshops .body .workshop-item, #workshops .body .contact {
        grid-column: span 8;
        display: grid;
        grid-template-rows: 0.25fr 1fr; }
        #workshops .body .workshop-item h2, #workshops .body .contact h2 {
          align-self: center; }
        #workshops .body .workshop-item div, #workshops .body .contact div {
          align-self: flex-start; }

    #team .body .team-members {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px; }
      #team .body .team-members .member-item {
        grid-column: span 8; }
        #team .body .team-members .member-item h3 {
          font-size: 34px; }

    #team-member .landing {
      padding-top: 150px;
      height: 95vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 10px;
      grid-template-areas: "img img img img img img img img . . name name name name name name name name name name name name . . " "img img img img img img img img . . quote quote quote quote quote quote quote quote quote quote quote quote . ." "img img img img img img img img . . text text text text text text text text text text text text . ." "img img img img img img img img . . cta cta cta cta . . . . . . . . . . "; }

    #pricing .landing {
      padding-top: 150px;
      min-height: 800px;
      height: 85vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome img img img img img img img img img img img img"; }

    #contact .landing {
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  welcome welcome welcome welcome map map map map map map map map map map map map"; }
      #contact .landing #map {
        grid-area: map; }
      #contact .landing .welcomeblock {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: " . text text text text  text text . " " . btn btn btn btn  btn btn .  "; }
        #contact .landing .welcomeblock .contact {
          align-self: center;
          grid-area: text;
          margin: 1em 0; }
          #contact .landing .welcomeblock .contact li > h2 {
            font-size: 18px; }

    #appointment .landing {
      padding-top: 150px;
      height: 85vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  welcome welcome welcome welcome content content content content content content content content content content content content"; }
      #appointment .landing .welcomeblock {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: " . title title title title title title . " " .text text text text  text text . "; }
        #appointment .landing .welcomeblock h2 {
          font-size: 36px;
          align-self: flex-end;
          padding: 0; }
        #appointment .landing .welcomeblock p {
          margin: 1em 0; }
      #appointment .landing .landing-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 10px;
        grid-template-areas: "moerzeke moerzeke" "grembergen grembergen"; }
        #appointment .landing .landing-content .location:nth-of-type(1) {
          grid-area: moerzeke; }
        #appointment .landing .landing-content .location:nth-of-type(2) {
          grid-area: grembergen; }
        #appointment .landing .landing-content .location {
          align-self: center; } }
  @media screen and (min-width: 900px) {
    .landing {
      padding-top: 150px;
      height: 85vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  welcome welcome welcome welcome img img img img img img img img img img img img"; }
      .landing .welcomeblock {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
        grid-gap: 10px;
        grid-template-areas: " . title title title title title title . " " .text text text text  text text . " " . btn btn btn btn  btn btn .  "; }
        .landing .welcomeblock h2 {
          font-size: 36px;
          align-self: flex-end;
          padding: 0; }
        .landing .welcomeblock p {
          margin: 1em 0; }

    .testimony {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " . quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote . "; }
      .testimony img {
        grid-area: 1/1/1/5; }
      .testimony div {
        font-size: 55px;
        line-height: 70px; }

    .body .intro {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " img1 img1 img1 img1 img1 info info info info info info info info info info info info info img2 img2 img2 img2 img2 img2" " img1 img1 img1 img1 img1 info info info info info info info info info info info info info img3 img3 img3 img3 img3 img3"; }
      .body .intro .infoblock {
        padding: 0;
        grid-area: info;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 10px;
        grid-template-areas: ". text text text text text text ." ". cta cta cta cta cta cta . "; }
        .body .intro .infoblock div {
          font-size: 20px;
          line-height: 33px; }

    .cta-btn {
      padding: 1%; }

    .cta-btn:hover {
      box-shadow: inset 16em 0 0 0 #FCEF9E;
      transition: box-shadow 0.9s ease;
      border: 1px solid #0E1D35 !important; }

    header .desktop-header {
      font-size: 14px;
      grid-template-areas: " logo logo logo . nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav "; }

    #services .body h2, #workshops .body h2 {
      font-size: 24px; }
    #services .body .contact, #workshops .body .contact {
      grid-template-areas: ". . title title title title . ." ". btn btn btn btn btn btn . "; }

    #appointment > .landing > .landing-content > .location .cta-btn:hover {
      box-shadow: inset 32em 0 0 0 #FCEF9E;
      transition: box-shadow 0.9s ease;
      border: 1px solid #0E1D35 !important; } }
  @media screen and (min-width: 1280px) {
    .landing {
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  img img img img img img img img img img img img img img img img"; }
      .landing .welcomeblock {
        grid-template-areas: " . title title title title title title . " " .text text text text  text text . " " . btn btn btn btn  . . .  "; }

    .testimony {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: " . quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote . "; }
      .testimony img {
        grid-area: 1/1/1/5; }
      .testimony div {
        font-size: 55px;
        line-height: 70px; }

    .body .intro {
      grid-template-areas: " img1 img1 img1 img1 img1 img1 img1 img1 info info info info info info info info img2 img2 img2 img2 img2 img2 img2 img2" " img1 img1 img1 img1 img1 img1 img1 img1 info info info info info info info info img3 img3 img3 img3 img3 img3 img3 img3"; }
      .body .intro .infoblock {
        grid-template-areas: ". text text text text text text ." ". cta cta cta cta . . . "; }

    header .desktop-header {
      font-size: 16px;
      grid-template-areas: " . logo logo logo logo . . . nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav nav "; }

    #home .landing {
      padding-top: 150px;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  img img img img img img img img img img img img img img img img"; }
    #home .serviceblock {
      padding: 0 3%;
      height: 15vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 10px;
      grid-template-areas: " . . . . . . . . . serv1 serv1 serv1 . serv2 serv2 serv2 . serv3 serv3 serv3 . serv4 serv4 serv4"; }
    #home .body .spot-items {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: ". item1 item1 item1 item1 item1 item1 item1 item1 item1 item1 . . item2 item2 item2 item2 item2 item2 item2 item2 item2 item2 ." ". item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 . . item4 item4 item4 item4 item4 item4 item4 item4 item4 item4 ."; }
      #home .body .spot-items .spot-item h3 {
        font-size: 34px; }
      #home .body .spot-items .spot-item:nth-of-type(1), #home .body .spot-items .spot-item:nth-of-type(2), #home .body .spot-items .spot-item:nth-of-type(3), #home .body .spot-items .spot-item:nth-of-type(4) {
        background-position: left bottom; }
      #home .body .spot-items .spot-item:nth-of-type(4) {
        margin-bottom: 0; }

    #services .body h2, #workshops .body h2 {
      font-size: 34px; }

    #team-member .landing {
      padding-top: 150px;
      height: 95vh;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 10px;
      grid-template-areas: "img img img img img img img img . . name name name name name name name name name name name name . . " "img img img img img img img img . . quote quote quote quote quote quote quote quote quote quote quote quote . ." "img img img img img img img img . . text text text text text text text text text text text text . ." "img img img img img img img img . . cta cta cta cta . . . . . . . . . . "; }

    #contact .landing {
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome  map map map map map map map map map map map map map map map map"; }
      #contact .landing #map {
        grid-area: map; }
      #contact .landing .welcomeblock {
        grid-template-areas: " . text text text text  text text . " " . btn btn btn btn  . . .  "; }

    #appointment .landing {
      grid-template-areas: "welcome welcome welcome welcome welcome welcome welcome welcome content content content content content content content content content content content content content content content content"; }
      #appointment .landing .landing-content {
        grid-area: content;
        grid-template-areas: "moerzeke grembergen" "moerzeke grembergen"; } } }