@charset "UTF-8";
/** Test 6 **/
/**
 * arches - Global style system focused on utility classes
 * @version v1.2.0
 * @link https://github.com/ACC-Style/Arches/
 */
/**  Pre Header - modular scale default break points utility    *********************************/
/**  Version: 1.1.0    *********************************/
/*  
get-themecolor()

Gets a color value that fits into the set color patterns for usage in new css.

 $key - The color name to be modified [primary,secondary,etc...]
 $modifier   - The color shift you desire default is 0 but you can pass in [-5,-4,...0,1...4,5]. 

 Styleguide: mixins.get-themecolor
*/
.card.testimonial .blockquote p:before, .card.testimonial .blockquote p:after,
.card.testimonial .blockquote-cite:before,
.card.testimonial .blockquote-cite:after,
.card.product .blockquote p:before,
.card.product .blockquote p:after,
.card.product .blockquote-cite:before,
.card.product .blockquote-cite:after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-variant: normal;
  font-Weight:  900;
  line-height: 1;
  text-rendering: auto;
}

/** Start of BRANDINGBUILD 0 **/
/**Set Active Class**/
/** Utility Class Built on top of Zurb Foundation ^6.6.1  **/
/**  ACC Brands    *********************************/
/**  CV Quality Colors  **/

.c_primary-alt,.h\:c_primary-alt:hover {
  color: #d2e6f6 !important;
}

.br_primary-alt,.bg_primary-alt {
  background-color: #d2e6f6 !important;
}

.c_mix-teal-orange {
  color: #58b5a5 !important;
}

.c_mix-orange-teal {
  color: #acbd65 !important;
}

.br_mix-teal-orange {
  border-color: #58b5a5 !important;
}

.br_mix-orange-teal {
  border-color: #acbd65 !important;
}

.bg_mix-teal-orange {
  background-color: #58b5a5 !important;
}

.bg_mix-orange-teal {
  background-color: #acbd65 !important;
}

/*
	Background Colors Alt

	These Alternate colors are single use to embelish a design. These colors <strong>DO NOT</strong> have extra modifiers.    

	.bg_primary-alt				-	Primary Alt
	.bg_mix-teal-orange			-	Mix of 60% Teal And 40% Orange 
	.bg_mix-orange-teal			-	Mix of 60% Orange and 40% Teal 	


	Markup:
	<div class="{{modifier_class}} p_3 c_white">Background Color of {{modifier_class}}</div>

	Styleguide Background.Color.Alt

*/
/*
	Border Colors Alt

	These Alternate colors are single use to embelish a design. These colors <strong>DO NOT</strong> have extra modifiers.    

	.br_primary-alt            	- light orange
	.br_mix-teal-orange				-	Mix of 60% Teal And 40% Orange 
	.br_mix-orange-teal				-	Mix of 60% Orange and 40% Teal 	


	Markup:
	<div class="{{modifier_class}} br_solid br_4">Border Color of {{modifier_class}}</div>

	Styleguide Border.Color.Alt

*/
/*

CVqualtiy Full Pallete 

Credit Types in the ACC have a specific color coding.

$orange-dark   			  -   #e87d1e;  	Orange Dark   	
$orange-light   		  -   #ffc425;  	Orange Light   
$warm-grey   			    -   #a1a0a4;  	Warm Grey   	
$warm-grey-light   		-   #d6d4d4;  	Warm Grey Light  
$warm-grey-dark   		-  #6f6b6f;  	Warm Grey Dark   
$off-white   			    -   #fafafa;  	Off White   	
$off-black   			    -  #131212;  	Off Black   	
$soft-blue   			    -   #a4cded;  	Soft Blue   	
$soft-grey   			    -   #eceaea;  	Soft Grey   	
$error-color   			  -  #990000;  	Error Color   	
$scrub-teal   			  -  #0088aa;  	Scrub  Teal   	
$scrub-teal-light   	-  #05aee5;  	Scrub Teal Light 
$scrub-teal-dark   		-  #047294;  	Scrub Teal Dark  
$mix-teal_orange   		-  #58B5A5;  	Mix of 60% Teal And 40% Orange  
$mix-orange_teal   		-  #ACBD65;  	Mix of 60% Orange and 40% Teal  

Weight:  1

Styleguide DesignBase.Colors.Full Pallate

*/
.gradient_teal, .btn-primary,
.h\:gradient_teal:hover {
  background: #047294;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #05aee5 0%, #047294 100%);
  /* W3C */
}

.gradient_teal-reverse, .btn-primary:hover,
.h\:gradient_teal-reverse:hover {
  background: #047294;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #047294 0%, #0088aa 100%);
  /* W3C */
}

.gradient_grey, .btn-shade,
.h\:gradient_grey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #a1a0a4 0%, #817c7b 100%);
  /* W3C */
}

.gradient_grey-reverse, .btn-shade:hover,
.h\:gradient_grey-reverse:hover {
  background: #817c7b;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #817c7b 0%, #a1a0a4 100%);
  /* W3C */
}

.gradient_lightblue {
  background: #a4cded;
  /* Old browsers */
  background-attachment: fixed;
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background-image: linear-gradient(to bottom, #fafafa 1%, #d2e6f6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=" $off-white", endColorstr="$soft-blue", GradientType=0);
  /* IE6-9 */
}

.gradient_lightgrey {
  background: #ffffff;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlY2VhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #ffffff 0%, #eceaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr=" $soft-grey", GradientType=0);
}

.gradient_orange {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #e87d1e 0%, #f4a122 100%);
  /* W3C */
}

.gradient_warmgrey,
.h\:gradient_warmgrey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #d6d4d4 0%, #a1a0a4 100%);
  /* W3C */
}

.gradient_warmgrey-reverse,
.h\:gradient_warmgrey-reverse:hover {
  background: #a1a0a4;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1YWVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjgzYWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #a1a0a4 0%, #d6d4d4 100%);
  /* W3C */
}

/** Built With CVQuality Branding **/
/**  Default Brands    *********************************/
/**  Colors  **/
/**  Fonts  **/
/* Define the "system" font family */
@font-face {
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
  font-family: system;
  font-style: normal;
  font-Weight:  300;
}
html {
  -webkit-font-smoothing: antialiased;
  -webkit-line-break: after-white-space;
  -webkit-locale: "en";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-break: white-space;
}

/**  Textures  **/
div[class*=texture_] {
  background-attachment: local;
  background-origin: border-box;
  background-position: top right;
  background-repeat: repeat;
}

/**  Logos  **/
/**  Zurb Foundation Framework Setup Files. ***************************************/
/**
* Foundation for Sites Settings
 */
/**
* Foundation for Sites Settings END
 */
/**
 * Foundation for Sites
 * Version 6.6.3
 * https://get.foundation
 * Licensed under MIT Open Source
 */
@media print, screen and (min-width: 40em) {
  .reveal.large, .reveal.small, .reveal.tiny, .reveal {
    right: auto;
    left: auto;
    margin: 0 auto;
  }
}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  margin: 0;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-Weight:  bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template,[hidden] {
  display: none;
}

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  background: white;
  color: #131212;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-Weight:  normal;
  line-height: 1.5;
}

img {
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

textarea {
  height: auto;
  min-height: 50px;
}

textarea,select {
  border-radius: 0px;
}

select {
  box-sizing: border-box;
  width: 100%;
}

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0px;
  background: transparent;
  line-height: 1;
  cursor: auto;
}
[data-whatinput=mouse] button {
  outline: 0;
}

pre {
  overflow: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.is-visible {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 39px;
  height: 2.4375rem;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 8px;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(19, 18, 18, 0.1);
  color: #131212;
  font-family: inherit;
  font-size: 16px;
  font-size: 1rem;
  font-Weight:  normal;
  line-height: 1.5;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=week]:focus, [type=email]:focus, [type=number]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=url]:focus, [type=color]:focus,
textarea:focus {
  border: 1px solid #8a8a8a;
  outline: none;
  background-color: white;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

textarea {
  max-width: 100%;
}
textarea[rows] {
  height: auto;
}

input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
  background-color: #e6e6e6;
  cursor: not-allowed;
}

[type=submit],
[type=button] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0px;
}

input[type=search] {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #cacaca;
}

::-moz-placeholder {
  color: #cacaca;
}

:-ms-input-placeholder {
  color: #cacaca;
}

::placeholder {
  color: #cacaca;
}

[type=file],
[type=checkbox],
[type=radio] {
  margin: 0 0 16px;
  margin: 0 0 1rem;
}

[type=checkbox] + label,
[type=radio] + label {
  display: inline-block;
  margin-right: 16px;
  margin-right: 1rem;
  margin-bottom: 0;
  margin-left: 8px;
  margin-left: 0.5rem;
  vertical-align: baseline;
}
[type=checkbox] + label[for],
[type=radio] + label[for] {
  cursor: pointer;
}

label > [type=checkbox],
label > [type=radio] {
  margin-right: 8px;
  margin-right: 0.5rem;
}

[type=file] {
  width: 100%;
}

label {
  display: block;
  margin: 0;
  color: #131212;
  font-size: 14px;
  font-size: 0.875rem;
  font-Weight:  normal;
  line-height: 1.8;
}
label.middle {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 9px 0;
  padding: 0.5625rem 0;
}

.help-text {
  margin-top: -8px;
  margin-top: -0.5rem;
  color: #131212;
  font-size: 13px;
  font-size: 0.8125rem;
  font-style: italic;
}

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.input-group > :first-child, .input-group > :first-child.input-group-button > * {
  border-radius: 0px 0 0 0px;
}
.input-group > :last-child, .input-group > :last-child.input-group-button > * {
  border-radius: 0 0px 0px 0;
}

.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label, .input-group-button, .input-group-field, .input-group-label {
  margin: 0;
  white-space: nowrap;
}

.input-group-label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 16px;
  padding: 0 1rem;
  border: 1px solid #cacaca;
  background: #e6e6e6;
  color: #131212;
  text-align: center;
  white-space: nowrap;
}
.input-group-label:first-child {
  border-right: 0;
}
.input-group-label:last-child {
  border-left: 0;
}

.input-group-field {
  flex: 1 1 0px;
  min-width: 0;
  border-radius: 0;
}

.input-group-button {
  display: flex;
  flex: 0 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  -ms-grid-row-align: stretch;
      align-self: stretch;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-size: 1rem;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  max-width: 100%;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}

.fieldset {
  margin: 18px 0;
  margin: 1.125rem 0;
  padding: 20px;
  padding: 1.25rem;
  border: 1px solid #cacaca;
}
.fieldset legend {
  margin: 0;
  margin-left: -3px;
  margin-left: -0.1875rem;
  padding: 0 3px;
  padding: 0 0.1875rem;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 39px;
  height: 2.4375rem;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 8px;
  padding: 0.5rem;
  padding-right: 24px;
  padding-right: 1.5rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-origin: content-box;
  background-position: right -16px center;
  background-position: right -1rem center;
  background-repeat: no-repeat;
  background-size: 9px 6px;
  color: #131212;
  font-family: inherit;
  font-size: 16px;
  font-size: 1rem;
  font-Weight:  normal;
  line-height: 1.5;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
@media screen and (min-width: 0\0 ) {
  select {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==");
  }
}
select:focus {
  border: 1px solid #8a8a8a;
  outline: none;
  background-color: white;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
select:disabled {
  background-color: #e6e6e6;
  cursor: not-allowed;
}
select::-ms-expand {
  display: none;
}
select[multiple] {
  height: auto;
  background-image: none;
}
select:not([multiple]) {
  padding-top: 0;
  padding-bottom: 0;
}

.is-invalid-input:not(:focus) {
  border-color: #990000;
  background-color: #f5e6e6;
}
.is-invalid-input:not(:focus)::-webkit-input-placeholder {
  color: #990000;
}
.is-invalid-input:not(:focus)::-moz-placeholder {
  color: #990000;
}
.is-invalid-input:not(:focus):-ms-input-placeholder {
  color: #990000;
}
.is-invalid-input:not(:focus)::placeholder {
  color: #990000;
}

.is-invalid-label,.form-error {
  color: #990000;
}

.form-error {
  display: none;
  margin-top: -8px;
  margin-top: -0.5rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: 12px;
  font-size: 0.75rem;
  font-Weight:  bold;
}
.form-error.is-visible {
  display: block;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: inherit;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

em,
i {
  font-style: italic;
}

em,
i,strong,
b {
  line-height: inherit;
}

strong,
b {
  font-Weight:  bold;
}

small {
  font-size: 80%;
  line-height: inherit;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: inherit;
  font-family: "Maven Pro", "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-style: normal;
  font-Weight:  normal;
  text-rendering: optimizeLegibility;
}
h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  color: #cacaca;
  line-height: 0;
}

h1, .h1 {
  font-size: 39.813px;
  font-size: 2.48832rem;
}

h1, .h1,h2, .h2 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h2, .h2 {
  font-size: 33.177px;
  font-size: 2.0736rem;
}

h3, .h3 {
  font-size: 27.648px;
  font-size: 1.728rem;
}

h3, .h3,h4, .h4 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h4, .h4 {
  font-size: 23.04px;
  font-size: 1.44rem;
}

h5, .h5 {
  font-size: 19.2px;
  font-size: 1.2rem;
}

h5, .h5,h6, .h6 {
  margin-top: 0;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 16px;
  font-size: 1rem;
}

@media print, screen and (min-width: 40em) {
  h1, .h1 {
    font-size: 2.79936rem;
  }

  h2, .h2 {
    font-size: 2.3328rem;
  }

  h3, .h3 {
    font-size: 1.944rem;
  }

  h4, .h4 {
    font-size: 1.62rem;
  }

  h5, .h5 {
    font-size: 1.35rem;
  }

  h6, .h6 {
    font-size: 1.125rem;
  }
}
a {
  color: #0088aa;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  color: #007592;
}
a img {
  border: 0;
}

hr {
  max-width: 1400px;
  max-width: 87.5rem;
  height: 0;
  margin: 20px auto;
  margin: 1.25rem auto;
  clear: both;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  border-left: 0;
}

ul,
ol,
dl {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  line-height: 1.6;
  list-style-position: outside;
}

li {
  font-size: inherit;
}

ul {
  list-style-type: disc;
}

ul,ol,ul ul, ul ol, ol ul, ol ol {
  margin-left: 20px;
  margin-left: 1.25rem;
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
}

dl {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
dl dt {
  margin-bottom: 4.8px;
  margin-bottom: 0.3rem;
  font-Weight:  bold;
}

blockquote {
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 9px 20px 0 19px;
  padding: 0.5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #cacaca;
}
blockquote, blockquote p {
  color: #8a8a8a;
  line-height: 1.6;
}

abbr, abbr[title] {
  border-bottom: 1px dotted #131212;
  text-decoration: none;
  cursor: help;
}

figure,kbd {
  margin: 0;
}

kbd {
  padding: 2px 4px 0;
  padding: 0.125rem 0.25rem 0;
  background-color: #e6e6e6;
  color: #131212;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

.subheader {
  margin-top: 3.2px;
  margin-top: 0.2rem;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  color: #8a8a8a;
  font-Weight:  normal;
  line-height: 1.4;
}

.lead {
  font-size: 125%;
  line-height: 1.6;
}

.stat {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
}
p + .stat {
  margin-top: -16px;
  margin-top: -1rem;
}

ul.no-bullet, ol.no-bullet {
  margin-left: 0;
  list-style: none;
}

.cite-block, cite {
  display: block;
  color: #8a8a8a;
  font-size: 13px;
  font-size: 0.8125rem;
}
.cite-block:before, cite:before {
  content: "— ";
}

.code-inline, code {
  word-wrap: break-word;
  display: inline;
  max-width: 100%;
  padding: 2px 5px 1px;
  padding: 0.125rem 0.3125rem 0.0625rem;
}

.code-inline, code,.code-block {
  border: 1px solid #cacaca;
  background-color: #e6e6e6;
  color: #131212;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-Weight:  normal;
}

.code-block {
  display: block;
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
  padding: 16px;
  padding: 1rem;
  overflow: auto;
  white-space: pre;
}

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

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

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

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

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left;
  }

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

  .medium-text-center {
    text-align: center;
  }

  .medium-text-justify {
    text-align: justify;
  }
}
@media print, screen and (min-width: 64em) {
  .large-text-left {
    text-align: left;
  }

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

  .large-text-center {
    text-align: center;
  }

  .large-text-justify {
    text-align: justify;
  }
}
.show-for-print {
  display: none !important;
}

@media print {
  * {
    -webkit-print-color-adjust: economy;
            color-adjust: economy;
    background: transparent !important;
    box-shadow: none !important;
    color: black !important;
    text-shadow: none !important;
  }

  .show-for-print {
    display: block !important;
  }

  .hide-for-print {
    display: none !important;
  }

  table.show-for-print {
    display: table !important;
  }

  thead.show-for-print {
    display: table-header-group !important;
  }

  tbody.show-for-print {
    display: table-row-group !important;
  }

  tr.show-for-print {
    display: table-row !important;
  }

  td.show-for-print,th.show-for-print {
    display: table-cell !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  .ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
    content: "";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  pre,
blockquote {
    border: 1px solid #8a8a8a;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }

  .print-break-inside {
    page-break-inside: auto;
  }
}
.grid-container {
  max-width: 1400px;
  max-width: 87.5rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}
.grid-container.fluid {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container.fluid {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}
.grid-container.full {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.grid-x {
  display: flex;
  flex-flow: row wrap;
}

.cell {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0px;
  min-height: 0px;
}
.cell.auto {
  flex: 1 1 0px;
}
.cell.shrink {
  flex: 0 0 auto;
}
.grid-x > .auto,.grid-x > .shrink {
  width: auto;
}

.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
  flex-basis: auto;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
    flex-basis: auto;
  }
}
.grid-x > .small-12, .grid-x > .small-11, .grid-x > .small-10, .grid-x > .small-9, .grid-x > .small-8, .grid-x > .small-7, .grid-x > .small-6, .grid-x > .small-5, .grid-x > .small-4, .grid-x > .small-3, .grid-x > .small-2, .grid-x > .small-1 {
  flex: 0 0 auto;
}

.grid-x > .small-1 {
  width: 8.3333333333%;
}

.grid-x > .small-2 {
  width: 16.6666666667%;
}

.grid-x > .small-3 {
  width: 25%;
}

.grid-x > .small-4 {
  width: 33.3333333333%;
}

.grid-x > .small-5 {
  width: 41.6666666667%;
}

.grid-x > .small-6 {
  width: 50%;
}

.grid-x > .small-7 {
  width: 58.3333333333%;
}

.grid-x > .small-8 {
  width: 66.6666666667%;
}

.grid-x > .small-9 {
  width: 75%;
}

.grid-x > .small-10 {
  width: 83.3333333333%;
}

.grid-x > .small-11 {
  width: 91.6666666667%;
}

.grid-x > .small-12 {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-auto {
    flex: 1 1 0px;
    width: auto;
  }

  .grid-x > .medium-12, .grid-x > .medium-11, .grid-x > .medium-10, .grid-x > .medium-9, .grid-x > .medium-8, .grid-x > .medium-7, .grid-x > .medium-6, .grid-x > .medium-5, .grid-x > .medium-4, .grid-x > .medium-3, .grid-x > .medium-2, .grid-x > .medium-1, .grid-x > .medium-shrink {
    flex: 0 0 auto;
  }

  .grid-x > .medium-shrink {
    width: auto;
  }

  .grid-x > .medium-1 {
    width: 8.3333333333%;
  }

  .grid-x > .medium-2 {
    width: 16.6666666667%;
  }

  .grid-x > .medium-3 {
    width: 25%;
  }

  .grid-x > .medium-4 {
    width: 33.3333333333%;
  }

  .grid-x > .medium-5 {
    width: 41.6666666667%;
  }

  .grid-x > .medium-6 {
    width: 50%;
  }

  .grid-x > .medium-7 {
    width: 58.3333333333%;
  }

  .grid-x > .medium-8 {
    width: 66.6666666667%;
  }

  .grid-x > .medium-9 {
    width: 75%;
  }

  .grid-x > .medium-10 {
    width: 83.3333333333%;
  }

  .grid-x > .medium-11 {
    width: 91.6666666667%;
  }

  .grid-x > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-auto {
    flex: 1 1 0px;
    width: auto;
  }

  .grid-x > .large-12, .grid-x > .large-11, .grid-x > .large-10, .grid-x > .large-9, .grid-x > .large-8, .grid-x > .large-7, .grid-x > .large-6, .grid-x > .large-5, .grid-x > .large-4, .grid-x > .large-3, .grid-x > .large-2, .grid-x > .large-1, .grid-x > .large-shrink {
    flex: 0 0 auto;
  }

  .grid-x > .large-shrink {
    width: auto;
  }

  .grid-x > .large-1 {
    width: 8.3333333333%;
  }

  .grid-x > .large-2 {
    width: 16.6666666667%;
  }

  .grid-x > .large-3 {
    width: 25%;
  }

  .grid-x > .large-4 {
    width: 33.3333333333%;
  }

  .grid-x > .large-5 {
    width: 41.6666666667%;
  }

  .grid-x > .large-6 {
    width: 50%;
  }

  .grid-x > .large-7 {
    width: 58.3333333333%;
  }

  .grid-x > .large-8 {
    width: 66.6666666667%;
  }

  .grid-x > .large-9 {
    width: 75%;
  }

  .grid-x > .large-10 {
    width: 83.3333333333%;
  }

  .grid-x > .large-11 {
    width: 91.6666666667%;
  }

  .grid-x > .large-12 {
    width: 100%;
  }
}
.grid-margin-x:not(.grid-x) > .cell {
  width: auto;
}

.grid-margin-y:not(.grid-y) > .cell {
  height: auto;
}

.grid-margin-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-margin-x > .cell {
  width: calc(100% - 1.25rem);
  margin-right: 10px;
  margin-right: 0.625rem;
  margin-left: 10px;
  margin-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .cell {
    width: calc(100% - 1.875rem);
    margin-right: 0.9375rem;
    margin-left: 0.9375rem;
  }
}
.grid-margin-x > .auto,.grid-margin-x > .shrink {
  width: auto;
}
.grid-margin-x > .small-1 {
  width: calc(8.3333333333% - 1.25rem);
}
.grid-margin-x > .small-2 {
  width: calc(16.6666666667% - 1.25rem);
}
.grid-margin-x > .small-3 {
  width: calc(25% - 1.25rem);
}
.grid-margin-x > .small-4 {
  width: calc(33.3333333333% - 1.25rem);
}
.grid-margin-x > .small-5 {
  width: calc(41.6666666667% - 1.25rem);
}
.grid-margin-x > .small-6 {
  width: calc(50% - 1.25rem);
}
.grid-margin-x > .small-7 {
  width: calc(58.3333333333% - 1.25rem);
}
.grid-margin-x > .small-8 {
  width: calc(66.6666666667% - 1.25rem);
}
.grid-margin-x > .small-9 {
  width: calc(75% - 1.25rem);
}
.grid-margin-x > .small-10 {
  width: calc(83.3333333333% - 1.25rem);
}
.grid-margin-x > .small-11 {
  width: calc(91.6666666667% - 1.25rem);
}
.grid-margin-x > .small-12 {
  width: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .auto,.grid-margin-x > .shrink {
    width: auto;
  }
  .grid-margin-x > .small-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .small-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .small-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .small-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .small-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .small-12 {
    width: calc(100% - 1.875rem);
  }
  .grid-margin-x > .medium-auto,.grid-margin-x > .medium-shrink {
    width: auto;
  }
  .grid-margin-x > .medium-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x > .large-auto,.grid-margin-x > .large-shrink {
    width: auto;
  }
  .grid-margin-x > .large-1 {
    width: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 1.875rem);
  }
}

.grid-padding-x .grid-padding-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x .grid-padding-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-container:not(.full) > .grid-padding-x {
  margin-right: -10px;
  margin-right: -0.625rem;
  margin-left: -10px;
  margin-left: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container:not(.full) > .grid-padding-x {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.grid-padding-x > .cell {
  padding-right: 10px;
  padding-right: 0.625rem;
  padding-left: 10px;
  padding-left: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x > .cell {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

.small-up-1 > .cell {
  width: 100%;
}

.small-up-2 > .cell {
  width: 50%;
}

.small-up-3 > .cell {
  width: 33.3333333333%;
}

.small-up-4 > .cell {
  width: 25%;
}

.small-up-5 > .cell {
  width: 20%;
}

.small-up-6 > .cell {
  width: 16.6666666667%;
}

.small-up-7 > .cell {
  width: 14.2857142857%;
}

.small-up-8 > .cell {
  width: 12.5%;
}

@media print, screen and (min-width: 40em) {
  .medium-up-1 > .cell {
    width: 100%;
  }

  .medium-up-2 > .cell {
    width: 50%;
  }

  .medium-up-3 > .cell {
    width: 33.3333333333%;
  }

  .medium-up-4 > .cell {
    width: 25%;
  }

  .medium-up-5 > .cell {
    width: 20%;
  }

  .medium-up-6 > .cell {
    width: 16.6666666667%;
  }

  .medium-up-7 > .cell {
    width: 14.2857142857%;
  }

  .medium-up-8 > .cell {
    width: 12.5%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-up-1 > .cell {
    width: 100%;
  }

  .large-up-2 > .cell {
    width: 50%;
  }

  .large-up-3 > .cell {
    width: 33.3333333333%;
  }

  .large-up-4 > .cell {
    width: 25%;
  }

  .large-up-5 > .cell {
    width: 20%;
  }

  .large-up-6 > .cell {
    width: 16.6666666667%;
  }

  .large-up-7 > .cell {
    width: 14.2857142857%;
  }

  .large-up-8 > .cell {
    width: 12.5%;
  }
}
.grid-margin-x.small-up-1 > .cell {
  width: calc(100% - 1.25rem);
}

.grid-margin-x.small-up-2 > .cell {
  width: calc(50% - 1.25rem);
}

.grid-margin-x.small-up-3 > .cell {
  width: calc(33.3333333333% - 1.25rem);
}

.grid-margin-x.small-up-4 > .cell {
  width: calc(25% - 1.25rem);
}

.grid-margin-x.small-up-5 > .cell {
  width: calc(20% - 1.25rem);
}

.grid-margin-x.small-up-6 > .cell {
  width: calc(16.6666666667% - 1.25rem);
}

.grid-margin-x.small-up-7 > .cell {
  width: calc(14.2857142857% - 1.25rem);
}

.grid-margin-x.small-up-8 > .cell {
  width: calc(12.5% - 1.25rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-x.small-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.small-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.small-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.small-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.small-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.small-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.small-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.small-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }

  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.medium-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.medium-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.medium-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.medium-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }

  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }

  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.3333333333% - 1.875rem);
  }

  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }

  .grid-margin-x.large-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }

  .grid-margin-x.large-up-6 > .cell {
    width: calc(16.6666666667% - 1.875rem);
  }

  .grid-margin-x.large-up-7 > .cell {
    width: calc(14.2857142857% - 1.875rem);
  }

  .grid-margin-x.large-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
.small-margin-collapse,.small-margin-collapse > .cell {
  margin-right: 0;
  margin-left: 0;
}
.small-margin-collapse > .small-1 {
  width: 8.3333333333%;
}
.small-margin-collapse > .small-2 {
  width: 16.6666666667%;
}
.small-margin-collapse > .small-3 {
  width: 25%;
}
.small-margin-collapse > .small-4 {
  width: 33.3333333333%;
}
.small-margin-collapse > .small-5 {
  width: 41.6666666667%;
}
.small-margin-collapse > .small-6 {
  width: 50%;
}
.small-margin-collapse > .small-7 {
  width: 58.3333333333%;
}
.small-margin-collapse > .small-8 {
  width: 66.6666666667%;
}
.small-margin-collapse > .small-9 {
  width: 75%;
}
.small-margin-collapse > .small-10 {
  width: 83.3333333333%;
}
.small-margin-collapse > .small-11 {
  width: 91.6666666667%;
}
.small-margin-collapse > .small-12 {
  width: 100%;
}
@media print, screen and (min-width: 40em) {
  .small-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .medium-3 {
    width: 25%;
  }
  .small-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .medium-6 {
    width: 50%;
  }
  .small-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .medium-9 {
    width: 75%;
  }
  .small-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .small-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .large-3 {
    width: 25%;
  }
  .small-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .large-6 {
    width: 50%;
  }
  .small-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .large-9 {
    width: 75%;
  }
  .small-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .large-12 {
    width: 100%;
  }
}

.small-padding-collapse {
  margin-right: 0;
  margin-left: 0;
}
.small-padding-collapse > .cell {
  padding-right: 0;
  padding-left: 0;
}

@media print, screen and (min-width: 40em) {
  .medium-margin-collapse,.medium-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .small-3 {
    width: 25%;
  }
  .medium-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .small-6 {
    width: 50%;
  }
  .medium-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .small-9 {
    width: 75%;
  }
  .medium-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .medium-3 {
    width: 25%;
  }
  .medium-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .medium-6 {
    width: 50%;
  }
  .medium-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .medium-9 {
    width: 75%;
  }
  .medium-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .medium-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .large-3 {
    width: 25%;
  }
  .medium-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .large-6 {
    width: 50%;
  }
  .medium-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .large-9 {
    width: 75%;
  }
  .medium-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .large-12 {
    width: 100%;
  }
}

@media print, screen and (min-width: 40em) {
  .medium-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

@media print, screen and (min-width: 64em) {
  .large-margin-collapse,.large-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .small-3 {
    width: 25%;
  }
  .large-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .small-6 {
    width: 50%;
  }
  .large-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .small-9 {
    width: 75%;
  }
  .large-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .medium-3 {
    width: 25%;
  }
  .large-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .medium-6 {
    width: 50%;
  }
  .large-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .medium-9 {
    width: 75%;
  }
  .large-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .large-3 {
    width: 25%;
  }
  .large-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .large-6 {
    width: 50%;
  }
  .large-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .large-9 {
    width: 75%;
  }
  .large-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .large-12 {
    width: 100%;
  }
}

@media print, screen and (min-width: 64em) {
  .large-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

.small-offset-0 {
  margin-left: 0%;
}

.grid-margin-x > .small-offset-0 {
  margin-left: calc(0% + 0.625rem);
}

.small-offset-1 {
  margin-left: 8.3333333333%;
}

.grid-margin-x > .small-offset-1 {
  margin-left: calc(8.3333333333% + 0.625rem);
}

.small-offset-2 {
  margin-left: 16.6666666667%;
}

.grid-margin-x > .small-offset-2 {
  margin-left: calc(16.6666666667% + 0.625rem);
}

.small-offset-3 {
  margin-left: 25%;
}

.grid-margin-x > .small-offset-3 {
  margin-left: calc(25% + 0.625rem);
}

.small-offset-4 {
  margin-left: 33.3333333333%;
}

.grid-margin-x > .small-offset-4 {
  margin-left: calc(33.3333333333% + 0.625rem);
}

.small-offset-5 {
  margin-left: 41.6666666667%;
}

.grid-margin-x > .small-offset-5 {
  margin-left: calc(41.6666666667% + 0.625rem);
}

.small-offset-6 {
  margin-left: 50%;
}

.grid-margin-x > .small-offset-6 {
  margin-left: calc(50% + 0.625rem);
}

.small-offset-7 {
  margin-left: 58.3333333333%;
}

.grid-margin-x > .small-offset-7 {
  margin-left: calc(58.3333333333% + 0.625rem);
}

.small-offset-8 {
  margin-left: 66.6666666667%;
}

.grid-margin-x > .small-offset-8 {
  margin-left: calc(66.6666666667% + 0.625rem);
}

.small-offset-9 {
  margin-left: 75%;
}

.grid-margin-x > .small-offset-9 {
  margin-left: calc(75% + 0.625rem);
}

.small-offset-10 {
  margin-left: 83.3333333333%;
}

.grid-margin-x > .small-offset-10 {
  margin-left: calc(83.3333333333% + 0.625rem);
}

.small-offset-11 {
  margin-left: 91.6666666667%;
}

.grid-margin-x > .small-offset-11 {
  margin-left: calc(91.6666666667% + 0.625rem);
}

@media print, screen and (min-width: 40em) {
  .medium-offset-0 {
    margin-left: 0%;
  }

  .grid-margin-x > .medium-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }

  .medium-offset-1 {
    margin-left: 8.3333333333%;
  }

  .grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.3333333333% + 0.9375rem);
  }

  .medium-offset-2 {
    margin-left: 16.6666666667%;
  }

  .grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.6666666667% + 0.9375rem);
  }

  .medium-offset-3 {
    margin-left: 25%;
  }

  .grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

  .medium-offset-4 {
    margin-left: 33.3333333333%;
  }

  .grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.3333333333% + 0.9375rem);
  }

  .medium-offset-5 {
    margin-left: 41.6666666667%;
  }

  .grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.6666666667% + 0.9375rem);
  }

  .medium-offset-6 {
    margin-left: 50%;
  }

  .grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

  .medium-offset-7 {
    margin-left: 58.3333333333%;
  }

  .grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.3333333333% + 0.9375rem);
  }

  .medium-offset-8 {
    margin-left: 66.6666666667%;
  }

  .grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.6666666667% + 0.9375rem);
  }

  .medium-offset-9 {
    margin-left: 75%;
  }

  .grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

  .medium-offset-10 {
    margin-left: 83.3333333333%;
  }

  .grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.3333333333% + 0.9375rem);
  }

  .medium-offset-11 {
    margin-left: 91.6666666667%;
  }

  .grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.6666666667% + 0.9375rem);
  }
}
@media print, screen and (min-width: 64em) {
  .large-offset-0 {
    margin-left: 0%;
  }

  .grid-margin-x > .large-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }

  .large-offset-1 {
    margin-left: 8.3333333333%;
  }

  .grid-margin-x > .large-offset-1 {
    margin-left: calc(8.3333333333% + 0.9375rem);
  }

  .large-offset-2 {
    margin-left: 16.6666666667%;
  }

  .grid-margin-x > .large-offset-2 {
    margin-left: calc(16.6666666667% + 0.9375rem);
  }

  .large-offset-3 {
    margin-left: 25%;
  }

  .grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

  .large-offset-4 {
    margin-left: 33.3333333333%;
  }

  .grid-margin-x > .large-offset-4 {
    margin-left: calc(33.3333333333% + 0.9375rem);
  }

  .large-offset-5 {
    margin-left: 41.6666666667%;
  }

  .grid-margin-x > .large-offset-5 {
    margin-left: calc(41.6666666667% + 0.9375rem);
  }

  .large-offset-6 {
    margin-left: 50%;
  }

  .grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

  .large-offset-7 {
    margin-left: 58.3333333333%;
  }

  .grid-margin-x > .large-offset-7 {
    margin-left: calc(58.3333333333% + 0.9375rem);
  }

  .large-offset-8 {
    margin-left: 66.6666666667%;
  }

  .grid-margin-x > .large-offset-8 {
    margin-left: calc(66.6666666667% + 0.9375rem);
  }

  .large-offset-9 {
    margin-left: 75%;
  }

  .grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

  .large-offset-10 {
    margin-left: 83.3333333333%;
  }

  .grid-margin-x > .large-offset-10 {
    margin-left: calc(83.3333333333% + 0.9375rem);
  }

  .large-offset-11 {
    margin-left: 91.6666666667%;
  }

  .grid-margin-x > .large-offset-11 {
    margin-left: calc(91.6666666667% + 0.9375rem);
  }
}
.grid-y {
  display: flex;
  flex-flow: column nowrap;
}
.grid-y > .cell {
  height: auto;
  max-height: none;
}
.grid-y > .auto,.grid-y > .shrink {
  height: auto;
}
.grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
  flex-basis: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
    flex-basis: auto;
  }
}
.grid-y > .small-12, .grid-y > .small-11, .grid-y > .small-10, .grid-y > .small-9, .grid-y > .small-8, .grid-y > .small-7, .grid-y > .small-6, .grid-y > .small-5, .grid-y > .small-4, .grid-y > .small-3, .grid-y > .small-2, .grid-y > .small-1 {
  flex: 0 0 auto;
}
.grid-y > .small-1 {
  height: 8.3333333333%;
}
.grid-y > .small-2 {
  height: 16.6666666667%;
}
.grid-y > .small-3 {
  height: 25%;
}
.grid-y > .small-4 {
  height: 33.3333333333%;
}
.grid-y > .small-5 {
  height: 41.6666666667%;
}
.grid-y > .small-6 {
  height: 50%;
}
.grid-y > .small-7 {
  height: 58.3333333333%;
}
.grid-y > .small-8 {
  height: 66.6666666667%;
}
.grid-y > .small-9 {
  height: 75%;
}
.grid-y > .small-10 {
  height: 83.3333333333%;
}
.grid-y > .small-11 {
  height: 91.6666666667%;
}
.grid-y > .small-12 {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-auto {
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .medium-12, .grid-y > .medium-11, .grid-y > .medium-10, .grid-y > .medium-9, .grid-y > .medium-8, .grid-y > .medium-7, .grid-y > .medium-6, .grid-y > .medium-5, .grid-y > .medium-4, .grid-y > .medium-3, .grid-y > .medium-2, .grid-y > .medium-1, .grid-y > .medium-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .medium-shrink {
    height: auto;
  }
  .grid-y > .medium-1 {
    height: 8.3333333333%;
  }
  .grid-y > .medium-2 {
    height: 16.6666666667%;
  }
  .grid-y > .medium-3 {
    height: 25%;
  }
  .grid-y > .medium-4 {
    height: 33.3333333333%;
  }
  .grid-y > .medium-5 {
    height: 41.6666666667%;
  }
  .grid-y > .medium-6 {
    height: 50%;
  }
  .grid-y > .medium-7 {
    height: 58.3333333333%;
  }
  .grid-y > .medium-8 {
    height: 66.6666666667%;
  }
  .grid-y > .medium-9 {
    height: 75%;
  }
  .grid-y > .medium-10 {
    height: 83.3333333333%;
  }
  .grid-y > .medium-11 {
    height: 91.6666666667%;
  }
  .grid-y > .medium-12 {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-auto {
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .large-12, .grid-y > .large-11, .grid-y > .large-10, .grid-y > .large-9, .grid-y > .large-8, .grid-y > .large-7, .grid-y > .large-6, .grid-y > .large-5, .grid-y > .large-4, .grid-y > .large-3, .grid-y > .large-2, .grid-y > .large-1, .grid-y > .large-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .large-shrink {
    height: auto;
  }
  .grid-y > .large-1 {
    height: 8.3333333333%;
  }
  .grid-y > .large-2 {
    height: 16.6666666667%;
  }
  .grid-y > .large-3 {
    height: 25%;
  }
  .grid-y > .large-4 {
    height: 33.3333333333%;
  }
  .grid-y > .large-5 {
    height: 41.6666666667%;
  }
  .grid-y > .large-6 {
    height: 50%;
  }
  .grid-y > .large-7 {
    height: 58.3333333333%;
  }
  .grid-y > .large-8 {
    height: 66.6666666667%;
  }
  .grid-y > .large-9 {
    height: 75%;
  }
  .grid-y > .large-10 {
    height: 83.3333333333%;
  }
  .grid-y > .large-11 {
    height: 91.6666666667%;
  }
  .grid-y > .large-12 {
    height: 100%;
  }
}

.grid-padding-y .grid-padding-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y .grid-padding-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-padding-y > .cell {
  padding-top: 10px;
  padding-top: 0.625rem;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y > .cell {
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
  }
}

.grid-margin-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 1.25rem);
  margin-top: 10px;
  margin-top: 0.625rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1.875rem);
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }
}
.grid-margin-y > .auto,.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 1.25rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 1.25rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 1.25rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 1.25rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 1.25rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 1.25rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 1.25rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 1.25rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 1.25rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 1.25rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 1.25rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto,.grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1.875rem);
  }
  .grid-margin-y > .medium-auto,.grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto,.grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}

