/*! normalize.css v3.0.2 | 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, hgroup, main, menu, 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-color: 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 variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

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

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** 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 ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

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

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

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

/* http://prismjs.com/download.html?themes=prism&languages=css+scss */
/** prism.js default theme for JavaScript, CSS and HTML Based on dabblet (http://dabblet.com) @author Lea Verou */
code[class*="language-"], pre[class*="language-"] { color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }

pre[class*="language-"] { font-size: .8em; border: 1px solid #ebebeb; }

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; }

pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; }

@media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } }
/* Code blocks */
pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; }

:not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f8f8f8; }

/* Inline code */
:not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; }

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; }

.token.punctuation { color: #999; }

.namespace { opacity: .7; }

.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; }

.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; }

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #a67f59; background: rgba(255, 255, 255, 0.5); }

.token.atrule, .token.attr-value, .token.keyword { color: #07a; }

.token.function { color: #DD4A68; }

.token.regex, .token.important, .token.variable { color: #e90; }

.token.important { font-weight: bold; }

.token.entity { cursor: help; }

html { font-size: 125%; -moz-box-sizing: border-box; box-sizing: border-box; }

*, ::before, ::after { -moz-box-sizing: inherit; box-sizing: inherit; }

body { font: 1em/1.35 "Source Sans Pro", "source-sans-pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #484c55; border-top: 0.5em solid #998099; }

code { font-size: .9em; color: #808c99; font-family: "Source Code Pro", "source-code-pro", "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; }

a { color: #c69; transition: .15s; }
a:visited { color: #b37399; }
a:active, a:focus, a:hover { color: #036; }
a code { color: currentcolor; }

table caption { opacity: 0; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; }

.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.visually-hidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }

.heading { text-transform: uppercase; border-bottom: 0.2em solid #b37399; padding-bottom: .2em; margin-bottom: 1rem; position: relative; font-size: 2em; text-align: left; }
.heading p { margin-bottom: 0; }
.heading code { font-size: 1em; }

.heading__anchor { position: absolute; left: -1em; top: .23em; text-decoration: none; font-size: .8em; opacity: 0; transition: .15s; }
.heading:hover .heading__anchor, .heading:active .heading__anchor { opacity: 1; }

.container { width: 100%; max-width: 90%; margin: 0 auto; padding: 0 1em; }

.section { width: 100%; padding: 3em 0; border-bottom: #dadbdf 0.5em solid; }
.section:last-child { border-bottom: 0; }

.section--header, .section--toc, .section--introduction { text-align: center; }

.section:first-child { color: #808c99; background: url(http://subtlepatterns.com/patterns/gplaypattern.png) #fff; }

.section:nth-child(2) { padding: 1.5em 0; }
.section:nth-child(2) .btn { font-size: 1.2em; }

.title { font-size: 5em; margin: 0; line-height: 1.125em; text-align: center; }
@media (max-width: 767px) { .title { font-size: 2.2em; } }

.baseline { font-size: 1.6em; font-weight: 700; color: #699; margin: 0 0 1rem; text-align: center; }

.feature { margin-bottom: 5em; text-align: left; }

.feature__content { overflow: hidden; }
.feature__content p { margin-top: 0; }

.feature__description { margin-bottom: 1rem; }
@media (min-width: 768px) { .feature__description { width: 50%; float: left; padding-right: 1rem; } }

.feature__polyfill { margin-bottom: 1rem; }
@media (min-width: 768px) { .feature__polyfill { float: left; width: 50%; padding-left: 1rem; } }

.feature__heading { margin-top: 0; margin-bottom: .5rem; float: left; }
.feature__heading + * { clear: left; }

.feature__support { width: 100%; width: calc(100% + .25em * 2); margin-left: -.25em; border-spacing: .25em; border-collapse: initial; text-align: center; table-layout: fixed; }
.feature__support td, .feature__support th { padding: .5em; }
.feature__support th { background-color: #EFEFEF; font-size: .8em; padding-top: 0.9em; padding-bottom: 0.9em; text-transform: uppercase; font-weight: 700; }
.feature__support th a { color: inherit; text-decoration: none; display: block; }
.feature__support th a:hover, .feature__support th a:focus, .feature__support th a:active { color: #036; }
@media (max-width: 767px) { .feature__support thead { display: none; }
  .feature__support table, .feature__support tr, .feature__support td, .feature__support th { display: block; }
  .feature__support td { text-align: right; }
  .feature__support th, .feature__support td { margin-bottom: .25em; }
  .feature__support td::before { content: attr(data-label); float: left; } }

.feature-status a { display: block; }
.feature-status a:active, .feature-status a:hover { transform: scale(1.5); }

.feature-status--supported { background-color: rgba(102, 153, 153, 0.25); }
.feature-status--supported, .feature-status--supported a { color: #476b6b; fill: currentcolor; }

.feature-status--unsupported { background-color: rgba(179, 115, 153, 0.25); }
.feature-status--unsupported, .feature-status--unsupported a { color: #7d516b; fill: currentcolor; }

.feature-status--partially-supported { background-color: #e4dbbd; }
.feature-status--partially-supported, .feature-status--partially-supported a { color: #87817e; fill: currentcolor; }

.feature__support .detail { display: none; opacity: .7; }

.toggle-support-details__checkbox { clear: none; }

.toggle-support-details__checkbox:checked ~ .feature__support .detail { display: table-row; }

.toggle-support-details__label::before { content: "Show "; }
.toggle-support-details__checkbox:checked + .toggle-support-details__label::before { content: "Hide "; }

.toggle-support-details__label { cursor: pointer; float: left; color: #b37399; font-size: .7em; text-transform: uppercase; margin: .65em 0 0 1em; }

.footer { background: #c69; color: rgba(255, 255, 255, 0.75); text-align: center; padding: .5em; }
.footer a { text-decoration: none; color: #484c55; }

.btn { text-decoration: none; background-color: #fff; border: .15em solid; padding: .5em 1em; border-radius: .25em; transition: .15s ease-in; display: inline-block; margin: .5em; fill: currentcolor; }
.btn:visited { fill: #b37399; }
.btn:hover, .btn:active, .btn:focus { color: #036; fill: #036; }
.btn svg { margin-right: .3em; }

.icon { display: inline-block; width: 16px; height: 16px; }

.toc { overflow: hidden; padding-left: 0; list-style: none; -webkit-column-gap: .5em; -moz-column-gap: .5em; column-gap: .5em; }
@media (min-width: 600px) { .toc { -webkit-columns: 2; -moz-columns: 2; columns: 2; } }
@media (min-width: 800px) { .toc { -webkit-columns: 3; -moz-columns: 3; columns: 3; } }
@media (min-width: 1000px) { .toc { -webkit-columns: 4; -moz-columns: 4; columns: 4; } }

.toc__item { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; font-size: .9em; }

.toc__link { padding: .5em; display: block; background: #EFEFEF; text-decoration: none; margin-bottom: .5em; color: #444; transition: 1s; }
.toc__link:hover, .toc__link:active { transition: background-color .05s; background: #e1d7d2; color: #444; }
.toc__link:visited { color: currentcolor; }
.toc__link p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }

.support-value { font-weight: bold; }

.support-value--ruby_sass_3_2 { background: -webkit-linear-gradient(left, #f0ebe9 12%, transparent 12%); background: linear-gradient(to right, #f0ebe9 12%, transparent 12%); }
@media (min-width: 768px) { .support-value--ruby_sass_3_2 { background: -webkit-linear-gradient(top, transparent 88%, #f0ebe9 88%); background: linear-gradient(to bottom, transparent 88%, #f0ebe9 88%); } }

.support-value--ruby_sass_3_3 { background: -webkit-linear-gradient(left, #f0ebe9 79%, transparent 79%); background: linear-gradient(to right, #f0ebe9 79%, transparent 79%); }
@media (min-width: 768px) { .support-value--ruby_sass_3_3 { background: -webkit-linear-gradient(top, transparent 21%, #f0ebe9 21%); background: linear-gradient(to bottom, transparent 21%, #f0ebe9 21%); } }

.support-value--ruby_sass_3_4 { background: -webkit-linear-gradient(left, #f0ebe9 100%, transparent 100%); background: linear-gradient(to right, #f0ebe9 100%, transparent 100%); }
@media (min-width: 768px) { .support-value--ruby_sass_3_4 { background: -webkit-linear-gradient(top, transparent 0%, #f0ebe9 0%); background: linear-gradient(to bottom, transparent 0%, #f0ebe9 0%); } }

.support-value--libsass_3_1 { background: -webkit-linear-gradient(left, #f0ebe9 49%, transparent 49%); background: linear-gradient(to right, #f0ebe9 49%, transparent 49%); }
@media (min-width: 768px) { .support-value--libsass_3_1 { background: -webkit-linear-gradient(top, transparent 51%, #f0ebe9 51%); background: linear-gradient(to bottom, transparent 51%, #f0ebe9 51%); } }

.support-value--libsass_3_2 { background: -webkit-linear-gradient(left, #f0ebe9 99%, transparent 99%); background: linear-gradient(to right, #f0ebe9 99%, transparent 99%); }
@media (min-width: 768px) { .support-value--libsass_3_2 { background: -webkit-linear-gradient(top, transparent 1%, #f0ebe9 1%); background: linear-gradient(to bottom, transparent 1%, #f0ebe9 1%); } }

.support-value--libsass_3_3 { background: -webkit-linear-gradient(left, #f0ebe9 100%, transparent 100%); background: linear-gradient(to right, #f0ebe9 100%, transparent 100%); }
@media (min-width: 768px) { .support-value--libsass_3_3 { background: -webkit-linear-gradient(top, transparent 0%, #f0ebe9 0%); background: linear-gradient(to bottom, transparent 0%, #f0ebe9 0%); } }