:root {
--colormainblue: #0087b4;
--colorlightblue: #1998FF;
--colordarkblue: #007DE3;
--colorcompgreen: #00B487;
--colorMobileMenu: rgb(0, 140, 255);
--colorDarkgrey: #3f3f3f;
--colorDarkgrey07: rgba(63, 63, 63, 0.7);
--colorDarkgrey05: rgba(63, 63, 63, 0.5);
--colorLightGrey: #8C8C8C;
/* --colorRust: #B36D00;
--colorGold: #b28400;
--colorLightBrown:#c4a775;
--colorYellow: #FF9B00; 
--colorOrange: #FF5C0D; */
--fontfamilyMain: 'Mulish', sans-serif;

--textColorDark: #3f3f3f;
--textColorWhite: #ffffff;
--textColorWhiteHover: rgba(255, 255, 255, 0.9);
--headerColor: #3f3f3f;
--linkColor: #3f3f3f;
--LinkHover: #3f3f3f;
--buttonColor: #165A78;
--buttonHover: #165A78; 
--fontSemiBold: 600;
--fontBold: 800;
--fontExtraBold: 900;
--fontRegular: 400;
--menuMinHeightMobile: 4rem;
--menuMinHeightLarge: 9rem;
--borderColor: #e0e0e0;
--borderColorExtraLight: rgba(224, 224, 224, 0.5);
--borderRadiusDefault: 4px;
--containerBackground: #ffffff;

--h1size: 1.75em;
--h2size: 1.5em;
--h3size: 1.25em;
--h4size: 1.125em;
--h5size: 1em;
--h6size: 1em;


--fs-xl: 5rem;
--fs-900: 2.5rem;
--fs-800: 2rem;
--fs-700: 1.5rem;
--fs-600: 1.25rem;
--fs-500: 1.125rem;
--fs-400: 1rem;
--fs-300: 0.95rem;
--fs-200: 0.75rem;
--fs-100: 0.6rem;

}

* {box-sizing:border-box;margin:0px;padding:0px;}

*::before, *::after {box-sizing: inherit;}

html {
    font-family: var(--fontfamilyMain);
    font-size: var(--fs-500);
    color: var(--textColorDark);
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}

body {
    overflow-x: hidden;
    background-color: #fafafa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
li {list-style: none;}

a,
a:active,
a:visited {text-decoration: none; font-family: var(--fontfamilyMain); color: var(--colorDarkgrey);}

/* Typography */
h1, h2, h3, h4, h5, h6 {font-weight: var(--fontBold);}

p {font-weight: var(--fontRegular);}

.shadow-bottom {
/* schadow effects voor verschillende browsers. voor IE moet je andere settings gebruiken*/
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px rgb(116, 116, 116);
    box-shadow: 0 10px 6px -6px #777;
}

.width-100 {width:100%;}

.pagina-titel {

    font-size: var(--h1size);
    color: #7fc3d9;
    
}

/* Images */

img {display: block;max-width: 100%;}

.card-shadow {
    -webkit-box-shadow: 0 2px 5px 0px rgba(0,0,0,.2);
    -moz-box-shadow:    0 2px 5px 0px rgba(0,0,0,.2);
    box-shadow:         0 2px 5px 0px rgba(0,0,0,.2);
}

/* Buttons */

/* Navigation design */
.nav-schaduw {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.24);
    -moz-box-shadow:    0 2px 2px 0 rgba(0,0,0,.24); 
    box-shadow:         0 2px 2px 0 rgba(0,0,0,.24);
}

/* .mobile-menu-shadow {
    -webkit-box-shadow: 2px 0 2px 0 rgba(0,0,0,.24); 
    -moz-box-shadow:    2px 0 2px 0 rgba(0,0,0,.24); 
    box-shadow:         2px 0 2px 0 rgba(0,0,0,.24);    
} */

.background-main-blue{
    background-color: var(--colormainblue);
}

.min-height-menu {
    min-height: var(--menuMinHeightMobile);
}

.hidden {
    display:none !important;
}

.btn-main-sm,
.btn-main-sm:visited {
    display: inline-block;
    font-size: var(--fs-200);
    background-color: var(--colormainblue);
    color: var(--textColorWhite);
    padding: 0.75em 1.5em;
}

