:root {

--color-def: #fff;
--color-red: rgb(210,26,62);
--color-black: rgb(12,12,12);

}


html, body { width: 100%; min-height: 100%; margin: 0px; padding: 0px; position:relative; }
body { position: relative; background-image: url(/img/BG.webp); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
body, body * { font-family: 'Roboto'; font-size: 20px; line-height: 120%; font-weight: 300; color: var(--color-def); }
ul { margin-block-start: unset; margin-block-end: unset; padding-inline-start: unset; }
p, a, ul, li { margin: 0px; padding: 0px; }
ul li::marker { font-size: 10px; }
p { margin-bottom: 8px; }
a { text-decoration: none; margin: 0px; padding: 0px; color: unset; cursor: pointer; }
a:hover { color: var(--color-blue); }
strong, .strong { font-weight: 700; }

small { font-size:16px; }

img { max-width: 100%; }

.loader { position: absolute; z-index: 9999; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .5); }

.koszonet.show {

	z-index: 999999;
	display: flex;

}
.koszonet {

	position: fixed;
	top: 0px; left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .9);
	z-index: -1;
	align-items: center;
	justify-content: center;
	display: none;

}

.red { color: var(--color-red); }

.btn { 
	border-radius: 7px;
	font-family: 'Jost';
	font-size: 25px;
	font-weight: 700;
	line-height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 20px;
	padding-right: 20px;
	width: fit-content;
	padding-top: 10px;
	white-space: nowrap;
	text-transform: uppercase;
	color: #fff;
	font-style: italic;
}

.btn.red {
	background-color: var(--color-red);
	color: #fff;
	border: 2px solid var(--color-red);
}
.btn.red:hover {
	background-color: rgb(168,24,51);
	color: #fff;
	border: 2px solid rgb(168,24,51);
}

.btn.outline {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.btn.outline:hover {
	background-color: rgb(164,164,164);
	color: #fff;
	border: 2px solid rgb(164,164,164);
}


.text-italic { font-style: italic; }



h1, h1 ÷ {
	font-family: 'Jost';
	font-size: 40px;
	font-weight: 700;
	margin: 0px;
}
h2, h2 ÷ {
	font-family: 'Jost';
	font-size: 40px;
	font-weight: 700;
	font-style: italic;
	margin: 0px;
}
h3, h3 ÷ {
	font-family: 'Jost';
	font-size: 29px;
	font-weight: 300;
	margin: 0px;
}


section {

	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

}



nav {
	position: absolute;
	top: 0px; right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
nav a {
	font-family: 'Jost';
	font-size: 20px;
	text-transform: uppercase;
	line-height: 40px;
	text-decoration: none;
}
nav a:hover, nav a.active {
	color: var(--color-red);
	text-decoration: underline;
}

.menu {

	position: fixed;
	top: 30px;
	right: 30px;
	width: 40px;
	height: 40px;
	background: unset;
	border: unset;
	outline: unset;
	box-shadow: unset;
	background-image: url(/img/menu.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	display: none;
	z-index: 99999;

}



.ful-menu {

	font-family: 'Jost';
	font-size: 25px;
	font-weight: 700;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 30px;
	border-bottom: 6px solid #fff;
	opacity: .4;

}
.ful-menu:hover, .ful-menu.active {

	opacity: 1;

}


[data-name] span {

	font-family: 'Jost';
	font-size: 30px;
	font-weight: 700;
	background-color: var(--color-red);
	border-radius: 25px;
	padding: 5px;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: italic;

}


[data-active] {

	overflow: hidden;
	position: relative;

}

[data-name] {

	position: absolute;
	width: 100%;
	left: -130%;
	top: 0px;
	opacity: 0;
	transition: all .5s;

}

[data-active="reszvetel"] [data-name="reszvetel"] {

	position: absolute;
	opacity: 1;
	left: 0px;

}

[data-active="sorsolasok"] [data-name="sorsolasok"] {

	position: absolute;
	opacity: 1;
	left: 0px;

}

[data-active="canal"] [data-name="canal"] {

	position: absolute;
	opacity: 1;
	left: 0px;

}






.form-container {

	border-radius: 15px;
	background: #1C1C1C;
	background: linear-gradient(150deg,rgba(28, 28, 28, 1) 0%, rgba(12, 12, 12, 1) 100%);
	padding: 30px;

}



form[name="regisztracio"] .form-label { color: rgb(140, 140, 140); }
form[name="regisztracio"] .form-check-label { color: rgb(140, 140, 140); }

form[name="regisztracio"] .form-control { background-color: #fff !important; color: rgb(140, 140, 140); border-radius: 44px; border: 1px solid #fff; box-shadow: unset !important; height: 44px; font-size: 20px; font-weight: 300; text-align: left; }
form[name="regisztracio"] .form-control:hover { border: 1px solid #8acbc4; }
form[name="regisztracio"] .form-control:focus { border: 1px solid #343737; }
form[name="regisztracio"] .form-check-input[type="checkbox"] { min-width: 1em; min-height: 1em; border-radius: 25px; margin: 0px; background: transparent; border: 2px solid #fff; box-shadow: unset !important; outline: unset !important; }
form[name="regisztracio"] .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e"); }

.group-text { position: absolute; width: fit-content; min-width: 40px; height: 40px; border-radius: 40px; background-color: rgb(223, 223, 223); color: var(--color-black); position: absolute; left: 2px; top: 2px; font-size: 20px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding-right: 10px; padding-left: 10px; }

.group { width: 30%; position: relative; }
.groupto { width: 69%; }
.group-text { position: absolute; width: fit-content; min-width: 40px; height: 40px; border-radius: 40px; background-color: rgb(223, 223, 223); color: var(--color-black); position: absolute; right: 2px; top: 2px; font-size: 20px; font-weight: 500; display: flex; justify-content: center; align-items: center; padding-right: 10px; padding-left: 10px; }





footer .container {

	border-top: 5px solid rgb(28,28,28);

}

footer p {

	color: rgb(167,167,167);
}

footer a {

	color: rgb(167,167,167);
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 5px;

}

footer a:hover {

	text-decoration: none;
}



@media (max-width: 769px) {	

	body, body * { font-size: 16px; }

	.btn { width: 100%; }

	h1, h1 ÷ {
		font-size: 40px;
	}
	h2, h2 ÷ {
		font-size: 28px;
	}
	h3, h3 ÷ {
		font-size: 29px;
	}

	.ful-menu {

		font-size: 13px;
		padding-bottom: 20px;

	}



}

@media (max-width: 992px) {

	nav {

		position: fixed;
		width: 100%;
		height: 100%;
		background: linear-gradient(150deg,rgb(208, 25, 62) 55%, rgb(24, 24, 24) 100%);
		top: 0px;
		right: -120%;
		display: flex;
		align-items: center;
		justify-content: center;

		z-index: 9999;

		transition: all .5s;
		
	}

	nav a {

		font-size: 33px;
		margin-top: 10px;
		margin-bottom: 10px;
		text-transform: unset;

	}

	nav a:hover {

		color: var(--color-black);

	}

	.menu {

		display: block;

	}

	.active nav {
		right: 0px;
	}

	.active .menu {

		background-image: url(/img/menu-close.svg);

	}

	.form-container {
		padding: 0px;

	}
	.form-check {
		padding-left: 0px;
	}
	form.container {
		padding: 15px;
	}
	.group { width: 35%; }
	.groupto { width: 64%; }
}

@media (max-width: 1200px) {



}

@media (max-width: 1400px) {

	.container { max-width: 100%; }

}