/* 

///////////////////////////////////
///////////////////////////////////

		BASE STYLES

///////////////////////////////////
///////////////////////////////////

*/


html {

	width: 100%;

}

* {

  box-sizing: border-box;

}

body {

	width: 100%;
	margin: 0 auto;
	padding: 0;
	color: #333;
	--oran: #df7c06;
	--gray: #efefef;
	--tan1: #f7f5f3;
	--tan2: #f0ebe8;
	--blue: #005e82;
	--red1: #be1e2d;
	--teal: #83a2a3;
	--gren: #aab300;
	--brwn: #513c40;
	background: white;
	font-size: medium;


}

main {

	min-height: 100vh;
	background: white;
	position: relative;
	z-index: 1;
	box-shadow: 0 1px 1px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.07), 0 4px 4px rgba(0,0,0,0.07);

}


/* 

///////////////////////////////////
///////////////////////////////////

		HEADER

///////////////////////////////////
///////////////////////////////////

*/


header {

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	width: 100%;
	align-items: center;
	margin: 0 auto;
	padding: 0;
  	position: sticky;
  	height: 96px;
  	top: -1px;
  	z-index: 2;
  	background-color: #fff;
  	opacity: 0.93;
  	transition-property: opacity;
  	transition-duration: 200ms;
	box-shadow: 0 1px 1px rgba(0,0,0,0.07), 
	          	0 2px 2px rgba(0,0,0,0.07), 
	          	0 4px 4px rgba(0,0,0,0.07)

}

header:hover {

	opacity: 1.0;

}


header #left img {

	margin: 1vw 5vw;
	width: 100%;
	height: auto;
	max-width: 240px;
	min-width: 160px;

}

header #center {

	font-size: large;
	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--brwn);
	text-align: center;

}

header #right p {

	text-align: right;
	margin: 1vw 5vw;
	font-family: "Whitney SSm A", "Whitney SSm B", helvetica, arial, sans-serif;

}

header #right .oran {

	padding: 3px 6px;
	border-radius: 4px;
	transition-property: background;
	transition-duration: 300ms;

}

header #right .oran:hover {

	border-radius: 4px;
	background: var(--oran);
	color: white;

}

/* 

///////////////////////////////////
///////////////////////////////////

		FOOTER

///////////////////////////////////
///////////////////////////////////

*/

footer {

	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--tan1);
	padding: 16px 24px;

}

#foot {

	display: grid;
	place-items: center;

}

.foot-item {

}

#foot p {

	font-family: "Whitney SSm A", "Whitney SSm B", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: small;
	text-align: center;
	line-height: 200%;

}

#foot a { 

	text-decoration: none; 

}

#foot span {

	font-size: medium;
	font-weight: 600;

}

#foot .expanded {

	font-size: small;
	font-weight: 500;

}

#bottom-foot hr {

	margin: 0 auto;
	color: #fff;
	width: 32%;
	height: 2px;
	border: 2px;
	background: linear-gradient(to right, var(--tan1), var(--oran), var(--tan1));
				-webkit-gradient(linear, to right, var(--tan1), var(--oran), var(--tan1));
				-moz-linear-gradient(linear, to right, var(--tan1), var(--oran), var(--tan1));


}

/* 

///////////////////////////////////
///////////////////////////////////

		NAVIGATION

///////////////////////////////////
///////////////////////////////////

*/

nav[role="navigation"] {

	margin: 0 auto;

}

.navbar, .dropdown {

	list-style: none;

}

.navbar > li {

	font-family: "Whitney SSm A", "Whitney SSm B", helvetica, arial, sans-serif;
	position: relative;
	float: left;
	padding: 8px 20px;
	margin: 8px;
	text-transform: uppercase;
	font-size: small;
	font-weight: 600;
	letter-spacing: 1px;

}

.navbar a {

	text-decoration: none;
	color: var(--oran);

}

ul.dropdown {

	display:none;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: all 400ms ease;
	padding-left: 20px !important;
	padding-bottom: 12px;
	left: 0;

}

li.has-dropdown:hover > ul,
li.has-dropdown ul:hover {

	visibility: visible;	
	opacity: 1;
	display: block;
	font-family: "Whitney SSm A", "Whitney SSm B", helvetica, arial, sans-serif;
	background: white;
	margin-top: 8px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.07), 
	        	0 2px 2px rgba(0,0,0,0.09), 
	          	0 4px 4px rgba(0,0,0,0.11),
	          	0 8px 8px rgba(0,0,0,0.13)

}

.dropdown li {

	clear: both;
	width: 100%;
	font-family: "Whitney SSm A", "Whitney SSm B", helvetica, arial, sans-serif;
	font-size: small;
	padding: 4px 0;
	margin: 8px 0 0 0;
	text-transform: lowercase;
	width: 160px;
	letter-spacing: 0;
	font-weight: 500;

}

