/* 
Theme Name: VZA-GGZ
Theme URI: https://www.verslavingszorgachterhoek.nl
Author: Buro Wild - Ongetemde Merkjagers
Author URI: https://burowild.nl
Description: Custom Wordpress theme/template
Version: 2.0 
*/


.grid-container{
	max-width: 82rem;
}

html{
	margin-top: 100px !important;
}

.nopadding{
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.verticalcenter{
	position: relative;
	top: 50%;
	z-index: 3;
}

.grecaptcha-badge{
	display: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Geist", sans-serif !important;
	font-weight: bold !important; 
}

h1{
	line-height: 45px;
	margin-bottom: 25px;
}

h2{
	line-height: 40px;
	margin-bottom: 25px;
}

h3{
	line-height: 32px;
}

h4{
	line-height: 30px;
}
  
p{
  	font-family: "Geist", sans-serif !important;
	font-weight: 400 !important;  
	line-height: 25px;
	font-size: 16px !important;
}

a, a:focus{
	color: #563C69;
	transition: 0.5s;
}

a:hover{
	color: #0299AE;
	transition: 0.5s;
}

.reveal{
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	padding: 50px;
	color: #563c69;
}

.close-button {
color: #563c69 !important;
background: none !important;
}

button, .button, input[type=submit]{
	background: #563c69 !important;
	padding: 10px 15px !important;
	border-radius: 50px !important;
	color: white !important;
	font-family: "Geist", sans-serif !important;
	font-weight: bold !important;
	margin-right: 10px;
	margin-bottom: 10px;
	transition: 0.5s;
	display: inline-block;
    cursor: pointer;
	transition: 0.5;
	font-size: 16px;
	text-transform: lowercase;
	border: none !important;
}

input, textarea, select{
	border-radius: 25px !important;
	font-size: 16px !important;
	font-family: "Geist", sans-serif !important;
	color: #563c69 !important;
	min-height: 50px;
	padding-left: 15px !important; 
}

label{
	color: #563c69 !important;
	font-family: "Geist", sans-serif !important;
}

button.white, .button.white, input[type=submit].white{
	background: white !important;
	color: #563c69 !important;
}

button.green, .button.green, input[type=submit].green{
	background: #28D366 !important;
	color: white !important;
}


.button::after{
	font-family: "Font Awesome 6 Pro";
	font-weight: 900; /* nodig voor solid icons */
	content: "\f0a4"; /* unicode van het icoon, hier: pijl naar rechts */
	display: inline-block;
	margin-left: 8px; /* beetje ruimte tussen tekst en icoon */
	background: white;
	padding: 5px;
	color: #563c69;
	border-radius: 100px;
	width:26px;
}

.button.white::after, input[type=submit].white {
	background: #563c69;
	color: white;
}

.button.green::after, input[type=submit].green {
	background: white;
	color: #28D366;
	font-family: "Font Awesome 6 Brands";
	content: "\f232" !important;
}


button:hover, .button:hover, input[type=submit]:hover{
	background: #0299AE !important;
	transition: 0.5s !important;
}

button.hamburger::after, .button.hamburger::after, input[type=submit].hamburger {
	content: "\f550"; 
}

button.hamburger.close::after, .button.hamburger.close::after, input[type=submit].hamburger.close {
	content: "\f00d"; 
}

button.zelftest::after, .button.zelftest::after, input[type=submit].zelftest {
	content: "\f737"; 
}

button.zelftest.close::after, .button.zelftest.close::after, input[type=submit].zelftest.close {
	content: "\f737"; 
}

.zelftest{
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 10;
}


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
	width: 40px;
	height: 40px;
}

.owl-theme .owl-dots, .owl-theme .owl-nav{
	text-align: left;
	padding-left: 30px;
}

.img{
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}
 
#menu{
	min-height: 100px;
	background: white;
	position: fixed;
	top: 0px;
	width: 100%;
	padding-top: 25px;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
	z-index: 5;
} 

