



@media screen and (max-width: 1024px) {
    
    .toggle_menu{cursor: pointer; display:inline-block; z-index: 15; color:#002857; position: relative; top: 29px; font-size: 30px; line-height: 0px; margin-left: 30px;}
    .main_nav ul.main_cw_menu{padding: 30px;  transition: all 0.5s; opacity: 0; text-align: left; margin: 0px; display: block;  position: fixed;
    height: calc(100vh - 105px);  overflow-y: auto;  background: #fff;  width: 420px;  max-width: 90%;  line-height: 22px;  box-shadow: -6px 30px 15px 0px rgb(0 0 0 / 20%);
    right: -500px;  top: 105px;   padding-bottom: 80px;}
    .main_nav ul.main_cw_menu.open{right: 0px; opacity: 1;}
    .main_nav ul.main_cw_menu li{position: relative; z-index: 2; display: block; margin-left: 0px; padding-top: 20px; }
    

    .main_nav ul.main_cw_menu li a{font-size: 22px; display: block;}
    .main_nav ul.main_cw_menu:after{z-index: 1; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background:#fff url(../images/icons/57.png) center bottom 90px no-repeat; }
    .main_nav ul.main_cw_menu:before { transition: opacity 0.3s;  content: ""; background-color: #333E48;  width: 0;  height: 0; position: fixed;  left: 0;  top: 105px;  opacity: 0.3;}
    .main_nav ul.main_cw_menu.open:before {width: 100vw;height: 100vh;  opacity: 0.9;}
    #main_content{padding: 0 20px;}
    
     

   

}



/*mobiel*/
@media screen and (max-width: 768px) {
  body {margin: 63px 0px 0px 0px; overflow-x: hidden;}
 .header{height: 63px;} 


    
h1{font-size: 26px;  line-height: 34px;}
h2{font-size: 24px;  line-height: 32px;}
h3{font-size: 22px;  line-height: 30px;}


.logo {width: 200px; height: 63px; background-size: contain; background-position: center;  margin: 0px;  position: absolute; left: 50%; margin-left: -100px; z-index: 12;}  
.widget_shopping_cart_content { top: 15px; height: 32px; width: 37px; display: inline-block; margin-right: 0px;}
.toggle_menu {margin-left: 0px; position: absolute; left: 15px;  width: 22px; font-size: 30px; top: 15px;}

.main_nav ul.main_cw_menu{ height: calc(100vh - 63px); top: 63px; }
.main_nav ul.main_cw_menu:before {top: 63px;}
.main_nav ul.main_cw_menu li{padding-top: 14px; }
.main_nav ul.main_cw_menu li a{font-size: 18px;}
  
.widget_shopping_cart_content .minicart_panel { top: 63px;     height: calc(100vh - 63px);}
.widget_shopping_cart_content:before{top: 63px;}
 
.row.show_desktop{display: none !important;}
.row.show_mobiel{display: block !important;}
.extra_mobiel{display: inline-block !important;}
.extra_desktop{display:none !important;}


.top_klein{padding-top: 15px}
.top_groot{padding-top:40px}
.bottom_klein{padding-bottom: 15px;}
.bottom_groot{padding-bottom: 40px;}

/*breadcrumbs*/
#breadcrumbs {padding: 15px 20px 15px;height: auto;}


/*hero*/
.hero{overflow: hidden;}
.hero .hero_mobile{display: block;}
.hero .mobile_active p:nth-child(2){display: none;}
.hero ul li>p { height: calc(100vh - 63px) !important; max-height:  calc(100vh - 63px) !important;}
.hero ul li>p img {height: calc(100vh - 63px); width:auto; max-width: none; position: absolute; left: 50%;  transform: translate(-50%, 0);  }
.hero ul li>p.hero_mobile img{height: 100%; width: auto;}

.hero .message_wrapper{display: block; padding: 60px 10px 0px; align-items: normal;}
.hero .message_wrapper .text{width: 100%; text-align: center;}
.hero-heading{font-size: 28px; line-height: 34px;}
.hero-caption{font-size: 18px; line-height: 24px;}
    



/*titel*/
.row.titel{max-width: 900px; margin: 0 20px}
.titel_intro {font-weight: 700;display: block;  margin: 0 auto }





.row.wysiwyg, .row.dubbele_wysiwyg {padding: 10px 0px; }
.row.wysiwyg p, .row.dubbele_wysiwyg p{display: block; }
.row.dubbele_wysiwyg .col:nth-child(2) { padding: 0px 0px 0px 5px;}
.row.dubbele_wysiwyg .col:nth-child(1) { padding: 0px 5px 0px 0px;}

img.alignright {float:none; display: block;  margin: 10px auto;}
img.alignleft {float:none; display: block;  margin: 10px auto;}
img.aligncenter {display: block; margin: 10px auto;o}
a img.alignright {float:none; display: block;  margin: 10px auto;}
a img.alignleft {float:none; display: block;  margin: 10px auto;}
a img.aligncenter {display: block; margin: 10px auto;}



 /*Nieuwsoverzicht*/

.nieuwsoverzicht .nieuwsitem_short{width: 100%; float: left;  padding: 0px; margin-bottom: 30px; }
.nieuwsoverzicht h3, .nieuwsoverzicht_volledig h3{font-size: 16px; line-height:21px; min-height: 0px; }
.nieuwsoverzicht_volledig  .nieuwsitem_short{width: 100%; float: left;  padding: 0px; margin-bottom: 30px;}
.nieuwsoverzicht_cats .button{margin: 5px !important;}
.nieuwsoverzicht .newsbutton{width: 100%; height: 100%; left: 0px;}
    
/*Foto blokken*/


.fotoblok.rechts .left { padding-top: 10px;}
.fotoblok.links .right{padding-top: 10px;}
.fotoblok.rechts .right .image img{left: -10px;}
.fotoblok.links .left .image img{left: -10px;}
.fotoblok .image img{width: calc(100% + 10px);}

.fotoblok .content_meta{padding:30px 0px 15px ; text-align: left; font-size: 22px;  line-height: 28px; width: calc(100vw - 40px); left: 50%;  transform: translateX(-50%)}


/*fotoblok B*/

.fotoblokb .content{display: block;}
.fotoblokb .content .left {width: 100%; padding-right: 0px; }
.fotoblokb .content .right {width: 100%; padding-left: 0px; }
.fotoblokb .content .content_meta{margin: 0;}

.fotoblokb .image img{display: block; width: 100%; height: auto;}
.fotoblokb h1,.fotoblokb h2,.fotoblokb h3,.fotoblokb h4{ font-weight: 600; font-size: 26px;  line-height: 34px; margin: 0px;}
.fotoblokb h1:after,.fotoblokb h2:after,.fotoblokb h3:after,.fotoblokb h4:after {content: ""; display: block; width: 72px; height: 2px; margin: 20px 0px; background-color: #002857;}

/*producten tekst*/
.producten_tekst {display: block; }
.producten_tekst .content_wrapper {width: 100%; padding-right: 0px;}
.producten_tekst .producten_wrapper {width: 100%; margin-top: 30px;}




.blue_bar ul li a{width: 70px; font-size: 9px;}
.shop_sellingpoint li{width: 100%; float: left; padding: 0 0 30px 0px;}

    
/*Productloop*/

ul.products h3 {font-size: 16px !important;  height: 24px}
ul.products .loop_description {font-size: 14px;  padding: 5px 0px;}
.woocommerce ul.products li.product .price { font-size: 16px !important;  margin: 0px 0px 10px;}
ul.products .button { font-size: 0px; width: 50px; padding: 0px;  top: -5px;}
ul.products .button:before{content: "\f217"; font-family: "Font Awesome 5 Free"; display: block; top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; font-size: 16px; text-align: center;}

/*toon eerst maar 4 producten uit de loop op single en in archive*/
.show_all_products_wrapper{display: block; text-align: center;padding-top:20px;}


/*sidebar*/
.productfilter .sidebar_element>span, .productfilter>span {  padding: 4px 10px; margin: 5px; display: inline-block;}





/*Single product*/

.productwrapper { display: block; }
.woocommerce.single-product div.product {margin-top: 30px;}
.woocommerce div.product div.wijnhuis { width: 100% !important;  padding-top: 0px;}
.woocommerce div.product div.summary{padding-right: 0px;  width: 100% !important; margin-bottom: 15px;}

.woocommerce div.product .single_description{display: block; padding-right: 0px;}
.woocommerce div.product form.cart { width: 100%; float: left;}
.woocommerce div.product .woocommerce-product-gallery{float: right !important; width: 100% !important; padding: 0px;}



.woocommerce.single-product .wine_detail{margin-top: 60px; padding: 40px 0px;}
.wine_detail_map{width: 100%; }
.wine_detail_map .quote{font-size: 24px; line-height: 30px; max-width: 100%; padding: 20px 0px 20px 0px; }

.woocommerce.single-product .wine_detail .wine_detail_img{width: 100%; float: left; padding-top: 0px;}
.woocommerce.single-product .wine_detail .wine_detail_img p{width: 100%; left: 0;;}


.woocommerce.single-product .up-sells, .woocommerce.single-product .related {display: block; width: 100%; float: left;}
.woocommerce.single-product .up-sells h2, .woocommerce.single-product .related h2{text-align: center;}
.woocommerce.single-product .up-sells h2:before, .woocommerce.single-product .related h2:before{ content: ""; display: block; width: 72px;  height: 2px; margin: 20px auto; background-color: #002857;}






/*Cart*/

.woocommerce-cart #main_content:before {display: none}
.woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals{width: 100%; float: left; padding: 0 0px;}
.woocommerce-cart .woocommerce-cart-form {padding-right: 0px;}
.woocommerce-cart h1, .woocommerce-cart h2{margin-bottom: 30px;}
.woocommerce-cart .woocommerce-cart-form table tr{position: relative;}
.woocommerce-cart .woocommerce-cart-form table tr:nth-child(2n) td {background-color: #fff !important;}
.woocommerce-cart .woocommerce-cart-form table td {border-bottom: 1px solid #fff; }
.woocommerce-cart .woocommerce-cart-form table tr td.product-thumbnail{display: block; text-align: center !important;background-color: #f1f1f1 !important;}
.woocommerce-cart .woocommerce-cart-form table .product-thumbnail:before{display: none;}
.woocommerce-cart .woocommerce-cart-form table .product-remove{position: initial}
.woocommerce-cart .woocommerce-cart-form table a.remove {position: absolute !important; top: 10px; z-index: 1; left: -10px;}


.woocommerce-cart .woocommerce-cart-form  button[name="update_cart"] {display: none !important;}
.woocommerce-cart .woocommerce-cart-form .continue_shopping{margin-right: 10px;padding: 8px 0px; background: transparent; text-decoration: underline;  color:#333E48 !important; float: left; margin: 0px; display: inline-block !important; width: auto !important;}
.woocommerce-cart .woocommerce-cart-form .button.checkout{padding: 8px 12px;float: right; margin: 0px; display: inline-block !important; width: auto !important;}

.woocommerce-cart .cart-collaterals{position: relative; padding-left: 0px; padding-right: 0px; }
.woocommerce .cart-collaterals .cross-sells h5{font-size: 22px; line-height: 25px; margin: 40px 0px 20px;  padding:0 20px;}
.woocommerce .cart-collaterals .cross-sells .products li{width: 48% !important}



/*Checkout & Woocommerce formulieren*/
 .woocommerce-checkout #main_content{padding: 0px;}
.woocommerce-checkout .woocommerce-error{width: 100%}
.woocommerce-checkout .woocommerce-form-login-toggle{width: 100%; padding: 0px 20px !important;}
.woocommerce-checkout .woocommerce-form-login{width: 100%; padding: 20px !important; border-right: none !important; margin-top: 20px !important;}


.woocommerce-checkout #main_content:before{display: none; }
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review{width: 100%; float: left; position: relative; z-index: 2; padding: 20px;}
.woocommerce-checkout  .woocommerce-form-coupon-toggle{width: 100% }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 {width: 100%;}
.woocommerce-checkout #customer_details #ship-to-different-address{font-size: 14px; margin-top: 0px;     }
.woocommerce-checkout #customer_details #ship-to-different-address label{padding-top: 5px;}
.woocommerce-checkout #order_review{padding-left: 20px; background-color:#f3f4f5;}

.woocommerce-checkout .woocommerce-message{width: calc( 100% - 40px);margin-left: 20px; }

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { font-size: 1.25em;}




/*Thank you*/
.woocommerce-order.thankyou{width: 100%;padding:0px 20px 60px 20px;}


.woocommerce-order.thankyou .woocommerce-table{display: block; width: 100%;}
.woocommerce-order.thankyou .woocommerce-table tbody{display: block; }
.woocommerce-order.thankyou .woocommerce-table tbody tr{display: block; width: 100%; }
.woocommerce-order.thankyou .woocommerce-table tbody td {display: block; width: 100%; border-bottom: none; }
.woocommerce-order.thankyou .woocommerce-table .product-name{padding-bottom: 10px; vertical-align: bottom;}
.woocommerce-order.thankyou .woocommerce-table .product-name .thumb{display: block;  margin-bottom: 10px; text-align: center;}

.woocommerce-order.thankyou .woocommerce-table .product-name a{width: 100%; padding-left: 10px;display: block; }
.woocommerce-order.thankyou .woocommerce-table .product-total{padding-right: 10px;}


.woocommerce-order.thankyou-right{width: 100%;background-color: #e8e7e7; padding-left: 10px; padding-right:10px;  padding-top: 30px;}
.woocommerce-order.thankyou-right h3{font-size: 20px; line-height: 24px;}
.woocommerce-order.thankyou-right h4{margin-top: 90px;font-size: 20px; line-height: 24px;}

/*acountpagina*/
.woocommerce-account:not(.logged-in) #main_content:before { display: none;}
.woocommerce-account.logged-in #main_content:before {display: none;}
.woocommerce form.login, .woocommerce form.register{padding: 0px 0px 20px; border: none;}


.woocommerce-account .u-column1.col-1{padding: 0 20px;}
.woocommerce-account .u-column2.col-2, .woocommerce-account  .woocommerce-MyAccount-content{background-color:#e8e7e7; min-height: 0px; padding: 40px 20px 40px;  }
.woocommerce-account  .woocommerce-MyAccount-content h3{font-size: 24px;}
.woocommerce-account  .woocommerce-MyAccount-content fieldset{margin: 40px 0px;}
.woocommerce-account .woocommerce-ResetPassword{padding: 0 60px 120px 0px; width: 50%;}
.woocommerce-MyAccount-navigation ul{list-style: none; margin:0px 20px;  padding: 0px}

.woocommerce-account .woocommerce-orders-table__row .woocommerce-orders-table__cell-order-actions{padding-bottom: 15px;}
.woocommerce-account .woocommerce-orders-table__row a.button{margin-right: 0px;}


#sb_instagram{ margin-left: 0px; margin-top: 40px; width: calc(100% ) !important; padding-bottom: 30px !important}
#sb_instagram.sbi_col_4 #sbi_images .sbi_item{padding: 2px !important; width: 50%;}
    
footer { margin-top: 0px;}
footer .footer_wrapper { padding: 30px 0px 0px;}
footer .col{width: 100% !important}
footer .logo_wrapper{text-align: center; padding: 0 20px; }
footer .logo_wrapper a{background-position: center; width: 280px; height: 38px; margin: 0 auto; }
footer .footer_wrapper ul>li {float: left;  width: 100%; text-align: center; margin-left: 0px !important;}
footer .footer_wrapper .footer_nav{padding: 0px 20px;}
footer .footer_wrapper .social_nav {padding-left: 20px; padding-top: 30px;}
footer .footer_wrapper .copyright {text-align: center;}
footer .footer_wrapper .extra_content{display: block; padding: 6px 20px;}



}