@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| Main scss file
|--------------------------------------------------------------------------
| ...
*/
/*
|--------------------------------------------------------------------------
| Base imports
|--------------------------------------------------------------------------
*/
/* ==========================================================================
   Normalize.scss settings - https://github.com/appleboy/normalize.scss
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
@import url(./../../node_modules/semantic-ui-form/form.css);
@import url(./../../node_modules/semantic-ui-dropdown/dropdown.css);
@import url(./../../node_modules/semantic-ui-button/button.css);
@import url(./../../node_modules/semantic-ui-checkbox/checkbox.css);
@import url(./../../node_modules/semantic-ui-transition/transition.css);
@import url(./../../node_modules/semantic-ui-message/message.css);
@import url(./../../node_modules/semantic-ui-icon/icon.css);
@import url(./../../node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css);
@import url(./../../node_modules/@fortawesome/fontawesome-pro/css/all.css);
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *  Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Improves appearance and consistency in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *  Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 *  Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Corrects text not wrapping in Firefox 3.
 * 4. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*
|--------------------------------------------------------------------------
| Base colors
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Sharetools platform colors
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Notification colors
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Utilities imports
|--------------------------------------------------------------------------
| ...
*/
/*
|--------------------------------------------------------------------------
| Utilities general
|--------------------------------------------------------------------------
| ...
*/
.u-group:before,
.u-group:after {
  content: "";
  display: table; }

.u-group:after {
  clear: both; }

.u-group {
  zoom: 1;
  /* ie 6/7 */ }

.u-text-align-center {
  text-align: center !important; }

.u-text-decoration-underline {
  text-decoration: underline !important; }

.u-italic {
  font-style: italic; }

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

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

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

.no-v-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.margin-t0 {
  margin-top: 0; }

.margin-b60,
.-mb60 {
  margin-bottom: 40px; }

.-mb25 {
  margin-bottom: 25px; }

.u-wide {
  width: 100%;
  max-width: 100%; }

.is-hidden {
  opacity: 0; }

.is-fixed {
  position: fixed; }

.u-float-left {
  float: left; }

.u-float-right {
  float: right; }

.is-visible {
  opacity: 1; }

.desktop-hidden {
  display: none; }

.u-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
  .u-flex * {
    float: none; }

.u-flex-align-center,
.u-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.u-flex-justify-content-center,
.u-justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.u-justify-content-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.u-flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.u-box-shadow {
  box-shadow: 8px 6px 18px 2px rgba(0, 0, 0, 0.15); }

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

.u-hidden\@lg {
  display: none !important; }

@media screen and (max-width: 1162px) {
  .u-hidden\@md {
    display: none !important; }
  .u-visible\@md {
    display: block !important; }
  .u-visible-inline\@md {
    display: inline-block !important; } }

@media screen and (max-width: 640px) {
  .u-hidden\@sm {
    display: none !important; } }

.u-overflowhidden {
  position: fixed;
  width: 100%; }

.u-overflowauto {
  overflow: auto !important; }

/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

------------------------------------------------------------- */
/*
|--------------------------------------------------------------------------
| Layout imports
|--------------------------------------------------------------------------
| ...
*/
main .logoWrap {
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: 1em; }
  main .logoWrap img {
    display: block;
    max-width: 100%;
    width: 100%; }

main .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  min-height: 100vh; }

main .grid__col {
  float: none;
  margin: 0 auto; }

/*
|--------------------------------------------------------------------------
| Layout grid
|--------------------------------------------------------------------------
| max-width: 1045px - ipad landscape
| max-width: 768 - ipad portrait
*/
html {
  box-sizing: border-box;
  overflow-y: scroll; }
  html.-locked {
    overflow-y: hidden;
    height: 100vh; }

body.-locked {
  overflow-y: hidden;
  height: 100vh; }

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

.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  padding: 0 10px;
  max-width: 1320px;
  margin: 0 auto; }
  .grid.-m {
    max-width: 1200px; }
  .grid.-s {
    max-width: 720px; }

.grid__col.-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

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

.grid__col--90 {
  width: 90%; }

.grid__col--80 {
  width: 80%; }

