/**
 * global.css 
 * Main Stylesheet for Waring
 *
 */


/*	HTML OVERIDES
	-------------------------------------------------------------------------------------------------- */ 
	
	body {
		margin: 0px; padding: 0px; 
		font-family: mr-eaves-modern, sans-serif;
		font-weight: 500;
		-webkit-overflow-scrolling: touch;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		line-height: 150%; 
		color: #000;
		font-size: 16px;
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}	

	html, body {
		height: 100%;
	}
	
	a {  
		cursor: pointer !important; 
		color: #8292aa;
	}	
	
	a:link, a:hover, a:visited {
		border: 0; outline: 0;
	}
	
	a img {
	    border: 0px;
	}
	
	hr {
		border: 0px; 
		border-top: 1px solid rgba(0,0,0,0.35); 
		width: 100%; display: block; clear: both; 
	}
	
	sup {
		position: relative; display: inline-block; 
		font-size: 1rem; margin: 0px; padding: 0px; 
		vertical-align: middle; margin-left: 2px; top: -2px; 	
	}
	
	/* Full Screen Video */ 
	video:-moz-full-screen {
	  position: fixed; width: 100%; height: 100%; max-height: 100%; 
	  top: 0px; left: 0px; 
	  -webkit-transform: none !important; 
	  transform: none !important; 
	  z-index: 1000000; 
	}

	video:-webkit-full-screen {
	  position: fixed; width: 100%; height: 100%; max-height: 100%; 
	  top: 0px; left: 0px; 
	  -webkit-transform: none !important;
	  transform: none !important;
	  z-index: 1000000; 
	}
	
	video:-ms-fullscreen {
	  position: fixed; width: 100%; height: 100%; max-height: 100%; 
	  top: 0px; left: 0px; 
	  -webkit-transform: none !important;
	  transform: none !important;
	  z-index: 1000000; 
	}

	video:fullscreen {
	  position: fixed; width: 100%; height: 100%; max-height: 100%; 
	  top: 0px; left: 0px; 
	  -webkit-transform: none !important;
	  transform: none !important;
	  z-index: 1000000; 
	}


/*	MODIFIERS
	-------------------------------------------------------------------------------------------------- */ 
	
	.inner {
		width: 100%; max-width: 1024px; /* Global Constraint */ 
		display: block; 
		height: 100%; 
		position: relative;
		box-sizing: border-box; 	
		margin: 0px auto; 
		text-align: left; 	
	}
	
	
	
	.clear::after,
	.colgroup::after {
		display: table; 
		content: ""; 
		width: 100%;
		clear: both; 
	}

	.colgroup {
		display: block; width: 100%; clear: both; 
		box-sizing: border-box; 
		font-size: 0; 
	}
	.col {
		box-sizing: border-box;
		display: inline-block;
		margin: 0;
		padding: 0;
		position: relative;
		vertical-align: top;
		width: 50%;
		font-size: 1.2rem; 
	}

	.right {
		text-align: right; 
	}
	.left {
		text-align: left; 
	}
	.center {
		text-align: center; 
	}


	/* product like col grid 3->2->1 */
	.col-4 {	width: 25%; }
	.col-3 {	width: 33.3%; }
	.col-2 { width: 49.5%; }
	.col-1 { width: 100%; }

	/*  bootstrap like cols */
	.col-desk-4 { width: 25%; }
	.col-desk-3 { width: 33.3%; }
	.col-desk-2 { width: 49.5%; }
	.col-desk-1 { width: 100%; }
	
	.no-image {
		display: inline-block; 
		box-sizing: border-box; 
		padding: 20px; 
		position: relative;
		text-align: center; 
		font-size: 1rem; 
		width: 100%; 
		min-height: 250px; 
		background-color: #dedede; 
		color: #808080; 
	}
	
	.no-image::after {
		content: attr(data-msg); 
		display: inline-block; 
		width: 90%; 
		margin: 10px 0px; 
		font-size: 1rem; 
		text-shadow: 0 1px 0 #fff;
		position: relative; 
		z-index: 10; 
		line-height: 100%; 
	}
	
		.no-image img { /* img = product silo */ 
			width: 75% !important; 
			opacity: 0.075;
			margin: 0 auto; 
		}
		
	.horz-rule {
		display: table; width: 100%; height: 1px; content: ""; 
		background-color: #000; 
		border: 0; 
		clear: both; 
		margin: 5px 0px; 	
	}	
	
	/*	Forms
		----------------------------------------------- */ 
		
	input[class=hidden] {
		display: none !important; 	
	}
	
	input {
		-webkit-appearance: none;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
	    box-sizing:border-box;
		border-radius: 0;
		outline: 0; /* Stop chrome highlighting in blue */ 
	}
	
	input[type=search] {
		-webkit-appearance: none;
		appearance: none; 
	}

	input[type=checkbox] {
		-webkit-appearance: checkbox;
	}

	textarea:focus, input:focus{
	    border:0;
		outline:none;
		box-shadow:none;
	}

	input[type="submit"] {
		cursor: pointer;
		font-weight: bold;
	}
	
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="search"],
	input[type="password"] {
		outline: none;
		box-shadow:none;
		border: 0;
    	font-size: 16px;
		font-family: mr-eaves-modern, sans-serif;
	    padding-left: 10px !important;
	}
	
	textarea {
		font-family: mr-eaves-modern, sans-serif;
		font-size: 16px;
	}
	
	input:focus {
	    outline: none;
	}

	.form-errors {
		color: #cc0000;
	}

	section {
		display: block; 
		box-sizing: border-box; 	
	}

	h1 {
	    font-size: 30px;
	    line-height: 1.2;
	    margin-bottom: 10px;
	    margin-top: 0;
	}
	
	
	.bold {
		font-weight: 800;
	}
	
	.regular {
		font-weight: 500;
	}
	
	.hidden {
		display: none;
	}

	.float-left {
		float: left; 
	}
	
	.float-right {
		float: right; 
	}

	i.icon {
		display: inline-block; box-sizing: border-box; 
		width: 10px; height: 10px; 
		background-color: transparent; 
		background-size: contain; 
		background-repeat: no-repeat; 
		background-position: center center; 
	}
		i.icon.my-profile {
			background-image: url('../svg/my-profile.svg'); 
		}
		i.icon.login {
			background-image: url('../svg/login.svg'); 
		}
		i.icon.logout {
			background-image: url('../svg/logout.svg'); 
		}
		i.icon.white-triangle {
		  width: 0; 
		  height: 0; 
		  border-top: 6px solid transparent;
		  border-bottom: 6px solid transparent;
		  border-left: 6px solid #fff;
		  vertical-align: middle; 
		  margin: 0px 5px; 
		}
	
	a.icon {
		display: inline-block; 
		width: 20px; height: 20px; 
		background-color: transparent; 
		background-size: contain;
		background-repeat: no-repeat; 
		background-position: center center; 
	}
		.icon.instagram {
			background-image: url('../svg/icon-instagram-white.svg'); 
		}
		.icon.facebook {
			background-image: url('../svg/icon-facebook-white.svg'); 
		}
		.icon.linkedin {
			background-image: url('../svg/icon-linkedin-white.svg'); 
		}
		.icon.youtube {
			background-image: url('../svg/icon-youtube-white.svg'); 
		}


	/*	https://getbootstrap.com/docs/4.0/components/alerts/#link-color */ 
	.notification {
		display: inline-block; box-sizing: border-box; 
		width: 100%; max-width: 450px; 
		padding: 10px; 
		margin: 10px 0px; 
		border-width: 1px; 
		border-style: solid; 
	}
	.notification p {
		margin: 0px; margin-bottom: 5px; 
	}
	.notification p:last-child {
		margin-bottom: 0px; 
	}
	.notification a {
		font-weight: bolder; 
	}
	.notification ul.errors {
		margin-top: 5px; 
	}
	.notification.warn {
		border-color: #ffeeba; 
		color: #856404;
		background-color: #fff3cd; 
	}
		.notification.warn a {
			color: #533f03; 
		}
	.notification.error {
		border-color: #f5c6cb; 
		color: #721c24;
		background-color: #f8d7da; 
	}
		.notification.error a {
			color: #491217;
		}
	.notification.success {
		border-color: #c3e6cb; 
		color: #155724;
		background-color: #d4edda; 
	}
		.notification.success a {
			color: #0b2e13; 
		}
	.notification.info {
		border-color: #b8daff; 
		color: #004085;
		background-color: #cce5ff; 
	}
		.notification.info a {
			color: #002752; 
		}



