/*
 Theme Name:   Magneet Agency Child
 Theme URI:    https://bureaumagneet.nl/
 Description:  Thema voor custom code
 Author:       Magneet Agency
 Author URI:   https://bureaumagneet.nl/
 Template:     bricks
 Version:      januari 2024
 Text Domain:  bricks
*/

/* header */
@media (max-width: 991px) {
    .bm-nav-desktop,
    .bm-header-cta-container {
        display: none !important;
    }
}


/* tekstlinkjes */

.bm-t-container a {
	text-decoration: underline;
	color: #c8544a;
	font-weight: 500;
}


/*Section aanpassen media*/

.s-bm-media-klein {
width: 100%;
}

.c-bm-media-klein {
width: 100%;
max-width: 1280px;
align-content: center;
}

.mc-bm-media-klein {
width: 100%;
max-width: 800px;
}

.s-bm-media-groot {
width: 100%;
display: flex;
justify-content: center;
}

.c-bm-media-groot {
width: 100%;
max-width: 1280px;
}

.mc-bm-media-groot {
width: 100%;
}

.s-bm-media-fullscreen {
width: 100%;
}

.c-bm-media-fullscreen {
width: 100%;
}

.mc-bm-media-fullscreen {
width: 100%;
}

.iframe-img-bm-media-klein {
	width:100%;
}

.iframe-img-bm-media-groot {
	width: 100%;
	height: 530px;
}

.iframe-img-bm-media-fullscreen {
	width:100%;
	height: 720px;
	object-fit:cover;
}

/*Placeholder*/
.media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-v-play-btn {
    font-size: 10rem;
}

/*Grid classes*/
.twee-items{
	grid-template-columns:repeat(auto-fit, minmax(490px, 1fr));
}

.drie-items{
	grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
}

.vier-items{
	grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}

/*Bovenruimte*/
.ge-top{
	padding-top:0rem;
}

.k-top{
	padding-top: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 1.25)), 3rem);
}

.m-top{
	padding-top: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 2.5)), 6rem)
}

.gr-top{
	padding-top: clamp(6rem, calc(6rem + ((1vw - 0.48rem) * 3.75)), 9rem);
}
/*Onderruimte*/
.ge-bottom{
	padding-bottom:0rem;
}

.k-bottom{
	padding-bottom: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 1.25)), 3rem);
}

.m-bottom{
	padding-bottom: clamp(4rem, calc(4rem + ((1vw - 0.48rem) * 2.5)), 6rem)
}

.gr-bottom{
	padding-bottom: clamp(6rem, calc(6rem + ((1vw - 0.48rem) * 3.75)), 9rem);
}

/*CTA*/
.bm-header-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;	
    gap: 10px;
	width: 100%;
    max-width: 250px;
    justify-content: flex-end;
}

.cta-container {
    display: flex;
    gap: 10px;
	margin-top:2rem;
}

.cta-space {
	margin-top: 2rem;
}

.hero-btn-container .pri-cta{
    padding: 5px 24px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
	font-weight: bold;
}

.hero-btn-container .sec-cta{
    padding: 5px 24px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
	border: 2px solid #ffffff;
	font-weight: bold;
}

.hero-btn-container .pri-cta {
  background-color: #C8534A;
  color: #fff;
}

.hero-btn-container .sec-cta {
    background-color: transparent;
    color: #fff;
}

.hero-btn-container .pri-cta:hover {
  	background-color: #AC3D35;
  	color: #fff;
	border: 2px solid #AC3D35;
}

.hero-btn-container .sec-cta:hover {
    background-color: transparent;
  	color: #C8534A;
	border: 2px solid #C8534A;
	font-weight: bold;
}

.button-icon {
    width: 15px;
    height: 15px;
	fill:currentColor;
	display: flex;
}

.pri-cta {
    color: #fff;
	background-color: #C8534A;
    font-weight: 600;
    border: 2px solid #C8534A;
    border-radius: 50px;
    padding: 5px 24px;
	transition: all 0.2s ease-in-out;
}

.pri-cta:hover{
	color: #ffffff;
	background-color: #AC3D35;
	border: 2px solid #AC3D35;

}

