/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
  padding-top: 3.5rem;
  font-family: 
  	/*  Avenir!  */
	"Avenir Next", Avenir,
	/*  Safari for OS X and iOS (San Francisco)   */
	-apple-system,
	/*  Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android   */
	system-ui,
	/*  Chrome < 56 for OS X (San Francisco)   */
	BlinkMacSystemFont,
	/*  Windows   */
	"Segoe UI",
	/*  Android   */
	"Roboto",
	/*  Basic web fallback   */
	"Helvetica Neue", Arial, sans-serif !important;

	/* always need body padding-top: 60px; if you have a nav bar */
	/* why doesn't it say that anywhere in documentation? */
	/* look at source of  http://twitter.github.com/bootstrap/examples/hero.html  in head, there be the style */
	/* okay, I found it, look under "Optional display variations" here: http://getbootstrap.com/2.3.2/components.html#navbar  */
	padding-top: 70px;
	padding-bottom: 40px;
    opacity: 1;
}


.navbar-dark {
    background-color: #0a335e !important; /*  #0a335e  Swingbridge blue   */
}

div.jumbotron {
	padding: 32px 50px 32px 50px;
	font-weight: 400; /* default is 200, seems way light for a big hero */
}



/*  https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints  */
/*  Extra small devices (portrait phones, less than 576px)  */
/*  No media query since this is the default in Bootstrap  */
/*  Small devices (landscape phones, 576px and up)  */


@media (max-width: 576px) {
	div.jumbotron {
		padding: 12px 20px 12px 20px;
	}
	div.jumbotron h1 {
		font-size: 33px;
	}	
	p.readable {
		width: 90%;
	}
	
} /* @media (max-width: 576px) */
	
/*  Small devices (landscape phones, 576px and up)  */
@media (min-width: 576px) {
	
} /* @media (min-width: 576px) */

/*  Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {     
	
} /* @media (min-width: 768px) */

/*  Large devices (desktops, 992px and up)  */
@media (min-width: 992px) {     
	p.readable {
		width: 70%;
	}	
} /* @media (min-width: 992px) */

/*  Extra large devices (large desktops, 1200px and up)  */
@media (min-width: 1200px) {
	
} /* @media (min-width: 1200px) */