html body { font-family: "Avenir", 'helvetica neue', 'helvetica', 'arial' !important; }

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: "Avenir", 'helvetica neue', 'helvetica', 'arial' !important; }

.container { max-width: 28rem; }
@media (min-width: 38em) { .container { max-width: 32rem; } }
@media (min-width: 56em) { .container { max-width: 41rem; } }

.callout { margin: 2rem; border-top: 2px solid #eeeeee; }

@-webkit-keyframes wiggle { from { -webkit-transform: rotateZ(10deg); opacity: 1; }
  50% { -webkit-transform: rotateZ(-10deg); }
  to { -webkit-transform: rotateZ(10deg); } }
.heading-lead { text-align: center; margin: 4rem 0; font-size: 115%; }
.heading-lead img { height: 3rem; display: inline-block; }
.heading-lead img:hover { -webkit-animation-name: wiggle; -webkit-animation-duration: .4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease; }
.heading-lead h1 { margin-bottom: 2rem; }
.heading-lead p { padding: 0 3rem; }

.heading-secondary { text-align: center; margin: 1rem 0; }
.heading-secondary h4 { color: #777777; }

.footer { font-size: 80%; text-align: center; color: #848484; margin-bottom: 1rem; }

.masthead-logo { height: 20px; display: inline-block; margin: 0 3px 0 0; }

.press { margin: 1rem 0; text-align: center; }
.press img { display: inline-block; }
.press .quote { text-align: left; padding: 0.25em 0; }
.press .author { text-align: left; margin-top: 0.25em; }
.press .author img { width: 30px; height: 30px; vertical-align: middle; margin: 0; padding: 0; }
.press .story { width: 60%; margin: 2rem auto; }
.press .story .press-logo { width: 200px; display: inline-block; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.7; }
.press .story a:hover .press-logo { opacity: 1; -webkit-filter: none; -moz-filter: none; filter: none; }

.page h1 { margin-bottom: 1em; }

.front-page table tbody { text-align: left; }

section { clear: both; display: inline-block; }
section.roomy { padding: 2rem 0; }
section .weak { color: #777777; }
section h3 { font-size: 1.15rem; }
@media (min-width: 38em) { section .section-left { width: 50%; float: left; padding-right: 1rem; }
  section .section-left.narrow { width: 25%; }
  section .section-left.narrow img { margin-top: 1rem; } }
@media (min-width: 38em) { section .section-right { width: 50%; float: left; padding-left: 1rem; }
  section .section-right.wide { width: 75%; } }
section .section-right .screenshot img { border-top-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; }

.badge-date { display: inline; font-size: 60%; font-weight: 700; color: #777777; text-align: center; white-space: nowrap; vertical-align: baseline; vertical-align: middle; }

.badge { display: inline; padding: .2em .5em .3em; font-size: 60%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; vertical-align: middle; background: #61AE24; }

.sidebar-logo img { width: 30%; margin: 1.0rem auto 0 auto; }

.sidebar-footer { position: absolute; bottom: 0; }

.sidebar-footer-nav-item { display: block; padding: .5rem 1rem; opacity: 0.75; }

.screenshot-lead { text-align: center; position: relative; }
.screenshot-lead h2 { margin: 3rem 0; }
.screenshot-lead img { box-shadow: 1px 1px 5px black; }
.screenshot-lead .video-control { text-align: center; position: absolute; display: block; background: rgba(0, 0, 0, 0.8); border-radius: 400px; transition-duration: 0.2s; padding-top: 35px; color: #fff; width: 130px; top: 30%; left: 30%; height: 100px; }
.screenshot-lead .video-control .video-text { display: none; }
@media (min-width: 38em) { .screenshot-lead .video-control { width: 280px; top: 40%; left: 30%; height: 100px; }
  .screenshot-lead .video-control .video-text { display: inline; } }
@media (min-width: 56em) { .screenshot-lead .video-control { width: 350px; font-size: 100%; top: 40%; left: 30%; height: 100px; }
  .screenshot-lead .video-control .video-text { display: inline; } }
.screenshot-lead .video-control:hover { cursor: pointer; }

#video-player-iframe { top: 100px; position: fixed; left: 50%; text-align: center; height: 480px; z-index: 2; padding: 0 60px; width: 58%; margin: 0 0 0 -29%; }

.modal-block { width: 100%; height: 100%; position: fixed; background-color: #000; opacity: 0.75; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; }

.screenshot-dock { margin-top: 1.5rem; padding: 0.5rem 0; }
.screenshot-dock img { box-shadow: none; border-radius: 0; border-bottom: 1px solid lightgrey; }

.highlight2 { border-bottom: 1px solid #cbeefa; box-shadow: inset 0 -4px 0 #cbeefa; color: inherit; }

a:hover .highlight2 { box-shadow: none; border-bottom: none; }

.get-fetching { text-align: center; margin: 2rem 0; }

.notes { margin-top: 2rem; opacity: 0.85; }

.login { font-size: 80%; }

.pure-button { border-radius: 4px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
.pure-button .fa-left { margin-right: 0.2rem; }
.pure-button.pay-attention { color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: #61AE24; text-transform: uppercase; }
.pure-button.pay-attention:hover { background: #49841b; }

a.pure-button:hover { text-decoration: none; }

.feature-table { border: none; }
.feature-table thead { border-top: 2px solid #333333; }
.feature-table .feature-icon { text-align: center; }
@media (min-width: 20em) { .feature-table .feature-icon { width: 4rem; }
  .feature-table tfoot { font-size: 65%; } }
@media (min-width: 56em) { .feature-table .feature-icon { width: 8rem; }
  .feature-table tfoot { font-size: 100%; } }
.feature-table .get-started { display: block; margin-top: 0.75rem; text-transform: uppercase; }
.feature-table tfoot tr { border: none; }
.feature-table tfoot td { padding: 0.75rem; border: none; }

#download--form input { font-size: 100%; }

.get-started--promo-message { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; }
.get-started--promo-message em { opacity: 0.75; }
.get-started--promo-message .message { margin-bottom: 0; background-color: #cbeefa; display: inline-block; width: 26rem; color: #000; }
@media (min-width: 38em) { .get-started--promo-message .message { width: 30rem; } }
@media (min-width: 56em) { .get-started--promo-message .message { width: 39rem; } }

.todo-list { list-style-type: none; }
.todo-list li:before { display: inline-block; font-family: FontAwesome; content: "\f00c"; margin: 0 7px 0 -15px; color: #61AE24; }
.todo-list li.negative:before { content: ""; margin-right: 28px; }
.todo-list li.negative { color: #777777; margin-bottom: 10px !important; }

.help--navigation { text-align: center; margin-bottom: 3em; }
.help--navigation a { padding: 0 0.5em; border-right: 2px solid #eeeeee; }
.help--navigation a:last-child { border-right: 0; }
