@charset "UTF-8";

/*	BAREBONES RESPONSIVE GRID FRAMEWORK (Forms)
	Version 3.0
	November 2017
	www.dawgeatdawg.com
*/


/* @group --- FORMS ---*/

::-webkit-input-placeholder { color: hsla(50, 40%, 100%, 0.3); }
::-moz-placeholder { color: hsla(50, 40%, 100%, 0.3); }
:-moz-placeholder { color: hsla(50, 40%, 100%, 0.3); }
:-ms-input-placeholder { color: hsla(50, 40%, 100%, 0.3); }
::placeholder { color: hsla(50, 40%, 100%, 0.3); }

input[type=search] { -webkit-appearance: none; }



form {
	margin-bottom: 0.8rem;
/* 		background: hsla(200, 50%, 50%, 0.1); */
}

	form h2 { margin-bottom: 0.1em; }

	form fieldset {
/* 			background: hsla(100, 50%, 50%, 0.1); */
	}
	
	form legend {
		visibility: hidden;
		display: none;
	}
	
		form fieldset > ol {
		}
		
			form fieldset > ol > li {
				display: flex;
				flex-flow: column nowrap;
/* 				overflow: hidden; */
				position: relative;
				margin: 0 0 0.8em;
/* 				border: 2px solid hsla(50, 40%, 100%, 1.3); */
/* 				border-radius: 0.6rem; */
/* 					transform: translateY(0); /* Corner Radius Mask fix for Chrome */
/* 						background: hsla(270, 50%, 50%, 0.1); */
			}
	
	form label {
		flex: 0 0 auto;
		order: 1;
		display: block;
		margin: 0;
		padding: 0;
		color: hsl(50, 40%, 60%);
		font-size: 0.5rem;
		line-height: 2.0em;
		letter-spacing: 0.3em;
		text-align: center;
		text-transform: uppercase;
/* 				background: hsla(70, 50%, 50%, 0.1); */
	}
	
	form input,
	form textarea,
	form select {
		flex: 1 0 auto;
		order: 2;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0.8em;
		background: hsla(50, 40%, 100%, 0.1);
		border: 1px solid hsla(50, 40%, 60%, 0.1);
		border-radius: 0.6rem;
		color: hsl(50, 40%, 100%);
		font-size: 0.8rem;
	}
	
		form input:focus,
		form textarea:focus,
		form select:focus {
			background: hsla(50, 40%, 100%, 0.8);
			border-color: hsl(50, 40%, 60%);
			box-shadow: 0 0 1.0em hsla(50, 40%, 60%, 1.0);
			color: hsl(50, 40%, 0%);
		}
	
	
			form input:focus + label,
			form textarea:focus + label {
				color: hsl(50, 40%, 100%);
/* 				font-size: 0.5rem; */
			}


/*
			form input:valid,
			form textarea:valid {
				background: hsla(50, 40%, 100%, 1.0);
				color: hsl(50, 40%, 60%);
			}
*/
			
			
/*
			form input[value=""] {
				background-color: yellow !important;
			}
*/

	form select {
/* 		width: 80%; */
/* 		height: 2.0em; */
	}
	
	form textarea { resize: none; }


		form input#submit {
			margin: 0.6em 0 0;
			padding: 0.6em;
			background: hsla(50, 40%, 60%, 0.7);
			color: hsl(50, 40%, 20%);
			font-size: 1.1rem;
			font-weight: bold;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			cursor: pointer;
		}
	
			form input#submit:hover { color: hsl(50, 40%, 100%); }
			
			
	.form_error:focus,
	.form_error {
		border: 2px solid hsl(0, 50%, 50%) !important;
		box-shadow: 0 0 1.0em hsl(0, 50%, 50%) !important;
	}
			
/* @end */