/*------------------------------------*\
  #BOX
\*------------------------------------*/
/*------------------------------------*\
  #ELLIPSIS
\*------------------------------------*/
/*------------------------------------*\
  #OUTLINE
\*------------------------------------*/
/*------------------------------------*\
  #POPOVERS
\*------------------------------------*/
/*------------------------------------*\
  #Borders
\*------------------------------------*/
/*------------------------------------*\
  #ELEVATION
\*------------------------------------*/
.rui {
  color: #222222;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
}
/* Headings */
.ruiH {
  color: #222222;
}
.ruiH1 {
  color: #222222;
  font-weight: 400;
  font-size: px(32);
}
.ruiH2 {
  color: #222222;
  font-weight: 400;
  font-size: px(24);
}
.ruiH3 {
  color: #222222;
  font-weight: 400;
  font-size: px(20);
}
.ruiH4 {
  color: #222222;
  font-weight: 700;
  font-size: px(16);
}
.ruiH5 {
  color: #222222;
  font-weight: 700;
  font-size: px(14);
}
.ruiH6 {
  color: #222222;
  font-weight: 700;
  font-size: px(12);
  text-transform: uppercase;
}
.ruiH--light {
  color: #767676;
  font-weight: 500;
}
/* Paragraph Text */
.ruiParagraph {
  color: #222222;
  font-size: px(14);
}
.ruiParagraph--light {
  color: #767676;
  font-weight: 300;
}
/* Tag Text */
.ruiTagText {
  font-size: px(11);
}
/* Links */
.ruiLink {
  color: #0052cc;
  text-decoration: none;
}
.ruiLink:hover {
  text-decoration: underline;
}
.ruiLink:focus {
  -webkit-box-shadow: inset 0 0 0 2px #4782da !important;
          box-shadow: inset 0 0 0 2px #4782da !important;
  outline: none;
}
body {
  color: #222222;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
}
/* Headings */
h1 {
  color: #222222;
  font-weight: 400;
  font-size: px(32);
}
h2 {
  color: #222222;
  font-weight: 400;
  font-size: px(24);
}
h3 {
  color: #222222;
  font-weight: 400;
  font-size: px(20);
}
h4 {
  color: #222222;
  font-weight: 700;
  font-size: px(16);
}
h5 {
  color: #222222;
  font-weight: 700;
  font-size: px(14);
}
h6 {
  color: #222222;
  font-weight: 700;
  font-size: px(12);
  text-transform: uppercase;
}
/* Paragraph */
p {
  color: #222222;
  font-size: px(14);
}
/* Links */
a {
  color: #0052cc;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus {
  -webkit-box-shadow: inset 0 0 0 2px #4782da !important;
          box-shadow: inset 0 0 0 2px #4782da !important;
  outline: none;
}