.btn-main-sm:hover,
.btn-main-sm:active {
    background-color: var(--colordarkblue);
}



/* 
*****************************************
*****************************************
* Navigation layout opzetten containers
*****************************************
*****************************************
*/

.header-main-nav {
   height: calc(var(--menuMinHeightMobile) + 0.5rem);
}

.navigatie-container {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    z-index: 9996;
    position: fixed;
    top: 0;
    left: 0;
}


.container-hamburger {
    flex: 0 0 20%;
    display:flex;
    justify-content: flex-start;    /* om de een of andere reden werkt -items niet voor buttons. ALternatief is margin:auto bij de button */
    align-items: center;
    padding-left: 1em;
}

.container-main-menu-logo {
    flex: 1 1 80%;
    display:flex;
    justify-content: flex-start;
    margin: 0 10px;
    min-width: max-content;
}

.main-logo-header {
    display:flex;
    align-items: center;
    
}

.container-main-menu-links-lg {
    display:none;
}

.container-main-menu-links-sm {
    display:block;
    position: fixed;         /* fixed als main container naar relative gaat */
    text-align: left;
    top: 0;  
    height: 100vh;
    left: -200vw;
    min-width: 16rem;             /* set de width van de dropdown mobile menu */
    z-index: 9999;
    background-color: var(--containerBackground);
    overflow-y: auto;
    overflow-x: hidden;
    /* padding-top: var(--menuMinHeightMobile);   zorgt ervoor dat het mobile menu precies aan de onderkant van de menu banner begint */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}


/* link container onClick appear*/
.container-main-menu-links-sm[data-visibility="true"] {
    transform: translateX(200vw);
}



/* 
*****************************************
*****************************************
* items in hamburger container  
*****************************************
*****************************************
*/

.hamburger-menu-btn-open, 
.hamburger-menu-btn-close  {
cursor:  pointer;
padding: 1rem 0.5rem;
appearance: none;
background: none;
outline: none;
border: none;
}

/* Styling the open hamburger */
.hamburger-bar {
    display: block;
    position: relative;
  }
  
  .hamburger-bar,
  .hamburger-bar::before,
  .hamburger-bar::after {
    width: 2em;
    height: 3px;
    background: var(--textColorWhite);
  }
  
  .hamburger-bar::before,
  .hamburger-bar::after {
    content: '';
    position: absolute;
    left: 0;
  }
  
  .hamburger-bar::before { bottom: 8px; }
  .hamburger-bar::after { top: 8px;}

  /* Styling the close hamburger */
  .hamburger-cross {
      font-size: 2em;
      font-weight: var(--fontSemiBold);
      color: var(--textColorWhite);
  }

/*
*****************************************
*****************************************
* items in logo container 
*****************************************
*****************************************
*/
.main-logo-header a {
    color: var(--textColorWhite);
    font-family: var(--fontfamilyMain);
    font-weight: var(--fontBold);
    font-size: var(--fs-600);
    text-align:center;
}


/* 
*****************************************
*****************************************
* items in link container 
*****************************************
*****************************************
*/

.main-menu-mobile-menu-header {
    position: sticky;
    top: 0;
    min-height: var(--menuMinHeightMobile);
    display:flex;
    flex-flow: row nowrap;
    width: 100%;
    background-color: var(--colormainblue);
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    z-index: 2;
}

.hamburger-menu-btn-close {
    margin-right: 1.2rem;
}

.main-menu-mobile-menu-header #MobileHeader {
    font-size: 1.2rem;
    font-weight: var(--fontBold);
    color: var(--textColorWhite);
    padding: 0.8rem 1.2rem;
}

.menu-items-lijst {
    position: relative;
    z-index: 1;
}

.menu-item-anchor {
    display:block;
    color: var(--textColorDark);
    font-family: var(--fontfamilyMain);
    font-weight: var(--fontSemiBold);
    font-size: 0.9rem;
    text-decoration: none; 
    border-bottom: 1px solid var(--borderColor);
    padding: 0.8rem 1.2rem;
    margin-bottom: 0.3rem; 
}
 
