/*
Theme: AvandeGroep
Version: 1.0
Theme_URI: https://www.lemon.nl
Date: 04/2025
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/** ******************************** **/
/**      _____                       **/
/**    _(  _  )__________________    **/
/**   ( | (___)     | ____ |  _  |   **/
/**   |_|_______|_|_|______|_| |_|   **/
/**                                  **/
/**            www.lemon.nl          **/
/**                                  **/
/** ******************************** **/

/*************** FONTS ****************/

h1, h2					{ font-size:  90px; line-height: 0.9em; letter-spacing: -0.01em; font-weight: 300; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 20px 0; }
.headerwrapper h1		{ font-size: 135px; line-height: 0.9em; letter-spacing: -0.01em; font-weight: 300; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--white); margin: 0 0 20px 0; text-transform: uppercase; }
.col-6 h2				{ font-size:  90px; line-height: 0.9em; letter-spacing: -0.01em; }
h3 						{ font-size:  34px; line-height: 1.0em; letter-spacing: -0.01em; font-weight: 400; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 20px 0; }
h4 						{ font-size:  27px; line-height: 1.3em; letter-spacing: -0.01em; font-weight: 400; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 20px 0; }
h5 						{ font-size:  18px; line-height: 1.0em; letter-spacing:  0.05em; font-weight: 600; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 0 0; }
h6						{ font-size:  18px; line-height: 1.0em; letter-spacing:  0.05em; font-weight: 500; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 0 0; }
h7						{ font-size:  15px; line-height: 1.0em; letter-spacing:  0.09em; font-weight: 600; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 0 0; }
h8						{ font-size:  15px; line-height: 1.0em; letter-spacing:  0.06em; font-weight: 500; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); margin: 0 0 0 0; }
body 					{ font-size:  22px; line-height: 1.2em; letter-spacing: -0.00em; font-weight: 300; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkestblue); }
.intro 					{ font-size:  24px; line-height: 1.4em; letter-spacing: -0.00em; font-weight: 300; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; }
.footer 				{ font-size:  14px; line-height: 1.6em; letter-spacing: -0.02em; font-weight: 400; font-style: normal; font-family:           Arial, Helvetica, Verdana, sans-serif; }
.small, .small a 		{ font-size:  15px; line-height: 1.2em; letter-spacing: -0.02em; font-weight: 400; font-style: normal; font-family:           Arial, Helvetica, Verdana, sans-serif; }
.date 					{ font-size:  15px; line-height: 1.2em; letter-spacing: -0.02em; font-weight: 400; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; }
.navbar-nav li a, .btn	{ font-size:  17px; line-height: 1.5em; letter-spacing:  0.05em; font-weight: 400; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--white); text-decoration: none; text-transform: uppercase; }
#gform_submit_button_1	{ font-size:  17px; line-height: 1.5em; letter-spacing:  0.05em; font-weight: 400; font-style: normal; font-family: 'agenda', Arial, Helvetica, Verdana, sans-serif; color: var(--white); text-decoration: none; text-transform: uppercase; }


h5, h6, h7, h8 			{ text-transform: uppercase; display: block; }
h1 a, h2 a, h3 a, 
h4 a, h5 a, h6 a 		{ text-decoration: none; }

a.col,
.modal-body a,
.content a 				{ font-weight: 500; color: var(--black); text-decoration: none; }
a.col:hover .link,
.modal-body a:hover,
.content a:hover 		{ font-weight: 500; color: var(--blue); text-decoration: none; }
a.underline 			{ text-decoration: underline; }
.text-bottom 			{ position: absolute; bottom: 5px; }

.header h1 				{ color: var(--white);} 

/************* CONTAINERS *************/
.pagewrapper 		{ width: 100%; margin: 0 auto; }
.fullcontainer 		{ width: 100%; }
.headerwrapper 		{ width: 100%; padding: 45px 0 0; margin-left: auto; margin-right: auto; margin-bottom: 0px; }
.widthcontainer 	{ width: 100%; max-width: 1440px; padding: 0 20px; margin-left: auto; margin-right: auto; }
.container 			{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-right: var(--quartermargin); padding-left: var(--quartermargin); }
.navbar .container 	{ width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; }
.smallcontainer 	{ width: 100%; max-width: 960px; padding: 0 20px; margin: 0 auto; }


b, strong { font-weight: 600;}

:root {
	--container: 1200px;
}







