/*
Theme Name: WijnVoordeel
Theme URI: https://www.lemon.nl
Description: 
Version: 1.0
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

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

/*************** COLORS ***************/
:root {
	--orange: rgba(245, 124, 37, 1);
	--orange-hover: rgba(245, 124, 37, 0.8);
	--darkgrey: #535353;
	--grey: #f8f8f8;
	--black: #000000;
	--white: #ffffff;
	--red: #ff0000;
}

/* 
#FD992B	licht oranje	RGB: 245, 124, 37
#FFE000 geel 			RGB: 255, 224, 0
#EDE4DA	beige			RGB: 237, 228, 218
#D4BDAD	donkerbeige 	RGB: 212, 189, 173

groen
RGB: 159, 207, 142
#9FCF8E

roze
RGB: 236, 193, 214
#ECC1D6

paars
RGB: 196, 200, 229
#C4C8E5

Zalm
RGB: 229, 193, 195
#E5C1C3

lichtoranje 2
RGB: 255, 192, 97
#FFC061

oranje 2
RGB: 255, 157, 134
#FF9D86
*/

.orange 	{ color: var(--orange); }
.darkgrey	{ color: var(--darkgrey); }
.grey		{ color: var(--grey); }
.black		{ color: #000000; }
.white		{ color: #ffffff; }

.bgorange 	{ background-color: var(--orange); }
.bgdarkgrey	{ background-color: var(--darkgrey); }
.bggrey		{ background-color: var(--grey); }
.bgblack	{ background-color: #000000; }
.bgwhite	{ background-color: #ffffff; }


/*************** FONTS ****************/
@font-face {
	font-family: 'Amsi';
	font-weight: 700;
	font-style: normal;
	src: url("fonts/AmsiProCond-Ultra.otf") format("opentype");
}

h1					{ font: normal normal 700 47px/51px 'Amsi', Arial, Helvetica, Verdana, sans-serif; color: var(--black); padding: 0 0 0 0; }
h2 					{ font: normal normal 700 32px/40px 'Amsi', Arial, Helvetica, Verdana, sans-serif; color: var(--black); padding: 0 0 10px 0; }
h3 					{ font: normal normal 700 32px/40px 'Amsi', Arial, Helvetica, Verdana, sans-serif; color: var(--black); padding: 0 0 10px 0; }
h4 					{ font: normal normal 700 20px/25px 'Amsi', Arial, Helvetica, Verdana, sans-serif; color: var(--black); padding: 0 0 0 0; }
h5 					{ font: normal normal 600 24px/32px 'quasimoda', Arial, Helvetica, Verdana, sans-serif; color: var(--bgdarkgrey); padding: 0 0 15px 0; }
h6					{ font: normal normal 600 24px/32px 'quasimoda', Arial, Helvetica, Verdana, sans-serif; color: var(--bgdarkgrey); padding: 0 0 15px 0; }
body 				{ font: normal normal 400 18px/24px 'quasimoda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkgrey); }

a:not(.button) 		{color: var(--orange); text-decoration: underline;}
a:not(.button):hover {color: var(--orange-hover); }
#cookie-notice,
.small,.small a 	{ font: normal normal 400 16px/24px	'quasimoda', Arial, Helvetica, Verdana, sans-serif; color: var(--darkgrey); text-align: left; }
.date 				{ font: normal normal 400 16px/24px 'quasimoda', Arial, Helvetica, Verdana, sans-serif; color: var(--orange); }
.rtl				{ direction: rtl; }

h1 a, h2 a, h3 a, 
h4 a, h5 a, h6 a 	{ text-decoration: none; }

h1 span, h2 span, 
h3 span, h4 span, 
h5 span, h6 span 	{ color: #ffffff; }

/************* CONTAINERS *************/
.pagewrapper 	{ width: 100%; margin: 0 auto; }
.fullcontainer 	{ width: 100%; }
.headerwrapper 	{ width: 100%; padding: 40px 0; margin-left: auto; margin-right: auto; }
.widthcontainer { width: 100%; max-width: 1290px; padding: 0 20px; margin-left: auto; margin-right: auto; }
.container 		{ width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }
.smallcontainer { width: 100%; max-width: 580px; padding: 0 20px; margin: 0 auto; }

.smallcontainer.content {
	padding-top: 40px;
	padding-bottom: 40px;
}


.container h1 {
	padding-top: 20px;
	padding-bottom: 40px;
}

#cookie-notice {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 902;
	background-color: rgba(74, 74, 74, .5) !important;
}

.cookie-notice-container {
	background-color: var(--grey);
	padding: 30px 40px 10px;
	text-align: left;
	min-width: unset;
	width: 80%;
	max-width: 720px;
	margin: 15% auto;
}

#cookie-notice p {
	margin-bottom: 20px;
}

#cookie-notice .cn-button {
	margin-left: unset;
	margin-right: 10px;
	margin-bottom: 20px;
	text-decoration: none !important;
	border-color: var(--orange);
}

#cn-refuse-cookie.button.cn-button {
	float: left;
	color: #8f9090 ;
	border-color: #cdcdcd ;
}

#cn-refuse-cookie.button.cn-button:hover {
	color: #555 !important;
	border-color: #555 !important;
}

/************** ELEMENTS **************/

.haslogos {
	margin-bottom: 20px;
}

.middel {
	max-width: calc(50% - 20px);
	margin-right: 18px;
}

.logo {
	padding: 0;
	max-width: calc(50% - 20px);
	margin-left: 18px;
}



#gform_submit_button_1,
a.btn,
.button {
	background-image: none;
	background: var(--orange);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	padding: 10px 60px 8px;
	box-sizing: border-box;
	vertical-align: middle;
	border: 2px solid var(--orange);
	border-radius: 30px;
	transition: all 0.2s;
	text-decoration: none !important;
}

#gform_submit_button_1:hover,
a.btn:hover,
.button:hover {
	color: #ffffff;
	border-color: var(--orange-hover);
	background: var(--orange-hover);
	transition: all 0.2s;
	text-decoration: none !important;
}





#cn-refuse-cookie.button {
	padding: 10px 30px 8px;
	background: var(--white);
	color: var(--darkgrey);
	border: 2px solid var(--darkgrey);
}
#cn-refuse-cookie.button:hover {
	background: var(--white);
	color: var(--black);
	border-color: var(--black);
}




