/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Root */

:root{
    --main-light-green: #00D62B;
    --main-dark-green: #00AA0B;
    --main-red: #F03C37;
    --main-black: #1A181C;
    --main-light-grey: #F3F3F3;
    --main-dark-grey: #A5A5A5;
    --main-background-grey: #F6F6F6;
}

/* Dimensies & Fonts */

.container, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl, 
.l-wrapper, 
.l-wrapper--boxed, 
main>.notifications-container{
max-width: 1500px;
}

.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6, 
.products-section-title, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6{
font-family: 'Open Sans', sans-serif;
}

/* Algemeen */

body{
color: var(--main-black);
background: #ffffff;
}

a,
.btn-link{
color: var(--main-red);
}

.text-primary{
color: var(--main-red) !important;
}

a:hover{
color: var(--main-red);
}

.heading-block{
position: relative;
margin-bottom: 15px;
}

.heading-block:after{
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
height: 2px;
background: #E2E2E2;
width: 100%;
}

.heading-block .heading-title{
font-family: 'Open Sans', sans-serif;
position: relative;
z-index: 250;
font-size: 20px;
font-weight: 600;
color: var(--main-black);
background: #ffffff;
padding-right: 10px;
margin-bottom: 0px;
display: inline-block;
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary.disabled, 
.btn-primary:disabled{
background: var(--main-dark-green);
border-color: var(--main-dark-green);
border-radius: 7px;
}

.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle,
.btn-outline-primary:hover{
background: var(--main-red);
border-color: var(--main-red);
}

.btn-primary.focus, 
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn-primary.dropdown-toggle:focus{
box-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 15%), 0 1px 1px rgb(0 0 0 / 8%), 0 0 0 0.2rem rgb(0 170 11 / 50%);
}

.btn-outline-secondary,
.btn-outline-primary{
color: var(--main-dark-grey);
border-color: var(--main-dark-grey);
border-radius: 7px;
}

.custom-control-input:checked~.custom-control-label:before{
border-color: var(--main-red);
background-color: var(--main-red);
}

.form-control:focus{
border-color: var(--main-red);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 0 0.2rem rgb(240 60 55 / 0%);
}

.product-thumb.slick-current{
border-color: var(--main-red);
}

.h1, 
.products-section-title, 
h1{
text-transform: unset;
}

ul.product-flags{
left: unset;
}

ul.product-flags .product-flag{
background: var(--main-red);
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}

@media (max-width: 500px){

.mt-1, 
.my-1{
margin-top: 0.75rem !important;
}
}

/* Miniaturen */

div.products{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(5, 1fr);
margin: unset;
}

article.product-miniature{
max-width: unset !important;
flex: unset !important;
background: var(--main-background-grey);
border-radius: 10px;
margin-bottom: unset !important;
padding: 15px;
}

article.product-miniature .card-product{
border: unset;
background: unset;
}

article.product-miniature .card-product .card-img-top a{
background: var(--main-background-grey);
border-radius: 5px;
}

article.product-miniature .card-product .card-body{
padding: 15px 0px 0px 0px;
}

article.product-miniature .card-product .card-body .product-title{
text-align: left;
}

article.product-miniature .card-product .card-body .product-title a{
font-size: 15px;
color: var(--main-red);
font-weight: 800;
}

article.product-miniature .card-product .card-body div.product-price-and-shipping span.price{
font-weight: 400;
}

article.product-miniature .card-product .card-body .stock-container{
margin-top: auto;
}

article.product-miniature .card-product .card-body .stock-container a.mail-btn{
background: var(--main-dark-green);
color: #ffffff;
font-weight: 600;
border-radius: 5px;
width: 100%;
text-align: center;
}

article.product-miniature .card-product .card-body .stock-container > div{
font-size: 16px;
font-weight: 700;
line-height: normal;
vertical-align: middle;
margin-top: 15px;
}

article.product-miniature .card-product .card-body .stock-container > div span.material-icons-outlined{
font-family: 'Material Icons';
color: #ffffff;
border-radius: 50%;
font-size: 14px;
line-height: normal;
}

article.product-miniature .card-product .card-body .stock-container > div.in-stock{
color: var(--main-dark-green);
}

article.product-miniature .card-product .card-body .stock-container > div.in-stock span{
background: var(--main-dark-green);
}

article.product-miniature .card-product .card-body .stock-container > div.out-of-stock{
color: var(--main-red);
}

article.product-miniature .card-product .card-body .stock-container > div.out-of-stock span{
background: var(--main-red);
}

article.product-miniature .card-product .card-body .stock-container > div.low-on-stock{
color: #ff5722;
}

