/* *********** Mach3 *********** */
.content-22 .content-heading {
    margin-bottom: var(--elements--headings--content-heading--margin-bottom) !important;
}

/*** menu sticky ***/
#layout-page {
    height: auto !important;
}

/* *** content-02 3 kolommen *** */
.content-02 .content-02-item:nth-child(4) {
    display: none;
}

@media (min-width: 1024px) {
    .content-02 .lg\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.custom-popup-open {
	.custom-popup,
	.custom-popup-inner {
		opacity:1;
		visibility:visible;
		
	}
	.custom-popup-inner {
		transition-delay:.3s;
		transform:translateY(0);
	}
}

.custom-popup {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow:auto;
	opacity:0;
	visibility:hidden;
	transition:all .6s;
	z-index:100;
	display:flex;
	align-items:flex-start;
	padding:30px;
}

.custom-popup-overlay {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,.9);
	opacity:.95;
}

.custom-popup-inner {
	background-color:#1e487c;
	margin:auto;
	padding:30px;
	color:#fff;
	opacity:0;
	visibility:hidden;
	transition:all .6s;
	position:relative;
	max-width:640px;
	align-self:center;
	text-align:center;
	font-size: 1.5em;
	line-height: 1.2;
	transform:translateY(-25%);
	
	h2 {
		color:#fff;
		line-height:1.2;
		margin-bottom:1em;
	}
	
	img {
		width:320px;
		margin:0 auto;
		background-color:#fff;
	}
	h3 {
		color:#fff; 
		margin:30px 0px;
	}
	a {
		display: inline-block; 
		color: #fff; 
		background: #dd2536; 
		text-decoration: none; 
		padding: 7px 20px 10px 20px; 
		margin-top: 30px;
	}
}

.custom-popup-close {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.75rem;
	position: absolute;
	right: 0;
	top: 0;
	cursor:pointer;
}

.js_popup{
	position:fixed;
	left:50%;
	top:50%;
	z-index:950;
	background:#fff;
	transform:translate(-50%,-50%);
	width:600px;
	max-width:90%;
	
	&:before{
		content:'';
		background:#000;
		opacity:0.6;
		position:fixed;
		z-index:-1;
		left: -50vw;
		top: -50vh;
		right: -50vw;
		bottom: -50vh;
	}
	.js_popup_close{
		position:absolute;
		right:0;
		top:0;
		padding:10px;
		font-size:18px;
		text-decoration:none;
		line-height: 0.5em;
		
		&:before{
			content:'x';
		}
	}
}
/* *********** BVDO *********** */

/* *** Zondagsluiting *** */
.sunday-popup-open .sunday-popup,
.sunday-popup-open .sunday-popup-inner {
    opacity: 1;
    visibility: visible
}

.sunday-popup-open .sunday-popup-inner {
    transition-delay: .3s;
    transform: translateY(0)
}

.sunday-popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    padding: 30px
}

.sunday-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #1e487c;
    opacity: .8
}

.sunday-popup-inner {
    background-color: #1e487c;
    margin: auto;
    padding: 30px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    position: relative;
    max-width: 640px;
    align-self: center;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.2;
    transform: translateY(-25%)
}

.sunday-popup-inner h1,
.sunday-popup-inner p {
    color: #fff;
    line-height: 1.5;
    margin-bottom: 1em
}

.sunday-popup-inner p {
    font-size: .8em;
}

/* *** STANDAARD AANPASSINGEN SHOPnext *** */
/* bullets outside */
.content-41 .content-41-text ul {
    list-style-position: outside;
}

@media (max-width: 767px) {
    /* ook padding op smallere breedtes */
    .md\:col-sm {
        padding: calc(var(--theme--spacing--column--padding-y)/1.5) calc(var(--theme--spacing--column--padding-x)/1.5);
    }
}
/* tekst laten lijnen met overige elementen */
.content-39 .md\:col-sm.lg\:col {
    padding-left: 0;
}
@media (max-width:767px) {
    .content-39 .md\:col-sm.lg\:col {
        padding-right: 0;
    }
}

/* *** SHOP tijdelijk nog niet live *** */

/* uitschakelen */
.account-button, /* inlogknop */
.shopping-cart-trigger, /* carticoon */
.footer-02 /* logo balk footer */ {
    display: none;
}

/* header beter uitlijnen nu shoponderdelen weg zijn */
.header-02 .container {
    align-items: end !important;
}

.header-01 {
	display:none;
}

