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:76%;height:84vh;margin:8vh 12%;overflow:hidden;}
#list {position:relative;width:80%;height:85vh;margin:0 10%;}
#list #item {position:absolute;width:150px;height:200px;top:85%;transform:translateY(-70%);left:70%;border-radius:20px;background-position:50% 50%;background-size:cover;transition:1s;z-index:100;}
#list #item:nth-child(1),#list #item:nth-child(2) {top:0;left:0;transform:translate(0, 0);border-radius:0;width:100%;height:100%;background-position:0 0;}
#list #item:nth-child(3) {left:70%;}
#list #item:nth-child(4) {left:calc(70% + 180px);}
#list #item:nth-child(5) {left:calc(70% + 360px);}
#list #item:nth-child(6) {left:calc(70% + 540px);}
#list #item:nth-child(n+7) {left:calc(70% + 720px);}

#mozog {position:absolute;top:50%;right:5%; z-index:100;width:90%;display:flex;gap:92%;align-items;center;}
#mozog button {color:#fff;width:50px;height:50px;border-radius:50%;background-color:#14ff72cb;border:none;outline:none;font-size:16px;font-family:monospace;font-weight:bold;transition:.5s;cursor:pointer;}


@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);}
	
	#contener {position:relative;width:94%;height:84vh;margin:8vh 3%;overflow:hidden;}
	#list {position:relative;width:800px;height:534px;margin:40% calc(50% - 400px);}
	#list #item {position:absolute;width:150px;height:200px;top:140%;transform:translateY(-70%);left:45%;border-radius:20px;background-position:50% 50%;background-size:cover;transition:1s;z-index:100;}
	#list #item:nth-child(1),#list #item:nth-child(2) {top:0;left:0;transform:translate(0, 0);border-radius:0;width:100%;height:100%;background-position:0 0;}
	#list #item:nth-child(3) {left:45%;}
	#list #item:nth-child(4) {left:calc(45% + 180px);}
	#list #item:nth-child(5) {left:calc(45% + 360px);}
	#list #item:nth-child(6) {left:calc(45% + 540px);}
	#list #item:nth-child(n+7) {left:calc(45% + 720px);}

	#mozog {position:absolute;top:80%;right:10%; z-index:100;width:80%;display:flex;gap:62%;align-items;center;}
	#mozog button {color:#fff;width:120px;height:120px;border-radius:50%;background-color:#14ff72cb;border:none;outline:none;font-size:60px;font-family:monospace;font-weight:bold;transition:.5s;cursor:pointer;}

}