html {
    min-height: 100%;
    position: relative;
}

body, html {
    margin: 0;
    padding: 0;
}

button {
    border: none;
}

html {
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

@media (max-width:767px) {
    html {
        font-size: 8.5px;
    }
}

@media (min-width:768px) {
    html {
        font-size: 9px;
    }
}

@media (min-width:992px) {
    html {
        font-size: 9.5px;
    }
}

@media (min-width:1200px) {
    html {
        font-size: 10px;
    }
}

.light {
    font-family: Segoe UI Light, Segoe WP Light,Segoe UI, Segoe, Segoe WP,HelveticaNeue-Thin,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,sans-serif;
}

.semilight {
    font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Segoe, Segoe WP,Arial,sans-serif;
}

.normal, .regular {
    font-family: Segoe UI, Segoe, Segoe WP,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,sans-serif;
}

.semibold {
    font-family: Segoe UI Semibold,Segoe Semibold,Segoe WP Semibold,Segoe UI, Segoe, Segoe WP,Helvetica Neue,Helvetica,Arial,sans-serif;
}

.bold, b {
    font-weight: bolder;
}

body {
    font-family: Segoe UI, Segoe, Segoe WP,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #444;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Segoe, Segoe WP,HelveticaNeue-Thin,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,sans-serif;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (min-width:768px) {
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.2rem;
    }
}

a {
    color: #0072be;
    text-decoration: none;
}

    a:focus, a:hover {
        text-decoration: underline;
    }

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
    }
}

textarea {
    resize: none;
    overflow-y: scroll;
}

.visible {
    visibility: 'visible';
}

.body-content {
    padding-top: 25px;
    padding-bottom: 40px;
}

body {
    margin-bottom: 135px;
}

ul.video-list {
    counter-reset: a;
    list-style: none;
    padding-left: 0;
    position: relative;
}

ul.video-list .video:not(:last-of-type) a {
border-bottom: 2px solid #e6e6e6;
}

ul.video-list a {
position: relative;
padding: 2rem 2rem 2rem 4.2rem;
display: block;
box-sizing: border-box;
}

ul.video-list a .info {
    padding-top: .25rem;
}

    ul.video-list a .info:before {
        counter-increment: a;
        content: counter(a);
        position: absolute;
        left: 1.5rem;
        color: #000;
    }

    ul.video-list a .info > p, ul.video-list a .info > span {
        color: #000;
    }

    ul.video-list a .info .title {
        margin-top: 0;
        margin-bottom: .7rem;
    }

    ul.video-list a .info .description {
        margin-bottom: 0;
        font-size: 1.4rem;
    }

    ul.video-list a .info .duration, ul.video-list a .info .duration span {
        color: gray;
        font-size: 1.2rem;
    }

ul.video-list a:focus, ul.video-list a:hover {
    text-decoration: none;
}

ul.video-list a:hover {
    background: #f2f2f2;
}

    ul.video-list a:hover:after {
        content: "";
        display: block;
        width: 6rem;
        height: 6rem;
        position: absolute;
        background: url(../svg/play.svg);
        background-size: 6rem;
        top: 3rem;
        left: 8.6rem;
    }

ul.video-list .thumb {
max-height: 8.2rem;
padding-right: 2rem;
position: relative;
float: left;
}

@media (max-width:480px) {
    ul.video-list .thumb {
        float: none;
    }
}



.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    background: #f0f0f0;
    -webkit-text-size-adjust: none;
}


#docs-subnavbar > div:first-child.connect-widget {
    margin-top: 0;
}

.docs .body {
    line-height: 1.6;
}

.docs iframe, .docs video {
    width: 100%;
    max-width: 100%;
}

.docs iframe {
    height: 400px;
}

.docs h1 {
    margin-bottom: 15px;
}

.docs h2 {
    margin-bottom: 10px;
}

.docs .body h4, .docs h2 {
    margin-top: 30px;
}

.docs img {
    max-width: 100%;
    display: block;
}


#docs-navbar.affix, #docs-subnavbar.affix {
    position: static;
    top: 0;
}

#docs-navbar.affix-bottom, #docs-subnavbar.affix-bottom {
    position: relative;
}

#docs-navbar {
    padding: 15px 0;
    display: none;
}

#docs-subnavbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

    #docs-subnavbar h4, .docs-nav h4 {
        margin-top: 0;
    }

#docs-navbar h4 {
    padding-left: 15px;
}

#docs-navbar > .nav a, #docs-subnavbar h4 {
    padding-left: 10px;
}

