/**
 * contents
 */
.contents_wrap {
    margin: 2em auto 6em auto;
    padding: 8% 0 0 0;
    width: 1100px;
}

.contents {
    color: #5c5c5c;
    margin-left: auto;
    margin-right: auto;
    width: 1060px;
}

.contents h2 {
    background-color: #999;
    color: #fff;
    font-size: 1.17em;
    font-weight: normal;
    line-height: 2em;
    margin: 0;
    padding-left: 1em;
}

.contents .sub_title {
    color: #e35734;
}

.contents .buttons {
    margin: 3em 0 0 0;
    text-align: right;
}

/**
 * table
 */

.contents table {
    color: #919191;
    font-size: 0.9em;
    font-weight: normal;
    max-width: 100%;
    table-layout: fixed;
    text-align: left;
    width: 100%;
}

.contents .enabled_plugins,
.contents .plugins table {
    font-size: 1.0em;
}

.contents table .xtiny_width {
    width: 30px;
}

.contents table .tiny_width {
    width: 50px;
}

.contents table .small_width {
    width: 140px;
}

.contents table .medium_width {
    width: 200px;
}

.contents table .large_width {
    width: 260px;
}

.contents table .xlarge_width {
    width: 320px;
}

.contents hr {
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 1px dotted #e8e8e6;
}

table.list {
    border-top: 1px solid #e8e8e6;
    /*padding: 0px 0px 40px 40px;*/
}

.list thead tr {
    height: 2.4em;
}

.list th {
    font-weight: normal;
    padding: 0.4em 1em;
    color: #333;
}

.plugins .list th {
    padding-left: 0.5em;
    padding-right: 0;
}

.list tbody tr {
    height: 4em;
}

.list td {
    font-family: Menlo, monospace;
    padding: 0.4em 1em;
    word-wrap: break-word;
}

th,
div.subtable,
.list td.operations {
    font-family: sans-serif;
}

.list td.operations a {
    text-decoration: none;
}

.list td.operations a[_available=''] img {
    opacity: 0.3;
}

.plugins .list td {
    padding-left: 0.5em;
    padding-right: 0;
}

div.subtable {
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-right: 0.5em;
}

.subtable .links {
    text-align: right;
    margin-right: 1em;
    height: 4em;
}

.subtable .links a {
    line-height: 4em;
}

table.subtable {
    border: none;
    font-size: 0.9em;
    margin: 0;
    width: 100%;
}

table.subtable thead th {
    color: #666;
}

table.subtable thead tr,
table.subtable tbody tr {
    height: 2em;
}

table.details {
    margin: 1em auto 2em auto;
}

.config_settings {
  font-style: italic;
  margin-left: 10px;
  font-size: 0.9em;
  float: left;
  padding-top: 10px;
  color: #aaa;
}

.config_settings span{
  font-weight: bold;
}

.config_settings span strong{
  font-style: normal;
}

.details th,
.details td {
    font-size: 0.9em;
}

.details th {
    color: #333;
    font-weight: normal;
}

.details td {
    color: #999;
    font-family: Menlo, monospace;
    padding-left: 1em;
}

.contents a {
    color: #919191;
    text-decoration: underline;
}

.contents a:hover {
    color: #1da7c3;
}

.contents a.orange {
    color: #e35734;
}

.contents a:hover.orange {
    color: #f38764;
}

.contents .name {
    color: black;
}

.contents .operations a {
    margin-right: 0.2em;
}

.contents td.operations {
    width: 40%;
}

.contents .operations a img {
    height: 30px;
    width: 30px;
}

.contents .header_row {
    background: #f3f3f3;
    word-break: keep-all;
    white-space: nowrap;
}
.contents .even_row {
    background: #f3f3f3;
}

.contents .odd_row {
    background: #fff;
}

.contents .selected_row {
    background: #2eb9d0;
    color: #000;
}

.contents .dashed_bottom_border_row {
    border-bottom: 1px dashed #ddd;
}

.contents .dashed_top_border_row {
    border-top: 1px dashed #ddd;
}

ul.login_options {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.login_options li {
    float: none !important;
    list-style: none;
    margin: 1em auto;
    padding: 0;
    width: 320px !important;
}

.login_options a {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #eee;
    display: table-cell;
    width: 320px;
    height: 80px;
    overflow: hidden;
    vertical-align: middle;
}

.login_options a:hover {
    border: 1px solid #333;
}

/**
 * widgets
 */

em {
    color: #e35734;
}

textarea.s3_url {
    width: 98%;
    margin: 0 auto;
    border: none;
    height: 5em;
    font-size: 0.8em;
    color: #e35734;
    resize: none;
}

.hidden {
    display: none;
}

.contents_wrap button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: none;
    color: white;
    font-size: 1.2em;
    font-weight: normal;
    margin-left: 2em;
    min-width: 7em;
    padding: 0.6em 2em;
    text-decoration: none;
}

