@charset "utf-8";

* {
	box-sizing: border-box;
}

body {
  margin: 0;

  font: 100% "Inter", sans-serif;
}

h1, h2, h3 {
	margin: 0;
}

h1 {
	font: 270% "Scope One", serif;
	font-weight: 400;
	color: #003256;
	line-height: 110%;
}

h2, h3 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	color: #08391B;
}

h2 {
	font-size: 175%;
}

h3 {
	font-size: 125%;
}

p, li {
	font-size: 105%;
	line-height: 135%;
}

button {
	border: none;
	background: #029E5D;
	color: #fff;
	font-family: "Plus Jakarta Sans", sans-serif;
	line-height: 100%;
	border-radius: 10px;
}

button:hover {
	cursor: pointer;
	background: #006B31;
}

section {
	margin: 10% 0;
}

figure {
	width: 100%;
	margin: 0;
}

figcaption {
	font-size: 65%;
	color: #303030;
	margin: 1% 0 0;
}

/* custom classes */

.green {
	background: #E2FFE2;
	padding: 10% 0;
}

.hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	position: relative;
	padding: 12.5% 0;
}

.container {
  width: 80%;
  margin: auto;
}

.clear, .clear:hover {
	background: none;
}

.clear:hover {
	color: #B3C7EB;
}

.page-title {
	background: #003256;
	margin: 0;
	padding: 7% 0 6%;
}

.page-title h1 {
	color: #fff;
	margin: 0 20% 0 0;
}

.half-image img {
	width: 100%;
}

.right {
	margin: 8% 0 0;
}

.left {
	margin: 0 0 8%;
}

.quote {
	background: #E2FFE2;
	padding: 6%;
	margin: 10% 0 8%;
	text-align: center;
}

.quote h2, .quote h3 {
	font-family: 'Scope One', serif;
	font-weight: 400;
	color: #000;
}

.quote h2 {
	font-size: 155%;
	margin: 0 0 2%
}

.quote h3 {
	font-size: 115%;
	margin: 0;
}

/* header */

header {
  width: 100%;
  display: table;
  padding: 3% 0;
}

#logo {
  display: table-cell;
  width: 35%;
  vertical-align: middle;
}

#logo img {
  width: 100%;
  height: auto;
}

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

#sidenav-icon button, #closenav button {
	background: none;
	color: #003256;
	font-size: 160%;
}

#sidenav-icon button:hover, #closenav button:hover {
	color: #02779E;
}

#fullnav {
  display: none;
}

#sidenav {
	height: 100vh;
	width: 0;
	overflow-x: hidden;
	transition: 0.7s;
	position: absolute;
	top: 0;
	right: 0;
	background: #fff;
	z-index: 100;
	padding: 1% 0;
}

#closenav {
	text-align: right;
	margin: 0 0 4%;
}

#closenav button {
	font-size: 275%;
}

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

#sidenav section {
	padding: 4% 0;
	margin: 0;
}

#sidenav nav a {
	text-decoration: none;
	color: #003256;
}

#sidenav nav a section:hover {
	background: #E7F8FF;
}

#sidenav section button {
	font: inherit;
	border-radius: 0;
	padding: 1.5% 3%;
}

/* home */

#home {
	background-image: url("images/home_hero.jpg");
}

.hero-text {
	background: rgba(0, 0, 0, 0.5);
	padding: 5% 8% 8%;
}

.hero-text h2 {
		color: #fff;
		font-size: 180%;
		margin: 0 0 6%;
}

.hero-text button {
	font-size: 100%;
	font-weight: 600;
	padding: 3.5% 4% 4%;
	margin: 0 2% 0 0;
}

/* campaigns */

.tiles a {
	text-decoration: none;
}

.campaign {
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 7% 0;
}

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

.campaign-text h3, h4 {
	text-align: center;
	color: #fff;
}

.campaign-text h3 {
	font-size: 175%;
	margin: 0 0 4%;
}

.campaign-text h4 {
	font-weight: 400;
	font-size: 110%;
	margin: 0;
}

#rai {
	background-image: linear-gradient(rgba(2, 119, 158, 0.8), rgba(2, 119, 158, 0.3)), url("images/campaign_rai.jpg");
}

#taal {
	background-image: linear-gradient(rgba(2, 119, 158, 0.8), rgba(2, 119, 158, 0.2)), url("images/campaign_taal.jpg");
}

#dpap {
	background-image: linear-gradient(rgba(2, 119, 158, 0.8), rgba(2, 119, 158, 0.2)), url("images/campaign_dpap.jpeg");
}

/* board */

.bio {
	margin: 20% 0;
}

.headshot {
	margin: 0 0 4%;
	text-align: center;
}

.headshot img {
	width: 70%;
}

/* help */

#help {
	background-image: url("images/help_hero2.jpg");
	height: 45vh;
}

#current {
	font: 160% "Scope One", serif;
	font-weight: 400;
	text-align: right;
}

/* footer */
footer {
	background: #D9D9D9;
	margin: 5% 0 0;
	padding: 4% 0 6%;
}

#footer-text {
	font-size: 75%;
	color: #303030;
}

#footer-text p {
	margin: 0.5% 0;
}

#contacts {
	text-align: center;
	margin: 6% 0 0;
}

#contacts img {
	width: 12%;
	margin: 0 2.5%;
}

#contacts a img:hover {
	opacity: 75%;
}