/* ==========================================================================
 * Common Styles
 * ========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300&subset=latin,cyrillic,cyrillic-ext);

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?plcefb');
    src:  url('fonts/icomoon.eot?plcefb#iefix') format('embedded-opentype'),
                 url('fonts/icomoon.ttf?plcefb') format('truetype'),
                 url('fonts/icomoon.woff?plcefb') format('woff'),
                 url('fonts/icomoon.svg?plcefb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-telegram:before {
    content: "\e908";
}
.icon-black-envelope:before {
    content: "\e905";
}
.icon-social_slack:before {
    content: "\e902";
}
.icon-ok:before {
    content: "\e800";
}
.icon-menu:before {
    content: "\e907";
}
.icon-cross:before {
    content: "\e906";
}
.icon-mark-github:before {
    content: "\e904";
}
.icon-twitter:before {
    content: "\e903";
}
.icon-angle-right:before {
    content: "\e901";
}
.icon-angle-left:before {
    content: "\e900";
}



* {
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

html, body {
    height:           100%;
    font:             100% normal, "Roboto", sans-serif;
    font-weight:      400;
    background-color: #fff;
    line-height:      1.4;
    font-size:        15px;
}

a,
a:hover,
a:link,
a:active,
a:visited {
    text-decoration: none;
    outline:         none;
}

img {
    max-width: 100%;
}

hr {
    margin:           0;
    border:           none;
    height:           2px;
    /* Set the hr color */
    color:            #ddd; /* old IE */
    background-color: #ddd; /* Modern Browsers */
}

.layout.overlay-open .page {
    opacity:            1;
    -webkit-transform:  scale3d(0.85, 0.85, 1);
    -moz-transform:     scale3d(0.85, 0.85, 1);
    -o-transform:       scale3d(0.85, 0.85, 1);
    -ms-transform:      scale3d(0.85, 0.85, 1);
    transform:          scale3d(0.85, 0.85, 1);
    -webkit-transition: all 600ms ease-out;
    -moz-transition:    all 600ms ease-out;
    -o-transition:      all 600ms ease-out;
    transition:         all 600ms ease-out
}

.layout.overlay-open.contact .overlay.overlay-screen-contact {
    opacity: 1;
    z-index: 9
}

.layout.overlay-open.slack .overlay.overlay-screen-slack {
    opacity: 1;
    z-index: 9
}

.page {
    position:                   absolute;
    top:                        0;
    right:                      0;
    bottom:                     0;
    left:                       0;
    width:                      auto;
    height:                     auto;
    -webkit-transform:          scale3d(1, 1, 1);
    -moz-transform:             scale3d(1, 1, 1);
    -o-transform:               scale3d(1, 1, 1);
    -ms-transform:              scale3d(1, 1, 1);
    transform:                  scale3d(1, 1, 1);
    -webkit-transition:         all 300ms ease-out;
    -moz-transition:            all 300ms ease-out;
    -o-transition:              all 300ms ease-out;
    transition:                 all 300ms ease-out;
    background:                 #fff;
    z-index:                    1;
    overflow-y:                 auto;
    overflow-x:                 hidden;
    -webkit-overflow-scrolling: touch
}

/* Common Styles - Header
 * -------------------------------------------------------------------------- */
header {
    height:     74px;
    color:      #888;
    font-size:  15px;
    text-align: right;
}

header .container {
    position: relative;
}

header .navbar-header img {
    height: 60px;
    margin-top: -3px;
}

header .orm-text {
    color: #000;
    left: 130px;
    top: 0px;
    position: absolute;
    font-size: 20px;
}

header .icon-menu {
    top: -3px;
    position: absolute;
}

header ul.menu {
    padding:  0 15px;
    position: absolute;
    right:    0;
}

header nav.navbar {
    height:      74px;
    line-height: 74px;
}

header nav.navbar .navbar-header a {
    text-align: left;
}

header nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

header nav li {
    height:           74px;
    text-align:       center;
    line-height:      69px;
    display:          inline-block;
    padding:          0 30px;
    background-color: #fff;
}

