/* =OpanSans Fonts
	-------------------------------------------------------------- */
	@font-face {
		font-family: 'opensans_regular';
		src: url('fonts/opensans-regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'opensans_bold';
		src: url('fonts/opensans-bold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'opensans_semibold';
		src: url('fonts/opensans-semibold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'opensans_italic';
		src: url('fonts/opensans-italic.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'opensans_light';
		src: url('fonts/opensans-light.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	/* ---------------- 1. Opcenito -------------------- */

	* 
	{margin:0;
	padding:0;
	outline:0;
	}
	body
	{font-family: 'Open Sans Light', 'opensans_light', Arial, Helvetica, sans-serif;
	font-size:10pt;
	background:#ecedee;
	}	
	ol, ul 
	{list-style: none;
	}	
	a , a:active , a:hover , a:visited , a:focus
	{text-decoration:none;
	cursor:pointer;
	outline:0;
	border:none;
	font-family: 'Open Sans Light', 'opensans_light', Arial, Helvetica, sans-serif;
	}
	a img
	{text-decoration:none;
	outline:0;
	border:none;
	}
	button
	{cursor:pointer;
	}
	*::-moz-selection {
    background: #42aa44 none repeat scroll 0 0;
    color: #fff;
	}
	*::selection {
    background: #42aa44 none repeat scroll 0 0;
    color: #fff;
	}
	.okvir
	{width:90%;
	margin: 0 auto;
	}
	.okvir > .desno
	{float:right;
	}
	.okvir > .lijevo
	{float:left;
	}
	
	h1
	{font-size:30pt;
	font-family: 'Open Sans', 'opensans_light', Arial, Helvetica, sans-serif;
	font-weight:300;
	color:#939597;
	}
	h2
	{font-size:24pt;
	font-family: 'Open Sans', 'opensans_light' , Arial, Helvetica, sans-serif;
	font-weight:600;
	}
	h3
	{font-size:20pt;
	font-weight:400;
	}
	h4
	{font-size:18pt;
	font-weight:400;
	}
	h5
	{font-size:16pt;
	font-weight:400;	
	}
	h6
	{font-size:14pt;
	font-weight:400;
	}
	
	p
	{color:#231f20;
	}
	
	/* =z-index
	-------------------------------------------------------------- */	
	.index_10
	{z-index:10;
	}
	.index_9
	{z-index:9;
	}
	.index_8
	{z-index:8;
	}
	.index_7
	{z-index:7;
	}
	.index_6
	{z-index:6;
	}
	.index_5
	{z-index:5;
	}
	.index_4
	{z-index:4;
	}
	.index_3
	{z-index:3;
	}
	.index_2
	{z-index:2;
	}
	.index_1
	{z-index:1;
	}
		
	
	/* ---------------- 2. Header --------------------------------------------- */

	
		/* ---------------- 2.1 Navigacija --------------------------------------------- */

	.header_meni
	{position: fixed;
	top:0;
	height:50px;
	width: 100%;
	background-color:#42aa44;
	z-index:9999;
	}
	
	.header_meni a , .header_meni a:visited , .header_meni a:active, .header_meni a:hover
	{text-decoration:none;
	outline:0;	
	}
	
	.header_meni button
	{float:left;
	border-radius:5px;
	border:0px;
	background: #61bb46; 
	background: linear-gradient(top, #42aa44 0%, #61bb46 70%);  
	background: -webkit-linear-gradient(top, #42aa44 0%, #61bb46 70%); 
	background: -moz-linear-gradient(top, #42aa44 0%, #61bb46 70%);
	cursor:pointer;
	display:none;
	}
	.header_meni button img
	{width:28px;
	height:28px;
	padding:10px;
	display:block;
	}

	.header_meni ul
	{margin:0 auto;
	max-width:850px;
	}

	.header_meni ul:after
		{content: ""; 
		clear: both; 
		display: block;
		}
			.header_meni ul li
			{float:left;
			padding:15px;
			}
			.header_meni ul li  a , a:visited
			{display:block;
			text-decoration:none;
			text-transform: none;
			height:inherit;
			color:#fff;
			border-left:1px solid #ccc;
			}
			.header_meni ul li:hover , .header_meni ul li:active 
			{
			}
			.header_meni ul li:hover a
			{
			}
			.header_meni ul li:hover span.centar 
			{color:#ddd;
			}
			a#aktivan
			{background: #b4d5bc;
			}
			a#aktivan span
			{color:#000;
			}
			span.centar
			{height:inherit;
			font-size:12pt;
			line-height:18px;
			display:table-cell;
			vertical-align:middle;
			text-transform: none;
			color:#fff;
			padding:0 0 0 30px ;
			}

	@media all and (min-width: 900px) and (max-width: 1000px)	
	{	span.centar
		{font-size:10pt;
		line-height:16px;
		padding:0 0 0 20px ;
		}
		.header_meni ul
		{max-width:700px;
		}
	}
	@media all and (max-width: 899px)	
	{	.header_meni button
		{display:block;
		}
		#mobile_meni 
		{visibility:hidden;
		width:205px;
		position:relative;
		float:left;
		margin-top:50px;
		left:-54px;
		background-color:#42aa44;
		}
		.header_meni ul li 
		{width:175px;
		}
		.header_meni ul li:hover , .header_meni ul li:active 
		{background:#fff;
		}
		.header_meni ul li:hover span.centar 
		{color:#555;
		}
	}
	
		/* ---------------- 2.2 Logo --------------------------------------------- */

		.header_logo
		{width:100%;
		height:500px;
		background:#61bb46;
		box-shadow: 0px 3px 4px rgba(0,0,0,0.2);
		}
		.header_logo p
		{color:#fff;
		font-size:55pt;
		text-align:center;
		line-height:350px;
		}
		.header_logo p img
		{width:500px;
		position:relative;
		top:55px;
		}
	
		@media all and (min-width: 0px) and (max-width: 600px)
		{	.header_logo p img
			{width:250px;
			position:relative;
			top:-10px;
			}
			.header_logo
			{height:400px;
			}
		}
		
		
	
	/* ---------------- 3. Sadržaj  --------------------------------------------------- */

	.sadrzaj > .okvir
	{width:950px;
	max-width:80%;
	}
	
	.article
	{width:100%;
	margin:0 auto;
	background:#fff;
	border:1px solid #a7a9ab;
	margin:0 0 50px -5%;
	padding:5%;
	
	}
	
		/* ---------------- 3.1 Spajanje sa Cronom  -------------------------------- */
		.spajanje
		{margin-top:-170px;
		}		
		.spajanje i
		{color:#fff;
		font-size:100pt;
		background:#61bb46;
		padding:37% 40%;
		}	
		.spajanje i:hover
		{background:#ff8000;
		}
		.spajanje i p
		{color:#fff;
		font-size:21pt;
		font-family: 'Open Sans Semibold', 'opensans_semibold', Arial, Helvetica, sans-serif;
		}
		.spajanje p
		{font-size:11pt;
		margin-top:1%;
		}
		.spajanje > .lijevo
		{width:20%;
		}
		.spajanje > .desno
		{width:65%;
		float:right;
		}
				
		/* ---------------- 3.2 O nama  -------------------------------------------- */
		.onama
		{height:300px;}
		.onama i
		{font-size:55pt;
		}
		.onama p
		{margin:10px 0;
		font-size:12pt;
		}
		.onama > .lijevo
		{width:30%;
		text-align:left;
		float:left;
		}
		.onama > .desno
		{width:70%;
		height:100%;
		float:right;
		}
		.onama .desno > div
		{background:#a7a9ab;
		padding:12% 2%;
		width:25%;
		color:#fff;
		text-align:center;
		float:right;
		margin:0 10px;
		font-size:12pt;
		}
		.onama .desno > div:hover
		{background:#42aa44;
		}
		/* ---------------- 3.3 Kontakt  ------------------------------------------- */
		
		#kontakt_m
		{display:none;
		}
		.kontakt i
		{color:#fff;
		font-size:100pt;
		background:#a7a9ab;
		padding:35% 40%;
		}	
		.kontakt i:hover
		{background:#42aa44;
		}
		.kontakt p
		{font-size:13pt;
		margin-top:1%;
		}
		p#kontakt_novired
		{margin-top:48px;
		}
		.kontakt > .lijevo
		{width:20%;
		}
		.kontakt > .desno
		{width:68%;
		float:right;
		}

		.desno > .desno
		{width:70%;
		float:right;
		}
		.desno > .lijevo
		{width:30%;
		float:left;
		}

		
		/* ---------------- 3.4 Gdje smo --------------------------------------------- */

		.gdjesmo
		{height:400px;
		}
		.gdjesmo p
		{font-size:14pt;
		}
		.gdjesmo > .lijevo
		{width:24%;
		text-align:right;
		}
		.gdjesmo > .desno
		{width:72%;
		float:right;
		}
		.gdjesmo img
		{width:100%;
		}
		
		@media all and (min-width: 1000px) and (max-width: 1150px)
		{
			h1
			{font-size:26pt;
			}
			.spajanje
			{height:270px;
			}
			.spajanje p
			{font-size:10pt;
			}
			.spajanje i
			{padding:30% 40%;
			}
			.onama p
			{margin:10px 0;
			font-size:11pt;
			}
			.onama .desno > div
			{padding:12% 2%;
			width:25%;
			min-height:140px;
			margin:0 10px;
			font-size:12pt;
			}
			.kontakt p
			{font-size:12pt;
			}
			p#kontakt_novired
			{margin-top:43px;
			}
			.gdjesmo p
			{font-size:13pt;
			}
		}
		@media all and (min-width: 0px) and (max-width: 1000px)
		{
			h1
			{font-size:22pt;
			}
			
			.spajanje i
			{font-size:65pt;
			padding:5% 45%;
			}
			.spajanje i p
			{font-size:14pt;
			}
			.spajanje > .lijevo
			{width:100%;
			}
			.spajanje > .desno
			{width:100%;
			float:none;
			margin-bottom:3%;
			}
			
			.onama
			{height:350px;}
			.onama i
			{font-size:30pt;
			}
			.onama p
			{margin:10px 0;
			font-size:11pt;
			}
			.onama > .lijevo
			{width:100%;
			text-align:left;
			}
			.onama > .desno
			{width:100%;
			float:none;
			}
			
			.onama .desno > div
			{background:#a7a9ab;
			padding:5% 2%;
			width:25%;
			color:#fff;
			text-align:center;
			float:right;
			margin:10px;
			font-size:12pt;
			}
			
			#kontakt_m
			{display:block;
			}
			#kontakt_v
			{display:none;
			}
			.kontakt
			{height:320px;
			}
			.kontakt p
			{font-size:11pt;
			margin-top:10px;
			}
			.kontakt > .lijevo
			{display:none;
			}
			.kontakt > .desno
			{width:100%;
			float:none;
			}

			.gdjesmo
			{height:450px;
			}
			.gdjesmo p
			{font-size:14pt;
			}
			.gdjesmo > .lijevo
			{width:100%;
			text-align:right;
			}
			.gdjesmo > .desno
			{width:100%;
			float:right;
			margin-bottom:20px;
			}
			.gdjesmo iframe
			{height:320px;
			width:100%;
			}
		}
		
		
		@media all and (min-width: 550px) and (max-width: 800px)
		{	.spajanje i
			{font-size:50pt;
			padding:5% 43%;
			margin:5% 0;
			}
			.spajanje i p
			{font-size:11pt;
			}
			.spajanje p
			{margin-top:5%;}
		}
		@media all and (max-width: 549px)
		{	.spajanje i
			{font-size:30pt;
			padding:10% 43%;
			margin:5% 0;
			}
			.spajanje i p
			{font-size:6pt;
			}
			.spajanje p
			{margin-top:5%;}
		}
		@media all and (min-width: 630px) and (max-width: 730px)
		{	.onama .desno > div
			{padding:5% 2%;
			margin:10px;
			font-size:10pt;
			}
		}
		@media all and (min-width: 520px) and (max-width: 629px)
		{	.onama .desno > div
			{padding:5% 2%;
			margin:7px;
			font-size:10pt;
			}
		}
		@media all and (max-width: 519px)
		{	.onama
			{height:300px;
			}
			.onama .desno > div
			{display:none;
			}
		}
		@media all and (min-width: 500px) and (max-width: 650px)
		{	.desno > .desno
			{width:60%;
			float:right;
			}
			.desno > .lijevo
			{width:40%;
			float:left;
			}		
		}
		@media all and (max-width: 499px)
		{	.kontakt p
			{font-size:10pt;
			}
		}
		
		@media all and (max-width: 556px)
		{	.gdjesmo
			{height:480px;
			}		
		}
		/* ---------------- 3.5 Reference --------------------------------------------- */

		.reference
		{height:400px;
		margin-top:-170px;
		}
		.reference p
		{font-size:14pt;
		}
		.reference > .lijevo
		{width:24%;
		text-align:right;
		}
		.reference > .desno
		{width:72%;
		float:right;
		}
		.reference iframe
		{height:400px;
		width:100%;
		}
		
	/* ---------------- 4. Footer --------------------------------------------- */

	footer , .footer
	{position:relative;
	width:100%;
	height:120px;
	text-align:center;
	background-color:#444;
	z-index:1;
	}

	.footer_tekst
	{margin-top:50px;
	width:70%;
	text-align:left;
	}
	.footer_tekst p
	{color:#ddd;
	}
	.footer_tekst a , .footer_tekst a:visited
	{color:#bbb;
	}
	.footer_tekst a:hover , .footer_tekst a:active , .footer_tekst a:focus
	{color:#ddd;
	}
	.footer_ikona
	{color:#939597;
	width:30%;
	font-size:20pt;
	margin-top:30px;
	}
	.footer_ikona a , .footer_ikona  a:visited
	{width:60px;
	height:60px;
	color:#fff;
	display:block;
	float:right;
	margin:0 10px;
	background:#61bb46;
	font-size:20pt;
	line-height:55px;
	}
	.footer_ikona a:hover , .footer_ikona a:active , .footer_ikona a:focus
	{font-size:22pt;
	width:62px;
	height:62px;
	margin:-1px 9px;
	line-height:56px;
	}
	
	@media all and (min-width: 551px) and (max-width: 790px)
	{	.footer_ikona
		{width:40%;
		}
		.footer_tekst
		{width:60%;
		margin-top:40px;
		}
	}
	@media all and (max-width: 550px)
	{	.footer_ikona
		{width:50%;
		}
		.footer_tekst
		{width:50%;
		margin-top:30px;
		}
	}