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

body {
	margin:0;
	padding:0;
	font-family: 'Raleway', sans-serif;
	color:#000;
	font-size:16px;
}

.negative {
	color:#FFF;
	
	
}
.negative h1,
.negative h2,
.negative h3,
.negative h4,
.negative h5,
.negative h6 {
	color:#FFF;
	
}
h1,h2,h3,h4,h5,h6 {
	font-weight:900;
	margin:1em 0 0.5em;
	color:#5d8b07;
}




h1 {font-size:40px;}
h2 {font-size:34px;}
h3 {font-size:30px;}
h4 {font-size:28px;}
h5 {font-size:24px;}
h6 {font-size:22px;}


p {
	margin:1em 0;
}

img {
	vertical-align:bottom;
	max-width:100%;
}

a {
	
	color:#5d8b07;
	}
.bold {
	font-weight:700;
}


#top {
	 
	background:url(../images/kalemegdan-hero.jpg) center center/cover fixed;
	
}

#header {

	background:rgba(255,255,255,0.5);
	padding:10px 0;
	
	
}




#logo {
	
	float:left;
}
#nav {
	
	float:right;
	margin-top:10px;
}



#nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#nav ul li {
	float:left;
}



.wrapper {
	margin:0 auto;
	width:1200px;
	overflow:hidden;
}


#hero {
	
	padding:200px 0 100px;
	text-align:center;
}



#onama {
	
	text-align:center;
	padding:50px 0;
	
}



.dugme:link,
.dugme:visited {
	display:inline-block;
	border:1px solid #5d8b07;
	text-decoration:none;
	padding:10px 20px;
	color:#5d8b07;
	font-size:15px;	
	text-transform:uppercase;
	font-weight:700;
	letter-spacing:2px;
	transition:0.3s all ease;
	margin:20px 5px;
	text-align:center;
	
	
	
}

.dugme:hover {
	background:#5d8b07;
	color:#FFF;
}


.negative .dugme:link,
.negative .dugme:visited {
	border:2px solid #FFF;
	color:#FFF;
}

.negative .dugme:hover {
	color:#5d8b07;
	background:#FFF;
}



.dugme-malo:link,
.dugme-malo:visited {
	display:inline-block;
	border:1px solid #5d8b07;
	text-decoration:none;
	padding:8px 15px;
	color:#5d8b07;
	font-size:12px;	
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:1px;
	transition:0.3s all ease;
	margin:10px 5px;
	text-align:center;
	
	
	
}

.dugme-malo:hover {
	background:#5d8b07;
	color:#FFF;
}


.negative .dugme-malo:link,
.negative .dugme-malo:visited {
	border:1px solid #FFF;
	color:#FFF;
}

.negative .dugme-malo:hover {
	color:#5d8b07;
	background:#FFF;
}







.bold {
	font-weight:700;
}



#deset {
	
	text-align:center;
	overflow:hidden;

}


.zapovest {
	position:relative;
	float:left;
	width:20%;
	text-align:center;
	overflow:hidden;
	
}


.zapovest-text {
	text-align:center;
	width:53%;
	height:75%;
	background:#5d8b07;
	position:absolute;
	top:100%;
	left:50%;
	padding:7%;
	transition:0.5s all ease;
	opacity:0;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	border-radius:200px;
	transform:translateX(-50%);
	
	
}
.zapovest-text p{
	margin:0;
	padding-top:2px;
}
.zapovest-text span{
	display:block;
	padding-bottom:10px;
	font-size:22px;
	opacity:0.5;
}

.zapovest:hover .zapovest-text{
	
	background:#5d8b07;
	opacity:1;
	top:1%;
	left:50%;
	transform:translateX(-50%);
	
}

#saradnja .wrapper{
	padding:60px 0 60px 0;
	text-align:center;
}

#saradnja p{
	color:#5d8b07;
}


.kompanije{
	float:left;
	margin:50px 48px 20px 0;
	opacity:0.8;
	transition:1s all ease;	
	
}

.kompanije:nth-of-type(6n){
	margin-right:0;	
}

.kompanije p{
	opacity:0;	
}

.kompanije:hover{
	opacity:1;	
}

