@import url("vars.css?v=1.0");

@font-face {
    font-family: kanit;
    src: url('fonts/Kanit-Light.ttf');
}

@font-face {
    font-family: kanit-regular;
    src: url('fonts/Kanit-Regular.ttf');
}

@font-face {
    font-family: kanit-bold;
    src: url('fonts/Kanit-Bold.ttf');
}

html, body {
	color: var(--text-color);
	background: var(--page-bg);
}

*  {
	font-size: 16px;
	line-height: 1.5em;
	margin:0;
	padding:0;
	border:0;
	vertical-align: baseline;
	font-family: var(--default-font), 'Open Sans', sans-serif;
	box-sizing: border-box;
}

form {
	margin: 0px; 
}

textarea {
	width: 30rem;
	max-width: 90%;
	min-height: 6rem;
}
 
select  {
	border: 1px solid var(--neutral-grey-border);
}

input[type="submit"]{
	cursor:pointer;
	font-size: 12px ;font-size:0.9rem;
	width: initial;
}

input[type="text"],input[type="number"],input[type="password"],input[type="email"],input[type="search"],textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	text-shadow: none;
	color: var(--h-color);
	border: 1px solid var(--disposed-field-bg);
	width: 20em;
	font-size: 1rem;
	padding: .8em;
	border-radius: 2em;
	background: transparent;
}

:is(input[type="text"],input[type="number"],input[type="password"],input[type="email"],input[type="search"],textarea, select)::placeholder {
	color: var(--h-color);
}

input[type="checkbox"],input[type="radio"]{
	margin-right:.5rem
}

@media screen and (max-width: 1000px) {
	input[type="text"],input[type="number"],input[type="password"],input[type="email"],input[type="search"], textarea, select {
		width: 10em;
	}
}

label {display: block;}

ol,ul{
	margin:0 0 1.5em 0;
	list-style-position:inside;
}

ul{
	list-style:none;
}

ol {
	padding-left: 1.5em;
}

ol li {
	list-style-position: outside;
	padding-left: .5em;
	margin-bottom: 1em;
}

li ul{
	margin: 0
}

a {	
	color: var(--text-color);
	text-decoration: underline;
}

a:hover { 
	color: var(--disposed-field-bg);
	text-decoration: none;
}

p {
	margin-bottom: 2em;
	text-align: justify;
}

b, strong, .b {
	margin:0;
	padding:0;
	border:0;
	font-weight: bold; font-family: var(--default-bold-font);
	font-size: 1em; /* azért kell, hogy ne menjen vissza a * deklaráció miatt a kiindulási font mérethez minden esetben*/
}

h1,h2, h3, h4{
	color: var(--h-color);
	line-height: 1.3em;
}


h1 {
	font-size: 6em;
	color: var(--text-on-bg-color);
	/* letter-spacing: 2px; */
	text-transform: uppercase;
	margin: .2em 0 .35em;
	line-height: 1em;
	text-align: center;
	font-family: var(--default-h1-font);
	font-weight: bold;
}


h2 {
	font-size: 3em;
	margin-bottom: .2em;
	line-height: 1em;
	font-family: var(--default-bold-font);
}

h3{
	font-size: 1.8em;	
	color: var(--disposed-field-bg);
	font-weight: bold;
}

h4{
	font-size: 1.3rem;
	margin: .5em 0 1em 0;
	font-weight: bold; 
}


@media screen and (max-width: 1000px) {
	h1 {
		font-size: 2.2em;
		line-height: 1.2em;
		text-align: center;
	}
	
	h2 {
		font-size: 2em;
		line-height: 1.2em;
	}
	
	h3{
		font-size: 1.6em;
		margin: 0;
	}
	
	h4 {
		font-size: 1.0rem;
		margin: 0;
	}
	
	h1, h2 {
		text-align: center;
	}
}

img, video{
	max-width:100%;
	height:auto;
	border: 0px;
}


table{
	border-collapse:collapse;
	border-spacing:0;
	border: 0px;
}

caption,th,td{
	text-align:left;
	font-weight:normal;
	vertical-align:middle;
	font-family: var(--default-font), 'Open Sans', sans-serif;
}

tr {
	font-family: var(--default-font), 'Open Sans', sans-serif;
}

q,blockquote{
	quotes:none
}

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

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
	display: block
}

.center {
	text-align: center;
}

@media screen and (min-width: 1000px) {
	.mobile-only {display: none;}
}

@media screen and (max-width: 1000px) {
	.desktop-only {display: none;}
}

/* page global */
@media screen and (min-width: 1000px) {
	.content, .content2, .sponsors, .footer {
		display: grid;
		grid-template-columns: 1fr  1100px 1fr;
	}
	
	.wrapper {
		grid-column: 2 / 3;	
		
		padding-top: 4em;
	}
	
	
	
	:is(.content, .content2) .wrapper {
		padding-bottom: 2em;
	}

	.game-login {
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		
		z-index: 10;
	}
}
/* /page global */


/* content */

@media screen and (max-width: 1000px) {

}

.content :is(h1, h2, h3, h4) {
	color: var(--h-color);
}

/*nyitólap elrendezés */
.open-page {
	grid-column: 1 / -1;
	grid-row: 1 / 5;
	
	align-self: stretch;
	justify-self: stretch;
	
	background: var(--disposed-field-bgv3);
}

@media screen and (min-width: 1000px) {
	.open-page {
		background-image:  url(../images/design/open-page-bg.png);
		background-repeat: no-repeat;
		background-position: top center;
	}
}

.content .girly {
	grid-column: 1 / 2;
	grid-row: 2 / 5;
	
	align-self: stretch;
	justify-self: stretch;
	
	background-image: url(../images/design/open-page-girl.png);
	background-repeat: no-repeat;
	background-position: top right;
}

.content .boy {
	grid-column: 3 / 4;
	grid-row: 2 / 5;
	
	align-self: stretch;
	justify-self: stretch;
	
	background-image: url(../images/design/open-page-boy.png);
	background-repeat: no-repeat;
	background-position: top left;
}

@media screen and (min-width: 1800px) {
	
	.content .boy {
		background-position: top center;
	}
	.content .girly {
		background-position: top center;
	}
}


.content .sun-and-cloud {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	
	align-self: center;
	justify-self: end;
}

.content .cloud{
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	
	align-self: start;
	justify-self: center;
	
	margin-top: 4em;
}

.content .birds{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	
	align-self: center;
	justify-self: right;
	
	margin: 8em 10em 0 0;
}

.content .wrapper.part1 {
	grid-row: 1 / 2;
}

.content .wrapper.part2 {
	grid-row: 2 / 3;
	padding-top: 0;
}

.content .wrapper.part3 {
	grid-row: 3 / 4;
	padding-top: 0;
}

.content .wrapper.part4 {
	grid-row: 4 / 5;
	padding-top: 0;
}

@media screen and (max-width: 1000px) {
	.content.nyito {
		display: grid;
		grid-template-columns: 1fr 10em 1fr;
	}
	
	.content.nyito h1{
		margin-top: 1.8em;
	}
	
	.content.nyito .wrapper {
		grid-column: 1 / -1;
	}
	
	.content.nyito .wrapper.part2 {		
		background:  url(../images/design/open-page-bg.png);
		background-repeat: no-repeat;
		background-size: 140%;
		background-position: center center;
	}
	
	.content.nyito .wrapper.part3 {
		height: 12em;
		padding-top: 5em;
	}
	
	.content .girly {
		grid-column: 1 / 2;
		grid-row: 2 / 4;
		justify-self: end;
		align-self: end;
		
		width: 100%;
		height: 18rem;
		background-position: bottom right;
		background-size: contain;
	}

	.content .boy {
		grid-column: 3 / 4;
		grid-row: 2 / 4;
		justify-self: start;
		align-self: end;
		
		width: 100%;
		height: 18rem;
		background-position: bottom left;
		background-size: contain;
	}

	.content .sun-and-cloud {
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		
		align-self: start;
		justify-self: start;
		
		width: 50%;
		margin: 1em 0 0 1em;
	}

	.content .cloud{
		display: none;
	}

	.content .birds{
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		
		align-self: start;
		justify-self: end;
		
		margin:2em  1em 0 0 ;
		width: 20%;
	}
	
}


/*/nyitólap elrendezés */


.content2  :is(h1, h3, h4) {
	color: var(--text-on-bg-color);
}


.content2 { 
	padding: 0;
	color: var(--text-on-bg-color);
	color: var(--content2-color);
	padding-top: 1em;
	background-repeat: no-repeat;
	padding-bottom: 2em;
	background-image: radial-gradient(var(--disposed-field-bgv3), var(--disposed-field-bg) );
	/*border-top: 1px solid var(--top-bg-color); ez azért kell, mert különben a chrome rosszul helyezi el a hátteret */
}

.content2 h1 {
	font-family: kanit;;
}

.content2 a {
	color: var(--content2-color);
}

.content2.nograd {
	background: var(--disposed-field-bgv2);
	color: var(--text-on-bg-color);
}

.content2.nograd a {
	color: var(--text-on-bg-color);
}

@media screen and (max-width: 1000px) {
	.wrapper {
		padding: 1.5em .8em 2em;
	}
	
	.szoveg-kiemelt {
		font-size: 1.2em;
	}
}

.szoveg-kiemelt {
	text-transform: uppercase;
	font-size: 1.8em;
	font-weight: normal; font-family: var(--default-font);
}
/* / content */

.focim1 {
	font-size: 3.5em;
	font-weight: bold; font-family: var(--default-bold-font);
	color: var(--h-color);
	text-align: center;
	/* letter-spacing: 2px; */
	margin: .2em 0;
	line-height: 1.2em;
	/*text-shadow:0px 0px 20px #808080;*/
	text-transform: uppercase;
}

.focim1.grid {
	grid-template-columns: auto 1fr; 
	align-items: center;
	grid-gap: .6em;
}

.focim1 a {
	text-decoration: none;
}

.focim2 {
	font-size: 1.4em;
	margin: 1em 0;
	color: var(--h-color);
	text-align: center;
	margin: 0 0 0 0;
	/* letter-spacing: 2px; */
	line-height: 1.4em;
}

.focim2.mutant {
	font-size: 2.3em;
	font-weight: bold;
}

@media screen and (max-width: 1000px) {
	h1 {
		font-size: 3.0em;
		text-align: center;
		text-align: center;
	}
	
	.focim1 {
		font-size: 2.6em;
		line-height: 1.2em;
		text-align: center;
	}
	
	.focim2 {
		font-size: 1.2em;
		text-align: center;
	}
	
		
	.focim2.mutant {
		font-size: 1.4em;
		font-weight: bold;
		font-family: var(--default-bold-font);
	}
}

a.gomb, input[type="submit"].gomb, button {
	color: var(--text-on-bg-color);
	background: linear-gradient(-10deg, var(--gomb-bg-color), var(--gomb-bg-color1));
	text-decoration: none;
	display: inline-block;
	padding: .8em 1.5em .9em;
	font-size: 1.6em;
	font-weight: bold;
	/* box-shadow: 10px 10px 35px 0px var(--gomb-on-bg-shadow); */
	border-radius: 2em;
}

