/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device 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.
 */
footer,
header,
main,
nav,
section {
    display: block;
}

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

    /**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
    a:active,
    a:hover {
        outline: 0;
    }

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

/**
 * 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 differences between Firefox and other browsers.
 */
hr {
    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,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

html {
    box-sizing: border-box;
}

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

video {
    width: 100%;
    margin-bottom: 1.5em;
}

body {
    font-family: -apple-system, ".SFNSDisplay-Regular", Roboto, Helvetica, Arial, sans-serif;
    color: #222;
}

h1,
h2,
h3 {
    margin-top: 0;
}

h1 {
    font-size: 18px;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 17px;
    margin-bottom: 1em;
}

h3 {
    font-size: 16px;
    margin-bottom: 1em;
}

p {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 1.5em;
    margin-top: 0;
}

a {
    color: #2196f3;
    cursor: pointer;
    text-decoration: underline;
}

    a:hover {
        color: #ff5722;
    }

p,
ol,
ul,
pre {
    margin-bottom: 1.5em;
    margin-top: 0;
}

p,
ol,
ul {
    font-size: 15px;
}

ol {
    padding-left: 1.5em;
}

li {
    padding-left: 0.25em;
    margin-bottom: 0.75em;
}

code,
pre {
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    background-color: #f7f7f7;
    border-radius: 3px;
}

code {
    padding: 3px 5px;
}

pre {
    font-size: 14px;
    color: #586e75;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}

    pre code {
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    pre span.accent {
        color: #000;
        font-weight: 600;
        background-color: transparent;
    }

small {
    font-size: 85%;
    color: #999;
}

ol + h2,
ol + h3,
ul + h2,
ul + h3,
pre + h2,
pre + h3 {
    margin-top: 2.5em;
}

li > p {
    margin-bottom: 0;
}

    li > p + pre,
    li ul,
    li ol {
        margin-top: 0.5em;
    }

@media only screen and (min-width: 480px) {
    pre {
        font-size: 15px;
    }
}

@media only screen and (min-width: 640px) {
    h1 {
        font-size: 21px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 17px;
    }

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

.table {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tray {
    text-align: center;
    width: 50%;
    background-color: #2196f3;
    padding-top: 4.75em;
    padding-bottom: 3em;
    position: relative;
}

    .tray:nth-child(1) {
        background-color: #4a148c;
    }

    .tray:nth-child(2) {
        background-color: #4db6ac;
    }

    .tray:nth-child(3) {
        background-color: #ff5722;
    }

    .tray:nth-child(4) {
        background-color: #444;
    }

    .tray:nth-child(5) {
        background-color: #ec407a;
    }

    .tray:nth-child(6) {
        background-color: #fbc02d;
    }

    .tray:nth-child(7) {
        background-color: #2196f3;
    }

    .tray:nth-child(8) {
        background-color: #607d8b;
    }

    .tray:nth-child(9) {
        background-color: #43a047;
    }

    .tray:nth-child(10) {
        background-color: #3f51b5;
    }

    .tray:nth-child(11) {
        background-color: #00bcd4;
    }

    .tray:nth-child(12) {
        background-color: #f44336;
    }

    .tray:nth-child(13) {
        background-color: #9c27b0;
    }

    .tray:nth-child(14) {
        background-color: #795548;
    }

.tray--empty {
    border: 1px dashed #999;
    background-color: transparent;
    display: none;
}

    .tray--empty + .tray--empty {
        border-left: 0;
    }

.section {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

    .section:nth-child(1) {
        background-color: #fff;
    }

.content {
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

@media only screen and (min-width: 768px) {
    .tray {
        width: 20%;
        padding-top: 6.75em;
        padding-bottom: 5em;
    }

    .tray--empty {
        display: block;
    }
}

.header {
    text-align: center;
    background-color: #f4f4f4;
    padding-top: 20px;
    padding-bottom: 20px;
}

.header-text {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
}

.header-text-h {
    visibility: hidden;
}

.footer {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    background-color: #f4f4f4;
    padding-top: 30px;
    padding-bottom: 30px;
}

    .footer a {
        color: #000;
    }

        .footer a:hover {
            color: #2196f3;
        }

.footer-separator {
    display: none;
}

@media only screen and (min-width: 480px) {
    .footer {
        font-size: 15px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .footer br {
            display: none;
        }

    .footer-separator {
        color: #999;
        display: inline;
        margin-left: 10px;
        margin-right: 10px;
    }
}

.highlight {
    /* Comment */
    /* Error */
    /* Generic */
    /* Keyword */
    /* Literal */
    /* Name */
    /* Operator */
    /* Other */
    /* Punctuation */
    /* Comment.Multiline */
    /* Comment.Preproc */
    /* Comment.Single */
    /* Comment.Special */
    /* Generic.Deleted */
    /* Generic.Emph */
    /* Generic.Error */
    /* Generic.Heading */
    /* Generic.Inserted */
    /* Generic.Output */
    /* Generic.Prompt */
    /* Generic.Strong */
    /* Generic.Subheading */
    /* Generic.Traceback */
    /* Keyword.Constant */
    /* Keyword.Declaration */
    /* Keyword.Namespace */
    /* Keyword.Pseudo */
    /* Keyword.Reserved */
    /* Keyword.Type */
    /* Literal.Date */
    /* Literal.Number */
    /* Literal.String */
    /* Name.Attribute */
    /* Name.Builtin */
    /* Name.Class */
    /* Name.Constant */
    /* Name.Decorator */
    /* Name.Entity */
    /* Name.Exception */
    /* Name.Function */
    /* Name.Label */
    /* Name.Namespace */
    /* Name.Other */
    /* Name.Property */
    /* Name.Tag */
    /* Name.Variable */
    /* Operator.Word */
    /* Text.Whitespace */
    /* Literal.Number.Float */
    /* Literal.Number.Hex */
    /* Literal.Number.Integer */
    /* Literal.Number.Oct */
    /* Literal.String.Backtick */
    /* Literal.String.Char */
    /* Literal.String.Doc */
    /* Literal.String.Double */
    /* Literal.String.Escape */
    /* Literal.String.Heredoc */
    /* Literal.String.Interpol */
    /* Literal.String.Other */
    /* Literal.String.Regex */
    /* Literal.String.Single */
    /* Literal.String.Symbol */
    /* Name.Builtin.Pseudo */
    /* Name.Variable.Class */
    /* Name.Variable.Global */
    /* Name.Variable.Instance */
    /* Literal.Number.Integer.Long */
}

    .highlight .c {
        color: #93a1a1;
    }

    .highlight .err {
        color: #586e75;
    }

    .highlight .g {
        color: #586e75;
    }

    .highlight .k {
        color: #859900;
    }

    .highlight .l {
        color: #586e75;
    }

    .highlight .n {
        color: #586e75;
    }

    .highlight .o {
        color: #859900;
    }

    .highlight .x {
        color: #cb4b16;
    }

    .highlight .p {
        color: #586e75;
    }

    .highlight .cm {
        color: #93a1a1;
    }

    .highlight .cp {
        color: #859900;
    }

    .highlight .c1 {
        color: #93a1a1;
    }

    .highlight .cs {
        color: #859900;
    }

    .highlight .gd {
        color: #2aa198;
    }

    .highlight .ge {
        color: #586e75;
        font-style: italic;
    }

    .highlight .gr {
        color: #dc322f;
    }

    .highlight .gh {
        color: #cb4b16;
    }

    .highlight .gi {
        color: #859900;
    }

    .highlight .go {
        color: #586e75;
    }

    .highlight .gp {
        color: #586e75;
    }

    .highlight .gs {
        color: #586e75;
        font-weight: bold;
    }

    .highlight .gu {
        color: #cb4b16;
    }

    .highlight .gt {
        color: #586e75;
    }

    .highlight .kc {
        color: #cb4b16;
    }

    .highlight .kd {
        color: #268bd2;
    }

    .highlight .kn {
        color: #859900;
    }

    .highlight .kp {
        color: #859900;
    }

    .highlight .kr {
        color: #268bd2;
    }

    .highlight .kt {
        color: #dc322f;
    }

    .highlight .ld {
        color: #586e75;
    }

    .highlight .m {
        color: #2aa198;
    }

    .highlight .s {
        color: #2aa198;
    }

    .highlight .na {
        color: #586e75;
    }

    .highlight .nb {
        color: #B58900;
    }

    .highlight .nc {
        color: #268bd2;
    }

    .highlight .no {
        color: #cb4b16;
    }

    .highlight .nd {
        color: #268bd2;
    }

    .highlight .ni {
        color: #cb4b16;
    }

    .highlight .ne {
        color: #cb4b16;
    }

    .highlight .nf {
        color: #268bd2;
    }

    .highlight .nl {
        color: #586e75;
    }

    .highlight .nn {
        color: #586e75;
    }

    .highlight .nx {
        color: #586e75;
    }

    .highlight .py {
        color: #586e75;
    }

    .highlight .nt {
        color: #268bd2;
    }

    .highlight .nv {
        color: #268bd2;
    }

    .highlight .ow {
        color: #859900;
    }

    .highlight .w {
        color: #586e75;
    }

    .highlight .mf {
        color: #2aa198;
    }

    .highlight .mh {
        color: #2aa198;
    }

    .highlight .mi {
        color: #2aa198;
    }

    .highlight .mo {
        color: #2aa198;
    }

    .highlight .sb {
        color: #93a1a1;
    }

    .highlight .sc {
        color: #2aa198;
    }

    .highlight .sd {
        color: #586e75;
    }

    .highlight .s2 {
        color: #2aa198;
    }

    .highlight .se {
        color: #cb4b16;
    }

    .highlight .sh {
        color: #586e75;
    }

    .highlight .si {
        color: #2aa198;
    }

    .highlight .sx {
        color: #2aa198;
    }

    .highlight .sr {
        color: #dc322f;
    }

    .highlight .s1 {
        color: #2aa198;
    }

    .highlight .ss {
        color: #2aa198;
    }

    .highlight .bp {
        color: #268bd2;
    }

    .highlight .vc {
        color: #268bd2;
    }

    .highlight .vg {
        color: #268bd2;
    }

    .highlight .vi {
        color: #268bd2;
    }

    .highlight .il {
        color: #2aa198;
    }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 0 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, -webkit-filter;
    transition-property: opacity, filter;
    transition-property: opacity, filter, -webkit-filter;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

    .hamburger:hover {
        opacity: 1;
    }

.hamburger-box {
    width: 25px;
    height: 19px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -0.5px;
}

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 25px;
        height: 1px;
        background-color: #fff;
        border-radius: 2px;
        position: absolute;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

        .hamburger-inner::before, .hamburger-inner::after {
            content: "";
            display: block;
        }

        .hamburger-inner::before {
            top: -9px;
        }

        .hamburger-inner::after {
            bottom: -9px;
        }

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.15s;
    transition-delay: 0.15s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

    .hamburger--collapse .hamburger-inner::after {
        top: -18px;
        transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
    }

    .hamburger--collapse .hamburger-inner::before {
        transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

.hamburger--collapse.is-active .hamburger-inner {
    -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg);
    transform: translate3d(0, -9px, 0) rotate(-45deg);
    transition-delay: 0.32s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

    .hamburger--collapse.is-active .hamburger-inner::after {
        top: 0;
        opacity: 0;
        transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
    }

    .hamburger--collapse.is-active .hamburger-inner::before {
        top: 0;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

.hamburger .hamburger-inner, .hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after {
    background-color: #fff;
}

.hamburger--header {
    padding-left: 5px;
    padding-right: 0;
    margin-right: -5px;
    vertical-align: middle;
    cursor: default;
}

    .hamburger--header .hamburger-inner, .hamburger--header .hamburger-inner::before, .hamburger--header .hamburger-inner::after {
        background-color: #222;
    }

    .hamburger--header.hamburger--elastic .hamburger-inner, .hamburger--header.hamburger--slider .hamburger-inner {
        top: 2px;
    }

    .hamburger--header:hover {
        opacity: 1;
    }

.hamburger-wrap {
    text-align: center;
}

.hamburger--accessible {
    display: inline-block;
}

    .hamburger--accessible .hamburger-box {
        display: inline-block;
        vertical-align: middle;
    }

    .hamburger--accessible .hamburger-inner, .hamburger--accessible .hamburger-inner::before, .hamburger--accessible .hamburger-inner::after {
        background-color: #222;
    }

.hamburger-label {
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.hamburger-label-hidden {
    display: none;
}

.hamburger--example {
    outline: 1px dashed cyan;
}

    .hamburger--example .hamburger-box {
        outline: 1px dashed green;
    }

    .hamburger--example .hamburger-inner, .hamburger--example .hamburger-inner::before, .hamburger--example .hamburger-inner::after {
        background-color: #222;
    }

.name {
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    padding-top: 1.25em;
    padding-top: 2em;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.information-directions {
    font-size: 14px;
    width: 100%;
}

.browsers,
.types {
    padding-left: 0;
    list-style: none;
}

    .browsers li,
    .types li {
        margin-bottom: 0.25em;
    }

.browsers {
    padding-left: 1em;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.hint {
    display: none;
    margin-bottom: 1em;
}

    .hint.is-visible {
        display: block;
    }

@media only screen and (min-width: 320px) {
    .browsers {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 480px) {
    .types {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .browsers {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 640px) {
    .information-directions {
        font-size: 15px;
    }
}

/*# sourceMappingURL=screen.css.map */