@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'neutrafaceBook';
	src: url('../fonts/neutraface/book/Neutraface2Text-Book.eot?#iefix') format('embedded-opentype'),  
	url('../fonts/neutraface/book/Neutraface2Text-Book.otf')  format('opentype'),
		url('../fonts/neutraface/book/Neutraface2Text-Book.woff') format('woff'), 
		url('../fonts/neutraface/book/Neutraface2Text-Book.ttf')  format('truetype'), 
		url('../fonts/neutraface/book/Neutraface2Text-Book.svg#Neutraface2Text-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'neutrafaceDemi';
	src: url('../fonts/neutraface/demi/Neutraface2Text-Demi.eot?#iefix') format('embedded-opentype'),  
	url('../fonts/neutraface/demi/Neutraface2Text-Demi.otf')  format('opentype'),
		url('../fonts/neutraface/demi/Neutraface2Text-Demi.woff') format('woff'), 
		url('../fonts/neutraface/demi/Neutraface2Text-Demi.ttf')  format('truetype'), 
		url('../fonts/neutraface/demi/Neutraface2Text-Demi.svg#Neutraface2Text-Demi') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'neutrafaceslabbook';
	src: url('../fonts/neutraface/slabbook/NeutrafaceSlabText-Book.eot?#iefix') format('embedded-opentype'),  
		url('../fonts/neutraface/slabbook/NeutrafaceSlabText-Book.otf')  format('opentype'),
		url('../fonts/neutraface/slabbook/NeutrafaceSlabText-Book.woff') format('woff'), 
		url('../fonts/neutraface/slabbook/NeutrafaceSlabText-Book.ttf')  format('truetype'), 
		url('../fonts/neutraface/slabbook/NeutrafaceSlabText-Book.svg#NeutrafaceSlabText-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}


* 
{
    box-sizing: border-box;
}
*::before, *::after 
{
    box-sizing: border-box;
}

body
{
	color: #000;
	font-family: 'neutrafaceBook';
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

.ease,
.formElement input + label::before,
.checkboxRow input[type="checkbox"] + label::after,
.checkAll input[type="checkbox"] + label::after,
.tt-suggestion,
.tt-suggestion.tt-cursor::before
{
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.easeSlow
{
	-moz-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.hidden {
	display: none;
}

p
{
	margin: 0;
}

img
{
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	width: auto;
}

strong, b
{
	font-family: 'neutrafaceDemi';
	font-weight: 400;
}

.makeItClear
{
	clear: both;
}

#container, #header, form, form input, .formElement
{
	position: relative;
	width: 100%;
}

.bgHolder
{
	background-image: url('../img/bg.jpg');
	background-position: center;
	background-size: cover;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
}
.bgCover
{
	background-color: rgba(255,255,255,.70);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
}

	#mainContentHolder
	{
		align-items: center;
		display: flex;
		justify-content: center;
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		width: 100%;
		z-index: 5;
	}

	#mainContentBox
	{
		/*background-color: rgba(255,255,255,.90);
		border-top: 5px solid #db0010;
		box-shadow: rgba(0,0,0,.20) 1px 1px 3px;*/
		max-width: 700px;
		padding: 20px 40px 40px;
		position: relative;
		width: 100%;
	}
		#mainContentBox::after
		{
			background-color: rgba(255,255,255,.90);
			content: '';
			height: 100%;
			left: 0;
			position: absolute;
			top: 50%;
			-moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			-moz-transition: all .6s ease-in-out;
			-ms-transition: all .6s ease-in-out;
			-o-transition: all .6s ease-in-out;
			-webkit-transition: all .6s ease-in-out;
			transition: all .6s ease-in-out;
			width: 100%;
			z-index: -1;
		}
		#mainContentBox.loaded::after { height: 200vh; }

		#header 
		{ 
    		border-bottom: 1px solid #F0F0F0;
			margin-bottom: 20px;
			text-align: center;
			padding-bottom: 20px;
		}
			.header-logo
			{
				margin: 0 auto 20px;
				width: 95px;
			}
			#header img { width: 100%; }
			
			h1
			{
				color: #333;
				/*font-family: 'lillybelle';*/
				font-size: 28px;
				line-height: 1em;
				margin: 0 0 20px;
				text-transform: uppercase;
			}
			h3
			{
				color: #AAA;
				font-family: 'neutrafaceDemi';
				font-size: 16px;
				margin: 0 0 20px;
			}
				#header h1, #header h3 
				{
					line-height: 1em;
					margin-bottom: 0;
				}
				#header h3 { margin-top: -2px; }
			
		#opening, #catChoose
		{
			overflow: hidden;
		}
			p.welcomeGreeting,
			p.textStyle
			{
				margin-bottom: 10px;
			}
			
			p.welcomeGreeting
			{
				/*font-family: 'neutrafaceDemi';*/
				font-size: 18px;
			}
				p.welcomeGreeting span
				{
					font-family: 'neutrafaceslabbook';
					font-size: 24px;
					margin-left: 5px;
				}
				
			p.textStyle
			{
				font-size: 18px;
				text-align: left;
			}
				p.textStyle span
				{
					color: #db0010;
					font-family: 'neutrafaceDemi';
				}
	
	.buttonStyle
	{
		background-color: #db0010;
		border: 1px solid #db0010;
		box-shadow: none;
		color: #FFF;
		cursor: pointer;
		font-family: 'neutrafaceDemi';
		font-size: 18px;
		height: 45px;
		line-height: 1em;
		margin: 20px auto 0;
		max-width: 460px;
		outline: none;
		padding: 14px 10px 10px;
		position: relative;
		text-align: center;
		text-transform: uppercase;
		width: 100%;
	}
		.buttonStyle:hover
		{
			background-color: transparent;
			color: #db0010;
		}

		.disableButton
		{
			opacity: .3;
			pointer-events: none;
		}
	
	/* KATEGORIA VALASZTO */
	.checkboxRow
	{
		margin: 0 auto;
		max-width: 460px;
	}
		.checkboxRow
		{
			margin-bottom: 10px;
			position: relative;
		}
			.checkboxRow input[type="checkbox"],
			.checkAll input[type="checkbox"]
			{
				display: none;
			}
			.checkboxRow input[type="checkbox"] + label,
			.checkAll input[type="checkbox"] + label
			{
				cursor: pointer;
				display: block;
				font-size: 16px;
				padding-left: 30px;
				position: relative;
			}
				.checkboxRow input[type="checkbox"] + label::before,
				.checkboxRow input[type="checkbox"] + label::after,
				.checkAll input[type="checkbox"] + label::before,
				.checkAll input[type="checkbox"] + label::after
				{
					background-color: #FFF;
					border: 2px solid #CCC;
					content: '';
					height: 15px;
					left: 0;
					position: absolute;
					top: 2px;
					width: 15px;
				}
				.checkboxRow input[type="checkbox"] + label::after,
				.checkAll input[type="checkbox"] + label::after
				{
					background-color: transparent;
					background-image: url('../img/check.svg');
					background-position: center;
					background-repeat: no-repeat;
					border: none;
					height: 25px;
					left: -1px;
					opacity: 0;
					top: -7px;
					width: 25px;
				}
					.checkAll input[type="checkbox"] + label::after { background-image: url('../img/check_red.svg'); }
					
					.checkboxRow input[type="checkbox"]:checked + label::after,
					.checkAll input[type="checkbox"]:checked + label::after
					{
						opacity: 1;
					}
					
		.checkAll 
		{ 
			margin: 20px auto;
			max-width: 460px;
		}
	
	/* FORM */
	form
	{
		margin: 0 auto;
		max-width: 460px;
	}
	#authenticationForm, #votePage { overflow: hidden; }
	#votePage, #catChoose { height: 0; }
	
	.formElement
	{
		margin-bottom: 15px;
	}
		.formElementInput
		{
			height: 45px;
			margin-bottom: 25px;
			position: relative;
			width: 100%;
		}
			.formElement .fa-exclamation-triangle
			{
				color: #eb5024;
				display: none;
				font-size: 24px;
				position: absolute;
				right: 10px;
				top: 10px;
			}
			.formElement input[type="text"], .formElement input[type="password"]
			{
			    -webkit-appearance: none;
				background: transparent;
				border: none;
    			border-radius: 0;
				display: block;
				font-size: 18px;
				height: 100%;
				left: 0;
				outline: none;
				padding: 10px 40px 10px 10px;
				position: absolute;
				text-align: left;
				top: 0;
				width: 100%;
				z-index: 10;
			}
			.formElement input[type="text"] + label, .formElement input[type="password"] + label
			{
				cursor: text;
				display: block;
				height: 45px;
				position: relative;
				width: 100%;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
				.formElement input[type="text"] + label::before, .formElement input[type="password"] + label::before
				{
					border: 1px solid #CCC;
					content: '';
					display: block;
					height: 100%;
					left: 0;
					pointer-events: none;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 2;
				}
				.formElement input[type="text"] + label span, 
				.formElement input[type="password"] + label span
				{
					color: #999;
					font-family: 'neutrafaceDemi';
					font-size: 20px;
					height: 100%;
					left: 0;
					padding: 8px 10px;
					position: absolute;					
					text-align: left;
					top: 0;
					width: 100%;
				}
				
				.formElement input[type="text"]:focus + label span,
				.filled input[type="text"] + label span,
				.formElement input[type="password"]:focus + label span,
				.filled input[type="password"] + label span,
				.formElement .activeInput input[type="text"] + label span,
				.formElement .activeInput input[type="password"] + label span
				{
					font-size: 16px;
					padding-left: 0;
					top: -30px;
				}
				.formElement input[type="text"]:focus + label::before,
				.filled input[type="text"] + label::before,
				.formElement input[type="password"]:focus + label::before,
				.filled input[type="password"] + label::before,
				.formElement .activeInput input[type="text"] + label::before,
				.formElement .activeInput input[type="password"] + label::before { border: 1px solid #CCC; }
			
			input[type="submit"]
			{
				background-color: #999;
				border: 1px solid #999;
				box-shadow: none;
				color: #FFF;
				cursor: pointer;
				font-family: 'neutrafaceDemi';
				font-size: 18px;
				height: 45px;
				line-height: 1em;
				padding: 10px 10px;
				outline: none;
				text-align: center;
				text-transform: uppercase;
			}
				input[type="submit"]:hover
				{
					background-color: #FFF;
					color: #999;
				}
			
			input:-webkit-autofill,
			input:-webkit-autofill:hover, 
			input:-webkit-autofill:focus
			input:-webkit-autofill
			{
				background-color: rgba(255,255,255,0) !important;
				border: 1px solid #CCC !important;
				-webkit-text-fill-color: #000;
				-webkit-box-shadow: 0 0 0px 1000px white inset !important;
			}
		
	/* typeahead MIATTI MODOSITAS */	
		span.twitter-typeahead
		{
			height: 45px;
			width: 100%;
			z-index: 20;
		}
		.formElementInput label
		{
			cursor: text;
			display: block;
			height: 45px;
			left: 0;
			position: absolute;
			top: 0;
			z-index: 10;
			width: 100%;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
				.formElementInput label::before
				{
					border: 1px solid #CCC;
					content: '';
					display: block;
					height: 100%;
					left: 0;
					pointer-events: none;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 2;
				}
				.formElementInput label.activeInput span
				{
					font-size: 16px;
					padding-left: 0;
					top: -30px;
				}
					.formElementInput label.activeInput::before { border: 1px solid #CCC; }
					
			.formElementInput label span
			{
				color: #999;
				font-family: 'neutrafaceDemi';
				font-size: 20px;
				height: 100%;
				left: 0;
				padding: 8px 10px;
				position: absolute;					
				text-align: left;
				top: 0;
				width: 100%;
			}
		
		.tt-menu
		{
			background-color: #fff;
			border: 1px solid #ccc;
			border: 1px solid rgba(0, 0, 0, 0.2);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
			-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
			box-shadow: 0 5px 10px rgba(0,0,0,.2);
			margin: 12px 0;
			padding: 8px 0;
			width: 100%;
		}
			.tt-dataset
			{
				max-height: 175px;
				overflow-y: auto;
			}
			.tt-suggestion
			{
				cursor: pointer;
				padding: 5px 10px 5px 25px;
				position: relative;
				width: 100%;
			}
				.tt-suggestion::before
				{
					background-color: #CCC;
					content: '';
					height: calc(100% - 10px);
					left: 10px;
					position: absolute;
					top: 5px;
					width: 5px;
				}
				p.workerName
				{
					color: #000;
				    font-family: 'neutrafaceDemi';
					font-size: 18px;
				    line-height: 1.2em;
					margin: 0;
					padding-top: 3px;
				}
					strong.tt-highlight { color: #db0010; }
				p.workerPos
				{
				    color: #999;
					font-size: 12px;
					text-transform: uppercase;
				}
				
				span.workerName
				{
					color: #000;
				    font-family: 'neutrafaceDemi';
					font-size: 18px;
				}
				p.workerPos
				{
					color: #999;
					font-size: 12px;
					margin-left: 5px;
					text-transform: uppercase;
				}
				
			.tt-suggestion.tt-cursor,
			.tt-suggestion:hover
			{
				background-color: #F0F0F0;
			}
				.tt-suggestion.tt-cursor::before, .tt-suggestion:hover::before { background-color: #db0010; }
		
		.emptyResult
		{
			color: #db0010;
			font-family: 'neutrafaceDemi';
			font-size: 18px;
			padding: 10px;
		}
		
		.formElement textarea
		{
			border: 1px solid #CCC;
			font-family: 'neutrafaceBook';
			font-size: 18px;
			height: 150px;
			line-height: 1.3em;
			outline: none;
			padding: 10px;
			position: relative;
			resize: none;
			width: 100%;
		}
		
		p.catTitle
		{
			display: inline-block;
			font-family: 'neutrafaceDemi';
    		font-size: 18px;
			margin-bottom: 5px;
			position: relative;
		}
			p.catTitle::after
			{
				background-color: #000;
				bottom: 0;
				content: '';
				display: block;
				height: 2px;
				left: 0;
				position: absolute;
				width: 100%;
			}

			.catTitle-en
			{
				font-size: 16px;
				margin-bottom: 20px;
				text-transform: uppercase;
			}

		p.catExplain
		{
			color: #333;
			font-family: 'neutrafaceslabbook';
			font-size: 18px;
			line-height: 1.2em;
			margin-bottom: 25px;
		}
		
	#voteFormSubmit { margin-top: 20px; }
	
	#voteForm { overflow: hidden; }
	
	.dots
	{
		margin-bottom: 20px;
		text-align: center;
	}
		.dots span
		{
			background-color: #CCC;
			border-radius: 100%;
			cursor: pointer;
			/*display: none;*/
			display: inline-block;
			height: 10px;
			margin: 0 2px;
			position: relative;
			width: 10px;
		}
			.dots span.activeDot { background-color: #db0010; }
			.dots span.doneDot { background-color: #000; }
	
	.allVotePage
	{
		display: flex;
		position: relative;
		width: 3220px;
	}
		.categoryPage 
		{ 
			/*display: none;*/
			flex-basis: 0;
			flex-grow: 1;
			padding: 0 5px;
		}
		
		.nextPage,
		.prevPage,
		#sendVote
		{
			background-color: transparent;
			border: 1px solid #db0010;
			box-shadow: none;
			color: #db0010;
			cursor: pointer;
			display: inline-block;
			font-family: 'neutrafaceDemi';
			font-size: 14px;
			height: 45px;
			line-height: 1em;
			margin: 20px 5px 0;
			max-width: 460px;
			outline: none;
			padding: 14px 10px 10px;
			position: relative;
			text-align: center;
			text-transform: uppercase;
		}
			.nextPage:hover,
			.prevPage:hover
			{ 
				background-color: transparent;
				color: #db0010;
			}

			.nextPage
			{
				background-color: #db0010;
				border: 1px solid #db0010;
				color: #FFF;
			}
	
	#catChooseWarning,
	#votePageErrorMessage
	{
		color: #db0010;
		display: none;
		font-family: 'neutrafaceDemi';
		font-size: 15px;
	    line-height: 1.2em;
		margin-bottom: 15px;
		text-align: center;
	}
	
#thankYouPage { display: block !important; } 
	#thankYouPage h4
	{
		color: #db0010;
		font-family: 'neutrafaceslabbook';
		font-size: 20px;
		line-height: 1.4em;
		text-align: center;
	}
	
#authenticationForm .formElement { padding-top: 20px; }

/* 2018.12.05 ATALAKITAS */
.flexBox
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.voteNavigation
{
	justify-content: space-between;
}

#voteLayer
{
	align-items: center;
	background-color: rgba(255,255,255,.8);
	height: 100vh;
	justify-content: center;
	left: 0;
	opacity: 0;
	padding: 20px;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}
	#voteLayer.active
	{
		opacity: 1;
		pointer-events: all;
	}

	.voteBox
	{
		background-color: #FFF;
		border: 5px solid #db0010;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		max-width: 500px;
		padding: 40px;
		position: relative;
		text-align: center;
		width: 100%;
	}
		.voteBox p
		{
			font-family: 'neutrafaceDemi';
			font-size: 20px;
			margin-bottom: 25px;
		}
		#sendVote
		{
			background-color: #db0010;
			border: 1px solid #db0010;
			color: #FFF;
		}
			#sendVote.disableButton
			{
				background-color: transparent;
				border: 1px solid #db0010;
				color: #db0010;
			}
		#sendVote:hover
		{
			background-color: #FFF;
			color: #db0010;
		}

		.closeLayer
		{
			cursor: pointer;
			font-size: 24px;
			padding: 5px 10px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 10;
		}
	
@media screen and (max-width: 767px)
{
	#mainContentBox { padding: 10px 20px 20px; }
		
		#header { padding-bottom: 10px; }
			#header img { max-width: 50px; }
			h1 { font-size: 22px; }
			h3 { font-size: 14px; }
		
		p.welcomeGreeting,
		p.textStyle,
		.buttonStyle,
		p.catTitle, p.catExplain,
		.emptyResult, p.workerName,
		.formElement textarea
		{
			font-size: 16px;
		}
			p.welcomeGreeting span { font-size: 20px; }
		
		.formElementInput { margin-bottom: 15px; }
			.formElementInput label span 
			{ 
				font-size: 18px;
				padding: 10px;
			}
			.formElement textarea { line-height: 1.2em; }
		
		p.workerPos { font-size: 11px; }
		
		.dots { margin-bottom: 10px; }

		.nextPage, .prevPage, #sendVote { font-size: 12px; }
}