/**********************************************************************************************************************
 * OVERRIDE sliding-menu.css
 *********************************************************************************************************************/

.sliding-menu {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,.5);
	height: auto;
	font-size: 12px;
}
.sliding-menu ul {
	padding-left: 0;
	margin-left: 0;
	padding-bottom: 30px;
}
.sliding-menu li a,
.sliding-menu li .sliding-menu__nav {
	font-size: 16px;
	line-height: 1.2;
	font-family: Verdana,sans-serif;
}
.sliding-menu .sliding-menu__icon {
	padding: 0 7px 0 7px !important;
	color: #fff !important;
	margin: -7px 5px -7px -7px !important;
	font-size: 22px;
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	border-radius: 3px;
	background-color: red;
	border: 1px solid red;
}
.sliding-menu li .sliding-menu__back {
	color: #fff;
	background: #555;
	font-weight: normal;
}

/**********************************************************************************************************************
 * global.css
 *********************************************************************************************************************/

body, div, table, td, input, select, textarea {
	font-size: 12px;
	font-style: normal;
}
html, body {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 !important;
	min-width: 320px;
}
body {
	font-family: Verdana,sans-serif;
	margin: 0 0 0;
	background-color: #fff;
	color: #000;
}
a {
	color: #000;
	text-decoration: none;
}
a[href]:focus,
a[href]:hover {
	text-decoration: underline;
}
.bccColorLinks a[href],
a[href].bccColorLink {
	color: #2C817F;
}
.DoE /* Desktop-only Element */,
.DoI /* Desktop-only Image */{
	display: none !important;
}
p {
	line-height: 1.5;
}
img.pw2-image,
.productImage img {
	pointer-events: none;
	user-select: none;
}
.overlord {
	/* This was to override desktop layout
	margin: 0 0 0 0 !important;
	width: 100%;
	border: none;
	*/
	max-width: 1300px;
	position: relative;
	margin: 0 auto;
}
.clear {
	clear: both;
}

/* ADA Accessibility Toggle */
#ada-toggle-btn {
	display: none;
}
.hidden-ada-toggle {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* --------------------------------------------------------------------------------------------------------------------
 * Persistent Buttons & Form Fields
 * ----------------------------------------------------------------------------------------------------------------- */
.bccButton {
	-webkit-appearance: none;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	padding: 10px 15px;
	background-color: #757575;
	border: 2px solid #fff;
	color: #fff !important;
	font-size: 16px;
	transition: ease all .10s;
	border-radius: 6px;
	text-decoration: none  !important;
	cursor: pointer;
}
.bccButton:focus,
.bccButton:hover {
	background-color: #fff;
	border-color: #757575;
	color: #757575 !important;
	text-decoration: none !important;
	text-shadow: none;
}
.bccButton i {
	font-style: normal;
}
.bccButtonSize {
	box-sizing: border-box !important;
	padding: 10px 15px !important;
	border-width: 2px !important;
	font-size: 16px !important;
}
/* Button Colors */
.bccButtonGreen {
	background-color: #333 !important;
}
.bccButtonGreen:focus,
.bccButtonGreen:hover {
	background-color: #fff !important;
	border-color: #333 !important;
	color: #333 !important;
}
.bccButtonBlue {
	background-color: #333 !important;
}
.bccButtonBlue:focus,
.bccButtonBlue:hover {
	background-color: #fff !important;
	border-color: #333 !important;
	color: #333  !important;
}
.bccButtonGray {
	background-color: #757575 !important;
}
.bccButtonGray:focus,
.bccButtonGray:hover {
	background-color: #fff !important;
	border-color: #757575 !important;
	color: #757575 !important;
}
.bccButtonRed {
	background-color: #bc1e16 ;
	border-color: #bc1e16 ;
}
.bccButtonRed:focus,
.bccButtonRed:hover {
	background-color: #fff !important;
	border-color: #bc1e16  !important;
	color: #bc1e16 !important;
}
.bccButton:disabled,
.bccButton.bccButtonGreen:disabled,
.bccButton.bccButtonGreen:focus:disabled,
.bccButton.bccButtonGreen:hover:disabled{
	background-color: #ddd !important;
	color: #5E5E5E !important;
	cursor: not-allowed;
	text-shadow: none;
}
.bccButton:focus:disabled,
.bccButton:hover:disabled {
	border-color: #ddd !important;
}
/* Form Inputs */
.bccInput,
.bccInputSize {
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 10px;
	border-width: 1px;
	font-size: 12px;
	font-family: Verdana, sans-serif;
}
.bccInput {
	border-style: solid;
	border-color: #a4d7d6;
}
.bccInput:focus {
	border-color: #00F;
	outline: 2px solid #a4d7d6;
	outline-offset: 1px;
}
.bccInput:disabled {
	border-color: #abadb3;
	color: #abadb3;
	background-color: #eee;
}
.bccInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #7E7E7E;
	font-style: italic;
	opacity: 1;
}
.bccInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #7E7E7E;
	font-style: italic;
}
.bccInput::-ms-input-placeholder { /* Microsoft Edge */
	color: #7E7E7E;
	font-style: italic;
}
select.bccInput::-ms-expand {
	display: none;
}
select.bccInput {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 1.5em;
	background-image: url("data:image/svg+xml,%3Csvg width='292.4' height='292.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath id='svg_1' d='m287,69.4a17.6,17.6 0 0 0 -13,-5.4l-255.6,0c-5,0 -9.3,1.8 -12.9,5.4a17.6,17.6 0 0 0 -5.5,12.8c0,5 1.8,9.3 5.4,12.9l128,127.9c3.6,3.6 7.8,5.4 12.8,5.4s9.2,-1.8 12.8,-5.4l128,-128c3.5,-3.5 5.4,-7.8 5.4,-12.8c0,-5 -1.9,-9.2 -5.5,-12.8l0.1,0z' opacity='undefined' fill='%23b2b2b2'/%3E%3C/g%3E%3C/svg%3E");
	linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

/* Email Validation */
input[type="email"].working {
	background: #FFF url("/images/ajax-loading-indicator.gif") no-repeat right 4px center;
}
input[type="email"].valid {
	background: #FFF url("/images/icons/success.png") no-repeat right center;
}
input[type="email"].invalid {
	background: #FFF url("/images/icons/warning.png") no-repeat right center;
}
.email-validation-alert-area {
	display: block;
	padding: 0.25em 0;
}
.email-validation-alert-area:empty {
	display: none;
}
.email-validation-alert-area .suggestion {
	text-decoration: underline;
	color: #2C817F;
	cursor: pointer
}

/* --------------------------------------------------------------------------------------------------------------------
 * Status Message Boxes
 * ----------------------------------------------------------------------------------------------------------------- */
.msg-box {
	border: 1px solid;
	border-radius: 6px;
	margin: 10px 0;
	padding:15px 10px;
	background-repeat: no-repeat;
	background-position: 10px center;
	text-align: left;
}
.msg-box.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('/style/icons/info.png');
	padding-left: 50px;
}
.msg-box.success {
	color: #4F8A10;
	background-color: #dff2bf;
	background-image:url('/style/icons/success.png');
	padding-left: 50px;
}
.msg-box.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('/style/icons/warning.png');
	padding-left: 50px;
}
.msg-box.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('/style/icons/error.png');
	padding-left: 50px;
}
.msg-box.x {
	position: relative;
}
.msg-box.x > .x {
	position: absolute;
	font-style: normal;
	top: 0;
	right: 4px;
	cursor: pointer;
}
/* Make nested message boxes look a little nicer by removing the icon and softening the border */
.msg-box .msg-box.info,
.msg-box .msg-box.success,
.msg-box .msg-box.warning,
.msg-box .msg-box.error {
	padding-left: 15px;
	background-image: none;
	border-style: dotted;
}

/* --------------------------------------------------------------------------------------------------------------------
 * HEADER (MOBILE/DEFAULT)
 * ----------------------------------------------------------------------------------------------------------------- */
#page-header {
	margin-top: 103px;
}
#sw-desktop-bar {
	display: none;
}
.sw-link {
	position: relative;
	/*display: inline-block;*/
	display: block; /* inline-block causes bottom spacing for descender characters */
	width: 100%;
	top: 90px; /* To show under header#page-header */
	/*max-height: 35px;*/
	overflow: hidden;
}
.sw-link-sections {
	display: block;
	background: #EEE;
	width: 100%;
	height: 35px;
}
.sw-link-sections::after {
	content: "flickity";
	display: none;
}
.sw-link-sections a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
@media only screen and (max-width: 480px) {
	.sw-link {
		/*height: 35px; /* Banner is set to switch to the -m version at 480px */
		margin: 0;
		padding: 0;
	}
}
.sw-img {
	width: 100%;
	max-width: 1300px;
	text-align: center;
	/*display: inline-block;*/
	display: block; /* inline-block causes bottom spacing for descender characters */
}
a#skip-to-main {
	left: -999px;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
}
#header4 {
	display: none;
}
#mobile-header {
	display: block;
	height: 60px; /* @NOTE: 90px inline, probably because top banner bar was added? */
	width: 100%;
	min-width: 320px;
	background-size: 1px 46px;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2; /* Must be greater than SearchSpring rating stars which is currently z-index: 1 */
	text-align: center;
	background: rgba(255,255,255,1);
}
.mobile-free-shipping {
	width: 100%;
	background: #9fc18c;
	color: #000;
	padding-top: 2px;
	height: 22px;
	line-height: 22px;
	font-style: italic;
	text-align: center;
}
#mobile-burger-button {
	display: none;
	transition: all 0.25s ease;
}
#mobile-burger-button + label {
	position: fixed;
	text-align: left;
	width: auto;
	height: auto;
	top: 23px;
	left: 20px;
}
#mobile-header .burger-button {
	float: left;
	padding: 0 5px 5px 5px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
	top: 50px;
}
#mobile-header i {
	margin: 0 0 0 5px;
	color: #666465;
	cursor: pointer;
	position: relative;
}
#mobile-header i span {
	font-size: 8px;
	position: absolute;
	left: -65%;
	bottom: -12px;
	width: 230%;
	text-align: center;
	display: block;
	overflow: hidden;
	font-family: Open Sans,sans-serif;
	letter-spacing: 1px;
}
#mobile-call-button {
	position: fixed;
	top: 30px;
	left: 58px;
	float: left;
	padding: 20px 10px 10px 10px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
}
#mobile-logo {
	width: 160px;
	height: auto;
	margin: 16px auto 0 auto;
	z-index: 999999;
	display: block;
	position: relative;
}
#mobile-burger-menu {
	position: fixed;
	top: 90px;
	left: -250px;
	display: block;
	width: 250px;
	margin: 0 auto 0 auto;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	overflow: hidden;
	background: #fff;
	z-index: 999;
	-webkit-overflow-scrolling: touch;
	transition: all 0.25s ease;
}
@media only screen and (max-width: 480px) {
	#mobile-burger-menu {
		height: 0;
	}
}
#mobile-burger-menu .mobile-menu-list {
	padding: 0 !important;
}
#mobile-burger-button:checked + label {
	display: block;
	width: 120%;
	height: 100%;
	text-align: left;
	position: fixed;
	background: rgba(255,255,255,0.75);
	left: 0;
	padding-left: 25px;
}
#mobile-burger-button:checked ~ #mobile-burger-menu {
	width: 250px;
	transition: all .25s;
	overflow: scroll;
	max-height: 70vh;
	height: auto;
	left: 0;
}
#mobile-header .shopping-bag {
	/*position: fixed;*/
	position: absolute;
	top: 30px;
	right: 10px;
	padding: 20px 10px 10px 10px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
}
.headerCartTotal {
	display: block;
	position: absolute;
	background: #388627;
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 18px;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 0 0 0;
	top: 12px;
	right: -2px;
}
.headerCartTotal:empty {
	display: none;
}
#mobile-header .user-button {
	/*position: fixed;*/
	position: absolute;
	top: 30px;
	right: 57px;
	padding: 20px 10px 10px 10px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
}
#accountmenu {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	z-index: 2147483647;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 90px;
	right: 0;
	background: rgba(255,255,255,.8);
	transition: all 0.25s ease;
}
#accountmenu:target {
	opacity: 1;
	pointer-events: initial;
}
.accountmenuclose {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}
.accountmenuitems {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	text-align: left;
	position: absolute;
	top: 0;
	right: -200px;
	background: #fff;
	transition: all 0.25s ease;
}