/* knoppen in header */
@media (min-width:1024px) {
	.header-01 {
		display:flex;
	}
	
	
	.header-02 .logo{
		order:0;
		grid-column: span 2 / span 2;
	}
	.header-02 .search{
		display: flex;
		justify-content: flex-end;
	}
}
/* offerte en afspraak in menu  */ 
.search a.btn-primary {
    color: #fff;
}

.search a.btn-primary:hover {
    text-decoration: none;
}

.search a.btn-primary[href*="afspraak-maken"] {
    border-color: #1e487c !important;
    background-color: #1e487c !important;
    margin-left: .5rem!important;
}

.search a.btn-primary[href*="afspraak-maken"]:hover {
    border-color: #dd2536 !important;
    background-color: #dd2536 !important;
}

@media (max-width: 1023px){
    .search .btn-primary {
        padding: calc(var(--elements--buttons--button-small--padding-y)/2) calc(var(--elements--buttons--button-small--padding-x)/2)!important;
    }
    .search {
        display: inline-flex;
        justify-content: flex-end;
        position: absolute;
        right: 2rem;
    }
    .logo {
        align-items: flex-end!important;
    }
    .nav-handler-open, .nav-handler-open a {
        bottom: 0!important;
        position: absolute;
        z-index: 1000;
    }
    .search a.btn-primary[href*="afspraak-maken"], 
    .search a.btn-primary[href*="offerte-aanvragen"] {
        font-size: 0;
        display: block;
        padding-top: 8px!important;
        width: 36px;
        height: 36px;
    }

    .search a.btn-primary[href*="afspraak-maken"]::before {
        content: "\f274";/* calendar */
        font-family: 'Font Awesome 5 Free';
        font-size: 14px;
    }
    .search a.btn-primary[href*="offerte-aanvragen"]::before {
        content: "\f02c";/* pricetag */
        font-family: 'Font Awesome 5 Free';
        font-size: 13px;
        font-weight: 600;
    }
}
/* telefoonnummer in menu */

.header-02 .address-phone {
    position: absolute;
    right: var(--theme--spacing--grid--margin);
    top: 0;
    text-decoration: none;
    color: #1a202c;
    font-size: 1.2em;
    font-weight: 600;
}
.header-02 .address-phone:hover,
.header-02 .address-phone:hover::before {
    color: #dd2536;
}
@media (max-width:1023px) {
    .header-02 .address-phone {
        display: none;
    }
}
/* zoekfunctie uitschakelen */
.search-form {
    display: none;
}
/* *** ONDERDELEN *** */

/* buttons afspraak en offerte overal dezelfde kleur */
a.fw_button[href*="afspraak-maken"],
a.fw_button[href*="offerte-aanvragen"]:hover {
    border-color: #1e487c !important;
    background-color: #1e487c !important;
}

a.fw_button[href*="afspraak-maken"]:hover,
a.fw_button[href*="offerte-aanvragen"] {
    border-color: #dd2536 !important;
    background-color: #dd2536 !important;
}

/* meer ruimte tussen 2 knoppen naast elkaar */
[class*="fw_button"]+[class*="fw_button"],
[class*="btn"]+[class*="btn"],
[class*="btn"]+[class*="fw_button"],
[class*="fw_button"]+[class*="btn"] {
    margin-left: 1em;
}

/* op smalle formaten knoppen onder elkaar */
@media (max-width: 479px) {

    [class*="fw_button"]+[class*="fw_button"],
    [class*="btn"]+[class*="btn"],
    [class*="btn"]+[class*="fw_button"],
    [class*="fw_button"]+[class*="btn"] {
        display: table;
        margin-top: 1em;
        margin-left: 0;
    }
}

/* *** HEADER *** */

/* telefoon volle kleur */
.header-01 .icon-text>svg {
    opacity: 1;
}

/* offerte en afspraak topbar */ /* zodra de shop live is */
.header-01 a.btn-primary {
    color: #fff;
}

.header-01 a.btn-primary:hover {
    text-decoration: none;
}

.header-01 a.btn-primary[href*="afspraak-maken"] {
    border-color: #1e487c !important;
    background-color: #1e487c !important;
}

.header-01 a.btn-primary[href*="afspraak-maken"]:hover {
    border-color: #dd2536 !important;
    background-color: #dd2536 !important;
}

/* telefoon verwijderen uit topbar */
/* .header-01 .icon-text {
    display: none;
} */

