@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.category-top-menu .h6{
display: none!important;
}

.delivery-options-list input{

     width: 20px;
     height: 20px;

}




body {
overflow-y: hidden;
background: #222224;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 300;
margin-left: 305px;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}

body.noscroll{
overflow-x: hidden;
}



h1,h2,h3 {
font-family: 'Playfair Display', serif;
color: #fff;
font-weight: 400;
}

h1 {
color: #9f8a6f;
margin-bottom: 20px;
font-size: 30px;
line-height: 45px;
}

a {
color: #fff!important;
}

a:hover {
text-decoration: none;
}

a.disable{
pointer-events: none;
cursor: default;
}

input {
color: #fff;
}

label {
color: #fff;
}

.border {
border: 1px solid #fff;
}

.p0{
padding: 0;
}

input {
font-family: 'Roboto', sans-serif!important;
font-size: 13px!important;
color: #222224!important;
line-height: 22px;
font-weight: 300;
background: #fff!important;
border: none!important;
width: 100%;
}

input[type=checkbox]{
width: 15px;
}

option,select {
     font-family: 'Roboto', sans-serif!important;
     font-size: 13px!important;
     color: #fff!important;
     line-height: 22px;
     font-weight: 300;
     background: #222224!important;
     border: none!important;
}

.btn {
background: none!important;
}

.material-icons {
color: #9f8a6f;
}

.card {
background: none!important;
}

.border {
border: 1px solid #fff;
}

.hide {
display: none;
}


.button,
.btn-primary {
background: rgba(159,138,111,0.9)!important;
display: inline-block!important;
color: #fff!important;
font-family: 'Playfair Display', serif!important;
padding: 7px 24px!important;
line-height: 15px!important;
font-size: 15px!important;
font-weight: 400!important;
transition: all 0.2s;
}

.button:focus,
.btn-primary:focus{
     border-color: #222224;

}

.button:hover,
.btn-primary:hover{
background: rgba(159,138,111,1)!important;
}

#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
z-index: -100;
transition: all 0.6s;
cursor: pointer;
}

#overlay.active {
background-color: rgba(0,0,0,0.4);
z-index: 500;
}


#menu .left{
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 50px;
background: #9f8a6f;
z-index: 1000;
color: #fff;
}

#menu .left a{
display: block;
padding: 13px 15px;
}

#menu .left i {
font-size: 20px;
}

#menu .left .socialmedia {
position: absolute;
bottom: 30px;
left: 0;
}

#menu .right{
position: fixed;
top: 0;
bottom: 0;
left: 50px;
width: 255px;
background: #000;
z-index: 1000;
color: #fff;
padding: 0px 30px;
}

#menu .right .logo{
width: 200px;
height: auto;
position: absolute;
left: 33px;
top: 95px;
}



#menu .right ul {
margin: 0;
margin-top: 200px;
padding: 0;
list-style-type: none;
}


#menu .right ul li a {
padding: 8px 15px;
color: #fff;
font-weight: 300;
font-size: 14px;
display: block;
margin-bottom: 1vh;
}

#menu .right ul li a:hover,
#menu .right ul li.current a{
background: #222224;
text-decoration: none;
}

#menu .right .footer {
position: absolute;
bottom: 30px;
right: 0;
left: 40px;
font-size: 13px;

}

#menu .right .footer i{
display: none;
}

#menu .right a.contact{
margin-left: 15px;
padding-top: 5px;
display: block;
}

#back{
font-family: 'Playfair Display', serif;
display: block;
padding: 5px 30px;;
position: fixed;
right: 0;
bottom: 15px;
background: #9f8a6f;
z-index: 1000;
opacity: 0;
transition: all 0.4s;
}

#back.open{
opacity: 1;
}


/* portfoliopagina ================================================================================= */


/* De producten worden met jquery in rijen geplaatst */
.producten {
display: none;
}


.producten td{
vertical-align: top;
}


.portfoliopagina #rij1 {
margin-top: 7vh;
margin-bottom: 50px;

}

.portfoliopagina .rij {
width: 100%;
margin-left: 30px;
display: flex;
}


.portfoliopagina .item {
float: left;
position: relative;
margin-right: 40px;

}

.portfoliopagina .item .imagewrapper{
overflow: hidden;
}

.portfoliopagina  .item img {
height: 40vh;
margin-left: 0px;
position: relative;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

}


