/*
	Css stylesheet for Organic Squeeze 2016
	Written by Tim Giddens (tim@nomineedesign.com)
	Started on 1/26/16
	
*/

/* Global */

section {
	overflow: hidden;
	padding: 75px 0px;
}

	section.creme {
		background: #fef7ed;
		color: #000;
	}
	
		section.creme .button {
			border-color: #78b23a;
			color: #78b23a;
		}

	section.white {
		background: #fff;
		color: #000;
	}
	
		section.white .button {
			border-color: #f36f21;
			color: #f36f21;
		}

	section.kitchen-table .button {
		border-color: #fff !important;
		color: #fff !important;
	}
	
	section.kitchen-table p {
		color: #fff !important;
	}
	
.orange {
	color: #f36f21 !important;
}

.green {
	color: #78b23a;
}

a.green {
	color: #78b23a !important;
}

.line-break {
	display: block;
}

.show-on-scroll {
	display: none;
}

.disclaimer {
	font-size: 0.875em;
	font-style: italic;
}

.payment-errors {
	color: #e03c3c;
	font: normal 1em/1.4em "gibson-s", sans-serif;	
	padding-top: 30px;
}

#customize-order p {
	font-size: .9em;
}

#customize-order .column {
	text-align: center;
}

#customize-order h3 {
	margin-bottom: 20px;
}

.remove, .add, .qnty {
	display: inline-block;
	font: normal 1em 'gibson-s', sans-serif;
	margin: 0 5px;
	vertical-align: middle;
}

.remove, .add {
	background: #D2D2D2;
	border: 1px solid #C2C2C2;
	border-radius: 5px;
	box-shadow: inset 0 -2px 2px rgba(0,0,0,.2), inset 0 2px 2px rgba(255,255,255,.5);
	color: #555;
	cursor: pointer;
	line-height: 30px;
	position: relative;
	text-align: center;
	width: 30px; height: 30px;
}

	.remove:active, .add:active {
		top: 1px;	
	}

@media only screen and (max-width: 40em) {
	.line-break {
		display: inline;
	}
}

.button {
	background: none;
	border: 2px solid #fff;
	color: #fff;
	font: normal 1em/1em "gibson-s", sans-serif;
	letter-spacing: .05em;
	margin: 25px 0px 0px 0px;
	padding: .75em 1.25em .7em 1.25em;
	text-transform: uppercase;
}

	.button.orange:hover, .button.orange:focus {
		background: #f36f21 !important;
		color: #fff !important;
	}
	
	.button.green:hover, .button.green:focus {
		background: #78b23a !important;
		color: #fff !important;
	}
	
/* Typography */

h1 {
	font: normal 3.750em/1em "gibson-l", sans-serif;
}

h2 {
	color: #333;
	font: normal 2.5em/1em "gibson-l", sans-serif;
}

h3 {
	color: #333;
	font: normal 1.5em/1em "gibson-l", sans-serif;
}

	h3 a {
		color: inherit !important;
	}

p {
	color: #333;
	font: normal 1.3em/1.4em "gibson-l", sans-serif;
	margin: 20px 0px;
}

ul {
	list-style: none;
}

	ul li {
		color: #333;
		font: normal 1.3em/1.4em "gibson-l", sans-serif;
	}
	
	ul li:before {
		content: "•";
		font-size: .6em;
		padding-right: 15px;
	}

@media only screen and (max-width: 40em) {
	h1 {
		font-size: 2em;
	}
}

p a {
	color: #333;
	text-decoration: underline;
}

strong {
	font-family: "gibson-s", sans-serif;
	font-weight: normal;
}

.uppercase {
	text-transform: uppercase;
}

.italic {
	font-style: italic !important;
}

.notice {
	font-size: .875em;
	margin: 0px 0px 10px 0px;
}

#customize-order {
	display: none;
}

/* Header */

