/* stylelint-disable declaration-no-important */

/* Air Brush Selector
=========================================== */

@-webkit-keyframes fadeInDown {

	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInDown {

	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

.animated {
	-webkit-animation-duration: 250ms;
	animation-duration: 250ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.airbrush-step-0 .animated {
	transition-delay: 750ms;
}

/* Landing */

.air-brush-selector-landing {
	background-color: #000000;
	background-position: center right;
	background-size: cover;
	color: #FFFFFF;
	height: auto;
	margin-bottom: 3.75rem;
	padding: 2.5rem 1.25rem;
	position: relative;
	transition: all 0.15s linear;
	width: 100%;
	z-index: 300;
}

.ab--landing__title {
	color: #FFFFFF;
	font-size: 1.75rem;
	letter-spacing: 0.025em;
	line-height: 1.25;
	margin-bottom: 0;
}

.ab--landing__btn {
	border-radius: 0;
	color: #FFFFFF;
	font-size: 0.75rem;
	height: auto;
	letter-spacing: 0.1em;
	margin-top: 3.75rem;
	max-height: 3.75rem;
	max-width: 18.75rem;
	padding: 1rem 2.5rem;
}

.ab--landing__btn:hover {
	background: #F7EC23;
	border-color: #F7EC23;
	color: #000000;
}

.air-brush-selector-landing__image {
	display: none;
}

/* Selector */

.ab__close {
	color: #000000;
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	z-index: 2002;
}

.ab__close:before {
	font-weight: 700;
}

#js-AirBrush-Selector {
	background: #CCCCCC;
	height: 100%;
	height: 0;
	left: 0;
	opacity: 0;
	position: fixed;
	top: -100vh;
	transition: opacity 550ms linear;
	transition-delay: 250ms;
	width: 100%;
	z-index: 2002;
}

#js-AirBrush-Selector.ab_open {
	height: 100%;
	opacity: 1;
	top: 0;
}

/* Templates */

#js-AirBrush-Selector .swiper-slide {
	background: rgb(153,225,208);
	background: linear-gradient(155deg, rgba(153,225,208,1) 20%, rgba(255,128,222,1) 80%);
	overflow: auto;
}

.airbrush-template {
	height: 100%;
	width: 100%;
}

.airbrush-template__inner {
	height: 100%;
	left: 0;
	margin: auto;
	max-width: 87.5rem;
	position: absolute;
	right: 0;
	text-align: center;
	width: 100%;
}

.airbrush-template__title {
	color: #000000;
	font-size: 1.5rem;
	letter-spacing: 0.025em;
	margin-top: 12vh;
	padding: 0 1.25rem;
}

.airbrush-template__options {
	padding-bottom: 15vh;
	padding-top: 2rem;
}

.airbrush-template__option {
	display: inline-block;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	margin: 0 auto;
}

.airbrush-template__option:not(:last-child) {
	margin-bottom: 1.25rem;
}

.airbrush-template__radio {
	display: none !important;
}

.airbrush-template__option-image {
	display: block;
	margin: auto auto 2rem auto;
}

.airbrush-template__option-name {
	display: inline-block;
}

/* Template 0 */

.airbrush-step-0 .airbrush-template__option-image {
	max-width: 20.625rem;
}

.template-0__option-name {
	position: relative;
}

.template-0__option-text {
	font-size: 0.875rem;
	padding: 1.1875rem 2rem;
	position: relative;
	z-index: 2;
}

.airbrush-template__radio:checked ~ .template-0__option-name .btn,
.airbrush-template__radio:checked ~ .template-2__option-wrap .template-2__option-text:after {
	background-color: #F7EC23;
	border-color: #F7EC23;
	color: #000000;
}

/* Template 1 */

.template-1__form {
	padding-bottom: 15vh;
}

.template-1__main-image img {
	margin: 3rem 0 0;
	max-height: 10.625rem;
}

