/* Variables
   --------- */
/* Mixins
   ------ */
/* Functions
   --------- */
/* Bourbon NEAT Variables
   ---------------------- */
/* Font Awesome
   ------------ */
.btn .fa, .contact-us-link .fa,
.support-link .fa {
  margin-right: 0.45em; }

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* Responsive Breakpoints
   ---------------------- */
/* Nav
   --- */
body {
  margin-top: 3rem; }

nav {
  background: #adb3b9;
  border-bottom: 1px solid #8e959c;
  color: #fefefe;
  margin: 0 0 2rem;
  min-height: 3rem;
  padding: 0.5rem 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; }

nav a {
  text-decoration: none; }

nav a,
nav a:hover {
  color: #fefefe; }

nav h1 {
  color: #fefefe;
  float: left;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2rem;
  white-space: nowrap; }

nav h1 .logo {
  margin-right: 0.375em;
  max-height: 0.6em; }

nav h1 a {
  margin-right: 0.25em; }

nav h1 small {
  display: inline-block;
  font-weight: 700;
  font-size: 0.775em;
  line-height: 1.4;
  text-transform: uppercase; }

#menu-toggle {
  cursor: pointer;
  float: right;
  font-size: 1.2rem;
  line-height: 2rem;
  margin-right: -0.5rem;
  padding: 0 0.5rem; }

#menu-toggle:hover {
  color: #d8dee3; }

#menu {
  display: none;
  font-size: 0;
  list-style: none;
  padding: 0; }

#menu li {
  display: inline-block;
  font-size: 1rem;
  line-height: 2rem; }
  #menu li:not(:last-child) {
    margin-right: 1rem; }

#menu a:hover {
  text-decoration: underline; }

@media screen and (max-width: 49.9375rem) {
  nav {
    position: fixed; }

  #menu {
    background: #adb3b9;
    bottom: 0;
    left: 0;
    padding: 1.25rem 2rem;
    position: fixed;
    right: 0;
    top: calc( 3rem + 1px ); }

  #menu.visible {
    display: block; }

  #menu li {
    display: block;
    font-weight: 600;
    text-transform: uppercase; } }
@media screen and (min-width: 50rem) {
  #menu {
    display: block;
    float: right;
    margin: 0; }

  #menu-toggle {
    display: none; } }
/* Main
   ---- */
body {
  background: #fefefe;
  color: #8e959c;
  font: 16px/1.5 Source Sans Pro, sans-serif;
  padding: 2.66667rem 0 4rem; }

.container {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  position: relative; }
  .container::after {
    clear: both;
    content: "";
    display: table; }
  .container > :first-child {
    margin-top: 0 !important; }

/* Flash & Messages
   ---------------- */
.m-failure, .m-info, .m-success {
  padding: 0.5em 0.75em; }
  .m-failure + .m-failure, .m-info + .m-failure, .m-success + .m-failure, .m-failure + .m-info, .m-info + .m-info, .m-success + .m-info, .m-failure + .m-success, .m-info + .m-success, .m-success + .m-success {
    margin-top: 2px; }

.m-failure {
  background: #fce8f2;
  box-shadow: 0 1px 0 #f28cbf;
  color: #b81466;
  text-shadow: 0 1px 0 #fefefe; }

.m-info {
  background: #e8f6fc;
  box-shadow: 0 1px 0 #8cd4f2;
  color: #1488b8;
  text-shadow: 0 1px 0 #fefefe; }

.m-success {
  background: #f2fce8;
  box-shadow: 0 1px 0 #bff28c;
  color: #66b814;
  text-shadow: 0 1px 0 #fefefe; }

#messages {
  margin-top: 1.5rem; }

#flash {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002; }

#flash > * {
  padding: 0.75em 0; }

/* Modals
   ------ */
#modal {
  background: #fefefe;
  display: none;
  left: 0;
  min-height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000; }

#modal.visible {
  display: block; }

.modal-window {
  background: #fefefe;
  left: 0;
  margin: 0 auto;
  max-height: calc( 100% - 3rem );
  min-width: 100%;
  overflow-y: auto;
  padding: 2rem;
  position: absolute;
  right: 0;
  top: 3rem; }

.modal-window > header h1 {
  line-height: 1;
  margin-top: 0; }

.modal-window > header .close {
  cursor: pointer;
  position: absolute;
  right: 2rem;
  top: 2rem; }

