@charset "UTF-8";
/* CSS Document */
:root {
	--blue:      #014282;
	--blue_bright:#0059e4;
	--yellow: #ffe500;
	--red:       #D1242E;
	--orange:    #f44a02;
	--green:     #0090A5;
	--white:     #FFFFFF;
	--logo_width:130px;
	--title_shadow_color:rgba(40,65,91,0.25);
	--timeline_items:20;
	--year_other: font-size:2rem;
	--year_current: font-size:5rem;
	--badge_size:120px;
	--product_spacing:20px;
	--star_size:200px;
	--product_icon_size:35px;
	--level1_title:1.4rem;
	--level1_copy:1.4rem;
	--top_background_height: 2500px;
	--cookie_icon_size: 100px;
	--navigation_icon_size: 36px;
	--navigation_icon_h_offset: 10px;
	--navigation_icon_v_offset: 49px;
	--pepper_size:460px;
	--figure_size_1:500px;
	--figure_size_2:500px;
	--figure_size_3:500px;
	--figure_size_4:500px;
	--figure_size_5:500px;
	--figure_size_6:500px;
	--figure_size_7:500px;
	--figure_size_8:500px;
	--figure_size_8_2:180px;
	--figure_size_9:500px;
	--figure_size_9_2: 200px;
	--figure_size_10:500px;
	--figure_size_11:500px;
	--figure_size_12:500px;
	--figure_size_13:500px;
	--figure_size_14:100px;
	--figure_size_15:120px;
	--figure_size_16:500px;
	--figure_size_17:100px;
	--figure_size_18:500px;
	--figure_size_19:500px;
	--figure_size_20:500px;
	--figure_size_21:460px;
	--figure_size_22:400px;
	--figure_size_24:500px;
	--figure_size_25:360px;
	--toc: 790px;
	--top_banner: 670px;
	--facts: 500px;
	--recipes: 1480px;
	--event: 770px;
	--influencers1: 515px;
	--influencers2: 515px;
	--b2b: 540px;
	--partners: 400px;
	--restaurants: 210px;
}

	/* XXXXL   */ @media screen and (min-width:1600px)                        { }
	/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { }
	/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { }
	/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { }
	/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { }
	/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { }
	/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { }
	/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { }
	/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { }
	/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) {  }
	/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) {  }
	/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) {  }
	/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) {  }
	/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) {  }
	/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) {  }
	/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) {  }
	/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) {  }
	/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) {  }
	/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) {  }
	/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) {  }
	/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) {  }
	/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) {  }
	/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) {  }
	/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) {  }
	/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) {  }
	/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) {  }


	html,body {
		margin: 0;
		padding: 0;
		text-align: center;
		color: #333;
		font-family: Lato;
		font-weight: normal;
	}
	body {
		font-size: 10px;
		line-height: 13px;
	}
	/*     -S   */  @media screen and (min-width: 0px) and (max-width: 699px) {
		body { font-size:9px; line-height:12px; } 
		--level1_title:1.3rem;
		--level1_copy:1.3rem;
	}

	html {
		position: relative;
		background-color: #2C2B2A;
		background-image: url("../../images/background/charcoal.webp");
		background-size: 3200px 6400px;
		background-repeat: repeat-y;
		background-position: center top;
		overflow-x: hidden;
		overflow-x: hidden;
		overscroll-behavior-y: none;
		overscroll-behavior:auto;
		height: 100%;
	}

	XXXXXXhtml {
		position: relative;
		overflow: hidden;
		overflow-y: overlay;
		-webkit-user-select: none;
		-webkit-user-select: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: none;
		overflow-x:hidden;
		width: 100vw;
		height: 100%;
	}
	XXXXXhtml:after {
		display:block;
		content:"";
		position:fixed;
		top:-70px;
		width:100vw;
		height:70px;
		background-color:greenyellow;
		z-index:2;
	}
	html main .dim-left, main .dim-right {
		content:"";
		display: block;
		position: fixed;
		width: 250px;
		height: 100vh;
		z-index: 0;
		outline: 1px solid orange;
		outline: none;
		pointer-events: none;
		will-change: auto;
	}
	html main .dim-left {
		left: 0;
		background: linear-gradient(90deg,rgba(10,10,10, 1) 0%, rgba(10,10,10, 0) 100%);
	}
	html main .dim-right {
		right: 0;
		background: linear-gradient(-90deg,rgba(10,10,10, 1) 0%, rgba(10,10,10, 0) 100%);
	}
	body {
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 100dvh;
		overscroll-behavior-y: none;
		-webkit-overflow-scrolling: touch;
		scroll-behavior:smooth}
	}
	XXXXbody {
		overflow: visible;
		overflow-x: hidden;
		min-height: 100vh;
		min-height: 100svh;
		min-height: 100dvh;
		min-height: 100%;
		overflow-x: hidden;
		/* background-color: #333; */
	}
	body * {box-sizing: border-box;}
	h1,h2,h3,h4,h5,h6,p {
		margin: 0;
		padding: 0;
		font-size: 0.75em;
		line-height: 1.25;
		-webkit-font-smoothing: antialiased;
		user-select: none;
	}
	p.bigger {
		font-size: 2rem;
		line-height: 1.25;
		margin-bottom: 10px;
	}
	div, figure, h1, i {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	ul,ol,ul li, ol li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	a { 
		color: inherit;
		text-decoration: none;
	}
	figure {margin: 0; padding: 0;}
	.mirror {
		position: relative;
		left: 50%;
		transform: translate(-50%,0);
	}
	.mirror-inner {
		pointer-events: all;
	}
	em { font-style: normal; }
	figure img {
		visibility: hidden;
		width: 100%;
		height: auto;
	}
	.keep-together {
		white-space: nowrap;
	}

	@media screen and (min-width:1600px)                        { .mirror { width:1500px; }	}
	@media screen and (min-width:1440px) and (max-width:1599px) { .mirror { width:1400px; }	}
	@media screen and (min-width:1240px) and (max-width:1439px) { .mirror { width:1200px; }	}
	@media screen and (min-width:1040px) and (max-width:1239px) { .mirror { width:calc(100% - 100px);}	}
	@media screen and (min-width: 960px) and (max-width:1039px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 860px) and (max-width: 959px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 700px) and (max-width: 859px) { .mirror { width:calc(100% - 100px);}	}
 	@media screen and (min-width: 580px) and (max-width: 699px) { .mirror { width:calc(100% - 20px); }	}
 	@media screen and (min-width: 310px) and (max-width: 579px) { .mirror {width: calc(100% - 20px);padding-bottom: 0;}	}

	@media screen and (min-width:   0px) and (max-width: 859px) {}
	@media screen and (min-width: 860px) and (max-width:1039px) {}
	@media screen and (min-width:1040px)                        {}

	/*     -S   */  @media screen and (min-width: 0px) and (max-width: 699px) {
		body {
		  padding-top: env(safe-area-inset-top);
		  padding-bottom: env(safe-area-inset-bottom);
		}
	}



/*								*/
/*	KERNING 					*/
/*								*/

	h2 u,
	button u{
		display: inline-block;
		letter-spacing: -0.02em;	
		text-decoration: none;
	}

/*								*/
/*	LAYERS 						*/
/*								*/

	html,body {
	}
	
	header { z-index: 10000;
	}
	main   { z-index: 5000; 
	}
	footer {
		z-index: 0;
	}
	.popup { z-index: 15000; }
	.menu-outside-area { z-index: 10; }
	


/*								*/
/*	SETTINGS					*/
/*								*/

	header,
	footer {
		position: fixed;
		left: 0;
		right: 0;
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		backface-visibility: hidden;
		will-change: transform;
		isolation: isolate;
		/* contain: paint; */
	}
	XXXXfooter:after {
		content:"";
		display: block;
		position: absolute;
		width: 100vw;
		height: 100px;
		top: 50px;
		z-index: 999;
		background-color: var(--blue);
	}
	
	header {
		top: env(safe-area-inset-top, 0);
	}
	footer {
		bottom: env(safe-area-inset-bottom, 0);
		bottom:0;
	}

	

/*								*/
/*	COLUMNS 					*/
/*								*/

	.columns {
		display: flex;
	}
	.columns > .column {
		flex-direction: row;
	}
	.columns > .column .inset-left {
		padding-left: 25px;
	}
	
	.columns > .column:nth-child(1) {background-color:rgba(250,235,215,0.25); background-color: transparent;}
	.columns > .column:nth-child(2) {background-color:rgba(216,191,216,0.25); background-color: transparent;}
	.columns > .column:nth-child(3) {background-color:rgba(135,206,235,0.25); background-color: transparent;}
	
	.columns[data-split="1-1"] {}
	.columns[data-split="1-1"] > .column:nth-child(1) { width:50%; }
	.columns[data-split="1-1"] > .column:nth-child(2) { width:50%; }

	.columns[data-split="1-2"] {}
	.columns[data-split="1-2"] > .column:nth-child(1) { width:33.333%; }
	.columns[data-split="1-2"] > .column:nth-child(2) { width:66.666%; }

	.columns[data-split="1-3"] {}
	.columns[data-split="1-3"] > .column:nth-child(1) { width:25%; }
	.columns[data-split="1-3"] > .column:nth-child(2) { width:75%; }

	.columns[data-split="1-4"] {}
	.columns[data-split="1-4"] > .column:nth-child(1) { width:20%; }
	.columns[data-split="1-4"] > .column:nth-child(2) { width:80%; }

	.columns[data-split="1-5"] {}
	.columns[data-split="1-5"] > .column:nth-child(1) { width:16.6666666667%; }
	.columns[data-split="1-5"] > .column:nth-child(2) { width:83.3333333333%; }

	.columns[data-split="5-1"] {}
	.columns[data-split="5-1"] > .column:nth-child(1) { width:83.3333333333%; }
	.columns[data-split="5-1"] > .column:nth-child(2) { width:16.6666666667%; }
	
	.columns[data-split="4-1"] {}
	.columns[data-split="4-1"] > .column:nth-child(1) { width:80%; }
	.columns[data-split="4-1"] > .column:nth-child(2) { width:20%; }
	
	.columns[data-split="3-1"] {}
	.columns[data-split="3-1"] > .column:nth-child(1) { width:75%; }
	.columns[data-split="3-1"] > .column:nth-child(2) { width:25%; }

	.columns[data-split="2-1"] {}
	.columns[data-split="2-1"] > .column:nth-child(1) { width:66.666%; }
	.columns[data-split="2-1"] > .column:nth-child(2) { width:33.333%; }

	.columns[data-split="2-3"] {}
	.columns[data-split="2-3"] > .column:nth-child(1) { width:40%; }
	.columns[data-split="2-3"] > .column:nth-child(2) { width:60%; }

	.columns[data-split="3-2"] {}
	.columns[data-split="3-2"] > .column:nth-child(1) { width:60%; }
	.columns[data-split="3-2"] > .column:nth-child(2) { width:40%; }

	.columns[data-split="3-4"] {}
	.columns[data-split="3-4"] > .column:nth-child(1) { width:42.8571428571%; }
	.columns[data-split="3-4"] > .column:nth-child(2) { width:57.1428571429%; }

	.columns[data-split="4-5"] {}
	.columns[data-split="4-5"] > .column:nth-child(1) { width:44.4444444444%; }
	.columns[data-split="4-5"] > .column:nth-child(2) { width:55.5555555556%; }

	.columns[data-split="1-1-1"]   > .column { width:33.333%; }
	.columns[data-split="1-1-1-1"] > .column { width:25%; }

	.columns[data-split="1"] > .column,
	.columns[data-columns="1"] > .column { width:100%; }

	/* desktop */	@media screen and (min-width:960px){
	}
	/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		.columns { display: block; }
		.columns > .column { display: block; width: 100%!important;  }
	}
	/* mobile */	@media screen and (min-width:550px) and (max-width:699px){
		.columns { display: block; }
		.columns > .column { display: block; width: 100%!important;  }
	}
	/* narrow mobile */	@media screen and (max-width:549px){
		.columns { display: block; }
		.columns > .column { display: block; width: 100%!important;  }
	}
	.columns > .column > .padding-right {
		padding-right: 25px;
	}
	
	/* hidden on mobile  */	@media screen and (min-width:  0px) and (max-width: 699px) { [data-mobile="0"] { display: none; } }
	/* hidden on desktop */	@media screen and (min-width:700px) and (max-width:9999px) { [data-desktop="0"] { display: none; } }

		

