/* --------------- Utility Facts --------------- */


/* --------------- Import web fonts --------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;700&display=swap');

/* --------------- Set CSS variables --------------- */


	:root {

		--base-large: 18px;
		--base-small: 12px;

		--base-body-font: 'Inter', Arial, Helvetica, sans-sefif;
		--base-body-font-weight: 200;

		--base-header-font: 'Inter', Arial, Helvetica, sans-sefif;
		--base-header-font-weight: 200;

		/* set maximum wrapper width */

		--wrapper-max-width:1300px;

		/* default color palette */

		--color-white:#ffffff;  /* white */
		--color-black:#000000;  /* black */

		--color-yellow:#fadf03;  /* yellow */
		--color-grey:#e9e9e9;  /* grey */

	}


/* --------------- CSS resets --------------- */


	html,body,ul,li,img,article,section,div,nav,h1,h2,h3,h4,h5,p {
		margin:0;
		padding:0;
	}

	img {
		display: block;
	}


/* --------------- Set base styles --------------- */


	html {
		font-family:var(--base-body-font);
		font-size:var(--base-large);
	}

	body {
		background-color:#fff;
	}

/* --------------- Set id selectors --------------- */

	#header {
		background-color:#fff;
		padding:1.4rem 0 1rem 0;
	}

	#logo {
		flex: 1;
	}

	#nav {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		padding:0;
	}

	#nav-top {
		flex: 5;
		color:#000;
		padding:0.8rem 0 0.8rem 0;
		font-family: 'Inter', sans-serif;
		font-weight:400;
		font-size:1.2rem;
		text-align:right;
	}

	#highlight {
		display:block;
		padding:4rem 0 4rem 0;
		margin:0;
		background-color:var(--color-grey);
		color:var(--color-black);
	}

	#sub {
		padding-bottom:3rem;
	}


	#footer {
		margin-top:4rem;
		background-color:#404040;
		padding:5rem 0 5rem 0;
	}


