/*!
Theme Name: Boerendorp
Version: 1
Theme URI: https://johnnynextdoor.com/ 
Author: johnny nextdoor
Author URI: https://johnnynextdoor.com/
License: johnny nextdoor
Description: Custom made Wordpress theme for boerendorp.nl based on theme Bjork 0.1 
Tags: johnny nextdoor, boerendorp.nl, boerendorp */

@font-face {
	font-family: 'Alte Haas Grotesk';
	src: url('assets/fonts/AlteHaasGrotesk.woff2') format('woff2'),
		url('assets/fonts/AlteHaasGrotesk.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Alte Haas Grotesk';
	src: url('assets/fonts/AlteHaasGrotesk_Bold.woff2') format('woff2'),
		url('assets/fonts/AlteHaasGrotesk_Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Butcherofblue-crocky';
	src: url('assets/fonts/ButcherofbluecrockyRegular.woff2') format('woff2'),
		url('assets/fonts/ButcherofbluecrockyRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
::-moz-selection {
	  background-color:#5ca246;
	  color:#fff;
}
::selection {
	  background-color:#5ca246;
	  color: #fff;
}
#all{
	/* max-width: 90%; */
/* 	width: 1024px; */
	margin: 0 auto;
	padding:0;
	overflow-x: hidden;	
	overflow: hidden;
}
@media screen and (min-width: 1115px) {
  #all{
	max-width: 1600px;
  }
}
/* voor ipads en kleine laptops */
@media screen and (min-width: 1024px) and (max-width: 1115px) {
  #all{
	max-width: 1024px;
  }
}
/*! algemeen */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,nav{
	margin:0;padding:0; 
	font-family: 'Alte Haas Grotesk',arial, sans-serif;	
	color: #5ca246; 	
	font-weight: 300;	
	background: #faf4e;
}
h4, h5, .submenu a{
  	font-family: 'Alte Haas Grotesk',arial, sans-serif;	
  	font-optical-sizing: auto;
  	font-weight: 600;
  	font-style: normal;
}
h6 {
  	font-family: 'Alte Haas Grotesk',arial, sans-serif;	
  	font-optical-sizing: auto;
  	font-weight: 300;
  	font-style: normal;
}
h2, h3, .pagetitle, .menut a{
  font-family: 'Butcherofblue-crocky', Arial, sans-serif !important;
  font-weight: normal;
  font-weight: 300;
  text-decoration: none !important;
  text-transform: uppercase;
  margin: 0.5rem 0 0;
  color: #5ca246 !important; 
}
strong, .bold {
	 font-weight: 600;
}
p{
	margin-bottom: 0.5rem
}
@media screen and (max-width: 768px) {
	p {
		font-size: 0.7rem !important;
	}
}
a, a:link,a:visited, a:active{
	color: #5ca246;
	text-decoration: none;
	border-bottom: 1px solid #dd735f;
}
a:hover, a:focus {
	color: #5ca246!important;
	border-bottom: 1px solid #5ca246;
	text-decoration: none!important;
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}
img, #sb_instagram .sbi_photo img, #sb_instagram img {
	border-radius: 3px;
}
section{
	display: block;
	padding:0rem 0em;
	margin:0px auto 1rem;
}
@media screen and (max-width: 768px) {
	section{
		display: block;
		padding:0rem 0em;
		margin:0px 0.3rem 1rem;
	}
}
/*! header  area */
section.brand {
	margin: 0;
}
header{
	text-align: center;
	margin: 0px auto 1rem;
}
header{
	margin: 0 0 1rem;
}
header h1 a{
	font-family: 'Butcherofblue-crocky', Arial, sans-serif !important;
	font-weight: normal;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 12px;
	border-bottom: none !important; 
	color:#dd735f !important;
	text-align: center;
	line-height:1;
}
header h1 a:link{
}
header h1 a:hover, header h1 a:focus {
	color:#dd735f !important;
	text-shadow:rgba(92, 162, 70, 0.5);
	text-shadow: 0px 3px 4px #acb59d, 0px 6px 4px #b7cd99;
}
@media screen and (max-width: 860px) {
	header h1 a{
	letter-spacing: 0px;
	}
}
/*! nav menu*/
section.submenu {
	margin: 0rem auto 1rem;
}
@media screen and (max-width: 768px) {
	section.submenu {
		margin:0px -0.5rem 1rem;
	}
}
.subtitle a{
	border-bottom: none!important;
	font-weight: 600;
}
.subtitle a:hover, .subtitle a:focus {
	border-bottom:1px solid #dd735f!important;
}
/* (.menut) */
nav {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	text-align:center;
	color: #5ca246 !important;
}
nav a, nav a:link, nav a:visited, nav a:active {
	float: left;
	width: 19.3333%;
	margin: 10px 7% 0;
	border-bottom: 1px solid #dd735f;
}
nav a:hover,  nav a:focus  {
	color: #5ca246 !important;
	text-decoration: none;
	border-bottom: 1px solid #5ca246;
}
@media screen and (max-width: 768px) {
nav a, nav a:link, nav a:visited, nav a:active {
	  width: 29.3333%;
	  margin: 10px 2% 0;
  	}
}
/* menu  in footer */
.footer li {
	margin-bottom: 0.5rem;
}
.footer .menuo .menu-item a,
.footer .menuo .menu-item a:link,
.footer .menuo .menu-item a:visited,
.footer .menuo .menu-item a:active,
.footer .menuo .menu-item li a,
.footer .menuo .menu-item li a:link,
.footer .menuo .menu-item li a:visited,
.footer .menuo .menu-item li a:active {
	border-bottom: none !important;
	text-decoration: none !important;
}
/*! buttons en plugin buttons  */
.button, 
.wpcf7-submit, 
#sb_instagram .sbi_follow_btn a, 
#sb_instagram #sbi_load .sbi_load_btn {
	display: inline-block !important;
	border: none;
	color: white !important;
	background: #dd735f !important;
	text-decoration: none;
	margin: 0 !important; 
	text-transform: uppercase; 
	font-weight: 600;
	border: 1px solid #dd735f;
	transition: all 0.3s ease !important;
	padding: 12px 25px !important;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	line-height: normal;
	font-size: inherit;
	box-shadow: none !important;
	float: right;
	font-size: 1rem;
}
@media screen and (max-width: 768px) {
	.control{
		margin-bottom:2rem;
	}
}
@media screen and (max-width: 768px) {
	.button, 
	.wpcf7-submit, 
	#sb_instagram .sbi_follow_btn a, 
	#sb_instagram #sbi_load .sbi_load_btn{
		font-size: 0.7rem
	}
}
/* Hover states */
.button:hover, .button.hovered, 
.wpcf7-submit:hover,
#sb_instagram .sbi_follow_btn a:hover, 
#sb_instagram #sbi_load .sbi_load_btn:hover {
	text-decoration: none !important;
	background: white !important;
	color: #dd735f !important;
	border: 1px solid #dd735f !important;
}
/* Focus states */
.button:focus:not(:active), 
.button.focused:not(:active), 
.wpcf7-submit:focus:not(:active),
#sb_instagram .sbi_follow_btn a:focus-visible,
#sb_instagram #sbi_load .sbi_load_btn:focus-visible {
	outline: 2px solid #dd735f !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}
