/* MAIN STRUCTURE CSS */

/* VARIABLES */
:root {
  --main: #267;
  --primary_green: #278;
  --pg: #887;
	--slyel_20:rgba(254,193,39,.2);
	--slg_20:rgba(86,191,152,.2);
	--fl:24px;
	--fxl:36px;
	--fm:20px;
	--fn:16px;
	--fs:14px;
	--fxs:12px;
	--th:rgba(86,191,12,.05);
}

*{padding:0px; margin:0px; }
@font-face {font-family: icons; src: url(font-awesome/fonts/FontAwesome.otf);}
@font-face {font-family: asap; src: url('fonts/asap_regular.ttf');}
@font-face {font-family: cherokee; src: url('fonts/plantagenet_cherokee.ttf');}
@font-face {font-family: numbers; src: url('fonts/PlayfairDisplayRegular.ttf');}
/* ELEMENTS*/

.buttons{
	background:var(--pg);
	min-width:200px;
	max-width:240px;
	margin:auto;
	box-sizing: border-box;
	padding:10px 16px;
	border-radius:6px;
	color:#eee;
	cursor: pointer;
	text-decoration: none;
}


HTML{width:100%;}
BODY {width:100%; font-size:14px; font-family:asap,sans-serif;}
img {border:0}
a{color:inherit;font-size:inherit;}
p{font-family: sans-serif; font-size: 16px; line-height: 1.5em}
.oblast_strane{width:100%; margin:auto; }
.oblast_zaglavlja{position:fixed;width:100%;top:0;
  background: rgba(255,255,255,.4);
  font-family: asap ;
  border-bottom:1px solid #ddd;
}
.oblast_zaglavlja_inner{width:960px;margin: auto; position:relative;}
.oblast_sadrzaja{width:100%; min-height:700px;  margin:0 auto;}
p, a, h1,h2,h3,h4,h5,h6,li, label{color:#444;}
.top_baner, .mainTopBannerInner{width:100%;}
/*CHANGE*/
.top_baner{border-bottom: 1px solid green; margin-top:102px;}
.icons {font-family: icons;text-decoration:none;}

.index .oblast_strane .pageTitle{color: #006837; text-align: center; padding: 20px 0px 0px; font-weight: normal; font-size: 30px; box-sizing: border-box}







/* DISPLAY NONE */
.obavestenje{display:none;}
.flyOutMenu{
	
	width:20px;
	position:absolute;
	top:25px;right:69px;
	z-index: 200;
}
.flyOutMenu #cart_indication a{
font-size:0;
	width:10px; height:10px;
	display: block;
	background: red;
	border-radius:50%;
	border:2px solid #fff;
}
.index .sideCatNav{display: block;}
.imageForMobile,
.mob_main_menu, .poruciTekst,.tempContainer,.footer_mob_info,
.wishListBar,.PageTrackNav,.iconOpis{
	display:none
}
.hidden{display: none!important}

.userBar,
.headerIconsDiv,
.CatTrackNav,
.homeMenu {display: none!important; } 
.imate_nalog_dugme{display: none}


.zaglavlje_content{position:relative;} 
.wrapperTraka .logo{position:absolute; top:14px;left:20px; width:250px; height:auto;display:block;} 
.logo a{display:block; width:100%}
.logo img{display: block;width:100%;} 

/*GLAVNI MENI*/
.glavni_meni{display:flex;justify-content:flex-end;} 
.glavni_meni ul{display: flex;list-style: none; width:1000px;} 
.glavni_meni ul > li{flex-grow: 1; text-align: center; } 
.glavni_meni ul > li a{text-decoration: none; display: block; padding: 6px 20px; box-sizing: border-box; color:#555; border-bottom:3px solid transparent; font-size:16px; } 
.glavni_meni ul > li a:hover{border-bottom:3px solid #ddd;}
.glavni_meni ul > li a{color:#fff}
.glavni_meni li img{width: 100%; display: block;height: 100%}

/* GORNJA TRAKA */ 
.wrapperTraka{border-bottom:1px solid #999; display: flex; background: rgb(255,255,255);padding:16px 5px; box-sizing:border-box;
transition: all 1s} 
.wrapperTraka{background:#444; position:relative; display:flex; justify-content:flex-end;}
.wrapperTraka img{display: block;width:100%;} 
.wrapperTraka .logoHome img{}
.wrapperTraka p{ display: none} 
.wrapperTraka > div{display: flex; } 
.divLevi{padding:2px 10px;} 
.divLevi .itemIcon{width:35px;  padding:4px 8px} 
.divDesni .itemIcon{width:29px;  padding:8px 8px;} 
.divDesni .item.right:last-child .itemIcon{padding: 8px 20px 8px 8px} 

.fixedLink_form{display: flex; width:auto;position: absolute;top:6px; left:300px;}
.fixedLink_form div{margin:5px 0; display: flex;}
.fixedLink_form .slika{display: block; width: 44px;padding: 3px; box-sizing: border-box}
.fixedLink_form img{display: block; width: 100%; _filter:invert(1) contrast(5) saturate(1) }
.fixedLink_form a{text-decoration: none; display: flex; width: 100%; height:50px}
.fixedLink_form p{width: max-content;color:#fff; padding: 10px 5px;display:none}
.fixedLink_form a:hover{margin-left: 0; transition:.3s}


.catalog_search .searchDugme:after{content: "\f002"; font-family: icons; font-size: 18px; color: #01543d; position: absolute; right: 12px; top:6px}
.catalog_search a{text-decoration: none}

.catalog_search{
	position: absolute;
	top:20px;right:330px;
}
.catalog_search input{
	font-size:var(--fn);
	padding:4px 10px;
	border:2px solid var(--main);
	border-radius:10px;
	outline: none;
}



#brzi_pretrazivac {
position:relative;
}

#suggestions{
position: absolute;
	top:100%; right:-50px;
	width:600px;height:500px;
	background:#fff;
	overflow-y: auto;
	border-radius:10px;
}

.close_suggestions{
background: var(--primary_green);
	display: block;
	color:#000;
	cursor: pointer;
	padding:10px
}
#autoSuggestionsList li{
display:flex;
	border-bottom:1px solid #ccc;
	cursor:pointer;
	padding:10px;
	box-sizing: border-box;
}

#autoSuggestionsList div{
padding: 0 14px;
	flex-grow: 1;
}
#autoSuggestionsList li img{
width:80px;
	max-height:120px;
	display:block;
	
}

#autoSuggestionsList h3{
color:var(--primary_green);
	font-size:var(--fm);
}
#autoSuggestionsList p{
color:var(--main);
	padding:6px 10px 0 0;
	font-size:var(--fs)
}