header nav ul .active {
    /*border-bottom: 5px solid #1384df;*/
}

header nav ul a,
header nav ul a:visited {
    color: #888;
}

header nav ul .active a,
header nav ul a:hover {
    color: #000;
}

header nav ul li a:hover {
    transition: none;
    border-bottom: 5px solid #1384df;
}

/* Common Styles - Footer
 * -------------------------------------------------------------------------- */
footer {
    height:      160px;
    line-height: 160px;
}

footer .copyright {
    font-size:  13px;
    text-align: left;
}

footer .copyright,
footer .social {
    clear: left;
    float: right;
}

footer .social {
    list-style: none;
    margin:     0;
    padding:    0 15px;
    text-align: right;
}

footer .social li {
    display:        inline-block;
    margin:         0;
    height:         160px;
    vertical-align: top;
}

footer .social li span {
    color:          #1384df;
    vertical-align: middle;
    display:        inline-block;
    position:       relative;
}

footer .social li span:hover {
    color: #0266b6;
}

footer .social li span:before {
    width:       32px;
    height:      32px;
    line-height: 32px;
    display:     block;
    position:    absolute;
    top:         -16px;
}

footer .social li.github span:before {
    font-size: 32px;
    right:     180px;
}

footer .social li.twitter span:before {
    font-size: 38px;
    right:     121px;
}

footer .social li.slack span:before {
    font-size: 32px;
    right:     60px;
}

footer .social li.email span:before {
    font-size: 32px;
    right:     0;
}

/* ==========================================================================
 * Docs Page
 * ========================================================================== */

/* Docs Page - Top Container
 * -------------------------------------------------------------------------- */
.top-container {
    background-color: #d6ebff;
    height:           480px;
    padding:          0;
}

.top-container .container {
    background: url(img/top-img.png) no-repeat right 100px center;
    height:     480px;
}

.top-container .container .h1 {
    font-weight: 300;
    font-size:   53px;
    line-height: 70px;
    margin-top:  35px;
    color:       #000;
    margin-bottom: 0;
}

.top-container .container .text {
    margin-top:       30px;
    line-height: 24px;
    font-size: 22px;
}

.top-container .container .try-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            190px;
    height:           52px;
    margin-top:       30px;
    padding: 20px;
    /*display: block;*/
    text-align: center;
    line-height: 52px;
    font-size: 18px;
}

.top-container .container .support-button {
    outline:          none;
    background-color: #FFFF00;
    color:            #000;
    border:           none;
    border-radius:    52px;
    width:            190px;
    height:           52px;
    margin-top:       30px;
    padding: 20px;
    /*display: block;*/
    text-align: center;
    line-height: 52px;
    margin-left: 20px;
    font-size: 18px;
}


.top-container .container .try-button:hover {
    background-color: #0266b6;
}

.top-container .container .row div div:last-child {
    margin-top:  30px;
    line-height: 24px;
}

/* Docs Page - Social Container
 * -------------------------------------------------------------------------- */
.social-container {
    height:      80px;
    line-height: 80px;
}

.social-container ul {
    list-style:    none;
    margin-bottom: 0;
    padding:       0;
}

.social-container li {
    display: inline-block;
}

.social-container li span {
    color:        #1384df;
    position:     relative;
    padding-left: 50px;
}

.social-container li.twitter span {
    padding-left: 52px;
}

.social-container li.slack span {
    padding-left: 51px;
}

.social-container li.email span {
    padding-left: 51px;
}

.social-container li span:hover {
    color: #0266b6;
}

.social-container li span:before {
    position: absolute;
    left:     0;
    width:    32px;
    height:   32px;
}

.social-container li.github span:before {
    font-size: 32px;
    top:       -5px;
}

.social-container li.twitter span:before {
    font-size: 38px;
    top:       -8px;
}

.social-container li.slack span:before {
    font-size: 32px;
    top:       -5px;
}