.kompanije:hover p{
	opacity:1;
	transition:1s all ease;	
}






.projekti {
	text-align:center;	
	overflow:hidden;
	padding:0 0 80px 0;
	
}


.projekat img {
	max-width:100%;
	
}
.projekat {
	position:relative;
	float:left;
	width:33.3%;
	text-align:center;	

}





.naslov {
	position:absolute;
	bottom:1%;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	text-shadow:1px 1px 0 #808080;
	z-index:201;
	
}

.projekat-text {
	text-align:center;
	width:90%;
	height:87%;
	background:rgba(93,139,7,0.9);
	position:absolute;
	top:0;
	left:0;
	padding:5%;
	transition:0.5s all ease;
	opacity:0;
	color:#fff;
	z-index:201;
	font-size:18px;
	
}



.projekat:hover .projekat-text{
	top:0;
	background:rgba(93,139,7,0.9);
	opacity:1;
	
	
}

.projekat:hover img{

	position:relative;
	z-index:200;
	transition:0.5s all ease;
	
}



#poziv{
	background:#5d8b07;
	text-align:center;
	padding:30px 0;
	
}

#poziv-saradnja{
	background:url(../images/poziv-back.jpg) center top / cover fixed;
	text-align:center;
	padding:50px 50px 500px;
	
}

#poziv-text{
	float:right;
	width:400px;
	background:rgba(255,255,255,0.1);
	padding:10px;
}




#text {
	float:left;
	width:400px;
	height:400px;
	
}

#back {
	float:right;
	background:rgba(0,0,0,0.2);
	width:500px;
	height:500px;
	border-radius:300px;
}

#back-inside {
	
	width:300px;
	height:300px;
	float:right;
	text-align:center;
	margin:20px 100px 0 0;
}




#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
	min-width:100%;
	min-height:100%;
    height: auto;
    width: auto;
    z-index:-100;
	-webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
	background:url(file:///D|/IT%20Akademija/EcoUrban%20sajt/snapshots/Working-Space.jpg) no-repeat;
	background-size:cover;
}


#videoback{
	
	position:relative;
	overflow:hidden;
	text-align:center;
	padding:100px 0 100px 0;
}




#top1{
	background:url(../images/we-green.jpg) center bottom/cover fixed;
	
}



#hero1{
	padding:100px 0 100px;
	text-align:center;

}

#misija {
	padding:50px 0; 
	text-align:center;
	
}

#vizija {
	background:#5d8b07;
	padding:30px 0 50px;
	
	
}

#hero2{
	padding:100px 0 100px;
	text-align:center;

}
#top2{
	background:url(../images/projekti-green.jpg) center bottom/cover fixed;
	
}

.project {
	float:left;
	margin-right:75px;
	margin-bottom:5px;
	padding:40px 0 0 0;
}

.project:nth-of-type(3n){
	margin-right:0;	
		
}

.project-text {
	background:#5d8b07;
	width:350px;
	height:100px;
}
.project-text h2{
	color:#fff;
	text-align:center;
	padding:10px;
	margin-top:0;
}


.project img { 
	
	opacity:0.9;
	transition:1s all ease;
}

.project img:hover {
	opacity:1;
}


#slika {
	float:left;
	margin-top:30px;
}

.odbor {
	float:left;
	width:360px;
	padding-left:40px;
	
}

#top3{
	background:url(../images/hero.png) center center/cover fixed;
	
}
#hero3{
	padding:100px 0 100px;
	text-align:center;

}







.price {
	padding:40px 0;
	overflow:hidden;
}



.price img {
	float:left;
	margin-top:10px;
}

.price-text {
	float:right;
	width:750px;
	
}
 .price-text h2{
	margin-top:0;
	
}


#top4{
	background:url(../images/saradnja-hero.jpg) center bottom/cover fixed;
	
}
#hero4{
	padding:100px 0 100px;
	text-align:center;

}
#top5{
	background:url(../images/galeriija_hero.jpg) center center/cover fixed;
	
}
#hero5{
	padding:100px 0 100px;
	text-align:center;

}
#hero6{
	padding:20px 0 20px;
	text-align:center;
	}
#hero6 h1{
	font-size:200px;
	margin:0;
	}

	
