@media only screen and (max-width: 767px) {
    ul.toplist li.desktop_only, .desktop_only {display:none;}
    ul.toplist li.mobile_only, .mobile_only {display:block;}
    
    .wrapper {padding:0 10px;}
    
    #nav-container::before {transform:none;right:0;width:100%;}
    #nav-container.home::before {right: 0%;}
    ul.nav {right:auto;left:10%;}
    
    .home #header-background, #header-background {height:100%;}
    #header .right::before {right: -27%;height: 100%;width:100%;transform: skew(-23deg, 0deg);}
    #header .content h1 {font-size: 3em;text-align:right;line-height: 1.2em;}
    #header .content {left:auto;right:12%;}
    #happyhour_text {bottom:10px;}
    
    #top {-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;}
    #top.mobile_cart {background-color:#fff;}
    #logo {width:60%;margin:auto;}
    #top-fixed.background li:nth-child(5) .btn, #top-fixed.producten li:nth-child(5) .btn {background-color:var(--lichtgroen);color:#fff;}
    #top-fixed.background .col {padding-top:3%;}
    
	#copyright .col.col-12.right {text-align:left;padding-top:0;}
    #footer {padding-bottom:0;padding-top:15px;}
    
    #hoehetwerkt .circle {left:10%;}
    #meestverkocht .col {width:50%;}
    #nieuwegerechten .col {width:50%;}
    #reviewslider {padding-top:40px;}
    
    #searchform {position:relative;top:0;}
    
    .categorie-lijst-arrow.volgende {right:10px;}
    
    #producten-overzicht {padding-right:3%;}
    .product {padding-bottom:10px;}
    
    #producten-bg:after {content:'';background-color:#fff;opacity:0.3;width:100%;height:100%;position:absolute;top:0;left:0;}
    .producten .col.producten-23, .producten .col.producten-13 {width:100%;}
    .producten .prod-img {width:50%;margin-bottom:10px;}
    
    .product-main .col.col-15.prijs {position:absolute;top:10px;right:10px;}
    
    .product span.happyhour {bottom:auto;top:85px;}
    
    #wachttijd {top:150px;}
    .producten .col.producten-13 {margin-top:0;padding-top:70px;position:fixed;left:0;width:100%;height:100%;overflow-y:auto;background-color:#fff;z-index:888;-webkit-overflow-scrolling:touch;-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        top:-150%;opacity:0;}
    .producten .col.producten-13.show {top:0;opacity:1;}
    #cart-container hr {width:100%;margin-left:0;}
    #cart_total .col.col-12 {width:50%;}
}

@media only screen and (min-width: 500px) and (max-width: 767px){
    #top .col.col-15.left {float:left;width:35%;}
    #top .col.col-45.right {width:65%;}
    #header .content h1 {font-size: 4em;}
    #header .content, .home #header .content {top:19%;}
    #logo {width:100%;margin:0;}
}

@media only screen and (min-width: 768px) {
    #top-fixed .col:nth-child(1) a {display:block;}
    #top-fixed .col:nth-child(1) a:after {content:'';width:200%;height:100%;/*background-color:rgba(255,255,255,0.5);*/position:absolute;top:0;left:0;z-index:-1;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
    
    #header .content h1 {font-size: 2.5em;}
    #header .content h1 br {display:none;}
    
    .producten .col.producten-13 {position:fixed;top:0;right:0;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;}
    .producten .col.producten-13.background #cart-container {margin-top: 63px;}
    .producten .col.producten-13.background #wachttijd {top: 64px;}
    #footer.small,#copyright.small,#madeby.small {width: 66.66%;}
}

@media only screen and (min-width: 768px) and (max-width: 859px){
    #searchform {position:relative;top:0;}
    .product .prijs h2 {padding-right:0;padding-top:60px;}
    #nav-container::before {right: -12%;}
}

@media only screen and (min-width: 860px) and (max-width: 1043px){
    
    .btn.add-product {
        font-size: 16px;
        padding: 3px 7px;
    }
    
    .product .prijs h2 {padding-right:32px;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
    .home #header-background {height:100%;}
    
    #header .right::before {
        right: 0;
        height: 100%;
    }
    
    .product span.happyhour {right: auto;padding: 4px 10px;left: 10px;}
    .product span.happyhour span {display:block;}
    
    #header .content {left:45%;}
    
    #nav-container.home::before {right: -7.6%;}
}

@media only screen and (min-width: 768px) and (max-width: 1044px){
    ul.toplist li {margin-right:15px;}
    ul.toplist li:first-child {margin-right:0;}
    
    #categorie-lijst-container {top:65px;}
    /*#nav-container::before {transform:none;}*/
    
	#cart {padding:0 10px;}
    #cart_total {padding:10px 10px;}
    
    .wrapper {padding-left:10px;padding-right:10px;}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px){
    #cart {padding:0 10%;}
    #cart_total {padding:10px 10%;}
}

@media only screen and (min-width: 1024px){
    .wrapper {width:1000px;}
    
    #footer.small .wrapper,#copyright.small .wrapper,#madeby.small .wrapper {width:100%;}
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
     html, body {
		font-weight:300;
	}
}