/* --- Responsonsive Dropdown-Menue fuer Redaxo --- */ 

#menu-link { display: none; position: absolute; top: 0; right: 0; text-decoration: none; padding: 14px 15px; color: #FFF !important; background-color: #E2001A; z-index: 99; }

/* #navigation { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 99; } */

/* erste Ebene */
#navigation ul { position: relative; top: 0; left: 0; list-style: none; margin: 0; padding: 0 5px; }
#navigation li { position: relative; top: 0; left: 0; list-style-type: none; display: block; float: left; margin: 0; padding: 0; }

#navigation li a { display: block; width: 152px; height: 157px; margin: 0; padding: 0 5px;
font-size: 15px; line-height: 30px; color: #FFF; text-decoration: none; text-align: right; text-transform: uppercase; 
background-position: center; background-repeat: no-repeat; background-size: cover; 
border-bottom: 8px solid #; }

#navigation li a:hover { text-decoration: none; background-color: rgba(0,0,0,0.6); }
#navigation li a.rex-current,
#navigation li a.rex-active { color: #c8161e; }
 
/* zweite Ebene */
#navigation li ul { display: none; }

/*
#navigation li.rex-article-6 a { background-image: url(nav_news_events.jpg); border-bottom: 8px solid #e6007e; }
#navigation li.rex-article-2 a { background-image: url(nav_biographie.jpg); border-bottom: 8px solid #b6b228; color: #000; }
#navigation li.rex-article-3 a { background-image: url(nav_music_books.jpg); border-bottom: 8px solid #de8729; }
#navigation li.rex-article-4 a { background-image: url(nav_vocal_coach.jpg); border-bottom: 8px solid #c98ef8; }
#navigation li.rex-article-5 a { background-image: url(nav_references.jpg); border-bottom: 8px solid #339efc; }
#navigation li.rex-article-7 a { background-image: url(nav_contact.jpg); border-bottom: 8px solid #acabab; }
*/
#navigation li.rex-article-6 { background-image: url(nav_06.jpg); }
#navigation li.rex-article-2 { background-image: url(nav_02.jpg); }
#navigation li.rex-article-4 { background-image: url(nav_04.jpg); }
#navigation li.rex-article-10 { background-image: url(nav_10.jpg); }
#navigation li.rex-article-3 { background-image: url(nav_03.jpg); }
#navigation li.rex-article-5 { background-image: url(nav_05.jpg); }
#navigation li.rex-article-7 { background-image: url(nav_07.jpg); }

#navigation li.rex-article-6 a { border-bottom: 8px solid #e6007e; }
#navigation li.rex-article-2 a { border-bottom: 8px solid #339efc; }
#navigation li.rex-article-4 a { border-bottom: 8px solid #c98ef8; }
#navigation li.rex-article-10 a { border-bottom: 8px solid #c8161E; }
#navigation li.rex-article-3 a { border-bottom: 8px solid #de8729; }
#navigation li.rex-article-7 a { border-bottom: 8px solid #acabab; }

#navigation li.rex-article-6 a.rex-current { color: #e6007e; }
#navigation li.rex-article-2 a.rex-current { color: #acabab; }
#navigation li.rex-article-4 a.rex-current { color: #c98ef8; }
#navigation li.rex-article-10 a.rex-current { color: #c8161E; }
#navigation li.rex-article-3 a.rex-current { color: #de8729; }
#navigation li.rex-article-7 a.rex-current { color: #acabab; }


/*
.rex-article-1 a:hover { background-image: url(but1on.jpg); }
.rex-article-2 a:hover { background-image: url(but2on.jpg); }
.rex-article-3 a:hover { background-image: url(but3on.jpg); }
.rex-article-4 a:hover { background-image: url(but4on.jpg); }
.rex-article-5 a:hover { background-image: url(but5on.jpg); }
*/
/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */ 

@media screen and (max-width: 990px) { 
#navigation ul { padding: 0; }
#navigation li { width: 16.66%; }
#navigation li a { width: 93.94%; height: 150px; padding: 0 3.03%; }
}
/* height = 157 * 990 : width - 6 (zur Sicherheit) */
@media screen and (max-width: 960px) { #navigation li a { height: 146px; } }
@media screen and (max-width: 940px) { #navigation li a { height: 143px; } }
@media screen and (max-width: 920px) { #navigation li a { height: 140px; } }
@media screen and (max-width: 900px) { #navigation li a { height: 135px; } }
@media screen and (max-width: 880px) { #navigation li a { height: 132px; } }
@media screen and (max-width: 860px) { #navigation li a { height: 129px; } }
@media screen and (max-width: 840px) { #navigation li a { height: 126px; } }
@media screen and (max-width: 820px) { #navigation li a { height: 123px; } }
@media screen and (max-width: 800px) { #navigation li a { height: 120px; } }
@media screen and (max-width: 780px) { #navigation li a { height: 117px; } }

@media screen and (max-width: 768px) {  
#menu-link { display: block; }
	
#navigation { clear: both; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; max-height: 0; overflow: hidden; background-color: #f4f4f4; }
#navigation > ul ul { overflow: hidden; max-height: 0; }

#navigation.active, #navigation > ul ul.active { max-height: 55em; } 
#navigation ul { display: block; margin: 0; }
#navigation li { float: none; width: 100%; height: auto; margin: 0; padding: 0; border-left: none; background-image: none !important; }
#navigation li a { float: none; width: auto; height: auto; margin: 0; padding: 10px 10px 10px 20px;  font-size: 18px; line-height: 18px; border-bottom: 1px solid #808080 !important; color: #000; text-align: left; }
#navigation li a:hover { background-color: #AAA; color: #000 !important; }
#navigation li a.rex-current,
#navigation li a.rex-active { background-color: #DDD; color: #000 !important; }

}