/*	LAYOUT
	-------------------------------------------------------------------------------------------------- */ 
	
	#viewport {
		display: block; 
		width: 100%;
		min-height: 100%; 
		min-width: 320px; /* Mobile */ 
		box-sizing: border-box; 
		position: absolute; 
		z-index: 10; /* Above background */ 
		top: 0px; left: 0px; 
		background-color: #fff;
		overflow: hidden; /* bug */
	}

	.main-content {
		padding: 30px 15px 100px;
	}
	
	#site-notification {
		background-color: #8fc044;
		box-sizing: border-box; padding: 5px 10px; 
		color: #fff; 
		position: relative; 
	}
		#site-notification span {
			display: inline-block; 
			width: 100%; box-sizing: border-box; 
			padding-right: 45px; /* Accommodate close toggle */ 
			line-height: 110%; 
		}
		
		#site-notification a {
			font-weight: bolder;
			text-decoration: underline; 
			color: #fff; 
		}

		#site-notification .close {
			display: inline-block; 
			width: 20px; height: 20px; 
			position: absolute; 
			top: 50%; 
			right: 10px;
			-webkit-transform: translateY(-50%); 
			transform: translateY(-50%);
		}
		
	#search {
		background-color: #000;
		box-sizing: border-box;
		display: block;
		height: 0px;
		/*visibility: hidden;*/
		left: 0;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 10000;
		position: relative;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		transition: height 0.4s;
	}
	
	#search:hover {
	height: 75px;
	}
	
	#header {
		background-color: #2b2b2b;
		box-sizing: border-box;
		display: block;
		/*
		height: 100px;
		*/
		height: 130px; /* 100px + promo bar (30px) */ 
		left: 0;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 10000;
		-webkit-box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.75);
		box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.75);
		position: relative;
	}
	
	#content {
		background-color: #fff;
		position: relative;	
		margin-bottom: 360px;
		display: block;
		min-height: 550px;
	}
	
	#footer {
		bottom: 0;
		display: block;
		background-color: #000;
		box-sizing: border-box;
		height: 360px; /* nav = 300, legal = 60 */
		left: 0;
		overflow: hidden;
		position: absolute;
		text-align: center;
		width: 100%;
		z-index: 50;
	}


	/* dropdown menu */

	#dropdown-menu {
		background-color: #f6f6f6;
		border-radius: 3.5px;
		box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.3);
		display: block;
		left: 120px;
		position: relative;
		top: 0;
		width: 220px;
		z-index: 1000;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out 0s;
	}
	
		#dropdown-menu.active {
			max-height: 500px; /* Cannot transition :auto values - https://css-tricks.com/using-css-transitions-auto-dimensions/ */ 
		}
	
	#dropdown-menu ul {
		display: block;
		list-style-type: none;
		margin: 0;
		padding: 15px 0;
	}
	
	#dropdown-menu ul li {
    display: block;
    margin-bottom: 5px;
    padding-left: 35px;
    padding-right: 0;
    width: calc(100% - 15px);
	}
	
	#dropdown-menu ul li a {
    color: #000;
    display: block;
    font-size: 18px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-decoration: none;
	}

	#dropdown-menu ul li a:hover {
		color: #0678df;
	}
	
	a.account-icon {
		display: inline-block; 
		width: 25px; height: 25px; 
		background-color: transparent; 
		background-image: url('../svg/account-icon.svg'); 
		background-repeat: no-repeat; 
		background-position: center center; 
		background-size: 22px 22px; 
	}
	
	a.hamburger-icon {
		width: 30px;
		height: 30px; 
		position: relative;
		-webkit-transition: all 500ms ease-in-out 0s;
		transition: all 500ms ease-in-out 0s;		
		visibility: hidden; 
		opacity: 0; 
		display: inline-block; 
	}
	
	a.hamburger-icon span,
	a.hamburger-icon span::before,
	a.hamburger-icon span::after {
		display: block; width: 100%; height: 5px; 
		position: absolute; 
		top: 50%; left: 0px; 
		-webkit-transform: translateY(-50%); 
		transform: translateY(-50%); 
		background-color: #fff; 
		content: ""; 
		-webkit-transition: all 500ms ease-in-out 0s;
		transition: all 500ms ease-in-out 0s;
	}
		a.hamburger-icon span::before {
			top: -10px; 
			-webkit-transform:none; 
			transform:none; 
		}
		a.hamburger-icon span::after {
			top: initial; 
			bottom: -10px; 
			-webkit-transform:none; 
			transform:none; 
		}
		
	a.hamburger-icon.active span {
		background-color: rgba(255,255,255,0);
	}
	a.hamburger-icon.active span::before,
	a.hamburger-icon.active span::after {
		top: 50%; left: 50%; 
		background-color: rgba(255,255,255,1); 
	}
	a.hamburger-icon.active span::before {
		-webkit-transform: translate(-50%,-50%) rotate(45deg); 
		transform: translate(-50%,-50%) rotate(45deg); 
	}
	
	a.hamburger-icon.active span::after {
		-webkit-transform: translate(-50%,-50%) rotate(-45deg); 
		transform: translate(-50%,-50%) rotate(-45deg); 
	}
	
	.primary-btn {
		background-color: #8fc044;
		font-weight: bold;
		font-size: 16px;
		color: #fff;
		cursor: pointer;
		margin: 0px;
		transition: border-color 0.4s ease 0s, color 0.4s ease 0s;
		border: none;
		vertical-align: middle;
		position: relative !important;
		z-index: 1;
		display: inline-block;
		text-transform: uppercase; 
		line-height: 100%; 
		box-sizing: border-box; 
		padding: 12px 25px; 
		text-align: center; 
	}

	.primary-btn:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #3c3c3c;
		z-index: -1;
		opacity: 0;
		-webkit-transform: scale3d(0.7, 1, 1);
		transform: scale3d(0.7, 1, 1);
		-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
		transition: transform 0.4s, opacity 0.4s;
		-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	}
	
	.primary-btn:hover:before {
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
	}
	
	/* blue button */

	.blue-btn {
		background-color: #56afff;
	}
		
	.blue-btn:hover {
		border-color: #37474f;
	}
	
	.blue-btn:before {
		background: #37474f;
	}
	
	.spinner-btn, .spinner-btn::before {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		background: #56afff url("../images/layout/search-spinner.gif") no-repeat scroll center center;
	}
	
	.form-error {
		border: 1px solid #FF0000 !important;
	}	

	
/*	SSO Header Login Menu
	-------------------------------------------------------------------------------------------------- */ 

	#loginmenu-wrapper {
	}

	.loggedin-menu {
		background-color: rgba(246,246,246,0);
		border-radius: 3.5px;
		box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.3);
		display: block;
		max-height: 0;
		height: auto;
		overflow: hidden;
		position: absolute;
		padding: 0;
		top: 30px; right: 0px; 
		-webkit-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
		width: 150px;
		z-index: 1000;
	}
	
	.loggedin-menu.loggedin-active {
		max-height: 300px; 	
		background-color: rgba(246,246,246,1);
	}
	
	.loggedin-menu li {
		display: block !important;
		margin: 0 0 5px !important;
		padding-left: 0px !important;
		padding-right: 0 !important;
		width: calc(100% - 15px) !important;
	}
	
	.loggedin-menu li a {
		color: #000 !important;
		display: block !important;
		font-size: 18px !important;
		padding-bottom: 5px !important;
		padding-top: 5px !important;
		text-decoration: none !important;
	}
	
	.loggedin-menu li a:hover {
    	color: #0678df !important;
	}

	.loginmenu-link {
		font-size: 18px !important;
		display: block;
		text-align: right;
		white-space: nowrap; 
	}
	
	.loginmenu-arrow {
		display: inline-block;
		position: relative;
		top: -1px;
	    border-left: 7px solid transparent;
	    border-right: 7px solid transparent;
	    border-top: 7px solid #fff;
	    height: 0;
	    width: 0;
	}
	
	#loginmenu-wrapper:hover .loggedin-menu {
	}
	
	#loginmenu-wrapper:hover .loggedin-menu li {
		display: block !important;
	}

							
					