.social-container li.email span:before {
    font-size: 32px;
    top:       -5px;
}

/* Docs Page - Example Container
 * -------------------------------------------------------------------------- */
.example-container {
    padding-top: 70px;
}

.example-container hr {
    margin-top: 70px;
}

.example-container .left-block .h2 {
    font-size:     36px;
    line-height:   50px;
    font-weight:   300;
    margin-top:    0;
    margin-bottom: 40px;
    color:         #000;
}

.example-container .left-block .text {
    color:       #888;
    font-size:   17px;
    line-height: 30px;
}

.example-container .left-block .learn-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            140px;
    height:           52px;
    margin-top:       46px;
    text-align: center;
    line-height: 52px;
    display: block;
}

.example-container .left-block .learn-button:hover {
    background-color: #0266b6;
}

.example-container .right-block .wrapper {
    background-color: #d6ebff;
    padding:          20px;
}

.example-container .right-block .code {
    font-size:        16px;
    background-color: #fff;
    padding:          18px;
    margin:           0;
    line-height:      25px;
}

.example-container .right-block .code.first {
    margin: 20px 0;
    font-size: 18px;
}

.example-container .right-block .nav {
    list-style: none;
    margin:     0;
    padding:    0;
}

.example-container .right-block .nav li {
    height:        65px;
    line-height:   60px;
    text-align:    center;
    display:       inline-block;
    padding:       0 30px;
    border-bottom: 5px solid transparent;
}

.example-container .right-block .nav a {
    color: #888;
}

.example-container .right-block .nav a:hover {
    color: #000;
}

.example-container .right-block .nav .active {
    border-bottom-color: #1384df;
}

.example-container .right-block .nav .active a {
    color: #000;
}

/* Docs Page - Schema Container
 * -------------------------------------------------------------------------- */
.schema-container {
    padding-top: 70px;
}

.schema-container hr {
    margin-top: 70px;
}

.schema-container .left-block {
    text-align: center;
}

.schema-container .right-block .h2 {
    font-size:     36px;
    line-height:   50px;
    font-weight:   300;
    margin-top:    0;
    margin-bottom: 40px;
    color:         #000;
}

.schema-container .right-block .text {
    color:       #888;
    font-size:   17px;
    line-height: 30px;
}

.schema-container .right-block .learn-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            140px;
    height:           52px;
    margin-top:       46px;
    text-align: center;
    line-height: 52px;
    display: block;
}

.schema-container .right-block .learn-button:hover {
    background-color: #0266b6;
}

/* Docs Page - Features Container
 * -------------------------------------------------------------------------- */
.features-container {
    padding-top: 70px;
}

.features-container hr {
    margin-top: 70px;
}

.features-container > div {
    text-align: center;
}

.features-container img {
    margin-bottom: 15px;
    height:        114px;
}

.features-container .h3 {
    color:       #000;
    margin:      25px 0;
    font-size:   20px;
    line-height: 28px;
    font-weight: 300;
}

.features-container .text {
    color:       #888;
    line-height: 24px;
    margin:      0;
}

/* Docs Page - Companies Container
 * -------------------------------------------------------------------------- */
.companies-container {
    padding:    70px 15px;
    text-align: center;
}

.companies-container .h2 {
    font-size:     36px;
    line-height:   50px;
    font-weight:   300;
    margin-top:    0;
    margin-bottom: 40px;
    color:         #000;
    padding-left:  15px;
    padding-right: 15px;
}

.companies-container img {
    margin: 20px 35px;
}

/* Docs Page - Question Container
 * -------------------------------------------------------------------------- */
.question-container {
    padding-top:      75px;
    padding-bottom:   70px;
    text-align:       center;
    background-color: #d6ebff;
}

.question-container .h3 {
    font-size:      30px;
    line-height:    50px;
    font-weight:    300;
    color:          #000;
    vertical-align: middle;
}

.question-container .learn-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            140px;
    height:           52px;
    margin-left:      35px;
    text-align: center;
    line-height: 52px;
    display: inline-block;
    vertical-align:   middle;
}

