/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, pre, code {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*
This is the varibles page where all
designs can be stylized and recompiled
to propogate the awesome new designs
to the whole page!!
*/
/*
This is the varibles page where all
designs can be stylized and recompiled
to propogate the awesome new designs
to the whole page!!
*/
body {
  padding: 60px;
  background-color: #fff; }

* {
  box-sizing: border-box; }

.wrapper {
  width: 800px;
  margin: 0 auto; }

.col-left {
  width: 350px;
  float: left;
  position: fixed;
  top: 60px; }
  .col-left .footer {
    position: fixed;
    bottom: 60px; }

.col-right {
  width: 380px;
  padding-top: 104px;
  padding-bottom: 60px;
  float: right; }

@media (max-width: 760px) {
  .wrapper {
    width: 100%;
    transition: 1s; }

  .col-left {
    width: 100%;
    clear: both;
    position: static;
    transition: 1s; }
    .col-left .footer {
      position: static;
      transition: 1s; }

  .col-right {
    width: 100%;
    clear: both;
    transition: 1s;
    padding-top: 40px; } }
/*
This is the varibles page where all
designs can be stylized and recompiled
to propogate the awesome new designs
to the whole page!!
*/
body {
  font-family: 'Open sans', sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #303E4B;
  margin-bottom: 20px; }

h1 {
  font-size: 40px;
  font-weight: 800; }

h2 {
  font-size: 20px;
  font-weight: 600; }

h3 {
  font-size: 16px;
  font-weight: 600;
  margin-left: 30px;
  color: rgba(48, 62, 75, 0.8); }

p {
  color: rgba(48, 62, 75, 0.7);
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 2;
  font-weight: 300; }

.sub {
  margin-left: 30px; }

p:last-child {
  margin: 0; }

/*
This is the varibles page where all
designs can be stylized and recompiled
to propogate the awesome new designs
to the whole page!!
*/
iframe {
  width: 380px;
  height: 213.75px;
  margin: 0 auto;
  margin-bottom: 20px; }

@media (max-width: 760px) {
  iframe {
    width: 280px;
    height: 157.5px; } }
.terminal {
  width: 100%;
  background-color: #fff;
  border: 1px solid #F1F3F5;
  border-radius: 2px; }
  .terminal .t-header {
    height: 24px;
    background-color: #F1F3F5;
    display: flex;
    align-items: center;
    padding: 0 10px; }
    .terminal .t-header .nav {
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .terminal .t-header .t-title {
      margin: 0;
      font-weight: 400;
      text-align: center;
      padding-left: 100px; }
    .terminal .t-header .dot {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 6px; }
    .terminal .t-header .d-red {
      background-color: #FA3267; }
    .terminal .t-header .d-yellow {
      background-color: #FFD10D; }
    .terminal .t-header .d-green {
      background-color: #4AE14C; }
  .terminal .t-body {
    padding: 14px 20px 100px 20px;
    font-family: monaco;
    font-size: 11px; }
    .terminal .t-body ol {
      list-style: decimal;
      color: #ccc;
      padding: 0;
      margin-left: 20px; }
    .terminal .t-body .code {
      color: #303E4B; }
    .terminal .t-body li {
      margin-bottom: 8px; }
    .terminal .t-body .var {
      color: #fa3267; }
    .terminal .t-body .fun {
      color: #00ffab; }

.footer {
  font-weight: 300; }
  .footer .copy {
    margin: 0;
    font-size: 10px; }

.toolbox {
  width: 100%;
  margin: 0 auto 20px auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 2px; }
  .toolbox .tb-header {
    display: flex;
    margin-bottom: 6px; }
    .toolbox .tb-header i {
      font-size: 13px;
      margin-right: 8px;
      color: rgba(0, 0, 0, 0.4); }
    .toolbox .tb-header h4 {
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.4); }
  .toolbox .tb-body p {
    margin: none;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.4); }

.info {
  border: 1px solid #ffbf42;
  background-color: rgba(255, 191, 66, 0.3); }

.error {
  border: 1px solid #ff426a;
  background-color: rgba(255, 66, 106, 0.3); }

.success {
  border: 1px solid #30eb86;
  background-color: rgba(48, 235, 134, 0.3); }

pre {
  width: 100%;
  margin: 0 auto 20px auto;
  border-radius: 2px;
  padding: 16px 22px; }