/*								*/
/*	SHARED 						*/
/*								*/

		.hash-placeholder {
			display: block;
			position: relative;
			top: -70px;
			width: 100%;
			height: 0px;
			overflow: hidden;
			background-color: rebeccapurple;
			background-color: transparent;
			z-index: 999;
		}
		/* exceptions */
		.hash-placeholder#joizu-magyarorszag { top:-120px; }
		.hash-placeholder#gondoltad-volna    { top:-120px; }
		.hash-placeholder#nagykoveteink      { top:-120px; }
		
		.background {
			width: 100%;
			padding:0;
		}
		.spacer {
			width: 100%;
			height: 75px;
			position: relative;
			bottom: -75px;
			bottom: 0;
		}
		/* spacers */
		
			.spacer { float:none; clear: both; display: block; 	}
			.spacer[data-size="small"] { height: 15px; }
			.spacer[data-size="medium"] { height: 25px; }
			.spacer[data-size="big"] { height: 40px; }
		
		/* character styles */
		
			.wbp { white-space: nowrap; }
		
		/* footnotes */

			.footnotes { position:relative; left: -20px;  margin:0; padding:0 0 0 30px; font-size:12px; line-height:16px; color: #999999; text-align: left; }
			.footnotes .footnote-item { margin:0; padding:0; list-style:none; }
			.footnotes .footnote-item:before { display:block; position:relative; left:-35px; top:0; width:30px; height:20px; margin:0 0 -20px 0; text-align:right; font-size: 12px; line-height: 16px; }
			.footnotes .footnote-item:nth-child(1):before { content:"*"; }
			.footnotes .footnote-item:nth-child(2):before { content:"**"; }
			.footnotes .footnote-item:nth-child(3):before { content:"***"; }
			.footnotes .footnote-item:nth-child(4):before { content:"****"; }
			.footnotes .footnote-item:nth-child(5):before { content:"*****"; }

		/* links */

			.same-site-link    { text-decoration: underline; }
			.foreign-site-link { text-decoration: underline; font-weight: bold; color: #25408e; }

				/* skins */
				
					.css.skn-2 .same-site-link,
					.css.skn-2 .foreign-site-link { color: #f7ec40; }

		
		
/*								*/
/*	HEADER 						*/
/*								*/

	.header-placeholder {
		height: 75px;
		overflow: hidden;
		background-color: white;
		background-color: var(--blue);
		background-color: var(--yellow);
		background-color: transparent;
	}
	header {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 75px;
		color: white;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	header:before {
		content:"";
		display: block;
		position: absolute;
		width: 100%;
		height: 75px;
		background-color:transparent;
		background-color:var(--yellow);
		backdrop-filter:blur(1px);
		box-shadow: 0 2px 10px 0 rgba(0,0,0,0.5);
	}
	html[data-menu="1"] header:before {
	}
	header .mirror {
		padding-bottom: 0;
		height: inherit;
		left: calc(50% + 7.5px);
		left:50%;
	}
	/*     -S   */  @media screen and (min-width: 0px) and (max-width: 699px) {  section#toc .inset { padding:20px; }
		header .mirror {
			left: calc(50% + 0px);
		}
	}

	/* menu */
	
	#menubar {
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		overflow: visible;
		height: 75px;
		z-index: 10;
	}
	#menubar h1.logo {
		display: inline-block;
		position: relative;
		z-index: 9;
		vertical-align: middle;
		width: var(--logo_width);
		height: 75px;
		margin: 0 0 0 0;
		text-indent: -1000em;
		background-image: url(../../images/logo/metro-nagykereskedelem-logo-pos.webp);
		aspect-ratio:505/211;
	}
	#menubar h1.logo > a {
		display: inline-block;
		position: absolute;
		inset:0;
		text-decoration: none;
		background-color: rgba(186,186,78,0.56);
		background-color: transparent;
	}
	#menubar a.menu-toggle {
		display: block;
		position: fixed;
		text-decoration: none;
		color: var(--blue);
		width: 30px;
		height: 75px;
		text-align: right;
		right: 15px;
		top: 0px;
	}
	#menubar a.menu-toggle i {
		font-size: 30px;
		line-height: 75px;
		z-index: 15;
	}
	#menubar a.menu-toggle i:before { content:"\EC06"; }
	html[data-menu="1"] #menubar a.menu-toggle i:before { content:"\EBAB"; }
	#menubar .menu-container {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		width: calc(100% - var(--logo_width));
		font-size: 0;
		line-height: 0;
		text-align: right;
		user-select: none;
		padding: 0 0 0 0;
		z-index: 1;
	}
	#menubar ul.menu {
		position: relative;
		font-family: Metro;
		font-weight: 600;
		letter-spacing: 0.2pt;
		color: var(--blue);
	}
	#menubar ul.menu[data-animating="1"] {
		transition: transform .2s ease, opacity 0.5s ease;
	}
	#menubar ul.menu li {
		display: inline-block;
		vertical-align: top;
		font-size: 1.5rem;
		line-height: 1.2;
		text-transform: uppercase;
	}
	#menubar ul.menu li:before {
		content: "|";
		display: block;
		position: relative;
		font-size: 1.0em;
		line-height: 25px;
		width: 15px;
		height: 25px;
		transform: translate(-15px,0.15em);
		color: var(--blue);
		vertical-align: middle;
		margin: 0 0 -25px 0;
	}
	#menubar ul.menu li:first-child:before { display:none; }
	#menubar ul.menu li a {
		display: block;
		padding: 5px 15px;
	}
	#menubar ul.menu li.current a {
	}
	#menubar ul.menu li a * { pointer-events: none; }
	.menu-outside-area {
		display: block;
		position: fixed;
		left:0;
		top: 0;
		width: 100vw;
		height: 100vh;
		opacity: 0.5;
		background-color: var(--blue);
		backdrop-filter:blur(5px);
		-webkit-backdrop-filter:blur(5px);
	}
	html[data-menu="0"] .menu-outside-area { display: none; }

		@media screen and (min-width:1040px) {
			#menubar a.menu-toggle { display: none; }
		}
		@media screen and (max-width:1039px) {
			#menubar a.menu-toggle { display: block; }
			#menubar .menu-container {
				margin-top: 75px;
				margin-top: 0;
				overflow: hidden;
			}
			html[data-menu="0"] #menubar .menu-container { pointer-events: none; }
			html[data-menu="0"] #menubar .menu-container ul.menu {
				transform:translateY(-100%);
				opacity: 1;
				pointer-events: none;
			}
			html[data-menu="1"] #menubar .menu-container ul.menu  {
				transform:translateY(0%);
				opacity: 1;
			}
			#menubar .menu-toggle {z-index: 11;}
			#menubar .menu-container {
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				width: calc(100vw);
				overflow: hidden;
				top: 75px;
			}
			#menubar .menu-container ul.menu {
				background-color: var(--yellow);
				opacity: 0.9;
				padding: 55px 0 35px 0px;
				height: calc(100dvh - 70px);
			}
			#menubar .menu-container ul.menu li {
				display: block;
				font-size: 3.0rem;
				line-height: 1.3;
				padding-bottom: 8px;
				text-align: center;
			}
			html                #menubar h1.logo { top: 0; transition: top 0.3s ease; }
			html[data-menu="1"] #menubar h1.logo { top: 20px; }
			html[data-menu="1"] header:before { box-shadow:none; }
		}

		@media screen and (min-width:1600px)                        { }
		@media screen and (min-width:1440px) and (max-width:1599px) { }
		@media screen and (min-width:1240px) and (max-width:1439px) { }
		@media screen and (min-width:1040px) and (max-width:1239px) { }
		@media screen and (min-width: 960px) and (max-width:1039px) { }
		@media screen and (min-width: 860px) and (max-width: 959px) { }
		@media screen and (min-width: 700px) and (max-width: 859px) { }
		@media screen and (min-width: 580px) and (max-width: 699px) { }
		@media screen and (min-width: 310px) and (max-width: 579px) { }




		/*					*/
		/*		 FOOTER  	*/
		/*					*/
		
		footer {
			display: block;
			position: relative;
			position: fixed; 
			height: 50px;
			bottom: 0; 
			left: 0;
			right: 0;
			border-top:1px solid var(--yellow);
		}
		section[data-component="footer"] {
		
		}
		section[data-component="footer"] .footer {
			display: flex;
			align-items: center;
			background-color: var(--blue);
			height: 50px;
		}
		section[data-component="footer"] .contents {
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: 0;
		}
		section[data-component="footer"] .contents .mirror {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		section[data-component="footer"] .links {
		align-content: center;
		}
		section[data-component="footer"] .links[data-kind="socials"] {
			outline: 1px solid orange;
			outline: none;
			color: white;
		}
		section[data-component="footer"] .links[data-kind="socials"] > ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 5px;
		}
		section[data-component="footer"] .links[data-kind="socials"] > ul > li > a {
			height: 30px;
			aspect-ratio:1/1;
			border-radius: 30px;
			border: 1px solid white;
		}
		section[data-component="footer"] .links[data-kind="socials"] > ul > li > a > i {
			height: 30px;
			aspect-ratio:1/1;
			font-size: 1.6rem;
			line-height: 25px;
		}
		section[data-component="footer"] .links[data-kind="menus-bottom"] {
			outline: 1px solid orange;
			outline: none;
		}
		section[data-component="footer"] .links > ul {
			display: flex;
			align-items: center;
		}
		section[data-component="footer"] .links > ul > li {
			display: flex;
			align-items: center;
			font-weight: 400;
		}
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul > li:before {
			content:"|";
			display: block;
			position: relative;
			font-weight: 400;
			font-size: 2em;
			line-height: 38px;
			width: 20px;
			height: 38px;
			margin: 0 0 -39px 0;
			transform:translateY(-0.95em);
			color: var(--yellow);
		}
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul > li:first-child:before { display: none; }
		section[data-component="footer"] .links > ul > li > a {
			color: white;
		}
		section[data-component="footer"] .links > ul > li > a > i {
			width: auto;
			aspect-ratio:1/1;
			display: inline-block;
			vertical-align: middle;
		}
		section[data-component="footer"] .links[data-kind="socials"] > ul > li > a > i {
			height:  1em;
		}
		section[data-component="footer"] .links > ul > li > a > em {
			font-family: Metro;
			font-style: normal;
			font-size: 1.4rem;
			text-transform: uppercase;
		}
		
		section[data-component="footer"] .links[data-kind="socials"] ul > li[data-label="x"] > a > i:before { content:"\EB02"; }
		section[data-component="footer"] .links[data-kind="socials"] ul > li[data-label="i"] > a > i:before { content:"\EAFE"; }
		section[data-component="footer"] .links[data-kind="socials"] ul > li[data-label="f"] > a > i:before { content:"\EAFC"; }
		section[data-component="footer"] .links[data-kind="socials"] ul > li[data-label="y"] > a > i:before { content:"\EB09"; }
		
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul li[data-label="cnt"] > a > em:before { content:"Kapcsolat"; }
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul li[data-label="imp"] > a > em:before { content:"Impresszum"; }
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul li[data-label="pcy"] > a > em:before { content:"Adatvédelem"; }
		section[data-component="footer"] .links[data-kind="menus-bottom"] > ul li[data-label="gtm"] > a > em:before { content:"ÁSZF"; }
		
	  	/* XXS- */ @media screen and (min-width:520px) {
			section[data-component="footer"] .links[data-kind="menus-bottom"] { padding-right: 25px; }
		}
		
		

		/* top of page button */

			footer .top-of-page-button {
				position: fixed;
				z-index: 1000;
				right: var(--navigation_icon_h_offset);
				bottom:var(--navigation_icon_v_offset);
				font-size:     var(--navigation_icon_size);
				line-height: 0.8em;
				width:         var(--navigation_icon_size);
				height:        var(--navigation_icon_size);
				background-color: rgba(0,0,0,0.1);
				transition:opacity 0.5s ease;
			}
			footer .top-of-page-button a {
				display: block;
				width: inherit;
				height: inherit;
				font-size: inherit;
				line-height: inherit;
				background-color: var(--blue);
				background-color: black;
				box-shadow: 0 0 10px 0 rgba(255,255,255,0.5);
				color: var(--yellow);
				text-align: center;
				border: 1px solid var(--yellow);
				transition: background-color 0.3s ease, color 0.3s ease;
				/* position: relative; */
			}
			/*  Desktop  */ @media screen and (min-width: 860px) and (max-width: 99999px) {
				XXXXXfooter .top-of-page-button a:hover {
					background-color: var(--yellow);
					color: var(--blue);
				}
			}
			footer .top-of-page-button a i {
				font-size: 0.6em;
				line-height: inherit;
				display: block;
				position: absolute;
				inset: 0;
			}
			footer .top-of-page-button a i:before { content:"\EB72"; }
			
			/* states */
			html                    footer .top-of-page-button {pointer-events:none;opacity: 0;transition:opacity 1s ease;position: fixed;font-size: 3rem;line-height: 50px;}
			html[data-scrolled="1"] footer .top-of-page-button { pointer-events:all;  opacity: 1; }

			/*     S   */  @media screen and (min-width: 0px) and (max-width: 699px) {
				#top-banner .hero-background {padding-bottom: 0;}
			}	
			/*  Mobile  */ @media screen and (min-width: 0px) and (max-width: 1139px) {
			}


			/*  Desktop  */ @media screen and (min-width: 860px) and (max-width: 99999px) {
				.responsives div[data-label="mobile"]  { display:none; }
				.responsives table[data-label="desktop"] { display:table; }
			}
			/*  Mobile  */ @media screen and (min-width: 0px) and (max-width: 859px) {
				.responsives div[data-label="mobile"]  { display:block; }
				.responsives table[data-label="desktop"] { display:none; }
				.responsives { font-weight: normal!important; }
			}

		  	/* MS- */ @media screen and (min-width:700px) {
				:root { --navigation_icon_size:50px; }
				footer .top-of-page-button { bottom:0;right:0; } 
				footer .top-of-page-button a { box-shadow: none; }
			}
			/* -MS */ @media screen and (min-width: 0px) and (max-width: 699px) {  
				:root { --navigation_icon_size:50px; }
				footer .top-of-page-button { bottom:calc(var(--navigation_icon_size) - 1px);right:10px; } 
				footer .top-of-page-button a { box-shadow: none; }
			}

		  	/* XXXXL   */ @media screen and (min-width:1600px)                        {
			}
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) {  }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) {  }
			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) {  }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) {  }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) {  }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) {  }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) {  }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) {  }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) {  }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) {  }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) {  }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) {  }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) {  }
			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) {  }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) {  }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) {  }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) {  }
			/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) {  }
			/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) {  }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) {  }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) {  }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) {  }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) {  }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) {  }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) {  }
				

			}

			/*						*/
			/*	COOKIE CONSENT 		*/
			/*						*/
		
			/* section: COOKIE CONSENT ENABLER */

				a.cookie-consent-enabler {
					position: fixed;
					display: block;
					z-index: 999;
					bottom: 40px;
					color: white;
					text-decoration: none;
					border: 1px solid var(--yellow);
					background-color: rgba(0,0,0,0.5);
					outline: 1px dashed orange;
				}
				a.cookie-consent-enabler:hover { text-decoration: none; opacity: 1; }
				a.cookie-consent-enabler i { color: #FFE402; }
				a.cookie-consent-enabler i:before { content:"\E964"; }
				a.cookie-consent-enabler em { font-style: normal; margin-left: 5px; }
				a.cookie-consent-enabler em:before { content:"Cookie beállítások"; }

			/* MS- */ @media screen and (min-width:700px) {
				a.cookie-consent-enabler {
					position: fixed;
					right: 0px;
					bottom: 100px;
					transform-origin: center;
					transform: translate(33%, -100%) rotate(-90deg);
					color: white;
					font-size: 1.2rem;
					line-height: 1.4;
					opacity: 0.5;
					padding: 5px 10px;
					background-color: rgba(0, 0, 0, 0.5);
					background-color: transparent;
					z-index: 999;
				}
				a.cookie-consent-enabler:hover { text-decoration: none; opacity: 1; }
				a.cookie-consent-enabler i { color: #FFE402; }
				a.cookie-consent-enabler i:before { content:"\E964"; }
				a.cookie-consent-enabler em { font-style: normal; margin-left: 5px; }
				a.cookie-consent-enabler em:before { content:"Cookie beállítások"; }
			}
			/* -MS */ @media screen and (max-width:699px) {
				a.cookie-consent-enabler {
					bottom:var(--navigation_icon_v_offset);
					right:var(--navigation_icon_h_offset);
					color: var(--yellow);
					font-size: 2.2rem;
					opacity: 1;
					margin: 0;
					padding:0;
					width:var(--navigation_icon_size);
					height:var(--navigation_icon_size);
					line-height: var(--navigation_icon_size);
					background-color:black;
					box-shadow: 0 0 10px 0 rgba(255,255,255,0.5);
				}
				a.cookie-consent-enabler em:before { content:""; }
				a.cookie-consent-enabler i { color:inherit; }
				a.cookie-consent-enabler i:before { content:"\E964"; }
				
				/* states */
				html                    a.cookie-consent-enabler { pointer-events:all;  opacity: 1; transition:opacity 1s ease; }
				html[data-scrolled="1"] a.cookie-consent-enabler { pointer-events:none; opacity: 0; }				
			}
			
			
	
		
			/* section: COOKIE CONSENT */

			.cookie-consent .mirror { position:relative; left:50%; transform:translateX(-50%); }
			@media screen and (min-width:1640px)                        { .cookie-consent .mirror { width: 1500px; }}
			@media screen and (min-width:1440px) and (max-width:1639px) { .cookie-consent .mirror { width: 1350px; }}
			@media screen and (min-width:1240px) and (max-width:1439px) { .cookie-consent .mirror { width: 1150px; }}
			@media screen and (min-width:1040px) and (max-width:1239px) { .cookie-consent .mirror { width: 1000px; }}
			@media screen and (min-width: 960px) and (max-width:1039px) { .cookie-consent .mirror { width:  900px; }}
			@media screen and (min-width: 860px) and (max-width: 959px) { .cookie-consent .mirror { width:  800px; }}
			@media screen and (min-width: 700px) and (max-width: 859px) { .cookie-consent .mirror { width:  680px; }}
			@media screen and (min-width: 580px) and (max-width: 699px) { .cookie-consent .mirror { width: calc(100% - 60px); }}
			@media screen and (min-width: 310px) and (max-width: 579px) { .cookie-consent .mirror { width: calc(100% - 30px); }}
			@media screen and (min-width:   0px) and (max-width: 309px) { .cookie-consent .mirror { width: calc(100% - 30px); }}
			.cookie-consent em { font-style: normal; }
			.cookie-consent { text-align: left; }
			.cookie-consent .pane { text-align: left; }
			.cookie-consent {
				position: fixed;
				z-index: 2000;
				bottom: 0;
				left: 0;
				width: 100%;
				height: auto;
				padding: 15px;
				background-color: white;
				box-shadow: 0 0 15px 0 rgba(0,0,0,0.44);
				transition: all 0.5s ease;
			}
			.cookie-consent, .cookie-consent * {
						user-select: none;
				-webkit-user-select:none;
					 -o-user-select:none;
					-ms-user-select:none;
			}
			.cookie-consent .mirror {
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}
			.cookie-consent h2 {
				font-family: Metro;
				font-weight: bold;
				font-size: 2.5rem;
				line-height: 1.3;
				margin-bottom: 10px;
			}
			.cookie-consent p {
				font-family: 'Metro';
				font-size: 1.3rem;
				line-height: 1.3;
			}
			.cookie-consent .pane[data-label="dialog"] {}
			.cookie-consent .pane[data-label="confirm"] {
				margin-bottom: 15px;
			}
			.cookie-consent .pane[data-label="info"] {
				margin-bottom: 15px;
			}
			.cookie-consent .pane { display: none; }
			.cookie-consent[data-pane="buttons"] .pane[data-label="buttons"],
			.cookie-consent[data-pane="confirm"] .pane[data-label="confirm"],
			.cookie-consent[data-pane="confirm"] .pane[data-label="buttons"] {
				display: block;
			}
			.cookie-consent[data-info="0"] .pane[data-label="info"] {display: none;}
			.cookie-consent[data-info="1"] .pane[data-label="info"] {display: block;}
			.accept-some-cookies { display: block; }
			.accept-all-cookies { display: block; margin-top: 15px; }
			.switch { display: inline-block; }
			.switch .label {
				display: inline-block;
				font-family: 'Metro';
				font-size: 1.3rem;
				line-height: 1.2;
				padding: 0 10px 0 10px;
				max-width: 160px;
				vertical-align: top;
			}
			.accept-all-cookies .switch .label { font-weight: bold; }
			@media screen and (min-width: 0px) and (max-width: 699px) {
				.switch .label { max-width:9999px; } 
				.cookie-consent p {
					font-size: 1.5rem;
					line-height: 1.3;
				}
			}
			.switch .toggle { display: inline-block; vertical-align: middle; margin-bottom: 5px; }
			.switch input.real-switch { position: absolute; opacity: 0.3; }
			.switch .fake-switch {
				display: block;
				width: 60px;
				cursor: pointer;
				height: 29px;
				position: relative;
				background: #e6e8eb;
				box-shadow: rgb(0 20 50 / 20%) 0 1px 3px 0 inset;
				transition: background-color .18s ease-out;
				will-change: background-color;
				-webkit-appearance: none;
				appearance: none;
				padding: 0.25rem;
				border-width: initial;
				border-style: none;
				border-color: initial;
				border-image: initial;
				border-radius: 8rem;
			}
			.switch .fake-switch > svg {
				position: absolute;
				fill: #fff;
				width: 22px;
				height: 22px;
				transition: opacity 0.3s ease;
			}
			.switch .fake-switch > svg.on  { left: 5px; }
			.switch .fake-switch > svg.off { right:5px; }
			.switch .fake-switch > .marker {
				width:  22px;
				height: 22px;
				margin: 1px 0px;
				align-items: center;
				padding: 0 0.5rem;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-font-smoothing: antialiased;
				white-space: nowrap;
				position: absolute;
				top: 0.25em;
				right: 0;
				left: 0.25em;
				line-height: 2rem;
				text-align: center;
				box-sizing: border-box;
				pointer-events: none;
				overflow: hidden;
				background: #fff;
				box-shadow: rgb(0 20 50 / 20%) 0 1px 3px 0;
				transition: margin .25s ease;
				will-change: margin;
				border-radius: 8rem;
			}
			.switch:has(input:checked) .fake-switch              { background-color: #0064fe; }
			.switch:has(input:checked) .fake-switch > .marker    {margin-left: 32px;}
			.switch input:checked    ~ .fake-switch > svg.off    { opacity: 0; }
			.switch input:checked    ~ .fake-switch > svg.on     { opacity: 1; }
			.cookie-consent                                      div[data-label="informations"] ul.cookie-types li {}
			.cookie-consent                                      div[data-label="informations"] ul.cookie-types li[data-type="basic"] {}
			.cookie-consent:has(input[name="cc-func"]:not(:checked))  div[data-label="informations"] ul.cookie-types li[data-type="func" ] { display:none; }
			.cookie-consent:has(input[name="cc-func"]:checked)        div[data-label="informations"] ul.cookie-types li[data-type="func" ] { display:block; }
			.cookie-consent:has(input[name="cc-promo"]:not(:checked)) div[data-label="informations"] ul.cookie-types li[data-type="promo"] { display:none; }
			.cookie-consent:has(input[name="cc-promo"]:checked)       div[data-label="informations"] ul.cookie-types li[data-type="promo"] { display:block; }
			.cookie-consent [data-label="copies"] {
				margin: 0 0 15px 0;
				font-size: 1.5rem;
				line-height: 1.3;
				text-align: left;
			}
			.cookie-consent [data-label="copies"] p a { color: #0064fe; text-decoration: underline;}
			.cookie-consent [data-label="details"] {}
			.cookie-consent [data-label="buttons"] { float:right; }
			@media screen and (min-width: 0px) and (max-width: 699px) { .cookie-consent [data-label="buttons"] { float:none; } }
			.cookie-consent [data-label="buttons"] a.button {
				display: inline-block;
				position: relative;
				text-decoration: none;
				background-color: white;
				color: #0064fe;
				background-color: #0064fe;
				color: white;
				border-radius: 4px;
				margin: 0 10px 10px 0;
				padding: 8px 12px 8px 12px;
				text-align: center;
				font-family: 'Metro';
				font-size: 1.6rem;
				line-height: 1.5;
				font-weight: bold;
				box-shadow: 0 3px 10px 0px rgb(0 0 0 / 20%);
				transition: all 0.3s ease;
				text-transform: uppercase;
			}
			.cookie-consent [data-label="buttons"] a.button:hover {
				background-color: #003A94;
				color: white;
			}
			.cookie-consent a.c-toggle-button {
				display: inline-block;
				position: relative;
				padding: 0;
				width: 15px;
				height: 15px;
				margin-bottom: -15px;
				border-radius: 15px;
				top: -3px;
				text-align: center;
				font-family: Lato;
				font-weight: bold;
				background-color:#33435b55;
				color: white!important;
				text-decoration: none!important;
				font-size: 1.2rem;
			}
			.cookie-consent a.c-toggle-button:hover {
				background-color:#33435b;
			}

			/* states */
			.cookie-consent         {bottom:-100vh;}
			.cookie-consent.visible { bottom:0; }
			html                          .cookie-consent,
			html[data-cookie_consent="0"] .cookie-consent {display: none;}
			html[data-cookie_consent="1"] .cookie-consent { display: block; }
			.cookie-consent[data-pane="confirm"] a.button[data-label="information"] { display: none; }
			div[data-label="informations"] ul.cookie-types {
				display: block;
				margin: 0;
				padding: 0;
				list-style: none;
				font-family: 'Metro';
				color: #333333;
				font-size: 0;
				line-height: 0;
			}
			div[data-label="informations"] ul.cookie-types > li {
				list-style: none;
				display: block;
				border-bottom: 1px solid #CCC;
			}
			div[data-label="informations"] ul.cookie-types > li:first-child {
				font-weight: bold;
				text-transform: uppercase;
			}
			div[data-label="informations"] ul.cookie-types > li > span {
				display: inline-block;
				vertical-align: top;
				padding: 5px 0;
				font-size: 1.2rem;
				line-height: 1.2;
			}
			div[data-label="informations"] ul.cookie-types > li > span code {
				color:#0064fe;
				font-weight: bold;
				font-size: 0.9em;
			}
			div[data-label="informations"] ul.cookie-types > li > span:nth-child(1) {
				width: 200px;
			}
			div[data-label="informations"] ul.cookie-types > li > span:nth-child(2) {
				width: calc(100% - 410px);
				padding-right: 10px;

			}
			div[data-label="informations"] ul.cookie-types > li > span:nth-child(3) {
				width: 200px;
			}
			label.switch[data-type="mandatory"] {
				pointer-events: none;
			}
			label.switch[data-type="mandatory"] .toggle {
				opacity: 0.5;
			}
			@media screen and (min-width: 0px) and (max-width: 699px) {
				div[data-label="informations"] ul.cookie-types > li:first-child { display:none; }
				div[data-label="informations"] ul.cookie-types > li > span { display: block; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(1) { width: 100%; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(2) { width: auto; display: inline; padding-right: 0; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(3) { width:auto; display: inline; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(1):before { content:"Név: "; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(2):before { content:"Leírás: "; }
				div[data-label="informations"] ul.cookie-types > li > span:nth-child(3):before { content:"Élettartam: "; }
				div[data-label="informations"] ul.cookie-types > li > span { font-size: 1.5rem; line-height: 1.3; }
				.switch .label { white-space: normal; font-size: 1.5rem; line-height: 1.2; }
			}	
			.cookie-consent[data-basic="0"] {}
			.cookie-consent[data-promotion="0" ] .switch[data-name="promotion" ] { display: none; }
			.cookie-consent[data-functional="0"] .switch[data-name="functional"] { display: none; }
			
		

		/*						*/
		/*	DEV 				*/
		/*						*/
		
		
		/*							*/
		/*	DEBUG					*/
		/*							*/

			/* responsives */

			XXbody[data-location="site"]:before,
			body[data-location="development"]:before {
				content:" ";
				display: block;
				position: fixed;
				right: 0;
				top: 0;
				width: auto;
				background-color: #FFFFFFAA;
				box-shadow: 0 0 15px 0 #00000055;
				z-index: 9999999;
				font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
				font-size: 12px;
				line-height: 14px;
				color: black;
				padding: 5px 15px 5px 15px;
				border-left: 40px solid black;
			}
			
			/* XXXXL   */ @media screen and (min-width:1600px)                        { body[data-location="development"]:before { content:" XXXXL 1600px- ";     border-left-color:#F8FF20; } }
			
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { body[data-location="development"]:before { content:" XXXL  1440-1599px "; border-left-color:#00FF1B; } }
			
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { body[data-location="development"]:before { content:" XXL   1240-1439px "; border-left-color:#0085AA; } }
			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL4 1400-1439px) "; border-left-color:#2CD0FF; } }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL3 1340-1399px) "; border-left-color:#A34FFF; } }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL2 1300-1339px) "; border-left-color:#FF1594; } }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { body[data-location="development"]:before { content:" XXL   1240-1439px (XXL1 1240-1299px) "; border-left-color:#00E47C; } }
			
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { body[data-location="development"]:before { content:" XL    1040-1139px "; border-left-color:#02CEB5; } }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL4 1200-1239px) "; border-left-color:#19FDE1; } }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL3 1140-1199px) "; border-left-color:#0BB8FF; } }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL2 1100-1139px) "; border-left-color:#006CFF; } }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) { body[data-location="development"]:before { content:" XL    1040-1239px (XL1 1040-1099px) "; border-left-color:#3500FF; } }
			
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) { body[data-location="development"]:before { content:" L      960-1039px "; border-left-color:#0ED773; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) { body[data-location="development"]:before { content:" M      860- 959px ";  border-left-color:#44D70E; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) { body[data-location="development"]:before { content:" MS     700- 859px ";  border-left-color:#A0D70E; } }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) { body[data-location="development"]:before { content:" S      580- 699px ";  border-left-color:#D7CC0E; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) { body[data-location="development"]:before { content:" XS     520- 579px ";  border-left-color:#D7A60E; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) { body[data-location="development"]:before { content:" XXS    440- 519px ";  border-left-color:#BDD70E; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) { body[data-location="development"]:before { content:" XXXS   330- 439px ";  border-left-color:#B1570B; } }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) { body[data-location="development"]:before { content:" XXXS   330- 439px (XXXS2 400-439px)";  border-left-color:#E77616; } }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) { body[data-location="development"]:before { content:" XXXS   330- 439px (XXXS1 330-399px)";  border-left-color:#F2C512; } }
			
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) { body[data-location="development"]:before { content:" XXXXS    0- 329px ";  border-left-color:#B10B6D; } }



			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) { body[data-location="development"]:before { content:" M     860-959 (M2    900- 959px) ";  border-left-color:#0EC2D7; } }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) { body[data-location="development"]:before { content:" M     860-959 (M1    860- 899px) ";  border-left-color:#0ED7A5; } }
			
			/*    MS1  */ @media screen and (min-width: 760px) and (max-width: 859px) { body[data-location="development"]:before { content:" MS    700-859 (MS2   760- 859px) ";  border-left-color:#1283AF; } }
			/*    MS2  */ @media screen and (min-width: 700px) and (max-width: 759px) { body[data-location="development"]:before { content:" MS    700-859 (MS1   700- 759px) ";  border-left-color:#3FA2A9; } }
			
			/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) { body[data-location="development"]:before { content:" S     640-699 (S2    640- 699px) ";  border-left-color:#C6BD17; } }
			/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) { body[data-location="development"]:before { content:" S     580-639 (S1    580- 639px) ";  border-left-color:#BEB517; } }





			/* READY? */
			
			body[data-location="development"]:before {
				border-right: 40px solid black;
			}

			/* XXXXL   */ @media screen and (min-width:1600px)                        { body[data-location="development"]:before { border-right-color:lime; } }
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { body[data-location="development"]:before { border-right-color:red; } }
			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) { body[data-location="development"]:before { border-right-color:lime; } }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) { body[data-location="development"]:before { border-right-color:red; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) { body[data-location="development"]:before { border-right-color:red; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) { body[data-location="development"]:before { border-right-color:red; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) { body[data-location="development"]:before { border-right-color:red; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) { body[data-location="development"]:before { border-right-color:red; } }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) { body[data-location="development"]:before { border-right-color:cyan; } }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) { body[data-location="development"]:before { border-right-color:cyan; } }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) { body[data-location="development"]:before { border-right-color:red; } }
			/*    MS1  */ @media screen and (min-width: 760px) and (max-width: 859px) { body[data-location="development"]:before { border-right-color:red; } }
			/*    MS2  */ @media screen and (min-width: 700px) and (max-width: 759px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) { body[data-location="development"]:before { border-right-color:red; } }
			/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) { body[data-location="development"]:before { border-right-color:red; } }



			body[data-location="development"] .cols {
				outline: 1px dashed #12CE8D;
			}

	
	/* shared styles of subpages */
	
	main {
		/* overflow-x:hidden; */
		/* overflow-y: visible; */
		/* overflow-y: hidden; */
	}
	
	/*			*/
	/* FRAME 	*/
	/*			*/
	
	main section .frame {
		position: relative;
		z-index: 11;
		pointer-events: none;
	}
	main section .frame[data-frame*="top"] {
		position: relative;
	}
	main section .frame[data-frame*="top"]:after {
		content:"";
		display: block;
		position: absolute;
		inset:0;
		z-index: 1;
		border-top:1px solid var(--yellow);
		border-left:1px solid var(--yellow);
		border-right: 1px solid var(--yellow);
	}
	main section .frame[data-frame*="gap-before"] {
		margin-top: 35px;
	}
	main section .frame[data-frame*="side"] {	
		position: relative;
	}
	main section .frame[data-frame*="side"]:after {
		content:"";
		display: block;
		position: absolute;
		inset:0;
		left: 0;
		right: 0;
		z-index: 1000;
		border-left:1px solid var(--yellow);
		border-right: 1px solid var(--yellow);
	}
	main section .frame[data-frame="side"]:after {
		top: -150px;
		bottom: -150px;
	}
	
	main section .frame[data-frame*="bottom"] {
		position: relative;
	}
	main section .frame[data-frame*="bottom"]:after {
		content:"";
		display: block;
		position: absolute;
		inset:0;
		z-index: 1;
		border-bottom:1px solid var(--yellow);
		border-left:1px solid var(--yellow);
		border-right: 1px solid var(--yellow);
	}
	main section .frame[data-frame*="gap-after"] {
		margin-bottom: 35px;
	}
	
	/*						*/
	/* MIRROR inside FRAME 	*/
	/*						*/
	
	main section .mirror {
		padding:0;
	}
	main section .frame .mirror-inner {
		padding-inline: 35px;
		padding-bottom: 60px;
	}
	
	/*						*/
	/*	DECORS 				*/
	/*						*/
	
	main section .decors {
		display: block;
		position: relative;
		z-index: 0;
		height: 300px;
		margin-bottom: -300px;
		outline: none;
		pointer-events: none;
		/*display: none;*/
	}
	main section .decors .decor {
		display: block;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		width:  300px;
		height: 300px;
		position: absolute;
		outline: none;
	}
	
	/*						*/
	/*	FIGURES				*/
	/*						*/
	
	main section .figures {
		display: block;
		position: relative;
		width: 100%;
		border-radius: 10px;
		outline: 1px dashed orange;
		outline: none;
		pointer-events: none;
	}
	main section .figures[data-layer="back"] {z-index: -1;}
	main section .figures[data-layer="front"] {z-index: 1;}
	main section .figures[data-position="bottom"] { transform:translateY(-100%); }	
	main section .figures figure {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(250,235,215,0.57);
		background-color: transparent;
		outline: 2px dotted rgba(23,218,23,1.00);
		outline: none;
	}

	/* FIGURES */

		main section .figures figure[data-label="1" ] { /* zöldségek      */ background-image: url(../../images/decor/1.webp); }
		main section .figures figure[data-label="2" ] { /* fokhagyma      */ background-image: url(../../images/decor/2.webp); }
		main section .figures figure[data-label="3" ] { /* marhahús       */ background-image: url(../../images/decor/3.webp); }
		main section .figures figure[data-label="4" ] { /* petrezselyem   */ background-image: url(../../images/decor/4.webp); }
		main section .figures figure[data-label="5" ] { /* leves          */ background-image: url(../../images/decor/5.webp); }
		main section .figures figure[data-label="6" ] { /* só             */ background-image: url(../../images/decor/6.webp); }
		main section .figures figure[data-label="7" ] { /* paradicsom     */ background-image: url(../../images/decor/7.webp); }
		main section .figures figure[data-label="8" ] { /* hagyma         */ background-image: url(../../images/decor/8.webp); }
		main section .figures figure[data-label="9" ] { /* marha          */ background-image: url(../../images/decor/9.webp); }
		main section .figures figure[data-label="10"] { /* ---            */ background-image: url(../../images/decor/10.webp); }
		main section .figures figure[data-label="11"] { /* ---            */ background-image: url(../../images/decor/11.webp); }
		main section .figures figure[data-label="12"] { /* zászló         */ background-image: url(../../images/decor/12.webp); }
		main section .figures figure[data-label="13"] { /* csípős paprika */ background-image: url(../../images/decor/13.webp); }
		main section .figures figure[data-label="14"] { /* fokhagyma      */ background-image: url(../../images/decor/14.webp); }
		main section .figures figure[data-label="15"] { /* bors           */ background-image: url(../../images/decor/15.webp); }
		main section .figures figure[data-label="16"] { /* zöldségek      */ background-image: url(../../images/decor/16.webp); }
		main section .figures figure[data-label="17"] { /* petrezselyem   */ background-image: url(../../images/decor/17.webp); }
		main section .figures figure[data-label="18"] { /* pirospaprika   */ background-image: url(../../images/decor/18.webp); }
		main section .figures figure[data-label="19"] { /* gyömbér        */ background-image: url(../../images/decor/19.webp); }
		main section .figures figure[data-label="20"] { /* petrezselyem   */ background-image: url(../../images/decor/20.webp); }
		main section .figures figure[data-label="21"] { /* kenyér         */ background-image: url(../../images/decor/21.webp); }
		main section .figures figure[data-label="22"] { /* marha          */ background-image: url(../../images/decor/22.webp); }
		main section .figures figure[data-label="23"] { /* villa          */ background-image: url(../../images/decor/23.webp); }
		main section .figures figure[data-label="24"] { /* merőkanál      */ background-image: url(../../images/decor/24.webp); }
		main section .figures figure[data-label="25"] { /* hagyma         */ background-image: url(../../images/decor/25.webp); }
		main section .figures figure[data-label="26"] { /* kanál          */ background-image: url(../../images/decor/26.webp); }
		main section .figures figure[data-label="27"] { /* kerek kanál    */ background-image: url(../../images/decor/27.webp); }
		main section .figures figure[data-label="28"] { /* szögleges kanál*/ background-image: url(../../images/decor/28.webp); }
		main section .figures figure[data-label="29"] { /* répa           */ background-image: url(../../images/decor/29.webp); }
		main section .figures figure[data-label="30"] { /* zsálya         */ background-image: url(../../images/decor/30.webp); }
		main section .figures figure[data-label="31"] { /* erőspaprika    */ background-image: url(../../images/decor/31.webp); }
		main section .figures figure[data-label="32"] { /* evőeszköz      */ background-image: url(../../images/decor/32.webp); }
		main section .figures figure[data-label="33"] { /* hagyma         */ background-image: url(../../images/decor/33.webp); }
		main section .figures figure[data-label="34"] { /* fűszerek       */ background-image: url(../../images/decor/34.webp); }

	/* ILLUSTRATIONS */
	
		main section .illustrations .illustration[data-label="21"] { background-image: url("../../images/decor/21.webp"); width:var(--figure_size_21); height:var(--figure_size_21); }
		main section .illustrations .illustration[data-label="22"] { background-image: url("../../images/decor/22.webp"); width:var(--figure_size_22); height:var(--figure_size_22); }
		main section .illustrations .illustration[data-label="23"] { background-image: url("../../images/decor/23.webp"); width:var(--figure_size_23); height:var(--figure_size_23); }
		main section .illustrations .illustration[data-label="24"] { background-image: url("../../images/decor/24.webp"); width:var(--figure_size_24); height:var(--figure_size_24); }
		main section .illustrations .illustration[data-label="25"] { background-image: url("../../images/decor/25.webp"); width:var(--figure_size_25); height:var(--figure_size_25); }
		main section .illustrations .illustration[data-label="26"] { background-image: url("../../images/decor/26.webp"); width:var(--figure_size_26); height:var(--figure_size_26); }
		main section .illustrations .illustration[data-label="27"] { background-image: url("../../images/decor/27.webp"); width:var(--figure_size_27); height:var(--figure_size_27); }
		main section .illustrations .illustration[data-label="28"] { background-image: url("../../images/decor/28.webp"); width:var(--figure_size_28); height:var(--figure_size_28); }

	
	/*						*/
	/* Basic styles			*/
	/*						*/
	
	main h1 {
		font-family: Metro;
		font-size: 8rem;
		line-height: 1.2;
		text-align: center;
	}
	main h2 {
		font-family: Metro;
		font-weight: 900;
		font-size: 4.15rem;
		line-height: 1.2;
		letter-spacing: 1.0pt;
		text-align: center;
		text-transform: uppercase;
		color: var(--yellow);
		margin-bottom: 15px;
		font-kerning: normal;
		text-wrap:balance;
	}
	main h3 {
		font-family: Metro;
		font-weight: 600;
		font-size: 3rem;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
		color: var(--blue);
		text-wrap:balance;
		margin-bottom: 15px;
	}
	main p {
		font-family: Metro;
		color: var(--white);
		font-size: 1.4rem;
		line-height: 1.3;
		/* text-wrap:balance; */
		word-spacing: 0.05em;
	}
	main section .mirror p {
		font-weight: normal;
		font-size: 2.3rem;
		line-height: 1.35;
		color: rgba(255,255,255,0.85);
	}
	main section .mirror p.space-after {
		margin-bottom: 15px;
	}
	main section .mirror p.lead {}	
	main .buttons {
		display: block;
		position: relative;
		z-index: 1;
		text-align: center;
		margin-top:40px;
		margin-inline:auto;
	}
	main .buttons button {
		display: inline-block;
		position: relative;
		min-width: 350px;
		padding: 10px 30px 14px 30px;
		border-radius: 3px;
		font-family: Metro;
		font-weight:600;
		font-size: 2.25rem;
		line-height: 1.1;
		text-indent: 0.5pt;
		text-transform: uppercase;
		outline: none;
		border: none;
		appearance:none;
		cursor:pointer;
		transition:background 0.3s ease, box-shadow 0.3s ease;
	}
	main .buttons button:before {
		content:"";
		display: block;
		position: absolute;
		inset: -2px;
		z-index: -1;
		background-color: rgba(0,0,0,0.50);
	}
	main .buttons[data-scheme="1"] button {
		background-color: var(--yellow);
		color: var(--blue);
		box-shadow:black, 0 0 0 0 var(--yellow), 0 0 0 0 var(--yellow);
	}
	main .buttons[data-scheme="1"] button:hover {
		box-shadow: 0 0 0 3px var(--yellow), 0 0 35px 0 var(--yellow);
	}
	main .buttons[data-scheme="2"] button {
		background-color: var(--blue);
		color: white;
		box-shadow: 0 0 0 0 var(--blue), 0 0 0 0 var(--blue);
	}
	main .buttons[data-scheme="2"] button:hover {
		background-color: var(--blue_bright);
		box-shadow: 0 0 0 3px var(--blue_bright), 0 0 25px 0 var(--blue_bright), 0 0 55px 0 var(--blue_bright);
	}
	main .event-name {
		display: inline-block;
		padding-inline:0.1em;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.5pt;
		color: var(--yellow);
	}
	/* L */ @media screen and (min-width: 960px) and (max-width:1039px) {
		main .buttons button { padding-inline:30px; min-width: 100px; }
	}
	/* MS */ @media screen and (min-width: 700px) and (max-width: 859px) {
		main .buttons button { min-width: 150px; padding: 10px 30px 14px 30px; }
	}
	/* -S */  @media screen and (min-width: 0px) and (max-width: 699px) { 
		main h2 { font-size:3.3rem; }
		main h3 { font-size:2.25rem; }
		main p { font-size: 1.2rem; }
		main section .mirror p { font-size: 1.85rem; }
		section#toc .inset { padding:20px; }
		main .buttons button { min-width:0; }
		main .buttons button { display: inline-block; position: relative; min-width: 150px; padding: 6px 30px 6px 30px; font-size: 2.0rem; }
	}


	/* block heights depending on screen size */
	
		/* XXXXL   */ @media screen and (min-width:1600px)                        {  }
		/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599px) { :root {--toc: 740px;} }
		/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439px) { :root {--toc: 700px;} }
		/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439px) { :root {--toc: 640px;} }
		/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399px) { :root {--toc: 650px;} }
		/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339px) { :root {--toc: 640px;} }
		/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299px) { :root {--toc: 50vw;} }
		/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239px) { :root {--toc: 700px;} }
		/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239px) { :root {--toc: 50vw;} }
		/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199px) { :root {--toc: 50vw;} }
		/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139px) { :root {--toc: 50vw;} }
		/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099px) { :root {--toc: 50vw;} }
		/*     L   */ @media screen and (min-width: 960px) and (max-width:1039px) { :root {--toc: 50vw;} }
		/*     M   */ @media screen and (min-width: 860px) and (max-width: 959px) { :root {--toc: 700px;} }
		/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959px) { :root {--toc: 50vw;} }
		/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899px) { :root {--toc: 50vw;} }
		/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859px) { :root {--toc: 58vw;} }
		/*     S   */ @media screen and (min-width: 580px) and (max-width: 699px) { :root {--toc: 90vw;} }
		/*     S2  */ @media screen and (min-width: 640px) and (max-width: 699px) { :root {--toc: 100vw;} }
		/*     S1  */ @media screen and (min-width: 580px) and (max-width: 639px) { :root {--toc: 100vw;} }
		/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579px) { :root {--toc: 100vw;} }
		/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519px) { :root {--toc: 90vw;} }
		/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439px) { :root {--toc: 90vw;} }
		/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439px) { :root {--toc: 90vw;} }
		/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399px) { :root {--toc: 90vw;} }
		/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329px) { :root {--toc: 90vw;} }
	


	/* responsives of base font size */

		@media screen and (min-width:1840px)                        { html { font-size: 10.6px; } }
		@media screen and (min-width:1640px) and (max-width:1839px) { html { font-size: 10.6px; } }
		@media screen and (min-width:1440px) and (max-width:1639px) { html { font-size: 10.6px; } }
		@media screen and (min-width:1240px) and (max-width:1439px) { html { font-size: 10.0px; } }
		@media screen and (min-width:1040px) and (max-width:1239px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 960px) and (max-width:1039px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 860px) and (max-width: 959px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 700px) and (max-width: 859px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 580px) and (max-width: 699px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 440px) and (max-width: 579px) { html { font-size:  9.0px; } }
		@media screen and (min-width: 310px) and (max-width: 439px) { html { font-size:  9.0px; } }
		@media screen and (min-width:   0px) and (max-width: 309px) { html { font-size:  9.0px; } }