/*
 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
*/

div#brxe-fjuegh {
    width: 100%;
    max-width: 665px;
}

/*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: 720px;
}

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

/*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-fill, minmax(490px, 1fr));
}

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

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

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

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

.m-top{
	padding-top:clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 3.125)), 6rem);
}

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

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

.m-bottom{
	padding-bottom:clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 3.125)), 6rem);
}

.gr-bottom{
	padding-bottom:clamp(5rem, calc(5rem + ((1vw - 0.32rem) * 4.1667)), 9rem);
}

/*CTA*/
.bm-header-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;	
    gap: 10px;
}

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

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

.pri-cta, .sec-cta {
    padding: 6px 12px;
    border: 1px solid #000;
	transition: background-color 0.2s, color 0.2s;
	display: flex;
    align-items: center;
    gap: 5px;
}

.pri-cta {
    background-color: #000;
    color: #fff;
	border-radius: 50px;
	
}

.sec-cta {
    background-color: #fff;
    color: #000;
}

.pri-cta:hover, .sec-cta:hover {
    border: 1px solid #000;
    padding: 6px 12px;
}

.pri-cta:hover {
    background-color: #fff;
    color: #000;
}

.sec-cta:hover {
    background-color: #000;
    color: #fff;
}

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

/* 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;
}

/* 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: 580px;
}

/* 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: 30px;
    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.tidesign {
    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 {
    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%;
}

.bm-media{
	height: 100%;
	border-radius: 25px;
	display:flex;
}

/* 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 */
.c-ovz h2 {
    margin-bottom: 2rem;
}

.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; /* Voor het geval dat je specifieke styling of extra bescherming tegen overloop wilt toevoegen */
}

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

.bm-ovz-img {
    height: 300px;
	width: 100%;
    object-fit: cover;
    object-position: center;
	transition: transform 0.3s ease; /* Soepele overgang gedurende 0.3 seconden */
    display: block; /* Zorgt ervoor dat de afbeelding zich correct gedraagt tijdens de overgang */
	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 {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    border-radius: 10px;
    overflow: hidden;
	background-color: #cccccc;
}

.bm-ovz-title {
    margin: 10px 0; /* wat ruimte tussen de afbeelding en de titel */
	font-size: 26px;
}

.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;
}
/*Slider*/
ul#custom-slider-list {
    max-height: 500px;
    gap: 20px;
}

img.slider-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
	border-radius:15px;
}


/*Media*/
@media screen and (max-width: 992px) {
	div#custom-slider {
		padding: 2rem;
	}
	
	ul#custom-slider-list{
		max-height: 360px !important;
		gap:revert;
	}
	
    .iframe-img-bm-media-groot, .iframe-img-bm-media {
        max-height: 300px;
        width: 100%;
    }
}


/* Einde Demo-CSS  */

/* Contact Fluentform */
p.contact-titel {
    background-color: #F2FFD6;
    color: #385200;
    font-weight: 700;
    font-family: "Valera Round";
    justify-self: center;
    width: 100%;
    padding: 6px 20px;
    text-align: center;
    border-radius: 9px;
    font-size: 16px;
}
.r-grid.brxe-container{
	display: flex !important;
	flex-direction: column !important;
	width: 90vw !important;
	max-width: 500px !important;
}

#fluentform_1 > fieldset > div.ff-el-group.ff-text-left.ff_submit_btn_wrapper > button{
	background-color: #92D400 !important;
	color: black !important;
	border-radius: 25px;
	font-weight:700;
	font-family: "Valera Round";
	width: 100%;
	
}

.fluentform .ff-text-left{
	text-align: center !important;
}

#ff_1_email, #ff_1_message, #ff_1_naam, #ff_1_names_first_name_,{
	background-color: #ebebeb;
	border: none !important;
	
	&:active{
		background-color: #ebebeb;
	}
}

.ff-default .ff-el-input--label label{
	color: black;
}

#contact-form-2{
	background-color:black;
	color:white;
}

