/* navigation.css */

/* ... All navs ...
-------------------------------------------------------------------------------------------------*/
nav ul,
nav li,
.pagination ul,
.pagination li {
  display: block;
  list-style: none;
  margin: 0;
}
nav li a,
nav strong,
.pagination li a,
.pagination strong {
  display: block;
  text-decoration: none;
  font-weight: normal;
}
.h_nav li,
.pagination li {
}
/* ... All navs ... END
-------------------------------------------------------------------------------------------------*/



/* ... Mainnav ...
-------------------------------------------------------------------------------------------------*/
#mainnav.nav {
  padding: 0;
  background-color: #D3221D;
  overflow: visible;
  width: 100%;
  margin-inline: 20px;
}
#mainnav > ul {
  display: flex;
  flex-wrap: wrap;
}
#mainnav li {
  position: relative;
}
#mainnav li a,
#mainnav strong {
  background-color: #D3221D;
  color: #fff;
  padding: .5em 1em;
  border: 0 solid #fff;
  border-left-width: 1px;
  transition-property: color, background-color;
  white-space: nowrap;
}
#mainnav li a.submenu,
#mainnav strong.submenu {
  padding-right: .5em;
}
#mainnav > ul > li:first-child a,
#mainnav > ul > li:first-child strong {
  border-left-width: 0;
}
#mainnav > ul > li:last-child a,
#mainnav > ul > li:last-child strong {
  border-right-width: 1px;
}
#mainnav strong,
#mainnav a.trail {
  background-color: #FCEFEA;
  color: #444;
}
#mainnav a.trail {
  background-color: #E9908E;
  color: #fff;
}
#mainnav li a:focus,
#mainnav li a:active,
#mainnav ul li:hover > a {
  background-color: #f8ccbc;
  color: #D3221D;
}
#mainnav ul ul {
  display: none;
  position: absolute;
  min-width: calc(100% + 1px);
}
#mainnav li:hover > ul {
  display: block;
  z-index: 2000000000;
}
#mainnav ul ul a,
#mainnav ul ul strong {
  border-width: 1px 1px 0 1px;
  white-space: nowrap;
}
#mainnav ul ul li:last-child a,
#mainnav ul ul li:last-child strong {
  border-bottom-width: 1px;
}
#mainnav ul ul li:hover > ul {
  display: block;
  z-index: 2000000000;
}
#mainnav ul ul ul {
  left: 100%;
  top: 0;
}
#mainnav > ul > li:last-child ul {
  left: auto;
  right: 0;
}
#mainnav > ul > li:last-child ul ul {
  left: auto;
  right: 100%;
}
#mainnav .submenu > a::after,
#mainnav .submenu > strong::after {
	content: '›';
	padding-left: .5em;
	display: inline-block;
	transition: all .25s ease 0s;
  transform-origin: 70% 50%;
}
#mainnav .submenu > strong::after {
	transform: rotate(90deg);
}
/* ... Mainnav ... END
-------------------------------------------------------------------------------------------------*/



/* ... Subnav ...
-------------------------------------------------------------------------------------------------*/
#subnav li a,
#subnav strong {
  transition-property: color, background-color;
  line-height: 2.5rem;
  letter-spacing: .625rem;
}
#subnav strong,
#subnav a.trail {
  color: #444;
}
#subnav a.trail {
  color: #444;
}
#subnav li a:focus,
#subnav li a:active,
#subnav li a:hover {
  color: #444;
}
/* ... Subnav ... END
-------------------------------------------------------------------------------------------------*/



/* ... Servicenav ...
-------------------------------------------------------------------------------------------------*/
#servicenav {
  grid-row: 1 / 2;
  grid-column: 2 / -1;
}
#servicenav > ul {
	display: flex;
	justify-content: flex-end;
}


#servicenav li a,
#servicenav strong {
  color: #887E7E;
  font-size: .9em;
	padding: .75em 1em;
	transition-property: color, background-color;
	position: relative;
}
#servicenav strong,
#servicenav a.trail {
  color: #333;
}
#servicenav a.trail {
}
#servicenav li a:focus,
#servicenav li a:active,
#servicenav li a:hover {
  color: #333;
}
#servicenav li a::after,
#servicenav strong::after {
	background: #887E7E;
	content: "";
	height: .9em;
	position: absolute;
	right: 0;
	top: 1em;
	width: 1px;
}
#servicenav li:last-child a,
#servicenav li:last-child strong {
  padding-right: 20px;
}
#servicenav li:last-child a::after,
#servicenav li:last-child strong::after {
  display: none;
}
/* ... Servicenav ... END
-------------------------------------------------------------------------------------------------*/



/* ... Pagination ...
-------------------------------------------------------------------------------------------------*/
.pagination {
  margin-top: 2rem;
  clear: both;
}
.pagination a,
.pagination strong {
  padding: 6px 10px;
  background-color: #ebebeb;
}
.pagination a:focus,
.pagination a:active,
.pagination a:hover,
.pagination strong {
  background-color: #fff;
}
/* ... Pagination ... END
-------------------------------------------------------------------------------------------------*/



/* ... Vertical levels basics ...
-------------------------------------------------------------------------------------------------*/
.v_nav .level_2 li a,
.v_nav .level_2 strong {
  padding-left: 2em;
}
.v_nav .level_3 li a,
.v_nav .level_3 strong {
  padding-left: 3em;
}
/* ... Vertical levels basics ... END
-------------------------------------------------------------------------------------------------*/



/* ... Responsive mm menu ...
-------------------------------------------------------------------------------------------------*/
html.mm-opened {
  overflow-y: scroll;
}
.navbutton {
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	display: none;
	align-self: flex-start;
	margin: .5em;
}
#header .navbutton {
	padding: 0;
}
.navbutton a {
	background-color: #ececec;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(img/hamburger.svg);
  background-size: 32px 32px;
	width: 40px;
	height: 40px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
}
.navbutton a:hover {
	background-color: white;
}
#responsivenav:not(.mm-menu) {
   display: none;
}
/* ... Responsive mm menu ... END
-------------------------------------------------------------------------------------------------*/