body {
    /*font-family: "Montserrat",sans-serif;*/
    font-size: 1.6rem;
    line-height: 1.46;
    padding: 0;
    margin: 0 ;
    text-align: center;
    /*color: #fff;*/
    height: auto;
	
	
}

.zaglavlje{
	width:auto;
	height:auto;
}
.content-picture{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;

}
.zaglavlje img{
width:100%;	
height:100%;	
}
section{
	position:relative;
	top:100vh;
	padding:100px;
	box-sizing:border-box;
}
.usluge{
	display:flex;
	width:100%;
	height:100vh;
	background-color:#e9ecef;
	flex-direction: column;
}
.naslov{
	width:100%;
}
.usluge-s{
	width:100%;
	height:100%;
	display:flex;
}
.service{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: column;
	background-color:#fff;
	
}
.service img{
	align-self:center;
}
.service:nth-of-type(3){

 background-color:#DFDFE0;
 z-index:8;
}

.service p {

	font-size:1.4rem;
	color:#212529;
	padding:15px;
}
.nas{
	width:100%;
	height:100vh;
	background-color:#cbcdd0;
	padding:40px;
	z-index:2;
	display:flex;
   

}
.slike-nas{
	display: flex;
    flex-direction: column; 
    gap: 12px; 
    align-items: center;

}
.slika1{
	display: flex;
	gap: 12px; 
}
.slikaNas{
	width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  
}
.tekst-opis{
	padding:45px;
}

.projekti{
	width:100%;
	background-color:#e9ecef;
	display:flex;
	flex-direction:column;
}