#docs-navbar ul {
    list-style: none;
    padding: 0;
}

#docs-navbar .nav li a {
    border-left: 1px solid #ccc;
    display: block;
}

    #docs-navbar .nav li a:hover {
        background: none;
        color: #444;
        text-decoration: none !important;
        border-color: #a39fd6;
    }

    #docs-navbar .nav li a:focus {
        background: none;
    }

#docs-navbar .nav > li > a {
    padding: 8px 15px;
    font-size: 14px;
}

#docs-navbar .nav > li li > a {
    padding: 5px 25px;
    position: relative;
}

#docs-navbar .nav .docs-home {
    padding-bottom: 16px;
}

#docs-navbar .nav > li > .area {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

#docs-navbar .nav .panel {
    margin-bottom: inherit;
    background-color: inherit;
    border: inherit;
    border-radius: inherit;
    box-shadow: inherit;
}

    #docs-navbar .nav .panel > a {
        margin-right: 40px;
    }

    #docs-navbar .nav .panel.expanded a {
        border-color: rgb(0, 160, 227);
    }

    #docs-navbar .nav .panel.expanded > a:hover {
        background: url(../svg/expand-up.svg) 110px 5px no-repeat;
        background-size: 24px;
    }

    #docs-navbar .nav .panel.collapsed > a:hover {
        background: url(../svg/expand-down.svg) 110px 5px no-repeat;
        background-size: 24px;
    }

#docs-navbar .nav .collapsing {
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
}

#docs-navbar .nav li a, #docs-subnavbar .nav li a {
    color: #707070;
}

    #docs-navbar .nav li a:focus, #docs-subnavbar .nav li a:focus {
        background-color: transparent;
    }

#docs-subnavbar .nav li a {
    padding: 5px 10px;
}

    #docs-subnavbar .nav li a:before {
        content: "|";
        color: #bbb;
        position: absolute;
        font-size: 16px;
        top: 1px;
        left: 0;
        display: none;
    }

    #docs-subnavbar .nav li a:hover {
        background: none;
        color: #444;
    }

        #docs-subnavbar .nav li a:hover:before {
            font-weight: 700;
            display: block;
        }

#docs-navbar > .nav > .active .active > a, #docs-navbar > .nav > .active > a {
    color: rgb(0, 160, 227) !important;
}

    #docs-navbar > .nav > .active .active > a, #docs-navbar > .nav > .active > a:not(.area) {
        font-weight: 700;
    }

#docs-navbar > .nav .active .active a:before {
    content: ">";
    position: absolute;
    height: 0px;
    width: 0px;
    background-color: rgb(0, 160, 227);
    top: 4px;
    left: 10px;
}

#docs-subnavbar .nav > .active > a {
    color: #0072be;
    font-weight: 700;
}

    #docs-subnavbar .nav > .active > a:before {
        color: #0072be;
        display: block;
    }

#docs-subnavbar .nav > .active > .nav > .active > a {
    color: #b4a0ff;
}

#small-nav {
    padding: 5px 0;
}

    #small-nav > * {
        display: inline-block;
    }

    #small-nav > select {
        margin-left: 12px;
    }

    #small-nav #small-nav-dropdown {
        margin-right: 15px;
    }

    #small-nav .social-buttons {
        vertical-align: text-top;
        display: inline-block;
    }

        #small-nav .social-buttons .fb-like {
            margin-left: 10px;
            display: inline-block;
            vertical-align: top;
        }

#docs-subnavbar .fb-like, #docs-subnavbar .twitter-share-button {
    margin-top: 15px;
    margin-left: 10px;
    width: 50%;
}

#docs-subnavbar .fb-like {
    display: block;
}

.docs .section {
    padding: 5px 15px;
    background-color: #f3f3f3;
    height: 160px;
    margin-bottom: 25px;
}

    .docs .section h3 {
        color: rgb(0, 160, 227);
        font-weight: 700;
    }


@media (min-width:600px) {
    

    .docs .video .screen {
        height: 250px;
    }
}

@media (min-width:768px) {
    #docs-navbar, #docs-subnavbar {
        font-size: 12px;
        width: 175px;
        margin-left: -15px;
    }

    .docs {
        font-size: 16px;
    }

}

@media (min-width:768px) and (max-width:992px) {
    #docs-navbar.affix {
        position: static;
        top: 0;
    }

    #docs-subnavbar.affix {
        position: fixed;
        top: 20px;
    }
}

