/*
 * Display
 */

.block { display: block; width: 100%; }
.inline { display: inline-block; vertical-align: baseline; }
.inline-top { display: inline-block; vertical-align: top; }
.inline-middle { display: inline-block; vertical-align: middle; }
.inline-bottom { display: inline-block; vertical-align: text-bottom; }



/*
 * Position
 */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }



/*
 * Alignment
 */

.text-right   { text-align: right; }
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-justify { text-align: justify; }



/*
 * Text Transform
 */

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-titlecase { text-transform: capitalize; }
.text-underline { text-decoration: underline; }



/*
 *	Opacity
 */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }



/*
 *	Visibility
 */

/* -- Hide visually and from screen readers: -- */
.hidden {
	display: none !important;
}

/* -- Hide visually and from screen readers, but maintain layout -- */
.invisible {
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.well-designed,	/* this class name is used for honeypots */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* -- Extends the .visuallyhidden class to allow the element -- */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Selective Hide/Show
 *
 * Important!!! READ ME:
 * EACH of these helper classes are contained within their breakpoint.
 * EACH of these helper classes do not bleed across breakpoint.
 * If the element is shown by default, Then use ".hide-"
 * If the element is hidden by default, Then use ".show-"
 * 
 */
@media ( max-width: 499px ) {
	/* -- small -- */
	.hide-small { display: none !important; }
	.show-small-block { display: block !important; }
	.show-small-inline { display: inline !important; }
	.show-small-inline-block { display: inline !important; }
}
@media( min-width: 500px ) and ( max-width: 999px ) {
	/* -- medium -- */
	.hide-medium { display: none !important; }
	.show-medium-block { display: block !important; }
	.show-medium-inline { display: inline !important; }
	.show-medium-inline-block { display: inline !important; }
}
@media( min-width: 1000px ) and ( max-width: 1499px ) {
	/* -- large -- */
	.hide-large { display: none !important; }
	.show-large-block { display: block !important; }
	.show-large-inline { display: inline !important; }
	.show-large-inline-block { display: inline !important; }
}
@media( min-width: 1500px ) {
	/* -- xlarge -- */
	.hide-xlarge { display: none !important; }
	.show-xlarge-block { display: block !important; }
	.show-xlarge-inline { display: inline !important; }
	.show-xlarge-inline-block { display: inline !important; }
}



/*
 * Whitespace & Overflow
 */

.no-wrap { white-space: nowrap; }

.no-whitespace { font-size: 0; }

.no-overflow { overflow: hidden; }

.no-overflow-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.no-overflow-clip { overflow: clip; }
.overflow-clip 	  { width: 100%; overflow: clip; }
.overflow-x-clip  { width: 100%; overflow-x: clip; }
.overflow-y-clip  { width: 100%; overflow-y: clip; }



/*
 * Interactivity
 */

.cursor-pointer { cursor: pointer; }
.pointer        { pointer-events: auto; }
.no-pointer     { pointer-events: none; }
.unselectable   { user-select: none; }



/*
 * Background Image
 */

.img-cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}