/*
Theme Name: WPS
Theme URL: https://smeckdesigns.com
Author: Smeckdesigns.com
Author URL: https://smeckdesigns.com

*/


/* HTML5 Reset
---------------------------------------------------------------------------- */

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
---------------------------------------------------------------------------- */
/* stylelint-disable */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/* stylelint-enable */


/*basic*/

html {
font-size: 62.5%;
	scroll-behavior: smooth;
}

a, div, span, button, input, p, article, tr, td, section, h1, h2, h3, h4, h5, img, :after, :before {transition:0.3s ease all !important}
div, p, span, section, a {position:relative;}

body {
	margin:0;
	font-size: 18px;
	font-size: 1.8rem;
	overflow-x:hidden;
}

p {margin:0 0 1.2rem;line-height:1.5}
ul {padding:0;margin-left:20px;width:100%}
li {line-height:2;}


:root {
	--zwart: #0E1011;
  	--wit: #ffffff;
	--groen:#1AA29B;
	--groen2:#00575E;
}


::selection {background-color:var(--groen);color:white}
h1, h2 {    
	font-size: 4.8rem;
    line-height: 50px;
	font-weight:700;
	margin-top:0;
	margin-bottom:1rem;
	width:100%;
	color:var(--groen2);
}
h3{font-size:2.4rem;width:100%;margin-bottom:1rem;color:var(--groen2);}
.titel-midden {
    display: block;
    margin: 0 auto 100px;
    width: auto;
    max-width: 50%;
    text-align: center;
    position: relative;
}

a {color:var(--groen);text-decoration:none;cursor:pointer}

@keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

/* Site Container
--------------------------------------------- */

.site-container {
	animation: fadein 1s;
	word-wrap: break-word;
}



/* Site Inner
--------------------------------------------- */

.site-inner {
	clear: both;
	margin: 0 auto;
	padding: 0px;
    width: 100%;
    max-width: 1280px;
}


/* Site Header
---------------------------------------------------------------------------- */

header {
	background:white;
}


.header-outer {
  width: 100%;
  transition: transform 0.3s ease-in-out;
	background:white;
}

.header-outer.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-outer.hidden {
  transform: translateY(-200%);
}

.header-wrap {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 50px);
	max-width: 1280px;
    padding: 0 25px;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    background: white;
}
.placeholder {height: 0;}
img.custom-logo {
    height: auto;
    width: 300px;
}
.main-menu nav ul {
    display: inline-flex;
    gap: 25px;
}
.main-menu ul li {list-style:none}
.main-menu ul a {color:var(--zwart);padding:0 15px;font-weight:600 !important}
.main-menu ul a.mega-menu-link:after {
	display:block !important;
	content:"";
	width:0;
	height:3px;
	background:var(--groen);
	position:absolute;
	bottom:-5px;
	left:15px;
}
.main-menu ul a.mega-menu-link:hover {color:var(--groen)}
.main-menu ul a.mega-menu-link:hover:after {width:50px;}

/* Site Footer
---------------------------------------------------------------------------- */
footer {
    background: white;
    padding-bottom: 35px;
}
.groenebalk {
    background: var(--groen);
    padding: 15px 0;
    color: white;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
}
.footer-wrapper {
    width: calc(100% - 50px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 25px;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
    gap: 50px;
}
footer a:after {content:"";display:block;height:1px; width:0;background:var(--groen);position:absolute;bottom:0;left:0;}
footer a:hover:after {width:25%;}
li.widget_text {list-style:none;}
.footer-wrapper h2 {
	font-size:2.4rem;
}

footer li {font-weight:400}
li#text-2 {
    width: 25%;
}
li#nav_menu-2  {
    width: 45%;
}
li#nav_menu-4 {width:30%}
footer li, footer ul {
    list-style: none;
    margin: 0;
}
footer li  {font-weight:400;}
footer ul.sub-menu {
    display: flex;
    flex-wrap: wrap;
	gap:25px;
}
footer ul.sub-menu li {
    width: 45%;
    height: 0px;
    padding-left: 5px;
	font-weight:400;
}
footer a {color:var(--zwart)}
.menu-item li a {font-weight: 400;}
.menu-item a {font-weight: 600;}

/* Title Area
--------------------------------------------- */

