.show_1024,
.show_768 { display:none!important; }

/* mobile nav */
#mobile_nav {
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(255, 255, 255, 0.95);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; 
}
#mobile_nav .inner {
	padding: 20px 0;
}
#mobile_nav ul {
	list-style: none;	
}
#mobile_nav ul li {
	margin: 15px 0;
}
#mobile_nav ul li a {
	display: inline-block;
	font-size: 22px;
	line-height: 1.5;
}
#mobile_nav ul li.has_children a {
	padding-right: 24px;
	position: relative;
}
#mobile_nav ul li.has_children a:after {
	display: block;
	content: '';
	width: 12px;
	height: 12px;
	background: url(img/icon-caret.svg) center center no-repeat;
	background-size: 12px auto;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -6px;
	-webkit-transition:all 100ms linear;
	     -o-transition:all 100ms linear;
		    transition:all 100ms linear;
}
#mobile_nav ul li.has_children.open a:after {
	-webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	        transform: rotate(180deg);
}
#mobile_nav ul li.has_children ul li a {
	padding-right: 0;
}
#mobile_nav ul li.has_children ul li a:after {
	display: none;
}
#mobile_nav ul li ul {
	display: none;
	padding-bottom: 10px;
}
#mobile_nav ul li ul li a {
	font-size: 16px;
	color: var(--color-brown);
}
#mobile_nav ul li ul li ul {
	display: block;
	padding-bottom: 0;
}
#mobile_nav ul li ul li ul li:before {
	display: inline;
	content: "\2B22";
	margin-right: 6px;
	color: var(--color-brown);
	font-size: 12px;
    position: relative;
    top: -1px;
	opacity: 0.3;
}
#mobile_nav ul li ul li ul li a {
	font-size: 14px;
}
#mobile_nav .close {
	display: inline-block;
    width: 20px;
    height: 20px;
	margin-top: 20px;
    background: url(img/icon-close.svg) center center no-repeat;
    background-size: 14px auto;
    border: 1px solid var(--color-brown);
    padding: 10px;
    border-radius: 100%;
}

@media screen and (max-width: 1440px){

	/* header */
	#header .logo { max-width: 400px; }

}

@media screen and (max-width: 1200px){
	
	.wrapper { padding-left: 50px; padding-right: 50px; }

}

