header {
    background-color: #f5f4f0;
    background-image: url("../img/grape_bkg_wide.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* min-height: 300px; */
    min-height: 42vh;
    /* padding-top: 5%;
    padding-left: 5%; */
    padding-top: 6%;
    padding-left: 6%;

} 

#header-tagline {
    max-width: 30%;
    min-width: 275px;
}

h1, h2, h3, h4, h5, h6 {
    color: #084e8c !important;
}

body {
    /* color: #084e8c !important; */
    font-family: 'proxima-nova', sans-serif !important;
}

section {
    padding: 35px 0px;
}

footer {
    border-top: 2px solid #888;
    padding: 50px 0px;
}

.blue-btn {
    background: #0084c3;
    color: #fff;
    font-weight: 600;
}

.animation-image {
    max-width: 100%;
    width: 100%;
}

.dark-section {
    background: #f5f4f0;
}


/** Utilities **/
.reverse-order {
    flex-direction: row-reverse;
}

.fadein, .fadein-delayed {
    opacity: 0;
}

.arrowIndicator {
    background: #888;
    opacity: 0;
    height: 50px;
    width: 50px;
    position: fixed;
    z-index: 1000;
    bottom: 10px;
    left: 48%;
    border-radius: 100%;
    transition: opacity 0.5s ease-in-out;
}

#arrow {
    width: 100%;
    height: auto;
}

/** Animations **/
.fadeonload {
    animation: fadeonload 2s ease-in-out ;
}

@keyframes fadeonload {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bouncing {
    animation: bounce 2.8s infinite ease-in-out;
    opacity: 0.8 !important;
}

@keyframes bounce {
    0% {bottom: 10px;}
    25% {bottom: 25px;}
    50% {bottom: 10px; }
    100% {bottom: 10px;}
}

/** Media Queries **/
@media (max-width:400px) {
    #header-tagline {
        min-width: 215px; 
    }

    header {
        padding-top: 5%;
        padding-left: 5%;
        min-height: 60vh;
    }
}

@media (max-width:800px) {
    div[class^="col"] {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}