/* ======================================================================================================================================================================================
   HTML 
   ====================================================================================================================================================================================== */
html/*,body*/
{
	height:					100%;
}

body
{
	min-height:				100%;
	height:					auto;
	position:				relative;
}

html, body, table, form, tr, th, td
{
	padding:				0;
	margin:					0;
	margin-left:			auto;
	margin-right:			auto;
	border-spacing:			0;
	border-collapse:		collapse;
	/*overflow:				auto;*/
	box-sizing:				border-box;
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
}

ol, ul, li
{
	/*padding:				0;*/
	margin:					0;
	margin-left:			auto;
	margin-right:			auto;
	border-spacing:			0;
	border-collapse:		collapse;
}

p
{
	margin-right:			auto;
	margin-bottom:			var(--padding);
	margin-left:			auto;
}

div, span
{
	box-sizing:				border-box;
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;	
	cursor:					auto;
	margin-left:			auto;
	margin-right:			auto;
}

blockquote
{
	font-family:			Georgia,serif;
    width:					70%;
    position:				relative;
    font-style:				italic;
    padding-left:			12px;
}

blockquote:before
{
    display:				block;
    padding-right:			12px;
    content:				"\201C";
    font-size:				80px;
    position:				absolute;
    left:					-45px;
    top:					-30px;
    opacity:				0.2;
}

label
{
	cursor:					default;
}

hr
{
	border:					none;
	border-top:				var(--border);
}

img
{
	max-width:				100%;
	height:					auto;
	margin-left:			auto;
	margin-right:			auto;
    border:					none;
	padding:				0;
	vertical-align:			middle;
	/*display:				block;*/
}
/* ======================================================================================================================================================================================
   Input 
   ====================================================================================================================================================================================== */
input
{
	width:					100%;
	padding:				var(--padding) calc(var(--padding) / 2) 0 calc(var(--padding) / 2);
	margin:					calc(var(--padding) / 4) 0;
	background-color:		#FAFAFA;
	border:					none;
	border-bottom:			2px solid #F0F0F0;
	box-sizing:				border-box;	
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
}

input:focus,textarea:focus,button:focus
{
	outline:				0;
	background-color:		#F0F0F0;
}

input[type="checkbox"],input[type="radio"]
{
	width:					15px;
	height:					auto;
	margin-left:			1px;
	/*float:				right;*/
}

input[type="file"]
{
    padding:				15px 10px 12px 10px;
    line-height:			1;
}

input[type="button"],input[type="submit"],input[type="reset"],button[type="submit"]
{
	width:					auto;
	padding:				calc(var(--padding) / 2) var(--padding) !important;
	margin:					calc(var(--padding) / 4) 0;
	cursor:					pointer;
	font-size:				inherit;
	line-height:			1.5;
	text-align:				center;
	border:					none;
	border-radius:			4px;
	appearance:				none;
	-webkit-appearance:		none;
    -moz-appearance:		none;
    color:					#FFFFFF;
	text-transform:			uppercase;
    background-color:		var(--colour);
    background-repeat:		no-repeat;
    background-position:	center;
	box-shadow:				0 0 5px 0 #C0C0C0;
	transition:				var(--transition);
}

input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button[type="submit"]:hover
{
	background-color:		#323232;
	box-shadow:				none;
}

input:disabled,button:disabled,select:disabled,textarea:disabled
{ 
	opacity:				0.5;
	cursor:					not-allowed;
}

select
{
	width:					100%;
	height:					50px;
	padding:				var(--padding) calc(var(--padding) / 2) 0 calc(var(--padding) / 2);
	margin:					calc(var(--padding) / 4) 0;
	background-color:		#FAFAFA;
	border:					none;
	border-bottom:			2px solid #F0F0F0;
	appearance:				none;
	-webkit-appearance:		none;
    -moz-appearance:		none;
}

textarea
{
	width:					100%;
	padding:				var(--padding) calc(var(--padding) / 2) 0 calc(var(--padding) / 2);
	margin:					calc(var(--padding) / 4) 0;
	background-color:		#FAFAFA;
	border:					none;
	border-bottom:			2px solid #F0F0F0;
	vertical-align:			top;
	box-sizing:				border-box;
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
}

/* Label Transition */
.labelcontainer 			  
{ 
	position:				relative;
	text-align:				left;
}

.labelcontainer label
{
	color:					#BABABA;
	position:				absolute;
	pointer-events:			none;
	top:					18px;
    left:					calc(var(--padding) / 2);
	transition:				var(--transition);
	border:					none !important;	/* so the error class doesn't add a border to the label */
}

.input:focus ~ label, .input:valid ~ label
{
	top:					calc(var(--padding) / 2) !important;
	font-size:				12px !important;
}

.input:focus ~ label
{
	color:					var(--colour);
}
	
.inputbig
{
	font-size:				18px;
}

.inputbig label
{
	top:					calc(var(--padding) / 2);
}

/*input:not(.input),select:not(.input),textarea:not(.input)
{
	padding:				calc(var(--padding) / 2);
}*/

/* Bar */
.input:focus ~ .bar:before, .input:focus ~ .bar:after
{
	width:					100%;
}

.bar
{
	position:				relative;
	display:				block;
	width:					100%;
}

.bar:before, .bar:after
{
	content:				"";
	height:					2px; 
	width:					0;
	bottom:					5px;
	left:					0;
	position:				absolute;
	background:				var(--colour);
	transition:				var(--transition);
}