* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0; background: #f1f3f4; color: #393939; font-family: 'Roboto Slab', serif; font-size: 14px;}
h1, h2, h3, h4, h5, h6 {margin: 10px 0; font-weight: 300;}
h2 {font-size: 1.8em; font-weight: 400; color: #888; letter-spacing: 1px;} 
section {margin-bottom: 20px;}
p {margin: 0; line-height: 1.5; font-weight: 300;}
a {color: #00aaee; text-decoration: none;}
a:hover {color: #0077a2; text-decoration: underline;}
.hide {display: none;}
.decal {height: 2px; background-color: #000; border-bottom: 1px solid #333;}
.container {/*max-width: 940px;*/ margin-right: auto; margin-left: auto;}
/* EFFECTS
***************/
.glow {text-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-transition: text-shadow 1s linear; -moz-transition: text-shadow 1s linear; -o-transition: text-shadow 1s linear; transition: text-shadow 1s linear;}
.glow.in {text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8), 0 0 0.5em rgba(255, 255, 255, 0.3);}
.fade {opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
.fade.in {opacity: 1;}
/* BUTTONS
***************/
.btn {color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); display: inline-block; text-decoration: none; font-weight: 200; text-align: center; vertical-align: middle; cursor: pointer; border-radius: 0.5em; padding: 0.8em 1.2em; background-color: #ED303C; background-image: -moz-linear-gradient(top, #ED303C, #8D121A); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A)); background-image: -webkit-linear-gradient(top, #ED303C, #8D121A); background-image: -o-linear-gradient(top, #ED303C, #8D121A); background-image: linear-gradient(to bottom, #ED303C, #8D121A); background-repeat: repeat-x; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);}
.btn:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {text-decoration: none; color: #ddd; background-color: #8D121A; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear;  transition: background-position 0.1s linear;}
.btn.active, .btn:active {background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}
/* MARKETING
***************/
.jumbotron {position: relative; padding: 3em 0; text-align: center; background: #242424;}
.jumbotron h1 {color: #fff; font-family: Rokkitt; font-size: 13em; font-weight: 200; text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8); visibility: hidden;}
.jumbotron h1 .char11 {color: #ED303C;}
.jumbotron p {margin-top: -1em; letter-spacing: 0.15em; color: #ccc; font-size: 1.25em; font-weight: 200; text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8); visibility: hidden; text-align: center;}
.jumbotron .btn {margin-top: 2em; margin-bottom: 0.5em; font-size: 1.6em;}
.about {margin-top: 1em;}
.about p {font-size: 1.2em;}
.playground {background: #242424; border-radius: 4px; border: 1px solid #333; margin-bottom: 10px;}
.playground .controls {margin-bottom: 0; background: #282828; border-radius: 0 0 4px 4px; border: 1px solid #0c0c0c; border-top: 1px solid #333;}
.playground .controls form {margin-bottom: 0; padding-bottom: 8px;}
.playground .controls select {width: 48%; margin-right: 4px;}
@media (max-width: 480px) {.playground .controls select {  width: 100%; margin-right: 0; }}
.playground .viewport {display: table; min-height: 10em; padding: 20px; border-radius: 4px 4px 0 0; border: 1px solid #0c0c0c; overflow: hidden; -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);}
.playground .viewport .tlt {color: #fff; font-size: 1.5em; font-weight: 200; letter-spacing: 1px; padding: 20px 0; display: inline-block; vertical-align: middle; display: table-cell; text-align: center; /*visibility: hidden;*/}
.deps {font-size: 1.2em;}
.deps ul {list-style-type: square; margin: 0;}
.deps ul li {line-height: 1.5em
  font-weight: 200;}
/* GRID 
***************/ 
.grid:after {content: ""; display: table; clear: both;}
[class*='col-'] {float: left; padding-right: 20px;}
.grid [class*='col-']:last-of-type {padding-right: 0;}
.col-1-1 {width: 100%;}
.col-2-3 {width: 66.66%;}
.col-1-3 {width: 33.33%;}
.col-1-2 {width: 50%;}
.col-1-4 {width: 25%;}
.col-3-4 {width: 75%;}
.col-4-5 {width: 80%;}
.col-1-6 {width: 16.66%;}
.col-1-8 {width: 12.5%;}
.grid-pad {padding-left: 20px}
.grid-pad [class*='col-'] {padding-top: 20px; padding-top: 20px;}
.grid-pad [class*='col-']:last-of-type {padding-right: 20px;}
@media (max-width: 767px) {[class*='col-'] {  width: 100%; }}
/* CODE 
**************/
pre code {background: transparent;}