:root {
	--pills-url:
		url(https://images.pexels.com/photos/5699519/pexels-photo-5699519.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

	--container-padding: 2px;
	--container-top: 4px;
	--container-bottom: 3px;
	--container-right: 112px;
	--container-image-base: 275px;
}

.jumbotron { color: white; box-shadow: 0 2px 3px #09092a; }
.jumbotron h2:first-child { margin-top: 15px; font-weight: 700; }
.jumbotron p { text-align: left; }
.jumbotron .btn {
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
	
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	color: black; border-color: black;
}

@media (max-width: 991px) {
	.jumbotron { padding-top: 0; padding-bottom: 0; }
	.jumbotron .btn { font-size: 1.2em; padding: 5px; }
}

@media (min-width: 992px) {
	.jumbotron { height: 270px; padding: 3px; margin-bottom: 15px; }

	.jumbotron > .container:before {
		right: 0px;
		width: 400px;
		display: block;
		position: absolute;

		top: calc(var(--container-padding) + var(--container-top));
		height: calc(250px + var(--container-bottom) + var(--container-padding));
		background-image: var(--pills-url);
		background-position: top right;
		background-repeat: no-repeat;
		background-size: calc(397px + var(--container-padding) + var(--container-right)) 250px;
		width: calc(var(--container-image-base) + var(--container-padding) + var(--container-right));
		right: calc(var(--container-padding) * 2);
		border: 1px solid white;
	}

	.jumbotron > .container { position: relative; padding: 15px 400px 15px 15px; overflow: hidden; height: 100%; }

	.affix { top: 0px; }
	
	#sidebar-wrapper,
	.affix {
		margin-top: 20px;
		width: 300px;
	}
	
	li.active a { font-weight: bold; }
}

.jumbotron.bg-primary {
  background-color: #366;
}