/*
	CUSTOM LIGHTBOX
*/

body.nooverflow {
	overflow:								hidden;
	overflow-x:								hidden;
	overflow-y:								hidden;
}

.vnmcontactform-trigger,
.trigger {
	position:								absolute;
	clip:										rect(0, 0, 0, 0);
	width:									1px;
	min-width:								0;
	height:									1px;
	min-height:								0;
	margin:									0;
	padding:									0;
	outline:									none;
	font-size:								0;
	line-height:							0;
	border:									1px solid transparent;
	background-color:						transparent;
}

.formlightboxoverlay {
	position:								fixed;
	top:										0;
	left:										0;
	bottom:									0;
	width:									0;
	padding:									5rem 0 0 0;
	background-color:						rgba(1, 1, 15, 0.6);
	opacity:									0;
	z-index:									9001;
	pointer-events:						none;
	overflow-y:								scroll;

	display:									-ms-flexbox;
	display:									-webkit-flex;
	display:									flex;

	/*	These are effectively the 'close' transitions */

	-webkit-transition:					opacity 0.5s ease, width 0s linear 0.5s;
	transition:								opacity 0.5s ease, width 0s linear 0.5s;
}

.formlightboxoverlay .lightboxclose,
.formlightboxoverlay .lightbox-backdrop {
	position:								absolute;
	top:										0;
	left:										0;
	bottom:									0;
	right:									0;
	font-size:								0;
	text-indent:							-999rem;
	overflow:								hidden;
	z-index:									-1;
}

.formlightboxoverlay .lightbox {
	position:								relative;
	top:										8rem;
	width:									78rem;
	margin:									auto;
	padding:									4rem;
	background-color:						#FFFFFF;
	border-radius:							2rem;
	opacity:									0;
	visibility:								hidden;

	-webkit-align-self:					flex-start;
	-ms-flex-item-align:					start;
	align-self:								flex-start;

	/*	'close' transitions */

	-webkit-transition:					opacity 0.5s ease, top 0.5s ease, visibility 0s linear 0.5s;
	transition:								opacity 0.5s ease, top 0.5s ease, visibility 0s linear 0.5s;
}

.formlightboxoverlay .lightbox:empty:before {
	content:									'';
	display:									block;
	height:									3.750rem;
	width:									3.750rem;
	margin:									2rem auto;
	border-width:							0.375rem;
	border-style:							solid;
	border-color:							rgba(24, 38, 88, 0.3);
	border-radius:							100%;
	border-top-color: 					rgba(24, 38, 88, 1);
	-webkit-animation:					rotation 0.6s infinite linear;
	animation:								rotation 0.6s infinite linear;
}

.formlightboxtrigger:checked + .formlightboxoverlay,
.formlightboxoverlay.forceshow {
	width:									100%;
	padding:									0;
	opacity:									1;
	pointer-events:						auto;

	-webkit-transition:					opacity 0.5s ease;
	transition:								opacity 0.5s ease;
}

.formlightboxtrigger:checked + .formlightboxoverlay .lightbox,
.formlightboxoverlay.forceshow .lightbox {
	top:										0;
	opacity:									1;
	visibility:								visible;

	-webkit-transition:					all 0.5s ease 0.5s;
	transition:								all 0.5s ease 0.5s;
}

.formlightboxoverlay .lightbox .close-cross {
	position:								absolute;
	top:										16px;
	right:									20px;
	width:									24px;
	height:									24px;
	background-image:						url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cpath%20d%3D%22M24%2020.188l-8.315-8.209%208.2-8.282-3.697-3.697-8.212%208.318-8.31-8.203-3.666%203.666%208.321%208.24-8.206%208.313%203.666%203.666%208.237-8.318%208.285%208.203z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
	background-repeat:					no-repeat;
	background-size:						contain;
	font-size:								0;
}

.formlightboxoverlay .lightbox .close-cross span {
	visibility: 							hidden;
}

.formlightboxoverlay.nodismiss .lightboxclose, 
.formlightboxoverlay.nodismiss .lightbox .close {
	pointer-events: 						none;
}

.formlightboxoverlay .lightbox .dismiss-button {
	background-color:						#7F8C8D;
}

.formlightboxoverlay .form-title {
	text-align:  center;
}

.formlightboxoverlay .button-wrapper {
	min-width:								100%;
	display:									-webkit-box;
	display:									-ms-flexbox;
	display:									flex;
	-webkit-box-orient:					horizontal;
	-webkit-box-direction:				normal;
	-ms-flex-direction:					row;
	flex-direction:						row;
	-ms-flex-wrap:							wrap;
	flex-wrap:								wrap;
	-webkit-box-pack:						center;
	-ms-flex-pack:							center;
	justify-content:						center;
	-ms-flex-line-pack:					start;
	align-content:							flex-start;
	-webkit-box-align:					start;
	-ms-flex-align:						start;
	align-items:							flex-start;
}

