footer[role=contentinfo] {
  padding: 0;
  @include breakpoint($screen-md) {
    padding: 0;
  }
  @include breakpoint($screen-lg) {
    padding: 0;
  }
}

.footer-nav-inner-wrapper {
  @include container();
}

// Add 'standard' padding back to the menu-specific wrapper
div.footer--minimal.footer-nav-outer-wrapper {
  padding: 50px 5px 185px;
  @include breakpoint($screen-md) {
    padding: 50px 5px 140px;
  }
  @include breakpoint($screen-lg) {
    padding-top: 100px;
    padding-bottom: 120px;
  }
}

div.footer--expanded.footer-nav-outer-wrapper {
  line-height: initial;
  background: #f2f2f2;
  padding: 45px 18px 40px;
  .menu-item.menu-item--expanded {
    padding-top: 0;
    list-style: none;
  }
  span.lg-breakpoint {
    display: none;
    visibility: hidden;
  }
  @include breakpoint($screen-lg) {
    padding: 65px 18px 60px;
    span.lg-breakpoint {
      display: block;
    }
  }
  // Social Links
  .footer__social-links {
    margin: 0 0 40px;
    ul li {
      margin: 5px 8px 0;
      a {
        width: 52px;
        height: 52px;
        background: none;
      }
    }
    @include breakpoint($screen-md) {
      ul li {
        margin: 5px 10px 0;
        a {
          width: 75px;
          height: 75px;
        }
      }
    }
    @include breakpoint($screen-lg) {
      margin: 0 0 75px;
    }
  }
  .footer__copyright {
    margin-top: 10px;
    @include breakpoint($screen-md) {
      margin-top: 15px;
    }
    @include breakpoint($screen-lg) {
      margin-top: 10px;
    }
    p {
      color: $colour-black;
      @extend .font--xsmall;
      @include breakpoint($screen-lg) {
        font-size: 16px;
        line-height: 27px;
      }
    }
  }
  .footer__branding {
    margin-top: 35px;
    a {
      width: 85px;
      height: 85px;
    }
    @include breakpoint($screen-md) {
      margin-top: 35px;
    }
    @include breakpoint($screen-lg) {
      margin-top: 60px;
    }
  }
  .region.region-footer.cr-footer {
    @include container();
  }
  ul.menu.menu--level-0:not(.menu--level-1) {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    // Represents each submenu/category in the footer
    >li.menu-item {
      @include span(12);
      margin-bottom: 30px;
      text-align: center;
      @include breakpoint($screen-md) {
        @include span(6);
        margin-bottom: 25px;
        &.menu-item--1,
        &.menu-item--3,
        &.menu-item--5 {
          @include span(5);
          @include push(0.5);
          text-align: right;
          ul.menu--level-1.menu.menu--level-0 li {
            text-align: right;
          }
        }
        &.menu-item--2,
        &.menu-item--4,
        &.menu-item--6 {
          @include span(5);
          @include push(1);
          text-align: left;
          ul.menu--level-1.menu.menu--level-0 li {
            text-align: left;
          }
        }
      }
      @include breakpoint($screen-lg) {
        &.menu-item--1,
        &.menu-item--2,
        &.menu-item--3,
        &.menu-item--4,
        &.menu-item--5,
        &.menu-item--6 {
          @include span(4);
          text-align: left;
          margin-bottom: 70px;
          ul.menu--level-1.menu.menu--level-0 li {
            text-align: left;
          }
        }
      }
      &.item-open {
        >ul.menu--level-0.menu--level-1 {
          max-height: 300px;
          li a {
            display: inline
          }
          @include breakpoint($screen-lg) {
            max-height: none;
            height: auto;
          }
        }
        >a:after {
          transform: rotate(0);
          top: 8px;
        }
      }
      // Category 'title' link
      >a {
        color: $colour-black;
        font-size: 31px;
        text-decoration: none;
        position: relative;
        @include breakpoint($screen-md) {
          font-size: 41px;
        }
        &:after {
          content: '\2303';
          position: absolute;
          font-family: Arial;
          margin-left: 4px;
          overflow: hidden;
          line-height: 19px;
          font-size: 23px;
          color: inherit;
          font-weight: bold;
          top: 0px;
          transform: rotate(180deg);
          transition-duration: 0.1s;
          transition-property: transform;
          transition-timing-function: ease;
          @include breakpoint($screen-lg) {
            content: none;
          }
        }
        // All within that category
        +ul.menu--level-0.menu--level-1 {
          width: 100%;
          margin: 0;
          max-height: 0;
          overflow-y: hidden;
          transition: max-height 0.6s ease;
          @include breakpoint($screen-lg) {
            max-height: none;
            height: auto;
          }
          // Each link item
          li {
            padding: 10px;
            width: 100%;
            margin: 0;
            text-align: center;
            @include breakpoint($screen-md) {
              margin-top: 10px;
              padding: 10px 4px;
            }
            @include breakpoint($screen-lg) {
              text-align: left;
            }
            a {
              @extend .link;
              @extend .link--dark-purple;
              font-family: "Sailec-Medium", sans-serif;
              border-bottom: 2px solid $colour-black;
              // Hide to prevent tabbing until the menu is open
              display: none;
              @include breakpoint($screen-lg) {
                display: inline;
              }
              &:hover,
              &:focus {
                border-bottom: 2px solid $colour-red;
              }
              &:after {
                content: none;
              }
              // Added to the menu item via CMS
              &.js-esu-popup {
                position: relative;
                margin-left: 45px;

                span {
                  position: relative;
                }

                svg.icon {
                  position: absolute;
                  bottom: -6px;
                  left: -45px;
                  width: 35px;
                  height: 35px;
                }
                &:hover,
                &:focus {
                  svg.icon {
                    fill: $colour-red;
                  }
                }
              }
            }
          }
          div.menu--expanded-footer__left,
          div.menu--expanded-footer__right {
            width: 100%;
          }
          @include breakpoint($screen-md) {
            // split submenus
            div.menu--expanded-footer__left {
              float: left;
              width: 50%;
            }
            div.menu--expanded-footer__right {
              float: right;
              width: 50%;
              li {
                padding: 10px 4px 10px 10px;
              }
            }
          }
        }
      }
    }
  }
}