/* Breakspoint */
/* Grids */
/* Fonts */
/* Colors */
/* Lighten and darken % */
/* Transition */
/* Border */
/* Define on colors system */
/* Forms */
/* Button */
/* Input */
/* Checkbox Radio */
/* header */
body {
  overflow-y: auto; }

code::-webkit-scrollbar {
  width: 7px;
  height: 7px; }

code::-webkit-scrollbar-track {
  border: solid 2px white;
  background: #e0e0e0; }

code::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: solid 2px white;
  background-color: #404040; }

.frame-header a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px 16px;
  border-bottom: solid 2px #477eeb; }
  .frame-header a i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.5em;
    width: auto;
    height: 100%;
    text-align: center; }
  .frame-header a:before {
    content: '';
    position: absolute;
    width: 0;
    max-width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: white;
    -webkit-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s; }
  .frame-header a:hover:before {
    width: 100%; }
  .frame-header a.fixed {
    position: fixed;
    top: 0;
    left: 0; }

.frame-header .logo {
  width: 35px;
  height: 35px;
  background: url("../../img/miniLogo.svg");
  background-repeat: no-repeat;
  background-position: center left; }

.demo-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  padding: 8px;
  background: white;
  -webkit-box-shadow: 0 0 0 0px white;
  box-shadow: 0 0 0 0px white;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }
  .demo-block:hover {
    -webkit-box-shadow: 0 0 0 2px white;
    box-shadow: 0 0 0 2px white; }
  .demo-block.dotted {
    color: white;
    border: dotted 2px white;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent; }
    .demo-block.dotted:hover {
      -webkit-box-shadow: none;
      box-shadow: none;
      border: dotted 2px transparent; }
  .demo-block.dotted:empty {
    padding: 8px 0 8px 0; }
  .demo-block .dotted {
    border: dotted 1px #262626;
    border-radius: 8px;
    background: white;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    .demo-block .dotted:hover {
      -webkit-box-shadow: none;
      box-shadow: none;
      border: dotted 1px transparent; }
  .demo-block.lined-l-r {
    padding: 0;
    color: white;
    border-radius: 0 !important;
    -webkit-box-shadow: 1px 0px 0 0px white, -1px 0px 0 0px white;
    box-shadow: 1px 0px 0 0px white, -1px 0px 0 0px white;
    background: transparent; }
    .demo-block.lined-l-r:hover {
      -webkit-box-shadow: none;
      box-shadow: none; }
  .demo-block.lined-t-b {
    padding: 0;
    color: white;
    border-radius: 0 !important;
    -webkit-box-shadow: 0px 1px 0 0px white, 0px -1px 0 0px white;
    box-shadow: 0px 1px 0 0px white, 0px -1px 0 0px white;
    background: transparent; }
    .demo-block.lined-t-b:hover {
      -webkit-box-shadow: none;
      box-shadow: none; }
  .demo-block.circle {
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 8px;
    border-radius: 100%;
    border: solid 2px transparent; }
    .demo-block.circle[class*="white"]:not([class*="c-d-"]):not([class*="d-d-"]) {
      background: #262626; }
  .demo-block.shadow {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .demo-block a {
    padding: 4px 8px;
    color: #262626;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    .demo-block a.active {
      color: #5adc18; }
    .demo-block a:hover {
      color: #7eeb47; }
  .demo-block .colorpicked {
    font-weight: 700; }

.lined {
  color: white;
  border-radius: 0 !important;
  -webkit-box-shadow: 1px 0px 0 0px white, -1px 0px 0 0px white, 0px 1px 0 0px white, 0px -1px 0 0px white;
  box-shadow: 1px 0px 0 0px white, -1px 0px 0 0px white, 0px 1px 0 0px white, 0px -1px 0 0px white;
  background: transparent;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }
  .lined.radius {
    border-radius: 4px !important; }
  .lined:hover {
    -webkit-box-shadow: none;
    box-shadow: none; }

/* CSS Simple Pre Code */
pre.code {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 16px 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 0 #e0e0e0;
  box-shadow: 0 4px 0 #e0e0e0;
  background: whitesmoke; }

pre.code label {
  font-weight: normal;
  font-size: 13px;
  color: #444;
  position: absolute;
  left: 1px;
  top: 16px;
  text-align: center;
  width: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; }

pre.code code {
  position: relative;
  overflow-x: auto !important;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  width: 100%;
  max-height: 500px;
  margin: 0 0 0 60px;
  padding: 0 16px;
  color: #262626;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  line-height: 19px;
  border-left: 1px solid #d9d9d9; }

pre.code {
  font-family: 'Roboto Mono', sans-serif; }
  pre.code * {
    font-family: 'Roboto Mono', sans-serif !important; }

/*
pre::after {
content: "double click to selection";
padding: 0;
width: auto;
height: auto;
position: absolute;
right: 18px;
top: 14px;
font-size: 12px;
color: #aaa;
line-height: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}

pre:hover::after {
opacity: 0;
visibility: visible;
}*/
pre.code-css code {
  color: #47eb7e; }

pre.code-html code {
  color: #477eeb; }

pre.code-javascript code {
  color: #eb7e47; }

pre.code-jquery code {
  color: #eb7e47; }

.b-blue-to-cyan {
  background: -webkit-gradient(linear, left top, left bottom, from(#477eeb), to(#47ebeb));
  background: -webkit-linear-gradient(top, #477eeb 0%, #47ebeb 100%);
  background: -o-linear-gradient(top, #477eeb 0%, #47ebeb 100%);
  background: linear-gradient(to bottom, #477eeb 0%, #47ebeb 100%); }

.b-cyan-to-teal {
  background: -webkit-gradient(linear, left top, left bottom, from(#47ebeb), to(#47ebb4));
  background: -webkit-linear-gradient(top, #47ebeb 0%, #47ebb4 100%);
  background: -o-linear-gradient(top, #47ebeb 0%, #47ebb4 100%);
  background: linear-gradient(to bottom, #47ebeb 0%, #47ebb4 100%); }

.b-teal-to-green {
  background: -webkit-gradient(linear, left top, left bottom, from(#47ebb4), to(#47eb7e));
  background: -webkit-linear-gradient(top, #47ebb4 0%, #47eb7e 100%);
  background: -o-linear-gradient(top, #47ebb4 0%, #47eb7e 100%);
  background: linear-gradient(to bottom, #47ebb4 0%, #47eb7e 100%); }

.b-green-to-lime {
  background: -webkit-gradient(linear, left top, left bottom, from(#47eb7e), to(#7eeb47));
  background: -webkit-linear-gradient(top, #47eb7e 0%, #7eeb47 100%);
  background: -o-linear-gradient(top, #47eb7e 0%, #7eeb47 100%);
  background: linear-gradient(to bottom, #47eb7e 0%, #7eeb47 100%); }

.b-lime-to-yellow {
  background: -webkit-gradient(linear, left top, left bottom, from(#7eeb47), to(#ebeb47));
  background: -webkit-linear-gradient(top, #7eeb47 0%, #ebeb47 100%);
  background: -o-linear-gradient(top, #7eeb47 0%, #ebeb47 100%);
  background: linear-gradient(to bottom, #7eeb47 0%, #ebeb47 100%); }

.btn {
  border-radius: 50px; }

.hero {
  font-size: 125%; }
  .hero .big-logo {
    display: grid;
    grid-template-columns: repeat(12, 10px);
    grid-template-rows: repeat(12, 10px); }
    .hero .big-logo div {
      border-radius: 4px;
      -webkit-box-shadow: 0 0 0 0px white;
      box-shadow: 0 0 0 0px white;
      -webkit-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out; }
      .hero .big-logo div:hover {
        -webkit-box-shadow: 0 0 0 2px white;
        box-shadow: 0 0 0 2px white; }
      .hero .big-logo div[class*="col-"] {
        padding: 0 !important; }