:is(*, .content2 ) :is(a.gomb:hover,  input[type="submit"].gomb:hover, button:hover){
	background: var(--gomb-bg-color);
	/* box-shadow: 0px 0px 25px 5px var(--gomb-hover-shadow); */
	/* box-shadow: 0px 0px 25px 5px var(--text-on-bg-color); */
	color: var(--text-on-bg-color);	
}

:is(a.gomb, input[type="submit"].gomb, button).mini {
	padding: .3em .8em .4em;
	font-size: 1rem;
}

a.gomb.vissza {
	background: var(--text-on-bg-color); 
	color: var(--gomb-bg-color);
}

a.gomb.vissza:hover {
	background: var(--text-on-bg-color);
	color: var(--gomb-bg-color);
	box-shadow: 0px 0px 15px 5px var(--gomb-hover-shadow);
}

a.gomb.emergency {
	background: var(--danger-color);
}

@media screen and (max-width: 1000px) {
	a.gomb, input[type="submit"].gomb, button {
		padding: .6em .8em;
		font-size: 1.4rem;
	}
}

div.gomb {
	text-align: center;
}

/* ez adja a gombok eltartását, hogy ne marginnal kelljen */
:is(a.gomb, input[type="submit"].gomb, button) + :is(a.gomb, input[type="submit"].gomb, button) {
	margin-left: 1em;
}
 
.content :is(a.gomb.vissza/*, input[type="submit"].gomb, button */) {
	margin: 0 0 1em;
	box-shadow: 0px 0px 25px 0px var(--gomb-on-bg-shadow);
}


/* choose-car */

.bonus-ticket {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
}

.bonus-ticket div{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: .6em;
	
	justify-items: center;
	
	padding: 1em 2em;
	font-size: .8em;
	margin-top: 2em;
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	border-radius: 2rem;
}

.bonus-ticket  b{
	font-size: 4em;
}

.miezitt {
	display: grid;
	grid-template-columns: 1fr 3em 3fr;
	grid-template-rows: 3em 1fr 3em;
	grid-column-gap: 4em;
	
	margin: 5em 0;
	padding: 2em;
	background: var(--content2-color);
	border-radius:2em;
}

.miezitt h3 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	
	font-size: 2.5em;
	font-family: var(--default-bold-font);
	color: var(--text-on-bg-color);
	text-transform: uppercase;
} 

.ezaz {
	grid-column: 2 / -1;
	grid-row: 1 / -1;
	
	background: var(--disposed-field-bgv2);
	font-size: 1.4em;
	color: var(--text-on-bg-color);
	padding: 2em 1em 2em 4em;
	border-radius: 1em;
}

@media screen and (min-width: 1000px) {	
	.ezaz a {
		font-size: .7em;
	}
}

.ezaz a, ezaz a:hover {
	color: var(--text-on-bg-color);
}

 
@media screen and (max-width: 1000px) {
	.miezitt {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-row-gap: 1em;
		
		margin: 3em 1em;;
	}
	
	.miezitt h3 {
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		
		font-size: 1.6em;
	}
	
	.ezaz {
		grid-column: 1 / -1;
		grid-row: 2 / -1;
		
		font-size: 1.1em;
		text-align: center;
		margin-top: 1em;
		padding: 2em;
	}
}

.ezaz *{
	font-family: var(--highlight-font);
    font-size: 1em;
	color: var(--disposed-field-bg);
}

/* animációk */
@keyframes fade-in {
  0% {
	display: block;
    opacity: 0.5;
  }

  
  100% {
    opacity: 1;
  }
}

@keyframes pop-in {
	0% {
		transform: scale(0.8);
	}
	
	100% {
		transform: scale(1);
	}
}

@keyframes nagyit1 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.25);
	}
}

@keyframes vissza {
	0% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes nnagyit {
	0% {
		transform: scale(.5);
		top: -50%;
	}
	100% {
		top: -80%;
		transform: scale(.9);
		
	}
}


/* choices */

.choice {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2em;
	align-items: start;
	margin: 2em 0 6em;
	position: relative;
}

@media screen and (max-width: 1000px) {
	.choice {
		grid-column-gap: 0;
		margin: 2em 0 0;
	}
	
	.choice .item{
		margin-top: 0;
		padding: 0;
	}
}

.radio {
	align-self: stretch;
	
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-rows: auto 1fr auto;

	animation:  pop-in 1.0s 0s forwards cubic-bezier(.64,1.87,.64,.64);
	
}

.radio.checked {
	opacity: 1;
}

@media screen and (min-width: 1000px) {
	
	.radio.checked {
		transform: scale(1.1);
	}
}

.radio .item{
	grid-column: 2 / -2;
	grid-row: 1 / -1;
	/* background: var(--grey-base-bg); */
	/* background: var(--disposed-field-bgv3); */
	align-self: stretch;
	justify-self: stretch;
	
	padding: 0;
	text-align: center;
	border-radius: 1em;
}

.radio:hover .item,  .radio.checked .item {
	background: var(--disposed-field-bg);
	cursor: pointer;
}

.radio h4{
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	
	font-size: 1.4em;
	margin: .2em 0 .2em 0;
	padding: .5em 0;
	text-align: center;
}

.radio.checked h4 {
	font-weight: bold; font-family: var(--default-bold-font);
	color: var(--text-on-bg-color);
}

/* a képernyőre hover-re és close-ra, érintő képernyőn enlarged és annak hiányára működik 
kattintáskor megjelenik az enlarged és close, következő kattintáskor eltűnik az enlarged. a close mindig magától tűnik el nagyon gyorsan
*/

@media screen and (min-width: 1000px) {
	.radio:hover {
		opacity: 1;
		animation: nagyit1 0.5s 0s forwards cubic-bezier(.64,1.87,.64,.64);
	}
}

@media screen and (max-width: 1000px) {	
	.radio .item {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	.radio.enlarged  {
		z-index: 1;
		position: absolute;
		opacity: 1;
		animation: nnagyit 0.5s 0s forwards cubic-bezier(.64,1.87,.64,.64);
		font-size: 1.4em;
	}
	
	.radio.enlarged .item {
		background: var(--disposed-field-bg);
	}
}

/* /animációk */

.radio:hover, .radio .enlarged {
	z-index: 3;
}

.radio .kep {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	
	z-index: 2;
	padding: 1em;
	
}

.radio .valaszt {
	grid-column: 2 / -2;
	grid-row: 3 / 4;
	align-self: center;
	
	padding: 0;
	font-size: 1.4em;
	background: transparent;	/*animáció miatt kell */
	color: transparent;
	z-index: 3;
}

@media screen and (max-width: 1000px) {
	.radio {
		grid-column-gap: 1em;
	}
}

.radio:hover .valaszt {
	color: var(--disposed-field-bg);
}

.radio.checked .valaszt {
	color: var(--disposed-field-bg);
}

.radio .valaszt-text {
	text-align: center;
	color: transparent;
}

.radio .kell {
	display: grid;
	align-items: center;
	justify-items: center ;
	
	margin: 1em auto 0;
	font-size: 1.2rem;
	font-weight: bold;
	color: transparent;
	background: transparent;
	text-decoration: none;
	width: 3.5em;
	height: 3.5em;
	/* border-radius: 100%; */
	opacity: 0;
	text-align: center;
}

.radio.checked .kell{
	opacity: 100;
	background: var(--text-on-bg-color);
	box-shadow: 0px 0px 20px 0px var(--dark-shadow);
	line-height: 1em;
	color:   var(--h-color);
	position: relative;
	top: 1.6em;
	border-radius: 50%
}

.radio.checked .valaszt-text {
	opacity: 100;
	color: var(--text-on-bg-color);
}


@media screen and (max-width: 1000px) {
	.radio  {
		padding: 0;
		margin: 0 auto;
	}
	
	.radio h4 {
		font-size: 1.2em;
	}
	
	.radio.checked h4 {
		color: var(--text-on-bg-color)
	}
	
	.radio .kell {
		width: 2.5em;
		height: 2.5em;
		font-size: 1rem;
	}
	
	.radio.enlarged .kell {
		width: 4em;
		height: 4em;
		font-size: 1.2rem;
	}
	
	.radio.enlarged .valaszt {
		font-size: 1.2em;
	}
}

.kell i {
	font-size: 1.5em;
}
  
 /* choices */
  

.megyekmegnyerem a, .megyekmegnyerem a:hover{
	color: var(--text-on-bg-color);
	margin-bottom: .4em;
}

@media screen and (min-width: 1000px) {
	.divided-front {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-gap: 2em;
	}
}

.divided-front h3{
	font-weight: bold; font-family: var(--default-bold-font);
	text-transform: uppercase;
	font-size: 1.4em;
	text-align: left;
	color: var(--h-color);
	margin-bottom: 2em;
}

.haromikon {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 2em;
}

.haromikon .egyseg {
	display: grid;
	grid-template-rows: auto auto;
	grid-row-gap: 1.5em;
	
	font-size: 1.2em;
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	border-radius: 1em;
	padding: 1.5em 2em;
	font-weight: bold;
}


.haromikon .egyseg.no2 {
	background: var(--disposed-field-bgv2);
}

.haromikon .egyseg.no3 {
	background: var(--disposed-field-bgv3);
	/* color: var(--content2-color); */
}

.haromikon .egyseg img{
	justify-self: end;
	align-self: end;
}

@media screen and (max-width: 1000px) {
	.haromikon {
		grid-template-columns: .3fr 1fr .3fr 1fr;
		grid-template-rows: .7fr 1fr .3fr auto;
		grid-gap: 0;
		justify-items: center;
		
		grid-template-areas:	" no1 no1  .   .  "
								" no1 no1 no2 no2 "
								"  .   .  no2 no2 "
								"  .  no3 no3 	. "
	}
	
	.haromikon .egyseg {
		align-items: end;
		grid-row-gap: 0;
		
		height: 9.5em;
		width: 9.5em;
		border-radius: 8em;
		/* color: var(--text-color); */
		text-align: center;
	}
	
	.haromikon .egyseg img{
		alig-self:start;
		justify-self: center;
		
		max-height: 5em;
	}
	
	.haromikon .egyseg.no1{
		grid-area: no1;
	}
	
	.haromikon .egyseg.no2{
		grid-area: no2;
	}
	
	.haromikon .egyseg.no3{
		grid-area: no3;
		justify-self: end;
	}

}

/* második oldal */
/* színválasztó oldal elrendezése */

@media screen and (min-width: 1000px) {
	.color-page h1 {
		font-size: 5rem;
	}
}


.color-page .wrapper {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.color-page .girly {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	
	align-self: stretch;
	justify-self: stretch;
	
	background-image: url(../images/design/color-page-girl.png);
	background-repeat: no-repeat;
	background-position: center right;
}

.color-page .boy {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	
	align-self: stretch;
	justify-self: stretch;
	
	background-image: url(../images/design/color-page-boy.png);
	background-repeat: no-repeat;
	background-position: center left;
}

@media screen and (max-width: 1000px) {
	
	.color-page .boy,  .color-page .girly {
		display: none;;
	}
}

/* /színválasztó oldal elrendezése */


.car-box {
	display: grid;
	grid-template-columns: 1fr 18em 1fr;
	grid-template-rows: 1fr;
	
	margin-top: 3em;
}

@media screen and (max-width: 1000px) {
	.car-box {
		grid-template-columns: 1fr 1.8fr 1fr;
		grid-template-rows: 1fr 5fr 1fr;
	}
}

.car-box .item {
	grid-column: 2 / -2;
	grid-row: 2 / -2;
	background: var(--disposed-field-bg);
	align-self: stretch;
	justify-self: stretch;
	
	border-radius: 2em;
}

@media screen and (max-width: 1000px) {
	.car-box .item {
		height: 360px;
	}
	
}

.each-car {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.car-img {
	overflow: hidden;
	margin: 0 auto;
	
	width: 100%;
	color: var(--h-color);
}

.car-img div {
	font-size: 1.6em;
}

.car_colour_img  {
	opacity: 0;
	animation: fade-in 0.5s .008s forwards, pop-in 0.5s .008s forwards cubic-bezier(.64,1.87,.64,.64);
	margin: 0 auto;
	padding: 2em 0 0;
}

@media screen and (min-width: 1000px) {
	.car-img {
		display: grid;
		grid-template-columns: 1fr 2.5fr 1fr;
		align-items: center;
	}	
	
	.car-img .b {
		text-align: right;
	}
}

@media screen and (max-width: 1000px) {
	.car-img {
		text-align: center;
	}

	
	.car_colour_img  {
		padding: 4em 0 2em;
	}
}

.car-colours{
	margin-bottom: 2em;
	display: flex;
	justify-content: space-around;
	max-width: 100%;
	text-align: center;
}

@media screen and (min-width: 1000px) {
	.car-colours {
		flex-wrap: nowrap;
		
	}
}

@media screen and (max-width: 1000px) {
	.car-colours {
		flex-wrap: wrap;	
	}
}

.color {	
	margin: 0 .25em;
	text-align: center;
	max-width: 8%;
	min-width: 8%;
	width: 8%;
	text-align: center;
}

@media screen and (max-width: 1000px) {
	.color {
		max-width: 16%;
		width: 16%;	
	}
}

.ok {
	color: transparent;
}

.color-card {
	width:3em;
	height: 3em; 
	border-radius: 50%;
	margin: 1.0em auto 0;
}

.color:hover .color-card, .checked .color-card{
	cursor: pointer;
	margin-top: 1em;
}

.checked .label, .checked .ok, .color:hover .ok {
	color: var(--text-on-bg-color);
	text-align: center;
	background-color: none;
}

.jel {
	color: transparent;
	font-size: 1.5em;
	text-align: center;
	margin-top: .2em;
}

.checked .jel {
	color: var(--text-on-bg-color);
} 

/* / második oldal */


/* reg page */
.left-box, .left-box-b {	
	display: grid;
	grid-template-columns: .6fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1.5em;
	
	margin-bottom: 2em;
}

:is(.left-box, .left-box-b) img {
	grid-column: 1 / 3;
	grid-row: 1 / -1;
	margin: 2em 0 8em;
}

:is(.left-box, .left-box-b) .item{
	grid-column: 2 / -1;
	grid-row: 1 / -1;
	background: var(--disposed-field-bg);
	justify-self: stretch;
	
	border-radius: 1.5em;
}

.name-and-color {
	grid-column: 3 / -1;
	grid-row: 1 / -1;
	margin-top: 2em;
	
	padding: 0 .5em 2em 0;
}


.ticket-disp {
	grid-column: 2 / -1;
	grid-row: 1 / -1;
	
	display: grid;
	grid-template-columns: 1fr;
	
	padding: 2em;
	background: var(--field-bg);
	color: var(--h-color);
	border-radius: 1.5em;
}

#gameCurrencyNumberLabel, #bonusCurrencyNumberLabel {
	
	
	color: var(--h-color);
	font-size: 5rem;
	font-weight: bold; font-family: var(--default-bold-font);
}

@media screen and (max-width: 1000px) {
	#gameCurrencyNumberLabel, #bonusCurrencyNumberLabel {
		font-size: 4rem;
	}
}


.reghead {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: repeat(10, auto);
	grid-template-areas: 	" surname surname surname  "
							" name name name "
							" sex sex sex"
							" email email  zip "
							" date-title date-title date-title "
							" date date date "
							" phone-title phone-title phone-title"
							" phone phone phone "
							" captcha-title captcha-title captcha-title "
							" captcha captcha captcha ";
	grid-column-gap: 1em;
}

.reghead input, .reghead select {
	margin-bottom: 1.6em;
}

@media screen and (max-width: 1000px) {
	.reghead {
		padding: 2em 1em 0;
	}
	
	.reghead div{
		text-align: center;
	}
	
	.reghead input, .reghead select {
		margin-bottom: 1.2em;
	}
	
	.regpage-restructure {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	
	.regpage-restructure .regform{
		grid-column: 1 / -1;
		grid-row: 1 / 2;
	}
	
	.regpage-restructure .to-the-end{
		grid-column: 1 / -1;
		grid-row: 2 / -1;
		
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto auto;
		grid-gap: 1em;
		
		margin-top: 3em;
	}
	
	.left-box {
		grid-column: 1 / 2;
		grid-row: 1 / -1;
		
	}	
	
	.left-box-b {		
		display: block;
		align-self: stretch;
		margin: 0;
	}
	
	.ticket-disp {
		padding: 1em;
		text-align: center;
	}
}


.surname {
	grid-area: surname;
}

.name {
	grid-area: name;
}

#genderQuestion {
	grid-area: sex;
	text-align: center;

}
.email {
	grid-area: email;
}

.zip {
	grid-area: zip;
}

.date-title {
	grid-area: date-title;
	padding-bottom: 0.6em;
	font-weight: bold;
}

.date {
	grid-area: date;
	text-align: center;
}

.phone-title {
	grid-area: phone-title;
	padding-bottom: 0.6em; 
	font-weight: bold;
}

.phone {
	grid-area: phone;
	text-align: center;
	color: var(--h-color);  
	font-weight: bold;
}

.captcha-title {
	grid-area: captcha-title;
	padding-bottom: 0.6em;
	font-weight: bold;
}
.captcha {
	justify-self: center;
	
	grid-area: captcha;
	padding-bottom: 0.6em;
	font-weight: bold;
}

.rc-anchor-light.rc-anchor-normal {
	border: transparent !important;
}

.surname input, .name input, .zip input, .email input {
	width: 100%
}

input#birthYear, input#birthDay{
	width: 4em;
}

input#telephoneNumber, select#birtMonth{
	width: 16em;
}

