/*
	(c)2012 - visuallizard.com

	General styles. Template, view, plugin specific, etc.
*/

.case {
	/* For demonstrations only. Remove on production */
	margin: 0 0 20px 0;
}
.center { margin: 0 auto; }
p.center { margin-bottom: 1.25rem; }
.small { font-size: 0.8em; line-height: 1.2em; }
ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; }
ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; }
ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; text-align: right; content: counter(item) "."; font-weight: 700; }
ul > li {text-indent: 0;}
img { max-width: 100%; height: auto; }
.full-width { width: 100%; }
p.line {
	display: block;
	position: relative;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	border-top: 1px solid #ff0000;
	line-height: 0;
}

a#recipe-vote {
	display: block;
	position: relative;
	width: 80%;
	margin: 0 auto;
	background: url("../../../img/northmart/vote-button-hover.jpg") no-repeat center center;
	background-size: cover;
}

a#recipe-vote > img {
	display: block;
	transition: all 0.2s ease;
}
a#recipe-vote:hover > img {
	opacity: 0;
}

a.button {
	display: block;
	position: relative;
	width: auto;
	max-width: 200px;
	padding: 10px 20px;
	margin: 0 auto;
	font-size: 1.25rem;
	font-weight: 500;
	text-align: center;
	text-shadow: none;
	border-radius: 0;
	border: 1px solid #fff;
	background: #005cab;
	color: #fff;
}
a.button:hover {
	border: 1px solid #005cab;
	background: #fff;
	color: #005cab;
}

#content.wide iframe { width: 100%; }

#header a.subscribe {
	display: block;
	position: absolute;
	top: 5px;
	right: 0;
	width: 120px;
	padding: 7px 0 5px 0;
	border: 1px solid #fff;
	font-size: 16px;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	color: #fff;
}

/* !modal display */
div#overlay {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
}
div.modal {
	display: block;
	position: absolute;
	top: 20%;
	left: 50%;
	width: 700px;
	height: auto;
	padding: 15px;
	margin: 0 0 0 -350px;
	font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	background: #000 url("../../img/black-friday-burst.png") no-repeat center -240px;
	color: #fff;
}
	div.modal > img {
		display: block;
		position: relative;
		margin: 0 auto 15px auto;
	}
	div.modal h2 {
		margin: 0 0 10px 0;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 40px;
		font-weight: 700;
		font-style: italic;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 1.25;
		color: #fff;
	}
	div.modal p {
		margin: 0 0 15px 0;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 24px;
		font-weight: 600;
		font-style: italic;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #fff;
	}
	div.modal p.red {
		margin: 0;
		font-weight: 800;
		color: #900;
	}
	div.modal h3 {
		margin: 0 0 15px 0;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 56px;
		font-weight: 900;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 1.25;
		color: #fff;
	}
	div.modal h3 span {
		color: #c00;
	}
	div.modal a.dismiss {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 30px;
		font-weight: 900;
		line-height: 50px;
		text-align: center;
		background: #b00;
		color: #fff;
	}
	div.modal div {
		display: block;
		position: relative;
		width: 100%;
		padding: 30px;
		margin: 0;
		background: #fff;
	}
	div.modal a.subscribe-button {
		display: block;
		position: relative;
		width: 40%;
		padding: 25px 0;
		margin: 0 30% 20px 30%;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 30px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		background: #000;
		color: #fff;
	}
	div.modal a.no-thanks {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		font-family: "Lato", "ingra", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-style: italic;
		text-align: center;
		color: #b00;
	}


/* !typography */
body.health-happy #content a { color: rgba(219, 98, 27, 1); }
.intro h2 {
	margin: 0 0 0.25em 0;
	font-size: 32px;
	line-height: 38px;
	text-transform: uppercase;
	font-weight: 600;
	color: #66c2c2;
}
#intro-health-happy h2 { color: #fff; }
.intro p {
	line-height: 20px;
}
#main + h2 {
	clear: both;
	float: left;
	width: 100%;
}

