@font-face {
  font-family:'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {margin:0;padding:0;font-family: 'Open Sans', Arial, Verdana}

@font-face {
    font-family: 'recepten';
    src: url('/fonts/recepten.eot');
    src: url('/fonts/recepten.eot?#iefix') format('embedded-opentype'),
         url('/fonts/recepten.woff') format('woff'),
         url('/fonts/recepten.ttf') format('truetype');
    font-weight: normal;
    font-size: 1em;
    font-display:swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* vertikale hoogte css
@media screen and (max-height:720px) {
<!-- aside:nth-child(1) {order:1} -->
}
*/

* {font-family: 'Open Sans', 'arial', sans-serif}
a {color:#0044CC; transition: all 0.3s ease-in-out} /*Fee : Toegevoegd = transition: all 0.3s ease-in-out;*/
a:hover {color:#69AB2C}
/*Animation for the arrow*/



li:target:before {
    font-family: 'recepten';
    content: '\e02d';
    position: absolute;
    color: #E30613;
    animation: slide1 1s ease-in-out infinite;
}
li:target {
    font-weight:bold;
}

/*li:target:before {font-family: 'recepten';content: '\e02d';position:absolute;color:#E30613;margin-top: 40px;animation: slide1 1s ease-in-out infinite}    */

span[data-icon]:before {
    font-family:'recepten';
    content: attr(data-icon);
    speak: none;
    padding:0px;
    display:inline-block;
    vertical-align: middle;
    margin:0px 5px 0 0;
    font-weight: normal;
    font-size: 1.25em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.button-small [data-icon]:before {color:#FFF;padding-left:4px;}

h1, h2, h3, h4 {color:#303030;line-height:1.75em}
h2, h3, h4 {margin:1em 0 0 0}
h3 {font-size:1em}
h1 {font-size:2em;color:#303030;line-height:1.75em;margin:0}
input[type="text"], input[type="password"] {height:2.6em;border-radius:3px;text-indent:5px;border: 1px solid #CCC}
@keyframes slide1_old {
  0%,
  100% {
    transform:  rotate(90deg) translateX(-40px)translateY(40px);;
  }

  50% {
    transform: rotate(90deg) translateX(-40px)translateY(50px);;
  }
}

@keyframes slide1 {
  0%,
  100% {
    transform:  rotate(90deg) translateX(0px)translateY(30px);;
  }

  50% {
    transform: rotate(90deg) translateX(0px)translateY(35px);;
  }
}
@-webkit-keyframes animateHeart {
  0% {
    font-size:20px;
  }
  5% {
    font-size:24px;
    margin-left:6px;
  }
  10% {
    font-size:22px;
    margin-left:8px;
  }
  15% {
    font-size:26px;
    margin-left:4px;
  }
  50% {
    font-size:20px;
    margin-left:8px;
  }
  100% {
    font-size:20px;
  }
}



@keyframes zoekpulse {
    0% {opacity: 1 }
    50% {opacity: 0.4}
    100% {opacity: 1}
}
@-webkit-keyframes zoekpulse {
    0% {opacity: 1}
    50% {opacity: 0.4}
    100% {opacity: 1}
}


@keyframes bounce, @-webkit-keyframes bounce, @-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform(translateY(0));}
  40% {transform(translateY(-30px));}
  60% {transform(translateY(-15px));}
}

@keyframes animateHeart {
  0% {
    font-size:20px;
  }
  5% {
    font-size:24px;
    margin-left:6px;
  }
  10% {
    font-size:22px;
    margin-left:8px;
  }
  15% {
    font-size:26px;
    margin-left:4px;
  }
  50% {
    font-size:20px;
    margin-left:8px;
  }
  100% {
    font-size:20px;
  }
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    color:#FFF;
  }
  50% {
    opacity: 1;
    color:#FFF;
  }
  75% {

  }
  100% {

  }
}

@-webkit-keyframes pulse, @keyframes pulse {
  0% {
    background-color: #FFFFFF;
  }
  100% {
    background-color: #69AB2CF;
  }
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.footer{
    display: grid;
}

.footer ul{
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer .zoek{
    margin: 0 5vw;
}

.footer input{width: 63vw;margin-top: 0.75em}
.footer span{position: absolute}
.footer span:after {
    content: '\e00f';
    font: 30px 'Recepten';
    top: 13px;
    position: relative;
    left: -40px}

/* end related boxes */

/* boodschappen */
#boodschappen div {background:#b4d595;height:3em;text-align:right}
#boodschappen {z-index:500000001 !important;position:fixed;top:0;width:300px;height:100vh;max-width:350px;background:#FFF;transition:all 1s;right:-305px;overflow-y:auto;
-webkit-box-shadow: -5px 0px 5px -2px rgba(0,0,0,0.25);
-moz-box-shadow: -5px 0px 5px -2px rgba(0,0,0,0.25);
box-shadow: -5px 0px 5px -2px rgba(0,0,0,0.25);}
#boodschappen ul {list-style-type:none;margin:10px;padding:10px;overflow:hidden}
#boodschappen ul li {line-height:2.5em;transition:all 0.5s;border-bottom:1px dashed #CCC;font-size:14px}
#boodschappen ul li .button-small {background:#69AB2C}
#boodschappen ul li .button-small:hover {background:#CA2027}
#boodschappen ul li:nth-last-child(1) {padding-left:36px}
#boodschappen ul li:nth-last-child(1) {border-bottom:none}
#boodschappen ul li:hover , .onPage {background:#EEE}
#boodschappen .button:hover {background:#CA2027}
#addboodschap {border:0px;margin-left:-5px}
.butgroup {text-align:center}

/* bar */
#menupanel a:first-child{
   margin-right: 5vw;
       width: 360px;
    margin: 0px auto 0px auto;
}
#menupanel a img:first-child{
       display: block;
    margin-left: auto;
    margin-right: auto;
}
#bar {height:3em;width:100%;display:block;background:#69AB2C;position:fixed;bottom:0;z-index:500000000 !important}
#bar nav {line-height:3em;margin:0;width:100%;text-align:left;z-index:500000000 !important}
#bar nav div {display:inline-block;text-align:center;font-weight:800;text-transform:uppercase;color:#FFF;text-decoration:none;width:20vw;line-height:2em;transition:all 0.5s ease-in-out;border-right: 1px solid #b4d595}
#bar nav div a {color:#FFF}

#zoekpanel, #menupanel {position:fixed;height:0px;bottom:3em;overflow:hidden;display:block;color:#000;width:100%;z-index:8000 !important;transition:all 0.4s ease-in-out;background:#FFF}
#bar nav label {text-align:center;border-right:1px solid #b4d595;width:20vw;display:inline-block}
#bar #menucheck:checked + #menupanel, #bar #zoekcheck:checked + #zoekpanel {position:fixed;bottom:3em;height:6em;transition:all 0.4s ease-in-out}
#bar label:active {color:#000}
#menupanel, #zoekpanel {z-index:1000 !important;box-shadow: 0px -3px 10px rgba(0,0,0,0.3)}
#menupanel a {vertical-align: top;display:inline-block;font-weight:bold;text-decoration:none;color:#000;text-transform:uppercase;margin-left:10%;width:34vw;height:3em;line-height:3em}
#menupanel a:hover {color:#000;}
#menupanel a:first-child, #menupanel a {border-bottom:1px solid #EEE}
#zoekpanel input{margin-top:2.5em}
#zoekpanel button{border:none;display:inline-block;color:#000}
.tb:empty, .ma:empty, #bar input[type='radio']{display:none}

#bar nav a span[data-icon]:before, #bar nav label span[data-icon]:before {font-size:2em}

/* header */
#header {width:96vw;margin:0px 2vw;}

/* footer */
footer {width:100%;margin:1em 0 0 0;background:#EEE}
footer div:not(.footer) {text-align:center;line-height:2em;font-size:0.75em;border-top:0.25em solid #FFF;width:100%;height:2em;background:#69ab2c;margin-bottom:52px}
.footer ul li a {margin-right:1em;width:90%;}
.footer ul {margin-bottom:2em;margin-right: 3vw; margin-left: 5vw;} /* Fee : Aanpassing "Toevoeeging: margin-right: 3vw; margin-left: 5vw "*/
footer div a:hover {color:#000}

/* info */
#info {margin:0px 2vw;list-style-type:none;padding:0px;line-height: 1.75em;}/* Fee : toegevoegd = line-height: 1.75em;*/
#info li span {color:#CCC;transition:all 0.5s ease-in-out}
#info li:hover span {color:#69AB2C}

#main-image {width:100%;max-width:100%;height:auto}

/* ingredienten */
#porties {background:#CCC;border-radius:3px;line-height:2.25em;max-width:235px;display:inline-block;width:270px;margin-top:2%;height:38px}
#porties * {font-weight:bold;text-transform:uppercase}
#porties a {line-height:1.50em;width:1.50em;background:#AAA;display:inline-block;border-radius:3px;text-decoration:none;text-align:center;color:#000;margin-left:2%;transition:all 0.5s ease}
#porties a:hover, #porties input:focus, #porties input:hover {color:#FFF;background:#69AB2C}
#porties a:hover:nth-child(4) {background:#E30613 !important} /*Fee : Aangepast = nth-child(4) : background:#E30613 !important*/
#porties input {transition: all 0.5s ease-in-out;width:3em;height:2em;margin-left:2%;margin-right:2%;background:#AAA;border: 0;border-radius:3px;text-align:center}

#ingredienten li input:not(:checked) + label {
  display: inline-block;
  text-decoration: none;
  color:black;
  position: relative;
  text-decoration:line-through;
  transition:width 0.25s ease;
}


@-webkit-keyframes barpop {
  0% {bottom:-4em}
  20% {bottom:0em}
  75% {bottom:0em}
  100% {bottom:-4em}
}

/* Standard syntax */
@keyframes barpop {
  0% {bottom:-4em}
  20% {bottom:0em}
  75% {bottom:0em}
  100% {bottom:-4em}
}

@-webkit-keyframes fadeinout {
  0%,100% { color: black; }
  50% { color: #FFCC00; }
}

@keyframes fadeinout {
  0%,100% { color: black; }
  50% { color: #FFCC00; }
}

/* message bar */
#msg {position:fixed;bottom:-4em;left:0px;width:100%;line-height:4em;height:4em;display:block;-webkit-animation-name:barpop;-webkit-animation-duration:4s;animation-name:barpop;animation-duration:4s;background:#FFF}
#msg.alert {background:#E3221D}

#ingredientenblok {width:96%;margin:0 2% 0 2%}
#ingredientenblok ul, .suggestielijst, .lijst {width:100%;list-style-type:none;padding:0px}
.lijst span {float:right}
#ingredientenblok li, .suggestielijst li, #allergiemelding li, #recent li, #recepten-lijstje li, .lijst li {font-size:1em;color:#303030;line-height:2.25em;border-bottom:1px dotted #CCC;width:100%;} /*Fee : weight:400; deleted*/
#ingredientenblok li label, .suggestielijst li, #allergiemelding li .checkbox-art{cursor:pointer}
#ingredientenblok li label:hover,#allergiemelding li .checkbox-art:hover, #ingredientenblok li label:hover * {color:#69AB2C;transition:all 0.25s ease}
#ingredientenblok li a {color:#000}
#ingredientenblok li input[type='checkbox'],#allergiemelding li input[type="checkbox"]{display:none;visibility:hidden}
#ingredientenblok li input[type='checkbox']:hover {margin-left:10px}

#recepten-lijstje, #recent{list-style-position: inside;list-style-type: none; padding: 0px}
#recepten-lijstje li:last-child, .lijst li:last-child {border-bottom:unset}
.checkbox-art:before{float: right;opacity: 0.0;filter: alpha(opacity=0);position: relative !important;bottom: 50px !important;}
#allergiemelding li input[type="checkbox"]:hover ~ .checkbox-art:before{float: right;opacity: 1;filter: alpha(opacity=100)}
#allergiemelding li input[type="checkbox"]{transition: all 0.5s ease-in-out;}

#ingredientenblok li input[type="checkbox"] ~ label:before, #allergiemelding li input[type="checkbox"] ~ .checkbox-art:before{
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-bottom:-3px;
  left: 0;
  bottom: 1px;
  border:1px solid #CCC;
  border-radius:3px;
  cursor:pointer;
  }

#allergiemelding li input[type="checkbox"] ~ .checkbox-art:before{content: '\e00D'!important;color:#E30613 !important}
#allergiemelding li input[type="checkbox"]:not(:checked) ~ .checkbox-art:before{content: '' !important;}
#ingredientenblok li input[type="checkbox"]:hover ~ label:before, #allergiemelding li input[type="checkbox"]:hover ~ .checkbox-art:before{transition: transform .2s;transform: scale(1.2)}
#ingredientenblok li input[type="checkbox"]:checked:hover ~ label:before, #allergiemelding li input[type="checkbox"]:checked:hover ~ .checkbox-art:before{color:#000}
#ingredientenblok li input[type="checkbox"]:checked ~ label:before, #allergiemelding li input[type="checkbox"] ~ .checkbox-art:before{
  font-family:'recepten';
  font-size:1em;
  content: '\e00D';
  color:#69AB2C;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-bottom:-8px;
  left: 0;
  position: relative;
  bottom: -2px;
  line-height:16px;
  border:1px solid #CCC;
  border-radius:3px;
  transition: all 0.5s ease-in-out}

.notindexed:checked {color:#FF9900}
#ingredientenblok li input:not(:checked) + label, #ingredientenblok li input:not(:checked) + label *, #ingredienten .ingredient input:not(:checked) + label {color: #CCCCCC;   transition:all 1s ease;text-decoration: line-through;}
#ingredientenblok li input:not(:checked) + label{transition: all 0.5s ease-in-out;}

#ingredientenblok li input:not(:checked) + label:hover{color: #303030 !important}

/* Bereidingswijze */
#bereidingswijze {width:96%;margin:0px 2vw;font-weight:400;font-size:1em;color:#303030;line-height:1.75em;text-align:center}
#bereidingswijze h2 {text-align:left;}
#bereidingswijze ol {list-style-position: inside;padding:10px}
#bereidingswijze input[type="checkbox"] {visibility:hidden;display:none;}
#bereidingswijze ol li label:hover {color:#FF0000}
#bereidingswijze ol li {display:list-item;list-style-type:decimal;transition:all 1s ease;text-align:left;margin-bottom:20px}

#bereidingswijze #style:not(:checked) ~ ol li:hover {transition: transform .2s;color: #444444;cursor: pointer;}


#maketoday {display:none;visibility:hidden}
#maketoday:checked + label {background:#69AB2C}
#maketoday:checked + label span:before {color:#E30613}

/*Notify box/bar*/
#notify {display:none;visibility:hidden}
#notify.semi {display:block;position:fixed;top:0;visibility:visible;width:100%;height:100%;background-color:rgba(0,0,0,0.25);z-index:10000}
#notifytext.bar {display:block;visibility:visible;position:fixed;height:2em;bottom:0;width:100%;background:#FFF}
#notifytext.box {width:40vw;height:auto;max-height:300px;max-width:400px;background:#FFF;border-radius:5px;margin:200px auto}
#notifytext.box div {margin:1em;display:inline-block}

#bereidingswijze #style:checked + label, #bereidingswijze #hoeveelheden:checked + label {background:#E30613;}
#bereidingswijze #style:checked + label:hover, #bereidingswijze #hoeveelheden:checked + label:hover {background-color:rgba(227, 6, 19, 0.7);filter: alpha(opacity=80);color:#FFF}

/*Test*/
#bereidingswijze #style:checked label {background:#E30613;color:#000000}
#bereidingswijze #style:checked ~ ol li {margin-bottom:20px;font-weight:normal; display:inline-block;list-style-type:none;padding:0px;-webkit-padding-start:0px;width:100%;background:#ffff}
#bereidingswijze #style:checked ~ ol li:target {transition: transform .2s;transform: scale(1.00);}
#bereidingswijze #style:checked ~ ol {-webkit-padding-start:0px;transition:all 1s ease}
#bereidingswijze #hoeveelheden:checked {display:none;visibility:hidden}
#bereidingswijze #hoeveelheden:checked ~ ol li label span {display:none;visibility:hidden}
#bereidingswijze #hoeveelheden ~ ol li label span {display:inline;color:#69AB2C;visibility:visible}
#bereidingswijze time {white-space: nowrap;color:#000000;padding:5px;transition:all 0.5s ease-in}
#bereidingswijze time:hover {background:#EEE;border-radius:5px;cursor:pointer}

/* Keukenspullen */
#keukenhulpmiddelen {width:96%;margin:0px 2vw;font-size:1em;color:#303030;line-height:1.75em}
#keukenhulpmiddelen ul {list-style-type:none;margin:0px;padding:0px}
#keukenhulpmiddelen ul li {display:inline-block;width:25%}
#keukenhulpmiddelen ul li a {color:#000;text-decoration:none}
#keukenhulpmiddelen ul li a:hover {color:#69AB2C;text-decoration:underline}

/* Gerelateerde recepten */
#variaties {width:96%;margin:0px 2vw;font-size:1em;color:#303030;line-height:1.75em}
#variaties h3 {font-size:1em;color:#303030}

/* Style table */
#variatiesTable thead{text-align:center}
#variatiesTable tbody{text-align: left}

#variatiesTable.c {direction:rtl}
#variatiesTable.left {direction:ltr}

table {border:0px;border-spacing:0px;width:100%;}
table tr td:first-child {padding-left:0.25em}
table tr td {border-bottom:1px solid #CCC}
table tr:nth-child(even) {background:#EEE}
table thead tr th {background:#CCC}

/* Allergie informatie */
#allergie_informatie {margin:0px 2vw;font-size:1em;color:#303030;line-height:1.75em}
p small{font-size:0.75em;padding:0.25em 0.25em 0.25em 1em;margin:2em 0 2em 0;border-left:4px solid #CCC;line-height:1.75em;display:block}
p small span{font-size:2em;float:left;transition:all 0.5s ease-in-out}
p small:hover > span{color:#FFCC00;}

p small span{
  color: #FFCC00;
  font-size:2em;float:left;
  margin-top:10px;
  -webkit-animation: fadeinout 4s infinite;
    animation: fadeinout 4s infinite;
}

#allergie_informatie ul li:hover {background:#EEE;-webkit-transition: background-color 0.5s ease-in-out;-moz-transition: background-color 0.5s ease-in-out;-o-transition: background-color 0.5s ease-in-out;transition: background-color 0.5s ease-in-out}
#allergie_informatie ul li input:checked ~ label {cursor:pointer;color:#E30613} /*Fee : Aangepast* = gesplit */
#allergie_informatie ul li input:checked:hover ~ label {cursor:pointer;color:#E30613 !important} /*Fee : Aangepast* = gesplit */
#allergie_informatie ul li input:hover ~ label {cursor:pointer;color:#69AB2C} /*Fee : Aangepast* = gesplit = display:none;visibility:hidden = deleted */

#allergie_informatie ul li label {    position: absolute;transition:all 0.5s ease-in-out;font-size:1.25em;font-weight:bold;width:100%;display:block}
#allergie_informatie ul li label div {text-align:center;font-family:'recepten';font-size:1em;background:#FFF;display:inline-block;margin:0 5px -5px 0;border-radius:5px}

#allergie_informatie ul {display:block;white-space:nowrap;overflow-x:auto;overflow-y:hidden;height:160px;width:96vw;padding:0px;
-webkit-overflow-scrolling: touch;
  scroll-snap-type:x mandatory;
-webkit-scroll-snap-type:x mandatory;
  scroll-snap-destination: 0% 60vw;
-webkit-scroll-snap-destination: 0% 60vw;
  scroll-snap-points-x: repeat(60vw);
-webkit-scroll-snap-points-x: repeat(60vw);}
#allergie_informatie ul li {white-space:normal;display:inline-block;width:60vw;height:150px;margin-right:10px;font-size:0.75em;background:#FAFAFA;padding:5px;position:relative;scroll-snap-align:center center;overflow: hidden;}/*Fee : toegevoegd = overflow: auto;*/

.pindaallergie:before, .koemelkallergie:before, .glutenallergie:before, .suikerallergie:before, .sesamallergie:before, .eiallergie:before, .lactoseallergie:before, .schaaldierenallergie:before, .sojaallergie:before, .visallergie:before, .mosterdallergie:before, .selderijallergie:before, .zoutarm:before, .sulfietallergie:before, .notenallergie:before, #boodschappen:before {
  position: absolute;
  font-family:'recepten';
  font-size:12em;
  content: '\e037';
  bottom:0em;
  right:0em;
  opacity: 0.05;
  filter: alpha(opacity=5);
}

#boodschappen:before {content: '\e027'}
.koemelkallergie:before{content: '\e063'}
.glutenallergie:before{content: '\e01c'}
.sesamallergie:before{content: '\e02e'}
.suikerallergie:before{content: '\e030'}
.lactoseallergie:before{content: '\e021'}
.eiallergie:before{content: '\e01a'}
.lupineallergie:before{content: '\e033'}
.notenallergie:before{content: '\e038'}
.schaaldierenallergie:before{content: '\e02a'}
.mosterdallergie:before{content: '\e024'}
.selderijallergie:before{content: '\e028'}
.sojaallergie:before{content: '\e02c'}
.sulfietallergie:before{content: '\e14'}
.visallergie:before{content: '\e001'}


/* voedingswaarde */
#voedingswaardeblok {page-break-inside: avoid;margin: 0px 2vw}/*Fee : Toegevoegd = margin 0px 2vw*/
#voedingswaardeblok table {max-width:96vw;margin:0 0 1em 0}
#voedingswaardeblok table tr td {border-bottom:1px solid #CCC; line-height: 2em;}
#voedingswaardeblok table tr:first-child td, #voedingswaarde table tr:nth-child(3) td {border-bottom:none}
#voedingswaardeblok table tr:nth-child(14) td, #voedingswaardeblok table tr:nth-child(2) td {border-bottom:3px solid #CCC}
#voedingswaardeblok table tr:nth-child(n+15) td:nth-child(n+2) {text-align:right}
#voedingswaardeblok table tr:nth-child(n+15) td {font-size:12px}
#voedingswaardeblok table tr:first-child td, #voedingswaarde table tr:nth-child(2) td {font-size:14px}
#voedingswaardeblok table tr:nth-child(8) td, #voedingswaardeblok table tr:nth-child(9) td,#voedingswaardeblok table tr:nth-child(4) td,#voedingswaardeblok table tr:nth-child(3) td {font-size:13px;padding-left:15px}

/* hide 3rd column for mobile */
#voedingswaardeblok table tr td:nth-child(2), #voedingswaardeblok table tr th:nth-child(2) {visibility:hidden;display:none}
.button:hover, .button-small:hover, .footer ul li a:hover, .pagenav a:hover {background-color:rgba(105, 171, 44, 0.7);filter: alpha(opacity=80);color:#FFF}
.button, #scroller, .footer ul li a, .pagenav a {cursor:pointer;background:#69AB2C;text-transform:uppercase;font-weight:bold;padding:0 0.5em 0 0.5em;font-size:1em;color:#FFF;text-decoration:none;border-radius: 3px;line-height:2.25em;margin-top: 0.75em;display:inline-block;min-width:2.25em;text-align:center;transition:all 0.5s ease}
#boodschappen .button, .pagenav a, .pagenav b {margin-top: 0.25em;margin-right:0.25em;height: 38px;padding-top: 2px;}
.pagenav b {display:inline-block;width:40px;text-align:center}

#loginbox {width:320px;margin:10px auto 10px;order:2}
#loginbox .button {width:141px}
#loginbox .login {width:20px}
.button span[data-icon]:before {font-size:1.5em}
.button-small {cursor:pointer;background:#69AB2C;text-transform:uppercase;font-weight:bold;padding:0.2em;font-size:1em;color:#FFF;text-decoration:none;border-radius: 3px;line-height:1.5em;display:inline-block;text-align:center;transition:all 0.5s ease;margin-right:5px}
.button-small span[data-icon]:before {font-size:1em;line-height:1.5em;height:auto;margin-top:0;min-width:0px}
#scroller {position:fixed;right:0px;bottom:12px;height:2em;width:2em;z-index:50000}
#expander {width:300px;height:auto;display:block;position:fixed;right:10px;bottom:-300px;background:#FFF;z-index:49000}
#expander:hover {transition: all .4s ease-in-out;bottom:10px}

.pijl {display:none;visibility:hidden}
.f {background-color:#29487d;transition:all 1s ease-in-out;}
.t {background-color:#1DA1F2}
.gp {background-color:#DC4A38}
.p {background-color:#BD081B}
.w {background-color:#34D744}
.e {background-color:#FFBC00}

.f div, .t div, .gp div, .p div, .w div, .e div, .tb, .ma {position:absolute;background:#E30613;border-radius:10px;font-size:0.5em;line-height:1.5em;padding:5px;color:#FFF;width:10px !important;margin-top:-3px;margin-left:-13px}
.f:hover div, .t:hover div, .gp:hover div, .p:hover div, .w:hover div, .e:hover div {opacity: 0 !important;filter: alpha(opacity=0) !important;margin-top:-32px;transition:all 0.5s ease-in-out}

#content {width:100%}
div#content p {line-height:1.75em;margin: 10px 10px 10px 10px}

#review {margin:0px}
#review input {width:239px; margin-top: 0.75em;}
#reviews blockquote {font-style:italic;font-size:1em;padding:0.25em 0.25em 0.25em 1em;margin:0.5em 0 0.5em 0;border-left:4px solid #CCC;line-height:1.75em;display:block}
#reviews blockquote::before{
  content: "\201C";
  font-size:2em;
  color:#CCC;
  position: relative;
  left: -5px;
  top:0px;
}

.page {
  float: left;
  width: 100vw;
  height: 100vh;
}

#recensies {
  overflow-y: hidden;
  min-height: 245px; /* Fee : Toegevoegd*/
  width: 100%;
  height: auto;
  overflow-x: scroll;/* Fee : Aanpassing*/
  white-space: nowrap;
  scroll-direction: horizontal;
  -webkit-scroll-snap-points-x: repeat(50%);
      -ms-scroll-snap-points-x: repeat(50%);
          scroll-snap-points-x: repeat(50%);
  -webkit-scroll-snap-type:  x mandatory; /* Fee : Aanpassing*/
      -ms-scroll-snap-type:  x mandatory; /* Fee : Aanpassing*/
          scroll-snap-type:  x mandatory; /* Fee : Aanpassing*/
  -webkit-scroll-snap-destination: 50% 0%;
      -ms-scroll-snap-destination: 50% 0%;
          scroll-snap-destination: 50% 0%;
  margin-bottom:1em;
}


.recensie {scroll-snap-align: start;width:100%;margin:0;height:235px;padding:0;display:inline-block;white-space: normal;vertical-align:top}  /* Fee : Aanpassing "Toevoeging:scroll-snap-align: start"*/
.recensie div:not(.recensist) {background:#EEE;border-radius:15px;width:90%;height:70%;padding:5%;position:relative} /*Fee : Toegevoegd = height: 70%*/
.recensie div:not(.recensist):after {
  content: '';   display: inline-block;
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 0;
  height: 0;
  border: 27px solid transparent;
  border-top-color: #EEE;
  border-bottom: 0;
  border-left: 0;
  margin-left: -13.5px;
  margin-bottom: -27px}

   .recensist {
     font-size:13px;
     margin-left:15%;
     margin-top:0.5em}
   .recensist span[data-icon]:before {margin:0;color:#E7711B}
   #recensies::-webkit-scrollbar {
    width: 8px;
    height: 10px;
     overflow-x: scroll}
  #recensies::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #c2c9d2}

/* toc */
#toc {margin:1em 0em;padding:0em 1em}
aside {
    position: sticky;
    top: calc(789px - 97px - 100vh);
    display: flex;
    flex-direction: column}

#recepten-lijstje{
  order:3;
  margin: 0px 2vw;
  width: 320px;
  position: relative;
  margin: 0px auto 10px}





.topbanner {text-align:center;margin:3em auto 1em auto;max-height:280px;height:100%}

#bk {list-style-type:none;padding:0;margin:20px 0.5em}
#bk li a {text-decoration:none;color:#555555}
#bk li a:hover {text-decoration:none;color:#69AB2C}
#bk li:before {font: 20px 'Recepten';content:"\e008";position:relative;top:4px}
#bk li:last-child:before {content: "\e00c";top:2px}
#bk li:first-child:before {content: ""}

.xm {margin:0 0 0 20px}
 #scroll-snap{scroll-snap-type: x mandatory;}/* Fee : Aanpassing*/
.progress-container {position:fixed;bottom:3em;width:100%;height:4px;background:#EEE;border-bottom:1px solid #FFF;margin-top:-1px}
.progress-bar {height:4px;background:#CCC;width:0%}

.artimg{
    float: left;
    border: 1px solid #EEE;

    border-radius: 5px;
    margin: 7px 10px 0px 0px;
}

#lijst{
  padding-left: 0px;
  display: grid;
  grid-template-columns: repeat(1, auto);
  grid-row-gap: 1em}

 .details-backside{
   cursor: pointer;
 }

.vertical-mid{
 z-index: 2;
 position:relative;
 width: 100%;
 height: 100%;
 top: 200px;
 }
 .slideRblock{
      display: block;
    width: 40px;
    position: absolute;
    height: 150px;
    right: 10px;
    top: -130px;
    cursor: pointer
 }

 .slideRight{
    opacity: 0.3;
    border-left: #B4C8E9;
    border-top: #B4C8E9;
    border-right: 4px solid #303030;
    border-bottom: 4px solid #303030;
    width: 15px;
    right: 5px;
    top: 80px;
    height: 15px;
    transform: rotate(-45deg);
    margin-top: 4px;
    margin-left: 4px;
    position: absolute;
    transition:all 0.5s ease-in-out}

 .slideRblock:hover >.slideRight{
    opacity: 1;
    transition:all 0.5s ease;
    border-right: 4px solid #303030;
    border-bottom: 4px solid #303030}

 .slideLeft{
    opacity: 0.3;
    border-left: #B4C8E9;
    border-top: #B4C8E9;
    border-right: 4px solid #303030;
    border-bottom: 4px solid #303030;
    width: 15px;
    top: 80px;
    height: 15px;
    transform: rotate(135deg);
    margin-top: 4px;
    margin-left: 4px;
    position: absolute;
    transition:all 0.5s ease-in-out}


 .slideLblock:hover > .slideLeft{
   opacity: 1;
  transition:all 0.5s ease;
   border-right: 4px solid #303030;
   border-bottom: 4px solid #303030
   }

 .slideLblock{
   display: block;
    width: 40px;
    position: absolute;
    height: 150px;
    left: 10px;
    top: -130px;
    cursor: pointer}


#filter:required:invalid + .resetbutton {
        visibility: hidden !important;
        display:none !important}


#filter:required:invalid + .center {

}

.center{
    text-align: center;
    padding: 100px 0;}

.resetbutton{
      margin-top: 0.0em !important}

#header-grid-container{
   display: grid;
   margin: 0px auto;

}


 #bar #menucheck:checked + #header-grid-container #menupanel, #bar #zoekcheck:checked + #zoekpanel {
    position: fixed;
    bottom: 3em;
    height: 9em;
    transition: all 0.4s ease-in-out;  }



 #boodschappenButton:after{content: " Toevoegen aan lijst"}
 #ideeenButton:after{content:" Ideeën"}
 #hoeveelhedenButton:after{content:" Hoeveelheden"}
 #inStappenButton:after{content:" In stappen"}

 #gerelateerde-recepten {
         margin:1em 0  0px 2vw

 }
#allergie_informatie small{font-size: 0.75em;}

.infoAllergie{
    overflow-y:auto;
    margin-top: 25px;
    height: 130px;

}
.checkbox-art:before {bottom: 150px !important}
#inhoudsopgave{margin: 0px 2vw}
#gerelateerde_recepten{margin: 2vw 2vw}

/* Fee : Aanpassing-start = receptkaarten*/
 .receptkaarten {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 12px;
    list-style-type:none;
    padding-left:0px !important;
}

.receptkaarten div:nth-child(4) span{
    display: -webkit-inline-box;
    text-overflow: ellipsis;
    max-width: 280px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 60px;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 4px;
    font-weight: bold;
    color: #303030;
    transition: all 0.5s ease-in-out;
    line-height: 1.75em}
.receptkaarten li:hover div:nth-child(4){color:#69AB2C}

.receptkaarten div:nth-child(4){
    background: white;
    display: block;
    top: 200px;
    width: 96%;
    z-index: 1000;
    position: absolute;
    display: -webkit-inline-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 60px;
    overflow: hidden;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 0px;
    font-weight: bold;
    color: #303030;
    transition: all 0.5s ease-in-out;
    line-height: 1.75em;}

.receptkaarten .ster:nth-child(3) span:before {
 font: 20px 'Recepten';
 content: "\e013";
 margin-right: 4px;
 bottom: 0;
 position: absolute;
 color:#FFBC00}

.receptkaarten li {
height:300px;
border:1px solid #EEE;
max-width:100%;
border-radius:5px;
overflow:hidden;  position: relative;   transition: all 0.5s ease-in-out
}

.receptkaarten .banner {
max-width:300px;
text-align:center;
height:0px;
max-height:90px;
border:0px;
grid-column:1 / span 1;
}

.clock {
 bottom: 4px;
 right: 5px;
 position: absolute;
 display: inline-block;
 color:#FFBC00;
 margin-right: 5px}

.clock:before {
font: 20px 'Recepten';
content: "\e035";
margin-right: 4px;
color:#FFBC00;
top:4px;
position:relative}
.receptkaarten{transition: all 0.5s ease-in-out}

.receptkaarten li a:nth-child(3) {
    display: inline-block;
    max-height:200px; overflow: hidden}

/*
.receptkaarten [data-allergie*="g" i] {
    opacity:0.5;
    order:50}

.receptkaarten [data-sporen*="g" i] {
    opacity:0.75;
    order:14}

.receptkaarten [data-allergie*="g" i] img {
    filter: grayscale(100%)}

.receptkaarten [data-sporen*="g" i] img {
    filter: grayscale(50%)}
  */
.a:before{color: #CA2027 !important}

.receptkaarten li img {
 text-decoration:none;
 z-index:100;
 display:block;
 height:200px;
 max-height:200px;
 color:#000;
 width: 260px;}

.receptkaarten li .ster {
 bottom: 5px;
 left: 0;
     color: #FFBC00;
 position: absolute;
 display: inline-block;
 margin-left: 5px}

.kaartallergenen:empty{display: none}

.kaartallergenen{
    opacity: 1;
    height: 15px;
    transition: all 0.5s ease-in-out;
    background-color: rgba(238, 238, 238, 0.5);
    width:100%;
    min-height: 25px;
    position: absolute;
    padding-top: 5px;
    padding-left: 5px;
    bottom: 100px;
    white-space: normal;
    display: grid;
    grid-template-columns: repeat(10, 24px)}

.receptkaarten .kaartallergenen:nth-child(3) span:before {
 font: 20px 'Recepten';
 color:#303030;
 position: relative;
 top: 0px;
 opacity: 1;
 width:20px;
 height:20px}

#menupanel a:nth-child(5):before{content:'\e027'; font: 30px 'Recepten';top: 7px;position: relative}
#menupanel a:nth-child(6):before{content:'\e02b'; font: 30px 'Recepten';top: 7px;position: relative}
.a-al:before{content: '\e021'}/* Lactose */
.c-al:before{content: '\e02a'}/* Schaaldieren */
.d-al:before{content: '\e028'}/* Selderij */
.e-al:before{content: '\e01a'}/* Ei */
.f-al:before{content: '\e14'} /* Sulfiet */
.g-al:before{content: '\e01c'}/* Gluten */
.i-al:before{content: '\e033'}/* Lupine */
.j-al:before{content: '\e02c'}/* Soja */
.k-al:before{content: '\e063'}/* Melk */
.l-al:before{content: '\e030'}/* Suikervrij */
.m-al:before{content: '\e02e'}/* Sesam */
.n-al:before{content: '\e038'}/* Noten */
.p-al:before{content: '\e037'}/* Pinda */
.t-al:before{content: '\e024'}/* Mosterd */
.v-al:before{content: '\e001'}/* Vis */
.z-al:before{content: '\e002'}/* Zoutarm */




.receptkaarten li:hover .kaartallergenen{
    opacity: 1.0;
    bottom: 100px}
.button.login span:before{ transform: rotate(90deg)}


span.button{
  background-color:#FFF!important;
  color:#69AB2C !important;
 -moz-box-shadow: inset 0 0 2px #69AB2C;
 box-shadow: inset 0 0 2px #69AB2C;
}


.deel a { text-decoration: none;background:#FFF;width:35px;height:35px;display:block;position:absolute;right:2%;top:5px;z-index:100;border-radius:3px;transition: all .4s ease-in-out;}
.left a {left:2%}

.deel a:first-child {line-height:35px;font-size:20px;width:20px:height:20px;position:absolute;background:#FFF;z-index:1000}
.deel a:first-child:before {content:"\e01E";color:#E30613;font-family:'recepten';line-height:35px;font-size:20px;margin:8px}
.deel a:first-child:hover:before {-webkit-animation: animateHeart 2.5s infinite;animation: animateHeart 2.5s infinite}

.deel a:nth-child(2) {display:inline;color:#FFF;background:#FFBC00;top: 45px}
.left a:nth-child(2) {top: 45px}
.deel a:nth-child(2):before {font-family:'recepten';content:"\e006";margin:8px;line-height:35px;font-size:20px}

.deel a:nth-child(3) {color:#FFF;background:#CA2027;top: 125px}
.left a:nth-child(3) {top: 125px}
.deel a:nth-child(3):before {font-family:'recepten';content:"\e026";margin:8px;line-height:35px;font-size:20px}

.deel a:nth-child(4) {color:#FFF;background:#3B5998;top: 85px}
.left a:nth-child(4) {top: 85px}
.deel a:nth-child(4):before {font-family:'recepten';content:"\e034";margin:8px;line-height:35px;font-size:20px}

.deel:hover a:hover {color:#CCC}

.receptkaarten li a > span:nth-child(1){z-index: 1000;position:absolute;top: 5px;background-color:rgba(255, 255, 255,0.77);border-radius:3px;line-height:25px;width:60px;text-align:center;font-weight:800;font-size:14px;text-transform:uppercase;color:#69AB2C;margin-left:5px}
.receptkaarten li a .left {right:5px}
.receptkaarten li a:visited > span:nth-child(1){color:#303030}

#overzicht ul li{list-style-type: none}
#overzicht ul{list-style-position: inside;padding:0px}

#zoekpanel span{position: absolute}
#zoekpanel span:nth-child(1){margin-top: 0.7em;margin-left: 10px;position: absolute}
/*
#zoekpanel .zoek span:after{
        content: '\e00f';
    font: 30px 'Recepten';
    top: 11px;
    position: relative;
    left: -35px;}
  */

  #zoekpanel .zoek span:after {
    content: '\e00f';
    font: 30px 'Recepten';
    position: relative;
    bottom: 35px;
    left: 280px;
}

 #recent, #recepten-lijstje li a:before {font-family:'recepten';content:"\e006";margin:4px;line-height:31px;font-size:20px; border: 1px solid #FFBC00}
 #recepten-lijstje li a{display: inline;color: #FFF;background: #FFBC00;width: 30px;height: 30px; border: 1px solid #FFBC00;border-radius: 3px; position: absolute;text-decoration: none;margin-top: 2px; right: 0; margin-top: 2px;}


#zoekpanel .zoek input:not(:placeholder-shown) ~ span:after, .zoek input:not(:placeholder-shown) ~ span:after{animation: zoekpulse 2s infinite}


#zoekpanel input:nth-child(2){position: absolute;width: 70%;height: 4.24ex;margin-left: 95px;margin-top: 0.5em;display:inline}
h1, h2, h3, h4 {margin: 10px 10px 10px 10px}
.ad{margin: 10px auto 10px auto}
#sort{ margin-right:10px}
@media only screen (orientation:landscape){
   .receptkaarten {
     padding-left: unset;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    list-style-type:none;
    padding:0;
    padding-right: 80px}
   .ad, div#content p, h1, h2, h3, h4 {
    margin: 10px 10px 10px 0px;
}
}

@media screen and (min-width: 480px){

#zoekpanel span:nth-child(1){
  display:none;
  width: 0
}

#zoekpanel input:nth-child(2){
          position: unset;
    border-radius: 3px;
    text-indent: 10px;
    width: 99%;
        height: 4.24ex;
    margin-top: 0.74em;
    margin-left: -2px;
    border: 1px solid #CCC;
}
#zoekpanel span:nth-child(3):after{content: '\e00f';font: 30px 'Recepten';top: 10px;position: relative; left: -40px}

[draggable=true]~.receptkaarten li{
  scale:0.5;
  background-color:purple
}
  #recepten-lijstje{
  order:0
}
#recepten-lijstje li{

}

#loginbox {width:320px;margin:20px auto 0px;order:0}
   #receptlist, #overviewb, #overzicht{margin: 2vw  2vw}

  .receptkaarten li:hover{
  opacity:1}

.receptkaarten li:hover img{
  filter: grayscale(0%);
  transform: scale(1.2);
  transition: all 5s ease-out}

.receptkaarten li img {transition: all 0.5s ease-in-out}
.nozoom{transition:none !important}

.receptkaarten {padding-left: unset;grid-template-columns: repeat(2, 1fr);}

#boodschappen ul li {-webkit-animation:pulse 1s normal forwards}
.receptkaarten li:hover .kaartallergenen:nth-child(3) span:before {top: 0px;opacity: 1}
.kaartallergenen span:before{transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)}
.kaartallergenen span:first-child:before {transition-delay: 0.00s}
.kaartallergenen span:nth-child(2):before {transition-delay:0.05s}
.kaartallergenen span:nth-child(3):before {transition-delay:0.1s}
.kaartallergenen span:nth-child(4):before {transition-delay:0.15s}
.kaartallergenen span:nth-child(5):before {transition-delay:0.2s}
.kaartallergenen span:nth-child(6):before {transition-delay:0.25s}
.kaartallergenen span:nth-child(7):before {transition-delay:0.3s}
.kaartallergenen span:nth-child(8):before {transition-delay:0.35s}
.kaartallergenen span:nth-child(9):before {transition-delay:0.4s}
.kaartallergenen span:nth-child(10):before {transition-delay:0.45s}

.receptkaarten .banner{max-width:480px;grid-column:1 / span 2}

.kaartallergenen {overflow: hidden;opacity: 0;height: 12px;  bottom: 70px}
.receptkaarten .kaartallergenen:nth-child(3) span:before{top: 30px;opacity: 0}
.deel a:first-child {top:5px;right:5px; border: 1px solid #EEE}
.deel a:nth-child(2) {top:5px;right:5px; border: 1px solid #FFBC00}
.deel a:nth-child(3) {top:5px;right:5px; border: 1px solid #CA2027}
.deel a:nth-child(4) {top:5px;right:5px; border: 1px solid #3B5998}
.deel:hover a:nth-child(2) {line-height:35px;font-size:20px;position:absolute;right: 48px;margin:42px 0 0 40px;background:#FFBC00;z-index:20}
.deel:hover a:nth-child(3) {line-height:35px;font-size:20px;position:absolute;right: 48px;margin:0 0 0 40px;background:#CA2027;z-index:20}
.deel:hover a:nth-child(4) {line-height:35px;font-size:20px;position:absolute;margin:42px 0 0 0;background:#3B5998;z-index:10}
.receptkaarten {display: grid;grid-template-columns: repeat(2, 1fr); grid-gap: 12px;list-style-type:none;padding: 0px 10px 0px 10px;}
#menupanel a:first-child { width: 650px}

.infoAllergie {overflow-y: auto;margin-top: 25px;height: 70px}
.checkbox-art:before{margin-right: 12px !important;position: relative !important;bottom: 90px !important}
.recensie div:not(.recensist) {height: 60%}
#content {width:100%; margin-left: 0px}

#article {}
.left {float:left;margin-right:10px;margin-bottom:10px}
.related, #specialoverview {list-style-type:none;padding:0px}
.related li {border-bottom:1px solid #EEE;display:block;height:90px;padding:8px 8px 8px 0px}
.related li:last-child {border-bottom:0px solid #FFF}
.related li img {float:left;margin:8px 8px 8px 0}

#specialoverview li {}
#specialoverview li img {border-radius: 5px;margin:1px;border:1px solid #CCC;border-spacing:1px;border-collapse:seperate }

#voedingswaardeblok table tr td:nth-child(2), #voedingswaardeblok table tr th:nth-child(2) {visibility:visible;display:table-cell}
.footer input{width:70vw}

#bk {margin:0px}
#bk li {display:inline-block}
#bk li:before, #bk li:last-child:before {font-family: 'Open Sans';font-size:1em;color:#CCC;content: "\00BB";top:0;margin:0px 5px}
#bk li:first-child:before {content: "";margin:0px}

#gerelateerde-recepten {margin: 1em 0 0px 0vw}
#boodschappenButton:after{content: " Boodschappen toevoegen"}
#ideeenButton:after{content: " Mis je nog iets?"}
#hoeveelhedenButton:after{content:" Toon hoeveelheden"}
#inStappenButton:after{content:" Koken in stappen"}

table {text-align:left}
}
@media screen and (min-width: 800px) {
.receptkaarten .banner {max-width:800px;grid-column:1 / span 3;}

.receptkaarten {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 12px;list-style-type:none;padding:0}
.recensie div:not(.recensist) {height: 50%}
.inner { margin-top: 155px;}
#lijst{grid-template-columns: repeat(2, auto);grid-column-gap: 1.6em;max-width:800px}
.overlay-back {bottom: 145px;}
#header-grid-container{width: 1124px; }
}
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
  .receptkaarten{padding: 10px;

  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex; -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 1000px
  }
 .receptkaarten li{
  margin: 10px 10px 10px 10px;}
/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

     .receptkaarten{padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex; -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
}}

}}
@media screen and (min-width: 998px) {
  .f div, .t div, .gp div, .p div, .w div, .e div, .tb, .ma {margin-top:-48px;margin-left:25px}
    #sort{ margin-right:0px}
  .ad,div#content p,#article p, h1, h2, h3, h4 {margin: 10px 10px 10px 0px}
  .ad{
        margin: 0px auto 10px
  }

  #receptlist, #overviewb, #overzicht{margin: 0px 0vw}

  #menupanel a:first-child {margin-right: 5vw;margin: 0 1vw 0 0vw;width: unset;
    margin:unset;}

 .receptkaarten {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 12px;list-style-type:none;padding:0;margin:0}

  aside {position:sticky;top:calc(100% - 207px - 100vh);display:flex;flex-direction: column;}

  #header-grid-container{width: 980px;  grid-template-columns: auto 336px}

  .inner { margin-top: 115px}
  .overlay-back {bottom: 100px}
  .progress-container {position:static;width:100%;height:4px;bottom:auto;background:#EEE;border-top:1px solid #FFF;margin-top:-1px}
  .progress-bar {height:4px;background:#CCC;width:0%}

  #bar {top:0}
  #scroller {right:10px;bottom:4vh;border-radius:3px}
  #scroller [data-icon]:before{margin-top:-4px}
  #bar nav div {display:none;visibility:hidden}
  #menupanel, #zoekpanel {position:static;display:inline-block;visibility:visible;background:transparent;bottom:auto;width:auto;border:0;height:3em;line-height:2em;box-shadow:none}
  #zoekpanel {margin-top: -3px;margin-left: 1vw;}
  #zoekpanel input {width: 99%;margin-top:  0.5em;display:inline-block}
  #zoekpanel label {display:none}
  #menupanel a  {display:inline-block;width:auto;border:none !important;text-decoration:none;line-height:3em;color:#000;font-weight:800;text-transform:uppercase;margin:0 1vw 0 1vw}
  #menupanel a:hover  {color:#FFF}
  .butgroup {text-align:left}
  #info {margin:0px}


  .pijl {font-size:4em;color:#AAA;position:relative;top:0.15em;display:inline;visibility:visible}
  .w {visibility:hidden;display:none}
  footer div{margin-bottom:0!important}

  #boodschappen ul li:hover {padding-left:36px}
  #boodschappen ul li {margin-left:-40px}
  #bereidingswijze {text-align:left}

  #review {margin:0px}
  #review input {width:263px}
  .recensie{width:48%;margin:0 2% 0 0;height:235px;padding:0;display:inline-block;white-space: normal;vertical-align:top}

  #header {width:100%}

  #header, #inhoudsopgave, #keukenhulpmiddelen, #ingredientenblok, #voedingswaardeblok, #allergie_informatie, #variaties, #bereidingswijze, #reviews {margin:0;}
  /* #sidebar div:not(.ad) {margin-left:1vw}*/

  #sidebar #loginbox input {margin:0.25em 0}
  #loginbox label {width:5.5em;display:inline-block}
  #sidebar .rectanglebanner {max-width:336px;max-height:280px}

  #content {width:768px;grid-area:content;grid-column-start: 1;grid-row-start: 1;grid-row-end: 1}
  #sidebar {width:192px;grid-area:sidebar;grid-column-start: 2;grid-column-end: 2;grid-row-start: 1;grid-row-end: 1}
  #grid {width:980px;margin:0px auto;display:grid;grid-template-columns:auto 336px;grid-template-rows:auto;grid-column-gap:20px;grid-template-areas:"content sidebar"}

  #lijst, table {width:768px;}

  #ingredientenblok {width:768px;margin:0px}
  #ingredientenblok ul {width:768px;list-style-type:none;padding:0px}
  #ingredientenblok ul li {width:371px}
  #ingredientenblok ul li:first-child:nth-last-child(n + 5),#ingredientenblok ul li:first-child:nth-last-child(n + 5) ~ li {display: inline-block}
  #voedingswaarde table {width:374px;max-width:354px;margin:0 10px 20px 10px}

  #allergie_informatie ul {display:flex;flex-flow:column wrap;overflow-x:hidden;overflow-y:hidden;height:auto;max-height:1070px;max-width:768px;margin:0px;width:100%;padding:0px}
  #allergie_informatie ul li {margin: 0 15px 15px 0;position:relative;height:auto;width:calc(50% - 18px);font-size:0.75em;background:#FAFAFA;padding:5px;animation:all 1s;overflow:hidden}

  .zoek{grid-column: 1 / 3}
  .zoek input{width: 26vw}

  .footer .zoek{ margin: 0}
  .footer{display: grid;max-width: 998px; grid-template: auto / 39% 39% 22%; margin:0px auto}
  .footer ul{margin:0; margin-bottom:1em; list-style-type: none;grid-row: 2; text-align:left;color: #000; text-transform: lowercase}
  .footer ul li a {padding-left:0px;margin-left:0px;text-align:left;background-color:transparent;color:#000}
  .footer ul li a:hover {background-color:transparent;color:#69AB2C}

  #gerelateerde_recepten{margin: 0px 0vw !important}
  #header-grid-container{width: 980px}
  .slideRight{right: 15px}

}

@media screen and (min-width: 1124px) {

   .recensie div:not(.recensist) {height: 70%}
.footer {max-width: 1124px}
#lijst{
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 0em;
    grid-row-gap:  1.6em;

    }
    #content {width:768px;grid-area:content;grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;}
    #sidebar {width:356px;grid-area:sidebar;grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        border-left:1px solid #EEE}
    #ingredientenblok, #ingredientenblok ul {width:768px}
    #ingredientenblok ul li {width:371px}

    #sidebar > div {width:320px;}

    #grid {width:1124px;margin:0px auto;display:grid;grid-template-rows:auto;grid-column-gap:20px;grid-template-areas:"content sidebar"}
    #lijst {width:944px}

    #zoekpanel{grid-area: sidebar;grid-column-start: 2;grid-column-end: 2;grid-row-start: 1; grid-row-end: 1}
    #header-grid-container {width: 1124px;}
}


@media print {
    #gerelateerde_recepten, #bar, footer, #variaties,#voedingswaarde-grafiek, #msg, #sidebar, .button, #review, #bk, #inhoudsopgave, #q, .topbanner, #expander, #allergie_informatie small, #review p, #reviews, #recensies, #voedingswaardeblok p, #menukaart {display:none;visibility:hidden}
    .showsticky, #info li:nth-child(2),  #info li:nth-child(3),#info li:nth-child(4), #info li:nth-child(6), #info li:nth-child(7){display:none;visibility:hidden}
    #porties a{display:none;visibility:hidden}
    #porties input{font-weight: bold;border-style: none;display: inline;margin-left: -0.5%;width:45px;font-size: 1em;text-align: center;}
    #porties:before{font-weight: bold;text-transform: uppercase;content: "Voor"}
    #origin{float: right;}
    #origin a { text-decoration: none; color: #303030;}
    #allergiemelding li[data-active="0"] {display:none;visibility:hidden} /* PHP aanpassen class data active = 0 wanneer er geen occurences zij */
    #allergie_informatie {page-break-inside: avoid}
    #allergie_informatie p{ display:none;visibility:hidden }
    #allergie_informatie small{ display:block;visibility:visible}
    #allergie_informatie ul{ display: flex;flex-flow: column wrap;overflow-x: hidden;overflow-y: hidden;height: auto;height: 200px;max-height: 400px;max-width: 768px;margin: 0px;width: 100%;padding: 0px}
    #allergie_informatie ul li{margin: 0 15px 15px 0;position: relative;height: auto;width: calc(50% - 15px);font-size: 0.75em;background: #FAFAFA;padding: 5px;overflow: hidden}
}

span[data-occurence="1"]{
    text-decoration: none;
}
span[data-occurence="0"],[data-strike="0"]{
    text-decoration: line-through;
}

.highlight {
    font-weight: bold;
}

/* werkt niet zou wel mooi zijn */

body {
    overflow-y: scroll;
}


#menukaart {white-space: nowrap; overflow-x: scroll; overflow-y: hidden;background:#EEE;padding:10px;position:fixed;bottom:-256px;width:100%;height:220px;display:inline-block;z-index:51000;text-align:center;transition:0.5s all ease-in}
#menukaart li {display:inline-block;width:186px !important;height:200px;margin-left:10px;overflow:hidden;background-color: white;animation:pulse 1s normal forwards}
.show {bottom:0px !important}
.showsticky {bottom:0px !important}

#menukaart li a > span:nth-child(1){left:0;font-size: smaller}
#menukaart li a > span:nth-child(2):before{content:"X";right:0;font-size: smaller}
#menukaart li img {height: 117px;max-height: 150px;width: 188px}

#menukaart li .kaartallergenen:nth-child(3) span:before, #menukaart li .kaartallergenen, #menukaart .clock,#menukaart .clock:before,#menukaart li:hover .kaartallergenen,   #menukaart li .deel  {
    display:none}
#menukaart li:hover img {filter: unset;transform: unset;transition: unset;}
#menukaart li .ster{z-index:51000}
#menukaart [data-allergie*="g" i] img, #menukaart [data-sporen*="g" i] img {     filter:unset !important}
#menukaart div:nth-child(4) {left: 0;height: 50px;top: 114px;text-align: left;font-size: smaller}
#menukaart li:after{display: block;width: 180px !important;height: 200px;background-color: white}

 #menukaart .delete,.mkd{
    display: inline;
    top: 5px;
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    color: white;
    font-weight: bold;
    border-radius: 3px;
    line-height: 25px;
    padding-left: 1px;
    text-align: center;
    z-index: 51000;
    cursor: pointer}

 #menukaart .delete{
    right: 5px;
    background: #E30613}

.mkd span{ transform: rotate(180deg);position: absolute;left: 0;top: 2px}
.mkd{right: 35px;width: 30px;height: 30px;background: #69AB2C}

.mke{display: inline-block;width: 180px !important;height: 200px;background-color: white;border: 1px solid #CCC;border-radius: 5px}
.mke:before{position: relative;content: "+";color:#CCC;font-size: 80px;font-weight: bold;top: 45px;left: 3px}
.mkdh{border: 1px solid #69AB2C !important}
.mkdh:before{color:#69AB2C !important}

#sort{text-align:right;}
#sort label:nth-child(2){border-radius:3px 0px 0px 3px !important}
#sort label:last-child{border-radius: 0px 3px 3px 0px!important}
#sort label{background-color: rgba(105, 171, 44, 0.7);border-radius: 0px 0px 0px 0px;cursor: pointer;text-transform: uppercase;font-weight: bold;padding: 0 0.5em 0 0.5em;font-size: 1em;color: #FFF;text-decoration: none;line-height: 2.25em;margin-top: 0.75em;display: inline-block;min-width: 2.25em;text-align: center;transition: all 0.5s ease;}
#sort label:hover{background: #69AB2C;}
#sort input:checked +label{background: #69AB2C;}

#sort input{display: none;visibility: hidden}


abbr{
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}

#koelkast{
    border:none;
    margin:0px auto 10px;
}


/* Stuff for the rotating slides in the sidebar */
.carouselinput {
  display: none;
}

#slider {
  height: 300px;
  margin: 0 20px 20px 20px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#recentheader {
  margin: 0 20px 20px 20px;
}

#slider label {
  margin: auto;
  width: 75%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(-30%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-15%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(15%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(30%,0,-200px);
}
#s1:checked,#s2:checked,#s3:checked,#s4:checked,#s5:checked{
      pointer-events: auto;
}
#s1:not(:checked),#s2:not(:checked),#s3:not(:checked),#s4:not(:checked),#s5:not(:checked){
     pointer-events: none;
}

/*
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }  */
#slide1, #slide2, #slide3, #slide4, #slide5{
    /*background: white;*/
}

.r2{
    display: block !important;
    background:white;
    width:250px;
}



/*============= Code for the timers =============*/
.cancelTimer{
    padding-left: 70px;
}
.timers{
    float: left;
    font-family: 'recepten'
}
.timer{
    cursor:pointer;
}