dreamcast/css/main.css

Dreamcast: v10 Styleguide

/*
    dreamcast-main.css
*/
html {
  height: 100vh; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

*, div {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: "Foro";
  font-weight: 100;
  src: url("Fonts/69a094c7-1bcf-40c6-975c-aee4d7526ef4.eot?#iefix");
  src: url("Fonts/69a094c7-1bcf-40c6-975c-aee4d7526ef4.eot?#iefix") format("eot"), url("Fonts/d99ee64a-2e94-4c77-a18b-7b9005141ff6.woff2") format("woff2"), url("Fonts/46ec9477-ac5e-4a29-aa47-97052e147f88.woff") format("woff"), url("Fonts/475a8b16-1173-432f-a8c3-4045f02c734d.ttf") format("truetype"), url("Fonts/bbaa7a3e-7704-4904-a793-b834ed5a2f0e.svg#bbaa7a3e-7704-4904-a793-b834ed5a2f0e") format("svg"); }

@font-face {
  font-family: "Foro";
  font-weight: 100;
  font-style: italic;
  src: url("Fonts/e6175928-6ba9-4a0b-a612-892499cff1dc.eot?#iefix");
  src: url("Fonts/e6175928-6ba9-4a0b-a612-892499cff1dc.eot?#iefix") format("eot"), url("Fonts/744146db-fe23-40c8-974a-abd0da7aff20.woff2") format("woff2"), url("Fonts/2e8f28d4-8eeb-4e68-bbb4-9f42edd45261.woff") format("woff"), url("Fonts/0b7dbe7b-5b52-4c52-864c-47986b1a2419.ttf") format("truetype"), url("Fonts/ec7f8476-7253-4655-9149-f74adde78fe9.svg#ec7f8476-7253-4655-9149-f74adde78fe9") format("svg"); }

@font-face {
  font-family: "Foro";
  font-weight: 400;
  src: url("Fonts/fa1865a6-4128-4614-ab07-37c710fa432e.eot?#iefix");
  src: url("Fonts/fa1865a6-4128-4614-ab07-37c710fa432e.eot?#iefix") format("eot"), url("Fonts/1b72393a-3dd8-47f6-8a11-7cd235cba853.woff2") format("woff2"), url("Fonts/c8d146fb-bf58-4499-bd69-48329084a502.woff") format("woff"), url("Fonts/2f539ee5-2db1-47ea-b90b-308454f4bc47.ttf") format("truetype"), url("Fonts/b81b2f26-8c7f-4d59-b40b-2326fce71649.svg#b81b2f26-8c7f-4d59-b40b-2326fce71649") format("svg"); }

@font-face {
  font-family: "Foro";
  font-weight: 400;
  font-style: italic;
  src: url("Fonts/4f3858d2-53c0-4968-a164-c43dbd2e3d0f.eot?#iefix");
  src: url("Fonts/4f3858d2-53c0-4968-a164-c43dbd2e3d0f.eot?#iefix") format("eot"), url("Fonts/9337b57d-fcd6-4174-84a7-0641d1e0343c.woff2") format("woff2"), url("Fonts/00001ca4-c05c-4145-ac21-97eabcd78930.woff") format("woff"), url("Fonts/1bc03503-ca21-4a63-8847-e2dd33078248.ttf") format("truetype"), url("Fonts/70048232-6e17-4923-8b84-f96f5c0e394c.svg#70048232-6e17-4923-8b84-f96f5c0e394c") format("svg"); }

@font-face {
  font-family: "Foro";
  font-weight: 700;
  src: url("Fonts/fb84e17e-3805-40b6-93b3-64fcf1f18ac0.eot?#iefix");
  src: url("Fonts/fb84e17e-3805-40b6-93b3-64fcf1f18ac0.eot?#iefix") format("eot"), url("Fonts/4f0220de-42b7-4dc4-9d06-162d31de44b3.woff2") format("woff2"), url("Fonts/ed389623-a2fd-409c-80a4-3f5258712403.woff") format("woff"), url("Fonts/b2edb476-6ea6-4308-ac17-fc7be507aa8d.ttf") format("truetype"), url("Fonts/f37f933b-1420-4244-b3d5-d2ec30e5bdc9.svg#f37f933b-1420-4244-b3d5-d2ec30e5bdc9") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 100;
  src: url("Fonts/e14e9fd6-0631-4491-b873-211c7b6f926c.eot?#iefix");
  src: url("Fonts/e14e9fd6-0631-4491-b873-211c7b6f926c.eot?#iefix") format("eot"), url("Fonts/fd9d5b5d-71c1-4db0-bf20-cd7e3ce4d069.woff2") format("woff2"), url("Fonts/e976d680-12b6-411e-9f79-0ef9287f484d.woff") format("woff"), url("Fonts/81780024-f1ae-4135-a0ae-d0bab2c19986.ttf") format("truetype"), url("Fonts/98fa899e-fa41-4563-b67a-33d373ba60ee.svg#98fa899e-fa41-4563-b67a-33d373ba60ee") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 100;
  font-style: italic;
  src: url("Fonts/b2f70e54-26ae-44c8-94e7-3a7590a95d50.eot?#iefix");
  src: url("Fonts/b2f70e54-26ae-44c8-94e7-3a7590a95d50.eot?#iefix") format("eot"), url("Fonts/57a6b494-1c77-4cb0-b042-4adca2c0bdb1.woff2") format("woff2"), url("Fonts/2ab97fdf-1e06-4c25-a5e1-b111273d580a.woff") format("woff"), url("Fonts/ba402481-70a4-42b6-a4d2-291fac0e1202.ttf") format("truetype"), url("Fonts/b2f3b1d9-1063-46e0-abcd-6b4cbbe44327.svg#b2f3b1d9-1063-46e0-abcd-6b4cbbe44327") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 300;
  src: url("Fonts/fd479df2-01b0-4e3a-a411-915c477f1352.eot?#iefix");
  src: url("Fonts/fd479df2-01b0-4e3a-a411-915c477f1352.eot?#iefix") format("eot"), url("Fonts/1d3191cd-ae8c-45e2-bb04-11e96d8fa974.woff2") format("woff2"), url("Fonts/b252d464-65cb-4950-88f7-ac0a1bf79b75.woff") format("woff"), url("Fonts/b3d18117-6517-4d3f-afc1-774086ff5fc1.ttf") format("truetype"), url("Fonts/b9bed509-0816-43d8-b14b-7525a21f4bde.svg#b9bed509-0816-43d8-b14b-7525a21f4bde") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 500;
  src: url("Fonts/a29947fd-0c53-492b-b2f4-399b01153b30.eot?#iefix");
  src: url("Fonts/a29947fd-0c53-492b-b2f4-399b01153b30.eot?#iefix") format("eot"), url("Fonts/d9896899-f08c-4750-a874-a9e10d83c2cb.woff2") format("woff2"), url("Fonts/d42dd843-62b0-4623-8855-d5882512c3c9.woff") format("woff"), url("Fonts/6d532ccb-086c-4000-bab2-5d16862fcf01.ttf") format("truetype"), url("Fonts/f56b7407-f97b-4cb3-9ce6-4e13065eec93.svg#f56b7407-f97b-4cb3-9ce6-4e13065eec93") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 500;
  font-style: italic;
  src: url("Fonts/afb0bae6-4f02-492e-82dd-c4c51e519279.eot?#iefix");
  src: url("Fonts/afb0bae6-4f02-492e-82dd-c4c51e519279.eot?#iefix") format("eot"), url("Fonts/b76ff444-27dd-4494-b96e-2f5157f347d5.woff2") format("woff2"), url("Fonts/136eb3cf-249c-40a3-bb62-49c1ad9ae6d8.woff") format("woff"), url("Fonts/70c24c76-d52f-4d55-be08-6085ad014f1b.ttf") format("truetype"), url("Fonts/ac37080b-1709-4b25-bda1-03c4a58e3ef5.svg#ac37080b-1709-4b25-bda1-03c4a58e3ef5") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 700;
  src: url("Fonts/3d0a39cf-115c-4800-9b1e-31c7912abfc2.eot?#iefix");
  src: url("Fonts/3d0a39cf-115c-4800-9b1e-31c7912abfc2.eot?#iefix") format("eot"), url("Fonts/e2d37f34-6bca-473c-b64d-93811f4dc046.woff2") format("woff2"), url("Fonts/eadbb595-a394-48fc-834f-8bf5da15cddf.woff") format("woff"), url("Fonts/9bcba093-b507-4b9b-9c83-303003d3815c.ttf") format("truetype"), url("Fonts/9a2af429-2624-4bd1-a676-8f0eed3e7e31.svg#9a2af429-2624-4bd1-a676-8f0eed3e7e31") format("svg"); }

@font-face {
  font-family: "Museo Sans";
  font-weight: 900;
  src: url("Fonts/7e90c1ee-e4b1-46f0-9134-93a8ba421545.eot?#iefix");
  src: url("Fonts/7e90c1ee-e4b1-46f0-9134-93a8ba421545.eot?#iefix") format("eot"), url("Fonts/009ca58d-46af-4651-a359-f0ae2301085b.woff2") format("woff2"), url("Fonts/3619b5f4-8df9-44f5-8c53-b7c236e9c74e.woff") format("woff"), url("Fonts/9b2d949a-4e1c-435c-8412-f377c80583ae.ttf") format("truetype"), url("Fonts/7a319e11-05eb-49ce-bdb7-f692766e6477.svg#7a319e11-05eb-49ce-bdb7-f692766e6477") format("svg"); }

body {
  background: url("../img/temp-bg.png") no-repeat fixed left bottom;
  background-size: 100%; }

.stage {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 2em 2em 0; }

.stage-header {
  margin-bottom: 1.5em; }

.inputs {
  -webkit-animation: text-on 300ms ease-in-out;
          animation: text-on 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

.moment.container {
  padding-top: 3em;
  position: relative; }
  .moment.container.closed-caption {
    padding-bottom: 320px; }
  .moment.container header {
    font-size: 1em;
    position: absolute;
    margin: 0;
    top: calc(-2.5em + 1px);
    left: 101px; }
    @media (min-width: 667px) {
      .moment.container header {
        top: calc(-2em + 1px);
        left: 131px; } }

.menu-shown .moment.container header {
  left: 141px; }
  @media (min-width: 667px) {
    .menu-shown .moment.container header {
      left: 131px; } }

body {
  -webkit-font-smoothing: auto;
  font: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  font-size: 12px; }
  @media (min-width: 667px) {
    body {
      font-size: 16px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
      -webkit-font-smoothing: antialiased; } }

p,
.body {
  line-height: 1.6;
  margin-bottom: 1.5em;
  color: #808080; }
  p span,
  .body span {
    font-weight: 700; }

b,
strong {
  font-weight: 700; }

em {
  font-style: italic; }

.section-header {
  font-weight: 700;
  color: #0981b0;
  font-size: 1.5em;
  margin-bottom: 1em;
  text-transform: uppercase; }

.explanation {
  font-weight: 100;
  font-size: 1.375em;
  margin-bottom: 0; }
  .explanation li {
    margin: 0 0 0.75em 1em;
    list-style-type: disc;
    list-style-position: outside; }
    .explanation li span {
      display: inline; }
  .explanation:last-child {
    margin-bottom: 0.75em; }
    .explanation:last-child ul {
      margin-bottom: 0.5em; }

.explanation-number,
.subheader,
.summary-header {
  display: block;
  font-size: 1.375em;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.75em; }

.subheader, .summary-header {
  line-height: 2; }

.explanation-bold-result {
  border-top: 1px solid #0981b0;
  padding-top: 0.75em; }

.line {
  width: 100%;
  border-bottom: 1px solid #0981b0;
  margin: 1.75em 0 1.5em; }

.question,
.question_text,
.question-text,
header {
  font: 100 1em "Foro", serif;
  font-size: 2em;
  color: #808080;
  margin-bottom: 0.75em; }

.footnote {
  color: #808080;
  margin-bottom: 2.5em; }

.error {
  color: #ff3333;
  font-size: 1em; }

header > h1 {
  font: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  font-size: 18px;
  color: #808080;
  margin-bottom: 0; }
  header > h1:empty:after {
    display: none; }

.module-header {
  font-size: 1.1em;
  color: #808080; }

.plan-reveal {
  font: 100 1em "Foro", serif;
  font-size: 3em;
  text-align: center;
  color: #036991;
  width: 100%;
  height: 90%;
  max-height: 470px;
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }
  @media (min-width: 667px) {
    .plan-reveal {
      width: 70%;
      min-height: 340px; } }
  @media (max-width: 360px) {
    .plan-reveal {
      font-size: 2.5em; } }

.closedcaption-text {
  color: #fff;
  line-height: 2.5em;
  font-size: 1.5625em;
  font-family: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  letter-spacing: .5px; }

.display-text {
  -webkit-animation: text-on 200ms ease-in-out;
          animation: text-on 200ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
  .display-text.section-header, .display-text.no-fade {
    -webkit-animation: none;
            animation: none;
    -webkit-transition: none;
    transition: none; }

.row:after {
  display: block;
  clear: both;
  content: ''; }

.row [class^="col-"] {
  float: left;
  margin-right: 5%;
  box-sizing: border-box;
  width: 100%;
  min-height: 1px;
  position: relative;
  margin-top: 1em; }
  .row [class^="col-"]:last-child {
    margin-right: 0%; }

@media (orientation: landscape) and (min-width: 668px) {
  .row .col-1 {
    width: 3.75%; }
  .row .col-2 {
    width: 12.5%; }
  .row .col-3 {
    width: 21.25%; }
  .row .col-4 {
    width: 30%;
    min-width: 30%; }
  .row .col-5 {
    width: 38.75%; }
  .row .col-6 {
    width: 47.5%; }
  .row .col-7 {
    width: 56.25%; }
  .row .col-8 {
    width: 65%;
    min-width: 65%; }
  .row .col-9 {
    width: 73.75%; }
  .row .col-10 {
    width: 82.5%; }
  .row .col-11 {
    width: 91.25%; }
  .row .col-12 {
    width: 100%; }
  .row .right {
    float: right;
    margin-right: 0;
    margin-left: 5%; } }

@media (orientation: portrait) {
  .row [class^="col-"] {
    margin-bottom: 1.5em; } }

canvas {
  max-width: 100%;
  max-height: 525px;
  display: block;
  margin: -1em auto 0; }

img {
  display: block;
  max-width: 100%;
  max-height: 100%; }

@-webkit-keyframes text-on {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes text-on {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.cost-arrow {
  padding-bottom: 5em;
  margin: 4em 0 2em;
  max-width: 95%; }
  .cost-arrow .bar {
    height: 50px;
    padding-top: 1em; }
    .cost-arrow .bar .bar-section {
      height: 30px;
      display: block;
      position: relative;
      float: left; }
    .cost-arrow .bar .bar1,
    .cost-arrow .bar .bar4 {
      background: #00B8E0; }
    .cost-arrow .bar .bar2 {
      background: #FFD831; }
    .cost-arrow .bar .bar3 {
      background: #A8E600; }
      .cost-arrow .bar .bar3:after {
        content: "";
        height: 0;
        border-top: 2em solid transparent;
        border-left: 2.5em solid #A8E600;
        border-bottom: 2em solid transparent;
        position: absolute;
        right: -2.2em;
        top: 50%;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%); }
  .cost-arrow .graph-bar {
    float: left; }
  .cost-arrow .cost-value {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 180%;
    padding: 0 6px 0.5em;
    line-height: 1.1;
    color: #808080; }
  .cost-arrow .section-coverage {
    position: absolute;
    bottom: 130%;
    color: #333;
    font-weight: 700;
    font-size: 1.25em; }
    @media (min-width: 667px) {
      .cost-arrow .section-coverage {
        bottom: 117%; } }
  .cost-arrow .section-annotations {
    float: left;
    position: relative;
    text-align: center;
    height: 100px; }
    .cost-arrow .section-annotations p {
      width: 100%;
      margin-bottom: 1em; }
    .cost-arrow .section-annotations .milestone-name {
      top: 21%;
      left: calc(100% - 40px);
      position: absolute;
      font-weight: 400;
      width: 80px; }
    .cost-arrow .section-annotations .milestone-amount {
      position: absolute;
      left: 50%;
      top: 61px;
      color: #333;
      font-weight: 700;
      font-size: 1.25em; }
      @media (min-width: 667px) {
        .cost-arrow .section-annotations .milestone-amount {
          top: 70px; } }
      .cost-arrow .section-annotations .milestone-amount:after {
        width: 1px;
        background: #000;
        height: 3.5em;
        position: absolute;
        left: calc(50% - 1px);
        top: -99px;
        content: " "; }
        @media (min-width: 667px) {
          .cost-arrow .section-annotations .milestone-amount:after {
            top: -104px;
            height: 2.5em; } }

.button,
button[value="submit"],
.choice button, input[type="submit"], form button,
form input[type="submit"] {
  background: #ff8458;
  border-radius: 5px;
  border: none;
  color: #fff;
  font: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.25em;
  line-height: normal;
  padding: 0.7em 0.75em;
  text-align: left;
  margin-bottom: 0.75em;
  width: 100%;
  max-width: none;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  min-height: 50px;
  clear: both; }
  @media (min-width: 667px) {
    .button,
    button[value="submit"],
    .choice button, input[type="submit"], form button,
    form input[type="submit"] {
      max-width: 320px; } }
  .button:hover,
  button[value="submit"]:hover,
  .choice button:hover, input[type="submit"]:hover, form button:hover, .button:focus,
  button[value="submit"]:focus,
  .choice button:focus, input[type="submit"]:focus, form button:focus {
    background: #ffad90; }
  .button:active,
  button[value="submit"]:active,
  .choice button:active, input[type="submit"]:active, form button:active {
    -webkit-transform: scale(0.94);
            transform: scale(0.94);
    -webkit-transform-origin: center;
            transform-origin: center;
    background: #ff713f;
    -webkit-transition: -webkit-transform 50ms ease-in-out;
    transition: -webkit-transform 50ms ease-in-out;
    transition: transform 50ms ease-in-out;
    transition: transform 50ms ease-in-out, -webkit-transform 50ms ease-in-out; }
  .button:empty,
  button[value="submit"]:empty,
  .choice button:empty, input[type="submit"]:empty, form button:empty {
    display: none; }

.cancel-button {
  background: #fff;
  color: #ff8458;
  font: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  line-height: normal;
  font-weight: 500;
  font-size: 1.25em;
  padding: 0.5em 0.25em;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: 0.75em;
  border-radius: 0;
  max-width: 320px;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  height: 50px; }
  .cancel-button:hover {
    border-bottom: 2px solid #ff8458; }
  .cancel-button:active, .cancel-button:focus {
    color: #0981b0;
    border-bottom: 2px solid #0981b0; }
  .cancel-button:empty {
    display: none; }

button {
  display: block;
  cursor: pointer;
  outline: none; }
  button:focus, button:active {
    outline: none; }

@media (min-width: 480px) {
  .col-6 .button, .col-6
  button[value="submit"], .col-6
  .choice button {
    max-width: 80%; } }

a {
  color: #ff8458;
  font: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  outline: none; }
  a:hover, a:focus {
    border-bottom: 2px solid #ff8458;
    outline: none; }
  a:active {
    color: #0981b0;
    border-bottom: 2px solid #0981b0; }

.card-header {
  font-weight: 300;
  font-size: 1.375em;
  color: #333;
  margin-bottom: 0;
  padding: 1em;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
  background: #cff5f9; }

.card-header + .card-header {
  margin-top: 0.75em; }

.card-body {
  font-size: 1.375em;
  color: #808080;
  margin-bottom: 1.5em;
  padding: 0 1em 1em;
  margin-bottom: 0.75em;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
  background: #cff5f9; }

.card-body + .card-body {
  margin-top: -1.5em; }

.client-note-header {
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  max-width: 360px;
  position: relative;
  padding: 1em;
  border: 1px solid #f2f2f2;
  border-bottom: none;
  background: #fff; }

.client-note-header + .client-note {
  border-top: none;
  padding-top: 0; }

.client-note-short {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-top: none;
  padding: 0 1em;
  width: 100%;
  max-width: 360px;
  position: relative; }

.client-note {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-top: none;
  padding: 1em;
  width: 100%;
  max-width: 360px;
  position: relative; }

.cost-comparison {
  background: #fff;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
  padding: 0.5em 0 0 0;
  clear: both;
  color: #333;
  position: relative;
  margin-bottom: 0.5em; }
  .cost-comparison .highlights {
    height: 0; }
    .cost-comparison .highlights > div {
      display: none; }
      .cost-comparison .highlights > div:last-child {
        display: inline-block; }
  .cost-comparison .highlight {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0; }
    .cost-comparison .highlight.plan-highlight {
      width: 100%;
      opacity: 0.2;
      background: #cff5f9; }
    .cost-comparison .highlight.star {
      background: url(../img/star.svg) no-repeat;
      background-size: 2.25em;
      height: 2.25em;
      width: 2.25em;
      position: absolute;
      top: 9px;
      left: -20px; }
      @media (min-width: 667px) {
        .cost-comparison .highlight.star {
          background-size: 3em;
          height: 3em;
          width: 3em;
          left: -33px; } }
  .cost-comparison .title,
  .cost-comparison .cost-bar {
    padding-left: 1em;
    padding-right: 1em; }
  .cost-comparison .title {
    font-weight: 300;
    margin-bottom: 0;
    padding-right: 2em;
    font-size: 1.25em; }
  .cost-comparison .cost-bar {
    width: 100%;
    display: inline-block; }
    .cost-comparison .cost-bar .bar {
      height: 20px;
      width: calc(100% - 4px);
      float: left;
      margin-bottom: 1.5em;
      padding-bottom: 3em; }
      .cost-comparison .cost-bar .bar .bar-section {
        position: relative; }
        .cost-comparison .cost-bar .bar .bar-section.bar3 {
          height: 20px;
          background: url("../img/cost-comp-lines-lime.png") repeat-x left center;
          float: left;
          display: block; }
        .cost-comparison .cost-bar .bar .bar-section.bar4 {
          height: 20px;
          background: #fdb4a1;
          float: left;
          display: block; }
        .cost-comparison .cost-bar .bar .bar-section.bar5, .cost-comparison .cost-bar .bar .bar-section:last-child {
          height: 20px;
          background: url("../img/cost-comp-lines-red.png") repeat-x left center;
          float: left;
          display: block; }
        .cost-comparison .cost-bar .bar .bar-section.bar1 {
          height: 20px;
          background: #00B8E0;
          float: left;
          display: block; }
        .cost-comparison .cost-bar .bar .bar-section.bar2 {
          height: 20px;
          background: #A8E600;
          float: left;
          display: block; }
        .cost-comparison .cost-bar .bar .bar-section .section-value {
          font-size: 0.75em;
          position: absolute;
          top: 105%;
          right: 1px; }
      .cost-comparison .cost-bar .bar:empty {
        display: none; }
    .cost-comparison .cost-bar .cost {
      text-align: right;
      font-weight: 700;
      font-size: 1.25em;
      border-right: 2px solid #333;
      width: 2px;
      height: 50px;
      display: inline-block;
      position: relative;
      float: right;
      display: none; }
      .cost-comparison .cost-bar .cost:empty {
        display: none; }
      .cost-comparison .cost-bar .cost .cost-value {
        position: absolute;
        text-align: right;
        width: 300px;
        bottom: -4px;
        right: 8px; }
      @media (min-width: 667px) {
        .cost-comparison .cost-bar .cost {
          height: 60px; } }
  .cost-comparison .bar > div:last-child .cost {
    display: inline-block; }
  .cost-comparison .plan-feature {
    font-size: 1em;
    background: #cff5f9;
    color: #808080;
    font-weight: 500;
    width: 100%;
    padding: 0.25em 1em; }
    .cost-comparison .plan-feature.warning {
      color: #ff3333;
      text-transform: uppercase; }
    .cost-comparison .plan-feature:empty {
      display: none; }

.comparison-description {
  font-weight: 500;
  font-size: 1.5em;
  color: #333; }
  .comparison-description .header {
    margin-bottom: 0.5em; }

.comparison-key {
  margin-bottom: 1.5em; }
  .comparison-key .comparison-key-item {
    width: 10em;
    margin-right: 1em;
    font-size: 0.8em;
    line-height: 1.1em;
    float: left;
    height: 50px; }
    .comparison-key .comparison-key-item .block {
      height: 20px;
      width: 20px;
      float: left;
      margin-right: 0.5em;
      margin-top: -0.5em; }
      @media (min-width: 667px) {
        .comparison-key .comparison-key-item .block {
          margin-right: 1em;
          margin-bottom: 1em;
          margin-top: -0.25em; } }
    .comparison-key .comparison-key-item:nth-child(3) .block {
      background: url("../img/cost-comp-lines-lime.png") repeat-x left center; }
    .comparison-key .comparison-key-item:nth-child(4) .block {
      background: #fdb4a1; }
    .comparison-key .comparison-key-item:nth-child(5) .block, .comparison-key .comparison-key-item:last-child .block {
      background: url("../img/cost-comp-lines-red.png") repeat-x left center; }
    .comparison-key .comparison-key-item:first-child .block {
      background: #00B8E0; }
    .comparison-key .comparison-key-item:nth-child(2) .block {
      background: #A8E600; }

input[type="text"],
input[type="number"],
input[type="email"] {
  width: 100%;
  max-width: 480px;
  border: 1px solid #ff8458;
  padding: 0 0.25rem 0 0.75em;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 0.75em;
  border-radius: 7px;
  height: 50px;
  outline: none; }
  input[type="text"]:active, input[type="text"]:focus,
  input[type="number"]:active,
  input[type="number"]:focus,
  input[type="email"]:active,
  input[type="email"]:focus {
    outline: none;
    border: 1px solid #0981b0; }

textarea {
  width: 100%;
  max-width: 480px;
  height: 120px;
  border: 1px solid #ff8458;
  border-radius: 7px;
  outline: none;
  padding: 0.5em;
  font-size: 1em;
  font-weight: 300;
  resize: vertical;
  margin-bottom: 0.75em; }
  @media (min-width: 667px) {
    textarea {
      height: 170px; } }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
  max-width: 320px;
  font-size: 1.35em;
  -moz-appearance: textfield; }
  input[type="number"][maxlength="2"], input[type="number"][maxlength="3"], input[type="number"][maxlength="4"] {
    float: left;
    width: 80px; }

input[type="text"] {
  font-size: 1.25em; }
  input[type="text"]::-webkit-input-placeholder {
    font-size: 80%; }
  input[type="text"]::-moz-placeholder {
    font-size: 80%; }
  input[type="text"]:-ms-input-placeholder {
    font-size: 80%; }
  input[type="text"]::placeholder {
    font-size: 80%; }

select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 2px solid #ff8458;
  height: 50px;
  font-size: 1.25em;
  font-weight: 500;
  padding: 0 45px 0 10px;
  margin-bottom: 0.75em;
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff url("../img/arrow.png") no-repeat right center;
  background-size: 40px; }

input[type="submit"]:empty {
  display: block; }

form .fib-multi,
form .fib-single {
  *zoom: 1; }
  form .fib-multi:before, form .fib-multi:after,
  form .fib-single:before,
  form .fib-single:after {
    content: " ";
    display: table; }
  form .fib-multi:after,
  form .fib-single:after {
    clear: both; }
  form .fib-multi label,
  form .fib-single label {
    position: relative;
    top: 0;
    left: 12px;
    height: 50px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1.2;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 100px;
    float: left; }
    form .fib-multi label:empty,
    form .fib-single label:empty {
      display: none; }
    @media (min-width: 667px) {
      form .fib-multi label,
      form .fib-single label {
        max-width: none;
        left: 22px; } }

form .fib-single {
  margin-bottom: 1em; }

form label {
  font-size: 1.25em;
  color: #808080; }

form .error {
  margin-bottom: 1em;
  clear: both; }

form button,
form input[type="submit"] {
  outline: none; }
  form button:hover,
  form input[type="submit"]:hover {
    outline: none; }

.checkbox-input {
  border-radius: 4px; }
  .checkbox-input label {
    border-radius: 2px; }
    .checkbox-input label:after {
      width: 16px;
      height: 8px;
      position: absolute;
      top: 5px;
      left: 4px;
      border: 5px solid #0981b0;
      border-top: none;
      border-right: none;
      background: transparent;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg); }

.radiobutton-input {
  border-radius: 32px; }
  .radiobutton-input label {
    border-radius: 25px; }
    .radiobutton-input label:after {
      width: 12px;
      height: 12px;
      border-radius: 20px;
      position: absolute;
      top: 8px;
      left: 8px;
      border: none;
      background: #0981b0; }

.checkbox-input, .radiobutton-input {
  width: 32px;
  height: 32px;
  position: relative;
  background: #0981b0;
  margin-bottom: 1.5em; }
  .checkbox-input label, .radiobutton-input label {
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: absolute;
    left: 2px;
    top: 2px;
    background: #fff; }
    .checkbox-input label:after, .radiobutton-input label:after {
      content: '';
      opacity: 0; }
    .checkbox-input label:hover::after, .radiobutton-input label:hover::after {
      opacity: 0.3; }
  .checkbox-input input[type=checkbox], .radiobutton-input input[type=checkbox], .checkbox-input input[type=radio], .radiobutton-input input[type=radio] {
    visibility: hidden; }
    .checkbox-input input[type=checkbox]:checked + label:after, .radiobutton-input input[type=checkbox]:checked + label:after, .checkbox-input input[type=radio]:checked + label:after, .radiobutton-input input[type=radio]:checked + label:after {
      opacity: 1; }
    .checkbox-input input[type=checkbox]:checked ~ span, .radiobutton-input input[type=checkbox]:checked ~ span, .checkbox-input input[type=radio]:checked ~ span, .radiobutton-input input[type=radio]:checked ~ span {
      font-weight: 700; }
  .checkbox-input span, .radiobutton-input span {
    position: absolute;
    left: 54px;
    top: 3px;
    font-size: 1.25em;
    color: #808080;
    width: 200px; }

.navigation-pane-view .pane {
  background-color: #fff;
  position: fixed;
  right: auto;
  left: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 3px 0 32px -3px #808080;
  overflow-y: auto;
  height: 100%; }
  @media (min-width: 400px) {
    .navigation-pane-view .pane {
      width: 360px; } }

.navigation-pane-view button.close {
  height: 40px;
  width: 40px;
  background: url(../img/x.svg) no-repeat center center;
  background-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  outline: 0;
  z-index: 1; }

.navigation-pane-view .header {
  height: 120px;
  width: 100%;
  position: relative; }
  .navigation-pane-view .header button {
    border: 0;
    text-transform: uppercase;
    font-weight: 900;
    display: inline-block;
    background: transparent;
    font-size: 13px; }
    .navigation-pane-view .header button.restart-modal-trigger {
      color: #90d3d3;
      position: absolute;
      top: 60px;
      right: 5px; }
      .navigation-pane-view .header button.restart-modal-trigger:hover {
        color: #ff3333; }
  .navigation-pane-view .header .alex-logo {
    height: 40px;
    margin: 16px 0 0 16px; }
  .navigation-pane-view .header .progress-bar-view {
    display: none; }
  .navigation-pane-view .header .nav-pane-triggers {
    background: #0981b0;
    height: 32px;
    width: 100%;
    padding: 0 0.5em;
    position: absolute;
    bottom: 0; }
    .navigation-pane-view .header .nav-pane-triggers button {
      color: #fff;
      height: 32px; }
      .navigation-pane-view .header .nav-pane-triggers button:hover {
        color: #cff5f9; }
      .navigation-pane-view .header .nav-pane-triggers button.email-modal-trigger {
        float: right; }

.module-drawer-item-view .module-drawer-item-container {
  height: 52px;
  background: #cff5f9;
  border-bottom: 2px solid #90d3d3;
  font: 100 1em "Foro", serif;
  color: #0981b0;
  font-size: 21px;
  padding: 0.5em 0 0 0.65em;
  position: relative;
  -webkit-font-smoothing: auto; }
  .module-drawer-item-view .module-drawer-item-container:hover {
    background: #e6fafc; }

.module-drawer-item-view i {
  display: none; }

.module-drawer-item-view .open-module {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .module-drawer-item-view .open-module button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/go.svg") no-repeat 95% center;
    background-size: 8px;
    border: none;
    outline: none; }
    .module-drawer-item-view .open-module button:hover {
      background-size: 10px; }
  .module-drawer-item-view .open-module a {
    display: none; }

.plan-selection-summary-view {
  font-weight: 700;
  color: #333;
  font-size: 18px; }
  .plan-selection-summary-view .no-plans {
    display: none; }
  .plan-selection-summary-view ul {
    padding: 0;
    display: none;
    list-style-type: none; }
    .plan-selection-summary-view ul:empty {
      display: none; }
  .plan-selection-summary-view li {
    padding: 0.5em 0 0 0.75em;
    line-height: 1.125em; }
    .plan-selection-summary-view li:nth-child(2) {
      font-weight: 300;
      color: #808080;
      margin-bottom: 0.5em; }
    .plan-selection-summary-view li:empty {
      display: none; }
  .plan-chosen .plan-selection-summary-view ul {
    display: block;
    vertical-align: middle;
    padding: 0.25em 0 0.5em; }

.summary-list {
  color: #808080;
  background: #cff5f9;
  font-size: 1.375em;
  font-weight: 300;
  padding: 1em; }
  .summary-list:last-child {
    margin-bottom: 1.5em; }
  .summary-list ul {
    margin-bottom: 0; }
  .summary-list li {
    margin-bottom: 0.5em;
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1em; }
    .summary-list li:last-child {
      margin-bottom: 0; }

.summary-list + .summary-list {
  padding-top: 0; }

.closedcaption-container {
  background-color: rgba(38, 63, 84, 0.8);
  padding: 10px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px; }
  @media (min-width: 720px) {
    .closedcaption-container {
      margin: 10px;
      padding: 10px 50px; } }

.overlay {
  position: fixed;
  top: 8em;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
  height: calc(100% - 8em);
  width: 100%;
  z-index: 1; }
  .overlay button {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 30%;
    height: 7.375em;
    width: 6.25em;
    background: transparent url("../img/play-big.svg") no-repeat center center;
    border: 0;
    outline: 0; }

.uicontainer {
  position: absolute;
  right: 6%;
  top: 84px;
  background: #fff;
  padding-left: 1em;
  z-index: 2; }
  @media (min-width: 667px) {
    .uicontainer {
      right: 10%; } }

.ui-button {
  width: 50px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  display: inline-block;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.5em;
  color: #0981b0;
  background: #f2f2f2;
  z-index: 9; }
  .ui-button:first-letter {
    padding-right: 3px; }
  .ui-button.selected {
    background: #036991;
    color: #cff5f9; }
  @media (min-width: 720px) {
    .ui-button {
      font-size: 1.3em;
      margin-top: 4px;
      right: 10%; }
      .ui-button:before {
        border-left: 15px solid #fff; } }
  .ui-button#playpause {
    margin-left: 0.5em; }
    .ui-button#playpause.pause-button {
      background: #f2f2f2 url("../img/pause.svg") no-repeat center center;
      background-size: 32px 20px; }
    .ui-button#playpause.play-button {
      background: #036991 url("../img/play.svg") no-repeat center center;
      background-size: 32px 20px; }

#guide h1, #guide h2 {
  font: 100 1em "Foro", serif;
  font-weight: 100;
  display: block;
  max-width: 910px;
  margin: 0.5rem auto;
  background: white; }
  #guide h1:after, #guide h2:after {
    display: none; }

#guide h1 {
  color: #0981b0;
  font-size: 4em;
  text-align: center; }

#guide h2 {
  font-size: 3em;
  color: #ff8458;
  margin-left: -3rem; }

#guide button {
  max-width: 320px; }

#guide nav {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 130px;
  padding: 1em;
  background: rgba(255, 255, 255, 0.5); }
  #guide nav a {
    margin-bottom: 1em;
    font: 100 1em "Foro", serif;
    font-weight: 100;
    display: block; }
    #guide nav a:hover {
      color: #ff8458;
      background: #edf9fe; }
    #guide nav a.active {
      background: #edf9fe; }

#guide .container {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto 2em;
  padding: 0 2em 2em;
  border: 4px solid #edf9fe;
  background: #fff; }
  #guide .container .label {
    display: block;
    color: #036991;
    font: 100 1em "Foro", serif;
    margin: 3em auto 1em -2em;
    width: auto;
    max-width: 200px;
    background: #edf9fe;
    padding: 0.25em; }
    #guide .container .label span {
      font-size: 12px;
      font-style: italic;
      display: block; }

#guide .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  #guide .flex div {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 30%;
            flex: 1 0 30%;
    font-weight: 500;
    font-size: 0.8em;
    line-height: 1.5;
    color: #fff;
    padding: 1em;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0.5em; }
    #guide .flex div.alex-blue {
      background: #0981b0; }
    #guide .flex div.alex-orange {
      background: #ff8458; }
    #guide .flex div.red {
      background: #ff3333; }
    #guide .flex div.navy {
      background: #036991; }
    #guide .flex div.light-blue {
      background: #cff5f9;
      color: #333; }
    #guide .flex div.aqua {
      background: #90d3d3;
      color: #333; }
    #guide .flex div.text {
      background: #808080; }
    #guide .flex div.black {
      background: #333; }
    #guide .flex div.light-gray {
      background: #f2f2f2;
      color: #333; }
    #guide .flex div.gray {
      background: #BDB9B2; }
    #guide .flex div.beige {
      background: #E9D19D;
      color: #333; }
    #guide .flex div.tan {
      background: #CEA65A;
      color: #333; }
    #guide .flex div.brown {
      background: #726848; }
    #guide .flex div.graphite {
      background: #414042; }
    #guide .flex div.ink {
      background: #2F2F52; }
    #guide .flex div.slate {
      background: #263F54; }
    #guide .flex div.royal-blue {
      background: #0E0AFC; }
    #guide .flex div.blue {
      background: #00B8E0; }
    #guide .flex div.cyan {
      background: #6DE1C0;
      color: #333; }
    #guide .flex div.green {
      background: #3CBF00; }
    #guide .flex div.lime {
      background: #A8E600;
      color: #333; }
    #guide .flex div.yellow {
      background: #FFD831;
      color: #333; }
    #guide .flex div.warm-orange {
      background: #FF8458; }
    #guide .flex div.orange {
      background: #FB5024; }
    #guide .flex div.red {
      background: #E20D1C; }
    #guide .flex div.fuchsia {
      background: #FB5077; }
    #guide .flex div.pink {
      background: #FF8ADC;
      color: #333; }
    #guide .flex div.purple {
      background: #8E0C70; }
  #guide .flex.flex-6 div {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 13%;
            flex: 1 0 13%; }

#guide .row {
  margin-bottom: 3%; }

#guide [class^="col-"] {
  height: 20px; }
  #guide [class^="col-"]:nth-child(1) {
    background: #6DE1C0; }
  #guide [class^="col-"]:nth-child(2) {
    background: #A8E600; }
  #guide [class^="col-"]:nth-child(3) {
    background: #00B8E0; }
  #guide [class^="col-"]:nth-child(4) {
    background: #FFD831; }
  #guide [class^="col-"]:nth-child(5) {
    background: #3CBF00; }
  #guide [class^="col-"]:nth-child(6) {
    background: #FB5077; }
  #guide [class^="col-"]:nth-child(7) {
    background: #FF8458; }
  #guide [class^="col-"]:nth-child(8) {
    background: #FF8ADC; }
  #guide [class^="col-"]:nth-child(9) {
    background: #0E0AFC; }
  #guide [class^="col-"]:nth-child(10) {
    background: #8E0C70; }
  #guide [class^="col-"]:nth-child(11) {
    background: #FB5024; }
  #guide [class^="col-"]:nth-child(12) {
    background: #E20D1C; }
  .common-configurations #guide [class^="col-"] {
    background: #0981b0; }

#guide [class^="art_"] {
  border: 4px dashed #808080; }

#guide .pause-button,
#guide .play-button {
  float: none; }

#guide .prob-not {
  opacity: 0.5;
  background: #f2f2f2; }

#guide .common-configurations .row {
  padding-bottom: 1em; }
  #guide .common-configurations .row [class^="col-"] {
    height: 150px; }

#previewer .art {
  width: 100%;
  margin: 0 auto 1.5em;
  background: #f2f2f2;
  border: 10px dashed #808080;
  position: relative;
  height: 525px; }
  #previewer .art div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 1.5em; }

#previewer .options-panel {
  position: fixed;
  width: 320px;
  height: 100%;
  background: #fff;
  border-left: 4px solid #808080;
  padding: 4em 1em 1em;
  right: 0;
  top: 0;
  overflow-y: auto; }
  #previewer .options-panel select {
    font-size: 14px; }
  #previewer .options-panel h3 {
    margin-top: 0.5em;
    font-weight: 700;
    color: #0981b0;
    text-transform: uppercase;
    font-size: 12px; }
  #previewer .options-panel #panelToggle {
    height: 0;
    border-left: 1.5em solid #0981b0;
    width: 0;
    position: absolute;
    left: 0.75em;
    top: 0.75em;
    border-bottom: 0.75em solid transparent;
    border-top: 0.75em solid transparent;
    border-radius: 6px;
    cursor: pointer; }
    #previewer .options-panel #panelToggle:after {
      content: 'hide';
      position: absolute;
      top: 15px;
      left: -19px;
      font-size: 10px;
      color: #808080; }
      @media (min-width: 667px) {
        #previewer .options-panel #panelToggle:after {
          left: -24px; } }
  #previewer .options-panel.closed {
    right: calc(-320px + 3em);
    height: 5em;
    background: transparent;
    border-left: none;
    overflow-y: hidden; }
    #previewer .options-panel.closed form,
    #previewer .options-panel.closed .toggles {
      display: none; }
    #previewer .options-panel.closed #panelToggle {
      height: 0;
      border-right: 1.5em solid #0981b0;
      border-left: none;
      width: 0;
      position: absolute;
      left: 0.75em;
      top: 0.75em;
      border-bottom: 0.75em solid transparent;
      border-top: 0.75em solid transparent; }
      #previewer .options-panel.closed #panelToggle:after {
        content: 'config';
        left: -8px; }
        @media (min-width: 667px) {
          #previewer .options-panel.closed #panelToggle:after {
            left: -3px; } }

#previewer .toggle-input {
  display: block; }
  #previewer .toggle-input input,
  #previewer .toggle-input label {
    display: inline-block;
    padding: 0.25em;
    font-weight: 500;
    font-size: 14px; }
  #previewer .toggle-input input:checked,
  #previewer .toggle-input input:checked + label {
    background: #cff5f9;
    color: #0981b0; }