/* 
Bennett Feely
http://bennettfeely.com 
*/
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: 0
}

figure, header, main, section {
    display: block
}

body, html {
    /*position: relative;*/
    /*height: 100%*/
}

body {
    /*font: 100%/1.5 "Alegreya Sans", sans-serif;*/
    /*background: #d3d0c9;*/
    /*color: #100a09*/
}

@media (min-width: 800px) {
    /*body {*/
        /*padding: 0 .5rem;*/
        /*padding-left: -webkit-calc(100% - 23.625rem);*/
        /*padding-left: calc(100% - 23.625rem)*/
    /*}*/
}

.main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (min-width: 800px) {
    .main {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        right: 23.625rem;
        padding: .25rem .25rem .25rem .75rem;
        -ms-touch-action: none;
        touch-action: none
    }
}

header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: rgba(251, 252, 247, .75);
    box-shadow: inset 0 -1px rgba(211, 208, 201, .25);
    padding: .75rem 1rem
}

@media (min-width: 800px) {
    header {
        font-size: larger;
        margin-top: .5rem;
        padding: .75rem 1rem;
        border-radius: 2px 2px 0 0
    }
}

header iframe {
    max-width: 95px;
    -webkit-animation: load 1s both;
    animation: load 1s both
}

@-webkit-keyframes load {
    from {
        opacity: 0
    }
}

@keyframes load {
    from {
        opacity: 0
    }
}

.demo-container {
    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-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #fbfcf7;
    box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
    position: relative;
    z-index: 100;
    padding-top: .5rem;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    tap-highlight-color: transparent;
    touch-callout: none
}

@media (min-width: 800px) {
    .demo-container {
        border-radius: 0 0 2px 2px
    }
}

.demo {
    position: relative;
    padding: 0 0 1rem
}

.customizing .demo {
    cursor: crosshair
}

.box {
    position: relative;
    box-shadow: inset 0 0 0 10px #fbfcf7, inset 0 0 0 11px #d3d0c9;
    -ms-touch-action: none;
    touch-action: none
}

.clipboard, .shadowboard {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #d3d0c9;
    background-image: url(pics/pittsburgh.jpg);
    background-size: cover;
    background-position: center center
}

.shadowboard {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .375s;
    transition: opacity .375s
}

.handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.delete-point, .handle {
    position: absolute;
    width: 20px;
    height: 20px
}

.handle {
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px;
    opacity: .8;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab
}

.customizing .handle {
    cursor: crosshair
}

.customizing:not(.customizing-no-poly) .handle[data-handle="1"] {
    cursor: pointer
}

.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover {
    border-radius: 2px;
    color: #000
}

.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:hover:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    -webkit-clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%);
    clip-path: polygon(67% 30%, 43% 54%, 33% 42%, 24% 51%, 44% 72%, 76% 39%);
    background: #d3d0c9
}

.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active {
    color: #555
}

.customizing:not(.customizing-no-poly) .handle[data-handle="1"]:active:before {
    background: #fff
}

.handle:after {
    display: block;
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px
}

.demo:hover .handle {
    opacity: 1
}

.handle.is-dragging {
    z-index: 100;
    box-shadow: inset 0 0 0 3px;
    cursor: none;
    -webkit-transition: box-shadow 0;
    transition: box-shadow 0
}

.handle.bar {
    border-radius: 20px
}

.handle.bar:after {
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px
}

.delete-point {
    position: absolute;
    left: 22px;
    top: 0;
    width: 25px;
    padding-left: 5px;
    border-radius: 3px;
    background: #d3d0c9;
    -webkit-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    cursor: pointer;
    opacity: .75;
    -webkit-clip-path: polygon(25% 0, 100% 1%, 100% 100%, 25% 100%, 0 50%);
    clip-path: polygon(25% 0, 100% 1%, 100% 100%, 25% 100%, 0 50%);
    -webkit-transition: -webkit-transform .25s, opacity .25s;
    transition: transform .25s, opacity .25s
}

.show-delete .delete-point {
    -webkit-transform: scale3d(0.9, .9, .9);
    -ms-transform: scale3d(0.9, .9, .9);
    transform: scale3d(0.9, .9, .9);
    -webkit-transition: -webkit-transform .25s cubic-bezier(0.15, 1, .3, 1.1), opacity .25s;
    transition: transform .25s cubic-bezier(0.15, 1, .3, 1.1), opacity .25s;
    opacity: 1
}

