body {background:#232323;margin:0;padding:0;width:100%;}

#menu {top:0;z-index:100;position:fixed;width:100%;height:8vh;color:red;display: block;}
#menu a {text-decoration:none;color:white;float:left;}
#logo {position:absolute;width:30%;height:100%;}
#logo img {width:12%;margin:1%;}
#logo #nev {height: 50%;width: 85%;float: right;font-size: 3vh;margin: 3% 0;}
#menunyit {width: 40%;height: 100%;float: right;position: relative;}
#menu1, #menu2, #menu3, #menu4 {width:22%;height:50%;font-size: 3vh;margin: 2.5% 0;float:left;}
#menu1 a, #menu2 a, #menu3 a, #menu4 a {text-align:center;}
#menunyit #menuki, #menunyit #menube {width:0;height:0;font-size:0;color:transparent;}

#contener {position:relative;width:100%;height:444vh;}
#koszon {position: relative;width: 100%;height: 100vh;margin:0;}
#koszonkicsi {position: relative;width: 70%;height: 70vh;transform: translate(20%, 25%);}
#koszon1, #koszon2 {position: relative;width: 45%;height: 62vh;margin: 1% 2%;float:left;}
#koszon1 h1 {font-size:6vh;color:white;text-align:center;margin:15% 0;}
#koszon1 p {font-size:3vh;color:white;text-align:center;}
#koszon2 img {width: 100%;margin: 12% 0;border-radius: 5%;}


#rolunk {position: relative;width: 100%;height: 100vh;margin:0;}
#rolunkkicsi {position:relative;width:70%;height:75vh;transform: translate(20%, 15%);}
#rolunk #nev1, #rolunk #nev2, #rolunk #nev3 {width:30%;height:75vh;margin:1% 1.2%;float:left;border: 4px solid;border-radius: 45px;border-color: #ffffff;}
#rolunk img {width: 95%;border-radius: 5%;margin:2% 0 0 2%;}
#rolunk h2 {font-size:3.5vh;color:white;text-align:center;margin:1% 0;}
#rolunk p {font-size:2.3vh;color:white;text-align:center;}
#rolunkgomb {position:relative;width:40%;height:4vh;background:black;float: left;transform: translate(74%, 100%);font-size: 3vh;text-align: center;border-radius: 50%;}
#rolunkgomb p {margin:1% 0;}
#rolunk a {text-decoration:none;color:white;}


#galeria {position: relative;width: 100%;height: 100vh;margin:0;}
#galeriakicsi {position: relative;width: 70%;height: 80vh;transform: translate(20%, 14%);}
#galeria1 {position: relative;width: 100%;height: 6vh;}
#galeria2, #galeria3 {position: relative;width: 100%;height: 38vh;margin: 1% 0;}

#galeria1 p {font-size:4vh;color:white;text-align: center;}
#galeriagomb {position:relative;width:40%;height:4vh;background:black;float:right;margin:12% 0;font-size: 3vh;text-align: center;border-radius: 50%;}
#galeria a {text-decoration:none;color:white;}
#galeria2 #galeriafekvo {width: 56%;}
#galeria2 #galeriaallo {width: 0%;}
#galeria3 #galeriagomb {position:relative;width:40%;height:4vh;background:black;float:left;margin:12% 0;font-size: 3vh;text-align: center;border-radius: 50%;}
#galeria3 #galeriafekvo {width: 40%;margin:0 0 0 18%;}


#arak {position: relative;width: 100%;height: 100vh;margin:0;}
#arakkicsi {position: relative;width: 70%;height: 70vh;transform: translate(20%, 25%);}


#kapcsolat {position: relative;width: 100%;height: 100vh;margin:0;}
#kapcsolatkicsi {position: relative;width: 70%;height: 70vh;transform: translate(20%, 25%);}


@media (orientation: portrait) {
	#menu {width: 100%;height: 80px;margin:0;z-index:1000;}
	#logo {height:100px;width: 90%;margin: 0 0 10% 0;}
	#nev {font-size:2.7vh;}
	#menunyit #menuki.nyitva, #menunyit #menube.nyitva {position: relative;font-size: 4em;right: -90%;top: 188%;color: white;width: 50px;height: 50px;}
	#menunyit #menuki.nyitva i, #menunyit #menube.nyitva i {top:0;left:10px;}
	#menunyit {margin: -120px 0px;width:100%;}
	#menu1.zarva, #menu2.zarva, #menu3.zarva, #menu4.zarva, #menu5.zarva  {position: relative;top:80px;height: 0;width: 0;font-size: 0;}
	#menu1.nyitva, #menu2.nyitva, #menu3.nyitva, #menu4.nyitva, #menu5.nyitva  {height: 100px;top: 180px;z-index: 100;font-size: 4vh;position: relative;float: none;width: 100%;text-align: center;background:#232323;margin:0;}
	#menu2.nyitva {transform:translateY(-2px);}
	#menu3.nyitva {transform:translateY(-4px);}
	#menu4.nyitva {transform:translateY(-6px);}
	#menu5.nyitva {transform:translateY(-8px);}
	
	
	#koszonkicsi {position: relative;width: 90%;height: 90vh;transform: translate(7%, 6%);}
	#koszon1, #koszon2 {position: relative;width: 96%;height: 46vh;margin: 1% 2%;float:none;}
	#koszon1 h1 {font-size:4.8vh;margin:5% 0;}
	
	
	#rolunk {height:200vh;}
	#rolunkkicsi {width:90%;height:190vh;transform: translate(7%, 5%);}
	#rolunk #nev1, #rolunk #nev2, #rolunk #nev3 {width:70%;height:56vh;margin:1% 14%;float:none;border: 4px solid;border-radius: 45px;border-color: #ffffff;}
	#rolunk p {font-size:2.5vh;margin: 1% 0;}
	#rolunkgomb {width:90%;height:8vh;transform: translate(5%, 120%);}
	#rolunkgomb p {margin:6% 0;}
	
	
	#galeria {position: relative;width: 100%;height: 140vh;margin:0;}
	#galeriakicsi {width:90%;height:140vh;transform: translate(7%, 7%);}
	#galeria1 {height: 5vh;}
	#galeria2 {height: 69vh;}
	#galeria1 p {font-size:2.7vh;text-align:center;}
	#galeriagomb {width:70%;float:none;transform: translate(20%, -90%);}
	#galeria2 #galeriafekvo {width: 0%;}
	#galeria2 #galeriaallo {width: 100%;}
	#galeria3 {height: 35vh;}
	#galeria3 #galeriagomb {width:70%;float:none;transform: translate(20%, 465%);}
	#galeria3 #galeriafekvo {width: 100%;margin:0;transform: translateY(65%);}
}