/**
 * This should eventually be re-written to use functional classnames
 */

.Landing-logo-container {}

.Landing-logo-container,
.Landing-login-container {
  text-align: right;
  width: 100%;
  max-width: 200px;
}

.Landing-hero {
  width: 100%;
  height: 100%;
  background: url('/static/assets/main.svg') no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 480px;
}

.Landing-login {
  color: #2E77FF;
  border: 1px solid #2E77FF;
  border-radius: 9999px;
  background: white;
  letter-spacing: .1em;
  font-size: .875rem;
  font-weight: 600;
}

.Landing-description {
  font-size: 1.4rem;
  font-weight: 300;
  color: #08162B;
  text-align: center;
  font-family: "assistant";
  letter-spacing: .01rem;
  line-height: 1.4;
  margin-left: 30px;
  margin-right: 30px;
}

@media (max-width: 800px) {
  .Landing-description {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.Landing-get-started {
  border-radius: 9999px;
  background-color: #2E77FF;
  color: white;
  border: none;
}

.Landing-get-started-plus {
  width: 41px;
  height: 41px;
  line-height: 36px;
  font-size: 2.8rem;
  font-weight: 400;
}

.Landing-get-started-text {
  letter-spacing: .1em;
  font-size: 0.875rem;
  padding-top: 23px;
  padding-bottom: 21px;
  font-weight: 600;
}

.Landing-learn-more {
  color: #2E77FF;
  font-size: 1.125rem;
  cursor: pointer;
}

.Landing-learn-down-arrow {
  color: #2E77FF;
  font-size: 1.5rem;
  cursor: pointer;
}

.Landing-feature-image {
  max-width: 230px;
  width: 100%;
  margin: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.Landing-feature-header {
  color: #08162B;
  font-family: 'Assistant';
  font-size: 2.175rem;
  font-weight: 600;
}

.Landing-feature-header-dash {
  content: '–';
  color: #2E77FF;
  font-family: monospace;
  font-size: 3rem;
  position: relative;
  top: -2px;
  padding-right: 20px;
}

.Landing-feature-content {
  min-width: 15em;
  font-family: 'Lora';
  font-size: 1.125rem;
  line-height: 1.5;
}

.Landing-image-all-in-place {
  background-image: url('/static/assets/all-in-place.svg');
  height: 200px;
}

.Landing-image-backup {
  background-image: url('/static/assets/backup.svg');
  height: 200px;
}

.Landing-image-email {
  background-image: url('/static/assets/email.svg');
  height: 200px;
}

.Landing-image-follow {
  background-image: url('/static/assets/follow.svg');
  height: 250px;
}

.Landing-image-search {
  background-image: url('/static/assets/search.svg');
  height: 200px;
}

.Landing-image-automated {
  background-image: url('/static/assets/automated.svg');
  height: 250px;
}

@media (max-width: 900px) {
  .Landing-main {
    padding: 0 20px;
    /*order: 3;*/
  }
  .Landing-feature {
    margin-top: 30px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 14px;
  }
  .Landing-feature-image {
    margin: 20px auto;
  }
  .Landing-feature-backup .Landing-feature-content,
  .Landing-feature-follow .Landing-feature-content,
  .Landing-feature-automated .Landing-feature-content {
    padding-left: 0.9375rem;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .Landing-feature-backup .Landing-feature-header,
  .Landing-feature-follow .Landing-feature-header,
  .Landing-feature-automated .Landing-feature-header {
    padding-left: 0.9375rem;
  }
  .Landing-feature-backup .Landing-feature-image,
  .Landing-feature-follow .Landing-feature-image,
  .Landing-feature-automated .Landing-feature-header {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .Landing-get-started-container {
    padding-top: 20px;
  }
}

@media (max-width: 400px) {
  .Landing-hero-container {
    margin-top: 20px;
    padding: 0;
  }
}

@media (min-width: 1281px) {
  .Landing-hero {
    min-height: 540px;
  }
}
