:root {
  --green: #053C32;
  --indigo: #4b0082;
  --orange: #d6370c;
  --light-gray: #f8f9fa;
  --font-family-sans-serif: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  font-family: 'Work Sans', sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

header.masthead {
  padding-top: 6rem;
  padding-bottom: 12rem;
  background: url("../assets/img/bg-masthead-l-cropped.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

@media all and (orientation: portrait) { 
  header.masthead {
    background-attachment: scroll;
  }
}

@media (min-width: 1px) {
  header.masthead h1 {
    font-size: 2rem;
  }
  header.masthead h2 {
    font-size: 0.7rem;
  }
  header.masthead p {
    font-size: 0.7rem;
  }
}
@media (min-width: 500px) {
  header.masthead h1 {
    font-size: 3rem;
  }
  header.masthead h2 {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .text-right-md {
    text-align: right;
  }
}

@media (min-width: 992px) {
  header.masthead {
    height: 100vh;
    min-height: 40rem;
    padding-top: 4.5rem;
    padding-bottom: 0;
  }
  header.masthead p {
    font-size: 1.15rem;
  }
  header.masthead h1 {
    font-size: 4.5rem;
  }
  header.masthead h2 {
    font-size: 1.48rem;
  }
}
@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 5rem;
  }
  header.masthead h2 {
    font-size: 1.65rem;
  }
}

@media (min-width: 1600px) {
  header.masthead h1 {
    font-size: 6rem;
  }
  header.masthead h2 {
    font-size: 2rem;
  }
}

.text-green {
  color: var(--green) !important;
}

hr.divider {
  max-width: 100px;
  border-width: 2px;
  border-color: var(--indigo);
}

/* .text-white-75 {
  color: rgba(255, 255, 255, 0.75);
} */

.page-section {
  padding: 3rem 0;
}

.horizontal-separator {
  padding: 1px 0;
}

.material-icons.md-48 {
  font-size: 48px;
}

.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54); 
}

a {
  color: var(--indigo);
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: var(--orange);
  text-decoration: none;
}

a:not([href]) {
  color: inherit;
  text-decoration: none;
}
a:not([href]):hover {
  color: inherit;
  text-decoration: none;
}

.bg-indigo {
  background-color: var(--indigo) !important;
}

.bg-green {
  background-color: var(--green) !important;
}

.bg-light-gray {
  background-color: var(--light-gray) !important;
}

.text-light-gray {
  color: var(--light-gray) !important;
}