:root {

--color-def: 		#fff;
--color-bg: 		#FF3364;
--color-black: 		#193938;
--color-brown:		#D2B097;
}


html, body { width: 100%; min-height: 100%; margin: 0px; padding: 0px; position:relative; }
body { background-color: var(--color-bg); position: relative; background-image: url(/img/bottom_bg.webp); background-repeat: no-repeat; background-size: 100%; background-position: bottom center; }
body, body * { font-family: 'Aktiv Grotesk', sans-serif; transition: all .5s; font-size: 16px; line-height: 120%; 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; }

img.background { position: absolute; z-index: 0; width: 100% }
.position-relative { z-index: 1; }

.bold { font-weight: bold; }

.black { color: var(--color-black); }
.green { color: var(--color-bg); }
.brown { background-color: var(--color-brown)!important; }

.button { background-color: var(--color-black); font-size: 20px; line-height:  20px; text-transform: uppercase; color: #fff !important; border: unset; border-radius: 30px; padding: 12px 30px 10px 30px; width: fit-content; }
.button:hover { background-color: #193938; color: #fff; }
.button.inv { background-color: #193938; color: #fff; }
.button.inv:hover { background-color: var(--color-black); color: #fff; }

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

h1, h1 * { font-family: 'Agbalumo'; color: var(--color-def); font-size: 45px;  }
h1 span { color: var(--color-brown); }

h2 { font-family: 'Agbalumo'; font-size: 40px; }
h3, h3 * { font-family: 'Agbalumo'; font-size: 25px; }
h3 span { color: var(--color-bg)!important; }
h4 { font-size: 20px; font-weight: 500; margin-top: 30px; margin-bottom: 15px; }

.directone { display: flex; align-items: center; height: 50px; }
.directone img { height: 20px; margin-left: 6px; margin-right: 6px; }
.directone p { font-size: 11px; line-height: 11px; font-weight: 300; margin: 0px; margin-top: 6px; }

.hero { min-height: 100vh; margin-bottom: 100px; }
.hero .w { width: 50%; }



/*.box { background-color: #E0EEED; border-radius: 25px; padding: 20px; display: flex; justify-content: center; }*/
.box { padding: 20px; display: flex; justify-content: center; }
.box img { width: 100%; }


.jatek { min-height: 100vh; margin-top: 100px; }


[area] .row { padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); }
[area] .area { position: relative; border-top-left-radius: 25px; border-bottom-left-radius: 25px; padding: 30px; background-color: #E0EEED; }
[area] .area * { color: #193938; }
[area] .area.open { border-top-left-radius: 25px; border-bottom-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; }

[area] [data-query] .area { background-color: var(--color-bg); }
[area] [data-query] .area * { color: #fff; }

[area] .pic { position: relative; display: flex; flex-direction: column; justify-content: start; align-items: center; padding: 0px; background-color: #D2B097; border-top-right-radius: 25px; border-bottom-right-radius: 25px; }
[area] .pic img:nth-child(1) { position: absolute; z-index: 2; top: 0px; width: 200px; }
[area] .pic img:nth-child(2) { position: relative; z-index: 1; width: 250px; height: 340px; border: 10px solid #fff; box-shadow: 0 .5rem .5rem rgba(0,0,0,.7) !important; margin: 93px 50px 30px 50px; object-fit: cover; object-position: center; }


.form-check-input { margin-top: unset; background: transparent; border: 1px solid #193938; box-shadow: none !important; width: 1em !important; height: 1em; min-width: 1em !important; min-height: 1em; }
.form-check { display: flex; min-height: unset; padding-left: unset; margin-bottom: unset; align-items: center; margin-bottom: 15px; align-items: start; }
.form-check .form-check-input { float: unset; margin-left: 12px; margin-right: 8px; }
.form-check-label { margin-bottom: -3px; }
.form-check-input:checked[type="checkbox"], .form-check-input:checked[type="radio"] { background: unset !important; background-color: var(--color-bg) !important; border: 1px solid var(--color-bg); }
[area] [data-query] .area .form-check-input:checked[type="checkbox"], 
[area] [data-query] .area .form-check-input:checked[type="radio"] { background: unset !important; background-color: #193938 !important; border: 1px solid #193938; }

.form-control { color: #403f3f !important; background-color: #fff; border: unset; border-radius: 25px; box-shadow: none !important; }

.form-control::-webkit-input-placeholder { color: #403f3f;}
.form-control::-moz-placeholder { color: #403f3f;}
.form-control:-ms-input-placeholder { color: #403f3f;}
.form-control::-ms-input-placeholder { color: #403f3f;}
.form-control::placeholder { color: #403f3f;}


footer { background-color: #193938; padding: 20px; }
footer img { height: 20px; margin-left: 6px; margin-right: 6px; }

footer a { color: var(--color-bg); font-size: 12px; margin: 3px; }
footer p { font-size: 11px; line-height: 11px; font-weight: 300; margin: 0px; margin-top: 6px; }
footer a { color: #E5E2D7; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }



.szerzodesszamos { width: 100%; height: 100%; min-height: 100vh; background-image: url(/img/szerzodesszamos-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; }
.szerzodesszamos .image { width: 200px; }
.szerzodesszamos .area { min-height: 300px; border-top-left-radius: 25px; border-bottom-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; padding: 30px; background-color: #E0EEED; }
.szerzodesszamos label { color: #193938; }






@media (max-width: 992px) {

	h1, h1 * { font-size: 35px; }
	h2 { font-size: 25px; }

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

	.box img { max-width: 80%; }

	[area] .area-1 { border-top-left-radius: 25px; border-bottom-left-radius: 0px; border-top-right-radius: 25px; padding: 20px; }
	[area] .pic { border-top-right-radius: 0px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }

}

@media (max-width: 1200px) {

	.hero .w { width: 90%; }

}

@media (max-width: 1400px) {

	.container { max-width: 100%; }

}