:root{
	--primary-color: #84B060;
	--seconary-color:#F6F3EF;
	--subsecondary-color:#193111;
}
@font-face {
	font-family: "Apercu";
	src: url( "https://staging.greenmatter.nl/wp-content/uploads/2023/07/Apercu-Light.woff") format("woff"),
}

@font-face {
	font-family: 'Norwester';
	font-style: normal;
	font-weight: 400;
	src: url('https://staging.greenmatter.nl/wp-content/uploads/2023/11/norwester.woff') format('woff');
}
#snackbar {
	visibility: hidden;
	min-width: 250px;
	width: 200px;
	height: 50px;
	margin-right: 0px;
	background-color: #193111;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	top: 147px;
	right: 0px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

#greenmatters .loader {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #ffffff60;
	top: 0;
	left: 0;
	z-index: 999;
	backdrop-filter: blur(3px);
	display: none;
}

#greenmatters .loader .loding{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.content {
	width: 80px;
	height: 80px;
	margin: 100px auto;
	border-radius: 50%;

	position: relative;
	animation-name: yahoo-spin-animation;
	animation-duration: 1.5s !important;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes yahoo-spin-animation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.ball {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: absolute;
}

/**
 * Each Color Info
 */
 .red {
 	border: 1px solid rgb(238, 92, 47);
 	background: rgb(238, 87, 48);
 	top: -10px;
 	left: 50%;
 	margin-left: -10px;
 }

 .green {
 	border: 1px solid rgb(84, 174, 10);
 	background: rgb(85, 178, 17);
 	top: 10px;
 	right: -6px;
 }

 .yellow {
 	border: 1px solid rgb(247, 184, 50);
 	background: rgb(238, 187, 48);
 	bottom: 10px;
 	right: -6px;
 }

 .blue {
 	border: 1px solid rgb(43, 151, 251);
 	background: rgb(48, 161, 251);
 	bottom: -10px;
 	left: 50%;
 	margin-left: -10px;
 }

 .emerald-green {
 	border: 1px solid rgb(74, 167, 130);
 	background: rgb(74, 168, 139);
 	bottom: 10px;
 	left: -6px;
 }

 .pink {
 	border: 1px solid rgb(236, 79, 147);
 	background: rgb(237, 76, 148);
 	top: 10px;
 	left: -6px;
 }


 #greenmatters .product-name{
 	font-size: 14px;
 }
 #greenmatters .card-wrap .card {
 	border-radius: 15px;
 	overflow: hidden;
 	min-height: 230px;
 }
 #greenmatters{
 	color: var(--seconary-color);
 	list-style: none ;
 	border: none;
 	outline: none;
 	font-family: Apercu;
 }
 #greenmatters .prduct-list{
 	color: var(--seconary-color);
 	list-style: none ;
 	margin: unset;

 }
 #greenmatters .prduct-list .product-name{
 	font-size: 15px;
 	font-weight: 300;
 	font-family: Apercu !important;
 }
 #greenmatters .subheading-size{
 	font-size: 1.2rem;
 	margin: 20px 5px;
 }

 .form-product-wraper{
 	height: 122px; 
 	width: 217px; 
 	overflow:hidden;
 }
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
 	border: 1px solid #fff;
 	-webkit-text-fill-color: #fff;
 	-webkit-box-shadow: 0 0 0px 1000px #0000 inset;
 	transition: background-color 5000s ease-in-out 0s;
 }

 #greenmatters input[type="text"]{
 	border-bottom: 1px solid var( --seconary-color) !important;
 	color: var( --seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }
 #greenmatters input[type="number"]{
 	border-bottom: 1px solid var( --seconary-color) !important;
 	color: var( --seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 	text-align: center;
 	width: 50px;
 	margin: 0 20px;
 	border-radius: unset !important;
 }
 #greenmatters input[type="email"]{
 	border-bottom: 1px solid var( --seconary-color) !important;
 	color: var( --seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;

 }
 #greenmatters input[type="tel"]{
 	border-bottom: 1px solid var( --seconary-color) !important;
 	color: var( --seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;

 }


 #greenmatters input[type="tel"]:focus,
 #greenmatters input[type="tel"]:focus-visible,
 #greenmatters input[type="tel"]:focus-within {
 	border-bottom: 1px solid var(--seconary-color) !important;
 	color: var(--seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }
 #greenmatters input:focus, #greenmatters input:focus-visible, #greenmatters input:focus-within{
 	background:transparent !important;
 	border-bottom: 1px solid var( --primary-color) !important;
 	color: var( --primary-color) !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }

 #greenmatters input[type="number"]::-webkit-inner-spin-button{
 	display: none;
 }

 .main-woitblolden{
 	height: 57px;
 	border-radius: 8px;
 	border: 1px solid #FFF;
 	background: #84B060;
 	padding: 17px 17px;
 	width: 222px;
 }

 .main-woitblolden input[type="text"]{
 	width: 68px;
 	margin-bottom: 4px;
 	margin-right: 15px;
 	background: unset;
 	color: var(--seconary-color);
 }

 .main-woitblolden:focus-within{
 	background-color: var(--seconary-color);
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;

 }
 .main-voetbalvelden-input:focus, .main-voetbalvelden-input:focus-visible{
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;

 }
 .main-voetbalvelden-input:focus,  .main-voetbalvelden-input:focus-visible{
 	border-color: var(--primary-color) !important;
 	border: none;
 }
 .main-voetbalvelden-input:focus + label{
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;

 }

 .woitblolden-qty{
 	width: 122px;
 	height: 45px;
 	padding:2px 8px !important;
 	border-radius: 5px;
 	border: 1px solid #FFF;
 	background: #84B060;
 	margin:5px auto;
 }

 .woitblolden-qty input[type="number"]{
 	width: 43px;
 	margin-right: 15px;
 	text-align: center;
 	margin:0px  auto !important;
 	color:var(--seconary-color);
 }

 .woitblolden-qty:focus-within, .woitblolden-qty:focus-visible{
 	background-color: var(--seconary-color);
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;
 }
 .voetbalvelden-input:focus ,.woitblolden-qty:focus-visible{
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;
 }
 .voetbalvelden-input:focus,.woitblolden-qty:focus-visible{
 	border-color: var(--primary-color) !important;
 	border: none;
 	outline: none;
 }
 .voetbalvelden-input:focus + label{
 	color: var(--primary-color) !important;
 	border: none;
 	outline: none;
 }
 #greenmatters .form-sections .form-flex{
 	padding: 25px;
 	background: #95C66E;
 	border-radius: 25px;
 	margin:30px;
 	align-items: center;
 }
 #greenmatters .form-sections h2{
 	font-weight: 700;
 }
 #main-container{
 	background: var(--primary-color);
 	margin: 5px auto;
 	width: 1170px;
 	padding: 5% 5%;
 	border-radius: 20px;

 }

 .hero-descripton{
 	font-size: 19px;
 	font-style: normal;
 	font-weight: 300;
 	line-height: normal;
 }
 .hero-subheading{
 	font-size: 13px;
 	font-style: normal;
 	font-weight: 300;
 	line-height: normal;
 	margin: 3.5rem auto;
 }
 .hero-word{
 	font-size: 19px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: normal;
 }

 .hetprobleem{
 	font-size: 23px;
 	font-style: normal;
 	font-weight: 300;
 	line-height: normal;
 }
 #greenmatters   .accordion {
 	width: 100%;
 	max-width: 1000px;
 }

 #greenmatters .accordion-item {
 	color: #000;
 	margin: 1rem 0;
 	border-radius: 0.5rem;
 	background:transparent;
 	border: none;
 }

 #greenmatters .accordion-item-header {
 	padding: 10px 35px;
 	min-height: 3.5rem;
 	line-height: 1.25rem;
 	font-weight: bold;
 	display: flex;
 	font-size: 1rem;
 	align-items: center;
 	position: relative;
 	cursor: pointer;
 	color: var(--seconary-color);
 }
 #greenmatters .accordion-item-header::before {
 	content: "";
 	width: 14px;
 	height: 14px;
 	border: 1px solid;
 	left: -2px;
 	position: absolute;
 	border-radius: 4px;
 }
 #greenmatters .accordion-item-header.active::before {
 	content: "";
 	background: var(--subsecondary-color);
 	border: none;
 	border-radius: 4px;
 }
 #greenmatters .accordion-item-header::after {
 	content: "\2039";
 	transform: rotate(270deg);
 	font-size: 2rem;
 	position: absolute;
 	right: 1rem;
 }

 #greenmatters .accordion-item-header.active::after {
 	content: "\203A";
 	transform: rotate(270deg);
 }

 #greenmatters .accordion-item-body {
 	max-height: 0;
 	overflow: hidden;
 	transition: max-height 0.5s ease-out !important;
 }

 #greenmatters .accordion-item-body-content {
 	padding: 1rem;
 	line-height: 1.5rem;
 	border-top: 0px solid;
 	border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
 }

 #greenmatters #greenmatterusername:focus,
 #greenmatters #greenmatterusername:focus-visible,
 #greenmatters #greenmatterusername:focus-within {
 	background: transparent !important;
 	border-bottom: 1px solid var(--seconary-color) !important;
 	color: var(--seconary-color) !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }


 #greenmatters #greenmatterusercompany:focus,
 #greenmatters #greenmatterusercompany:focus-visible,
 #greenmatters #greenmatterusercompany:focus-within {
 	background: transparent !important;
 	border-bottom: 1px solid var(--seconary-color) !important;
 	color: var(--seconary-color) !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }

 #greenmatters input[type="email"]:focus,
 #greenmatters input[type="email"]:focus-visible,
 #greenmatters input[type="email"]:focus-within {
 	border-bottom: 1px solid var(--seconary-color) !important;
 	color: var(--seconary-color) !important;
 	background:transparent !important;
 	border-style: none;
 	outline: none;
 	padding: 0px;
 }
 .emailvalidations {
 	display: none;
 	position: relative;
 	padding: 5px 5px 5px 5px !important;
 	margin-bottom: -2rem !important;
 	border: 1px solid transparent;
 	border-radius: 0.25rem;
 	margin-top: 26px;
 	color: #631010;
 	background: #ffc0cb8a;
 }
 #namevalidations{
 	display: none;
 	position: relative;
 	padding: 6px !important;
 	margin-bottom: 1rem;
 	border: 1px solid transparent;
 	border-radius: 0.25rem;
 	color: #631010;
 }
 /****************************Foooter**************************************/

 .footer-forms-heading{
 	margin: 50px 0 0 0;
 	font-size: 1.2rem;
 }
 .footer-form-discription{
 	font-family: Roboto;
 	font-size: 15px;
 	font-weight: 300;
 	line-height: 18px;
 	letter-spacing: 0em;
 	margin: 20px 0 20px 0;
 	text-align: left;

 }
 .footer-form-headin-pdf{
 	font-family: Roboto;
 	font-size: 17px;
 	font-weight: 700;
 	line-height: 21px;
 	letter-spacing: 0em;
 	text-align: left;

 }
 .result-values{
 	width: 235px;
 	height: 235px;
 	background-color: var(--seconary-color);
 	border-radius: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin-top: 25px;
 }

 .result-values p{
 	color: var(--subsecondary-color);
 	font-family: Norwester;
 	font-size: 35px;
 	font-weight: 600;
 	line-height: 66px;
 	letter-spacing: 0em;
 	text-align: center;
 	margin: 0px !important;

 }
 .result-values span{
 	color: var(--subsecondary-color);
 	font-family: Roboto;
 	font-size: 20px;
 	font-weight: 600;
 	line-height: 42px;
 	letter-spacing: 0em;
 	text-align: center;
 	margin-left: -7px;

 }
 #footer-greenmatters input{
 	width: 100%;
 	height: 45px;
 	padding-bottom: 0px;
 }
 #footer-greenmatters input::-webkit-input-placeholder{
 	color:var(--seconary-color);
 	font-weight: 100;
 }

 .form-btn-group{
 	margin: 10px auto !important;
 }

 .btn-form-pdf, .btn-form-pdf-en{
 	background-color: var(--subsecondary-color) !important;
 	color:var(--seconary-color) !important;
 	height: 53px;
 	font-size: 1rem !important;
 	border-radius: 10px !important;
	  	width: 60%;
 }
 .btn-form-pdf:hover, .btn-form-pdf-en:hover{
 	background-color:transparent !important;
 	border: 1px solid var(--subsecondary-color)!important;
 	color:var(--subsecondary-color)!important;
 }

 #accordion-sections-wrap{
 	padding: 5px 8px;
 	overflow: scroll;
 	height: 900px;
 	max-height:999px;
 	min-height: 300px;
 	overflow-x: hidden;
 	box-shadow: 0px 0px 2px #ffffff3b inset;
 }

