/*
	(c)2012 - visuallizard.com

	General Layout Styles.
	Sets major blocking (and minor styles) to genaral elements in the template.
	All can be removed and started from scratch or elemnts can be adjusted individually.
*/

.container {
/*
	Set site width only here and use this class to centre the content in browser window.
	Default width is 960px and can be changed in skeleton.css to maintain resposivnes.
*/
	width: 80%;
	margin: 0 10%;
	padding: 0;
	position: relative;
}



/* !announcement styles */
.announcement {
	display: block;
	position: relative;
	width: 100%;
	padding: 15px 0;
	text-align: center;
}
	.announcement h3 {
		margin: 0 0 10px 0;
		font-size: 24px;
		line-height: 1;
		text-align: center;
	}
	.announcement p {
		margin: 0;
	}



/* Header */
	#header {
		clear: both;
		position: relative;
		min-height: 200px;
		margin: 0;
		padding: 0;
		background: #fff url("../../img/northmart/header-tile.png") repeat-x center top;
	}
		#header h1 { display: block; float: left; width: 100%; padding: 15px 0; margin: 60px 0 20px 0; }
		#header h1 .logo {
			display: block;
			height: 145px;
			text-indent: -99999em;
			text-decoration: none;
			background: url("../../img/northmart/logo_header.png") center center no-repeat transparent;
			background-size: contain;
			cursor: pointer;
		}

		#header a.flyerlink {
			display: block;
			position: absolute;
			top: 0;
			left: 50%;
			z-index: 1;
			width: 380px;
			padding: 1em 1em 1em 0;
			margin: 0 0 0 -190px;
			font-size: 20px;
			font-weight: 600;
			text-align: center;
			text-transform: uppercase;
			text-decoration: none;
			background: #0059ae;
			color: #66c2c2;
		}
		#header a.flyerlink:after {
			content: "";
			display: block;
			position: absolute;
			top: 1.1em;
			right: 1.5em;
			border: none;
			border-left: 10px solid #fff;
			border-top: 9px solid transparent;
			border-bottom: 9px solid transparent;

			-webkit-transition: all 0.25s ease-in-out;
			-moz-transition: all 0.25s ease-in-out;
			transition: all 0.25s ease-in-out;
		}
		#header a.flyerlink:hover:after {
			right: 1em;
		}
			#header a.flyerlink span {
				font-weight: 300;
				color: #fff;
			}


		/* Language toggle */
		header .lang { }


