/* 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:vaillantPro;

}

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

p,h2,h4,h3{line-height: 1.3rem}
img {width: 100%; height:auto;}
a{text-decoration:none;outline:none;}
li{list-style-position: inside; line-height: 1.3rem}
iframe{width: 100%}

@font-face {font-family: vaillantPro; src: url('fonts/FfMetaWebPro.woff');}
@font-face {font-family: vaillantBold; src: url('fonts/FfMetaWebProBold.woff');}
@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:#555;
}


/* DISPLAY NONE */

.catTITLE{display: none;}
.containerNoOverflow toggleMenu{display: none;}
.top_baner{}
.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, .TrackNav{display: none}
.flyOutMenu{_display: none}
.registrator .form_label {display: none}
.logoScroll,.fixedLink_form,.handle,pre,.compareProd{display: none!important;}
.index .fixed-futer{display: none;}




.top_baner{ width: 100%!important; height: max-content!important;}
.top_baner div div div div img{width: 100%!important; display: block!important; height: auto!important}
.top_baner #jssor1_container{width: 100%!important;}
.top_baner > div{width: 100%!important;}

.baner_slide_description{font-size: 25px;position: absolute; bottom: 50px; left: 10px
}
.baner_slide_description li{color: #fff;}
.baner_slide_title{color: #fff; font-size: 40px; width: 40%; position: absolute; top: 200px;left: 10px
}

/*HEADER*/

.oblast_zaglavlja{display:block; position:relative; padding:10px 0 0 0;
    box-sizing:border-box; }
.oblast_zaglavlja .logoHome{width: 165px; margin: auto;}
.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;
    left:10px;  width:40px; height:40px; _border:1px solid var(--main); border-radius:10px;
    display: flex; align-items: center; justify-content: center; }

.mob_main_menu:before{content: "\f0c9"; font-family: icons; color:var(--main); font-size: 25px }


.changeMobMenu .mobMenuLine{background: transparent; }
.changeMobMenu .mobMenuLine:before{transform: rotate(35deg);top:0px;_width: 120%;;
    transition:.2s}
.changeMobMenu .mobMenuLine:after{transform: rotate(-35deg);top:0; _width: 120%;;
    transition:.2s}

.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}