/*	SEARCH TOOLBAR
	-------------------------------------------------------------------------------------------------- */ 

	#search-wrapper {
    position: relative;
    text-align: center;
    vertical-align: bottom;
	}
	
	#search-wrapper input[type="text"] {
    background-color: #000;
    border: medium none;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    height: 40px;
    margin: 14px 0 0;
    padding-left: 15px;
    padding-right: 15px;
    vertical-align: top;
    width: 250px;
	}
	
	/* placeholder color change */
	/* noted bug: IE placeholder text disappears on focus(); */
	#search-wrapper input[type="text"]::-moz-placeholder,
	#search-wrapper input[type="text"]:-moz-placeholder { 
		color:#929292; 
		opacity: 1;		
	}

	#search-wrapper input[type="text"]::-webkit-input-placeholder { color:#929292; }
	#search-wrapper input[type="text"]:-ms-input-placeholder { color:#929292; }
	
	#search-submit {
		-moz-appearance: none;
		background-color: #000;
		border: 1px solid #8ec044;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		height: 40px;
		left: -4px;
		margin: 14px 0 0;
		padding: 5px 15px;
		position: relative;
		text-transform: uppercase;
		vertical-align: top;
	}
	
	#search-close {
		position: absolute !important; 
		top: 25px; right: 10px; 
	}
	

/*	HEADER
	-------------------------------------------------------------------------------------------------- */ 

	#primary-nav {
		height: 70px; 
		background-color: #2b2b2b;
		text-align: left; 
	}
	#secondary-nav {
		height: 30px; 
		width: 100%; 
		box-sizing: border-box; 
		color: #000; 
		background-color: #a9c43a;
		line-height: 100%; 
		padding: 0px; 
		position: relative; 
	}
	
	#primary-nav .navigation {
		display: inline-block; 
		height: 100%; 
	}
	#primary-nav .inner {
		text-align: left; 
	}
	#primary-nav ul#main-menu {
		height: 100%;
		list-style-type: none;
		margin: 0;
		padding: 0;
		position: relative; 
	}
	
	#primary-nav ul#main-menu li {
		display: inline-block;
		vertical-align: top;
		font-size: 20px;
		height: 100%;
		margin-left: 0;
		padding: 0;
		text-decoration: none;
	}
	
	#primary-nav ul#main-menu li:first-child::before {
		display: block; 
		width: 1024px; height: 100%; 
		position: absolute; 
		top: 0px; left: -1024px; 
		background-color: #505050; 
		content: ""; 
	}
	
	#primary-nav ul#main-menu li a.logo-link {
		background-color: #505050;
		color: #fff;
		display: block;
		height: 100%;
		margin: 0;
		position: relative;
		text-decoration: none;
		-webkit-transform: skew(-15deg);
		transform: skew(-15deg);
		width: 160px;
	}
	
		a.logo-link .logo {
			display: inline-block; 
			width: 100%; 
			height: 100%; 
			box-sizing: border-box; 
			background-color: transparent; 
			content: ""; 
			background-image: url('../images/layout/wc-logo-metal.png'); 
			background-size: 85%; 
			background-position: 0px 8px;  
			background-repeat: no-repeat; 
		}
	
	#primary-nav ul#main-menu li .logo-link:after {
		background: #505050 none repeat scroll 0 0;
		content: " ";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
		
		-ms-transform: skew(15deg, 0deg);
		-webkit-transform: skew(15deg, 0deg);
		transform: skew(15deg, 0deg);

		-webkit-transform-origin: left bottom 0;
		transform-origin: left bottom 0;
	}
	
	/* bug: remove. image will be sized correctly from joon */
	#primary-nav ul#main-menu li .logo-link img {
		width: 130px;
	}
	
	#primary-nav ul#main-menu li .nav-link {
		background-color: #3c3c3c;
		color: #56afff;
		display: block;
		font-size: 20px;
		height: 100%;
		margin: 0 0 0 4px;
		text-decoration: none;
		text-transform: uppercase;
		transform: skew(-15deg);
		width: 125px; 
	}
	
	#primary-nav ul#main-menu li .nav-link:hover, #primary-nav #main-menu li .nav-link:active {
		background-color: #6a6a6a;
	}
	
	#primary-nav:hover #dropdown-menu {
		/*display: block;*/
	}
	
	#primary-nav ul#main-menu li .nav-link span {
		display: block;
		position: relative;
		text-align: center;
		top: 80%;
		pointer-events: none;
		-webkit-transform: translateY(-80%) skew(15deg);
		transform: translateY(-80%) skew(15deg);
	}
	
	
	#primary-nav ul#main-menu li .logo-link span {
		display: block;
		position: relative;
		top: 50%;
		left: 10px;
		padding-top: 5px;
		-webkit-transform: translateY(-50%) skew(15deg);
		transform: translateY(-50%) skew(15deg);
	}
	
	
	#secondary-nav .navigation {
		position: relative; 
		text-align: right; 
	}
	
	#secondary-nav ul {
		margin: 0px; padding: 0px; 
		height: 100%; 
		list-style-type: none; 
		font-size: 0; line-height: 100%; vertical-align: middle; 
		text-align: right; 
	}
	#secondary-nav ul,
	#secondary-nav ul li {
		display: inline-block; 
		text-transform: uppercase; 
		font-weight: normal;
	}
	
	#secondary-nav ul li {
		margin-left: 10px; 
		font-size: 1rem; 
		height: 100%; box-sizing: border-box; 
	}
	#secondary-nav ul li:first-child {
		margin-left: 0px; 
	}
	
	#secondary-nav ul li a {
		color: #000; 
		text-decoration: none; 
		display: block; 
		width: 100%; height: 100%; 
		padding: 0px 10px; 
		box-sizing: border-box; 
		line-height: 30px; 
		vertical-align: middle; 
	}
	#secondary-nav ul li:last-child a {
		padding-right: 0px; 	
	}
	
	#secondary-nav ul li a:hover {
		text-decoration: underline; 
	}
	
	#secondary-nav ul li.living-proof {
		font-weight: bolder; 
	}
	
	#tools {
		display: inline-block; position: absolute; right: 0px; top: 0px; 
		height: 100%; 
		width: calc(100% - 700px); /* 700px to compensate for primary-nav */ 
	}
	
	
	#tools ul {
		margin: 0px; 
		box-sizing: border-box; 
	}
	
	#tools ul,
	#tools ul li {
		display: inline-block; 
		vertical-align: middle; 
	}
	
	#tools ul li a {
		color: #fff; 
	}
	
	
	ul.toolbar-signin,
	ul.toolbar-support {
		display: block; clear: both; 
		width: 100%; 
		text-align: right; 
		padding-bottom: 2px; 
	}

	ul.toolbar-signin li,
	ul.toolbar-support li {
				
	} 

	ul.toolbar-support {
		padding-top: 0px !important; 
	}
	
	ul.toolbar-support li {
		vertical-align: top !important; 
	}
	
		.toolbar-support li.toolbar-support-hamburger {
			width: 30px; height: 30px; 
			display: none !important; 
		}

		.toolbar-support li.toolbar-support-search {
			vertical-align: top; 
			border: 1px solid #818181; 
			background-color: #2b2b2b;
			color: #818181; 
			width: 100%; max-width: 250px; text-align: left; 
			position: relative; 
		}
			li.toolbar-support-search input[type=search] {
				background-color: #2b2b2b; 
				color: #fff; 
				border: 0px; 
				height: 30px; line-height: 100%;
				line-height: 30px; vertical-align: middle; 
				padding: 0px 5px; 
				text-align: left; 
				width: calc(100% - 30px); /* 30px = icon.search */ 
			}
			li.toolbar-support-search input[type=search],
			li.toolbar-support-search a.icon.search {
				vertical-align: top; 
			}
	

	ul.toolbar-signin li a {
		border-left: 1px solid #fff; 
		padding: 0px 10px; 
	}
	
	ul.toolbar-signin li a:first-child {
		border-left: 0px; padding-left: 0px; 
	}
	ul.toolbar-signin li a:last-child {
		padding-right: 0px; 
	}


	ul.catalog-links {
		display: inline-block;
		height: 100%; 
		position: absolute; 
		left: 0px; 
		padding: 0px 10px; box-sizing: border-box; 
		vertical-align: top;
	}
		ul.catalog-links li {
			margin-left: 5px !important; 
			text-align: left !important;
			padding: 0px !important; 
			vertical-align: middle; 
			line-height: 30px; 
			 
		}
		
		ul.catalog-links li:first-child {
			margin-left: 0px; 
			margin-right: 10px; 
			font-weight: bolder;
		}
		ul.catalog-links li a {
			display: block; width: 100%; height: 100%; 
			padding: 0px !important; 
		}
		
		ul.catalog-links i.icon.pdf {
			vertical-align: middle; 
			margin-right: 2px;
			width: 15px; height: 15px; 
			position: relative; top: -2px; 
			opacity: 0.5; 
		}

	#header-promos {
		background-color: #b3b3b3;
		color: #000; 
		height: 30px; line-height: 30px; vertical-align: middle; 
		font-weight: 800;
	}

		#header-promos .inner {
			max-width: 550px; 
		}

		#header-promos a.pagination {
			display: inline-block; 
			overflow: hidden; 
			position: absolute; 
			width: 0; 
			height: 0; 
			top: 50%;
			-webkit-transform: translateY(-50%);  
			transform: translateY(-50%);  
		}
			#header-promos a#promo-left {
				left: -30px; 
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent; 
				border-right:10px solid #000; 
			}
			#header-promos a#promo-right {
				right: -30px;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-left: 10px solid #000;				 
			}

		#header-promos ul {
			display: inline-block; 
			width: 100%; 
			padding: 0px; 
			box-sizing: border-box; 
			list-style-type: none; 
			margin: 0px; 
			text-align: center; 
			overflow: auto; 
			white-space: nowrap;
			overflow: hidden; 
		}

		#header-promos ul[data-slide="0"] li {
			left: 0; 
		}
			#header-promos ul[data-slide="0"] li a {
				color:rgb(223, 21, 65);
				font-weight: bolder; 
			}

		#header-promos ul[data-slide="1"] li {
			left: -100%; 
		}
		#header-promos ul[data-slide="2"] li {
			left: -200%; 
		}
		#header-promos ul[data-slide="3"] li {
			left: -300%; 
		}
		#header-promos ul[data-slide="4"] li {
			left: -400%; 
		}
			#header-promos ul li {
				display: inline-block;
				text-align: center;  
				width: 100%; 
				scroll-snap-align: start;
				position: relative; 
				left: 0; 
				-webkit-transition: all 500ms ease-in-out;	
				transition: all 500ms ease-in-out;	
			}

			#header-promos ul li a {
				font-weight: bolder; 
				text-decoration: underline; 
				color: #000; 
			}

