@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=latin-ext');
*{
	-webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
}
:root{
	--main-color:#2563eb;           /* modern blue */
	--alt-color:#06b6d4;            /* cyan accent */
	--txtmain-color:#ffffff;
	--action-color:#ef4444;

	--bg-color:#f8fafc;
	--card-bg:rgba(255,255,255,.7);
	--glass-bg:rgba(255,255,255,.6);

	--border-radius:14px;
	--shadow-size:30px;
	--shadow-color:rgba(15,23,42,.08);

	--content-width:1400px;
	--content-basewidth:94%;
}

body{
	background:linear-gradient(135deg,#f8fafc,#eef2ff);
	color:#1e293b;
	font-family: "Inter", "PT Sans", sans-serif;
	letter-spacing:.2px;
}
a, a:visited{
	text-decoration:none;
	color:var(--main-color);
}
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{cursor:pointer;}
.clear{
	clear:both;
}
div#page{
	background-position:top center;
	background-repeat:repeat;
}
#wrapper{
	width:100%;
	height:100%;
}
#wrapper_content{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
}
/* Banner */
/* ======================================================================================== */
.banner_wrapper_height{
	height:5vw;
}
#banner_wrapper{
	width:100%;
	position:relative;
	left:0;
	top:0;
	z-index:99;
	height:auto;
}
#banner{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
	height:auto;
}
#banner_content{
	position:relative;
}
.banner_language{
	z-index:50;
	transform:scale(.8);
	text-align:right;
	width:auto;
	height:auto;
	vertical-align:middle;
	position:absolute;
	top:0;
	right:0;
}
.banner_language a, .banner_language a:visited{
	margin:0 !important;
	padding:0 !important;
	margin-right:1%;
}
.banner_valuta{
	float:right;
	z-index:50;
	text-align:right;
	width:auto;
	height:auto;
	padding-top:1%;
	padding-right:1%;
	vertical-align:middle;
	margin-top:1%;
	margin-left:1%;
}
.banner_valuta select{width:auto;cursor:pointer;background-color:#fefefe;color:#333333;padding:5px;border:0;}
.banner_logo{
	max-width:100%;
	width:auto;
}
.banner_logo img{
	max-width:100%;
	max-height:100%;
}
.banner_mainmenu{
	width:auto;
	height:auto;
	background-color:var(--main-color);
	text-align:center;
}
.banner_mainmenu a, .banner_mainmenu a:visited{
	display:inline-block;
	padding:1% 2%;
	font-size:120%;
	color:white;
	font-weight:600;
	margin-right:20px;
}
/* Content Basics */
/* ======================================================================================== */
#content{
	min-height:2px;
	background-color:#fefefe;
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
}
.title{
	font-size:170%;
	padding:1%;
	border-bottom:thin dashed #c0c0c0;
}
.title a, .title a:visited{color:#2A2A2A;}
.title a:focus, .title a:hover, .title:active{color:var(--main-color);}
.title img{
	max-width:100%;
	max-height:30px;
	display:inline-block;
}
.txt{
	padding:1%;
	font-size:110%;
}
.txt img, .txt iframe{
	width:auto;
	height:auto;
	max-width:100% !important;
	max-height:100% !important;
	display:inline-block;
	vertical-align:middle;
}
/* Footer */
/* ======================================================================================== */
#footer_wrapper{
	width:100%;
	background-color:transparent;
	height:auto;
	background-color:rgba(0,0,0,.5);
}
#footer{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
}
#footer_content{
	padding:2%;
	text-align:center;
	font-size:80%;
	color:rgba(255,255,255,.5);
}
#footer_content a, #footer_content a:visited{
	color:rgba(255,255,255,.5);
	padding:1%;
	display:inline-block;
}
#footer_content a:focus, #footer_content a:hover, #footer_content a:active{
	color:white;
	background-color:black;
}

