html, body {
  margin: 0;
  padding: 0; }

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0; }

.drop-shadow, #home #description, #home #email-capture, #updates, #privacy {
  -moz-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
  box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px; }

html {
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
  color: #212121; }

html, body {
  min-height: 100vh;
  position: relative; }

header, main, footer {
  display: block; }

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto; }

.clearfix:after {
  content: "";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  font-size: 0; }

.paper-input {
  position: relative; }
  .paper-input input {
    display: block;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #757575;
    width: 100%;
    box-sizing: border-box; }
    .paper-input input:focus {
      outline: none; }
  .paper-input label {
    color: #999;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    -ms-transition: bottom 300ms ease-in-out, font-size 300ms ease-in-out, color 300ms ease-in-out;
    -o-transition: bottom 300ms ease-in-out, font-size 300ms ease-in-out, color 300ms ease-in-out;
    -webkit-transition: bottom 300ms ease-in-out, font-size 300ms ease-in-out, color 300ms ease-in-out;
    -moz-transition: bottom 300ms ease-in-out, font-size 300ms ease-in-out, color 300ms ease-in-out;
    transition: bottom 300ms ease-in-out, font-size 300ms ease-in-out, color 300ms ease-in-out; }
  .paper-input .bar {
    width: 100%;
    position: relative;
    display: block;
    line-height: 0; }
    .paper-input .bar:before, .paper-input .bar:after {
      content: '';
      width: 0;
      position: absolute;
      background: #5264AE; }
    .paper-input .bar:before {
      left: 50%;
      -ms-transition: left 300ms ease-in-out, width 300ms ease-in-out;
      -o-transition: left 300ms ease-in-out, width 300ms ease-in-out;
      -webkit-transition: left 300ms ease-in-out, width 300ms ease-in-out;
      -moz-transition: left 300ms ease-in-out, width 300ms ease-in-out;
      transition: left 300ms ease-in-out, width 300ms ease-in-out; }
    .paper-input .bar:after {
      right: 50%;
      -ms-transition: right 300ms ease-in-out, width 300ms ease-in-out;
      -o-transition: right 300ms ease-in-out, width 300ms ease-in-out;
      -webkit-transition: right 300ms ease-in-out, width 300ms ease-in-out;
      -moz-transition: right 300ms ease-in-out, width 300ms ease-in-out;
      transition: right 300ms ease-in-out, width 300ms ease-in-out; }
  .paper-input input:focus ~ .bar:before, .paper-input input:focus ~ .bar:after {
    width: 50%; }
  .paper-input input:focus ~ .ink {
    -moz-animation: input-ink-effect 300ms ease-in-out;
    -webkit-animation: input-ink-effect 300ms ease-in-out;
    -o-animation: input-ink-effect 300ms ease-in-out;
    -ms-animation: input-ink-effect 300ms ease-in-out;
    animation: input-ink-effect 300ms ease-in-out; }
  .paper-input .ink {
    position: absolute;
    left: 0;
    pointer-events: none;
    opacity: 0.5; }

@-moz-keyframes input-ink-effect {
  from {
    background: #5264AE;
    width: 100px; }
  to {
    width: 0;
    background: transparent; } }

@-webkit-keyframes input-ink-effect {
  from {
    background: #5264AE;
    width: 100px; }
  to {
    width: 0;
    background: transparent; } }

@-o-keyframes input-ink-effect {
  from {
    background: #5264AE;
    width: 100px; }
  to {
    width: 0;
    background: transparent; } }

@-ms-keyframes input-ink-effect {
  from {
    background: #5264AE;
    width: 100px; }
  to {
    width: 0;
    background: transparent; } }

@keyframes input-ink-effect {
  from {
    background: #5264AE;
    width: 100px; }
  to {
    width: 0;
    background: transparent; } }

.paper-input {
  margin-top: 20px; }
  .paper-input input {
    font-size: 18px;
    padding: 8px; }
  .paper-input label {
    font-size: 18px;
    padding: 8px; }
  .paper-input input:focus ~ label, .paper-input input:valid ~ label, .paper-input input[populated] ~ label {
    font-size: 12px;
    bottom: 26px;
    color: #5264AE; }
  .paper-input .bar:before, .paper-input .bar:after {
    height: 2px; }
  .paper-input .ink {
    height: 12px;
    width: 96px;
    bottom: 10px; }

body.no-pointer-events .paper-input label {
  bottom: 26px; }

body.no-pointer-events .paper-input .ink {
  display: none; }

#nav {
  position: relative;
  background-color: #4CAF50;
  color: #fff;
  float: right; }
  #nav, #nav #tabs {
    margin: 0;
    padding: 0; }
  #nav .selectionBar {
    position: absolute;
    bottom: 0;
    width: 0;
    left: 0;
    transition: width 300ms ease-in-out, left 300ms ease-in-out;
    height: 2px;
    background-color: #fff; }
  #nav #tabs > * {
    padding: 12px;
    display: inline-block;
    *display: inline; }
    #nav #tabs > * a {
      color: #fff;
      text-decoration: none; }