.template-1-main__image-noselection {
	opacity: 0.5;
}

.template-1__option {
	margin: 0.625rem auto;
	padding: 0 1.25rem;
	width: 100%;
}

.template-1__option label {
	width: 100%;
}

.template-1__option-name {
	border: 0.125rem solid #000000;
	height: 4.375rem;
	line-height: 4.375rem;
	max-width: 18.75rem;
	text-align: center;
	transition: all 0.15s linear;
	width: 100%;
}

.airbrush-template__radio:checked ~ .template-1__option-name,
.template-1__option:hover .template-1__option-name {
	background-color: #FFE300;
	border-color: #FFE300;
}

/* Template 2 */

.template-2__title {
	margin-bottom: 3rem;
}

.template-2__label-wraps {
	margin: auto;
	max-width: 95%;
	padding: 0 1.25rem;
	width: 83.75rem;
}

.template-2__labels {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.template-2 .airbrush-template__options {
	margin-top: 1.5rem;
}

.template-2__option {
	display: block;
	margin: 2rem 0 0;
	width: 100%;
}

.template-2__option-name {
	position: relative;
}

.template-2__option-name:before,
.template-2__option-name:after {
	background: #000000;
	content: "";
	position: absolute;
}

.template-2__option-name:before {
	height: 1.75rem;
	left: 0;
	margin: auto;
	right: 0;
	top: -2.5625rem;
	width: 0.125rem;
}

.template-2__option-name:after {
	height: 0.125rem;
	left: 0;
	margin: auto;
	right: 0;
	top: -1.75rem;
	width: 100%;
}

.template-2__option:first-child .template-2__option-name:after {
	left: 50%;
}

.template-2__option:last-child .template-2__option-name:after {
	left: -100%;
}

.template-2__option-image {
	display: inline-block;
	margin-bottom: 4rem;
	opacity: 0;
	transition: opacity 0.15s linear;
}

.airbrush-template__radio:checked ~ .template-2__option-wrap .template-2__option-image,
.template-2__option:hover .template-2__option-image {
	opacity: 1;
}

.template-2__option-text,
.template-2__option-text-above {
	position: relative;
}

.template-2__option-text:after {
	bottom: -0.0625rem !important;
}

.template-2__option-text-above {
	z-index: 3;
}

.rzslider .rz-bar:before, 
.rzslider .rz-bar-wrapper:before, 
.rzslider .rz-bar-wrapper:after {
	height: 56px !important;
}

.rzslider .rz-bar-wrapper:before, 
.rzslider .rz-bar-wrapper:after {
	top: 3px !important;
}

.rzslider .rz-bar:before {
	top: -28px !important;
	transform: translateX(0) !important;
}

.rzslider .rz-pointer {
	height: 32px !important;
	top: 0 !important;
	width: 2rem !important;
}

.rzslider .rz-pointer[ aria-valuenow="1" ] {
	margin-left: -10px;
}

.rzslider .rz-pointer[ aria-valuenow="11" ] {
	margin-left: 8px;
}

.rzslider .rz-pointer[ aria-valuenow="22" ] {
	margin-left: 10px;
}

.rzslider .rz-tick:nth-child(11) .rz-tick-legend,
.rzslider .rz-tick:nth-child(22) .rz-tick-legend {
	margin-left: 24px;
}

/* Template 3 */

.template-3__form {
	align-items: flex-start;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-top: 3rem;
	padding: 0 1.25rem 10vh;
}

.airbrush-template__choice {
	display: inline-block;
	flex-basis: 100%;
	margin: 0 auto 2.5rem;
	max-width: 18.75rem;
}

.airbrush-template__choice-name {
	border: 0.125rem solid #000000;
	cursor: pointer;
	display: inline-block;
	font-size: 0.875rem;
	height: 4.375rem;
	letter-spacing: 0.1em;
	line-height: 4.375rem;
	width: 100%;
}

.template-3__option-name {
	background: #FFFFFF;
	border-top: 0.0625rem solid #E3E3E3;
	cursor: pointer;
	font-size: 0.875rem;
	height: 4.375rem;
	letter-spacing: 0.1em;
	line-height: 4.375rem;
	width: 100%;
}

.template-3__option-name:first-child {
	border-top: 0;
}

.airbrush-template__choices {
	display: none;
	opacity: 0;
}

.template-3__option-label {
	display: block;
}

.airbrush-template__choice-name.airbrush-template__choices-shown,
.template-3__choice:hover .airbrush-template__choice-name,
.airbrush-template__choice-selected,
.template-3__option-name:hover,
.airbrush-template__radio:checked ~ .template-3__option-name {
	background: #FFE300;
	border-color: #FFE300;
}

.airbrush-template__choices.airbrush-template__choices-shown {
	display: block;
	opacity: 1;
}

.airbrush-template__choices.airbrush-template__choices-shown label {
	margin-bottom: 0;
	width: 100%;
}

/* Template 4 */

.airbrush-step-4 .airbrush-template__option-image {
	max-width: 14.6875rem;
}

.template-4__option-name {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
}

.template-4__option-descrip {
	color: #000000;
	display: block;
	font-size: 1rem;
	font-weight: 400;
	opacity: 0;
	position: relative;
	text-align: center;
	text-transform: none;
	top: 0.625rem;
	
	transition: all 0.15s linear;
}

.airbrush-template__radio:checked ~ .template-4__option-descrip {
	opacity: 1;
	top: 0.125rem;
}

/* Swiper */

.swiper-container {
	color: #000000;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.airbrush-selector-navigation {
	align-items: center;
	background: #FFFFFF;
	bottom: 0;
	color: #000000;
	display: flex;
	font-size: 0.8125rem;
	height: 5rem;
	letter-spacing: 0.1em;
	padding: 0 1.25rem;
	position: fixed;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.2, 0.5, 0.5, 1);
	width: 100%;
	z-index: 9999999;
}

