* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Open Sans', sans-serif; font-size: 16px; }

img { border: 0 none; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-top: 0; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }

ul { padding-inline-start: 1.2em; }
ol { padding-inline-start: 1.3em; }

div.columns { display: flex; flex-flow: row wrap; justify-content: space-evenly; }
div.columns > .col { flex: 1 1 48%; min-width: 13em; padding: .2em .5em; }
div.columns.narrow > .col { min-width: 8em; }

.subtle { color: #666666; }
.lead { text-transform: uppercase; margin-top: 0; }
.image { background-size: cover; height: 100%; min-height: 22em; max-width: 40em; background-position: center center; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.contain { max-width: 30em; margin-left: auto; margin-right: auto; }
blockquote { font-style: italic; }


section { padding: 7em 1em; }
section h2 { font-size: 290%; }
section h3 { font-size: 150%; }
section.alternate { padding: 5em 1em; background-color: #e9e3dc; }
section > div.content { max-width: 70em; margin-left: auto; margin-right: auto; }

section.intro { padding-top: 9em; color: #111111; background-color: #e9e3dc; }
section.intro > div.content { max-width: 50em; }
section.intro h1 { font-weight: bold; font-style: italic; font-size: 380%; }
section.intro .motto { font-size: 120%; }
section.intro .more { padding: 1em 0; }
section.intro .more > a { display: inline-block; padding: 1em 4em; border-radius: 1.5em; color: #ffffff; background-color: #2f162b; text-decoration: none; }

section.approach { }

section.mario { }

section.targets { }
section.targets blockquote { margin-top: 3em; }

section.logos { padding-bottom: 0; }
section.logos > div.content { }
section.logos > div.content > .logo-list { display: flex; flex-flow: row wrap; justify-content: space-evenly; }
section.logos > div.content > .logo-list > a { display: flex; flex-flow: row nowrap; flex: 1 1 33%; min-width: 10em; align-items: center; justify-content: center; padding: 2em; }
section.logos > div.content > .logo-list > a:hover { background-color: #e9e3dc; }
section.logos > div.content > .logo-list > a > img { display: block; width: 100%; max-width: 20em; }

section.reviews { }
section.reviews > div.content { }
section.reviews > div.content > .review { max-width: 40em; display: flex; flex-flow: row nowrap; justify-content: start; background-color: #e9e3dc; padding: 1.5em; margin: 0 auto 1em; }
section.reviews > div.content > .review:hover { background-color: #eaeaea; }
section.reviews > div.content > .review > .head { flex: 0 0 6em; height: 6em; margin-right: 1em; background: url('img/face.jpg') center center; background-size: cover; border-radius: 50%; }
section.reviews > div.content > .review > .text { }
section.reviews > div.content > .review > .text > h4 { margin: 0 0 1em; text-transform: uppercase; font-weight: normal; }
section.reviews > div.content > .review > .text > p { }

footer { padding: 1em 1em; color: #ffffff; background-color: #333333; }
footer .copy { text-align: center; font-size: 80%; }
footer .subtle > a { text-decoration: none; color: inherit; }
footer .subtle > a:hover { text-decoration: underline; }

@media screen and (max-width:640px) {
    section h2 { font-size: 210%; }
    section h3 { font-size: 120%; }
}

@media screen and (max-width:400px) {
    section { padding-top: 3em; padding-bottom: 3em; }
    section.intro { padding-top: 5em; }
    section.alternate { padding-top: 3em; padding-bottom: 3em; }
}