/*
Theme Name: Finesse
Theme URI: http://afg1.com
Author: Craig Bauer of AFG
Author URI: http://afg1.com
Description: Custom WP theme for Finesse.
Version: 1.0

Tags: Light Theme, Portfolio

*/
@-ms-viewport {
  width: device-width;
}
/*ie <8 fix*/
a, a img{
border:none;
}
.center {
	text-align: center;
}
img {border: none;}

* {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	padding: 0; 
	margin: 0;
}
input, textarea {
	background-color: #eee; 
	color: #000; 
	padding: 5px; 
	font-size: 18px; 
	letter-spacing: .07em; 
	border: 0;
}

body {
	background-color: #fff;
	color: #000;
	overflow-x: hidden;
}
strong {
	font-weight: 800;
}
h1 {
	font-size: 2.4em;
    line-height: 1em;
    margin-bottom: 15px;
}
p {
	font-size: .75em;
}
header, footer {
	background: #fff;
}
header {
	color: #000;
	border-bottom: solid #ddd 1px;
	box-shadow: 0px 1px 5px #eee;
}
#header {
	max-width: 960px;
	margin: 0 auto;
}

.theLogo {
	padding: 15px 0 5px 16px;
}

/* Banners */
.bannerBkg {
	background-image: url(images/bkgSwatch.jpg);
	background-repeat: repeat-x;
}
.shelfBkg {
	background-image: url(images/bottomShelf.png);
	background-repeat: repeat-x;
	background-position: bottom center;
}
.homeBanner {
	background-image: url(images/home_dt_banner.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 500px;
}
.activeP {
	display: block;
	margin-left: -80px;
	height: 200px;
}
.activePM {
	display: none;
	width: 100%;
}
.homeText {
	width: 48%; 
	position: absolute; 
	top: 24px; 
	right: 15px; 
	font-size: .75em; 
	
}
.homeText p {
	font-size: 1em;
	line-height: 21px;
	font-weight: 400;
}
.mobile_home_banner {
	display: none;
}
#navigation {
	position: relative;
}
#nav {
	float: right;
	max-width: 960px;
	margin: 0 auto;
	text-align: left;
	padding: 29px 25px 0 0;
}
#nav ul {
	list-style: none; 
}

#nav ul li {
	display: inline-block;
	margin: 0 0 0 34px;
	padding: 0;
	text-decoration: none;
	vertical-align: middle;
  	line-height: .9em;
  	text-align: center;
}

#nav ul li a, footer a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: .8em;
	color: gray;
	margin-bottom: 15px;
	line-height: .8em;
	text-align: center;
  	text-decoration: none;
  	text-transform: uppercase;
}
#nav ul li a:hover, footer a:hover {
	color: #2a69cd;
       
}
#menu-item-227-en {
    color: #2a69cd;
}
.footer ul li a {

}
.mobileMenu {
	text-align: center;
}
ul#menu-mobile-menu-english, ul#menu-menu-mobile-spanish{
	margin-top: 127px;
}

ul#menu-mobile-menu-english li, ul#menu-menu-mobile-spanish li {
	list-style: none;
	border-top: 1px #adc3e6 solid;
	padding: 24px 0;
}
ul#menu-mobile-menu-english li:last-child, ul#menu-menu-mobile-spanish li:last-child {
	border-bottom: 1px #adc3e6 solid;
}
ul#menu-mobile-menu-english li a, ul#menu-menu-mobile-spanish li a {
	text-decoration: none;
	color: gray;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 300;
}
#content {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 30px;
}

/* Contact Page */
.contactPage {
	padding-top: 30px !important;
	text-align: center;
}
.contactPage h1 {
	font-size: 1.5em;
	text-transform: uppercase;
	color: #2a69cd;
}
.contactPage p {

}
.contactClass {
	background: url(images/contactBkg.jpg);
	background-repeat: repeat-x;
	background-position: center -55px
}
/* Forms */
.ninja-forms-required-items { 
	display: none;
}
.ninja-forms-all-fields-wrap input, .textarea-wrap textarea {
	background: #fff;
	border: 1px #eee solid;
	color: #bbb;
	padding: 5px;
}
#nf_submit_1 {
	text-align: right;
}
.sendBtn {
	color: #2a69cd !important;
  	border: #2a69cd 1px solid !important;
  	padding: 5px 40px !important;
}

