:root {

--color-blue: 		#303d5b;
--color-white: 		#f2f2f2;
--color-red: 		#ff4851;
--color-yell: 		#EBA756;

}


html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { background-color: var(--color-white); position: relative; }
body, body * { font-family: 'Archivo', sans-serif; transition: all .5s; font-size: 17px; line-height: 130%; font-weight: 400; color: var(--color-blue); }
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; }

strong { font-weight: 700; }

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

.mt-100 { margin-top: 100px; }

.nav-container-wrap { width: fit-content; position: relative; }
.nav-container-wrap::after { content:' '; background-color: var(--color-blue); clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); width: 100%; height: 100%; position: absolute; top: 6px; left: 6px; z-index: 1; }
.nav-container { background-color: #fff; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); width: fit-content; padding: 15px 15px 40px 15px; position: relative; z-index: 2; }
nav { display: flex; flex-direction: column; align-items: center; border-top: 6px solid var(--color-blue); padding-top: 13px; margin-bottom: 20px; }
nav a { font-size: 12px; text-transform: uppercase; line-height: 25px; color: var(--color-blue); font-weight: 500; text-align: center; }
nav a:hover { color: var(--color-red); }

.btn { font-family: 'Alfa Slab One'; color: #fff; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; border: unset; border-radius: unset; }
.btn:hover { color: #fff; background-color: var(--color-red); box-shadow: unset; }


[loader] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
[loader] i { font-size: 50px; color: var(--color-white); }


h1, h2 { font-family: 'Alfa Slab One'; font-size: 33px; text-transform: uppercase; margin-bottom: 20px; }
h5 { font-size: 20px; margin-bottom: 20px; font-weight: 700; }
.white h2, .white h5, .white p, .white strong, .white label { color: var(--color-white); }

.text-start h1, .text-start h2 { padding-left: 20px; border-left: 8px solid var(--color-blue); }
.text-start.white h1, .text-start.white h2 { padding-left: 20px; border-left: 8px solid var(--color-white); }


.pl.btn p { transform: skew(15deg); font-family: 'Alfa Slab One'; color: #fff; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; border: unset; border-radius: unset; margin: unset; }
.pl.btn { height: 45px; display: flex; align-items: center; }
.pl.btn:hover.inv-w { background-color: var(--color-red); }
.pl.btn:hover.inv-w p { color: #fff; }
.pl.btn.inv-w { background-color: var(--color-white); }
.pl.btn.inv-w p { color: var(--color-blue); }

.pl { background-color: var(--color-blue); transform: skew(-15deg); position: relative; z-index: 2; box-shadow: 4px 4px var(--color-red); }
.pl.inv { background-color: var(--color-red); box-shadow: 4px 4px var(--color-white); }
.pl.m { margin-left: 20px; margin-right: 30px; }
.pl .c { transform: skew(15deg); padding: 30px 100px 20px 80px; }


header { position: absolute; z-index: 9; width: 100%; }

header .directone { background-color: var(--color-blue); transform: skew(-15deg); display: flex; align-items: flex-end; padding: 10px; width: fit-content; height: fit-content; margin-top: 20px; }
header .directone span { color: #fff; margin-right: 10px; margin-left: 10px; font-size: 10px; }


section.header { background-repeat: no-repeat; background-position: top right; background-size: cover; width: 100%; height: 70vh; border-bottom-left-radius: 50% 15%; border-bottom-right-radius: 50% 15%; position: relative; background-color: var(--color-blue); }
section.header img { width: 100%; height: auto; object-fit: contain; object-position: center; position: relative; z-index: 1; }
section.header .btn { }
.header-arrow { width: 100%; display: flex; justify-content: center; rotate: 90deg; }
.header-arrow svg path { fill: var(--color-blue); }


svg { max-width: 32px; max-height: 70px; }


.background { width: 100%; background-image: url(/images/background.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; overflow: hidden; }
.grdtop {  background: -moz-linear-gradient(top,  rgba(247,247,237,1) 0%, rgba(247,247,237,0) 100%); background: -webkit-linear-gradient(top,  rgba(247,247,237,1) 0%,rgba(247,247,237,0) 100%); background: linear-gradient(to bottom,  rgba(247,247,237,1) 0%,rgba(247,247,237,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7ed', endColorstr='#00f7f7ed',GradientType=0 ); height: 100px; }
.grdbottom { background: -moz-linear-gradient(top,  rgba(247,247,237,0) 0%, rgba(247,247,237,1) 100%); background: -webkit-linear-gradient(top,  rgba(247,247,237,0) 0%,rgba(247,247,237,1) 100%); background: linear-gradient(to bottom,  rgba(247,247,237,0) 0%,rgba(247,247,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f7f7ed', endColorstr='#f7f7ed',GradientType=0 ); height: 100px; }



.carousel-inner { width: 80%; }
.carousel svg path { fill: var(--color-blue); }
.carousel-control-next, .carousel-control-prev { opacity: 1; }
.carousel-control-next:hover svg path, .carousel-control-prev:hover svg path { fill: var(--color-red); opacity: 1; }
.carousel-control-prev svg { rotate: 180deg; }


.hamarosan, .lezajlott { position: relative; }
.hamarosan img, .lezajlott img { position: relative; z-index: 1; opacity: .3; }
.hamarosan::before { content: ' '; width: 100%; height: 100%; position: absolute; z-index: 2; background-image: url(/images/hamarosan.png); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.lezajlott::before { content: ' '; width: 100%; height: 100%; position: absolute; z-index: 2; background-image: url(/images/lezajlott.png); background-repeat: no-repeat; background-position: center; background-size: 100%; }







.form-check-input:checked { background-color: var(--color-white); border-color: var(--color-white); }
.form-check-input:checked[type="radio"] { background-image: url("/img/checked.svg"); }
.form-check-input[type="radio"] { border-radius: unset; background-color: unset !important; background-image: url(/img/checkbox.svg); background-repeat: no-repeat; background-position: right bottom; }
.form-check-input:checked[type="checkbox"] { background-image: url("/img/checkedbox.svg"); }
.form-check-input[type="checkbox"] { border-radius: unset; background-color: unset !important; background-image: url(/img/checkbox.svg); background-repeat: no-repeat; background-position: right bottom; }
.form-check-input { border: unset; width: 20px; height: 20px; margin-top: -3px; }
.form-check .form-check-input { margin-left: -1.8em; }
.form-check-input { box-shadow: none !important; }

.form-check-label { font-weight: 700; }

.form-control { transform: skew(-15deg); border: unset; border-radius: unset; }

form button.stepbutton { font-family: 'Alfa Slab One'; color: var(--color-white); text-transform: uppercase; font-size: 18px; letter-spacing: 2px; border: unset; background: unset; opacity: .4; position: relative; }
form button.stepbutton.active { opacity: 1; }
form button.stepbutton svg { width: 18px; margin-left: 10px; }
form button.stepbutton svg path { fill: var(--color-white); }

.figyelmeztetes { position: relative; }
.figyelmeztetes::after { content:'Kérlek válassz!'; position: absolute; background-color: var(--color-red); transform: skew(-15deg); display: flex; align-items: flex-end; padding: 5px; width: fit-content; height: fit-content; font-size: 12px; font-weight: 700; color: #fff; right: 0px; bottom: -20px; }






.step { max-height: fit-content; overflow: unset; opacity: 1; }
.stephide { max-height: 0px; overflow: hidden; opacity: 0; }

.pe-max { padding-right: 400px; }

footer svg { max-width: 100%; width: 100%; max-height: 88px; height: auto; fill: var(--color-blue); position: relative; bottom: -1px; }
footer .content { background-color: var(--color-blue); }
footer .directone { background-color: var(--color-red); transform: skew(-15deg); display: flex; align-items: flex-end; padding: 10px; width: fit-content; height: fit-content; margin-top: 20px; }
footer .directone span { color: #fff; margin-right: 10px; margin-left: 10px; font-size: 10px; }
footer a { color: var(--color-white); }
footer a:hover { color: var(--color-red); }



@media (max-width: 1200px) {

	.container { max-width: 100%; }

}

@media (max-width: 992px) {

	h1, h2 { font-size: 27px; }

	section.header { min-height: 500px; }

	section.header { background-position: top right -100px; }

	.btn { font-size: 11px; }
	.pl.btn p { transform: unset; }

	.directone { display: block; }

	.pl { background-color: var(--color-blue); transform: unset; position: relative; z-index: 2; box-shadow: 7px 7px var(--color-red); }
	.pl p { transform: unset; }
	.pl.m { margin-left: 0px; margin-right: 0px; }
	.pl .c { transform: unset; padding: 40px 20px 20px 20px; }

	.pe-max { padding-right: 0px; }

}