.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

body {
	margin:0;
}
nav {
	min-height:60px;
        
	/* Old browsers */
	
}


/* stylowanie dla mobilnych wersji */
#menu {
	list-style:none; 
	padding:0; 
	margin:0; 		
	font-size:0;
	display: block;		
}
nav-ul-li {
	display: inline-block;		
	max-width:100px;
	min-width:15%;
	text-align: center;
}	
#nav-ul-li-a {
	font: bold 14px/60px 'arial', sans-serif;
	color:#333;
	height:60px;
	display: block;
	text-decoration: none;		
	border-right:1px solid #444;
	border-left:1px solid #111;
}
.active:hover, .active:active, .active:focus {
	background: #33ccff; /* Old browsers */
       
        color: blue;
	
}

#input-toggle {
	opacity:0;
	position: absolute;
	top:0;
	left:0;
}

.navigation-toggle { 
	display:block;
	width:100px; 
	height:24px; 
	margin:5px; 
	text-align:center; 
	border-radius:4px; 
	border:1px solid #404040; 
	background-image: linear-gradient(to bottom, #ddd, #fff); 
	background-repeat: repeat-x; 
	color: #333; 
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
	padding-top:10px; 
	position:  absolute;
	top:2px; right:2px; 
	cursor:pointer; 
}
.navigation-toggle span { 
	background-color: #F5F5F5; 
	border-radius: 1px 1px 1px 1px; 
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	display:block; 
	height:2px; 
	width:18px; 
	margin:4px auto; 
}



#menu {
	margin-top:55px;
	overflow: hidden;				
	max-height:0;
	transition:max-height 0.35s ease 0s;
	-webkit-transition:max-height 0.35s ease 0s;
	-moz-transition:max-height 0.35s ease 0s;
}
nav #input-toggle:checked + ul {
	max-height:500px;
}
#nav-ul-li {
	border:0;
	width:100%;
	max-width: 100%;
	min-width:0;
	border-bottom:1px solid #333;

}
#nav-ul-li-a {
	display: block;
	text-align: center;
}