.main_menu_link { display: none;}
.main_menu {  
  float: left;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; 
 
}
.main_menu ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
  z-index: 100;
 
  
}
.main_menu > li > ul.sub-menu {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;
}
.main_menu ul li { padding: 0px; }
.main_menu > ul > li { display: inline-block; }

/* oberste Ebene icons*/
.main_menu > ul > li.has-submenu
{
	background-color: #244699;
	margin-right: 6px; 
}
.main_menu > ul > li.has-submenu a
{
	color: white;
	font-size: 0.95em;
}

.main_menu ul li a { display: block; text-decoration: none; color: #000; font-size: .9em; }
.main_menu ul li > a { height:36px; padding: 6px;}
.main_menu ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 160px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;
  
}
.main_menu ul li:hover > ul { display: block; }
.main_menu ul ul > li { position: relative; }
.main_menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #ffffff; color: black;}

/* 2. level hover */
.main_menu ul ul > li a { color: #000 !important; } 
.main_menu ul ul > li a:hover { background-color: #92d303; color: #000; } 
.main_menu ul ul ul { position: absolute; left: 100%; top:0; }

@media all and (max-width: 768px) {

/*@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {*/
  .example-header .container { width: 100%; }
  
  a.main_menu_link { display: block; color: #fff; background-color: #333; float: right; text-decoration: none; padding:10px 12px 10px 12px; margin-top: -40px; margin-right: 2px;}
  .main_menu { clear: both; min-width: inherit; float: none; }
  .main_menu, .main_menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; 
   -webkit-transition: all 1.3s ease-out;  
  -moz-transition: all 1.3s ease-out;
  -ms-transition: all 1.3s ease-out;
  transition: all 1.3s ease-out; 
  }
  .main_menu > li > ul.sub-menu { padding: 0px; border: none; 
   }
  .main_menu.active, .main_menu > ul ul.active { max-height: 55em; background-color: #ffffff; } /* hintergrund hinter 2. ebene */
  
  .main_menu ul { display: inline; }
  .main_menu > ul { border-top: 1px solid #808080;  }
  .main_menu li, .main_menu > ul > li { display: block; }
  .main_menu li a { color: #000; display: block; padding: 0.8em; border-bottom: 1px solid #808080; position: relative; }
  .main_menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.25em 0.5em;
  }
  .main_menu li.has-submenu > a.active:after {
    content: "-";
  }
  .main_menu ul ul > li a { background-color: #e4e4e4; height:auto; padding: 10px 10px 10px 15px;}
  .main_menu ul ul, .main_menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
}

@media all and (max-width: 375px) { /* mobile */
  
  a.main_menu_link { margin-top: -40px; margin-right: 2px;}
}

/*MAIN MENU DESKTOP*/
.main_menu_link_desktop { display: none;}
.main_menu_desktop {  
  float: left;
  -webkit-transition: all 2.3s ease;  
  -moz-transition: all 2.3s ease;
  -ms-transition: all 2.3s ease;
  transition: all 2.3s ease; 
}
.main_menu_desktop ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
  z-index: 100;
 
  	
}
.main_menu_desktop > li > ul.sub-menu_desktop {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;

}
.main_menu_desktop ul li { padding: 0px;
   }
   

.main_menu_desktop > ul > li { display: inline-block; 
}

/* oberste Ebene icons*/
.main_menu_desktop > ul > li.has-submenu_desktop
{
	background-color: #244699;
	margin-right: 8px;
	
}



.main_menu_desktop > ul > li.has-submenu_desktop a /*  links 2. ebene */
{
	color: white;
	font-size: 0.95em;
	
}

.main_menu_desktop ul li a { display: block; text-decoration: none; color: #000; font-size: .9em;  

}
.main_menu_desktop ul li > a { height:36px; padding: 6px;}
.main_menu_desktop ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 220px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;  
  
}
.main_menu_desktop ul li:hover > ul { display: block;
   }
.main_menu_desktop ul ul > li { position: relative; }
.main_menu_desktop ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #ffffff; color: black;}

/* 2. level hover */
.main_menu_desktop ul ul > li a { color: #000 !important; } 
.main_menu_desktop ul ul > li a:hover { background-color: #92d303; color: #000; } 
.main_menu_desktop ul ul ul { position: absolute; left: 100%; top:0; }