input#dialingCode {
	width: 4em;
}

select#telephoneService {
	width: 10em;
}

.section-div{
	height: 1px;
	overflow: hidden;
	border-bottom: 1px solid var(--text-on-bg-color);
	margin: 2em 0;
}

#permissionPartners {
	margin: 1em 0 0  2em;	
}

@media screen and (max-width: 1000px) {
	#permissionPartners{
		margin: .5em 0 .5em  1em;	
	}
}

/* /reg page */

/* profile page */
.comm-inv {
	background-image: linear-gradient(170deg, var(--bottom-bg-color), var(--middle-bg-color));
	color: var(--text-on-bg-color);
	padding: 1em;
}

.comm-inv :is(h2, h3, h4, a, a:hover, b, .b, .szoveg-kiemelt) {
	color: var(--text-on-bg-color);
}

.col2-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
	align-items: stretch;
	
	margin-bottom: 3em;
}

@media screen and (max-width: 1000px) {
	.col2-1 {
		grid-template-columns: 1fr;
		grid-gap: 3em;
	}
}

.col2-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1em;
	grid-row-gap: 2em;
}

@media screen and (max-width: 1000px) {
	.col2-form {
		grid-template-columns: 1fr;
		grid-row-gap: 1em;
	}
	
	.col2-form div {
		text-align: center;
	}
	
	.col2-form div:nth-of-type(2n) {
		margin-bottom: 2em;
	}
	
	.col2-form :is(input[type="text"], input[type="email"]) {
		width: 90% !important;
	}
}

.upper {
	text-transform: uppercase;
}

.info-head {
	display: grid;
	grid-template-columns: 1fr 3fr;
	
	margin: 4em 0 3em;
}

.info-head-main {
	grid-column: 1 / 2;
	
	display: grid;
	grid-template-rows: auto 1fr auto;
	
	font-weight: bold;
	line-height: 1.8em;
}

.info-head-main .mas {
	margin: 2em 0;
}

.info-head-tabl { 
	display: grid;
	grid-template-columns: repeat(2, .3fr 1fr);
	align-items: start;
}

.info-head-tabl > div {	
	padding: 0 2em 1em;
	margin: 0 0 0 15%;
}

.info-head-tabl > div.icon::before {
	/* counter-increment: section; */
    /* content: counter(section); */
	
	line-height: 1.4em;
	color: var(--text-on-bg-color);
	font-weight: bold;
	font-size: 3em;
	text-align: left;
}

.content2 .info-head-tabl > div::before {
	color: var(--disposed-field-bg);
}

@media screen and (max-width: 1000px) {
	.info-head {
		grid-template-columns: 1fr;
		grid-row-gap: 1em;
	}
	
	.info-head-tabl { 
		grid-template-columns: 1fr;
	}
	
	.info-head-tabl > div {		
		padding: 0;
		text-align: left;
	}
	
	.info-head-tabl > div::before {
		font-size: 2em;
		line-height: 2.1em;
		width: 2em;
		height: 2em;
		position: relative;
		left: -2em;
		top: 2em;
		margin-bottom: 1em;
	}
}

.info-graf-tabl {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 2fr;
	grid-gap: 1em;
}

.icon {
	align-self: stretch;
}

.icon.i1 {background: url(../images/design/01.png) top center no-repeat; background-size: 100%;}
.icon.i2 {background: url(../images/design/02.png) top center no-repeat; background-size: 100%;}
.icon.i3 {background: url(../images/design/03.png) top center no-repeat; background-size: 100%;}
.icon.i4 {background: url(../images/design/04.png) top center no-repeat; background-size: 100%;}
.icon.i5 {background: url(../images/design/05.png) top center no-repeat; background-size: 100%;}
.icon.i6 {background: url(../images/design/06.png) top center no-repeat; background-size: 85%;}

.info-graf-tabl .tart, .info-graf-tabl .tart a{
	color: var(--text-on-bg-color);
}
.info-graf-tabl .tart a:hover{
	color: black;
}

@media screen and (max-width: 1000px) {
	.info-head {
		grid-template-columns: 1fr;
		grid-row-gap: 1em;
	}
	
	.info-graf-tabl{
		display: block;
	}

	.info-graf-tabl .icon{
		justify-self: center;
		
		min-height: 8em;
		width: 100%;
		margin-top: 2em;
	}

	.info-graf-tabl .icon:is(.i1, .i2, .i3, .i4, .i5, .i6){
		background-size: contain;
	}
}