article.product-miniature .card-product .card-body .stock-container > div.low-on-stock span{
background: #ff5722;
}

article.product-miniature .card-product .card-body .action-container{
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr auto;
margin-top: 15px;
}

article.product-miniature .card-product .card-body .action-container.no-gap{
grid-gap: unset;
}

article.product-miniature .card-product .card-body .action-container a.view-product{
color: #ffffff;
background: var(--main-dark-grey);
width: 100%;
text-align: center;
border-radius: 5px;
font-weight: 600;
display: inline-grid;
align-content: center;
min-height: 41.2px;
}

article.product-miniature .card-product .card-body .action-container button.btn-primary{
background: var(--main-dark-green);
border-radius: 5px;
height: 100%;
padding: 10px;
display: inline-grid;
align-content: center;
}

article.product-miniature .card-product .card-body .action-container button.btn-primary svg{
fill: #ffffff;
}

@media (max-width: 1150px){

div.products{
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 850px){

div.products{
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 500px){

div.products{
grid-template-columns: 1fr;
}
}

/* Navbar */

header#header .header-nav{
background: var(--main-light-grey);
color: var(--main-black);
}

header#header .header-nav div.header-nav__right{
grid-gap: 15px;
padding: 5px 0px;
}

header#header .header-nav div.header-nav__right div.header-links{
display: flex;
grid-gap: 10px;
}

header#header .header-nav div.header-nav__right div.header-links a{
font-size: 14px;
}

header#header .header-nav div.header-nav__right div.language-selector button{
padding: unset;
font-size: 14px;
font-weight: 700;
line-height: normal;
outline: unset;
border: unset;
}

header#header .header-nav div.header-nav__right div.language-selector button:after{
color: var(--main-red);
vertical-align: middle;
}

header#header .header-nav div.header-nav__right div.language-selector img{
border-radius: 3px;
}

header#header .header-nav div.header-nav__right div.language-selector div.dropdown-menu{
padding: unset;
}

header#header .header-nav div.header-nav__right div.language-selector div.dropdown-menu a.active,
header#header .header-nav div.header-nav__right div.language-selector div.dropdown-menu a:active{
background: var(--main-red);
}

/* Header */

header#header{
box-shadow: unset;
margin-bottom: 45px;
}

header#header .header-top-master-container{
position: relative;
}

@media (min-width: 1700px){

body.lang-nl header#header .header-top-master-container:before{
content: '';
position: absolute;
left: 15px;
background-image: url('/img/surplus.svg');
background-repeat: no-repeat;
background-size: clamp(75px, 300px, 100%) clamp(48.75px, 97.5px, 100%);
height: clamp(75px, 300px, 100%);
width: clamp(48.75px, 97.5px, 100%);
top: calc(50%);
}
}

header#header .header-top{
position: relative;
padding-top: 15px;
padding-bottom: 15px;
min-height: 107px;
}

header#header .header-top .header__logo{
width: 25%;
}

header#header .header-top .logo{
position: absolute;
top: 15px;
}

header#header div.header__search{
display: flex;
grid-gap: 15px;
}

header#header div.header__search div#search_widget{
margin: unset;
}

header#header div.header__search div#search_widget form{
display: inline-block;
background: var(--main-light-grey);
padding: 5px 10px;
border-radius: 25px;
}

header#header div.header__search div#search_widget form input{
border: unset;
background: var(--main-light-grey);
outline: unset;
font-size: 14px;
max-width: calc(100% - 35px);
width: 225px;
}

header#header div.header__search div#search_widget form button[type="submit"]{
color: #ffffff;
background: var(--main-red);
border-radius: 50%;
padding: 6px;
border: unset;
outline: unset;
line-height: normal;
}

header#header div.header__search div#search_widget form button[type="submit"] i{
font-size: 20px;
}

header#header div.header__search .customer-service{
display: grid;   
}

header#header div.header__search .customer-service a{
display: grid;
grid-gap: 5px;
grid-template-columns: auto auto;
align-items: center;
font-weight: 700;
vertical-align: middle;
color: var(--main-black);
}

header#header div.header__right{
grid-gap: 15px;
}

header#header div.header__right div.grid-container{
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr auto;
}

header#header div.header__right div.grid-container div.icon-container span{
background: #F3F3F3;
border-radius: 50%;
padding: 10px;
}

header#header div.header__right div.grid-container div.icon-container i{
color: var(--main-red);
}

header#header div.menu-container div.inner-container{
display: grid;
grid-gap: 15px;
grid-template-columns: 235px 1fr;
background: var(--main-red);
border-radius: 11px;
}

header#header div.menu-container div.inner-container nav{
padding-bottom: unset;
}

