/* ------------------------------------------------------------
	Reset Styles
------------------------------------------------------------ */

.primaryNav div,
.primaryNav span,
.primaryNav applet,
.primaryNav object,
.primaryNav iframe,
.primaryNav h1,
.primaryNav h2,
.primaryNav h3,
.primaryNav h4,
.primaryNav h5,
.primaryNav h6,
.primaryNav p,
.primaryNav blockquote,
.primaryNav pre,
.primaryNav a,
.primaryNav abbr,
.primaryNav acronym,
.primaryNav address,
.primaryNav big,
.primaryNav cite,
.primaryNav code,
.primaryNav del,
.primaryNav dfn,
.primaryNav em,
.primaryNav font,
.primaryNav img,
.primaryNav ins,
.primaryNav kbd,
.primaryNav q,
.primaryNav s,
.primaryNav samp,
.primaryNav small,
.primaryNav strike,
.primaryNav strong,
.primaryNav sub,
.primaryNav sup,
.primaryNav tt,
.primaryNav var,
.primaryNav dl,
.primaryNav dt,
.primaryNav dd,
.primaryNav ol,
.primaryNav ul,
.primaryNav li,
.primaryNav fieldset,
.primaryNav form,
.primaryNav label,
.primaryNav legend,
.primaryNav table,
.primaryNav caption,
.primaryNav tbody,
.primaryNav tfoot,
.primaryNav thead,
.primaryNav tr,
.primaryNav th,
.primaryNav td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* ------------------------------------------------------------
	General Styles
------------------------------------------------------------ */

* {
  box-sizing: border-box;
}
body {
  font-family: "nimbus-sans", sans-serif;
  font-style: normal;
  font-weight: 300;
  background: white;
  color: black;
  font-size: 16px;
  line-height: 1;
  padding: 2em;
}
.sitemap {
  margin: 0 0 2em 0;
}

/* ------------------------------------------------------------
	Page Styles
------------------------------------------------------------ */

/* -------- Top Level --------- */

