@charset "UTF-8";
    .aden {
    -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
    filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
}
.aden:after {
    background: -webkit-linear-gradient(left, rgba(66, 10, 14, .2), transparent);
    background: linear-gradient(to right, rgba(66, 10, 14, .2), transparent);
    mix-blend-mode: darken;
}
.inkwell {
    -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
    filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
}
.perpetua:after {
    background: -webkit-linear-gradient(top, #005b9a, #e6c13d);
    background: linear-gradient(to bottom, #005b9a, #e6c13d);
    mix-blend-mode: soft-light;
    opacity: .5;
}
.reyes {
    -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(.75);
    filter: sepia(.22) brightness(1.1) contrast(.85) saturate(.75);
}
.reyes:after {
    background: #efcdad;
    mix-blend-mode: soft-light;
    opacity: .5;
}
.gingham {
    -webkit-filter: brightness(1.05) hue-rotate(-10deg);
    filter: brightness(1.05) hue-rotate(-10deg);
}
.gingham:after {
    background: -webkit-linear-gradient(left, rgba(66, 10, 14, .2), transparent);
    background: linear-gradient(to right, rgba(66, 10, 14, .2), transparent);
    mix-blend-mode: darken;
}
.toaster {
    -webkit-filter: contrast(1.5) brightness(.9);
    filter: contrast(1.5) brightness(.9);
}
.toaster:after {
    background: -webkit-radial-gradient(circle, #804e0f, #3b003b);
    background: radial-gradient(circle, #804e0f, #3b003b);
    mix-blend-mode: screen;
}
.walden {
    -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);
    filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);
}
.walden:after {
    background: #04c;
    mix-blend-mode: screen;
    opacity: .3;
}
.hudson {
    -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1);
    filter: brightness(1.2) contrast(.9) saturate(1.1);
}
.hudson:after {
    background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134);
    background: radial-gradient(circle, #a6b1ff 50%, #342134);
    mix-blend-mode: multiply;
    opacity: .5;
}
.earlybird {
    -webkit-filter: contrast(.9) sepia(.2);
    filter: contrast(.9) sepia(.2);
}
.earlybird:after {
    background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
    background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
    mix-blend-mode: overlay;
}
.mayfair {
    -webkit-filter: contrast(1.1) saturate(1.1);
    filter: contrast(1.1) saturate(1.1);
}
.mayfair:after {
    background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, .8), rgba(255, 200, 200, .6), #111 60%);
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .8), rgba(255, 200, 200, .6), #111 60%);
    mix-blend-mode: overlay;
    opacity: .4;
}
.lofi {
    -webkit-filter: saturate(1.1) contrast(1.5);
    filter: saturate(1.1) contrast(1.5);
}
.lofi:after {
    background: -webkit-radial-gradient(circle, transparent 70%, #222 150%);
    background: radial-gradient(circle, transparent 70%, #222 150%);
    mix-blend-mode: multiply;
}
._1977 {
    -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
    filter: contrast(1.1) brightness(1.1) saturate(1.3);
}
._1977:after {
    background: rgba(243, 106, 188, .3);
    mix-blend-mode: screen;
}
.brooklyn {
    -webkit-filter: contrast(.9) brightness(1.1);
    filter: contrast(.9) brightness(1.1);
}
.brooklyn:after {
    background: -webkit-radial-gradient(circle, rgba(168, 223, 193, .4) 70%, #c4b7c8);
    background: radial-gradient(circle, rgba(168, 223, 193, .4) 70%, #c4b7c8);
    mix-blend-mode: overlay;
}
._1977, .aden, .brooklyn, .earlybird, .gingham, .hudson, .lofi, .mayfair, .perpetua, .reyes, .toaster, .walden, .xpro2 {
    position: relative;
}
._1977:after, .aden:after, .brooklyn:after, .earlybird:after, .gingham:after, .hudson:after, .lofi:after, .mayfair:after, .perpetua:after, .reyes:after, .toaster:after, .walden:after, .xpro2:after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.xpro2 {
    -webkit-filter: sepia(.3);
    filter: sepia(.3);
}
.xpro2:after {
    background: -webkit-radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, .6) 110%);
    background: radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, .6) 110%);
    mix-blend-mode: color-burn;
}
::-moz-selection {
    background: #9b1c9b;
    color: #fff;
}
::selection {
    background: #9b1c9b;
    color: #fff;
}
body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0 auto;
    /*padding: 0 2em;*/
    max-width: 1200px;
    line-height: 1.5;
    font-size: 1.1em;
    overflow-x: hidden;
}
@media (max-width:500px) {
    body {
    font-size: .9em;
}
}
section {
    overflow-x: hidden;
}
h1, h2 {
    color: #9b1c9b;
}
@media (max-width:500px) {
    h1, h2 {
    text-align: center;
}
}
em, h3 {
    color: #c63082;
}
code, pre {
    background: #eff1ef;
}
code code, pre code {
    border: none;
    background: 0 0;
}
code {
    font-family: monospace;
    padding: .25em .5em;
}
.highlight {
    color: #c63082;
    font-weight: 800;
}
.comment {
    color: #abb1ad;
}
ul {
    width: 100%;
    margin: 0;
    padding: 0;
}
ol, ul {
    line-height: 1.8;
}
/*a {
    text-decoration: none;
    color: #9b1c9b;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
    border-bottom: 1px solid #c63082;
    padding-bottom: .05em;
}
a:focus, a:hover {
    color: #e297c0;
    border-color: #e297c0;
}*/
figure {
    max-width: 350px;
    max-height: 350px;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
}
@media (max-width:1240px) {
    figure {
    max-width: 300px;
    max-height: 300px;
}
}
@media (max-width:992px) {
    figure {
    max-width: 250px;
    max-height: 250px;
}
}
@media (max-width:768px) {
    figure {
    max-width: 300px;
    max-height: 300px;
}
}
@media (max-width:500px) {
    figure {
    max-width: 400px;
    max-height: 400px;
}
}
figure:focus, figure:hover {
    -webkit-filter: none!important;
    filter: none!important;
}
figure:after {
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
}
figure:focus:after, figure:hover:after {
    opacity: 0!important;
}
figcaption {
    position: absolute;
    bottom: 1em;
    right: 0;
    padding: .25em 1em .25em .25em;
    background: #000;
    color: #fff;
    font-weight: 200;
}
hr {
    clear: both;
    float: none;
    border: 1px solid #eff1ef;
    margin: 2em auto;
    display: block;
}
img {
    display: block;
    margin: auto;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%}
