/******************************************************************
 * CSS Rennclub Saarbrücken
 * Copyright © Blacktype Creative Media
 ******************************************************************/
 
 label.hamburg { 
   display: block;
   width: 74px; height: 60px; 
   position: absolute; 
   left: 50%;
   margin-left:-37px;
   border-radius: 4px;
   cursor:pointer; 
}

input#hamburg {display:none}

.line { 
   position: absolute; 
   left:14px;
   height: 4px; width: 45px; 
   background: #ffffff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 14px; }
.line:nth-child(2) { top: 26px; }
.line:nth-child(3) { top: 38px; }


/******************************************************************/
/* Navigation */

.menu-link { display: none; font-family: 'Poppins', sans-serif; font-size: 20px; line-height:60px; color: #ffffff; padding-left:0px; }

.menu { 
  text-align: center;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  font-weight:400;
}
.menu ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
}
.menu > li > ul.sub-menu {
	min-width: 70px;
	padding: 8px 0;
	background-color: #0033cc;
	border: 0px solid #ffffff;
}
.menu ul li { padding: 0px; }
.menu > ul > li { display: inline-block; }
.menu ul li a { display: block; text-decoration: none; color: #ffffff; font-size:20px; line-height:48px; }
.menu ul li > a { height:48px; padding: 0px 20px 0px 20px; }
.menu ul li a:hover { color: #ffffff; background: #003399; }
.menu ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 50px;
}
.menu ul li:hover > ul { display: block; border-left: 0px solid #f7e9c9; border-right: 0px solid #f7e9c9; }
.menu ul ul > li { position: relative; min-width:240px; text-align: left; font-family: 'Poppins', sans-serif; margin-left:0px; }
.menu ul ul > li a { padding: 8px 10px 8px 20px; height: auto; font-size:20px; font-weight:400; line-height: 28px; background-color: #003399; color:#ffffff; border-top: 1px solid #ffffff; }
.menu ul ul > li a:hover { background-color: #3ea832; color: #ffffff; }
.menu ul ul ul { position: absolute; left: 100%; top:0; }

.menu .select{
	text-decoration: none;
	color:#8ec0d0;
}

.menu .trenner{
	font-family: 'Poppins', sans-serif; font-size: 20px; line-height:48px; color: #fff; padding-left:24px; padding-right:24px;
}



/******************************************************************/
/* Media-Queries  1260 + */

@media only screen and (min-width : 1260px) {
	
		
		
}


/******************************************************************/
/* Media-Queries  960 - 1259 */

@media all and (min-width : 960px) and (max-width: 1259px) {
	
	.menu-link { display: none; font-family: 'Poppins', sans-serif; font-size: 20px; line-height:60px; color: #ffffff; padding-left:0px; }

	.menu { 
	  text-align: center;
	  -webkit-transition: all 0.3s ease;  
	  -moz-transition: all 0.3s ease;
	  -ms-transition: all 0.3s ease;
	  transition: all 0.3s ease;
	  font-family: 'Poppins', sans-serif;
	  font-weight:400;
	}
	.menu ul { 
	  padding: 0px;
	  margin: 0px;
	  list-style: none;
	  position: relative;
	  display: inline-table;
	}
	.menu > li > ul.sub-menu {
		min-width: 70px;
		padding: 8px 0;
		background-color: #0033cc;
		border: 0px solid #ffffff;
	}
	.menu ul li { padding: 0px; }
	.menu > ul > li { display: inline-block; }
	.menu ul li a { display: block; text-decoration: none; color: #ffffff; font-size:18px; line-height:48px; }
	.menu ul li > a { height:48px; padding: 0px 10px 0px 10px; }
	.menu ul li a:hover { color: #ffffff; background: #003399; }
	.menu ul ul { 
	  display: none; 
	  position: absolute; 
	  top:100%;
	  min-width: 50px;
	}
	.menu ul li:hover > ul { display: block; border-left: 0px solid #f7e9c9; border-right: 0px solid #f7e9c9; }
	.menu ul ul > li { position: relative; min-width:220px; text-align: left; font-family: 'Poppins', sans-serif; margin-left:0px; }
	.menu ul ul > li a { padding: 6px 5px 6px 10px; height: auto; font-size:18px; font-weight:400; line-height: 28px; background-color: #003399; color:#ffffff; border-top: 1px solid #ffffff; }
	.menu ul ul > li a:hover { background-color: #3ea832; color: #ffffff; }
	.menu ul ul ul { position: absolute; left: 100%; top:0; }
	
	.menu .select{
		text-decoration: none;
		color:#8ec0d0;
	}
	
	.menu .trenner{
		font-family: 'Poppins', sans-serif; font-size: 20px; line-height:48px; color: #fff; padding-left:12px; padding-right:12px;
	}

		
		
}

/******************************************************************/
/* Media-Queries  639 - 959 */

@media all and (min-width : 639px) and (max-width: 959px) {
	
	.menu ul li > a { height:auto; padding: 18px 0px 18px 0px; color: #ffffff; background:#003399; font-size:22px; line-height:30px; }
  
  a.menu-link { display: block; height:60px; color: #ffffff; text-decoration: none; text-align:center; font-family: 'Poppins', sans-serif; font-size:36px; line-height:60px; font-weight:400;}
  .menu { clear: both; min-width: inherit; float: none; text-align:center; }
  .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #ffffff; }
  .menu > li > ul.sub-menu { padding: 0px; border: none; }
  .menu.active, .menu > ul ul.active { max-height: 85em; }
  .menu ul { display: inline; }
  .menu > ul { border-top: 1px solid #ffffff; }
  .menu li, .menu > ul > li { display: block; margin-left:0px; }
  .menu li a { color: #ffffff; display: block; padding: 0.8 em; border-top: 1px solid #ffffff; position: relative; }
  .menu ul li a:hover { color: #ffffff; background:#3ea832; }
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 24px;
    padding: 18px 20px;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul { 
	  padding-top:0px;
	}
  .menu ul ul > li a { background-color: #3ea832; color: #ffffff; padding: 8px 0px 8px 0px; text-align: center; font-size:20px; font-weight:400; line-height: 28px; border-bottom:0px; }
  .menu ul ul > li a:hover { background-color: #003399; color: #ffffff; }
  .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
  
  .menu ul li:hover > ul { display: block; border-left: 0px solid #ffffff; border-right: 0px solid #ffffff; }
  
  .menu .trenner{
		display: none;
	}
	
	.menu .select{
		text-decoration: none;
		color:#8ec0d0;
	}

}


/******************************************************************/
/* Media-Queries  639 - */

@media all and (max-width : 639px) {
	
	
	.menu ul li > a { height:auto; padding: 18px 0px 18px 0px; color: #ffffff; background:#003399; font-size:22px; line-height:30px; }
  
  a.menu-link { display: block; height:60px; color: #ffffff; text-decoration: none; text-align:center; font-family: 'Poppins', sans-serif; font-size:36px; line-height:60px; font-weight:400;}
  .menu { clear: both; min-width: inherit; float: none; text-align:center; }
  .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #ffffff; }
  .menu > li > ul.sub-menu { padding: 0px; border: none; }
  .menu.active, .menu > ul ul.active { max-height: 85em; }
  .menu ul { display: inline; }
  .menu > ul { border-top: 1px solid #ffffff; }
  .menu li, .menu > ul > li { display: block; margin-left:0px; }
  .menu li a { color: #ffffff; display: block; padding: 0.8 em; border-top: 1px solid #ffffff; position: relative; }
  .menu ul li a:hover { color: #ffffff; background:#3ea832; }
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 24px;
    padding: 18px 20px;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul { 
	  padding-top:0px;
	}
  .menu ul ul > li a { background-color: #3ea832; color: #ffffff; padding: 8px 0px 8px 0px; text-align: center; font-size:20px; font-weight:400; line-height: 28px; border-bottom:0px; }
  .menu ul ul > li a:hover { background-color: #003399; color: #ffffff; }
  .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
  
  .menu ul li:hover > ul { display: block; border-left: 0px solid #ffffff; border-right: 0px solid #ffffff; }
  
  .menu .trenner{
		display: none;
	}
	
	.menu .select{
		text-decoration: none;
		color:#8ec0d0;
	}
	
}