/* MOBILE VERSION CSS */


*{
	padding:0px;
	margin:0px;
}
HTML{
	width:100%;
}
BODY {
	width:100%;
	height: 100%;
	margin: 0px;
	padding:0px;
	font-size:14px;
	overflow-x: hidden;
	overflow-y: scroll;
		color:#505050;
	 font-family:asap,sans-serif;
	
}


/* VARIABLES */
:root {
  --main: #267;
	--pink: #ee365e;
	--lightgrey: #d9d9d9;
	--primary:#888;
  --primary_green: #888;
  --pg: #389;
	--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);
}


img {width: 100%; height:auto;}
a{text-decoration:none;outline:none;}

@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');}

.icons, .index .searchDugme {font-family: icons;}


body, html,p, a, div, ul, li, h1, h2, h3, img, span{
	color: var(--lightgrey);
}
li{list-style-position: inside}

/* DISPLAY NONE */

.catTITLE{display: none;}
.containerNoOverflow toggleMenu{display: none;}
.top_baner{display: none;}
.navigatorKataloga{display: none;}
#bocnaNavigacija{display: none;}
.wrapperTraka .divLevi{display: none ;}
.divDesni .registarKontainer{display:none ;}
.wrapperTraka .divDesni .item:nth-child(1) {display: none;}
.sideCatNav{ display: none; }
.tempContainer{display: none}
.userBar {display: none}
.wishListBar {display: none}
.CatTrackNav {display: none}
.divDesni .itemTitle{display: none;}
.izborIkonica, .hiddenText p {display: none;}
.blokTop, .PageTrackNav{display: none}
.flyOutMenu{display: none}
.registrator .form_label {display: none}
.logoScroll,.fixedLink_form,.handle,pre,.compareProd{display: none!important;}

/*test*/
.catalog .fixedLink_form, .katalog .fixedLink_form, .akcije .fixedLink_form, .contact .fixedLink_form, .nasa_preporuka .fixedLink_form, 
.pet_jungle .fixedLink_form, .about_us .fixedLink_form{display: none}

/*HEADER*/