/* usp's in topbar (zijn toegevoegd met js) */
.header-01 ul.poduct-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.header-01 ul.poduct-list li::before {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #dd2536;
    margin-right: 5px;
}

/* * Mobiel menu * */

/* logo groter */
.logo img {
    max-height: unset;
}
/* logo niet verdwijnen bij scroll */
#layout-header {
    top: 0;
}
/* koppen verwijderen */
.nav-pages .legend-sm {
    display: none;
}

/* *** FOOTER *** */

/* * adresgegevens en footer menu * */

/* links */
.address,
#layout-footer .address,
#layout-footer .footer-menu {
    padding-left: 15px;
}

.address a,
#layout-footer .address a,
#layout-footer .footer-menu a {
    text-decoration: none;
}

.address a:hover,
#layout-footer .address a:hover,
#layout-footer .footer-menu a:hover,
.address a:hover::before,
#layout-footer .address a:hover::before,
#layout-footer .footer-menu a:hover::before {
    color: #dd2536;
}

/* icoontjes */
[class^="address-"]::before,
#layout-footer .footer-menu a::before {
    font-family: 'Font Awesome 5 Free';
    color: #1e487c;
    font-weight: 900;
    margin-left: -15px;
    margin-right: 5px;
}

.address-location::before {
    content: "\f3c5";
    /*marker*/
}

.address-phone::before {
    content: "\f095";
    /*phone*/
}

.address-email::before {
    content: "\f0e0";
    /*envelope*/
}

.address-linkedin::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f08c";
    /*linkedin*/
}

/* eerste kop uitschakelen omdat Mach3 niet overal dezelfde footer doorvoert */
.footer-01 .container .grid .footer-column:first-of-type .footer-heading {
    display: none;
}

/* footer menu */
#layout-footer .footer-menu a::before {
    content: "\f054";
    /* chevron right */
}

/* offerte en afspraak zelfde als de rest van de website */
.footer-01 a.fw_button {
    color: #fff;
    text-decoration: none;
}

.footer-01 a.fw_button:hover {
    text-decoration: none;
}

.footer-01 a.fw_button[href*="offerte-aanvragen"] {
    margin-bottom: 1em;
}

/* mooier op smallere breedtes */
@media (max-width:767px) {
        .footer-01 .footer-column {
            margin:auto;
            display: table;
        }
    }


/* *** BLOKKEN *** */
/* * content-02 * */

/* minder marge als 2 achter elkaar */
.content-02+.content-02 {
    margin-top: -1rem;
    padding-top: 0;
}

/* ook op 768 3 kolommen */
@media (min-width: 768px) {
    .content-02 .md\:grid-cols-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* * content-09 * */

/* achtergrond toevoegen voor leesbaarheid */
.content-09 .container .relative .container .col {
    background: #143052b3;
    font-weight: 400;
}

/* lijn om knop afspraak */
.content-09 a.fw_button[href*="afspraak-maken"] {
    border-color: #ffffff !important;
}

/* padding minder */
@media (max-width:1279px) {
    .content-09 .container .relative .container .col {
        padding: var(--theme--spacing--column--padding-y) var(--theme--spacing--column--padding-x) !important;
    }
}

/* * content-22 * */
/* knop losmaken van onderkant */
@media (max-width: 767px) {
    .content-22-button {
        margin-bottom: 2em;
    }
}

/* lijn om knop afspraak */
.content-22 a.fw_button[href*="afspraak-maken"] {
    border-color: #ffffff !important;
}

/* titel losmaken van foto */
.content-22-title {
    margin-top: 2em;
}

/* tekst losmaken van onderkant */
.content-22-text {
    margin-bottom: 2em;
}

/* padding minder */
@media (max-width: 1279px) {
    .content-22 .gap-grid {
        gap: 0 !important;
    }

    .content-22 .md\:col-sm.md\:col-span-2.lg\:col {
        padding-left: 1.5em;
        padding-right: 1.5em;

    }
}

/* op smalle formaten knoppen onder elkaar */
@media (min-width:768px) and (max-width: 1023px) {
    .content-22 [class*="fw_button"]+[class*="fw_button"],
    .content-22 [class*="btn"]+[class*="btn"],
    .content-22 [class*="btn"]+[class*="fw_button"],
    .content-22 [class*="fw_button"]+[class*="btn"] {
        display: table;
        margin-top: 1em;
        margin-left: 0;
    }
}

/* op smalle formaten foto fatsoenlijke hoogte */
@media (max-width:767px){
    #content-22-113 > div > div > div:first-of-type {
        min-height: 250px;
    }
}
/* *** PAGINA'S *** */

