/* --- Menu --- */

/* -- General -- */
nav.main ul {
	margin: 0;
	padding: 0;
}

nav.main li {
	display: inline-block;
}

nav.main a {
	color: var(--dark-gray-color);
}

nav.main .submenu a {
	color: inherit;
}

nav.main li.active > a,
nav.main li.current > a,
nav.main li:hover > a {
	color: var(--light-color);
}

nav.main .submenu li.active > a,
nav.main .submenu li.current > a,
nav.main .submenu li:hover > a {
	color: var(--dark-color);
}

nav.main a:hover {
	text-decoration: none;
}

/* -- Main -- */
nav.main {
	font-size: 19px;
}

nav.main > ul > li {
}

nav.main li.active,
nav.main li.current,
nav.main > ul > li:hover {
	background-color: var(--highlight-color);
}
nav.main li.active > a,
nav.main li.current > a,
nav.main > ul > li:hover > a {
	color: var(--dark-color);
}

nav.main > ul > li:first-child {
}

nav.main > ul > li:last-child {
}

nav.main > ul > li > a {
	display: block;
	padding: 0.5rem 1rem;
	text-transform: uppercase;
}

nav.main li.active,
nav.main li.current,
nav.main li.is-active {
}

/* -- Submenu -- */
.submenu {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.8);
    font-size: 17px;
    padding-bottom: .5rem;
    padding-top: 1rem;
    position: absolute;
    z-index: -1;
}

nav.main li.subopen > .submenu {
	display: inline-block;
}

.submenu ul {
	list-style-type: none;
	margin: 0;
	padding: 2rem 0;
}

nav.main .submenu li {
	display: block;
	position: relative;
}

nav.main .submenu li.sub {
	display: flex;
}

nav.main .submenu li.active,
nav.main .submenu li.current,
nav.main .submenu li:hover {
	background-color: var(--highlight-color);
}

.submenu a {
	display: inline-block;
	padding: 0.2rem 1rem;
	white-space: nowrap;
	width: 100%;
  	min-width: 230px;
}

.submenu .active a:hover,
.submenu .current a:hover,
.submenu a:hover {
	color: var(--light-gray-color);
}

.submenu a:hover::before {
}

.submenu .submenu {
	left: 100%;
	padding: 0 0 0.5rem;
	top: 0;
}

.toggle-submenu {
	cursor: pointer;
	padding: 0.2rem 1rem;
	text-align: right;
	width: 3rem;
}
nav.mobile .toggle-submenu>a {
	padding: 0px;
}

.toggle-submenu .closed {
	display: none;
}

li.active > .toggle-submenu,
li.current > .toggle-submenu,
li:hover > .toggle-submenu {
	color: var(--light-color);
}

nav.main li.subopen > .toggle-submenu .closed {
	display: inline-block;
}

nav.main li.subopen > .toggle-submenu .open {
	display: none;
}

/* -- Crumbtrail -- */

.crumbtrail {
	font-size: 0.9rem;
	margin-bottom: 20px;
	margin-top: 20px;
}

.crumbtrail ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.crumbtrail li {
	display: inline-block;
  	margin-bottom: 2rem;
}

.crumbtrail a {
	color: inherit;
}

.crumbtrail a:hover {
	text-decoration: underline;
}

.crumbtrail .current a {
	text-decoration: underline;
}

/* -- Meta -- */

.meta ul {
    display: flex;
    list-style: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
}
.meta ul li a {
    margin-left: var(--bs-gutter-x);
}
.meta ul li .icon img {
    height: 20px;
    width: 20px;
}
.meta ul li:first-child .icon img {
    height: 20px;
    width: 34px;
}
.meta ul li .text {
    display: none;
}

/* -- Mobile -- */

.hamburger-container,
.mobileLanguage {
	margin-top: 20px;
}

.hamburger-container {
	height: 45px;
}


.hamburger{
    align-items: center;
    background: var(--light-bg-color);
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: center;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.4s ease;
    width: 70px;
    z-index: 1;
}

.hamburger > div{
    align-items: center;
    background-color: var(--highlight-color);
    display: flex;
    height: 3px;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
    width: 100%;
}

