demo.css

@charset "UTF-8";
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio, canvas, img, svg, video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden; }

/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request: h5bp.com/r
   ========================================================================== */
@media print {
  *, *:before, *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }
  a, a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after, a[href^="javascript:"]:after {
    content: ""; }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group;
    /* h5bp.com/t */ }
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2, h3 {
    page-break-after: avoid; } }

/* We're splitting fonts into "preferred" and "performance" in order to optimize
   page loading. For important text, such as the body, we want it to load
   immediately and not wait for the web font load, whereas for other sections,
   such as headers and titles, we're OK with things taking a bit longer to load.
   We do have some optional classes and parameters in the mixins, in case you
   definitely want to make sure you're using the preferred font and don't mind
   the performance hit.
   We should be able to improve on this once CSS Font Loading L3 becomes more
   widely available.
*/
html, body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0; }

/**
 * Styles for HTML elements
 */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.54;
  font-size: 0.6em; }

h1 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em; }

h2 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px; }

h3 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px; }

h4 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale; }

h5 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em; }

h6 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em; }

p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  margin: 0 0 16px 0; }

a {
  font-weight: bold; }

blockquote {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.08em; }
  blockquote:before {
    content: '“';
    opacity: 0.54; }
  blockquote:after {
    content: '”';
    opacity: 0.54; }

mark {
  background-color: #f4ff81; }

dt {
  font-weight: 700; }

/**
 * Class Name Styles
 */
.wsk-typography--display-4 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em; }

.wsk-typography--display-4--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.54; }

.wsk-typography--display-3 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em; }

.wsk-typography--display-3--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.54; }

.wsk-typography--display-2 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px; }

.wsk-typography--display-2--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;
  opacity: 0.54; }

.wsk-typography--display-1 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px; }

.wsk-typography--display-1--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
  opacity: 0.54; }

.wsk-typography--headline {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale; }

.wsk-typography--headline--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0.87; }

.wsk-typography--title {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em; }

.wsk-typography--title--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.87; }

.wsk-typography--subhead {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em; }

.wsk-typography--subhead--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--body-2 {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0.04em; }

.wsk-typography--Body-2--colorContrast {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--body-1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em; }

.wsk-typography--body-1--colorContrast {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--body-2--forcePreferredFont {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.04em; }

.wsk-typography--Body-2--forcePreferredFont--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--body-1--forcePreferredFont {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em; }

.wsk-typography--body-1--forcePreferredFont--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em; }

.wsk-typography--caption--forcePreferredFont {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em; }

.wsk-typography--caption--colorContrast {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0.54; }

.wsk-typography--caption--forcePreferredFont--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0.54; }

.wsk-typography--menu {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em; }

.wsk-typography--menu--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--button {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em; }

.wsk-typography--button--colorContrast {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.87; }

.wsk-typography--textLeft {
  text-align: left; }

.wsk-typography--textRight {
  text-align: right; }

.wsk-typography--textCenter {
  text-align: center; }

.wsk-typography--textJustify {
  text-align: justify; }

.wsk-typography--textNowrap {
  white-space: nowrap; }

.wsk-typography--textLowercase {
  text-transform: lowercase; }

.wsk-typography--textUppercase {
  text-transform: uppercase; }

.wsk-typography--textCapitalize {
  text-transform: capitalize; }

.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9; }

.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9; }

/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/* ==========  Color Palettes  ========== */
html, body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0; }

