.root-hero-image {
  height: 800px;
  background-image: url(ebdccfe38e69edd5ae4c96bb8fa8be6a.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
  text-align: center;
}


.root-hero-image:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, .35);
  background-image: radial-gradient(blue 10%, transparent 10%);
  background-size: 3px 3px;
}

.root-hero-image__title,
.root-hero-image__subtitle {
  display: inline-block;
  position: relative;
  z-index: 1;
  color: white;
  font-weight: bold;
}

.root-hero-image__title {
  background: #5599ff;
  padding: .15em;
  margin-top: 6em;

  font-size: 1.75em;
  font-weight: bold;

  max-width: 80%;

  animation: title-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes title-focus-in {
  0% { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0px); opacity: 1; }
}

.root-hero-image__subtitle {
  padding: .1em .2em;
  font-weight: bold;
  font-size: 1.75em;

  max-width: 80%;
}

.root-hero-image__subtitle_blue {
  background-color: #fc2f70;
  animation: subtitle_blue-focus-in .75s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes subtitle_blue-focus-in {
  0% { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0px); opacity: 1; }
}

.root-hero-image__subtitle_yellow {
  background: #ffcc01;
  animation: subtitle_yellow-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes subtitle_yellow-focus-in {
  0% { filter: blur(12px); opacity: 0; }
  60% { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0px); opacity: 1; }
}


@media (min-width: 850px) {

  .root-hero-image__title { font-size: 2em; padding: .25em; }
  .root-hero-image__subtitle { font-size: 2em; padding: .2em .3em; }
}

.partners {
  padding: 2em 0 0 0;
  text-align: center;
}

.partners h2 {
  margin: 0 auto;
  text-align: center;
  font-size: 2.2em;
}


.partners img:hover { opacity: 1; }


.partners__logos {
  width: 100%;
  display: flex;

  overflow-x: scroll;
}

.partners__logos > a > img {
  max-width: 150px;
  display: inline-block;
  margin: 2em;
  opacity: .5;
  transition: opacity 1s;
}

@media (min-width: 950px) {

  .partners__logos { display: block; overflow: hidden; }
}