.dropdown:hover {



}



/*  

///////////////////////////////////
///////////////////////////////////

		TITLE AREA

///////////////////////////////////
///////////////////////////////////

*/

#cover {
	  
	  height: 90vh;
	  background-image: url("../images/photo-by-zach-blum-for-bread-for-the-world.jpg");
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;

}

.title {

	position: relative;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;

}

.title h1 { 

	color: white;
	margin: 0;
	white-space: nowrap;
	font-size: xx-large;
	text-shadow: 
				0 1px 1px rgba(0,0,0,0.1), 
	          	0 2px 2px rgba(0,0,0,0.2), 
	          	0 4px 4px rgba(0,0,0,0.3),
	          	0 8px 8px rgba(0,0,0,0.4)

}

.title p {

	font-weight: 700;
	font-size: large;
	line-height: 100%;
	text-shadow: 
				0 1px 1px rgba(0,0,0,0.1), 
	          	0 2px 2px rgba(0,0,0,0.2), 
	          	0 4px 4px rgba(0,0,0,0.3),	
	          	0 8px 8px rgba(0,0,0,0.4)	

}


/*  

///////////////////////////////////
///////////////////////////////////

		GRIDS 

///////////////////////////////////
///////////////////////////////////

*/

#main-container {

	margin: 0 25vw auto;

}

#five {

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
	grid-gap: 16px;
	grid-auto-flow: dense;

}

.grid-container {

	display: grid;
	grid-gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));

}

.sq-item {

	width: 96px;

}

.sq-item img {

	width: 100%;
	height: auto;

}


/* 

///////////////////////////////////
///////////////////////////////////

		BODY TEXT  

///////////////////////////////////
///////////////////////////////////

*/

h1 {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: x-large;
	text-transform: uppercase;

}

h2 {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size: x-large;
	text-transform: uppercase;
	color: var(--oran);

}

h3 {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: large;	

}

.four h3 {

	font-weight: 600;

}


.pickup-notes.ital {

	font-style: italic;
	font-weight: 500;

}

.person-title {

	font-style: italic;

}

.person-signature > img {

	width: 100%;
	max-width: 240px;

}

.more-stories, .more-stories a {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-weight: 500;
	color: var(--oran);
	text-decoration: none;
	text-transform: uppercase;

}

h3.top-border {

	padding-top: 16px;
	border-top: 2px solid var(--tan2);

}

#foot h3 {

	color: var(--oran);
	text-align: center;

}

.five p {

	font-size: small;

}

.subhead {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	margin: 0 0 24px 0;

}


.five-hundred {

	font-weight: 500;

}

.six-hundred {

	font-weight: 600;

}

.seven-hundred {

	font-weight: 700;
	
}



a.oran {

	text-decoration: none;
	font-weight: 500;
	color: var(--oran);

}

a.blue {

	text-decoration: none;
	font-weight: 500;
	color: var(--blue);

}

a.black {

	text-decoration: underline;
	font-weight: 500;
	color: black;

}

a.black:hover {

	color: var(--oran);
	text-decoration: none;

}


p {

	font-family: "Sentinel SSm A", "Sentinel SSm B", georgia, helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: medium;
	line-height: 150%;

}

li {

	font-family: "Sentinel SSm A", "Sentinel SSm B", georgia, helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: medium;
	line-height: 125%;
	margin-bottom: 1em;

}

.five a {

	text-decoration: none;
	color: var(--blue);

}

.title-inline {

	font-style: italic;
	font-weight: 500;

}

.pickup-notes {

	font-weight: 600;

}

sup {

	vertical-align: baseline;
	position: relative;
	top: -0.4em;
	font-size: small;
	color: var(--blue);	

}

sup a {

	text-decoration: none;
	color: var(--blue);

}

/*

///////////////////////////////////
///////////////////////////////////

			GRAPHICS 

///////////////////////////////////
///////////////////////////////////

*/

figure {

	width: 100%;
	margin: 0;
	padding: 16px 0 24px 0;

}

figure img {

	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 2px;

}

figcaption {

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: small;

}

figcaption i {

	padding-left: 6px;

}



/*

///////////////////////////////////
///////////////////////////////////

		ARTICLE FEATURES  

///////////////////////////////////
///////////////////////////////////

*/