#header {
  background-color: #4CAF50;
  color: #fff;
  -moz-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
  box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px; }

#name {
  padding: 0 12px;
  margin: 0;
  font-weight: normal;
  display: inline-block;
  *display: inline; }
  #name a {
    color: inherit;
    text-decoration: none; }

#home .screenshot {
  float: left;
  max-width: 100%; }

#home #description {
  background-color: #fff;
  color: #212121;
  padding: 8px; }

#home #email-capture {
  padding: 8px;
  margin-top: 8px;
  background-color: #fff;
  color: #212121; }
  #home #email-capture .action {
    position: relative;
    box-sizing: content-box; }
    #home #email-capture .action .paper-input-label {
      float: right;
      padding: 8px;
      background-color: #03A9F4;
      color: #fff;
      margin-top: 4px;
      box-shadow: 0 0 2px #212121;
      border: 0; }
    #home #email-capture .action:after {
      content: '';
      clear: both; }

body.no-calc #home .screenshot {
  max-width: 50%; }

body.no-calc #home #email-capture {
  display: inline;
  display: inline-block;
  zoom: 1;
  position: relative;
  max-width: 40%; }
  body.no-calc #home #email-capture * {
    max-width: 100%; }

@media (max-width: 767px) {
  #home .screenshot {
    float: none;
    width: 100%; } }

@media (min-width: 768px) {
  #home .screenshot {
    width: 50%; }
  #home #description, #home #email-capture {
    display: inline-block;
    *display: inline;
    margin-left: 8px;
    width: 40%;
    width: calc(50% - 24px); } }

#updates {
  background-color: #fff;
  color: #212121; }

#privacy {
  background-color: #fff;
  color: #212121; }

a {
  color: #212121; }

p {
  padding-top: 12px; }
  p:first-of-type {
    padding-top: 0; }

#privacy {
  background-color: #fff;
  color: #212121; }
  #privacy a {
    color: #212121; }
  #privacy p {
    padding-top: 12px; }
    #privacy p:first-of-type {
      padding-top: 0; }

#sections > * {
  display: none;
  visibility: hidden;
  padding: 12px;
  box-sizing: content-box; }
  #sections > *[selected], #sections > *.selected {
    display: block;
    visibility: visible; }

main > .wrapper > *:not(#sections), #home, #updates, #privacy, #error-page {
  padding: 8px;
  margin: 8px; }

#social-links .plus, #social-links .facebook, #social-links .twitter, #social-links .youtube, #social-links .rss {
  background: url("/images/social.png");
  background-size: cover;
  background-repeat: no-repeat; }

#social-links .plus {
  background-position: 0 25%; }

#social-links .facebook {
  background-position: 0 0; }

#social-links .twitter {
  background-position: 0 75%; }

#social-links .youtube {
  background-position: 0 100%; }

#social-links .rss {
  background-position: 0 50%; }

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  color: #fff;
  -moz-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px -4px 8px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px -4px 8px 0px;
  box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px, rgba(0, 0, 0, 0.278431) 0px -4px 8px 0px; }
  footer #social-links {
    list-style: none;
    float: right;
    margin: 0;
    padding: 0; }
    footer #social-links li {
      display: inline-block;
      *display: inline; }

main {
  padding-bottom: 48px; }

footer {
  padding: 8px;
  line-height: 32px; }
  footer #social-links {
    line-height: normal; }
    footer #social-links li a div {
      width: 32px;
      height: 32px; }

@media (max-width: 767px) and (orientation: landscape) {
  main {
    padding-bottom: 56px; }
  footer {
    padding: 8px;
    line-height: 40px; }
    footer #social-links {
      line-height: normal; }
      footer #social-links li a div {
        width: 40px;
        height: 40px; } }

@media (min-width: 768px) {
  main {
    padding-bottom: 64px; }
  footer {
    padding: 8px;
    line-height: 48px; }
    footer #social-links {
      line-height: normal; }
      footer #social-links li a div {
        width: 48px;
        height: 48px; } }