/* navigation-main.css */

/* ... main nav ...
limited for 2 level menu
-----------------------------------------------*/
.mainnav {
	grid-column: 2/-1;
	grid-row: 2/-1;
	transform: translateY(35px);
}
.mainnav > ul {
	display: flex;
	justify-content: flex-end;
	overflow: visible;
}
.mainnav > ul > li {
	padding-bottom: 1em;
  position: relative;
  overflow: visible;
}
/** items */
.mainnav li a,
.mainnav li > span,
.mainnav strong {
	padding: .5em;
	color: inherit;
	position: relative;
	font-size: 1.5rem;
}
.mainnav a.no-link {
	cursor: default;
}
/** pseudo border bottom for hover effects*/
.mainnav li a:focus::after,
.mainnav li a:hover::after,
.mainnav li > .trail::after,
.mainnav span::after,
.mainnav strong::after {
  content: "";
  position: absolute;
  height: 2px;
  width: calc(100% - 1em);
  background-color: #a061cf;
  left: 0;
  right: 0;
  bottom: .25em;
  margin: auto;
}
/** with icons before link text *
.mainnav li .icon {
  padding-left: calc(28px + .75em);
}
.mainnav li .icon::before {
	content: "";
	position: absolute;
	width: 28px;
	height: 100%;
	left: .5em;
	top: 0;
	bottom: 0;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px;
}
/** icon only (no link text) *
.mainnav li .icon-only {
	padding-left: .5em;
	text-indent: calc(28px + 1em);
	width: calc(28px + 1em);
	text-overflow: clip;
}
.mainnav li .icon-only::before {
	content: "";
	position: absolute;
	width: 28px;
	height: 100%;
	left: .5em;
	top: 0;
	bottom: 0;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px;
}
/** icon source files *
.mainnav li.icon .home::before {
	background-image: url(img/home.svg);
}
/** 2nd level and downwards */
.mainnav li li {
	position: relative;
	z-index: 1;
}
.mainnav ul ul {
	display: none;
	position: absolute;
  left: 50%;
  transform: translate(-50%, 1em);
	overflow: visible;
	padding: .5em 0;
  background-color: #fff;
}
.js .mainnav ul ul {
	display: none;
}
.mainnav ul > li:last-child > ul {
	left: auto;
	right: 0;
	transform: translate(0, 1em);
	z-index: 1;
}
/** box with triangle and shadow */
.mainnav ul ul,
.mainnav ul ul::after {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
/** the triangle */
.mainnav ul ul::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0.5em;
	transform: rotate(45deg) translateX(-50%);
	width: 1.5em;
	height: 1.5em;
	background-color: #fff;
	transform-origin: 100% 0%;
}
.mainnav ul > li:last-child > ul::after {
	left: calc(100% - 3em);
  right: 1em;
}
/** the triangle overlay */
.mainnav ul ul::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
	border-radius: 1em;
}
/** show on hover */
.no-js .mainnav > ul > li:focus > ul,
.no-js .mainnav > ul > li:hover > ul {
	display: block;
}
/** debug only *
.mainnav > ul > li:last-child > ul {
	display: block;
}
/** */
/** items 2nd level and downwards */
.mainnav li li a,
.mainnav li li span,
.mainnav li li strong {
	padding: .25em .5em;
	color: inherit;
	position: relative;
	font-size: 1.375rem;
}
.mainnav li li a:focus,
.mainnav li li a:hover,
.mainnav li li .trail,
.mainnav li li span,
.mainnav li li strong {
	/* color: #a061cf; */
}
/** pseudo border bottom off, circle on */
.mainnav li li a:focus::after, .mainnav li li a:hover::after, .mainnav li li .trail::after, .mainnav li li span::after, .mainnav li li strong::after {
	bottom: 0;
	margin-left: 14px;
	width: 30px;
	height: 30px;
	background-color: rgba(160, 97, 207, .5);
	border-radius: 50%;
}
/* Program submenu */
.mainnav li.program ul {
  display: flex;
  flex-wrap: wrap;
  min-width: 221px;
}
.mainnav li.program ul > li {
  width: 100%;
  width: 33.3333%;
}
.mainnav li.program ul > li.last {
  width: 100%;
}
/* Menu separator */
.mainnav li.separator-top {
	margin-top: .5em;
}
.mainnav a.separator-top {
	padding-top: .5em;
  /* border-top: 1px solid; */
}
/** pseudo border */
.mainnav a.separator-top::before {
	content: '';
	position: absolute;
	height: 2px;
	width: calc(100% - 1em);
	background-color: #111;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
}

/* ... main nav ... END
-----------------------------------------------*/



/* ... nav main responsive ...
-----------------------------------------------*/
body {
  min-height: 100vh;
}
html.mobile_menu_active {
  overflow-y: hidden;
}
div.mod_mobile_menu {
	width: 32px;
	grid-column: 4/-1;
	padding: .5rem;
	box-sizing: content-box;
}
.mobile_menu_button {
	background-image: url(img/hamburger.svg);
	height: 32px;
	overflow: hidden;
	margin: auto;
	text-indent: 40px;
	white-space: nowrap;
  cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.mobile_menu .inner {
  background-color: rgba(255, 255, 255, 1);
}
.submenu_hide span {
  cursor: pointer;
}
.mm-close {
	background-image: url(img/close.svg);
	background-size: 24px;
	width: 32px;
	position: relative;
	top: 5px;
	right: 5px;
	margin-right: 0;
}
.responsivenav li a,
.responsivenav li > span {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  padding: 0 1em;
  position: relative;
  line-height: 40px;
  transition: all .2s ease 0s;
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}
.responsivenav li a:focus,
.responsivenav li a:hover,
.responsivenav a.trail {
  background-color: rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 1);
}
.responsivenav li > span {
  background-color: rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 1);
}
.responsivenav .submenu > a,
.responsivenav .submenu > span {
  padding-right: 0;
}
.responsivenav .level_2 a,
.responsivenav .level_2 span {
  padding-left: 2rem;
  font-size: .875em;
  line-height: 32px;
}
.responsivenav .level_2 span {
  background-color: rgba(0, 0, 0, .1);
}
.responsivenav .level_3 a,
.responsivenav .level_3 span {
  padding-left: 3rem;
}
.responsivenav .level_4 a,
.responsivenav .level_4 span {
  padding-left: 4rem;
}
.responsivenav .submenu > a::after,
.responsivenav .submenu > span::after {
  content: '›';
  display: inline-block;
  width: 32px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.responsivenav .submenu_show > a::after,
.responsivenav .submenu_show > span::after {
  transform: rotate(90deg);
  text-indent: 4px;
}
/* ... nav main responsive ... END
-----------------------------------------------*/