/*!
 * Bureau of Planning Graphics - Stylesheet v1.0 
 * Updated: 7-18-2019
 * Author: Gary Chen (gwpchen@gmail.com)
 */

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*  ADDITIONAL FONTS  */

@font-face{ 
	font-family: 'TexGyreHeros';
	src: url('webfonts/texgyreheros-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;
}

@font-face{ 
	font-family: 'TexGyreHeros';
	src: url('webfonts/texgyreheros-italic-webfont.woff') format('woff'); font-weight: normal; font-style: italic;
}

@font-face{ 
	font-family: 'TexGyreHeros';
	src: url('webfonts/texgyreheros-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal;
}

@font-face{ 
	font-family: 'TexGyreHeros';
	src: url('webfonts/texgyreheros-bolditalic-webfont.woff') format('woff'); font-weight: bold; font-style: italic;
}

/*  COLOR PALETTE  */

.white {color: #FFFFFF;}
.orange {color: #E37700;}   /* rgb(227, 119, 0) */
.yellow {color: #F9B100;}
.dark {color: #2C323E;}  /* rgb(44, 50, 62) */

.bg-white {background-color: #FFFFFF;}
.bg-orange {background-color: #E37700;}
.bg-yellow {background-color: #F9B100;}
.bg-gray {background-color: #edefee;}
.bg-dark {background-color: #2C323E!important;}


html {scroll-behavior: smooth;}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/*padding-top: 85px;*/
	background-color: #FFF;
	font-family: 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 17px;
	line-height: 1.6em;
}

h1, h2, h3, h4, h5, p, li, .nav-link {
	font-family: 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.page-content{
	padding-top: 20px;
}

.navbar {
	background-color: #FFF;
	padding: 0.5em 0; 
	border-bottom: 1px solid #EEE;
	/* 
	-webkit-box-shadow: 0 8px 6px -6px #999;
	-moz-box-shadow: 0 8px 6px -6px #999;
	box-shadow: 0 8px 6px -6px #999;
	*/
}


.navbar-brand {
	font-weight: bold;
	letter-spacing: -0.04em;
} 

.mr-auto, .mx-auto {margin-left: auto!important; margin-right: 0!important;}

.nav-link {
	display: inline-block;
	width: 100%;
	margin: 0 0.5em;
	font-weight: bold;
}

.summary {display: block; box-sizing: border-box; width: 100%; margin-bottom: 4em; border: 1px solid #DDD; padding: 10px;}
table.summary-toc {border-collapse: collapse; font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-size: 0.85em;}
table.summary-toc tr {border-bottom: 1px solid #DDD;}


.footer {margin-top: 25px;}
.footnotes {font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-size: 0.8em; color: #333; margin: 0 0;}

.scroll-nav {position:fixed; right: 0; top: 40%; z-index: 100; text-align: center; border: 1px solid #CCC; background-color: #FFF; padding: 0 0.5em;}
.scroll-icon {display: block; padding: 10px 0; text-align: center; color: #3b3f4e;}

p, li {
	font-weight: normal;
	color: #555;
}

hr {border-top: 3px solid #000; border-bottom: none;}

.small-text, .captions {font-size: 0.75em; line-height: 1.2; margin-top: 0.75em; margin-bottom: 0.75em;}
.photo-credit {font-size: 0.6em; display: block; float: right;}

h1 {
	font-family: 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 4em;
	font-weight: bold;
	letter-spacing: -0.03em;
	color: #000;
	line-height: 1.1;
}

/* .header-image h1 {text-shadow: 3px 3px 6px rgba(0,0,0,0.2);} */

h2 {font-size: 2em; font-weight: bold; color: #000; margin: 0.5em 0;}
h3 {font-size: 1.35em; font-weight: bold; color: #000; margin-top: 2em;}
h4 {font-size: 1.1em; color: #000; margin-top: 1.75em; text-transform: uppercase;}

.breadcrumb {background-color: transparent; border-radius: 0; padding: 0; margin: 0; font-size: 0.75em;}
.breadcrumb-item+.breadcrumb-item::before, .breadcrumb-item a {color: #BBB;}
.breadcrumb-item.active {color: #FFF;}

.dropdown-header {color: #E37700; text-transform: uppercase; font-weight: bold;}

.header-image {
	width: 100%;
	min-height: 350px;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
}

.strategies {
	padding: 0.5em 0.75em;
	margin: 2em 0 1em;
	font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif;
	font-size: 1.3em;
	font-weight: 700;
	text-transform: uppercase;
	background-color: #343a40;
	border: 1px #DDD solid;
	border-radius: 0.25em;
	color: #FFF;
}

.intro {
	font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.5;
	margin: 1em 0;
}


.btn-primary {color: #FFFFFF; background-color: #E37700; border-color: #E37700;}
.btn-outline-primary {color: #E37700; border-color: #E37700;}
.btn-primary:hover, .btn-outline-primary:hover {color: #FFFFFF; background-color: #F9B100; border-color: #F9B100;}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {color: #fff; background-color: #E37700; border-color: #E37700;}


/*  PORTFOLIO  */

#portfolio .container-fluid {max-width: 1920px;}
#portfolio .container-fluid .portfolio-box {position: relative; display: block;}

.vignette {
  -moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.2);
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
	opacity: 0;
	color: #FFFFFF;
	background: rgba(44, 50, 62, 0.95);
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, .project-category {
	font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name {
	font-family: 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.6rem;
	font-weight: bold; 
}

#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

/*  MAGNIFIC  */
.mfp-bg {opacity: 0.9!important;}

.modal-header {background-color: #FFF;}
.modal-content {border: none;}




@media (max-width: 576px) { 
  .header-image {height: 600px; background-position: bottom center; background-size: 80%; text-align: center;}
}