.pure-g, .row {
    text-rendering: optimizespeed;
    /*display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;*/
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.opera-only :-o-prefocus, .pure-g, .row {
}

.pure-u {
}

.col-1, .col-1-1, .col-1-2, .col-1-3, .col-1-4, .col-1-6, .col-1-12, .col-2-3, .col-2-12, .col-3-4, .col-3-12, .col-4-12, .col-5-6, .col-5-12, .col-6-12, .col-7-12, .col-8-12, .col-9-12, .col-10-12, .col-11-12, .col-12-12, .pure-u {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.col-1-12 {
    width: 8.3333%;
}

.col-1-6, .col-2-12 {
    width: 16.6667%;
}

.col-1-4, .col-3-12 {
    width: 25%;
}

.col-1-3, .col-4-12 {
    width: 33.3333%;
}

.col-5-12 {
    width: 41.6667%;
}

.col-1-2, .col-6-12 {
    width: 50%;
}

.col-7-12 {
    width: 58.3333%;
}

.col-2-3, .col-8-12 {
    width: 66.6667%;
}

.col-3-4, .col-9-12 {
    width: 75%;
}

.col-5-6, .col-10-12 {
    width: 83.3333%;
}

.col-11-12 {
    width: 91.6667%;
}

.col-1, .col-1-1, .col-12-12 {
    width: 100%;
}

@media screen and (min-width:35.5em) {
    .col-xs-1, .col-xs-1-1, .col-xs-1-2, .col-xs-1-3, .col-xs-1-4, .col-xs-1-6, .col-xs-1-12, .col-xs-2-3, .col-xs-2-12, .col-xs-3-4, .col-xs-3-12, .col-xs-4-12, .col-xs-5-6, .col-xs-5-12, .col-xs-6-12, .col-xs-7-12, .col-xs-8-12, .col-xs-9-12, .col-xs-10-12, .col-xs-11-12, .col-xs-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-xs-1-12 {
        width: 8.3333%;
    }

    .col-xs-1-6, .col-xs-2-12 {
        width: 16.6667%;
    }

    .col-xs-1-4, .col-xs-3-12 {
        width: 25%;
    }

    .col-xs-1-3, .col-xs-4-12 {
        width: 33.3333%;
    }

    .col-xs-5-12 {
        width: 41.6667%;
    }

    .col-xs-1-2, .col-xs-6-12 {
        width: 50%;
    }

    .col-xs-7-12 {
        width: 58.3333%;
    }

    .col-xs-2-3, .col-xs-8-12 {
        width: 66.6667%;
    }

    .col-xs-3-4, .col-xs-9-12 {
        width: 75%;
    }

    .col-xs-5-6, .col-xs-10-12 {
        width: 83.3333%;
    }

    .col-xs-11-12 {
        width: 91.6667%;
    }

    .col-xs-1, .col-xs-1-1, .col-xs-12-12 {
        width: 100%;
    }
}

@media screen and (min-width:60em) {
    .col-md-1, .col-md-1-1, .col-md-1-2, .col-md-1-3, .col-md-1-4, .col-md-1-6, .col-md-1-12, .col-md-2-3, .col-md-2-12, .col-md-3-4, .col-md-3-12, .col-md-4-12, .col-md-5-6, .col-md-5-12, .col-md-6-12, .col-md-7-12, .col-md-8-12, .col-md-9-12, .col-md-10-12, .col-md-11-12, .col-md-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-md-1-12 {
        width: 8.3333%;
    }

    .col-md-1-6, .col-md-2-12 {
        width: 16.6667%;
    }

    .col-md-1-4, .col-md-3-12 {
        width: 25%;
    }

    .col-md-1-3, .col-md-4-12 {
        width: 33.3333%;
    }

    .col-md-5-12 {
        width: 41.6667%;
    }

    .col-md-1-2, .col-md-6-12 {
        width: 50%;
    }

    .col-md-7-12 {
        width: 58.3333%;
    }

    .col-md-2-3, .col-md-8-12 {
        width: 66.6667%;
    }

    .col-md-3-4, .col-md-9-12 {
        width: 75%;
    }

    .col-md-5-6, .col-md-10-12 {
        width: 83.3333%;
    }

    .col-md-11-12 {
        width: 91.6667%;
    }

    .col-md-1, .col-md-1-1, .col-md-12-12 {
        width: 100%;
    }
}

@media screen and (min-width:80em) {
    .col-lg-1, .col-lg-1-1, .col-lg-1-2, .col-lg-1-3, .col-lg-1-4, .col-lg-1-6, .col-lg-1-12, .col-lg-2-3, .col-lg-2-12, .col-lg-3-4, .col-lg-3-12, .col-lg-4-12, .col-lg-5-6, .col-lg-5-12, .col-lg-6-12, .col-lg-7-12, .col-lg-8-12, .col-lg-9-12, .col-lg-10-12, .col-lg-11-12, .col-lg-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-lg-1-12 {
        width: 8.3333%;
    }

    .col-lg-1-6, .col-lg-2-12 {
        width: 16.6667%;
    }

    .col-lg-1-4, .col-lg-3-12 {
        width: 25%;
    }

    .col-lg-1-3, .col-lg-4-12 {
        width: 33.3333%;
    }

    .col-lg-5-12 {
        width: 41.6667%;
    }

    .col-lg-1-2, .col-lg-6-12 {
        width: 50%;
    }

    .col-lg-7-12 {
        width: 58.3333%;
    }

    .col-lg-2-3, .col-lg-8-12 {
        width: 66.6667%;
    }

    .col-lg-3-4, .col-lg-9-12 {
        width: 75%;
    }

    .col-lg-5-6, .col-lg-10-12 {
        width: 83.3333%;
    }

    .col-lg-11-12 {
        width: 91.6667%;
    }

    .col-lg-1, .col-lg-1-1, .col-lg-12-12 {
        width: 100%;
    }
}

.row {
    /* width: 100%;
    font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif*/
}
/*.container {
    width: auto;
    margin: auto;
    max-width: 1366px;
    width: 100%;
    padding: 0
}*/

@media screen and (min-width:35.5em) {
    .container {
        /*padding: 0 .625em*/
    }
}

[class*=col-] {
    /*padding: 0 .9375em*/
}

@media screen and (min-width:35.5em) {
    [class*=col-] {
        /*padding: 0 1.25em*/
    }
}

@media screen and (min-width:80em) {
    [class*=col-] {
        /*padding: 0 3.75em*/
    }
}

a, ol, p, span, table, ul {
    font-size: 1rem;
}

@media screen and (min-width:80em) {
    a, ol, p, span, table, ul {
        font-size: 1.125rem;
    }
}

.rg-promo {
    background: transparent url(content/css/img/promo-bg.jpg) no-repeat 0 0;
    background-size: cover;
    background-position: top;
}

    .rg-promo .col-1 {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .rg-promo .col-1:last-child {
            margin-top: 3.125em;
        }

    .rg-promo .default-theme .btn-lightbox, .rg-promo .default-theme .btn-nav {
        background: #e31212;
    }

        .rg-promo .default-theme .btn-lightbox:active, .rg-promo .default-theme .btn-lightbox:hover, .rg-promo .default-theme .btn-nav:active, .rg-promo .default-theme .btn-nav:hover {
            background: #7a0b0b;
        }

    .rg-promo .default-theme .slider-item .single-item .img-item {
        border-color: #e31212;
    }

    .rg-promo .default-theme .slider-item .single-item .ico {
        background: #fff;
    }

        .rg-promo .default-theme .slider-item .single-item .ico:before {
            color: #7a0b0b;
        }

    .rg-promo .default-theme .slider-item .single-item:active .img-item, .rg-promo .default-theme .slider-item .single-item:hover .img-item {
        border-color: #fff;
    }

@media screen and (min-width:35.5em) {
    .rg-promo .col-1:last-child {
        margin-top: 5em;
    }

    .rg-promo .lightbox-wrap {
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: 8px;
    }

    .rg-promo [data-lightbox-nav] {
        top: calc(100% + 7px);
    }
}

@media screen and (min-width:48em) {
    .rg-promo .col-1:first-child {
        padding-right: 0;
        padding-left: 1.875em;
    }

    .rg-promo .col-1:last-child {
        padding-left: 4em;
        margin-top: 0;
    }

    .rg-promo .default-theme .btn-close {
        right: -38px;
    }

    .rg-promo .lightbox-wrap {
        left: 33px;
        right: 32px;
        top: 8px;
        bottom: 8px;
    }

    .rg-promo [data-lightbox-nav] {
        top: 50%;
        left: -70px;
    }
}

@media screen and (min-width:60em) {
    .rg-promo .col-1:last-child {
        padding-left: 3.125em;
    }

    .rg-promo .slider {
        padding-right: 0;
    }

    .rg-promo .f-vert-align {
        padding-left: 2.5em;
    }

    .rg-promo .default-theme .slider-item .single-item {
        padding: .3125em;
    }

        .rg-promo .default-theme .slider-item .single-item .ico:before {
            top: 48px;
            left: 5%;
        }

        .rg-promo .default-theme .slider-item .single-item:active .ico, .rg-promo .default-theme .slider-item .single-item:hover .ico {
            -webkit-transform: translateY(-50px) translateX(-50px) rotate(45deg);
            -ms-transform: translateY(-50px) translateX(-50px) rotate(45deg);
            transform: translateY(-50px) translateX(-50px) rotate(45deg);
        }

    .rg-promo .default-theme .btn-close {
        right: -45px;
    }

    .rg-promo .lightbox-wrap {
        right: 6px;
        left: 33px;
        top: 8px;
        bottom: 8px;
    }

    .rg-promo [data-lightbox-nav] {
        left: -70px;
    }
}

@media screen and (min-width:80em) {
    .rg-promo .col-1:first-child {
        padding-right: 0;
        padding-left: 3.75em;
    }

    .rg-promo .col-1:last-child {
        padding-left: 3.125em;
    }

    .rg-promo .lightbox-wrap {
        right: 10px;
        left: 64px;
        top: 8px;
        bottom: 8px;
    }

    .rg-promo [data-lightbox-nav] {
        left: -71px;
    }
}

.browsers-sec {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3.125em 0;
}

    .browsers-sec:before {
        display: none;
    }

    .browsers-sec .row {
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .browsers-sec .col-1:first-child {
        background: #000;
        padding-bottom: 1.5em;
    }

    .browsers-sec .col-1:last-child {
        text-align: right;
        padding-top: 0;
        padding-bottom: 1.5em;
    }

@media screen and (min-width:35.5em) {
    .browsers-sec:before {
        display: block;
    }

    .browsers-sec .col-1:last-child h3 {
        text-align: right;
    }
}

@media screen and (min-width:60em) {
    .browsers-sec .row {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .browsers-sec .col-1:first-child {
        padding-bottom: 3.75em;
        background: none;
    }

    .browsers-sec .col-1:last-child {
        padding-top: 1.25em;
        padding-bottom: 0;
    }
}

.browsers-box, .grid-box {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media screen and (min-width:60em) {
    .browsers-box, .grid-box {
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.grid-sample {
    display: block;
    text-align: center;
    height: 4.375rem;
    width: 4.375rem;
    padding-top: 7.75rem;
    font-size: .875rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .grid-sample.grid1 {
        background: transparent url(content/css/img/1grid.svg) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .grid-sample.grid2 {
        background: transparent url(content/css/img/2grid.svg) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .grid-sample.grid3 {
        background: transparent url(content/css/img/3grid.svg) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .grid-sample.grid4 {
        background: transparent url(content/css/img/4grid.svg) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .grid-sample.grid5 {
        background: transparent url(content/css/img/5grid.svg) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

@media screen and (min-width:35.5em) {
    .grid-sample {
        height: 5.75rem;
        width: 5.75rem;
    }
}

@media screen and (min-width:80em) {
    .grid-sample {
        margin-top: 1.875rem;
    }
}

.browser-img {
    display: block;
    text-align: center;
    height: 3.75em;
    width: 3.75em;
    margin: 0 .625em;
}

    .browser-img.chrome {
        background: transparent url(content/css/img/chrome.png) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .browser-img.firefox {
        background: transparent url(content/css/img/firefox.png) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .browser-img.safari {
        background: transparent url(content/css/img/safari.png) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .browser-img.ie {
        background: transparent url(content/css/img/ie.png) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

    .browser-img.opera {
        background: transparent url(content/css/img/opera.png) no-repeat 0 0;
        background-size: contain;
        background-position: 50%;
    }

@media screen and (min-width:35.5em) {
    .browser-img {
        height: 4.375em;
        width: 4.375em;
        margin: 0 .625em 2.625em;
    }
}

.responsive .container {
    padding: 0;
}

.responsive:before {
    display: none;
}

.responsive .col-1:first-child {
    padding: 0 .9375em;
}

.responsive .col-1:last-child {
    background: #000;
    height: 7.5em;
    margin-top: 5em;
}

    .responsive .col-1:last-child img {
        position: relative;
        height: 13.75em;
        top: -35%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

.responsive pre code.html {
    max-height: 16.875em;
}

    .responsive pre code.html > .hljs-tag, .responsive pre code.html > .javascript {
        top: -1.25rem;
    }

@media screen and (min-width:35.5em) {
    .responsive .col-1:first-child {
        padding: 1.875em 1.875em 0;
    }

    .responsive .col-1:last-child {
        height: 12.5em;
    }

        .responsive .col-1:last-child img {
            height: 21.875em;
        }
}

@media screen and (min-width:60em) {
    .responsive:before {
        display: block;
    }

    .responsive .container {
        padding: 0 .625em;
    }

    .responsive .col-1:first-child {
        padding: 1.875em 1.25em 0;
    }

    .responsive .col-1:last-child {
        background: none;
        padding-right: 0;
        height: auto;
        margin-top: 0;
    }

        .responsive .col-1:last-child img {
            max-width: 100%;
            height: auto;
            top: 2.8125em;
            left: -1.75em;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
}

@media screen and (min-width:80em) {
    .responsive .col-1:first-child {
        padding: 1.875em 3.75em 0;
    }
}

.themes {
    padding: 8.75em 0 2.5em;
}

    .themes .row {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        position: relative;
    }

        .themes .row:after {
            content: "";
            -webkit-transform: rotate(15deg);
            -ms-transform: rotate(15deg);
            transform: rotate(15deg);
            height: 28.125em;
            width: 28.125em;
            background: transparent url(content/css/img/themes.svg) no-repeat 0 0;
            background-size: cover;
            position: absolute;
            top: -1.25em;
            right: -9.6875em;
            z-index: -1;
            opacity: .2;
        }

    .themes .col-1 {
        padding: 0 .625em;
    }

    .themes pre code.html {
        overflow: hidden;
        max-height: 12.1875em;
    }

        .themes pre code.html > .hljs-tag, .themes pre code.html > .javascript {
            top: -1.5rem;
        }

    .themes ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        padding: 0 0 .9375em;
        list-style-type: none;
    }

        .themes ul li {
            position: relative;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

            .themes ul li:before {
                content: "";
                height: .625rem;
                width: .625rem;
                display: inline-block;
                margin-right: .625rem;
                border-radius: 50%;
                position: relative;
                top: .5625rem;
            }

            .themes ul li:first-child:before {
                background: #e31212;
            }

            .themes ul li:nth-child(2):before {
                background: #222;
            }

            .themes ul li:nth-child(3):before {
                background: #d5d5d5;
            }

            .themes ul li:nth-child(4):before {
                background: #ff6000;
            }

            .themes ul li:nth-child(5):before {
                background: red;
            }

            .themes ul li:nth-child(6):before {
                background: #138700;
            }

            .themes ul li:nth-child(7):before {
                background: #4996d1;
            }

            .themes ul li:last-child:before {
                background: #775b88;
            }

@media screen and (max-width:47.9375em) {
    .themes .col-xs-2-3 {
        width: 100%;
    }
}

@media screen and (min-width:60em) {
    .themes .row:after {
        opacity: 1;
    }
}

@media screen and (min-width:60em) {
    .themes .row {
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

        .themes .row:after {
            height: 28.125em;
            width: 28.125em;
            top: -1.25em;
            left: -9.6875em;
            right: auto;
        }
}

@media screen and (min-width:80em) {
    .themes .row:after {
        height: 21.875em;
        width: 21.875em;
        top: -2.5em;
        left: -2.8125em;
    }

    .themes .col-1:first-child {
        padding: 0 3.4375em 0 2.1875em;
    }

    .themes .col-1:last-child {
        padding: 0 .625em;
    }
}

.sec-used {
    min-height: 0;
}

    .sec-used .container > .center {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1.25em 0 3.125em;
    }

    .sec-used h2 {
        margin: 1.6875rem 0 0;
        font-size: 1.125rem;
    }

    .sec-used img {
        max-width: 7.5em;
    }

    .sec-used > .center {
        background: #3498db;
        transition: background .15s linear;
    }

        .sec-used > .center a {
            color: #fff;
            font-size: 1.25rem;
            font-weight: 700;
            display: inline-block;
            padding: 1.875rem;
        }

        .sec-used > .center:active, .sec-used > .center:hover {
            background: #217dbb;
        }

@media screen and (min-width:27.5em) {
    .sec-used h2 {
        font-size: 1.625rem;
    }
}

@media screen and (min-width:35.5em) {
    .sec-used .container > .center {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .sec-used h2 {
        margin: 1.6875rem 8.125rem 0 0;
    }

    .sec-used img {
        max-width: 11.25em;
    }
}

.sec-examples .slider-container {
    padding: 0 0 1.75em;
}

    .sec-examples .slider-container h3 {
        padding-left: .5rem;
        font-weight: 700;
    }

    .sec-examples .slider-container .slider {
        padding: 0;
    }

        .sec-examples .slider-container .slider .single-item {
            padding: 4px;
        }

            .sec-examples .slider-container .slider .single-item .img-item {
                top: 4px;
                left: 4px;
                right: 4px;
                bottom: 4px;
            }

        .sec-examples .slider-container .slider .lightbox-wrap {
            top: 4px;
            left: 4px;
            right: 3px;
            bottom: 4px;
        }

    .sec-examples .slider-container #slider8 ~ pre code.html {
        max-height: 21.875em;
    }

    .sec-examples .slider-container [data-slider-nav] {
        top: calc(100% + 5px);
    }

    .sec-examples .slider-container pre {
        margin-top: 4.6875em;
    }

@media screen and (min-width:48em) {
    .sec-examples .slider-container {
        padding: 0 3.125em 1.75em;
    }

        .sec-examples .slider-container [data-slider-nav] {
            top: 50%;
            left: -68px;
        }

        .sec-examples .slider-container pre {
            margin-top: 2.1875em;
        }
}

@media screen and (min-width:60em) {
    .sec-examples .slider-container {
        padding: 0 1.875em 1.75em;
    }
}

@media screen and (min-width:80em) {
    .sec-examples .slider-container {
        padding: 0 0 1.75em;
    }
}

.sec-settings article h3 {
    margin: 2.25rem 0 2.125rem;
}

.sec-settings article:first-of-type h3 {
    text-align: center;
}

.sec-settings pre {
    padding: 0;
}

.sec-settings code.html {
    min-height: 25.375rem;
}

    .sec-settings code.html > .hljs-tag, .sec-settings code.html > .javascript {
        top: 0;
    }

.sec-settings > .container:before {
    top: 65%;
}

@media screen and (min-width:48em) {
    .sec-settings code.html {
        min-height: 28.5rem;
    }
}

@media screen and (min-width:80em) {
    .sec-settings article h3 {
        margin: 5rem 0 2.125rem;
    }
}

.red-box {
    background: #e31212;
    color: #fff;
    padding: .75em 1.5625em 0;
    line-height: 2.25rem;
}

    .red-box > .red-box {
        background: #b40e0e;
    }

        .red-box > .red-box > .red-box {
            background: #840b0b;
        }

    .red-box p {
        margin: 0;
    }

    .red-box .fh {
        font-family: Neuropolitical, Verdana, Arial, sans-serif;
        font-size: .875rem;
        margin-left: 0;
    }

    .red-box small {
        display: block;
    }

    .red-box span {
        margin-left: 1.25rem;
        display: block;
        font-size: .875rem;
    }

@media screen and (min-width:35.5em) {
    .red-box {
        padding: 1em 2.8125em .375em;
        line-height: 2.8125rem;
    }

        .red-box .fh {
            font-size: 1.25rem;
        }
}