:root {

--color-def: #fff; 
--color-gray: #353530; 
--color: #e5ff50; 
--color-hover: #FEC370; 
--color-lightwhite: #e9e8e0;
--font-default: 'Galano Grotesque';
--font-extra: 'Sporting Strategy';
--font-extra-hollow: 'Sporting Strategy Hollow';

}


html, body { width: 100%; height: auto; min-height: 100%; margin: 0px; padding: 0px; }
body { position: relative; background-color: var(--color-gray); }
body, body * { font-family: var(--font-default), sans-serif; font-size: 24px; line-height: 130%; font-weight: 300; 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 { list-style-type: none; padding-left: 10px; }
ul li::marker { font-size: 10px; }
p { margin: 0px; padding: 0px; }
a { text-decoration: none; margin: 0px; padding: 0px; color: unset; cursor: pointer; }
a:hover { color: unset; }

.color, .color * { color: var(--color); }

.fit-content { width: fit-content; }

.top { margin-top: 100px !important; }
.bottom { margin-bottom: 100px !important; }

b, .bold { font-weight: 700 !important; }
.lightbold { font-weight: 500 !important; }
strong, .strong { font-weight: 800 !important; }

img { max-width: 100%; height: auto; }


.btn { border-radius: 15px; font-size: 20px; font-weight: 600; text-transform: uppercase; padding: 10px 35px 10px 35px; }
.btn.color { background-color: var(--color); border: 1px solid var(--color); color: #353530; }
.btn.outline { border: 1px solid var(--color); color: var(--color); }
.btn:hover { border: 1px solid var(--color-lightwhite); background-color: var(--color-lightwhite); color: var(--color-gray); }


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



header { height: 120px; width: 100%; position: fixed; z-index: 9; background-color: var(--color-gray); background-image: url(/img/header-icon.webp); background-repeat: no-repeat; background-position: center left 30px; transition: top .5s; }
header .container { background-color: var(--color-gray); }
header .container .row { height: 90px; }
header .container .row .szechenyi img { height: 100%; width: auto; display: block; }
header .container .row .logo img { height: 55px; width: auto; display: block; }
header .container .row .icon { border: unset; background: unset; height: 62px; width: 62px; display: block; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: all .5s; }
header .container .row .icon.form { background-image: url(/img/icon-form.webp); }
header .container .row .icon.form:hover { background-image: url(/img/icon-form-hover.webp); }

header .container .row .icon.menubutton { background-image: url(/img/icon-menu.webp); }
header .container .row .icon.menubutton:hover { background-image: url(/img/icon-menu-hover.webp); }

header .container .row [data-lang="hu"] .icon.lang { background-image: url(/img/icon-hun.webp); }
header .container .row [data-lang="hu"] .icon.lang:hover { background-image: url(/img/icon-eng.webp); }

header .container .row [data-lang="en"] .icon.lang { background-image: url(/img/icon-eng.webp); }
header .container .row [data-lang="en"] .icon.lang:hover { background-image: url(/img/icon-hun.webp); }

header:not(.show).down { top: 0px; }
header:not(.show).up { top: -120px; }


nav { width: 100%; height: 100%; background-image: url(/img/nav-bg.webp); background-repeat: no-repeat; background-size: 100% 100%; z-index: 99; position: fixed; top: 0px; left: -200%; display: flex; align-items: center; justify-content: center; transition: left .5s; }
nav.show { left: 0px; }
nav a { font-size: 52px; text-transform: uppercase; font-weight: 500; }
nav a:hover { color: var(--color); }
nav .container { height: 50%; }
nav .container .row { height: 100%; }
nav .container .row .icon { border: unset; background: unset; height: 62px; width: 62px; display: block; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: all .5s; }
nav .container .row .icon.fb { background-image: url(/img/icon-fb.webp); }
nav .container .row .icon.fb:hover { background-image: url(/img/icon-fb-hover.webp); }
nav .container .row .icon.ins { background-image: url(/img/icon-ins.webp); }
nav .container .row .icon.ins:hover { background-image: url(/img/icon-ins-hover.webp); }
nav .close { border: unset; background: unset; width: 127px; height: 52px; background-image: url(/img/close.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; top: 50px; right: 20%; }
nav .container .row .szechenyi img { height: 166px; width: auto; display: block; }



h2 { font-family: var(--font-extra); font-size: 150px !important; line-height: 210px; margin: 0px; padding: 0px; color: var(--color-lightwhite); background: linear-gradient(180deg,rgba(233, 232, 224, 1) 0%, rgba(233, 232, 224, 1) 40%, rgba(255, 255, 255, 1) 50%, rgba(233, 232, 224, 1) 55%, rgba(53, 53, 48, 1) 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; transition: all .5s; 
  right: -100%; 
  opacity: 0; 
}
h2.show { right: 0px; opacity: 1; }
h2::before { content:''; width: 85px; height: 31px; background-image: url(/img/title-arrow.webp); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: absolute; left: 0px; bottom: 0px; }

h3, h3 * { font-size: 69px !important; font-weight: 600; line-height: 68px !important; text-transform: uppercase; letter-spacing: -4px; }
h3 span { color: var(--color); }

h4, h4 * { font-size: 52px !important; font-weight: 600; line-height: 48px !important; text-transform: uppercase; letter-spacing: -4px; }


/* indicators */

.indicators { display: flex; justify-content: center; }
.indicators span { width: 28px; height: 34px; background-image: url(/img/indicator.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; margin-left: 5px; margin-right: 5px; cursor: pointer; }
.indicators span.show { background-image: url(/img/indicator-select.webp); }
.indicatorswipe { display: none; }

.indicators-mobil { display: flex; justify-content: center; }
.indicators-mobil span { width: 22px; height: 28px; background-image: url(/img/indicator.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; margin-left: 5px; margin-right: 5px; cursor: pointer; }
.indicators-mobil span.show { background-image: url(/img/indicator-select.webp); }

/* cover */

section.cover { width: 100%; height: 100vh; min-height: 1000px; background-image: url(/img/cover-csillagok.webp); background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative; overflow: hidden; }
section.cover .hegyek { width: 100%; min-height: 100vh; height: 100%; left: 0px; bottom: 0px; position: absolute; z-index: 4;  overflow: hidden; }
section.cover .hegyek img { width: 100%; min-width: 1600px; height: auto; display: block; position: absolute; bottom: 0px; left: 0px; margin-top: 50%; }
section.cover .content { position: absolute; z-index: 5; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; }
section.cover .gradient { width: 100%; min-height: 100px; left: 0px; bottom: 0px; background: linear-gradient(180deg,rgba(53, 53, 48, 0) 0%, rgba(53, 53, 48, 1) 100%); position: absolute; z-index: 4; }

section.cover .content .szoveg-container { position: relative; overflow: hidden; height: 510px; }
section.cover .content .szoveg-container [data-szoveg] { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; opacity: 0; transition: opacity .5s; }
section.cover .content .szoveg-container [data-szoveg].show { opacity: 1; position: relative; }

section.cover .content .szoveg-container [data-szoveg] h3 { position: relative; right: -100%; transition: all .5s; }
section.cover .content .szoveg-container [data-szoveg] p { position: relative; left: -200%; transition: all .6s; display: block; }
section.cover .content .szoveg-container [data-szoveg].show h3 { right: 0px; }
section.cover .content .szoveg-container [data-szoveg].show p { left: 0px; }


section.cover .content-img { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; }
section.cover .szamok { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; }
section.cover .szamok .szamok-column { display: flex; position: absolute; height: 100%; overflow: hidden; width: 100%; max-width: 400px; }
section.cover .szamok .szamok-column div { position: absolute; font-size: 55px; line-height: 45px; white-space: pre; animation: moveColumn 100s linear infinite; opacity: 0.25; text-align: center; font-weight: 500; }
@keyframes moveColumn {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: -100%; }
}


section.cover .kep-container { height: 485px; width: 100%; overflow: hidden; position: relative; }
section.cover .kep-container figure { position: absolute; bottom: -100%; opacity: 0; transition: all .5s; }
section.cover .kep-container figure.show { bottom: 0px; opacity: 1; }



figure.csepp { width: 100%; aspect-ratio: 1 / 1; max-width: 485px; height: auto; overflow: hidden; position: relative; margin: 0px; }
figure.csepp.bal { border-radius: 0 50% 50% 50%; }
figure.csepp.jobb { border-radius: 50% 0 50% 50%; }
figure.csepp img { position: relative; z-index: 1; transition: all .5s; }
figure.csepp:hover img { transform: scale(1.2); }
figure.csepp:not(.not)::before { content:''; width: calc( 100% - 20px ); height: auto; aspect-ratio: 1 / 1; border-radius: 0 50% 50% 50%; border: 3px solid var(--color); position: absolute; z-index: 2; top: 10px; left: 10px; }
figure.csepp.lineblack::before { border: 3px solid var(--color-gray);}
figure.csepp.bal::before { border-radius: 0 50% 50% 50%; }
figure.csepp.jobb::before { border-radius: 50% 0 50% 50%; }



/* hangzatos */

section.hangzatos { overflow: hidden; position: relative; }
section.hangzatos .row { position: relative; z-index: 1; }
section.hangzatos::before { content:''; width: 20%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 2; background: linear-gradient(90deg,rgba(53, 53, 48, 1) 0%, rgba(53, 53, 48, 0) 100%); }
section.hangzatos::after { content:''; width: 20%; height: 100%; right: 0px; top: 0px; position: absolute; z-index: 2; background: linear-gradient(90deg,rgba(53, 53, 48, 0) 0%, rgba(53, 53, 48, 1) 100%); }
section.hangzatos p { font-size: 38px; line-height: 38px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
section.hangzatos h5 { font-family: var(--font-extra-hollow); font-size: 78px; margin: 0px; }


/* kikvagyunk */

section.kikvagyunk { margin-top: 150px; }
/*section.kikvagyunk .content { margin-top: 100px; background-image: url(/img/kikvagyunk-bg.webp); background-repeat: no-repeat; background-position: center center; background-size: 100%; height: 530px; }*/
section.kikvagyunk .content { margin-top: 100px; position: relative; height: 550px; z-index: 1; overflow: hidden;}

section.kikvagyunk .content::before { content: "";    position: absolute;    inset: 0;    background-image: url(/img/kikvagyunk-bg.webp);    background-repeat: no-repeat;    background-position: center center;    background-size: 100%;    opacity: 0.2; /* Áttetszőség */    z-index: 0;}

section.kikvagyunk .content .container { height: 550px; position: absolute; opacity: 0; transition: all .5s; }
section.kikvagyunk .content .container figure { width: 537px; height: 320px; overflow: hidden; position: relative; }
section.kikvagyunk .content .container img { width: 100%; height: 100%; opacity: 0; left: 0px; bottom: -100%; position: relative; transition: all .5s; }
section.kikvagyunk .content .container h3 { position: relative; left: -100%; width: 100%; opacity: 0; transition: all .5s; }
section.kikvagyunk .content .container p { position: relative; right: -100%; width: 100%; opacity: 0; transition: all .5s; }
section.kikvagyunk .content .container.show { opacity: 1; }
section.kikvagyunk .content .container.show img { opacity: 1; bottom: 0px; }
section.kikvagyunk .content .container.show h3 { left: -0px; opacity: 1; }
section.kikvagyunk .content .container.show p { right: 0px; opacity: 1; }


/* addict */

section.addict { margin-top: 100px; position: relative; }
section.addict .bg { position: absolute; z-index: 1; width: 100%; max-width: 992px; height: auto; top: calc(25%); left: calc( 50% - 496px ); }
section.addict .container { position: relative; z-index: 2; }
section.addict .text-box { position:  relative; border-radius: 15px; background-color: var(--color); background-image: url(/img/addict-text-bg.webp); background-repeat: no-repeat; background-position: center right -170px; width: 100%; max-width: 585px; height: auto; aspect-ratio: 1 / 1; overflow: hidden; margin-left: 30px; }
section.addict .text-box * { color: var(--color-gray); }
section.addict .text-box::before { content:''; width: 52px; height: 53px; background-image: url(/img/szolgaltatasok-arrow.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; top: 20px; right: 20px; }

section.addict .text-box h4 { position: relative; opacity: 0; top: -100%; transition: all .5s; font-weight:900; width: 100%; }
section.addict .text-box p { font-size: 20px; position: relative; opacity: 0; bottom: -100%; transition: all .5s; }
section.addict .text-box [data-szoveg] { position: absolute; opacity: 0; top: 0px; left: 0px; width: 100%; height: 100%; transition: all .5s; padding: 30px; }
section.addict .text-box [data-szoveg].show { opacity: 1; }
section.addict .text-box [data-szoveg].show h4 { opacity: 1; top: 0px; }
section.addict .text-box [data-szoveg].show p { opacity: 1; bottom: 0px; }

#container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Háttérbe rakja */
}
section.addict {
  position: relative; /* A gyereke relatív pozícionálásához */
}




section.addict figure.csepp { max-width: 585px; }
section.addict figure.csepp img { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; }
section.addict figure.csepp img.show { opacity: 1; }

section.addict figure.csepp::before { max-width: 565px; }
section.addict figure.csepp.lineblack::before { max-width: 565px; }




section.addict .content { margin-top: 100px; position: relative; }
section.addict .content { position: relative; z-index: 1; }
section.addict .content::before { content:''; width: 195px; height: 193px; position: absolute; z-index: 2; background-image: url(/img/szolgaltatasok-img-1.webp); background-repeat: no-repeat; background-position: center; background-size: 100%; top: calc( 50% - 97px ); left: calc( 50% - 96px ); }

section.addict .szurke, section.addict .sarga { border-radius: 15px; border-style: solid; border-width: 1px; border-color: var(--color-lightwhite); padding: 30px; width: 100%; max-width: 490px; height: 520px; display: flex; justify-content: center; align-items: center; }
section.addict .sarga { background: var(--color); border-color: var(--color); background-image: url(/img/szolgaltatasok-img-3.webp); background-repeat: no-repeat; background-position: center left -50%; }
section.addict .szurke { background-color: var(--color-def); border-color: var(--coldr-def); background-image: url(/img/szolgaltatasok-img-2.webp); background-repeat: no-repeat; background-position: center right -50%; }

section.addict h5 { font-size: 30px; text-align: center; text-transform: uppercase; color: var(--color); font-weight: 600; width: min-content; white-space: nowrap; color: var(--color-gray); margin: 0px; }

section.addict .row > * { padding-bottom: calc(var(--bs-gutter-x)); }

section.addict .szurke-text, section.addict .sarga-text { border-radius: 15px; border-style: solid; border-width: 4px; border-color: var(--color-lightwhite); padding: 30px; width: 100%; max-width: 490px; height: 520px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: var(--color-gray); }
section.addict .sarga-text { border-color: var(--color); }
section.addict .szurke-text .btn.outline { border-color: var(--color-lightwhite); color: var(--color-lightwhite); }
section.addict .szurke-text .btn.outline:hover { color: var(--color-gray); }
section.addict h6 { font-size: 24px; text-align: center; text-transform: uppercase; margin-bottom: 15px; color: var(--color);font-weight:900; }
section.addict .szurke-text p, section.addict .sarga-text p { font-size: 20px; text-align: center; }

section.addict .addict-icon { width: 100%; overflow: hidden; }
section.addict .addict-icon img { height: 56px; min-width: 859px; position: relative; right: calc( -50% + 28px ); }

section.addict .content .content-container { width: 490px; height: 520px; position: relative; overflow: hidden; }
 
section.addict .content .szurke { position: absolute; top: -100%; right: 100%; transition: all .5s; }
section.addict .content .sarga { position: absolute; bottom: -100%; left: 100%; transition: all .5s; }
section.addict .content .szurke-text { position: absolute; top: -100%; left: 100%; transition: all .5s; }
section.addict .content .sarga-text { position: absolute; bottom: -100%; right: 100%; transition: all .5s; }

section.addict .content.show .szurke { position: absolute; top: 0px; right: 0px; }
section.addict .content.show .sarga { position: absolute; bottom: 0px; left: 0px; }
section.addict .content.show .szurke-text { position: absolute; top: 0px; left: 0px; }
section.addict .content.show .sarga-text { position: absolute; bottom: 0px; right: 0px; }

/* ugyfeleink */

section.ugyfeleink-container { margin-top: 100px; }

section.ugyfeleink-container div.ugyfeleink { overflow: hidden; position: relative; margin-top: 10px; margin-bottom: 10px; }
section.ugyfeleink-container div.ugyfeleink .list { position: relative; z-index: 1; }
section.ugyfeleink-container div.ugyfeleink::before { content:''; width: 20%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 2; background: linear-gradient(90deg,rgba(53, 53, 48, 1) 0%, rgba(53, 53, 48, 0) 100%); }
section.ugyfeleink-container div.ugyfeleink::after { content:''; width: 20%; height: 100%; right: 0px; top: 0px; position: absolute; z-index: 2; background: linear-gradient(90deg,rgba(53, 53, 48, 0) 0%, rgba(53, 53, 48, 1) 100%); }

section.ugyfeleink-container .line { height: 33px; background-image: url(/img/ugyfeleink-line.webp); background-repeat: repeat-x; }



/* kapcsolat */

section.kapcsolat { padding-bottom: 300px; position: relative; }
section.kapcsolat .hegyek { width: 100%; min-height: 100vh; left: 0px; bottom: 0px; position: absolute; z-index: 1; overflow: hidden; }
section.kapcsolat .hegyek img { width: 100%; min-width: 1600px; height: auto; display: block; position: absolute; bottom: 0px; left: 0px; margin-top: 50%; }
section.kapcsolat .container { position: relative; z-index: 2; }
section.kapcsolat .gradient { width: 100%; min-height: 100px; left: 0px; bottom: 0px; background: linear-gradient(180deg,rgba(53, 53, 48, 0) 0%, rgba(53, 53, 48, 1) 100%); position: absolute; z-index: 4; }

textarea.form-control {
  overflow-y: hidden;         /* alapból ne legyen görgetősáv */
  max-height: 500px;          /* maximum magasság */
  resize: none;               /* ne lehessen kézzel húzni (opcionális) */
}





/* karrier oldal */

section.karrier { width: 100%; height: 100%; min-height: 100vh; padding-top: 250px; padding-bottom: 100px; background-image: url(/img/karrier-bg.webp); background-repeat: no-repeat; background-position: top center; background-size: 100%; }
section.karrier p.text { font-size: 20px; }
section.karrier .lead { margin-top: 100px; }
section.karrier figure.csepp { max-width: 380px; }



footer { position: relative; z-index: 2; }
footer p { font-size: 20px; }
footer .container .row .icon { border: unset; background: unset; height: 62px; width: 62px; display: block; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: all .5s; }
footer .container .row .icon.fb { background-image: url(/img/icon-fb.webp); }
footer .container .row .icon.fb:hover { background-image: url(/img/icon-fb-hover.webp); }
footer .container .row .icon.ins { background-image: url(/img/icon-ins.webp); }
footer .container .row .icon.ins:hover { background-image: url(/img/icon-ins-hover.webp); }
footer .line { border-left: 1px solid var(--color-def); border-right: 1px solid var(--color-def); }



.form-check-input { border: unset !important; box-shadow: unset !important; }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Ccircle style='fill: %23e5ff50;' cx='16' cy='16' r='10'/%3E%3C/svg%3E"); }
.form-check-input[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Cpath style='fill: %23e5ff50;' d='M16,7c5,0,9,4,9,9s-4,9-9,9-9-4-9-9,4-9,9-9M16,6c-5.5,0-10,4.5-10,10s4.5,10,10,10,10-4.5,10-10-4.5-10-10-10h0Z'/%3E%3C/svg%3E"); }

.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 30 30'%3E%3Crect style='fill: %23e9e8e1;' x='0' y='0' width='30' height='30' rx='15' ry='15'/%3E%3Cg%3E%3Crect style='fill: %23353530;' x='5' y='5' width='20' height='20' rx='10' ry='10'/%3E%3Crect style='fill: %23dedf47;' x='6.6' y='6.6' width='16.8' height='16.8' rx='8.4' ry='8.4'/%3E%3C/g%3E%3C/svg%3E"); }
.form-check-input[type="checkbox"] { border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3E%3Ccircle style='fill: %23fff;' cx='16' cy='16' r='16'/%3E%3Cpath style='fill: %23e5ff50;' d='M16,7c5,0,9,4,9,9s-4,9-9,9-9-4-9-9,4-9,9-9M16,6c-5.5,0-10,4.5-10,10s4.5,10,10,10,10-4.5,10-10-4.5-10-10-10h0Z'/%3E%3C/svg%3E"); }

.button.next { position: relative; opacity: 0; z-index: -1; }
.button.next.show { opacity: 1; z-index: 1; }

.form-check-label, .form-check-label * { font-size: 16px; }
.form-check-label a { text-decoration: underline; }
.form-check-label a:hover { text-decoration: none; }

.form-control { border: unset !important; box-shadow: unset !important; border-radius: 10px; background-color: var(--color-def); font-size: 16px; padding: 8px 15px 8px 15px; }
.form-control::placeholder { color: #F59C81; opacity: 1; }

.form-control::-moz-placeholder { color: #969696 !important; opacity: 1; }
.form-control::placeholder { color: #969696 !important; opacity: 1; }

.form-control.is-invalid, .was-validated .form-control:invalid { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23353530'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23353530' stroke='none'/%3e%3c/svg%3e"); }
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: var(--color); }
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked { background-color: var(--color); }
.form-control.is-valid, .was-validated .form-control:valid { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23353530' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }
.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: var(--color-def); }


/* respo */

@media (max-width: 1600px) {

	section.cover .hegyek img { min-width: 1600px; left: calc( (100% - 1600px) / 2 ); }
	section.kapcsolat .hegyek img { min-width: 1600px; left: calc( (100% - 1600px) / 2 ); }


}


@media (max-width: 1470px) {

	.container { min-width: 100%; }


	body * { font-size: 22px; }

}


@media (max-width: 1200px) {


	h2 { font-size: 110px !important; line-height: 170px !important; }
	h3, h3 * { font-size: 55px !important; font-weight: 600; line-height: 60px !important; text-transform: uppercase; letter-spacing: -3px; }

}

@media (max-width: 992px) {

	body * { font-size: 16px; }

	h2 { font-size: 44px !important; line-height: 100px !important; }
	h2::before { width: 60px; height: 22px; }

	h3, h3 * { font-size: 33px !important; line-height: 40px !important; letter-spacing: -2px; }

	h4, h4 * { font-size: 25px !important; line-height: 30px !important; letter-spacing: 0px; }

	.top { margin-top: 70px !important; }
	.bottom { margin-bottom: 70px !important; }

	header { background-position: center left 20px; }
  header .container .row .icon { height: 30px; width: 30px; }
	header .container .row .logo img { height: 30px; }

	nav .container { height: 70%; }
	nav .container .row .icon { height: 40px; width: 40px; }
	nav a { font-size: 24px; }
	nav .close { width: 70px; height: 30px; top: 20px; right: 20px; }

	.btn { width: 100%; }

	.indicators { display: none; }
	.indicatorswipe { display: flex; }


	section.cover {	height: unset; min-height: unset; overflow: unset; background-image: url(/img/cover-csillagok-mobil.webp); background-size: auto 520px; margin-bottom: 50px; }
	section.cover .content { position: relative; }
	section.cover .hegyek { min-height: unset; height: 620px; bottom: unset; top: 0px; }
	section.cover .kep-container figure { max-width: 350px; }
	section.cover .content .szoveg-container { height: unset; margin-top: 30px; }


	section.cover .hegyek img { min-width: 992px; left: calc( (100% - 992px) / 2 ); }
	section.kapcsolat .hegyek img { min-width: 992px; left: calc( (100% - 992px) / 2 ); }

	section.addict .content::before { display: none; }

	section.addict { background: unset; }

	section.addict .sarga, section.addict .szurke { background-color: unset; }
	section.addict .sarga h5 { color: var(--color); }
	section.addict .szurke h5 { color: var(--color-def); }
	section.addict .text-box h4 { width: 80%; }

	section.addict .szurke-text, section.addict .sarga-text { border: unset; height: auto; padding: 0px; background: unset; }

	section.addict .text-box { margin-left: unset; height: auto; aspect-ratio: unset; overflow: unset; display: block ruby; }
	section.addict .text-box [data-szoveg].show { position: relative; }

	section.addict .bg { left: unset; }

	footer .line { border-left: unset; border-right: unset; }
	footer .container .row .icon { height: 40px; width: 40px; }
	footer p { font-size: 16px; }

	section.addict .content .content-container { height: fit-content; }

	section.addict .content .szurke { position: relative; top: -100%; right: 100%; transition: all .5s; }
	section.addict .content .sarga { position: relative; bottom: -100%; left: 100%; transition: all .5s; }
	section.addict .content .szurke-text { position: relative; top: -100%; left: 100%; transition: all .5s; }
	section.addict .content .sarga-text { position: relative; bottom: -100%; right: 100%; transition: all .5s; }

	section.addict .content.show .szurke { position: relative; top: 0px; right: 0px; }
	section.addict .content.show .sarga { position: relative; bottom: 0px; left: 0px; }
	section.addict .content.show .szurke-text { position: relative; top: 0px; left: 0px; }
	section.addict .content.show .sarga-text { position: relative; bottom: 0px; right: 0px; }

	section.kikvagyunk { margin-top: 50px; width: 350px; margin-left: auto; margin-right: auto; }
	section.kikvagyunk .content { margin-top: 50px; }
	section.kikvagyunk .content::before { display: none; }
	section.kikvagyunk .content .container { height: unset; }
	section.kikvagyunk .content .container h3 { padding-right: 30px; }
	section.kikvagyunk .content .container figure { width: 100%; height: auto; }


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



	section.cover .hegyek img { min-width: 768px; left: calc( (100% - 768px) / 2 ); }
	section.kapcsolat .hegyek img { min-width: 768px; left: calc( (100% - 768px) / 2 ); }

	section.hangzatos p { font-size: 22px; line-height: 22px; }
	section.hangzatos h5 { font-size: 45px; }

	section.ugyfeleink-container div.ugyfeleink { margin-top: unset; margin-bottom: unset; }
	section.ugyfeleink-container { margin-top: 50px; }
	section.ugyfeleink-container .line { height: 20px; }
	section.ugyfeleink-container img { max-width: 70%; }

	section.addict .content::before { margin-top: 50px; }




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

	.top { margin-top: 50px !important; }
	.bottom { margin-bottom: 50px !important; }

	section.cover .hegyek img { min-width: 600px; left: calc( (100% - 600px) / 2 ); }
	section.kapcsolat .hegyek img { min-width: 600px; left: calc( (100% - 600px) / 2 ); }



}