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

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

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

.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: 23%;
}

.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;
}

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

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

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

.buy-button {
  background: #EAEAEA;
}

.buy-button__price { background: #6C6; }

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

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

*[data-license-property] { color: #EA0; }

.duo--legal__plain {
  background: #EAEAEA;
}

/* showcase-item
------------------------- */

.showcase-item__link {
  background: #F8F8F8;
}

.showcase-item__link:hover {
  color: white;
  background: #EA0;
}

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

.site-footer {
  background: #EAEAEA;
  margin-top: 0;
  position: relative;
  z-index: 2; /* above page nav */
}

.site-footer .twitter-logo { fill: #C09; }
.site-footer a:hover .twitter-logo { fill: #EA0; }

/* ---- mfzy-logo ---- */

.site-footer .mfzy-logo__body-fill { fill: #C09; }
.site-footer .mfzy-logo__stripes { display: none; }

.site-footer a:hover .mfzy-logo__stripes { display: inline; }

/* ---- mfzy-wordmark ---- */

.mfzy-wordmark { stroke: #C09; }
.mfzy-brand__link:hover .mfzy-wordmark { stroke: #333; }

@media screen and ( min-width: 960px ) {

  .site-footer .mfzy-brand {
    position: absolute;
    left: 10px;
    top: 70px;
    width: 180px;
  }

  .site-footer .mfzy-logo {
    display: block;
    width: 108px;
    height: 108px;
    margin: 0 auto 5px;
  }

  .site-footer .mfzy-wordmark {
    display: block;
    margin: 0 auto;
  }

}

/* 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 {
  background: #EAEAEA;
  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: #EA0;
  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: 60px;
  height: 60px;
  background: #C09;
  border: 2px solid hsla(0, 0%, 0%, 0.4);
}

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

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

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

.grid--clickable .grid-item:hover {
  background: #EA0;
  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: #EA0;
  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;
}

.button--hero-big {
  display: block;
  font-size: 1.2rem;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button--hero-big:hover {
  background-color: #EA0;
  color: white;
}

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

.button--hero-big:hover .hero__button-icon path { fill: white; }

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

}