html {
	/* margin: 0px; padding: 0px; */ 
}
body {
	/* margin: 0px; padding: 0px; */
}
div {
	margin: 0px; padding: 0px;
}
object {
	margin: 0px; padding: 0px;
}
iframe {
	margin: 0px; padding: 0px;
}
h1 {
	margin: 0px; padding: 0px;
}
h2 {
	margin: 0px; padding: 0px;
}
h3 {
	margin: 0px; padding: 0px;
}
h4 {
	margin: 0px; padding: 0px;
}
h5 {
	margin: 0px; padding: 0px;
}
h6 {
	margin: 0px; padding: 0px;
}
p {
	margin: 0px; padding: 0px;
}
blockquote {
	margin: 0px; padding: 0px;
}
ol {
	margin: 0px; padding: 0px;
}
ul {
	margin: 0px; padding: 0px;
}
li {
	margin: 0px; padding: 0px;
}
form {
	margin: 0px; padding: 0px;
}
fieldset {
	margin: 0px; padding: 0px;
}
legend {
	margin: 0px; padding: 0px;
}
label {
	margin: 0px; padding: 0px;
}
table {
	margin: 0px; padding: 0px;
}
header {
	margin: 0px; padding: 0px;
}
footer {
	margin: 0px; padding: 0px;
}
nav {
	margin: 0px; padding: 0px;
}
section {
	margin: 0px; padding: 0px;
}
figure {
	margin: 0px; padding: 0px;
}
figure {
	display: block;
}
html {
	
}
a {
	color: rgb(49, 105, 179);
}
a:hover {
	color: rgb(204, 0, 0);
}
* {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
body {
	color: rgb(40, 43, 48); line-height: 26px; font-family: "myriad-pro","Myriad Pro","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 18px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern";
}
code {
	color: rgb(51, 51, 51); line-height: 1.45; font-family: Menlo, Monaco, monospace; font-size: 12px; tab-size: 4;
}
pre {
	color: rgb(51, 51, 51); line-height: 1.45; font-family: Menlo, Monaco, monospace; font-size: 12px; tab-size: 4;
}
pre {
	margin: 0px; padding: 0px; overflow: auto; -ms-word-wrap: normal; text-rendering: auto; -webkit-font-smoothing: auto;
}
code {
	background: rgb(242, 242, 242); margin: 0px; padding: 3px 5px; border-radius: 2px;
}
pre code {
	background: none; padding: 0px; border-radius: 0px;
}
h3 code {
	padding: 6px 10px; font-size: 22px; font-weight: normal;
}
h3 code.default {
	background: none; padding: 0px; font-size: 12px; opacity: 0.7;
}
.docs p {
	margin: 0px; padding-top: 12px; padding-bottom: 12px;
}
.docs h1 {
	margin-bottom: 32px;
}
.docs h1 a {
	text-decoration: none;
}
.docs h1 a:hover {
	text-decoration: underline;
}
.docs h2 {
	margin: 36px 0px 12px;
}
.docs h3 {
	margin: 24px 0px 8px; line-height: 28px; font-size: 22px;
}
.docs ul {
	margin-top: 8px; margin-bottom: 8px;
}
.docs ol {
	margin-top: 8px; margin-bottom: 8px;
}
.docs li {
	margin: 0px; padding: 4px 0px;
}
.docs-menu {
	left: 0px; top: 106px; width: 160px; position: absolute;
}
.docs-menu ul {
	list-style: none; margin: 0px; padding: 25px 0px; border-top-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid;
}
.docs-menu__ad {
	padding: 25px 10px; line-height: 17px; font-size: 13px; border-bottom-color: rgb(204, 204, 204); border-bottom-width: 1px; border-bottom-style: solid; position: relative;
}
.docs-menu a {
	width: 100%; text-decoration: none;
}
a.docs-logo {
	font-size: 20px; font-weight: 600; text-decoration: none; margin-bottom: 0px;
}
.docs-menu li {
	list-style: none; margin: 0px; padding: 0px;
}
a.docs-menu__item--active {
	color: rgb(34, 34, 34); font-weight: normal;
}
.codepen-embed {
	padding: 16px 30px; width: 100%; height: 600px; margin-left: -30px; box-sizing: content-box; background-color: rgb(248, 248, 248); -moz-box-sizing: content-box; -webkit-box-sizing: content-box;
}
.codepen-embed--disabled {
	height: auto;
}
.codepen-embed p {
	margin-bottom: 0px;
}
.docs .highlight {
	padding: 16px 30px; border-radius: 2px; width: 100%; margin-bottom: 26px; margin-left: -30px; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;
}
.highlight {
	background-color: rgb(248, 248, 248);
}
.c {
	color: rgb(136, 136, 136);
}
.err {
	color: rgb(166, 23, 23); background-color: rgb(227, 210, 210);
}
.k {
	color: rgb(167, 29, 93);
}
.o {
	color: rgb(0, 0, 0);
}
.cm {
	color: rgb(136, 136, 136);
}
.cp {
	color: rgb(136, 136, 136); font-weight: bold;
}
.c1 {
	color: rgb(136, 136, 136);
}
.cs {
	color: rgb(136, 136, 136); font-weight: bold;
}
.gd {
	color: rgb(0, 0, 0); background-color: rgb(255, 221, 221);
}
.ge {
	color: rgb(0, 0, 0);
}
.gr {
	color: rgb(170, 0, 0);
}
.gh {
	color: rgb(136, 136, 136);
}
.gi {
	color: rgb(0, 0, 0); background-color: rgb(221, 255, 221);
}
.go {
	color: rgb(136, 136, 136);
}
.gp {
	color: rgb(85, 85, 85);
}
.gs {
	font-weight: bold;
}
.gu {
	color: rgb(170, 170, 170);
}
.gt {
	color: rgb(170, 0, 0);
}
.kc {
	color: rgb(0, 134, 179);
}
.kd {
	color: rgb(167, 29, 93);
}
.kn {
	color: rgb(0, 0, 0); font-weight: bold;
}
.kp {
	color: rgb(0, 0, 0); font-weight: bold;
}
.kr {
	color: rgb(0, 0, 0); font-weight: bold;
}
.kt {
	color: rgb(121, 93, 163);
}
.m {
	color: rgb(0, 153, 153);
}
.s {
	color: rgb(223, 80, 0);
}
.na {
	color: rgb(167, 29, 93);
}
.nb {
	color: rgb(0, 134, 179);
}
.nc {
	color: rgb(121, 93, 163);
}
.no {
	color: rgb(167, 29, 93);
}
.nd {
	color: rgb(60, 93, 93); font-weight: bold;
}
.ni {
	color: rgb(128, 0, 128);
}
.ne {
	color: rgb(153, 0, 0); font-weight: bold;
}
.nf {
	color: rgb(153, 0, 0); font-weight: bold;
}
.nl {
	color: rgb(153, 0, 0); font-weight: bold;
}
.nn {
	color: rgb(85, 85, 85);
}
.nt {
	color: rgb(0, 134, 179);
}
.nv {
	color: rgb(167, 29, 93);
}
.ow {
	color: rgb(0, 0, 0); font-weight: bold;
}
.w {
	color: rgb(187, 187, 187);
}
.mf {
	color: rgb(0, 153, 153);
}
.mh {
	color: rgb(0, 153, 153);
}
.mi {
	color: rgb(0, 153, 153);
}
.mo {
	color: rgb(0, 153, 153);
}
.sb {
	color: rgb(223, 80, 0);
}
.sc {
	color: rgb(223, 80, 0);
}
.sd {
	color: rgb(223, 80, 0);
}
.s2 {
	color: rgb(223, 80, 0);
}
.se {
	color: rgb(223, 80, 0);
}
.sh {
	color: rgb(223, 80, 0);
}
.si {
	color: rgb(223, 80, 0);
}
.sx {
	color: rgb(223, 80, 0);
}
.sr {
	color: rgb(0, 153, 38);
}
.s1 {
	color: rgb(223, 80, 0);
}
.ss {
	color: rgb(153, 0, 115);
}
.bp {
	color: rgb(136, 136, 136);
}
.vc {
	color: rgb(167, 29, 93);
}
.vg {
	color: rgb(167, 29, 93);
}
.vi {
	color: rgb(167, 29, 93);
}
.il {
	color: rgb(0, 153, 153);
}
.language-css .k {
	color: rgb(0, 134, 179);
}
.language-css .nt {
	color: rgb(99, 163, 92);
}
img {
	border: 0px currentColor; border-image: none; width: auto; height: auto; max-width: 100%;
}
.video {
	margin: 0px 0px 24px;
}
.video__container {
	width: 100%; height: 0px; overflow: hidden; padding-top: 35px; padding-bottom: 56.25%; position: relative;
}
.video__container iframe {
	left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;
}
.video-desc {
	margin: 12px auto; width: 100%; max-width: 740px;
}
p {
	margin: 0px 0px 12px;
}
ul {
	
}
ul {
	margin: 0px 0px 12px 25px; padding: 0px;
}
ol {
	margin: 0px 0px 12px 25px; padding: 0px;
}
li {
	margin: 0px 0px 12px;
}
h1 {
	margin: 0px; font-weight: normal;
}
h2 {
	margin: 0px; font-weight: normal;
}
h3 {
	margin: 0px; font-weight: normal;
}
h4 {
	margin: 0px; font-weight: normal;
}
h5 {
	margin: 0px; font-weight: normal;
}
h6 {
	margin: 0px; font-weight: normal;
}
h1 {
	margin: 0px 0px 6px; line-height: 1; font-size: 48px; font-weight: 600;
}
.row--heading {
	position: relative;
}
.section--head p {
	text-align: left; line-height: 29px; font-size: 19px; margin-bottom: 24px;
}
.section--head .github-button {
	top: 0px; right: 0px; position: absolute;
}
.row--nav {
	text-align: center; line-height: 1.1; font-size: 32px;
}
.navigation {
	background: rgb(247, 247, 247); padding: 30px 0px; width: 100%; position: relative;
}
.navigation a {
	text-decoration: none; border-bottom-color: rgb(146, 171, 205); border-bottom-width: 1px; border-bottom-style: solid;
}
a.twitter-nav-link {
	margin: 0px 0.2em; border: 0px currentColor; border-image: none;
}
.twitter-nav-link span {
	border-bottom-color: rgb(146, 171, 205); border-bottom-width: 1px; border-bottom-style: solid;
}
.navigation a:hover {
	border-bottom-color: rgb(204, 0, 0);
}
.twitter-nav-link:hover span {
	border-bottom-color: rgb(204, 0, 0);
}
.twitter-nav-link::before {
	background: url("../test/twitter.svg") no-repeat 0px 0.1em / 0.7em 0.7em; width: 0.8em; height: 0.8em; margin-right: 0.1em; display: inline-block; content: "";
}
h2 {
	line-height: 1.1; font-size: 32px; font-weight: 600; margin-bottom: 12px;
}
h3 {
	margin: 0px 0px 8px; line-height: 24px; font-size: 18px; font-weight: 600;
}
strong {
	font-weight: 600;
}
span.highlight {
	background: rgb(246, 243, 226);
}
.title-block p {
	line-height: 28px; font-size: 22px; margin-bottom: 24px; max-width: 600px;
}
p {
	color: rgb(68, 68, 68);
}
ul.text-list {
	color: rgb(68, 68, 68);
}
.section--head p {
	color: rgb(102, 102, 102);
}
.title-block p {
	color: rgb(102, 102, 102);
}
.title-block p {
	line-height: 29px; font-size: 19px;
}
.section {
	width: 100%; margin-top: 176px;
}
.docs {
	margin-top: 60px;
}
.section--head {
	background: rgb(238, 238, 238); margin: 0px; padding: 132px 0px;
}
.row {
	margin: 24px auto; padding: 0px 30px; position: relative; max-width: 800px;
}
.row--docs {
	padding-left: 210px; max-width: 960px;
}
.row--heading {
	margin-top: 0px; margin-bottom: 0px;
}
.row--footer {
	padding: 132px 0px; text-align: center;
}
.row--wide {
	max-width: 1000px;
}
.row--video {
	max-width: 1160px;
}
.row--wide img {
	margin: 0px 12px 12px 0px; width: 200px; float: left;
}
img.img--with_border {
	border-radius: 2px; border: 1px solid rgb(221, 221, 221); border-image: none;
}
.img-desc {
	margin-left: 212px;
}
.row::after {
	height: 0px; clear: both; display: block; visibility: hidden; content: " ";
}
.row--large {
	margin-bottom: 48px;
}
.section--head h1 a {
	font-size: 14px; text-decoration: none; vertical-align: super;
}
.col-50 {
	width: 48%; float: left;
}
:nth-child(1).col-50 {
	margin-right: 4%;
}
.col-img {
	width: auto; height: auto; max-width: 100%;
}
.style-select {
	width: 100%; float: left;
}
.style-select .radio {
	width: 100%; margin-bottom: 12px; float: left; display: block; position: relative;
}
.style-select label {
	padding-left: 24px; display: block; position: relative; cursor: pointer;
}
.style-select input {
	margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; border-image: none; left: 0px; top: 0px; width: 24px; height: 24px; overflow: hidden; position: absolute; cursor: pointer; opacity: 0;
}
.style-select input + label::before {
	background: none; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.6); border-image: none; left: 0px; top: 4px; width: 16px; height: 16px; position: absolute; content: ""; box-sizing: border-box;
}
.radio:hover label::before {
	border-color: rgb(49, 105, 179);
}
.style-select input:checked + label::before {
	border-color: rgb(49, 105, 179);
}
.style-select input:checked + label::after {
	background: rgb(49, 105, 179); border-radius: 50%; left: 5px; top: 9px; width: 6px; height: 6px; position: absolute; content: "";
}
.row--modules ul {
	list-style: none; margin-left: 0px;
}
.row--modules span {
	padding-left: 5px; margin-left: -10px; border-left-color: rgb(255, 255, 255); border-left-width: 5px; border-left-style: solid; font-wight: 600;
}
.size-chart {
	width: 100%; display: inline-block;
}
.size-chart div {
	padding: 4px; height: 21px; line-height: 1; font-size: 13px; float: left;
}
.block__ui-separated {
	position: relative;
}
.block__ui-separated .col-50 {
	left: 0px; top: 12px; position: absolute;
}
.block__ui-separated img {
	float: right; max-width: 450px;
}
.demo-gallery {
	width: 100%; height: auto; float: left;
}
.demo-gallery a {
	margin: 0px 12px 12px 0px; width: 171px; line-height: 0; float: left; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none;
}
a.demo-gallery__img--main {
	width: auto; height: auto;
}
.ukraine-flag {
	background: rgb(255, 204, 0); top: 1px; width: 21px; height: 14px; display: inline-block; position: relative;
}
.ukraine-flag::before {
	background: rgb(0, 102, 204); left: 0px; top: 0px; width: 21px; height: 7px; position: absolute; content: "";
}
.demo-gallery figure {
	display: none;
}
.demo-gallery__title {
	width: 100%; line-height: 14px; font-size: 14px; margin-top: 5px; float: left; opacity: 0.8;
}
.share-buttons h2 {
	border: 0px currentColor; border-image: none; text-align: center;
}
.share-buttons {
	margin: 0px 0px 24px; text-align: center; position: relative;
}
.share-buttons a {
	background: rgb(90, 175, 99); margin: 10px; padding: 10px 20px; border-radius: 2px; color: rgb(255, 255, 255); line-height: 22px; font-size: 16px; text-decoration: none; display: inline-block; cursor: pointer; -moz-border-radius: 2px;
}
.share-buttons a:hover {
	opacity: 0.7;
}
#tweet {
	background: rgb(0, 150, 196);
}
#like {
	background: rgb(59, 89, 152);
}
#gplus {
	background: rgb(211, 72, 54);
}
@media screen and (max-width:1000px)
{
.row--wide {
	max-width: 800px;
}
.row--wide img {
	float: none;
}
.img-desc {
	margin-left: 0px;
}
.section {
	margin-top: 132px;
}
.row--docs {
	padding-left: 30px; max-width: 800px;
}
.section--head {
	padding: 30px 0px; margin-top: 0px;
}
.docs {
	margin-top: 48px;
}
.docs-menu {
	margin: 15px 0px; left: 0px; top: 0px; position: relative;
}
.docs-menu ul {
	position: relative;
}
.docs-menu__ad {
	display: none;
}
.row--nav {
	line-height: 1.1; font-size: 24px;
}
}
@media screen and (max-width:650px)
{
h1 {
	font-size: 40px;
}
.block__ui-separated .col-50 {
	top: 0px; position: relative;
}
.block__ui-separated img {
	width: 100%; float: left; max-width: 100%;
}
}
@media screen and (max-width:450px)
{
:nth-child(1).col-50 {
	margin-right: 0px;
}
.row--wide img {
	margin-bottom: 6px;
}
.col-50 {
	width: 100%; margin-bottom: 12px;
}
.row {
	padding: 0px 18px;
}
.docs .highlight {
	padding-right: 18px; padding-left: 18px; margin-left: -18px;
}
.codepen-embed {
	padding-right: 18px; padding-left: 18px; margin-left: -18px;
}
.section {
	margin-top: 88px;
}
.docs {
	margin-top: 32px;
}
.section--head {
	padding: 24px 0px; margin-top: 0px;
}
.row--nav {
	line-height: 26px; font-size: 18px;
}
}
@media screen and (max-width:700px)
{
.row--nav {
	line-height: 26px; font-size: 18px;
}
.demo-gallery {
	max-width: 500px;
}
.demo-gallery a {
	margin: 0px 4px 4px 0px; width: 120px;
}
a.demo-gallery__img--main {
	width: 164px;
}
.section--head p {
	line-height: 24px; font-size: 18px;
}
}
@media screen and (max-width:450px)
{
.demo-gallery a {
	margin: 0px 1px 1px 0px; width: 95px;
}
a.demo-gallery__img--main {
	width: 127px;
}
}
@media screen and (max-width:350px)
{
.demo-gallery a {
	margin: 0px 1px 1px 0px; width: 81px;
}
a.demo-gallery__img--main {
	width: 109px;
}
}