.grid-frame {
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100vw;
  overflow: hidden;
}

.cell .grid-frame {
  width: 100%;
}

.cell-block {
  max-width: 100%;
  overflow-x: auto;
}

.cell-block,.cell-block-y {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-y {
  min-height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.cell-block-container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.cell-block-container > .grid-x {
  flex-wrap: nowrap;
  max-height: 100%;
}

@media print, screen and (min-width: 40em) {
  .medium-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
    overflow: hidden;
  }

  .cell .medium-grid-frame {
    width: 100%;
  }

  .medium-cell-block {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    max-width: 100%;
    overflow-x: auto;
  }

  .medium-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .medium-cell-block-container > .grid-x {
    flex-wrap: nowrap;
    max-height: 100%;
  }

  .medium-cell-block-y {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .large-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
    overflow: hidden;
  }

  .cell .large-grid-frame {
    width: 100%;
  }

  .large-cell-block {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    max-width: 100%;
    overflow-x: auto;
  }

  .large-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .large-cell-block-container > .grid-x {
    flex-wrap: nowrap;
    max-height: 100%;
  }

  .large-cell-block-y {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
}
.grid-y.grid-frame {
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  width: auto;
  height: 100vh;
  overflow: hidden;
}
@media print, screen and (min-width: 40em) {
  .grid-y.medium-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    height: 100vh;
    overflow: hidden;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y.large-grid-frame {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    height: 100vh;
    overflow: hidden;
  }
}

.cell .grid-y.grid-frame {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .cell .grid-y.medium-grid-frame {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .cell .grid-y.large-grid-frame {
    height: 100%;
  }
}

.grid-margin-y {
  margin-top: -10px;
  margin-top: -0.625rem;
  margin-bottom: -10px;
  margin-bottom: -0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.9375rem;
    margin-bottom: -0.9375rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 1.25rem);
  margin-top: 10px;
  margin-top: 0.625rem;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1.875rem);
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }
}
.grid-margin-y > .auto,.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 1.25rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 1.25rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 1.25rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 1.25rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 1.25rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 1.25rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 1.25rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 1.25rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 1.25rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 1.25rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 1.25rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto,.grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1.875rem);
  }
  .grid-margin-y > .medium-auto,.grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto,.grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}

.grid-frame.grid-margin-y {
  height: calc(100vh + 1.25rem);
}
@media print, screen and (min-width: 40em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 1.875rem);
  }
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y.medium-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y.large-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
.button {
  -webkit-appearance: none;
  display: inline-block;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  border: 1px solid transparent;
  border-radius: 0px;
  font-family: "Maven Pro", "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}
[data-whatinput=mouse] .button {
  outline: 0;
}
.button.tiny {
  font-size: 9.259px;
  font-size: 0.5787037037rem;
}
.button.small {
  font-size: 13.333px;
  font-size: 0.8333333333rem;
}
.button.large {
  font-size: 23.04px;
  font-size: 1.44rem;
}
.button.xlarge {
  font-size: 27.648px;
  font-size: 1.728rem;
}
.button.expanded {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
  background-color: #0088aa;
  color: white;
}
.button:hover, .button:focus {
  background-color: #007491;
  color: white;
}
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
  background-color: #0088aa;
  color: white;
}
.button.primary:hover, .button.primary:focus {
  background-color: #006d88;
  color: white;
}
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
  background-color: #e87d1e;
  color: #131212;
}
.button.secondary:hover, .button.secondary:focus {
  background-color: #be6413;
  color: #131212;
}
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
  background-color: #078a2e;
  color: white;
}
.button.success:hover, .button.success:focus {
  background-color: #066e25;
  color: white;
}
.button.shade, .button.shade.disabled, .button.shade[disabled], .button.shade.disabled:hover, .button.shade[disabled]:hover, .button.shade.disabled:focus, .button.shade[disabled]:focus {
  background-color: #8a817f;
  color: white;
}
.button.shade:hover, .button.shade:focus {
  background-color: #6f6765;
  color: white;
}
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
  background-color: #f4a122;
  color: #131212;
}
.button.warning:hover, .button.warning:focus {
  background-color: #d4840b;
  color: #131212;
}
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
  background-color: #990000;
  color: white;
}
.button.alert:hover, .button.alert:focus {
  background-color: #7a0000;
  color: white;
}
.button.navigation, .button.navigation.disabled, .button.navigation[disabled], .button.navigation.disabled:hover, .button.navigation[disabled]:hover, .button.navigation.disabled:focus, .button.navigation[disabled]:focus {
  background-color: #2b58c0;
  color: white;
}
.button.navigation:hover, .button.navigation:focus {
  background-color: #22469a;
  color: white;
}
.button.accent, .button.accent.disabled, .button.accent[disabled], .button.accent.disabled:hover, .button.accent[disabled]:hover, .button.accent.disabled:focus, .button.accent[disabled]:focus {
  background-color: #ffc425;
  color: #131212;
}
.button.accent:hover, .button.accent:focus {
  background-color: #eaaa00;
  color: #131212;
}
.button.info, .button.info.disabled, .button.info[disabled], .button.info.disabled:hover, .button.info[disabled]:hover, .button.info.disabled:focus, .button.info[disabled]:focus {
  background-color: #a3988c;
  color: #131212;
}
.button.info:hover, .button.info:focus {
  background-color: #877a6c;
  color: #131212;
}
.button.highlight, .button.highlight.disabled, .button.highlight[disabled], .button.highlight.disabled:hover, .button.highlight[disabled]:hover, .button.highlight.disabled:focus, .button.highlight[disabled]:focus {
  background-color: #05aee5;
  color: #131212;
}
.button.highlight:hover, .button.highlight:focus {
  background-color: #048bb7;
  color: #131212;
}
.button.acc, .button.acc.disabled, .button.acc[disabled], .button.acc.disabled:hover, .button.acc[disabled]:hover, .button.acc.disabled:focus, .button.acc[disabled]:focus {
  background-color: #004176;
  color: white;
}
.button.acc:hover, .button.acc:focus {
  background-color: #00345e;
  color: white;
}
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
  background-color: transparent;
}
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
  border: 1px solid #0088aa;
  color: #0088aa;
}
.button.hollow:hover, .button.hollow:focus {
  border-color: #004455;
  color: #004455;
}
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus, .button.hollow.primary[disabled]:focus {
  border: 1px solid #0088aa;
  color: #0088aa;
}
.button.hollow.primary:hover, .button.hollow.primary:focus {
  border-color: #004455;
  color: #004455;
}
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus {
  border: 1px solid #e87d1e;
  color: #e87d1e;
}
.button.hollow.secondary:hover, .button.hollow.secondary:focus {
  border-color: #773e0c;
  color: #773e0c;
}
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus, .button.hollow.success[disabled]:focus {
  border: 1px solid #078a2e;
  color: #078a2e;
}
.button.hollow.success:hover, .button.hollow.success:focus {
  border-color: #044517;
  color: #044517;
}
.button.hollow.shade, .button.hollow.shade.disabled, .button.hollow.shade[disabled], .button.hollow.shade.disabled:hover, .button.hollow.shade[disabled]:hover, .button.hollow.shade.disabled:focus, .button.hollow.shade[disabled]:focus {
  border: 1px solid #8a817f;
  color: #8a817f;
}
.button.hollow.shade:hover, .button.hollow.shade:focus {
  border-color: #45403f;
  color: #45403f;
}
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus, .button.hollow.warning[disabled]:focus {
  border: 1px solid #f4a122;
  color: #f4a122;
}
.button.hollow.warning:hover, .button.hollow.warning:focus {
  border-color: #845307;
  color: #845307;
}
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus, .button.hollow.alert[disabled]:focus {
  border: 1px solid #990000;
  color: #990000;
}
.button.hollow.alert:hover, .button.hollow.alert:focus {
  border-color: #4d0000;
  color: #4d0000;
}
.button.hollow.navigation, .button.hollow.navigation.disabled, .button.hollow.navigation[disabled], .button.hollow.navigation.disabled:hover, .button.hollow.navigation[disabled]:hover, .button.hollow.navigation.disabled:focus, .button.hollow.navigation[disabled]:focus {
  border: 1px solid #2b58c0;
  color: #2b58c0;
}
.button.hollow.navigation:hover, .button.hollow.navigation:focus {
  border-color: #162c60;
  color: #162c60;
}
.button.hollow.accent, .button.hollow.accent.disabled, .button.hollow.accent[disabled], .button.hollow.accent.disabled:hover, .button.hollow.accent[disabled]:hover, .button.hollow.accent.disabled:focus, .button.hollow.accent[disabled]:focus {
  border: 1px solid #ffc425;
  color: #ffc425;
}
.button.hollow.accent:hover, .button.hollow.accent:focus {
  border-color: #926a00;
  color: #926a00;
}
.button.hollow.info, .button.hollow.info.disabled, .button.hollow.info[disabled], .button.hollow.info.disabled:hover, .button.hollow.info[disabled]:hover, .button.hollow.info.disabled:focus, .button.hollow.info[disabled]:focus {
  border: 1px solid #a3988c;
  color: #a3988c;
}
.button.hollow.info:hover, .button.hollow.info:focus {
  border-color: #544c43;
  color: #544c43;
}
.button.hollow.highlight, .button.hollow.highlight.disabled, .button.hollow.highlight[disabled], .button.hollow.highlight.disabled:hover, .button.hollow.highlight[disabled]:hover, .button.hollow.highlight.disabled:focus, .button.hollow.highlight[disabled]:focus {
  border: 1px solid #05aee5;
  color: #05aee5;
}
.button.hollow.highlight:hover, .button.hollow.highlight:focus {
  border-color: #035773;
  color: #035773;
}
.button.hollow.acc, .button.hollow.acc.disabled, .button.hollow.acc[disabled], .button.hollow.acc.disabled:hover, .button.hollow.acc[disabled]:hover, .button.hollow.acc.disabled:focus, .button.hollow.acc[disabled]:focus {
  border: 1px solid #004176;
  color: #004176;
}
.button.hollow.acc:hover, .button.hollow.acc:focus {
  border-color: #00213b;
  color: #00213b;
}
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus, .button.clear[disabled]:focus {
  color: #0088aa;
}
.button.clear:hover, .button.clear:focus {
  color: #004455;
}
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus, .button.clear.primary[disabled]:focus {
  color: #0088aa;
}
.button.clear.primary:hover, .button.clear.primary:focus {
  color: #004455;
}
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus, .button.clear.secondary[disabled]:focus {
  color: #e87d1e;
}
.button.clear.secondary:hover, .button.clear.secondary:focus {
  color: #773e0c;
}
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus, .button.clear.success[disabled]:focus {
  color: #078a2e;
}
.button.clear.success:hover, .button.clear.success:focus {
  color: #044517;
}
.button.clear.shade, .button.clear.shade.disabled, .button.clear.shade[disabled], .button.clear.shade.disabled:hover, .button.clear.shade[disabled]:hover, .button.clear.shade.disabled:focus, .button.clear.shade[disabled]:focus {
  color: #8a817f;
}
.button.clear.shade:hover, .button.clear.shade:focus {
  color: #45403f;
}
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus, .button.clear.warning[disabled]:focus {
  color: #f4a122;
}
.button.clear.warning:hover, .button.clear.warning:focus {
  color: #845307;
}
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus, .button.clear.alert[disabled]:focus {
  color: #990000;
}
.button.clear.alert:hover, .button.clear.alert:focus {
  color: #4d0000;
}
.button.clear.navigation, .button.clear.navigation.disabled, .button.clear.navigation[disabled], .button.clear.navigation.disabled:hover, .button.clear.navigation[disabled]:hover, .button.clear.navigation.disabled:focus, .button.clear.navigation[disabled]:focus {
  color: #2b58c0;
}
.button.clear.navigation:hover, .button.clear.navigation:focus {
  color: #162c60;
}
.button.clear.accent, .button.clear.accent.disabled, .button.clear.accent[disabled], .button.clear.accent.disabled:hover, .button.clear.accent[disabled]:hover, .button.clear.accent.disabled:focus, .button.clear.accent[disabled]:focus {
  color: #ffc425;
}
.button.clear.accent:hover, .button.clear.accent:focus {
  color: #926a00;
}
.button.clear.info, .button.clear.info.disabled, .button.clear.info[disabled], .button.clear.info.disabled:hover, .button.clear.info[disabled]:hover, .button.clear.info.disabled:focus, .button.clear.info[disabled]:focus {
  color: #a3988c;
}
.button.clear.info:hover, .button.clear.info:focus {
  color: #544c43;
}
.button.clear.highlight, .button.clear.highlight.disabled, .button.clear.highlight[disabled], .button.clear.highlight.disabled:hover, .button.clear.highlight[disabled]:hover, .button.clear.highlight.disabled:focus, .button.clear.highlight[disabled]:focus {
  color: #05aee5;
}
.button.clear.highlight:hover, .button.clear.highlight:focus {
  color: #035773;
}
.button.clear.acc, .button.clear.acc.disabled, .button.clear.acc[disabled], .button.clear.acc.disabled:hover, .button.clear.acc[disabled]:hover, .button.clear.acc.disabled:focus, .button.clear.acc[disabled]:focus {
  color: #004176;
}
.button.clear.acc:hover, .button.clear.acc:focus {
  color: #00213b;
}
.button.disabled, .button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}
.button.dropdown::after {
  display: block;
  display: inline-block;
  position: relative;
  top: 0.4em;
  width: 0;
  height: 0;
  margin-left: 1em;
  float: right;
  border: inset 0.4em;
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: white transparent transparent;
  content: "";
}
.button.dropdown.hollow::after, .button.dropdown.clear::after,.button.dropdown.hollow.primary::after, .button.dropdown.clear.primary::after {
  border-top-color: #0088aa;
}
.button.dropdown.hollow.secondary::after, .button.dropdown.clear.secondary::after {
  border-top-color: #e87d1e;
}
.button.dropdown.hollow.success::after, .button.dropdown.clear.success::after {
  border-top-color: #078a2e;
}
.button.dropdown.hollow.shade::after, .button.dropdown.clear.shade::after {
  border-top-color: #8a817f;
}
.button.dropdown.hollow.warning::after, .button.dropdown.clear.warning::after {
  border-top-color: #f4a122;
}
.button.dropdown.hollow.alert::after, .button.dropdown.clear.alert::after {
  border-top-color: #990000;
}
.button.dropdown.hollow.navigation::after, .button.dropdown.clear.navigation::after {
  border-top-color: #2b58c0;
}
.button.dropdown.hollow.accent::after, .button.dropdown.clear.accent::after {
  border-top-color: #ffc425;
}
.button.dropdown.hollow.info::after, .button.dropdown.clear.info::after {
  border-top-color: #a3988c;
}
.button.dropdown.hollow.highlight::after, .button.dropdown.clear.highlight::after {
  border-top-color: #05aee5;
}
.button.dropdown.hollow.acc::after, .button.dropdown.clear.acc::after {
  border-top-color: #004176;
}
.button.arrow-only::after {
  top: -0.1em;
  margin-left: 0;
  float: none;
}