header {
	padding: 20px 0px;
	position: fixed;
		top: 0px;
		left: 0px;
	width: 100%;
	z-index: 9999;
	
	-webkit-transition: all 200ms ease;
		 -moz-transition: all 200ms ease;
		 	-ms-transition: all 200ms ease;
		 			transition: all 200ms ease;
}

	header .columns {
		display: inline-block;
		float: none !important;
		vertical-align: middle;
	}

	header .logo {
		display: inline-block;
		width: 120px; height: 120px;
		vertical-align: middle;
		
		-webkit-transition: all 200ms ease;
			 -moz-transition: all 200ms ease;
			 	-ms-transition: all 200ms ease;
			 			transition: all 200ms ease;
	}
	
		header .logo svg {
			width: 100%; height: 100%;
		}
		
@media only screen and (max-width: 40em) {
	header .logo {
		width: 100px; height: 100px;
	}
}

	header .hamburger, header .x-out, header .shopping-cart {
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 2em;
	}
	
	header .x-out {
		display: none;
	}
	
	header .shopping-cart {
		margin-right: 10px;
		position: relative;
	}
	
		header .shopping-cart .count {
			color: #f36f21;
			font: normal .4em/1em "gibson-s", sans-serif;
			left: 50%;
			top: 15px;
			position: absolute;
			
			-webkit-transform: translateX(-30%);
				 -moz-transform: translateX(-30%);
				 	-ms-transform: translateX(-30%);
				 			transform: translateX(-30%);
		}
	
#navigation {
	background: rgba(243,111,33,.95);
	display: none;
	position: fixed;
		top: 0px;
		left: 0px;
	width: 100%; height: 100%;
	z-index: 9998;
}

	#navigation nav {
		margin-top: 165px;
	}
	
		#navigation nav a {
			clear: both;
			color: #fff !important;
			display: block;
			float: left;
			font: normal 3.75em/1em "gibson-l", sans-serif;
		}
		
			#navigation nav a .nav-label {
				color: #ffd97f;
				display: block;
				font-family: "gibson-r", sans-serif;
				font-size: .35em;
				line-height: .65em;
				margin-top: 25px;
			}
			
@media only screen and (max-width: 40em) {
	#navigation nav a {
		font-size: 3em;
	}
}

.scrolling-header {
	background: #f36f21;
	padding: 7px 0px;
}

	.scrolling-header .logo {
		width: 50px; height: 50px;
	}
	
	.scrolling-header .hide-on-scroll {
		display: none !important;
	}
	
	.scrolling-header .show-on-scroll {
		display: inline-block !important;
	}
	
.logotype {
	width: 300px; height: auto;
}
	
/* Banner */

.banner {
	background: #ccc;
	
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	background-size: cover !important;
	
	position: relative;
	width: 100%; height: 400px;
}

.cart {
	background: rgba(243,111,33,1);
	height: 160px;
}

.banner-content {
	display: block;
	position: absolute;
		left: 50%;
		top: 50%;
	max-width: 400px; width: 100%;
	z-index: 1000;
	
	-webkit-transform: translate(-50%,-50%);
		 -moz-transform: translate(-50%,-50%);
		 	-ms-transform: translate(-50%,-50%);
		 			transform: translate(-50%,-50%);
}

	.banner-content .button.orange {
		color: #fff !important;
		margin-top: 100px;
	}
	
@media only screen and (max-width: 40em) {
	.banner-content {
		max-width: 200px;
	}
	
		.banner-content .button {
			margin-top: 50px;
		}
}
	

/* Home */

.background-slides, .background-slides .image {
	position: absolute;
		top: 0px;
		left: 0px;
	width: 100%; height: 100%;
}

	.background-slides .image {
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-ms-background-size: cover !important;
		background-size: cover !important;
		
		-webkit-transition: opacity 1000ms ease-in-out;
			 -moz-transition: opacity 1000ms ease-in-out;
			 	-ms-transition: opacity 1000ms ease-in-out;
			 			transition: opacity 1000ms ease-in-out;
	}

.about .columns, .promo .columns {
	display: inline-block;
	float: none !important;
	vertical-align: middle;
}

	.about .location:last-child {
		margin-bottom: 0px;
	}
	
