@import "animations.css";
@import "nav.css";
@import "stretchText.css";
@import "adobeFonts.css";
@import url("https://fonts.googleapis.com/css?family=Oswald:500|Roboto+Condensed:700|Roboto+Condensed:400|Roboto:300&display=swap");

/*START GENERAL STYLING*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

*:focus,
*:active {
  outline: 0 !important;
}

a:hover {
  text-decoration: none;
  cursor: pointer !important;
}

:root {
  font-size: 16px;
  -webkit-animation: fadein 0.4s ease-in both;
  -moz-animation: fadein 0.4s ease-in both;
  -o-animation: fadein 0.4s ease-in both;
  animation: fadein 0.4s ease-in both;
  background: #fff;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  --color-text: #333;
  --color-bg: #fff;
  --color-link: #bc0b36;
  --color-link-hover: #000;
  --color-deco: #cabeaf;
  --bg-width: 100%;
  --aspect-ratio: 33/6;
  --aspect-ratio-first: 16/9;
  color: var(--color-text);
  background-color: var(--color-bg) !important;
  font-family: "Roboto", sans-serif;
  line-height: 150%;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: normal;
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  text-align: left;
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  padding: 0;
  counter-reset: figure;
  margin: auto;
}

.content .bulletWrap {
  background: #eee;
  padding: 2rem;
  margin: 2.5rem 0 0 0;
  text-align: left;
}

.jarallax {
  position: relative;
  z-index: 0;
}

/*END GENERAL STYLING*/

/*ASPECT RATIOS*/
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {
  height: auto;
}
@supports (--custom: property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

/*START HEADER*/
#header {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem !important;
  margin-bottom: 20px;
}

#header h1 {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#header h1 p {
  margin: 0;
  line-height: 9rem;
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
  width: 550px;
  padding: 0;
  margin: 0;
  text-align: center !important;
}

@media screen and (max-height: 400px) {
  #header {
    padding: 0 !important;
  }
}

#header h1 #then {
  font-family: adobe-garamond-pro-web, serif !important;
  font-weight: 400;
  font-size: 12rem;
  color: var(--color-deco);
  -webkit-animation: fadein 0.7s 0.5s ease-in both;
  -moz-animation: fadein 0.7s 0.5s ease-in both;
  -o-animation: fadein 0.7s 0.5s ease-in both;
  animation: fadein 0.7s 0.5s ease-in both;
  display: flex;
  justify-content: space-between;
}

#header h1 #now {
  font-family: rockwell-web, serif;
  font-weight: 700;
  font-size: 12.5rem;
  color: var(--color-deco);
  width: 540px;
  margin-top: 2rem;
  -webkit-animation: fadein 0.7s 1s ease-in both;
  -moz-animation: fadein 0.7s 1s ease-in both;
  -o-animation: fadein 0.7s 1s ease-in both;
  animation: fadein 0.7s 1s ease-in both;
  display: flex;
  justify-content: space-between;
}

#header h1 #next {
  font-family: trade-gothic-next-web, sans-serif;
  font-weight: 800;
  width: 557px;
  font-size: 12.5rem;
  margin-top: -1.5rem;
  line-height: 12rem;
  background: url("/about/tnn/img/next-bg.jpg");
  background-size: cover;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-animation: fadein 0.7s 1.5s ease-in both;
  -moz-animation: fadein 0.7s 1.5s ease-in both;
  -o-animation: fadein 0.7s 1.5s ease-in both;
  animation: fadein 0.7s 1.5s ease-in both;
  display: flex;
  justify-content: space-between;
}

#header #subHeading {
  -webkit-animation: fadein 1s 2s ease-in both;
  -moz-animation: fadein 1s 2s ease-in both;
  -o-animation: fadein 1s 2s ease-in both;
  animation: fadein 1s 2s ease-in both;
  text-align: center !important;
}

#header #subHeading #line1 {
  font-family: rockwell-web, serif;
  font-weight: bold;
  font-size: 1.2rem;
}

