/* 20260908180656 - v2 */
.gui,
.gui-block-linklist li a {
  color: #000000;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #0a8de9;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0a8de9;
  box-shadow: 0 0 2px #0a8de9;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0a8de9;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #000000;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #ffffff;
}

/* custom */
/* Product sommelier icons */

#container{ width: 100%; margin: 0 auto; background: #fff; padding: 200px 25px; }
		table#icons{ border-collapse: collapse; max-width: 800px; }
		td{ border: none; padding: 5px; }

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

			#container{ width: auto; margin: 0; padding: 25px 0; }
			table#icons { display: block; }
			td{ display: block; padding: 5px 0; border: none; }
			td img{ display: block; margin: 0; max-width: 100%;}

		}
		img{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }


/* Brand map */
#container{ width: 100%; margin: 0 auto; background: #fff; padding: 200px 25px; }
		table#brand{ border-collapse: collapse; max-width: 100%; }
		td{ border: none; padding: 5px; }

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

			#container{ width: auto; margin: 0; padding: 25px 0; }
			table#brand { display: block; }
			td{ display: block; padding: 5px 0; border: none; }
			td img{ display: block; margin: 0; max-width: 100%;}

		}
		img{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }

/* Region map */
#region.container{ width: 100%; margin: 0 auto; background: #fff; padding: 200px 25px; }
		table#region{ border-collapse: collapse; max-width: 100%; }
		td#region{ border: none; padding: 5px; }

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

			#region.container{ width: auto; margin: 0; padding:0px 0; }
			table#region { display: block; }
			td#region{ display: block; padding: 5px 0; border: none; }
			td img#region{ display: block; margin: 0; max-width: 100%;}    
               
		}
		img#region{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }




/* Buttons */