.oblast_zaglavlja{display:block; position:relative; padding:10px; 
	box-sizing:border-box; border-bottom: 1px solid #ddd;background: #1a1a1a }
.oblast_zaglavlja .logoHome{width: 170px}
.oblast_zaglavlja .logoHome img{display: block;width: 100%}
.oblast_zaglavlja .divDesni .item:nth-child(2) .itemIcon{width: 32px;position: absolute;
top:18px; right: 60px; }
.oblast_zaglavlja .divDesni .item:nth-child(3) .itemIcon{display: none}



.oblast_zaglavlja .mob_main_menu{position: absolute; top:15px;
right:10px;  width:40px; height:40px; _border:1px solid var(--main); border-radius:10px;
display: flex; align-items: center; justify-content: center; }
.mob_main_menu .mobMenuLine{display: inline-block; background: white; width: 70%; height:2px;
position:relative;}
.mob_main_menu .mobMenuLine:before{content:""; width: 100%; background: white; height: 2px;
display: inline-block; position:absolute; top:-10px;transition:.2s }
.mob_main_menu .mobMenuLine:after{content:""; width: 100%; background: white; height: 2px;
display: inline-block;position:absolute; top:10px; transition:.2s}

.changeMobMenu .mobMenuLine{background: white; }
.changeMobMenu .mobMenuLine:before{transform: rotate(0deg);top:0px;_width: 120%;left: ;
transition:.5s}
.changeMobMenu .mobMenuLine:after{transform: rotate(0deg);top: 0px; _width: 120%;left: ;
transition:.5s}

.meni_jezici{display: none; position: absolute; top: 25px; right: 15%;  z-index: 112; }
.meni_jezici li a span{display: none}
.meni_jezici li{list-style: none; padding-right: 10px}
.meni_jezici li a img {width: 30px}

.wrapperTraka {border-bottom: 15px; background: var(--pink); }

.overlayDiv{background: rgba(1,1,1,.4); position: absolute; width: 100%; height: 100%; left: 0;
	top:0; z-index: 1; display:none; transition:1s}
.showOverlay{display: block; transition: 1s; }

.glavni_meni{background: #fff; position: absolute; width: 100%; margin:0!important;
top: 100%;left: 0; border-top:1px solid #ddd; _display:none;
visibility: hidden;
opacity: 0;
z-index: -1;
transform: translateY(-3em);
transition:all .2s linear }
.glavni_meni li{list-style: none}
.glavni_meni li a{display: block;padding: 15px 0; font-size: var(--fn); border-bottom: 1px solid #ddd;
text-align: center; color: #1a1a1a}

.menuSlideDown{visibility:visible; opacity:1;
z-index:1; transform: translateY(0); transition: transform .3s linear 0s, z-index .3s linear 0s}

.catalog_search{display: flex; flex-wrap:nowrap; justify-content:space-between; margin-top:10px;
position:relative;display:none}
.catalog_search #brzi_pretrazivac{ width: 100%}
.catalog_search .stringPolje{width:80%; font-size: var(--fs); padding: 5px; 
box-sizing: border-box;border:1px solid transparent; border-bottom:1px solid #ddd}
.catalog_search .stringPolje:focus{outline: none; border: 1px solid #ddd}
.catalog_search .searchDugme{display:inline-block; position: absolute; top:0; right: 10px }
.catalog_search .searchDugme:after{content: "\f002"; font-size: 26px; color:var(--main);font-family: icons;
display: inline; vertical-align: bottom}

#suggestions{background: #fff; position: absolute; top:35px; border-top:1px solid #ddd;
width:100%; padding-top:20px}
#suggestions li{display: flex; border-bottom:1px solid #ddd;}
#suggestions li img{display: block; width: 40%;border-right: 1px solid #ddd; height:auto}
#suggestions li div{padding: 10px; box-sizing: border-box;width:60%}
#suggestions .close_suggestions{ width: max-content; height: max-content; 
display: inline-block; position: absolute; left: 0; top:0}
#suggestions .close_suggestions:after{content:"\f00d"; font-family: icons; font-size: 26px;
color: var(--pg)}



/*HOME PAGE*/


.oblast_sadrzaja{background: #112; padding:0; box-sizing: border-box; display: flex;
	flex-direction: column; position:relative}
.oblast_kataloga{padding:20px 15px;box-sizing: border-box; background:#fff}
.index #coll_middle p{font-size:var(--fs); line-height:1.8em }
#coll_middle{width: 100%; margin: auto; padding:0; box-sizing: border-box; background: #1a1a1a ;order: 1}

.obavestenje{background: #fff; margin: 0 0 20px; padding: 15px; box-sizing: border-box; 
	border: 1px solid var(--pg); position:relative}
.obavestenje:before{content:"!"; position: absolute; width: 36px; height: 36px; background: var(--pg);
color: #fff; display:flex; justify-content:center; align-items:center; font-size:26px; border-radius:50%;
top:-15px;right:10px}
.index #coll_middle .obavestenje p{font-size: var(--fn); padding-bottom: 5px}


.flexBox> div{background:#fff}
.flexBox .box2, .specific{margin-bottom:20px }
.flexBox .box2>h3 a{text-align: center; display: block; font-size: var(--fl);
font-weight: normal; padding: 10px 0;box-sizing: border-box; border-bottom: 1px solid #ddd}
.flexBox .box2 .boxSlika{border-bottom: 1px solid #ddd}
.flexBox .box2 .boxSlika img{display: block; width: 100%}
.flexBox .box2 .boxOpis{padding: 10px; box-sizing: border-box}
.flexBox .box2 .boxOpis h3 a{display: block;font-weight: normal; font-size: var(--fm); 
	padding-bottom: 10px; color:var(--pg)}
.flexBox .box-2-1 {box-sizing: border-box;display:block; width:100%}
.box-2-2 .boxOpis h3, .box-2-3 .boxOpis h3{_display: none;}
.box2 .akcijaHomeSpan{background:#ff592b; color:#fff;display:block; width:max-content;
padding:5px; text-transform:uppercase; position:absolute}
.box2 .akcijaHomeSpan:after{content:""; border-right:12px solid #ff592b;
	border-bottom:15px solid transparent; position: absolute; right:0; bottom:-8px
}

.boxDva{background: #fff;padding-bottom: 10px; display:none}
.boxDva img{border-bottom: 1px solid #ddd}
.boxDva h3 a{font-weight: normal; font-size: var(--fm); color: var(--pg); padding: 10px;
display: block; box-sizing:border-box}
.boxDva p{padding:0 10px;box-sizing: border-box}


.homebox .specific{ margin: 0px auto; border-top:none; background: #fff}
.specific p,.specific h3{padding: 10px 10px 0}
.naslovAkcije,.naslovPreporuke{background: #ccc; color:#fff;padding: 5px; width: max-content;
position:absolute;top:-33px}
.boxJedan{border-top:1px solid #ccc; position: relative; margin-top:50px;}
.boxJedan ul{display: flex;overflow-x: scroll; overflow-y: hidden;
	margin: 20px auto; border: 1px solid #ccc; }
.boxJedan ul li{padding:30px 10px 35px; margin: 0 5px; background: #fff;
	position:relative;list-style: none }
.boxJedan ul li:first-child{border: none;}
.boxJedan .catalogueThumbLink{width:180px;height: 180px; display:block;border-bottom: 1px solid #ddd}
.boxJedan .catalogueThumbImage{width: 180px; height: 100%;}
.boxJedan .productPrice{display: block;background: #8cc63f;color: #fff;
padding: 5px; width:100px; position:absolute;left: 0;top: 0}
.boxJedan .productPrice span{color: #fff; padding-right: 5px}
.boxJedan .catalogueItemText{padding: 10px 0 20px; }
.boxJedan .catalogueItemText h3{padding-bottom: 7px; font-weight: normal; font-size: var(--fn);
color:var(--main)}
.boxJedan .catalogueItemText p{ position: absolute; bottom: 0; left: 0; width: 80%;
background: #ccc; ; padding:2px 5px; box-sizing: border-box; font-size: 12px;
color: #fff; }
.akcijskiProizvod{width: 40px; display: block; position: absolute; right: 3px;top:2px;z-index: 100 }
.akcijskiProizvod img{display: block;width: 100%; border-radius: 50px}

.specFlex >div{margin: 30px auto; border-bottom: 1px solid #ccc; padding-bottom: 20px; box-sizing: border-box}
.specFlex >div img{margin: 20px 0}
.specFlex >div h3{margin: 10px 0}
.imageForMobile {width: 100%; position: absolute; left: 0; right: 0; top: 6%; display: none}
.imageForMobile img{width: 100%}


.index .horizont.reference_home {display: none}

.software_production h2 { margin: 30px 0; text-align: center}
.software_production p {padding: 10px}
.software_production .vise {text-align: center}

.plumx_home .tekst {text-align: left; margin:0}
.plumx_home p {padding: 10px}
.plumx_home h2 {margin: 30px 0}

.hosting_home .options .coll {border: 1px solid; margin-bottom: 10px}
.hosting_home .options .coll li {list-style: none}
.hosting_home .options .coll .naslov {background: #fff; color: #1a1a1a}
.hosting_home .options .coll .kupi_hosting{background: var(--pink)}

.brojac {display: flex; padding: 60px 0 20px 0; justify-content: center;flex-wrap:wrap}
.brojac >div{display: flex; flex-direction: column;justify-content: space-around;  width:40% }
.brojac >div span{display: flex; text-align: center;  color: #fff; margin:auto;}
.brojac >div span:nth-child(1){font-size: 16px;padding: 0 0 6px 0;  }
.brojac >div span:nth-child(2){font-size: 28px; font-family: number; padding: 5px 8px 20px 8px; box-sizing: border-box;color: #FFFFFF;}
.brojac >div span:nth-child(2):hover {transform: scale(1.3)}

/*PAGES*/

#pageTitle, .pageTitle {text-align: center; color: #aaa; 
	font-weight: lighter;
	padding: 20px 6px}
.naslov_kategorije{padding: 10px 0;text-align: center; color: #666; font-size: var(--fxl)}
.catTitle{text-align: center; padding-top: 10px; color: #666; padding-bottom: 10px}
.kratak_opis_kategorije{padding-bottom: 10px; font-size: var(--fn); line-height: 1.5rem}
.page #coll_middle{background: #fff}
.page #coll_middle p,.page #coll_middle li{font-size: var(--fn); line-height: 1.5rem; padding: 5px 0}
.page #coll_middle img{display: block;width: 100%;height: auto;}
.page #coll_middle>h2,.page #coll_middle>h3{ padding: 20px 0 10px}
.page #coll_middle .quickLinksPage{margin-bottom: 20px}
.page #coll_middle .quickLinksPage li{list-style: decimal;list-style-position: inside;padding: 5px 0 }
.page #coll_middle .blokContainer ul li{list-style: disc; list-style-position: inside}


.horizont{
	padding: 20px 0px; text-align: center
}
.horizont h2{padding: 20px 0; color:var(--lightgrey); font-weight: lighter}
.horizont li{
	list-style-position: outside;
	margin:15px 20px;
	line-height: 1.8em;
	font-size:16px
}

.homeContainer{
	padding: 20px;
	font-size:var(--fs)
}

/* O NAMA */
.onama .horizontInner p{
	text-align: left; 
	padding: 20px;
	box-sizing: border-box;
	line-height: 1.8em;
}

.onama .horizontInner ul{
	text-align: left;
	padding: 20px;
	font-size:var(--fs)
}
.onama .horizontInner ul li{
	font-size: inherit;
}


/*PARTNERI*/
.projekti.catid_30 #pageTitle{
	display: none;
}
.partneri .slika a{
	width:120px;
	display: block;
	padding: 6px;
	background: #fff;
	
}
.partneri .flex{
	padding: 20px;
}
.partneri .flex > div{
	display: flex;
	flex-wrap:wrap;
	gap:6px;
	justify-content: center;
}
.partneri h2{
	text-align: center;
	font-weight:lighter;
	padding: 40px 0 20px 0
}

/*NAVIGACIJA*/

#coll_left{order: 2; margin-top:20px;}
#coll_left li{list-style: none}

#coll_left h3 a,#coll_left li a{ display: block; padding: 15px; 
		border-top: 1px solid #ddd5; 
	font-size: 16px; box-sizing: border-box}
#coll_left h3 a{ color: #fff;font-size: var(--fn);}

.markerStrane a,.markerKategorije>a{color: var(--main); font-weight: bold; }


#coll_left .bocniMeniStrane>li>a{text-transform: uppercase}
#coll_left .bocniMeniStrane li ul li a{position: relative; display: flex; align-items: center}
#coll_left .markerPodStrane a{}

.tabMeniStrane {
	margin:0 0 40px 0;
}
.tabMeniStrane li{
	display: block
}
.tabMeniStrane li a{
	text-align: center;
	display: block;
	font-size:16px; 
	padding:8px;
	border:1px solid #aaa;
	margin: 10px;
}



.bocniMeniStrane{
	background: none;
}

.bocniMeniStrane


/*KONTAKT*/
.kontakt .contactBlock{margin: 10px 0; border: 1px solid var(--pg); border-radius: 5px;
padding: 10px; box-sizing: border-box}
.kontakt .fullBlock{border: none; font-size: var(--fm); padding-top: 20px}
.kontakt .contactBlock li{list-style: none}
.kontakt .contactBlock li:first-child{ font-size: 18px!important; font-weight: bold}


/*FOOTER*/

.oblast_futera {background: #112; position: relative;padding:10px 0 30px 0;
	box-sizing:border-box; border-top: 1px solid #aaa5 }
.oblast_futera li{list-style: none; }

.oblast_futera p{color:#ddd; padding: 4px 20px}
.oblast_futera ul{margin:20px 0}
.oblast_futera li a{list-style: none; display: block; color:#ddda; 
	text-align: center; padding: 18px; border:1px solid #aaa5; border-left:none;border-right:none;
	margin:10px 0;}

.footer_linksContainer{position: relative;text-align:center; }
.footer_linksContainer h3{color:#bbb; padding: 20px}
.footer_linksContainer span a{color:#aaa; padding:10px; font-size:30px}



.footer_navigation{text-align: center;}
.footer_navigation a{display: block; padding: 10px;font-size: var(--fm);
border-bottom:1px solid #fff;} 
.footer_contact li, .footer_info li{padding-top: 10px; color: #fff}
.footer_links li a{color: #fff}
.footer_mob_info{margin: 20px auto; width: max-content }
.footer_mob_info a{display: block; color: #fff;font-size: 18px;position: relative; padding: 5px 0;}
.footer_mob_info a:before{ content: "";border-left: 8px solid #fff;
border-top:6px solid transparent; border-bottom:6px solid transparent; 
	position:absolute; left: -15px; top: 5px}
.futerLogo{text-align: center}
.futerLogo h4{color :#fff; font-size: 16px; padding-top: 10px; font-weight: normal;}
.footer_links p{color: #fff; margin-top: 10px}
.footer_linksContainer .logoImg {width: 180px;margin: auto;} 
.footer_contact, .footer_info{text-align: center;
	padding: 30px 0 20px 0}
.futerDrustveneMreze ul{display: flex; padding:0 0 10px }
.futerDrustveneMreze li{padding: 0 5px}
.futerDrustveneMreze img{display: inline-block; width: 40px; filter: invert(1)}
.ikoniceFoter {width: 20px; position: absolute; top: 1%; right: 2%; display: none}
.oblast_futera .kartice{display: flex; justify-content: space-evenly;
margin-top:20px; flex-wrap:wrap}
.oblast_futera .kartice span{display: block; width: 20%; margin:10px}
.oblast_futera .kartice span a{display: block; width: 100%}
.oblast_futera .kartice img{display: block; width: 100%}