@media (min-width: 800px) {
	#layout-pageheader {
		width: 100%;
		height: 120px;

		top: 0px;
		left: 0px;
		z-index: 100;

		position: fixed;
	}

	#layout-mainheader {
		background-color: #003365FF;

		width: 100%;
		height: 60px;

		display: flex;
		justify-content: space-between;
	}

	.layout-mainheader-element {
		width: 32%;
		height: 100%;
	}

	#mainhead-imgbtn {
		background-color: #00000000;

		width: 40px;
		height: 40px;

		z-index: 102;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		position: absolute;

		border: 0px solid #00000000;
		border-radius: 50px;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		#mainhead-imgbtn:hover {
			background-color: #00336544;
		}
	#mainhead-imgcover {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		z-index: 101;

		position: absolute;
	}

	#mainhead-title {
		cursor: default;
	}

	#mainheader-btnsect {
		display: flex;
		align-items: center;
	}
	#mainheader-btncontainer {
		height: 50px;
		width: 260px;

		margin-left: auto;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.layout-mainheader-navbtn {
		background-color: #003365FF;

		height: 50px;
		width: 80px;

		display: flex;
		justify-content: center;
		align-items: center;

		border-radius: 50px;
		box-sizing: border-box;
		border: 2px solid #EEEEF088;

		cursor: pointer;
		transition: background-color 0.25s ease, border 0.25s ease;
	}
		.layout-mainheader-navbtn:hover {
			background-color: #067CEBFF;

			border: 2px solid #EEEEF0FF;
		}

	#layout-subheader {
		width: 70%;
		height: 60px;

		margin-left: auto;
		margin-right: auto;

		display: flex;
		justify-content: space-evenly;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;
	}

	.layout-subheader-navbtn {
		width: 20%;
		height: 100%;
	}
	.subhead-navbtn {
		background-color: #DCE4F8FF;

		width: 100%;
		height: 100%;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.subhead-navbtn:hover {
			background-color: #067CEBFF;
		}

	.layout-pagebody {
		width: 100%;
		min-height: 100vh;

		padding: 0px;

		position: absolute;
		top: 0px;
		left: 0px;

		display: flex;
		flex-direction: column;
	}

	#layout-bodyspacer {
		width: 100%;
		height: 120px;
	}
	#layout-pagecontent {
		width: 70%;

		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 20px;

		padding: 1px;
	}

	#layout-pagefooter {
		background-color: #003365FF;

		width: 100%;
		height: 50px;

		margin-top: auto;

		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		justify-content: space-between;
	}

	.layout-footer-element {
		height: 100%;
		width: 40%;

		display: flex;
		align-items: center;
	}
	
	#footer-iconimg {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#footer-versiontext {
		margin-right: auto;

		cursor: default;
	}

	#footer-bugtext {
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;

		padding-left: 10px;
		padding-right: 10px;
		
		cursor: default;
	}
}

