@import "reset.css";
@import "fonts/Gotham.css";
@import "smt.css";
@import "select2.css?t=21";
@import "nouislider.css";
@import "tooltipster.bundle.min.css";
@import "plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css";

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

body.preload * {
	animation-duration: 0s !important;
	-webkit-animation-duration: 0s !important;
	transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

a:link, a:visited, a:hover, a:focus {
	color: inherit;
}

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

html, body {
	background: #fff;
	font-family: 'Gotham', Arial, sans-serif;
	font-size: 12px;
	color: #111;
	/* overflow-y: hidden; */
}

	@media (min-width: 600px) {
		html, body { font-size: 14px; }
	}

	@media (min-width: 800px) {
		html, body { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		html, body { font-size: 16px; }
	}

	/*
@media (min-width: 1400px) {
		html, body { font-size: 18px; }
	}

	@media (min-width: 1850px) {
		html, body { font-size: 20px; }
	}
*/

header {
	background: #222222;
    background: -moz-linear-gradient(-45deg, #222222 0%, #000000 100%);
    background: -webkit-linear-gradient(-45deg, #222222 0%,#000000 100%);
    background: linear-gradient(135deg, #222222 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 );
	padding: 0 0 0 0;
	color: #fff;
	margin-bottom: 1rem;
}

	@media (min-width: 500px) {
		header {
			margin-bottom: 0;
		}
	}

	header .wrap {
		z-index: 999999999;
	}

	header .logo.sknmtch {
		width: 4rem;
		height: 4rem;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		background: #000 url(img/Icon-White-Outlined.png) no-repeat center;
		background-size: contain;
		border: 1px solid #fff;
		border-radius: 15%;
		box-shadow: 0 0 1em rgba(0,0,0,0.3);
		margin-bottom: -2rem;
		transition: all 0.25s ease-in-out;
		z-index: 9;
		position: relative;
	}

		header .logo.sknmtch:hover {
			transform: scale(1.1);
			box-shadow: 0 0 2em rgba(0,0,0,0.4);
		}

		header .logo.sknmtch:active {
			transform: scale(0.95);
			box-shadow: none;
		}

		@media (min-width: 500px) {
			header .logo.sknmtch {
				/* width: 8rem;
				height: 2.5rem;
				display: block;
				text-indent: -1000px;
				overflow: hidden;
				background: url(img/logo-sknmtch.svg) no-repeat left;
				background-size: contain;

				border: 0;
				border-radius: 0;
				box-shadow: none;
				margin-bottom: 0; */
				margin-bottom: -3rem;
			}
		}

	header .logout {
		font-size: 12px;
		text-decoration: none;
		display: none;
	}

	header nav {
		position: absolute;
		bottom: -1px;
		left: 50%;
		transform: translateX(-50%);
		font-weight: 600;
	}

		header nav ul {
			display: flex;
			flex-flow: row wrap;
			min-width: 20rem;
			justify-content: center;
		}

			header nav ul li {
				color: #ccc;
				position: relative;
			}

				header nav ul li > a {
					display: block;
					margin: 0 ;
					padding: 1rem;
					text-decoration: none;
					border-radius: 3px 3px 0 0;
					cursor: pointer;
					transition: all 0.2s ease-out;
				}

				header nav ul li:hover > a,
				header nav ul li.is-open > a {
					background: rgba(255,255,255,0.1);
					background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0.1) 100%);
					background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0.1) 100%);
					background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0.1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1affffff',GradientType=0 );
					color: #fff !important;
				}

				header nav ul li.active > a {
					background: #ffffff;
					background: -moz-linear-gradient(top, #f8f8f8 0%, #ffffff 50%);
					background: -webkit-linear-gradient(top, #f8f8f8 0%,#ffffff 50%);
					background: linear-gradient(to bottom, #f8f8f8 0%,#ffffff 50%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=0 );
					color: #222 !important;
				}

			@media (max-width: 749px) {
				header nav ul li.has-submneu:hover > a,
				header nav ul li.has-submenu.active > a {
					background: rgba(255,255,255,0.075);
					color: #fff !important;
				}


				header nav ul li ul {
					display: none;
					position: absolute;
					top:100%;
					margin-top: -1px;
					background: rgba(0,0,0,0.9) !important;
					box-shadow: 0 0 2em rgba(0,0,0,0.2);
					color: #000;
					border-radius: 0 0 3px 3px;
					z-index: 0;
					left: 50%;
					pointer-events: none;

					transition: all 0.2s ease-out;
					transform: translateX(-50%) ;
					min-width: 0;
				}

					header nav ul li ul li {

					}

						header nav ul li ul li a {
							border-radius: 0;
							margin: 0;
							border-bottom: 1px solid #555 !important;
							padding: 0.85em 1em;
							font-weight: 400;
						}

						header nav ul li ul li:last-child a {
							border-radius: 0 0 3px 3px;
							border-bottom: 0;
						}

						header nav ul li ul li:first-child a {
							border-radius: 3px 3px 0 0;
							border-bottom: 0;
						}

							header nav ul li ul li.active > a {
								background: #111;
								color: #fff !important;
							}

					header nav ul li.is-open ul {
						display: block;
						pointer-events: all;
						transform: translateX(-50%);
					}
			}

			@media (min-width: 750px) {
				header nav ul li.has-submenu > a {
					display: none;
				}

				header nav ul {
					min-width: 35rem;
				}

				header nav ul ul {
					border-left: 1px solid rgba(255,255,255,0.3);
					margin-left: 1rem;
					padding-left: 1rem;
					min-width: 0;
				}
			}

	.breadcrumbs {
		display: none;
	}

	@media (min-width: 750px) {
		.breadcrumbs {
			display: inline-block;
		}
	}

.wrap {
	padding: 1rem;
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

	@media (min-width: 500px) {
		.wrap {
			padding: 2rem;
		}
	}

	.wrap.noPaddingTop {
		padding-top: 0;
	}

	.gray {
		background: #efefef;
	}

.area {
	padding: 2rem 0;
}

	.area .wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	.area.area-light {
		background: #efefef;
	}

.smt-tag {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	width: 100%;
}

	.smt-tag a {
		text-decoration: none;
	}

	.smt-tag a:hover {
		color: #AA003B;
	}

.smt-tag .logout {
	float: right;
}

h1 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.6em;
	margin-bottom: 0.25em;
}

	@media (min-width: 600px) {
		h1 {
			font-size: 1.8em;
			line-height: 120%;
		}
	}

	@media (min-width: 800px) {
		h1 {
			font-size: 2em;
			line-height: 120%;
		}
	}

	@media (min-width: 1000px) {
		h1 {
			font-size: 2.2em;
			line-height: 120%;
		}
	}

	@media (min-width: 1200px) {
		h1 {
			font-size: 2.4em;
			line-height: 120%;
		}
	}



h2 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.3em;
	margin-bottom: 2em;
}


	@media (min-width: 800px) {
		h2 {
			font-size: 1.4em;
			line-height: 120%;
		}
	}

	@media (min-width: 1000px) {
		h2 {
			font-size: 1.5em;
			line-height: 120%;
		}
	}

	@media (min-width: 1200px) {
		h2 {
			font-size: 1.6em;
			line-height: 120%;
		}
	}


h2.thin,
h2 .thin {
	font-weight: 200;
}

h2.delete {
	display: inline-block;
	background-color: #d83c3c;
	color: #fff;
	padding: 0.25em 0.5em;
}

h3 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.1em;
	margin-top: 2em;
	margin-bottom: 1em;
}

	@media (min-width: 800px) {
		h3 {
			font-size: 1.2em;
			line-height: 120%;
		}
	}

	@media (min-width: 1000px) {
		h3 {
			font-size: 1.3em;
			line-height: 120%;
		}
	}

	@media (min-width: 1200px) {
		h3 {
			font-size: 1.4em;
			line-height: 120%;
		}
	}


	.fieldset-title {
		margin-top: 0;
	}

p {
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 1em;
}

.highlight { color: #AA003B; }
.styling-data .highlight { color: #0093FF; }

.legal-text {
	max-width: 1000px;
	margin: 5px auto;
	padding-left: 4em;
}

	.legal-text h1 {
		margin: 2em 0 1em 0;
	}

	.legal-text .num {
		position: absolute;
		text-align: right;
		transform: translateX(-75px);
		font-family: monospace;

		font-size: 1rem;
		width: 50px;
	}

	.legal-text ul {
		padding-left: 50px;
	}

	.legal-text ul.bullets {
		list-style-type: disc;
	}

		.legal-text ul li {
			margin: 1em 0;
			line-height: 140%;
		}

		.legal-text ul li .num {
			text-align: left;
			transform: translateX(-50px);
		}

.login-holder,
.activation-holder {
	background: #111;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 700px;
	top: 0;
	left: 0;
}

.activation-holder {
	min-height: 450px;
}

	.activation-area {
		color: #fff;
		padding: 1em;
		width: 100%;
		max-width: 500px;
		position: absolute;
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

		@media (min-width: 400px) {
			.activation-area {
				padding: 1em;
				width: 85%;
			}
		}

		.activation-holder h2+h2 {
			margin-top: -1.5em;
		}

	.login-area,
	.signup-area {
		background: #444444;
/* 		border-radius: 1em; */
		padding: 3em;
		width: 85%;
		max-width: 500px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) scale(0.8);
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}


		.login-area {
			transform: translateX(-50%) translateY(-15%) scale(0.8);
		}

		.signup-area {
			transform: translateX(-50%) translateY(-38%) scale(0.8);
		}

		.login-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		.signup-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		@media (min-width: 650px) {
			.login-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.signup-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.login-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}

			.signup-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}
		}


		.login-area.active,
		.signup-area.active {
			background: #fff;
			z-index: 1;
		}

		.login-area .inner,
		.login-area .login-forgot-password-holder,
		.signup-area .inner {
			opacity: 0;
			pointer-events:none;
		}

		.login-area.active .inner,
		.login-area.active .login-forgot-password-holder,
		.signup-area.active .inner {
			opacity: 1;
			pointer-events:all;
		}

	.login-holder h2 {
		font-weight: normal;
	}

	.login-holder h2 .understate {
		color: #999;
	}

	.login-area .login-forgot-password-holder {
		margin-top: 3em;
	}

	.login-area .login-forgot-password {
		background: #f8f8f8;
		border-top: 1px solid #eee;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
/* 		border-radius: 0 0 1em 1em; */
		padding: 1.5em 3em;
		color: #777;
	}

	.login-area .error-list,
	.signup-area .error-list {
		margin-bottom: 1em;
	}

	.login-area .error-list li,
	.signup-area .error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 3em;
		line-height: 120%;
		margin: 1px -3em 0 -3em;
		position: relative;
	}

		.login-area .error-list li::before,
		.signup-area .error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

	.signup-legal-accept {
		width: 100%;
		margin: 0.5em 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

		.signup-legal-accept label {
			width: calc(100% - 2rem);
		}

		.signup-legal-accept a {
			text-decoration: underline;

		}
/*

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(20px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-40px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(40px, 0, 0);
  }
}
*/

.columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

	.half {
		position: relative;
	}

		@media (min-width: 600px) {
			.half {
				width: 50%;
				width: calc(50% - 15px);
			}
		}

	.profile-item {
		width: 50%;
		position: relative;
		display: block;
		/* padding: 1em; */
		background: #f8f8f8;
		border: 1px solid #fff;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.profile-item.aside {
			background: #eee;
			color: #AA003B;
		}

		@media (min-width: 600px) {
			.profile-item {
				width: 33.33%;
			}
		}

		@media (min-width: 800px) {
			.profile-item {
				width: 25%;
			}
		}



		.profile-item span {
			width: 4rem;
			height: 4rem;
			display: block;
			margin: 0 auto 1rem auto;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

			.profile-item span.lifestyle { background-image: url(img/luggage.svg); }
			.profile-item span.look { background-image: url(img/pantone.svg); }
			.profile-item span.skincare { background-image: url(img/lotion.svg); }
			.profile-item span.basic { background-image: url(img/key.svg); }
			.profile-item span.location { background-image: url(img/position.svg); }
			.profile-item span.makeup { background-image: url(img/cosmetics.svg); }
			.profile-item span.product { background-image: url(img/pros-and-cons.svg); }
			.profile-item span.skintype { background-image: url(img/pimples.svg); }
			.profile-item span.allergies { background-image: url(img/biology.svg); }
			.profile-item span.hair { background-image: url(img/comb.svg); }
			.profile-item span.feedback { background-image: url(img/feedback.svg); }
			.profile-item span.contact { background-image: url(img/paper-plane.svg); }

			.profile-item span.manage-brand { background-image: url(img/manage-brand.svg); }
			.profile-item span.manage-high-prio { background-image: url(img/manage-high-prio.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-certifications { background-image: url(img/manage-certifications.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-retailer { background-image: url(img/manage-retailer.svg); }
			.profile-item span.manage-user { background-image: url(img/manage-user.svg); }
			.profile-item span.manage-api-users { background-image: url(img/manage-api-users.svg); }
			.profile-item span.manage-ingredient { background-image: url(img/manage-ingredient.svg); }
			.profile-item span.manage-translation { background-image: url(img/manage-translation.svg); }
			.profile-item span.manage-ean { background-image: url(img/manage-ean.svg); }
			.profile-item span.manage-labels { background-image: url(img/manage-labels.svg); }
			.profile-item span.manage-questionnaires { background-image: url(img/manage-questionnaires.svg); }
			.profile-item span.manage-explainers { background-image: url(img/manage-explainers.svg); }
			.profile-item span.manage-bulk-upload { background-image: url(img/manage-bulk-upload.svg); }
			.profile-item span.manage-stats { background-image: url(img/manage-stats.svg); }
			.profile-item span.manage-log { background-image: url(img/manage-log.svg); }
			.profile-item span.manage-inci-analyzer { background-image: url(img/manage-inci-analyzer.svg); }



		.profile-item a {
			display: block;
			padding: 3rem 1rem 3rem 1rem;
			height: 100%;
			text-align: center;
			text-decoration: none;
			font-weight: 600;
		}

			@media (min-width: 500px) {
				.profile-item a {
					padding: 4rem 1rem 4rem 1rem;
				}
			}

		.profile-item:hover {
			color: #AA003B;
			-webkit-box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
			-moz-box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
			box-shadow: inset 0px -10px 0px -4px rgba(170,0,59,1);
		}

.leaf {
	position: absolute;
	height: auto;
	width: 100%;
	margin-top: -15em;
}

.signup-wrap {
	margin: 100px auto;
	width: 90%;
	max-width: 400px;
}


form {

}

	input:-webkit-autofill {
	    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
	}

	.form-field-wrap.two-columns {
		border-bottom: 1px dotted #B3BFA2;
		padding: 2em 0;
	}

		#ingredients-holder .form-field-wrap.two-columns {
			padding: 0.5em 0;
		}

	.left-label {
		margin-bottom: 2em;
		font-weight: 600;
	}

	@media (min-width: 650px) {
		.form-field-wrap.two-columns {
			padding: 3em 0;
		}

		.left-label {
			width: 40%;
			float: left;
			padding-right: 3em;
			line-height: 130%;
			margin-bottom: 0;
		}

		.right-form-field {
			width: 60%;
			float: left;
		}

		#ingredients-holder .left-label {
			padding-right: 1.5em
		}
	}

	form.fancy-form {
		width: 100%;
	}

	.form-field-wrap input.text.fancy-field {
		padding: 0;
		font-size: 1.375em;
		outline: none;
		border: 0;
		padding: 0.25em 0;
		width: 100%;
		font-weight: 300;
		color: #111;
		border-bottom: 1px solid #ccc;
		margin-bottom: 2px;
		background: transparent;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.text.fancy-field:focus {
			border-bottom: 1px solid #AA003B;
		}


	.form-field-wrap input.fancy-button {
		padding: 0;
		font-size: 1.625em;
		outline: none;
		background: transparent;
		border: 0;
		width: auto;
		font-weight: 600;
		color: #AA003B;
		cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.fancy-button:hover,
		.form-field-wrap input.fancy-button:focus {
			background-color: #AA003B;
			color: #fff;

		}

		input.fancy-button.disabled {
			pointer-events: none;
		}

	fieldset {
		border: 0;
		padding: 0;
	}



		.form-field-wrap {
			padding: 0.5em 0;
		}

		.form-field-wrap label {
			display: block;
			padding: 0 0 0.25em 0;
			line-height: 130%;
		}

		.form-field-wrap .form-field-hint {
			margin: 0;
			color: #777777;
			font-size: 0.875em;
			margin-bottom: 0.25em;
			font-weight: 400;
		}

		.form-field-wrap input.text,
		.form-field-wrap textarea.text,
		.form-field-wrap select.simple-text-select,
		.form-field-wrap input.text-button {
			width: 100%;
			padding: 0.6em;
			font: inherit;
			border: 1px solid #ccc;
			background: #fff;
			outline: none;
			border-radius: 0;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

		.form-field-wrap input.text:disabled,
		.form-field-wrap textarea.text:disabled {
			opacity: 0.6;
			background: #eee;
		}

		#ingredients-holder .form-field-wrap input.text:disabled {
			opacity: 1;
		}

		.icon-autoassigned {
			position: relative;
		}

		.icon-autoassigned input.text {
			padding-left: 2em;
			position: relative;
			color: #AA003B;
		}

			.icon-autoassigned::before {
				content: "";
				width: 0.9em;
				height: 0.9em;
				background: url(img/lightning.svg) no-repeat center;
				background-size: contain;
				position: absolute;
				left: 0.75em;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}

		.form-field-wrap input.text:focus,
		.form-field-wrap textarea.text:focus,
		.form-field-wrap select.simple-text-select:focus {
			border-bottom-color: #AA003B;
			-webkit-box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,1);
			-moz-box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,1);
			box-shadow: inset 0px -6px 0px -3px rgba(170,0,59,1);
		}

		.form-field-wrap textarea {
			height: 10em;
			line-height: 130% !important;
		}

		.form-field-wrap select.simple-text-select {
			width: auto;
			-webkit-appearance:none;
			padding-right: 2.5em;
			position: relative;
			background-image:url(img/select-dropdown.png);
			background-position: right center;
			background-size: auto 55%;
			background-repeat: no-repeat;
		}

		.form-field-wrap input.text-button {
			width: auto;
			cursor: pointer;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

		}

		input[type='submit'].button,
		a.submit.button {
			background: #AA003B;
			padding: 0.6em;
			color: #fff;
			border: 0;
			font: inherit;
			font-size: 1.4em;
			font-weight: 600;
			margin-right: 1em;
			cursor: pointer;
			-webkit-appearance: none;
			border-radius: 0;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

			input[type='submit']:disabled {
				background: #333;
				color: #666;
				pointer-events:none;
			}

			input[type='submit'].button:hover,
			input[type='submit'].button:focus,
			a.submit.button:hover,
			a.submit.button:focus {
				background: #cb054a
			}

			input[type='submit'].button:active,
			a.submit.button:active {
				background: #9b0338
			}

		.form-field-wrap.checkbox-wrap {
			padding: 0.25em 0;
		}

		.checkbox-wrap label {
			display: inline-block;
			margin-left: 0.4em;
		}

		#mapcanvas {
			height: 300px;
			width: 100%;
			background: #eee;

		}

.rows-form {
	width: 100%;
	margin: 0 0 3rem 0;
}

	.rows-form .form-row {
		border-bottom: 1px dotted rgba(0,0,0,0.2);
		display: flex;
		flex-flow: row wrap;
		align-items: center;
	}

		.rows-form .form-row:last-child {
			border-bottom: 0;
		}

	.rows-form .form-row label {
		width: 30%;
		display: block;
		max-width: 250px;
		text-align: left;
		padding: 1.5rem 0;
		border-right: 1px dotted rgba(0,0,0,0.15);
		padding-right: 1.25rem;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select,
	.rows-form .form-row.form-row-submit input,
	.rows-form .form-row.form-row .value {
		margin-left: 0.5rem;
	}

	.rows-form .form-row.form-row .value {
		flex: 1;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select {
		flex: 1;
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		background: #eee;
		border: 2px solid #eee;
		padding: 0.75rem 1rem;
		border-radius: 0;
		line-height: 120%;
		transition: all 0.2s ease-in-out;
	}

	.rows-form .form-row.form-row-textfield input:focus,
	.rows-form .form-row.form-row-textarea textarea:focus,
	.rows-form .form-row.form-row-select select:focus {
		border-color: #AA003B;
	}

	.styling-data .rows-form .form-row.form-row-textfield input:focus,
	.styling-data .rows-form .form-row.form-row-textarea textarea:focus,
	.styling-data .rows-form .form-row.form-row-select select:focus {
		border-color: #0093ff;
	}

	.rows-form .form-row.form-row-submit input {
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		padding: 0.75rem 2rem;
		border-radius: 4px;
		line-height: 120%;
		background: #000;
		border: 2px solid #000;
		color: #fff;
		font-weight: bold;
		transition: all 0.2s ease-in-out;
	}

	.styling-data .rows-form .form-row.form-row-submit input {
		background: #0093ff;
		border-color: #0093ff;
		background: linear-gradient(180deg, rgba(0,147,255,1) 0%, rgba(0,140,244,1) 100%);
	}



.pac-container {
	font-family: inherit;
}

	.pac-container .pac-item {
		font-size: 1rem;
		padding: 0.3em 0.6em;
	}

		.pac-container .pac-item .pac-icon {
			display: none;
		}

		.pac-container .pac-item .pac-item-query {
			font-size: inherit;
		}

#geolocate-btn {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: url(img/geolocate.svg) no-repeat center;
	background-size: contain;
	z-index: 99;
	display: block;
	overflow: hidden;
	text-indent: -1000px;
}


form.sectioned {
	max-width: 1000px;
}

form.sectioned fieldset {
	background: #f8f8f8;
	padding: 2em;
	border-left: 5px solid #AA003B;
	margin-bottom: 2em;
}

	form.sectioned .fieldset-title {
		color: #AA003B;
	}

	form.sectioned p.descr {

	}



ul.error-list {
	margin-bottom: 1em;
}

	ul.error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

ul.response-list {
	margin-bottom: 1em;
}

	ul.response-list li {
		border-bottom: 0;
		background: rgba(35, 177, 209, 0.15);
		color: #046e94;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.response-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/check-blue.svg) no-repeat center center;
			background-size: contain;
		}

	.mandatory::after {
		content:" *";
		color: #ed2929;
	}

.hidden {
	display: none !important;
}

strong {
	font-weight: 600;
}

.clear {
	clear: both;
}

table {

}

table.simple {
	font-size: 0.875em;
	width: 100%;
}

	table.simple .bg-green {
		background: rgba(62, 185, 19, 0.27)
	}

	table.simple thead {
		border-bottom: 3px solid #ccc;
		text-align: left;
		white-space: nowrap;
	}

		table.simple thead tr th {
			padding: 0.5em 0;
			font-weight: 600;
		}

	table.simple tbody {

	}

	table.simple tbody tr:hover {
		background: #f8f8f8;
	}

	table.simple td {
		padding: 0.75em 1em 0.75em 0;
		text-align: left;
		border-bottom: 1px dotted #ccc;
	}

	table.simple {

	}

.button-selector {
	display: flex;
	flex-flow: row wrap;
	border: 1px solid #ccc;
	border-radius: 0.4rem;
	overflow: hidden;
	margin-top: -1rem;
}

	.button-selector .button-item {
		text-align: center;
		cursor: pointer;
		padding: 1rem;
		border-left: 1px dotted #ccc;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.button-selector .button-item:nth-child(1) {
			border-left: 0;
		}

	.button-selector .button-item:hover {
		background: #eee;
	}

	.button-selector .button-item.active {
		background: #B3BFA2;
		color: #fff;
	}

	.button-selector.four-options .button-item { width: 25%; }
	.button-selector.three-options .button-item { width: 33.33%; }
		@media (min-width: 650px) {
			.button-selector.three-options.shorter { width: 75%; }
		}

	.button-selector .button-item input {
		display: none;
	}

.haircolor-selector-wrapper {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 4em;
}

	.haircolor-selector-item {
		width: 50%;
		text-align: center;
		padding: 1rem;
		background: #fff;
		cursor: pointer;
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		@media (min-width: 500px) {
			.haircolor-selector-item {
				width: 33.33%;
			}
		}

		@media (min-width: 700px) {
			.haircolor-selector-item {
				width: 25%;
			}
		}

		.haircolor-selector-item i.icon {
			width: 2em;
		    height: 2em;
		    border-radius: 100%;
		    display: block;
		    margin: 0 auto 1em auto;
		    background: #fff url(img/checkmark.png) no-repeat center;
		    box-shadow: 0 0 10px rgba(0,0,0,0.3);
		    background-size: 50%;
		    position: absolute;
		    left: -0.5em;
		    top: 50%;
		    margin-top: -1em;
		    transform: scale(0.6);
		    opacity: 0;
		    z-index: 9;
		    -webkit-transition: all 0.2s ease-in-out;
		    -moz-transition: all 0.2s ease-in-out;
		    -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
		}

			.haircolor-selector-item.active i.icon {
				opacity: 1;
				transform: scale(1);
			}

		.haircolor-selector-item .hair-image {
			width: 75%;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #fff;
			border-radius: 100%;
			margin: 0 auto;
			-webkit-transition: all 0.3s ease-in-out;
		    -moz-transition: all 0.3s ease-in-out;
		    -o-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
		}

			.haircolor-selector-item .hair-image::before {
				content: "";
				display: block;
				padding-top: 100%;
			}

			.haircolor-selector-item:hover .hair-image {

			}

			.haircolor-selector-item.active .hair-image {
				box-shadow: 0 0 1em rgba(0,0,0,0.1);
				transform: scale(0.875);

			}

		.haircolor-selector-item .hair-title {
			margin: 0;
		}

		.haircolor-selector-item:hover {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
		}

		.haircolor-selector-item.active {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
			background: rgb(252,252,252); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
		}

	@media (max-width: 499px) {
		.haircolor-selector-item {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-last-child(2),
		.haircolor-selector-item:nth-last-child(3) {
			border-bottom: none;
		}

		.haircolor-selector-item:nth-child(odd) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 500px) and (max-width: 699px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(7),
		.haircolor-selector-item:nth-child(8) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 700px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6),
		.haircolor-selector-item:nth-child(7) {
			border-right: 1px dotted #ccc;
		}
	}

.skincolor-overview-item {
	width: 20%;
	padding: 1em;
	background: #eee;
	margin-bottom: 4em;
	cursor: pointer;
}

	.skincolor-overview-item:hover {
		background: #ccc;
	}

.skincolor-columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	width: 95%;
	margin: 0em auto;
}

.skincolor-group {
	width: 16.66%;
	float: left;
	position: relative;
	padding: 0;
}

	.group-fair-red,
	.group-fair-neutral,
	.group-fair-yellow,
	.group-fair-deepyellow {
		display: block;
	}

	.group-fair-red {
		margin-left: 16.66%;
	}

		.group-fair-red .skincolor-item {
			position: absolute;
			bottom: 0;
			right: 0;
		}

	.group-brown-red {
		margin-left: 16.66%;
	}

	.group-fair-neutral {

	}

		.group-fair-neutral .skincolor-item:first-child {
			margin-left: 50%;
		}

	.group-dark-red {
		width: 33.32%;
		padding-left: 8.33%;
	}

		.group-dark-red .skincolor-item {
			width: 33.33%;
		}

	.group-bronze-deepred {
		width: 8.33%;
		margin-left: 8.33%;
	}

		.group-bronze-deepred .skincolor-item {
			width: 100%;
		}

	.xAxis-Scroll {
		background: #fff;
		box-shadow: 0 0 0 rgba(0,0,0,0.3);
		width: 100%;
		margin: 0 auto;
		position: fixed;
		padding: 0 32px;
		top: 0;
		z-index: 99;
		height: 4.5em;
		transform: translateY(-150%);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.xAxis-Scroll.show {
			transform: translateY(0);
			box-shadow: 0 0 1em rgba(0,0,0,0.3);
		}

		.xAxis-Scroll .xAxis {
			margin-top: 2em;
			margin-bottom: 2em;
			width: 79.1%;
			margin-left: 18.3%;
		}

	.xAxis {
		margin-top: 4em;
		margin-bottom: 4em;
		width: 83.34%;
		margin-left: 16.66%;
	}

		.xAxis i.icon-info {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -3em;
			margin-left: -1em;
			opacity: 1;
			z-index: 9;

		}

			.xAxis i.icon-info:hover {
				transform: scale(1.2);
			}

		.xAxis .half {
			width: 50%;
			float: left;
			position: relative;
		}

		.xAxis .label-yellow,
		.xAxis .label-red {
			width: 40%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label-neutral {
			width: 20%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background: #fff;
			padding: 0.5em;
			cursor: pointer;
			text-align: center;
		}

		.xAxis .line {
			height: 1px;
			left: 0;
			margin-top: 1px;
			width: 100%;
			background: #ccc;
		}

			.xAxis .line::before {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-top: -15px;
			}

			.xAxis .line::after {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				right: -1px;
				background: #ccc;
				margin-top: -15px;
			}

	.group-label {

	}

		.group-label .line {
			position: absolute;
			height: 100%;
			left: 30%;
			width: 1px;
			background: #ccc;
		}

			.group-label .line::before {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-left: -15px;
			}

			.group-label .line::after {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				bottom: -1px;
				background: #ccc;
				margin-left: -15px;
			}

		.group-label .image {
			position: absolute;
			width: 60%;
			left: 30%;
			top: 50%;
			transform: translate(-50%, -55%);
			cursor: pointer;
		}

			.group-label .image img {
				width: 100%;
				height: auto;
				border-radius: 100%;
				border: 3px solid #fff;
				box-shadow: 0 0 1em rgba(0,0,0,0.2);
			}

		.group-label .label {
			position: absolute;
			width: 100%;
			height: 1.5em;
			line-height: 1.5em;
			background: #fff;
			text-align: center;
			margin-top: 0.5em;
		}

.skincolor-item {
	/* width: 100px; */
	text-align: center;
	width: 50%;
	float: left;
	position: relative;
	cursor: pointer;
	border-color: #fff;
	border: 1px solid #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.skincolor-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 100%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincolor-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}

	.skincolor-item:hover,
	.skincolor-item.active {
		transform:scale(1.5);
		z-index: 9;
		border: 2px solid #fff;
		cursor: pointer;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		opacity: 1 !important;
	}

		.skincolor-item:hover {
			z-index: 20;
		}

		.skincolor-item.disabled {
			opacity: 0.6;
		}

		.skincolor-item.fully-disabled {
			opacity: 0.15;
			pointer-events: none;
		}

		.skincolor-item.fully-disabled:not(.active):hover {
			transform:scale(1);
			z-index: 0;
			border: 1px solid #fff;
			box-shadow: 0 0 0;
			opacity: 0.2 !important;
		}

		.skincolor-item.fully-disabled.active {
			pointer-events: all
		}



		.skincolor-item.fully-disabled.secondary-active,
		.skincolor-item.fully-disabled.active-skincolor.secondary-active,
		.skincolor-item.fully-disabled.active-tone.secondary-active {
			opacity: 1 !important;
		}

		.skincolor-item.fully-disabled.active-skincolor,
		.skincolor-item.fully-disabled.active-tone {
			opacity: 0.3 !important;
		}

	.skincolor-item-range {
		width: 100%;
		height: 100%;
		position: absolute;
		pointer-events:none;
		box-sizing: content-box;
		opacity: 0;
	}

		.skincolor-item:hover .skincolor-item-range {
			transform:scale(2.02);
			/* border: 1px solid #000; */
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
		}


.step-description {
	margin-bottom: 4em;
	color: #666;
}

.skincare-need-item,
.hair-need-item {
	width: 50%;
	line-height: 140%;
	text-align: center;
	cursor: pointer;
	background: #fff;
	border: 1px solid #fff;
	border-bottom: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	font-weight: 400;
	position: relative;
	word-wrap: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: #555;
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (max-width: 649px) {
		.skincare-need-item:nth-child(2n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item:nth-child(2n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1) {
			border-bottom: none;
		}
	}

	@media (min-width: 650px) and (max-width: 999px) {
		.skincare-need-item,
		.hair-need-item {
			width: 33.33%;
		}

		.skincare-need-item:nth-child(3n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1) {
			border-bottom: 0;
		}
		.skincare-need-item:nth-last-child(2) {
			border-bottom: 1px dotted #ccc;
		}

		.hair-need-item:nth-child(3n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2) {
			border-bottom: 0;
		}

	}


	@media (min-width: 1000px) {
		.skincare-need-item {
			width: 25%;
		}

		.skincare-need-item:nth-child(4n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item {
			width: 25%;
		}

		.hair-need-item:nth-child(4n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2),
		.hair-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}

	/*
@media (min-width: 1400px) {
		.skincare-need-item {
			width: 20%;
		}

		.skincare-need-item:nth-child(5n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2),
		.skincare-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}
*/

	.skincare-need-item:before,
	.hair-need-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 50%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincare-need-item:after,
	.hair-need-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}


	.skincare-need-item:hover,
	.hair-need-item:hover {
		background: #f8f8f8;
		/* z-index: 9; */
	}

	.skincare-need-item.active,
	.hair-need-item.active {
		color: #AA003B;
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */



	}

	.skincare-need-item input,
	.hair-need-item input {
		display: none;
	}

	.skincare-need-item i.icon,
	.hair-need-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skincare-need-item.active i.icon,
		.hair-need-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

		.skincare-need-item .inner,
		.hair-need-item .inner {
			position: absolute;
			top: 50%;
			width: 100%;
			text-align: center;
			left: 0;
			padding: 0 2em;
			transform: translate3d(0, -50%, 0);
		}





.default-ui.noUi-horizontal {
	height: 22px !important;
}

.default-ui .noUi-handle {
	width: 40px;
	height: 40px;
	top: -10px;
	left: -20px;
	border-radius: 100%;
	border: 2px solid #fff;
	box-shadow: none;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.default-ui .noUi-handle:before,
	.default-ui .noUi-handle:after {
		display: none;
	}

	.default-ui .noUi-handle.noUi-active {
		box-shadow: 0 0 1.5em rgba(0,0,0,0.2);
		transform: scale(1.2);
	}

.default-ui .noUi-connect {
	background: #B3BFA2;
}

.default-ui .noUi-marker-horizontal.noUi-marker {
	width: 1px;
}



#plane-slider-handles .noUi-handle {
	background: #fff url(img/plane_handle.png) no-repeat center;
	background-size: 70%;
}

#sun-slider-handles .noUi-handle {
	background: #fff url(img/sun_handle.png) no-repeat center;
	background-size: 70%;
}

#stress-slider-handles .noUi-handle {
	background: #fff url(img/stress_handle.png) no-repeat center;
	background-size: 70%;
}

#sleep-slider-handles .noUi-handle {
	background: #fff url(img/sleep_handle.png) no-repeat center;
	background-size: 80%;
}

.status {
	color: #333;
	background: #ccc;
	padding: 0.4em;
	border-radius: 3px;
	line-height: 90%;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
}

	.status.status-dot {
		padding: 0;
		border: 2px solid #fff;
		width: 12px;
		height: 12px;
		margin: 2px;
		border-radius: 100%;
	}

	@media (max-width: 1200px) {
		.status .status-label {
			display: none;
		}

		.status:hover .status-label {
			display: inline;
		}
	}

	a.status {
		text-decoration: none;
	}

	.status-submitted,
	a.status-submitted {
		color: #fff;
		background: #4d9acb;
	}

	.status-approved,
	.status-live,
	a.status-approved {
		color: #fff;
		background: #5ac675;
	}

	.status-edited,
	a.status-edited {
		color: #fff;
		background: #a3cd5f;
	}

	.status-created,
	a.status-created {
		color: #fff;
		background: #e49e12;
	}

	.status-archived,
	a.status-rejected {
		color: #fff;
		background: #d03e54;
	}

	.status-permission-view {
		color: #fff;
		background: #4d9acb;
	}

	.status-permission-limited-upload {
		color: #fff;
		background: #a3cd5f;
	}

	.status-permission-upload {
		color: #fff;
		background: #5ac675;
	}

	.status-permission-translation {
		color: #fff;
		background: #ef6d53;
	}

	.status-permission-custom {
		color: #8f8f8f;
		background: #eee;
	}


.makeup-finish-item,
.makeup-coverage-item {
	width: 50%;
	margin-bottom: 4em;
	cursor: pointer;
}

	@media (min-width: 600px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1000px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 20%;
		}
	}

	.makeup-finish-item:hover,
	.makeup-coverage-item:hover {
		z-index: 10;
	}

	.makeup-finish-item.active,
	.makeup-coverage-item.active {
		z-index: 20;
	}


	.makeup-finish-image-holder,
	.makeup-coverage-image-holder {
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item img.makeup-finish,
	.makeup-coverage-item img.makeup-coverage {
		width: 80%;
		margin: 0 auto;
		height: auto;
		display: block;
		/* border-radius: 0.75em; */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item:hover .makeup-finish-image-holder,
	.makeup-coverage-item:hover .makeup-coverage-image-holder {
		/* transform: rotateX(5deg) rotateZ(5deg) scale(1.05) !important; */
		transform: scale(1.05) !important;
		z-index: 9;
		opacity: 1 !important;
	}

	.makeup-finish-item.active .makeup-finish-image-holder,
	.makeup-coverage-item.active .makeup-coverage-image-holder {
		transform: rotateX(5deg) rotateZ(-7deg) scale(1.2) !important;
		/* transform: scale(1.2) !important; */
	}

	.makeup-finish-item.disabled .makeup-finish-image-holder,
	.makeup-coverage-item.disabled .makeup-coverage-image-holder {
/* 		opacity: 0.5; */
		transform: scale(0.8);
	}

	.makeup-finish-item:hover img.makeup-finish,
	.makeup-finish-item.active img.makeup-finish,
	.makeup-finish-item:hover img.makeup-finish,
	.makeup-coverage-item.active img.makeup-coverage {
		box-shadow: 0 0 1em rgba(0,0,0,0.4);
	}

	.makeup-finish-item img.makeup-finish-skin-closeup {
		width: 60%;
		height: auto;
		display: block;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0 0 1em rgba(0,0,0,0.2);
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30%;
		z-index: 9;
		transform: translate(0, 50%);
		background: #fff;
	}

	.makeup-finish-item h3.title,
	.makeup-coverage-item h3.title {
		font-weight: 700;
		font-size: 1em;
		text-align: center;
		z-index: 10;
		position: absolute;
		width: 80%;
		display: block;
		left: 10%;
		padding: 0.5em 0;
		margin: 0;
		/* border-radius: 0.75em 0.75em 0 0; */
		top: 0;
		background: rgba(255,255,255,0.4);
		color: #111;
	}

.eye-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.eyecolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

.hair-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.haircolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

@media (min-width: 700px) {
	.eye-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-bottom: 0;
	}

	.hair-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-left: 10%;
	}

	.color-wheel-wrap {
		max-width: 1000px;
		margin: 0 auto;
	}
}

.skintypemodel-holder {
	/* border-bottom: 1px solid #A26345; */
	position: relative;
	overflow: visible;
}

	.skintypemodel-holder img.model {
		width: 80%;
		height: auto;
		border-radius: 0 0 45% 45%;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.model {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.model {
			width: 33.33%;
			float: left;
		}
	}

	.skintypemodel-holder img.mask {
		width: 80%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.mask {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.mask {
			width: 33.33%;
		}
	}

	.skintypemodel-holder .columns {

	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder .columns {
			/* position: absolute; */
			float: right;
			width: 60%;
			top: 0;
			right: 0;
		}
	}

	@media screen and (min-width: 1000px) {
		.skintypemodel-holder .columns {
			/*
position: absolute;
			top: 0;
			right: 0;
*/
		}
	}


	@media screen and (min-width: 1200px) {
		.skintypemodel-holder .columns {
			width: 50%;
			/*
			top: 50%;
			transform: translateY(-50%);
			*/
		}
	}


.skintype-item {
	position: relative;
	font-size: 12px;
	width: 100%;
	cursor: pointer;
	padding: 1em 1em 1em 2.5em;
	background: #fff;
	margin: 0em 0;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (min-width: 600px) {
		.skintype-item { font-size: 14px; }
	}

	@media (min-width: 800px) {
		.skintype-item { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		.skintype-item { font-size: 16px; }
	}

	@media screen and (min-width: 790px) {
		.skintype-item {
			width: 50%;
		}

		.skintype-item:nth-child(2n-1) {
			border-right: 1px dotted #ccc;
		}
	}

	.skintype-item:last-child {
		border-bottom: 0;
	}


	.skintype-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-item.active {
		/* transform: scale(1.1); */
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.skintype-item.disabled {
		opacity: 0.6;
	}

		.skintype-item.disabled p {
			color: #999;
		}

	.skintype-item h3 {
		margin-top: 1em;
		font-size: 1em;
	}

	.skintype-item p {
		margin-bottom: 1em;
		color: #555;
		font-size: 0.9em;
	}


	.skintype-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}


		.skintype-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

.product-preference-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 1.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.product-preference-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.product-preference-item.active {
		padding-left: 3em;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.product-preference-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.product-preference-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.product-preference-item h3 {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

		.product-preference-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.product-preference-item p {
		margin-bottom: 0;
	}


.skintype-options {
	margin-top: -1px;
	border-top: 5px solid #eee;
	z-index: 1;
	    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.skintype-option-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 2.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.skintype-option-item:last-child {
	    border-bottom: 0;
	}

	@media screen and (min-width: 790px) {
		.skintype-option-item {
			width: 50%;
		}

		.skintype-option-item:nth-child(2n-1) {
		    border-right: 1px dotted #ccc;
		}

		.skintype-option-item {
			border-bottom: 0;
		}
	}

	.skintype-option-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-option-item.active {
		padding-left: 2.5em;
		/* box-shadow: 0 0 1em rgba(0,0,0,0.1); */
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	}

	.skintype-option-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		opacity: 0;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skintype-option-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.skintype-option-item h3 {
		margin-top: 0;
		font-size: 1em;
		margin-bottom: 1em;
		color: #111;
	}

		.skintype-option-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.skintype-option-item p {
		margin-bottom: 0;
		font-size: 0.9em;
		color: #555;
	}

	.skintype-option-item.active p {
		color: #555;
	}


i.icon-info {
	width: 2rem;
	height: 2rem;
	border-radius: 100%;
	display: inline-block;
	background: #fff url(img/icon_info.png) no-repeat center;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	background-size: 50%;
	opacity: 1;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	i.icon-info:hover {
		transform: scale(1.2);
	}

.monospace {
	font-family: monospace;
}

.brand-link {
	display: block;
    padding: 2em 1.5em 2em 0;
    background: #fff;
    margin: 0em 0;
    position: relative;
    border-bottom: 1px dotted #ccc;
    font-weight: 600;
    line-height: 120%;
    font-size: 1.4em;
    text-decoration: none;
    font-weight: normal;
}

	.brand-link a {
		text-decoration: none;
	}

	.brand-link:hover a {
		text-decoration: underline;
	}

.product-item {
	width: 100%;
	padding: 0;
	margin: 1em 0;
	z-index: 0;
	background: #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	@media (min-width: 600px) {
		.product-item {
			width: 50%;
		}
	}

	@media (min-width: 1000px) {
		.product-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1400px) {
		.product-item {
			width: 25%;
		}
	}

	.product-item:hover {
		transform: scale(1.2);
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 9;
		position: relative;
	}

	.product-item.no-zoom:hover {
		transform: scale(1);
	}

	.product-item .color-check {
		display: none;
	}

	.product-item:hover .color-check {
		display: block;
	}

	.product-item:hover .color-check a {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		background: url(img/colorfan.svg) no-repeat center;
		background-size: contain;
		text-indent: -1000px;
		overflow: hidden;
	}

	.product-item .inner {
		height: 100%;
		padding: 1rem;
		z-index: 2;
		background: #fff;
		position: relative;
	}

	.product-item .status-dots {
		width: 100%;
		top: 170px;
		left: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.product-item .thumbnail {
		height: 150px;
		width: 100%;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 1em;
	}

	.product-item .thumbnail.no-image {
		position: relative;
	}

	.product-item .thumbnail.no-image::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		height: 80%;
		aspect-ratio: 1 / 1;
		border: 2px dashed #ccc;
		border-radius: 1em;
	}

	.product-item .title {
		text-align: center;
		line-height: 140%;
	}

	.product-item ul.variants {
		position: absolute;
		width: 100%;
		background: #eee;
		display: none;
		left: 0;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 1;
		font-size: 13px;
		color: #666;
	}

		.product-item:hover ul.variants {
			display: block;
		}

			.product-item ul.variants li {
				border-bottom: 1px dotted #ccc;
				padding: 0.5rem;
			}

			.product-item ul li .color-preview {
				display: inline-block;
				width: 1em;
				height: 1em;
				border-radius: 100%;
				background: #ccc;
				margin-right: 0.5em;
				margin-bottom: -0.1em;
			}

			.product-item ul li .weight {
				margin-left: 1em;
			}

			.product-item ul li .status {
				margin-left: 1em;
				font-family: monospace;
				float: right;
				position: absolute;
				right: 0.5em;
			}

			.product-item ul li .actions {
				float: right;
				text-align: right;
				opacity: 0;
			}

				.product-item ul li:hover {
					background: #f8f8f8;
				}

				.product-item ul li:hover .status {
					display: none;
				}

				.product-item ul li:hover .actions {
					opacity: 1;
				}

			.product-item ul li .icon {
				width: 1.2em;
				height: 1.2em;
				overflow: hidden;
				text-indent: -1000px;
				display: inline-block;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 90% auto;
				margin-left: 0.5em;
			}

				.product-item ul li .icon.icon-edit { background-image: url(img/edit-mini.svg); }
				.product-item ul li .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
				.product-item ul li .icon.icon-delete { background-image: url(img/delete-mini.svg); }
				.product-item ul li .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
				.product-item ul li .icon.icon-preview { background-image: url(img/preview-mini.svg); }
				.product-item ul li .icon.icon-insight { background-image: url(img/insight-mini.svg); }


.line-item {
	padding: 1.2em 1em;
	border-bottom: 1px dotted #ccc;
	z-index: 0;
	display: flex;
	flex-flow: row wrap;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.line-item .group {
		margin-right: 1em;
	}

	.line-item:hover {
		z-index: 1;
		background: #f8f8f8;
	}

	.styling-data .line-item:hover {
		background: rgba(0, 147, 255, 0.1);
	}

	.line-item .ID {
		width: 4.5rem;
	}

	.line-item .questionnaire-icon-holder {
		width: 2.5rem;
	}

	.line-item .questionnaire-icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.7rem;
		position: absolute;
		transform:translateY(-15%);
		border-radius: 0.15rem;
	}

	.line-item .title {
		font-weight: bold;
		flex: 1;
		line-height: 90%;
	}

	.line-item .actions {
		text-align: right;
		width: 40%;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		padding: 0 1em;
	}

	.line-item .icon,
	.line-item .status-icon {
		width: 1.2em;
		height: 1.2em;
		overflow: hidden;
		text-indent: -1000px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90% auto;
		margin-left: 0.5em;
	}

		.line-item .status-icon {
			margin-left: 0;
			margin-right: 0.5em;
		}

		.line-item .icon.icon-edit { background-image: url(img/edit-mini.svg); }
		.line-item .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
		.line-item .icon.icon-delete { background-image: url(img/delete-mini.svg); }
		.line-item .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
		.line-item .icon.icon-view { background-image: url(img/folder-mini.svg); }
		.line-item .icon.icon-user { background-image: url(img/user-mini.svg); }

		.line-item.is-processing .status-icon { background-image: url(img/loading.svg); }
		.line-item.status-added .status-icon { background-image: url(img/reasons-why-icons/check.svg); background-size: contain }
		.line-item.status-rejected .status-icon { background-image: url(img/reasons-why-icons/cross.svg); background-size: contain }

		.line-item.status-rejected {
			background: rgba(154, 54, 54, 0.1)
		}

		.list-loader {
			display: flex;
			align-items: center;
			display: block;
			padding-left: 1.7em;
			position: relative;
			margin-top: 1em;
		}

			.list-loader::before {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1.7em;
				height: 1.7em;
				background-image: url(img/loading.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% auto;
			}

	.line-item.head-line {
		pointer-events: none;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

.account-legal-links {
	margin: 3em 0 0 0;
	padding: 3em 0 0 0;
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid #ccc;
}

	.account-legal-links a {
		display: inline-block;
		margin: 0 2em 0 0;
	}

		.account-legal-links a::before {
			content: "";

		}

.js-checkbox-activator {
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	border: 2px solid #ccc;
	display: inline-block;
	cursor: pointer;
	position: relative;
	transition: all 0.1s ease-in-out;
}

	.js-checkbox-activator::before {
		content: "";
		position: absolute;
		top: 20%;
		left: 20%;
		width: 60%;
		height: 60%;
		background: #fff;
		background-size: contain;
		transition: all 0.1s ease-in-out;
		transform: scale(0);
	}

	.js-checkbox-activator.checked {
		border: 2px solid #AA003B;
	}

		.js-checkbox-activator.checked::before {
			background: #AA003B;
			transform: scale(1);
		}

	.js-checkbox-activator input {
		pointer-events: none;
		opacity: 0;
		cursor: pointer;
	}

.smt-preview {
	width: 100%;
	max-width: 800px;
	box-shadow: 0 0 1em rgba(0,0,0,0.3);
	border-radius: 0.5em;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 9;
	background: #fff;
	display: flex;
	flex-flow: row wrap;
}

	.smt-preview .smt-preview-product {
		width: 40%;
		padding: 2em;
	}

	.smt-preview .smt-preview-title {
		font-size: 1.2em;
		line-height: 120%;
		font-weight: 400;
		text-align: center;
		padding: 1em 0 0.5em 0;
	}

	.smt-preview .smt-preview-subtitle {
		color: #777;
		padding: 0;
		line-height: 120%;
		font-size: 1em;
		text-align: center;
	}

	.smt-preview .smt-preview-product-image {
		position: relative;
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}

		.smt-preview .smt-preview-product-image::before {
			content: "";
			position: relative;
			display: block;
			padding-top: 66%;
		}


	.smt-preview .smt-preview-match {
		width: 60%;
		background: #f8f8f8;
		border-left: 1px solid #ccc;
		padding: 2em;
		border-radius: 0 0.5em 0.5em 0;
	}

		.smt-preview .smt-preview-match h4 {
			font-weight: bold;
		}

.smt-preview .smt-match-bar {
	margin: 2em 0 0.5em 0;
}

.smt-preview .smt-match-bar-label {
	padding: 0;
	position: relative;
	transform: none;
	top: 0;
	color: #333;
	background: transparent;
}

.smt-seal {
	width: 20em;
	height: 20em;
	top: -2em;
	right: -2em;
	border-radius: 100%;
	padding: 1px;
	opacity: 0.1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-100%);
	z-index: 0;
}

hr {
	height: 1px;
	width: 100%;
	margin: 1em 0;
	border: 0;
	background: #999;
}

.translation-source {
	color: #999;
	font-size: 12px;
	font-weight: 600;
}

.recent-activity { color: #000; }
.no-recent-activity { color: #999; }

.log-entry {
	border-bottom: 1px dotted #ccc;
	padding: 0.5rem 0 1rem 0;
	position: relative;
	padding-left: 170px;
	font-size: 0.9rem;
}

	.log-entry .log-meta {
		color: #999;
		font-family: monospace;
		font-size: 0.9rem;
		display: flex;
		margin-bottom: 0.5rem;
	}

		.log-entry .log-meta span {
			margin-right: 2rem;
		}

		.log-entry .log-meta span.date {
			position: absolute;
			left: 0;
		}

	.log-entry .log-data {
		display: flex;
	}

		.log-entry .log-data span {
			margin-right: 2rem;
		}

		.log-entry .log-data span.value {
			position: absolute;
			left: 0;
		}

			.log-entry .log-data span.value.value-deleted {
				color: #b93434;
			}

			.log-entry .log-data span.value.value-updated {
				color: #3267c1;
			}

			.log-entry .log-data span.value.value-created {
				color: #34b939;
			}

			.log-entry .log-data span.note {
				margin-right: 1rem;
			}

			.log-entry .log-data span.field {
				margin-right: 1rem;
				border: 1px solid #ccc;
				background: #eee;
				color: #777;
				font-size: 0.7rem;
				padding: 0.3rem;
				position: relative;
				margin-top: -0.3rem;
			}

				.log-entry .log-data span.field:empty {
					display: none;
				}

				.log-entry .log-data span.field::before {
					content:"db field: ";
					position: relative;
				}

/* Icons */
i.icon {
	width: 1em;
	height: 1em;
	display: inline;
	margin-right: 0.25em;
}

	i.icon::before {
		content: "";
		width: 1em;
		display: inline-block;
	}

i.icon.icon-back {
	background: url(img/back.svg) no-repeat center;
	background-size: 60% auto;
}

.pass-graybar {
	height:5px;
	background-color:#eee;
	width:100%;
	position:relative;
	margin-bottom: 5px;
	margin-top: -6px;
}

.pass-colorbar {
	height:5px;
	background-image:url(img/passwordstrength.jpg);
	position:absolute;
	top:0;left:0
}

.pass-percent,
.pass-text {
	margin: 0;
	color: #777777;
	font-size: 0.875em;
	margin-bottom: 0.25em;
	font-weight: 400;
}

.pass-text {
	min-height: 2.5rem;
	display: block;
}

.pass-percent {
	margin-right:5px
}


/* Insights */

.insight-title {
	font-weight: bold;
	margin: 2.5rem 0 1rem 0;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.insight-group {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px dotted #ccc;
}

	.insight-item {
		width: 25%;
		border-right: 1px dotted #ccc;
		padding: 2rem 2rem 2rem 2rem;
		position: relative;
	}

	.insight-item.double {
		width: 50%;
	}

	.insight-item.full {
		width: 100%;
	}

	.insight-item.half {
		width: 50%;
	}

	.insight-item h6 {
		width: 100%;
		margin: 0 0 1em 0;
	}

	.insight-item:last-child {
		border-right: 0;
	}

	.insight-item:first-child {
		padding-left: 0;
	}

	.insight-item .value {
		font-weight: bold;
		font-size: 3.5rem;
		margin-bottom: 0.5rem;
	}

	.insight-item .label {
		font-weight: normal;
		font-size: 0.8rem;
		text-transform: uppercase;
		line-height: 120%;
	}

	.insight-item .direction {
		display: block;
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 100%;
		right: 2rem;
		top: 2rem;
		background: #ccc url(img/arrow-insight.svg) no-repeat center;
		background-size: 50% auto;
	}

		.insight-item .direction.direction-none { background-color:#e49e12; }
		.insight-item .direction.direction-up { background-color:#5ac675; transform: rotate(-45deg); }
		.insight-item .direction.direction-down { background-color:#d03e54; transform: rotate(45deg); }


.flex {
	display: flex;
	flex-flow: row wrap;
}

.ingredients-by-group {
	width: 50%;
	padding-left: 2rem;
	padding-bottom: 2rem;
}


.questionnaire-preview {
	width: 100%;
	position: relative;
}


	.questionnaire-preview::before {
		content: "";
		display: block;
		padding-top: 56%;
	}

	.questionnaire-preview iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0 0 1rem rgba(0,0,0,0.2);
		transform: scale(0.6);
		transform-origin: top right
	}


.incianalyzer-holder {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}

	.incianalyzer-preview {
		width: 100%;
		max-width: 1000px;
		display: block;
		padding: 2em;
	}

	@media (min-width: 500px) {
		.incianalyzer-preview {
			display: flex;
			flex-flow: row wrap;
		}
	}

		.incianalyzer-product-image {
			width: 70%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			background-color: #fff;
			border: 1em solid #fff;
			border-radius: 1em;
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			margin: 0 auto 2em auto;
		}

		@media (min-width: 500px) {
			.incianalyzer-product-image {
				width: 40%;
				max-width: 300px;
				border-radius: 2em;
				margin: 0 0 2em 0;
			}
		}


		.incianalyzer-product-image::before {
			content: "";
			display: block;
			padding-bottom: 100%;
		}

	.incianalyzer-product-info {
		width: 100%;
		display: block;
	}

		@media (min-width: 500px) {
			.incianalyzer-product-info {
				width: auto;
				flex: 1;
				padding: 0 1em;
			}
		}

		@media (min-width: 800px) {
			.incianalyzer-product-info {
				padding: 0 2em;
			}
		}

	.incianalyzer-product-info h2 {
		font-weight: normal;
	}



	.incianalyzer-product-info h3 {
		font-size: 1em;
	}

		.incianalyzer-product-info h2 + h3 {
			margin-top: -1em;
		}

	.incianalyzer-incilist {
		display: block;
		line-height: 130%;
		font-size: 14px;
	}

	.incianalyzer-product-info .label {
		line-height: 130%;
		font-size: 14px;
		display: block;
		margin-bottom: 0.25rem;
		padding-top: 2rem;
	}

		.incianalyzer-incilist .inci {
			position: relative;
			display: inline-block;
		}

			.incianalyzer-incilist .inci .info {

				display: none;
			}

			.tooltipster-show {
				/* display: block; */
				min-width: 350px;
			}

			.tooltipster-show .info {
				color: #111;
				padding: 0;
				padding: 0;
				min-width: 250px;
			}

				.tooltipster-show .info h3 {
					margin-top: 0;
					min-width: 250px;
				}

				.tooltipster-show .info p.descr {
					font-size: 14px;
					line-height: 130%;
					color: #888;
					font-style: italic;
					font-family: 'Georgia', serif;
				}

				.tooltipster-show .info p {
					font-size: 14px;
					line-height: 130%;
				}

				.tooltipster-show .info ul {
					/* padding-left: 20px;
					list-style-type: disc; */
					display: block;
					padding:  0;
				}

					.tooltipster-show .info ul li {
						color: #111;
						font-size: 13px;
						line-height: 120%;
						border-top: 1px solid #ccc;
						border-bottom: 1px solid #ccc;
						padding: 0.2em 0;
						margin-top: -1px;
					}

					.tooltipster-show .copyright {
						display: block;
						position: absolute;
						bottom: 12px;
						font-size: 10px;
						line-height: 120%;
						color: #777;
					}

		.inci.has-info {
			border-bottom: 1px dotted #1e9bd9;
			cursor: pointer;
			transition: all 0.1s ease-in-out;
		}

			.inci.has-info:hover {
				color: #1e9bd9;
				border-bottom: 1px solid #1e9bd9;
			}


.questionnaire-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.25rem;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.5rem;
	text-align: center;
	display: flex;
	overflow: hidden;
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

.questionnaire-icon span {
	display: block;
	width: 8%;
	height: 100%;
}

.questionnaire-icon span.letter {
	width: 68%;
	display: flex;
	justify-content: center;
	align-items: center;
}


.tabs {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px solid #111;
	margin-bottom: 1em;
}

	.tabs .tab {
		padding: 1em;
		border: 1px solid transparent;
		border-bottom-color: transparent;
		transform: translateY(1px);
		color: #666;
		cursor: pointer;
	}



	.tabs .tab.is-active {
		border: 1px solid #111;
		border-bottom-color: #fff;
		color: #111;
	}

	.tab-view {
		display: none;
	}

	.tab-view.is-active {
		display: block;
	}


.js-refresh {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/refresh.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

.download-csv {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/download.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

	.js-refresh:hover,
	.download-csv:hover {
		opacity: 1;
	}

.pagination ul {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5em;
	justify-content: center;
	margin-top: 1.5em;
}

.pagination ul li {
	border: 1px solid #ccc;
	padding: 0.5em;
	border-radius: 0.25rem;
	min-width: 2em;
	text-align: center;
	cursor: pointer;
	/* box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2) */
}

	.pagination ul li.is-current {
		background: #111;
		color: #fff;
		border-color: #111;
	}

	.pagination ul li:not(.is-current):hover {
		background: #eee;
	}

	.pagination ul li.sep {
		border-color: transparent;
		color: #666;
		padding-left: 0;
		padding-right: 0;
		box-shadow: none;
	}


.tab-view select,
.tab-view input[type='text'],
.tab-view input[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	border: 1px solid #333;
	padding: 0.75em 1em 0.75em 1em;
	background: #f8f8f8;
	font: inherit;
	font-size: 0.8em;
	border-radius: 0.2em;
	box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2)
}

.tab-view input[type='button'] {
	font-weight: 700;
	background: #111;
	color: #fff;
	cursor: pointer;
}

.tab-view select {
	padding: 0.75em 2em 0.75em 1em;
	background-image: url(img/arrow-down.svg);
	background-position: center right 0.75em;
	background-size: 0.75em auto;
	background-repeat: no-repeat;
}

.tab-view select:hover {
	background-color: #fff;
}


.inci-source-holder {
	display: none;
	background: #fff;
	padding: 1em;
	border-radius: 0.5em;
	box-shadow: 0 0 0.3em rgba(0,0,0,0.2)
}

.js-checkbox-activator.checked ~ .inci-source-holder {
	display: block;
}

.inci-source-holder label span {
	font-size: 0.8em;
}