/*
 * #Helpers
 */

/*!
 * Clearfix: contain floats
 * https://github.com/h5bp/html5-boilerplate MIT License
 *
 * For modern browsers
 * 1. The space rwd__card__content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of rwd__card elements.
 */

.clearfix:before,
.clearfix:after {
	content: " ";
	/* 1 */
	display: table;
	/* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * Centering as table cell (vertically and horizontally) in container
 */

.rwd__center_as__tbl {
	position: absolute;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 10000;
}

.rwd__center_as__tbl_cell {
	display: table-cell;
	width: 100%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.rwd__center_as__tbl_cell_container {
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

/*
 * Vertical align in the unknown ("ghost" element solution)
 */

.rwd__vertical_align__parent {
	position: relative;
	white-space: nowrap;
	/*text-align: center;* /* for center text align */
}

.rwd__vertical_align__parent:before {
	display: inline-block;
	margin-left: -0.25em;
	height: 100%;
	content: '';
	vertical-align: middle;
}

.rwd__vertical_align__child {
	display: inline-block;
	vertical-align: middle;
}

/*
 * Vertical align in the unknown (absolute position solution)
 *
 * @description:
 * - Parent of .rwd__vertical_align__abs_parent must have relative position and could have a min-height defined
 * - Each .rwd__vertical_align__abs_parent must have a fixed defined height
 */

.rwd__vertical_align__abs_parent {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.rwd__vertical_align__abs_parent__right_align {
	right: 0;
}

.rwd__vertical_align__abs_parent__left_align {
	left: 0;
}

/*
 * Absolute centering
 */

.rwd__absolute_centering {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: auto;
}

/*
 * Responsive centering in the unknown on X axis (horizontally)
 */

.rwd__responsive_centering_axis__x {
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

/*
 * Responsive centering in the unknown on Y axis (vertically)
 */

.rwd__responsive_centering_axis__y {
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

/*
 * Responsive centering in the unknown on X and Y axis (horizontally and vertically)
 */

.rwd__responsive_centering_axis__xy {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/*! https://github.com/h5bp/html5-boilerplate MIT License */

/*
 * Hidden
 */

.hidden {
	display: none;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
}