.responsive-nav-group {
  margin-bottom: 8rem;
}
/*
 We have to be conscious of heros here because they are handled different than
 the standard page headers and we don't want to cut them off.
*/
.off-canvas-content .hero {
  margin-top: 5rem;
}
@media print, screen and (min-width: 640px) {
  .off-canvas-content .hero {
    margin-top: 11rem;
  }
}
@media print, screen and (min-width: 1024px) {
  .responsive-nav-group {
    margin-bottom: 10rem;
  }
  .off-canvas-content .hero {
    margin-top: 13rem;
  }
}

@media print, screen and (min-width: 1200px) and (min-width: 1440px) {
  .off-canvas-content .hero {
    margin-top: 10rem;
  }
}
@media print, screen and (min-width: 1440px) {
  .off-canvas-content .hero {
    margin-top: 8rem;
  }
  .off-canvas-content .hero .diva-hero {
    margin-top: -35px;
  }
}

.responsive-nav-group .nav-menu ul {
    background-color: white;
    list-style: none;
    padding: 0;
    margin: 0; }

  @media screen and (min-width: 1031px) {
    .responsive-nav-group .nav-menu ul {
      display: inline-block; }
    .responsive-nav-group .top-bar .nav-menu .show-for-tablets {
      display: none; } }

  .responsive-nav-group .nav-menu ul li {
    display: block;
    position: relative;
    float: left; }

  .responsive-nav-group .nav-menu .my-dropdown-submenu {
    display: none; }

  .responsive-nav-group .my-dropdown-submenu-parent > a {
    display: block;
    background: 0;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    white-space: nowrap;
    color: black;
    height: 4rem;
    line-height: 55px; }

  .responsive-nav-group .nav-menu ul li a:hover {
    text-decoration: none; }

  .responsive-nav-group .nav-menu .my-dropdown-submenu-parent:hover {
    background-color: #EEE;
    /*box-shadow: 2px 2px 10px 10px #444444;*/ }

  .responsive-nav-group .nav-menu li:hover ul {
    display: block;
    position: absolute;
    z-index: 1; }

  .responsive-nav-group .my-dropdown-submenu {
    top: 80%; }

  .responsive-nav-group .nav-menu li:hover li {
    float: none;
    border-bottom: 1px solid #F0F0F0;
    background-color: #EEE;
    opacity: 1;
    min-width: 150px; }

  .responsive-nav-group .nav-menu li:hover li a {
    display: block;
    background-color: #EEE;
    opacity: 1;
    min-width: 150px;
    padding: 0px 20px 0px 20px;
    height: 40px;
    line-height: 40px; }

  .responsive-nav-group .nav-menu li:hover a {
    color: black;
    text-decoration: none; }

  .responsive-nav-group .nav-menu li:hover li a.hover {
    background: 0; }

  .responsive-nav-group .nav-menu li ul li {
    border-top: 0px; }

  .responsive-nav-group .top-bar {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0.99;
    position: fixed; }

  @media screen and (max-width: 1030px) {
    .responsive-nav-group .top-bar-dropdown-group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      float: right; }
    .responsive-nav-group .show-on-desktop {
      display: none; }
    .responsive-nav-group .show-for-tablets {
      float: right; }
    .responsive-nav-group .show-for-tablets li {
      background: #fff; } }

  .responsive-nav-group ul.top-bar-dropdown-group li:last-child ul {
   left: -60px; }

  .hamburger > a.small.button,
  .responsive-nav-group .nav-menu a.top-bar-button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 17px; }

  .hamburger > a.small.button {
    margin-right: 10px;
  }

  .responsive-nav-group .top-nav .logo {
    padding: 11px; }

  @media screen and (min-width: 790px) {
    .responsive-nav-group .top-nav .logo {
      display: inline-block; } }

  .responsive-nav-group .mobile-nav {
    display: none; }

  .responsive-nav-group .hamburger {
    padding: 0 7px 0 0;
    font-size: 32px; }

  @media screen and (max-width: 639px) {
    .responsive-nav-group .top-nav .logo {
      display: inline-block; } }

.responsive-nav-group nav.top-bar.top-nav {
  width: 100% !important;
}

/* Mobile Navigation */

#mobile-accordion {
  overflow-y: scroll;
  padding-bottom: 110px;
}

#mobile-accordion .my-dropdown-submenu-parent {
  box-shadow: 0 1px 0 0 rgba(240,240,240, 0.7);
}

#mobile-accordion .my-dropdown-submenu li {
  margin-top: 7px;
  margin-bottom: 7px;
}

#mobile-accordion a {
  -webkit-tap-highlight-color: transparent;
}

.mobile-accordion-group,
.mobile-accordion-group ul {
    letter-spacing: 1.17px;
    list-style: none;
    text-align: left;
    font-size: 14px;
}

.mobile-accordion-group ul {
    background: #f0f0f0;
    box-shadow: inset 0 1px 13px 0 rgba(0,0,0,0.05);
}

.mobile-accordion-group ul.submenu {
    margin-left: 0;
    padding-left: 0.5rem;
}

.mobile-accordion-group a {
    color: #000;
}

#small-modal-nav .top-bar {
  position: initial;
}

/*
 * .top-bar is a built in foundation class. When used on the primary site nav
 *  we need to make minor adjustments.
 */