/* !home page content */
#content.home h2 {
	font-size: 32px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
#content.home p {
	margin: 0 0 1.25em 0;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
}


/* !home page quicklinks */
#content .container #quicklinks ul {
	display: flex;
	position: relative;
	justify-content: space-evenly;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: 2%;
	row-gap: 1.25rem;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
	#content .container #quicklinks ul li {
		display: block;
		position: relative;
		flex-basis: 23.5%;
		max-width: 23.5%;
		min-height: 170px;
		padding: 0;
		margin: 0;
	}
		#content .container #quicklinks ul li a {
			display: block;
			position: relative;
			width: 100%;
			padding: 0;
			margin: 0;
		}
		#content .container #quicklinks ul li a img {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			padding: 0;
			margin: 0;
		}


/* !banners */
/* additional Slick Slider defaults (project specific) */
.slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(255,255,255,0);
	width: 3%;
	text-indent: -10em;
	overflow: hidden;
	border: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50% auto;
	color: rgba(255,255,255,0.5);
	transition: all .2s;
	opacity: .5;
	cursor: pointer;
}
.slick-arrow:hover {
	color: rgba(255,255,255,1);
}
.slick-prev { left: 0;  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23ffffff" points="50,14.4 14.4,50 50,85.6 50,100 0,50 0,50 50,0"/></svg>'); }
.slick-next { right: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23ffffff" points="0,14.4 35.6,50 0,85.6 0,100 50,50 50,50 0,0"/></svg>'); }

ul.banners {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
	ul.banners li {
		position: relative;
		width: 100%;
	}
		ul.banners li img {
			width: 100%;
			height: auto;
		}

/* !locations module styles */
ul.jumplist {
	display: flex;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0.5em 0;
	margin: 0;
	border-top: 1px solid #66c2c2;
	list-style: none;
}
	ul.jumplist li {
		display: block;
		position: relative;
		float: left;
		flex-grow: 1;
		padding: 0;
		margin: 0.5em;
	}
		ul.jumplist li a {
			display: block;
			position: relative;
			padding: 0.25em;
			text-align: center;
			background: #66c2c2;
			color: #fff;

			-webkit-transition: all 0.25s ease;
			-moz-transition: all 0.25s ease;
			transition: all 0.25s ease;
		}
		ul.jumplist li a:hover {
			font-weight: 300;
			background: #0059ae;
			color: #fff;
		}
		ul.jumplist li a.active {
			background: #0059ae;
			color: #fff;
		}
#map {
	display: block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0 0 1.5em 0;
	border: 1px solid #ccc;
}
.locations {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0 0 0.5em 0;
	margin: 0 0 1.5em 0;
	border-bottom: 1px dashed #ccc;
}
	.locations .location {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 0 0 1.5em 0;
		margin: 0;
	}
	.locations.hide-store,
	.locations .location .hide-store {
		display:none;
	}

	.location .location-contact {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
	}
		.location .location-contact h4 {
			padding: 0.25em 0.5em;
			background: #0059ae;
			color: #fff;
		}
		.location .location-contact h4 span {
			display: inline-block;
			float: right;
			font-size: 0.8em;
		}
		.location .location-contact p { padding: 0.25em; }
		.location .location-contact p.address { margin: 0 0 0.75em 0; }
	.location .location-features {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
	}
		.location .location-features div.loc-feature {
			display: block;
			position: relative;
			float: left;
			width: 23.5%;
			padding: 0;
			margin: 0 0 0.75em 2%;
			border: 1px solid #666;
			text-align: center;
		}
		.location .location-features div.loc-feature:nth-of-type(4n+1) {
			margin: 0 0 0.75em 0;
		}
			.location .location-features div.loc-feature img {
				display: block;
				position: relative;
				width: 100%;
				height: auto;
			}


/* !faq module styles */
.faq-display {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 1.5em 0;
}
	.faq-display h3 {
		font-weight: 700;
		text-transform: uppercase;
		color: rgba(219, 98, 27, 1);
	}
	.faq-display .faq-block {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 0 0 0.5em 0;
		margin: 0;
	}
		.faq-display .faq-block h4 {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			padding: 0.5em;
			margin: 0.5em 0 0 0;
			font-size: 20px;
			line-height: 20px;
			background: rgba(219, 98, 27, 1);
			color: #fff;
		}
		.faq-display .faq-block h4:first-of-type { margin: 0; }
		.faq-display .faq-block h4:after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			right: 0.5em;
			z-index: 1;
			margin-top: -2px;
			border-top: 5px solid #fff;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			-webkit-transition: all 0.25s ease;
			-moz-transition: all 0.25s ease;
			transition: all 0.25s ease;
		}
		.faq-display .faq-block h4.active:after {
			border: none;
			border-bottom: 5px solid #fff;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
		}
		.faq-display .faq-block .faq-answer {
			display: block;
			position: relative;
			clear: both;
			float: left;
			width: 100%;
			padding: 1em 1em 0 1em;
			margin: 0 0 0.5em 0;
			background: rgba(219, 98, 27, 0.2);
		}
			.faq-display .faq-block .faq-answer p {
				color: #000;
			}


/* !news module styles */
.news-brief {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	padding: 1em 0;
	margin: 0;
	border-top: 1px dashed #0059ae;
}
	.news-brief h4 {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 0;
		margin: 0 0 0.25em 0;
	}
		.news-brief h4 span {
			float: right;
			padding-left: 0.25em;
			font-size: 0.8em;
		}
	.news-brief img.thumbnail {
		display: block;
		position: relative;
		float: right;
		width: 250px;
		height: auto;
		margin: 0 0 0 0.5em;
		border: 1px solid #ccc;
	}


/* !recipe module styles */
h3.recipe-type {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	margin: 0.5em 0;
	text-transform: capitalize;
}
div#recipes {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 1.5em 0;
}
div#recipes div.recipe {
	display: block;
	position: relative;
	float: left;
	width: 50%;
	padding: 0 0.25em;
	margin: 0 0 0.5em 0;
}
	div.recipe a {
		display: block;
		position: relative;
		width: 100%;
		line-height: 0;
	}
		div.recipe a img {
			width: 100%;
		}
		div.recipe a span {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 1em 0.5em;
			margin: 0;
			font-size: 16px;
			font-weight: 400;
			text-align: center;
			line-height: 18px;
			background: rgba(0, 91, 174, 0.7);
			color: #fff;
		}
		body.health-happy div.recipe a span { background: rgba(219, 98, 27, 0.7) }
