@charset "UTF-8";

/**
* Bristol 2.7
**/

/**
* Base Framework:
* `zurb foundation` - The ACC App Mobile Framework is based off of a reduced build of zurb foundation all of the grid, columns, base typography, and form elements can be used from zurb.  All functions can be turned back on, but to reduce build size many of the design features have been disabled.
* 
*   @example
*	<a  class="button" href="http://foundation.zurb.com/docs" class="">Go to Zurb Foundation Documentation</a>
*/

body {
  font-size: 14px;
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot");
  src: url("../fonts/opensans_300/OpenSans-Light-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/opensans_300/OpenSans-Light-webfont.woff") format("woff"),
    url("../fonts/opensans_300/OpenSans-Light-webfont.ttf") format("truetype"),
    url("../fonts/opensans_300/OpenSans-Light-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot");
  src: url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.woff")
      format("woff"),
    url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.ttf")
      format("truetype"),
    url("../fonts/opensans_300-italic/OpenSans-LightItalic-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot");
  src: url("../fonts/opensans_400/OpenSans-Regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/opensans_400/OpenSans-Regular-webfont.woff") format("woff"),
    url("../fonts/opensans_400/OpenSans-Regular-webfont.ttf") format("truetype"),
    url("../fonts/opensans_400/OpenSans-Regular-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot");
  src: url("../fonts/opensans_700/OpenSans-Bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/opensans_700/OpenSans-Bold-webfont.woff") format("woff"),
    url("../fonts/opensans_700/OpenSans-Bold-webfont.ttf") format("truetype"),
    url("../fonts/opensans_700/OpenSans-Bold-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Open Sans;
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot");
  src: url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.woff")
      format("woff"),
    url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.ttf")
      format("truetype"),
    url("../fonts/opensans_700-italic/OpenSans-BoldItalic-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot");
  src: url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.woff")
      format("woff"),
    url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.ttf")
      format("truetype"),
    url("../fonts/robotoslab_300/RobotoSlab-Regular-webfont.svg#open_sanslight")
      format("svg");
}

@font-face {
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot");
  src: url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.woff") format("woff"),
    url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.ttf")
      format("truetype"),
    url("../fonts/robotoslab_700/RobotoSlab-Bold-webfont.svg#open_sanslight")
      format("svg");
}

.visible-grid > .panel {
  color: black;
  border: 1px solid #aaa;
  background-color: #ccc;
  padding: 1em;
  margin-bottom: 0.5em;
}

.color-block {
  width: 50%;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  color: white;
}

/* FONT PATH
 * -------------------------- */

@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.eot?v=4.4.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0")
      format("embedded-opentype"),
    url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),
    url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"),
    url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-rotate-90 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

/*  (asterisk
    "State":"success",
	"Selector":".success",
    "Color": $success-color,
    "Icon": $fa-var-check,),


    */

h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th {
  -webkit-transition: line-height 1s;
  /* Safari */
  transition: line-height 1s;
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
}

/* TODO: refactor this 
there are two to three needs for icons icons in containers, icons on icons and then icons that are dynamic to a parent container.**/

.fa-holder {
  text-decoration: none;
}

.fa-holder > i.fa-holder:before,
.fa-holder * i.fa-holder-dynamic:before {
  text-decoration: none;
}

.fa-holder:after {
  content: " ";
}

.delete > i.fa-holder:before,
.delete.fa:before,
.cancel > i.fa-holder:before,
.cancel.fa:before,
.close > i.fa-holder:before,
.close.fa:before,
.close-reveal-modal > i.fa-holder:before,
.close-reveal-modal.fa:before {
  content: "";
}

.validated > i.fa-holder:before,
.validated.fa:before,
.selected > i.fa-holder:before,
.selected.fa:before {
  content: "";
}

.data > i.fa-holder:before,
.data.fa:before {
  content: "";
}

.edit > i.fa-holder:before,
.edit.fa:before {
  content: "";
}

.clear > i.fa-holder:before,
.clear.fa:before,
.refresh > i.fa-holder:before,
.refresh.fa:before {
  content: "";
}

.starred > i.fa-holder:before,
.starred.fa:before {
  content: "";
}

.add > i.fa-holder:before,
.add.fa:before {
  content: "";
}

.home > i.fa-holder:before,
.home.fa:before {
  content: "";
}

.top > i.fa-holder:before,
.top.fa:before {
  content: "";
}

.fa-check:before {
  content: "";
}

.back > i.fa-holder:before,
.back.fa:before {
  content: "";
}

.set > i.fa-holder:before,
.set.fa:before {
  content: "";
}

.save > i.fa-holder:before,
.save.fa:before {
  content: "";
}

.search > i.fa-holder:before,
.search.fa:before {
  content: "";
}

.fa-check:before {
  content: "";
}

.fa-question-circle:before {
  content: "";
}

.fa-arrow-circle-right:before {
  content: "";
}

.fa-exclamation-triangle:before {
  content: "";
}

.fa-exclamation-circle:before {
  content: "";
}

i.fa.fa-question-circle {
  font-size: 1.35em;
}

.required .fa-holder-dynamic:before,
.required.fa:before,
.required > .fa-holder:before {
  content: "";
}

.required.fa {
  color: #e08514;
}

/**
 * Foundation for Sites by ZURB
 * Version 6.2.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

.row {
  max-width: none;
}

.h1,
h1,
.table th.h1,
.h2,
h2,
.table th.h2,
.h3,
h3,
h1 + .nav-list li,
h1 + .panel-selector li,
.large.nav-list li,
.large.panel-selector li,
.table th.h3,
.h4,
h4,
h2 + .nav-list li,
h2 + .panel-selector li,
.medium.nav-list li,
.medium.panel-selector li,
.table th.h4,
.section-nav .text,
.h5,
h5,
.h6,
h6 {
  margin-top: 0;
  clear: both;
}

.h1,
h1,
.table th.h1 {
  letter-spacing: -1px;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
}

.h2,
h2,
.table th.h2 {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
}

.h4,
h4,
h2 + .nav-list li,
h2 + .panel-selector li,
.medium.nav-list li,
.medium.panel-selector li,
.table th.h4,
.section-nav .text {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
}

.h3,
h3,
h1 + .nav-list li,
h1 + .panel-selector li,
.large.nav-list li,
.large.panel-selector li,
.table th.h3,
.h5,
h5,
.h6,
h6 {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
}

.h1,
h1,
.table th.h1 {
  font-size: 2.42857em;
  line-height: 1.15294em;
  margin-top: 0.57647em;
  margin-bottom: 0.57647em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1.03765em;
    margin-top: 0.51882em;
    margin-bottom: 0.51882em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1em;
    margin-top: 0.43235em;
    margin-bottom: 0.43235em;
  }
}

@media only screen and (min-width: 767px) {
  .h1,
  h1,
  .table th.h1 {
    font-size: 3.07143em;
    line-height: 1.36744em;
    margin-top: 0.45581em;
    margin-bottom: 0.45581em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1.2307em;
    margin-top: 0.41023em;
    margin-bottom: 0.41023em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1.16233em;
    margin-top: 0.34186em;
    margin-bottom: 0.34186em;
  }
}

@media only screen and (min-width: 1024px) {
  .h1,
  h1,
  .table th.h1 {
    font-size: 3.78571em;
    line-height: 1.10943em;
    margin-top: 0.36981em;
    margin-bottom: 0.36981em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1em;
    margin-top: 0.33283em;
    margin-bottom: 0.33283em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h1,
  h1,
  .table th.h1 {
    line-height: 1em;
    margin-top: 0.27736em;
    margin-bottom: 0.27736em;
  }
}

.h2,
h2,
.table th.h2 {
  font-size: 1.92857em;
  line-height: 1.14074em;
  margin-top: 0.42778em;
  margin-bottom: 0.14259em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1.02667em;
    margin-top: 0.385em;
    margin-bottom: 0.12833em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1em;
    margin-top: 0.32083em;
    margin-bottom: 0.10694em;
  }
}

@media only screen and (min-width: 767px) {
  .h2,
  h2,
  .table th.h2 {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0.54444em;
    margin-bottom: 0.18148em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

@media only screen and (min-width: 1024px) {
  .h2,
  h2,
  .table th.h2 {
    font-size: 2.42857em;
    line-height: 1.15294em;
    margin-top: 0.43235em;
    margin-bottom: 0.14412em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1.03765em;
    margin-top: 0.38912em;
    margin-bottom: 0.12971em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h2,
  h2,
  .table th.h2 {
    line-height: 1em;
    margin-top: 0.32426em;
    margin-bottom: 0.10809em;
  }
}

.h3,
h3,
h1 + .nav-list li,
h1 + .panel-selector li,
.large.nav-list li,
.large.panel-selector li,
.table th.h3 {
  font-size: 1.57143em;
  line-height: 1.4em;
  margin-top: 0.525em;
  margin-bottom: 0.175em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.26em;
    margin-top: 0.4725em;
    margin-bottom: 0.1575em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.19em;
    margin-top: 0.39375em;
    margin-bottom: 0.13125em;
  }
}

@media only screen and (min-width: 767px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0.22273em;
    margin-bottom: 0.66818em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.60364em;
    margin-top: 0.20045em;
    margin-bottom: 0.60136em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.51455em;
    margin-top: 0.16705em;
    margin-bottom: 0.50114em;
  }
}

@media only screen and (min-width: 1024px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0.54444em;
    margin-bottom: 0.18148em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .h3,
  h3,
  h1 + .nav-list li,
  h1 + .panel-selector li,
  .large.nav-list li,
  .large.panel-selector li,
  .table th.h3 {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

.h4,
h4,
h2 + .nav-list li,
h2 + .panel-selector li,
.medium.nav-list li,
.medium.panel-selector li,
.table th.h4 {
  font-size: 1.28571em;
  line-height: 1.08889em;
  margin-top: 0.54444em;
  margin-bottom: 0.54444em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h4,
  h4,
  h2 + .nav-list li,
  h2 + .panel-selector li,
  .medium.nav-list li,
  .medium.panel-selector li,
  .table th.h4 {
    line-height: 1em;
    margin-top: 0.49em;
    margin-bottom: 0.49em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h4,
  h4,
  h2 + .nav-list li,
  h2 + .panel-selector li,
  .medium.nav-list li,
  .medium.panel-selector li,
  .table th.h4 {
    line-height: 1em;
    margin-top: 0.40833em;
    margin-bottom: 0.40833em;
  }
}

@media only screen and (min-width: 767px) {
  .h4,
  h4,
  h2 + .nav-list li,
  h2 + .panel-selector li,
  .medium.nav-list li,
  .medium.panel-selector li,
  .table th.h4 {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0.22273em;
    margin-bottom: 0.66818em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h4,
  h4,
  h2 + .nav-list li,
  h2 + .panel-selector li,
  .medium.nav-list li,
  .medium.panel-selector li,
  .table th.h4 {
    line-height: 1.60364em;
    margin-top: 0.20045em;
    margin-bottom: 0.60136em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h4,
  h4,
  h2 + .nav-list li,
  h2 + .panel-selector li,
  .medium.nav-list li,
  .medium.panel-selector li,
  .table th.h4 {
    line-height: 1.51455em;
    margin-top: 0.16705em;
    margin-bottom: 0.50114em;
  }
}

.h5,
h5 {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h5,
  h5 {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h5,
  h5 {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 767px) {
  .h5,
  h5 {
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .h5,
  h5 {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .h5,
  h5 {
    line-height: 1em;
  }
}

.h6,
h6 {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .h6,
  h6 {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .h6,
  h6 {
    line-height: 1.19em;
  }
}

p,
ul,
ol,
.nav-list li,
.panel-selector li,
h3 + .nav-list,
h3 + .panel-selector,
.small.nav-list,
.small.panel-selector,
.table,
.normal {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #333333;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  p,
  ul,
  ol,
  .nav-list li,
  .panel-selector li,
  h3 + .nav-list,
  h3 + .panel-selector,
  .small.nav-list,
  .small.panel-selector,
  .table,
  .normal {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  p,
  ul,
  ol,
  .nav-list li,
  .panel-selector li,
  h3 + .nav-list,
  h3 + .panel-selector,
  .small.nav-list,
  .small.panel-selector,
  .table,
  .normal {
    line-height: 1.19em;
  }
}

h3 + .nav-list li,
h3 + .panel-selector li,
.small.nav-list li,
.small.panel-selector li,
.repeater .render .strong,
.bold,
b {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
}

.table th,
.loud {
  color: black;
}

.quiet {
  color: #4d4d4d;
}

.hint,
.repeater .render .italic,
.table tfoot tr td,
.italic {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
  font-style: italic;
}

strong,
.strong {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  color: #25b6e0;
}

em,
.emphasis {
  color: #0d4757;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
  font-style: italic;
  font-weight: 900;
}

.subtle {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
  color: #4d8797;
}

.block-margins {
  margin: 0 em(19.6px) 0;
}

.repeater .render .render-holder {
  list-style: none;
  display: block;
  margin: 0;
}

.repeater .render .render-holder > li {
  display: inline-block;
  margin-left: 0.25rem;
}

/**
 * Header Tags:
 * `Headers` - Headers are used to separate and organize blocks of text. 
 *  You can also us `.h1`,`.h2`,`.h3`,`.h4`,`.h5`, or `.h6` 
 *  to make any text elements style like the associated header tag 
 *
 *     @example
 *     h1 Header 1 Tag
 *		small subheader
 *     h2 Header 2 Tag
 *     h3 Header 3 Tag
 *     h4 Header 4 Tag
 *     h5 Header 5 Tag 
 *     h6 Header 6 Tag
 */

h1 {
  color: #5c5c5c;
}

h6 {
  color: #707070;
}

p {
  margin-bottom: 0.25em;
}

@media only screen and (min-height: 320px) {
  p {
    margin-bottom: 0.5em;
  }
}

ul,
ol {
  margin-bottom: 1em;
}

@media only screen and (min-height: 320px) {
  ul,
  ol {
    margin-bottom: 0.5em;
  }
}

@media only screen and (min-height: 0px) {
  ul,
  ol {
    margin-bottom: 0.75em;
  }
}

ul li,
ol li {
  margin-bottom: 0.25em;
}

@media only screen and (min-height: 320px) {
  ul li,
  ol li {
    margin-bottom: 0.2em;
  }
}

@media only screen and (min-height: 0px) {
  ul li,
  ol li {
    margin-bottom: 0.1em;
  }
}

/**
* Fonts:
* `OpenSans & Roboto Slab` - OpenSans is the major font family used in all digital text accross properties at the ACC. Roboto Slab and Roboto are used in highlighted cases like labels, Primary Navs, and some Header Tags.
*
*   @example
*	<h2 class="group-divide-bottom font--name small-12">OpenSans<span class="sub-line">font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;</span></h2>
*	<div class="font row font-display">
*	<div class="ms12 column medium-4 small-6 large-3 font--dropcase_2x">Os</div>
*	<div class="column large-9 medium-8 small-6 font--example">
*   <h3>Display Fonts & Headers</h3>
*	<div class="font--lowercase ms6">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms6">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms6">0 1 2 3 4 5 6 7 8 9</div>
*	<div class="font--lowercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms4">0 1 2 3 4 5 6 7 8 9</div>
*	</div>
*	</div>
*	<h2 class="group-divide-bottom font--name small-12">Roboto Slab<span class="sub-line">font-family: 'Roboto Slab', 'Times New Roman', 'Lucida Bright', Georgia, serif; </span></h2>
*	<div class="font row font-slab">
*	<div class="ms12 column medium-4 small-6 large-3 font--dropcase_2x">Rb</div>
*	<div class="column large-9 medium-8 small-6 font--example">
*   <h3>Primary Navigation, Headers & Labels</h3>
*	<div class="font--lowercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms4">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms4">0 1 2 3 4 5 6 7 8 9</div>
*	<div class="font--lowercase ms2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms2">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms2">0 1 2 3 4 5 6 7 8 9</div>
*	</div>
*	</div>
*	<h2 class="group-divide-bottom font--name small-12">Open Sans<span class="sub-line">font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;</span></h2>
*	<div class="font row font">
*	<div class="ms12 column medium-4 small-6 large-3 font--dropcase_2x">Os</div>
*	<div class="column large-9 medium-8 small-6 font--example">
*   <h3>Body Copy, Lists & Tables</h3>
*	<div class="font--lowercase ms1">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms1">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms1">0 1 2 3 4 5 6 7 8 9</div>
*	<div class="font--lowercase ms">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--uppercase ms">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
*	<div class="font--numbers ms">0 1 2 3 4 5 6 7 8 9</div>
*	</div>
*	</div>
*/

.font {
  color: #333333;
}

