/**
 * =============================================================================
 * PUBLIC WEBSITE - STYLESHEET
 *
 * @package     Underztand
 * @since       Version 0.1
 *
 * @author      Vincent Cruz @ VAN Intelligence AB
 * @author URI  https://www.underztand.com
 * @license     Copyright VAN Intelligence AB. All rights reserved.
 * =============================================================================
**/

/**
 * =============================================================================
 * STYLESHEET CONFIGURATION
 *
 * @package     Underztand
 * @since       Version 0.1
 *
 * @author      Vincent Cruz @ VAN Intelligence AB
 * @author URI  https://www.underztand.com
 * @license     Copyright VAN Intelligence AB. All rights reserved.
 * =============================================================================
**/

/**
	* --------------------------------------------------------------------------
	* Colors
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* General properties
	* --------------------------------------------------------------------------
**/

/**
* ================================================================================
* MIXINS
* ================================================================================
**/

/**
	* --------------------------------------------------------------------------
	* Transform & Transition
	* --------------------------------------------------------------------------
**/

/**
	* TRANSITIONS
	*/

/**
	* TRANSFORM
	* Note: Remember to include translateZ() to trigger smooth GPU rendering
	* Note: Perspective must be set for parent wrapper for 3d translations (and thereby GPU rendering) to be enabled
	*/

/**
	* --------------------------------------------------------------------------
	* Helpers
	* --------------------------------------------------------------------------
**/

/**
	* Border radius
	*/

/**
	* Shadows
	*/

/**
	* Background images
	*/

/**
	* Linear gradient
	* Specify colors as comma separated string, e.g "red, #907FFF 50%"
	*
	* IMPORTANT! 
	* If using gradient to transparent, it is important to set a rgba value, e.g. rgba(255,255,255,0), not "transparent" keyword,
	* as Safari treats "transparent" as transparent black, which will render a gradient towards black.
	*/

/**
	* Radial gradient
	* Specify colors with string litterals, e.g. black 10%, red 20%, green 30%
	*/

/**
	* Cursor
	*/

/**
	* Hover color
	*/

/**
	* --------------------------------------------------------------------------
	* Flexbox
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* Svg
	* --------------------------------------------------------------------------
**/

/**
	* --------------------------------------------------------------------------
	* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
	* --------------------------------------------------------------------------
**/

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/*
==========================================================================
LAYOUT
==========================================================================
*/

html,
body {
  width: 100%;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: #3F3F82;
  background-color: #FFFFFF;
  margin: 0;
  position: relative;
  min-width: 320px;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

section {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 5% 0;
}

.widthNarrow {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
}

.gridWrapper {
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  justify-items: stretch;
  align-items: stretch;
}

.gw--gap0 {
  gap: 0;
}

.gw--gapMin {
  gap: 0.25rem;
}

.gw--columns {
  grid-auto-flow: column;
}

.gw--rows {
  grid-auto-flow: row;
}

.gw--center {
  align-items: center;
  justify-items: center;
}

.gw--auto {
  display: -ms-inline-grid;
  display: inline-grid;
}

.gw--vCenter {
  align-items: center;
}

.gw--hCenter {
  justify-items: center;
}

.gw--padded > * {
  padding: 2rem;
}

.gw--100 {
  grid-template-columns: repeat(1, 1fr);
}

.gw--50 {
  grid-template-columns: repeat(2, 1fr);
}

.gw--33 {
  grid-template-columns: repeat(3, 1fr);
}

.gw--25 {
  grid-template-columns: repeat(4, 1fr);
}

.gw--20 {
  grid-template-columns: repeat(5, 1fr);
}

.gw--33-67 {
  grid-template-columns: repeat(3, 1fr);
}

.gw--33-67:not(.gw--reverse) > *:nth-child(2n+0) {
  grid-column: span 2;
}

.gw--33-67.gw--reverse > *:nth-child(2n+1) {
  grid-column: span 2;
}

.gw--25-75 {
  grid-template-columns: repeat(4, 1fr);
}

.gw--25-75:not(.gw--reverse) > *:nth-child(2n+0) {
  grid-column: span 3;
}

.gw--25-75.gw--reverse > *:nth-child(2n+1) {
  grid-column: span 3;
}

.gw--fillHeight {
  grid-auto-flow: rows;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}

.gw--fillHeight > * {
  align-self: center;
}

.gw--fillHeight > *:first-child {
  align-self: start;
}

.gw--fillHeight > *:last-child {
  align-self: end;
}

.gw--fillHeight > .content {
  align-self: center;
  margin: 1rem 0;
}

.layout {
  padding: 5%;
  box-sizing: border-box;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.layout > .content {
  display: block;
  box-sizing: border-box;
  grid-area: content;
}

.layout > .image {
  display: block;
  box-sizing: border-box;
  grid-area: image;
}

.layout > .image .img {
  display: block;
}

.l--50,
.l--hero {
  grid-template-areas: "content image";
  grid-template-columns: 1fr 1fr;
}

.l--50.noImage,
.l--hero.noImage {
  grid-template-areas: "content empty";
}

.l--50.imageLeft,
.l--hero.imageLeft {
  grid-template-areas: "image content";
}

.l--50.imageLeft.noImage,
.l--hero.imageLeft.noImage {
  grid-template-areas: "empty content";
}

.l--100 {
  grid-template-areas: "content";
}

.l--box {
  max-width: 100%;
  padding: 0;
  gap: 0;
  grid-template-areas: "content empty";
}

.l--box .content {
  padding: 10%;
}

.l--box .image {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  left: auto;
}

.l--box .image .img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
}

.l--box.imageLeft {
  grid-template-areas: "empty content";
}

.l--box.imageLeft .image {
  left: 0;
  right: auto;
}

/*
==========================================================================
NAVIGATION
==========================================================================
*/

#topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 2rem 4rem;
  box-sizing: border-box;
  z-index: 100;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  background-color: rgba(255, 255, 255, 0);
}

#topBar .logo,
#topBar .logo svg {
  height: 2rem;
  width: auto;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#topBar .cta {
  display: inline-block;
  margin-left: 4rem;
}

#topBar .cta a {
  margin-left: 1rem;
}

#topBar .cta a:first-child {
  margin-left: 0;
}

#topBar nav {
  text-align: right;
  transition: all 300ms ease-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#topBar nav a {
  margin-left: 4rem;
  color: #F4F6FB;
}

#topBar nav a:first-child {
  margin-left: 0;
}

#topBar nav .current {
  font-weight: 700;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

#topBar.filled {
  background-color: rgba(255, 255, 255, 0.95);
  -o-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.05);
  padding: 1rem 4rem;
}

#topBar.filled nav a:not(.btn) {
  color: #3F3F82;
}

#topBar.filled .logo path,
#topBar.filled .logo polygon {
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  fill: #3F3F82 !important;
}

#topBar.filled .logo .logoText {
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#topBar.filled .logo .logoIcon path:last-child {
  fill: #907FFF !important;
}

#navToggle {
  font-size: 1rem;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: none;
  width: 4em;
  height: 4em;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #FF996B;
  color: #F4F6FB;
  z-index: 100;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
}

#navToggle span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 2px;
  width: 50%;
  background-color: #F4F6FB;
  border-radius: 2px;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#navToggle span:nth-child(2) {
  margin-top: -0.5em;
}

#navToggle span:nth-child(3) {
  margin-top: 0.5em;
}

.navExpanded #navToggle {
  opacity: 0;
  /* IE 9 */
  /* Safari */
  transform: scale(0, 0);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

/*
==========================================================================
CONTENT SPECIFIC
==========================================================================
*/

#hero {
  padding: 0;
}

#hero .bgImage svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: auto;
}

@-webkit-keyframes heroAnimation {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translate(10%, 0) scale(0.9, 0.9);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translate(0, 0) scale(1, 1);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes heroAnimation {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translate(10%, 0) scale(0.9, 0.9);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translate(0, 0) scale(1, 1);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes heroAnimationShadow {
  0% {
    -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }

  100% {
    -o-box-shadow: -10rem 8rem 8rem 0 rgba(0, 0, 0, 0.35);
    box-shadow: -10rem 8rem 8rem 0 rgba(0, 0, 0, 0.35);
  }
}

@keyframes heroAnimationShadow {
  0% {
    -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }

  100% {
    -o-box-shadow: -10rem 8rem 8rem 0 rgba(0, 0, 0, 0.35);
    box-shadow: -10rem 8rem 8rem 0 rgba(0, 0, 0, 0.35);
  }
}

#hero #deviceAnimationWrapper {
  position: absolute;
  display: block;
  right: 0%;
  top: 50%;
  left: 50%;
  width: 1400px;
  height: 1200px;
  /* IE 9 */
  /* Safari */
  transform: translate(-25%, -50%) scale(0.9, 0.9);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  grid-area: image;
}

#hero #deviceAnimation {
  position: absolute;
  width: 1400px;
  height: 1200px;
  opacity: 0;
}

#hero #deviceAnimation.animated {
  -webkit-animation: heroAnimation 1000ms forwards ease-in-out;
          animation: heroAnimation 1000ms forwards ease-in-out;
}

#hero #deviceAnimation .device {
  display: block;
  width: 1400px;
  height: 1200px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
}

#hero #deviceAnimation .animationWrapper {
  border-radius: 2rem 5rem 0rem 2rem;
  overflow: hidden;
  position: absolute;
  width: 784px;
  height: 1470px;
  top: 0;
  left: 50%;
  z-index: 0;
  /* IE 9 */
  /* Safari */
  transform: scale(0.59, 0.61) translate(-570px, -345px) translateZ(0) rotate(-29deg) skew(19deg, -5deg);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

#hero #deviceAnimation .animationWrapper.animated {
  -webkit-animation: heroAnimationShadow 1000ms forwards ease-in-out;
          animation: heroAnimationShadow 1000ms forwards ease-in-out;
}

#hero .image {
  z-index: 1;
  height: 100%;
  width: 50%;
  display: block;
  position: absolute;
  top: 0;
  right: 5%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

#competition #swirlBubbles {
  position: absolute;
  bottom: 0;
  left: 75%;
  width: auto;
  height: 110%;
}

#siteFooter {
  background-color: #0A0A33;
  padding: 5%;
}

#siteFooter .logo,
#siteFooter .logo svg {
  height: 2rem;
  width: auto;
  margin-bottom: 1rem;
}

#siteFooter a:not(.logo) {
  display: inline-block;
  color: #F4F6FB;
  display: inline-block;
  padding: 0.1em 0;
  opacity: 0.6;
}

#siteFooter a:not(.logo):hover {
  opacity: 1;
}

#siteFooter a:not(.logo).current {
  border-bottom: 1px solid #907FFF;
  color: #907FFF;
  opacity: 1;
}

#siteFooter nav a {
  margin-right: 2rem;
}

#siteFooter .content .login {
  color: #FF996B;
  opacity: 1;
}

#siteFooter .privacyPolicy {
  margin-right: 1rem;
}

#siteFooter .copyright {
  opacity: 0.25;
}

/*
==========================================================================
GRAPHICS / UI / UX
==========================================================================
*/

.icon {
  width: 1.5em;
  height: 1.5em;
  line-height: 1.65;
  display: inline-block;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  position: relative;
}