.photo-col-5 {
	flex: 0 0 auto;
	width: calc(((100vw - var(--container)) / 2) + 500px);
	
}
.photo-col-7 {
	flex: 0 0 auto;
	width: calc(((100vw - var(--container)) / 2) + 700px);
	padding-left: 0;
	padding-right: 0;
}

.photocontainer .has-background-image {
	height: 100%;
}

.photocontainer .photo-content {
	width: 100%;
	max-width: 500px;
}

.photocontainer .photo-col:nth-of-type(2) .photo-content {
	padding-left: 100px;
	padding-right: 30px;
}

.photocontainer .photo-col:nth-of-type(1) .photo-content {
	padding-right: 100px;
	padding-left: 30px;
	float: right;
}

.photocontainer .btn {
	text-transform: uppercase;
}



table.striped tr:nth-child(odd) {
	background-color:var(--lightblue);
}


.bg-darkblue table.striped tr:nth-child(odd) {
	background-color:var(--blue);
}










body { background-color: var(--lightestblue);}

.has-background-image {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: all 0.2s ease-in;
}

.has-navbar {
	margin-top: -11px;
}

.headerwrapper {
	/* aspect-ratio: 10/3; */
	position: relative;
}

.home .headerwrapper {
	aspect-ratio: 10/4;
}


.container.header {
	padding-top: 90px;
	padding-bottom: 240px;
}

.single-producten .container.header {
	padding-top: 0;
	padding-bottom: 240px;
}

.logo img {
	display: inline-block;
	max-width: 370px;
}




.wave-darkblue {
	position: absolute;
	bottom: -2px;
	background-image: url('images/wave-darkblue.svg');
	background-position: 30% bottom;
	background-size: 150vw auto;
	background-repeat: no-repeat;
	width: 100vw;
	aspect-ratio: 1/0.2;
	pointer-events: none;
}

.wave-lightestblue {
	position: absolute;
	bottom: -7px;
	background-image: url('images/wave-lightestblue.svg');
	background-position: 10% top;
	background-size: 110vw auto;
	background-repeat: no-repeat;
	width: 100vw;
	aspect-ratio: 1/0.1;
	pointer-events: none;
}

.wave-lightblue {
	position: absolute;
	bottom: -7px;
	background-image: url('images/wave-lightblue.svg');
	background-position: 10% top;
	background-size: 110vw auto;
	background-repeat: no-repeat;
	width: 100vw;
	aspect-ratio: 1/0.1;
	z-index: -1;
	pointer-events: none;
}

.headerwave {
	position: absolute;
	bottom: -2px;
	pointer-events: none;
}

.headerwave,
.multiwave-darkblue,
.multiwave-lightblue,
.multiwave-lightestblue {
	background-position: center bottom;
	background-size: 110vw auto;
	background-repeat: no-repeat;
	width: 100vw;
	aspect-ratio: 25/4;
	pointer-events: none;
}

.headerwave,
.multiwave-lightestblue {
	background-image: url('images/multiwave-lightestblue.svg');
}

body.single-producten .headerwave {
	background-image: url('images/multiwave-white.svg');
}

body.home .headerwave,
.multiwave-darkblue {
	background-image: url('images/multiwave-darkblue.svg');
}

.multiwave-lightblue {
	background-image: url('images/multiwave-lightblue.svg');
}






.bg-wave-lightblue {
	background-image: url('images/wave-lightblue.svg');
	background-position: center 200px;
	background-size: 110vw auto;
	background-repeat: no-repeat;
}

.bg-bigwave-darkblue {
	background-image: url('images/bigwave-darkblue.svg');
	background-position: center left;
	background-size: 110vw auto;
	background-repeat: no-repeat;
	min-height: 660px;
}




.owl-carousel {
	padding-left: 0;
	padding-right: 0;
}


.owl-item {
	padding: 12px;
}

.owl-nav,
.navs {
	position: absolute;
	width: 100%;
	left: 0;
	top: calc(50% - 40px);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.navs .prev,
.navs .next {
	position: absolute;
	font-size: 15px;
	padding: 0 6px;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--darkestblue);
	color: var(--white);
	transition: all 0.2s;
	cursor: pointer;
}


.owl-carousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-prev::before {
	width: 25px;
	height: 25px;
	/* display: none; */
	font: var(--fa-font-solid);
	content: '\f061';
	font-size: 15px;
	position: relative;
}

.owl-carousel .owl-nav button.owl-prev::before {
	content: '\f060';
}


.owl-carousel .owl-nav button.owl-prev,
.navs .prev 		{ left: -45px; }

