/* GLOBAL
-------------------------------------------------- */

html, body, #wrapper {
	min-width: 320px;
	width: 100%;
}

body {
	color: #000;
	font-size: 16px;
	overflow-x: hidden;
}

#wrapper * {
	font-family: "Outfit", sans-serif;
}

h1 {
	color: #0d4478;
	font-size: 2rem;
}

h2,
h3,
.title {
	color: #0d4478;
	font-size: 1.75rem;
	margin-bottom: 1.25rem;
}

h4 {
	color: #0d4478;
}

h1 span,
h2 span,
h3 span,
h4 span {
	color: #dc5407;
}

h2 + hr {
	float: left;
	width: 50%;
	height: 3px;
	background-color: #000;
}

p {
	line-height: 1.75rem;
	margin-bottom: 1.75rem;
	font-size: 16px;
}

em  {
	font-style: italic;
}

.hidden {
	display: none !important;
}

.visible {
	display: inline-block !important;
}

.table {
	display: table;
	margin-bottom: 0;
}

.table-cell {
	display: table-cell;
	vertical-align: middle;
}

.btn-primary {
	border-radius: 10px;
	border-color: #242d74;
	background-color: #242d74;
}

.btn-primary.white {
	border-color: #fff;
	background-color: #fff;
}

.btn-primary.white span {
	color: #000;
}

ul.list-style-none li {
	list-style: none;
}

@media (min-width: 767px) {
	body {
		font-size: 18px;
	}
	
	h1 {
		font-size: 3.75rem;
	}
	
	h2 {
		font-size: 3.25rem;
	}
	
	h3,
	.title {
		font-size: 2rem;
	}
	
	p {
		font-size: 18px;
	}
}

@media (min-width: 720px) {
	body.no-scroll {
		padding-right: 17px;
	}
}

.main-content ol,
.main-content ul {
	padding: 0 1.5rem;
	margin-bottom: 1.75rem;
}

.main-content ol li {
	list-style: block inside;
}

.main-content ol ol {
	list-style-type: lower-alpha;
}

.main-content ul {
	list-style: square inside;
}

.main-content ul.list-unstyled {
	list-style: none;
}

.main-content ul li {
	margin-bottom: .5rem;
}

.main-content ul li ul {
	list-style: circle inside;
}

.main-content .list-group {
	padding: 0;
}

.row {
	margin-left: 0;
	margin-right: 0;
}

.btn,
.btn:visited {
	display: table;
	line-height: 1rem;
	min-width: 174px;
	height: 46px;
	padding-left: 1rem;
	padding-right: 1rem;
	background-color: #dc5407;
	border: 0;
	color: #fff;
	margin: 0 auto;
}

.btn span {
	display: table-cell;
	vertical-align: middle;
}

#wrapper .h-100 {
	height: 100% !important;
}

/* FORM
-------------------------------------------------- */

form label {
	color: #5a5a5a;
	font-weight: bold;
}

form label.required:after {
	display: inline-block;
	content: "*";
	color: #ee0000;
}

/* BANNER
-------------------------------------------------- */

.banner {
	width: 100%;
	background-color: #222;
	background-image: url('../images/banners/00 MAIN IMAGE.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-bottom: 30px solid #0d4478;
}

.banner .inner {
	display: block;
	padding: 5rem 15px;
	margin: 0 auto;
}

.banner .overview {
	display: block;
	width: 100%;
	max-width: 475px;
	border-radius: 16px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
	padding: 1rem 2rem 2rem 2rem;
	margin: 0 auto 1.5rem auto;
}

.banner .overview > div {
	display: inline-block;
	width: 100%;
}

.banner .overview h1 {
	font-weight: bold;
}

.banner .overview p {
	font-size: 1rem;
}

#wrapper .banner .quick-links {
	display: block;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}

#wrapper .banner .quick-links .bubble {
	width: 100%;
	max-width: 360px;
	padding: 1.75rem 2rem;
	margin: 0 auto;
	text-align: center;
	overflow: visible;
}

#wrapper .banner .quick-links .bubble div {
	position: relative;
}

#wrapper .banner .quick-links img {
	display: inline-block;
	height: 38px;
}

#wrapper .banner .quick-links .plus {
	display: inline-block;
	font-size: 2.25rem;
	font-weight: bold;
	margin: 0 0.75rem;
	vertical-align: middle;
}

#wrapper .banner .quick-links .btn-primary {
	position: relative;
	margin: 1rem auto 0 auto;
}

#wrapper .banner .quick-links .btn-primary:after {
	content: "";
	position: absolute;
	top: 0;
	right: 18px;
	bottom: 0;
	margin: auto 0;
	width: 16px;
	height: 16px;
	background-image: url('../images/icons/down-arrow.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

#wrapper .banner .quick-links .btn-primary + ul {
	position: absolute;
	left: 0;
	right: 0;
}