.delete-point:hover {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform .25s cubic-bezier(0.15, 1, .3, 1.1);
    transition: transform .25s cubic-bezier(0.15, 1, .3, 1.1);
    opacity: 1
}

.delete-point:active {
    background: #100a09
}

.delete-point:active:after {
    background: #d3d0c9
}

.delete-point:after {
    display: block;
    content: "";
    position: absolute;
    top: 4px;
    left: 9px;
    right: 4px;
    bottom: 4px;
    background: #100a09;
    -webkit-clip-path: polygon(20% 10%, 10% 20%, 40% 50%, 10% 80%, 20% 90%, 50% 60%, 80% 90%, 90% 80%, 60% 50%, 90% 20%, 80% 10%, 50% 40%);
    clip-path: polygon(20% 10%, 10% 20%, 40% 50%, 10% 80%, 20% 90%, 50% 60%, 80% 90%, 90% 80%, 60% 50%, 90% 20%, 80% 10%, 50% 40%)
}

.custom-notice {
    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-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1rem;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: background .25s;
    transition: background .25s;
    background: rgba(255, 255, 255, 0)
}

.customizing .custom-notice {
    opacity: 1
}

.custom-notice div {
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, .9);
    padding: 1rem;
    margin: 0 2rem;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
    opacity: 0
}

.start-customizing .custom-notice div {
    opacity: 1;
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite
}

.touchy:after {
    content: "Tap"
}

@media (min-width: 800px) {
    .touchy:after {
        content: "Click"
    }
}

.dark-panel {
    display: none;
    background: #100a09;
    padding: .75rem;
    color: #fff;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.dark-panel p {
    color: #d3d0c9;
    margin: .5rem 0
}

.dark-panel h2:first-child {
    color: #d3d0c9
}

@media (max-width: 800px) {
    .insetting .main .inset {
        display: block
    }
}

@media (min-width: 800px) {
    .insetting .side .inset {
        display: block;
        box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
        border-radius: 2px;
        margin: .25rem
    }
}

@media (max-width: 800px) {
    .customizing .main .custom {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

@media (min-width: 800px) {
    .customizing .side .custom {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
        border-radius: 2px;
        margin: .25rem
    }
}

.finish, .inset-round {
    font: inherit;
    padding: .5rem;
    border-radius: 5rem;
    cursor: pointer;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .9)
}

.finish:hover, .inset-round:hover {
    color: #fff;
    background: rgba(255, 255, 255, .4)
}

.finish:active, .inset-round:active {
    -webkit-animation: none;
    animation: none;
    background: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .4)
}

.finish:after, .inset-round:after {
    content: "Finish " attr(data-shape)
}

.customizing-no-poly .finish, .customizing-no-poly .inset-round {
    -webkit-animation: none;
    animation: none
}

.customizing-no-poly .finish:after, .customizing-no-poly .inset-round:after {
    content: "Close editor"
}

.finish:focus, .inset-round:focus {
    outline: 0
}

.inset-round {
    font-family: monospace;
    text-align: center;
    cursor: text;
    color: #d3d0c9;
    background: #000;
    box-shadow: inset 0 0 0 .125rem rgba(211, 208, 201, .5);
    -webkit-animation: glow 1.5s ease-in-out infinite;
    animation: glow 1.5s ease-in-out infinite;
    opacity: .5
}

.inset-round:hover {
    background: 0 0;
    color: #d3d0c9;
    -webkit-animation: none;
    animation: none;
    opacity: .75
}

.inset-round:focus {
    color: #d3d0c9;
    box-shadow: inset 0 0 0 .125rem rgba(211, 208, 201, .5);
    -webkit-animation: none;
    animation: none;
    opacity: 1
}

@-webkit-keyframes glow {
    50% {
        opacity: .75
    }
}

@keyframes glow {
    50% {
        opacity: .75
    }
}

.shapes {
    position: relative;
    max-width: 100%;
    background: #d3d0c9;
    white-space: nowrap;
    overflow-x: hidden
}

.shapes:focus {
    outline: 0
}

.shapes.horizontal {
    display: block
}

.shapes.vertical {
    display: none
}

@media (min-width: 800px) {
    .shapes.horizontal {
        display: none
    }

    .shapes.vertical {
        display: block;
        white-space: normal
    }
}

