/* ==========================================================================
   UTILITIES / VERTICAL ALIGN
   ========================================================================== */

.u-align-baseline {
	vertical-align: baseline;
}

.u-align-bottom {
	vertical-align: bottom;
}

.u-align-middle {
	vertical-align: middle;
}

.u-align-top {
	vertical-align: top;
}





/**
 * Utility classes to vertically align an element centrally within its parent.
 *
 * Using .u-vertical-align-center on an element can cause visual issues if it renders
 * on a half pixel so we can apply preserve-3d to prevent this on the parent
 * element.
 */
.u-vertical-align-parent {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

	/**
	 * This class requires a set height on the parent element to function correctly.
	 */
	.u-vertical-align-center {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.u-horizontal-align-center {
		position: relative;
		top: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}