@font-face {
    font-family: 'Stackicons-Social';
    src: url("../fonts/Stackicons-Social.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/Stackicons-Social.eot?#iefix") format("embedded-opentype"), url("../fonts/Stackicons-Social.woff") format("woff"), url("../fonts/Stackicons-Social.ttf") format("truetype"), url("../fonts/Stackicons-Social.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");
    /* Legacy iOS */
    font-style: normal !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    speak: none;
}
a:hover {
  cursor: pointer; }

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

.hide {
  display: none; }

.visuallyhidden, .screen-reader-text {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active, .screen-reader-text.focusable:active,
    .visuallyhidden.focusable:focus, .screen-reader-text.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto; }

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

.icons-panel1 { margin: -.25em 0 .75em;}
/* you can override with a single-color in CSS */
.icons-panel1 a:before { color: #fabe00 !important; }

.icons-panel1 a:hover:before,
.icons-panel1 a:focus:before { color: #fff !important; }
.icons-panel1 a:active:before { color: #ffdd3d !important; }

.hero {
  margin: 0;
  background: #f4f4f4; }

.hero-icons {
  width: 100%;
  font-size: 300%;
  min-width: 320px;
  text-align: center; }

.hero-icons .st-shape-icon {
  margin: 0 -.25em; }

.twitter-row {
  font-size: 38%; }

.twitter-row a:before {
  text-shadow: 0px 2px 3px #ccc !important;
  text-shadow: 0px 2px 3px rgba(0,0,0,.25) !important; }

.twitter-row a.st-icon-only:after {
  text-shadow: 0px 2px 3px #ccc !important;
  text-shadow: 0px 2px 3px rgba(0,0,0,.2) !important; }

.intro {
  padding: 0;
  background: #555;
  color: #fff; }

.intro p {
  padding: 1em .75em 0 1em;
  font-size: 96%;}

.button.github {
  display: none; }

.callout-panels {
  font-size: 96%;
  line-height: 1.25; }

.callout-panels h2 {
  padding-top: .125em;
  color: #fff;
  font-size: 1.75em; }

.callout-panels p {
  margin-top: .75em;}

.callout-panels a {
  font-weight: bold;
  color: #fff;
  color: rgba(255,255,255,.85); }

.callout-panels a:hover {
  color: #fff; }

.callout-panels .st-icon-codepen:before {
  color: #fff;
  font-size: 125%;
  top: -.08em;
  left: 0; }

.callout-panel-group {
  display: table;
  width: 100%; }

.callout-panel {
  padding: .75em 1em .5em;
  background: #fc7113;
  color: #fff; }

.callout-panel.panel2 {
  background: #ff8b19; }

.callout-panel.panel3 {
  background: #f5aa00; }

.callout-panel.panel4 {
  background: #f9bb00;
  padding-bottom: 1em}

.callout-panels small {
  display: block;
  margin-top: 1em;
  font-size: 81.25%;
  color: #402f00;
  color: rgba(0,0,0,.75); }

.callout-panels small a {
  color: #402f00;
  color: rgba(0,0,0,.75); }

.callout-panels small a:hover,
.callout-panels small a:focus {
  color: #fa580d; }

.button-contribute {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: .75em auto 0; }

.news {
  min-height: 3em;
  font-size: 85%; }

.news h2 { margin: 0;
  padding: 9px 0 3px;
  color: #999;
  font-size: 18px; }

.news-content {
  padding: .5em 1.12em 0; }

p.lede { margin-top: 0; }

.signup {
  padding: 0 1.12em; }

#mc_embed_signup {margin: 0; padding: 0;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button { position: relative; top: -33px; width: 40%; right: -60%; margin: 0;  background-color: #f5aa00; border: 0 none; border-radius:0; color: #fff; cursor: pointer; display: block; font-size:16px; height: 32px; line-height: 32px; margin: 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; }
#mc_embed_signup .button:hover, #mc_embed_signup .button:focus {background-color:#fa580d;}
#mc_embed_signup .button:active {background-color:#dc002a;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .clear {clear:none; display:inline;}
#mc_embed_signup label {display:block; margin: 0; padding: 15px 0 3px;font-size: 18px; color: #999;}
#mc_embed_signup input.email {display:block; padding:8px 41% 8px 0; margin:0; text-indent:5px; width:100%; min-width:130px; border-radius: 0 !important;}
/* #mc_embed_signup input.button {display:block; width:50%; margin:0 0 10px 0; min-width:90px;} */
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

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

.font-sample h2 {
  text-align: center;
  padding: .135em 0 .165em;
  color: #fff;
  background: #bbb; }

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

.stackicons-size-sm{
    font-size: 11px;
}

.control-font {
    margin-bottom: 1em;
    padding: 7px 4px;
    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 {
    padding: 3px 20px;
    height: 2.125em;
    line-height: 2.125em;
    font-weight: bold;
    font-size: 15px;
    color: #353F4F;
    transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
}

.control-shape a:hover, .control-shape a:focus {
   background: #eaeaea;
   border-bottom: 3px solid #d3d1d1;
}

.control-shape a:active, .control-shape a.active {
  color: #fa580d;
  /* color: #353F4F; */
  border-bottom: 3px solid #47ae54;
  border-radius: 0px;
  background-color: transparent;
}

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