@media screen and (max-width: 1024px){
		
	.hide_1024 { display: none!important; } /*TODO JJ webkit learn*/
	.show_1024 { display: block!important; }

	h1 { font-size: 44px; }
	h2 { font-size: 40px; }
	h3, h4 { font-size: 20px; }
	h5, h6 { font-size: 18px; }
	p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
    
	.wrapper { padding-left: 30px; padding-right: 30px; }

	/* announcement */
	.announcement { font-size: 20px; }
	.announcement .small { font-size: 16px; font-weight: normal; }

	/* promo */
	#promo { padding: 10px 0; font-size: 16px; text-align: center; }

	/* header */
	#header { margin-bottom: 0; }
	#header .logo { max-width: 300px; }

	/* nav */
	#nav { background: var(--color-yellow); }
	#nav .wrapper { padding: 0; }
	#nav .toggle_nav { display: block; padding: 15px 0; color: #ffffff; text-transform: uppercase; font-size: 20px; font-weight: 700; letter-spacing: 0.1em; }

	/* footer */
	#footer .cols .col { width: 100%; float: none; text-align: center!important; }
	#footer .nav li { padding-right: 12px; }
	#footer .nav li:after { margin-left: 12px; }
	#footer .nav li a { font-size: 18px; }
	#footer p span { display: block; height: 0; padding: 0; text-align: left; text-indent: -9999em; }
	#footer .socials { margin-top: 30px; }

	/* home */
	#home .intro { padding: 50px 0 30px; }
	#home .services .flex { margin: 0 -20px; }
	#home .services .flex .flex-item { padding: 0 20px; }

	/* catering */
	#catering .intro { padding-top: 50px; }
	#catering .content { margin: 30px 0 50px; }
	#catering .content ul { margin: 0 0 20px 20px; }
	#catering .content ul li { margin: 8px 0; line-height: 1.4; font-size: 16px; line-height: 1.5; }
	#catering .services { margin-top: 50px; }
	#catering .services .inner { max-width: none; }
	#catering .services .image_text { margin-bottom: 30px; padding: 30px !important; background: var(--color-yellow-pale); }
	#catering .services .image_text:before { display: none; }
	#catering .services .image_text .image { width: 100%; max-width: 260px; position: relative; top: auto; left: auto; right: auto !important; -webkit-transform: none; -ms-transform: none; transform: none; margin: 0 auto 20px; }
	#catering .services .image_text .text h5 { position: relative;	top: auto; left: auto; margin-bottom: 10px; text-align: center; }
	#catering .services .image_text .text ul { margin-left: 0; padding: 0; list-style: none; }
	#catering .services .image_text .text ul li { text-align: center; }
	#catering .services .image_text .text ul li:before { display: inline; content: "\2022"; margin-right: 6px; }
	#catering .cta .flex { display: block; }
	#catering .cta .flex .flex-item { width: 100%; max-width: 300px; margin: 0 auto; text-align: center; }
	#catering .cta h6 { font-size: 24px; }
	#catering .cta a { margin-top: 10px; }

	/* menus */
	#menus .intro { padding-top: 50px; }
	#menus .carousel { padding-bottom: 10px; }
	#menus .carousel .divider { margin-bottom: 20px; }
	#menus .carousel .slider { margin: 0 -10px; }
	#menus .carousel .slider { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	#menus .carousel .slider .slide { width: 25%;  margin-bottom: 30px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
	#menus .carousel .slider .slide a { font-size: 18px; }
	#menus .cta .contact-us { font-size: 18px; }
	#menus .banner { margin-top: 30px; }
	#menus .menu-list { padding-top: 50px; }
	#menus .menu-list.with-honeycomb { padding-top: 10px; }
	#menus .menu-list .section h2 { font-size: 30px; }
	#menus .menu-list .section .item { font-size: 16px; margin-bottom: 10px; }
	#menus .menu-list .section .item h6 { font-size: 16px; }
	
	/* about */
	#about .intro { padding-top: 50px; }
	#about .content p img.align-left, 
	#about .content p img.alignleft,
	#about .content p img.align-right,
	#about .content p img.alignright { float: none; max-height: none; width: 100%; max-width: 280px; margin: 0 auto 30px; }
	#about .content ul { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
	#about .cta { margin-bottom: 0; }
	#about .cta p { font-size: 16px; }
	#about .banner { margin-bottom: 50px; }

	/* contact */
	#contact .intro { padding-top: 50px; }
	#contact .intro .image_text { margin: 0 0 30px; padding-left: 0; }
	#contact .intro .image_text:before { display: none; }
	#contact .intro .image_text .image { width: 100%; max-width: 260px; position: relative; top: auto; left: auto; right: auto !important; -webkit-transform: none; -ms-transform: none; transform: none; margin: 0 auto 20px; }
	#contact .intro .image_text .text { padding: 20px 30px; text-align: center; background: var(--color-yellow-pale); }
	#contact .intro .image_text .text p { padding: 0; }
	#contact .contact p.large { font-size: 16px; margin: -10px 0 30px; }
	#contact .contact .formwrap { padding: 25px 30px; margin: 0 -30px; }
	#contact .contact .formwrap .floatleft,
	#contact .contact .formwrap .floatright { width: 100%; float: none; padding: 0; }
	#contact .contact .formwrap label { font-size: 16px; }
	#contact .contact .formwrap .checks label { font-weight: normal; }
	
	/* blog */
	#blog .intro { padding-top: 50px; }
	#blog .feature { margin-bottom: 50px; }
	#blog .feature .wrapper { padding: 0; }
	#blog .feature .inner { max-width: none; }
	#blog .feature .text .title { font-size: 20px; }
	#blog .feature .text .excerpt img { margin: 0 auto 15px; }
	#blog .posts { margin-bottom: 30px; }
	#blog .posts .single { max-width: none; }
	#blog .posts .floatleft,
	#blog .posts .floatright { width: 100%; float: none; }
	#blog .posts .floatright { margin-top: 30px; }
	#blog .posts .post_excerpt .table,
	#blog .posts .post_excerpt .table .cell { display: block; height: auto; }
	#blog .posts .post_excerpt .image { width: 100%; margin-bottom: 20px; padding-right: 0; }
	#blog .posts .post_excerpt .image a { margin: 0 auto; padding-bottom: 200px; max-width: 250px; border: 3px solid var(--color-yellow); }
	#blog .posts .post_excerpt .text a.readmore { font-size: 16px; }
	#blog .posts .postnav a { font-size: 16px; }
	#blog .posts .sidebar .block { margin-bottom: 10px; }
	#blog .posts .sidebar .block .block-content { display: none; padding-bottom: 20px; }
	#blog .blog_categories { padding-bottom: 10px; }
	#blog .blog_categories .slider { margin: 0 -10px; }
	#blog .blog_categories .slider { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	#blog .blog_categories .slider .slide { width: 25%;  margin-bottom: 30px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
	#blog .blog_categories .slider .slide a { font-size: 18px; }
	#blog .form,
	#blog .form .wrapper { padding: 0; }
	#blog .form .inner { max-width: none; }

	/* gallery */
	#gallery .intro { padding-top: 50px; }
	#gallery .gallery .grid .grid-item { width: 33.333333%; }
	#gallery .gallery { margin-top: 30px; }
	#gallery .cta .flex { display: block; }
	#gallery .cta .flex .flex-item { width: 100%; max-width: 300px; margin: 0 auto; text-align: center; }
	#gallery .cta h6 { font-size: 24px; }
	#gallery .cta a { margin-top: 10px; }

	/* testimonials */
	#testimonials { padding: 50px 0; }
	#testimonials p.intro { margin-bottom: 50px; font-size: 18px; }
	#testimonials .testimonial { margin-bottom: 30px; }
	#testimonials .loadmore, 
	#testimonials .pagination { margin: 0 0 60px; }
	#testimonials .contact { padding: 30px; }
	#testimonials .contact .formwrap p { margin-bottom: 10px; font-size: 20px; }

	/* venues */
	#venues .intro { padding-top: 50px; margin-bottom: 0; }
	#venues .venues .image_text { margin-bottom: 30px; padding: 30px !important; background: var(--color-yellow-pale); }
	#venues .venues .image_text:before { display: none; }
	#venues .venues .image_text .image { width: 100%; max-width: 260px; position: relative; top: auto; left: auto; right: auto !important; -webkit-transform: none; -ms-transform: none; transform: none; margin: 0 auto 20px; }
	#venues .venues .image_text .text h5 { position: relative;	top: auto; left: auto; margin-bottom: 10px; text-align: center; }
	#venues .venues .image_text .text p { padding: 0; text-align: center; }

	/* meals to go */
	#meals_to_go .intro { padding: 50px 0 0; }
	#meals_to_go .banner { margin-bottom: 30px; }
	#meals_to_go .get_in_touch p { font-size: 16px; }
	#meals_to_go .cta .contact-us { font-size: 18px; }

	/* default page & 404 */
	#page .content { padding: 50px 0 70px; }

}

