/*
406C7E 70919F A0B6BF CFDADF ECF1F3
365C6B 30515F 20363F 101B20 060B0D
*/

.image-overlay {
  position: relative;
  left: 0;
  top: 0;
}

.image-bottom {
  position: relative;
  top: 0;
  left: 0;
}

.image-top {
  position: absolute;
  top: 0px;
  left: 0px;
}

.button {
  margin-bottom: 6px;
  margin-right: 6px;
}

/* ------------------------------------------ TOOL TIPS ------------------------------------------ */

.tooltip-arrow, .white-tooltip + .tooltip > .tooltip-inner {
  background-color: #ffffff;
  color: #000;
}

.tooltip.in {
  opacity:1!important;
}

/* top tooltip */
.tooltip.top .tooltip-inner {
  background-color:  #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #fff;
}
 
.white-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #000;
}

.tip {
  display: inline-block;
  background-color: #ffffff;
  color: #000000;
  border-bottom: dotted 1px white;
}

.tip a:link {
  text-decoration: none;
}

.tip-text + .tooltip > .tooltip-inner {
  background-color: white;
  color: black;
  text-align: left;
  font-size: .8em;
}

.tip-text + .tooltip > .tooltip-arrow {
  border-bottom-color: #f00;
}

/* ------------------------------------------ FILTER/SORT ------------------------------------------ */

/* 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 {
  /*border: 2px solid #484542;
  background: hsla(0, 0%, 0%, 0.15);*/
  position: relative;
  background: #fff;
  /*border: 1px solid #D0E7D4;*/
}

/* 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: #555;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

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

/* horizontal examples need height */

.grid--horizontal {
  height: 334px;
}

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

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

.static-banner {
  position: absolute;
  left: 10px;
  top: 10px;
  background: hsla(210, 100%, 50%, 0.8);
  z-index: 1;
  padding: 2px 20px;
  color: white;
  pointer-events: none;
}

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

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

/* ---- 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: 50px;
  height: 50px;
  background: #e6e5e4;
  border: 2px solid hsla(0, 0%, 0%, 0.4);
}

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

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

.grid-item--gigante {
  width: 150px;
  height: 200px;
}

.grid--clickable .grid-item:hover {
  border-color: #28F;
  background: #8CF;
  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--masonry-gutter ------------------------- */

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

/* ---- grid--masonry-gutter-bottom ------------------------- */

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

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

/* ---- grid--packery-gutter ------------------------- */

.grid--packery-gutter .grid-item--width2 {
  width: 110px;
}
.grid--packery-gutter .grid-item--height2 {
  height: 110px;
}

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

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

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

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

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

/* ---- filter blocks ------------------------- */

.grid-item--filter-block-red, .grid-item--filter-block-blue {
  width: 60px;
  height: 60px;
}

.grid--filter-blocks-large .grid-item--filter-block-red, .grid--filter-blocks-large .grid-item--filter-block-blue {
  width: 80px;
  height: 80px;
}

.grid-item--filter-block-red {
  background: #D00;
}

.grid-item--filter-block-blue {
  background: #19F;
}

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

.grid--hor-order .grid-item {
  width: 100px;
  height: 80px;
}

.grid--hor-order .grid-item--height2 {
  height: 100px;
}

.grid--hor-order .grid-item--height3 {
  height: 120px;
}

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

.grid-splash-item {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 20px;
  background: red;
  color: white;
  font-size: 3.0rem;
  font-weight: bold;
  line-height: 1.0;
}

.grid-splash-item--width2 {
  width: 210px;
}

.grid-splash-item--height2 {
  height: 210px;
}

