@import "css/fx.css";

html, body {
	background:#000;
	color:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

body .en, body.en .hu,  body.en .lang-selector {display:none;}
a,a:hover { color:#fff; text-decoration:none;}

body.en .en {display:block;}

/* LAYOUT */

.lang-selector {
	cursor:pointer;
	display:block;
	position: fixed;
	right:5px;
	top: 5px;
}
	.lang-selector img{
		width: 30px;
	}
	
.left {
	background:#000;
	color:#fff;
	display: inline-block;
	float: left;
	height: 100vh;
	text-align: center;
	width: 50%;
}

.right {
	background:#222222;
	color:#fff;
	display: inline-block;
	height: 100vh;
	text-align: center;
	width: 50%;
}

.big {
	background:#000;
	color:#fff;
	display: inline-block;
	height: 100vh;
	text-align: center;
	width: 100%;
}

.table-div {display:table; height:100%; line-height: 1.15; width:100%;}
.td-cell {display:table-cell; height:100%; padding: 0 40px; text-align:center; vertical-align:middle; width:100%;}



/* CONTENT */

.large_letter { 
	font-size:34vw;
	font-weight:700;
	text-transform:uppercase;
}

.right .large_letter {
	color:#a3a3a3;
}


p.instruction {}


/* video*/ 
#stage_l2 .left {line-height:100%;}
.video-container {
	display: table-cell;
	height:100%;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}

#video1 {
	line-height:1;
	max-height:24%;
	max-height:23vw;
	
}

input[type="text"] {
	border-radius:0;
	border	:1px solid #000;
	margin:0 5px 10px; 
	padding:5px 8px;
}

.link {
	cursor: pointer;
}

.szolista {
	line-height: normal;
	max-height: 70vh;
	overflow-y: auto;
	margin: 45px 25px;
}

#szolista1 .word:nth-child(2n),
#szolista2 .word:nth-child(3n)  {
	margin-right:5px;
}

#szolista1 .word:nth-child(2n):after,
#szolista2 .word:nth-child(3n):after   {
	color:#555;
	content: "\2013";
	margin-left: 5px;	
}

#stage0, #stage_l0, #stage_r0 {
	display: block;
}

#stage_l1, #stage_l2, #stage_r1, #stage_r2, #stage1, #stage2 {
	display: none;
}

.restart {
	bottom: 0;
	display: none;
	height: 43px;
	left: calc(50vw - 50px);
	position: absolute;
	text-align: center;
	width: 100px;
	z-index: 100;
}

 .restart a { 
	background:transparent url(img/back.png) no-repeat center center;
	border: none;
	cursor: pointer;
	display: block;
	height: 43px;
	margin:0 auto;
	outline:0;
	overflow: hidden;
	padding: 0;
	text-indent: -3000px;
	width: 80px;
	z-index: 100; 
 
 }

#stage0 .next {
	background:transparent url(img/next.png) no-repeat center center;
	border: none;
	cursor: pointer;
	display: block;
	height: 50px;
	left: calc(50vw - 24px);
	overflow: hidden;
	outline:0;
	padding: 0;
	position: absolute;
	text-indent: -3000px;
	top: calc(50vh - 25px);
	width: 74px;
	z-index: 100;
}

.mail {
	display:block;
	font-weight:700;
	margin:15px 0 0 0;
	text-align:center;
}

.colophon {
	line-height: 1.25;
	margin:0 auto;
	max-width:600px;
	text-align:left !important;
}

h1.title {
/* font-size: 22px;
	font-weight:normal;
	text-align:center; */
	line-height:1.1;
}

#stage3 .colophon-link  {
	bottom: 45px;
	height: 20px;
	position: absolute;
	right:5px;
	text-align: center;
	width: 50%;
	z-index: 100;
}

	.colophon a,
	#stage3 .colophon-link a.next {
		color:#ffeaab;
		display:inline-block;
		cursor:pointer;
	}
	
.szolista::nth-word() {
  margin: 0 10px 0 0;
}
	
/* @media only screen and (max-width: 600px) and (min-width: 400px) {...}  */

@media only screen and (max-width: 800px) {
	.td-cell {padding: 0 15px;}
	.szolista { max-height: 74vh;}
}

@media only screen and (max-width: 420px) {
	.td-cell {padding: 0 5%;}
	.szolista {margin: 45px 10px;}	
	.right input[type="text"] {float: right; margin: 0 0 10px; width: 90%;}
	
}

@media only screen and (max-height: 320px) {
	.szolista { max-height: 60vh;}
	.right input[type="text"] {float: right;width: 40%;}
}


@media only screen and (max-width: 280px) {
	
	.lang-selector {
		cursor: pointer;
		display: block;
		position: fixed;
		right: 0;
		top: 5px;
		text-align: center;
		width: 100%;
	}
		.lang-selector img{
			height:auto;
			margin:0 auto;
			max-width:30px;
			width:70%;
			
		}
	
/* 	.td-cell {padding: 0; text-align:center;}
	
	.right input[type="text"] {width: 100%;} */
}