/*
	(c)2012 - visuallizard.com

	Mobile styles using Media Queries
*/


/* !Media Queries ============================== */

.mobile-menu-toggle { display: none; }

	/* Smaller than standard 1024 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		.container { width: 100%; margin: 0; }
		#content { padding: 0 1em; }
		#main .intro { width: 100%; margin: 0 0 1em 0; }

		main#shopcdn-content .container { width: 100%; max-width: 100%; padding: 0 1rem; }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 768px) {

		#main,
		#sidebar,
		.cke div.c1,
		.cke div.c2,
		.cke div.c3 {
			width: 100%;
			flex: 0 0 100%;
			max-width: 100%;
			padding: 0;
			margin: 0;
			border: none;
		}

		nav.home { clear: both; margin: 0; }
		#main { padding: 0 1em; }
		#sidebar { display: none; }
		#main .intro {
			width: 100%;
			padding: 6em 1em 1em 1em;
			margin: 0 0 1.5em 0;
		}
		#content .container { padding: 0; border: none; }
		#content .container #quicklinks { border: none; }
		#content .container #quicklinks ul li { flex-basis: 49%; max-width: 49%; }

		section#banner { background: #58B25D; }
		div.half.brands { flex: 0 0 100%; max-width: 100%; padding: 30px; }
		div.half.photo { flex: 0 0 100%; max-width: 100%; }
		ul.banners.brands li { flex: 0 0 100%; max-width: 100%; padding: 0 50px; }
		section#intro .container { padding: 2rem 1rem; }
		section#products .container div.product-set div.cke div.c2 { flex: 0 0 100%; max-width: 100%; padding: 0; }
		section#products .container div.product-set#products-01 div.cke div.c2.first,
		section#products .container div.product-set#products-03 div.cke div.c2.first { order: 1; flex: 0 0 100%; max-width: 100%; padding: 0 1rem; }
		section#products .container div.product-set#products-01 div.cke div.c2:not(.first),
		section#products .container div.product-set#products-03 div.cke div.c2:not(.first) { order: 0; padding: 0; }
		section#products .container div.product-set#products-02 div.cke div.c2:not(.first) { flex: 0 0 100%; max-width: 100%; padding: 0 1rem; }

		footer { float: left; width: 100%; }
		footer .container {
			float: left;
			width: 100%;
			padding: 0 1em;
			margin: 0;
		}
		footer img.logo,
		footer a.corplink,
		footer a.lang { float: left; width: 50%; margin: 0 25% 1em 25%; }
		footer ul.fnav_1 {
			display: block;
			position: relative;
			clear: both;
			float: left;
			width: 100%;
			margin: 1em 0;
		}
		footer ul.fnav_1 li {
			flex-grow: 0;
			width: 100%;
			border: none;
			border-bottom: 1px solid #626362;
		}
		footer ul.fnav_1 li a {
			padding: 1em 0;
			font-weight: 500;
			color: #000;
		}
		footer .copyright {
			float: left;
			width: 100%;
			padding: 0;
			text-align: center;
		}


		/* !mobile navigation */
		.js nav ul {
			display: block;
			position: relative;
			clear: both;
			float: left;
			margin: 10px 0 0 0;
			border-top: 1px dashed #0059ae;
			background: #66c2c2;
		}
		.js nav ul li {
			position: relative;
			float: left;
			flex-grow: 0;
			width: 100%;
			margin: 0;
		}
		.js nav ul li a {
			padding: 1em;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			box-shadow: none;
			font-size: 1.4em;
			text-align: left;
		}
		.js nav ul li#nav_li_item_73 a,
		.js nav ul li#nav_li_item_75 a,
		.js nav ul li#nav_li_item_77 a,
		.js nav ul li#nav_li_item_89 a,
		.js nav ul li#nav_li_item_205 a,
		.js nav ul li#nav_li_item_259 a { background: none; }
		.js nav ul li ul {
			display: block;
			position: relative;
			opacity: 1;
			box-shadow: none;
		}
		nav ul.nav_1 > li >  ul a {
			padding: 1em 0 1em 2em;
			font-weight: 400;
		}


		/* Mobile menu toggle */
		.js nav .mobile-menu-toggle {
			position: relative;
			padding-left: 1.25em;
			background: transparent;
			display: block;
			font-size: 16px;
			line-height: 16px;
			position: absolute;
			top: 12px;
			right: 0;
			margin: 0;
			opacity: 0.50;
		}
		.js nav .mobile-menu-toggle:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 1em;
			height: 0.125em;
			border-top: 0.375em double #000;
			border-bottom: 0.125em solid #000;
		}
		.js nav.show .mobile-menu-toggle {
			opacity: 0.25;
		}
		.js nav .mobile-menu-toggle:hover {
			opacity: 1;
		}

		.js nav ul li {
			display: none;
		}
		.js nav.show ul li,
		.js nav ul li.at {
			display:block;
		}

		section.shopcdn-products div.copy-650 p > img { float: none; margin: 0 auto 1.5rem auto; }
		div.product-set div.cke div.c3 {
			width: 60%;
			flex: 0 0 60%;
			max-width: 60%;
			padding: 0;
			margin: 0 auto;
			border: none;
		}

	}


	/* Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 670px) {
		div.modal {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			padding: 50px 15px;
			margin: 0;
		}
		div.modal h2 { font-size: 30px; line-height: 1; }
		div.modal h3 { font-size: 36px; line-height: 1; }
		div.modal p,
		div.modal p.red { font-size: 16px; margin: 0 0 15px 0; }
		div.modal div { padding: 15px; }
		div.modal a.subscribe-button { width: 70%; margin: 15px 15%; }
		div.modal a.no-thanks { width: 100%; margin: 0; }

		#header { min-height: 150px; }
		#header h1 .logo { height: 100px; background-size: 80%; }
		#header a.flyerlink { width: 100%; margin: 0 0 0 -50%; }
		#banner-block { display: none; }
		ul.jumplist li { width: 49%; margin: 0 0 0.5em 0; }
		ul.jumplist li:nth-of-type(2n) { float: right; }
		div#recipes div.recipe { width: 100%; padding: 0; }
		.pagination a, .pagination .current { padding: 0 10px; }

	}

	/* Mobile Portrait Size (devices and browsers) */
	@media only screen and (max-width: 480px) {
		#content .container #quicklinks ul li { flex-basis: 100%; max-width: 100%; }
		main#shopcdn-content h1 { font-size: 4rem; }
	}