/* --> menu_01 ->bal logo jobbra igazitott menuk / mobile fixed bal menu jobb menuicon jobbrol jon be */
/* --> menu_02 ->nincs logo csak menuicon asztali mobil is fix jobbrol uszik be */
/* --> menu_03 ->2menus nincs hatter scrollra ujabb menu jon be! */



/* CSS Document */

@media only screen and (max-width: 768px) {	
	#menu_01 { width:100%; position:fixed; top:0; left:0; z-index:1000; background:var(--menu-hatterM); height:var(--menu-magassagM);}
	#menu_01 #menucontainer {width:var(--main-szelesseg); margin:0 auto;}
	#menu_01 .menupontok_mobile { position: fixed; top:var(--menu-magassagM); right:-100%; z-index:900; width:100%; text-align:center; transition-duration: var(--trans-dur-b); background:var(--menu_menupontokmobile-hatter);}
	#menu_01 .menupontok_mobile.o { top:var(--menu-magassagM); right:0; transition-duration: var(--trans-dur-b);}
	#menu_01 .menu_mobileicon { height:var(--menu-magassagM); width:var(--menu-magassagM); float:right;}
	#menu_01 .menu_mobileicon a img { width:100%;} #menu_01 .menu_mobileicon a img:hover { opacity:0.5; transform:scale(1.1,1.1);}
	#menu_01 #logo { width:var(--menu-logoszelessegM); height:var(--menu-magassagM); display:flex; align-items:center; float:left; }
	#menu_01 #logo img { width:100%; opacity:1; transform:scale(1,1);} 	#menu_01 #logo img:hover { opacity:1; transform:scale(1.05,1.05);}
	#menu_01 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeretM); display:block;height:var(--menu_menupontokmobile-magassag); text-transform: uppercase;}
	#menu_01 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszinM); display:block; line-height:var(--menu_menupontokmobile-magassag);  padding:0;}
	#menu_01 h3 a:hover {color: var(--menu-betuszin-hover); background: var(--menu-a-hatter-hover);}
	#menu_01:after { content: ''; display: block; clear: both;}
}
@media only screen and (min-width: 769px) {	
	#menu_01 { width:100%; background:var(--menu-hatter);}
	#menu_01 #menucontainer {width:var(--main-szelesseg); max-width:var(--main-maxszelesseg); margin:0 auto;}
	#menu_01 #menupontok { float:right;}
	#menu_01 #logo { width:var(--menu-logoszelesseg); margin:0 5% 0 0; height:var(--menu-magassag); display:flex; align-items:center; float:left; }
	#menu_01 #logo img { width:100%; opacity:1; transform:scale(1,1);} 	#menu_01 #logo img:hover { opacity:1; transform:scale(1.05,1.05);}
	#menu_01 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeret); display:inline-block;height:var(--menu-magassag); text-transform: uppercase;}
	#menu_01 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszin); background: var(--menu-a-hatter); display:block; line-height:var(--menu-magassag);  padding:0 1em;}
	#menu_01 h3 a:hover {color: var(--menu-betuszin-hover); background: var(--menu-a-hatter-hover);}
	#menu_01:after { content: ''; display: block; clear: both;}
}


