/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


h3{
/* 	font-size: 2.5rem!important; */
}
.usp-blue{
	padding-left: 65px;
    position: relative;
    width: 100%;	
}

.usp-blue::before {
    content: '';
    background-image: url(/wp-content/uploads/2024/06/usp.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 51px;
    height: 35.04px;
    position: absolute;
    left: 0;
    top: 0;
}

/* Styling voor 125% size */
.zoom-125 #page-container #et-boc .et-fb-iframe-ancestor, .zoom-125 #page-containe .et-fb-iframe-ancestor, .zoom-125 #page-containe .et_vertical_nav #et-main-area.et-fb-iframe-ancestor{
	width: 125vw!important;
	max-width: 125vw!important;
	height: 125vh!important;
	max-height: 125vh!important;
}

.zoom-125 #page-container #et-boc .et-db #et-boc .et-l #et-fb-app-frame{
	width:125vw;
	height:125vh;
}

/* Styling for each column */
@media (max-width: 998px) {
	#counters .et_pb_column{
		margin:0;
	}

	#counters {
		display: flex; /* Enables Flexbox */
		flex-wrap: nowrap;
/* 		flex-wrap: wrap; */
		justify-content: space-evenly;
/* 		gap: 20px; */
		margin: 0 auto; /* Centers the row container */
		max-width: 1200px; /* Optional: Set a maximum width for the row */
	}
	#counters .et_pb_column_1_5 {
/* 		flex: 1 1 calc(20% - 20px);  */
		text-align: center; /* Centers content inside each column */
		padding:0;
	}
	#counters .et_pb_column_1_5:nth-child(odd){
		width:30%!important;
	}
	#counters .et_pb_column_1_5:nth-child(even) .et_pb_module, #counters .et_pb_column_1_5:nth-child(even){
		display: none!important;
	}
	
	#counters .percent-value, #counters #post-count{
		font-size: 2.5rem;
		line-height: 2.5rem;
		padding: 0;
		margin:0;
	}
	#counters .percent{
		margin: 0;
	}
	#counters h3, #counters #post-count-text, #counters .percent p{
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
   #counters .et_pb_column_1_5 {
        flex: 1 1 calc(50% - 20px); /* Switches to 2 columns per row on smaller screens */
    }
	
	#counters .percent-value, #counters #post-count{
		font-size: 1.6rem;
		line-height: 1.6rem;
		padding: 0;
		margin:0;
	}
	#counters .percent, #counters #post-count{
		height: auto;
		margin-top: 12px;
	}
	#counters h3, #counters #post-count-text, #counters .percent p{
		font-size: 0.8rem;
		line-height: 0.8rem;
	}
}

@media (max-width: 480px) {
    #counters .et_pb_column_1_5 {
        flex: 1 1 100%; /* Stacks columns vertically on very small screens */
    }
}
	
@media screen and ( max-width: 980px ) {
    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }
	
/* 	Uitlijning 404 pagina */
	#sadf{
		padding: 100px 0!important;
	}
}

/* ----- NAVIGATIE MENU ----- */
@media (max-width: 768px) {
	.navMenu{
		display: none;
	}
	
	.closed #mobile_menu2{
		width: 0vw;
		opacity: 0;
/* 		display: block; */
/* 		position: fixed; */
		left: 0vw;
		border-radius: 12px;
		box-shadow: none;
		-webkit-box-shadow:none;
    	-moz-box-shadow:none;
		transition: .3s ease;
/* 		background-color: rgb(255, 255, 255); */
	}
	
	.opened #mobile_menu2{
		opacity:1;
		width: 90vw;
		display: block;
		position: fixed;
		left: 10vw;
		border-radius: 12px;
		box-shadow: 0px 2px 7px 5px rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: 0px 2px 7px 5px rgba(0, 0, 0, 0.15);
    	-moz-box-shadow: 0px 2px 7px 5px rgba(0, 0, 0, 0.15);
		background-color: rgb(255, 255, 255);
	}
}

.upperNav{
	
}

/* ---- COOKIE BANNER ----- */

.cky-overlay{
	opacity: .8!important;
	z-index: 100001!important;
}
.cky-consent-container.cky-box-top-left{
	position: fixed;
	top:50vh;
	left:50%;
	transform: translate(-50%, -50%);
	z-index:9999999999;
}

.cky-consent-container.cky-box-top-left .cky-consent-bar{
	border-radius: 20px;
}

.cky-consent-container.cky-box-top-left button{
	border-radius: 10px;
}

/* ----- MAILCHIMP FORM ------ */
.mc4wp-form p{
	color: white;
	font-family: 'Myriad Pro', sans-serif;
}

.mc4wp-form p input{
	border-radius: 10px;
	border: none;
	font-size: 16px;
	color: #5a7184;
	padding: 16px;
}

.mc4wp-form p input[type=submit]{
	background-color: #CC0C25;
	color: white;
	padding: 16px 46px;
}

