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

	body {
		font-size: 90%
	}

	h2 + .dataTables_wrapper,
	p + .dataTables_wrapper {
		margin-top: 20px;
	}

	.header-wrapper {
		padding: 10px;
	}

	.sitebranding {
		width: 67px;
		height: 40px;
	}

	.site-title {
		height: 40px;
	}

	.banner {
		padding: 30px 10px;
	}

	.banner p {
		margin-bottom: 10px;
	}

	.content-wrapper {
		padding: 20px 10px 30px;
	}

	.footer-wrapper {
		padding: 10px;
	}

	a.scrollToTop {
		right: 10px;
	}

	#navicon {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		text-decoration: none;
		z-index: 9;
		width: 60px;
		height: 60px;
	}

	#navicon:before,
	#navicon.closed:before {
		font-family: "Material-Design-Iconic-Font";
		font-size: 40px;
		display: block;
		content: '\f197';
		color:#111111;
		width: 60px;
		height: 60px;
		line-height: 60px;
		transition: color 0.3s;
		text-align: center;
		margin: 0;
	}

	#navicon:before {
		color: white;
		content: '\f136';
	}

	#navicon.closed:before {
		content: '\f197';
	}

	.navigation {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		-moz-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		height: 100%;
		max-width: 300px;
		width: 100%;
		z-index: 5;
		top: 0;
		right: -300px;
		position: fixed;
		background: white;
		text-align: center;
		z-index: 1000;
	}

	.navigation nav ul {
		flex-direction: column;
		justify-content:flex-start;
		align-items: flex-start;
		padding: 1em;
	}

	.navigation nav li {
		margin-left: 0;
		padding: 1em 0;
	}

	.navigation nav a {
		font-size: 1em;
	}

	.fade {
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background: #000;
	  opacity: 0.5;
	}

}

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

	h1 {
		font-size: 1.9em;
	}

	.banner h1 br {
		display: none
	}

}