/*
	Importing SCSS Files

	- Do not include the leading underscore '_'
	- Do not include the file extension

	Example:

@import "page-layouts/page-layout";

*/
header,
footer {
  font-size: 1rem;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif; }
  header a,
  footer a {
    color: inherit; }
    header a:hover,
    footer a:hover {
      color: inherit; }

header,
footer {
  /*
		Style Text Elements
		Based on:
		http://type-scale.com/?size=16&scale=1.414&text=A%20Visual%20Type%20Scale&webfont=Libre+Baskerville&font-family=%27Libre%20Baskerville%27,%20serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333
	*/
  /*
		Modifiers for Text Elements
	*/ }
  header h1, header h2, header h3, header h4, header h5, header h6, header td, header li, header p, header figcaption,
  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6,
  footer td,
  footer li,
  footer p,
  footer figcaption {
    font-size: 1rem;
    font-weight: normal;
    margin: 1rem 0; }
  header ul, header ol,
  footer ul,
  footer ol {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2rem; }
  header li,
  footer li {
    font-size: 1rem;
    line-height: 1.2rem; }
  header p, header td, header address, header time,
  footer p,
  footer td,
  footer address,
  footer time {
    line-height: 1.45rem;
    font-size: 1rem; }
  header p svg,
  footer p svg {
    width: 12px;
    height: 12px;
    margin-right: 4px; }
  header a,
  footer a {
    color: inherit;
    text-decoration: none; }
  header .mega-header,
  footer .mega-header {
    font-size: 5.5rem;
    line-height: 5.7rem;
    font-weight: 700; }
  header .header,
  footer .header {
    font-size: 4rem;
    line-height: 4.3rem;
    font-weight: 700; }
  header .title,
  footer .title {
    font-size: 2.4rem;
    font-weight: 300; }
  header .title-small,
  footer .title-small {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1; }
  header .title-sub,
  footer .title-sub {
    font-size: 1.25rem;
    font-weight: 600; }
  header .quote,
  footer .quote {
    font-style: 1.35rem;
    font-style: italic;
    line-height: 1.6rem;
    font-weight: 300; }
  header .highlight,
  footer .highlight {
    font-size: 0.75rem;
    font-weight: bold;
    color: #cf102b; }
  header .detail,
  footer .detail {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1rem; }
  header .code,
  footer .code {
    color: #cf102b; }
  header .cutline, header figcaption,
  footer .cutline,
  footer figcaption {
    font-size: 0.707rem; }
  header hr,
  footer hr {
    border: 0;
    width: 100%;
    color: #cf102b;
    background-color: #cf102b;
    height: 2px; }
  header .-text-right,
  footer .-text-right {
    text-align: right; }
  header .-text-center,
  footer .-text-center {
    text-align: center; }
  header .-text-left,
  footer .-text-left {
    text-align: left; }
  header .-bold,
  footer .-bold {
    font-weight: bold; }
  header .-horizontal,
  footer .-horizontal {
    margin: 0;
    padding: 0;
    list-style: none; }
  header .-horizontal > li,
  footer .-horizontal > li {
    display: inline-block; }
  @media (max-width: 767px) {
    header .title,
    footer .title {
      font-size: 1.75rem; }
    header .header, header .mega-header,
    footer .header,
    footer .mega-header {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 2.45rem; }
    header .detail,
    footer .detail {
      font-size: 0.8rem; }
    header ul, header ol,
    footer ul,
    footer ol {
      font-size: 0.8rem; }
    header li,
    footer li {
      font-size: 0.8rem; } }

.bodywrapper > header {
  position: relative;
  z-index: 999; }

/*
	Product knowledge Arrow
*/
.britax-accordion header a {
  padding: 0; }

.bodywrapper > header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #ccc;
  background: #fff;
  width: 100% !important; }
  .bodywrapper > header svg,
  .bodywrapper > header li,
  .bodywrapper > header img {
    vertical-align: middle; }
  .bodywrapper > header ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .bodywrapper > header .logo {
    padding: 1rem; }
    .bodywrapper > header .logo img {
      height: 40px; }
  .bodywrapper > header .main {
    text-align: right;
    position: relative; }
    .bodywrapper > header .main img, .bodywrapper > header .main svg {
      width: 1.5rem;
      padding: 0 0 0.5rem 0; }
    .bodywrapper > header .main .-text-right a {
      display: inline-block;
      text-align: center;
      margin-right: 1rem; }
  .bodywrapper > header .hamburger {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    height: 3px;
    margin: 2rem;
    background: #cf102b;
    transition: all linear 0.125s; }
    .bodywrapper > header .hamburger:before {
      top: -8px;
      content: '';
      display: block;
      width: 23px;
      height: 3px;
      background: #cf102b;
      position: absolute;
      z-index: -1;
      -moz-transition: all 0.225s;
      -webkit-transition: all 0.225s;
      transition: all 0.225s; }
    .bodywrapper > header .hamburger:after {
      top: 8px;
      content: '';
      display: block;
      width: 23px;
      height: 3px;
      background: #cf102b;
      position: absolute;
      z-index: -1;
      -moz-transition: all 0.225s;
      -webkit-transition: all 0.225s;
      transition: all 0.225s; }
  .bodywrapper > header .toggle.-active .hamburger {
    background: none; }
    .bodywrapper > header .toggle.-active .hamburger:before {
      top: 0;
      transform: rotate(45deg); }
    .bodywrapper > header .toggle.-active .hamburger:after {
      top: 0;
      transform: rotate(-45deg); }
  .bodywrapper > header .logo,
  .bodywrapper > header .toggle {
    z-index: 4;
    position: relative; }
  .bodywrapper > header > nav {
    background: rgba(255, 255, 255, 0.925);
    position: fixed;
    top: 0;
    right: 0px;
    padding-right: 20px;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transform-origin: top right;
    opacity: 0;
    transition: 0.175s all ease-in-out; }
    .bodywrapper > header > nav > ul,
    .bodywrapper > header > nav li > div {
      margin-top: 100px; }
    .bodywrapper > header > nav ul {
      width: 100%;
      padding-left: 1rem; }
      .bodywrapper > header > nav ul li {
        display: block;
        margin: 0;
        /*font-size: 1.25rem;*/ }
        .bodywrapper > header > nav ul li > div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          transform: translateX(100%);
          transition: 0.225s all ease-in-out;
          background: rgba(255, 255, 255, 0.985);
          overflow-y: auto; }
        .bodywrapper > header > nav ul li.-active > div {
          transform: none; }
        .bodywrapper > header > nav ul li a {
          display: block;
          font-size: 1.1rem;
          font-weight: 400;
          color: #626c76;
          margin: 0;
          box-sizing: border-box; }
          .bodywrapper > header > nav ul li a:hover, .bodywrapper > header > nav ul li a.-active {
            position: relative; }
            .bodywrapper > header > nav ul li a:hover::after, .bodywrapper > header > nav ul li a.-active::after {
              content: "";
              position: absolute;
              bottom: 0;
              left: 1rem;
              right: 0;
              height: 5px;
              width: 2rem;
              background: #cf102b;
              display: block; }
        .bodywrapper > header > nav ul li .back a {
          color: #8c8c8c; }
    .bodywrapper > header > nav.-active {
      pointer-events: all;
      opacity: 1; }
    .bodywrapper > header > nav .flex {
      height: 100%; }
  .bodywrapper > header a {
    padding: 7px;
    display: inline-block; }
    .bodywrapper > header a img, .bodywrapper > header a svg {
      display: block;
      margin: auto; }
    .bodywrapper > header a + a {
      margin-left: 8px; }
  .bodywrapper > header .main {
    position: relative; }
    .bodywrapper > header .main a.-active {
      position: relative; }
      .bodywrapper > header .main a.-active::after {
        content: "";
        position: absolute;
        height: 5px;
        bottom: 0;
        left: 0;
        right: 0;
        background: #cf102b; }
  .bodywrapper > header .search {
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    transition: all linear 0.195s;
    transform: scale(0);
    transform-origin: top right; }
    .bodywrapper > header .search label, .bodywrapper > header .search input {
      margin: 0;
      opacity: 0;
      transition: all linear 0.195s; }
    .bodywrapper > header .search span {
      position: absolute;
      display: block;
      top: 50%;
      transform: translateY(-50%);
      left: 1rem; }
      .bodywrapper > header .search span img, .bodywrapper > header .search span svg {
        width: 1rem;
        height: 1rem;
        padding: 0; }
    .bodywrapper > header .search input {
      padding-left: 3rem; }
    .bodywrapper > header .search.-active {
      transform: scale(1); }
      .bodywrapper > header .search.-active label, .bodywrapper > header .search.-active input {
        opacity: 1; }
  @media (min-width: 1025px) {
    .bodywrapper > header .back a {
      padding: 1rem 7px; }
    .bodywrapper > header .utility img, .bodywrapper > header .utility svg {
      width: 1rem;
      height: 1rem; }
    .bodywrapper > header .main {
      padding: 1rem 0; }
      .bodywrapper > header .main img, .bodywrapper > header .main svg {
        width: 1.5rem;
        height: 1.5rem; }
      .bodywrapper > header .main > div:first-child {
        margin-right: 2rem; } }
  @media (max-width: 768px) {
    .bodywrapper > header .main {
      font-size: 0;
      padding-top: .75rem; }
      .bodywrapper > header .main img, .bodywrapper > header .main svg {
        padding: .25rem; }
    .bodywrapper > header .hamburger {
      margin: 1rem; }
    .bodywrapper > header .logo img {
      height: 34px; } }
  @media (max-width: 512px) {
    .bodywrapper > header .main a {
      margin: 0;
      padding: 0; }
      .bodywrapper > header .main a img, .bodywrapper > header .main a svg {
        width: 20px;
        height: 20px;
        margin: 0;
        padding-bottom: 0; }
    .bodywrapper > header .hamburger {
      margin: .5rem; }
    .bodywrapper > header .logo {
      padding: .5rem; }
      .bodywrapper > header .logo img {
        height: 34px; }
    .bodywrapper > header > nav > ul {
      margin-top: 68px; }
    .bodywrapper > header > nav ul li > div {
      margin-top: 68px; } }

footer .main {
  padding: 0 2rem; }
  footer .main .globe img, footer .main .globe svg {
    width: 44px;
    height: 44px;
    padding: 8px 8px 0 0; }
  footer .main .social img, footer .main .social svg {
    width: 20px;
    height: 20px;
    color: white; }
  footer .main .social a {
    padding: 10px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    height: 20px; }
    footer .main .social a:hover, footer .main .social a.-active {
      position: relative;
      background-color: white;
      border-radius: 50%; }
      footer .main .social a:hover img, footer .main .social a:hover svg, footer .main .social a.-active img, footer .main .social a.-active svg {
        color: #626C76; }

footer .grid > div {
  padding: 2rem; }

footer ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0; }
  footer ul li {
    display: block;
    font-size: .85rem;
    color: white;
    margin: .5rem 0; }

footer p {
  margin: 1rem 0 .25rem 0; }

footer hr {
  border: 0;
  margin: 0;
  width: 2rem;
  color: #fff;
  background-color: #fff;
  height: 3px;
  text-align: left; }

@media (max-width: 512px) {
  footer .-xs-center {
    text-align: center; }
  footer hr {
    margin: auto;
    text-align: center; }
  footer .main {
    padding: 1rem 0 0 0; }
  footer .accordion {
    position: relative; }
    footer .accordion .pane {
      display: none; }
    footer .accordion.-active .pane {
      display: block; } }

@media (min-width: 513px) {
  footer .accordion .pane {
    display: block; }
  footer .accordion span {
    display: none; } }

@media (max-width: 768px) {
  footer .grid > div {
    padding: .5rem 2rem; } }

/*
Flexgrid-based grid system. For a good intro:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  /* Less than or equal to 512*/
  /* Greater than or equal to 513*/ }
  .flex > * {
    -ms-flex: 1 0;
    -webkit-box-flex: 1;
    flex: 1 0; }
    .flex > *.-static {
      -ms-flex: none;
      -webkit-box-flex: 0;
      flex: none; }
  .flex.-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .flex.-fixed > * {
    -ms-flex: 0 0 20%;
    -webkit-box-flex: 0;
    flex: 0 0 20%; }
  .flex.-pad > * {
    padding: 2rem; }
  .flex.-vtop {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
  .flex.-vcenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .flex.-vbottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .flex.-hright {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .flex.-hcenter {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .flex.-hbetween {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .flex.-haround {
    -ms-flex-pack: distribute;
    justify-content: space-around; }
  .flex.-bauto > * {
    -ms-flex: 0 0;
    -webkit-box-flex: 0;
    flex: 0 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .flex .break {
    display: none;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%; }
  @media (max-width: 512px) {
    .flex.-pad > * {
      padding: 1rem; }
    .flex > .-xs-1 {
      width: 25%; }
    .flex > .-xs-2 {
      width: 50%; }
    .flex > .-xs-3 {
      width: 75%; }
    .flex > .-xs-4 {
      width: 100%; }
    .flex.-xs-stack {
      -ms-flex-flow: wrap;
      flex-flow: wrap;
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .flex.-xs-stack > * {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        box-sizing: border-box; }
    .flex .break.-xs {
      display: block; } }
  @media (min-width: 513px) and (max-width: 767px) {
    .flex.-s-stack {
      -ms-flex-flow: wrap;
      flex-flow: wrap;
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .flex.-s-stack > * {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        box-sizing: border-box; }
    .flex .break {
      padding: 0;
      margin: 0;
      width: 0;
      height: 0; }
      .flex .break.-s {
        display: block; } }
  @media (min-width: 768px) and (max-width: 1024px) {
    .flex.-m-stack {
      -ms-flex-flow: wrap;
      flex-flow: wrap;
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .flex.-m-stack > * {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        box-sizing: border-box; }
    .flex .break.-m {
      display: block; } }
  @media (min-width: 513px) {
    .flex > .-s-1 {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .flex > .-s-2 {
      -webkit-box-flex: 2;
      -ms-flex-positive: 2;
      flex-grow: 2; }
    .flex > .-s-3 {
      -webkit-box-flex: 3;
      -ms-flex-positive: 3;
      flex-grow: 3; }
    .flex > .-s-4 {
      -webkit-box-flex: 4;
      -ms-flex-positive: 4;
      flex-grow: 4; }
    .flex > .-s-5 {
      -webkit-box-flex: 5;
      -ms-flex-positive: 5;
      flex-grow: 5; }
    .flex > .-s-6 {
      -webkit-box-flex: 6;
      -ms-flex-positive: 6;
      flex-grow: 6; }
    .flex > .-s-7 {
      -webkit-box-flex: 7;
      -ms-flex-positive: 7;
      flex-grow: 7; }
    .flex > .-s-8 {
      -webkit-box-flex: 8;
      -ms-flex-positive: 8;
      flex-grow: 8; }
    .flex > .-s-9 {
      -webkit-box-flex: 9;
      -ms-flex-positive: 9;
      flex-grow: 9; }
    .flex > .-s-10 {
      -webkit-box-flex: 10;
      -ms-flex-positive: 10;
      flex-grow: 10; }
    .flex > .-s-11 {
      -webkit-box-flex: 11;
      -ms-flex-positive: 11;
      flex-grow: 11; }
    .flex > .-s-12 {
      -webkit-box-flex: 12;
      -ms-flex-positive: 12;
      flex-grow: 12; } }
  @media (max-width: 768px) {
    .flex.-m-stack-and-below {
      -ms-flex-flow: wrap;
      flex-flow: wrap;
      width: 100%;
      box-sizing: border-box; }
      .flex.-m-stack-and-below > * {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }
  @media (min-width: 768px) {
    .flex > .-m-1 {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .flex > .-m-2 {
      -webkit-box-flex: 2;
      -ms-flex-positive: 2;
      flex-grow: 2; }
    .flex > .-m-3 {
      -webkit-box-flex: 3;
      -ms-flex-positive: 3;
      flex-grow: 3; }
    .flex > .-m-4 {
      -webkit-box-flex: 4;
      -ms-flex-positive: 4;
      flex-grow: 4; }
    .flex > .-m-5 {
      -webkit-box-flex: 5;
      -ms-flex-positive: 5;
      flex-grow: 5; }
    .flex > .-m-6 {
      -webkit-box-flex: 6;
      -ms-flex-positive: 6;
      flex-grow: 6; }
    .flex > .-m-7 {
      -webkit-box-flex: 7;
      -ms-flex-positive: 7;
      flex-grow: 7; }
    .flex > .-m-8 {
      -webkit-box-flex: 8;
      -ms-flex-positive: 8;
      flex-grow: 8; }
    .flex > .-m-9 {
      -webkit-box-flex: 9;
      -ms-flex-positive: 9;
      flex-grow: 9; }
    .flex > .-m-10 {
      -webkit-box-flex: 10;
      -ms-flex-positive: 10;
      flex-grow: 10; }
    .flex > .-m-11 {
      -webkit-box-flex: 11;
      -ms-flex-positive: 11;
      flex-grow: 11; }
    .flex > .-m-12 {
      -webkit-box-flex: 12;
      -ms-flex-positive: 12;
      flex-grow: 12; }
    .flex > .-m-13 {
      -webkit-box-flex: 13;
      -ms-flex-positive: 13;
      flex-grow: 13; }
    .flex > .-m-14 {
      -webkit-box-flex: 14;
      -ms-flex-positive: 14;
      flex-grow: 14; }
    .flex > .-m-15 {
      -webkit-box-flex: 15;
      -ms-flex-positive: 15;
      flex-grow: 15; }
    .flex > .-m-16 {
      -webkit-box-flex: 16;
      -ms-flex-positive: 16;
      flex-grow: 16; } }
  @media (min-width: 1025px) {
    .flex > .-l-1 {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .flex > .-l-2 {
      -webkit-box-flex: 2;
      -ms-flex-positive: 2;
      flex-grow: 2; }
    .flex > .-l-3 {
      -webkit-box-flex: 3;
      -ms-flex-positive: 3;
      flex-grow: 3; }
    .flex > .-l-4 {
      -webkit-box-flex: 4;
      -ms-flex-positive: 4;
      flex-grow: 4; }
    .flex > .-l-5 {
      -webkit-box-flex: 5;
      -ms-flex-positive: 5;
      flex-grow: 5; }
    .flex > .-l-6 {
      -webkit-box-flex: 6;
      -ms-flex-positive: 6;
      flex-grow: 6; }
    .flex > .-l-7 {
      -webkit-box-flex: 7;
      -ms-flex-positive: 7;
      flex-grow: 7; }
    .flex > .-l-8 {
      -webkit-box-flex: 8;
      -ms-flex-positive: 8;
      flex-grow: 8; }
    .flex > .-l-9 {
      -webkit-box-flex: 9;
      -ms-flex-positive: 9;
      flex-grow: 9; }
    .flex > .-l-10 {
      -webkit-box-flex: 10;
      -ms-flex-positive: 10;
      flex-grow: 10; }
    .flex > .-l-11 {
      -webkit-box-flex: 11;
      -ms-flex-positive: 11;
      flex-grow: 11; }
    .flex > .-l-12 {
      -webkit-box-flex: 12;
      -ms-flex-positive: 12;
      flex-grow: 12; }
    .flex > .-l-13 {
      -webkit-box-flex: 13;
      -ms-flex-positive: 13;
      flex-grow: 13; }
    .flex > .-l-14 {
      -webkit-box-flex: 14;
      -ms-flex-positive: 14;
      flex-grow: 14; }
    .flex > .-l-15 {
      -webkit-box-flex: 15;
      -ms-flex-positive: 15;
      flex-grow: 15; }
    .flex > .-l-16 {
      -webkit-box-flex: 16;
      -ms-flex-positive: 16;
      flex-grow: 16; } }

.grid {
  /* (iOS) 8*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .grid > * {
    box-sizing: border-box; }
  .grid.-pad > * {
    padding: 2rem; }
  .grid.-vcenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .grid.-hcenter {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  @media (max-width: 512px) {
    .grid > * {
      width: 100%; }
    .grid.-xs-1 > * {
      width: 100%; }
    .grid.-xs-2 > * {
      width: 50%; }
    .grid.-xs-3 > * {
      width: 33.33333%; }
    .grid.-xs-4 > * {
      width: 25%; }
    .grid.-xs-5 > * {
      width: 20%; }
    .grid.-xs-6 > * {
      width: 16.66667%; } }
  @media (min-width: 513px) {
    .grid.-s-1 > * {
      width: 100%; }
    .grid.-s-2 > * {
      width: 50%; }
    .grid.-s-3 > * {
      width: 33.33333%; }
    .grid.-s-4 > * {
      width: 25%; }
    .grid.-s-5 > * {
      width: 20%; }
    .grid.-s-6 > * {
      width: 16.66667%; }
    .grid.-s-7 > * {
      width: 14.28571%; }
    .grid.-s-8 > * {
      width: 12.5%; }
    .grid.-s-9 > * {
      width: 11.11111%; }
    .grid.-s-10 > * {
      width: 10%; }
    .grid.-s-11 > * {
      width: 9.09091%; }
    .grid.-s-12 > * {
      width: 8.33333%; } }
  @media (min-width: 768px) {
    .grid.-m-1 > * {
      width: 100%; }
    .grid.-m-2 > * {
      width: 50%; }
    .grid.-m-3 > * {
      width: 33.33333%; }
    .grid.-m-4 > * {
      width: 25%; }
    .grid.-m-5 > * {
      width: 20%; }
    .grid.-m-6 > * {
      width: 16.66667%; }
    .grid.-m-7 > * {
      width: 14.28571%; }
    .grid.-m-8 > * {
      width: 12.5%; }
    .grid.-m-9 > * {
      width: 11.11111%; }
    .grid.-m-10 > * {
      width: 10%; }
    .grid.-m-11 > * {
      width: 9.09091%; }
    .grid.-m-12 > * {
      width: 8.33333%; } }
  @media (min-width: 1025px) {
    .grid.-l-1 > * {
      width: 100%; }
    .grid.-l-2 > * {
      width: 50%; }
    .grid.-l-3 > * {
      width: 33.33333%; }
    .grid.-l-4 > * {
      width: 25%; }
    .grid.-l-5 > * {
      width: 20%; }
    .grid.-l-6 > * {
      width: 16.66667%; }
    .grid.-l-7 > * {
      width: 14.28571%; }
    .grid.-l-8 > * {
      width: 12.5%; }
    .grid.-l-9 > * {
      width: 11.11111%; }
    .grid.-l-10 > * {
      width: 10%; }
    .grid.-l-11 > * {
      width: 9.09091%; }
    .grid.-l-12 > * {
      width: 8.33333%; } }

/*
	Wrappers
	Creates wrapping classes for 200 - 1200 px widths.
	Ex: .-wrap-200
*/
@media (max-width: 512px) {
  .-wrap {
    margin: 0.25rem; } }

@media (min-width: 513px) {
  .-wrap {
    margin: 0 1rem; } }

@media (min-width: 768px) {
  .-wrap {
    margin: 0 2rem; } }

.-wrap-200 {
  max-width: 200px;
  margin: auto; }

.-wrap-20 {
  max-width: 20rem;
  margin: auto; }

.-wrap-400 {
  max-width: 400px;
  margin: auto; }

.-wrap-40 {
  max-width: 40rem;
  margin: auto; }

.-wrap-600 {
  max-width: 600px;
  margin: auto; }

.-wrap-60 {
  max-width: 60rem;
  margin: auto; }

.-wrap-800 {
  max-width: 800px;
  margin: auto; }

.-wrap-80 {
  max-width: 80rem;
  margin: auto; }

.-wrap-1000 {
  max-width: 1000px;
  margin: auto; }

.-wrap-100 {
  max-width: 100rem;
  margin: auto; }

.-wrap-1200 {
  max-width: 1200px;
  margin: auto; }

.-wrap-120 {
  max-width: 120rem;
  margin: auto; }

/*
	Padding
*/
/*
	Hide something at specific breakpoints
*/
@media (max-width: 512px) {
  .-xs-hide {
    display: none; } }

@media (max-width: 767px) {
  .-s-les-hide {
    display: none; } }

@media (min-width: 513px) {
  .-s-hide {
    display: none; } }

@media (min-width: 768px) {
  .-m-hide {
    display: none !important; } }

@media (min-width: 1025px) {
  .-l-hide {
    display: none; } }

@media (max-width: 767px) {
  .-m-or-larger {
    display: none; } }

@media (max-width: 768px) {
  .-l-or-larger {
    display: none; } }

/*
	Show something at specific breakpoints
*/
/*
	Overflow scroll
*/
.-scroll-y {
  overflow-y: auto;
  max-width: 100%; }

.-scroll-x {
  overflow-x: auto;
  max-height: 100%; }

/*
	For Accordion Grouping
*/
/*
	Accordions
*/
.accordion {
  position: relative; }
  .accordion .pane {
    display: none; }
  .accordion.-active .pane {
    display: block; }

/*
	Font colors
*/
.-fg-primary1 {
  color: #cf102b; }

.-fg-primary2 {
  color: #626c76; }

.-fg-secondary1 {
  color: #404040; }

.-fg-secondary2 {
  color: #8c8c8c; }

.-fg-tertiary1 {
  color: #f9f9f9; }

.-fg-tertiary2 {
  color: #ccc; }

.-fg-tertiary3 {
  color: #eee; }

.-fg-facebook {
  color: #3b5998; }

.-fg-flickr {
  color: #0063db; }

.-fg-github {
  color: #4183c4; }

.-fg-googleplus {
  color: #dd4b39; }

.-fg-instagram {
  color: #517fa4; }

.-fg-kickstarter {
  color: #76cc1e; }

.-fg-linkedin {
  color: #007bb6; }

.-fg-pinterest {
  color: #cb2027; }

.-fg-twitter {
  color: #00aced; }

.-fg-vimeo {
  color: #aad450; }

.-fg-youtube {
  color: #b00; }

.-fg-white {
  color: #fff; }

.-fg-green {
  color: #338700; }

.-fg-red {
  color: #cf102b; }

.-fg-black {
  color: #303030; }

.-fg-black-reverse {
  color: #cfcfcf; }

.-fg-blue {
  color: #11aef7; }

.-fg-purple {
  color: #892890; }

/*
	Background colors
*/
/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-primary1 {
  background-color: #cf102b; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-primary2 {
  background-color: #626c76; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-secondary1 {
  background-color: #404040; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-secondary2 {
  background-color: #8c8c8c; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-tertiary1 {
  background-color: #f9f9f9; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-tertiary2 {
  background-color: #ccc; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-tertiary3 {
  background-color: #eee; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-facebook {
  background-color: #3b5998; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-flickr {
  background-color: #0063db; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-github {
  background-color: #4183c4; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-googleplus {
  background-color: #dd4b39; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-instagram {
  background-color: #517fa4; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-kickstarter {
  background-color: #76cc1e; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-linkedin {
  background-color: #007bb6; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-pinterest {
  background-color: #cb2027; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-twitter {
  background-color: #00aced; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-vimeo {
  background-color: #aad450; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-youtube {
  background-color: #b00; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-white {
  background-color: #fff; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-green {
  background-color: #338700; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-red {
  background-color: #cf102b; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-black {
  background-color: #303030; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-black-reverse {
  background-color: #cfcfcf; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-blue {
  background-color: #11aef7; }

/*
		title = primary1
		value = red

		.-bg-primary1: red;
	*/
.-bg-purple {
  background-color: #892890; }

/*
	Media Normalization
	-------------------
*/
img,
svg {
  max-width: 100%;
  height: auto; }

svg {
  fill: currentColor; }

/*
	Aspect Ratios
	-------------
	These allow for responsive embedding of video content based on
	aspect ratio of the media.
*/
.ratio-1x1 {
  display: block;
  height: 0;
  padding: 0 0 100% 0;
  position: relative;
  overflow: hidden; }
  .ratio-1x1 > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.ratio-16x9 {
  display: block;
  height: 0;
  padding: 0 0 56.25% 0;
  position: relative;
  overflow: hidden; }
  .ratio-16x9 > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; }

.ratio-4x3 {
  display: block;
  height: 0;
  padding: 0 0 75% 0;
  position: relative;
  overflow: hidden; }
  .ratio-4x3 > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; }

/*
	Utility Classes
	---------------
	Classes that are useful for the presentation of media.
*/
.-pos {
  position: relative; }

.-no-overflow {
  overflow: hidden; }

.-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity; }

img.-block {
  display: block;
  width: 100%; }

/*
	Elements
@import "Elements/typography";
@import "Elements/icons";
@import "Elements/buttons";
*/
/*
	Components
@import "Components/navigation";
@import "Components/tabs";
@import "Components/accordions";
@import "Components/modals";
@import "Components/carousel";
*/