/* Medium devices (e.g. landscape tablets, 769 to 992 px) */
@media (max-width: 992px) {
	#mNav{
		position: fixed;
		top: 0;
		z-index: 50;
		right: 0;
		width: 50%;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-backface-visibility: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		overflow: visible;

		-webkit-transform: translate(100%, 0);
		-moz-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		-o-transform: translate(100%, 0);
		transform: translate(100%,0);
		
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-ms-transition: -ms-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}
	
	#mNav .logout{
		padding: 0px 30px;
		font-size: 0.85em;
	}
		
	#mNav .logout .user{
		padding-bottom: 10px;
	}
	
	#mno{
		position: relative;
	}

    /* Move menu into viewport if
       the current active target element is 'mno' */
	#mno:target #mNav {
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#mNav .menu-wrapper{
		background-color: #F7F7F8;
		box-shadow: 0 0 20px rgba(2,15,27,.15);
		padding-top: 40px;
		min-height: 500px;
	}
	
	#mNav .menu{
		clear: both;
		margin-top: 15px;
		padding-bottom: 90px;
	}
	
	#mNav .nav-trigger{
		margin: 36px 25px;
	}
	
	#mNav .nav-trigger .bar{
		background: none;
	}
	
	
	#mNav .close-trigger{
		width: 20px;
		height: 20px;
		position: relative;
		display: inline-block;
		float: right;
		margin-right: 30px;
	}
	
	#mNav .close-trigger:after,
	#mNav .close-trigger:before{
		content: '';
		height: 20px;
		border-left: 1px solid #000F23;
		position: absolute;
		left: 10px;
	}
	
	#mNav .close-trigger:after{
		transform: rotate(45deg);
	} 
	
	#mNav .close-trigger:before{
		transform: rotate(-45deg);
	}
	
	#mNav li a, #mNav li input[type=submit]{
		padding: 15px 30px;
		display: block;
		text-transform: uppercase;
		text-decoration: none;
		color: #000F23;
		font-size: 0.795em;
	}
	
	#mNav li input[type=submit]{
		border: none;
		width: 100%;
		background-color: transparent;
		text-align: left;
	}
	
	#mNav ul.level_2 > li{
		border-bottom: 1px solid #E8E9E9;
	}
	
	#mNav li.current{
		background-color: #E8E9E9;
	}
	
	#mNav ul.level_1 > li > h2{
		font-weight: 700;
		font-size: 0.795em;
		text-transform: uppercase;
		color: #000F23;
		padding: 15px 30px;
		margin: 30px 0 0;
		border-bottom: 1px solid #E8E9E9;
	}	
	
	@-webkit-keyframes navOpen{
		0%{
			margin-right: 0%;
		}
	
		
		100%{
			margin-right: 100%;
		}
	}	
	
	@keyframes navOpen{
		0%{
			margin-right: 0%;
		}
	
		
		100%{
			margin-right: 100%;
		}
	}	
}

/* Small devices (e.g. phones, up to 768 px) */
@media (max-width: 768px) {
	
	#content{
		padding: 1.5em 1em;
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 0;
		box-shadow: none;
	}
	
	#footer{
		margin-left: -15px;
		margin-right: -15px;
	}
	
	#logo img{
		width: 131px;
		height: 55px;
	}
	
	#mNav{
		width: 95%;
	}
	
	#mNav .menu-wrapper{
		margin-top: 75px;
	}
	
	h1{
		word-wrap: break-word;
	}

	.panel{
		padding: 15px;
	}
	
	
	.month-filter{
		text-align: right;
	}
	
	.month-filter .year-container{
		display: block;
	}
	
	.data-listing .label {
		text-align: left;
	}
	
	table.table{
		font-size: 80%;
		table-layout: fixed;
	}
	
	table.table .tooltip-area{
		font-size: 1em;
	}
	
	table.table td{
		width: auto;
	}
	
	td.amount{
		width: 40%;
	}
	
	table.table td.w15-xs, table.table th.w15-xs{
		width: 15%;
	}
}