@charset "utf-8";

:root {
	--mainMenuSize: 18px;
	--mainMenuColor: #000;
	--mainMenuColorActive: rgba(35, 172, 56, 1);

	--toggleMenuBgColor: #f3ffbd;
	--toggleMenuFontSize: 26px;

	--submenuWidth: 200px;
	--submenuFontColor: #000;
	--submenuFontColorActive: #009ab2;
	--submenuFontSize: 16px;
	--submenuBgColor: rgba(147, 197, 187, 1);
}


.mainMenu > ul {
	list-style-type:none; padding: 0 0 0 0; margin: 0;
}
.mainMenu > ul > li {
	float: left; text-align: center; padding: 5px 0 5px 50px; font-size: var(--mainMenuSize); font-weight: bold; line-height: 2.2em; letter-spacing: 1px; cursor: pointer; position: relative;
}
.mainMenu > ul > li > .bg {
	border-bottom: var(--mainMenuColorActive) 5px solid; position: absolute; z-index: -1; position: absolute; display: inline-block; color: rgba(0, 0, 0, 0);
	transition: transform 0.3s, opacity 0.3s; transform: scale(0, 1); opacity: 0;
}
.mainMenu > ul > li:hover > .bg, .mainMenu > ul > li.active > .bg, .mainMenu > ul > li.onload > .bg {
	transform: scale(1, 1); opacity: 1;
}
.mainMenu > ul > li > .text {
	position: relative; display: inline-block;
}
.mainMenu > ul > li > .text > a {
	color: var(--mainMenuColor); font-family: var(--mainMenuFont);
}
.mainMenu > .toggle {
	width: 30px; height: 30px; display: none; cursor: pointer;
}
.mainMenu > .toggle > img {
	width: 100%;
}
.mainMenu > .toggle > .menu {
	display: none;
}
.mainMenu > .toggle > .close {
	display: none;
}
.mainMenu .submenu {
	width: var(--submenuWidth); left: 0; top: 0; padding: 60px 0 0 0; display: block; position: absolute; z-index: 3; box-sizing: border-box; overflow: hidden;
	transition: max-height 0.5s; max-height: 0px; transform-origin: 0px 80px;
}
.mainMenu > ul > li:hover .submenu,
.mainMenu > ul > li:active .submenu {
	max-height: 600px;
	transition: max-height 1s;
}
.mainMenu .submenu > div {
	width: 100%; padding: 10px 0; background: var(--submenuBgColor);
}
.mainMenu .submenu > div > div {
	display: block; width: 100%; color: var(--submenuFontColor); font-size: var(--submenuFontSize); line-height: 1.5em; font-weight: bold; margin: 0; padding: 10px 20px; box-sizing: border-box; cursor: pointer;
	transition: color 0.5s;
}
.mainMenu .submenu > div > div:hover,
.mainMenu .submenu > div > div.active {
	color: var(--submenuFontColorActive);
}

@media only screen and (max-width:960px) {
	.mainMenu > ul {
		position: fixed; z-index: 3; margin: 0; padding: 0; background: var(--toggleMenuBgColor); top: 0; left: 100vw; width: 100%; height: 100vh; margin: auto auto;
		display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;
		transition: opacity 0s 0.4s ease-in, left 0.4s ease-in; opacity: 0;
	}
	.mainMenu.active > ul {
		visibility: visible; opacity: 1; left: 0;
		transition: opacity 0s 0s ease-in, left 0.4s ease-in;
	}
	.mainMenu > ul > li {
		float: none; text-align: center; width: 220px; padding: 20px 0; font-family: var(--mainMenuFont); font-size: var(--toggleMenuFontSize); font-weight: bold; line-height: 1.5em; cursor: pointer;
	}
	.mainMenu > ul > li > .bg {
		padding: 5px 0 5px 0;
	}
	.mainMenu > .toggle {
		display: block; position: fixed; z-index: 4; top: 5px; right: 20px;
		transition: right 0.5s ease-in;
	}
	.mainMenu.active > .toggle {
		right: 20px;
	}
	.mainMenu > .toggle > .menu {
		display: block;
	}
	.mainMenu.active > .toggle > .menu {
		display: none;
	}
	.mainMenu > .toggle > .close {
		display: none;
	}
	.mainMenu.active > .toggle > .close {
		display: block;
	}
	.mainMenu .submenu {
		position: static; padding: 0; margin: 0 0 0 10px; transform-origin: 0px 0;
		transition: max-height 1s;
	}
}