#header #subHeading #line2 {
  font-size: 1rem;
  color: var(--color-link);
  font-weight: 400;
  margin-top: -10px;
}
/*END HEADER*/

/*SECTIONS GENERAL STYLES (NOT INITIATIVES, THOSE ARE .item)*/
#sectionWrap {
  max-width: 100%;
  padding: 0;
}

.section {
  display: flex;
  flex-direction: column;
  margin: 16vh auto 16vh auto;
  max-width: 768px;
}

.section > div {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.section .sectionImage {
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.section .sectionText {
  text-align: justify;
}

.section .sectionText .large {
  font-size: 1.75rem;
  line-height: normal;
}

.section .sectionText hr {
  width: 2rem;
  margin-left: 0;
}

@media screen and (min-width: 1400px) {
  .section .sectionText .columns {
    column-count: 1;
    column-gap: 2rem;
  }
}

/*END SECTIONS GENERAL STYLES*/

/*START PREFACE SECTION*/

#intro .sectionImage {
  background: url("/about/tnn/img/strat-plan-intro.jpg");
  background-size: cover;
  background-position: center center;
  padding-bottom: calc(100% / (var(--aspect-ratio-first)));
}

#intro h2 {
  color: var(--color-link);
  text-align: left;
  font-size: 1.5rem;
}
/*END PREFACE SECTION*/

/* START SECTIONS:
From the Library Board and the Library of Virginia Foundation Board
AND
From the Librarian of Virginia*/
#libraryBoard,
#librarianOfVA:not(li) {
  text-align: justify;
}

#libraryBoard h2,
#librarianOfVA h2 {
  color: var(--color-text);
}

#boardSignatures {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#boardWords {
  margin: 4rem 0;
}

#librarianOfVA li {
  margin-bottom: 1rem;
}

#librarianOfVA .large {
  color: #e4b132;
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  font-size: 2rem;
}

#sandraSignature {
  height: auto;
  width: 50%;
}
/*END SECTIONS:
From the Library Board and the Library of Virginia Foundation Board 
AND 
From the Librarian of Virginia*/

/*START SECTION: THEN*/

#thenSectionWrap {
  flex-direction: column-reverse;
}

#thenSectionWrap .sectionImage {
  background: url("/about/tnn/img/then.jpg");
  background-size: cover;
  background-position: 50% 50%;
  flex-grow: 1;
}

#thenSectionWrap .sectionText h2,
#thenSectionWrap .sectionText hr {
  color: #273d4b;
  font-size: 10rem;
  font-family: adobe-garamond-pro-web, serif;
  margin: 3rem 0 0 0;
  line-height: 9rem;
}
/*END SECTION: THEN*/

/*START SECTION: NOW*/
#nowSectionWrap .sectionImage {
  background: url("/about/tnn/img/now.jpg");
  background-size: cover;
  background-position: 50% 50%;
  flex-grow: 1;
}

#nowSectionWrap .sectionText h2,
#nowSectionWrap .sectionText hr {
  color: #e4b132;
  font-family: rockwell-web, serif;
  line-height: 9rem;
  font-size: 10rem;
  margin: 3rem 0 0 0;
}

#nowSection ul {
  margin-left: 1rem;
}

#nowSection ul li {
  margin-bottom: 1rem;
  text-align: left;
}
/*END SECTION: NOW*/

/*START SECTION: NEXT*/
#nextSectionWrap {
  flex-direction: column-reverse;
}

#nextSection .bulletWrap {
  margin-top: 4rem;
}

#nextSectionWrap .sectionImage {
  background: url("/about/tnn/img/next.jpg");
  background-size: cover;
  background-position: 50% 50%;
  flex-grow: 1;
}

#nextSectionWrap .sectionText h2,
#nextSectionWrap .sectionText hr {
  color: #bc0b36;
  font-weight: 800;
  font-family: trade-gothic-next-web, sans-serif;
  font-size: 10rem;
  margin: 0 0 0 0;
}