/*	FOOTER
	-------------------------------------------------------------------------------------------------- */ 

	#footer-nav {
		height: 300px;
		background-color: #000;
		font-size: 0px; /* remove spacing between inline-blocks */
		max-width: 750px; 
	}

	
	.footer-nav-links {
		margin-top: 50px;
		padding-left: 10px;
	}

	.footer-nav-signup {
		margin-top: 75px;
		text-align: center; 
	}
		
	.footer-nav-links ul {
		display: inline-block;
		list-style-type: none;
		margin: 0px; 
		margin-right: 50px;
		vertical-align: top;
		text-align: left;
		padding: 0;
	}

		ul#footer-resources {
			margin-right: -30px; 
		}
		
	.footer-nav-links ul li {
		display: block;
		padding: 0;
		color: #fff;
		font-size: 1.4rem;
		margin: 0 0 10px;
	}
	
	.footer-nav-links ul li:first-child {
		font-weight: bold;
		text-decoration: underline; 
		margin-bottom: 15px;
		color: #8fc043;
	}
	
	.footer-nav-links ul li a {
		text-decoration: none;
		color: #FFF;
		text-align: left;
	}

	

	
	#footer-nav-signup-wrapper {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%; max-width: 320px;
		overflow: hidden;
		float: right;  
		position: relative; 
	}
	
	#footer-nav-signup-wrapper #footer-nav-signup-title {
		display: block;
		font-size: 1.3rem;
		margin-bottom: 10px;
		text-align: left;
		color: #fff;
		font-weight: bold;
	}
	
	#footer-nav-signup-wrapper input[type="text"] {
		height: 40px;
		margin: 0;
		padding: 0 5px 0 0;
		width: 100%; 
	}
	
	#footer-nav-signup-wrapper input[type="submit"] {
		background-color: #9bc622;
		border: medium none;
		color: #fff;
		font-size: 16px;
		height: 40px;
		margin: 0;
		padding: 0 0 0 10px;
		position: absolute;
		right: 0px;
		text-align: center;
		width: 120px;
		z-index: 100;
	}
	
	#triangle-right {
		border-bottom: 20px solid transparent;
		border-left: 20px solid #fff;
		border-top: 20px solid transparent;
		height: 0;
		position: absolute;
		right: 101px;
		bottom: 0px;
		width: 0;
		z-index: 1000;
	}


	
	ul.social-channels {
		display: inline-block; padding: 0px; margin: 0px; 
		font-size: 0; line-height: 100%; vertical-align: top; 
		/*
		margin-top: 25px; 
		*/
	}
	ul.social-channels li:first-child {
		display: block; width: 100%; clear: both; 
		text-align: center; 
		margin: 0px; margin-left: 0px; 
		padding: 0px; padding-bottom: 20px; 
		color: #fff; 
		font-size: 2rem; 
		letter-spacing: 0.055rem; 
	}
	ul.social-channels li {
		display: inline-block; 
		width: 45px; height: 45px; 
		margin: 0px; 
		margin-left: 15px; 
		font-size: 1rem; line-height: 100%; vertical-align: top; 
	}
	ul.social-channels li a {
		display: block; width: 100%; height: 100%; 
	}
	ul.social-channels li:nth-child(2) {
		margin-left: 0px; 
	}
	
	
	/* bottom legal */

	#footer-legal {
		background: #000 url("../images/layout/footer_metal.jpg") no-repeat scroll left top / 100% 100%;
		height: 60px;
		position: relative;
		text-align: center; 
	}
	
	#footer-legal ul {
		color: #000;
		max-width: 100%; 
		display: inline-block;
		font-weight: bold;
		margin: 0 auto;
		padding: 0;
		text-align: center; 
		list-style-type: none; 
	}
			
	#footer-legal ul li {
		display: inline-block;
		height: 100%;
		padding: 0px 10px; 
	}
	
	#footer-legal ul li a {
		color: #000;
		display: block;
		height: 100%;
		line-height: 60px;
		text-decoration: none;
		vertical-align: middle;
		width: 100%;
	}
	
	#footer-legal ul li a:hover {
		text-decoration: none;
	}
	
	#footer-legal ul li:first-child {
		padding-left: 0;
	}



	
