html,
body,
.container {
	min-height: 100%;
}

body {
	padding: 0 0 50px 0;
    line-height: 20px;
    font-size: 14px;
}

.container {
	width: 100%;
	padding: 0 15px;
}

.menu__horizontal {

}

	.menu__horizontal ul > li > a {
		color: #9d9d9d;
		padding-left: 10px;
		margin: 0 10px;
		padding-bottom: 5px;
	}

	.menu__horizontal ul > li > div {
		color: white;
		margin-top: 10px;
		padding: 5px 20px;
	}

.menu__vertical {
	display: none;
	width: 190px;
	background-color: #E0E0E0;
	padding: 20px 10px;
	margin-left: -15px;
	margin-right: 15px;
}

	.menu__vertical__logo {
		width: 140px;
		display: block;
		margin-bottom: 20px;
	}

		.menu__vertical__logo img {
			width: 100%;
		}

	.menu__vertical a {
		color: #623581;
	}

	.menu__vertical__section {
		text-transform: uppercase;
		font-size: 12px;
		font-weight: bold;
		color: #ef4035;
		border-bottom: 1px solid #ef4035;
		padding: 20px 0 2px 0;
		margin-bottom: 7px;
	}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
	color: #fff;
	background-color: #623581;
}

.nav>li>a:focus,
.nav>li>a:hover {
	text-decoration: none;
	background-color: #eee;
	color: #333;
}

.nav>li>a {
	padding: 5px;
}

@media only screen and (orientation:landscape) {

	.container {
		display: flex;
	}

	.menu__horizontal {
		display: none;
	}

	.menu__vertical {
		display: block;
		align-items: stretch;
		min-height: 100vh;
	}

	.wrapper {
		align-items: stretch;
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
	}

}