foundation/reports/annual_report.css

#maincontent {
  color: black;
}
h1,
h2,
h3 {
  color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.headshot-wrapper {
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .headshot-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    text-align: center;
    float: none;
    margin-right: 0px;
    margin-bottom: 20px;
  }
}
.content-center {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align: center;
}
.position-relative {
  position: relative;
}
.blue-text {
  color: #3f7b96;
  font-size: 32px;
}
.initiatives h2 {
  color: #f6941f;
}
.full-background::after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: -1;
  background-size: cover;
}
.full-background.initiatives::after {
  background-image: url("images/2022/bg_initiatives.jpg");
}
.full-background.projects::after {
  opacity: 0.14;
  background: linear-gradient(#f9f9f9 60%, #808080);
}
.full-background.membership-top::after {
  opacity: 0.14;
  background: linear-gradient(#808080 40%, white);
}
.full-background.membership-bottom::after {
  background-image: url("images/2022/bg_membership.jpg");
}
.full-background.operations::after {
  opacity: 0.14;
  background: linear-gradient(#f9f9f9 70%, #808080);
}
.full-background.box-blue-gradient::after {
  opacity: 0.45;
  background: linear-gradient(white, #3f7b96);
}
.full-background.box-blue-gradient-reverse::after {
  opacity: 0.45;
  background: linear-gradient(#3f7b96, white);
}
.full-background.box-gray-gradient::after {
  opacity: 0.3;
  background: linear-gradient(white, #808080);
}
.box-white {
  background-color: white;
}
.box-white hr {
  width: 60%;
}
.box-shadow {
  box-shadow: 10px 3px 6px #d4d4d4;
}
.box-angle {
  background-color: white;
  clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);
}
.box-angle-wrap {
  filter: drop-shadow(3px 3px 3px #808080);
}
.box-angle-wrap.top-nav {
  margin-right: 10px;
}
.box-angle-wrap.top-nav a {
  font-size: 14px;
}
.box-angle-wrap.top-nav div:hover {
  background-color: #e7ebeb;
}
@media screen and (max-width: 992px) {
  .box-angle-wrap.top-nav {
    padding-top: 30px;
  }
}
.box-border-light {
  border: 1px solid #e7ebeb;
}
.box-border-dark {
  border: 1px solid #c8cccc;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align: center;
}
.box-solid-color h1,
.box-solid-color h2,
.box-solid-color h3,
.box-solid-color p {
  color: white;
}
.box-solid-color.box-orange {
  background-color: #f6941f;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align: center;
}
.box-solid-color.box-blue {
  background-color: #3f7b96;
  padding: 10px;
}
.box-solid-color.box-darkgray {
  background-color: #707070;
}
.box-solid-color.box-blue.box-angle {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.box-solid-color.box-darkgray.box-angle {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.box-white-shadow {
  background-color: white;
  box-shadow: 10px 3px 6px #d4d4d4;
  border: 1px solid #e7ebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align: center;
}
.box-white-shadow hr {
  width: 60%;
}
.box-lightgray {
  background-color: #e7ebeb;
}
.box-lightgray h1,
.box-lightgray h2,
.box-lightgray h3,
.box-lightgray p {
  color: black;
}
.box-list {
  padding-bottom: 20px;
}
.box-elevated {
  z-index: 1;
  position: relative;
  max-width: 376px;
  min-width: 376px;
  display: inline-block;
}
@media screen and (max-width: 480px) {
  .box-elevated {
    width: fit-content;
    max-width: 100%;
    min-width: 100%;
  }
}
.box-elevated-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  text-align: center;
  padding-top: 10px;
}
.box-elevated-large {
  z-index: 1;
  position: relative;
  margin: 30px 30px 10px 30px;
}
.box-elevated-large-wrapper {
  padding: 0px 30px 10px 30px;
}
.list-unstyled {
  list-style-type: none;
}
.padding-bottom-100 {
  padding-bottom: 100px;
}
.card-number {
  padding-left: 25px;
  padding-top: 10px;
}
.card-description {
  padding: 0px 40px 15px 45px;
}
#key-initiatives {
  position: relative;
}
#projects {
  position: relative;
}
#membership {
  position: relative;
}
#operations {
  position: relative;
}
.grid-wrapper {
  display: grid;
  display: -ms-grid;
  column-gap: 3%;
}
.grid-wrapper img {
  max-height: 100%;
  width: auto;
}
.grid-wrapper.row-6-col {
  -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
  grid-template-columns: repeat(6, 1fr);
}
.grid-wrapper.row-2-col {
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 1fr 10px 1fr;
  row-gap: 5%;
  margin-bottom: 10px;
}
.grid-wrapper.row-5-col {
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(5, 1fr);
  -ms-grid-rows: 108px 20px 108px;
  row-gap: 20px;
}
@media screen and (max-width: 768px) {
  .grid-wrapper.row-5-col {
    padding-top: 10px;
  }
}
.box-1-single {
  -ms-grid-column: 3;
  grid-column: 2/3;
}
.box-2-single {
  -ms-grid-column: 5;
  grid-column: 3/4;
}
.box-3-single {
  -ms-grid-column: 7;
  grid-column: 4/5;
}
.box-4-single {
  -ms-grid-column: 9;
  grid-column: 5/6;
}
.box-1-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.box-2-1 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.box-2-2 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.box-grid-long {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1/3;
  -ms-grid-column: 3;
  grid-column: 2/3;
}
.box-grid-wide {
  -ms-grid-column: 5;
  -ms-grid-column-span: 3;
  grid-column: 3/5;
}
.box-grid-wide.bottom-row {
  -ms-grid-row: 3;
}
.bottom-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.top-right {
  position: absolute;
  top: 0px;
  right: 0px;
}
@media screen and (max-width: 768px) {
  .padding-when-wrapped {
    padding-top: 25px;
  }
}