.hero {
    height: 35vh;
}
.hero-background {
    height: 35vh;
}
.hero-overlay {
    height: 25vh;
}

@media (min-width: 576px) {
    .hero-overlay {
        height: 40vh;
    }
}

@media (orientation: landscape) {
    .hero {
        height: 30vh;
    }
    .hero-background {
        height: 30vh;
    }
    .hero-overlay {
        height: 22vh;
    }
}

@media (min-width: 768px) {
    .hero {
        height: 35vh;
    }
    .hero-background {
        height: 35vh;
    }
    .hero-overlay {
        height: 25vh;
    }
}

@media (min-height: 1000px) and (orientation: portrait) {
    .content:before {
        top: -100px;
    }
}

p {
    text-align: center;
    padding: 0 20px;
}

.hero,
.hero-background,
.hero-overlay {
    min-height: 500px;
}

.hero-overlay {
    position: relative;
}

.hero-title {
    padding: 0 15px;
    position: relative;
    top: 40%;
}

.hero-title em {
    color: rgba(255,255,255,0.70);
}