.hamburger > div:before,
.hamburger > div:after{
    background: inherit;
    content: '';
    height: 3px;
    position: absolute;
    top: -10px;
    transition: all 0.4s ease;
    width: 100%;
    z-index: 1;
}

.hamburger > div:after{
    top: 10px;
}
body.menu-open .hamburger > div{
    transform: rotate(135deg);
}

body.menu-open .hamburger > div:before,
body.menu-open .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}
body.menu-open .hamburger > div{
    transform: rotate(225deg);
}

@media(min-width: 768px) {

}

.mobile-container {
    position: fixed;
    left: 0;
    top: 65px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
}
.mobile-container nav.mobile:before {
    background: var(--light-gray-color);
    box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.8);
    border-radius: 40%;
    content: "";
    height: 1400px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-1400px);
    width: 1400px;
    z-index: -1;
}
body.menu-open .mobile-container {
    pointer-events: auto;
}
body.menu-open .mobile-container nav.mobile:before {
    animation-name: fillitdown;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(0.65, 0.89, 0.71, 0.28);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0ms;
    border-radius: 0%;
    transform: translateX(-50%) translateY(-200px);
}
body.menu-close .mobile-container nav.mobile:before {
    animation-name: fillitup;
    animation-duration: 500ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 0ms;
    border-radius: 50%;
}
@keyframes fillitdown {
  from {
    border-radius: 50%;
    transform: translateX(-50%) translateY(-1400px) rotate(0deg); 
  }
  to {
    border-radius: 0%;
    transform: translateX(-50%) translateY(-200px) rotate(0deg); 
  }
}
@keyframes fillitup {
  from {
    border-radius: 0%;
    transform: translateX(-50%) translateY(-200px) rotate(0deg); 
  }
  to {
    border-radius: 50%;
    transform: translateX(-50%) translateY(-1400px) rotate(0deg); 
  }
}

nav.mobile {
	height: 100%;
    overflow: hidden;
	position: fixed;
	text-align: center;
	/* transform: translateY(calc( -100vh - 65px )); */
	/* transition: transform 1.1s linear;  */
	width: 100%;
    will-change: transform;
    z-index: 60;
}

nav.mobile ul {
	padding: 0;
}
nav.mobile>.mobile-meta {
    display: flex;
    justify-content: center;
    background-color: var(--light-bg-color);
    padding: 5px 0px 10px 0px;
}
nav.mobile>.mobile-meta,
nav.mobile>ul {
    opacity: 0;
    transition: opacity 300ms linear 0ms;
}
body.menu-open nav.mobile>.mobile-meta {
    opacity: 1;
    transition: opacity 500ms linear 800ms;
}
body.menu-open nav.mobile>ul {
    opacity: 1;
    transition: opacity 500ms linear 400ms;
}

body.menu-open {
	/* overflow: hidden; */
}

body.menu-open nav.mobile {
	/* transform: translateY(0px); */
}

nav.mobile a {
	color: var(--dark-gray-color);
	display: inline-block;
	padding: 6px 1rem;
	text-transform: uppercase;
}

nav.mobile > ul {
	/* background-color: var(--highlight-color); */
	margin: 12px 0 0;
}

nav.mobile li {
	display: block;
}


nav.mobile > ul > li.active > .item,
nav.mobile > ul > li.current > .item,
nav.mobile > ul > li.subopen > .item,
nav.mobile .item:hover {
	background-color: var(--highlight-color);
}
nav.mobile > ul > li.active > .item > a,
nav.mobile > ul > li.current > .item > a,
nav.mobile > ul > li.subopen > .item > a,
nav.mobile .item:hover > a {
	color: var(--dark-color);
}

nav.mobile > ul > li > a {
}

nav.mobile .toggle-submenu {
	cursor: pointer;
	margin-right: 1rem;
	position: absolute;
	right: 0;
}

nav.mobile .toggle-submenu img {
	height: 18px;
	transform: rotate(90deg);
}

nav.mobile .submenu .toggle-submenu img {
	height: 16px;
}

