/*
 * Name:			Utility
 * Description:		Collection of useful utility classes to style your content
 *
 * Component:		`uk-container-*`
 *					`uk-clearfix`
 *					`uk-nbfc-*`
 *					`uk-float-*`
 *					`uk-align-*`
 *					`uk-vertical-align`
 *					`uk-height-1-1`
 *					`uk-responsive-*`
 *					`uk-margin-*`
 *					`uk-heading-*`
 *					`uk-link-muted`
 *					`uk-scrollable-*`
 *					`uk-display-*`
 *					`uk-visible-*`
 *					`uk-hidden-*`
 *
 ========================================================================== */


/* Container
 ========================================================================== */

.uk-container {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: @utility-container-max-width;
	padding: 0 @utility-container-padding-horizontal;
	.hook-container;

}

/* Only large screens */
@media (min-width: @breakpoint-xlarge) {

	.uk-container {
		max-width: @utility-container-large-max-width;
		padding: 0 @utility-container-large-padding-horizontal;
	}

}

/*
 * Micro clearfix
 */

.uk-container:before,
.uk-container:after {
	content: " ";
	display: table;
}

.uk-container:after { clear: both; }

/*
 * Center container
 */

.uk-container-center {
	margin-left: auto;
	margin-right: auto;
}


/* Clearing
 ========================================================================== */

/*
 * Micro clearfix
 */

.uk-clearfix:before,
.uk-clearfix:after {
	content: " ";
	display: table;
}

.uk-clearfix:after { clear: both; }

/*
 *  Create a new block formatting context
 */

.uk-nbfc { overflow: hidden; }

.uk-nbfc-alt {
	display: table-cell;
	width: 10000px;
}


/* Alignment of block elements
 ========================================================================== */

/*
 * Float blocks
 */

.uk-float-left { float: left; }
.uk-float-right { float: right; }


/* Alignment of images and objects
 ========================================================================== */

/*
 * Alignment
 */

[class*='uk-align-'] {
	display: block;
	margin-bottom: @utility-align-vertical;
}

.uk-align-left {
	margin-right: @utility-align-horizontal;
	float: left;
}

.uk-align-right {
	margin-left: @utility-align-horizontal;
	float: right;
}

/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

	.uk-align-medium-left {
		margin-right: @utility-align-horizontal;
		margin-bottom: @utility-align-vertical;
		float: left;
	}

	.uk-align-medium-right {
		margin-left: @utility-align-horizontal;
		margin-bottom: @utility-align-vertical;
		float: right;
	}

}

.uk-align-center {
	margin-left: auto;
	margin-right: auto;
}


/* Vertical alignment
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 */

.uk-vertical-align { letter-spacing: -0.31em; }

/*  
 *  The `uk-vertical-align` container needs a specific height
 */

.uk-vertical-align:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

/*
 * Sub-object which can have any height
 * 1. Reset whitespace hack
 */

.uk-vertical-align-middle,
.uk-vertical-align-bottom {
	display: inline-block;
	letter-spacing: normal; /* 1 */
	max-width: 100%;
}

.uk-vertical-align-middle { vertical-align: middle; }
.uk-vertical-align-bottom { vertical-align: bottom; }

/*  
 *  This helper class is very useful to extend the `html` and `body` element to the full height of the page.
 */

.uk-height-1-1 { height: 100%; }


/* Responsive objects
 * Note: Images are already responsive by default, see Base component
 ========================================================================== */

/*
 * 1. Corrects max-width/max-height behavior if padding and border are used
 */

.uk-responsive-width,
.uk-responsive-height {
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

/*
 * Responsiveness: Sets a maxium width relative to the parent and auto scales the height
 */

.uk-responsive-width {
	max-width: 100%;
	height: auto;
}

/*
 * Responsiveness: Sets a maxium height relative to the parent and auto scales the width
 * Only works if the parent element has a fixed height.
 */

.uk-responsive-height {
	max-height: 100%;
	width: auto;
}


/* Margin
 ========================================================================== */

/* 
 * Create a block with the same margin of a paragraph
 */

.uk-margin { margin-bottom: @utility-margin-vertical; }

/*
 * Add margin if adjacent element
 */

* + .uk-margin { margin-top: @utility-margin-vertical; }

/*
 * Margin top and bottom
 */

.uk-margin-top { margin-top: @utility-margin-vertical !important; }
.uk-margin-bottom { margin-bottom: @utility-margin-vertical !important; }

/*
 * Remove margins
 */

.uk-margin-remove { margin: 0 !important; }
.uk-margin-top-remove { margin-top: 0 !important; }
.uk-margin-bottom-remove { margin-bottom: 0 !important; }


/* Headings
 ========================================================================== */

/* Only tablets and desktops */
@media (min-width: @breakpoint-medium) {

	.uk-heading-large {
		font-size: @utility-heading-large-font-size;
		line-height: @utility-heading-large-line-height;
	}
	
}


/* Link
 ========================================================================== */

.uk-link-muted,
.uk-link-muted * { color: @utility-link-muted-color; }

.uk-link-muted:hover,
.uk-link-muted *:hover { color: @utility-link-muted-hover-color; }


/* Scrollable
 ========================================================================== */

/*
 * Enable scrolling for preformatted text
 */

.uk-scrollable-text {
	max-height: @utility-scrollable-text-height;
	overflow-y: scroll;
}

/*
 * Box with scrolling enabled
 */

.uk-scrollable-box {
	max-height: @utility-scrollable-box-height;
	padding: @utility-scrollable-box-padding;
	border: 1px solid @utility-scrollable-box-border;
	overflow: auto;
	.hook-scrollable-box;
}

/*
 * Remove margin from the last-child
 */

 .uk-scrollable-box > :last-child { margin-bottom: 0; }


/* Display
 ========================================================================== */

/*
 * Display
 */

.uk-display-block { display: block !important; }
.uk-display-inline { display: inline !important; }
.uk-display-inline-block { display: inline-block !important; }

/*
 * Visibility
 * Avoids setting display to `block`
 */


/* Only desktops */
@media (min-width: @breakpoint-large) {

	.uk-visible-small { display: none !important; }
	.uk-visible-medium { display: none !important; }
	.uk-hidden-large { display: none !important; }

}

/* Only tablets portrait */
@media (min-width: @breakpoint-medium) and (max-width: @breakpoint-medium-max) {

	.uk-visible-small { display: none !important; }
	.uk-visible-large { display: none !important ; }
	.uk-hidden-medium { display: none !important; }

}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

	.uk-visible-medium { display: none !important; }
	.uk-visible-large { display: none !important; }
	.uk-hidden-small { display: none !important; }

}

/* Remove from the flow and screen readers on any device */
.uk-hidden {
	display: none !important;
	visibility: hidden !important;
}

/* Show on hover */
.uk-visible-hover:hover .uk-hidden {
	display: block !important;
	visibility: visible !important;
}

.uk-visible-hover-inline:hover .uk-hidden {
	display: inline-block !important;
	visibility: visible !important;
}


/* Hooks
 ========================================================================== */

.hook-container() {}
.hook-scrollable-box() {}