.portfoliopagina .item:hover img{
transform: scale(1.04);
}



.portfoliopagina .item .overlay {
position: absolute;
bottom: 0;
left: 0;
height: 10vh;
right: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}


.portfoliopagina  .item h2{
position: absolute;
bottom: 20px;
left: 25px;
z-index: 100;
color: #fff;
}

.portfoliopagina .item h2 a{
font-size: 16px;
color: #fff;
}

.portfoliopagina  .item .button {
position: absolute;
bottom: 25px;
left: auto;
right: 60px;
z-index: 100;
color: #fff;
}

.fullscreen {
display: none;
}

.portfoliopagina   .item .fullscreen {
position: absolute;
right: 30px;
bottom: 25px;
color: #fff;
font-size: 16px;
background: #000;
padding: 7px;
display: block;
cursor: pointer;
}



.portfoliopagina  .item .beschrijving {
display: none;
}

/* CONTENT */

.contentpagina img{
pointer-events: none;
height: 100vh;
}


td.beschrijving .inner{
width: 460px;
padding: 100px 60px;
}

td.beschrijving .inner h2 {
margin-top: 40px;
line-height: 140%;
font-size: 18px;
}

td.beschrijving .inner p{
margin-bottom: 10px;
}

td.beschrijving .inner strong {
font-weight: 400;

}


td.beschrijving .inner li {
margin-left: -20px;
}

td.beschrijving .inner .btn{
font-size: 100%;
font-weight: 300;
padding: 5px 0px;
transition: all 0.4s;
}

td.beschrijving .inner .btn:hover{
padding-left: 5px;
}

td.beschrijving .inner .btn::after{
position: relative;
top: 4px;
right: -3px;
font-family: "Material Icons";
content: "\e409";
color: #fff;
font-size: 16px;
}





.contentpagina .button {
display: none;
}



#slideshow {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
background: #222223;
opacity: 0;
transition: opacity 0s;
}

#slideshow.active {
z-index: 1000;
opacity: 1;
transition: opacity 1s;
}

#slideshow #volgende i {
position: absolute;
right: 0;
top: 45%;
color: #fff;
font-size: 50px;
padding: 15px;
cursor:pointer;
}

#slideshow #vorige i{
position: absolute;
left: 0;
top: 45%;
color: #fff;
font-size: 50px;
padding: 15px;
cursor:pointer;
}

#slideshow #sluiten i{
position: absolute;
right: 0;
top: 0;
color: #fff;
font-size: 35px;
padding: 15px;
cursor:pointer;
}

#slideshow .wrapper{
text-align: center;
}

#slideshow .item {
position: absolute;
top: 10vh;
bottom: 10vh;
width: 100vw;
opacity: 0;
transition: all 1s;
overflow: hidden;
}

#slideshow .item.active {
opacity: 1;
}

#slideshow .item .image-wrap-wrap{
display: inline-block;
padding-bottom: 60px;
position: relative;
}

#slideshow .item .image-wrap {
overflow: hidden;
margin: 0 auto;
display: inline-block;
position: relative;
}


#slideshow .item img {
height: calc(80vh - 60px);
margin: 0 auto;
transition-property: all;
transition-duration: 10s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}


#slideshow .item.active img {
margin: 0 auto;
transform: scale(1.1);
}

#slideshow .item .image-wrap-wrap .bottom{
position: absolute;
bottom: 20px;
right: 0;
z-index: 10001;

}

#slideshow .item .image-wrap-wrap .bottom h2{
position: static;
float: left;
margin-right: 15px;
font-size: 18px;
padding-top: 2px;

}

#slideshow .item .image-wrap-wrap .bottom .button{
float: left;
position: static;
}









/* VOORPAGINA */



.voorpagina td.image {
padding: 0;
}

.voorpagina td.beschrijving {
display: none;
}

.voorpagina td.image {
position: relative;
}


.voorpagina td.image img{
height: 100vh;
object-fit: cover;
position: 0 50%;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

}

.voorpagina td.image:hover img{
transform: scale(1.02);
}


.voorpagina td.image h1.kop {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px 40px;
z-index: 500;
color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}







/* Detailpagina -------------------------------------------------------*/

.productpagina .row{
width: calc(100vw - 330px);
overflow: hidden;
}

.productpagina .left {
padding: 100px 55px 100px 65px;
height: 100vh;
background: #9f8a6f;
background: #333;
}