.icon path,
.icon circle,
.icon ellipse,
.icon rect,
.icon polygon,
.icon line,
.icon polyline {
  fill: #3F3F82;
}

.icon svg {
  text-align: center;
  width: 100%;
  height: auto;
  display: block;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.icon.i--large {
  width: 2.5em;
  height: 2.5em;
}

.icon.i--medium {
  width: 1em;
  height: 1em;
}

.icon.i--small {
  width: 0.75em;
  height: 0.75em;
}

.iconFill-positive path,
.iconFill-positive circle,
.iconFill-positive ellipse,
.iconFill-positive rect,
.iconFill-positive polygon,
.iconFill-positive line,
.iconFill-positive polyline {
  fill: #000000 !important;
}

.iconFill-positive .txt {
  color: #000000 !important;
}

.iconFill-offpos path,
.iconFill-offpos circle,
.iconFill-offpos ellipse,
.iconFill-offpos rect,
.iconFill-offpos polygon,
.iconFill-offpos line,
.iconFill-offpos polyline {
  fill: #120F2C !important;
}

.iconFill-offpos .txt {
  color: #120F2C !important;
}

.iconFill-offpos2 path,
.iconFill-offpos2 circle,
.iconFill-offpos2 ellipse,
.iconFill-offpos2 rect,
.iconFill-offpos2 polygon,
.iconFill-offpos2 line,
.iconFill-offpos2 polyline {
  fill: #1A1A3B !important;
}

.iconFill-offpos2 .txt {
  color: #1A1A3B !important;
}

.iconFill-negative path,
.iconFill-negative circle,
.iconFill-negative ellipse,
.iconFill-negative rect,
.iconFill-negative polygon,
.iconFill-negative line,
.iconFill-negative polyline {
  fill: #FFFFFF !important;
}

.iconFill-negative .txt {
  color: #FFFFFF !important;
}

.iconFill-offneg path,
.iconFill-offneg circle,
.iconFill-offneg ellipse,
.iconFill-offneg rect,
.iconFill-offneg polygon,
.iconFill-offneg line,
.iconFill-offneg polyline {
  fill: #F4F6FB !important;
}

.iconFill-offneg .txt {
  color: #F4F6FB !important;
}

.iconFill-offneg2 path,
.iconFill-offneg2 circle,
.iconFill-offneg2 ellipse,
.iconFill-offneg2 rect,
.iconFill-offneg2 polygon,
.iconFill-offneg2 line,
.iconFill-offneg2 polyline {
  fill: #DFE5F4 !important;
}

.iconFill-offneg2 .txt {
  color: #DFE5F4 !important;
}

.iconFill-1 path,
.iconFill-1 circle,
.iconFill-1 ellipse,
.iconFill-1 rect,
.iconFill-1 polygon,
.iconFill-1 line,
.iconFill-1 polyline {
  fill: #907FFF !important;
}

.iconFill-1 .txt {
  color: #907FFF !important;
}

.iconFill-1d path,
.iconFill-1d circle,
.iconFill-1d ellipse,
.iconFill-1d rect,
.iconFill-1d polygon,
.iconFill-1d line,
.iconFill-1d polyline {
  fill: #5942EB !important;
}

.iconFill-1d .txt {
  color: #5942EB !important;
}

.iconFill-2 path,
.iconFill-2 circle,
.iconFill-2 ellipse,
.iconFill-2 rect,
.iconFill-2 polygon,
.iconFill-2 line,
.iconFill-2 polyline {
  fill: #FF996B !important;
}

.iconFill-2 .txt {
  color: #FF996B !important;
}

.iconFill-2d path,
.iconFill-2d circle,
.iconFill-2d ellipse,
.iconFill-2d rect,
.iconFill-2d polygon,
.iconFill-2d line,
.iconFill-2d polyline {
  fill: #EB7540 !important;
}

.iconFill-2d .txt {
  color: #EB7540 !important;
}

.iconFill-3 path,
.iconFill-3 circle,
.iconFill-3 ellipse,
.iconFill-3 rect,
.iconFill-3 polygon,
.iconFill-3 line,
.iconFill-3 polyline {
  fill: #6ECFFF !important;
}

.iconFill-3 .txt {
  color: #6ECFFF !important;
}

.iconFill-3d path,
.iconFill-3d circle,
.iconFill-3d ellipse,
.iconFill-3d rect,
.iconFill-3d polygon,
.iconFill-3d line,
.iconFill-3d polyline {
  fill: #40B2EB !important;
}

.iconFill-3d .txt {
  color: #40B2EB !important;
}

.iconFill-4 path,
.iconFill-4 circle,
.iconFill-4 ellipse,
.iconFill-4 rect,
.iconFill-4 polygon,
.iconFill-4 line,
.iconFill-4 polyline {
  fill: #F79090 !important;
}

.iconFill-4 .txt {
  color: #F79090 !important;
}

.iconFill-4d path,
.iconFill-4d circle,
.iconFill-4d ellipse,
.iconFill-4d rect,
.iconFill-4d polygon,
.iconFill-4d line,
.iconFill-4d polyline {
  fill: #EB7373 !important;
}

.iconFill-4d .txt {
  color: #EB7373 !important;
}

.iconFill-5 path,
.iconFill-5 circle,
.iconFill-5 ellipse,
.iconFill-5 rect,
.iconFill-5 polygon,
.iconFill-5 line,
.iconFill-5 polyline {
  fill: #FFC16A !important;
}

.iconFill-5 .txt {
  color: #FFC16A !important;
}

.iconFill-5d path,
.iconFill-5d circle,
.iconFill-5d ellipse,
.iconFill-5d rect,
.iconFill-5d polygon,
.iconFill-5d line,
.iconFill-5d polyline {
  fill: #EBA340 !important;
}

.iconFill-5d .txt {
  color: #EBA340 !important;
}

.iconFill-6 path,
.iconFill-6 circle,
.iconFill-6 ellipse,
.iconFill-6 rect,
.iconFill-6 polygon,
.iconFill-6 line,
.iconFill-6 polyline {
  fill: #6483FC !important;
}

.iconFill-6 .txt {
  color: #6483FC !important;
}

.iconFill-6d path,
.iconFill-6d circle,
.iconFill-6d ellipse,
.iconFill-6d rect,
.iconFill-6d polygon,
.iconFill-6d line,
.iconFill-6d polyline {
  fill: #3F61E8 !important;
}

.iconFill-6d .txt {
  color: #3F61E8 !important;
}

.iconFill-7 path,
.iconFill-7 circle,
.iconFill-7 ellipse,
.iconFill-7 rect,
.iconFill-7 polygon,
.iconFill-7 line,
.iconFill-7 polyline {
  fill: #3F3F82 !important;
}

.iconFill-7 .txt {
  color: #3F3F82 !important;
}

.iconFill-7d path,
.iconFill-7d circle,
.iconFill-7d ellipse,
.iconFill-7d rect,
.iconFill-7d polygon,
.iconFill-7d line,
.iconFill-7d polyline {
  fill: #08086D !important;
}

.iconFill-7d .txt {
  color: #08086D !important;
}

.iconFill-8 path,
.iconFill-8 circle,
.iconFill-8 ellipse,
.iconFill-8 rect,
.iconFill-8 polygon,
.iconFill-8 line,
.iconFill-8 polyline {
  fill: #84EFAF !important;
}

.iconFill-8 .txt {
  color: #84EFAF !important;
}

.iconFill-success path,
.iconFill-success circle,
.iconFill-success ellipse,
.iconFill-success rect,
.iconFill-success polygon,
.iconFill-success line,
.iconFill-success polyline {
  fill: #84EFAF !important;
}

.iconFill-success .txt {
  color: #84EFAF !important;
}

.iconFill-error path,
.iconFill-error circle,
.iconFill-error ellipse,
.iconFill-error rect,
.iconFill-error polygon,
.iconFill-error line,
.iconFill-error polyline {
  fill: #F77777 !important;
}

.iconFill-error .txt {
  color: #F77777 !important;
}

.iconFill-site-bg path,
.iconFill-site-bg circle,
.iconFill-site-bg ellipse,
.iconFill-site-bg rect,
.iconFill-site-bg polygon,
.iconFill-site-bg line,
.iconFill-site-bg polyline {
  fill: #F4F6FB !important;
}

.iconFill-site-bg .txt {
  color: #F4F6FB !important;
}

.iconFill-notice path,
.iconFill-notice circle,
.iconFill-notice ellipse,
.iconFill-notice rect,
.iconFill-notice polygon,
.iconFill-notice line,
.iconFill-notice polyline {
  fill: #FF996B !important;
}

.iconFill-notice .txt {
  color: #FF996B !important;
}

.iconFill-open path,
.iconFill-open circle,
.iconFill-open ellipse,
.iconFill-open rect,
.iconFill-open polygon,
.iconFill-open line,
.iconFill-open polyline {
  fill: #907FFF !important;
}

.iconFill-open .txt {
  color: #907FFF !important;
}

.iconFill-resolved path,
.iconFill-resolved circle,
.iconFill-resolved ellipse,
.iconFill-resolved rect,
.iconFill-resolved polygon,
.iconFill-resolved line,
.iconFill-resolved polyline {
  fill: #6ECFFF !important;
}

.iconFill-resolved .txt {
  color: #6ECFFF !important;
}

.iconFill-investigating path,
.iconFill-investigating circle,
.iconFill-investigating ellipse,
.iconFill-investigating rect,
.iconFill-investigating polygon,
.iconFill-investigating line,
.iconFill-investigating polyline {
  fill: #FF996B !important;
}

.iconFill-investigating .txt {
  color: #FF996B !important;
}

.iconFill-hold path,
.iconFill-hold circle,
.iconFill-hold ellipse,
.iconFill-hold rect,
.iconFill-hold polygon,
.iconFill-hold line,
.iconFill-hold polyline {
  fill: #F79090 !important;
}

.iconFill-hold .txt {
  color: #F79090 !important;
}

.iconFill-closed path,
.iconFill-closed circle,
.iconFill-closed ellipse,
.iconFill-closed rect,
.iconFill-closed polygon,
.iconFill-closed line,
.iconFill-closed polyline {
  fill: #3F3F82 !important;
}

.iconFill-closed .txt {
  color: #3F3F82 !important;
}

.iconFill-worst path,
.iconFill-worst circle,
.iconFill-worst ellipse,
.iconFill-worst rect,
.iconFill-worst polygon,
.iconFill-worst line,
.iconFill-worst polyline {
  fill: #F79090 !important;
}

.iconFill-worst .txt {
  color: #F79090 !important;
}

.iconFill-bad path,
.iconFill-bad circle,
.iconFill-bad ellipse,
.iconFill-bad rect,
.iconFill-bad polygon,
.iconFill-bad line,
.iconFill-bad polyline {
  fill: #FF996B !important;
}

.iconFill-bad .txt {
  color: #FF996B !important;
}

.iconFill-neutral path,
.iconFill-neutral circle,
.iconFill-neutral ellipse,
.iconFill-neutral rect,
.iconFill-neutral polygon,
.iconFill-neutral line,
.iconFill-neutral polyline {
  fill: #6483FC !important;
}

.iconFill-neutral .txt {
  color: #6483FC !important;
}

.iconFill-good path,
.iconFill-good circle,
.iconFill-good ellipse,
.iconFill-good rect,
.iconFill-good polygon,
.iconFill-good line,
.iconFill-good polyline {
  fill: #6ECFFF !important;
}

.iconFill-good .txt {
  color: #6ECFFF !important;
}

.iconFill-best path,
.iconFill-best circle,
.iconFill-best ellipse,
.iconFill-best rect,
.iconFill-best polygon,
.iconFill-best line,
.iconFill-best polyline {
  fill: #84EFAF !important;
}

.iconFill-best .txt {
  color: #84EFAF !important;
}

.iconFill-unrated path,
.iconFill-unrated circle,
.iconFill-unrated ellipse,
.iconFill-unrated rect,
.iconFill-unrated polygon,
.iconFill-unrated line,
.iconFill-unrated polyline {
  fill: #3F3F82 !important;
}

.iconFill-unrated .txt {
  color: #3F3F82 !important;
}

.iconFill-t path,
.iconFill-t circle,
.iconFill-t ellipse,
.iconFill-t rect,
.iconFill-t polygon,
.iconFill-t line,
.iconFill-t polyline {
  fill: #3F3F82 !important;
}

.iconFill-t .txt {
  color: #3F3F82 !important;
}

.iconFill-t-strong path,
.iconFill-t-strong circle,
.iconFill-t-strong ellipse,
.iconFill-t-strong rect,
.iconFill-t-strong polygon,
.iconFill-t-strong line,
.iconFill-t-strong polyline {
  fill: #08086D !important;
}

.iconFill-t-strong .txt {
  color: #08086D !important;
}

.iconFill-t-light path,
.iconFill-t-light circle,
.iconFill-t-light ellipse,
.iconFill-t-light rect,
.iconFill-t-light polygon,
.iconFill-t-light line,
.iconFill-t-light polyline {
  fill: rgba(63, 63, 130, 0.6) !important;
}

.iconFill-t-light .txt {
  color: rgba(63, 63, 130, 0.6) !important;
}

.iconFill-t-neg path,
.iconFill-t-neg circle,
.iconFill-t-neg ellipse,
.iconFill-t-neg rect,
.iconFill-t-neg polygon,
.iconFill-t-neg line,
.iconFill-t-neg polyline {
  fill: #F4F6FB !important;
}

.iconFill-t-neg .txt {
  color: #F4F6FB !important;
}

.iconFill-t-neg-strong path,
.iconFill-t-neg-strong circle,
.iconFill-t-neg-strong ellipse,
.iconFill-t-neg-strong rect,
.iconFill-t-neg-strong polygon,
.iconFill-t-neg-strong line,
.iconFill-t-neg-strong polyline {
  fill: #FFFFFF !important;
}

.iconFill-t-neg-strong .txt {
  color: #FFFFFF !important;
}

.iconFill-t-neg-light path,
.iconFill-t-neg-light circle,
.iconFill-t-neg-light ellipse,
.iconFill-t-neg-light rect,
.iconFill-t-neg-light polygon,
.iconFill-t-neg-light line,
.iconFill-t-neg-light polyline {
  fill: rgba(223, 229, 244, 0.7) !important;
}

.iconFill-t-neg-light .txt {
  color: rgba(223, 229, 244, 0.7) !important;
}

.iconFill-border path,
.iconFill-border circle,
.iconFill-border ellipse,
.iconFill-border rect,
.iconFill-border polygon,
.iconFill-border line,
.iconFill-border polyline {
  fill: rgba(63, 63, 130, 0.1) !important;
}

.iconFill-border .txt {
  color: rgba(63, 63, 130, 0.1) !important;
}

.iconFill-border-light path,
.iconFill-border-light circle,
.iconFill-border-light ellipse,
.iconFill-border-light rect,
.iconFill-border-light polygon,
.iconFill-border-light line,
.iconFill-border-light polyline {
  fill: rgba(63, 63, 130, 0.05) !important;
}

.iconFill-border-light .txt {
  color: rgba(63, 63, 130, 0.05) !important;
}

.iconFill-border-strong path,
.iconFill-border-strong circle,
.iconFill-border-strong ellipse,
.iconFill-border-strong rect,
.iconFill-border-strong polygon,
.iconFill-border-strong line,
.iconFill-border-strong polyline {
  fill: rgba(63, 63, 130, 0.3) !important;
}

.iconFill-border-strong .txt {
  color: rgba(63, 63, 130, 0.3) !important;
}

.iconFill-7xd path,
.iconFill-7xd circle,
.iconFill-7xd ellipse,
.iconFill-7xd rect,
.iconFill-7xd polygon,
.iconFill-7xd line,
.iconFill-7xd polyline {
  fill: #0A0A33 !important;
}

.iconFill-7xd .txt {
  color: #0A0A33 !important;
}

.bg-positive {
  background-color: #000000;
}

.bg-offpos {
  background-color: #120F2C;
}

.bg-offpos2 {
  background-color: #1A1A3B;
}

.bg-negative {
  background-color: #FFFFFF;
}

.bg-offneg {
  background-color: #F4F6FB;
}

.bg-offneg2 {
  background-color: #DFE5F4;
}

.bg-1 {
  background-color: #907FFF;
}

.bg-1d {
  background-color: #5942EB;
}

.bg-2 {
  background-color: #FF996B;
}

.bg-2d {
  background-color: #EB7540;
}

.bg-3 {
  background-color: #6ECFFF;
}

.bg-3d {
  background-color: #40B2EB;
}

.bg-4 {
  background-color: #F79090;
}

.bg-4d {
  background-color: #EB7373;
}

.bg-5 {
  background-color: #FFC16A;
}

.bg-5d {
  background-color: #EBA340;
}

.bg-6 {
  background-color: #6483FC;
}

.bg-6d {
  background-color: #3F61E8;
}

.bg-7 {
  background-color: #3F3F82;
}

.bg-7d {
  background-color: #08086D;
}

.bg-8 {
  background-color: #84EFAF;
}

.bg-success {
  background-color: #84EFAF;
}

.bg-error {
  background-color: #F77777;
}

.bg-site-bg {
  background-color: #F4F6FB;
}

.bg-notice {
  background-color: #FF996B;
}

.bg-open {
  background-color: #907FFF;
}

.bg-resolved {
  background-color: #6ECFFF;
}

.bg-investigating {
  background-color: #FF996B;
}

.bg-hold {
  background-color: #F79090;
}

.bg-closed {
  background-color: #3F3F82;
}

.bg-worst {
  background-color: #F79090;
}

.bg-bad {
  background-color: #FF996B;
}

.bg-neutral {
  background-color: #6483FC;
}

.bg-good {
  background-color: #6ECFFF;
}

.bg-best {
  background-color: #84EFAF;
}

.bg-unrated {
  background-color: #3F3F82;
}

.bg-t {
  background-color: #3F3F82;
}

.bg-t-strong {
  background-color: #08086D;
}

.bg-t-light {
  background-color: rgba(63, 63, 130, 0.6);
}

.bg-t-neg {
  background-color: #F4F6FB;
}

.bg-t-neg-strong {
  background-color: #FFFFFF;
}

.bg-t-neg-light {
  background-color: rgba(223, 229, 244, 0.7);
}

.bg-border {
  background-color: rgba(63, 63, 130, 0.1);
}

.bg-border-light {
  background-color: rgba(63, 63, 130, 0.05);
}

.bg-border-strong {
  background-color: rgba(63, 63, 130, 0.3);
}

.bg-7xd {
  background-color: #0A0A33;
}

.bgDarken {
  background-color: rgba(0, 0, 0, 0.1);
}

.bgTop {
  background-position: top center;
}

.bgTopLeft {
  background-position: top left;
}

.bgTopRight {
  background-position: top right;
}

.bgBottom {
  background-position: bottom center;
}

.bgBottomLeft {
  background-position: bottom left;
}

.bgBottomRight {
  background-position: bottom right;
}

.bgLeft {
  background-position: left center;
}

.bgRight {
  background-position: right center;
}

.bgContain {
  background-size: contain;
}

.bgAuto {
  background-size: auto;
}

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  box-sizing: border-box;
}

