/*
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: #000;
	background-size: cover;
	background-position: center right;
	margin-bottom: 60px;
	position: relative;
	/*padding: 10rem 5rem;*/
	padding: 40px 20px;
	/*height: 100vh;*/
	height: auto;
	color: #fff;
	width: 100%;
	z-index: 300;
	/*top: 100px;*/

	transition: all .15s linear;
}
.air-brush-selector-landing__inner {
	/*position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;*/
}
.ab--landing__title {
	/*font-size: 3.25rem;*/
	font-size: 28px;
	color: #fff;
	letter-spacing: 0.025em;
	line-height: 1.25;
	margin-bottom: 0;
}
.ab--landing__btn {
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	height: auto;
	max-height: 60px;
	padding: 1rem 2.5rem;
	border-radius: 0;
	color: #fff;
	margin-top: 60px;
	max-width: 300px;
}
.ab--landing__btn:hover {
	background: #f7ec23;
	border-color: #f7ec23;
	color: #000;
}
.air-brush-selector-landing__image {
	display: none;
	/*position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	max-width: 45vw;
	z-index: 1;*/
}

/* Selector */
.ab__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 1.5rem;
	z-index: 2002;
	cursor: pointer;
}
#js-AirBrush-Selector {
	position: fixed;
	z-index: 2002;
	left: 0;
	height: 100%;
	width: 100%;
	height: 0;
	top: -100vh;
	opacity: 0;
	background: #ccc;
	transition-delay: 250ms;
	transition: opacity 550ms linear;
}
#js-AirBrush-Selector.ab_open {
	top: 0;
	opacity: 1;
	height: 100vh;
}

/* Templates */
#js-AirBrush-Selector .swiper-slide {
	overflow: auto;
}
.airbrush-template {
	height: 100%;
	width: 100%;
}
.airbrush-template__inner {
	/*display: flex;
	flex-flow: column nowrap;
	justify-content: center;*/
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	width: 100%;
	max-width: 1400px;
	height: 100%;
}
.airbrush-template__image {
	/*margin-top: 2rem;*/
}
.airbrush-template__title {
	/*margin-top: 6rem;*/
	/*font-size: 2.75rem;*/
	margin-top: 15vh;
	font-size: 18px;
	letter-spacing: 0.025em;
	color: #000;
	padding: 0 20px;
}
@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */
	.airbrush-template__options {
		padding-bottom: 15vh;
	}
}
@supports not (-webkit-overflow-scrolling: touch) {
	.airbrush-template__options {
		/* CSS for other than iOS devices */
		padding-bottom: 10vh;
	}
}
/*.airbrush-template__options {
	padding-bottom: 15vh;
}*/
.airbrush-template__option {
	display: inline-block;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	/*margin: 4rem 4rem 0;*/
	margin: 32px auto;
}
.airbrush-template__radio {
	display: none !important;
}
.airbrush-template__option-image {
	display: block;
}
.airbrush-template__option-name {
	display: inline-block;
}
.airbrush-template__option-image {
	margin: auto auto 32px auto;
}

/* Template 0 */
.airbrush-step-0 {
	background: #80B3C8;
}
.template-0__option-name  {
	position: relative;
}
.template-0__option-text {
	position: relative;
	z-index: 2;
}
.airbrush-template__radio ~ .template-0__option-name:after,
.airbrush-template__radio ~ .template-2__option-wrap .template-2__option-text:after  {
	content: "";
	background: rgba(0,0,0,0);
	position: absolute;
	bottom: 2px;
	left: -10%;
	z-index: 1;
	width: 0%;
	height: 0.625rem;
	transition: all .15s linear;
}
.airbrush-template__radio:checked ~ .template-0__option-name:after,
.template-0__option:hover .template-0__option-name:after,
.airbrush-template__radio:checked ~ .template-2__option-wrap .template-2__option-text:after,
.template-2__option:hover .template-2__option-wrap .template-2__option-text:after {
	background: #f7ec23;
	width:120%;
}
/* Template 1 */
@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */
	.template-1__form {
		padding-bottom: 20vh;
	}
}
@supports not (-webkit-overflow-scrolling: touch) {
	/* CSS for other than iOS devices */
	.template-1__form {
		padding-bottom: 15vh;
	}
}
.airbrush-step-1 {
	background: #C7BAA7;
}
.template-1__main-image img {
	margin: 3rem 0;
	max-height: 170px;
}
.template-1-main__image-noselection {
	opacity: .5;
}
.template-1__option {
	margin: 10px auto;
	/*margin-left: 1rem;
	margin-right: 1rem;*/
	padding: 0 20px;
	width: 100%;
}
.template-1__option label {
	width: 100%;
}
.template-1__option-name {
	border: 2px solid #000;
	width: 100%;
	max-width: 300px;
	text-align-center;
	line-height: 70px;
	height: 70px;
	transition: all .15s linear;
}
.airbrush-template__radio:checked ~ .template-1__option-name,
.template-1__option:hover .template-1__option-name {
	border-color: #FFE300;
	background-color: #FFE300;
}