.owl-carousel .owl-nav button.owl-next,
.navs .next 		{ right: -45px; }

/* .owl-carousel .owl-nav button.owl-prev:hover,
.navs .prev:hover 	{ left: -50px; }

.owl-carousel .owl-nav button.owl-next:hover,
.navs .next:hover 	{ right: -50px; } */




.has-product-card {
	margin: 0 0 25px 0;
}

a .product-card,
.product-card {
	color: #ffffff !important;
	text-decoration: none !important;
	border: none;
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
	transition: all 0.2s;
	box-shadow: 0 0 13px rgba(40,48,106,0.3);
	
}

a .product-card:hover {
	margin: -10px 0 10px 0;
	transition: all 0.2s;
}

.product-card .card-header {
	/* background-color: #000; */
	/* background-color: var(--white); */
	aspect-ratio: 1/0.5;
	padding: 0;
}

.product-card .card-header .header-img {
	width: 100%;
	height: 100%;
	background-size: 75%;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.4s;
	background-color: var(--white);
}

.product-card .card-body {
	min-height: 170px;
}


.owl-stage-outer {
	margin-bottom: 20px;

	padding-top: 30px;
	padding-bottom: 20px;

	/*
	padding-left: 12px;
	padding-right: 12px;
	*/
}



.bluefilter {
	background-color: #081048;
}

.bluefilter > div,
.bluefilter > img {
	/* filter: sepia(90%) hue-rotate(190deg) saturate(300%); */
	/* filter:  sepia(100%) saturate(150%); */
	
	/* filter: sepia(100%) hue-rotate(190deg) saturate(150%); opacity: 0.4; */

	filter: sepia(100%) hue-rotate(188deg) saturate(145%); opacity: 0.27;
}


.product-card .card-body {

	background: var(--grey-lightest);
	padding: 20px 30px 30px;
}

a.has-product-card:hover,
a:hover .product-card p,
a:hover .product-card h4,
a:hover .product-card span,
a.has-product-card,
a .product-card p,
a .product-card h4,
a .product-card span {
	color: var(--darkestblue);
	text-decoration: none !important;
}

a:hover .product-card .card-header .header-img  {
	transition: all 0.4s;
	filter: saturate(100%);
	opacity: 1;
}



.has-background-image-right {
	background-position: 40vw 0;
	background-repeat: no-repeat;
	background-size: cover;
}

.has-background-image-left {
	background-position: -40vw 0;
	background-repeat: no-repeat;
	background-size: cover;
}


.footer.has-background-image {
	background-position: center -90px;
	background-size: cover;
	background-repeat: no-repeat;
	transition: all 0.2s ease-in;
}







.single-producten h1 {
	font-weight: 500;
	margin-bottom: -10px;
	display: inline;
}

.single-producten h1 span {
	font-weight: 400;
	font-size: 25px;
	letter-spacing: 0;
}

.single-producten .tags {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 25px;
}

.extra_thumbnail {
	/* max-height: 100px; */
	/* float: right; */
	/* margin: 0 0 10px 10px; */
}

/* Witvissen */
.postid-151 .extra_thumbnail {
	/* max-height: 150px; */
}

.mini-card {
	border: none;
	padding: 18px 18px;
	height: calc(100% - 8px);
	margin-bottom: 8px;
}

.mini-card h5 {
	font-size: 16px;
	margin-bottom: 10px;
}


.single-producten {
	background-color: #ffffff;
}

.single-producten .footer {
	/* margin-top: 0 !important; */
}


/*
url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e)
*/


.navbar-toggler {
	border: none;
	position: absolute;
	right: 15px;
	top: 19px;
	color: #fff !important;
}

.navbar-toggler:focus {
	box-shadow: none;
}


.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

.navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover,
.navbar-nav>.open>a, .navbar-nav>.open>a:focus, .navbar-nav>.open>a:hover,
.navbar-nav>li>a:focus, .navbar-nav>li>a:hover {
	transition: all 0.5s ease;
}


.navbar-nav > li > a {
	display: inline-block;
	margin: 0 35px 0 0;
}

.navbar-nav > li > a {

}




#menu-lang a {
	margin: 0 0 8px 0;
}

.navbar-nav > li li > a {
	display: inline-block;
	margin: 0 0 8px 0;
}

.navbar-nav li:hover > a {
	/* font-weight: 700; */
	color: var(--blue);
}

.navbar-nav li .sub-menu {
	position: relative;
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: all 0.5s ease-in;
}