h2#recipe-name { font-size: 32px; }
h2#recipe-name strong { font-weight: 400; }
#recipe-block img { max-width: 100%; margin: 0 0 1.5em 0; }


/* !ad styles */
#sidebar ul.ads {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
	#sidebar ul.ads li {
		display: block;
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0 0 1em 0;
	}
		#sidebar ul.ads li a {
			display: block;
		}
			#sidebar ul.ads li a img {
				display: block;
				position: relative;
				width: 100%;
				height: auto;
			}


/* !form styles */
form.standard .opt-in-block {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 15px;
	margin: 0 0 15px 0;
	background: #f4f4f4;
}
	form.standard .opt-in-block p { margin: 0; }


.form-block {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 1em;
	margin: 0 0 1em 0;
	background: #f3f4f4;
}
.contest {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 1em 0;
}
.contest-form {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 2em 0;
	border-bottom: 1px solid #0059ae;
}
	.contest form.standard {
		display: flex;
		position: relative;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 2%;
		row-gap: 1rem;
		width: 100%;
		padding: 0;
		margin: 0;
	}
		form.standard div.input.checkbox {
			padding: 0;
			margin: 0 0 1rem 0;
		}
		.contest form.standard div.input {
			display: block;
			position: relative;
			flex-grow: 1;
			flex-basis: 49%;
			max-width: 49%;
			padding: 0 1rem;
			margin: 0;
		}
		.contest form.standard div.input.w-small {
			flex-basis: 23.5%;
			max-width: 23.5%;
		}
		form.standard div.input.textarea,
		.contest form.standard div.input.textarea {
			flex-basis: 100%;
			max-width: 100%;
		}
		.contest form.standard div.uploader {
			flex-basis: 100%;
			max-width: 100%;
			padding: 1em;
			margin: 0;
			border-bottom: 1px solid #f4f4f4;
			background: #fff;
		}
			form.standard div.input input[type="text"],
			form.standard div.input textarea,
			form.standard div.input select,
			.contest form.standard div.input input[type="text"],
			.contest form.standard div.input textarea,
			.contest form.standard div.input select {
				display: block;
				position: relative;
				width: 100%;
				height: 40px;
				margin: 0 0 1rem 0;
				line-height: 40px;
			}
			.contest-form form.standard div.input select {
				text-indent: 10px;
			}
			form.standard div.input.textarea textarea,
			.contest form.standard div.input.textarea textarea {
				height: 200px;
			}
	.contest form.standard div.input.opt-in-block,
	.contest form.standard div.input.checkbox,
	.contest form.standard div.input.submit {
		flex-basis: 100%;
		max-width: 100%;
		padding: 1rem;
	}
	form.standard input.button {
		display: block;
		position: relative;
		box-sizing: border-box;
		width: 30%;
		padding: 0.5em 0;
		margin: 0;
		border: none;
		border-radius: 0;
		font-size: 1.25rem;
		text-align: center;
		background: #0059ae;
		color: #fff;
	}



