@font-face {
  font-family: 'Monument Extended';
  src: url('./fonts/MonumentExtended-Ultralight.woff2') format('woff2'),
      url('./fonts/MonumentExtended-Ultralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Extended';
  src: url('./fonts/MonumentExtended-Ultrabold.woff2') format('woff2'),
      url('./fonts/MonumentExtended-Ultrabold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.4em;
  color: #ffffff;
  background-color: rgba(41, 41, 41, 0.9);
}
@media (min-width: 768px) {
  body {
    font-size: 1.5625rem;
  }
}

p {
  margin-bottom: 1em;
}

h1 {
  font-family: "Monument Extended", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.2em;
  letter-spacing: 4px;
  text-transform: uppercase;
}

@media (min-width: 375px) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  h1 { 
    font-size:  4.375rem;
  }
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  color: #292929;
  font-size: 2rem;
  line-height: 1.2em;
  margin-bottom: 2rem;
}

@media (min-width: 375px) {
  h2 {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  h2 { 
    font-size:  3.125rem;
  }
}


h3 {
  font-family: "Monument Extended", sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  color: #fa299d;
}

/* Body */
#header {
  background-color: #fa299d;
}


.logo {
  width: 100px;
  height: auto;
}

.top-nav a {
  font-size: 1.75rem;
  text-transform: uppercase;
  font-weight: 500;
  color: #FAD705;
}
@media (min-width: 768px) {
  .top-nav a { 
    font-size: 1.25rem;
  }
}

.top-nav a.active,
.top-nav a:hover {
  color: #ffffff;
}

.nav-wrapper {
  background-color: #fa299d;
}
@media (min-width: 768px) {
  .nav-wrapper {
    background-color:transparent;
  }
}


.hamburger {
  padding: 0;
  height: 25px;
  margin-top: 3px;
}
@media (min-width: 768px) {
  .hamburger {
    display:none;
  }
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before,
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
  background-color: #FAD705;
}

section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.home-section {
  background: url(./images/home_hero.jpg) no-repeat center center;
  background-size:cover;
}

.about-section {
  background: url(./images/about_hero.jpg) no-repeat center center;
  background-size:cover;
}

.team-section {
  background: url(./images/staff_hero.jpg) no-repeat center center;
  background-size:cover;
}

.hero-section:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: rgb(250, 41, 157, 0.43);
}

.second-nav a {
  background-color: #FAD705;
  color: #FA299D;
  font-size: 1.25rem;
  text-transform: uppercase;
  width: 180px;
  height:160px;
  border-radius: 70px;
}

.second-nav a:hover {
  color: #FAD705;
  background-color: #FA299D;
}


.link:hover {
  color: #FAD705;
}

.content-section {
  color: #292929;
}

.profile p {
  font-size: 1rem;
  line-height: 1.4em;
}

.profile h3 {
  margin-bottom: 0.5rem;
}

.profile h4 {
  margin-bottom: 1rem;
}

.expanding-content-trigger {
  font-size: 1rem;
  text-decoration: underline;
}

.expanding-content-trigger:focus {
  outline: none;
}

@media (min-width: 768px) {
  .expanding-content {
    display: block !important;
  }  
}