/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Teko:wght@400;700&display=swap');


@import "bootstrap-overrides.css?v=20260529091301";
@import "header.css?v=20260529091301";
@import "css.css?v=20260529091301";

:root {
  --colorBase:          #11191f;
  --colorInverseBase:   #ffffff;
  --lightBlue:          #20B8C8;
  --lightGray:          #585b62;
  --colorBrand:         #f5fe0d;
  --colorBackground:    #F2F2F2;
  --colorBackground-1:  #30343D;
  --colorBackground-2:  #50545d;
  --colorBackground-3:  #70747d;
  --colorBackground-4:  #90949d;
  --colorBackground-5:  #b0b4bd;
  --fontBase:           'Exo 2','Open Sans', Arial, sans-serif; 
  --fontAlternative:    'Teko', 'Exo 2','Open Sans', Arial, sans-serif; 
  --grid-column-margin: 1rem;
}

#navbar-brand img { width: 170px; }
/*.nav-link { padding: 0.5rem 0.80rem; }*/
#mainmenu-bar { padding: 20px 0; }
#top-bar .list-group-item { padding-top: 5px; padding-bottom: 5px; }

.openlist { padding: 0; margin: 0; }
.openlist li { padding: 0; margin: 0; list-style-type: none; }

.openinghours ul { padding: 0;}
.openinghours ul li { display: flex; }
.openinghours ul li span.openlist-dag { font-weight: bold; }
.openinghours ul li span:last-child{ margin-left: auto; margin-right: 10px; }

#langbar-1 li a:link, #langbar-1 li a:visited, #langbar-1 li a:active, #langbar-1 li a:hover {
    display: inline-block;
    padding: 0 1.25rem;
    color: #FFFFFF;
}

#link-blok { background-color: var(--colorBackground-4); padding: 2rem 0; } // #6b6b6b
#top-footer { margin-top: 0; }



#social .btn {
	text-decoration: none;
	background-color: #c8c9cb;
	color: #24272e;
}

#social .btn:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.news-item a {
    text-decoration: underline;
}



@media only screen and (min-width: 1200px) {
    .homepage-grid > .nieuws, .grid > .nieuws {
        background-size: 101% 101% !important; 
    }
}

.preshade {
    top: -1px !important;
}

#link-blok {
    /* background-color: transparent !important;  */
    background-color: var(--colorBackground) !important; 
}  

.shade {
    background-color: transparent !important; 
    box-shadow: 0 0 150px 0px var(--colorBackground-1) inset;
}

#productpage-content a {
    text-decoration: underline;
}

.nieuws .news-item .content {
    background-color: transparent;
}



.extra-info.extra-info-extra {
  left: 0.5rem;
  right: auto;
}

.extra-info.extra-info-wishlist {
    border: none;
    top: auto;
    bottom: 0.5rem;
}

.alert-extra {
    color: black;
}

.extra-info.extra-info-extra.extra-info-wishlist a {
    color: black;
}

.label-variant {
    display: flex;
    line-height: 1;
    justify-content: center;
    align-items: center;
}

.product-list .colorlabels {
    top: auto;
    bottom: -0.75rem;
}

.outer-product-item .detail .title {
    word-break: break-all;
}

body.download_files.download-bestanden {
    min-height: 100%;
    background-color: #ffffff;
}


@media only screen and (min-width: 1200px) and (max-width: 1599px)  {
    .shopmenu .list-group-item > a:link, .shopmenu .list-group-item > a:visited, .shopmenu .list-group-item > a:active, .shopmenu .list-group-item > a:hover, #extra-navigation .list-group-item > a:link, #extra-navigation .list-group-item > a:visited, #extra-navigation .list-group-item > a:active, #extra-navigation .list-group-item > a:hover {
        padding: 0.75rem 0.75rem;
    }
}

.special-intro {
    border-top: 4px solid var(--colorBrand);
    padding: 1rem;
    margin-bottom: 3.5rem;
    color: #404040;
    background: white;
}

.special-intro a {
    color: #000000;
}

.special-intro p:last-child {
    margin-bottom: 0;
}

.extra-info.extra-info--inner {
    position: absolute;
    font-size: 0.9em;
    font-weight: 700;
    top: 0.5rem;
    right: 0.5rem;
    background-color: var(--colorInverseBase);
    color: var(--baseColor);
    border: 2px solid red;
    padding: 1px 7px;
}

.brandList {
    display: grid; 
    gap: 1rem; 
}

.brandList > li {
    padding: 1rem;
    background-color: var(--colorInverseBase);
    box-shadow: 0 0 0 1px var(--colorBrand);
 }
    
@media only screen and (min-width: 768px) {
    .brandList {
        display: grid; 
        gap: 1rem; 
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 992px) {
    .brandList {
        display: grid; 
        gap: 1rem; 
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 1600px) {
    .brandList {
        display: grid; 
        gap: 1rem; 
        grid-template-columns: repeat(6, 1fr);
    }
}