.productpagina .right {
padding: 90px 45px;
}

.productpagina .product-cover {
border-bottom: 1px solid #9f8a6f;
margin-bottom: 45px;
}


.productpagina .js-qv-mask {
height: 130px;
overflow-x: auto;
overflow-y: hidden;
}


.productpagina ul.product-images {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0;
margin: 0;
}


.productpagina .left li.thumb-container:first-child {
display: none;
}


.productpagina .left li.thumb-container {
list-style-type: none;
float: left;
cursor: pointer;
width: 120px;
height: 120px;
padding: 0;
margin: 0;
flex-shrink: 0;
padding-right: 10px;
float: left;
position: relative;
z-index: 100;
}

.productpagina .left li.thumb-container:hover {

}

.productpagina .left li.thumb-container img {
width: 100%;
height: auto;
}


.productpagina .product-variants-item {
margin-bottom: 15px;
}

.productpagina .product-description {
margin-bottom: 30px;
}

.productpagina .product-description li{
margin-left: -28px;
}

.productpagina .product-variants li,
.productpagina .product-variants ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 5px;
}


.productpagina .control-label {
width: 100%;
display: block;
font-family: 'Playfair Display', serif;
font-size: 16px;
margin-bottom: 15px;
text-transform: capitalize;
}

.productpagina .product-variants input.input-radio{
opacity: 0;
width: 0;
overflow: hidden;
}

.productpagina .product-variants .radio-label {
background: #555;
font-size: 12px;
padding: 9px 18px;
cursor: pointer;
margin-right: 1px;
position: relative;
left: -2px;

}

.productpagina .product-variants .radio-label:hover {
background: #9f8a6f;

}

.productpagina .product-variants :checked + .radio-label {
     background: #9f8a6f;

}

.productpagina .product-variants .hide + .radio-label {
     display: none;
}

.productpagina .extratekst {
width: 100%;
clear: both;
padding: 5px 0px;
margin-bottom: 10px;
}


.productpagina .tax-shipping-delivery-label {
display: none;
}

.productpagina .product-price {
font-size: 20px;
margin-bottom: 30px;
margin-top: 20px;
}


.productpagina .product-add-to-cart {
     margin-bottom: 15px;
}

.productpagina .product-add-to-cart .control-label {
display: none;
}

.page-content.page-cms ul, p {
    margin-top: 0;
    margin-bottom: 0;
}


.productpagina img.js-qv-product-cover {
height: auto;
}

/* Bestel proces */

#cart .card {
background: none;
border:none;
}

#cart .separator {
display: none;
}

#cart .cart-grid-body {
padding: 90px 30px 30px 30px;
background: #333;
height: 100vh;
}

#cart .card-block {
padding: 0;
margin: 0;
}


#cart .cart-grid-right {
padding: 120px 30px 30px 30px;
}

#cart h1 {
margin-bottom: 45px;
}

#cart ul.cart-items {
margin: 0;
padding: 0;
}

#cart .cart-item {
margin-bottom: 30px;
padding-bottom: 30px;
list-style-type: none;
border-bottom: 1px solid #9f8a6f;
}

#cart .cart-item .product-image img{
width: 100%;
height: auto;
}

/* Titel */
#cart .cart-item .product-line-info:first-child .label{
font-family: 'Playfair Display', serif;
font-size: 16px;
color: #fff;
padding-bottom: 15px;
}

/* Varianten */
#cart .cart-item .product-line-info .label{
font-weight: 400;
text-transform: capitalize;
}

/* Aantal */


#cart input.js-cart-line-product-quantity {
width: 50px!important;
position: relative;
}

#cart .qty input {
padding: 5px 5px;

}


#checkout #wrapper {
padding-top: 100px;
}

#checkout .checkout-step {
background: #333;
max-height: 55px;
overflow: hidden;
padding: 10px 15px;
transition: all 0.4s;
border-bottom: 15px solid #222224;
}

#checkout .checkout-step.js-current-step {
max-height: 2000px;

}


#checkout h1 {
color: #000;
color: #fff;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-family: 'Playfair Display', serif;
font-weight: 400;
line-height: 20px;

}



#checkout i {
font-size: 16px;
color: #fff!important;
position: relative;
top: 3px;
}


