body					{font-family: Arial, Helvetica, sans-serif; overflow: hidden; color: white; background-color: #505050}
article					{background-color: rgba(64,64,64,0.85); position: fixed; padding: 0 3vmin 2vmin 3vmin; left: 0; right: 0; bottom: 0; overflow-y: auto}
article::-webkit-scrollbar			{width:16px; background-color: rgba(48,48,48,0.6); border-radius:8px} 
article::-webkit-scrollbar-thumb	{width:14px; background-color:rgba(196,196,196,0.6); border-radius:7px}
.parents				{background-color: #85B5CB}
.login					{background-color: #377F4F}
.home					{background-color: #58CD7F}
.help					{background-color: #547181}
.contact				{background-color: #5D7E69}
.feedback				{background-color: #54717F}
.student				{background-color: #58C7FE}
a						{color: #FFFFA0; text-decoration: none}
a:hover					{text-decoration: underline; color: #FF0000}
li						{margin: 4px 0 4px 0}
h1.heading				{font-size: xx-large; color: #FFFFF0; margin: 15px 0 0 0}
.menu_section			{cursor: pointer}
.menu_section a			{border: 0; text-decoration: none; color: white}
.menu_item a			{border: 0; text-decoration: none; color: white}
.menu_item a:hover		{font-weight: bold}
.menu_section a:hover	{text-decoration: none; color: white}
.menu_item				{text-align: center}
.menu_section, .menu_item, #menu heading, .menu_section p {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
td						{color: white}
@media screen and (max-aspect-ratio: 1280/1000) and (min-width: 1px), (max-width: 619px) and (min-width: 1px) {
body					{margin-top: 10.5vh}
article					{background-image: none; top: 8.5vh}
#menu					{position: fixed; height: 7.5vh; top: 0; left: 0; right: 0; overflow: hidden; display: block; padding-top: 1vh; background-color: #FFFFF0; z-index: 1; cursor: pointer}
#menu:hover				{overflow: visible}
#menu img				{height: 7vh; margin: 0 1vh 0 1vh; float: left}
#menu .heading			{color: #377F4F; font-size: 3.5vh; font-weight: bold; float: left; text-align: left; margin-top: 1.25vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 45vh; max-width: calc(100vw - 20vh)}
.menu_section			{width: 30vh; height: 7vh; color: white; float: right; display: inline-block; box-sizing: border-box; transition: height 0.3s ease-out; padding-top: 1vh; font-size: 2.6vh; overflow: hidden; clear: right}
.home					{margin-top: 1.8vh}
.menu_section p			{font-size: 3vh; font-weight: bold; text-align: center; margin: 1vh}
.menu_item				{line-height: 150%; display: block}
.menu_item:hover		{font-weight: bold}
.help:hover				{height: 15vh}
.feedback:hover			{height: 27vh}
.student:hover			{height: 15vh}
.parents:hover			{height: 19vh}
.mobile					{display: inline; color: grey; float: right; font-size: 4.5vh; margin: 0; padding: 0.6vh 1.2vh 0.6vh; height: 4.5vh; cursor: pointer}
.spacer					{background-color: rgba(0,0,0,0); height: 22vh}
}
@media screen and (min-aspect-ratio: 1280/1000) and (min-width: 620px) and (max-width: 5000px) {
body					{margin-top: 12.75vmin; background-position: 0 12.5vmin; background-attachment: fixed; background-size: 100%;  background-repeat: no-repeat; background-image: url("/graphics/group.jpg")}
article					{top: 12.5vmin}
#menu					{position: fixed; height: 11.5vmin; top: 0; left: 0; right: 0; overflow: visible; display: block; padding-top: 1vmin; background-color: #FFFFF0; text-align: right; padding-right: 1vmin; z-index: 1}
#menu img				{height: 10vmin; margin: 0.4vmin 0.6vmin 0 0.6vmin; float: left}
#menu .heading			{color: #377F4F; font-size: 4vmin; font-weight: bold; float: left; text-align: left; padding-top: 0.6vmin; width: 32vmin}
.menu_section			{width: 7.5vmin; height: 7.5vmin; color: white; transform: rotate(-45deg); position: relative; display: inline-block; box-sizing: border-box; transition: all 0.3s ease-out; margin: 1.5vmin; transform-origin: calc(3.75vmin) calc(3.75vmin); padding-top: 1vmin; font-size: 1.7vmin; vertical-align: top; overflow: hidden}
.menu_section:hover		{width: 9vmin; transform: rotate(0deg); margin: 0.75vmin}
.menu_section p			{transform: rotate(45deg); transition: all 0.3s ease-out; font-size: 1.7vmin; font-weight: bold; text-align: center; margin: 1.85vmin 0 2.7vmin 0; top: 1.5vmin}
.menu_section:hover p	{transform: rotate(0deg); margin-top: 2.5vmin}
.menu_item				{margin: 0.7vmin 0 0.7vmin 0; display: block}
.menu_item:hover		{font-weight: bold}
.home:hover				{height: 9vmin}
.help:hover				{height: 14vmin}
.contact:hover			{height: 9vmin}
.feedback:hover			{height: 26vmin}
.student:hover			{height: 14vmin}
.parents:hover			{height: 16.5vmin}
.login:hover			{height: 9vmin}
.mobile					{display: none}
.spacer					{display: none}
}
@media screen and (max-aspect-ratio: 1280/1000) and (min-width: 620px) and (max-width: 5000px) {
body					{background-position: center 8.5vh; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-image: url("/graphics/group.jpg")}
}
@media screen and (max-width: 440px) and (min-width: 1px) {
.menu_section			{width: 100%; height: 7vh; color: white; float: right; display: block; box-sizing: border-box; transition: height 0.3s ease-out; padding-top: 1vh; font-size: 2.6vh; overflow: hidden; clear: right}
.home					{margin-top: 0.5vh}
}