/************* GENERAL STYLES ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline; }

:focus { outline: 0; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	font-family: 'Lato', sans-serif;
	font-size: 22px;
	line-height: 1.3;
	color: #222;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden; }

ul, ol { padding: 0 0 1.3rem 30px; }
	
	ul li, ol li { margin: 0 0 8px; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0; }

caption, th, td {
	text-align: left;
	font-weight: normal; }

blockquote:before, blockquote:after,
q:before, q:after {
	content: ""; }

blockquote, q { quotes: "" ""; }

img {
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0; }


/*** FONT STYLES ***/

/*
font-family: 'Fira Sans Condensed', sans-serif;
font-family: 'Lato', sans-serif;
*/

.h1 { 
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 72px;
	font-weight: bold;
	line-height: 1; }

.h1 + p { margin-top: 3rem; }

.h2 { 
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 48px;
	font-weight: bold;
	line-height: 1; }

.h2 + p { margin-top: 3rem; }

a:link, a:visited { 
	color: #677fa5;
	text-decoration: none; }
	
a:hover { text-decoration: underline; }

p { margin-bottom: 1.3rem; }

strong { font-weight: bold; }

em { font-style: italic; }

sup, sub { 
	font-size: 75%;
	line-height: 0;
	position: relative; }

sup { top: -0.5em; }
sub { bottom: -0.25em; }

hr { 
	height: 1px;
	margin: 1.5rem 0;
	background: #666;
	border-bottom: none; }

.medium_txt {
	font-size: 25px;
}

.larger_txt {
	font-size: 26px;
}

/*** STRUCTURE STYLES ***/
#app {
	width: 100vw;
	height: 100vh;
	height: var(--vh100, 100vh); }

	#app section { 
		-ms-grid-column: 1;
		-ms-grid-row: 1; }

.wrapper {
	width: 100%;
	max-width: 1104px;
	padding: 0 40px;
	margin: 0 auto; }

section {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden; }

.grid { 
	display: -ms-grid; 
	display: grid; }