.primaryNav .content {
  clear: both;
  width: 100%;
  margin-top: 5em;
}
.primaryNav .content #home {
  position: absolute;
  margin-top: -4.5em;
  margin-bottom: 0;
  min-width: 11.5em;
  width: 100%;
}
.primaryNav .content #home:before {
  display: none;
}
.primaryNav .content ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  position: relative;
}
.primaryNav .content li {
  flex: 1;
  flex-basis: 11.5em;
  padding-right: 1.25em;
  position: relative;
}
.primaryNav .content > ul > li {
  margin-top: 3em;
}
.primaryNav .content li#home a {
  background: #24619d;
  color: #fff;
}
.primaryNav .content li#home a:hover {
  background: #20568c;
}
.primaryNav .content li a {
  margin: 0;
  padding: 0.875em 0.9375em 0.9375em 0.9375em;
  display: block;
  font-size: 0.9375em;
  font-weight: bold;
  color: #fff;
  background: #ffb718;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.025);
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.primaryNav .content li a:hover {
  background-color: #e7a618;
}
/* .primaryNav .content a:link:after,
.primaryNav .content a:visited:after,
.utilityNav a:link:after,
.utilityNav a:visited:after {
  content: " " attr(href) " ";
  display: block;
  font-weight: 600;
  font-size: 0.75em;
  margin-top: 0.25em;
  word-wrap: break-word;
  color: rgba(255, 255, 255, 0.75);
} */

/* -------- Second Level --------- */

.primaryNav .content ul ul {
  display: block;
}
.primaryNav .content ul ul li {
  padding-top: 0.6875em;
  padding-right: 0;
}
.primaryNav .content ul ul li a {
  background-color: #f6e0a3;
  color: #424242;
}
.primaryNav .content ul ul li a:hover {
  background-color: #e3cf97;
}
.primaryNav .content ul ul li:first-child {
  padding-top: 2em;
}

/* -------- Third Level --------- */

.primaryNav .content ul ul ul {
  margin-top: 0.6em;
  padding-top: 0.6em;
  padding-bottom: 0.625em;
}
.primaryNav .content ul ul ul li {
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
}
.primaryNav .content ul ul ul li a {
  background-color: #ff9d00;
  color: #797979;
  font-size: 0.75em;
  padding: 0.75em;
  width: 90%;
  margin-right: 0;
  margin-left: auto;
}
.primaryNav .content ul ul ul li a:hover {
  background-color: #ff831b;
}
.primaryNav .content ul ul ul li:first-child {
  padding-top: 1em;
}
.primaryNav .content ul ul ul li a:link:after,
.primaryNav .content ul ul ul li a:visited:after {
  font-size: 0.75em;
}

/* --------	Fourth Level --------- */

.primaryNav .content ul ul ul ul {
  margin-top: 0;
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
}
.primaryNav .content ul ul ul ul li a {
  background-color: #de003a;
  padding: 0.75em;
  width: 80%;
}
.primaryNav .content ul ul ul ul li a:hover {
  background-color: #c20035;
}
.primaryNav .content ul ul ul ul li a:link:after,
.primaryNav .content ul ul ul ul li a:visited:after {
  display: none;
}

/* ------------------------------------------------------------
	Connecting Lines:
	Uncomment 'border-color: red' for debugging
------------------------------------------------------------ */

.primaryNav .content ul:before,
.primaryNav .content ul:after,
.primaryNav .content ul li:before,
.primaryNav .content ul li:after {
  display: block;
  content: "";
  position: absolute;
  border-width: 0;
  border-color: #e3e3e3;
  border-style: solid;
  z-index: -1;
  /* border-color: red; */
}
.primaryNav .content > ul > li:before {
  height: 1.375em;
  top: -1.375em;
  right: calc(50% + 0.625em);
  width: calc(100% - 2px);
  border-top-width: 2px;
  border-right-width: 2px;
  /* border-color: red; */
}
.primaryNav .content > ul > li:first-child + li:before {
  border-top-width: 0;
  height: 5em;
  top: -5em;
  /* border-color: red; */
}
.primaryNav .content ul ul li:after {
  width: 50%;
  height: 0.6875em;
  top: 0;
  right: 1px;
  border-left-width: 2px;
  /* border-color: red */
}
.primaryNav .content ul ul li:first-child:before {
  width: 50%;
  height: 1.3125em;
  top: 0.6875em;
  right: 1px;
  border-left-width: 2px;
  /* border-color: red; */
}
.primaryNav .content > ul > li:last-child:after {
  border-bottom-width: 0;
}
.primaryNav .content ul ul ul li:before {
  width: calc(50% - 5px) !important;
  height: calc(100% - 2px);
  top: -50%;
  left: 0;
  border-left-width: 2px;
  border-bottom-width: 2px;
  /* border-color: red; */
}
.primaryNav .content ul ul ul li:first-child:before {
  height: 2.125em;
  top: -1px;
  border-top-width: 2px;
  /* border-color: red; */
}
.primaryNav .content ul ul ul:before {
  width: 50%;
  height: 1.25em;
  top: -10px;
  right: 1px;
  border-left-width: 2px;
  /* border-color: red; */
}
.primaryNav .content ul ul ul li:after {
  border-width: 0;
}
.primaryNav .content ul ul ul ul li:before,
.primaryNav .content ul ul ul ul li:first-child:before {
  display: none;
}

.primaryNav .content ul ul ul ul:before {
  width: 1px;
  height: calc(100% + 2.5em);
  top: -2.5em;
  left: 0;
  border-left-width: 2px;
  /* border-color: red; */
}

/* ------------------------------------------------------------
	Utility Navigation
------------------------------------------------------------ */

.utilityNav {
  float: right;
  margin-top: 1rem;
  margin-bottom: -0.25em;
  margin-right: 1.25em;
  max-width: 48%;
  list-style-type: none;
}
.utilityNav li {
  padding: 0 0 0.625em 0.625em;
  display: inline-block;
}
.utilityNav li:first-child {
}
.utilityNav li a {
  display: block;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.75em 1em;
  font-weight: bold;
  text-align: left;
  color: white;
  background-color: #ff9d00;
  border: 1px solid rgba(0, 0, 0, 0.025);
  box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.utilityNav li a:hover {
  background-color: #ff831b;
}
.utilityNav li a:link:after,
.utilityNav li a:visited:after {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75em;
  font-weight: 600;
  margin-top: 0.25em;
}

/* ------------------------------------------------------------
	Responsive Styles
------------------------------------------------------------ */

@media screen and (max-width: 30em) {
  .primaryNav .content ul {
    display: block;
  }
  .primaryNav .content li {
    width: 100%;
    padding-right: 0;
  }
  .primaryNav .content #home {
    width: 100%;
    position: relative;
    margin-bottom: -1em;
    margin-top: 0;
  }
  .utilityNav {
    float: none;
    display: block;
    width: 100%;
    text-align: right;
    margin-bottom: 2.5em;
    max-width: 100%;
  }
}

/* The media queries below keep the grid column widths intact when
a column wraps. This prevents the wrapped column from displaying at
100% width. These queries also make the homepage line item flex
appropriately. When your sitemap is complete, remove the queries
that you don't need, and your sitemap layout will work perfectly. */

/* two column */
@media screen and (min-width: 30em) {
  .primaryNav .content > ul > li {
    max-width: 50%;
  }
}
/* three column */
@media screen and (min-width: 38.5em) {
  .primaryNav .content > ul > li {
    max-width: 33%;
  }
}
/* four column */
@media screen and (min-width: 50em) {
  .primaryNav .content > ul > li {
    max-width: 25%;
  }
}
/* five column */
@media screen and (min-width: 61em) {
  .primaryNav.wide .content > ul > li {
    max-width: 20%;
  }
}
/* six column */
@media screen and (min-width: 73em) {
  .primaryNav.wide .content > ul > li {
    max-width: 16.66%;
  }
}
/* seven column */
/* @media screen and (min-width: 84.5em) { */
@media screen and (min-width: 84.5em) {
  .primaryNav.wide .content > ul > li {
    max-width: 14.285%;
  }
}
/* eight column */
/* @media screen and (min-width: 96em) { */
@media screen and (min-width: 84.5em) {
  .primaryNav.wide .content > ul > li {
    max-width: 12.5%;
  }
}
/* nine column */
@media screen and (min-width: 107.5em) {
  .primaryNav.wide .content > ul > li {
    max-width: 11.11%;
  }
}
/* ten column */
@media screen and (min-width: 119em) {
  .primaryNav.wide .content > ul > li {
    max-width: 10%;
  }
}