.wsite-button {
  background-color: #000000;
  border: none;
  border-radius: 25px;;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* Verzendtarief */

table.verzendtarief, table.verzendtarief td, table.verzendtarief th {
  border: 1px solid #dddddd;
  text-align: left;
}

table.verzendtarief {
  border-collapse: collapse;
  width: 55%;
}

table.verzendtarief th, table.verzendtarief td {
  padding: 10px;
}

/* service */

table.service, table.service th, table.service td { 
  padding: 20px;
  width: 65%;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}

img.service {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Merken - Solid border */
hr.solid {
  width: 247px;
  border-top: 5px solid #93c000;
  transform-origin: center 1.5px;
  position: relative;
    margin: 0px 0px 39px calc((100% - 980px) * 0.5);
    left: 366px;
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
    align-self: start;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
}


/* Merken - foto's */
	/* Center website */
	.main {
  	max-width: 1356px;
  	margin: auto;
	}

	.row {
	margin: 8px -16px;  
	}

	/* Add padding BETWEEN each column */
	.row,
	.row > .column {
 	 padding: 5px;
	}

	/* Create four equal columns that floats next to each other */
	.column {
    float: left;
	  width: 16.66%;
	}

	/* Clear floats after rows */ 
	.row:after {
	  content: "";
 	 display: table;
 	 clear: both;
	}

	/* Content */
	.content {
	  background-color: white;
	  padding: 0px;
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 900px) {
    .column {
 	   width: 33.32%;
	  }
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
 	 .column {
 	   width: 50%;
	  }
	}
	/* layout update Loyalty - DMWS */
.gui-reward-progress { margin-right: 10px; }
.gui-reward-line .gui-line-description { height: auto; margin-bottom: 20px; }
.gui-reward-line .gui-line-description > p { font-size: inherit; }



/* ------FOODPAIRING - PRODUCTPAGE--------------------------------------------- */
/* food icons */
	/* Center website */
	.foodmain {
  	max-width: 1356px;
  	margin-left: 5px;
    margin-right: auto;        
	}

	.foodrow {
	margin: 8px -16px;  
	}

	/* Add padding BETWEEN each column */
	.foodrow,
	.foodrow > .foodcolumn {
 	 padding: 5px;
	}

	/* Create four equal columns that floats next to each other */
	.foodcolumn {
    float: left;
	  width: 4,6%;
	}

	/* Clear floats after rows */ 
	.foodrow:after {
	  content: "";
 	 display: table;
 	 clear: both;
	}

	/* Content */
	.foodcontent {
	  background-color: white;
	  padding: 0px;
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 900px) {
    .foodcolumn {
 	   width: 9,2%;
	  }
    .foodmain {
    margin-left: 5px;
    }
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
 	 .foodcolumn {
 	   width: 18,4%;
	  }
    .foodmain {
    margin-left: 5px;
    }
	}

/* Quote Carrousel*/
		* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #quote {
      font-family: Arial, sans-serif;      
      display: flex;
      justify-content: center;
      align-items: center;      
      padding: 1rem;
    }

    .carousel {
      width: 100%;
      max-width: 800px;
      height: auto;
      min-height: 150px;
      position: relative;
      overflow: hidden;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quote-wrapper {
      display: flex;
      width: 100%;
      animation: slide 20s infinite ease-in-out;
    }

    .quote {
      min-width: 100%;
      text-align: center;
      padding: 1.5rem;
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      color: #333;
      opacity: 0.9;
      line-height: 1.4;
    }

    @keyframes slide {
      0%   { transform: translateX(0%); }
      12.5% { transform: translateX(0%); }
      25%  { transform: translateX(-100%); }
      37.5% { transform: translateX(-100%); }
      50%  { transform: translateX(-200%); }
      62.5% { transform: translateX(-200%); }
      75%  { transform: translateX(-300%); }
      87.5% { transform: translateX(-300%); }
      100% { transform: translateX(0%); }
    }

    @media (max-width: 480px) {
      .quote {
        padding: 1rem;
        font-size: clamp(1rem, 4vw, 1.2rem);
      }
    }

/*------FOODPAIRING - HOMEPAGE *-------------------------------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  font-size: 100%;
}

.foodie-dark {
  background-color: #000000;
  font-family: Arial, sans-serif;
  color: #ffffff;
  line-height: 1.5;
}


.foodie { 
  position: relative; 
  height: 75vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  //background-image: url('https://cdn.webshopapp.com/shops/257164/files/377124338/foodpairing.jpg');
  //background-size: cover;
  //opacity: 0.75;
}
  
.foodie::before {  
      content: "";
      background-image: url('https://cdn.webshopapp.com/shops/257164/files/377124338/foodpairing.jpg');
      border-radius: 15px;
      background-size: cover;
      position: absolute;
      background-position: center;
      background-repeat: no-repeat;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.95;
      z-index:1;/* important */
}




/* foodpair icons homepage*/
	/* Center website */ 


    .foodpairmain p { 
    font-weight: 500;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
    color: #000000;
	}
  .foodpairmain h3{
    font: 28px;
    font-weight: bold;
  	padding-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
    color: #000000;
	}   
    
	.foodpairmain {
    background-color: rgba(255,255,255, 0.8);
    border-radius: 15px;
  	max-width:482px; 
    z-index:2;
    margin-left: auto;
    margin-right: auto;
        padding-left: 25px;
        padding-right: 20px;
	}

	.foodpairrow {    
    margin: auto;
    width: 100%;  
    padding: 10px;
    }

	/* Add padding BETWEEN each column */
	.foodpairrow,
	.foodpairrow > .foodpaircolumn {
 	 padding: 5px;
     padding-top: 10px;
     padding-bottom: 12px;       
	}

	/* Create four equal columns that floats next to each other */
	.foodpaircolumn {
    
    float: left;    
    width: 4,6%;   
	}

	/* Clear floats after rows */ 
	.foodpairrow:after {
	  content: "";
 	 display: table;    
 	 clear: both;     
	}

	/* Content */
	.foodpaircontent {	        
    padding: 0px; 
	}

	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 900px) {
    .foodpaircolumn {
 	   width: 9,2%;
	  }
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) { 	 
    .foodpaircolumn {
 	   width: 18,4%;
	  }
    .foodpairmain {
    background-color: rgba(255,255,255, 0.7);
    border-radius: 15px;
  	max-width:100%; 
    margin-left: 15px;
    margin-right: 15px;
        padding-left: 10px;
        padding-right: 10px;
	 }
	}