/* Customized Bootstrap Styles for this template
-- Styles start with some general styles, then go from smallest (phone size) and go up to largest
-- media queries should use min-width since we're going from smallest to largest
*/

/* initial styles */
body {
	padding: 0;
}

.container {
	margin-top:  0;
}

.sidebar-nav {
	display: none;
}

.navbar-default {
	width: 100%;
}

.sidebar-nav-mobile .navbar li {
	width: 98%;
	padding: 0;
	font-size: 1.2em;
}

.navbar-default .navbar-nav a {
	font-size: 1.1em;
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: none;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:active {
	padding-top: 4px;
	padding-bottom: 4px;
	width: 100%;
}

.footer {
	max-width: 890px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	font-size: .9em;
}

@media (min-width: 320px) {

	.sidebar-nav-mobile {
		display: block;
	}

	.navbar-default {
		width: 100%;
	}

	.navbar-default .navbar-nav a {
		font-size: 1.2em;
	}

	.container-fluid {
		padding-right: 0;
		padding-left: 0;
	}

	.sidebar-nav-mobile .navbar .navbar-collapse {
		width: 100%;
	}

	.sidebar-nav-mobile .navbar .navbar-collapse li {
		width: 90%;
		margin-left: 1em;
		margin-right: 1em;
	}

	.footer {
		width: 100%;
		margin-left: 0;
		margin-top: -1em;
		font-size: 1em;
	}

	footer .col-sm-12 {
		margin: 0;
		padding: 1em;
		font-size: 1em;
	}

}

@media (min-width: 600px) {

	.container-fluid {
		width: 100%;
		margin: 0 auto;
	}
	
	.footer,
	footer {
		margin-left: 0;
		padding-top: 2em;
	}

}


/* devices 768px and larger */
@media (min-width: 768px) {

	.container-fluid { /* remove padding for larger viewports */
		padding-right: 0;
		padding-left: 0;
	}

	.sidebar-nav-mobile {
		display: none;
	}

	.sidebar-nav {
		display: block;
	}

	/* make sidebar nav vertical left side */
	.navbar {
		margin: -10px 3px 0 0;
		border-radius: 0;
		margin-bottom: 0;
		padding-bottom: 2em;
	}

	.sidebar-nav .navbar .navbar-collapse {
		padding: 0;
		padding-left: 0;
		max-height: none;
		margin-left: 0;
		width: 200px;
	}

	.sidebar-nav .navbar-header {
		float: none;
	}

	.sidebar-nav .navbar ul {
		float: left;
		margin-right: .5em;
	}

	.sidebar-nav .navbar li {
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
	}

	.sidebar-nav .navbar li a {
		width: 100%;
		padding: 6px 2px 6px 10px;
	}

	.navbar-default {
		border-right: none;
		padding: 2em 1em 1em 1em;
		border: 0;
		height:100%;
		/* border-radius bottom right corner only */ 
		border-radius: 0px 20px 20px 0px;
		-moz-border-radius: 0px 20px 20px 0px;
		-webkit-border-radius: 0px 20px 20px 0px;
		border: 0px solid #fff;
		/* inset shadow */
		box-shadow: inset 3px 0px 3px -1px #666666;
		-webkit-box-shadow: inset 3px 0px 3px -1px #666666;
		-moz-box-shadow: inset 3px 0px 3px -1px #666666;
		-o-box-shadow: inset 3px 0px 3px -1px #666666;
	}
	
	.navbar-default .navbar-nav>li>a {
		font-size: .9em;
	}

	/* uncomment if you would like the menu to be fixed */
	/* .navbar {
		position: fixed;
		width: 170px;
		z-index: 2;
	} */
	/* END left vertical nav */
	
	footer {
		clear: both;
		text-align: left;
		float: left;
		width: 100%;
		margin: 0;
		padding:0;
		font-size: 1.2em;
	}
	
}

@media (min-width: 990px) {
	
	.navbar {
		width: 221px;
		margin-top: 0;
		padding-top: 2em;
	}
	
	.navbar-default { 
		margin-left: 0;
	}
	
	.navbar-default .navbar-nav a {
		font-size: 1.1em;
	}
	
	footer {
		font-size: 1em;
	}
	
}

@media (min-width: 1200px) {
}

@media (min-width: 1365px) {
}

@media (min-width: 1679px) {
}