.title-area {
	float: left;
	padding-bottom: 25px;
	padding-top: 25px;
	display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.wp-custom-logo .title-area {
	max-width: 350px;
	padding-bottom: 5px;
	padding-top: 5px;
	width: 100%;
}

.site-description,
.wp-custom-logo .site-title {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

header.entry-header {
    display: none;
}


/* Algemene styling
----------------------------------------------------------------------------------------------------------------------------------- */

.btn-groen {
    background: var(--groen);
    color: white;
    font-weight: 700;
    padding: 10px 50px;
    border-radius: 5px;
	border:2px solid var(--groen);
}
.btn-groen:hover {
	background:white;
	color:var(--groen);
}
.btn-center {
    margin: 50px auto;
    position: relative;
    display: block;
	padding:15px 50px;
    max-width: 300px;
    width: auto;
    text-align: center;
	font-size:2.4rem;
	border-radius:15px;
}

body {background-color:#FAFAFA;font-family:'Open Sans';color:var(--zwart)}
.site-inner {max-width:100%;overflow: hidden;}


.intro {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    padding: 100px 0;
}
.intro-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.intro-info {
    width: 50%;
    background: white;
    padding: 25px 25px 50px;
    border-radius: 15px;
    box-shadow: 0 3px 10px #33333333;
}
.intro-info p {
    padding: 0 0 25px;
}


.content-wrapper {
	width:calc(100% - 50px);
	max-width:1280px;
	padding:50px; 25px;
	margin:0 auto;
}
.content-wrapper-small {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 25px;
}
.content-blok {

}
.wit-blok {
    background: white;
    padding: 50px 0;
}
.blokken-2 {
    display: flex;
	gap:50px;
}
.blok-links, .blok-rechts { 
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.blokken-2 .blok-links, .blokken-2 .blok-rechts {
    padding:25px;
    background: white;
 	box-shadow: 0 3px 10px #33333333;
	border-left:2px solid var(--groen)
}
.blokken-2 h3, .blokken-3 h3 {
    position: absolute;
    top: -60px;
    left: -2px;
    color: white;
    font-size: 2.4rem;
    background: var(--groen);
    width: auto;
    padding: 5px 50px 5px 15px;
    border-radius: 0 15px 0 0;
}

.blokken-3 {
    display: flex;
	gap:50px;
}
.blokken-3 .blok-links, .blokken-3 .blok-midden, .blokken-3 .blok-rechts {
    width: 33.333%;
    padding:25px;
    background: white;
 	box-shadow: 0 3px 10px #33333333;
	border-left:2px solid var(--groen)
}


.blokken-foto-links {
	display: flex;
	gap:50px;
	
}
.blokken-foto-links .blok-rechts {
    align-content: center;
    padding: 25px 0;
}
.foto-blok {
    background-size: cover;
    background-position: center;
}

/* FORMULIEREN */

.offerte-footer .content-wrapper {
    display: flex;
    justify-content: space-around;
	gap:35px;
}
.offerte-content {
    width: 35%;
}
.offerte-form {
    width: 65%;
}
form div p {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.offerte-form .wpcf7-form-control-wrap {
    width: 50%;
    display: flex;
}
form div input, form div textarea {
	width: calc(100% - 15px);
    padding: 15px;
    border: 1px solid var(--groen);
	border-radius:5px;
}
.offerte-form .bericht span {width:100%}
.offerte-form .bericht textarea {width:100%;max-height: 100px;}
input.wpcf7-submit {
    border: 2px solid var(--groen);
    padding: 15px 25px;
    background: var(--groen);
    color: white;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
	width:100%;
}
input.wpcf7-submit:hover {
	background: white;
    color: var(--groen);
}




/* SLIDER */

.partners {
    background: white;
    padding: 50px;
    text-align: center;
}
.partners p {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--groen);
    padding: 0 0 25px;
}
.partner-carousel {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.partner-carousel img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 50px;
    object-fit: contain;
}



/* Homepage
----------------------------------------------------------------------------------------------------------------------------------- */
.hp-header {
	background-size:cover;
	background-attachment:fixed;
	background-position: center;
	padding:50px 0;
}
.titel {
	width:100%;
	max-width:1000px;
	margin:0 auto 50px;
	text-align:center;
	color:white;
	text-shadow:0 3px 10px #33333333; 
}
.titel h1 {color:white;}
.hp-tagline {
	font-size:3.2rem;
	font-weight:700;
	line-height:4.2rem;
}
.hp-keuze {
	display:flex;
	gap:25px;
}
.hp-keuze img{max-height:40px;}

.hp-keuze .blok-links, .hp-keuze .blok-rechts {
    background: white;
	padding: 25px;
	text-align:center;
	justify-content: center;
    border-radius: 15px;
    box-shadow: 0 3px 10px #33333333;
	padding-bottom:35px;
}
.hp-keuze .blok-links h2, .hp-keuze .blok-rechts h2 {
	color:var(--groen);
	font-size:2.4rem;
}
.hp-over {margin: 100px 0;}
.hp-over a { width: 100%;}

.hp-offerte {
    background: white;
    padding: 50px 0;
}


/* RESPONSIVE 
 * --------------------------------------------- */
html[lang="nl-NL"]{
	.engels {display:none}
}
html[lang="en-GB"]{
	.nederlands {display:none}
}

.mob {display:none !important}

@media (max-width:1400px){

}

@media (min-width:1240px) {

}



@media (max-width:1280px){
	
	
}

@media (min-width:768px) and (max-width:1024px) {

}

@media (max-width:960px){
	
	
}

@media (max-width:768px)
{
	.mob {display:inherit !important;}
	.desktop {display:none !important}
	h1, h2 {font-size:4rem;line-height:1}
	.btn-groen {width: auto;padding: 10px 35px; text-align: center;}
	.content-wrapper {padding:25px}
	.blokken-2, .blokken-3, .hp-keuze, .content-wrapper, .blokken-foto-links,  form div p {flex-wrap:wrap}
	.blok-links, .blok-rechts, .blok-midden, .offerte-content, .offerte-form {width:100% !important}
	.blok-links, .blok-rechts{margin-bottom: 25px;}
	.blokken-2 h3, .blokken-3 h3 {top:-70px}
	.foto-blok {height: 250px;}
	.intro-info {width:calc(100% - 50px)}
	.hp-tagline {font-size:2.4rem;line-height:1.5}
	.hp-over {margin:50px 0}
	.wit-blok {padding:25px 0}
	.blokken-foto-links {gap:0px}
	.offerte-form .wpcf7-form-control-wrap {width:100%}
	footer ul.sub-menu li {width:100%;}
	li#text-2, li#nav_menu-2, li#nav_menu-4  { width:100%;}
}
@media (max-width: 600px) {

}


@media (max-width:480px){
	
}