body {
      font: 20px Montserrat, sans-serif;
      line-height: 1.6;
      /* color: #f5f6f7; */
  }

  p {font-size: 16px;}
  p2 {font-size: 12px;}
  .margin {margin-bottom: 45px;}
  .bg-1 { 
      background-color: #708090; /* light slategray: #778899; 708090; also see: steelblue #1abc9c; Green #6a7d91; */
      color: #ffffff;
  }
  .bg-2 { 
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;
  }
  .bg-3 { 
      background-color: #ffffff; /* White */
      color: #555555;
  }
  .bg-4 { 
      background-color: #1c1d35; /* Black Gray #2f2f2f 212135*/
      color: #fff;
  }
  .bg-grey {
      background-color: #f6f6f6;
  }
  .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 18px;
      letter-spacing: 2px;
      color: #3b5387;
  }
  .navbar-nav  li a:hover {
      color: #3b5387 !important;
  }

  .axis {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .axis--y path {
    display: none;
  }

  .bar {
    fill: #3182bd;
    fill-opacity: .9;
  }

  .wld {
    fill: #9ecae1;
  }
  
  .chart-title {
    margin-bottom: 0;
  }
  
  .source {
    margin-top: 0;
    font-size: 11px;
  }

  .mainhero {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: black;
  background-image: url("/assets/images/super_bert_charts.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

  .mainhero h1 {
  margin-top: 200px;
  font-size: 0.1rem;
  animation: title 1.2s  linear;
  color: darkgrey;
}

.mainhero h1 {
    animation: smaller-title 1.2s forwards linear;
}
.mainhero p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle 1.2s forwards linear;
  animation-delay: 1.2s;
  color: darkgrey;
}

.hero2 {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: black;
  background-image: url("/assets/images/market_pen.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.hero2 h1 {
  margin-top: 200px;
  font-size: 0.1rem;
  animation: title 1.2s  linear;
  color: darkgrey;
}

.hero2 h1 {
    animation: smaller-title 1.2s forwards linear;
}
.hero2 p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle 1.2s forwards linear;
  animation-delay: 1.2s;
  color: darkgrey;
}

  .hero {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: black;
  background-image: url("/assets/images/calculator.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.hero h1 {
  margin-top: 200px;
  font-size: 0.1rem;
  animation: title 1.2s  linear;
  color: white;
}

.hero p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle 1.2s forwards linear;
  animation-delay: 1.2s;
  color: white;
}
.hero h1 {
    animation: smaller-title 1.2s forwards linear;
}

.maphero {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: black;
  background-image: url("/assets/images/moneymap.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.maphero h1 {
  margin-top: 200px;
  font-size: 0.1rem;
  animation: title 1.2s  linear;
  color: white;
}

.maphero p {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle 1.2s forwards linear;
  animation-delay: 1.2s;
  color: white;
}
.maphero h1 {
    animation: smaller-title 1.2s forwards linear;
}

.wwiihero {
  position: relative;
  height: 550px;
  padding: 20px;
  margin: 0;
  background: black;
  background-image: url("/assets/images/wwiimemorial.jpg");
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
}

.wwiihero h1 {
  margin-top: 200px;
  font-size: 0.1rem;
  /* animation: title 1.2s  linear; */
  color: white;
}

.wwiihero h2 {
  font-size: 2rem;
  opacity: 0;
  animation: subtitle 1.2s forwards linear;
  animation-delay: 0.8s;
  color: white;
}
.wwiihero h1 {
    animation: smaller-title 0.6s forwards linear;
}

.piggyhero {
    position: relative;
    height: 550px;
    padding: 20px;
    margin: 0;
    background: black;
    background-image: url("/assets/images/piggybank.jpg");
    background-attachment: fixed;
    background-position: bottom center;
    background-size: cover;
  }
  
  .piggyhero h1 {
    margin-top: 200px;
    font-size: 0.1rem;
    animation: title 1.2s  linear;
    color: white;
  }
  
  .piggyhero h2 {
    font-size: 2rem;
    opacity: 0;
    animation: subtitle 1.2s forwards linear;
    animation-delay: 0.8s;
    color: white;
  }
  .piggyhero h1 {
      animation: smaller-title 0.6s forwards linear;
  }

  form {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  svg {
    font: 10px sans-serif;
  }

@keyframes title {
  from {
    opacity: 0;
  }

  to {
    font-size: 7.5rem;
    opacity: 1;
  }
}

@keyframes smaller-title {
  from {
    opacity: 0;
  }

  to {
    font-size: 5.5rem;
    opacity: 1;
  }
}

@keyframes subtitle {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}