/*.mCSB_inside > .mCSB_container {
    padding: 3px;
    }*/

    `::-webkit-scrollbar {
    	background:white;
    	width: 1px;
    }

    #accordion-sections-wrap::-webkit-scrollbar-track {
    	background: #f1f1f1;
    }

    /* Handle */
    #accordion-sections-wrap::-webkit-scrollbar-thumb {
    	background: var(--subsecondary-color);
    }

    /* Handle on hover */
    #accordion-sections-wrap::-webkit-scrollbar-thumb:hover {
    	background: #555;
    }
    .greenmatter-form-submit-btn{
    	display: flex;
    	gap:9px;
    }
    .result-responsive-class{
    	position: relative;

    }
    .result-values.percent-valu.percent-valu-small.mx-auto {
    	position: absolute;
    	right: 8px;
    	top: 212px;
    	width: 115px;
    	height: 115px;
    }
    .percent-valu-image img{
    	max-width: unset;
    	left: 0px;
    	position: relative;
    	width: 106%;
    	height: 252px;
    }
    .result-responsive-class .light-green{
    	border-radius: 22px; 
    	background: #95C66E; 
    	padding:20px 15px;
    	position: relative;
    }

    .imag-card{
    	border-radius:25px; 
    	height: 350px; 
    	background: #95C66E; 
    	display: flex; 
    	padding: 25px;    
    	flex-direction: column;
    	position: relative;
    	align-items: center;
    }
    .imag-card img{
    	max-width: 70%;
    }
    .text-card p {
    	background-color: #fff;
    	color: #000; 
    	padding: 15px 25px; 
    	border-radius: 10px;  
    	margin-top: -101px;
    	text-align: left;
    	line-height: 20px;
    }
    .imag-card .text-card {
    	position: absolute;
    	top: 114%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	width: 80%;
    }



    @media only screen and (max-width: 320px) and (min-width: 200px){
    	.form-product-wraper {
    		height: auto;
    		width: 100%;
    		overflow: hidden;
    	}
    	.percent-valu-image img{
    		max-width: unset;
    		left: 0px;
    		position: relative;
    		width: 106%;
    	}
    	.imag-card .text-card {
    		position: absolute;
    		top: 112%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		width: 80%;
    		font-size: 5px;
    	}
    	.text-card p {
    		font-size: 9px;
    	}
    	#greenmatters .form-sections .form-flex {
    		margin: 30px auto;
    		padding:10px;
    	}
    	.hetprobleem{
    		font-size: 15px;
    	}
    	.result-responsive-class{
    		display: flex;
    		flex-direction: column;
    		justify-content: flex-start;
    	}

    	#accordion-sections-wrap{
    		/* height: 350px;*/
    	}
    	.main-woitblolden, .woitblolden-qty{
    		width: 100%;
    	}
    	.prduct-list{
    		padding-left:0px !important;
    	}
    	p.product-name {
    		margin: unset;
    		margin-top: 20px;
    	}
    	.form-btn-groups{
    		display: flex;
    		gap:10px;
    	}
    	.btn-form-pdf, .btn-form-pdf-en{
    		width: 50%;
    		font-size: 11px !important;
    	}
    	.woitblolden-qty input[type="number"] {
    		width: 50%;
    	}
    	.main-woitblolden input[type="text"] {
    		width: 50%;
    	}

    	.footer-forms-heading {
    		font-size: 16px;
    	}

    	.result-values p {
    		font-size: 26px;
    	}
    	.result-values span {
    		font-size: 26px;
    		margin-left: -9px;
    	}
    	.result-values {
    		width: 130px;
    		height: 130px;
    	}
    	.result-values.percent-valu.percent-valu-small.mx-auto {
    		position: absolute;
    		right: 66px;
    		top: 200px;
    		width: 115px;
    		height: 115px;
    	}
    	.imag-card{
    		border-radius:25px; 
    		height: 280px; 
    		background: #95C66E; 
    		display: flex; 
    		padding: 25px;    
    		flex-direction: column;
    	}
    }
    @media only screen and (max-width: 425px) and (min-width: 321px){
    	.form-product-wraper {
    		height: auto;
    		width: 100%;
    		overflow: hidden;
    	}
    	.percent-valu-image img{
    		max-width: unset;
    		left: 0px;
    		position: relative;
    		width: 106%;
    	}
    	.text-card p {
    		font-size: 12px;
    	}
    	.result-responsive-class{
    		display: flex;
    		flex-direction: column;
    		justify-content: flex-end;
    	}

    	#accordion-sections-wrap{
    		/*   height: 350px;*/
    	}
    	.main-woitblolden, .woitblolden-qty{
    		width: 100%;
    	}
    	.prduct-list{
    		padding-left:0px !important;
    	}
    	p.product-name {
    		margin: unset;
    		margin-top: 20px;
    	}
    	.form-btn-groups{
    		display: flex;
    		gap:10px;
    	}
    	.btn-form-pdf, .btn-form-pdf-en{
    		width: 50%;
    		font-size: 14px !important;
    	}
    	.woitblolden-qty input[type="number"] {
    		width: 50%;
    	}
    	.main-woitblolden input[type="text"] {
    		width: 50%;
    	}

    	.footer-forms-heading {
    		font-size: 16px;
    	}

    	.result-values p {
    		font-size: 27px;
    	}
    	.result-values span {
    		font-size: 26px;
    		margin-left: -9px;
    	}
    	.result-values {
    		width: 150px;
    		height: 150px;
    	}
    	.result-values.percent-valu.percent-valu-small.mx-auto {
    		position: absolute;
    		right: 120px;
    		top: 200px;
    		width: 115px;
    		height: 115px;
    	}
    	.imag-card{
    		border-radius:25px; 
    		height: 100%;
    		background: #95C66E; 
    		display: flex; 
    		padding: 37px;    
    		flex-direction: column;
    		position: relative;
    	}
    	.imag-card .text-card {
    		position: absolute;
    		top: 110%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    	}
    }
    @media only screen and (max-width: 991px) and (min-width: 426px){
    	.form-product-wraper {
    		height: auto;
    		width: 100%;
    		overflow: hidden;
    	}
    	.percent-valu-image img{
    		height: 178px;
    	}
    	.text-card p {
    		font-size: 12px;
    	}
    	.result-values {
    		width: 178px;
    		height: 178px;
    	}
    	.result-responsive-class{
    		display: flex;
    		flex-direction: column;
    		justify-content: flex-start;
    	}

    	#accordion-sections-wrap{
    		/* height: 350px;*/
    	}
    	.main-woitblolden, .woitblolden-qty{
    		width: 100%;
    	}
    	.prduct-list{
    		padding-left:0px !important;
    	}
    	p.product-name {
    		margin: unset;
    		margin-top: 20px;
    	}
    	.form-btn-groups{
    		display: flex;
    		gap:10px;
    	}
    	.btn-form-pdf, .btn-form-pdf-en{
    		width: 100%;
    	}
    	.woitblolden-qty input[type="number"] {
    		width: 50%;
    	}
    	.main-woitblolden input[type="text"] {
    		width: 50%;
    	}

    	.footer-forms-heading {
    		font-size: 16px;
    	}

    	.result-values p {
    		font-size: 35px;
    	}
    	.result-values span {
    		font-size: 26px;
    		margin-left: -9px;
    	}
    	.result-values.percent-valu.percent-valu-small.mx-auto {
    		position: absolute;
    		right: 13px;
    		top: 160px;
    		width: 115px;
    		height: 115px;
    	}

    	.imag-card{
    		border-radius:25px; 
    		height: 320px; 
    		background: #95C66E; 
    		display: flex; 
    		padding: 25px;    
    		flex-direction: column;
    		align-items: center;
    	}
    	.imag-card img{
    		position: absolute;
    		height: 80%;
    	}
    }