h2 {
    text-align: center
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
big,
blockquote,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
i,

iframe,
/* img, */
ins,
kbd,

label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
small,
strike,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

body {
    margin: 0
}

body,
html {
    width: 100%;
    height: 100%
}

*  {
    box-sizing: border-box
}



:after,
:before{
    box-sizing: border-box
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
summary {
    display: block
}

b,
strong {
    font-weight: 700
}

i {
    font-style: italic
}

a {
    outline: 0;
    color: #47A6EC
}

textarea {
    overflow: auto
}

html {
    color: #333;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    min-width: 320px
}

p {
    line-height: 1.3;
    margin-bottom: 14px
}

h1,
h2,
h3,
h4 {
    font-family: '
    Fira Sans'
    ,
    sans-serif;
    line-height: 1
}

h2 {
    font-weight: 100;
    font-size: 32px;
    margin: 48px 0 8px
}

h3 {
    font-weight: 500;
    font-size: 18px;
    margin: 24px 0 8px
}

h4 {
    font-weight: 400;
    color: #939393;
    font-size: 16px;
    margin: 24px 0 0
}

.row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.row>

* {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

article h2,
article h3 {
    position: relative;
    z-index: 1
}

article h2:after,
article h3:after {
    content: '
    '
    ;
    background: rgba(67, 156, 255, .2);
    border-radius: 4px;
    opacity: 0;
    left: -8px;
    right: -8px;
    top: -10px;
    bottom: -4px;
    position: absolute;
    z-index: -1;
    transition: all .4s .3s linear
}

.nav,
.nav-wrap {
    bottom: 0;
    top: 0
}

article h2.-hilited-:after,
article h3.-hilited-:after {
    opacity: 1;
    transition: all .4s .7s linear
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1px 0;
    position: relative
}

.buttons,
.example--label,
.lang-link {
    position: absolute
}

.container article {
    margin: 60px 0 30px
}

@media all and (max-width:1525px) {
    .container {
        margin-left: 270px
    }
}

@media all and (max-width:1280px) {
    .container {
        margin-right: 20px
    }
}

@media all and (max-width:650px) {
    .container {
        margin-right: 20px;
        margin-left: 20px
    }
}

.list-inline {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: -8px -8px 0
}

.list-inline>

* {
    margin: 8px 8px 0
}

.buttons {
    top: 19px
}

.lang-link {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
    top: 15px
}

.lang-link img {
    margin-right: 5px
}

@media all and (max-width:650px) {
    .lang-link span {
        display: none
    }
}

input[type=text] {
    outline: 0;
    height: 32px;
    border: 1px solid #b5b5b5;
    padding: 0 8px;
    margin: 0 0 14px;
    color: #444;
    font-family: Tahoma, sans-serif;
    transition: all .2s;
    width: 250px
}

.hljs,
.param-inline {
    font-family: Consolas, monospace
}

input[type=text]:focus {
    border-color: #ffd75c
}

ul {
    margin: 0 0 16px
}

ul li {
    list-style: none;
    margin-bottom: 8px
}

.example--label {
    background: #ececec;
    border-radius: 0 0 4px 4px;
    padding: 4px 12px;
    right: 8px;
    top: 0
}

.hljs {
    line-height: 1.2;
    -moz-tab-size: 4;
    tab-size: 4
}

.example {
    border: 1px solid #ececec;
    border-radius: 4px;
    position: relative;
    margin: 16px 0
}

.example .example-code {
    border: none;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #ececec;
    margin: 0
}

.example-inline {
    background: red;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px
}

.example-inline .hljs {
    padding: 0 4px
}

.example-content {
    padding: 32px
}

@media all and (max-width:650px) {
    .example-content {
        padding-left: 4%;
        padding-right: 4%
    }
}

.example-content h1:first-child,
.example-content h2:first-child,
.example-content h3:first-child {
    margin-top: 0
}

.example-content>

:last-child {
    margin-bottom: 0 !important
}

a:hover {
    color: orange;
}

/* #ff767e  */


.example-code {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0;
    font-size: 13px
}

.param-inline i,
.param-inline strong {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle
}

.example-code code {
    padding: 16px 32px
}

.param-inline strong {
    background: #efefef;
    color: #333;
    border-radius: 4px;
    font-weight: 400;
    padding: 3px 6px 4px
}

.param-inline i {
    color: #838383;
    font-size: .95em;
    font-style: normal;
    font-weight: 100;
    font-family: '
    Fira Sans'
    ,
    sans-serif
}

.promo-header {
    font-size: 48px;
    font-weight: 100;
    margin-top: 54px
}

.promo-header span {
    display: block;
    font-size: .5em
}

.datepicker-promo .datepicker-inline,
.param-header--label,
.range-example span {
    display: inline-block
}

.range-example input[type=text] {
    width: 150px
}

.range-example span {
    margin: 0 8px
}

.param-header {
    margin-bottom: 8px
}

.param-header h3 {
    margin-bottom: 2px
}

.param-header p {
    margin: 0;
    font-size: 13px
}

.param {
    margin-bottom: 32px
}

.param-header--label {
    color: #707070;
    vertical-align: middle
}

.nav-wrap {
    background: #fff;
    position: fixed;
    overflow: hidden;
    width: 250px;
    left: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3)
}

.dp-note,
.nav {
    position: absolute
}

@media all and (max-width:650px) {
    .nav-wrap {
        display: none
    }
}

.nav-wrap:after,
.nav-wrap:before {
    content: '
    '
    ;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 28px
}

.nav-wrap:after {
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    bottom: 0
}

.nav {
    padding: 18px;
    right: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.nav--section {
    margin-bottom: 20px
}

.nav--section-title {
    line-height: 1;
    font-size: 22px;
    margin: 0 0 8px
}

.nav--section-title a {
    color: #000;
    text-decoration: none
}

.nav--section-title a:hover {
    color: #ff767e
}

.nav--subsection {
    margin-left: 2px
}

.nav--subsection-title {
    font-size: 13px;
    margin: 0 0 8px;
    font-weight: 400;
    font-family: Tahoma, sans-serif
}

.v-log,
.vt-tile h2 {
    font-family: monospace
}

.nav--subsection-title a {
    color: #787878;
    text-decoration: none
}

.nav--subsection-title a:hover {
    color: #ff767e
}

.dp-note {
    background: orange;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    left: 50%;
    bottom: 1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

}

.-selected- .dp-note {
	
   /*   bottom: 2px; */
   /*  background: #fff; */
	border: 3px solid darkorange;
   /*  opacity: .5  */
}

.visual-tests {
    padding-top: 12px;
    padding-bottom: 120px
}

.visual-tests h1 {
    color: #555;
    font-size: 20px;
    margin: 0;
    padding-left: 16px
}

.visual-tests .row {
    border-bottom: 1px solid #eee;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.visual-tests article:last-child .row {
    border: none
}

.vt-tile {
    padding: 16px;
    width: 284px
}

.v-log,
.vt-tile input {
    width: 100%
}

.vt-tile h2 {
    font-size: 14px;
    margin: 0 0 8px
}

.logger,
.v-log {
    background: rgba(0, 0, 0, .7);
    font-size: 12px;
    overflow: auto
}

.v-log {
    position: fixed;
    padding: 8px;
    height: 100px;
    bottom: 0;
    z-index: 10
}

.v-log p {
    margin: 0;
    color: #adff2f
}

.v-log span {
    color: #ddd
}

.logger {
    border-radius: 4px;
    font-family: Monospace, monospace;
    height: 150px;
    position: relative
}

.logger--content {
    padding: 4px 8px;
    height: 100%;
    overflow: auto
}

.logger--content p {
    margin: 0;
    color: #adff2f
}

.logger--content span {
    color: #ddd
}

.logger--clear {
    color: #333;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    position: absolute;
    height: 32px;
    padding: 0 8px;
    font-family: Tahoma, sans-serif;
    font-size: 13px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(255, 255, 255, .5);
    right: 24px;
    bottom: 0
}

.logger--clear:hover {
    background: rgba(255, 255, 255, .8)
}

.logger--clear:active {
    background: rgba(255, 255, 255, .3)
}