/* MAIN STRUCTURE CSS */

/* VARIABLES */
:root {
  --main: #264;
  --primary_green: #5a4;
  --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:var(--fn); font-family:asap,sans-serif; line-height: 1.6em}
img {border:0}
a{color:inherit;font-size:inherit;}
.oblast_strane{width:100%; margin:auto; }
.oblast_zaglavlja{position:fixed;width:100%;top:0; background: rgba(255,255,255,.9); font-family: asap ; border-bottom:4px solid #493; } .oblast_zaglavlja_inner{width:960px;margin: auto; position:relative;}
.oblast_sadrzaja{width:100%; min-height:700px;} 
p, a, h1,h2,h3,h4,h5,h6,li,label{color:#565;} 
h1 a, h2 a, h3 a{text-decoration: none}
.banner_container{margin-top:107px;;display: flex}
.top_baner, .mainTopBannerInner{width:100%;}
.top_baner{width:100%;}
.banner_elements{flex-grow: 1}
.banner_images{width:50%}
.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, .overlayDiv{display: none!important}

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

.zaglavlje_content{position:relative;display: flex;} 
.wrapperTraka .logo{width:250px; height:auto;display:block;} 
.logo a{display:block; width:100%}
.logo img{display: block;width:100%;} 

/* HOME */

.colorChange{background: rgba(1,1,1,.8); transition: .3s}
.oblast_sadrzaja{width:100%; min-height:700px;  margin:0 auto; }
.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 }


.colorChange{background: rgba(1,1,1,.8); transition: .3s}
.oblast_sadrzaja{width:100%; min-height:700px;  margin:0 auto; }
.index #coll_middle {padding: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 }
.horizont{position: relative;}
.horizont:nth-of-type(2n){background: var(--pg);color:#fff}
.horizont p, .horizont h2{color:inherit}
.horizont h2{font-size:var(--fxl); padding: 0 0 40px 0}
.horizont p{font-size:var(--fn); line-height:1.9em;}
.horizontInner{width: 66%;margin: auto;padding: 50px;position:relative;box-sizing:border-box;} .horizont:nth-child(2n):before{content: ""; width:18%; height:calc(100%); background: url('../../cms_upload/pages/files/131_left.png'); background-size: 100%; background-repeat: repeat-y; top: 0px; left:0; position: absolute; display: block; z-index: 10; }
.horizont:nth-child(2n):after{content: ""; width:16%; height:calc(100%); background: url('../../cms_upload/pages/files/131_right.png'); background-size: 100%; background-repeat: repeat-y; top: 0px; right:0; position: absolute; display: block; z-index: 10; }


.homeContainer .pages{margin:auto; display: flex; flex-wrap: wrap; justify-content: center; }
.homeContainer .page-pID{border:1px solid #777; list-style: none; width: 300px; margin:10px; border-radius:10px; }
.homeContainer .vesti .page-pID{width:340px}


.homeContainer .page-pID .info{padding: 16px; position:relative}
.homeContainer .page-pID .info .antrafile{font-size:var(--fn); line-height: 1.5em; padding: 10px 0; }
.homeContainer .page-pID .info h2{padding:20px 0; }
.homeContainer .page-pID img{width: auto; height:200px; width:100%; display: block; border-radius: 8px; }
.homeContainer .page-pID .img{margin:4px}
.homeContainer .page-pID .img a{display: block;width:100%;}

.index .banner_elements .page-pID{
	position: relative;
}
.index .banner_elements .moreinfo{
	bottom: -40px;
}

.index .moreinfo{
	position: absolute;
	bottom:10px;right:20px;
	width: 100px;
	margin-top:1em
	
}
.index .moreinfo a{
	display: block;
	text-decoration: none;
}

.moreinfo a span{
	border: 1px solid #242;
	display: block;
	text-align: center;
	color: #242;
	padding:2px;
	font-size: var(--fn);
}
.moreinfo a span:hover{
	border-color:#222;
	background: #374;
	color:#eee
}

.banner_elements .page-pID{
	display: flex;
	flex-flow: row-reverse;
	_border:1px solid #888;
	margin: 0 20px;
	box-sizing: border-box;
	border-radius:0 0 10px 10px;
	border-top: none;
}
.banner_elements .info{
	flex-basis: 0;
	flex-grow: 1;
	padding:20px;
	box-sizing: border-box;
}
.banner_elements .img a{
	display: block;
	width:260px;
	box-sizing: border-box;
}
.banner_elements .img img{
	display:block; 
	width: 100%;
	border-radius:0 10px 10px 0
}
.banner_elements h2{
	padding-bottom: 20px
}
.banner_elements h2 a{
	font-weight:lighter;
	line-height:1.4em
}
.banner_elements .info .antrafile{line-height:1.7em}

.boxInner{
	padding:20px 30px;

}
.boxInner h2{
		text-align: center;
	padding: 20px 0 30px 0;
}
.boxInner.negativeBox{
		background:#382;
	color:#eee;
}
.negativeBox .page-pID{
	background: #ececec;
}
.negativeBox h2{
	color:#eee;
}
.navigatorStrana{
	
	margin:auto;
}
.navigatorStrana td a,.navigatorStrana td > span {
	padding: 2px 10px;
	text-align: center;
	display: inline-block;
	border:1px solid #ccc;
	margin:3px;
	border-radius:4px;
	color:#374
}
.navigatorStrana td .NScurLink {
	color:#eee;
	background: #354;
}
/*GLAVNI MENI*/
.glavni_meni{display:flex;justify-content:flex-end;} 
.glavni_meni ul{display: flex;list-style: none; width:1000px;justify-content: right} 
.glavni_meni ul > li{text-align: center; border-left:1px solid #999; width:180px} 
.glavni_meni ul > li a{text-decoration: none; display: block; padding: 16px 100px 36px 10px; box-sizing: border-box; color:#555; border-bottom:3px solid transparent; font-size:16px; min-height:101px} 
.glavni_meni ul > li a:hover{background:#394; color:#eee}
.glavni_meni li img{width: 100%; display: block;height: 100%}

.colorChange .glavni_meni ul > li{min-height:unset; width:unset}
.colorChange .glavni_meni ul > li a{padding-top:6px; padding-bottom: 0;color:#eee;min-height: 40px; }
/* GORNJA TRAKA */ 
.wrapperTraka{display: flex;padding:16px 5px; box-sizing:border-box;
transition: all 1s;background:#fefefe; position:relative; display:flex; justify-content:flex-end;} 
.wrapperTraka img{display: block;width:100%;} 
.wrapperTraka p{ display: none} 
.wrapperTraka > div{display: flex; } 
.removeMenu.logoScroll{display: block; position: absolute; } 
.removeMenu.wrapperTraka{display: none}
.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{display:none; 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:130px; padding: 1px 16px 0 16px; }
.logoScroll img{display: block; width: 100%;

filter: grayscale(1) contrast(6) invert(1) opacity(.75)

}

/* BANNER */
.baner_slide_title{position:absolute; 
	top:20px;left:0; z-index: 100; font-size:44px; background: rgba(255,255,255,.7); color:#343; padding:20px 30px 20px 50px; border-radius:0 8px 8px 0; }
.baner_slide_description{position:absolute; 
	top:90px;left:0; z-index: 100; font-size:24px; 
	background: var(--main); color:#eee; padding:10px 30px 10px 50px; border-radius:0 8px 8px 0; }




/*PAGE*/
.page{line-height:2em}
.page ul{padding:1em 0;padding:0em 1.8em;}
.page p{max-width:800px}
.page h1{font-size:var(--fxl); padding:10px 0 30px 0; margin-bottom: 10px;border-bottom:1px solid #ccc}
.page h2{font-size:var(--fl); padding:40px 0 10px 0; margin-bottom: 10px;border-bottom:1px solid #ccc}
.page h3{font-size:var(--fn); padding:10px 0;}

.page .oblast_sadrzaja{display: flex;margin-top:102px}
.page #coll_middle{width: 1000px;padding: 30px;margin:auto; border-left:1px solid #4a4; box-sizing: border-box}
.page #coll_left,.page #coll_right{width: 260px;padding: 20px;}
.page #coll_left a{text-decoration: none;padding:16px;display:block;font-weight:normal}
.page .bocniMeniStrane{list-style: none;}
.page #coll_left .bocniMeniStrane >li >a{text-transform: uppercase}
.page .bocniMeniStrane li{ border-bottom:1px solid #ccc;}
.page #coll_left h3{background: var(--main);color:#eee;	font-size:var(--fm);text-align: center;}
.page #coll_left h3 a{color:#eee;}
.grejanje .oblast_sadrzaja{margin-top:130px }

/*GREJANJE*/
.grejanje #coll_middle{
	width:1000px; margin:auto;
}
.grejanje .oblast_sadrzaja h2{
	padding: 50px 0 30px;
	font-weight:lighter;
	font-family:asap;
}
.grejanje .catShortDesc{
	padding: 20px 60px 0 0;
}
.grejanje .pages{
	display: flex;
	 flex-wrap: wrap;
}

.grejanje .pages li{
	 width:310px;
	margin:10px 10px 0px 0;
	list-style: none;
	border:1px solid #aaa;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
	
}
.grejanje .page-pID .img a{
	display: block;
	width:100%;
}
.grejanje .page-pID .img a img{
	display: block;
	width: 100%;
}
.grejanje.catid_5 .pages li{
	position: relative;
	width:300px; height:240px;
}
.grejanje.catid_5 .pages h2{
	padding: 20px 6px 10px 20px;
}
.grejanje.catid_5 .pages .antrafile{
	padding: 4px 20px;
	line-height:1.2em;
	font-size:var(--fs);
}
.grejanje .pageTitle{
	padding: 20px 0 40px 0;
}
.grejanje .oblast_sadrzaja h3{
	color:var(--pg);
}
.grejanje .pageBody{
	width:980px;
}
.grejanje .pageBody ul{
	padding: 20px;
	margin-left:2em;
	width:80%;
}
.grejanje .pageBody ul li{
	padding: 10px;
}
.grejanje .nest_brojStrana{
	position: absolute;
	bottom:10px; right:10px;
}




.grejanje.catid_5 .pages{ width:100%; margin:20px auto; display: flex; list-style-type: none; flex-wrap: wrap }

.grejanje.catid_5 .page-pID{display: none; }

.grejanje.catid_5 .page-cID{
	border:1px solid #888; margin: 10px 20px 10px 0;
	width:260px;height: 60px;
	overflow: hidden
}
.grejanje.catid_5 .page-cID .img{
	display: none;
}
.grejanje.catid_5 .page-cID a img{
	display: block;
	width:100%;
	
}
.homeContainer{
	_border-top:1px solid #484
}

/* NOVOSTI */
.novosti .oblast_sadrzaja{
	display: flex;
	max-width:1200px
}
.novosti #coll_middle{

	width:960px;
	margin: 160px auto 100px auto;

}
.novosti #coll_right{
	width:220px;
	font-size:var(--fs);
		margin-top:160px;
}
.novosti .pageBody p{
	line-height: 1.8em;
	padding: 10px;
	max-width: 80%;
	font-size:var(--fn);
}
.novosti .pages
{
	display: flex;
	flex-wrap: wrap;
	padding:20px;
	
}
.novosti .page-pID{
	width:380px;
	list-style: none;
	margin:20px;
	border:1px solid var(--main);
	padding-bottom: 50px;
	position: relative;
	
}
.novosti .page-pID .info h2{
	padding: 0 20px;
	line-height: 1.4em
}
.novosti .page-pID .img{
	_padding:20px
}
.novosti .page-pID .antrafile{
	padding:20px;
}
.novosti .page-pID img{
	width: 100%;
	
}
.novosti .page-pID .moreinfo a,
.grejanje .page-cID .moreinfo a,
.grejanje .page-pID .moreinfo a{
	position: absolute;
	bottom: 15px; right:30px
	
}
.novosti .page-pID .moreinfo a span,
.grejanje .page-cID .moreinfo a span,
.grejanje .page-pID .moreinfo a span{
	display: block;
	background: var(--main);
	color:#eee;
	padding: 3px 30px
}
/* MENU RIGHT */

#coll_right h3{
	font-weight:normal;
	font-size:var(--fl);
	font-weight:lighter;
	padding: 0 0 20px 0;
}
.bocniMeniStrane li{
	list-style: none;
	padding: 6px 0;
	border-top:1px dashed #383
}


/*FOOTER*/

.oblast_futera{
	background: var(--main);
}
.footer_container{
	width:90%;

	margin: auto
}
.footer_blocks{
	display: flex;
}
.footer_blocks .footer_block{
	flex-basis: 0;
	flex-grow: 1;
	padding: 30px
}
.footer_block{
	list-style: none;
	
}
.footer_block h3{
	color:#eee;
}
.footer_block h4 a{
	color: #eee;
	font-weight:normal;
	display: block;
	padding: 10px 0
}
.footer_block li{
	color:#eee;
	list-style: square;
	margin: 4px 1.5em;
}
.footer_block li a{
	color: inherit;
	
}
.footer_block p{
	color:#eee;
	padding: 10px 0
}