/* Styling of top navbar*/

.menu-wrapper {
	position: fixed;
	display:flex;
	justify-content: space-between;
	align-items: center;
	width: 100vw;
	z-index:10;
}

.menu-wrapper.scrolled, .menu-wrapper.scrolled .nav-list {
	background-color: #b0e3eb;
	transition: background-color 0.25s ease-in-out;
}

@media screen and (width > 992px) {
	.menu-wrapper.scrolled {
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	}

	.logo {
		padding: 10px 10px 0px 10px;
	}

	.logo > img {
		height:2.5em;
		filter:invert(20%);
	}

	nav {
		height: 3em;
		padding-left: 5vw;
		padding-right: 5vw;
		overflow-x: scroll;
	}

#menu-button {
			display: none;
		}

	.menu ul {
		margin: 0;
		text-align: center;
		padding: 0.5em 0;
		white-space: nowrap;
	}

	.menu li {
		margin: 0px 50px 0px 0px;
		list-style: none;
		font-size: 1.5em;
		width:fit-content;
		display: inline-block;
		vertical-align: text-top;
	}

	.menu li:last-child {
		margin-right: 0px;
	}

		.menu a,
		.menu .submenu-link {
			text-decoration: none;
			color: #3C3A3D;
			z-index: 20;
			display: inline-block;
			position: relative;
		}

	.menu a:hover{
		text-decoration: none;
	}

		.menu .current-item > a,
		.menu .current-item > .submenu-link{
			text-decoration: none;
		}

		.menu a::after,
		.menu .submenu-link::after{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: block;
			content: '';
			border-bottom: solid 2px #3C3A3D;
			transform: scaleX(0);
			transform-origin: 0% 0%;
			transition: transform 0.25s ease-in-out;
		}

		.menu a:hover::after,
		.menu .submenu-link:hover::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}

		.menu .current-item > a::after,
		.menu .current-item > .submenu-link::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}
}

@media screen and (576px < width <= 992px) {
	.menu-wrapper.scrolled {
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	}

	.menu-wrapper.scrolled .nav-list {
		transition: max-height 400ms ease-in-out;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 1px 0px, rgba(60, 64, 67, 0.15) 0px 2px 2px 1px;
	}

	.logo {
		padding: 5px 5px 0px 5px;
	}

	.logo > img {
		height:3em;
		filter:invert(20%);
	}

	nav {
		height: 10em;
		overflow: visible;
	}

	#menu-button {
			cursor: pointer;
			display: block;
			position: absolute;
			top: 50%;
			right: 50px;
			width: 50px;
			padding: 0;
			border: 0;
			background: transparent;
			transform: translate(-50%,-50%);  
		}

	#menu-button:before, #menu-button:after {
		background-color: #3C3A3D;
		content: '';
		display: block;
		height: 6px;
		transition: all 200ms ease-in-out;
	}

	#menu-button:before {
		box-shadow: 0 15px 0 #3C3A3D;
		margin-bottom: 24px;
	}

	.menu.show #menu-button:before {
	  	box-shadow: 0 0 0 #3C3A3D;
  		transform: translateY(15px) rotate(45deg);
	}

	.menu.show #menu-button:after{
  		transform: translateY(-15px) rotate(-45deg);
	}

	.menu ul {
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		position: relative;
		top: 100%;
		text-align: center;
		padding: 1.5em;
		white-space: nowrap;
		background-color: #f8f8f6;
		transition: max-height 400ms ease-in-out;
	}

	.menu.show ul {
		visibility: visible;
		max-height: 100vh;
	}

	.menu li {
		margin: 25px;
		list-style: none;
		font-size: 2.5em;
		width:fit-content;
		display: block;
	}

		.menu a,
		.menu .submenu-link {
			text-decoration: none;
			color: #3C3A3D;
			z-index: 20;
			display: inline-block;
			position: relative;
		}

	.menu a:hover{
		text-decoration: none;
	}

		.menu .current-item > a,
		.menu .current-item > .submenu-link{
			text-decoration: none;
		}

		.menu a::after,
		.menu .submenu-link::after{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: block;
			content: '';
			border-bottom: solid 3px #3C3A3D;
			transform: scaleX(0);
			transform-origin: 0% 0%;
			transition: transform 0.25s ease-in-out;
		}

		.menu a:hover::after,
		.menu .submenu-link:hover::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}

		.menu .current-item > a::after,
		.menu .current-item > .submenu-link::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}
}

