/**********************************************************************************************************************
 * 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
 *********************************************************************************************************************/
html {
	scroll-behavior: smooth;
}
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
}

/* --------------------------------------------------------------------------------------------------------------------
 * Auto-Replenish
 * ----------------------------------------------------------------------------------------------------------------- */
/* Popup Modal Dialog */
#arp-info-dialog {
	padding: calc(1em + 24px + 8px);
	background-color: #fff;
	border-radius: 24px;
	border: none;
}
#arp-info-dialog::backdrop {
	background-color: rgba(0,0,0,0.5); /* Matches the Afterpay info modal dialog popup */
}
#arp-info-dialog ul li:not(:last-child) {
	margin-bottom: .5em;
}
#arp-info-dialog .about-arp {
	margin-top: 1em;
}
#arp-info-dialog .about-arp a[href][target="_blank"]::after {
	content: "\00A0🗗";
	display: inline-block;
}
#arp-info-dialog-close-button {
	background: none;
	border: none;
	position: absolute;
	padding: 0;
	top: 1em;
	right: 1em;
	cursor: pointer;
}
/* Subscription Setup */
fieldset.arp-setup {
	border: 1px solid #FFF;
	border-radius: 6px;
	margin: 2em 0 1em 0;
	padding: 1em 1em 0 1em;
	position: relative;
	display: inline-block;
}
fieldset.arp-setup.working {
	opacity: .6;
}
fieldset.arp-setup:not(.working):disabled {
	display: none;
}
fieldset.arp-setup input.arp-subscribe {
	display: none;
}
fieldset.arp-setup .arp-setup-label { /* To move the label over the fieldset border */
	margin-left: -1.8em;
	margin-top: -1.8em;
	display: block; /* Must be a block for a negative margin-top to work */
}
fieldset.arp-setup .arp-setup-label-bg { /* To apply a white background over the fieldset border */
	background: #FFF;
	padding: 0 .4em .5em .4em;
}
fieldset.arp-setup label.arp-subscribe-toggle {
	cursor: pointer;
	font-size: clamp(.65em, 3.6vw, 1.1em);
}
#atc_lightbox fieldset.arp-setup label.arp-subscribe-toggle {
	font-size: 1em;
}
fieldset.arp-setup label.arp-subscribe-toggle::before {
	/*content: "\f0c8"; /* fa-square: radio-unchecked */
	content: "\f111"; /* fa-circle: radio-unchecked */
	font-family: "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
	font-size: 1.1em;
	border: 2px solid #a4d7d6;
	border-radius: 50%;
	color: #FFF;
}
fieldset.arp-setup label.arp-subscribe-toggle::after {
	content: " Save 10% and set up Auto-Replenish";
}
fieldset.arp-setup svg.info-icon {
	width: 16px;
	height: 16px;
	fill: none;
}
fieldset.arp-setup svg path.info-icon {
	d: path("M12.0659 3.93414C9.82035 1.68862 6.17965 1.68862 3.93413 3.93414C1.68862 6.17965 1.68862 9.82035 3.93414 12.0659C6.17965 14.3114 9.82035 14.3114 12.0659 12.0659C14.3114 9.82035 14.3114 6.17965 12.0659 3.93414ZM2.87347 2.87348C5.70477 0.0421747 10.2952 0.0421747 13.1265 2.87348C15.9578 5.70478 15.9578 10.2952 13.1265 13.1265C10.2952 15.9578 5.70478 15.9578 2.87348 13.1265C0.0421757 10.2952 0.0421741 5.70478 2.87347 2.87348ZM8 7.25C8.41421 7.25 8.75 7.58579 8.75 8V11C8.75 11.4142 8.41421 11.75 8 11.75C7.58579 11.75 7.25 11.4142 7.25 11V8C7.25 7.58579 7.58579 7.25 8 7.25ZM8 4C7.44772 4 7 4.44772 7 5C7 5.55228 7.44772 6 8 6C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4Z");
	fill: #666666;
	fill-rule: evenodd;
	clip-rule: evenodd;
}
fieldset.arp-setup .arp-plan-info {
	display: grid;
	grid-template-rows: 0fr;
	/*grid-template-columns: min-content;*/
	transition: grid-template-rows 0.5s ease-out;
	margin-top: .75em;
	overflow: hidden;
	padding-bottom: 1em; /* Put bottom padding here instead of on .arp-setup so it doesn't appear when this is hidden */
}
fieldset.arp-setup .arp-plan-info > div {
	overflow: hidden;
}
fieldset.arp-setup .arp-plan-info > div::before {
	content: "Automatically replenish every: ";
}
fieldset.arp-setup .arp-plan-info select {
	overflow: hidden;
}
fieldset.arp-setup input.arp-subscribe:checked + .arp-setup-label label.arp-subscribe-toggle::before {
	/*content: "\f192"; /* dot-circle-o: radio-checked */
	/*content: "\f14a"; /* fa-check-square: radio-checked */
	content: "\f058"; /* fa-check-circle: radio-checked */
	color: #a4d7d6;
}
fieldset.arp-setup.working label.arp-subscribe-toggle::before,
fieldset.arp-setup.working input.arp-subscribe:checked + .arp-setup-label label.arp-subscribe-toggle::before {
	content: "\f110"; /* fa-spinner */
	animation: fa-spin 1s infinite steps(8);
	border-color: transparent;
	border-radius: 0;
	color: inherit;
	display: inline-block;
}
fieldset.arp-setup input.arp-subscribe:checked ~ .arp-plan-info {
	grid-template-rows: 1fr;
}
fieldset.arp-setup button.open-arp-info-dialog {
	background: none;
	border: none;
	display: inline-block;
	padding: 0;
	cursor: pointer;
	vertical-align: top;
}
fieldset.arp-setup button.open-arp-info-dialog svg {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	fill: none;
}
fieldset.arp-setup:has(input.arp-subscribe:checked) {
	border-color: #AAAAAA;
}
/* Added-to-Bag popup adjustments */
#atc_lightbox fieldset.arp-setup {
	margin-right: .75em;
	margin-left: .75em;
}
#atc_lightbox fieldset.arp-setup .arp-setup-label {
	text-align: left;
}
#atc_lightbox fieldset.arp-setup .arp-plan-info > div {
	font-size: .9em;
}
.prod-arp-prior {
	display: none;
}
.prod-arp-prior.on {
	display: inline-block;
	color: #2C817F;
	font-size: 16.8px;
	text-decoration: underline;
}
form.product_submit .prod-arp-prior.on {
	margin-top: 2em;
}
#atc_lightbox .prod-arp-prior.on {
	margin: 1em auto;
}

