:root {
		--wysokosc-naglowka-nawigacyjnego-mobilka: 92px;
	}
	
	body {	
			margin:0px;
			
			background-color:white;
		}
		
		
	main {
			margin:5px;
		}
		
	header {
			margin-top:var(--wysokosc-naglowka-nawigacyjnego-mobilka);
		}

	/* nagłowek */

	header > nav {
			height:var(--wysokosc-naglowka-nawigacyjnego-mobilka);
			padding: 0px 20px;
			position:fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index:1000;
			display:flex;
			align-items:center;
			transition: 0.5s;
			
			background: #0e385e;
			box-shadow: 0 0 3px rgba(0,0,0,0.2);
		}
		
	header > nav.scrolled {
		
			background: #0e385e;
		}
		
	header > nav > a {
			vertical-align:middle;
			
			height:50px;
			color:#ffffff;
			font-weight: 700;
			font-size: 26px;
			line-height: 50px;
			text-decoration:none;
			font-family: "Maven Pro", Sans-serif;
		}
		
	header > nav > button {
			vertical-align:middle;
			height:40px;
			margin-left:auto;
			
			width:40px;
		}
		
	header > nav > a > img {
			height:50px;
			margin-right:20px;
			vertical-align:middle;
			content: url() !important;
		}
		
	header > nav > button {
			background: none;
			border: none;
		}

	header > nav > button:active,
	header > nav > button:focus {
			outline: 0;
		}

	header > nav > button > span {
			border-radius: 1px;
			display: block;
			margin: 5px 0;
			height: 2px;
			width: 100%;
			transition: all .2s ease-in;
			
			background: white;
		}

	header > nav > button.expanded > span:nth-of-type(1) {
			transform:translateY(7px) rotate(45deg);
		}

	header > nav > button.expanded > span:nth-of-type(2) {
			opacity: 0;
			filter: alpha(opacity=0);
		}

	header > nav > button.expanded > span:nth-of-type(3) {
			transform:translateY(-7px) rotate(-45deg);
		}

	header > nav > button > span:nth-of-type(1) {
			transform: rotate(0);
		}

	header > nav > button > span:nth-of-type(2) {
			opacity: 1;
			filter: alpha(opacity=100);
		}

	header > nav > button > span:nth-of-type(3) {
			transform: rotate(0);
		}
		
	header > nav > div {
			background-color: rgba(0,0,0, 0.65);
			overflow-x: hidden;
			position:absolute;
			top:var(--wysokosc-naglowka-nawigacyjnego-mobilka);
			left:0px;
			margin-right:auto;
			height: calc(100vh - var(--wysokosc-naglowka-nawigacyjnego-mobilka));
			width:100%;
			visibility: hidden;
			opacity: 0;
			transition: visibility 0.5s, opacity 0.5s linear;
			
			font-family: "Cairo", Sans-serif;
			font-size:12px;
		}
		
	header > nav > div.open{
			visibility: visible;
			opacity: 1;
			transition: visibility 0.5s, opacity 0.5s linear;
		}
		
	header > nav > div.open > ul {
		    margin-left: 0%;
		    transition: margin-left 0.5s;
		}
		    
	header > nav > div:not(.open) > ul{
		    margin-left: -100%;
		    transition: margin-left 0.5s;
		}
		
	header > nav > div > ul {
			list-style-type: none;
			width:50%;
			padding: 0;
			margin:0;
		    max-width: 350px;
		    display:block;
			height:100%;
			overflow: auto;
			
			background-color: #f1f1f1;
		}

	header > nav > div > ul > li,
	header > nav > div > ul > li > ul > li,
	header > nav > div > ul > li > ul ul > li {
			display: block;
		}
		
	header > nav > div > ul > li > a,
	header > nav > div > ul > li > span > a {
		
			text-transform:uppercase;
		}
			
	header > nav > div > ul > li > a,
	header > nav > div > ul > li > ul > li > a,
	header > nav > div > ul > li > ul ul > li > a {
			display: block;
			vertical-align: middle;
			
			color: #000;
			padding: 8px 16px;
			text-decoration: none;
			line-height:12px;	
		}
		
	header > nav > div > ul > li > a.active,
	header > nav > div > ul > li > ul > li > a.active,
	header > nav > div > ul > li > ul ul > li > a.active {
		
			background-color: #4CAF50;
			color: white;
		}
		
	header > nav > div > ul > li > a:hover:not(.active),
	header > nav > div > ul > li > ul > li > a:hover:not(.active),
	header > nav > div > ul > li > ul ul > li > a:hover:not(.active),
	.menu-item-has-children > span:hover,
	.menu-item-has-children > span > a:hover {
		
			background-color: #555;
			color: white;
		}
			
	header > nav > div > ul li.menu-item-has-children > span {
			display: table;
			width:100%;
		}
			
			
	header > nav > div > ul li.menu-item-has-children > span > a {
		    display: table-cell;
			text-decoration: none;
			height:100%;
			vertical-align: middle;
			
			color: #000;
			padding: 8px 16px;
			line-height:12px;
		}
			
	header > nav > div > ul li.menu-item-has-children > span > span {
			display: table-cell;
			height:100%;
			text-align:center;
			vertical-align:middle;
			
			width: 28px;
		}
			
	/* animacja plus minus */
	header > nav > div > ul li.menu-item-has-children > span > span > button {
			position: relative;
			display:inline-block;
			background:transparent;
			
			width: 28px;
			height: 28px;
			border: 0;
			font-size: 1.5em;
		}
			
	header > nav > div > ul li.menu-item-has-children > span > span > button > span {
			position: absolute;
			transition: 300ms;
			background: black;
			border-radius: 2px;
		}
			
	header > nav > div > ul li.menu-item-has-children > span > span > button > span:first-child {
			top: 25%;
			bottom: 25%;
			width: 5%;
			left: 47.5%;
		}

	header > nav > div > ul li.menu-item-has-children > span > span > button > span:last-child {
			left: 25%;
			right: 25%;
			height: 5%;
			top: 47.5%;
		}
			
	header > nav > div > ul li.menu-item-has-children > span > span > button.smopen span {
			transform: rotate(90deg);
		}

	header > nav > div > ul li.menu-item-has-children > span > span > button.smopen span:last-child {
			left: 50%;
			right: 50%;
		}
	/* koniec animacji plus minus */

		
	header > nav > div > ul > li > ul,
	header > nav > div > ul > li > ul ul {
			list-style-type: none;
			padding: 0;
			max-height:0px;
			transition: max-height 0.15s ease-out;
			overflow: hidden;
			
			background-color: #f1f1f1;
		    margin-left: 10px;	
		}
			
	header > nav > div > ul > li.smexpand > ul,
	header > nav > div > ul > li.smexpand > ul li.smexpand > ul {
			max-height: 600px;
			transition: max-height 0.25s ease-in;
		}					
		
		
	/* stopka */
	
	body > footer {		
			display: flex;
			justify-content: center;
			align-items: center;
			
			background-color: #0e385e;
			height:54px;
			font-size:14px;
			border-top: 2px solid rgba(255,255,255,.06);
		}
		
	body > footer > span {
		
			color:rgba(255,255,255,.7);
			font-family: "Open Sans",Tahoma,Geneva,sans-serif;
		}
		
	body > footer > span > a{
			text-decoration:none;
			color:white;
		}
		
	body > footer > a {
			position: fixed;
			bottom: 25px;
			right: 25px;
			z-index:10;
			padding: .5rem 1rem;
			font-size: 1.25rem;
			line-height: 1.5;
			border-radius: .3rem;
			text-decoration: none;
			cursor: pointer;
			font-weight: 900;
			transition: color 0.2s ease-in-out;
			
			color: #0e385e;
			background-color: #ff3d55;
			border-color: #f8f9fa;
		}
	
	body > footer > a:hover {
			transition: color 0.2s ease-in-out;
			
			color: #fff;
		}
	
	body > footer > a.hide:hover {
			transition: color 0.2s, opacity 600ms, visibility 600ms;
		}
		
	.hide{
			opacity: 0;
			visibility: hidden;
			-webkit-transition: opacity 600ms, visibility 600ms;
			transition: opacity 600ms, visibility 600ms;
		}
		
	.show{
			visibility: visible;
			opacity: 1;
			-webkit-transition: opacity 600ms, visibility 600ms;
			transition: opacity 600ms, visibility 600ms;
		}