a.button:hover, a.button:focus {
  text-decoration: none;
}

.button-group {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.button-group::before, .button-group::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.button-group::after {
  clear: both;
}
.button-group::before, .button-group::after {
  display: none;
}
.button-group .button {
  flex: 0 0 auto;
  margin: 0;
  margin-right: 1px;
  margin-bottom: 1px;
  font-size: 16px;
  font-size: 1rem;
}
.button-group .button:last-child {
  margin-right: 0;
}
.button-group.tiny .button {
  font-size: 9.259px;
  font-size: 0.5787037037rem;
}
.button-group.small .button {
  font-size: 13.333px;
  font-size: 0.8333333333rem;
}
.button-group.large .button {
  font-size: 23.04px;
  font-size: 1.44rem;
}
.button-group.xlarge .button {
  font-size: 27.648px;
  font-size: 1.728rem;
}
.button-group.expanded .button {
  flex: 1 1 0px;
  margin-right: 0;
}
.button-group.primary .button, .button-group.primary .button.disabled, .button-group.primary .button[disabled], .button-group.primary .button.disabled:hover, .button-group.primary .button[disabled]:hover, .button-group.primary .button.disabled:focus, .button-group.primary .button[disabled]:focus {
  background-color: #0088aa;
  color: white;
}
.button-group.primary .button:hover, .button-group.primary .button:focus {
  background-color: #006d88;
  color: white;
}
.button-group.secondary .button, .button-group.secondary .button.disabled, .button-group.secondary .button[disabled], .button-group.secondary .button.disabled:hover, .button-group.secondary .button[disabled]:hover, .button-group.secondary .button.disabled:focus, .button-group.secondary .button[disabled]:focus {
  background-color: #e87d1e;
  color: #131212;
}
.button-group.secondary .button:hover, .button-group.secondary .button:focus {
  background-color: #be6413;
  color: #131212;
}
.button-group.success .button, .button-group.success .button.disabled, .button-group.success .button[disabled], .button-group.success .button.disabled:hover, .button-group.success .button[disabled]:hover, .button-group.success .button.disabled:focus, .button-group.success .button[disabled]:focus {
  background-color: #078a2e;
  color: white;
}
.button-group.success .button:hover, .button-group.success .button:focus {
  background-color: #066e25;
  color: white;
}
.button-group.shade .button, .button-group.shade .button.disabled, .button-group.shade .button[disabled], .button-group.shade .button.disabled:hover, .button-group.shade .button[disabled]:hover, .button-group.shade .button.disabled:focus, .button-group.shade .button[disabled]:focus {
  background-color: #8a817f;
  color: white;
}
.button-group.shade .button:hover, .button-group.shade .button:focus {
  background-color: #6f6765;
  color: white;
}
.button-group.warning .button, .button-group.warning .button.disabled, .button-group.warning .button[disabled], .button-group.warning .button.disabled:hover, .button-group.warning .button[disabled]:hover, .button-group.warning .button.disabled:focus, .button-group.warning .button[disabled]:focus {
  background-color: #f4a122;
  color: #131212;
}
.button-group.warning .button:hover, .button-group.warning .button:focus {
  background-color: #d4840b;
  color: #131212;
}
.button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover, .button-group.alert .button[disabled]:hover, .button-group.alert .button.disabled:focus, .button-group.alert .button[disabled]:focus {
  background-color: #990000;
  color: white;
}
.button-group.alert .button:hover, .button-group.alert .button:focus {
  background-color: #7a0000;
  color: white;
}
.button-group.navigation .button, .button-group.navigation .button.disabled, .button-group.navigation .button[disabled], .button-group.navigation .button.disabled:hover, .button-group.navigation .button[disabled]:hover, .button-group.navigation .button.disabled:focus, .button-group.navigation .button[disabled]:focus {
  background-color: #2b58c0;
  color: white;
}
.button-group.navigation .button:hover, .button-group.navigation .button:focus {
  background-color: #22469a;
  color: white;
}
.button-group.accent .button, .button-group.accent .button.disabled, .button-group.accent .button[disabled], .button-group.accent .button.disabled:hover, .button-group.accent .button[disabled]:hover, .button-group.accent .button.disabled:focus, .button-group.accent .button[disabled]:focus {
  background-color: #ffc425;
  color: #131212;
}
.button-group.accent .button:hover, .button-group.accent .button:focus {
  background-color: #eaaa00;
  color: #131212;
}
.button-group.info .button, .button-group.info .button.disabled, .button-group.info .button[disabled], .button-group.info .button.disabled:hover, .button-group.info .button[disabled]:hover, .button-group.info .button.disabled:focus, .button-group.info .button[disabled]:focus {
  background-color: #a3988c;
  color: #131212;
}
.button-group.info .button:hover, .button-group.info .button:focus {
  background-color: #877a6c;
  color: #131212;
}
.button-group.highlight .button, .button-group.highlight .button.disabled, .button-group.highlight .button[disabled], .button-group.highlight .button.disabled:hover, .button-group.highlight .button[disabled]:hover, .button-group.highlight .button.disabled:focus, .button-group.highlight .button[disabled]:focus {
  background-color: #05aee5;
  color: #131212;
}
.button-group.highlight .button:hover, .button-group.highlight .button:focus {
  background-color: #048bb7;
  color: #131212;
}
.button-group.acc .button, .button-group.acc .button.disabled, .button-group.acc .button[disabled], .button-group.acc .button.disabled:hover, .button-group.acc .button[disabled]:hover, .button-group.acc .button.disabled:focus, .button-group.acc .button[disabled]:focus {
  background-color: #004176;
  color: white;
}
.button-group.acc .button:hover, .button-group.acc .button:focus {
  background-color: #00345e;
  color: white;
}
.button-group.hollow .button, .button-group.hollow .button:hover, .button-group.hollow .button:focus, .button-group.hollow .button.disabled, .button-group.hollow .button.disabled:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled], .button-group.hollow .button[disabled]:hover, .button-group.hollow .button[disabled]:focus {
  background-color: transparent;
}
.button-group.hollow .button, .button-group.hollow .button.disabled, .button-group.hollow .button[disabled], .button-group.hollow .button.disabled:hover, .button-group.hollow .button[disabled]:hover, .button-group.hollow .button.disabled:focus, .button-group.hollow .button[disabled]:focus {
  border: 1px solid #0088aa;
  color: #0088aa;
}
.button-group.hollow .button:hover, .button-group.hollow .button:focus {
  border-color: #004455;
  color: #004455;
}
.button-group.hollow.primary .button, .button-group.hollow.primary .button.disabled, .button-group.hollow.primary .button[disabled], .button-group.hollow.primary .button.disabled:hover, .button-group.hollow.primary .button[disabled]:hover, .button-group.hollow.primary .button.disabled:focus, .button-group.hollow.primary .button[disabled]:focus, .button-group.hollow .button.primary, .button-group.hollow .button.primary.disabled, .button-group.hollow .button.primary[disabled], .button-group.hollow .button.primary.disabled:hover, .button-group.hollow .button.primary[disabled]:hover, .button-group.hollow .button.primary.disabled:focus, .button-group.hollow .button.primary[disabled]:focus {
  border: 1px solid #0088aa;
  color: #0088aa;
}
.button-group.hollow.primary .button:hover, .button-group.hollow.primary .button:focus, .button-group.hollow .button.primary:hover, .button-group.hollow .button.primary:focus {
  border-color: #004455;
  color: #004455;
}
.button-group.hollow.secondary .button, .button-group.hollow.secondary .button.disabled, .button-group.hollow.secondary .button[disabled], .button-group.hollow.secondary .button.disabled:hover, .button-group.hollow.secondary .button[disabled]:hover, .button-group.hollow.secondary .button.disabled:focus, .button-group.hollow.secondary .button[disabled]:focus, .button-group.hollow .button.secondary, .button-group.hollow .button.secondary.disabled, .button-group.hollow .button.secondary[disabled], .button-group.hollow .button.secondary.disabled:hover, .button-group.hollow .button.secondary[disabled]:hover, .button-group.hollow .button.secondary.disabled:focus, .button-group.hollow .button.secondary[disabled]:focus {
  border: 1px solid #e87d1e;
  color: #e87d1e;
}
.button-group.hollow.secondary .button:hover, .button-group.hollow.secondary .button:focus, .button-group.hollow .button.secondary:hover, .button-group.hollow .button.secondary:focus {
  border-color: #773e0c;
  color: #773e0c;
}
.button-group.hollow.success .button, .button-group.hollow.success .button.disabled, .button-group.hollow.success .button[disabled], .button-group.hollow.success .button.disabled:hover, .button-group.hollow.success .button[disabled]:hover, .button-group.hollow.success .button.disabled:focus, .button-group.hollow.success .button[disabled]:focus, .button-group.hollow .button.success, .button-group.hollow .button.success.disabled, .button-group.hollow .button.success[disabled], .button-group.hollow .button.success.disabled:hover, .button-group.hollow .button.success[disabled]:hover, .button-group.hollow .button.success.disabled:focus, .button-group.hollow .button.success[disabled]:focus {
  border: 1px solid #078a2e;
  color: #078a2e;
}
.button-group.hollow.success .button:hover, .button-group.hollow.success .button:focus, .button-group.hollow .button.success:hover, .button-group.hollow .button.success:focus {
  border-color: #044517;
  color: #044517;
}
.button-group.hollow.shade .button, .button-group.hollow.shade .button.disabled, .button-group.hollow.shade .button[disabled], .button-group.hollow.shade .button.disabled:hover, .button-group.hollow.shade .button[disabled]:hover, .button-group.hollow.shade .button.disabled:focus, .button-group.hollow.shade .button[disabled]:focus, .button-group.hollow .button.shade, .button-group.hollow .button.shade.disabled, .button-group.hollow .button.shade[disabled], .button-group.hollow .button.shade.disabled:hover, .button-group.hollow .button.shade[disabled]:hover, .button-group.hollow .button.shade.disabled:focus, .button-group.hollow .button.shade[disabled]:focus {
  border: 1px solid #8a817f;
  color: #8a817f;
}
.button-group.hollow.shade .button:hover, .button-group.hollow.shade .button:focus, .button-group.hollow .button.shade:hover, .button-group.hollow .button.shade:focus {
  border-color: #45403f;
  color: #45403f;
}
.button-group.hollow.warning .button, .button-group.hollow.warning .button.disabled, .button-group.hollow.warning .button[disabled], .button-group.hollow.warning .button.disabled:hover, .button-group.hollow.warning .button[disabled]:hover, .button-group.hollow.warning .button.disabled:focus, .button-group.hollow.warning .button[disabled]:focus, .button-group.hollow .button.warning, .button-group.hollow .button.warning.disabled, .button-group.hollow .button.warning[disabled], .button-group.hollow .button.warning.disabled:hover, .button-group.hollow .button.warning[disabled]:hover, .button-group.hollow .button.warning.disabled:focus, .button-group.hollow .button.warning[disabled]:focus {
  border: 1px solid #f4a122;
  color: #f4a122;
}
.button-group.hollow.warning .button:hover, .button-group.hollow.warning .button:focus, .button-group.hollow .button.warning:hover, .button-group.hollow .button.warning:focus {
  border-color: #845307;
  color: #845307;
}
.button-group.hollow.alert .button, .button-group.hollow.alert .button.disabled, .button-group.hollow.alert .button[disabled], .button-group.hollow.alert .button.disabled:hover, .button-group.hollow.alert .button[disabled]:hover, .button-group.hollow.alert .button.disabled:focus, .button-group.hollow.alert .button[disabled]:focus, .button-group.hollow .button.alert, .button-group.hollow .button.alert.disabled, .button-group.hollow .button.alert[disabled], .button-group.hollow .button.alert.disabled:hover, .button-group.hollow .button.alert[disabled]:hover, .button-group.hollow .button.alert.disabled:focus, .button-group.hollow .button.alert[disabled]:focus {
  border: 1px solid #990000;
  color: #990000;
}
.button-group.hollow.alert .button:hover, .button-group.hollow.alert .button:focus, .button-group.hollow .button.alert:hover, .button-group.hollow .button.alert:focus {
  border-color: #4d0000;
  color: #4d0000;
}
.button-group.hollow.navigation .button, .button-group.hollow.navigation .button.disabled, .button-group.hollow.navigation .button[disabled], .button-group.hollow.navigation .button.disabled:hover, .button-group.hollow.navigation .button[disabled]:hover, .button-group.hollow.navigation .button.disabled:focus, .button-group.hollow.navigation .button[disabled]:focus, .button-group.hollow .button.navigation, .button-group.hollow .button.navigation.disabled, .button-group.hollow .button.navigation[disabled], .button-group.hollow .button.navigation.disabled:hover, .button-group.hollow .button.navigation[disabled]:hover, .button-group.hollow .button.navigation.disabled:focus, .button-group.hollow .button.navigation[disabled]:focus {
  border: 1px solid #2b58c0;
  color: #2b58c0;
}
.button-group.hollow.navigation .button:hover, .button-group.hollow.navigation .button:focus, .button-group.hollow .button.navigation:hover, .button-group.hollow .button.navigation:focus {
  border-color: #162c60;
  color: #162c60;
}
.button-group.hollow.accent .button, .button-group.hollow.accent .button.disabled, .button-group.hollow.accent .button[disabled], .button-group.hollow.accent .button.disabled:hover, .button-group.hollow.accent .button[disabled]:hover, .button-group.hollow.accent .button.disabled:focus, .button-group.hollow.accent .button[disabled]:focus, .button-group.hollow .button.accent, .button-group.hollow .button.accent.disabled, .button-group.hollow .button.accent[disabled], .button-group.hollow .button.accent.disabled:hover, .button-group.hollow .button.accent[disabled]:hover, .button-group.hollow .button.accent.disabled:focus, .button-group.hollow .button.accent[disabled]:focus {
  border: 1px solid #ffc425;
  color: #ffc425;
}
.button-group.hollow.accent .button:hover, .button-group.hollow.accent .button:focus, .button-group.hollow .button.accent:hover, .button-group.hollow .button.accent:focus {
  border-color: #926a00;
  color: #926a00;
}
.button-group.hollow.info .button, .button-group.hollow.info .button.disabled, .button-group.hollow.info .button[disabled], .button-group.hollow.info .button.disabled:hover, .button-group.hollow.info .button[disabled]:hover, .button-group.hollow.info .button.disabled:focus, .button-group.hollow.info .button[disabled]:focus, .button-group.hollow .button.info, .button-group.hollow .button.info.disabled, .button-group.hollow .button.info[disabled], .button-group.hollow .button.info.disabled:hover, .button-group.hollow .button.info[disabled]:hover, .button-group.hollow .button.info.disabled:focus, .button-group.hollow .button.info[disabled]:focus {
  border: 1px solid #a3988c;
  color: #a3988c;
}
.button-group.hollow.info .button:hover, .button-group.hollow.info .button:focus, .button-group.hollow .button.info:hover, .button-group.hollow .button.info:focus {
  border-color: #544c43;
  color: #544c43;
}
.button-group.hollow.highlight .button, .button-group.hollow.highlight .button.disabled, .button-group.hollow.highlight .button[disabled], .button-group.hollow.highlight .button.disabled:hover, .button-group.hollow.highlight .button[disabled]:hover, .button-group.hollow.highlight .button.disabled:focus, .button-group.hollow.highlight .button[disabled]:focus, .button-group.hollow .button.highlight, .button-group.hollow .button.highlight.disabled, .button-group.hollow .button.highlight[disabled], .button-group.hollow .button.highlight.disabled:hover, .button-group.hollow .button.highlight[disabled]:hover, .button-group.hollow .button.highlight.disabled:focus, .button-group.hollow .button.highlight[disabled]:focus {
  border: 1px solid #05aee5;
  color: #05aee5;
}
.button-group.hollow.highlight .button:hover, .button-group.hollow.highlight .button:focus, .button-group.hollow .button.highlight:hover, .button-group.hollow .button.highlight:focus {
  border-color: #035773;
  color: #035773;
}
.button-group.hollow.acc .button, .button-group.hollow.acc .button.disabled, .button-group.hollow.acc .button[disabled], .button-group.hollow.acc .button.disabled:hover, .button-group.hollow.acc .button[disabled]:hover, .button-group.hollow.acc .button.disabled:focus, .button-group.hollow.acc .button[disabled]:focus, .button-group.hollow .button.acc, .button-group.hollow .button.acc.disabled, .button-group.hollow .button.acc[disabled], .button-group.hollow .button.acc.disabled:hover, .button-group.hollow .button.acc[disabled]:hover, .button-group.hollow .button.acc.disabled:focus, .button-group.hollow .button.acc[disabled]:focus {
  border: 1px solid #004176;
  color: #004176;
}
.button-group.hollow.acc .button:hover, .button-group.hollow.acc .button:focus, .button-group.hollow .button.acc:hover, .button-group.hollow .button.acc:focus {
  border-color: #00213b;
  color: #00213b;
}
.button-group.clear .button, .button-group.clear .button:hover, .button-group.clear .button:focus, .button-group.clear .button.disabled, .button-group.clear .button.disabled:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[disabled], .button-group.clear .button[disabled]:hover, .button-group.clear .button[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}
.button-group.clear .button, .button-group.clear .button.disabled, .button-group.clear .button[disabled], .button-group.clear .button.disabled:hover, .button-group.clear .button[disabled]:hover, .button-group.clear .button.disabled:focus, .button-group.clear .button[disabled]:focus {
  color: #0088aa;
}
.button-group.clear .button:hover, .button-group.clear .button:focus {
  color: #004455;
}
.button-group.clear.primary .button, .button-group.clear.primary .button.disabled, .button-group.clear.primary .button[disabled], .button-group.clear.primary .button.disabled:hover, .button-group.clear.primary .button[disabled]:hover, .button-group.clear.primary .button.disabled:focus, .button-group.clear.primary .button[disabled]:focus, .button-group.clear .button.primary, .button-group.clear .button.primary.disabled, .button-group.clear .button.primary[disabled], .button-group.clear .button.primary.disabled:hover, .button-group.clear .button.primary[disabled]:hover, .button-group.clear .button.primary.disabled:focus, .button-group.clear .button.primary[disabled]:focus {
  color: #0088aa;
}
.button-group.clear.primary .button:hover, .button-group.clear.primary .button:focus, .button-group.clear .button.primary:hover, .button-group.clear .button.primary:focus {
  color: #004455;
}
.button-group.clear.secondary .button, .button-group.clear.secondary .button.disabled, .button-group.clear.secondary .button[disabled], .button-group.clear.secondary .button.disabled:hover, .button-group.clear.secondary .button[disabled]:hover, .button-group.clear.secondary .button.disabled:focus, .button-group.clear.secondary .button[disabled]:focus, .button-group.clear .button.secondary, .button-group.clear .button.secondary.disabled, .button-group.clear .button.secondary[disabled], .button-group.clear .button.secondary.disabled:hover, .button-group.clear .button.secondary[disabled]:hover, .button-group.clear .button.secondary.disabled:focus, .button-group.clear .button.secondary[disabled]:focus {
  color: #e87d1e;
}
.button-group.clear.secondary .button:hover, .button-group.clear.secondary .button:focus, .button-group.clear .button.secondary:hover, .button-group.clear .button.secondary:focus {
  color: #773e0c;
}
.button-group.clear.success .button, .button-group.clear.success .button.disabled, .button-group.clear.success .button[disabled], .button-group.clear.success .button.disabled:hover, .button-group.clear.success .button[disabled]:hover, .button-group.clear.success .button.disabled:focus, .button-group.clear.success .button[disabled]:focus, .button-group.clear .button.success, .button-group.clear .button.success.disabled, .button-group.clear .button.success[disabled], .button-group.clear .button.success.disabled:hover, .button-group.clear .button.success[disabled]:hover, .button-group.clear .button.success.disabled:focus, .button-group.clear .button.success[disabled]:focus {
  color: #078a2e;
}
.button-group.clear.success .button:hover, .button-group.clear.success .button:focus, .button-group.clear .button.success:hover, .button-group.clear .button.success:focus {
  color: #044517;
}
.button-group.clear.shade .button, .button-group.clear.shade .button.disabled, .button-group.clear.shade .button[disabled], .button-group.clear.shade .button.disabled:hover, .button-group.clear.shade .button[disabled]:hover, .button-group.clear.shade .button.disabled:focus, .button-group.clear.shade .button[disabled]:focus, .button-group.clear .button.shade, .button-group.clear .button.shade.disabled, .button-group.clear .button.shade[disabled], .button-group.clear .button.shade.disabled:hover, .button-group.clear .button.shade[disabled]:hover, .button-group.clear .button.shade.disabled:focus, .button-group.clear .button.shade[disabled]:focus {
  color: #8a817f;
}
.button-group.clear.shade .button:hover, .button-group.clear.shade .button:focus, .button-group.clear .button.shade:hover, .button-group.clear .button.shade:focus {
  color: #45403f;
}
.button-group.clear.warning .button, .button-group.clear.warning .button.disabled, .button-group.clear.warning .button[disabled], .button-group.clear.warning .button.disabled:hover, .button-group.clear.warning .button[disabled]:hover, .button-group.clear.warning .button.disabled:focus, .button-group.clear.warning .button[disabled]:focus, .button-group.clear .button.warning, .button-group.clear .button.warning.disabled, .button-group.clear .button.warning[disabled], .button-group.clear .button.warning.disabled:hover, .button-group.clear .button.warning[disabled]:hover, .button-group.clear .button.warning.disabled:focus, .button-group.clear .button.warning[disabled]:focus {
  color: #f4a122;
}
.button-group.clear.warning .button:hover, .button-group.clear.warning .button:focus, .button-group.clear .button.warning:hover, .button-group.clear .button.warning:focus {
  color: #845307;
}
.button-group.clear.alert .button, .button-group.clear.alert .button.disabled, .button-group.clear.alert .button[disabled], .button-group.clear.alert .button.disabled:hover, .button-group.clear.alert .button[disabled]:hover, .button-group.clear.alert .button.disabled:focus, .button-group.clear.alert .button[disabled]:focus, .button-group.clear .button.alert, .button-group.clear .button.alert.disabled, .button-group.clear .button.alert[disabled], .button-group.clear .button.alert.disabled:hover, .button-group.clear .button.alert[disabled]:hover, .button-group.clear .button.alert.disabled:focus, .button-group.clear .button.alert[disabled]:focus {
  color: #990000;
}
.button-group.clear.alert .button:hover, .button-group.clear.alert .button:focus, .button-group.clear .button.alert:hover, .button-group.clear .button.alert:focus {
  color: #4d0000;
}
.button-group.clear.navigation .button, .button-group.clear.navigation .button.disabled, .button-group.clear.navigation .button[disabled], .button-group.clear.navigation .button.disabled:hover, .button-group.clear.navigation .button[disabled]:hover, .button-group.clear.navigation .button.disabled:focus, .button-group.clear.navigation .button[disabled]:focus, .button-group.clear .button.navigation, .button-group.clear .button.navigation.disabled, .button-group.clear .button.navigation[disabled], .button-group.clear .button.navigation.disabled:hover, .button-group.clear .button.navigation[disabled]:hover, .button-group.clear .button.navigation.disabled:focus, .button-group.clear .button.navigation[disabled]:focus {
  color: #2b58c0;
}
.button-group.clear.navigation .button:hover, .button-group.clear.navigation .button:focus, .button-group.clear .button.navigation:hover, .button-group.clear .button.navigation:focus {
  color: #162c60;
}
.button-group.clear.accent .button, .button-group.clear.accent .button.disabled, .button-group.clear.accent .button[disabled], .button-group.clear.accent .button.disabled:hover, .button-group.clear.accent .button[disabled]:hover, .button-group.clear.accent .button.disabled:focus, .button-group.clear.accent .button[disabled]:focus, .button-group.clear .button.accent, .button-group.clear .button.accent.disabled, .button-group.clear .button.accent[disabled], .button-group.clear .button.accent.disabled:hover, .button-group.clear .button.accent[disabled]:hover, .button-group.clear .button.accent.disabled:focus, .button-group.clear .button.accent[disabled]:focus {
  color: #ffc425;
}
.button-group.clear.accent .button:hover, .button-group.clear.accent .button:focus, .button-group.clear .button.accent:hover, .button-group.clear .button.accent:focus {
  color: #926a00;
}
.button-group.clear.info .button, .button-group.clear.info .button.disabled, .button-group.clear.info .button[disabled], .button-group.clear.info .button.disabled:hover, .button-group.clear.info .button[disabled]:hover, .button-group.clear.info .button.disabled:focus, .button-group.clear.info .button[disabled]:focus, .button-group.clear .button.info, .button-group.clear .button.info.disabled, .button-group.clear .button.info[disabled], .button-group.clear .button.info.disabled:hover, .button-group.clear .button.info[disabled]:hover, .button-group.clear .button.info.disabled:focus, .button-group.clear .button.info[disabled]:focus {
  color: #a3988c;
}
.button-group.clear.info .button:hover, .button-group.clear.info .button:focus, .button-group.clear .button.info:hover, .button-group.clear .button.info:focus {
  color: #544c43;
}
.button-group.clear.highlight .button, .button-group.clear.highlight .button.disabled, .button-group.clear.highlight .button[disabled], .button-group.clear.highlight .button.disabled:hover, .button-group.clear.highlight .button[disabled]:hover, .button-group.clear.highlight .button.disabled:focus, .button-group.clear.highlight .button[disabled]:focus, .button-group.clear .button.highlight, .button-group.clear .button.highlight.disabled, .button-group.clear .button.highlight[disabled], .button-group.clear .button.highlight.disabled:hover, .button-group.clear .button.highlight[disabled]:hover, .button-group.clear .button.highlight.disabled:focus, .button-group.clear .button.highlight[disabled]:focus {
  color: #05aee5;
}
.button-group.clear.highlight .button:hover, .button-group.clear.highlight .button:focus, .button-group.clear .button.highlight:hover, .button-group.clear .button.highlight:focus {
  color: #035773;
}
.button-group.clear.acc .button, .button-group.clear.acc .button.disabled, .button-group.clear.acc .button[disabled], .button-group.clear.acc .button.disabled:hover, .button-group.clear.acc .button[disabled]:hover, .button-group.clear.acc .button.disabled:focus, .button-group.clear.acc .button[disabled]:focus, .button-group.clear .button.acc, .button-group.clear .button.acc.disabled, .button-group.clear .button.acc[disabled], .button-group.clear .button.acc.disabled:hover, .button-group.clear .button.acc[disabled]:hover, .button-group.clear .button.acc.disabled:focus, .button-group.clear .button.acc[disabled]:focus {
  color: #004176;
}
.button-group.clear.acc .button:hover, .button-group.clear.acc .button:focus, .button-group.clear .button.acc:hover, .button-group.clear .button.acc:focus {
  color: #00213b;
}
.button-group.no-gaps .button {
  margin-right: -1px;
  margin-right: -0.0625rem;
}
.button-group.no-gaps .button + .button {
  border-left-color: transparent;
}
.button-group.stacked, .button-group.stacked-for-small, .button-group.stacked-for-medium {
  flex-wrap: wrap;
}
.button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
  flex: 0 0 100%;
}
.button-group.stacked .button:last-child, .button-group.stacked-for-small .button:last-child, .button-group.stacked-for-medium .button:last-child {
  margin-bottom: 0;
}
.button-group.stacked.expanded .button, .button-group.stacked-for-small.expanded .button, .button-group.stacked-for-medium.expanded .button {
  flex: 1 1 0px;
  margin-right: 0;
}
@media print, screen and (min-width: 40em) {
  .button-group.stacked-for-small .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .button-group.stacked-for-medium .button {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
}
@media print, screen and (max-width: 39.99875em) {
  .button-group.stacked-for-small.expanded {
    display: block;
  }
  .button-group.stacked-for-small.expanded .button {
    display: block;
    margin-right: 0;
  }
}
@media print, screen and (max-width: 63.99875em) {
  .button-group.stacked-for-medium.expanded {
    display: block;
  }
  .button-group.stacked-for-medium.expanded .button {
    display: block;
    margin-right: 0;
  }
}

.close-button {
  z-index: 10;
  position: absolute;
  color: #80c4d5;
  cursor: pointer;
}
[data-whatinput=mouse] .close-button {
  outline: 0;
}
.close-button:hover, .close-button:focus {
  color: white;
}
.close-button.small {
  top: 0em;
  right: 0px;
  right: 0rem;
  font-size: 1.2em;
  line-height: 1;
}

.close-button, .close-button.medium {
  top: 0px;
  top: 0rem;
  right: 0px;
  right: 0rem;
  font-size: 1.44em;
  line-height: 1;
}

.label {
  display: inline-block;
  padding: 5.333px 8px;
  padding: 0.33333rem 0.5rem;
  border-radius: 0px;
  font-size: 12.8px;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}
.label,.label.primary {
  background: #0088aa;
  color: white;
}
.label.secondary {
  background: #e87d1e;
  color: #131212;
}
.label.success {
  background: #078a2e;
  color: white;
}
.label.shade {
  background: #8a817f;
  color: white;
}
.label.warning {
  background: #f4a122;
  color: #131212;
}
.label.alert {
  background: #990000;
  color: white;
}
.label.navigation {
  background: #2b58c0;
  color: white;
}
.label.accent {
  background: #ffc425;
  color: #131212;
}
.label.info {
  background: #a3988c;
  color: #131212;
}
.label.highlight {
  background: #05aee5;
  color: #131212;
}
.label.acc {
  background: #004176;
  color: white;
}

.progress {
  height: 16px;
  height: 1rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-radius: 0px;
  background-color: #cacaca;
}
.progress.primary .progress-meter {
  background-color: #0088aa;
}
.progress.secondary .progress-meter {
  background-color: #e87d1e;
}
.progress.success .progress-meter {
  background-color: #078a2e;
}
.progress.shade .progress-meter {
  background-color: #8a817f;
}
.progress.warning .progress-meter {
  background-color: #f4a122;
}
.progress.alert .progress-meter {
  background-color: #990000;
}
.progress.navigation .progress-meter {
  background-color: #2b58c0;
}
.progress.accent .progress-meter {
  background-color: #ffc425;
}
.progress.info .progress-meter {
  background-color: #a3988c;
}
.progress.highlight .progress-meter {
  background-color: #05aee5;
}
.progress.acc .progress-meter {
  background-color: #004176;
}

.progress-meter {
  display: block;
  position: relative;
  width: 0%;
  height: 100%;
  background-color: #0088aa;
}

.progress-meter-text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-size: 0.75rem;
  font-Weight:  bold;
  white-space: nowrap;
}