/* * Categoriepagina's * */

/* achtergrond bij rij foto's verwijderen */
#content-02-122,
#content-02-138,
#content-02-140,
#content-02-142,
#content-02-144,
#content-02-146 {
    background-color: transparent;
}

/* productlijsten */
ul.product-list {
    columns: 1;
}

@media (min-width: 480px) {
    ul.product-list {
        columns: 2;
    }
}
@media (min-width: 1024px) {
    ul.product-list {
        columns: 3;
    }
}

@media (min-width: 1280px) {
    ul.product-list {
        columns: 4;
    }
}

/* afwijkend voor vlamwerend */
#content-41-125 ul.product-list {
    columns: 1;
}

@media (min-width: 1024px) {
    #content-41-125 ul.product-list {
        columns: 2;
    }
}

ul.product-list li {
    padding-left: 10px;
}

ul.product-list li::marker {
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #dd2536;
}

/* minder marge boven producten */
.content-02+.content-41 {
    margin-top: 0;
}


/* * Home * */
/* ruimte van uitgeschakelde categorie Vlamwerend verbergen */
#content-02-115 .content-02-item:nth-of-type(3) {
    display: none;
}

/* blok rene ron aanpassen */
#content-31-160 .container div:first-of-type {
    padding-left: 0;
}

#content-31-160 .container div:last-of-type {
    padding-right: 0;
}
#content-31-160 .md\:col-sm.lg\:col {
    height: 100%;
}
#content-31-160 .content-31-text {
    height: 100%;
}
#content-31-160 .content-31-text p:last-of-type {
    position: absolute;
    bottom: 0;
}
@media (max-width: 767px) {
    #content-31-160 .container > div {
        padding-left: 0;
        padding-right: 0;
    }
}

/* * Over ons * */

/* blok met 3 foto's */

#content-11-161 .content-11-item:not(:first-of-type) {
    padding: 0;
    height: 200px;
}
#content-11-161 .content-11-item-image.bg-cover:first-of-type {
    background-color: #dddeea;
}

#content-11-161 .content-11-item:not(:first-of-type) .relative.z-20 {
    width: 100%;
    background: #ffffffb3;
    bottom: 0;
    position: absolute!important;
    padding: 5px;
    text-align: center;
}
@media (min-width: 768px){
    #content-11-161 .content-11-item:not(:first-of-type) {
        height: 251px;
    }    
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #content-11-161 .content-11-item:not(:first-of-type) {
        height: 339px;
    }    
}

@media (max-width:1279px) {
    #content-11-161 .content-11-item:first-of-type {
        padding: 0;
    }
}
@media (max-width:767px) {
    #content-11-161 .content-11-item:first-of-type {
        grid-column: span 3/span 3!important;
    }
}
/* blok magazijn */
#content-23-163 [data-ratio="16/9"]:before {
    padding-bottom: 0!important;
}
#content-23-163 [data-ratio]>:first-child {
    position: unset!important;
}
@media (max-width:767px) {
    #content-23-163 .container .grid div:first-of-type {
        display: grid;
        grid-area: 2;
    }
    #content-30-136 .md\:col-sm.md\:col-span-3.lg\:col {
        padding: 0;
    }
}
/* sectie 6 foto's */
section#content-15-162 {
    background: #1E4872;
}
#content-15-162 .content-15-label {
    display: none;
}
#content-15-162 .grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
}
#content-15-162 [data-ratio="1/1"]:before {
    padding-bottom: 56.25% !important
} /* data-ratio 16/9 */
#content-15-162.content-15 .content-15-item-image:hover img {
    transform: unset!important;
}

/* lijst sterke punten */
.usp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 4fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.usp-div1 {grid-area: 1 / 1 / 2 / 3;}

.usp-div2 {grid-area: 2 / 1 / 3 / 2;}

.usp-div3 {grid-area: 2 / 2 / 3 / 3;}

.usp .product-list {
    columns: 1 !important;
}

/* * Offerte aanvragen * */
/* uitgeschakelde header neemt nog ruimte in */
#content-08-147 .content-08-heading {
    display: none;
}

/* * Afspraak maken * */
/* uitgeschakelde header neemt nog ruimte in */
#content-08-148 .content-08-heading {
    display: none;
}
/* * Contact * */
.content-08 .address {
    color: #1e487c;
}