/*Body*/
	@font-face{
		font-family: LibelSuitRegular;
		src: url(libel-suit-rg.ttf);
	}

	body {
		font-family: libelSuitRegular;
		transition: background-color .5s;
	}

/*Side Menu*/
	.subMenu {
		top: 0;
		left: 10em;
		z-index: -1;
		display: none;
		background-color: rgb(0,159,227);
		border:solid;
		border-radius: 1em;
		border-width: 0.07em;
		border-color: #818181;
		box-shadow: 0 0 0.5em #111;
	}
	.sideMenu{
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background-color: rgb(0,159,227);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 3.7em;
		box-shadow: 0 0 0.5em #111;
	}
	.sideMenu a,.possibleRoot{
		padding: 0.25em;
		text-decoration: none;
		font-size: 1em;
		color: #d1d1d1;
		display: block;
		transition: 0.3s;
	}
	.sideMenu a:hover,.possibleRoot:hover,.closeSideButton:hover{
		color: #f8f8f8;
		text-shadow: 0 0 0.5em #eee;
	}
	.actualRoot{
		padding: 0.2em;
		text-decoration: none;
		font-size: 1.5em;
		color: #f1f1f1;
		display: block;
		transition: 0.3s;
	}
	.actualRoot:hover{
		text-shadow: 0 0 0.5em #eee;
	}
	.sideMenu ul{
		list-style-type:none;
		padding-left: 0.5em;
		margin: 0;
		list-style: none;
		width: 11.25em;
	}
	.sideMenu ul ul{
		position: absolute;
		list-style-type:none;
		padding-left: 0.5em;
		margin: 0;
		list-style: none;
		width: 11em;
	}
	.sideMenu li{
		position: relative;
	}
	.closeSideButton{
		position: absolute;
		top: 0;
		cursor:pointer;
		right: 1.5em;
		font-size: 2.2em !important;
		margin-left: 3.2em;
		color: #d1d1d1;
		transition: 0.3s;
	}
	#sideCover{
		position: fixed;
		z-index: -1;
		top: 9.375em;
		height: 100%;
		width: 100%;
		transition: 0.5s;
	}

/*main*/

	#main{
		transition: margin-left .5s;
		padding: 1em;
	}

	#logo{
		position: fixed;
		top: 0;
		right: 0;
	}
	#logo_S{
		display: none;
	}
	#logo_H{
		display: block;
	}
	#menuFont{
		position: fixed;
		display: block;
		top: 0;
		left: 0;
		height: 6.25em;
	}

/*Top Menu*/
	#topMenu{
		background-color: rgb(31,54,133);
		position: fixed;
		width: 100%;
		top: 6.25em;
		left: 0;
		height: 3.125em;
		transition: 0.5s;
	}
	#openSideButton{
		font-size:2.5em;
		cursor:pointer;
		color: #a1a1a1;
		padding: 0.5em 0.5em 0.5em 0.5em;
		transition: 0.3s;
		font-family: Arial, Helvetica, sans-serif;
	}
	#openSideButton:hover{
		color: #f1f1f1;
		text-shadow: 0 0 0.5em #eee;
	}
	#actualRoot{
		font-size:2em;
		cursor:pointer;
		color: #f1f1f1;
		padding: 0.5em 0.5em 0.5em 0.5em;
		transition: 0.1s;
	}
	#actualRoot:hover{
		text-shadow: 0 0 0.5em #eee;
	}

/*Content*/
	#content{
		position: fixed;
		top: 9.325em;
		margin-left: 3em;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-x: auto;
	}
	#footer{
		text-align: center;
	}

/*Responsive*/
	@media screen and (max-height: 30em){
		.sideMenu{
			padding-top: 1em;
		}
		.sideMenu a{
			font-size: 0.8em;
		}
		.actualRoot {
			font-size: 1.6em;
		}
	}
	@media screen and (max-width: 31.25em){
		#logo_S{
			display: block;
		}
		#logo_H{
			display: none;
		}
		.sideMenu ul ul{
			width: 7em;
		}
		#content{
			margin-left: 1em;
		}
	}