#side
		{
			height: 30vh;
			z-index: 1;
			background-color: transparent;
			width: 22vw;
			float: left;
			margin-left: 1vw;
			text-align: center;
			position: fixed;
			top: 35vh;
			transform: translateX(-110%);
			transition-duration: 1s;
		}
		.side-tap
		{
			height: 40px;
			z-index: 2;
			width: 40px;
			border: 0;
			border-top: 5px white solid;
			top: 30vh;
			left: 2vw;
			background-color: transparent;
			position: fixed;
			outline: 0;
			transition: 0.3s transform linear;
		}
		.side-tap::before, .side-tap::after
		{
			content: '';
			left:0;
			top:0;
			width: 100%;
			border-top: 5px white solid;
			background-color: transparent;
			transform: translateY(10px);
			position: absolute;
		}
		.side-tap::after
		{
			transform: translateY(25px);
		}

		.side-tap:focus
		{
			transform: rotate(45deg) translateX(5px);
			border:none;
		}
		.side-tap:focus:after
		{
			transform: rotate(-90deg) translateX(-10px);
		}

		.side-tap:focus ~ #side,#side:hover
		{
			transform: translateX(0);
		}
.poziom
{
	width: 20vw;
	padding: 10px;
	padding-top: 20px;
	margin-top: 2vh;
	background-color:#737373; 
	height: 9vh;
	border: 2px solid #CAEE00;
	font-size: 2em;
	z-index: 1;
	text-align: center;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
}
.poziom-srodkowy
{
	
	width: 20vw;
	padding: 10px;
	background-color:#737373; 
	padding-top: 20px;
	height: 9vh;
	border: 2px solid #CAEE00;
	font-size: 2em;
	text-align: center;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
ul
{
	list-style: none;
    font-size: 2em;
    /* right: 3vw; */
    min-width: 40vw;
    text-align: center;
    float: right;
    margin-top: 4vh;
}
#up-panel
{
	display: none;
}
#down-panel
{
	display: none;
}

#all
{
	box-sizing: border-box;
	width: 100vw;
	min-height: 100vh;
}

#menu
{
	width: 100vw;
	height: 25vh;
}
#nav {
    height: 12vh;
    width: 40%;
    float: right;
    top: 3vh;
    position: relative;
}
#content
{
	position: relative;
	width: 50vw;
	margin: auto;
	text-align: left;
	top: 10vh;
	color: white;
}
#social
{
	position: fixed;
	font-size: 3em;
	width: 50vw;
	text-align: center;
	right: 29vw;
}
hr
{
	 border: 1px solid #CAEE00;
	 position: fixed;
	 top: 15vh;
	 left: 0;
	 width: 20vw;
}
hr[class='lewa']
{
	 border: 1px solid transparent;
	 position: fixed;
	 left: 20vw;
	 top: 15vh;
	 width: 6vw;
}
hr[class='prawy']
{
	 border: 1px solid #CAEE00;
	 position: fixed;
	 left: 26vw;
	 top: 15vh;
	 width: 74vw;
}
	body
{ 
	margin:0;
	padding: 0;
	background-color: #737373;
	font-family: 'Alata', sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
}
ul
{
	list-style: none;
	position: fixed;
	font-size: 2em;
	right: 3vw;
	min-width: 40vw;
	text-align: center;
}
li
{
	float: right;
	position: relative;
	right: 5vw;
	color: #CAEE00;
	margin-right: 2vw;
	transition: color 0.7s;
}
li:hover
{
	float: right;
	color: white;
	margin-right: 2vw;
	cursor: pointer;
	transition: color 0.7s;
}
#logo
{
	background-image: url(img/logo.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: 100%;
	width: 30%;
	float: left;
	left: 4vw;
	top: 0vh;
	position: relative;
}

/*zdjęcia socialmediów po najechaniu */
img[src="img/kierowca.png"]:hover,
img[src="img/nm.png"]:hover,
img[src="img/twitter.png"]:hover,
img[src="img/instagram.png"]:hover,
img[src="img/facebook.png"]:hover
{
	transform: scale(1.2);
	transition: all 0.7s;
}
/*wygląd linków*/		
a
{
	text-decoration: none;
	color: #CAEE00;
}
@media only screen and (max-width: 850px) {
#logo 
{
   	width: 80vw;
   	position: relative;
   	left: -10vw;
   	top: 5vh;
   	float: right;
   	z-index: 1;
 }

#nav,hr
{
  	display: none;
}
#content
{
  	position: relative;
	min-width: 80vw;
	text-align: left;
	top: 1vh;
	font-size: 1em;
	color: white;		
}
#social
{
	width: 100vw;
	position: relative;
	top: 10vh;
	left: 0vw;
}
img[src="img/nm.png"],img[src="img/kierowca.png"],#strona1,#strona2
{
	display: none; /*elementy widoczne tylko na stronie PC */
}
#side
{
	display: block;
	height: 100%;
	z-index: 1;
	background-color: #737373;
	width: 60vw;
	float: left;
	position: absolute;
	top: 0;
	border-right: 2px solid #CAEE00;
	border-bottom: 2px solid #CAEE00;
	transform: translateX(-110%);
	transition-duration: 1s;
}
.side-tap
{
	height: 40px;
	display: block;
	z-index: 2;
	width: 40px;
	border: 0;
	border-top: 5px white solid;
	top: 2vh;
	left: 2vw;
	background-color: transparent;
	position: relative;
	outline: 0;
	transition: 0.3s transform linear;
}
.side-tap::before, .side-tap::after
{
	content: '';
	left:0;
	top:0;
	width: 100%;
	border-top: 5px white solid;
	background-color: transparent;
	transform: translateY(10px);
	position: absolute;
}
.side-tap::after
{
	transform: translateY(25px);
}
.side-tap:focus
{
	transform: rotate(45deg) translateX(5px);
	border:none;
}
.side-tap:focus:after
{
	transform: rotate(-90deg) translateX(-10px);
}

.side-tap:focus ~ #side
{
	transform: translateX(0);
}
ul
{
	text-decoration: none;
	color: #CAEE00;
	font-size: 1em;
	min-height: 10vh;
	width: 100%;
	margin-top: 10vh;
	text-align: left;
}
#up-panel
{
	display: block;
	position:fixed;
	top: 10vh; 
	font-size: 1.7em; 
	color: #CAEE00; 
	text-align: left;
}
#down-panel
{
	display: block;
	position:fixed;
	bottom: 2vh; 
	font-size: 1.7em; 
	text-align: center; 
	color:white;
}
.poziom
{
	display: none;
}
.poziom-srodkowy
{
	display: none;
}