.square{
	width:auto;
	position: relative;
	display:flex;
	flex-direction: row; 
	
    gap:12px;
}
.sub-square{
	width:100%;
	display:flex;
	flex-direction: column;
	margin-bottom: 12px;
}
.projektna-slika{
	
	justify-self: center;
	width:100%;
	image-rendering: auto;
	object-fit: cover;
	height:500px;
	
}
.overlay {
 position:absolute;
  width:50%;
  height:500px;
 
  background: rgba(33, 37, 41, 0.8); 
  color: #f1f1f1; 
  font-size: 20px;
  align-self: start;
   opacity:0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.sub-square:hover .overlay {
  opacity: 1;
}
.overlay-text{
	
	background:#e9ecef;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	font-weight:bold;
	font-size:42px;
}
@keyframes appear{
	from{
		opacity:0;
		clip-path:insert(100% 100% 0 0);
	}
	to{
		opacity:1;
		clip-path:insert(0 0 0 0);
	}
}
.karijera{
	animation:appear linear;
	animation-timeline:view();
	animation-range:entry 0% cover 40%;
	background-color:#212529;	
	color: #fff;
	text-align:center;
}
.originalno-dugme{
	
  line-height: 1;
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  border-radius: 0px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  border: 2px solid #333333;
  transition: 0.3s;
  box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 1);
  background-color: #ffffff;
}
.originalno-dugme:hover {
  box-shadow: 0 0 #333;
  color: #fff;
 background-color:#212529;
}
.direktori{
	background-color:#e9ecef;
	width:100%;
	display:flex;
	justify-content:center;
	gap:85px;
}
.direktorM{
	background-color:#212529;
	
}
.direktorA{
	background-color:#212529;  
	
}
.overlay1 {
 position:absolute;
  background: rgba(33, 37, 41, 0.8); /* Black see-through */
  color: #f1f1f1; 
  width:5%;
   height:50%;
  font-size: 20px;
  text-align:left;
  
   opacity:0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.overlay1 a {
	
	padding:4px;
}
.direktorM:hover .overlay1  {
  opacity: 1;
}
.direktorA:hover .overlay1  {
  opacity: 1;
}
.overlay-direktor{
    background-color:#e9ecef;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	font-weight:bold;
	font-size:42px;
	margin-top:0px;
	margin-bottom:0px;
}
.overlay-direktor1{
    background-color:#e9ecef;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	
	font-size:32px;
	margin-top:0px;
	margin-bottom:0px;
}
.overlay-direktor-telefon{
    background-color:#e9ecef;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	font-weight:bold;
	font-size:22px;
	margin-top:0px;
	margin-bottom:0px;
}
.footer{
	width:100%;
	height:auto;
	background-color:#212529;	
	display:flex;
   flex-wrap:wrap;
   row-gap:55px;

}
.footer-first-part{
	width:100%;
	display:flex;
justify-content:row;
}
.footer-second-part{

}
.drustvene-mreze img{
	width:6%;
}
.footer-container{
	width:100%;
	border-right: 1px solid #e9ecef;
}
.footer-text{
	background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
	font-weight:bold;

}
.meni{
	display:flex;
	justify-content: space-between;
	align-items:center;
	background-color :rgb(229,229,229);
}
.el-pr{
	width:12%;
}
.logo{
	text-align:left;
}
.jezici{
	display:flex;
	flex-direction: column;
}
.topnav{
	/*background: rgba(233, 236, 239, 0.5);*/
	background-color : transparent;
	width:100%;
	/*background-color:#e9ecef;*/
	text-align:right;
	
}
.dugme-srpski, .dugme-nemacki{
	background-color : transparent;
	border:none;
}
.dugme-srpskim, .dugme-nemackim{
	background-color : transparent;
	border:none;
	display:none;
}
.topnav:hover{
	background-color:#e9ecef;
}
.topnav a {
	padding-left:25px;
	padding-right:25px;
	color: black;
	text-decoration: none;
   font-weight:bold;

}
.jezici a {
	padding-left:25px;
	padding-right:25px;
	color: black;
	text-decoration: none;
   font-weight:bold;
}
.topnav a:hover {

color: #e3b04b;
}
.jezici a:hover{
	color: #e3b04b;
}
.reveal-type{
   text-align: justify;
}
.reklamni-tekst{
	background-color:#e9ecef;
}

.avatar-slika{
	width:340px;
}
.overlay1-slika{
	width:35%;
}
.sidebar{
	position:fixed;
	top:0;
	right:0;
	height:100vh;
	width:250px;
	z-index:999;
	background-color:#e9ecef;
	box-shadow:-10px 0 10px rgba(0,0,0,0.1);
	display:none;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
}
.sidebar a {
	color: black;
	text-decoration: none;
   font-weight:bold;
}
.sidebar a:hover{
	color: #e3b04b;
}
.hideDesktop{
	display:none;
}
/*Tablet*/
@media only screen and (min-width: 602px) and (max-width: 1024px){
	.dugme-srpski, .dugme-nemacki{
	display:none;
}
.dugme-srpskim, .dugme-nemackim{
	display:inherit;
}
.dugme-srpskim img, .dugme-nemackim img{
width:32px;	
}
.el-pr{
	width:22%;
}
.hideMobile{
display:none;
}
.hideDesktop{
display:inline;
background-color:transparent;
border: none;
}	
.topnav{
	background-color:#e9ecef;
}
.crosssign{
	background-color:transparent;
	border: none;
}
section{
	top:420px;
	padding:0;
}
.service{
	height:60%;
}
.slika1{
	margin-top:4.8rem;
}
.slikaNas{
	width:150px;
	height:150px;
}
.tekst-opis{
	
	font-size:1.4rem;
}
.overlay-text{
	font-size:32px;
}

.overlay1{
	width:15%;
	height:80%;
}
.overlay1-slika{
	width:40%;
}
.direktori{margin-top:22px;}
.footer{
	margin-top:22px;
}
.footer-first-part{
	flex-direction:column;
}
.footer-container{
	border-bottom: 1px solid #e9ecef;
	border-right: 0px solid #e9ecef;
}
.drustvene-mreze img{
	width:14%;
}
}
/*Mobilni*/
@media only screen and (max-width: 600px) {

.dugme-srpski, .dugme-nemacki{
	display:none;
}
.dugme-srpskim, .dugme-nemackim{
	display:inherit;
}
.dugme-srpskim img, .dugme-nemackim img{
width:32px;	
}
.el-pr{
	width:22%;
}
.hideMobile{
display:none;
}
.hideDesktop{
display:inline;
background-color:transparent;
border: none;
}	
.topnav{
	background-color:#e9ecef;
}
.crosssign{
	background-color:transparent;
	border: none;
}
section{
	top:280px;
	padding:0;
}
.usluge-s{
	
	flex-direction:column;
}
.service{
	width:100%;
}
.service p{
	padding:0;
	font-size:12px;
}
.reveal-type1{
	font-size:1.2rem;
}
.nas{
	flex-direction:column;
}
.tekst-opis{
	order:1;
	font-size:0.8rem;
}
.slike-nas{
	order:2;
}
.slikaNas{
	width:150px;
	height:150px;
}
.square{
	flex-direction:column;
}
.overlay {
 
width:100%;
}
.reveal-type{
 font-size:0.8rem;	
}
.overlay-text{
	font-size:32px;
}
.direktori{
	margin-top:22px;
	flex-direction:column;
}
.overlay1{
	width:15%;
	height:40%;
}
.overlay1-slika{
	width:80%;
}
.footer{
	margin-top:22px;
}
.footer-first-part{
	flex-direction:column;
}
.footer-container{
	border-bottom: 1px solid #e9ecef;
	border-right: 0px solid #e9ecef;
}
.drustvene-mreze img{
	width:14%;
}

}