@media (max-width: 800px) {
    .shapes:after {
        display: block;
        position: absolute;
        content: "";
        pointer-events: none;
        bottom: 0;
        right: 0;
        top: 0;
        background: -webkit-linear-gradient(0deg, rgba(211, 208, 201, 0), #d3d0c9);
        background: linear-gradient(90deg, rgba(211, 208, 201, 0), #d3d0c9);
        width: 1.5rem
    }
}

.msmm ul {
    width: 100%;
    padding: .25rem
}

@media (max-width: 800px) {
    .msmm ul {
        white-space: nowrap
    }
}

@media (min-width: 800px) {
    .msmm  ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0;
        -webkit-perspective: 400px;
        -ms-perspective: 400px;
        perspective: 400px;
        overflow-x: hidden
    }
}

.flickity-viewport {
    overflow: hidden;
    position: relative
}

figure {
    display: inline-block;
    text-align: center;
    padding: .625rem .25rem;
    margin: .25rem;
    background: #fff;
    width: 4.125rem;
    box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
    border-radius: 2px;
    -webkit-transition: background .25s, -webkit-transform .5s;
    transition: background .25s, transform .5s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    tap-highlight-color: transparent;
    touch-callout: none
}

@media (min-width: 800px) {
    figure {
        -webkit-box-flex: 4.625rem;
        -webkit-flex: 4.625rem;
        -ms-flex: 4.625rem;
        flex: 4.625rem;
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center
    }

    figure:nth-child(n+9) {
        -webkit-transform: translateZ(0) rotateX(-18deg);
        -ms-transform: translateZ(0) rotateX(-18deg);
        transform: translateZ(0) rotateX(-18deg)
    }

    figure:nth-child(n+13) {
        -webkit-transform: translateZ(-1.85rem) rotateX(-36deg);
        -ms-transform: translateZ(-1.85rem) rotateX(-36deg);
        transform: translateZ(-1.85rem) rotateX(-36deg)
    }

    figure:nth-child(n+17) {
        -webkit-transform: translateZ(-6.0125rem) rotateX(-54deg);
        -ms-transform: translateZ(-6.0125rem) rotateX(-54deg);
        transform: translateZ(-6.0125rem) rotateX(-54deg)
    }

    figure:nth-child(n+21) {
        -webkit-transform: translateZ(-9.25rem) rotateX(-72deg);
        -ms-transform: translateZ(-9.25rem) rotateX(-72deg);
        transform: translateZ(-9.25rem) rotateX(-72deg)
    }

    figure:nth-child(n+25) {
        -webkit-transform: translateZ(-11.5625rem) rotateX(-85deg);
        -ms-transform: translateZ(-11.5625rem) rotateX(-85deg);
        transform: translateZ(-11.5625rem) rotateX(-85deg)
    }

    .shapes:focus figure, .shapes:hover figure {
        -webkit-transform: translateZ(0) rotateX(0);
        -ms-transform: translateZ(0) rotateX(0);
        transform: translateZ(0) rotateX(0);
        -webkit-transition: background .25s, -webkit-transform .375s cubic-bezier(0.15, 1, .3, 1.1);
        transition: background .25s, transform .375s cubic-bezier(0.15, 1, .3, 1.1)
    }

    .shapes:focus figure:nth-child(n+9), .shapes:hover figure:nth-child(n+9) {
        -webkit-transition-delay: .025s;
        transition-delay: .025s
    }

    .shapes:focus figure:nth-child(n+13), .shapes:hover figure:nth-child(n+13) {
        -webkit-transition-delay: .05s;
        transition-delay: .05s
    }

    .shapes:focus figure:nth-child(n+17), .shapes:hover figure:nth-child(n+17) {
        -webkit-transition-delay: .075s;
        transition-delay: .075s
    }

    .shapes:focus figure:nth-child(n+21), .shapes:hover figure:nth-child(n+21) {
        -webkit-transition-delay: .1s;
        transition-delay: .1s
    }

    .shapes:focus figure:nth-child(n+25), .shapes:hover figure:nth-child(n+25) {
        -webkit-transition-delay: .125s;
        transition-delay: .125s
    }
}

figure:hover {
    cursor: pointer;
    border-color: transparent;
    box-shadow: 0 2px 3px rgba(16, 10, 9, .3)
}

figure.on, figure:active {
    background: #100a09
}

figure.on figcaption, figure:active figcaption {
    color: #d3d0c9
}

@media (max-width: 800px) {
    figure[data-type=custom] {
        width: 5.78125rem
    }
}

figure.disabled {
    pointer-events: none;
    opacity: .35
}

figure:nth-last-of-type(-n+2) {
    -webkit-box-flex: .75;
    -webkit-flex: .75;
    -ms-flex: .75;
    flex: .75
}

figure .shape {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor
}

figure figcaption {
    display: block;
    font-size: .75rem;
    color: #100a09;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .5rem;
    padding: 0 .25rem
}

.clip-path {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    font-size: 1.1em;
    overflow-x: hidden;
    font-family: monospace;
    overflow-y: hidden
}

@media (min-width: 800px) {
    .clip-path {
        margin: .5rem 0 .25rem;
        border-radius: 2px
    }

    .clip-path:focus {
        outline: 0;
        box-shadow: 0 0 .5rem gold;
        background: rgba(255, 215, 0, .3)
    }
}

.code {
    background: #100a09;
    color: #9a8297;
    padding: .75rem;
    box-shadow: 0 1px 2px rgba(16, 10, 9, .15)
}

@media (min-width: 800px) {
    .code {
        border-radius: 2px
    }
}

.css-code {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media (min-width: 800px) {
    .css-code {
        margin-right: .5vw;
        max-height: 160px;
        overflow-y: auto
    }
}

.edit-in-codepen {
    width: 4rem;
    background-image: url(http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png);
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: opacity .25s, -webkit-transform .25s, background-size .25s;
    transition: opacity .25s, transform .25s, background-size .25s;
    cursor: pointer;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.edit-in-codepen:hover {
    opacity: .8;
    -webkit-transition-duration: .125s;
    transition-duration: .125s
}

.edit-in-codepen:active {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    opacity: .5;
    -webkit-transition-duration: 0;
    transition-duration: 0
}

.edit-in-codepen:focus {
    outline: 0
}

.block {
    display: none;
    padding: .25rem;
    line-height: 1.3
}

.show {
    display: block
}

.show:nth-last-of-type(1) .point.changing {
    -webkit-animation-delay: .125s;
    animation-delay: .125s
}

.show:nth-last-of-type(2) .point.changing {
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.show:nth-last-of-type(3) .point.changing {
    -webkit-animation-delay: .375s;
    animation-delay: .375s
}

.show:nth-last-of-type(4) .point.changing {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.point {
    display: inline-block;
    position: relative;
    vertical-align: baseline
}

.customizing-no-poly .point {
    opacity: .5
}

.point:after {
    display: block;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: currentColor;
    top: -webkit-calc(50% - 40px);
    top: calc(50% - 40px);
    left: -webkit-calc(50% - 40px);
    left: calc(50% - 40px);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    will-change: transform, opacity;
    opacity: 0
}

.point.changing {
    font-weight: 700
}

.point.changing:after {
    -webkit-animation: emph 1.25s;
    animation: emph 1.25s;
    -webkit-animation-delay: inherit;
    animation-delay: inherit
}

@-webkit-keyframes emph {
    20% {
        -webkit-transform: none;
        transform: none;
        opacity: .5
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes emph {
    20% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: .5
    }
    to {
        opacity: 0;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.handle:nth-of-type(1), .point:nth-of-type(1), figure:nth-of-type(1) {
    color: tomato
}

.handle:nth-of-type(2), .point:nth-of-type(2), figure:nth-of-type(2) {
    color: #3cb371
}

.handle:nth-of-type(3), .point:nth-of-type(3), figure:nth-of-type(3) {
    color: orange
}

.handle:nth-of-type(4), .point:nth-of-type(4), figure:nth-of-type(4) {
    color: #1e90ff
}

.handle:nth-of-type(5), .point:nth-of-type(5), figure:nth-of-type(5) {
    color: orchid
}

.handle:nth-of-type(6), .point:nth-of-type(6), figure:nth-of-type(6) {
    color: #d3d3d3
}

.handle:nth-of-type(7), .point:nth-of-type(7), figure:nth-of-type(7) {
    color: #00ced1
}

.handle:nth-of-type(8), .point:nth-of-type(8), figure:nth-of-type(8) {
    color: #db7093
}

.handle:nth-of-type(9), .point:nth-of-type(9), figure:nth-of-type(9) {
    color: khaki
}

.handle:nth-of-type(10), .point:nth-of-type(10), figure:nth-of-type(10) {
    color: #32cd32
}

.handle:nth-of-type(11), .point:nth-of-type(11), figure:nth-of-type(11) {
    color: coral
}

.handle:nth-of-type(12), .point:nth-of-type(12), figure:nth-of-type(12) {
    color: #6a5acd
}

.handle:nth-of-type(13), .point:nth-of-type(13), figure:nth-of-type(13) {
    color: #cd5c5c
}

.handle:nth-of-type(14), .point:nth-of-type(14), figure:nth-of-type(14) {
    color: gray
}

.handle:nth-of-type(15), .point:nth-of-type(15), figure:nth-of-type(15) {
    color: plum
}

.handle:nth-of-type(16), .point:nth-of-type(16), figure:nth-of-type(16) {
    color: #6b8e23
}

.handle:nth-of-type(17), .point:nth-of-type(17), figure:nth-of-type(17) {
    color: #90ee90
}

.handle:nth-of-type(18), .point:nth-of-type(18), figure:nth-of-type(18) {
    color: #ffa07a
}

.handle:nth-of-type(19), .point:nth-of-type(19), figure:nth-of-type(19) {
    color: gold
}

.handle:nth-of-type(20), .point:nth-of-type(20), figure:nth-of-type(20) {
    color: peru
}

.handle:nth-of-type(21), .point:nth-of-type(21), figure:nth-of-type(21) {
    color: #4169e1
}

.handle:nth-of-type(22), .point:nth-of-type(22), figure:nth-of-type(22) {
    color: #f4a460
}

.handle:nth-of-type(23), .point:nth-of-type(23), figure:nth-of-type(23) {
    color: #20b2aa
}

.handle:nth-of-type(24), .point:nth-of-type(24), figure:nth-of-type(24) {
    color: #8a2be2
}

.handle:nth-of-type(25), .point:nth-of-type(25), figure:nth-of-type(25) {
    color: tomato
}

.handle:nth-of-type(26), .point:nth-of-type(26), figure:nth-of-type(26) {
    color: #daa520
}

.handle:nth-of-type(27), .point:nth-of-type(27), figure:nth-of-type(27) {
    color: #32cd32
}

.side {
    padding: .25rem .25rem 1.25rem
}

@media (min-width: 800px) {
    .side {
        max-height: 100%;
        padding: .5rem 0 0 .125rem
    }
}

.panel {
    -webkit-box-flex: auto;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    display: block;
    padding: 1rem 1rem 1rem .5rem;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 10, 9, .15);
    margin: .5rem .25rem
}

.panel[href]:hover {
    box-shadow: 0 2px 3px rgba(16, 10, 9, .3)
}

.panel:first-of-type {
    margin-top: .25rem
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width: 800px) {
    .options {
        position: relative;
        background: #d3d0c9;
        -webkit-transform: translate3d(0, -18.375rem, 0);
        -ms-transform: translate3d(0, -18.375rem, 0);
        transform: translate3d(0, -18.375rem, 0);
        -webkit-transition: -webkit-transform .25s .125s cubic-bezier(0.15, 1, .3, 1.1);
        transition: transform .25s .125s cubic-bezier(0.15, 1, .3, 1.1)
    }

    .options:before {
        display: block;
        position: absolute;
        content: "";
        pointer-events: none;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 4rem;
        background: -webkit-linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%);
        background: linear-gradient(rgba(211, 208, 201, 0), #d3d0c9 90%);
        -webkit-transition: inherit;
        transition: inherit;
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom
    }

    .shapes:focus + .options, .shapes:hover + .options {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .shapes:focus + .options:before, .shapes:hover + .options:before {
        -webkit-transform: scale3d(1, 0, 1);
        -ms-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1)
    }
}

h2 {
    display: inline-block;
    -webkit-box-flex: 4rem;
    -webkit-flex: 4rem auto;
    -ms-flex: 4rem auto;
    flex: 4rem auto;
    font-size: 1.2rem;
    font-weight: 500;
    pointer-events: none;
    min-width: 1em;
    text-align: center;
    color: #bcb8ad;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

h2.block {
    display: block
}

h2:first-child {
    text-align: left;
    color: #100a09;
    font-weight: 300;
    padding: 0 1.25rem 0 .5rem
}

.side > h2 {
    padding: .75rem 1rem .25rem
}

input[type=checkbox], input[type=radio] {
    display: none
}

input[type=number], input[type=url], label {
    display: inline-block;
    font: inherit;
    position: relative;
    text-align: center;
    background: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 2rem;
    padding: .5rem .25rem;
    border-radius: 2rem;
    box-shadow: inset 0 .125rem #d3d0c9, inset -.125rem 0 #d3d0c9, inset 0 -.125rem #d3d0c9;
    cursor: pointer;
    -webkit-transition: background .25s;
    transition: background .25s;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    tap-highlight-color: transparent;
    touch-callout: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

input[type=number]:hover, input[type=url]:hover, label:hover {
    background: #d3d0c9;
    -webkit-transition: background 0;
    transition: background 0
}

input[type=number][for=shadowboard-toggle]:before, input[type=url][for=shadowboard-toggle]:before, label[for=shadowboard-toggle]:before {
    content: "Off"
}

input:checked + input[type=number][for=shadowboard-toggle]:before, input:checked + input[type=url][for=shadowboard-toggle]:before, input:checked + label[for=shadowboard-toggle]:before {
    content: "On"
}

input[type=number][for=webkit]:before, input[type=url][for=webkit]:before, label[for=webkit]:before {
    content: "-";
    font-family: monospace;
    vertical-align: top
}

input[type=number]:first-of-type, input[type=url]:first-of-type, label:first-of-type {
    box-shadow: inset 0 .125rem #d3d0c9, inset .125rem 0 #d3d0c9, inset -.125rem 0 #d3d0c9, inset 0 -.125rem #d3d0c9
}

input[type=number].joined, input[type=url].joined, label.joined {
    border-radius: 0
}

input[type=number].joined:first-of-type, input[type=url].joined:first-of-type, label.joined:first-of-type {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem
}

input[type=number].joined:last-of-type, input[type=url].joined:last-of-type, label.joined:last-of-type {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem
}

input:checked + input[type=number], input:checked + input[type=url], input:checked + label, input[type=number][type=number]:focus, input[type=number][type=url]:focus, input[type=url][type=number]:focus, input[type=url][type=url]:focus, label[type=number]:focus, label[type=url]:focus {
    background: #100a09;
    z-index: 100;
    color: #d3d0c9;
    outline: 0;
    box-shadow: inset 0 0 0 .125rem #100a09, 0 0 0 .125rem #100a09
}

input:checked + input[type=number]:hover, input:checked + input[type=url]:hover, input:checked + label:hover, input[type=number][type=number]:focus:hover, input[type=number][type=url]:focus:hover, input[type=url][type=number]:focus:hover, input[type=url][type=url]:focus:hover, label[type=number]:focus:hover, label[type=url]:focus:hover {
    opacity: .8
}

input:checked + input[type=number]:active, input:checked + input[type=url]:active, input:checked + label:active, input[type=number][type=number]:focus:active, input[type=number][type=url]:focus:active, input[type=url][type=number]:focus:active, input[type=url][type=url]:focus:active, label[type=number]:focus:active, label[type=url]:focus:active {
    opacity: 1
}

input[type=url] {
    display: block;
    line-height: 40px;
    height: 40px;
    box-shadow: inset 0 .125rem #d3d0c9, inset .125rem 0 #d3d0c9, inset -.125rem 0 #d3d0c9, inset 0 -.125rem #d3d0c9
}

input[type=number] {
    font-family: inherit;
    font-size: 1.1rem;
    border-radius: 2rem;
    box-shadow: inset 0 0 0 .125rem #d3d0c9;
    appearance: textfield;
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

.shadowboard-toggle {
    margin-top: 1rem
}

.backgrounds {
    overflow: hidden;
    position: relative;
    padding: .5rem 0 .75rem .375rem
}

.backgrounds img {
    cursor: pointer;
    border-radius: .25rem;
    float: left;
    width: -webkit-calc(25% - .25rem);
    width: calc(25% - .25rem);
    height: auto;
    outline: .25rem solid #fff;
    margin: .125rem;
    -webkit-transition: .5s;
    transition: .5s;
    -ms-interpolation-mode: bicubic;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none
}

.backgrounds img:hover {
    opacity: .9
}

.backgrounds img:active {
    opacity: .5;
    -webkit-transition: 0;
    transition: 0
}

.backgrounds + input {
    font: inherit;
    font-size: 1rem;
    line-height: 2;
    width: -webkit-calc(100% - .375rem);
    width: calc(100% - .375rem);
    margin-left: .375rem;
    text-align: left;
    padding: .25rem 1rem
}

@-webkit-keyframes selected {
    10% {
        opacity: .5
    }
}

@keyframes selected {
    10% {
        opacity: .5
    }
}

.no-support-message {
    display: none
}

.no-support .no-support-message {
    display: block
}

.cite.panel {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.cite.panel .twitter {
    margin: .75rem 0 .5rem .5rem
}

.cite.panel p {
    font-size: .95rem
}

.cite.panel a {
    text-decoration: none;
    font-weight: 500;
    color: inherit;
    -webkit-transition: .25s;
    transition: .25s
}

.cite.panel:hover a {
    color: #0B7FDA
}

.cite.panel:hover a:hover {
    text-decoration: underline
}

.warning.panel, .warning.panel:active {
    background: tomato
}

.warning.panel h1 {
    font-weight: 300;
    font-size: 2.5rem;
    padding: 0 .5rem
}

.warning.panel h1:before {
    font: .7em Browsers;
    content: "\e609";
    padding-right: .5em
}

.browser-support {
    color: inherit;
    text-decoration: none
}

.no-support .browser-support.permanent {
    display: none
}

.browser-support h2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0
}

.browser-support small {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
    padding-left: 1em
}

.browser-support small:before {
    content: "("
}

.browser-support small:after {
    content: ")"
}

.browser-support:hover small {
    color: #0B7FDA;
    text-decoration: underline
}

.browser-support:hover small:before {
    content: "www."
}

.browser-support:hover small:after {
    content: ""
}

.browser-support:active {
    background: rgba(255, 255, 255, .5)
}

.browser-support .table {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: .25rem
}

.icon {
    display: inline-block;
    text-align: center;
    padding: .25rem;
    color: #100a09;
    -webkit-transition: color .25s, -webkit-transform .25s, text-shadow .25s;
    transition: color .25s, transform .25s, text-shadow .25s;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.panel:hover .icon.unsupported {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: .15
}

.icon:before {
    display: block;
    font-family: Browsers;
    font-size: 2.5em
}

.icon.chrome:before {
    content: "\e603"
}

.icon.safari:before {
    content: "\e607"
}

.icon.opera:before {
    content: "\e606"
}

.icon.firefox:before {
    content: "\e604"
}

.icon.ie:before {
    content: "\e605"
}

.icon:after {
    display: block;
    font-size: 1.25em;
    content: attr(data-version);
    padding-top: .25rem
}

.icon.unsupported {
    opacity: .3
}

.icon [data-version=""]:after {
    content: "/u00D7"
}

p {
    font-size: 1.1rem;
    line-height: 1.2;
    padding: .5rem 0 0 .5rem
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Alegreya Sans Light"), local("AlegreyaSans-Light"), url(http://fonts.gstatic.com/s/alegreyasans/v2/11EDm-lum6tskJMBbdy9aanUXp5W4FLE8OnWB9t-aHo.woff) format("woff")
}

@font-face {
    font-family: 'Alegreya Sans';
    font-style: italic;
    font-weight: 300;
    src: local("Alegreya Sans Light Italic"), local("AlegreyaSans-LightItalic"), url(http://fonts.gstatic.com/s/alegreyasans/v3/WfiXipsmjqRqsDBQ1bA9CjlgAWjU5_zqYf1mnuZ7Lrf3rGVtsTkPsbDajuO5ueQw.woff2) format("woff2");
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: "Alegreya Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Alegreya Sans"), local("AlegreyaSans-Regular"), url(http://fonts.gstatic.com/s/alegreyasans/v2/KYNzioYhDai7mTMnx_gDgnt9r5m2YmP5sw3cUAQwL0E.woff) format("woff")
}

@font-face {
    font-family: Browsers;
    src: url(fonts/browsers.eot);
    src: url(fonts/browsers.eot) format("embedded-opentype"), url(fonts/browsers.woff) format("woff"), url(fonts/browsers.ttf) format("truetype"), url(fonts/browsers.svg) format("svg");
    font-weight: 400;
    font-style: normal
}