@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap&subset=latin-ext');

:root{
	--text-color:rgb(255,237,192);
	--btn-color:rgb(38,132,132);
	--btn-darkcolor:rgb(68,68,68);
}
.animate{
	-webkit-transition: all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out;
	transition: all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out, all 300ms ease-in-out;
}
*{
	font-family: 'Roboto Slab', serif;
	box-sizing:border-box;
}
body{
	color:#555555;
	margin:0;
	padding:0;
	font-size:100%;
	font-family: 'Roboto Slab', serif;
}
a, a:visited{
	text-decoration:none;
	color:#1FB8EF;
}
a:hover, a:active, a:focus{
	color:#000000;
}
h1,h2,h3,h4,h5{
	font-weight:normal;
	font-size:100%;
	margin:0;
	padding:0;
}
label, select, input[type="submit"]{cursor:pointer;}
.clear{
	clear:both;
}
div#page{
	background-position:top center;
	background-repeat:repeat;
}
#wrapper{
	position:fixed;
	width:100%;
	height:100vh;
	overflow:hidden;
	background-position:top center;
	background-size:100% 100%;
	background-repeat:repeat-all;
	background-image:url(../../../../images/bg.png);
}
#wrapper_content{
	width:100%;
	margin:auto;
}
#content{
	min-height:500px;
	width:100%;
}
#banner_wrapper{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
}
#banner{
	max-width:1600px;
	width:100%;
	margin:auto;
	height:auto;
}
#banner_content{
	padding-top:5px;
	padding-bottom:5px;
	color:white;
}
.banner_menu{
	top:2vw;
	right:2vw;
	width:auto;
	z-index:25;
	position:fixed;
}
.banner_menu img{
	width:10vw;
	height:10vw;
	min-width:30px;
	min-height:30px;
	max-width:100px;
	max-height:100px;
}
.title{
	font-size:150%;
	margin-top:10px;
	margin-bottom:10px;
}
#tb_wrapper{
	z-index:30;
	position:fixed;
	width:80%;
	height:80vh;
	top:10vh;
	left:10%;
	display:none;
	background-color:rgba(32,32,32,0.95);
}
#tb_content{
	z-index:31;
	position:fixed;
	width:80%;
	height:80vh;
	top:10vh;
	left:10%;
	display:none;
	overflow:auto;
	padding:2vw;
	color:var(--text-color);
	font-size:1.7vw;
}
#m_wrapper{
	z-index:30;
	position:fixed;
	width:80%;
	height:80vh;
	top:10vh;
	left:10%;
	display:none;
	background-color:rgba(32,32,32,0.95);
}
#m_content{
	z-index:31;
	position:fixed;
	width:80%;
	height:80vh;
	top:10vh;
	left:10%;
	display:none;
	overflow:auto;
	padding:2vw;
	color:var(--text-color);
	font-size:1.7vw;
}
.article_txt{
	background-color:rgba(255,255,255,.95);
	padding:2vw;
	color:rgb(32,32,32);
	font-size:80%;
}
.article_txt img, .article_txt iframe{
	max-width:100%;
	max-height:auto;
}
.banner_logout{
	position:fixed;
	top:2px;
	right:2px;
	width:auto;
	height:auto;
	z-index:10;
}
.banner_logout a, .banner_logout a:visited{
	color:var(--text-color);
	background-color:rgba(32,32,32,.5);
	padding:4px;
	font-size:80%;
}
.game{
	width:100%;
	height:100vh;
	position:relative;
	z-index:5;
	overflow:hidden;
}
.game_bg{
	position:absolute;
	z-index:1;
	width:100%;
	height:100vh;
	left:0;
	top:0;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
	transition:none;
}
.game_bg img{
	/*
	left:50vw;
	top:50vh;
	transform: translate(-50vw, -40vh);
	position:relative;
	*/
	width:100%;
	height:auto;
}
#game_wrapper{
	z-index:20;
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	display:none;
}
#game_content{
	z-index:22;
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	display:none;
	overflow:auto;
}
#game_list_wrapper{
	z-index:20;
	position:fixed;
	width:100%;
	height:71vh;
	left:0;
	bottom:0;
	display:none;
	background-color:rgba(32,32,32,.84);
}
#game_list_content{
	z-index:21;
	position:fixed;
	width:100%;
	height:71vh;
	bottom:0;
	left:0;
	display:none;
	overflow:auto;
	padding:3vw 5vw;
	box-sizing:border-box;
	font-size:1.7vw;
	color:var(--text-color);
	text-align:center;
}
.game_list_title{
	font-size:170%;
	font-weight:400;
	padding-bottom:1%;
	position:relative;
	text-align:left;
	padding-left:1%;
}
.game_list_elem{
	font-size:80%;
	padding:1%;
	text-align:left;
	display:inline-block;
	width:32%;
	height:5vw;
	background-color:rgb(214,133,174);
	box-sizing:border-box;
	vertical-align:top;
	margin:0.5vw;
	cursor:pointer;
	overflow:hidden;
}
.game_list_elem a, .game_list_elem a:visited{color:var(--text-color);}
.game_list_elem img{width:auto;height:auto;max-width:30%;max-height:100%;margin-right:1vw;}
.game_list_close{
	position:absolute;
	right:3vw;
	top:2vw;
	width:auto;
	height:auto;
	font-size:1.7vw;
	color:var(--text-color);
	padding:1vw;
	background-color:var(--btn-color);
	cursor:pointer;
}
.game_quiz{
	z-index:21;
	position:fixed !important;
	width:100%;
	height:71vh;
	bottom:0;
	left:0;
	overflow:auto;
	padding:3vw 5vw;
	box-sizing:border-box;
	font-size:1.7vw;
	color:var(--text-color);
	text-align:center;
	background-color:rgba(32,32,32,.84);
	box-sizing:border-box;
	padding:3vw;
}
.game_draganddrop{
	top:0;
	bottom:initial !important;
	height:100vh !important;
}
.game_content_inner img{
	max-width:100% !important;
	max-height:100% !important;
}
.game_content_title{
	font-size:150%;
	font-weight:normal;
	padding-bottom:1%;
	position:relative;
	text-align:center;
}
.quiz_bulding_name{
	padding:0 !important;
	text-align:left !important;
	padding-left:1% !important;
}
.quiz_bulding_name i{font-style:normal;color:var(--btn-color);}
#gamelist_quiz, #gamelist_tree, #gamelist_drag{
	z-index:21;
	position:fixed;
	width:70%;
	max-width:1600px;
	max-height:1000px;
	height:70vh;
	top:15%;
	left:50%;
	transform: translate(-50%, 0%);
	display:none;
	font-size:130%;
	color:black;
	text-align:justify;
	background-color:rgba(255,255,255,0.95);
	padding:1%;
}
.game_tests{
	display:none;
	box-sizing:border-box;
	position:relative;
}
#draganddrop_wrapper{
	position:relative;
	left:0px;
	top:0px;
	height:700px;
	width:700px;
	background-color:rgba(32,32,32,.5);
	box-sizing:border-box;
	overflow:hidden;
	z-index:2;
	color:var(--text-color);
}
.draganddrop_elem{
	border:thin solid rgba(68,68,68,.7);
	box-sizing:border-box;
	position:absolute;
	width:100px;
	height:100px;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
	transition:none;
	max-width:700px;
	max-height:700px;
	z-index:99;
	text-align:center;
	display:table;
	color:var(--text-color);
}
.draganddrop_elem span{
	display:table-cell;
	vertical-align:middle;
	word-wrap:break-word;
	width:initial;
	height:initial;
	color:var(--text-color);
}
.draganddrop_txt, .draganddrop_img{
	background-color:rgba(38,132,132,.9);
	color:var(--text-color);
}
.draganddrop_target{border:thin solid var(--btn-color) !important;}
.draganddrop_img span img{flex-grow: 1; object-fit: cover;vertical-align:middle;}
.draganddrop_img{display:flex !important;background-size:cover;}
.draganddrop_img span{display:block !important;}
.draganddrop_fixed{
	background-color:transparent !important;
	color:#2a2a2a !important;
	border:none !important;
	padding:0;
	margin:0;
}
.ui-draggable{z-index:5;}
.ui-droppable{z-index:4;}
#draganddropMSG{
	position:fixed;
	z-index:50;
	width:auto;
	height:auto;
	overflow:auto;
	background-color:rgba(38,132,132,.99);
	padding:1vw;
	color:var(--text-color);
	transform:translate(-50%,-50%);
	display:none;
	left:50%;
	top:50%;
	text-align:center;
	font-size:1.6vw;
	max-width:25vw;
	max-height:40vh;
}
#draganddropMSG b{display:block;font-weight:normal;}
#draganddropMSG a, #draganddropMSG a:visited{color:var(--text-color);display:block;margin-top:2vw;}
.disable-select, .disable-select * {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
.game_fullscreen_desc{
	width:96%;
	height:auto;
	position:absolute;
	background-color:#f0f0f0;
	padding:1%;
	text-align:center;
}
.game_mentordesc{
	width:96%;
	height:auto;
	position:absolute;
	background-color:#f0f0f0;
	padding:1%;
	text-align:center;
}
.game_mayordesc{
	background-image:url(../../../../images/bgblue.png);
	background-repeat:no-repeat;
	background-position:left top;
	background-size:100% 100%;
	width:100%;
	height:100vh;
	padding:3vw;
}
.game_mayor_wrapper{
	color:var(--text-color);
	font-size:1.7vw;
	padding:3vw;
}
.game_mayor_wrapper .game_next_btn{background-color:var(--btn-darkcolor);}
.game_mayor_wrapper .game_content_title{font-size:200%;line-height:95%;text-align:left;padding-left:30%;position:absolute;left:0;top:5vw;box-sizing:border-box;padding-right:3vw;}
.game_mayor_wrapper .game_content_txt{padding-left:30%;position:absolute;left:0;top:12vw;box-sizing:border-box;padding-right:3vw;overflow:auto;max-height:50vh;}
.game_mayor_icon{
	position:absolute;
	left:3vw;
	top:5vw;
	width:25vw;
	height:auto;
}
.game_mayor_icon img{max-width:100%;max-height:100%;width:auto;height:auto;}
.game_mayor_brackies{
	position:absolute;
	left:27vw;
	top:5vw;
	width:3vw;
	height:5vw;
	display:block;
}
.game_mayor_brackies img{max-width:100%;max-height:100%;width:auto;height:auto;}
.game_mayor_brackies_vertical{
	position:absolute;
	left:28vw;
	top:9.9vw;
	width:0.202vw;
	height:30vw;
	display:block;
}
.game_mayor_brackies_vertical img{width:100%;height:100%;}
.game_email{
	background-image:url(../../../../images/bgblue.png);
	background-repeat:no-repeat;
	background-position:left top;
	background-size:100% 100%;
	width:100%;
	height:100vh;
	padding:3vw;
}
.game_email_wrapper{
	background-color:rgba(255,255,255,.1);
	color:var(--text-color);
	font-size:1.7vw;
	padding:3vw;
}
.game_email_wrapper .game_next_btn{background-color:var(--btn-darkcolor);}
.game_email_mayor_sign{
	position:absolute;
	left:6vw;
	bottom:3vw;
	width:auto;
	height:auto;
}
.game_email_mayor_sign b{
	display:block;
	font-weight:700;
	text-align:center;
}
.game_email_mayor_sign span{
	display:block;
	font-weight:normal;
	text-align:center;
	font-size:70%;
}
.game_email_icon{
	position:absolute;
	left:6vw;
	top:5.5vw;
	width:5vw;
	height:auto;
}
.game_email_icon img{max-width:100%;max-height:100%;width:auto;height:auto;}
.game_email_logobig{
	position:absolute;
	left:50%;
	bottom:2%;
	width:20%;
	height:auto;
	transform:translate(-50%,0);
}
.game_email_logobig img{max-width:100%;max-height:100%;width:auto;height:auto;}
.game_content_txt{
	text-align:justify;
	max-height:70vh;
	overflow:auto;
	position:relative;
}
.game_results{
	width:auto;
	height:auto;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	position:absolute;
	background-color:#f0f0f0;
	padding:1%;
	font-size:150%;
	text-align:center;
}
.game_next_btn{
	padding:1.5vw 3vw;
	right:3vw;
	bottom:3vw;
	display:inline-block;
	background-color:var(--btn-color);
	color:var(--text-color);
	font-size:120%;
	position:absolute;
	text-transform:uppercase;
	z-index:999999;
}
.game_left_btn{
	padding:1.5vw 3vw;
	left:29.8vw;
	bottom:3vw;
	display:inline-block;
	background-color:var(--btn-darkcolor);
	color:var(--text-color);
	font-size:120%;
	position:absolute;
	text-transform:uppercase;
}
.quiz_question{
	font-size:110%;
	margin-bottom:20px;
	text-align:left !important;
	padding-left:1%;
}
.quiz_answer{
	display:block;
	width:auto;
	font-size:90%;
	text-align:center;
	height:auto;
	margin:0.3vw;
	vertical-align:top;
	text-align:left;
	margin-left:1%;
}
.quiz_answer a:hover, .quiz_answer a:active, .quiz_answer a:focus{
	background-color:var(--btn-color);
}
.quiz_answer a, .quiz_answer a:visited{
	display:block;
	color:var(--text-color);
	padding:1%;
}
.quiz_correct a{
	background-color:rgb(25,115,63) !important;
}
.quiz_incorrect a{
	background-color:rgb(181,53,65) !important;
}
.quiz_correct a, .quiz_correct a:visited, .quiz_incorrect a, .quiz_incorrect a:visited{
	color:white !important;
}
.game_pos{
	position:absolute;
	left:50vw;
	top:50vh;
	transform: translate(-50vw, -50vh);
	width:7vw;
	height:auto;
	background: #fefefe;
	background: -webkit-linear-gradient(top left, #fefefe 0%, #eeeeee 100%);
	background: -moz-linear-gradient(top left, #fefefe 0%, #eeeeee 100%);
	background: -o-linear-gradient(top left, #fefefe 0%, #eeeeee 100%);
	background: linear-gradient(to bottom right, #fefefe 0%, #eeeeee 100%);
	color:#52C4A4;
	font-weight:200;
	font-size:1.4vw;
	text-align:center;
	z-index:11;
	cursor:pointer;
	box-shadow:0px 0px 25px #f0f0f0;
	min-width:100px;
}
.game_pos:hover{
	box-shadow:0px 0px 5px #f0f0f0;
}

.gamepage{
	top:50%;
	left:50%;
	width:70vw;
	height:70vh;
	max-width:1000px;
	max-height:1000px;
	min-width:250px;
	min-height:250px;
	position:fixed;
	transform:translate(-50%,-50%);
	background-color:rgba(255,255,255,.9);
	box-shadow:0px 0px 15px #333333;
	display:none;
	z-index:100;
	padding:2%;
	box-sizing:border-box;
	border:2px solid #666666;
	color:#2a2a2a;
	overflow:auto;
}
.page_form table tr td{
	font-size:110%;
	padding:10px;
}
.page_form table tr td:first-of-type{
	width:20%;
}
.page_form input[type="text"], .page_form input[type="password"], .page_form textarea{
	width:100%;
	box-sizing:border-box;
	padding:5px;
}
.page_form textarea{
	height:25vh;
	min-height:100x;
	max-height:250px;
}
.page_form select{
	width:auto;
	box-sizing:border-box;
	padding:5px;
	cursor:pointer;
}
.page_form input[type="submit"]{
	font-size:130%;
	padding:10px;
	background-color:green;
	color:white;
	cursor:pointer;
}

.mayor{
	width:50vw;
	height:25vh;
	position:absolute;
	bottom:2%;
	right:0;
	z-index:200;
	display:none;
}
.mayor_char{
	width:140px;
	height:240px;
	float:right;
	background-image:url(../../../../images/mayor.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	vertical-align:bottom;
}
.mayor_txt{
	width:20vw;
	height:20vh;
	float:right;
	background-color:white;
	opacity:.95;
	vertical-align:top;
	box-shadow:0px 0px 3px white;
	position:relative;
	overflow:hidden;
}
.disable_select, .disable_select *{
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

.loading_wrapper{
	width:50vw;
	height:auto;
	left:50%;
	top:50%;
	position:absolute;
	transform:translate(-50%,-50%);
	background-image:url(../../../../images/logobg.png);
	background-size:100% 100%;
	text-align:center;
	padding:1vw;
	border-radius:10px;
}
.loading img{
	width:100%;
	height:100%;
}
.loginbg{
	left:50%;
	top:50%;
	width:auto;
	position:absolute;
	z-index:2;
	transform:translate(-50%,-50%);
	background-image:url(../../../../images/logobg.png);
	background-size:100% 100%;
	border-radius:10px;
}
.login{
	font-weight:bold;
	font-size:1.7vw;
	color:rgb(255,237,192);
	text-transform:uppercase;
	left:50%;
	top:50%;
	width:auto;
	position:absolute;
	z-index:3;
	transform:translate(-50%,-50%);
}
.login a, .login a:visited{
	color:var(--text-color);
}
.login input[type="submit"]{
	color:var(--text-color);
	cursor:pointer;
}
.regbg{
	left:50%;
	top:50%;
	width:90vw;
	height:50.6vw;
	position:absolute;
	z-index:2;
	transform:translate(-50%,-50%);
	background-image:url(../../../../images/pagebg.png);
	background-size:100% 100%;
	font-size:1.7vw;
}
.regbg table:first-of-type tr td{
	padding:0.6vw;
}
.regbg table:first-of-type tr td:first-of-type{
	text-transform:uppercase;
	color:var(--text-color);
	font-size:1.7vw;
}
.regbg input[type="text"], .regbg input[type="password"], .regbg input[type="email"], select{
	width:100%;
	padding:0.7vw;
	font-size:1.3vw;
	background-color:white;
	border:0;
}
.regbg input[type="button"]{
	background-color:var(--btn-color);
	text-transform:uppercase;
	color:var(--text-color);
	font-size:1.7vw;
	border:0;
	padding:1vw 2vw;
	margin-top:3.2vw;
	cursor:pointer;
}
.regbg input[type="submit"]{
	background-color:var(--btn-color);
	text-transform:uppercase;
	color:var(--text-color);
	font-size:1.7vw;
	border:0;
	padding:1vw 2vw;
	margin-top:1.2vw;
}
.title{
	text-transform:uppercase;
	color:var(--text-color);
	font-size:1.7vw;
}
.avatarSelected{
	border-color:var(--btn-color) !important;
}
.regavatar{
	max-width:100%;
	max-height:100%;
	width:30%;
	height:30%;
	border:0.5vw solid transparent;
	border-radius:1000px;
}
.reg_aszf{
	display:none;
	background-color:rgba(50,50,50,.97);
	padding:2vw;
	position:fixed;
	left:50%;
	top:50%;
	z-index:999;
	width:50%;
	height:50%;
	overflow:auto;
	transform:translate(-50%,-50%);
	box-shadow:0px 0px 15px rgba(0,0,0,.5);
	font-size:1.2vw;
	color:var(--text-color);
}
.reg_aszf a, .reg_aszf a:visited{
	color:var(--text-color);
}
#loading{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:8vw;
	height:2vw;
	display:block;
	background-image:url(../../../../images/loading.gif);
	background-size:100% 100%;
	z-index:100001;
	box-shadow:0px 0px 25px rgba(0,0,0,.5);
	background-color:rgba(0,0,0,.5);
	padding:1vw;
	opacity:.8;
	display:none;
}
#loadingbg{
	position:fixed;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	z-index:100000;
	background-color:rgba(0,0,0,.5);
	opacity:.8;
	display:none;
}
.staticpage{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:50vw;
	height:auto;
	display:block;
	box-shadow:0px 0px 25px rgba(0,0,0,.5);
	background-color:rgba(50,50,50,.99);
	padding:1vw;
	color:var(--text-color) !important;
	font-size:1.7vw;
}
.building{
	
}
.building_hover{
	animation-name:buildingHover;
	animation-duration:150ms;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-fill-mode:both;
}
.animateScale{
	animation-name:animateScale; 
	animation-duration:800ms; 
	animation-iteration-count:1; 
	animation-timing-function:ease-out;
	animation-fill-mode:both;
}
.profile_wrapper{
	margin:3vw;
	margin-right:1vw;
	padding-right:2vw;
	overflow:auto;
	max-height:90%;
	position:fixed;
	font-weight:300;
	font-size:1.7vw;
}
.profile_content{
	font-size:90%;
	color:var(--text-color);
}
.profile_name{
	float:right;
	width:auto;
}
.profile_name img{
	max-width:5vw;
	max-height:auto;
	vertical-align:middle;
	margin-left:1vw;
}
.module_name{
	font-size:130%;
	padding-left:0.5vw;
	font-weight:400;
}
.module_name b{color:rgb(50,172,178);font-weight:300 !important;}
.module_name img{
	position:absolute;
	max-width:3.5vw;
}
.module_list{
	font-size:110%;
	margin-bottom:3vw;
}
#kuldetes{
	z-index:10;
	position:fixed;
	left:1%;
	top:1%;
	width:auto;
	max-width:30vw;
	height:auto;
	max-height:30vh;
	font-size:80%;
	overflow:auto;
	background-color:rgba(32,32,32,.5);
	padding:1vw;
	color:var(--text-color);
}
.kuldetes_kesz{
	background-color:var(--btn-color);
}

.grayscale{filter: grayscale(100%) brightness(1.5) opacity(90%);}

@media only screen and (max-width: 1300px) {
	.banner_menu img{width:4vw;height:4vw;}
	.banner_menu{top:4vw;}
}
@media only screen and (max-width: 1000px) {
    .game_pos{font-size:100%;}
}
@media only screen and (max-width: 800px) {
	.banner_menu{top:initial;bottom:3vh;right:initial;left:10%;}
	#kuldetes{display:none !important;}
}

@keyframes animateScale {
	0% { transform:scale(0) }
	70% { transform:scale(1.1); filter: brightness(1.5); }
	85% { transform:scale(0.9) }
	100% { transform:scale(1) }
}
@keyframes buildingHover {
	0% { transform:scale(1) }
	40% { transform:scale(0.95) }
	80% { transform:scale(1.05); filter: brightness(1.5); }
	100% { transform:scale(1) }
}