:root {
    --theme-color: #012D5C;
    --alt-color: #002C53; /*logo color*/
    --dark-color: #1a1919;
    --white-color: #f9f9f9;
    --theme-border-color: #00000026;
    --red-color: #EB1C2E;
}


/* reset */
.theme-color {color: var(--theme-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;}
.absolute {position: absolute;}
.w-100 {width: 100%;}
.p-r-0 {padding-right: 0!important;}
.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;}
.inline-flex {display: inline-flex;}
.container-fluid {}
::-moz-selection {color: #fff; background-color: var(--theme-color); -webkit-text-fill-color: initial; text-fill-color: initial;}
::selection {color: #fff; background-color: var(--theme-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(--theme-color); box-shadow: none;}
.underline {text-decoration: underline;}
header .search-box .input .button input {color: var(--theme-color);}
.navbar {border: none;}
header .solid-menus .no-bg li.active a {background: none;}
header .menu-cart a:hover {color: var(--theme-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, .cat-title {background: var(--theme-color);}
.product-details .go-to-checkout, .cart-checkout .okvir .editable {background: var(--alt-color); border-color: var(--alt-color);}
.cart-checkout .okvir .editable {border-bottom: 0;}
.addtofav.inline .fa-heart, .cart-checkout .okvir i, .cart-checkout .okvir h2 {color: var(--alt-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(--theme-color);}
.kontakt .btn {background: var(--theme-color);}
#noty_center_layout_container > li, #noty_topCenter_layout_container, #noty_topCenter_layout_container > li {background-color: var(--theme-color)!important;}
footer ul li a:hover {font-weight: inherit; color: var(--theme-color);}
footer ul li {opacity: 1;}
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(--theme-color);}
.news-template-short2 img:hover {transform: scale(1);}
.scrollToTop {background: var(--theme-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(--theme-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(--theme-color)!important;}
.checkout label:has(input) {cursor: pointer;}
a.no {color: var(--theme-color); font-size: 20px;}
label {font-weight: 400; margin-bottom: 0;}




body, h1, h2, h3, h4, h5, h6, p, a, li {font-family: 'Source Sans Pro', sans-serif;}
h2.section-title {text-transform: uppercase; font-size: 40px; margin-bottom: 60px; color: var(--theme-color);}

header .middle {padding: 30px 0; background: transparent;}
header .logo-wrap {}
header .logo-wrap img {max-height: 70px;}

header .middle-right img {max-height: 80px;}
header .header-lang {font-size: 20px;}



header .bottom {margin-bottom: 0; padding: 0; border-bottom: none;}
header .bottom .wsmenu > .wsmenu-list > li > a {text-transform: uppercase; font-size: 20px; padding: 16px 20px; font-weight: 600; color: var(--alt-color);}

.border-wrap {display: inline-block;}
.border-wrap:before {content: ''; position: absolute; left: -25px; top: calc(50% - 15px); width: 1px; height: 30px; background: var(--theme-color);}



.main-banners {overflow: hidden;}
.main-banners .banner-wrapper {text-align: center; border-right: 1px solid #073358d1;}
.main-banners .col-md-3:last-child .banner-wrapper {border-right-color: #002c53;}
.main-banners .banner-wrapper .banner-link {position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 9;}
.main-banners .banner-wrapper .banner-bg {overflow: hidden; transition: opacity 450ms;}
.main-banners .banner-wrapper .banner-bg:after, .home-categories .category .product-holder .banner-bg:after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #000; z-index: 1; opacity: 0; transition: 450ms ease 0s;}
.main-banners .banner-wrapper:hover .banner-bg:after {opacity: 0.3;}
.main-banners .banner-wrapper .banner-bg img {transform: rotate(0deg) scale(1,1); transition: transform 400ms ease 0s; width: 100%; object-fit: cover; display: block;}
.main-banners .banner-wrapper:hover .banner-bg img {transform: rotate(3deg) scale(1.14);}

.main-banners .banner-wrapper .box-content {position: absolute; z-index: 2; display: table; transition: 300ms ease 0s; left: 0; right: auto; top: auto; bottom: 0; width: 100%; text-align: left;}
.main-banners .banner-wrapper .box-content a {font-size: 24px; display: inline-block; min-width: 200px; line-height: 50px; padding: 0 25px; text-transform: none; color: #fff; font-weight: 600; transition: transform .2s ease-out;}
.main-banners .banner-wrapper .box-content span {transform: translateY(30px); display: block; padding: 0 25px; position: absolute; left: 0; bottom: 0; color: #ffffffb0; transition: transform .25s ease-out .1s;}
.main-banners .banner-wrapper:hover .box-content a {transform: translateY(-30px);}
.main-banners .banner-wrapper:hover .box-content span {transform: translateY(-10px);}


.home-news img {min-height: 460px;}
.home-news ul {max-height: 396px; overflow-y: scroll; padding-right: 20px; scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: var(--theme-color) #ddd; }
.home-news ul::-webkit-scrollbar {width: 6px!important; background-color: #F5F5F5!important;}
.home-news ul::-webkit-scrollbar-thumb {background-color: var(--theme-color);}
.home-news ul::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
.home-news ul li {padding: 5px 10px; border: 1px solid; margin-bottom: 20px;}
.home-news ul li > a {display: inline-block;}
.home-news ul li > a > h3 {color: var(--alt-color); text-transform: uppercase; font-size: 24px;}



.global h1 {text-transform: uppercase; font-size: 40px; margin-bottom: 60px; color: var(--theme-color);}
.global p {font-size: 20px; color: #9d9d9d; line-height: 1.3; max-width: 70%; margin: 0 auto; display: inline-block;}
.global .global-item {border-right: 1px solid var(--theme-border-color); display: flex; flex-direction: column; align-items: center; min-height: 220px;}
.global .global-item h3 {color: var(--alt-color); font-weight: 400; text-transform: capitalize;}
.global .global-item img {width: auto; height: 100px;}
.global .global-item.countries img {height: 120px;}
.global .global-item svg {height: 100px; max-width: 50%; fill: var(--theme-color);}
.global .global-item span {display: block; font-size: 40px; margin-top: auto; margin-bottom: 0; font-weight: 700; color: var(--alt-color);}



.location .top-border {border-top: 1px solid var(--theme-border-color);}
.location .one-location {min-height: 100px}
.location h4 {position: relative; font-size: 22px; text-transform: uppercase; color: var(--alt-color); padding-left: 42px; text-align: left;}
.location h4:before {background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M256,0C149.3,0,64,85.3,64,192c0,36.9,11,65.4,30.1,94.3l141.7,215v0c4.3,6.5,11.7,10.7,20.2,10.7c8.5,0,16-4.3,20.2-10.7 l141.7-215C437,257.4,448,228.9,448,192C448,85.3,362.7,0,256,0z M256,298.6c-58.9,0-106.7-47.8-106.7-106.8 c0-59,47.8-106.8,106.7-106.8c58.9,0,106.7,47.8,106.7,106.8C362.7,250.8,314.9,298.6,256,298.6z'/%3E%3C/svg%3E");
                    content: ''; position: absolute; left: 0; width: 30px; height: 60px; display: inline-block; background-repeat: no-repeat; background-size: 30px; position: absolute;}



.contact-map {background-repeat: no-repeat; background-size: cover; background-position: top left; height: 800px;}
.contact-map .contact-form {border-radius: 16px; padding: 20px 20px 120px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin-top: -35px; overflow: hidden;}
.contact-map .contact-form h3 {font-weight: 400; text-transform: uppercase; margin-bottom: 50px;}
.contact-map .contact-form h3, .contact-map .contact-form button {z-index: 1; position: relative;}
.contact-map .contact-form input {border: none; border-bottom-width: 1px; border-bottom-style: solid; box-shadow: none; margin-bottom: 30px;}
.contact-map .contact-form textarea {border-width: 1px; border-style: solid;}
.contact-map .contact-form input, .contact-map .contact-form textarea {font-size: 20px; border-color: var(--theme-border-color);}
.contact-map .contact-form:before {content: ''; position: absolute; bottom: 20px; right: 20px; width: 300px; height: 70px; box-shadow: 0 0 0 9999px rgb(255 255 255); border-radius: 12px;}
.contact-map .contact-form .btn-send {position: absolute; bottom: 20px; right: 20px; width: 300px; height: 70px; background: transparent; border: none; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 12px; transition: .3s;}
.contact-map .contact-form .btn-send > span {color: #fff; text-transform: uppercase; margin-right: 30px; display: inline-block; font-size: 20px;}
.contact-map .contact-form .btn-send > svg {height: 40px; fill: #fff; transition: transform .25s ease-out;}
.contact-map .contact-map-bottom {position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 0 0 10px;}
.contact-map .map-bottom-bg {background: #002c53; color: #fff;}
.contact-map .contact-map-bottom span {}
.contact-map .contact-map-bottom ul {}
.contact-map .contact-map-bottom ul > li {margin-right: 16px; position: relative;}
.contact-map .contact-map-bottom ul > li:after {content: ''; position: absolute; right: -10px; top: calc(50% - 3px); width: 4px; height: 4px; background: #ffffff9c; border-radius: 50%; display: inline-block;}
.contact-map .contact-map-bottom ul > li:last-child:after {display: none; visibility: hidden;}
.contact-map .contact-map-bottom ul > li, .contact-map .contact-map-bottom span {color: #ffffff9c;}
.contact-map .contact-map-bottom h2 {font-weight: 400; font-size: 40px; letter-spacing: 1px;}
.contact-map .contact-map-bottom h2 > span {font-weight: 700;}

.contact-map .contact-form .btn-send:hover {background: #002c537d;}
.contact-map .contact-form .btn-send:hover svg {transform: translateX(20px);}





.contact-info .contact-info-box {background: #f2f2f2; padding: 20px; color: var(--alt-color); min-height: 200px; display: flex; flex-direction: column;}
.contact-info .contact-info-box svg, .contact-info .contact-info-box img {width: 100px; height: 100px; margin-top: -70px; background: #fff; padding: 12px; border-radius: 50%; stroke: var(--alt-color);}
.contact-info .contact-info-box ul {margin-top: 10px;}
.contact-info .contact-info-box ul > li {font-size: 18px;}
.contact-info .contact-info-box h4 {margin-bottom: 0; margin-top: auto; font-size: 30px; font-weight: 700; color: var(--alt-color);}



footer .details {background-color: #f6f6f6; font-size: 16px;}
footer .details a {font-size: 16px;}
footer ul li a:hover {font-weight: inherit; color: inherit;}
footer ul li a:before {display: none;}
footer .details p.title {color: var(--theme-color); text-align: left; text-transform: uppercase; margin: 0; font-size: 20px; font-weight: 600; line-height: 20px; padding-bottom: 20px;}
footer .details p.title:before {display: none;}

footer .footer-newsletter .form-row {margin: 0 0 0.5em; width: 100%;}
footer .footer-newsletter .input-email {display: block; font-size: 14px; line-height: 21px; font-weight: 400; position: relative; height: 45px; padding: calc(((45px - 21px)/ 2) - 1px) 10px; margin: 0; vertical-align: middle; 
                                        width: 100%; text-transform: none; -webkit-appearance: none;background: 0 0; border: 0; border-radius: 0; border-bottom: 1px solid #a7a7a7; color: #000; padding-left: 0;}
footer .logo {display: block; margin: 25px 20px 20px 0; }
footer .social-icons li {margin-right: 20px; background: 0 0; border: none; display: inline-block;}
footer .social-icons li a i {font-size: 22px; color: var(--theme-color);}
footer .social-icons.flex-row-center {justify-content: flex-start;  margin: 15px 0;}
footer .signature a {color: inherit;}



.scrollToTop {bottom: 82px; animation: none; border-radius: 8px; right: 0;}


@media screen and (min-width: 768px){

    .global .col-md-5ths:last-child .global-item, .global .col-md-5ths:nth-child(5) .global-item {border-right: none;}

}


@media screen and (min-width: 992px){

    header .bottom .wsmenu > .wsmenu-list > li:first-child > a {padding-left: 0;}
}



@media screen and (max-width: 991px){
    
    body {margin-top: 60px;}
    header .wsmobileheader > .smllogo {display: flex; align-items: center; justify-content: flex-end; height: 100%;}
    header .wsmobileheader > .smllogo img {height: 46px; margin-right: 15px; margin-left: 10px;}

}


@media screen and (max-width: 767px){
    
    h2.section-title, h1, .global h1 {font-size: 32px;}
   
    
    .home-news img {min-height: unset; height: auto; margin-bottom: 20px;}
    .home-news ul {max-height: 300px;}
    .home-news ul li > a > h3 {font-size: 20px;}
    
    
    .global .global-item {margin-bottom: 30px;}
    .global .global-item h3 {font-size: 24px;}
    .global .global-item span {font-size: 32px;}
    .global .global-item.no-border-xs {border-right: none;}
    
    .contact-map {margin-bottom: 100px;}
    .contact-map .contact-map-bottom {bottom: -100px;}
    .contact-map .contact-map-bottom ul > li {padding-left: 16px;}
    .contact-map .contact-map-bottom ul > li:after {right: auto; left: 0;}
    
    .contact-info {padding-bottom: 0px!important;}
    .contact-info-box {margin-bottom: 60px;}
    .contact-info .contact-info-box svg, .contact-info .contact-info-box img {width: 80px; height: 80px;}

    footer .footer-logos {justify-content: center;}
    footer .footer-newsletter {max-width: 70%; margin: 0 auto;}
    footer .signature .col-md-6 {text-align: center!important; font-size: 14px;}
}

@media screen and (max-width: 420px){
    .footer-newsletter {max-width: 90%;}
}



@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
.slideInUp{animation-name:slideInUp;}
.slideInDown{animation-name:slideInDown}
.animated-slide {-webkit-animation-duration: 1.25s; animation-duration: 1.25s; -moz-animation-duration: 1.25s;
                    -webkit-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-fill-mode: both; 
                    animation-delay: 300ms; -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms;}


.banner-combo2 .insider-left {background: #333;color: #fff; margin-left: -180px;padding: 15px 35px; position: relative;z-index: 2;}
.banner-combo2 p.big-text { font-size: 33pt; line-height: 50px; text-transform: uppercase; margin: 30px 0 40px 0;}
.banner-combo2 .col-md-8 { overflow: hidden; }
@media only screen and (max-width: 767px) {
    .banner-combo2 .insider-left { margin-left: 0px; margin-top: -250px;}
}




