/* Text Elements */

h1 {
  margin-top: 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  line-height: 1;
}

h1.welcome-intro-title {
  margin-bottom: .19230769230769232em;
  color: #5e5955;
  font-weight: 700;
  font-size: 1.625em;
}

h1.welcome-title {
  margin-bottom: .09090909090909091em;
  color: #43a7b1;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 3.4375em;
  line-height: .9;
}

h3 {
  color: #424242;
  text-align: center;
  font-weight: 300;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h3.section-heading {
  margin-top: 1.1428571428571428em;
  color: #424242;
}

h4 {
  color: #ffb442;
  font-size: 1.875em;
  font-family: 'Roboto', sans-serif;
}

h4.table-description {
  padding-right: .2631578947368421em;
  padding-left: .3157894736842105em;
  color: #6b6b6b;
  font-size: 1.375em;

  -webkit-flex: 70%;
     -moz-flex: 70%;
      -ms-flex: 70%;
       -o-flex: 70%;
          flex: 70%;
}

h6 {
  color: #83b0cc;
  font-size: 1.25em;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h6.feature-group-heading {
  padding-left: .3em;
  color: #6b6b6b;
  font-weight: 700;
}

h6.standout {
  margin-top: 1.25em;
  margin-bottom: 1.6666666666666667em;
  padding-top: .4166666666666667em;
  border-top: .041666666666666664em dotted rgba(75, 75, 75, .25);
  color: #333;
  font-style: italic;
  font-size: 1.5em;
  font-family: Georgia, Times, 'Times New Roman', serif;
}

h6.compare-table.feature-group-heading {
  margin-left: 2%;
}

p.paragraph {
  color: #5e5955;
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
}

p.paragraph.feature {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2%;
  padding-right: .3333333333333333em;
  padding-bottom: 0;
  line-height: 1.3;
}

p.paragraph span.feature-highlight {
  font-weight: 700;
}

p.paragraph.feature.feature-addition {
  margin-top: 0;
  padding-bottom: 0;
  color: #6b6b6b;
  text-align: left;
  font-style: italic;
  font-variant: normal;
  font-size: .875em;
  font-family: 'Roboto', sans-serif;
}

p.paragraph.check-text.feature {
  padding-left: .3333333333333333em;
  text-align: center;
}

p.paragraph a.p-link {
  color: #5087ca;
  text-decoration: underline;
}

p.paragraph span.emphasize {
  font-style: italic;
}

p.paragraph span.code {
  background-color: #e3f9ff;
  color: #686763;
  font-size: .8888888888888888em;
  font-family: Consolas, monaco, monospace;
}

p.paragraph span.highlight {
  font-weight: 600;
}

p.paragraph.info-message {
  margin-bottom: .125em;
  padding-right: .3125em;
  padding-left: 0;
}

p.paragraph.credentials {
  color: #858585;
  font-size: .8125em;
  line-height: 1.3;
}

p.paragraph.credentials.credentials-title {
  margin-top: 0;
  margin-bottom: .38461538461538464em;
  padding-bottom: .23076923076923078em;
  border-bottom: .07692307692307693em dotted rgba(75, 75, 75, .25);
  color: #2e7cb8;
}

p.paragraph span.control {
  color: #858585;
  font-size: .9375em;
  font-family: Consolas, monaco, monospace;
}

p.paragraph.compare-table.feature {
  margin-left: 4%;
}

p.paragraph.check-text.feature.item-header {
  font-size: 1.25em;
}

p.paragraph.feature-check-compare {
  padding-bottom: 0;
  padding-left: .3333333333333333em;
  text-align: center;
  font-size: .875em;
  line-height: 1.3;
}

p.paragraph.side-note {
  margin-top: 1em;
  padding-top: .6923076923076923em;
  padding-right: .7692307692307693em;
  padding-bottom: 0;
  border-top: .07692307692307693em dotted rgba(133, 133, 133, .25);
  border-right: .07692307692307693em dotted rgba(133, 133, 133, .25);
  color: #858585;
  font-size: .8125em;
  line-height: 1.3;
}

p.paragraph.code-example.info-message {
  margin-top: .625em;
  margin-bottom: 1.25em;
  padding-top: 2.5em;
  padding-bottom: 1.5625em;
  padding-left: 1.25em;
  background-color: #e3f9ff;
  color: #5e5955;
  font-size: .9375em;
  font-family: Consolas, monaco, monospace;
}

p.paragraph span.selector {
  color: #3b5ea6;
}

p.paragraph span.value {
  color: #792010;
}

p.paragraph span.content {
  color: #3a3a3a;
}

span.text-element {
  font-family: 'Roboto', sans-serif;
}

span.text-element.progress-perct {
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  padding: .5em 0 .5em .42857142857142855em;
  width: 30%;
  background-color: #d0d0d0;
  color: #5e5955;
  font-size: .75em;
  line-height: 1;
}

/* Common Elements */

div.rule.title-rule {
  margin-top: 0;
  margin-bottom: 2.1875em;
  padding-top: 0;
  padding-bottom: .625em;
}

div.rule.demo-separator {
  margin-top: 2.5em;
  margin-right: auto;
  margin-left: auto;
  max-width: none;
}

/* Interaction Elements */

a.link-button {
  padding: 1em 1.5em;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
}

a.link-button.rsd-button-small {
  background-color: #f56400;
  font-weight: 700;
}

/* Layout Elements */

body > .row.table-header {
  margin-top: 0;
  background-color: #f5f5f5;
}

body > .row > [class*='coffee-span-'].feature-column {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  padding-right: 0;
  padding-left: 0;
  min-height: 1.875em;
  border-bottom: .0625em dotted rgba(135, 130, 123, .65);
}

body > .row > [class*='coffee-span-'].feature-group-col {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  margin-top: 1.25em;
  padding-right: 0;
  padding-left: 0;
  border-bottom: .0625em solid #d6d6d6;
  background-color: #f5f5f5;

  -webkit-align-items: stretch;
     -moz-align-items: stretch;
      -ms-align-items: stretch;
       -o-align-items: stretch;
          align-items: stretch;
}

body > .row > [class*='coffee-span-'].table-header {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  margin-top: 1.875em;

  -webkit-align-items: center;
     -moz-align-items: center;
      -ms-align-items: center;
       -o-align-items: center;
          align-items: center;
}

body > .row > [class*='coffee-span-'].feature-group-col.table-header {
  margin-top: .9375em;
  margin-right: 0;
  border-bottom-color: #d6d6d6;
}

body {
  background-color: #fff;
}

body > .row.article-header {
  margin-top: -12.5em;
  padding: 4.375em 1.25em 2.8125em;
  width: 95%;
  background-color: #fff;
}

body > .row > [class*='coffee-span-'] {
  min-height: 1.25em;
}

body > .row > [class*='coffee-span-'].infor-message-column {
  padding-left: .875em;
  border-left: .1875em solid #ffcb8c;
  background-color: rgba(227, 214, 191, .25);
}

body > .row.text-row {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}

body > .row.table-header.top-header {
  margin-top: 3.125em;
}

body > .row > [class*='coffee-span-'].demo-separator-col {
  padding-right: 0;
  padding-left: 0;
}

body > .row > [class*='coffee-span-'].compare-table.table-header {
  margin-top: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
}

body > .row > [class*='coffee-span-'].feature-group-col.top-column {
  margin-top: 0;
}

body > .row.cover-row {
  min-height: 21.875em;
  max-width: none;
  background-image: url('../cover.png');
  background-position: center top;
  background-size: cover;
}

.subgrid > .row > [class*='coffee-span-'].subgrid-column-1 {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;

  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
       -o-justify-content: center;
          justify-content: center;
}

.row > [class*='coffee-span-'] > .container.feature-description {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: .75em;
  padding-bottom: .75em;
  width: auto;

  -webkit-flex: 55%;
     -moz-flex: 55%;
      -ms-flex: 55%;
       -o-flex: 55%;
          flex: 55%;
  -webkit-align-items: flex-start;
     -moz-align-items: flex-start;
      -ms-align-items: flex-start;
       -o-align-items: flex-start;
          align-items: flex-start;
  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
       -o-justify-content: center;
          justify-content: center;
}

.row > [class*='coffee-span-'] > .container.feature-check {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  padding-top: .5em;
  padding-bottom: .5em;
  width: auto;
  border-left: .0625em dotted #d6d6d6;

  -webkit-flex: 15%;
     -moz-flex: 15%;
      -ms-flex: 15%;
       -o-flex: 15%;
          flex: 15%;
  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
       -o-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-align-items: center;
      -ms-align-items: center;
       -o-align-items: center;
          align-items: center;
}

span.glyph.check {
  color: #0aad0d;
  font-size: 1em;
  line-height: 1;
}

.row > [class*='coffee-span-'] > .container {
  margin-bottom: 0;
}

.row > [class*='coffee-span-'] > .container.container-1 {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;

  -webkit-flex: 30%;
     -moz-flex: 30%;
      -ms-flex: 30%;
       -o-flex: 30%;
          flex: 30%;
  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
       -o-justify-content: center;
          justify-content: center;
  -webkit-align-items: flex-end;
     -moz-align-items: flex-end;
      -ms-align-items: flex-end;
       -o-align-items: flex-end;
          align-items: flex-end;
}

.row > [class*='coffee-span-'] > .container.feature-description.with-addition {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: .875em;
  padding-bottom: .875em;
}

.row > [class*='coffee-span-'] > .container.item-header {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;

  -webkit-flex: 15%;
     -moz-flex: 15%;
      -ms-flex: 15%;
       -o-flex: 15%;
          flex: 15%;
  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
       -o-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-align-items: center;
      -ms-align-items: center;
       -o-align-items: center;
          align-items: center;
}

.row > [class*='coffee-span-'] > .container.comparison.feature-description {
  -webkit-flex: 0 55%;
     -moz-flex: 0 55%;
      -ms-flex: 0 55%;
       -o-flex: 0 55%;
          flex: 0 55%;
}

span.glyph.check.nope {
  color: #5e5955;
  font-size: .75em;
}

.row > [class*='coffee-span-'] .subgrid.subgrid-1 {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  border-left: .0625em dotted rgba(75, 75, 75, .25);

  -webkit-flex: 15%;
     -moz-flex: 15%;
      -ms-flex: 15%;
       -o-flex: 15%;
          flex: 15%;
}

.row > [class*='coffee-span-'] > .container.progress-container {
  min-height: 0;
  max-height: 1.875em;
  background-color: #1dab21;
}

.row > [class*='coffee-span-'] > .container.compare.feature-check {
  background-color: transparent;
}

@media screen and (max-width: 48em) {
  /* Text Elements */

  h1.welcome-intro-title {
    margin-bottom: .22727272727272727em;
    font-size: 1.375em;
  }

  h1.welcome-title {
    margin-bottom: .125em;
    font-size: 2.5em;
  }

  h3.section-heading {
    font-size: 1.875em;
  }

  h4 {
    font-size: 1.5625em;
  }

  h4.table-description {
    font-size: 1.25em;
  }

  h6.feature-group-heading {
    font-size: 1.125em;
  }

  h6.compare-table.feature-group-heading {
    color: #f5f5f5;
    font-size: 1.25em;
  }

  h6.standout {
    margin-top: .45454545454545453em;
    margin-bottom: .9090909090909091em;
    font-size: 1.375em;
  }

  p.paragraph.check-text.feature {
    font-size: .875em;
  }

  p.paragraph.feature {
    font-size: .9375em;
  }

  p.paragraph.feature-check-compare {
    font-size: .875em;
  }

  p.paragraph.check-text.feature.item-header {
    color: #5e5955;
    font-size: 1.125em;
  }

  p.paragraph {
    font-size: .9375em;
  }

  p.paragraph.code-example.info-message {
    font-size: .875em;
  }

  /* Layout Elements */

  body > .row > [class*='coffee-span-'].comparison.feature-column {
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;

    -webkit-flex-wrap: wrap;
       -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
         -o-flex-wrap: wrap;
            flex-wrap: wrap;
  }

  body > .row > [class*='coffee-span-'].compare-table.table-header {
    -webkit-flex-wrap: wrap;
       -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
         -o-flex-wrap: wrap;
            flex-wrap: wrap;
  }

  body > .row.article-header {
    margin-top: -9.5625em;
    padding-top: 2.5em;
  }

  body > .row.cover-row {
    min-height: 18.75em;
  }

  body > .row.table-header {
    background-color: #f5f5f5;
  }

  body > .row > [class*='coffee-span-'].feature-group-col.table-header {
    margin-top: .3125em;
    margin-right: 0;
  }

  .row > [class*='coffee-span-'] > .container.feature-check {
    -webkit-flex: 15%;
       -moz-flex: 15%;
        -ms-flex: 15%;
         -o-flex: 15%;
            flex: 15%;
  }

  .row > [class*='coffee-span-'] > .container.feature-description {
    -webkit-flex: 55%;
       -moz-flex: 55%;
        -ms-flex: 55%;
         -o-flex: 55%;
            flex: 55%;
  }

  .row > [class*='coffee-span-'] > .container.comparison.feature-description {
    border-bottom: .0625em dotted rgba(75, 75, 75, .25);
    background-color: #f5f5f5;

    -webkit-flex: 100%;
       -moz-flex: 100%;
        -ms-flex: 100%;
         -o-flex: 100%;
            flex: 100%;
    -webkit-align-items: center;
       -moz-align-items: center;
        -ms-align-items: center;
         -o-align-items: center;
            align-items: center;
  }

  .row > [class*='coffee-span-'] > .container.compare.feature-check {
    -webkit-flex: 33%;
       -moz-flex: 33%;
        -ms-flex: 33%;
         -o-flex: 33%;
            flex: 33%;
  }

  .row > [class*='coffee-span-'] > .container.item-header {
    background-color: rgba(135, 130, 123, .65);

    -webkit-flex: 33%;
       -moz-flex: 33%;
        -ms-flex: 33%;
         -o-flex: 33%;
            flex: 33%;
  }

  .row > [class*='coffee-span-'] > .container.comparison.feature-description.table-header {
    background-color: #87827b;
  }

  .row > [class*='coffee-span-'] > .container.item-header.middle-item {
    border-right: .0625em solid rgba(75, 75, 75, .25);
    border-left: .0625em solid rgba(75, 75, 75, .25);
  }

  .row > [class*='coffee-span-'] .subgrid.subgrid-1 {
    -webkit-flex: 33%;
       -moz-flex: 33%;
        -ms-flex: 33%;
         -o-flex: 33%;
            flex: 33%;
  }

  .row > [class*='coffee-span-'] > .container.progress-container {
    margin-right: auto;
    margin-left: auto;
    max-width: 12.5em;
  }
}

@media screen and (max-width: 28.75em) {
  /* Text Elements */

  h1.welcome-intro-title {
    font-size: 1.125em;
  }

  h1.welcome-title {
    font-size: 1.625em;
  }

  h3.section-heading {
    font-size: 1.5em;
  }

  h4.table-description {
    width: auto;
    text-align: center;
    font-size: 1.125em;
  }

  h4 {
    margin-bottom: 0;
    font-size: 1.25em;
  }

  h6.feature-group-heading {
    width: auto;
    color: #fff;
    text-align: center;
    font-size: 1.0625em;
  }

  h6.standout {
    margin-top: .5555555555555556em;
    margin-bottom: 1.1111111111111112em;
    padding-top: .5555555555555556em;
    font-size: 1.125em;
  }

  p.paragraph.check-text.feature.item-header {
    color: #5e5955;
  }

  p.paragraph {
    font-size: .875em;
  }

  p.paragraph.credentials.credentials-title {
    border-bottom-width: .09090909090909091em;
    font-size: .6875em;
  }

  p.paragraph.code-example.info-message {
    font-size: .8125em;
  }

  p.paragraph.side-note {
    margin-bottom: .23076923076923078em;
    padding-bottom: .5384615384615384em;
    padding-left: .7692307692307693em;
    border: .07692307692307693em dotted rgba(133, 133, 133, .25);
  }

  /* Layout Elements */

  body > .row > [class*='coffee-span-'].feature-group-col.table-header {
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;
    -webkit-flex-direction: column-reverse;
       -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
         -o-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-top: 0;
    padding-top: 1.25em;
    min-height: 10.625em;
    background-color: #fff;

    -webkit-justify-content: center;
       -moz-justify-content: center;
        -ms-justify-content: center;
         -o-justify-content: center;
            justify-content: center;
    -webkit-flex-wrap: nowrap;
       -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
         -o-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }

  body > .row > [class*='coffee-span-'].feature-column {
    display: block;
    -webkit-flex-direction: column;
       -moz-flex-direction: column;
        -ms-flex-direction: column;
         -o-flex-direction: column;
            flex-direction: column;
  }

  body > .row > [class*='coffee-span-'].feature-group-col {
    margin-top: 0;
    padding-left: 0;
    background-color: #87827b;
  }

  body > .row > [class*='coffee-span-'].comparison.feature-column {
    -webkit-flex-direction: row;
       -moz-flex-direction: row;
        -ms-flex-direction: row;
         -o-flex-direction: row;
            flex-direction: row;
  }

  body > .row > [class*='coffee-span-'].compare-table.table-header {
    background-color: transparent;
  }

  body > .row.cover-row {
    min-height: 12.5em;
  }

  body > .row.article-header {
    margin-top: -8.5em;
  }

  body > .row.table-header {
    background-color: #f5f5f5;
  }

  .row > [class*='coffee-span-'] > .container.feature-description {
    margin-top: 0;
    padding-top: .625em;
    padding-bottom: .625em;
    min-height: 3.75em;
    background-color: #ededed;
  }

  .row > [class*='coffee-span-'] > .container.item-header {
    background-color: rgba(135, 130, 123, .65);
  }

  .row > [class*='coffee-span-'] > .container.credential-container {
    float: left;
    width: 50%;
  }
}