body {
    letter-spacing: normal;
}

.book.font-family-1 {
    font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

.markdown-section a {
    color: #2196F3;
}

#hero {
    background-color: #2196F3;
    background linear-gradient(-20deg, #1c7fce, #2196F3, #227fca);
    color: #fff;
    padding: 4rem 2rem;
    margin-bottom: 4rem;
    text-align: center;
}

@media(min-width: 980px) {
    #hero {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: left;
    }

    #hero > div {
        margin: 0 2rem;
    }
}

#hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 0 auto;
}

#hero h3 {
    font-size: 2.25rem;
    margin: 0 auto;
}

.circle {
    width: 300px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
    margin: 0 auto 2rem;
}

.image-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: .85em;
}

.image-grid.responsive p:first-of-type {
    flex: 0 0 74.5%;
}

.image-grid.responsive p:last-of-type {
    flex: 0 0 24.5%;
}

.image-grid.half p{
    flex: 0 0 50%;
}

.image-grid.thirds p{
    flex: 0 0 50%;
}

.image-grid.quarter p{
    flex: 0 0 25%;
}

.image-grid p {
    padding: .25em;
    margin: 0 auto;
}

.image-grid img {
    border: 1px solid #efefef;
}