/******************************************************************************
* Utilities 
*
* This ITCSS layer is for single-purpose helpers that apply one specific 
* styling rule. They can help with minor layout adjustments like adding space
* between components or clearing floats. 
*
* Some of these defaults are from HTML5 Boilerplate
*
* ITCSS layers from most generic to most specific:
*  normalize -> base -> objects -> components -> utilities
******************************************************************************/

.center {
	margin: 0 auto;
}

.flex-center {
	display: flex;
	justify-content: center;
}

.width-100per {
	width: 100%;
}

.width-150 {
	width: 9.375rem;
}

.width-160 {
	width: 10rem;
}

.width-200 {
	width: 12.5rem;
}

.width-240 {
	width: 15rem;
}

.width-300 {
	width: 18.75rem;
}

.width-325 {
	width: 20.3125rem;
}

.width-350 {
	width: 21.875rem;
}

.width-400 {
	width: 25rem;
}

.width-450 {
	width: 28.125rem;
}

.width-500 {
	width: 31.25rem;
}

.width-600 {
	width: 37.5rem;
}

.width-640 {
	width: 40rem;
}

.width-700 {
	width: 43.75rem;
}

.height-325 {
	height: 20.3125rem;
}

.height-396 {
	height: 24.75rem;
}

.height-460 {
	height: 28.75rem;
}

.height-600 {
	height: 37.5rem;
}

.margin-top-5 {
	margin-top: 0.3125rem;
}

.margin-right-0 {
	margin-right: 0;
}

.margin-left-5 {
	margin-left: 0.3125rem;
}

.margin-left-20 {
	margin-left: 1.25rem;
}

.margin-bottom-0 {
	margin-bottom: 0;
}

.margin-side-0 {
	margin-left: 0;
	margin-right: 0;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.display-inline {
	display: inline;
}

.display-inline-block {
	display: inline-block;
}

.grey-text {
	color: var(--grey-500);
}

.light-grey-text {
	color: var(--grey-400);
}

.font-normal {
    color: var(--grey-700);
	font-family: 'Helvetica Neue', Helvetica;
}

.no-border {
	border: none;
}


/* =========================================================================
   From HTML5 Boilerplate
   ========================================================================= */

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

/*
* 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);
  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;
  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;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space 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 child elements.
*/
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}