.sec-cta {
    color: #C8534A;
    font-weight: 600;
    border: 2px solid #C8534A;
    border-radius: 50px;
    padding: 5px 24px;
	transition: all 0.2s ease-in-out;
}

.sec-cta:hover {
    color: #AC3D35;
    border: 2px solid #AC3D35;
}

.pri-foot-cta {
    color: #fff;
	background-color: #C8534A;
    font-weight: 600;
    border: 2px solid #C8534A;
    border-radius: 50px;
    padding: 5px 24px;
	transition: all 0.2s ease-in-out;
}

.pri-foot-cta:hover {
	color: #ffffff;
	background-color: #AC3D35;
	border: 2px solid #AC3D35;
}

/* Embed code */
.embed-container { 
    position: relative; 
    overflow: hidden;
    padding-top: 56.25%; /* voor 16:9 verhouding */
    height: 100%;
    width: 100%;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Grid */
.bm-grid-items-container {
	display: grid;
	gap: 30px;
	width: 100%;
}

.bm-grid-items-content {
    width: 100%;
    max-width: 530px;
}

/* Tekst */
/* Standaard styling voor de tekstcontainer */
.bm-t-container {
    /* Andere stijlen die je mogelijk al hebt ingesteld. */
}

/* Als centreren is ingeschakeld */
.bm-t-center {
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
}

/* Als smalle tekst is ingeschakeld */
.bm-t-small {
    max-width: 670px;
}

/* Stijlen om de knoppen te centreren wanneer tekst gecentreerd is */
.bm-t-center .cta-container {
    text-align: center; /* dit is om de knoppen te centreren */
}

/* Tekst met media */

/* Basisopmaak voor de container */
.brxe-container.c-t-img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 70px;
    grid-row-gap: 30px;
}

/* Standaard opmaak voor afbeeldingen */
.dr-t-img img.t-img {
    width: 100%;
}

/* Als huisstijl is ingeschakeld */
.dr-t-img img.t-img.ti-design {
    width: 100%;
    height: 440px;
    object-fit: cover;
}

/* Standaard order voor kinderelementen */
.brxe-container.c-t-img .dl-t-img {
    order: 0;
}
.brxe-container.c-t-img .dr-t-img {
    order: 1;
}

/* Wanneer de volgorde is veranderd */
.brxe-container.c-t-img.t-img-order .dl-t-img {
    order: 1;
}
.brxe-container.c-t-img.t-img-order .dr-t-img {
    order: 1;
}

/*andere styling voor mobiel*/
@media screen and (max-width: 992px) { /* Pas deze breakpoint aan indien nodig */
    .mobile-order {
        display: flex;
        flex-direction: column;
    }

    .mobile-order .<?php echo $text_class; ?> {
        order: 2;
    }

    .mobile-order .<?php echo $base_class; ?> {
        order: 1;
    }
}

/*Wanneer fullscreen is ingeschakeld*/
.t-m-section-full {
    padding: 0rem!important;
	height:90vh;
}

.t-m-fullscreen {
    width: 100%!important;
	padding: 0rem!important;
	height:100%;
}

.t-m-fullscreen .t-img-text {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.t-m-fullscreen .t-m-fullscreen-center {
	width: 100%;
    max-width: 500px;
}

.t-m-fullscreen .bm-media{
	height:100%;
	min-height:100%;
}

.t-m-fullscreen .iframe-img-bm-media {
    min-width: 100%;
	min-height:100%;
}

/* Zoekresultaten */
.bm-search-results {
    margin: 20px 0;
    padding: 0;
}

.bm-search-result {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.bm-search-result-image {
    flex: 1 1 100px;
    margin-right: 20px;
}

.bm-search-result-image img {
    max-width: 100%;
    height: auto;
}

.bm-search-result-content {
    flex: 1 1 calc(100% - 120px);
}

.bm-search-result-content h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

.bm-search-excerpt {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Overzicht */
.mb-ovz-titel-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 2rem;
}

.mb-ovz-titel-wrap img {
    width: 100%;
    max-width: 50px;
}

.mb-ovz-titel-wrap p {
    width: 100%;
    max-width: 410px;
	text-align:center;
}

.cta-container.ovz-cta {
    width: 100%;
    justify-content: center;
}

.bm-ovz-container {
    display: grid;
	width: 100%;
	gap: 30px;
}

.bm-ovz-img-wrapper .bm-ovz-title h3 {
	font-size: 18px;
}

.bm-ovz-img-wrapper {
    display: block;
    overflow: hidden;
    height: 600px;
    position: relative;
}

.bm-ovz-block:hover .bm-ovz-img {
    transform: scale(1.1); /* Inzoomen met een factor van 1.1 */
}

.bm-ovz-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
    overflow: hidden;
}

.bm-ovz-content {
    padding: 3rem;
}

.bm-ovz-excerpt {
    margin-bottom: 2rem;
}

p.bm-ovz-excerpt {
    max-width: 375px;
}

.ter-cta {
	font-weight: 700;
	font-style: italic;
	color: var(--bricks-color-suagdr);
    display: inline-block;
    margin-top: 5px; /* wat ruimte tussen de titel en de knop */
}

.bm-ovz-block:hover .ter-cta {
    color: #ff0000;
}

.bm-ovz-block {
    border-radius: 10px;
    overflow: hidden;
    height: 600px;
}

.bm-ovz-title {
    font-size: 26px;
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: 10px;
	color:#ffffff;
}

.bm-ovz-container {
    margin-bottom: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 2.5)), 5rem);
}