#sb_instagram .sbi_buttons {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 15px !important;
	margin: 30px 0 !important;
	width: 100% !important;
	float: right !important;
}
/*! Actie blok */
/* links plaatje rechts tekst blokken  en andersom, automatisch plaatje boven op mobiel*/
	@media (max-width: 768px) {
	.reverse-desktop .content-col {
		order: 1;
	}
	.reverse-desktop .image-col {
		order: 2;
	}
}
@media (min-width: 769px) {
	.reverse-desktop .content-col {
		order: 2;
	}
	.reverse-desktop .image-col {
		order: 1;
	}
}
/*! Insta Smash Balloon buttons container */
#sb_instagram .sbi_follow_btn,
#sb_instagram #sbi_load {
	display: inline-block !important;
	padding: 0 !important;
	float: right !important;
}
#sb_instagram .sbi_follow_btn{
	margin: 0 0.2rem 0 0!important;
}
/* Responsive aanpassing */
@media (max-width: 768px) {
	#sb_instagram .sbi_buttons {
		justify-content: center !important;
		flex-wrap: wrap;
	}
}
/* Instagram svg icoon */
#sb_instagram svg:not(:root).svg-inline--fa {
	height: 1em;
}
#sb_instagram .sbi_follow_btn svg {
	vertical-align: 0em;
}
/*! svg's */
.svg-icon {
  width: 100%;
  height: auto;
  display: block;
  /* color: #de386e;
  background: #e7c7b3; */
  color:#dd735f;
  fill: currentColor; /* zorgt ervoor dat SVG meeverft met tekstkleur */
  padding: 0 1rem;
}