#top6{
	background:url(../images/hero6.jpg) center center/cover fixed;

}
#galerija a { 
	margin:0 50px 25px 0;
	display:block;
	float:left;
	opacity:0.9;
	transition:1s all ease;
}

#galerija a:hover {
	opacity:1;
}

#galerija {
	overflow:hidden;
	padding-top:50px;
}


#galerija a:nth-of-type(5n) {
	margin-right:0;
}

#respmenu {
	display:none;
}

#footerup {
	background:#5d8b07;
	padding:20px;
	color:#fff;
	text-align:center;
	overflow:hidden;
	}
#footerdown {
	text-align:center;
	color:#5d8b07;
	}

	
#footer img{
	float:left;
	}
	
#social {
	float:right;
	font-size:20px;
	margin-top:10px;
	
	}

	
#social a{
	color:#fff;
	}
	
#social a:hover{
	opacity:0.7;
	}
	
	
@media screen and (min-width:1024px) and (max-width:1260px) {
	
	.wrapper {
		width:960px;
	}
	
	
	.kompanije{
		width:150px;
		margin-right:12px;
		opacity:0.8;
	}
	
	kompanije:nth-of-type{	
		margin-right:0;	
	}
	
    .project{
		width:300px;
		margin-right:30px;
		}
	.project img{
		max-width:100%;
		}
	.project-text{
		width:300px;
		height:140px;
		}	
			
	
		
	.price-text {
		width:510px;
	
	}
	
	
	#galerija a { 
		margin:0 15px 25px 0;
	}
	#galerija a img { 
		width:180px;
	}
	
	
}



@media screen and (min-width:768px) and (max-width:1023px) {
	
.wrapper {
		width:700px;
	}
	
#logo {
	float:none;
	
	
}
#nav {
	float:none;
	display:inline-block;
	
}
#header {
	text-align:center;
}




.zapovest {
	width:18%;
	overflow:visible;	
	margin-right:2%;
	margin-bottom:5%;
}

.zapovest:first-of-type,
.zapovest:nth-of-type(6n){
		
	margin-left:1%;
}

.zapovest:nth-of-type(5n){
		
	margin-right:1%;
}


.zapovest-text {
	text-align:center;
	width:auto;
	height:100px;
	position:relative;
	top:0;
	left:0;
	padding:7%;
	transition:none;
	opacity:1;
	font-size:12px;
	font-weight:bold;
	border-radius:0;
	transform:translateX(0%);
	
	
}




.zapovest-text span{
	font-size:18px;
}

.zapovest-text p{
	margin:0;
	padding-top:2px;
}

.zapovest:hover .zapovest-text{
	background:#5d8b07;
	opacity:1;
	top:0%;
	left:0%;
	transform:translateX(0%);
	
}








.kompanije{
	float:left;
	margin:50px 110px 20px 0;
	opacity:0.8;
}

.kompanije:nth-of-type(6n){
	margin-right:110px;	
}
.kompanije:nth-of-type(3n){
	margin-right:0;	
}


.projekat-text {
	font-size:14px;
}

#back {
	float:none;
	display:inline-block;
	
}

#text {
	float:none;
	display:inline-block;
	
}




.projekat {
	position:relative;
	float:left;
	width:31.3%;
	text-align:center;	
	margin-right:2%;

}
.projekat:first-of-type {
	
	margin-left:1%;

}
.projekat:nth-of-type(3n) {
	
	margin-right:1%;

}




.naslov {
	position:absolute;
	top:8%;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	text-shadow:1px 1px 0 #808080;
	z-index:201;
	
}

.projekat-text {
	text-align:center;
	width:90%;
	height:230px;
	background:rgba(93,139,7,0.9);
	position:relative;
	top:0;
	left:0;
	padding:5%;
	transition:none;
	opacity:1;
	color:#fff;
	z-index:201;
	font-size:18px;
	
}






#slika {
	width:300px;
}

.odbor {
	float:right;
	width:360px;
	padding-left:40px;
	
}


.price img{
	
	width:300px;
	margin-right:20px;
	
	
}

 .project{
		width:330px;
		margin-right:40px;
		}
 .project img{
		max-width:100%;
		}
 .project-text{
		width:330px;
		
		}

