:root {

--color-def: 		#151513;
--color-piros: 		#CB4252;
--color-sarga: 		#EFBF04;


--font-title: 'Anton';

}


html, body { width: 100%; margin: 0px; padding: 0px; }
body { position: relative; }
body, body * { font-family: 'Jost', sans-serif; transition: all .5s; font-size: 20px; line-height: 110%; font-weight: 300; color: #fff; }
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: 0px; }
a { text-decoration: none; margin: 0px; padding: 0px; color: unset; cursor: pointer; }
a:hover { color: unset; }


small, .small { font-size: 12px; line-height: 15px; display: inline-grid; }

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

body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/img/bg.webp'); background-size: cover; z-index: -1; /* Ensures it stays behind content */ }

.piros { color: var(--color-piros); }
.sarga { color: var(--color-sarga); }
.def { color: var(--color-def); }
.feher { color: #fff; }

.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; }


h1, h1 * { font-family: var(--font-title); font-size: 40px !important; color: #fff; }
h2, h2 * { font-size: 30px !important; color: var(--color-sarga); }


.w-35 { width: 35%; }



.btn { border-radius: 25px; font-style: italic; color: var(--color-def); padding: 10px 30px 10px 30px; text-transform: uppercase; font-weight: 400; font-size: 24px; text-transform: uppercase; max-width: fit-content; box-shadow: unset !important; min-width: fit-content; background-color: var(--color-def) !important; color: #fff; border: unset !important; }

.btn.piros { background-color: var(--color-piros) !important; }

.btn.h-sarga:hover { background-color: var(--color-sarga) !important; color: #fff !important; }
.btn.h-feher:hover { background-color: #fff !important; color: var(--color-def) !important; }
.btn.h-fekete:hover { background-color: var(--color-def); !important; color: #fff !important; }

.btn[disabled] { opacity: .5; }
.btn:active { transform: scale(.9); }


.form-control { height: 40px; box-shadow: unset !important; border: 1px solid #fff; border-radius: 20px; color: var(--color-def); }
.form-control:focus { border: 1px solid var(--color-def); }
::placeholder { color: #B3B3B3 !important; opacity: 1; }
::-ms-input-placeholder { color: #B3B3B3 !important; }

.form-check-input { width: 20px; height: 20px; min-width: 20px; min-height: 20px; border: unset; !important; box-shadow: unset !important; }
.form-check-input[type="checkbox"] { border-radius: 20px; }
.form-check-input[type="checkbox"]:checked { box-shadow: unset !important; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Ccircle style='fill:%231a1a1a;' cx='12' cy='12.4' r='9.5'/%3E%3C/svg%3E"); }


.cover { margin-top: 100px; }



header { height: 80px; width: 100%; background-color: var(--color-sarga); position: fixed; top: 0px; left: 0px; z-index: 1; }
header img.logo { height: 35px; }
header a { color: #fff; }
header button { width: 50px; height: 50px; background: unset; border: unset; background-image: url(/img/hamburger.webp); background-position: center; background-repeat: no-repeat; background-size: 100%; position: fixed; top: 0px; right: 0px; z-index: 3; }
header.show button { background-image: url(/img/hamburger-x.webp); }
header nav img { width: 250px; }

.nyil { width: 30px; }

.m-inner-1 { margin-left: -50px; }
.m-inner-2 { margin-left: -80px; }

#jatek-container { position: relative; width: 100%; height: 100%; min-height: 650px; background-color: var(--color-sarga); border-radius: 20px; display: flex; align-items: center; justify-content: center; }

#jatek-container ul { width: 100%; display: none; justify-content: center; list-style-type: none; position: absolute; top: 3rem; left: 0px; }


#jatek-container[data-step] [data-step-area] { display: none; }

#jatek-container[data-step="bevezeto"] [data-step-area="bevezeto"] { display: flex; }

#jatek-container[data-step="regisztracio"] [data-step-area="regisztracio"] { display: flex; height: 100%; padding: 7rem 3rem 3rem 3rem; }

#jatek-container[data-step="jatek"] { background-image: url(/img/box-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover; }
#jatek-container[data-step="jatek"] [data-step-area="jatek"] { height: 100%; padding: 7rem 3rem 3rem 3rem; }
#jatek-container[data-step="jatek"] [data-step-area="jatek"].show { display: flex; }

#jatek-container[data-step="jatek"] label { width: 100%; aspect-ratio: 16 / 9; background: #fff; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: var(--color-def); cursor: pointer; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; border: 1px solid #fff; }
#jatek-container[data-step="jatek"] .btn-check:hover+label { border: 1px solid var(--color-def); }
#jatek-container[data-step="jatek"] .btn-check:checked+label { border: 1px solid var(--color-def); background-color: var(--color-def); color: var(--color-sarga); }


#jatek-container[data-step="jatek"] ul, #jatek-container[data-step="regisztracio"] ul { display: flex; }
#jatek-container ul li { width: 25px; height: 25px; border-radius: 25px; border: 1px solid var(--color-def); margin-left: 10px; margin-right: 10px; }
#jatek-container ul li.active { background-color: var(--color-def); }

#jatek-container[data-step="jatek"] .curve { width: 100px; height: 100px; background-image: url(/img/curve.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; display: flex; justify-content: center; align-items: center; font-size: 60px; z-index: 1; }

#jatek-container[data-step="eredmeny"] .curve { width: 100px; height: 100px; background-image: url(/img/curve.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; display: flex; justify-content: center; align-items: center; font-size: 35px; z-index: 1; }
#jatek-container[data-step="eredmeny"] .curve2 { width: 100px; height: 100px; background-image: url(/img/curve2.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; display: flex; justify-content: center; align-items: center; font-size: 35px; z-index: 1; }

#jatek-container[data-step="eredmeny"] { background-image: url(/img/box-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover; }
#jatek-container[data-step="eredmeny"] [data-step-area="eredmeny"] { height: 100%; padding: 3rem 3rem 3rem 3rem; }
#jatek-container[data-step="eredmeny"] [data-step-area="eredmeny"].show { display: flex; }






footer { background: #CB4252; background: linear-gradient(90deg,rgba(203, 66, 82, 1) 0%, rgba(0, 0, 0, 1) 100%); }
footer img.logo { height: 35px; }


@media (max-width: 1400px) {

	.container { max-width: 100%; }

}


@media (max-width: 1200px) {



}

@media (max-width: 992px) {

	header { height: 50px; }
	header img.logo { height: 20px; }
	header nav { position: fixed; top: 50px; left: -150%; width: 100%; height: calc( 100% - 50px ); background-color: var(--color-sarga); }
	header.show nav { left: 0px; }
	header a { font-size: 24px; }

	footer img.logo { height: 20px; }
}


@media (max-width: 768px) {

	body * { font-size: 16px; }

}


@media (max-width: 576px) {

	.btn { width: 100%; max-width: unset; }

}