.question-container .learn-button:hover {
    background-color: #0266b6;
}

/* Docs Page - Feedback Container
 * -------------------------------------------------------------------------- */
.feedback-container {
    padding-top: 70px;
}

.feedback-container hr {
    margin-top: 70px;
}

.feedback-container .h2 {
    font-size:     36px;
    line-height:   50px;
    font-weight:   300;
    margin-top:    0;
    margin-bottom: 40px;
    color:         #000;
}

.feedback-container .arrows {
    text-align: right;
}

.feedback-container .arrow {
    color:         #1384df;
    font-size:     28px;
    border:        2px solid #1384df;
    height:        50px;
    width:         50px;
    border-radius: 50%;
    display:       inline-block;
    text-align:    center;
    line-height:   45px;
    margin-left:   20px;
}

.feedback-container .icon-angle-left:before {
    margin-right: 2px;
}

.feedback-container .icon-angle-right:before {
    margin-left: 2px;
}

.feedback-container .arrow:hover {
    color:        #0266b6;
    border-color: #0266b6;
    cursor:       pointer;
}

.feedback-container .jcarousel ul {
    width:      400%;
    position:   relative;
    list-style: none;
    margin:     0;
    padding:    0;
}

.feedback-container .jcarousel {
    position: relative;
    overflow: hidden;
    padding:  0;
}

.feedback-container .jcarousel li {
    float:   left;
    width:   8.3333333%;
    padding: 0 15px;
}

.feedback-container .jcarousel li .text {
    background-color: #d6ebff;
    border-radius:    8px;
    padding:          20px;
    line-height:      24px;
    position:         relative;
}

.feedback-container .jcarousel li .text:after {
    content:       "";
    width:         0;
    height:        0;
    border-top:    0 solid transparent;
    border-bottom: 14px solid transparent;
    border-left:   26px solid #d6ebff;
    position:      absolute;
    bottom:        -14px;
    left:          50px;
}

.feedback-container .jcarousel li .author {
    margin-top:  25px;
    line-height: 24px;
}

.feedback-container .jcarousel li .link,
.feedback-container .jcarousel li .link a {
    color:       #888;
    line-height: 24px;
}

.feedback-container .jcarousel li .link a {
    border-bottom: 1px solid #fff;
}

.feedback-container .jcarousel li .link a:hover {
    border-bottom-color: #aaa;
}

/* Docs Page - Community Container
 * -------------------------------------------------------------------------- */
.community-container {
    padding:    35px 15px;
    text-align: center;
}

.community-container .h2 {
    font-size:     36px;
    line-height:   50px;
    font-weight:   300;
    margin-top:    0;
    margin-bottom: 50px;
    color:         #000;
}

.community-container ul {
    list-style: none;
    text-align: left;
    color:      #888;
}

.community-container li {
    padding-left:  40px;
    margin-bottom: 22px;
    line-height:   24px;
    position:      relative;
}

.community-container li:before {
    color:    #1384df;
    position: absolute;
    left:     0;
    top:      4px;
}

/* Docs Page - Donate Container
 * -------------------------------------------------------------------------- */
.donate-container {
    padding-top:      75px;
    padding-bottom:   70px;
    text-align:       center;
    background-color: #d6ebff;
}

.donate-container ul {
    list-style:     none;
    display:        inline-block;
    vertical-align: middle;
    padding:        0;
    margin:         0;
    text-align:     right;
}

.donate-container .h3 {
    font-size:   30px;
    line-height: 50px;
    font-weight: 300;
    color:       #000;
    margin:      0 0 5px 0;
}

.donate-container .donate-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            140px;
    height:           52px;
    margin-left:      35px;
    vertical-align:   middle;
    text-align: center;
    display: inline-block;
    line-height: 52px;
}

.donate-container .donate-button:hover {
    background-color: #0266b6;
}

.apache-license-text {
    font-size: 20px;
}

.text2 {
    font-size: 18px;
}

.footer-header {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}