.formlightboxoverlay .button-wrapper a,
.formlightboxoverlay .button-wrapper label {
	margin-left:							2rem;
	margin-right:							2rem;
}

.formlightboxoverlay .button-wrapper label {
	cursor:									pointer;
}

.formlightboxoverlay .button-wrapper label:hover {
	background-color:						#34495E;
}

/*
	When a trigger element has been focused
*/

.trigger:focus,
label.trigger-focus {
	box-shadow:								0 0 0 0.250rem rgba(0, 210, 147, 0.35);
}

label.trigger-focus.trigger-no-focus {
	box-shadow:								none;
}

/*
	Now, the actual form elements
*/

.vnm-contact-form-wrapper {
	margin:									auto;
}

.vnm-contact-form-wrapper p {
	margin:									revert;
}

.vnmcontactform {

}

.vnmcontactform .formfield {
	position:								relative;
	padding-bottom:						30px;
}

.vnmcontactform .formfield.hide {
	display:									none;
}

.vnmcontactform .formfield.error input, 
.vnmcontactform .formfield.error textarea,
.vnmcontactform .formfield.error select {
	border-color:							#F54F4F;
}

.vnmcontactform .validation-error:not(:empty) {
	margin:									20px 0;
	padding:									20px;
	background-color:						#F54F4F;
	color:									#FFFFFF;
	font-weight:							500;
}

.vnmcontactform .formfield .errormessage {
	position:								absolute;
	top:										0;
	right:									0;
	margin:									0;
	padding:									6px 12px;
	background-color:						#F54F4F;
	color:									#FFFFFF;
	font-size:								12px;
	white-space:							nowrap;
}

.inline-error {
	margin:									10px 0;
	padding:									10px;
	background-color:						#F54F4F;
	color:									#FFFFFF;
	font-weight:							500;
}

/*
	RADIO BUTTON LIST
*/

.vnmcontactform .radio-options {
	margin:									0;
	padding:									0;
}

/*
	CHECKBOXES
*/

.vnmcontactform .formfield.error label.checkbox::before {
	border-color:							#F54F4F;
}

.vnmcontactform .formfield.error label.checkbox ~ .errormessage {
	top:										auto;
	left:										0;
	right:									auto;
	bottom:									100%;
}

.vnmcontactform .formfield input[type="checkbox"] ~ label,
.vnmcontactform .formfield input[type="radio"] + label {
	cursor:									pointer;
	display:									block;
	position:								relative;
	padding-left:							30px;
}

.vnmcontactform .formfield input[type="checkbox"] ~ label:before,
.vnmcontactform .formfield input[type="radio"] + label:before {
	background-color:						#FFFFFF;
	border:									2px solid #979797;
	pointer-events:						none;
	-webkit-user-select:					none;
	-moz-user-select:						none;
	-ms-user-select:						none;
	user-select:							none;
	-webkit-transition:					0.2s ease-in-out;
	transition:								0.2s ease-in-out
}

.vnmcontactform .formfield input[type="radio"] + label:before {
	border-radius:							50%;
}

.vnmcontactform .formfield input[type="checkbox"] ~ label:after,
.vnmcontactform .formfield input[type="checkbox"] ~ label:before,
.vnmcontactform .formfield input[type="radio"] + label:after,
.vnmcontactform .formfield input[type="radio"] + label:before {
	content:									'';
	display:									block;
	height:									20px;
	position:								absolute;
	top:										4px;
	left:										0;
	width:									20px
}

.vnmcontactform .formfield label:after,
.vnmcontactform .formfield label:before {
	top:										0;
}

.vnmcontactform .formfield input[type="checkbox"] ~ label:after,
.vnmcontactform .formfield input[type="radio"] + label:after {
	background-repeat:					no-repeat;
	background-position:					50%;
	background-size:						50% 50%
}

.vnmcontactform .formfield input[type="checkbox"],
.vnmcontactform .formfield input[type="radio"] {
	opacity:									0;
	position:								absolute;
	z-index:									-1
}

.vnmcontactform .formfield input[type="checkbox"]:checked ~ label:before,
.vnmcontactform .formfield input[type="radio"]:checked + label:before {
	background-color:						#2379BC;
	border-color:							#2379BC;
}

.vnmcontactform .formfield input[type="checkbox"]:checked ~ label:after {
	background-image:						url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath fill='%23fff' d='M12.5 0L4.6 8.6 1.5 5.3 0 7l4.6 5L14 1.7z'/%3E%3C/svg%3E");
	background-position:					50%;
	background-repeat:					no-repeat;
	background-size:						12px 14px;
}