@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url("/assets/fonts/OpenSans-Regular.ttf") format("truetype"); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/assets/fonts/OpenSans-Italic.ttf") format("truetype"); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("/assets/fonts/OpenSans-Semibold.ttf") format("truetype"); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/OpenSans-Bold.ttf") format("truetype"); }
/* general styles */
body { margin: 0; color: #333; font-family: "Open Sans","Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }

h2 { margin-top: 1.5em; margin-bottom: 0; }

h2 + p { margin-top: 0.5em; }

a { color: #FF9C00; text-decoration: none; font-weight: bolder; }
a:hover, a:focus { color: #FF7902; }

/* bands for background across viewport */
.header-band, .features-band { background: url(../images/hive-bg.png) repeat; }

.logo-band, .main-band, .status-band { background: white; }

.faq-band { background: #DDD; }

.footer-band { background: #AAA; }

/* content divs that have a maximum width */
header { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; min-height: 40px; }

section.logo { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; }

section.features { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 120px; padding-bottom: 15px; }

@media screen and (max-width: 500px) { section.features { padding-top: 30px; } }
main { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 2em; padding-bottom: 2em; }

section.faq, section.status { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 0.2em; padding-bottom: 2em; }

footer { max-width: 900px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; }

footer a { color: black; }
footer a:hover, footer a:focus { color: #666; }

/* features section with flex boxes */
section.features { display: flex; flex-flow: row wrap; }

section.features > div { flex: 1 1 auto; max-width: 260px; margin: 0 40px 15px 0; color: white; font-weight: 600; }

section.features > div > h2 { margin-top: 0; }

/* specific formatting */
section.logo img { max-width: 90%; }

.welcome { float: right; margin: 3em 1em 1em 4em; }

@media screen and (max-width: 500px) { .welcome { float: none; margin: 1em 4em 1em 1em; text-align: center; } }
footer .icon { height: 2em; }