/*	MAIN BANNER - 100% WIDTH
	-------------------------------------------------------------------------------------------------- */ 
	
	.banner {
		position: relative;
	}
	
	#banner-wrapper {
		display: block;
		height: 100%;
		max-height: 80vh;
		min-height: 77vh;
		overflow: hidden;
		width: 100%;
	}
	
	
	#banner-img {
		background-position: center center;
		background-size: cover;
		bottom: 0;
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		background-color: #000;
		/* idea for blurup effect but slated for removal */
		/*filter: blur(10px);
    	transform: scale(1);*/
	}

	
	.banner .banner-text {
		left: 50%;
		position: absolute;
		top: 0;
		transform: translateX(-50%);
	}
	
	.banner .banner-text span {
		background: rgba(255, 255, 255, 0.72) none repeat scroll 0 0;
		color: #3b3b3b;
		display: block;
		font-size: 81px;
		font-weight: bold;
		padding: 30px;
		position: absolute;
		right: 0;
		text-transform: uppercase;
		line-height: 1;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.banner .sub-text span {
		font-size: 40px;
	}




/*	MOBILE NAV
	-------------------------------------------------------------------------------------------------- */ 
		
	#mobile {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 70px;
		z-index: 500;
		display: block;
		visibility: hidden;
		background-color: #000;
		-webkit-transition: all 500ms ease-in-out 0s;
		transition: all 500ms ease-in-out 0s;
		left: -110%;
	}
	
	#site-notification ~ #mobile {
		top: 140px; /* Accomodate site notification */  
	}
	
	#mobile nav {}
	
	#mobile nav ul.static-nav-items {
		display: block; width: 100%; 
		box-sizing: border-box; 
		clear: both; 
		padding: 0px; margin: 0px; 
		list-style-type: none; 
		font-size: 0; 
	}

	#mobile nav ul.static-nav-items li {
		display: block; width: 100%; 
		box-sizing: border-box; 
		clear: both; 
		color: #fff; 
		margin: 5px 0px; 
	}

	
	#mobile nav ul.static-nav-items li:first-child {
		margin-top: 0px; 
	}

	
	#mobile nav ul.static-nav-items li a {
		background-color: #000;
		color: #fff; 
		cursor: pointer !important; 
		line-height: 120%; 
		padding: 10px 0 10px 25px;
		box-sizing: border-box; 
		display: block; width: 100%; height: 100%; 
		text-decoration: none !important; 
		font-weight: bolder; 
		font-size: 2rem; 
	}
	
	#mobile nav ul.static-nav-items li.living-proof a {
		color: #a8c62b;
	}
	
		/*
		ul.static-nav-items i.icon.login,
		ul.static-nav-items i.icon.logout,
		ul.static-nav-items i.icon.my-profile {
			width: 25px; height: 25px;
			margin-right: 10px; 
		}
		*/

	
	#mobile ul li.catalog-links {
		color: #fff; font-size: 1.8rem; font-weight: bolder; 
		padding: 10px 25px; padding-bottom: 10px; 
		box-sizing: border-box; 
		margin-top: 15px !important; 
	}
	
	#mobile ul li.catalog-links > ul {
	 	margin: 0px; padding: 0px; 
		margin-top: 20px; 
	}
	#mobile ul li.catalog-links > ul > li a {
		padding-left: 15px; 
		font-size: 1.5rem; 
	}
	#mobile ul li.catalog-links > ul > li i.icon {
		margin-right: 10px; 
	}
		
	
	#mobile nav .accordion {}

	
	#mobile nav .accordion-item {
		margin-bottom: 5px;
		margin-top: 5px;
	}

	#mobile nav .accordion-title {
		background-color: #9bc622;
		box-sizing: border-box;
		color: #fff;
		cursor: pointer;
		font-size: 40px;
		margin: 0;
		padding: 10px 0 10px 25px;
		position: relative;
		width: 100%;
	}
	
	#mobile nav .accordion-title span {
	
	}
	
	#mobile nav .accordion-arrow {
    	position: absolute;
		right: 15px;
	}
	
	#mobile nav .accordion-content {
    height: 0;
    overflow: hidden;
	background-color: #FFF;
	transition: height 0.4s ease 0s;
	}
	
	#mobile nav .accordion-content ul {
		list-style-type: none;
	}

	#mobile nav .accordion-content ul li {
    margin-bottom: 20px;
    margin-top: 20px;
	}

	#mobile nav .accordion-content ul li a {
		text-decoration: none;
		color: #000;
		font-size: 20px;
	}
	
		
		
/*	GLOBAL LAYOUT. 
	-------------------------------------------------------------------------------------------------- */ 

	#main-content {
		margin-top: 15px;
	}
	
		#content h1.component-title {
			font-size: 3rem;
			line-height: 95%; 
		}
		#content div.component-summary {
			font-size: 1.2rem; 
			display: block; width: 100%; clear: both; 
			margin: 10px 0px 20px 0px; 
			box-sizing: border-box; 
		}

	.breadcrumbs {
		display: block; width: 100%; box-sizing: border-box; 
		clear: both; padding: 0px; margin: 0px; text-align: left; 	
	}
	ul.breadcrumb-trail {
		display: inline-block; width: 100%; clear: both; 
		box-sizing: border-box; margin: 0px; padding: 0px 10px; list-style-type: none; 	
		vertical-align: middle; 
		color: #8292aa; 
	}
		.breadcrumb-trail li {
			display: inline-block;
			margin-left: 5px;  
			vertical-align: middle;
			position: relative;  
			color: #8292aa; 
		}
		
		.breadcrumb-trail li::before {
			content: "/";
			display: inline-block; 
			vertical-align: middle; 
			position: absolute; 
			left: -2px; 
			top: 50%; 
			-webkit-transform: translateY(-50%);  
			transform: translateY(-50%);  
			color: #8292aa; 
		}
		
		.breadcrumb-trail li:first-child {
			margin-left: 0px; 	
		}
		.breadcrumb-trail li:first-child::before {
			display: none; 	
		}
		
		.breadcrumb-trail li > a {
			display: block; width: 100%; height: 100%; 	
			padding: 5px 10px; 
			text-decoration: none; 
		}
		
		.breadcrumb-trail li > a:hover {
			text-decoration: underline; 	
		}

	#homepage-wrapper {
		background-color: #000;
	}
	
	#homepage-promos {
	    max-height: 80vh; /* 700px; */
	    overflow: hidden;
		border-bottom: solid 10px #9cc722;
	}
		#homepage-promos #signup .primary-btn {
			position: absolute !important; 
		}
	
	#promo {
		margin: 0 auto;
		max-width: 1800px;
		position: relative;
		text-align: center;
	}
	
	#promo img {
		max-width: 100%;
		height: auto;
		vertical-align: middle; /* fixes little padding after this image element */
	}


	#video-play {
    display: block;
    left: calc(50% + 0px);
    position: absolute;
    top: 30%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 100;
	}
	
	#video-play h1 {
    color: #fff;
    display: block;
    font-size: 60px;
    position: relative;
    top: 100px;
    z-index: 100;
	}
	
	#video-play-text {
    color: #fff;
    display: block;
    font-size: 30px;
    left: -110px;
    opacity: 1;
    position: relative;
    text-transform: uppercase;
    top: 40px;
	}
	
				
	.signup-btn {
		display: block;
		height: 38px;
		left: 0;
		padding-top: 15px;
		position: absolute;
		text-align: center;
		top: 195px;
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-transform-origin:left top 0;
		transform-origin: left top 0;
		width: 195px;
		z-index: 1000;
		text-decoration: none;
		transition: bottom 0.3s linear;
	}
	
	#promo .signup-btn {
		position: absolute !important; 
	}
	
	.signup-btn:hover {
		background-color: #7d9f1d;
	}
	
	/*
	.signup-btn:hover .signup-arrows {
		-webkit-animation-name: bounce;
		animation-name: bounce;
		-webkit-animation-duration: .8s;
		animation-duration: .8s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}
	
		
	@-webkit-keyframes bounce {
	  0%       { bottom:10px; }
	  25%,  	{ bottom:7px; }
	  50%      { bottom:5px; }
	  75%      { bottom:0px; }	 
	  100%     {bottom:15px;}
	}
	
	@keyframes bounce {
	  0%       { bottom:10px; }
	  25%,  	{ bottom:7px; }
	  50%      { bottom:5px; }
	  75%      { bottom:0px; }	 
	  100%     {bottom:15px;}
	}
	
	@-moz-keyframes bounce {
  	  0%       { bottom:10px; }
	  25%,  	{ bottom:7px; }
	  50%      { bottom:5px; }
	  75%      { bottom:0px; }	 
	  100%     {bottom:15px;}
	}
	*/
	
	.signup-btn span {
		display: block;
	}
	
	.signup-btn .signup-arrows {
		bottom: 15px;
		color: rgb(255, 255, 255);
		font-size: 16px;
		left: 6px;
		position: absolute;
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	
	.signup-btn .signup-arrows span {
		display: inline-block;
	}
	
	
	

	
	
/*	MISC ITEMS
	-------------------------------------------------------------------------------------------------- */ 

	.arrow-down {
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #fff;
		height: 0;
		width: 0;	
	}


	.arrow-up {
	  width: 0; 
	  height: 0; 
	  border-left: 10px solid transparent;
	  border-right: 10px solid transparent;  
	  border-bottom: 10px solid #fff;
	}


/*  SELECT BOX 
	-------------------------------------------------------------------------------------------------- */ 

	.selectbox {
		background: #f6f6f6 none repeat scroll 0 0;
		border: medium none;
		display: inline-block; box-sizing: border-box; 
		margin: 0;
		padding: 0;
		position: relative;
		cursor: pointer;
		width: 100%; 
		max-width: 400px; 
	}
	
	.selectbox a {
		text-decoration: none;
	}
	
	.selectbox-selected {
		background: #3c3c3c none repeat scroll 0 0;
		color: #fff;
		font-weight: bold;
		overflow: hidden;
		padding: 5px;
		position: relative;
		padding-left: 10px;
		padding-right: 35px;
	}
	
	.selectbox-selected a {
		color: #FFF;
	}
	
	.selectbox-options {
		background-color: #fff;
		border: solid 1px #000;
		box-sizing: border-box;
		display: block;
		max-height: 0px;
		overflow-y: auto;
		position: absolute;
		width: 100%;
		z-index: 99999;
		overflow: auto;
		height: 0px; 
		opacity: 0; 
		-webkit-transition: all 500ms ease-in-out; 
		transition: all 500ms ease-in-out; 			
	}
	.selectbox-options.active {
		max-height: 150px;
		height: auto; 
		opacity: 1;  
	}
	
	.selectbox-options a {
		color: #000;
	}
	
	.selectbox-options span {
		border-top: 1px solid #ccc;
		display: block;
		font-size: 16px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-top: 10px;
		width: calc(100% - 15px);
	}

	.selectbox-options span:hover {
		background-color: #eaeaea;
	}
	
	.selectbox-arrow-wrapper {
    background-color: #999999;
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
	}
	
	.selectbox-arrow-down {
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #fff;
		height: 0 !important;
		width: 0 !important;
		left: 9px;
		position: absolute;
		-webkit-transition: all 500ms ease-in-out; 
		transition: all 500ms ease-in-out; 				
		top: 50%;
		transform: translateY(-50%);
	}


	.selectbox-arrow-up {
		border-bottom: 10px solid #fff;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		height: 0 !important;
		width: 0 !important;
		left: 9px;
		position: absolute;
		-webkit-transition: all 500ms ease-in-out; 
		transition: all 500ms ease-in-out; 				
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}	
	.selectbox-arrow-up.active {
		-webkit-transform: translateY(-50%) rotate(180deg);
		transform: translateY(-50%) rotate(180deg);
	}


/*	RECIPE SIGNUP
	-------------------------------------------------------------------------------------------------- */ 


#recipe-signup {
	background-color: #FFF;
    border-top: 10px solid #9cc722;
    width: 100%;	
}

