/** Author: NetCom 2019 Owner: Kvantum-tim tamnija: #095088 bjelija #226294; glavna boja: #0C5088 bjelija: 2982a9 orange: #ff8c1a **/ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size:14px; min-width: 100vw; max-width: 100vw; min-height: 100vh; padding: 0; border: 0; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } html,body{ overflow-x: hidden; color: black; font-family: 'Roboto', sans-serif, Arial; font-weight: 400; margin: 0; background: #fff } body { width: 100vw; max-width: 100vw; color: #093244 } input[type="search"]{border:1px solid #ccc} .wrapper { width: 100% !important; display: block; padding: 0 !important; /* margin: 1vh auto !important; */ overflow-x: hidden !important;} .form input,.form textarea,.form select{ margin-bottom:15px } .form h2.legend{ font-size:1.3em; margin-top:0; color:#0C5088; font-weight:400; border-bottom:solid 1px #eee } a{color:#0C5088} a:hover{ text-decoration:none } a:active,a:focus{ text-decoration:none } .fa-rev{ -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .no-padding{padding:0 !important} .text-right{text-align:right} .green{color:green} .clear{clear:both;} .small{font-size:.85em} .flex{ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .flex-grow{ flex-grow:1 } .flex-middle{ align-items: center; } .rounded{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow:hidden; } .rounded2{ -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; overflow:hidden; } .btn.btn-sm{ padding: .1rem .55rem !important; font-size: .9em; } /* effects */ .fadein, .fadeout,.nav-container { opacity: 0; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; display:none } .fadein { opacity: 1; display:block } .slideup, .slidedown,.nav-container { max-height: 0; overflow-y: hidden; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .slidedown { max-height: 100%; display:block; } /*page width*/ .page,.header{ max-width:1200px; margin:auto; padding-left:15px; } .page{ padding:0 15px; background:#fff; } .col2-left-layout .main{padding-left:10px} .header-container{ color:#fff; position:fixed; z-index: 1000; top:0; left:0; width:100%; overflow:visible; height:40px; -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.23); -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.23); box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.23); } .header-container,.header-spacer{ background:#095088; height:40px } .header-container { height: 50px; } .header{ margin:auto } .header .m-m{ display: block;padding: 10px; margin-left:-15px; margin-right:7px } .header .quick-access .header-contact1 { font-size: 12px; flex-wrap: wrap; max-width: 350px; min-width: 350px; margin-right: 10px; } .header .quick-access .header-contact1>div { font-size: 12px; color: #fff; line-height: 20px; text-align: right; } .header .quick-access .header-contact1>div >a{color:#fff;margin-left:10px} .header .quick-access .header-contact { font-size: 12px; flex-wrap: wrap; max-width: 150px; margin-right: 10px; } .header .quick-access .header-contact .email, .header .quick-access .header-contact .phone { flex: 1 100%; font-size: 12px; max-width: 150px; color: #fff; line-height: 20px; text-align: left; } .header .quick-access .header-contact .email a, .header .quick-access .header-contact .phone a { color: #fff; } .header .quick-access{ justify-content:flex-end; height:50px; align-items: center; } .header .quick-access>div{ min-width:40px; text-align:center; line-height:40px } .header .quick-access>div>a{ color:#fff; font-size:1.2rem; font-weight:700; line-height:40px; display:block; padding:0 8px } .header .quick-access>div>a:hover{ background-color:#226294 } .header .quick-access .dropdown-toggle>span{ margin-left:5px; border: solid 1px #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 10px; height: 10px; overflow: hidden; display: inline-block; font-size: 9px; padding: 0; line-height: 8px; text-align:center; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform:rotate(0deg) } .header .quick-access .dropdown-toggle>span#cart-total{ visibility:hidden; opacity:0; } .header .quick-access .dropdown-toggle>span#cart-total.hascartitems{ opacity:1; visibility:visible; background:#ff8c1a; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0px none; line-height: 16px; position:absolute; top:3px; right:3px } .header .logo-small{ height:36px; margin-top:7px; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; transition: opacity 1s ease-out; } .header .logo-small.padding-left { padding-left: 34px; } /* mobile search form */ .msf{ background:#fff } body.msearch .msf{ display:block !important; position:fixed; width:100%; border-bottom:solid 2px #ccc; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; z-index: 999; } body.msearch .msf .btn{ background:#fff; color:#095088; border:none; } body.msearch .msf .input-text,body.msearch .header-container{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* subheader */ .subheader{ overflow-x:hidden; min-height:81px; padding-bottom:30px; padding-top:10px; } .subheader-logo{ width:210px; margin-right:90px; text-align: justify; text-justify: inter-word; font-size:1.2rem; font-weight:700; color:#0C5088 } .subheader .bdostava{ margin-left:15px } .bd{ min-height:40px; font-size:1.1em; min-width:220px; line-height:1.1em;margin-right:10px } .bd-c{display:block} .bd-t{font-weight:700;text-transform:uppercase} .bd-d{letter-spacing:-.5px} .bd>i{font-size:2rem;color:#1962af;margin-right:7px} .oservis .bd-t{text-transform:initial;} .oservis .bd-d{text-transform:uppercase;font-weight:700;} .subheader #search_mini_form{ width:100%; border:solid 1px #ccc; overflow:hidden } .subheader #search_mini_form .input-text{ padding:0 10px } .bar,a.bar{ background:#0C5088; padding:5px 10px; color:#fff; font-weight: 700; font-size: 1.2em; text-shadow: 1px 1px 1px rgba(26, 64, 86, 1); } /* subheader menus */ a.kvm-tm-header{ display:block; text-transform:uppercase; font-weight:700; font-size:1.2em } /* kvamenu */ .kvamenu{margin-bottom: 13px} /* /kvamenu */ /* spacing */ .kva-col-center,.kvm-rm-i{ /* todo remove this mobile */ margin-left:10px } /* kva nav buttons */ .kvm-rm-i{ justify-content:space-evenly; text-align:center; } .kvm-rm-i>a{ text-transform:uppercase; color:#fff; border-right:solid 1px #368ab1; padding:0 10px; flex-grow:1; display:inline-block; } .kvm-rm-i>a:last-child{ border-right:0 } .kvm-rm-i>a:hover,.kvm-rm-i>a:hover>i{color:#ff8c1a} .main-container{ padding:0; } .footer-container{ } .footer1{ background:#0C5088; color:#fff; padding:20px 0; margin-top:15px; } .footer1 h5,.footer1 .an-subscribe .block-title{ font-size:1.2em; margin-top:0; margin-bottom:10px; font-weight:400; color:#fff } .footer1 ul{list-style-type: none;padding:0} .footer1 a{ color:#fff } .footer1 a:hover{text-decoration:underline} .footer1 #email_an{ color:#000; border:none; height:24px; padding:5px; width:100% } .footer1 .an-subscribe .button{ border:none; color:#0C5088; height:24px; font-weight:500 } .footer1 .social a{ display:block; font-size:1.1em; font-weight:400 } .footer1 .social a>i{ width:20px } .footer2{padding:20px} .footer2 a{ min-height:60px; background-size:contain; background-repeat:no-repeat; background-position:top center; display:block; } .footer2 a:hover{ opacity:.8 } .footer3{ padding:20px 0; border-top:solid 2px #eee } .footer3 .bank{ background:url('../images/bank.png'); background-size:contain; background-repeat:no-repeat; background-position:top right; height:30px } .footer3 .credits{ padding-top:5px; color:gray } @media (max-width: 991px) { .footer3 .bank{ background-position:top center; } .footer3 .credits{ text-align:center } } /* dropdown minicart */ .minicart{ width:320px; color:black; font-size:.9rem } .minicart .summary{ text-align:center; } .minicart .amount{ font-size:.8rem; line-height:2rem; color:gray; text-align:center; padding-bottom:4px } .minicart .summary .subtotal{ background:#eee; font-weight:700; font-size:1.1em } .minicart .actions{ text-align:center; padding:0 10px } .minicart .actions .btn{ width:100%; } .minicart .mini-products-list{ overflow-y:auto; max-height:300px; border-top:solid 1px #eee } .minicart .mini-products-list .item{ border-bottom:solid 1px #eee; padding-top:5px } .minicart .product-details{ padding:5px 15px; line-height:1rem } .minicart .product-name,.minicart .product-name a,.minicart .btn-remove, .minicart .item-options{ line-height:1.1rem; } .minicart .product-name a{ color:#000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 210px; display:block } .minicart .btn-remove{ float:right; } .minicart .item-options>span{color:gray} .minicart p.empty{text-align:center} /* product block view */ .product-block{ margin-top:7px; margin-bottom:7px; font-size:13px; padding:10px; } .product-block .img{ width:100%; height:auto; min-height:157px; text-indent: 200%; color:transparent; white-space: nowrap; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display:block } .product-block .img:before{ content:""; position: absolute; top: 0; left: 0; background-repeat: no-repeat; height: 100%; width:100%; display: block; background-position: center; background-image:url('data:image/gif;base64,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') } .product-block a.product-image{ display:block; position:relative; padding:0 20px } .product-block a.product-image>.hover-image{ width:100%; height:auto; min-height:157px; opacity:0; pointer-events:none; position:absolute; top:0; left:0; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; padding:0 20px } .product-block:hover a.product-image>.hover-image{ opacity:1; background:#fff; } .product-block .name{ min-height:50px; margin:5px 0 } .product-block .name>a{ font-weight:400; color:#333 } .product-block:hover a{ color:#226294 } .product-block:hover{ -webkit-box-shadow: 0px 0px 5px 0px rgba(186,186,186,1); -moz-box-shadow: 0px 0px 5px 0px rgba(186,186,186,1); box-shadow: 0px 0px 5px 0px rgba(186,186,186,1); } /* product elements */ .price-box>span{display:block} .price-box .ncx-postotak{ font-weight:700; color:#0C5088 } .price-box .old-price>span,.price-box .ncx-oldprice,.nc-shcart-item--oldprice>span{ text-decoration:line-through; color:gray; font-weight:400; } .amscheckout .itemtotal .cart-price .old-price>.price{ color:gray; font-weight:400; text-decoration:line-through; font-size:.8em } .price-box .old-price>span.postotak{text-decoration:inherit;font-weight: 700;color: #FF3131;font-size: 1.2em} .price-box .old-price>span.postotak:nth-child(3){display:none} .price-box .ncx-oldprice,.price-box .ncx-postotak{font-size:.7em} .price-box .ncx-postotak{padding-left:7px} .price-box .special-price,.price-box .regular-price{ font-weight:700; font-size:1.4em } .box-collateral .price-box .special-price,.box-collateral .price-box .regular-price{ font-size:1.2em; line-height: 1.4em } .price-box .regular-price.sm{ font-size:1.23em; } .product-block .is-new{ font-weight:500; background:green; color:white; font-size:.8em; padding:0 3px } .btn-cart{ padding:2px 6px; font-weight:500; text-transform:uppercase } .btn-cart>i{ width:20px; } .btn-cart>i.fa-arrow-down,.btn-cart:hover:not(:disabled)>i.fa-shopping-cart{ visibility:hidden; width:0; } .btn-cart:hover>i.fa-arrow-down{ visibility:visible; width:20px; translate: 8px; } .starrating-count{ margin-right:5px } .starrating-box{ /*width:86px; height:16px;*/ color:#0C5088 } .product-block-summary{ font-size:.95em } /* product link block */ .product-link-block{ max-width:300px } /* breadchrumb */ .breadcrumbs{ background:#eee; margin-bottom:15px } .breadcrumbs ul{ margin:0; padding:3px 7px; list-style-type: none; } .breadcrumbs li{ display:inline-block } .breadcrumbs li>i{ color:#909090 } /* slider */ .ncxslider>div,.slider>div{display:none} .ncxslider>div:first-child,.ncxslider>div.slick-list,.slider>div:first-child,.slider>div.slick-list{display:block} .ncxslider img{width:100%;height:auto} /* slider carousel products */ .ncxslider-carousel{ margin-left:-10px; margin-right:-10px; border-top:solid 1px #ccc } .ncxslider-categories{ border-top:none } .ncxslider-carousel .slick-dots{ bottom: -19px; } .ncxslider .product-block{ padding:15px; font-size:14px; } .ncxslider .product-block:hover{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ncxslider-carousel .img{ /*height:268px; text-indent: 200%; white-space: nowrap; overflow: hidden; padding:20px; margin-bottom: -20px; margin-top: -30px;*/ } .slick-track {min-width: 100%} /* blocks */ .block{ } .block-title{ color:#000 } /* toolbar */ .toolbar{ border:solid 1px #eee; overflow:visible } .toolbar .countsort-sort{ text-align:right } .toolbar .countsort-count{ color:gray } .toolbar>nav{ text-align:center } /* product list */ .category-products>div{ border-bottom:solid 1px #eee } .category-products .toolbar-bottom{ width:100%; border:none } .category-products .toolbar-bottom .toolbar{ border:none } .toolbar-top nav{ display:none } .toolbar-bottom .countsort{display:none} /* product view */ .product-view{ margin-top:15px } .product-view-d{ padding:0 15px } .product-view-d>hr{ margin:5px 0 } .product-view h1.product-name,.product-view div.product-name{ margin:0; padding-bottom:7px; margin-bottom:7px; font-weight:400; font-size:1.9em; line-height:1.1em; border-bottom:solid 1px #eee } .product-view .slider-nav{ margin-top:8px; margin-left:10px; margin-right:10px; position:relative } .product-view .slider-for .slick-slide>div{ position:absolute; bottom:0; left:0; width:100%; text-align:center; font-size:.9em } .product-view .slider-for .slick-slide>div>div{ margin:10px; padding:3px; background:rgba(255,255,255,.75); border:solid 1px rgba(0,0,0,.2) } .product-view .slider-nav::before{ -webkit-mask: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%); background:#fff; content:""; display:block; position:absolute; left:0; top:0; height:82px; width:40px; z-index:1; pointer-events:none } .product-view .slider-nav::after{ -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 100%); background:#fff; content:""; display:block; position:absolute; right:-2px; top:0; height:82px; width:40px; z-index:1; pointer-events:none } .product-view .slider-nav .slick-next{ right:-20px; z-index:3 } .product-view .slider-nav .slick-next::before{ content:"\f105" } .product-view .slider-nav .slick-prev{ left:-20px; z-index:3 } .product-view .slider-nav .slick-prev::before{ content:"\f104" } .product-view .slider-nav .slick-slide .iwrap{ margin:0 4px; } .product-view .slider-nav .slick-slide img{ border:solid 1px #eee; max-height:80px; max-width:80px; margin:auto; } .product-view .slider-nav .slick-current img{ border-color:#0C5088 } .product-view .starrating{ margin-top:3px } .product-view-full .starrating,.product-view-full .numreviews { margin-top:8px } .product-block-summary .starrating{ margin-top:0; min-width:100px } .product-view .starrating-count{ min-width:20px; background:#0C5088; text-align:center; display:inline-block; color:#fff; line-height:20px; font-size:13px; padding:0 3px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .product-block-summary .starrating-count{display:none} .product-block-summary .stock{color:gray} .product-view .is-freeshipping>i{ color:#0C5088; font-size:.9em; } .product-view .availability{ text-align:right } .product-view .availability-only{ color:gray; font-style: italic; } .product-view .price{ min-height:50px } .product-view .product-view-d .btn-cart{ padding:.375rem .75rem } .product-view .availability>p{ margin:0; } .product-view .in-stock>i{ color:#0C5088 } .product-view .link-wishlist{ font-size:1.1em; border-color:#747474; color:#747474; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; margin-left:15px } .product-view .link-wishlist:hover{ color:#0C5088; border-color:#0C5088; } .product-view .product-attribute-specs{ width:100%; margin-top:10px; margin-bottom:0; } .product-view .box-collateral>h2,.product-view .box-collateral>.showmore-c>h2, .wy h2{ background:#0C5088; padding: 5px 10px; color: #fff !important; font-size: 1.2em; font-weight: 700; text-shadow: 1px 1px 1px rgba(26, 64, 86, 1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; } .product-view .box-collateral img{ max-width:100%; height:auto !important; } .product-view .availability-only-details { border:solid 1px #eee; font-size:.9em } .product-view .product-options .form-control{ width:inherit } /* review */ .review{ margin-bottom:25px; border:solid 1px #eee; background:#f3f3f3; padding:5px; } .review-author{ font-weight:500; color: #365899; } .review-content{ font-size:.95em; } .review .starrating-box{ display:inline-block; color:#ffaa01 } /* addreview form */ .addreview{ border:solid 1px #909793; margin-top:15px; } .addreview input,.addreview textarea,.addreview .br-wrapper{ margin-bottom:15px } .addreview textarea{ resize: vertical; } .addreview input[disabled],.addreview textarea[disabled]{ background:#f9f9f9 } .addreview-body{padding:15px;background:#f3f3f3;} .addreview-icon{padding-right:10px} .addreview-for{font-weight:400;font-size:1rem;opacity:.75} .addreview .br-wrapper>i{ font-size:2em; color:#ccc; cursor: not-allowed; margin-right:10px } /*product options */ .product-options dl{ margin-top:0; border-bottom:solid 1px #eee; padding-bottom:15px } .product-options dd{ margin-left: 0 } /* category boxes */ .catbox-item{ margin:10px; padding-bottom:5px; text-align:center; font-size:1.1em } .catbox-item a{ color:#000; } .catbox-item a>span{ display:block; height:200px; background-size:contain; background-repeat:no-repeat; background-position:center; border:solid 1px #d7d7d7; margin-bottom:7px; } .catbox-item a:hover>span{ border:solid 1px #bab8b8; -webkit-box-shadow: 0px 0px 2px 2px rgba(215,215,215,1); -moz-box-shadow: 0px 0px 2px 2px rgba(215,215,215,1); box-shadow: 0px 0px 2px 2px rgba(215,215,215,1); } /* sidebar */ .sidebar .block-title{ border-bottom:solid 1px #ccc; color:#000 } .sidebar .block-title>h3{ margin:0; display:inline-block; border-bottom:solid 3px orange; margin-bottom:-1px; padding-bottom:4px } .sidebar .ncxslider-carousel .slick-dots{ display:none !important } .sidebar .ncxslider-carousel.slick-dotted.slick-slider{ margin-bottom:0 } .sidebar .ncxslider-carousel{ border:none } /* bottom ribbon */ /* - make room for ribbon when scrolled down */ body.catalog-product-view{ margin-bottom:50px; } .cartinfo-ribbon{ font-size: 1rem; font-weight: 500; position: fixed; z-index: 9; bottom: 0; width: 100%; height: 50px; padding-top: 2px; color: #FFFFFF; background-color: rgb(9, 80, 136); right: 0; } .cartinfo-ribbon .btn{ width:100%; height:38px; line-height:26px; font-weight:600; text-transform:uppercase; background:#63D151; border-color:#63D151; margin-top: 4px } .cartinfo-ribbon .btn:hover,.cartinfo-ribbon .btn:focus{ color:#fff; background-color: #218838; border-color: #1e7e34; } .cartinfo-ribbon .name{ font-weight:400; font-size:1.2em; line-height:46px; } .cartinfo-ribbon .shipping{ font-weight:400; line-height:46px; } .cartinfo-ribbon .shipping>i { color:#63D151 } /* show more */ .showmore-c{ max-height: 80vh; overflow: hidden; position: relative; } .showmore-c.showmore-expanded{ max-height:inherit } .showmore-after{ visibility:hidden; bottom: 0px; height: 40px; position: absolute; left: 0; right: 0; pointer-events: none; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } .showmore-after>a:hover{ border-color:#0C5088; color:#fff } .showmore-c.showmore-expanded>.showmore-after{ visibility:hidden; pointer-events:none; } .showmore-c > .showmore-after{ visibility:visible; } .showmore-after>a{ display: block; max-width: 100px; text-align: center; text-decoration: none; font-size: .9em; margin: auto; margin-top: 14px; padding: 5px 0; color: white; background-color: #0c5088; pointer-events: initial; line-height: 1em; } /* messages bar */ ul.messages,ul.messages ul{ padding:0; list-style-type: none; } li.success-msg,li.error-msg{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } li.success-msg a,li.error-msg a{ text-decoration:underline;color:#fff } li.success-msg{ background:#009933;color:#fff;font-weight:600;padding:10px; } li.error-msg{ background:#e43730;color:#fff;font-weight:600;padding:10px; } /*note bar*/ .note{ max-width:400px; background: #fce1ba; color: #7b4e0e; margin-bottom:15px } .note>div{padding:5px 15px} .note-1{ font-size:40px; background:#f59c1a; color:#fbeedb } .note-2{font-size:.95em} .note-green{ background: #ddefc9; color:#486626 } .note-green .note-1{ background: #ddefc9; color:#486626; border-right:solid 1px #b6d792 } /* modals */ #modal-addtocart-content{ width:400px } #modal_addtocart_title_adding{color:gray} #modal_addtocart_title_added{display:none} #modal-addtocart .modal__title{ color:#218838 } #modal-addtocart section{ font-size:1.1em } #modal-addtocart .modal__header{ min-width:auto } /* form valuidation */ .validation-advice{ margin-top:-15px; color:red; font-size:.9em; margin-bottom:5px } .validation-advice::before{ content: "\f0de"; margin-right:3px; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-family:"Font Awesome 5 Free"; font-size: inherit; font-weight: 900; } /* account pages */ .form-box{ border:solid 2px orange } .form-box-green{ border-color: #28a745 } .form-box-gray{ border-color: #eee } .form-box>h2{ margin:0; padding:5px 10px; background:orange; color:#fff; font-size:1.2rem } .form-box-green>h2{ background:#28a745; } .form-box-gray>h2{ background:#eee; color:#6b6b6b } .form-box form{ padding:10px } /* popout notifications */ #cookiealert{ box-sizing: border-box; position: fixed; bottom: 32px; left: 50%; width: 600px; margin-left: -300px; padding: 8px; z-index: 9999; background: white; box-shadow: 0px 0px 9px 1px rgba(20, 40, 80, 0.2); border-radius: 5px; font-size: 1em; line-height: 1.5; color: #456; transform: translate3d(0, 0, 0); transition: bottom 0.3s ease, top 0.3s ease, width 0.3s ease; } #cookiealert .ca-t{ padding-right:8px } #cookiealert .ca-pp, #cookiealert .ca-acpt{ font-weight:400; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; align-items: center; width:160px; border-left:solid 1px #eee; text-align:center; font-size:1.1em; line-height:1.1em; padding:0 5px } #cookiealert .ca-pp a{color:#5cb85c} /* wysiwyg sadrzaj */ .std iframe{ border:none; margin:5px; max-width:100% !important } .std table{width:100%} .std td{padding:3px 5px} .std h1{color:#0C5088} .std h1:after{content:" *";opacity:.5} .std div.wrapper { display: flex; flex-wrap: wrap; align-content: space-around; overflow: hidden; justify-content: space-around; margin: 30px 0px 30px; text-align: justify } .std.box-specifikacija table tr:nth-child(2n), .std table.zebra tr:nth-child(2n){background:#eee} /* Search layered navigation filter *******************************************************************/ .menuvisible .block-layered-nav{display:none} .block-layered-nav h4{ margin:5px 0 } .block-layered-nav-list a{ display:block; text-align:left; position:relative; margin-bottom:3px } .block-layered-nav-list a>span{ position:absolute; right:6px; text-align:right; color:gray; top:2px; width:19px; display:block; } .block-layered-nav-list a.btn-primary>span{ color:#fff } /* news */ /* News Block *******************************************************************/ .news-block.block .block-content { padding: 8px; } .news-block.block .block-content p{ display: inline;} .read-more{display: inline; margin-left: 4px;} .news-block.block h5{ display: inline;} .news-block.block .publish-date { display: inline;} .news-block.block .social-links{ border-left: 1px solid #ccc; display: inline; margin-left: 10px; padding-left: 10px;} .news-block{ min-height:300px; padding-left:18px; padding-right:18px; min-height:350px; } .news-block--image{ width:100%; height:150px; background-size:100%; background-position:top center; background-repeat:no-repeat; display:block; position:relative; background-color:#fff } .news-block--image>span{ background:rgba(0,0,0,.5); position:absolute; top:0; right:0; color:white; font-weight:700; padding:0 4px } /* .news-block--title{ font-weight:700; font-size:1.4em; margin:10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */ .news-block--title{ font-weight:700; font-size:1.3em; line-height:1.2em; margin:10px 0; } .news-block .content{ overflow:hidden; height:94px; } /* Related title *******************************************************************/ .news-related-title h3{ font-weight: normal; padding-bottom: 5px; padding-top: 5px;} /* message *******************************************************************/ .notice-msg{ margin-bottom: 1em;} /* right and left panel block *******************************************************************/ .block-news .news-list{ padding: 3px 9px;} .block-poll .news-list label{font-weight: normal;} .block-poll .news-list .active label{font-weight: bold;} .kva_newscontainer{ position:relative; overflow:visible; padding-top:10px; } .kva_newscontainer .kva-news{ margin:10px; vertical-align:top; } .kva_newscontainer .kva-news .kva-news--img{ width:100%; height:150px; overflow:hidden; background-color:#fff; background-size: 100% auto; background-repeat: no-repeat; /*background-position: 60% 60%;*/ background-position:top center; display:block; } .kva_newscontainer .kva-news a:hover.kva-news--img{ opacity:.8 } .kva_newscontainer .kva-news h4{ text-align:left; font-weight:500; font-family:'Roboto',Arial,Helvetica; font-size:16px; line-height:18px; margin:10px 0; } .kva_newscontainer .kva-news--intro{ line-height:16px; max-height:99px; padding-top:3px; overflow:hidden; margin-bottom:10px; color:#363e45 } /** Shown on scroll*/ .header-container .hidden-scrolled.center-elements, .header-container .hidden-scrolled.hamburger-header-menu { display: none; } .header-container .hamburger-header-menu { display: block; margin: 17px 15px 12px 3px; } .header-container .center-elements { display: flex; float: left; margin: 0 10px; flex-wrap: nowrap; /*width: 50%;*/ width: 23%; height: 50px; } .header-container .center-elements .header-scroll-search { flex: 2 50%; align-self: center; } .header-container .center-elements .header-scroll-search input { height: 26px; margin: 4px 0; } .header-container .center-elements .bdostava { flex: 1 25%; align-items: center; justify-content: flex-end; } .header-container .center-elements .bdostava > i, .header-container .center-elements .bdostava > a { color: #fff; } .header-container .center-elements .bdostava > a { font-size: 14px; } .header-container .center-elements .header-contact { flex: 1 25%; font-size: 12px; align-self: center; flex-wrap: wrap; justify-content: flex-end; } .header-container .center-elements .header-contact .email, .header-container .center-elements .header-contact .phone { flex: 1 100%; font-size: 12px; max-width: 150px; } .header-container .center-elements .header-contact a { color: #fff; } /* 20 godina - header */ .subheader.god20 { padding-bottom: 10px; margin-top: 10px; padding-top: 10px; } .god20 .subheader-logo-container { font-size: 1.2rem; font-weight: 700; color: #0c5088; display: flex; align-items: center; } .god20 .subheader-logo-container a { text-align: center; } .god20 .logo img { max-width: 240px; height: auto; } .god20 .search-container { padding-left: 10px; } .god20 .dostava_oservis { align-items: center; justify-content: center; flex-direction: column; height: 100%; } .god20 .dostava_oservis .bdostava { margin-bottom: 10px; } .god20.subheader .bdostava, .god20.subheader .bd { margin: 0; } .god20 .search-dostava { display: flex; flex-wrap: nowrap; align-items: center; } .god20 .search-dostava .search { flex: 2 66%; padding-left: 10px; padding-right: 20px; max-width: 66%; } .god20 .search-dostava .dostava_oservis { flex: 1 33%; max-width: 33%; } /* 16 04 2021 sakrij crossels similar i upsells */ .catalog-product-view .box-related{display:none} /* ljetna akcija (category id 560) */ .categorypath-akcija-html .category-title, .categorypath-akcija-html .main-container .toolbar-top2, .categorypath-akcija-html .footer2 {display:none} @media (min-width: 992px) { .categorypath-akcija-html .nav-container { max-height: 100%; opacity: 1; display: block; } } @media (max-width: 991px) { .categorypath-akcija-html .main-container h1{ font-size:1.4em } } /* dualne cijene - ne radi kako treba iz nekog razloga, prouciti */ .products-grid .product-info .price-small, .product-block .price-small { font-size: .8em;display:block;margin-bottom:10px;margin-left:0 !important } .product-block .old-price,.product-view .old-price{display:block} .product-block .old-price .price-small{ margin-bottom:0 !important } /* - pregled proizvoda:*/ .product-view .price-small{ font-size: .8em;display:block;margin-left:0 !important } .product-view .old-price{margin-top:20px} .product-view .old-price .price-small{ min-height:20px } /* - kosarica:*/ .cart .grandtotal .price-small { font-size: .9em;display:block; } /* - kosarica: stavke*/ .cart .nc-shcart-item--rightinfo span.price.price-small{ font-size: 1em;display:block; margin-bottom:10px; } /* - checkout */ .amscheckout .product-details .cart-price .price-small{ font-size:.8em; opacity:.6 !important; margin-left:0 !important; } .amscheckout .product-details .itemtotal{ border-top:solid 1px #eee; margin-top:7px; padding-top:7px; width: 100%; text-align: right; } .amscheckout .product-details .itemtotal .old-price { display:block } .amscheckout #checkout-review-table .price-small{ font-size:.8em; min-width: 46px; display: inline-block; } .amscheckout .sp-methods .price-small{ font-size:.8em; } .najnizacijena .price-small{display:inline !important} /* .product-view .product-shop .price-box .regular-price .price-small{ font-size: 18px;display:block;margin-left:0 !important } .price-box .old-price .price .price-small{ font-size:1em !important } .price-box .price .price-small{ font-size:1em !important; margin-bottom:0 } */ .product-options dl.last{ border-bottom:0 } /*sakrij komada na skladistu*/ .product-view .availability > p, .product-view .availability .availability-only, .product-block-summary .stock, .catalog-category-view .konfigurabilni-hideoncategory {display:none} .flash{ animation: flasher 2s linear infinite; } .zoom{ animation: zoomer 2s linear infinite; } .flash-zoom{ animation: flasherzoomer 2s linear infinite; } @keyframes flasher { 50% { opacity: .3; } } @keyframes zoomer { 50% { transform: scale(1.2); } } @keyframes flasherzoomer { 50% { opacity: .6; transform: scale(1.1); } } /* bozic 23 12 2025 */ .bozic-search { position: absolute; height: 40px; width: 80px; top: -30px; opacity: 0; background-image: url("/skin/frontend/ncx/default/images/santa/santa_peaking.png"); background-size: cover; animation: moveSanta 18s linear infinite; } @keyframes moveSanta{ 0% { transform: translate(230px, 20px); opacity: 0; } 28% { transform: translate(230px, 20px); opacity: 0; } 29% { z-index:1; opacity: 1; transform: translate(230px, -7px); } 30% { z-index: 999; opacity: 1; transform: translate(230px, -7px); } 85% { z-index: 999; opacity: 1; transform: translate(230px, -7px); } 89% { opacity: 1; transform: translate(230px, -7px); z-index: 1; } 91% { opacity: 0; transform: translate(230px, 20px); } 100% { opacity: 0; transform: translate(230px, 20px); } } /* ============================================================ KVANTUM-TIM — product cards + news cards, styled to the mockup Stylebot → Code tab, www.kvantum-tim.hr Replace the CSS currently saved there rather than pasting this below it — the old rules are !important too and will fight these (the ♡ pseudo-element especially). SCOPE: the card rules target .product-block with no section prefix, so they apply to every product widget and listing on the site — Akcije, Najprodavaniji, Novi proizvodi, category pages, search results, related products. Section chrome (headings, carousel arrows) is scoped to the widget wrappers in part 1; add any wrapper class you meet later to those lists. Colours sampled from the mockup: deep navy (headings, price) #12297d button blue #005399 hover #00287f link blue #1a4bad star amber #fca300 sale red #e8302f hairline border #eceff5 muted grey #9b9ba1 ============================================================ */ /* ============================================================ PART 1 — Section chrome (product widgets) ============================================================ */ .fp_novi_proizvodi, .fp_najprodavaniji_proizvodi { background: #fff !important; padding: 8px 0 4px !important; } .fp_novi_proizvodi .block-title h3, .fp_najprodavaniji_proizvodi .block-title h3 { font-size: 18px !important; font-weight: 700 !important; color: #12297d !important; margin: 0 0 14px !important; } .fp_novi_proizvodi .block-title h3 a, .fp_najprodavaniji_proizvodi .block-title h3 a { color: inherit !important; text-decoration: none !important; } .fp_novi_proizvodi .block-title, .fp_najprodavaniji_proizvodi .block-title { border: 0 !important; } /* the theme draws a 1px #ccc rule on top of every carousel; the mockup has none */ .block.ncxslider { border-top: 0 !important; padding-top: 0 !important; } /* ============================================================ PART 2 — The product card ============================================================ */ /* In the homepage carousels .product-block IS the slick slide, and slick sizes slides in px, so margins would break its maths. The white surface is painted by ::before inset 9px per side instead — real 18px gutters, widths untouched. On the category grid the same pseudo gives the cards their gutters too, so one rule covers both. */ .product-block { position: relative !important; isolation: isolate; display: flex !important; flex-direction: column !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 16px 25px 14px !important; transition: transform .2s ease !important; } .product-block::before { content: "" !important; position: absolute; inset: 0 9px; background: #fff; border: 1px solid #eceff5; border-radius: 10px; transition: box-shadow .2s ease, border-color .2s ease; z-index: -1; } .product-block:hover { transform: translateY(-2px) !important; } .product-block:hover::before { border-color: #dfe4ee; box-shadow: 0 8px 20px rgba(16, 24, 40, .09); } /* row spacing on grid listings (category, search). Carousel slides are skipped — a margin there breaks slick. */ .product-block:not(.slick-slide) { margin-bottom: 18px !important; } /* No favourites yet, so no heart — this also switches off the ♡ the old Stylebot CSS was drawing here. */ .product-block::after { content: none !important; display: none !important; } /* ============================================================ PART 3 — "Novo" flag ============================================================ */ /* Kept as a small pill everywhere it carries information, and hidden inside Novi proizvodi where a whole section of new products makes it redundant (as in the mockup). Swap the two rules if you'd rather have it the other way round. */ .product-block .name .is-new { display: inline-block !important; margin: 0 0 6px !important; padding: 3px 8px !important; background: #eaf1ff !important; border-radius: 999px !important; color: #005399 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .fp_novi_proizvodi .product-block .name .is-new { display: none !important; } /* ============================================================ PART 4 — Product image ============================================================ */ /* The mockup runs a wide, shallow image band rather than a square one, which is what keeps the cards compact. Raise the ratio towards 1/1 if you want bigger photos. */ .product-block .product-image { display: flex !important; align-items: center !important; justify-content: center !important; aspect-ratio: 3 / 2 !important; margin: 2px 0 12px !important; overflow: hidden !important; } .product-block .product-image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; mix-blend-mode: multiply !important; } .product-block .hover-image { display: none !important; } /* ============================================================ PART 5 — Product name ============================================================ */ .product-block .name { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.4 !important; } .product-block .name a { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; min-height: 2.8em !important; color: #3b4252 !important; font-weight: 500 !important; text-decoration: none !important; } .product-block .name a:hover { color: #005399 !important; } /* The mockup splits the name over two lines — grey brand on top, darker model under it. That needs the brand in its own element, so when the markup grows one, this styles it: .product-block .name .brand { display: block !important; color: #82868f !important; font-weight: 400 !important; } */ /* ============================================================ PART 6 — Rating, price and button ============================================================ */ /* DOM order is price → action → rating → reviews → stock, so the grid does the arranging: stars and review count on one line, then price left / button right on the next. Three columns, and the price spans the first two. That matters: with only two columns the stars and the price share column 1, so the column grows to fit the price and shoves the review count away from the stars. Spanning keeps column 1 sized by the stars alone. The last track is minmax(0,1fr) so a long review label can't push the button out of the card. */ .product-block .product-block-summary { display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center !important; column-gap: 6px !important; row-gap: 9px !important; margin: auto 0 0 !important; padding-top: 2px !important; } .product-block .product-block-summary > .col { flex: none !important; max-width: none !important; width: auto !important; min-width: 0 !important; padding: 0 !important; } .product-block .product-block-summary > .shipping-rating { grid-area: 1 / 1; justify-self: start !important; } .product-block .product-block-summary > .reviews { grid-area: 1 / 2; justify-self: start !important; } .product-block .product-block-summary > .price { grid-row: 2; grid-column: 1 / 3; } .product-block .product-block-summary > .action { grid-row: 2; grid-column: 3; justify-self: end !important; } /* stock line isn't in the mockup — delete this to bring it back */ .product-block .product-block-summary > .stock { display: none !important; } /* display:flex stops whitespace-only cells (products with no reviews yet) rendering a phantom text line; the min-height keeps the row reserved so price + button line up across every card in a row */ .product-block .shipping-rating, .product-block .reviews { display: flex !important; align-items: center !important; min-height: 17px !important; } /* --- stars --- The widget emits fa-star for a full star and fa-star-half-alt for a half, and nothing at all for the empty remainder, so colouring every icon amber is enough. */ .product-block .starrating { display: flex !important; align-items: center !important; gap: 4px !important; } .product-block .starrating-box { display: inline-flex !important; align-items: center !important; gap: 1px !important; } .product-block .starrating-box i.fa-star, .product-block .starrating-box i.fa-star-half-alt, .product-block .starrating-box i.fa-star-half { color: #fca300 !important; font-size: 12px !important; padding-right: 2px; } /* the numeric "4.9" is hidden by the theme, and the mockup shows stars only — keep it that way */ .product-block .starrating-count { display: none !important; } /* --- counts --- order count isn't wanted; review count is, parenthesised next to the stars as in the mockup */ .product-block .reviews .numordered { display: none !important; } .product-block .reviews .numreviews { color: #9b9ba1 !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } .product-block .reviews .numreviews::before { content: "("; } .product-block .reviews .numreviews::after { content: ")"; } /* --- price --- */ .product-block .price, .product-block .price .price, .product-block .special-price { font-size: 18px !important; font-weight: 700 !important; color: #12297d !important; line-height: 1.2 !important; white-space: nowrap !important; } .product-block .price-box { margin: 0 !important; } /* discounted products: struck old price plus the -20% flag on one line, current price bold underneath */ .product-block .old-price { display: block !important; margin: 0 0 1px !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; } .product-block .old-price > span { color: #9b9ba1 !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: line-through !important; } .product-block .old-price .postotak { margin-left: 5px !important; color: #e8302f !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; } /* "Cijena na upit …" rows have no .price-box — quieter, allowed to wrap */ .product-block .product-block-summary > .price:not(:has(.price-box)) { font-size: 12px !important; font-weight: 600 !important; color: #5b6472 !important; white-space: normal !important; line-height: 1.35 !important; } /* ============================================================ PART 7 — Add to cart ============================================================ */ /* row-reverse puts the cart icon after the label, as in the mockup; the theme's uppercasing is switched off to match. */ .btn-cart { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: auto !important; padding: 8px 13px !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; white-space: nowrap !important; cursor: pointer !important; transition: background .18s ease !important; } .btn-cart i { font-size: 12px !important; } /*.product-block .btn-cart:hover .fa-arrow-down { display: none !important; }*/ .btn-cart.out-of-stock, .btn-cart:disabled { background: #edeff2 !important; color: #9aa2af !important; cursor: not-allowed !important; } /* ============================================================ PART 8 — Product carousel controls ============================================================ */ .fp_novi_proizvodi .slick-prev, .fp_novi_proizvodi .slick-next, .fp_najprodavaniji_proizvodi .slick-prev, .fp_najprodavaniji_proizvodi .slick-next { width: 32px !important; height: 32px !important; background: #fff !important; border: 1px solid #eceff5 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(16, 24, 40, .12) !important; z-index: 3 !important; } .fp_novi_proizvodi .slick-dots li button, .fp_najprodavaniji_proizvodi .slick-dots li button { background: #d8dde5 !important; border-radius: 50% !important; } .fp_novi_proizvodi .slick-dots li.slick-active button, .fp_najprodavaniji_proizvodi .slick-dots li.slick-active button { background: #005399 !important; } /* ------------------------------------------------------------ Not styled, because there's nothing in the markup to hook: • "Pogledaj sve →" link in the section headers • favourites heart (skipped until it does something) • the button still reads "Dodaj", not "Dodaj u košaricu" — that's text, not CSS ------------------------------------------------------------ */ /* ============================================================ PART 9 — NOVOSTI, styled to the mockup's "Novosti i savjeti" Markup per slide: li.kva-news > a.kva-news--img + a > h4 + div.kva-news--intro > p NOTE ON WIDTH: the mockup's news card is ~330px and shows 3 across; the live carousel is initialised with slidesToShow: 4, which leaves ~244px per card and squeezes the titles. Changing 4 → 3 in the #newscarousel slick() init is a one-line template change and makes this match properly. The CSS works either way — the image column is a percentage. ============================================================ */ .fp_novosti { background: #fff !important; padding: 8px 0 4px !important; } .fp_novosti .block-title { border: 0 !important; } .fp_novosti .block-title h3 { font-size: 18px !important; font-weight: 700 !important; color: #12297d !important; margin: 0 0 14px !important; } .fp_novosti .block-title h3 a { color: inherit !important; text-decoration: none !important; } /* theme draws a 1px #ccc rule on the carousel list */ .fp_novosti .kva_newscontainer { border-top: 0 !important; padding-top: 0 !important; } /* --- the article card: image left, text right --- */ .fp_novosti .kva-news { position: relative !important; isolation: isolate; display: grid !important; grid-template-columns: 40% 1fr; column-gap: 11px !important; align-content: start !important; padding: 14px 17px !important; transition: transform .2s ease !important; margin: 0; } .fp_novosti .kva-news::before { content: "" !important; position: absolute; inset: 0 8px; background: #fff; border: 1px solid #eceff5; border-radius: 9px; transition: box-shadow .2s ease, border-color .2s ease; z-index: -1; } .fp_novosti .kva-news:hover { transform: translateY(-2px) !important; } .fp_novosti .kva-news:hover::before { border-color: #dfe4ee; box-shadow: 0 8px 20px rgba(16, 24, 40, .09); } /* thumbnail — it's a background-image on the anchor, so cover it and let it span both text rows */ .fp_novosti .kva-news--img { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: stretch !important; width: auto !important; height: auto !important; min-height: 96px !important; margin: 0 !important; background-size: cover !important; background-position: center !important; border-radius: 6px !important; } /* the title's anchor carries no class of its own */ .fp_novosti .kva-news > a:not(.kva-news--img) { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; text-decoration: none !important; } /* stretch that anchor over the whole card, so the generated "Pročitaj više" below the text is genuinely clickable and the card reads as one target */ .fp_novosti .kva-news > a:not(.kva-news--img)::before { content: "" !important; position: absolute; inset: 0; z-index: 2; } .fp_novosti .kva-news h4 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; margin: 0 0 5px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #12297d !important; } .fp_novosti .kva-news > a:not(.kva-news--img):hover h4 { color: #1a4bad !important; } .fp_novosti .kva-news--intro { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; } .fp_novosti .kva-news--intro p { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: #6f7787 !important; } /* the mockup's "Pročitaj više →" — no element exists for it, so it's generated here and made clickable by the overlay above. Delete this rule once the template outputs a real link. */ .fp_novosti .kva-news--intro::after { content: "Pročitaj više →" !important; display: block !important; margin-top: 7px !important; color: #1a4bad !important; font-size: 12px !important; font-weight: 600 !important; } .fp_novosti .slick-prev, .fp_novosti .slick-next { width: 32px !important; height: 32px !important; background: #fff !important; border: 1px solid #eceff5 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(16, 24, 40, .12) !important; z-index: 3 !important; } .fp_novosti .slick-dots li button { background: #d8dde5 !important; border-radius: 50% !important; } .fp_novosti .slick-dots li.slick-active button { background: #005399 !important; } .ncxslider-carousel .slick-dots { bottom: -25px; }