form {
	display: flex; width: 100% !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	padding: 50px 0;
	margin-bottom: -50px;
	
	border-top: solid 10px rgba(0,0,0,.1);
	background-color: rgba(0,0,0,.1);
}
form > div { width: 500px; }

/*-----------------------------------------------------------------------------------*/

form > div.fields { margin-bottom: 10px; }
form > div.fields > *:not(:last-child) { margin-bottom: 10px; }

form > div.fields	div.field { background-color: #E5E5E5; }
form > div.fields > div.field { width: 100%; }
form > div.fields > div.fieldgroup {
	display: flex; width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
form > div.fields > div.fieldgroup > div.field:nth-last-child(2),
form > div.fields > div.fieldgroup > div.field:nth-last-child(2) ~ div.field { flex: 0 0 calc((100% - (10px * 1)) / 2); }
form > div.fields > div.fieldgroup > div.field:nth-last-child(3),
form > div.fields > div.fieldgroup > div.field:nth-last-child(3) ~ div.field { flex: 0 0 calc((100% - (10px * 2)) / 3); }
form > div.fields > div.fieldgroup > div.field:nth-last-child(4),
form > div.fields > div.fieldgroup > div.field:nth-last-child(4) ~ div.field { flex: 0 0 calc((100% - (10px * 3)) / 4); }

/*-----------------------------------------------------------------------------------*/

form div.field		 > ul.input-wrapper {
	position: relative;
	
	border-radius: 3px;
	border: solid 1px rgba(0,0,0,.2);
	box-shadow:
			  1px 1px rgba(255,255,255,.5),
		inset 1px 1px rgba(255,255,255,.5);
}

form div.field		 > ul.input-wrapper > li.input { width: 100%; }

form div.field		 > ul.input-wrapper > li.input > input,
form div.field		 > ul.input-wrapper > li.input > textarea {
	display: block; width: 100%;
	border: none;
	background-color: transparent;
	
	margin: 0;
	padding-left: 12px;
	padding-right: 12px;
	transition: padding-right .2s ease-out;
	
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
form div.field		 > ul.input-wrapper > li.input > input { min-height: 40px; }
form div.field		 > ul.input-wrapper > li.input > textarea {
	min-height: 225px;
	resize: none;
	padding-top: 9px;
	padding-bottom: 9px;
}
form div.field.error > ul.input-wrapper > li.input > input,
form div.field.error > ul.input-wrapper > li.input > textarea { padding-right: 47px; }

form div.field		 > ul.input-wrapper > li.input.radio	> label,
form div.field		 > ul.input-wrapper > li.input.checkbox	> label { flex-basis: 40%; }

form div.field		 > ul.input-wrapper > li.input.file		>		label:hover,
form div.field		 > ul.input-wrapper > li.input.radio	>		label:hover,
form div.field		 > ul.input-wrapper > li.input.checkbox	>		label:hover,
form div.field		 > ul.input-wrapper > li.input.select	> div > label:hover,
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label:hover,
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label.active { background-color: #C0C0C0; }

form div.field		 > ul.input-wrapper > li.input.file		>		label > span { padding-left: 37px; }
form div.field		 > ul.input-wrapper > li.input.radio	>		label > span,
form div.field		 > ul.input-wrapper > li.input.checkbox	>		label > span { padding-left: 30px; }

form div.field		 > ul.input-wrapper > li.input.file		> 		label > span:before,
form div.field		 > ul.input-wrapper > li.input.radio	> 		label > span:before,
form div.field		 > ul.input-wrapper > li.input.checkbox	> 		label > span:before { height: 20px; }

form div.field		 > ul.input-wrapper > li.input.radio	>		label > span:before,
form div.field		 > ul.input-wrapper > li.input.checkbox	>		label > span:before { width: 20px; }

form div.field		 > ul.input-wrapper > li.input.radio	>		label > span:before,
form div.field		 > ul.input-wrapper > li.input.checkbox	>		label > span:before { border: solid 2px #FBFBFB; }

form div.field		 > ul.input-wrapper > li.input.radio	>		label > span:after,
form div.field		 > ul.input-wrapper > li.input.checkbox	>		label > span:after {
	left: 5px;
	height: 10px; width: 10px;
	background-color: #FBFBFB;
}

form div.field		 > ul.input-wrapper > li.input.file		>		label > span:before,
form div.field		 > ul.input-wrapper > li.input.select	> div > label > span:before {
	background-size: contain;
	background-repeat: no-repeat;
}
form div.field		 > ul.input-wrapper > li.input.file		>		label > span:before {
	width: 30px;
	background-image: url(images/icons/upload.svg);
}
form div.field		 > ul.input-wrapper > li.input.select	> div > label > span:before {
	right: 5px;
	height: 14px; width: 24px;
	background-image: url(images/icons/menu.svg);
}

form div.field		 > ul.input-wrapper > li.input.checkbox	>		label > span:before { border-radius: 3px; }

form div.field		 > ul.input-wrapper > li.input.radio	>		label > span:before,
form div.field		 > ul.input-wrapper > li.input.radio	>		label > span:after { border-radius: 50%; }

form div.field		 > ul.input-wrapper > li.input.select	> div > div {
	position: relative; z-index: 10;
	
	border-radius: 3px;
	border: solid 1px rgba(0,0,0,.3);
	background-color: #B0B0B0;
	
	opacity: 0; transition: opacity .2s ease-in;
	pointer-events: none;
}
form div.field		 > ul.input-wrapper > li.input.select	> div > div.active { opacity: 1; pointer-events: auto; }
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label {
	display: flex; height: 40px;
	flex-direction: row;
	align-items: center;
	
	padding: 0 12px;
	
	background-color: #B0B0B0;
	box-shadow:
		inset 0  1px rgba(255,255,255,.3),
		inset 0 -1px rgba(0,0,0,.1);
	transition:
		background-color .2s ease-in,
		box-shadow		 .2s ease-in;
	
	cursor: pointer;
}
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label.active,
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label:hover {
	box-shadow:
		inset 0  2px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.1);
}
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label > span {
	padding-left: 5px;
	
	filter: drop-shadow(-1px -1px rgba(0,0,0,.2));
	transition: filter .2s ease-in;
	
	color: #FBFBFB;
}
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label:hover > span,
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label.active > span { filter: drop-shadow(1px 1px rgba(0,0,0,.2)); }
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label:first-child {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
form div.field		 > ul.input-wrapper > li.input.select	> div > div > label:last-child {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

/*-----------------------------------------------------------------------------------*/

form .submit.button			{
	position: relative;
	height: 45px;
	padding: 0 15px;

	background-color: #B9236B;
}
form .submit.button:hover	{ background-color: #CE2777; }
form .submit.button.sending,
form .submit.button.sent 	{ pointer-events: none; }

form .submit.button			> span {
	padding-right: 0;
	
	text-align: right;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	
	opacity: 1;
	
	transition:
		padding-right .2s ease-out,
		filter		  .2s ease-in,
		opacity		  .2s ease-in
		!important;
}
form .submit.button.sending	> span,
form .submit.button.sent	> span { padding-right: 34px; }
form .submit.button.sent	> span { opacity: 0; }

form .submit.button			> span:before {
	left: 395px; transition: left .2s ease-out;
	height: 12px; width: 26px;
	
	background-image: url(images/icons/send.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
form .submit.button.sending	> span:before,
form .submit.button.sent	> span:before { left: 359px; }

form .submit.button			> span:after {
	right: 0;
	height: 20px; width: 20px;
	
	border-radius: 50%;
	border: solid 0 #FFF;
	background-clip: content-box;
	
	opacity: 0;
	transition: opacity	.2s linear .3s;
}
form .submit.button.sending	> span:after {
	background-color: #FBFBFB;
	opacity: 1;
	
	animation:
		spinner-1 .8s linear infinite,
		spinner-2 .8s linear infinite,
		spinner-3 .4s linear infinite;
}

@keyframes spinner-1 {
    from { background-color: transparent; }
	to	 { background-color: #FBFBFB; }
}
@keyframes spinner-2 {
    from { border-color: #FBFBFB; }
	to	 { border-color: transparent; }
}
@keyframes spinner-3 {
    from { border-width: 0; }
	to	 { border-width: 10px; }
}

form .submit.button			> div.response {
	position: absolute; top: 50%; left: 15px; right: 15px; transform: translateY(-50%);
	display: block; height: 20px;
	
	filter: drop-shadow(-1px -1px rgba(0,0,0,.2));
	
	text-align: center;
	line-height: 20px;
	font-size: 16px;
	font-weight: 400;
	
	transition: opacity .2s ease-out;
	pointer-events: none;
}
form .submit.button.send	> div.response,
form .submit.button.sending	> div.response { opacity: 0; }
form .submit.button.sent	> div.response { opacity: 1; }
form .submit.button			> div.response > span		 { display: none; }
form .submit.button			> div.response > span.active { display: block; }

/*-----------------------------------------------------------------------------------*/

form .input.button-wrapper {
	position: relative;
	
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	
	padding: 5px;
}

form .input.button-wrapper > select,
form .input.button-wrapper > input {
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

form .input.button-wrapper + .errors { top: 10px !important; right: 10px !important; }

form .submit.button,
form .input.button-wrapper > .dropdown > .button,
form .input.button-wrapper >			 .button {
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-direction: row;
	align-items: center;
	
	border-radius: 3px;
	border: solid 1px rgba(0,0,0,.3);
	box-shadow:
			  0 -1px rgba(0,0,0,.1),
		inset 0 -2px rgba(0,0,0,.1),
			  0  1px rgba(255,255,255,.8);
	
	transition:
		background-color .2s ease-in,
		box-shadow		 .2s ease-in,
		margin-right	 .2s ease-out;
	
	color:#FBFBFB;
	
	cursor: pointer;
}
form .input.button-wrapper > .dropdown > .button,
form .input.button-wrapper >			 .button {
	height: 40px;
	
	padding: 0 12px;
	margin-bottom: 5px;
	
	background-color: #B0B0B0;
}

form .submit.button:hover,
form .input.button-wrapper > .dropdown > .button:hover,
form .input.button-wrapper >			 .button:hover {
	box-shadow:
			  0 -1px rgba(0,0,0,.1),
		inset 0  2px rgba(255,255,255,.1),
			  0  1px rgba(255,255,255,.8);
}

form .input.button-wrapper >			 .button:nth-child(4n) { margin-left: 5px; }
form .input.button-wrapper >			 .button:nth-child(4n+2):nth-last-child(-n+4),
form .input.button-wrapper >			 .button:nth-child(4n+2):nth-last-child(-n+4) ~ .button { margin-bottom: 0; }

form .field.error						 .button:only-of-type,
form .field.error						 .button:nth-child(4) { margin-right: 45px; }

form .submit.button								 > span,
form .input.button-wrapper > .dropdown > .button > span,
form .input.button-wrapper >			 .button > span {
	display: block; height: 20px; width: 100%;
	
	line-height: 20px;
	
	filter: drop-shadow(-1px -1px rgba(0,0,0,.2));
	transition: filter .2s ease-in;
}
form .input.button-wrapper > .dropdown > .button > span,
form .input.button-wrapper >			 .button > span { font-size: 14px; }

form .submit.button:hover							   > span,
form .input.button-wrapper > .dropdown > .button:hover > span,
form .input.button-wrapper >			 .button:hover > span { filter: drop-shadow(1px 1px rgba(0,0,0,.2)); }

form .submit.button								 > span:before,
form .submit.button								 > span:after,
form .input.button-wrapper > .dropdown > .button > span:before,
form .input.button-wrapper >			 .button > span:before,
form .input.button-wrapper >			 .button > span:after {
	content: "";
	position: absolute; top: 50%; transform: translateY(-50%);
	display: block; box-sizing: border-box;
}
form .input.button-wrapper >			 .button > span:before { left: 0; }
form .input.button-wrapper >			 .button > span:after { opacity: 0; transition: opacity .2s ease-in; }

form .input.button-wrapper > input:checked + .button > span:after { opacity: 1; }

form .input.button-wrapper > .dropdown {
	position: relative;
	flex: 1;
	height: 40px;
}

/*-----------------------------------------------------------------------------------*/

form div.field		 > ul.input-wrapper > li.errors {
	position: absolute; top: 5px; right: 5px; z-index: 1;
	width: 30px; height: 30px; overflow: visible;
	
	opacity: 0; transition: opacity .2s ease-out;
	pointer-events: none;
}
form div.field		 > ul.input-wrapper > li.errors:hover > div { opacity: 1; transition: opacity .2s ease-out .4s; }

form div.field		 > ul.input-wrapper > li.errors:before {
	content: "✕";
	position: absolute; top: 0; right: 0; z-index: 3;
	display: block; box-sizing: border-box; height: 30px; width: 30px;
	
	border-radius: 50%;
	border: solid 1px rgba(0,0,0,.3);
	box-shadow:
			  1px 1px rgba(255,255,255,.5),
		inset 1px 1px rgba(255,255,255,.5);
	
	transition:
		border-color .2s ease-out .2s,
		box-shadow	 .2s ease-out .2s,
		transform	 .2s ease-out .2s,
		color		 .2s ease-out,
		text-shadow	 .2s ease-out;
	
	text-shadow: 1px 1px rgba(255,255,255,.5);
	
	line-height: 28px;
	text-align: center;
	font-weight: 300;
	color: rgba(0,0,0,.4);
}
form div.field		 > ul.input-wrapper > li.errors:hover:before {
	border-color: transparent;
	box-shadow: none;
	
	transform: rotate(45deg);
	transform-origin: center;
	
	text-shadow: 1px 1px rgba(0,0,0,.2);
	color: #FBFBFB;
	
	transition:
		border-color .2s ease-out,
		box-shadow	 .2s ease-out,
		transform	 .2s ease-out .2s,
		color		 .2s ease-out .4s,
		text-shadow	 .2s ease-out .4s;
}

form div.field		 > ul.input-wrapper > li.errors > div {
	position: absolute; top: 0; bottom: 0; right: 0; z-index: 2;
	display: none;
	padding: 0 40px 0 15px;
	
	border-radius: 15px;
	background-color: #B9236B;
	box-shadow:
		inset 1px 1px rgba(0,0,0,.2),
			  1px 1px rgba(255,255,255,.5);
	
	text-shadow: 1px 1px rgba(0,0,0,.2);
	
	line-height: 30px;
	white-space: nowrap;
	font-size: 13px;
	color: #FBFBFB;
	
	opacity: 0; transition: opacity .2s ease-out;
	pointer-events: none;
}
form div.field		 > ul.input-wrapper > li.errors > div.active { display: block; }

form div.field.error > ul.input-wrapper > li.errors	{ opacity: 1; pointer-events: auto; }

/*-----------------------------------------------------------------------------------*/

form div.field		 > p.description {
	margin: 7px 0 0;
	padding: 0 13.5px 3px;
	
	line-height: normal;
	font-size: 11px;
	color: rgba(0,0,0,.45);
	
	text-shadow: 1px 1px rgba(255,255,255,.5);
}