.recipe-wrapper {
    margin: 0 auto;
    padding: 0;
	max-width: 1300px;
}

.recipe-wrapper #recipe-content-img {
    height: auto;
    /*left: -174px;*/
    max-width: 659px;
    position: relative;
    width: 100%;
	vertical-align: top;
}


.image-mask {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 60px solid #FFF;
    box-shadow: 15px 0 15px 0 #fff inset;
    box-sizing: border-box;
}

.image-mask img {
    z-index:-1;
    position: relative;
}

#recipe-content {
    font-size: 20px;
	display: block; 
	height: 100%; 
	width: 60%; 
	max-width: 700px; 
	position: absolute;
	top: 0px; right: 0px; 
	padding: 35px; 
	box-sizing: border-box; 
	z-index: 10; 
}

	#recipe-content::before {
		display: block; width: 100%; height: 100%; 
		background-color: #fff; 
		opacity: 0; 
		position: absolute; top: 0px; left: 0px; 
		z-index: -1; 
		content: ""; 
		-webkit-transition: all 500ms ease-in-out; 
		transition: all 500ms ease-in-out; 		
	}

#recipe-content-text {}

	#recipe-content-text h1:first-of-type {
		display: block; 
		text-align: left; 
		clear: both; margin: 0px; padding: 0px; line-height: 110%; 
	}

	#recipe-content-text span:first-of-type {
		display: block;
		font-size: 18px;
		margin: 5px 0px;
		margin-bottom: 15px; 
		padding: 0px; 
	}

#recipe-content-signup {
    background: rgba(255, 255, 255, 0.85) none repeat scroll 0 0;
    border: 1px solid #e2e2e2;
    padding: 25px; 
	box-sizing: border-box; 
	width: 100%;
}

#recipe-content-signup-left {
    display: inline-block; height: 40px; 
	vertical-align: middle; 
	width: 160px; 
	padding-right: 10px;
	box-sizing: border-box; 
}	
	#recipe-content-signup-left h1 {
		display: block; width: 100%; height: 100%; line-height: 40px; 
		margin: 0px; padding: 0px; 
		vertical-align: middle; 
	}

#recipe-content-signup-right {
    display: inline-block;
    height: 40px;
  	width: calc(100% - 160px); /* 150px signup-left */ 
	box-sizing: border-box; 
	position: relative; 
}




	#recipe-content-signup-right input[type="text"] {
		border: 1px solid #e2e2e2;
		display: inline-block;
		text-align: center; 
		padding: 0px; 
		padding-right: 140px; /* size of submit */ 
		box-sizing: border-box; 
		height: 40px;
		width: 100%; 
	}

	#recipe-content-signup-right input[type="submit"] {
		background-color: #9bc622;
		border: medium none;
		color: #fff;
		font-size: 16px;
		height: 40px;
		width: 120px;
		text-align: center;
		box-sizing: border-box; padding-left: 15px; /* To allow for triangle */ 
		
		position: absolute;
		top: 0px; right: 0px; 
		z-index: 100;
	}

		#recipe-content-triangle {
			border-bottom: 20px solid transparent;
			border-left: 20px solid #fff;
			border-top: 20px solid transparent;
			height: 0;
			position: absolute;
			right: 101px;
			top: 0;
			width: 0;
			z-index: 110;
		}



/*	ROI CALCULATOR
	-------------------------------------------------------------------------------------------------- */ 


.category-roi {
	border-top: 10px solid #9cc722;
	width: 100%;
}

#category-roi-main {
	background-color: #9cc722;
    box-sizing: border-box;
    display: block;
    height: 0;
    left: 0;
	overflow: hidden;
    position: relative;
    text-align: center;
    top: 0;
    transition: height 0.4s ease 0s;
    width: 100%;
    z-index: 500;
}

#category-roi-content {
	height: auto;
	padding-bottom: 25px;
	padding-left: 10px;
}

#category-roi-content h1 {
	display: block;
	text-align: center;
	font-size: 30px;
	color: #FFF;
}

.category-roi-btn {
	background-color: #9cc722;
	color: #FFF;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    display: block;
    margin: 0 auto;
    padding-bottom: 8px;
    padding-top: 5px;
    width: 240px;
	position: relative;
}

.category-roi-btn, .category-roi-btn:hover {
	border-top: solid 1px #9cc722;
}

.category-roi-btn .category-roi-text {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding-left: 15px;
    padding-top: 10px;
    vertical-align: top;
}

.category-roi-btn .category-roi-arrow {
	left: 120px;
	position: absolute;
	top: 43px;
}


.category-roi-btn img {
	display: inline-block;
	padding-left: 15px;
}


/* ROI FORM */

#roi-close {
    color: #fff;
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
	text-transform: uppercase;
}

#roi-title {
    color: #fff;
    display: block;
    font-size: 18px;
    left: 50%;
    position: relative;
    text-align: center;
    transform: translateX(-50%);
    width: 80%;
}

.roi-input {
	margin-top: 15px;
	width: 100%;
}


.roi-input .col input {
	height: 60px;
	font-size: 20px;
	width: calc(100% - 30px);
    outline: none;
	border: none;
}

.roi-input .col .roi-input-text {
	text-align: center;
	display: block;
    margin-top: 10px;
    width: calc(100% - 30px);
	color: #FFF;
	font-weight: bold;
}

#roi-select {
    text-align: left;
	display: block;
    margin-top: 10px;
    width: calc(100% - 30px);
}



#roi-calculate {
    background-color: #9cc722;
    border: 1px solid #fff;
    color: #fff;
    display: block;
    font-size: 20px;
    left: 50%;
    margin-bottom: 50px;
    margin-top: 25px;
    padding: 7px 50px;
    position: relative;
    text-align: center;
    transform: translateX(-50%);
}

#roi-calculate:hover {
    border: 1px solid #C9C9C9;
	background-color: #3c3c3c;
    box-shadow: 0 0 4px 0 rgba(0,0,0, 0.5);
    text-decoration: none !important;
}




/*	Google Map + Map Results
	-------------------------------------------------------------------------------------------------- */ 
	

#google-map-results {
	width: 100%;
	height: 350px; 
	margin-top: 15px;
	margin-bottom: 15px;
}

#google-map-results #google-map-results-list {
	width: 35%;
	height: 350px;
	display: inline-block;
	box-sizing: border-box;
	float: left; 
}

#google-map-results-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
}

#google-map-results-list ul li {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
    margin: 7px 5px 0 0;
	padding: 10px 0 10px 5px;
	display: block;
	text-decoration: none;
	cursor: pointer;
}

#google-map-results-list ul li:first-child {
	margin-top: 0px;
}

#google-map-results-list ul li:hover,
#google-map-results-list ul li.active {
	background: rgba(0,0,0,.05);
}

#google-map-results-list ul li .list-id {
    background-image: url("../svg/marker.svg");
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    height: 38px;
    margin-left: 5px;
    padding-top: 5px;
    text-align: center;
    vertical-align: top;
    width: 38px;
}

#google-map-results-list ul li .list-info {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: calc(85% - 25px);
	margin-left: 20px;
}