.slider {
  position: relative;
  margin-top: 20px;
  margin-top: 1.25rem;
  margin-bottom: 36px;
  margin-bottom: 2.25rem;
  background-color: #e6e6e6;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.slider,.slider-fill {
  height: 8px;
  height: 0.5rem;
}

.slider-fill {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  background-color: #cacaca;
  transition: all 0.2s ease-in-out;
}
.slider-fill.is-dragging {
  transition: all 0s linear;
}

.slider-handle {
  display: inline-block;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 22.4px;
  width: 1.4rem;
  height: 22.4px;
  height: 1.4rem;
  transform: translateY(-50%);
  border-radius: 0px;
  background-color: #0088aa;
  touch-action: manipulation;
  transition: all 0.2s ease-in-out;
}
[data-whatinput=mouse] .slider-handle {
  outline: 0;
}
.slider-handle:hover {
  background-color: #007491;
}
.slider-handle.is-dragging {
  transition: all 0s linear;
}

.slider.disabled,
.slider[disabled] {
  cursor: not-allowed;
  opacity: 0.25;
}

.slider.vertical {
  display: inline-block;
  width: 8px;
  width: 0.5rem;
  height: 200px;
  height: 12.5rem;
  margin: 0 20px;
  margin: 0 1.25rem;
  transform: scale(1, -1);
}
.slider.vertical .slider-fill {
  top: 0;
  width: 8px;
  width: 0.5rem;
  max-height: 100%;
}
.slider.vertical .slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22.4px;
  width: 1.4rem;
  height: 22.4px;
  height: 1.4rem;
  transform: translateX(-50%);
}

.switch {
  position: relative;
  height: 32px;
  height: 2rem;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  outline: 0;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  font-Weight:  bold;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.switch-input {
  position: absolute;
  margin-bottom: 0;
  opacity: 0;
}

.switch-paddle {
  display: block;
  position: relative;
  width: 64px;
  width: 4rem;
  height: 32px;
  height: 2rem;
  border-radius: 0px;
  background: #cacaca;
  color: inherit;
  font-Weight:  inherit;
  cursor: pointer;
  transition: all 0.25s ease-out;
}
input + .switch-paddle {
  margin: 0;
}
.switch-paddle::after {
  display: block;
  position: absolute;
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  transform: translate3d(0, 0, 0);
  border-radius: 0px;
  background: white;
  content: "";
  transition: all 0.25s ease-out;
}
input:checked ~ .switch-paddle {
  background: #0088aa;
}
input:checked ~ .switch-paddle::after {
  left: 36px;
  left: 2.25rem;
}
input:disabled ~ .switch-paddle {
  cursor: not-allowed;
  opacity: 0.5;
}
[data-whatinput=mouse] input:focus ~ .switch-paddle {
  outline: 0;
}

.switch-inactive, .switch-active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.switch-active {
  display: none;
  left: 8%;
}
input:checked + label > .switch-active {
  display: block;
}

.switch-inactive {
  right: 15%;
}
input:checked + label > .switch-inactive {
  display: none;
}
.switch.tiny,.switch.tiny .switch-paddle {
  height: 24px;
  height: 1.5rem;
}
.switch.tiny .switch-paddle {
  width: 48px;
  width: 3rem;
  font-size: 10px;
  font-size: 0.625rem;
}
.switch.tiny .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem;
}
.switch.tiny input:checked ~ .switch-paddle::after {
  left: 28px;
  left: 1.75rem;
}
.switch.small,.switch.small .switch-paddle {
  height: 28px;
  height: 1.75rem;
}
.switch.small .switch-paddle {
  width: 56px;
  width: 3.5rem;
  font-size: 12px;
  font-size: 0.75rem;
}
.switch.small .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 20px;
  width: 1.25rem;
  height: 20px;
  height: 1.25rem;
}
.switch.small input:checked ~ .switch-paddle::after {
  left: 32px;
  left: 2rem;
}
.switch.large,.switch.large .switch-paddle {
  height: 40px;
  height: 2.5rem;
}
.switch.large .switch-paddle {
  width: 80px;
  width: 5rem;
  font-size: 16px;
  font-size: 1rem;
}
.switch.large .switch-paddle::after {
  top: 4px;
  top: 0.25rem;
  left: 4px;
  left: 0.25rem;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
}
.switch.large input:checked ~ .switch-paddle::after {
  left: 44px;
  left: 2.75rem;
}

table {
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border-radius: 0px;
  border-collapse: collapse;
}
thead,
tbody,
tfoot {
  border: 1px solid #f2f2f2;
  background-color: white;
}

caption {
  padding: 8px 10px 10px;
  padding: 0.5rem 0.625rem 0.625rem;
  font-Weight:  bold;
}

thead {
  background: #f9f9f9;
}

thead,tfoot {
  color: #131212;
}

tfoot {
  background: #f2f2f2;
}

thead tr,
tfoot tr {
  background: transparent;
}
thead th,
thead td,
tfoot th,
tfoot td {
  font-Weight:  bold;
  text-align: left;
}

thead th,
thead td,
tfoot th,
tfoot td,tbody th,
tbody td {
  padding: 8px 10px 10px;
  padding: 0.5rem 0.625rem 0.625rem;
}

tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #f2f2f2;
}
table.unstriped tbody,table.unstriped tbody tr {
  background-color: white;
}
table.unstriped tbody tr {
  border-bottom: 0;
  border-bottom: 1px solid #f2f2f2;
}

@media print, screen and (max-width: 63.99875em) {
  table.stack thead,table.stack tfoot {
    display: none;
  }
  table.stack tr,
table.stack th,
table.stack td {
    display: block;
  }
  table.stack td {
    border-top: 0;
  }
}

table.scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
}

table.hover thead tr:hover {
  background-color: #f4f4f4;
}
table.hover tfoot tr:hover {
  background-color: #ededed;
}
table.hover tbody tr:hover {
  background-color: #fafafa;
}
table.hover:not(.unstriped) tr:nth-of-type(even):hover {
  background-color: #ededed;
}

.table-scroll {
  overflow-x: auto;
}

.badge {
  display: inline-block;
  min-width: 2.1em;
  padding: 0.3em;
  border-radius: 50%;
  font-size: 9.6px;
  font-size: 0.6rem;
  text-align: center;
}
.badge,.badge.primary {
  background: #0088aa;
  color: white;
}
.badge.secondary {
  background: #e87d1e;
  color: #131212;
}
.badge.success {
  background: #078a2e;
  color: white;
}
.badge.shade {
  background: #8a817f;
  color: white;
}
.badge.warning {
  background: #f4a122;
  color: #131212;
}
.badge.alert {
  background: #990000;
  color: white;
}
.badge.navigation {
  background: #2b58c0;
  color: white;
}
.badge.accent {
  background: #ffc425;
  color: #131212;
}
.badge.info {
  background: #a3988c;
  color: #131212;
}
.badge.highlight {
  background: #05aee5;
  color: #131212;
}
.badge.acc {
  background: #004176;
  color: white;
}

.breadcrumbs {
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  list-style: none;
}
.breadcrumbs::before, .breadcrumbs::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.breadcrumbs::after {
  clear: both;
}
.breadcrumbs li {
  float: left;
  color: #131212;
  font-size: 11px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  cursor: default;
}
.breadcrumbs li:not(:last-child)::after {
  position: relative;
  margin: 0 12px;
  margin: 0 0.75rem;
  color: #cacaca;
  content: "/";
  opacity: 1;
}
.breadcrumbs a {
  color: #0088aa;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs .disabled {
  color: #cacaca;
  cursor: not-allowed;
}

.callout {
  position: relative;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  padding: 16px;
  padding: 1rem;
  border: 1px solid rgba(19, 18, 18, 0.25);
  border-radius: 0px;
  background-color: white;
  color: #131212;
}
.callout > :first-child {
  margin-top: 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout.primary {
  background-color: #ccf5ff;
  color: #131212;
}
.callout.secondary {
  background-color: #fcecdd;
  color: #131212;
}
.callout.success {
  background-color: #cbfcda;
  color: #131212;
}
.callout.shade {
  background-color: #edecec;
  color: #131212;
}
.callout.warning {
  background-color: #fdf1de;
  color: #131212;
}
.callout.alert {
  background-color: #ffc9c9;
  color: #131212;
}
.callout.navigation {
  background-color: #dde5f7;
  color: #131212;
}
.callout.accent {
  background-color: #fff6de;
  color: #131212;
}
.callout.info {
  background-color: #f1f0ee;
  color: #131212;
}
.callout.highlight {
  background-color: #d6f4fe;
  color: #131212;
}
.callout.acc {
  background-color: #c4e5ff;
  color: #131212;
}
.callout.small {
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-right: 8px;
  padding-right: 0.5rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  padding-left: 8px;
  padding-left: 0.5rem;
}
.callout.large {
  padding-top: 48px;
  padding-top: 3rem;
  padding-right: 48px;
  padding-right: 3rem;
  padding-bottom: 48px;
  padding-bottom: 3rem;
  padding-left: 48px;
  padding-left: 3rem;
}

.card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 0px;
  background: white;
  box-shadow: none;
  color: #131212;
}
.card > :last-child {
  margin-bottom: 0;
}

.card-divider {
  display: flex;
  flex: 0 1 auto;
  padding: 16px;
  padding: 1rem;
  background: #e6e6e6;
}
.card-divider > :last-child {
  margin-bottom: 0;
}

.card-section {
  flex: 1 0 auto;
  padding: 16px;
  padding: 1rem;
}
.card-section > :last-child {
  margin-bottom: 0;
}

.card-image {
  min-height: 1px;
}

.dropdown-pane {
  display: none;
  visibility: hidden;
  z-index: 10;
  position: absolute;
  width: 300px;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  background-color: white;
  font-size: 16px;
  font-size: 1rem;
}
.dropdown-pane.is-opening {
  display: block;
}
.dropdown-pane.is-open {
  display: block;
  visibility: visible;
}

.dropdown-pane.tiny {
  width: 100px;
}

.dropdown-pane.small {
  width: 200px;
}

.dropdown-pane.large {
  width: 400px;
}

.pagination {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  margin-left: 0;
}
.pagination::before, .pagination::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.pagination::after {
  clear: both;
}
.pagination li {
  display: none;
  margin-right: 1px;
  margin-right: 0.0625rem;
  border-radius: 0px;
  font-size: 14px;
  font-size: 0.875rem;
}
.pagination li:last-child, .pagination li:first-child {
  display: inline-block;
}
@media print, screen and (min-width: 40em) {
  .pagination li {
    display: inline-block;
  }
}
.pagination a,
.pagination button {
  display: block;
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
  border-radius: 0px;
  color: #131212;
}
.pagination a:hover,
.pagination button:hover {
  background: #e6e6e6;
}
.pagination .current {
  background: #0088aa;
  color: white;
  cursor: default;
}
.pagination .current,.pagination .disabled {
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
}
.pagination .disabled {
  color: #cacaca;
  cursor: not-allowed;
}
.pagination .disabled:hover {
  background: transparent;
}
.pagination .ellipsis::after {
  padding: 3px 10px;
  padding: 0.1875rem 0.625rem;
  color: #131212;
  content: "…";
}

.has-tip {
  display: inline-block;
  position: relative;
  border-bottom: dotted 1px #8a8a8a;
  font-Weight:  bold;
  cursor: help;
}

.tooltip {
  z-index: 1200;
  top: calc(100% + 0.6495rem);
  max-width: 160px;
  max-width: 10rem;
  padding: 12px;
  padding: 0.75rem;
  border-radius: 0px;
  background-color: #131212;
  color: white;
  font-size: 80%;
}
.tooltip,.tooltip::before {
  position: absolute;
}
.tooltip.bottom::before {
  display: block;
  bottom: 100%;
  width: 0;
  height: 0;
  border: inset 12px;
  border: inset 0.75rem;
  border-top-width: 0;
  border-bottom-style: solid;
  border-color: transparent transparent #131212;
  content: "";
}
.tooltip.bottom.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.top::before {
  display: block;
  top: 100%;
  bottom: auto;
  width: 0;
  height: 0;
  border: inset 12px;
  border: inset 0.75rem;
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: #131212 transparent transparent;
  content: "";
}
.tooltip.top.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.left::before {
  display: block;
  left: 100%;
  width: 0;
  height: 0;
  border: inset 12px;
  border: inset 0.75rem;
  border-right-width: 0;
  border-left-style: solid;
  border-color: transparent transparent transparent #131212;
  content: "";
}
.tooltip.left.align-center::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tooltip.right::before {
  display: block;
  right: 100%;
  left: auto;
  width: 0;
  height: 0;
  border: inset 12px;
  border: inset 0.75rem;
  border-left-width: 0;
  border-right-style: solid;
  border-color: transparent #131212 transparent transparent;
  content: "";
}
.tooltip.right.align-center::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tooltip.align-top::before {
  top: 10%;
  bottom: auto;
}
.tooltip.align-bottom::before {
  top: auto;
  bottom: 10%;
}
.tooltip.align-left::before {
  right: auto;
  left: 10%;
}
.tooltip.align-right::before {
  right: 10%;
  left: auto;
}

.accordion {
  margin-left: 0;
  background: white;
  list-style-type: none;
}
.accordion[disabled] .accordion-title {
  cursor: not-allowed;
}

.accordion-item:first-child > :first-child {
  border-radius: 0px 0px 0 0;
}
.accordion-item:last-child > :last-child {
  border-radius: 0 0 0px 0px;
}

.accordion-title {
  display: block;
  position: relative;
  padding: 20px 16px;
  padding: 1.25rem 1rem;
  border: 1px solid #e6e6e6;
  border-bottom: 0;
  color: #0088aa;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
}
:last-child:not(.is-active) > .accordion-title {
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0 0 0px 0px;
}
.accordion-title:hover, .accordion-title:focus {
  background-color: #e6e6e6;
}

.accordion-content {
  display: none;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #e6e6e6;
  border-bottom: 0;
  background-color: white;
  color: #131212;
}
:last-child > .accordion-content:last-child {
  border-bottom: 1px solid #e6e6e6;
}

.media-object {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.media-object img {
  max-width: none;
}
@media print, screen and (max-width: 39.99875em) {
  .media-object.stack-for-small {
    flex-wrap: wrap;
  }
}

.media-object-section {
  flex: 0 1 auto;
}
.media-object-section:first-child {
  padding-right: 16px;
  padding-right: 1rem;
}
.media-object-section:last-child:not(:nth-child(2)) {
  padding-left: 16px;
  padding-left: 1rem;
}
.media-object-section > :last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .stack-for-small .media-object-section {
    flex-basis: 100%;
    max-width: 100%;
    padding: 0;
    padding-bottom: 1rem;
  }
  .stack-for-small .media-object-section img {
    width: 100%;
  }
}
.media-object-section.main-section {
  flex: 1 1 0px;
}

.orbit,.orbit-container {
  position: relative;
}

.orbit-container {
  height: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
}

.orbit-slide {
  position: absolute;
  width: 100%;
}
.orbit-slide.no-motionui.is-active {
  top: 0;
  left: 0;
}

.orbit-figure {
  margin: 0;
}

.orbit-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.orbit-caption {
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  background-color: rgba(19, 18, 18, 0.5);
}

.orbit-caption,.orbit-next, .orbit-previous {
  position: absolute;
  padding: 16px;
  padding: 1rem;
  color: white;
}

.orbit-next, .orbit-previous {
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}
[data-whatinput=mouse] .orbit-next, [data-whatinput=mouse] .orbit-previous {
  outline: 0;
}
.orbit-next:hover, .orbit-previous:hover, .orbit-next:active, .orbit-previous:active, .orbit-next:focus, .orbit-previous:focus {
  background-color: rgba(19, 18, 18, 0.5);
}

.orbit-previous {
  left: 0;
}

.orbit-next {
  right: 0;
  left: auto;
}

.orbit-bullets {
  position: relative;
  margin-top: 12.8px;
  margin-top: 0.8rem;
  margin-bottom: 12.8px;
  margin-bottom: 0.8rem;
  text-align: center;
}
[data-whatinput=mouse] .orbit-bullets {
  outline: 0;
}
.orbit-bullets button {
  width: 19.2px;
  width: 1.2rem;
  height: 19.2px;
  height: 1.2rem;
  margin: 1.6px;
  margin: 0.1rem;
  border-radius: 50%;
  background-color: #cacaca;
}
.orbit-bullets button:hover,.orbit-bullets button.is-active {
  background-color: #8a8a8a;
}

.responsive-embed,
.flex-video {
  position: relative;
  height: 0;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  padding-bottom: 75%;
  overflow: hidden;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed,
.responsive-embed video,
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsive-embed.widescreen,
.flex-video.widescreen {
  padding-bottom: 56.25%;
}

.tabs {
  margin: 0;
  border: 1px solid #e6e6e6;
  background: white;
  list-style-type: none;
}
.tabs::before, .tabs::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.tabs::after {
  clear: both;
}

.tabs.vertical > li {
  display: block;
  width: auto;
  float: none;
}

.tabs.simple > li > a {
  padding: 0;
}
.tabs.simple > li > a:hover {
  background: transparent;
}

.tabs.primary {
  background: #0088aa;
}
.tabs.primary > li > a {
  color: white;
}
.tabs.primary > li > a:hover, .tabs.primary > li > a:focus {
  background: #0096bb;
}

.tabs-title {
  float: left;
}
.tabs-title > a {
  display: block;
  padding: 8px 16px;
  padding: 0.5rem 1rem;
  color: #0088aa;
  font-size: 1em;
  line-height: 1;
}
[data-whatinput=mouse] .tabs-title > a {
  outline: 0;
}
.tabs-title > a:hover {
  background: white;
  color: #007592;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected=true],.tabs-content {
  background: white;
  color: #131212;
}

.tabs-content {
  border: 1px solid #e6e6e6;
  border-top: 0;
  transition: all 0.5s ease;
}

.tabs-content.vertical {
  border: 1px solid #e6e6e6;
  border-left: 0;
}

.tabs-panel {
  display: none;
  padding: 16px;
  padding: 1rem;
}
.tabs-panel.is-active {
  display: block;
}

.thumbnail {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  border: 4px solid white;
  border-radius: 0px;
  box-shadow: 0 0 0 1px rgba(19, 18, 18, 0.2);
  line-height: 0;
}

a.thumbnail {
  transition: box-shadow 200ms ease-out;
}
a.thumbnail:hover, a.thumbnail:focus {
  box-shadow: 0 0 6px 1px rgba(0, 136, 170, 0.5);
}
a.thumbnail image {
  box-shadow: none;
}

.menu {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-whatinput=mouse] .menu li {
  outline: 0;
}
.menu a,
.menu .button {
  display: block;
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  line-height: 1;
  text-decoration: none;
}
.menu input,
.menu select,
.menu a,
.menu button {
  margin-bottom: 0;
}
.menu input {
  display: inline-block;
}
.menu, .menu.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
.menu.vertical {
  flex-direction: column;
  flex-wrap: nowrap;
}
.menu.expanded li {
  flex: 1 1 0px;
}
.menu.simple {
  align-items: center;
}
.menu.simple li + li {
  margin-left: 16px;
  margin-left: 1rem;
}
.menu.simple a {
  padding: 0;
}
@media print, screen and (min-width: 40em) {
  .menu.medium-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .menu.medium-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .menu.medium-expanded li,.menu.medium-simple li {
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 64em) {
  .menu.large-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .menu.large-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .menu.large-expanded li,.menu.large-simple li {
    flex: 1 1 0px;
  }
}
.menu.nested {
  margin-right: 0;
  margin-left: 16px;
  margin-left: 1rem;
}
.menu.icons a,.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
  display: flex;
}
.menu.icon-left li a {
  flex-flow: row nowrap;
}
.menu.icon-left li a img,
.menu.icon-left li a i,
.menu.icon-left li a svg {
  margin-right: 4px;
  margin-right: 0.25rem;
}
.menu.icon-right li a {
  flex-flow: row nowrap;
}
.menu.icon-right li a img,
.menu.icon-right li a i,
.menu.icon-right li a svg {
  margin-left: 4px;
  margin-left: 0.25rem;
}
.menu.icon-top li a {
  flex-flow: column nowrap;
}
.menu.icon-top li a img,
.menu.icon-top li a i,
.menu.icon-top li a svg {
  -ms-grid-row-align: stretch;
      align-self: stretch;
  margin-bottom: 4px;
  margin-bottom: 0.25rem;
  text-align: center;
}
.menu.icon-bottom li a {
  flex-flow: column nowrap;
}
.menu.icon-bottom li a img,
.menu.icon-bottom li a i,
.menu.icon-bottom li a svg {
  -ms-grid-row-align: stretch;
      align-self: stretch;
  margin-bottom: 4px;
  margin-bottom: 0.25rem;
  text-align: center;
}
.menu .is-active > a,.menu .active > a {
  background: #0088aa;
  color: white;
}
.menu.align-left {
  justify-content: flex-start;
}
.menu.align-right li {
  display: flex;
  justify-content: flex-end;
}
.menu.align-right li .submenu li {
  justify-content: flex-start;
}
.menu.align-right.vertical li {
  display: block;
  text-align: right;
}
.menu.align-right.vertical li .submenu li {
  text-align: right;
}
.menu.align-right .nested {
  margin-right: 16px;
  margin-right: 1rem;
  margin-left: 0;
}
.menu.align-center li {
  display: flex;
  justify-content: center;
}
.menu.align-center li .submenu li {
  justify-content: flex-start;
}
.menu .menu-text {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  color: inherit;
  font-Weight:  bold;
  line-height: 1;
}
.menu-centered > .menu,.menu-centered > .menu li {
  justify-content: center;
}
.menu-centered > .menu li {
  display: flex;
}
.menu-centered > .menu li .submenu li {
  justify-content: flex-start;
}

.no-js [data-responsive-menu] ul {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.menu-icon::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  box-shadow: 0 7px 0 white, 0 14px 0 white;
  content: "";
}
.menu-icon:hover::after {
  background: #cacaca;
  box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
}

.menu-icon.dark {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
}
.menu-icon.dark::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #131212;
  box-shadow: 0 7px 0 #131212, 0 14px 0 #131212;
  content: "";
}
.menu-icon.dark:hover::after {
  background: #8a8a8a;
  box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;
}