.airbrush-selector-button_wrap {
	display: flex;
	float: left;
	width: 50%;
}

.airbrush-selector-button_wrap-next {
	justify-content: flex-start;
}

.airbrush-selector-button_wrap-prev {
	justify-content: flex-end;
}

.airbrush-button-next,
.airbrush-button-prev {
	cursor: pointer;
	flex-basis: 100%;
	max-width: 11.875rem;
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;
}

.airbrush-button-next {
	margin-left: 0.5rem;
}

.airbrush-button-next > span {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.airbrush-button-next .ng-scope {
	position: relative;
	width: 100%;
}

.airbrush-button-prev {
	margin-right: 0.5rem;
}

.airbrush-button-prev .btn-arrow {
	transform: rotate(180deg);
}

.airbrush-button-prev:hover .btn-arrow,
.airbrush-button-prev:focus .btn-arrow {
	transform: rotate(180deg) translateX(0.25rem);
}

#js-AirBrush-Selector .swiper-pagination {
	bottom: auto;
	height: 3.75rem;
	padding-top: 3.125rem;
	top: 0;
}

.airbrush-button-next.swiper-button-disabled,
.airbrush-button-next.airbrush-button-disabled,
.airbrush-button-prev.swiper-button-disabled {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

#js-AirBrush-Selector .swiper-pagination-bullet {
	background-color: #81BCAD;
	height: 0.5rem;
	opacity: 1;
	position: relative;
	width: 0.5rem;
}

#js-AirBrush-Selector .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #317B7B;
}

#js-AirBrush-Selector .swiper-pagination-bullet.swiper-pagination-fake_bullet {
	cursor: not-allowed;
	pointer-events: none;
}

.airbrush-button-hidden {
	display: none !important;
}

/* Category Landing Page */

.ab_selector_landed #status {
	background: none;
	height: auto;
	width: auto;
}

