@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");

/*
	Prologue by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		font-family: 'RuneScape', sans-serif;
		font-size: 19pt;
		font-weight: 300;
		line-height: 1.75em;
	}


	header {
		margin: 0 0 2em 0;
	}

		header > p {
			margin: 1em 0 0 0;
		}

/* Image */

	.avatar {
		display: inline-block;
		border: 0;
	}

		.avatar img {
			display: block;
			width: 100%;
		}

		.avatar {
			width: 48px;
			height: 48px;
			background: transparent;
		}

			.avatar img {
				width: 48px;
				height: 48px;
			}

		.avatar.fit {
			display: block;
			width: 100%;
		}

		.avatar.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.avatar.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.avatar.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.avatar.centered img {
				margin: 0 auto;
				width: auto;
			}


/* Header */

	#sidebar {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		background: #222629 url("images/overlay.png");
		box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
		color: #fff;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		text-align: right;
		top: 0;
		width: 375px;
        z-index: 4;
	}

		#sidebar .top {
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
		}

		#sidebar .bottom {
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			padding: 1.5em 0 0.75em 0;
		}

			#sidebar .bottom > :last-child {
				margin-bottom: 0;
			}

		#sidebar .icons {
			font-size: 0.8em;
			text-align: center;
		}

			#sidebar .icons a {
				color: #41484c;
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}

				#sidebar .icons a:hover {
					color: #fff;
				}

	#logo {
		position: relative;
		margin: 1.75em 1.5em 1.5em 1.5em;
		min-height: 48px;
		cursor: default;
	}

		#logo h1 {
			position: relative;
			color: #fff;
			font-weight: 600;
			font-size: 1em;
			line-height: 1em;
		}

		#logo p {
			position: relative;
			display: block;
			font-size: 0.6em;
			color: rgba(255, 255, 255, 0.5);
			line-height: 1.25em;
			margin: 0.5em 0 0 0;
		}

		#logo .avatar {
			position: absolute;
			left: 0;
			top: 0;
		}

	#nav ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
	}

		#nav ul li {
			padding-left: 0;
		}

			#nav ul li a {
				display: block;
				padding: 0.5em 1.5em 0.5em 1.5em;
				color: rgba(255, 255, 255, 0.5);
				text-decoration: none;
				outline: 0;
				border: 0;
				-moz-transition: none;
				-webkit-transition: none;
				-ms-transition: none;
				transition: none;
			}

				#nav ul li a span {
					position: relative;
					display: block;
					font-size: 0.8em;
				}

					#nav ul li a span:before {
						position: absolute;
						left: 0;
						color: #41484c;
						text-align: center;
						width: 1.25em;
						line-height: 1.75em;
					}

				#nav ul li a.active {
					background: rgba(0, 0, 0, 0.15);
					box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
					color: #fff;
				}

					#nav ul li a.active span:before {
						color: #e27689;
					}
/* Wide */

	@media screen and (min-width: 961px) and (max-width: 1880px) {
		/* Header */

			#sidebar {
				width: 300px;
			}

	}

/* Normal */

	@media screen and (min-width: 961px) and (max-width: 1620px) {


	}

/* Narrow */

	@media screen and (min-width: 961px) and (max-width: 1320px) {

		/* Header */

			#sidebar {
				width: 20%;
			}

			#logo .avatar {
				position: relative;
				margin: 0 0 0.5em 0;
			}

			#nav ul li a {
				font-size: 0.8em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
			}

				#nav ul li a span {
					padding-right: 2.25em;
				}

					#nav ul li a span:before {
						left: 100%;
						margin-left: -1.25em;
						line-height: 2.25em;
					}

	}

/* Narrower */

	#sidebarToggle {
		display: none;
	}

	@media screen and (max-width: 960px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				font-size: 16pt;
			}

			header br {
				display: none;
			}

			.container {
				padding: 0 2em 0 2em;
			}

		/* Item */

			.item {
				margin-bottom: 15px;
			}

		/* Icons */

			ul.icons a {
				width: 1.75em;
				font-size: 1.25em;
			}

		/* Header */

			#sidebar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				-webkit-overflow-scrolling: touch;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 3;
				width: 275px;
				background: #222729 url("images/overlay.png");
				box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.125);
			}

				#sidebar .top {
					position: relative;
				}

				#sidebar .bottom {
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15);
					padding-top: 2em;
					margin-top: 2em;
					position: relative;
				}

			#logo {
				margin: 1.5em 1.25em 1.25em 1.25em;
			}

			#nav ul li a {
				padding: 0.5em 1.25em 0.5em 1.25em;
			}

			#sidebarToggle {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 2.25em;
				left: 0;
				position: fixed;
				top: 0;
				width: 3.25em;
				z-index: 10001;
			}

				#sidebarToggle .toggle {
					text-decoration: none;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					outline: 0;
					border: 0;
				}

					#sidebarToggle .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
					}

					#sidebarToggle .toggle:before {
						text-decoration: none;
						content: '\f0c9';
						color: #fff;
						font-size: 18px;
						background: rgba(128, 136, 144, 0.5);
						border-radius: 0.35em;
						text-align: center;
						position: absolute;
						left: 0.5em;
						top: 0.5em;
						display: block;
						width: 3.25em;
						height: 2.25em;
						line-height: 2.25em;
					}

			body.header-visible #main {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.header-visible #sidebarToggle {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.header-visible #sidebar {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Footer */

			#footer {
				margin-left: 0;
			}


	}

/* Mobile */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 14pt;
			}

			h2 {
				font-size: 1.5em;
				letter-spacing: 0;
				font-weight: 300;
			}

			.container {
				padding: 0 15px 0 15px;
			}

		/* List */

			ul.icons a {
				width: 2em;
				font-size: 1.25em;
			}

		/* Main */

			#main > section {
				padding: 2em 0;
			}

			#main section.cover {
				padding: 4em 0em;
			}

				#main section.cover header {
					padding: 0 1em;
				}

		/* Footer */

			#footer .copyright li {
				display: block;
				line-height: 1.25em;
				border: 0;
				padding: 0;
				margin: 1em 0 0 0;
			}

				#footer .copyright li:first-child {
					margin-top: 0;
				}

	}