@media (min-width:992px) {
    #docs-navbar.affix, #docs-subnavbar.affix {
        position: fixed;
        top: 20px;
    }

    .docs h1, .edit-github a .btn {
        margin-top: 0;
    }

    .docs .hero-videos, .docs .next-level {
        text-align: center;
    }
}

@media (min-width:1200px) {
    .docs .section {
        height: 225px;
    }
}

 


/*

Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #F0F0F0;
}

/*
Highlight js - theme.
*/

.hljs,
.hljs-subst {
  color: #444;
}

.hljs-comment {
  color: #888888;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
  font-weight: bold;
}


/* User color: hue: 0 */

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #880000;
}

.hljs-title,
.hljs-section {
  color: #880000;
  font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #BC6060;
}


/* Language color: hue: 90; */

.hljs-literal {
  color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #397300;
}


/* Meta color: hue: 200 */

.hljs-meta {
  color: #1f7199;
}

.hljs-meta-string {
  color: #4d99bf;
}


/* Misc effects */

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    background: #f0f0f0;
    -webkit-text-size-adjust: none;
}

.hljs, .hljs-subst, .hljs-tag .hljs-title, .nginx .hljs-title {
    color: #000;
}

.apache .hljs-cbracket, .apache .hljs-tag, .asciidoc .hljs-header, .bash .hljs-variable, .coffeescript .hljs-attribute, .django .hljs-variable, .erlang_repl .hljs-function_or_atom, .haml .hljs-symbol, .hljs-addition, .hljs-constant, .hljs-flow, .hljs-name, .hljs-parent, .hljs-pragma, .hljs-preprocessor, .hljs-rule .hljs-value, .hljs-stream, .hljs-string, .hljs-tag .hljs-value, .hljs-template_tag, .hljs-title, .markdown .hljs-header, .pf .hljs-variable, .ruby .hljs-symbol, .ruby .hljs-symbol .hljs-string, .smalltalk .hljs-class, .tex .hljs-command, .tex .hljs-special {
    color: #800;
}

.asciidoc .hljs-blockquote, .diff .hljs-header, .hljs-annotation, .hljs-chunk, .hljs-comment, .markdown .hljs-blockquote, .smartquote {
    color: green;
}

.asciidoc .hljs-bullet, .asciidoc .hljs-link_url, .go .hljs-constant, .hljs-change, .hljs-date, .hljs-hexcolor, .hljs-number, .hljs-regexp, .lasso .hljs-variable, .makefile .hljs-variable, .markdown .hljs-bullet, .markdown .hljs-link_url, .smalltalk .hljs-char, .smalltalk .hljs-symbol {
    color: #008200;
}

.apache .hljs-sqbracket, .apache .hljs-tag, .asciidoc .hljs-attribute, .asciidoc .hljs-link_label, .asciidoc .hljs-strong, .bash .hljs-variable, .clojure .hljs-attribute, .coffeescript .hljs-property, .css .hljs-tag, .erlang_repl .hljs-reserved, .haml .hljs-bullet, .hljs-array, .hljs-attr_selector, .hljs-built_in, .hljs-dartdoc, .hljs-decorator, .hljs-deletion, .hljs-doctype, .hljs-envvar, .hljs-filter .hljs-argument, .hljs-id, .hljs-important, .hljs-javadoc, .hljs-javadoctag, .hljs-keyword, .hljs-label, .hljs-literal, .hljs-localvars, .hljs-phony, .hljs-phpdoc, .hljs-pi, .hljs-prompt, .hljs-pseudo, .hljs-request, .hljs-shebang, .hljs-status, .hljs-title, .hljs-type, .hljs-typename, .hljs-winutils, .hljs-yardoctag, .lasso .hljs-attribute, .markdown .hljs-link_label, .markdown .hljs-strong, .nginx .hljs-built_in, .pf .hljs-variable, .ruby .hljs-string, .smalltalk .hljs-class, .tex .hljs-command, .tex .hljs-formula, .vhdl .hljs-attribute {
    color: #00f;
}

.asciidoc .hljs-emphasis, .markdown .hljs-emphasis {
    font-style: italic;
}

.nginx .hljs-built_in {
    font-weight: 400;
}

.coffeescript .javascript, .javascript .xml, .lasso .markup, .tex .hljs-formula, .xml .css, .xml .hljs-cdata, .xml .javascript, .xml .vbscript {
    opacity: .5;
}

.json .hljs-attribute {
    color: #0451a5;
}

.json .hljs-string {
    color: #a31515;
}