.cta-container.ovz-cta-c {
    width: 100%;
    justify-content: center;
}

/*FAQ*/
.bm-faq-item {
    width: 100%;
}

.bm-faq-question h3 {
    font-size: 24px;
    color: #C8534A;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 800px;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bm-faq-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(32rem, calc(32rem + ((1vw - 0.48rem) * 10)), 40rem), 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  width: 100%;
  max-width: 1259px;
  text-align: left;
  justify-items: center;
	padding-top: 5rem;
}

.fas.fa-plus {
  margin-left: 10px;
  background-color: #C8534A;
  border-radius: 50%;
  color: white;
  padding: 2px;
  padding-top: 1px;
  cursor: pointer !important;
}

.fas.fa-minus {
  margin-left: 10px;
  background-color: #C8534A;
  border-radius: 50%;
  color: white;
  padding: 2px;
  padding-top: 1px;
  cursor: pointer !important;

}

.faq-vgv {
  margin-left: 400px;
  margin-bottom: 30px;
}

.c-hero-1 {
  margin-bottom: 50px;
}

/*Tekst en grote afbeelding*/
.t-a-g-fullscreen-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
	padding:6rem 0rem;
	text-align:center;
}

.t-a-g-fullscreen-center p {
    max-width: 690px;
	width: 100%;
    text-align: center;
    padding-top: 1rem;
}

.bm-media {
    display: flex;
    width: 100%;
    justify-content: center;
	border-radius:20px;
	overflow: hidden;
}

.iframe-groot-img-bm-media {
    height: 600px;
    width: 1280px;
    border-radius: 20px;
    object-fit: cover;
	border: 10px solid #ffffff;
}

/*Tekst en media*/
.additional-text-logo-container {
	display: flex;
	gap:10px;
}

.additional-text-above {
	font-weight:600;
	color: #97d981;
}

.iframe-img-bm-media {
    height: 600px;
    border-radius: 20px;
    width: 100%;
}

.t-img-text {
  	margin-top: 125px;
 	margin-bottom: auto;
}

.t-m-fullscreen-center{
	max-width:515px;
}

.media-spec {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
	gap:20px;
}

.t-media-specs-wrap hr {
  	margin: 0;
  	margin-bottom: 1rem;
}

.media-specs h3 {
  	font-size: 20px;
}

.media-specs p {
	text-align:end;
}

.media-specs {
  	padding: 2rem 0rem;
}


/*Tekst en voordelen*/
.t-v-flex-container {
    display: flex;
    width: 100%;
    gap: 50px;
    padding-top: 15rem;
    padding-bottom: 10rem;
	align-items: center;
}

.t-v-group {
    width: 100%;
}

.logo-groen-container {
    display: flex;
    gap: 10px;
}

.t-v-logo-repeater-group {
    width: 100%;
}

.repeater-container {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  width: 100%;
  max-width: 625px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.repeater-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    gap: 15px;
}

.repeater-teksten {
    width: 100%;
    max-width: 410px;
}

.t-v-img-bg-img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.t-v-logo-groot {
    width: 1100px;
    height: 1100px;
}