/* 	Navigations */
	nav {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		padding: 1.5em 0 0 0;
		margin: 0;
		clear: both;
		background: #66c2c2;
	}
	nav.home { background: none; margin-top: -75px; }
		nav ul {
			display: flex;
			clear: both;
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
		}
			nav ul li {
				display: block;
				position: relative;
				flex-grow: 1;
				padding: 0;
				margin: 0 0.5em;
			}
			nav ul li#nav_li_item_31,
			nav ul li#nav_li_item_79,
			nav ul li#nav_li_item_81,
			nav ul li#nav_li_item_83,
			nav ul li#nav_li_item_85,
			nav ul li#nav_li_item_87,
			nav ul li#nav_li_item_633,
			nav ul li#nav_li_item_669 { display: none; }
				nav ul li > a {
					display: block;
					position: relative;
					padding: 3em 0.5em 0.25em 0.5em;
					-webkit-border-top-left-radius: 50%;
					-moz-border-radius-topleft: 50%;
					border-top-left-radius: 50%;
					-webkit-border-top-right-radius: 50%;
					-moz-border-radius-topright: 50%;
					border-top-right-radius: 50%;
					box-shadow: 3px -3px 4px #258080;
					font-size: 13px;
					font-weight: 600;
					line-height: 13px;
					text-align: center;
					text-decoration: none;
					text-transform: uppercase;
					background: #fff;
					color: #0059ae;

					-webkit-transition: all 0.25s ease;
					-moz-transition: all 0.25s ease;
					transition: all 0.25s ease;
				}
				nav.home ul li > a { box-shadow: 3px -3px 4px rgba(0,0,0,0.5); }
				nav ul li#nav_li_item_73 a { background: #fff url("../../img/northmart/icon-community.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_75 a { background: #fff url("../../img/northmart/icon-healthy.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_77 a { background: #fff url("../../img/northmart/icon-financial.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_89 a { background: #fff url("../../img/northmart/icon-locator.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_205 a { background: #fff url("../../img/northmart/icon-flyers.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_259 a { background: #fff url("../../img/northmart/icon-happy.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_253 a { background: #fff url("../../img/northmart/icon-photo.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_581 a { background: #fff url("../../img/northmart/icon-shop_white.png") no-repeat center 5px; background-size: 100px; }

				nav ul li#nav_li_item_475 a { background: #fff url("../../img/northmart/icon-email.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_73.at a { background: #fff url("../../img/northmart/icon-community_blue.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_75.at a { background: #fff url("../../img/northmart/icon-healthy_blue.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_77.at a { background: #fff url("../../img/northmart/icon-financial_blue.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_89.at a { background: #fff url("../../img/northmart/icon-locator_blue.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_205.at a { background: #fff url("../../img/northmart/icon-flyers_blue.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_259.at a { background: #fff url("../../img/northmart/icon-happy.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_253.at a { background: #fff url("../../img/northmart/icon-photo.png") no-repeat center 5px; background-size: 120px; }
				nav ul li#nav_li_item_581.at a { background: #fff url("../../img/northmart/icon-shop_blue.png") no-repeat center 5px; background-size: 100px; }


				nav ul li a:hover {
					text-decoration: none;
					color: #000;
				}
				nav ul li.at a {
					font-weight: 600;
					color: #000;
				}



		/* 	Drop-downs */
		nav ul.nav_1 > li > ul {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 1000;
			float: left;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
			background-color: #fff;
			opacity: 0;
			-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
			   -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
			        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

			-webkit-transition: all 0.25s ease;
			-moz-transition: all 0.25s ease;
			transition: all 0.25s ease;
		}
		nav ul.nav_1 > li:hover > ul {
			display: block;
			box-sizing: border-box;
			opacity: 1;
		}
			nav ul.nav_1 > li >  ul li {
				display: block;
				clear: both;
				width: 100%;
				margin: 0;
			}
			nav ul.nav_1 > li >  ul a {
				display: block;
				clear: both;
				width: 100%;
				padding: 0.75em 1em;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
				box-shadow: none;
				font-weight: 300;
				text-align: left;
				text-transform: none;
				line-height: 18px;
				background: #fff !important;
				color: #555;
			}

			nav ul.nav_1 li    ul a:hover,
			nav ul.nav_1 li.at ul a:hover,
			nav ul.nav_1 li.at ul .at a {
				color: #000;
			}
			nav ul.nav_1 > li > ul > li > ul {
				display: block;
				position: relative;
			}
				nav ul.nav_1 > li > ul > li > ul li {
					display: block;
					flex-grow: 0;
					float: none;
					width: 100%;
				}
				nav ul.nav_1 > li:hover > ul > li ul a,
				nav ul.nav_1 > li.at:hover > ul > li ul a {
					text-transform: none;
					clear: both;
					color: #555;
					display: block;
					font-weight: 300;
					line-height: 18px;
					padding: 3px 15px 3px 25px;
				}

				nav ul.nav_1 li ul li   ul a:hover,
				nav ul.nav_1 li.at ul li ul a:hover,
				nav ul.nav_1 li.at ul li ul .at a {
					color: #000;
				}






/* Login form */
/*
	header form input[type="text"],
	header form input[type="password"],
	header form input[type="email"] {
		margin: 0 5px 0 0;
		width: auto;
	}
	header form .input {
		display: inline-block;
	}

	header .login-nav,
	header .login-form,
	header .search-form {
		position: relative;
		color: #fff;
		float: left;
		display: block;
		vertical-align: top;
		margin:  0 20px 0 0;
	}
		.login-nav,
		.login-options {
			list-style: none;
			margin: 0 0 .5em 0;
		}
	header .login-nav li {
		display: inline-block;
	}
	header .login-nav a,
	header .login-form a {
		font-size: 13px;
		padding: 0 5px 0 0;
		margin: 0;
		text-transform: none;
		text-decoration: none;
	}
	header .login-form .error-message {
		position: absolute;
		bottom: 0; left: 0;
		margin: 0;
		color: #ee5f5b;
		font-size: 13px;
	}
*/