@media screen and (max-width: 1000px) {
	.info-head {
		grid-template-columns: 1fr;
		grid-row-gap: 1em;
	}
	
	.info-head-tabl{
		grid-template-columns: 1fr 3fr;
	}
	
	.info-head-tabl .tart{
		align-self: center;
	}

	.info-head-tabl .icon{
		min-height: 8em;
	}
}

.left-box.user-profile  img{
	margin-bottom: 2em;
}

.left-box.user-profile  .name-and-color{
	font-size: 1.5em;
	margin-right: 2em;
	line-height: 1.2em;
}

.left-box.user-profile  .ticket-dis{
	justify-self: left;
}

.reg-head {
	background: var(--disposed-field-bgv3);
	padding: 2em;
	margin-top: 2em;
	border-radius: 2em;
	color: var(--text-on-bg-color);
}

.reg-head > * {
	color: var(--text-on-bg-color);
}

 /* figyubox */
 
.figyubox {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr;
	grid-column-gap: 2em;
	
}

.tabla { 
	grid-column: 1 / 2;
	
	display: grid;
	align-items: center;
	justify-items: center;

	background: var(--field-bg);
	padding: 2em;
	border-radius: 2em;
}

.tabla h3 {
	color: var(--h-color);
	font-family: var(--default-bold-font);
}

.figyu {
	grid-column: 2 / 3;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: rapeat(3, 1fr);
	align-items: center;
	grid-row-gap: 1.4em;
	
	background: var(--disposed-field-bg);
	padding: 2em 3em;
	border-radius: 2em;
	color: var(--text-on-bg-color);
}

.figyu * {
	color: var(--text-on-bg-color);
	font-size: 1.2rem;
}

.figyu .kozepe {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	grid-column-gap: 2em;

	font-weight: bold;
	font-family: var(--default-bold-font);
	font-size: 1.6em;
}

@media screen and (max-width: 1000px) {
	.figyubox {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-gap: 0;
	}
	
	.tabla {
		grid-row: 1 / 2;
		grid-column: 1 / -1;
		
		grid-template-rows: auto 1fr;
		
		border-radius: 2em 2em  0 0;
	} 
	
	.tabla img {
		width: 70px;
	}
	
	.figyu {
		grid-row: 2 / 3;
		grid-column: 1 / -1;
		
		border-radius: 0 0 2em 2em;
		font-size: .8em;
	}
	
	.figyu * {
		font-size: .9rem;
	}
	
	.figyu .kozepe {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-row-gap: 2em;

		font-weight: bold;
	}
	
}

.szoveg-kiemelt {
	color: var(--exposed-bg-text);
	text-transform: uppercase;
	font-size: 1.4em;
}

 /* /figyubox */

/* energia hatékonyság oktatás */

/* különjáték hirdetés */
.hirdetmeny {
	display: grid;
	grid-template-columns: 1fr 1fr;
	
	background: linear-gradient(-90deg, var(--disposed-field-bg), var(--disposed-field-bgv2)); 
	border-radius: 2em;
	margin: 3em 0 2em;
}

.hird-cont {
	margin:  2em 0 2em 3em;
	font-size: 1.4em;
	line-height: 1.2em;
}

.hird-cont h3{
	font-size: 2.4em;
	color: var(--text-on-bg-color); 
}

.bgs {
	display: inline-block;
	background: var(--text-color);
	color: var(--text-on-bg-color); 
	font-size: 1.0em;
	line-height: 1.2em;
	padding: 0 .5em;
	
}

.hird-img {
	background: url(../images/design/kulonjatek.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
}

@media screen and (max-width: 1000px) {
	.hirdetmeny {
		grid-template-columns: 1fr;
	}
	
	.hird-cont {
		margin:  1em;
		font-size: 1.2em;
		line-height: 1.2em;
	}
	
	.hird-img {
		height: 80vw;;
	}
}

/* /különjáték hirdetés */


/* tipp tar */
.energia {
	margin: 4em 0;
}

.tipptar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-: stretch;
	grid-gap: 1em;
	
	margin: 2em 0;
	background: var(--neutral-grey-very-light);
	border-radius: 1em;
	padding: 1em;
	
}

.tipptar .elem {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto 3.5em;
	grid-gap: .6em;
	
	border-radius: 1em;
	background: var(--text-on-bg-color);
	overflow: hidden; /*sarok lekerekítés miat kell*/
}

.tipptar .elem .img {
	padding-top:  1em;
}

.tipptar .elem .img img {
	width: 95px;
}

.tipptar .elem div {
	padding:  0 1em;
}

.tipptext {
	font-weight: bold;
}

.tipptext a {
	text-decoration: none;
}

.tippreward {
	font-size: .7em;
}

.more {	
	display: block;
	padding-top: 1em;
	text-align: center;
	background: var(--disposed-field-bg);
	text-decoration: none;
	color: var(--text-on-bg-color)
}

a.more:hover{
	color: var(--text-on-bg-color);
	text-decoration: underline;
}

@media screen and (max-width: 1000px) {
	.tipptar {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* /tipp tar */

/*energia megtakarítási tippek */

.energiahat-teljes {	
	margin: 3rem 2rem;
	overflow: hidden;
	background: var(--field-bg);
	border-radius: 2em;
	margin: 2em 0;
	overflow: hidden;
}

.energiahat-teljes > * {
	padding: 0 2em;
}

.energiahat-teljes h3 {
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	
	padding: 1em 2em 1em;
}

@media screen and (max-width: 1000px) {
	.energiahat-teljes > * {
		padding: 0 1em;
	}
	
	.energiahat-teljes h3 {
		padding: 1em;
	}
}

.energiahat-teljes h4 {
	color: var(--disposed-field-bg);
	
	margin-bottom: .6em;
	font-family: var(--default-bold-font);
}

.energiahat-teljes > *:last-child {
	border-radius: 0 0 2em 2em;
}

.energiahat-teljes .tabloid {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto  1fr auto  6.5em auto auto; 
	grid-gap: 3em;
	grid-template-areas: 	"tablo-image header"
							"tablo-image ttart"
							"tablo-image tsavings"
							"tablo-image reward-now"
							"treward treward"
							"tmore taccept";
	
	padding: 2em;
}

.detailed-offer .energiahat-teljes .tabloid {
	display: grid;
	grid-template-columns: 5fr 6fr;
	grid-template-rows: auto  1fr auto 6.5em auto ; 
	grid-gap: 3em;
	grid-template-areas: 	"tablo-image header"
							"tablo-image ttart"
							"tablo-image tsavings"
							"tablo-image reward-now"
							"tablo-image taccept"
							"treward treward";
	
	padding: 2em;
}

@media screen and (max-width: 1000px) {
	.detailed-offer .energiahat-teljes .tabloid, .energiahat-teljes .tabloid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(8, auto);
		grid-gap: 1em;
		grid-template-areas: 	"header"
								"ttart"
								"taccept"
								"tablo-image"
								"tsavings"
								"reward-now"
								"treward"
								"tmore";
		justify-items: center;
		
		padding: 1em;
	}
}

.tabloid .image{
	grid-area: tablo-image;
	
	background: var(--image-bg);
	border-radius: 1em;
	overflow: hidden;
}

@media screen and (min-width: 1000px) {
	
	.tabloid .image{
		height: 700px;
	}
}

@media screen and (max-width: 1000px) {
	
	.tabloid .image{
		justify-self: stretch;
		
		text-align: center;
	}
}

.tabloid .header {
	grid-area: header;
	
	font-size: 1.4em;
	line-height: 1.0em;
}

.ttart {
	grid-area: ttart;
	line-height: 1.2em;
}

.lila {	
	color: var(--disposed-field-bg); 
	font-weight: bold;
}

.savings {
	grid-area: tsavings;
	
	border-left: 10px solid var(--disposed-field-bg);
	padding-left: .5em;
	font-size: 1.2em;
	line-height: 1.4em;
}

.savings b {
	display: block;
	font-size: 1.2em;
	color: var(--disposed-field-bg) !important; 
}

.reward-now {	
	justify-self: start;

	grid-area: reward-now;

	text-align: left;
	overflow: hidden;
	color: var(--text-on-bg-color);
	border-radius: 1em;
	background: var(--disposed-field-bg) url(../images/design/i-ticket.png);
	background-repeat: no-repeat;
	background-position: 1.8em center ;
	padding: 1em 2em 1em 6em ;
	font-size: 1.2em;
	display: inline-block;
}

.reward-now b {
	display: block;
	font-size: 1.2em;

}

.treward {
	grid-area: treward;
	
	padding: 1em;
	border-radius: 2rem;
	border: 1px solid var(--disposed-field-bg);
	text-align: center;
	font-size: 1.4em;
}

.treward b {
	display: block;
	font-size: 1.2em;
}

.taccept {
	grid-area: taccept;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2em;
	align-items: center;
	justify-items: center;
}

.more_details {
	grid-area: tmore;
	
	align-self: center;
	justify-self: center;
	
	color: var(--disposed-field-bg);
	border: 1px solid var(--disposed-field-bg);
	
	text-decoration: none;
	display: inline-block;
	padding: 1.5em 4em;
	border-radius: 3em;
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
}

.tabloid input[type="submit"].gomb {
	font-size: 1.2rem;
	padding: 1.5em 4em;
	border-radius: 3em;
}

.to-be-opened {
	padding-bottom: 2em;
	display: none;
}

@media screen and (max-width: 1000px) {
	.tabloid .header, .treward {
		font-size: 1.2rem;
	}
	
	.savings, .more_details {
		font-size: 1rem;
	}

	.more_details, .tabloid input[type="submit"].gomb {
		padding: 1em 2em;
		margin-top: 2em;
	}
}
/* /energia megtakarítási tippek */

/*kérdések egyesével */
	
.drawback {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 2fr 1fr;
	
	border-radius: 2em;
	background: var(--field-bg);
	overflow: hidden;
	
	margin-bottom: 2em;
	
}

@media screen and (max-width: 1000px) {
	.drawback {
		display: block;
	}
}

.drawback h3 {
	text-transform:uppercase; 
	font-size: 1.4em;
	line-height: 1em;
}

.drawback > div {
	display: grid;
	grid-gap: 1em;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr;
	
	padding: 2em;
}

.firstpart div {
	padding-left: 4em;
}

.energy-answ {
	align-self: end;
}

.rarepart {	
	justify-items: center;
	
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
}



.rarepart div {
    font-size: 1rem;
}

.rarepart div b {
    margin: 0 .2em;
    font-size: 2em;
}

.drawback input[type="submit"].gomb {
	align-self: end;
	
	color:  var(--disposed-field-bg);
	background: var(--field-bg);
	font-size: 1.2rem;
	padding: .5em 2em;
}

.drawback input[type="submit"].gomb:hover {
	color:  var(--disposed-field-bg);
	background: var(--field-bg);
}
/* /kérdések egyesével */

/* visszamérés */
.offer-conf {
	display: grid;
	grid-gap: 2em;
	grid-template-columns: 1fr auto;
	
	border-radius: 2em;
	background: var(--field-bg);
	overflow: hidden;
	background: var(--image-bg);
	margin-bottom: 3em;
	padding: 2em;
	border-top: 2em solid var(--disposed-field-bg);	
}

@media screen and (max-width: 1000px) {
	.offer-conf {
		grid-template-columns: 1fr;
	}

	.conf-quests {
		margin-top: .8em;
	}
}

.offer-conf .image{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr ;
	grid-gap: 2em;
}

@media screen and (min-width: 1000px) {
	.offer-conf .image {
		min-width: 380px;
		min-height: 680px;
	}
}

.offer-conf .image img{
	border: 10px solid var(--field-bg);
	border-radius: 1em;
}

.offer-conf .image a.gomb{
	padding: .4em 1em;
	font-size: 1em;
}

.conf-cont {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2em;
}

.conf-cont h3{
	line-height: 1.2em;
	font-family: var(--default-bold-font);
}

.conf-cont :is(input[type="submit"].gomb, a.gomb) {
	align-self: end;
	
	color:  var(--text-color);
	background: var(--field-bg);
	font-weight: bold;
	font-family: var(--default-bold-font);
	margin-top: 1em;
	text-align: center;
}

.conf-cont .sheetlabel::before {
    box-shadow: 0 0 0 2px var(--disposed-field-bg);
}

.reward-conf {	
	color: var(--text-on-bg-color);
	border-radius: 1em;
	background: var(--disposed-field-bg) url(../images/design/i-ticket.png);
	background-repeat: no-repeat;
	background-position: center 1.8em ;
	padding: 5em 2em 1em;
	font-size: 1.2em;
	display: inline-block;
	text-align: center;
}

.sj {
	font-size: 3em;
	font-family: var(--default-bold-font);
}

.reward-conf b {
	display: block;
	font-size: 1.2em;

}

/* visszamérés */



/* energia hatékonyság oktatás */

.white-box {
	padding: 2em;
	margin: 3rem 0 2rem;
	overflow: hidden;
	background: var(--field-bg);
	border-radius: 2em;
	margin: 2em;
}

.white-box .szoveg-kiemelt {
	color: var(--text-color);
}

@media screen and (max-width: 1000px) {
	.white-box {
		padding: 1em;
		margin: 2em 0;
	}
}

.sum-card {
	max-width: 17.4%;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	
	align-items: center;
	
	text-align: center;
	margin: .75em;
	padding: 1em;
	box-shadow: 0px 0px 35px 0px var(--gomb-on-bg-shadow);
	background: var(--bottom-bg-color);
}

.sum-card.tic {
	max-width: 33%;
}

@media screen and (max-width: 1000px) {
	.sum-card {
		max-width: 42%;
	}

	.sum-card.tic {
		max-width: 90%;
	}
}

.sum-card  img {
	border-radius: 50%;
}

.sum-card  h4 {
	font-size: 1.1rem;
}

.sum-card .tic-num {
	font-size: 6em;
	
}

.imgdiv {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1.5fr 1fr;
	justify-items: center;
	
	margin-right: 4em;
	padding: 3em;
}

.imgdiv img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	
	z-index: 10;
}