/*! box (Responsive kolommen project overzicht en citaten:) */
.box {
	background: rgba(255, 255, 255, 0.70);
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
	box-shadow: 0 0 0 1px rgba(10, 10, 100, 0.1);
	box-shadow: 0 0 0 0px rgba(10, 10, 100, 0);
	display: block;
	padding: 0.75rem;
	margin: 0 0 0.5rem 0;
}
.bgwhite{
	background: white;
}
.boxx h3{
	margin:-0.5rem auto 0;
}
.quotebox {
	padding:1em;
}
.uitgelicht .reverse-order {
	flex-direction: row-reverse;
}
/* Optioneel: plaatje iets responsive */
.uitgelicht .plaatje {
	max-width: 100%;
	height: auto;
	display: block;
}
/* Mobiel onder elkaar */
@media (max-width: 768px) {
	.uitgelicht-project .columns {
		flex-direction: column !important;
	}
	.uitgelicht-project .column {
		width: 100% !important;
	}
}
/*! formulier */
/* Algemene formulierstijl */
.wpcf7-form {
	font-family: inherit; /* Neem het lettertype van je site over */
	max-width: 100%; /* Pas aan naar wens */
	margin: 0 auto; /* Centreer het formulier */
}
.wpcf7 {
	width: 100%; /* Zet breedte op 50% */
	margin-left: auto; /* Centreer horizontaal */
	margin-right: auto; /* Centreer horizontaal */
}
/* Optioneel: Responsive aanpassing voor mobiel */
@media (max-width: 768px) {
	.wpcf7 {
		width: 100%; /* Volledige breedte op kleinere schermen */
	}
}
/* Formulier  */
.wpcf7-form-control {
	width: 100%;
	padding: 10px 15px;
	margin-bottom: 15px;
	border: 1px solid rgba(10, 10, 100, 0.203); /* Pas aan naar je stijl */
	border-radius: 4px; /* Pas aan naar wens */
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 3px;
	display: block;
	padding: 0.75rem;
	margin: 0 0 0.5rem 0;
}
/* Specifieke veldtypes */
.wpcf7-text, 
.wpcf7-email {
	height: 2.5rem; /* Hoogte voor input velden */
}
.wpcf7-textarea {
	min-height: 150px; /* Hoogte voor textarea */
	resize: vertical; /* Sta alleen verticale resize toe */
}
/* Verzendknop */
.wpcf7-submit {
	background-color: color(display-p3 0.867 0.451 0.373); /* Kleur aanpassen */
	color: white;
	border: none;
	padding: 12px 25px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}
.wpcf7-submit:hover {
	background-color: #005a87; /* Donkerder bij hover */
}
/* Validatie foutmeldingen */
.wpcf7-not-valid-tip {
	color: #dd735f;
	margin-top: -10px;
	margin-bottom: 15px;
}
.wpcf7-response-output {
	margin: 20px 0;
	padding: 15px;
	border-radius: 4px;
}
.wpcf7-form-control:focus-visible, .wpcf7-form-control:focus {
	border: 1px solid #5ca246; /* Gebruik je eigen kleur */
	outline: none;
}
/*! overlay logo's */
.overlay-image {
	position: relative;
	display: block;
	overflow: hidden;
}
.overlay-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	filter: grayscale(100%) brightness(1); /* zwartwit en iets donkerder */
	transition: transform 0.3s ease;
	padding:10px;
}
@media (max-width: 767px) {
	.logoblock .masonry.col4, .logoblock .masonry.col4{
		column-count: 3;
	}
	.logoblock .masonry, .logoblock .masonry.col2, .logoblock .masonry.col3, .logoblock .masonry.col4, .logoblock .masonry.col5   {
  	column-count: 3;
	}
	.overlay-image img {
		padding:2px;
	}
}
/* .overlay-image .overlay-tint {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(92, 162, 70, 0.1);   
	mix-blend-mode: multiply;
	pointer-events: none;
} */

/*! video  */
section.video{
	margin-top:0em;
}
.vid {
	background: white;
}
@media screen and (max-width:768px){
	.video {
		padding: 0 1.8em;
		 }
}
/*! footer */
.copyright{
	color: #5ca246!important;
	text-align: center;
	margin:100px auto 50px;
}
/*! wordpress  */
.wp-block-gallery .blocks-gallery-item figure{
	margin-top: 1em
}