@media only screen and (max-width: 768px) {	
	#menu_02 { width:100%; position:fixed; top:0; left:0; z-index:1000; background:var(--menu-hatterM); height:var(--menu-magassagM);}
	#menu_02 #menucontainer {width:var(--main-szelesseg); margin:0 auto;}
	#menu_02 .menupontok_mobile { position: fixed; top:var(--menu-magassagM); right:-100%; z-index:900; width:100%; height:100vh; text-align:left; transition-duration: var(--trans-dur-b); background:var(--menu_menupontokmobile-hatter);}
	#menu_02 .menupontok_mobile.o { top:var(--menu-magassagM); right:-30%; transition-duration: var(--trans-dur-b);}
	#menu_02 .menu_mobileicon { height:var(--menu-magassagM); width:var(--menu-magassagM); float:right;}
	#menu_02 .menu_mobileicon a img { width:100%;} #menu_02 .menu_mobileicon a img:hover { opacity:0.5; transform:scale(1.1,1.1);}
	#menu_02 #logo { width:var(--menu-logoszelessegM); height:var(--menu-magassagM); display:flex; align-items:center; float:left; }
	#menu_02 #logo img { width:100%; opacity:1; transform:scale(1,1);} 	#menu_01 #logo img:hover { opacity:1; transform:scale(1.05,1.05);}
	#menu_02 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeretM); display:block;height:var(--menu_menupontokmobile-magassag); text-transform: none; border-bottom:1px solid #ccc;}
	#menu_02 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszinM); display:block; line-height:var(--menu_menupontokmobile-magassag);  padding:0 5vw;}
	#menu_02 h3 a:hover {color: var(--menu-betuszin-hover); background: var(--menu-a-hatter-hover);}
	#menu_02:after { content: ''; display: block; clear: both;}
	#menu_02_tav {height:var(--menu-magassagM); width:100%; display:block;}
}
@media only screen and (min-width: 769px) {	
	#menu_02 #mobile { display:block!important;}
	#menu_02 { width:100%; position:fixed; top:0; left:0; z-index:1000; background:var(--menu-hatter); height:var(--menu-magassag);}
	#menu_02 #menucontainer {width:var(--main-szelesseg); max-width:var(--main-maxszelesseg); margin:auto; margin:0 auto;}
	#menu_02 .menupontok_mobile { position: fixed; top:var(--menu-magassag); right:-100%; z-index:900; width:100%; height:100vh; text-align: left; transition-duration: var(--trans-dur-b); background:var(--menu_menupontokmobile-hatter);}
	#menu_02 .menupontok_mobile.o { top:var(--menu-magassag); right:-50%; transition-duration: var(--trans-dur-b);}
	#menu_02 .menu_mobileicon { height:var(--menu-magassag); width:var(--menu-magassag); float:right;}
	#menu_02 .menu_mobileicon a img { width:100%;} #menu_02 .menu_mobileicon a img:hover { opacity:0.5; transform:scale(1.1,1.1);}
	#menu_02 #logo { width:var(--menu-logoszelesseg); height:var(--menu-magassag); display:flex; align-items:center; float:left; }
	#menu_02 #logo img { width:100%; opacity:1; transform:scale(1,1);} 	#menu_01 #logo img:hover { opacity:1; transform:scale(1.05,1.05);}
	#menu_02 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeret); display:block;height:var(--menu_menupontokdesktop-magassag); text-transform: none; border-bottom:1px solid #ccc;}
	#menu_02 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszin); display:block; line-height:var(--menu_menupontokdesktop-magassag);  padding:0 2vw;}
	#menu_02 h3 a:hover {color: var(--menu-betuszin-hover); background: var(--menu-a-hatter-hover);}
	#menu_02:after { content: ''; display: block; clear: both;}
	#menu_02_tav {height:var(--menu-magassag); width:100%; display:block;}
}


