@charset "utf-8";
/* menu.css Ferienwohnung Büsken
   Gamradt Webdesign 2018  */


.menu_container, .anchor-link { display: none; }

.menu_container { width: 100%; }

.anchor-link {
	padding: 0.3rem 0.8rem 0.3rem 0.8rem ;
	margin-top: 0.7rem;
	position: absolute;
	top: 0;
	left: 3%;
	z-index: 3;
	color: #fff;	
	border-radius: 5px;
	}

	a.anchor-link  {font-size:1.5rem;font-weight:bolder;font-style:normal;color: #fff;background-color:#879d9d}
	a#menu-toggle span {color:#fff;}

	
.nav ul { list-style: none; padding: 0; margin: 0; }
	nav ul li {list-style:none;}
		nav ul li a {				
				text-decoration: none;
				font-style:normal;
			    }

.nav {width: 100%;border-bottom: 1px solid;	border-color: rgba(99,102,103,0.20);}
	.nav ul { text-align: center; }
		.nav ul li { display: inline-block; text-align: left; }
			.nav ul li a {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    font-style: normal;
    color: #E0E8EB;
    font-size: 0.9rem;
    background-color: #E1E1E2;
	}

body.active .inner-wrap:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: #EFEFEF;
	}

.inner-wrap, .nav { -webkit-transition: .2s margin ease;transition: .2s margin ease; display: block; position: relative; }

#mobile-nav ul {padding-top:6rem;}


/* Clear
------------------------------------------------------- */
.cf:before, .cf:after, .row:before, .row:after {
  content: "";
  display: table; }

.cf:after, .row:after {
  clear: both; }


/* Hauptmenü 
------------------------------------------------------- */

nav#nav ul li a {
    color: #4c5557;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
}

nav#nav ul, #menu_ebene_2 ul {margin-bottom:0;padding-bottom:0;margin-top:0;padding-top:0;}


/*Untermenü 
------------------------------------------------------- */

 #menu_ebene_2 ul {
	width:100%; height:auto;
	margin:0;padding: 0.3rem 0 0.3rem 4.5rem;
	background-color:#EFEFEF;
 }
 
  	#menu_ebene_2 ul li {display:inline-block; height:auto;padding:0.6rem 0 0.6rem 0;}
 		#menu_ebene_2 ul li a {color:#ebeaf3; }
 
/*Aktive Menülinks
------------------------------------------------------- */

.navi a:active, .navi a:hover, .navi a.clicked  {
    color: #363B3D !important;
   }


/* Menüleiste fixieren */

* html div#bereich_fix {  top:expression(auto);} 	
.fixed-navi {  top:0px;  position:fixed !important;  position:absolute;}	
* html .fixed-navi {  top:expression(documentElement.scrollTop);}	
/*Ansprechen im fixierten Zustand*/
div#bereich_fix .block.menu { padding-top:2.0rem;}
div#bereich_fix.fixed-navi {
    background-color: #ffffff;
    border-bottom: 1px solid;border-color:rgba(226,234,236,1.00);
    -webkit-box-shadow: 0px 2px 10px 2px rgba(142,143,144,0.31);
    box-shadow: 0px 2px 10px 2px rgba(142,143,144,0.31);
}

a.anker {
display:block; width:1px;height:1px;overflow:hidden;position:relative;
top:-35rem;
}

/* wenn herunter gescrollt wurde */

.fixed-navi .ul_menu_ebene_1 li a {font-size: 1.3rem;}
.fixed-navi #logo img {width:65%;float:right;margin-top:-9%;margin-bottom:1%;margin-right:2%;-webkit-transition:all ease 1s;transition:all ease 1s;}


@media only screen and (min-width: 480px) {
	.fixed-navi #logo {padding-top:9%;}
}



@media only screen and (min-width: 414px) {
	a.anker {top:-38rem;}
}

@media only screen and (min-width: 567px) { 
	
	.anchor-link {
	left: 3%;
	padding: 0.8rem 1.0rem 0.8rem 1.0rem;
	margin-top: 0.8rem;}
	a.anchor-link  {font-size:1.6rem;}
	
	#mobile-nav ul {padding-top: 10rem;}
	
}


#mobile-nav ul {
    padding-top: -8rem;
}


@media only screen and (min-width: 640px) { 
a.anker {top:-40rem;}
}


@media all and (max-width:767px){
	
#nav{display:none;}
   
.menu_container, .anchor-link { display: block; }
  
.inner-wrap{ float: left; margin-left: 0; width: 100%; }
  
body.active .inner-wrap  { margin-right: -100%; }
body.active .nav { margin-left: 0; }

.nav { float: left; margin-left: -100%; width: 70%; z-index: 2; padding: 0.6rem 0; border: none;  }
	  .nav ul { text-align: left; font-weight: normal; }
		  .nav ul li { display: block; }
			  .nav ul li a {
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-color: rgba(134,147,151,0.44);
    color: #4c5557;
    padding: 0.75rem;
    font-style: normal;
				}
				.nav ul li a:hover {background-color: #dad9f5;}
				
#menu_ebene_2 ul li { width:48%;margin-right:2%;color:#4c5557;}
  #menu_ebene_2 ul li:nth-of-type(2n) {margin-right:0;}				
    
}


 

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

	
/*mobiles Menü aus */
nav#mobile-nav, .menu_container, .cf{display:none;}

	.fixed-navi #logo {width:100%;}
	.fixed-navi #logo img {width:55%;	}

	a.anker {top:-17rem;}
}




@media only screen and (min-width: 1024px) { 
	
	.fixed-navi #logo {width:27%;margin:0;}	
	.fixed-navi #logo img {width:100%;}
	a.anker {top:-20em;}
	
	.fixed-navi .block_menu {padding-top:2%;}

}


@media only screen and (min-width: 1280px) { 
		.fixed-navi #logo {width:24%;padding-top: 3rem;}

	a.anker {top:-10rem;}
}

@media only screen and (min-width: 1440px) { 
.fixed-navi nav#nav header {font-size: 1.0rem;padding-top:2.0rem;}
	.fixed-navi .ul_menu_ebene_1 li a {font-size: 1.4rem;}
}


@media only screen and (min-width: 1920px) { 
	
	a.anker {top:-15rem;}	
	.fixed-navi nav#nav header {padding-top:0}
	.fixed-navi #logo {width:24%;padding-top:4rem;}
.fixed-navi .block_menu {padding-top: 0;}
	.fixed-navi .menu_100 { margin-top: 0;}
	.fixed-navi .ul_menu_ebene_1 li a {font-size: 1.6rem;}
	
}


@media only screen and (min-width: 2560px) { 
	
	a.anker {top:-20rem;}	
	
}