/*Tekst met grote afbeelding*/
.s-t-afb-gr {
    background-image: linear-gradient(#000000 78%, #ffffff 50%);
    position: relative;
}

.c-t-afb-gr {
    z-index: 2;
    position: relative;
}

.t-a-g-bg-img {
    width: 100%;
    position: absolute;
    top: 270px;
}

/*Stappen*/
.x-content-timeline_meta {
    display: none;
}

/*Grid team*/
.bm-grid-items-img {
    border-radius: 20px;
    width: 100%;
    object-fit: cover;
}

.bm-grid-items-naam {
    margin: 0;
	font-weight: 600;
    font-size: clamp(22px, calc(1.375rem + ((1vw - 7.68px) * 0.3125)), 26px);
}

.bm-grid-items-ctn {
    padding-top: 1rem;
    padding-left: 1.5rem;
}

.bm-grid-items-email .fa-envelope {
    color: #C8534A;
    margin-right: 1rem;
}

.d-grid-t-img-wrap {
    width: 100%;
    text-align: center;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.d-grid-t-wrap {
    width: 100%;
    max-width: 410px;
}

.bm-grid-logo {
    width: 100%;
    height: 40px;
}

.d-grid-img-wrap {
    padding-bottom: 2rem;
}

.d-grid-t-wrap h2 {
    line-height: 1.2;
}

.d-grid-t-wrap p {
    line-height: 1.3;
    padding-top: 1rem;
}

/*Overige*/
.bricks-nav-menu{
	align-items:center;
}

@media screen and (max-width:992px){
	.cta-container{
		flex-direction:column;	
	}
	
	.iframe-img-bm-media {
    	height: 300px;
    	object-fit: cover;
	}
	
	.t-img-text {
    	margin-top: 0;
	}
	
	.t-a-g-bg-img {
		display:none;
	}
	
	.d-footer-cta-wrap.brxe-div {
    	flex-direction: column!important;
	}
	
	.d-footer-cta-t-wrap.brxe-div {
    	margin-top: 0rem!important;
    	margin-right: 0rem!important;
    	margin-bottom: -10rem!important;
		margin-left: 0rem!important; 
		padding-bottom: 15rem!important;
		z-index:0!important;
	}
	
	.t-v-flex-container {
    	flex-direction: column;
	}
	
	.repeater-container {
		padding:2rem;
		height:100%;
	}
	
	.bm-grid-items-container {
    	display: flex;
    	gap: 30px;
    	width: 100%;
    	flex-direction: column;
	}
	
	.bm-grid-items-content {
    	height: 100%;
	}
	
	.bm-ovz-block, .bm-ovz-img-wrapper {
		height: 400px;
	}
	
	.c-bm-media-groot {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.iframe-img-bm-media-groot {
		width: 100%;
		height:100%;
	}
	
	.bm-grid-items-img {
    	height: 350px;
	}
	
	.pri-foot-cta, .pri-cta{
		padding:5px 10px;
	}
	
	.footer-logo {
    	display: flex;
    	justify-content: center;
	}
	
    .footer-logo .desktop-footer-logo {
        display: none!important;
    }
    .footer-logo .mobile-footer-logo {
        display: block!important;
    }
	
}

/* Taal kiezen */
ul#menu-main-menu {
    align-items: center;
}

li.lang-item-first a img {
    height: auto !important;
    width: 20px !important;
}

/* H2 tekst */
.s-t-img h2 {
	margin-bottom: 1rem;
}

/*Slider*/
.splide__slide{
	display:flex;
	justify-content:center;
}


/*Footer cta*/
.d-footer-cta-wrap .footer-logo{
    width: 100%;
}

.footer-logo .mobile-footer-logo {
    display: none;
	z-index:1;
	position: relative;
	width: 100%;
    max-width: 250px;
}

.footer-logo .desktop-footer-logo {
    display: block;
	position:relative;
	z-index:1;
}

/*Menu eerder zichtbaar*/
@media screen and (max-width:1280px){
	.bm-off-canvas, .bm-burger{
		display:block!important;
	}
	    .d-bm-nav-dt.brxe-div {
        display: none!important;
    }
}

/* USP's */
.repeater-additional-text {
	font-size: 16px;
}