#accountmenu:target .accountmenuitems{
	right: 0;
}

.accountmenuitems a {
	display: block;
	text-align: left;
	font-size: 16px;
	padding: .8em 1em;
}
.mobileHeaderTagLine {
	width: 100%;
	height: 25px;
	line-height: 25px;
	background: #a4d7d6;
	text-align: center;
}
.mobileHeaderSearch {
	display: block;
	background: #b8e1e0;
	border-bottom: #dedede;
	/*height: 43px;*/
	height: 48px;
	width: 100%;
	margin-bottom: 5px;
}
.mobileHeaderSearch input[name="w"] {
	display: inline-block;
	border: 1px solid #ccc;
	width: calc(80% - 100px);
	margin: 5px 10% 5px 10%;
	padding: 0 50px 0 50px !important;
	font-size: 20px;
	text-align: center;
	height: 36px;
	font-family: Open Sans,sans-serif;
	border-radius: 25px;
}
form[ss-nav] {
	position: relative;	/* So the SearchSpring search suggestion popup will be relative to the form instead of whatever the other closest non-static positioned element happens to be */
}
/* SearchSpring's lz9t9t.css sets top: 35px when screen max-width: 979 but that will overlap the search bar */
.ss-targeted[ss-autocomplete] {
	top: 55px !important;
}

/* Holiday Special Styling */
@keyframes stocking {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		/* 0 0 */
	}
	40% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		/* 0 0 */
	}
	45% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		/* -2 -1 */
	}
	50% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		/* +2 +1 */
	}
	55% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		/* 0 0 */
	}
	60% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		/* -2 -1 */
	}
	65% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		/* +2 +1 */
	}
	70% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		/* 0 0 */
	}
	100% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		/* 0 0 */
	}
}
.add-small-stocking {
	position: relative;
}
.add-small-stocking::before {
	content: "";
	width: 19px;
	height: 33px;
	top: 9px;
	right: -3px;
	background: url("/images/snowflake-25x25.png") no-repeat right center;
	background-size: contain;
	border: none;
	z-index: 1;
	display: block;
	position: absolute;
	animation-name: stocking;
	-webkit-animation-name: stocking;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}
.add-small-snowflake {
	position: relative;
}
.add-small-snowflake::before {
	content: "";
	width: 25px;
	height: 44px;
	top: -7px;
	right: -20px;
	background: url("/images/snowflake-25x25.png") no-repeat right center;
	background-size: contain;
	border: none;
	z-index: 1;
	display: block;
	position: absolute;
	animation-name: stocking;
	-webkit-animation-name: stocking;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	filter: drop-shadow(0px 0px 3px #FFF);
}
#mobile-header .add-small-snowflake::before {
	top: 9px;
	right: -12px;
}
#mobile-burger-menu .add-small-snowflake::before {
	display: inline-block;
	position: relative;
	top: 6px;
	left: 0;
	right: auto;
	margin-right: .25em;
}

.mobileHeaderSearchButton {
	background: none;
	border: none;
	font-size: 18px;
	position: absolute;
	right: 11.5%;
	top: 12px;
	color: #757575;
	border-radius: 25px;
	height: 21px;
	width: 32px;
	text-align: center;

}

#quickLinks {
	padding: 10px 10px 10px 10px;
	overflow-x: auto;
	white-space: nowrap;
}

#quickLinks a {
	font-size: 16px;
	padding: 6px 12px;
	display: inline-block;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fff;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.05); 
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.05);
}

/* --------------------------------------------------------------------------------------------------------------------
 * FOOTER (MOBILE/DEFAULT)
 * ----------------------------------------------------------------------------------------------------------------- */
/*
#page-footer {
	clear: both;
}
#footer3 {
	background: #e5e5e5;
	width: 100%;
	display: inline-block;
	clear: both;
	padding: 0 0 90px 0;
	border-top: 2px solid #a4d7d6;
}
.f3-beautybucks {
	font-family: Open Sans, sans-serif;
	text-align: center;
	width: 100%;
	padding: 18px 0;
	font-size: 22px;
}
.f3-beautybucks div {
	position: relative;
	width: 80%;
	margin: 10px 10% 0 10%;
	background-color: #fff;
	border: 2px solid #9ec18b;
	border-radius: 12px;
	color: #9ec18b;
	font-size: 16px;
	line-height: 0;
	height: 100%;
	overflow: hidden;
}
.f3-beautybucks div input {
	border: none;
	background: none;
	width: 100%;
	padding: 8px 10px;
	font-size: 16px;
	text-align: left;
}
.f3-beautybucks div button {
	background: none;
	border: none;
	display: inline-block;
	position: absolute;
	top: 0;
	right: -5px;
	-webkit-appearance: none;
	color: #fff;
	font-size: 32px;
	margin: 0;
	padding: 0 10px;
	background: #9ec18b;
	height: 100%;
}
.f3-collapsible {
	background-color: #e5e5e5;
	color: #444;
	cursor: pointer;
	padding: 18px 0;
	margin: 0 5%;
	width: 90%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	font-family: Open Sans, sans-serif;
	border-top: 1px solid #cecece;
}
.f3-collapsible::after {
	content: '+';
	font-size: 13px;
	color: #929292;
	float: right;
	margin-left: 5px;
	font-family: Open Sans, sans-serif;
	font-weight: bold;
}
.f3-content {
	padding: 0 18px;
	background-color: #e5e5e5;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.f3-content a {
	display: block;
	font-family: Open Sans, sans-serif;
	width: 90%;
	margin: 0 5%;
	padding: 12px 0;
	font-size: 14px;
}
.f3-content a:first-of-type {
	padding: 0 0 12px 0;
}
.f3-social {
	width: 90%;
	margin: 0 5%;
	padding: 16px 0;
	border-top: 1px solid #cecece;
	text-align: center;
	font-family: Open Sans, sans-serif;
	color: #444;
	font-size: 14px;
}
.f3-social a {
	font-size: 38px;
	padding: 0 10px;
	color: #444;
}
.f3-call {
	width: 90%;
	margin: 0 5%;
	padding: 16px 0;
	border-top: 1px solid #cecece;
	text-align: center;
	font-family: Open Sans, sans-serif;
	color: #444;
	font-size: 16px;
}
.f3-call a {
	display: block;
	font-size: 32px;
}
*/
#myBtn {
	display: none;
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 99;
	font-size: 14px;
	border: none;
	outline: none;
	background-color: #333;
	color: #fff;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
	font-weight: 700;
	opacity: 1;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	border: 2px solid #fff;
	transition: all .25s ease;
}

#page-footer {
	clear: both;
}
#page-footer .footer-inner {
	display: flex;
	flex-direction: column;
}
#page-footer form.beauty-bucks {
	order: 1;
}
#page-footer .section-block.account {
	order: 2;
}
#page-footer .section-block.customer-service {
	order: 3;
}
#page-footer .section-block.company {
	order: 4;
}
#page-footer .section-block.social {
	order: 5;
}
#page-footer .section-block.call {
	order: 6;
}

#page-footer .footer-outer {
	background: #e5e5e5;
	/*width: 100%;*/
	/*display: inline-block;*/
	clear: both;
	padding: 0 0 90px 0;
	border-top: 2px solid #a4d7d6;
}
#page-footer form.beauty-bucks {
	font-family: Open Sans, sans-serif;
	text-align: center;
	width: 100%;
	padding: 18px 0;
	font-size: 22px;
}
#page-footer form.beauty-bucks div {
	position: relative;
	width: 80%;
	margin: 10px 10% 0 10%;
	background-color: #fff;
	border: 2px solid #9ec18b;
	border-radius: 12px;
	color: #9ec18b;
	font-size: 16px;
	line-height: 0;
	height: 100%;
	overflow: hidden;
}
#page-footer form.beauty-bucks div input {
	border: none;
	background: none;
	width: 100%;
	padding: 8px 10px;
	font-size: 16px;
	text-align: left;
}
#page-footer form.beauty-bucks div button {
	background: none;
	border: none;
	display: inline-block;
	position: absolute;
	top: 0;
	right: -5px;
	-webkit-appearance: none;
	color: #fff;
	font-size: 32px;
	margin: 0;
	padding: 0 10px;
	background: #9ec18b;
	height: 100%;
}
#page-footer .section-header {
	display: block;
	color: #444;
	cursor: pointer;
	padding: 18px 0;
	margin: 0 5%;
	width: 90%;
	/*border: none;*/
	/*text-align: left;*/
	/*outline: none;*/
	font-size: 16px;
	font-family: Open Sans, sans-serif;
	border-top: 1px solid #cecece;
	text-decoration: none;
}
#page-footer .section-header::after {
	content: '+';
	font-size: 13px;
	color: #929292;
	float: right;
	margin-left: 5px;
	font-family: Open Sans, sans-serif;
	font-weight: bold;
}
#page-footer .section-block.active .section-header::after {
	content: '-';
}
#page-footer ul.section-nav {
	list-style: none;
/*	margin: 0;
	padding: 0 18px;*/
	margin: 0 18px;
	padding: 0;
	/*display: none;*/
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
#page-footer .section-block.active ul.section-nav {
	max-height: 400px;
}
#page-footer ul.section-nav li {
	display: block;
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	margin: 0 5%;
	padding: 12px 0;
	width: 90%;
}
#page-footer ul.section-nav li:first-of-type {
	padding-top: 0;
}
#page-footer .section-block.social {
	/*border-top: 1px solid #cecece;*/
	color: #444;
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	text-align: center;
}
#page-footer .section-block.social .section-header {
	display: none; /* Only display for Desktop */
}
#page-footer .section-block.social .section-nav {
	border-top: 1px solid #cecece;  /* To match #page-footer .section-header */
	display: flex; /* To undo whatever hiding effect is being used */
	height: auto; /* To undo whatever hiding effect is being used */
	justify-content: center;
	margin: 0 5%; /* To match #page-footer .section-header */
	max-height: none; /* To undo whatever hiding effect is being used */
	padding: 16px 0;
}
#page-footer .section-block.social li {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0;
}
#page-footer .section-block.social a {
	font-size: 38px;
	padding: 0 10px;
	color: #444;
}
#page-footer .section-block.social span {
	display: none; /* Only display for Desktop */
}
#page-footer .section-block.subscribe {
	display: none; /* Only display for Desktop */
}
#page-footer .section-block.call {
	width: 90%;
	margin: 0 5%;
	padding: 16px 0;
	border-top: 1px solid #cecece;
	text-align: center;
	font-family: Open Sans, sans-serif;
	color: #444;
	font-size: 16px;
}
#page-footer .section-block.call a {
	 display: block;
	 font-size: 32px;
 }
.trust-footer {
	display: none; /* Only display for Desktop */
}
.grecaptcha-badge {
	visibility: hidden;
}
#recaptcha-branding {
	text-align: center;
	margin: .5em auto;
	font-size: smaller;
}

/* --------------------------------------------------------------------------------------------------------------------
 * BREADCRUMBS (MOBILE/DEFAULT)
 * ----------------------------------------------------------------------------------------------------------------- */
ol.breadcrumb,
.bread-shipping > .shipping > * {
	margin: 0;
	padding: 3px 0;
	list-style-type: none;
	color: #000;
	font-family: ABeeZee,sans-serif;
	font-size: 15px;
}
/* Direct child of <main>, not inside in a legacy breadcrumb container */
main#page-main > ol.breadcrumb,
main#page-main > nav > ol.breadcrumb {
	clear: both;
	margin: 10px 5px;
}
ol.breadcrumb li {
	/*display: inline-block; /* This causes odd wrapping on mobile for long product names */
	display: inline;
}
ol.breadcrumb li+li:before {
	content: " > ";
}
ol.breadcrumb .mobile {
	display: none;
}
.breadcrumb-area,	/* Account Pages */
.bread-shipping {	/* Blog */
	clear: both;
	padding: 0 !important;
	margin: 10px 5px;
}
.bread-shipping {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bread-shipping > div {	/* Blog */
	margin-left: 0 !important;
}
.bread-shipping > .shipping {
	text-align: right;
}
@media only screen and (max-width: 480px) {
	ol.breadcrumb .mobile { /* Breadcrumb Homepage Short Name: "Home" */
		display: inline;
	}
	ol.breadcrumb .desktop { /* Breadcrumb Homepage Long Name: "Beauty Care Choices" */
		display: none;
	}
}
#product-page ol.breadcrumb li:last-of-type {
	display: none; /* Don't display the last breadcrumb because it's just for the current page and we're short on space */
}