.hidden {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

.logo {
  display: inline-block;
  height: auto;
  width: auto;
}

.shadow {
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
}

.shadow.s--1 {
  -o-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.05);
}

.shadow.s--2 {
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
}

.shadow.s--3 {
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
}

.shadow.s--strong {
  -o-box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
}

#modal {
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

#modal.visible {
  visibility: visible;
  opacity: 1;
}

#modal #modalContent {
  background-color: #F4F6FB;
  position: fixed;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  width: 98%;
  height: 70%;
  max-width: 45rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px solid rgba(63, 63, 130, 0.1);
  -o-box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}

#modal #modalContent .actions {
  text-align: right;
  margin-top: 1rem;
}

#modal #modalContent .actions a {
  display: inline-block;
  margin-right: 1rem;
}

#modal #modalContent .actions a:last-child {
  margin-right: 0;
}

#modal #modalContent.modalAlert {
  width: 25rem;
  height: auto;
  max-width: 98%;
}

.dragging {
  transition: none !important;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

/*
==========================================================================
FORMS
==========================================================================
*/

label,
.label {
  display: block;
}

.formField {
  padding: 1rem 2rem;
  box-sizing: border-box;
  width: 100%;
  display: block;
  background-color: #F4F6FB;
  border: 1px solid rgba(63, 63, 130, 0.1);
  border-radius: 1em;
}

.formField:focus {
  background-color: #FFFFFF;
  outline: none;
}

.formField::-moz-placeholder {
  color: #F4F6FB !important;
}

.formField:-ms-input-placeholder {
  color: #F4F6FB !important;
}

.formField::placeholder {
  color: #F4F6FB !important;
}

.formOptionButton {
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background-color: rgba(63, 63, 130, 0.25);
  border-radius: 1em;
  cursor: pointer;
  white-space: normal;
}

.formOptionButton:hover {
  background-color: rgba(63, 63, 130, 0.6);
}

.formOptionButton .gridWrapper {
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

.formOptionButton.selected {
  background-color: rgba(63, 63, 130, 0.9);
}

.formOptionButton.selected .icon path,
.formOptionButton.selected .icon circle,
.formOptionButton.selected .icon ellipse,
.formOptionButton.selected .icon rect,
.formOptionButton.selected .icon polygon,
.formOptionButton.selected .icon line,
.formOptionButton.selected .icon polyline {
  fill: #6ECFFF;
}

/*
==========================================================================
TYPOGRAPHY
==========================================================================
*/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Lato, sans-serif;
  font-weight: 700;
  color: #08086D;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1;
  display: block;
  position: relative;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child {
  margin-bottom: 0;
}

h1.hasSubtitle,
h2.hasSubtitle,
h3.hasSubtitle,
h4.hasSubtitle,
h5.hasSubtitle,
h6.hasSubtitle,
.h1.hasSubtitle,
.h2.hasSubtitle,
.h3.hasSubtitle,
.h4.hasSubtitle,
.h5.hasSubtitle,
.h6.hasSubtitle {
  margin-bottom: 0;
}

h1.border,
h2.border,
h3.border,
h4.border,
h5.border,
h6.border,
.h1.border,
.h2.border,
.h3.border,
.h4.border,
.h5.border,
.h6.border {
  border-bottom: 1px solid rgba(63, 63, 130, 0.3);
  padding-bottom: 0.5em;
}

h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span,
.h1 > span,
.h2 > span,
.h3 > span,
.h4 > span,
.h5 > span,
.h6 > span {
  vertical-align: middle;
}

h1 .thin,
h2 .thin,
h3 .thin,
h4 .thin,
h5 .thin,
h6 .thin,
.h1 .thin,
.h2 .thin,
.h3 .thin,
.h4 .thin,
.h5 .thin,
.h6 .thin {
  font-weight: 300;
}

h1,
.h1 {
  font-size: 2.25rem;
  margin-bottom: 2rem;
}

h1 + .subtitle,
.h1 + .subtitle {
  font-size: 1.25rem;
}

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

h3,
.h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

h3 + .subtitle,
.h3 + .subtitle {
  margin-top: 0.5rem;
}

h4,
.h4 {
  font-size: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

h4 + .subtitle,
.h4 + .subtitle {
  margin-top: 0.5rem;
}

h5,
.h5 {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: #3F3F82;
}

h5 + .subtitle,
.h5 + .subtitle {
  margin-top: 0.5rem;
  font-size: 1em;
}

h6,
.h6 {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0;
}

.hxl {
  font-size: 3rem;
}

.hxxl {
  font-size: 5rem;
}

.subtitle {
  color: rgba(63, 63, 130, 0.6);
  display: block;
  font-weight: 300;
  text-transform: none;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.text-positive {
  color: #000000 !important;
}

.text-offpos {
  color: #120F2C !important;
}

.text-offpos2 {
  color: #1A1A3B !important;
}

.text-negative {
  color: #FFFFFF !important;
}

.text-offneg {
  color: #F4F6FB !important;
}

.text-offneg2 {
  color: #DFE5F4 !important;
}

.text-1 {
  color: #907FFF !important;
}

.text-1d {
  color: #5942EB !important;
}

.text-2 {
  color: #FF996B !important;
}

.text-2d {
  color: #EB7540 !important;
}

.text-3 {
  color: #6ECFFF !important;
}

.text-3d {
  color: #40B2EB !important;
}

.text-4 {
  color: #F79090 !important;
}

.text-4d {
  color: #EB7373 !important;
}

.text-5 {
  color: #FFC16A !important;
}

.text-5d {
  color: #EBA340 !important;
}

.text-6 {
  color: #6483FC !important;
}

.text-6d {
  color: #3F61E8 !important;
}

.text-7 {
  color: #3F3F82 !important;
}

.text-7d {
  color: #08086D !important;
}

.text-8 {
  color: #84EFAF !important;
}

.text-success {
  color: #84EFAF !important;
}

.text-error {
  color: #F77777 !important;
}

.text-site-bg {
  color: #F4F6FB !important;
}

.text-notice {
  color: #FF996B !important;
}

.text-open {
  color: #907FFF !important;
}

.text-resolved {
  color: #6ECFFF !important;
}

.text-investigating {
  color: #FF996B !important;
}

.text-hold {
  color: #F79090 !important;
}

.text-closed {
  color: #3F3F82 !important;
}

.text-worst {
  color: #F79090 !important;
}

.text-bad {
  color: #FF996B !important;
}

.text-neutral {
  color: #6483FC !important;
}

.text-good {
  color: #6ECFFF !important;
}

.text-best {
  color: #84EFAF !important;
}

.text-unrated {
  color: #3F3F82 !important;
}

.text-t {
  color: #3F3F82 !important;
}

.text-t-strong {
  color: #08086D !important;
}

.text-t-light {
  color: rgba(63, 63, 130, 0.6) !important;
}

.text-t-neg {
  color: #F4F6FB !important;
}

.text-t-neg-strong {
  color: #FFFFFF !important;
}

.text-t-neg-light {
  color: rgba(223, 229, 244, 0.7) !important;
}

.text-border {
  color: rgba(63, 63, 130, 0.1) !important;
}

.text-border-light {
  color: rgba(63, 63, 130, 0.05) !important;
}

.text-border-strong {
  color: rgba(63, 63, 130, 0.3) !important;
}

.text-7xd {
  color: #0A0A33 !important;
}

.textInverted {
  color: #F4F6FB;
}

.textInverted .subtitle,
.textInverted .unit {
  color: rgba(223, 229, 244, 0.7);
}

.textInverted .title,
.textInverted .headline {
  color: #FFFFFF;
}

.textInverted .icon path,
.textInverted .icon circle,
.textInverted .icon ellipse,
.textInverted .icon rect,
.textInverted .icon polygon,
.textInverted .icon line,
.textInverted .icon polyline {
  fill: #F4F6FB;
}

.textInverted p a,
.textInverted span a,
.textInverted table a {
  color: #F4F6FB;
}

.textInverted.ti--strong {
  color: #FFFFFF;
}

.textInverted.ti--strong .subtitle,
.textInverted.ti--strong .unit {
  color: #F4F6FB;
}

.textInverted.ti--strong .icon path,
.textInverted.ti--strong .icon circle,
.textInverted.ti--strong .icon ellipse,
.textInverted.ti--strong .icon rect,
.textInverted.ti--strong .icon polygon,
.textInverted.ti--strong .icon line,
.textInverted.ti--strong .icon polyline {
  fill: #FFFFFF;
}

.textInverted .formField {
  border-color: #F4F6FB;
  color: #F4F6FB;
  background-color: transparent;
}

.textInverted .formField:focus {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

.textInverted .formField::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(223, 229, 244, 0.7);
}

.textInverted .formField::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(223, 229, 244, 0.7);
}

.textInverted .formField:-ms-input-placeholder {
  /* IE 10+ */
  color: rgba(223, 229, 244, 0.7);
}

.textInverted .formField:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(223, 229, 244, 0.7);
}

b,
.textBold {
  font-weight: 700;
}

i,
.textItalic {
  font-style: italic;
}

.textNormal {
  font-weight: 300;
}

em,
.em {
  font-style: italic;
  color: rgba(63, 63, 130, 0.6);
  font-size: 1.25rem;
}

hr {
  border-width: 0 0 1px 0;
  border-color: rgba(63, 63, 130, 0.1);
  border-style: solid;
  margin: 2rem auto;
}

hr:first-child {
  margin-top: 0;
}

hr:last-child {
  margin-bottom: 0;
}

hr.hr--negative {
  border-color: rgba(223, 229, 244, 0.7);
}

hr.hr--strong {
  border-bottom-width: 2px;
}

em {
  font-weight: 300;
  font-style: italic;
}

.fineprint {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 300;
}

.meta {
  font-size: 0.8rem;
  color: rgba(63, 63, 130, 0.6);
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.textRight {
  text-align: right;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textSmall {
  font-size: 0.8rem;
}

.textRegular {
  font-size: 16px;
}

a {
  font-weight: 300;
  text-decoration: none;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  display: inline-block;
  color: #3F3F82;
  box-sizing: border-box;
}

p a,
span a,
table a {
  color: #907FFF;
}

p a:hover,
span a:hover,
table a:hover {
  color: #7e6bff;
}

.btn,
.btnSubmit,
button {
  display: inline-block;
  padding: 0.8rem 3rem;
  color: #FFFFFF;
  background-color: #907FFF;
  border-radius: 2rem;
  border: 1px solid #907FFF;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  white-space: nowrap;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover,
.btnSubmit:hover,
button:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
  color: #FFFFFF;
}

.btn.loading,
.btnSubmit.loading,
button.loading {
  opacity: 0.6;
}

.btn.btn--slim,
.btnSubmit.btn--slim,
button.btn--slim {
  font-size: 0.8rem;
  padding: 0.5em 1.5em;
}

.btn.btn--fullWidth,
.btnSubmit.btn--fullWidth,
button.btn--fullWidth {
  display: block;
}

.btn.btn--outline,
.btnSubmit.btn--outline,
button.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--outline:hover,
.btnSubmit.btn--outline:hover,
button.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--transparent,
.btnSubmit.btn--transparent,
button.btn--transparent {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
}

.btn.btn--transparent:hover,
.btnSubmit.btn--transparent:hover,
button.btn--transparent:hover {
  background-color: #F4F6FB;
}

.btn.btn--icon,
.btnSubmit.btn--icon,
button.btn--icon {
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: 0.5rem;
}

.btn.btn--icon .icon,
.btnSubmit.btn--icon .icon,
button.btn--icon .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  /* IE 9 */
  /* Safari */
  transform: translate(-50%, -50%);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.btn span,
.btnSubmit span,
button span {
  display: inline-block;
  vertical-align: middle;
}

.btn.btn--positive,
.btnSubmit.btn--positive,
button.btn--positive {
  background-color: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.btn.btn--positive:hover,
.btnSubmit.btn--positive:hover,
button.btn--positive:hover {
  background-color: black;
  border-color: black;
}

.btn.btn--positive.btn--outline,
.btnSubmit.btn--positive.btn--outline,
button.btn--positive.btn--outline {
  background-color: transparent;
  color: #000000;
}

.btn.btn--positive.btn--outline:hover,
.btnSubmit.btn--positive.btn--outline:hover,
button.btn--positive.btn--outline:hover {
  background-color: transparent;
  color: black;
  border-color: black;
}

.btn.btn--offpos,
.btnSubmit.btn--offpos,
button.btn--offpos {
  background-color: #120F2C;
  border-color: #120F2C;
  color: #FFFFFF;
}

.btn.btn--offpos:hover,
.btnSubmit.btn--offpos:hover,
button.btn--offpos:hover {
  background-color: #0c0a1d;
  border-color: #0c0a1d;
}

.btn.btn--offpos.btn--outline,
.btnSubmit.btn--offpos.btn--outline,
button.btn--offpos.btn--outline {
  background-color: transparent;
  color: #120F2C;
}

.btn.btn--offpos.btn--outline:hover,
.btnSubmit.btn--offpos.btn--outline:hover,
button.btn--offpos.btn--outline:hover {
  background-color: transparent;
  color: #0c0a1d;
  border-color: #0c0a1d;
}

.btn.btn--offpos2,
.btnSubmit.btn--offpos2,
button.btn--offpos2 {
  background-color: #1A1A3B;
  border-color: #1A1A3B;
  color: #FFFFFF;
}

.btn.btn--offpos2:hover,
.btnSubmit.btn--offpos2:hover,
button.btn--offpos2:hover {
  background-color: #14142d;
  border-color: #14142d;
}

.btn.btn--offpos2.btn--outline,
.btnSubmit.btn--offpos2.btn--outline,
button.btn--offpos2.btn--outline {
  background-color: transparent;
  color: #1A1A3B;
}

.btn.btn--offpos2.btn--outline:hover,
.btnSubmit.btn--offpos2.btn--outline:hover,
button.btn--offpos2.btn--outline:hover {
  background-color: transparent;
  color: #14142d;
  border-color: #14142d;
}

.btn.btn--negative,
.btnSubmit.btn--negative,
button.btn--negative {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn.btn--negative:hover,
.btnSubmit.btn--negative:hover,
button.btn--negative:hover {
  background-color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--negative.btn--outline,
.btnSubmit.btn--negative.btn--outline,
button.btn--negative.btn--outline {
  background-color: transparent;
  color: #FFFFFF;
}

.btn.btn--negative.btn--outline:hover,
.btnSubmit.btn--negative.btn--outline:hover,
button.btn--negative.btn--outline:hover {
  background-color: transparent;
  color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--offneg,
.btnSubmit.btn--offneg,
button.btn--offneg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--offneg:hover,
.btnSubmit.btn--offneg:hover,
button.btn--offneg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--offneg.btn--outline,
.btnSubmit.btn--offneg.btn--outline,
button.btn--offneg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--offneg.btn--outline:hover,
.btnSubmit.btn--offneg.btn--outline:hover,
button.btn--offneg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--offneg2,
.btnSubmit.btn--offneg2,
button.btn--offneg2 {
  background-color: #DFE5F4;
  border-color: #DFE5F4;
  color: #FFFFFF;
}

.btn.btn--offneg2:hover,
.btnSubmit.btn--offneg2:hover,
button.btn--offneg2:hover {
  background-color: #d0d9ef;
  border-color: #d0d9ef;
}

.btn.btn--offneg2.btn--outline,
.btnSubmit.btn--offneg2.btn--outline,
button.btn--offneg2.btn--outline {
  background-color: transparent;
  color: #DFE5F4;
}

.btn.btn--offneg2.btn--outline:hover,
.btnSubmit.btn--offneg2.btn--outline:hover,
button.btn--offneg2.btn--outline:hover {
  background-color: transparent;
  color: #d0d9ef;
  border-color: #d0d9ef;
}

.btn.btn--1,
.btnSubmit.btn--1,
button.btn--1 {
  background-color: #907FFF;
  border-color: #907FFF;
  color: #FFFFFF;
}

.btn.btn--1:hover,
.btnSubmit.btn--1:hover,
button.btn--1:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--1.btn--outline,
.btnSubmit.btn--1.btn--outline,
button.btn--1.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--1.btn--outline:hover,
.btnSubmit.btn--1.btn--outline:hover,
button.btn--1.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--1d,
.btnSubmit.btn--1d,
button.btn--1d {
  background-color: #5942EB;
  border-color: #5942EB;
  color: #FFFFFF;
}

.btn.btn--1d:hover,
.btnSubmit.btn--1d:hover,
button.btn--1d:hover {
  background-color: #4930e9;
  border-color: #4930e9;
}

.btn.btn--1d.btn--outline,
.btnSubmit.btn--1d.btn--outline,
button.btn--1d.btn--outline {
  background-color: transparent;
  color: #5942EB;
}

.btn.btn--1d.btn--outline:hover,
.btnSubmit.btn--1d.btn--outline:hover,
button.btn--1d.btn--outline:hover {
  background-color: transparent;
  color: #4930e9;
  border-color: #4930e9;
}

.btn.btn--2,
.btnSubmit.btn--2,
button.btn--2 {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--2:hover,
.btnSubmit.btn--2:hover,
button.btn--2:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--2.btn--outline,
.btnSubmit.btn--2.btn--outline,
button.btn--2.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--2.btn--outline:hover,
.btnSubmit.btn--2.btn--outline:hover,
button.btn--2.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--2d,
.btnSubmit.btn--2d,
button.btn--2d {
  background-color: #EB7540;
  border-color: #EB7540;
  color: #FFFFFF;
}

.btn.btn--2d:hover,
.btnSubmit.btn--2d:hover,
button.btn--2d:hover {
  background-color: #e9682e;
  border-color: #e9682e;
}

.btn.btn--2d.btn--outline,
.btnSubmit.btn--2d.btn--outline,
button.btn--2d.btn--outline {
  background-color: transparent;
  color: #EB7540;
}

.btn.btn--2d.btn--outline:hover,
.btnSubmit.btn--2d.btn--outline:hover,
button.btn--2d.btn--outline:hover {
  background-color: transparent;
  color: #e9682e;
  border-color: #e9682e;
}

.btn.btn--3,
.btnSubmit.btn--3,
button.btn--3 {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--3:hover,
.btnSubmit.btn--3:hover,
button.btn--3:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--3.btn--outline,
.btnSubmit.btn--3.btn--outline,
button.btn--3.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--3.btn--outline:hover,
.btnSubmit.btn--3.btn--outline:hover,
button.btn--3.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--3d,
.btnSubmit.btn--3d,
button.btn--3d {
  background-color: #40B2EB;
  border-color: #40B2EB;
  color: #FFFFFF;
}

.btn.btn--3d:hover,
.btnSubmit.btn--3d:hover,
button.btn--3d:hover {
  background-color: #2eabe9;
  border-color: #2eabe9;
}

.btn.btn--3d.btn--outline,
.btnSubmit.btn--3d.btn--outline,
button.btn--3d.btn--outline {
  background-color: transparent;
  color: #40B2EB;
}

.btn.btn--3d.btn--outline:hover,
.btnSubmit.btn--3d.btn--outline:hover,
button.btn--3d.btn--outline:hover {
  background-color: transparent;
  color: #2eabe9;
  border-color: #2eabe9;
}

.btn.btn--4,
.btnSubmit.btn--4,
button.btn--4 {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--4:hover,
.btnSubmit.btn--4:hover,
button.btn--4:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--4.btn--outline,
.btnSubmit.btn--4.btn--outline,
button.btn--4.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--4.btn--outline:hover,
.btnSubmit.btn--4.btn--outline:hover,
button.btn--4.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--4d,
.btnSubmit.btn--4d,
button.btn--4d {
  background-color: #EB7373;
  border-color: #EB7373;
  color: #FFFFFF;
}

.btn.btn--4d:hover,
.btnSubmit.btn--4d:hover,
button.btn--4d:hover {
  background-color: #e86161;
  border-color: #e86161;
}

.btn.btn--4d.btn--outline,
.btnSubmit.btn--4d.btn--outline,
button.btn--4d.btn--outline {
  background-color: transparent;
  color: #EB7373;
}

.btn.btn--4d.btn--outline:hover,
.btnSubmit.btn--4d.btn--outline:hover,
button.btn--4d.btn--outline:hover {
  background-color: transparent;
  color: #e86161;
  border-color: #e86161;
}

.btn.btn--5,
.btnSubmit.btn--5,
button.btn--5 {
  background-color: #FFC16A;
  border-color: #FFC16A;
  color: #3F3F82;
}

.btn.btn--5:hover,
.btnSubmit.btn--5:hover,
button.btn--5:hover {
  background-color: #ffb956;
  border-color: #ffb956;
}

.btn.btn--5.btn--outline,
.btnSubmit.btn--5.btn--outline,
button.btn--5.btn--outline {
  background-color: transparent;
  color: #FFC16A;
}

.btn.btn--5.btn--outline:hover,
.btnSubmit.btn--5.btn--outline:hover,
button.btn--5.btn--outline:hover {
  background-color: transparent;
  color: #ffb956;
  border-color: #ffb956;
}

.btn.btn--5d,
.btnSubmit.btn--5d,
button.btn--5d {
  background-color: #EBA340;
  border-color: #EBA340;
  color: #FFFFFF;
}

.btn.btn--5d:hover,
.btnSubmit.btn--5d:hover,
button.btn--5d:hover {
  background-color: #e99a2e;
  border-color: #e99a2e;
}

.btn.btn--5d.btn--outline,
.btnSubmit.btn--5d.btn--outline,
button.btn--5d.btn--outline {
  background-color: transparent;
  color: #EBA340;
}

.btn.btn--5d.btn--outline:hover,
.btnSubmit.btn--5d.btn--outline:hover,
button.btn--5d.btn--outline:hover {
  background-color: transparent;
  color: #e99a2e;
  border-color: #e99a2e;
}

.btn.btn--6,
.btnSubmit.btn--6,
button.btn--6 {
  background-color: #6483FC;
  border-color: #6483FC;
  color: #FFFFFF;
}

.btn.btn--6:hover,
.btnSubmit.btn--6:hover,
button.btn--6:hover {
  background-color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--6.btn--outline,
.btnSubmit.btn--6.btn--outline,
button.btn--6.btn--outline {
  background-color: transparent;
  color: #6483FC;
}

.btn.btn--6.btn--outline:hover,
.btnSubmit.btn--6.btn--outline:hover,
button.btn--6.btn--outline:hover {
  background-color: transparent;
  color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--6d,
.btnSubmit.btn--6d,
button.btn--6d {
  background-color: #3F61E8;
  border-color: #3F61E8;
  color: #FFFFFF;
}

.btn.btn--6d:hover,
.btnSubmit.btn--6d:hover,
button.btn--6d:hover {
  background-color: #2d52e6;
  border-color: #2d52e6;
}

.btn.btn--6d.btn--outline,
.btnSubmit.btn--6d.btn--outline,
button.btn--6d.btn--outline {
  background-color: transparent;
  color: #3F61E8;
}

.btn.btn--6d.btn--outline:hover,
.btnSubmit.btn--6d.btn--outline:hover,
button.btn--6d.btn--outline:hover {
  background-color: transparent;
  color: #2d52e6;
  border-color: #2d52e6;
}

.btn.btn--7,
.btnSubmit.btn--7,
button.btn--7 {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--7:hover,
.btnSubmit.btn--7:hover,
button.btn--7:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--7.btn--outline,
.btnSubmit.btn--7.btn--outline,
button.btn--7.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--7.btn--outline:hover,
.btnSubmit.btn--7.btn--outline:hover,
button.btn--7.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--7d,
.btnSubmit.btn--7d,
button.btn--7d {
  background-color: #08086D;
  border-color: #08086D;
  color: #FFFFFF;
}

.btn.btn--7d:hover,
.btnSubmit.btn--7d:hover,
button.btn--7d:hover {
  background-color: #07075a;
  border-color: #07075a;
}

.btn.btn--7d.btn--outline,
.btnSubmit.btn--7d.btn--outline,
button.btn--7d.btn--outline {
  background-color: transparent;
  color: #08086D;
}

.btn.btn--7d.btn--outline:hover,
.btnSubmit.btn--7d.btn--outline:hover,
button.btn--7d.btn--outline:hover {
  background-color: transparent;
  color: #07075a;
  border-color: #07075a;
}

.btn.btn--8,
.btnSubmit.btn--8,
button.btn--8 {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--8:hover,
.btnSubmit.btn--8:hover,
button.btn--8:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--8.btn--outline,
.btnSubmit.btn--8.btn--outline,
button.btn--8.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--8.btn--outline:hover,
.btnSubmit.btn--8.btn--outline:hover,
button.btn--8.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--success,
.btnSubmit.btn--success,
button.btn--success {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--success:hover,
.btnSubmit.btn--success:hover,
button.btn--success:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--success.btn--outline,
.btnSubmit.btn--success.btn--outline,
button.btn--success.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--success.btn--outline:hover,
.btnSubmit.btn--success.btn--outline:hover,
button.btn--success.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--error,
.btnSubmit.btn--error,
button.btn--error {
  background-color: #F77777;
  border-color: #F77777;
  color: #FFFFFF;
}

.btn.btn--error:hover,
.btnSubmit.btn--error:hover,
button.btn--error:hover {
  background-color: #f66464;
  border-color: #f66464;
}

.btn.btn--error.btn--outline,
.btnSubmit.btn--error.btn--outline,
button.btn--error.btn--outline {
  background-color: transparent;
  color: #F77777;
}

.btn.btn--error.btn--outline:hover,
.btnSubmit.btn--error.btn--outline:hover,
button.btn--error.btn--outline:hover {
  background-color: transparent;
  color: #f66464;
  border-color: #f66464;
}

.btn.btn--site-bg,
.btnSubmit.btn--site-bg,
button.btn--site-bg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--site-bg:hover,
.btnSubmit.btn--site-bg:hover,
button.btn--site-bg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--site-bg.btn--outline,
.btnSubmit.btn--site-bg.btn--outline,
button.btn--site-bg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--site-bg.btn--outline:hover,
.btnSubmit.btn--site-bg.btn--outline:hover,
button.btn--site-bg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--notice,
.btnSubmit.btn--notice,
button.btn--notice {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--notice:hover,
.btnSubmit.btn--notice:hover,
button.btn--notice:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--notice.btn--outline,
.btnSubmit.btn--notice.btn--outline,
button.btn--notice.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--notice.btn--outline:hover,
.btnSubmit.btn--notice.btn--outline:hover,
button.btn--notice.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--open,
.btnSubmit.btn--open,
button.btn--open {
  background-color: #907FFF;
  border-color: #907FFF;
  color: #FFFFFF;
}

.btn.btn--open:hover,
.btnSubmit.btn--open:hover,
button.btn--open:hover {
  background-color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--open.btn--outline,
.btnSubmit.btn--open.btn--outline,
button.btn--open.btn--outline {
  background-color: transparent;
  color: #907FFF;
}

.btn.btn--open.btn--outline:hover,
.btnSubmit.btn--open.btn--outline:hover,
button.btn--open.btn--outline:hover {
  background-color: transparent;
  color: #7e6bff;
  border-color: #7e6bff;
}

.btn.btn--resolved,
.btnSubmit.btn--resolved,
button.btn--resolved {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--resolved:hover,
.btnSubmit.btn--resolved:hover,
button.btn--resolved:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--resolved.btn--outline,
.btnSubmit.btn--resolved.btn--outline,
button.btn--resolved.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--resolved.btn--outline:hover,
.btnSubmit.btn--resolved.btn--outline:hover,
button.btn--resolved.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--investigating,
.btnSubmit.btn--investigating,
button.btn--investigating {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--investigating:hover,
.btnSubmit.btn--investigating:hover,
button.btn--investigating:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--investigating.btn--outline,
.btnSubmit.btn--investigating.btn--outline,
button.btn--investigating.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--investigating.btn--outline:hover,
.btnSubmit.btn--investigating.btn--outline:hover,
button.btn--investigating.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--hold,
.btnSubmit.btn--hold,
button.btn--hold {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--hold:hover,
.btnSubmit.btn--hold:hover,
button.btn--hold:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--hold.btn--outline,
.btnSubmit.btn--hold.btn--outline,
button.btn--hold.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--hold.btn--outline:hover,
.btnSubmit.btn--hold.btn--outline:hover,
button.btn--hold.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--closed,
.btnSubmit.btn--closed,
button.btn--closed {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--closed:hover,
.btnSubmit.btn--closed:hover,
button.btn--closed:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--closed.btn--outline,
.btnSubmit.btn--closed.btn--outline,
button.btn--closed.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--closed.btn--outline:hover,
.btnSubmit.btn--closed.btn--outline:hover,
button.btn--closed.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--worst,
.btnSubmit.btn--worst,
button.btn--worst {
  background-color: #F79090;
  border-color: #F79090;
  color: #FFFFFF;
}

.btn.btn--worst:hover,
.btnSubmit.btn--worst:hover,
button.btn--worst:hover {
  background-color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--worst.btn--outline,
.btnSubmit.btn--worst.btn--outline,
button.btn--worst.btn--outline {
  background-color: transparent;
  color: #F79090;
}

.btn.btn--worst.btn--outline:hover,
.btnSubmit.btn--worst.btn--outline:hover,
button.btn--worst.btn--outline:hover {
  background-color: transparent;
  color: #f67d7d;
  border-color: #f67d7d;
}

.btn.btn--bad,
.btnSubmit.btn--bad,
button.btn--bad {
  background-color: #FF996B;
  border-color: #FF996B;
  color: #FFFFFF;
}

.btn.btn--bad:hover,
.btnSubmit.btn--bad:hover,
button.btn--bad:hover {
  background-color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--bad.btn--outline,
.btnSubmit.btn--bad.btn--outline,
button.btn--bad.btn--outline {
  background-color: transparent;
  color: #FF996B;
}

.btn.btn--bad.btn--outline:hover,
.btnSubmit.btn--bad.btn--outline:hover,
button.btn--bad.btn--outline:hover {
  background-color: transparent;
  color: #ff8b57;
  border-color: #ff8b57;
}

.btn.btn--neutral,
.btnSubmit.btn--neutral,
button.btn--neutral {
  background-color: #6483FC;
  border-color: #6483FC;
  color: #FFFFFF;
}

.btn.btn--neutral:hover,
.btnSubmit.btn--neutral:hover,
button.btn--neutral:hover {
  background-color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--neutral.btn--outline,
.btnSubmit.btn--neutral.btn--outline,
button.btn--neutral.btn--outline {
  background-color: transparent;
  color: #6483FC;
}

.btn.btn--neutral.btn--outline:hover,
.btnSubmit.btn--neutral.btn--outline:hover,
button.btn--neutral.btn--outline:hover {
  background-color: transparent;
  color: #5073fc;
  border-color: #5073fc;
}

.btn.btn--good,
.btnSubmit.btn--good,
button.btn--good {
  background-color: #6ECFFF;
  border-color: #6ECFFF;
  color: #FFFFFF;
}

.btn.btn--good:hover,
.btnSubmit.btn--good:hover,
button.btn--good:hover {
  background-color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--good.btn--outline,
.btnSubmit.btn--good.btn--outline,
button.btn--good.btn--outline {
  background-color: transparent;
  color: #6ECFFF;
}

.btn.btn--good.btn--outline:hover,
.btnSubmit.btn--good.btn--outline:hover,
button.btn--good.btn--outline:hover {
  background-color: transparent;
  color: #5ac8ff;
  border-color: #5ac8ff;
}

.btn.btn--best,
.btnSubmit.btn--best,
button.btn--best {
  background-color: #84EFAF;
  border-color: #84EFAF;
  color: #FFFFFF;
}

.btn.btn--best:hover,
.btnSubmit.btn--best:hover,
button.btn--best:hover {
  background-color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--best.btn--outline,
.btnSubmit.btn--best.btn--outline,
button.btn--best.btn--outline {
  background-color: transparent;
  color: #84EFAF;
}

.btn.btn--best.btn--outline:hover,
.btnSubmit.btn--best.btn--outline:hover,
button.btn--best.btn--outline:hover {
  background-color: transparent;
  color: #72eda3;
  border-color: #72eda3;
}

.btn.btn--unrated,
.btnSubmit.btn--unrated,
button.btn--unrated {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--unrated:hover,
.btnSubmit.btn--unrated:hover,
button.btn--unrated:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--unrated.btn--outline,
.btnSubmit.btn--unrated.btn--outline,
button.btn--unrated.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--unrated.btn--outline:hover,
.btnSubmit.btn--unrated.btn--outline:hover,
button.btn--unrated.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--t,
.btnSubmit.btn--t,
button.btn--t {
  background-color: #3F3F82;
  border-color: #3F3F82;
  color: #FFFFFF;
}

.btn.btn--t:hover,
.btnSubmit.btn--t:hover,
button.btn--t:hover {
  background-color: #383874;
  border-color: #383874;
}

.btn.btn--t.btn--outline,
.btnSubmit.btn--t.btn--outline,
button.btn--t.btn--outline {
  background-color: transparent;
  color: #3F3F82;
}

.btn.btn--t.btn--outline:hover,
.btnSubmit.btn--t.btn--outline:hover,
button.btn--t.btn--outline:hover {
  background-color: transparent;
  color: #383874;
  border-color: #383874;
}

.btn.btn--t-strong,
.btnSubmit.btn--t-strong,
button.btn--t-strong {
  background-color: #08086D;
  border-color: #08086D;
  color: #FFFFFF;
}

.btn.btn--t-strong:hover,
.btnSubmit.btn--t-strong:hover,
button.btn--t-strong:hover {
  background-color: #07075a;
  border-color: #07075a;
}

.btn.btn--t-strong.btn--outline,
.btnSubmit.btn--t-strong.btn--outline,
button.btn--t-strong.btn--outline {
  background-color: transparent;
  color: #08086D;
}

.btn.btn--t-strong.btn--outline:hover,
.btnSubmit.btn--t-strong.btn--outline:hover,
button.btn--t-strong.btn--outline:hover {
  background-color: transparent;
  color: #07075a;
  border-color: #07075a;
}

.btn.btn--t-light,
.btnSubmit.btn--t-light,
button.btn--t-light {
  background-color: rgba(63, 63, 130, 0.6);
  border-color: rgba(63, 63, 130, 0.6);
  color: #FFFFFF;
}

.btn.btn--t-light:hover,
.btnSubmit.btn--t-light:hover,
button.btn--t-light:hover {
  background-color: rgba(56, 56, 116, 0.6);
  border-color: rgba(56, 56, 116, 0.6);
}

.btn.btn--t-light.btn--outline,
.btnSubmit.btn--t-light.btn--outline,
button.btn--t-light.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.6);
}

.btn.btn--t-light.btn--outline:hover,
.btnSubmit.btn--t-light.btn--outline:hover,
button.btn--t-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.6);
  border-color: rgba(56, 56, 116, 0.6);
}

.btn.btn--t-neg,
.btnSubmit.btn--t-neg,
button.btn--t-neg {
  background-color: #F4F6FB;
  border-color: #F4F6FB;
  color: #FFFFFF;
}

.btn.btn--t-neg:hover,
.btnSubmit.btn--t-neg:hover,
button.btn--t-neg:hover {
  background-color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--t-neg.btn--outline,
.btnSubmit.btn--t-neg.btn--outline,
button.btn--t-neg.btn--outline {
  background-color: transparent;
  color: #F4F6FB;
}

.btn.btn--t-neg.btn--outline:hover,
.btnSubmit.btn--t-neg.btn--outline:hover,
button.btn--t-neg.btn--outline:hover {
  background-color: transparent;
  color: #e5eaf6;
  border-color: #e5eaf6;
}

.btn.btn--t-neg-strong,
.btnSubmit.btn--t-neg-strong,
button.btn--t-neg-strong {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn.btn--t-neg-strong:hover,
.btnSubmit.btn--t-neg-strong:hover,
button.btn--t-neg-strong:hover {
  background-color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--t-neg-strong.btn--outline,
.btnSubmit.btn--t-neg-strong.btn--outline,
button.btn--t-neg-strong.btn--outline {
  background-color: transparent;
  color: #FFFFFF;
}

.btn.btn--t-neg-strong.btn--outline:hover,
.btnSubmit.btn--t-neg-strong.btn--outline:hover,
button.btn--t-neg-strong.btn--outline:hover {
  background-color: transparent;
  color: whitesmoke;
  border-color: whitesmoke;
}

.btn.btn--t-neg-light,
.btnSubmit.btn--t-neg-light,
button.btn--t-neg-light {
  background-color: rgba(223, 229, 244, 0.7);
  border-color: rgba(223, 229, 244, 0.7);
  color: #FFFFFF;
}

.btn.btn--t-neg-light:hover,
.btnSubmit.btn--t-neg-light:hover,
button.btn--t-neg-light:hover {
  background-color: rgba(208, 217, 239, 0.7);
  border-color: rgba(208, 217, 239, 0.7);
}

.btn.btn--t-neg-light.btn--outline,
.btnSubmit.btn--t-neg-light.btn--outline,
button.btn--t-neg-light.btn--outline {
  background-color: transparent;
  color: rgba(223, 229, 244, 0.7);
}

.btn.btn--t-neg-light.btn--outline:hover,
.btnSubmit.btn--t-neg-light.btn--outline:hover,
button.btn--t-neg-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(208, 217, 239, 0.7);
  border-color: rgba(208, 217, 239, 0.7);
}

.btn.btn--border,
.btnSubmit.btn--border,
button.btn--border {
  background-color: rgba(63, 63, 130, 0.1);
  border-color: rgba(63, 63, 130, 0.1);
  color: #FFFFFF;
}

.btn.btn--border:hover,
.btnSubmit.btn--border:hover,
button.btn--border:hover {
  background-color: rgba(56, 56, 116, 0.1);
  border-color: rgba(56, 56, 116, 0.1);
}

.btn.btn--border.btn--outline,
.btnSubmit.btn--border.btn--outline,
button.btn--border.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.1);
}

.btn.btn--border.btn--outline:hover,
.btnSubmit.btn--border.btn--outline:hover,
button.btn--border.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.1);
  border-color: rgba(56, 56, 116, 0.1);
}

.btn.btn--border-light,
.btnSubmit.btn--border-light,
button.btn--border-light {
  background-color: rgba(63, 63, 130, 0.05);
  border-color: rgba(63, 63, 130, 0.05);
  color: #FFFFFF;
}

.btn.btn--border-light:hover,
.btnSubmit.btn--border-light:hover,
button.btn--border-light:hover {
  background-color: rgba(56, 56, 116, 0.05);
  border-color: rgba(56, 56, 116, 0.05);
}

.btn.btn--border-light.btn--outline,
.btnSubmit.btn--border-light.btn--outline,
button.btn--border-light.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.05);
}

.btn.btn--border-light.btn--outline:hover,
.btnSubmit.btn--border-light.btn--outline:hover,
button.btn--border-light.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.05);
  border-color: rgba(56, 56, 116, 0.05);
}

.btn.btn--border-strong,
.btnSubmit.btn--border-strong,
button.btn--border-strong {
  background-color: rgba(63, 63, 130, 0.3);
  border-color: rgba(63, 63, 130, 0.3);
  color: #FFFFFF;
}

.btn.btn--border-strong:hover,
.btnSubmit.btn--border-strong:hover,
button.btn--border-strong:hover {
  background-color: rgba(56, 56, 116, 0.3);
  border-color: rgba(56, 56, 116, 0.3);
}

.btn.btn--border-strong.btn--outline,
.btnSubmit.btn--border-strong.btn--outline,
button.btn--border-strong.btn--outline {
  background-color: transparent;
  color: rgba(63, 63, 130, 0.3);
}

.btn.btn--border-strong.btn--outline:hover,
.btnSubmit.btn--border-strong.btn--outline:hover,
button.btn--border-strong.btn--outline:hover {
  background-color: transparent;
  color: rgba(56, 56, 116, 0.3);
  border-color: rgba(56, 56, 116, 0.3);
}

.btn.btn--7xd,
.btnSubmit.btn--7xd,
button.btn--7xd {
  background-color: #0A0A33;
  border-color: #0A0A33;
  color: #FFFFFF;
}

.btn.btn--7xd:hover,
.btnSubmit.btn--7xd:hover,
button.btn--7xd:hover {
  background-color: #070722;
  border-color: #070722;
}

.btn.btn--7xd.btn--outline,
.btnSubmit.btn--7xd.btn--outline,
button.btn--7xd.btn--outline {
  background-color: transparent;
  color: #0A0A33;
}

.btn.btn--7xd.btn--outline:hover,
.btnSubmit.btn--7xd.btn--outline:hover,
button.btn--7xd.btn--outline:hover {
  background-color: transparent;
  color: #070722;
  border-color: #070722;
}

/*
==========================================================================
UTILITY
==========================================================================
*/

.m0 {
  margin: 0;
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.ml0 {
  margin-left: 0;
}

.mr0 {
  margin-right: 0;
}

.m1 {
  margin: 1rem;
}

.mt1 {
  margin-top: 1rem;
}

.mb1 {
  margin-bottom: 1rem;
}

.ml1 {
  margin-left: 1rem;
}

.mr1 {
  margin-right: 1rem;
}

.m2 {
  margin: 2rem;
}

.mt2 {
  margin-top: 2rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.ml2 {
  margin-left: 2rem;
}

.mr2 {
  margin-right: 2rem;
}

.m3 {
  margin: 4rem;
}

.mt3 {
  margin-top: 4rem;
}

.mb3 {
  margin-bottom: 4rem;
}

.ml3 {
  margin-left: 4rem;
}

.mr3 {
  margin-right: 4rem;
}

.p0 {
  padding: 0;
}

.pt0 {
  padding-top: 0;
}

.pb0 {
  padding-bottom: 0;
}

.pl0 {
  padding-left: 0;
}

.pr0 {
  padding-right: 0;
}

.p1 {
  padding: 1rem;
}

.pt1 {
  padding-top: 1rem;
}

.pb1 {
  padding-bottom: 1rem;
}

.pl1 {
  padding-left: 1rem;
}

.pr1 {
  padding-right: 1rem;
}

.p2 {
  padding: 2rem;
}

.pt2 {
  padding-top: 2rem;
}

.pb2 {
  padding-bottom: 2rem;
}

.pl2 {
  padding-left: 2rem;
}

.pr2 {
  padding-right: 2rem;
}

.rounded {
  border-radius: 1rem;
}

.heightScreen {
  min-height: 100vh;
}

.heightScreen75 {
  min-height: 75vh;
}

.heightScreen66 {
  min-height: 66vh;
}

.heightScreen50 {
  min-height: 50vh;
}

.heightScreen33 {
  min-height: 33vh;
}

/*
==========================================================================
ANIMATIONS
==========================================================================
*/

.animate {
  transition: none 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.animated {
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.animateTypewriter {
  position: relative;
}

.animateTypewriter .txt {
  vertical-align: middle;
  margin-right: 0.05em;
}

.animateTypewriter .cursor {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 1em;
  background-color: #F4F6FB;
  /* IE 9 */
  /* Safari */
  transform: scale(1, 0);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  overflow: 0;
}

.animateTypewriter .cursor.visible {
  -webkit-animation: fadeInOut 1s infinite ease-in-out;
          animation: fadeInOut 1s infinite ease-in-out;
  /* IE 9 */
  /* Safari */
  transform: scale(1, 1);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateX(-4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateX(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateX(-4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateX(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateX(4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateX(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateX(4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateX(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateY(-4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateY(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateY(-4rem);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateY(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateY(4rem) translateZ(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateY(0) translateZ(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: translateY(4rem) translateZ(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: translateY(0) translateZ(0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

.animate.fade {
  opacity: 0;
}

.animate.fade.animated {
  -webkit-animation: fadeIn 1000ms forwards ease-in-out;
          animation: fadeIn 1000ms forwards ease-in-out;
}

.animate.fade.animated.left {
  -webkit-animation: fadeInLeft 1000ms forwards ease-in-out;
          animation: fadeInLeft 1000ms forwards ease-in-out;
}

.animate.fade.animated.right {
  -webkit-animation: fadeInRight 1000ms forwards ease-in-out;
          animation: fadeInRight 1000ms forwards ease-in-out;
}

.animate.fade.animated.top {
  -webkit-animation: fadeInTop 1000ms forwards ease-in-out;
          animation: fadeInTop 1000ms forwards ease-in-out;
}

.animate.fade.animated.bottom {
  -webkit-animation: fadeInBottom 1000ms forwards ease-in-out;
          animation: fadeInBottom 1000ms forwards ease-in-out;
}

@-webkit-keyframes scaleUp {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scaleX(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes scaleUp {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scaleX(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes scaleUpLeft {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: left center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: left center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes scaleUpLeft {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: left center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: left center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes scaleUpRight {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: right center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: right center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes scaleUpRight {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: right center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: right center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes scaleUpTop {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: top center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: top center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes scaleUpTop {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: top center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: top center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes scaleUpBottom {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: bottom center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: bottom center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes scaleUpBottom {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 0);
    /* Standard syntax */
    perspective: none;
    transform-origin: bottom center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: bottom center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

.animate.scale {
  opacity: 0;
  /* IE 9 */
  /* Safari */
  transform: scale(0, 0);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.scale.animated {
  -webkit-animation: scaleUp 1000ms forwards ease-in-out;
          animation: scaleUp 1000ms forwards ease-in-out;
}

.animate.scale.animated.left {
  -webkit-animation: scaleUpLeft 1000ms forwards ease-in-out;
          animation: scaleUpLeft 1000ms forwards ease-in-out;
}

.animate.scale.animated.right {
  -webkit-animation: scaleUpRight 1000ms forwards ease-in-out;
          animation: scaleUpRight 1000ms forwards ease-in-out;
}

.animate.scale.animated.top {
  -webkit-animation: scaleUpTop 1000ms forwards ease-in-out;
          animation: scaleUpTop 1000ms forwards ease-in-out;
}

.animate.scale.animated.bottom {
  -webkit-animation: scaleUpBottom 1000ms forwards ease-in-out;
          animation: scaleUpBottom 1000ms forwards ease-in-out;
}

@-webkit-keyframes swellIn {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1.1, 1.1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes swellIn {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1.1, 1.1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@-webkit-keyframes swellOut {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1.1, 1.1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes swellOut {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1.1, 1.1);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

.animate.swell {
  opacity: 0;
}

.animate.swell.in {
  /* IE 9 */
  /* Safari */
  transform: scale(1.1, 1.1);
  /* Standard syntax */
  perspective: none;
  transform-origin: center center;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.swell.in.animated {
  -webkit-animation: swellIn 1500ms forwards ease-in-out;
          animation: swellIn 1500ms forwards ease-in-out;
}

.animate.swell.out {
  /* IE 9 */
  /* Safari */
  transform: scale(1, 1);
  /* Standard syntax */
  perspective: none;
  transform-origin: center center;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.swell.out.animated {
  -webkit-animation: swellOut 1500ms forwards ease-in-out;
          animation: swellOut 1500ms forwards ease-in-out;
}

.animate.border {
  border: none;
}

.animate.borderAnimated {
  opacity: 0;
  /* IE 9 */
  /* Safari */
  transform: scaleX(0);
  /* Standard syntax */
  perspective: none;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.borderAnimated.animated.left {
  -webkit-animation: scaleUpLeft 500ms forwards ease-in-out;
          animation: scaleUpLeft 500ms forwards ease-in-out;
}

.animate.borderAnimated.animated.right {
  -webkit-animation: scaleUpRight 500ms forwards ease-in-out;
          animation: scaleUpRight 500ms forwards ease-in-out;
}

@-webkit-keyframes swirls {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 0) rotate(-180deg) translateZ(0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1) rotate(0deg) translateZ(0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@keyframes swirls {
  0% {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 0) rotate(-180deg) translateZ(0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  100% {
    opacity: 1;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1) rotate(0deg) translateZ(0);
    /* Standard syntax */
    perspective: none;
    transform-origin: center center;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

.animate.swirls path {
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.swirls path.animated {
  -webkit-animation: swirls 1000ms ease-out 0ms forwards;
          animation: swirls 1000ms ease-out 0ms forwards;
}

.animate.swirls circle {
  opacity: 0;
  transition: all 300ms ease-in-out;
  /*
  Do nothing since we do not want to override any previously set parameters. 
  Don't even set this to inherit, since this may override parameters.
  */
}

.animate.swirls circle.animated {
  -webkit-animation: scaleUp 1000ms ease-out 500ms forwards;
          animation: scaleUp 1000ms ease-out 500ms forwards;
}

.animate.delay1 {
  -webkit-animation-delay: 100ms !important;
          animation-delay: 100ms !important;
}

.animate.delay2 {
  -webkit-animation-delay: 200ms !important;
          animation-delay: 200ms !important;
}

.animate.delay3 {
  -webkit-animation-delay: 300ms !important;
          animation-delay: 300ms !important;
}

.animate.delay4 {
  -webkit-animation-delay: 400ms !important;
          animation-delay: 400ms !important;
}

.animate.delay5 {
  -webkit-animation-delay: 500ms !important;
          animation-delay: 500ms !important;
}

.animate.delay6 {
  -webkit-animation-delay: 600ms !important;
          animation-delay: 600ms !important;
}

.animate.delay7 {
  -webkit-animation-delay: 700ms !important;
          animation-delay: 700ms !important;
}

.animate.delay8 {
  -webkit-animation-delay: 800ms !important;
          animation-delay: 800ms !important;
}

.animate.delay9 {
  -webkit-animation-delay: 900ms !important;
          animation-delay: 900ms !important;
}

.animate.delay10 {
  -webkit-animation-delay: 1000ms !important;
          animation-delay: 1000ms !important;
}

.animate.slow {
  -webkit-animation-duration: 1500ms !important;
          animation-duration: 1500ms !important;
}

/*
==========================================================================
RESPONSIVE
==========================================================================
*/

/**
 * =============================================================================
 * PUBLIC WEBSITE - RESPONSIVE STYLESHEET
 *
 * @package     Underztand
 * @since       Version 0.1
 *
 * @author      Vincent Cruz @ VAN Intelligence AB
 * @author URI  https://www.underztand.com
 * @license     Copyright VAN Intelligence AB. All rights reserved.
 * =============================================================================
**/

/**
 * =============================================================================
 * HANDHELD DEVICES
 *
 * *** Note ***
 * Make sure to sync these breakpoints with javascripts
 * =============================================================================
**/

@media screen and (orientation: portrait) and (max-width: 1400px), screen and (max-height: 650px), screen and (max-width: 850px) {
  h1.border,
  h2.border,
  h3.border,
  h4.border,
  h5.border,
  h6.border,
  .h1.border,
  .h2.border,
  .h3.border,
  .h4.border,
  .h5.border,
  .h6.border {
    padding-bottom: 0;
  }

  h1.border > svg,
  h2.border > svg,
  h3.border > svg,
  h4.border > svg,
  h5.border > svg,
  h6.border > svg,
  .h1.border > svg,
  .h2.border > svg,
  .h3.border > svg,
  .h4.border > svg,
  .h5.border > svg,
  .h6.border > svg {
    opacity: 0;
    visibility: hidden;
  }

  section {
    padding: 4rem 0;
  }

  .sectionHero {
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-areas: "content" "image";
    grid-template-columns: 1fr;
  }

  .sectionHero .bgImage {
    grid-area: image;
    position: relative;
    padding: 40%;
  }

  .sectionHero .layout {
    grid-area: content;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .clip .layout {
    margin-top: 4rem;
  }

  .layout {
    text-align: center;
  }

  .layout:not(.l--hero) {
    min-height: 0;
  }

  .layout > .image {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }

  .l--50,
  .l--hero {
    grid-template-areas: "content" "image";
    grid-template-columns: 1fr;
  }

  .l--50.noImage,
  .l--hero.noImage {
    grid-template-areas: "content";
    gap: 0;
  }

  .l--50.imageLeft,
  .l--hero.imageLeft {
    grid-template-areas: "content" "image";
  }

  .l--50.imageLeft.noImage,
  .l--hero.imageLeft.noImage {
    grid-template-areas: "content";
    gap: 0;
  }

  .l--box .image,
  .l--box.imageLeft .image {
    position: relative;
    padding: 40%;
    width: 100%;
    max-width: none;
  }

  .l--box .content,
  .l--box.imageLeft .content {
    padding: 4rem 5%;
  }

  .gw--20,
  .gw--25,
  .gw--33,
  .gw--50,
  .gw--33-67,
  .gw--25-75 {
    grid-template-columns: 1fr;
  }

  .gw--padded {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .gw--padded > * {
    padding: 0;
  }

  #public_home_page #hero {
    overflow: visible;
  }

  #public_home_page #hero .bgImage svg {
    width: auto;
    height: 75%;
  }

  #public_home_page #hero .content {
    padding-top: 6rem;
    padding-bottom: 30rem;
  }

  #public_home_page #hero #deviceAnimationWrapper {
    /* IE 9 */
    /* Safari */
    transform: translate(-50%, -35%) scale(0.38);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  #siteFooter {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #siteFooter .content {
    grid-auto-flow: row;
  }

  #siteFooter nav a {
    margin: 0.5em;
  }

  #siteFooter .legal {
    text-align: center;
  }

  #siteFooter .copyright {
    display: block;
  }

  #siteFooter .copyright span {
    display: block;
  }

  #navToggle {
    display: block;
  }

  #topBar {
    padding: 2rem;
    text-align: center;
  }

  #topBar nav,
  #topBar.filled nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    text-align: left;
    background-color: rgba(8, 8, 109, 0.9);
    color: #F4F6FB;
    padding: 6em 1em 1em 1em;
    box-sizing: border-box;
  }

  #topBar nav a:not(.btn),
  #topBar.filled nav a:not(.btn) {
    display: block;
    margin: 0;
    padding: 1em;
    color: #F4F6FB;
  }

  #topBar nav .current,
  #topBar.filled nav .current {
    border: none;
    background-color: rgba(144, 127, 255, 0.6);
    border-radius: 0.5rem;
  }

  #topBar .cta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    margin-left: 0;
    padding: 1em;
    box-sizing: border-box;
  }

  #topBar .cta a {
    display: block;
    padding: 0.5em;
    margin: 0 0 1em 0;
    text-align: center;
    font-size: 1rem;
  }

  #topBar .cta a:last-child {
    margin-bottom: 0;
  }

  #topBar.filled {
    -o-box-shadow: none;
    box-shadow: none;
    padding: 0;
    height: 0;
    background-color: transparent;
  }

  #topBar.filled .logoLink {
    opacity: 0;
    /* IE 9 */
    /* Safari */
    transform: scale(0, 0);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  #topBar.navExpanded {
    transition: all 300ms ease-in-out;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    padding: 2rem;
  }

  #topBar.navExpanded nav {
    /* IE 9 */
    /* Safari */
    transform: translateX(-100%);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }

  #topBar.navExpanded .logoLink {
    z-index: 100;
    /* IE 9 */
    /* Safari */
    transform: scale(1, 1);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    opacity: 1;
  }

  #topBar.navExpanded .logo path,
  #topBar.navExpanded .logo polygon {
    fill: #F4F6FB !important;
  }

  #topBar.navExpanded .logo .logoText {
    opacity: 1;
  }

  .formOptionButton,
  .formField {
    padding: 1rem;
  }

  .res-w700-bgPos--leftCenter {
    background-position: left center;
  }

  .res-w700-bgPos--leftCenter2 {
    background-position: 25% center;
  }

  .res-w700-bgPos--rightCenter {
    background-position: right center;
  }

  .res-w700-bgPos--rightCenter2 {
    background-position: 75% center;
  }

  .res-w700-bgPos--topCenter {
    background-position: top center;
  }

  .res-w700-bgPos--topCenter2 {
    background-position: center 25%;
  }

  .res-w700-bgPos--bottomCenter {
    background-position: bottom center;
  }

  .res-w700-bgPos--bottomCenter2 {
    background-position: center 75%;
  }

  .res-w700-bgSize--125 {
    background-size: auto 125%;
  }

  .res-w700-bgSize--150 {
    background-size: auto 150%;
  }

  .res-w700-bgOverlay::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(8, 8, 109, 0.25) 33%, rgba(8, 8, 109, 0.85) 80%);
  }

  .res-w700-bgOverlay.weak::after {
    background-image: linear-gradient(180deg, rgba(8, 8, 109, 0.1) 33%, rgba(8, 8, 109, 0.35) 80%);
  }
}

/**
 * =============================================================================
 * CUSTOM ORIENTATIONS AND SCREEN SIZES
 * =============================================================================
**/

@media screen and (orientation: landscape) and (min-height: 901px) and (max-height: 1100px) {
  #public_home_page #hero #deviceAnimationWrapper {
    /* IE 9 */
    /* Safari */
    transform: translate(-25%, -50%) scale(0.7);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@media screen and (orientation: landscape) and (min-height: 651px) and (max-height: 900px) {
  #public_home_page #hero #deviceAnimationWrapper {
    /* IE 9 */
    /* Safari */
    transform: translate(-30%, -50%) scale(0.55);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@media screen and (orientation: portrait) and (min-height: 900px) and (max-width: 1400px) {
  #public_home_page #hero #deviceAnimationWrapper {
    /* IE 9 */
    /* Safari */
    transform: translate(-50%, -25%) scale(0.6);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@media screen and (orientation: portrait) and (min-height: 1400px) and (max-width: 1400px) {
  #public_home_page #hero #deviceAnimationWrapper {
    /* IE 9 */
    /* Safari */
    transform: translate(-50%, -15%) scale(0.8);
    /* Standard syntax */
    perspective: none;
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
    /*
    Do nothing since we do not want to override any previously set parameters. 
    Don't even set this to inherit, since this may override parameters.
    */
  }
}

@media screen and (orientation: portrait) and (min-width: 1000px) {
  html,
  body {
    font-size: 18px;
  }
}

@media screen and (orientation: landscape) and (max-width: 1400px), screen and (orientation: portrait) and (max-width: 700px) {
  html,
  body {
    font-size: 14px;
  }
}

@media screen and (orientation: landscape) and (max-width: 1000px) {
  #topBar nav a {
    margin-left: 2rem;
  }

  #topBar nav .cta {
    margin-left: 2rem;
  }
}

@media screen and (max-width: 700px), screen and (max-width: 1100px) and (orientation: landscape) {
  .hxl {
    font-size: 2.25rem;
  }

  .hxxl {
    font-size: 3rem;
  }
}

@media screen and (orientation: portrait) and (min-width: 600px) {
  #navToggle {
    font-size: 1.25rem;
  }

  #navToggle span {
    height: 3px;
  }
}

@media screen and (min-width: 2000px) {
  html,
  body {
    font-size: 18px;
  }
}

@media screen and (min-width: 2400px) {
  html,
  body {
    font-size: 20px;
  }
}