body {
  padding: 24px;
  box-sizing: border-box;
  background: #FFF; }

body > h2 {
  margin-top: 24px;
  margin-bottom: 12px; }

.PreviewBlock {
  background: #f5f5f5;
  padding: 20px; }

/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/* ==========  Color Palettes  ========== */
/* ==========  Color & Themes  ========== */
/* ==========  Typography  ========== */
/* ==========  Components  ========== */
/* ==========  Standard Buttons  ========== */
/* ==========  Icon Toggles  ========== */
/* ==========  Radio Buttons  ========== */
/* ==========  Ripple effect  ========== */
/* ==========  Layout  ========== */
/* ==========  Content Tabs  ========== */
/* ==========  Checkboxes  ========== */
/* ==========  Switches  ========== */
/* ==========  Spinner  ========== */
/* ==========  Text fields  ========== */
/* ==========  Card  ========== */
/* Heading back */
/* ==========  Sliders ========== */
/* ==========  List ========== */
/* ==========  Item ========== */
/* ==========  Dropdown menu ========== */
/* ==========  Tooltips  ========== */
/* ==========  Footer  ========== */
/**************
 *
 * Sizes
 *
 *************/
.wsk-mega-footer {
  padding: 48px 24px;
  color: #A0A0A0;
  background-color: #454545; }

.wsk-mega-footer--top-section:after, .wsk-mega-footer--middle-section:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 24px;
  border-color: #A0A0A0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  clear: both; }

.wsk-mega-footer--left-section {
  margin-bottom: 24px; }

.wsk-mega-footer--right-section {
  margin-bottom: 24px; }

.wsk-mega-footer--right-section a {
  display: block;
  margin-bottom: 24px;
  color: inherit;
  text-decoration: none; }

@media screen and (min-width: 760px) {
  .wsk-mega-footer--left-section {
    float: left; }
  .wsk-mega-footer--right-section {
    float: right; }
  .wsk-mega-footer--right-section a {
    display: inline-block;
    margin-left: 24px;
    line-height: 36px;
    vertical-align: middle; } }

.wsk-mega-footer--social-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: #A0A0A0;
  border: none; }

.wsk-mega-footer--drop-down-section {
  display: block;
  position: relative; }

@media screen and (min-width: 760px) {
  .wsk-mega-footer--drop-down-section {
    width: 33%; }
  .wsk-mega-footer--drop-down-section:nth-child(1), .wsk-mega-footer--drop-down-section:nth-child(2) {
    float: left; }
  .wsk-mega-footer--drop-down-section:nth-child(3) {
    float: right; }
    .wsk-mega-footer--drop-down-section:nth-child(3):after {
      clear: right; }
  .wsk-mega-footer--drop-down-section:nth-child(4) {
    float: right; }
  .wsk-mega-footer--middle-section:after {
    content: '';
    display: block;
    clear: both; } }

@media screen and (min-width: 1024px) {
  .wsk-mega-footer--drop-down-section, .wsk-mega-footer--drop-down-section:nth-child(3), .wsk-mega-footer--drop-down-section:nth-child(4) {
    width: 24%;
    float: left; } }

.wsk-mega-footer--heading-checkbox {
  position: absolute;
  width: 100%;
  height: 84px;
  padding: 48px;
  margin: 0;
  margin-top: -24px;
  cursor: pointer;
  z-index: 1;
  opacity: 0; }
  .wsk-mega-footer--heading-checkbox ~ .wsk-mega-footer--heading:after {
    background-image: url('images/up_arrow.svg'); }

.wsk-mega-footer--heading-checkbox:checked ~ ul {
  display: none; }
.wsk-mega-footer--heading-checkbox:checked ~ .wsk-mega-footer--heading:after {
  background-image: url('images/down_arrow.svg'); }

.wsk-mega-footer--heading {
  position: relative;
  width: 100%;
  padding-right: 60px;
  margin-bottom: 48px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #E2E2E2; }

.wsk-mega-footer--heading:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 36px;
  height: 36px;
  background-size: cover; }

.wsk-mega-footer--link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 48px; }

.wsk-mega-footer--link-list li {
  margin-bottom: 24px; }

.wsk-mega-footer--link-list a {
  color: inherit;
  text-decoration: none; }

@media screen and (min-width: 760px) {
  .wsk-mega-footer--heading-checkbox {
    display: none; }
    .wsk-mega-footer--heading-checkbox ~ .wsk-mega-footer--heading:after {
      background-image: none; }
  .wsk-mega-footer--heading-checkbox:checked ~ ul {
    display: block; }
  .wsk-mega-footer--heading-checkbox:checked ~ .wsk-mega-footer--heading:after {
    background-image: none; } }

.wsk-mega-footer--bottom-section {
  margin-bottom: 24px; }

.wsk-mega-footer--bottom-section:after {
  content: '';
  display: block;
  clear: both; }

.wsk-logo {
  margin-bottom: 24px;
  font-size: 24px; }

.wsk-mega-footer--bottom-section .wsk-mega-footer--link-list li {
  float: left;
  margin-bottom: 0;
  margin-right: 24px; }

@media screen and (min-width: 760px) {
  .wsk-logo {
    float: left;
    margin-bottom: 0;
    margin-right: 24px; } }

/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/* ==========  Color Palettes  ========== */
/* ==========  Color & Themes  ========== */
/* ==========  Typography  ========== */
/* ==========  Components  ========== */
/* ==========  Standard Buttons  ========== */
/* ==========  Icon Toggles  ========== */
/* ==========  Radio Buttons  ========== */
/* ==========  Ripple effect  ========== */
/* ==========  Layout  ========== */
/* ==========  Content Tabs  ========== */
/* ==========  Checkboxes  ========== */
/* ==========  Switches  ========== */
/* ==========  Spinner  ========== */
/* ==========  Text fields  ========== */
/* ==========  Card  ========== */
/* Heading back */
/* ==========  Sliders ========== */
/* ==========  List ========== */
/* ==========  Item ========== */
/* ==========  Dropdown menu ========== */
/* ==========  Tooltips  ========== */
/* ==========  Footer  ========== */
/**************
 *
 * Sizes
 *
 *************/
.wsk-mini-footer {
  padding: 48px 24px;
  color: #A0A0A0;
  background-color: #454545; }

.wsk-mini-footer:after {
  content: '';
  display: block;
  clear: both; }

.wsk-mini-footer--link-list {
  list-style: none;
  margin: 0;
  padding: 0; }

.wsk-mini-footer--link-list li {
  float: left;
  margin-bottom: 0;
  margin-right: 24px; }

.wsk-mini-footer--link-list a {
  color: inherit;
  text-decoration: none; }

.wsk-mini-footer--left-section {
  float: left; }

.wsk-mini-footer--right-section {
  float: right; }

.wsk-mini-footer--social-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: #A0A0A0;
  border: none; }

.wsk-mini-footer .wsk-logo {
  float: left;
  line-height: 36px; }

.wsk-mini-footer--link-list {
  float: left;
  clear: left; }

@media screen and (min-width: 760px) {
  .wsk-mini-footer--link-list {
    clear: none; }
  .wsk-mini-footer--link-list li {
    line-height: 36px; } }

body {
  padding: 0; }

footer {
  margin-bottom: 16px; }