nav.mobile .toggle-submenu .white {
	display: none;
}

nav.mobile .subopen > .item > .toggle-submenu > a > img {
	transform: rotate(-90deg);
}

nav.mobile .active a,
nav.mobile .current a,
nav.mobile .item:hover a {
	/* color: inherit; */
	text-decoration: none;
}

nav.mobile .active .toggle-submenu .grey,
nav.mobile .current .toggle-submenu .grey,
nav.mobile .subopen .toggle-submenu .grey,
nav.mobile .item:hover > .toggle-submenu .grey {
	display: none;
}

nav.mobile .active .toggle-submenu .white,
nav.mobile .current .toggle-submenu .white,
nav.mobile .subopen .toggle-submenu .white,
nav.mobile .item:hover > .toggle-submenu .white {
	display: inline-block;
}

nav.mobile .mobile-submenu ul {
	background-color: var(--light-bg-color);
    padding: 10px 0px;
}

nav.mobile .mobile-submenu a {
	color: inherit;
	padding: 3px 1rem;
    text-transform: none;
}

nav.mobile .mobile-submenu .toggle-submenu .grey {
	display: inline-block;
}

nav.mobile .mobile-submenu .toggle-submenu .white {
	display: none;
}

nav.mobile .mobile-submenu > ul > li.active,
nav.mobile .mobile-submenu > ul > li.current,
nav.mobile .mobile-submenu > ul > .item:hover {
	background-color: var(--highlight-color);
}

nav.mobile .mobile-submenu li.active > .item > a,
nav.mobile .mobile-submenu li.current > .item > a,
nav.mobile .mobile-submenu .item:hover > a {
	color: var(--dark-color);
}

nav.mobile .mobile-submenu .active .toggle-submenu .grey,
nav.mobile .mobile-submenu .current .toggle-submenu .grey,
nav.mobile .mobile-submenu .item:hover .toggle-submenu .grey {
	display: none;
}

nav.mobile .mobile-submenu .active .toggle-submenu .white,
nav.mobile .mobile-submenu .current .toggle-submenu .white,
nav.mobile .mobile-submenu .item:hover .toggle-submenu .white {
	display: inline-block;
}

nav.mobile .mobile-submenu .mobile-submenu .active .item,
nav.mobile .mobile-submenu .mobile-submenu .current .item,
nav.mobile .mobile-submenu .mobile-submenu .item:hover .item {
	background-color: var(--light-gray-color);
}

nav.mobile .mobile-submenu .mobile-submenu a {
	text-transform: unset;
}

nav.mobile .mobile-submenu .mobile-submenu li.active > .item > a,
nav.mobile .mobile-submenu .mobile-submenu li.current > .item > a,
nav.mobile .mobile-submenu .mobile-submenu .item:hover > a {
	color: inherit;
}

@media(min-width: 576px) {
    
}

@media(min-width: 768px) {
    
}

@media(min-width: 992px) {
	nav.mobile {
		display: none;
	}
}

/* -- Icons -- */

nav.icons {
	display: none;
	position: fixed;
	top: 50%;
	z-index: 20;
}

@media(min-width: 992px) {
	nav.icons {
		display: block;
	}
}

nav.icons ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav.icons li {
	box-shadow: 3px 3px 3px rgba(64, 64, 64, 0.6);
	display: block;
	margin-bottom: 6px;
	text-align: center;
}

nav.icons .icon {
	display: inline-block;
	width: 32px;
}

nav.icons a {
	background-color: var(--light-gray-color);
	border-left: 0;
	display: inline-block;
	padding: 0.75rem;
}

nav.mobile nav.icons {
	display: block;
	position: relative;
	top: 0;
}

nav.mobile nav.icons li {
	box-shadow: unset;
	display: inline-block;
	margin: 0 0.5rem;
}

nav.mobile nav.icons a {
	background-color: transparent;
	border: none;
	display: inline-block;
	padding: 0.5rem;
}