@media screen and (width <= 576px) {
	.menu-wrapper.scrolled {
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	}

	.menu-wrapper.scrolled .nav-list {
		transition: max-height 400ms ease-in-out;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 1px 0px, rgba(60, 64, 67, 0.15) 0px 2px 2px 1px;
	}

	.logo {
		padding: 5px 5px 0px 15px;
	}

	.logo > img {
		display: none;
	}

	nav {
		height: 6em;
		overflow: visible;
	}

	#menu-button {
			cursor: pointer;
			display: block;
			position: absolute;
			top: 50%;
			right: 25px;
			width: 50px;
			padding: 0;
			border: 0;
			background: transparent;
			transform: translate(-50%,-50%);  
		}

	#menu-button:before, #menu-button:after {
		background-color: #3C3A3D;
		content: '';
		display: block;
		height: 6px;
		transition: all 200ms ease-in-out;
	}

	#menu-button:before {
		box-shadow: 0 15px 0 #3C3A3D;
		margin-bottom: 24px;
	}

	.menu.show #menu-button:before {
	  	box-shadow: 0 0 0 #3C3A3D;
  		transform: translateY(15px) rotate(45deg);
	}

	.menu.show #menu-button:after{
  		transform: translateY(-15px) rotate(-45deg);
	}

	.menu ul {
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		position: relative;
		top: 100%;
		text-align: center;
		padding: 1.5em;
		white-space: nowrap;
		background-color: #f8f8f6;
		transition: max-height 400ms ease-in-out;
	}

	.menu.show ul {
		visibility: visible;
		max-height: 100vh;
	}

	.menu li {
		margin: 25px;
		list-style: none;
		font-size: 2em;
		width:fit-content;
		display: block;
	}

		.menu a,
		.menu .submenu-link {
			text-decoration: none;
			color: #3C3A3D;
			z-index: 20;
			display: inline-block;
			position: relative;
		}

	.menu a:hover{
		text-decoration: none;
	}

		.menu .current-item > a,
		.menu .current-item > .submenu-link{
			text-decoration: none;
		}

		.menu a::after,
		.menu .submenu-link::after{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: block;
			content: '';
			border-bottom: solid 3px #3C3A3D;
			transform: scaleX(0);
			transform-origin: 0% 0%;
			transition: transform 0.25s ease-in-out;
		}

		.menu a:hover::after,
		.menu .submenu-link:hover::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}

		.menu .current-item > a::after,
		.menu .current-item > .submenu-link::after {
			transform-origin: 100% 0%;
			transform: scaleX(1);
		}
}

/* Styling of submenu*/

.submenu-link {
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	color: #3C3A3D;
	z-index: 20;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
}

.submenu.show {
	visibility: visible;
}

.submenu-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--submenu-item-width), 1fr));
	padding: 20px;
	overflow-y: scroll;
	mask-image: linear-gradient(#3C3A3D 95%, transparent);
}

.submenu-item {
	margin: 0;
	text-align: center;
	width: fit-content;
	display: inline;
	padding: 0.5em 0;
	white-space: nowrap;
}

.submenu-item li:first-child{
	font-weight: bold;
}

.submenu-item li {
	list-style: none;
	width:fit-content;
	vertical-align: text-top;
}

.submenu-item a {
    text-decoration: none;
	color: #3C3A3D;
}

.submenu-item a:hover{
	text-decoration: none;
}

.submenu-close {
  	position: relative;
  	width: 100%;
  	display: flex;
  	justify-content: center;
  	align-items: center;
}

.submenu-close .circle {
	  	background: lightslategrey;
		cursor: pointer;
	  	transition: transform 0.2s ease-in-out;
		border: 0;
		padding: 0;
}

.submenu-close .circle .line {
	position: absolute;
	top: 50%;
	left: 50%;
	background: aliceblue;
	transform-origin: center;
	transform: translate(-50%, -50%) rotate(45deg);
}

.submenu-close .circle .line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.submenu-close .circle:hover {
  transform: rotate(45deg);
}

@media screen and (width > 992px) {
	.submenu {
		display: flex;
		width: 80vw;
		flex-direction: column;
		visibility: hidden;
		z-index: 20;
		background-color: aliceblue;
		position: fixed;
		max-height: calc(100vh - 4.5em);
		top: 3.5em;
		left: 50%;
		transform: translate(-50%, 0%);
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	}

	.submenu-item li:first-child{
		font-size: 1.7em;
	}

	.submenu-item li {
		margin: 0px 10px 0px 0px;
		font-size: 1.5em;
	}

	.submenu-item a::after{
		display: block;
		content: '';
		border-bottom: solid 2px #3C3A3D;
		transform: scaleX(0);
		transform-origin: 0% 0%;
		transition: transform 0.25s ease-in-out;
	}

	.submenu-item a:hover::after {
		transform-origin: 100% 0%;
		transform: scaleX(1);
	}

	.submenu-close {
		padding: 20px 0;
	}

	.submenu-close .circle {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}

	.submenu-close .circle .line {
		width: 20px;
		height: 4px;
		border-radius: 2px;
	}
}

@media screen and (576px < width <= 992px) {
	.submenu {
		display: flex;
		width: 95vw;
		flex-direction: column;
		visibility: hidden;
		z-index: 20;
		background-color: aliceblue;
		position: fixed;
		max-height: calc(100vh - 7em);
		top: 2.5em;
		left: 50%;
		transform: translate(-50%, 0%);
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	}

	.submenu-item li:first-child{
		font-size: 2em;
	}

	.submenu-item li {
		margin: 0px 10px 0px 0px;
		font-size: 1.8em;
	}

	.submenu-close {
		padding: 20px 0;
	}

	.submenu-close .circle {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}

	.submenu-close .circle .line {
		width: 20px;
		height: 4px;
		border-radius: 2px;
	}
}

#menu-button:focus-visible,
.submenu-link:focus-visible,
.submenu-close .circle:focus-visible {
	outline: 2px solid #3C3A3D;
	outline-offset: 3px;
}

@media screen and (width <= 576px) {
	.submenu {
		display: flex;
		width: 95vw;
		flex-direction: column;
		visibility: hidden;
		z-index: 20;
		background-color: aliceblue;
		position: fixed;
		max-height: calc(100vh - 7em);
		top: 2.5em;
		left: 50%;
		transform: translate(-50%, 0%);
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	}

	.submenu-item li:first-child{
		font-size: 1.8em;
	}

	.submenu-item li {
		margin: 0px 10px 0px 0px;
		font-size: 1.6em;
	}

	.submenu-close {
		padding: 20px 0;
	}

	.submenu-close .circle {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}

	.submenu-close .circle .line {
		width: 20px;
		height: 4px;
		border-radius: 2px;
	}
}

#menu-button:focus-visible,
.submenu-link:focus-visible,
.submenu-close .circle:focus-visible {
	outline: 2px solid #3C3A3D;
	outline-offset: 3px;
}