.imgdiv div {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	justify-items: center;
	
	background: linear-gradient(135deg, transparent, var(--text-on-bg-color), transparent);
	border-radius: 50%;
	opacity: .8;
	margin: auto 0;
	color: var(--text-color);
}

.exp-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	
	padding: 0 .5em .8em;
}

.exp-list.pr > li {
	border-top: 1px dotted var(--bottom-bg-color);
	padding: .7em 0 
}

.exp-list li::before {	
	content: "";
	font-size: 1.2em;
	width: .4em;
	height: .4em;
	margin: .4em 1em 0 .6em;
	border-radius: 50%;
	color: var(--h-color);
	background: var(--text-color);
	font-weight: bold;
	text-align: center;
}

.content .exp-list li::before {
	background: var(--h-color);
}


li .exp-list li::before {
	font-size: .8em;
	line-height: .8em;          
}

ol.exp {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	counter-reset: exp;
	margin-bottom: 2em;
}

ol.exp li {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	justify-items: center;
	
	border-top: 1px solid var(--disposed-field-bg);
	padding: 0 2em 1em;
	text-align: center;
}

ol.exp li::before {	
	counter-increment: exp;
    content: counter(exp);
	font-size: 1.2em;
	line-height: 2.1em;
	width: 2em;
	height: 2em;
	position:relative;
	top: -1em;
	margin-bottom: 1em;
	border-radius: 50%;
	border: 3px solid var(--disposed-field-bg);
	color: var(--disposed-field-bg);
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 1000px) {
	.exp-list li {
		padding: 0 1em .8em 0;
	}
	
	.exp-list li:before {
		margin: .4em 1em 0 .6em;
	}
	
	ol.exp { 
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, auto);
		
		margin-top: 1em;
		margin-left: 0em;
	}
	
	ol.exp li {
		grid-template-columns: auto 1fr;
		
		border-left: 1px solid var(--bottom-bg-color);
		border-top: none;
		padding: 0 0 3em 0em;
		text-align: left;
		margin: 0;
	}
	
	ol.exp li::before {
		font-size: 1.2em;
		line-height: 2.1em;
		width: 2em;
		height: 2em;
		position: relative;
		left: -1.0em;
		top: 2em;
		margin-bottom: 1em;
	}
}

@media screen and (max-width: 1000px) {
	.car-wrap {
		max-width: 100vw; 
		overflow: hidden; 
		position: relative; 
		right: -1em;
	}
}


.color-triplet {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
	align-items: stretch;
	
	margin: 1em 0;
}

.color-triplet > div {
	padding: 2em;
	color: var(--text-on-bg-color);
	background: var(--disposed-field-bg);
	border-radius: 1em;
}

@media screen and (max-width: 1000px) {
	.color-triplet {
		grid-template-rows: repeat(3, 1fr);
		grid-template-columns: 1fr;
		
	}
}

.exp-sup {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;
	align-items: stretch;
	
	margin: 2em 0;
	font-size: 1.4rem;
	counter-reset: exp;
}

@media screen and (max-width: 1000px) {
	.exp-sup {
		grid-template-rows: repeat(3, 1fr);
		grid-template-columns: 1fr;
		
	}
}

.exp-sup {
	list-style-type: none;
}

.exp-sup * {
	font-size: 1.4rem;
}

.exp-sup > * {
	padding: 2em;
	background: var(--text-on-bg-color);
	border-radius: 2rem;
}

.to-be-opened .exp-sup >* {
	background: var(--neutral-grey-light);
}

.exp-sup .title {
	font-weight: bold;
	font-family: var(--default-bold-font);
	margin-bottom: 1.6em;
}

.exp-sup >*::before {	
	counter-increment: exp;
    content: counter(exp);
	font-size: 1.2em;
	position:relative;
	top: 0em;
	left: 0em;
	margin-bottom: 1em;
	font-weight: bold;
	font-family: var(--default-bold-font);
}



/* summary */
.tiny {
	font-size: .8em;
	font-weight: normal;
}

.summary {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr ;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:	" ticket win-bet total"
							" ticket win-bet inbet";
	grid-gap: 1em;
	
	width: 100%;						
}


.summary > * {
	display: grid;
	align-items: center;
	
	background: var(--text-on-bg-color);
	padding: 1em 2em;
	color: var(--disposed-field-bg);
	border-radius: 2em;
}

.summary * b {
	font-size: 3.6em;
	font-weight: bold;
	line-height: 1.0em;
}

.summary * b .small-b{
	font-size: .5em;
	font-weight: bold;
}

.summary a {
	text-decoration: none;
}

.total {
	grid-area: total;
	
	text-align: left;
}

.win-bet {	
	grid-area: win-bet;
	
	justify-items: center;

	
	text-align: center;
}

.win-bet * {
	color: var(--disposed-field-bg) !important;
	text-align: center;
}

.inbet {
	grid-area: inbet;
	
	text-align: left;
}

.ticket {	
	grid-area: ticket;
	
	align-content: center;
	justify-content:start;
	grid-gap: 0;
	
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	text-align: left;
}

@media screen and (max-width: 1000px) {
	.summary {
		grid-template-columns:  1fr 1fr;
		grid-template-rows:  auto auto auto auto;
		grid-template-areas: 	" total total "
								" ticket win-bet "
								" inbet inbet " ;
		
		margin: 3em 0 2em;
	}
	
	.summary > * {
		padding: 1em;
	}

	.summary * b {
		font-size: 2.6em;
	}

	
	.league {
		top: 2em;
		right: -2em;
	}

	.summary * b.small-mob-b {
		font-size: 1.4em;
	}
	
	.inbet {
		grid-template-columns: auto 1fr auto 1fr;
		grid-template-rows: auto 1px;
	}
	
	.summary .medal {
		grid-column:  1 / -1;
		justify-self: center;
		position: relative;
		top: 1em;
	}
	
	.summary .triplet b {
	font-size: 1.2em;
	}
}

.resume {
	background: rgba(0, 0, 0, .35); 
	margin: 0 15% 2em; 
	padding: 1em; 
	
	border-radius: .7em;
	text-align: center;
}
/* /summary */

.text {
	margin: 2em auto; 
	text-align: justify;
}

@media screen and (min-width: 1000px) {
	.text {
		width: 80%;
		margin: 2em auto; 
	}
}

.rule-list ul {
	list-style-type: disc;
}

.rule-list ul li {
	margin-left: .6em;
	padding: 0 .3em 1em; 
}


@media screen and (max-width: 1000px) {
	.rule-list ul li {
		margin: 0;
		padding: .5em .3em 0; 
	}
}

.mini-menu {
	margin-bottom: 2em;
}

.mini-menu a{
	display: inline-block;
	padding: .5em 1em;
	margin-right: 1em;
	text-transform: uppercase;
	font-weight: bold; 
	color: var(--h-color)
}

.table {
	display: grid;
	
	margin: 2em 0;
	border-radius: 2em;
	overflow: hidden;
	background: var(--text-on-bg-color);
}

@media screen and (max-width: 1000px) {
	.table {
		border-bottom: 1px solid var(--neutral-grey-light);
	}
	
	.table * {
		font-size: .9em;
	}
}

.table > :is(div, a)  {
	display: grid;
	align-items: center;
	
	padding: 1em 0 1em;
	text-align: center;
}

.table a {
	font-weight: bold; 
	text-decoration: none;
}

@media screen and (min-width: 1000px) {
	
	.table > :is(div, a)  {
		border-top: 1px dotted var(--neutral-grey-light);
	}
}

@media screen and (max-width: 1000px) {
	.table .last  {
			border-bottom: 1px dotted var(--light-border);
		}
}


@media screen and (min-width: 1000px) {
	.table .first {
		text-align: left;
		padding-left: 2em;
	}

	
	.table > .double-flagged {
		grid-template-columns: 1fr auto auto 1fr;
		
		text-align: left;
		align-items: center;
	}
	
	.table .flagged{
		grid-template-columns: auto 1fr;
		align-items: center;
	}
}

.double-flagged:hover {
	cursor: pointer;
}

.double-flagged img {
	/* border-radius: 3px; */
}

@media screen and (max-width: 1000px) {
	.table > .flagged{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		justify-items: center;
	}
}

.table .sum {
	font-size: 1.1em;
	font-weight: bold;
	border-bottom: none !important;
	
}