.font .font--example {
  background-image: url(http://basehold.it/i/21);
}

.font.font-display {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
}

.font.font-slab {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
}

.font.font-normal {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.font.font-light {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
}

.font .font--name {
  color: #00386b;
}

.font .font--dropcase_2x {
  color: #198dae;
}

.font .font--lowercase,
.font .font--uppercase,
.font .font--numbers {
  white-space: pre-wrap;
  letter-spacing: -0.1em;
}

.font .font--lowercase {
  text-transform: lowercase;
}

.font .font--uppercase {
  text-transform: uppercase;
}

.font .ms12 {
  font-size: 9.28571em;
  line-height: 1.05538em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms12 {
    line-height: 1em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms12 {
    line-height: 1em;
  }
}

.font .ms6 {
  font-size: 3.78571em;
  line-height: 1.10943em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms6 {
    line-height: 1em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms6 {
    line-height: 1em;
  }
}

.font .ms4 {
  font-size: 2.42857em;
  line-height: 1.15294em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms4 {
    line-height: 1.03765em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms4 {
    line-height: 1em;
  }
}

.font .ms2 {
  font-size: 1.57143em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms2 {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms2 {
    line-height: 1.51455em;
  }
}

.font .ms1 {
  font-size: 1.28571em;
  line-height: 1.08889em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms1 {
    line-height: 1em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms1 {
    line-height: 1em;
  }
}

.font .ms {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .font .ms {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .font .ms {
    line-height: 1.19em;
  }
}

/**
* Textures:
* `Textures` - Subtle textures are used on the design to give a subtle level of depth.
*
*   @example
*	<h2>Textures</h2>
*	<div class="row"><h3>Paper Textures</h3>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">News Print<small>Solid</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/billie-holiday-lite.png)"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">billie-holiday-lite.png</span></li>
*				<li><strong>Usage: </strong><span class="text">Soft paper used in the background. <strong>This texture opaque and can not be colored.</strong></span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">News Print<small>Transparent</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder half-width" style="background-image:url(Assets/img/billie-holiday.png)"></div>
*				<div class="texture--holder half-width" style="background-image:url(Assets/img/billie-holiday.png);background-color:#6cda22;"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">billie-holiday.png</span></li>
*				<li><strong>Usage: </strong><span class="text">News Print that can have a color behind it.</span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">News Print<small>Dirty &amp; Distressed</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/billie-holiday-speck.png); background-color:#198dae;"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">billie-holiday-spec.png</span></li>
*				<li><strong>Usage: </strong><span class="text">Alternate soft paper used in the background of groupings and overlaps.</span></li>	
*			</ul>
*		</div>
*	</div></div><div class="row">
*	<div class="texture column large-4 end">
*		<div class="content-padding">
*			<h4 class="texture--name">News Print<small>Dark</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/textured_paper.png)"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">textured_paper.png</span></li>
*				<li><strong>Usage: </strong><span class="text">This paper texture is used below news print when there is a need for a deepr layer of texture like in the overlap tabs that break the surface of News Print backgrounds.</span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">Construction Paper</h4>
*			<div class="texture--thumb">
*				<div class="texture--holder third-width" style="background-image:url(Assets/img/construction-paper.png); background-color:#198dae;"></div>
*				<div class="texture--holder third-width" style="background-image:url(Assets/img/construction-paper.png); background-color:#b3b3b3;"></div>
*				<div class="texture--holder third-width" style="background-image:url(Assets/img/construction-paper.png); background-color:#c32231;"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">construction-paper.png</span></li>
*				<li><strong>Usage: </strong><span class="text">A colorable texture to drop in color fields when needed.</span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">Construction Paper<small>Subtle</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/paper-texture.png); background-color:#198dae;"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">paper-texture.png</span></li>
*				<li><strong>Usage: </strong><span class="text">A colorable texture to drop in color fields when needed.</span></li>	
*			</ul>
*		</div>
*	</div>
*	</div>
*	<div class="row"><div class="texture column large-4 end">
*		<div class="content-padding">
*			<h4 class="texture--name">Carbon Paper</h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/crossed_stripes.png)"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">crossed_stripes.png</span></li>
*				<li><strong>Usage: </strong><span class="text">Footer background with a lux quality.</span></li>	
*			</ul>
*		</div>
*	</div></div>
*   <div class="row"><h3>Ink Marks</h3><p>Application Response is shown with "ink" markings that can be simply colored by changing the background-color.</p>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">Cross Hatched Ink <small>With Alt Grey</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder  half-width" style="background-image:url(Assets/img/empty_diamond@2x.png);background-color:#198dae"></div>
*				<div class="texture--holder  half-width" style="background-image:url(Assets/img/empty_diamond_grey@2x.png);background-color:#198dae"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">empty_diamond@2x.png</span></li>
*				<li><strong>File Name: </strong><span class="text">empty_diamond_grey@2x.png</span></li>
*				<li><strong>Special Usage: </strong><span class="text">Table cell states</span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">Cross Hatched Ink<small>Tight</small></h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/empty_diamond.png);background-color:#198dae"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">empty_diamond</span></li>
*				<li><strong>Special Usage: </strong><span class="text">Disabled Buttons</span></li>	
*			</ul>
*		</div>
*	</div>
*	<div class="texture column large-4">
*		<div class="content-padding">
*			<h4 class="texture--name">Stripped Ink</h4>
*			<div class="texture--thumb">
*				<div class="texture--holder" style="background-image:url(Assets/img/empty_stripe@2x.png);background-color:#198dae"></div>
*			</div>
*			<ul class="no-bullet texture--cite">
*				<li><strong>File Name: </strong><span class="text">empty_stripe@2x.png</span></li>
*				<li><strong>Usage: </strong><span class="text">Page responses, error messages, and warning messages</span></li>	
*			</ul>
*		</div>
*	</div>
*	</div><div class="row">
*        <div class="texture column large-4">
*          <div class="content-padding">
*            <h4 class="texture--name">Stripped Ink <small>Alt Grey</small></h4>
*            <div class="texture--thumb">
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe_grey@2x.png);background-color:#dd5aa8;"></div>
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe@2x.png);background-color:#dd5aa8;"></div>
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe_grey@2x.png);background-color:#dd5aa8;"></div>
*            </div>
*            <ul class="no-bullet texture--cite">
*              <li>
*                <strong>File Name:</strong>
*                <span class="text">empty_stripe_grey@2x.png</span>
*              </li>
*              <li>
*                <strong>Usage:</strong>
*                <span class="text">Alternate versions of responses callouts and errors.</span>
*              </li>
*            </ul>
*          </div>
*        </div>
*        <div class="texture column large-4">
*          <div class="content-padding">
*            <h4 class="texture--name">Stripped Ink <small>Alt Blue</small></h4>
*            <div class="texture--thumb">
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe_blue@2x.png);background-color:#dd5aa8;"></div>
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe@2x.png);background-color:#dd5aa8;"></div>
*              <div class="texture--holder third-width" style="background-image:url(Assets/img/empty_stripe_blue@2x.png);background-color:#dd5aa8;"></div>
*            </div>
*            <ul class="no-bullet texture--cite">
*              <li>
*                <strong>File Name:</strong>
*                <span class="text">empty_stripe_blue@2x.png</span>
*              </li>
*              <li>
*                <strong>Usage:</strong>
*                <span class="text">Alternate versions of responses callouts and errors.</span>
*              </li>
*            </ul>
*          </div>
*        </div>
*   	<div class="texture column large-4 end">
*   		<div class="content-padding">
*   			<h4 class="texture--name">Stripped Ink <small>Tight</small></h4>
*   			<div class="texture--thumb">
*   				<div class="texture--holder" style="background-image:url(Assets/img/empty_stripe.png);background-color:#198dae"></div>
*   			</div>
*   			<ul class="no-bullet texture--cite">
*   				<li><strong>File Name: </strong><span class="text">empty_stripe.png</span></li>
*   				<li><strong>Special Usage: </strong><span class="text">List item states.</span></li>	
*   			</ul>
*   		</div>
*   	</div>
*	</div>	
*/

@media only screen and (max-width: 1024px) {
  .texture {
    border-bottom: #e6e6e6 dashed 2px;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
  }
}

.texture .texture--name {
  color: #00386b;
  line-height: 1.5em;
}

.texture .texture--name small {
  display: block;
  clear: both;
  font-size: 0.8em;
  margin-top: 0.1em;
}

.texture .texture--thumb {
  width: auto;
  border: 1px solid #b3b3b3;
  display: inline-block;
  padding: 5px;
  width: 162px;
  height: 162px;
}

@media only screen and (max-width: 1024px) {
  .texture .texture--thumb {
    float: left;
  }
}

.texture .texture--holder {
  width: 150px;
  height: 150px;
}

.texture .texture--holder.half-width {
  width: 75px;
  float: right;
}

.texture .texture--holder.third-width {
  width: 50px;
  float: right;
}

.texture .texture--uppercase {
  text-transform: uppercase;
}

.texture .texture--cite {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: font-color(#333333);
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .texture .texture--cite {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .texture .texture--cite {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) {
  .texture .texture--cite {
    float: left;
    width: calc(100% - 200px);
    margin-left: 25px;
  }
}

/**
* Headline with Counters:
* `.order-marker.` - It is some times useful to add an order-marker to the beginning of headlines. You can modify them by adding `.hollow` or `.inverse` depending on the need.
* 
*   @example
*   <h1><span class="order-marker">1</span>Header 1 Tag</h1>
*   <h2><span class="order-marker">2</span>Header 2 Tag</h2>
*   <h3><span class="order-marker">a</span>Header 3 Tag</h3>
*   <h4 class="with-underline"><span class="order-marker hollow">b</span>Hollow Marker with H4 Tag</h4>
*   <h5 class="colored-paper" style=""><span class="order-marker inverse">c</span>Inversed Marker with H5 Tag</h5>
*/

.order-marker {
  background-color: #198dae;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0.75em 0 0 0;
  position: relative;
  top: -0.25em;
  margin-right: 0.5em;
  text-align: center;
  box-sizing: border-box;
  text-transform: capitalize;
  line-height: 0;
  vertical-align: top;
}

.order-marker.hollow {
  background-color: transparent;
  border: 0.1em solid #198dae;
  color: #198dae;
}

.order-marker.inverse {
  background-color: #fff;
  color: #198dae;
}

.button {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  background-color: #198dae;
  color: #fff;
}

.button:hover,
.button:focus {
  background-color: #14718b;
  color: #fff;
}

.button.radius {
  border-radius: 6px;
}

.button.round {
  border-radius: 25px;
}

.button.icon-only .text {
  display: none;
}

.button.navigation {
  background-color: #018adb;
  color: #fff;
}

.button.navigation:hover,
.button.navigation:focus {
  background-color: #016eaf;
  color: #fff;
}

button[disabled],
button[disabled].success,
button[disabled].alert,
button[disabled].secondary,
button:disabled,
button.success:disabled,
button.alert:disabled,
button.secondary:disabled,
.button.disabled,
.button.disabled.success,
.button.disabled.alert,
.button.disabled.secondary,
.button.disabled:hover,
.button.disabled.success:hover,
.button.disabled.alert:hover,
.button.disabled.secondary:hover {
  background-color: #b3b3b3;
  background-image: url(../img/empty_diamond.png);
  color: #707070;
  border: 1px solid gray;
  cursor: not-allowed;
}

.input-space button[disabled],
.switch-input-space button[disabled],
.input-space button[disabled].success,
.switch-input-space button[disabled].success,
.input-space button[disabled].alert,
.switch-input-space button[disabled].alert,
.input-space button[disabled].secondary,
.switch-input-space button[disabled].secondary,
.input-space button:disabled,
.switch-input-space button:disabled,
.input-space button:disabled.success,
.switch-input-space button:disabled.success,
.input-space button:disabled.alert,
.switch-input-space button:disabled.alert,
.input-space button:disabled.secondary,
.switch-input-space button:disabled.secondary,
.input-space .button.disabled,
.switch-input-space .button.disabled,
.input-space .button.disabled.success,
.switch-input-space .button.disabled.success,
.input-space .button.disabled.alert,
.switch-input-space .button.disabled.alert,
.input-space .button.disabled.secondary,
.switch-input-space .button.disabled.secondary,
.input-space .button.disabled:hover,
.switch-input-space .button.disabled:hover,
.input-space .button.disabled:hover.success,
.switch-input-space .button.disabled:hover.success,
.input-space .button.disabled:hover.alert,
.switch-input-space .button.disabled:hover.alert,
.input-space .button.disabled:hover.secondary,
.switch-input-space .button.disabled:hover.secondary {
  padding-top: 7px;
  padding-bottom: 7px;
}

.link.disabled,
.link.disabled:hover {
  background-image: url("../img/subtlenet2.png");
  color: #707070;
  font-style: italic;
}

.nobutton {
  margin-bottom: 0;
}

.nobutton,
.nobutton:hover,
.nobutton:focus {
  background-color: transparent;
}

.nobutton.disabled,
.nobutton.disabled:hover,
.nobutton[disabled],
.nobutton[disabled]:hover {
  color: #707070;
  cursor: not-allowed;
  background-color: #fff;
}

/**
* Tabs (Basic):
* `.tabs` - Group of nav that is build for a horizontal space. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*	<nav class="nav"><ul class=" tabs">
*		<li class="tabs-title icon"><a class="home"><i class="fa fa-holder"></i></a></li>
*		<li class="tabs-title"><a>Tab 2</a></li>
*		<li class="tabs-title is-active"><a >Tab 3</a></li>
*		<li class="tabs-title"><a >Tab 4</a></li>
*	</ul></nav>
*/

.tabs {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  background: #e6e6e6;
}

.tabs::before,
.tabs::after {
  content: " ";
  display: table;
}

.tabs::after {
  clear: both;
}

.tabs,
.tabs .tabs-title > a {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  font-size: 0.6875rem;
}

@media only screen and (min-width: 767px) {
  .tabs,
  .tabs .tabs-title > a {
    font-size: 0.875rem;
  }
}

@media only screen and (min-width: 1024px) {
  .tabs,
  .tabs .tabs-title > a {
    font-size: 0.875rem;
  }
}

.tabs li,
.tabs .tabs-title {
  background-color: #cccccc;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: inline-block;
  margin: 0.2em 0.2em 0;
}

@media only screen and (min-width: 767px) {
  .tabs li,
  .tabs .tabs-title {
    margin: 0.25em 0.25em 0;
    border-top-left-radius: 4.5px;
    border-top-right-radius: 4.5px;
  }
}

@media only screen and (min-width: 1024px) {
  .tabs li,
  .tabs .tabs-title {
    margin: 0.3em 0.3em 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}

.tabs li > a,
.tabs .tabs-title > a {
  display: inline-block;
  padding: 0.35em 0.5em 0.45em;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 auto;
  width: 100%;
  color: #333333;
}

.tabs li > a,
.tabs li > a:hover,
.tabs .tabs-title > a,
.tabs .tabs-title > a:hover {
  background-color: transparent;
}

@media only screen and (min-width: 767px) {
  .tabs li > a,
  .tabs .tabs-title > a {
    padding: 0.45em 0.75em 0.55em;
  }
}

@media only screen and (min-width: 1024px) {
  .tabs li > a,
  .tabs .tabs-title > a {
    padding: 0.65em 1em 0.75em;
  }
}

.tabs li:hover,
.tabs .tabs-title:hover {
  background-color: #bfbfbf;
}

.tabs li:hover a,
.tabs .tabs-title:hover a {
  color: #333333;
}

.tabs li.icon,
.tabs .tabs-title.icon {
  width: 3em;
}

.tabs li.icon a,
.tabs .tabs-title.icon a {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}

.tabs li.icon.selected,
.tabs li.icon.is-active,
.tabs .tabs-title.icon.selected,
.tabs .tabs-title.icon.is-active {
  background-color: #fff;
}

.tabs li.icon.selected a,
.tabs li.icon.is-active a,
.tabs .tabs-title.icon.selected a,
.tabs .tabs-title.icon.is-active a {
  color: #333333;
}

.tabs li.icon.selected a:hover,
.tabs li.icon.is-active a:hover,
.tabs .tabs-title.icon.selected a:hover,
.tabs .tabs-title.icon.is-active a:hover {
  color: #5c5c5c;
}

.tabs li.icon.selected:hover,
.tabs li.icon.is-active:hover,
.tabs .tabs-title.icon.selected:hover,
.tabs .tabs-title.icon.is-active:hover {
  background-color: #989898;
}

.tabs li.icon.selected:hover a,
.tabs li.icon.is-active:hover a,
.tabs .tabs-title.icon.selected:hover a,
.tabs .tabs-title.icon.is-active:hover a {
  color: #fff;
}

.tabs li.secondary,
.tabs li.visited,
.tabs .tabs-title.secondary,
.tabs .tabs-title.visited {
  background-color: #b3b3b3;
}

.tabs li.secondary a,
.tabs li.visited a,
.tabs .tabs-title.secondary a,
.tabs .tabs-title.visited a {
  color: #333333;
}

.tabs li.secondary:hover,
.tabs li.visited:hover,
.tabs .tabs-title.secondary:hover,
.tabs .tabs-title.visited:hover {
  background-color: #a6a6a6;
}

.tabs li.secondary:hover a,
.tabs li.visited:hover a,
.tabs .tabs-title.secondary:hover a,
.tabs .tabs-title.visited:hover a {
  color: #333333;
}

.tabs li.disabled,
.tabs li.disabled:hover,
.tabs .tabs-title.disabled,
.tabs .tabs-title.disabled:hover {
  background-image: url("../img/subtlenet2.png");
}

.tabs li.disabled a,
.tabs li.disabled,
.tabs li.disabled:hover a,
.tabs li.disabled:hover,
.tabs .tabs-title.disabled a,
.tabs .tabs-title.disabled,
.tabs .tabs-title.disabled:hover a,
.tabs .tabs-title.disabled:hover {
  color: #666666;
  cursor: not-allowed;
  opacity: 0.5;
}

.tabs li.visited,
.tabs .tabs-title.visited {
  background-image: url("../img/cross-hatched.png");
}

.tabs li.locked a:before,
.tabs li.disabled a:before,
.tabs .tabs-title.locked a:before,
.tabs .tabs-title.disabled a:before {
  padding-right: 0.5em;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.tabs li.locked a:before,
.tabs .tabs-title.locked a:before {
  content: "\f023";
}

.tabs li.disabled a:before,
.tabs .tabs-title.disabled a:before {
  content: "\f05e";
}

.tabs li.selected,
.tabs li.is-active,
.tabs .tabs-title.selected,
.tabs .tabs-title.is-active {
  background-image: none;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
  cursor: context-menu;
  bottom: -1px;
  position: relative;
}

.tabs li.selected a,
.tabs li.is-active a,
.tabs .tabs-title.selected a,
.tabs .tabs-title.is-active a {
  color: #333333;
  cursor: context-menu;
}

@media only screen and (max-width: 320px) {
  .tabs {
    width: 100%;
    clear: both;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    margin: 0.2em 0;
  }
  .tabs li {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .tabs li.icon {
    -webkit-box-flex: 0 0 2em;
    -moz-box-flex: 0 0 2em;
    -webkit-flex: 0 0 2em;
    -ms-flex: 0 0 2em;
    flex: 0 0 2em;
  }
}

/**
* Tabs (modifications):
* `.tabs+[modification]` - Tabs can be modified with `.secondary`,`.disabled`,`.visited`,`.locked`
* 
*   @example
*	<nav class="nav"><ul class="tabs">
*		<li class="tabs-title visited locked"><a class="home">visited locked</a></li>
*		<li class="tabs-title visited locked"><a>visited locked</a></li>
*		<li class="tabs-title selected"><a >Selected</a></li>
*		<li class="tabs-title secondary"><a >Secondary</a></li>
*		<li class="tabs-title disabled"><a >Disabled</a></li>
*	</ul></nav>
*/

.tabs.tabs-primary {
  border: 0;
  background: none;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
  clear: both;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.51455em;
  }
}

.tabs.tabs-primary li {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.tabs.tabs-primary li a {
  padding: 0.55em 0.25em 0.75em;
}

.tabs.tabs-primary li a:after {
  border-bottom: 8px solid #00386b;
}

.tabs.tabs-primary li.icon {
  -webkit-box-flex: 0 0 2em;
  -moz-box-flex: 0 0 2em;
  -webkit-flex: 0 0 2em;
  -ms-flex: 0 0 2em;
  flex: 0 0 2em;
}

@media only screen and (min-width: 320px) {
  .tabs.tabs-primary {
    font-size: 1em;
    line-height: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.26em;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary {
    display: block;
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary li a {
    padding: 1em 0.5em;
  }
}

@media only screen and (min-width: 1024px) {
  .tabs.tabs-primary {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.60364em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.51455em;
  }
}

@media only screen and (min-width: 1200px) {
  .tabs.tabs-primary {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary {
    line-height: 1.30667em;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary {
    line-height: 1.23407em;
  }
}

.tabs.tabs-primary:after {
  content: "";
  display: table;
  clear: both;
}

.tabs.tabs-primary li {
  position: relative;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: #fff;
  border-top: 1px #999999 solid;
  border-bottom: 0.45em #999999 solid;
  border-left: 1px #999999 solid;
  border-right: 1px #999999 solid;
  margin: 0;
  display: block;
  float: left;
}

.tabs.tabs-primary li a {
  white-space: normal;
  padding: 0.5em 0.25em;
  color: #333333;
}

@media only screen and (min-width: 320px) {
  .tabs.tabs-primary li a {
    white-space: nowrap;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary li a {
    padding: 1.25em 0.75em;
  }
}

.tabs.tabs-primary li:hover {
  background-color: #fff;
  border-color: #198dae;
}

.tabs.tabs-primary li:hover a {
  color: #198dae;
}

.tabs.tabs-primary li.sucsess {
  background-color: #14b057;
  border-right: 0 none;
  border-left: 0 none;
  border-top: 0 none;
}

.tabs.tabs-primary li.sucsess a {
  color: #fff;
}

.tabs.tabs-primary li.sucsess:hover {
  background-color: #fff;
  border-color: #14b057;
}

.tabs.tabs-primary li.sucsess:hover a {
  color: #14b057;
}

.tabs.tabs-primary li.selected {
  background-color: #198dae;
  border-color: #198dae;
  border-bottom-color: #00386b;
  border-right: 0 none;
  border-left: 0 none;
  bottom: 0;
}

.tabs.tabs-primary li.selected a {
  color: #fff;
}

.tabs.tabs-primary li.selected a:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  /* width: 10%; */
  margin-left: -10px;
  border-style: solid;
  border-color: transparent;
  border-width: 0px 8px;
  border-bottom: 10px solid #00386b;
}

.tabs.tabs-primary li.selected:hover {
  background-color: #198dae;
}

.tabs.tabs-primary li.selected:hover a {
  color: #fff;
}

.tabs.tabs-primary li.disabled,
.tabs.tabs-primary li.disabled:hover {
  border-color: #b3b3b3;
  background: url("../img/subtlenet2.png") repeat;
}

.tabs.tabs-primary li.disabled a,
.tabs.tabs-primary li.disabled,
.tabs.tabs-primary li.disabled:hover a,
.tabs.tabs-primary li.disabled:hover {
  color: #999999;
  cursor: not-allowed;
}

.tabs.tabs-primary li.icon.selected {
  background-color: #198dae;
}

.tabs.tabs-primary li.icon.selected a {
  color: #fff;
}

.tabs.tabs-primary.reverse {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.51455em;
  }
}

.tabs.tabs-primary.reverse li {
  border-top-width: 0.45em;
  border-bottom-width: 1px;
}

.tabs.tabs-primary.reverse li.selected {
  border-color: #198dae;
  border-top-color: #00386b;
}

.tabs.tabs-primary.reverse li.selected a:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: auto;
  left: 50%;
  margin-left: -10px;
  border-style: solid;
  border-color: transparent;
  border-width: 0px 8px;
  border-top: 10px solid #00386b;
  border-bottom: 0 none;
}

@media only screen and (min-width: 320px) {
  .tabs.tabs-primary.reverse {
    font-size: 1em;
    line-height: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
    margin: 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.26em;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1.19em;
  }
}

@media only screen and (min-width: 320px) {
  .tabs.tabs-primary.reverse li.selected a:after {
    border-top: 8px solid #00386b;
  }
}

@media only screen and (min-width: 767px) {
  .tabs.tabs-primary.reverse {
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .tabs.tabs-primary.reverse {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .tabs.tabs-primary.reverse {
    line-height: 1em;
  }
}

/**
* Tabs Primary:
* `.tabs.tabs-primary` -  Priamary is used for top level nav for mobile porjects. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*	<ul class="nav tabs tabs-primary">
*		<li class="icon tabs-title "><a class="home" href="#"><i class="fa fa-holder"></i></a></li>
*		<li class=" tabs-title"><a href="#">Tab 2</a></li>
*		<li class="selected tabs-title " ><a  href="#">Tab 3</a></li>
*		<li class=" tabs-title"><a  href="#">Tab 4</a></li>
*		<li class=" tabs-title"><a  href="#">Tab 5</a></li>
*		<li class="disabled tabs-title" ><a  href="#">Tab 6</a></li>
*	</ul><br>
*	<ul class="nav tabs tabs-primary reverse">
*		<li class="icon   tabs-title"><a class="home" href="#"><i class="fa fa-holder"></i></a></li>
*		<li class=" tabs-title"><a href="#">Tab 2</a></li>
*		<li class="selected tabs-title"><a  href="#">Tab 3</a></li>
*		<li class=" tabs-title"><a  href="#">Tab 4</a></li>
*		<li class=" tabs-title"><a  href="#">Tab 5</a></li>
*		<li class="disabled tabs-title"><a  href="#">Tab 6</a></li>
*	</ul>
*/

.overlap {
  background-color: #cccccc;
  background-image: url("../img/textured_paper.png"),
    url("../img/bottom-shade.png"), url("../img/top-shade.png");
  background-position: top right, bottom right, right -1px;
  background-repeat: repeat, repeat-x, repeat-x;
  margin-bottom: 0.25rem;
  border-bottom: 5px solid #338aa3;
}

.overlap .tabs {
  padding-top: 0.25em;
  border: 0;
  background: transparent none;
  overflow: hidden;
}

.overlap .tabs li,
.overlap .tabs .tabs-title {
  border: 1px solid #66838c;
  border-bottom: 0;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  margin-bottom: 0;
  vertical-align: bottom;
}

.overlap .tabs li.selected,
.overlap .tabs li.is-active,
.overlap .tabs .tabs-title.selected,
.overlap .tabs .tabs-title.is-active {
  margin-bottom: -1px;
  padding-bottom: 3px;
  background: #338aa3;
  border-color: #338aa3;
  z-index: 1000;
  vertical-align: bottom;
}

.page-overlap .overlap .tabs li.selected,
.page-overlap .overlap .tabs li.is-active,
.page-overlap .overlap .tabs .tabs-title.selected,
.page-overlap .overlap .tabs .tabs-title.is-active {
  background-image: url(../img/billie-holiday-speck.png);
}

.overlap .tabs li.selected a,
.overlap .tabs li.is-active a,
.overlap .tabs .tabs-title.selected a,
.overlap .tabs .tabs-title.is-active a {
  color: #fff;
}

.overlap .tabs li.secondary,
.overlap .tabs .tabs-title.secondary {
  border-color: #b3b3b3;
}

.with-group-sections.error .overlap,
.paper-page.error .overlap {
  border-bottom-color: #c32231;
}

.with-group-sections.error .overlap li.selected,
.with-group-sections.error .overlap li.is-active,
.with-group-sections.error .overlap .tabs-title.selected,
.with-group-sections.error .overlap .tabs-title.is-active,
.paper-page.error .overlap li.selected,
.paper-page.error .overlap li.is-active,
.paper-page.error .overlap .tabs-title.selected,
.paper-page.error .overlap .tabs-title.is-active {
  background-color: #c32231;
  border-color: #c32231;
}

.with-group-sections.warning .overlap,
.paper-page.warning .overlap {
  border-bottom-color: #e08514;
}

.with-group-sections.warning .overlap li.selected,
.with-group-sections.warning .overlap li.is-active,
.with-group-sections.warning .overlap .tabs-title.selected,
.with-group-sections.warning .overlap .tabs-title.is-active,
.paper-page.warning .overlap li.selected,
.paper-page.warning .overlap li.is-active,
.paper-page.warning .overlap .tabs-title.selected,
.paper-page.warning .overlap .tabs-title.is-active {
  background-color: #e08514;
  border-color: #e08514;
}

.with-group-sections.success .overlap,
.paper-page.success .overlap {
  border-bottom-color: #14b057;
}

.with-group-sections.success .overlap li.selected,
.with-group-sections.success .overlap li.is-active,
.with-group-sections.success .overlap .tabs-title.selected,
.with-group-sections.success .overlap .tabs-title.is-active,
.paper-page.success .overlap li.selected,
.paper-page.success .overlap li.is-active,
.paper-page.success .overlap .tabs-title.selected,
.paper-page.success .overlap .tabs-title.is-active {
  background-color: #14b057;
  border-color: #14b057;
}

.with-group-sections.info .overlap,
.paper-page.info .overlap {
  border-bottom-color: #a6a6a6;
}

.with-group-sections.info .overlap li.selected,
.with-group-sections.info .overlap li.is-active,
.with-group-sections.info .overlap .tabs-title.selected,
.with-group-sections.info .overlap .tabs-title.is-active,
.paper-page.info .overlap li.selected,
.paper-page.info .overlap li.is-active,
.paper-page.info .overlap .tabs-title.selected,
.paper-page.info .overlap .tabs-title.is-active {
  background-color: #a6a6a6;
  border-color: #a6a6a6;
}

.with-group-sections.highlighted .overlap,
.paper-page.highlighted .overlap {
  border-bottom-color: #198dae;
}

.with-group-sections.highlighted .overlap li.selected,
.with-group-sections.highlighted .overlap li.is-active,
.with-group-sections.highlighted .overlap .tabs-title.selected,
.with-group-sections.highlighted .overlap .tabs-title.is-active,
.paper-page.highlighted .overlap li.selected,
.paper-page.highlighted .overlap li.is-active,
.paper-page.highlighted .overlap .tabs-title.selected,
.paper-page.highlighted .overlap .tabs-title.is-active {
  background-color: #198dae;
  border-color: #198dae;
}

.with-group-sections.disabled .overlap,
.paper-page.disabled .overlap {
  border-bottom-color: #cccccc;
}

.with-group-sections.disabled .overlap li.selected,
.with-group-sections.disabled .overlap li.is-active,
.with-group-sections.disabled .overlap .tabs-title.selected,
.with-group-sections.disabled .overlap .tabs-title.is-active,
.paper-page.disabled .overlap li.selected,
.paper-page.disabled .overlap li.is-active,
.paper-page.disabled .overlap .tabs-title.selected,
.paper-page.disabled .overlap .tabs-title.is-active {
  background-color: #cccccc;
  border-color: #cccccc;
}

/**
* Tabs Overlap:
* `.tabs.overlap` -  Overlap gives shallow space to give a small layer effect
* 
*   @example
*	<nav class="overlap nav"><ul class="tabs ">
*		<li class="tab-title icon"><a class="home"><i class="fa fa-holder"></i></a></li>
*		<li class="tab-title "><a>Tab 2</a></li>
*		<li class="tab-title is-active"><a >Tab 3</a></li>
*		<li class="tab-title "><a >Tab 4</a></li>
*	</ul></nav>
*/

/**
* Navigation List:
* `.nav-list ul li` - A collection of navigation links perfect for side navigation or a collection of external links. Add `.selected` to the `li` to highlight the nav link.
* 
*   @example
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*/

.nav-list a,
.panel-selector a,
.nav-list .list-item-wrapper,
.panel-selector .list-item-wrapper {
  display: table;
  width: 100%;
  text-align: right;
  color: #5c5c5c;
}

.nav-list a .text,
.panel-selector a .text,
.nav-list a i,
.panel-selector a i,
.nav-list .list-item-wrapper .text,
.panel-selector .list-item-wrapper .text,
.nav-list .list-item-wrapper i,
.panel-selector .list-item-wrapper i {
  display: table-cell;
}

.nav-list a .text,
.panel-selector a .text,
.nav-list .list-item-wrapper .text,
.panel-selector .list-item-wrapper .text {
  text-align: left;
}

.nav-list a i,
.panel-selector a i,
.nav-list .list-item-wrapper i,
.panel-selector .list-item-wrapper i {
  width: 2em;
}

.nav-list li,
.panel-selector li {
  padding: 0.25rem 1rem;
}

.nav-list li .text + .fa,
.panel-selector li .text + .fa,
.nav-list li .fa + .text,
.panel-selector li .fa + .text {
  padding-left: 0.5em;
}

.nav-list li i.fa-holder-dynamic:before,
.panel-selector li i.fa-holder-dynamic:before,
.nav-list li.dynamic i.fa-holder:before,
.panel-selector li.dynamic i.fa-holder:before {
  content: "";
}

.nav-list li:hover,
.panel-selector li:hover {
  background-color: #e6e6e6;
}

.nav-list li:hover a,
.panel-selector li:hover a {
  color: #333333;
}

.nav-list li.selected,
.panel-selector li.selected {
  background-color: #c9edf7;
}

.nav-list li.selected,
.panel-selector li.selected,
.nav-list li.selected:hover a,
.panel-selector li.selected:hover a {
  color: #333333;
  cursor: pointer;
  cursor: context-menu;
}

.nav-list ul,
.panel-selector ul {
  margin: 0;
  width: 100%;
  display: block;
  position: relative;
  list-style-type: none;
}

/**
* Nav List (With Headlines):
* `.nav-list ul li` - The nav list changes styles depending on the headline tag in front of the nav-list. or simply add the class `large`, `medium`, or `small`  
* 
*   @example
*	<h1>H1 header tag</h1>
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*	<br>
*	<div>This list has the medium class</div>
*	<nav class="nav-list medium">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*	<br>
*	<h3>H3 header tag</h3>
*	<nav class="nav-list">
*	<ul>
*	<li><a><span class="text">Nav List Item 1</span><i class="fa fa-holder-dynamic"></i></a></li>
*	<li class="selected"><a><span class="text">Nav List Item 2</span><i class="fa fa-holder-dynamic"></i></a></li>
*	</ul>
*	</nav>
*/

h1 + .nav-list,
h1 + .panel-selector,
.large.nav-list,
.large.panel-selector {
  border-top: #198dae 2px solid;
  margin-top: -0.75rem;
  padding-top: 0.7rem;
  margin-bottom: 1.5rem;
}

h2 + .nav-list,
h2 + .panel-selector,
.medium.nav-list,
.medium.panel-selector {
  margin-bottom: 1rem;
  padding-top: 0.5rem;
  margin-top: -0.5rem;
  border-top: 2px solid #b3b3b3;
}

h3 + .nav-list,
h3 + .panel-selector,
.small.nav-list,
.small.panel-selector {
  margin-bottom: 0.7rem;
}

h3 + .nav-list li,
h3 + .panel-selector li,
.small.nav-list li,
.small.panel-selector li {
  border: 1px solid #cccccc;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0;
  margin-top: -1px;
}

.nav-list.large,
.large.panel-selector,
.nav-list.medium,
.medium.panel-selector,
.nav-list.small,
.small.panel-selector {
  margin-top: 0;
}

/**
* Nav List (Checklist):
* `.nav-checklist` - add class to the nav to change the .nav-list from forward links to a list with states of `.selected`, `.success`, `.warning`, `.error`
* 
*   @example
*	<nav class="nav-list nav-checklist">
*	<ul>
*	<li class="">
*	<a><span class="text">Nav List Item 1(blank)</span><i class="fa fa-holder-dynamic"></i></a>
*	<li  class="selected">
*	<a><span class="text">Nav List Item 2(selected)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="sucess">
*	<a><span class="text">Nav List Item 3(sucess)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	</ul>
*	</nav>
*/

.nav-list.nav-checklist li,
.nav-checklist.panel-selector li {
  border: 1px solid #e6e6e6;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0;
  margin-top: -1px;
  background-image: url(../img/empty_stripe.png);
}

.nav-list.nav-checklist li i.fa-holder-dynamic:before,
.nav-checklist.panel-selector li i.fa-holder-dynamic:before,
.nav-list.nav-checklist li.dynamic i.fa-holder:before,
.nav-checklist.panel-selector li.dynamic i.fa-holder:before {
  content: "";
}

.nav-list.nav-checklist li:hover,
.nav-checklist.panel-selector li:hover {
  background-image: none;
}

.nav-list.nav-checklist li.selected,
.nav-checklist.panel-selector li.selected {
  border-bottom-width: 1px;
  border-color: #8ef2b9;
  background-image: none;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  color: #333333;
}

.nav-list.nav-checklist li.selected i.fa-holder-dynamic:before,
.nav-checklist.panel-selector li.selected i.fa-holder-dynamic:before,
.nav-list.nav-checklist li.selected.dynamic i.fa-holder:before,
.nav-checklist.panel-selector li.selected.dynamic i.fa-holder:before {
  content: "";
}

.nav-list.nav-checklist li.selected i,
.nav-checklist.panel-selector li.selected i {
  color: white;
}

.nav-list.nav-checklist li.completed i.fa-holder-dynamic:before,
.nav-checklist.panel-selector li.completed i.fa-holder-dynamic:before,
.nav-list.nav-checklist li.completed.dynamic i.fa-holder:before,
.nav-checklist.panel-selector li.completed.dynamic i.fa-holder:before {
  content: "";
}

.nav-list.nav-checklist li.completed i,
.nav-checklist.panel-selector li.completed i {
  color: #14b057;
}

.nav-list.nav-checklist li.error,
.nav-checklist.panel-selector li.error {
  background-color: #f7cfd3;
  border-color: #f0abb2;
  border-bottom-width: 1;
  color: #333333;
}

.nav-list.nav-checklist li.error:hover,
.nav-checklist.panel-selector li.error:hover {
  background-color: #ee9fa7;
}

.nav-list.nav-checklist li.error.selected,
.nav-checklist.panel-selector li.error.selected {
  color: white;
}

.nav-list.nav-checklist li.error.selected:hover,
.nav-checklist.panel-selector li.error.selected:hover {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.warning,
.nav-checklist.panel-selector li.warning {
  background-color: #fbe7ce;
  border-color: #f7d5aa;
  border-bottom-width: 1;
  color: #333333;
}

.nav-list.nav-checklist li.warning:hover,
.nav-checklist.panel-selector li.warning:hover {
  background-color: #f6cf9d;
}

.nav-list.nav-checklist li.warning.selected,
.nav-checklist.panel-selector li.warning.selected {
  color: white;
}

.nav-list.nav-checklist li.warning.selected:hover,
.nav-checklist.panel-selector li.warning.selected:hover {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.success,
.nav-checklist.panel-selector li.success {
  background-color: #c7f9dc;
  border-color: #9cf4c2;
  border-bottom-width: 1;
  color: #333333;
}

.nav-list.nav-checklist li.success:hover,
.nav-checklist.panel-selector li.success:hover {
  background-color: #8ef2b9;
}

.nav-list.nav-checklist li.success.selected,
.nav-checklist.panel-selector li.success.selected {
  color: white;
}

.nav-list.nav-checklist li.success.selected:hover,
.nav-checklist.panel-selector li.success.selected:hover {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.info,
.nav-checklist.panel-selector li.info {
  background-color: #ededed;
  border-color: #e0e0e0;
  border-bottom-width: 1;
  color: #333333;
}

.nav-list.nav-checklist li.info:hover,
.nav-checklist.panel-selector li.info:hover {
  background-color: #dbdbdb;
}

.nav-list.nav-checklist li.info.selected,
.nav-checklist.panel-selector li.info.selected {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.info.selected:hover,
.nav-checklist.panel-selector li.info.selected:hover {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.highlighted,
.nav-checklist.panel-selector li.highlighted {
  background-color: #c9edf7;
  border-color: #a0dff1;
  border-bottom-width: 1;
  color: #333333;
}

.nav-list.nav-checklist li.highlighted:hover,
.nav-checklist.panel-selector li.highlighted:hover {
  background-color: #92dbef;
}

.nav-list.nav-checklist li.highlighted.selected,
.nav-checklist.panel-selector li.highlighted.selected {
  color: white;
}

.nav-list.nav-checklist li.highlighted.selected:hover,
.nav-checklist.panel-selector li.highlighted.selected:hover {
  color: #5c5c5c;
}

.nav-list.nav-checklist li.disabled,
.nav-checklist.panel-selector li.disabled,
.nav-list.nav-checklist li.disabled:hover,
.nav-checklist.panel-selector li.disabled:hover {
  cursor: none;
  cursor: not-allowed;
  background-color: #cccccc;
  color: #999999;
  background-image: url(../img/empty_stripe.png);
}

.nav-list.nav-checklist li.disabled a,
.nav-checklist.panel-selector li.disabled a,
.nav-list.nav-checklist li.disabled a:hover,
.nav-checklist.panel-selector li.disabled a:hover {
  color: #999999;
  cursor: none;
  cursor: not-allowed;
}

/**
* Nav List (Checklist w/ States):
* `.nav-checklist.statename` - add class to the nav to change the list item to reflect the state with `.warning`, `.error`, `.highlighted`...
* 
*   @example
*	<nav class="nav-list nav-checklist">
*	<ul>
*	<li class="">
*	<a><span class="text">Nav List Item 1(blank)</span><i class="fa fa-holder-dynamic"></i></a>
*	<li  class="selected">
*	<a><span class="text">Nav List Item 2(selected and warning)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="highlighted">
*	<a><span class="text">Nav List Item 3(highlighted)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li  class="warning">
*	<a><span class="text">Nav List Item 4(warning)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li>
*	<li class="error">
*	<a><span class="text">Nav List Item 5(error)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li >
*	<li class="disabled">
*	<a><span class="text">Nav List Item 5(disabled)</span><i class="fa fa-holder-dynamic"></i></a>
*	</li >
*	</ul>
*	</nav>
*/

.section-nav {
  width: 100%;
  display: block;
  position: relative;
  border: 0px solid #b3b3b3;
}

.split-content .section-nav {
  margin-left: -1.07143rem;
  margin-right: -1.07143rem;
  padding-left: 1.07143rem;
  padding-right: 1.07143rem;
}

.with-group-sections .section-nav,
.paper-page .section-nav {
  margin-left: 0;
  margin-right: 0;
}

.section-nav .text {
  padding-top: 6.25px;
  padding-bottom: 6.25px;
  -webkit-transition: padding 1.5s;
  /* Safari */
  transition: padding 1.5s;
}

.section-nav .circle {
  position: absolute;
  -webkit-transition: all 1.5s;
  /* Safari */
  transition: all 1.5s;
  overflow: hidden;
  width: 50px;
  height: 50px;
  background: #25b6e0;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  border: 4px solid #fff;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.61);
}

.section-nav .circle i {
  font-size: 25px;
  line-height: 1em;
  margin: 10.5px;
  color: #fff;
  -webkit-transition: all 1.5s;
  /* Safari */
  transition: all 1.5s;
  -ms-transform: translate(0px, 0);
  /* IE 9 */
  -webkit-transform: translate(0px, 0);
  /* Safari */
  transform: translate(0px, 0);
}

.section-nav .circle i:before {
  vertical-align: bottom;
}

.section-nav.forward {
  border-top-width: 1px;
  background: url("../img/billie-holiday.png") repeat top right,
    url("../img/top-shade.png") repeat-x top right;
  margin-top: 37.5px;
  border-top-width: 2px;
}

.section-nav.forward i.fa-holder-dynamic:before,
.section-nav.forward.dynamic i.fa-holder:before {
  content: "";
}

.section-nav.forward .circle {
  right: 12.5px;
  bottom: 8.33333px;
}

.section-nav.forward .circle i {
  margin: 10.5px 13px;
}

.section-nav.forward .text {
  padding-right: 75px;
  text-align: right;
}

.section-nav.back {
  background: url("../img/billie-holiday.png") repeat top right,
    url("../img/bottom-shade.png") repeat-x bottom right;
  margin-bottom: 37.5px;
  border-bottom-width: 2px;
}

.section-nav.back i.fa-holder-dynamic:before,
.section-nav.back.dynamic i.fa-holder:before {
  content: "";
}

.section-nav.back .text {
  padding-left: 75px;
  text-align: left;
}

.section-nav.back .circle {
  left: 12.5px;
  top: 8.33333px;
}

.section-nav:hover .circle {
  background: #198dae;
  border: 4px solid #fff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);
}

.section-nav:hover .circle i {
  color: #fff;
}

.section-nav.disabled {
  cursor: context-menu;
}

.section-nav.disabled .text {
  color: #999999;
}

.section-nav.disabled.back .text {
  padding-left: 1.5rem;
}

.section-nav.disabled.forward .text {
  padding-right: 1.5rem;
}

.section-nav.disabled.back .circle {
  top: 28px;
}

.section-nav.disabled.back .circle i {
  -ms-transform: translate(-50px, -12.5px);
  /* IE 9 */
  -webkit-transform: translate(-50px, -12.5px);
  /* Safari */
  transform: translate(-50px, -12.5px);
}

.section-nav.disabled.forward .circle {
  bottom: 28px;
}

.section-nav.disabled.forward .circle i {
  -ms-transform: translate(50px, -12.5px);
  /* IE 9 */
  -webkit-transform: translate(50px, -12.5px);
  /* Safari */
  transform: translate(50px, -12.5px);
}

.section-nav.disabled .circle,
.section-nav.disabled.hover.circle {
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  background-color: #999999;
  background-image: url("../img/empty_diamond.png");
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid #fff;
}

/**
* Circle Section Nav (forward & back):
* `.section-nav with .forward or .back` - A wizard-like page nav. Alter the position of the circle button by adding  `.forward` or `.back` to the `.section-nav` container.
* 
*   @example
*	<div class="page with-group-sections"><div class="section-nav back">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Back</div>
*		</a>
*	</div>
*	<div class="page-wrapper">
*	<section class="group-section">
*		<h1 class="with-underline">Page Title </h1>
*		<p> hello I am some content on this page</p>
*	</div>
*	</section>
*	<div class="section-nav forward">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Forward</div>
*		</a>
*	</div></div>
*/

/**
* Circle Section Nav (Disabled):
* `.section-nav with .disabled` - Adding `.disabled` to the `.section-nav` container with style the circle nav accordingly.
* 
*   @example
*	<div class="page"><div class="section-nav back disabled">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Back</div>
*		</a>
*	</div>
*	<div class="page-wrapper">
*	<section class="group-section">
*		<h1 class="with-underline">Page Title (Disabled)</h1>
*		<p> Somethig on this page has disabled forward navigation</p>
*	</div>
*	</section>
*	<div class="section-nav forward disabled">
*		<a>
*			<div class="circle"><i class="fa fa-holder-dynamic"></i></div>
*			<div class="text"> Forward</div>
*		</a>
*	</div></div>
*/

.answer,
.answer-group,
.question,
.question-group,
.question-inline,
.question-grid-based {
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
  margin-bottom: 0.25em;
}

@media only screen and (min-height: 320px) {
  .answer,
  .answer-group,
  .question,
  .question-group,
  .question-inline,
  .question-grid-based {
    margin-bottom: 0.5em;
  }
}

@media only screen and (min-height: 480px) {
  .answer,
  .answer-group,
  .question,
  .question-group,
  .question-inline,
  .question-grid-based {
    margin-bottom: 0.5em;
  }
}

@media only screen and (min-height: 600px) {
  .answer,
  .answer-group,
  .question,
  .question-group,
  .question-inline,
  .question-grid-based {
    margin-bottom: 0.5em;
  }
}

@media only screen and (min-width: 1024px) {
  .answer,
  .answer-group,
  .question,
  .question-group,
  .question-inline,
  .question-grid-based {
    margin-bottom: 0.5em;
  }
}

.answer input,
.answer textarea,
.answer select,
.answer button,
.answer .button,
.answer-group input,
.answer-group textarea,
.answer-group select,
.answer-group button,
.answer-group .button,
.question input,
.question textarea,
.question select,
.question button,
.question .button,
.question-group input,
.question-group textarea,
.question-group select,
.question-group button,
.question-group .button,
.question-inline input,
.question-inline textarea,
.question-inline select,
.question-inline button,
.question-inline .button,
.question-grid-based input,
.question-grid-based textarea,
.question-grid-based select,
.question-grid-based button,
.question-grid-based .button {
  margin-bottom: 0;
}

.input-holder [type="text"],
.input-holder [type="password"],
.input-holder [type="date"],
.input-holder [type="datetime"],
.input-holder [type="datetime-local"],
.input-holder [type="month"],
.input-holder [type="week"],
.input-holder [type="email"],
.input-holder [type="number"],
.input-holder [type="search"],
.input-holder [type="tel"],
.input-holder [type="time"],
.input-holder [type="url"],
.input-holder [type="color"],
.input-holder textarea,
.input-holder button,
.input-holder .button {
  font-size: 0.875rem;
  line-height: 1.09375rem;
  padding: 0.65625rem 0.65625rem;
  height: 2.1875rem;
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder [type="text"],
  .input-holder [type="password"],
  .input-holder [type="date"],
  .input-holder [type="datetime"],
  .input-holder [type="datetime-local"],
  .input-holder [type="month"],
  .input-holder [type="week"],
  .input-holder [type="email"],
  .input-holder [type="number"],
  .input-holder [type="search"],
  .input-holder [type="tel"],
  .input-holder [type="time"],
  .input-holder [type="url"],
  .input-holder [type="color"],
  .input-holder textarea,
  .input-holder button,
  .input-holder .button {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-holder [type="text"],
  .input-holder [type="password"],
  .input-holder [type="date"],
  .input-holder [type="datetime"],
  .input-holder [type="datetime-local"],
  .input-holder [type="month"],
  .input-holder [type="week"],
  .input-holder [type="email"],
  .input-holder [type="number"],
  .input-holder [type="search"],
  .input-holder [type="tel"],
  .input-holder [type="time"],
  .input-holder [type="url"],
  .input-holder [type="color"],
  .input-holder textarea,
  .input-holder button,
  .input-holder .button {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

.input-holder select,
.input-holder option {
  font-size: 1rem;
  line-height: 1rem;
  height: 2.1875rem;
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder select,
  .input-holder option {
    height: 1.96875rem;
  }
}

@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-holder select,
  .input-holder option {
    height: 1.75rem;
    padding: 0.25rem 0.5rem 0;
  }
}

.input-holder .prefix,
.input-holder .postfix,
.input-holder .value {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  padding: 0.5em;
  margin-top: 0;
  color: #666666;
  border: 1px solid transparent;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .input-holder .prefix,
  .input-holder .postfix,
  .input-holder .value {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-holder .prefix,
  .input-holder .postfix,
  .input-holder .value {
    line-height: 1.19em;
  }
}

.input-holder .prefix,
.input-holder .postfix {
  background: url("../img/paper-texture.png");
  border: 1px solid #b3b3b3;
}

.question .label-holder,
.question .input-holder,
.question .message-holder,
.question .value-holder,
.question .hint {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.question .label-holder::before,
.question .label-holder::after,
.question .input-holder::before,
.question .input-holder::after,
.question .message-holder::before,
.question .message-holder::after,
.question .value-holder::before,
.question .value-holder::after,
.question .hint::before,
.question .hint::after {
  content: " ";
  display: table;
}

.question .label-holder::after,
.question .input-holder::after,
.question .message-holder::after,
.question .value-holder::after,
.question .hint::after {
  clear: both;
}

.label-holder {
  white-space: nowrap;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0.7em;
  margin-bottom: 0.35em;
  position: relative;
  background-color: transparent;
  color: #5c5c5c;
}

.label-holder label,
.label-holder .label,
.label-holder .text {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .label-holder label,
  .label-holder .label,
  .label-holder .text {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .label-holder label,
  .label-holder .label,
  .label-holder .text {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .label-holder {
    line-height: 1.26em;
    margin-top: 0.63em;
    margin-bottom: 0.315em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .label-holder {
    line-height: 1.19em;
    margin-top: 0.525em;
    margin-bottom: 0.2625em;
  }
}

@media only screen and (max-width: 767px) {
  .label-holder {
    white-space: normal;
  }
}

.label-holder .text {
  padding-right: 1rem;
}

.required-holder {
  display: none;
  height: 1em;
  width: 1em;
  position: relative;
  margin-left: -1em;
  margin-right: -1em;
  color: #333333;
}

.required-holder i.fa-holder-dynamic {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.75em;
}

.required .required-holder,
.answer.error .required-holder,
.question.error .required-holder,
.answer.warning .required-holder,
.question.warning .required-holder,
.answer.success .required-holder,
.question.success .required-holder,
.answer.info .required-holder,
.question.info .required-holder,
.answer.highlighted .required-holder,
.question.highlighted .required-holder,
.answer.disabled .required-holder,
.question.disabled .required-holder,
.repeater.required > .label-holder .required-holder {
  background-color: transparent;
  display: inline-block;
}

.required .required-holder {
  color: #e08514;
}

.required .required-holder i.fa-holder-dynamic:before,
.required .required-holder.dynamic i.fa-holder:before {
  content: "";
}

.input-holder,
.value-holder {
  margin-bottom: 0;
}

.input-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.input-holder::before,
.input-holder::after {
  content: " ";
  display: table;
}

.input-holder::after {
  clear: both;
}

.input-space,
.switch-input-space,
.value-space {
  padding-left: 0;
  padding-right: 0;
}

.input-space-label {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  color: #666666;
  padding: 0.65625rem 0.65625rem;
  height: 2.1875rem;
  padding-left: 1em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .input-space-label {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-space-label {
    line-height: 1.19em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .input-space-label {
    padding: 0.30625rem 0.4375rem;
    height: 1.96875rem;
  }
}

@media only screen and (min-width: 767px) and (min-height: 480px) {
  .input-space-label {
    padding: 0.21875rem 0.4375rem;
    height: 1.75rem;
  }
}

.message-holder > small,
.message-holder > span {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  display: none;
  padding: 0.375rem 0.5625rem 0.5625rem;
  margin-top: -1px;
  margin-bottom: 0.25rem;
  clear: both;
  color: #fff;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .message-holder > small,
  .message-holder > span {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .message-holder > small,
  .message-holder > span {
    line-height: 1.51455em;
  }
}

.message-holder > small i,
.message-holder > span i {
  margin-right: 0.5rem;
}

.hint {
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .hint {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .hint {
    line-height: 1.51455em;
  }
}

.answer:disabled,
.answer[disabled],
.answer-group:disabled,
.answer-group[disabled],
.question:disabled,
.question[disabled],
.question-group:disabled,
.question-group[disabled],
.question-inline:disabled,
.question-inline[disabled],
.question-grid-based:disabled,
.question-grid-based[disabled],
.answer .chosen-disabled.chosen-container .chosen-choices,
.question .chosen-disabled.chosen-container .chosen-choices {
  background-color: #b3b3b3;
  background-image: url(../img/empty_stripe.png);
  color: #707070;
}

.answer .required,
.question .required,
.question-inline .required,
.question-grid-based .required {
  display: none;
}

.answer.required .required,
.question.required .required,
.question-inline.required .required,
.question-grid-based.required .required {
  display: inline-block;
  width: 100%;
}

.hint .error,
.hint .warning,
.hint .success,
.hint .info,
.hint .highlighted,
.hint .disabled {
  padding: 0.25em 0.5em;
}

.error textarea,
.error select,
.error input,
.error datalist,
.warning textarea,
.warning select,
.warning input,
.warning datalist,
.success textarea,
.success select,
.success input,
.success datalist,
.info textarea,
.info select,
.info input,
.info datalist,
.highlighted textarea,
.highlighted select,
.highlighted input,
.highlighted datalist,
.disabled textarea,
.disabled select,
.disabled input,
.disabled datalist {
  margin-bottom: 0;
}

.message-holder > .error,
.message-holder > .warning,
.message-holder > .success,
.message-holder > .info,
.message-holder > .highlighted,
.message-holder > .disabled {
  display: none;
}

.error .message-holder > .error,
.message-holder > .error.make-visible,
.warning .message-holder > .warning,
.message-holder > .warning.make-visible,
.success .message-holder > .success,
.message-holder > .success.make-visible,
.info .message-holder > .info,
.message-holder > .info.make-visible,
.highlighted .message-holder > .highlighted,
.message-holder > .highlighted.make-visible,
.disabled .message-holder > .disabled,
.message-holder > .disabled.make-visible {
  display: block;
}

.input-space a.button i,
.switch-input-space a.button i,
.input-space button i,
.switch-input-space button i,
.input-space .button i,
.switch-input-space .button i {
  margin-right: 0.2rem;
}

/**
* Questions -Required:
* `.question` - This is a standard formating for an input question. 
* 
*   @example
*	<div class="question required">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question Dropdown Title (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 value">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*/

/**
* Questions - States:
* `.question + .warning + error +...` - Modify the container with `.required`, `.warning`, '.error', and other states. Modifiers change the icons and control the visiblity of the message holder.
* 
*   @example
*	<div class="question warning wildcard">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 value">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="info"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
**/

.question-inline {
  display: block;
  margin-bottom: 0.75rem;
}

.question-inline .label-holder {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin: 0;
}

.question-inline .label-holder,
.question-inline .input-holder {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  float: left;
}

.question-inline .label-holder * {
  white-space: nowrap;
  padding-right: 1rem;
}

.question-inline .input-holder {
  margin-bottom: 0.25rem;
}

.question-inline .input-holder .input-space,
.question-inline .input-holder .switch-input-space {
  padding-left: 0;
}

.question-inline .message-holder,
.question-inline .hint {
  display: block;
  clear: left;
}

.question-inline .hint {
  border-top: 1px solid #e6e6e6;
  padding: 0.25rem;
  background-color: #e4f6fb;
}

/**
* Questions - Inline:
* `.question-inline` - questions when there is a need can be made to be inline so the text box will follow the label. These questions will revert to the base question style when on smaller phones. 
*  Modify any `.question` with the added class of  `.question-inline`
* 
*   @example
*	<div class="question question-inline">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question Dropdown Title (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3 post-fix">
*				Years
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*/

.question-grid-based {
  /*.label-holder{padding-left:0 !important;
  	label{display:table;margin-bottom:0;
  	.text,.seq,.required-holder{
  		display: table-cell;
  		padding:0;
  	}
  	.seq,.required-holder{
  	   
  		margin-left:0;
  		margin-right:0;
  	}
  	}
  }*/
  max-width: 600px;
}

.question-grid-based .input-holder input:focus,
.question-grid-based .input-holder select:focus {
  -webkit-box-shadow: inset 0px 0px 2px 2px #198dae;
  -moz-box-shadow: inset 0px 0px 2px 2px #198dae;
  box-shadow: inset 0px 0px 2px 2px #198dae;
}

.question-grid-based .label-holder .text {
  white-space: normal;
}

.question-grid-based .label-holder .hint,
.question-grid-based .label-holder .message-holder,
.question-grid-based .input-holder .hint,
.question-grid-based .input-holder .message-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  display: block;
  margin: 0 0 0.3em 0;
  padding: 0;
  line-height: 1;
}

.question-grid-based .label-holder .hint::before,
.question-grid-based .label-holder .hint::after,
.question-grid-based .label-holder .message-holder::before,
.question-grid-based .label-holder .message-holder::after,
.question-grid-based .input-holder .hint::before,
.question-grid-based .input-holder .hint::after,
.question-grid-based .input-holder .message-holder::before,
.question-grid-based .input-holder .message-holder::after {
  content: " ";
  display: table;
}

.question-grid-based .label-holder .hint::after,
.question-grid-based .label-holder .message-holder::after,
.question-grid-based .input-holder .hint::after,
.question-grid-based .input-holder .message-holder::after {
  clear: both;
}

.question-grid-based .label-holder,
.question-grid-based .input-holder {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 40em) {
  .question-grid-based .label-holder,
  .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.question-grid-based .label-holder:last-child:not(:first-child),
.question-grid-based .input-holder:last-child:not(:first-child) {
  float: right;
}

@media only screen and (min-width: 767px) {
  .question-grid-based .label-holder,
  .question-grid-based .input-holder {
    display: inline-block;
  }
  .question-grid-based .label-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based .input-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based .input-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .label-holder {
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-2-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based.span-2-col .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .input-holder {
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-2-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based.span-2-col .input-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .label-holder {
    width: 16.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-3-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based.span-3-col .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .input-holder {
    width: 83.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 767px) and (min-width: 40em) {
  .question-grid-based.span-3-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 767px) {
  .question-grid-based.span-3-col .input-holder:last-child:not(: first-child) {
    float: right;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based .label-holder,
  .question-grid-based .input-holder {
    display: inline-block;
  }
  .question-grid-based .label-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based .input-holder {
    width: 50%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based .input-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .label-holder {
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-2-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based.span-2-col .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-2-col .input-holder {
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-2-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based.span-2-col .input-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .label-holder {
    width: 16.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-3-col .label-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based.span-3-col .label-holder:last-child:not(: first-child) {
    float: right;
  }
  .question-grid-based.span-3-col .input-holder {
    width: 83.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) and (min-width: 40em) {
  .question-grid-based.span-3-col .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media only screen and (min-width: 1024px) {
  .question-grid-based.span-3-col .input-holder:last-child:not(: first-child) {
    float: right;
  }
}

.question-grid-based.label-position-top .label-holder,
.question-grid-based.label-position-top .input-holder {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 0;
}

@media screen and (min-width: 40em) {
  .question-grid-based.label-position-top .label-holder,
  .question-grid-based.label-position-top .input-holder {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.question-grid-based.label-position-top
  .label-holder:last-child:not(:first-child),
.question-grid-based.label-position-top
  .input-holder:last-child:not(:first-child) {
  float: right;
}

.question-grid-based.label-position-left .label-holder,
.question-grid-based.label-position-left .input-holder {
  float: left;
}

.question-grid-based.label-position-right .label-holder,
.question-grid-based.label-position-right .input-holder,
.question-grid-based.label-position-right.span-2-col .label-holder,
.question-grid-based.label-position-right.span-2-col .input-holder,
.question-grid-based.label-position-right.span-3-col .label-holder,
.question-grid-based.label-position-right.span-3-col .input-holder {
  float: right;
}

.question-grid-based.label-position-right .label-holder {
  padding-left: 0;
}

.question-grid-based.label-position-right .input-holder {
  padding-right: 0;
}

.question-grid-based.label-position-right.single-switch:after {
  content: "";
  display: table;
  clear: both;
  float: none;
}

.question-grid-based.label-position-right.single-switch .input-holder {
  margin-right: -7.5em;
  width: 7em;
}

.question-grid-based.label-position-right.single-switch
  .input-holder
  .input-space,
.question-grid-based.label-position-right.single-switch
  .input-holder
  .switch-input-space {
  padding-right: 0;
}

.question-grid-based.label-position-right.single-switch .label-holder {
  padding-left: 6em;
  width: 100%;
}

.question-grid-based.label-position-right.single-switch.tiny-switches
  .label-holder {
  margin-top: 0.3rem;
  padding-left: 4rem;
}

.question-grid-based.label-position-right.single-switch.small-switches
  .label-holder {
  margin-top: 0.4rem;
  padding-left: 5rem;
}

.question-grid-based.label-position-right.single-switch.large-switches
  .label-holder {
  margin-top: 0.75rem;
  padding-left: 6.5rem;
}

.question-grid-based.indent-1 .input-holder:before,
.question-grid-based.indent-2 .input-holder:before,
.question-grid-based.indent-3 .input-holder:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.question-grid-based.indent-1 .input-holder,
.question-grid-based.indent-2 .input-holder,
.question-grid-based.indent-3 .input-holder {
  position: relative;
}

.question-grid-based.indent-1 .input-holder:before,
.question-grid-based.indent-2 .input-holder:before,
.question-grid-based.indent-3 .input-holder:before {
  color: #cccccc;
  content: "\f178";
  letter-spacing: 0.25em;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.75em 0;
}

.question-grid-based.indent-1 .input-holder {
  padding-left: 1.5rem;
}

.question-grid-based.indent-2 .input-holder {
  padding-left: 2.5rem;
}

.question-grid-based.indent-3 .input-holder {
  padding-left: 3.5rem;
}

.question-grid-based.indent-2 .input-holder:before {
  content: "\f178\f054";
}

.question-grid-based.indent-3 .input-holder:before {
  content: "\f178\f178\f054";
}

.seq {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
  color: #198dae;
  vertical-align: top;
  display: inline-block;
  margin-top: -0.75em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .seq {
    line-height: 1.96em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .seq {
    line-height: 1.85111em;
  }
}

.seq:hover {
  color: #266071;
  text-decoration: underline;
}

.question-group.fluid-align {
  display: table !important;
  width: 100%;
}

.question-group.fluid-align .question-grid-based {
  display: table-row !important;
}

.question-group.fluid-align .question-grid-based .label-holder,
.question-group.fluid-align .question-grid-based .input-holder {
  display: table-cell !important;
  vertical-align: top;
  float: none !important;
}

.question-group.fluid-align .question-grid-based .label-holder {
  padding-top: 0.89rem;
  padding-right: 0;
}

.question-group.fluid-align .question-grid-based .input-holder {
  min-width: 20%;
}

.group-1up .input-space .group-2up .input-space,
.group-1up .switch-input-space .group-2up .input-space,
.group-1up .input-space .group-2up .switch-input-space,
.group-1up .switch-input-space .group-2up .switch-input-space,
.group-3up .input-space,
.group-3up .switch-input-space {
  width: 100%;
  float: left;
}

.group-1up .input-space .group-2up .input-space:last-child:not(:first-child),
.group-1up
  .switch-input-space
  .group-2up
  .input-space:last-child:not(:first-child),
.group-1up
  .input-space
  .group-2up
  .switch-input-space:last-child:not(:first-child),
.group-1up
  .switch-input-space
  .group-2up
  .switch-input-space:last-child:not(:first-child),
.group-3up .input-space:last-child:not(:first-child),
.group-3up .switch-input-space:last-child:not(:first-child) {
  float: right;
}

@media only screen and (min-width: 767px) {
  .group-2up .input-space,
  .group-2up .switch-input-space,
  .group-3up .input-space,
  .group-3up .switch-input-space {
    width: 50%;
    float: left;
  }
  .group-2up .input-space:last-child:not(:first-child),
  .group-2up .switch-input-space:last-child:not(:first-child),
  .group-3up .input-space:last-child:not(:first-child),
  .group-3up .switch-input-space:last-child:not(:first-child) {
    float: right;
  }
}

@media only screen and (min-width: 1024px) {
  .group-3up .input-space,
  .group-3up .switch-input-space {
    width: 33.33333%;
    float: left;
  }
  .group-3up .input-space:last-child:not(:first-child),
  .group-3up .switch-input-space:last-child:not(:first-child) {
    float: right;
  }
}

.file-upload-holder {
  height: 37px;
}

.file-upload {
  position: relative;
  overflow: hidden;
  margin: 0 10px;
}

.file-upload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

/**
* Questions - File Upload:
* `.file-upload` - File uploads are a modified from the standard input-spacer to allow for correct labels to show up when the file is attached. 
* 
*   @example
*   <div class="button file-upload">
*   	<i class="fa fa-upload"></i>
*   	<span class="text">Upload</span>
*   	<input type="file" class="upload" data-bind="file: { data: document, name: documentname, allowed: allowedTypes }">
*   </div>
**/

.radio,
.radio-content {
  vertical-align: middle;
}

.radio-group-holder {
  margin-bottom: 0.75rem;
}

.radio-group {
  border: #cccccc 1px solid;
  padding: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 3rem;
  clear: none;
}

.warning .radio-group {
  border-color: #de404e;
}

.error .radio-group {
  border-color: #de404e;
}

.radio-group .radio {
  width: 5rem;
  padding: 0 0.75rem;
  text-align: center;
  min-height: 3rem;
  background-color: #e6e6e6;
  border-radius: 10px;
  display: table-cell;
  width: 3rem;
}

.radio-group .radio input[type="radio"] {
  margin: 0 auto;
  text-align: center;
  min-height: 3rem;
  height: 3rem;
  vertical-align: middle;
  position: relative;
}

.radio-group .radio-content {
  padding-left: 0.5rem;
  min-height: 3rem;
  display: table-cell;
}

.radio-group .radio-content > * {
  margin-bottom: 0;
}

.radio-group:hover {
  background-color: #e6e6e6;
}

.radio-group:hover .radio {
  background-color: #cccccc;
}

/**
* Radio Button with Grouped Content:
* `.radio-group` - This is a structural container for radio buttons that have an extended amount of content that goes with the radio button.
* 
*   @example
*	<div class="question">
*	<div class="label-holder">
*		<label for="">
*			<span class="text">The Title of the Radio Group</span>
*			<span class="required-holder">
*				<i class="fa fa-holder-dynamic"></i>
*			</span>
*		</label>
*	</div>
*	<div class="input-holder radio-group-holder row">
*		<div class="column input-space small-6">
*		  <label for="radio1" class="radio-group">
*		    <span class="radio">
*		      <input id='radio1' name="number" value="#" type="radio">
*		    </span>
*		    <span class="radio-content">
*		      <span class="h4">Title One</span>
*		      <span class="normal">Sub Content</span>
*		    </span>
*		  </label>
*		</div>
*		<div class="column input-space small-6">
*		  <label for="radio2" class="radio-group">
*		    <span class="radio">
*		      <input id='radio2' name="number" value="#" type="radio">
*		    </span>
*		    <span class="radio-content">
*		      <span class="h4">Title Two</span>
*		      <span class="normal">Sub Content</span>
*		    </span>
*		  </label>
*		</div>
*	</div>
*	<div class="message-holder">
*		<small class="error"><i class="fa fa-holder"></i> Error message</small>
*		<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*		<small class="data"><i class="fa fa-holder"></i> Data message</small>
*	</div>
*	<div class="hint">This is some hint text</div>
*	</div>
**/

.repeater {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.repeater::before,
.repeater::after {
  content: " ";
  display: table;
}

.repeater::after {
  clear: both;
}

.repeater .render,
.repeater .question-group,
.repeater .repeater-action {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 40em) {
  .repeater .render,
  .repeater .question-group,
  .repeater .repeater-action {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.repeater .render:last-child:not(:first-child),
.repeater .question-group:last-child:not(:first-child),
.repeater .repeater-action:last-child:not(:first-child) {
  float: right;
}

.repeater.required > .label-holder .required-holder {
  color: #e08514;
}

.repeater.required > .label-holder .required-holder i.fa-holder-dynamic:before,
.repeater.required > .label-holder .required-holder.dynamic i.fa-holder:before {
  content: "";
}

.repeater .edit,
.repeater .clear,
.repeater .delete,
.repeater .add,
.repeater .set,
.repeater .save {
  font-size: 0.8rem;
  line-height: 1rem;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
  height: 1.8rem;
}

.repeater .edit .text,
.repeater .clear .text,
.repeater .delete .text,
.repeater .add .text,
.repeater .set .text,
.repeater .save .text {
  text-transform: capitalize;
}

.repeater .edit .fa + .text,
.repeater .clear .fa + .text,
.repeater .delete .fa + .text,
.repeater .add .fa + .text,
.repeater .set .fa + .text,
.repeater .save .fa + .text {
  padding-left: 0.25rem;
}

.repeater .edit,
.repeater .clear,
.repeater .delete,
.repeater .set,
.repeater .save {
  color: #4d4d4d;
}

.repeater .edit:hover,
.repeater .clear:hover,
.repeater .delete:hover,
.repeater .set:hover,
.repeater .save:hover {
  color: black;
}

.repeater .edit:hover .text,
.repeater .clear:hover .text,
.repeater .delete:hover .text,
.repeater .set:hover .text,
.repeater .save:hover .text {
  text-decoration: underline;
}

.repeater .render,
.repeater .question-group {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

.repeater .render {
  position: relative;
  display: block;
  border-top: 1px dotted #e6e6e6;
  border-bottom: 1px dotted #e6e6e6;
}

.repeater .render a.button,
.repeater .render button {
  margin-bottom: 0;
}

.repeater .render + .render {
  border-top: 0px none;
}

.repeater .render .render-holder {
  margin: 0 17rem 0 0;
  padding: 0.5rem 0;
}

.repeater .render .comma-after:after {
  content: ",";
  padding-left: 0.25em;
  display: inline;
}

.repeater .render .render-actions {
  position: absolute;
  display: inline-block;
  height: 2rem;
  top: 0;
  right: 0;
  padding: 0.5rem 0;
}

@media only screen and (max-width: 1024px) {
  .repeater .render .render-actions .text {
    display: none;
  }
}

.repeater .render .starred {
  color: #14b057;
}

.repeater .render .break {
  border-left: 2px solid #b3b3b3;
  padding-left: 0.5rem;
  margin-left: 0.25rem;
}

.repeater .render .error {
  color: #c32231;
}

.repeater .render .warning {
  color: #c32231;
}

@media only screen and (max-width: 767px) {
  .repeater .render .edit,
  .repeater .render .delete,
  .repeater .render .set {
    display: inline-block;
    float: left;
  }
  .repeater .render .render-holder {
    margin-right: 5rem;
    font-size: 0.9rem;
  }
}

.repeater .render {
  max-height: 1000px;
  -webkit-transition: max-height 0.8s;
  -moz-transition: max-height 0.8s;
  transition: max-height 0.8s;
  overflow: hidden;
}

.repeater .edit-mode--show {
  display: none;
}

.repeater.edit-mode .render {
  max-height: 0;
}

.repeater.edit-mode .edit-mode--show {
  display: inline;
  display: initial;
}

.repeater.edit-mode .edit-mode--hide {
  display: none;
}

.repeater .question-group {
  padding-top: 1.5em;
  padding-bottom: 1.85em;
  border: 2px dotted #d5e6eb;
  margin-top: 0.5em;
  border-radius: 0.5em;
  border-top: 2px soliddesaturate(#25b6e0, 40%);
  border-bottom: 2px solid #579bae;
  background-image: url(../img/empty_stripe@2x.png);
  background-color: #e6f0f3;
  position: relative;
}

.repeater .question-group .answer.required .required-holder,
.repeater .question-group .question.required .required-holder {
  color: #198dae;
}

.repeater .question-group .required-message {
  font-size: 0.6875rem;
  padding: 0.25em 0.5em;
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #579bae;
  color: #fff;
  -webkit-transition: background-color 0.8s;
  -moz-transition: background-color 0.8s;
  transition: background-color 0.8s;
}

.repeater.edit-mode .question-group {
  border: 2px dotted #ebdadc;
  margin-top: 0.5em;
  border-radius: 0.5em;
  border-top: 2px soliddesaturate(#de404e, 40%);
  border-bottom: 2px solid #b16d73;
  background-image: url(../img/empty_stripe@2x.png);
  background-color: #fcf0e2;
}

.repeater.edit-mode .question-group .required-message {
  background-color: #999999;
}

.repeater .repeater-action {
  position: relative;
  display: block;
  width: 100%;
  height: 2rem;
  margin-top: -2rem;
}

.repeater .repeater-action .add-new-repeater {
  display: inline-block;
  position: relative;
  text-align: right;
  float: right;
  margin-top: -1em;
  padding: 0.5rem;
}

.repeater .repeater-action .add-new-repeater .text {
  color: #198dae;
  display: inline-block;
  padding-right: 2rem;
  font-size: 1rem;
}

.repeater .repeater-action .save,
.repeater .repeater-action .clear {
  font-size: 1rem;
  padding: 0.35rem 0.75rem 0.45rem;
  border-radius: 4px;
  height: auto;
  border: 2px solid #198dae;
  font-weight: 900;
}

.repeater .repeater-action .save {
  display: inline-block;
  position: relative;
  text-align: right;
  float: right;
  background-color: #198dae;
  color: white;
  text-decoration: none;
  margin-right: 1em;
  padding: 0.5rem 1.75rem 0.65rem;
  font-size: 1.25rem;
}

.repeater .repeater-action .save:hover {
  background-color: #14b057;
  text-decoration: none;
}

.repeater .repeater-action .clear {
  float: left;
  background-color: white;
  border-radius: 4px;
  margin-left: 1em;
  border-color: #25b6e0;
}

.repeater .repeater-action .clear:hover {
  background-color: #e6e6e6;
  border-color: #198dae;
}

.edit-mode.repeater .repeater-action .clear {
  background-color: #666666;
  border-color: #4d4d4d;
  color: #fff;
}

.edit-mode.repeater .repeater-action .clear:hover {
  background-color: #404040;
  border-color: #333333;
  color: #fff;
}

.question-group .render .message-holder .warning,
.question-group .render .message-holder .error {
  display: none;
}

.question-group .render .message-holder .warningsmall,
.question-group .render .message-holder .warningspan,
.question-group .render .message-holder .errorsmall,
.question-group .render .message-holder .errorspan {
  margin-bottom: 0.65rem;
}

.question-group .render.warning .message-holder .warning {
  display: block;
}

.question-group .render.error .message-holder .error {
  display: block;
}

/**
* Form Repeater:
* `.repeater` - This is form elements repeater. This Module is broken into 3 major containers. The `renders` are any previously saved collection of inputs.The `question-group` holds all of the questions that need to be repeated. And the `.repeater-actions` is the buttons to save|submit and cancel the current session of inputs. 
*  The repeater has a focused mode when editing adding  `.repeater.edit-mode` to the containter will hide the renders at the top and toggle any elements that have been tagged with `.edit-mode--hide` and `.edit-mode--show`.
* 
*   @example
*	<div class="repeater required">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Multi Input Form</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="render">
*		<div class="render-actions">
*			<a href="" class="edit"><i class="fa fa-holder"></i><span class="text">edit</span></a>
*			<a href="" class="delete"><i class="fa fa-holder"></i><span class="text">delete</span></a>
*		</div>
*		<ul class="render-holder">
*			<li class="italic starred"><i class="fa fa-holder"></i> </li>
*			<li class="bold break">Jeff Morris</li>
*			<li>jmorris@acc.org</li>
*			<li class="validated"><i class="fa fa-holder"></i></li>
*		</ul>
*		<div class="message-holder">
*			<small class="warning">
*				<i class="fa fa-holder-dynamic"></i>
*				This is a dynamic render message.
*			</small>
*		</div>
*	</div>
*		<div class="question-group">
*			<div class="required-message">All inputs marked with the * are required to submit and save</div>
*			<h4 class="edit-mode--show warning">Edit Record</h4><h4 class="edit-mode--hide highlighted">Add Record</h4>
*			<div class="row">
*	<div class="question required column small-4">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3">
*				<small class="value">Years</small>
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*	<div class="question required column small-4">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3">
*				<small class="value">Years</small>
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*	<div class="question required column small-4">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Question (Required)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="input-holder">
*			 <div class="input-space column small-6 large-9">
*				<input type="text"/>
*			</div>
*			<div class="column small-6 large-3">
*				<small class="value">Years</small>
*			</div>
*		</div>
*		<div class="message-holder">
*				<small class="error"><i class="fa fa-holder"></i> Error message</small>
*				<small class="warning"><i class="fa fa-holder"></i> Warning message</small>
*				<small class="data"><i class="fa fa-holder"></i> Data message</small>
*		</div>
*		<div class="hint">This is some hint text</div>
*	</div>
*			</div>
*			<div class="message-holder">
*				<small class="warning"><i class="fa fa-holder"></i>
*					This is a dynmic message for the question group.
*				</small>
*			</div>
*		</div>
*		<div class="repeater-action">
*			<a href="" class="clear"><i class="fa fa-holder"></i><span class="text">clear</span></a>
*			<a href="" class="save"><i class="fa fa-holder"></i> <span class="text">save</span></a>
*		</div>
*	</div>
*	<div class="repeater required edit-mode">
*		<div class="label-holder">
*			<label for="">
*				<span class="text">Multi Input Form (Edit)</span>
*				<span class="required-holder">
*					<i class="fa fa-holder-dynamic"></i>
*				</span>
*			</label>
*		</div>
*		<div class="render">
*		<div class="render-actions">
*			<a href="" class="edit"><i class="fa fa-holder"></i><span class="text">edit</span></a>
*			<a href="" class="delete"><i class="fa fa-holder"></i><span class="text">delete</span></a>
*		</div>
*		<ul class="render-holder">
*			<li class="italic starred"><i class="fa fa-holder"></i> </li>
*			<li class="bold break">Jeff Morris</li>
*			<li>jmorris@acc.org</li>
*			<li class="validated"><i class="fa fa-holder"></i></li>
*		</ul>
*		<div class="message-holder">
*			<small class="warning">
*				<i class="fa fa-holder-dynamic"></i>
*				This is a dynamic render message.
*			</small>
*		</div>
*	</div>
*		<div class="question-group">
*			<div class="required-message">All inputs marked with the * are required to submit and save</div>
*			<h4 class="edit-mode--show warning">Edit Record</h4><h4 class="edit-mode--hide highlighted">Add Record</h4>
*			<div class="row">
*	<div class="question required column small-4 outline">
*		<span class="notation">Question Block</span>
*	</div>
*	<div class="question required column small-5 outline">
*		<span class="notation">Question Block</span>
*	</div>
*	<div class="question required column small-3 outline">
*		<span class="notation">Question Block</span>
*	</div>
*			</div>
*			<div class="message-holder">
*				<small class="warning"><i class="fa fa-holder"></i>
*					This is a dynmic message for the question group.
*				</small>
*			</div>
*		</div>
*		<div class="repeater-action">
*			<a href="" class="clear"><i class="fa fa-holder"></i><span class="text">clear</span></a>
*			<a href="" class="save"><i class="fa fa-holder"></i> <span class="text">save</span></a>
*		</div>
*	</div>		
*/

/**
*  Tables:
*  `table` - plan tables are clean with barely any styles.
* 
*   @example
*	<table class="table">
*		<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>this is small text</small></td>
*				<td>table row 1 table cell B<br><small class="color-highlighted">this is small text with blue</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>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
 */

table a.button,
table button,
table .inline-list,
table .nobutton {
  margin: 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.table tr + tr td,
.table tr + tr th {
  border-top: #e6e6e6 1px solid;
}

.table thead tr:last-child th {
  border-bottom: 2px solid #198dae;
}

.table tbody tr:nth-child(even) {
  background-color: transparent;
}

.table td,
.table th {
  text-align: left;
  padding: 0.25rem;
}

.table td .color-highlighted,
.table th .color-highlighted {
  color: #198dae;
}

.table td small,
.table th small {
  font-size: 80%;
  color: #707070;
}

.table th {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  border: 0;
  vertical-align: bottom;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .table th {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .table th {
    line-height: 1.19em;
  }
}

.table th.h1,
.table thh2,
.table thh3,
.table thh4 {
  margin-top: 0;
  clear: both;
  margin-bottom: -0.15em;
}

.table th .with-underline {
  border-bottom: 1px dotted #e6e6e6;
}

.table td {
  vertical-align: middle;
}

.table button,
.table .button,
.table input {
  margin: 0 !important;
}

.table tfoot tr td {
  border: 0;
  border-top: 1px solid #b3b3b3;
  font-size: 0.9rem;
}

.banded tbody tr:nth-child(even),
.striped tbody tr:nth-child(even) {
  background-color: #e6e6e6;
}

.striped th:nth-child(odd),
.striped td:nth-child(odd) {
  background-color: #e4f6fb;
}

.striped.desaturate th:nth-child(odd),
.striped.desaturate td:nth-child(odd) {
  background-color: #f2f2f2;
}

.striped tbody tr:nth-child(even) td:nth-child(odd) {
  background-color: #deeaed;
}

.striped.desaturate tbody tr:nth-child(even) td:nth-child(odd) {
  background-color: #dedede;
}

.striped tbody tr + tr td,
.banded tbody tr + tr td {
  border-top: 0px solid;
}

.striped th,
.striped td,
.banded th,
.banded td {
  padding: 0.25rem 0.25rem 0.25rem 0.55rem;
}

.striped tfoot td,
.striped tfoot td:nth-child(odd),
.banded tfoot td,
.banded tfoot td:nth-child(odd) {
  color: #333333;
  border-top: 1px solid #198dae;
  background-color: #cccccc;
}

/**
* Tables (Banded):
* `.banded` - There are two high styled tables `.banded` or `.striped`.
* 
*   @example
*	<table class="table banded">
*		<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>
*/

/**
* Tables (Striped):
* ` .striped` - Table with the class`.striped`.
* 
*   @example
*	<table class="table striped">
*		<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 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/

/**
* Tables (Striped Desaturate):
* ` .striped.desaturate` - Table with the class`.striped.desaturate` will produce a table that is cross colored with only greys.
* 
*   @example
*	<table class="table striped desaturate">
*		<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 2  cell A</td>
*				<td> row 2  cell B</td>
*				<td> row 2  cell C</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/

.table .seperator td,
.table .seperator:nth-child(even) td:nth-child(odd) {
  padding-top: 2.2px;
  padding-top: 0.1375rem;
  padding-bottom: 2.2px;
  padding-bottom: 0.1375rem;
  /* can be treated like a fallback */
  background-color: #1faed7;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #2fbae1, #1c9dc1);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #1faed7;
  background: linear-gradient(to left, #2fbae1, #1c9dc1);
  border-top: #1c9dc1 1px solid;
  border-bottom: #1c9dc1 2px solid;
  color: #fff;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.75rem;
}

/**
* Tables Row(Seperator):
* ` .seperator` - Table with the class`.stripped`.
* 
*   @example
*	<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="seperator">
*				<td colspan='3'> Separator</td>
*			</tr>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/

.table .error.seperator td,
.table .error.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #dc3443;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #df4856, #d02434);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #dc3443;
  background: linear-gradient(to left, #df4856, #d02434);
  border-top: #d02434 1px solid;
  border-bottom: #d02434 2px solid;
  color: #fff;
}

.table .warning.seperator td,
.table .warning.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #ec982f;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #eea244, #ea8b15);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #ec982f;
  background: linear-gradient(to left, #eea244, #ea8b15);
  border-top: #ea8b15 1px solid;
  border-bottom: #ea8b15 2px solid;
  color: #333333;
}

.table .success.seperator td,
.table .success.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #19da6c;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #27e679, #16c461);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #19da6c;
  background: linear-gradient(to left, #27e679, #16c461);
  border-top: #16c461 1px solid;
  border-bottom: #16c461 2px solid;
  color: #fff;
}

.table .info.seperator td,
.table .info.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #b3b3b3;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #bbbbbb, #a1a1a1);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #b3b3b3;
  background: linear-gradient(to left, #bbbbbb, #a1a1a1);
  border-top: #a1a1a1 1px solid;
  border-bottom: #a1a1a1 2px solid;
  color: #333333;
}

.table .highlighted.seperator td,
.table .highlighted.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #1faed7;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #2fbae1, #1c9dc1);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #1faed7;
  background: linear-gradient(to left, #2fbae1, #1c9dc1);
  border-top: #1c9dc1 1px solid;
  border-bottom: #1c9dc1 2px solid;
  color: #fff;
}

.table .disabled.seperator td,
.table .disabled.seperator:nth-child(even) td:nth-child(odd) {
  background-color: #d4d4d4;
  /* will be "on top", if browser supports it */
  background-image: linear-gradient(to left, #d8d8d8, #bebebe);
  /* these will reset other properties, like background-position, but it does know what you mean */
  background: #d4d4d4;
  background: linear-gradient(to left, #d8d8d8, #bebebe);
  border-top: #bebebe 1px solid;
  border-bottom: #bebebe 2px solid;
  color: #333333;
}

/**
* Tables Row(Seperator + State):
* ` .seperator.error` - An Error State on a table sep.
* 
*   @example
*	<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="seperator info">
*				<td colspan='3'> 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="seperator success">
*				<td colspan='3'> 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="seperator error">
*				<td colspan='3'> Separator With Error</td>
*			</tr>
*			<tr>
*				<td> row 1  cell A</td>
*				<td> row 1  cell B</td>
*				<td> row 1  cell C</td>
*			</tr>
*			<tr class="seperator warning">
*				<td colspan='3'> 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="seperator disabled">
*				<td colspan='3'> 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>
*/

/**
* Tables (Sortable):
* `.banded or .stripped` - tables witha soratable table header. 
*  Just add the class of the column to the table `.col1` and the sort direction `.sort-asc` or `.sort-desc`.
* 
*   @example
*	<table class="table stripped  sort-asc col1">
*		<thead class="sortableheader">
*			<tr>
*				<th class="col1 sortable">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttoggle">
*                        	<a class="fa fa-sort"></a>
*                        	</span>
*                        	<a class="text">Table Header </a>
*                        </div>
*                 </th>
*				<th class="col2 sortable selected asc">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttoggle">
*                        	<a class="fa fa-sort"></a>
*                        	</span>
*                        	<a  class="text">Toggle Sorter </a>
*                        </div>
*                 </th>
*				<th class="col3 sortable selected asc">
*                        <div class="relative firefoxfix">
*                        	<span class="sort sorttwoways">
*                        	<a class="fa fa-sort selected"></a><a class="fa fa-sort"></a>
*                        	</span>
*                        	<a  class="text">Long Table<br>Header </a>
*                        </div>
*                 </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>
*		</tbody>
*		<tfoot>
*			<tr>
*				<td colspan="3">footer cell</td>
*			</tr>
*		</tfoot>
*	</table>
*/

.table thead tr:last-child th.sortable {
  border-bottom: none 0;
}

.table thead th.sortable {
  vertical-align: top;
}

.sortableheader {
  background-color: gray;
}

th.sortable {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 0px none transparent;
  background-color: gray !important;
}

th.sortable:hover {
  background-color: #737373 !important;
}

th.sortable select {
  font-size: 0.92857rem;
  margin: 0 0 0 0.5em;
  padding-left: 2em;
  border: 0 none transparent;
  background-color: #737373;
  height: 100%;
  top: 0;
  bottom: 0;
  position: absolute;
  left: auto;
  width: 100%;
  font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", Helvetica,
    Arial, sans-serif;
  font-weight: 700;
  color: #fff;
  right: 0;
  vertical-align: top;
  padding-top: 0;
}

th.sortable select:hover {
  background-color: #4d4d4d;
}

th.sortable .sort {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: inline-block;
  background-color: #666666;
  padding: 0 3px;
  vertical-align: middle;
}

th.sortable .sort .fa-sort {
  color: #cccccc;
  top: 0.5rem;
  position: relative;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  text-align: center;
}

th.sortable .sort .fa-sort:before {
  content: "\f0dc";
}

th.sortable .sort .fa-sort.selected {
  color: #e08514;
}

th.sortable .sort.sorttwoways .fa-sort {
  position: relative;
}

th.sortable .sort.sorttwoways .fa-sort:before {
  content: "\f0de";
}

th.sortable .sort.sorttwoways .fa-sort + .fa-sort:before {
  content: "\f0dd";
}

th.sortable .sort.sorttwoways .fa-sort + .fa-sort {
  position: absolute;
  top: auto;
  bottom: 0.5rem;
}

th.sortable.selected .sort {
  background-color: #4d4d4d;
}

th.sortable.selected .sorttoggle .fa-sort {
  color: #e08514;
}

th.sortable.selected.asc .sorttoggle .fa-sort:before {
  content: "\f0de";
}

th.sortable.selected.desc .sorttoggle .fa-sort:before {
  content: "\f0dd";
}

th.sortable .text {
  color: white;
  padding: 0.25rem 0.5rem 0rem 1.25rem;
  white-space: normal;
  display: block;
  line-height: 1.25;
  min-height: 3em;
}

@media only screen and (min-width: 1024px) {
  th.sortable .text {
    padding: 0.5rem 0.625rem 0.25rem 2rem;
  }
}

th.sortable:hover.text {
  color: #e6e6e6;
}

th.sortable .has-tip {
  border: none 0;
}

.firefoxfix {
  position: initial;
  height: 100%;
}

td.icon {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  text-align: center;
  vertical-align: middle;
  width: 1%;
}

td.icon i {
  margin: 0 auto;
}

tr.error td,
tr.warning td,
tr.success td,
tr.info td,
tr.highlighted td,
tr.disabled td {
  background-image: url(../img/empty_stripe@2x.png);
  font-weight: 900;
}

.stripped tr.error td:nth-child(odd),
.stripped tr.warning td:nth-child(odd),
.stripped tr.success td:nth-child(odd),
.stripped tr.info td:nth-child(odd),
.stripped tr.highlighted td:nth-child(odd),
.stripped tr.disabled td:nth-child(odd) {
  background-image: url(../img/empty_stripe-alt@2x.png);
  font-weight: 900;
}

td.error,
.table tbody tr + tr td.error,
td.warning,
.table tbody tr + tr td.warning,
td.success,
.table tbody tr + tr td.success,
td.info,
.table tbody tr + tr td.info,
td.highlighted,
.table tbody tr + tr td.highlighted,
td.disabled,
.table tbody tr + tr td.disabled {
  background-image: url(../img/empty_diamond@2x.png) !important;
  font-weight: 900;
}

td.error,
td.warning,
td.success,
td.info,
td.highlighted,
td.disabled {
  border: 1px solid;
}

tr.error td,
tr.warning td,
tr.success td,
tr.info td,
tr.highlighted td,
tr.disabled td {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

td.error,
.table tbody tr + tr td.error,
tr.error td,
.stripped tr.error:nth-child(even) td:nth-child(odd) {
  background-color: #f5d9dc;
  color: #333333;
  border-color: #f2b7bd;
}

tr:nth-child(even) td.error {
  background-color: #f2ced2;
  color: #333333;
}

tr:nth-child(even).error td {
  background-color: #f2ced2;
  color: #333333;
}

.stripped tbody tr.error td:nth-child(odd) {
  background-color: #f5d9dc;
}

td.warning,
.table tbody tr + tr td.warning,
tr.warning td,
.stripped tr.warning:nth-child(even) td:nth-child(odd) {
  background-color: #faead7;
  color: #333333;
  border-color: #f8dbb6;
}

tr:nth-child(even) td.warning {
  background-color: #f8e4cb;
  color: #333333;
}

tr:nth-child(even).warning td {
  background-color: #f8e4cb;
  color: #333333;
}

.stripped tbody tr.warning td:nth-child(odd) {
  background-color: #faead7;
}

td.success,
.table tbody tr + tr td.success,
tr.success td,
.stripped tr.success:nth-child(even) td:nth-child(odd) {
  background-color: #d7f2e2;
  color: #333333;
  border-color: #aaf5cb;
}

tr:nth-child(even) td.success {
  background-color: #cbeeda;
  color: #333333;
}

tr:nth-child(even).success td {
  background-color: #cbeeda;
  color: #333333;
}

.stripped tbody tr.success td:nth-child(odd) {
  background-color: #d7f2e2;
}

td.info,
.table tbody tr + tr td.info,
tr.info td,
.stripped tr.info:nth-child(even) td:nth-child(odd) {
  background-color: #f0f0f0;
  color: #333333;
  border-color: #e4e4e4;
}

tr:nth-child(even) td.info {
  background-color: #ebebeb;
  color: #333333;
}

tr:nth-child(even).info td {
  background-color: #ebebeb;
  color: #333333;
}

.stripped tbody tr.info td:nth-child(odd) {
  background-color: #f0f0f0;
}

td.highlighted,
.table tbody tr + tr td.highlighted,
tr.highlighted td,
.stripped tr.highlighted:nth-child(even) td:nth-child(odd) {
  background-color: #d8ecf1;
  color: #333333;
  border-color: #ade4f3;
}

tr:nth-child(even) td.highlighted {
  background-color: #cce6ed;
  color: #333333;
}

tr:nth-child(even).highlighted td {
  background-color: #cce6ed;
  color: #333333;
}

.stripped tbody tr.highlighted td:nth-child(odd) {
  background-color: #d8ecf1;
}

td.disabled,
.table tbody tr + tr td.disabled,
tr.disabled td,
.stripped tr.disabled:nth-child(even) td:nth-child(odd) {
  background-color: #f6f6f6;
  color: #333333;
  border-color: #f0f0f0;
}

tr:nth-child(even) td.disabled {
  background-color: #f4f4f4;
  color: #333333;
}

tr:nth-child(even).disabled td {
  background-color: #f4f4f4;
  color: #333333;
}

.stripped tbody tr.disabled td:nth-child(odd) {
  background-color: #f6f6f6;
}

/**
* Table States Cells:
* `td.state-name` - quickly color table cells. 
* 
*   @example
*	<table class="table">
*		<tr>
*			<td class="error icon"><i class="fa fa-holder"></i></td>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="">Text</td>
*			<td class="warning"><i class="fa fa-holder"></i>Warning</td>
*		</tr>
*		<tr>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="info icon"><i class="fa fa-holder"></i></td>
*			<td class="">Text</td>
*			<td class="info"><i class="fa fa-holder"></i>&nbsp;Info</td>
*		</tr>
*		<tr>
*			<td class=""><i class="fa fa-holder"></i></td>
*			<td class="warning icon"><i class="fa fa-holder"></i></td>
*			<td class="error">Error</td>
*			<td class=""><i class="fa fa-holder"></i>&nbsp;Text</td>
*		</tr>
*		<tr>
*			<td class="success icon"><i class="fa fa-holder"></i></td>
*			<td class="info icon"><i class="fa fa-holder"></i></td>
*			<td class="success">Success</td>
*			<td class=""><i class="fa fa-holder"></i>&nbsp;text</td>
*		</tr>
*	</table>
*/

/**
* Table States - Rows:
* `tr.state` - quickly color table rows with the states. 
* 
*   @example
*	<table class="table stripped">
*		<tr class="success">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class=""></td>
*			<td class="">Cell Data in success Row</td>
*			<td class="">Icon is Dynamic</td>
*		</tr>
*		<tr class="warning">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class=""></td>
*			<td class="">Cell Data in Warning Row</td>
*			<td class="error">I am an error cell</td>
*		</tr>
*		<tr class="error">
*			<td class="icon"><i class="fa fa-holder-dynamic"></i></td>
*			<td class="">Icon is Dynamic</td>
*			<td class="">Cell Data in Error Row</td>
*			<td class="">Cell Data</td>
*		</tr>
*	</table>
*/

.bar {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
}

.bar .action-btn {
  text-transform: lowercase;
  padding: 0.2rem 0.4rem 0.2rem 0.5rem;
  font-size: 1rem;
  right: 0;
  position: absolute;
  display: inline-block;
}

.bar.close {
  top: -2px;
}

.bar.close .action-btn {
  top: -1.1rem;
  color: #198dae;
}

.bar.jumpToTop {
  bottom: -2px;
}

.bar.jumpToTop .action-btn {
  bottom: -1rem;
  color: #666666;
}

.collapsable-panel {
  position: relative;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  margin-bottom: 1rem;
  display: none;
}

.collapsable-panel::before,
.collapsable-panel::after {
  content: " ";
  display: table;
}

.collapsable-panel::after {
  clear: both;
}

.collapsable-panel .bar.close {
  border-top: 2px solid #198dae;
}

.collapsable-panel .bar.close .action-btn {
  background-color: white;
}

.collapsable-panel .bar.jumpToTop {
  border-bottom: 2px solid #666666;
}

.collapsable-panel .bar.jumpToTop .action-btn {
  background-color: white;
}

.collapsable-panel .content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 2rem 1rem;
  z-index: 0;
}

@media screen and (min-width: 40em) {
  .collapsable-panel .content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.collapsable-panel .content:last-child:not(:first-child) {
  float: right;
}

.collapsable-panel.inset {
  background-color: white;
  background: url("../img/billie-holiday.png") repeat top right;
  border: 0 none;
}

.collapsable-panel.inset .content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding: 3.5rem 1.5rem;
  z-index: 0;
}

@media screen and (min-width: 40em) {
  .collapsable-panel.inset .content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.collapsable-panel.inset .content:last-child:not(:first-child) {
  float: right;
}

.collapsable-panel.inset .bar.close {
  border-top: 7px solid #198dae;
  top: -2px;
}

.collapsable-panel.inset .bar.close .action-btn {
  top: 0;
  color: white;
  background-color: #198dae;
}

.collapsable-panel.inset .bar.jumpToTop {
  bottom: -2px;
  border-bottom: 7px solid #9a9a9a;
}

.collapsable-panel.inset .bar.jumpToTop .action-btn {
  bottom: 0;
  color: white;
  background-color: #9a9a9a;
}

h1 + div > .collapsable-panel {
  margin-bottom: 1.5rem;
  margin-top: -1.5rem;
}

table + div > .collapsable-panel {
  margin-top: -1rem;
  margin-bottom: 0.7rem;
}

/**
* Collapsable Panels:
* `.collapsable-panel` - a container element which naturaly is hiden and reveals when it is prompted. This element is great for `read more` links when the content is small.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="row">
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in a collapse panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel inset" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in an inset collapse panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*	</div>
*/

.collapsable-panel.error {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.error.inset {
  background-color: #fbe7e9;
}

.collapsable-panel.error.inset .bar.close .action-btn {
  color: #fff;
}

.collapsable-panel.warning {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.warning.inset {
  background-color: #fdf3e7;
}

.collapsable-panel.warning.inset .bar.close .action-btn {
  color: #fff;
}

.collapsable-panel.success {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.success.inset {
  background-color: #e3fcee;
}

.collapsable-panel.success.inset .bar.close .action-btn {
  color: #fff;
}

.collapsable-panel.info {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.info.inset {
  background-color: #f6f6f6;
}

.collapsable-panel.info.inset .bar.close .action-btn {
  color: #333333;
}

.collapsable-panel.highlighted {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.highlighted.inset {
  background-color: #e4f6fb;
}

.collapsable-panel.highlighted.inset .bar.close .action-btn {
  color: #fff;
}

.collapsable-panel.disabled {
  background-color: transparent;
  border: 0 none transparent;
}

.collapsable-panel.disabled.inset {
  background-color: #fafafa;
}

.collapsable-panel.disabled.inset .bar.close .action-btn {
  color: #333333;
}

/**
* Collapsable Panel (State):
* `.collapsable-panel` - Collapse panels can be used with states and the panels subtly color with the state colors.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="row">
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel warning" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in Panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*		<div class="column small-12 medium-6">
*			<div class="collapsable-panel error inset" style="display: block;">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> <span class="text">close</span></a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<h2>H2 in Inset Panel</h2>
*			              <p>All basic html content can be placed in the panel</p>
*						</div>
*					</div>
*				</div>
*					<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> <span class="text">top</span></a>
*				</div>
*			</div>
*		</div>
*	</div>
*/

.fa-rotate-90 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.accordion {
  border: 0px none transparent;
}

.accordion .collapsable-panel {
  display: block;
}

.accordion .toggle .fa {
  color: #25b6e0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.accordion .toggle .fa.fa-holder:before {
  content: "";
}

.accordion .toggle .text {
  color: #5c5c5c;
  padding-left: 0.5rem;
}

.accordion .toggle:hover .fa {
  color: #198dae;
}

.accordion .toggle:hover .text {
  color: #333333;
}

.accordion .selected > .toggle .fa {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #198dae;
}

/**
* Accordion (requires Collapsable Panel SCSS):
* `.accordion` - Accordions are built from a group of `Collapsable Panels` and are never full hidden like the collapsable panel. By default only one `panel` of the accordian can be open at a time.<br><br> !!  Requires Javascript to Function  !!
* 
*   @example
*	<div class="accordion">
*		<div class="selected">
*			<h2 class="toggle" data-bind="click:panelShow"><i class="fa fa-holder"></i><span class="text">Header and Toggle Area (Open)</span></h2>
*			<div class="collapsable-panel ">
*				<div class="bar close">
*					<a class="action-btn close" data-bind="click:panelHide"><i class="fa fa-holder"></i> close</a>
*				</div>
*				<div class="content">
*					<div class="row">
*						<div class="column small-12">
*							<p>Content</p>
*						</div>
*					</div>
*				</div>
*				<div class="bar jumpToTop">
*					<a class="action-btn top" data-bind="click:panelScrollTop"><i class="fa fa-holder"></i> top</a>
*				</div>
*			</div>
*		</div>
*		<div class="">
*			<h2 class="toggle" data-bind="click:panelShow"><i class="fa fa-holder"></i><span class="text">Header and Toggle Area (Closed)</span></h2>
*		</div>
*	</div>
*/

.panel-selector-holder {
  display: block;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex !important;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-content: strech;
  -moz-align-content: strech;
  -ms-align-content: strech;
  align-content: strech;
  -webkit-align-items: strech;
  -moz-align-items: strech;
  -ms-align-items: strech;
  align-items: strech;
}

.panel-selector {
  max-height: 15em;
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  overflow: auto;
  border: 1px solid #b3b3b3;
  margin-left: -1px;
  -webkit-box-flex: felx-start 1 auto;
  -moz-box-flex: felx-start 1 auto;
  -webkit-flex: felx-start 1 auto;
  -ms-flex: felx-start 1 auto;
  flex: felx-start 1 auto;
}

.panel-selector.active-focus {
  -moz-box-shadow: inset 0 0 10px #198dae;
  -webkit-box-shadow: inset 0 0 10px #198dae;
  box-shadow: inset 0 0 10px #198dae;
}

.panel-selector .paenl-selector-group-title {
  font-size: 18px;
  padding: 0.5em 0.75em;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
  background-color: #198dae;
  color: #fff;
}

.panel-selector ul {
  overflow-x: visible;
}

.panel-selector .group-title li {
  margin: 3px;
  white-space: nowrap;
}

.panel-selector .group-title li + li {
  margin-top: 0;
}

.panel-selector .group-title li.j-focused,
.panel-selector .group-title li.focused {
  background-color: #e6e6e6;
}

.panel-selector .group-title li.j-selected,
.panel-selector .group-title li.selected {
  background-color: #198dae;
}

.panel-selector .group-title li.j-selected > i.fa-holder:before,
.panel-selector .group-title li.j-selected.fa:before,
.panel-selector .group-title li.selected > i.fa-holder:before,
.panel-selector .group-title li.selected.fa:before {
  content: "";
}

.panel-selector .group-title li.j-selected .text,
.panel-selector .group-title li.j-selected .fa,
.panel-selector .group-title li.selected .text,
.panel-selector .group-title li.selected .fa {
  color: #fff;
}

/**
* Button Selectors:
* `.button-group` -  !! Requires Javascript!!
* 
*   @example
*	<div class="row button-group"id="ButtonGroup" >
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*		<a class="button"><i class="fa fa-holder"></i><span class="text">button</span></a>
*	</div>
*	<a class="link" href="http://anovi.github.io/selectonic/">Javascript API Documentaion</a> 
*/

.button-group li a.button {
  background-color: #b3b3b3;
}

.button-group li + li {
  margin-top: 0;
}

.button-group li.j-focused a.button,
.button-group li.focused a.button {
  background-color: #198dae;
}

.button-group li.j-selected a.button,
.button-group li.selected a.button {
  background-color: #198dae;
}

.button-group li.j-selected a.button > i.fa-holder:before,
.button-group li.j-selected a.button.fa:before,
.button-group li.selected a.button > i.fa-holder:before,
.button-group li.selected a.button.fa:before {
  content: "";
}

.button-group li.j-selected a.button .text,
.button-group li.j-selected a.button .fa,
.button-group li.selected a.button .text,
.button-group li.selected a.button .fa {
  color: #fff;
}

/**
* Panel Selector:
* `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements.  !! Requires Javascript!!
* 
*   @example
*	<section id="PanelSelector" class="panel-selector-holder">
*		<div class="panel-selector parent">
*			<ul>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Parent</span></li>
*			</ul>
*		</div>								
*		<div class="panel-selector child">
*			<ul>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*				<li><i class="fa fa-holder"></i><span class="text">List Item Child</span></li>
*			</ul>
*		</div>
*	</section>
*	<a class="link" href="http://anovi.github.io/selectonic/">Javascript API Documentaion</a> 
*/

/**
* Knockout Panel Selector:
* `.panel-selector-holder` - the panel selector is a multi tree level selector allowing a user to select from the left coloum or parent and then select the filtered child elements.  !! Requires Javascript!!
* 
*   @example
*	<section id="Knockout" class="panel-selector-holder row collapse">
*	  <div class="panel-selector">
*	    <ul  data-bind="foreach:$root.repeatedItems">
*	      <li data-bind="css: {selected: selected},toggle:selected">
*	        <i class="fa fa-holder"></i>
*	        <span class="text" data-bind="text:name">List Item Parent</span>
*	      </li>
*	    </ul>
*	  </div><div class="panel-selector">
*	    <ul  data-bind="foreach:$root.repeatedItems2">
*	      <li data-bind="css: {selected: selected},toggle:selected">
*	        <i class="fa fa-holder"></i>
*	        <span class="text" data-bind="text:name">List Item Parent</span>
*	      </li>
*	    </ul></div>
*	 </section>
*/

/**
* Toggle Select:
* `.toggle .miniized` - small multi position toggle.  there is not animation like the switches and are not driven by an imput.
* 
*   @example
*	<ul class="toggle">
*	    <li class="toggle-position "><a href="javascript:void(0)">10</a></li>
*	    <li class="toggle-position selected"><a href="javascript:void(0)">20</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">50</a></li>
*	</ul>
*	<ul id="Toggle" class="toggle minimized">
*	    <li class="toggle-position "><a href="javascript:void(0)">10</a></li>
*	    <li class="toggle-position selected"><a href="javascript:void(0)">20</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">50</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">75</a></li>
*	    <li class="toggle-position "><a href="javascript:void(0)">100</a></li>
*	</ul>
*/

ul.toggle {
  background: #e6e6e6 url("../img/billie-holiday.png") repeat top right;
  border: 2px solid #cccccc;
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0px 2px;
  border-radius: 6px;
  font-size: 1rem;
}

ul.toggle a,
ul.toggle a:link {
  text-decoration: none;
  line-height: 1em;
}

ul.toggle .toggle-position {
  display: inline-block;
  padding: 0.25em 0.375em;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: #e6e6e6;
  opacity: 0.75;
  font-weight: 700;
}

ul.toggle .toggle-position a {
  color: #333333;
}

ul.toggle .toggle-position:hover {
  background-color: #198dae;
  opacity: 1;
}

ul.toggle .toggle-position:hover a {
  color: #fff;
}

ul.toggle .toggle-position a {
  box-sizing: border-box;
  padding: 0.25em 0.5em;
  display: block;
}

ul.toggle .toggle-position.selected {
  opacity: 1;
  border: #1da3c9 0.2em solid;
  background-color: #1da3c9;
  margin: -0.25em 0px;
  border-radius: 5px;
  font-weight: 900;
  padding: 0.45em 0.375em;
}

ul.toggle .toggle-position.selected:hover {
  background-color: #1da3c9;
  border-color: #198dae;
}

ul.toggle .toggle-position.selected a {
  color: #fff;
}

ul.toggle.minimized {
  font-size: 0.75rem;
  border-radius: 1px;
}

ul.toggle.minimized .toggle-position {
  border-radius: 2px;
}

ul.toggle.minimized .selected {
  border-radius: 2px;
  border-width: 2px;
  margin: -3px;
}

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/

/* @group Base */

.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.875rem;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}

.chosen-container .search-choice .group-name:after,
.chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */

/* @group Single Chosen */

.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.57431rem 0 0.57431rem 8px;
  height: 37px;
  border: 1px solid #aaa;
  border-radius: 1px;
  background-color: #fff;
  /*  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
    background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);*/
  background-clip: padding-box;
  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}

.chosen-container-single .chosen-default {
  color: #999;
}

.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}

.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
  position: absolute;
  top: 9px;
  right: 2px;
  display: block;
  width: 18px;
  height: 100%;
}

.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/chosen-sprite.png") no-repeat 0px 2px;
}

.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
  margin: 0;
  padding: 0.57143rem 20px 0.57143rem 0.57143rem;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #b3b3b3;
  background: white url("../img/chosen-sprite.png") no-repeat 100% -20px;
  background: url("../img/chosen-sprite.png") no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}

/* @end */

/* @group Results */

.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 0.57143rem 0.5rem;
  list-style: none;
  line-height: 21px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
    background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
    background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);*/
  color: #fff;
}

.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}

.chosen-container .chosen-results li li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */

/* @group Multi Chosen */

.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: auto !important;
  height: 1%;
  border: 1px solid #aaa;
  background-color: #fff;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
    background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
    background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);*/
  cursor: text;
}

.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: -1px 0;
  padding: 0.57143rem;
  height: 2.64286rem;
  outline: 0;
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none;
  color: #5c5c5c;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 4px 0.25rem 4px 0;
  padding: 6px 20px 6px 0.5rem;
  border: 1px solid #aaa;
  max-width: 100%;
  border-radius: 3px;
  background-color: #eeeeee;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 13px;
  cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 9px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-multi
  .chosen-choices
  li.search-choice
  .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  /*  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);*/
  color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}

.chosen-container-multi
  .chosen-choices
  li.search-choice-focus
  .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

/* @end */

/* @group Active  */

.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);*/
  box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #222 !important;
}

/* @end */

/* @group Disabled Support */

.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */

/* @group Right to Left */

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

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}

.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}

.chosen-rtl .chosen-choices li {
  float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}

.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  left: 9999px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: white url("../img/chosen-sprite.png") no-repeat -30px -20px;
  background: url("../img/chosen-sprite.png") no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */

/* @group Retina compatibility */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 144dpi),
  only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("../img/chosen-sprite@2x.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}

.top-bar {
  position: relative;
  z-index: 1002;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0.375rem solid #198dae;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  font-size: 1.28571em;
  line-height: 1.08889em;
  margin-top: 0em;
  margin-bottom: 0em;
}

.top-bar > ul > li,
.top-bar .top-bar-left > ul > li,
.top-bar .top-bar-right > ul > li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .top-bar {
    line-height: 1em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .top-bar {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) {
  .top-bar {
    font-size: 1.28571em;
    line-height: 1.08889em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .top-bar {
    line-height: 1em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .top-bar {
    line-height: 1em;
  }
}

@media only screen and (min-width: 1024px) {
  .top-bar {
    font-size: 1.57143em;
    line-height: 1.78182em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .top-bar {
    line-height: 1.60364em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .top-bar {
    line-height: 1.51455em;
  }
}

@media only screen and (min-width: 1200px) {
  .top-bar {
    font-size: 1.92857em;
    line-height: 1.45185em;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 480px) {
  .top-bar {
    line-height: 1.30667em;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1024px) and (max-height: 320px) {
  .top-bar {
    line-height: 1.23407em;
  }
}

.top-bar li,
.top-bar li > a,
.top-bar ul li > a {
  color: #fff;
}

.top-bar .menu > li:hover {
  background-color: #8d8d8d;
}

.top-bar .menu > li.menu-text:hover {
  background-color: #e6e6e6;
}

.top-bar .menu .submenu > li:hover {
  background-color: #fafafa;
}

.top-bar .menu .submenu > li.menu-text:hover {
  background-color: #e6e6e6;
}

.top-bar .submenu {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: 3px;
  margin-top: 0px;
  border-top: 0 none;
}

.top-bar .submenu li > a,
.top-bar .submenuul li > a {
  color: #333333;
}

.top-bar .submenu li a {
  font-size: 0.63636em;
  line-height: 1.4em;
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .top-bar .submenu li a {
    line-height: 1.26em;
    margin-top: 0.315em;
    margin-bottom: 0.315em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .top-bar .submenu li a {
    line-height: 1.19em;
    margin-top: 0.2625em;
    margin-bottom: 0.2625em;
  }
}

@media only screen and (min-width: 767px) {
  .top-bar .submenu li a {
    font-size: 0.63636em;
    line-height: 1.4em;
    margin-top: 0.35em;
    margin-bottom: 0.35em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 480px) {
  .top-bar .submenu li a {
    line-height: 1.26em;
    margin-top: 0.315em;
    margin-bottom: 0.315em;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) and (max-height: 320px) {
  .top-bar .submenu li a {
    line-height: 1.19em;
    margin-top: 0.2625em;
    margin-bottom: 0.2625em;
  }
}

@media only screen and (min-width: 1024px) {
  .top-bar .submenu li a {
    font-size: 0.81818em;
    line-height: 1.08889em;
    margin-top: 0.27222em;
    margin-bottom: 0.27222em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 480px) {
  .top-bar .submenu li a {
    line-height: 1em;
    margin-top: 0.245em;
    margin-bottom: 0.245em;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) and (max-height: 320px) {
  .top-bar .submenu li a {
    line-height: 1em;
    margin-top: 0.20417em;
    margin-bottom: 0.20417em;
  }
}

.top-bar .input-holder .input-space input,
.top-bar .input-holder .switch-input-space input {
  margin-right: 0;
  width: auto;
}

.top-bar .dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after {
  border-color: #fff transparent transparent;
  top: 0.75em;
}

/**
* Top Bar:
* `.top-bar` - This is a great nav bar for website headers. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <div class="top-bar">
*   <div class="top-bar-left">
*   <ul class="dropdown menu" data-dropdown-menu>
*   <li class="menu-text">Site Title</li>
*   <li class="has-submenu">
*   <a href="#">One</a>
*   <ul class="submenu menu vertical" data-submenu>
*   <li><a href="#">One</a></li>
*   <li><a href="#">Two</a></li>
*   <li><a href="#">Three</a></li>
*   </ul>
*   </li>
*   <li><a href="#">Two</a></li>
*   <li><a href="#">Three</a></li>
*   </ul>
*   </div>
*   <div class="top-bar-right">
*   <ul class="menu input-holder row collapse">
*   <li class="input-space"><input type="search" placeholder="Search"></li>
*   <li class="input-space"><button type="button" class="button">Search</button></li>
*   </ul>
*   </div>
*   </div>
**/

.pagination-holder,
.result-selector-holder {
  border-top: 2px solid #198dae;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

.pagination-holder::before,
.result-selector-holder::before,
.pagination-holder::after,
.result-selector-holder::after {
  content: " ";
  display: table;
}

.pagination-holder::after,
.result-selector-holder::after {
  clear: both;
}

.pagination li {
  border-radius: 0px 0px 0px 0px;
  color: #707070;
  font-size: 0.78571em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  line-height: 1.4rem;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .pagination li {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .pagination li {
    line-height: 1.51455em;
  }
}

.pagination li a {
  line-height: 1.4rem;
}

.pagination li i {
  margin: 0 0.25rem;
}

.with-group-sections .pagination li a:hover {
  background-color: #cccccc;
}

.group-section .pagination li a:hover {
  background-color: #e6e6e6;
}

.pagination li.current {
  padding: 0;
}

.pagination li.current a,
.pagination li.current a:hover {
  background-color: #198dae;
  color: #fff;
}

.pagination li.arrow,
.pagination li.action {
  background-color: #e6e6e6;
  color: #5c5c5c;
  font-weight: 700;
  margin-bottom: 0;
}

.pagination li.arrow a:hover,
.pagination li.action a:hover {
  background-color: #b3b3b3;
  color: #333333;
}

.with-group-sections .pagination li.arrow a,
.with-group-sections .pagination li.action a {
  background-color: #cccccc;
}

.group-section .pagination li.arrow a,
.group-section .pagination li.action a {
  background-color: #e6e6e6;
}

.pagination li.arrow.left,
.pagination li.arrow.left:hover,
.pagination li.action.left,
.pagination li.action.left:hover {
  border-radius: 0px 0px 0px 6px;
}

.pagination li.arrow.right,
.pagination li.arrow.left:hover,
.pagination li.action.right,
.pagination li.action.left:hover {
  border-radius: 0px 0px 6px 0px;
}

.pagination li.disable a,
.pagination li.disable a:hover {
  border-color: #999999;
  background: url("../img/empty_diamond.png") repeat;
  color: gray;
  cursor: not-allowed;
}

.with-group-sections .pagination li.disable a,
.with-group-sections .pagination li.disable a:hover {
  background-color: gray;
}

.group-section .pagination li.disable a,
.group-section .pagination li.disable a:hover {
  background-color: #999999;
}

.pagination-holder.top,
.top.result-selector-holder {
  border-top: 0 none;
  border-bottom: 2px solid #198dae;
  margin-bottom: 1rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

.pagination-holder.top::before,
.top.result-selector-holder::before,
.pagination-holder.top::after,
.top.result-selector-holder::after {
  content: " ";
  display: table;
}

.pagination-holder.top::after,
.top.result-selector-holder::after {
  clear: both;
}

.pagination-holder.top .pagination,
.top.result-selector-holder .pagination {
  margin-bottom: 0;
}

.pagination-holder.top .pagination li.arrow.left,
.top.result-selector-holder .pagination li.arrow.left {
  border-radius: 6px 0 0 0;
}

.pagination-holder.top .pagination li.arrow.right,
.top.result-selector-holder .pagination li.arrow.right {
  border-radius: 0 6px 0 0;
}

@media only screen and (max-width: 1024px) {
  .pagination a > .text {
    display: none;
  }
}

.pagination--compact a > .text {
  display: none;
}

.group-section-pagination-holder {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  margin: 1rem -1rem -1rem;
  margin: 1rem calc(-1rem - 1px) calc(-1rem - 1px);
  background: #198dae url("../img/paper-texture.png");
}

.group-section-pagination-holder::before,
.group-section-pagination-holder::after {
  content: " ";
  display: table;
}

.group-section-pagination-holder::after {
  clear: both;
}

.group-section-pagination-holder .pagination {
  margin-bottom: 0;
}

.group-section-pagination-holder .pagination li {
  margin: 0 0.25rem 0.25rem;
  vertical-align: top;
}

.group-section-pagination-holder .pagination li a {
  color: #fff;
}

.group-section-pagination-holder .pagination li.current a,
.group-section-pagination-holder .pagination li.current a:hover {
  background-color: white;
  color: #198dae;
}

.group-section-pagination-holder .pagination li.arrow,
.group-section-pagination-holder .pagination li.action {
  margin: 0;
  padding: 0.25rem;
  background: #266071 url("../img/paper-texture.png");
}

.group-section-pagination-holder .pagination li.arrow a,
.group-section-pagination-holder .pagination li.action a {
  background: #266071 url("../img/paper-texture.png");
  color: #fff;
}

.group-section-pagination-holder .pagination li.arrow a:hover,
.group-section-pagination-holder .pagination li.action a:hover {
  background-color: #25b6e0;
}

.group-section-pagination-holder .pagination li.arrow.disable,
.group-section-pagination-holder .pagination li.arrow.disable a,
.group-section-pagination-holder .pagination li.arrow.disable a:hover,
.group-section-pagination-holder .pagination li.action.disable,
.group-section-pagination-holder .pagination li.action.disable a,
.group-section-pagination-holder .pagination li.action.disable a:hover {
  background-color: #73959f;
  color: #666666;
}

.group-section-pagination-holder.top {
  margin: -1rem -1rem 1rem;
  margin: calc(-1rem - 1px) calc(-1rem - 1px) 1rem;
}

.group-section-pagination-holder.top .pagination li {
  margin: 0.25rem 0.25rem 0;
  vertical-align: bottom;
}

.group-section-pagination-holder.top .pagination li.arrow,
.group-section-pagination-holder.top .pagination li.action {
  margin: 0;
}

/**
* Pagination:
* `.pagination-holder .pagination` - Pagination is often used when there is a table or page of results or repeated items. The Container defaultly styles the paginator to be at the bottom of the area of repeated content but render it at the top just add the class '.top' to render the pagination upside down. The paginator has a single modifier to condense the screen size by adding the class `.pagination--compact`.
* 
*   @example
* <div class="pagination-holder top"><ul class="pagination float-right">
*   <li class="arrow disable left"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*   <li class="current"><a href="">1</a></li>
*   <li><a href="">2</a></li>
*   <li><a href="">3</a></li>
*   <li><a href="">4</a></li>
*   <li class="arrow right"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
* </ul></div><br>
*  <div class="page with-group-sections">
*      <div class="page-wrapper">
*          <section class="section group-section">
*              <div class="group-section-pagination-holder top">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*                  <ul class="pagination float-right">
*                      <li class="action"><a href=""><i class="fa fa-plus "></i><span class="text">Add</span></a></li>
*                      <li class="action"><a href=""><i class="fa fa-times "></i><span class="text">Remove</span></a></li>
*                  </ul>
*              </div>
*              <div class="callout">this is some content</div>
*              <div class="pagination-holder">
*                  <ul class="pagination pagination--compact float-right">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*              </div>
*              <div class="group-section-pagination-holder">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*                  <ul class="pagination float-right">
*                      <li class="action"><a href=""><i class="fa fa-plus "></i><span class="text">Add</span></a></li>
*                      <li class="action"><a href=""><i class="fa fa-times "></i><span class="text">Remove</span></a></li>
*                  </ul>
*              </div>
*          </section>
*          <div class="content-padding">
*              <div class="pagination-holder">
*                  <ul class="pagination pagination--compact float-left">
*                      <li class="arrow disable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*                      <li class="current"><a href="">1</a></li>
*                      <li><a href="">2</a></li>
*                      <li><a href="">3</a></li>
*                      <li><a href="">4</a></li>
*                      <li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*                  </ul>
*              </div>
*          </div>
*      </div>
*  </div>
*/

.pagination.result-selector li.label,
.pagination.result-selector li.value {
  color: #5c5c5c;
  font-weight: 700;
}

.pagination.result-selector li.label {
  padding: 0.1875rem 0.625rem;
  background-color: #e6e6e6;
}

.top .pagination.result-selector li.label {
  border-radius: 6px 0px 0px 0px;
}

.bottom .pagination.result-selector li.label {
  border-radius: 0px 0px 0px 6px;
}

/**
* Pagination with Result Selector:
* `.pagination-holder .pagination.result-selector` - used often with a paginator is a ruslt selector. This allows the user to limit the amount of returned items on a single page. Because the Result Selector is bult on the paginator design it can also be used at the top or bottom like a paginator.
* 
*   @example
*	<div class="pagination-holder top">
*		<ul class="pagination result-selector float-left">
*			<li class="label">Show</li>
*			<li class="current"><a href="">10</a></li>
*			<li><a href="">20</a></li>
*			<li><a href="">50</a></li>
*			<li class="value">Results</li>
*		</ul>
*	<ul class="pagination float-right">
*		<li class="arrow unavailable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*		<li class="current"><a href="">1</a></li>
*		<li><a href="">2</a></li>
*		<li><a href="">3</a></li>
*		<li><a href="">4</a></li>
*		<li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*	</ul></div><br>
*	<div class="pagination-holder bottom">
*		<ul class="pagination result-selector float-left">
*			<li class="label">Show</li>
*			<li class="current"><a href="">10</a></li>
*			<li><a href="">20</a></li>
*			<li><a href="">50</a></li>
*			<li class="value">Results</li>
*		</ul>
*	<ul class="pagination float-right">
*		<li class="arrow unavailable"><a href=""><i class="fa fa-caret-left "></i><span class="text">prev</span></a></li>
*		<li class="current"><a href="">1</a></li>
*		<li><a href="">2</a></li>
*		<li><a href="">3</a></li>
*		<li><a href="">4</a></li>
*		<li class="arrow"><a href=""><span class="text">next</span><i class="fa fa-caret-right "></i></a></li>
*	</ul></div>
*
*/

/**
* Modals( Foundation Reveal):
* `.reveal-modal` - Popup, modal, reveal - a design pattern to show a hidden a part of content when you want the user to focus on a single task. <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <p><a class="button" data-open="exampleModal1">Click me for a modal</a></p>
*   <div class="reveal" id="exampleModal1" data-reveal>
*   <h1>Awesome. I Have It.</h1>
*   <p class="lead">Your couch. It is mine.</p>
*   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
*   <button class="close-button" data-close aria-label="Close reveal" type="button">
*   <span aria-hidden="true">&times;</span>
*   </button>
*   </div>
*/

div.reveal {
  border-top: 6px solid #198dae;
}

div.reveal .close-button {
  background-color: #198dae;
  color: #fff;
  padding: 0.25em 0.5em 0.5em 0.5em;
  top: 0;
  right: 0;
}

/**
* Slider (Foundation Override):
* `.range-slider .vertical-range` - Sliders are a great peice of UI for mobile and range of numbers <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <div class="slider" data-slider data-initial-start='50' data-end='200'>
*   <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
*   <span class="slider-fill" data-slider-fill></span>
*   <input type="hidden">
*   </div>
*   <div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <span class="slider-fill" data-slider-fill></span>
*    <input type="hidden">
*   </div>
*   <div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <span class="slider-fill" data-slider-fill></span>
*     <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
*     <input type="hidden">
*     <input type="hidden">
*   </div>
*   <a class="link" href="http://foundation.zurb.com/sites/docs/slider.html">Foundation Documentation</a>
*/

.slider {
  position: relative;
  height: 0.5rem;
  margin-top: 1.25rem;
  margin-bottom: 2.25rem;
  background-color: #e6e6e6;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  background-image: url("../img/billie-holiday.png");
  border: 1px solid #4d8797;
  border-radius: 6px;
  -webkit-box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
}

.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  max-width: 100%;
  height: 0.5rem;
  background-color: #198dae;
  transition: all 0.2s ease-in-out;
  background-image: url("../img/billie-holiday.png");
  -webkit-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.slider-fill.is-dragging {
  transition: all 0s linear;
}

.slider-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  z-index: 1;
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #198dae;
  transition: all 0.2s ease-in-out;
  touch-action: manipulation;
  border-radius: 0;
  border-radius: 25px;
  border: 1px solid #266071;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

[data-whatinput="mouse"] .slider-handle {
  outline: 0;
}

.slider-handle:hover {
  background-color: #157894;
}

.slider-handle.is-dragging {
  transition: all 0s linear;
}

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

.slider.vertical {
  display: inline-block;
  width: 0.5rem;
  height: 12.5rem;
  margin: 0 1.25rem;
  transform: scale(1, -1);
}

.slider.vertical .slider-fill {
  top: 0;
  width: 0.5rem;
  max-height: 100%;
}

.slider.vertical .slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  transform: translateX(-50%);
}

.switch-input-space {
  white-space: nowrap;
  display: table;
  padding-bottom: 0.5rem;
  padding-top: 0;
}

.switch-input-space .with-underline {
  border-bottom: 1px dotted #d6d6d6;
}

.switch-input-space .switch {
  display: table-cell;
  width: 1%;
}

.switch-value {
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 0.5em 0.75em;
  margin: 0;
  white-space: normal;
  background-color: transparent;
  color: #5c5c5c;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .switch-value {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .switch-value {
    line-height: 1.19em;
  }
}

.switch {
  margin-bottom: 1rem;
  outline: 0;
  position: relative;
  user-select: none;
  color: #fff;
  font-weight: bold;
  font-size: 0.875rem;
  margin-top: 0.5em;
  vertical-align: top;
}

.switch.large,
.question-grid-based.large-switches .switch {
  margin-top: 0.25em;
}

.switch.small,
.question-grid-based.small-switches .switch {
  margin-top: 0.5em;
}

.switch.tiny,
.question-grid-based.tiny-switches .switch {
  margin-top: 1em;
}

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

.switch-paddle {
  background: #b3b3b3;
  cursor: pointer;
  display: block;
  position: relative;
  width: 4rem;
  height: 2rem;
  transition: all 0.25s ease-out;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
  border: 2px solid #b3b3b3;
  background-image: url("../img/billie-holiday.png");
  box-sizing: content-box;
}

input + .switch-paddle {
  margin: 0;
}

.switch-paddle::after {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  height: 1.5rem;
  left: 0.25rem;
  top: 0.25rem;
  width: 1.5rem;
  transition: all 0.25s ease-out;
  transform: translate3d(0, 0, 0);
  border-radius: 0;
}

input:checked ~ .switch-paddle {
  background: #198dae;
}

input:checked ~ .switch-paddle::after {
  left: 2.25rem;
}

[data-whatinput="mouse"] input:focus ~ .switch-paddle {
  outline: 0;
}

.switch-input:focus + .switch-paddle {
  -webkit-box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

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

.switch-active {
  left: 8%;
  display: none;
  left: 10%;
}

input:checked + label > .switch-active {
  display: block;
}

.switch-inactive {
  right: 15%;
  right: 10%;
}

input:checked + label > .switch-inactive {
  display: none;
}

.switch.tiny .switch-paddle,
.question-grid-based.tiny-switches .switch .switch-paddle {
  width: 3rem;
  height: 1.5rem;
  font-size: 0.625rem;
}

.switch.tiny .switch-paddle::after,
.question-grid-based.tiny-switches .switch .switch-paddle::after {
  width: 1rem;
  height: 1rem;
}

.switch.tiny input:checked ~ .switch-paddle::after,
.question-grid-based.tiny-switches
  .switch
  input:checked
  ~ .switch-paddle::after {
  left: 1.75rem;
}

.switch.small .switch-paddle,
.question-grid-based.small-switches .switch .switch-paddle {
  width: 3.5rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

.switch.small .switch-paddle::after,
.question-grid-based.small-switches .switch .switch-paddle::after {
  width: 1.25rem;
  height: 1.25rem;
}

.switch.small input:checked ~ .switch-paddle::after,
.question-grid-based.small-switches
  .switch
  input:checked
  ~ .switch-paddle::after {
  left: 2rem;
}

.switch.large .switch-paddle,
.question-grid-based.large-switches .switch .switch-paddle {
  width: 5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.switch.large .switch-paddle::after,
.question-grid-based.large-switches .switch .switch-paddle::after {
  width: 2rem;
  height: 2rem;
}

.switch.large input:checked ~ .switch-paddle::after,
.question-grid-based.large-switches
  .switch
  input:checked
  ~ .switch-paddle::after {
  left: 2.75rem;
}

.radio .switch-active i.fa-holder:before {
  content: "\f058";
}

.checkbox .switch-active i.fa-holder:before {
  content: "\f00c";
}

.x-vixible .switch-inactive i.fa-holder:before,
.checkbox.x-vixible .switch-inactive i.fa-holder:before {
  content: "\f00d";
}

.radio.x-vixible .switch-inactive i.fa-holder:before {
  content: "\f057";
}

.switch.radius .switch-paddle,
.switch.checkbox .switch-paddle {
  border-radius: 6px;
}

.switch.radius .switch-paddle:after,
.switch.checkbox .switch-paddle:after {
  border-radius: 4.5px;
}

.switch.round .switch-paddle,
.switch.round .switch-paddle:after,
.switch.radio .switch-paddle,
.switch.radio .switch-paddle:after {
  border-radius: 25px;
}

.switch.disabled .switch-paddle,
.switch-input[disabled] ~ .switch-paddle {
  background: #b3b3b3 url("../img/subtlenet2.png") repeat;
  border: 2px solid #e6e6e6;
  box-sizing: content-box;
}

.switch.disabled .switch-paddle,
.switch-input[disabled] ~ .switch-paddle {
  color: #b3b3b3;
}

.switch.disabled .switch-paddle:after,
.switch-input[disabled] ~ .switch-paddle:after {
  background-color: #e6e6e6;
}

.switch.value-switch .switch-active,
.switch-group .switch .switch-active {
  color: #333333;
}

.switch.value-switch .switch-inactive,
.switch-group .switch .switch-inactive {
  color: #e6e6e6;
}

.switch.value-switch .switch-active,
.switch.value-switch .switch-inactive,
.switch-group .switch .switch-active,
.switch-group .switch .switch-inactive {
  z-index: 100;
}

.switch.value-switch input + label > .switch-active,
.switch-group .switch input + label > .switch-active {
  display: block;
}

.switch.value-switch input:checked + label > .switch-inactive,
.switch-group .switch input:checked + label > .switch-inactive {
  color: #333333;
  display: block;
}

.switch.value-switch input:checked + label > .switch-active,
.switch-group .switch input:checked + label > .switch-active {
  color: #e6e6e6;
}

.switch.value-switch .switch-paddle,
.switch.value-switch input:checked .switch-paddle,
.switch-group .switch .switch-paddle,
.switch-group .switch input:checked .switch-paddle {
  background-color: #198dae;
}

.switch.switch-2x .switch-active,
.switch.switch-4x .switch-active {
  left: 0.25em;
}

.switch.switch-2x .switch-inactive,
.switch.switch-4x .switch-inactive {
  right: 0.25em;
}

.switch.switch-2x .switch-paddle {
  width: 7em;
}

.switch.switch-2x .switch-paddle::after {
  width: 3em;
}

.switch.switch-2x input:checked ~ .switch-paddle::after {
  left: 3.75em;
}

.switch.switch-2x .switch-active,
.switch.switch-2x .switch-inactive {
  width: 3em;
  text-align: center;
}

.switch.switch-4x .switch-paddle {
  width: 15em;
}

.switch.switch-4x .switch-paddle::after {
  width: 7em;
}

.switch.switch-4x input:checked ~ .switch-paddle::after {
  left: 7.75em;
}

.switch.switch-4x .switch-active,
.switch.switch-4x .switch-inactive {
  width: 7em;
  text-align: center;
}

.switch-group {
  background-color: #198dae;
  border: 2px solid #b3b3b3;
  box-sizing: content-box;
  height: 2rem;
  transition: all 0.25s ease-out;
  border-radius: 0;
  color: inherit;
  font-weight: inherit;
  display: block;
  width: auto;
}

.switch-group .switch .switch-active,
.switch-group .switch .switch-inactive {
  text-align: center;
  width: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.switch-group > .switch {
  display: inline-block;
  float: left;
  width: auto;
  margin: 0;
}

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

.switch-group .switch-paddle {
  width: 4rem;
  border: 0 transparent none;
  background-color: transparent;
}

.switch-group .switch-paddle:after {
  opacity: 0;
  width: 80% !important;
  width: calc(100% - 0.5rem) !important;
  left: 10% !important;
  left: calc(0.25rem + 0px) !important;
  border-radius: 3px;
}

.switch-group .switch.switch-2x .switch-paddle {
  width: 8rem;
}

.switch-group .switch.switch-4x .switch-paddle {
  width: 16rem;
}

.switch-group input:checked + .switch-paddle:after {
  opacity: 1;
  left: 10% !important;
  left: calc(0.25rem + 0px) !important;
}

.switch-group .switch-active,
.switch-group .switch-inactive {
  z-index: 100;
}

/**
* Switch (Foundation Override): 
* `.switch` - Switches are a more visible and more touchable versions of checkbox and radio buttons. 
*  <h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
*   <div class="switch-input-space">
*   <div class="switch">
*   <input class="switch-input" id="yes-no-1" type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="yes-no-1">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-1">Yes or No Question</label>
*   </div>
*/

/**
* Switch (Disabled): 
* `disable` - on the input changes the look and cursor on rollover
* 
*   @example
*   <div class="switch-input-space  row">
*   <div class="switch">
*   <input class="switch-input" id="yes-no-disabled" disabled type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="yes-no-disabled">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-disabled">Yes or No Question</label>
*   </div>
*/

/**
* Switch modifing classes: 
* `.switch` - Switches are remarkably flexable. Radio Buttons should use `.radio` as modifier, and Checkboxes use  `.checkbox`. `.round` and `.radius` are very useful to change the look and feel of buttons.  
* 
*   @example
*   <div class="row group-divide">
*   <h4>Radio Buttons should use `.round` or `.radio` modifier</h4>
*   <p>You can make a radio with eiither placing the `.round` or `.radio`. *   <div class="row collapse">
*   <div class="switch-input-space column small-6">
*   <div class="switch round">
*   <input class="switch-input" id="yes-no-round" type="radio" name="radio-switch">
*   <label class="switch-paddle" for="yes-no-round">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-check-circle-o"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-times-circle"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-round">Radio button made with `.round`</label>
*   </div>
*   <div class="switch-input-space column small-6">
*   <div class="switch radio">
*   <input class="switch-input" id="yes-no-radio" type="radio" name="radio-switch">
*   <label class="switch-paddle" for="yes-no-radio">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="yes-no-radio">Radio button made with `.radio`</label>
*   </div>
*   </div>
*   </div>
*   <div class="row group-divide">
*   <h4>Checkboxes should use `.radius`, `.checkbox`, no modifiers</h4>
*   <p>If you want control over the positive and negative icons use `.radius`.  Use `.checkbox` to set it to the standard icon in the positive position</p>
*   <div class="row collapse">
*   <div class="switch-input-space column small-6">
*   <div class="switch radius">
*   <input class="switch-input" id="radius-checkbox" type="checkbox" value="true">
*   <label class="switch-paddle" for="radius-checkbox">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-check-circle-o"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-times-circle"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="radius-checkbox">Checkbox button made with `.radius`</label>
*   </div>
*   <div class="switch-input-space column small-6">
*   <div class="switch checkbox">
*   <input class="switch-input" id="checkbox-checkbox"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-checkbox">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-holder"></i></span>
*   </label>
*   </div>
*   <label  class="switch-value" for="checkbox-checkbox">Checkbox button made with `.checkbox`</label>
*   </div>
*   </div></div>

**/

/**
* Value Switchers: 
* `.value-switch` - Add `.value-switch` to a switch so both inactive and active content of the switcher are visible and stay colored.
* 
*   @example
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch">
*   <input class="switch-input" id="checkbox-value-switch"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true"><i class="fa fa-thumbs-up"></i></span>
*   <span class="switch-inactive" aria-hidden="true"><i class="fa fa-thumbs-down"></i></span>
*   </label>
*   </div>
*   </div>
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch switch-2x radius">
*   <input class="switch-input" id="checkbox-value-switch-radius"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch-radius">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">US</span>
*   <span class="switch-inactive" aria-hidden="true">SI</span>
*   </label>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-radius">You expand the switch area with switch-2x and switch-4x</label>
*   </div>
*   <div class="switch-input-space column small-12">
*   <div class="switch value-switch switch-4x round">
*   <input class="switch-input" id="checkbox-value-switch-round"  type="checkbox" value="false">
*   <label class="switch-paddle" for="checkbox-value-switch-round">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Inches</span>
*   <span class="switch-inactive" aria-hidden="true">Centimeters</span>
*   </label>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-round">You can also apply the `.radius` and `.round` to change the style
*   </label>
*   </div>
*/

/**
* Switch Group: 
* `.switch-group` - Switches can be grouped if you want a multi selected bar of similar items.
* 
*   @example
*   <h4>Switch Groups group normal '.switch' DOM they just stack the active and inactive items </h4>
*   <div class="switch-input-space">
*   <div class="switch-group"><div class="switch">
*   <input class="switch-input" id="switch-group0"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group0">
*   <span class="show-for-sr">Miles True?</span>
*   <span class="switch-active" aria-hidden="true">Miles</span>
*   <span class="switch-inactive" aria-hidden="true">Miles</span>
*   </label></div><div class="switch">
*   <input class="switch-input" id="switch-group1"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group1">
*   <span class="show-for-sr">Knots?</span>
*   <span class="switch-active" aria-hidden="true">Knots</span>
*   <span class="switch-inactive" aria-hidden="true">Knots</span>
*   </label></div><div class="switch switch-2x">
*   <input class="switch-input" id="switch-group2"  type="checkbox" value="false">
*   <label class="switch-paddle" for="switch-group2">
*   <span class="show-for-sr">Kilometers?</span>
*   <span class="switch-active" aria-hidden="true">Kilometers</span>
*   <span class="switch-inactive" aria-hidden="true">Kilometers</span>
*   </label></div>
*   </div>
*   <label class="switch-value" for="checkbox-value-switch-round">Show these types of distance
*   </label>
*   </div>
*/

/**
* Switch (States): 
* `.error-active` - Switches can be colored with a class [state]-active and [state]-inactive.
* 
*   @example
*   <h3>Plain switch with `.error-active` and `.sucess-inactive` on the `.switch`</h3>
*   <div class="switch-input-space row">
*   <div class="switch warning-active error-inactive switch-2x">
*   <input class="switch-input" id="active-inactive" type="checkbox" name="exampleSwitch">
*   <label class="switch-paddle" for="active-inactive">
*   <span class="show-for-sr">Do you like me?</span>
*   <span class="switch-active" aria-hidden="true">Yes</span>
*   <span class="switch-inactive" aria-hidden="true">No</span>
*   </label>
*   </div>
*   <label  class="switch-value" for="active-inactive">.switch.error-active.warning-inactive/label>
*   </div>
*/

.tooltip {
  background-color: #266071;
  z-index: 2000;
}

.tooltip.tip-top > .nub {
  border-color: #266071 transparent transparent;
}

.close-button {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
}

.callout {
  background-image: url(../img/empty_stripe.png);
}

.button-group {
  border: 2px solid transparent;
}

.button-group.radius,
.button-group.radius-top,
.button-group.radius-bottom {
  overflow: hidden;
}

.button-group.expanded.selectable .button:first-child:nth-last-child(2) {
  border-right-width: 0;
  width: 50%;
}

.button-group.expanded.selectable .button:first-child:nth-last-child(3) {
  border-right-width: 0;
  width: 33.3333%;
}

.button-group.expanded.selectable .button:first-child:nth-last-child(4) {
  border-right-width: 0;
  width: 25%;
}

.button-group.expanded.selectable .button:first-child:nth-last-child(5) {
  border-right-width: 0;
  width: 20%;
}

.button-group.selectable {
  margin-right: 0;
}

.button-group.selectable .button {
  background-color: #b3b3b3;
  color: #fff;
}

.button-group.selectable .button:hover,
.button-group.selectable .button:focus {
  background-color: #157894;
  color: #fff;
}

.button-group.selectable .button:hover,
.button-group.selectable .button:focus {
  background-color: #666666;
  color: #fff;
}

.button-group.selectable i.fa {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
  margin: 0 7px 0 0;
  display: none;
}

.button-group.selectable .selected.button {
  background-color: #198dae;
  color: #fff;
}

.button-group.selectable .selected.button:hover,
.button-group.selectable .selected.button:focus {
  background-color: #157894;
  color: #fff;
}

.button-group.selectable .selected.button:hover,
.button-group.selectable .selected.button:focus {
  background-color: #1e7b95;
  color: #fff;
}

.button-group.selectable .selected.button i.fa {
  display: inline-block;
}

.error.question .button-group,
.warning.question .button-group,
.success.question .button-group,
.info.question .button-group,
.highlighted.question .button-group,
.disabled.question .button-group {
  margin-bottom: 0;
}

.error.question .button-group.radius,
.warning.question .button-group.radius,
.success.question .button-group.radius,
.info.question .button-group.radius,
.highlighted.question .button-group.radius,
.disabled.question .button-group.radius {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/**
* Selectable Button Group:
* `.selectable.button-group` - this is a toggle-able button group that changes colors when items are selected.  Add .selected to the `li`  to change colors and add the check to the button.<h5 class="warning">( !! WARNING !! Updated HTML and Styles From Ver 1)</h5>
* 
*   @example
* <h4>Basic</h4>
* <div class="question required">  
*   <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group selectable">
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>Modified with an item having the class `.selected`</h4>
* <div class="question required">  
*   <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>Modified with the `.expand`</h4>
* <div class="question">  
* <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group expanded selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
* </div>
* <h4>The container `.question` has an error state.<span class="sub-line"> NOTE: if button groups have states it is best for them to have been expanded.</span></h4>
* <div class="question error">  
* <div class="input-holder row collapse">
*     <div class="column small-12 input-space">
*   <div class="button-group expanded selectable">
*     <a href="" class="button selected"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*     <a href="" class="button"><i class="fa fa-check"></i><span class="text">Yes</span></a>
*   </div>
*     </div>
*   </div>
*   <div class="message-holder"><small class="error">Error</small></div>
* </div>
*
*/

/**
* Twitter Typeahead:
* `.twitter-typeahead` - Type ahead javascript
* 
*   @example
* <span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;">
*  <input class="typeahead tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input id="StateTypeAhead" class="typeahead tt-input" type="text" placeholder="States of USA" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Open Sans', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">ala</pre>
*  <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: block; right: auto;">
*    <div class="tt-dataset-states">
*      <span class="tt-suggestions" style="display: block;">
*        <div class="tt-suggestion"><p style="white-space: normal;"><strong class="tt-highlight">Al</strong>abama</p></div>
*        <div class="tt-suggestion tt-cursor"><p style="white-space: normal;"><strong class="tt-highlight">Al</strong>aska</p></div>
*        <div class="tt-suggestion"><p style="white-space: normal;">C<strong class="tt-highlight">al</strong>ifornia</p></div>
*      </span>
*      </div>
*    </span>
*  </span><br/><br/><br/><br/><br/><a href="https://twitter.github.io/">Documentation</a>
*
**/

.twitter-typeahead {
  width: 100%;
}

.typeahead,
.tt-query,
.tt-hint {
  height: 30px;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  border: 2px solid #b3b3b3;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #198dae;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(102, 102, 102, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999;
}

.tt-dropdown-menu {
  width: inherit;
  margin-top: 0.25rem;
  padding: 0.25rem 0.25rem;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
}

.tt-suggestion strong {
  color: #198dae;
  font-size: 1.1em;
  margin: 0 2px 0 1px;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
}

.tt-suggestion.tt-cursor {
  color: #e8f4f7;
  background-color: #198dae;
}

.tt-suggestion.tt-cursor strong {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

/* Component containers
----------------------------------*/

.ui-widget {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.ui-widget button {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
  font-size: 1em;
}

.ui-widget-content {
  border: 1px solid #b3b3b3;
  background-image: none;
  background-color: white;
  color: #333333;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #aaaaaa;
  background-image: none;
  background-color: #cccccc;
  color: #1a1a1a;
  font-weight: bold;
}

.ui-widget-header a {
  color: #1a1a1a;
}

/* Interaction states
----------------------------------*/

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #cccccc;
  background-image: none;
  background: #e6e6e6;
  font-weight: normal;
  color: #4d4d4d;
}

.ui-state-default a {
  color: #4d4d4d;
  text-decoration: none;
}

.ui-state-default a:link,
.ui-state-default a:visited {
  color: #4d4d4d;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 1px solid #198dae;
  background-image: none;
  background: #25b6e0;
  font-weight: normal;
  color: #ffffff;
}

.ui-state-hover a {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-focus a {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 1px solid #198dae;
  background: #198dae;
  font-weight: normal;
  color: #fff;
}

.ui-state-active a {
  color: #fff;
  text-decoration: none;
}

.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #c32231;
  background: #fbe7e9;
  color: #c32231;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #c32231;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #c32231;
  background: #fbe7e9;
  color: #c32231;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #c32231;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */

.ui-icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: none repeat scroll 0 0 transparent;
  text-align: center;
}

.ui-icon:before {
  font-size: 1em;
  margin: 0.25em 0.5em;
  display: inline-block;
}

.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-default .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-active .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-highlight .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background: none repeat scroll 0 0 transparent;
}

/* Font Awesome Override
------------------------------------------------ */

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */

.ui-icon[class*=" ui-icon-"] {
  /* Remove the jQuery UI Icon */
  background: none repeat scroll 0 0 transparent;
  /* Remove the jQuery UI Text Indent */
  text-indent: 0;
  /* Bump it up - jQuery UI is -8px */
  margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" ui-icon-"] {
  /* Bump it - jQuery UI is -8px */
  margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */

.ui-icon.icon-large {
  margin-top: -0.75em;
}

/* positioning */

.ui-icon-carat-1-n:before {
  content: "";
}

.ui-icon-carat-1-ne:before {
  content: "";
}

.ui-icon-carat-1-e:before {
  content: "";
}

.ui-icon-carat-1-se:before {
  content: "";
}

.ui-icon-carat-1-s:before {
  content: "";
}

.ui-icon-carat-1-sw:before {
  content: "";
}

.ui-icon-carat-1-w:before {
  content: "";
}

.ui-icon-carat-1-nw:before {
  content: "";
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n:before {
  content: "";
}

.ui-icon-triangle-1-ne:before {
  content: "";
}

.ui-icon-triangle-1-e:before {
  content: "";
}

.ui-icon-triangle-1-se:before {
  content: "";
}

.ui-icon-triangle-1-s:before {
  content: "";
}

.ui-icon-triangle-1-sw:before {
  content: "";
}

.ui-icon-triangle-1-w:before {
  content: "";
}

.ui-icon-triangle-1-nw:before {
  content: "";
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n:before {
  content: "";
}

.ui-icon-arrow-1-ne:before {
  content: "";
}

.ui-icon-arrow-1-e:before {
  content: "";
}

.ui-icon-arrow-1-se:before {
  content: "";
}

.ui-icon-arrow-1-s:before {
  content: "";
}

.ui-icon-arrow-1-sw:before {
  content: "";
}

.ui-icon-arrow-1-w:before {
  content: "";
}

.ui-icon-arrow-1-nw:before {
  content: "";
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */

.ui-icon-circle-triangle-e:before {
  content: "";
}

.ui-icon-circle-triangle-s:before {
  content: "";
}

.ui-icon-circle-triangle-w:before {
  content: "";
}

.ui-icon-circle-triangle-n:before {
  content: "";
}

.ui-icon-circle-arrow-e:before {
  content: "";
}

.ui-icon-circle-arrow-s:before {
  content: "";
}

.ui-icon-circle-arrow-w:before {
  content: "";
}

.ui-icon-circle-arrow-n:before {
  content: "";
}

.ui-icon-circle-zoomin:before {
  content: "";
}

.ui-icon-circle-zoomout:before {
  content: "";
}

.ui-icon-circle-check:before {
  content: "";
}

.ui-icon-circlesmall-plus:before,
.ui-icon-circle-plus:before {
  content: "";
}

.ui-icon-circlesmall-minus:before,
.ui-icon-circle-minus:before {
  content: "";
}

.ui-icon-circlesmall-close:before,
.ui-icon-circle-close:before {
  content: "";
}

.ui-icon-squaresmall-plus:before {
  content: "";
}

.ui-icon-squaresmall-minus:before {
  content: "";
}

.ui-icon-squaresmall-close:before {
  content: "";
}

.ui-icon-grip-dotted-vertical:before {
  content: "";
}

.ui-icon-grip-dotted-horizontal:before {
  content: "";
}

.ui-icon-grip-solid-vertical:before {
  content: "";
}

.ui-icon-grip-solid-horizontal:before {
  content: "";
}

.ui-icon-gripsmall-diagonal-se:before {
  content: "";
}

.ui-icon-grip-diagonal-se:before {
  content: "";
}

/* Misc visuals
----------------------------------*/

/* Corner radius */

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0;
}

/* Overlays */

.ui-widget-overlay {
  background: #6a6a6a url("images/ui-bg_flat_0_6a6a6a_40x100.png") 50% 50%
    repeat-x;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50%
    repeat-x;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
  border-radius: 8px;
}

.ui-spinner {
  border-radius: 0;
}

.ui-spinner .ui-spinner-button {
  border-radius: 0;
}

.ui-spinner .ui-spinner-input {
  padding: 0.57143rem;
  height: 2.64286rem;
  margin: 0;
}

/* AutoComplete */

.ui-autocomplete {
  max-height: 15em;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  font-size: 1.25rem;
  line-height: 1;
}

.ui-autocomplete span {
  padding: 0 0.25rem 0 0;
  font-size: 0.8em;
}

.ui-autocomplete .headline {
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 700;
  display: block;
  color: #5c5c5c;
  font-size: 1em;
}

.ui-autocomplete .description {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #707070;
  font-size: 0.75em;
}

.ui-autocomplete .ui-state-focus .headline,
.ui-autocomplete .ui-state-focus .description {
  color: white;
}

.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0.1em;
  border-radius: 0;
}

.ui-datepicker-header .ui-datepicker-prev:before,
.ui-datepicker-header .ui-datepicker-next:before {
  font-size: 1em;
  margin: 0.35em 0.45em;
  display: inline-block;
}

.ui-datepicker-header .ui-datepicker-prev .ui-icon,
.ui-datepicker-header .ui-datepicker-next .ui-icon {
  text-indent: -9999px;
}

.ui-datepicker-header .ui-datepicker-prev:before {
  content: "";
}

.ui-datepicker-header .ui-datepicker-next:before {
  content: "";
}

.ui-accordion-override .ui-accordion-header {
  font-size: 1.92857em;
  line-height: 1.45185em;
  margin-top: 0.54444em;
  margin-bottom: 0.18148em;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
  color: #333333;
  padding-left: 2.25em;
  background: none;
  margin-bottom: 0;
  border: 0px none;
  margin-bottom: 0;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .ui-accordion-override .ui-accordion-header {
    line-height: 1.30667em;
    margin-top: 0.49em;
    margin-bottom: 0.16333em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .ui-accordion-override .ui-accordion-header {
    line-height: 1.23407em;
    margin-top: 0.40833em;
    margin-bottom: 0.13611em;
  }
}

.ui-accordion-override .ui-accordion-header:hover {
  color: #000;
}

.ui-accordion-override .ui-accordion-header .ui-accordion-header-icon {
  font-size: 1.5em;
  padding: 0;
  height: 1em;
  width: 1em;
  left: 0.33333333333em;
  top: 0.33333333333em;
  margin-top: 0;
  display: block;
}

.ui-accordion-override .ui-icon-triangle-1-e:before {
  content: "\f138";
  color: #25b6e0;
}

.ui-accordion-override .ui-icon-triangle-1-s:before {
  content: "\f13a";
  color: #198dae;
}

.ui-accordion-override .ui-accordion-content {
  border: 0;
  border-radius: 0;
}

.ui-accordion-override .ui-accordion-content.ui-accordion-content-active {
  border-top: 2px solid #198dae;
  border-bottom: 2px solid #666666;
}

.page .page-wrapper,
.content-padding {
  margin: 0 auto;
}

.page .page-wrapper {
  max-width: 1200px;
}

.page .page-wrapper {
  padding: 1rem 0.5rem 1.25rem;
}

.noselect {
  /*
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
*/
}

*:not(input):not(textarea) {
  /*    -webkit-touch-callout: none;*/
  /* prevent callout to copy image, etc when tap to hold */
  /*    -webkit-text-size-adjust: none;*/
  /* prevent webkit from resizing text to fit */
  /*    -webkit-user-select: none;*/
  /* prevent copy paste, to allow, change 'none' to 'text' */
  /*
    -ms-touch-callout: none;
    -ms-user-select: none;
    -ms-text-size-adjust: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    -moz-text-size-adjust: none;
*/
}

@media only screen and (min-width: 767px) {
  .page .page-wrapper {
    padding: 1.5rem 0.75rem 2rem;
  }
}

@media only screen and (min-width: 1024px) {
  .page .page-wrapper {
    padding: 2rem 1rem 3rem;
  }
}

.section-padding,
.with-group-sections .page-wrapper,
.paper-page .page-wrapper {
  padding: 0.25rem 0;
}

@media only screen and (min-width: 320px) {
  .section-padding,
  .with-group-sections .page-wrapper,
  .paper-page .page-wrapper {
    padding: 0.5rem 0;
  }
}

@media only screen and (min-width: 767px) {
  .section-padding,
  .with-group-sections .page-wrapper,
  .paper-page .page-wrapper {
    padding: 0.75rem 0;
  }
}

@media only screen and (min-width: 1024px) {
  .section-padding,
  .with-group-sections .page-wrapper,
  .paper-page .page-wrapper {
    padding: 1rem 0;
  }
}

.with-group-sections .page-wrapper .group-section,
.with-group-sections .page-wrapper .card,
.paper-page .page-wrapper .group-section,
.paper-page .page-wrapper .card,
.colored-paper {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

@media only screen and (min-width: 320px) {
  .with-group-sections .page-wrapper .group-section,
  .with-group-sections .page-wrapper .card,
  .paper-page .page-wrapper .group-section,
  .paper-page .page-wrapper .card,
  .colored-paper {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

@media only screen and (min-width: 767px) {
  .with-group-sections .page-wrapper .group-section,
  .with-group-sections .page-wrapper .card,
  .paper-page .page-wrapper .group-section,
  .paper-page .page-wrapper .card,
  .colored-paper {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media only screen and (min-width: 1024px) {
  .with-group-sections .page-wrapper .group-section,
  .with-group-sections .page-wrapper .card,
  .paper-page .page-wrapper .group-section,
  .paper-page .page-wrapper .card,
  .colored-paper {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.content-padding,
.with-group-sections .page-wrapper > .section,
.with-group-sections .page-wrapper > section,
.with-group-sections .page-wrapper > .row,
.paper-page .page-wrapper > .section,
.paper-page .page-wrapper > section,
.paper-page .page-wrapper > .row,
.with-group-sections .page-wrapper .group-section,
.with-group-sections .page-wrapper .card,
.paper-page .page-wrapper .group-section,
.paper-page .page-wrapper .card,
.colored-paper {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media only screen and (min-width: 767px) {
  .content-padding,
  .with-group-sections .page-wrapper > .section,
  .with-group-sections .page-wrapper > section,
  .with-group-sections .page-wrapper > .row,
  .paper-page .page-wrapper > .section,
  .paper-page .page-wrapper > section,
  .paper-page .page-wrapper > .row,
  .with-group-sections .page-wrapper .group-section,
  .with-group-sections .page-wrapper .card,
  .paper-page .page-wrapper .group-section,
  .paper-page .page-wrapper .card,
  .colored-paper {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}

@media only screen and (min-width: 1024px) {
  .content-padding,
  .with-group-sections .page-wrapper > .section,
  .with-group-sections .page-wrapper > section,
  .with-group-sections .page-wrapper > .row,
  .paper-page .page-wrapper > .section,
  .paper-page .page-wrapper > section,
  .paper-page .page-wrapper > .row,
  .with-group-sections .page-wrapper .group-section,
  .with-group-sections .page-wrapper .card,
  .paper-page .page-wrapper .group-section,
  .paper-page .page-wrapper .card,
  .colored-paper {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.group-section .colored-paper:first-child,
.card .colored-paper:first-child {
  margin-top: -0.2rem;
  margin-top: calc(-0.2rem - 1px);
}

@media only screen and (max-height: 480px) {
  .group-section .colored-paper:first-child,
  .card .colored-paper:first-child {
    margin-top: -0.25rem;
    margin-top: calc(-0.25rem - 1px);
  }
}

@media only screen and (min-width: 767px) {
  .group-section .colored-paper:first-child,
  .card .colored-paper:first-child {
    margin-top: -0.5rem;
    margin-top: calc(-0.5rem - 1px);
  }
}

@media only screen and (min-width: 1024px) {
  .group-section .colored-paper:first-child,
  .card .colored-paper:first-child {
    margin-top: -1rem;
    margin-top: calc(-1rem - 1px);
  }
}

@media only screen and (min-width: 1200px) {
  .group-section .colored-paper:first-child,
  .card .colored-paper:first-child {
    margin-top: -1rem;
    margin-top: calc(-1rem - 1px);
  }
}

.colored-paper .tabs,
.group-section .colored-paper:last-child,
.card .colored-paper:last-child {
  margin-bottom: -0.2rem;
  margin-bottom: calc(-0.2rem - 2px);
}

@media only screen and (max-height: 480px) {
  .colored-paper .tabs,
  .group-section .colored-paper:last-child,
  .card .colored-paper:last-child {
    margin-bottom: -0.25rem;
    margin-bottom: calc(-0.25rem - 2px);
  }
}

@media only screen and (min-width: 767px) {
  .colored-paper .tabs,
  .group-section .colored-paper:last-child,
  .card .colored-paper:last-child {
    margin-bottom: -0.5rem;
    margin-bottom: calc(-0.5rem - 2px);
  }
}

@media only screen and (min-width: 1024px) {
  .colored-paper .tabs,
  .group-section .colored-paper:last-child,
  .card .colored-paper:last-child {
    margin-bottom: -1rem;
    margin-bottom: calc(-1rem - 2px);
  }
}

@media only screen and (min-width: 1200px) {
  .colored-paper .tabs,
  .group-section .colored-paper:last-child,
  .card .colored-paper:last-child {
    margin-bottom: -1rem;
    margin-bottom: calc(-1rem - 2px);
  }
}

.colored-paper {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-left: calc(-0.5rem - 1px);
  margin-right: calc(-0.5rem - 1px);
}

@media only screen and (min-width: 767px) {
  .colored-paper {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-left: calc(-0.75rem - 1px);
    margin-right: calc(-0.75rem - 1px);
  }
}

@media only screen and (min-width: 1024px) {
  .colored-paper {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-left: calc(-1rem - 1px);
    margin-right: calc(-1rem - 1px);
  }
}

.page .page-wrapper,
.content-padding,
.colored-paper {
  -webkit-transition: padding 1s;
  /* Safari */
  transition: padding 1s;
  -webkit-transition: margin 1s;
  /* Safari */
  transition: margin 1s;
}

.section,
section {
  width: 100%;
}

.section-nav.back ~ .page-wrapper {
  padding-top: 0;
}

/**
* page layouts:
* `page-wrapper` - inside all layout divs the page-wrapper is used to make a unified amount of spacing from the content and the vewport edges.
* 
*   @example
*   <div class="page edge" ><div class="page-wrapper outline" ><span class="notation">page-wrapper</span><div class="section outline"><span class="notation">section</span>Hello this is content </div></div>
**/

/**
* page layouts outline:
* `page-wrapper` - inside all layout divs the page-wrapper is used to make a unified amount of spacing from the content and the vewport edges.
* 
*   @example
*	<div class="page-wrapper" style="border:red 1px solid"><div class="section">Hello this is content </div></div>
**/

.with-group-sections,
.paper-page {
  background-image: url("../img/billie-holiday-lite.png");
}

.with-group-sections .page-wrapper .group-section,
.with-group-sections .page-wrapper .card,
.paper-page .page-wrapper .group-section,
.paper-page .page-wrapper .card {
  border: 1px solid #d9d9d9;
  background-color: white;
  -webkit-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
}

.with-group-sections .page-wrapper .group-section.ghost,
.with-group-sections .page-wrapper .card.ghost,
.paper-page .page-wrapper .group-section.ghost,
.paper-page .page-wrapper .card.ghost {
  border: 2px dashed #bfbfbf;
  background-color: transparent;
  background-image: url("../img/empty_stripe_grey@2x.png");
  -webkit-box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
  -moz-box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
  box-shadow: inset 0px 1px 6px 3px rgba(230, 230, 230, 0.2);
}

.with-group-sections.error,
.with-group-sections.error .overlap .tabs .selected,
.with-group-sections.error .overlap .tabs .is-active,
.paper-page.error,
.paper-page.error .overlap .tabs .selected,
.paper-page.error .overlap .tabs .is-active {
  background-color: #f5c3c8;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.error .overlap .tabs .selected,
.with-group-sections.error .overlap .tabs .is-active,
.paper-page.error .overlap .tabs .selected,
.paper-page.error .overlap .tabs .is-active {
  background: #c32231;
}

.with-group-sections.error .overlap .tabs .selected a,
.with-group-sections.error .overlap .tabs .is-active a,
.paper-page.error .overlap .tabs .selected a,
.paper-page.error .overlap .tabs .is-active a {
  color: #fff;
}

.with-group-sections.warning,
.with-group-sections.warning .overlap .tabs .selected,
.with-group-sections.warning .overlap .tabs .is-active,
.paper-page.warning,
.paper-page.warning .overlap .tabs .selected,
.paper-page.warning .overlap .tabs .is-active {
  background-color: #fae1c2;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.warning .overlap .tabs .selected,
.with-group-sections.warning .overlap .tabs .is-active,
.paper-page.warning .overlap .tabs .selected,
.paper-page.warning .overlap .tabs .is-active {
  background: #e08514;
}

.with-group-sections.warning .overlap .tabs .selected a,
.with-group-sections.warning .overlap .tabs .is-active a,
.paper-page.warning .overlap .tabs .selected a,
.paper-page.warning .overlap .tabs .is-active a {
  color: #fff;
}

.with-group-sections.success,
.with-group-sections.success .overlap .tabs .selected,
.with-group-sections.success .overlap .tabs .is-active,
.paper-page.success,
.paper-page.success .overlap .tabs .selected,
.paper-page.success .overlap .tabs .is-active {
  background-color: #b9f7d3;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.success .overlap .tabs .selected,
.with-group-sections.success .overlap .tabs .is-active,
.paper-page.success .overlap .tabs .selected,
.paper-page.success .overlap .tabs .is-active {
  background: #14b057;
}

.with-group-sections.success .overlap .tabs .selected a,
.with-group-sections.success .overlap .tabs .is-active a,
.paper-page.success .overlap .tabs .selected a,
.paper-page.success .overlap .tabs .is-active a {
  color: #fff;
}

.with-group-sections.info,
.with-group-sections.info .overlap .tabs .selected,
.with-group-sections.info .overlap .tabs .is-active,
.paper-page.info,
.paper-page.info .overlap .tabs .selected,
.paper-page.info .overlap .tabs .is-active {
  background-color: #e9e9e9;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.info .overlap .tabs .selected,
.with-group-sections.info .overlap .tabs .is-active,
.paper-page.info .overlap .tabs .selected,
.paper-page.info .overlap .tabs .is-active {
  background: #a6a6a6;
}

.with-group-sections.info .overlap .tabs .selected a,
.with-group-sections.info .overlap .tabs .is-active a,
.paper-page.info .overlap .tabs .selected a,
.paper-page.info .overlap .tabs .is-active a {
  color: #333333;
}

.with-group-sections.highlighted,
.with-group-sections.highlighted .overlap .tabs .selected,
.with-group-sections.highlighted .overlap .tabs .is-active,
.paper-page.highlighted,
.paper-page.highlighted .overlap .tabs .selected,
.paper-page.highlighted .overlap .tabs .is-active {
  background-color: #bbe8f5;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.highlighted .overlap .tabs .selected,
.with-group-sections.highlighted .overlap .tabs .is-active,
.paper-page.highlighted .overlap .tabs .selected,
.paper-page.highlighted .overlap .tabs .is-active {
  background: #198dae;
}

.with-group-sections.highlighted .overlap .tabs .selected a,
.with-group-sections.highlighted .overlap .tabs .is-active a,
.paper-page.highlighted .overlap .tabs .selected a,
.paper-page.highlighted .overlap .tabs .is-active a {
  color: #fff;
}

.with-group-sections.disabled,
.with-group-sections.disabled .overlap .tabs .selected,
.with-group-sections.disabled .overlap .tabs .is-active,
.paper-page.disabled,
.paper-page.disabled .overlap .tabs .selected,
.paper-page.disabled .overlap .tabs .is-active {
  background-color: #f2f2f2;
  background-image: url("../img/billie-holiday-speck.png");
}

.with-group-sections.disabled .overlap .tabs .selected,
.with-group-sections.disabled .overlap .tabs .is-active,
.paper-page.disabled .overlap .tabs .selected,
.paper-page.disabled .overlap .tabs .is-active {
  background: #cccccc;
}

.with-group-sections.disabled .overlap .tabs .selected a,
.with-group-sections.disabled .overlap .tabs .is-active a,
.paper-page.disabled .overlap .tabs .selected a,
.paper-page.disabled .overlap .tabs .is-active a {
  color: #333333;
}

.with-group-sections .overlap + .page-wrapper,
.paper-page .overlap + .page-wrapper {
  padding-top: 0.5rem;
}

.with-group-sections .page-wrapper .group-section,
.with-group-sections .page-wrapper .card,
.paper-page .page-wrapper .group-section,
.paper-page .page-wrapper .card {
  width: auto;
  position: relative;
  margin: 0 0.65rem 1rem 0.5rem;
}

.with-group-sections .page-wrapper .group-section.ghost,
.with-group-sections .page-wrapper .card.ghost,
.paper-page .page-wrapper .group-section.ghost,
.paper-page .page-wrapper .card.ghost {
  border-radius: 6px;
}

.with-group-sections .page-wrapper.error .group-section.ghost,
.with-group-sections .page-wrapper.error .card.ghost,
.paper-page .page-wrapper.error .group-section.ghost,
.paper-page .page-wrapper.error .card.ghost {
  background-color: #e7ced1;
}

.with-group-sections .page-wrapper.warning .group-section.ghost,
.with-group-sections .page-wrapper.warning .card.ghost,
.paper-page .page-wrapper.warning .group-section.ghost,
.paper-page .page-wrapper.warning .card.ghost {
  background-color: #eaddce;
}

.with-group-sections .page-wrapper.success .group-section.ghost,
.with-group-sections .page-wrapper.success .card.ghost,
.paper-page .page-wrapper.success .group-section.ghost,
.paper-page .page-wrapper.success .card.ghost {
  background-color: #c9e8d6;
}

.with-group-sections .page-wrapper.info .group-section.ghost,
.with-group-sections .page-wrapper.info .card.ghost,
.paper-page .page-wrapper.info .group-section.ghost,
.paper-page .page-wrapper.info .card.ghost {
  background-color: #e1e1e1;
}

.with-group-sections .page-wrapper.highlighted .group-section.ghost,
.with-group-sections .page-wrapper.highlighted .card.ghost,
.paper-page .page-wrapper.highlighted .group-section.ghost,
.paper-page .page-wrapper.highlighted .card.ghost {
  background-color: #cae1e7;
}

.with-group-sections .page-wrapper.disabled .group-section.ghost,
.with-group-sections .page-wrapper.disabled .card.ghost,
.paper-page .page-wrapper.disabled .group-section.ghost,
.paper-page .page-wrapper.disabled .card.ghost {
  background-color: #e6e6e6;
}

.colored-paper {
  background-image: url("../img/construction-paper.png");
  background-color: #198dae;
}

.colored-paper h1,
.colored-paper h2,
.colored-paper h3,
.colored-paper h4,
.colored-paper h5,
.colored-paper h6,
.colored-paper p {
  color: #fff;
}

.colored-paper.secondary h1,
.colored-paper.secondary h2,
.colored-paper.secondary h3,
.colored-paper.secondary h4,
.colored-paper.secondary h5,
.colored-paper.secondary h6,
.colored-paper.secondary p {
  color: #333333;
}

.colored-paper.error {
  background-color: #c32231;
  color: #fff;
}

.colored-paper.error h1,
.colored-paper.error h2,
.colored-paper.error h3,
.colored-paper.error h4,
.colored-paper.error h5,
.colored-paper.error h6,
.colored-paper.error p {
  color: #fff;
}

.colored-paper.warning {
  background-color: #e08514;
  color: #fff;
}

.colored-paper.warning h1,
.colored-paper.warning h2,
.colored-paper.warning h3,
.colored-paper.warning h4,
.colored-paper.warning h5,
.colored-paper.warning h6,
.colored-paper.warning p {
  color: #fff;
}

.colored-paper.success {
  background-color: #14b057;
  color: #fff;
}

.colored-paper.success h1,
.colored-paper.success h2,
.colored-paper.success h3,
.colored-paper.success h4,
.colored-paper.success h5,
.colored-paper.success h6,
.colored-paper.success p {
  color: #fff;
}

.colored-paper.info {
  background-color: #a6a6a6;
  color: #333333;
}

.colored-paper.info h1,
.colored-paper.info h2,
.colored-paper.info h3,
.colored-paper.info h4,
.colored-paper.info h5,
.colored-paper.info h6,
.colored-paper.info p {
  color: #333333;
}

.colored-paper.highlighted {
  background-color: #198dae;
  color: #fff;
}

.colored-paper.highlighted h1,
.colored-paper.highlighted h2,
.colored-paper.highlighted h3,
.colored-paper.highlighted h4,
.colored-paper.highlighted h5,
.colored-paper.highlighted h6,
.colored-paper.highlighted p {
  color: #fff;
}

.colored-paper.disabled {
  background-color: #cccccc;
  color: #333333;
}

.colored-paper.disabled h1,
.colored-paper.disabled h2,
.colored-paper.disabled h3,
.colored-paper.disabled h4,
.colored-paper.disabled h5,
.colored-paper.disabled h6,
.colored-paper.disabled p {
  color: #333333;
}

.colored-paper.error .tabs li {
  background-color: #f7cfd3;
}

.colored-paper.error .tabs li:hover {
  background-color: #f0abb2;
}

.colored-paper.warning .tabs li {
  background-color: #fbe7ce;
}

.colored-paper.warning .tabs li:hover {
  background-color: #f7d5aa;
}

.colored-paper.success .tabs li {
  background-color: #c7f9dc;
}

.colored-paper.success .tabs li:hover {
  background-color: #9cf4c2;
}

.colored-paper.info .tabs li {
  background-color: #ededed;
}

.colored-paper.info .tabs li:hover {
  background-color: #e0e0e0;
}

.colored-paper.highlighted .tabs li {
  background-color: #c9edf7;
}

.colored-paper.highlighted .tabs li:hover {
  background-color: #a0dff1;
}

.colored-paper.disabled .tabs li {
  background-color: whitesmoke;
}

.colored-paper.disabled .tabs li:hover {
  background-color: #ededed;
}

.card.ghost .colored-paper,
.colored-paper .group-section.ghost {
  background-image: url("../img/construction_paper_grey.png");
  border-radius: 7.5px !important;
  margin: 0 !important;
}

.colored-paper .tabs {
  border: 0 none;
  background-color: transparent;
}

.colored-paper .tabs li {
  border-radius: 0.4em;
  display: inline-block;
  margin: 0.4em 0.05em 0.3em;
  vertical-align: bottom;
  background-color: #c9edf7;
  padding: 0.2em 0.3em;
}

.colored-paper .tabs li:hover {
  background-color: #a0dff1;
}

.colored-paper .tabs li.selected,
.colored-paper .tabs li:hover.selected {
  border-radius: 0.5em;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-bottom: 0;
  vertical-align: bottom;
  padding: 0.4em;
  background-color: #fff;
}

.radius.group-section .colored-paper:first-child,
.radius.card .colored-paper:first-child,
.radius.group-section .colored-paper:last-child,
.radius.card .colored-paper:last-child {
  border-radius: 6px;
}

.radius-bottom.group-section .colored-paper:last-child,
.radius-bottom.card .colored-paper:last-child {
  border-radius: 0 0 6px 6px;
}

.radius-top.group-section .colored-paper:first-child,
.radius-top.card .colored-paper:first-child {
  border-radius: 6px 6px 0 0;
}

.full-row,
.full-col {
  overflow: hidden;
  position: absolute;
}

.full-row {
  left: 0;
  right: 0;
}

.full-col {
  top: 0;
  bottom: 0;
}

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

.scroll-y {
  overflow-y: auto;
}

.mobile-offcanvas-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.mobile-offcanvas-wrapper .split-layout {
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible;
}

.mobile-offcanvas-wrapper .split-layout.navOn {
  -webkit-transform: translateX(83.33333%);
  transform: translateX(83.33333%);
  transform: translate3d(83.33333%, 0, 0);
  -webkit-transform: translate3d(83.33333%, 0, 0);
}

.mobile-offcanvas-wrapper .split-layout .split-sidebar {
  display: block;
  width: 83.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  right: auto;
  position: absolute;
}

@media screen and (min-width: 40em) {
  .mobile-offcanvas-wrapper .split-layout .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.mobile-offcanvas-wrapper
  .split-layout
  .split-sidebar:last-child:not(:first-child) {
  float: right;
}

.mobile-offcanvas-wrapper .split-layout.reverse.navOn {
  -webkit-transform: translateX(-83.33333%);
  transform: translateX(-83.33333%);
  transform: translate3d(-83.33333%, 0, 0);
  -webkit-transform: translate3d(-83.33333%, 0, 0);
}

.mobile-offcanvas-wrapper .split-layout.reverse .split-sidebar {
  position: absolute;
  right: -83.33333%;
  left: auto;
}

.mobile-offcanvas-wrapper .split-layout.small,
.mobile-offcanvas-wrapper .split-layout.small.navOn {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

@media screen and (min-width: 40em) {
  .mobile-offcanvas-wrapper .split-layout.medium,
  .mobile-offcanvas-wrapper .split-layout.medium.navOn,
  .mobile-offcanvas-wrapper .split-layout.small,
  .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@media screen and (min-width: 64em) {
  .mobile-offcanvas-wrapper .split-layout.large,
  .mobile-offcanvas-wrapper .split-layout.large.navOn,
  .mobile-offcanvas-wrapper .split-layout.medium,
  .mobile-offcanvas-wrapper .split-layout.medium.navOn,
  .mobile-offcanvas-wrapper .split-layout.small,
  .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@media screen and (min-width: 75em) {
  .mobile-offcanvas-wrapper .split-layout.xlarge,
  .mobile-offcanvas-wrapper .split-layout.xlarge.navOn,
  .mobile-offcanvas-wrapper .split-layout.large,
  .mobile-offcanvas-wrapper .split-layout.large.navOn,
  .mobile-offcanvas-wrapper .split-layout.medium,
  .mobile-offcanvas-wrapper .split-layout.medium.navOn,
  .mobile-offcanvas-wrapper .split-layout.small,
  .mobile-offcanvas-wrapper .split-layout.small.navOn {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.page-wrapper > .split-layout {
  margin: -1rem -0.5rem;
}

@media only screen and (min-width: 767px) {
  .page-wrapper > .split-layout {
    margin: -1.5rem -0.75rem;
  }
}

@media only screen and (min-width: 1024px) {
  .page-wrapper > .split-layout {
    margin: -2rem -1rem -3rem;
  }
}

.split-layout {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  clear: both;
}

.split-layout::before,
.split-layout::after {
  content: " ";
  display: table;
}

.split-layout::after {
  clear: both;
}

.split-layout .split-sidebar,
.split-layout .split-content {
  margin-bottom: -9998px;
  padding-bottom: 9998px;
}

.split-layout.fill-page-height .split-content {
  min-height: 100vh;
  margin-bottom: 0px;
  padding-bottom: 1em;
}

.split-layout .split-sidebar {
  display: none;
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  left: -83.33333%;
  border: #b3b3b3 solid 0;
  border-right-width: 1px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (min-width: 40em) {
  .split-layout .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.split-layout .split-sidebar:last-child:not(:first-child) {
  float: right;
}

.split-layout .split-content {
  width: 100%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (min-width: 40em) {
  .split-layout .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.split-layout .split-content:last-child:not(:first-child) {
  float: right;
}

.split-layout.xlarge.reverse .split-sidebar,
.split-layout.xlarge.reverse .split-content,
.split-layout.xlarge.reverse.navOn .split-sidebar,
.split-layout.xlarge.reverse.navOn .split-content,
.split-layout.large.reverse .split-sidebar,
.split-layout.large.reverse .split-content,
.split-layout.large.reverse.navOn .split-sidebar,
.split-layout.large.reverse.navOn .split-content,
.split-layout.medium.reverse .split-sidebar,
.split-layout.medium.reverse .split-content,
.split-layout.medium.reverse.navOn .split-sidebar,
.split-layout.medium.reverse.navOn .split-content,
.split-layout.small.reverse .split-sidebar,
.split-layout.small.reverse .split-content,
.split-layout.small.reverse.navOn .split-sidebar,
.split-layout.small.reverse.navOn .split-content,
.split-layout.reverse .split-sidebar,
.split-layout.reverse .split-content,
.split-layout.reverse.navOn .split-sidebar,
.split-layout.reverse.navOn .split-content {
  float: right !important;
}

.split-layout.xlarge.reverse .split-sidebar,
.split-layout.xlarge.reverse.navOn .split-sidebar,
.split-layout.large.reverse .split-sidebar,
.split-layout.large.reverse.navOn .split-sidebar,
.split-layout.medium.reverse .split-sidebar,
.split-layout.medium.reverse.navOn .split-sidebar,
.split-layout.small.reverse .split-sidebar,
.split-layout.small.reverse.navOn .split-sidebar,
.split-layout.reverse .split-sidebar,
.split-layout.reverse.navOn .split-sidebar {
  border-right-width: 0;
  border-left-width: 1px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.split-layout.xlarge.reverse .split-content,
.split-layout.xlarge.reverse.navOn .split-content,
.split-layout.large.reverse .split-content,
.split-layout.large.reverse.navOn .split-content,
.split-layout.medium.reverse .split-content,
.split-layout.medium.reverse.navOn .split-content,
.split-layout.small.reverse .split-content,
.split-layout.small.reverse.navOn .split-content,
.split-layout.reverse .split-content,
.split-layout.reverse.navOn .split-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.split-layout.small .split-sidebar {
  display: block;
  width: 41.66667%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 40em) {
  .split-layout.small .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.split-layout.small .split-sidebar:last-child:not(:first-child) {
  float: right;
}

.split-layout.small .split-content {
  display: block;
  width: 58.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 40em) {
  .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.split-layout.small .split-content:last-child:not(:first-child) {
  float: right;
}

@media screen and (min-width: 40em) {
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    position: relative;
    left: 0;
    right: 0;
    display: block;
    width: 33.33333%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 40em) and (min-width: 40em) {
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 40em) {
  .split-layout.medium .split-sidebar:last-child:not(: first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(: first-child), .split-layout.small .split-sidebar:last-child:not(: first-child), .split-layout.small.reverse .split-sidebar:last-child:not(: first-child) {
    float: right;
  }
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    display: block;
    width: 66.66667%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 40em) and (min-width: 40em) {
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 40em) {
  .split-layout.medium .split-content:last-child:not(: first-child), .split-layout.small .split-content:last-child:not(: first-child) {
    float: right;
  }
}

@media screen and (min-width: 64em) {
  .split-layout.large .split-sidebar,
  .split-layout.large.reverse .split-sidebar,
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    display: block;
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 64em) and (min-width: 40em) {
  .split-layout.large .split-sidebar,
  .split-layout.large.reverse .split-sidebar,
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 64em) {
  .split-layout.large .split-sidebar:last-child:not(: first-child), .split-layout.large.reverse .split-sidebar:last-child:not(: first-child), .split-layout.medium .split-sidebar:last-child:not(: first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(: first-child), .split-layout.small .split-sidebar:last-child:not(: first-child), .split-layout.small.reverse .split-sidebar:last-child:not(: first-child) {
    float: right;
  }
  .split-layout.large .split-content,
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    display: block;
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 64em) and (min-width: 40em) {
  .split-layout.large .split-content,
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 64em) {
  .split-layout.large .split-content:last-child:not(: first-child), .split-layout.medium .split-content:last-child:not(: first-child), .split-layout.small .split-content:last-child:not(: first-child) {
    float: right;
  }
}

@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-sidebar,
  .split-layout.xlarge.reverse .split-sidebar,
  .split-layout.large .split-sidebar,
  .split-layout.large.reverse .split-sidebar,
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    display: block;
    width: 25%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 75em) and (min-width: 40em) {
  .split-layout.xlarge .split-sidebar,
  .split-layout.xlarge.reverse .split-sidebar,
  .split-layout.large .split-sidebar,
  .split-layout.large.reverse .split-sidebar,
  .split-layout.medium .split-sidebar,
  .split-layout.medium.reverse .split-sidebar,
  .split-layout.small .split-sidebar,
  .split-layout.small.reverse .split-sidebar {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-sidebar:last-child:not(: first-child), .split-layout.xlarge.reverse .split-sidebar:last-child:not(: first-child), .split-layout.large .split-sidebar:last-child:not(: first-child), .split-layout.large.reverse .split-sidebar:last-child:not(: first-child), .split-layout.medium .split-sidebar:last-child:not(: first-child), .split-layout.medium.reverse .split-sidebar:last-child:not(: first-child), .split-layout.small .split-sidebar:last-child:not(: first-child), .split-layout.small.reverse .split-sidebar:last-child:not(: first-child) {
    float: right;
  }
  .split-layout.xlarge .split-content,
  .split-layout.large .split-content,
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    display: block;
    width: 75%;
    float: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 75em) and (min-width: 40em) {
  .split-layout.xlarge .split-content,
  .split-layout.large .split-content,
  .split-layout.medium .split-content,
  .split-layout.small .split-content {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

@media screen and (min-width: 75em) {
  .split-layout.xlarge .split-content:last-child:not(: first-child), .split-layout.large .split-content:last-child:not(: first-child), .split-layout.medium .split-content:last-child:not(: first-child), .split-layout.small .split-content:last-child:not(: first-child) {
    float: right;
  }
}

.with-group-sections .split-sidebar {
  background-color: #fff;
}

/**
* Split Layout:
* `.mobile-offcanvas-wrapper` - This is a structural container for content and sidebar. Change the switch point where the side bar disapears by adding `.large`,`.medium`, or `.small`. 
* 
*   @example
*	<div class="mobile-offcanvas-wrapper">
*	<section class="split-layout medium navOn">
*	<aside class="split-sidebar">
*	<h2>Sidebar</h2>
*	<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
*	</aside>
*	<article class="split-content page with-group-sections">
*	<div class="page-wrapper">
*	<div class="content-padding"><h1>Outside of the Group Section<span class="sub-line">I need to be wrapped by a div.content-padding to line up</span>
*	</h1></div>
*	<div class="card">
*		<div class="colored-paper"><h3>Inside of a "Card" on "Colored Paper"</h3>
*			<p>Some extra content in the content area</p></div>
*			<p>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
*	</div></div>
*	</article>
*	</section>
*	</div>
*/

/**
* Mobile Header:
* `.header.pagel` - there is a basic layout of short tabbed header of apps
* 
*   @example
*	<div class="row"><header class="header page">
*		<a href="#!/content/calculator/" class="logo">
*			<img  src="assets/img/headerlogo.svg" alt="ACC Statin Intolerance Guidelines">
*		</a>
*		<ul class="nav tabs tabs-primary">
*			<li class="icon tab-title"><a class="home"><i class="fa fa-holder"></i></a></li>
*			<li id="calculator-Tab" class="selected tab-title"><a href="#!/content/calculator/"  class="condensable condensable-word small">Eval<span class="condense">uate</span></a></li>
*			<li id="recommendation-Tab" class=" tab-title"><a href="#!/content/recommendation/prescribinginfo/"  class="condensable condensable-word small">Recommend<span class="condense">ation</span></a></li>
*		</ul>
*	</header></div>
*/

.page.header {
  border-bottom: #00386b 6px solid;
  padding: 0;
  background-color: #fff;
  display: block;
  clear: both;
  width: 100%;
  position: relative;
}

.page.header:after {
  content: "";
  display: table;
  clear: both;
}

.page.header .logo {
  left: 0;
  top: 0;
  display: none;
  text-align: right;
  clear: none;
  float: left;
  vertical-align: middle;
}

@media only screen and (min-width: 767px) {
  .page.header .logo {
    display: inline-block;
  }
}

.page.header .logo img {
  height: 60px;
}

@media only screen and (min-width: 1024px) {
  .page.header .logo img {
    height: 70px;
    margin: 10px 10px 0 0;
  }
}

@media only screen and (min-width: 1200px) {
  .page.header .logo img {
    height: 85px;
    margin: 10px 10px 0 0;
  }
}

.page.header .tabs {
  clear: none;
}

@media only screen and (min-width: 767px) {
  .page.header .tabs {
    float: right;
    width: auto;
  }
}

/**
* Mobile Footer:
* `.footer.page` - there is a basic layout of short tabbed footer for mobile apps
* 
*   @example
*	<footer class="page footer">
*		<a href="#!/content/home/" class="logo" >
*			<img style="border:none 0; " src="assets/img/footerlogo.svg" alt="ACC Statin Intolerance Guidelines">
*		</a>
*		<ul class="nav tabs tabs-primary reverse swappable small">
*			<li id="guideline-Tab" class="">
*				<a href="#!/content/guideline/home">
*					<span class="short-text">Resources</span>
*					<span class="long-text">Resources</span>
*				</a>
*			</li>
*			<li id="legal-Tab" class="selected">
*				<a href="#!/content/legal">
*				<span class="short-text">Disclaimer</span>
*				<span class="long-text">Disclaimer</span>
*				</a>
*			</li>
*			<li id="about-Tab" class="">
*				<a href="#!/content/about">
*				<span class="short-text">About</span>
*				<span class="long-text">About the App</span>
*				</a>
*			</li>
*		</ul>
*	</footer>
*/

.page.footer {
  border-top: #00386b 4px solid;
  background: url("../img/crossed_stripes.png");
}

.page.footer:after {
  content: "";
  display: table;
  clear: both;
}

.page.footer .tabs {
  float: right;
  width: auto;
}

.page.footer .logo img {
  margin: 0.25rem 1rem;
  display: none;
}

.page.footer .tabs.primary li.selected {
  border-top-color: #00386b;
}

.page.footer .tabs.primary li.selected a:after {
  border-top-color: #00386b;
}

@media only screen and (max-width: 767px) {
  .page.footer {
    text-align: right;
  }
  .page.footer .logo img {
    display: block;
    width: 320px;
  }
  .page.footer .tabs {
    width: 100%;
    margin: 0;
  }
  .page.footer .logo {
    display: block;
    border-bottom: #00386b 4px solid;
  }
  .page.footer .logo:after {
    content: "";
    display: table;
    clear: both;
  }
  .page.footer .logo img {
    max-width: 95%;
    margin: 0.25rem 2.5%;
  }
}

@media only screen and (max-width: 1024px) {
  .page.footer .tabs {
    font-weight: 500;
  }
}

@media only screen and (min-width: 1024px) {
  .page.footer {
    text-align: center;
  }
  .page.footer .tabs.tabs-primary.reverse {
    float: none;
    display: inline-block;
  }
  .page.footer .tabs.tabs-primary.reverse li {
    float: none;
    display: inline-block;
  }
  .page.footer .tabs.tabs-primary.reverse,
  .page.footer .tabs.tabs-primary.reverse li {
    background-color: transparent;
    border: 0;
  }
  .page.footer .tabs.tabs-primary.reverse a,
  .page.footer .tabs.tabs-primary.reverse li a {
    color: #fff;
  }
  .page.footer .tabs.tabs-primary.reverse a:after,
  .page.footer .tabs.tabs-primary.reverse li a:after {
    top: auto;
    bottom: -1px;
    border-width: 0px 8px;
    border-bottom: 10px solid #fff;
  }
  .page.footer .tabs.tabs-primary.reverse a:hover,
  .page.footer .tabs.tabs-primary.reverse li a:hover {
    text-decoration: underline;
  }
}

.page-footer {
  border-top: #666666 4px solid;
  background-color: #b3b3b3;
}

.page-footer .logo-holder {
  width: 100%;
  display: block;
  padding: 1rem 1rem 1rem 1rem;
}

.page-footer .logo {
  height: 50px;
}

.page-footer h3 {
  font-size: 1.57143em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .page-footer h3 {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .page-footer h3 {
    line-height: 1.51455em;
  }
}

.page-footer h4 {
  margin-left: 0;
  font-family: "Roboto Slab", "Times New Roman", "Lucida Bright", Georgia, serif;
  font-weight: 400;
}

.page-footer ul {
  margin-left: 0;
  list-style: none;
}

.page-footer * {
  color: #666666;
}

.page-footer .language-picker {
  display: none;
}

.footer-darker {
  background-color: #666666;
  margin-bottom: 2rem;
  padding: 1rem;
  background: url("../img/crossed_stripes.png");
}

@media only screen and (min-width: 767px) {
  .footer-darker {
    padding: 2rem 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .footer-darker {
    margin-right: -2rem;
  }
}

.footer-darker * {
  color: #fff;
}

.footer-darker section + section,
.footer-darker .section + .section {
  margin-top: 1rem;
}

.address ul {
  display: inline-block;
  width: auto;
  float: left;
  padding-right: 1.67rem;
  margin-bottom: 0;
}

.address li {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  .address li {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  .address li {
    line-height: 1.19em;
  }
}

.acc-websites .nav-list.small li,
.acc-websites .small.panel-selector li {
  border-color: #4d4d4d;
}

.acc-websites .nav-list.small li:hover,
.acc-websites .small.panel-selector li:hover {
  background-color: #595959;
}

.icon-only {
  display: inline-block;
  text-decoration: none;
  color: #333333;
}

.icon-only .text {
  display: none;
}

button.twitter,
.button.twitter {
  background-color: #00aced;
  color: #fff;
}

button.twitter:hover,
button.twitter:focus,
.button.twitter:hover,
.button.twitter:focus {
  background-color: #157894;
  color: #fff;
}

button.facebook,
.button.facebook {
  background-color: #3b5998;
  color: #fff;
}

button.facebook:hover,
button.facebook:focus,
.button.facebook:hover,
.button.facebook:focus {
  background-color: #157894;
  color: #fff;
}

button.linkedin,
.button.linkedin {
  background-color: #007bb6;
  color: #fff;
}

button.linkedin:hover,
button.linkedin:focus,
.button.linkedin:hover,
.button.linkedin:focus {
  background-color: #157894;
  color: #fff;
}

button.googleplus,
.button.googleplus {
  background-color: #dd4b39;
  color: #fff;
}

button.googleplus:hover,
button.googleplus:focus,
.button.googleplus:hover,
.button.googleplus:focus {
  background-color: #157894;
  color: #fff;
}

button.youtube,
.button.youtube {
  background-color: #bb0000;
  color: #fff;
}

button.youtube:hover,
button.youtube:focus,
.button.youtube:hover,
.button.youtube:focus {
  background-color: #157894;
  color: #fff;
}

button.block,
.button.block {
  width: 100%;
  text-align: left;
  min-width: 16px;
  min-width: 1rem;
}

button.block i,
.button.block i {
  float: right;
}

.social-buttons ul {
  display: block;
  list-style: none;
  width: 100%;
  max-width: 500px;
}

.social-buttons li {
  float: left;
  display: inline-block;
  padding: 0 1% 5px 0;
  width: 20%;
}

.social-buttons a {
  font-size: 1.25rem;
}

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

.language-picker li {
  display: inline-block;
}

.language-picker label,
.language-picker h4 {
  height: 1.3rem;
  font-size: 1rem;
  padding: 0.15rem;
  margin: 0;
}

.language-picker input {
  margin: 0 0.15rem 0 0.3rem;
}

/*cite {
  height: 1.3rem;
  font-size: 1rem;
  padding: .15rem;
}*/

@media only screen and (max-width: 767px) {
  .page-footer {
    padding-right: 2rem;
  }
  .page-footer ul {
    width: 100%;
    position: relative;
  }
}

/**
* Website Footer (Lite):
* `footer` - the ACC.org footer is very large and has many moving parts this is the shorter lighter version for applications
* 
*   @example
*   <footer class="page-footer">
*		<div class="row">
*			<a href="/"><img class="logo" src="Assets/img/oma-01.svg" alt="Home"></a>
*		</div>
*		<div class="footer-darker">
*			<div class="row">
*				<div class="columns large-8">
*					<section class="address row">
*						<h3>American College of Cardiology</h3>
*						<address>
*							<!-- http://microformats.org/wiki/hcard -->
*							<h4>Heart House</h4>
*							<ul>
*								<li> <span class="street-address">2400 N. St. NW</span></li>
*								<li> <span class="locality">Washington</span>, <span class="country-name"><abbr title="District of Colombia">DC</abbr></span> <span class="postal-code">20037</span></li>
*								<li> <a href="mailto:resource@acc.org" class="email"><strong>Email:</strong> resource@acc.org</a></li>
*							</ul>
*							<ul>
*								<li><span tel="+12023756000" class="tel"><strong>Phone:</strong> (202) 375-6000, ext. 5603</span></li>
*								<li><span tel="+18002574737" class="tel"><strong>Toll Free:</strong> (800) 253-4636, ext. 5603</span></li>
*								<li> <span fax="+12023757000" class="fax"><strong>Fax:</strong>(202) 375-7000</span></li>
*							</ul>
*						</address>
*					</section>
*					<section class="social-buttons row">
*						<h4>Stay Connected</h4>
*						<ul>
*							<li>
*								<a class="button twitter icon-only block" href="https://twitter.com/accintouch" target="_blank">
*									<i class="fa fa-twitter"></i>
*									<span class="text">Twitter</span>
*								</a>
*							</li>
*							<li>
*								<a class="button facebook icon-only block" href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank">
*									<span class="text">Facebook</span><i class="fa fa-facebook"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button linkedin icon-only block" href="http://www.linkedin.com/groups/American-College-Cardiology-732607?trk=myg_ugrp_ovr" target="_blank">
*									<span class="text">LinkedIn</span><i class="fa fa-linkedin"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button googleplus icon-only block" href="https://plus.google.com/118164094874227618578/about" target="_blank">
*									<span class="text">Google+</span><i class="fa fa-google-plus"></i>
*								</a>
*							</li>
*							<li>
*								<a class="button youtube icon-only block" href="http://www.youtube.com/user/ACCinTouch" target="_blank">
*									<span class="text">Youtube</span><i class="fa fa-youtube-play"></i>
*								</a>
*							</li>
*						</ul>
*					</section>
*				</div>
*				<div class="columns large-4">
*					<section class="acc-websites row ">
*						<h4>Powered By the ACC</h4>
*						<nav class="nav-list small">
*						<ul class="">
*							<li><a target="_blank" class="" href="http://www.acc.org"><span class="text">Acc.org </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://cvquality.acc.org/"><span class="text">ACC Quality Improvement for Institutions</span> <i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://www.ncdr.com"><span class="text">NCDR.com </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://www.cardiosmart.org"><span class="text">CardioSmart.org </span><i class="fa fa-external-link-square"></i></a></li>
*							<li><a target="_blank" class="" href="http://blog.cardiosource.org"><span class="text">ACCinTouch.com </span><i class="fa fa-external-link-square"></i></a></li>
*						</ul>
*						</nav>
*					</section>
*				</div>
*			</div>
*		</div>
*		<div class="row">
*			<div class="large-4 columns">
*				<h5><cite>&copy; 2015 American College of Cardiology</cite></h5>
*			</div>
*			<div class="large-8 columns">
*			</div>
*		</div>
*	</footer>
**/

.sticky-button-bar {
  position: relative;
}

.stuck-footer .sticky-button-bar.footer,
.stuck-header .sticky-button-bar.header {
  width: 100%;
  background: url(billie-holiday-spec.png) #f2f2f2;
  -webkit-box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.5em 0;
  z-index: 10000;
}

.stuck-footer .sticky-button-bar.footer .button,
.stuck-header .sticky-button-bar.header .button {
  margin-bottom: 0;
}

.stuck-footer .sticky-button-bar.footer {
  bottom: 0;
  border-top: 1px solid #77d2eb;
}

.stuck-header .sticky-button-bar.header {
  top: 0;
  border-bottom: 1px solid #77d2eb;
}

/**
* Sticky Button Bar:
* `body.stuck-footer .footer.sticky-button-bar` -  Sticky button bars are made for moving a collection of buttons  to a fixed bar in the window so it is either always fixed or with 'waypoint.js' you can make it fixed if it is not with in the viewport. Making it sticky moves the bar into a fixed possition out of its normal flow so it can be on seen when it is below the fold.  This ui element need to be combined with waypoint to trigger .footer-stuck or .header-stuck on the body to toggle the sticky effect on and off at appropriate times. 
* 
*   @example
*	<div class="footer sticky-button-bar"><div class="row">
*		<div class="pull-right"><a class="secondary button" href="#">Secondary Button</a><a class="button" href="#">Action Button</a></div>
*	</div></div>
*/

/* latin-ext */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"),
    url(https://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsD86pq2NkPzVgw_9lpT6RGI.woff2)
      format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F,
    U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"),
    url(https://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsDAdhzWOYhqHvOZMRGaEyPo.woff2)
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.score-bar .text-bold {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 700;
}

.score-bar .text-condensed {
  font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", Helvetica,
    Arial, sans-serif;
  font-weight: 400;
}

.score-bar .text-condensed-bold {
  font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", Helvetica,
    Arial, sans-serif;
  font-weight: 700;
}

.score-bar .text-light {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 300;
}

.score-bar .small-fs-1x {
  font-size: 1em;
  line-height: 1em;
}

.score-bar .small-fs-2x {
  font-size: 1.5em;
  line-height: 1em;
}

.score-bar .small-fs-3x {
  font-size: 2em;
  line-height: 1em;
}

.score-bar .small-fs-4x {
  font-size: 2.5em;
  line-height: 1em;
}

.score-bar .small-fs-5x {
  font-size: 3em;
  line-height: 1em;
}

.score-bar .small-fs-6x {
  font-size: 4em;
  line-height: 1em;
}

@media only screen and (min-width: 767px) {
  .score-bar .medium-fs-1x {
    font-size: 1em;
    line-height: 1em;
  }
  .score-bar .medium-fs-2x {
    font-size: 1.5em;
    line-height: 1em;
  }
  .score-bar .medium-fs-3x {
    font-size: 2em;
    line-height: 1em;
  }
  .score-bar .medium-fs-4x {
    font-size: 2.5em;
    line-height: 1em;
  }
  .score-bar .medium-fs-5x {
    font-size: 3em;
    line-height: 1em;
  }
  .score-bar .medium-fs-6x {
    font-size: 4em;
    line-height: 1em;
  }
}

@media only screen and (min-width: 1024px) {
  .score-bar .large-fs-1x {
    font-size: 1em;
    line-height: 1em;
  }
  .score-bar .large-fs-2x {
    font-size: 1.5em;
    line-height: 1em;
  }
  .score-bar .large-fs-3x {
    font-size: 2em;
    line-height: 1em;
  }
  .score-bar .large-fs-4x {
    font-size: 2.5em;
    line-height: 1em;
  }
  .score-bar .large-fs-5x {
    font-size: 3em;
    line-height: 1em;
  }
  .score-bar .large-fs-6x {
    font-size: 4em;
    line-height: 1em;
  }
}

.tertiary-color {
  background-color: #1c84a2;
  color: #fff;
  border-color: #fff;
}

.sticky-wrapper {
  margin-bottom: -1em;
}

.score-bar-holder {
  width: 100%;
  background-color: #198dae;
  display: block;
  font-size: 10px;
}

.score-bar-holder .score-bar {
  -moz-transition: padding 0.5s ease;
  -webkit-transition: padding 0.5s ease;
  -o-transition: padding 0.5s ease;
  transition: padding 0.5s ease;
  -moz-transition: font-size 0.5s ease;
  -webkit-transition: font-size 0.5s ease;
  -o-transition: font-size 0.5s ease;
  transition: font-size 0.5s ease;
  overflow: hidden;
}

.score-bar-holder .data-container {
  margin: 0;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: -200px;
  padding-bottom: 200px;
}

.score-bar-holder .data-container.primary-color {
  background-color: #198dae;
  color: #fff;
  border-color: #fff;
}

.score-bar-holder .data-container.secondary-color {
  background-color: #217289;
  color: #fff;
  border-color: #fff;
}

.score-bar-holder .data-container.tertiary-color {
  background-color: #1c84a2;
  color: #fff;
  border-color: #fff;
}

.shrink.stuck .score-bar-holder {
  font-size: 9px;
}

.shrink.stuck .score-bar-holder .data-container {
  padding-top: 4.5px;
  padding-right: 4.5px;
  padding-left: 4.5px;
}

@media only screen and (min-height: 320px) {
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 6.75px;
    padding-right: 6.75px;
    padding-left: 6.75px;
  }
}

@media only screen and (min-height: 480px) {
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 9px;
    padding-right: 9px;
    padding-left: 9px;
  }
}

@media only screen and (min-width: 767px) {
  .shrink.stuck .score-bar-holder {
    font-size: 9px 0.5;
  }
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 9px 0.5;
    padding-right: 9px 0.5;
    padding-left: 9px 0.5;
  }
}

@media only screen and (min-width: 1024px) {
  .shrink.stuck .score-bar-holder {
    font-size: 10px;
  }
  .shrink.stuck .score-bar-holder .data-container {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

.sticky-holder.stuck {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

.data-group {
  padding: 0.1em 0.25em 0.1em;
}

@media only screen and (min-width: 767px) {
  .data-group {
    padding: 0.25em 0.5em 0.5em;
  }
}

.data-group + .data-group,
.data-header + .data-group {
  border-style: dotted;
  border-width: 0px;
  border-top-width: 1px;
}

@media only screen and (min-width: 767px) {
  .data-group + .data-group,
  .data-header + .data-group {
    border-left-width: 0;
    border-top-width: 1px;
  }
  .shrink .data-group + .data-group,
  .shrink .data-header + .data-group {
    border-left-width: 1px;
    border-top-width: 0px;
  }
}

@media only screen and (min-width: 767px) {
  .shrink .data-group + .data-group {
    padding-left: 1em;
  }
  .shrink .data-header + .data-group {
    border-left-width: 0px;
  }
}

.data {
  padding-bottom: 1em;
}

@media only screen and (min-width: 767px) {
  .data-header {
    max-width: 30em;
  }
}

.shrink .data-header {
  padding-bottom: 0.25em;
  width: 100%;
}

@media only screen and (min-width: 767px) {
  .shrink .data-header {
    max-width: 26em;
  }
}

.data-group {
  display: table;
}

@media only screen and (min-width: 767px) {
  .data-group {
    max-width: 30em;
  }
}

.data-group .data-value,
.data-group .data-label {
  display: table-cell;
}

.data-group .data-value {
  width: 10%;
  vertical-align: top;
}

.data-group .data-label {
  vertical-align: top;
  padding-left: 0.5rem;
}

@media only screen and (min-width: 767px) {
  .shrink .data-group {
    max-width: 26em;
    width: 50%;
    float: left;
  }
  .shrink .data-group.content-block {
    width: 100%;
    padding-left: 0;
    border-left-width: 0;
    max-width: 48em;
  }
}

@media only screen and (max-width: 767px) {
  .shrink .tabs.tabs-primary li a {
    padding: 0.1em 0.5em;
  }
}

/**
* Sticky Headers with Scorebars:
* `.data-display` -
*
*   @example
*   <div class="data-display">
*       <header class="header page">
*           <a href="#!/content/calculator/" class="logo"><img src="assets/img/headerlogo.svg"  alt="ACC Statin Intolerance Guidelines"></a>
*           <ul class="nav tabs tabs-primary condensable condensable-word small">
*               <li class="icon"><a class="home">  <i class="fa fa-holder"></i></a></li>
*               <li id="calculator-Tab" class="selected"><a href="#!/content/calculator/">Eval  <span class="condense">uate</span></a></li>
*               <li id="recommendation-Tab" class=""><a href="#!/content/recommendation/prescribinginfo/" >Recommend  <span class="condense">ation</span></a></li>
*           </ul>
*       </header>
*       <div class="data row">
*           <div class="columns small-6">
*               <strong class="h3">Risk Scores</strong>
*               <strong>CHA2DS2-VASc: <span>3</span></strong>
*               <strong>HAS-BLED: <span>2.1</span></strong>
*           </div>
*           <div class="columns small-6">   
*               <strong class="h3">Renal Status</strong>
*               <strong>Cr: <span>1.2</span>  (CrCL: <span >1.4</span> )</strong>
*               <strong>CKD: <span >6</span></strong>
*           </div>
*       </div>
*   </div>
*  <div class="shrink-waypoint"></div>
**/

/**
* Headline with Counters:
* `.order-marker.` - It is some times useful to add an order-marker to the beginning of headlines. You can modify them by adding `.hollow` or `.inverse` depending on the need.
* 
*   @example
*   <h1><span class="order-marker">1</span>Header 1 Tag</h1>
*   <h2><span class="order-marker">2</span>Header 2 Tag</h2>
*   <h3><span class="order-marker">a</span>Header 3 Tag</h3>
*   <h4 class="with-underline"><span class="order-marker hollow">b</span>Hollow Marker with H4 Tag</h4>
*   <h5 class="colored-paper" style=""><span class="order-marker inverse">c</span>Inversed Marker with H5 Tag</h5>
*/

.order-marker {
  background-color: #198dae;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0.75em 0 0 0;
  position: relative;
  top: -0.25em;
  margin-right: 0.5em;
  text-align: center;
  box-sizing: border-box;
  text-transform: capitalize;
  line-height: 0;
  vertical-align: top;
}

.order-marker.hollow {
  background-color: transparent;
  border: 0.1em solid #198dae;
  color: #198dae;
}

.order-marker.inverse {
  background-color: #fff;
  color: #198dae;
}

h1.error,
h2.error,
h3.error,
h4.error,
h5.error,
h6.error,
p.error,
a.error,
li.error,
blockquote.error,
h1.warning,
h2.warning,
h3.warning,
h4.warning,
h5.warning,
h6.warning,
p.warning,
a.warning,
li.warning,
blockquote.warning,
h1.success,
h2.success,
h3.success,
h4.success,
h5.success,
h6.success,
p.success,
a.success,
li.success,
blockquote.success,
h1.info,
h2.info,
h3.info,
h4.info,
h5.info,
h6.info,
p.info,
a.info,
li.info,
blockquote.info,
h1.highlighted,
h2.highlighted,
h3.highlighted,
h4.highlighted,
h5.highlighted,
h6.highlighted,
p.highlighted,
a.highlighted,
li.highlighted,
blockquote.highlighted,
h1.disabled,
h2.disabled,
h3.disabled,
h4.disabled,
h5.disabled,
h6.disabled,
p.disabled,
a.disabled,
li.disabled,
blockquote.disabled {
  font-weight: 900;
}

/**
* Header Tags and other Typography States:
* `.error, .warning, .etc...` - headers `p` `li` `blockquote` `a` and `p` tags can be fully manipulated to respond to states by adding the modifiying state like `.error`, `.warning`, `.info` etc....
* 
*   @example
*	<h1 class="with-underline info">Header 1 Tag
*	  <small>Info State</small>
*	</h1>
*	<h2 class="with-underline error">Header 2 Tag <small>Error State</small></h2>
*	<h3 class="with-underline warning">Header 3 Tag<small>Warning State</small></h3>
*	<h4 class="with-underline success">Header 4 Tag<span class="sub-line">Success State</span></h4>
*	<h5 class="with-underline highlighted">Header 5 Tag<small>Highlighted State</small></h5>
*  	<p class="highlighted"><strong>Paragraph that is a highlighted State.</strong>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
*/

h1.with-underline {
  border-bottom: #198dae 2px solid;
}

h2.with-underline {
  border-bottom: #666666 2px solid;
}

h3.with-underline {
  border-bottom: #5cc9e8 1px dotted;
}

h4.with-underline {
  border-bottom: #999999 1px solid;
}

h5.with-underline {
  border-bottom: #b3b3b3 1px solid;
}

h6.with-underline {
  border-bottom: #b3b3b3 1px dotted;
}

/**
 * Sub Line in Header Tags:
 * `[Header Tag] > span.sub-line` - basic styling for sub content in headers. 
 * <h5 class="warning group-divide">( Updated in this Version | Depreciated  blockquote usage )</h5>
 *
 *     @example
 *     h1.with-underline Header 1 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h2.with-underline Header 2 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h3.with-underline Header 3 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h4.with-underline Header 4 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h5.with-underline Header 5 Tag 
 *		span.sub-line sub lines of content in a `span.sub-line`
 *     h6.with-underline Header 6 Tag
 *		span.sub-line sub lines of content in a `span.sub-line`
 */

/**
* Super Line in Header Tags:
* `[Header Tag] > span.sub-line` - You can use span.sub-line as super content in headers by just including them at the begining of the tag instead of after text in the tag. 
*
*     @example
*	<h1 class="with-underline"><span class="sub-line">Super line of Content</span>H1 Tag that has some text above it </h1>
*	<h2 class="with-underline"><span class="sub-line">Super line of Content</span>H2 Tag that has some text above it </h2>
*	<h3 class="with-underline"><span class="sub-line">Super line of Content</span>H3 Tag that has some text above it </h3>
*	<h4 class="with-underline"><span class="sub-line">Super line of Content</span>H4 Tag that has some text above it </h4>
*	<h5 class="with-underline"><span class="sub-line">Super line of Content</span>H5 Tag that has some text above it </h5>
*
*/

h1 .sub-line,
h2 .sub-line,
h3 .sub-line,
h4 .sub-line,
h5 .sub-line,
h6 .sub-line {
  display: block;
  line-height: 1.1;
  font-size: 0.55em;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  border: 0 none transparent;
  opacity: 0.8;
}

h1 blockquote,
h1 .sub-line {
  font-size: 0.32558em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h1 blockquote,
  h1 .sub-line {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h1 blockquote,
  h1 .sub-line {
    line-height: 1.19em;
  }
}

h1.with-underline blockquote,
h1.with-underline .sub-line {
  font-size: 0.32558em;
  line-height: 1.4em;
  margin-top: 0.21em;
  margin-bottom: 0.14em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h1.with-underline blockquote,
  h1.with-underline .sub-line {
    line-height: 1.26em;
    margin-top: 0.189em;
    margin-bottom: 0.126em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h1.with-underline blockquote,
  h1.with-underline .sub-line {
    line-height: 1.19em;
    margin-top: 0.1575em;
    margin-bottom: 0.105em;
  }
}

h2 blockquote,
h2 .sub-line {
  font-size: 0.40741em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h2 blockquote,
  h2 .sub-line {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h2 blockquote,
  h2 .sub-line {
    line-height: 1.51455em;
  }
}

h2.with-underline blockquote,
h2.with-underline .sub-line {
  font-size: 0.40741em;
  line-height: 1.78182em;
  margin-top: 0.26727em;
  margin-bottom: 0.17818em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h2.with-underline blockquote,
  h2.with-underline .sub-line {
    line-height: 1.60364em;
    margin-top: 0.24055em;
    margin-bottom: 0.16036em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h2.with-underline blockquote,
  h2.with-underline .sub-line {
    line-height: 1.51455em;
    margin-top: 0.20045em;
    margin-bottom: 0.13364em;
  }
}

h3 blockquote,
h3 .sub-line {
  font-size: 0.63636em;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h3 blockquote,
  h3 .sub-line {
    line-height: 1.26em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h3 blockquote,
  h3 .sub-line {
    line-height: 1.19em;
  }
}

h3.with-underline blockquote,
h3.with-underline .sub-line {
  font-size: 0.63636em;
  line-height: 1.4em;
  margin-top: 0.21em;
  margin-bottom: 0.14em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h3.with-underline blockquote,
  h3.with-underline .sub-line {
    line-height: 1.26em;
    margin-top: 0.189em;
    margin-bottom: 0.126em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h3.with-underline blockquote,
  h3.with-underline .sub-line {
    line-height: 1.19em;
    margin-top: 0.1575em;
    margin-bottom: 0.105em;
  }
}

h4 blockquote,
h4 .sub-line {
  font-size: 0.61111em;
  line-height: 1.78182em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h4 blockquote,
  h4 .sub-line {
    line-height: 1.60364em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h4 blockquote,
  h4 .sub-line {
    line-height: 1.51455em;
  }
}

h5 blockquote,
h5 .sub-line {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h5 blockquote,
  h5 .sub-line {
    line-height: 1.96em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h5 blockquote,
  h5 .sub-line {
    line-height: 1.85111em;
  }
}

h6 blockquote,
h6 .sub-line {
  font-size: 0.64286em;
  line-height: 2.17778em;
  margin-top: 0em;
  margin-bottom: 0em;
}

@media only screen and (max-width: 1024px) and (max-height: 480px) {
  h6 blockquote,
  h6 .sub-line {
    line-height: 1.96em;
  }
}

@media only screen and (max-width: 1024px) and (max-height: 320px) {
  h6 blockquote,
  h6 .sub-line {
    line-height: 1.85111em;
  }
}

.text-highlight-color {
  color: #198dae !important;
}

/**
 * Group-divid:
 * `.group-divide` - a line above or below the container elemtent
 *
 *     @example
 *	div.group-divide
 *    	 p this should be a paragraph a line before it. 
 *	div.group-divide-bottom
 *		p this paragraph with line after.
 */

.group-divide {
  border-top: #198dae 1px dotted;
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.group-divide-bottom {
  border-bottom: #198dae 1px dotted;
  margin-bottom: 0.5rem;
}

.group-divide-auto + .group-divide-auto {
  border-top: #198dae 1px dotted;
  margin-top: 1rem;
  padding-top: 0.5rem;
}

/**
*  A tag and .link:
*  `.link` - a tags have a basic style  but links are a styled with `.link`
*
*     @example
*     a 	
* 	  span this is a plain "a" tag
*	br
*	a.link
* 	  span this is an "a" tag with the ".link" class
*		
*/

.link {
  color: #198dae;
  text-decoration: underline;
}

.link.icon {
  text-decoration: none;
}

.link:hover {
  color: #25b6e0;
  text-decoration: underline;
}

.link.reverse {
  color: #fff;
}

/**
*
*  Type Modifiers:
*  `bold, italic or subtle,etc...` - `.bold` - make text bold, `.italic` - make text italic, or `.subtle` - make text subtle
*
*     @example
*     div.bold this has the `.bold` class added to the container which increases font weight and darkens the color.
*     div.emphasis this has the `.emphasis` class added to the container which darkens the color and makes the font italic and bold
*     div.loud this has the `.loud` class added to the container which darkens the color.
*     div.quiet this has the `.quiet` class added to the container which lightens the color.
*     div.subtle this has the `.subtle` class added to the container which decreases font weight and lightens the color.
*     div.italic this has the `.italic` class added to the container which makes it lighter and makes it italic.
*     div.text-highlight-color this has the `.text-highlight-color` class added to the container which changes the color to the product color
*
*/

.always-wrap {
  white-space: normal !important;
}

.phone-only {
  display: none;
}

@media only screen and (max-width: 767px) {
  .phone-only {
    display: block;
    display: initial;
  }
}

.desktop-hide {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .desktop-hide {
    display: block;
    display: initial;
  }
}

.desktop-show {
  display: initial;
}

@media only screen and (max-width: 1024px) {
  .desktop-show {
    display: none;
  }
}

.relative-position {
  position: relative;
}

.hide {
  display: none;
}

.absolute-topright {
  position: absolute !important;
  top: 0;
  right: 0;
}

.absolute-topleft {
  position: absolute !important;
  top: 0;
  left: 0;
}

.clearboth:after {
  content: " ";
  display: table;
  clear: both;
}

.radius {
  border-radius: 6px;
}

.radius-bottom {
  border-radius: 0 0 6px 6px;
}

.radius-top {
  border-radius: 6px 6px 0 0;
}

.white-space-normal {
  white-space: normal !important;
}

.word-break {
  word-break: break-all !important;
}

.no-vertical-margin {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/**
* HELPER - Condensable (Condense):
* `.condensable.large .condense` - This pattern allows for responsive reduction of content.
*  Content tagged with `.condense` will turn to display:none when it passes the below the break point. On the container element add  '.condensable' and set the break point where you want it  by adding the class `.small`, `.medium`, or `.large`.
*  !! Single word reduction requires adding `condensable-word` see example below.
* 
*   @example
*	<h2>
*		Condensable Sub-line
*		<span class="sub-line condensable large"><span class="condense">The full word is only seen on large screens.</span> It only says Super below on smaller screens</span>
*		<span class="sub-line condensable condensable-word large">Super<span class="condense">califragilisticexpialidocious</span></span>
*	</h2>
*/

/**
* HELPER - Swappable (short-text long-text):
* `.swappable` - This pattern allows for responsive swapping of content from `.short-text` and `.long-text`.
*   On the container element add `.swappable` and set the break point where you want it to switch by adding the class `.small`, `.medium`, or `.large`.
*   The elements with the .short-text and .long-text must be inline elements.
* 
*   @example
*	<h2 class="swappable medium">
*		Swappable Sub-line
*		<span class="sub-line">
*			<span class="short-text">Short Title</span>
*			<span class="long-text">Long TItle Seen on Medium Screens and Up</span>
*		</span>
*	</h2>
*/

.condensable.condensable-word {
  word-spacing: -0.35em;
}

.condensable .condense {
  display: inline;
}

@media only screen and (max-width: 320px) {
  .condensable .condense {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .condensable.small .condense {
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  .condensable.medium .condense {
    display: none;
  }
}

@media only screen and (max-width: 1200px) {
  .condensable.large .condense {
    display: none;
  }
}

.swappable .long-text {
  display: inline;
}

.swappable .short-text {
  display: none;
}

@media only screen and (max-width: 320px) {
  .swappable .short-text {
    display: inline;
  }
  .swappable .long-text {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .swappable.small .short-text {
    display: inline;
  }
  .swappable.small .long-text {
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  .swappable.medium .short-text {
    display: inline;
  }
  .swappable.medium .long-text {
    display: none;
  }
}

@media only screen and (max-width: 1200px) {
  .swappable.large .short-text {
    display: inline;
  }
  .swappable.large .long-text {
    display: none;
  }
}

.css3columns {
  -webkit-column-count: 1;
  /* Chrome, Safari, Opera */
  -moz-column-count: 1;
  /* Firefox */
  column-count: 1;
}

@media only screen and (min-width: 767px) {
  .css3columns {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
  }
}

@media only screen and (min-width: 1024px) {
  .css3columns {
    -webkit-column-count: 3;
    /* Chrome, Safari, Opera */
    -moz-column-count: 3;
    /* Firefox */
    column-count: 3;
  }
}

/**
* Take me to [top](#top):
*/

/*
STATE TRUMPING CODE
*/

.error .order-marker.hollow,
.error.order-marker.hollow,
.error .input-holder input,
.error .input-holder textarea,
.error .input-holder select,
.error .input-holder .postfix,
.error .input-holder .prefix,
.error .bar.close,
.error.inset .bar.close,
.error.question .button-group,
.error .order-marker.hollow,
.error.order-marker.hollow,
h1.with-underline.error,
h2.with-underline.error,
h3.with-underline.error,
h4.with-underline.error,
h5.with-underline.error,
h6.with-underline.error {
  border-color: #c32231;
}

.error .order-marker.inverse,
.error.order-marker.inverse.error .order-marker.hollow,
.error.order-marker.hollow,
.nav-list.nav-checklist li.error i,
.nav-checklist.panel-selector li.error i,
.answer.error .required-holder,
.question.error .required-holder,
.question-inline.error .required-holder,
.question-grid-based.error .required-holder,
.error .label-holder label,
.error .input-holder .postfix,
.error .input-holder .prefix,
.error .input-holder .value,
.error .bar.close .action-btn,
.collapsable-panel.error h1,
.collapsable-panel.error h2,
.collapsable-panel.error h3,
.collapsable-panel.error h4,
.collapsable-panel.error h5,
.collapsable-panel.error h6,
.error .order-marker.inverse,
.error.order-marker.inverse.error .order-marker.hollow,
.error.order-marker.hollow,
h1.error,
h2.error,
h3.error,
h4.error,
h5.error,
h6.error,
p.error,
a.error,
li.error,
blockquote.error {
  color: #c32231;
}

.nav-list.nav-checklist li.error,
.nav-checklist.panel-selector li.error,
.error .message-holder > .error,
.hint .error,
.error.inset .bar.close .action-btn,
.error-inactive .switch-paddle,
.error-active input:checked ~ .switch-paddle,
.error.callout {
  background-color: #c32231;
}

.error .fa-holder-dynamic:before,
.error.fa:before,
.error > .fa-holder:before,
.nav-list.nav-checklist li.error .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.error .fa-holder-dynamic:before {
  content: "";
}

.warning .order-marker.hollow,
.warning.order-marker.hollow,
.warning .input-holder input,
.warning .input-holder textarea,
.warning .input-holder select,
.warning .input-holder .postfix,
.warning .input-holder .prefix,
.warning .bar.close,
.warning.inset .bar.close,
.warning.question .button-group,
.warning .order-marker.hollow,
.warning.order-marker.hollow,
h1.with-underline.warning,
h2.with-underline.warning,
h3.with-underline.warning,
h4.with-underline.warning,
h5.with-underline.warning,
h6.with-underline.warning {
  border-color: #e08514;
}

.warning .order-marker.inverse,
.warning.order-marker.inverse.warning .order-marker.hollow,
.warning.order-marker.hollow,
.nav-list.nav-checklist li.warning i,
.nav-checklist.panel-selector li.warning i,
.answer.warning .required-holder,
.question.warning .required-holder,
.question-inline.warning .required-holder,
.question-grid-based.warning .required-holder,
.warning .label-holder label,
.warning .input-holder .postfix,
.warning .input-holder .prefix,
.warning .input-holder .value,
.warning .bar.close .action-btn,
.collapsable-panel.warning h1,
.collapsable-panel.warning h2,
.collapsable-panel.warning h3,
.collapsable-panel.warning h4,
.collapsable-panel.warning h5,
.collapsable-panel.warning h6,
.warning .order-marker.inverse,
.warning.order-marker.inverse.warning .order-marker.hollow,
.warning.order-marker.hollow,
h1.warning,
h2.warning,
h3.warning,
h4.warning,
h5.warning,
h6.warning,
p.warning,
a.warning,
li.warning,
blockquote.warning {
  color: #e08514;
}

.nav-list.nav-checklist li.warning,
.nav-checklist.panel-selector li.warning,
.warning .message-holder > .warning,
.hint .warning,
.warning.inset .bar.close .action-btn,
.warning-inactive .switch-paddle,
.warning-active input:checked ~ .switch-paddle,
.warning.callout {
  background-color: #e08514;
}

.warning .fa-holder-dynamic:before,
.warning.fa:before,
.warning > .fa-holder:before,
.nav-list.nav-checklist li.warning .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.warning .fa-holder-dynamic:before {
  content: "";
}

.success .order-marker.hollow,
.success.order-marker.hollow,
.success .input-holder input,
.success .input-holder textarea,
.success .input-holder select,
.success .input-holder .postfix,
.success .input-holder .prefix,
.success .bar.close,
.success.inset .bar.close,
.success.question .button-group,
.success .order-marker.hollow,
.success.order-marker.hollow,
h1.with-underline.success,
h2.with-underline.success,
h3.with-underline.success,
h4.with-underline.success,
h5.with-underline.success,
h6.with-underline.success {
  border-color: #14b057;
}

.success .order-marker.inverse,
.success.order-marker.inverse.success .order-marker.hollow,
.success.order-marker.hollow,
.nav-list.nav-checklist li.success i,
.nav-checklist.panel-selector li.success i,
.answer.success .required-holder,
.question.success .required-holder,
.question-inline.success .required-holder,
.question-grid-based.success .required-holder,
.success .label-holder label,
.success .input-holder .postfix,
.success .input-holder .prefix,
.success .input-holder .value,
.success .bar.close .action-btn,
.collapsable-panel.success h1,
.collapsable-panel.success h2,
.collapsable-panel.success h3,
.collapsable-panel.success h4,
.collapsable-panel.success h5,
.collapsable-panel.success h6,
.success .order-marker.inverse,
.success.order-marker.inverse.success .order-marker.hollow,
.success.order-marker.hollow,
h1.success,
h2.success,
h3.success,
h4.success,
h5.success,
h6.success,
p.success,
a.success,
li.success,
blockquote.success {
  color: #14b057;
}

.nav-list.nav-checklist li.success,
.nav-checklist.panel-selector li.success,
.success .message-holder > .success,
.hint .success,
.success.inset .bar.close .action-btn,
.success-inactive .switch-paddle,
.success-active input:checked ~ .switch-paddle,
.success.callout {
  background-color: #14b057;
}

.success .fa-holder-dynamic:before,
.success.fa:before,
.success > .fa-holder:before,
.nav-list.nav-checklist li.success .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.success .fa-holder-dynamic:before {
  content: "";
}

.info .order-marker.hollow,
.info.order-marker.hollow,
.info .input-holder input,
.info .input-holder textarea,
.info .input-holder select,
.info .input-holder .postfix,
.info .input-holder .prefix,
.info .bar.close,
.info.inset .bar.close,
.info.question .button-group,
.info .order-marker.hollow,
.info.order-marker.hollow,
h1.with-underline.info,
h2.with-underline.info,
h3.with-underline.info,
h4.with-underline.info,
h5.with-underline.info,
h6.with-underline.info {
  border-color: #a6a6a6;
}

.info .order-marker.inverse,
.info.order-marker.inverse.info .order-marker.hollow,
.info.order-marker.hollow,
.nav-list.nav-checklist li.info i,
.nav-checklist.panel-selector li.info i,
.answer.info .required-holder,
.question.info .required-holder,
.question-inline.info .required-holder,
.question-grid-based.info .required-holder,
.info .label-holder label,
.info .input-holder .postfix,
.info .input-holder .prefix,
.info .input-holder .value,
.info .bar.close .action-btn,
.collapsable-panel.info h1,
.collapsable-panel.info h2,
.collapsable-panel.info h3,
.collapsable-panel.info h4,
.collapsable-panel.info h5,
.collapsable-panel.info h6,
.info .order-marker.inverse,
.info.order-marker.inverse.info .order-marker.hollow,
.info.order-marker.hollow,
h1.info,
h2.info,
h3.info,
h4.info,
h5.info,
h6.info,
p.info,
a.info,
li.info,
blockquote.info {
  color: #a6a6a6;
}

.nav-list.nav-checklist li.info,
.nav-checklist.panel-selector li.info,
.info .message-holder > .info,
.hint .info,
.info.inset .bar.close .action-btn,
.info-inactive .switch-paddle,
.info-active input:checked ~ .switch-paddle,
.info.callout {
  background-color: #a6a6a6;
}

.info .fa-holder-dynamic:before,
.info.fa:before,
.info > .fa-holder:before,
.nav-list.nav-checklist li.info .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.info .fa-holder-dynamic:before {
  content: "";
}

.highlighted .order-marker.hollow,
.highlighted.order-marker.hollow,
.highlighted .input-holder input,
.highlighted .input-holder textarea,
.highlighted .input-holder select,
.highlighted .input-holder .postfix,
.highlighted .input-holder .prefix,
.highlighted .bar.close,
.highlighted.inset .bar.close,
.highlighted.question .button-group,
.highlighted .order-marker.hollow,
.highlighted.order-marker.hollow,
h1.with-underline.highlighted,
h2.with-underline.highlighted,
h3.with-underline.highlighted,
h4.with-underline.highlighted,
h5.with-underline.highlighted,
h6.with-underline.highlighted {
  border-color: #198dae;
}

.highlighted .order-marker.inverse,
.highlighted.order-marker.inverse.highlighted .order-marker.hollow,
.highlighted.order-marker.hollow,
.nav-list.nav-checklist li.highlighted i,
.nav-checklist.panel-selector li.highlighted i,
.answer.highlighted .required-holder,
.question.highlighted .required-holder,
.question-inline.highlighted .required-holder,
.question-grid-based.highlighted .required-holder,
.highlighted .label-holder label,
.highlighted .input-holder .postfix,
.highlighted .input-holder .prefix,
.highlighted .input-holder .value,
.highlighted .bar.close .action-btn,
.collapsable-panel.highlighted h1,
.collapsable-panel.highlighted h2,
.collapsable-panel.highlighted h3,
.collapsable-panel.highlighted h4,
.collapsable-panel.highlighted h5,
.collapsable-panel.highlighted h6,
.highlighted .order-marker.inverse,
.highlighted.order-marker.inverse.highlighted .order-marker.hollow,
.highlighted.order-marker.hollow,
h1.highlighted,
h2.highlighted,
h3.highlighted,
h4.highlighted,
h5.highlighted,
h6.highlighted,
p.highlighted,
a.highlighted,
li.highlighted,
blockquote.highlighted {
  color: #198dae;
}

.nav-list.nav-checklist li.highlighted,
.nav-checklist.panel-selector li.highlighted,
.highlighted .message-holder > .highlighted,
.hint .highlighted,
.highlighted.inset .bar.close .action-btn,
.highlighted-inactive .switch-paddle,
.highlighted-active input:checked ~ .switch-paddle,
.highlighted.callout {
  background-color: #198dae;
}

.highlighted .fa-holder-dynamic:before,
.highlighted.fa:before,
.highlighted > .fa-holder:before,
.nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before {
  content: "";
}

.disabled .order-marker.hollow,
.disabled.order-marker.hollow,
.disabled .input-holder input,
.disabled .input-holder textarea,
.disabled .input-holder select,
.disabled .input-holder .postfix,
.disabled .input-holder .prefix,
.disabled .bar.close,
.disabled.inset .bar.close,
.disabled.question .button-group,
.disabled .order-marker.hollow,
.disabled.order-marker.hollow,
h1.with-underline.disabled,
h2.with-underline.disabled,
h3.with-underline.disabled,
h4.with-underline.disabled,
h5.with-underline.disabled,
h6.with-underline.disabled {
  border-color: #cccccc;
}

.disabled .order-marker.inverse,
.disabled.order-marker.inverse.disabled .order-marker.hollow,
.disabled.order-marker.hollow,
.nav-list.nav-checklist li.disabled i,
.nav-checklist.panel-selector li.disabled i,
.answer.disabled .required-holder,
.question.disabled .required-holder,
.question-inline.disabled .required-holder,
.question-grid-based.disabled .required-holder,
.disabled .label-holder label,
.disabled .input-holder .postfix,
.disabled .input-holder .prefix,
.disabled .input-holder .value,
.disabled .bar.close .action-btn,
.collapsable-panel.disabled h1,
.collapsable-panel.disabled h2,
.collapsable-panel.disabled h3,
.collapsable-panel.disabled h4,
.collapsable-panel.disabled h5,
.collapsable-panel.disabled h6,
.disabled .order-marker.inverse,
.disabled.order-marker.inverse.disabled .order-marker.hollow,
.disabled.order-marker.hollow,
h1.disabled,
h2.disabled,
h3.disabled,
h4.disabled,
h5.disabled,
h6.disabled,
p.disabled,
a.disabled,
li.disabled,
blockquote.disabled {
  color: #cccccc;
}

.nav-list.nav-checklist li.disabled,
.nav-checklist.panel-selector li.disabled,
.disabled .message-holder > .disabled,
.hint .disabled,
.disabled.inset .bar.close .action-btn,
.disabled-inactive .switch-paddle,
.disabled-active input:checked ~ .switch-paddle,
.disabled.callout {
  background-color: #cccccc;
}

.disabled .fa-holder-dynamic:before,
.disabled.fa:before,
.disabled > .fa-holder:before,
.nav-list.nav-checklist li.disabled .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before {
  content: "";
}

.error .fa-holder-dynamic:before,
.error.fa:before,
.error > .fa-holder:before,
.nav-list.nav-checklist li.error .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.error .fa-holder-dynamic:before,
.warning .fa-holder-dynamic:before,
.warning.fa:before,
.warning > .fa-holder:before,
.nav-list.nav-checklist li.warning .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.warning .fa-holder-dynamic:before,
.success .fa-holder-dynamic:before,
.success.fa:before,
.success > .fa-holder:before,
.nav-list.nav-checklist li.success .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.success .fa-holder-dynamic:before,
.info .fa-holder-dynamic:before,
.info.fa:before,
.info > .fa-holder:before,
.nav-list.nav-checklist li.info .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.info .fa-holder-dynamic:before,
.highlighted .fa-holder-dynamic:before,
.highlighted.fa:before,
.highlighted > .fa-holder:before,
.nav-list.nav-checklist li.highlighted .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.highlighted .fa-holder-dynamic:before,
.disabled .fa-holder-dynamic:before,
.disabled.fa:before,
.disabled > .fa-holder:before,
.nav-list.nav-checklist li.disabled .fa-holder-dynamic:before,
.nav-checklist.panel-selector li.disabled .fa-holder-dynamic:before {
  font-family: FontAwesome;
}

.dark-color-text,
.info .order-marker,
.info.order-marker,
.disabled .order-marker,
.disabled.order-marker,
.message-holder > .info,
.message-holder > .disabled,
.hint .info,
.hint .disabled,
.info .order-marker,
.info.order-marker,
.disabled .order-marker,
.disabled.order-marker {
  color: #333333;
}

.light-color-text,
.error .order-marker,
.error.order-marker,
.warning .order-marker,
.warning.order-marker,
.success .order-marker,
.success.order-marker,
.highlighted .order-marker,
.highlighted.order-marker,
.message-holder > .error,
.message-holder > .warning,
.message-holder > .success,
.message-holder > .highlighted,
.hint .error,
.hint .warning,
.hint .success,
.hint .highlighted,
.error .order-marker,
.error.order-marker,
.warning .order-marker,
.warning.order-marker,
.success .order-marker,
.success.order-marker,
.highlighted .order-marker,
.highlighted.order-marker {
  color: #fff;
}

.row {
  max-width: 100%;
}

#noticebar {
  box-shadow: 0px 0px 4px 0px brown;
  padding-left: 0;
  padding-right: 0;
  margin-right: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
#noticebar_inner {
  background-image: none !important;
  margin-bottom: 0px;
  color: white;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}