.grid__col--75 {
  width: 75%; }

.grid__col--70 {
  width: 70%; }

.grid__col--66 {
  width: 66.666666%; }

.grid__col--65 {
  width: 65%; }

.grid__col--60 {
  width: 60%; }

.grid__col--55 {
  width: 55%; }

.grid__col--57 {
  width: 57%; }

.grid__col--58 {
  width: 58%; }

.grid__col--50 {
  width: 50%; }

.grid__col--49 {
  width: 49%; }

.grid__col--48 {
  width: 48%; }

.grid__col--47 {
  width: 47%; }

.grid__col--46 {
  width: 46%; }

.grid__col--45 {
  width: 45%; }

.grid__col--40 {
  width: 40%; }

.grid__col--35 {
  width: 35%; }

.grid__col--33 {
  width: 33.333333%; }

.grid__col--30 {
  width: 30%; }

.grid__col--25 {
  width: 25%; }

.grid__col--22 {
  width: 22%; }

.grid__col--20 {
  width: 20%; }

.grid__col--12 {
  width: 12.5%; }

.grid__col--10 {
  width: 10%; }

.grid__col--5 {
  width: 5%; }

@media screen and (max-width: 1045px) {
  .grid__col--90 {
    float: none;
    width: 100%; }
  .grid__col--80 {
    float: none;
    width: 100%; }
  .grid__col--75 {
    width: 50%; }
  .grid__col--70 {
    float: none;
    width: 100%; }
  .grid__col--60 {
    float: none;
    width: 100%; }
  .grid__col--40 {
    float: none;
    width: 100%; }
  .grid__col--33 {
    width: 50%; }
  .grid__col--30 {
    float: none;
    width: 100%; }
  .grid__col--25 {
    width: 50%; }
  .grid__col--20 {
    float: none;
    width: 100%; }
  .grid__col--12 {
    width: 50%; }
  .grid__col--10 {
    float: none;
    width: 100%; } }

@media screen and (max-width: 950px) {
  .grid__col--33 {
    float: none;
    width: 100%; } }

@media screen and (max-width: 768px) {
  .grid__col--75 {
    width: 95%;
    margin: 0 auto; }
  .grid__col--50 {
    float: none;
    width: 100%;
    margin: 0 auto; }
  .grid__col--47 {
    float: none;
    width: 100%;
    margin: 0 auto; }
  .grid__col--25 {
    width: 95%;
    margin: 0 auto; }
  .grid__col--12 {
    width: 95%;
    margin: 0 auto; } }

/*
|--------------------------------------------------------------------------
| elements imports
|--------------------------------------------------------------------------
| ...
*/
/*
|--------------------------------------------------------------------------
| Skiplink
|--------------------------------------------------------------------------
| ...
*/
.skiplink {
  position: absolute;
  left: -9999em; }