#menu p a{
	font-weight: bold;
}

.menulogo{
	width: 300px;
	position: absolute;
	bottom: -20px;
	background: white;
	border-bottom-left-radius: 30px;
}

#nav{
	text-align: right;
}

#menuoverlay{
	position: fixed;
	top:0px;
	width: 100%;
	height: 100vh;
	background: white;
	padding-top: 200px;
	display: none;
	z-index: 5;
	overflow: scroll;
}

.show{
	display: block !important;
}

#menublok{
	padding: 40px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	color: #563C69;
	font-family: "Geist", sans-serif !important;
	margin-bottom: 20px;
}

#menublok ul{
	list-style: none;
	margin-left: 0px;
	line-height: 30px;
}

#menublok li, #footer li{
	width: 100%;
	margin-bottom: 12px;
}

#menublok li a, #footer li a{
	padding: 0px !important;
}

.menu1{background: #F5F3F6;}
.menu2{background: #F8F0E4;}
.menu3{background: #CCEBEF;}

#menusocket{
	padding-top: 20px;
	color: #563C69;
	margin-top: 30px;
}

#header{
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 240, 228, 1) 50%, rgba(248, 240, 228, 1) 100%);
	padding-right: 100px;
} 

#headerhome{
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 240, 228, 1) 50%, rgba(248, 240, 228, 1) 100%);
	padding-right: 100px;
} 
  
#headerimg{
	background: linear-gradient(45deg,rgba(86, 60, 105, 0.6) 0%, rgba(2, 153, 174, 0.6) 50%, rgba(185, 139, 52, 0.6) 100%), url('img/Hal-waar-nan-loopt.jpg');
	background-size: cover !important;
	background-position: center !important;
	min-height: auto;
	border-bottom-right-radius: 50px;
	padding-top: 100px;
	padding-bottom: 100px;
	color: white;
	position: relative;
	overflow:hidden;
}

#headerhome #headerimg{
	min-height: 80vh;
}

.bgvideo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	border-bottom-right-radius: 50px;
}


#blokken{
	background: #F8F0E4;
	position: relative;
	z-index: 3;
}

#blokken #blok{
	margin-top: -100px;
}

.sidebarblok{
	margin-top: -200px;
	color: #563C69 !important;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

#bullet{
	margin-bottom: 15px;
}

#bullet i{
	font-size: 25px;
}


.overlay{
	background:linear-gradient(45deg,rgba(86, 60, 105, 0.5) 0%, rgba(2, 153, 174, 0.5) 50%, rgba(185, 139, 52, 0.5) 100%);
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
}


#beige{
	background: #F8F0E4;
	color: #563C69;
	min-height: 200px;
	padding-top: 100px;
	padding-bottom: 100px;
}

#white{
	background: white;
	color: #563C69;
	min-height: 200px;
	padding-top: 100px;
	padding-bottom: 100px;
}

#split{
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 240, 228, 1) 50%, rgba(248, 240, 228, 1) 100%);
	color: #563C69;
	min-height: 200px;
	padding-top: 50px;
	padding-bottom: 50px;
}

#split2{
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 240, 228, 1) 50%, rgba(248, 240, 228, 1) 100%);
	color: #563C69;
	min-height: 200px;
	padding-top: 50px;
	padding-bottom: 50px;
}


#cta{
	background: #B98B34;
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	color: white;
}

#cta .button{
	background: white !important;
	color: #563C69 !important;
}

#cta .button:hover{
	background: #563C69 !important;
	color: white !important;
}

#cta button::after, #cta .button::after, #cta input[type=submit] {
	background: #563c69;
	color: white;
}

#ctatext{
	padding: 50px;
}

#ctaimg{
	position: relative;
}

#ctaimg img{
	position: absolute;
	bottom: 0px;
}

.cta{
	padding-left: 15px;
	padding-right: 15px;
}




.mainimg{
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
}


/* Style the form */
#regForm {
  background-color: #ffffff;
  

}

/* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

.tab h2{
	width: 75%;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #563C69;
}

#form{
	background: white;
	padding: 100px;
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

#form label{
	background: #F5F3F6;
	border-radius: 100px;
	color: #563C69;
	font-family: "Geist", sans-serif !important;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	gap: 0.5em; /* ruimte tussen bolletje en tekst */
	padding: 20px 30px;
	margin-right: 10px;
	transition: 0.5s;
	font-weight: bold !important;
}

#form label:hover{
	background: #563C69;
	color: white !important;
	transition: 0.5s;
	font-weight: bold !important;
}

label input[type="radio"] {
  margin: 0; /* standaard marge weghalen */
  width: 20px;
  height: 20px;
  box-shadow: none;
  
}

#blok{
	min-height: 250px;
	border-top-right-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	position: relative;
	color: white;
	margin-bottom: 20px;
	padding: 40px;
	display: block;
	overflow: hidden;
}

#blok.imgblok{
	background: black;
	min-height: 450px;
}

#blok.imgbloksmall1, #blok.imgbloksmall2{
	background-size: cover !important;
	background-position: center !important;
	background: black;
	min-height: 350px;
}

.imgbloksmall2{
	margin-top: 30px;
}


#blok.sidebarblok{
	background: white;
}

.bg{
	position: absolute;
	z-index: 0;
	left: 0px;
	top:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.tags{
	position: absolute;
	top: 30px;
	left: 30px;
}

.tag{
	font-family: "Geist", sans-serif !important;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border-radius: 50px;
	padding: 5px 12px;
	transition: 0.5s;
	margin-bottom: 5px;
	font-size: 15px;
	display: inline-block;
	margin-right: 5px;
}

.tag:hover{
	background: rgba(255, 255, 255, 1);
	color: #563C69;
	transition: 0.5s;
}

.tekstoverlay{
	position: absolute;
	bottom: 20px;
	left: 30px;
	width: 75%;
	/* left: 30px; */
}

.tekstoverlay a{color: white;}

.verslavingen{
	padding-left: 150px !important;
	padding-right: 150px !important;
}


.btn{
	width: 40px;
	height: 40px;
	padding-top: 13px;
	text-align: center;
	background: white;
	color: #563C69;
	border-radius: 50px;
	position: absolute;
	bottom: 30px;
	right: 30px;
	transition: 0.5s;
}

.btn:hover{
	background: #563C69;
	color: white;
	transition: 0.5s;
}

/* FAQ */

.accordion-content, :last-child:not(.is-active) > .accordion-title, :last-child > .accordion-content:last-child{
	border:none;
}

.accordion-title{
	border: none;
	background: #F6F3F6;
	border-top-left-radius: 30px !important;
	border-top-right-radius: 30px !important;
	border-bottom-right-radius: 30px !important;
	margin-bottom: 10px;
}

.accordion-title:hover{
	background: #563C69;
	color: white;
}

.accordion{
	background: none;
}

.accordion-title{
	font-size: 16px;
	font-weight: bold;
	color: #563C69;
}

.accordion-content{
	color: #563C69;
	background: none;
	font-size: 16px;
}


#footerouter{
	background: white;
	padding-right: 100px;
	position: relative;
}

#footer{
	background: linear-gradient(45deg,rgba(86, 60, 105, 1) 0%, rgba(2, 153, 174, 1) 100%);
	min-height: auto;
	padding-top: 50px;
	padding-bottom: 50px;
	border-top-right-radius: 50px;
	color: white;
	position: relative;
}

#footer a, #footer p{color: white; opacity: 0.8; transition: 0.5s;}

#footer a:hover{opacity: 1; transition: 0.5s;}

#footer h4{margin-bottom: 20px;}

.logofooter{
	width: 300px;
	background: white;
	position: absolute;
	bottom: -60px;
	right: 0px;
	z-index: 1;
	border-top-left-radius: 50px;
	padding: 10px;
}

