@charset "UTF-8";
/* CSS Document */

:root {
	--title_font:"cheddar-gothic-rough";
	--body_font:"degular-text";
	--menu_size:2rem;
	--menu_font_size:2rem;
	--header_size:600px;
	--weeks_size:70px;
	--gap_small:30px;
	--gap_big:60px;
	--gap_large:90px;
	--section_size:7.7rem;
	--section_size_smaller:6.7rem;
	--title_size:5rem;
	--subtitle_size:2.5rem;
	--subtitle_size_bigger:3.5rem;
	--note_size:1.5rem;
	--body_size:1.25rem;
	--body_size_bigger:1.45rem;
	--prize_name:3.2rem;
	--prize_freq:2.5rem;
	
	--brand_purple:#8b37dd;
	--brand_purple_dim:rgba(139,55,221,0.45);
	--brand_purple_lighter:#A968E9;
	--brand_lightgreen:#96ffeb;
	--brand_green:#11ff93;
	--brand_darkgreen:#00AD5E;
	--brand_green_opaque:#11ff9388;
	--brand_pink:#ff89df;
	--brand_yellow:#fdea45;
}

/* XXXXL   */ @media screen and (min-width:1600px)                          {
}
/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
}
/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
	:root {
		--menu_size:1.6rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:6.8rem;
		--section_size_smaller:5.8rem;		
		--title_size:4rem;
		--subtitle_size:1.5rem;
		--subtitle_size_bigger:2.5rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.3rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
	:root {
		--menu_size:1.3rem;
		--menu_font_size:3rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;
		--title_size:3.5rem;
		--subtitle_size: 1.75rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
	:root {
		--menu_size: 1.8rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
	:root {
		--menu_size: 1.8rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
	:root {
		--menu_size:1.3rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;		
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
	:root {
		--menu_size:1.3rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;		
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
	:root {
		--menu_size:1.3rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;		
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
	:root {
		--menu_size:1.3rem;
		--menu_font_size:2rem;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.8rem;
		--section_size_smaller:4.8rem;		
		--title_size:3.5rem;
		--subtitle_size:1.25rem;
		--subtitle_size_bigger:3rem;
		--note_size:1.1rem;
		--body_size:1.2rem;
		--body_size_bigger:1.15rem;
		--prize_name:2.5rem;
		--prize_freq:2.0rem;
	}
}
/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
	:root {
		--menu_size:2rem;
		--menu_font_size:2rem;
		--header_size:100vw;
		--weeks_size:70px;
		--gap_small:30px;
		--gap_big:60px;
		--gap_large:90px;
		--section_size:5.7rem;
		--section_size_smaller:4.7rem;
		--title_size:3rem;
		--subtitle_size:1.5rem;
		--subtitle_size_bigger:2.5rem;
		--note_size:1.25rem;
		--body_size:1.05rem;
		--body_size_bigger:1.25rem;
		--prize_name:3.2rem;
		--prize_freq:2.2rem;
	}
}
/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
}


					


/*
@font-face {
  font-family: 'icons';
  src:  url('fonts/icomoon/icomoon.eot?otww49');
  src:  url('fonts/icomoon/icomoon.eot?otww49#iefix') format('embedded-opentype'),
url('fonts/icomoon/icomoon.ttf?otww49') format('truetype'),
url('fonts/icomoon/icomoon.woff?otww49') format('woff'),
url('fonts/icomoon/icomoon.svg?otww49#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
i_OLD {
  	font-family: 'icons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/

i {
	font-family:'Material Symbols Outlined';
	font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24;
	font-weight:normal;
	font-style:normal;
	line-height:1;
	font-optical-sizing:auto;
	letter-spacing:normal;
	text-transform:none;
	display:inline-block;
	white-space:nowrap;
	word-wrap:normal;
	direction:ltr;
	-webkit-font-feature-settings:'liga';
	-webkit-font-smoothing:antialiased;
	color:currentColor;
}

html,body{
	margin:0;
	padding:0;
	overflow-x: hidden;	
}
html {
	background-color: #EEEEEE;
	background-color: white;
	font-size: 16px;
	line-height: 19px;
	user-select: none;
}
body {
	width: 100%;
	min-height: 100vh;
}

/* split mode */

.split-mode {
	position: relative;
	left: 50%;
	transform:translateX(-50%);
	outline: 1px dotted orange;
	outline: none;
}
.split-mode .design {
	position: absolute;
	left: 50%;
	transform:translateX(-50%);
	opacity: 0.25;
	pointer-events: none;
	display:none;
}
.split-mode .design img { display: none; }
@media screen and (min-width:960px)                         { .split-mode .design img[data-screen="d"] { display: block; } }
@media screen and (min-width:440px) and (max-width:959.8px) { .split-mode .design img[data-screen="t"] { display: block; } }
@media screen and (min-width:  0px) and (max-width:439.8px) { .split-mode .design img[data-screen="m"] { display: block; } }

.split-mode .design img { /*display: none;*/ }

.split-mode .html {
	position: relative;
	left: 50%;
	transform:translateX(-50%);
}
input[name="split-ratio"] {
	position: fixed;
	left: 5px;
	top: 5px;
	z-index: 99999;
	display: none;
}
code {
	position: absolute;
	left: 5px;
	transform:translateX(calc(-100% - 25px));
	opacity: 0.5;
	display: none;
}


.nyeremenyjatek{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--title_font), sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	line-height: 1.2;
	margin: 0; padding: 0;
	-webkit-font-smoothing: antialiased;
}
p {
	font-family: var(--body_font), sans-serif;
	font-weight: 400;
	font-style: normal;
	margin: 0; padding: 0;
}
p b,
p strong {
	font-family: "degular-text", sans-serif;
	font-weight: 700;
	font-style: normal;
}
section,
figure {
	margin: 0;
	padding: 0;
}
header,
main,
footer {
	position: relative;
	left: 50%;
	transform:translateX(-50%);
}
main {}
*[data-animate="1"] { transition: all 0.5s ease; }

.mirror { 
	position:relative; 
	left:50%; 
	transform:translateX(-50%); 
}
.mirror {
	padding-top: 55px;
	padding: 0;
}
.columns[data-split="1-1"] {}
.columns[data-gap="1"] {}

.columns > ul {
	display: block;
	white-space: nowrap;
	list-style: none;
	list-style: none;
	margin: 0; padding: 0;
	font-size: 0; padding: 0;
}
.columns > ul > li.column,
.columns > ul > li.gap {
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	margin: 0;
	padding: 0;
	min-height: 100px;
	outline: 1px solid orange;
	outline:none;
	overflow: hidden;
	outline:none;
}

.columns[data-split="1-1"] > ul > li.column { width: 50%; }
.columns[data-split="1-1"][data-gap="small"] > ul > li.column { width: calc(50% - var(--gap_small)); }
.columns[data-split="1-1"][data-gap="big"  ] > ul > li.column { width: calc(50% - var(--gap_big));   }
.columns[data-split="1-1"][data-gap="large"] > ul > li.column { width: calc(50% - var(--gap_large)); }

.columns[data-split="1-3"]                   > ul > li.column:nth-child(1) { width: 25%; }
.columns[data-split="1-3"]                   > ul > li.column:nth-child(2) { width: 75%; }
.columns[data-split="1-3"][data-gap="small"] > ul > li.column:nth-child(1) { width: calc(25% - var(--gap_small)/2); }
.columns[data-split="1-3"][data-gap="small"] > ul > li.column:nth-child(3) { width: calc(75% - var(--gap_small)/2); }
.columns[data-split="1-3"][data-gap="big"  ] > ul > li.column:nth-child(1) { width: calc(25% - var(--gap_big)/2); }
.columns[data-split="1-3"][data-gap="big"  ] > ul > li.column:nth-child(3) { width: calc(75% - var(--gap_big)/2); }
.columns[data-split="1-3"][data-gap="large"] > ul > li.column:nth-child(1) { width: calc(25% - var(--gap_large)/2); }
.columns[data-split="1-3"][data-gap="large"] > ul > li.column:nth-child(3) { width: calc(75% - var(--gap_large)/2); }

.columns[data-split="2-3"]                   > ul > li.column:nth-child(1) { width: 40%; }
.columns[data-split="2-3"]                   > ul > li.column:nth-child(2) { width: 60%; }
.columns[data-split="2-3"][data-gap="small"] > ul > li.column:nth-child(1) { width: calc(40% - var(--gap_small)/2); }
.columns[data-split="2-3"][data-gap="small"] > ul > li.column:nth-child(3) { width: calc(60% - var(--gap_small)/2); }
.columns[data-split="2-3"][data-gap="big"  ] > ul > li.column:nth-child(1) { width: calc(40% - var(--gap_big)/2); }
.columns[data-split="2-3"][data-gap="big"  ] > ul > li.column:nth-child(3) { width: calc(60% - var(--gap_big)/2); }
.columns[data-split="2-3"][data-gap="large"] > ul > li.column:nth-child(1) { width: calc(40% - var(--gap_large)/2); }
.columns[data-split="2-3"][data-gap="large"] > ul > li.column:nth-child(3) { width: calc(60% - var(--gap_large)/2); }

.columns[data-split="4-5"]                   > ul > li.column:nth-child(1) { width: 44.444%; }
.columns[data-split="4-5"]                   > ul > li.column:nth-child(2) { width: 55.555%; }
.columns[data-split="4-5"][data-gap="small"] > ul > li.column:nth-child(1) { width: calc(44.444% - var(--gap_small)/2); }
.columns[data-split="4-5"][data-gap="small"] > ul > li.column:nth-child(3) { width: calc(55.555% - var(--gap_small)/2); }
.columns[data-split="4-5"][data-gap="big"  ] > ul > li.column:nth-child(1) { width: calc(44.444% - var(--gap_big)/2); }
.columns[data-split="4-5"][data-gap="big"  ] > ul > li.column:nth-child(3) { width: calc(55.555% - var(--gap_big)/2); }
.columns[data-split="4-5"][data-gap="large"] > ul > li.column:nth-child(1) { width: calc(44.444% - var(--gap_large)/2); }
.columns[data-split="4-5"][data-gap="large"] > ul > li.column:nth-child(3) { width: calc(55.555% - var(--gap_large)/2); }

.columns[data-gap="small"] > ul             { width: calc(100% - var(--gap_small)); }
.columns[data-gap="small"] > ul > li.gap    { width: var(--gap_small);              }
.columns[data-gap="big"]   > ul             { width: calc(100% - var(--gap_big));   }
.columns[data-gap="big"]   > ul > li.gap    { width: var(--gap_big);                }
.columns[data-gap="large"] > ul             { width: calc(100% - var(--gap_large)); }
.columns[data-gap="large"] > ul > li.gap    { width: var(--gap_large);              }


@media screen and (min-width:1440px)                          {
	.columns[data-gap="big"] > ul { width: calc(100% + var(--gap_big) * 2.5);  }
}
@media screen and (min-width:1240px) and (max-width:1439.8px) {
	.columns[data-gap="big"] > ul { width: calc(100% + var(--gap_big) * 3);  }
}
@media screen and (min-width:1040px) and (max-width:1239.8px) {
	.columns[data-gap="big"] > ul { width: calc(100% + var(--gap_big) * 3.5);  }
}
@media screen and (min-width: 960px) and (max-width:1039.8px) { }
@media screen and (min-width: 860px) and (max-width: 959.8px) { }
@media screen and (min-width: 700px) and (max-width: 859.8px) { }
@media screen and (min-width: 580px) and (max-width: 699.8px) { }
@media screen and (min-width: 310px) and (max-width: 579.8px) { }






	/* back to top */
	
		#back-to-top {
			position: fixed;
			left: 0;right: 0px;
			bottom: 15px;
			pointer-events: none;
			z-index: 1000;
			mix-blend-mode:luminosity;
		}
		#back-to-top .mirror {
			position: relative;
			left: 50%;
			transform:translate(-50%);
			text-align: right;
		}
		#back-to-top .mirror button {
			display: inline-block;
			vertical-align: top;
			width: 32px;
			height: 36px;
			clip-path: polygon(0% 40%,50% 0%, 100% 40%, 100% 100%,0% 100%);
			transform:translateX(42px);
			transform:translateX(-15px);
			background-color: var(--brand_purple);
			background-color: var(--brand_green);
			border:none;
			outline: none;
			pointer-events: all;
			cursor: pointer;
			box-shadow: 5px 5px 0 0 rgba(0,0,0,0.1);
		}
		#back-to-top .mirror button i {
			display: block;
			font-size: 20px;
			line-height: 32px;
			text-align: center;
			color: var(--brand_purple);
			color: white;
		}
		#back-to-top .mirror button i:before {
			content:"\EAA6"; 
			content:"\EBA9"; 
			content:"arrow_upward"; 
		}
		
		/* states */
		
		                   #back-to-top .mirror button { pointer-events:none; opacity: 0; transition: opacity 1s ease; }
		html[data-stp="1"] #back-to-top .mirror button { pointer-events:all;  opacity: 1; }
		
		
		/* XXXXL   */ @media screen and (min-width:1600px)                          { #back-to-top .mirror { width:1600px; } }
		/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { #back-to-top .mirror { width:1400px; } }
		/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { #back-to-top .mirror { width:1200px; } }
		/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { #back-to-top .mirror { width:1600px; } }
		/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { #back-to-top .mirror { width: 900px; } }
		/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { #back-to-top .mirror { width: 800px; } }
		/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { #back-to-top .mirror { width: 100%; } }
		/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { #back-to-top .mirror { width: 100%; } }
		/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { #back-to-top .mirror { width: 100%; } }
		/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { #back-to-top .mirror { width: 100%; } }
		/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { #back-to-top .mirror { width: 100%; } }
		/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { #back-to-top .mirror { width: 100%; } }
	
	
	/* header */
	
		header {
			position: relative;
			margin-top: 50px;
		}
		
		header nav#main-menu {
			position: relative;
			display: flex;
			flex-flow: row;
			width: calc(100% - 150px);
			left: 50%;
			transform:translateX(-50%);
		}
		header nav#main-menu {
			.head {
				width: var(--header_size); 
			}
			.body {
				width: calc(100% - var(--header_size));
				position: relative;
				background-color: rgba(255,165,0,0.53);
				background-color: transparent;
			}
			.head {
				position: relative;
				background-image: url(../../../../uploads/images/promo.webp); 
				background-size: 100%;
				background-repeat: no-repeat;
				aspect-ratio:2114/319;
			}
			.head:before {
				content:"";
				display: block;
				position: absolute;
				z-index: -1;
				inset:0;
				background-image: url(../../../../uploads/images/promo-shadow.webp); 
				background-size: inherit;
				background-repeat: inherit;
				aspect-ratio:inherit;
				transform:translate(15px,-15px);
			}
			.head h1 {
				font-family: arial;
				color: white;
				overflow: hidden;
				text-indent: -1000em;
			}
			.head h1 a {
				color: inherit;
				text-decoration: none;
				color: inherit;
			}
			.head h1 a em {
				font-style: normal;
				text-transform: uppercase;
			}
			.body .pos {
				/* position: absolute; */
				/* bottom: 10px; */
				/* left: 0; */
				/* right: 0; */
				overflow: hidden;
			}
			.body ul {
				list-style: none;
				margin: 0; padding: 0;
				display: flex;
				flex-flow: row;
				justify-content: space-around;
				justify-content: space-evenly;
			}
			.body ul li {
				display: block;
				list-style: inherit;
				margin: inherit;
				padding: inherit;
				color: inherit;
			}
			.body ul li a {
				color: inherit;
				display: block;
				text-decoration: none;
			}
			.body ul li a i {
			
			}
			.body ul li a em {
				font-size: var(--menu_font_size);				
				line-height: 1.2;
				color:var(--brand_purple);
				margin: 0;
				padding: 0;
				font-style: normal;
				text-transform: uppercase;
			}
		}
		header nav#main-menu .toggle { display: none; }

		
		/* mobile and desktop */

			/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
			/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

		/* desktop / tablet / mobile */

			/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
			/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
			/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

		/* screen sizes */

			/* XXXXL   */ @media screen and (min-width:1600px)                          {
				header .mirror { width: 1600px; }
				header nav#toggle { display: none; }
			}
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
				header .mirror { width: 1400px; }
				header nav#toggle { display: none; }
			}
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
				header .mirror { width: 1200px; }
			}
			/*  -XXL   */ @media screen and (min-width:   0px) and (max-width:1439.8px) {
			
				header > .mirror {
					position: relative;
					z-index: 9999;
				}
				header nav#main-menu .body {
					position: absolute;
					width: 100%;
					left: 50%;
					transform: translateX(-50%);
					top: 100px;
					z-index: 9999;
				}
				header nav#toggle {
					position: fixed;
					top: -50px;
					right: -25px;
					width:  80px;
					height: 80px;
					outline: 1px solid orange;
					outline:none;
					z-index: 999999;
					pointer-events: all;
					text-align: center;
				}
				header nav#toggle label {
					display: block;
					position: relative;
					width: 100%;
					height: 100%;
					pointer-events: all;
					cursor: pointer;
				}				
				header nav#toggle i {
					display: block;
					position: relative;
					font-size:   40px;
					line-height: 40px;
					text-align: center;
					top: 50%;
					transform:translateY(-50%);
					color: var(--brand_purple);
					pointer-events: none;
				}
				header nav#toggle label input {
					opacity: 0;
					position: absolute;
					inset:0;
					pointer-events: all;
				}
				header nav#main-menu .pos {
					position: relative;
					width: 100%;
					background-color: var(--brand_purple);
					background-image: url(../../../../uploads/images/menu-background.webp);
					background-size: cover;
					background-repeat: no-repeat;
					bottom: auto;
					top: 50px;
					height: calc(100vh - 195px);
					transition: transform 0.3s ease, opacity 0.3s ease;
					will-change: transform, opacity;
				}
				html[data-mnu="0"] header nav#toggle label[data-state="off"] {display: none;pointer-events: none;}
				html[data-mnu="1"] header nav#toggle label[data-state="on" ] { display: none; }
				
				html[data-mnu="1"] { }

				html[data-mnu="0"] header nav#main-menu .pos {
					opacity: 0;
					transform:translateY(-10%);
					pointer-events: none!important;
					transition: transform 0.2s ease 0.1s, opacity 0.2s ease;
				}
				html[data-mnu="1"] header nav#main-menu .pos {
					opacity: 1;
					transform:translateY(0%);
					transition: transform 0.2s ease, opacity 0.2s ease 0.1s;
				}
				header nav#main-menu {
					display: block;
				}
				header nav#main-menu .body .offset {
					display: block;
					position: relative;
					width: 100%;
					height: auto;
					background-color: rgba(213,213,78,0.70);
					background-color: transparent;
					z-index: 99999;
				}				
				header nav#main-menu .body ul {
					display: block;
					text-align: center;
					color: white;
					position: relative;
					top: 10%;
					left: 50%;
					transform: translateX(-50%);
					z-index: 999999;
					/* pointer-events: all; */
				}
				header nav#main-menu .body ul li {
					display: block;
					list-style: inherit;
					margin: inherit;
					padding: inherit;
					color: inherit;
				}
				header nav#main-menu .body ul li h2 {
					color: inherit; 
					font-size: 3rem;
					line-height: 1.2;
				}
				header nav#main-menu .body ul li h2 a {
					color: inherit;
					font-size: inherit;
					line-height: inherit;
					padding: 20px 0;
				}
				header nav#main-menu .body ul li h2 a em { color: inherit; }
				
				header nav#main-menu .body ul li[data-label="steps"] { display: none; }
				header nav#main-menu .pos {top: 80px;height: calc(100vh - 210px);} 
			}
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { header .mirror { width: 1000px; } header nav#main-menu .pos {top:50px;height: calc(100vh - 180px);} }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { header .mirror { width:  900px; } header nav#main-menu .pos {top: 35px;height: calc(100vh - 165px);} }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { header .mirror { width:  800px; } header nav#main-menu .pos {top: 20px;height: calc(100vh - 150px);} }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
				header .mirror { width:  100%;  }
				header nav#main-menu .pos {top: -100px;height: 100vh;}
				header nav#main-menu .offset { aspect-ratio:2114/319; } 
				header nav#toggle { right: 5px; }
			}
			/*    -S   */ @media screen and (min-width: 0px) and (max-width: 699.8px) {
				header nav#toggle {
					position: fixed;
					top: -65px;
					right: -5px;
				}
			}
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { header .mirror { width:  100%;  } header nav#main-menu .pos { top: -100px; height: 100vh;} header nav#main-menu .offset { aspect-ratio:2114/319; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { header .mirror { width:  100%;  } header nav#main-menu .pos {top: -100px;height: 100vh;} header nav#main-menu .offset { aspect-ratio:2114/319; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { header .mirror { width:  100%;  } header nav#main-menu .pos {top: -100px;height: 100vh;} header nav#main-menu .offset { aspect-ratio:2114/319; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { header .mirror { width:  100%;  } header nav#main-menu .pos {top: -100px;height: 100vh;} header nav#main-menu .offset { aspect-ratio:2114/319; } }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { header .mirror { width:  100%;  } header nav#main-menu .pos {top: -100px;height: 100vh;} header nav#main-menu .offset { aspect-ratio:2114/319; } }
			
			/* menu image size */
			
			header nav#main-menu .body .products {
				overflow: hidden;
				position: absolute;
				width: 100%;
				margin: 0;
				padding: 0;
				left: 0;
				right: 0;
				background-image: url(../../../../uploads/images/menu-products.webp);
				background-repeat: no-repeat;
				background-position: top center;
				pointer-events: none;
			}
			
			/* XXXXL   */ @media screen and (min-width:1600px)                          { header nav#main-menu .body .products { background-size:80%; height:60%; bottom:-10%; } }
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { header nav#main-menu .body .products { background-size:80%; height:60%; bottom:-10%; } }
			/*   XXL-  */ @media screen and (min-width:1440px) and (max-width:999999px) { header nav#main-menu figure.products { display: none; } }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { header nav#main-menu .body .products {background-size: 60%;height:60%;bottom:-10%;} }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { header nav#main-menu .body .products {background-size: 70%;height: 50%;bottom: 0%;} }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { header nav#main-menu .body .products { background-size:80%; height:60%; bottom:-10%; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { header nav#main-menu .body .products { background-size:80%; height:60%; bottom:-10%; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { header nav#main-menu .body .products {background-size: 80%;height: 70%;bottom: -20%;} }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { header nav#main-menu .body .products {background-size: 90%;height:60%;bottom:-10%;} }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { header nav#main-menu .body .products {background-size: 90%;height: 80%;bo;bottom: -40%;} }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { header nav#main-menu .body .products {background-size: 95%;height: 80%;bottom: -40%;} }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { header nav#main-menu .body .products {background-size: 95%;height: 90%;bottom: -55%;} }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { header nav#main-menu .body .products { background-size:80%; height:60%; bottom:-10%; } }
			

		/* subscreen sizes */

			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }

	/* main */
	
		/* mobile and desktop */

			/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
			/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

		/* desktop / tablet / mobile */

			/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
			/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
			/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

		/* grouped sizes */

			/*  -XXL   */ @media screen and (min-width:   0px) and (max-width:1439.8px) {
				header nav#main-menu { width: 1200px; } 
				header nav#main-menu .head { width: 100%; margin-right: -5px; }
				header nav#main-menu .body { }
			}

		/* screen sizes */

			/* XXXXL   */ @media screen and (min-width:1600px)                          { header nav#main-menu { width: 1600px; } }
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { header nav#main-menu { width: 1400px; } }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { header nav#main-menu { width: 1200px; } }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { header nav#main-menu { width: 1000px; } }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { header nav#main-menu { width:  900px; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { header nav#main-menu { width:  800px; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { header nav#main-menu { width:  100%; } }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { header nav#main-menu { width:  100%; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { header nav#main-menu { width:  100%; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { header nav#main-menu { width:  100%; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { header nav#main-menu { width:  100%; } }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { header nav#main-menu { width:  100%; } }

		/* subscreen sizes */

			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
		
	/* footer */
	

	
	/* sections */
	
		header {
			height: 155px;
			height: auto;
			outline: 1px dotted orange;
			outline: none;
			z-index: 999;
			/* pointer-events: none; */
		}	
		#hero {
			height: 645px;
			height: auto;
			outline: 1px dotted blue;
			outline: none;
		}
		#steps {
			height: 500px;
			height: auto;
			outline: 1px dotted green;
			outline: none;
		}
		#prizes {
			height: 1610px;
			height: auto;
			outline: 1px solid purple;
			outline: none;
		}
		#form {
			height: 820px;
			height: auto;
			outline: 1px solid purple;
			outline: none;
			position: relative;
			z-index: 100;
		}
		#winners {
			height: 760px;
			height: auto;
			outline: 1px solid red;
			outline: none;
		}
		#faq {
			height: 720px;
			height: auto;
			outline: 1px solid cyan;
			outline: none;
		}
		footer {
			height: 155px;
			height: auto;
			outline: 1px dotted orange;
			outline: none;
		}
		
		
		
		/* section details */
		
			#hero {
				position: relative;
				left: 50%;
				transform:translateX(-50%);
				width: calc(100% - 150px);
				/*aspect-ratio:5/2;*/
			}
			#hero {
				.background {
					position: absolute;
					inset:0;
					overflow: hidden;
				}
				.background .mirror {
					height: 100%;
				}
				figure {
					position: absolute;
					inset:0;
					background-color: rgba(127,255,212,0.46);
					background-color: rgba(46,161,228,1.00);
					overflow: hidden;
				}
				.sprites {
					position: absolute;
					inset: 0;
				}
				.sprites .sprite {
					display: block;
					position: absolute;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: top left;
					outline: 1px dashed blue;
					outline: none;
				}
				.sprites .sprite[data-label="decors"] {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 50%;
					height: 100%;
					background-color: #ffff008c;
					background-color: transparent;
				}
				.sprites .sprite[data-label="decors"] i {
					display: block;
					position: absolute;
					width: 200px;
					height: 200px;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					transform-origin: center;
					outline: 1px dashed green;
					outline: none;
				}
				.sprites .sprite[data-label="clapper"] {
					position: absolute;
					inset: 0;
				}
				.sprites .sprite[data-label="clapper"] i {
					display: block;
					position: absolute;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: top left;
					outline: 1px dashed green;
					outline: none;
				}
				.sprites .sprite[data-label="products"  ] {
					right: 0;
					bottom: 0;
					top: 10px;
					height: 90%;					
				}
				.sprites .sprite[data-label="products"  ] i {
					display: block;
					position: absolute;
					height: 100%;
					width: 100%;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: top left;
					outline: 1px dashed red;
					outline: none;
				}
				.sprites .sprite[data-label="background"]                            { background-image: url(../../../../uploads/images/hero-background.webp); background-size: 100%; }
				.sprites .sprite[data-label="decors"    ] {}
				.sprites .sprite[data-label="decors"    ] i {}
				.sprites .sprite[data-label="decors"    ] i[data-label="glasses"   ] { background-image: url(../../../../uploads/images/elements/glasses.webp);    background-size:  70% auto; transform: translate(20%,30%); }
				.sprites .sprite[data-label="decors"    ] i[data-label="disk"      ] { background-image: url(../../../../uploads/images/elements/disk.webp);       background-size: 100% auto; transform: rotate(34deg) translate(60%,-60%); }
				.sprites .sprite[data-label="decors"    ] i[data-label="thunder"   ] { background-image: url(../../../../uploads/images/elements/thunder.webp);    background-size:  60% auto; transform: translate(90%,50%); }
				.sprites .sprite[data-label="decors"    ] i[data-label="skateboard"] { background-image: url(../../../../uploads/images/elements/skateboard.webp); background-size: 100% auto; transform: rotate(45deg) translate(140%,-10%); }
				.sprites .sprite[data-label="decors"    ] i[data-label="lamp"      ] { background-image: url(../../../../uploads/images/elements/lamp.webp);       background-size: 100% auto; transform: translate(170%,14%); }
				.sprites .sprite[data-label="decors"    ] i[data-label="diamond"   ] { background-image: url(../../../../uploads/images/elements/diamond.webp);    background-size:  70% auto; transform: translate(200%,-20%); }

				.sprites .sprite[data-label="clapper"   ] {}
				.sprites .sprite[data-label="clapper"   ] i {}
				.sprites .sprite[data-label="clapper"   ] i[data-label="top"       ] { background-image: url(../../../../uploads/images/clap-top.webp);    background-position: 0% 40%; transform:translateX(-3%); }
				.sprites .sprite[data-label="clapper"   ] i[data-label="bottom"    ] { background-image: url(../../../../uploads/images/clap-bottom.webp); background-position: 0% 40%; transform:translateX(-3%); }
				.sprites .sprite[data-label="clapper"   ] i[data-label="bottom"    ] h2 { overflow: hidden; text-indent: -1000em; }

				.sprites .sprite[data-label="filmstrip" ]                            { background-image: url(../../../../uploads/images/filmstrip.webp); background-size: 100% auto; }
				.sprites .sprite[data-label="products"  ] { right: 25%; bottom: 0;  }
				.sprites .sprite[data-label="products"  ] i { transform-origin: bottom center; background-position: bottom center; }
				.sprites .sprite[data-label="products"  ] i[data-label="large-zero"] { background-image: url(../../../../uploads/images/product/large-zero.webp); transform:translateX(  -0%) rotate(calc(-0.5 * 15deg));  }
				.sprites .sprite[data-label="products"  ] i[data-label="large"]      { background-image: url(../../../../uploads/images/product/large.webp);      transform:translateX( -20%) rotate(calc(-1.5 * 15deg));  }
				.sprites .sprite[data-label="products"  ] i[data-label="small"]      { background-image: url(../../../../uploads/images/product/small.webp);      transform:translateX( -50%) rotate(calc(-2.5 * 15deg));  }
				.sprites .sprite[data-label="products"  ] i[data-label="can"]        { background-image: url(../../../../uploads/images/product/can.webp);        transform:translateX(-120%) rotate(calc(-3.5 * 15deg));  }
				
				.sprites .sprite[data-label="background"]                            { width: 100%; height: 100%; }
				.sprites .sprite[data-label="filmstrip" ]                            { width: 14%; height: 150%; top: 50%; right:-4%; transform:translate(-42%,-47%) rotate(20deg); }
				.sprites .sprite[data-label="filmstrip" ]                            {right:-34%;animation: filmstrip 0.5s ease-in-out 0.15s 1 forwards;}
				.sprites .sprite[data-label="products"  ] i[data-label="large-zero"] { width: calc(2.0 * 100px); height: 100%; }
				.sprites .sprite[data-label="products"  ] i[data-label="large"]      { width: calc(1.7 * 100px); height: 100%; }
				.sprites .sprite[data-label="products"  ] i[data-label="small"]      { width: calc(1.2 * 100px); height: 100%; }
				.sprites .sprite[data-label="products"  ] i[data-label="can"]        {width: auto;height: 100%;aspect-ratio: 2/9;}
				
				.sprites .sprite[data-label="background"] { z-index:10; }
				.sprites .sprite[data-label="decors"    ] { z-index:15; }
				.sprites .sprite[data-label="products"  ] { z-index:20; }
				.sprites .sprite[data-label="filmstrip" ] { z-index:30; }
				figcaption { z-index:40; }
				.sprites .sprite[data-label="clapper"   ] { z-index:50; }
				
				/* animation */
				
				.sprites .sprite[data-label="clapper"   ]                            { left: -100vw; animation: clap 0.75s ease-in-out 0.35s 1 forwards; }
				.sprites .sprite[data-label="clapper"   ] i {
					display: block;
					position: absolute;
					left: 0; top: 0;
					width: 100%;
					height: 100%;
					will-change:transform;
					transform: translateX(-3%) rotate(-50deg);
				}
				.sprites .sprite[data-label="clapper"   ] i[data-label="top"       ] { width:140%; height: 140%; background-size:75%; top:-14%; transform-origin: 18% 27%; animation: clap_1 1.0s ease-in-out 1.0s 1 forwards; }
				.sprites .sprite[data-label="clapper"   ] i[data-label="bottom"    ] { width:140%; height: 140%; background-size:75%; top:-19%; transform-origin: 24% 26%; animation: clap_2 1.0s ease-in-out 1.0s 1 forwards; }

				/*
				.sprites .sprite[data-label="clapper"   ] i[data-label="top"       ] { width:140%; height: 140%; background-size:75%; top:-14%; transform-origin: 18% 27%; animation: clap_1 1.0s ease-in-out 0.5s infinite alternate; }
				.sprites .sprite[data-label="clapper"   ] i[data-label="bottom"    ] { width:140%; height: 140%; background-size:75%; top:-19%; transform-origin: 24% 26%; animation: clap_2 1.0s ease-in-out 0.5s infinite alternate; }
				*/

				.sprites .sprite[data-label="decors"    ] i { opacity:0; }
				.sprites .sprite[data-label="decors"    ] i[data-label="glasses"   ] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.5s 1 forwards; }
				.sprites .sprite[data-label="decors"    ] i[data-label="disk"      ] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.6s 1 forwards; }
				.sprites .sprite[data-label="decors"    ] i[data-label="thunder"   ] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.7s 1 forwards; }
				.sprites .sprite[data-label="decors"    ] i[data-label="skateboard"] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.8s 1 forwards; }
				.sprites .sprite[data-label="decors"    ] i[data-label="lamp"      ] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.9s 1 forwards; }
				.sprites .sprite[data-label="decors"    ] i[data-label="diamond"   ] { animation: decors 1.0s cubic-bezier(.68,-0.55,.27,1.55) 2.0s 1 forwards; }

				.sprites .sprite[data-label="products"  ] i { opacity:0; }
				.sprites .sprite[data-label="products"  ] i[data-label="large-zero"] { animation: products 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.8s 1 forwards; }
				.sprites .sprite[data-label="products"  ] i[data-label="large"     ] { animation: products 1.0s cubic-bezier(.68,-0.55,.27,1.55) 1.9s 1 forwards; }
				.sprites .sprite[data-label="products"  ] i[data-label="small"     ] { animation: products 1.0s cubic-bezier(.68,-0.55,.27,1.55) 2.0s 1 forwards; }
				.sprites .sprite[data-label="products"  ] i[data-label="can"       ] { animation: products 1.0s cubic-bezier(.68,-0.55,.27,1.55) 2.1s 1 forwards; }

				
				figcaption {
					position: absolute;
					bottom: 0;
					left: 0; right: 0;
					height: 60px;
					background-color: var(--brand_green);
				}
				figcaption p {
					position: relative;
					top:50%;
					transform:translate(-25px,-50%);
					font-family: var(--title_font);
					font-size: var(--body_size_bigger);
					font-size: var(--menu_size);
					color: var(--brand_purple);
					text-align: right;
					letter-spacing: 0.2pt;
				}
			}
			@keyframes filmstrip {0% {right:-34%; } 100% { right:-4%; }}
			@keyframes clap      {0% {left:-100vw; } 100% { left:0; }}
			@keyframes clap_1    {0% { animation-timing-function:ease-in; transform: translateX(-3%) rotate( 0deg);} 50% {	animation-timing-function:ease-out; transform: translateX(-3%) rotate( 42deg);} 100% { transform: translateX(-3%) rotate( 0deg); }}
			@keyframes clap_2    {0% {transform: translateX(-2%) rotate( 0deg);} 50% {	transform: translateX(-3%) rotate( -5deg);} 100% { transform: translateX(-2%) rotate( 0deg); }}
			@keyframes decors    {0% { left:-100px; top:100px; opacity:0; } 100% { left:0; top:0; opacity:1; }}
			@keyframes products  {0% { left:0; top:300px; opacity:0; } 100% { left:0; top:0; opacity:1; }}
			

			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {
					#hero { width: 1600px; } 
				}
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
					#hero { width: 1400px; } 
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
					#hero { width: 1200px; }
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
					#hero { width: 1000px; } 
				}
				/*    -L   */ @media screen and (min-width: 0px) and (max-width:1039.8px) {
					#hero { 
						width: 100%; 
						width: 900px;
						/*aspect-ratio:4/3; */
					}
					#hero figcaption { height: 90px; }
					#hero figcaption p { transform:translate(0,-50%); text-align: center; font-size: 3.5vw; line-height: 1.3; }
					#hero figcaption p span { display: inline; }
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
				}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
				}
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
				}
				/*   -XS   */ @media screen and (min-width: 0px) and (max-width: 579.8px) {
					#hero figcaption p { transform:translate(0,-50%); text-align: center; font-size: 4.5vw; line-height: 1.3; }
					#hero figcaption p span { display: block; }
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
				}
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
				}
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
				}
				
			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }


			/* animation sizes */
			
				/*   XXL-XXXL */ @media screen and (min-width:1240px) and (max-width:1599.8px) {
					#hero {
						.sprites .sprite[data-label="decors"] {
							left: 35%;
							transform: translateX(-50%);
							width: 25%;
							height: 100%;
						}
						.sprites .sprite[data-label="decors"] i[data-label="glasses"   ] { transform: scale(0.7) translate(40%,30%); }
						.sprites .sprite[data-label="decors"] i[data-label="disk"      ] { transform: scale(0.7) rotate(34deg) translate(60%,-60%); }
						.sprites .sprite[data-label="decors"] i[data-label="thunder"   ] { transform: scale(0.7) translate(90%,50%); }
						.sprites .sprite[data-label="decors"] i[data-label="skateboard"] { transform: scale(0.7) rotate(45deg) translate(170%,-50%); }
						.sprites .sprite[data-label="decors"] i[data-label="lamp"      ] { transform: scale(0.7) translate(170%,14%); }
						.sprites .sprite[data-label="decors"] i[data-label="diamond"   ] { transform: scale(0.7) translate(200%,-20%); }
					}
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
					#hero .sprites .sprite[data-label="products"  ] { right: 22%; } 
					#hero .sprites .sprite[data-label="filmstrip" ] { transform:translate(-22%,-47%) rotate(20deg); }
				}
				/* XXS-XL */ @media screen and (min-width:440px) and (max-width:1039.8px) {
					#hero .sprites .sprite[data-label="filmstrip" ] {
						background-size: contain;
						width: 50%;
						height: 150%;
						position: absolute;
						top: auto;
						right: 0;
						bottom: -170%;
						transform: translate(20%, -10%) rotate(70deg);
						animation: filmstrip 0.5s ease-in-out 0.15s 1 forwards;
					}
					#hero .sprites .sprite[data-label="clapper" ] { 
					}
					#hero .sprites .sprite[data-label="clapper" ] i[data-label="top" ] {
						width: 140%;
						height: 140%;
						background-size: 70%;
						top: -15%;
						left: -7%;
						transform-origin: 15% 30%;
					}
					#hero .sprites .sprite[data-label="clapper" ] i[data-label="bottom" ] {
						width: 140%;
						height: 140%;
						background-size: 70%;
						top: -19%;
						left: -7%;
						transform-origin: 24% 26%;
					}
					#hero .sprites .sprite[data-label="products" ] { 
						right: 20%;
						bottom: 0;
						top: 5%;
						height: 70%;
					}
					#hero .sprites .sprite[data-label="decors"] {
						left: 30%;
						top: 0%;
						transform: scale(0.8) translateX(-50%);
						width: 40%;
						height: 40%;
					}
					#hero .sprites .sprite[data-label="decors"] i[data-label="glasses"   ] { transform: scale(0.7) translate(40%,30%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="disk"      ] { transform: scale(0.7) rotate(34deg) translate(60%,-60%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="thunder"   ] { transform: scale(0.7) translate(90%,50%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="skateboard"] { transform: scale(0.7) rotate(45deg) translate(170%,-50%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="lamp"      ] { transform: scale(0.7) translate(170%,14%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="diamond"   ] { transform: scale(0.7) translate(200%,-20%); }
					@keyframes filmstrip { 0% {bottom: -170%;} 100% {bottom: -110%;} }	
				}
				/*  XL-XXL */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
					#hero .sprites .sprite[data-label="filmstrip" ] {
						background-size: contain;
						width: 50%;
						height: 150%;
						position: absolute;
						top: auto;
						right: 0;
						bottom: -170%;
						transform: translate(20%, -10%) rotate(70deg);
						animation: filmstrip 0.5s ease-in-out 0.15s 1 forwards;
					}
					#hero .sprites .sprite[data-label="clapper" ] { 
					}
					#hero .sprites .sprite[data-label="clapper" ] i[data-label="top" ] {
						width: 140%;
						height: 140%;
						background-size: 70%;
						top: -15%;
						left: -7%;
						transform-origin: 15% 30%;
					}
					#hero .sprites .sprite[data-label="clapper" ] i[data-label="bottom" ] {
						width: 140%;
						height: 140%;
						background-size: 70%;
						top: -19%;
						left: -7%;
						transform-origin: 24% 26%;
					}
					#hero .sprites .sprite[data-label="products" ] { 
						right: 20%;
						bottom: 0;
						top: 5%;
						height: 70%;
					}
					#hero .sprites .sprite[data-label="decors"] {
						left: 30%;
						top: 0%;
						transform: scale(0.8) translateX(-50%);
						width: 40%;
						height: 40%;
					}
					#hero .sprites .sprite[data-label="decors"] i[data-label="glasses"   ] { transform: scale(0.7) translate(40%,30%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="disk"      ] { transform: scale(0.7) rotate(34deg) translate(60%,-60%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="thunder"   ] { transform: scale(0.7) translate(90%,50%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="skateboard"] { transform: scale(0.7) rotate(45deg) translate(170%,-50%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="lamp"      ] { transform: scale(0.7) translate(170%,14%); }
					#hero .sprites .sprite[data-label="decors"] i[data-label="diamond"   ] { transform: scale(0.7) translate(200%,-20%); }
					@keyframes filmstrip { 0% {bottom: -170%;} 100% {bottom: -110%;} }	
				}
				/*    -L  */ @media screen and (min-width: 0px) and (max-width:1039.8px) {
					#hero .sprites .sprite[data-label="filmstrip" ] {
						background-size: contain;
						width: 50%;
						height: 140%;
						position: absolute;
						top: auto;
						right: 0;
						bottom: -115%;
						transform: translate(12%, -5%) rotate(75deg);
						animation: filmstrip 0.5s ease-in-out 0.15s 1 forwards;
					}
					#hero .sprites .sprite[data-label="products" ] { 
						right: 13%;
						bottom: 0;
						top: 20%;
						height: 50%;
					}
					#hero .sprites .sprite[data-label="decors"] {
						left: 25%;
						top: 8%;
						transform:scale(0.8) translateX(-50%);
						width: 20%;
						height: 90%;
					}
					@keyframes filmstrip { 0% {bottom: -115%;} 100% {bottom: -75%;} }	
				
					#hero .sprites .sprite[data-label="background"] { background-size: 150% 100%; }
					#hero .sprites .sprite[data-label="clapper" ] i[data-label="top" ] { width: 140%; height: 140%; background-size: 75%; top: -14%; transform-origin: 18% 27%; }
				}
				/*     L  */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
				}
				/*    -S   */ @media screen and (min-width: 0px) and (max-width: 699.8px) {
					#hero .sprites .sprite[data-label="decors"] {
						left: 20%;
						top: 10%;
						transform: scale(0.6) translateX(-50%);
						width: 40%;
						height: 40%;
					}
				}				
				/*    -XXS */ @media screen and (min-width:  0px) and (max-width:439.8px) {
				
				}
		


			/* CHANGES 2026-01-29 15:00:00 */
			
			#hero {
			
			}
			/* mobile, tablet and desktop */

				/*     L-    = Desktop       */ @media screen and (min-width: 960px)                          { #hero { aspect-ratio:1440/643; } }
				/* XXS-M     = Tablet        */ @media screen and (min-width: 440px) and (max-width: 959.8px) { #hero { aspect-ratio:405/197;  width: 800px; } }
				/*     S                     */ @media screen and (min-width: 580px) and (max-width: 699.8px) { #hero { width: 100%; } }
				/*    XS                     */ @media screen and (min-width: 520px) and (max-width: 579.8px) { #hero { width: 100%; } }
				/*   XXS                     */ @media screen and (min-width: 440px) and (max-width: 519.8px) { #hero { width: 100%; } }
				/*  XXXS                     */ @media screen and (min-width: 330px) and (max-width: 439.8px) { #hero { width: 100%; } }
				/* XXXXS                     */ @media screen and (min-width:   0px) and (max-width: 329.8px) { #hero { width: 100%; } }
				/*    MS                     */ @media screen and (min-width: 700px) and (max-width: 859.8px) { #hero { width: 100%; } }
				/*    -XXXS  = Small nobile  */ @media screen and (min-width:   0px) and (max-width: 439.8px) { #hero { aspect-ratio:36/26;    } }

			#hero .background {
				background-repeat: no-repeat;
				background-size: cover;
				background-position: top center;
			}
			/* mobile, tablet and desktop */

				/*     L-    = Desktop       */ @media screen and (min-width:960px)                         { #hero .background { background-image: url("../../../../uploads/images/header/desktop.jpg"); } }
				/* XXS-M     = Tablet        */ @media screen and (min-width:440px) and (max-width:959.8px) { #hero .background { background-image: url("../../../../uploads/images/header/tablet.jpg");  } }
				/*    -XXXS  = Small nobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) { #hero .background { background-image: url("../../../../uploads/images/header/mobil.jpg");   } }
			
		
		
		
		
		
		
		
		
		
			#steps {
				.mirror {
					padding-block:25px 75px;
					outline: 1px dashed orange;
					outline: none;
				}
				.columns {
					margin: 0 auto;
					text-align: center;
				}
				ul {
					display: inline-block;
					list-style: none;
					margin: 0; padding: 0;
					width: calc(100% - 100px);
					white-space: nowrap;
					font-size: 0; line-height: 0;
				}
				ul li {
					display: inline-block;
					position: relative;
					vertical-align: top;
					list-style: inherit;
					margin: 0;
					padding: 0;
					width: calc(33.333% - 0px);
					white-space: normal;
					text-align: center;
				}
				ul li a {
					position: absolute;
					inset:0;
					cursor: pointer;
					display: block;
				}
				ul li i {
					display: block;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					height: 180px;
					outline: 1px dotted orange;
					outline: none;
				}
				ul li[data-label="buy"   ] { outline:1px solid green; outline:none; }
				ul li[data-label="upload"] { outline:1px solid blue;  outline:none; }
				ul li[data-label="win"   ] { outline:1px solid red;   outline:none; }
				
				ul li[data-label="buy"   ] i { background-image:url(../../../../uploads/images/elements/purchase.webp); transform: translateX(-5%); }
				ul li[data-label="upload"] i { background-image:url(../../../../uploads/images/elements/upload.webp); }
				ul li[data-label="win"   ] i { background-image:url(../../../../uploads/images/elements/win.webp); }
				
				ul li h3 {
					font-size: var(--subtitle_size_bigger);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0 0 20px 0;
					padding: 0;
				}
				ul li         h3 { opacity: 1; transform:scale(0.7,0.7); transition:transform 0.5s cubic-bezier(.68,-0.55,.27,1.55); }
				ul li.in-view h3 { opacity: 1; transform:scale(1,1); }
				ul li:nth-child(1) h3 { transition-delay: 2.5s; }
				ul li:nth-child(2) h3 { transition-delay: 3.0s; }
				ul li:nth-child(3) h3 { transition-delay: 3.5s; }

				ul li p {
					font-size: var(--note_size);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0;
					padding: 0;
					font-weight: 600;
					text-wrap:balance;
				}
				ul li p .line {
					display: block;
				}				
			}
			
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				#steps ul li {
					display: block;
					width:100%;
				}
				#steps ul {
					display: block;
					width: calc(100% - 20px);
					margin-left: 10px;
				}
			 }
			
			
			
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {
				}
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
				}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
				}
				/*    -S   */ @media screen and (min-width: 0px) and (max-width: 699.8px) {
					#steps ul li {
						display: block;
						width: calc(100% - 0px);
					}
				}
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
				}
				/*   -XS   */ @media screen and (min-width:   0px) and (max-width: 579.8px) {
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
				}
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
				}
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
				}

			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
			
			
			
			
			
			
			
			
			
			
			
			
			#prizes {
				position: relative;
			}
			#prizes {
			
				.mirror {
				}
				.mirror .background {
					background-image: url(../../../../uploads/images/prizes.webp);
					background-size: 100%;
					background-position: top center;
					background-repeat: no-repeat;				
					padding-top: 100px;
				}
				h2 {
					font-size: var(--section_size_smaller);
					line-height: 1.2;
					color:var(--brand_purple);
					color: white;
					margin: 0;
					padding: 0;
					text-align: center;
					text-wrap:balance;
				}
				.spacer[data-label="cruise"] {
					width: 100%;
					height: auto;
					background-color: rgba(0,255,21,0.58);
					background-color: transparent;
					aspect-ratio:18/5;
				}
				.bow-waves{
					position:absolute;
					/*
					left:45%;
					top:37%;
					width:300px;
					*/
						left: 54%;
						top: 33vw;
						transform: translate(-50%,50%);
						width: 16vw;
						
					height:auto;
					transform:scale(1,0.5);
					pointer-events:none;
					mix-blend-mode:screen;
					z-index: 999;
				}

				.main-prize {
					display: block;
					position: relative;
					width: 33%;
					left: 50%;
					transform:translateX(-50%);
					outline: 1px solid orange;
					outline: none;
				}
				.main-prize {
					* {
						color: var(--brand_purple);
					}
					h5 {
						text-align: left;
						font-size: 36px;
					}
					h4 {
						text-align: center;
						font-size: 58px;
						margin-bottom: 0.15em;
					}
					p {
						text-align: center;
						font-weight: 700;
						font-size: var(--body_size_bigger);
						line-height: 1.3;
					}
					p .line {
						display: block;
					}
				}
				.spacer[data-label="prizes"] {
					width: 100%;
					height: 60px;
					background-color: rgba(0,255,21,0.1);
					background-color: transparent;
				}
				.prizes {
					position: relative;
					left: 50%;
					transform: translateX(-50%);
					width: 80%;
					padding-bottom: 100px;
				}
				.prizes {
					.columns[data-split="1-1-1"] {}
					.columns[data-split="1-1-1"] ul {
						list-style: none;
						margin: 0; padding: 0;
						font-size: 0; line-height: 0;
						white-space: nowrap;
						width: 100%;
						text-align: center;
						outline: 1px dotted orange;
						outline: none;
					}
					ul li.column {
						width: 33.3%;
						display: inline-block;
						vertical-align: top;
						font-size: 1rem;
						line-height: 1.2;
					}
					ul li.column i {
						display: block;
						position: relative;
						width: 100%;
						aspect-ratio:3/2;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
					}
					ul li.column i:before {
						content:"";
						position: absolute;
						display: block;
						background-position: center;
						background-repeat: no-repeat;
						background-size: contain;
						aspect-ratio:1/1;
					}
					ul li.column h5 {
						text-align: left;
						color:var(--brand_green);
						font-size: var(--prize_freq);
					}
					ul li.column h4 {
						text-align: left;
						color:white;
						font-size: var(--prize_name);
						margin-bottom: 0.2em;
					}
					ul li.column p {
						text-align: left;
						color: white;
						font-weight: 600;
						font-size: var(--body_size_bigger);
						line-height: 1.3;
					}
					ul li.column p .line {
						display: block;
					}
					
					ul li.column[data-label="ticket"]  i { background-size:66%; background-position:0% 0%; background-image:url(../../../../uploads/images/ticket.webp); }
					ul li.column[data-label="box"]     i { background-size:66%; background-position:0% 0%; background-image:url(../../../../uploads/images/box.webp); }
					ul li.column[data-label="balloon"] i { background-size:66%; background-position:50% 0%; background-image:url(../../../../uploads/images/balloon.webp); transform:rotate(15deg); }
					
					ul li.column[data-label="ticket"]  i:before { width:100px; right:25%; top:  0%; transform:translate(0%,0%); background-image:url(../../../../uploads/images/elements/bubble.webp); }
					ul li.column[data-label="box"]     i:before { width:150px; right:0%; top: 45%; transform:translate(0%,0%); background-image:url(../../../../uploads/images/elements/heart.webp); }
					ul li.column[data-label="balloon"] i:before { width:100px; right:5%; top: 10%; transform:translate(0%,0%) rotate(-25deg); background-image:url(../../../../uploads/images/elements/star.webp); }
				}
				
				p.footnote {
					font-size: var(--body_size_bigger);
					line-height: 1.3;
					color: white;
					text-align: center;
					margin-top:-50px;
					padding-bottom: 50px;
				}
			}
			
			/* ranges */
			
			
			
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {
					#prizes  .bow-waves { left: 43%; top: 37%; width: 300px; }
				}
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
					#prizes  .bow-waves { left: 43%; top: 32%; width: 280px; }
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
					#prizes  .bow-waves { left: 43%; top: 35%; width: 260px; }
					#prizes .mirror .background { padding-top: 75px; background-size: 110%; }
					#prizes .spacer[data-label="cruise"] { aspect-ratio:18/6; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 { text-align: center;}
					#prizes .prizes { width: 90%; }
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
					#prizes .bow-waves { left: 37%; top: 22.0%; width: 240px; }
					#prizes .mirror .background { background-size: 120%; background-position: top center; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 { transform:translateY(100%); }
					#prizes .prizes { width: 90%; }
				}
				/*    -L   */ @media screen and (min-width:   0px) and (max-width:1039.8px) {
					#prizes .bow-waves { left: 42%; top: 21.5%; width: 220px; }
					#prizes .prizes ul li.column p .line { display: inline; }
					#prizes .mirror .background {background-size: 120%;background-position: top center;padding-top: 60px;}
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 {transform: translateY(calc(100% + 10%));}
					#prizes .prizes { width: 90%; }
					#prizes .prizes ul li.column { width: calc(33.3% - 15px); margin-right: 15px; }
					#prizes .prizes ul li.column[data-label="ticket" ] i:before { width: 70px; /*right: 25%; top: 0%; transform: translate(0%, 0%);*/ }
					#prizes .prizes ul li.column[data-label="box"    ] i:before { width: 90px; right: 0%; top: 20%;  transform: translate(0%, 0%); }
					#prizes .prizes ul li.column[data-label="balloon"] i:before { width: 70px; /*right: 25%; top: 0%; transform: translate(0%, 0%);*/ }
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
					:root { --prize_freq:1.5rem; --prize_name:2.5rem; }
					#prizes .prizes ul li.column p { width:95%; }
					#prizes .spacer[data-label="cruise"] { aspect-ratio:18/6; }
				}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
					:root { --prize_freq:1.5rem; --prize_name:2.4rem; }
					#prizes  ul li { display: block; width: 100%; }
					#prizes .bow-waves { left: 39%; top: 19%; width: 200px; }
					#prizes .mirror .background { background-size: 120%; background-position: top center; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 {transform: translateY(calc(100% + 10%));}
					#prizes .prizes { width: 90%; }
					#prizes .prizes ul li.column p { width:95%; }
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
					#prizes  ul li { display: block; width: 100%; }
					#prizes .bow-waves { left: 39%; top: 33vw; width: 200px; }
					#prizes .mirror .background {background-size: 120%;background-position: top center;padding-top: 60px;}
					#prizes .spacer[data-label="cruise"] { aspect-ratio: 18 / 6; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 { transform:translateY(0%); text-align: center; }
					#prizes .prizes { width: 90%; }
					#prizes .prizes ul li.column p { width:95%; }
				}
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
					#prizes ul li { display: block; width: 100%; }
					#prizes .bow-waves { display:none; left: 39%; top: 33vw; width: 200px; }
					#prizes .mirror .background { background-size: 130%; background-position: top center; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 { transform:translateY(0%); text-align: center; }
					#prizes .prizes { width: 90%; }
					#prizes .prizes ul li.column p { width:95%; }
					#prizes .spacer[data-label="cruise"] { aspect-ratio: 18 / 7; }
					#prizes .spacer[data-label="prizes"] { height: 30px; }
				}
				/*   -XS   */ @media screen and (min-width:   0px) and (max-width: 579.8px) {
					#prizes ul li { display: block; width: 100%; }
					#prizes .bow-waves { display:none; left: 39%; top: 33vw; width: 200px; }
					#prizes .mirror .background { background-size: 200%; background-position: top center; padding-top:60px; }
					#prizes .spacer[data-label="cruise"] { aspect-ratio: 18 / 10.5; }
					#prizes .spacer[data-label="prizes"] { height: 30px; }					
					#prizes .main-prize h5 { font-size: 2.0rem; }
					#prizes .main-prize h4 { font-size: 2.5rem; }
					#prizes .main-prize { width: 90%; }
					#prizes .main-prize h5 { transform:translateY(0%); text-align: center; }
					#prizes .prizes { width: 90%; }
					#prizes .prizes ul li.column { width: 100%; display: block; margin-bottom: 25px; }
					#prizes .prizes ul li.column i { aspect-ratio:2/1; }
					#prizes .prizes ul li.column[data-label="ticket"]  i { background-size:contain; background-position: center; }
					#prizes .prizes ul li.column[data-label="box"]     i { background-size:contain; background-position: center; }
					#prizes .prizes ul li.column[data-label="balloon"] i { background-size:contain; background-position: center; }
					#prizes .prizes ul li.column h5 { text-align: center; }
					#prizes .prizes ul li.column h4 { text-align: center; }
					#prizes .prizes ul li.column p { text-align: center; }
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
				}
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
				}
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
				}

			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }










			
			#form {
				background-color: white;
			}
			#form {
				.mirror {
					padding:75px 50px 0 50px;
					outline: 1px dashed orange;
					outline: none;
				}
				h2 {
					font-size: var(--section_size_smaller);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0 0 50px 0;
					padding: 0;
					text-align: center;
					text-wrap:balance;
				}
				h2 .line { display: block; }
				
				.XXXinset {
					padding: 50px 25px;
					background-color: rgba(192,184,184,0.37);
					background-color: transparent;
				}
				.columns {
					display: block;
					position: relative;
					/*
					margin-top: 75px;
					padding-bottom: 75px;
					*/
					left: 50%;
					transform: translateX(-50%);
					/* width: 1000px; */
					outline: 1px dotted orange;
					outline: none;
				}
				.columns ul {
					list-style: none;
					margin: 0; padding: 0;
					font-size: 0; line-height: 0;
					display: block;
					width: calc(100% + 50px);
					/*
					display: grid;
					grid-template-columns:1fr 1fr;
					grid-gap: 75px;
					align-items:stretch;
					*/
				}
				.columns ul li {
					display: inline-block;
					vertical-align: top;
					position: relative;
					/* height: 100%; */
					list-style: inherit;
					margin: inherit;
					padding: inherit;
					width: 100%;
					width: calc(50% - 50px);
					margin-right: 50px;
					outline: 1px solid orange;
					outline: none;
				}
				.form-elements {
					display: block;
					font-size: var(--body_size);
					line-height: 1.2;
					outline: 1px dashed orange;
					outline: none;
				}
				
				.form-elements .form-element {
					display: block;
					font-size: inherit;
					line-height: inherit;
				}
				.form-elements .form-element[data-type="picker"] {}
				.form-elements .form-element[data-type="text1row"] {}
				.form-elements .form-element[data-type="radio"] {}
				.form-elemenfile:///Users/Shared/DrawJob%20Dropbox/Team/DEV/traubisoda/nyeremenyjatek2/index.phpts .form-element[data-type="checkbox"] {}
				.form-elements .form-element[data-type="upload"] {}
				.form-elements .form-element[data-type="button"] {}
				.form-elements .form-element[data-type="note"] { text-align: center; }
				
				/* warning */
				
				.form-elements .form-element .fw {
					position: absolute;
					background-color: var(--brand_green);
					padding: 10px 25px;
					border-radius: 5px;
					z-index: 999;
					margin: -45px 0 0 -10px;
					font-family: var(--body_font);
					opacity: 0.95;
					box-shadow: 0 0 25px 0 rgba(255,255,255,0.5);
					display: none;
				}
				.form-elements .form-element .fw em { font-style: normal; }
				.form-elements .form-element .fw:after {
					content:"";
					display: block;
					position: absolute;
					top: 100%;
					left: 30px;
					border: solid transparent;
					content: "";
					height: 0;
					width: 0;
					pointer-events: none;
					border-color: rgba(0,0,0,0);
					border-top-color: var(--brand_green);
					border-width: 10px;
					margin-left: -10px;
				}
				.form-elements .form-element[data-mandatory="1"][data-invalid="1"] .fw {
					display: block;
				}
				
				/* element */
				
				.form-elements .form-element .fe {
					position: relative;
					width: 100%;
					height: 50px;
					font-size: 15px;
					line-height: 50px;
					margin: 35px 0 0 0;
				}
				
				/* suffix */
				
				.form-elements .form-element .fs {
					display: block;
					position: absolute;
					z-index: 99999;
					inset: -38px 15px 0 auto;
					font-family: var(--body_font);
					font-size: 1.1rem;
					line-height: inherit;
					color: var(--brand_purple);
					pointer-events: none;
				}
				.form-elements .form-element .fs #code-format-hints {
					display: inline-block;
					vertical-align: top;
				}
				.form-elements .form-element .fs #code-format-hints:before { content:""; }
				                         .form-element[data-label="code"] .fs #code-format-hints:before { content:"Gépeld be a blokkon vagy számlán található sorszámot!"; }
				&[data-receipt_type="1"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"Gépeld be a blokkon található sorszámot!"; }					
				&[data-receipt_type="2"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"Gépeld be a Kifli.hu számlán található 10 jegyű megrendelés számot!"; }					
				&[data-receipt_type="3"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"Gépeld be a METRO számlán található teljes számlaszámot!"; }					

				.form-element[data-label="code"] .fs #receipt-examples {
					display: inline-block;
					vertical-align: top;
				}
				.form-element[data-label="code"] .fs #receipt-examples a.receipt-example {
					display: inline-block;
					position: relative;
					vertical-align: middle;
					margin-left: 5px;
					margin: -10px -10px -10px -5px;
					padding: 10px 10px 10px 5px;
					text-decoration: none;
					pointer-events: all;
					opacity: 1;
					transition:opacity 0.5s ease;
				}
				.form-element[data-label="code"] .fs #receipt-examples a.receipt-example i {
					display: block;
					position: relative;
					height: inherit;
					background-color: var(--brand_purple);
					color: white;
					border-radius: 15px;
					width:  15px;
					height: 15px;
					top: -1px;
					font-size: 11px;
					line-height: 15px;
					text-align: center;
				}
				.form-element[data-label="code"] .fs #receipt-examples a.receipt-example i:before {
					content:"question_mark"; 
				}
				.form-element[data-label="code"] .fs #receipt-examples a.receipt-example figure {
					display: block;
					position: fixed;
					width: 500px;
					max-width: 90vw;
					max-height: 90vh;
					height: auto;
					left: 50%;
					top: 50%;
					transform:translate(-50%,-50%);
					background-repeat: no-repeat;
					background-position: top center;
					background-size: contain;
					z-index: 9999;
					background-color: white;
					box-shadow:0 3px 15px 0 rgba(37,37,37,0.33), 0 0 0 500vw var(--brand_purple_dim);
					outline: 1px dashed orange;
					outline: none;
					pointer-events: none;
					transition: opacity 0.01s ease;
				}			
				&[data-receipt_type="1"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="1"] figure { }					
				&[data-receipt_type="2"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="2"] figure { background-image:url(../../../../uploads/images/receipts/2.webp); aspect-ratio:1190/1409; }
				&[data-receipt_type="3"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="3"] figure { background-image:url(../../../../uploads/images/receipts/3.webp); aspect-ratio:1190/1684; }

				                         .form-element[data-label="code"] .fs #receipt-examples a.receipt-example { display: none; }
				&[data-receipt_type="1"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="1"] { }					
				&[data-receipt_type="2"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="2"] { display:inline-block; }
				&[data-receipt_type="3"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="3"] { display:inline-block; }

				                         .form-element[data-label="code"] .fs #receipt-examples a.receipt-example                    figure { opacity:0; }
				&[data-receipt_type="1"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="1"]:hover figure { opacity:1; transition: opacity 0.3s ease; }					
				&[data-receipt_type="2"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="2"]:hover figure { opacity:1; transition: opacity 0.3s ease; }
				&[data-receipt_type="3"] .form-element[data-label="code"] .fs #receipt-examples a.receipt-example[data-id="3"]:hover figure { opacity:1; transition: opacity 0.3s ease; }
				
				
				/* legend */
				
				.form-elements .form-element .fl {
					position: absolute;
					opacity: 0.5;
					pointer-events: none;
					font-family: var(--body_font);
					font-weight: 400;
					font-size: 20px;
					line-height: inherit;
					inset:0 0 0 25px;
					transition: inset 0.2s ease, font-size 0.2s ease, opacity 0.2s ease;
				}
				.form-elements .form-element .fv {
					position: relative;
					border-radius: 25px;
					box-shadow: 0 0 0 1px rgba(87,87,87,0.23);
					box-shadow: none;
					background-color: #E4EEEE;
				}
				.form-elements .form-element label {
					cursor: pointer;
				}
				.form-elements .form-element .fv > input {
					box-sizing: border-box;
					padding: 0;
					margin: 0;
					background-color: transparent;
					width: 100%;
					height: 50px;
					font-family:var(--body_font);
					font-weight: 600;
					font-size: 20px;
					line-height: 50px;
					padding: 0 20px;
					outline: none;
					border:none;
				}
				.form-elements .form-element .fv > input:-webkit-autofill,
				.form-elements .form-element .fv > input:-webkit-autofill:hover,
				.form-elements .form-element .fv > input:-webkit-autofill:focus,
				.form-elements .form-element .fv > input:-webkit-autofill:active,
				.form-elements .form-element .fv > input:-webkit-autofill::first-line {
					-webkit-box-shadow: 0 0 0 1000px #E4EEEE inset !important;
					box-shadow: 0 0 0 1000px #E4EEEE inset !important;
					/* -webkit-text-fill-color: inherit !important; */
					color: inherit !important;
					background-color: #E4EEEE !important;
					background: transparent!important;
					transition: background-color 5000s ease-in-out 0s !important;
					-webkit-transition: background-color 5000s ease-in-out 0s !important;
					border-radius: inherit;
				}
				
				.columns li:nth-child(2) .form-elements .form-element .fe {
					/* margin: 0; */
				}
				/*
				.columns li:nth-child(2) .form-elements:nth-child(1) {}
				.columns li:nth-child(2) .form-elements:nth-child(2) { height: 120px; }
				.columns li:nth-child(2) .form-elements:nth-child(3) { height: 123px; }
				*/
				
				
				/*
				.form-elements .form-element                  .fl { opacity: 1; }
				.form-elements .form-element[data-empty="0"]  .fl { font-size: 1.2rem; inset:-35px 0 0 20px; }
				.form-elements .form-element[data-empty="1"]  .fl { opacity: 0.5; }
				*/
				.form-elements .form-element .fl { font-size: 1.1rem; inset:-38px 0 0 20px; }
				
				.form-element[data-type="upload"] {}
				.form-element[data-type="upload"] {
					.fv {
						position:relative;
						height: 100%;
						box-shadow: none;
						background-color: var(--brand_purple);
						overflow:hidden;
					}
					.fv:before {
						display:block;
						box-sizing: border-box;
						content:"";
						position: absolute;
						left: 0;
						top: 0;
						width:0%;
						height:100%;
						border-radius: 0;
						background-color: var(--brand_purple_lighter);
					}
					label {
						position: absolute;
						inset:0;
						color: white;
						white-space: nowrap;
						text-align: center;
						border-radius: inherit;
						background-color: transparent;
					}
					label input {
						opacity: 0;
						position: absolute;
					}
					label i {
						display: block;
						position: relative;
						width: 30px;
						height: 50px;
						margin: 0 0 -50px 0;
						font-size: 30px;
						line-height: 50px;
						left: 15px;
					}
					&[data-status="uploaded"  ][data-file_type="pdf"] label i,
					&[data-status="uploaded"  ][data-file_type="img"] label i {
						font-size: 30px;
					}
					label i:before {
						content:"\EC64"; 
						content:"upload"; 
					}
					&[data-status="processing"]                           label i:before { content:"progress_activity"; }
					/*
					&[data-status="uploaded"  ][data-file_type="pdf"    ] label i:before { content:"picture_as_pdf"; content:"check_circle"; }
					&[data-status="uploaded"  ][data-file_type="img"    ] label i:before { content:"photo_library";  content:"check_circle"; }
					*/
					label em {
						display: block;
						position: relative;
						margin: 0;
						font-family: var(--body_font);
						font-size: var(--body_size);
						line-height: 1.2;
						font-style: normal;
						font-weight: 600;
						color: white;
						width: 100%;
						overflow: hidden;
						white-space: normal;
						top: 50%;
						transform:translateY(-50%);
					}
					label em                      { font-size: calc(var(--body_size) * 0.8); transform:translateY(-100%); }
					label:has(.filename:empty) em { font-size: calc(var(--body_size) * 1.0); transform:translateY( -50%); }
					
					label span.filename {
						display: block;
						position: relative;
						margin: 0;
						font-family: var(--body_font);
						font-size: calc(var(--body_size) * 0.8);
						line-height: 1.2;
						font-style: normal;
						font-weight: 400;
						color: white;
						width: 100%;
						/* overflow: hidden; */
						white-space: normal;
						top: 0;
						transform: translateY(33%);
					}
					/*
					&[data-status="pdf"] label em,
					&[data-status="img"] label em {
						color: var(--brand_purple);
						font-size: calc(var(--body_size) * 0.8);
						line-height: 1.2;
						font-weight: 400;
					}
					*/
					label em:before {
						/* később megadva */
						/*content:"Blokk vagy számla feltöltése";*/
					}
					&[data-status="processing"]                           label em:before { content:"Feldolgozás..."; }
					/*
					&[data-status="uploaded"  ][data-file_type="pdf"    ] label em:before { content:""; }
					&[data-status="uploaded"  ][data-file_type="img"    ] label em:before { content:""; }
					*/
				}
				.columns > ul > li:nth-child(2) .inset .form-elements .form-element {
					/* margin-bottom: 0; */
				}
				
				
				
				
				
				
				/* PICKER */
				
				.form-element[data-type="picker"] {
				
				}
				.form-element[data-type="picker"] {
					
					.picker  {
						height: 53.5px;
					}
					.date-time-picker {
						select {
							appearance:none;
							border: none;
							outline: none;
							height: 100%;
							background-color: transparent;
							font-family: var(--body_font);
							font-size: calc(var(--body_size) * 1);
							text-align: center;
							padding: 0 0 0 0;
							box-sizing: border-box;
							border-right: 2px solid white;
							font-size: 20px;
							line-height: 50px;
							font-weight: 600;
						}
						select[name="date_full"]   { width:  calc(52% - 2px); }
						select[name="time_hour"]   { width:  calc(23% - 2px); }
						select[name="time_minute"] { width:  calc(25% - 0px); border-right: none;  }
					}
					.date-time-picker { display: block; }
				}
				
				/* conditional */
				
				&[data-receipt_type="2"] {
					.form-element[data-type="picker"] .date-time-picker {
						select[name="date_full"]   { width:  calc(100% - 2px); border-right: none; }
						select[name="time_hour"]   { display:none; }
						select[name="time_minute"] { display:none; }
					}
				}
				
				
				
				/* CODE */
				
				.form-element[data-label="code"] {
				
				}
				.form-element[data-label="code"] {
					input {
						/* letter-spacing: 2pt; */
						/* font-size: 30px; */
						/* font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; */
						/* text-align: center;*/
					}
				}
				.form-element[data-label="code"] .fv #input-counter {
					display: block;
					position: relative;
					width:       32px;
					height:      32px;
					float: right;
					right:45px;
					top: -20px;
					text-align: right;
					font-family: var(--body_font);
					font-size: calc(var(--body_size) * 0.7);
					line-height: 1.1;
					z-index: 1;
					color: var(--brand_purple);
					transition: opacity 0.5s ease;
				}
				.form-element[data-label="code"] #input-counter[data-empty="1"] { opacity: 1; }
				.form-element[data-label="code"] #input-counter[data-empty="0"] { opacity: 0; }

				.form-element[data-label="code"] #code-format-hints { transition: opacity 0.5s ease; }
				.form-element[data-label="code"]:has(#input-counter[data-empty="1"]) #code-format-hints { opacity: 0; }
				.form-element[data-label="code"]:has(#input-counter[data-empty="0"]) #code-format-hints { opacity: 1; }

				.form-element[data-label="code"] #input-counter span.too-long { color:red; }
				.form-element[data-label="code"] #input-counter span.is-ok    { color:var(--brand_darkgreen); }

				
				
				/* RADIOS */
				
				.form-element[data-type="radios"] {}
				.form-element[data-type="radios"] {
					.fe {
						margin: 0;
						height: auto;
					}
					.fv {
						background-color: transparent;
						display: inline-block;
						vertical-align: top;
						margin-right: 1.5em;
					}
					label {
						color: var(--brand_purple);
						white-space: nowrap;
					}
					label input {
						opacity: 0;
						position: absolute;
					}
					label i {
						display: block;
						position: relative;
						width:       25px;
						height:      25px;
						margin: 0 0 -25px 0;
						line-height: 25px;
						top: 13px;
						box-shadow: 0 0 0 1px rgba(87,87,87,0.23);
						background-color:#E4EEEE;
						text-align: center;
						border-radius: 50%;
					}
					label i:before { 
						content:"\EBA0"; 
						content:"check"; 
					}
					label em {
						display: block;
						position: relative;
						margin: 0 0 0 35px;
						font-family: var(--body_font);
						font-size: var(--body_size);
						line-height: 50px;
						font-style: normal; 
						font-weight: 600;
						color: #928B95;
					}
					.fv[data-label="1"] label em:before { content:"blokk"; }
					.fv[data-label="2"] label em:before { content:"kifli.hu számla"; }
					.fv[data-label="3"] label em:before { content:"METRO számla"; }
					
					
					/* states */
					
					label input ~ i { 
						font-size: 0;
						transition: font-size 0.3s ease;
					}
					label input:checked ~ i {
						background-color: var(--brand_purple);
						color: white;
						font-size:20px;
					}
				}
				                         .form-element[data-type="upload"] label em:before { content:"Blokk vagy számla feltöltése"; }					
				&[data-receipt_type="1"] .form-element[data-type="upload"] label em:before { content:"Blokk feltöltése"; }					
				&[data-receipt_type="2"] .form-element[data-type="upload"] label em:before { content:"Kifli.hu számla feltöltése"; }					

				
				
				
				
				
				
				
				/* CHECKBOX */
				
				.form-element[data-type="checkbox"] {}
				.form-element[data-type="checkbox"] {
					.fv {
						height: 100%;
						box-shadow: none;
						background-color: transparent;
					}
					label {
						position: absolute;
						inset:0;
						color: var(--brand_purple);
						white-space: nowrap;
					}
					label input {
						opacity: 0;
						position: absolute;
					}
					label i {
						display: block;
						position: relative;
						width:       25px;
						height:      25px;
						margin: 0 0 -25px 0;
						line-height: 25px;
						top: 13px;
						box-shadow: 0 0 0 1px rgba(87,87,87,0.23);
						background-color:#E4EEEE;
						text-align: center;
					}
					label i:before { 
						content:"\EBA0"; 
						content:"check"; 
					}
					label em {
						display: block;
						position: relative;
						margin: 0 0 0 40px;
						font-family: var(--body_font);
						font-size: var(--body_size);
						line-height: 50px;
						font-style: normal; 
						font-weight: 600;
						color: #928B95;
					}
					&[data-label="privacy_policy"] label em:before { content:"Adatkezelési tájékoztató elfogadása"; }
					&[data-label="conditions"]     label em:before { content:"Játék szabályzat elfogadása"; }
					
					&[data-label="privacy_policy"]  .fe { 
						margin-bottom: 0;
					}
					
					/* states */
					
					label input ~ i { 
						font-size: 0;
						transition: font-size 0.3s ease;
					}
					label input:checked ~ i {
						background-color: var(--brand_purple);
						color: white;
						font-size:20px;
					}
				}
				
				
				
				
				
				
				
				
				
				
				
				
				.form-element[data-type="button"] {
					/*
					position: absolute;
					bottom: 0;
					*/
					width: 100%;
				}
				.form-element[data-type="button"] {
					.fv {
						height: 100%;
						font-family: var(--title_font);
						font-size: 30px;
						text-align: center;
						text-transform: uppercase;
						background-color: var(--brand_purple);
						box-shadow:0 10px 0 0 var(--brand_green);
						color: white;
					}
					label {
						display: block;
						width: 100%;
						height: 100%; 
					}
					label input {
						opacity: 0;
						position: absolute;
					}
					label em {
						font-style:normal;
					}
					label em:before { content:"Feltöltés"; }
					.fe {
						height: 52px;
						margin-top: 0;
					}
					
				}
				.form-element[data-label="notice"] {
					/*height: 50px;*/
				}
				.form-element[data-label="notice"] {
					em {
						display: block;
						position: relative;
						margin: 35px 0 0 0;
						top: 50%;
						transform:translateY(-50%);
						font-family: var(--body_font);
						font-size: calc(var(--body_size) * 1.33);
						line-height: 1.2;
						font-style: normal;
						font-weight: 600;
						color: #928B95;
					}
					em:before {
						content:"Felhívás: ";
						display: inline-block;
						margin-right: 0.33em;
					}
					em:after {
						content:"Őrizd meg a blokkot 2026. március 15-ig!";
						text-transform: uppercase;
						color: var(--brand_purple);
						font-weight: 700;
					}
				}				
				.form-element[data-label="privacy_policy"] .fe { margin-top: 15px; }
				.form-element[data-label="conditions"] .fe {margin-top: -10px;}
				
				.existing-registration-reply {
					padding-top: 35px;
				}
				.existing-registration-reply .notice {
				}
				.existing-registration-reply .notice .mirror {
					background-image: url(../../../../uploads/images/existing-registration-reply.webp);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: top center;
					padding: 0;
					height: 100px;
					margin-top: 30px;
				}
				.existing-registration-reply .notice .mirror p {
					display: block;
					position: relative;
					top: 50%;
					transform:translateY(-50%);
					text-align: center;
					color: black;
					font-size: var(--body_size);
					font-weight: bold;
				}
				.succesful-registration-reply {
					padding-top: 35px;
				}
				.succesful-registration-reply .notice {
				}
				.succesful-registration-reply .notice .mirror {
					background-image: url(../../../../uploads/images/successful-registration-reply.webp);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: top center;
					padding: 0;
					height: 100px;
					margin-top: 30px;
				}
				.succesful-registration-reply .notice .mirror p {
					display: block;
					position: relative;
					top: 50%;
					transform:translateY(-50%);
					text-align: center;
					color: white;
					font-size: var(--body_size);
					font-weight: bold;
				}
			}

			/* states */

			html                                    .existing-registration-reply .notice { display: none; }
			html[data-reg="1"][data-reg-type="existing"] .existing-registration-reply .notice { display: block; }
			html                                    .succesful-registration-reply .notice { display: none; }
			html[data-reg="1"][data-reg-type="success"] .succesful-registration-reply .notice { display: block; }

			html[data-prc="1"] { pointer-events: none!important; cursor: progress; }
			html[data-prc="1"] * { pointer-events: none!important; cursor: progress; }
			html[data-prc="2"] { pointer-events: none!important; cursor: progress; }
			html[data-prc="2"] * { pointer-events: none!important; cursor: progress; }
			html[data-prc="0"] { pointer-events: all; cursor: default; }
			
			html               #form .form-element[data-type="upload"] .fv:before {  }
			html[data-prc="0"] #form .form-element[data-type="upload"] .fv:before { transition:width 0s linear; width: 0%;  }
			html[data-prc="1"] #form .form-element[data-type="upload"] .fv:before { transition:width 3s linear; width: 100%;  }
			html[data-prc="2"] #form .form-element[data-type="upload"] .fv:before { transition:width 3s linear; width: 100%;  }
			
			#form:has(.receipt-example:hover)	#text-inputs       { z-index: 100; }
			#form:has(.receipt-example:hover)	#confirm-checboxes { }
			
			/* Overlay backdrop for data-prc="2" */
			html[data-prc="2"] body::before {
				content: "";
				display: block;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.1);
				z-index: 99998;
				pointer-events: none;
			}
			
			/* Spinner for data-prc="2" */
			html[data-prc="2"] body::after {
				content: "progress_activity";
				display: block;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-family: 'Material Symbols Outlined';
				font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
				font-size: 90px;
				line-height: 90px;
				width: 90px;
				height: 90px;
				color: white;
				z-index: 99999;
				transform-origin: center center;
				animation: processing-fixed 1s linear infinite;
				pointer-events: none;
			}
			
			html[data-prc="2"] #form .form-element[data-type="upload"] label em {
				display: none;
			}
			
			@keyframes processing-fixed {
			  from { transform: translate(-50%, -50%) rotate(0deg); }
			  to { transform: translate(-50%, -50%) rotate(360deg); }
			}
			


			#form .form-element[data-status="processing"] label i {
				animation: processing 1s linear infinite;
			}
			@keyframes processing {
			  to { transform: rotate(360deg); }
			}
			
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {
				
				}
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
				
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
				
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
				
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
				
				}
				/*    -M   */ @media screen and (min-width:   0px) and (max-width: 959.8px) {
					#form .columns {width: 80%;}
					#form .columns ul { display: block; width: 100%; } 
					#form .columns ul li {display:block;width: 100%;}
					#form .columns li:nth-child(2) .form-elements:nth-child(1) { margin-top:25px; }
					#form .columns li:nth-child(2) .form-elements:nth-child(2) { }
					#form .columns li:nth-child(2) .form-elements:nth-child(3) { }
				}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
					
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
					#form .form-element[data-label="notice"] em:before { display: block;}
					#form .form-element[data-label="notice"] em:after { display: block; text-wrap:balance; }
				}
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
					#form .form-element[data-label="notice"] em:before { display: block;}
					#form .form-element[data-label="notice"] em:after { display: block; text-wrap:balance; }
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
					#form .form-element[data-label="notice"] em:before { display: block;}
					#form .form-element[data-label="notice"] em:after { display: block; text-wrap:balance; }
				}
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
					#form .form-element[data-label="notice"] em { white-space: normal; }
					#form .form-element[data-label="notice"] em:before { display: block;}
					#form .form-element[data-label="notice"] em:after { display: block; text-wrap:balance; }
				}
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
					#form .form-element[data-label="notice"] em:before { display: block;}
					#form .form-element[data-label="notice"] em:after { display: block; text-wrap:balance; }
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
					#form .columns { width:100%; } 
					#form .columns ul { display: block; width: 100%; }
					#form .columns ul li { display:block; }
					#form .form-element[data-label="notice"] em:before { display: block;}
				}				
				/*    -M   */ @media screen and (min-width:   0px) and (max-width: 959.8px) {
					#form .form-elements .form-element[data-type="upload"]          .fe { margin-bottom: 0; }
					#form .form-elements .form-element[data-label="privacy_policy"] .fe { margin-bottom: 0; }
					#form .form-elements .form-element[data-label="conditions"]     .fe { margin-bottom: 0; }
				}
				
			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
			
			/* custom sizes */
			
				@media screen and (max-width:889.8px){
					#form						 .form-element[data-label="code"] .fs #code-format-hints:before { content:"Blokk vagy számla sorszám"; }
					#form[data-receipt_type="1"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"Blokk sorszám"; }					
					#form[data-receipt_type="2"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"Kifli.hu 8 jegyű megrendelés szám"; }					
					#form[data-receipt_type="3"] .form-element[data-label="code"] .fs #code-format-hints:before { content:"METRO számlaszám"; }					
				}
				@media screen and (max-width:519.8px){
					#form						 .form-element[data-label="code"] .fs #code-format-hints { font-size: 0.85rem; }
				}
			
			
			
			
			
			
			
			
			
			#winners {
				.background {
				}
				.mirror {
					box-sizing: border-box;
					padding: 75px 50px;
					background-image: url(../../../../uploads/images/background.green.webp);
					background-size: cover;
					background-repeat: no-repeat;
					background-position: top center;
					outline: 1px dashed orange;
					outline:none;
				}
				h2 {
					font-size: var(--section_size_smaller);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0 0 50px 0;
					padding: 0;
					text-align: center;
				}
				.inset {
					padding:0;
					position: relative;
				}
				.list {}
				.list h3 {
					font-size: var(--subtitle_size);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0 0 10px 0;
					padding: 0;
				}
				ul.winners {
					display: inline-block;
					list-style: none;
					margin: 0 0 15px 0; 
					padding: 0;
					color: white;
					font-family: var(--body_font);
					font-weight: 700;
					font-size: var(--body_size_bigger);
					line-height: 1.4;
				}
				ul.winners li {
					list-style: inherit;
					margin: 0; 
					padding: 0;
				}
				ul.winners li i, ul.winners li em {
					text-shadow: 0 1px 5px rgba(20,100,67,0.49);
				}
				.list[data-label="daily"] ul.winners {
					column-count: 2;
					column-gap: 30px;
				}
				.list ul.winners li i {
					display: block;
					position: relative;
					font-family:'Material Symbols Rounded';
					font-size: 0.9em;
					width:       30px;
					height:      30px;
					line-height: 30px;
					margin: 0 0 -30px 0;
				}
				.list ul.winners li i:before {
					content:"\EA45"; 
					content:"star"; 
				}
				.list ul.winners li em {
					display: block;
					position: relative;
					margin: 0 0 0 30px;
					font-style: normal;
				}
				.list ul.winners[data-count="0"],
				.list ul.winners[data-count="1"] { column-count: 1; }
				.list ul.winners li.no-results i {
					display: none;
				}
				.list ul.winners li.no-results em { margin-left: 0; }
				.list ul.winners li.no-results em:before { content:"Hamarosan..."; }
				
				
				.columns[data-split="1-1"] ul.winners {
					margin: 0 0 15px 0; 
					padding: 0;
				}
				.columns[data-split="1-1"] ul.winners .col {
					display: inline-block;
					vertical-align: top;
					width: calc(50% - 10px);
					font-size: 1.25rem;
					line-height: 1.2;
				}
				.columns[data-split="1-1"] ul.winners .col h3 { white-space: nowrap; } 
			}
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {
				}
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {
				}
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
				}
				/*    -L   */ @media screen and (min-width:   0px) and (max-width:1039.8px) {
					#winners .mirror { padding: 75px 20px; }
					#winners h2 { margin: 0 0 25px 0; }
					#winners .columns > ul { white-space: normal; }
					#winners .columns[data-gap="big"] > ul { width: 100%; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.column { width: 100%; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.column[data-label="calendar"] { margin-bottom: 25px; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.gap { display:none; }
					#winners .columns[data-split="1-1"] ul.winners {width: auto;display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}
					#winners .list {display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}
					#winners .column[data-label="calendar"] .bbox { align-items:center;}
					#winners .columns[data-split="1-1"] ul.winners .col { width: 100%; }
					#winners .list h3 {text-align: center;font-size: calc(var(--subtitle_size) * 1.5);}
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
				}
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {
				}
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
				}
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
					#winners .mirror { padding: 75px 20px; }
					#winners h2 { margin: 0 0 25px 0; }
					#winners .columns > ul { white-space: normal; }
					#winners .columns[data-gap="big"] > ul { width: 100%; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.column { width: 100%; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.column[data-label="calendar"] { margin-bottom: 25px; }
					#winners .columns[data-split="1-1"][data-gap="big"] > ul > li.gap { display:none; }
					#winners .list[data-label="daily"] ul.winners { column-count: 1; column-gap: 0; }
					#winners .columns[data-split="1-1"] ul.winners .col { display: block; width: calc(100% - 0px); }
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
				}				
				
			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }			
			}
			
			
			
			
			
			
			
			
			
			#faq {}
			#faq {
				.mirror {
					margin: 0;
					padding: 0;
					outline: 1px dashed orange;
					outline: none;
				}
				.mirror .background {
					background-image:url(../../../../uploads/images/background.pink.webp);
					background-size: 100%;
					background-repeat: no-repeat;
					background-position: center;
					padding-top: 50px;
				}
				h2 {
					font-size: var(--section_size);
					line-height: 1.2;
					color:var(--brand_purple);
					margin: 0;
					padding: 0;
					text-align: center;
				}
				.columns {
					position: relative;
					width: 80%;
					margin-top: 30px;
					left: 50%;
					transform: translateX(-50%);
					outline: 1px dashed red;
					outline: none;
					padding-bottom: 150px;
				}
				.faq {
					margin:0;
					padding: 0;
					list-style: none;
					column-count: 2;
					column-gap: 75px;
					break-inside: avoid;
					/* padding-bottom: 150px; */
				}
				.faq > li {
					margin: inherit; 
					padding: inherit;
					padding-bottom: 10px;
					list-style: inherit;
					display: block;
					break-inside: avoid;
				}
				.faq > li > label {
					cursor: pointer;
				}
				.faq > li > label h3 {
					font-family:degular-text;
					font-size: var(--body_size);
					font-weight: 900;
					text-transform: uppercase;
					color: var(--brand_purple);
					margin-bottom: 10px;
					white-space: normal;
					padding-right: 25px;
				}
				.faq > li > label input {
					position: absolute;
					opacity: 0;
				}
				.faq > li > label input ~ i {
					display: block;
					position: relative;
					float: right;
					color: var(--brand_purple);
					font-size:   20px;
					line-height: 20px;
					width:       20px;
					height:      20px;
					margin: 0 0 -20px 0;
					transform: rotate(0deg);
					transition: transform 0.5s ease;
				}
				.faq > li > label input ~ i:before {
					content:"\EBA8"; 
					content:"arrow_forward_ios"; 
				}
				.faq > li > .answer {
					padding-right: 50px;
				}
				.faq > li > .answer > p,
				.faq > li > .answer > ul,
				.faq > li > .answer > ol {
					font-family:degular-text;
					font-size: calc( var(--body_size) * 0.9);
					font-weight: 400;
					color: var(--brand_purple);
					white-space: normal;
				}				
				.faq > li > .answer > ul {
					list-style: disc;
				}
				.faq > li > .answer > ul > li > ul {
					list-style: disc;
				}
				
				/* states */
				
				.faq > li .answer {
					max-height: 0;
					padding-bottom: 0;
					overflow: hidden;
					transition: max-height .25s ease, padding .25s ease;
				}
				.faq > li:has(input:checked) .answer {
					max-height: 500px;
					padding-bottom: 15px;
					transition: max-height .5s ease, padding .5s ease
				}
				.faq > li:has(input:checked) > label input  ~ i {
					transform: rotate(90deg);
				}

			}
			
			/* bottom offset */

			#faq {padding-bottom: 0;}
			#faq .mirror .background {padding-bottom: 0px;}

			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				#faq {
					margin-bottom:-100px;
				}
				#faq .faq {
					column-count: 1;
					column-gap: 0;
				}
				#faq .mirror .background {
					background-size:cover;
					padding-bottom:100px;
					background-attachment:fixed;
				}
				#faq .faq > li > label h3 {
					padding-right:8%;
				}
				#faq .faq > li > .answer {
					padding-right:0;
				}
			}

			/* ranges */
			
				/*    -XL   */ @media screen and (min-width:0px) and (max-width:1239.8px) {
					#faq .mirror .background {
						background-size: 100% 100%;
					}
					#faq .faq {
						column-count: 1;
						column-gap: 0;
					}
				}
			
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {  }
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {  }
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {
					#faq .mirror .background {
						background-size: 100% 100%;
						padding-top: 50px;
						/* margin-bottom: -150px; */
						/* padding-bottom: 150px; */
						overflow: hidden;
					}
				}
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {
				}
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {  }
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {  }
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {  } 
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {  }
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {  }
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {  }
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {  }
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {  }
				
			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }




















			/* calendar */

				.column[data-label="calendar"] .bbox {
					display: flex;
					align-items:flex-end;
					flex-flow: column;
				}
				#calendar {
					display: inherit;
					position: relative;
					padding: 25px 20px 15px 25px;
					margin: 0 0 10px 0;
					font-family: degular-text;
					font-size: var(--body_size);
					font-weight: 600;
					max-width: 500px;
					background-color: var(--brand_purple);
					background: linear-gradient(0deg, var(--brand_purple),var(--brand_purple_lighter));
					border-radius: 40px;
				}
				#calendar {
					.head .months {
					}
					.head .months a {
						display: block;
						width:  35px;
						height: 40px;
						border-radius: 6px;
						color: white;
						text-decoration: none;
						cursor: pointer;
					}
					.head .months a i {
						display: block;
						width: 35px;
						font-size: 35px;
						line-height:40px;
						text-align: center;
					}
					.head .months a.prev { float: left; }
					.head .months a.next  { float: right; }
					.head .months a.prev i:before  {
						content:"\EBA3";
						content:"arrow_back_ios";
					}
					.head .months a.next  i:before {
						content:"\EBA8";
						content:"arrow_forward_ios";
					}

					.head .months a.prev[data-disabled="1"] { pointer-events: none; opacity: 0.5;  }

					.head .current-month {
						margin: 0; 
						padding: 0;
						text-align: center;
						font-family: cheddar-gothic-rough;
						font-weight: normal;
						font-size: 2.15rem;
						line-height: 1.2;
						user-select: none;
						color: var(--brand_green);
					}
					.head .current-month .year { margin-right: 0.5rem; }
					.head .current-month .month {}
					.head .current-month .year:after { content:"."; }

					.head ul.daynames {
						clear: both;
						display: block;
						font-size: 0;
						line-height: 0;
						width: calc(100% - var(--weeks_size));
						margin:25px 0 0 var(--weeks_size);
						padding: 0 0 0 0;
						color: white;
						background-color: transparent;
						border-radius: 50px;
					}
					.head ul.daynames li {
						display: inline-block;
						list-style: none;
						margin: 0;
						padding: 0;
						width: calc(100% / 7);
						height: 45px;
						text-align: center;
						font-family: degular-text;
						font-size: 25px;
						line-height: 1;
						font-weight: bold;
						color: var(--brand_green);
						overflow: hidden;
					}
					.head ul.daynames li:before { display: block; text-align: center; }
					.body { 
					}
					.body .weeks, 
					.body .days {
						display: inline-block;
						vertical-align: top;
					}		
					.body .weeks { width: var(--weeks_size); }
					.body .days  { width: calc(100% - var(--weeks_size)); }


					/*					*/
					/* WEEKS 			*/
					/*					*/

					.body .weeks {
						display: inline-block;
						vertical-align: top;
						position: relative;
						margin: 0;
						padding: 15px 0 0 0;
						font-size: 0;
						line-height: 0;
						overflow: hidden;
					}
					.body .weeks li {
						list-style: none;
						margin: 0 0 0 0;
						padding: 0 10px 0 0;
						font-size: 0.9rem;
						line-height: 1;
						height: 45px;
						width: 100%;
						pointer-events: none;
						text-align: left;
						color: var(--brand_pink);
					}
					.body .weeks li em {
						display: block;
						font-style: normal;
					}

					/*					*/
					/* DAYS 			*/
					/*					*/

					.body .days {
						position: relative;
						margin: 0;
						padding: 0;
						font-size: 0;
						line-height: 0;
						background-color: #FFFFFFAA;
						background-color: transparent;
						overflow: hidden;
					}
					.body .days a {
						display: inline-block;
						position: relative;
						vertical-align: top;
						margin: 0;
						padding: 0;
						font-size: 1.5rem;
						line-height: 1;
						width: calc(14.2857142857% - 0px);
						height: 45px;
						color: white;
						text-align: center;
						text-decoration: none;
						cursor: pointer;
					}
					.body .days a.next-month {
						/* opacity: 0.3; */
						pointer-events: none;
					}
					.body .days a.next-month em { opacity: 0.3; }


					.body .days a[data-chosen="1"] em {
						background-color: var(--brand_pink);
						background-color: white;
					}
					.body .days a[data-chosen="1"][data-holiday="1"] em {
						background-color: var(--brand_pink);
						background-color: white;
					}

					/*
					.body .days a[data-chosen="1"]:before,
					.body .days a[data-chosen="2"]:before {
						content:"";
						display: block;
						position: relative;
						z-index:-1;
						width: 172px;
						height: 46px;
						margin: 0 0 -50px 0;
						background-color:var(--brand_blue);
						border-radius: 50px;
						left: 38px;
						top: -4px;
						border: 2px solid var(--brand_blue);
						opacity: 0.75;
						opacity: 1;
					}
					.body .days a[data-day="1"][data-chosen="2"]:after,
					.body .days a[data-day="1"][data-chosen="3"]:after {
						content:"";
						display: block;
						position: relative;
						z-index:-1;
						width: 120px;
						height: 46px;
						margin: 0 0 -50px 0;
						background-color:var(--brand_blue);
						border-radius: 50px;
						left: -35px;
						top: -63px;
						border: 2px solid var(--brand_blue);
						opacity: 0.75;
						opacity: 1;
					}
					*/

					/*
					.body .days a[data-chosen="2"]            em { background-color: #2275a900!important; color:var(--brand_blue);}
					.body .days a[data-chosen="3"]            em { background-color: #2275a9FF!important; color:white; }
					.body .days a.next-month[data-chosen="2"] em { background-color: #2275a900!important; opacity:1; }
					.body .days a.next-month[data-chosen="3"] em { background-color: #2275a9FF!important; opacity:1; }
					*/

					.body .days a[data-holiday="1"] {}
					.body .days a[data-holiday="1"]:hover em {}
					.body .days a[data-valid="0"] { pointer-events: none; }
					.body .days a[data-valid="0"] em { opacity: 0.5; }
					
					/*.body .days a[data-past="1"] {color: #ffffff7d;pointer-events: none;}*/
					
					/* .body .days a[data-today="1"]  em { background-color:white; color: var(--brand_purple); font-weight: bold; } */
					.body .days a[data-today="1"]  em:after {
						content:"";
						display: block;
						position: relative;
						width:         15px; 
						height:         3px;
						border-radius:  5px;
						margin-bottom: -3px;
						background-color:white;
						top: -8px;
						left: 50%;
						transform: translateX(-50%);
					}
					.body .days a[data-chosen="1"] em {
						background-color:white;
						color: var(--brand_purple); 
						font-weight: bold; 
					}
					.body .days a[data-today="1"] [data-chosen="1"] em:after {
						background-color: white;
					}

					.body .days a[data-period_type="maintenance"] { pointer-events: none; }
					.body .days a[data-period_type="maintenance"] .schedule_name { color:#BF0000;}

					.body .days a[data-period_type="holiday"] { pointer-events: none; }
					.body .days a[data-period_type="holiday"] .schedule_name { color:#BF0000;}

					.body .days a em,
					.body .days a span { 
						pointer-events:none;
						user-select: none;
					}
					.body .days a em {
						display: inline-block;
						position: relative;
						overflow: hidden;
						width:         40px;
						height:        40px;
						border-radius: 40px;
						line-height:   40px;
						top: 0;
						text-align: center;
						text-decoration: none;
						font-style: normal;
						cursor: pointer;
					}
					.body .days a:hover em {
						box-shadow: inset 0 0 0 3px var(--brand_green);
						box-shadow: inset 0 0 0 3px var(--brand_pink);
						box-shadow: inset 0 0 0 3px white;
					}
					.body .days a[data-schedule="1"] em {
						color:black!important;
						line-height: 35px;
						height: 35px;
					}
					.body .days a .schedule_name {
						position: absolute;
						width: 100px;
						bottom:0;
						margin-bottom: 5px;
						z-index: 1;
						font-size: 10px;
						line-height: 1.2;
						padding: 3px 0 0 0;
						text-align: center;
						transform:translateX(-25%) scale(0.85,1);
						white-space: normal;
						-webkit-hyphens: auto;
						-ms-hyphens: auto;
						hyphens: auto;
						border-radius: 5px;
						background-color: white;
					}
					.body .days a .schedule_note { 
						display: none;
					}			
				}
				html[lang="hu"] #calendar[data-weeknames="full"] .head ul.daynames {
					li:nth-child(1):before { content:"Hétfő"; }
					li:nth-child(2):before { content:"Kedd"; }
					li:nth-child(3):before { content:"Szerda"; }
					li:nth-child(4):before { content:"Csütörtök"; }
					li:nth-child(5):before { content:"Péntek"; }
					li:nth-child(6):before { content:"Szombat"; }
					li:nth-child(7):before { content:"Vasárnap"; }
				}
				html[lang="hu"] #calendar[data-weeknames="abbr"] .head ul.daynames {
					li:nth-child(1):before { content:"H"; }
					li:nth-child(2):before { content:"K"; }
					li:nth-child(3):before { content:"Sz"; }
					li:nth-child(4):before { content:"Cs"; }
					li:nth-child(5):before { content:"P"; }
					li:nth-child(6):before { content:"Szo"; }
					li:nth-child(7):before { content:"V"; }
				}
				html[lang="hu"] #calendar .body .weeks li em:after { content:". hét"; }
				html[lang="en"] #calendar .body .weeks li em:after { content:"week"; float: left; margin-right: 0.25em; }
				
				
			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          {  }
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {  }
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { }
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { }
				/*    -L   */ @media screen and (min-width:   0px) and (max-width:1039.8px) {
					#calendar .head                {width: calc(100% - 0px);margin:0;height: auto;margin-bottom: calc(-0.3 * var(--weeks_size));}
					#calendar .head .current-month {font-size: 1.8rem;}
					#calendar .head ul.daynames    {width: calc(100% + 5%);margin-left: 0;overflow: hidden;}
					#calendar .head ul.daynames li {/* transform:rotate(-45deg); */font-size: 1.3rem;margin: 15px 0 25px 0;}
					#calendar .body .weeks         { padding: 0; margin-top: 28px; }
					#calendar .body .weeks li      {padding: 0;width:25px;height: 40px;font-size: calc(var(--body_size) * 0.8);white-space: nowrap;}
					#calendar .body .weeks li:after{ }
					#calendar .body .days          {width: calc(100% + 0%);margin: 0px 0 0 0;padding: 15px 0 15px 0;}
					#calendar .body .days a        {font-size: 1.5rem;height: 40px;}
					#calendar .body .days a .schedule_name { width: 50px; font-size: 1rem; transform:translateX(-0%); margin-bottom: 0px; }
					#calendar .body .days a:hover            .schedule_name,
					#calendar .body .days a[data-today="1"]  .schedule_name,
					#calendar .body .days a[data-chosen="1"] .schedule_name { transition: margin .3s ease; margin-bottom: -15px; }
					#calendar .body .days a[data-period_type="maintenance"] .schedule_name { top:33px; }
					#calendar .body .days a[data-period_type="holiday"] .schedule_name { display: none; }
				} 
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {
					#calendar .head ul.daynames { width: calc(100% - var(--weeks_size)); margin: 25px 0 0 var(--weeks_size); }
					#calendar .body .days { width: calc(100% - var(--weeks_size)); }
				}
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
					#calendar .head ul.daynames {width: calc(100% - var(--weeks_size));margin: 25px 0 0 var(--weeks_size);}
					#calendar .body .days { width: calc(100% - var(--weeks_size)); }
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {
					#calendar .head ul.daynames { width: calc(100% - var(--weeks_size)); margin: 25px 0 0 var(--weeks_size); }
					#calendar .body .days { width: calc(100% - var(--weeks_size)); }
				} 
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {
					#calendar .head ul.daynames { width: calc(100% - var(--weeks_size)); margin: 25px 0 0 var(--weeks_size); }
					#calendar .body .days { width: calc(100% - var(--weeks_size)); }
				}
				/*   -XS   */ @media screen and (min-width:   0px) and (max-width: 579.8px) {
					#calendar .body .weeks { display: none; }
				}
				/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {  }
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {  }
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
					#calendar .body .weeks { display: none; }
					#calendar .head { width:calc(100% - 0px); }
					#calendar .head ul.daynames { width: calc(100% - 0px); margin-left: 0px; margin-top: 10px; margin-bottom: -10px; }
					#calendar .head ul.daynames li { margin:0; }
					#calendar .body .days { width: calc(100% - 0px); margin: 0px 0 0 0; padding: 15px 15px 15px 0; }
					#calendar .body .days a { font-size: 1.5rem; }
				}
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {  }
				
			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
				
				
				
				
				
				
				
				
				
				
				
				
	

			/* dropzone */

				#image-dropzone {
					position: fixed;
					inset:0;
					border:5px dashed var(--brand_green);
					background-color: var(--brand_green_opaque);
					padding:40px;
					text-align:center;
					opacity: 0;
					pointer-events: none;
					z-index: 99999;
					color: white;
					transition: rotate 1s linear;
				}
				#image-dropzone.dragover {
					opacity: 1;
					pointer-events: all;
				}
				#image-dropzone.processing {
					opacity: 1;
					inset: 0;
					pointer-events: all;
				}
				#image-dropzone.processing .progress {
					position: fixed;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
				#image-dropzone.processing i {
					display: block;
					font-size: 100px;
					width: 100px;
					height: 100px;
					line-height: 100px;
					text-align: center;
					animation: rotate-step 0.75s steps(30) infinite;
					transform-origin: center center;
					text-shadow: 0 0 25px rgba(0,0,0,0.31);
				}
				#image-dropzone.processing i:before {
					content: "\E9E7";
					content: "progress_activity";
				}
				@keyframes rotate-step {
				  to { transform: rotate(360deg); }
				}










	/* footer */
	
		footer {
			position: relative;
			left: 50%;
			transform:translateX(-50%);
			pointer-events: none;
			margin-top: -150px;
			/* top: -150px; */
			/* margin-bottom: -150px; */
		}
		footer {
			.background {}
			.background .bottom-banner {}
			.background .bottom-banner figure {
				width: 100%;
				margin: 0;
				padding: 0;
				background-image: url(../../../../uploads/images/footer-desktop.webp);
				background-size: 100%;
				background-position: top center;
				background-repeat: no-repeat;
				aspect-ratio:40/7;
			}
			.mirror {
				text-align: center;
			}
			#bottom-menu {
				background-color: white;
				z-index: 999;
				position: relative;
			}
			#bottom-menu ul { 
				display: inline-block;
				vertical-align: top;
				list-style: none;
				margin: 0;
				padding: 15px 0;
			}
			#bottom-menu ul li {
				display: inline-block;
				vertical-align: top;
				list-style: inherit;
				margin: inherit;
				padding: inherit;
				align-content: space-around;
			}
			#bottom-menu ul li[data-label="cookie"] {}
			#bottom-menu ul li[data-label="privacy-policy"] {}
			#bottom-menu ul li[data-label="contact"] {}
			#bottom-menu ul li[data-label="terms-and-conditions"] {}
			#bottom-menu ul li a {
				display: block;
				pointer-events: all;
				padding:5px 15px;
				text-decoration: none;
				font-family: var(--body_font);
				font-size: var(--body_size_bigger);
				font-size: var(--body_size);
				line-height: 1.2;
				color: #ABAFB3;
			}
			#bottom-menu ul li a i {}
			#bottom-menu ul li a em {
				font-style: normal; 
			}
		}
		/* SCREENS */

			/* mobile and desktop */

				/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
				/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}

			/* desktop / tablet / mobile */

				/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
				/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
				/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}

			/* screen sizes */

				/* XXXXL   */ @media screen and (min-width:1600px)                          { }
				/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { }
				/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { }
				/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { }
				/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { }
				/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { }
				/*   -MS   */ @media screen and (min-width:   0px) and (max-width: 859.8px) {
					footer #bottom-menu { height: 200px; position: relative; }
					footer #bottom-menu ul { position: relative; top: 50%; transform:translateY(-50%); }
					footer #bottom-menu ul li { display: block; padding: 0; }
				}
				/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { }
				/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { }
				/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { }
				/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { }
				/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { }

			/* subscreen sizes */

				/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
				/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
				/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
				/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
				/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
				/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
				/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
				/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
				/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
				/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
				/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
				/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
		
		
		
		
		
		
		/* screens */

			
			/* HEADER */
			/* SECTION */
			/* FOOTER */

			/* XXXXL   */ @media screen and (min-width:1600px)                          { header .mirror, main section .mirror, footer .mirror { width: 1600px; } }
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { header .mirror, main section .mirror, footer .mirror { width: 1400px; } }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { header .mirror, main section .mirror, footer .mirror { width: 1200px; } }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { header .mirror, main section .mirror, footer .mirror { width: 1000px; } }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { header .mirror, main section .mirror, footer .mirror { width:  900px; } }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { header .mirror, main section .mirror, footer .mirror { width:  800px; } }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { header .mirror, main section .mirror, footer .mirror { width:  100%; } }

		
		
		
		
		
		
		
		

	/* responsives */
	
	
	/* SCREENS */
	
		/* mobile and desktop */
		
			/*    -S     = All mobile   */ @media screen and (max-width:699.8px) {}
			/*     S-    = All desktop  */ @media screen and (min-width:700px)   {}
			
		/* desktop / tablet / mobile */

			/*     L-    = Desktop */ @media screen and (min-width:960px)                         {}
			/* XXS-M     = Tablet  */ @media screen and (min-width:440px) and (max-width:959.8px) {}
			/*    -XXXS  = Mobile  */ @media screen and (min-width:  0px) and (max-width:439.8px) {}
	
		/* screen sizes */

			/* XXXXL   */ @media screen and (min-width:1600px)                          { }
			/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { }
			/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { }
			/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { }
			/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { }
			/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { }
			/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { }
			/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { }
			/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { }
			/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { }
			/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { }
			/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { }

		/* subscreen sizes */
	
			/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { }
			/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { }
			/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { }
			/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { }
			/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { }
			/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { }
			/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { }
			/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { }
			/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { }
			/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { }
			/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { }
			/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { }
		

	html[data-loc="development"]:before {
		content:" ";
		display: block;
		position: fixed;
		left: 0;
		bottom: 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: 10px;
		line-height: 12px;
		color: black;
		padding: 5px 15px 5px 15px;
		border-left: 20px solid black;
	}

	/* XXXXL   */ @media screen and (min-width:1600px)                          { html[data-loc="development"]:before { content:" XXXXL 1600px- ";     border-left-color:#F8FF20; } }
	/*  XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) { html[data-loc="development"]:before { content:" XXXL  1440-1599px "; border-left-color:#00FF1B; } }
	/*   XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439px "; border-left-color:#0085AA; } }
	/*    XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) { html[data-loc="development"]:before { content:" XL    1040-1139px "; border-left-color:#02CEB5; } }
	/*     L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) { html[data-loc="development"]:before { content:" L      960-1039px "; border-left-color:#0ED773; } }
	/*     M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) { html[data-loc="development"]:before { content:" M      860- 959px ";  border-left-color:#44D70E; } }
	/*    MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) { html[data-loc="development"]:before { content:" MS     700- 859px ";  border-left-color:#A0D70E; } }
	/*     S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) { html[data-loc="development"]:before { content:" S      580- 699px ";  border-left-color:#D7CC0E; } }
	/*    XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) { html[data-loc="development"]:before { content:" XS     520- 579px ";  border-left-color:#D7A60E; } }
	/*   XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) { html[data-loc="development"]:before { content:" XXS    440- 519px ";  border-left-color:#BDD70E; } }
	/*  XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439px ";  border-left-color:#B1570B; } }
	/* XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) { html[data-loc="development"]:before { content:" XXXXS    0- 329px ";  border-left-color:#B10B6D; } }

	/*   XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439px (XXL4 1400-1439px)"; border-left-color:#2CD0FF; } }
	/*   XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439px (XXL3 1340-1399px)"; border-left-color:#A34FFF; } }
	/*   XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439px (XXL2 1300-1339px)"; border-left-color:#FF1594; } }
	/*   XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) { html[data-loc="development"]:before { content:" XXL   1240-1439px (XXL1 1240-1299px)"; border-left-color:#00E47C; } }
	/*    XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) { html[data-loc="development"]:before { content:" XL    1040-1239px (XL4  1200-1239px)"; border-left-color:#19FDE1; } }
	/*    XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) { html[data-loc="development"]:before { content:" XL    1040-1239px (XL3  1140-1199px)"; border-left-color:#0BB8FF; } }
	/*    XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) { html[data-loc="development"]:before { content:" XL    1040-1239px (XL2  1100-1139px)"; border-left-color:#006CFF; } }
	/*    XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) { html[data-loc="development"]:before { content:" XL    1040-1239px (XL1  1040-1099px)"; border-left-color:#3500FF; } }
	/*     M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) { html[data-loc="development"]:before { content:" M      860-959    (M2    900- 959px)"; border-left-color:#0EC2D7; } }
	/*     M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) { html[data-loc="development"]:before { content:" M      860-959    (M1    860- 899px)"; border-left-color:#0ED7A5; } }
	/*  XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439px (XXXS2 400- 439px)"; border-left-color:#E77616; } }
	/*  XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) { html[data-loc="development"]:before { content:" XXXS   330- 439px (XXXS1 330- 399px)"; border-left-color:#F2C512; } }