@media (min-width: 400px) and (max-width: 799px) {
	#layout-pageheader {
		width: 100%;
		height: 120px;

		top: 0px;
		left: 0px;
		z-index: 100;

		position: fixed;
	}

	#layout-mainheader {
		background-color: #003365FF;

		width: 100%;
		height: 60px;

		display: flex;
		justify-content: space-between;
	}

	.layout-mainheader-element {
		width: 32%;
		height: 100%;
	}

	#mainhead-imgbtn {
		background-color: #00000000;

		width: 40px;
		height: 40px;

		z-index: 102;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		position: absolute;

		border: 0px solid #00000000;
		border-radius: 50px;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		#mainhead-imgbtn:hover {
			background-color: #00336544;
		}
	#mainhead-imgcover {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		z-index: 101;

		position: absolute;
	}

	#mainhead-title {
		height: 100%;

		margin-top: 0px;

		display: flex;
		flex-direction: column;
		justify-content: space-around;

		cursor: default;
	}

	#mainheader-btnsect {
		display: flex;
		align-items: center;
	}
	#mainheader-btncontainer {
		display: none;
	}

	#layout-subheader {
		width: 70%;
		height: 60px;

		margin-left: auto;
		margin-right: auto;

		display: flex;
		justify-content: space-evenly;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;
	}

	.layout-subheader-navbtn {
		width: 20%;
		height: 100%;
	}
	.subhead-navbtn {
		background-color: #DCE4F8FF;

		width: 100%;
		height: 100%;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.subhead-navbtn:hover {
			background-color: #067CEBFF;
		}

	.layout-pagebody {
		width: 100%;
		min-height: 100vh;

		padding: 0px;

		position: absolute;
		top: 0px;
		left: 0px;

		display: flex;
		flex-direction: column;
	}

	#layout-bodyspacer {
		width: 100%;
		height: 120px;
	}
	#layout-pagecontent {
		width: 70%;

		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 20px;

		padding: 1px;
	}

	#layout-pagefooter {
		background-color: #003365FF;

		width: 100%;
		height: 50px;

		margin-top: auto;

		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		justify-content: space-between;
	}

	.layout-footer-element {
		height: 100%;
		width: 49%;

		display: flex;
		align-items: center;
	}
	
	#footer-iconimg {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#footer-versiontext {
		margin-right: auto;

		cursor: default;
	}

	#footer-bugtext {
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;

		padding-left: 10px;
		padding-right: 10px;
		
		cursor: default;
	}
}

@media (min-width: 0px) and (max-width: 399px) {
	#layout-pageheader {
		width: 100%;
		height: 120px;

		top: 0px;
		left: 0px;
		z-index: 100;

		position: fixed;
	}

	#layout-mainheader {
		background-color: #003365FF;

		width: 100%;
		height: 60px;

		display: flex;
		justify-content: space-between;
	}

	.layout-mainheader-element {
		height: 100%;
	}

	#mainheader-homesect {
		width: 100px;
	}
	#mainhead-imgbtn {
		background-color: #00000000;

		width: 40px;
		height: 40px;

		z-index: 102;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		position: absolute;

		border: 0px solid #00000000;
		border-radius: 50px;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		#mainhead-imgbtn:hover {
			background-color: #00336544;
		}
	#mainhead-imgcover {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;

		z-index: 101;

		position: absolute;
	}

	#mainheader-titlesect {
		margin-right: 10px;
	}
	#mainhead-title {
		height: 100%;

		margin-top: 0px;

		display: flex;
		flex-direction: column;
		justify-content: space-around;

		cursor: default;
	}

	#mainheader-btnsect {
		display: none;
	}
	#mainheader-btncontainer {
		display: none;
	}

	#layout-subheader {
		width: 90%;
		height: 60px;

		margin-left: auto;
		margin-right: auto;

		display: flex;
		justify-content: space-evenly;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;
	}

	.layout-subheader-navbtn {
		width: 25%;
		height: 100%;
	}
	.subhead-navbtn {
		background-color: #DCE4F8FF;

		width: 100%;
		height: 100%;

		box-sizing: border-box;
		border: 1px solid #003365FF;
		border-top: 0px solid #00000000;

		cursor: pointer;
		transition: background-color 0.25s ease;
	}
		.subhead-navbtn:hover {
			background-color: #067CEBFF;
		}
	#subheader-homepage {
		display: none;
	}

	.layout-pagebody {
		width: 100%;
		min-height: 100vh;

		padding: 0px;

		position: absolute;
		top: 0px;
		left: 0px;

		display: flex;
		flex-direction: column;
	}

	#layout-bodyspacer {
		width: 100%;
		height: 120px;
	}
	#layout-pagecontent {
		width: 90%;

		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 20px;

		padding: 1px;
	}

	#layout-pagefooter {
		background-color: #003365FF;

		width: 100%;
		height: 50px;

		margin-top: auto;

		padding-top: 5px;
		padding-bottom: 5px;

		display: flex;
		justify-content: space-between;
	}

	.layout-footer-element {
		height: 100%;
		width: 100%;

		display: flex;
		align-items: center;
	}
	
	#footer-iconimg {
		width: 40px;
		height: 40px;

		margin-left: 10px;
		margin-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#footer-versiontext {
		margin-right: auto;

		cursor: default;
	}

	#footer-bugsect {
		display: none;
	}
}