/******  FORMS ******/

.gform-theme--api, .gform-theme--foundation {
	--gf-form-gap-x: 16px;
	--gf-form-gap-y: 16px;
}

::placeholder {
	color: #aaa !important;
	opacity: 1; /* Firefox */
}

.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(--red);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	background: transparent !important;
	border: none !important;
	font-size: 13px !important;
	font-style: italic;
	margin-top: 4px !important;
	text-align: left;
}

.gform_wrapper .gform_validation_errors>h2,
.gform_wrapper .gfield_validation_message, 
.gform_wrapper .validation_message {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--orange);
	margin-top: 2px;
}

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

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





.gform_wrapper input[type=date], 
.gform_wrapper input[type=datetime-local], 
.gform_wrapper input[type=datetime], 
.gform_wrapper input[type=email], 
.gform_wrapper input[type=month], 
.gform_wrapper input[type=number], 
.gform_wrapper input[type=tel], 
.gform_wrapper input[type=text], 
.gform_wrapper input[type=url], 
.gform_wrapper select, 
.gform_wrapper textarea {
	height: 40px;
	font-size: 15px;
	border-radius: 30px;
	border: none;
	padding: 12px 15px 10px !important;
	max-width: 400px;
	border: 1px solid #cdcdcd;
	box-shadow: none;
}


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







.gform_wrapper input[type=number]:read-only,
.gform_wrapper input[type=text]:read-only {
	padding-left: 0 !important;
}



.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):checked::before,
.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):checked::before {
	color: var(--orange);
	font-weight: 700;
}


.gform-theme--framework input[type=checkbox] {
	border-color: #cdcdcd;
	box-shadow: none;
	margin-top: -2px;
	margin: -2px 0 0 1px;
}


/************* RESPONSIVE *************/
.desktop 	{ display: block; }
.mobile, .mobilebut	{ display: none; }


/* Bootstrap Breakpoint - Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
	
}


/* Bootstrap Breakpoint - Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
	.desktop 	{ display: none; }
	.mobile 	{ display: block; }


}


/* Bootstrap Breakpoint - Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
	h1 {
		font: normal normal 700 30px / 36px 'Amsi', Arial, Helvetica, Verdana, sans-serif;
	}

	.headerwrapper,
	.smallcontainer.content {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.cookie-notice-container {
		padding: 20px 20px 5px;
		width: calc(100% - 40px);
	}

	#cookie-notice .cn-button {
		padding: 10px 30px 8px;
	}
	#cn-refuse-cookie.button.cn-button {
		padding: 10px 30px 8px;
		float: none;
	}

}


/* Bootstrap Breakpoint - Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {

	
	
}


/* Extra Breakpoint */
@media all and (max-width: 480px) {
	
}