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

#menu {top:0;z-index:100;position:fixed;width:100%;height:8svh;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:444svh;}
#koszon {position: relative;width: 100%;height: 100svh;margin:0;}
#koszonkicsi {position: relative;width: 70%;height:82svh;top:50%;left:50%;transform:translate(-50%, -50%);}
#koszon1, #koszon2 {position: relative;width: 45%;height:60svh;margin: 1% 2%;float: left;top: 50%;transform: translateY(-50%);}
#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: 100svh;margin:0;}
#rolunkkicsi {position:relative;width:70%;height:75svh;top:50%;left:50%;transform:translate(-50%, -50%);}
#rolunk #nev1, #rolunk #nev2, #rolunk #nev3 {width:30%;height:75svh;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:4svh;background:black;float: left;bottom: 0;left: 50%;transform: translate(-50%, 0%);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: 100svh;margin:0;}
#galeriakicsi {position: relative;width: 70%;height:80svh;top:50%;left:50%;transform:translate(-50%, -50%);}
#galeria1 {position: relative;width: 100%;height:6svh;}
#galeria2, #galeria3 {position: relative;width: 100%;height:27svh;margin: 1% 0;}
#ajanlas {position:relative;float:left;width:80%;height:25%;bottom: 0;left: 50%;transform: translate(-50%, -20%);}
#ajanlas #ajanlasa {color:white;font-size:2em;margin:0;}
#ajanlas1 {position:relative;width:95%;height:70%;top:39%;left:50%;transform:translate(-50%, -50%);border:2px solid white;border-radius:10px;}
#ajanlaskep {position:relative;width:10%;height:90%;top:50%;left:1%;transform:translateY(-50%);border-radius:50%;}
#ajanlasnev {position:relative;color:white;font-size:2em;text-align:center;margin:0;width:90%;left:10%;top:-93%;}
#ajanlasszoveg {position:relative;color:white;font-size:1.2em;text-align:center;margin:0;width:80%;left:15%;top:-90%;}

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


#arak {position: relative;width: 100%;height: 100svh;margin:0;}
#arakkicsi {position: relative;width:80%;height:82svh;top:50%;left:50%;transform:translate(-50%, -50%);}
#arakkicsi #csomag1, #arakkicsi #csomag2, #arakkicsi #csomag3 {position:relative;width:31.3%;height:45%;float:left;margin:1% 1%;background: #161616;border-radius:15px;box-shadow: -7px -7px 7px rgba(255,255,255,0.2), 7px 7px 7px rgba(255,255,255,0.1), inset -7px -7px 5px rgba(255,255,255,0.2), inset 7px 7px 5px rgba(255,255,255,0.1);}
#arakkicsi #csomag1 {background-image: url(silver.png);background-size: cover;}
#arakkicsi #csomag2 {background-image: url(fusion.png);background-size: cover;}
#arakkicsi #csomag3 {background-image: url(diamond.png);background-size: cover;}
#arakkicsi #csapatcsomag {position:relative;width:90%;height:45%;float:left;margin:1% 5%;background: #161616;border-radius:15px;box-shadow: -7px -7px 7px rgba(255,255,255,0.2), 7px 7px 7px rgba(255,255,255,0.1), inset -7px -7px 5px rgba(255,255,255,0.2), inset 7px 7px 5px rgba(255,255,255,0.1);}
#arakkicsi p {color:white;text-align:center;font-size:2vh;margin:0;}
#arakkicsi p:nth-child(1) {margin:2% 0 2% 0;font-size:3vh;}

