/* 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 {
    --darkpink: #ffe6e6;
    --pink: #f9d6d2;
    --lightpink: #f6eaec;
    --gold: #decda1;
    --darkgold: #d2b565;
    --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:#555;
}
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;}
.index .fixed-futer{display: none;}
#coll_middle .navigatorContainer{display: none!important;}
.catalog_search{display: none;}
.futerDrustveneMreze{display: none;}
.flexBox,.boxJedan{_display: none}
.termin-zakazivanje{display: none;}

/*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; 
    box-sizing:border-box; background: var(--)  }
.oblast_zaglavlja .wrapperTraka img{width: 100%; display: block; }
.oblast_zaglavlja .logoHome{width: 140px; margin: auto;position: absolute; left: -30px; top: 50px}
.oblast_zaglavlja .logoHome img{display: block;width: 100%;}
.oblast_zaglavlja .wrapperTraka .termini{display: flex; justify-content: center;font-size: 20px;}
.oblast_zaglavlja .wrapperTraka .termini a{text-align: center!important; padding-top: 15px;}
.oblast_zaglavlja .wrapperTraka .termini .timeImage{width: 30px; padding-left: 10px}
.oblast_zaglavlja .wrapperTraka .kontakt-broj {margin: 15px 0;display: flex;justify-content: center; font-size: 20px; padding-bottom: 10px; border-bottom: 10px solid var(--gold)}
.oblast_zaglavlja .wrapperTraka .kontakt-broj img{width: 30px}
.oblast_zaglavlja .wrapperTraka .futerDrustveneMreze ul{display: flex;}
.oblast_zaglavlja .wrapperTraka .futerDrustveneMreze ul li{width: 30px; }


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

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


/*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*/
.blok-flex{width: 90%; margin: auto}
.blok-flex .blok {width: 100%; margin-top: 20px; border: 1px solid var(--lightpink); }
.blok-flex .blok h2{text-align: center;background: var(--lightpink);text-transform: uppercase; }
.blok-flex .blok h2 a{color: var(--darkgold); display: block; padding: 10px; }
.blok-flex .blok .vise{display: block; padding: 10px; text-align: center; font-size: 17px; color: var(--darkgold)}

/*PAGES*/
.pageBody {width: 90%; margin: auto; font-size: 16px; line-height: 1.5em;}
.pageBody > div >div{margin-bottom: 30px; border-bottom: 10px solid var(--gold); padding-bottom: 20px}
.pageBody h3{color: var(--darkgold); margin: 10px 0 5px 0}
.pageBody ul li{list-style: inside; margin-top: 10px}
.pageBody img{margin-top: 10px}
.pageBody p{margin-top: 10px}

#pageTitle, .pageTitle {text-align: center; color: #777; font-weight: lighter;padding-bottom: 10px}
.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: 20px; color:var(--main)}
.kratak_opis_kategorije{padding: 10px; font-size: var(--fn); line-height: 1.6rem; border-top:1px solid var(--main)}
.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}
.page h2{padding: 10px 0; font-size: var(--fm)}

/*NAVIGACIJA*/

#coll_left{order: 2; margin-top:20px; background: #fff}
#coll_left li{list-style: none}
#coll_left h3 a,#coll_left li a{ display: block; padding: 15px; border-bottom: 1px solid #ddd;
    font-size: 16px; box-sizing: border-box}
#coll_left h3 a{background: var(--pg); color: #fff;font-size: var(--fm);}
.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 .bocniMeniStrane li ul li a:before{content: url('../../../cms_upload/pages/files/112_sapa2.png');
    display: inline-block; padding-right: 5px}
#coll_left .markerPodStrane a{color:var(--main) }



#myaccount_style {margin:0 auto;padding: 10px 6px 60px 6px;background: #fff;
    border:1px solid #ddd;border-radius:3px;box-sizing: border-box; width: 100%}
#myaccount_style .contentTABLE{width:100%;display: block; }
#myaccount_style .contentTABLE>tbody{display: block}
#myaccount_style .contentTABLE>tbody>tr{ display:flex;  flex-direction: column;}
#myaccount_style .contentArea{ width: 100%; box-sizing:border-box;}
#myaccount_style .imate_nalog_dugme a{background: var(--pg); color: #fff; display: block;
    text-align: center;padding: 10px; box-sizing: border-box}

#myaccount_style .menuArea { width: 100%; }
#myaccount_style .menuArea li{margin:4px auto;text-align: center; list-style: none}
#myaccount_style .menuArea li a{padding:12px 14px; display: block; width:88%;margin: auto; border:1px solid #006837;box-sizing: border-box }