.accordion-menu li {
  width: 100%;
}
.accordion-menu a,.accordion-menu .is-accordion-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.accordion-menu .nested.is-accordion-submenu {
  margin-right: 0;
  margin-left: 16px;
  margin-left: 1rem;
}
.accordion-menu.align-right .nested.is-accordion-submenu {
  margin-right: 16px;
  margin-right: 1rem;
  margin-left: 0;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
  position: relative;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 16px;
  right: 1rem;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: inset 6px;
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: #0088aa transparent transparent;
  content: "";
}
.accordion-menu.align-left .is-accordion-submenu-parent > a::after {
  right: 16px;
  right: 1rem;
  left: auto;
}
.accordion-menu.align-right .is-accordion-submenu-parent > a::after {
  right: auto;
  left: 16px;
  left: 1rem;
}
.accordion-menu .is-accordion-submenu-parent[aria-expanded=true] > a::after {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

.is-accordion-submenu-parent {
  position: relative;
}

.has-submenu-toggle > a {
  margin-right: 40px;
}

.submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.submenu-toggle::after {
  display: block;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border: inset 6px;
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: #0088aa transparent transparent;
  content: "";
}

.submenu-toggle[aria-expanded=true]::after {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

.submenu-toggle-text {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.is-drilldown {
  position: relative;
  overflow: hidden;
}
.is-drilldown li {
  display: block;
}
.is-drilldown.animate-height {
  transition: height 0.5s;
}

.drilldown a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  background: white;
}
.drilldown .is-drilldown-submenu {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  background: white;
  transition: transform 0.15s linear;
}
.drilldown .is-drilldown-submenu.is-active {
  display: block;
  z-index: 1;
  transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
  transform: translateX(100%);
}
.drilldown .is-drilldown-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.drilldown .nested.is-drilldown-submenu {
  margin-right: 0;
  margin-left: 0;
}
.drilldown .drilldown-submenu-cover-previous {
  min-height: 100%;
}
.drilldown .is-drilldown-submenu-parent > a {
  position: relative;
}
.drilldown .is-drilldown-submenu-parent > a::after {
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
.drilldown .is-drilldown-submenu-parent > a::after,.drilldown.align-left .is-drilldown-submenu-parent > a::after {
  display: block;
  right: 16px;
  right: 1rem;
  width: 0;
  height: 0;
  border: inset 6px;
  border-right-width: 0;
  border-left-style: solid;
  border-color: transparent transparent transparent #0088aa;
  content: "";
}
.drilldown.align-left .is-drilldown-submenu-parent > a::after {
  left: auto;
}
.drilldown.align-right .is-drilldown-submenu-parent > a::after {
  display: block;
  right: auto;
  left: 16px;
  left: 1rem;
}
.drilldown.align-right .is-drilldown-submenu-parent > a::after,.drilldown .js-drilldown-back > a::before {
  width: 0;
  height: 0;
  border: inset 6px;
  border-left-width: 0;
  border-right-style: solid;
  border-color: transparent #0088aa transparent transparent;
  content: "";
}
.drilldown .js-drilldown-back > a::before {
  display: block;
  display: inline-block;
  margin-right: 12px;
  margin-right: 0.75rem;
  vertical-align: middle;
}

.dropdown.menu > li.opens-left > .is-dropdown-submenu {
  top: 100%;
  right: 0;
  left: auto;
}
.dropdown.menu > li.opens-right > .is-dropdown-submenu {
  top: 100%;
  right: auto;
  left: 0;
}
.dropdown.menu > li.is-dropdown-submenu-parent > a {
  position: relative;
  padding-right: 24px;
  padding-right: 1.5rem;
}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  display: block;
  right: 5px;
  left: auto;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: inset 6px;
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: #0088aa transparent transparent;
  content: "";
}
[data-whatinput=mouse] .dropdown.menu a {
  outline: 0;
}
.dropdown.menu > li > a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
  background: white;
}
.dropdown.menu > li.is-active > a {
  background: transparent;
  color: #0088aa;
}
.no-js .dropdown.menu ul {
  display: none;
}
.dropdown.menu .nested.is-dropdown-submenu {
  margin-right: 0;
  margin-left: 0;
}
.dropdown.menu.vertical > li .is-dropdown-submenu {
  top: 0;
}
.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
  top: 0;
  right: 100%;
  left: auto;
}
.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}
.dropdown.menu.vertical > li > a::after {
  right: 14px;
}
.dropdown.menu.vertical > li.opens-left > a::after {
  display: block;
  right: auto;
  left: 5px;
  width: 0;
  height: 0;
  border: inset 6px;
  border-left-width: 0;
  border-right-style: solid;
  border-color: transparent #0088aa transparent transparent;
  content: "";
}
.dropdown.menu.vertical > li.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border: inset 6px;
  border-right-width: 0;
  border-left-style: solid;
  border-color: transparent transparent transparent #0088aa;
  content: "";
}
@media print, screen and (min-width: 40em) {
  .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }
  .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    right: 5px;
    left: auto;
    width: 0;
    height: 0;
    margin-top: -3px;
    border: inset 6px;
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #0088aa transparent transparent;
    content: "";
  }
  .dropdown.menu.medium-vertical > li .is-dropdown-submenu {
    top: 0;
  }
  .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }
  .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }
  .dropdown.menu.medium-vertical > li > a::after {
    right: 14px;
  }
  .dropdown.menu.medium-vertical > li.opens-left > a::after {
    display: block;
    right: auto;
    left: 5px;
    width: 0;
    height: 0;
    border: inset 6px;
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent #0088aa transparent transparent;
    content: "";
  }
  .dropdown.menu.medium-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #0088aa;
    content: "";
  }
}
@media print, screen and (min-width: 64em) {
  .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }
  .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    right: 5px;
    left: auto;
    width: 0;
    height: 0;
    margin-top: -3px;
    border: inset 6px;
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #0088aa transparent transparent;
    content: "";
  }
  .dropdown.menu.large-vertical > li .is-dropdown-submenu {
    top: 0;
  }
  .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }
  .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }
  .dropdown.menu.large-vertical > li > a::after {
    right: 14px;
  }
  .dropdown.menu.large-vertical > li.opens-left > a::after {
    display: block;
    right: auto;
    left: 5px;
    width: 0;
    height: 0;
    border: inset 6px;
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent #0088aa transparent transparent;
    content: "";
  }
  .dropdown.menu.large-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #0088aa;
    content: "";
  }
}
.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
  top: 100%;
  right: 0;
  left: auto;
}

.is-dropdown-menu.vertical {
  width: 100px;
}
.is-dropdown-menu.vertical.align-right {
  float: right;
}

.is-dropdown-submenu-parent {
  position: relative;
}
.is-dropdown-submenu-parent a::after {
  position: absolute;
  top: 50%;
  right: 5px;
  left: auto;
  margin-top: -6px;
}
.is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
  top: 100%;
  left: auto;
}
.is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
  right: 100%;
  left: auto;
}
.is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}

.is-dropdown-submenu {
  display: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  border: 1px solid #cacaca;
  background: white;
}
.dropdown .is-dropdown-submenu a {
  padding: 11.2px 16px;
  padding: 0.7rem 1rem;
}
.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
  right: 14px;
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
  display: block;
  right: auto;
  left: 5px;
  width: 0;
  height: 0;
  border: inset 6px;
  border-left-width: 0;
  border-right-style: solid;
  border-color: transparent #0088aa transparent transparent;
  content: "";
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border: inset 6px;
  border-right-width: 0;
  border-left-style: solid;
  border-color: transparent transparent transparent #0088aa;
  content: "";
}
.is-dropdown-submenu .is-dropdown-submenu {
  margin-top: -1px;
}
.is-dropdown-submenu > li {
  width: 100%;
}
.is-dropdown-submenu.js-dropdown-active {
  display: block;
}

.is-off-canvas-open {
  overflow: hidden;
}

.js-off-canvas-overlay {
  visibility: hidden;
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.js-off-canvas-overlay.is-visible {
  visibility: visible;
  opacity: 1;
}
.js-off-canvas-overlay.is-closable {
  cursor: pointer;
}
.js-off-canvas-overlay.is-overlay-absolute {
  position: absolute;
}
.js-off-canvas-overlay.is-overlay-fixed {
  position: fixed;
}

.off-canvas-wrapper {
  position: relative;
  overflow: hidden;
}

.off-canvas {
  z-index: 12;
  position: fixed;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #e6e6e6;
  transition: transform 0.5s ease;
}
[data-whatinput=mouse] .off-canvas {
  outline: 0;
}
.off-canvas.is-transition-push {
  z-index: 12;
}
.off-canvas.is-closed {
  visibility: hidden;
}
.off-canvas.is-transition-overlap {
  z-index: 13;
}
.off-canvas.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(19, 18, 18, 0.7);
}
.off-canvas.is-open {
  transform: translate(0, 0);
}
.off-canvas-absolute {
  z-index: 12;
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #e6e6e6;
  transition: transform 0.5s ease;
}
[data-whatinput=mouse] .off-canvas-absolute {
  outline: 0;
}
.off-canvas-absolute.is-transition-push {
  z-index: 12;
}
.off-canvas-absolute.is-closed {
  visibility: hidden;
}
.off-canvas-absolute.is-transition-overlap {
  z-index: 13;
}
.off-canvas-absolute.is-transition-overlap.is-open {
  box-shadow: 0 0 10px rgba(19, 18, 18, 0.7);
}
.off-canvas-absolute.is-open {
  transform: translate(0, 0);
}

.position-left {
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
}
.position-left,.off-canvas-content .off-canvas.position-left {
  transform: translateX(-250px);
}
.off-canvas-content .off-canvas.position-left.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-left.has-transition-push {
  transform: translateX(250px);
}

.position-left.is-transition-push {
  box-shadow: inset -13px 0 20px -13px rgba(19, 18, 18, 0.25);
}

.position-right {
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
}
.position-right,.off-canvas-content .off-canvas.position-right {
  transform: translateX(250px);
}
.off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-right.has-transition-push {
  transform: translateX(-250px);
}

.position-right.is-transition-push {
  box-shadow: inset 13px 0 20px -13px rgba(19, 18, 18, 0.25);
}

.position-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  overflow-x: auto;
}
.position-top,.off-canvas-content .off-canvas.position-top {
  transform: translateY(-250px);
}
.off-canvas-content .off-canvas.position-top.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-top.has-transition-push {
  transform: translateY(250px);
}

.position-top.is-transition-push {
  box-shadow: inset 0 -13px 20px -13px rgba(19, 18, 18, 0.25);
}

.position-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  overflow-x: auto;
}
.position-bottom,.off-canvas-content .off-canvas.position-bottom {
  transform: translateY(250px);
}
.off-canvas-content .off-canvas.position-bottom.is-transition-overlap.is-open {
  transform: translate(0, 0);
}

.off-canvas-content.is-open-bottom.has-transition-push {
  transform: translateY(-250px);
}

.position-bottom.is-transition-push {
  box-shadow: inset 0 13px 20px -13px rgba(19, 18, 18, 0.25);
}

.off-canvas-content {
  transform: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.off-canvas-content.has-transition-overlap, .off-canvas-content.has-transition-push {
  transition: transform 0.5s ease;
}
.off-canvas-content.has-transition-push,.off-canvas-content .off-canvas.is-open {
  transform: translate(0, 0);
}

@media print, screen and (min-width: 40em) {
  .position-left.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-left.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-left.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-left,.position-left.reveal-for-medium ~ .off-canvas-content {
    margin-left: 250px;
  }

  .position-right.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-right.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-right.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-right,.position-right.reveal-for-medium ~ .off-canvas-content {
    margin-right: 250px;
  }

  .position-top.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-top.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-top.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-top,.position-top.reveal-for-medium ~ .off-canvas-content {
    margin-top: 250px;
  }

  .position-bottom.reveal-for-medium {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-bottom.reveal-for-medium .close-button {
    display: none;
  }
  .off-canvas-content .position-bottom.reveal-for-medium {
    transform: none;
  }

  .off-canvas-content.has-reveal-bottom,.position-bottom.reveal-for-medium ~ .off-canvas-content {
    margin-bottom: 250px;
  }
}
@media print, screen and (min-width: 64em) {
  .position-left.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-left.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-left.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-left,.position-left.reveal-for-large ~ .off-canvas-content {
    margin-left: 250px;
  }

  .position-right.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-right.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-right.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-right,.position-right.reveal-for-large ~ .off-canvas-content {
    margin-right: 250px;
  }

  .position-top.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-top.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-top.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-top,.position-top.reveal-for-large ~ .off-canvas-content {
    margin-top: 250px;
  }

  .position-bottom.reveal-for-large {
    visibility: visible;
    z-index: 12;
    transform: none;
    transition: none;
  }
  .position-bottom.reveal-for-large .close-button {
    display: none;
  }
  .off-canvas-content .position-bottom.reveal-for-large {
    transform: none;
  }

  .off-canvas-content.has-reveal-bottom,.position-bottom.reveal-for-large ~ .off-canvas-content {
    margin-bottom: 250px;
  }
}
@media print, screen and (min-width: 40em) {
  .off-canvas.in-canvas-for-medium {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    transition: none;
  }
  .off-canvas.in-canvas-for-medium.position-left, .off-canvas.in-canvas-for-medium.position-right, .off-canvas.in-canvas-for-medium.position-top, .off-canvas.in-canvas-for-medium.position-bottom {
    transform: none;
    box-shadow: none;
  }
  .off-canvas.in-canvas-for-medium .close-button {
    display: none;
  }
}
@media print, screen and (min-width: 64em) {
  .off-canvas.in-canvas-for-large {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    transition: none;
  }
  .off-canvas.in-canvas-for-large.position-left, .off-canvas.in-canvas-for-large.position-right, .off-canvas.in-canvas-for-large.position-top, .off-canvas.in-canvas-for-large.position-bottom {
    transform: none;
    box-shadow: none;
  }
  .off-canvas.in-canvas-for-large .close-button {
    display: none;
  }
}
html.is-reveal-open {
  position: fixed;
  width: 100%;
  overflow-y: hidden;
}
html.is-reveal-open.zf-has-scroll {
  overflow-y: scroll;
}
html.is-reveal-open body {
  overflow-y: hidden;
}

.reveal-overlay {
  z-index: 1005;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(19, 18, 18, 0.45);
}

.reveal-overlay,.reveal {
  display: none;
  overflow-y: auto;
}

.reveal {
  z-index: 1006;
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  padding: 1rem;
  border: 1px solid #cacaca;
  border-radius: 0px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: white;
}
[data-whatinput=mouse] .reveal {
  outline: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    min-height: 0;
  }
}
.reveal .column {
  min-width: 0;
}
.reveal > :last-child {
  margin-bottom: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    width: 600px;
    max-width: 87.5rem;
  }
}
.reveal.collapse {
  padding: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal.tiny {
    width: 30%;
    max-width: 87.5rem;
  }
}
@media print, screen and (min-width: 40em) {
  .reveal.small {
    width: 50%;
    max-width: 87.5rem;
  }
}
@media print, screen and (min-width: 40em) {
  .reveal.large {
    width: 90%;
    max-width: 87.5rem;
  }
}
.reveal.full {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  margin-left: 0;
  border: 0;
  border-radius: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .reveal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin-left: 0;
    border: 0;
    border-radius: 0;
  }
}
.reveal.without-overlay {
  position: fixed;
}

.sticky-container,.sticky {
  position: relative;
}

.sticky {
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
  z-index: 5;
  position: fixed;
  width: 100%;
}
.sticky.is-stuck.is-at-top {
  top: 0;
}
.sticky.is-stuck.is-at-bottom {
  bottom: 0;
}

.sticky.is-anchored {
  position: relative;
  right: auto;
  left: auto;
}
.sticky.is-anchored.is-at-bottom {
  bottom: 0;
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  padding: 0.5rem;
  background: #131212;
  color: white;
}
.title-bar .menu-icon {
  margin-right: 4px;
  margin-right: 0.25rem;
  margin-left: 4px;
  margin-left: 0.25rem;
}

.title-bar-left,
.title-bar-right {
  flex: 1 1 0px;
}

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

.title-bar-title {
  display: inline-block;
  font-Weight:  bold;
  vertical-align: middle;
}

.top-bar {
  display: flex;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  padding: 0.5rem;
}
.top-bar,
.top-bar ul {
  background-color: #e6e6e6;
}
.top-bar input {
  max-width: 200px;
  margin-right: 16px;
  margin-right: 1rem;
}
.top-bar .input-group-field {
  width: 100%;
  margin-right: 0;
}
.top-bar input.button {
  width: auto;
}
.top-bar .top-bar-left,
.top-bar .top-bar-right {
  flex: 0 0 100%;
  max-width: 100%;
}
@media print, screen and (min-width: 40em) {
  .top-bar {
    flex-wrap: nowrap;
  }
  .top-bar .top-bar-left {
    flex: 1 1 auto;
    margin-right: auto;
  }
  .top-bar .top-bar-right {
    flex: 0 1 auto;
    margin-left: auto;
  }
}
@media print, screen and (max-width: 63.99875em) {
  .top-bar.stacked-for-medium {
    flex-wrap: wrap;
  }
  .top-bar.stacked-for-medium .top-bar-left,
.top-bar.stacked-for-medium .top-bar-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media print, screen and (max-width: 74.99875em) {
  .top-bar.stacked-for-large {
    flex-wrap: wrap;
  }
  .top-bar.stacked-for-large .top-bar-left,
.top-bar.stacked-for-large .top-bar-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.top-bar-title {
  margin: 8px 16px 8px 0;
  margin: 0.5rem 1rem 0.5rem 0;
}

.top-bar-title,.top-bar-left,
.top-bar-right {
  flex: 0 0 auto;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.clearfix::before, .clearfix::after {
  display: table;
  flex-basis: 0;
  order: 1;
  content: " ";
}
.clearfix::after {
  clear: both;
}

.align-left {
  justify-content: flex-start;
}

.align-right {
  justify-content: flex-end;
}

.align-center {
  justify-content: center;
}

.align-justify {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

.align-left.vertical.menu > li > a {
  justify-content: flex-start;
}

.align-right.vertical.menu > li > a {
  justify-content: flex-end;
}

.align-center.vertical.menu > li > a {
  justify-content: center;
}

.align-top {
  align-items: flex-start;
}

.align-self-top {
  align-self: flex-start;
}

.align-bottom {
  align-items: flex-end;
}

.align-self-bottom {
  align-self: flex-end;
}

.align-middle {
  align-items: center;
}

.align-self-middle {
  -ms-grid-row-align: center;
      align-self: center;
}

.align-stretch {
  align-items: stretch;
}

.align-self-stretch {
  -ms-grid-row-align: stretch;
      align-self: stretch;
}

.align-center-middle {
  align-content: center;
  align-items: center;
  justify-content: center;
}

.small-order-1 {
  order: 1;
}

.small-order-2 {
  order: 2;
}

.small-order-3 {
  order: 3;
}

.small-order-4 {
  order: 4;
}

.small-order-5 {
  order: 5;
}

.small-order-6 {
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    order: 1;
  }

  .medium-order-2 {
    order: 2;
  }

  .medium-order-3 {
    order: 3;
  }

  .medium-order-4 {
    order: 4;
  }

  .medium-order-5 {
    order: 5;
  }

  .medium-order-6 {
    order: 6;
  }
}
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    order: 1;
  }

  .large-order-2 {
    order: 2;
  }

  .large-order-3 {
    order: 3;
  }

  .large-order-4 {
    order: 4;
  }

  .large-order-5 {
    order: 5;
  }

  .large-order-6 {
    order: 6;
  }
}
.flex-container {
  display: flex;
}

.flex-child-auto {
  flex: 1 1 auto;
}

.flex-child-grow {
  flex: 1 0 auto;
}

.flex-child-shrink {
  flex: 0 1 auto;
}

.flex-dir-row {
  flex-direction: row;
}

.flex-dir-row-reverse {
  flex-direction: row-reverse;
}

.flex-dir-column {
  flex-direction: column;
}

.flex-dir-column-reverse {
  flex-direction: column-reverse;
}

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: flex;
  }

  .medium-flex-child-auto {
    flex: 1 1 auto;
  }

  .medium-flex-child-grow {
    flex: 1 0 auto;
  }

  .medium-flex-child-shrink {
    flex: 0 1 auto;
  }

  .medium-flex-dir-row {
    flex-direction: row;
  }

  .medium-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .medium-flex-dir-column {
    flex-direction: column;
  }

  .medium-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
@media print, screen and (min-width: 64em) {
  .large-flex-container {
    display: flex;
  }

  .large-flex-child-auto {
    flex: 1 1 auto;
  }

  .large-flex-child-grow {
    flex: 1 0 auto;
  }

  .large-flex-child-shrink {
    flex: 0 1 auto;
  }

  .large-flex-dir-row {
    flex-direction: row;
  }

  .large-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .large-flex-dir-column {
    flex-direction: column;
  }

  .large-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

@media print, screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) and (max-width: 63.99875em) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em) {
  .show-for-large {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) and (max-width: 74.99875em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important;
  }
}

.show-for-sr,
.show-on-focus {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.show-on-focus:active, .show-on-focus:focus {
  clip: auto !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
.hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
.hide-for-portrait {
    display: none !important;
  }
}

.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .hide-for-landscape,
.show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
.show-for-portrait {
    display: block !important;
  }
}

h1,
h2,
h3 {
  color: #ffc425;
}

/*
Scrollable Table

Sometimes you have a table that will need a scrable comparison. 

Markup:
<div class="table-scrollable-container">
<div class="instructions c_shade"> <i class="fa fa-long-arrow-left"></i> Scroll For Software Companies  <i class="fa fa-long-arrow-right"></i> </div>
    <table class="overflow_hidden relative table-scrollable flex flex_row">
        <thead class="b_0 bg_shade-5 br-r_1 br_primary-1 br_solid flex_shrink float_left l_0 relative:lg relative:md shadow_3 t_0 w_40">
            <tr class=""flex flex_column>
                <th>Certified NCDR Software Vendor</th>
                <th>IMPACT Registry</th>
                <th>ACTION Registry</th>
                <th>PVI Registry</th>
                <th>CathPCI Registry</th>
                <th>ICD Registry</th>
                <th>AFib Registry</th>
            </tr>
        </thead>
        <tbody class="flex_auto float_right overflow_scroll scrollbar-mini w_60">
            <tr>
                <td><a href="#157" class="parent-cell">ARMUS Corporation</a></td>
                <td>Certified 04/21/2017</td>
                <td>Certified 12/23/14</td>
                <td>Certified October 18, 2017
                </td>
                <td>Certified - Interoperable with ACTION v2 07/14/10</td>
                <td>Certified 08/05/2016</td>
                <td>Certified 08/05/2016</td>
            </tr>
            <tr>
                <td><a href="#101" class="parent-cell">Axis Clinical Software, Inc.</a></td>
                <td>Certified 08/24/2016</td>
                <td>Interoperable with CathPCI and ICD v4 01/13/15</td>
                <td>Certified 11/07/2014</td>
                <td>Certified Interoperable with ACTION v2 10/28/11 and ICD v2 04/13/12
                    <br><b>*Metric License </b></td>
                <td>Certified 05/27/16
                    <br><b>*Metric License </b></td>
                <td>Certified 07/29/2016</td>
            </tr>
            <tr>
                <td><a href="#127" class="parent-cell">BayaTree, LLC</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 07/12/2017</td>
                <td>&nbsp;
                </td>
                <td>Certified 08/18/2009</td>
                <td>Certified 05/24/16</td>
                <td>Certified 09/09/2016</td>
            </tr>
            <tr>
                <td><a href="#179" class="parent-cell">CardioAccess, Inc.</a></td>
                <td>Certified 06/03/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#110" class="parent-cell">CardioPulse</a></td>
                <td>&nbsp;
                </td>
                <td>Interoperable with CathPCI v4 and ICD v2 04/10/15</td>
                <td>&nbsp;
                </td>
                <td>Interoperable with ICD v2 and ACTION v2 9/6/11</td>
                <td>Certified 09/08/2016</td>
                <td>Certified 10/18/2017</td>
            </tr>
            <tr>
                <td><a href="#103" class="parent-cell">Cedaron Medical, Inc.</a></td>
                <td>Certified 01/15/2016</td>
                <td>Interoperable with CathPCI and ICD v4 11/24/14
                    <br><b>*Metric License </b></td>
                <td>Certified 06/03/2014
                    <br><b>*Metric License </b></td>
                <td>Certified Interoperable with ACTION v2 05/04/10
                    <br><b>*Metric License </b></td>
                <td>Certified 05/25/16
                    <br><b>*Metric License </b></td>
                <td>Certified 07/13/2016</td>
            </tr>
            <tr>
                <td><a href="#140" class="parent-cell">Epic</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 06/09/2009</td>
                <td>Certified 04/28/2016</td>
                <td>Certified 04/12/2017</td>
            </tr>
            <tr>
                <td><a href="#205" class="parent-cell">Flexible Informatics</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 07/13/2017</td>
                <td>Certified 07/25/2017</td>
            </tr>
            <tr>
                <td><a href="#105" class="parent-cell">GE Healthcare</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 03/06/2009</td>
                <td>Certified 07/07/16</td>
                <td>Certified 07/12/2016</td>
            </tr>
            <tr>
                <td><a href="#200" class="parent-cell">Health Level</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified v4.4 12/07/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#108" class="parent-cell">heartbase</a></td>
                <td>&nbsp;
                </td>
                <td>Interoperable with CathPCI and ICD 05/01/15</td>
                <td>Certified 06/18/2014</td>
                <td>Interoperable with ACTION v2 and ICD v2 03/29/13
                    <br><b>*Metric License </b></td>
                <td>Certified 06/08/16</td>
                <td>Certified 08/03/2016</td>
            </tr>
            <tr>
                <td><a href="#118" class="parent-cell">Juniper Consulting Group</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 06/22/2009</td>
                <td>Certified 05/24/16</td>
                <td>Certified 11/10/2016</td>
            </tr>
            <tr>
                <td><a href="#111" class="parent-cell">LUMEDX</a></td>
                <td>Certified 03/17/2016
                    <br><b>*Metric License </b></td>
                <td>Interoperable with CathPCI and ICD v4 02/05/15</td>
                <td>Certified 05/11/2015</td>
                <td>Interoperable with ACTION v2</td>
                <td>Certified 08/10/16
                    <br><b>*Metric License </b></td>
                <td>Certified 12/22/2016</td>
            </tr>
            <tr>
                <td><a href="#183" class="parent-cell">Navion Healthcare Solutions</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 01/23/15
                    <br><b>*Metric License </b></td>
                <td>&nbsp;
                </td>
                <td>Certified 04/01/2013
                    <br><b>*Metric License </b></td>
                <td>Certified 08/09/16
                    <br><b>*Metric License </b></td>
                <td>Certified 04/19/2017</td>
            </tr>
            <tr>
                <td><a href="#199" class="parent-cell">Q-Centrix</a></td>
                <td>&nbsp;
                </td>
                <td>Certified v2.4 05/17/2016
                    <br><b>*Metric License </b></td>
                <td>&nbsp;
                </td>
                <td>Certified 04/28/16
                    <br><b>*Metric License </b></td>
                <td>Certified 11/22/2016</td>
                <td>Certified 10/12/2017</td>
            </tr>
            <tr>
                <td><a href="#138" class="parent-cell">Quantros, Inc.</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 09/30/2009</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#153" class="parent-cell">Quintiles</a></td>
                <td>&nbsp;
                </td>
                <td>Certified 03/10/15</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#176" class="parent-cell">Scientific Software Solutions, Inc.</a></td>
                <td>Certified 02/05/2016</td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
            </tr>
            <tr>
                <td><a href="#174" class="parent-cell">SoftLink International Inc.</a></td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>&nbsp;
                </td>
                <td>Certified 05/02/2012</td>
                <td>Certified 05/26/2016</td>
                <td>Certified 05/26/2016</td>
            </tr>
        </tbody>
    </table>
</div>

Styleguide HTML.Table.Scrollable
*/
.table-scrollable-container:after {
  display: table;
  clear: both;
  content: "";
}
.table-scrollable-container thead th {
  height: 112px;
  height: 7rem;
}
.table-scrollable-container tbody {
  white-space: nowrap;
}
.table-scrollable-container tbody tr {
  white-space: normal;
}
.table-scrollable-container tbody td {
  height: 112px;
  height: 7rem;
}
.table-scrollable-container .instructions {
  display: block;
  width: 100%;
  padding: 4px 16px;
  padding: 0.25rem 1rem;
  font-size: 0.8333333333em;
  text-align: center;
}
.table-scrollable-container .instructions .fa {
  margin: 0 4px;
  margin: 0 0.25rem;
}