.demo__section {
    font-weight: 300;
    font-size: 1.2em;
}
.demo__subtitle {
    font-size: 2em;
    text-align: center;
}
.demo__note {
    font-style: italic;
    text-align: center;
    display: block;
    margin: 2em auto 0;
}
.demo__input-area {
    display: block;
    font-size: 1em;
    text-align: center;
    font-weight: 300;
    margin: 1em auto;
    padding: 1em 0;
}
@media (max-width:500px) {
    .demo__input-area {
    margin: 0;
    font-size: .8em;
}
}
.demo__input-label {
    text-align: center;
    color: #fff;
}
.demo__input-img {
    max-width: 16em;
    font-size: 1em;
    padding: .5em;
    border: 2px solid #9b1c9b;
    outline: 0;
    margin: .5em;
    font-weight: 200;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
}
.demo__input-img:hover {
    background: #f5e8f5;
}
.demo__input-img:focus {
    background: #e6c6e6;
}
.demo__option-field {
    /*color: #9b1c9b;*/
    color: #fff;
    border: 1px solid #cad1cc;
    min-width: 200px;
}
.demo__option-img {
    max-width: 150px;
    height: 150px;
    display: inline-block;
    cursor: pointer;
}
@media (max-width:768px) {
    .demo__option-img {
    height: 100px;
}
}
@media (max-width:500px) {
    .demo__option-img {
    height: 60px;
}
}
.demo__list {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.demo__item {
    margin: .75em;
    list-style: none;
}
@media (max-width:992px) {
    .demo__item {
    margin: .5em;
}
}
@media (max-width:500px) {
    .demo__item {
    margin: .5em 0;
}
}
.title-section {
    width: 100%;
    text-align: center;
}
.title--logo {
    max-width: 400px;
}
.title--top-sub {
    font-weight: 200;
    margin: 0 auto;
    text-align: center;
    max-width: 26em;
}
@media (max-width:500px) {
    .title--top-sub {
    font-size: 1.2em;
}
}
.explanation-section, .how-to-section {
    font-size: 1.2em;
    font-weight: 300;
    max-width: 40em;
    margin: 0 auto;
    display: block;
}
.attribution {
    padding: 1em 0 4em;
    text-align: center;
}
.callout {
    max-width: 14em;
    background: #eff1ef;
    padding: 2em;
    margin: -.5em 2em 0;
    display: block;
    font-weight: 200;
    float: right;
}
@media (max-width:768px) {
    .callout {
    max-width: 28em;
    margin: 1em auto;
    float: none;
    font-size: .8em;
}
}
.available-classes, .available-extends, .supported-browsers {
    -webkit-columns: 15em 2;
    -moz-columns: 15em 2;
    columns: 15em 2;
}
.supported:after {
    content: '✔';
    color: #62B859;
    margin-left: .5em;
}
.not-supported:after {
    content: '✘';
    color: #c63082;
    margin-left: .5em;
}