#socket{
	min-height: 50px;
	padding-top: 20px;
	padding-bottom: 10px;
	color: #563C69;
}

#socket a{
	font-weight: bold;
}

.certificaat{
	position: absolute;
	top:0px;
	width: 150px;
}


/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	/* h1{
		font-size: 35px;
		line-height: 40px;
	} */
	
	h2{
		font-size: 30px;
		line-height: 32px;
	}
	
	.menulogo{
		width: 250px;
		position: absolute;
		top: 10px;
	}

	#menublok{
		padding: 30px 30px 10px 30px;
	}
	
	#menuoverlay{
		padding-top: 120px;
	}
	
	#menusocket{
		margin-top: 0px;
	}
	
	.sidebarblok{
		margin-top: -100px;
	}
	
	#headerhome #headerimg{
		min-height: 50vh;
	}
		
	#header, #footerouter{
		padding-right: 50px;
	}
	
	#headerimg{
		padding-bottom: 50px;
		padding-right: 50px;
	}
	#white, #beige{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	#blokken .grid-container{
		top: -100px;
		position: relative;
	}
	
	#blokken #blok{
		margin-top: 15px;
		margin-bottom: 0px;
	}
	
	.mainimg{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.verslavingen {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
	
	
	.test{
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.owl-medewerkers{
		margin-top: 30px;
	}
	
	#split{
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#cta{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#ctaimg img{
		width: 95%;
	}
	
	#ctatext{
		padding: 25px;
	}
	
	#footer{
		padding-top: 50px;
	}
	
	.logofooter{
		bottom: -1px;
		width: 200px;
	}
	#socket{
		padding-bottom: 100px;
	}
	
	
}

/* Small only */
@media screen and (max-width: 39.9375em) {
	
	h1{
		font-size: 40px;
		line-height: 40px;
	}
	
	h2{
		font-size: 30px;
		line-height: 28px;
	}
	
	h3{
		font-size: 25px;
		line-height: 25px;
	}
	
	h4{
		font-size: 25px;
		line-height: 25px;
	}
	
	.img{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.menulogo{
		width: 250px;
		position: absolute;
		top: 10px;
	}
	
	#menublok{
		padding: 30px 30px 10px 30px;
	}
	
	#menuoverlay{
		padding-top: 120px;
	}
	
	#menusocket{
		margin-top: 0px;
	}
	
	.verticalcenter{
		top: 0px;
	}
	
	#headerhome h1 {
		font-size: 32px;
		line-height: 35px;
	}
		
	#header, #footerouter{
		padding-right: 15px;
	}
	
	#headerhome #headerimg{
		min-height: 50vh;
	}
	
	#headerhome{
		padding-right: 10px;
	}
	
	#headerimg{
		padding-top: 50px;
		padding-bottom: 50px;
		padding-right: 50px;
	}
	
	.mainimg{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	#blokken #blok{
		margin-top: 20px;
		margin-bottom: 0px;
		
	}
	
	#white, #beige{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.sidebarblok{
		margin-top: 30px;
	}
	
	.imgbloksmall2{
		margin-top: 10px;
	}
	
	#blokken{
		margin-top: -50px;
		background: none;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 50px;
	}
	
	#blok.imgblok {
		min-height: 350px;
	}
	
	.verslavingen{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	
	#split, #split2{
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.owl-medewerkers{
		margin-top: 30px;
	}
	
	
	#cta{
		padding-left: 0px;
		padding-right: 0px;
		
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
		border-bottom-left-radius: 0px;
	}
	
	#ctaimg img{
		position: relative;
		width: 75%;
	}
	
	#ctatext{
		padding: 25px;
	}
	
	#form{
		padding: 30px;
	}
	
	.form{
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#footer{
		padding-top: 50px;
	}
	
	#footer1, #footer2, #footer3{
		margin-bottom: 25px;
	}
	
	.logofooter{
		bottom: -1px;
		width: 200px;
	}
	
	#socket{
		padding-bottom: 100px;
	}
}