/* Hero Styles */
.hero{
    height: 417px;    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hero > .hero-content{
    height: 417px;
    background-color: rgba(87, 16, 137, 0.5);
    
}

.hero > .hero-content > h1{

    position: relative;
    top: 180px;
    text-align: center;

}

@media screen and (max-width: 1200px) {
    .hero{ height: 256px }
    .hero > .hero-content{ height: 256px; }
    .hero > .hero-content > h1{ top: 100px; }
    
}

@media screen and (max-width: 768px) {
    .hero{ height: 256px }
    .hero > .hero-content{ height: 256px; }
    .hero > .hero-content > h1{ top: 116px; }
}