@media only screen and (max-width: 768px) {	
	#menu_03_2 { display:none!important;}
	#menu_03 { width:100%; position:fixed; -webkit-backface-visibility: hidden; top:0; left:0; z-index:1000; background:var(--menu-hatterM); height:var(--menu-magassagM);box-shadow: 0 0 10px 0 #000;}
	#menu_03 #menucontainer {width:var(--main-szelesseg); margin:0 auto;}
	#menu_03 .menupontok_mobile { position: fixed; top:var(--menu-magassagM); right:-100%; z-index:900; width:100%; text-align:center; transition-duration: var(--trans-dur-b); background:var(--menu_menupontokmobile-hatter);}
	#menu_03 .menupontok_mobile.o { top:var(--menu-magassagM); right:0; transition-duration: var(--trans-dur-b);}
	#menu_03 .menu_mobileicon { height:var(--menu-magassagM); width:var(--menu-magassagM); float:right;}
	#menu_03 .menu_mobileicon a img { width:100%;} #menu_03 .menu_mobileicon a img:hover { opacity:0.5; transform:scale(1.1,1.1);}
	#menu_03 #logo { width: 50%; height:var(--menu-magassagM); position: absolute; top: 0; left: 25%; text-align: center;}
	#menu_03 #logo img { width:var(--menu-logoszelessegM); opacity:1; transform:scale(1,1);} 	#menu_03 #logo img:hover { opacity:1; transform:scale(1.05,1.05);}
	#menu_03 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeretM); display:block;height:var(--menu_menupontokmobile-magassag); text-transform: uppercase;}
	#menu_03 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszinM); display:block; line-height:var(--menu_menupontokmobile-magassag);  padding:0; border-bottom:1px dotted var(--menu-betuszinM);}
	#menu_03 h3 a:hover {color: var(--menu-betuszin-hover); background: var(--menu-a-hatter-hover);}
	#menu_03:after { content: ''; display: block; clear: both;}
}
@media only screen and (min-width: 769px) {	
	#menu_03 { width:100%; position:absolute;  z-index:200; background: #fff; height:var(--menu-magassag); box-shadow: 0 0 10px 0 #000;}
	#menu_03_2 {background:var(--menu-hatter);  height: calc(0.5 * var(--menu-magassag)); position: fixed; z-index:200; width:100%; box-shadow: 0 0 10px 0 #000;}
	.menu_03_2 { transition-duration: var(--trans-dur-b); top:calc(-1 * var(--menu-magassag));}
	.menu_03_2_o { transition-duration: var(--trans-dur-b); top:0;}
	#menu_03 #menucontainer, #menu_03_2 #menucontainer {width:var(--main-szelesseg); max-width:var(--main-maxszelesseg); margin:0 auto;}
	#menu_03 #menupontok, #menu_03_2 #menupontok { float:right;}
	#menu_03 #logo { width: calc(1.7 * var(--menu-logoszelesseg)); height:calc(1.7 * var(--menu-magassag)); margin:0.2% 5% 0 0; top: 0; position: absolute; }
	#menu_03_2 #logo { width: calc(0.7 * var(--menu-logoszelesseg)); height:calc(0.7 * var(--menu-magassag)); margin:0.2% 5% 0 0;   top: 0; position: absolute; }
	#menu_03 #logo img, #menu_03_2 #logo img { width:100%; opacity:1; transform:scale(1,1);} 	#menu_03 #logo img:hover, #menu_03_2 #logo img:hover { opacity:1.0; transform:scale(0.95,0.95); top: 0;}
	#menu_03 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeret); display:inline-block;height:var(--menu-magassag); text-transform: uppercase;}
	#menu_03_2 h3 { margin:0; font-family:var(--menu-betutipus); font-size:var(--menu-betumeret); display:inline-block;height:calc(0.5 * var(--menu-magassag)); text-transform: uppercase;}
	#menu_03 h3 a { white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszin); background: var(--menu-a-hatter); display:block; line-height:var(--menu-magassag);  padding:0 1em; }
	#menu_03_2 h3 a {box-sizing: border-box; white-space:nowrap; font-weight:var(--menu-weight);  color: var(--menu-betuszin); background: var(--menu-a-hatter); display:block; line-height:calc(0.5 * var(--menu-magassag));  padding:0 1em;}
	#menu_03 h3 a:hover, #menu_03_2 h3 a:hover {color: var(--menu-betuszin-hover);  box-shadow: inset 0 -5px 0 var(--menu-a-hatter-hover);}
	#menu_03:after, #menu_03_2:after { content: ''; display: block; clear: both;}
}