* {
    box-sizing: border-box;
}

.hero {
    background-image: linear-gradient(rgba(0, 102, 184, 0.8), rgba(0, 102, 184, 0.8)), url('../img/bg.gif');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.bi {
    font-size: 42px;
    color: #fff;
    bottom: 27px;
    position: absolute;
    left: 50%;
    margin-left: -18px;
    animation-name:arrow;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-play-state:running;
    -webkit-animation-name:arrow;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:running;
}

@keyframes arrow
{
    0%   {bottom:0;}
    75% {bottom:90px;}
    100% {bottom:0;}
}
@-webkit-keyframes arrow
{
    0%   {bottom:0;}
    75% {bottom:90px;}
    100% {bottom:0;}
}

.navbar {
    background-color: #0066b8;
}

.parallax {
    background-image: linear-gradient(rgba(0, 102, 184, 0.8), rgba(0, 102, 184, 0.8)), url('../img/parallax.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    height: 30vh; /* 100% of viewport height */
    margin: 0 auto;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.contact-map {
    height: 30vh;
    width: 100%;
}