/* Template 2 */
.airbrush-step-2 {
	background: #AFBD99;
}
.template-2__title {
	margin-bottom: 4rem;
}
.template-2__label-wraps {
	/*width: 860px;*/
	width: 860px;
	max-width: 95%;
	margin: auto;
	padding: 0 20px;
}
.template-2__labels {
	justify-content: space-between;
	display: flex;
	width: 100%;
}
.template-2 .airbrush-template__options {
	margin-top: 3rem;
}
.template-2__option {
	margin: 2rem 0 0;
	width: 100%;
	display: block;
}
.template-2__option-name {
	position: relative;
}

.template-2__option-name:before,
.template-2__option-name:after {
	content: "";
	position: absolute;
	background: #000;
}
.template-2__option-name:before {
	height: 28px;
	width: 2px;
	top: -41px;
	margin: auto;
	left: 0;
	right: 0;
}
.template-2__option-name:after {
	width: 100%;
	height: 2px;
	top: -28px;
	margin: auto;
	left: 0;
	right: 0;
}
.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 {
	margin-bottom: 4rem;
	display: inline-block;
	opacity: 0;
	transition: opacity .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: -1px !important;
}
.template-2__option-text-above {
	z-index: 3;
}

/*.rzslider .rz-pointer:before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	bottom: 100%;
	height: 150px;
	width: 150px;
	left: -75px;
	margin: auto auto 1.5rem auto;
}*/
.rzslider .rz-bar:before {
	transform: translateX(-6px) !important;
}

/* Template 3 */
.airbrush-step-3 {
	background-color: #80B3C8;
}
.template-3__form {
	align-items: flex-start;
	justify-content: center;
	display: flex;
	flex-flow: row wrap;
	margin-top: 3rem;
	padding: 0 20px 0;
}
@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */
	.template-3__form {
		padding-bottom: 15vh;
	}
}
@supports not (-webkit-overflow-scrolling: touch) {
	/* CSS for other than iOS devices */
	.template-3__form {
		padding-bottom: 10vh;
	}
}
.airbrush-template__choice {
	/*width: 300px;*/
	flex-basis: 100%;
	max-width: 300px;
	display: inline-block;
	/*margin: 0.75rem;*/
	margin: 0 auto 40px;
}
.airbrush-template__choice-name {
	display: inline-block;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	border: 2px solid #000;
	width: 100%;
	line-height: 70px;
	height: 70px;
	cursor: pointer;
}
.template-3__option-name {
	width: 100%;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	border-top: 1px solid #E3E3E3;
	width: 100%;
	line-height: 70px;
	height: 70px;
	background: #fff;
	cursor: pointer;
}
.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 {
	opacity: 1;
	display: block;
}
.airbrush-template__choices.airbrush-template__choices-shown label {
	margin-bottom: 0;
	width: 100%;
}