/* Logo */
/* ======================================================================================== */
.textAnim {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 10s infinite linear;
  animation: stroke 10s infinite linear;
}
.textAnim:nth-child(5n + 1) {
  stroke: #8cffa8; /* green */
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}
.textAnim:nth-child(5n + 2) {
  stroke: #d166ff; /* pink */
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
  stroke-width: 2;
}
.textAnim:nth-child(5n + 3) {
  stroke: var(--txtmain-color);
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}
.textAnim:nth-child(5n + 4) {
  stroke: rgba(255,255,255,.8);
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
  stroke-width: 1;
}
.textAnim:nth-child(5n + 5) {
  stroke: var(--main-color);
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.textAnimSVG{
  position:absolute;
  left:50%;
  top:1vw;
  transform:translate(-50%,0);
  font-size:400%;
  width:100%;
  /* border-bottom:2px double rgba(255,255,255,.1); */
}
.textAnimSVGFooter{
  position:relative;
  left:50%;
  transform:translate(-50%,0);
  font-size:500%;
  width:100%;
}
/* ======================================================================================== */

/* Hover boxes */
/* ======================================================================================== */
.HOVER {
	--width: 100%;
	--time: 0.7s;

	position: relative;
	display: inline-block;
	height: 1em;
	padding: 1em;
	overflow: hidden;
}

.HOVER text {
	position: relative;
	z-index: 5;
	
	transition: color var(--time);
}

.HOVER:hover text {
	color: var(--main-color);
}

.HOVER span {
	position: absolute;
	display: block;
	content: "";
	z-index: 0;
	width: 0;
	height: 0;
	
	border-radius: 100%;
	background: var(--alt-color);
	
	transform: translate(-50%, -50%);
	transition: width var(--time), padding-top var(--time);
}
.HOVER2 span {background: var(--main-color) !important;}
.HOVER2:hover text {color: var(--txtmain-color) !important;}

.HOVER:hover span {
	width: calc(var(--width) * 2.25);
	padding-top: calc(var(--width) * 2.25);
}
/* ======================================================================================== */

.fancytextshadow{
		  font-size: 15vw;
	    text-align: center;
      height:40vh;
      line-height: 40vh;
	    color: #fcedd8;
	    
	    font-weight: 700;
      text-shadow: 5px 5px 0px #eb452b, 
                  10px 10px 0px #efa032, 
                  15px 15px 0px #46b59b, 
                  20px 20px 0px #017e7f, 
                  25px 25px 0px #052939, 
                  30px 30px 0px #c11a2b, 
                  35px 35px 0px #c11a2b, 
                  40px 40px 0px #c11a2b, 
                  45px 45px 0px #c11a2b;
}
.startarrow{
	top:85%;
	width:var(--content-basewidth);
	text-align:center;
	position:absolute;
	color:rgba(255,255,255,.7);
	font-size:250%;
	cursor:pointer;
}

.formSelect{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:2rem;
	margin:5%;
}
.formSelect a, .formSelect a:visited{
	flex:1 1 clamp(25ch,10%,50ch);
	flex-wrap:wrap;
	justify-content:space-between;
	
	text-align:center;
	background-color:var(--main-color);
	padding:3%;
	color:var(--alt-color);
	display:block;
	width:100%;
	height:100%;
	font-size:max(1.5vw,150%);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
}
.formSelected a, .formSelected a:visited{
	flex:1 1 clamp(2ch,10%,50ch);
	padding:1%;
	font-size:110%;
}
.formSelectedTitle{
	background-color:white !important;
	color:var(--main-color) !important;
}
.formField{
	display:none;
	margin:5%;
	padding:1%;
	font-size:110%;
	border:thin solid var(--main-color);
	border-radius:var(--border-radius);
	margin-top:3%;
	padding-top:5%;
	position:relative;
	margin-bottom:25%;
}
.formFieldAspect{
	font-size:200%;
	color:var(--main-color);
	text-align:left;
	margin-top:-9%;
	background-color:white;
	/* position:absolute; */
	padding:1%;
	display:none;
	margin-bottom:3%;
}
.formFieldStatement{
	font-size:150%;
	display:block;
	text-align:justify;
	background-color:rgba(23,163,67,.3);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
	border-left:10px solid var(--alt-color);
	padding:1%;
	margin-bottom:3%;
}
.formFieldRating{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:1rem;
	width:100%;
	height:100%;
}
.formFieldRating b{
	display:block;
	margin-top:2%;
	width:100%;
	text-transform:uppercase;
	color:var(--main-color);
}
/* Értékelő skála (Rádiógombok) */
.formFieldRating label {
    background-color: #ffffff !important;
    border: 2px solid #e1e8ed !important;
    border-radius: var(--border-radius) !important;
    padding: 15px !important;
    transition: all 0.2s;
    font-weight: 600;
    color: #7f8c8d;
}

.formFieldRating label:hover {
    border-color: var(--alt-color) !important;
    color: var(--alt-color);
    background: #f0faff !important;
}
.ratingNone{
	flex:none;
	display:block !important;
	background-color:rgba(255,0,0,.2);
	text-align:center;
	padding:2% !important;
	margin-top:3%;
	border-radius:0px 0px var(--border-radius) var(--border-radius);
	border-top:2px solid rgba(255,0,0,.5);
}
.formFieldStatementInfo{
	text-align:justify;
	background-color:rgba(191, 162, 21,.3);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
	border-left:10px solid rgb(191, 162, 21);
	padding:1%;
	margin-top:3%;
	margin-bottom:3%;
}
.statement1,
.statement2,
.statement3,
.statement4{display:none;}
.formFieldActive{
	display:block;
}
.formFieldAspectActive{
	display:block;
}
.formFieldStatementActive{
	display:block;
}
.formNext{
	padding:2%;
	display:none;
	margin-top:5%;
	background-color:rgba(123, 211, 46,.6);
	color:#2a2a2a;
	cursor:pointer;
	margin-right:2%;
	margin-bottom:2%;
	position:relative;
	float:right;
}
.formPrev{
	padding:2%;
	display:none;
	margin-top:5%;
	background-color:var(--action-color);
	color:var(--alt-color);
	cursor:pointer;
	margin-left:2%;
	margin-bottom:2%;
	position:relative;
	float:left;
}
.formNext, .formPrev{
  padding:16px 35px;
  border-radius:16px;
  font-weight:600;
  border:none;
}

.formNext{
  background:linear-gradient(135deg,var(--alt-color),var(--main-color));
  color:white;
}

.formPrev{
  background:#e5e7eb;
  color:#374151;
}

.formNext:hover,
.formPrev:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,0,0,.15);
}
.formNextRatingStart{background-color:var(--main-color); color:var(--alt-color);}
.finalRating{
	display:none;
	margin:5%;
	padding:1%;
	font-size:110%;
	margin-top:3%;
	padding-top:5%;
	position:relative;
	margin-bottom:25%;
}
.graphLineTable{
	width:100%;
}
.graphLineTable th:first-of-type{width:35%;}
.graphLineTable th{
	padding:1%;
	font-weight:bold;
	text-align:left;
	border-bottom:thin solid rgba(0,0,0,.2);
	padding-top:5%;
}
.graphLineTable tr:first-of-type th{padding-top:0%;}
.graphLineTable td{
	padding:1%;
	text-align:left;
}
.graphLineTable tr td:first-of-type{padding-left:3%;}
.graphLine{
	display:block;
	width:100%;
	background-color:rgba(0,0,0,.2);
	padding:.5%;
}
.graphLine div{
	display:block;
	background-color:var(--main-color);
	padding:.5%;
	color:var(--txtmain-color);
	min-width:1ch !important;
	max-width:98.9% !important;
}
.graphLineTable th .graphLine div{background-color:var(--alt-color);}