.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;}
.catalog_search #brzi_pretrazivac{ width: 96%;padding:6px;  border-radius:6px; display:none}
.catalog_search .stringPolje{width:70%; font-size: var(--fn); padding: 8px 10px;
    box-sizing: border-box;border:none; border-radius:6px;margin-left:10%; background:none;color:#888; border:1px solid #aaa }
.catalog_search .stringPolje:focus{width:80%; color:#555; background: #fed}
.catalog_search .stringPolje:focus{outline: none; border: 1px solid #ddd}
.catalog_search .searchDugme{display:inline-block; position: absolute; top:15px; right: 10px }
.catalog_search .searchDugme:after{content: "\f002"; font-size: 20px; color:var(--main);font-family: icons;
    display: inline-block; vertical-align: bottom; padding:6px 12px 0 0; transform:scale(-1,1)}


.flyOutMenu{
    width:20px;
    position:absolute;
    top:25px;right:60px;
    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;
}
/*MOBILE BANNER*/
.mobileBanner{
    display: none;
    position: fixed;
    top:0;left:0;
    z-index: 1000;
    border: 3px solid #555;
    background: rgba(255,255,255,.9);
    margin:0;padding:0;
    box-shadow: 0px 10px 20px rgba(0,0,0,.4)
}
.mobileBanner h3{
    padding:2px 10px 10px 2px;
    font-size:30px;
    display: block;
    text-align: right;
}
.mobileBanner .icons{
    color:#444;
}



/*HOME PAGE*/
.navigatorContainer{display: none!important;}


.oblast_sadrzaja{background: #efefef; 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,.index #coll_middle a,.index #coll_middle li{font-size:var(--fn);
    line-height:1.5em; }
#coll_middle{width: 100%;box-sizing: border-box; background:#efefef!important;}

.index .oblast_sadrzaja{padding: 10px; box-sizing: border-box}
.index .pageBody{background: initial}

.superCene >h2{font-size: 1.3rem; line-height: 1.6rem; font-family: vaillantBold; font-weight: normal; padding: 10px;
box-sizing: border-box}
.superCene .boxFlex{}
.superCene .boxFlex >div{background: #fff; margin-bottom: 20px}
.superCene .boxFlex >div .naslov {padding: 10px ;color: #ab1113; font-family: vaillantBold; font-weight: normal; font-size: 1.5rem;
line-height: 2rem;}
.superCene .boxFlex .kratakOpis{padding:10px;box-sizing: border-box}
.superCene .boxFlex .image{display: block;}
.superCene .boxFlex .image img{display: block; width: 100%; height: auto}


.homebox>div,.flexBoxChild{ margin-bottom: 20px; background: #fff; padding: 10px; box-sizing: border-box}
.firstFlex h4{font-size: 14px!important;}
.firstFlex h4 a{color: inherit; text-decoration: none}
.homebox .superCene{background: initial; padding: 0}
.firstFlex .flexBox{display: flex; flex-wrap: wrap; justify-content: space-between}
.firstFlex .flexBox div {width: 48%; margin-bottom: 10px; border:1px solid #ccc;
display:flex; justify-content:center; flex-wrap:wrap; }
.firstFlex .flexBox div a{width: 100%; display: block;padding:10px 0; box-sizing:border-box}
#coll_middle .firstFlex .flexBox div .icons{display: block; width: 80%; display: block; margin: auto; text-align: center;
color: var(--main)}
.firstFlex .flexBox div .naslov{text-align: center; width: 100%; display: block; padding-top: 10px; color: #c03}
.hover_tekst{display: none}
.homebox .secondFlex{background: initial;}
.pumaCondensBlok h2 a{padding: 10px 0; color: #c03; display:block}
.pumaCondensBlok .opis>a{background: var(--main); color: #fff; display: block; padding: 10px; box-sizing: border-box; margin-top: 10px}

.homebox>div h3,.homebox>div h4{color: var(--main); display: block;padding-bottom:10px; font-size: 16px}
.childImg{background: #fff}
.childImg img{display: block;width: 100%}
.childText h4 a{color: var(--main); font-size: 16px; padding: 10px 0 0; display: block}
.childText>a{background: var(--main); color: #fff; display: block; padding: 10px; box-sizing: border-box; margin-top: 10px}

/*PAGES*/

#pageTitle, .catTitle{font-size: 20px; font-weight: normal; padding: 10px; box-sizing: border-box}
.catTitle{padding-bottom: unset;}
.pageBody{background: #fff; padding: 10px; box-sizing: border-box}
.pageBody>p{padding: 5px 0}


/*PROIZVODI*/

.product{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; box-sizing: border-box}
.product li{ width: 48%; margin-bottom: 10px; list-style: none; border: 1px solid #ccc; background: #fff}
.product li .img{border-bottom: 1px solid #ccc}
.product li h2{font-weight: normal; font-size: 16px; padding: 10px; box-sizing: border-box; background: var(--main)}
.product li h2 a{color: #fff}


.prothermProizvodi{padding:10px; box-sizing:border-box}
.prothermProizvodi .slikaPuma{margin-bottom:10px}
.prothermProizvodi>div{background: #fff; padding: 10px; box-sizing: border-box; 
margin-bottom: 10px; line-height:1.3rem}
.prothermProizvodi>div h2{padding-bottom: 10px}
.prothermProizvodi>div li,.prothermProizvodi>div p{padding: 5px 0; }

/*SERVIS*/

.servis{}
.servis #pageBody{background: #fff; padding: 10px; box-sizing: border-box}
.servis #pageBody p{padding: 5px 0;}
.ovlasceniServis{overflow-x: auto}
.serviseri{border-collapse: collapse}
.serviseri th{background: var(--main); color: #fff; border-right: 1px solid #fff; font-size:14px; padding: 5px 10px;
 box-sizing: border-box; font-weight:normal}
.serviseri td{padding: 5px 10px; box-sizing: border-box; font-size: 12px}
.serviseri tbody tr:nth-child(2n+1){background:#eee; }

/*AKTUELNOSTI*/

.aktuelnosti_pages{padding: 10px; box-sizing: border-box}
.aktuelnosti_pages li{list-style: none; background: #fff; margin-bottom: 10px }
.aktuelnosti_pages li .img{border-bottom: 1px solid #ccc}
.aktuelnosti_pages li .img img{display: block}
.aktuelnosti_pages .info{padding: 10px; box-sizing: border-box}
.aktuelnosti_pages .info h2{font-weight: normal; font-size: 18px; padding-bottom: 10px}
.customRightMenu{padding: 10px ; box-sizing: border-box;}
.customRightMenu >div{background: #fff; margin-bottom: 10px;}
.customRightMenu >div .rightCollImg img{border-bottom: 1px solid #ccc; display: block;}
.customRightMenu >div h2{font-weight: normal; font-size: 18px; padding: 10px; padding-bottom: initial;}
.customRightMenu > div p{padding: 10px; box-sizing: border-box}




.aktuelnosti_page{background: #fff; padding: 10px; box-sizing: border-box}
.aktuelnosti_page p{padding: 5px 0}
.aktuelnosti_page li{padding: 5px 0; }
.aktuelnosti_page h2{ font-weight: normal; padding: 10px 0}
.aktuelnosti_page h4{ font-weight: normal; padding: 10px 0}

.timelineIstorijaPreduzeca{ display: flex; flex-wrap: wrap; position: relative; margin: 10px 0}
.timelineIstorijaPreduzeca img{display: block; z-index: 1}
.timelineIstorijaPreduzeca:after{content:""; display: inline-block;width: 2%; height: 100%; background: #c03;
position: absolute;left: 49%}
.timelineIstorijaPreduzeca>div{ display: flex; flex-wrap: wrap; width: 100%}
.timelineIstorijaPreduzeca .right{justify-content: end}
.timelineIstorijaPreduzeca .left{text-align: right}
.timelineIstorijaPreduzeca>div .content{width: 49%; padding: 10px; box-sizing: border-box}
.timelineIstorijaPreduzeca .content h2{color:#c03; padding-bottom: 5px }

/*CENOVIK*/
.moreInfoButton{display: none}

.relationProductsCnt{padding: 10px; box-sizing: border-box}
.relationProductsNavigator{display: none}
.relationProducts>li{list-style: none; margin-bottom: 40px; position:relative}
.cenovnik .mainProduct{position: relative}


.cenovnik .mainProductInfo .mainProductNaziv{
    display: block;
    font-size:20px;
    width:100%;
    line-height: 1.2em; padding:10px 0

}

.cenovnik .mainProductModel .mainProductModelCnt{
    color:#e55;
    font-size:20px;
    padding: 5px 0; display: block
}

.mainProductCodeCnt{display: block; padding: 10px 0}

.cenovnik .mainProductOpis ul li{
    margin:4px 0 0 1.3em;
    list-style-type: square;
}
.cenovnik .mainProductOpis h2{
    font-size:1em;
    padding:10px 0;

}
.cenovnik .mainProductPriceCnt{
    position: absolute;
    top:0px;left:0px;
    font-size:28px;
    color:#c55;
    font-weight:bold;


}
.cenovnik .mainProductPriceCnt sub{
    font-size:20px;
    text-transform: uppercase;
    padding:0 7px;
    text-align: right
}

.relProductGroup{list-style: none;overflow-x:scroll}
.mainProductOpis{padding: 10px 0; display: block}

.cenovnik .relProductGroup .nazivGrupe{
    border-bottom: 1px solid #a66;
    padding: 10px 0px;
    font-size:20px;
    margin:10px 0 10px 0
}

.cenovnik .relProductTable{
    width:100%;
    table-layout: auto;
    border-collapse: collapse;
}
.cenovnik .relProductTable th{
    padding: 10px 2px;

    border-bottom: 1px solid #a66;

}
.cenovnik .relProdRow td{
    padding: 5px 10px; box-sizing: border-box

}
.cenovnik .relProdRow:nth-child(2n+1) td{
    background: #eee;
}

.cenovnik .relProdRow td:nth-child(1){
    
}


.cenovnik .relProdRow td:nth-child(2){
   
    text-align: left;
}

.cenovnik .relProdRow td:nth-child(3)
{
   
        text-align: right;

}
.cenovnik  .relProductTable th:nth-child(3){
    text-align: right;
}

/*O NAMA*/
.o_nama .pages{padding: 10px; box-sizing: border-box}
.o_nama .pages li{list-style: none; background: #fff; margin-bottom: 10px }
.o_nama .pages .img{border-bottom: 1px solid #ccc}
.o_nama .pages li .img img{display: block}
.o_nama .pages .info{padding: 10px; box-sizing: border-box}
.o_nama .pages .info h2{font-weight: normal; font-size: 18px; padding-bottom: 10px}
.o_nama .page-pID .moreinfo a {background: #c03; display: flex; 
    text-decoration: none; border-radius: 4px; width: 40%; margin-top: 20px; height: 32px; 
    justify-content: center;align-items: center; left: 1.5rem}
.o_nama .page-pID .moreinfo a span{color: #fff;}

.oKompanijiProtherm p{margin-top: 10px}
.oKompanijiProtherm h4, .oKompanijiProtherm ul{margin-top: 10px}
.oKompanijiProtherm ul li{list-style: inside;}
.prothermSrbija h2{margin-top: 15px; font-weight: normal}
 
/*PRAVILA PRIVATNOSTI*/
.pravilaPrivatnosti h2{margin-bottom: 15px}
.pravilaPrivatnosti p{margin-bottom: 10px}
.pravneNapomene p{margin-top: 10px}

/*GDE KUPITI*/

.gde_kupiti .pageBody{background: #fff; padding: 10px; box-sizing: border-box}

/*KONTAKT*/
.kontakt-page p{padding: 5px 0; box-sizing: border-box}


/*FOOTER*/

.oblast_futera {background: #ccc; position: relative;padding:10px 10px 30px;
    box-sizing:border-box; font-size: 16px }
.footer_container ul{margin-bottom: 20px}
.footer_container .footer_navigation li{
	list-style: none;
	position: relative;
}
.footer_container .footer_navigation li:after{
	content: ">";
	position: absolute;
	top:14px;right:20px;
	color:#888;
	font-size:20px;
	pointer-events: none;
}
.footer_container .footer_navigation li a{ text-align: center; 
	padding: 12px 0;
	border:1px solid #999;
	margin:8px 0;
	display: block;

}
.footer_container .footer_navigation li:first-child a{
	border: none;
}
.footer_container .footer_navigation li:first-child:after{
	display: none;
}
.footer_links li{
	display: block;
	margin:6px 10px;
}
.footer_container .logoSlika{padding: 20px 0;margin: 40px 0; 	border-top: 1px solid #555;border-bottom: 1px solid #555;}
.footer_container .logoSlika img{
	filter:grayscale(1) invert(0) contrast(10) opacity(.6);

}
.afterBlok li {list-style: none;position:relative}
.afterBlok li:after{
	content: ">";
	position: absolute;
	top:11px;right:20px;
	color:#888;
	font-size:20px;
	pointer-events: none;
}
.afterBlok li a{
	display: block;
	padding: 10px;
	border:1px solid #999;
	margin:8px 0
}
.afterBlok .afterElem:last-child a:after{content: "\f08e"; font-family: icons; padding-left: 5px; box-sizing: border-box}