* {
	margin: 0;
	padding: 0;
}
	body
	{
		background: #ebebeb;
		font-size: 15px;
		color: #777;
		font-family: Arial;
	}
	.grid
	{
	display: grid;
	grid-template-columns: 1fr 290px 290px 290px 290px 1fr;
	grid-template-rows: 1fr 1f 1f 1f;
	grid-template-areas:
	". . gtekst . . ."
	". . slider slider headtext ."
	". . vpolica vpolica vpolica ."
	". sidebar content content content ."
	". footer footer footer footer .";
	grid-gap: 10px;
	margin-top: 10px;
	}
	.gtekst
	{
	grid-area:gtekst;
	font-size: 100%;
	padding: 10px;
	
	}
	.headtext
	{
	grid-area:headtext;
	padding: 10px;
	display: flex;
	align-self: end;
	}
	
	.slider 
	{
	grid-area:slider;
	padding: 0px;
	overflow: hidden;
	}
	.sidebar
	{
	grid-area:sidebar;
	padding: 10px;
	display: flex;
	align-self: start;
	}
	
	.content
	{
	grid-area:content;
	padding: 10px;
	}
	
	.vpolica
	{
	display: grid;
	grid-area:vpolica;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
	position: relative;
	padding: 5px;
	align-items: center;
   	justify-items: center;
	}

	
	.footer
	{
	grid-area:footer;
	padding: 15px;
	
	}
	

	.slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 25s slider infinite;
				}

	.slider figure img {
	width: 20%;
	float: left;
	}

@keyframes slider 
	{
	0% {
		left: 0;
	}
	20% {
		left: 0;
	}
	25% {
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -200%;
	}
	70% {
		left: -200%;
	}
	75% {
		left: -300%;
	}
	95% {
		left: -300%;
	}
	100% {
		left: -400%;
	}
	}
	
	
	.grid
	div:nth-child(even) {
	background-color: #b2a89c;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	color: white;
	}
	.grid
	div:nth-child(odd) {
	background-color: none;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	}
	

	.header
	{ 
		background: #ebebeb;
		height: 100px;
		max-width: 1200px;
		border: solid 0px #000;
		color: wihte;
		margin-left: auto;
		margin-right: auto;
	}
	
	a { text-decoration: none; }
	
	.container 
	{ 
		max-width: 1200px;
		margin: 0 auto;
		width: 100%;
	}
	
	.nav-bar
	{ 
		display: block;
		margin-bottom: 15px 0;
		background: #9caab3;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
		border-radius: 3px;
	}
	
	.nav-bar ul
	{ 
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: block;
	}
	
	.nav-bar li
	{ 
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline-block;
		position: relative;
		font-size: 14px;
		color: #def1f0;
	}
	
	.nav-bar li a
	{ 
		padding: 15px 20px;
		font-size: 14px;
		color: #4d4d4d;
		display: inline-block;
		outline: 0;
		font-weight: 400;
	}
	
	.nav-bar li:hover ul.dropdown { display: block; }
		
	.nav-bar li ul.dropdown
	{ 
		position: absolute;
		display: none;
		width: 200px;
		background: #9caab3;
		box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.3);
		padding-top: 0;
		z-index: 10;
	}
	
	.nav-bar li ul.dropdown li
	{ 
		display: block;
		list-style-type: none;
	}
	
	.nav-bar li ul.dropdown li a
	{ 
		padding: 15px 20px;
		font-size: 15px;
		color: #fff;
		display: block;
		font-weight: 400;
		
	}
	
	.nav-bar li ul.dropdown li:last-child a { border-bottom: none; }
		
	.nav-bar li:hover a
	{ 
		background: #b2a89c;
		color: #fff !important;
	}
	
	.nav-bar li:first-child:hover a { border-radius: 3px 0 0 3px; }
	
	.nav-bar li ul.dropdown li:hover a { background: rgba( 0, 0, 0, 0.1); }
	
	.nav-bar li ul.dropdown li:first-child:hover a { border-radius: 0; }
	
	.nav-bar li:hover .arrow-down { border-top: 5px solid #fff; }
	
	.arrow-down
	{ 
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #def1f0;
		position: relative;
		top: 15px;
		right: -5px;
		content: '';
	}

	
@media only screen and (max-width:900px) 
		
		{

	.nav-bar
		{
			background: #fff;
			width: 200px;
			display: block;
			position: fixed;
			left: -200px;
		}
		
	.nav-bar.visible
		{
			left: 0px;
			transition: left 0.3s ease;
			z-index: 10;
		}
		
	.nav-mobile
		{
			display: inline-block;
			vertical-align: middle;
			width: 100%;
			height: 50px;
			margin: 0;
			position: relative !important;
			z-index: 9999 !important;
			top: 0px;
			left: 0px;
			background: #9caab3;
			padding; 120px 0 0 10px;
			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3)	
		}
		
	.menu-icon
		{
			cursor: pointer;
		}	
		
	.menu-icon span
		{
			height: 2px;
			background: #fff;
			margin: 5px;
			display: block;
			width: 20px;
			margin-left: 10px;		
		}
		
	.nav-bar ul { padding-top: 50px; }
	
	.nav-bar li { display: block; }
	
	.nav-bar li a
		{ 
			display: block;
			color: #505050;
			font-weight: 600;
		}
		
	.nav-bar li:first-child:hover a { border-radius: 0; }
		
	.nav-bar li ul.dropdown { 
			position: relative; 
			}
		
	.nav-bar li ul.dropdown li a 
		{ 
			background: #9caab3 !important;
			border-bottom: none;
			color: #fff !important;
		}
		
	.nav-bar li:hover a
		{ 
			background: #b2a89c;
			color: #fff !important;
		}
			
	.nav-bar li ul.dropdown li:hover a
		{ 
			background: rgba(0, 0, 0, 0.1); !important;
			color: #fff !important;
		}
		
	.nav-bar li ul.dropdown li a { padding: 10px 10px 10px 30px; }
	
	.nav-bar li:hover .arrow-down { border-top: 5px solid #fff; }
	
	.arrow-down 
		{ 
			border-top: 5px solid #505050;
			position: absolute;
			top: 20px;
			right: 10px;
		}
	.grid
	{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1f 1f 1f;
	grid-template-areas:
	"gtekst gtekst"
	"headtext headtext"
	"slider slider"
	"sidebar sidebar"
	"vpolica vpolica"
	"content content"
	"footer footer";
	grid-gap: 5px;
	}
	.footer
	{ 
	font-size: 12px;
		}
		
	.headtext
	{
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	}
	
	.sidebar
	{
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	}
	.vpolica
	{
	display: grid;
	grid-area:vpolica;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5px;
	position: relative;
	padding: 5px;
	align-items: center;
   	justify-items: center;
	}
	}