header#header div.menu-container div.inner-container nav ul{
justify-content: flex-start;
}

header#header div.menu-container nav#_desktop_top_menu a[data-depth="0"]{
text-transform: unset;
color: #ffffff;
}

header#header div.menu-container div.inner-container nav div.menu-sub{
width: auto;
left: auto;
}

header#header div.menu-container div.inner-container nav ul[data-depth="1"]{
flex-direction: column;
}

header#header div.menu-container div.inner-container nav ul[data-depth="1"] a,
header#header div.menu-container div.inner-container nav ul[data-depth="1"] span{
text-transform: unset;
}

@media (max-width: 1750px){

header#header .header-top-master-container:before{
content: unset;
}
}

@media (max-width: 1115px){

header#header .header-nav div.header-nav__right{
grid-gap: unset;
}

header#header .header-top .customer-service{
display: none !important;
}
}

@media (max-width: 990px){

header#header .header-top__col{
max-width: 25%;
}

header#header .header-top .header__logo{
width: unset;
}

div#_mobile_top_menu li a[data-depth="0"]{
text-transform: unset;
}

div#_mobile_language_selector div.language-selector button{
border: unset;
background: unset;
}

div#_mobile_language_selector div.dropdown-menu{
padding: unset;
}

div#_mobile_language_selector div.dropdown-menu .dropdown-item.active, 
div#_mobile_language_selector div.dropdown-menu .dropdown-item:active{
background-color: var(--main-red);
}

header#header{
margin-bottom: 0px;
}

header#header div.header__right{
grid-gap: 0px;
}

header#header .header-top .logo{
position: unset;
}

header#header div.header__right div.grid-container{
grid-gap: 5px;
}

header#header .header-top .text-container .blockcart__count{
background: var(--main-red);
border-radius: 50%;
color: #ffffff;
width: 21px;
height: 21px;
display: inline-block;
text-align: center;
}

header#header div.header__search{
flex: 1;
flex-grow: 1;
}

header#header div.header__search div#search_widget,
header#header div.header__search div#search_widget form{
width: 100%;
}

header#header div.header__search div#search_widget form input{
width: calc(100% - 40px);
}
}

@media (max-width: 990px){

header#header .header-top .header__logo svg{
max-width: 150px;
height: auto;
}
}

/* Zijmenu */

div.block-categories{
background: var(--main-background-grey);
border-radius: 5px;
border: unset;
grid-gap: 10px;
border-radius: 7px;
}

div.block-categories div.block-header strong{
font-size: 20px;
}

div.block-categories li.category-sub__item--0{
border-bottom: 1px solid #E8E8E8;
padding: 0.35rem 0;
}

div.block-categories li i{
color: var(--main-red);
}

div.block-categories li[data-depth="0"] ul.category-sub-menu{
padding-left: 15px;
}

/* Index */

section#welcome-block .grid-container{
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 3fr;
}

section#welcome-block div#carousel{
border-radius: 7px;
}

section#welcome-block div#carousel a.slide{
position: relative;
}

section#welcome-block div#carousel a.slide h2{
position: absolute;
top: calc(50% - 54px);
left: 35px;
font-size: 45px;
font-weight: 800;
color: #ffffff;
max-width: 100%;
width: 450px;
}

section#welcome-block div#carousel a.slide div.slider-caption{
display: grid;
background: #ffffff;
color: #5E5E5E;
border-radius: 7px;
height: calc(100% - 40px);
top: 20px;
right: 20px;
left: unset;
padding: 25px;
max-width: 320px;
}

section#welcome-block div#carousel a.slide div.slider-caption div.caption-description{
position: relative;
}

section#welcome-block div#carousel a.slide div.slider-caption div.caption-description:before{
content: "priority_high";
position: absolute;
left: -45px;
top: 0px;
font-size: 24px;
height: 42px;
width: 42px;
text-align: center;
font-family: 'Material Icons';
color: #ffffff;
background: var(--main-red);
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
}

section#welcome-block div#carousel a.slide div.slider-caption p{
margin-bottom: unset;
}

section#welcome-block div#carousel a.slide div.slider-caption span{
color: var(--main-red);
margin-top: auto;
font-weight: 700;
max-width: 185px;
}

section#welcome-block div.products-container{
margin-top: 25px;
}

section#welcome-block div.products-container .products{
grid-template-columns: repeat(4, 1fr);
}

section#product-block{
margin-top: 25px;
}

section#product-block .products{
grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 1250px){

section#wrapper{
padding: unset;
}
}

@media (max-width: 1250px){

section#product-block .products{
grid-template-columns: repeat(3, 1fr);
}