#nextSection h3 {
  text-transform: uppercase;
  color: #273d4b;
}

#nextSection .sectionText h3 {
  font-size: 1.5rem;
}

ul#nextFocusAreas {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-left: 0;
  text-align: left !important;
}

ul#nextFocusAreas h4 {
  color: #273d4b;
  font-size: 1.25rem;
}

@media screen and (min-width: 1400px) {
  #nextFocusAreas {
    display: flex;
  }
  #nextFocusAreas li {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
  }
}
/*END SECTION: NEXT*/

/*START INITIATIVES GENERAL STYLING*/
@media screen and (min-width: 768px) {
  .two_col {
    text-align: left !important;
    display: flex;
  }

  .two_col > div {
    width: 50%;
  }

  .two_col > div:nth-of-type(1) {
    margin-right: 1rem;
  }

  .two_col > div:nth-of-type(2) {
    margin-left: 1rem;
  }

  .three_col {
    text-align: left !important;
    display: flex;
  }

  .three_col > div {
    width: 33%;
  }

  .three_col > div:nth-of-type(1) {
    margin-right: 1rem;
  }
  .three_col > div:nth-of-type(2) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .three_col > div:nth-of-type(3) {
    margin-left: 1rem;
  }
}

h3.initiative {
  margin-top: 1.5rem;
  font-family: rockwell-web, serif;
}

.item__caption-title {
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  margin: 0;
  text-align: left;
}

.item__caption .large {
  font-size: 1.33rem;
  line-height: 150%;
}

.item__caption-copy {
  margin: 0;
}

.spotlightButtonWrap {
  padding: 0;
  margin: 0;
  margin-top: 2rem;
  height: fit-content;
  width: 100%;
  margin-top: 3rem;
}

button.spotlight {
  width: 100%;
  min-height: 75px;
  font-size: 1.5rem;
  border: none;
  color: white;
  font-weight: 800;
}

button.spotlight:hover {
  cursor: pointer;
}

/*END INITIATIVES GENERAL STYLING*/

/*START INITIATIVE 1*/
#init1 .sectionImage {
  background: url("/about/tnn/img/initiative-1.jpg");
}

#spotlight1 {
  background: linear-gradient(to right, #5c2946, #5c2946);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: 0.5s;
}

#spotlight1:hover {
  background-size: 100% 100%;
  color: #e4b132;
}
/*END INITIATIVE 1*/

/*START INITIATIVE 2*/

#init2 .sectionImage {
  background: url("/about/tnn/img/initiative-2.jpg");
}

#spotlight2 {
  background: linear-gradient(to right, #1d83a4, #1d83a4);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: 0.5s;
}
#spotlight2:hover {
  background-size: 100% 100%;
  color: #cbdb2a;
}
/*END INITIATIVE 2*/

/*START INITIATIVE 3*/

#init3 .sectionImage {
  background: url("/about/tnn/img/initiative-3.jpg");
}

#spotlight3 {
  background: linear-gradient(to right, #808285, #808285);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: 0.5s;
}

#spotlight3:hover {
  background-size: 100% 100%;
  color: #e4b132;
}
/*END INITIATIVE 3*/

/*START INITIATIVE 4*/

#init4 .sectionImage {
  background: url("/about/tnn/img/initiative-4.jpg");
}
#spotlight4 {
  background: linear-gradient(to right, #273d4b, #273d4b);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: 0.5s;
}

#spotlight4:hover {
  background-size: 100% 100%;
  color: #81bc64;
}
/*END INITIATIVE 4*/

/*START INITIATIVE 5*/
#init5 .sectionImage {
  background: url("/about/tnn/img/initiative-5.jpg");
}
/*END INITIATIVE 5*/

/*START CHALLENGES AND OPPORTUNITIES SECTION*/
#challengesAndOpportunities {
  flex-direction: column-reverse;
}

#challengesAndOpportunities .sectionText {
  padding-left: 0;
}

#challengesAndOpportunities .sectionText h2 {
  font-size: 2.5rem;
  color: #245a72;
  text-transform: uppercase;
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  margin-top: 3rem;
  padding-bottom: 0;
}

