body {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

#mainNav {
    background-color: #262c30;
    border-bottom: 3px solid #FFF;

    .navbar-brand {
        font-family: "Noto Serif", serif;
        font-optical-sizing: auto;
        font-style: normal;
        display: block;

        img.logo {
            height: 80px;
        }
    }
}

#mainNav .navbar-nav>li.nav-item>a.nav-link.active {
    background-color: #229a92;
}

#hero {
    background-color: #229a92;
    overflow: hidden;
    position: relative;
    color: #FFF;
    padding-top: 0;
    padding-bottom: 6rem;

    text-align: center;

    img.app-screenshot {
        position: absolute;
        width: 400px;
        margin-top: -50px;
    }
}

@media screen and (min-width: 768px) {
    #hero {
        text-align: left;
    }

}



.push-down {
    padding-top: calc(6rem + 140px) !important;
}

#pricing {
    background-color: #e3e3e1;
}

#footer {
    background-color: #262c30;
    border-top: 3px solid #FFF;
}



.flash-messages {
    padding-bottom: 15px;

    .flash {
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 5px;
    }

    .flash-success {
        background-color: #bbdabb;
    }

    .flash-error {
        background-color: #f7665e;
    }

    .flash-warning {
        background-color: #f7f29b;
    }

    .flash-info {
        background-color: #a2c1e0;
    }
}