.ab-ctgy-header {
	font-size: 2.8125rem;
	margin-bottom: 8.5rem;
	margin-top: 6.5rem;
}

.ab_selector_landed .sub-nav,
.ab_selector_landed .sub-nav-filters {
	display: none;
}

.ab-category-product-name a {
	font-weight: 700;
}

p.category-product-descrip {
	color: #585858;
	margin: 1.5rem 0;
}

#js-AIRBRUSH_SELECTOR .category-product-layout {
	margin-bottom: 3.75rem !important;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 3.75rem;
}

#js-AIRBRUSH_SELECTOR .category-product:not(:last-child) {
	margin-bottom: 2.5rem;
}

#js-AIRBRUSH_SELECTOR .category-product:after {
	background: none;
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	transition: all 0.8s cubic-bezier(0.1, 0.7, 0.3, 1);
	width: 100%;
	z-index: 0;
}

.airbrush-button-complete {
	padding-bottom: 0.875rem;
	padding-top: 0.875rem;
}

@media screen and ( min-width: 48em ) {

	.air-brush-selector-landing {
		display: flex;
		flex-flow: row nowrap;
		margin-bottom: 5.625rem;
		padding: 0;
	}

	.air-brush-selector-landing__inner {
		flex-basis: 60%;
		padding: 3.75rem 2.5rem 3.75rem 1.25rem;
	}

	.air-brush-selector-landing__image {
		display: block;
		flex-basis: 40%;
	}

	.airbrush-template__title {
		font-size: 2rem;
		line-height: 1.25;
		margin-top: 0;
	}

	.airbrush-template__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}

	.airbrush-template__options {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		margin-bottom: 0;
	}

	.template-1 .airbrush-template__options,
	.template-3 .airbrush-template__options {
		flex-flow: row wrap;
	}

	.template-2__label-wraps {
		padding: 0 2.5rem;
	}

	.rzslider .rz-pointer[ aria-valuenow="11" ] {
		margin-left: 15px;
	}

	.rzslider .rz-tick:nth-child(11) .rz-tick-legend{
		margin-left: 44px;
	}

	.rzslider .rz-tick:nth-child(22) .rz-tick-legend {
		margin-left: 30px;
	}

	#js-AIRBRUSH_SELECTOR .category-product-layout {
		margin-bottom: 5.625rem !important;
	}

	#js-AIRBRUSH_SELECTOR .category-product {
		height: 34.375rem !important;
		margin-left: 0;
		width: 48% !important;
	}

	#js-AIRBRUSH_SELECTOR .category-product:not(:nth-child(even)) {
		margin-right: 4%;
	}

	.airbrush-selector-navigation {
		height: 6.25rem;
	}

	.airbrush-button-next {
		margin-left: 1rem;
	}

	.airbrush-button-prev {
		margin-right: 1rem;
	}

	.airbrush-button-complete {
		flex-basis: auto;
		max-width: none;
		padding-bottom: 1.25rem;
		padding-top: 1.25rem;
	}
}

