.container {
  max-width: 960px;
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: #0e5da9;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 5px;
  border-color: gray;
  border-bottom-style: solid;
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}
.site-header h4 {
  color: white;
  display: inline-block;
  padding-top: 8px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
}

.hero-logo-container {
  height: 175px;
  padding-left: 0px;
  padding-right: 0px;
  justify-content: center;
}

#hero {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

#tagline {
  padding-left: 5vw;
  padding-right: 5vw;
}

#hero-logo {
  height: 100%;
}

.bg-royal {
  background-color: #0e5da9;
}
.bg-gray {
  background-color: #727272;
}

.work-sample {
  padding-top: 5%;
  width: 90%;
  filter: saturate(75%);
  /*filter: blur(1.5rem);*/
}

.icon {
  width: 24px;
  height: 24px;
  filter: saturate(500%);
}

/*
 * Extra utilities
 */

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }

  .site-header h4 {
    font-size: 1.5rem;
  }

  .hero-logo-container {
    margin-top: -50px;
  }

  #hero-logo {
    /*display: inline-flex;*/
    height: 130%;
  }


}

.overflow-hidden { overflow: hidden; }