/* --------------- Set class selectors --------------- */


	.wrapper {
		margin:0 auto;
		max-width:var(--wrapper-max-width);
		padding:0 4rem 0 4rem;
	}

	.wrapper-full {
		margin:0 auto;
		width:100%;
		max-width:var(--wrapper-max-width);
		padding:0;
	}

	.article-highlight {
		padding:0 0 2rem 0;
	}

	.s0-left {
		flex: 1 1 600px;
		color:#000;
		padding:2rem 4rem 1rem 0;
	}

	.s0-right {
		flex: 1 1 400px;
		padding:2rem 0 0 0;
	}

	.s1-left {
		display:block;
		flex: 1 400px;
		flex-grow: 1;
		background:url('images/image-multi-family.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 10%;
		min-height:15rem;
		padding:4rem;
	}

	.s1-right {
		display:block;
		flex: 1 400px;
		flex-grow: 1;
		padding:4rem;
		color:#000;
	}

	.s2-left {
		display:block;
		flex: 1 400px;
		flex-grow: 1;
		background:url('images/image-single-family-home.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding:4rem;
		min-height:15rem;
	}

	.s2-right {
		display:block;
		flex: 1 400px;
		flex-grow: 1;
		padding:4rem;
		color:#000;
		min-height:15rem;
	}


	.article-top {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.article-strip {
		margin-top:3rem;
		margin-bottom:5rem;
	}

	.article-photo {
		flex: 1 400px;
		margin-top:-2rem;
		margin-bottom:-2rem;
	}

	.article-caption {
		flex: 1 400px;
		color:#000;
		padding:3rem 3rem 2rem 3rem;
	}

	.article-main {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}


	section.icons-row {

		padding:2.8rem 0 1.8rem 0;
		color:#000;
		margin:auto;
		justify-content: space-between;
	}

	.icon-section {
		padding-top:3rem;
		padding-bottom:4rem;
		color:#000;
	}


	.icons {
		display:block;
		padding:0;
		text-align:center;
		flex:1;
		flex-grow: 1;
		padding:1rem 3% 1rem 3%;
	}

	.icon-first {
		padding-left:0;
	}

	.icon-last {
		padding-right:0;
	}


	p.bold {
		font-weight:bold;
	}

	p.copyright {
		font-size:0.8rem;
	}

	footer {
		color:#ccc;
		font-family: 'Inter', sans-serif;
	}

	footer p {
		font-size:1rem;
		padding-bottom:2rem;
		color:#fff;
	}



	ul.nav_top li {
		display: inline;
		padding-left:0.8rem;
	}

	ul.nav_top li:first-child {
		padding-left:0;
	}

	ul.nav_top li.optional {
		display:none;
	}




	a:link {
		color:var(--color-yellow);
		text-decoration: underline;
	}

	a:visited {
		color:var(--color-yellow);
	}

	a:hover {
		color:var(--color-yellow);
		text-decoration: underline;
	}

	a:active {
		color:var(--color-yellow);
	}




	a.nav-top:link {
		color:#000;
		text-decoration: none;
	}

	a.nav-top:visited {
		color:#000;
	}

	a.nav-top:hover {
		color:#000;
		text-decoration: none;
	}

	a.nav-top:active {
		color:#000;
	}




	a.button:link {
		color:#fff;
		text-decoration: none;
	}

	a.button:visited {
		color:#fff;
	}

	a.button:hover {
		color:var(--color-yellow);
		text-decoration: none;
	}

	a.button:active {
		color:var(--color-yellow);
	}




	ul.nav-bottom {
		font-size:1.2rem;
		margin-bottom:4rem;
	}


	ul.nav-bottom li {
		display: inline;
		padding-left:0.8rem;
	}

	ul.nav-bottom li:first-child {
		padding-left:0;
	}

	ul.nav-bottom li.optional {
		display:none;
	}


	a.nav-bottom:link {
		color:#fff;
		text-decoration: none;
	}

	a.nav-bottom:visited {
		color:#fff;
	}

	a.nav-bottom:hover {
		color:var(--color-yellow);
		text-decoration: none;
	}

	a.nav-bottom:active {
		color:var(--color-yellow);
	}



	li {
	    display: inline;
	}

	p {
		font-family: var(--base-body-font);
		font-weight:400;
		font-size:1.2rem;
		line-height:2.2rem;
		margin-top:2rem;
	}

	p.topic {
		font-family: 'Inter', sans-serif;
		font-weight:700;
		font-size:1rem;
		text-transform:uppercase;
		letter-spacing:0.3rem;
		margin-top:0;
		margin-bottom:1.8rem;
	}


	h1 {
		font-family: var(--base-header-font);
		font-weight:200;
		font-size:2.6rem;
		line-height:3.6rem;
		margin:0;
	}

	h1.title {
		font-size:3.2rem;
		line-height:3.8rem;
	}


	.button {
		display:inline-block;
		margin-top:0.8rem;
		background-color:#000;
		color:#fff;
		padding:1.2rem;
		font-family: 'Inter', sans-serif;
		font-weight:700;
		font-size:1.2rem;
		line-height:1.4rem;
		text-transform:uppercase;
		text-decoration:none;
	}

	.button-color-default {
		background-color:var(--color-black);
	}

	img.scalable {
		width:100%;
		border:0;
		margin:0;
		padding:0;
	}

	img.label {
		max-width:35rem;
	}

	img.logo {
		max-width:3rem;
	}

	img.icon {
		max-width:20rem;
	}




/* --------------- Set utility classes --------------- */


	section.flex {
		display:flex;
		flex-grow: 1;
		flex-basis: 0;
		flex-direction:row;
		flex-wrap: wrap;
		margin:0;
		padding:0;
		justify-content: space-between;
	}

	section.reverse {
		flex-wrap: wrap-reverse;
	}


	.italics {
		font-style:italic;
	}

	.white {
		color:#fff;
	}

	.black {
		color:#000;
	}


	.centered {
		text-align:center;
	}

	.htop {
		align-items: top;
	}


	.hcenter {
		align-items: center;
	}

	.hbottom {
		align-items: end;
	}


	.bg-color-0 {
		background-color:#fff;
	}

	.bg-color-1 {
		background-color:#FADF03;
	}


/* --------------- Media queries --------------- */


	@media screen and (max-width: 768px) {

		html {
			font-size:var(--base-small);
		}

		body p {
			font-size:1.6rem;
			line-height:2.8rem;
		}

		.wrapper {
			padding:0 2rem 0 2rem;
		}

		.s0-left {
			flex: 1 1 1200px;
			color:#000;
			padding:2rem 1rem 1rem 0;
		}

		.s0-right {
			flex: 1 1 800px;
			padding:2rem 0 0 0;
		}

		.s1-right {
			padding:2rem;
		}

		.s2-right {
			padding:2rem;
		}


	}