/* common layout */
@media (min-width: 1em) {
   /* reset */
   *, *::before, *::after{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      position: relative;
      font: inherit;
      list-style: none;
   }
   body{
      min-height: 100vh;
   }
   a{
      color: inherit;
      text-decoration: none;
      cursor: pointer;
   }
   img, picture, svg, video{
      display: block;
      max-width: 100%;
   }
   /* kleuren */
   :root{
   /* font: normal,italic; normal,small-caps; normal,bold,100-900; normal,condensed,expanded; font-size/line-height; font-family, fallback */
   --fonts: normal normal 300 normal 16px/1.5rem myriad-pro-semiextended, sans-serif;
   --light-grad: linear-gradient( rgba(250,250,250,1) 0%, rgba(250,250,250,1) 50%, rgba(250,250,250,0) 100%);
   --dark-grad0: linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.5) 25%, rgba(10,10,10,0.8) 100%);
   --dark-grad1: linear-gradient(180deg, rgb(4, 0, 53) 0%, rgba(4, 0, 53, 0.8) 80%, rgba(4,0,53,0.4) 90%, rgba(4,0,53,0) 100%);
   --primary: hsl(65, 32%, 61%);
   --secondary: hsl(9, 69%, 43%);
   --green: hsl(87, 37%, 45%);
   --offwit: hsl(0, 0%, 98%);
   --l-grey: hsl(0, 0%, 75%);
   --m-grey: hsl(0, 0%, 40%);
   --d-grey: hsl(0, 0%, 25%);
   --offzwart: hsl(0, 0%, 4%);
   --zwart: hsl(0, 0%, 0%);
   --schaduw: 3px 3px 5px rgba(10, 10, 10, 0.2);
   --padding-sm: clamp(0.75rem, 3%, 1.5rem);
   --padding-md: clamp(1.5rem, 6%, 3rem);
   --padding-lg: clamp(3rem, 12%, 6rem);
   --block-flow-sm: clamp(0.75rem, 4vh, 1.5rem);
   --block-flow-md: clamp(1.5rem, 8vh, 3rem);
   --block-flow-lg: clamp(3rem, 10vh, 5rem);
   --gap-sm: clamp(0.75rem, 3vmax, 1.5rem);
   --gap-md: clamp(1.5rem, 6vmax, 3rem);
   --gap-lg: clamp(3rem, 8vmax, 4rem);
   --br: 1px solid hsl(330, 100%, 71%);
   --bg: 1px solid hsl(120, 100%, 50%);
   --bb: 1px solid hsl(222, 100%, 50%);
   --bw: 1px solid hsl(0, 0%, 100%);
   }
   /* diversen */
   .verberg{
      display: none;
   }
   .onzichtbaar{
      visibility: hidden;
   }
   .visually-hidden{
      /* screenreader only text */
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
   }
   button{
      margin: auto;
      width: 12.5rem;
      height: 3rem;
      background-color: var(--secondary);
      border: 2px solid var(--primary);
      color: var(--offwit);
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
   }
   button:hover, button:focus{
      transition: 0.5s;
      background-color: var(--primary);
      border-color: var(--secondary);
   }
   .button-trans-light {
      background-color: transparent;
      border: 2px solid var(--offwit);
      color: var(--offwit);
   }
   .button-trans-dark{
      background-color: transparent;
      border: 2px solid var(--offzwart);
      color: var(--offzwart);
   }

   .button-trans-light:hover, .button-trans-dark:hover  {
      background-color: var(--secondary);
      border: 2px solid var(--primary);
   }
   .small-icon{
      max-height: 2rem;
      max-width: 2rem;
   }
   .cl{
      text-align: center;
   }
   /* fonts */
   /*  1=0.0625 2=0.125 3=0.1875 4=0,25 5=0,3125 6=0,375 7=0.4375 8=0.5
   16=1 15=0.9375 14=0.875 13=0.8125 12=0.75 11=0.6875 10=0.625 9=0.5625 */

   body{
      font: var(--fonts);
      color: var(--m-grey);
      overflow-x: hidden;

   }
   h1, h2, h3, h4{
      font-weight: 300;
      font-size: clamp(2rem, 10vw, 2.625rem);
      line-height: 1em;
      margin-block-end: 0.5em;
   }
   h3{
      font-weight: 600;
      font-size: clamp(0.875rem, 3vw, 1.2rem);
      line-height: 1.625em;
      margin-bottom: 0.5rem;
      }
   h4{
      font-size: 0.875rem;
      font-size: clamp(0.875rem, 2vw, 1rem);
      line-height: 1.625em;
   }
   p{
      margin-block-start: var(--block-flow-sm);
      font-size: clamp(1rem, 2vw, 1.2rem);
      line-height: 1.5em;
   }
   .t-light{
   color: var(--offwit)
   }
   .bold{
   font-weight: 700;
   }
   .small{
   font-size: 0.6rem;
   line-height: 0.7rem;
   margin-top: 0.5rem
   }
/* end common layout */
}

