/*

    IMPORTANT

    This file is specifically for our beta tester home page.
    It probably will not apply to the rest of the site.
    Use caution when reading this code and be careful not to make assumptions about the rest of the site.

*/
/*
When setting the primary font stack, apply it to the Pure grid units along
with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html,
button,
input,
select,
textarea,
.pure-g [class*="pure-u"] {
  /* Set your content font stack here: */
  font-family: 'Roboto', sans-serif;
}
body {
  background-color: #777777;
}
.nobr {
  white-space: nowrap;
}
@media all {
  .content-safe {
    margin: 0 auto;
    width: 468px;
  }
}
@media all and (max-width: 568px) {
  .content-safe {
    width: 90%;
  }
}
@media all and (min-width: 568px) {
  .content-safe {
    width: 468px;
  }
}
@media all and (min-width: 768px) {
  .content-safe {
    width: 668px;
  }
}
@media all and (min-width: 1024px) {
  .content-safe {
    width: 924px;
  }
}
#login-button-container {
  background-color: #666666;
  padding: 10px;
  text-align: right;
  color: #dddddd;
  text-align: center;
}
@media (min-width: 768px) {
  #login-button-container {
    text-align: right;
  }
}
#login-button-container a {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  border-bottom: solid 1px #999999;
}
#logo-container {
  text-align: center;
  background-color: #ffffff;
  padding: 1em 0 1em 0;
}
#logo-container img {
  width: 256px;
  height: auto;
}
#banner {
  text-align: center;
  background-color: #ff9300;
  padding: 20px 0 20px 0;
  color: white;
}
#banner h1 {
  margin: 0;
  padding: 0;
  font-size: 32px;
  font-weight: 500;
}
#banner .team {
  margin: 10px 0px 0px 0px;
  padding: 0;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
}
#banner a {
  color: white;
  text-decoration: none;
  border-bottom: 1px dotted #ffce8c;
}
#features {
  background-size: cover;
  background-position: right center;
  padding: 30px 0px 30px 0px;
}
@media all and (max-width: 568px) {
  #features {
    background-position: 80% center;
  }
}
#features .features-box {
  display: inline-block;
  padding: 25px 20px 10px 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}
#features h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 0 0 0 5px;
}
#features li {
  font-size: 16px;
  line-height: 130%;
  margin-bottom: 8px;
}
#main {
  background-color: white;
  color: #444444;
  padding: 20px 0px 0px 0px;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
  border: solid 1px transparent;
}
#form {
  color: #444444;
  background-color: #ffffff;
  font-size: 16px;
  margin: 0;
  padding: 20px 0px 40px 0px;
}
#form legend {
  font-size: 18px;
  font-weight: bold;
}
#form label {
  margin-top: 10px;
  font-weight: 500;
}
#form .privacy-message {
  margin-top: 4px;
  margin-bottom: 18px;
  font-size: 14px;
}
#form .submit-button-container {
  text-align: center;
  margin-top: 20px;
}
#form .submit-button-container button {
  font-size: 18px;
  width: 100%;
}
#thankyou {
  display: none;
  background-color: #ffffff;
  padding: 20px 0px 30px 0px;
  margin-top: -20px;
  color: #444444;
}
#thankyou .thankyou-box {
  background-color: #ff9300;
  padding: 20px;
}
#thankyou h2 {
  color: white;
  font-size: 36px;
  font-weight: 200;
  margin: 0;
  padding: 0;
}
#thankyou p {
  font-size: 20px;
  font-weight: 300;
  color: white;
  margin: 10px 0 0 0;
}
#footer {
  padding: 20px 0px 20px 0px;
  color: #ffffff;
}
#footer .copyright {
  padding-top: 5px;
}
#footer .share {
  text-align: right;
}
@media all and (max-width: 568px) {
  #footer .share {
    text-align: left;
    padding-top: 20px;
  }
}
#footer .share-call-to-action {
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
}
#footer .facebook-link {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
#footer .twitter-link {
  display: inline-block;
  vertical-align: top;
}
#footer .facebook-image {
  width: 27px;
  height: 26px;
}
#footer .twitter-image {
  width: 27px;
  height: 26px;
  padding-top: 2px;
}