@media screen and (max-width: 768px){
	
	.hide_768 { display: none!important; }
	.show_768 { display: block!important; }

	.wrapper { padding-left: 20px; padding-right: 20px; }

	a.button, 
	input[type='submit'].button { padding: 0 15px; font-size: 18px !important; line-height: 40px !important; }

	/* honeycomb */
	.honeycomb { display: none !important; }

	/* testimonial */
	.testimonial .quote {  width: 30px; height: 24px; top: -15px; left: 15px; }
	.testimonial h6 { font-size: 24px; }
	
	/* home */
	#home .services .flex { margin: 0 -5px; }
	#home .services .flex .flex-item { padding: 0 5px; }
	#home .services a span { font-size: 16px; }	
	#home .testimonials { margin-bottom: 0; }
	#home .testimonials .testimonial p { font-size: 18px; }
	#home .contact { padding: 100px 0; }
	#home .contact .formwrap { padding: 30px 20px 0; }
	#home .contact .formwrap p { font-size: 26px; text-align: center; margin-bottom: 10px; }

	/* catering */
	#catering .services .image_text { margin-bottom: 20px; }
	#catering .services .image_text .image { max-width: 180px; }

	/* menus */
	#menus .carousel .slider .slide { width: 50%; }
	#menus .carousel .slider .slide a { font-size: 16px; }

	/* contact */
	#contact .contact .formwrap { margin: 0 -20px; }

	/* blog */
	#blog .blog_categories .slider { margin: 0 -20px; }
	#blog .blog_categories .slider .slide { width: 30%; padding: 0 5px; }
	#blog .blog_categories .slider .slide a { font-size: 12px; }
	#blog .form .cols { max-width: 350px; margin: 0 auto; }
	#blog .form .cols .col { width: 100%; padding: 0; margin-top: 10px; float: none; }
	#blog .form input[type='text'], 
	#blog .form input[type='email'] { line-height: 44px; }

	/* venues */
	#venues .venues .image_text { margin-bottom: 20px; }
	#venues .venues .image_text .image { max-width: 180px; }
	#venues .cta { margin-bottom: 30px; }
	#venues .cta p { font-size: 16px; }

}