#kapcsolat {position: relative;width: 100%;height: 100svh;margin:0;}
#kapcsolatkicsi {position:relative;width: 80%;height:80svh;top:50%;left:50%;transform:translate(-50%, -50%);}
#kontakt {position:relative;width:25%;height:100%;float:left;background: #161616;border-radius:15px;box-shadow: -7px -7px 7px rgba(255,255,255,0.2), 7px 7px 7px rgba(255,255,255,0.1), inset -7px -7px 5px rgba(255,255,255,0.2), inset 7px 7px 5px rgba(255,255,255,0.1);}
#kontakt #eler {position: absolute;top: 10%;left: 50%;transform: translateX(-50%);font-size:4vh;color:white;}
#kontakt #ikon1, #kontakt #ikon2, #kontakt #ikon3, #kontakt #ikon4 {position: absolute;left: 50%;transform: translateX(-50%);color:white;font-size:3vh;}
#kontakt #ikon1 {top:28%;}
#kontakt #ikon2 {top:47%;}
#kontakt #ikon3 {top:64%;}
#kontakt #ikon4 {top:78%;}
#kontakt #kiir1, #kontakt #kiir2, #kontakt #kiir3, #kontakt #kiir4, #kontakt #kiir5  {position:absolute;left:50%;transform:translateX(-50%);color:white;}
#kontakt #kiir1 {top:30%;font-size:2.7vh;}
#kontakt #kiir2 {top:35%;font-size:2.2vh;}
#kontakt #kiir3 {top:50%;font-size:2.7vh;}
#kontakt #kiir4 {top:66%;font-size:2.7vh;}
#kontakt #kiir5 {top:82%;font-size:1.9vh;text-decoration:none;color:white;}
#email {position:relative;width:68%;height:100%;right: -32%;background: #161616;border-radius:15px;box-shadow: -7px -7px 7px rgba(255,255,255,0.2), 7px 7px 7px rgba(255,255,255,0.1), inset -7px -7px 5px rgba(255,255,255,0.2), inset 7px 7px 5px rgba(255,255,255,0.1);}



@media (orientation: portrait) {
	body {width:100%;}
	#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);}
	
	
	#koszon {position: relative;width: 100%;height: 110svh;margin:0;}
	#koszonkicsi {position: relative;width: 90%;height: 90svh;}
	#koszon1, #koszon2 {position: relative;width: 96%;height:46svh;margin: 1% 2%;float:none;top:25%;}
	#koszon1 h1 {font-size:4.8vh;margin:5% 0;}
	
	
	#rolunk {height:215svh;top:2%;}
	#rolunkkicsi {width:90%;height:190svh;}
	#rolunk #nev1, #rolunk #nev2, #rolunk #nev3 {width:70%;height:58svh;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:8svh;transform: translate(-50%, 120%);}
	#rolunkgomb p {margin:6% 0;}
	
	
	#galeria {position: relative;width: 100%;height:200svh;margin:0;top:2%;}
	#galeriakicsi {width:90%;height:140svh;transform: translate(-50%, -64%);}
	#galeria1 {height: 5svh;}
	#galeria2 {height: 83svh;}
	#galeria1 p {font-size:2.7vh;text-align:center;}
	#galeriagomb {width:70%;float:none;transform:translate(-50%, -50%);top:0;left:50%;}
	#galeria2 #galeriafekvo {width: 0%;}
	#galeria2 #galeriaallo {width: 100%;}
	#galeria3 {height: 35svh;}
	#galeria3 #galeriagomb {width:70%;float:none;transform:translate(-50%, -50%);top:0;left:50%;}
	#galeria3 #galeriafekvo {width: 100%;margin:0;transform: translateY(10%);}
	#ajanlas {transform: translate(-50%, -5%);height:33%;}
	#ajanlas #ajanlasa {font-size:5em;margin:0;text-align:center;}
	#ajanlas1 {height:80%;top:42%;}
	#ajanlaskep {width: 27%;height:18%;top:2%;left:50%;transform:translate(-50%, 0%);}
	#ajanlasnev {font-size: 4em;top: 5%;width: 100%;left: 0;}
	#ajanlasszoveg {font-size:2.7em;width:100%;left:0;top:6%;}
	
	#arak {height: 350svh;}
	#arakkicsi {height: 330svh;}
	#arakkicsi #csomag1, #arakkicsi #csomag2, #arakkicsi #csomag3 {width:98%;height:20%;float:none;}
	#arakkicsi #csapatcsomag {width:98%;height:30%;float:left;margin:1% 1%;top:1%;}

	#kapcsolat {height: 250svh;}
	#kapcsolatkicsi {width: 90%;height:230svh;}
	#kontakt {width:100%;height:30%;float:none;}
	#email {width:100%;height:65%;right:0;top:2%;}

	
}