/* --------------------------------------------------------------------------------------------------------------------
 * Category Pages Filter Bar & Menu (Mobile/Default)
 * ----------------------------------------------------------------------------------------------------------------- */
body#clean-salon-shopby-page #myBtn, /* Move it up so it's above the fixed bottom "Show Select Choices" menu button */
body.category-page #myBtn { /* Move it up so it's above the fixed bottom search/archive menu */
	bottom: 56px;
}
/*#profile-body #sidebar-wrapper,*/
.bo17-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1; /* One more than .pw2-item-hover:hover; 2022-11-03 Removed that z-index so change this from 10000 to 1 */
}
/* The label that toggles the .bo17-check checkbox */
/*#profile-body #sidebar-wrapper label.toggle-sidebar-button,*/
.bo17-wrapper label.bo17-label {
	display: block;
	background-color: #a4d7d6;
	border-color: #a4d7d6;
	box-sizing: border-box;
	height: 33px; /* Fixed height so we know how much bottom margin to give .bo17-content */
	cursor: pointer;
	margin: 0 !important; /* Don't want margins when fixing to the bottom of the screen */
	text-align: center;
	padding: 6px 2px;
	font-weight: bold;
	font-size: 14px;
	overflow: hidden;
	/* Fix to the bottom */
	position: fixed;
	z-index: 2; /* One more than .bo17-wrapper; 2022-11-03 Changed that z-index from 10000 to 1 so change this from 10001 to 2 */
	bottom: 15px; /* bottom padding */
	left: 4px;
	right: 4px;
	width: auto;
	outline: 4px solid #FFF;
	box-shadow: 0 -8px 8px 0 rgba(0,0,0,0.15), 0 15px #FFF; /* 1st: top drop shadow, 2nd: bottom padding */
}
/*#profile-body #sidebar-wrapper input#sidebar-toggle:checked ~ label.toggle-sidebar-button,*/
.bo17-wrapper input.bo17-check:checked ~ label.bo17-label {
	box-shadow: 0 -8px 8px 0 rgba(0,0,0,0), 0 15px #FFF /* 1st: remove top drop shadow, 2nd: bottom padding */ /* (1st: Change transparency instead of removing otherwise the .bccButton transition affects it) */
}
/* Hide initially, only show when the toggle checkbox is checked */
/*#profile-body #sidebar,*/
.bo17-content {
	background-color: #FFF;
	max-height: 0;
	height: auto !important;
	display: block !important; /* Animations don't work when changing the display */
	clear: both;
	overflow: hidden !important;
	transition: max-height 0.25s;
	width: 100%;
}
input.bo17-check {
	display: none; /* Don't show the checkbox that determines if the filter menu should be showing */
}
/* Enable the display of the filters */
/*input#sidebar-toggle:checked ~ .toggle-sidebar-button ~ #sidebar,*/
input.bo17-check:checked ~ .bo17-label ~ .bo17-content {
	display: block !important;
	overflow: auto !important;
	box-sizing: border-box;
	padding-top: 1em !important;
	height: auto;
	max-height: calc(100vh - 91px - 33px - 88px); /* viewport - menu - filter button - iOS nav bar */
	/*margin-top: 91px; /* Height of the mobile menu */
	margin-bottom: 41px; /* Height of the filter button 33px + filter button Y offset 2×4px */
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}
/*input#sidebar-toggle ~ .toggle-sidebar-button::before,*/
input.bo17-check ~ .bo17-label::before {
	content: "Show ";
}
/*input#sidebar-toggle:checked ~ .toggle-sidebar-button::before,*/
input.bo17-check:checked ~ .bo17-label::before {
	content: "Hide ";
}
#newatt-navigation {
	display: block;
	width: 96%;
	margin: 0 2% 25px 2%;
	padding: 0;
	position: relative;
}
#newatt-navigation span {
	margin-top: 10px;
}
#newatt-navigation label {
	display: block;
	margin: 1em auto;
}
/* --------------------------------------------------------------------------------------------------------------------
 * Address Autocomplete
 * ----------------------------------------------------------------------------------------------------------------- */
#address-autocomplete {
	position: absolute;
	background: #FFF;
	box-shadow: 0 3px 8px #999;
	list-style-type: none;
	z-index: 2;
	margin: 0;
	padding: 0;
	cursor: pointer;
	overflow: auto;
	scrollbar-width: thin;
}
#address-autocomplete::-webkit-scrollbar {
	width: 6px;
}
#address-autocomplete li {
	padding: 0.75em 0.5em;
	background: #FFF;
	border-bottom: 1px solid #F3F3F3;
	font-size: 1rem;
}
#address-autocomplete li:not(.has-open-list).current,
#address-autocomplete li:not(.has-open-list):hover {
	background: #F3F3F3;
}
#address-autocomplete li > .addr-summary {
	display: block;
}
#address-autocomplete li.has-open-list.current > .addr-summary,
#address-autocomplete li.has-open-list:hover > .addr-summary {
	background: #F3F3F3;
	margin: -0.75em -0.5em 0;
	padding: 0.75em 0.5em 0;
}
#address-autocomplete li ul li:not(.has-open-list).current,
#address-autocomplete li ul li:not(.has-open-list):hover {
	background: #F3F3F3;
}
#address-autocomplete li ul li:last-of-type {
	border-bottom: none;
}
#address-autocomplete li ul {
	margin-top: .25em;
	margin-left: 0;
	padding-left: 1em;
}

/* --------------------------------------------------------------------------------------------------------------------
 * Password Requirements
 * ----------------------------------------------------------------------------------------------------------------- */
.password-requirements b {
	font-weight: normal;
}
.password-requirements .req-met b {
	font-weight: bold;
	color: green;
}
.password-requirements .req-not-met b {
	font-weight: bold;
	color: red;
}
.password-requirements .req-met b::before {
	content: "\f058\a0";
	font-family: "Font Awesome 6 Free", sans-serif;
	font-size: .9em;
}
ul.password-requirements .req-not-met b::before {
	content: "\f06a\a0";
	font-family: "Font Awesome 6 Free", sans-serif;
	font-size: .9em;
}

/**
 * Minimal List, with <li> taking the place of both the <span> and <b>.
 * Using ::marker would be preferable to ::before but Safari lacks "content" support.
 */
ul.password-requirements.min {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.password-requirements.min > li {
	display: flex;
	align-items: center;
}
ul.password-requirements.min > li.req-met {
	color: green;
}
ul.password-requirements.min > li.req-not-met {
	color: red;
}
ul.password-requirements.min > li::before {
	display: inline-block;
	text-align: center;
	width: 1.25em;
	margin-right: .25em;
	font-size: .9em;
	content: "•";
}
ul.password-requirements.min > li.req-met::before {
	content: "\f058";
	font-family: "Font Awesome 6 Free", sans-serif;
}
ul.password-requirements.min > li.req-not-met::before {
	content: "\f057";
	font-family: "Font Awesome 6 Free", sans-serif;
}

/**********************************************************************************************************************
 * END global.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * profile.css
 *********************************************************************************************************************/
* {
	/*transition: background .25s ease;*/
	transition: border .25s ease;
}
/* BREADCRUMBS */
#v2_left_column, .branded_table,
.bread-shipping, #rslide-wrapper {
	display: none;
}
/*
ol.breadcrumb .desktop {
	display: none;
}
*/
/* MAIN CONTAINER */
.brandpage_container {
	position: relative; /* so .freeShipping can be absolutely positioned at the top */
	/*width: 100%;*/ /* is this needed? */
	/*overflow: expand;*/ /* invalid property value */
	/*z-index: 1;*/ /* is this needed? */
	margin-top: 20px;

	/* Only so we can reposition .freeShipping */
	/*
	display: flex;
	flex-direction: column;
	 */
}
/*
.brandpage_container .freeShipping {
	order: 2;
}
.brandpage_container #brand-header {
	order: 1;
}
.brandpage_container #csBadges {
	order: 1;
}
.brandpage_container #v2_right_column {
	order: 3;
}
.brandpage_container #v2_long_desc {
	order: 3;
}
.brandpage_container #bottom-id {
	order: 3;
}
*/

/* BRAND BANNER */
#brand-header {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/*float: left; /* So .freeShipping BG color extends behind it. Unsure if this was intentional */
	/* position: relative; *//* needed? */
	text-align: center;
	border-radius: 6px;
	width: 95%;
	margin: -10px 2.5% 0 2.5%;
}

/*
#brand-header .freeShipping {
	display: none;
}
*/
#brand-header img {
	/*max-width: 40%;*/
	min-width: 100px;
	max-height: 200px;
	position: relative;
	padding: 20px;
	/*margin: 60px 0 60px 0;*/
	background-color: rgba(255,255,255,.85);
	border-radius: 6px;
	overflow: auto;
	pointer-events: none;
	max-width: 60%;
	margin: 40px 0 40px 0;
	/*width: 90%;*/
	width: auto;
}
@media only screen and (max-width: 786px) {
	#brand-header img {
		max-width: 80%;
	}
}
/* BRAND CLEAN SALON BADGES */
#csBadges {
	/*
	display: block;
	position: relative;
	width: 100%;
	*/
	/*z-index: 10;*/
	/*float: left; width: 95%; box-sizing: border-box; /* So .freeShipping BG color extends behind it. Unsure if this was intentional */
	text-align: center;
	margin: -3% 2.5% 0; /* Negative top so it creeps into #banner-header; Side to match #brand-header margin */
	padding: 0 2.5%; /* Side to match 100% - #brand-header width / 2 */
	display: flex;
	justify-content: center;
	column-gap: 2px;
}
#csBadges a {
	padding: .5%;
}
#csBadges img {
	/*
	box-sizing: border-box;
	max-width: 100%;
	max-height: 75px;
	border-radius: 50%;
	border: 5px solid #fff;
	margin: -5px -2px;
	*/
	border: 5px solid #fff;
	margin: 0 -5px; /* to offset the border width */
	border-radius: 50%;
	/*width: auto !important;
	max-width: 100%;*/
	width: 100%;
	max-width: 75px;
	height: auto;
	padding: 0;
}
/* PROMO NOTIFICATION/ACTIVATION */
.freeShipping {
	width: 100%; /* needed since inline styling sets inline-block */
	text-align: center;
	margin-top: 10px;
}
.freeShipping > span {
	background: #333;
	color: #fff;
	font-family: Open Sans,sans-serif;
	font-size: 16px;
	-webkit-box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	padding: 1px 0;
	display: block;
}
.freeShipping i.fa-arrow-right {
	display: none;
}
.freeShippingBag {
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}
.freeShippingButton {
	border-radius: 3px;
	background: #fff;
	color: #333;
	padding: 3px 6px;
	font-weight: 700;
	display: inline-block;
	margin: 5px 0;
	order: 3;
}
#v2_right_column {
	/*position: relative;
	float: left;
	width: 100%;
	margin: 0 0 0 0; needed? */
	/*width: 100%;*/ /* needed? */
	padding-top: 25px/* !important*/;
}
.profileSortFilter {
	display: inline-block;
	float: left;
	width: 95%;
	text-align: center;
	border-radius: 6px;
	background: #a4d7d6;
	margin: 0 2.5% 5px 2.5%;
	padding: 5px 0;
}
.pageLabel {
	/*width: 100%;
	margin: 0;
	box-sizing: border-box;
	float: left; needed? */
	line-height: 10px;
	padding: 0 10px;
}
.pageLabel h1 {
	font-size: 1.17em;
	font-weight: 700;
	margin-block-start: 1em;
	margin-block-end: 1em;
}
.profileSortFilter div {
	display: inline-block;
	width: 89%; /* was set on @media only screen and (max-width: 786px) */
}
.profileSortFilter div select {
	text-align: center;
	font-size: 16px;
	/*padding: 3px 6px;
	margin: 5px 3px;*/
	border: none;
	border-radius: 6px;
	cursor: pointer;
	width: 100%/* !important*/;
	margin: 5px 0;
	padding: 3px;
}
/* Probably to override desktop
.sortContainer {
	float: initial;
	margin: 0;
}
*/
.sortContainer .label {
	display: none;
}

