html, body { width: 100%; height: 100%; }
body { background-color: #1E1E1E; position: relative; width: 100%; height: 100%; }
body, body * { cursor: default; }
p, a, ul, li { margin: 0px; padding: 0px; }
a { text-decoration: none; margin: 0px !important; padding: 0px !important; color: unset; cursor: pointer; }
a:hover { color: unset; }
:focus { outline: none !important; box-shadow: unset !important; border: none; !important; }

.modal-dialog img { width: 70%; height: 70%; object-fit: contain; object-position: center; }

.p-1 { padding: .15rem !important; }

/* *** */
._zindex { z-index: -1; }

/**********************************************************/

.fullscreen-button { width: 48px; height: 48px; background-repeat: no-repeat; background-size: 100% 100%; position: fixed; z-index: 99999; right: 25px; bottom: 25px; cursor: pointer; opacity: 0; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); pointer-events: auto !important; }

/**********************************************************/

.play-button { width: 180px; height: 120px; background: unset; border: unset; background-image: url( '../img/play.svg' ); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; margin-top: 35px; position: relative; }
.play-button::after { background-image: url( '../img/playhover.svg' ); background-repeat: no-repeat; background-size: 100% 100%; width: 100%; height: 100%; content: ''; position: absolute; top: 0px; left: 0px; opacity: 0; transition: all .5s; }
.play-button:hover::after { opacity: 1; transition: all .5s; }
.play-button p { font-family: var(--font-title-primary) !important; color: #fff !important; font-size: 20px !important; line-height: 24px !important; font-weight: 500 !important; bottom: -35px; position: absolute; }

/**********************************************************/

.kiindulas { background: var(--bg); width: 100%; height: 100%; position: fixed; top: 0px; z-index: 9999999; transition: all .5s; padding: 25px; }
.kiindulas.hide { top: -100%; transition: all .5s; }
.kiindulas h1 { max-width: 1000px; width: auto; color: #fff; font-family: var(--font-title-primary); font-size: 42px; line-height: 63px; font-weight: 600; }
.kiindulas p { max-width: 750px; width: auto; color: #fff; font-family: var(--font-title-primary); font-size: 20px; line-height: 24px; font-weight: 500; }

/**********************************************************/

.zaro { background: var(--bg); width: 100%; height: 100%; position: absolute; top: -100%; z-index: 9999999; transition: all .5s; padding: 25px; }
.zaro.show { top: 0; transition: all .5s; }
.zaro .box { max-width: 360px; width: 100%; background-color: #fff; border-radius: 20px; background: rgb(170,207,41); background: -moz-linear-gradient(90deg, var(--box-g) 0%, var(--box-g) 24px, var(--box-bg) 24px, var(--box-bg) 100%); background: -webkit-linear-gradient(90deg, var(--box-g) 0%, var(--box-g) 24px, var(--box-bg) 24px, var(--box-bg) 100%); background: linear-gradient(90deg, var(--box-g) 0%, var(--box-g) 24px, var(--box-bg) 24px, var(--box-bg) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aacf29",endColorstr="#ffffff",GradientType=1); }
.zaro .box > div { width: 100%; }
.zaro h2 { color: #555; font-family: var(--font-title-primary); font-size: 36px; line-height: 54px; font-weight: 600; }
.zaro p { color: #555; font-family: var(--font-title-primary); font-size: 20px; line-height: 32px; font-weight: 400; }
.zaro p span { color: #555; font-family: var(--font-title-primary); font-size: 24px; line-height: 32px; font-weight: 600; }
.zaro ._btn { width: 100%; }
.zaro .box-buton-container { display: flex; flex-direction: column; }

/**********************************************************/

.headline { padding: 18px; height: 140px; width: 100%; position: fixed; left: 0px; top: 0px; z-index: 9999; opacity: 0; }
.headline div:nth-child(1) { max-width: 70%; }
.headline h1 { font-family: var(--font-title-primary); font-size: 24px; font-weight: 500; line-height: 36px; color: var(--headline-text-1); }
.headline h2 { font-family: var(--font-title-primary); font-size: 24px; font-weight: 600; line-height: 28px; color: var(--headline-text-2); }
.headline .ido { font-family: var(--font-title-primary); font-size: 36px; font-weight: 600; line-height: 36px; color: var(--headline-text-2); height: fit-content; top: 40px; position: relative; }
/* *** */
.footline { width: 100%; position: fixed; left: 0px; bottom: 0px; padding-bottom: 20px; z-index: 9999; opacity: 0; pointer-events: none; }
.footline ._btn { margin-bottom: 10px; pointer-events: auto !important; }

/**********************************************************/

.form-check-input { width: 36px; height: 36px; margin: unset !important; border: unset !important; border-radius: unset !important; background: transparent; background-image: url( '../img/form-check.svg' ); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; }
.form-check-input:checked { width: 36px; height: 36px; margin: unset !important; border: unset !important; border-radius: unset !important; background: transparent; background-image: url( '../img/form-check-select.svg' ) !important; background-repeat: no-repeat; background-position: center; background-size: contain; }
/* *** */
.form-check-input.true { background-image: url( '../img/form-check-select-error.svg' ) !important; }
.helytelen .form-check-input:checked { background-image: url( '../img/form-check-select-error-checked.svg' ) !important; }
/* *** */
.helytelen::after { width: 40px; height: 40px; background-image: url( '../img/helytelen.svg' ); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; content: ''; top: -12px; right: -12px; opacity: .9; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; border-radius: 25px; z-index: 1; } 
/* *** */
.helyes::after { width: 40px; height: 40px; background-image: url( '../img/pipa.svg' ); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; content: ''; top: -12px; right: -12px; opacity: .9; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; border-radius: 25px; z-index: 1; } 
/* *** */
.check-area div { width: 50%; }
.check-area p { font-family: var(--font-primary); font-size: 16px; line-height: 18px; font-weight: 700; }
/* *** */
figure { position: relative; margin: 0px; }
figure img { position: relative; }
figure button { background: unset; border: unset; margin: 0px; padding: 0px; width: 24px; height: 24px; background-color: #fff; border-radius: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); background-image: url( '../img/view.svg' ); background-position: center; background-repeat: no-repeat; position: absolute; right: 5px; bottom: 5px; z-index: 2; }
[data-bs-dismiss="modal"] { position: absolute; top: 10px; right: 10px; font-size: 20px; color: #fff; line-height: 20px; }
.modal-fullscreen { justify-content: center; }
.modal { z-index: 9999999; }
.modal-backdrop { z-index: 999999; }
/* *** */
button.info { background: unset; border: unset; margin: 0px; padding: 0px; width: 40px; height: 40px; background-color: #009dff; border-radius: 50%; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); background-image: url( '../img/i.svg' ); background-position: center; background-repeat: no-repeat; position: absolute; left: 15px; top: 15px; z-index: 999999; display: none; opacity: 0; }

/**********************************************************/

.game-container { position: relative; padding: 25px 15px 100px 15px; background-attachment: fixed; width: 100%; height: 100%; overflow: hidden; opacity: 0; }

/*********************************************************
 * 
 * IGAZ-HAMIS */

.igaz-hamis { position: relative; }
.igaz-hamis .box-area { width: 50%; max-width: 681px; }

/* *** */
.igaz-hamis .box-row { position: relative; padding: 20px; font-family: var(--font-primary); font-weight: 700; font-size: 16px; line-height: 18px; color: #fff; display: flex; flex-direction: row; justify-content: space-between; }
.igaz-hamis .box-row > p { max-width: 60%; }
.igaz-hamis .box-row .check-area { width: 40%; }
.igaz-hamis .box-row:not(:last-child)::before { content:''; position: absolute; bottom: 0px; left: 0px; width: 100%; border-bottom: 2px dashed #FFFFFF; }
/* *** */
.igaz-hamis .box-row-head { padding-right: 20px; width: 100%; position: absolute; top: -70px; border: unset; height: 55px; display: flex; justify-content: end; }
.igaz-hamis .box-row-head .head-area { width: 39%; }
.igaz-hamis .box-row-head .head-area div { width: 50%; }
.igaz-hamis .box-row-head .head-area p { color: #353535; font-family: var(--font-primary); font-weight: 700; font-size: 20px; line-height: 24px; margin: 0px !important; }
/* *** *** *** *** *** *** */
.igaz-hamis .box-picture-row { flex-wrap: wrap; justify-content: flex-start; height: inherit; }
.igaz-hamis .box-picture-row .col { flex: 0 0 auto; width: 25%; display: flex; justify-content: center; padding-left: 7px; padding-right: 7px; }
/* *** */
.igaz-hamis .box-picture p { font-size: 16px; line-height: 18px; font-family: var(--font-primary); font-weight: 700; width: 60%; }
.igaz-hamis .box-picture figure { width: auto; }
.igaz-hamis .box-picture img { width: 136px; height: 75px; object-fit: contain; object-position: center; }
/* *** */
.igaz-hamis .box-picture.text { flex: 0 0 auto; width: 100%; max-width: 340px; margin-bottom: 15px; }
.igaz-hamis .box-picture.text img { width: 136px; height: 75px; object-fit: contain; object-position: center; }

.igaz-hamis .box-picture.image { flex: 0 0 auto; width: 100%; max-width: 260px; margin-bottom: 15px; }
.igaz-hamis .box-picture.image img { width: 100%; height: 105px; object-fit: contain; object-position: center; }


.igaz-hamis .box-picture .check-area { width: 100%; }
.igaz-hamis .box-picture .check-area p { width: 100%; }
/* *** */
.igaz-hamis .box-picture.text > div:first-child { border-bottom: 2px solid rgba(255, 255, 255, .4); }

/*********************************************************
 * 
 * HALMAZ */

 :root {

    --size-text-w: 200px;
    --size-text-h: 60px;

    --size-kep-w: 110px;
    --size-kep-h: 130px;

 }

.halmazok { height: 100%; }
.elem[data-x] { z-index: 2; }
.halmazok .elem * { cursor: pointer !important; }
.halmazok .elem.hidden { opacity: 0; }

.halmazok img { object-fit: contain; object-position: center; border-radius: 3px; }
.halmazok p { font-family: 'Roboto'; font-weight: 700; }

.halmazok .halmaz { padding: 4px; height: 100%; width: 100%; display: flex; flex-direction: column; }

.halmazlepteto { }
.halmazlepteto p { font-family: "Poppins"; font-size: 32px; line-height: 48px; font-weight: 500; color: var(--text-2); }

.halmazok .-halmaz-container { height: 100%; }
.halmazok .-halmaz-container .-halmaz-frame .row { flex-wrap: nowrap; }
.halmazok .-halmaz-container .-halmaz-frame .row .col { flex: 1 0 0%; }

.halmazok .elem { opacity: 1; transition: opacity .5s; position: relative; border: 2px solid transparent; border-radius: 3px; padding-left: 5px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); -webkit-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; cursor: pointer !important; }

/* *** */
.halmazok .halmaz .halmaz-container .elem.helytelen:after { width: 24px; height: 24px; z-index: 1; } 
.halmazok .halmaz .halmaz-container .elem.helyes:after { width: 24px; height: 24px; z-index: 1; } 
/* *** */
.halmazok .directshow { z-index: 1 !important; }
.halmazok .directshow .elem { opacity: 1 !important; }
.halmazok .directhide .elem { opacity: 0 !important; }

/* *** */
.halmazok .halmaz .halmaz-header { height: 48px; min-height: 48px; }
.halmazok .halmaz .halmaz-header p { font-size: 14px; line-height: 14px; height: 100%; }
.halmazok .halmaz .halmaz-header img { width: 100%; height: 100%; }
.halmazok .halmaz .halmaz-header p + img { width: 65px; max-width: 65px; height: 100%; }

._elemcontainer-frame { flex: 1 0 0%; }
.-halmaz-frame { flex: 1 0 0%; height: 100%; }

/* *** */
.halmazok .halmaz .halmaz-container { height: 100%; min-height: calc( var(--size-text-h) * 1.2 ); min-width: calc( var(--size-text-w) * .9 ); align-content: center; margin-top: 6px; padding: 4px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; }


/* *** 
#elemContainer.image .elem { height: 140px; min-height: 140px; }
#elemContainer.text .elem { height: 60px; min-height: 60px; }
#elemContainer .elem { height: 60px; min-height: 60px; }*/

/* *** SIZE *** */


#elemContainer .elem { width: calc( var(--size-text-w) * 1 ); height: calc( var(--size-text-h) * 1 ); }
.halmaz-container .elem { width: calc( var(--size-text-w) * .9 ); height: calc( var(--size-text-h) * .9 ); }

.halmazok .text .elem { width: calc( var(--size-text-w) * 1 ); height: calc( var(--size-text-h) * 1 ); }
#elemContainer.text .elem { width: calc( var(--size-text-w) * 1 ); height: calc( var(--size-text-h) * 1 ); }
.halmaz-container.text .elem { width: calc( var(--size-text-w) * .9 ); height: calc( var(--size-text-h) * .9 ); max-width: 100%; }

.halmazok .image .elem { width: calc( var(--size-kep-w) * 1 ); height: calc( var(--size-kep-h) * 1 ); }
#elemContainer.image .elem { width: calc( var(--size-kep-w) * 1 ); height: calc( var(--size-kep-h) * 1 ); }
.halmaz-container.image .elem { width: calc( var(--size-kep-w) * .9 ); height: calc( var(--size-kep-h) * .9 ); }


#elemContainer .col { padding: 3px; }
#elemContainer div.col { margin-bottom: 3px; }

#elemContainer .elem { display: flex; justify-content: space-between; }
#elemContainer .elem p { height: 100%; }
#elemContainer .elem img { object-fit: contain; object-position: center; width: 100%; height: 100%; }

#elemContainer .elem img.order-2 { width: 63px; max-width: 63px; height: 100%; right: 10px; }
#elemContainer .elem img + p { font-size: 14px; line-height: 14px; width: auto; }

/* *** */
#elemContainer .elem.helytelen:after { width: 24px; height: 24px; z-index: 1; } 
#elemContainer .elem.helyes:after { width: 24px; height: 24px; z-index: 1; } 


/* *** */
.halmazok .halmaz .halmaz-container.image { display: flex; flex-direction: row; justify-content: center; align-content: start; }
/* *** */
.halmazok .halmaz .halmaz-container .elem { margin: 3px !important; display: flex; justify-content: space-between; align-items: center; }
.halmazok .halmaz .halmaz-container .elem p { color: #fff !important; font-size: 14px; line-height: 14px; }
.halmazok .halmaz .halmaz-container .elem img.order-2 { width: 63px; max-width: 63px; height: 100%; }
.halmazok .halmaz .halmaz-container .elem img + p { font-size: 14px; line-height: 14px; width: auto; }
.halmazok .halmaz .halmaz-container .elem img { width: 100%; height: 100%; }


@media (max-width: 1024px) {

.halmazok { height: 100%; margin-top: 20px; }

._elemcontainer-frame { flex: 0 0 auto; width: 100%; }
.-halmaz-frame { flex: 0 0 auto; width: 100%; height: auto !important; }
.halmazok .-halmaz-container { height: auto; }
.halmazok .halmaz .halmaz-container { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; }

.halmazok .-halmaz-container .-halmaz-frame .row { flex-wrap: wrap; }
.halmazok .-halmaz-container .-halmaz-frame .row .col { flex: 0 0 auto; width: 50%; }

.halmazok .elem p { font-size: 14px; line-height: 14px; }
.halmazok .text .elem p { font-size: 14px; line-height: 14px; }


#elemContainer .elem { width: calc( var(--size-text-w) * .8 ); height: calc( var(--size-text-h) * .8 ); }
.halmaz-container .elem { width: calc( var(--size-text-w) * .6 ); height: calc( var(--size-text-h) * .6 ); }

.halmazok .text .elem { width: calc( var(--size-text-w) * .8 ); height: calc( var(--size-text-h) * .8 ); }
#elemContainer.text .elem { width: calc( var(--size-text-w) * .6 ); height: calc( var(--size-text-h) * .6 ); }
.halmaz-container.text .elem { width: calc( var(--size-text-w) * .6 ); height: calc( var(--size-text-h) * .6 ); }

.halmazok .image .elem { width: calc( var(--size-kep-w) * .8 ); height: calc( var(--size-kep-h) * .8 ); }
#elemContainer.image .elem { width: calc( var(--size-kep-w) * .9 ); height: calc( var(--size-kep-h) * .6 ); }
.halmaz-container.image .elem { width: calc( var(--size-kep-w) * .6 ); height: calc( var(--size-kep-h) * .6 ); }

.halmazok .halmaz .halmaz-container.image { justify-content: start; }

}

@media (max-width: 480px) {


#elemContainer { height: 100%; position: relative; }
#elemContainer div.col { position: absolute; width: 100%; height: 100%; display: none; align-items: center; }
#elemContainer div.col.show { display: flex; }
#elemContainer .elem { box-shadow: unset; }

.halmazok .halmaz .halmaz-container .elem p { font-size: 10px; line-height: 10px; }
.halmazok .halmaz .halmaz-container { min-width: unset; }

.halmazok .halmaz .halmaz-container { padding: 2px; }

#elemContainer .elem  p { font-size: 16px; line-height: 16px; }
#elemContainer .elem img + p { font-size: 16px; line-height: 16px; }

#elemContainer .elem { width: calc( var(--size-text-w) * 1 ); height: calc( var(--size-text-h) * 1 ); }
.halmaz-container .elem { width: calc( var(--size-text-w) * .75 ); height: calc( var(--size-text-h) * .75 ); }

#elemContainer.text .elem { width: calc( var(--size-text-w) * 1 ); height: calc( var(--size-text-h) * 1 ); }
.halmaz-container.text .elem { width: calc( var(--size-text-w) * .75 ); height: calc( var(--size-text-h) * .75 ); }

#elemContainer.image .elem { width: calc( var(--size-kep-w) * 1.38 ); height: calc( var(--size-kep-h) * .76 ); }
.halmaz-container.image .elem { width: calc( var(--size-kep-w) * .62 ); height: calc( var(--size-kep-h) * .35 ); }

._elemcontainer-frame { width: 50%; height: calc( ( var(--size-text-h) * 1 ) + 50px ); }

.halmazok .halmaz .halmaz-container .elem img.order-2 { width: 32px; max-width: 32px; }
.halmazok .halmaz .halmaz-container .elem img + p { font-size: 10px; line-height: 10px; }
#elemContainer .elem img.order-2 { width: 77px; max-width: 77px; }



}



/*********************************************************
 * 
 * KVÍZ */
.kviz { opacity: 0; max-height: 0px; overflow: hidden; transition: all .5s; }
.kviz.show { opacity: 1; max-height: unset; overflow: unset; }
.kviz.images .kerdes { width: 650px; max-width: 650px; height: fit-content; }
.kviz .kerdes p { font-family: var(--font-primary); font-size: 20px; font-weight: 700; }
.kviz .kerdes p:nth-child(1) { color: var(--text-3); }
.kviz .kerdes p:nth-child(2) { color: var(--text-2); text-transform: uppercase; margin-top: 2px; }
.kviz .kerdes img { width: 100%; max-height: 300px; object-fit: contain; object-position: center; margin-top: 15px; }
/* *** */
.kviz .valasz div, .kviz .valasz div * { cursor: pointer; }
/* *** */
.kviz .row div div { padding: 15px; margin-top: 15px; width: 100%; position: relative; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); }
.kviz.images .row div div { margin-top: 0px; }
.kviz .row div div p { font-family: var(--font-primary); font-weight: 700; font-size: 18px; text-align: center; }
.kviz.images .row div div p { font-size: 16px; text-align: center; }
.kviz .row div div figure img { width: 100%; max-height: 112px; object-fit: contain; object-position: center; }
.kviz .row div div p + figure { margin-top: 15px; }
/* *** */
.kviz.images .row > div div { margin-bottom: 15px; }
.kviz .row > div:nth-child(odd) div { margin-right: 15px; }
.kviz .row > div:nth-child(even) div { margin-left: 15px; }
.kviz .row > div.col-xl-4:nth-child(odd) div { margin-right: 15px; margin-left: 15px; }
.kviz .row > div.col-xl-4:nth-child(even) div { margin-left: 15px; margin-right: 15px; }
.kviz.images .row > div div { margin-left: 15px; margin-right: 0px; }
/* *** */
.kviz .row div.selected div { animation: pulse 1s infinite; }
@keyframes pulse { 30% {transform: scale(1.02)} }

/**********************************************************/

.lepteto { position: fixed; left: 25px; bottom: 25px; }
.lepteto img { width: 28px; height: 24px; }
.lepteto img:first-child { margin-right: 15px; }
.lepteto img:last-child { margin-left: 15px; }
.lepteto p { font-family: var(--font-title-primary); font-size: 32px; line-height: 48px; font-weight: 500; color: #9B9B9B; }
.lepteto p:nth-child(1) { color: var(--text-2); }

/**********************************************************/

._btn { border-radius: 5px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); font-family: var(--font-title-primary); color: #fff; font-size: 20px; font-weight: 500; line-height: 24px; text-transform: uppercase; width: fit-content; padding: 12px 14px 12px 14px; border: unset; transition: all .5; height: fit-content; margin-right: 10px; margin-left: 10px; }
._btn.button-1 { background: var(--button-1); transition: all .5; } ._btn.button-1:hover { background: var(--button-1-h); transition: all .5; }
._btn.button-2 { background: var(--button-2); transition: all .5; } ._btn.button-2:hover { background: var(--button-2-h); transition: all .5; }
._btn.button-3 { background: var(--button-3); transition: all .5; } ._btn.button-3:hover { background: var(--button-3-h); transition: all .5; }

.zaro .box ._btn { width: 260px; }

/**********************************************************/


/* RESPO */

.mobil-show { display: none !important; }

@media (max-width: 980px) {


.headline { height: fit-content; min-height: unset; transition: all .5s; z-index: -1; }
.headline.show { min-height: unset; padding-left: 70px; z-index: 99991; }
.headline.show div:nth-child(1) { opacity: 1; height: auto; }
.headline.show .lepteto { opacity: 10; height: auto; }
.headline .lepteto { opacity: 0; height: 0px; }
.headline div:nth-child(1) { opacity: 0; height: 0px; transition: all .5s; }
.headline h1 { font-size: 16px; line-height: 16px; }
.headline h2 { font-size: 18px; line-height: 20px; }
.headline .ido { font-size: 28px; line-height: 28px; top: 0px; }
button.info { display: block; }
.headline.show button.info { display: none; }
/* *** */
.footline { top: 10px; bottom: unset; }
/* *** */
.igaz-hamis .box-row-head .head-area p { font-size: 18px; }
.igaz-hamis .box-picture-row .col { width: 50%; }

.igaz-hamis .box-picture p { width: 100%; }
.igaz-hamis .box-picture figure { width: 100%; display: flex; justify-content: center; }

}

@media (max-width: 480px) {

.mobil-show { display: block !important; }
.mobil-show.d-flex { display: flex !important; }

.igaz-hamis .box-row-head { display: none; }
.igaz-hamis .box-row { flex-direction: column; justify-content: space-between; }
.igaz-hamis .box-picture-row .col { width: 100%; }

}



@media (max-width: 1200px) {

.game-container { overflow-y: scroll; }

/* *** */
.kviz .kerdes { max-width: 100%; }
.kviz.images .kerdes { max-width: 100%; margin-right: 15px; }
/* *** */
.kviz.images .row div div { margin-left: unset; margin-right: unset; }
.kviz.images .row div:nth-child(odd) div { margin-right: 15px; }
.kviz.images .row div:nth-child(even) div { margin-left: 15px; }

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

/* *** */
.kviz .row div:nth-child(odd) div { margin-right: 0px; }
.kviz .row div:nth-child(even) div { margin-left: 0px; }
.kviz.images .row div:nth-child(odd) div { margin-right: 0px; }
.kviz.images .row div:nth-child(even) div { margin-left: 0px; }

.kviz .row div.col-6:nth-child(odd) div { margin-right: 5px; }
.kviz .row div.col-6:nth-child(even) div { margin-left: 5px; }
.kviz.images .row div.col-6:nth-child(odd) div { margin-right: 5px; }
.kviz.images .row div.col-6:nth-child(even) div { margin-left: 5px; }



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

/* *** */
.lepteto { position: relative; bottom: unset; left: unset; }

/* *** */
.kviz.images .kerdes { margin-right: 0px; margin-bottom: 15px; width: 100%; }



}


@media (max-width: 576px) {

/* *** */
.play-button { width: 120px; height: 80px; }
/* *** */
.zaro .box ._btn { width: 100%; margin-right: 0px; margin-left: 0px; }
/* *** */
.kiindulas h1 { font-size: 24px; line-height: 32px; }
.kiindulas p { font-size: 16px; line-height: 18px; }
/* *** */
.zaro .box { padding: 60px 16px 60px 40px; }
/* *** */
.lepteto p { font-size: 24px; line-height: 36px; }
/* *** */
.kviz .row div div { padding: 6px; }
.kviz .row div div p { font-size: 16px; }

}


@media screen and (max-width: 850px) and (orientation: landscape) {

.zaro .box { height: fit-content; max-height: 90%; max-width: fit-content; }
.zaro ._btn { width: fit-content !important; margin-top: 0px !important; white-space: nowrap; }
.zaro ._btn:first-child { margin-left: 10px; }
.zaro ._btn:last-child { margin-right: 10px; }
.zaro .box-buton-container { display: flex; flex-direction: row; }

}





/*********************************************************
 * 
 * SORREND */

.sorrend { margin-top: 10px; }
.sorrend .elem, .sorrend .elem * { cursor: pointer !important; }
.sorrend .elem { display: flex; flex-direction: column; -webkit-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; }

.sorrend .elem.textimage { justify-content: space-between; }
.sorrend .elem.text.image { justify-content: space-between; }
.sorrend .elem.text.noimage { justify-content: center; }
.sorrend .elem.notext.image { justify-content: center; align-items: center; }


.sorrend .sequencelist .elem.text.noimage { width: 210px; height: 180px; padding: 0px !important; align-items: center; }
.sorrend .sequencelist .elem.text.image { width: 210px; height: 200px; }
.sorrend .sequencelist .elem.textimage { width: 210px; height: 200px; }
.sorrend .sequencelist .elem.notext.image { width: 210px; height: 200px; }

.sorrend .sequencelist { margin-bottom: 20px; }

.sorrend .sequencelist.text.noimage { height: 180px; }
.sorrend .sequencelist.text.image { height: 200px; }
.sorrend .sequencelist.textimage { height: 200px; }
.sorrend .sequencelist.notext.image { height: 200px; }

.sorrend .elem p { text-align: left; font-size: 16px; line-height: 18px; font-weight: 700; }
.sorrend .sequencelist .elem.text.noimage p { text-align: center; width: 80%; }
.sorrend .sequencelist .elem.textimage p { height: 100%; width: 100%; }
.sorrend .sequencelist .elem.textimage:not(.I) p { display: flex; align-items: center; justify-content: center; text-align: center; }

/* *** */
.sorrend div.elem figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }


/* *** */
.sorrend div.sequencelist { margin-bottom: 20px; display: flex; flex-direction: row; }
.sorrend div.sequencelist::before { color: var(--text-2); font-size: 24px; font-weight: 800; margin-left: 10px; margin-right: 10px; }
.sorrend div.sequencelist:nth-child(1)::before { content:'1.'; }
.sorrend div.sequencelist:nth-child(2)::before { content:'2.'; }
.sorrend div.sequencelist:nth-child(3)::before { content:'3.'; }
.sorrend div.sequencelist:nth-child(4)::before { content:'4.'; }
.sorrend div.sequencelist:nth-child(5)::before { content:'5.'; }
.sorrend div.sequencelist:nth-child(6)::before { content:'6.'; }
.sorrend div.sequencelist:nth-child(7)::before { content:'7.'; }
.sorrend div.sequencelist:nth-child(8)::before { content:'8.'; }

.sorrend div.elem.text.image figure { height: 105px; }
.sorrend div.elem.text.image { padding: 15px 17px 15px 17px; }

.sorrend div.elem.textimage figure { min-height: 105px; height: 100%; }
.sorrend div.elem.textimage { padding: 15px 17px 15px 17px; }

@media (max-width: 980px) {

.sorrend .sequencelist .elem.text.noimage { width: 180px; height: 140px; }
.sorrend .sequencelist .elem.text.image { width: 310px; height: 240px; flex-direction: column; justify-content: space-between; }
.sorrend .sequencelist .elem.textimage { width: 310px; height: 240px; flex-direction: column; justify-content: space-between; }
.sorrend .sequencelist .elem.notext.image { width: 310px; height: 240px; }

.sorrend .sequencelist.text.noimage { height: 140px; }
.sorrend .sequencelist.text.image { height: 240px; }
.sorrend .sequencelist.textimage { height: 240px; }
.sorrend .sequencelist.notext.image { height: 310px; }

.sorrend div.elem.text.image figure { height: 155px; }
.sorrend div.elem.textimage figure { min-height: 155px; height: 100%; }

.sorrend div.elem.notext.image figure { height: 154px; width: 177px; }

.sorrend.container { max-width: 100% !important; }

.sorrend { margin-top: 30px; }

.sorrend div.elem.notext.image figure { height: 80% !important; width: 80% !important; }

}

@media (max-width: 768px) {

.sorrend .sequencelist .elem.notext.image { flex-direction: column; }
.sorrend .sequencelist .elem.text.image { align-items: center; }
.sorrend .sequencelist .elem.textimage { align-items: center; justify-content: center; }

.sorrend .sequencelist .elem.text.noimage { width: 260px; height: 65px; }
.sorrend .sequencelist .elem.text.image { width: 260px; height: 120px; flex-direction: row; }
.sorrend .sequencelist .elem.textimage { width: 260px; height: 120px; flex-direction: row; }
.sorrend .sequencelist .elem.notext.image { width: 260px; height: 120px; padding: 10px !important; }

.sorrend .sequencelist.text.noimage { height: 65px; }
.sorrend .sequencelist.text.image { height: 120px; }
.sorrend .sequencelist.textimage { height: 120px; }
.sorrend .sequencelist.notext.image { height: 150px; }

.sorrend div.elem.text.image figure { height: 99px; width: 108px; min-width: 108px; }
.sorrend div.elem.textimage figure { min-height: 99px; width: 108px; min-width: 108px; }

.sorrend div.elem.notext.image { height: 120px !important; width: 148px !important; }
.sorrend div.elem.notext.image figure { height: 96px !important; width: 124px !important; }

.sorrend div.sequencelist.notext.image { margin-bottom: 20px; display: flex; flex-direction: column; }
.sorrend div.sequencelist.notext.image::before { color: var(--text-2); font-size: 24px; font-weight: 800; margin-left: 10px; margin-right: 10px; }


.sorrend .sequencelist .elem.text.noimage p { text-align: left; width: 90%; }

}









/*********************************************************
 * 
 * KIEGÉSZÍTÉS */

@media (max-width: 980px) { .kiegeszites { margin-top: 30px; } }

.kiegeszites .helyes::after, .kiegeszites .helytelen::after { top: -20px; right: -10px; }


.kiegeszites .text-container { font-size: 20px; font-family: "Poppins"; font-weight: 400; line-height: 220%; padding: 10px 20px 15px 20px; box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25); -webkit-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; position: relative; z-index: 1; }
.kiegeszites .text-container span { border-radius: 3px; min-width: 55px; min-height: 40px; max-height: 40px; height: 40px; display: inline-block; margin-bottom: -10px; }

.kiegeszites .text-container span.noline { border: unset; min-width: unset; }

.kiegeszites .move { z-index: 999 !important; }

.kiegeszites .list-container .col-auto { margin-bottom: 5px; }


.kiegeszites div.elem, .kiegeszites div.elem * { cursor: pointer !important; }
.kiegeszites div.elem { height: 40px; min-height: 40px; max-height: 40px; line-height: 40px; max-width: fit-content; -webkit-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; position: relative; z-index: 1; }
.kiegeszites div.elem { box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); display: flex; align-items: center; }
.kiegeszites div.elem p { padding: 0px 5px 0px 5px; width: 100%; font-size: 20px; font-weight: 400; font-family: "Poppins"; }



.kiegeszites div.elem.hide { opacity: 0; z-index: -1; max-height: 0px; min-height: 0px; overflow: hidden; margin: 0px 2px 0px 2px; border: unset; }


.list-container { margin-bottom: 30px; }
.kiegeszites .list-container.row > * { padding-right: calc(var(--bs-gutter-x)/ 4) !important; padding-left: calc(var(--bs-gutter-x)/ 4) !important; }


@media (max-width: 576px) {

   .kiegeszites div.elem { height: 36px; min-height: 36px; line-height: 36px; }
   .kiegeszites div.elem p { font-size: 16px; }
   .kiegeszites .text-container { font-size: 16px; padding: 10px; }
   .kiegeszites .text-container span { min-height: 36px; max-height: 36px; height: 36px; }
   .kiegeszites .text > div { padding: 0px; }
   .game-container { padding: 25px 1px 100px 1px; }
}


:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 0; }
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.animate__bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; }