.st-demo {
  font-family: 'Stackicons-Social';
  width: 100%;
  font-size: 400%;
  top: 0;
  margin: 0; }

.st-demo .st-icon {
  margin: -.25em 0 0 -.6em;
  font-size: 125%; }

.st-demo b {
  position:relative;
  top: -.5em;
  left: -.85em;
  font-size: 50%;
  color: #ffd200;
  font-family: 'Stackicons-Social', sans-serif; }

.dribbble-1 {
  color: rgb(240, 119, 160);
  /* to show overlapping "multi-color" elements */
  margin-left: 0; }
.dribbble-2 {
  color: rgb(250, 156, 190);
  margin-left: -.75em; }
.dribbble-3 {
  color: rgb(197, 55, 109);
  margin-left: -.75em; }
.dribbble-4 {
  color: rgb(204, 204, 204);
  color: rgba(0, 0, 0, 0.198);
  margin-left: -.85em; }

.github-1 {
  color: rgb(21, 21, 21);
  margin-left: 0em; }
.github-2 { color: rgb(243, 202, 178);
  margin-left: -.65em; }
.github-3 {
  color: rgb(177, 66, 58);
  margin-left: -.7em; }
.github-4 {
  color: rgb(156, 230, 254);
  color: rgba(131, 224, 254, 0.8);
  margin-left: -.9em; }

/* font-sample viewer */

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table; }
  .clearfix:after {
    clear: both; }

.hide { display: none; }

.font-sample {
  margin: 1.5em auto;
  padding: 0;
  border: 1px solid #bbb;
  font-size: 94%;}

.font-sample h2 {
  text-align: center;
  padding-bottom: .1em;
  color: #fff;
  font-size: 1.25em;
  line-height: 1.25em;
  background: #bbb; }

.font-sample a {
      text-decoration: none;
      color: #f5aa00; }

.font-sample a:hover, .font-sample a:focus {
      color: #fa580d; }

.font-sample a:active {
      color: #dc002a; }

.stackicons-font-sample {
  clear: both;
  padding: 0 1.4em 0 1.1em;
  font-size: 125%;
  text-align: center; }

.control-font {
  min-height: 2.5em;
  margin-bottom: 2em;
  padding: 0;
  background: #f4f4f4;
  font-size: 85%;  }

.toggle-color {
  float: right;
  padding: 0 1em;
  height: 2.125em;
  line-height: 2.125em;
  text-align: right;
-webkit-transition: color .2s ease,
             background .2s ease;
 -moz-transition: color .2s ease,
             background .2s ease;
   -o-transition: color .2s ease,
             background .2s ease;
  -ms-transition: color .2s ease,
             background .2s ease;
      transition: color .2s ease,
             background .2s ease;
  color: #bbb; }

.toggle-color:hover, .toggle-color:focus {
  color: #555;
  background: #eaeaea; }

.toggle-color:active,
.toggle-color.active {
  color: #fa580d; }

.toggle-color:after {
  content: " off"; }

.toggle-color.active:after {
  content: " on"; }

.control-shape {
  padding: 0 0 0 .5em; }

.control-shape a {
  float: left;
  padding: 0 .5em;
  height: 2.125em;
  line-height: 2.125em; }

.control-shape a:hover, .control-shape a:focus {
   background: #eaeaea; }

.control-shape a:active, .control-shape a.active {
  color: #fa580d; }

a.toggle-ssmin {
  display: block;
  margin-top: .5em;
  padding: 0 1em;
  height: 2em;
  line-height: 2em;
  text-align: right;
  font-size: 85%;
  color: #bbb; }

.toggle-ssmin.active {
  color: #f5aa00; }

.toggle-ssmin:after {
  content: "-Minimal"; }

.toggle-ssmin.active:after {
   content: "";  }

.font-sample-name.active:after {
  content: "-Minimal"; }

@media
  /* papa-bear */
  only screen and (min-width : 768px) {

    .st-demo { width: 50%; }

    figure .stackicons-logo { font-size: 300%; }

  }