#google-map-results-list ul li .list-info h1 {
    color: #000;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

	/* Distance */ 
	ul li .list-info h1 sup {
		line-height: 100%; 
		vertical-align: middle; margin: 0px; margin-left: 5px; padding: 0px; 
		font-size: 0.8rem; 
	}

#google-map-results-list ul li .list-info span {
    color: #000;
    display: block;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
	padding: 0;
}

#google-map-results-list ul li .list-info a {
    color: #0f316e;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding-left: 5px;
}

#google-map-results-list ul li .list-info a:hover,
#google-map-results-list ul li .list-info .active {
	color: #56afff;
}

#google-map-results-list ul li .list-info img {
    height: 20px;
    position: relative;
    top: -2px;
    vertical-align: top;
    width: 20px;
}

#google-map-results .google-map-results-map {
	width: 65%;
	height: 350px;
	display: inline-block;
	box-sizing: border-box;
}

#google-map-results .fullmap {
	width: 100%;
}



/*	AutoComplete
	-------------------------------------------------------------------------------------------------- */ 
	
	.autocomplete {
		position: relative;
	}
	
	.autocomplete-results {
    background-color: #fff;
    box-sizing: border-box;
    display: block;
    margin-top: 5px;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 99999;
	}
	
	.autocomplete-results span {
		display: block;
	    font-size: 16px;
	    padding-bottom: 10px;
	    padding-left: 15px;
	    padding-top: 10px;
	    width: calc(100% - 15px);
	    border-top: 1px solid #ccc;
	    display: block;
		cursor: pointer;
	}
	
	.autocomplete-results .active {
		background-color: #828aa9;
	}
	
	
/*	ICONS/SVGS
	-------------------------------------------------------------------------------------------------- */ 
	.icon.close {
		position: relative; 
		cursor: pointer !important; 
		width: 20px; height: 20px; 
		content: "";
	}
	
	.icon.close::before,
	.icon.close::after {
		display: inline-block; 
		width: 100%; height: 3px; background-color: #fff; 
		position: absolute; 
		top: 50%; left: 50%;
		content: ""; 
		-webkit-transition: all 500ms ease-in-out 0s;
		transition: all 500ms ease-in-out 0s;		
	}
	.icon.close::before {
		-webkit-transform: translate(-50%,-50%) rotate(45deg); 
		transform: translate(-50%,-50%) rotate(45deg); 
	}
	.icon.close::after {
		-webkit-transform: translate(-50%,-50%) rotate(-45deg); 
		transform: translate(-50%,-50%) rotate(-45deg); 
	}
	
	.icon.close:hover::before,
	.icon.close:hover::after {
		-webkit-transform: translate(-50%,-50%) rotate(0deg); 
		transform: translate(-50%,-50%) rotate(0deg); 
	}
	
	
	.icon.search {
		background-color: #565656;
		background-image: url("../svg/search-white.svg");
		background-position: 5px 6px;
		background-repeat: no-repeat;
		background-size: 75%;
		color: #e0e0e0;
		display: inline-block;
		font-size: 0.75rem;
		margin: 0;
		padding: 0;
		width: 30px;
		height: 30px;
	}
	
	
	.icon-play {
		background: rgba(229,229,229,0.30);
		border-radius: 100px;
		height: 100px;
		position: absolute;
		width: 100px;
		margin: auto;
		color: #000;
		top:0;
		bottom:0;
		right:0;
		left:0;
		border: solid 1px #c8c8c8;
		cursor: pointer;
		z-index: 100;
	}
	
	.icon-play:hover {
		background: rgba(229,229,229,0.60);
		border: solid 1px #000;
	}
	
	.icon-play:before {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 0 20px 30px;
		border-color: transparent transparent transparent #fff;
		position: absolute;
		opacity: 0.7;
		top:0;
		left:0;
		right:-13px;
		color: #000;
		bottom:0;
		margin: auto;
	}
	
	.icon.pdf {
		display: inline-block; 
		width: 20px; height: 20px; 
		background-image: url("../svg/file-pdf.svg");
		background-size: 100%; 
		background-position: center center; 
		background-repeat: no-repeat; 
	}	
	.icon.pdf.white {
		background-image: url("../svg/file-pdf-white.svg");
	}
	
	

/*	Tool Tip
	-------------------------------------------------------------------------------------------------- */ 
	
	.tooltip {
		position: relative;
		display: block;
	}
	
	.tooltip-desc {
		display: block;
		position: absolute;
		padding: 10px;
		text-align: center;
		background-color: #000; 
		color: #FFF; 
		font-size: 20px !important;
		z-index: 200;
		width: 150px;
	}


	
/*	MISC
	-------------------------------------------------------------------------------------------------- */ 

	
	#disqus_thread {
		display: block;
		padding-bottom: 25px;
		padding-left: 16px;
		width: calc(100% - 16px);
	}

	
/*	MODAL
	-------------------------------------------------------------------------------------------------- */ 

	
	.modal-mask { /* Opaque Mask */ 
		background: rgba(0, 0, 0, 0.55) none repeat scroll 0 0;
		display: block; 
		width: 100%; height: 100%; 
		position: fixed; top: 0px; left: 0px; 
		z-index: 1000; 
	}
	
	.modal {
		position: absolute;
		/* 
		position: fixed; 
		*/ 
		top: 100px;
		width: 100%; 
		max-width: 600px; 
		left: 50%; 
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		box-sizing: border-box; 
		z-index: 500000; 
	}
	
	.modal-wrapper {
		background-color: #fff;
		padding: 0px; margin: 0px !important; 
		border-radius: 15px;
		box-sizing: border-box; 
	}
	
	.modal-wrapper h3 {
		background-color: #8fc044;
		border-radius: 15px 15px 0 0;
		height: 20px;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
	}
	.modal-wrapper h3.has-title {
		color: #fff; 
		text-transform: uppercase; 
		display: block; width: 100%; 
		box-sizing: border-box; 
		padding: 0px;
		height: 40px; line-height: 40px;  
		text-align: center; 
	}
	
	.modal-wrapper h3 span {
    color: #fff;
    display: block;
    font-size: 30px;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
	}
	
	.modal-close, .modal-close:hover {
    background-color: #000;
    border: 2px solid #8fc044;
    border-radius: 25px;
    color: #fff;
    font-size: 40px;
    height: 42px;
    position: absolute;
    right: -15px;
    text-decoration: none;
    top: 8px;
    transform: translateY(-50%);
    width: 42px;
	}
	
	.modal-close span {
		position: absolute;
	}
	
	.modal-content {
		padding: 0 15px 15px;
	}
	
	
	/* RECIPE MODAL */
	
	.recipe-signup-modal {
	}
	
	.recipe-signup-modal .modal-content {
	}
		
	.recipe-signup-modal .modal-content #subtitle {
    color: #a08f85;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
	}
	
	.recipe-signup-modal .modal-wrapper {
		border-radius: none;
	}
	
	.recipe-signup-modal .modal-wrapper h3 {
	}
	
	.recipe-signup-modal .modal-wrapper h3 span {
		font-size: 35px;
	}
	
	.recipe-signup-modal .modal-close {
	}

	.recipe-signup-modal .recipe-modal-left {
		width: 40%;
		margin-top: 25px;
	}
	
	.recipe-signup-modal .recipe-modal-left img {
		width: 100%;
	}
	
	.recipe-signup-modal .recipe-modal-right {
		width: 60%;
		margin-top: 25px;
	}

	
	
	.recipe-form {
    background-color: #f4f4f4;
    list-style-type: none;
    margin: 0 0 0 30px;
    padding: 30px;
	}
	
	.recipe-form li {
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
	}
	
	.recipe-form li:last-child {
		margin-bottom: 0px;
	}
	
	.recipe-form li label {
    display: inline-block;
    font-size: 24px;
    padding-top: 5px;
    vertical-align: top;
    width: 100px;
	}
	
	.recipe-form li input[type="text"], input[type="password"] {
		border: 1px solid #e2e2e2;
		display: inline-block;
		height: 40px;
		margin: 0;
		padding: 0;
		text-align: center;
		width: calc(100% - 105px);
	}
	
	.recipe-form li button {
		padding: 15px;
		text-align: center;
		width: 100%;
	}
	
	
	/* SSO User Profile Modal */
	
	.modal-ssoprofile {
	}
	
	.modal-ssoprofile .modal-content {
	}
	
	.modal-ssoprofile .modal-content ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.modal-ssoprofile .modal-content ul li {
		margin: 0 0 15px;
		padding: 0;
	}

	.modal-ssoprofile .modal-content ul li label {	
		display: inline-block;
		font-size: 16px;
		vertical-align: top;
		width: 100px;
	}
	
	.modal-ssoprofile .modal-content ul li input[type="text"] {
		border: 1px solid #e2e2e2;
		display: inline-block;
		height: 40px;
		margin: 0;
		padding: 0;
		text-align: left;
		width: calc(100% - 105px);
	}
	
	.modal-ssoprofile .modal-content ul li textarea {
		border: 1px solid #e2e2e2;
		display: inline-block;
		height: 150px;
		margin: 0;
		padding: 10px 0 0 10px;
		text-align: left;
		width: calc(100% - 117px);
	}

	.modal-ssoprofile .modal-content ul li .primary-btn {
		display: block;
		height: 40px;
		margin: 0 auto;
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.modal-ssoprofile .modal-content ul li .optin-list label {
		width: 90%;
	}
	

/*	SOCIAL SHARE
	-------------------------------------------------------------------------------------------------- */ 
	
	.social-share {
		font-size: 0;
		list-style-type: none;
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	.social-share li {
		display: inline-block;
		margin-right: 10px;
	}
	
	
	
	.social-share li a {
		border: 2px solid #000;
		border-radius: 50%;
		display: block;
		height: 40px;
		padding: 5px;
		width: 40px;
		text-decoration: none;
		box-sizing: border-box;
	}
	
	.social-share li svg {
		display: block;
		height: 20px;
		margin: 0 auto;
		padding: 0;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
	}
	
	.social-share #facebook a {
		color: #3b5998;
		border-color: #3b5998;
		transition: background-color 0.3s ease-out;
	}
	
	.social-share #facebook a:hover, .social-share #facebook a:active {
		background-color: #3b5998;
		border-color: #3b5998;
		color: #FFF;
	}
	
	.social-share #facebook a:hover svg {
		color: #FFF;
	}
	
	
	.social-share #twitter a {
		color: #1daced;
		border-color: #1daced;
		transition: background-color 0.3s ease-out;
	}
	
	.social-share #twitter a:hover, .social-share #twitter a:active {
		background-color: #1daced;
		border-color: #1daced;
		color: #FFF;
	}
	
	.social-share #twitter a:hover svg {
		color: #FFF;
	}
	
	
	.social-share #mail a {
		color: #ff674d;
		border-color: #ff674d;
		transition: background-color 0.3s ease-out;
	}
	
	.social-share #mail a:hover, .social-share #mail a:active {
		background-color: #ff674d;
		border-color: #ff674d;
		color: #FFF;
	}
	
	.social-share #mail a:hover svg {
		color: #FFF;
	}
	
	.social-share #print a {
		color: #b8b6b4;
		border-color: #b8b6b4;
		transition: background-color 0.3s ease-out;
	}
	
	.social-share #print a:hover, .social-share #print a:active {
		background-color: #b8b6b4;
		border-color: #b8b6b4;
		color: #FFF;
	}
	
	.social-share #print a:hover svg {
		color: #FFF;
	}