/* Template 4 */
.airbrush-step-4 {
	background: #AFBD99;
}
.airbrush-step-4 .airbrush-template__option-image {
	max-width: 70%;
}
.template-4__option-name {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
}
.template-4__option-descrip {
	position: relative;
	top: 10px;
	transition: all .15s linear;
	opacity: 0;
	display: block;
	font-size: 1rem;
	text-align: center;
	color: #585858;
	text-transform: none;
	font-weight: normal;
}
.template-4__option:hover .template-4__option-descrip,
.airbrush-template__radio:checked ~ .template-4__option-descrip {
	opacity: 1;
	top: 2px;
}

/* Swiper */
.swiper-container {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}
.airbrush-selector-navigation {
	background: #f4f4f4;
	position: absolute;
	width: 100%;
	/*height: 60px;*/
	/*bottom: 4rem;*/
	bottom: 0;
	text-align: center;
	z-index: 9999999;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: #000;
	display: flex;
	align-items: center;
}
@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */
	.airbrush-selector-navigation {
		height: 104px;
	}
}
@supports not (-webkit-overflow-scrolling: touch) {
	/* CSS for other than iOS devices */
	.airbrush-selector-navigation {
		height: 60px;
	}
}
.airbrush-selector-button_wrap {
	display: flex;
	justify-content: center;
	width: 50%;
	float: left;
}
.airbrush-button-next {
	cursor: pointer;
	font-size: 0.6875rem;
	/*margin-left: 1.25rem;*/
}
.airbrush-button-next > span {
	position: relative;
}
.airbrush-button-next > span:before {
	content: "";
	background: rgba(0,0,0,0);
	position: absolute;
	bottom: -3px;
	left: -8%;
	z-index: 1;
	width: 0%;
	height: 0.625rem;
	transition: all .15s linear;
	z-index: -1;
}
.airbrush-button-next > span:before {
	background: #f7ec23;
	width: 100%;
}
.airbrush-button-disabled.airbrush-button-next > span:before {
	width: 0;
}
.airbrush-button-next_real > span:before {
	display: none;
}
.airbrush-button-prev {
	cursor: pointer;
	/*margin-right: 1.25rem;*/
	opacity: .60;
	font-size: 0.6875rem;
	position: relative;
	top: -1px;
}
.airbrush-button__icon {
	margin: 0 0.75rem;
	/*font-size: 1.875rem;*/
	font-size: 1rem;
	position: relative;
	/*top: 5px;*/
	top: 0;
}
#js-AirBrush-Selector .swiper-pagination {
	bottom: auto;
	/*top: 7rem;*/
	top: 0;
	background: #f4f4f4;
	height: 60px;
	padding-top: 20px;
}

.airbrush-button-next.swiper-button-disabled,
.airbrush-button-next.airbrush-button-disabled,
.airbrush-button-prev.swiper-button-disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}
#js-AirBrush-Selector .swiper-pagination-bullet {
	height: 10px;
	width: 10px;
	background-color: #000;
	position: relative;
	opacity: 1;
}
#js-AirBrush-Selector .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #FFE300;
	top: 2px;
	height: 15px;
	width: 15px;
}
#js-AirBrush-Selector  .swiper-pagination-bullet.swiper-pagination-fake_bullet  {
	background: #585858;
	cursor: not-allowed;
	pointer-events: none;
	opacity: .5;
}

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

/* Category Landing Page */
.ab_selector_landed #status {
	background: none;
	width: auto;
	height: auto;
}
.ab-ctgy-header {
	margin-top: 6.5rem;
	margin-bottom: 8.5rem;
	font-size: 2.8125rem;
}
.ab_selector_landed .sub-nav,
.ab_selector_landed .sub-nav-filters {
	display: none;
}
.ab-category-product-name a{
	font-weight: bold;
}
p.category-product-descrip {
	color: #585858;
	margin: 1.5rem 0;
}

#js-AIRBRUSH_SELECTOR .category-product-layout {
	margin-bottom: 60px !important;
	padding-top: 60px;
	padding-right: 20px;
	padding-left: 20px;
}
#js-AIRBRUSH_SELECTOR .category-product:not(:last-child) {
	margin-bottom: 40px;
}
#js-AIRBRUSH_SELECTOR .category-product::after {
	background: none;
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	transition: all 0.8s cubic-bezier(0.1,0.7,0.3,1);
	width: 100%;
	height: 100%;
}

