/* Web Starter Kit  Multi-screen layout styles for your page. Brought to you by the Web Starter Kit team.  */
/* HTML5 Boilerplate  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, button, input, select, textarea { color: #222; }

body { font-size: 1em; line-height: 1.4; }

a { color: #00e; }

a:visited { color: #551a8b; }

a:hover { color: #06e; }

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

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

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

/* ========================================================================== Author's custom styles ========================================================================== */
/* ========================================================================== Helper classes ========================================================================== */
/* Prevent callout */
.nocallout { -webkit-touch-callout: none; }

.pressed { background-color: rgba(0, 0, 0, 0.7); }

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] { -webkit-appearance: none; }

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
.gifhidden { position: absolute; left: -100%; }

/* Image replacement */
.ir { background-color: transparent; background-repeat: no-repeat; border: 0; direction: ltr; display: block; overflow: hidden; text-align: left; text-indent: -999em; }

.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: 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 screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/** Clearfix helper Used to contain floats: h5bp.com/q */
.clearfix::before, ul.list-links a.clearfix::before, .list-anchor a.clearfix::before, .clearfix::after { content: ""; display: table; }

.clearfix::after { clear: both; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. Theses examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 800px) { /* Style adjustments for viewports that meet the condition */ }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { /* Style adjustments for viewports that meet the condition */ }
/* Visual Style Guide styles Remove if you prefer to use a CSS library, like Bootstrap */
/**
*
* Main Stylesheet For KLEE
*
**/
/**
*
* Utils
*
**/
/*==========  VARIABLES  ==========*/
/*==========  FUNCTIONS  ==========*/
/*==========  MIXINS  ==========*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Remove margin */
figure { margin: 0; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

/* Blockquote ========================================================================== */
blockquote { margin: 0; }

/**
*
* Global
*
**/
*, *::before, ul li::before, ul.list-links a::before, ul.list-links.list-links--primary a::before, .list-anchor a::before, *::after { box-sizing: border-box; }

html, body, button { -moz-osx-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6250em; /* 26px */ font-weight: 300; color: #404040; position: relative; }
body::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; z-index: 9; display: none; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 95%, rgba(0, 0, 0, 0.15) 100%); background-size: 100% 26px; }
body.debug::after { display: block; pointer-events: none; }

code, kbd, pre, samp { font-family: "Source Code Pro", monospace; font-size: 1em; }

