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

.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: #666666;
}

.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: #76c61b;
}

/* custom */
.flex .meta .unitprice {
display:none !important;
}

/* ----------- OPEN Winkelpagina ------- */
@media only screen and (max-width: 768px) {
    div[class^='col-'],div[class*='col-'] {
        width: 100% !important;
        margin-top: 5px;
    }

    .winkelpagina #main {
        width: 90% !important;
    }
  
  .winkelpagina .mobile-hidden {
  	display: none;
  }

    .winkelpagina #hero h1 {
        width: 100%;
        text-align: center !important;
        font-size: 25px !important;
    }
   .winkelpagina #hero h2 {
        width: 100%;
        text-align: center !important;
        font-size: 15px !important;
    }
}

.winkelpagina #main {
    max-width: 1080px;
    margin: 0 auto;
    font-family: 'Encode Sans Semi Condensed', Arial, Helvetica, sans-serif;

    padding-bottom: 100vh;

    overflow-x: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.winkelpagina h1,.winkelpagina h2,.winkelpagina h3,.winkelpagina h4,.winkelpagina h5 {
    font-family: 'Encode Sans', Arial, Helvetica, sans-serif;
}

.winkelpagina .row {
    width: 100%;
    padding-top: 30px;
    clear: both;

}

div[class^='col-'],div[class*='col-'] {

    float: left;

    padding: 0 4px;

    /*  Prevent padding from messing up width/ height. */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.winkelpagina .col-2 {
    width: calc(100%/12*2);
}

.winkelpagina .col-3 {
    width: calc(100%/12*3);
}

.winkelpagina .col-4 {
    width: calc(100%/12*4);
}

.winkelpagina .col-6 {
    width: calc(100%/12*6);

}

.winkelpagina .col-8 {
    width: calc(100%/12*8);

}

.winkelpagina .col-12 {
    width: calc(100%/12*12);
}

.winkelpagina h2 {
    font-size: 22px;
    text-align: center;
}

.winkelpagina h3 {
    font-size: 20px;
}


.winkelpagina h5 {
    font-size: 16px;
    margin-bottom: unset;
}

.winkelpagina p {
    margin: 0;
}

.winkelpagina button {
    border: none;
    padding: 14px 20px;

    font-size: 18px;
    line-height: 32px;
    font-weight: 500;

    cursor: pointer;
    width: 100%;
    text-align: left;

    border-radius: 4px;

    white-space: nowrap;

    transition: background-color 0.3s;
}

.winkelpagina i {
    display: inline-flex;
    margin: auto 10px auto 0;
}

.winkelpagina i:before {
    content: "";
    background-size: cover;
    display: block;
    width: 18px;
    height: 18px;
}

.winkelpagina i.icon-route:before {
    background: url('https://cdn.webshopapp.com/shops/335638/files/417111057/send.svg');
}

.winkelpagina i.icon-calendar:before {
    background: url('https://cdn.webshopapp.com/shops/335638/files/416887330/calendar.svg');
}
.winkelpagina i.icon-phone:before {
    background: url('https://cdn.webshopapp.com/shops/335638/files/417124556/phone.svg');
}
/* test */


/*  Hero section*/
.winkelpagina #hero {
    background: url('https://cdn.webshopapp.com/shops/335638/themes/179544/v/1185552/assets/slide1-mobile-image.png') no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    padding: 30px;
}

/*  Fix that the background can be seen in full height.*/
.winkelpagina #hero:after {
    content: " ";
    display: block;
    clear: both;
}

/*  Title*/
.winkelpagina #hero h1,
.winkelpagina #hero h2 {
    padding: 10px;
    margin: auto 0;
    color: white;
    background: #272D3B;
    text-align: left;

    display: inline-block;

    vertical-align: middle;
}

.winkelpagina #hero h1 {
    margin-top: 15%;
    font-size: 50px;
}
.winkelpagina #hero h2 {
    font-size: 25px;
}

/*  Contact information*/
.winkelpagina #hero .contact-container {
    background: white;
    border: 3px solid white;
    border-radius: 4px;
}
.winkelpagina #hero h3 {
    width: 100%;
    background: black;
    color: white;
    line-height: 60px;
    font-size: 18px;
    text-align: center;
    margin: 0;
    border-radius: 4px;
}

.winkelpagina #hero ul {
    list-style: none;
    padding: 0;
}
.winkelpagina #hero li {
    text-align: center;
}
.winkelpagina #hero li.bold {
    margin-top: 10px;
    font-weight: bold;
}

/*  Buttons */
.winkelpagina #hero .contact-container .button-container {
    margin: 15px 10px 10px;
}

.winkelpagina #hero .contact-container .button-container button {
    margin-top: 5px;
    padding: 0;
    font-size: 15px;
    text-align: center;

    position: relative;
}

.winkelpagina #hero .contact-container .button-container button i:before {
    transform: scale(0.85);

    position: absolute;
    left: 10px;
    top: 7px;
}

.winkelpagina #hero .border {
    border: 1px solid black;
}

/*  test*/
.winkelpagina .btn-green {
    background-color: #88D099;
    color: white;
}

.winkelpagina .btn-green:hover {
    background-color: #52BC6B;
}

.winkelpagina .btn-white {
    background-color: #F5F5F5;
    color: black;
}

.winkelpagina .btn-white:hover {
    background-color: #DBDBDB;
}

.winkelpagina button i:before {
  filter: brightness(0);
}

.winkelpagina img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.winkelpagina #store-section img {
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

/* Routes section at the top */