.grid-splash-item:nth-child(10n+0) { background: hsl(   0, 100%, 50%); }
.grid-splash-item:nth-child(10n+1) { background: hsl(  36, 100%, 50%); }
.grid-splash-item:nth-child(10n+2) { background: hsl(  72, 100%, 50%); }
.grid-splash-item:nth-child(10n+3) { background: hsl( 108, 100%, 50%); }
.grid-splash-item:nth-child(10n+4) { background: hsl( 144, 100%, 50%); }
.grid-splash-item:nth-child(10n+5) { background: hsl( 180, 100%, 50%); }
.grid-splash-item:nth-child(10n+6) { background: hsl( 216, 100%, 50%); }
.grid-splash-item:nth-child(10n+7) { background: hsl( 252, 100%, 50%); }
.grid-splash-item:nth-child(10n+8) { background: hsl( 288, 100%, 50%); }
.grid-splash-item:nth-child(10n+9) { background: hsl( 324, 100%, 50%); }

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

.hero__title {
  font-size: 4.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.1em;
}

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

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

.hero__big-button {
  display: block;
  position: relative;
  padding: 10px;
  font-size: 1.2rem;
  background: #161615;
  color: #FB4;
  border-radius: 8px;
  margin-bottom: 10px;
}

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

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

/* hover */
.hero__big-button:hover {
  background: #4FB;
  color: #222;
}

.hero__big-button:hover .hero__button-icon path {
  fill: #222;
}

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

@media screen and ( min-width: 960px ) {
  .hero__title {
    font-size: 7.0rem;
  }
  .hero__tagline {
    font-size: 2.1rem;
  }

  /* buttons */

  .hero__big-button {
    font-size: 1.3rem;
    line-height: 1.5;
    padding: 20px 20px;
    margin-bottom: 40px;
  }
}

/* in-use-grid ------------------------- */

.in-use-grid .grid-sizer, .in-use-grid__item {
  width: 23.5%;
}

.in-use-grid .gutter-sizer {
  width: 2%;
}

.in-use-grid__item {
  background: #161615;
  float: left;
  margin-bottom: 20px;
  border-radius: 5px;
}

.in-use-grid__item__title {
  margin: 0;
  padding: 10px;
}

.in-use-grid__item__image {
  display: block;
  max-width: 100%;
  border-radius: 0 0 5px 5px;
}

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