/* --------------------------------------------------------------------------------------------------------------------
 * 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:has(> .auto-closing-in),
.msg-box.x {
	position: relative;
}
.msg-box.x > .x {
	position: absolute;
	font-style: normal;
	top: 0;
	right: 4px;
	cursor: pointer;
}
.msg-box > .auto-closing-in {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 1px;
	padding: 0;
	margin: 0;
	background: currentColor;
	opacity: .5;
}
/* 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/stocking.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/stocking.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; /* Don't restrict height in case text is long and wraps */
	min-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: .75em auto 0;
	box-sizing: border-box;
	padding: 0 3px;
	display: flex;
	column-gap: .25em;
	justify-content: space-between;
	align-items: center;
}
.pw2-item-hover .pw2-item-price {
	display: block;
}
.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;
	flex-grow: 4;
}
.pw2-price {
	/*text-align: right/* !important*/;
	text-align: center;
	font-weight: 700;
	/*margin-left: auto; /* to align right in a flex box */
}
.pw2-item-price del,
.pw2-price s {
	color: #757575;
	font-size: 10px;
	text-decoration: line-through;
}
.pw2-item-hover .pw2-item-price {
	height: auto;
}
.pw2-item-hover .pw2-item-price-sale .pw2-price {
	display: flex;
	flex-direction: column-reverse;
	line-height: 1.3em;
}
.pw2-item-hover .pw2-item-price-sale .pw2-price del {
	font-size: inherit;
}
.pw2-item-hover .pw2-price:not(:has(ins))::after,
.pw2-item-hover .pw2-price ins::after {
	content: " USD";
}
.pw2-item-price.is-kit del {
	text-decoration: line-through;
}
.pw2-item-details > .unbundled-price {
	color: #757575;
	text-align: center;
	width: 90%; /* match .pw2-item-price */
	padding: 0 3px; /* match .pw2-item-price */
	margin: .5em auto; /* horizonal margin match .pw2-item-price */
	font-size: .85em;
}
.pw2-item-details .unbundled-price:empty {
	display: none;
}
.pw2-item-details .unbundled-price:not(:empty)::after {
	content: " purchased separately";
}
.pw2-item-price ins {
	text-decoration: none;
}
.pw2-item-price-sale-green {
	color: #388627;
	font-weight: bold;
	font-size: 13px;
	line-height: .8em;
}
.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_qty #prod_price_qty_input + .buttons-area {
	margin-left: 2px; /* Same as .bccButton border so there appears to be equal spacing with the Add to Bag & Checkout Now buttons */
}
.prod_price_area {
	font-size: 18px;
	font-family: 'Open Sans',sans-serif;
	/*width: 45%/* !important*/;
	margin-left: 5%;
	margin-right: 5%;
	text-align: left; /* override center of .prod_price_qty and #prod-grid-info */
	/*float: left;*/
}
.prod_price_area > * {
	max-width: 100%; /* afterpay-placement */
}
.prod_price_area div {
	font-size: 22px;
	/*line-height: 44px;*/
	font-family: 'Open Sans',sans-serif;
}
.prod_price_area .prod-price.on-sale:not(.is-kit) {
	display: flex;
	flex-direction: column-reverse;
}
.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;
	color: #767676;
}
.prod_price_area .on-sale ins {
	display: inline;
	color: inherit;
}
.prod_price_area .price::after {
	content: " USD";
}
.prod_price_area del .price::after {
	content: "";
}
.prod_price_area .unbundled-price {
	font-size: .75em;
	margin: .5em 0;
	display: block;
}
.prod_price_area .unbundled-price:empty {
	display: none;
}
.prod_price_area .unbundled-price::after {
	content: " if purchased separately";
}
#prod_price_qty_input {
	height: 46px;
	width: 75px;
	text-align: center;
	font-size: 18px;
	/*padding-left: 5%;*/
}
.prod_price_cart .buttons-area {
	display: inline-block;
	box-sizing: border-box;
	height: 50px;
	margin-top: 10px;
	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*/;
	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;
	line-height: normal;
	margin-top: 1em;
}
#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;
}
/* Brand page reviews */
#reviews {
	display: inline-block;
	width: 100%;
	font-size: 24px;
	text-align: center;
}
.brand-review {
	position: relative;
	clear: both;
	padding-top: 30px;
	width: 75%;
	border-top: 1px solid #ccc;
	margin: 0 12%;
}
.brand-review .review-text span {
	font-size: 12px;
}
.brand-reviews-footer {
	position: relative;
	clear: both;
	margin: 30px .5% 0;
	padding-top: 30px;
	width: 99%;
	border-top: 1px solid #ccc;
	text-align: center;
}
/**********************************************************************************************************************
 * 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;
}