.breadcrumbs {
    clear: both;
    height: 2em;
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: auto;
    width: 1160px;
    font-size: 1.2em;
}

.breadcrumbs ul,
.breadcrumbs li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs ul:after {
    clear: both;
}

.breadcrumbs li {
    float: left;
    font-size: 1em;
}

.breadcrumbs li a,
.breadcrumbs li span {
    color: black;
    display: inline-block;
    margin-right: 1em;
    padding: 0.3em;
    text-decoration: none;
}

.breadcrumbs li a {
    color: black;
}

.breadcrumbs li a:after {
    content: "\f501";
    font-family: "Genericons";
    font-size: 0.6em;
    left: 1.5em;
    position: relative;
}

.breadcrumbs li a:hover {
    background: #f7cdc1;
    color: #e35734;
}

.breadcrumbs li span {
    color: #e35734;
    background: white;
}

button.small {
    font-size: 0.9em;
}

button.blue_button {
    background: #1ea7be !important;
    border-color: #1ea7be !important;
}

button:hover.blue_button {
    background: #2eb9d0 !important;
    border-color: #2eb9d0 !important;
}

button.orange_button {
    background: #e35734 !important;
    border-color: #e35734 !important;
}

button:hover.orange_button {
    background: #f36744 !important;
    border-color: #f36744 !important;
}

button.grey_button {
    background: #3e4b4f !important;
    border-color: #3e4b4f !important;
}

button:hover.grey_button {
    background: #556368 !important;
    border-color: #556368 !important;
}

button:disabled {
    background: #999 !important;
    border-color: #999 !important;
    color: #ccc !important;
}

.state_label {
    -moz-border-radius: 0px;
    border-radius: 0px;
    display: inline-block;
    text-align: center;
    width: 80px;
    padding: 3px;
    border: 1px solid #aaa;
}

.state_draft {
    background-color: #e3e3e3;
    color: #666;
}

.state_debug {
    background-color: #e35734;
    color: #fff;
}

.state_live {
    color: #fff;
    background: #0187cc;
}

.state_upload_failed {
    background-color: transparent;
    color: #e35734;
    width: auto;
}

.state_upload_failed_icon {
    float: left;
    line-height: 24px;
    margin-right: 4px;
}

.state_upload_failed_icon:before {
    color: #e35734;
    content: "\f456";
    font-family: "Genericons";
    font-size: 16px;
}

.updated_at {
    color: #ccc;
    font-size: 0.9em;
    margin-top: 0.4em;
}

.selected_row .updated_at {
    color: #666;
}

.updated_at a img {
    border: none;
    position: relative;
    top: 0.43em;
    width: 20px;
    height: 20px;
}

.fixed_dialog {
    position: fixed;
}

.sidebar {
    font-size: 0.9em;
    width: 200px;
    vertical-align: top;
    border-right: 1px solid #e9e9e9;
}

.sidebar a.add_plugin,
.sidebar a.remove_plugin {
    color: #e35734;
}

.sidebar a.add_plugin:hover,
.sidebar a.remove_plugin:hover {
    color: #b32704;
}

.sidebar ul,
.sidebar li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar li {
    padding-left: 1em;
}

.sidebar .enabled_plugins a.plugin_name {
    line-height: 2em;
    color: #333;
}

.sidebar .enabled_plugins a.plugin_name:hover {
    color: #1da7c3;
}

.sidebar .enabled_plugins li:before {
    content: "\f501";
    font-family: "Genericons";
    font-size: 0.6em;
    position: relative;
}

.sidebar .enabled_plugins li.description:before {
    content: "";
}

.sidebar .availabled_plugins a.plugin_name {
    line-height: 2em;
    color: #333;
    font-size: 1.1em;
}

.sidebar .availabled_plugins a.plugin_name:hover {
    color: #1da7c3;
}

.sidebar .availabled_plugins h4.category:hover {
    color: #1da7c3;
}

.sidebar .availabled_plugins p {
    font-size: 0.9em;
    margin: 0 0 1em 0;
}

.sidebar a.add_plugin {
    line-height: 2em;
}

td.plugins {
    padding-left: 2em;
    vertical-align: top;
}

.ui-button-text {
    color: white;
}

/**
 * form
 */

.contents form {
    font-size: 0.9em;
}