.prod_table_container {
	/*position: relative; needed? */
	/*width: 100%; needed? */
	background: #fff;
	min-height: 300px;
	/*padding: 3px 0 0 3px;*/
	text-align: center;
	/*margin: 0; needed? */
	/*padding: 0; needed? */
	display: flex;
	flex-wrap: wrap;
	column-gap: 4px;
	justify-content: center;
}
.prod_table_container > .infinite-loading {
	text-align: center;
	display: block;
	width: 100%; /* So it will wrap onto its own line when in a flex box with flex-wrap */
}

.att_video {
	width: 100%;
	display: block;
	clear: both;
	margin: 0 auto;
	float: left;
	text-align: center;
	position: relative;
}
.att_video iframe {
	width: 90%;
	max-width: 980px;
	height: 53.35vw;
	max-height: 550px;
}

/* This styling was inline */
.brandpage_container .review-verified {
	display: inline-block;
	color: #000;
	background: #e3fcfc;
	border-radius: 10px;
	padding: 1px 5px 2px 3px;
}
#bottom-id {
	font-size: 10px;
	color: #757575;
	text-align: center;
	display: block;
	margin: 5px auto;
}
#v2_long_desc {
	/*margin: 20px 0 10px 0;*/
	/*border: none !important;*/
	/*background-color: #f2f2f2 !important;*/
	-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.34);
	-moz-box-shadow: 0 3px 3px 0 rgba(0,0,0,.34);
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.34);
	border-radius: 3px;
	line-height: 1.5em;

	border: none;
	width: 96%;
	padding: 2%;
	background-color: #f2f2f2;
	margin: 0 0 0 0;
}
.v3-bottom-logo {
	max-width: 30%;
	min-width: 100px;
	max-height: 200px;
	position: relative;
	padding: 20px;
	display: block;
	margin: 0 auto 25px auto;
	border-radius: 6px;
	overflow: auto;
	width: initial !important;
	height: initial !important;
}
.v3-bottom-logo {
	background-color: rgba(255,255,255,.85);
}
/**********************************************************************************************************************
 * END profile.css
 *********************************************************************************************************************/


/**********************************************************************************************************************
 * reviews.css
 *********************************************************************************************************************/

.review-customer {
	font-style: italic;
	color: #333;
}
.review-date { /* original in product.css */
	font-size: .8em;
	color: #757575;
	font-style: italic;
}
.review-title { /* originally in product.css */
	font-weight: 700;
	text-transform: capitalize;
}
.review-panels { /* originally in both reviews.css and product.css, and both identical */
	display: block;
	position: relative;
	width: 33.33%;
	float: left;
	text-align: center;
	margin: 15px 0 15px 0;
}
.yes-green {
	color: #468439;
	font-weight: 700;
}
.yes-green i {
	font-size: 16px;
}
.no-red {
	color: #000;
	opacity: .75;
}
.no-red i {
	font-size: 16px;
}
/**********************************************************************************************************************
 * END reviews.css
 *********************************************************************************************************************/


/**********************************************************************************************************************
 * widgets.css
 *********************************************************************************************************************/
.discontinued,
.backordered  {
	display: block;
	position: absolute;
	top: 40px;
	left: 10%;
	width: 75%;
	border: 1px solid #ff7e7e;
	border-radius: 3px;
	padding: 3px;
	margin-top: 4px;
	background: #ffe7e7;
	line-height: 13px;
	pointer-events: none;
}
.discontinued::before,
.backordered::before {
	content: "!";
	display: inline-block;
	margin: -3px 6px -3px -3px;
	background-color: #ff7e7e;
	float: left;
	color: #ffe7e7;
	width: 30px;
	height: 100%;
	text-align: center;
	font-size: 16px;
	padding: 0 0 1px 0;
	border-radius: 2px 0 0 2px;
	border: 1px solid #ff7e7e;
	line-height: 16px;
}
.pw2-item-hover {
	position: relative; /* for positioning buttons inside */
	display: inline-block;
	width: 200px;
	border: 1px solid #fff;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	color: #000;
	background: #fff;
	transition: all .25s;
	-webkit-transition: all .25s;
	margin: 0 6px 6px 6px;
	overflow: visible;
}
/* Switch to 2 widgets per line;  */
/* note: 2 columns auto-fit @ 613px and one column @407px */
/*
@media only screen and (max-width: 750px) {
*/
@media only screen and (max-width: 480px) {
	.pw2-item-hover {
		margin: 0 !important;
		padding: 0 !important;
		height: initial !important;
		width: 48%;
	}
}
.pw2-item-hover:hover {
	box-shadow: 0 2px 2px rgba(0,0,0,.35);
	/*z-index: 9999; Must be less than #mobile-header so product widget won't overlay when hovering, but do we even need it? */
	border: 1px solid #e3e3e3;
}

/* .pw2-button and .widget-button are always together so we should just use one */
.pw2-button {
	position: absolute;
	top: 100px;
	/*left: 17px;*/
	display: block;
	/*width: 100%;
	height: 20px;*/
	text-decoration: none;
	font-size: 16px;
	background: #333 none no-repeat top left;
	border-radius: 3px;
	color: #fff;
	padding: 5px 10px;
	border: 2px solid #fff;
	/*transition: all .25s ease;*/

	/* a.widget_button, but the two classes are always together so why have separate classes? */
	/*background-position: left top;
	background-repeat: no-repeat;*/
	/*display: block;*/
	opacity: 0;
	width: 150px;
	height: 21px;
	/* margin-left: auto; */
	/* margin-right: auto; */
	left: 50%;
	transform: translate(-50%, 0);
	/*text-decoration: none;*/
	transition: opacity .25s ease;
}

#searchspring-content .ss-results .pw2-button {
	left: auto;
	transform: none;
	margin-left: auto;
	margin-right: auto;
}

a.pw2-button:hover { /* include the "a" selector so it overrides the global "a" selector */
	/*text-decoration: none !important;*/
	color: #333;
	background: #fff 0 bottom;
	/*background-position-x: 0%;
	background-position-y: 0%;*/
	border: 2px solid #333;
	transition: all .25s ease;
	box-shadow: 0 0 4px rgba(255,255,255,1);
	/*a.widget_button:hover*/
	text-decoration: none;
}
/*.pw2-item-hover:hover a.widget_button {*/
.pw2-item-hover:hover .pw2-button {
	opacity: 1;
}
@media only screen and (max-width: 750px) {
	/*.pw2-item-hover:hover a.widget_button {*/
	/* Why turn off the button over on small screens? Note: .pws2-button also has .DoI so it turns off regardless of this */
	/*
	.pw2-item-hover:hover .pw2-button {
		opacity: 0;
		display: none;
	}
	 */
}
.pw2-readmore {
	top: 140px;
}
.pw2-image-link {
	display: block;
}
.pw2-image {
	margin: 15px auto 0;
	width: 200px;
	height: 200px;
	display: block;
}
@media only screen and (max-width: 750px) {
	.pw2-image {
		max-width: 100%;
		object-fit: contain;
	}
}
.pw2-brandimg {
	float: left;
	width: 100%;
	text-align: center;
	margin: 15px 0 0 0;
	display: block; /* Use block because inline-block has extra space below for descenders */
}
.pw2-brandimg img {
	display: block; /* Use block because inline-block has extra space below for descenders */
	margin-left: auto;
	margin-right: auto;
}
.pw2-item-details {
	width: 90%;
	display: block;
	position: relative;
	text-align: center;
	font-family: 'Open Sans',sans-serif;
	font-size: 13px;
	margin: 5px 5% 5px 5%;
	float: left;
}
.pw2-item-details > span:first-child {
	display: inline-block;
	text-align: center;
}
.pw2-name {
	height: 60px;
	width: 100%;
	padding: 0 8px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	/*overflow: hidden;*/

	/* .pw2-item-name, another class that is always with .pw2-name*/
	text-decoration: none;
	color: #000;
	font-size: 14px;
	overflow: visible;
}
@media only screen and (max-width: 750px) {
	/*.pw2-item-name {*/
	.pw2-name {
		font-size: 11px;
	}
}
.pw2-item-price {
	position: relative;
	height: 10px;
	font-size: 12px;
	width: 90%;
	line-height: 6px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pw2-item-price.has-pro-price .pw2-price {
	text-decoration: line-through;
}
.pw2-item-price.pro-price {
	margin-top: 0.5em;
}
.pw2-item-price-descriptor {
	text-align: left;
}
.pw2-price {
	text-align: right/* !important*/;
	font-weight: 700;
}
.pw2-price del,
.pw2-price s {
	color: #757575;
	font-size: 10px;
}
.pw2-price ins {
	text-decoration: none;
}
.pw2-item-price-sale {
	position: relative;
	height: 10px;
	font-size: 13px;
	width: 92%;
	line-height: .8em;
	border-bottom: 1px dotted #b7b7b7;
	color: #388627;
	font-weight: bold;
	margin: 10px auto 0 auto;
}
.pw2-item-price-sale-green {
	position: relative;
	height: 10px;
	font-size: 13px;
	width: 92%;
	line-height: .8em;
	color: #388627;
	font-weight: bold;
	margin: 0 auto 0 auto;
}
.pw2-item-price-sale s {
	color: #000;
	font-size: 10px;
}
a.pw2-item-rating {
	display: block;
}
.pw2-item-stars {
	position: relative;
	margin: 8px auto 4px;
	width: 60px;
	display: block;
}
.pw2-write {
	display: inline-block;
	text-align: center;
	position: relative;
	width: 100%;
	float: left;
	margin: 8px 0 0 0;
	font-size: 10px;
	text-decoration: none;
	color: #757575 !important;
}
a.pw2-item-rating + .pw2-write {
	margin-top: 0;
}
div.cspip.info:hover {
	z-index:25;
}
div.cspip.info span {
	opacity: 0;
	display:block;
	position:absolute;
	font-weight:bold;
	bottom: 3px;
	left: 0;
	width:100%;
	text-align: center;
	transition: all .25s ease;
	pointer-events: none;
}
div.cspip.info:hover > span { /* the span will display just on :hover state */
	opacity: 1;
}
/* Clean Salon Pips */
.cspips {
	width: 100%;
	text-align: center;
	float: left;
	height: 40px;
	cursor: default;
	position: relative;
}
.cspip {
	border-radius: 50%;
	width: 12px;
	height: 12px;
	display: inline-block;
	margin: 4px 2px;
}
.cspip span {
	text-transform: capitalize;
	background-color: #FFF;
}

.cleanSamplePip3839, .cleanHover3839:hover, .cspip-3839 { background: #772b53; }
.cleanSamplePip3851, .cleanHover3851:hover, .cspip-3851 { background: #6a3800; }
.cleanSamplePip3840, .cleanHover3840:hover, .cspip-3840 { background: #78a9da; }
.cleanSamplePip3841, .cleanHover3841:hover, .cspip-3841 { background: #be8844; }
.cleanSamplePip3852, .cleanHover3852:hover, .cspip-3852 { background: #3e618d; }
.cleanSamplePip3842, .cleanHover3842:hover, .cspip-3842 { background: #d97e9f; }
.cleanSamplePip3843, .cleanHover3843:hover, .cspip-3843 { background: #efa81f; }
.cleanSamplePip3845, .cleanHover3845:hover, .cspip-3845 { background: #97ac65; }
.cleanSamplePip3846, .cleanHover3846:hover, .cspip-3846 { background: #8ab3a0; }
.cleanSamplePip3854, .cleanHover3854:hover, .cspip-3854 { background: #cb9983; }
.cleanSamplePip3848, .cleanHover3848:hover, .cspip-3848 { background: #5f4da0; }
.cleanSamplePip3850, .cleanHover3850:hover, .cspip-3850 { background: #53853f; }
.cleanSamplePip4082, .cleanHover4082:hover, .cspip-4082 { background: #54c6df; }
.cspip-3839 span { color: #772b53; }
.cspip-3851 span { color: #6a3800; }
.cspip-3840 span { color: #78a9da; }
.cspip-3841 span { color: #be8844; }
.cspip-3852 span { color: #3e618d; }
.cspip-3842 span { color: #d97e9f; }
.cspip-3843 span { color: #efa81f; }
.cspip-3845 span { color: #97ac65; }
.cspip-3846 span { color: #8ab3a0; }
.cspip-3854 span { color: #cb9983; }
.cspip-3848 span { color: #5f4da0; }
.cspip-3850 span { color: #53853f; }
.cspip-4082 span { color: #54c6df; }
.CSSBorder3839 { border: 2px solid #772b53; }
.CSSBorder3851 { border: 2px solid #6a3800; }
.CSSBorder3840 { border: 2px solid #78a9da; }
.CSSBorder3841 { border: 2px solid #be8844; }
.CSSBorder3852 { border: 2px solid #3e618d; }
.CSSBorder3842 { border: 2px solid #d97e9f; }
.CSSBorder3843 { border: 2px solid #efa81f; }
.CSSBorder3845 { border: 2px solid #97ac65; }
.CSSBorder3846 { border: 2px solid #8ab3a0; }
.CSSBorder3854 { border: 2px solid #cb9983; }
.CSSBorder3848 { border: 2px solid #5f4da0; }
.CSSBorder3850 { border: 2px solid #53853f; }
.CSSBorder4082 { border: 2px solid #54c6df; }

.commentsContainer {
	width: 100%;
	float: left;
	margin: 0 0 60px 0;
	overflow-x: hidden;
}
.blogTitles {
	border-bottom: 1px solid #cacaca;
	margin: 6px 5% 6px 5%;
	width: 90%;
	font-size: 34px;
	text-transform: uppercase;
	line-height: 26px;
	text-align: center;
	color: #1f1f1f;
	display: inline-block;
}
.blogTitles span {
	font-family: 'Vollkorn',serif;
	text-transform: none;
	font-size: 40px;
	color: #1f1f1f;
}
.blogWidget {
	display: inline-block;
	width: 20%;
	margin: 0 1% 20px 1%;
	height: 250px;
	background-position: center center;
	background-size: cover;
	position: relative;
	transition: all .25s ease;
	border-radius: 6px;
	background-color: #fafafa;
	border: 1px solid #fff;
	min-width: 200px;
}
.blogWidgetTitle {
	display: inline-block;
	position: absolute;
	height: 50px;
	background: rgba(255,255,255,.90);
	text-align: center;
	padding: 15px 5%;
	width: 90%;
	bottom: 0;
	left: 0;
	font-family: 'Raleway',sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 20px;
}
.blogWidgetTitle span {
	font-family: 'Vollkorn',serif;
	font-size: 18px;
	text-transform: none;
	display: inline-block;
	font-style: italic;
}

/* Inline GWP Widget */
.freeGiftBubble {
	position: absolute;
	/*
	left: -15px;
	top: -15px;
	*/
	border-radius: 50%;
	font-family: Open Sans,sans-serif;
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 24px;
	background: #333;
	padding-top: 13px;
	width: 75px;
	height: 62px;
	border: 4px solid #fff;
	color: #fff;
	-webkit-box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	transform: rotate(-0.05turn);
	top: -5px;
	left: -5px;
}
.freeGiftBubble:hover {
	text-decoration: none !important;
}
.freeGiftValue {
	display: block;
	position: absolute;
	border: 4px solid #fff;
	color: #fff;
	-webkit-box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	box-shadow: 5px 5px 15px 1px rgba(0,0,0,.19);
	background: #333;
	border-radius: 0 16px 16px 0;
	padding: 5px 15px 5px 30px;
	font-size: 22px;
	top: -5px;
	left: 50px;
	line-height: 18px;
	font-family: Open Sans,sans-serif;
	font-weight: 700;
}
.freeGiftValue span {
	font-size: 14px;
	font-weight: initial;
}
.freeGiftBox {
	border: 1px solid #cad8bb;
}
.freeGiftText {
	/*width: 200px !important; /* Why do this? On mobile, content longer than 200px will get clipped instead of wrapping */
	/*display: table-cell;*/
	width: 100%;
	float: left; /* Just like .pw2-brandimg and .pw2-item-details, the 2 elements above this */
	padding-bottom: 13px;
	padding-top: 11px;
	background: #333;
	color: #fff;
	border-radius: 0 0 3px 3px;
}
.freeGiftDetails {
	height: 85px;
}
.freeGiftDetails:hover .pw2-item-name {
	text-decoration: none !important;
}

/**********************************************************************************************************************
 * END widgets.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * product.css
 *********************************************************************************************************************/
#prod-grid {
	clear: both;
}

#prod-grid-title {
	text-align: center;
}

#prod-title {
	/*display: inline-block;*/
	vertical-align: middle;
	/*text-align: left; needed? */
	font-size: 18px;
	/*width: 100%; needed? */
	font-family: 'Open Sans',sans-serif;
	color: #4f4f4f;
	margin: 15px 0 15px 0;
}
#prod-grid h1 {
	text-align: center;
	margin: 1em auto;
	padding: 0 .5em;
	box-sizing: border-box;
}
.productImage {
	overflow: hidden;
}
@media only screen and (max-width: 500px) {
	.productImage {
		width: 100%;
		height: initial;
	}
}
#prod-grid-image {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.ZoomContainer {
	max-width: 400px !important;
	max-height: 400px !important;
}
#prod-grid div.productImage {
	text-align: center;
	margin: 1em auto;
}
#prod-grid div.productImage a {
	display: block;
}
#prod-grid div.productImage picture img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}
#prod-grid .productThumbsArea {
	display: flex;
	justify-content: space-evenly;
	align-items: stretch;
}
#prod-grid .productThumbsArea.hide {
	display: none;
}
#prod-grid .productThumbsArea .prev-thumb,
#prod-grid .productThumbsArea .next-thumb {
	user-select: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 1.8em;
}
#prod-grid .productThumbsArea .prev-thumb {
	margin-left: 16px;
}
#prod-grid .productThumbsArea .next-thumb {
	margin-right: 16px;
}
#prod-grid .productThumbsArea .prev-thumb:hover,
#prod-grid .productThumbsArea .next-thumb:hover {
	-webkit-text-stroke: 1px #a4d7d6;
	text-shadow: 0 0 6px #a4d7d6;
}
#prod-grid .productThumbs {
	text-align: center;
	/* For single-row thumbnails */
	display: flex;
	overflow: auto;
	scrollbar-width: thin;
}
#prod-grid .productThumbs::-webkit-scrollbar {
	width: 5px;
}
#prod-grid div.productThumbs picture {
	display: inline-block;
	border: 2px solid transparent;
}
#prod-grid div.productThumbs picture.active {
	border-color: #a4d7d6;
	box-shadow: 0 0 3px #a4d7d6;
}
#prod-grid div.productThumbs picture:only-of-type,
#prod-grid div.productThumbs picture:only-of-type ~ span.prev-thumb,
#prod-grid div.productThumbs picture:only-of-type ~ span.next-thumb {
	display: none;
}
#prod-grid div.productThumbs picture img {
	cursor: pointer;
	display: block;
	margin: 1px;
}
#prod-grid a.avg-review-score {
	display: block;
	width: 139px;
	height: 30px;
	text-align: center;
	position: relative;
	margin: 0 auto;
}
#prod-grid .rating-stars-bg {
	display: inline-block;
	width: 139px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: .5;
}
#prod-grid .avg-rating-stars {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(/images/stars/bigstars-50.gif);
	height: 27px;
}
#prod-grid .avg-rating-count {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	font-size: 14px;
	line-height: 27px;
	margin-left: 4px;
}
#prod-grid-info {
	text-align: center;
}
#prod-grid-info a.brand-logo {
	display: block;
	text-align: center;
	margin: 1em 0 15px 0;
}
#prod-grid a.brand-logo img {
	width: 150px;
	height: auto;
}
picture.black_border img,
.black_border:not(picture.child_selector) {
	border: 2px solid #a4d7d6;
	background: #c5f9f8;
}
#child_select {
	width: 98%;
	border: 1px solid #ccc;
	padding: 1%;
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	margin-bottom: 15px;
}
#child_select[data-child-count="1"] {
	display: none;
}
#child_select,
#product_variation_name {
	margin-top: 20px;
}
picture.child_selector img,
span.child_selector {
	display: inline-block;
	vertical-align: middle;
	border: 2px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
}
span.child_selector {
	font-size: 18px;
	padding: 5px 15px;
	margin: 0 0 15px 0;
	font-family: 'Open Sans',sans-serif;
}
picture.child_selector {
	border: none;
	padding: 4px;
	display: inline-block;
	cursor: pointer;
	font-size:.7em;
}
picture.child_selector.child_image img {
	border: 2px solid #fff;
	padding: 2px;
	border-radius: 3px;
	font-size: 1em;
}
.child_selector[data-child-count="1"] {
	display: none;
}
/* Hide the size on mobile as it's already shown in the size selector except when that's hidden due to only one child */
.prod_size_label {
	display: none;
	margin: 1em 0;
}
#child_select[data-child-count="1"] ~ .prod_size_label {
	display: block;
}
/* needed?
.prod_price_cart {
	width: 100%;
}
*/
.prod_price_qty {
	/*width: 100%; needed? */
	clear: both;
	/*text-align: center; needed? #prod-grid-info is already centered */
	margin: 0 0 15px 0;
}
/* needed?
#product-area .prod_price_cart .prod_price_qty {
	width: 100%;
}
*/
.prod_price_area {
	font-size: 18px;
	font-family: 'Open Sans',sans-serif;
	width: 45%/* !important*/;
	margin-left: 5%;
	text-align: left; /* override center of .prod_price_qty and #prod-grid-info */
	float: left;
}
.prod_price_area div {
	font-size: 22px;
	line-height: 44px;
	font-family: 'Open Sans',sans-serif;
}
.prod_price_area del {
	text-decoration: none;
}
.prod_price_area ins {
	display: none;
	text-decoration: none;
}
.prod_price_area .on-sale del {
	text-decoration: line-through;
}
.prod_price_area .on-sale ins {
	color: #518042;
	font-weight: 700;
	display: inline;
}
#prod_price_qty_input {
	height: 46px;
	/*width: 75px;
	text-align: center;*/
	font-size: 18px;
	width: 45%/* !important*/;
	float: right;
	margin: 0 5% 0 0;
	/*text-align: left !important; needed?*/
	padding-left: 5%;
}
.prod_price_cart .buttons-area {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin-top: 10px;
	padding-left: 1em;
	padding-right: 1em;
	justify-content: center;
	align-items: center;
}

.prod_price_cart .float-buttons-area {
	display: none;
}

@media only screen and (max-width: 980px) {
	
	.prod_price_cart .float-buttons-area button, .prod_price_cart .float-buttons-area a {
		margin-top: 20px;
	}
	
	.prod_price_cart .float-buttons-area {
		display: initial;
		position: fixed;
		width: 100%;
		height: 85px;
		justify-content: center;
		align-items: center;
		background: #fff;
		z-index: 9;
		left: 0;
		bottom: 0;
		-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.25);
		-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.25);
		box-shadow: 0 0 15px 0 rgba(0,0,0,.25);
	}
}

.add_to_bag_button {
	position: relative/* !important*/;
	height: 50px/* !important*/;
	width: 40%/* !important*/;
	font-size: 18px/* !important*/;
}
.prod_price_cart .buttons-area button,
.prod_price_cart .buttons-area a {
	white-space: nowrap;
	display: inline-block;
	transition: all .25s ease;
}
.prod_price_cart .buttons-area button,
.prod_price_cart .buttons-area a {
	white-space: nowrap;
	display: inline-block;
	transition: all .25s ease;
}
#product-area .in_bag_link {
	display: inline-block;
	/*width: 100% !important;*//* This forces the Checkout Now button onto its own line but we want it next to the Update button */
	position: relative;
	height: 50px;
	font-size: 18px;
	vertical-align: top;
	box-sizing: border-box;
	white-space: nowrap;
}
#product-area .prod_marketing_desc {
	font-size: smaller;
	font-style: italic;
}
#product-area .prod_marketing_desc:empty {
	display: none;
}
.freeShippingBanner {
	/*height: 22px;*/
	line-height: 22px;
	width: 90%;
	margin: 15px 0 0 0;
	/*text-align: left;*/
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	background-color: #a4d7d6;
	color: #000;
	padding: 10px 5%;
	font-weight: 300;
	/*border-radius: 6px;*/

	text-align: center;
	height: auto;
	border-radius: 0;
}
.freeShippingSpan {
	/*float: right;*/
	line-height: initial;
	display: inline-block;
	/*margin: 0 0 0 0;*/
	text-align: center;
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	/*float: none;*/
	margin: 15px 0 0 0;
}
.discontinued,
.backordered {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	margin: 4px auto;
	padding: .5em;
	display: none;
}
.backordered.show {
	display: inline-block;
}

#product-area .pipContainer {
	width: 100%;
	margin: 15px 0;
	/*padding: 0; needed? */
	/*text-align: left;*/
	display: flex;
	justify-content: center;
}
#product-area .pipContainer span {
	padding: .5%;
}
#product-area .pipContainer span img {
	/*width: auto !important; needed? */
	max-width: 100%;
	height: auto; /* to retain aspect ration with max-width: 100% */
	padding: 0;
}

/* this was inline */
afterpay-placement {
	margin-right: -100%;
}

/* Product ID at bottom of page above footer */
#prod-id {
	font-size: 10px;
	color: #757575;
	width: 100%;
	text-align: center;
	display: block;
	margin-top: 25px;
}
/*---------------------------------------------------------------------------------------------------------------------
 * product.css: Registration Form for Product Stock Notification
 *-------------------------------------------------------------------------------------------------------------------*/
