/* Mobile Menu */

#mobile-menu-button {
  box-sizing: border-box;
  color: #808080;
  font-size: 28px;
  height: 56px;
  line-height: 56px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  transition: background 0.35s ease-out, color 0.35s ease-out;
  width: 50px;
  z-index: 4;
}

#mobile-menu-button.enabled {
  background: #00853f;
  color: #7FC29E;
}

#page-overlay {
  background: #333;
  position: absolute;
  top: 56px;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s linear;
  z-index: -1;
}

#page-overlay.enabled {
  opacity: 0.5;
  z-index: 3;
}

#mobile-menu-wrapper {
  -webkit-box-shadow: -5px 0 5px rgba(0,0,0,.15);
  -moz-box-shadow: -5px 0 5px rgba(0,0,0,.15);
  box-shadow: -5px 0 5px rgba(0,0,0,.15);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 56px;
  transition: width 0.35s ease-out;
  width: 0;
  z-index: 5;
}

#mobile-menu-wrapper.enabled {
  width: 275px;
}

#mobile-menu {
  background: #fff;
  box-sizing: border-box;
  color: #000;
  overflow: hidden;
  padding: 15px;
  position: absolute;
  right: -275px;
  top: 0;
  transition: right 0.35s ease-out;
  width: 275px;
  z-index: 4;
}

#mobile-menu,
#mobile-menu-wrapper {
  height: 528px;
}

#mobile-menu.enabled {
  right: 0;
}

#mobile-menu-nav-list,
#mobile-menu-sub-nav-list {
  box-sizing: border-box;
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#mobile-menu-nav-list {
  right: 0;
  z-index: 4;
}

.menu-item a {
  border-bottom: 1px solid #ccc;
  color: #00853f;
  display: block;
  font-size: 18px;
  line-height: 56px;
  padding: 0 30px 0 50px;
  position: relative;
  text-decoration: none;
}

#mobile-menu-sub-nav-list {
  background: #fff;
  left: 100%;
  transition: left 0.35s ease-out;
  z-index: 5;
}

#mobile-menu-sub-nav-list.active {
  left: 0;
}

#mobile-nav-for-home,
#mobile-nav-my-account-back,
#mobile-nav-viewbill-myaccount-back,
#mobile-nav-acctinfo-myaccount-back,
#mobile-nav-profile-myaccount-back {
  background: #00853f;
  color: #fff;
}

#mobile-nav-my-account-back:before,
#mobile-nav-viewbill-myaccount-back:before,
#mobile-nav-acctinfo-myaccount-back:before,
#mobile-nav-profile-myaccount-back:before {
  font-family: FontAwesome;
  font-size: 25px;
  position: absolute;
  left: 15px;
  top: 0;
  z-index: 0;
}

#mobile-nav-for-home:before,
#mobile-nav-for-business:before,
#mobile-nav-store-locator:before,
#mobile-nav-full-site:before {
  content: "";
  height: 56px;
  left: 15px;
  position: absolute;
  width: 22px;
}

#mobile-nav-for-home:before {
  background: url("/static/images/svg/mobile-res-home.svg") center no-repeat;
  color: #fff;
}

#mobile-nav-for-business:before {
  background: url("/static/images/svg/mobile-large-business_black.svg") center no-repeat;
}

#mobile-nav-store-locator:before {
  background: url("/static/images/svg/mobile-locator_black.svg") center no-repeat;
}

#mobile-nav-full-site:before {
  background: url("/static/images/svg/mobile-full-site_black.svg") center no-repeat;
}

/*.sub-nav-parent > a:after,
#mobile-nav-store-locator:after,
#mobile-nav-full-site:after {
  content: "\f054";
  font-family: FontAwesome;
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 0;
}*/

#mobile-nav-for-business:after {

}

.chevron {
  display: inline-block;
  width: .5em;
  height: .8em;
  position: absolute;
  font-size: 2rem;
  right: 20px;
  top: 10px;
  padding-top: 3%;
}
.chevron:before,
.chevron:after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
}
.chevron:before {
    right: 0;
    border-width: .4em 0 .4em .4em;
    border-color: transparent transparent transparent #333;    
}
.chevron:after {
    left: 0;
    border-width: .4em 0 .4em .4em;
    border-color: transparent transparent transparent #ACD870;    
} 

.sub-nav-parent .chevron:before {
    right: 0;
    border-width: .4em 0 .4em .4em;
    border-color: transparent transparent transparent #00853f;    
}
.sub-nav-parent .chevron:after {
    left: 0;
    border-width: .4em 0 .4em .4em;
    border-color: transparent transparent transparent #fff;    
} 

.sub-nav-parent > a:after {
  color: #00853f;
}

#mobile-nav-for-business:after,
#mobile-nav-store-locator:after,
#mobile-nav-full-site:after {
  color: black;
}

.menu-item:nth-last-child(-n+3) a,
#mobile-nav-quick-bill-pay {
  background: #ACD870;
  border-color: #fff;
  color: black;
}

/*#mobile-nav-my-account-back:before {
  content: "\f053";
  font-size: 17px;
}*/

#mobile-nav-my-account-back .chevron ,
#mobile-nav-viewbill-myaccount-back .chevron ,
#mobile-nav-acctinfo-myaccount-back .chevron ,
#mobile-nav-profile-myaccount-back .chevron {
  left: 20px;
}

#mobile-nav-my-account-back .chevron:after,
#mobile-nav-viewbill-myaccount-back .chevron:after,
#mobile-nav-acctinfo-myaccount-back .chevron:after,
#mobile-nav-profile-myaccount-back .chevron:after {
  left: 0;
  border-width: .4em .4em .4em 0;
  border-color: transparent #fff transparent transparent;    
}

#mobile-nav-my-account-back .chevron:before,
#mobile-nav-viewbill-myaccount-back .chevron:before,
#mobile-nav-acctinfo-myaccount-back .chevron:before,
#mobile-nav-profile-myaccount-back .chevron:before {
  right: 0;
  border-width: .4em .4em .4em 0;
  border-color: transparent #00853F transparent transparent;   
  z-index: 1; 
}

#mobile-third-nav-manage-paperless-billing,
#mobile-third-nav-acct-prefer-info,
#mobile-third-nav-manage-notification-prefer{
	line-height: 33px;
}