.grid-center {
	width: 100%;
	-ms-grid-row-align: center;
	align-self: center;
	-ms-grid-column-align: center;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.grid-centerLeft { 
	-ms-grid-row-align: center;
	align-content: center; }

.hide { display: none; }

.titlePage { 
	-ms-grid-rows: 1fr 104px; 
	grid-template-rows: 1fr 104px;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.titlePage2 { 
	-ms-grid-rows: 90px 1fr 104px; 
	grid-template-rows: 90px 1fr 104px;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.innerPage { 
	-ms-grid-rows: 90px 1fr 90px; 
	grid-template-rows: 90px 1fr 90px;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.testPage-single { 
	-ms-grid-rows: auto 1fr auto; 
	grid-template-rows: auto 1fr auto;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.bg-darkGradient {
	background: #121517;
	background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(57,58,60,1)),color-stop(30%, rgba(18,21,23,1)));
	background: -o-linear-gradient(top,  rgba(57,58,60,1) 0%,rgba(18,21,23,1) 30%);
	background: linear-gradient(to bottom,  rgba(57,58,60,1) 0%,rgba(18,21,23,1) 30%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393a3c', endColorstr='#121517',GradientType=0 );
	color: #fff; }

.bg-dark { 
	background: #121517;
	color: #fff; }

.bg-white { 
	background: #fff;
	color: #222; }

.centerTitle {
	max-width: 880px;
	padding: 0 40px;
	margin: auto;
	text-align: center; }

	.centerTitle .logo {
		width: 170px;
		margin-bottom: 50px; }

.innerPage .main { padding-top: 60px; }


/*** HEADER ***/
header.titles { 
	padding-top: 40px;
	font-size: 28px; }

	header.titles .label {
		height: 50px;
		background: #fff;
		color: #222;
		line-height: 50px; }

	header.titles .left { 
		float: left;
		padding-right: 20px;
		padding-left: 40px;
		border-radius: 0 5px 5px 0;
		text-align: left; }

	header.titles .right { 
		float: right;
		padding-right: 40px;
		padding-left: 20px;
		border-radius: 5px 0 0 5px;
		text-align: right; }


/*** FOOTER ***/
footer { padding: 0 40px; }

footer.center { text-align: center; }

	footer.btns a {
		width: 192px;
		height: 50px;
		display: inline-block;
		padding: 4px;
		border: 2px solid #253269;
		border-radius: 32px;
		text-align: center;
		font: inherit;
		font-size: 16px;
		font-weight: bold;
		line-height: 38px; }

	footer.btns a.twin { width: 300px; }

	footer.big a {
		width: 248px;
		height: 64px;
		padding: 5px;
		font-size: 20px;
		line-height: 50px; }

	footer.center a { margin: 0 10px; }

	footer.right > div { float: right; }

	footer.right a { margin-left: 12px; }

		footer.btns a i {
			width: 38px;
			height: 38px;
			border-radius: 50%;
			line-height: 38px;
			font-style: normal; }

		footer.big a i {
			width: 50px;
			height: 50px;
			line-height: 50px; }

		footer.btns a i.left { float: left; }
		footer.btns a i.right { float: right; }

	footer.btns a.white { 
		background: #fff;
		color: #253269; }

		footer.btns a.white i { 
			background: #253269;
			color: #fff; }

	footer.btns a.blue { 
		background: #253269;
		color: #fff; }

		footer.btns a.blue i { 
			background: #fff;
			color: #253269; }

	footer.btns a:hover { text-decoration: none; }


/*** EXAMPLE ***/
figure.example {
	padding: 47px 0 20px;
	margin: 0;
	position: relative;
	background: #fff;
	text-align: center; }

	figure.example:before {
		content: "Example";
		width: 100px;
		height: 37px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background: #EDEDED;
		border-radius: 0 0 8px;
		color: #A5A5A5;
		text-align: center;
		font-size: 14px;
		line-height: 37px; }


/*** INSTRUCTIONS ***/
#pg-instructions-1 .grid-2col { 
	-ms-grid-rows: 1fr; 
	grid-template-rows: 1fr;
	-ms-grid-columns: 1fr 472px; 
	grid-template-columns: 1fr 472px; }

#pg-instructions-1 .grid-2col .grid-centerLeft { -ms-grid-column: 1; }

#pg-instructions-1 .grid-2col .food { 
	-ms-grid-column: 2;
	text-align: center;
	font-size: 0; }

	#pg-instructions-1 .grid-2col .food img { width: 50%; }

#pg-instructions-2 p,
#pg-instructions-3 p {
	max-width: 750px;
	margin: 0 auto 40px; }


/*** TEST PAGE SINGLE FOODS ***/
/*.testPage-single header {
	padding: 40px;
	background: #69b0ed;
	text-align: center;
	font-size: 32px;
	font-weight: bold; }

.testPage-single .main { 
	-ms-grid-rows: 1fr;
	-ms-grid-columns: 1fr;
	height: 65%;
	overflow: hidden; }

	.testPage-single figure {
		height: 100%;
		padding: 40px 24px;
		display: block;
		margin-left: auto;
		overflow: hidden;
		text-align: center; }

	.testPage-single .main img { 
		max-height: 100%;
		margin: auto; }

.testPage-single footer { 
	padding: 0;
	font-size: 18px; }*/
	
.testPage-single header {
	padding: 40px;
	background: #69b0ed;
	text-align: center;
	font-size: 32px;
	font-weight: bold; }

.testPage-single .main { 
	-ms-grid-rows: 1fr;
	-ms-grid-columns: 1fr;
	overflow: hidden; }

	.testPage-single figure {
		padding: 40px 24px;
		overflow: hidden;
		/*
		display: block;
		margin-left: auto;
		margin-right: auto;
		*/
		text-align: center; }

	.testPage-single .main img { 
		max-height: 100%;
		margin: auto; }

.testPage-single footer { 
	padding: 0;
	font-size: 18px; }




	.testPage-single footer .grid { 
		-ms-grid-rows: 1fr;
		-ms-grid-columns: 150px 1fr 150px; 
		grid-template-columns: 150px 1fr 150px; }

	.testPage-single footer label { display: block; }
	
	.testPage-single footer .left { 
		-ms-grid-column: 1;
		-ms-grid-row-align: center;
		align-self: center;
		text-align: center; }

	.testPage-single footer .middle { -ms-grid-column: 2; }

	.testPage-single footer .right { 
		-ms-grid-column: 3;
		-ms-grid-row-align: center;
		align-self: center;
		text-align: center; }
	
	.testPage-single footer .btn { 
		padding: 0 0 24px;
		text-align: center; }

		.testPage-single footer .btn a {
			width: 192px;
			height: 40px;
			display: inline-block;
			padding: 0 4px;
			background: #253269;
			border-radius: 32px;
			text-align: center;
			color: #fff;
			font: inherit;
			font-size: 15px;
			font-weight: bold;
			line-height: 40px; }

		.testPage-single footer .btn a.disabled {
			background: #ddd;
			color: #aaa;
			cursor: not-allowed; }

		.testPage-single footer .btn a:hover { text-decoration: none; }


/*** TEST PAGE PAIRED FOODS ***/
.testPage-paired {
	-ms-grid-rows: 1fr; 
	grid-template-rows: 1fr;
	-ms-grid-columns: 1fr; 
	grid-template-columns: 1fr; }

.testPage-paired .main { 
	margin: auto;
	text-align: center; }

	.testPage-paired .main .left,
	.testPage-paired .main .right { 
		width: 50%;
		float: left; }

	.testPage-paired .main img { 
		max-height: 100vh;
		margin: auto; }

.testPage-paired .x, .testPage-single .x {
	text-align: center;
	font-size: 72px;
	font-weight: bold; }

/*** RANGE SLIDER ***/
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	height: 110px;
	background: transparent;
	overflow: visible; }

input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; }

input[type=range]:focus { outline: none; }

input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent; }

/* STYLE THUMB */
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 60px;
	margin-top: -25px;
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	cursor: pointer; }
	
	input[type=range].liking_range::-webkit-slider-thumb {
		background: #3e93da;
		border: 1px solid #1C7ACC; }
	
	input[type=range].wanting_range::-webkit-slider-thumb {
		background: #e9dfc9;
		border: 1px solid #d8c190; }

input[type=range]::-moz-range-thumb {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	cursor: pointer; }
	
	input[type=range].liking_range::-moz-range-thumb {
		background: #3789D1;
		border: 1px solid #1C7ACC; }
		
	input[type=range].wanting_range::-moz-range-thumb {
		background: #e9dfc9;
		border: 1px solid #d8c190; }

input[type=range]::-ms-thumb {
	width: 60px;
	height: 60px;
	margin-top: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	cursor: pointer; }
	
	input[type=range].liking_range::-ms-thumb {
		background: #3789D1;
		border: 1px solid #1C7ACC; }
		
	input[type=range].wanting_range::-ms-thumb {
		background: #e9dfc9;
		border: 1px solid #d8c190; }


/* STYLE TRACK */
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 12px;
	background: #E2E2E2;
	border-radius: 12px;
	cursor: pointer; }

input[type=range]:focus::-webkit-slider-runnable-track { background: #E2E2E2; }

input[type=range]::-moz-range-track {
	width: 100%;
	height: 12px;
	cursor: pointer;
	background: #E2E2E2;
	border-radius: 12px; }

input[type=range]::-ms-track {
	width: 100%;
	height: 12px;  
	background: #E2E2E2;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	color: transparent; }


/*** PRELOADER ***/
#open-application-screen {
	z-index: 9998 !important; }

#open-application-screen img {
	max-width: 200px;
}

#preloader, #open-application-screen {
	width: 100vw;
	height: 100vh;
	height: var(--vh100, 100vh);
	position: fixed;
	z-index: 9999;
	-ms-grid-columns: 1fr;
	-ms-grid-rows: 1fr;
	background: #121517;
	background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(57,58,60,1)),color-stop(30%, rgba(18,21,23,1)));
	background: -o-linear-gradient(top,  rgba(57,58,60,1) 0%,rgba(18,21,23,1) 30%);
	background: linear-gradient(to bottom,  rgba(57,58,60,1) 0%,rgba(18,21,23,1) 30%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393a3c', endColorstr='#121517',GradientType=0 );
	text-align: center;
	color: #fff; }
	
	#preloader .main, #open-application-screen .main { margin: auto; }
	
	#preloader .loading {
		width: 80px;
		height: 80px;
		display: inline-block;
		position: relative;
		border-radius: 50%;
		overflow: hidden; }

		#preloader .loading div {
			position: absolute;
			border: 4px solid #fff;
			opacity: 1;
			border-radius: 50%;
			box-sizing: content-box;
			-webkit-animation: loadingAnim 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
			animation: loadingAnim 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

		#preloader .loading div:nth-child(2) { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; }

@-webkit-keyframes loadingAnim {
	0% {
		width: 0;
		height: 0;
		top: 36px;
		left: 36px;
		opacity: 1;
	}
	100% {
		width: 72px;
		height: 72px;
		top: 0px;
		left: 0px;
		opacity: 0;
	}
}

@keyframes loadingAnim {
	0% {
		width: 0;
		height: 0;
		top: 36px;
		left: 36px;
		opacity: 1;
	}
	100% {
		width: 72px;
		height: 72px;
		top: 0px;
		left: 0px;
		opacity: 0;
	}
}


/*** IE GRID FIXES ***/
.titlePage .main { 
	-ms-grid-column: 1;
	-ms-grid-row: 1; }

.titlePage footer.btns { -ms-grid-row: 2; }

.titlePage2 header.titles { -ms-grid-row: 1; }
.titlePage2 .main { -ms-grid-row: 2; }
.titlePage2 footer.btns { -ms-grid-row: 3; }

.innerPage header.titles { -ms-grid-row: 1; }
.innerPage .main { -ms-grid-row: 2; }
.innerPage footer.btns { -ms-grid-row: 3; }

.testPage-single header { -ms-grid-row: 1; }
.testPage-single .main { -ms-grid-row: 2; }
.testPage-single footer { -ms-grid-row: 3; }
	
	
/*** MEDIA QUERIES ***/

/*** 1280px ***/
@media screen and (max-width: 1280px) {

	
	
}


/*** 1024px ***/
@media screen and (max-width: 1024px) {

	body { font-size: 18px; }

	.h1 { font-size: 60px; }

	.titlePage2 { -ms-grid-rows: 84px 1fr 104px; grid-template-rows: 84px 1fr 104px; }
	.innerPage { -ms-grid-rows: 84px 1fr 90px; grid-template-rows: 84px 1fr 90px; }

	header.titles { font-size: 18px; }

		header.titles .label {
			height: 44px;
			line-height: 44px; }

	figure.example img { width: 800px; }

	#pg-instructions-1 .grid-2col { -ms-grid-columns: 1fr 400px; grid-template-columns: 1fr 400px; }
	
}


/*** 800px ***/
@media screen and (max-width: 800px) {
	
	body { font-size: 16px; }

	.h1 { font-size: 50px; }
	
	.medium_txt {
		font-size: 22px;
	}
	
	.hideMobile {
		display: none !important;
	}
	
	.wrapper { padding: 0 24px; }

	.titlePage { -ms-grid-rows: 1fr 74px; grid-template-rows: 1fr 74px; }
	.titlePage2 { -ms-grid-rows: 64px 1fr 74px; grid-template-rows: 64px 1fr 74px; }
	.innerPage { -ms-grid-rows: 64px 1fr 74px; grid-template-rows: 64px 1fr 74px; }

	.innerPage .main { padding-top: 40px; }

	.centerTitle .logo { width: 140px; }

	header.titles { 
		padding-top: 24px;
		font-size: 16px; }

		header.titles .left { padding-left: 24px; }
		header.titles .right { padding-right: 24px; }

	footer { padding: 0 24px; }

		footer.big a {
			width: 192px;
			height: 50px;
			padding: 4px;
			font-size: 16px;
			line-height: 38px; }

			footer.big a i {
				width: 38px;
				height: 38px;
				line-height: 38px; }

		footer.center a { margin: 0 6px; }

	figure.example img { width: 600px; }

	#pg-instructions-1 .grid-2col { -ms-grid-columns: 1fr 300px; grid-template-columns: 1fr 300px; }

	.testPage-single header {
		padding: 24px;
		font-size: 24px; }

	.testPage-single footer { font-size: 16px; }

		.testPage-single footer .grid { -ms-grid-columns: 110px 1fr 110px; grid-template-columns: 110px 1fr 110px; }

	input[type=range] { height: 90px; }

	input[type=range]::-webkit-slider-thumb {
		width: 50px;
		height: 50px;
		margin-top: -20px; }

	input[type=range]::-moz-range-thumb {
		width: 50px;
		height: 50px; }

	input[type=range]::-ms-thumb {
		width: 50px;
		height: 50px;
		margin-top: 0; }
	
}


/*** 600px ***/
@media screen and (max-width: 600px) {

	
	
}


/*** 414px ***/
@media screen and (max-width: 414px) {

	.h1 { font-size: 32px; }

	.centerTitle .logo { 
		width: 120px;
		margin-bottom: 40px; }

	footer.btns { text-align: center; }

	footer.btns a,
	footer.big a {
		width: 150px;
		height: 50px;
		padding: 4px;
		font-size: 14px;
		line-height: 38px; }

	footer.btns a.twin { width: 250px; }

		footer.btns a i,
		footer.big a i {
			width: 30px;
			height: 30px;
			margin-top: 4px;
			line-height: 30px; }

	footer.center a,
	footer.right a { margin: 0 2px; }

	footer.right > div { float: none; }

	#pg-instructions-1 .grid-2col { -ms-grid-columns: 1fr 200px; grid-template-columns: 1fr 200px; }

	.testPage-single footer { font-size: 14px; }

		.testPage-single footer .grid { -ms-grid-columns: 100px 1fr 100px; grid-template-columns: 100px 1fr 100px; }

	input[type=range]::-webkit-slider-thumb {
		width: 32px;
		height: 32px;
		margin-top: -11px; }

	input[type=range]::-moz-range-thumb {
		width: 32px;
		height: 32px; }

	input[type=range]::-ms-thumb {
		width: 32px;
		height: 32px;
		margin-top: 0; }
	
}


/*** 375px ***/
@media screen and (max-width: 375px) {

	.h1 { font-size: 28px; }

	.centerTitle .logo { width: 100px; }

	#pg-instructions-1 .grid-2col { -ms-grid-columns: 1fr 160px; grid-template-columns: 1fr 160px; }

	.testPage-single header { font-size: 20px; }

	.testPage-single footer { font-size: 12px; }

		.testPage-single footer .grid { -ms-grid-columns: 80px 1fr 80px; grid-template-columns: 80px 1fr 80px; }
	
}


/*** 320px ***/
@media screen and (max-width: 320px) {

	.h1 { font-size: 24px; }

	footer.btns a,
	footer.big a {
		width: 130px;
		font-size: 12px;
		line-height: 38px; }

		footer.btns a i,
		footer.big a i {
			width: 30px;
			height: 30px;
			margin-top: 4px;
			line-height: 30px; }
	
}


@media screen and (min-width:0\0) {   /* IE 9/10 fix */
	.testPage-single figure { 
		display: block; 
		margin-left: auto; 
		margin-right: auto; 
	}
}