#menu{position:fixed;left: 0;bottom: 0;text-align:center;padding: 16px 11px;width:calc( 100% - 22px );z-index: 999;background:var(--creme-white)}
#menu ul{margin:0px;padding:0px;list-style:none;display: grid;grid-template-columns: repeat(5, 1fr);grid-column-gap: 5px;grid-row-gap: 5px;}
#menu ul li{grid-column-start: span 1;}
#menu ul li a{color:var(--szary-80);text-decoration:none}
#menu ul li .ikon-kolo, .menu li .ikon-kolo{width:30px;height:30px}
#menu ul li .active .ikon-kolo{background:var(--black);color:var(--creme-white)}
#menu ul li .produkcja{color:var(--primary);}
#menu ul li .produkcja .ikon-kolo span{color:var(--primary);}
#menu ul li .produkcja.active .ikon-kolo{background:var(--primary);color:var(--creme-white)}
#menu ul li .ikon-kolo span{color:var(--black)}
#menu ul li .active .ikon-kolo span{color:var(--creme-white);}
#menu ul li .active{color:var(--black);font-weight:600}
#menu ul li .produkcja.active{color:var(--primary)}

#header{border-radius: 0px 0px 24px 24px; background: var(--creme-white);padding:12px 0px;width:100%;text-align:center;position: fixed; z-index: 9;top:0}
#header a{text-decoration:none}
#header a.active .ikon-kolo{background:var(--szary-100)}
#header a.active .ikon-kolo span{color:var(--szary-10)}

#user-button{display:inline-block; position:relative;border-radius:41px;padding:9px 16px;background:var(--szary-10); width: calc(100% - 200px); vertical-align: middle;text-align:left;    transition: all 1s ease;}

#user-button .icon-menu{position:absolute;display:inline-block;height:16px;margin:auto;right:16px;top:0;bottom:0px;}

#user-button.active{background:var(--szary-100);color:var(--creme-white)}

.logo-mobile, .logo-desktop{display:inline-block; vertical-align: middle;}
.logo-desktop{display:none}

#menu #menu2 ul li a.nowe .ikon-kolo,
#menu>ul li a.nowe .ikon-kolo,
#centrum-powiadomien-button.nowe .ikon-kolo{position:relative}
#menu #menu2 ul li a.nowe .ikon-kolo:after,
#menu>ul li a.nowe .ikon-kolo:after,
#centrum-powiadomien-button.nowe .ikon-kolo:after{content:"";position:absolute;display:block;height:10px;width:10px;background:var(--alert-point) url(/img/wykrzyknik_bialy.svg) center center no-repeat;border-radius:50%;top:0;right:0px}



@media (min-width:991px){
	#user-button{width: calc(100% - 32px);}
	
	#header{text-align:left}
	
	.col-left-container{min-height:100vh;background: var(--creme-white);-webkit-box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);-moz-box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);position: relative;z-index: 999;}
	.col-left{position:sticky;top:0;}
	
	#header{padding:28px;width:calc( 100% - 56px );background:transparent;-webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none;position:static}
	#menu{position:relative;padding:28px;padding-top:20px;width:calc( 100% - 56px );box-shadow: none;}
	#menu>ul{display:none}	
	#menu ul li{grid-column-start: span 5;text-align: left;padding:15px 16px;}	
	#menu ul li br{display:none}
	#menu ul li .ikon-kolo{margin-right:16px}
	#menu ul li a{display: flex;align-items: center;}
	
	#menu #menu2{display:block !important;position:static;background:none;width:100%}
	#menu #menu2>div{display:block !important;margin:0px;padding:0px;background:none;width:100%}
	#menu #menu2 ul li{background:none;border-radius: 41px;transition: all 1s ease;}
	#menu #menu2 ul li:hover{background:var(--szary-10)}
	#menu #menu2 ul li .ikon-kolo{background:var(--szary-10);width:30px;height:30px}
	#menu #menu2 ul li .ikon-kolo span{color:var(--szary-180);width:20px;height:20px;font-size:20px}
	#menu #menu2 ul li a.produkcja{color:var(--primary);}
	#menu #menu2 ul li a.produkcja .ikon-kolo span{color:var(--primary);width:20px;height:20px;font-size:20px}
	#menu #menu2 ul li a.active .ikon-kolo, #menu #menu2 ul li:hover .ikon-kolo{background:var(--szary-240);width:30px;height:30px}
	#menu #menu2 ul li a.produkcja.active .ikon-kolo, #menu #menu2 ul li:hover a.produkcja .ikon-kolo{background:var(--primary);width:30px;height:30px}
	#menu #menu2 ul li a.active .ikon-kolo span, #menu #menu2 ul li:hover .ikon-kolo span{color:var(--creme-white)}
	#menu #menu2 ul li a.active .ikon-kolo span:before, #menu #menu2 ul li:hover .ikon-kolo span:before{color:var(--creme-white)}
	
	#menu #menu2 ul li{border:1px solid transparent}
	#menu #menu2 ul li.active{border:1px solid var(--szary-30)}
	
	#menu #menu2 ul li a{color:var(--szary-240);font-weight: normal;transition: all 1s ease;}
	#menu #menu2 ul li a.active, #menu #menu2 ul li:hover a{font-weight: 600;}
	#menu #menu2 .zamknij{display:none}
	
	.logo-mobile{display:none}
	.logo-desktop{display:inline-block;margin-bottom:28px}
	
	#pomoc-button,
	#centrum-powiadomien-button{display:none;position:fixed;right:39px;}
	#pomoc-button .ikon-kolo,
	#centrum-powiadomien-button .ikon-kolo{background:var(--creme-white);-webkit-box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);-moz-box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);box-shadow: 0px 2px 18px 0px rgba(46, 45, 44, 0.1);}
	#centrum-powiadomien-button{top:28px;}
	#pomoc-button{top:78px;}
}