@charset "utf-8";
/* CSS Document */

*	{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face	{
	font-family: Khand-Medium;
	src: url(fonts/Khand-Medium.ttf);
}

h1, h2, h3, nav a	{
	font-family: Khand-Medium, Arial, Helvetica, sans-serif;
}

body	{
	font-family: Arial, Helvetica, sans-serif;
}

header, #baner, footer, #jedan, #dva, #tri, #cetiri	{
	overflow: auto;
}

header	{
	background-color: #222;
	color: #9d9d9d;
	padding: 20px 0;
	text-align: center;
}

header h1 a	{
	text-decoration: none;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: normal;
	color: #9d9d9d;
	float: none;
}

nav	{
	margin: 15px 0;
	font-size: 24px;
	float: none;
}

nav a	{
	display: block;
	padding: 10px 0;
	border-top: 1px solid #898989;
	text-decoration: none;
	color: #9d9d9d;
}

nav a:last-child	{
	border-bottom: 1px solid #898989;
}

nav a:hover	{
	background-color: #898989;
	color: white;
}

#baner	{
	background: url(images/i1.jpg) no-repeat left top;
	min-height: 600px;
	background-size: cover;
	color: white;
	text-align: center;
}

#baner h2	{
	font-size: 90px;
	font-weight: normal;
	line-height: 90px;
	padding-top: 250px;
}

#baner p	{
	text-transform: uppercase;
	font-size: 24px;
}

#jedan	{
	text-align: center;
	padding: 80px 0;
}

#jedan img	{
	width: 200px;
	border-radius: 100px;
	border: 7px solid #222;
}

#jedan h2	{
	color: #222;
	font-size: 50px;
	margin-top: 25px;
	margin-bottom: 50px;
}

#jedan p	{
	color: #898989;
	font-size: 14px;
	margin: 0 10%;
}

#jedan p.zelena{
	color: #1abc9c;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 20px;
}

#dva	{
	text-align: center;
	color: #898989;
	margin: 0 10%;
	margin-bottom: 80px;
}

#dva h3	{
	color: #222;
	font-weight: normal;
	font-size: 32px;
	margin-bottom: 20px;
}

#dva p	{
	font-size: 14px;
	margin: 0 30px;
}

#dva img	{
	width: 50px;
	margin-botttom: 25px;
}

#dva .clanak	{
	margin-bottom: 50px;
}

#tri	{
	background-color: #222;
	padding: 80px 0;
	color: white;
	text-align: center;
}

#tri h2	{
	font-size: 50px;
	font-weight: normal;
	margin-bottom: 50px;
}

#tri .radovi	{
	margin: 0 10%;
}

#tri .radovi img	{
	width: 100%;
	padding: 2%;
}

#cetiri	{
	background-color: #1abc9c;
	text-align: center;
	padding: 50px 0;
}

#cetiri h2	{
	font-size: 50px;
	font-weight: normal;
	margin-bottom: 50px;
	color: white; 
	text-transform: uppercase;
}

form	{
	text-align: center;
	color: white;
	font-size: 20px;
}

form input, form textarea	{
	display: block;
	margin: 0 auto;
	width: 80%;
	border: 1px solid #1abc9c;
	border-radius: 5px;
	font-size: 18px;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 15px;
	margin-bottom: 15px;
}

form input[type="text"]:focus, form input[type="email"]:focus, form textarea:focus	{
	background-color: #222;
	color: white;
}

form label	{
	margin-bottom: 15px;
	font-size: 18px;
}

form button	{
	border: 1px solid white;
	padding: 10px;
	border-radius: 10px;
	background-color: #1abc9c;
	color: white;
	font-size: 16px;
	margin-top: 20px;
	transition: 0.2s;
}

form button:hover	{
	background-color: white;
	color: #1abc9c;
}

footer	{
	background-color: #222;
	color: white;
	text-align: center;
	padding: 15px;
	font-size: 12px;
}

[class*="col-"]	{
	float: left;
}

.col-s-1	{width: 8.33%;}
.col-s-2	{width: 16.66%;}
.col-s-3	{width: 25%;}
.col-s-4	{width: 33.33%;}
.col-s-5	{width: 41.66%;}
.col-s-6	{width: 50%;}
.col-s-7	{width: 58.33%;}
.col-s-8	{width: 66.66%;}
.col-s-9	{width: 75%;}
.col-s-10	{width: 83.33%;}
.col-s-11	{width: 91.66%;}
.col-s-12	{width: 100%;}

@media only screen and (min-width: 600px)	{
	
.col-m-1	{width: 8.33%;}
.col-m-2	{width: 16.66%;}
.col-m-3	{width: 25%;}
.col-m-4	{width: 33.33%;}
.col-m-5	{width: 41.66%;}
.col-m-6	{width: 50%;}
.col-m-7	{width: 58.33%;}
.col-m-8	{width: 66.66%;}
.col-m-9	{width: 75%;}
.col-m-10	{width: 83.33%;}
.col-m-11	{width: 91.66%;}
.col-m-12	{width: 100%;}
	
	header h1 a	{
		float: left;
		margin-left: 10%;
	}
	
	nav	{
		float: right;
		margin-right: 10%;
		margin-top: 10px;	
	}
	
	nav a	{
		display: inline;
		border: none;
		margin-left: 20px;
	}
	
	nav a:last-child	{
		border: none;
	}
	
	nav a:hover	{
		background-color: transparent;
		color: white;
	}

}

@media only screen and (min-width: 768px)	{
	
.col-1	{width: 8.33%;}
.col-2	{width: 16.66%;}
.col-3	{width: 25%;}
.col-4	{width: 33.33%;}
.col-5	{width: 41.66%;}
.col-6	{width: 50%;}
.col-7	{width: 58.33%;}
.col-8	{width: 66.66%;}
.col-9	{width: 75%;}
.col-10	{width: 83.33%;}
.col-11	{width: 91.66%;}
.col-12	{width: 100%;}

}