/* ! Vendor Page styles */
ul.banners.brands {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 1rem;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
	ul.banners.brands li {
		display: block;
		position: relative;
		flex: 0 0 247px;
		max-width: 247px;
		padding: 0;
	}
	ul.banners.brands li:first-child {
		justify-self: center;
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
		margin: 0;
	}
		ul.banners.brands li:first-child > img {
			display: block;
			width: 247px;
			margin: 0 auto;
		}
section#products .container {
	padding: 2rem 0 0 0;
}
	section#products div.product-set {
		display: block;
		position: relative;
		width: 100%;
		clear: both;
	}
	section#products .container div.product-set div.cke {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 0;
		padding: 0;
		margin: 0;
		width: 100%;
	}
		section#products .container div.product-set div.cke div.c2 {
			display: block;
			position: relative;
			flex: 0 0 55%;
			max-width: 55%;
			margin: 0;
			padding: 0 50px;
			color: #000;
		}
		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 {
			flex: 0 0 45%;
			max-width: 45%;
			padding: 0 0 0 120px;
		}
		section#products .container div.product-set#products-02 div.cke div.c2:not(.first) {
			flex: 0 0 45%;
			max-width: 45%;
			padding: 0 0 0 20px;
		}
			section#products .container div.product-set div.cke div.c2 p {
				font-size: 1.25rem;
				line-height: 1.5;
				color: inherit;
			}
			section#products .container div.product-set div.cke div.c2 p > strong {
				font-size: 2rem;
				font-weight: 800;
				line-height: 0.8;
			}



/* !footer styles */
footer img.logo {
	display: block;
	position: relative;
	float: left;
	width: 180px;
	padding: 0;
	margin: 0 0 1em 0;
}
footer a.corplink {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 160px;
	padding: 0.5em 0 0.25em 0;
	margin: 0 0 10px 10px;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 14px;
	background: #999;
	color: #fff;

	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
footer a.corplink:hover {
	background: #666;
}
footer a.lang {
	display: block;
	position: relative;
	clear: both;
	float: left;
	width: 160px;
	padding: 0.5em 0 0.25em 0;
	margin: 0 0 0 10px;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 14px;
	background: #999;
	color: #fff;

	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
footer a.lang:hover {
	background: #666;
}