/*	SINGLE SIGN-ON
	-------------------------------------------------------------------------------------------------- */ 

	.modal-sso .modal-wrapper {
		max-width: 600px;
		box-sizing: border-box; 
		margin: 0px !important; 
	}
	
	.hr-text {
		border-bottom: 2px solid #a6a6a6;
		height: 15px;
		margin: 15px 0;
		text-align: center;
		width: 100%;
	}

	.hr-text span {
		background-color: #fff;
		font-size: 30px;
		line-height: 30px;
		padding: 0 20px;
		position: relative;
		top: 0;
		color: #777777;
	}

	#ssopanel-social {
		text-align: center;
	}
	
	#ssopanel-social h2 {
		font-size: 40px;
		line-height: 100%; 
	}
	
	#ssopanel-social a {
		display: inline-block;
		padding-left: 20px;
	}
	
	#ssopanel-social a:hover {
		transform: scale(1.05) rotate(0.05deg);
	}

	#ssopanel-social a:first-of-type {
		padding-left: 0px;
	}
	
	#sso-reset h1 {
		display: block; clear: both; box-sizing: border-box; 
		padding: 30px; font-size: 2.2rem; line-height: 100% !important; 
		text-align: center; 
		margin: 0px; 
	}

	.ssopanel-form {
    list-style-type: none;
    margin: 0px;
    padding: 30px;
	}
	
	.ssopanel-form li {
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
	}
	
	.ssopanel-form li:last-child {
		margin-bottom: 0px;
	}
	
	.ssopanel-form li a.register-toggle {
		font-size: 2rem; 
		font-weight: bolder; 
		color: #000; 
		text-decoration: underline; 
		text-align: center; 
		display: block; width: 100%; 
		box-sizing: border-box; 
		padding: 5px; 
		line-height: 110%; 
	}
	
	.ssopanel-form li label {
    display: inline-block;
    font-size: 24px;
    padding-top: 5px;
    vertical-align: top;
    width: 100px;
	}
	
	.ssopanel-form li input[type=text],
	.ssopanel-form li input[type=email], 
	.ssopanel-form li input[type=password] {
		border: 1px solid #e2e2e2;
		display: inline-block;
		height: 40px;
		margin: 0;
		padding: 0;
		text-align: center;
		width: calc(100% - 105px);
	}
	
	.ssopanel-form span.forgot-pwd {
		display: block; 
		width: 100%; 
		box-sizing: border-box; 
		padding: 20px 10px 5px 10px; 
		text-align: center; 
	}
	
	.ssopanel-form li button {
		padding: 15px;
		text-align: center;
		width: 100%;
	}
	
	.ssopanel-errors {
		display: block; clear: both; width: 100%; box-sizing: border-box; 
		font-size: 18px;
		color: #ff0000;
		padding: 0px 15px; 
		text-align: center; 
	}
	
	#sso-reset .ssopanel-errors {
		text-align: center; 
	}
	
	#sso-reset p.message {
		text-align: center; 
		padding: 0px 30px; 
		padding-bottom: 30px; 
		margin: 0px; 
		font-size: 1.2rem; 
	}
	
	
/*	IMAGE BLUR PLACEHOLDER
	-------------------------------------------------------------------------------------------------- */ 

	.preload-img {
		position: relative;
		background-size: cover;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	
	.preload-img img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: all 0.5s ease-in-out;
	}
	
	.preload-img .thumb-loaded {
		opacity: 1;
		filter: blur(10px);
		transform: scale(1);
	}
	
	.preload-img .large-loaded {
		opacity: 1;
	}
	
	.preload-img .thumb-hidden {
		opacity: 0;
	}	


	
	
/*	ANIMATIONS
	-------------------------------------------------------------------------------------------------- */ 


	.animate-fadeupy {
		animation-name: fadeUpY;
		animation-duration: 0.6s;
		animation-fill-mode: backwards;
	}

    .animate-fadeupy:nth-child(2n) {
      animation-delay: .1s;
    }
    .animate-fadeupy:nth-child(3n) {
      animation-delay: .2s;
    }
	
    .animate-fadeupy:nth-child(4n) {
      animation-delay: 0s;
    }
	
	@keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}


	@keyframes fadeUpY {
		from {
			opacity: 0;
			transform: translateY(50px);
		}
		to {
			opacity: 1;
			transform: translateY(0px);
		}
	}
		
	@keyframes flipInX {
		0% {
			opacity: 0;
			transform: perspective(400px) rotateX(90deg);
		}
		40% {
			transform: perspective(400px) rotateX(-10deg);
		}
		70% {
			transform: perspective(400px) rotateX(10deg);
		}
		100% {
			opacity: 1;
			transform: perspective(400px) rotateX(0deg);
		}
	}

	@keyframes flipInVert {
	
		0% {
			opacity: 0;
			transform: perspective(400px) rotateX(-70deg);
			transform-style: preserve-3d;
		}
		
		40% {
			transform: perspective(400px) rotateX(-50deg);
		}
		
		70% {
			transform: perspective(400px) rotateX(-30deg);
		}
		
		100% {
			opacity: 1;
			transform: perspective(400px) rotateX(0deg);
		}
		
	}
	
	
	.animated {
		animation-duration: 0.2s;
		animation-fill-mode: both;
	}
	
	.flipInX {
		animation-name: flipInX;
		backface-visibility: visible !important;
	}
	
	.flipInVert {
		animation-name: flipInVert;
		backface-visibility: visible !important;
	}