.ninja-forms-field-error, .ninja-forms-response-msg, .ninja-forms-error-msg {
	color: #2a69cd !important;
}
.formWrap {
	padding: 30px; 
	width: 500px; 
	float: right;
}
.contactInfoWrap {
	padding: 30px; 
	width: 290px; 
	float: left; 
	text-align: right; 
	font-size: 1.3em; 
	font-weight: 300; 
	line-height: 1.2em;
}
.contactInfoWrap a {
	color: #2a69cd;
	text-decoration: none;
}
.inner {
	position: relative;
	max-width: 930px;
	margin: 0 auto;
	padding: 0 15px;
	color: #000;
}
.moreInfo {
	position: absolute;
	bottom: 7px;
	left: 50%;
	margin-left: -13.5px;
	border-radius: 50%;
}
footer {
	color: #000;
	border-top: solid #ddd 1px;
	clear: both;
}
.footer {
	max-width: 960px;
	margin: 0 auto;
	text-align: right;
	padding: 15px;
}
.footer span {
	color: #595959;
	font-size: .65em;
	padding: 0 6px;
	display: inline-block;
	margin-top: 15px;
}
#menu-icon {
	display: none;
	position: absolute;
	top: 18px;
	right: 35px;
	z-index: 9999;
}
#menu-icon img {
	width: 45px;
}
#menu-mobile-menu {
	display: none;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.footerBr {
	display: none;
}
.categoryTitle {
	text-align: left; 
	padding: 10px 0 30px 0; 
	color: #fff; 
	text-transform: uppercase; 
	font-size: .9em; 
	font-weight: 100;
}

/* Animated Grid */
.cell {
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	background-color: #fff;
	/*background-color: #2a69cd;*/
}
.mobileMenuWraper {
	display: none;
	position: fixed;
	height: 100%;
	width: 70%;
	top: 0;
	right: -82%;
	background: #fff;
	z-index: 999;
	box-shadow: -3px 1px 12px #333;
	overflow-y: auto;
}
.free-wall {
	margin: 15px 0 30px 0;
}
.product {
	width: 20%; 
	display: inline-block;  
	margin: -5px;
}
.innerProduct {
	width: 80%; 
	height: 100%; 
	margin: 0 auto; 
	position: relative;
}
.productDesc {
	min-height: 140px;
	
}
.productDesc p {
	font-size: 1em;
}
.shampooOutter, .conditionerOutter {
	background: url(images/proteinDescBkg.png);
	background-position: top center;
	background-repeat: repeat-x;
}
#shampooLoader, #conditionerLoader {
	padding: 15px 0;
}
.fadeBkg {
	/*faded bkg*/
	background: url(images/proteinDescBkgFade.jpg);
	background-position: top center;
	background-repeat: repeat-x;
}
.nofadeBkg {
	background: url(images/proteinDescBkg.png);
	background-position: top center;
	background-repeat: repeat-x;
}

#widthChecker {
	position: absolute;
}
.theBanner {
	text-align: center;
}
.next, .prev {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	height: 100px;
}
.prev {
	left: -15px;
}
.next {
	right: -15px;
}
.topprev {
	display: none;
}
.bottomprev {
	display: none;
}