/* 
*****************************************
*****************************************
* pagina overlay bij actief mobiel menu
*****************************************
*****************************************
*/

.overlay-on-mobile-menu-active[show-overlay="false"] {
    opacity: 0;
}

.overlay-on-mobile-menu-active[show-overlay="true"] {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 150ms ease 0s;
    background: rgba(14,30,42,.85);
    cursor: pointer;
    z-index: 9998;
}


/* 
*****************************************
*****************************************
* setting the Main content layout
*****************************************
*****************************************
*/

.main-content-container {
    display:flex;
    flex-flow: column wrap;
    align-items: center;
    width: 100%;  
    padding-top: 1rem;
    padding-bottom: 2rem;
     
}

.main-content {
    width: 90%;
    display:flex;
    flex-flow: column wrap;
    row-gap: 2rem;
    align-items: center; 
    /*padding-top: 1rem;*/
    padding-bottom: 2rem;
}


/* 
*****************************************
*****************************************
* main content HOME- uitleg boxen
*****************************************
*****************************************
*/

.uitleg-box {
    display:flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borderColor);
    margin-bottom: 1rem;
    padding: 1rem 1rem;
    line-height: 1.6;
}

.uitleg-box h3 {
    color: var(--colormainblue);
    padding: 0.75rem 0.5rem;
}


.overzicht-webwinkels {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 
*****************************************
*****************************************
* main content HOME - overzicht webwinkels
*****************************************
*****************************************
*/


#shop-line-seperator {
    text-align:center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 20px 0;
    grid-gap: 20px;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    margin-bottom: 1rem;
    }
    
#shop-line-seperator::after,
#shop-line-seperator::before {
    content: " ";
    display: block;
    border-bottom: 2px solid var(--colormainblue);
    }

.webwinkel-lijst {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    overflow-x: auto;
    }
    
.center-webwinkel-lijst {
    display: flex;
    margin: 0 auto;
    gap: 2rem;
}

.webwinkel-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.webwinkel-image-wrapper {
    border: 1px solid var(--colorLightGrey);
    width: 150px; 
    height: 100px;
} 

/* 
*****************************************
*****************************************
* Foutmelding
*****************************************
*****************************************
*/

.display-error-message {
    padding: 1.5em 2em;
    background-color: rgba(255, 0, 0, 0.1);
    border-left: 4px solid red;
}

.display-error-message h2 {
    color: var(--textColorDark);
}

.inline-error {
    background-color:var(--containerBackground); 
    font-size: 0.75rem; 
    border-radius: 4px; 
    border: 1px solid #e0e0e0; 
    border-left: 2px solid #ff0000; 
    padding: 1rem;
}

/* 
*****************************************
*****************************************
* Custom 404
*****************************************
*****************************************
*/

.box-404 {
    width: 100%;
    border:1px solid var(--colorLightGrey);
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    position: relative;
}
.header-404{
    font-size: 4rem;
    font-weight: var(--fontExtraBold);
    padding-bottom: 1rem;
}

.header2-404 {
    font-size: 2rem;
    font-weight: var(--fontBold);
}
.tekst-404 {
    line-height: 1.6;
    padding: 2rem 0;

}
.home-btn-404 {
    margin: 0 auto;
    display:block;
    width: max-content;
    cursor: pointer;
    background-color: var(--buttonColor);
    padding: 1em 2em;
}

.home-btn-404 span {
    color: var(--textColorWhite);
}

/* .img-lost-404 {
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 1rem;
z-index: -1;
} */


/* 
*****************************************
*****************************************
* Product pagina
*****************************************
*****************************************
*/

.overzicht-container {
    display:flex;
    flex-flow: column wrap;
    width: 100%;
    gap: 1rem;
}

.product-foto-container {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border: 1px solid var(--colorLightGrey);
    background-color: var(--containerBackground);
    padding: 2rem 1rem;
}

/*.product-foto-large-wrapper {}

.product-foto-large {}

.product-foto-small-row-wrapper {} */

.product-foto-small-image-wrapper {
    display: inline-block;
    width: 7rem;
    padding-top: 2rem;
}