#wrapper .banner .quick-links .btn-primary + ul li {
	margin-bottom: 8px;
}

#wrapper .banner .quick-links .btn-primary + ul a {
	display: block;
	border-radius: 5px;
	color: #fff;
	padding: 5px 0;
	background-color: #007bff;
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}

#wrapper .banner .quick-links .btn-primary + ul a:hover {
	background-color: #dc5407;
}

#wrapper .banner .quick-links .btn-primary + ul {
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.25s ease;
}

#wrapper .banner .quick-links .btn-primary[aria-expanded="true"] + ul {
	height: auto;
	opacity: 1;
}

#wrapper .banner .quick-links .btn-primary[aria-expanded="true"]:after {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.banner .overview {
		max-width: 600px;
	}
	
	.banner .overview p {
		font-size: 1.25rem;
	}
	
	#wrapper .banner .quick-links img {
		height: 48px;
	}
}

/* MAIN CONTENT
-------------------------------------------------- */

.pad-row {
	padding-left: 15px;
	padding-right: 15px;
}

.main-content {
	max-width: 1170px;
	margin: 4rem auto 4rem auto;
	outline: none;
}

/* MAIN CONTENT - BUBBLE
-------------------------------------------------- */

.bubble {
	border-radius: 15px;
	background-color: #f2f2f2;
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
	padding: 3rem 1rem;
	overflow: hidden;
}

.bubble.blue {
	background-color: #0d4478;
}

.bubble.light-blue {
	background-color: #e3e8ed;
}

.bubble.orange {
	background-color: #dc5407;
}

.bubble.white {
	padding: 0;
	background-color: #fff;
}

.bubble.blue *,
.bubble.orange * {
	color: #fff;
}

@media (min-width: 720px) {
	.bubble {
		border-radius: 35px;
	}
}

/* MAIN CONTENT - DIFFERENCES
-------------------------------------------------- */

.differences {
	position: relative;
	z-index: 2;
	padding: 3rem 2rem 4rem 2rem;
}

.differences p {
	margin-bottom: 0;
}

.differences img {
	max-width: 200px;
	border-radius: 3px;
}

.differences .col-6 {
	position: static;
	padding-left: 6px;
	padding-right: 6px;
}

.differences a:not(.btn) {
	display: inline-block;
	color: #0d4478;
	font-size: 1rem;
	line-height: 1.25rem;
	max-width: 200px;
	margin: 0 auto;
}

.differences a:not(.btn) span {
	color: #dc5407;
}

.differences .dropdown p {
	font-size: 1rem;
	margin-top: 0.75rem;
}

.differences .dropdown {
	display: none;
	overflow: hidden;
	/*max-height: 0;
	transition: max-height 0.2s ease-out;*/
}

.differences .dropdown[data-show="true"] {
	display: block;
}

.differences .overlay {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 14rem 4rem 2rem 4rem;
	color: #fff;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	background-color: #0d4478;
	border-radius: 10px;
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
	text-align: left;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.differences .overlay.affordable-housing {
	background-image: url('../images/Image 01 Affordable Housing.jpg');
}

.differences .overlay.rural-natural {
	background-image: url('../images/Image 02 Natural Resources.jpg');
}

.differences .overlay.walkability {
	background-image: url('../images/Image 03- Walkability.jpg');
}

.differences .overlay.established-neighborhoods {
	background-image: url('../images/Image 04 Neighborhoods.jpg');
}

.differences .overlay:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		to bottom,
		rgba(13,68,120,0) 0%,
		rgba(13,68,120,1) 50%
	);
}

.differences .overlay[data-show="true"] {
	z-index: 1;
	opacity: 1;
}

.differences .overlay div {
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(20%);
	transition: transform 0.25s 0.15s ease, opacity 0.5s 0.15s ease-in;
}

.differences .overlay[data-show="true"] div {
	opacity: 1;
	transform: translateY(0);
}

.differences .overlay p {
	margin-bottom: 0.75rem;
}

.differences .overlay h3 {
	color: #fff;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.differences .overlay {
		background-position: center top 75%;
	}
	
	.differences .overlay:after {
		background-image: linear-gradient(
			to bottom,
			rgba(13,68,120,0) 0%,
			rgba(13,68,120,1) 70%
		);
	}
}