@media screen and (min-width: 1000px) {
	.table .sum {
		border-top: 2px solid var(--neutral-grey-light);
	}
}

@media screen and (max-width: 1000px) {
	.table .sum.first{
		border-top: 1px solid var(--content-h-color);
	}
}

.table .table-head {
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	font-weight: bold;
	padding-bottom: 1em;
}

.table img {
	width: 40px;
	margin: 0 .8em;
	/* border-radius: 3px; */
}

.table.half {
	grid-template-columns: auto auto;
}

.table.naked > div {
	border-top: 0;
	padding: .3em;
}
/* bets page */

.table.bet-act  {
	grid-template-columns: 2fr 1fr repeat(2, minmax(2em, .5fr));
}

.table.bet-past  {
	grid-template-columns: 1.5fr 1fr repeat(3, minmax(2em, .5fr));
}

.table.bet-future  {
	grid-template-columns: 2fr  .6fr .5fr 1fr 5em;
}

.table.bet-future.match-only  {
	grid-template-columns: 2fr  repeat(3, .5fr) 5em;
}

.table.bet-cart  {
	grid-template-columns: 2fr 1fr repeat(2, minmax(2em, .5fr))  .3fr;
}

@media screen and (max-width: 1000px) {
	.table .first  {
		border-top: 1px dotted var(--neutral-grey-light);
		padding-left: .6em;
		padding-right: .6em;
	}
	
	.table-head:is(.first, .t-date) {
		display: none;
	}
	
	.table:is(.bet-act, .bet-past, .bet-future, .bet-cart) .first {
		text-align: center;
		font-weight: bold;
		border-bottom: none !important;
		grid-column: 1 / -1;
	}
	
	.table.bet-act  {
		grid-template-columns:  1fr repeat(2, minmax(2em, .6fr));
	}
	
	
	.table.bet-cart  {
		grid-template-columns:  1fr repeat(2, minmax(2em, .6fr)) .3fr;
	}
	
	.table.bet-past  {
		grid-template-columns:  1fr repeat(3, minmax(2em, .6fr));
	}

	.table.bet-future  {
		grid-template-columns:  1fr .5fr 1fr;
	}
	
	.table.bet-future.match-only  {
		grid-template-columns:   repeat(3, 1fr);
	}

	.table.bet-future.match-only .double-flagged  {
		grid-column: 1 / 5;
		text-align: center;
		font-weight: bold;
		border-bottom: none !important;
	}
}

.bet-future .gomb {
	padding: 0 .4em;
	border: 0;
}

.plus {
	color: var(--bottom-bg-color);
	font-weight: bold;
}

.minus {
	color: var(--danger-color);
	font-weight: bold;
}

.addnew {
	display: inline-block;
	font-weight: bold;
	color: var(--bottom-bg-color);
	font-weight: 1.4em;
}

.addnew:before {
	content:"⚽"; /* html &#9917 */
	display: inline-block;
	margin: 0 .5em;
	color: var(--bottom-bg-color);
}
/* /bets page */

/* basket page */
input.bet-edit {
	width: 6.5ch;
	padding: .2em .5em;
	margin: .3em 0;
	border: 1px solid var(--middle-bg-color);
	text-align: center;
}

.bet-edit:read-write {
	border: 1px solid var(--middle-bg-color);
	font-weight: bold;
}

.bet-edit:read-only {
	border: none;
	box-shadow: 0 0 0 0 transparent;
}

.edit-inp {
	display: grid;
	grid-template-columns: auto 1fr;
}

a.bet-del {
	text-decoration: none; 
	color: red; 
	font-weight: bold;
	border-radius: 50%;
	border: 2px solid red; 
	width: 1.6em;
	height: 1.6em;
	line-height: auto;
	
	display: grid;
	align-items: center;
	justify-items: center;
}

a.bet-edit-icon {
	text-decoration: none;
	padding: 0 1em;
	color: var(--disposed-field-bg)
	color: var(--text-color)
}

.bet-edit-icon::before, .bet-edit-icon::after  {
	padding: .2em .4em;
	border: 1px solid  var(--disposed-field-bg);
	border: 1px solid  var(--text-color);
	border-radius: .5em;
}

.bet-edit-icon::before {
	content: "✎";
	padding: .2em .4em;
}

.bet-edit-icon::after {
	content: "Mentés";
	font-size: .7em;
	font-weight: bold;
	padding: .6em .4em .4em;
}

input.bet-edit:read-write + .bet-edit-icon::before {
	display: none;
}

input.bet-edit:read-only + .bet-edit-icon::after {
	display: none;
}

/* /basket page */

/* betting page */
.betting-result {	
	text-align: center;
	margin: 2em 0;
	padding: 1em;
	border-radius: .7em;
	overflow: hidden;
	box-shadow: 0 0 20px 0px var(--neutral-grey-very-light);
	background: var(--text-on-bg-color);
}

.line {
	grid-column: 1 / -1;
}

@media screen and (max-width: 1000px) {
	.m-line {
		grid-column: 1 / -1;
	}
}

.betting-result.c3 {
	grid-template-columns: 1fr auto 1fr;
} 	

.betting-result.c3 .line {
	grid-gap: .5em;
}

.betting-result > * {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
	
	margin-top: 1em;
}

.betting-result img {
	width: 50px;
	/* border-radius: 3px */
}

.betting-result .gomb {
	margin: 2em 0 ;
}

.betting-result .cbet{
	display: grid;
	justify-content: space-around;
	grid-column-gap: 1em;
	justify-items: center;
	
	margin-top: 2em;
}

.betting-result .cbet.col3{
	grid-template-columns: auto auto auto;
}

.betting-result .cbet.col2{
	grid-template-columns: auto auto;
}

.betting-result .cbet label{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;

	grid-gap: .6em;
	justify-items: center;
	
	font-size: 1.2em;
	margin-bottom: 3em;
}

.betting-result .cbet .sheetlabel::before { grid-row: 3 / 4}
.betting-result .cbet .sheetlabel img { margin-bottom: .4em;}

.betting-result .cbet .qanswer[type="checkbox"] + .sheetlabel::after, .betting-result .cbet .qanswer[type="checkbox"]:checked + .sheetlabel::after {display: none;}

@media screen and (max-width: 1000px) {
	.betting-result .cbet.col3{
		grid-template-columns: auto auto;
	}
}

/* ////*/

.betting-tab .hb img {
	width: 80px;
}

.betting-tab .hb h2 {
	font-size: 2.4em;
	padding-top: .4em;
}

.betting-tab .sheetlabel {
	margin-bottom: .6em;
	/* font-weight: bold;	 */
	color: var(--content-h-color);

}
.betting-tab .sheetlabel:before {
	width: 1.2em;
	height: 1.2em;
	border: 4px solid var(--text-on-bg-color);
	box-shadow: 0 0 0 4px var(--content-h-color);
}

.betting-tab .qanswer + .sheetlabel:before {
	border-radius: 0 !important;
}

.betting-tab .qanswer:checked + .sheetlabel:before {
	background: var(--danger-color);
	border: 4px solid var(--text-on-bg-color);
	box-shadow: 0 0 0 4px var(--content-h-color);
}

.betting-tab .qanswer[type="checkbox"]:checked + .sheetlabel::after {
	background: var(--text-on-bg-color);
	font-size: 1.8em;
}

input.bet-amount {
	width: 5em !important;
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	color: var(--content-h-color)!important;
	margin-top: .6em;
}

@media screen and (max-width: 1000px) {
	.betting-tab .hb h2 {
		font-size: 1.6em;
	}
	
	input.bet-amount {
		font-size: 1.2em;
	}
}

.table.make-champ-bet {
	grid-template-columns: 1.6fr .5fr .5fr .3fr;
}
	
/* /betting page */

/* currency page */

.table.currency-sum {
	grid-template-columns: 2fr 1fr;
}

.table.full-statement {
	grid-template-columns: 3fr 1fr 1fr 1fr;
}

.table.car-draw-statement {
	grid-template-columns: 3fr auto 1fr 1fr 1fr 1fr;
}

@media screen and (min-width: 1000px) {
	:is(.table.car-draw-statement, .table.full-statement) .first {
		display: initial;
	}
}

@media screen and (max-width: 1000px) {
	.table.car-draw-statement {
		grid-template-columns:  1fr 1fr 1fr 1fr;
	}

	.table.car-draw-statement .first, .table.car-draw-statement .t-date  {
		grid-column: 1 / -1;
		
		text-align: center;
		border-bottom: none !important;
	}
	
	.table.car-draw-statement .first {
		font-weight: bold;
	}
	
	.table.mobile-same > div  {
		border-top: 1px dotted var(--neutral-grey-light);
	}
	
	.table.mobile-same .sum {
		border-top: 1px solid var(----neutral-grey-dark);
	}
}
/* /currency page */

/* safe */
.game {
	background: var(--field-bg);
	border-radius: 2em;
	overflow: hidden;
}

.game h3 {
	margin: 2rem 0 0 !important; 
	font-family: var(--default-bold-font);
}

.game-container {
	padding: 1em 2em;
}

.safe_open {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
	
	background: var(--neutral-grey-light);
}

.safe_open div {
	font-size: .9em;
	text-align: left;	
	background: var(--field-bg);
	padding: .8em;
	border-radius: .8em;
}

.game-container h4 {
	color: var(--disposed-field-bg);
	margin: 0 0 .4em;
	font-size: 1em;
}

form#formSafe {
	display: grid;
	grid-template-columns:  1fr auto 2fr;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	
	margin: 2em 0; 
}

.safe-img {
	grid-column: 1 / 2;
	
	padding: 0 2em 0 0;
}

#formSafe .gomb {
	grid-column: 2 / 3;
	
	justify-self: center;
	
	font-size: 1.2em;
	
	padding: .5em 1em;
	background: var(--text-on-bg-color);
	color: var(--text-color);
}

.keyboard {	
	grid-column: 3 / 4;
	justify-self: center;
	height: 100%;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-content: space-between;
	align-items: center;
	grid-gap: .5em;
}

.keyboard select {
	width: auto;
	font-size: .9em;
	text-align: cemter;
	width: 9em;
	padding: 1em 2em;
	margin: .4em;
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
}

.keyboard select option {
	background: #ffffff;
	color: var(--disposed-field-bg);
}

.keyboard select option:hover {
	color: #ffffff;
	background: var(--disposed-field-bg);
}

.keyboard select option:disabled {
	color: gray;
	background: #f2f2f2;
}

#errorSafe {
	grid-column: 1 / -1;
	grid-row: -2 / -1;
	
	margin-top: 2em;
}

.elmagyaraz {
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
}

.s-body {	
	background: var(--disposed-field-bg);
	background-image: url('../images/design/safe-bg.png');
	color: var(--text-on-bg-color);
	padding-top: 2em;
}

