:root {
    --main-color: #e93d3d; /*crvena*/
    --back-color: #282d4a; /*teget*/
    --back-alt-color: #303958;
    --gray-color: #e6e6e6;
    --logo-color: #647c9e;
}

.dark-back-color {background-color: var(--back-color);}



/* reset */
.theme-color {color: var(--main-color);}
a {transition: color .25s;}
.noselect, img {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
*:focus {outline: none!important;}
.relative {position: relative;}
.icon-svg {display: block; font-size: 0;}
.flex-justify-start {justify-content: flex-start;}
.flex-justify-end {justify-content: flex-end;}
.flex-items-end {align-items: flex-end;}
.flex-justify-between {justify-content: space-between;}
.grid {display: grid;}
::-moz-selection {color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;}
::selection { color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;}
.list-style-no {list-style: none; padding: 0; margin: 0;}
.underline {text-decoration: underline;}
.navbar {border: none;}
header .solid-menus .no-bg li.active a {background: none;}
header .menu-cart a:hover {color: var(--main-color);}
.scrollToTop {background: var(--main-color);}
/*.cart-checkout .okvir #checkout-submit {background: var(--back-color);}*/


#show-register-tab, #submit-register {font-weight: 800}


body {font-family: 'Montserrat', sans-serif; font-weight: 600; color: #282d4a;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif; font-weight: 800; color: #282d4a;}
h2.section-title {text-transform: uppercase; padding-top: 48px; padding-bottom: 48px;}

.m-r-40 {margin-right: 40px;}
.m-l-40 {margin-left: 40px;}


header .top {background-color: var(--back-alt-color);}
header .top .content {padding-top: 10px; padding-bottom: 10px;}
header .top a {display: flex; align-items: center; position: relative;}
header .top a:after { content: ''; width: 1px; height: calc(100% - 10px); background: #fff; position: absolute; right: -20px; top: calc(50% - 6px); }
header .top ul li:last-child a:after {display: none; }
header .top .top-icon-wrap {background-color: #fff; border-radius: 50%; display: inline-flex; margin-right: 10px; transition: all .2s ease-out;}
header .top svg {fill: var(--main-color); width: 20px; height: 20px; padding: 2px;}
header .top a img {height: 20px; width: 20px; transition: all .2s ease-out;}
header .top .badge {background: transparent;}

header .middle {background-color: var(--back-color);}
header .middle .advanced-search .input {flex: 1; margin-right: 10px;}
header .middle .advanced-search .input input {border-radius: 30px; padding: 7px 30px 7px 15px; color: var(--back-color);}
header .middle .advanced-search .button {position: relative; right: auto; top: auto;}
header .middle .advanced-search .button input {color: #fff; border: 2px solid #fff; border-radius: 30px; padding: 7px 20px;}
header .middle .advanced-search input::placeholder {color: var(--back-alt-color); font-weight: 400;}


header .menu-cart .shopping-cart {transition: .2s; display: inline-flex; float: right;}
header .middle .menu-cart .cart-icon-wrap {background: var(--main-color); border-radius: 50%; padding: 10px; margin-right: 10px; transition: .2s;}
header .middle .menu-cart .cart-icon-wrap img {width: 23px; height: 23px;}
header .menu-cart .shopping-cart .cart-text {color: #fff;}
header .middle .badge {background-color: transparent; color: inherit; position: relative; font-size: inherit; padding: 0; top: auto; right: auto; font-weight: inherit; }


header .bottom {border: none; padding: 0;}
header .bottom #nav-section .navbar-default .navbar-nav > li > a {color: #fff; text-transform: uppercase; padding: 10px 16px;}
header .bottom #nav-section .navbar-default .navbar-nav > li:hover > a {color: var(--back-alt-color);}



.swiper-container-holder .swiperProducts.swiper-container {padding-top: 10px; }
.swiper-container .swiper-pagination-bullet-active {background: var(--main-color);}
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {width: 10px; height: 10px;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 11px!important; background: var(--main-color); border-radius: 50%; color: #fff; width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center;}
.swiper-button-prev:after {padding-right: 2px;}
.swiper-button-next:after {padding-left: 2px;}
.swiperProducts .swiper-wrapper .swiper-slide:first-child {
  margin-left: 13px;
}


.homepage .category .product-holder {border: none;}
.homepage .one-product.category img {aspect-ratio: unset; max-height: 132px;}
.one-product .product-holder {margin-bottom: 30px; overflow: unset;}
.one-product .product-holder a h2 {text-transform: uppercase;}
.one-product .price {color: var(--main-color); font-size: 18px; font-weight: 800; margin-top: 10px;}

.add-to-cart-short {display: flex; justify-content: center; align-items: stretch;}
.add-to-cart-short label {width: 40px; margin-bottom: 0;}
.one-product .product-holder .short-add-to-cart-input {padding: 0; text-align: center; height: 100%; width: 100%; border-color: #282d4a99; border-radius: 30px 0 0 30px; border-right: 0;}
.one-product .product-holder .short-add-to-cart-btn {background-color: var(--back-color); border-color: var(--back-color); border-radius:  0 30px 30px 0; display: inline-flex; align-items: center; 
                                                        color: #fff; font-size: 11px; padding: 9px 18px; transition: .2s;}
.one-product .product-holder .short-add-to-cart-btn svg {width: 20px; height: 20px; fill: #fff; margin-left: 5px; transition: .2s;}
.one-product .product-holder .short-add-to-cart-btn img {width: 20px; height: 20px; margin-left: 5px; transition: .2s;}

.one-product .product-holder .short-add-to-cart-btn:hover {background: var(--logo-color); border-color: var(--logo-color);}
.one-product .product-holder .short-add-to-cart-btn:hover svg {fill: var(--back-color);}
.one-product .product-holder .short-add-to-cart-btn:hover img {transform: scale(1);}


.one-product .follow-featured {left: auto; right: 7px;}
.one-product .product-flags {right: auto; left: -16px; top: -10px; width: auto;}
.one-product .product-flags [class^='exp-on'] {letter-spacing: .3px; padding: 4px 12px;}
.one-product .exp-on-action {border-radius: 0 15px 15px 0;}
.one-product .exp-on-new {background: var(--back-color);border-radius: 0 15px 15px 0;}
.one-product .product-flags [class^='exp-on']:before {content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 13px solid var(--back-color);
                                                        border-bottom: 3px solid transparent; border-top: 1px solid var(--back-color);}






.swiperTestimonials .content:before {content: ''; width: 28px; height: 31px; background-size: 28px; background-repeat: no-repeat; background-position: center; top: 0;
                                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='860.1 375.8 799.5 739.7' fill='%23e93d3d' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M1183.9,1115.4l41.7-88.7c-106.8-16.9-225.3-165.4-243.2-305.3c-0.2-1.8-0.3-3.6-0.3-5.4v-73.3l187,2v-269l-308.9,0 l0,313.3C905.5,983.2,1084.1,1076.2,1183.9,1115.4z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M1617.9,1115.4l41.7-88.7c-106.8-16.9-225.3-165.4-243.2-305.3c-0.2-1.8-0.3-3.6-0.3-5.4v-73.3l187,2v-269l-308.9,0 l0,313.3C1339.5,983.2,1518.1,1076.2,1617.9,1115.4z'/%3E%3C/g%3E%3C/svg%3E");}




.service-info {background: var(--gray-color); padding: 50px 0; text-transform: uppercase;}
.service-info h4 {margin-bottom: 4px;}
.service-info span {display: block;}
.service-info span:nth-of-type(2) {font-size: 16px; font-weight: 500;}
.service-info .service-icon-wrap {background-color: #fff; border-radius: 50%; display: inline-flex; padding: 12px;}
.service-info svg {width: 40px; height: 40px; fill: var(--main-color);}
.service-info .service-icon-wrap:has(img) {padding: 0;}
.service-info img {width: 64px; height: 64px;}



.product .product-details .add-to-cart {font-size: 16px; background: var(--back-color);}
/*.product .product-details :is(.sp-plus, .sp-minus, .label-success), .comments .btn {background: var(--back-color);}*/
.product .product-details .go-to-checkout {background: var(--main-color); font-size: 16px;}
.product .product-details :is(.price, .price .salesprice) {color: var(--main-color);}
.product .product-details :is(.sp-plus:hover, .sp-minus:hover, .add-to-cart:hover) {background: var(--back-alt-color);}
.product .product-details .go-to-checkout:before {background: var(--logo-color);}



footer .details {background: inherit; color: #fff;}

footer .details ul li, footer .details ul li > a, footer .details p.title {color: #fff;}
footer .details p.title {margin-bottom: 10px;}
footer .details p.title::before {display: none;}
footer .details ul:not(.social-circle) li :is(a, .list-item)  {padding: 3px 0; display: inline-flex; align-items: center;}
footer .details ul:not(.social-circle) li svg {fill: var(--main-color); width: 28px; height: 28px; background-color: #fff; border-radius: 50%; padding: 3px; margin-right: 12px;}
footer .details ul:not(.social-circle) li a:hover {color: var(--logo-color);}

footer .signature {background-color: var(--back-alt-color);}
footer .credit-cards {padding: 20px 40px; border-radius: 50px; display: inline-flex;}
footer .credit-cards a {}
footer .credit-cards .visa {height: 30px; width: auto; margin: 0 10px;}

footer .logo {height: 80px; width: auto;}
footer .footer-phone span {font-weight: 400;}
footer .footer-phone a {background-color: var(--main-color); color: #fff; width: fit-content; padding: 4px 16px; border-radius: 30px; font-size: 17px; margin-top: 4px;}


footer .dot-list li {position: relative; padding-left: 26px;}
footer .dot-list li:before {content: ''; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; background-color: var(--main-color); border-radius: 50%;}

.footer-work-time {text-transform: uppercase;}
.footer-work-time :is(h4, h5) {color: #fff; font-weight: 700;}
.footer-work-time h5 {text-transform: lowercase; font-size: 21px; margin-bottom: 0;margin-top: 2px;}
.footer-work-time span {background-color: var(--back-alt-color); display: inline-block; border-radius: 30px; padding: 5px 40px; text-align: center; margin-left: 20px; font-size: 13px;}

footer .social-circle {}
footer .social-circle li {}
footer .social-circle li > a {background-color: var(--back-alt-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 10px; transition: .2s ease-in-out;}
footer .social-circle li > a > svg {width: 26px; height: 26px; fill: #fff; transition: .2s ease-in-out;}
footer .social-circle li > a:hover {background: var(--gray-color);}
footer .social-circle li > a:hover svg {fill: var(--back-color);}



a.c-button {background-color: var(--back-alt-color); box-shadow: 0 -3px 0 var(--back-color) inset;}
a.c-button:hover {background-color: var(--logo-color);}



@media screen and (min-width: 768px) and (max-width: 991px){
    
    header .top .flex-column-sm {flex-direction: column;}
    header .top ul {justify-content: center; padding: 7px 0;}
    header .bottom #nav-section .navbar-default .navbar-nav > li > a {font-size: 13px; padding: 10px 9px;}
    
    div.product-list-6 .one-product:nth-of-type(2n+1) {clear: none;}
    div.product-list-6 .one-product:nth-of-type(3n+1) {clear: both;}
    
    footer .details p.title {margin-top: 30px;}
    footer .signature .text-left {margin-bottom: 20px;}
}





@media screen and (min-width: 768px){
    header .bottom {background-color: var(--main-color); }
}







@media screen and (max-width: 767px){
    
    header .bottom {background-color: var(--back-color);}
    
    header .bottom .solid-menus .navbar-header {display: flex;/* justify-content: space-around;*/ align-items: center; width: 100%; padding: 20px 0 0; border-bottom: 20px solid var(--main-color);}
    header .bottom .solid-menus .navbar-toggle.navbar-toggle-left {margin-left: 30px; border: none; background-color: var(--logo-color); border-radius: 50%; width: 45px; height: 45px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;}
    header #nav-section .navbar-default .navbar-toggle .icon-bar {background-color: #fff; width: 25px; transition: opacity .1s, transform .3s ease-in-out, width .3s ease-in-out;}
    header #nav-section .navbar-default .navbar-toggle :is(.icon-bar:nth-child(2), .icon-bar:nth-child(3)) {width: 25px}
    header #nav-section .navbar-default :is(.navbar-toggle:hover, .navbar-toggle:focus) {background: var(--logo-color);}
    header .bottom .solid-menus .navbar-brand.navbar-brand-center {position: relative; left: auto; right: auto; text-shadow: none; height: auto;}
    header .bottom .solid-menus .navbar-brand > img {height: 50px;}
    header .bottom .navbar-header .shopping-cart {position: relative; right: unset; top: unset; margin: 0; margin-right: 30px; background-color: var(--main-color); border-radius: 50%; width: 40px; height: 40px; display: inline-flex!important;
                                                        align-items: center; justify-content: center;}
    header .bottom .navbar-header .shopping-cart svg {fill: #fff; width: 24px;  max-height: 24px;}
    header .navbar-header .badge {background-color: var(--logo-color); font-size: 12px; color: #fff; padding: 3px 5px; right: auto; left: -9px; top: auto; bottom: -4px; border: 2px solid var(--back-color);}
    header .bottom .solid-menus .navbar-header:before {content: ''; position: absolute; top: 0; background: var(--back-alt-color); left: 0; height: 20px; width: 100%; display: block; }
    header .bottom #nav-section .navbar-default .navbar-toggle.button-opened .icon-bar {width: 20px;}
    header .bottom #nav-section .navbar-toggle.button-opened .icon-bar:nth-child(1) {transform: rotate(45deg) translateY(13px) translateX(2px);}
    header .bottom #nav-section .navbar-toggle.button-opened .icon-bar.mid {transform: rotate(-45deg) translateY(6px) translateX(2px);}
    header .bottom #nav-section .navbar-toggle.button-opened .icon-bar.last { opacity: 0; transform: translateY(-200px);}
    header .search-icon svg {width: 36px; height: 36px; position: absolute; right: 85px; top: 40px; fill: var(--logo-color);}

    header .bottom #nav-section .navbar-default .navbar-nav > li:hover > a {color: #b5b5b5;}


    header .bottom .navbar-default .navbar-collapse, header .bottom .navbar-default .navbar-form {border-top: 0;}
    
    header .bottom .solid-menus .navbar-collapse {padding-left: 30px; padding-right: 30px;}
    header .bottom .solid-menus ul.navbar-nav {margin: 15px -15px;}
    header .bottom #nav-section .navbar-default .navbar-nav > li > a {background-color: var(--back-color); border: 0; font-weight: 500;}
    header .bottom #nav-section .navbar-default .navbar-nav > li > a .badge {background-color: var(--logo-color); font-size: 12px; color: #fff; padding: 3px 5px;}
    header .bottom #nav-section .navbar-default .navbar-nav > li > a span.fas {color: var(--main-color); background-color: var(--gray-color); border-radius: 50%; padding: 5px; font-size: 12px; margin-right: 5px;}
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {color: var(--gray-color); padding: 7px 30px;}
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color: #fff;}
    .navbar-nav .open .dropdown-menu > li > ul.dropdown-menu > li > a {margin: 3px 40px; padding: 3px 0 6px; border-bottom: 1px solid var(--back-alt-color);}
    
    
    .service-info .service-item {margin-bottom: 40px;}
    
    .one-product .product-flags {left: -13px; font-size: 11px;}
    .one-product .product-flags [class^='exp-on'] {padding: 3px 11px;}
    .one-product .product-flags [class^='exp-on']:before {border-right: 11px solid var(--back-color);}
    
    
    
    footer .details.visible-xs > .col-md-12 {padding-left: 30px; padding-right: 30px;}
    footer .details a {color: #fff; margin-left: auto; margin-right: auto;}
    footer .details .toggler {font-weight: 600; border-bottom: 0; font-size: 20px; text-align: left;}
    
    footer .footer-work-time {text-align: center;}
    footer .footer-work-time :is(h4, h5) {text-align: center;}
    footer .footer-work-time h4 {font-size: 19px;}
    footer .footer-work-time span {font-size: 12px; padding: 5px 8%; margin: 0 10px;}
    footer .footer-work-time h5 {font-size: 18px;}
    
    footer .details .toggler {position: relative; background-image: none!important;}
    footer .details .tgNaslov:after { content: ""; display: block; width: 0.8rem; height: 0.8rem; position: absolute; top: calc(50% - 0.6rem); border: 0.2rem solid #fff; border-width: 0.2rem 0.2rem 0 0; transition: all 0.2s linear; 
                                        right: 6px;}
    footer .details .tgNaslov.togglerSkriven:after {transform: rotate(135deg);}
    footer .details .tgNaslov:not(.togglerSkriven):after {transform: translateY(0.35rem) rotate(-45deg);}
    footer .details .tgNaslov:before {content: ''; background: var(--main-color); right: 0; position: absolute; width: 20px; height: 20px; border-radius: 50%; top: calc(50% - 10px);}
    
    footer .dot-list {margin-bottom: 20px;}
    footer .dot-list > li, footer .contact-list li {text-align: left;}
    footer ul.social-circle {margin: 30px 0 10px;}

    
    footer .signature .flex-xs .col-md-4 {order: 2; text-align: center; font-weight: 500; font-size: 12px; padding-top: 30px; padding-bottom: 10px;}
    footer .credit-cards {overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
    footer .credit-cards a {display: contents;}
    footer .credit-cards .visa {margin: auto; margin-bottom: 0; width: auto; height: 26px; margin-right: 10px;}
}




@media screen and (max-width: 440px){
    header .bottom .solid-menus .navbar-toggle.navbar-toggle-left {margin-left: 16px;}
    header .bottom .navbar-header .shopping-cart {margin-right: 16px;}
    header .search-icon svg {right: 70px;}
}



@media screen and (max-width: 380px){
    header .bottom .solid-menus .navbar-toggle.navbar-toggle-left {width: 40px; height: 40px;}
    header #nav-section .navbar-default .navbar-toggle .icon-bar, header #nav-section .navbar-default .navbar-toggle :is(.icon-bar:nth-child(2), .icon-bar:nth-child(3)) {width: 22px;}
    header .bottom .navbar-header .shopping-cart {width: 36px; height: 36px}
    header .bottom .navbar-header .shopping-cart svg {width: 20px; max-height: 20px;}
    header .search-icon svg {width: 34px; height: 34px; top: 39px; right: 66px;}
    header .bottom .solid-menus .navbar-brand > img {height: 44px;}
}





.scrollToTop {border: none; animation: none; -webkit-animation: none; -o-animation: none; bottom: 42px; right: 15px;}




/*add to cart message*/
#noty_top_layout_container {width: 100%!important; left: 0!important; top: 0!important!; background-color: #var(--logo-color)!important;} 
.i-am-new li {background-color: transparent!important; width: 100%!important; margin: 0!important;}
.noty_message {background-color: var(--logo-color);!important; color: #fff; font-size: 15px; letter-spacing: -.3px; text-transform: uppercase; font-weight: 500;}
.noty_progress_bar {opacity: 0.3; background-color: var(--back-color);}


/*@media screen and (max-width: 767px){
    #noty_top_layout_container {top: 111px!important!;}
}

@media screen and (min-width: 768px){
    #noty_top_layout_container {top: 238px!important!;}
}
@media screen and (min-width: 992px){
    #noty_top_layout_container {top: 174px!important;}
}*/