@media (min-width: 768px) {
	.cky-consent-container::before {
	  content: "";
	  background-image: url('https://dev.bob-kob.nl/wp-content/uploads/2024/08/BOBKOB-CookieGuy.webp'); /* Replace with the actual URL of your image */
	  background-size: contain; /* Adjust as needed */
	  background-repeat: no-repeat;
	  position: absolute;
	  left: -110px; /* Adjust as needed to stick out from the left */
	  bottom: 0px; /* Adjust as needed to stick out from the top */
	  width: 500px; /* Adjust as needed */
	  height: 350px; /* Adjust as needed */
		pointer-events: none; 
	}

	.cky-consent-container {
	  position: relative;
	  overflow: visible; /* Ensure that the image can stick out of the container */
	}
	
	.cky-consent-container.cky-box-top-left .cky-consent-bar{
		padding-left: 40%;
	}
}

@media (max-width: 768px){
	/* 	Tweekleurige BG block verwijderen op mobile */
	.after\:bg-\[\#003366\]::after{
		display: none;
	}
}

/*** Custom Divi Row Structures For Mobile Devices By DiviMundo: https://divimundo.com/en/blog/create-custom-divi-column-structures-in-mobile-devices-with-css-grid/   ***/

/* Global CSS */
@media screen and (max-width: 980px) {
html .et-db #et-boc .dm-row {
    display: grid;
  }
html .et-db #et-boc .dm-row.et_pb_row:after {
    content:none;
  }
  html .et-db #et-boc .dm-row .et_pb_column {
    margin-right: 0;
    width: auto;
    margin-bottom:0;
  }
}
  
/* Set GAP size between columns for phone devices */
@media screen and (max-width: 767px) {
  .dm-row {
    gap: 15px;
  }
}

/* Set GAP size between columns for tablet devices */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-row {
    gap: 20px;
  }
}
  
/* Two equal columns mobile */
@media screen and (max-width: 767px) {
  .dm-2-col-mob {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* Two equal columns tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-2-col-tab {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Three equal columns mobile */
@media screen and (max-width: 767px) {
  .dm-3-col-mob {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Three equal columns tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-3-col-tab {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four equal columns mobile */
@media screen and (max-width: 767px) {
  .dm-4-col-mob {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Four equal columns tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-4-col-tab {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Five equal columns mobile */
@media screen and (max-width: 767px) {
  .dm-5-col-mob {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Five equal columns tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-5-col-tab {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Six equal columns mobile */
@media screen and (max-width: 767px) {
  .dm-6-col-mob {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Six equal columns tablet */
@media screen and (max-width: 980px) and (min-width: 768px) {
  .dm-6-col-tab {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 2 columns 1/3 and 2/3 phone */
@media screen and (max-width: 767px) {
  .dm-2-col-1-2-mob {
    grid-template-columns: 1fr 2fr;
  }
}

/* 2 columns 2/3 and 1/3 phone */
@media screen and (max-width: 767px) {
  .dm-2-col-2-1-mob {
    grid-template-columns: 2fr 1fr;
  }
}

/* 2 columns 1/4 and 3/4 phone */
@media screen and (max-width: 767px) {
  .dm-2-col-1-3-mob {
    grid-template-columns: 1fr 3fr;
  }
}

/* 2 columns 3/4 and 1/4 phone */
@media screen and (max-width: 767px) {
  .dm-2-col-3-1-mob {
    grid-template-columns: 3fr 1fr;
  }
}

/* 2 columns 1/3 and 2/3 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-2-col-1-2-tab {
    grid-template-columns: 1fr 2fr;
  }
}

/* 2 columns 2/3 and 1/3 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-2-col-2-1-tab {
    grid-template-columns: 2fr 1fr;
  }
}

/* 2 columns 1/4 and 3/4 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-2-col-1-3-tab {
    grid-template-columns: 1fr 3fr;
  }
}

/* 2 columns 3/4 and 1/4 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-2-col-3-1-tab {
    grid-template-columns: 3fr 1fr;
  }
}

/* 3 columns 1/4 and 1/4 and 2/4 phone */
@media screen and (max-width: 767px) {
  .dm-3-col-1-1-2-mob {
    grid-template-columns: 2fr 2fr 4fr;
  }
}

/* 3 columns 2/4 and 1/4 and 1/4 phone */
@media screen and (max-width: 767px) {
  .dm-3-col-2-1-1-mob {
    grid-template-columns: 4fr 2fr 2fr;
  }
}

/* 3 columns 1/4 and 2/4 and 1/4 phone */
@media screen and (max-width: 767px) {
  .dm-3-col-1-2-1-mob {
    grid-template-columns: 2fr 4fr 2fr;
  }
}

/* 3 columns 1/4 and 1/4 and 2/4 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-3-col-1-1-2-tab {
    grid-template-columns: 2fr 2fr 4fr;
  }
}

/* 3 columns 2/4 and 1/4 and 1/4 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-3-col-2-1-1-tab {
    grid-template-columns: 4fr 2fr 2fr;
  }
}

/* 3 columns 1/4 and 2/4 and 1/4 tablet */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .dm-3-col-1-2-1-tab {
    grid-template-columns: 2fr 4fr 2fr;
  }
}