.wsk-shadow--z1 {
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }

.wsk-shadow--z2 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }

.wsk-shadow--z3 {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }

.wsk-shadow--z4 {
  box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }

.wsk-shadow--z5 {
  box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }

/* 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.
*/
mark {
  background-color: #f4ff81; }

dt {
  font-weight: 700; }


.wsk-navigation {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }

.wsk-navigation__link {
  color: #424242;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin: 0; }

.wsk-navigation__link:hover {
  background-color: #e0e0e0; }

.wsk-layout {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; }

.wsk-layout__container {
  position: absolute;
  width: 100%;
  height: 100%; }

.wsk-layout-title {
  display: block;
  position: relative;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  box-sizing: border-box; }

.wsk-layout-spacer {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.wsk-layout__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  border: none;
  height: 64px;
  min-height: 64px;
  background-color: #2196f3;
  color: #eeeeee;
  z-index: 3;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  transition-property: min-height, box-shadow;
  padding-left: 80px;
  overflow: hidden; }
  @media screen and (max-width: 850px) {
    .wsk-layout__header {
      height: 56px;
      min-height: 56px;
      padding-left: 72px; } }
  .wsk-layout--fixed-drawer:not(.is-small-screen) > .wsk-layout__header {
    padding-left: 24px; }
  .wsk-layout__header > .wsk-layout-icon {
    position: absolute;
    left: 24px;
    top: 16px;
    height: 32px;
    width: 32px;
    overflow: hidden;
    z-index: 3; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header > .wsk-layout-icon {
        left: 16px;
        top: 12px; } }
  .wsk-layout__header.is-compact {
    min-height: 64px; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header.is-compact {
        min-height: 56px; } }
  .wsk-layout__header > * {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0; }
  .wsk-layout__header > *:last-child {
    margin-right: 24px; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header > *:last-child {
        margin-right: 16px; } }
  .wsk-layout__header > .wsk-navigation:last-child {
    margin-right: 0; }
  .wsk-layout__header .wsk-layout-title {
    display: block; }
  .wsk-layout__header .wsk-navigation {
    margin: 0;
    padding: 0;
    height: 64px;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header .wsk-navigation {
        height: 56px; } }
  .wsk-layout__header .wsk-navigation__link {
    color: #eeeeee;
    line-height: 64px;
    padding: 0 24px; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header .wsk-navigation__link {
        line-height: 56px;
        padding: 0 16px; } }
  .wsk-layout__header .wsk-navigation__link:hover {
    background-color: rgba(97, 97, 97, 0.6); }
  @media screen and (min-width: 851px) {
    .wsk-layout--fixed-drawer > .wsk-layout__header {
      margin-left: 240px; } }
  @media screen and (max-width: 850px) {
    .wsk-layout__header {
      display: none; }
    .wsk-layout--fixed-header > .wsk-layout__header {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; } }

.wsk-layout__header--multi-row {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.wsk-layout__header--medium-tall {
  min-height: 128px; }
  @media screen and (max-width: 850px) {
    .wsk-layout__header--medium-tall {
      min-height: 112px; } }

.wsk-layout__header--tall {
  min-height: 192px; }
  @media screen and (max-width: 850px) {
    .wsk-layout__header--tall {
      min-height: 168px; } }

.wsk-layout__header--transparent.wsk-layout__header--transparent {
  background-color: transparent;
  box-shadow: none; }

.wsk-layout__header--seamed {
  box-shadow: none; }

.wsk-layout__header--scroll {
  box-shadow: none; }

.wsk-layout__header--waterfall {
  box-shadow: none; }
  .wsk-layout__header--waterfall.is-casting-shadow {
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }

.wsk-layout__header-row.wsk-layout__header-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 64px;
  width: 100%;
  margin-right: 0; }
  @media screen and (max-width: 850px) {
    .wsk-layout__header-row.wsk-layout__header-row {
      min-height: 56px; } }
  .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
    position: absolute;
    left: 24px;
    top: 16px;
    height: 32px;
    width: 32px;
    overflow: hidden;
    z-index: 3; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
        left: 16px;
        top: 12px; } }
  .wsk-layout__header-row.wsk-layout__header-row > * {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0; }
  .wsk-layout__header-row.wsk-layout__header-row > *:last-child {
    margin-right: 24px; }
    @media screen and (max-width: 850px) {
      .wsk-layout__header-row.wsk-layout__header-row > *:last-child {
        margin-right: 16px; } }
  .wsk-layout__header-row.wsk-layout__header-row > .wsk-navigation:last-child {
    margin-right: 0; }

.wsk-layout__content {
  -ms-flex: 0 1 auto;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  z-index: 1; }
  .wsk-layout--fixed-drawer > .wsk-layout__content {
    margin-left: 240px; }
  .wsk-layout__header--scroll ~ .wsk-layout__content {
    overflow: visible; }
  @media screen and (max-width: 850px) {
    .wsk-layout--fixed-drawer > .wsk-layout__content {
      margin-left: 0; }
    .wsk-layout__header--scroll ~ .wsk-layout__content {
      overflow-y: auto;
      overflow-x: hidden; } }


/* 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; }


/* Card dimensions */
/* Cover image */
.wsk-card {
  font-size: 16px;
  height: 508px;
  overflow: hidden;
  width: 330px;
  z-index: 1;
  position: relative;
  background: white; }

.wsk-card--img-container {
  background-color: #42a5f5;
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-origin: padding-box;
  background-attachment: scroll;
  height: 186px; }

.wsk-card--heading {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1976d2 none repeat scroll 0 0/auto padding-box border-box;
  border: 0 none white;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  height: 96px;
  -ms-grid-column-align: stretch;
      justify-items: stretch;
  line-height: normal;
  outline: white none 0;
  padding: 8px 16px;
  -webkit-perspective-origin: 165px 56px;
          perspective-origin: 165px 56px;
  text-decoration: none solid white;
  -webkit-transform-origin: 165px 56px;
          transform-origin: 165px 56px;
  width: 100%; }

.wsk-card--heading-text {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  border: 0 none white;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: inherit;
  font-weight: 300;
  height: 96px;
  justify-self: stretch;
  line-height: normal;
  outline: white none 0;
  overflow: hidden;
  text-decoration: none solid white;
  -webkit-transform-origin: 149px 48px;
          transform-origin: 149px 48px;
  width: 90%; }

.wsk-card--caption {
  background: #0d47a1 none repeat scroll 0 0/auto padding-box border-box;
  border: 0 none white;
  color: white;
  font-size: 12px;
  height: 16px;
  line-height: normal;
  outline: white none 0;
  padding: 8px 16px;
  -webkit-perspective-origin: 165px 16px;
          perspective-origin: 165px 16px;
  text-decoration: none solid white;
  width: 100%; }

.wsk-card--lower {
  border: 0 none #444444;
  color: #0d47a1;
  font-size: 13px;
  height: 108px;
  line-height: 18px;
  margin: 10px 0;
  outline: #444444 none 0;
  overflow: hidden;
  padding: 0 16px;
  text-decoration: none solid #444444;
  width: 90%; }

.wsk-card--bottom {
  font-size: 16px;
  height: 50px;
  line-height: normal;
  width: 100%; }

.wsk-card--bottom a {
  border-bottom: 0 none #303f9f;
  border-left: 0 none #303f9f;
  border-right: 0 none #303f9f;
  border-top: 1px solid #ebebeb;
  box-sizing: border-box;
  color: #0d47a1;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: normal;
  height: 50px;
  line-height: 50px;
  outline: #303f9f none 0;
  padding: 0 16px;
  -webkit-perspective-origin: 165px 25px;
          perspective-origin: 165px 25px;
  text-decoration: none solid #303f9f;
  text-transform: uppercase;
  -webkit-transform-origin: 165px 25px;
          transform-origin: 165px 25px;
  width: 100%; }


/**
 *
 * Dimensions
 *
 */
.wsk-button {
  background: transparent;
  border: none;
  border-radius: 2px;
  color: #000;
  display: block;
  position: relative;
  height: 36px;
  min-width: 64px;
  padding: 0 8px;
  margin: 0 4px;
  display: inline-block;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
  overflow: hidden;
  will-change: box-shadow, transform;
  outline: none;
  cursor: pointer; }
  .wsk-button::-moz-focus-inner {
    border: 0; }
  .wsk-button:hover {
    background-color: rgba(153, 153, 153, 0.2); }
  .wsk-button:focus:not(:active) {
    background-color: rgba(0, 0, 0, 0.12); }
  .wsk-button:active {
    background-color: rgba(153, 153, 153, 0.4); }
  .wsk-button[disabled][disabled] {
    color: rgba(0, 0, 0, 0.26);
    cursor: auto;
    background-color: transparent; }
  .wsk-button.wsk-button--colored {
    color: #2196f3; }
    .wsk-button.wsk-button--colored:focus:not(:active) {
      background-color: rgba(0, 0, 0, 0.12); }

.wsk-button--raised {
  background: rgba(153, 153, 153, 0.2);
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
  .wsk-button--raised:active {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23);
    background-color: rgba(153, 153, 153, 0.4); }
  .wsk-button--raised:focus:not(:active) {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
    background-color: rgba(153, 153, 153, 0.4); }
  .wsk-button--raised.wsk-button--colored {
    background: #2196f3;
    color: #fff; }
    .wsk-button--raised.wsk-button--colored:hover {
      background-color: #1e88e5; }
    .wsk-button--raised.wsk-button--colored:active {
      background-color: #1976d2; }
    .wsk-button--raised.wsk-button--colored:focus:not(:active) {
      background-color: #1976d2; }
    .wsk-button--raised.wsk-button--colored .wsk-ripple {
      background: white; }
  .wsk-button--raised[disabled][disabled] {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.26);
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }

.wsk-button--fab {
  border-radius: 50%;
  font-size: 24px;
  height: 56px;
  margin: auto;
  min-width: 56px;
  width: 56px;
  padding: 0;
  overflow: hidden;
  background: rgba(153, 153, 153, 0.2);
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
  .wsk-button--fab.wsk-button--mini-fab {
    height: 40px;
    min-width: 40px;
    width: 40px; }
  .wsk-button--fab .wsk-button__ripple-container {
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
  .wsk-button--fab:active {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23);
    background-color: rgba(153, 153, 153, 0.4); }
  .wsk-button--fab:focus:not(:active) {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
    background-color: rgba(153, 153, 153, 0.4); }
  .wsk-button--fab.wsk-button--colored {
    background: #42a5f5;
    color: #fff; }
    .wsk-button--fab.wsk-button--colored:hover {
      background-color: #2196f3; }
    .wsk-button--fab.wsk-button--colored:focus:not(:active) {
      background-color: #1e88e5; }
    .wsk-button--fab.wsk-button--colored:active {
      background-color: #1e88e5; }
    .wsk-button--fab.wsk-button--colored .wsk-ripple {
      background: white; }
  .wsk-button--fab[disabled][disabled] {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.26);
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }

.wsk-button--icon {
  border-radius: 50%;
  font-size: 24px;
  height: 32px;
  margin-left: 0;
  margin-right: 0;
  min-width: 32px;
  width: 32px;
  padding: 0;
  overflow: hidden; }
  .wsk-button--icon .wsk-button__ripple-container {
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }

.wsk-button__ripple-container {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  overflow: hidden; }
  .wsk-button[disabled] .wsk-button__ripple-container .wsk-ripple {
    background-color: transparent; }