#hero {
  width:100%;
  min-height: calc(100vh - 172px);
  margin-top:172px!important;
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: cover;
  overflow:hidden;
}

#hero h1 { color: #fff; }

#hero .wrap { z-index:2; width:100%; text-align:center; padding:20px; }

#hero svg, #hero img, #hero h1 { filter: drop-shadow(0 0 3px #333); }

@media (max-width: 1026px) {
  #hero .wrap { transform: translateY(-60px);}
}

#hero p { color: rgba(215, 210, 203, 1.0); }

#hero button:hover, #hero button:focus {
  background:#2ac5f4!important;
  color:#fff!important;
}

@media (max-width: 1024px) {
  #hero { max-height:100vh; }
}

#hero .half.overlay {
  background-color:rgba(13, 48, 84, 0.8);
  min-height: calc(100vh - 172px);
  width: 50%;
  margin:0;
}

#hero .hero-content {
  padding:60px 100px 60px 0;
  margin-left:auto;
}

#hero .hero-content h1 {
    filter: drop-shadow(0 0 3px #333);
}

@media (max-width: 1300px) {
  #hero .hero-content { width:60%; }
}

@media (max-width: 1024px) {
  #hero .half.overlay { width:100%; }
  #hero .hero-content { width:100%; padding: 60px 40px; }
}

@media (max-width: 768px) {
  #hero .hero-content { padding: 20px; }
}

@media (max-width: 500px) {
  #hero .hero-content { width:100%; padding: 10px; }
}