pre { background: #f0f0f0; padding: 13px; }

.main-container { box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; }
@media only screen and (min-width: 620px) { .main-container { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } }
@media only screen and (min-width: 800px) { .main-container { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } }

.container { box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; }
@media only screen and (min-width: 620px) { .container { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } }
@media only screen and (min-width: 800px) { .container { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } }

@media only screen and (min-width: 620px) { .container-medium { box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } }
@media only screen and (min-width: 620px) and (min-width: 620px) { .container-medium { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } }
@media only screen and (min-width: 620px) and (min-width: 800px) { .container-medium { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } }

@media only screen and (max-width: 619px) { .container-small { box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } }
@media only screen and (max-width: 619px) and (min-width: 620px) { .container-small { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } }
@media only screen and (max-width: 619px) and (min-width: 800px) { .container-small { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } }

@media only screen and (min-width: 800px) { .content { margin-right: 25.9%; }
  .content pre { margin-right: -25.9%; } }

@font-face { font-family: icons; src: url(../images/icons/icons.eot); src: url(../images/icons/icons.eot?#iefix) format("embedded-opentype"), url(../images/icons/icons.woff2) format("woff2"), url(../images/icons/icons.woff) format("woff"), url(../images/icons/icons.ttf) format("truetype"), url(../images/icons/icons.svg?#icons) format("svg"); font-weight: normal; font-style: normal; }
.icon { font-family: 'icons'; display: inline-block; vertical-align: top; line-height: 1; font-weight: normal; font-style: normal; speak: none; text-decoration: inherit; text-transform: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-bullet::before, ul li::before, ul.list-links a::before, ul.list-links.list-links--primary a::before, .list-anchor a::before { content: "\e001"; }

.icon-chevron-down::before, ul.list-links a.icon-chevron-down::before, .list-anchor a.icon-chevron-down::before { content: '\e002'; }

.icon-chevron-large::before, ul.list-links a.icon-chevron-large::before, .list-anchor a.icon-chevron-large::before { content: '\e003'; }

.icon-chevron-left::before, ul.list-links a.icon-chevron-left::before, .list-anchor a.icon-chevron-left::before { content: '\e004'; }

.icon-chevron-right::before, ul.list-links a.icon-chevron-right::before, ul.list-links.list-links--primary a::before, .list-anchor a.icon-chevron-right::before { content: '\e005'; }

.icon-chevron-up::before, ul.list-links a.icon-chevron-up::before, .list-anchor a.icon-chevron-up::before { content: '\e006'; }

.icon-close::before, ul.list-links a.icon-close::before, .list-anchor a.icon-close::before { content: '\e007'; }

.icon-cog::before, ul.list-links a.icon-cog::before, .list-anchor a.icon-cog::before { content: '\e008'; }

.icon-diamond::before, ul.list-links a.icon-diamond::before, .list-anchor a.icon-diamond::before { content: '\e009'; }

.icon-exclamation::before, ul.list-links a.icon-exclamation::before, .list-anchor a.icon-exclamation::before { content: '\e00a'; }

.icon-google-dev::before, ul.list-links a.icon-google-dev::before, .list-anchor a.icon-google-dev::before { content: '\e00b'; }

.icon-hash::before, ul.list-links a.icon-hash::before, .list-anchor a.icon-hash::before { content: '\e00c'; }

.icon-introduction-to-media::before, ul.list-links a.icon-introduction-to-media::before, .list-anchor a.icon-introduction-to-media::before { content: '\e00d'; }

.icon-lessons::before, ul.list-links a.icon-lessons::before, .list-anchor a.icon-lessons::before { content: '\e00e'; }

.icon-menu::before, ul.list-links a.icon-menu::before, .list-anchor a.icon-menu::before { content: '\e00f'; }

.icon-minus::before, ul.list-links a.icon-minus::before, .list-anchor a.icon-minus::before { content: '\e010'; }

.icon-multi-device-layouts::before, ul.list-links a.icon-multi-device-layouts::before, .list-anchor a.icon-multi-device-layouts::before { content: '\e011'; }

.icon-performance::before, ul.list-links a.icon-performance::before, .list-anchor a.icon-performance::before { content: '\e012'; }

.icon-plus::before, ul.list-links a.icon-plus::before, .list-anchor a.icon-plus::before { content: '\e013'; }

.icon-question::before, ul.list-links a.icon-question::before, .list-anchor a.icon-question::before { content: '\e014'; }

.icon-slash::before, ul.list-links a.icon-slash::before, .list-anchor a.icon-slash::before { content: '\e015'; }

.icon-star::before, ul.list-links a.icon-star::before, .list-anchor a.icon-star::before { content: '\e016'; }

.icon-tick::before, ul.list-links a.icon-tick::before, .list-anchor a.icon-tick::before { content: '\e017'; }

.icon-user-input::before, ul.list-links a.icon-user-input::before, .list-anchor a.icon-user-input::before { content: '\e018'; }

/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/* ==========  Blacks  ========== */
/* ==========  Color Palettes  ========== */
/* ==========  Color definitions  ========== */
/**
*
* Editorial Header
*
**/
.editorial-header { overflow: hidden; }
.editorial-header .breadcrumbs { color: #3372df; }
.editorial-header .breadcrumbs a { color: #3372df; }

.editorial-header__excerpt { font-size: 20px; font-weight: 300; line-height: 1.3000em; /* 26px */ padding-top: 1.3000em; padding-bottom: 0; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; }

.editorial-header .tag { padding-top: 52px; }

.editorial-header__subtitle { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; /* 52px */ padding-top: 0.6190em; padding-bottom: 0; padding-top: 0; color: #3372df; }
@media only screen and (min-width: 800px) { .editorial-header__subtitle { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 48px; font-weight: 300; line-height: 1.1471em; /* 78px */ padding-top: 0.3824em; padding-bottom: 0; } }
@media only screen and (min-width: 620px) { .editorial-header__subtitle { padding-top: 0; padding-bottom: 26px; } }

.editorial-header__toc { margin-top: 26px; }
.editorial-header__toc ol { padding-top: 0; }
@media only screen and (min-width: 620px) { .editorial-header__toc ol { padding-top: 0; } }

.editorial-header__toc-title { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; border-bottom: 1px solid #e0e0e0; margin-bottom: 13px; padding-bottom: 13px !important; color: #3372df; }

.guides-section { background: #f0f0f0; text-align: center; padding: 26px 0 104px; }

/**
*
* Page header
*
**/
.page-header { text-align: center; }
.page-header .breadcrumbs { text-align: left; color: #3372df; }
.page-header .breadcrumbs a { color: #3372df; }
.page-header h3 { color: rgba(0, 0, 0, 0.87); padding-top: 52px; }

.page-header__excerpt { position: relative; padding-top: 0; }
.page-header__excerpt:last-child { padding-bottom: 78px; }

/**
*
* Quote
*
**/
.quote__content { position: relative; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; padding-top: 104px; padding-left: 26px; }
@media only screen and (min-width: 800px) { .quote__content { font-size: 20px; font-weight: 300; line-height: 1.3000em; /* 26px */ padding-top: 1.3000em; padding-bottom: 0; } }
@media only screen and (min-width: 620px) { .quote__content { padding-top: 52px; padding-left: 0; } }
.quote__content p { border-top: 1px solid #e0e0e0; text-align: right; font-weight: 500; margin-top: 12px; padding-top: 13px; }
.quote__content::before, ul.list-links a.quote__content::before, .list-anchor a.quote__content::before { content: open-quote; display: block; position: absolute; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; color: #f0f0f0; top: 90px; left: 26px; font-size: 260px; }
@media only screen and (min-width: 620px) { .quote__content::before, ul.list-links a.quote__content::before, .list-anchor a.quote__content::before { top: 225px; left: -210px; font-size: 540px; } }

/**
*
* Table of contents
*
**/
.toc__title { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0; }
@media only screen and (min-width: 800px) { .toc__title { font-size: 20px; font-weight: 300; line-height: 1.3000em; /* 26px */ padding-top: 1.3000em; padding-bottom: 0; } }
@media only screen and (min-width: 620px) { .toc__title { padding-bottom: 13px; margin-bottom: 13px; } }

.toc__list { padding-top: 0; border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; margin-bottom: 13px; }
.toc__list a { display: block; }
.toc__list ul { padding-top: 0; }

.toc__sublist { padding-top: 0; }

/**
*
* Grid
*
**/
@media only screen and (min-width: 620px) and (max-width: 799px) { .g-medium--1 { float: left; margin-right: 4.5%; width: 30.3%; }
  .g-medium--push-1 { margin-left: 34.8%; }
  .g-medium--pull-1 { margin-right: 34.8%; }
  .g-medium--2 { float: left; margin-right: 4.5%; width: 65.1%; }
  .g-medium--push-2 { margin-left: 69.6%; }
  .g-medium--pull-2 { margin-right: 69.6%; }
  .g-medium--3 { float: left; margin-right: 4.5%; width: 99.9%; margin-right: 0; }
  .g-medium--full { float: left; margin-right: 4.5%; margin-right: 0; width: 100%; }
  .g--third { float: left; margin-right: 4.5%; width: 30.3%; }
  .g--half, .g-medium--half { float: left; margin-right: 4.5%; width: 47.75%; }
  .g-medium--last { margin-right: 0; }
  .g-medium--last + .g-medium--half { clear: left; }
  .g--pull-half { margin-right: 52.25%; } }
@media only screen and (min-width: 800px) { .g-wide--1 { float: left; margin-right: 3.7%; width: 22.2%; }
  .g-wide--push-1 { margin-left: 25.9%; }
  .g-wide--pull-1 { margin-right: 25.9%; }
  .g-wide--2 { float: left; margin-right: 3.7%; width: 48.1%; }
  .g-wide--push-2 { margin-left: 51.8%; }
  .g-wide--pull-2 { margin-right: 51.8%; }
  .g-wide--3 { float: left; margin-right: 3.7%; width: 74%; }
  .g-wide--push-3 { margin-left: 77.7%; }
  .g-wide--pull-3 { margin-right: 77.7%; }
  .g-wide--4 { float: left; margin-right: 3.7%; width: 99.9%; margin-right: 0; }
  .g-wide--last { margin-right: 0; }
  .g-wide--full { float: left; margin-right: 3.7%; margin-right: 0; width: 100%; }
  .g--third { float: left; margin-right: 3.7%; width: 30.8%; }
  .g--half, .g-wide--half { float: left; margin-right: 3.7%; width: 48.15%; }
  .g--pull-half { margin-right: 51.85%; } }
.g--last { margin-right: 0; }

.g--centered { float: none; margin-left: auto; margin-right: auto; }

.grid-overlay { display: none; pointer-events: none; }
.debug .grid-overlay { box-sizing: content-box; position: relative; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; display: block; }
@media only screen and (min-width: 620px) { .debug .grid-overlay { padding-left: 4.8%; padding-right: 4.8%; max-width: 688px; } }
@media only screen and (min-width: 800px) { .debug .grid-overlay { padding-left: 4.4%; padding-right: 4.4%; max-width: 864px; } }
.debug .grid-overlay [class*="g-"] { height: 100%; background-color: rgba(89, 89, 89, 0.2); }
@media only screen and (min-width: 620px) and (max-width: 799px) { .debug .grid-overlay .g-wide--last { display: none; } }
@media only screen and (max-width: 619px) { .debug .grid-overlay { display: none; } }

/**
*
* Typography
*
**/
h1, h2, h3, h4, h5, p { margin: 0; }

.small, small { font-size: 13px; line-height: 2.0000em; /* 26px */ padding-top: 2.0000em; padding-bottom: 0; }

.base, p, ul, ol { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; }

.medium, h4 { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; }
@media only screen and (min-width: 800px) { .medium, h4 { font-size: 20px; font-weight: 300; line-height: 1.3000em; /* 26px */ padding-top: 1.3000em; padding-bottom: 0; } }

.large, h3 { font-size: 20px; font-weight: 300; line-height: 1.3000em; /* 26px */ padding-top: 1.3000em; padding-bottom: 0; }
@media only screen and (min-width: 800px) { .large, h3 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; font-weight: 300; line-height: 1.0000em; /* 26px */ padding-top: 1.0000em; padding-bottom: 0; } }

.xlarge, h2 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; font-weight: 300; line-height: 1.0000em; /* 26px */ padding-top: 1.0000em; padding-bottom: 0; }
@media only screen and (min-width: 800px) { .xlarge, h2 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; /* 52px */ padding-top: 0.6190em; padding-bottom: 0; } }

.xxlarge, h1 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 42px; font-weight: 300; line-height: 1.2381em; /* 52px */ padding-top: 0.6190em; padding-bottom: 0; }
@media only screen and (min-width: 800px) { .xxlarge, h1 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 48px; font-weight: 300; line-height: 1.1471em; /* 78px */ padding-top: 0.3824em; padding-bottom: 0; } }

.huge { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 48px; font-weight: 300; line-height: 1.1471em; /* 78px */ padding-top: 0.3824em; padding-bottom: 0; }
@media only screen and (min-width: 800px) { .huge { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 110px; font-weight: 300; line-height: 1.19em; /* 130px */ padding-top: 0.2364em; padding-bottom: 0; } }

li > p { padding-top: 0; }

/**
*
* List
*
**/
ul, ol { list-style: none; margin: 0; }
@media only screen and (max-width: 619px) { ul, ol { padding-left: 0; } }

ul li { position: relative; padding-left: 16px; }
ul li::before { font-family: "icons"; font-size: 13px; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; }
ul li::before { font-size: 4px; }

ol { counter-reset: list; }
ol > li { position: relative; padding-left: 32px; }
ol > li::before, ul ol > li::before { counter-increment: list; content: counter(list); color: inherit; display: inline-block; direction: rtl; font-weight: 400; margin-left: -1.5em; margin-right: 0.5em; position: absolute; text-align: right; width: 1em; }
ol > li:nth-child(10n) ~ li::before, ol > li:nth-child(10n)::before, ul ol > li:nth-child(10n)::before { content: counter(list); }

ul ol, ol ul { padding-top: 0; }

/*==========  LIST LINKS  ==========*/
ul.list-links li::before { display: none; }
ul.list-links a { font-weight: 400; }
ul.list-links a::before, ul.list-links.list-links--primary a::before { font-family: "icons"; font-size: 13px; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; }
ul.list-links a::before, ul.list-links.list-links--primary a::before { font-size: 4px; }
ul.list-links.list-links--primary a { font-weight: 400; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; line-height: 1; text-decoration: none; }
ul.list-links.list-links--primary a::before { font-family: "icons"; font-size: 13px; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; }

ol.list-links li::before { display: none; }
ol.list-links li a { display: inline-block; font-weight: 300; }
ol.list-links li a::before, ol.list-links li ul.list-links.list-links--primary a::before, ul.list-links.list-links--primary ol.list-links li a::before { counter-increment: list; content: counter(list); color: inherit; display: inline-block; direction: rtl; font-weight: 400; margin-left: -1.5em; margin-right: 0.5em; position: absolute; text-align: right; width: 1em; }
ol.list-links li:nth-child(10n) ~ li a::before, ol.list-links li:nth-child(10n) a::before { content: counter(list); }
ol.list-links.list-links--secondary a::before { display: none; }

.list-links--secondary { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; padding-left: 0; }
.list-links--secondary li { padding-left: 0; }

/*==========  ANCHOR LIST  ==========*/
.list-anchor { padding-left: 0; }
.list-anchor li { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; padding-top: 0; padding-left: 0; }
.list-anchor li::before { display: none; }
.list-anchor a { line-height: 1; display: inline-block; padding-left: 16px; }
.list-anchor ul.list-links a::before, ul.list-links .list-anchor a::before, .list-anchor a::before { font-family: "icons"; font-size: 13px; display: block; font-weight: 400; position: absolute; top: 0; left: 0; line-height: 26px; }
.list-anchor ul.list-links a::before, ul.list-links .list-anchor a::before, .list-anchor a::before { font-size: 4px; }

/*==========  SMALL LIST  ==========*/
@media only screen and (min-width: 620px) { .list-small li { font-size: 13px; line-height: 2.0000em; /* 26px */ padding-top: 2.0000em; padding-bottom: 0; padding-top: 0; } }

/*==========  CENTERED LIST  ==========*/
.list-centered { text-align: center; padding-left: 0; }

/*==========  FEATURED LIST  ==========*/
.featured-list { padding-top: 78px; padding-bottom: 78px; }

.featured-list__item { background: #ffffff; padding-left: 0; padding-top: 26px; padding-bottom: 26px; margin-top: 26px; }
@media only screen and (min-width: 620px) { .featured-list__item { min-height: 338px; padding: 52px 32px; } }
.featured-list__item:first-child { margin-top: 0; }
.featured-list__item p { margin-bottom: 26px; }

.featured-list__img-wrapper { display: none; position: relative; padding-top: 26px; margin: 0 -5%; }
@media only screen and (min-width: 620px) { .featured-list__img-wrapper { display: block; padding-top: 0; margin: 0; } }

@media only screen and (min-width: 620px) { .featured-list__img { padding-top: 60.8%; padding-bottom: 0; height: 0; overflow: hidden; position: absolute; width: 100%; } }
.featured-list__img img { display: block; margin: 0 auto; max-width: 100%; }
@media only screen and (min-width: 620px) { .featured-list__img img { margin: 0; position: absolute; top: 0; height: 100%; width: 100%; left: 0; } }

/*==========  RELATED GUIDES LIST  ==========*/
.related-guides-list { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; padding-top: 0; padding-left: 0; }
@media only screen and (min-width: 620px) { .related-guides-list { padding-top: 26px; } }
@media only screen and (min-width: 800px) { .related-guides-list { padding-top: 0; } }
.related-guides-list p { padding-top: 0; }
.related-guides-list .tag { padding-top: 0; }
.related-guides-list li { padding-top: 26px; padding-bottom: 25px; border-bottom: 1px solid #e0e0e0; }
.related-guides-list li:last-child { border-color: transparent; }
@media only screen and (min-width: 620px) { .related-guides-list li { padding-top: 0; padding-bottom: 0; border-color: transparent; } }

/*==========  LIST RESET  ==========*/
.list--reset { padding-left: 0; }
.list--reset li { padding-left: 0; }
.list--reset.list-links a::before, .list--reset.list-links ul.list-links.list-links--primary a::before, ul.list-links.list-links--primary .list--reset.list-links a::before, .list--reset li::before { display: none !important; }

/*==========  LESSONS  ==========*/
.list-lessons { padding-left: 0; }
.list-lessons a { color: #ffffff; }
.list-lessons .current, .list-lessons .current a { text-decoration: none; cursor: default; }
.list-lessons .current .icon { font-size: 13px; display: inline-block; background: rgba(0, 0, 0, 0.2); border-radius: 100%; width: 26px; line-height: 26px; text-align: center; margin-left: 7px; }

/*==========  GUIDES INTO - used on homepage  ==========*/
.list-guides-intro { margin-bottom: 52px; }
@media only screen and (max-width: 619px) { .list-guides-intro { padding-top: 52px; } }
.list-guides-intro li { border-bottom: 1px solid #e0e0e0; padding-bottom: 51px; margin-bottom: 52px; }
@media only screen and (min-width: 620px) { .list-guides-intro li { border-color: transparent; padding-bottom: 0; } }
.list-guides-intro li:last-child { border-bottom: transparent; margin-bottom: 0; }

/**
*
* subsection__title
*
**/
.subsection-title { color: rgba(0, 0, 0, 0.87); margin-top: 52px; }

.subsection-number { font-size: 16px; line-height: 1.6250em; /* 26px */ padding-top: 1.6250em; padding-bottom: 0; padding-top: 0; display: block; }

/**
*
* Guides List
*
**/
.guides-list { overflow: hidden; }
@media only screen and (min-width: 620px) { .guides-list { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 26px; } }

.guides-list__item { padding: 0; background: #ffffff; margin-top: 26px; margin-bottom: 0; width: 100%; }
@media only screen and (min-width: 620px) { .guides-list__item { display: flex; flex-direction: column; flex-wrap: wrap; } }
.guides-list__item h3 { margin: 0 32px; }
.guides-list__item p { margin: 26px 32px 0; }
.guides-list__item .secondary-content { position: relative; margin-top: 51px; border-top: 1px solid #e0e0e0; }
@media only screen and (min-width: 620px) { .guides-list__item .secondary-content { width: 100%; } }
.guides-list__item .secondary-content .icon-circle { position: absolute; top: -28px; left: 50%; margin-left: -21px; border: 2px solid #ffffff; }
.guides-list__item .secondary-content .icon-circle i { font-size: 23px; }
.guides-list__item ol { margin: 26px 0 0; padding: 52px 0 52px; margin-top: 0; }
.guides-list__item::before, ul.list-links a.guides-list__item::before, .list-anchor a.guides-list__item::before { display: none; }

/**
*
* Icon Circle
*
**/
.icon-circle, .icon-circle--large { height: 0; width: 0; background: rgba(0, 0, 0, 0.54); display: block; position: relative; border-radius: 100%; font-size: 0; padding: 22px; margin: 4px auto; }
.icon-circle i, .icon-circle span, .icon-circle--large i, .icon-circle--large span { position: absolute; line-height: 0px; top: 50%; width: 100%; left: 0; text-align: center; color: #ffffff; font-size: 26px; }
.icon-circle span, .icon-circle--large span { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; font-weight: 700; }
@media only screen and (min-width: 620px) { .icon-circle span, .icon-circle--large span { font-size: 42px; } }

.icon-circle--large { margin-top: 0; margin-bottom: 0; padding: 26px; position: relative; }
.icon-circle--large i { font-size: 26px; }
@media only screen and (min-width: 620px) { .icon-circle--large i { font-size: 42px; } }
@media only screen and (min-width: 620px) { .icon-circle--large { padding: 37px; border: 2px solid #ffffff; }
  a .icon-circle--large { padding: 38px; box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.42); border: 1px solid; transition: all 100ms linear; transform: translateZ(0); }
  .no-touch a:hover .icon-circle--large { box-shadow: inset 0px 0px 0px 1px #ffffff; transform: scale(1.1); } }

.icon-circle--nav { height: 0; width: 0; background: rgba(0, 0, 0, 0.54); display: block; position: relative; border-radius: 100%; font-size: 0; padding: 13px; margin: 0 auto; }
@media only screen and (min-width: 620px) { .icon-circle--nav { padding: 22px; margin-top: 4px; margin-bottom: 4px; } }
.icon-circle--nav i { position: absolute; line-height: 1px; top: 50%; width: 100%; left: 0; text-align: center; color: #ffffff; font-size: 16px; }
@media only screen and (min-width: 620px) { .icon-circle--nav i { font-size: 26px; } }

/**
*
* Themed styles
*
**/
.theme--multi-device-layouts .themed { color: #297ea9; }
.theme--introduction-to-media .themed { color: #cf423a; }
.theme--user-input .themed { color: #2c8566; }
.theme--performance .themed { color: #7b5294; }

.theme--multi-device-layouts .themed--background, .theme--multi-device-layouts .themed--background.next-lessons::before { background-color: #297ea9; }
.theme--introduction-to-media .themed--background, .theme--introduction-to-media .themed--background.next-lessons::before { background-color: #cf423a; }
.theme--user-input .themed--background, .theme--user-input .themed--background.next-lessons::before { background-color: #2c8566; }
.theme--performance .themed--background, .theme--performance .themed--background.next-lessons::before { background-color: #7b5294; }

.theme--multi-device-layouts .themed--hover:hover { color: #297ea9; }
.theme--introduction-to-media .themed--hover:hover { color: #cf423a; }
.theme--user-input .themed--hover:hover { color: #2c8566; }
.theme--performance .themed--hover:hover { color: #7b5294; }

.theme--multi-device-layouts .themed--hover-secondary:hover { color: #89c4e2; }
.theme--introduction-to-media .themed--hover-secondary:hover { color: #edb8b5; }
.theme--user-input .themed--hover-secondary:hover { color: #78d2b3; }
.theme--performance .themed--hover-secondary:hover { color: #c4add2; }

.article--multi-device-layouts .article-container h1, .article--multi-device-layouts .article-container h2 { color: #297ea9; }
.article--introduction-to-media .article-container h1, .article--introduction-to-media .article-container h2 { color: #cf423a; }
.article--user-input .article-container h1, .article--user-input .article-container h2 { color: #2c8566; }
.article--performance .article-container h1, .article--performance .article-container h2 { color: #7b5294; }

.nav-theme--multi-device-layouts .themed--hover:hover { color: #297ea9; }
.nav-theme--introduction-to-media .themed--hover:hover { color: #cf423a; }
.nav-theme--user-input .themed--hover:hover { color: #2c8566; }
.nav-theme--performance .themed--hover:hover { color: #7b5294; }

.nav-theme--multi-device-layouts .themed { color: #297ea9; }
.nav-theme--introduction-to-media .themed { color: #cf423a; }
.nav-theme--user-input .themed { color: #2c8566; }
.nav-theme--performance .themed { color: #7b5294; }

.nav-theme--multi-device-layouts .themed--background { background-color: #297ea9; }
.nav-theme--introduction-to-media .themed--background { background-color: #cf423a; }
.nav-theme--user-input .themed--background { background-color: #2c8566; }
.nav-theme--performance .themed--background { background-color: #7b5294; }

/**
*
* Home page
*
**/
.guides-section { padding: 26px 0 64px; }

.guides-list .guides-list__item .themed--background { background-color: #297ea9; }

/**
*
* Helper
*
**/
.clear::before, ul.list-links a.clear::before, .list-anchor a.clear::before, .clear::after { content: ''; display: table; }
.clear::after { clear: both; }

/*==========  COLORS  ==========*/
.color--blue { color: #3372df; }

.color--red { color: #cb4437; }

.color--green { color: #0f9d58; }

.color--yellow { color: #f4b400; }

.color--blue-secondary { color: #b7cdf4; }

.color--red-secondary { color: #ebb6b0; }

.color--green-secondary { color: #56efa5; }

.color--yellow-secondary { color: #ffd45b; }

.color--gray-background { color: #f0f0f0; }

.color--gray-keyline { color: #e0e0e0; }

.color--gray { color: rgba(0, 0, 0, 0.54); }

.color--gray-dark { color: rgba(0, 0, 0, 0.87); }

.color--text { color: #404040; }

.color--highlight { color: #3372df; }

.color--warning { color: #ffd45b; }

.color--danger { color: #cb4437; }

.color--muted { color: #737373; }

.color--remember { color: #09829a; }

.color--learning { color: #da2e75; }

.color--layouts { color: #297ea9; }

.color--user { color: #2c8566; }

.color--media { color: #cf423a; }

.color--performance { color: #7b5294; }

.color--layouts-secondary { color: #89c4e2; }

.color--user-secondary { color: #78d2b3; }

.color--media-secondary { color: #edb8b5; }

.color--performance-secondary { color: #c4add2; }

/*==========  TEXT DIVIDER  ==========*/
.text-divider { position: relative; margin-bottom: 26px; }
.text-divider::after { content: ''; display: block; position: absolute; width: 40%; height: 1px; box-shadow: 0 1px 0 0 #e0e0e0; left: 30%; bottom: -13px; }
.text-divider.xlarge { margin-bottom: 52px; }
.text-divider.xlarge::after { bottom: -26px; }
.text-divider.xxlarge { margin-bottom: 78px; }
.text-divider.xxlarge::after { bottom: -39px; }
.text-divider.huge { margin-bottom: 78px; }
.text-divider.huge::after { bottom: -39px; }

/*==========  GENERIC  ==========*/
.centered { text-align: center; }

/*==========  TAG  ==========*/
.tag { font-size: 13px; line-height: 2.0000em; /* 26px */ padding-top: 2.0000em; padding-bottom: 0; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; display: inline-block; text-decoration: none; }
.tag:hover { color: rgba(0, 0, 0, 0.87); }
.tag::before, ul.list-links a.tag::before, .list-anchor a.tag::before { content: '# '; display: inline-block; }

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }

body { position: relative; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; background-color: #fff; box-sizing: border-box; min-height: 100%; }

body.open { overflow: hidden; }

.app-bar { display: block; width: 100%; position: fixed; top: 0; left: 0; background-color: #f0f0f0; overflow: hidden; z-index: 1; }

.app-bar-container { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 60px; position: relative; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: 0 auto; }

.app-bar.open, .app-bar.open ~ main, .app-bar.open ~ .guides-section main { -webkit-transform: translate(250px, 0); transform: translate(250px, 0); }

.app-bar .logo { -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 2em; line-height: 60px; margin: 0 16px; padding: 0; color: #fefefe; float: none; max-width: none; font-weight: 300; display: initial; }

.app-bar .logo a { text-decoration: none; color: inherit; font-weight: normal; }

.app-bar .logo img { height: 36px; }

.app-bar-actions { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; z-index: 2; }

.app-bar button { width: 60px; height: 60px; background-image: none; background-color: transparent; border: none; padding: 0; display: inline-block; -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; -webkit-tap-highlight-color: transparent; }

.app-bar button img { height: 24px; width: 24px; }

.app-bar button:hover { background-color: rgba(255, 255, 255, 0.1); }

.app-bar button:focus { background-color: rgba(255, 255, 255, 0.2); outline: 0; }

.app-bar button:active { background-color: rgba(255, 255, 255, 0.4); }

.promote-layer {   /* This may promote the layer to a composited layer.
 Replace with will-change when available
 #perfmatters */ -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.base, p, ul, ol { font-size: 16px; }

.navdrawer-container { z-index: 1; position: fixed; top: 0; bottom: 0; width: 250px; height: 100%; background-color: #f0f0f0; color: #fefefe; -webkit-transform: translate(-250px, 0); transform: translate(-250px, 0); overflow-y: auto; }

.navdrawer-container.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); }

.app-bar, .navdrawer-container.opened, main { -webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; }

.navdrawer-container h4, .navdrawer-container ul li a { padding: 17px 20px; line-height: 1.4; }

.navdrawer-container h4 { background-color: white; color: #3367D6; }

.navdrawer-container ul { padding: 0; margin: 0; list-style-type: none; }

.navdrawer-container ul li a { display: block; font-weight: 400; text-decoration: none; color: #404040; -webkit-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; white-space: nowrap; }

.navdrawer-container ul li { border-bottom-style: solid; border-width: 1px; border-color: white; padding: 0; }

.navdrawer-container ul li::before { content: none; }

.navdrawer-container ul li a:hover { background-color: rgba(255, 255, 255, 0.2); }

.navdrawer-container ul li a:focus { background-color: rgba(255, 255, 255, 0.3); outline: 0; }

.navdrawer-container ul li.active a { background-color: rgba(255, 255, 255, 0.4); }

main { margin: 0 auto; /* Height of the header */ padding: 60px 16px 60px 16px; min-height: 100%; }

.quote__content::before, ul.list-links a.quote__content::before, .list-anchor a.quote__content::before { color: #e0e0e0; top: 150px; left: -180px; font-size: 340px; }

.main-footer { background: #f0f0f0; background: -moz-linear-gradient(top, #f0f0f0 0, #fff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f0f0), color-stop(100%, #fff)); padding: 26px 0 52px; }

.main-footer, .main-footer a { color: rgba(0, 0, 0, 0.87); }

.main-footer a { text-decoration: none; }

.main-footer a:hover { text-decoration: underline; }

.main-footer__list-group { position: relative; overflow: hidden; }

.main-footer__list { list-style: none; margin: 0; padding-left: 32px; padding: 26px 0 0; }

.main-footer__list li:before { display: none; }

.main-footer__list li { margin-bottom: 13px; padding-left: 0; padding: 17px 20px; }

.main-footer__list--primary { font-size: 16px; font-weight: 400; border-bottom: 1px solid #e0e0e0; padding-bottom: 13px; margin-bottom: 26px; }

.main-footer__list--secondary { font-size: 13px; line-height: 26px; padding-top: 13px; }

.main-footer__klee-section { padding: 0 17px 0 17px; }

.main-footer__klee-section p { font-size: 13px; padding: 0; }

.main-footer__title { color: rgba(0, 0, 0, 0.87); font-size: 26px; line-height: 1em; padding-top: 1em; padding-bottom: 0; letter-spacing: -.3px; font-weight: 400; }

.main-footer__klee-section a { color: rgba(0, 0, 0, 0.87); }

img.wide { width: 100%; }

@media all and (max-width: 619px) { .main-footer__list--primary { border-bottom: 1px solid rgba(0, 0, 0, 0.26); padding-bottom: 53px; margin-bottom: 26px; } }
/** Larger Screens - desktops and tablets **/
@media all and (min-width: 992px) { .app-bar { position: relative; }
  .app-bar.open, .app-bar.open ~ main { -webkit-transform: translate(0px, 0); transform: translate(0px, 0); }
  .app-bar-container { display: block; height: 130px; max-width: 864px; padding: 0 16px; box-sizing: border-box; }
  .app-bar .logo { float: left; margin: 0; padding: 0; line-height: 112px; font-size: 46px; }
  .app-bar .logo img { height: 54px; }
  .app-bar-actions { float: right; line-height: 130px; font-size: 36px; color: #fefefe; }
  .app-bar-actions a { margin: 0 5px; color: #fefefe; }
  .app-bar::after { content: ' '; display: block; height: 0; overflow: hidden; clear: both; }
  button.menu { display: none; }
  .navdrawer-container { position: relative; width: 100%; height: auto; margin-top: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: none; transition: none; overflow-y: auto; }
  .navdrawer-container h4 { display: none; }
  .navdrawer-container ul { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 864px; margin: 0 auto; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
  .navdrawer-container ul li { border: none; }
  main { max-width: 864px; padding-top: 0; min-height: initial; }
  body { overflow-y: scroll; }
  .main-footer__list { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } }
/* Corner ribbons */
.cr { width: 200px; padding: 16px; position: absolute; text-align: center; color: #f0f0f0; z-index: 10; font-weight: bold; }

.cr-sticky { position: fixed; }

/* Positions */
.cr-top { top: 20px; }

.cr-bottom { bottom: 25px; }

.cr-left { left: -50px; }

.cr-right { right: -50px; }

/* Rotations */
.cr-top.cr-left, .cr-bottom.cr-right { transform: rotate(-45deg); }

.cr-top.cr-right, .cr-bottom.cr-left { transform: rotate(45deg); }

#version_ribbon { background-color: #297ea9; }
@media only screen and (max-width: 619px) { #version_ribbon { visibility: hidden; } }