/* Splash panel section */

.splash {
  margin-top: -10px;
}

blue-pane {
  background: rgba(40, 98, 146, 0.5);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.splash-panel-image {
  position: absolute;
  left: 50%;
  top: 45%;
}

.splash-panel-image.logo {
  width: 450px;
  height: 156px;
  margin-left: -254px;
  margin-top: -170px;
}

.splash-panel-image.subtitle {
  color: #fff;
  font-family: "Open Sans";
  font-size: 30px;
  font-weight: 600;
  left: 0;
  letter-spacing: 7px;
  margin-top: 20px;
  text-align: center;
   text-shadow: 0px 0px 12px #000;
  text-transform: uppercase;
  width: 100%;
}

@media screen and (max-width: 1100px) {
  .panel {
    height: 500px;
  }
  .splash-panel-image.logo {
    width: 450px;
    height: 156px;
    margin-left: -254px;
    margin-top: -70px;
  }
  .splash-panel-image.subtitle {
    margin-top: 120px;
  }
}

@media screen and (max-width: 500px) {
  .splash {
    margin-top: -32px;
  }
}

@media screen and (max-width: 400px) {
  .panel {
    height: 500px;
  }
  .splash {
    margin-top: -32px;
  }
  .splash-panel-image.logo {
    width: 314px;
    height: 156px;
    margin-left: -158px;
    margin-top: -70px;
  }
  .splash-panel-image.subtitle {
    margin-top: 120px;
  }
}

.mobile-splash, .mobile-hooli-video {
  display: none;
}

@media screen and (max-width: 1100px) {
  .mobile-splash, .mobile-hooli-video {
    background-image: url("/assets/images/splash-poster.png");
    background-position: center;
    background-size: cover;
    display: block;
    height: 100%;
    min-width: 100%;
  }
  .desktop-splash, .desktop-hooli-video {
    display: none;
  }
}