.contents form legend {
    font-size: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.contents form fieldset {
    border: 1px solid #e9e9e9;
    padding: 3em 2em;
    background-color: #f3f3f3;
}
.contents form legend {
  padding: 0.3em 1.5em;
  border:1px solid #ddd;
  text-align:left;
  font-weight: bold;
  background-color: #fff;
}

.contents form .form_input {
    padding: 0.8em 0 1.4em 0;
}

.contents .plugins h4 {
    color: #333;
}

.contents .plugins fieldset {
    padding: 1em 2em;
    margin-bottom: 3em;
}

.contents .plugins fieldset fieldset {
    border: none;
    border-top: 1px solid #e9e9e9;
    padding: 2em 2em 0 2em;
}

.contents .plugins legend {
    color: #333;
    font-size: 1.2em;
}

.contents .plugins fieldset fieldset legend {
    color: #5c5c5c;
    font-size: 1.0em;
}

.contents form div.required {
    font-weight: bold;
}

.contents form label.field_name {
    color: #333;
    display: inline-block;
    padding-right: 1em;
    text-align: right;
    width: 23%;
}

.contents form label.field_name.multi_checkbox {
    text-align: left;
}

.contents form div.required label.field_name:before {
    color: red;
    content: "* ";
    padding-right: 0;
}

.contents form .inline_group {
    display: inline-block;
    width: 74%;
}

.contents form .inline_group.multi_checkbox {
    vertical-align: top;
}

.contents form .radio_label,
.contents form .checkbox_label,
.contents form select,
.contents form option {
    color: #333;
    font-family: Menlo, monospace;
    font-weight: normal;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.contents form option {
    padding-right: 2em;
}

.contents form .radio_label,
.contents form .checkbox_label {
    margin-right: 2em;
}

.contents form input[type='text'],
.contents form textarea {
    border: 1px solid #e1e1e1;
    color: #333;
    font-family: Menlo, monospace;
    padding: 0.4em 1em;
    width: 74%;
}

.contents form textarea {
    height: 6em;
}

.contents form input[type='text'][readonly] {
    background-color: #f1f1f1;
}

.contents form input[type='text'][disabled] {
    border-style: dotted;
    color: #aaa;
}

.contents form .tips {
    color: #9e9e9e;
    display: block;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.2em;
    margin: 0.5em 0 0 25%;
    padding: 0;
}

.contents form .table_tips {
    color: #9e9e9e;
    display: block;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.2em;
    margin: 0.5em 0 0 0;
    padding: 0;
}

.contents form .invalid input {
    border-color: red;
}

.contents form .invalid.inline_group {
    border: 1px solid;
    border-color: red;
}

.contents form div .multi_checkbox_invalid {
    border: 1px solid;
    border-color: red;
}

.contents form .invalid+.tips {
    color: red;
}

.contents form .invalid .tips {
    color: red;
}


/* =============================================

    New SDKBOX Styles
    Kyle Kramer, v2015

============================================= */


/* Global / Structure */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.kk-container { width: 90%; max-width: 1100px; margin: 0 auto; }
.kk-nobullets { margin: 0; padding: 0; list-style: none; }
.kk-none { display: none; }


/* Responsive Media */
img { max-width: 100%; height: auto; }


/* Mobile Navigation */
.mobilemenu { display: none; position: fixed; left: 0; width: 100%; top: 75px; background: #000; padding: 1em; border-top: 1px solid rgba(255,255,255,.1); z-index: 10; }
.mobilemenu ul li a { display: block; border-bottom: 1px solid rgba(255,255,255,.05); padding: .75em; color: #c0c0c0; text-decoration: none; text-align: center;}
.mobilemenu ul li:last-child a { border: 0; }
.mobilemenu ul li a:hover, .mobilemenu ul li a:active { background: rgba(255,255,255,.1); color: #FFF; }
.mobilemenu ul li a.kk-button { border: 0; text-align: center; margin: 0 auto 1em; max-width: 150px; }
.mobilemenu ul li a.kk-button:hover { background: #f49047; }

/* Mobile Menu Icon */
a.openmobile { display: block; position: relative; overflow: hidden; width: 30px; height: 30px; font-size: 0; text-indent: -9999em; cursor: pointer; margin-top: 7px; }
a.openmobile span { display: block; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: #CCC; -webkit-transition: background .5s; transition: background .5s; }
a.openmobile span:before, a.openmobile span:after { content: ""; position: absolute; left: 0; display: block; width: 100%; height: 2px; background: #CCC; -webkit-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0; transition-delay: .3s, 0; }
a.openmobile span:before { top: -7px; -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
a.openmobile span:after { bottom: -7px; -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }
a.openmobile.active span { background: none; }
a.openmobile.active span:before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);  }
a.openmobile.active span:after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
a.openmobile.active span:before, a.openmobile.active span:after { -webkit-transition-delay: 0, .3s; transition-delay: 0, .3s; }


/* Header */
.kk-header { background: #090c0d; position: fixed; left: 0; top: 0; width: 100%; padding: 1em 0;  z-index: 5; }
.kk-logo { float: left; }
.kk-logo img { display: block; }

    /* Navigation */
    .kk-navigation { float: right; }
    .kk-navigation li { display: none; }
    .kk-navigation li.mobileonly { display: block; }


/* Hero Image Slider */
.kk-hero { position: relative; }
.kk-hero ul.slides li { display: none; padding: 10em 0 5em; }
.kk-hero ul.slides li { background: url("../images/bg-header.jpg") center no-repeat; background-size: cover; }
.kk-hero h1 { margin: 0 0 .5em; }
.kk-hero p { font-size: 16px; color: #dfdfdf; }
.kk-title { background: url("../images/bg-header.jpg") center no-repeat; background-size: cover; padding: 7em 0 3em; }
.kk-title-blockchain{ background: url("../images/blockchain/banner.png") center no-repeat; background-size: cover; padding: 7em 0 3em; }
.kk-title h1 { text-transform: none; }
ol.flex-control-nav { list-style: none; margin: 0; padding: 0; left: 0; bottom: 30px; text-align: center; position: absolute; width: 100%; }
ol.flex-control-nav li { margin: 0 .45em; display: inline-block; }
ol.flex-control-nav li a { display: block; width: 12px; height: 12px; border-radius: 50em; text-indent: -9999em; background: rgb(150,150,150); background: rgba(255,255,255,.5); }
ol.flex-control-nav li a.flex-active { background: #FFF; }


/* Partner List */
.kk-partners { background: #f9f9f9; padding: 2em 0 1em; }
.kk-partners ul li { float: left; width: 20%; margin-bottom: 1em; }
.kk-partners ul li img { display: block; margin: 0 auto; max-height: 30px; }


/* Introduction, Why SDKBOX */
.kk-why-sdkbox { padding: 3em 0; }
.kk-app-developers { margin-top: 3em; margin-bottom: 3em; }
.kk-why-sdkbox .kk-none { margin-top: 3em; }
.kk-why-sdkbox .kk-none div { margin-bottom: 2em; }
.kk-why-sdkbox .kk-none p { font-size: 14px; font-size: .875rem; }
.kk-path-choice a { display: block; width: 135px; height: 135px; margin: 0 auto 1.5em; }
.kk-path-choice a.inactive, .kk-path-choice a.inactive ~ h2.fade { opacity: .6; }
.kk-path-choice a.active, .kk-path-choice a.active ~ h2.fade { opacity: 1; }
.kk-path-choice a.kk-ad-image { background: url("../images/icon-app-developers.jpg") center no-repeat; }
.kk-path-choice a.kk-ad-image.active { background: url("../images/icon-app-developers-active.jpg") center no-repeat; }
.kk-path-choice a.kk-mss-image { background: url("../images/icon-mobile-service-suppliers.jpg") center no-repeat; }
.kk-path-choice a.kk-mss-image.active { background: url("../images/icon-mobile-service-suppliers-active.jpg") center no-repeat; }

    /* Periodic Table */
    /*.kk-periodic-table { margin-top: 5em; }*/
    .kk-periodic-table ul li { display: block; width: 100%; line-height: 55px; text-align: center; border: 2px solid #C0C0C0; border-collapse: collapse; margin-bottom: 5px; padding: .5em; }
    .kk-periodic-table ul li:hover { border-color: #a0a0a0; }
    .kk-periodic-table ul li.blank { border-color: transparent; }
    .kk-periodic-table img {max-height: 55px; display: block; margin: 0 auto; }


/* Get Services */
.kk-get-services { padding: 6em 0; background: url("../images/bg-get-services.jpg") center no-repeat; background-size: cover; }
.kk-get-services h2.kk-headline { color: #FFF; }
.kk-get-services p { margin: 0 auto 2em; font-size: 15px; color: #c5c5c5; }


/* Customer List */
.kk-customers { padding: 5em 0 4em; }
.kk-customers h2.kk-headline { font-size: 24px; text-transform: none; margin: 0 0 2em; }
.kk-customers ul li { float: left; width: 20%; margin: 0 0 2em; min-width:120px; height:30px; text-align: center;}
.kk-customers ul li img { margin: 0 auto; display: block; height:30px}


/* What is SDKBOX */
.kk-spacer { padding: 5em 0; }
.kk-spacer p.kk-lead { padding-bottom: 1em;  width: 70%; margin: 0 auto;}
.kk-spacer p.kk-desc { padding-bottom: 1em; }
.kk-spacer .kk-alignCenter .sixcol, .kk-spacer .kk-alignCenter .threecol { margin-bottom: 3em; }
img.phone-demo { margin-top: 5em; }


/* Integrations page */
.kk-spacer-row { padding-bottom: 4em; margin-bottom: 4em; border-bottom: 1px solid #EEE; }
.kk-spacer-row:last-of-type { border: 0; margin: 0; padding: 0; }
.kk-spacer-row ul li { margin-bottom: 2em; }
.kk-spacer-row ul li:last-child { margin: 0; border: 0; }
.kk-spacer-row ul li h3 { margin: 0 0 .25em 85px; }
.kk-spacer-row h3 a { color: #4e5f64; text-decoration: none; }
.kk-spacer-row h3 a:hover { color: #ff9b51; }
.kk-spacer-row h3 sup { text-transform: uppercase; color: #C02B2E; font-size: 11px; font-weight: 600; }
.kk-spacer-row ul li img { float: left; max-width: 65px; }
.kk-spacer-row ul.kk-nobullets li img { width: 65px; }
.kk-spacer-row ul li p { margin-left: 85px; margin-bottom: 0; }
.kk-sidebar { display: none; }

/* plugin pages */
.kk-screenshots { padding: 1em 0 1em 0; }
.kk-screenshots div { margin-top: 1em auto;}
.kk-screenshots div img { display: block; margin: 0 auto; }
div.kk-download { padding: 1em 0 1em 0; }
p.kk-download { font-size:1.2em; margin-bottom:0; }
p.kk-download sup { text-transform: uppercase; color: #C02B2E; font-size: 11px; font-weight: 600; }
p.kk-code-quote { font-size:0.9em; margin: 0.8em; border:1px dotted #888; color:#eee; padding: 0.8em; background-color: #333; width: 80%; }

/* Callout Bars */
.kk-callout-bar { background: #F9F9F9; padding: 3em 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; text-align: center; }
.kk-callout-bar h2 { color: #273033; margin-top: 0; }
.kk-callout-bar .kk-button { margin-top: 1.5em; }
.kk-hero .kk-button { margin-top: 1em; }


/* Footer */
.kk-footer { background: #273033; padding: 3em 0; }
.kk-footer .threecol { margin-bottom: 3em; }
.kk-footer .last { margin: 0; }
.kk-footer p.kk-menu-title { color: #ff9b51; font-weight: 600; text-transform: uppercase; margin: 0 0 .5em; font-size: 14px; font-size: .875rem; }
.kk-footer ul li { font-size: 13px; font-size: .813rem; line-height: 2; }
.kk-footer ul li a { color: #d0d0d0; text-decoration: none; }
.kk-footer ul li a:hover { color: #FFF; text-decoration: underline; }
.kk-footer p { font-size: 13px; font-size: .813rem; color: #d0d0d0; }
.kk-footer .kk-newsletter { margin-bottom: 3em; padding-bottom: 3em; border-bottom: 1px solid rgba(255,255,255,.05); }
.kk-footer .kk-newsletter h3 { color: #a0a0a0; margin: 0 0 2em; font-weight: normal; }
.kk-footer .kk-newsletter input[type="email"] { width: 60%; border-radius: 3px; padding: .35em .5em; border: 0; }
.kk-footer .kk-newsletter input[type="submit"] { padding: .25em 0; width: 35%; margin-left:2%; }


/* Typography */
body, p, li, span, input, select, textarea, button, h1, h2, h3, h4 { font-family: "proxima-nova", Helvetica, Arial, sans-serif; line-height: 1.65; color: #5e5e5e; }

h1, h2, h3, h4 { font-weight: bold; line-height: normal; margin: .5em 0; }
h1 { color: #FFF; font-size: 45px; font-weight: 600; margin-top: 0; text-transform: uppercase; }
h2 { color: #ff9b51; font-size: 28px; font-weight: normal; }
h2.kk-headline { color: #273033; font-weight: 600; text-transform: uppercase; margin-top: 0; }
h2.kk-inline { color: #273033; font-weight: 600; display: inline; margin:0 1.2em 0 0; }
h2.kk-inline img { height:40px; transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); }
h3 { color: #4e5f64; font-size: 18px; }


p, li, table { font-size: 15px; font-size: .938rem; }
p { margin: 0 0 1em; }

a, a:link, a:visited, a:active { color: #ff9b51; text-decoration: underline; }
a:hover { text-decoration: none; }


/* Buttons */
.kk-button { border-radius: 50em; text-decoration: none !important; text-transform: uppercase; font-weight: bold; font-size: 16px; font-size: 1rem; display: inline-block; cursor: pointer; -webkit-appearance: none; padding: .5em 2em; border: 0; }
.kk-large { font-size: 18px; font-size: 1.125rem; padding: .75em 2.5em; }

    /* Colors */
    .kk-orange { background: #ff9b51; color: #FFF!important; }
    .kk-blue-gradual {background:linear-gradient(180deg,rgba(0,175,255,1) 0%,rgba(0,116,255,1) 100%);}
    a.kk-blue-gradual{color: #fff;}
    .kk-orange:hover { background: #f49047; }
    .kk-white-ghost { border: 2px solid #FFF; background: transparent; color: #FFF!important; }
    .kk-white-ghost:hover { background:#FFF; color:#ff9b51!important; }

.mart80{
    margin-top: 80px;
}
.kk-container h1.blockchain{
    font-size: 48px;
    font-weight: 400;
}
.kk-container p.blockchain{
    font-size: 24px;
}
.kk-container p .qa{
    font-size: 26px;
    color: #1D92FF;
}
@media screen and (min-width: 860px) {
/* Global / Structure */
.kk-container { width: 96%; }


/* Header */
.kk-header { padding: 1em 0; position: absolute; }

    /* Navigation */
    .kk-navigation li { display: block; float: left; margin-left: 2em; }
    .kk-navigation li:first-child { margin: 0; }
    .kk-navigation li.mobileonly { display: none; }
    .kk-navigation a { display:block; color: #FFF; text-decoration: none; }
    .kk-navigation a:not(.kk-button) { padding: .45em 0; }
    .kk-navigation a:hover { text-decoration: underline; }


/* Hero Image Slider */
.kk-hero ul.slides li { padding: 225px 0 180px; }
.kk-hero p { font-size: 20px; margin: 0 auto 2em; max-width: 850px; }
.kk-hero a.kk-button { margin: 0 .5em; }
.kk-title { padding: 13% 0 5%; }

.kk-hero strong {
  color: #ff9933;
}



/* Introduction, Why SDKBOX */
.kk-why-sdkbox, .kk-spacer { padding: 3% 0; }
.kk-path-choice { margin: 5em 5% 0; }
.kk-why-sdkbox .kk-none { margin-top: 5em; }
.kk-why-sdkbox .kk-none div { margin-bottom: 3em; }

    /* App Developers */
    .kk-app-developers, .kk-mobile-service-suppliers { float: left; width: 50%; padding: 0 5%; margin: 0; }

    /* Periodic Table */
    .kk-periodic-table { margin-top: 5em; }
    .kk-periodic-table .kk-table { display: table; table-layout: fixed; border-spacing: 5px; }
    .kk-periodic-table .kk-cell { display: table-cell; width: 1%; vertical-align: bottom; }


/* Get Services */
.kk-get-services p { font-size: 17px; max-width: 700px; }



/* What is SDKBOX */
.kk-spacer .sixcol, .kk-spacer .threecol { margin-bottom: 0; }
.kk-what-is-sdkbox .kk-container, .kk-integrate-service .kk-container { max-width: 1000px; }
.kk-spacer h3 { margin: 1em 0; }
.kk-spacer .kk-alignCenter .sixcol { padding: 0 1em; }


/* Integrations Page */
#kk-content .ninecol { padding-right: 2em; }
#kk-content .ninecol h2 { margin: 0 0 .25em; }
.kk-spacer-row ul li { display: inline-block; width: 48%; vertical-align: top; margin-bottom: 3em; padding-right: 1em; }
.kk-spacer-row ul li:last-child, .kk-spacer-row ul li:nth-last-child(2) { margin-bottom: 0; }
.kk-sidebar { display: block; padding: 1em; background: #ff9b51; }
.kk-sidebar ul li a { display: block; border-bottom: 1px solid rgba(255,255,255,.25); padding: .75em; text-decoration: none; color: #ffe2cc; }
.kk-sidebar ul li:last-child a { border: 0; }
.kk-sidebar ul li a:hover { color: #FFF; }
.kk-sidebar ul li a span { border-radius: 50em; background: #FFF; font-size: 11px; font-weight: 600; margin-left: 1em; padding: 2px 8px; color: #ff9b51; vertical-align: middle; }
.kk-sidebar ul li a.current { font-weight: bold; color: #FFF; }
#kk-content .kk-spacer-row { padding-left: 75px; background-size: 48px auto!important; }
#kk-sdkbox-essentials { background: url("http://cocos2d-x.org/s/images/bg-essent.png") left top no-repeat; }
#kk-analytics { background: url("http://cocos2d-x.org/s/images/bg-analytics.png") left top no-repeat; }
#kk-iap-optimization { background: url("http://cocos2d-x.org/s/images/bg-adunits.png") left top no-repeat; }
#kk-app-stores { background: url("http://cocos2d-x.org/s/images/bg-other.png") left top no-repeat; }
#kk-ad-units { background: url("http://cocos2d-x.org/s/images/bg-adunits.png") left top no-repeat; }
#kk-social { background: url("http://cocos2d-x.org/s/images/bg-social.jpg") left top no-repeat; }
#kk-attribution { background: url("http://cocos2d-x.org/s/images/bg-attribution.png") left top no-repeat; }
#kk-more { background: url("http://cocos2d-x.org/s/images/bg-analytics.png") left top no-repeat; }
#kk-push { background: url("http://cocos2d-x.org/s/images/bg-other.png") left top no-repeat; }


/* Callout Bars */
.kk-callout-bar { text-align: left; }
.kk-callout-bar h2 { margin: 0 0 .25em; }
.kk-callout-bar p { margin: 0; }
/* .kk-callout-bar .kk-callout-text { float:left; width: 60%; text-align:center;} */

.kk-callout-bar .kk-callout-text { float:left; width: 60%; text-align: left;}
.kk-callout-bar .kk-callout-button { float: right; width: 40%; text-align: center; padding-top: .65em; }
.kk-callout-bar .kk-button { margin: 0; }


/* Footer */
.kk-footer { padding: 4em 0; }
.kk-footer .threecol { margin-bottom: 0; }
.kk-footer .last { text-align: right; }
.kk-footer .kk-newsletter h3 { margin: 0; }


/* Typography */
h1 { font-size: 65px; }
h2 { font-size: 32px; }
}

@media screen and (min-width: 1160px) {
/* Menu */
.kk-navigation li { margin-left: 3.5em; }

/* Callout Bars */
.kk-callout-bar .kk-callout-text { width: 70%; }
.kk-callout-bar .kk-callout-button { width: 30%; }

}

.kk-login { padding: 10em 0 6em 0; margin: 20px auto;}
.kk-login ul { padding: 0 10%; }
.kk-login ul li { float: left; width: 50%; margin-bottom: 1em; }
.kk-login ul li img { display: block; margin: 0 auto;  }

.kk-privacy { padding: 10em 0 6em 0; margin: 20px auto; }


/*
 * Dropit v1.1.0
 * http://dev7studios.com/dropit
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* These styles assume you are using ul and li */
.dropit {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropit .dropit-trigger {
    position: relative;
}

.dropit .dropit-submenu {
    position: absolute;
    top: 100%;
    left: 0; /* dropdown left or right */
    z-index: 1000;
    display: none;
    min-width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropit .dropit-open .dropit-submenu {
    display: block;
}

nav ul.dropdown-menu {
    padding: 0 !important;
    top: 2.5em;
    left: -8em;
}

nav .dropdown-menu span {
    color: #999;
    display: block;
    border: none;
    padding: 0.5em 2em !important;
}

nav .dropdown-menu a {
    color: #333 !important;
    display: block;
    border: none !important;
    padding: 1em 2em !important;
}

nav .dropdown-menu a:hover {
    text-decoration: none;
    background-color: #e5e5e5;
}

nav .dropdown-menu li.divider {
    border: none;
    border-top: 1px solid #ccc;
    height: 1px;
    overflow: hidden;
}

.justify{
  text-align: justify;
}


/** fix jquery ui */

.ui-widget-header span {
    color: #fff;
}

.ui-widget-content button {
    color: #fff;
}

.kk-spacer-row .kk-item {
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
}

.kk-spacer-row .kk-item img{
  float: left;
  height: 100px;
}
.kk-spacer-row .kk-item .version{
  font-size: 0.9em;
  font-weight: bold;
  color: #333;
}

.kk-spacer-row .kk-item h3,
.kk-spacer-row .kk-item p {
  padding: 0 0 0 130px;
}

.kk-note {
  color: #3a87ad;
  background-color: #f7f7f7;
  padding: 1em;
  margin-bottom: 1.3em;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
}

.kk-note-title {
    font-weight: bold;
    text-align: left;
}


/*
 * zxxFile.js
 * http://dev7studios.com/dropit
 * http://www.zhangxinxu.com/study/js/zxxFile.js
 *
 * Copyright 2012, Zhang XinXu
 */

.upload_box {
    width: 800px;
    margin: 1em auto;
}

.upload_main {
    border-width: 1px 1px 2px;
    border-style: solid;
    border-color: #ccc #ccc #ddd;
    /*background-color: #fbfbfb;*/
}

.upload_choose {
    padding:1em;
}

.upload_drag_area {
    display: inline-block;
    width: 30%;
    height: 120px;
    border: 1px dashed #ddd;
    background: #fff;
    color: #999;
    text-align: center;
    vertical-align: middle;
}

.upload_drag_hover {
    border-color: #069;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
    color: #333;
}

.upload_preview {
    /*border-top: 1px solid #bbb;*/
    /*border-bottom: 1px solid #bbb;*/
    overflow: hidden;
    display: inline-block;
    width: 30%;
    padding-left: 7em;
    vertical-align: middle;
    /*_zoom:1;*/
}

.upload_append_list {
    padding: 0 1em;
    position: relative;
}

.upload_delete {
    margin-left: 2em;
}

.upload_image {
    /*max-height:250px;*/
    width: 120px;
    height: 120px;
    padding:5px;
}

.upload_submit {
    padding-top: 1em;
    padding-left: 1em;
}

.upload_submit_btn {
    display: none;
    height: 32px;
    font-size: 14px;
}

.upload_loading {
    height:250px;
}

.upload_progress {
    display: none;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    background-color: rgba(0,0,0,.6);
    position: absolute;
    left: 25px;
    top: 45px;
}

.display-flex{
    display: flex;
    justify-content: space-between;
  }
  .center-container{
    width: 70%;
    margin: 40px auto 0;
  }
  .center-main{
    width: 70%;
    margin: 0 auto;
  }
  .bg-main{
    background:rgba(24,33,41,1);
  }
  .sdkbox-main{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding-left: 3%;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 20px 0px rgba(235,240,248,1);
  
  }
  .sdkbox-main .sdkbox-icon{
    /* width:140px; */
    /* height:180px; */
    height: auto;
    width: 13%;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .sdkbox-main .sdkbox-icon img{
    display: block;
    width: 100%;
  }
  .sdkbox-main .sdkbox-content{
    /* width:810px; */
    width: 77%;
    padding-top: 40px;
    margin-left: 3%;
    padding-bottom: 40px;
  }
  .sdkbox-main .sdkbox-jump-btn{
    height: auto;
    width: 8%;
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .sdkbox-main .sdkbox-content .title{
    width: 100%;
    /* height:28px; */
    font-size:24px;
    font-weight:bold;
    color:rgba(42,92,139,1);
    line-height:28px;
    text-align: left;
  }
  .sdkbox-main .sdkbox-content .title sup{
    font-size:12px;
    font-weight:bold;
    color:rgba(192,43,46,1);
    top: -50%;
  }
  .sdkbox-main .sdkbox-content .router-link{
    width: 100%;
    font-size:20px;
    font-weight:600; 
    color:rgba(0,133,255,1);
    line-height:28px;
    text-align: left;
    margin-top: 10px;
    display: block;
    overflow-wrap: break-word;
  }
  .sdkbox-main .sdkbox-content .describe-title{
    width: 100%;
    font-size:20px;
    font-weight:400;
    color:#585858;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
  }
  .sdkbox-main .sdkbox-content .describe-title a.url-link{
    font-size:20px;
    font-weight:400;
    color:#0285FF;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
  }
  .sdkbox-main .sdkbox-content .describe{
    width: 100%;
    font-size:20px;
    font-weight:400;
    color:rgba(91,100,135,1);
    line-height:25px;
    text-align: left;
    margin-top: 10px;
  }
  .sdkbox-main .sdkbox-content .describe a.url-link{
    font-size:18px;
    font-weight:400;
    color:#0285FF;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
  }

@media screen and (max-width: 860px) {
    
  .sdkbox-main .sdkbox-content .title{
    width: 100%;
    /* height:28px; */
    font-size:18px;
    font-weight:bold;
    color:rgba(42,92,139,1);
    line-height:28px;
    text-align: left;
  }
  .sdkbox-main .sdkbox-content .title sup{
    font-size:12px;
    font-weight:bold;
    color:rgba(192,43,46,1);
    top: -50%;
  }
  .sdkbox-main .sdkbox-content .router-link{
    width: 100%;
    font-size:16px;
    font-weight:600; 
    color:rgba(0,133,255,1);
    line-height:28px;
    text-align: left;
    margin-top: 10px;
    display: block;
    overflow-wrap: break-word;
  }
  .sdkbox-main .sdkbox-content .describe-title{
    width: 100%;
    font-size:16px;
    font-weight:400;
    color:#585858;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
  }
  .sdkbox-main .sdkbox-content .describe-title a.url-link{
    font-size:16px;
    font-weight:400;
    color:#0285FF;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
  }
  .sdkbox-main .sdkbox-content .describe{
    width: 100%;
    font-size:14px;
    font-weight:400;
    color:rgba(91,100,135,1);
    line-height:25px;
    text-align: left;
    margin-top: 10px;
  }
  .sdkbox-main .sdkbox-content .describe a.url-link{
    font-size:14px;
    font-weight:400;
    color:#0285FF;
    line-height:25px;
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
  }
}