* {background:#fbe5bb;padding:0;margin:0;}
body {width:100%;margin:0;padding:0;}
i, h1, h2, h3, h4, h5, h6, ::marker {color:#fbe5bb;font-size:0;}
ul, li {height:0;}

#fekvo, #fekvokiir, #telefon, #telefon1, #telefon2 {width:0;height:0;font-size:0;}
#menu a {color:black;text-decoration:none;}
#logo {width:25%;height: 80px; float:left;margin:0 0 0 8%;}
#menunyit {width:60%;height: 80px;float:left;margin:0;}
#menunyit #menuki, #menunyit #menube {width:0;height:0;}
#menunyit #menuki i, #menunyit #menube i{font-size:0em;}
#nev1, #nev2{width:35%;height:30px; float: left;text-align: left;font-size: 4vh;margin:20px 0;font-family: 'Dancing Script', cursive;}
#nev1{text-align: right;width:42%;}
#logo1{width:80px;height: 80px; float: left;background-image: url(logo.png);background-size: cover;}
#menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {text-align: center;font-size: 4vh;font-family: 'Dancing Script', cursive;width:12%;height: 30px; float: left;margin:20px 0;}
#menu4 {width:21%;margin:20px;}
#menu5 {width:14%;margin:20px 30px 20px 20px;}
#logo:hover, #menu1:hover , #menu2:hover , #menu3:hover , #menu4:hover, #menu5:hover, #menu6:hover {animation :menufokus 2.5s ;}
@keyframes menufokus {
	0%, 100% {filter:none;}
	50% {filter:blur(2px);}
}
.contener {position: relative;width: 100%;height: calc(100vh - 80px);top:0;overflow: auto;scroll-behavior:smooth;scroll-snap-type:y mandatory;}

#kozep{transition:1s;position: relative; top:3%;width:80%;height:86%;margin: 0 10% 1% 10%;overflow:hidden;}
#kozep #bal {position: relative;top:0;left:0;width:15%;height:100%;margin:0;background:transparent;float:left;z-index:1;}
#kozep #jobb {position: relative;top:0;left:71%;width:15%;height:100%;margin:0;background:transparent;float:left;z-index:1;}
#kozep i {color:black;position:relative;top:50%;left:50%;transform: translate(-50% , -50%);font-size:6vh;background:transparent;}

#kep1.active, #kep2.active, #kep3.active, #kep4.active, #kep7.active, #kep8.active, #kep9.active, 
#kep13.active, #kep14.active, #kep16.active, #kep17.active, #kep18.active, #kep19.active, #kep20.active,
#kep21.active, #kep22.active, #kep24.active, #kep25.active, #kep26.active, #kep27.active, #kep28.active, #kep29.active, #kep30.active, 
#kep31.active, #kep33.active, #kep34.active, #kep35.active, #kep36.active, #kep37.active, #kep38.active, #kep39.active, #kep40.active,
#kep41.active, #kep42.active, #kep44.active {position:absolute;width:71%;background-size:contain;background-repeat:no-repeat;background-position:center;float:left;}

#kep5.active, #kep6.active, #kep10.active, #kep11.active, #kep12.active, #kep15.active, #kep23.active, #kep32.active, #kep43.active
{position:absolute;height:100%;left:50%;transform:translateX(-50%);background-size:contain;background-repeat:no-repeat;background-position:center;float:left;}
 
 
#kep1span.active, #kep2span.active, #kep3span.active, #kep4span.active, #kep5span.active, #kep6span.active, #kep7span.active, #kep8span.active, #kep9span.active, #kep10span.active, 
#kep11span.active, #kep12span.active, #kep13span.active, #kep14span.active, #kep15span.active, #kep16span.active, #kep17span.active, #kep18span.active, #kep19span.active, #kep20span.active,
#kep21span.active, #kep22span.active, #kep23span.active, #kep24span.active, #kep25span.active, #kep26span.active, #kep27span.active, #kep28span.active, #kep29span.active, #kep30span.active, 
#kep31span.active, #kep32span.active, #kep33span.active, #kep34span.active, #kep35span.active, #kep36span.active, #kep37span.active, #kep38span.active, #kep39span.active, #kep40span.active,
#kep41span.active, #kep42span.active, #kep43span.active, #kep44span.active {color:white;position:absolute;bottom:0;background:transparent;font-size:2.5em;left:50%;transform:translateX(-50%);}


#kep1.notactive, #kep2.notactive, #kep3.notactive, #kep4.notactive, #kep5.notactive, #kep6.notactive, #kep7.notactive, #kep8.notactive, #kep9.notactive, #kep10.notactive, 
#kep11.notactive, #kep12.notactive, #kep13.notactive, #kep14.notactive, #kep15.notactive, #kep16.notactive, #kep17.notactive, #kep18.notactive, #kep19.notactive, #kep20.notactive,
#kep21.notactive, #kep22.notactive, #kep23.notactive, #kep24.notactive, #kep25.notactive, #kep26.notactive, #kep27.notactive, #kep28.notactive, #kep29.notactive, #kep30.notactive, 
#kep31.notactive, #kep32.notactive, #kep33.notactive, #kep34.notactive, #kep35.notactive, #kep36.notactive, #kep37.notactive, #kep38.notactive, #kep39.notactive, #kep40.notactive,
#kep41.notactive, #kep42.notactive, #kep43.notactive, #kep44.notactive {position:absolute;width:100%;left:150%;}

#kep1span.notactive, #kep2span.notactive, #kep3span.notactive, #kep4span.notactive, #kep5span.notactive, #kep6span.notactive, #kep7span.notactive, #kep8span.notactive, #kep9span.notactive, #kep10span.notactive, 
#kep11span.notactive, #kep12span.notactive, #kep13span.notactive, #kep14span.notactive, #kep15span.notactive, #kep16span.notactive, #kep17span.notactive, #kep18span.notactive, #kep19span.notactive, #kep20span.notactive,
#kep21span.notactive, #kep22span.notactive, #kep23span.notactive, #kep24span.notactive, #kep25span.notactive, #kep26span.notactive, #kep27span.notactive, #kep28span.notactive, #kep29span.notactive, #kep30span.notactive, 
#kep31span.notactive, #kep32span.notactive, #kep33span.notactive, #kep34span.notactive, #kep35span.notactive, #kep36span.notactive, #kep37span.notactive, #kep38span.notactive, #kep39span.notactive, #kep40span.notactive,
#kep41span.notactive, #kep42span.notactive, #kep43span.notactive, #kep44span.notactive {color:black;position:absolute;bottom:7%;background:transparent;font-size:2.5em;left:150%;transform:translateX(-50%);}

#vissza {position:absolute;top:0;left:0;width:0;height:0;font-size:0;}

@media only screen and (max-width: 1460px) {
	#menu {position: fixed;top:0;left:0;width: 80%;height: 80px;margin: 0 10%;z-index:1;}
	#menu a {color:black;text-decoration:none;}
	#logo {width:79%;height: 80px; float:left;margin:0 10% 0 10%;}
	#menunyit {width:99%;height:0px;margin:0;}
	#menunyit #menuki.nyitva , #menunyit #menube.nyitva {width: 48px;height: 50px;top: 20%;right:0;position: absolute;}
	#menunyit #menuki.nyitva i, #menunyit #menube.nyitva i{color:black;font-size:3em;width: 48px;height: 50px;top: 20%;right:0;position: absolute;}
	#menunyit #menuki.zarva, #menunyit #menube.zarva {font-size:0em;width: 0px;height: 0px;top: 20%;position: absolute;}
	#nev1, #nev2{width:35%;height:30px; float: left;text-align: left;font-size: 4vh;margin:20px 0;font-family: 'Dancing Script', cursive;}
	#nev1{text-align: right;width:42%;}
	#logo1{width:80px;height: 80px; float: left;background-image: url(logo.png);background-size: cover;}
	#menu1.nyitva, #menu2.nyitva, #menu3.nyitva, #menu4.nyitva, #menu5.nyitva, #menu6.nyitva {text-align: center;font-size: 4vh;font-family: 'Dancing Script', cursive;width:101%;margin:0;height: 90px;left:-3px;position:relative;transition:1s;}
	#menu1.zarva, #menu2.zarva, #menu3.zarva, #menu4.zarva, #menu5.zarva, #menu6.zarva {text-align: center;font-size: 0vh;font-family: 'Dancing Script', cursive;width:100%;margin:0;height: 0px;transition:1s;}
	#logo:hover, #menu1:hover , #menu2:hover , #menu3:hover , #menu4:hover, #menu5:hover, #menu6:hover {animation :menufokus 2.5s ;}
	@keyframes menufokus {
		0%, 100% {filter:none;}
		50% {filter:none;}
	}
}

@media only screen and (max-width: 1367px) {
	#menu1.nyitva, #menu2.nyitva, #menu3.nyitva, #menu4.nyitva, #menu5.nyitva, #menu6.nyitva {font-size: 5vh;}
}

@media (orientation: portrait) and (max-width: 600px) {
	* {background:#fbe5bb;}
	#menu {width: 100%;height: 80px;margin:0;z-index:1000;}
	#logo {height:80px;width: 90%;margin: 0 0 10% 0;}
	.contener {scroll-snap-type:none;top:80px;}
	#nev1, #nev2 {font-size:2.7vh;}
	#logo1 {margin:10px 0 0 0;width: 45px;height: 45px;}
	#menunyit #menuki.nyitva, #menunyit #menube.nyitva {font-size: 0.7em;right:5%;}
	#menunyit #menuki.nyitva i, #menunyit #menube.nyitva i {top:0;left:10px;}
	#menunyit {margin: -120px 0px;}
	#menu1.zarva, #menu2.zarva, #menu3.zarva, #menu4.zarva, #menu5.zarva, #menu6.zarva  {position: relative;top:80px;}
	#menu1.nyitva, #menu2.nyitva, #menu3.nyitva, #menu4.nyitva, #menu5.nyitva, #menu6.nyitva  {height: 50px;top:80px;z-index:100;font-size:4vh;}
	#menu2.nyitva {transform:translateY(-2px);}
	#menu3.nyitva {transform:translateY(-4px);}
	#menu4.nyitva {transform:translateY(-6px);}
	#menu5.nyitva {transform:translateY(-8px);}
	#menu6.nyitva {transform:translateY(-10px);}
	.contener {height: calc(90vh - 80px);}
	#kozep {height:90%;margin: 10% 10% 0 10%;}
	#kozep #bal, #kozep #jobb {height:50px;width:50px;top:85%;z-index:1;background:darkgray;border-radius:20%;}
	#kozep #jobb {left:62%;}
	#kep1.notactive, #kep2.notactive, #kep3.notactive, #kep4.notactive, #kep5.notactive, #kep6.notactive, #kep7.notactive, #kep8.notactive, #kep9.notactive, #kep10.notactive, 
	#kep11.notactive, #kep12.notactive, #kep13.notactive, #kep14.notactive, #kep15.notactive, #kep16.notactive, #kep17.notactive, #kep18.notactive, #kep19.notactive, #kep20.notactive, 
	#kep21.notactive, #kep22.notactive, #kep23.notactive, #kep24.notactive, #kep25.notactive, #kep26.notactive, #kep27.notactive, #kep28.notactive, #kep29.notactive, #kep30.notactive, 
	#kep31.notactive, #kep32.notactive, #kep33.notactive, #kep34.notactive, #kep35.notactive, #kep36.notactive, #kep37.notactive, #kep38.notactive, #kep39.notactive, #kep40.notactive, 
	#kep41.notactive, #kep42.notactive, #kep43.notactive, #kep44.notactive {height:78%;} 
	#kep1.active, #kep2.active, #kep3.active, #kep4.active, #kep5.active, #kep6.active, #kep7.active, #kep8.active, #kep9.active, #kep10.active, 
	#kep11.active, #kep12.active, #kep13.active, #kep14.active, #kep15.active, #kep16.active, #kep17.active, #kep18.active, #kep19.active, #kep20.active, 
	#kep21.active, #kep22.active, #kep23.active, #kep24.active, #kep25.active, #kep26.active, #kep27.active, #kep28.active, #kep29.active, #kep30.active, 
	#kep31.active, #kep32.active, #kep33.active, #kep34.active, #kep35.active, #kep36.active, #kep37.active, #kep38.active, #kep39.active, #kep40.active, 
	#kep41.active, #kep42.active, #kep43.active, #kep44.active {width:100%;left:50%;top:38%;transform:translate(-50%, -50%);}
	#kep5.active, #kep6.active, #kep10.active, #kep11.active, #kep12.active, #kep15.active, #kep23.active, #kep32.active, #kep43.active {height:78%;width:auto;}
	#kep1span.active, #kep2span.active, #kep3span.active, #kep4span.active, #kep5span.active, #kep6span.active, #kep7span.active, #kep8span.active, #kep9span.active, #kep10span.active, 
	#kep11span.active, #kep12span.active, #kep13span.active, #kep14span.active, #kep15span.active, #kep16span.active, #kep17span.active, #kep18span.active, #kep19span.active, #kep20span.active, 
	#kep21span.active, #kep22span.active, #kep23span.active, #kep24span.active, #kep25span.active, #kep26span.active, #kep27span.active, #kep28span.active, #kep29span.active, #kep30span.active, 
	#kep31span.active, #kep32span.active, #kep33span.active, #kep34span.active, #kep35span.active, #kep36span.active, #kep37span.active, #kep38span.active, #kep39span.active, #kep40span.active, 
	#kep41span.active, #kep42span.active, #kep43span.active, #kep44span.active {bottom:10%;color:black;}
	#vissza {position: absolute;top: 95%;left: 50%;transform: translate(-50%);width: 65%;height: 4%;font-size: 16px;text-align: center;border: 1px solid;border-radius: 21px;}
	#vissza a {color:black;text-decoration:none;}
}