.hero-area {
    margin-top: 5em;
    height: initial;
}
.hero-area img {
    height: 500px;
}
@media (max-width: 1000px) {
    .hero-area {
        margin-top: 0;
    }
    .hero-area img {
        height: 300px;
    }
    .hero-area h1 {
        font-size: 20px;
    }
}
@media (max-width: 480px) {
    .hero-area img {
        width: 50vw;
        height: unset;
    }
    .hero-area h1 {
        font-size: 30px;
    }
}

.section.feature img {
    margin-top: 5em;
    width: 200px;
}
@media (max-width: 1100px) {
    .section.feature img {
        display: none;
    }
}

.section.feature-list img {
    width: 90%;
}
.section.feature-list .content {
    margin-top: 10px;
}
.section.feature-list .row {
    margin-bottom: 100px;
}
@media (max-width: 1100px) {
    /* put image after text */
    .section.feature-list .row {
        display: flex;
        flex-direction: column;
    }
    .section.feature-list .row .text-center {
        order: 2; 
        margin-top: 1em;
    }
}

.section {
    padding: 50px 0;
}
.section.feature {
    padding: 100px 0;
}


/* Modal - fix close button - backported from Boostrap 4 Alpha 6 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-box-align: start;
}
button.close {
    margin: -1rem -1rem -1rem auto !important;
    padding: 1rem;
}