nav, nav > *, nav > * > * {
	-webkit-transition-duration: 500ms;
	-moz-transition-duration: 500ms;
	transition-duration: 500ms;

	display: block;
}

nav > * > * {
	cursor: pointer;
}

nav {
	z-index: 1000;
	color: white;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 240px;
	left: -240px;
	font-family: 'Open Sans', sans-serif;
	height: 100%;
}

nav.visible {
	left: 0;
}

nav > .nav-links, nav > .nav-icons > * {
	opacity: 0.2;
	background-color: #535353;
}

nav.visible > .nav-links, nav.visible > .nav-icons > * {
	opacity: 0.95;
}

nav.visible > * > :hover {
	background-color: #777;
}

nav:not(.visible) > .nav-icons > :hover {
	opacity: 0.6;
}

nav > .nav-links {
	padding-top: 15px;
	height: 100%;
}

nav:not(.visible) > .nav-icons .fa-times {
	display: none;
}

nav.visible > .nav-icons .fa-bars {
	display: none;
}

nav > .nav-icons {
	position: absolute;
	top: 0;
	left: 240px;
	border: 0;
	width: 100px;
	padding-top: 20px;
	padding-left: 20px;
}

nav > .nav-icons > * {
	
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 20px;
	line-height: 40px;
	width: 40px;
	font-size: 25px;
	text-align: center;
	padding: 0;
}


.nav-links {
	font-size: 14px;
	padding-right: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}

.nav-item {
	position: relative;
}

.nav-item div {
	position: absolute;
	left: 10px;
}

.nav-item a {
	position: relative;
	left: 10px;
	display: block;
	border-left: 1px solid #30D5C8;
	height: 60px;
	padding: 10px 0;
	margin: 15px 0;
	margin-left: 25px;
	text-align: left;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 10px;
}
.active-koniec nav > .nav-links, .active-koniec nav > .nav-icons > * {
	background-color: white;
	color: black;
}

.active-koniec nav > * > *:hover {
	background-color: #ccc;
}