#checkout .text-muted {
float: right;
font-family: 'Roboto', sans-serif;
color: #fff!important;
font-size: 13px;
font-weight: 300;
cursor: pointer;
background: #000;
padding: 1px 10px;
position: relative;
top: -2px;
transition: all 0.2s;
margin-left: 10px;
}

#checkout .text-muted:hover {
background: #333;
}

#checkout .text-muted i {
display: none;
}

#checkout a {
color: #000;
}

#checkout .material-icons {
color: #000;
}

#checkout button {
background: #000!important;
transition: all 0.2s;
}

#checkout button.continue{
background: #917e65!important;
}

#checkout button:hover {
background: #333!important;
}

#checkout textarea {
     width: 100%;
     padding: 10px 15px;
     border-radius: 0;
}


#checkout .input-group-btn button{
     color: #fff;
     font-size: 11px;
     background: none;
}

#checkout-personal-information-step .content i {
     display: none;
}

#checkout-personal-information-step .form-group .text-muted {
     display: none;
}

#checkout .js-cancel-address {
position: relative;
top: 10px;
left: -30px;
}

#checkout ul {
padding: 0;
margin: 0;
list-style-type: none;
}

#checkout .payment-options label {
margin-left: 15px;
}

#checkout #payment-confirmation button{
     float: right;
     background: #917e65!important;
     opacity: 1;
}

#checkout .delivery-options-list img {
     width: 50px;
     height: auto;
}


#checkout #delivery-addresses .address-item {
 background: #555;
 padding: 15px;
 margin-bottom: 15px;
 padding-bottom: 30px;
}

#checkout #delivery-addresses .address-item .address-alias{
     display: none;
}

#checkout #delivery-addresses input {
position: relative;
left: -40px;
}

#checkout .payment-options img {
     height: auto!important;
}

/* USER REGISTRATION UIT */

#checkout #checkout-personal-information-step li {
display: none;
}


#checkout  #__lpform_firstname_icon{
display: none;
}



#checkout .payment-option{
margin-bottom: 15px;
}


#checkout .registration-form{
margin-bottom: 15px;
}

#checkout .payment-option img {
display: none;
}


#checkout .js-additional-information{
margin-bottom: 30px;
}

#checkout .condition-label {
margin-bottom: 15px;
position: relative;
left: 13px;
font-style: italic;
}

#checkout #conditions-to-approve i {
display: none;
}

#checkout button:disabled {
font-size: 0;
}

#checkout button:disabled::before{
  font-size: 14px;
  content: "Accepteer de algemene voorwaarden";
  position: relative;
  top: 2px;
}


#authentication {
padding-top: 100px;
width: 50%;
overflow: hidden;
}

#hamburger {
display: none;
}

#_desktop_user_info{
display: none;
}


#order-confirmation #registration-form{
     display: none;
}
/* Popup cart */

.modal-content {
     background: #222224;
     border: 1px solid #917e65;
}

.modal-content .product-image {
     width: 100%;
     height: auto;
}

.modal-content i {
display: none;
}

.modal-content .modal-title {
     text-align: left!important;
     font-weight: 300!important;
}


#order-confirmation img {
     width: 100%;
     height: auto;
}

#order-confirmation  #order-details ul{

padding: 0;

}

#order-confirmation  #order-details li{
margin-left: 20px;
}

#order-confirmation .featured-products {
display: none;
}

#contactpage{
margin-top: -21px;
margin-right: -5px;
}

#contactpage .col{
height: 100vh;
display: flex;
flex-direction: column;
padding: 0;
}

#contactpage .form{
padding: 30px;
}

#contactpage .map{
flex-grow: 1;
position: relative;
}



#contactpage iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}


#contactpage .selecteer{
display: none;
}

#contactpage img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

#mobiletop{
display: none;
}




/* Minder hoge schermen */
@media screen and ( max-height: 800px ) {

     #menu .right .logo{
     top: 30px;
     }

     td.beschrijving .inner {
     padding-top: 30px;
     width: 700px;
     }

     .productpagina .left {
     padding-top: 30px;
     }

     .productpagina .right {
     padding-top: 30px;
     }



}




/* LG */
@media (max-width:1200px) {



}

