/* ******************************** */
/* 								 	*/
/* 	Styles zu Ambrosia Nav Menu 	*/
/* 								 	*/
/* ******************************** */


									/* Nav Menu generell */

.nav 						{ overflow:hidden; margin-top:-3px; }

.nav a 						{ float:left; padding:14px 16px; text-decoration:none;
									  -webkit-transition:background 1s; transition:background 1s; font-size:13px; color:#851c20; }
									  
.nav, .nav a 				{ background:-webkit-linear-gradient(#eec591, #eeecea, #eec591);
                                background:linear-gradient(#eec591, #eeecea, #eec591); }

.nav a:hover,.nav a:active { -webkit-user-select:none; -webkit-touch-callout:none;
                                background:-webkit-linear-gradient(#eeecea, #eec591, #eeecea);
                                background:linear-gradient(#eeecea, #eec591 50%, #eeecea); }

.nav .icon 					{ display:none; }

@media screen and (max-width: 520px) {

									/* Wenn Hamburger sichtbar / zugeklappt */
									
  .nav a 					{ display:none;}
  .nav a.icon				{ display:block; float:right; }
  .nav .icon:hover			{ background:-webkit-linear-gradient(#eec591, #eeecea, #eec591); 
                               background:linear-gradient(#eec591, #eeecea, #eec591); }

                                    /* Wenn Kreuz sichtbar / ausgeklappt */
                           
  .nav.ausgeklappt a 		{ width:33.33%; display:block; text-align:left; box-sizing:border-box; 
                                border-bottom:1px solid rgba(133, 28, 32, 0.2); 
                                border-right:1px solid rgba(133, 28, 32, 0.2); }
  .nav.ausgeklappt .icon 	{ width:100%; } 
}

@media screen and (min-width: 521px) { 		/* großer Bildschirm */
																
  .nav 						{ display:-webkit-flex; display:flex; }				  		  
  .nav a					{ -webkit-flex:1 auto; flex:1 auto; text-align:center; }		
}

/* Icon Hamburger oder Icon Kreuz */

.container 					{ cursor:pointer; float:right; }

.bar1, .bar2, .bar3 		{ width:30px; height:3px; margin:4px 0; 
									  -webkit-transition:0.25s; transition:0.25s; background:#851c20; }
									  
.change .bar1 				{ -webkit-transform:rotate(-45deg) translate(-5px, 5px); 
									  transform:rotate(-45deg) translate(-5px, 5px); }
									  
.change .bar2 				{ opacity:0; }

.change .bar3 				{ -webkit-transform:rotate(45deg) translate(-4px, -5px);
    								  transform:rotate(45deg) translate(-4px, -5px); }