.logoScroll{
	display: block;
	width:110px;
	padding: 16px;
	background: red;
}
.logoScroll img{
	display: block;
	width: 100%;
}

/* BANNER */


.baner_slide_title{
 position:absolute;
	top:20px;right:0;
	z-index: 100;
	font-size:30px;
	background: var(--pg);
	color:#fff;
	padding:10px 30px 10px 50px;
	border-radius:8px 0 0 8px;

	
}
.baner_slide_description{
 position:absolute;
	top:80px;right:0;
	z-index: 100;
	font-size:20px;
	background: var(--main);
	color:#eee;
	padding:10px 30px 10px 50px;
	border-radius:8px 0 0 8px;	
}


/* HOME */
.oblast_zaglavlja{background: var(--pg)}
.colorChange{background: rgba(1,1,1,.8); transition: .3s}
.oblast_sadrzaja{width:100%; min-height:700px;  margin:0 auto; margin-top:220px; color:red}
.index #coll_middle {padding: 20px 0 0; box-sizing: border-box; width:100%; flex-basis:initial; flex-grow:initial}
.homebox{width: 100%}
.homebox .flexBox{display: flex;width: 1200px; margin:20px auto 0;justify-content: space-between }


/*FOOTER*/

.blokoviFuterGonji,.ikoniceFoter{display: none}

.oblast_futera {
  width:100%;
  border-top:1px solid #999;
  background:var(--primary_green); padding: 30px 0 20px; box-sizing: border-box

}
.oblast_futera a{text-decoration: none; color: inherit}
.oblast_futera li{color:#fff}
.oblast_futera img{display: block;width:100%}
.oblast_futera .footer_container{
  width:1200px; margin: auto;}

.blokoviFuter{
  display: flex;
  width:800px;
  margin:-50px auto;
  display: none
  
}
.blokoviFuter .blok{
  margin:20px
}

.footer_linksContainer{display: flex;}
.footer_linksContainer > div, .footer_linksContainer >ul{
  flex-grow: 1; 
	list-style: none;
}
.footer_linksContainer .footer_contact{width:200px;  padding:0 0 0 60px;box-sizing: border-box}
.footer_links p{
text-align: center;
	color:#f5f5f5;
	font-size:var(--fs);
}
.footer_linksContainer .footer_navigation a{display: block;  padding: 8px; font-size: 16px; text-transform: uppercase;}
.footer_linksContainer .footer_navigation a:hover{text-decoration: underline}
.footer_contact li{font-size: var(--fn); padding: 6px}
.footer_linksContainer .futerLogo img{width: 250px;margin: 0 auto 20px auto; }
.footer_linksContainer .futerLogo h4{color: #fff; font-weight: normal; font-size: 20px; padding:10px 5px; }
.futerDrustveneMreze{display: flex; justify-content: start; padding:16px 6px}
.futerDrustveneMreze ul{display: flex;list-style: none}
.futerDrustveneMreze li{width: 30px; padding: 3px }
.futerDrustveneMreze img{filter: invert(1)}