/* Miscs */
/* ======================================================================================== */
.up{
	width:60px;
	height:60px;
	line-height:70px;
	cursor:pointer;
	display:none;
	position:fixed;
	z-index:50;
	right:2vw;
	bottom:2vw;
	border-radius:10px;
	background-color:var(--alt-color);
	color:var(--main-color);
	text-align:center;
	vertical-align:middle;
}
.cb-radio.checked .cb-inner i{
	background-color:var(--main-color) !important;
	transform:scale(1.7,1.7);
}
.cb-checkbox:hover .cb-inner, .cb-radio:hover .cb-inner{
	border-color:var(--main-color) !important;
}
/* CheckBo felülírása a kijelölt állapotra */
.cb-radio.checked {
    border-color: var(--main-color) !important;
    background: #eef2ff !important;
    color: var(--main-color) !important;
}

.usersLoginForm input[type="submit"]:hover, .usersLoginForm input[type="submit"]:active, .usersLoginForm input[type="submit"]:focus{
	color:#ffffff;
}

/* Autocomplete */
/* ======================================================================================== */
.autocomplete-suggestions{
	font-size:110%;
}
.autocomplete-selected{
	background-color:var(--main-color);
}
.autocomplete-selected strong{
	color:white;
}
.autocomplete-suggestion{
	padding:10px;
}
.ui-autocomplete-category {
	font-weight:bold;
	padding:10px;
	margin:15px;
}

/* Media Screens */
/* ======================================================================================== */
@media screen and (max-width: 900px){
	.formFieldAspect{position:relative;margin:0;}
}