@media (min-width: 992px) {
	.differences .col-6 {
		padding-left: 15px;
		padding-right: 15px;
	}

	.differences a:not(.btn) {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	
	.differences img,
	.differences a:not(.btn) {
		max-width: none;
	}
}

/* MAIN CONTENT - NEW GROWTH & PROMOTE DENSITY
-------------------------------------------------- */
.new-growth .bubble.blue,
.promote-density .bubble.orange {
	position: relative;
	z-index: 1;
	margin-bottom: -2rem;
}


@media (min-width: 768px) {
	.new-growth .bubble:not(.blue),
	.promote-density .bubble:not(.orange) {
		padding: 5% 5% 5% 15%;
	}

	.new-growth .col-md-5,
	.promote-density .col-md-5 {
		padding-top: 6%;
		padding-bottom: 6%;
	}

	.new-growth .bubble.blue,
	.promote-density .bubble.orange {
		display: flex;
		align-items: center;
		width: 130%;
		height: 100%;
		padding: 0 5rem 0 4rem;
		margin-bottom: 0;
	}
}

/* MAIN CONTENT - DEVELOPMENT RULES
-------------------------------------------------- */

.development-rules .btn {
	width: 80%;
}

.development-rules img {
	border-radius: 5px;
}

.development-rules .offset-lg-1 div.w-100 {
	margin-top: 4rem;
}

.development-rules .inner {
	padding-right: 0.25rem;
}

@media (max-width: 991px) {
	.development-rules > div:first-child {
		margin-bottom: 3rem;
	}
}

@media (min-width: 992px) {
	.development-rules .offset-lg-1 div.w-100 {
		margin-top: 5.6rem;
	}
}

/* MAIN CONTENT - LEARN MORE
-------------------------------------------------- */

.learn-more {
	padding: 2rem;
}

.learn-more .left-col {
	display: flex;
	align-items: center;
}

.learn-more p {
	font-size: 2rem;
	line-height: 2.75rem;
}

@media (min-width: 992px) {
	.learn-more {
		padding: 4rem;
	}
}

/* MAIN CONTENT - FIND MY PARCEL
-------------------------------------------------- */

#find-my-parcel {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

#find-my-parcel > div {
	margin-bottom: 2rem;
}

#find-my-parcel .col-12 > div {
	width: 100%;
}

#find-my-parcel img {
	display: block;
	height: 125px;
	margin: 0 auto 1rem auto;
}

#find-my-parcel h2 {
	margin-bottom: 0.5rem;
}

#find-my-parcel .title {
	line-height: 2.25rem;
}

#find-my-parcel .btn {
	margin-top: 1.25rem;
}

@media (min-width: 992px) {
	#find-my-parcel {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	
	#find-my-parcel > div {
		margin-bottom: 0;
	}

	#find-my-parcel .col-12 > div {
		max-width: 520px;
	}
	
	#find-my-parcel .col-12:last-child > div {
		max-width: 360px;
	}
	
	#find-my-parcel img {
		float: left;
		height: 150px;
		margin: 0;
	}
}

/* MAIN CONTENT - RESOURCES
-------------------------------------------------- */

.resources h3 {
	font-size: 1.5rem;
	padding: 0 1.25rem;
}

.resources .col-sm-6 {
	padding: 0 2rem;
}

.resources .bubble {
	position: relative;
	padding-bottom: 3.5rem;
}

.resources .bubble p {
	padding: 1.5rem 2rem;
	margin-bottom: 0;
}

.resources .bubble a {
	position: absolute;
	bottom: 2rem;
	padding: 0 2rem;
}

.resources a img {
	height: 23px;
	margin: -3px 0 0 0.75rem;
}

/* MAIN CONTENT - SIGN UP FOR UPDATES
-------------------------------------------------- */

#wrapper .ctct-form-defaults {
	padding: 0;
}

#wrapper .ctct-form-defaults h2 {
	display: none;
}

#wrapper .ctct-form-defaults input {
	width: 100%;
    height: 46px;
    padding: 10px 15px;
    border: 1px solid #b0b6bb;
    background-color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #323232;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
	margin-bottom: 20px;
}

#wrapper .ctct-form-defaults button {
	display: block;
    width: 100%;
    margin-bottom: 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    padding: 16px;
    line-height: 1;
    background-color: #dc5407;
    border: 1px solid #dc5407;
    color: #ffffff;
    border: none;
    box-shadow: none;
    border-radius: 3px;
    text-transform: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#wrapper .ctct-gdpr-text {
	font-size: 14px;
	line-height: 1.25rem;
}

/* TOPICS
-------------------------------------------------- */

.topics {
	max-width: none;
	text-align: center;
}

.topics * {
	color: #000;
}

.topics .row {
	max-width: 1170px;
	margin: 0 auto;
}

.topics .logos {
	display: inline-block;
	width: 100%;
	max-width: 230px;
}

.topics .img-container {
	float: left;
	width: 100%;
	margin-bottom: 0.5rem;
}

.topics img {
	height: 48px;
}

.topics h2 {
	font-size: 1.5rem;
}

.topics ul {
	margin-bottom: 2rem;
	list-style-type: none;
	margin-left: 0;
}

.topics ul li {
	margin-bottom: 0.75rem;
}

.topics #contact-us {
	font-size: 1.15rem;
}

.topics #contact-us a {
	display: inline-block;
	color: #dc5407;
	font-weight: bold;
	margin-bottom: 1rem;
}

@media (min-width: 992px) {
	.topics {
		text-align: left;
	}
}