@charset "utf-8";
/* CSS Document */
body
	{background: transparent url(img/body.webp) repeat scroll 0%;border:#2C6381 solid 4px;}
* { box-sizing: border-box; }

a:link
	{color: #FF6600;text-decoration: none;text-shadow: #000000 1px 1px 1px;font-size: 1.8rem;line-height: 1.8rem;}
a:visited 
	{color : #FF6600;text-decoration : none;}
a:hover
	{text-decoration: none;color: #000000;background-color: #7DE369;}
a:active
	{color: yellow;background-color: transparent;text-decoration: underline;}
h1, h2 {text-shadow : 1px 1px 1px #fff;color : #7E7B7B;font-size : 2.2rem;line-height : 2.3rem;text-align : center;}

h3, h4 {color : #6C6868;font-size : 1.6rem;line-height : 1.8rem;text-align : center;}
h1.i 
	{font-family: 'Dancing Script';font-size:4rem;line-height: 1;text-align:center;color: #2C6381;font-style: italic;max-width: 100%}
main, aside 
	{margin : auto;width : 1000px;border : #2C6381 solid 3px;border-radius : 10px 10px 10px 10px;}

.intro {text-align: center;margin: 2rem auto;max-width: 900px;}
.intro .style1 
	{font-style: italic;text-shadow: 1px 1px 1px #F8F9EB;color: #3BA022;font-size: 3.8rem;line-height: 3.3rem;display: block;}
.intro .style2
	{display: block;text-align: center;font-size: 1.1em;line-height: 1.8em;color: #222;font-weight: 400;margin-top: 0.5rem;}
.intro .style3 
	{display: block;font-family: 'Dancing Script', cursive;text-shadow: 1px 1px 1px #fff;color: #2C6381;font-size: 3.2rem;line-height: 1.1em;text-align: center;font-style: italic;margin-top: 0.8rem;font-weight: bold;}
.footer-sep 
	{ border:0; height:1px; background:linear-radient(90deg,transparent,rgba(0,0,0,.2),transparent); }
.footer-grid { display:grid; gap:1rem; grid-template-columns: 1.2fr 1fr 1fr; align-items:start; }
.footer-grid a { text-decoration:none; }
.footer-grid ul { margin:0; padding-left:1rem; }
.footer-nap .footer-note { display:block; opacity:.8; margin-top:.25rem; }
.footer-cta .cta-btns { display:flex; gap:.5rem; margin:.5rem 0; }
@media (max-width: 900px){
  .footer-grid { grid-template-columns:1fr; }
}
.cta 
	{text-align: center;display: block;margin: auto;}
.btn 
	{display: inline-block;font-family: inherit;font-size: 1rem;font-weight: 600;text-decoration: none;border: none;border-radius: 0.5rem;padding: 0.9rem 1.8rem;cursor: pointer;transition: all 0.3s ease;line-height: 1.2;}
.btn-primary 
	{color: #fff;background: linear-gradient(135deg, #8de1f6 0%, #60be7e 100%);box-shadow: 0 4px 10px rgba(0, 98, 209, 0.25);border:#2C6381 solid 2px;}
.btn-primary:hover, .btn-primary:focus 
	{background: linear-gradient(135deg, #0675ec 0%, #06ec43 100%);box-shadow: 0 6px 16px rgba(0, 70, 160, 0.35);transform: translateY(-2px);}
.btn-primary:active 
	{transform: translateY(0);box-shadow: 0 3px 6px rgba(0, 70, 160, 0.25);}

@media (max-width: 600px) {
  .btn {width: 70%;text-align: center;padding: 1rem;}}


summary
	{display: block;margin: 0 auto;background-image : linear-gradient(#2c6381, #dfe8ed, #2c6381);color : #3D3737;text-shadow : 2px 2px 5px white;text-decoration-color : white;cursor: pointer;padding: 5px 0px 5px 0px;width: 100%;height: auto;border:#2C6381 solid 2px;;border-radius : 15px 15px 15px 15px;text-align: center;outline: none;font-size: 2.1em;transition: 0.5s;opacity: 1;box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 1);}
summary > * {display: inline;}
summary:hover {opacity: 0.5}
summary p,summary h2
		{color : #0E0D0D;font-size : 2.3rem;text-align : center;}			
details
	{display: block;margin: 0 auto;max-width: 70%;margin-bottom: 1rem;}
details p {bottom: auto;text-align: left;margin: auto;}		
#myBtn
	{display: none;position: fixed;bottom: 15px;right: 30px;z-index: 0;border : #2c6381 solid 3px;outline: none;background-image : linear-gradient(#2c6381, #dfe8ed, #2c6381);text-decoration-color : #010101;cursor: pointer;padding: 15px;
	border-radius: 10px;font-size: 18px;opacity: 0.4;z-index: 2;}
#myBtn:hover
	{background-color: #555;opacity: 1}	


time{font-style: italic;font-size: 1.5rem}




* {margin: 0;box-sizing: border-box;}		
.banner
	{margin: auto;width: 95%;height: 250px; background-image: url('img/mask10.png'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner0
	{margin: auto;width: 50%;height: 250px; background-image: url('img/udvozlo.webp'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner1
	{margin: auto;width: 50%;height: 320px; background-image: url('img/udvozlo-1.webp'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner1a
	{margin: auto;width: 50%;height: 250px; background-image: url('img/kapcsolat.webp'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner2
	{margin: auto;width: 20%;height: 450px; background-image: url('img/bucsuzo-1.webp'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner3
	{margin: auto;padding:  0px 5px 5px 5px;width: 100%;height: 150px; background-image: url('img/nyil-le.png'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner4
	{margin: auto;width: 60%;height: 550px; background-image: url('img/eztadjuk.webp'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
img
	{box-shadow: -10px 12px 13px rgba(0,0,0,0.5);max-width : 100%;margin-left : auto;margin-right : auto;display : block;}

.img-hivas
	{display: block;position: fixed;bottom: 15px;left: 15px;z-index: 0;border : #2c6381 solid 3px;outline: none;background-image : linear-gradient(#205F02, #49D805, #205F02);text-decoration-color : #010101;cursor: pointer;padding: 5px;border-radius: 10px;font-size: 18px;opacity: 0.4;z-index: 2;}
.img-hivas:hover {opacity: 1}
.img-section {max-width: 100%;}		
.img-keret {border : #F16128 solid 2px;border-radius : 15px;}
.img-nev {border : #F16128 solid 2px;border-radius : 15px;max-width: 40%;}
.img-n
	{position: relative;margin : auto;min-width: 230px;max-width: 315px;max-width: 30%;}		
.img-fo
	{max-width : 100%;margin-left: auto;margin-right: auto;display: block;}
.img-0
	{position: absolute ;left: 2%;transform: translateZ(.25px) scale(0.65) translateX(-10%) translateY(-90%) rotate(-10deg);padding: 10px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-0a
	{position: absolute;left:33%;transform: translateZ(.25px) scale(0.65) translateX(-50%) translateY(-100%) rotate(8deg);padding: 10px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-0b
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.65) translateX(-110%) translateY(-110%) rotate(-10deg);padding: 10px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}	
.img-0c
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.50) translateX(-4%) translateY(-120%) rotate(10deg);padding: 10px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-2
	{position: absolute ;left: 2%;transform: translateZ(.25px) scale(0.65) translateX(-20%) translateY(-80%) rotate(-18deg);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-2a
	{position: absolute;left:33%;transform: translateZ(.25px) scale(0.65) translateX(-15%) translateY(-130%) rotate(4deg);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-2b
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.65) translateX(-30%) translateY(-100%) rotate(8deg);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}	
.img-2c
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.50) translateX(-300%) translateY(-100%) rotate(6deg);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}	
.img-2d
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.50) translateX(-44%) translateY(-100%) rotate(-3deg);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-1
	{position: relative;top: 50%;left: 35%;width: 320px;height: 240px;transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);padding: 10px;border-radius: 5px;background: rgba(240,230,220, .7);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-1:last-of-type
	{transform: translateZ(.4px) scale(.6) translateX(-54%) translateY(-40%) rotate(-5deg);}
.img-1a
	{position: relative;top: 50%;left: 35%;width: 320px;height: 240px;transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);padding: 10px;border-radius: 5px;background: rgba(240,230,220, .7);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.img-1a:last-of-type
	{transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);}
.img-nevk
	{position: absolute;left:67%;transform: translateZ(.25px) scale(0.65) translateX(-92%) translateY(-80%);padding: 5px;border-radius: 15px;background: rgba(44,99,129, .3);box-shadow: 0 0 8px rgba(0, 0, 0, .7);}



#cube-container 
	{width: 240px;height: 240px;margin: 20px auto;perspective: 500px;}

#cube-container:before 
	{content: '';position: absolute;top: 90px;left: 0;width: 100%;height: 100%;box-shadow: 0 0 75px 20px rgba(0, 0, 0, 0.1), inset 0 0 350px 350px rgba(0, 0, 0, 0.1);transform: rotateX(95deg) translateZ(-80px) scale(1);animation: rotateShadow 24s infinite;}
#cube-container2 
	{width: 240px;height: 240px;margin: 20px auto;perspective: 500px;}

#cube-container2:before 
	{content: '';position: absolute;top: 90px;left: 0;width: 100%;height: 100%;box-shadow: 0 0 75px 20px rgba(0, 0, 0, 0.1), inset 0 0 350px 350px rgba(0, 0, 0, 0.1);transform: rotateX(95deg) translateZ(-80px) scale(1);animation: rotateShadow 24s infinite;}
.cube 
	{height: 100%;width: 100%;position: relative;transform-style: preserve-3d;transition: all 0.8s ease-in-out;animation: rotate 24s infinite;}
.cube img 
	{position: absolute;width: 240px;height: 240px;backface-visibility: hidden;}

.cube img:nth-child(1) 
	{transform: rotateY(0deg) translateZ(120px);}
.cube img:nth-child(2) 
	{transform: rotateY(90deg) translateZ(120px);}
.cube img:nth-child(3) 
	{transform: rotateY(-90deg) translateZ(120px);}
.cube img:nth-child(4) 
	{transform: rotateY(180deg) translateZ(120px);}

@keyframes rotate 
	{0% { transform: rotateY(0deg); }25% { transform: rotateY(90deg); }50% { transform: rotateY(180deg);}75% {  transform: rotateY(270deg); }100% { transform: rotateY(360deg); }}

@keyframes rotateShadow 
	{0% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(360deg); }25% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(270deg); }50% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(180deg);}75% {  transform: rotateX(95deg) translateZ(-80px) scale(1)  rotateZ(90deg); }100% { transform: rotateX(95deg) translateZ(-80px) scale(1)  rotateZ(0deg); }}



@media screen and (max-width: 500px) {
	#cube-container,#cube-container2  {width: 200px;height: 200px;perspective: 400px;}
	.cube img {width: 200px;height: 200px;}
	.cube img:nth-child(1) 
	{transform: rotateY(0deg) translateZ(100px);}
.cube img:nth-child(2) 
	{transform: rotateY(90deg) translateZ(100px);}
.cube img:nth-child(3) 
	{transform: rotateY(-90deg) translateZ(100px);}
.cube img:nth-child(4) 
	{transform: rotateY(180deg) translateZ(100px);}
}


:root 
	{--gap: 20px;--vh: 100vh; /* Safe area (iOS bevágásokhoz) */ --safeL: env(safe-area-inset-left, 0px);--safeR: env(safe-area-inset-right, 0px);--safeT:env(safe-area-inset-top, 0px);--safeB: env(safe-area-inset-bottom, 0px);}



.fitbox 
	{display: flex;align-items: center;justify-content: center;overflow: visible;}

.inner 
	{transform-origin: center;transform: scale(var(--fit, 1)); will-change: transform;}

/* 3D konténer: max 480×640, kisebb kijelzőn arányos kicsinyítés */
.brick-wrap
	{--maxW: 480;--maxH: 640;--ratio: calc(var(--maxW) / var(--maxH)); --wByVW: calc(100vw - 2 * var(--gap)); --wByVH: calc(var(--vh) * var(--ratio) - 2 * var(--gap) * var(--ratio)); --wByMaxW: calc(var(--maxW) * 1px); --wByMaxH: calc(var(--maxH) * var(--ratio) * 1px); --w: min(var(--wByVW), var(--wByVH), var(--wByMaxW), var(--wByMaxH));width: var(--w); height: calc(var(--w) / var(--ratio)); margin: 0;position: relative;perspective: calc(var(--w) * 2.1);perspective-origin: 50% 50%;overflow: visible; --period: 24000ms;}
.stage
	{width: 100%;height: 100%;transform-style: preserve-3d;position: relative;}
.stage::before
	{content: '';position: absolute; left: 0; width: 100%; height: 100%; top: 74%;box-shadow: 0 0 75px 20px rgba(0,0,0,.1), inset 0 0 350px 350px rgba(0,0,0,.08);transform-origin: center;transform: rotateX(95deg) translateZ(calc(-0.30 * var(--w))) rotateZ(0deg);animation: shadowSpin var(--period) linear infinite;pointer-events: none;}
@keyframes shadowSpin{
  from { transform: rotateX(95deg) translateZ(calc(-0.30 * var(--w))) rotateZ(360deg) }
  to   { transform: rotateX(95deg) translateZ(calc(-0.30 * var(--w))) rotateZ(0deg) }
}

/* A „kocka” (téglatest) – folyamatos forgás */
.brick
	{position: relative;width: 100%;height: 100%;transform-style: preserve-3d;animation: spin var(--period) linear infinite;will-change: transform;
}
@keyframes spin{
  from{ transform: rotateY(0deg) }
  to  { transform: rotateY(360deg) }
}

/* 4 oldal – a képek NEM kerülnek vágásra */
.brick img
	{position: absolute; inset: 0;width: 100%; height: 100%;object-fit: contain; backface-visibility: hidden;background: #0001;border : #2c6381 solid 3px;border-radius: 10px;box-shadow: 0 12px 30px rgba(0,0,0,.12);}

/* Téglatest mélysége: var(--w)/2 */
.f1{ transform: rotateY(0deg)   translateZ(calc(var(--w)/2)) }
.f2{ transform: rotateY(90deg)  translateZ(calc(var(--w)/2)) }
.f3{ transform: rotateY(180deg) translateZ(calc(var(--w)/2)) }
.f4{ transform: rotateY(-90deg) translateZ(calc(var(--w)/2)) }

@media (max-width: 520px){
  :root { --gap: 12px; }
}





p.slogan 
	{background-image : linear-gradient(#2c6381, #dfe8ed, #2c6381);color: rgba(255, 255, 255, .45);text-align: center;text-transform: uppercase;letter-spacing: 0.9em;border: 4px double rgba(255, 255, 255, 1);border-radius : 10px 10px 10px 10px;border-width: 4px 0;padding: 1.5em 0em;max-width: none;font-size:1.4rem;}
p.cim1 
	{font-size:1.8rem;line-height:1.6rem;text-align:center;text-shadow:2px 2px 5px white;text-decoration-color:#010101;}	
p.slogan span {
	 font: 4rem "Oswald", Fantasy;
	 
	 letter-spacing: 0;
	 padding: 0.25em 0 0.325em;
	 display: block;
	 margin: 0 auto;
	 text-shadow: 0 0 80px rgba(255, 255, 255, .5);
	 
	/* Clip Background Image */
	 background: url("img/animated-text-fill-3.png") repeat-y;
	 
	 -webkit-background-clip: text;
	 background-clip: text;
	/* Animate Background Image */
	 -webkit-text-fill-color: transparent;
	 -webkit-animation: aitf 80s linear infinite;
	/* Activate hardware acceleration for smoother animations */
	 -webkit-transform: translate3d(0, 0, 0);
	 -webkit-backface-visibility: hidden;
}
/* Animate Background Image */
 @-webkit-keyframes aitf {
	 0% {
		 background-position: 0% 50%;
	}
	 100% {
		 background-position: 100% 50%;
	}
}
@media screen and (max-width: 850px) {
	p.slogan {font-size: 1.2rem}}
@media screen and (max-width: 750px) {
	p.slogan {font-size: 1.1rem}}
@media screen and (max-width: 650px) {
	p.slogan {font-size: 0.9rem;}
	p.slogan span {font-size: 3.2rem}}
@media screen and (max-width: 550px) {
	p.slogan {font-size: 0.7rem;}
	p.slogan span {font-size: 2.4rem}}
@media screen and (max-width: 500px) {
	p.slogan span {font-size: 2.2rem}}
@media screen and (max-width: 450px) {
	p.slogan span {font-size: 2.2rem}}
@media screen and (max-width: 420px) {
	p.slogan {font-size: 0.6rem;}
	
}
@media screen and (max-width: 420px) {
	p.slogan {font-size: 0.6rem;}
	p.slogan span {font-size: 1.6rem}
}
@media screen and (max-width: 350px) {
	p.slogan {font-size: 0.5rem;}
	p.slogan span {font-size: 1.5rem}
}









p {color : #0E0D0D;font-size : 1.3rem;line-height : 1.6rem;}
.p-ban
	{font-family: 'Dancing Script';text-shadow : 1px 1px 1px #fff;color : #2C6381;font-size : 4em;line-height : 1.1em;text-align : center;font-style: italic;}

.p-k
	{color : #0E0D0D;font-size : 1.6rem;text-align : center;}
.p-sw
	{text-shadow : 2px 2px 5px #FFFFFF;z-index: 2;font-family: 'Dancing Script';font-size:4em;line-height: 1;text-align:center;color: #2C6381;font-style: italic;max-width: 100%}
.p-footer {text-shadow : 2px 2px 5px #333;color : #FFFFFF;font-size : 1.2rem;line-height : 2.1rem;text-align : center;}
.p-kapcsolat {text-shadow : 2px 2px 5px #3D3737;color : #F5CB95;font-size : 2.5rem;line-height : 2.1rem;text-align : center;}
.p-behuzas {color : #0E0D0D;font-size : 1.3rem;text-indent: 50px;text-align: justify;letter-spacing: 3px;}
.shadow 
	{font-family: 'Dancing Script';font-size:4em;line-height: 1;text-align:center;color: #2C6381;font-style: italic;max-width: 100%}
.text
	{background: transparent url(img/body.webp) repeat scroll 0%;font-size: 1.6em;}	
.dolt, .dolt1		
	{font-style: italic;text-shadow : 1px 1px 1px #F8F9EB;color: #3BA022;font-size: 1.8em;line-height : 3.3rem;}		
strong {font-weight : bold;font-size : 1.6rem;}	
div.center {text-align: center;margin : auto;display: flex;}
div.media {margin : auto;}
.div-k {max-width : 100%; margin : auto;}
.div-kozep {max-width : 91%; margin : auto;}
.div-reklam
		{font-size : 1.6rem;line-height : 1.6rem;text-align : center;text-shadow : 2px 2px 5px white;text-decoration-color : #010101;background-image : linear-gradient(#FF6600, #FFAE78, #FF6600);padding : 2px 2px 2px 2px;}
.div-footer
		{font-size : 1.4rem;line-height : 1.6rem;color: #F7EFEF;text-align : center;text-shadow : 2px 2px 5px white;text-decoration-color : #F8F3F3;background : #315262;padding : 5px 5px 5px 5px;}

.div-1
		{background-image: url('img/hatter1.png');width: 800px;height: 600px;margin : auto;}
.main {float: left;width: 60%;padding: 0 20px;}		
.content a {font-weight: bold;  color: #e0e0e0;  text-decoration: none;text-shadow : 2px 2px 5px #010101;}
.responsive {width: 100%;height: auto;}
.row {display: flex;}
.column {flex: 25%;padding: 5px;}
.tovabbi
	{border : #F16128 solid 1px;border-radius : 10px 10px 10px 10px;background-image : linear-gradient(#205F02,#49D805,#205F02);}
.container
	{padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto;max-width:70%;border:#F16128 solid 3px;border : #4b7b92 solid 3px;border-radius : 10px 10px 10px 10px;position: relative;}
	
.arrow
	{border: solid black;border-width: 0 4px 4px 0;display: inline-block;padding: 3px;}
.down {transform: rotate(45deg);}
.blink
	{animation : blinker 0.6s linear infinite;color : #F50E0E;font-size : 1.6rem;font-weight : bold;font-family : sans-serif;text-align : center;text-shadow : 2px 2px 5px black;text-decoration-color : black;}
.blink1
		{animation : blinker 0.6s linear infinite;text-shadow : 2px 2px 5px #FFFFFF;color : #147F19;font-size : 1.4rem;line-height : 2.1rem;text-align : center;}		
@keyframes blinker{50% {opacity : 0;}}
.blink-one
	{animation : blinker-one 1s linear infinite;}
@keyframes blinker-one {0% {opacity : 0;}}
.blink-two
	{animation : blinker-two 2.08s linear infinite;}
@keyframes blinker-two {100% {opacity : 0;}}			

.visually-hidden
	{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}



.mySlides {display: none;}
.cursor {cursor: pointer;}
.prev, .next {cursor: pointer;position: absolute;top: 40%;width: auto;padding: 16px;margin-top: -50px;color: white;font-weight: bold;font-size: 20px;border-radius: 0 3px 3px 0;user-select: none;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.caption-container {text-align: center;background-color: #222;padding: 2px 16px;color: white;}
.row:after {content: "";display: table;clear: both;}
.column {float: left;width: 16.66%;}
.demo {opacity: 0.6;}
.active, .demo:hover {opacity: 1;}		
.responsive {width: 100%;height: auto;}	
.nav 
	{color: white}
.nav__text1
	{color: #26F32B}
 .nav__trigger-finger
	{position: fixed;top: 0;right: 0;z-index: 10;display: flex;align-items: center;width: 30px;height: 20px;margin: 40px;
	 color: #315262;}
 .nav__trigger-finger::before
	{content: '';position: absolute;top: -5px;left: -5px;bottom: -5px;right: -5px;background: #6c92a7;opacity: 0;z-index: -1;transition: opacity 0.3s cubic-bezier(0.75, 0, 0.25, 1);}
 .nav__trigger-finger span
	{display: block;width: 100%;height: 3px;transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);background: currentColor;}
 .nav__trigger-finger span::before, .nav__trigger-finger span::after 
	{content: "";position: absolute;left: 0;right: 0;display: block;height: 3px;background: currentColor;transition: transform 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);}
 .nav__trigger-finger span::before
	{top: 0;}
 .nav__trigger-finger span::after
	{top: calc(100% - 2px);}
 .nav__trigger-input, .nav__submenu-trigger-input
	{opacity: 0;width: 0;height: 0;appearance: none;position: fixed}
 .nav__trigger-input:focus + label
	{color: white;}
 .nav__trigger-input:focus + label::before
	{opacity: 1;}
 .nav__trigger-input:checked + label
	{height: 10px;color: white;}
 .nav__trigger-input:checked + label span
	{transform: rotate(45deg);}
 .nav__trigger-input:checked + label span::before, .nav__trigger-input:checked + label span::after
	{top: calc(50% - 1px);transition: transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);}
 .nav__trigger-input:checked + label span::after
	{transform: rotate(90deg);}
 .nav__trigger-input:checked ~ ul
	{z-index: 9;transform: none;transition: 0.5s cubic-bezier(0.75, 0, 0.25, 1);}
 .nav__list
	{position: fixed;overflow-y: scroll;top: 0;left: 0;bottom: 0;right: 0;z-index: -1;background: #4b7b92;font-size: 2.4rem;padding: 40px;transform: translate(180vw) translateY(-450px) rotate(45deg);transition: 0.2s cubic-bezier(0.75, 0, 0.25, 1);opacity: 0.9}
 .nav__item
	{list-style: none;}
 .nav__item + .nav__item
	{margin-top: 20px;}
 .nav__submenu-trigger-input:checked + label::after
	{transform: translateY(10px);}
 .nav__submenu-trigger-input:checked ~ ul
	{display: block;}
 .nav__submenu-trigger-input:focus + label::after
	{transform: translateY(5px);}
 .nav__submenu-trigger-finger::after
	{content: '';display: inline-block;border: 10px solid transparent;border-top-color: white;transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);}
 .nav__link
	{text-decoration: none;color: inherit;}
 .nav__list-child
	{display: none;font-size: 2rem;margin-top: 10px;padding-left: 2rem;}

.w3-button
	{width:100%;text-align:left;padding:8px 16px; border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;}
.w3-button:hover{color:#000!important;background-color:#ccc!important}	
.w3-button:disabled
	{cursor:not-allowed;opacity:0.3}
.w3-modal
	{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-container,.w3-container1{padding:0.01em 16px}
.w3-container:after,.w3-container1:after,.w3-container:before,.w3-container1:before
	{margin-left:auto;margin-right:auto}
.w3-display-topright{position:absolute;right:0;top:0}
.w3-animate-zoom
	{animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-zoom1
	{animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}	
.w3-xlarge{font-size:24px!important}
.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}		
.column3as
	{flex: 33.33%;padding: 5px;}				
.iras {
	transform: translateZ(1px) scale(0.5) translateX(0%) translateY(-30%);box-shadow: -10px 12px 13px rgba(0,0,0,0.5);padding: 10px;;font-size: 6em;opacity: 0.8;color: #C10F12;background: #413C3C;
	text-align: center;}
.iras h2
		{color : #870505;font-size : 5.0rem;line-height : 3.8rem;text-align : center;text-shadow : 2px 2px 2px black;} 		
.underpage
	{background: linear-gradient(90deg, rgba(231,241,244,0.9948354341736695) 0%, rgba(210,221,224,1) 35%, rgba(164,201,222,0.9444152661064426) 100%);box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 1);box-sizing: border-box;color: #444;width: 100%;border-radius: 15px 15px 15px 15px;margin : auto;}	
.ribbon
	{width: 100%;height: 100px;position: relative;float: left;text-transform: uppercase;color: black;}
.ribbon5
	{display: block;width: calc(100% + 20px);height: 50px;line-height: 50px;text-align: center;margin-left: -10px;margin-right: -10px;background-image : linear-gradient(#2c6381, #dfe8ed, #2c6381);position: relative;top: 20px;text-align: center;font-size: 2.1em;box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 1);}
.ribbon5:before, .ribbon5:after
	{content: "";position: absolute;}
.ribbon5:before
	{height: 0;width: 0;bottom: -10px;left: 0;border-top: 10px solid #2c6381;border-left: 10px solid transparent;}
.ribbon5:after
	{height: 0;width: 0;right: 0;bottom: -10px;border-top: 10px solid #2c6381;border-right: 10px solid transparent;}		
.vonal, .vonal1, .vonal2, .vonal3, .vonal4
	{position: absolute;background-color: #4b7b92;border-radius: 50%;overflow: hidden;width: 3px;}
.vonal {height: calc(108% /* változtatni hosszúsághoz */- 20px);}		
.vonal2{height: calc(86% /* változtatni hosszúsághoz */- 20px);}
.vonal3{height: calc(54% /* változtatni hosszúsághoz */- 20px);}
.vonal4{height: calc(33% /* változtatni hosszúsághoz */- 20px);}
.vonal .scanner, .vonal1 .scanner, .vonal2 .scanner, .vonal3 .scanner, .vonal4 .scanner
	{position: absolute;top: 0;right: 0;background: white;width: 100%;height: 20px;border-radius: 50%;animation: scanner-loop 5s ease-in-out infinite;background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));height: 50%;}		
@keyframes scanner-loop
	{0%{top: 0;}50%{top: 100%;}100%{top: 0;}}			
.sn
	{position: relative;margin : auto;min-width: 230px;max-width: 315px;color: #000000;text-align: center;line-height: 1.4em;font-size: 1.5em;box-shadow: 0 10px 25px 1px rgba(0, 0, 0, 1);}
.sn img {max-width: 100%}
.sn p
	{font-size: 1.5em;}
.profil
	{display: inline-block;width: 40%;  z-index: 1;position: relative;padding: 10px;}
.profil img {max-width: 100%}


.child-container
	{width: 100%;max-width: 300px;min-height: 209px;background: black;}
.parent-container
	{display: flex;flex-wrap: wrap;gap: 3px;justify-content: center;align-items: center;}	
.img-ertek{box-shadow: 0px 0px 0px rgba(0,0,0,0.5);}
.img-ertek:hover {opacity:0.6}
.image-slideshow
	{width: 300px;height: 209px;overflow: hidden;white-space: nowrap;font-size: 0;position: relative;}
.image-slideshow > div
	{width: 300px;height: 209px;animation: move 16s ease-in-out 1s infinite alternate;display:inline-block;}

.image-slideshow > div div 
	{position: absolute;bottom: 0;background: rgba(0,0,0,0.4);width: 100%;}
@keyframes move
	{0%,10% { transform: translateX(0); }18%,28% { transform: translateX(-300px); }36%,46% { transform: translateX(-600px); }
   	54%,64% { transform: translateX(-900px); }72%,80% { transform: translateX(-1200px); }88%,100% { transform:translateX(-1500px); }}
	
ol.gradient-list
	{counter-reset: gradient-counter;list-style: none;margin: 1.75rem 0;padding-left: 1rem;}

 ol.gradient-list > li
	{background: linear-gradient(90deg, rgba(231,241,244,1) 0%, rgba(210,221,224,1) 35%, rgba(164,201,222,1) 100%);border-radius: 0 0.5rem 0.5rem 0.5rem;counter-increment:gradient-counter;margin-top: 1rem;display: block;margin: 0 auto;max-width: 40rem;padding: 1rem;min-height: 3rem;padding: 1rem 1rem 1rem 3rem;position: relative;border : #2c6381 solid 3px;font-size: 1.5rem;box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.30);}
 ol.gradient-list > li::before, ol.gradient-list > li::after
	{background: linear-gradient(135deg, #2c6381 0%, #dfe8ed 100%);border : #2c6381 solid 1px;border-radius: 1rem 1rem 0 1rem;content: '';height: 3rem;left: -1rem;overflow: hidden;position: absolute;top: -1rem;width: 3rem;box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.30);}
 ol.gradient-list > li::before
	{align-items: flex-end;content: counter(gradient-counter);color: #1d1f20;
	 display: flex;font: 900 1.5em/1 'Montserrat';justify-content: flex-end;z-index: 1;}
 ol.gradient-list > li + li
	{margin-top: 2rem;}
ol.gradient-list > li, ol.gradient-list > li::before {
	 box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);}
.gradient-border
	{--border-width: 3px;position: relative;display: flex;justify-content: center;align-items: center;font-family: Lato, sans-serif;font-size: 2.5rem;text-transform: uppercase;color: white;background: transparent url(img/body.webp) repeat scroll 0%;border-radius: var(--border-width);}
.gradient-border::after
	{position: absolute;content: "";top: calc(-1 * var(--border-width));left: calc(-1 * var(--border-width));z-index: -1;width: calc(99% + var(--border-width) * 2);height: calc(100% + var(--border-width) * 2);background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);background-size: 300% 300%;
	 background-position: 0 50%;border-radius: calc(2 * var(--border-width));animation: moveGradient 4s alternate infinite;}
 @keyframes moveGradient {
	 50% {background-position: 100% 50%;}}
.dolt3
	{text-shadow : 1px 1px 1px #fff;color: #2C6381;font-size : 2.2rem;font-style: italic;line-height : 2.3rem;text-align : center;}	

@media screen and (max-width: 2200px) {
	.banner2{width: 30%;height: 400px}}
@media screen and (max-width: 1600px) {
	.banner2{width: 30%;height: 300px}}
@media screen and (max-width: 1050px) {
	main, aside{width : 800px}
	img {max-width : 100%}
	.banner1{width: 50%;height: 300px}
	.banner2{width: 40%;height: 250px}
	.banner4{height: 450px}}
@media (min-width:993px){
	.w3-modal-content{width:900px}}		
@media screen and (max-width: 900px) {
	details{max-width: 95%;}
	.container{max-width : 100%;}
	.div-market {width : 90%}
	.shadow,.p-ban{font-size:2.5em;}
	.banner1{width: 50%;height: 250px}}
@media screen and (max-width: 850px) {
	main, aside{width : 700px}
	.div-1 {background-image: url('img/hatter2.png');width: 600px;height: 450px;}
	.banner4{width: 70%;height: 400px;}}
@media (max-width:768px){
	.w3-modal-content{width:500px}
	.w3-modal,.w3-moda1{padding-top:50px}}		
@media screen and (max-width: 750px) {
	main, aside{width : 600px}
	.container{max-width : 100%;}
	.div-market {width : 90%;}
	.img-nev {max-width: 60%;}
	.banner1 {width: 60%}
	.banner2{width: 50%;height: 240px}
	.banner4{width: 80%;height: 350px;}
	.image-slideshow{width: 300px;}
	.image-slideshow > div{width: 300px;}}		
@media screen and (max-width: 650px) {
	main, aside{width : 550px}
	.banner1{width: 70%;height: 250px}
	.banner4{height: 350px}
	.div-1 {background-image: url('img/hatter3.png');width: 500px;height: 375px;}}
@media only screen and (max-width: 620px) {
  .menu, .main, .right{width: 100%;}}				
@media screen and (max-width: 600px) {
	main, aside{width : 500px}
	.div-1 {background-image: url('img/hatter4.png');width: 400px;height: 300px;}
	.shadow,.p-ban{font-size:2.3em;}
	.w3-modal-content
		{margin:0 10px;width:auto!important}
	.w3-modal,.w3-modal1{padding-top:30px}
	.w3-button{width:100%}
	.iras h2{font-size : 4.0rem;}
	video {max-width: 90%}
	.banner2{width: 60%;height: 230px}
	.banner1 {width: 70%}
	.banner4{height: 320px}}
@media screen and (max-width: 550px) {
	main, aside{width : 480px}
	.div-market {width : 95%;}
	.shadow,.p-ban{font-size:1.8em;}
	.dolt1{font-size:1.5em;}
	.banner1{width: 80%;height: 200px}
	ol.gradient-list img  {width: 100%; height: 70%}}
@media screen and (max-width: 500px){	
	main, aside{width : 450px}
	.iras h2{font-size : 3.5rem;}
	.banner2{width: 70%;height: 220px}
	.banner4 {width: 95%}}
@media screen and (max-width: 480px){	
	main, aside{width : 440px}}
@media screen and (max-width: 470px){	
	main, aside{width : 430px}	}
@media screen and (max-width: 460px) {
	main, aside{width : 410px}
	.div-1 {background-image: url('img/hatter5.png');width: 350px;height: 263px;}
	.dolt1{font-size:1.3em;}}
@media screen and (max-width: 450px) {
	main, aside{width : 400px}}
@media screen and (max-width: 430px) {
	main, aside{width : 390px}}
@media screen and (max-width: 420px) {
	main, aside{width : 380px}}
@media screen and (max-width: 410px) {
	main, aside{width : 370px}
	.banner2{height: 200px}}	
@media screen and (max-width: 400px) {
	main, aside{width : 360px}
	.div-1 {background-image: url('img/hatter6.png');width: 250px;height: 188px;}
	.iras h2{font-size : 2.5rem;}
	.iras {transform: translateZ(1px) scale(0.85);}
	.banner1{width: 80%;height: 200px}
	.banner4{height: 200px;}}
@media screen and (max-width: 420px) {
	main, aside{width : 350px}}
@media screen and (max-width: 380px) {
	main, aside{width : 340px}
	h1.i {font-size:3.8rem}
	.intro .style1 {font-size: 3.0rem}}
@media screen and (max-width: 370px) {
	main, aside{width : 330px}
	.banner2{height: 180px}}	
@media screen and (max-width: 360px) {
	main, aside{width : 320px}}
	h1.i{font-size:3rem}
@media screen and (max-width: 350px) {
	main, aside{width : 310px}}
@media screen and (max-width: 340px) {
	main, aside{width : 300px}}
@media screen and (max-width: 330px) {
	main, aside{width : 290px}}