/* MOBILE CSS */
*{
	padding:0px;
	margin:0px;
	color:#505050;

}
HTML{	
	width:100%;
  overflow-y: scroll;
}
BODY {
	width:100%;
	font-size:14px;
    font-family: 'Open Sans', sans-serif;
}
img {
    display:block;
    width:100%;
}
a{text-decoration:none;outline:none;}

@font-face {font-family: icons; src: url(font-awesome/fonts/FontAwesome.otf);}
.icons, .index .searchDugme {font-family: icons;}
.zaglavlje_content {background:#fff;position: relative;}
.oblast_zaglavlja{position: fixed; top: 0; left: 0; right: 0}

#pageBody {width: 95%; margin: auto;}

/* DISPLAY NONE */
.absoluteBoxLinks{display: none;}
.hoverOn{display: none;}
.map_container{display: none;}
.top_baner, 
.CatTrackNav{display:none;}
#fixedLink_form{display: none}
#bocnaNavigacija {display:none ;}
.katalog #coll_left{display: none}
.novosti #coll_left{display: none}
.nest_info, .nest_img{display: none}

.about .oblast_sadrzaja{padding-top: 60px;}

#pageTitle, .naslov_kategorije, .proizvodjac{text-align: center;color: #444;font-size: 32px;padding: 20px 0;margin: 10px 0 0 0; font-weight: lighter;}
.index .pageTitle{padding-top: 70px!important;}
.novosti .pageTitle{padding-top: 50px!important;}
.katalog .catTitle{text-align: center; color: #444; font-size:  28px; font-weight: lighter; 
    padding: 20px 0 20px 0; }



.catid_27 span{}
.catid_27 span img{width: 100%!important; display: block!important;}
.catid_27 p{font-size: 16px; line-height: 1.6em; padding: 20px 0}

/* HEADER */
.wrapTraka{background: rgb(0,148,100);
background: linear-gradient(90deg, rgba(0,148,100,1) 0%, rgba(3,2,2,1) 100%);padding: 6px 0; display: none}
.wrapTraka ul{display: flex; justify-content: space-around; }
.wrapTraka ul li a{color: #fff}
.wrapTraka ul li {display: block;}


.glavni_meni {display:none;width:97%;margin:auto; padding:0 0 1px 0; background: #ddd}
.glavni_meni li{ background: #fff; display: block; margin-bottom: 2px;}
.glavni_meni li:first-child{border-top: 2px solid #ddd}
.glavni_meni a{ display: block;  width:100%; padding: 15px; box-sizing: border-box; font-size:16px; font-weight:normal;color:#666;}
.mob_main_menu { position:absolute;top:5px;right:25px; padding:2px 4px; box-sizing:border-box;}
.mob_main_menu:after { content:"\f0c9";font-family:icons; font-size:27px; color:#666;}
.zaglavlje_content{display: block; width:100%; box-shadow:  2px 1px 2px 1px #ccc;}

.logo{display: block;width: 120px;}
.logo img{width: 100%; display: block;}

/*PADAJUCI MENI*/
.lista_br0 >a{position: relative; }
.padajuci_meni_nivo_2 a{display: block;}
.padajuci_meni_nivo_2{display: none; }
.padajuci_meni_nivo_2 >li{padding-left: 30px; box-sizing: border-box; border-bottom: 1px dashed #ddd}
.padajuci_meni_nivo_2 >li:last-child{border-bottom: none}
.padajuci_meni_nivo_2 >li a{font-size: 14px!important; color: #777}
.lista_br0 >a:after{position: absolute; content: "\f078"; font-family: icons; right: 15px}
.padajuci_meni >li{box-sizing: border-box;border-bottom: 1px dashed #ddd; position: relative}
.padajuci_meni >li:last-child{border-bottom: none}
.padajuci_meni>li a{font-size: 15px; padding-left: 40px; box-sizing: border-box;}
.padajuci_meni>li a:before {content: "\f054"; font-family: icons; left: 15px; top: 15px; position: absolute; }

/*SEARCHBOX*/

.index .catalog_search{float:none;}
.catalog_search{ display: none; width: 100%; margin: 0 auto; background: rgb(3,2,2);background: linear-gradient(90deg, rgba(3,2,2,1) 2%, rgba(0,148,100,1) 100%);}

#brzi_pretrazivac{text-align: center; padding:10px 0; }
.suggestionsBox, .suggestionList{display:none!important;;}
#brzi_pretrazivac input{ width:60%; padding:6px; vertical-align: top;font-size:16px; border:none;}
#brzi_pretrazivac .searchDugme{ display: inline-block; width: 50px;padding: 2px 2px;text-decoration: none;text-align: center;font-family: icons;color: #eee; font-size: 30px;}

.flyOutMenu{background:#568; position: fixed; bottom:0;right:0;left:0; text-align: center; z-index: 100;}
.flyOutMenu span{display: block; padding:14px 0;font-family:sans-serif; color:#ddd;}

/*HOME*/
.naslov-pocetna{ display: flex;padding-top: 90px; border-bottom: 1px solid #0d7f40}
.naslov-pocetna h2{width: 100%; font-size: 20px; font-weight: lighter; padding: 6px}
.naslov-pocetna img{width: 30px; height: 30px; display: block; }

.flexHome {display: flex; margin: 20px auto; flex-flow: wrap; width: 100%;}
.flexHome .box{width: 45%; height: 220px; margin-right: 15px; margin-top: 15px; border: 1px solid #ccc; padding: 10px;
box-sizing: border-box} 
.flexHome .box img{width: 60%; display: block; padding: 20px 0; box-sizing: border-box; margin: auto;}
.flexHome .box h3{font-weight: lighter; text-align: center; margin: auto;}
.flexHome .box:nth-child(2) img{width: 80%}
.flexHome .box:nth-child(3) img{width: 100%; padding-top: 60px}

.novosti-home{padding-top: 20px}
.novosti-home .page-pID{display: block}
.novosti-home .info{padding: 5px 0; line-height: 25px;}
.novosti-home .info h2{font-weight: lighter;}
.navigatorStrana {margin: auto; font-size: 18px}
.navigatorStrana .NSsredina a{color: #444}
.navigatorStrana .NSsredina .NScurLink{color: #777}

.katalozi-pocetna {display: flex; flex-flow:  wrap ;width: 100%; margin: auto}
.katalozi-pocetna li{display: block; width: 48%; margin-right: 5px; margin-top: 20px}
.katalozi-pocetna li .naziv-kataloga{padding-top: 20px; display: block}
.katalozi-pocetna li img{border: 1px solid #ccc; width: 100%; height: auto; }

.more {background: #0d7f40; width: 300px;  margin: 40px auto 10px; display: block;}
.more a{padding: 10px; display: block; width: 100%; color: #fff; font-size: 18px; font-weight: lighter; position: relative;}
.more a:after {content: "\f101"; font-family: icons; position: absolute; left: 220px; top: 9px}

.boxFlex p{line-height: 20px; margin-top: 10px;font-size: 16px}
.boxFlex div:nth-child(2){padding: 20px 0; box-sizing: border-box}

/*KATALOG*/
.katalog #coll_middle{width: 95%; /*! margin: 60px auto 0 ; */  }
.katalog .pages{display: flex; flex-flow: wrap;}
.katalog .page-cID{width: 45%; margin-right:20px; display: block;}
.katalog .page-cID h2{font-weight: lighter; font-size: 18px; margin: 10px 0 20px 0}
.katalog .proizvodi-opis, .katalog .proizvod-tabela, .katalog .proizvod-pdf, .katalog .proizvodi-galerija{padding-top: 20px}
.katalog .proizvodi-opis{line-height: 20px}
.katalog .proizvodi-opis h3{padding-bottom: 10px}
.katalog .proizvodi-lista {padding-left: 10px; margin: 10px 0; box-sizing: border-box;}
.katalog .proizvodi-lista li{padding-top: 5px}
.katalog .proizvod-pdf ul li {margin-top: 10px; display: block}
.katalog .proizvod-pdf ul li:after{content: "\f019"; font-family: icons; margin-left: 10px;}
.katalog .proizvodi-galerija h2{font-weight: lighter;}
.katalog .proizvodi-galerija ul{display: flex; flex-flow: wrap; width: 100%;}
.katalog .proizvodi-galerija ul li{display: block; margin-right: 10px; width: 120px; padding: 20px 0}
.katalog .product{display: flex; flex-flow: wrap; width: 95%; margin:20px auto; padding-top: 30px}
.katalog .product .page-pID{width: 130px; margin-right:5px; display: block;}
.katalog .product .page-pID h2{font-weight: lighter; font-size: 18px; margin: 10px 0 20px 0}
.katalog .product .img{height: 130px; overflow: hidden;}

.nestlevel_1 {display: flex; flex-flow: wrap; width: 100%;
    margin: 50px auto 0; padding: 20px 0; box-sizing: border-box}
.nestlevel_1 >li{display: block; list-style: none; margin: 5px 10px; width: 45%}
.nestlevel_1 > li ul li {display: block}
.nestlevel_1 > li .img{width: 180px; overflow: hidden; border: 1px solid #ccc}
.nestlevel_1 > li .img a{width: 100%; display: block}
.nestlevel_1 > li .img img{width: 100%; display: block;}
.nestlevel_1 >li h2{ font-size: 16px; display: block; margin: 10px 0; font-weight: normal; }



/*PROJECTS*/
.project .pageTitle{ padding-top: 70px!important;}
.project .map-closer{padding: 25px 5px 15px; box-sizing:border-box}
.project .map-closer iframe{width: 100%; display: block;}
.project .project-box{width: 90%; margin: 20px auto}
.project-box h2{border: 1px solid #ddd; padding: 10px; box-sizing: border-box; background: #0d7f40; color: #fff; font-weight: lighter; font-size: 18px}
.project-box ul{margin-left: 10px; position: relative}
.project-box ul li{display: block; padding-top: 10px; font-size: 16px}
.project-box ul li:after{content:"\f019"; position: absolute; right: 5px; font-family:icons; color: #555}

/*ABOUT*/
.about .pageBody p{line-height: 20px; font-size: 16px; padding-top: 20px;}
.about .pageBody h2{ font-weight: normal; padding: 10px 0;}
.about .preuzimanje{font-weight: lighter; display: block; padding-bottom: 10px}
.about .preuzimanje:after{content:"\f019"; margin-left: 15px; font-family:icons;color: #555}
.about p img{display: block; width: 100%!important;}
.about .pageBody{padding: 0px 0 20px}

/*NOVOSTI*/
.novosti .pages{width: 95%; margin:auto;}
.novosti .page-pID{display: block; padding-bottom: 30px; position: relative}
.novosti .moreinfo{background: rgb(3,2,2);
background: linear-gradient(90deg, rgba(3,2,2,1) 2%, rgba(0,148,100,1) 100%); padding: 10px; 
    box-sizing: border-box; margin: 10px 0}
.novosti .moreinfo span{color: #fff; font-size: 18px}
.novosti .page-pID .info{line-height: 20px}
.novosti .page-pID .publish_date{position: absolute; top:0; left: 0; border: 1px solid #fff; 
    padding: 5px 10px; background: #fff;border:1px solid #ccc;}
.novosti .page-pID h2{font-weight: normal; font-size: 18px; padding: 10px 0}
.novosti .catTitle{text-align: center;font-weight: lighter; padding-top: 60px;}
.novosti .catShortDesc{text-align: center; padding: 20px 0; font-size: 17px}

.novosti .pageBody span {padding: 20px!important; 
    width: 100%; display: block; box-sizing: border-box;}
.novosti .pageBody span img{width: 100%; display: block; height: 200px!important;
margin-bottom: 20px}


/*BOCNI MENI - COLL-LEFT*/
.about #coll_middle{order: 2}
.about #coll_left{order: 1}
.bocniMeniStrane li{padding-top: 10px; font-size: 16px; 
    margin-left: 20px; list-style-type:  disclosure-closed; color: #0d7f40}
.bocniMeniStrane li a{text-decoration: underline;}
.bocniMeniStrane .markerStrane a{color: #0d7f40}
.bocniMeniStrane .markerKategorije a{color: #0d7f40}
.bocniMeniStrane >ul  {margin-left: 22px}
.bocniMeniStrane >ul li{font-size: 14px}
.bocniMeniStrane >ul .markerPodStrane a{color: #0d7f40}

/*KONTAKT*/
.kontakt h2{font-weight: lighter; font-size: 20px; margin-bottom: 10px;}
.kontakt >div >div{padding-bottom: 20px; line-height: 20px}
.kontakt >div >div .tel:before{content: "\f095"; font-family: icons; padding-right: 5px}
.kontakt >div >div .mail:before{content: "\f003"; font-family: icons; padding-right: 5px}
.kontakt >div >div .adresa:before{content: "\f015"; font-family: icons; padding-right: 5px}
.kontakt >div >div .fih:before{content: "\f095"; font-family: icons; padding-right: 5px}
.kontakt >div >div .sajt:before{content: "\f041";font-family: icons; padding-right: 5px}
.kontakt .map-closer{padding: 10px 0; box-sizing: border-box}
.kontakt .map-closer iframe{width: 100%; display: block}

.background-page{display: block;
position: fixed;
top: 70%;
left: 50%;
z-index: -1;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.075;}
/*OBLAST FUTERA*/
.oblast_futera{background: rgb(3,2,2);
background: linear-gradient(90deg, rgba(3,2,2,1) 2%, rgba(0,148,100,1) 100%);}
.oblast_futera .footer-kolona{ padding: 15px 0}
.oblast_futera .footer-kolona li , .footer-kolona h2{color: #fff; text-align: center; font-weight: lighter}
.oblast_futera .footer-kolona li  a{color: #fff;}
.oblast_futera .footer-kolona li {display: block; padding-top: 5px; font-size: 16px}