#contact-form-2 label[for="ff_1_2_names_first_name_"],#contact-form-2 label[for="ff_1_2_email"], #contact-form-2 label[for="ff_1_2_message"], #contact-form-2 label[for="ff_1_2_phone"]  { 
	color:white;

}
#ff_1_2_names_first_name_, #ff_1_2_email, #ff_1_2_message, #ff_1_2_phone{
border: none;}


#contact-form-2 input, #contact-form-2 textarea{
	background-color: #1a1a1a;
	color:white;
}

#contact-form .ff-el-form-control{
	border:none!important;
}


/* Hero 1 blok  */

.s-hero-1 {
  padding: 100px 20px;
}

.c-hero-1 {
  max-width: 1200px;
  margin: 0 auto;
}

.d-hero-1 {
  display: flex;
	flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.bt-h-hero-1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.bt-sh-hero-1 {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 500px;
}

/* Responsive */
@media (max-width: 768px) {
  .d-hero-1 {
    flex-direction: column;
    text-align: center;
  }
}

/* 3 Blokken */

/* Text header */
#brxe-fjuegh, #brxe-btzxch{
	background-color:#efefef !important;
		
}

/* hero 3  */

/* Zorg dat de hero 2-koloms layout netjes naast elkaar staat */
.s-hero-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4rem;
/*   padding: 4rem 2rem; */
}

Linkerzijde met video
.c-hero-media {
  flex: 1 1 500px;
  max-width: 600px;
}

.hero-image img {
    width: 100svw;
	height: 50svh;
    display: block;
	object-fit: cover;
}


.c-hero-media iframe {
  width: 100vw;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero-video{
	width:100%;
	&>iframe{
		
		align-self: center;
		margin:auto;
		width:100%;
		height: 30vw;
	}
	
	align-self: center;
}

#brxe-gyezct{
	display: flex;
	align-content:center;
}

/* Rechterzijde met tekst en content */
.c-hero-content {
  display: flex;
  flex-direction: row !important;
	justify-content: space-between;
	padding-bottom: 8rem;
	padding: 4rem;

	
}

.c-hero-content h1 {
/*   font-size: 5rem; */
	font-size: clamp(3rem, 5vw + 1rem, 4rem);
  margin-bottom: 1rem;
	width:100%;
	max-width: 400px;
}

.c-hero-content p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 2rem;
/* 	width 500px !important; */
}

.hero-3-titel{
	flex-basis:40%;
}

.hero-3-tekst{
	flex-basis: 50%;
}

#brxe-qffjho{
	width: 1500px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .s-hero-3 {
    flex-direction: column;
    text-align: center;
  }
	
	.c-hero-content{
		flex-direction:column !important;
		text-align: left;
	}
	
	.hero-video{
	width: 80vw;
	
	&>iframe{
		width:100%;
		height: 40vh;

	}
}
}

/* Navbar/header  */
.s-bm-header.brxe-section{
	height:80px !important;
	padding:0 !important;
}

.c-bm-header-desktop.brxe-container{
	justify-content: center !important;
	 
}

/* Header logo */
#brxe-gxahle > img{
	height:80px;
	width: auto;
	max-width:unset;
}
#brxe-gxahle{
    width: auto;
    max-width: unset;
}

#brxe-btzxch, #brxe-fjuegh > div, #brxe-fjuegh{
	background-color: #ffffff !important;
}

#brxe-iijlin > section > div > div.grid-header{
	margin-bottom:0px;
}

/* Review*/
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4rem;
  padding: 3rem 1rem 3rem 1rem;
  max-width: 1600px;
  margin-inline: auto;
}

.testimonial-card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-align: left;
}

.stars {
  color: #92D400;
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

div#brxe-civqem {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.review {
  font-family: 'Open Sans';
  font-style: italic;
	margin-bottom: 1.5rem;
	font-size: 18px;

}

.profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar,
.avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ddd;
  font-weight: 600;
  font-size: 1.5rem;
  color: #333;
  text-transform: uppercase;
}

.avatar-fallback {
  font-family: sans-serif;
}

.name {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
}