#challengesAndOpportunities .sectionText .large {
  color: #245a72;
}

#challengesAndOpportunities .sectionImage {
  background: url("/about/tnn/img/challenges_opportunities.jpg");
  background-size: cover;
  background-position: 50% 50%;
}

/*END CHALLENGES AND OPPORTUNITIES SECTION*/

/*START OUR VISION, MISSION & PLANNING PROCESS SECTION*/
#vmpp .sectionImage {
  background: url("/about/tnn/img/vmpp.jpg");
  background-size: cover;
  background-position: 50% 50%;
}

#vmpp .sectionText {
  padding-right: 0;
}

#vmpp .sectionText h2 {
  font-size: 2.5rem;
  color: #245a72;
  text-transform: uppercase;
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  margin-top: 3rem;
  padding-bottom: 0;
}
/*END OUR VISION, MISSION & PLANNING PROCESS SECTION*/

/*START SPOTLIGHTS ONLY SECTION*/
#spotlightsOnlyWrap {
  display: flex !important;
  flex-flow: wrap;
  background: #eee;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

#spotlightsOnlyWrap button {
  min-height: 10rem;
  color: #bc0b36;
  font-family: "roboto condensed", sans-serif;
}

#spotlightsOnlyWrap .spotlightIndividualWrap {
  width: 50%;
}
#spotlightsOnlyWrap button {
  padding: 20px;
  border: 0.5rem solid white;
}

/*END SPOTLIGHTS ONLY SECTION*/

/*START PEOPLE SECTION*/
#people {
  background: #eee;
  padding: 3rem;
  margin-bottom: 0;
}

#people .sectionText {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

#people .sectionText h2 {
  font-size: 2.5rem;
  color: #bc0b36;
  text-transform: uppercase;
  font-family: "roboto condensed", sans-serif;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 2.5rem;
}

#people .sectionText i {
  font-size: 0.8rem;
}

#peopleRow1 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
}

#peopleRow1 > div {
  width: 50%;
}

#peopleLeft {
  margin-right: 1rem;
}

#peopleRow2 ul {
  column-count: 2;
  column-gap: 1rem;
}

#people .sectionText h4 {
  font-size: 1.1rem;
  font-family: roboto, sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  color: #245a72;
  margin-bottom: 1rem;
  margin-top: 3rem;
  text-align: left;
}

#people .sectionText h5 {
  font-size: 1rem;
  text-transform: uppercase;
  font-family: roboto, sans-serif;
  font-weight: 700;
  margin-top: 2rem;
}

#people .sectionText ul {
  text-transform: uppercase;
  font-family: roboto, sans-serif;
  font-weight: 100;
  font-size: 0.8rem;
  list-style-type: none;
  margin-left: 0;
  text-align: left;
}

#people .sectionText ul li {
  margin-bottom: 1rem;
}

#people .sectionText ul b {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  margin-right: 0.2rem;
}
/*END PEOPLE SECTION*/

.scroll-top {
  width: 2rem;
  height: 2rem;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
  border: none;
  background: var(--color-deco);
  z-index: 3 !important;
  border-radius: none;
}

/*START SCROLL TO TOP BUTTON*/
.scroll-top:hover {
  cursor: pointer;
}

.scroll-top svg g path {
  fill: white;
}
/*END SCROLL TO TOP BUTTON*/

/*START Fix Footer Styles*/
#footer * {
  font-family: roboto, sans-serif;
  color: #696969;
}

#footer a {
  transition: 0.3s;
}

.socialMediaBar__icon {
  height: 3rem !important;
  width: 3rem !important;
}

.socialMediaBar-wrapper {
  background: #eee;
  width: 100vw;
  z-index: 1;
  margin-top: 14vh;
}

#footContainer {
  width: 100vw;
  z-index: 1;
  margin-bottom: 0;
  padding-bottom: 3rem;
}
/*END Fix Footer Styles*/