code .string,
code .tag .value { color: #0C4; }
code .number, /* integer */
code .cp, /* doctype */
code .literal { color: #38F; } /*boolean*/
code .keyword { color: #F73; } /* keyword */
code .kd, /* storage */
code .attribute { color: #DC8; } /* markup attribute */
code .title { color: #9CF; }
code .params { color: #98D; }
code .regexp  { color: #FC8; } /* regex */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */
code .built_in { color: #DD8; }

/* comment */
code .comment { color: #999; font-style: italic; }
code .tag { color: #6CF; } /* Markup open tag */
code .id { color: #ABC; } /* css id */
code .class,
code .selector-class { color: #C95; }  /* CSS class */
code .rules { color: #FED; }
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */
code .hexcolor { color: #F63; }
code .at_rule { color: #088; }


/* isotope keywords */
code .isotope_var { color: #F3F; }
code .jquery_var { color: #DF8; }
code .isotope_keyword { color: #0FF; text-decoration: underline; }

.code-display code {
  font-size: 18px;
}

/* element-item ------------------------- */

.element-item {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  padding: 0px;
  background: #fff;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 40px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  text-align:center;
}

.element-item .symbol {
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: .8em;
  font-weight: normal;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 0.8em;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

/* ui-group ------------------------- */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  font-size: 1.2em;
}

.ui-group__title {
  /*display: inline-block;*/
  vertical-align: top;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 10px 0 0;
  font-weight: bold;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 0px; /* was 20px; */
}

@charset "UTF-8";

/* variable ------------------------- */

.variable {
  margin: 0.5em 0;
  padding: 5px 10px;
  border-radius: 5px;
  background: hsla(0, 0%, 100%, 0.1);
}

.variable__type {
  color: #ADF;
}

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

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

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  border-radius: 35px;
}
 
.color-shape.big.round {
  border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 .color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

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

.grid-multi-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #e6e5e4;
  border: 2px solid #b6b5b4;
  border-color: hsla(0, 0%, 0%, 0.4);
}

.grid-multi-item[data-color="blue"] { background: #19F; }
.grid-multi-item[data-color="red"] { background: #D00; }
.grid-multi-item[data-color="yellow"] { background: #FD0; }

.grid-multi-item .number {
  font-size: 4.0rem;
  font-weight: 600;
  color: white;
  padding-top: 0.1em;
  text-align: center;
  line-height: 90px;
  margin: 0;
}

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

.stamp {
  position: absolute;
  width: 30%;
  height: 60px;
  background: orange;
  border: 4px dotted #161615;
}

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

.stamp--stamp-option-stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}

.stamp--stamp-option-stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

.stamp--packery {
  right: 20%;
  top: 80px;
  width: 45%;
  height: 90px;
}

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

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

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

/* vertical-list ------------------------- */

.vertical-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid #484542;
  background: hsla(0, 0%, 0%, 0.15);
}

.vertical-list__item {
  width: 100%;
  border-top: 1px solid #484542;
}

.vertical-list__item > * {
  display: inline-block;
  padding: 3px 4px;
}

.vertical-list__item .name { width: 20%; }
.vertical-list__item .symbol { width: 10%; }
.vertical-list__item .weight { width: 15%; }
.vertical-list__item .number { width: 10%; }
.vertical-list__item .category { width: 25%; }


/* top accordion ------------------------- */

.panel > .panel-heading {
  background-color: #fff;
  color: white;
  font-size: 11pt;
  padding: 10px;
}

.panel > .panel-body {
  background-color: #fff;
  color: #000000;
  font-size: 11pt;
}

.panel > .panel-body_backing {
  background-color: #fff;
  color: #000000;
  font-size: 11pt;
  padding: 10px;
}

.panel .panel-default {
  border: none;
}

/* bottom accordion ------------------------- */

article.accordion1, article.accordion2, article.accordion3, article.accordion4, article.accordion5 {
  display: block;
  width: 100%;
  margin: 0 auto;
  background-color: #666;
  overflow: auto;
  /*border-radius: 5px;*/
  /*box-shadow: 0 3px 3px rgba(0,0,0,0.3);*/
}

article.accordion1 section, article.accordion2 section, article.accordion3 section, article.accordion4 section, article.accordion5 section {
  position: relative;
  display: block;
  float: left;
  width: 2em;
  height: 16em;
  margin: 0.5em 0 0.5em 0.5em;
  color: #333;
  background-color: #D0E7D4;
  overflow: auto;
  /*border-radius: 3px;*/
}

article.accordion1 section h2, article.accordion2 section h2, article.accordion3 section h2, article.accordion4 section h2, article.accordion5 section h2 {
  position: absolute;
  font-size: 1em;
  font-weight: bold;
  width: 12em;
  height: 2em;
  top: 8em;
  left: 0;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #000;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

article.accordion1 section h2 a, article.accordion2 section h2 a, article.accordion3 section h2 a, article.accordion4 section h2 a, article.accordion5 section h2 a {
  display: block;
  width: 100%;
  line-height: 2em;
  text-decoration: none;
  color: #000;
  outline: 0 none;
}

article.accordion1 section.toggle-open, article.accordion2 section.toggle-open, article.accordion3 section.toggle-open, article.accordion4 section.toggle-open, article.accordion5 section.toggle-open {
  width: 90%;
  padding: 0 1em;
  color: #000;
  background-color: #fff;
}

article.accordion1 section.toggle-open h2, article.accordion2 section.toggle-open h2, article.accordion3 section.toggle-open h2, article.accordion4 section.toggle-open h2, article.accordion5 section.toggle-open h2 {
  position: static;
  font-size: 1.3em;
  text-indent: 0;
  color: #000;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

article.accordion1 section, article.accordion1 section h2, article.accordion2 section, article.accordion2 section h2, article.accordion3 section, article.accordion3 section h2, article.accordion4 section, article.accordion4 section h2, article.accordion5 section, article.accordion5 section h2 {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}