.table-scrollable .parent-cell {
  font-size: 1.2em;
}
/*
  Table

  There is a basic styling around the pure DOM of a table.   But to get full brand styling alter the parent tag to <table class='table'>.

  Markup:
  <table>
    <thead>
      <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
      <tr>
        <td>Content Goes Here</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content Goes Here</td>
        <td>Content Goes Here</td>
      </tr>
    </tbody>
  </table>

 Styleguide HTML.Table
*/
/*

Table Styled

<table class='table'> will style the table with the generic branded coloring and spacing. 

Markup:
<table class="table">
  <thead class="thead">
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table row 1 table cell A
        <br>
        <small class="c_primary">this is small text in blue</small>
      </td>
      <td>table row 1 table cell B
        <br>
        <small class="c_highlight">this is small text with magenta</small>
      </td>
      <td>table row 1 table cell C</td>
    </tr>
    <tr>
      <td>table row 2 table cell A</td>
      <td>table row 2 table cell B</td>
      <td>table row 2 table cell C</td>
    </tr>
  </tbody>
  <tfoot class="tfoot">
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.BasicStyle
*/
.table {
  border-spacing: 0;
}
.table .thead,
.table thead {
  background-color: white;
}
.table .thead th,
.table .thead td,
.table thead th,
.table thead td {
  border-bottom: 2px solid #00b1dd;
}
.table .tfoot,
.table tfoot {
  background-color: #f3f2f2;
}
.table .tfoot th,
.table .tfoot td,
.table tfoot th,
.table tfoot td {
  border-top: 1px solid #9c9492;
  font-style: italic;
}

/*

Table Column Shaded

`<table class="table column-shaded">` gives a blue tint to every other column in the table.



Markup:
<table class="table column-shaded">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td>row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td>row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.ColumnShaded
*/
.table.column-shaded .thead th:nth-child(even),
.table.column-shaded thead th:nth-child(even) {
  background-color: #d8edff;
}
.table.column-shaded .tbody td:nth-child(even),
.table.column-shaded tbody td:nth-child(even) {
  background-color: #ddf8ff;
}
.table.column-shaded .tbody tr:nth-child(even) td:nth-child(even),
.table.column-shaded tbody tr:nth-child(even) td:nth-child(even) {
  background-color: #a9d8ff;
}

/*


Table Unshaded

`<table class="table unshaded"> removes the shadding for rows and footer giving a cleaner table. This table type is great for small data sets and removes the 100% wide table that is default in all other tables.  

Markup:
<table class="table unshaded">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td>row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td>row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.Unshaded
*/
.table.unshaded {
  width: auto;
  border: none;
}
.table.unshaded thead {
  border-top: none;
  border-right: none;
  border-left: none;
}
.table.unshaded tbody tr:nth-child(even) {
  background-color: unset;
}
.table.unshaded tbody tr + tr td {
  border-top: 1px #f3f2f2 solid;
}
.table.unshaded tfoot {
  background-color: unset;
}

/*

Table Column Shading: recipe

Table shading can be much more dynamic and varied if you are willing to build with utlity classes(UC's). You can see few variations of tables bellow that have been quickly been made with a basic table and background color classes applied to cells. 

.primary          - column colored variations of primary
.info             - column colored variations of info 
.accent      - column colored variations of highlighted 

Markup:
<table class="table">
  <thead>
    <tr>
      <th>table header</th>
      <th class="bg_{{modifier_class}}-4">table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td class="bg_{{modifier_class}}-5">row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr>
      <td>row 2 cell A</td>
      <td class="bg_{{modifier_class}}-4">row 2 cell B</td>
      <td>row 2 cell C</td>
    </tr>
    <tr>
      <td>row 3 cell A</td>
      <td class="bg_{{modifier_class}}-5">row 3 cell B</td>
      <td>row 3 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.UtilityClasses.Shading
*/
/*
Table Cell States: RECIPE

States can be easily applied to the tables using UC's


Markup:
<table class="table">
  <tr>
    <td class="bg_alert-4 border_solid border-width_1 border_alert font-weight_bold text_center">
      <i class="fas fa-times-circle"></i>
    </td>
    <td class="">
    </td>
    <td class="">Text</td>
    <td class="bg_warning-4 border_solid border-width_1 border_warning font-weight_bold">
      <i class="fas fa-exclamation-triangle"></i> Warning</td>
  </tr>
  <tr>
    <td class="">
    </td>
    <td class="bg_info-4 border_solid border-width_1 border_info font-weight_bold text_center">
      <i class="fas fa-lightbulb-exclamation"></i>
    </td>
    <td class="">Text</td>
    <td class="bg_info-4 border_solid border-width_1 border_info font-weight_bold">
      <i class="fas fa-lightbulb-exclamation"></i>
      Info</td>
  </tr>
  <tr>
    <td class="">
    </td>
    <td class="warning icon">
    </td>  
    <td class="bg_alert-4 border_solid border-width_1 border_alert font-weight_bold">Alert</td>
    <td class=""> Text</td>
  </tr>
  <tr>
    <td class="success icon">
    </td>
    <td class="info icon">
    </td>
    <td class="bg_success-4 border_solid border-width_1 border_success font-weight_bold"><i class="fas fa-check"></i> Success</td>
    <td class=""> text</td>
  </tr>
</table>

Styleguide HTML.Table.UtilityClasses.CellStates
*/
/*

Table Seperators: RECIPE

Styling seperators on tables is now completely controled by utility classes giving much more flexablity to designs.



Markup:
<table class="table stripped">
  <thead>
    <tr>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_info-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_info font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With Info</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_success-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_success font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With success</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
    <tr class="bg_alert-1 border_solid border-left-width_0 border-right-width_0 border-width_1 border border_alert font-weight_bold font_n2 text-left c_white">
      <td colspan='3' class="p_2">Separator With Alert</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
   <tr class="bg_warning-1 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_warning font-weight_bold font_n2 text-left">
      <td colspan='3' class="p_2">Separator With warning</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
   <tr class="bg_shade-3 border_solid border-left-width_0  border-right-width_0 border-width_1 border border_shade font-weight_bold font_n2 text-left">
      <td colspan='3' class="p_2">Separator With disabled</td>
    </tr>
    <tr>
      <td>row 1 cell A</td>
      <td>row 1 cell B</td>
      <td>row 1 cell C</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">footer cell</td>
    </tr>
  </tfoot>
</table>

Styleguide HTML.Table.UtilityClasses.RowSeperators
*/
/*
Buttons

Basic Buttons

.primary	            	- Primary Class Button (default)
.secondary 	            - Second Class Button
.shade 	            	- Shade Class Button
.navigation             - Button reserved for navigation elements
.success                - Success State.
.alert                  - Alert State.
.warning	            	- Warning State
.hollow		            - All button states can become hollow
.clear		            - All button states can become hollow
.dropdown		        	- All button states can become hollow
.radius		            - Give the button softer corners
.shadow.clear		   	- Give a button a shadow
.tiny		           		- tiny buttons
.small		            - Small buttons
default		            - Medium buttons (default)
.large		            - Large buttons
.xlarge		            - Large buttons
.disabled	            - Disabled buttons

Markup:
<a data-style="{{ modifier_class }}"  class="button {{modifier_class}}">{{modifier_class}} button</a>

 Styleguide HTML.Buttons
*/
.button {
  white-space: nowrap;
}
.button.hollow,.button.clear {
  background-color: transparent;
}
.button.clear {
  border-color: transparent;
}
.button.shadow {
  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);
}
.button.shadow:hover {
  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);
}

.close-button {
  right: 0;
  left: 0;
  width: 100%;
  border-top: #0088aa 9px solid;
  text-align: right;
}
.close-button span {
  padding: 0 0.2em;
  background: #0088aa;
  vertical-align: top;
}
.close-button:focus {
  outline: none;
}

/*

    Question Structure

    shade - default decoration when there is no validation run on the input.

    Markup:
    <div data-style="{{ modifier_class }}"  class="question required {{modifier_class}}">
    <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
    </label>
    <div class="input-holder grid-x c_{{modifier_class}}">
        <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
        </div>
        <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
        </div>
        <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
        </div>
        <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
        </div>
        <div class="input-space cell auto">
            <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
        </div>
    </div>
    <div class="message-holder font_n1">
        <div class="alert p_2 bg_alert-n1 c_white">
        <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2"></i> Error message</div>
        <div class="warning p_2 bg_warning-n1 c_white">
        <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
        <div class="info p_2 bg_info-n1 c_white">
        <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
    </div>
    <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Weight: -1

    Styleguide Questions.Introduction
*/
/*

    Question Structure with States applied

    shade - default decoration when there is no validation run on the input.
    alert   - alert settings for questions
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.
    success - On rare occations it is needed for a success response on an input.

    Markup:
    <div class="question required {{modifier_class}}">
    <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
        </label>
    <div class="input-holder grid-x c_{{modifier_class}}">
        <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
        </div>
        <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
        </div>
        <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
        </div>
        <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
            <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
        </div>
        <div class="input-space cell auto">
            <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
        </div>
    </div>
    <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
            <div class="success br_success-n1 c_success ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> succes message are rare but sometimes needed.</div>
        </div>
    <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.States
*/
.question div.alert,
.question div.warning,
.question div.info,
.question div.success {
  display: none;
}

.alert.question div.alert,
.warning.question div.warning,
.info.question div.info,
.success.question div.success {
  display: block;
}

.alert.question select {
  border-color: #ff1e1e;
  color: #600000;
}

.warning.question select {
  border-color: #f8c474;
  color: #a76808;
}

.info.question select {
  border-color: #c5beb7;
  color: #6a6055;
}

.success.question select {
  border-color: #24f462;
  color: #04571d;
}

.required .required-holder {
  display: inline-flex;
}

.switch {
  margin-bottom: 0;
}

.switch-value {
  margin-left: 8px;
  margin-left: 0.5rem;
}

.question {
  display: flex;
  flex-direction: column;
}

.label-holder,.input-holder,.message-holder {
  flex: 1 0 auto;
}

.message-holder div {
  padding: 4px;
  padding: 0.25rem;
  border-top-width: 4px;
  border-top-width: 0.25rem;
  border-top-style: solid;
}

.hint-holder {
  flex: 1 0 auto;
}

/*

    Question Input Value Area

    shade - default decoration when there is no validation run on the input.
    alert   - alert settings for questions
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.
    success - On rare occations it is needed for a success response on an input.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
        <span class="text cell shrink">Question Text</span>
        <span class="required-holder cell shrink">
            <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
        </span>
        </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell auto">
                <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
            </div>
            <div class="br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="value">Years</span>
            </div>
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Value Area
*/
/*

    Question with grouped inputs

    shade - default decoration when there is no validation run on the input.
    alert - alerts show up when errors are validated from the input.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="input-x" class="label-holder grid-x c_{{modifier_class}} font_1">
            <span class="text cell shrink">Question Text</span>
            <span class="required-holder cell shrink">
                <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
            </span>
            </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell small-2">
                <select name="" id="" class="m-b_0">
                    <option value="">All</option>
                    <option value="">Group A</option>
                    <option value="">Group B</option>
                </select>
            </div>       
            <div class="input-space cell auto">
                <input id="input-x" type="text" class="m-b_0 br_{{modifier_class}}-3 " />
            </div>
            <div class="br_{{modifier_class}}-3  bg_{{modifier_class}}-4 c_{{modifier_class}}-n2  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="value">Years</span>
            </div>
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Grouped Inputs
*/
/*

    Question with Switches

    shade - default decoration when there is no validation run on the input.
    alert - alert on the area of inputs
    warning - warning decoration for when required is missing. 
    info - sometimes inputs show extra informaiton when an item is selected or when a value is entered.

    Markup:
    <div class="question required {{modifier_class}}">
        <label for="tinySwitch_{{modifier_class}}" class="grid-x c_{{modifier_class}} font_1 label-holder">
            <span class="text cell shrink">Question Text</span>
            <span class="required-holder cell shrink">
                <i class="fas fa-asterisk c_warning font_n3 vertical-align_t"></i>
            </span>
        </label>
        <div class="input-holder grid-x c_{{modifier_class}}">
            <div class="alert br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-square"></i></span>
            </div>
            <div class="warning br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-exclamation-triangle"></i></span>
            </div>
            <div class="info br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-lightbulb-exclamation"></i></span>
            </div>
            <div class="success br_{{modifier_class}}-3  bg_{{modifier_class}}-4  value-space cell shrink  br_solid br-w_1 p_3 p-b_2 b_shade-4 texture_light">
                <span class="c_{{modifier_class}} p_2"><i class="fas fa-fw fa-check-square"></i></span>
            </div>
            <div class="input-space cell auto grid-x">
                <div class="cell grid-x p_3 p-r_0 small-12 medium-6">
                    <div class="switch tiny radius cell shrink">
                        <input class="switch-input" id="tinySwitch_{{modifier_class}}" type="checkbox" name="exampleSwitch">
                        <label class="switch-paddle" for="tinySwitch_{{modifier_class}}">
                            <span class="show-for-sr">Tiny Sandwiches Enabled</span>
                        </label>
                    </div>
                    <label class="switch-value cell auto font_bold" for="tinySwitch_{{modifier_class}}">No Question</label>
                </div>
                <div class="cell grid-x p_3 p-r_0 small-12 medium-6">
                    <div class="switch tiny radius cell shrink">
                        <input class="switch-input" id="tinySwitchNo_{{modifier_class}}" type="checkbox" name="exampleSwitch">
                        <label class="switch-paddle" for="tinySwitchNo_{{modifier_class}}">
                            <span class="show-for-sr">Tiny Sandwiches Enabled</span>
                        </label>
                    </div>
                    <label class="switch-value cell auto font_bold" for="tinySwitchNo_{{modifier_class}}">Yes Question</label>
                </div>
            </div>     
        </div>
        <div class="message-holder font_n1 font_bold">
            <div class="alert br_alert-n1 c_alert">
            <i class="fas fa-fw fa-exclamation-square m-r_3 m-l_2 "></i> Error message</div>
            <div class="warning br_warning-n1 c_warning ">
            <i class="fas fa-fw fa-exclamation-triangle m-r_3 m-l_2"></i> Warning message</div>
            <div class="info br_info-n1 c_info ">
            <i class="fas fa-fw fa-lightbulb-exclamation m-r_3 m-l_2"></i> Informational message about your input</div>
        </div>
        <div class="hint-holder m-t_2 font_n1 c_shade p_2 p-t_0">This is some hint-holder text</div>
    </div>

    Styleguide Questions.Switches
*/
/*
 Pagination

 This is what pagination should look like and its modifications.

 Markup:
 <nav aria-label="Pagination" class="border_solid border_primary border-top-width_3">
  <ul class="pagination font_display font_bold">
    <li class="pagination-previous disabled"><i class="fas fa-chevron-left"></i> <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="fal fa-ellipsis-h" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page"><i class="fas fa-chevron-right"></i><span class="show-for-sr">page</span></a></li>
  </ul>
</nav>

 Styleguide Navigation.Pagination
*/
.pagination-previous,
.pagination-next {
  background: #d0cdcc;
}

.pagination .disabled:hover {
  background-image: url("../img/cross_disabled.png");
}

/*
 Pagination in Card

 This is what pagination should look like and its modifications.

 Markup:
 <div class="card shadow_2" >
    <div class="card-section">
        <h4>This is a card.</h4>
    </div>
    <nav aria-label="Pagination" class=" pagination-container">
      <ul class="pagination font_display font_bold float-right">
        <li class="pagination-previous disabled"><i class="fas fa-chevron-left"></i> <span class="show-for-sr">page</span></li>
        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
        <li class=""><a href="#" aria-label="Page 2">2</a></li>
        <li class=""><a href="#" aria-label="Page 3">3</a></li>
        <li class=""><a href="#" aria-label="Page 4">4</a></li>
        <li class=" fal fa-ellipsis-h " aria-hidden="true"></li>
        <li class=""><a href="#" aria-label="Page 12">12</a></li>
        <li class=""><a href="#" aria-label="Page 13">13</a></li>
        <li class="pagination-next"><a href="#" aria-label="Next page"><i class="fas fa-chevron-right"></i><span class="show-for-sr">page</span></a></li>
      </ul>
    </nav>
</div>

 Styleguide Navigation.Pagination.Cards
*/
.pagination-container {
  padding: 0 8px;
  padding: 0 0.5rem;
  background: #0088aa;
}
.pagination-container .pagination {
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}
.pagination-container .current {
  background: white;
  color: #0088aa;
}
.pagination-container a:not([class=pagination-previous]):not([class=pagination-next]) {
  color: white;
}
.pagination-container a:not([class=pagination-previous]):not([class=pagination-next]):hover {
  color: #131212;
}

/*

  Breadcrumbs

  Markup:
  <nav aria-label="You are here:" role="navigation">
    <ul class="breadcrumbs font_1">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Features</a></li>
      <li class="font-italic">Gene Splicing</li>
      <li>
        <span class="show-for-sr">Current: </span> Cloning
      </li>
    </ul>
  </nav>

  Styleguide Navigation.Breadcrumbs
*/
/*

  Switches

  Markup:
  <div class="switch tiny switch_radius p_5">
    <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="tinySwitch">
      <span class="show-for-sr">Tiny Sandwiches Enabled</span>
    </label>
  </div>
  <div class="switch small round p_5">
    <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="smallSwitch">
      <span class="show-for-sr">Small Portions Only</span>
    </label>
  </div>
  <div class="switch large p_5">
    <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="largeSwitch">
      <span class="show-for-sr">Show Large Elephants</span>
    </label>
  </div>

  Styleguide HTML.Switches
  */
/*

  Progress Bars

  Markup:
<div class="row">
  <div class="primary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
    <div class="progress-meter" style="width: 25%">
      <p class="progress-meter-text">25%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="warning progress">
    <div class="progress-meter" style="width: 50%">
      <p class="progress-meter-text">50%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="alert progress">
    <div class="progress-meter" style="width: 75%">
      <p class="progress-meter-text">75%</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="success progress" role="progressbar" tabindex="0" aria-valuenow="100" aria-valuemin="0" aria-valuetext="100 percent" aria-valuemax="100">
    <div class="progress-meter" style="width: 100%">
      <p class="progress-meter-text">100%</p>
    </div>
  </div>
</div>

  Styleguide HTML.ProgressBars
  */
/*

  Call Out Example

  Markup:
  <div class="callout" data-closable>
    <button class="close-button" aria-label="Close alert" type="button" data-close>
      <span aria-hidden="true"><i class="fas fa-times"></i></span>
    </button>
    <div class="p_3 p-x_4">
    <h1>Hello User</h1>
    <p>This is a callout with close button example.</p>
    </div>
  </div>

  Styleguide HTML.Callout
*/
/*

  Accordian

  You can see how on the third accordian how utility classes can be added to tranform the look and feel, and you can add toggle icons as well

  Markup:
  <ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 1</a>
      <div class="accordion-content" data-tab-content >
        <p>Panel 1. Lorem ipsum dolor</p>
        <a href="#">Nowhere to Go</a>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title"><i class="fas icon-toggle_plus-minus"></i> Accordion 2</a>
      <div class="accordion-content" data-tab-content>
        <textarea></textarea>
        <button class="button">I do nothing!</button>
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title font_2 bg_primary-3 h:c_white h:bg_primary"><i class="fas icon-toggle_caret-circle-right-down"></i> Accordion 3</a>
      <div class="accordion-content shadow_n1 texture_light" data-tab-content>
        Type your name!
        <input type="text"></input>
      </div>
    </li>
  </ul>

  Styleguide Containers.Accordian
*/
/*
    Tabs

    Markup:
    <ul class="texture_light tabs"data-active-collapse="true"data-tabs id="collapsing-tabs">
        <li class="tabs-title is-active"><a href="#panel1c"aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel is-active" id="panel1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel" id="panel2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel" id="panel3c">
            <img src="https://picsum.photos/400/300">
        </div>
        <div class="tabs-panel" id="panel4c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

    Styleguide Navigation.Tabs

*/
/*
    Tabs Inset Area

    Markup:
    <div class="bg_white br_1 br_shade-4 br_solid p_4">
        hello this is some text
    </div>
    <ul class="texture_light tabs br_primary bg_primary-3 shadow_n3 p-x_2 p-t_3 br-b_0" data-active-collapse="true" data-tabs id="collapsing-tabs">
        <li class="tabs-title m-x_1 is-active"><a class="br-tr_radius br-tl_radius h:bg_white br_primary"href="#panel-demo2-1c"aria-selected="true"><i class="fal icon-complete_check"></i>Tab 1</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-2c"><i class="fal icon-complete_check"></i>Tab 2</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-3c"><i class="fal icon-complete_check"></i>Tab 3</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white br-tr_radius br-tl_radius h:bg_primary" href="#panel-demo2-4c"><i class="fal icon-complete_check"></i>Tab 4</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel card-section  is-active" id="panel-demo2-1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-3c">
            <img src="https://picsum.photos/400/300">
        </div>
        <div class="tabs-panel card-section" id="panel-demo2-4c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

    Styleguide Navigation.Tabs.Inset

*/
/*
    Tabs In A Card

    Use Case: When content of a card needs to be toggled rather then a whole section of a page.

    Markup:
        <div class="card shadow_2 cell small-6 large-4" style="max-width: 500px;">
      <div class="font_slab border-top-left-square c_white font_3 p_4 texture_dust bg_primary">
      This is a header
      </div>
    <ul class="texture_light tabs br_0 bg_primary br_none texture_dust p-x_2 p-t_3 br-b_0" data-active-collapse="true" data-tabs id="collapsing-tabs">
        <li class="tabs-title m-x_1 is-active"><a class="br-tr_radius br-tl_radius h:bg_white br_primary"href="#panel-demo2-1c"aria-selected="true"><i class="fal icon-complete_check"></i>Overview</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white c_white-3 br-tr_radius br-tl_radius h:bg_primary-n2" href="#panel-demo2-2c"><i class="fal icon-complete_check"></i>Details</a></li>
        <li class="tabs-title m-x_1"><a class="h:c_white c_white-3 br-tr_radius br-tl_radius h:bg_primary-n2" href="#panel-demo2-3c"><i class="fal icon-complete_check"></i>Extra</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="collapsing-tabs">
        <div class="tabs-panel-demo2 is-active p-x_4 p-y_3" id="panel-demo2-1c">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel-demo2  p-x_4 p-y_3" id="panel-demo2-2c">
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel-demo2  p-x_4 p-y_3" id="panel-demo2-3c">
            <img src="https://picsum.photos/400/300">
        </div>
    </div>
    </div>

    Styleguide Navigation.Tabs.OnCard

*/
.nav-link {
  padding-right: 4px;
  padding-right: 0.25rem;
  padding-left: 4px;
  padding-left: 0.25rem;
}

.navbar-primary .dropdown-toggle:after {
  display: none;
}