/* 	Columns and Sections	*/
	#banner-block {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		background: #ccc;
	}
	#content {
		display: block;
		position: relative;
		clear: both;
		float: left;
		width: 100%;
	}
		#content .container {
			padding: 1em 0;
			margin-top: 1em;
			border-top: 1px dashed #66c2c2;
		}
		.home #content .container { margin-top: 0; border: none; }
			#content .container #quicklinks {
				display: block;
				position: relative;
				clear: both;
				float: left;
				width: 100%;
				padding: 1.5em 0;
				margin: 0 0 1.5em 0;
				border-top: 1px dashed #66c2c2;
				border-bottom: 1px dashed #66c2c2;
			}
			#main {
				float: left;
				width: 75%;
				min-height: 550px;
				padding: 0 1em 0 0;
				border-right: 1px dashed #66c2c2;
			}
				#main .intro {
					display: block;
					position: relative;
					width: 110%;
					float: left;
					padding: 1em 1.5em 0.5em 8em;
					margin: 0 0 1em -10%;
					background: #0059ae;
					color: #fff;
				}
				#main #intro-health-happy {
					background: rgba(219,98,27,0.7);
				}
					#main .intro span.flap {
						display: block;
						position: absolute;
						top: 1em;
						left: -1.05em;
						width: 8em;
						height: 60px;
						background: #66c2c2;
					}
					#main #intro-store-locator span.flap { background: #66c2c2 url("../../img/northmart/icon-locator_white.png") no-repeat center center; }
					#main #intro-community-support span.flap { background: #66c2c2 url("../../img/northmart/icon-community_white.png") no-repeat center center; }
					#main #intro-healthy-eating span.flap { background: #66c2c2 url("../../img/northmart/icon-healthy_white.png") no-repeat center center; }
					#main #intro-health-happy span.flap { background: rgb(219,98,27) url("../../img/northmart/icon-happy_white.png") no-repeat center center; }
					#main #intro-financial span.flap { background: #66c2c2 url("../../img/northmart/icon-financial_white.png") no-repeat center center; }
					#main #intro-flyers span.flap { background: #66c2c2 url("../../img/northmart/icon-flyers_white.png") no-repeat center center; }
					#main .intro span.flap:before {
						content: "";
						display: block;
						position: absolute;
						top: 60px;
						left: 0;
						border: none;
						border-top: 1.05em solid #5eb3b3;
						border-left: 1.05em solid transparent;
					}
					#main #intro-health-happy span.flap:before {
						border: none;
						border-top: 1.05em solid rgb(219,98,27);
						border-left: 1.05em solid transparent;
					}
				main#shopcdn-content {
					clear: both;
					padding: 0 0 3rem 0;
					border-top: 10px solid #fff;
					background: #f7f6f3;
					color: #000;
				}
				main#shopcdn-content h1 {
					display: block;
					width: 100%;
					margin: 0 0 3rem 0;
					text-transform: uppercase;
					text-align: center;
					font-size: 6.875rem;
					font-weight: 100;
					line-height: 1;
					color: #ff0000;
				}
				main#shopcdn-content a {
					font-weight: 600;
					color: #ff0000;
				}
				main#shopcdn-content section {
					display: block;
					padding: 3rem 0;
				}
				main#shopcdn-content .container {
					display: flex;
					position: relative;
					justify-content: flex-start;
					align-items: flex-start;
					flex-wrap: wrap;
					clear: both;
					float: none;
					width: 1280px;
					margin: 0 auto;
				}
					main#shopcdn-content .container.learnmore *:last-child { margin-bottom: 0; }
					main#shopcdn-content .container div.copy-650 {
						display: block;
						flex: 0 0 100%;
						max-width: 650px;
						margin: 0 auto 1.5rem auto;
					}
						section#shopcdn-intro div.copy-650 p {
							font-size: 1.25rem;
						}
					section.shopcdn-products div.product-set div.cke {
						width: 100%;
						max-width: 1000px;
						padding: 0;
						margin: 0 auto 1.5rem auto;
					}

						main#shopcdn-content section.shopcdn-products div.copy-650 p {
							font-size: 1.125rem;
						}
							section.shopcdn-products div.copy-650 p > img {
								display: block;
								position: relative;
								float: left;
								width: 200px;
								margin-left: -216px;
							}
						div.product-set div.cke div.c3 {
							display: block;
							position: relative;
							flex: 0 0 32%;
							max-width: 32%;
							padding: 0;
							margin: 0;
						}
						section.shopcdn-products div.product-set h2 {
							padding: 0 2rem;
							margin: 0.5rem 0;
							font-size: 2rem;
							font-weight: 600;
							line-height: 1;
							color: #000;
						}
						section.shopcdn-products div.product-set p {
							padding: 0 2rem;
							font-size: 1.125rem;
						}
						section.shopcdn-products div.product-set p:has(img) {
							padding: 0;
						}
			#sidebar {
				float: right;
				width: 25%;
				min-height: 550px;
				padding: 0 0 0 1em;
			}