section#main.page-wrapper--index .container{
padding: unset;
}

section#welcome-block div#carousel a.slide h2{
display: none;
}

section#welcome-block div#carousel a.slide div.slider-caption{
max-width: calc(100% - 30px);
}
}

@media (max-width: 990px){

section#welcome-block .mobile-category-tree{
margin: 25px 0px;
}

section#welcome-block .mobile-category-tree .block-categories{
display: block;
}

section#welcome-block div.grid-container{
grid-template-columns: 1fr;
}

section#welcome-block div.products-container .products{
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 850px){

section#welcome-block div.products-container .products,
section#product-block .products{
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 725px){

section#welcome-block div#carousel a.slide{
background: rgb(205 158 112 / 60%);
padding: 25px;
border-radius: 7px;
}

section#welcome-block div#carousel a.slide img{
display: none;
}

section#welcome-block div#carousel a.slide div.slider-caption{
position: unset;
max-width: 100%;
}
}

@media (max-width: 500px){

section#welcome-block div.products-container .products,
section#product-block .products{
grid-template-columns: 1fr;
}
}

/* Footer */

footer#footer div.footer-top{
padding: 25px 0px;
background: var(--main-black);
}

footer#footer div.footer-top .grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

footer#footer div.footer-top .footer-item.block-indent{
margin-top: 25px;
}

footer#footer div.footer-top .footer__title,
footer#footer div.footer-top .footer__title:hover{
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-size: 15px;
line-height: normal;
text-transform: uppercase;
}

footer#footer div.footer-top li,
footer#footer div.footer-top a,
footer#footer div.footer-top div{
color: #ffffff;
font-size: 14px;
}

footer#footer div.footer-top div.footer-item ul{
margin-bottom: 0px;
}

footer#footer div.footer-middle{
padding: 15px 0px;
}

footer#footer div.footer-middle div.grid-container{
display: flex;
justify-content: space-between;
}

footer#footer div.footer-bottom{
background: #F03C37;
padding: 15px 0px;
}

footer#footer div.footer-bottom .grid-container{
display: grid;
justify-content: space-between;
grid-template-columns: auto auto auto;
font-size: 14px;
}

footer#footer div.footer-bottom .grid-container div.copyright{
color: #ffffff;
}

footer#footer div.footer-bottom .grid-container div.build a,
footer#footer div.footer-bottom .grid-container div.build a:hover{
color: #d6d6d6;
}

footer#footer div.footer-bottom .grid-container div.links a,
footer#footer div.footer-bottom .grid-container div.links a:hover{
color: #ffffff;
}

@media (max-width: 990px){

footer#footer div.footer-top .grid-container{
grid-template-columns: 1fr;
}

footer#footer div.footer-top .footer-item.block-indent{
margin-top: 0px;
}
}

@media (max-width: 850px){

footer#footer div.footer-middle div.grid-container{
flex-direction: column;
text-align: center;
}

footer#footer div.footer-bottom .grid-container{
grid-template-columns: 1fr;
grid-template-areas: "copyright"
"links"
"build";
grid-gap: 10px;
text-align: center;
}

footer#footer div.footer-bottom .copyright{
grid-area: copyright;
}

footer#footer div.footer-bottom .build{
grid-area: build;
}

footer#footer div.footer-bottom .links{
grid-area: links;
}
}

/* Breadcrumbs */

nav ol.breadcrumb{
background: var(--main-background-grey);
border-radius: 7px;
}

/* Cards */

div.card-block{
border: unset;
background: var(--main-background-grey);
border-radius: 7px;
}

div.card-block h1{
text-transform: unset;
}

/* Product lijsten en sidebar */

div#left-column ul.category-top-menu li a.h5{
text-transform: unset !important;
font-weight: 600;
}

div#js-product-list-top select{
border-color: var(--main-background-grey);
border-radius: 7px;
box-shadow: unset;
}

.page-link, 
.product-comments__pagination li span{
color: var(--main-red);
}

.page-item.active .page-link, 
.page-item.active .product-comments__pagination li span, 
.product-comments__pagination li.active .page-link, 
.product-comments__pagination li.active span, 
.product-comments__pagination li .page-item.active span{
border-color: var(--main-red);
background-color: var(--main-red);
}

.page-link:focus, 
.product-comments__pagination li span:focus{
box-shadow: 0 0 0 0.2rem rgb(240 60 55 / 20%);
}

/* Product */

body#product section#main div.grid-container{
display: grid;
grid-template-columns: 50% 1fr;
grid-gap: 15px;
margin-bottom: 25px;
}

