h1, h2, h3 {
    font-family: serenity, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #014581;
    color: #025593;
}
/*
  logo blue = 014581
  logo grey = aeafb2
*/

h1 { margin-bottom: 1.5rem; }

img { max-width:100%; }

.container-fluid { padding-bottom:2rem; }

.hidden { display:none; }
div.hpad { padding: 0 3rem; }
div.vpad { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/*-- header --*/

img.header-logo { max-width: 350px; }

.nav {
    height:100%;
    align-items:center;
    font-family: serenity, sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
}
.nav-pills { justify-content:end; }
.nav-pills .nav-link {
  color: #014581;
}
.nav-pills .nav-link:hover {
  color: #007bff;
}
.nav-pills .nav-link.active {
    background-color: #014581;
 }
 .nav-pills .nav-link.active:hover {
   color: white;
 }

 @media screen and (max-width: 820px){
   div.top .col, div.top .nav-pills  { text-align:center; justify-content:center; }
   img.header-logo { margin-bottom: 3rem; }
   div.top {
     flex-direction: column;
     padding-top:2rem;
   }
 }

/*-- banner --*/

div.banner { margin-right: -15px; margin-left: -15px; }
/* banner image from https://commons.wikimedia.org/wiki/File:High_Steel_Bridge,_Shelton.jpg */
div.banner-box {
      height: 250px;
      background-image:url("img/High_Steel_Bridge-640.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
}
/* different sizes of banner img */
@media screen and (min-width: 641px){
  div.banner-box { height: 350px; background-image:url("img/High_Steel_Bridge-800.jpg"); }
}
@media screen and (min-width: 1024px){
  div.banner-box { height: 450px; background-image:url("img/High_Steel_Bridge-1024.jpg"); }
}
@media screen and (min-width: 1280px){
  div.banner-box { background-image:url("img/High_Steel_Bridge-1280.jpg"); }
}
@media screen and (min-width: 2049px){
  div.banner-box { background-image:url("img/High_Steel_Bridge-2050.jpg"); }
}

div.photo-credit {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    font-size: .9rem;
    font-style: italic;
    position: relative;
    bottom: 35px;
    height: 35px;
    line-height: 35px;
    padding-right: 18px;
    text-align: right;
}
div.photo-credit a { color: white; }

/*-- content --*/

.drop-cap {
  display: block;
}
.drop-cap::first-letter {
  color: #014581;
  font-family: "Times New Roman", Times, serif;
  font-size: 6rem;
  line-height: 4rem;
  float: left;
  margin-right: 5px;
}

div.intro {
/*  background-color: #eee;*/
  position: relative;
  margin-top: -35px;
}
div.intro-blurb {
  /* smaller screens get simpler intro */
  font-family: serenity, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size:1.5rem;
  color: #777;
  margin: 1rem;
}

@media all and (min-width: 985px) {
  /* larger screens fancier intro */
  div.intro-blurb {
    margin: 2.5rem auto 2rem;
    max-width: 800px;
    text-align: justify;
    text-justify: inter-word;
    border-left: 4px solid #ddd;
    padding-left:2.5rem;
  }
}

.btn-primary {
    padding: 12px 24px;
    background-color: #014581;
    border-color: #000;
}
.contact-btn {
   text-align:center;
}