@media screen and ( min-width: 60em ) {

	#js-AirBrush-Selector .swiper-wrapper {
		height: calc(100vh - 6.25rem);
	}

	#js-AirBrush-Selector .swiper-slide {
		background: rgb(153,225,208);
		background: linear-gradient(165deg, rgba(153,225,208,1) 30%, rgba(255,128,222,1) 100%);
	}

	.ab__close {
		font-size: 2.5rem;
		right: 2.25rem;
		top: 2rem;
	}

	#js-AirBrush-Selector .swiper-pagination-bullet {
		height: 1.125rem;
		margin: 0 0.5625rem;
		width: 1.125rem;
	}

	#js-AIRBRUSH_SELECTOR .main-content {
		margin-bottom: 0;
	}

	.air-brush-selector-landing__inner {
		padding: 12.5rem 2.5rem 12.5rem 1.25rem;
	}

	.ab--landing__title {
		font-size: 2.25rem;
	}

	.airbrush-template__title {
		margin-bottom: 2rem;
		padding: 0 2.5rem;
	}

	.airbrush-template__inner {
		justify-content: flex-start;
		padding-top: 7.5rem;
	}

	.airbrush-template__options {
		padding-bottom: 0;
		padding-top: 0;
	}

	#js-AirBrush-Selector .swiper-pagination {
		height: auto;
	}

	.airbrush-selector-button_wrap-prev {
		justify-content: flex-end;
	}

	.airbrush-button-prev {
		margin-right: 1.25rem;
	}

	.airbrush-selector-button_wrap-next {
		justify-content: flex-start;
	}

	.airbrush-button-next {
		margin-left: 1.25rem;
	}

	.airbrush-button__icon {
		font-size: 1.875rem;
		top: 0.25rem;
	}

	.airbrush-step-1 .airbrush-template__options {
		padding: 0 1.25rem;
	}

	.airbrush-step-0 .airbrush-template__option {
		margin: 0;
	}

	.airbrush-step-1 .airbrush-template__option {
		margin: 2rem 0 0;
	}

	.template-1__main-image img {
		margin: 0 0 1rem;
	}

	.template-1__option {
		padding: 0 0.75rem;
	}

	.airbrush-template__choice {
		margin: 0.75rem;
	}

	.airbrush-template__option-image {
		margin-bottom: 2.25rem;
	}

	.rzslider .rz-pointer[ aria-valuenow="11" ] {
		margin-left: 20px;
	}

	#js-AIRBRUSH_SELECTOR .category-product {
		width: 31% !important;
	}

	#js-AIRBRUSH_SELECTOR .category-product:not(:nth-child(even)) {
		margin-right: 0;
	}

	#js-AIRBRUSH_SELECTOR .category-product:not(:nth-child(3n)) {
		margin-right: 3.4%;
	}

	.template-0__option:hover .template-0__option-name:after,
	.template-2__option:hover .template-2__option-wrap .template-2__option-text:after {
		background: #F7EC23;
		width: 120%;
	}

	.template-3__form {
		margin-top: 0;
	}

	.template-4__option:hover .template-4__option-descrip {
		opacity: 1;
		top: 0.125rem;
	}
}

@media screen and ( min-width: 80em ) {

	.air-brush-selector-landing {
		height: calc(100vh - 10.6875rem);
	}

	.air-brush-selector-landing__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 0 2.5rem;
	}

	.ab--landing__title {
		font-size: 3.25rem;
	}

	.airbrush-template__title {
		padding: 0 12.5rem;
	}

	.rzslider .rz-pointer[ aria-valuenow="11" ] {
		margin-left: 26px;
	}
}

@media screen and ( min-width: 87.5em ) {

	.air-brush-selector-landing {
		height: calc(100vh - 6.25rem);
	}

	.air-brush-selector-landing__inner {
		padding: 0 5rem 0 3.75rem;
	}

	.template-1__main-image img {
		margin-bottom: 3rem;
	}

	.template-4__option-descrip {
		padding: 0 2rem;
	}

	.rzslider .rz-pointer[ aria-valuenow="11" ] {
		margin-left: 29px;
	}
}

@media screen and ( min-width: 90em ) {

	#js-AirBrush-Selector .swiper-pagination {
		padding-top: 7.5rem;
	}

	.airbrush-template__inner {
		padding-top: 11.25rem;
	}

	.airbrush-template__title {
		font-size: 3rem;
		margin-bottom: 5rem;
	}
}

@media screen and ( min-width: 105em ) {

	.air-brush-selector-landing {
		margin-bottom: 13.75rem;
	}

	.air-brush-selector-landing__inner {
		padding: 0 9.375rem;
	}

	#js-AIRBRUSH_SELECTOR .category-product-layout {
		padding-left: 0;
		padding-right: 0;
		top: 0;
	}
}