/*  COLOR PALETTE  */
.white {color: #FFFFFF;}
.orange {color: #E37700;}
.terra {color: #E07A5F;}
.green {color: #81B29A;}
.peach {color: #F2CC8F;}
.dark {color: #3D405B;}
.gray {color: #CCC;}

.bg-white {background-color: #FFFFFF;}
.bg-orange {background-color: #E37700;}
.bg-terra {background-color: #E07A5F;}
.bg-green {background-color: #81B29A;}
.bg-peach {background-color: #F2CC8F;}
.bg-dark {background-color: #3D405B!important;}
.bg-beige {background-color: #F4F1DE;}
.bg-gray {background-color: #F5F5F5;}


.bg-tenant-1 {background-color: rgb(0,143,0);}
.color-tenant-1 {color: rgb(0,143,0);}

.bg-tenant-2 {background-color: rgb(0,176,80);}
.color-tenant-2 {color: rgb(0,176,80);}

.bg-tenant-3 {background-color: rgb(120,208,80);}
.color-tenant-3 {color: rgb(120,208,80);}

.bg-tenant-4 {background-color: rgb(204,204,0);}
.color-tenant-4 {color: rgb(204,204,0);}

.bg-tenant-5 {background-color: rgb(255,204,0);}
.color-tenant-5 {color: rgb(255,204,0);}

.bg-tenant-6 {background-color: rgb(252,173,45);}
.color-tenant-6 {color: rgb(252,173,45);}

.bg-tenant-7 {background-color: rgb(252,146,3);}
.color-tenant-7 {color: rgb(252,146,3);}

.bg-tenant-8 {background-color: rgb(255,98,80);}
.color-tenant-8 {color: rgb(255,98,80);}

.bg-tenant-9 {background-color: rgb(255,79,153);}
.color-tenant-9 {color: rgb(255,79,153);}


.bg-housing-1 {background-color: rgb(255,79,58);}
.color-housing-1 {color: rgb(255,79,58);}

.bg-housing-2 {background-color: rgb(255,79,58);}
.color-housing-2 {color: rgb(255,79,58);}

.bg-housing-3 {background-color: rgb(245,0,0);}
.color-housing-3 {color: rgb(245,0,0);}

.bg-housing-4 {background-color: rgb(192,0,0);}
.color-housing-4 {color: rgb(192,0,0);}

.bg-housing-5 {background-color: rgb(153,0,84);}
.color-housing-5 {color: rgb(153,0,84);}

.bg-housing-6 {background-color: rgb(102,0,204);}
.color-housing-6 {color: rgb(102,0,204);}

.bg-housing-7 {background-color: rgb(124,0,204);}
.color-housing-7 {color: rgb(124,0,204);}

.bg-housing-8 {background-color: rgb(173,0,204);}
.color-housing-8 {color: rgb(173,0,204);}

.bg-housing-9 {background-color: rgb(206,34,255);}
.color-housing-9 {color: rgb(206,34,255);}

.bg-housing-10 {background-color: rgb(112,51,255);}
.color-housing-10 {color: rgb(112,51,255);}

.bg-housing-11 {background-color: rgb(51,51,204);}
.color-housing-11 {color: rgb(51,51,204);}


.bg-culture-1 {background-color: rgb(51,102,255);}
.color-culture-1 {color: rgb(51,102,255);}

.bg-culture-2 {background-color: rgb(51,153,255);}
.color-culture-2 {color: rgb(51,153,255);}


.bg-economy-1 {background-color: rgb(51,197,255);}
.color-economy-1 {color: rgb(51,197,255);}

.bg-economy-2 {background-color: rgb(6,199,200);}
.color-economy-2 {color: rgb(6,199,200);}

.bg-economy-3 {background-color: rgb(0,173,156);}
.color-economy-3 {color: rgb(0,173,156);}


.badge-consideration {color: white; border-radius: 0; padding: 0.75em 0.5em;}

.badge-tenant-5 {background-color: rgb(255,204,0); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-tenant-6 {background-color: rgb(252,173,45); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-tenant-7 {background-color: rgb(252,146,3); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-tenant-8 {background-color: rgb(255,98,80); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-tenant-9 {background-color: rgb(255,79,153); color: white; border-radius: 0; padding: 0.75em 0.5em;}

.badge-housing-1 {background-color: rgb(255,0,102); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-2 {background-color: rgb(255,80,80); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-3 {background-color: rgb(255,0,0); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-4 {background-color: rgb(192,0,0); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-5 {background-color: rgb(153,0,51); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-6 {background-color: rgb(153,0,153); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-7 {background-color: rgb(153,0,204); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-housing-8 {background-color: rgb(153,51,255); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-culture-1 {background-color: rgb(102,0,204); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-culture-2 {background-color: rgb(51,51,204); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-economy-1 {background-color: rgb(51,102,255); color: white; border-radius: 0; padding: 0.75em 0.5em;}
.badge-economy-2 {background-color: rgb(51,153,255); color: white; border-radius: 0; padding: 0.75em 0.5em;}


.badge {display: block;}

html {scroll-behavior: smooth;}

body {
	overflow-x: hidden;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	font-family: 'Source Sans Pro', 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* FLUID FONT SCALING */
@media only screen and (min-width : 768px) {
	body {font-size: calc(16px + 4 * ((100vw - 320px) / 680));}
	.navbar-brand img {height: 50px;}
	h1 {font-size: 2.5em;}
	h2 {font-size: 1.5em;}
	h3 {font-size: 1.25em;}
	h4 {font-size: 1em;}
	#google_translate_element {float: none;}
}
@media screen and (min-width: 1000px) {
	body {font-size: 20px;}
}

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

.css-title {font-size: 1.15em; letter-spacing: -0.02em;}
#google_translate_element {float: right;}
.navbar {background-color: #FFF;}
.navbar-brand {font-weight: 800;}

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

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {text-transform: uppercase; color: #4d4d4d!important;}

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

.page-content{
	margin: 2em 0;
}

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

.serif {font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-weight: 600;}

/* a {color: inherit; text-decoration: underline; text-decoration-color: #CCC;} */
a {color: #000; font-weight: 600;}
a:hover {color: #000; transition: .1s linear;}


a.nav-link, a.dropdown-item, a.btn, a.opportunity, a.op-summary {text-decoration: none;}

sup {font-weight: 900;}

h1 {
	font-family: 'Source Sans Pro', 'TexGyreHeros', "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 2.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #000;
	line-height: 1.1;
	margin: 1em 0em;
}

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

h2 {font-size: 1.9em; font-weight: bold; color: #000;}
.section-tab {font-size: 1.2em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; color: #FFF; margin-bottom: 1.5em;}
h2.section-tab span {padding: 0.15em 0.5em;}
h3 {font-size: 1.5em; font-weight: 700; color: #000;}
h4 {font-size: 1.15em; font-weight: 600; color: #000; margin-top: 1.75em; text-transform: uppercase;}

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

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

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

.header-image {
	width: 100%;
	height: 450px;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
}

.overlay {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.25);
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.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.4em;
	font-weight: 600;
	line-height: 1.6;
	margin: 1em 0 1.5em;
}

.sidebar {display: block; width: 100%; border: 1px solid #DDD; border-radius: 0.25em; padding: 0.75em;}
.sidebar h3 {font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-size: 1.35em;}
.sidebar p {font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-size: 0.85em; line-height: 1.4; color: #212529!important; margin-top: 0.75em; margin-bottom: 0.75em;}
.sidebar hr {border-top: 1px dashed #CCC; border-bottom: none;}

.key-trends p {
	font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; 
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.key-trends a {
	color: inherit; 
	text-decoration: underline;
}

h3.fig-number {
	font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; 
	font-size: 1.15em; 
	line-height: 1.1; 
	letter-spacing: -0.02em; 
	margin-bottom: 0.25em;
}

h3.fig-number:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: block;
	content: "\f1fe";
	margin-bottom: 0.5em;
}

/* .fig-img {width: 7em; height: 7em; border-radius: 50%; background-blend-mode: saturation; margin: 1em 0;} */
.fig-img {width: 100%; max-width: 14em; height: 8em; margin-bottom: 1.25em; border-radius: 0.4em; box-shadow: inset 0 0 0.5em 0.25em rgba(0,0,0,0.4);}
.fig-subheader h4 {font-size: 2em; font-weight: bold; letter-spacing: -0.02em; margin-bottom: 0.25em;}

.consideration {
	background-color: #FFF;
	margin-bottom: 2em;
	padding: 1em 1em 0.2em 1em;
}

.consideration p {font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; line-height: 1.4; color: #000; margin-top: 1em;}

h3.consideration-group {font-size: 0.9em; text-transform: uppercase;}

.opportunity {
	display: block;
	width: 100%;
	height: 100%;
	padding: 1em 1em 2em 1em;
	position: relative;
	text-decoration: none;
	min-height: 150px;
	background-color: #FFF;
	border: 1px solid #EEE;
	border-radius: .35em;
	font-size: 0.8em;
}

.opportunity:hover { border: 1px solid #CCC; transition-duration: 0.2s;}

.op-summary { 
	display: block;
	width: 100%;
	height: 100%;
	min-height: 170px;
	position: relative;
	text-decoration: none;
	background-color: #3D405B;
	color: #999;
}
.op-summary:hover {color: #FFF; background-color: #32354B; transition-duration: 0.2s;}

.op-summary h3 {font-size: 0.95em; color: #FFF; text-align: center; padding: 0.25em 0.5em;}

.position-br {position: absolute; right: 0.5em; bottom: 0.5em;}

.resource-img {
	height: 180px; 
	background-position: center; 
	background-size: cover; 
	background-repeat: no-repeat;
	-webkit-box-shadow: inset 0px -8px 8px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0px -8px 8px 0px rgba(0,0,0,0.1);
	box-shadow: inset 0px -8px 8px 0px rgba(0,0,0,0.1);
}

a.card:hover .resource-img {opacity: 0.85;  transition: 0.1s;}

.card-title {font-weight: bold; margin-bottom: 1.5em;}
a.card:hover {text-decoration: none!important;}

.op-table {font-size: 0.825em; line-height: 1.4; border-top: 2px solid #dee2e6;}
.op-table th {width: 18%; font-family: 'Source Serif Pro', Georgia, "Times New Roman", Times, serif; font-weight: normal;}
.op-table p {color: #212529;}

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

.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; bottom: 10%; 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;}


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

.controls label {margin-bottom: 0em;}

.controls .checkbox {line-height: 1.3em;}

.chart {width: 100%; border: 1px solid #dee2e6;}

@media print {
	body {margin: 0!important; background-color: transparent!important;}
	.scroll-nav, .summary, .navbar, button.copyURL {display: none!important;}
}

/*
@media (max-width: 576px) {
	.key-trends p {text-align: center}
	 h3.fig-number { font-size: 1.2em; text-align: center;} 
	.fig-img {width: 7em; height: 7em; border-radius: 50%; margin: 0.5em auto;}
}  */