:root {

--color-def: 	#fff; 
--color: 		#8C1C68; 
--color-hover: 	#FEC370; 

--font-default: 'Montserrat';
--font-title: 	'Marline';

}


html, body { width: 100%; height: auto; min-height: 100%; margin: 0px; padding: 0px; }
body { position: relative; background-image: url(/img/bg.webp); background-size: 100% 100%; background-repeat: no-repeat; }
body, body * { font-family: var(--font-default), sans-serif; font-size: 28px; line-height: 130%; 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 { list-style-type: none; padding-left: 10px; }
ul li::marker { font-size: 10px; }
p { margin: 0px; padding: 0px; }
a { text-decoration: none; margin: 0px; padding: 0px; color: unset; cursor: pointer; }
a:hover { color: unset; }

.color, .color * { color: var(--color); }

.fit-content { width: fit-content; }

b, .bold { font-weight: 700 !important; }
strong, .strong { font-weight: 800 !important; }

img { max-width: 100%; height: fit-content; }


.button { border: unset; box-shadow: unset; background-color: var(--color); border-radius: 50px; padding: 15px 50px 15px 50px; color: #fff; text-transform: uppercase; display: inline-block; }
.button:hover { background-color: var(--color-hover); }


.loader { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, .7);transform: ;msFilter:;'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'%3E%3C/path%3E%3Cpath d='M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: 100px; z-index: 9999; }



header { height: 100px; width: 100%; position: absolute; z-index: 2; }
header a { font-weight: 700; display: block; font-size: 17px; }
header a.b { border: 2px solid #fff; border-radius: 20px; padding: 5px 20px 5px 20px; }
header a.b:hover { border: 2px solid var(--color); background-color: var(--color); }



h1, h1 * { font-size: 36px; color: var(--color); }
h2, h2 * { font-size: 60px; color: var(--color); font-family: var(--font-title); }
h3, h3 * { font-size: 27px; color: var(--color); font-weight: 800; }



section.cover { min-height: 100vh; height: auto; width: 100%; display: flex; align-items: center; position: relative; }
section.cover .nyil { position: absolute; bottom: 20px; left: calc( 50% - 33px ); display: block; }





section.kerdoiv { min-height: 100vh; height: auto; width: 100%; display: flex; align-items: center; position: relative; }

section.kerdoiv.view { background-image: url(/img/kerdojel.webp); background-repeat: no-repeat; background-position: center 60%; background-size: 370px; }



section.kerdoiv .button-container .nyil-b { width: 43px; height: 42px; background-image: url(/img/nyil-2-b.webp); background-size: 100% 100%; background-repeat: no-repeat; }
section.kerdoiv .button-container .nyil-j { width: 43px; height: 42px; background-image: url(/img/nyil-2-j.webp); background-size: 100% 100%; background-repeat: no-repeat; }

section.kerdoiv .button-container:hover .nyil-b { background-image: url(/img/nyil-2-b-h.webp); }
section.kerdoiv .button-container:hover .nyil-j { background-image: url(/img/nyil-2-j-h.webp); }

section.kerdoiv .kapszula-1 { position: absolute; bottom: 20px; left: 20px; }
section.kerdoiv .kapszula-2 { position: absolute; top: 20px; right: 20px; }


.form-check-label, .form-check-label * { font-size: 17px; }


.sikeres p { color: var(--color); font-style: italic; opacity: 0; transition: opacity .2s; }
.sikeres p.show { color: var(--color); font-style: italic; opacity: 1; }



footer { background-color: var(--color); padding-top: 30px; padding-bottom: 30px; }
footer a { font-size: 22px; }


[data-step] { width: 100%; display: none; }

[data-step] .container { overflow: hidden; }

[data-step].show { display: block; }

[data-step].show .content { position: relative; right: -20px; opacity: 0; transition: right 1s, opacity 2s; }
[data-step].show.contentshow .content { position: relative; right: 0px; opacity: 1; }

[data-step].show img { opacity: 0; transition: opacity 2s; }
[data-step].show.contentshow img { opacity: 1; }

.form-check-input { border: unset !important; box-shadow: unset !important; }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Ccircle style='fill: %238d1c68;' cx='16' cy='16' r='10'/%3E%3C/svg%3E"); }
.form-check-input[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Cpath style='fill: %238d1c68;' d='M16,7c5,0,9,4,9,9s-4,9-9,9-9-4-9-9,4-9,9-9M16,6c-5.5,0-10,4.5-10,10s4.5,10,10,10,10-4.5,10-10-4.5-10-10-10h0Z'/%3E%3C/svg%3E"); }

.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Ccircle style='fill: %238d1c68;' cx='16' cy='16' r='10'/%3E%3C/svg%3E"); }
.form-check-input[type="checkbox"] { border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Cpath style='fill: %238d1c68;' d='M16,7c5,0,9,4,9,9s-4,9-9,9-9-4-9-9,4-9,9-9M16,6c-5.5,0-10,4.5-10,10s4.5,10,10,10,10-4.5,10-10-4.5-10-10-10h0Z'/%3E%3C/svg%3E"); }

.button.next { position: relative; opacity: 0; z-index: -1; }
.button.next.show { opacity: 1; z-index: 1; }

.form-control { border: unset !important; box-shadow: unset !important; border-radius: 50px; }
.form-control::placeholder { color: #F59C81; opacity: 1; }


.adatok { display: none; }



/* respo */

@media (max-width: 1400px) {

	.container { min-width: 100%; }

}


@media (max-width: 1200px) {




}

@media (max-width: 992px) {

	header { position: relative; }
	header a { font-size: 15px; }

	section.cover { padding-bottom: 100px; }

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

	h1, h1 * { font-size: 30px; }
	h2, h2 * { font-size: 50px; }
	h3, h3 * { font-size: 22px; }

	.button { font-size: 18px; padding: 10px 30px 10px 30px; }

}
@media (max-width: 768px) {



}
@media (max-width: 576px) {

	

}