/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.faq-navigation {
  position: relative;
  padding: 50px 0; }
  .faq-navigation:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    background: #F00000;
    top: 0;
    width: calc(calc((100vw - 1180px)/2) + calc(1180px / 4));
    z-index: -1;
    right: 0; }
  .faq-navigation ul {
    background: #F00000;
    color: white;
    list-style: none;
    padding: 0.5em;
    margin: 0; }
    @media screen and (min-width: 1024px) {
      .faq-navigation ul {
        padding: 0 1em 1em 0.5em; } }
    .faq-navigation ul li {
      cursor: pointer;
      padding: 1em 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.52);
      font-weight: normal;
      font-size: 20px; }
      .faq-navigation ul li.active, .faq-navigation ul li:hover {
        font-weight: bold; }

.faq-group {
  display: none; }
  .faq-group.active {
    display: block; }
  .faq-group .faq-item {
    margin-bottom: 25px;
    border-bottom: 1px solid #D1D1D1; }
    .faq-group .faq-item h3 {
      cursor: pointer;
      position: relative;
      font-weight: 600; }
      .faq-group .faq-item h3:before {
        margin-right: 20px;
        display: inline-block;
        font-family: "standard-icons";
        content: "\e920";
        color: #F00000;
        font-size: 25.5px; }
    .faq-group .faq-item .answer {
      display: none; }
    .faq-group .faq-item.active h3::before {
      content: "\e919"; }