.top-bar.top-nav {
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
}
/* Re-Add left padding removed from .top-bar */
.title-area {
  padding-left: 0.5rem;
}
/* Re-Add right padding removed from .top-bar */
.top-bar-right {
  padding-right: 1.5rem;
}
.util-nav {
  background-color: #000;
  width: 100%;
}
.util-nav ul {
  background-color: #000;
  margin: 0;
  list-style: none;
}
.util-links-mobile ul li,
.util-nav ul li {
  display: inline-block;
}
.util-links-primary {
  font-size: 15px;
  font-weight: bolder;
  letter-spacing: 1.25px;
}
.util-links-primary li a {
  display: block;
  padding: 18px 2em;
  color: #fff;
}
@media screen and (min-width: 640px) and (max-width: 703px) {
  /* This is necessary to keep util tabs on single line on some devices in landscape */
  .util-links-primary {
    font-size: 14px;
  }
  .util-links-secondary > ul li:first-child > a {
    padding-left: 0;
  }
}

.breeder-section .responsive-nav-group .util-links-primary .breeders-tab,
.breeder-section .responsive-nav-group .util-links-primary .breeders-tab a,
.consumer-section .responsive-nav-group .util-links-primary .consumer-tab,
.consumer-section .responsive-nav-group .util-links-primary .consumer-tab a {
  background-color: #fff;
  color: #000;
}

.consumer-section .responsive-nav-group .util-links-primary li:not(.consumer-tab) {
  opacity: 0.64;
  border-right: 1px solid #fff;
}

.consumer-section .responsive-nav-group .util-links-primary li:not(.consumer-tab),
.breeder-section .responsive-nav-group .util-links-primary li:not(.breeders-tab):hover {
  opacity: 0.9;
}

@media screen and (max-width: 39.9375em) {
  /* Foundations "small" breakpoint only */
  .util-links-primary li a {
    padding: 12px 26px;
  }
}
.util-links-mobile,
.util-links-secondary {
  display: flex;
  align-items: center;
}
.util-links-secondary li a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: bolder;
  letter-spacing: 1px;
  padding: 8px 18px;
}
.util-links-mobile li a:not(.button) {
  color: #000;
  display: block;
  font-size: 14px;
  font-weight: bolder;
  letter-spacing: 1.17px;
  padding: 8px 18px 8px 0;
}
.util-links-mobile li a.button {
  color: #000;
  display: block;
  font-size: 13px;
  font-weight: bolder;
  letter-spacing: 1.08px;
  padding: 8px 18px;
}
.account-icon-dark::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24.8' height='22.62'%3e%3cdefs%3e%3cfilter x='-.12' y='-.065' width='1.24' height='1.131' filterUnits='objectBoundingBox' id='a'%3e%3cfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='15' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.100000001 0' in='shadowBlurOuter1' result='shadowMatrixOuter1'/%3e%3cfeMerge%3e%3cfeMergeNode in='shadowMatrixOuter1'/%3e%3cfeMergeNode in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cpath d='M834 118c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z' transform='translate(-821.6 -116.7)' filter='url(%23a)' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  vertical-align: middle;
  padding-right: 6px;
  padding-top: 3px;
  display: inline-block;
}
.account-icon-light::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16.816' height='20.816'%3e%3cdefs%3e%3cfilter x='-.026' y='-.145' width='1.051' height='1.301' filterUnits='objectBoundingBox' id='a'%3e%3cfeOffset dy='2' in='SourceAlpha' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='17' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0' in='shadowBlurOuter1' result='shadowMatrixOuter1'/%3e%3cfeMerge%3e%3cfeMergeNode in='shadowMatrixOuter1'/%3e%3cfeMergeNode in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cpath d='M1783 18c-4.416 0-8 3.584-8 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 2.4c1.328 0 2.4 1.072 2.4 2.4 0 1.328-1.072 2.4-2.4 2.4a2.397 2.397 0 0 1-2.4-2.4c0-1.328 1.072-2.4 2.4-2.4zm0 11.36a5.76 5.76 0 0 1-4.8-2.576c.024-1.592 3.2-2.464 4.8-2.464 1.592 0 4.776.872 4.8 2.464a5.76 5.76 0 0 1-4.8 2.576z' transform='translate(-1774.584 -15.68)' filter='url(%23a)' fill='white' fill-rule='nonzero'/%3e%3c/svg%3e");
  vertical-align: middle;
  padding-right: 6px;
  padding-top: 4px;
  display: inline-block;
}
.account-icon-light:hover {
  opacity: 0.8;
}
.open-small-modal-nav::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='34.72' height='20.358'%3e%3cdefs%3e%3cfilter x='-.12' y='-.065' width='1.24' height='1.131' filterUnits='objectBoundingBox' id='a'%3e%3cfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='15' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.100000001 0' in='shadowBlurOuter1' result='shadowMatrixOuter1'/%3e%3cfeMerge%3e%3cfeMergeNode in='shadowMatrixOuter1'/%3e%3cfeMergeNode in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cpath d='M331 80h28v-3h-28zm0-7.5h28v-3h-28zm0-10.5v3h28v-3z' transform='translate(-327.64 -60.83)' filter='url(%23a)' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
  vertical-align: middle;
  padding-right: 6px;
  padding-top: 4px;
  display: inline-block;
}