.modal-window > header .close:hover {
  color: #2f353e; }

.modal-window > div {
  margin-top: 1rem; }

.modal-window > footer {
  margin-top: 1.5rem; }
  .modal-window > footer::after {
    clear: both;
    content: "";
    display: table; }

.modal-window > footer > a {
  float: left;
  margin-right: 0.5em; }

@media screen and (min-width: 50rem) {
  #modal {
    background: rgba(47, 53, 62, 0.8); }

  .modal-window {
    border-radius: 0.2rem;
    max-height: calc( 100% - 6rem - 3rem );
    max-width: 52rem;
    min-width: 0;
    top: 6rem; } }
/* Snippets
   -------- */
.snippet {
  background: #adb3b9;
  color: #fefefe;
  font-size: 0.8rem;
  max-height: 12rem;
  padding: 1rem; }

/* Type
   ---- */
a {
  color: #1488b8; }
  a:hover {
    text-decoration: none; }

b {
  color: #1488b8;
  font-weight: 600; }

h1,
h2,
h3,
p {
  margin: 1em 0 0; }

h1,
h2,
h3 {
  color: #2f353e; }

h1 {
  font-size: 3rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1.25rem; }

.lead {
  font-size: 1.5rem;
  font-weight: 300; }

.no-wrap {
  white-space: nowrap; }

.footnotes {
  list-style-position: inside;
  margin-top: 2.5rem;
  padding-left: 0; }

.footnotes li {
  font-size: 0.8em; }

.ref {
  font-size: 0.667em;
  font-weight: 700;
  line-height: 0;
  position: relative;
  text-decoration: none;
  top: -0.5em;
  vertical-align: baseline; }

/* Forms
   ----- */
form, .btn-panel {
  margin: 1em 0 0; }

button,
.btn,
.contact-us-link,
.support-link, .select-error, .select-loading, .select-locked, #confirm, .plan .plan-btn,
.plan .plan-btn-current, .splash-btn, input,
select {
  display: inline-block;
  line-height: 1.35em;
  min-height: 2.25em;
  padding: 0.45em 0.6em; }

button,
.btn,
.contact-us-link,
.support-link, .select-error, .select-loading, .select-locked, #confirm, .plan .plan-btn,
.plan .plan-btn-current, .splash-btn, input,
select {
  background: #f6f7f8;
  border: none;
  color: #8e959c;
  font-size: 1.25rem;
  transition: all 0.05s;
  vertical-align: top; }

input:hover,
select:hover {
  background: #e7ebee; }
input:focus,
select:focus {
  background: #e7ebee;
  box-shadow: inset 0 0.2em 0.4em #adb3b9; }

button,
.btn,
.contact-us-link,
.support-link, .select-error, .select-loading, .select-locked, #confirm, .plan .plan-btn,
.plan .plan-btn-current, .splash-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  overflow: hidden;
  text-align: center;
  text-decoration: none; }

select {
  padding: 0.4em; }

button,
.btn,
.contact-us-link,
.support-link {
  background: #1488b8;
  color: #75d6ff; }
  button:hover, button:active,
  .btn:hover,
  .contact-us-link:hover,
  .support-link:hover,
  .btn:active,
  .contact-us-link:active,
  .support-link:active {
    color: #fefefe; }
  button:active,
  .btn:active,
  .contact-us-link:active,
  .support-link:active {
    background: #0f668a; }

/* Select
   ------ */
.form-setup {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem; }
  .form-setup::after {
    clear: both;
    content: "";
    display: table; }
  .form-setup select {
    width: 100%; }

.form-setup > * {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%; }
  .form-setup > *:last-child {
    margin-right: 0; }

.select-error, .select-loading, .select-locked {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  cursor: default;
  font-weight: 400;
  opacity: 0.25; }
  .select-error:last-child, .select-loading:last-child, .select-locked:last-child {
    margin-right: 0; }

.select-error i,
.select-loading i,
.select-locked i {
  float: right;
  line-height: 1.35em;
  padding-right: 0.2em; }

.select-error {
  background: rgba(184, 20, 102, 0.1);
  color: #b81466; }

.select-loading {
  background: rgba(20, 136, 184, 0.1);
  color: #1488b8; }

.select-locked {
  background: rgba(20, 136, 184, 0.1);
  color: #1488b8;
  position: relative;
  text-align: left; }

#confirm {
  background: #1488b8;
  color: #75d6ff;
  margin-top: 1.5rem; }
  #confirm:hover, #confirm:active {
    color: #fefefe; }
  #confirm:active {
    background: #0f668a; }
  #confirm.locked {
    background: #b81466;
    color: #ff75ba; }
    #confirm.locked:hover, #confirm.locked:active {
      color: #fefefe; }
    #confirm.locked:active {
      background: #8a0f4d; }
  #confirm.disabled {
    background: #1488b8;
    color: #75d6ff;
    cursor: default;
    opacity: 0.25; }

@media screen and (min-width: 50rem) {
  #confirm {
    margin-top: 3.75rem; }

  .form-setup > * {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%; }
    .form-setup > *:last-child {
      margin-right: 0; } }
/* Misc
   ---- */
.js-hidden {
  visibility: hidden; }

/* Authenticate
   ------------ */
.form-oauth {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto; }
  .form-oauth::after {
    clear: both;
    content: "";
    display: table; }
  .form-oauth > * {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%; }
    .form-oauth > *:last-child {
      margin-right: 0; }
  .form-oauth > :not(:first-child) {
    margin: 1rem 0 0; }

@media screen and (min-width: 50rem) {
  .form-oauth > * {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%; }
    .form-oauth > *:last-child {
      margin-right: 0; }
    .form-oauth > *:nth-child(2n) {
      margin-right: 0; }
    .form-oauth > *:nth-child(2n + 1) {
      clear: left; }
    .form-oauth > *:nth-child(-n + 2) {
      margin-top: 0; } }
/* Plans
   ----- */
.plans {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem; }
  .plans::after {
    clear: both;
    content: "";
    display: table; }

.plan {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  border: 1px solid rgba(20, 136, 184, 0.15);
  color: #2f353e;
  padding: 1rem 1.5rem; }
  .plan:last-child {
    margin-right: 0; }
  .plan h2 {
    border-bottom: 0.25rem solid;
    margin-top: 0;
    text-transform: uppercase; }
  .plan h2 span {
    float: right; }

.plan-current,
.plan-current h2 {
  color: #1488b8; }

.plan-current {
  box-shadow: 0 0 1rem rgba(20, 136, 184, 0.15); }

.plan-inactive {
  color: rgba(20, 136, 184, 0.15); }

.plan .plan-btn,
.plan .plan-btn-current {
  display: block;
  font-size: 1.5rem;
  line-height: 1.5em;
  margin-top: 1rem; }
.plan .plan-btn {
  background: #1488b8;
  color: #75d6ff; }
  .plan .plan-btn:hover, .plan .plan-btn:active {
    color: #fefefe; }
  .plan .plan-btn:active {
    background: #0f668a; }
.plan .plan-btn-current {
  background: rgba(20, 136, 184, 0.05);
  color: rgba(20, 136, 184, 0.15);
  cursor: default; }

.plan ul {
  list-style: none;
  margin-bottom: 0;
  padding: 0; }
  .plan ul li {
    padding: 0.4em 0; }
    .plan ul li:not(.plan-includes) {
      font-weight: 600;
      text-transform: uppercase; }

@media screen and (max-width: 49.9375rem) {
  .plan:not(:first-child) {
    margin-top: 1.25rem; } }
@media screen and (min-width: 50rem) {
  .subscribe {
    font-size: 1.75rem; }

  .plan {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%; }
    .plan:last-child {
      margin-right: 0; } }
/* Support
   ------- */
.contact-us-link,
.support-link {
  float: left;
  margin: 0 0.5em 0.5em 0; }

.support-link {
  background: #66b814;
  color: #baff75; }
  .support-link:hover, .support-link:active {
    color: #fefefe; }
  .support-link:active {
    background: #4d8a0f; }

/* Splash
   ------ */
.splash-btn {
  background: #1488b8;
  color: #75d6ff;
  font-size: 1.5em;
  line-height: 1.5em; }
  .splash-btn:hover, .splash-btn:active {
    color: #fefefe; }
  .splash-btn:active {
    background: #0f668a; }

.splash-fields {
  border: 1px solid rgba(142, 149, 156, 0.15);
  list-style: none;
  margin: 2.5rem 0 3rem;
  padding: 0; }
  .splash-fields li {
    color: #8e959c;
    font-weight: 600;
    padding: 0.4em 1.5rem;
    text-transform: uppercase; }
  .splash-fields li:nth-child(2n+1) {
    background: rgba(142, 149, 156, 0.05); }