body#product section#main div.grid-container div.images-container div.product-thumbs{
margin: unset;
}

body#product section#main div.grid-container div.info-container{
display: grid;
align-content: center;
}

body#product section#main div.grid-container div.info-container div.tax-shipping-delivery-label span.marge-product{
color: var(--main-red);
font-size: 12px;
}

body#product section#main h1{
color: var(--main-red);
text-transform: unset;
margin-bottom: 0px;
}

body#product section#main div.js-product-images-modal .modal-content{
border-radius: 7px;
}

body#product section#main div.js-product-images-modal figure.position-relative{
display: flex;
}

body#product section#main div.js-product-images-modal figure.position-relative img{
margin: 0 auto;
width: auto;
height: auto;
}

body#product .stock-container{
margin-top: auto;
}

body#product .stock-container a.mail-btn{
margin-top: 25px;
background: var(--main-dark-green);
color: #ffffff;
font-weight: 600;
border-radius: 5px;
text-align: center;
}

body#product .stock-container > div{
font-size: 16px;
font-weight: 700;
line-height: normal;
vertical-align: middle;
margin-top: 15px;
}

body#product .stock-container > div span.material-icons-outlined{
font-family: 'Material Icons';
color: #ffffff;
border-radius: 50%;
font-size: 14px;
line-height: normal;
}

body#product .stock-container > div.in-stock{
color: var(--main-dark-green);
}

body#product .stock-container > div.in-stock span{
background: var(--main-dark-green);
}

body#product .stock-container > div.out-of-stock{
color: var(--main-red);
}

body#product .stock-container > div.out-of-stock span{
background: var(--main-red);
}

body#product .stock-container > div.low-on-stock{
color: #ff5722;
}

body#product .stock-container > div.low-on-stock span{
background: #ff5722;
}

body#product section#main div.product-information{
margin-top: 25px;
}

body#product section#main div#product-description p{
margin-bottom: 0px;
}

body#product section#more-info .nav-tabs{
justify-content: flex-start;
}

@media (max-width: 750px){

body#product section#main div.grid-container{
grid-template-columns: 100%;
}   

body#product section#main div.grid-container div.product-img .img-fluid{
width: 100%;
margin: unset;
}
}

/* Category */

@media (max-width: 500px){

div.sort-by-row,
div.sort-by-row div.form-inline{
display: block !important;
}

div.sort-by-row div.form-inline div.sort-by-row select{
width: 100%;
}
}

/* Zijmenu */

div#left-column div.contact-rich div.block{
display: flex;
grid-gap: 15px;
}

/* Navs */

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active{
color: var(--main-red);
border-color: transparent transparent var(--main-red);
background: unset;
}

/* Modal */

div#blockcart-modal div.modal-content{
border-radius: 7px;
}

div#blockcart-modal div.modal-header{
background: var(--main-red);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

div#blockcart-modal div.modal-header h3,
div#blockcart-modal div.modal-header h3 i,
div#blockcart-modal div.modal-header button{
color: #ffffff !important;
}

div#blockcart-modal .modal-cart__name{
color: var(--main-black);
}

/* Cart */

.account-links .link-item, 
.address, 
.block-categories, 
.card, 
.card-block, 
.left-column .search_filters, 
.page-wrapper{
border-radius: 7px;
}

section.page-wrapper.page-wrapper--contact{
border: unset;
}

.address-header, 
.card-header, 
.page-header{
background: var(--main-background-grey);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

.address-header, 
.card-header, 
.page-header{
text-transform: unset;
}

body#checkout .card-header{
border-bottom: unset;
}

/* Contact */

body#contact form.js-customer-form{
display: grid;
}

body#contact form.js-customer-form div.row{
order: 1;
}

body#contact form.js-customer-form section.form-fields{
order: 0;
}

/* My account */

body#my-account div.account-links span.link-item{
text-transform: unset;
color: var(--main-black);
}

body#my-account div.account-links span.link-item i{
color: var(--main-black);
}

/* Checkout */

body#checkout header#header{
background: var(--main-light-grey);
}

body#checkout header#header .header-nav{
background: unset;
}

body#checkout header#header .header-nav .logo{
max-width: 115px;
height: auto;
}

body#checkout header#header .header-nav div.small a{
font-weight: 700;
color: var(--main-black);
}

body#checkout .carrier-price{
color: unset;
font-size: unset;
}

body#checkout .alert-info{
background-color: rgb(0 168 11 / 25%);
border-color: rgb(0 168 11 / 25%);
}

@media (max-width: 990px){

body#checkout header#header{
margin-bottom: 25px;
}

body#checkout header#header .header__logo--checkout{
margin: unset;
}
}