/* MD */
@media (max-width:992px) {

     body{
     margin-left: 0;
     overflow-y: auto;
     padding-top: 70px;
     }

     .producten {
     display: block;
     }




     #mobiletop{
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     height: 60px;
     background: #222224;
     z-index: 1000;
     }

     #mobiletop .logo {
     position: absolute;
     top: 15px;
     left: 15px;
     height: 30px;
     width: auto;
     }

     #mobiletop #hamburger {
     display: block;
     position: fixed;
     top: 0px;
     right: 0px;
     font-size: 25px;
     padding: 15px;
     cursor: pointer;
     }

     #content-wrapper {
     overflow-x: hidden;
     }




     #menu .left{
     display: none;
     }

     #menu .right{
     right: -275px;
     left: auto;
     /* left: 0px; */
     transition: all 0.6s;
     }

     #menu .right.active{
     right: 0px;
     }


     #menu .right .block-categories{
     display: block!important;

     }

     #menu .right .category-top-menu{
     margin-top: 10px;
     }

     #menu .right .logo{
     display: none;
     }

     #menu .right ul{
     margin-top: 100px;
     }

     #totop{
     font-family: 'Playfair Display', serif;
     display: block;
     padding: 5px 30px;;
     position: fixed;
     right: 15px;
     bottom: 15px;
     background: #9f8a6f;
     z-index: 2000;
     transition: all 0.4s;
     }



     .footer span {
          display: inline-block!important;
     }

     .up{
          display: none;
     }



     .portfoliopagina table.producten {
     width: 97vw;
     }

     .portfoliopagina table.producten tbody{
     display: block;
     width: 100%;
     }

     .portfoliopagina table.producten tr{
     display: block;
     width: 100%;
     }


     .portfoliopagina table.producten td{
     display: block;
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
     }

     .portfoliopagina table.producten td.beschrijving{
     display: none!important;
     }






     .portfoliopagina td.image .item {
     margin-right: 0;
     position: relative;
     padding: 0 15px;
     }


     .portfoliopagina table.producten td.image:hover img{
     transform: scale(1);
     }

     .portfoliopagina table.producten td.image img{
     width: 100%;
     height: auto;
     margin: 0;
     }

     .portfoliopagina table.producten td.image .bottom {
     padding: 10px 0px;
     }
     .portfoliopagina table.producten td.image .bottom h2{
     display: inline-block;
     }

     .portfoliopagina table.producten td.image .bottom h2{
     display: inline-block;
     font-size: 16px;
     }

     .portfoliopagina table.producten td.image .bottom h2 i {
     display: none;
     margin-left: 10px;
     }



     .portfoliopagina .item .fullscreen {
     display: none;
     }

     .portfoliopagina .item .button {
     right: 30px;
     bottom: 35px;
     }


     /* Contentpaginas */


     .contentpagina table.producten {
     width: 98vw;
     }

     .contentpagina table.producten tbody{
     display: block;
     width: 100%;
     }

     .contentpagina table.producten tr{
     display: block;
     width: 100%;
     }


     .contentpagina table.producten td{
     display: block;
     box-sizing: border-box;
     width: 100%;
     }

     .contentpagina td.beschrijving .inner {
     padding: 15px 30px 15px 15px;
     width: 100%;
     }


     .contentpagina table.producten td.image{
     padding: 0;
     margin-bottom: 10px;
     }

     .contentpagina table.producten img {
     width: 100%;
     height: auto;
     margin: 0;
     }

     .contentpagina .bottom{
     display: none;
     }



     /* Voorpagina */


     .voorpagina table.producten {
     width: 98vw;
     }

     .voorpagina table.producten tbody{
     display: block;
     width: 100%;
     }

     .voorpagina table.producten tr{
     display: block;
     width: 100%;
     }


     .voorpagina table.producten td{
     display: block;
     box-sizing: border-box;
     width: 100%;
     }

     .voorpagina .producten td.beschrijving{
          display: none;
     }

     .voorpagina .producten .bottom{
          display: none;
     }

     .voorpagina td.image img {
          width: 100%;
         height: auto;
         object-fit: contain;

     }

     .voorpagina td.image:hover img {
         transform: scale(1);
     }

     /* Cart */


     #cart .cart-grid-body {

         height: auto;
     }




     /* PRODUCTPAGINA   */

     .productpagina .left {
          padding: 40px 40px 40px 40px;
          height: auto;
          background: #333333;

     }

     .productpagina .right{
          padding: 40px 40px 40px 40px;
          height: auto;
          background: #333;
     }




/* SM */
@media (max-width:768px) {



}


/* XS */
@media (max-width:576px) {


}