@media screen {
  .navbar-expand-sm .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
@media screen and (min-width: 40em) {
  .navbar-expand-md .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
@media screen and (min-width: 64em) {
  .navbar-expand-lg .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-item {
  color: #007491;
}
.dropdown-item:hover {
  color: white;
}

/* 

Primary Nav 

The Header Nav of ACC.org 

Markup:
<div class="flex relative br_solid br_0 br-t_3 br_accent-alt">
	<nav class="bg_shade-2 flex_auto font_0 font_1:lg font_display navbar navbar-dark navbar-expand-lg navbar-primary p-x_0 uppercase">
		<button class="br_white-2 flex is-active_toggle-function m-l_3 m-l_n2 m-y_2 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed" type="button" data-toggle="collapse" data-target="#navbarLoginContent" aria-controls="navbarLoginContent" aria-expanded="false" aria-label="Toggle navigation">
			<i class="a:c_acc-2 c_white fas flex_shrink font_0 icon-toggle_bars-times self_center"></i><span class="a:c_acc-2 c_white flex_auto self_center">&nbsp;Menu</span>
		</button>
		<div class="navbar-collapse collapse" id="navbarLoginContent" style="">
			<ul class="expand expanded flex flex_column flex_row:lg nav text_center:lg text_left w_100">
				<li class="nav-item flex_shrink">
					<a class="active c_white h:bg_shade nav-link p-x_4 p-x_5:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources"><i class="fas fa-home"></i><span class="display_none:lg p-x_3">Home</span></a>
				</li>
				<li class="nav-item flex_auto dropdown">
					<a class="c_white dropdown-toggle h:bg_shade is-active_toggle-function nav-link p-x_4" href="/NCDR-Home" target="_self" data-delay="300" data-close-others="false" id="clinicalTopicsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Clinical Topics</a>
					<div class="absolute:lg br_1 br_none br_shade-3 br_solid:lg c_white dropdown-menu font_bold l_0 m-t_0 m-x_0 m-x_0:lg p_0 r_0 relative w_100" aria-labelledby="clinicalTopicsDropdown">
						<ul class="bg_shade-5 font_0 font_bold lh_1 ul_none">
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/about-ncdr" target="_self">About NCDR</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/registries" target="_self">Registries</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/data-collection" target="_self">Data Collection</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/reports" target="_self">Reports</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/quality-payment-program" target="_self">Quality Payment Program</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/research" target="_self">Research</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/analytics" target="_self">Analytics</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/annual-conference" target="_self">ACC Quality Summit</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/ncdr-learning-center" target="_self">NCDR Learning Center</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/transform-ldl-c-risk" target="_self">TRANSFORM LDL C Risk</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/participant-directory" target="_self">Participant Directory</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/acc-public-reporting" target="_self">ACC Public Reporting</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/clinical-quality-coach" target="_self">NCDR Clinical Quality Coach Practice Dashboard</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="https://www.ncdr.com/webncdr/Login?ReturnUrl=/webncdr/home/registry-selection" target="_self">Registry Participant Login</a></li>
							<li class="nav-item"><a class="c_shade-2 dropdown-item h:bg_shade-1 h:c_shade-5 nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/join-a-registry" target="_self">Join a Registry</a></li>
						</ul>
					</div>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link active h:bg_shade c_white p-x_4" href="#">deserunt</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">sit dolor commodo</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">adipisicing</a>
				</li>
			</ul>
		</div>
	</nav>
	<nav class="absolute flex_shrink font_0 font_1:lg gradient_teal navbar navbar-dark navbar-expand p-b_1 p_0 r_0 relative:lg">
		<ul class="navbar-nav">
			<li class="dropdown h:gradient_teal-reverse nav-item show">
				<a class="block is-active_toggle-function nav-link p-x_5:lg" id="myACCDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="far icon-toggle_chevron-up-down"></i> Sign In</a>
				<div class="br_none br_solid:lg dropdown-menu dropdown-menu-right font_0 m-t_n1 p_0 r_0 show" aria-labelledby="navbarDropdown">
					<ul class="ul_none">
						<li class="nav-item">
							<a class="dropdown-item nav-link bg_accent h:bg_accent-n2 c_white flex" href="#">
								<span class="flex_auto inline-block p-l_2 p-r_4 uppercase">CV Quality </span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log Out <i class="fas fa-sign-out"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">Accreditation</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">NCDR</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
					</ul>
				</div>
			</li>
			<li class="br-l_1 br_solid br_white-3 h:gradient_teal-reverse nav-item">
				<a class=" nav-link" href="#" title="Sign Out of all Systems"><i class="fas fa-sign-out-alt"></i></a>
			</li>
		</ul>
	</nav>
</div>

Weight:  -100 

Styleguide Recipes CVQualtiy.Navs.Primary

*/
.card.testimonial,
.card.product {
  margin-top: 0;
  padding: 0;
  border-width: 1px;
  border-style: solid;
}
@media screen and (min-width: 40em) {
  .card.testimonial,
.card.product {
    margin-top: 100px;
  }
}
.card.testimonial .card-header,
.card.product .card-header {
  margin-bottom: 75px;
}
@media screen and (min-width: 40em) {
  .card.testimonial .card-header,
.card.product .card-header {
    margin-bottom: 0;
  }
}
.card.testimonial .card-img,
.card.product .card-img {
  width: 100px;
  height: 100px;
  margin: 20px auto -50px;
}
@media screen and (min-width: 40em) {
  .card.testimonial .card-img,
.card.product .card-img {
    width: 200px;
    height: 200px;
    margin: -100px auto 20px;
  }
}
.card.testimonial .card-body,
.card.product .card-body {
  position: relative;
  padding: 10px 1em 1em;
}
.card.testimonial .blockquote,
.card.product .blockquote {
  position: relative;
  text-align: center;
}
.card.testimonial .blockquote p,
.card.testimonial .blockquote-cite,
.card.product .blockquote p,
.card.product .blockquote-cite {
  display: block;
}
.card.testimonial .blockquote p,
.card.product .blockquote p {
  font-size: 1.2em;
}
.card.testimonial .blockquote p:before, .card.testimonial .blockquote p:after,
.card.product .blockquote p:before,
.card.product .blockquote p:after {
  color: #ffc425;
}
.card.testimonial .blockquote p:before,
.card.product .blockquote p:before {
  margin-right: 0.5em;
  content: "";
}
.card.testimonial .blockquote p:after,
.card.product .blockquote p:after {
  margin-left: 0.5em;
  content: "";
}
.card.testimonial .blockquote-cite,
.card.product .blockquote-cite {
  position: relative;
  right: 0;
  color: #b5b0ae;
  font-size: 1em;
}
.card.testimonial .blockquote-cite:after,
.card.product .blockquote-cite:after {
  margin-left: 0.5em;
  content: "";
}

/**
* Horizontal Testimonial are compact containers for Testimonial Data Type 
*
* @molecule Testimonial Card (.horizontal)
* @section Card > Testimonial
* @flag contained
* @markup
*  <div class="card testimonial horizontal">
*    <header class="card-header">
*       <img class="card-img  img-thumbnail" src="@{image:200:200}"/>
*    </header>
*    <div class="card-body">
*      <article class="blockquote">
*        <p>@{lipsum:15:words}</p>
*        <cite class="blockquote-cite">Someone famous</cite>
*      </article>
*    </div>
*  </div>
*
*/
@media screen and (min-width: 40em) {
  .card.testimonial.horizontal,
.card.product {
    display: block;
    display: flex;
    flex-direction: row;
    margin-top: 0;
  }
  .card.testimonial.horizontal .card-header,
.card.testimonial.horizontal .card-body,
.card.product .card-header,
.card.product .card-body {
    flex: 0 1 auto;
    width: unset;
    margin: 0;
    padding: 10px;
    float: none;
    vertical-align: middle;
  }
  .card.testimonial.horizontal .card-img,
.card.product .card-img {
    width: 125px;
    height: 125px;
    margin: 10px;
  }
  .card.testimonial.horizontal .card-header,
.card.product .card-header {
    min-width: 160px;
  }
  .card.testimonial.horizontal .card-body,
.card.product .card-body {
    text-align: left;
  }
  .card.testimonial.horizontal .card-body .blockquote-cite,
.card.product .card-body .blockquote-cite {
    float: none;
  }
  .card.testimonial.horizontal .blockquote,
.card.product .blockquote {
    text-align: left;
  }
  .card.testimonial.horizontal .blockquote-cite,
.card.product .blockquote-cite {
    display: block;
    text-align: right;
  }
}

.card.testimonial.horizontal.undecorated,
.card.testimonial.undecorated {
  margin-top: 0;
}
.card.testimonial.horizontal.undecorated .card-header,
.card.testimonial.undecorated .card-header {
  display: none !important;
}

.card.testimonial.vertical-spacing {
  margin-bottom: 120px;
}

/*
Webinar

Graphic areas that hold a snippet of a webinar.
| Classes          | Effect                       |
| ---------------- | ---------------------------- |
| .ep-webinar      | Changes the product graphic. |
| .afib-webinar    | Changes the product graphic. |
| .cathlab-webinar | Changes the product graphic. |
| .cpc-webinar     | Changes the product graphic. |
| .fsed-webinar    | Changes the product graphic. |
| .hf-webinar      | Changes the product graphic. |



.ep-webinar      	- 	 Changes the product graphic.
.afib-webinar    	- 	 Changes the product graphic.
.cathlab-webinar 	- 	 Changes the product graphic.
.cpc-webinar     	- 	 Changes the product graphic.
.fsed-webinar    	- 	 Changes the product graphic.
.hf-webinar      	- 	 Changes the product graphic.

Markup:
<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="{{ modifier_class }}" >
    <div class="bg_black-1 card-header br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid {{modifier_class}} m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block btn-primary c_white">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>


 Styleguide Recipes CVQualtiy.Cards.Webinar

*/
/*
Webinar Buttons

Graphic areas that hold a snippet of a webinar.
| Style Combo | Effect                                                             | Classes                                      |
| ----------- | ------------------------------------------------------------------ | -------------------------------------------- |
| primary     | Alters the button style to a btn-primary instead of just a link.   | btn-primary c_white                          |
| shade   | Alters the button style to a btn-shade instead of just a link. | btn-shade c_white                        |
| success     | Alters the button style to a btn-success instead of just a link.   | bg_success h:bg_success-n2 br_radius c_white |



.btn-primary.c_white                            -  Alters the button style to a btn-primary instead of just a link.  
.btn-shade.c_white                          -  Alters the button style to a btn-shade instead of just a link.
.bg_success.h:bg_success-n2.br_radius.c_white   -  Alters the button style to a btn-success instead of just a link.  

Markup:
<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="{{ modifier_class }}" >
    <div class="bg_black-1 card-header  br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid ep-webinar m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block {{modifier_class}}">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>


 Styleguide Recipes CVQualtiy.Cards.Webinar Buttons

*/
.webinar {
  width: 100%;
  height: 140px;
  background-image: url(../img/cvquality/webinar/webinar-thumbnail.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.webinar.ep-webinar {
  background-image: url(../img/cvquality/webinar/ep-webinar-thumbnail.jpg);
}
.webinar.afib-webinar {
  background-image: url(../img/cvquality/webinar/afib-webinar-thumbnail.jpg);
}
.webinar.cathlab-webinar {
  background-image: url(../img/cvquality/webinar/cathlab-webinar-thumbnail.jpg);
}
.webinar.cpc-webinar {
  background-image: url(../img/cvquality/webinar/cpc-webinar-thumbnail.jpg);
}
.webinar.fsed-webinar {
  background-image: url(../img/cvquality/webinar/fsed-webinar-thumbnail.jpg);
}
.webinar.hf-webinar {
  background-image: url(../img/cvquality/webinar/hf-webinar-thumbnail.jpg);
}

/*
Jumbotron

Jumbotron are hero content areas. Larger marketing text with a colored backgrounds to grab the user or mark the page as important. By default Jumbotron is dark text on a light grey background the UC's add some predefined colored backgrounds allow for modificaiton of the area. The backgrounds were generated by this online generator https://qrohlf.com/trianglify-generator/.
| Class        | Effect                                               |
| ------------ | ---------------------------------------------------- |
| .orange-blue | orange to blue background                            |
| .orange-grey | orange to grey background                            |
| .blue-grey   | blue to grey background                              |
| .soft        | softens the edges of the triangles in the background |
| .blur        | blurs the back to a smooth gradient                  |

.orange-blue 		      - 	orange to blue background
.orange-grey 		      - 	orange to grey background
.blue-grey 			      - 	blue to grey background
.soft				      - 	softens the edges of the triangles in the background 
.blur.blue-grey 	      - 	blurs the back to a smooth gradient

 Markup:
<div class="jumbotron relative overflow_hidden br_round {{modifier_class}}">
   <div class="container p-x_4 max-w_60 w_auto m_auto">
         <h1 class="c_black font_10:lg font_6 font_8:md">I am a Jumbotron!</h1>
         <p class="font_1 font_1:md font_3:lg">Doloribus omnis facere voluptatibus beatae.</p>
         <div><a class="br_radius btn btn-primary gradient_teal h:gradient_teal-reverse" href="#" role="button">Learn more</a></div>
   </div>
</div>

Weight:  50

Styleguide Recipes CVQualtiy.Containers.Jumbotron

*/
.jumbotron:before {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../img/cvquality/pattern-grey.png") no-repeat center center;
  background-size: cover;
  content: "";
}
.jumbotron.orange-blue:before {
  background-image: url("../img/cvquality/pattern-orange-blue.png");
}
.jumbotron.orange-grey:before {
  background-image: url("../img/cvquality/pattern-orange-grey.png");
}
.jumbotron.blue-grey:before {
  background-image: url("../img/cvquality/pattern-blue-grey.png");
}
.jumbotron.soft:before {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  filter: blur(3px);
}
.jumbotron.blur:before {
  -webkit-filter: blur(25px);
  -moz-filter: blur(25px);
  -o-filter: blur(25px);
  -ms-filter: blur(25px);
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  filter: blur(25px);
}
.jumbotron .container {
  z-index: 3;
}

/*
Triangles

Colored Triangles are used through out the cvquality design.  To add triangle that adhears to the side of a container and takes on the color of the border color of the container. 

.triangle_left   -  left placed triangle.
.triangle_right   -  right placed triangle.
.triangle_bottom   -  bottom placed triangle.
.triangle_top   -  top placed triangle.

Markup:
<div class="bg_shade-5 br_1 br_accent br_radius card highlighted shadow_1 ">
 <div class="{{modifier_class}} br_accent"><h2 class="bg_tansparent br-b_0 c_accent c_shade-n4 card-header font_1 font_2:md font_bold font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div></div>
</div>

Styleguide Recipes CVQualtiy.Decorator.Triangles
*/
*[class*=triangle] {
  position: relative;
}

*[class*=triangle]::before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
}

.triangle_left::before,
.triangle_right::before {
  top: 50%;
  margin-top: -0.5em;
}

.triangle_top::before,
.triangle_bottom::before {
  left: 50%;
  margin-left: -0.5em;
}

.triangle_left {
  margin-left: 0.75em;
}

.triangle_right {
  margin-right: 0.75em;
}

.triangle_top {
  margin-top: 0.75em;
}

.triangle_bottom {
  margin-bottom: 0.75em;
}

.triangle_left::before {
  left: -0.75em;
  border-width: 0.5em 0 0.5em 0.75em;
  border-top-color: #0000;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: inherit;
}

.triangle_right::before {
  right: -0.75em;
  border-width: 0.5em 0.75em 0.5em 0;
  border-top-color: #0000;
  border-right-color: inherit;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

.triangle_top::before {
  top: -0.75em;
  border-width: 0.75em 0.5em 0 0.5em;
  border-top-color: inherit;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

.triangle_bottom::before {
  bottom: -0.75em;
  border-width: 0 0.5em 0.75em 0.5em;
  border-top-color: #0000;
  border-right-color: #0000;
  border-bottom-color: inherit;
  border-left-color: #0000;
}

/*
Editor Container Decorator

Editor Decorators are only visible in the Sitefinity Editor

Markup:
<div class="sfPageEditor">
     <div class="visible-authenticated-block">
        <ul class="nav-pills nav">
            <li class="nav-item active"><a class="nav-link">Profile</a></li>
            <li class="nav-item"><a class="nav-link">Settings</a></li>
            <li class="nav-item"><a class="nav-link">Logout</a></li>
        </ul>
     </div>
     <div class="visible-anonymous-block">
        <ul class="nav-pills nav">
            <li class="nav-item active"><a class="nav-link">FAQ</a></li>
            <li class="nav-item"><a class="nav-link">Getting Started</a></li>
            <li class="nav-item"><a class="nav-link">Login</a></li>
        </ul>
     </div>
 </div>

 Weight:  10000

Styleguide Sitefinity.Decorator
*/
.sfPageEditor .visible-anonymous-block, .sfPageEditor .visible-authenticated-block {
  display: block !important;
  margin: 5px;
  border: 2px dotted transparent;
  opacity: 0.75;
}

.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before, .sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
  display: block;
  position: relative;
  font-size: 12px;
  text-align: center;
}

.sfPageEditor .visible-anonymous-block img,
.sfPageEditor .visible-authenticated-block img {
  display: none;
}
.sfPageEditor .visible-authenticated-block {
  border-color: #58b5a5;
  background-color: #eef8f6;
}
.sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
  color: #047294;
  content: "AUTHENTICATED CONTENT - REMBER TO CHANGE PERMISIONS OF CONTENT IN AREA - Permision/Role/Authenticated";
}
.sfPageEditor .visible-anonymous-block {
  border-color: #ffc425;
  background-color: #fff9e9;
}
.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before {
  color: #e87d1e;
  content: "ANONYMOUS CONTENT - REMBER TO CHANGE PERMISIONS OF CONTENT IN AREA - Permision/Role/Anonymous";
}

/*
	CVquality Recipes

	The use of Utiltiy Class give us the ablitiy to create much of the UI needed for CV Quality without expanding on the base of the styles that are written.  Included are patterns to create some of the complex UI inside of CV Quality.

	Weight:  3000

	Styleguide Recipes CVQualtiy

*/
/*
Footer

The Footer of CVQuality.org 

Markup:
<div id="footer-wrap" class="">
	<!-- ********************************** breadcrumbs ********************************** -->
	<div id="breadcrumbs" class="br-b_3 br-t_1 br_0 br_accent br_solid br_t_3 breadcrumbs-container c_shade font_0 font_ui p-x_4 p_3">
		<b class="breadcrumbs-title">YOU ARE HERE: </b>
		Home
	</div>
	<!-- This is the inner footer that we cache -->
	<div id="footer" role="contentinfo" class="bg_shade-2 flex flex_column flex_inline flex_row:md flex_wrap p-x_3 p-y_0:lg p-y_4 w_100">
		<div class="br-l_1 br_so br_solid:lg br_white-3 flex_auto font_ui m-l_4:lg m-y_4:lg order-1 p-l_3:md p-l_4:lg p-y_4:md p-x_0 p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg br_white-6 c_shade-n4 font_0:md font_1 font_ui font_bold m-b_0:md m-b_2 m-b_2:lg m-t_4:md p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">
				Quality Improvement for Institutions:
			</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/home" id="msFooter_rptQii_hypLnk_0" target="_top">
						Home
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/About-QII" id="msFooter_rptQii_hypLnk_1" target="_top">
						About
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Get-Started" id="msFooter_rptQii_hypLnk_2" target="_top">
						Get Started
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/News" id="msFooter_rptQii_hypLnk_3" target="_top">
						News
					</a>
				</li>
			</ul>
		</div>
		<div class="br-r_1 br_0 br_solid:lg br_white-3 flex_auto font_ui m-r_4:lg m-y_4:lg order-1 p-r_4:lg p-x_3 p-y_4:md w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg font_1 br_white-6 c_shade-n5 font_0:md font_ui font_bold m-b_0 m-b_2:lg m-t_4:md nowrap p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">Offerings:</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/NCDR-Home" id="msFooter_rptOfferings_hypLnk_0" target="_top">
						NCDR
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Initiatives" id="msFooter_rptOfferings_hypLnk_1" target="_top">
						Initiatives
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/qi-communications-kit" id="msFooter_rptOfferings_hypLnk_2" target="_top">
						QI Participation Kit
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Clinical-Toolkits" id="msFooter_rptOfferings_hypLnk_3" target="_top">
						Clinical Toolkits
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/accreditation" target="_self">
						Accreditation
					</a>
				</li>
			</ul>
		</div>
		<!-- column 4 -->
		<div class="flex_auto order_0:md order_last p-x_3 p-y_4:lg relative w-grid:12:md w-grid_12 w-grid_3:lg">
			<div class="bg_left block display_none:md logo_condensed seal_primary" style="height: 80px;">
				<span class="alt">logo_condensed-alt max-w_20</span>
			</div>
<div class="bg_left block:md display_none logo_primary" style="height: 100px;">
				<span class="alt">logo_condensed-alt max-w_20</span>
			</div>
			<section class="address c_shade-n4 p-l_0:md p-y_0:md p-y_3">
				<address>
					<!-- http://microformats.org/wiki/hcard -->
					<h4 class="m-b_0 font_bold m-b_2:md font_copy font_normal font_1:md font_2 m-t_4:md">
						Heart House
					</h4>
					<div class="flex flex_column flex_row:md font_n1 lh_1 font_ui">
						<ul class="flex_auto p-r_4 ul_none w_10:md w_50:lg">
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="street-address">2400 N. St. NW</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="locality ">Washington</span>,
								<span class="city-name ">
									<abbr title="District of Colombia">DC</abbr>
								</span>
								<span class="postal-code">20037</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a href="mailto:resource@acc.org" class="email c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Email:</strong>
									<span class="">resource@acc.org</span></a>
							</li>
						</ul>
						<ul class="flex_auto p-l_0:lg p-l_4:md ul_none w_50:lg w_50:md">
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+12023756000" href="tel:+12023756000" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Phone:</strong><span class="">(202) 375-6000, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Toll Free:</strong><span class="">(800) 253-4636, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a fax="+12023757000" href="fax:+12023757000" class="fax c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Fax:</strong>
									<span class="">(202) 375-7000</span>
								</a>
							</li>
						</ul>
					</div>
				</address>
			</section>
		</div>
		<div class="flex_auto order-10 order_last p-x_3 p-y_4:lg relative w-grid_3:lg w-grid_6:md">
			<section class="acc-websites m-y_3">
				<nav class="font_ui w_100 font_0"><h3 class="br-b_1 br_dotted br_white-4 c_shade-n4 font_0 font_ui font_bold m-b_2 p-b_3 w_100">Improving Cardiovascular Care</h3>
					<ul class="lh_4 ul_none">
						<li class="">
							<a target="_blank" class="block c_shade-5 h:bg_black-2 h:c_white flex" href="http://www.acc.org">
								<span class="flex_auto m-l_2">Acc</span>
								<i class="fa-external-link-square fas flex_shrink  p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="https://cvquality.acc.org/Accreditation?">
								<span class="flex_auto m-l_2 self_center">Accreditation Services</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.ncdr.com">
								<span class="flex_auto inline-block m-l_2 self_center">NCDR</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.cardiosmart.org">
								<span class="flex_auto inline-block m-l_2 self_center">CardioSmart</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.onlinejacc.org/">
								<span class="flex_auto inline-block m-l_2 self_center">JACC</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
					</ul>
				</nav>
			</section>
			<section class="b_4 l_0 m-t_4 p-t_5 r_0 social">
				<ul class="flex social-bar ul_none c_white h:c_white m_0">
					<li class="flex_auto m-r_2">
						<a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-twitter-square"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a>
					</li>
					<li class="flex_auto m-r_2">
						<a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a>
					</li>
				</ul>
			</section>
		</div>
	</div>
	<!-- / footer -->
	<div id="subfooter" class="bg_shade-n1 br-b_2 br_0 br_accent-n1 br_solid c_white font_n1 p-x_4 p-y_4">
		<ul class="block footer-bottom-links ul_none">
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/media-center" class="c_white-6 h:c_white">Media Center</a>
			</li>
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/quick-start-guide" class="c_white-6 h:c_white">ACC.org Quick Start Guide</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising &amp; Sponsorship Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a>
			</li>
		</ul>
		<!-- /footer-bottom-links -->
		<p class="c_white-5 font_italic font_n2 legal m-b_2 m-t_3">
			© 2019 American College of Cardiology Foundation. All rights reserved.
		</p>
	</div>
	<!-- /subfooter -->
</div>

Weight:  -50

Styleguide Recipes CVQualtiy.Navs.Footer

*/
/*
Cards

Basic Cards

Markup:
<div class="card">
 <h3 class="card-header">Basic Card</h3>
  <div class="card-body">
    <p>cupidatat eu dolor dolor aliquip aliqua velit esse magna culpa qui fugiat ad culpa consectetur sint tempor elit dolor eu anim nisi quis consectetur laborum laboris proident consectetur mollit esse</p>
  </div>
   <div class="card-footer"> <a href="#" class="btn btn-primary btn-block">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards
*/
/*
Highlighted Card

Highlighted Cards are stylized cards with a soft blue background and changes all header sizes and text to a bit larger. These cards are used as hero area or for extra interest.


Markup:
<div class="bg_primary-5 br_primary-4 br_radius card highlighted">
 <h2 class="bg_tansparent br-b_0 c_accent c_shade-n4 card-header font_1 font_2:md font_3:lg p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards.Highlight
*/
/*
Card Positions

Placing cards inside of content areas is needed within the design.  Placing some utility classes will acomplish this with a responsive toggle. 
| Style Combo       | Effect                                          | Classes                                                   |
| ----------------- | ----------------------------------------------- | --------------------------------------------------------- |
| position-right-lg | floats the card when the veiwport is large up.  | max-w_20 clear_right\:lg float_right\:lg w_20:lg           |
| position-right-md | floats the card when the veiwport is medium up. | max-w_20 clear_right\:md float_right\:md w_40\:md w_20\:lg |
| position-right-sm | floats the card when the veiwport is small up.  | max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg    |
| position-left-lg  | floats the card when the veiwport is small up.  | max-w_20 clear_left\:lg float_left\:lg w_20:lg             |
| position-left-md  | floats the card when the veiwport is medium up. | max-w_20 clear_left\:md float_left\:md w_40\:md w_20\:lg   |
| position-left-sm  | floats the card when the veiwport is large up.  | max-w_20 clear_left float_left w_50 w_40\:md w_20\:lg      |


Markup:
<div class="bg_primary-alt br_1 br_primary-4 br_radius card highlighted shadow_1 max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg ">
 <h2 class="bg_tansparent br-b_0 c_accent c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Positioned Small Right</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
  <p class=" font_n2"> Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg</p>  
  <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards.Positon
*/
/*
Info Card

Info Cards are stylized cards with a warm grey background and changes all headers to bold.  These cards are side notes to the main content

Markup:
<div class="bg_shade-4 br_radius card info shadow_n1 br_0">
 <h2 class="bg_tansparent br-b_0 c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg">Info Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards.Info
*/
/*
Notice Card

Notice Cards are side notes usually associated with an action button.

Markup:
<div class="bg_primary-alt br_1  br_shade-4 card info text_center">
 <h2 class="bg_tansparent br-b_0 br_shade-4 c_primary-n2 card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards.Notice
*/
/*
Notice Card Alt

Notice Cards are side notes usually associated with an action button.

Markup:
<div class="bg_shade-4 br_0   card info text_center">
 <h2 class="bg_tansparent br-b_0 br_accent-alt c_accent card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-shade font_0:md font_n1">Action</a></div>
</div>

Styleguide Recipes CVQualtiy.Cards.Notice Alt
*/
/*
Address Card

Decorated address card for accreditation

Markup:
<div class="bg_shade-5 p_3 p_4:md">
	<address class="m-b_3 m-x_2 vcard">
		<h4 class="c_accent font_1 font_bold font_ui m-b_2 m-t_3">Questions About Accreditation?</h4>
		<div class="contact font_n1">
			<ul class="ul_none">
				<li><a href="mailto:" class="c_shade-n3 email link">non@.org</a></li>
				<li><a href="tel:" class="c_shade-n3 link tel">55-555-55555</a></li>
				<li><a href="fax:" class="c_shade-n3 fax link">55-444-55555</a></li>
			</ul>
		</div>
		<h4 class="c_accent font_1 font_bold font_ui m-b_2 m-t_3">Office Hours:</h4>
		<div class="font_n1 openning-hours">
			<ul class="ul_none">
				<li><span class="time">8:00am - 4pm EST</span><br /></li>
				<li><span class="days">Monday - Firday</span></li>
				<li>
					<a href="blank.pdf" class="block c_shade-n3 link"
						>Holiday Schedule &nbsp;<i class="fa-calendar far"></i
					></a>
				</li>
			</ul>
		</div>
		<h4 class="c_accent font_1 font_bold font_ui m-b_2 m-t_3">Mailing &amp; Shipping</h4>
		<span class=".org"></span>
		<ul class="ul_none adr">
			<li class="street-address">2400 N St. NW</li>
			<li>
				<span class="locality">Washington</span>,
				<span class="country-name"><abbr title="District of Colombia">DC</abbr></span>
				<span class="postal-code display_none">20006</span>
			</li>
		</ul>
		<nav class="nav-social-button mono-grey">
			<h4 class="c_accent font_1 font_bold font_ui m-b_2 m-t_3">Follow Us</h4>
			<ul class="flex m_0 social-bar ul_none">
				<li class="flex_shrink m-r_1">
					<a
						href="https://twitter.com/accintouch"
						target="_blank"
						class="bg_shade-1 block br-bl_radius br-tl_radius c_shade-5 h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"
						><i class="fab fa-twitter-square"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://www.facebook.com/AmericanCollegeofCardiology"
						target="_blank"
						class="facebook c_shade-5 bg_shade-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"
						><i class="fab fa-facebook-square"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://www.linkedin.com/company/american-college-of-cardiology/"
						target="_blank"
						class="linkedin c_shade-5 bg_shade-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"
						><i class="fab fa-linkedin"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="http://www.youtube.com/user/ACCinTouch"
						target="_blank"
						class="youtube c_shade-5 bg_shade-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"
						><i class="fab fa-youtube"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US"
						target="_blank"
						class="google-play c_shade-5 bg_shade-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"
						><i class="fab fa-google-play"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps"
						target="_blank"
						class="apple-store bg_shade-1 block br-br_radius br-tr_radius c_shade-5 h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"
						><i class="fab fa-apple"></i
					></a>
				</li>
			</ul>
		</nav>
	</address>
</div>

Styleguide Recipes CVQualtiy.Cards.Address
*/
/* 
Score Card

The Score Box Generic is currently used on the Assessments Page. These repeated boxes are used to show the score with each section of the assessment.


Markup:
<div class="bg_shade-5 box p-x_3 p-y_2 score">
     <h3>veniam quis veniam enim</h3>
     <div class="flex results-points">
         <span class="flex_auto points-possible"><span class="points-breakdown">(0 of 96 possible points)</span></span>
         <span class="c_accent flex_shrink font_2 points-total">0</span>
     </div>
</div>
<div class="m-t_3 overall-score">
    <span class="c_accent float_right font_n1 your-score-label">Your Score</span>
    <div class="br-t_2 br_shade br_solid clear_both flex results-points">
        <span class="br-b_1 br_accent br_dashed flex_auto p-t_4 points-possible">
               <span class="c_accent font_2 font_bold font_ui m-b_n4 p_3 title">Overall Score</span> <span class="c_shade-1 font_italic points-breakdown">(0 of 96 possible points)</span>
        </span>
        <span class="bg_accent br_shade c_white flex_shrink font_1 p_3 points-total triangle_top">
            0%
        </span>
    </div>
</div>

Styleguide Recipes CVQualtiy.Cards.Score Card
*/
/* 
Date

Style a date marker


Markup:
<div class="br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
</div>

Styleguide Recipes CVQualtiy.Cards.Date
*/
/* 
Date

Style a date marker

Markup:
<div class="br_shade-2 card event">
    <div class="bg_shade-4 br-l_1 br-t_1 br_solid br_white-5 card-header flex">
            <div class="flex_shrink"><div class="bg_white br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
    </div></div>
            <div class="event-details flex_grow lh_1 p-l_4">
                <div class="c_accent-n1 font_2 m-b_2 title">voluptate anim consequat tempor adipisicing aliquip non do</div>
                <div class="c_primary font_0 font_bold location-title m-b_2">Grand Hayatt</div>
                <div class="c_shade-n4 font_n1 location">Cincinnati, OH </div>
                <span class="font_italic font_n2 full-date p-r_3">May 12, 2018</span><span class="time font_italic font_n2 p-r_3"><span class="begin">8:00AM</span> - <span class="end">2:00PM</span> <span class="timezone">(EST)</span></span>
            </div>
    </div>
    <div class="card-body font_0 p-x_3 p-x_4:md p-y_3 p-y_4:md">
        <p>Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.</p>
    </div>
    <div class="bg_shade-5 c_shade-1 card-footer font_n1 text_center"><strong>Add to Calendar: </strong><a href="#" class="link">Outlook</a> | <a href="#" class="link">Google</a> | <a href="#" class="link">iCal</a></div>
    <div class="bg_shade-5 br-t_0 card-footer p-t_0"><a href="#" class="bg_accent br_radius btn btn-accent btn-block c_white font_bold h:bg_accent-n2 h:shadow shadow_2">Register</a></div></div>

    Styleguide Recipes CVQualtiy.Cards.Date Event
*/
/*
Testimonial Card

Graphic areas that hold testimonials.

Markup:
<div class="card testimonial">
	<header class="card-header bg_primary-alt br_primary-3 br_solid br_1">
		<img
			class="card-img br_raund img-thumbnail"
			src="https://unsplash.it/200/200?random=0.08080712330559026"
		/>
	</header>
	<div class="card-body">
		<article class="blockquote">
			<p>cillum tempor aliquip amet commodo aute qui veniam Lorem cillum sunt laboris consectetur nisi cillum</p>
			<cite class="blockquote-cite">Someone famous</cite>
		</article>
	</div>
</div>

 Styleguide Recipes CVQualtiy.Cards.Testimonials

*/
/*
Product Card

Graphic areas that hold a snippet of a product.

Markup:
<div class="card product">
  <header class="card-header bg_shade-3">
     <img class="card-img" src="https://cvquality.acc.org/images/default-source/accreditation/afbutton.jpg?sfvrsn=f32980bf_2" alt="">
  </header>
  <div class="card-body">
    <article>
     <h2 class="m-0">incididunt est culpa</h2>
      <p>aliqua adipisicing sint exercitation nostrud pariatur amet ut est fugiat excepteur ad elit mollit cillum</p>
      <a class="btn btn-primary" href="#">Link To Product &nbsp; <i class="fa fa-external-link-square"></i></a>
    </article>
  </div>
</div>


 Styleguide Recipes CVQualtiy.Cards.Products

*/
/*
List

CVquatlity has some lists through out the design that go beyond basic lists. Below are collection of them and where they can be found. 


 Styleguide Recipes CVQualtiy.Lists
*/
/*
Map Result List

Result lists is the list view of all of the pins on the map


Markup:
<ul class="bg_shade-2 font_ui result-list ul_none">
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt m-t_1 p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
</ul>

 Styleguide Recipes CVQualtiy.Lists.Map
*/
/*
Side Nav

Side Nav DOM

Markup:
<nav class="hidden-print nav-sub max-w-25"><ul class="bg_shade-5 br-b_1 br-t_1 br_accent br_solid flex flex_column font_0 font_bold font_ui nav"><li data-nav="parent" class="nav-item parent"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation" target="_self"><i class="fa fa-holder toggle"></i>About Accreditation</a><ul data-nav="child" class="flex_column font_n1 nav text-indent_2 bg_shade-4"><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/benefits-of-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Benefits of Accreditation</a></li><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/steps-to-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Pathway to Accreditation</a></li><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/testimonials-and-success-stories" target="_self"><i class="fa fa-holder toggle"></i>Testimonials and Success Stories</a></li><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/value-of-process-improvement" target="_self"><i class="fa fa-holder toggle"></i>Value of Process Improvement</a></li><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/faqs" target="_self"><i class="fa fa-holder toggle"></i>FAQs</a></li><li class="nav-item"><a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/accreditation-for-systems" target="_self"><i class="fa fa-holder toggle"></i>System-Wide Accreditation</a></li></ul></li><li data-nav="parent" class="is-active nav-item parent"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/services" target="_self"><i class="fa fa-holder toggle"></i>Products and Services</a><ul data-nav="child" class="bg_shade-4 flex_column font_n1 nav text-indent_1"><li class="nav-item parent"><a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/CCL" target="_self"><i class="fa fa-holder toggle"></i>Cardiac Cath Lab Accreditation</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/OnDemandCathLabwebianrs" target="_self">On-Demand Cath Lab Webinars</a></li><li class="nav-item"><a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/CCLBenefits" target="_self">Cardiac Cath Lab Features Benefits</a></li><li class="nav-item"><a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/cardiac-cath-lab-accreditation-training" target="_self">Cardiac Cath Lab Accreditation Training</a></li></ul></li><li class="nav-item parent"><a class="nav-link c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/cpcwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Chest Pain Center Webinars</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCDesignations" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Designations</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCBenefits" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Features Benefits</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCsupplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Guidelines</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCArticles" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Articles Abstracts</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCPublications" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Pubs</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCQuestions" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center FAQs</a></li><li class="nav-item"><a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/chest-pain-center-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation Training</a></li></ul></li><li class="nav-item parent"><a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/EP" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Accreditation</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/register-for-webinar" target="_self"><i class="fa fa-holder toggle"></i>On-Demand EP Webinars</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/EPBenefits" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Features Benefits</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/electrophysiology-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Accreditation Training</a></li></ul></li><li class="nav-item parent"><a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/HF" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/hfwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Heart Failure Webinars</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFBenefits" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation Features Benefits</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/supplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation Guidelines</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFArticles" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation Articles and Abstracts</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFPublications" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation Publications</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFQuestions" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure FAQs</a></li><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/heart-failure-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation Training</a></li></ul></li><li class="nav-item parent"><a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/TCV" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve Certification</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/TCV/TCV-certification-training" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve Certification Training</a></li></ul></li><li class="nav-item"><a class="h:bg_black-1 c_shade-n3 nav-link p-y_2" href="/accreditation/services/C4Certification" target="_self"><i class="fa fa-holder toggle"></i>C4 Certification</a></li></ul></li><li class="nav-item"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/heartcare-center-recognition-program" target="_self"><i class="fa fa-holder toggle"></i>HeartCARE Center Recognition Program</a></li><li class="nav-item"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/acc-quality-summit-2020" target="_self"><i class="fa fa-holder toggle"></i>ACC Quality Summit</a></li><li class="nav-item active current"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/brand" target="_self"><i class="fa fa-holder toggle"></i>Promote Your Achievement</a></li><li data-nav="parent" class="nav-item parent"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/quality-initiative-proposal" target="_self"><i class="fa fa-holder toggle"></i>Quality Initiative Proposal</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-link c_shade-n4 p-y_2"><a class="nav-link" href="/accreditation/quality-initiative-proposal/2018-recipients" target="_self"><i class="fa fa-holder toggle"></i>2018 Recipients</a></li></ul></li><li data-nav="parent" class="nav-item parent"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/advocacy" target="_self"><i class="fa fa-holder toggle"></i>Advocate Accreditation</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link" href="/accreditation/advocacy/Community-Education" target="_self"><i class="fa fa-holder toggle"></i>Community Education &amp; EHAC</a></li><li class="nav-item"><a class="nav-link" href="/accreditation/advocacy/helpful-links" target="_self"><i class="fa fa-holder toggle"></i>Helpful Links</a></li></ul></li><li data-nav="parent" class="nav-item parent"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/about-us" target="_self"><i class="fa fa-holder toggle"></i>About Us</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_2"><li class="nav-item parent"><a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/about-us/awards" target="_self">Awards</a><ul class="nav flex_column bg_black-1"><li class="nav-item"><a class="nav-link" href="/accreditation/about-us/awards/process-improvement-pioneer-award" target="_self"><i class="fa fa-holder toggle"></i>Process Improvement Pioneer Award</a></li><li class="nav-item"><a class="nav-link" href="/accreditation/about-us/awards/bahr-award-of-excellence" target="_self"><i class="fa fa-holder toggle"></i>Bahr Award of Excellence</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/accreditation/about-us/staff-directory" target="_self"><i class="fa fa-holder toggle"></i>Staff Directory</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/accreditation/map" target="_self"><i class="fa fa-holder toggle"></i>Accreditation Map</a></li><li data-nav="parent" class="nav-item parent"><a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/news-and-events" target="_self"><i class="fa fa-holder toggle"></i>News and Events</a><ul class="nav flex_column bg_black-2 font_n1 text-indent_3"><li class="nav-item"><a class="nav-link" href="/accreditation/news-and-events/upcoming-events" target="_self"><i class="fa fa-holder toggle"></i>Upcoming Events</a></li></ul></li></ul></nav>


Styleguide Recipes CVQualtiy.Navs.SideNav
*/
/*
Side Nav Parent

Decoration classes with UC's to make the nav look like the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_accent br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="a:c_accent c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="a:c_accent c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>

Weight:  1

Styleguide Recipes CVQualtiy.Navs.Primary Level
*/
/*
Side Nav Child

Decoration classes with UC's to make the nav look like the child of the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_accent br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Parent Link
			</a>
			<ul class="flex_column font_n1 nav text-indent_2 bg_shade-4">
				<li data-nav="parent" class="nav-item parent">
					<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
						Link with children
					</a>
				</li>
				<li  class="nav-item">
					<a class="a:c_accent c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
						Link without children
					</a>
				</li>
				<li data-nav="parent" class="nav-item parent active">
					<a class="a:c_accent c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
						Link that is active
					</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Weight:  2

Styleguide Recipes CVQualtiy.Navs.Child Level
*/
/*
Side Nav Gran Child

Decoration classes with UC's to make the nav look like the child of the primary level.

Markup:
<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_accent br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>

Weight:  3

Styleguide Recipes CVQualtiy.Navs.Grand Child Level
*/
/*
Decorators

The Cvquality design employs a collection of unique decorators that are either accomplished by styles added on top of Arches or are collections of Utility Classes to make the effect. Bellow are the list of standardized decorators in the design. 


Styleguide Recipes CVQualtiy.Decorator
*/
/*
Dividers

There are many dividers in the design. Bellow are the types and how to create them. 
| Style Combo     | Effect                                                            | Classes                       |
| --------------- | ----------------------------------------------------------------- | ----------------------------- |
| item-divider    | dividing items from eachother like between paragraphs.            | br_shade-4 br_dashed br_1 |
| group-divider   | A mid weight divider to show the differnce between grouped items. | br_accent br_dotted br_1      |
| section-divider | A strong division between Secotions of a page                     | br_primary br_solid br_2      |
| spacer          | No decoration but adds space between objects                      | br_0                          |



Markup:
<hr class="divider br_0 br-b_1 br_dotted br_accent">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class="divider br_0 br-b_1 br_dashed br_shade-4">
<strong>There is a spacer between the two sentences</strong>
<p>Cupidatat id incididunt tempor magna consectetur laboris cillum laborum. Enim non reprehenderit eiusmod nisi velit veniam ea eiusmod esse aute proident. Laborum pariatur consequat cillum est officia exercitation esse et consectetur ea ad sint. Sunt esse do cupidatat laborum. Deserunt occaecat id tempor consectetur velit pariatur nulla fugiat sit laboris ipsum.</p>
<hr class="br_none"/>
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class=" br_0 br-b_1 br_primary br_solid">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>

Styleguide Recipes CVQualtiy.Decorator.Dividers
*/
/*
	Foundation

	Combination of UCs and Base Components from the Framework can make an infinate amount of alterations to designs and layouts. Bellow are some alteratoins to Foudations Components with the Utiltity Classes. 

	Weight:  1000

	Styleguide  Recipes Zurb

*/
/* Styleguide recipes.zurb */
/* Styleguide Recipes.010 */
/*
	Quicklinks

	small list navs used in header structures of websites.

	<ul class="menu quicklinks ul_none">
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">First</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">One</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">Two</a></li>
		<li class="quicklinks__item br_solid br_0 br-r_1 br_primary-1 p-x_2"><a href="#" class="quicklinks__link h:bg_primary-5 c_black font_n1 lh_1 p-x_2">Three</a></li>
		<li class="quicklinks__item"><a href="#" class="quicklinks__link  h:bg_primary-5 c_black font_n1 lh_1 p-x_2">End</a></li>
	</ul>

	Styleguide   Recipes Zurb.Quicklinks
 */
/*
Cards

Build from the basicfoundation card utility classes can be added to make many variations on the theme.

bg_primary			- textures are slightly transparent so they can be colored with background-color classess
bg_shade		- textures are slightly transparent so they can be colored with background-color classess
bg_highlight 		- textures are slightly transparent so they can be colored with background-color classess
bg_warning			- textures are slightly transparent so they can be colored with background-color classess
bg_alert			- textures are slightly transparent so they can be colored with background-color classess

Markup:
<div class="p_4 texture_light bg_shade-4">
	<div class="card shadow_2 max-w_30">
		<div class="card-divider font_slab border-top-left-square c_white font_3 p_4 texture_dust {{modifier_class}}">
			This is a header
		</div>
		<img src="https://picsum.photos/400/300">
		<div class="card-section">
			<h4>This is a card.</h4>
			<p>It has an easy to override visual style, and is appropriately subdued.</p>
		</div>
	</div>
</div>


Styleguide Containers.Cards

 */
/*
Page Messages

Page Messages are altered cards to bring attention to the content we are trying to convey to the user

primary				- This page message is used for X
shade			- This page message is used for X
highlight 		- This page message is used for X
warning				- This page message is used for X
alert					- This page message is used for X

Markup:
<div class="p_5 texture_light bg_shade-4">
	<div class="card shadow_2 bg_{{modifier_class}}-5">
		<div class=" font_slab br-tl_square c_white font_3 p_4 texture_dust bg_{{modifier_class}}">
			This is page message
		</div>
		<div class="card-section">
			<div class="grid-x">
				<div class="cell shrink p_4 font_5 c_{{modifier_class}}-n3"><i class="fas fa-check"></i></div>
				<div class="cell auto p_4">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptate
					consectetur ab pariatur ullam quo sit maiores corrupti voluptates neque
					illum aperiam laudantium provident fugit, nihil labore incidunt at
					impedit?
				</div>
			</div>
		</div>
		<div class="card-section br_0 br-t_1 br_solid br_{{modifier_class}}">
			<a href="" class="button br_radius float-right bg_{{modifier_class}}-n1"><i class="fas fa-times"></i>&nbsp;close</a>
		</div>
	</div>
</div>

Styleguide  Recipes Zurb.Page Messages
*/
/*
User Card

Member Cards Used in the CSTool give a great represendation on how complex the UI can be with a combination of UCs

Markup:
<div class="p_5 p-t_3 p-b_3 texture_light bg_shade-4">
<div class="user-card shadow br_solid br_black-1 bg_white">
   <div class="grid-x">
      <div class="cell auto p_3">
         <div class="member-name font_1 font_slab lh_2 member-name p-x_3 p-y-l_4">David Y. Wilder <a class="bg_shade-4 float-right font_0 hover:bg_shade p-l_3 p-r_3 p_2"><i class="fas fa-share-alt-square"></i></a>
         </div>
         <div>
            <ul class="details no-bullet p-l_3 p-r_3 m_0 font_0 grid-x grid-margin-x">
            <li class="br_0 br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-user-slash"></i>NPI
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-hashtag"></i>1696062374299
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-at"></i>Donec@quis.org <a class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-map-pin"></i>Polatlı
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-badge-check"></i>75988 <a href="" class="link float-right p_2"><i class="fal fa-exchange-alt"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-user-circle"></i>neque.et@neque.net <a href="#" class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li>
            <li class="br-b_1 br_shade-5 br_0 br_solid p_2 cell small-12"><i class="m-l_3 m-r_3 c_shade-2 fal fa-key"></i>GRW95WZD9VY <a href="#" class="link float-right p_2"><i class="fal fa-pencil"></i></a>
            </li></ul>
      <div class="p_4 flex font_n1">
         <i class="m-l_3 c_shade-2 fal fa-users-crown flex-shrink"></i>
         <a class="link m-l_3 m-r_3 flex-auto"> <i class="fas fa-chevron-circle-right p-r_3"></i>1 linked account(s) </a>
         <a class="link float-right m-l_3 m-r_3 flex-1">manage &nbsp; <i class="fal fa-pencil"></i></a>
      </div>
   </div>
   </div>
      <div class="cell shrink texture_light bg_shade-3 m-r_3 c_shade-1 font_n2">
         <ul class="flag no-bullet">
            <li class="is-active_toggle-function center member">
               <div class="a:bg_acc a:color_white p_3"><i class="fal fa-user-md"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center accbadge active">
               <div class="a:bg_success-n1 a:color_white p_3"><i class="fal fa-badge-check"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center iscience">
               <div class="a:bg_hightlight a:color_white p_3"><i class="fal fa-flask"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center bruteforce">
               <div class="a:bg_alert a:color_white p_3"><i class="fal fa-lock-alt"></i>
               </div>
            </li>
            <li class="is-active_toggle-function center expobadge">
               <div class="a:bg_warning-n3 a:color_white p_3"><i class="fal fa-exclamation-circle"></i>
               </div>
            </li>
         </ul>
      </div>
   </div>
</div>
</div>

Styleguide  Recipes Zurb.User Card
*/
/*
	Button Group

	Markup:
	<div class="button-group">
		<a class="button is-active primary"><i class="far icon-toggle_arrow-circle"></i> One</a>
		<a class="button shade"><i class="far icon-toggle_arrow-circle"></i> Two</a>
		<a class="button shade"><i class="far icon-toggle_arrow-circle"></i> Three</a>
	</div>

	Styleguide  Foundation.Navigation.Button Group
*/
/* 
    Grid Button Splash

    Markup:
    <div class="grid-y lh_1 " style="width:412px;height: 732px; background-image:url('https://picsum.photos/412/732/?image=857')">
        <div class="cell small-6 grid-x">
            <div class="small-8 cell c_white p_5 lh_1 text-left">
                <h1 class="font_5 font_display lh_1">Annual Scientific Session</h1>
                <h2 class="font_1 font_bold">2018 | New Orleans</h2>
            </div>
            <div class="small-4 cell c_white text_center">
                <div class="grid-y grid-frame">
                    <div class="small-6 cell p-t_5 shaddow_n2 br_solid h:bg_black-8 br_white-1 br_1 bg_black-1 "><i class="fas m_2 fa-users-class font_4"></i>
                    <div class="font_0 m-t_3">Conference</div></div>
                    <div class="small-6 cell p-t_5 shaddow_n2 br_solid h:bg_black-8 br_white-1 br_1 bg_black-2"><i class="fas m_2 fa-users-crown font_4"></i>
                    <div class="font_0 m-t_3">After Party</div></div>
                </div>
            </div>
        </div>
        <div class="cell small-3 grid-x">
            <div class="small-4 cell shadow_n1 br_white-1 br_1 br_solid h:bg_black-8 bg_black-2 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-calendar-alt font_4"></i>
                <div class="font_0 m-t_3">Events</div>
            </div>
            <div class="small-4 cell shadow_n2 br_white-1 br_1 br_solid h:bg_black-8 bg_black-3 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-map-marked  font_4"></i>
                <div class="font_0 m-t_3">Maps</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-4 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-cogs font_4"></i>
                <div class="font_0 m-t_3">Options</div>
            </div>
        </div>
        <div class="cell small-3 grid-x">
            <div class="small-4 cell shadow_n2 br_white-1 br_1 br_solid h:bg_black-8 bg_black-5 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-alarm-clock font_4"></i>
                <div class="font_0 m-t_3">Upcoming</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-4 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-badge-check font_4"></i>
                <div class="font_0 m-t_3">Claim Credits</div>
            </div>
            <div class="small-4 cell shadow_n3 br_white-1 br_1 br_solid h:bg_black-8 bg_black-6 c_white p-t_5 text_center"><i
                    class="fas m_2 fa-chess-rook font_4"></i>
                <div class="font_0 m-t_3">Find a Room</div>
            </div>
        </div>
    </div>  

    Styleguide  Foundation.Grid Buttons
    */
/*
    RECIPE: Accordians

    Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

    Markup: 
    <ul class="accordion" data-accordion>
        <li class="accordion-item is-active" data-accordion-item>
            <!-- Accordion tab title -->
            <a href="#" class="accordion-title font_1 font_slab hover:bg_primary-4"><i class="fas icon-toggle_plus-minus fa-fw"></i> Accordion 1</a>
            <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
            <div class="accordion-content" data-tab-content>
                <p>Panel 1. Lorem ipsum dolor</p>
                <a href="#">Nowhere to Go</a>
            </div>
        </li>
        <li class="accordion-item" data-accordion-item>
            <!-- Accordion tab title -->
            <a href="#"class="accordion-title  font_1 font_slab hover:bg_primary-4"><i class="fas icon-toggle_plus-minus fa-fw"></i>Accordion 2</a>
            <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
            <div class="accordion-content" data-tab-content>
                <p>Panel 1. Lorem ipsum dolor</p>
                <a href="#">Nowhere to Go</a>
            </div>
        </li>
    </ul>

    Styleguide  Recipes Zurb.Accordians

*/
/*# sourceMappingURL=maps/cvquality_zurb.css.map */