.productEmailForm {
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	box-sizing: border-box;
	border-radius: 6px;
	border: 2px solid #a4d7d6;
	padding: 10px;
	background-color: rgba(161,215,214,.5);
	line-height: 26px;
	/*
	width: 100%;
	margin: 1em 0;
	*/
	width: calc(100% - 40px);
	margin: 10px auto;
}
.productEmailForm span {
	display: inline-block;
	font-weight: bold;
}
.productEmailForm input,
.productEmailForm button {
	padding: 3px 5px;
	border: 2px solid #a4d7d6;
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	margin-top: 6px;
	line-height: 24px;
}
.productEmailForm input[type=email] {
	border-radius: 6px 0 0 6px;
	border-right: none;
	width: 50%;
}
.productEmailForm button {
	padding: 3px 6px;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
}
/*---------------------------------------------------------------------------------------------------------------------
 * product.css: Product Tabs Section
 *-------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 500px) {
	#product-tabs {
		scroll-margin: 98px 0 0 0;
	}
}
.ootb-tabcordion {
	/*background: #fff; needed? */
	padding: 1rem;
	margin: 1rem auto 4rem auto;
	/*border-radius: 3px; needed? */
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--tabs {
	opacity: 1;
	height: auto;
	visibility: visible;
	text-align: center;
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry {
	min-height: 0;
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry::before {
	display: none;
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content {
	opacity: 1;
	transition: all 0ms ease-in-out;
	border: 1px solid #c9c9c9;
	height: auto;
	border-radius: 6px;
}
.ootb-tabcordion.has-tabs .ootb-tabcordion--entry .ootb-tabcordion--entry-content {
	opacity: 0;
	transition: all 0ms ease-in-out;
	height: 0;
	overflow: hidden;
}
.ootb-tabcordion--tabs {
	opacity: 0;
	height: 0;
	visibility: hidden;
	margin: 0 0 -18px 0;
	list-style: none;
	padding: 0 0 14px 0;
	text-align: center;
}
.ootb-tabcordion--tabs .tab {
	display: inline-block;
	background: #eee;
	color: #000;
	font-size: 16px;
	font-weight: 300;
	font-family: "Roboto", sans-serif;
	border: none;
	cursor: pointer;
	margin: 0 0 -4px;
	padding: 0.5rem 1rem 15px;
	border-top: 1px solid #fff;
	border-radius: 6px 6px 0 0;
}
.ootb-tabcordion--tabs .tab:hover,
.ootb-tabcordion--tabs .tab:focus {
	outline:none;
	background: #eee;
	border-top: 1px solid #c9c9c9;
}
.ootb-tabcordion--tabs .tab.is-active {
	position: relative;
	color: #fff;
	background: #444444;
	border-right: none;
	border-left: none;
}
.ootb-tabcordion--entry {
	overflow: hidden;
}
.ootb-tabcordion--entry::before {
	position: relative;
	content: attr(data-title);
	cursor: pointer;
	/*z-index: 1; needed? Will cause mobile tab section header to overlay the mobile header unless mobile header z-index is increased */
	background: #444;
	color: #fff;
	padding: 0.5rem 1rem;
	display: block;
	border-radius: 3px;
}
.ootb-tabcordion--entry:hover,
.ootb-tabcordion--entry:focus {
	outline: none;
}
.ootb-tabcordion--entry:hover::before,
.ootb-tabcordion--entry:focus::before {
	background: #535353;
}
.ootb-tabcordion--entry.is-active .ootb-tabcordion--entry-content {
	left: 0;
	margin-top: 0;
	height: auto;
	opacity: 1;
	transition: margin 400ms ease-out -100ms;
	background: #fff;
	font-size: 14px;
}
.ootb-tabcordion--entry.is-active::before {
	background: #a4d7d6;
}
.ootb-tabcordion--entry.is-active:hover::before,
.ootb-tabcordion--entry.is-active:focus::before {
	background: #a4d7d6;
}
.ootb-tabcordion--entry-container {
	overflow: hidden;
	margin-bottom: 1px;
}
.ootb-tabcordion--entry-content {
	position: relative;
	margin-top: -100%;
	height: 0;
	opacity: 0;
	transition: margin 500ms ease-in;
	padding: 1rem;
	overflow: hidden;
}
.ootb-tabcordion--entry-content a.more {
	color: #444;
}
.ootb-tabcordion--entry-content a.more:hover {
	color: #3bacff;
}
/* Inactive Tab Color */
.ootb-tabcordion--tabs .tab,
.ootb-tabcordion--entry::before {
	background: #eee;
	color: #000;
}
/* Active Tab Color */
.ootb-tabcordion--tabs .tab.is-active,
.ootb-tabcordion--entry.is-active::before,
.ootb-tabcordion--tabs .tab.is-active:focus,
.ootb-tabcordion--entry.is-active:focus::before {
	background: #a4d7d6;
	color: #000;
}
/* Hover Tab Color */
.ootb-tabcordion--tabs .tab:not(.is-active):hover,
.ootb-tabcordion--entry:not(.is-active):hover::before {
	background: #777;
	color: #FFF;
}
#product-tabs .review-panels {
	width: 50%;
}
#product-tabs img {
	max-width: 100%;
	height: auto;
}
.prod_video_frame {
	position: relative;
	/*width: 50%;
	height: 0;
	padding-bottom: 28.125%;
	margin: 10px 25%;*/

	height: auto;
	padding-bottom: 0;
	/*
	margin-left: auto;
	margin-right: auto;*/
	margin: 10px auto;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.prod_video_frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none; /* was in #tab2-tab iframe */
}
.reviewContainer {
	overflow: auto; /* so floated .review-panels will remain inside .reviewContainer */
}
.reviewContainer:not(:first-of-type) {
	margin-top: 30px;
}
#tab3-tab .more-reviews-box,
#tab3-tab .no-reviews-box {
	text-align: center;
}
#tab3-tab .more-reviews-box {
	margin: 30px .5% 0 .5%;
	padding-top: 30px;
	width: 99%;
}
.readreviews {
	display: inline-block;
	position: relative;
	text-align: center;
	width: auto;
	font-size: 12px;
	border-radius: 3px;
	color: #468439;
	background: #fff;
	margin: 0 10px 15px 10px;
	padding: 10px;
	border: 2px solid #468439;
	font-weight: 700;
}

/*---------------------------------------------------------------------------------------------------------------------
 * Customers Also Purchased Section
 *-------------------------------------------------------------------------------------------------------------------*/
.prod_full {
	width: 97%;
	/*margin-top: 30px;*/
	padding: 0 1.5% 10px 1.5%;
	position: relative;

	margin: 0 0 15px 0;
}
.prod_full_title {
	display: block;
	position: relative;
	border-bottom: 1px solid #d8d8d8;
	padding: 0 0 15px 0;
	width: 100%;
	margin: 25px 0 25px 0;
	border-radius: 5px 5px 0 0;
	letter-spacing: 2px;
	font-family: 'Open Sans',sans-serif;
	font-size: 24px;
}
/*---------------------------------------------------------------------------------------------------------------------
 * Refer to a replacement product
 *-------------------------------------------------------------------------------------------------------------------*/
.referTable {
	display: none;
	margin-bottom: 15px;
}
.referTable.show {
	display: table;
}
.referRow {
	display: table-row;
}
.referCell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.referText {
	width: 50%;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
}
.referArrow {
	font-size: 80px;
	width: 30%;
	color: #a4d7d6;
	letter-spacing: -10px;
}
.referProduct {
	width: 30%;
}
.referProduct .pw2-item-hover {
	-webkit-box-shadow: 0 0 12px 0 rgba(164,215,214,1);
	-moz-box-shadow: 0 0 12px 0 rgba(164,215,214,1);
	box-shadow: 0 0 12px 0 rgba(164,215,214,1);
}

@media only screen and (max-width: 600px) {
	.referTable, .referRow, .referCell {
		display: inline-block;
		width: 100%;
	}
	.referArrow {
		letter-spacing: 30px;
		font-size: 40px;
		padding-top: 50px;
		width: 85%;
		padding-left: 5%;
	}
	.referArrow i {
		transform: rotate(90deg);
		height: 20px;
	}
}
/*---------------------------------------------------------------------------------------------------------------------
 * brand-gwp-banner.php has inline CSS that overrides what's in product.css. Do we want to move it here?
 *-------------------------------------------------------------------------------------------------------------------*/

/**********************************************************************************************************************
 * END product.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * blog.css
 *********************************************************************************************************************/
body#ways-to-save-page #brand-header { /* This was originally in blog.css without the body#ways-to-save-page part, but there is no #brand-header in blog pages any more */
	margin: 5px 0 15px 0;
	width: 100%;
}
body#ways-to-save-page #brand-header img { /* This was originally in blog.css without the body#ways-to-save-page part, but there is no #brand-header in blog pages any more */
	margin: 30px 0;
}
#blogContainer {
	width: 100%;
	position: relative;
	float: left;
	font-family: 'Raleway',sans-serif;
}

#blog-article-page .blogTitles,
#blog-page .blogBriefTitle {
	font-size: 20px; /* was set for @media only screen and (max-width: 639px) */
	line-height: 24px; /* was set for @media only screen and (max-width: 639px) */
}

.blogBriefTitle h1 {
	font-size: 20px !important; /* was set for @media only screen and (max-width: 639px) */
	line-height: 24px !important; /* was set for @media only screen and (max-width: 639px) */
}

#clean-salon-shopby-page .blogBriefTitle span,
#blog-article-page .blogTitles span,
#blog-page .blogBriefTitle span {
	font-style: italic;
	font-size: 28px; /* was set for @media only screen and (max-width: 639px) */
}
/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: sidebar/bottom menu/archives
 *-------------------------------------------------------------------------------------------------------------------*/
