@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Ubuntu';
  src:  url('../font/Ubuntu-L.ttf')  format('truetype');
}

/* colors */
#menu ul {background:#FFFFFF;}
#menu li > a.inactive {color:#888;}
#menu li > a:hover,.active {color:#444;}
#menu > ul > li > ul > li {background:#FFFFFF;}

.submenu {display:block;clear:right;max-width:700px;margin:30px auto 20px auto;list-style:none;padding:0 10px;overflow:hidden;}
.submenu li {float:left;text-transform:uppercase;border-right:2px solid #888;padding:0 10px;line-height:16px;font-size:0.8em;}
.submenu li:first-child {padding-left:0}
.submenu li:last-child {border:none;}
.submenu li a {text-decoration:none;color:#888;font-weight:bold}
.submenu li a:hover {color:#444;}

.body a {color:#222;text-decoration:underline;}
.footer {background-color:#C2CAD0;}
.footer span,.footer span a {color:white;}
/* einde colors */

* {box-sizing: border-box;}
body {background-size: cover;padding:0;margin:0;font-family:'Ubuntu',Geneva, Arial, Helvetica, sans-serif;line-height:20px;font-size:16px; background-color: #f8f8f8;}
img {margin:0 0 0 0;}
img.logo {margin-left:30px;}
h1 {font-size:1.7em;font-weight:500;padding:0px 0 10px 0;margin:0;}
h2 {font-size:1em;font-weight:900;padding:10px 0 0px 0;margin:0;}
h3 {font-size:0.9em;font-weight:500;padding:0px 0 0 0;margin:0;}
h4 {font-size:0.5em;font-weight:500;padding:0px 0 10px 0;margin:0;}
p {margin: 0 0 1em 0}

header {position:fixed;top:0;display:block;width:100%;height:0px;background-color:white;overflow:hidden;z-index:2;}
#home {position:fixed;top:0;background:white;padding-top:5px;height:60px;float:left;z-index:2;}
#menu {position:fixed;top:0;margin:0;display:block;width:100%;line-height:60px;overflow:hidden;z-index:1;}
#menu ul {position: relative;display:block;width:auto;list-style:none;margin:0;padding:0 0 0 400px;text-align:center;}
#menu > ul > li {display:inline-block;margin:7.5px 0;line-height:16px;width:auto;padding:0;font-size:1.1em;letter-spacing: 0px;font-weight:normal;border-right:1px solid #000;}
#menu > ul > li > a,#menu > ul > li > span {padding:0 10px;}
#menu li:last-child {border-right:none;}
#menu li > a.inactive {text-decoration:none;}
#menu li > a:hover,.active {text-decoration:none;}
#menu > ul > li > ul {position:absolute;top:20px;display:none;width:auto;margin:0;background:none;overflow:hidden;z-index:6;padding:10px 0 0 0;}
#menu > ul > li > ul > li {font-size:0.9em;margin:0;padding:10px 15px 0px 15px;width:auto;text-align:left;}
#menu > ul > li > ul > li:last-child {padding-bottom:10px;}

.foto {background-size: cover;margin-top:0px;background-position:center 0;background-repeat:no-repeat;overflow:hidden;position:relative;}
.foto img {width:100%;visibility:hidden;}
.foto > a {display: block;position: absolute;top:0;left:0;width: 100%; height: 600px;}
.body {max-width:700px;margin:30px auto 20px auto;padding:0 10px 30px 0;vertical-align:top;hyphens:auto;-webkit-hyphens:auto;animation: fadein 1s ease forwards;overflow: hidden; background-color: white; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border-radius: 8px; padding:30px 20px 20px 20px;}

/* recepten */
a.tegel {float: left; margin:10px; display: block;width: 200px;height: 200px;border-radius: 5px;border-color: #888;border-width: 2px;box-shadow: 1.5px 1.5px 3px 1.5px rgb(0,0,0,0.2);transition:all 100ms ease-out;text-decoration: none;overflow:hidden;position: relative;}
a.tegel > img {width: 200px; height: 200px;transition: transform .2s ease-in;}
a.tegel > img:hover {transform: scale(1.05);}
a.tegel > p {position: absolute;top:133px;left:0;z-index:2;display: block;width: 200px;height: 67px;padding-top:10px; background-color: white;text-align: center;}

/* recept */
ul.ingredienten {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 2em;
  margin:0;
  list-style: none;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.5em;
}
ul.ingredienten li a {text-decoration: none;}
.body p {line-height: 1.5em;font-size: 0.9em; line-height: 1.5em;}

/* Zoekformulier professioneel opgemaakt */
.zoekformulier-wrapper {
  display: flex;
  justify-content: center;
  margin: 30px 0 20px 0;
}
.zoekveld-blok {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 12px;
  width: 100%;
  display: flex;
  align-items: center;
}
.zoekveld-blok input[type="text"] {
  font-weight: 500;
  border-radius: 20px;
  border:1.5px solid #ddd;
  width: 100%;
  max-width: 800px;
  min-width: 220px;
  background: #fff;
  box-sizing: border-box;
  font-size: 1.1em;
  padding: 12px 10px;
  margin-bottom: 8px;
}
.zoekveld-blok input[type="submit"] {
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 20px;
  background: #4a90e2;
  color: #fff;
  padding: 10px 0;
  width: 100%;
  max-width: 100vw;
}
.filter-blok {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  flex-wrap: wrap;
}
.filter-blok select {
  min-width: 150px;
  max-width: 200px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  font-size: 1.1em;
}
.filter-blok .filter-label {
  font-weight: 600;
  color: #666;
  margin-right: 8px;
  font-size: 1em;
  opacity: 0.8;
  align-self: center;
}

@media only screen and (max-width: 600px) {
  .body {margin-left:5px;margin-right:5px;}
  /* tegels centraal uitgelijnd, width 100% met 5px links en rechts tot de kant*/
  a.tegel {
    margin:10px auto;
    float:none;
    width: calc(100% - 10px) !important;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  a.tegel > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  a.tegel > p {
    top: 60%;
    bottom: 0;
    width: 100% !important;
    height: 40% !important;
    aspect-ratio: 5 / 2 !important;
    padding: 10px 5px;
    font-size: 1.2em;
  }

  /* Zoekformulier mobiel opgemaakt */
  .filter-blok .filter-label {
    margin-bottom: 2px;
    margin-right: 0;
    align-self: flex-start;
    display: none;
  }
  .zoekformulier-wrapper {
    margin: 20px 0 10px 0;
  }
  .zoekformulier {
    max-width: 98vw;
    padding: 6px 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .zoekformulier select,
  .zoekformulier input[type="text"],
  .zoekformulier input[type="submit"] {
    width: 100%;
    font-size: 1.05em;
    min-height: 44px;
    box-sizing: border-box;
  }
  .zoekformulier input[type="submit"] {
    padding: 10px 0;
    font-size: 1.05em;
    margin-top: 2px;
  }
  .zoekformulier select {
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    margin-bottom: 2px;
    display: none;
  }
  .zoekveld-blok {
    margin-bottom: 12px;
    width: 100%;
  }
  .zoekveld-blok input[type="text"] {
    font-size: 1.1em;
    padding: 12px 10px;
    max-width: 98vw;
    min-width: 0;
    margin-bottom: 8px;
    width: 100%;
  }
  .zoekveld-blok input[type="submit"] {
    font-size: 1em;
    padding: 10px 0;
    width: 100%;
    max-width: 100vw;
  }
  .filter-blok {
    flex-direction: row;
    gap: 6px;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    flex-wrap: wrap;
  }
  .filter-blok select {
    width: 32vw;
    min-width: 150px;
    max-width: 100vw;
  }
  .filter-blok .filter-label {
    margin-bottom: 2px;
    margin-right: 0;
    align-self: flex-start;
  }
}