/*.airbrush-button-complete {
	font-size: 0.875rem;
	margin-top: 6px;
}*/
.airbrush-button-complete > span:before {
	width: 116%;
}
@media screen and (min-width: 768px) {
	.airbrush-step-4 .airbrush-template__option-image {
		max-width: 80%;
	}
	.air-brush-selector-landing {
		display: flex;
		flex-flow: row nowrap;
		margin-bottom: 90px;
		padding: 0;
	}
	.air-brush-selector-landing__inner {
		flex-basis: 60%;
		padding: 60px 40px 60px 20px;
	}
	.air-brush-selector-landing__image {
		display: block;
		flex-basis: 40%;
	}
	.airbrush-template__title {
		margin-top: 0;
		font-size: 26px;
	}
 	.airbrush-template__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}
	.airbrush-template__options {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	.template-1 .airbrush-template__options,
	.template-3 .airbrush-template__options {
		flex-flow: row wrap;
	}
	.template-4 .airbrush-template__options {
		align-items: baseline;
	}
	.airbrush-template__options {
		margin-bottom: 0;
	}
	.template-2__label-wraps {
		padding: 0 40px;
	}
	.rzslider .rz-bar:before {
		transform: translateX(-21px) !important;
	}
	#js-AIRBRUSH_SELECTOR .category-product-layout {
		margin-bottom: 90px !important;
	}
	#js-AIRBRUSH_SELECTOR .category-product {
		margin-left: 0;
		width: 48% !important;
		height: 34.375rem !important;
	}
	#js-AIRBRUSH_SELECTOR .category-product:not(:nth-child(even)) {
		margin-right: 4%;
	}
}

@media screen and (min-width: 960px) {
	.airbrush-template__choices {
		display: block;
	}
	#js-AIRBRUSH_SELECTOR .main-content {
		margin-bottom: 0;
	}
	.air-brush-selector-landing__inner {
		padding: 200px 40px 200px 20px;
	}
	.ab--landing__title {
		font-size: 36px;
	}
	.airbrush-template__title {
		padding: 0 40px;
		font-size: 32px;
	}
	#js-AirBrush-Selector .swiper-pagination {
		background: none;
		height: auto;
		padding-top: 0;
		top: 7vh;
	}
	.airbrush-selector-navigation {
		background: none;
		height: auto;
		padding-top: 0;
		bottom: 4vh;
		padding-top: 20px;
	}
	.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: 4px;
	}
	.airbrush-step-1 .airbrush-template__options {
		padding: 0 20px;
	}
	.airbrush-step-0 .airbrush-template__option,
	.airbrush-step-1 .airbrush-template__option {
		margin: 4rem 0 0;
	}
	.airbrush-template__option {
		margin: 4rem 4rem 0;
	}
	.template-1__option {
		padding: 0 0.75rem;
	}
	.airbrush-template__choice {
		margin: 0.75rem;
	}
	.airbrush-template__option-image {
		margin-bottom: 3rem;
	}
	#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%;
	}
}

@media screen and (min-width: 1280px) {
	.air-brush-selector-landing {
		height: calc( 100vh - 171px );
	}
	.air-brush-selector-landing__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 0 40px;
	}
	.ab--landing__title {
		font-size: 52px;
	}
	.airbrush-template__title {
		padding: 0 200px;
	}
	.airbrush-template__title {
		font-size: 44px;
	}
}

@media screen and (min-width: 1400px) {
	.air-brush-selector-landing {
		height: calc( 100vh - 100px );
	}
	.air-brush-selector-landing__inner {
		padding: 0 80px 0 60px;
	}
}

@media screen and (min-width: 1680px) {
	.air-brush-selector-landing {
		margin-bottom: 160px;
	}
	.air-brush-selector-landing__inner {
		padding: 0 150px;
	}
	#js-AIRBRUSH_SELECTOR .category-product-layout {
		padding-right: 0;
		padding-left: 0;
		top: 0;
	}
}