/* ! Vendor layout */
main#vendor-content {
	display: block;
	position: relative;
	clear: both;
	padding: 24px 0 60px 0;
	margin: 0;
	font-family: "Atkinson Hyperlegible", "Open Sans", sans-serif;
}
main#vendor-content h2,
main#vendor-content h3,
main#vendor-content h4 { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

	main#vendor-content .container {
		display: block;
		position: relative;
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
	}
	section#banner {
		display: flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 0;
		row-gap: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		background: linear-gradient(to right, #58B25D 50%, #005CAB 50.0001%, #005CAB );
	}
		div.half {
			display: flex;
			position: relative;
			align-items: center;
			flex: 1 0 600px;
			max-width: 600px;
		}
		div.half.brands {
			padding: 0 30px;
		}
		div.half.photo {
			max-width: 50%;
		}
			div.half.photo ul.banners.vendor-image li {
				display: block;
				position: relative;
				padding: 0;
				margin: 0;
				line-height: 1;
			}
			div.half.photo img {
				display: block;
				max-width: 100%;
			}
	section#intro {
		background: #005CAB;
		color: #fff;
	}
		section#intro .container {
			max-width: 650px;
			padding: 5rem 0;
		}
			section#intro .container * {
				color: inherit;
			}
			section#intro h2 {
				font-weight: 600;
			}



/* Footer	 */
	footer {
		clear: both;
		position: relative;
		min-height: 200px;
		padding: 2.5em 0;
		margin: 0;
		border-top: 3px solid #cbccbc;
		background: #c4c5c4 url("../../img/northmart/footer-tile.png") repeat-x center top;
	}
		footer .copyright {
			display: block;
			position: relative;
			clear: both;
			float: right;
			width: 30%;
			padding-right: 0.7em;
			font-size: 11px;
			text-align: right;
			text-transform: uppercase;
			color: #626362;
		}
		footer ul.fnav_1 {
			display: flex;
			position: absolute;
			right: 0;
			clear: right;
			float: right;
			width: 55%;
			padding: 0;
			margin: 0 0 7.5em 0;
			list-style: none;
			text-transform: uppercase;
			font-size: 11px;
		}
			footer ul.fnav_1 li {
				display: block;
				position: relative;
				float: left;
				flex-grow: 1;
				padding: 0 0.25em;
				margin: 0;
				border-right: 1px solid #626362;
			}
			footer ul.fnav_1 li#fnav_li_item_85 { border: none; }
			footer ul.fnav_1 li#fnav_li_item_31,
			footer ul.fnav_1 li#fnav_li_item_89,
			footer ul.fnav_1 li#fnav_li_item_73,
			footer ul.fnav_1 li#fnav_li_item_75,
			footer ul.fnav_1 li#fnav_li_item_77,
			footer ul.fnav_1 li#fnav_li_item_205 { display: none; }
				footer ul.fnav_1 li a {
					display: block;
					line-height: 14px;
					text-align: center;
					text-decoration: none;
					color: #626362;
				}



/* Content layout (appearence) */
.content-display {

}
	.content-display:after { clear: both; }

	.content-display .content-block {
		width: 45%;
		float: left;
		margin: 0 2.5% 0 0;
	}

	/* 	single */
	.content-display.type-0 {

	}

	/* 	double */
	.content-display.type-1 .content-block {

	}

	/* double, wide-top */
	.content-display.type-2 .content-block:nth-child(3n+1) {
		width: 100%;
		clear: both;
		float: none;
		margin: 0;
	}

	/* double, wide-bottom */
	.content-display.type-3 .content-block:nth-child(3n+3) {
		width: 100%;
		clear: both;
		float: none;
		margin: 0;
	}


	/* triple */
	.content-display.type-4 .content-block {
		width: 30%;
		margin-right: 3%;
		float: left;
	}


/* Hide content that requires JavaScript unless JavaScript is running. */
body .requires-js { display: none; }