:root {

--color-def: 		#fff;
--color-red: 		#ff1054;
--color-gray: 		#4c4a4a;

}


html, body { width: 100%; margin: 0px; padding: 0px; }
body { background-color: #302e2e; position: relative; background-image: url(/img/bg.jpg); background-position: bottom center; background-size: 100%; background-repeat: no-repeat; }
body, body * { font-family: 'Open Sans', sans-serif; transition: all .5s; font-size: 15px; line-height: 130%; font-weight: 400; 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: unset; }

small, .small { font-size: 12px; }

b, .bold { font-weight: 800; }



.button { font-family: 'Permanent Marker'; border-radius: 25px; padding: 20px 45px 25px 45px; font-size: 25px; line-height: 1px; background: unset; border: unset; box-shadow: unset; height: fit-content; display: flex; align-items: center; }
.button.red { background-color: var(--color-red); color: #fff; }
.button.line { border: 2px solid #fff; color: #fff; }


.cover { width: 100%; height: 100vh; background-image: url(/img/kep.png); background-size: cover; background-position: bottom center; position: relative; background-repeat: no-repeat; }
.cover .szalag { position: absolute; top: 0px; left: 0px; max-width: 50%; }
.cover .logo { max-width: 40%; width: 200px; }
.cover .img { max-width: 90%; width: 600px; }
.cover .title { max-width: 70%; width: 400px; }

.cover .button { padding: 4px 45px 5px 45px; }
.cover .button::after { content:''; display: block; width: 38px; height: 39px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 38.5 39.8'%3E%3Cpath style='fill: %23fff;' d='M19.4,0l-3.8.9-3.7.9-3.2,2-3.2,2.1-2.2,3.1-1.7,3.4-1.5,3.5.3,3.9v3.8c.1,0,.7,3.8.7,3.8l1.8,3.5,2.6,2.9,3,2.4,3.5,1.7,3.7.8,3.8,1,3.7-1.2,3.8-.7,3.3-1.9,3.2-2.2,2-3.3,2.4-3.1.6-3.8.3-3.8-.4-3.7-.8-3.7-1.8-3.3-2.1-3.3-3.3-2-3.2-2-3.7-1.1-3.8-.6ZM29.6,21l-3.3,2.5-3.7,1.9-3.5,2.3-3.8,1.7-2.4-1.2v-4.1c-.1,0,.3-4.1.3-4.1l-.7-4.1.3-4.1,2.4-1.1,3.5,2.1,3.7,1.9,3.6,2,3.7,1.9v2.5Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; margin-left: 10px; }


h2 { font-family: 'Permanent Marker'; font-size: 40px; }
h3 { font-size: 20px; font-weight: 700; }
h3 span { font-size: 20px; font-weight: 400; color: var(--color-red); }


form { display: contents; }


.area { background-color: var(--color-gray); border-radius: 35px; width: 100%; position: relative; }
.area .loader { background-color: var(--color-gray); border-radius: 35px; width: 100%; position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; height: 100%; }

.area[data-area="2"] { height: 600px; }
.area[data-area="1"] { padding-bottom: 30px; }
.area[data-area="3"] { padding-bottom: 30px; }

.form-check-label { font-size: 15px; }
.form-check-label a { font-size: 15px; text-decoration: underline; }
.form-check-input { width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin-top: 0px; background: unset !important; background-size: 80% !important; background-repeat: no-repeat !important; background-position: center !important; border: 1px solid #fff !important; border-radius: 30px !important; box-shadow: unset !important; }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23fff;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23fff;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }

.form-control { border-radius: 30px; font-size: 14px; }

.form-check { display: block; padding-left: unset; margin-bottom: unset; }
.form-check .form-check-input { float: unset; margin-left: unset; }

.invalid-feedback { color: #fac814; }


.area .counter { width: 100%; padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: center; list-style-type: none; position: absolute; top: 50%; }
.area .counter li { width: 32px; height: 32px; background-size: 80% !important; background-repeat: no-repeat; background-position: center; border: 1px solid #fff; border-radius: 30px; margin-right: 10px; margin-left: 10px; }
.counter[data-ct="1"] li:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23ff1054;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }
.counter[data-ct="2"] li:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23ff1054;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }
.counter[data-ct="3"] li:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23ff1054;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }
.counter[data-ct="4"] li:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23ff1054;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }
.counter[data-ct="5"] li:nth-child(5) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle style='fill: %23ff1054;' cx='12' cy='12' r='12'/%3E%3C/svg%3E") !important;  }


.area .area-step { width: 100%; border-radius: 35px; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; }
.area .area-step .kep-container { width: 100%; height: 65%; border-radius: 35px; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; }
.area .area-step .kep-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: none; }
.area .area-step .szavazas { width: 100%; height: 35%; display: flex; align-items: center; justify-content: center; }
.area .area-step .szavazas p { font-family: 'Permanent Marker'; margin-left: 30px; margin-right: 30px; margin-top: 10px; margin-bottom: 10px; font-size: 20px; }
.area .area-step .szoveg { width: 100%; height: fit-content; flex-direction: column; align-items: center; justify-content: center; padding: 30px; display: none; }
.area .area-step .szoveg p { font-size: 13px; text-align: center; margin-bottom: 20px; }
.area .area-step.step .szavazas { display: none; }
.area .area-step.step .szoveg { display: flex; }
.area .area-step.step .kep-container img { display: block; }


footer { margin-top: 100px; }
footer .line-1 { border-right: 4px solid #fff; }
footer .line-2 { border-right: 4px solid #fff; }


@media (max-width: 1200px) {

	.container { max-width: 100%; }

}

@media (max-width: 992px) {

	.button { padding: 18px 35px 20px 35px; font-size: 20px; }

	footer .line-2 { border-right: unset; }
}


@media (max-width: 768px) {

	h2 { font-size: 33px; }

	.cover { background-image: url(/img/kep-mobil.png); background-size: 100%; }

	.area .area-step .kep-container { height: 50%; margin-top: 70px; }
	.area .counter { top: 0px; }

	.area .area-step .szavazas { flex-direction: column; }

	.area[data-area="2"] { height: 630px; }

	.area .area-step .kep-container { border-radius: 15px; }


}

@media (max-width: 576px) {

	.area .area-step .kep-container { height: 220px; }


	
}