/******
* DEMO
*******/
/* /!\ */
/* Demo specific css
   ========================================================================== */
body{ margin: 0; font: 400 100%/1.4 'Open Sans',sans-serif; color: #555; }
*{ box-sizing: border-box; }
*::after,*::before{ box-sizing: border-box; }
h1{ font-size: 2rem; }
h2{ font-size: 1.4rem; color: #8cc84b; }
h3{ font-size: 1.1rem; }
p { font-size: 0.9rem; }
ul{ padding:0; list-style-position: inside; }
li{ font-size: 0.9rem; margin: 0; }
.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  border: 1px solid #8cc84b;
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.3333333;
  border-radius: 6px;
  color: #8cc84b;
  background-color: transparent;
  text-decoration: none;
}

.demoPage {
  max-width: 80em;
  margin: 0 auto;
  padding: 0 1em;
}
.demoPage h1 {
  font-size: 2rem;
  margin-bottom: 1em;
  text-align: center;
}
.demoPage h2 {
  margin-top: 3em;
}
.demoPage a {
  color: #8cc84b;
}
.header {
  background: #8cc84b;
  position: relative;
  margin-bottom: 50px;
  color: white;
  padding: 4em 0 1em;
  text-align: center;
}
.header a {
  color: inherit;
  text-decoration: none;
}
.header:before {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  bottom: 0;
  transform: skewY(3deg);
  transform-origin: 0;
}
.header h1 {
  display: inline-flex;
  align-items: center;
  font-size: 3rem;
  border-bottom: 10px solid #fff;
  border-top: 10px solid #fff;
  border-radius: 18px;
  padding: .8rem 2.6rem;
  text-transform: uppercase;
  margin-bottom: .3em;
}
.header h1:before {
  content: '';
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-right: 5px;
  height: 40px;
  width: 42px;
  border: 1px solid #8cc84b;
  background-color: white;
  background-image: linear-gradient(to top, #8cc84b 2px, transparent 2px), linear-gradient(to left, #8cc84b 2px, transparent 2px), linear-gradient(to left, #8cc84b 2px, transparent 2px);
  background-size: 100% 50%, 50% 50%, 100%, 100%;
  background-position: 0 0, 0 100%, 0 0;
  background-repeat: repeat-y, repeat-x;
}
.header p {
  color: #fff;
  margin: 0 auto;
}
.github-button iframe {
  margin: 0 .5rem .5rem;
}
section {
  position: relative;
  margin: 2em 0 4em;
}
section:before {
  content: '';
  display: inline-flex;
  border: 1px solid #8cc84b;
  width: 100%;
  align-items: stretch;
  position: absolute;
  bottom: 20px;
}
section:after {
  content: '';
  position: relative;
  display: block;
  margin: 5rem auto;
  height: 40px;
  width: 42px;
  border: 7px solid white;
  border-left-width: 9px;
  background-color: #8cc84b;
  background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
  background-size: 100% 50%, 50% 50%, 100%, 100%;
  background-position: 0 0, 0 100%, 0 0;
  background-repeat: repeat-y, repeat-x;
}
footer {
  background: #8cc84b;
  padding: 1em 0;
  text-align: center;
}
footer p {
  color: #fff;
  margin: 0 auto;
}
footer a {
  color: inherit;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid rgba(147, 128, 108, 0.5);
  padding: .5em;
}
.bs-callout,
pre {
  padding: 1.25em;
  margin: 1.6em 0;
  background: #fcfcfc;
  border: 1px solid #e6e6e6;
  border-left-width: 5px;
  border-radius: 3px;
}
.bs-callout {
  max-width: 100%;
  overflow-x: auto;
  border-color: #8cc84b;
}
pre {
  overflow-x: auto;
  font-size: .875em;
  white-space: pre;
  word-wrap: normal;
}
pre.doc {
  border-color: #8cc84b;
}
/**/
.demo {
  width: 100%;
  background: rgba(147, 128, 108, 0.2);
  text-align: center;
}
.demo-left {
  text-align: left;
}
.demo p {
  margin: 0;
  padding: 1rem;
}
@media screen and (max-width: 35.5em) {
  .demo p {
    padding: .5rem;
  }
}
.demo-explain {
  margin: 0;
  padding: 0;
}
.demo img,
.demo-card img {
  display: block;
  max-width: 100%;
  height: auto;
}
.withBorder {
  border: 1px solid rgba(147, 128, 108, 0.5);
}
.withBorder .col,
.withBorder [class*='col-'] {
  padding: 0;
}
.withBorder .demo {
  border: 1px solid rgba(147, 128, 108, 0.5);
}
.demo-card{
  background-color: white;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
  color: #4a4a4a;
}
.demo-card p{
  margin: 1rem;
}
.demo-card-footer{
  border-top: 1px solid #dbdbdb;
}
.demo-card-footer .col{
  text-align: center;
}
.demo-card-footer .col:not(:last-child){
  border-right: 1px solid #dbdbdb;
}
.demo-card-footer a{
  display: block;
  padding: .5rem;
  text-decoration: none;
}


/* Tooltip */
section:nth-child(n+3) [class*="grid-"],
section:nth-child(n+3) [class*="col-"] {
  position: relative;
  cursor: help;
}
section:nth-child(n+3) [class*="grid-"]:hover:after,
section:nth-child(n+3) [class*="col-"]:hover:after {
  content: attr(class);
  padding: 2px 8px;
  position: absolute;
  left: 0.5rem;
  top: 0;
  white-space: nowrap;
  z-index: 20;
  background-color: #555;
  color: #fff;
  font-size: .8rem;
}