.navbar-nav li:hover .sub-menu {
	z-index: +1;
	display: block;
	max-height: 300px;
	transition: all 0.5s ease-out;
}

#menu-lang a.active, .navbar-nav li.active a { font-weight: 600;}



.footer .container {
	padding-top: 0;
	padding-bottom: 30px;
}


.footer {
	/* position: relative; */
	padding-top: 0 !important;
}

.has-footer-wave {
	/* position: absolute; */
	top: 0;
	width: 100%;
	aspect-ratio: 3.5/1;
	background-image: url('images/wave-footer.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	opacity: 0.5;
}
/* 
2050 570


1230 342 */


.footer .icon {
	float: left;
	margin-right: 20px;
	width: 32px;
	height: 32px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon.pin   { background-image: url('images/icon-pin.svg');   width: 34px; height: 34px; }
.icon.mail  { background-image: url('images/icon-mail.svg');  width: 31px; height: 31px; }
.icon.phone { background-image: url('images/icon-phone.svg'); width: 32px; height: 32px; }


.footer p {
	display: inline-block;
	padding: 3px 0 13px;
}

.footer li {
	padding: 3px 0 11px;
}

.footer {
	margin-top: var(--fullmargin);
	padding-top: var(--halfmargin);
}

.footer a {
	color: var(--white);
}

.footer a.underline {
	text-decoration: underline;
}

.modal {
	max-height: 85vh;
}

body.modal-open {
	padding-right: 0 !important;
}

.modal-content .modal-body {
	background-color: #ffffff;
}

.modal-content {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	padding: 10px;
}

.modal-body {
	padding: 30px 35px 35px;
}



#gform_submit_button_1,
.btn {
	background-color: var(--blue);
	color: #ffffff !important;
	padding: 2px 22px;
	border-radius: 5px;
	text-decoration: none !important;
	transition: all 0.1s;
	margin: 0 0 0 0;
	border: none;
}

#gform_submit_button_1:hover,
.btn:hover  {
	background-color: var(--darkestblue);
	color: var(--white);
	transition: all 0.1s;
}

.btn.btn-big {
	padding: 8px 32px;
}

.navbar-nav .btn > a {
	margin: 0;
	padding: 0;
}

.navbar-nav .btn:hover  {
	background-color: var(--white);
	color: var(--darkestblue);
	transition: all 0.1s;
}
.navbar-nav .btn:hover a {
	color: var(--darkestblue) !important;
}


#gform_submit_button_1 {
	text-transform: uppercase;
}



.btn.btn-darkestblue {
	background-color: var(--darkestblue);
}





/*********** FAQ / Accordion item ***********/

.has-faq {
	margin: 0 0 30px 0;
	padding: 0
}

.faq-container {
	margin: 0;
	padding: 0;
}

.faq-title {
	cursor: pointer;
	width: 100%;
	padding: 10px 0 0;
	display: block;
	text-decoration: none;
}

.faq-title .faq-icon  {
	margin: 3px 17px 5px 3px;
	transition: transform 0.1s;
	float: left;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.faq-title.active .faq-icon  {
	transform: rotate(90deg);
	transition: transform 0.1s;
}

.faq-title.active,
.faq-title:hover {
	font-weight: 500;
	text-decoration: none;
}

.faq-answer {
	padding: 5px 0 0 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
}

.faq-answer.active {
	height: auto;
	max-height: 9999px;
	transition: max-height 2.5s ease-out;
}

.faq-answer .content {
	margin-bottom: 15px;
}

.onmobile.faq-container {
	border: none;
	padding-top: 0;
	margin-bottom: 0;
}
.onmobile .faq-title.active,
.onmobile .faq-title:hover {
	font-weight: normal;
	text-decoration: none;
}
.onmobile .faq-title .faq-icon {
	display: none;
}
.onmobile .faq-answer {
	padding: 0;
	height: auto;
	max-height: 9999px;
}





/************** RESPONSIVE VIDEO ***************/
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 23px; border-radius: 20px; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



.modal-backdrop.show {
	opacity: 1;
	background-color: #a0a29d;
}

.carousel-indicators {
	bottom: -40px;
	margin-bottom: unset;
}

.carousel-indicators [data-bs-target] {
	background-color: #bdbebb;
	width: 11px;
	height: 11px;
	border-radius: 6px;
	margin: 0 8px;
	border: unset;
}

.carousel-indicators .active {
	background-color: #ffffff;
}

.carousel-control-next, 
.carousel-control-prev {
	font-size: 32px;
	color: #bdbebb;
	opacity: 1;
	transition: color 0.1s;
}
.carousel-control-next:hover, 
.carousel-control-prev:hover {
	color: #ffffff;
	transition: color 0.1s;
}






/******  FORMS ******/
.gform_required_legend,
.hidden_label .gfield_label,
.gform_validation_errors {
	display: none !important;
}


.gfield_error input[type=email]:focus,
.gfield_error input[type=number]:focus,
.gfield_error input[type=tel]:focus,
.gfield_error input[type=text]:focus,
.gfield_error textarea:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
	color: var(--black) !important;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
}
.gfield_error input[type=email]:focus,
.gfield_error input[type=number]:focus,
.gfield_error input[type=tel]:focus,
.gfield_error input[type=text]:focus,
.gfield_error textarea:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
	color: var(--black) !important;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
}
.gfield_error input[type=email]::placeholder,
.gfield_error input[type=number]::placeholder,
.gfield_error input[type=tel]::placeholder,
.gfield_error input[type=text]::placeholder,
.gfield_error textarea::placeholder,
.gfield_error select {
	color: var(--black);
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
	font-style: italic;
    margin-top: 8px !important;
	text-align: left;
    padding: 2px 10px !important;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2,
.gform_wrapper.gravity-theme .gfield_validation_message, 
.gform_wrapper.gravity-theme .validation_message {
	background: transparent;
	border: none;
	padding: 0;
	color: #ffffff;
	margin-top: 2px;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	background: transparent;
	border: none;
	padding: 0;
	color: #ffffff;
	box-shadow: none;
	margin: 0;
	position: relative;
	width: 100%;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2 {
	font-size: 20px;
	line-height: 26px;
	padding: 10px 0;
}

.gform_wrapper.gravity-theme input[type=date], 
.gform_wrapper.gravity-theme input[type=datetime-local], 
.gform_wrapper.gravity-theme input[type=datetime], 
.gform_wrapper.gravity-theme input[type=email], 
.gform_wrapper.gravity-theme input[type=month], 
.gform_wrapper.gravity-theme input[type=number], 
.gform_wrapper.gravity-theme input[type=tel], 
.gform_wrapper.gravity-theme input[type=text], 
.gform_wrapper.gravity-theme input[type=url], 
.gform_wrapper.gravity-theme select, 
.gform_wrapper.gravity-theme textarea {
	border-radius: 9px;
	border: none;
	padding: 10px 15px !important;
}

.gform_wrapper.gravity-theme select {
	background-color: var(--black);
	color: var(--white) !important;
}
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme select:focus-visible,
.gform_wrapper.gravity-theme select:focus-within,
.gform_wrapper.gravity-theme select:target,
.gform_wrapper.gravity-theme select:active {
	color: var(--white);
}



/* Hide the browser's default checkbox/radio */
.gfield_radio input,
.gfield_checkbox input {
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	margin-left: 20px !important;
}



/* Create a custom checkbox */
.gfield_checkbox label,
.gfield_radio label {
	position: relative;	
}

.gfield_radio label:before,
.gfield_checkbox label:before {
	content: " ";
	position: absolute;
	top: 0px;
	left: -25px;
	height: 18px;
	width: 18px;
	background-color: #ffffff;
	margin-left: 1px;
}

.gfield_radio label:before {
	top: 1px;
	height: 20px;
	width: 20px;
}

/* Create a custom radio */
.gfield_radio label:before {
	border-radius: 11px;
}

/* On mouse-over, add a grey background color */
.ginput_container .gfield_radio label:hover:before,
.ginput_container .gfield_checkbox label:hover:before {
    background-color: #eeeeee;
}

/* When the checkbox is checked, add a coloblack background */
.ginput_container .gfield_radio input:checked + label:before,
.ginput_container .gfield_checkbox input:checked + label:before {
    background-color: var(--black) !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.gfield_radio label:after,
.gfield_checkbox label:after {
	content: " ";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.ginput_container .gfield_radio input:checked + label:after,
.ginput_container .gfield_checkbox input:checked + label:after {
	display: block;
}

/* Style the checkmark/indicator */
.gfield_checkbox label:after {
	left: -19px;
	top: 1px;
	width: 8px;
	height: 12px;
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.gfield_radio label:after {
	left: -19px;
	top: 6px;
	width: 10px;
	height: 10px;
	background: #ffffff;
	border-radius: 10px;
}