@media screen and (max-width: 1000px) {
	.game {
		margin: 1em 0;
	}
	
	.safe_open {
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em;
	
		margin: 0;
		padding: 0;
	}
	
	.safe_open div{
		margin: 0;
	}
	
	.keyboard {
		grid-template-columns: 1fr 1fr;
		margin: .4em 0;
		grid-gap: .3em;
		padding: 1em 0;
		border: 0;
	}
	
	.keyboard select {
		padding: 1em 1em;
		margin: 0;
	}
	
	.game-container {
		padding: 1em 0 1em 1em;
	}
	
	.game-container .elmagyaraz {
		font-size: .8em;
	}
	
	
	form#formSafe {
		grid-template-columns: .5fr 1fr;
		grid-template-rows: auto  auto;
		
		margin: 2em 0; 
	}

	.safe-img {
		grid-column: 1 / -1;
		grid-row: 1 / 2;
		justify-self: center;
		
		padding: 0 auto 2em;
		text-align: center;
		
	}

	#formSafe .gomb {
		grid-column: 1 / 2;
		grid-row: 2 / -1;
	}

	.keyboard {	
		grid-column: 2 / 3;
		grid-row: 2 / -1;
	}

	.keyboard select option:disabled {
		color: gray;
		background: #f2f2f2;
	}
}

@media screen and (max-width: 600px) {	
	.safe_open div {
		font-size: .8em;
	}
}

@media screen and (max-width: 400px) {	
	.keyboard {
		grid-template-columns: 1fr;
	}
}
/* /safe */

/* lucky bag */
.lucky-bag {
	display: grid;
	grid-template-rows: 1fr 2fr;
	grid-template-columns: 1fr;
}

.lucky-bg {
	grid-row: 2 / 3;
	grid-column: 1 / -1;
	justify-self: stretch;
	
	display: block;
	background-image: url('../images/design/safe-bg.png');
}

.lucky-bags {
	grid-row: 1 / -1;
	grid-column: 1 / -1;
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	
}

.lucky-bags > div{	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	
	grid-gap: 1em;
	justify-items: center;
}

.lucky-bags img{
	display: block;
	margin: 0 auto 1em;
}

.lucky-bags button {
	background: var(--field-bg);
	color: var(--disposed-field-bg);
	border: 1px solid transparent;
}

.lucky-bags button:hover {
	color: var(--field-bg);
	background: var(--disposed-field-bg);
	border: 1px solid var(--text-on-bg-color);
}

@media screen and (max-width: 1000px) {
	.lucky-bags button {
		font-size: .9em;
	}
	
	.lucky-bags img{
		object-fit: contain;
	}
}

/* /lucky bag */


/* sponsors */
.footer {
	padding-bottom: 4em;
}

.sponsors, .footer {
	background: var(--footer-bg-color);
}

.sponsors .logo-list > div {
	display: flex;
	justify-items: center;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.sponsor-list a{
	display: inline-block;
	min-width: 35%;
	max-width: 35%;
	text-align: center;
	vertical-align: middle;
	margin-bottom: .3em;
}

.sponsors  .lead-list a {
	min-width: 35%;
	max-width: 35%;
}

.sponsors  img{
	max-width: 100%;
	margin: 0 auto;
}

@media screen and (max-width: 1000px) {	
	.sponsors  a{
		min-width: 35%;
		max-width: 35%;
	}
	
	.sponsors .lead-list a {
		min-width: 35%;
		max-width: 35%;
	}
}

/* /sponsors */

/* footer */

.footer, .footer * {
	font-family: var(--highlight-font);
	color: var(--text-color);
}

.footer :is(a, a:hover) {
	display: inline-block;
	padding: 0 2em .5em 0;
}

@media screen and (min-width: 1000px) {
	.footer-linkek {
		display: grid;
		grid-template-columns: auto 1fr;; 
		align-items: start;
		grid-gap: 2em;
	}
}

/* /footer */

/* popup */
.popup {
	display: grid;
	grid-template-columns: 1fr minmax(auto, 1100px) 1fr;
	grid-template-rows: 1fr auto 1fr;
	
	height: 100vh;
	width: 100vw;
	background: rgba(34, 34, 34, .8);
	z-index: 1001;
	position: fixed;
	top: 0;
	left: 0;
	overflow: scroll; 
}

.popup-content {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	
	box-shadow: 0 0 20px #000000;
	background: transparent;
	border-radius: 2rem;
}

.popup h3 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	
	color: white;
	background: var(--disposed-field-bg);
	padding: 1rem 2rem;
	font-weight: bold;
	color: var(--text-on-bg-color);
	text-align: center;
	border-radius: 2rem 2rem 0 0;
}

.popup .error-popup h3 {
	background: linear-gradient(to bottom, var(--danger-color), var(--danger-color));
}

.popup h3.notpopuph3 {
	color: var(--text-color);
	background: var(--text-on-bg-color);
	text-align: left;
	margin-left: 0;
	padding-left: 0;
}

.popup .kerdoiv{
	margin: 0;
	padding: 0;
}

.popup .reward {
	display: none;
}

.popup .content {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	
	display: initial;
	
	padding: 2rem;
	text-align: center;
	color:  var(--text-color);
	background: var(--text-on-bg-color);
	width: auto;
	margin: 0;
	border-radius: 0 0 2rem 2rem;
}
.popup .close {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	justify-self: end;
	
	font-weight: bold;
	text-decoration: none;
	width: 0;
	height: 0;
	cursor: pointer;
	margin-left: 1em;
	color: var(--text-on-bg-color);
}
.popup .close:before {
	content: "✖";
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.3em;
	display: block;
	color: var(--text-on-bg-color);
	box-shadow: 0 0 10px 0 var(--text-on-bg-color);
	margin-left: .8em;
	height: 2rem;
	width: 2rem;
	border: 4px solid  var(--text-on-bg-color);
	border-radius:50%;
}

.popup button {
	margin: 1em;
	font-size: 1.2em;
}

.popup-reward {	
	display: inline-block;
	text-align: center;
	overflow: hidden;
	color: var(--text-on-bg-color);
	border-radius: 1em;
	background: var(--disposed-field-bg) url(../images/design/i-ticket.png);
	background-repeat: no-repeat;
	background-position: 1em center ;
	padding: .4em 2em .4em 4em ;
	font-size: 1.2em;
}

.popup-reward b {
	font-size: 1.1em;
}

.popup-reward .sj{
	font-size: 1.2em;
	line-height: 1.1em;
}

@media screen and (max-width: 1000px) {
	.popup {
		grid-template-columns: 1fr;
	}
	
	.popup-content {
		grid-column: 1 / -1;
		
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		
		margin: 0 1em;
		border-radius : 2em;
	}
	
	.popup .content {
		border-radius: 0;
	}
	
	.popup .close {
		justify-self: center;
		
		grid-row: 3 / 4;
		grid-column: 1 / 2;
		
		width: 100%;
		height: 3em;
		background: var(--text-on-bg-color);
		margin-left: 0;
		border-radius: 0 0 2em 2em
	}
	
	.popup .close:before {
		color: var(--disposed-field-bg);
		margin-left: 50%;
		border: 4px solid  var(--disposed-field-bg);
	}
}

/* /popup */

/* Loading */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #555;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Loading */

/* /fancy form elements*/
.qanswer {
	opacity: 0;
	z-index: -1;
	width: 0px; height: 0px
}

.sheetlabel {
	display: grid;
	align-items: start;
	grid-template-columns: 1.2em auto 1fr;
	grid-gap: 1em;
	
	text-align: left;
	cursor: pointer;
}

.sheetlabel::before {
	grid-column: 1/2;
	grid-row: 1/2;
	
	content: " ";

	width: 1em;
	height: 1em;
	border: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--text-color);
}

.qanswer[type="radio"] + .sheetlabel::before {
	border-radius: 50%;
}

.qanswer[type="checkbox"] + .sheetlabel {
	align-items: start;
}

.qanswer + .sheetlabel:hover::before {
	background: transparent;
}

.qanswer:checked + .sheetlabel {
	/* font-weight: bold; */
}

.qanswer[type="checkbox"]:checked + .sheetlabel::after {
	grid-column: 1/2;
	grid-row: 1/2;
	
	content: '✔';
	font-size: 1.6em;
	color: var(--text-color);
}

.qanswer[type="radio"]:checked + .sheetlabel::before {
	background: var(--disposed-field-bg);
	border: 2px solid var(--text-on-bg-color);
}

/* /fancy form elements*/

/* Login */
.game-login {
	width: 100%;
	padding: .5em 0;
	
	background: var(--disposed-field-bgv2);
}

.nyitolap {
	display: none;
}

.game-login ul{
	margin: 0 0 0 0;
}

	
@media screen and (min-width: 1000px) {
	.game-login {
		text-align: right;
		position: fixed;
		top: 0;
	}
}

@media screen and (max-width: 1000px) {
	.game-login {
		text-align: center;
	}
}

.game-login li {
	display: inline-block;
	
	word-wrap: nowrap;
	padding: 0 .8em;
	border-right: 2px solid var(--text-on-bg-color);
}

.game-login li:last-child {
	border-right: 0;
}

.game-login a {
	text-decoration: none;
	color: var(--text-on-bg-color);
}

.game-login a:hover {
	text-decoration: underline;
	color: var(--text-on-bg-color);
}

ul.submenu li{
	margin-top: 1em;
	border: none;
	padding: 0 1em;
}

/* Login */

.error-message {
	font-size: 1.2em;
	font-family: arial;
	position: relative;
	padding: 1.5em 3em 1.3em 5em;
	margin: .4em 0;
	color: #000000;
	background: var(--text-on-bg-color);
	box-shadow: 0 0 10px 1px #000000;
	display: inline-block;
}

@media screen and (min-width: 1px) {
	.error-message:before {
		content: "";
		height: 42px;
		width: 42px;
		position: absolute;
		left: 9px;
		display: inline-block;
		border-top: 5px solid #ff0000;
		border-left: 5px solid #ff0000;
		border-right: 5px solid transparent;
		border-bottom: 5px solid transparent;		
		
		transform: rotate(45deg) skew(15deg, 15deg);
		-webkit-transform: rotate(45deg) skew(15deg, 15deg);
		-moz-transform: rotate(45deg) skew(15deg, 15deg);
		-o-transform: rotate(45deg) skew(15deg, 15deg);
		margin-top: 9px;
		vertical-align: middle;
	}

	.error-message:after {
		content: "!";
		font-size: 1.8em;
		font-weight: bold;
		line-height: .8em;
		position: absolute;
		top: 18px;
		left: 10px;
		text-align: center;
		width: 46px;
		display: inline-block;
		border-left: 2px solid transparent;
		border-right: 2px solid transparent;
		border-bottom: 5px solid #ff0000;
		margin-top: 14px;
		vertical-align: middle;
	}
}

figcaption {
	padding: 1em;
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color) !important;
	border-radius: 0 0 1em 1em;
}

@media screen and (min-width: 1000px) {
	figcaption {
		width: 1000px;
		padding: 2em;
		border-radius: 0 0 2em 2em;
	}	
	
}

figcaption a{
	color: var(--text-on-bg-color) !important;
}

.grid {
	display: grid;
	grid-template-columns: 4fr 6fr;
	
	grid-row-gap: .6em;
	grid-column-gap: 1em;
}

.cim {
	grid-column: 1 / 2;
}

@media screen and (min-width: 1000px) {
	.cim {
		margin-left: 2em;
	}
}

