@charset "utf-8";

.quote h2 {
    font-size: 160%;
}

#contacts {
    margin: 4% 0 0;
}

#contacts img {
    width: 8%;
    margin: 0 1.5%;
}

@media (min-width: 600px) {
	h1 {
			font-size: 285%;
	}

	h2 {
		font-size: 180%;
	}

	h3 {
		font-size: 130%;
	}

	section {
		margin: 9% 0;
	}

	.green {
		padding: 8% 0;
	}

	.hero {
		padding: 8% 0;
	}

	.page-title {
		padding: 4.5% 0 4%;
	}

	.half-image {
		width: 75%;
		margin: auto;
	}

	.right {
		margin: 6% 0 0;
	}

	.left {
		margin: 0 0 6%;
	}

  .quote {
    padding: 5% 7%;
    margin: 7.5% 0 5.5%;
  }

  .quote h2 {
    font-size: 170%;
  }

	#logo {
		width: 25%;
	}

	#sidenav-icon {
		font-size: 120%;
	}

	#sidenav nav {
		font-size: 130%;
	}

	#sidenav section {
		padding: 3.5% 0;
	}

	#sidenav section button {
		padding: 1.5% 2.5%;
	}

	.hero-text {
			padding: 4% 6% 6.5%;
	}

	.hero-text h2 {
		font-size: 190%;
		margin: 0 0 4%;
	}

	.hero-text button {
		padding: 2.5% 3% 3%;
	}

	.campaign {
		margin: 5% 0;
	}

	.campaign-text {
		padding: 6% 10%;
	}

	.headshot img {
		width: 60%;
	}

	footer .container {
		display: table;
	}

	#footer-text {
		display: table-cell;
		vertical-align: middle;
		width: 80%;
	}

	#contacts {
		display: table-cell;
		vertical-align: middle;
		text-align: right;
	}

	#contacts img {
		width: 30%;
		margin: 0 0 0 8%;
	}
}

@media (min-width: 768px) {
	h1 {
		font-size: 295%;
	}

	section {
		margin: 7% 0;
	}

	.green {
		padding: 6% 0;
	}

	.container {
		width: 75%;
	}

	.hero {
		padding: 8% 0;
	}

	.page-title {
		padding: 3% 0;
	}

	.half-image {
		width: 66%;
	}

	.right {
		margin: 4% 0 0;
	}

	.left {
		margin: 0 0 4%;
	}

  .quote {
    margin: 6.5% 0 4.5%;
    padding: 4% 6%;
  }

	header {
		padding: 1.5% 0;
	}

	#logo {
		width: 18%;
	}

	#sidenav-icon {
		display: none;
	}

	#fullnav {
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

	#fullnav li {
		list-style: none;
		display: inline;
		margin: 0;
		font: 97.5% "Plus Jakarta Sans", sans-serif;
		font-weight: 500;
	}

	#fullnav li a {
		text-decoration: none;
		color: #003256;
		margin: 0 0 0 5%;
	}

	#fullnav li a:hover {
		color: #02779E;
	}

	#fullnav button {
		font: inherit;
		padding: 1% 2% 1.5%;
	}

	#sidenav {
		display: none;
	}

	.hero-text {
		padding: 3.5% 5% 5.5%;
	}

	.hero-text button {
		font-size: 105%;
		padding: 2% 3% 2.5%;
		margin: 0 1.5% 0 0;
	}

	.tiles {
		overflow: auto;
	}

	.campaign {
		float: left;
		width: 46%;
		aspect-ratio: 1/1;
		margin: 4% 4% 0 0;
		display: flex;
	}

	.campaign-text {
		margin: auto;
		padding: 0 12%;
	}

	.bio {
		display: table;
		margin: 4% 0 6%;
	}

	.headshot, .bio-text {
		display: table-cell;
		vertical-align: top;
	}

	.headshot {
		width: 33%;
	}

	.headshot img {
		width: 100%;
	}

	.bio-text {
		padding: 0.5% 4%;
	}

	footer {
		padding: 2.5% 0 4%;
	}

	#contacts img {
		width: 27%;
		margin: 0 0 0 10%;
	}
}

@media (min-width: 992px) {
	h1 {
		font-size: 300%;
	}

	section {
			margin: 6% 0;
	}

	.green {
		padding: 5% 0;
	}

	.page-title {
		padding: 3% 0 2.5%;
	}

	.halves {
		display: table;
	}

	.half-image {
		display: table-cell;
		vertical-align: top;
		width: 40%;
	}

	.half-text {
		display: table-cell;
		vertical-align: top;
		width: 60%;
	}

	.right {
		padding: 1% 0 0 4%;
	}

	.left {
		padding: 0 5% 0 0;
	}

  .quote {
    margin: 5.5% 0 4%;
    padding: 3.5% 5%;
  }

  .quote h2 {
    font-size: 175%;
  }

  .quote h3 {
    font-size: 120%;
  }

	header {
		padding: 0.8% 0;
	}

	#logo {
		width: 16%;
	}

	#fullnav {
		font-size: 110%;
	}

	#fullnav li a {
		margin: 0 0 0 4.5%;
	}

	#fullnav button {
		padding: 1.1% 2.3% 1.5%;
	}

	#home {
		height: 55vh;
	}

	.hero-text {
		padding: 2% 3% 3%;
		width: 55%;
		position: absolute;
		bottom: 15%;
	}

	.campaign {
		width: 30%;
		margin: 3% 3% 0 0;
	}

	footer {
		padding: 1.8% 0 2.8%;
	}

	#contacts img {
		width: 22%;
		margin: 0 0 0 10%;
	}
}

@media (min-width: 1200px) {
	section {
		margin: 4% 0;
		width: 100%;
	}

	.green {
		padding: 3% 0;
	}

	.container {
		width: 60%;
		max-width: 960px;
	}

	.page-title {
		padding: 2% 0 1.7%;
	}

  .quote {
    margin: 4.5% 0 3%;
    padding: 3% 5%;
  }

	header {
	  padding: 1% 0;
	}

	#logo {
	  width: 15%;
	}

	#fullnav {
		font-size: 112.5%;
	}

	#fullnav button {
		padding: 0.8% 1.5% 1%;
	}

	#home {
		height: 75vh;
		max-height: 700px;
	}

	.hero-text {
		padding: 1.7% 2.2% 2.4%;
		width: 30%;
		bottom: 12.5%;
	}

	.hero-text h2 {
		font-size: 200%;
	}

	.hero-text button {
		font-size: 102.5%;
	}

	.campaign-text {
		padding: 0 8%;
	}

	.campaign-text h3 {
		margin: 0 0 6%;
	}

	.bio {
		margin: 4% 0 7%;
	}

	.headshot {
		width: 25%;
	}

	.bio-text {
		padding: 1% 3%;
	}

	.bio-text h3 {
		font-size: 125%;
		margin: 0;
	}

	#current {
		padding: 0 0 0 15%;
	}

	footer {
		padding: 1.1% 0 1.75%;
		margin: 4.5% 0 0;
	}

	#contacts img {
		width: 16%;
		margin: 0 0 0 5%;
	}
}