.callout { 

	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-weight: 500;
	max-width: 300px;
	font-size: large;
	line-height: 150%;
	color: white;
	float: left;
	margin: 8px 32px 32px 0;
	background: var(--blue);
	padding: 16px 24px;
	border-radius: 2px;
	box-shadow: 
		0 4px 8px 0 rgba(0, 0, 0, 0.15), 
		0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.figure-box {

	width: 78%;
	margin: 0 auto;
	padding: 8px 24px;
	border-radius: 8px;
	background: var(--teal);
	color: #fff;

}

.figure-box h3 {

	text-transform: uppercase;
	text-align: center;

}

.figure-box hr {

	margin: 0 auto;
	margin-top: 32px;
	color: #fff;
	text-align: center;
	width: 60%;
	height: 2px;
	border: 1px;
	background: linear-gradient(to right, var(--teal), white, var(--teal));
				-webkit-gradient(linear, to right, var(--teal), white, var(--teal));
				-moz-linear-gradient(linear, to right, var(--teal), white, var(--teal));

}

.figure-box .stretched {

	margin-top: 20px;
	margin-bottom: 20px;

}

.figure-box-top {

	width: 78%;
	margin: 0 auto;
	margin-bottom: 8px;
	padding: 16px 8px;
	background: var(--oran);
	border-radius: 8px 8px 0 0;
	color: #fff;
	text-align: center;
	text-transform: uppercase;	
	font-size: medium;

}

.minus-one hr {

	margin: 24px 0;
	color: #fff;
	text-align: left;
	width: 75%;
	height: 2px;
	border: 1px;
	background: linear-gradient(to right, var(--oran), white);
				-webkit-gradient(linear, to right, var(--oran), white);
				-moz-linear-gradient(linear, to right, var(--oran), white);

}

.four .figure-box {

	border-radius: 0 0 8px 8px;

}

.four .figure-box h3 {

	font-family: "Sentinel SSm A", "Sentinel SSm B", georgia, helvetica, sans-serif;
	font-weight: 600;
	text-align: left;
	text-transform: none;
	border-bottom: none;
	padding-bottom: 0;

}

.figure-box span {

	color: #fff;
	font-size: xx-large;
	padding: 0 16px 16px 0;
	font-weight: 500;

}

.stories-box {


	float: left;
	margin: 8px 32px 32px 0;
	max-width: 300px;
	border-bottom: 3px solid var(--oran);

}

.stories-box h2 {

	border-top: 8px solid var(--oran);
	padding-top: 8px;
	font-size: large;
	margin-top: 0;

}

.stories-box img {

	max-width: 100px;

}

.stories-box p {

	margin-top: 0;
	font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;
	font-size: small;
	padding-right: 16px;
	line-height: 125%;
	filter: saturate(100%) !important;

}

.box-items .item {

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gray);
	transition-property: border-bottom, filter;
	transition-duration: 200ms;
	filter: saturate(30%);

}

.box-items .item:hover {

	border-bottom: 1px solid var(--oran);
	filter: saturate(100%);

}

.box-items .hide-border, .hide-border:hover {

	border-bottom: none !important;
	filter: saturate(100%) !important;

}

.box-items .item span {

	font-weight: 600;

}

.box-items span a {

	text-decoration: none;
	color: black;

}

.box-items span a:hover {

	text-decoration: none;
	color: var(--oran);

}


.box-items .register > a {

	border: 2px solid var(--gray);
	color: var(--oran);
	transition-property: border;
	transition-duration: 200ms;
	padding: 6px 22px;
	text-transform: uppercase;
	border-radius: 4px;

}

.box-items .register > a:hover {

	border: 2px solid var(--oran);

}


/*

///////////////////////////////////
///////////////////////////////////

		MISCELLANEOUS 

///////////////////////////////////
///////////////////////////////////

*/


.margin-top-5 {

	margin-top: 40px;

}

.margin-bot-5 {

	margin-bottom: 40px;

}

.margin-top-4 {

	margin-top: 32px;

}

.margin-bot-4 {

	margin-bottom: 32px;

}

.margin-top-3 {

	margin-top: 24px;

}

.margin-bot-3 {

	margin-bottom: 24px;

}

.margin-top-2 {

	margin-top: 16px;

}

.margin-bot-2 {

	margin-bottom: 16px;

}

.margin-top-1 {

	margin-top: 8px;

}

.margin-bot-1 {

	margin-bottom: 8px;

}

.es { font-weight: 600 !important; }
#share { max-width: 320px; margin 0 auto }
.spons { width: 60%; margin: 0 auto; }
.db { font-weight: 500 }
.temp { max-width: 580px; margin: 0 auto; margin-top: 24px; margin-bottom: 24px; text-align: center;}
.shadow { padding: 16px 24px; border-radius: 2px; box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.chapter-ref { padding-left: 8px; color: #666; }
.has-triangle:after {
	content: url(images/icons/arrow-down.png);
	margin-left: 8px;
	position: relative;
	top: 4px;
}