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

body
{
	/*min-height:			100%;*/
	height:					auto;
	overflow-x:				hidden;		/* so scroll bars don't appear when slidebars are open */
	position:				relative;	/* so overlay mask is aligned relative to body */
}

html, body, table, form, tr, th, td
{
	text-align:				left;
	padding:				0;
	margin:					0;
	margin-left:			auto;
	margin-right:			auto;
	border-spacing:			0;
	border-collapse:		collapse;
	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-top:				0;
	margin-left:			auto;
	margin-right:			auto;
	margin-bottom:			var(--spacing);
}

div, span, nav
{
	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;
	margin-top:				0;
    padding-left:			12px;
}

blockquote:before
{
    display:				block;
    padding-right:			calc(var(--spacing) / 2);
    content:				"\201C";
    font-size:				calc(var(--fontsize) * 5);
    position:				absolute;
    left:					calc(var(--spacing) * -2);
    top:					calc(var(--spacing) * -2);
    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:				calc(var(--spacing) / 2);
	margin:					calc(var(--spacing) / 4) 0;
	box-sizing:				border-box;	
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
	line-height:			2 !important;
}

select
{
	width:					100%;
	height:					50px;
	padding:				var(--spacing) calc(var(--spacing) / 2) 0 calc(var(--spacing) / 2);
	margin:					calc(var(--spacing) / 4) 0;
	appearance:				none;
	-webkit-appearance:		none;
    -moz-appearance:		none;
	line-height:			2 !important;
}

textarea
{
	width:					100%;
	padding:				var(--spacing) calc(var(--spacing) / 2) 0 calc(var(--spacing) / 2);
	margin:					calc(var(--spacing) / 4) 0;
	vertical-align:			top;
	box-sizing:				border-box;
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
	line-height:			2 !important;
}

input:focus,
textarea:focus,
button:focus
{
	outline:				0;
	transition:				var(--transition);
}

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

input[type="checkbox"],
input[type="radio"]
{
	width:					auto;
	height:					auto;
	margin-right:			calc(var(--spacing) / 2);
}

/* checkbox label */
input[type="checkbox"] + span,
input[type="radio"] + span
{
	cursor:					pointer;
}

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

input[type="button"],
input[type="submit"],
input[type="reset"],
button[type="submit"],
button[type="button"]
{
	width:					auto;
	padding:				calc(var(--spacing) / 2) var(--spacing) !important;
	margin:					calc(var(--spacing) / 4) 0;
	cursor:					pointer;
	/*font-size:				inherit;*/
	line-height:			1.5;
	text-align:				center;
	appearance:				none;
	-webkit-appearance:		none;
    -moz-appearance:		none;
	transition:				var(--transition);
}

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

.uploadifive-button[type="file"]
{
	line-height:			1 !important;
}

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

.labelcontainer.half			  
{ 
	width:					100%;
	margin:					0;
}

.labelcontainer label .title
{
	position:				absolute;
	pointer-events:			none;
    left:					calc(var(--spacing) / 2);
	transition:				var(--transition);
	border:					none !important;	/* so the error class doesn't add a border to the label */
	line-height:			2 !important;
}

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

.input
{
	padding:				var(--spacing) calc(var(--spacing) / 2) 0 calc(var(--spacing) / 2);
}

.input:focus ~ .title
{
	color:					var(--primary);
}
	
.inputbig
{
	font-size:				140%;
}

.inputbig .title
{
	top:					calc(var(--spacing) / 2) !important;
}

/* input:not(.input),select:not(.input),textarea:not(.input) */
/* 
:input .default
{
	padding:				calc(var(--spacing) / 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(--primary);
	transition:				var(--transition);
}

/* UploadiFive */
.uploadifive-button
{
	width:					auto !important;
	background-color:		var(--fontcolour) !important;
	background-image:		none !important;
	border-radius:			4px;
	padding:				calc(var(--spacing) / 6) var(--spacing) !important;
	margin:					calc(var(--spacing) / 4) 0;
	border:					var(--bordercolour);
	line-height:			1 !important;
	height:					unset !important;
	font:					inherit !important;
	box-shadow:				var(--boxshadow);
	display:				initial;
	font-size:				80% !important;
	text-shadow:			none !important;
	border:					none !important;
	float:					right;
}

.uploadifive-queue-item .close
{
	width:					10px !important;
}

/*	======================================================================================================================================================================================
	Line Clamping
	====================================================================================================================================================================================== */
.lineclampone
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		1; 
	-webkit-box-orient:		vertical;
	height:					calc(var(--fontsize) * var(--lineheight) * 1);
}

.lineclamptwo
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		2; 
	-webkit-box-orient:		vertical;
	height:					calc(var(--fontsize) * var(--lineheight) * 2);
}

.lineclampthree
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		3; 
	-webkit-box-orient:		vertical;
	height:					calc(var(--fontsize) * var(--lineheight) * 3);
}

.lineclampfour
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		4; 
	-webkit-box-orient:		vertical;
	height:					calc(var(--fontsize) * var(--lineheight) * 4);
}

.lineclampfive
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		5; 
	-webkit-box-orient:		vertical;
	height:					calc(var(--fontsize) * var(--lineheight) * 5);
}


/*	======================================================================================================================================================================================
	Tablet 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 768px) 
and (max-width : 1279px) 
{
	/*	======================================================================================================================================================================================
		Input 
		====================================================================================================================================================================================== */
	.labelcontainer.half			  
	{
		width:					50%;
		margin:					0;
	}
}
/*	======================================================================================================================================================================================
	Desktop 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 1280px) 
{
	/*	======================================================================================================================================================================================
		Input 
		====================================================================================================================================================================================== */
	.labelcontainer.half			  
	{
		width:					50%;
		margin:					0;
	}
}