/* layout phone */
@media only screen and (min-width: 2em) {
   /* wel / niet tonen in phone*/
   .dt{
   display: none;
   }
   .ph{
   display: block;
   }
   /*layout phone*/
   #frame{
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      margin: 0 auto;
      width: 100vw;
      height: 100vh;
      min-width: 20rem;
      }
      header{
         width: 100%;
         height: 41rem;
         overflow: hidden;
      } 
         .header-bg-img {
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 100%;
            background-image: url(../images/hero_8_l.jpg);
            background-position: center;
            background-size: cover;
         }         
         .nav-dt{
            position: fixed;
            top: 0;
            right: 0;
            width: 34rem;
            height: 3.5rem;
            /* background: rgb(10,10,10,0.75); */
            background: var(--dark-grad0);
            z-index: 9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            .menu{
               height: 3.5rem;
               display: flex;
               justify-content: center;
               align-items: center;
            }
               .menu-links a{
                  color: var(--offwit);
                  margin-left: 1rem
               }
               .menu-links a:hover{
               color: var(--secondary)
               }                
         .logo-container{
            width: 15rem;
            height: 25rem;
            left:4%;
            background: var(--light-grad);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
         }
            .logo{
               position: relative;
               width: 90%;
               margin-top: 2rem;
            }            
            .phone-button{
               position: relative;
               margin-top: 2rem;
            }
            .call-to-action{
               position: fixed;
               top: 0.4rem;
               z-index: 8;
            }
            .pagename{
               position: absolute;
               top: 28rem;
            }

         .awards-dt{
            position: absolute;
            width: 12rem;
            top: 5.3rem;
            right: 2rem;
            z-index: 1;
         }
         main{
            margin: auto;
            min-width: 18rem;
            margin-top: 3rem;
         }
            article{
               width: 100%;
               height: fit-content;
               display: flex;
               flex-direction: column;
               justify-content: flex-start;
            }
               .article-content{
                  padding: 0 1rem 0 0.4rem;
                  padding: 0 var(--padding-md) 0 var(--padding-sm);
                  width: 90%;
                  height: 100%;
                  max-width: 28rem;
                  margin: auto;
               }
                  .welcome{
                     text-align: center;
                     margin-bottom: 3rem;
                  }
                  .restaurants{
                     text-align: center;
                     padding: 2rem 0;
                     color: var(--offwit);
                     background-color: var(--green);
                  }
                     .restaurants-img{
                        width: 100%;
                        /* max-width: 44rem; */
                        margin: 2rem 0;
                     }
                  .reviews{
                     flex-direction: column;
                     height: 45rem;
                     width: 100%;
                     background-image: url(../images/hero_6_l.jpg);
                     background-position: center;
                     background-size: cover;
                     color: var(--offwit);
                     padding: 2rem 0;
                  }
                     .filter-black{
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 45rem;
                        width: 100%;
                        background: var(--dark-grad1);
                        opacity: 0.7;
                     }
                     .slider-box{
                        height: 27rem;
                     }
                     .arrows{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                     }
                        .up-arrow, .down-arrow{
                           width: 2rem;
                           height: 2rem;
                        }
                        .up-arrow:hover, .down-arrow:hover{
                           opacity: 0.5;
                        }
                  .awards-ph{
                     margin: 2rem auto;
                     display: flex;
                     flex-direction: row;
                     gap: 1rem;
                     justify-content: center;

                     width: 100%;
                     max-width: 28rem;

                  }
                  .green-house{
                     width: 100%;
                     height: 44rem;
                     color: var(--offwit);
                     background: url(../images/hero_7_l.jpg);
                     background-position: center;
                     background-size: cover;
                     padding: 2rem 1rem;
                  }
                     .green-house > .article-content{
                        text-align: center;
                        position: absolute;
                        left:0; right:0;
                        margin: 0 auto;
                     }
         footer{
            position: relative;
            min-height: fit-content;
            background-color: var(--offzwart);
            padding: 2rem;
         }
            footer a, footer h3{
                  color: var(--offwit);
                  line-height: 1.4rem;
                  opacity: 1;
            }
            footer a:hover, footer :focus{
                  transition: 0.3s;
                  opacity: 0.7;
            }
            footer h4 + h4{
            margin-top: 0.5rem;
            }
            .footer-header, .footer-content{
               max-width: 75rem;
               margin: 1.5rem auto;
               text-align: center;

            }
            .footer-content{
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  justify-content: space-evenly;
            }
            .kolom{
            width: 15.3125rem;
            justify-self: center;
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
            }
            .kolom img{
               /* position: absolute; */
               /* left: 0; right: 0; bottom:0; */
               margin: auto;
               width: 8rem;
            }
   /* end layout phone */
   }
/* tablet Layout */
@media only screen and (min-width: 600px) {
   /* wel / niet tonen in tablet*/
   .ph{
   display: block;
   }
   .mob, .dt{
   display: none;
   }
   .article-content{
      padding: 0 1rem 0 0.4rem;
   }
    
   .header-bg-img {
      background-image: url(../images/hero_8_m.jpg);
      background-position: center;
      background-size: cover;
   }
   .reviews{
      background-image: url(../images/hero_6_m.jpg);
      background-position: center;
      background-size: cover;
   }
   .green-house{
      background: url(../images/hero_7_m.jpg);
      background-position: center;
      background-size: cover;
   }      
/* end dekstop layout */
}
/* desktop Layout */
@media only screen and (min-width: 900px) {
   /* wel / niet tonen in desktop*/
   .dt{
   display: block;
   }
   .mob, .ph{
   display: none;
   }
   .article-content{
      width: 50%;
      max-width: 900px;
   }
   .header-bg-img {
      background-image: url(../images/hero_8.jpg);
      background-position: center;
      background-size: cover;
   }
   .reviews{
      background-image: url(../images/hero_6.jpg);
      background-position: center;
      background-size: cover;
   }
   .green-house{
      background: url(../images/hero_7.jpg);
      background-position: center;
      background-size: cover;
   }          
/* end dekstop layout */
}