#myaccount_style h1{ padding: 10px 0 ;text-align: center;}

#myaccount_style h3{ padding: 10px 0;text-align: center;}
#myaccount_style label{display: block;margin: 15px 0 10px 0;}

#myaccount_style a{color: #006837;}
#myaccount_style .registracijaCnt{ display: flex; flex-direction: column}
#myaccount_style .registracijaCnt>div{border:1px solid var(--main); margin-bottom: 20px;
    padding: 10px; box-sizing: border-box}

#myaccount_style input{text-align: center;padding: 10px;}
#myaccount_style #potvrda{transform: scale(2.6); margin:20px}
.app_field_unos{display:block;margin:0 auto 4px auto;}
.forgot_pass{text-align: center}
.forgot_pass_btn{background:#006837;border:none;color:#fff;width:130px; margin: auto}
#myaccount_style #ulogujte_se{text-align: center;order: 2}
#myaccount_style #ulogujte_se input{width: 80%;}
#myaccount_style #ulogujte_se p a{display: block; padding-bottom: 10px; font-size: 16px}
#myaccount_style #ulogujte_se h3{font-size: 24px}
#myaccount_style #registrujte_se{text-align: center;order: 1
}
#myaccount_style #registrujte_se input{width: 80%;margin-bottom:4px; font-size:14px}
#myaccount_style #registrujte_se .inline_radio br{display: none}

#myaccount_style #mail_list{width: 10% !important;}

#myaccount_style ul{margin: 0 !important;text-align: left;width: 100%; padding-top:10px;box-sizing:border-box;}

#myaccount_style #dugme_login{background:#006837 ;color: #fff; letter-spacing: 1px; ;font-size:20px;border: none;border-radius: 3px;margin:22px 0;padding:16px;box-sizing: border-box;}

#myaccount_style h4{text-align: center;font-size: 21px;}

#myaccount_style .buttonUkljuciNapomenu{color: #fff;background: #006837;padding: 10px;width: 50%;margin: 20px auto 0 auto;text-align: center;border-radius:3px;}
#myaccount_style .buttonNapomena{color: #fff;background: #006837;padding: 10px !important;;width: 50%;margin: 10px auto;text-align: center;border-radius:3px;}
#myaccount_style .naruciListu{color: #fff;background: #006837;padding: 10px;width: 100%;
    margin:10px auto;text-align: center; box-sizing: border-box}
#myaccount_style .naruciListu a{color:#fff;}
#myaccount_style textarea{width:85%;margin:auto;display: block;}


.registrator #myaccount_style .buttonsDisabled a{background: #ccc; pointer-events: none}
#myaccount_style .buttonsForCheckout a{ display:block;margin-top: 10px;
    padding: 10px 0; background:var(--pg); border:1px solid #fff}

#myaccount_style .kartice-banka{display: flex; flex-wrap: wrap;
    justify-content: space-evenly; margin:10px 0}
#myaccount_style .kartice-banka span{display: block;width: 20%;margin: 10px; border:1px solid #ddd;
    border-radius:6px; padding:5px; box-sizing:border-box}
#myaccount_style .kartice-banka img{display: block;width: 100%}
.paymentDetails h2{font-size: 18px}
.paymentDetails span{display: block; padding:3px 0}

/**********moj_nalog**********/
.myAcc_container{width:70%;margin-left: 15%;font-size: 16px}
.myAcc_container p{text-align: left;padding:0 0 0 22px;line-height: 2;}
.myAcc_container input{background: var(--pg); color: #fff; border: none; font-size: 16px;
    margin: auto; display: block; width:max-content;}
.contentTABLE p img{width:20px;height:auto;vertical-align: bottom;}

.myAcc_container label{text-align: center}
.myAcc_container #f_adresa,.myAcc_container #f_company,.myAcc_container #f_name,
.myAcc_container #f_telefon,.myAcc_container #f_oldpass,.myAcc_container #f_pass1,
.myAcc_container #f_pass2{background: #fff; border:1px solid #ddd; color:#333}
.myAcc_container .passEdit,.myAcc_container .passReset{margin-bottom: 10px; width: 150px}

#myaccount_style #wishlist_buttons{display: flex; justify-content:space-between;
    flex-wrap:wrap; display:none}
#myaccount_style #wishlist_buttons a{display: block;  width: 30%; background: var(--pg);
    margin-bottom: 10px; font-size:16px; }
#myaccount_style #wishlist_buttons a img{display: block; width: 30px; margin: auto;
    filter: invert(1)}
#myaccount_style #wishlist_buttons a span{ padding:10px 0 5px;color: #fff;
    display: block; text-align:center; }


