:root {
    --main-color: #f59c3d; 
    --alt-color: #e3274f;
    --yellow-color: #f8ab39;
    --black-color: #101010;
    --white-color: #f9f9f9;
    --dark-color: #000028;
    --siemens-color: #00A4B4; /*00ffb9*/
}



/* 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-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;}
a.c-button, a.c-button:hover {background-color: var(--main-color); box-shadow: none;}
.underline {text-decoration: underline;}
header .search-box .input .button input {color: var(--main-color);}
.navbar {border: none;}
header .solid-menus .no-bg li.active a {background: none;}
header .menu-cart a:hover {color: var(--main-color);}
.one-product .product-img {border: none;}
.product-details .add-to-cart, .product-details .sp-plus, .product-details .sp-minus, .comments .btn, .hvr-sweep-to-right::before, .cart-checkout .okvir #checkout-submit, .cat-title {background: var(--main-color);}
.product-details .go-to-checkout, .cart-checkout .okvir .editable {background: var(--dark-color); border-color: var(--dark-color);}
.addtofav.inline .fa-heart, .cart-checkout .okvir i, .cart-checkout .okvir h2 {color: var(--dark-color);}
.product-details .price, .product-details .price .salesprice, .user-details .if-registered, .search h1 span, .shop ul.filters .alert.alert-primary strong, #vertical-menu .active a.list-group-item, .one-product .price, .sidebar .active ul a > i
    {color: var(--main-color);}
.kontakt .btn {background: var(--main-color);}
#noty_center_layout_container > li, #noty_topCenter_layout_container, #noty_topCenter_layout_container > li {background-color: var(--main-color)!important;}
footer ul li a:hover {font-weight: inherit;}
footer ul li {opacity: 1;}
footer .details p.title {margin: 0;}
footer .details p.title::before {display: none;}
footer .signature {background-color: transparent; color: #333;}
footer .visa {width: auto;}
.form-control:focus {border-color: inherit; outline: 0; -webkit-box-shadow: none; box-shadow: none;}
body.compensate-for-scrollbar {margin-right: 0;}
.swiperTickerContainer, .xadmin-links, .swiper-container .swiper-pagination-bullet-active {background: var(--main-color);}
.news-template-short2 img:hover {transform: scale(1);}
.scrollToTop {background: var(--main-color);}
#vertical-menu ul.collapse li a.list-group-item::before {content: '';}
.category select, .brand select {border: none;}
.breadcrumb .back {margin-left: auto;}
.swiper-button-next, .swiper-button-prev {color: var(--main-color)!important;}
.user-login input[type=submit] {background: var(--alt-color);}
.theme-button:focus {color: #fff; text-decoration: none;}
.first-cta ul li a {background: var(--main-color)!important;}
.overflow-hidden {overflow: hidden;}


body {background-color: #f6f6fa; color: var(--dark-color);}
h1, h2, h3, h4, h5, h6 {font-weight: 500;}
body, h1, h2, h3, h4, h5, h6, a, p, li {font-family: 'Fira Sans', sans-serif;}
.static h1 {color: var(--main-color); text-align: left; font-size: 40px; font-weight: 400;}
.border {max-width: 1920px; margin-left: auto; margin-right: auto; padding-top: 84px;}
.container-fluid {padding: 0px 68px;}
.dark-theme {background: var(--dark-color); color: var(--white-color);}
.white-theme {background: #fff; color: var(--dark-color);}
.section-title {font-size: 32px; line-height: 40px; margin-bottom: 30px;}
.overlay {position: relative;}
.overlay:after {content: ''; background: #0000007a; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: background 0.3s ease-in-out,-webkit-background 0.3s ease-in-out;}
.overlay:hover:after {background: #0000005a;}



.arrow {display: inline-block; width: 18px; height: 2px; position: relative; right: auto; top: auto; vertical-align: middle; margin-left: 8px; background: var(--white-color); cursor: pointer; z-index: 110;}
.arrow .arrow-inside {position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 30px;}
.arrow:before, .arrow:after {content: ''; display: block; background: inherit; width: 14px; height: 3px; position: absolute; -webkit-transform-origin: 12.5px 1.5px; transform-origin: 12.5px 1.5px; -webkit-transform: rotate(45deg);
                            transform: rotate(45deg); right: -1px; top: 0; width: 7px; height: 2px; -webkit-transform-origin: 6px 1px; transform-origin: 6px 1px;}
.arrow:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.arrow-slide {width: 38px; height: 3px; margin: 0 1px; background: white; position: absolute; right: 20px; top: 50%; cursor: pointer; z-index: 99; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;}
.arrow-slide:before, .arrow-slide:after {width: 14px; height: 3px; -webkit-transform-origin: 12.5px 1.5px; transform-origin: 12.5px 1.5px;}
.swiper-button-prev .arrow {-webkit-transform: scale(-1,1); transform: scale(-1,1); right: unset; left: 20px;}

.swiper-button-next:has(.arrow-slide):after, .swiper-button-prev:has(.arrow-slide):after {display: none;}


.brendovi .breadcrumb {background: transparent;}
.brendovi .breadcrumb {padding-left: 0; padding-right: 0;}
.brendovi .breadcrumb>li {color: var(--white-color);}

.checkout .order-button {border-radius: none!important;}
.checkout .order-button:hover {color: var(--dark-color);}


header .middle {background: var(--dark-color); padding: 0; position: fixed; left: 0; top: 0; z-index: 500; width: 100%; padding: 0; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 10px 20px #0000002e;}


.hero-banner .text-content {position: absolute; padding: 0; left: 68px; z-index: 100; color: #fff; bottom: 80px;}
.hero-banner .image-content img {display: block; -webkit-animation-name: scaleImage; animation-name: scaleImage; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; 
                    -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; filter: brightness(1.1)}
.hero-banner .image-content:after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: -webkit-gradient(linear,left top,left bottom,from(rgba(46,46,56,0)),to(#000028));
                        background: linear-gradient(180deg,rgba(46,46,56,0) 0%,#000028 100%); z-index: 2; pointer-events: none; bottom: 0; height: 100%;}
.hero-banner .article-details {text-align: left;}           
.hero-banner .article-details span {font-size: 24px; line-height: 22px; display: block; font-weight: 400; color: var(--main-color); margin-bottom: 10px;}
.hero-banner .article-details .featured-title {color: #fff; margin: 0; font-size: 44px; line-height: 1.25; text-transform: uppercase; max-width: 80%; display: block; letter-spacing: -.5px; text-shadow: 0 0 8px #00000052;}
.hero-banner .article-details p {overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; border-left: 2px solid var(--main-color); padding-left: 15px; 
                                margin: 16px 0; max-width: 600px;}
.hero-banner .swiper-container-holder {position: relative; height: 610px!important; width: calc(100% + 136px); left: -68px; padding-right: 0; padding-left: 0; overflow: hidden; z-index: 3;}
.hero-banner .swiper-slide > div {max-height: unset;}
       

.hero-banner .header-dugme  {margin-bottom: 50px;}
.hero-banner .header-dugme a {background: #fff; text-shadow: 0 0 8px #fff; text-transform: unset;}
@media only screen and (max-width: 767px) {
    .hero-banner .header-dugme  {margin-bottom: 15px; }
    .hero-banner .header-dugme a {font-size: 16px!important}
    .hero-banner .text-content { bottom: 30px!important;}
}




.home-banner .swiper-slide > div > a {display: flex; overflow: hidden; height: 610px!important;}
.home-banner .big-banner .swiper-slide img {aspect-ratio: unset;}
.big-banner .swiper-slide .description {position: absolute; padding: 0; left: 0; z-index: 100; color: white; width: 100%; bottom: 80px; -webkit-transform: unset; transform: unset; background: none; top: unset;}


.partner-item .img-wrap {height: 140px; background: #fff; padding: 15px; border: 2px solid var(--dark-color); border-radius: 10px / 100px; justify-content: center;}
.partner-item .img-wrap img {object-fit: contain; width: auto; }
.home-partners .partners-gap {gap: 50px;}


.team .team-item {padding: 0 0 125px; position: relative;}
.team .team-text {background: var(--dark-color); color: #fff; display: block; overflow: hidden; padding: 16px 20px 20px; z-index: 1; position: absolute; width: 100%; left: 0; bottom: 0;}
.team .team-text h3 {font-weight: 400;  font-size: 24px; margin-bottom: 10px;}
.team .team-text h4 {-webkit-transition: max-height 0.3s ease-out; transition: max-height 0.3s ease-out; max-height: 0; margin: 0; overflow: hidden; color: var(--main-color);}
.team .team-text span {margin-top: 10px; display: block;}
.team .team-item:hover .team-text h4 {max-height: 58px; height: auto;}

.portfolio {overflow: hidden;}
.portfolio .section-title {position: absolute; color: var(--white-color); top: 0; left: 18px; z-index: 3;}
.portfolio .swiper-container-holder {margin: 0 -54px;}
.portfolio .portfolio-item:after,  {content: ''; position: absolute; opacity: 0.2; background: black; top: 0; right: 1px; left: 0; bottom: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; pointer-events: none;}
.portfolio .portfolio-item img {height: 640px; object-fit: cover;}
.portfolio .portfolio-content {display: flex; flex-direction: column; color: var(--white-color); position: absolute; bottom: 40px; left: 40px; right: 40px; z-index: 100; text-align: left; text-shadow: 2px 2px 3px rgb(0 0 0 / 75%)}
.portfolio .portfolio-item a {display: block;}
.portfolio .portfolio-item h3 {color: var(--white-color); word-wrap: break-word; margin: 0 0 15px; font-size: 28px; font-weight: 400;}
.portfolio .portfolio-item h4 {font-weight: 400; margin-top: 0; -webkit-transition: max-height 0.5s ease-out 0.15s; transition: max-height 0.5s ease-out 0.15s; max-height: 0; margin: 0; overflow: hidden; 
                                color: var(--main-color); text-shadow: 0 0 5px #0404047a;}
.portfolio .portfolio-item span {display: inline-flex; overflow: hidden; max-width: 0; -webkit-transition: max-width 0.5s ease-out; transition: max-width 0.5s ease-out; font-weight: 400; white-space: nowrap;}
.portfolio .swiper-wrapper {z-index: 2!important;}
.portfolio .portfolio-item a:hover span, .portfolio .swiper-slide-next a span {max-width: 280px;}
.portfolio .portfolio-item a:hover h4, .portfolio .swiper-slide-next a h4 {max-height: 58px; height: auto;}
.portfolio .swiper-slide-next a:after {/*background: #0000002e;*/ background: linear-gradient(360deg, #000000d1, 20%, transparent);}


.why .why-item {height: 100%; display: flex; flex-direction: column;}
.why .col-md-4:nth-child(2) .why-item{padding: 0 10%; border-left: 1px solid #000; border-right: 1px solid #000;}
.why .col-md-4:nth-child(3) .why-item {padding-left: 10%;}
.why h3 {font-weight: 400;}
.why p {font-size: 17px; font-weight: 300; color: #ffffff80; margin-bottom: 20px;}
.why p > span {margin-top: 16px; display: block;}
.why a {font-weight: 600; margin-top: 30px; display: block; color: #fff; display: flex; margin-top: auto;}
.why .why-item svg {height: auto; max-height: 70px; fill: var(--main-color);}


.about-block .why-item {display: flex; flex-direction: column;}
.about-block .why-item svg {width: 70px; max-height: 70px; fill: var(--main-color);}



.reference .portfolio-item {padding: 0;}
.reference .portfolio-item img {height: 600px;} 


.gallery .hero-banner {max-height: 500px; width: 100%; left: 0; padding-right: 0; padding-left: 0; overflow: hidden; z-index: 3;}
.gallery .hero-banner .image-content:after {background: -webkit-gradient(linear,left top,left bottom,from(rgba(46,46,56,70%)),to(#000028)); background: linear-gradient(180deg,rgb(46 46 56 / 70%) 0%,#000028 100%);}
.gallery .hero-banner .image-content img {max-height: 500px;}
.gallery .text-content h1 {color: var(--main-color); text-align: left; font-size: 40px; font-weight: 400;}
.gallery .text-content h2 {display: flex; align-items: center; font-size: 22px; letter-spacing: 1px; font-weight: 400;}
.gallery .text-content h2 svg {fill: var(--main-color); width: 30px; height: 24px; margin-right: 5px;}
.gallery .entry-content {font-size: 16px; font-weight: 300; letter-spacing: 0.1px;}

.gallery .slider .swiper-slide a {display: flex; border-radius: 25px; overflow: hidden;}
.gallery .slider .swiper-container, .gallery .slider .swiper-slide {border-radius: 25px;}
.gallery .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 30px; display: flex; flex-direction: column; right: 20px; left: auto; width: auto;}
.gallery .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 4px 0; width: 13px; height: 13px; background-color: var(--main-color); border-radius: 0;}

.gallery .theme-list ul:has(ul) {border-left: 0;}
.gallery .theme-list ul:has(ul) > li {margin-bottom: 16px;}
.gallery .theme-list ul ul {margin-left: 0px;}


.sistemi-i-resenja .section-title {color: var(--main-color);}


.theme-list ul {list-style: none; border-left: 1px solid var(--main-color); padding-left: 20px; margin-left: 30px;}
.theme-list ul > li {position: relative;}
.theme-list ul > li:before {content: ''; position: absolute; left: -20px; top: 9px; display: block; width: 6px; height: 1px; background: var(--main-color);}


.prev-next {overflow: hidden;}
.prev-next > .row:after {content: ''; display: block; position: absolute; width: 1px; height: 100%; background-color: #c4c4cd; bottom: 0; left: calc(50% - 1px);}
.prev-next a {display: block; transition: background-color 0.3s;}
.prev-next a:hover {background-color: #eaeaf2;}
.prev-next .component-left {padding-right: 0;}
.prev-next .component-right {padding-left: 0;}
.prev-next .component-left a {padding-left: 68px; height: 100%;}
.prev-next .component-right a {padding-right: 68px; height: 100%;}
.prev-next .component-content .component-text {padding: 0 10%;}
.prev-next .component-left .component-text {padding: 0 1% 0 10%;}
.prev-next .component-right .component-text {padding: 0 10% 0 1%;}
.prev-next .component-content h5 {font-size: 30px; line-height: 36px; margin: 10px 0 0; display: inline-block; border: 0; font-weight: 300; color: var(--dark-color);}
.prev-next .component-content p {line-height: 22px; color: #747480; margin: 0; font-size: 15px; font-weight: 300;}
.prev-next .arrow-slide {position: relative; top: auto; right: auto; background: var(--dark-color); -webkit-transition: transform 0.3s; transition: transform 0.3s;}
.prev-next .component-left .arrow-slide {transform: rotateY(-180deg);}
.prev-next .component-left a:hover .arrow-slide {transform: translateX(-10px) rotateY(-180deg);}
.prev-next .component-right a:hover .arrow-slide {transform: translateX(10px);}


.static .static-intro, .shop .static-intro, .search .static-intro, .news .static-intro {margin-top: 60px; font-weight: 300;}
.static .static-intro p {font-size: 20px; line-height: 30px; color: var(--white-color); margin: 30px 0 80px; max-width: 70%; font-weight: 300;}
.white-theme .static-intro p {color: var(--dark-color);}
.static .static-intro-columns p {font-size: 18px;}
.static .static-intro-columns span {margin: 30px 0 20px; display: block; line-height: 30px; font-size: 18px; font-weight: 300;}
.static .static-intro-columns ul li {padding-bottom: 6px;}

.dark-theme a {color: #fff;}


.img-box-wrap .img-right-wrap {padding-left: 0;}
.img-box-wrap .img-left-wrap {padding-right: 0;}
.img-box-wrap .img-wrap img {width: 100%; height: auto; object-fit: cover; object-position: bottom; z-index: 1;}
.img-box-wrap .text-content {padding: 70px 15%; font-size: 17px; font-weight: 300;}
.img-box-wrap .overlay {height: 100%;}
.img-box-wrap .overlay:after {background: linear-gradient(180deg,transparent 0%, #0000287a 100%); z-index: 1;}
.img-box-wrap .overlay:hover:after {}
.img-box-wrap img.brand-logo, img.brand-logo {position: absolute; bottom: 0; width: 200px;  right: 30px; height: auto;}
.logstrup-logo {filter: invert(1);}


.services {padding-bottom: 50px;}
.service-item {overflow: hidden;}
.service-item .img-wrap {display: flex; height: 320px;}
.service-item .img-wrap img {object-fit: cover; }
.service-item .service-text {position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; color: var(--white-color); z-index: 2; text-align: left;}
.service-item h3 {line-height: 26px; margin: 0 0 8px; overflow: hidden; font-weight: 400; font-size: 26px;}
.service-item span {font-weight: 600;}

.object-center {height: 100%;}
.object-center img {object-fit: contain!important; object-position: center!important;}

.one-news.news-template-short2 .imgdiv {margin-bottom: 0; max-height: 300px; height: 300px; box-shadow: 0 0 20px #0000000f;}
.one-news.news-template-short2 img {object-fit: cover; height: 100%;}


.one-news .news-text a h2 {color: var(--dark-color); font-weight: 500; font-size: 20px; line-height: 28px; border-bottom: 1px solid transparent; display: inline-block;}
.one-news .news-text p {line-height: 26px; color: var(--dark-color); clear: both; margin: 0; font-weight: 300; font-size: 17px;}
.one-news .news-time {font-size: 16px;}
.one-news .news-time span {font-weight: 300; display: inline-block; margin-right: 8px;}
.one-news .news-time span:after {content: "|"; padding-left: 4px;}
.one-news .news-time a {font-weight: 500; color: var(--dark-color); position: relative; border-bottom: 1px solid transparent;}
.threeDot-box {position: absolute; bottom: 20px; left: 20px; pointer-events: none; z-index: 2;}
.threeDot-box span {display: block; float: left; width: 13px; height: 13px; background-color: var(--main-color); margin-right: 11px; margin-top: 6px;}
.one-news .news-time a:hover, .one-news .news-text a h2:hover {border-bottom-color: var(--dark-color);}


.news-one .subtitle {color: #dddddd; font-size: 18px;}
.news-one .news-estimation {font-size: 14px; color: #878787;}
.news-one .main-content .social-circle {margin: 0;}
.news-one .main-content .social-circle a {border-bottom: 0;}
.news-one .main-content .social-circle i {font-size: 22px;}
.news-one .bottom {padding-bottom: 50px; display: inline-block;}
.news-one .prev-next .component-content h5 {font-size: 20px; line-height: 28px;}



.brands a {display: flex;}
.brands a img {height: 600px; object-fit: cover;}

.shop .breadcrumb, .productbrand .breadcrumb, .user-login .breadcrumb {background: transparent;}


:is(.tos, .informacije-o-placanju-i-isporuci, .politika-reklamacija, .odustanak-od-ugovora, .saobraznost-i-garancija, .politika-privatnosti-i-zastita-podataka) header {margin-bottom: 40px;}


.o-nama .team-item {margin-bottom: 70px;}


.kontakt .content a {color: #fff; font-size: 17px;}
.kontakt .content a:hover {text-decoration: underline;}
.kontakt .content h2 {font-size: 36px; font-weight: 300;}
.kontakt .content h4 {font-size: 24px; padding: 24px 0 10px; font-weight: 300;}
.kontakt .contact-info h2 {border-top: 1px solid #c4c4cd; margin-top: 0; padding-top: 20px;}
.kontakt .form-control {font-size: 16px; line-height: 28px; border: 1px solid #1a1a24; background: var(--white-color); border-radius: 0; height: 75px; color: white; padding: 25px 20px; -webkit-box-sizing: border-box; 
                box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100% !important; font-weight: normal; appearance: none; border-radius: 0; margin-bottom: 26px;}
.kontakt textarea.form-control {height: inherit;}
.kontakt .contact-form button {padding: 14px 27px;}
.kontakt .contact-form span {color: #ffffff9c; margin-bottom: 30px; display: block;}
.kontakt .contact-info {padding-left: 8%;}
.kontakt .contact-info ul {margin: 20px 0;}
.kontakt .contact-info ul > li {font-size: 17px; font-weight: 300; line-height: 1.6;}
.kontakt .contact-info i {margin-right: 8px; color: var(--main-color); font-size: 15px;}
.kontakt .contact-info ul > li svg {width: 15px; fill: var(--main-color); height: 15px; display: inline-flex; margin-right: 8px;}
.kontakt .contact-info ul.flex {gap: 8px; flex-wrap: wrap;}
.kontakt .contact-map iframe {max-width: 100%;}


.search .category .one-product img {aspect-ratio: unset;}


footer ul.social-circle {margin-top: 20px;}
footer .social-circle a .fa-linkedin {color: #c7c7c7; font-size: 40px; transition: color .15s;}
footer .social-circle a:hover {border-bottom: 0;}
footer .social-circle a:hover .fa-linkedin {color: var(--main-color);}
footer .signature {border-top: 1px solid #eaeaf1;}
footer .signature a {color: var(--dark-color); font-size: 13px;}
footer .signature .col-md-4.text-left {/*text-align: center;*/}

#anchor {scroll-margin-top: 100px;}

.search-box {border: none; top: 50%; transform: translateY(-50%); height: 50%;}
.search-box .input {color: var(--dark-color); border-radius: 0; border: 1px solid var(--dark-color);}

.orderby select {background: transparent;}






@media only screen and (min-width: 992px) {
    
    body:not(.homepage, .reference, .reference-u-inzenjeringu, .gallery, .novosti, .o-nama, .kontakt) header, body header:has:not(.static-intro) {margin-bottom: 40px;}
    
    .portfolio .arrow {opacity: 0;}
    .portfolio:hover .arrow {opacity: 1;}
    
    .product-padding {padding: 50px;}
    
    .why .why-item svg {width: 70px; max-height: 70px;}
    
    .gallery .slider {padding-left: 100px;}
    .gallery .slider .swiper-slide img {min-height: 500px;}
    
    footer {max-width: 1920px; margin-left: auto; margin-right: auto;}
    footer .details {background: #fff; color: var(--dark-color); border-top: 1px solid #eaeaf1; padding: 80px 0 75px 0;}
    footer .logo-wrap span {display: block; color: #747480;}
    footer .footer-links {gap: 30px;}
    footer .footer-links ul {gap: 30px;}
    footer .footer-links li a {color: var(--dark-color); border-bottom: 1px solid; border-bottom-width: 1px; font-weight: 600; font-size: 15px;}
    footer .footer-links li a:hover {color: var(--dark-color); font-weight: 600; border-bottom-width: 2px;}
    footer .footer-service ul {text-align: left;}
    footer .footer-service ul a {font-size: 14px; font-weight: 400; border-bottom: none;}
    footer .footer-service ul a:hover {font-weight: 400; color: var(--dark-color); border-bottom: 1px solid var(--dark-color);}
    footer .footer-service ul a:before {display: none;}
    footer .footer-service ul a {font-weight: 500; font-size: 15px; padding: 4px 0; display: inline-flex; border: 1px solid transparent;}
    footer .footer-service ul a:hover {font-weight: 500;}

    footer .credit-cards {margin-bottom: 0; margin-top: auto; text-align: right;}
    footer .visa {height: 30px; padding: 0 5px;}
}

@media only screen and (min-width: 1200px) {
    
    header .wsmenu {width: 100%;}
    header .wsmenu > .wsmenu-list > li > a.navtext {color: var(--white-color); padding: 32px 13px; font-size: 13px; display: flex; align-items: center; white-space: nowrap; line-height: 20px;}
    header .wsmenu > .wsmenu-list > li > a.navtext:after {content: ''; width: 0; height: 4px; background: var(--main-color); position: absolute; left: 0; bottom: 0px; transition: width .4s ease;}
    header .wsmenu > .wsmenu-list > li > a.navtext:hover:after, header .wsmenu > .wsmenu-list > li.active > a.navtext:after {width: 100%;}
    header .wsmenu > .wsmenu-list > li > .navtext > span+span:after {font-size: 13px; color: var(--main-color);}
    header .wsmenu.bottom-nav > .wsmenu-list > li > a.navtext {padding: 0;}
    
    header .navbar-nav {text-align: left; margin-top: 0;}
    header #nav-section .navbar-default .navbar-nav > li {position: relative;}
            header #nav-section .navbar-default .navbar-nav > li > a {color: var(--white-color); padding: 32px 8px; font-size: 13px; display: flex; align-items: center; white-space: pre-wrap;}
    /*header #nav-section .navbar-default .navbar-nav > li > a:before {content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background-color: var(--main-color); display: none;}*/
    header #nav-section .navbar-default .navbar-nav > li:after {content: ''; width: 0; height: 4px; background: var(--main-color); position: absolute; left: 0; bottom: 0px; transition: width .4s ease;}
    header #nav-section .navbar-default .navbar-nav > li:hover:after, header #nav-section .navbar-default .navbar-nav > li.active:after {width: 100%;}
    
    header #nav-section .navbar-default .navbar-nav > li > a:hover:before {display: block;}
    header .solid-menus .no-bg li.active a {font-weight: inherit; color: var(--main-color);}
    header .navbar-nav > li > .dropdown-menu, .wsmenu>.wsmenu-list>li:hover>ul.sub-menu {background: var(--dark-color); top: 100%; border: none;}
    header .navbar-nav > li > .dropdown-menu a, .wsmenu>.wsmenu-list>li:hover>ul.sub-menu a {color: var(--white-color); padding: 12px 15px;}
    header .navbar-nav > li > .dropdown-menu a:hover, .wsmenu>.wsmenu-list>li:hover>ul.sub-menu a:hover {background: transparent; color: var(--main-color);}
    header .logo img {max-height: 45px;}
    
    header .menu-cart ul li {padding: 10px;}
    header .menu-cart ul li a {color: var(--white-color); display: flex;}
    header .menu-cart ul li svg {fill: var(--white-color); height: 26px; width: 26px; transition: fill .1s ease;}
    header .menu-cart ul li.search-icon {width: auto; position: relative; padding-right: 20px;}
    header .menu-cart ul li.search-icon:before {content: ''; height: 76%; width: 1px; background: #585861; position: absolute; display: block; right: 0; top: 5px;}
    header .menu-cart ul li.search-icon svg {width: 28px; height: 28px;}
    header .menu-cart ul li.profile svg, header .menu-cart ul li.wishlist-icon svg {width: 26px; height: 24px;}
    header .menu-cart ul li.cart-container svg {transform: rotateY(-180deg);}
    header .menu-cart ul li.lang {padding-left: 20px; position: relative;}
    header .menu-cart ul li.lang:before {content: ''; height: 76%; width: 1px; background: #585861; position: absolute; display: block; left: 0; top: 5px;}
    header .menu-cart ul li svg:hover {fill: var(--main-color);}
    header .menu-cart ul li ul.user-menu-dropdown {left: -72px; top: 64px;}
    header .menu-cart ul li ul.user-menu-dropdown a {color: var(--white-color);}
    header .menu-cart ul li ul.user-menu-dropdown {background: var(--dark-color); border-radius: 0px; border: none;}
    header .menu-cart ul li ul.user-menu-dropdown .vrh {background-color: var(--dark-color); padding: 5px; border-top-left-radius: 0; right: 14%; border-top: 1px solid var(--main-color); border-left: 1px solid var(--main-color);}
    header .menu-cart ul li ul.user-menu-dropdown a:hover {color: var(--main-color);}
    header .dropdown-menu>li>a:focus {background: transparent;}
    
    header .middle .badge {right: -2px; top: 1px; border: 1px solid var(--white-color); color: var(--white-color); background-color: transparent;}
    
    header #nav-section nav .navbar-nav li a > svg {width: 12px; height: 12px; fill: var(--main-color); transform: rotate(90deg); margin-left: 10px; transition: transform .2s ease-in-out;}
    
}

@media only screen and (min-width: 1200px) and (max-width: 1279px) {
    header .wsmenu>.wsmenu-list>li.pocetna {display: none;}
    header .wsmenu>.wsmenu-list>li>.navtext>span+span {display: none;}
    header .wsmenu>.wsmenu-list>li>ul.sub-menu>li>a {font-size: 12px;}

    
}

@media only screen and (min-width: 1280px) and (max-width: 1399px) {
    header .pocetna {display: none;}
    header .wsmenu > .wsmenu-list > li > a.navtext, header #nav-section .navbar-default .navbar-nav > li > a {padding: 32px 10px;}
    header .wsmenu > .wsmenu-list > li > a.navtext > svg {margin-left: 4px;}
    header .wsmenu>.wsmenu-list>li>ul.sub-menu>li>a {font-size: 12px;}
    header .menu-cart ul li.search-icon {padding-right: 0;}
    header .menu-cart ul li.search-icon:before {right: -10px;}
    
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
    header .pocetna {display: none;}
    header .wsmenu > .wsmenu-list > li > a.navtext, header #nav-section .navbar-default .navbar-nav > li > a {padding: 32px 15px;}
    header .wsmenu>.wsmenu-list>li>ul.sub-menu>li>a {font-size: 12px;}
}

@media only screen and (min-width: 1500px) and (max-width: 1549px) {
    header .wsmenu > .wsmenu-list > li > a.navtext, header #nav-section .navbar-default .navbar-nav > li > a {padding: 32px 16px; font-size: 14px;}
}

@media only screen and (min-width: 1550px) and (max-width: 1629px) {
    header .wsmenu > .wsmenu-list > li > a.navtext, header #nav-section .navbar-default .navbar-nav > li > a {padding: 32px 19px; font-size: 14px;}
}

@media only screen and (min-width: 1630px) {
    header .wsmenu > .wsmenu-list > li > a.navtext, header #nav-section .navbar-default .navbar-nav > li > a {padding: 32px 22px; font-size: 14px;}
}











@media only screen and (max-width: 1199px) {
    
    .container-fluid {padding: 0px 44px;}
    .border {padding-top: 60px; overflow: hidden;}
    
    header .wsmobileheader {background: var(--dark-color); z-index: 103;}
    header .wsmobileheader > .smllogo {height: auto; display: flex; justify-content: center; align-items: center; height: 100%; padding: 0;}
    header .wsmobileheader > .smllogo img {width: auto;}
    header .wsanimated-arrow span, .wsanimated-arrow span:before, .wsanimated-arrow span:after {background: var(--main-color);}
    header .wsmenu > .wsmenu-list > li > a {color: var(--dark-color);}
    header .wsmenu > .wsmenu-list > li.sub-menu-parent .navtext {padding-right: 65px;}
    header .wsmenu > .wsmenu-list > li > .wsmenu-click {border-left: none; background: var(--main-color);}
    header .wsmenu > .wsmenu-list > li > .wsmenu-click i:before {border-color: #fff}
    header .wsmenu > .wsmenu-list > li > ul.sub-menu li a {color: var(--dark-color);}
    header .wsmobileheader .cart-xs, header .wsmobileheader .search-icon {position: absolute; top: 14px;}
    header .wsmobileheader .cart-xs {display: inline-block; right: 45px; z-index: 102; width: auto;}
    header .wsmobileheader .cart-xs svg, header .wsmobileheader .search-icon a svg {height: 30px; width: 30px; fill: #fff;}
    header .wsmobileheader .cart-xs .badge, header .wsmenu>.wsmenu-list>li>.navtext>span.badge {border-radius: 10px; right: auto; left: -11px; top: 17px; border: 1px solid var(--white-color); color: var(--white-color); background-color: transparent; font-size: 11px; padding: 0; position: absolute;
                                             display: flex; padding: 0; width: 18px; height: 18px; justify-content: center; align-items: center;}
    header .wsmenu>.wsmenu-list>li>.navtext>span.badge {border-color: var(--dark-color); color: var(--main-color); position: relative; display: inline-flex; top: auto; left: auto; margin-left: 10px; border: none; border-radius: 0; font-size: 18px;
                                                        height: auto; width: auto; font-weight: 500;}
                                                        
    header .wsmenu > .wsmenu-list > li.cart-xs, header .wsmenu > .wsmenu-list > li.wishlist-cart {display: flex; align-items: center; justify-content: end;}
    
    header .wsmobileheader .search-icon {right: 15px;}
    header .wsmobileheader .search-icon a svg {height: 35px; fill: var(--main-color);}
    
    header .wsmenu > .wsmenu-list > li > .navtext>span {display: none;}
    
    .homepage .hero-banner .swiper-container-holder {height: 400px!important; width: calc(100% + 88px); left: -44px;}
    .homepage .hero-banner .swiper-container-holder .image-content, .homepage .hero-banner .swiper-slide > div {height: 100%;}
    .homepage .hero-banner .image-content:after {background: linear-gradient(180deg,rgb(46 46 56 / 20%) 0%,#000028 100%);}
    .homepage .hero-banner .text-content {left: 44px; width: 90%;}
    .homepage .hero-banner .featured-title {font-size: 38px;}
}

@media only screen and (max-width: 991px) {
    
    body:not(.homepage, .reference, .gallery, .novosti, .o-nama, .kontakt) header, body header:has:not(.static-intro) {margin-bottom: 20px;}
    .container-fluid {padding: 0px 44px;}
    
    .portfolio .arrow {opacity: 1;}
    .portfolio:hover .arrow {opacity: 1;}
    
    .product-padding {padding: 0 30px 30px;}
    
    .service-item {margin-bottom: 30px; aspect-ratio: 1/1.4;}
    
    .team .team-item {min-height: 300px; margin-bottom: 30px;}
    
    .why .why-item svg {width: 60px;}
    .counter-box-title {text-align: center; margin-bottom: 40px;}
    .counter-box .value {font-size: 40px;}

    .gallery .hero-banner .image-content img {max-height: 400px;}
    .gallery .hero-banner .text-content {left: 20px;}
    .gallery .text-content h1 {font-size: 36px;}
    .gallery .slider {padding-left: 0; margin-top: 40px;}
    
    div.product-list-3 .one-product:nth-of-type(2n+1) {clear: both;}
    div.product-list-3 .one-product:nth-of-type(3n+1) {clear: none;}
    
}


@media only screen and (min-width: 768px) {
    
    .why p {max-width: 90%;}
    
    .prev-next .component-content {padding: 80px 0;}
    
    footer .details {padding: 60px 0 30px 0;}
    footer a:hover, footer ul li a:hover {color: var(--dark-color); border-bottom: 1px solid var(--dark-color);}
    .credit-cards a:hover {border-bottom: 0;}
    
    .product .vat-info {text-align: right;}
}

@media only screen and (max-width: 767px) {

    .container-fluid {padding: 0px 18px;}
    .flex-column-xs {flex-direction: column;}
    
    .p-t-100 {padding-top: 50px!important;}
    .p-b-100 {padding-bottom: 50px!important;}
    
    .homepage .hero-banner .swiper-container-holder {width: calc(100% + 36px); left: -18px;}
    .homepage .hero-banner .text-content {left: 0; padding: 0 20px;}
    .homepage .hero-banner .featured-title {font-size: 30px; line-height: 1.15; max-width: unset;}
    
    .service-item {margin-bottom: 30px; aspect-ratio: 1/1.3;}
    
    .portfolio .swiper-container-holder {margin: 0;}
    .portfolio {padding: 0 15px;}
    .portfolio .portfolio-item img {width: 100%;}
    .portfolio .swiper-slide-active a span {max-width: 280px;}
    .portfolio .swiper-slide-active a h4 {max-height: 58px; height: auto;}
    .portfolio .swiper-slide-active a:after {background: #0000002e;}
    .portfolio .swiper-slide-next a span {max-width: 0;}
    .portfolio .swiper-slide-next a h4 {max-height: 0; height: auto;}
    .portfolio .swiper-slide-next a:after {background: #0000007a;}
    
    .why .why-item, .why .col-md-4:nth-child(2) .why-item, .why .col-md-4:nth-child(3) .why-item {padding: 0 33px; margin-bottom: 40px;}
    .why p {max-width: 100%;}

    .home-partners .flex-xs {flex-direction: column;}
    .home-partners .partner-item .img-wrap {max-width: 50%; height: auto; aspect-ratio: 2 / 1.3; margin: 20px auto; padding: 15px;}
    
    .prev-next {padding-left: 15px; padding-right: 15px;}
    .prev-next .component-left a {padding-left: 0;}
    .prev-next .component-right a {padding-right: 0;}
    .prev-next .component-content {padding: 40px 0; flex-direction: column; align-items: center; justify-content: center;}
    .prev-next .component-content h5 {font-size: 26px; margin-bottom: 20px;}
    .prev-next .component-content p {text-align: center;}
    .prev-next .component-left .arrow-slide {order: 2;}
    
    .product .product-intro {height: 140px;}
    .product .product-intro a {top: 25px; left: calc(50% - 60px);}
    .product .product-intro a > img {width: 120px;}
    .product .mobile-slideshow svg {right: 15px;}
    .product .swiper-slide img {padding: 40px;}
    .product .addtofav.inline .checkbox-inline label {display: flex;}
    .product-details .cart-buttons {align-items: center; margin-bottom: 30px;align-items: flex-start;}
    .product-details .price-holder {margin-top: 30px; text-align: left;}
    .product .price-holder .price, .product .vat-info {text-align: left;}
    .product-details .add-to-cart, .product-details .go-to-checkout, .product-details .addtofav label {/*width: 200px;*/}
    .product-details .go-to-checkout {margin-top: 0;}
    .sp-quantity .sp-input input {width: 52px;}
    
    .product .countdown-timer-wrapper {margin: 20px auto 20px 0;}
    
    .img-box-wrap .img-wrap {order: 2;}
    .img-box-wrap .text-content {padding: 60px 10%;}

    .news-one h1 {font-size: 26px;}
    
    .static .static-intro p {max-width: 95%; font-size: 18px; margin-top: 30px;}
    
    .kontakt .contact-form {padding-left: 30px; padding-right: 30px;}
    .kontakt .contact-info {padding-left: 15px;}
    
    footer ul {padding-top: 0;}
    footer .footer-links {font-size: 18px; font-weight: 600; margin-top: 20px;}
    footer .footer-links a {font-size: 15px; font-weight: 400;}
    footer .credit-cards {margin: 0; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
    footer .visa {height: 32px;}
    footer .logo {display: block; margin: 25px auto 10px;}
    footer .footer-contact {margin-bottom: 25px;}
}


@media only screen and (max-width: 420px) {
    header .wsmobileheader > .smllogo img {max-height: 40px; width: auto; height: auto;}
    header .wsmobileheader .cart-xs svg, header .wsmobileheader .search-icon a svg {width: 27px;}
    .prev-next .component-content h5 {font-size: 22px;}
    header .wsmobileheader .cart-xs .badge, header .wsmenu>.wsmenu-list>li>.navtext>span.badge {width: 16px; height: 16px; left: -8px;}
}


@media only screen and (max-width: 360px) {
    header .wsmobileheader > .smllogo img {max-height: 38px;}
    header .wsmobileheader .cart-xs svg, header .wsmobileheader .search-icon svg {width: 24px;}
    .prev-next .component-content h5 {font-size: 20px;}
}



.theme-button {font-size: 14px; line-height: 18px; padding: 14px 27px; text-align: center; background: transparent; color: white; border-color: white; border: 1px solid #fff; border-radius: 0; transition: color 0.3s,background 0.3s; -webkit-transition: color 0.3s,background 0.3s;}
.theme-button:hover {background: var(--white-color); color: var(--dark-color);}

.zoom-transition {overflow: hidden; display: block;}
.zoom-transition img {transition: transform 0.6s ease-in-out,-webkit-transform 0.6s ease-in-out; width: 100%; aspect-ratio: unset;}
.zoom-transition:hover img {-webkit-transform: scale(1.05); transform: scale(1.05);}



@keyframes slideDown {
   0% {
       clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0);
       
 }
   
   100% {
       clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);
       
 }
}

.service-item {
   animation-name: slideDown;
   animation-duration: 1s;
   opacity: 1;
}

.home-portfolio article:nth-of-type(1) .portfolio-image {animation-delay: 100ms;}
.home-portfolio article:nth-of-type(2) .portfolio-image {animation-delay: 200ms;}
.home-portfolio article:nth-of-type(3) .portfolio-image {animation-delay: 300ms;}
.home-portfolio article:nth-of-type(4) .portfolio-image {animation-delay: 400ms;}