#blog-article-page #myBtn,
#blog-page #myBtn {
	bottom: 108px/* !important*/; /* Move it up so it's above the fixed bottom search/archive menu */
}
#blogNav {
	/*width: 20%;*/
	display: inline-block;
	/*float: left;*/

	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #FFF;
	padding: 0 0 15px 0;
	margin: 0;
	z-index: 999;
	text-align: center;
	box-shadow: 0 -8px 8px 0 rgba(0,0,0,.15);
}
#blogNav form[name="searchformheader"] {
	padding: 5px 2px 0 2px;
}
#blogNav #blogSearch {
	width: 99%;
	/*
	border: 1px solid #ccc;
	border-top-color: rgb(204, 204, 204);
	border-right-color: rgb(204, 204, 204);
	border-bottom-color: rgb(204, 204, 204);
	border-left-color: rgb(204, 204, 204);
	*/
	border: 1px solid #a4d7d6;
	text-align: center;
	font-size: 16px;
	padding: 10px 0;
	border-radius: 6px;
	margin: 0 auto;
}
/*
#blogNav form[name="searchformheader"] input#blogSearch {
	border-color: #a4d7d6;
}
*/
#blogNav > div {
	position: relative;
	/*margin: 17px 0;*/
	/*padding: 15px;*/
	/*-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.1);*/

	/*margin: 0; needed?*/
	padding: 0 5% 0 5%;
	background: #fff;
	/*box-shadow: none; needed? */
}
#archiveContainer {
	background: #fff;
	/*display: inline-block;*/
	border-top: 1px solid #cacaca;
	visibility: hidden;
	/*height: 0;*/

	/*display: block; needed?*/
	text-align: left;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 0;
	overflow: scroll;
	transition: all .25s ease;
	width: 100%;
	/*padding-bottom: 0 !important; needed? */
}
#blogNav #blogMobileButtons {
	display: flex;
	padding: 4px 2px 2px 2px;
	border-top: 1px solid #cacaca;
}
#blogNavMobileButton,
#blogArcMobileButton {
	display: block;
	font-family: Verdana,sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 6px 2px;
	width: 100%;
	box-sizing: border-box;
	height: 36px;
}
#blogArcMobileButton {
	margin-left: 4px;
}
#blogNav form[name="searchformheader"] ~ #blogMobileButtons {
	border-top-color: transparent;
}
.blogFilterTitle {
	font-family: 'Raleway',sans-serif;
	font-size: 18px;
	width: 100%;
	text-align: center;
}
.blogFilterTitle span {
	font-family: 'Vollkorn',serif;
	font-size: 22px;
}
.archiveLink {
	font-size: 18px;
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	transition: all .15s ease;
}
.archiveYear {
	margin-top: 15px;
	width: 90%;
	padding: 3px 5%;
}
/* This is inline, uncomment section if removed there */
/*
.expandArrow {
	transition: all .25s ease;
	display: inline-block;
}
*/
/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: list of blog posts
 *-------------------------------------------------------------------------------------------------------------------*/
#blogPosts {
	position: relative;
	display: inline-block;
	/*width: 75%;*/
	margin: 25px 0 0 5%;
	float: left;
	width: 90%;
}
.blogPost {
	width: 100%;
	margin: 22px 0;
	float: left;
	position: relative;
}
.blogBriefTitle {
	border-bottom: 1px solid #cacaca;
	/*margin: 6px 5% 6px 5%;*/
	/*width: 60%;*/
	/*font-size: 32px;*/
	/*text-transform: uppercase;*/
	/*line-height: 28px;*/
	text-align: center;
	/*float: right; needed?*/
	color: #1f1f1f;
	font-family: Open Sans, sans-serif;

	/* this was set for @media only screen and (max-width: 639px) */
	font-size: 20px;
	line-height: 24px;

	width: 90%;
	margin: 0 5% 24px 5%;
}
.blogBriefTitleAccent {
	font-family: 'Vollkorn',serif;
	text-transform: none;
	/*font-size: 34px;*/
	font-style: italic;
	color: #1f1f1f;
	font-size: 22px;
}
.blogPost .blogPostBriefimg {
	/*width: 30%;*/
	/*height: 200px;*/
	/*-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.1);*/
	/*float: left; needed? */

	width: 100%;
	height: 250px/* !important*/;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.blogPost .blogBriefDescription {
	display: none;
}
.blogReadMore {
	background: #fff;
	display: inline-block;
	border-radius: 3px;
	border: 1px solid #cacaca;
	width: initial;
	padding: 8px 16px;
	font-size: 17px;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	text-transform: uppercase;
	margin: 30px 0 -47px 0;
	color: #1f1f1f;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.blogReadMore span {
	font-size: 24px;
	font-family: 'Vollkorn',serif;
	text-transform: none;
	font-style: italic;
	color: #1f1f1f;
}
.blogBriefDescription b,
.blogBriefDescription i,
.blogBriefDescription span,
.blogBriefBlurb b,
.blogBriefBlurb i,
.blogBriefBlurb span {
	font-family: 'Vollkorn',serif;
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
}
.blogPost .blogBriefBlurb,
.blogBriefBlurb p {
	width: 90%;
	text-align: center;
	font-family: 'Raleway',sans-serif;
	font-size: 22px;
	margin: 30px 5% 60px 5%;
	padding: 0 0 55px 0;
	border-bottom: 1px solid #cacaca;
	display: block;
	position: relative;
	/*float: left; needed?*/
	color: #1f1f1f;
}
/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: single blog post
 *-------------------------------------------------------------------------------------------------------------------*/
.blogPostFull {
	width: 100%;
	margin: 22px 0;
	float: left;
	position: relative;
	text-align: left !important;
}
.blogPostFull .blogPostBriefimg {
	width: 100%;
	height: 325px;
	box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	clear: both;
}
.blogPostFull .blogBriefDescription {
	width: 90%;
	text-align: center;
	font-family: 'Raleway',sans-serif;
	/*font-size: 22px;*/
	margin: 30px 5% 60px 5%;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #cacaca;
	display: block;
	position: relative;
	float: left;
	color: #1f1f1f;
	font-size: 16px; /* was set for @media only screen and (max-width: 639px) */
	line-height: 1.5;
}
.blogBriefDescription img {
	max-width: 100%;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}
.blogPostFull .blogBriefDescription a {
	font-family: 'Vollkorn',serif;
	/*font-size: 24px;*/
	font-weight: 400;
	text-decoration: underline;
	font-style: italic;
	line-height: 20px;
	color: #7ba1a0;
	font-size: 16px;/* was set for @media only screen and (max-width: 639px) */
}
/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: comments section
 *-------------------------------------------------------------------------------------------------------------------*/
#blog-article-page .commentsContainer { /* the first one is actually the related products section */
	margin: 0;
}
#blog-article-page div.commentsContainer + div.commentsContainer { /* this is the comments section */
	margin-top: 88px;
}
.blogNoComments {
	width: 100%;
	float: left;
	font-family: 'Vollkorn',serif;
	text-transform: none;
	font-size: 22px;
	color: #757575;
	text-align: center;
	margin: 12px 0;
}
.blogCommentInput {
	position: relative;
	width: 90%;
	margin: 24px 5% 6px 5%;
	text-align: center;
	float: left;
	font-family: 'Raleway',sans-serif;
	color: #1f1f1f;
}
.blogCommentForm {
	display: flex;
	flex-wrap: wrap;
}
.blogCommentForm > * {
	flex-grow: 1;
	box-sizing: border-box;
	width: 100%;
}
.blogCommentForm textarea {
	box-sizing: border-box;
	margin: 5px 0;
	width: 100%;
	height: 157px;
	resize: none;
}
.blogCommentForm .nameArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.blogCommentForm .nameArea > * {
	box-sizing: border-box;
	max-width: 48%;
}
.blogCommentForm input[type="text"],
.blogCommentForm input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	margin: 5px 0;
	font-size: 16px;
	text-align: center;
}
.blogCommentForm input[type="email"] {
	margin: 0;
}
.blogCommentForm .g-recaptcha,
.blogCommentForm button[type="submit"] {
	margin-top: 5px;
}
.blogComment {
	margin: 12px 5% 6px 5%;
	width: 90%;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	float: left;
	color: #1f1f1f;
	font-family: 'Raleway',sans-serif;
}
.blogComment span {
	font-family: 'Vollkorn',serif;
	text-transform: capitalize;
	font-size: 22px;
	color: #1f1f1f;
}
/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: Clean Salon
 *-------------------------------------------------------------------------------------------------------------------*/
#clean-salon-shopby-page .main-carousel > *,
.cleanSalon .main-carousel > * {
	padding-bottom: 10px;
}
.cleanSalon {
	margin: 0 0 60px 0;
}
.cleanSalon #brand-header.cleanSalonHeader {
	width: 100%;
	background: url('/images/cleanbeauty/header.jpg') center center no-repeat;
	background-size: cover;
	margin: 5px 0 15px 0;
}
.cleanSalon #brand-header.cleanSalonHeader img {
	max-width: 150px;
	margin: 30px 0;
}
#clean-salon-shopby-page .blogBriefTitle,
.cleanSalon .blogBriefTitle {
	margin-bottom: 6px;
}
.cleanSalon .csSptlightDesc {
	text-align: center;
	font-family: 'Open Sans',sans-serif;
	font-size: 16px;
	margin: 30px 0 30px 0;
	padding: 0 5% 20px 5%;
	width: 90%;
}
.cleanSalon #csBadgesTop {
	margin: 10px 0 0 0;
	text-align: center;
}
.cleanSalon #csBadgesTop a {
	display: inline-block;
	padding: 10px;
	position: relative;
	width: 70px;
	height: 70px;
}
.cleanSalon .cleansalonShop {
	border-radius: 6px;
	margin: 35px 12px 0 6px;
	/*margin: 6px 12px 0 6px;*/
	transition: all .25s ease;
}
.cleansalonShop:hover div,
.cleansalonShop:hover {
	text-decoration: none;
	color: #fff;
}
.cleansalonShop img {
	margin-top: -30px;
}

/* Same colors as the .cspip-<num> found in the widgets.css section so I'll apply them there
.cleanHover3839:hover { background-color: #772b53; }
.cleanHover3851:hover { background-color: #6a3800; }
.cleanHover3840:hover { background-color: #78a9da; }
.cleanHover3841:hover { background-color: #be8844; }
.cleanHover3852:hover { background-color: #3e618d; }
.cleanHover3842:hover { background-color: #d97e9f; }
.cleanHover3843:hover { background-color: #efa81f; }
.cleanHover3845:hover { background-color: #97ac65; }
.cleanHover3846:hover { background-color: #8ab3a0; }
.cleanHover3854:hover { background-color: #cb9983; }
.cleanHover3848:hover { background-color: #5f4da0; }
.cleanHover3850:hover { background-color: #53853f; }

Same colors but for borders so I'll move this to the widgets.css section where the other colors are set
.CSSBorder3839 { border: 2px solid #772b53; }
.CSSBorder3851 { border: 2px solid #6a3800; }
.CSSBorder3840 { border: 2px solid #78a9da; }
.CSSBorder3841 { border: 2px solid #be8844; }
.CSSBorder3852 { border: 2px solid #3e618d; }
.CSSBorder3842 { border: 2px solid #d97e9f; }
.CSSBorder3843 { border: 2px solid #efa81f; }
.CSSBorder3845 { border: 2px solid #97ac65; }
.CSSBorder3846 { border: 2px solid #8ab3a0; }
.CSSBorder3854 { border: 2px solid #cb9983; }
.CSSBorder3848 { border: 2px solid #5f4da0; }
.CSSBorder3850 { border: 2px solid #53853f; }
*/
.cleanSalon .commentsContainer {
	margin: 30px 0 0 0;
}
.cleanSalon .csIndexFooter {
	text-align: center;
}
#clean-salon-shopby-page .blogWidget,
.cleanSalon .blogWidget {
	width: 45%;
}
@media only screen and (max-width: 639px) {
	#clean-salon-shopby-page .blogWidget,
	.cleanSalon .blogWidget {
		width: 60%;
	}
}
@media only screen and (max-width: 429px) {
	#clean-salon-shopby-page .blogWidget,
	.cleanSalon .blogWidget {
		width: 90%;
	}
}

/*---------------------------------------------------------------------------------------------------------------------
 * blog.css: Clean Salon Ingredients Page
 *-------------------------------------------------------------------------------------------------------------------*/