#myaccount_style .contentArea .wpwl-container iframe{color: #333!important;}

/*****message_note************/
#myaccount_style .messages_NOTE {width:340px;box-sizing: border-box;padding:0 2%;text-align:left;}
#myaccount_style .messages_NOTE br{opacity:0;}
#myaccount_style .messages_NOTE h4{font-size:18px;padding-bottom:12px;color:#555;}
#myaccount_style .messages_NOTE p{text-align:left;}

/* PROFAKTURA */
.documentOuter{}
.documentTable{width: 100%; }
.documentTable tbody{ width: 100%}
.documentLOGO{
    width:100px;
}
.documentLOGO img{
    display:block;
    width:100px
}
.documentKLIJENTinner{
    border-top:1px solid var(--pg);
}
#myaccount_style .docCompanyUL{
    text-align:left;
    font-size:var(--fs);
    list-style:none;
    padding-left: 10px

}

.docCompanyUL .imeFirme{
    font-weight:bold;
    font-size:var(--fn);

}
.docCompanyUL .punoImeFirme{
    font-size:var(--fxs);
    padding-bottom:6px;
    word-break: break-all

}
.docKlijentUL{

    list-style:none;
    text-align:left;
    font-size:var(--fs)
}
.docCompanyName{
    font-size:var(--fl);

}
.docCompanyName a{
    text-decoration:none;
}
.documentINFOdoc{

    text-align: right; padding-left: 10px
}

.documentINFOdoc li{
    list-style: none;
    font-size:var(--fs);

}
.documentINFOdoc .nazivDokumenta{
    font-size:var(--fs);
    font-weight:bold;
}
.fakturaElementi {
    border-collapse:collapse; font-size: 12px;
}
.fakturaElementi th{
    _font-size:var(--fs);
    font-weight:bold;
    border-bottom:1px solid var(--pg);
    padding:10px 0;
}
.fakturaElementi td{
    border-bottom:1px solid #ccc;
    font-size:var(--fs);
    padding:10px 0;
}
.summaryReport{
    text-align: right;
    font-weight: bold;
    padding:20px 0;
}
.a4,.a7,.a8,.a9,.hh6,.hh9,.hh10,.hh11{
    text-align: right;
}

.documentOuter h2{
    color:var(--pg);
    padding:20px 0 20px 0;
    border-bottom:1px solid var(--pg);
    margin-bottom: 20px

}
.profaktureButtons{
    border-top:1px solid var(--pg)
}
.profaktureButtons div,
.profaktureButtons a{
    display: inline-block;
    margin:20px
}



/*FOOTER*/

.oblast_futera {
    margin-top: 30px;
    width:100%;
    padding: 50px 0 20px; box-sizing: border-box;
     background: rgb(222,205,161);
background: linear-gradient(90deg, 
    rgba(222,205,161,1) 0%, 
    rgba(223,207,165,1) 0%, rgba(226,210,173,1) 0%, rgba(231,216,189,1) 0%, rgba(236,223,206,1) 0%, rgba(243,230,226,1) 39%, 
    rgba(246,234,236,1) 52%, rgba(249,240,242,1) 60%, rgba(251,246,247,1) 67%, rgba(252,248,249,1) 76%, rgba(255,255,255,1) 91%, 
    rgba(253,251,251,1) 100%); 

}
.oblast_futera{font-size: 16px}
.oblast_futera .drustvene-mreze{display: flex; width: 100%; justify-content: center;  }
.oblast_futera .drustvene-mreze ul{display: flex;list-style: none; margin-top: 30px}
.oblast_futera .drustvene-mreze li{width: 45px; padding: 3px }
.oblast_futera .drustvene-mreze li img{width: 100%; display: block}
.oblast_futera .futer-stranica{position: relative;; height: auto; padding: 30px 30px 0px 30px;}
.oblast_futera .futer-stranica .logo-slika{position: absolute; right: 20px;top: -40px; transform: rotate(10deg)}
.oblast_futera .futer-stranica .logo-slika img{width: 200px}
.oblast_futera .futer-stranica .flex-blok{width: 100%; margin: auto}
.oblast_futera .futer-stranica .flex-blok div{ width: 100%; margin: auto; text-align: center}
.oblast_futera .futer-stranica .flex-blok div h2{margin: 20px 0 10px 0; text-transform: uppercase; color: #777}
.oblast_futera .futer-stranica a{color: #888; text-decoration: none; display: block; margin-bottom: 8px}
.oblast_futera .futer-stranica p{color: #888;margin-bottom: 8px }