@media(min-width: 992px) {
	nav.icons {
		left: -20px;
		position: fixed;
		top: 50%;
		width: 60px;
		z-index: 20;
	}
	
	nav.icons li {
		text-align: right;
		transition: margin-left .3s ease;
		width: 76px;
	}
	
	nav.icons li:hover {
		margin-left: 16px;
	}
	
	nav.icons a {
		padding: 12px 8px;
	}
	
	nav.icons .icon {
		margin-left: 20px;
		text-align: center;
		width: 40px;
	}
}
/*
@media (prefers-color-scheme: dark) {
    nav.main a {
        color: var(--light-gray-color);
    }
    nav.main li.active > a,
    nav.main li.current > a,
    nav.main li:hover > a {
        color: var(--dark-color);
    }

    nav.main .submenu li.active > a,
    nav.main .submenu li.current > a,
    nav.main .submenu li:hover > a {
        color: var(--light-color);
    }
    nav.main li.active > a,
    nav.main li.current > a,
    nav.main > ul > li:hover > a {
        color: var(--light-color);
    }
    .submenu {
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow: inset 0px 5px 5px -5px rgba(255,255,255,0.8);
    }
    nav.main .submenu li.active,
    nav.main .submenu li.current,
    nav.main .submenu li:hover {
        background-color: var(--light-gray-color);
    }
    .submenu .active a:hover,
    .submenu .current a:hover,
    .submenu a:hover {
        color: var(--dark-gray-color);
    }
    li.active > .toggle-submenu,
    li.current > .toggle-submenu,
    li:hover > .toggle-submenu {
        color: var(--dark-color);
    }
    .hamburger {
        background: var(--dark-bg-color);
    }
    .mobile-container nav.mobile:before {
        background: var(--dark-bg-color);
        box-shadow: 0px 0px 30px -5px rgba(255,255,255,0.8);
    }
    nav.mobile>.mobile-meta {
        background-color: var(--dark-gray-color);
    }
    nav.mobile>.mobile-meta .icon img {
        filter: brightness(2);
    }
    nav.mobile a {
        color: var(--dark-color);
    }
    nav.mobile .mobile-submenu ul {
        background-color: var(--dark-gray-color);
    }
    nav.mobile .mobile-submenu li.active > .item > a,
    nav.mobile .mobile-submenu li.current > .item > a,
    nav.mobile .mobile-submenu li.subopen  > .item > a,
    nav.mobile .mobile-submenu .item:hover > a {
        color: var(--light-color);
    }
    nav.mobile .mobile-submenu .mobile-submenu .active .item,
    nav.mobile .mobile-submenu .mobile-submenu .current .item,
    nav.mobile .mobile-submenu .mobile-submenu .item:hover .item {
        background-color: var(--dark-bg-color);
    }
    nav.icons a {
        background-color: var(--dark-bg-color);
    }

    nav.mobile .toggle-submenu .white {
        display: inline-block;
    }
    nav.mobile .toggle-submenu .grey {
        display: none;
    }
    nav.mobile .active .toggle-submenu .grey,
    nav.mobile .current .toggle-submenu .grey,
    nav.mobile .subopen  .toggle-submenu .grey,
    nav.mobile .item:hover > .toggle-submenu .grey {
        display: none;
    }
    nav.mobile .active .toggle-submenu .white,
    nav.mobile .subopen .toggle-submenu .white,
    nav.mobile .current .toggle-submenu .white,
    nav.mobile .item:hover > .toggle-submenu .white {
        display: inline-block;
    }

    nav.mobile .mobile-submenu .toggle-submenu .grey {
        display: inline-block;
    }
    nav.mobile .mobile-submenu .toggle-submenu .white {
        display: none;
    }
    nav.mobile .mobile-submenu .active .toggle-submenu .grey,
    nav.mobile .mobile-submenu .current .toggle-submenu .grey,
    nav.mobile .mobile-submenu .item:hover .toggle-submenu .grey {
        display: none;
    }
    nav.mobile .mobile-submenu .active .toggle-submenu .white,
    nav.mobile .mobile-submenu .current .toggle-submenu .white,
    nav.mobile .mobile-submenu .item:hover .toggle-submenu .white {
        display: inline-block;
    }
}
*/