.section {
  padding: 50px;
}

.section.video-background {
  position: relative;
  overflow: hidden;
}

.section.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 60%;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
  color: red;
  cursor: pointer;
}

/* for the video overview page */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  margin-bottom: 2em;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* The following are used for the animated typing in the header */
.display-5-5 {
  font-size: 3.5em;
}

.typed-cursor {
  color: white
}

/* Font for headings */
.barlow-condensed-regular {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*
Creates a scroll indicator to indicate to the user that they should scroll down
if they are at the top of the page
*/
.scroll-downs {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 20px;
  animation: scroll-downs 2.5s infinite;
}

@keyframes scroll-downs {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

.semi-transparent-bg {
  background-color: rgba(255, 255, 255, 0.8); /* white background with 80% opacity */
}

.blog {
  h1 {
    font-size: 2.0em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.25em;
  }
  h4 {
    font-size: 1.2em;
  }
}

.shadow-25 {
  box-shadow: 0 0 25px rgba(140,152,164,.25)!important
}