.product-foto-small {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.prijslijst-container {
    flex: 1 0 100%;
/*     display: flex;
    flex-flow: column wrap; */
    overflow: visible;
    font-size: var(--fs-300);
    box-sizing: border-box;
    padding-top:20px;
    padding-bottom:20px;
    border: 1px solid var(--colorLightGrey);
    background-color: var(--containerBackground);
}

.prijslijst-header-wrapper, 
.webwinkel-wrapper {
    width: 100%;
    padding-right: 25px;
}

.prijslijst-header-wrapper {
    padding-left: 15px;
}

.titel-prijslijst-header {
    font-size: var(--fs-600);
    font-weight:900 ;
    color: var(--colormainblue);
    display: inline;
}

.float-right,
.prijslijst-webwinkel-prijs {
    float: right;
}

.prijs-link {
    display:block;
    width: 100%;
}

.webwinkel-wrapper {
    margin-top: 20px;
    padding-left: 25px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e7e7e7;
}


.eigenschappen-container {
    display: flex;
    flex-flow: column wrap;
    width: 100%; /* set the container width*/
    overflow: visible;
    font-size: var(--fs-200);
    padding: 1rem 0rem;
    border: 1px solid var(--colorLightGrey);
}

.eigenschappen-header {
    display: block;
    font-size: var(--fs-600);
    font-weight:900 ;
    color: var(--colormainblue);
    padding-left: 15px;

}

.detailsHeader {
    display: block;
    font-size: var(--fs-600);
    font-weight:800 ;
    color: var(--colormainblue);
    padding: 0.75rem 1rem;

}


.eigenschappen-lijst dt{
    flex: 0 0 100%; 
    padding-left: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 0.25rem;
}

.eigenschappen-lijst dt::after {
    content: ":";
}

.eigenschappen-lijst dd{
    flex: 0 0 100%;
    padding-left: 35px;
    margin-left: auto;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: 0.25rem;

}

.eigenschappen-lijst dd:nth-of-type(odd) {background: #e7e7e7;}
.eigenschappen-lijst dt:nth-of-type(odd) {background: #e7e7e7;}

/* 
*****************************************
*****************************************
* Main content - overzicht pagina
*****************************************
*****************************************
*/

/* 
*****************************************
*****************************************
* Overzicht pagina - personaliseer
*****************************************
*****************************************
*/
/* #personalisatie-form {
    width: 100%;
    overflow:hidden;
    background-color: var(--containerBackground);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadiusDefault);
    
}
.personalisatie-form-container {
    padding: 0;
 }
#btn-togglePersonaliseer {
    width: 100%;
    padding: 1em 2em;
    font-size: var(--fs-200);
    background-color: var(--containerBackground);
    border-radius: var(--borderRadiusDefault);
    border: 1px solid var(--colorDarkgrey);
 

}
.progress-wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem;
} 

.tab-item {
    text-align: center;
    position: relative;
    margin-right: 20px;
}


.tab-nummer {
    border: 2px solid var(--colorLightGrey);
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 50%;
}
.tab-naam {
    padding: 0.2rem;
    font-size: var(--fs-200);
} */


/* 
*****************************************
*****************************************
* Overzicht pagina - zoekveld
*****************************************
*****************************************
*/
.product-zoek-form {
width: 100%;
display: flex;
justify-content:flex-end;
}

.zoek-input-container {
flex: 0 0 100%;
height:100%;
position: relative;
display: flex;
align-items: center;
}

.zoek-product-input {
min-height: 40px;
width: 100%;
padding: 0.5rem 0.25rem;
border: 1px solid var(--borderColor);
border-radius: var(--borderRadiusDefault);
outline: none;
}

.zoek-product-input:focus {
    -webkit-box-shadow: 0 0px 5px 0px rgba(0,0,0,.2);
    -moz-box-shadow:    0 0px 5px 0px rgba(0,0,0,.2);
    box-shadow:         0 0px 5px 0px rgba(0,0,0,.2);   
}

.zoek-product-input::placeholder {
opacity: 1;
color: var(--colorLightGrey);
font-size: var(--fs-200);
}

#zoek-svg {
    position: absolute;
    fill: var(--colorLightGrey);
    width: var(--fs-300) !important;
    height: var(--fs-300) !important;
    right: 0;
    margin-right: 1rem;
}

#zoek-clear-svg {
    display: none;
    position: absolute;
    fill: var(--colorLightGrey);
    width: var(--fs-600) !important; /* 0.95rem / 32 * 50  */
    height: var(--fs-600) !important;
    right: 0;
    margin-right: 1rem;
    cursor: pointer;
}

/* 
*****************************************
*****************************************
* Overzicht Loader 
*****************************************
*****************************************
*/

.overzicht {
    position: relative;
}

.overzicht-loader {
    display: none;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom:0;
    z-index: 999;
}

.overzicht-loader.loading {
    display: flex;
    justify-content: center;
    align-items:center;
    background: rgba(250,250,250, 0.6);
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #0087b4;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #0087b4 transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  


/* 
*****************************************
*****************************************
* Overzicht 
*****************************************
*****************************************
*/
.overzichtContainer {
display: flex;
flex-flow: column nowrap;
width: 100%;
overflow-y: hidden;
gap: 1rem;
}

.overzicht-product-container-grid {
display:grid;
position: relative;
width:100%;
padding: 0.5rem;
grid-template-columns: 0.75rem 1fr 1fr 1fr 1fr 0.75rem;
background-color: var(--containerBackground);
border: 1px solid var(--borderColorExtraLight);
border-radius: var(--borderRadiusDefault);
gap: 1em;
grid-template-areas: 
'rank thumb thumb thumb thumb score'
'. titel titel titel titel titel'
'. specs specs specs specs specs'
'button button button button button button';

}

    .overzicht-product-rank {
        grid-area: rank;
        font-size: var(--fs-300);
    }

    .overzicht-product-productnaam{ 
        grid-area: titel;
        
    }

    .overzicht-product-productnaam-h3{
        color: var(--colormainblue);
        font-size: var(--fs-300);
        font-weight: var(--fontBold);
    }

    .overzicht-product-score {
        grid-area: score;
        font-size: var(--fs-300);
    }

        .overzicht-product-thumbnail {
            grid-area: thumb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .overzicht-product-thumbnail img {
            width: 80%;
            max-width:80%;
         }

        .overzicht-product-eigenschappen-wrapper{
            grid-area: specs;
            
        }
        .overzicht-product-eigenschappen {
            font-size: var(--fs-200);
            display: grid;
            grid-template-columns: max-content auto;
            line-height: 1.6;
        }
        .overzicht-product-eigenschappen dt {
            grid-column-start: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-right: 0.5rem;
        }
        .overzicht-product-eigenschappen dd {
            grid-column-start: 2;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .overzicht-product-webknop{
            grid-area: button;
        }
/*         .overzicht-product-webknop a{
        border-radius: var(--borderRadiusDefault);
        } */
        .overzicht-product-webknop a {
            display:block; 
            text-align: center;
            font-weight: var(--fontSemiBold);
            font-size: 0.85rem;
         }


            .overzicht-product-webprijs{
                grid-area: prijs;
                font-size: var(--fs-300);
                color: var(--textColorDark);
                font-weight: var(--fontBold);
            }


/* 
*****************************************
*****************************************
* MEDIA QUERIES
*****************************************
*****************************************
*/
/* 
*****************************************
*****************************************
* Scherm > 760
*****************************************
*****************************************
*/

@media screen and (min-width: 1080px) {
    /* verberg alle elementen die puur voor het mobiele menu zijn */
    .overlay-on-mobile-menu-active,
    .container-hamburger,
    .main-menu-mobile-menu-header,
    .container-main-menu-links-sm
    {
        display: none;
    }


/* 
*****************************************
*****************************************
* Herstylen main navigatie containers
*****************************************
*****************************************
*/

  /*  .navigatie-container {
        justify-content: stretch;
    }

   .container-main-menu-logo {
        flex: 1 1 auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content:flex-start;
        margin-left: 5%;

      }

    .container-main-menu-links-lg {
        flex: 4 1 auto;
        display: flex;
        overflow-x: hidden;
        margin: 0 10px;
        justify-content: stretch;
    } */

    .header-main-nav {
       height: calc(var(--menuMinHeightLarge) + 0.5rem);
    }

    .navigatie-container {
    flex-direction: column; 
    align-items: stretch;
    justify-content: stretch;
    }

    .container-main-menu-logo {
       flex: 0 0 100%;
       display: flex;
       flex-flow: row nowrap;
       justify-content:center;
       align-items: center;

     }

   .container-main-menu-links-lg {
       flex: 0 0 100%;
       display: flex;
       overflow-x: hidden;
       justify-content: center;
       align-content: center;
       background-color: #fafafa;
   } 

   .eigenschappen-lijst dt { 
       flex: 0 0 30%;
       padding-left: 25px;
     }
 
         
   .eigenschappen-lijst dd {
       flex: 0 0 70%;  
   }


/* 
*****************************************
*****************************************
* Herstylen menu links
*****************************************
*****************************************
*/

/*      .menu-items-lijst-lg {
        flex: 0 0 100%;
        display:flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .menu-items-lijst-lg li + li {
        margin-left: 1em;
    }

    .menu-item-anchor-lg {
    display:inline-block;
    color: var(--textColorWhite);
    text-transform: uppercase;
    font-family: var(--fontfamilyMain);
    font-weight: 800;
    font-size: 0.8rem;
    text-decoration: none; 
    padding: 0.6em 0.6em;
    border-bottom: 2px solid var(--colormainblue); 
    border-top: 2px solid var(--colormainblue); 

    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    }

    .menu-item-anchor-lg:active {
    color: var(--textColorWhiteHover);
    border-bottom: 2px solid var(--textColorWhiteHover); 
    }

    .menu-item-anchor-lg:hover {
    color: var(--textColorWhiteHover);
    border-bottom: 2px solid var(--textColorWhiteHover); 
    border-top: 2px solid var(--textColorWhiteHover);   
    } */

.main-logo-header a {
   font-size: 2rem !important;
   padding: 0.5em 1em;
}
    .menu-items-lijst-lg {
       flex: 0 0 100%;
       display:flex;
       flex-flow: row nowrap;
       justify-content: center;
       align-items: center;
   }

   .menu-items-lijst-lg li + li {
       margin-left: 1em;
   }

   .menu-item-anchor-lg {
   display:inline-block; /* test of dit wel wat doet */
   color: var(--textColorDark);
   font-family: var(--fontfamilyMain);
   font-weight: 500;
   font-size: 0.9rem;
   padding: 1em 0.6em;
   letter-spacing: 1px;


   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
   }

   .menu-item-anchor-lg:hover {
   color: var(--colormainblue);
   }

/* 
*****************************************
*****************************************
* Temp
*****************************************
*****************************************
*/

.overzicht, .product-zoek-form {
    width: 60%;
}

.overzichtContainer {
    border: 1px solid rgba(0, 140, 255,.2);
    border-radius: 6px;
    padding: 2rem;
    background-color: var(--containerBackground);
    
    -webkit-box-shadow: 0 0px 20px 0px rgba(0, 140, 255,.2);
    -moz-box-shadow:    0 0px 20px 0px rgba(0, 140, 255,.2);
    box-shadow:         0 0px 20px 0px rgba(0, 140, 255,.2);  
 
}
.zoek-input-container {
    flex: 0 0 30%;
    justify-content:flex-end;
}

.overzicht-product-container-grid {
    align-items: center;
    grid-template-areas: 
    'rank titel titel titel titel score'
    'thumb thumb specs specs button .';
    border: none;
    border-bottom: 1px solid var(--colorDarkgrey);
    border-radius: 0;
}

} /*end mediaquery*/

/* 
*****************************************
*****************************************
* Scherm > 1024
*****************************************
*****************************************
*/

@media screen and (min-width: 1600px)  {


/* 
*****************************************
*****************************************
* Herstylen main navigatie containers
*****************************************
*****************************************
*/

   .navigatie-container {
       justify-content: center;
   }

   .container-main-menu-logo {
       flex: 0 1 30%;
     }

   .container-main-menu-links-lg {
       flex: 0 1 50%;
   }

/* 
*****************************************
*****************************************
* Herstylen menu links
*****************************************
*****************************************
*/

  /*  .menu-item-anchor-lg {
   font-size: 0.9rem;

   } */
}