/********* Under 960px *****************/
@media screen and (max-width: 959px) {

	#home_content {
		max-width: 640px;
		margin: 0 auto;
	}


	.homeBanner {
		background-repeat: no-repeat;
		background-position: -60px 0;
	}

	.contactInfoWrap {
		padding: 30px; 
		width: initial; 
		float: none; 
		text-align: center; 
	}
	.formWrap {
		padding: 0 30px; 
		width: initial; 
		float: none;
	}

}
/********* Under 850px *****************/
@media screen and (max-width: 850px) {
	.homeBanner {
		background: none;
		height: auto;
	}
	.mobile_home_banner {
		display: block;
	}
	.homeText {
		top: 18px; 
	}
}
/********* Under 800px *****************/
@media screen and (max-width: 800px) {
	#widthChecker {
		position: relative;
	}
	header {
		position: relative;
		box-shadow: 0px 2px 8px #888;
	}
	.activeP {
		display: none;
		margin-left: 0;
		height: auto;
	}
	.homeText {
		width: 100%; 
		position: relative; 
		top: initial; 
		right: initial;
		margin: 15px 0; 	
	}
	.activePM {
		display: block;
	}
	.divider {
		display: none!important;
	}
	.footer span:first-child {
		padding: 0;
	}
	.shelfBkg {
		background-image: none;
	}
	.productDesc {
		min-height: 90px;
	}

	.shampooOutter, .conditionerOutter, .fadeBkg, .nofadeBkg {
		background-size: cover;
	}

}
/********* Under 660px *****************/
@media screen and (max-width: 760px) {
	header {
		position: relative;
	}
	#nav { /* Desktop Nav */
		display: none;
	}
	#nav-wrap { /* Wraps mobile nav and icon */
		display: block;
	}
	#menu-icon, .mobileMenuWraper {
		display: block;
	}
	#menu-mobile-menu { /* Mobile nav */
		display: block; /*Change to none*/
	}
	.footerBr {
		display: block;
	}

}

@media screen and (max-width: 600px) {
	/*.productDesc {
		min-height: 100px;
	    height: auto;
	}*/

}
@media screen and (max-width: 560px) {


}


/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.3.1 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
@media all {
	.featherlight {
		display: none;

		/* dimensions: spanning the background from edge to edge */
		position:fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2147483647; /* z-index needs to be >= elements on the site. */

		/* position: centering content */
		text-align: center;

		/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
		white-space: nowrap;

		/* styling */
		cursor: pointer;
		background: #333;
		/* IE8 "hack" for nested featherlights */
		background: rgba(0, 0, 0, 0);
	}

	/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
	.featherlight:last-of-type {
		background: rgba(255, 255, 255, 0.8);
	}

	.featherlight:before {
		/* position: trick to center content vertically */
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -0.25em;
	}

	.featherlight .featherlight-content {
		/* make content container for positioned elements (close button) */
		position: relative;

		/* position: centering vertical and horizontal */
		text-align: left;
		vertical-align: middle;
		display: inline-block;

		/* dimensions: cut off images */
		/*overflow: auto;*/
		/*padding: 25px 25px 0;
		border-bottom: 25px solid transparent;*/
		padding: 0;
		border-bottom: 0;

		/* dimensions: handling small or empty content */
		/*min-width:  30%;*/

		/* dimensions: handling large content */
		margin-left: 5%;
		margin-right: 5%;
		max-height: 95%;

		/* styling */
		/*background: #fff;*/
		background: #2a69cd;
		cursor: auto;

		/* reset white-space wrapping */
		white-space: normal;
	}

	/* contains the content */
	.featherlight .featherlight-inner {
		/* make sure its visible */
		display: block;
	}

	.featherlight .featherlight-close-icon {
		/* position: centering vertical and horizontal */
		position: absolute;
		z-index: 9999;
		top: 0;
		right: 0;

		/* dimensions: 25px x 25px */
		line-height: 25px;
		width: 25px;

		/* styling */
		cursor: pointer;
		text-align: center;
		font: Arial, sans-serif;
		background: #fff; /* Set the background in case it overlaps the content */
		background: rgba(255, 255, 255, 0.3);
		color: #000;
	}


	.featherlight .featherlight-image {
		/* styling */
		width: 100%;
	}


	.featherlight-iframe .featherlight-content {
		/* removed the border for image croping since iframe is edge to edge */
		border-bottom: 0;
		padding: 0;
	}

	.featherlight iframe {
		/* styling */
		border: none;
	}
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
	.featherlight .featherlight-content {
		/* dimensions: maximize lightbox with for small screens */
		margin-left: 10px;
		margin-right: 10px;
		max-height: 98%;

		/*padding: 10px 10px 0;
		border-bottom: 10px solid transparent;*/
		padding: 0;
		border-bottom: 0;
	}
}