.hero {
    padding-top: 5vh;
    display: grid;
    align-items: center;
    background-color: red;
    height: 30vh;
    color: seashell;
}
.hero::after{
    position: relative;
    top: 5vh;
    background-color: red;
    height: 10vh;
    content: " ";
    z-index: -99;
}
.card{
    background-color: #fff9e7;
    width: 90%;
    min-height: 10vh;
    margin: auto;
    border-radius: .5em;
    box-shadow: black, 2 2 2 2;
    box-shadow: 0px 5px 5px 0px #e2e2e2;
    padding-top: 1em;
    padding-bottom: 2em;
    margin-bottom: 1em;
}
#map{
    height: 50vh;
}
.action-bar-spacer{
    content: ' ';
    height: 12vh;
}
.action-bar {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: orangered;
    height: 10vh;
    position: fixed;
    top: 90vh;
    width: 100%;
}
.action-btn, .spacer {
    color: white;
    float: left;
    display: block;
    padding: 3vh 8.28%;
}
a.action-btn:hover{
    color: wheat;
    background: red;
}
.fab {
    background: darkorange;
    border-radius: 50%;
    width: 12vh;
    height: 12vh;
    padding: .4em 0.7em !important;
    margin: 0;
    top: 87vh;
    left: 40%;
    position: fixed;
    font-size: xx-large;
}