.project:nth-of-type(3n){
	    margin-right:40px;	
		
       }
	.project:nth-of-type(2n){
	    margin-right:0;	
		
       }
	   
	
.project img { 
	
	opacity:1;
	transition:none;
}

   

.price-text {
	
	width:380px;
	
}


#galerija a:nth-of-type(5n) {
	margin-right:50px;
}

#galerija a:nth-of-type(3n) {
	margin-right:0;
}

#galerija a { 
	opacity:1;
	transition:none;
}

.kompanije{
	
	opacity:1;
	transition:none;	
	
}
.kompanije p{
	opacity:1;	
}

}



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

.wrapper {
		width:90%;
	}
	



#back {
	float:none;
	display:inline-block;
	width:100%;
    height:100%;
	border-radius:0;
}

#back-inside {
	float:none;
	width:100%;
	height:100%;
	
}

#text {
	float:none;
	display:inline-block;
	width:100%;
	
	}


.odbor {
	
	float:none;
	width:100%;
	padding-left:0;
	
	}
	
	
.projekat {
	
	float:none;
	width:100%;
		

}
.projekat-text {
	font-size:13px;
}
.price img{
	
	width:300px;
	margin-bottom:10px;
	
	
	
}




 .project{
		width:100%;
		margin-right:0;
		
		}
 .project img{
		max-width:100%;
		}
 .project-text{
		max-width:100%;
		height:140px;
		
		}

.project img { 
	
	opacity:1;
	transition:none;
}

   







.price-text {
	
	width:auto;
	
}

.price img {
	
	float:none;
	
}

#poziv-saradnja{
	
	padding:0;
	
}


#poziv-text{
	float:none;
	display:inline-block;
	width:100%;
	background:rgba(255,255,255,0.1);
	padding:0;
}





	#logo,
	#nav {
		float:none;
	}
	
	
	#nav ul li {
		float:none;
	}

	#nav ul li a {
		display:block;
		margin:7px 5px;
	}
	
	#header {
		text-align:center;
		height:auto;
		
	}
	#respmenu {
		display:block;
		border:1px solid #5d8b07;
		color:#5d8b07;
		padding:10px;
		text-decoration:none;
		font-size:12px;	
		text-transform:uppercase;
		font-weight:700;
		letter-spacing:1px;
		margin:20px 5px;
	}
	#nav ul {
		display:none;
	}
	
	
	#galerija a {
		width:45%;
		margin-right:10%;
		opacity:1;
	    transition:none;
	}

	#galerija a img {
		width:100%;
	}
	
	#galerija a:nth-of-type(5n){
	    margin-right:10%;	
	}
	
	#galerija a:nth-of-type(2n) {
		margin-right:0;
	}
	
	
	



.kompanije {
	width:45%;
	margin-right:10%;
	
}



.kompanije:nth-of-type(6n) {
	
	margin-right:10%;
	
}


.kompanije:nth-of-type(2n) {
	
	margin-right:0;
	
}




.projekat {
	position:relative;
	width:100%;
	float:none;

}


.naslov {
	position:absolute;
	top:15%;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	text-shadow:1px 1px 0 #808080;
	z-index:201;
	
}






.projekat-text {
	text-align:center;
	width:auto;
	height:auto;
	background:rgba(93,139,7,0.9);
	position:relative;
	top:0;
	left:0;
	padding:5%;
	transition:none;
	opacity:1;
	color:#fff;
	z-index:201;
	font-size:18px;
	
}



.zapovest {
	width:100%;
	overflow:visible;	
	
}

.zapovest-text {
	text-align:center;
	width:auto;
	height:auto;
	position:relative;
	top:0;
	left:0;
	padding:7%;
	transition:none;
	opacity:1;
	font-size:14px;
	font-weight:bold;
	border-radius:0;
	transform:translateX(0%);
	
	
}
.zapovest:hover .zapovest-text{
	
	
	top:0;
	
	
	
	
}

.kompanije{
	
	opacity:1;
	transition:none;	
	
}
.kompanije p{
	opacity:1;	
}

#footer img{
	float:none;
	}
	
#social {
	float:none;
	
	}




}