.promo {
	background: url(../images/clean14.png) right center no-repeat #fef7ed !important;
	padding: 175px 0px !important;
	
	-webkit-background-size: contain !important;
		 -moz-background-size: contain !important;
		  -ms-background-size: contain !important;
			    background-size: contain !important;
}

.kitchen-table {
	background: url(../images/clean14.png) right center no-repeat #5c5d60 !important;
	padding: 150px 0px !important;
	
	-webkit-background-size: auto 125% !important;
		 -moz-background-size: auto 125% !important;
		  -ms-background-size: auto 125% !important;
			    background-size: auto 125% !important;
}

@media only screen and (max-width: 40em) {
	.promo {
		background-image: none !important;
	}
	.ad {
		margin-top: 35px;
	}
		
		.ad:first-child {
			margin-top: 0px;
		}
}

.nichols-hills {
	background: url(../images/nichols-hills-banner.jpg) left bottom no-repeat;
	
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	background-size: cover !important;
	
	height: 700px;
}

	.nichols-hills .row, .nichols-hills .columns {
		height: 100%;
		position: relative;
	}

	.nichols-hills .text-box {
		background: rgba(255,255,255,.95);
		padding: 35px;
		position: absolute;	
		top: 50%;
		
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.nichols-hills p {
		color: #333;
	}
	
	.nichols-hills .button {
		border-color: #f36f21;
		color: #f36f21;
		margin-top: 10px;
	}
	
.promos h2 {
	margin: 25px 0px 10px 0px;
}

	.promos p {
		font-size: 1em;
	}
	
/* Menu */
	
.menu p {
	font-size: 1em;
}

	.menu .column {
		margin-top: 50px;
	}

	.menu img {
		margin-bottom: 15px;
	}
	
	.menu .filter {
		font-family: "gibson-s", sans-serif;
		font-size: .9em;
		line-height: 1.75em;
		text-transform: uppercase;
	}
	
		.menu .filter a {
			color: #f36f21 !important;
			display: inline-block;
			margin: 0 10px;
		}
		
@media only screen and (max-width: 40em){
	.menu h2 {
		font-size: 1.5em;
	}
	
	.menu div.orange {
		font-size: .9em;
	}
}
	
/* Locations */
	
.location {
	margin-bottom: 50px;
}

/* Careers */

.jobs-intro {
	padding-bottom: 0px;
}

.jobs {
	padding-top: 0px;
}
	
	.jobs .details {
		color: #555;
		font-family: "gibson-i", sans-serif;
		font-size: 1em;
		margin: auto;
	}
	
	.jobs .column {
		margin-top: 75px;
	}
		
/* Footer */

footer {
	padding: 50px 0px;
}

	footer p {
		font: normal .9em/1em "gibson-l", sans-serif;
		letter-spacing: .025em;
	}
	
		footer p a {
			color: #f36f21;
			font-family: "gibson-s", sans-serif;
		}

	footer .columns {
		display: inline-block;
		float: none !important;
		vertical-align: middle;
	}

	footer .logo {
		display: inline-block;
		width: 100px; height: 100px;
	}
	
	footer .social-media a {
		background: #f36f21;
		color: #fff;
		display: inline-block;
		
		-webkit-border-radius: 300px;
		-moz-border-radius: 300px;
		-ms-border-radius: 300px;
		border-radius: 300px;
		
		line-height: 2em;
		margin-left: 5px;
		text-align: center;	
		width: 32px; height: 32px;
	}
	
		footer .social-media a:first-child {
			margin-left: 0px;
		}
		
/* Cart */

.cart-table {
	font-family: "gibson-r", sans-serif;
	width: 100%;
}

	.cart-table thead td {
		color: #777;
		font-family: "gibson-s", sans-serif;
		font-weight: normal !important;
	}
	
	.cart-table img {
		width: auto; height: 75px;
	}
	
	.cart-table .qty {
		max-width: 75px;
	}
	
	.cart-table h2 {
		margin: 0px;
	}
	
.shopping-cart .button {
	border-color: #f36f21;
	color: #f36f21;
}

.subtotal-and-total {
	margin-top: 25px;
}

.shipping-info p {
	font-family: "gibson-l", sans-serif;
	font-size: 1em;
	margin: 10px 0px 0px 0px;
}

	.shipping-info p a, .shopping-cart p a {
		color: #f36f21;
	}
	
	.shipping-info h3 a {
		color: #f36f21;
	}
	
form label {
	font: normal 1em/1.5em "gibson-l", sans-serif;
}

	form select {
		font-family: "gibson-l", sans-serif;
	}
	
.order-placed p {
	font-family: "gibson-l", sans-serif;
}

.price {
	margin: 10px 0px 0px 0px;
}

.billing-shipping-same {
	color: #f36f21 !important;
	font: normal 1em/1em "gibson-l", sans-serif;
}

/* Clean 14 */

.clean14 .container {
	background: #f36f21;
	margin-top: 20px;
	padding: 20px;
}

	.clean14 .container h3 {
		color: #fff !important;
	}
	
	.clean14 table {
		border: none;
		width: 100%;
	}
	
		.clean14 table tbody {
			background: none;
			border: none;
		}
		
		.clean14 table thead {
			background: none;
			border: none;
		}
		
		.clean14 table th {
			color: #78b23a;
			font: normal 1.3em/1.4em "gibson-s", sans-serif;
		}
		
		.clean14 table td {
			font: normal 1.3em/1.4em "gibson-l", sans-serif;
			padding-top: .2rem;
			padding-bottom: .325rem;
		}
		
		.clean14 table select {
			margin: 5px 0px;
		}
		
		.clean14 table tbody tr:nth-child(even) {
			background-color: #f1eae1;
		}
		
		.clean14 label {
			font: normal 1.3em/1.4em "gibson-l", sans-serif;
		}
		
		.clean14 .order-total {
			border-top: 2px solid #f2f2f2;
			margin-top: 20px !important;
			padding-top: 20px !important;
		}
		
.cleanse-enhancement {
	border-bottom: 2px solid #f2f2f2;
	padding: 20px 0px 10px 0px;
}

	.cleanse-enhancement:last-child {
		border: none;
	}

	.cleanse-enhancement p {
		font-size: 1em;
		margin: 10px 0px 0px 0px;
	}
	
	.cleanse-enchancement h3 {
		font-size: 1.3em;
	}
	
.spacer-title {
	margin-bottom: 25px;
}

.cleanse h2 {
	color: #f36f21;
	margin-top: 20px;
}

/* Fonts */

@font-face {
    font-family: 'gibson-l';
    src: url('fonts/gibson-light/gibson-light-webfont.eot');
    src: url('fonts/gibson-light/gibson-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gibson-light/gibson-light-webfont.woff') format('woff'),
         url('fonts/gibson-light/gibson-light-webfont.ttf') format('truetype'),
         url('fonts/gibson-light/gibson-light-webfont.svg#gibsonlight') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'gibson-r';
    src: url('fonts/gibson-regular/gibson-regular-webfont.eot');
    src: url('fonts/gibson-regular/gibson-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gibson-regular/gibson-regular-webfont.woff') format('woff'),
         url('fonts/gibson-regular/gibson-regular-webfont.ttf') format('truetype'),
         url('fonts/gibson-regular/gibson-regular-webfont.svg#gibsonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'gibson-s';
    src: url('fonts/gibson-semi/gibson-semibold-webfont.eot');
    src: url('fonts/gibson-semi/gibson-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gibson-semi/gibson-semibold-webfont.woff') format('woff'),
         url('fonts/gibson-semi/gibson-semibold-webfont.ttf') format('truetype'),
         url('fonts/gibson-semi/gibson-semibold-webfont.svg#gibsonsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'gibson-i';
	src: url('fonts/gibson-italic/gibson-italic-webfont.eot');
	src: url('fonts/gibson-italic/gibson-italic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/gibson-italic/gibson-italic-webfont.woff') format('woff'),
	     url('fonts/gibson-italic/gibson-italic-webfont.ttf') format('truetype'),
	     url('fonts/gibson-italic/gibson-italic-webfont.svg#gibson_lightbold') format('svg');
	font-weight: normal;
	font-style: normal;
}