/*! 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 { -ms-text-size-adjust: 100%; /* 2 */
 -webkit-text-size-adjust: 100%; /* 2 */}

/**
 * Remove default margin.
 */

/* 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.
 */

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

/**
 * 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/10/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 of focused elements when they are also in an
 * active/hover state.
 */


/* 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.
 */


/**
 * 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 { 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 { 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.
 */


/**
 * 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"], /* 1 */
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.
 */



/**
 * 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.
 */

input[type="search"] { -webkit-appearance: textfield; /* 1 */
 box-sizing: content-box; /* 2 */}

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

/* colors

orange #C90
green #0C9
purple #90C
magenta #C09
light gray #F8F8F8
*/


* { box-sizing: border-box; }

/* font-size on html for rem*/


/* ---- links ---- */




/* ---- headers ---- */



/* ---- lists ---- */



/* ---- code ---- */



@media (min-width: 960px) {
 html { font-size: 19px; }

 html.export { font-size: 16px; }

 pre, code, kbd { font-size: 15px; }
}

/* web fonts
------------------------- */

/*@import url("//hello.myfonts.net/count/2d333f"); */

/*
 Just use WOFF2 and WOFF for webfonts
 http://css-tricks.com/snippets/css/using-font-face/ */


code .string,
code .tag .value { color: #0A2; }
code .number, /* integer */
code .cp, /* doctype */
code .literal { color: #07D; } /*boolean*/
code .keyword { color: #E31; } /* keyword */
code .kd, /* storage */
code .attribute { color: #D31; } /* markup attribute */
code .title { color: #39A; }
code .params { color: #98D; }
code .p { color: #EDB; } /* punctuation */
code .o { color: #F63; } /* operator */
code .nb { color: #AA97AC; } /* support */

/* comment */
code .comment { color: #999; font-style: italic; }

code .tag { color: #37B; } /* Markup open tag */

code .id { color: #567; } /* css id */
code .class { color: #B27; } /* CSS class */
code .rules { color: #431; }
code .value { color: #555; } /* CSS value */
code .nd,
code .pseudo { color: #38D; } /* CSS pseudo selector */
code .hexcolor { color: #F63; }
code .at_rule { color: #088; }

code .built_in { color: #E08; }

code .packery, /* new Packery() */
code .packery_var { color: #D0D; } /* flkty */

code .jquery_var { color: #D70; } /* $gallery */

code .packery { text-decoration: underline; }

/* animate-item-size-item
------------------------- */

.animate-item-size-item { float: left; }

/* animate-item-size-item is invisible, but used for layout */
.animate-item-size-item,
.animate-item-size-item__content { width: 60px; height: 60px; }

/* animate-item-size-item__content is visible, and transitions size */
.animate-item-size-item__content { background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5); -webkit-transition: width 0.4s, height 0.4s; transition: width 0.4s, height 0.4s; }

.animate-item-size-item:hover .animate-item-size-item__content { border-color: white; background: #C90; cursor: pointer; }

/* both animate-item-size-item and animate-item-size-item content change size */
.animate-item-size-item.is-expanded,
.animate-item-size-item.is-expanded .animate-item-size-item__content { width: 180px; height: 120px; }

.animate-item-size-item.is-expanded { z-index: 2; }

.animate-item-size-item.is-expanded .animate-item-size-item__content { background: #0C9; }

/* ---- responsive ---- */

.grid--animate-item-size-responsive .animate-item-size-item,
.grid--animate-item-size-responsive .grid-sizer { width: 20%; }

.grid--animate-item-size-responsive .animate-item-size-item__content,
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded .animate-item-size-item__content { width: 100%; height: 100%; }

/* item has expanded size */
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded { width: 60%; }

/* button
------------------------- */

.button { display: inline-block; background: #90C; border: none; padding: 0.5em 1.0em; color: #F8F8F8; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.3); cursor: pointer; border-radius: 7px; margin-bottom: 10px; }

.button:hover { background: #B2E; color: #F8F8F8; }

.button:active { background: #80B; box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.6); }

.button.is-selected { background: #C90; }

.button--hero-big { display: block; font-size: 1.4rem; padding-left: 0.5em; background: #90C; }

/* buy-button
------------------------- */

.buy-button { display: block; margin-bottom: 10px; line-height: 1.3em; background: #EAEAEA; border-radius: 8px; border-color: #0C9; padding: 10px 100px 10px 10px; position: relative; text-align: center; }

.buy-button__for { display: block; font-style: italic; }

.buy-button__price { font-size: 1.6em; background: #0C9; color: #F8F8F8; position: absolute; right: 0; top: 0; height: 100%; width: 80px; text-align: center; line-height: 64px; border-radius: 0 8px 8px 0; }

.buy-button__price__dollar { font-size: 0.6em; margin-right: 3px; vertical-align: top; }

.buy-button:hover { border-color: #C90; }

.buy-button:hover .buy-button__price { background: #C90; }

@media screen and (min-width: 768px) {
 /* ---- buy-button-trio ---- */

 .buy-button-trio { margin-top: 40px; margin-bottom: 50px; }

 .buy-button-trio:after { content: ''; display: block; clear: both; }

 /* ---- buy-button-trio buy-button ---- */

 .buy-button-trio .buy-button { float: left; width: 31.33%; margin-right: 3%; }

 .buy-button-trio .buy-button:nth-child(3) { margin-right: 0; }

 .buy-button-trio .buy-button { transition: transform 0.2s; padding: 20px 0 0; }

 .buy-button-trio .buy-button > span { display: block; padding-left: 10px; padding-right: 10px; }

 .buy-button-trio .buy-button__project,
 .buy-button-trio .buy-button__license { font-size: 1.1em; }

 .buy-button-trio .buy-button__title { font-size: 1.9em; line-height: 1.2; }

 .buy-button-trio .buy-button__license { margin-bottom: 15px; }

 .buy-button-trio .buy-button__for { margin-bottom: 20px; font-size: 1.1em; }

 .buy-button-trio .buy-button__price { position: relative; width: auto; font-size: 2.4em; line-height: 1.3; padding-top: 15px; padding-bottom: 10px; border-radius: 0 0 8px 8px; }

 .buy-button-trio .buy-button__price__dollar { position: relative; top: 8px; }


 .buy-button-trio .buy-button:hover { transform: translateY(-5px); }
}

/* call out
------------------------- */

.call-out { border-top: 2px solid #C90; border-bottom: 2px solid #C90; padding-left: 40px; position: relative; margin: 20px 0; }

/* (i) */
.call-out:before { content: 'i'; display: block; width: 20px; height: 20px; position: absolute; left: 5px; top: 20px; background: #C90; border-radius: 50%; text-align: center; color: white; font-family: Consolas, Georgia, serif; font-style: italic; }

.call-out h2 { margin-top: 0; padding-top: 10px; border-top: none; }

.call-out--chill { border-color: #0C9; }
.call-out--chill:before { background: #0C9; }

@media screen and (min-width: 768px) {
 .call-out { border: 2px solid #C90; padding: 10px 20px 10px 80px; position: relative; margin: 20px 0; }

 .call-out--chill { border-color: #0C9; }

 .call-out:before { width: 40px; height: 40px; left: 20px; top: 30px; font-size: 1.9em; line-height: 46px; }
}

/* com-license-agreement
------------------------- */

span[data-license-property] { color: #C90; }

/* drag-hero-demos
------------------------- */

.drag-hero-demos__instruction { font-size: 1.2rem; color: #888; margin-top: 0; }

.drag-hero-demos__grid { background: #EAEAEA; }

.what-is-packery .drag-hero-demos__grid { background: #F8F8F8; }



.drag-hero-demos__item { background: #C09; float: left; cursor: move; line-height: 70px; font-size: 1.3rem; color: #F8F8F8; text-align: center; border: 4px solid transparent; }

.drag-hero-demos__item:hover,
.drag-hero-demos__item.is-dragging { border-color: hsla(0, 0%, 100%, 0.5); background: #C90; }

.drag-hero-demos__item.is-dragging,
.drag-hero-demos__item.is-positioning-post-drag { z-index: 2; }

.drag-hero-demos__grid .packery-drop-placeholder { border: 3px dashed hsla(0, 0%, 0%, 0.5); -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }

/* ---- masonry ---- */

.drag-hero-demos__item,
.drag-hero-demos__grid__masonry-grid-sizer { width: 32%; }

.drag-hero-demos__item--masonry { height: 80px; }

.drag-hero-demos__grid__masonry-gutter-sizer { width: 2%; }

.drag-hero-demos__item--masonry.height2 { height: 130px; }

.drag-hero-demos__item--masonry.height3 { height: 180px; }

/* ---- dash ---- */


.drag-hero-demos__item--dash,
.drag-hero-demos__grid__dash-grid-sizer { width: 16%; width: calc( (100% - 8px * 4) / 5 ); }

.drag-hero-demos__item--dash { height: 80px; }

.drag-hero-demos__item--dash.width2 { width: 32%; width: calc( ((100% - 8px * 4) / 5) * 2 + 8px ); }

.drag-hero-demos__item--dash.height2 { height: 168px; }

/* duo
two columns for large devices
------------------------- */

.duo:after { content: ''; display: block; clear: both; }

.duo__cell { margin-bottom: 10px; }

/* --- duo--legal --- */


.duo--legal__plain { padding: 0 0.8em; background: #FAFAFA; color: #888; }

.duo--legal--first .duo--legal__official:before,
.duo--legal--first .duo--legal__plain:before { display: block; padding-top: 0.5em; font-size: 0.88em; color: #888; }

.duo--legal--first .duo--legal__official:before { content: 'Official legal copy'}

.duo--legal--first .duo--legal__plain:before { content: 'Plain English'}


@media screen and ( min-width: 768px ) {
 .duo__cell { float: left; width: 100%; }

 .duo__cell:first-child { margin-right: 3%; }

 .duo__cell--license-option p { margin-top: 0; }
}

/* edit-demo
------------------------- */

.edit-demo { clear: both; font-size: 0.92em; }

/* gh-button
------------------------- */

.gh-button { display: inline-block; background: none; border: none; font-family: Helvetica, Arial, sans-serif; color: #333; }

.gh-button__title,
.gh-button__stat { float: left; font-size: 18px; font-weight: bold; line-height: 20px; padding: 5px 10px; border: 1px solid #d5d5d5; }

.gh-button__icon { height: 21px; fill: #333; display: inline-block; vertical-align: bottom; }

.gh-button__title { background-color: #eee; background-image: linear-gradient(#fcfcfc, #eee); border-radius: 4px 0 0 4px; }

.gh-button__icon--github-logo { margin-right: 0.2em; }

.gh-button__stat { border-left: 0; border-radius: 0 4px 4px 0; background: white; }

.gh-button:hover { color: #333; }

.gh-button:hover .gh-button__title { background-color: #ddd; background-image: linear-gradient(#eee, #ddd); }

.gh-button:hover .gh-button__stat { color: #4078c0; }

.gh-button:hover .gh-button__icon--star { fill: #4078c0; }

/* grid - 조회
------------------------- */

.grid { position: relative; }

/* clearfix */
.grid:after { content: ''; display: block; clear: both; }

/* ---- counting ---- */

.grid--counting { counter-reset: item; }

.grid--counting .grid-item:before { counter-increment: item; content: counter(item); display: block; color: #F8F8F8; padding-top: 0.2em; text-align: center; }

/* ---- horizontal ---- */

/* horizontal examples need height */
.grid--horizontal { height: 300px; }

/* ---- static banner ---- */

.grid--has-banner { position: relative; }

.static-banner { position: absolute; left: 10px; top: 10px; background: #C90; z-index: 1; padding: 2px 20px; color: white; pointer-events: none; }

/* ---- fixed-width ---- */

.grid--fixed-width { width: 300px; }

/* ---- stamp ---- */

.grid--has-stamp { position: relative; }

/* ---- fit-width ---- */

/* centered */
.grid--fit-width { margin: 0 auto; }

/* grid-image-item
------------------------- */

.grid-image-item,
.grid--images .grid-sizer { width: 33.33%; }

.grid-image-item { float: left; }

.grid-image-item img { display: block; max-width: 100%; }

/* grid-item
------------------------- */

.grid-item { float: left; width: 790px; padding:10px 10px 10px 10px; margin:5px; overflow:hidden; word-break:break-all; }

/*.grid-item--width2 { width: 120px; }
.grid-item--height2 { height: 330px; }

.grid-item--width3 { width: 180px; }
.grid-item--height3 { height: 180px; } */

.grid-item--large { width: 180px; height: 180px; background: #0C9; z-index: 2; }

.grid--clickable .grid-item:hover { background: #C90; cursor: pointer; }

/* ---- insert demo ---- */

.grid-item .number { line-height: 50px; text-align: center; color: #333; margin: 0; font-size: 1.3rem; }

/* ---- fluid-5-col ---- */

.grid--fluid-5-col .grid-item,
.grid--fluid-5-col .grid-sizer { width: 20%; }

.grid--fluid-5-col .grid-item--width2 { width: 40%; }

/* ---- grid-sizer--row-height ---- */

.grid-sizer--row-height { height: 60px; }

/* ---- grid--has-gutter ---- */

.grid--has-gutter .grid-item--width2 { width: 130px; }

.grid--has-gutter .grid-item--height2 { height: 130px; }

/* ---- grid--fluid-gutter ---- */

.grid--fluid-gutter .grid-sizer,
.grid--fluid-gutter .grid-item { width: 22%; }

.grid--fluid-gutter .gutter-sizer { width: 4%; }

.grid--fluid-gutter .grid-item--width2 { width: 48%; }

/* ---- grid--draggable ---- */

.grid--draggable .grid-item { width: 100px; height: 100px; }

.grid--draggable .grid-item--width2 { width: 200px; }
.grid--draggable .grid-item--height2 { height: 200px; }

.grid--draggable .grid-item:hover { border-color: hsla(0, 0%, 100%, 0.5); cursor: move; }

.grid--draggable .grid-item.is-dragging,
.grid--draggable .grid-item.ui-draggable-dragging,
.grid--draggable .grid-item.is-positioning-post-drag { background: #C90; z-index: 2; }

.grid--draggable .packery-drop-placeholder { outline: 3px dashed hsla(0, 0%, 0%, 0.5); outline-offset: -6px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }

/* ---- ---- */

.grid--order-after-drag .grid-item { padding: 10px; color: #F8F8F8; font-size: 1.2rem; }

/* ---- masonry-horizontal ---- */

.grid--masonry-horizontal-gutter .grid-item--height2 { height: 110px; }

/* ---- ---- */

.grid--masonry-horizontal-gutter-right .grid-item { margin-right: 10px; }

.grid--masonry-horizontal-gutter-right .grid-item--width2 { width: 110px; }

/* ---- cells-by-row-element-sizing ---- */

.grid--cells-by-row-element-sizing .grid-item { width: 13%; }

.grid--cells-by-row-element-sizing .grid-item--width2 { width: 23%; }

.grid--cells-by-row-element-sizing .grid-sizer { width: 25%; height: 110px; }

/* ---- cells-by-column-element-sizing ---- */

.grid--cells-by-column-element-sizing .grid-item { height: 13%; }

.grid--cells-by-column-element-sizing .grid-item--width2 { height: 23%; }

.grid--cells-by-column-element-sizing .grid-sizer { height: 25%; width: 110px; }

/* ---- fitrows-gutter ---- */

.grid--fit-rows-gutter .grid-item--width2 { width: 110px; }
.grid--fit-rows-gutter .grid-item--width3 { width: 170px; }

/* hero
------------------------- */

.hero { background: #C09; color: #F8F8F8; position: relative; overflow: hidden; }

/* ---- grid ---- */

.hero__grid-container { position: relative; }

.hero__grid { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

.hero__grid__item { background: hsla(0, 0%, 0%, 0.3); }

/* ---- content ---- */

/* keep above grid */
.hero__content { position: relative; z-index: 2; padding-bottom: 20px; }

.hero__title { font-size: 5.0rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; padding-top: 10px; color: #F8F8F8; }

.hero__tagline { font-size: 1.4rem; margin: 0 0 0.8em; line-height: 1.2; }

.hero__button-icon { vertical-align: bottom; width: 40px; height: 40px; margin-right: 6px; }

.hero__button-icon path { fill: #F8F8F8; }

/* ---- desktop ---- */

@media screen and ( min-width: 960px ) {
 .hero__title { font-size: 9.0rem; padding-top: 20px; margin-bottom: 10px; }

 .hero__tagline { font-size: 2.2rem; }

 /* stamp elements, shape around titles */
 .hero__grid__stamp { position: absolute;/* background: hsla(0, 0%, 100%, 0.4); */
 z-index: 2; }

 .hero__grid__stamp--ackery { width: 434px; height: 82px; left: 96px; top: 92px; }

 .hero__grid__stamp--p-top { width: 98px; height: 78px; left: 0px; top: 62px; }

 .hero__grid__stamp--p-bottom { width: 36px; height: 81px; left: 0px; top: 92px; }

 .hero__grid__stamp--k { width: 28px; height: 90px; left: 249px; top: 62px; }

 .hero__grid__stamp--y { width: 46px; height: 60px; left: 458px; top: 140px; }

 .hero__grid__stamp--tagline { width: 536px; height: 44px; left: 0px; top: 238px; }


 .hero__grid__stamp--gh-button { width: 306px; height: 42px; left: 0px; top: 314px; }
}


/* in-use-gallery
------------------------- */

.primary-content .in-use-gallery { max-width: none; }

/* clearfix */
.in-use-gallery:after { content: ''; display: block; clear: both; }

.in-use-gallery__item { float: left; width: 48%; margin-right: 2%; margin-bottom: 40px; }

.in-use-gallery__item__link { display: block; }

.in-use-gallery__item__image { display: block; max-width: 100%; }

.in-use-gallery__item__title { overflow: hidden; white-space: nowrap; width: 100%; text-overflow: ellipsis; }

/* ---- desktop media query ---- */

@media screen and ( min-width: 960px ) {
 .in-use-gallery__item { width: 23%; }
 }

/* instruction
------------------------- */

.instruction { font-size: 1.1rem; margin-bottom: 10px; color: #AAA; }

/* main
------------------------- */

.main { padding-bottom: 40px; }

.main h2 { font-size: 2.0rem; font-weight: 400; padding: 0.4em 0; border-top: 2px solid; margin-top: 60px; }

.main h3 { border-top: 1px solid #BBB; padding-top: 20px; margin-top: 50px; margin-bottom: 30px; font-size: 1.5rem; }

.main h2:target,
.main h3:target { padding-left: 0.5em; background: #C09; color: white; border-color: #C09; }

/* notification
------------------------- */

.notification { position: fixed; max-width: none; right: 10px; bottom: 10px; padding: 10px 20px; font-size: 1.2rem; color: #F8F8F8; opacity: 0; pointer-events: none; background: #C90; z-index: 3; /* above packeries */
 -webkit-transition: opacity 0.4s; transition: opacity 0.4s; }

/* other-product
------------------------- */

.other-product__link { position: relative; /* gonna abs */
 display: block; padding: 0px; background: #F8F8F8; border-radius: 5px; color: #C90; }

.site-footer .other-product__link:hover { background: #C90; color: #F8F8F8; }

.other-product__link:after { content: ''; display: block; clear: both; }

.other-product__image { float: left; display: block; width: 100%; max-width: 140px; margin-right: 1.0em; border-radius: 5px 0 0 5px; }

.other-product__title { font-weight: bold; font-size: 2.0rem; margin-bottom: 0.25em; margin-top: 0px; padding-top: 5px; }

.other-product__description { line-height: 1.2; }

/* page-nav
------------------------- */

.page-nav { padding: 1.0em 0; font-size: 0.8rem; z-index: 2; /* above packeries */}

.page-nav__item { display: inline-block; }

.page-nav__item:after { content: ' •'; margin: 0 0.3em; opacity: 0.5; }

.page-nav__item:last-child:after { content: none; }

/* ---- index-page ---- */

.index-page .page-nav a { transition: color 0.4s; }

.page-nav.is-at-top a { color: #F8F8F8; }


/* desktop */
@media screen and ( min-width: 960px ) {
 .page-nav { position: absolute; left: 0; top: 60px; list-style: none; margin: 0; width: 200px; padding: 20px; }

 .page-nav__item { display: block; margin-bottom: 2px; margin-left: 0; }

 .page-nav__item:after { content: none; }

 .page-nav__item a { display: block; background: transparent; }

 .page-nav__item--h3 { padding-left: 1.0em; }
}

/* fix .page-nav only if we have enough height */
@media screen and ( min-width: 960px ) and ( min-height: 540px ){
 .page-nav { position: fixed; }
 }

/* primary-content
------------------------- */

.primary-content { padding-left: 10px; padding-right: 10px; max-width: 1500px; }

.primary-content > * { max-width: 900px; }

.primary-content .duo.example { max-width: none; }

/* desktop */
@media screen and ( min-width: 960px ) {
 .primary-content { padding-left: 200px; padding-right: 20px; }
}

/* site-footer
------------------------- */

.site-footer { position: relative; padding: 2.0em 0; background: #EAEAEA; z-index: 3; /* above page-nav */}

.site-footer__copy { font-size: 1.2rem; }

/* site-footer-brand
------------------------- */

.site-footer-brand { padding: 0 10px; }

.site-footer-brand__metafizzy-logo { height: 50px; }

.site-footer-brand__metafizzy-wordmark { width: 140px; height: auto; fill: #333; }

.site-footer-brand .metafizzy-logo__body { fill: #C09; }

.site-footer-brand .metafizzy-logo__stripe1 { fill: transparent; }
.site-footer-brand .metafizzy-logo__stripe2 { fill: transparent; }
.site-footer-brand .metafizzy-logo__stripe3 { fill: transparent; }
.site-footer-brand .metafizzy-logo__stripe4 { fill: transparent; }

.site-footer-brand a:hover .metafizzy-wordmark { fill: #C25; }

.site-footer-brand a:hover .metafizzy-logo__body { fill: transparent; }

.site-footer-brand a:hover .metafizzy-logo__stripe1 { fill: #C25; }
.site-footer-brand a:hover .metafizzy-logo__stripe2 { fill: #E62; }
.site-footer-brand a:hover .metafizzy-logo__stripe3 { fill: #EA0; }
.site-footer-brand a:hover .metafizzy-logo__stripe4 { fill: #19F; }


/* desktop */
@media screen and ( min-width: 960px ) {
 .site-footer-brand { width: 180px; position: absolute; left: 0; top: 60px; }

 .site-footer-brand__metafizzy-logo { height: 120px; display: block; margin: 0 auto 10px; }

 .site-footer-brand__metafizzy-wordmark { width: 150px; display: block; margin: 0 auto; }
}

/* site-nav
------------------------- */

.site-nav { background: #C09; position: relative; z-index: 3; /* above page-nav */}

.site-nav,
.site-nav__title { line-height: 44px; }


/* clear fix */
.site-nav:after { content: ' '; display: table; clear: both; }

/* ---- site-nav__title ---- */

.site-nav__title { float: left; text-align: center; font-size: 1.5rem; margin: 0; }

.site-nav__title a { padding: 0 0.8em; }

/* ---- site-nav__list, site-nav__item ---- */

.site-nav__list { list-style: none; margin: 0; }

.site-nav__list:after { content: ' '; display: table; clear: both; }

.site-nav__item { float: left; }

.site-nav__item a { padding: 0 1.0em; }

/* link color & hover */
.site-nav__title a,
.site-nav__item a { display: block; color: #F8F8F8; }

.site-nav__title a:hover,
.site-nav__item a:hover { background: #C90; color: #F8F8F8; }

/* selected */
.layout-page .site-nav__item--layout a,
.options-page .site-nav__item--options a,
.methods-page .site-nav__item--methods a,
.events-page .site-nav__item--events a,
.draggable-page .site-nav__item--draggable a,
.license-page .site-nav__item--license a,
.appendix-page .site-nav__item--appendix a,
.faq-page .site-nav__item--faq a { background: #90C; }


@media screen and ( min-width: 960px ) {
 /* hide text on index */
 .index-page .site-nav__title a { display: none; }

 .site-nav,
 .site-nav__title { line-height: 60px; }

 .site-nav__title { width: 200px; height: 60px; font-size: 2.0rem; }

 .site-nav__item { font-size: 1.1rem; }
}


.variable { margin: 0.5em 0; padding: 5px 10px; background: white; }

.variable__type { color: #097; }

.variable__type,
.variable__description { margin-left: 10px; }

.variable__type:before,
.variable__description:before { content: '·'; padding-right: 0.4em; display: inline-block; }

/* stamp
------------------------- */

.stamp { position: absolute; width: 30%; height: 60px; background: #C90; border: 4px dotted hsla(0, 0%, 0%, 0.5); }

/* ---- static ---- */

.stamp--static1 { right: 0; top: 0; width: 30%; height: 100px; }

.stamp--static2 { right: 10%; top: 80px; width: 50%; height: 80px; }

/* what-is-packery
------------------------- */

.what-is-packery { background: #EAEAEA; padding-top: 20px; padding-bottom: 10px; }

.what-is-packery__description { font-size: 1.2rem; line-height: 1.3; }

/* bootstrap 3
------------------------- */

.bootstrap__container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

.bootstrap__col-xs-4,
.bootstrap__col-xs-6,
.bootstrap__col-xs-8,
.bootstrap__col-xs-12 { padding-right: 15px; padding-left: 15px; }

.bootstrap__col-xs-4 { width: 33.333%; }
.bootstrap__col-xs-6 { width: 50%; }
.bootstrap__col-xs-8 { width: 66.666%; }

.bootstrap__grid-item-content { height: 100px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5); }

.bootstrap__grid-item-content--height2 { height: 200px; }

/* sm */
@media (min-width: 768px){
 .bootstrap__col-sm-4 { width: 33.333%; }
 .bootstrap__col-sm-8 { width: 66.666%; }
 }

/* md */
@media (min-width: 992px){
 .bootstrap__col-md-3 { width: 25%; }
 .bootstrap__col-md-6 { width: 50%; }
 }

/* stamp-methods-demo
------------------------- */

.grid--stamp-methods-demo .grid-item { opacity: 0.8; }

.stamp--stamp-methods-demo { left: 10px; top: 10px; }