/**
Routes section
 */
.winkelpagina .route-container {
    border-radius: 2px;
    border: 1px solid #e0e0e0;
    padding: 5px;
    font-size: 14px;
  
  transition: background-color 0.25s;
}

.winkelpagina .route-container:hover {
  background: #88D099;
  border: 1px solid #88D099;
}

.winkelpagina .route-location {
    color: #787575;
  transition: color 0.25s;
}


.winkelpagina .route-duration {
    color: #505456;
    font-weight: bold;
    margin-bottom: 5px;
  transition: color 0.25s;
}

.winkelpagina .route-button {
    margin-top: 5px;
    color: #787575;
    text-decoration: none;
  transition: color 0.25s;
}

.winkelpagina .route-container:hover .route-location,
.winkelpagina .route-container:hover .route-duration,
.winkelpagina .route-container:hover .route-button {
	color: white;
}

.winkelpagina .route-button i {
    height: 13px;
  	margin-right: -2px !important;
}

.winkelpagina .route-button i:before {
    transform: scale(0.75);
}
.winkelpagina .route-container:hover .route-button {
	filter: brightness(0) invert(1);
}

/* ----------- END Winkelpagina ------- */


.textpage .mobile-menu-side {
  display:none;}

.winkelheader {
background-image: url("https://cdn.webshopapp.com/shops/335638/themes/179544/v/1185315/assets/slide1-image.png");
background-position: bottom center;
background-color: #cccccc;
width:100%;
height:500px;
border-radius:6px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
Float:left;
  }

.introtekst{
width:600px;
float:left;}

.introtekst h1{
color:#ffff;
Float:left;
font-weight:bold;
  margin:100px 0px 10px 50px;
font-size:45px;}

.introtekst h2{
color:#ffff;
Float:left;
font-weight:bold;

  margin:0px 0px 10px 50px;
font-size:35px;}

.openingstijden{
Width: 300px;
float:right;
background-color:#ffffff;
height: 400px;
  border-radius:6px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
  Margin:25px;
  padding:25px;
}

.row_navi{
margin-top:15px;}
.block_navi{
float:left;
padding:15px;
border:1px solid #e7e7e7;
margin-right:15px;}
.block_navi a{
text-decoration:none !important;
font-weight:initial;}
.row_navi .icon-navigation:before{
color:#2ac37d;}

.block_navi:hover{
background-color: #e7e7e7;}

.right{
  margin-top:20px;
  max-width:45%;
  float:right;
}

.left{
  margin-top:20px;
  max-width:45%;
  float:left;
}

@media only screen and (max-width: 600px) {
  
  #content-below img{
  max-width:100%;
  height:auto;}
  .right,.left{
    margin-top:20px;
  max-width:initial;
    float:initial;}
    .openingstijden{
  height:260px;}
  .winkelheader{
  margin-bottom:60px;
  background-position:top;}
  .block_navi{
  margin-bottom:15px;}
  
  .introtekst h1{
  font-size:25px;
  }
  .introtekst h2{
  font-size:20px;
  width:100%;}
}
}

.product-overlay li{
list-style-type: none;}

.theme-by{
display:none;}

/*Aileen Tagalog - 2721423 Removing Login with Facebook button on the account creation page 6-27-22 START*/
body > div.main-container.one-line > div.page-container.custom-acc > div.container.flex.flex-wrap > div > div > div:nth-child(1) > div.action-buttons.flex.flex-align-center.flex-between > a.btn.fb {
	display: none;
}
/*END*/

/* Styling for youtube column at collection */
.item.flex-styling{
  display: flex;
  flex-direction: column;
}

.item-list{
  margin-bottom: 15px;
}

.item .product-overlay.variants .single-spo-item.block.out_of_stock,
.item .product-overlay.variants .single-spo-item.block{
  max-height: 30px;
}

.video-container{
  margin-bottom: 20px;
}

.collection .youtube-wrap{
/*   grid-column: span 2; */
  background: #262f3d;
/*   border: 1px solid var(--border); */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

.collection .youtube-wrap.span2{
/*   grid-column: span 2; */
  grid-column: 3 / 5;
  order: 2;
}

@media(max-width: 992px){
  .collection .youtube-wrap.span2{
    grid-column: span 2;
  }
}

.collection .youtube-wrap.youtube-margin{
  margin-top: 20px;
  margin-bottom: 20px;
}

.collection .youtube-wrap .youtube-inner{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.collection .youtube-wrap .youtube-inner .youtube-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 315px;
  top: 0;
  background: #000;
}

.collection .youtube-wrap .youtube-inner .youtube-overlay.hidden,
.collection .youtube-wrap .youtube-inner .yt-video.hidden{
  visibility: hidden;
}

.collection .youtube-wrap .youtube-inner .yt-image-overlay{
  width: 560px;
  height: 315px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection .youtube-wrap .youtube-inner .yt-image-overlay .overlay-img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  object-fit: cover;
}

.collection .youtube-wrap .youtube-inner .yt-image-overlay.hidden{
  display: none;
}

.collection .youtube-wrap .youtube-inner .play-button-wrap{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection .youtube-wrap .youtube-inner .play-button-wrap{
  width: 100%;
  height: auto;
  max-width: 72px;
  max-height: 72px;
  cursor: pointer;
}

.collection .youtube-wrap .video-text{
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 15px;
}

.collection .youtube-wrap .video-text h3{
  color: #fff;
}

.collection .youtube-wrap .video-text p{
  margin-bottom: 0;
}
/* End styling for youtube column at collection */