/*
|--------------------------------------------------------------------------
| No script
|--------------------------------------------------------------------------
| ...
*/
.no-script {
  padding: 12px 0 13px 0;
  text-align: center;
  background: #ffdb7a; }
  .no-script p {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #1f1f1f !important; }

/*
|--------------------------------------------------------------------------
| Browse happy
|--------------------------------------------------------------------------
| ...
*/
.browse-happy p {
  max-width: 100%;
  margin: 0; }

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #ffffff; }

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
| ...
*/
.form {
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #f6f6f6;
  padding: 25px; }
  @media (max-width: 480px) {
    .form {
      padding: 25px 10px; } }
  .form .errormsg {
    margin: 5px 0;
    font-size: 13px;
    line-height: 15px;
    font-style: italic;
    color: #9F3A3D; }
  .form .grouped.fields.error label {
    color: #9F3A38; }
  .form label {
    cursor: pointer !important; }
  .form .message .header {
    margin-bottom: 10px; }
  .form .message.success {
    margin: 0 !important; }
  @media (max-width: 480px) {
    .form .message.icon .icon {
      display: none !important; } }
  .form .message__info {
    font-size: 14px;
    line-height: 16px; }
  .form .ui.message > .close.icon {
    top: 0.5em;
    right: 0.5em;
    opacity: 0.7; }
  .form .no-click.button,
  .form .no-click.button:hover,
  .form .no-click.active.button {
    cursor: default;
    opacity: 0.45 !important;
    background-image: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important; }

.ui.message p {
  margin: 0 !important; }

.flash-message {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 13px;
  margin-bottom: 20px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 16px;
  text-align: left; }
  .flash-message--success {
    background-color: #d5ebd5;
    color: #1f1f1f; }
  .flash-message--error {
    background-color: #e45d50;
    color: #ffffff; }
  .flash-message--notification {
    position: relative;
    background-color: #f6f6f6;
    color: #ffffff; }
  .flash-message--neutral {
    padding-left: 35px;
    background-color: lightgray;
    color: #1f1f1f; }
    .flash-message--neutral .far {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px; }
  .flash-message--logout {
    margin-bottom: 0;
    font-weight: 600;
    text-align: center; }
  .flash-message__close {
    position: absolute;
    top: 15px;
    right: 5px; }
  .flash-message__close--success .fa-times {
    color: #1f1f1f; }
  .flash-message__close--notification .fa-times {
    color: #1f1f1f; }
  .flash-message__close--error .fa-times {
    color: #ffffff; }
  .flash-message__inner {
    display: block;
    max-width: 95%; }
  .flash-message--neutral .flash-message__inner {
    max-width: 100%; }
  .flash-message .svg-inline--fa {
    margin-right: 10px; }
  .flash-message a,
  .flash-message a:hover {
    background-color: transparent !important;
    outline: none !important; }
  .flash-message--notification a,
  .flash-message--notification a:visited {
    text-decoration: underline;
    color: #ffffff; }
  .flash-message--notification a:hover {
    text-decoration: none; }
  @media (max-width: 720px) {
    .flash-message--notification br {
      display: none; } }

/*
|--------------------------------------------------------------------------
| modules imports
|--------------------------------------------------------------------------
*/
main.-home .grid__col {
  width: 450px; }

main.-home .field.-firstName,
main.-home .grouped.fields.-checkbox {
  border: 1px solid transparent;
  margin-bottom: 25px; }

main.-home .recaptchaNote {
  margin: 0;
  margin-top: 15px;
  font-size: 12px;
  text-align: center; }

main.-home .recaptchaNote a {
  color: #1f1f1f; }

main.-home .recaptchaNote a:hover {
  text-decoration: none; }

main.-home .recaptchaNote a:visited {
  color: #1f1f1f; }

.grecaptcha-badge {
  visibility: hidden; }

main.-video .grid__col {
  width: 975px; }

main.-video .embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%; }

main.-video .embed-container iframe,
main.-video .embed-container object,
main.-video .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

main.-video .embed-container {
  margin-bottom: 1em; }

main.-video .form--video {
  padding: 0; }

main.-questionnaire .grid__col {
  width: 975px; }

main.-questionnaire .grouped.fields {
  border: 1px solid transparent;
  margin-bottom: 75px; }

main.-questionnaire .message.success {
  margin-bottom: 1em !important; }

/*
|--------------------------------------------------------------------------
| Vendors imports
|--------------------------------------------------------------------------
| ...
*/
/*
|--------------------------------------------------------------------------
| Namespaces - http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
|--------------------------------------------------------------------------
| o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could 
| potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
|
| c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently 
| looking at. Modifying these styles should be safe and have no side effects.
|
| u-: Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any 
| specific piece of UI. You will probably recognise this namespace from libraries and methodologies like SUIT.
|
| t-: Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.
|
| s-: Signify that a class creates a new styling context or Scope. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if
| not used wisely.
|
| is-, has-: Signify that the piece of UI in question is currently styled a certain way because of a state or condition. This stateful namespace is gorgeous, and comes from SMACSS. It tells us that
| the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
|
| _: Signify that this class is the worst of the worst—a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in order to force something to work. If we do this, we need 
| to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).
|
| js-: Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour. If you’re not a developer working with JavaScript, leave these 
| well alone.
|
| qa-: Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves 
| hooks in the DOM for non-CSS purposes.
*/