body {
  background-color: #fff; }

.colors--inverted {
  background-color: rgba(0, 0, 0, 0.87);
  color: #fff; }

.colors--alternate {
  background-color: rgba(0, 0, 0, 0.02); }

.page {
  background-color: #F6F6FF;
  color: #262626;
  font: 400 16px / 20px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }

.page-header {
  margin-top: 80px; }
  @media (min-width: 730px) {
    .page-header {
      margin-top: 160px; } }

.page-header .cap {
  font: 400 18px / 24px "Neue Machina Regular", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }

.page-header h1 {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font: 500 34px / 40px "Neue Machina Ultrabold", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }
  @media (min-width: 730px) {
    .page-header h1 {
      font: 500 55px / 58px "Neue Machina Ultrabold", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
      max-width: 400px; } }

.page-description {
  font: 400 20px / 32px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: normal; }
  @media (min-width: 730px) {
    .page-description {
      max-width: 840px; } }
  @media (min-width: 730px) {
    .page-description {
      font: 500 24px / 32px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; } }

.page-meta {
  display: flex; }

.page-meta span {
  display: flex;
  align-items: center; }
  .page-meta span:not(:last-child) {
    margin-right: 32px; }

.page-details {
  margin-top: 96px;
  margin-bottom: 100px; }
  .page-details .cap,
  .page-details .description {
    color: #646464; }
  .page-details .cap {
    margin-bottom: 16px; }
  .page-details .description {
    font: 400 18px / 24px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
    margin-bottom: 32px; }
  .page-details h2 {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 0;
    padding-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font: 500 34px / 40px "Neue Machina Ultrabold", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }
    @media (min-width: 730px) {
      .page-details h2 {
        font: 900 38px / 44px "Neue Machina Ultrabold", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; } }

.page-details .cap {
  font: 400 18px / 24px "Neue Machina Regular", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }

.page-details h4,
.page-details h5 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 0;
  padding-bottom: 0; }

.page-details-data > .row {
  padding-top: 4px;
  padding-bottom: 8px;
  border-top: 1px solid #B7B7B7;
  color: #646464; }
  @media (min-width: 730px) {
    .page-details-data > .row {
      align-items: center; } }
  .page-details-data > .row .col-b {
    display: flex;
    flex-wrap: wrap; }
    @media (max-width: 896px) {
      .page-details-data > .row .col-b {
        flex-direction: column; } }

.page-details-data h5 {
  font: 400 20px / 28px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500; }

.spectra {
  justify-content: space-evenly;
  width: 100%;
  margin-bottom: 16px; }
  @media (max-width: 730px) {
    .spectra {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; } }
  .spectra span {
    margin-top: 16px; }
  .spectra .value {
    display: flex;
    align-items: center;
    height: 80px; }

.spectra .col {
  flex: 1 1 50%;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-start; }
  @media (min-width: 730px) {
    .spectra .col {
      flex: 1 1 auto; } }
  .spectra .col.theory {
    color: #27A786; }
    .spectra .col.theory svg path {
      fill: #27A786; }
  .spectra .col.practice {
    color: #FFB34D; }
    .spectra .col.practice svg path {
      fill: #FFB34D; }
  .spectra .col.content {
    color: #8D78EF; }
    .spectra .col.content svg path {
      fill: #8D78EF; }
  .spectra .col.infrastructure {
    color: #36C3DD; }
    .spectra .col.infrastructure svg path {
      fill: #36C3DD; }
  .spectra .col.dimmed {
    color: #B7B7B7; }
  .spectra .col .with-tooltip {
    display: flex;
    align-items: center; }
  .spectra .col button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none; }

span.capsule {
  background-color: #fff;
  border-radius: 32px;
  padding: 8px 16px;
  margin-top: 8px;
  margin-bottom: 4px; }
  @media (max-width: 896px) {
    span.capsule {
      width: 100%; } }

span.capsule:not(:last-child) {
  margin-right: 16px; }

span.capsule.reverse {
  background-color: #B7B7B7; }

@media (max-width: 896px) {
  .page .list {
    flex-direction: column; } }

.page .list .list-item {
  margin-bottom: 32px; }
  @media (min-width: 730px) {
    .page .list .list-item {
      flex: 0 1 28%;
      margin-right: 16px;
      margin-left: 16px; } }
  .page .list .list-item a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    border: 4px solid #fff;
    background-color: #fff;
    padding: 8px 16px; }
    .page .list .list-item a:hover {
      border: 4px solid #8C8CFF; }
  .page .list .list-item h5 {
    font: 400 20px / 28px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif; }
  .page .list .list-item .prop {
    color: #646464;
    font: 400 18px / 24px -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  @media (min-width: 896px) {
    .page .list .list-item .prop {
      width: 205px; } }
  .page .list .list-item .prop span {
    border-bottom: 1px solid #DADAFF;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }