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: #000; 
  padding: 65px 10px 40px; 
  .menu-item.menu-item--expanded {
    padding-top: 0;
    list-style: none;
  }

  span.md-breakpoint {
    display: none;
    visibility: hidden;
  }
  
  @include breakpoint($screen-md) {  
    padding: 79px 35px 60px;
    span.md-breakpoint {
      display: block;
    }
  }
  
  @include breakpoint($screen-lg) {
    padding: 80px 40px 60px;
  }

  // Social Links
  .footer__social-links {
    margin: 0 0 50px; 
    ul li {
      margin: 5px 6px 0;
      height: 55px;
      a {
        width: 58px;
        height: 58px;
        background: none;
      }
    }
    @include breakpoint($screen-md) {
      margin: 0 0 90px;
      ul li {
        margin: 5px 10px 0;
      }
    }
    @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 {
      text-align: left;
      color: #fff;
      @extend .font--xsmall;
      @include breakpoint($screen-lg) {
        font-size: 16px;
        line-height: 27px;
      }
    }
  }
  .footer__branding {
    margin: 10px 0 20px 0;
    a {
      width: 85px;
      height: 85px;
    }
    @include breakpoint($screen-md) {
      margin: 0 0 25px;
    }
    @include breakpoint($screen-lg) {
      margin-top: 10px;
    }
  }
  .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: 45px;
      @include breakpoint($screen-md) {
        text-align: center;
        @include span(6);
        margin-bottom: 25px;
        &.menu-item--1,
        &.menu-item--3,
        &.menu-item--5 {
          @include span(5);
          @include push(0.5);
          text-align: left; 
          ul.menu--level-1.menu.menu--level-0 li {
            text-align: left;
          }
        }
        &.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-md) {
        &.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: 60px;
          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-md) {
            max-height: none;
            height: auto;
          }
        }
        >a:after {
          transform: rotate(0);
          top: 8px;
        }
      }
      // Category 'title' link
      >a {
        color: #fff;
        @extend .text--subtitle-small;
        margin-bottom: 19px;
        font-size: 19px;
        text-decoration: none;
        position: relative;
        @include breakpoint($screen-md) {
          font-size: 20px;
        }
        &: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-md) {
            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-md) {
            max-height: none;
            height: auto;
          }
          // Each link item
          li {
            padding: 8px 0;
            width: 100%;
            margin: 0;
            text-align: left;
            @include breakpoint($screen-md) {
              margin-top: 12px;
              padding: 0; // to avoid pushing  of other li when hover li item which takes more than two lines
            }
            @include breakpoint($screen-lg) {
              padding: 0;
              text-align: left;
            }
            a {
              @extend .link;
              color: #fff;
              font-size: 15px;
              border-bottom: 0;
              line-height: 24px; 
              padding: 0;
              // Hide to prevent tabbing until the menu is open
              display: none;
              @include breakpoint($screen-md) {
                display: inline;
              }
              &:hover,
              &:focus {
                color: #fff; 
                border-bottom: 2px solid #fff; 
              }
              &:after {
                content: none;
              }
            }
          }
          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: 0px 0px 0px 14px;
              }
            }
          }
        }
      }
    }
  }
}