.csMainTitle {
	border-bottom: 1px solid #cacaca;
	margin: 6px 5% 6px 5%;
	width: 90%;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 52px;
	text-align: center;
	color: #1f1f1f;
	display: inline-block;
	font-family: 'Raleway',sans-serif;
	font-weight: 400;
}
.csMainTitle span {
	font-family: 'Vollkorn',serif;
	text-transform: none;
	font-size: 28px;
	font-style: italic;
	/*color: #1f1f1f;*/
}
.cleanSampleAtt {
	margin: 30px 0 20px 0;
	text-align: center;
	border-bottom: 1px solid #cacaca;
}
.cleanSampleAttName {
	font-family: 'Raleway',sans-serif;
	/*display: table-cell;*/
	/*width: 30%;*/
	line-height: 28px;
	font-size: 24px;
	margin: 0;
	/*padding: 20px 0 60px 0;*/
	padding: 20px 0 20px 0;
	text-transform: capitalize;
	text-align: center;
	position: relative;

	display: inline-block;
	width: 100%;
	/*padding-bottom: 20px;*/
}
.cleanSampleAttName img {
	width: 90px;
	height: 90px;
	margin: 0 0 20px 0;
}
.cleanSamplePip {
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 50%;
	margin: 20px 10px 20px 0;
}
/* Same colors as the .cspip-<num> found in the widgets.css section so I'll apply them there
.cleanSamplePip3839 { background-color: #772b53; }
.cleanSamplePip3851 { background-color: #6a3800; }
.cleanSamplePip3840 { background-color: #78a9da; }
.cleanSamplePip3841 { background-color: #be8844; }
.cleanSamplePip3852 { background-color: #3e618d; }
.cleanSamplePip3842 { background-color: #d97e9f; }
.cleanSamplePip3843 { background-color: #efa81f; }
.cleanSamplePip3845 { background-color: #97ac65; }
.cleanSamplePip3846 { background-color: #8ab3a0; }
.cleanSamplePip3854 { background-color: #cb9983; }
.cleanSamplePip3848 { background-color: #5f4da0; }
.cleanSamplePip3850 { background-color: #53853f; }
*/
.cleanSampleAttDisc {
	font-family: 'Raleway',sans-serif;
	/*width: 70%;*/
	position: relative;
	/*display: table-cell;*/
	vertical-align: middle;
	font-size: 16px;
	text-align: left;
	/*margin: 0 5% 0 5%;*/
	margin: 0 5% 45px 5%;
	line-height: 22px;

	display: inline-block;
	width: 90%;
	/*margin-bottom: 45px;*/
}
.sampleAttButton,
.sampleAttLink {
	background: #fff;
	display: inline-block;
	border-radius: 3px;
	border: 1px solid #cacaca;
	width: initial;
	padding: 8px 16px;
	font-size: 17px;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
	text-transform: uppercase;
	margin: 30px 0 -20px 0;
	color: #1f1f1f;
	cursor: pointer;
	position: relative;
	/*z-index: 999;*/
}
.sampleAttLink {
	margin: 15px 0 30px 0;
}
.trimUp {
	/*margin-bottom: -51px;*/
	margin-bottom: -71px;
}
/* .blogTitles is in the widgets.css section so we need to override */
.cleanSalon .blogTitles {
	border-bottom: 1px solid #cacaca;
	margin: 6px 5% 6px 5%;
	width: 90%;
	/*font-size: 34px;*/
	text-transform: uppercase;
	/*line-height: 26px;*/
	text-align: center;
	color: #1f1f1f;
	display: inline-block;

	font-size: 20px;
	/*text-transform: uppercase;*/
	line-height: 24px;
}
.cleanSalon .blogTitles span {
	font-size: 28px;
	font-style: italic;
}

/**********************************************************************************************************************
 * END blog.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * review.css
 *********************************************************************************************************************/
 #review-prod-header a {
	 display: block;
	width: 100%;
	text-align: center;
}
#review-prod-header a img {
	margin: 15px auto 0;
	width: 175px;
}
#review-prod-header h1 {
	width: 96%;
	text-align: center;
	margin: 0 2% 10px 2%;
	font-size: 18px;
}
#review-prod-header h1 span {
	font-size: 12px;
	color: #606060;
}
#review-prod-content .prod_main_div {
	width: 98%;
	margin: 0 1%;
}
#review-form .prod_full {
	margin: 0 0 15px 0;
	border-bottom: 3px solid #d8d8d8;
	border-top: 3px solid #d8d8d8;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-radius: 5px;
}
/**********************************************************************************************************************
 * END review.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * about.css
 *********************************************************************************************************************/
.about_title {
	display: inline-block;
	/*width: 90%;*/
	/*font-size: 25pt;*/
	font-weight: normal;
	/*padding-top: 25px;*/
	/*margin: 0 5% 30px 5%;*/
	border: thin;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	/*position: relative; /* this was mobile only, but is it needed? */

	position: relative;
	font-size: 22px;
	width: 100%;
	padding-top: 15px;
	margin: 0 0 30px 0;
}

.about_text {
	/*width: 90%;*/
	display: inline-block;
	font-size: 11pt;
	/*text-align: left; needed? */
	/*padding: 20px 5% 7px;*/
	margin: 5px 0 20px 0;
	color: #555;

	width: 90%;
	padding: 0 5%;
}
.info_text {
	font-family: Open Sans, sans-serif;
	margin-top: 20px;
	padding:10px;

	font-size: 1.25em;
	/*line-height: 2em;*/
}
.about-section {
	font-size: 11pt;
	text-align: left;
	padding: 20px 5% 7px 0;
	color: #555;
	clear: both;
	margin:0 0.5em;
}
.about-section h1 {
	font-size: 25pt;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	padding-top: 25px;
	margin: 0 5% 30px 5%;
	line-height: 1;
}
.about-section h2 {
	font-size: 14pt;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	padding-bottom: 3px;
	margin: 1.5em 5px 1em 0;
}
.about-section h3 {
	font-size: 12pt;
	font-weight: normal;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	margin: 1em 0;
}
.about_check_list {
	list-style-image: url(/images/check-list.gif);
}
/* Clean Salon Glossary */
.gloss_box {
	margin-left: 25px;
}
.gloss_item {
	font-family: Open Sans, sans-serif;
	font-size: 16px;
	padding: 3px 0 3px 0;
	display: block;
}
.gloss_item:hover{
	font-weight: bold;
}
.gloss_text {
	margin: 5px 10px 15px 5px;
	padding: 0 0 5px 10px;
	font-size: 14px;
	border-left: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
}
/*---------------------------------------------------------------------------------------------------------------------
 * contact.css: Contact Us Page
 *-------------------------------------------------------------------------------------------------------------------*/
.contact_container {
	/*width: 49%;*/
	display: inline-block;
	background: #efefef;
	border-radius: 12px;
	padding: 15px 0;
	/*margin: 0 0 50px 0;*/
	width: 90%;
	margin: 0 5% 50px 5%;
}
.about_subtitle {
	width: 80%;
	font-size: 30px;
	padding-top: 0;
	padding-bottom: 24px;
	margin: 0 auto 0 auto;
	border: thin;
	font-family: 'Open Sans', sans-serif;
	border-bottom: 1px solid #ccc;
	text-align: center;
	position: relative;
}
.about_subtitle span {
	display: inline-block;
	font-size: 16px;
	padding: 5px 10px;
	border-radius: 6px;
	color: #fff;
	margin: 10px auto;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}
#contact-page .msg-box {
	margin: 0 0.5em 1em;
	border-radius: 6px;
}
#contact-page h1,
#contact-page h2{
	width: 90%;
	font-family: 'Open Sans',sans-serif;
	text-align: center;
	clear: both;
	font-weight: normal;
}
#contact-page h1 {
	font-size: 25pt;
	padding-top: 25px;
	margin: 0 5% 30px 5%;
	border: thin;
}
#contact-page h2 {
	font-size: 23pt;
	padding-top: 0;
	margin: 50px auto 0 auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom: 1px solid #ccc;
	border-left-width: thin;
}
.contact_open {
	background: #9ec18b;
}
.contact_closed {
	background: #757575;
}
.contact_form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
}
.contact_form > * {
	flex-grow: 1;
}
.contact_form .info_area,
.contact_form .message_area {
	padding: 0 1em;
}
.contact_form .message_area label,
.contact_form .message_area textarea {
	box-sizing: border-box;
	display: block;
	height: 100%;
	width: 100%;
}
.contact_form .info_area > label,
.contact_form .info_area > input {
	display: block;
	margin-bottom: 15px;
}
.contact_form .info_area input {
	box-sizing: border-box;
	width: 100%;
}
.contact_form .submit_area {
	padding-top: 15px;
	width: 100%;
	text-align: center;
}
.contact_form .about_head {
	font-size: 14pt;
	padding-bottom: 3px;
	padding-left: 5%;
	text-align: left;
	margin: 5px 5px 0 5px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
/*---------------------------------------------------------------------------------------------------------------------
 * contact.css: Guidelines Page
 *-------------------------------------------------------------------------------------------------------------------*/
.collapse{
	visibility:visible;
	opacity:1;
}
.label-link {
	line-height: 34px;
	cursor: pointer;
	text-decoration: underline;
}
.collapse + input{
	visibility:hidden;
	opacity:0;
}
.collapse + input + *{
	visibility:hidden;
	opacity:0;
}
.collapse+ input:checked + *{
	visibility:visible;
	opacity:1;
}
.gl-info {
	position: absolute;
	top: 0;
	left: 495px;
	width: 455px;
	height: 635px;
	padding: 0 15px;
	transition: all 0.25s ease;
	background: rgba(255,255,255,1);
}
.gl-highlight {
	font-weight: bold;
	color: #4f7837;
}
.gl-details {
	margin-left: 15px;
}
.gl-details a {
	color: #5fadad;
	text-decoration: underline;
}
.gl-info a {
	color: #5fadad;
	text-decoration: underline;
}
/*---------------------------------------------------------------------------------------------------------------------
 * contact.css: Salon Page
 *-------------------------------------------------------------------------------------------------------------------*/
.salon_container {
	margin: 10px;
	/*width: inherit; needed? */
	/*position: relative; needed? */
	/*float: left; needed? */
}
.salon_title {
	/*position: relative;
	float: left;
	width: 100%; needed? */
	height: 36px;
	/*padding-top: 0; needed? */
	font-weight: bold;
	border-bottom: 1px dotted #7f7f7f;
	background: #eee;
	text-align: center;
	color: #000;
	font-family: 'Vollkorn', serif;
	font-style: Italic;
	font-size: 32px;
}
.salon_block {
	/*position: relative;
	float: left;
	width: inherit; needed? */
	border: 1px solid #7f7f7f;

	/*margin: 0; needed?*/
	box-sizing: border-box;
	overflow: auto;
}
.salon_tri_two .salon_container:not(:first-child) {
	margin-top: 20px;
}
.salon_block .info_text {
	margin: 0;
	padding-top: 0;
}
.salon_table {
	width: 100%;
}
/* salon people profiles */
.salon_name {
	position: relative;
	float: left;
	padding: 10px 0 0 5px;
	font-family: 'Vollkorn',serif;
	font-size: 24px;
}
.salon_image {
	float: left;
	position: relative;
	border-right: 1px dotted #7f7f7f;
	width: 155px;
	height: 211px;
}
.salon_contact {
	position: relative;
	float: left;
	font-style: italic;
	padding: 10px 0 0 10px;
	text-align: left;
}
/**********************************************************************************************************************
 * END about.css
 *********************************************************************************************************************/
/**********************************************************************************************************************
 * checkout.css
 *********************************************************************************************************************/
#page-header nav {
	text-align: center;
}
nav ul {
	background: #a4d7d6;
	padding: 0 0;
	list-style: none;
	position: relative;
	display: inline-table;
	margin-bottom: 0;
}
nav ul li {
	float: left;
}
nav ul li a {
	display: block;
	padding: 6px 8px 2px 8px;
	color: #145d5b;
	text-decoration: none;
	cursor: pointer;
}
/**********************************************************************************************************************
 * END checkout.css
 *********************************************************************************************************************/

/**********************************************************************************************************************
 * Style Products Page
 *********************************************************************************************************************/
body#style-products-page .sw-link {
	display: none;
}