@charset "utf-8";
/* CSS Document */
/*Musikkapelle Zell-Bechingen*/
/*Style der Navigation*/


/*Nichtsichtbarmachen des Menübutton für große Bildschirme*/
.menu-link { display: none;}

/*Navigation*/

.menu { 
	 float: right;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}


.menu ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
}

.menu > li > ul.sub-menu {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;
}

.menu ul li { 
	padding: 0px;
}

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

.menu ul li a { 
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em; 
	font-family: Georgia, Times, serif;
	font-style: italic;
	font-weight: normal;	
}

.menu ul li > a { 
	height:58px; 
	padding: 19px 12px; 
}

.menu ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 160px;
  background-color: #f4f4f4;
  border: 1px solid #CCC;
 }

.menu ul li:hover > ul {
	display: block;
}

.menu ul ul > li {
	position: relative;
}

.menu ul ul > li a {
	padding: 5px 15px 5px 10px;
	height: auto; 
	background-color: #f4f4f4;
	color:#000; 
}

.menu ul ul > li a:hover {
	background-color: #9bd3fc;
	color: #000; 
}
.menu ul ul ul {
	position: absolute;
	left: 100%;
	top:0;
}


/*Subnavigation*/

#subnavigation{
	margin: 50px;
	
}

#subnavigation li{
	list-style: none;
	border-bottom: 1px solid #3D4346;
}

#subnavigation li a{
	display: block;
	text-transform:uppercase;
	font-size: 16px; color:#2c3133;
	padding: 15px 0;
	
}

#subnavigation li a:hover{
	color: #06e5e5;
}
	


/* Typografie * * * * * * * * */

h1, h2, h3, h4, h5, h6{
	font-family: Georgia, Times, serif;
	font-style: italic;
	font-weight: normal;	
	margin-bottom: 15px;
}

h1{
	font-size: 48px;
	font-size: 3rem;
}

h2{
	font-size: 30px;
	font-size: 1.875rem;
	color: #500b12;
}

h2.white{
	font-size: 30px;
	font-size: 1.75rem;
	color: #fff; 
	display: block;
}

h3{
	font-size: 18px;
	font-size: 1.3125rem;
}


p {
	font-size: 16px;
	font-size: 1rem;
	margin: 0 0 15px;
}

a {
	color:#9bd3fc;
}

/*Responsives Menü mit Menübutton und aufklappbarem Dropdown*/
@media only screen and (min-width: 980px) and (max-width: 1279px) {
	
 a.menu-link { 
	  display: block;
	  color: #fff;
	  background-color: #500b12;
	  float: right;
	  text-decoration: none;
	  padding: 19px 10px;
	}
	
  .menu { 
	  clear: both;
	  min-width: inherit;
	  float: none;
	}
  .menu, .menu > ul ul { 
	  overflow: hidden;
	  max-height: 0;
	  background-color: #f4f4f4; 
	}
  .menu > li > ul.sub-menu {
	  padding: 0px;
	  border: none;
	}
  .menu.active, .menu > ul ul.active { 
	  max-height: 55em; 
	}
  .menu ul {
	  display: inline;  
	}
  .menu > ul {
	  border-top: 1px solid #808080; 
	}
 
	.menu ul li a{
	  color:#000;
	}
  .menu li, .menu > ul > li {
	  display: block;
	}
  .menu li a {
	  color: #000;
	  display: block; 
	  padding: 0.8em;
	  border-bottom: 1px solid #808080;
	  position: relative;
	  background: white;
	}
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul > li a { 
	  background-color: #e4e4e4; 
	  height:58px; 
	  padding: 19px 18px 19px 30px; 
	}
  .menu ul ul, .menu ul ul ul {
	  display: inherit; 
	  position: relative;
	  left: auto;
	  top:auto;
	  border:none; }
}	
	
@media only screen and (min-width: 760px) and (max-width: 979px) {
  
  
  a.menu-link { 
	  display: block;
	  color: #fff;
	  background-color: #500b12;
	  float: right;
	  text-decoration: none;
	  padding: 19px 10px;
	}
	
  .menu { 
	  clear: both;
	  min-width: inherit;
	  float: none;
	}
  .menu, .menu > ul ul { 
	  overflow: hidden;
	  max-height: 0;
	  background-color: #f4f4f4; 
	}
  .menu > li > ul.sub-menu {
	  padding: 0px;
	  border: none;
	}
  .menu.active, .menu > ul ul.active { 
	  max-height: 55em; 
	}
  .menu ul {
	  display: inline;  
	}
  .menu > ul {
	  border-top: 1px solid #808080; 
	}
  .menu ul li a{
	  color:#000;
	}
  .menu li, .menu > ul > li {
	  display: block;
	}
  .menu li a {
	  color: #000;
	  display: block; 
	  padding: 0.8em;
	  border-bottom: 1px solid #808080;
	  position: relative;
	  background: white;
	}
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul > li a { 
	  background-color: #e4e4e4; 
	  height:58px; 
	  padding: 19px 18px 19px 30px; 
	}
  .menu ul ul, .menu ul ul ul {
	  display: inherit; 
	  position: relative;
	  left: auto;
	  top:auto;
	  border:none; }
}


@media all and (max-width: 759px) {
  
  
  a.menu-link { 
	  display: block;
	  color: #fff;
	  background-color: #500b12;
	  float: right;
	  text-decoration: none;
	  padding: 19px 10px;
	}
	
  .menu { 
	  clear: both;
	  min-width: inherit;
	  float: none;
	}
  .menu, .menu > ul ul { 
	  overflow: hidden;
	  max-height: 0;
	  background-color: #f4f4f4; 
	}
  .menu > li > ul.sub-menu {
	  padding: 0px;
	  border: none;
	}
  .menu.active, .menu > ul ul.active { 
	  max-height: 55em; 
	}
  .menu ul {
	  display: inline;  
	}
  .menu > ul {
	  border-top: 1px solid #808080; 
	}
  .menu ul li a{
	  color:#000;
	}
  .menu li, .menu > ul > li {
	  display: block;
	}
  .menu li a {
	  color: #000;
	  display: block; 
	  padding: 0.8em;
	  border-bottom: 1px solid #808080;
	  position: relative;
	  background: white;
	}
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul > li a { 
	  background-color: #e4e4e4; 
	  height:58px; 
	  padding: 19px 18px 19px 30px; 
	}
  .menu ul ul, .menu ul ul ul {
	  display: inherit; 
	  position: relative;
	  left: auto;
	  top:auto;
	  border:none; }
	 
#subnavigation li a{
		font-size: 10px;
		
		
	}
}