.adat {
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: .4em;
	
	grid-column: 2 / 3;
	}

/* kerdoiv*/
.kerdoiv {
	margin: 3rem 0 2rem;
	overflow: hidden;
	padding: 2em;
	background: var(--field-bg);
	border-radius: 2em;
}


@media screen and (max-width: 1000px) {
	.kerdoiv {
		padding: 1em;
		margin: 2em 0;
	}
}

.kerdoiv form {
	display: grid;
	grid-template-columns: 1.2fr 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas: 	" kerdoiv-cim kerdoiv-cim  reward "
							" kerdes-cim kerdes-valasz kerdes-gomb ";
	
	grid-column-gap: 2em;
	grid-row-gap: 1em;
}

@media screen and (max-width: 1000px) {
	.kerdoiv form {
		display: block;
		text-align: center;
	}
	
	.kerdoiv form > div{
		margin-top: 2em;
		text-align: center;
	}
	
	
}

.kerdoiv h3 {
	grid-area: kerdoiv-cim;
	
	margin: 0;
	font-size: 1.6rem;
	font-weight: bold;
	font-family: var(--default-bold-font);
	text-transform: uppercase;
}

.kerdes-cim {	
	grid-area: kerdes-cim;
}

.kerdes-cim h4{
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: normal;
	margin: 0 0 .5em;
}

.kerdes-valasz {	
	grid-area: kerdes-valasz;
}

.kerdoiv .gomb {
	grid-area: kerdes-gomb;
	
	align-self: end;
	justify-self: stretch;
}

.kerdoiv input[type="submit"] {
	background: var(--disposed-field-bg);
	color: var(--text-on-bg-color);
	border: 0;
	font-size: 1.2rem;
	width: auto !important;
	font-weight: bold;
	padding: .7em 2em;
	border-radius: 2em;
	text-transform: uppercase;
	font-family: var(--default-bold-font);
}

.kerdes-valasz input[type="text"], .kerdes-valasz select {
	box-shadow: none;
	border: 1px solid var(--disposed-field-bg);
	color: var(--disposed-field-bg);
	background: var(--text-on-bg-color);
	margin-top: .5em;
	
}

.reward {	
	align-self: end;

	text-align: left !important;
	overflow: hidden;
	color: var(--text-on-bg-color);
	border-radius: 1em;
	background: var(--disposed-field-bg) url(../images/design/i-ticket.png);
	background-repeat: no-repeat;
	background-position: 1em center ;
	padding: .4em 2em .4em 4em ;
	font-size: 1.2em;
}

.reward b {
	font-size: 1.1em;
	display: block;
}

.reward .sj{
	font-size: 1.2em;
	line-height: 1.1em;
}

@media screen and (max-width: 1000px) {
	.reward {
		margin-bottom: 2em;
		padding-left: 25%;
	}
}

@media screen and (max-width: 1000px) {
	
	.kerdoiv h3 {
			padding: .8em 0 0;
			font-size: 1.4em;
	}

	.kerdoiv h4{
		font-size: 1.2em;
	}
	
	.reward {		
		font-size: .8em;
		text-align: right;
	}
	
	.kerdoiv form {
		padding: 2em 0 2em 1em;
	}
}

.kerdoiv .sheetlabel::before {
	border: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--text-color);
}

.kerdoiv .qanswer:checked + .sheetlabel::before {
	border: 2px solid var(--text-on-bg-color);
	background:  var(--text-color);
}

.kerdoiv .qanswer[type="checkbox"]:checked + .sheetlabel::after {
	color: var(--text-on-bg-color);
}

.box-2-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;	
	align-items: center; 
	justify-items: center;
}

@media screen and (max-width: 1000px) {
	.box-2-1 {
		grid-template-columns: 1fr;	
	}
}


.kiemelt-text { 
	font-size: 1.1em;
	background: linear-gradient(to bottom, var(--bottom-bg-color), var(--disposed-field-bg));
	color: #ffffff;
	padding: 1em;
	margin: 0 0 2em;
}

.label {
	padding: .2em .5em;
	margin: .2em;
}	

.kerdoiv .adat input[type="text"], .kerdoiv .adat select {
	margin-right: 0.3em;
}	

.kerdoiv .adat input[type="text"].irsz {
	width: 20%;
	margin-right: .3em;
}
.kerdoiv .adat input[type="text"].varos {
	width: 70%;
}

.kerdoiv .adat input[type="text"].utca {
	width: 70%;
	margin-right: .3em;
}

.kerdoiv .adat input[type="text"].hazszam {
	width: 20%;
}

.kerdoiv .adat input[type="text"].prenum {
	width: 10%;
	margin-right: .3em;
	text-align: center;
}
.kerdoiv .adat input[type="text"].phnum {
	width: 50%;
}

@media screen and (max-width: 1000px) {
	.kerdoiv .adat {
		padding: 0
	}
}

.kerdoiv a.gomb {
	color: var(--text-on-bg-color);
	padding: .3em 3em;
}

@media screen and (max-width: 1000px) {
	.kerdoiv a.gomb, .kerdoiv .gomb input {
		padding: 1em 2em;
		width: auto;
	}
}
/* /kerdoiv*/

#cookie-sav {
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 60vh;
	display: grid;
	grid-template-columns: 1fr 1000px 1fr;
	background: rgba(18, 21, 24, .9);
	color: var(--text-on-bg-color);
	z-index: 1000;
}

#cookie-sav .link {
	color: var(--text-on-bg-color);
}

#cookie-sav .wrapper {
	grid-column:  2 / 3;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
}

@media screen and (max-width: 1000px) {
	#cookie-sav {
		height: 40vh;
		grid-template-columns: 1fr;
		background: rgba(125, 125, 125, .9);
	}
}

/* quiz */

.quiz-edit-form {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);
	grid-gap: 1px;
	
	padding: 2em;
	border-radius: 2em;
}

.quiz-edit-form > div {
	background: var(--field-bg);
	padding: 1em 2em;
}

.quiz-edit-form > div:first-of-type {
	border-radius: 2em 2em 0 0;
	padding-top: 2em
}

.quiz-edit-form > div:last-of-type {
	border-radius: 0 0 2em 2em;
	padding-top: .8em;
	padding-bottom: .8em;
	background: var(--disposed-field-bg);
}

.quiz-edit-form > div:last-of-type a {
	color: var(--text-on-bg-color);
}

.quiz-edit-form > div:last-of-type a:hover {
	color: var(--text-on-bg-color);
}

.quiz-edit-form > div:last-of-type a.pluslink:after {
	color: var(--text-on-bg-color);
}

.quiz-edit-form  input[type="text"] {
	width: 100%;
	margin: 1em 0 .3em;
}

.question-i {
	display: grid;
	grid-template-columns: 1fr .3fr 4fr 2fr;
	grid-gap: 1em;
	align-items: center;
	
	margin-top: 1em;
}

.question-number-label {
	grid-column: 1 / 2;
}

.question-i .question {
	grid-column: 2 / 4;
}

.question-i .error-message, .quiz-edit-form .error-message  {
	grid-column: 2 / -4;
	justify-self: center; margin: 0 auto;
}

.question-i .controls {
	grid-column: -2 / -1;
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
}

.question-i .answer {
	grid-column: 3 / 4;
}



.item-i{
	display: grid;
	grid-template-columns: 2fr 1fr auto;
	grid-gap: 1em;
	align-items: center;
	
	padding-bottom: .6em;
}

.del-link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: .6em;
	text-decoration: none;
}

.del-link:hover {
	text-decoration: underline;
}

.pluslink a,  a.pluslink  {
	position: relative;
	display: inline-block;
	padding: .5em 1em .5em 2.6em !important;
}

a.pluslink a:after, a.pluslink:after {
	content: "+";
	display: inline-block;
	height: 0;
	font-size: 1.4em;
	color: var(--disposed-field-bg);
	font-weight: bold;
	width: 0;
	position: absolute;
	left: 1em;
	top: .35em;
}

a.gomb.pluslink:after {
	color: var(--text-on-bg-color);
}

.table.quiz-list {
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

@media screen and (max-width: 1000px) {
	.table.quiz-list {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.table.quiz-list .table-head.first {
		visibility: hide;
	}
	
	.table.quiz-list .table-head.share-box {
		display: none;
	}
	
	.table.quiz-list .share-box div.center {
		display: inline-block;
		margin: 0 1em;
	}
	
	.table.quiz-list :is(.first, .share-box) {
		grid-column: 1 / -1;
	}
	
	.table.quiz-list .first {
		text-align: center;
		font-weight: bold;
		border-bottom: none !important;
	}
	
	.quiz-edit-form {
		padding: 0em;
	}
	
	.quiz-edit-form > div {
		padding: 1em;
	}
	
	.question-i {
		grid-template-columns: 2fr 1fr;
	}
	
	.question-number-label {
		grid-column: 1 / -1;
		margin-top: 2em;
	}
	
	.question-i :is(.question, .answer) {
		grid-column: 1 / 2;
	}	
}

/* quiz forms*/

.quiz-close-div {
	padding: 1em 2em;
	background: var(--disposed-field-bg);
	border-radius: 0 0 2em 2em;
	margin: 2em -2em -2em;
	color: var(--text-on-bg-color);
	text-align: center;
	padding: 2em
}

@media screen and (max-width: 1000px) {
	.quiz-close-div {
		padding:  1em 0 2em;
	}	
}


.quiz-close-div a{
	background: var(--text-on-bg-color);
	color: var(--disposed-field-bg) !important;
	border: 1px solid transparent;
	padding: .5em 2em;
	border-radius: 2em;
	font-weight: bold;
	text-decoration: none;
}

.quiz-close-div a:hover{
	background: var(--disposed-field-bg) !important;
	color: var(--text-on-bg-color) !important;
	margin: 0 !important;
	border: 1px solid  var(--text-on-bg-color);
}


/* quiz popup */
.popup .quiz h3 {
	color: var(--text-on-bg-color);
	background: var(--quiz-base-color);
}
.popup .quiz h4 {
	color: var(--quiz-base-color);
}

.helyes {
	color: var(--bottom-bg-color);
}

.helytelen {
	color: var(--disposed-field-bg)
}
/* /quiz popup */
/* /quiz forms*/
/* /quiz */

/* faq  */

.abras {
	display: grid;
	grid-template-columns: .5fr .3fr .2fr  .2fr .5fr .5fr; 
	grid-template-rows: .6fr .2fr .1fr .3fr .20fr 1fr;
}

.abras :is(.no1, .no2, .no3) {border: 10px solid var(--text-color)}

.abras .no1 {
	grid-column: 1 / 5;
	grid-row: 1 / 4;
	align-self: end;
}

.abras .no2 {
	grid-column: 4 / 7;
	grid-row: 2 / 6;
}

.abras .no3 {
	grid-column: 2 / 6;
	grid-row: 5 / 7;
}

.abras .arrow1 {
	grid-column: 3 / 5;
	grid-row: 3 / 5;
}

.abras .arrow2 {
	grid-column: 2 / 5;
	grid-row: 4 / 6;
	align-self: end;
	justify: end
}


/* /faq  */