html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]-moz-focusring,
[type=reset]-moz-focusring,
[type=submit]-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body,
html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

html {
    font-size: 62.5%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    background-color: #fff;
    color: #212529;
    padding: 0;
    margin: 0;
    overflow-x: hidden
}

.feather {
    text-align: bottom
}

.article-entry {
    line-height: 1.75
}

.article-entry a {
    text-decoration: none;
    padding-bottom: .1rem;
    border-bottom: .2rem solid rgba(122, 56, 24, .25);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.article-entry a:hover {
    border-bottom-color: rgba(122, 56, 24, .75)
}

.article-entry a:active {
    border-bottom-style: dashed
}

.article-entry strong {
    font-weight: 700
}

.article-entry cite,
.article-entry em {
    font-style: italic;
    color: #6c757d
}

.article-entry sub,
.article-entry sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

.article-entry sup {
    top: -.5rem
}

.article-entry sub {
    bottom: -.25rem
}

.article-entry small {
    font-size: 85%
}

.article-entry mark {
    background-color: rgba(255, 255, 0, .25)
}

.article-entry abbr,
.article-entry acronym {
    border-bottom: .1rem #dee2e6 dotted
}

.article-entry dl,
.article-entry ol,
.article-entry ul {
    margin: 1.5rem 0;
    line-height: line-height
}

.article-entry ol,
.article-entry ul {
    padding-left: 1em
}

.article-entry ul {
    list-style-type: circle
}

.article-entry blockquote,
.article-entry p,
.article-entry table {
    margin: 1.5rem 0
}

.article-entry img,
.article-entry video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto
}

.article-entry iframe {
    border: none
}

.article-entry table {
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    empty-cells: show;
    text-align: left
}

.article-entry table,
.article-entry table td,
.article-entry table th {
    border: .1rem #dee2e6 solid
}

.article-entry table td,
.article-entry table th {
    padding: 1rem
}

.article-entry table tbody tr:nth-child(2n) {
    background-color: #f8f9fa
}

.article-entry hr {
    border: none;
    border-bottom: .1rem #dee2e6 solid;
    margin: 1rem 0
}

.article-entry blockquote {
    position: relative;
    display: block;
    padding-left: 2rem;
    width: 100%;
    overflow: auto;
    border-left: .4rem #f7c17f solid;
    color: #6c757d
}

.article-entry blockquote p {
    margin: 0
}

.article-entry blockquote footer cite:before {
    content: "—";
    padding: 0 .5rem
}

dl,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
ul {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 1rem
}

ul {
    list-style: disc
}

ol {
    list-style: decimal
}

dt {
    font-weight: 700
}

strong {
    font-weight: 700
}

cite,
em {
    font-style: italic
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.2em
}

small {
    font-size: 85%
}

abbr,
acronym {
    border-bottom: 1px dotted
}

a {
    color: #3385ff;
    text-decoration: none
}

a:hover {
    color: #3385ff
}

a:active {
    color: #6e3216
}

a.disabled {
    color: #6c757d
}

.h1,
h1 {
    font-size: 4rem
}

.h2,
h2 {
    font-size: 3.2rem
}

.h3,
h3 {
    font-size: 2.8rem
}

.h4,
h4 {
    font-size: 2.4rem
}

.h5,
h5 {
    font-size: 2rem
}

.h6,
h6 {
    font-size: 1.6rem
}

.hr {
    border: none;
    border-bottom: .1rem #dee2e6 solid;
    margin: 1rem 0
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.font-w-normal {
    font-weight: 400
}

.font-w-bold {
    font-weight: 700
}

.font-w-bolder {
    font-weight: bolder
}

.font-w-lighter {
    font-weight: lighter
}

.text-primary {
    color: #3385ff !important
}

.bg-primary {
    background-color: #3385ff !important
}

.btn-primary {
    background-color: #3385ff;
    border-color: #3385ff
}

.btn-primary:hover {
    background-color: #3385ff
}

.text-secondary {
    color: #f7c17f !important
}

.bg-secondary {
    background-color: #f7c17f !important
}

.btn-secondary {
    background-color: #f7c17f;
    border-color: #f7c17f
}

.btn-secondary:hover {
    background-color: #f8c78c
}

.text-success {
    color: #00bf6f !important
}

.bg-success {
    background-color: #00bf6f !important
}

.btn-success {
    background-color: #00bf6f;
    border-color: #00bf6f
}

.btn-success:hover {
    background-color: #00df82
}

.text-danger {
    color: #e8440a !important
}

.bg-danger {
    background-color: #e8440a !important
}

.btn-danger {
    background-color: #e8440a;
    border-color: #e8440a
}

.btn-danger:hover {
    background-color: #f55218
}

.text-warning {
    color: #ef8200 !important
}

.bg-warning {
    background-color: #ef8200 !important
}

.btn-warning {
    background-color: #ef8200;
    border-color: #ef8200
}

.btn-warning:hover {
    background-color: #ff900b
}

.text-info {
    color: #59cbe8 !important
}

.bg-info {
    background-color: #59cbe8 !important
}

.btn-info {
    background-color: #59cbe8;
    border-color: #59cbe8
}

.btn-info:hover {
    background-color: #6ad0ea
}

.text-light {
    color: #f8f9fa !important
}

.bg-light {
    background-color: #f8f9fa !important
}

.btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-light:hover {
    background-color: #f9fafa
}

.text-gray {
    color: #6c757d !important
}

.bg-gray {
    background-color: #6c757d !important
}

.btn-gray {
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-gray:hover {
    background-color: #79838b
}

.text-dark {
    color: #212529 !important
}

.bg-dark {
    background-color: #212529 !important
}

.btn-dark {
    background-color: #212529;
    border-color: #212529
}

.btn-dark:hover {
    background-color: #343b41
}

.text-white {
    color: #fff !important
}

.bg-white {
    background-color: #fff !important
}

.btn-white {
    background-color: #fff;
    border-color: #fff
}

.btn-white:hover {
    background-color: #fff
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-1 {
    -webkit-line-clamp: 1
}

.line-clamp-2 {
    -webkit-line-clamp: 2
}

.line-clamp-3 {
    -webkit-line-clamp: 3
}

.line-clamp-4 {
    -webkit-line-clamp: 4
}

.line-clamp-5 {
    -webkit-line-clamp: 5
}

.clearfix::after,
.clearfix::before {
    content: "";
    display: table;
    clear: both
}

.img-fluid {
    min-width: 100%;
    max-width: 100%
}

.feather {
    vertical-align: text-top
}

.currency::before {
    content: attr(data-currency);
    font-size: 50%;
    font-weight: 400;
    margin-right: .25rem
}

.blockquote {
    position: relative;
    margin-right: auto;
    margin-left: auto
}

@media screen and (min-width:768px) {
    .blockquote {
        width: 80%
    }
}

.blockquote .blockquote-body {
    position: relative;
    padding: 1rem 5rem
}

.blockquote .blockquote-body::before {
    position: absolute;
    top: 0;
    left: 0;
    content: url("../images/icons/quotes_before.svg")
}

.blockquote .blockquote-body::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: url("../images/icons/quotes_after.svg")
}

.blockquote .blockquote-footer {
    display: block;
    font-style: italic;
    color: #6c757d
}

.blockquote .blockquote-footer::before {
    content: '—';
    margin-right: 1rem;
    display: inline-block;
    width: 1.6rem
}

.article-title,
.page-type-title {
    position: relative;
    font-weight: 400
}

.page-type-title {
    font-size: 3.2rem
}

.btn {
    display: inline-block;
    border-width: .1rem;
    border-color: transparent;
    border-radius: .4rem;
    padding: 1rem 2rem;
    cursor: pointer
}

.btn-sm {
    padding: 1rem
}

.btn-lg {
    padding: 1rem 3rem
}

.btn-block {
    display: block;
    width: 100%
}

.container,
.container-fluid {
    position: relative;
    margin: 0 auto
}

.container {
    max-width: 114rem;
    padding-right: 1rem;
    padding-left: 1rem
}

@media screen and (min-width:114rem) {
    .container {
        padding-right: 0;
        padding-left: 0
    }
}

.container-full {
    max-width: 100%
}

.header {
    position: relative;
    z-index: 9;
    margin-bottom: 3rem;
    -webkit-box-shadow: 0 0 .1rem #dee2e6;
    box-shadow: 0 0 .1rem #dee2e6;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.header .brand {
    position: relative;
    z-index: 9
}

.header .brand .logo {
    height: 4rem
}

.header.header-absolute,
.header.header-fixed {
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%
}

.header.header-absolute {
    position: absolute
}

.header.header-absolute .main-nav .nav-item-link {
    color: #f8f9fa
}

.header.header-fixed {
    position: fixed;
    background-color: #fff
}

.navbar {
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.navbar .main-nav {
    display: none
}

.navbar .search-input {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (min-width:768px) {
    .navbar {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar .brand {
        margin-right: 5rem
    }

    .navbar .main-nav {
        display: block
    }
}

.main-nav {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 1rem 0
}

.main-nav .nav-item {
    display: inline-block;
    position: relative
}

.main-nav .nav-item .nav-item-link {
    display: inline-block;
    padding: 1rem;
    color: #212529
}

.main-nav .nav-item.active .nav-item-link {
    color: #3385ff
}

#mobile-nav-toggle {
    position: absolute;
    z-index: 9;
    bottom: 0;
    top: 0;
    left: 1rem;
    width: 24px;
    height: 19.200000000000003px;
    margin: auto;
    opacity: .5;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

#mobile-nav-toggle:active,
.mobile-nav-on #mobile-nav-toggle {
    opacity: 1
}

@media screen and (min-width:768px) {
    #mobile-nav-toggle {
        display: none
    }
}

.mobile-nav-toggle-bar {
    background: #212529;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    -webkit-transform-origin: 0;
    transform-origin: 0;
    border-radius: 2px
}

.mobile-nav-toggle-bar:first-child {
    top: 0
}

.mobile-nav-on .mobile-nav-toggle-bar:first-child {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.mobile-nav-toggle-bar:nth-child(2) {
    top: 8.600000000000001px
}

.mobile-nav-on .mobile-nav-toggle-bar:nth-child(2) {
    opacity: 0
}

.mobile-nav-toggle-bar:last-child {
    top: 17.200000000000003px
}

.mobile-nav-on .mobile-nav-toggle-bar:last-child {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.header-absolute .mobile-nav-toggle-bar {
    background: #fff
}

#mobile-nav-dimmer {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.mobile-nav-on #mobile-nav-dimmer {
    width: 100%;
    opacity: .7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

#mobile-nav {
    position: fixed;
    top: 0;
    width: 26rem;
    left: -26rem;
    height: 100%;
    background: #212529;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.mobile-nav-on #mobile-nav {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

#mobile-nav-inner {
    overflow-y: auto;
    padding: 1rem 0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch
}

.mobile-nav {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 1rem 0
}

.mobile-nav .nav-item {
    display: block;
    position: relative
}

.mobile-nav .nav-item .nav-item-link {
    display: block;
    padding: 1rem;
    color: #f8f9fa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mobile-nav .nav-item.active .nav-item-link {
    color: #3385ff
}

.mobile-docs_menus .menu h6 {
    padding: 0 1rem;
    margin: 0
}

.mobile-docs_menus .menu .menu-item .menu-item-link {
    display: block;
    padding: 1rem;
    color: #f8f9fa
}

.main {
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    height: 100%;
    -webkit-overflow-scrolling: touch
}

.mobile-nav-on .main {
    -webkit-transform: translateX(26rem);
    transform: translateX(26rem);
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0
}

.footer {
    position: relative;
    background-color: #f2f9ff;
    color: #000000
}

.footer a {
    color: #000000
}

.footer a:hover {
    color: #000000
}

.banner {
    position: relative;
    height: 20rem;
    border-radius: .4rem;
    background-size: cover;
    background-position: center;
    background-image: url("../images/banner.jpg");
    overflow: hidden
}

.banner::before {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background-color: rgba(18, 8, 4, .5)
}

.banner .banner-text {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #f8f9fa
}

.banner .banner-text .page-type-title {
    padding: 0;
    font-weight: 400;
    font-size: 3.2rem
}

.carousel {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.carousel .carousel-radio[type=radio] {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.carousel .carousel-radio[type=radio]::after {
    -webkit-transition: none;
    transition: none
}

.carousel .carousel-radio[type=radio]+.carousel-indicators {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    display: inline-block;
    margin: 2rem .5rem 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #dee2e6
}

.carousel .carousel-radio[type=radio]+.carousel-indicators+.carousel-inner {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: none
}

.carousel .carousel-radio[type=radio]:checked+.carousel-indicators {
    background-color: #3385ff
}

.carousel .carousel-radio[type=radio]:checked+.carousel-indicators+.carousel-inner {
    display: block
}

.section .section-heading {
    position: relative;
    padding-bottom: 1rem;
    color: #3385ff
}

.section .section-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    width: 5rem;
    height: .3rem;
    background-color: #f7c17f;
    border-radius: .3rem
}

.card {
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.card .card-img {
    display: block;
    max-width: 100%;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.card .card-body,
.card .card-footer {
    padding: 2rem
}

.card .card-body .archive-article-title+time {
    display: inline-block;
    margin-bottom: 1rem
}

.card .card-text,
.card .card-text>p {
    min-height: 4.800000000000001rem;
    margin-bottom: 0
}

.card:hover .card-img {
    opacity: .8
}

.instapic {
    margin: -1rem
}

.instapic .brand-img {
    padding: 1rem;
    height: 6.4rem
}

.archive-year-wrap {
    padding: 1rem 0;
    margin-bottom: 1rem;
    font-size: 2.4rem
}

.archive-year-wrap .archive-year {
    color: #6c757d
}

.artcle-cover {
    position: relative;
    max-height: 20rem;
    border-radius: .4rem;
    overflow: hidden
}

.artcle-cover .artcle-cover-img {
    position: relative;
    min-height: 100%;
    max-width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.article-inner {
    padding: 1rem
}

@media screen and (min-width:768px) {
    .article-inner {
        max-width: 80rem;
        margin-right: auto;
        margin-left: auto
    }
}

.article-header {
    margin-bottom: 1rem
}

.article-more-link {
    margin-bottom: 0
}

.article-tag-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    position: relative;
    padding-left: 1em
}

.article-tag-list::before {
    content: '';
    background-size: cover;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'></path><line x1='7' y1='7' x2='7.01' y2='7'></line></svg>");
    width: 1em;
    height: 1em;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.article-tag-list .article-tag-list-item {
    display: inline-block;
    padding: 1rem
}

.article-nav {
    border-top: .1rem #dee2e6 solid
}

.article-nav::after,
.article-nav::before {
    content: "";
    display: table;
    clear: both
}

.article-nav .article-nav-link-wrap#article-nav-newer {
    float: left;
    text-align: left
}

.article-nav .article-nav-link-wrap#article-nav-older {
    float: right;
    text-align: right
}

.article-nav .article-nav-link-wrap .article-nav-caption {
    color: #212529
}

.article-author-avatar {
    width: 2.4em;
    height: 2.4em;
    border-radius: 2.4em
}

.album-grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-gap: 1rem
}

.album-grid .album-grid-item {
    position: relative;
    overflow: hidden;
    padding-bottom: 100%
}

.album-grid-6 {
    grid-template-columns: repeat(2, 1fr)
}

@media screen and (min-width:768px) {
    .album-grid-6 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (min-width:992px) {
    .album-grid-6 {
        grid-template-columns: repeat(4, 1fr)
    }

    .album-grid-6 .album-grid-item:nth-of-type(1) {
        grid-column-start: span 2;
        padding-bottom: 50%
    }

    .album-grid-6 .album-grid-item:nth-of-type(2) {
        grid-row-start: span 2
    }
}

.album-grid-5 {
    grid-template-columns: repeat(2, 1fr)
}

.album-grid-5 .album-grid-item:nth-of-type(2) {
    grid-column-start: span 2;
    padding-bottom: 50%
}

@media screen and (min-width:768px) {
    .album-grid-5 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (min-width:992px) {
    .album-grid-5 {
        grid-template-columns: repeat(4, 1fr)
    }

    .album-grid-5 .album-grid-item:nth-of-type(1) {
        grid-row-start: span 2
    }

    .album-grid-5 .album-grid-item:nth-of-type(5) {
        grid-column-start: span 2;
        padding-bottom: 50%
    }
}

.album-grid-4 {
    grid-template-columns: repeat(6, 1fr)
}

.album-grid-4 .album-grid-item:nth-of-type(1),
.album-grid-4 .album-grid-item:nth-of-type(4) {
    grid-column-start: span 4;
    padding-bottom: 50%
}

.album-grid-4 .album-grid-item:nth-of-type(2),
.album-grid-4 .album-grid-item:nth-of-type(3) {
    grid-column-start: span 2;
    padding-bottom: 50%
}

.album-grid-3 {
    grid-template-columns: repeat(3, 1fr)
}

.album-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem
}

.album-art .album-art-text,
.album-art::after {
    position: absolute;
    left: 0
}

.album-art::after {
    content: '';
    z-index: 2;
    top: 0;
    background-color: #f8f9fa;
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.album-art .album-art-text {
    z-index: 3;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    color: #212529;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.album-art:hover::after {
    opacity: .75
}

.album-art:hover .album-art-text {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

code,
pre {
    font-family: 'Fira Code', monospace;
    background: #eee;
    font-size: .95em;
    line-height: 20px
}

code {
    padding: 0 5px
}

pre {
    padding: 10px 15px
}

pre code {
    border: none;
    display: block;
    padding: 0
}

.highlight {
    background: #2d2d2d;
    color: #ccc;
    overflow: auto;
    margin: 0;
    font-size: 1.4rem
}

.highlight table {
    margin: 0 !important;
    border: 0
}

.highlight table td,
.highlight table th {
    padding: 0
}

.highlight figcaption {
    margin: -5px 0 5px;
    font-size: .9em;
    color: #6c757d
}

.highlight figcaption::after,
.highlight figcaption::before {
    content: "";
    display: table;
    clear: both
}

.highlight figcaption a {
    float: right
}

.highlight pre {
    padding: 0;
    border: none;
    background: 0 0
}

.highlight .line {
    height: 20px
}

pre .comment,
pre .title {
    color: #999
}

pre .attribute,
pre .css .class,
pre .css .id,
pre .css .pseudo,
pre .html .doctype,
pre .regexp,
pre .ruby .constant,
pre .tag,
pre .variable,
pre .xml .doctype,
pre .xml .pi,
pre .xml .tag .title {
    color: #f2777a
}

pre .built_in,
pre .constant,
pre .literal,
pre .number,
pre .params,
pre .preprocessor {
    color: #f99157
}

pre .class,
pre .css .rules .attribute,
pre .ruby .class .title {
    color: #9c9
}

pre .header,
pre .inheritance,
pre .ruby .symbol,
pre .string,
pre .value,
pre .xml .cdata {
    color: #9c9
}

pre .css .hexcolor {
    color: #6cc
}

pre .coffeescript .title,
pre .function,
pre .javascript .title,
pre .perl .sub,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword {
    color: #69c
}

pre .javascript .function,
pre .keyword {
    color: #c9c
}

pre .marked {
    background: #3385ff;
    color: rgba(255, 255, 255, .8)
}

pre .deletion {
    background: #ffeef0;
    color: #b31d28
}

pre .addition {
    background: #f0fff4;
    color: #22863a
}

code {
    display: inline-block;
    border-radius: .4rem
}

.highlight {
    border-radius: .4rem;
    margin: 1rem 0;
    padding: 1rem 0;
    overflow: auto
}

.highlight pre {
    margin: 0
}

.highlight table {
    width: auto
}

.highlight table,
.highlight table td,
.highlight table th,
.highlight table tr {
    border: none
}

.highlight table .code,
.highlight table .gutter {
    padding: .5rem 1rem
}

.highlight table .gutter {
    text-align: right;
    color: #6c757d !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.highlight figcaption {
    padding: .5rem 1rem;
    margin-bottom: 0;
    border-bottom: .1rem #dee2e6 solid
}

.learn-more {
    position: absolute;
    z-index: 2;
    bottom: 1rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: twinkling 3s linear infinite;
    animation: twinkling 3s linear infinite
}

.learn-more a {
    display: inline-block;
    color: #f8f9fa;
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.jumbotron {
    height: auto
}

.video {
    position: relative;
    height: auto
}

.video-media {
    position: relative;
    z-index: 0;
    height: 100vh;
    overflow: hidden
}

.video-media img,
.video-media video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%
}

.video-media article {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(18, 8, 4, .85)
}

.video-media article .article-inset {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    color: #f8f9fa;
    text-align: center;
    font-size: large
}

.video-frame {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 100%
}

.video-frame img {
    display: block;
    width: 100%;
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transform-origin: top center;
    transform-origin: top center
}

.player {
    position: relative
}

.player .player_1,
.player .player_2 {
    position: absolute;
    width: 16rem
}

.player .player_1 {
    bottom: 0;
    left: -10%;
    -webkit-animation: fly 5s ease-in-out infinite;
    animation: fly 5s ease-in-out infinite
}

.player .player_2 {
    right: -10%;
    top: 0;
    -webkit-animation: fly 5s linear infinite;
    animation: fly 5s linear infinite
}

.hero {
    background-color: #fff
}

.hero-figure {
    position: relative;
    z-index: 0;
    height: 90vh;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.hero-figure::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(18, 8, 4, .5)
}

.hero-figure figcaption {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    color: #f8f9fa;
    text-align: center;
    font-size: large
}

.hero-figure-img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    max-height: 100%
}

@-webkit-keyframes fly {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(5%);
        transform: translateY(5%)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fly {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(5%);
        transform: translateY(5%)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes twinkling {
    0% {
        opacity: .25
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .25
    }
}

@keyframes twinkling {
    0% {
        opacity: .25
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .25
    }
}

.page-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem
}

@media screen and (min-width:768px) {
    .page-heading {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.docs_wrap::after,
.docs_wrap::before {
    content: "";
    display: table;
    clear: both
}

.docs_article,
.docs_sidebar {
    position: relative
}

.docs_sidebar {
    display: none;
    float: left;
    width: 20rem;
    margin-left: -20rem
}

.docs_article {
    float: right;
    width: 100%
}

@media screen and (min-width:992px) {
    .docs_wrap {
        margin-left: 20rem
    }

    .docs_sidebar {
        display: block
    }
}

.docs-nav {
    border-top: .1rem #dee2e6 solid
}

.docs-nav::after,
.docs-nav::before {
    content: "";
    display: table;
    clear: both
}

.docs-nav .docs-nav-next,
.docs-nav .docs-nav-prev {
    display: inline-block;
    padding: 1rem
}

.docs-nav .docs-nav-prev {
    float: left
}

.docs-nav .docs-nav-next {
    float: right
}

.menu {
    list-style: none;
    padding-left: 0;
    margin-left: 0
}

.menu .menu-item {
    position: relative
}

.menu .menu-item .menu-item-link {
    display: inline-block;
    padding: .25rem 0;
    color: #6c757d
}

.menu .menu-item.active .menu-item-link {
    color: #3385ff
}

.js-toc {
    display: none;
    position: sticky;
    float: right;
    top: 0;
    width: 18rem;
    border-left: .1rem #dee2e6 solid;
    font-size: 1.4rem
}

.js-toc-content {
    position: relative
}

@media screen and (min-width:992px) {
    .js-toc {
        display: block
    }

    .js-toc-content {
        margin-right: 20rem
    }
}

.toc-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-left: 2rem
}

.toc-list .toc-list-item {
    position: relative
}

.toc-list .toc-list-item .toc-link {
    display: inline-block;
    padding: .25rem 0;
    color: #6c757d
}

.toc-list .toc-list-item.is-active-li>.toc-link {
    color: #3385ff
}

.toc-list .toc-list-item>.toc-list {
    margin-left: 1em
}

.toc-list .toc-list-item>.toc-list .toc-list-item {
    list-style-type: '-';
    padding-left: .5rem
}

.toc-list .toc-list-item>.toc-list .toc-list-item::marker {
    color: #6c757d
}

.d-inline {
    display: inline
}

.d-inline-block {
    display: inline-block
}

.d-block {
    display: block
}

.d-grid {
    display: grid
}

.d-table {
    display: table
}

.d-table-row {
    display: table-row
}

.d-table-cell {
    display: table-cell
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.d-inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.d-none {
    display: none
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.justify-content-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

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

.justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.justify-content-evenly {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.align-items-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.align-content-start {
    -ms-flex-line-pack: start;
    align-content: flex-start
}

.align-content-end {
    -ms-flex-line-pack: end;
    align-content: flex-end
}

.align-content-center {
    -ms-flex-line-pack: center;
    align-content: center
}

.align-content-between {
    -ms-flex-line-pack: justify;
    align-content: space-between
}

.align-content-around {
    -ms-flex-line-pack: distribute;
    align-content: space-around
}

.align-content-stretch {
    -ms-flex-line-pack: stretch;
    align-content: stretch
}

.align-self-auto {
    -ms-flex-item-align: auto;
    align-self: auto
}

.align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start
}

.align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end
}

.align-self-center {
    -ms-flex-item-align: center;
    align-self: center
}

.align-self-baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline
}

.align-self-stretch {
    -ms-flex-item-align: stretch;
    align-self: stretch
}

@media screen and (min-width:768px) {
    .item-order-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

@media screen and (min-width:768px) {
    .item-order-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
}

@media screen and (min-width:768px) {
    .item-order-3 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
}

@media screen and (min-width:768px) {
    .item-order-4 {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4
    }
}

@media screen and (min-width:768px) {
    .item-order-5 {
        -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
        order: 5
    }
}

@media screen and (min-width:768px) {
    .item-order-6 {
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6
    }
}

.row,
.row-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: -1rem
}

.row .col,
.row-row .col {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem
}

.col-1 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-1 {
        width: 8.333333333333332%
    }
}

.col-2 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-2 {
        width: 16.666666666666664%
    }
}

.col-3 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-3 {
        width: 25%
    }
}

.col-4 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-4 {
        width: 33.33333333333333%
    }
}

.col-5 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-5 {
        width: 41.66666666666667%
    }
}

.col-6 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-6 {
        width: 50%
    }
}

.col-7 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-7 {
        width: 58.333333333333336%
    }
}

.col-8 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-8 {
        width: 66.66666666666666%
    }
}

.col-9 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-9 {
        width: 75%
    }
}

.col-10 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-10 {
        width: 83.33333333333334%
    }
}

.col-11 {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:768px) {
    .col-11 {
        width: 91.66666666666666%
    }
}

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

@media screen and (min-width:768px) {
    .col-12 {
        width: 100%
    }
}

.row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (min-width:768px) {
    .row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.row-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.row-row .col-1 {
    width: 8.333333333333332%
}

.row-row .col-2 {
    width: 16.666666666666664%
}

.row-row .col-3 {
    width: 25%
}

.row-row .col-4 {
    width: 33.33333333333333%
}

.row-row .col-5 {
    width: 41.66666666666667%
}

.row-row .col-6 {
    width: 50%
}

.row-row .col-7 {
    width: 58.333333333333336%
}

.row-row .col-8 {
    width: 66.66666666666666%
}

.row-row .col-9 {
    width: 75%
}

.row-row .col-10 {
    width: 83.33333333333334%
}

.row-row .col-11 {
    width: 91.66666666666666%
}

.row-row .col-12 {
    width: 100%
}

.no-gutters .col,
.no-gutters .col-1,
.no-gutters .col-10,
.no-gutters .col-11,
.no-gutters .col-12,
.no-gutters .col-2,
.no-gutters .col-3,
.no-gutters .col-4,
.no-gutters .col-5,
.no-gutters .col-6,
.no-gutters .col-7,
.no-gutters .col-8,
.no-gutters .col-9 {
    padding: 0
}

.no-gutters {
    margin: 0
}

.list,
.list-inline {
    list-style: none;
    padding-left: 0;
    margin-left: 0
}

.list-inline {
    position: relative;
    margin: 0 -1rem
}

.list-inline .list-inline-item {
    display: inline-block;
    padding-right: 1rem;
    padding-left: 1rem
}

.w-25 {
    width: 25%
}

.h-25 {
    height: 25%
}

.w-50 {
    width: 50%
}

.h-50 {
    height: 50%
}

.w-75 {
    width: 75%
}

.h-75 {
    height: 75%
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.w-auto {
    width: auto
}

.h-auto {
    height: auto
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.m-a {
    margin: auto !important
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.mx-1 {
    margin-right: .25rem !important;
    margin-left: .25rem !important
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important
}

.mx-a {
    margin-right: auto !important;
    margin-left: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-a {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-a {
    margin-top: auto !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: .25rem !important
}

.mr-2 {
    margin-right: .5rem !important
}

.mr-3 {
    margin-right: 1rem !important
}

.mr-4 {
    margin-right: 1.5rem !important
}

.mr-5 {
    margin-right: 3rem !important
}

.mr-a {
    margin-right: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-a {
    margin-bottom: auto !important
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: .25rem !important
}

.ml-2 {
    margin-left: .5rem !important
}

.ml-3 {
    margin-left: 1rem !important
}

.ml-4 {
    margin-left: 1.5rem !important
}

.ml-5 {
    margin-left: 3rem !important
}

.ml-a {
    margin-left: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.p-a {
    padding: auto !important
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important
}

.px-1 {
    padding-right: .25rem !important;
    padding-left: .25rem !important
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important
}

.px-a {
    padding-right: auto !important;
    padding-left: auto !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

.py-a {
    padding-top: auto !important;
    padding-bottom: auto !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-4 {
    padding-top: 1.5rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pt-a {
    padding-top: auto !important
}

.pr-0 {
    padding-right: 0 !important
}

.pr-1 {
    padding-right: .25rem !important
}

.pr-2 {
    padding-right: .5rem !important
}

.pr-3 {
    padding-right: 1rem !important
}

.pr-4 {
    padding-right: 1.5rem !important
}

.pr-5 {
    padding-right: 3rem !important
}

.pr-a {
    padding-right: auto !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.pb-a {
    padding-bottom: auto !important
}

.pl-0 {
    padding-left: 0 !important
}

.pl-1 {
    padding-left: .25rem !important
}

.pl-2 {
    padding-left: .5rem !important
}

.pl-3 {
    padding-left: 1rem !important
}

.pl-4 {
    padding-left: 1.5rem !important
}

.pl-5 {
    padding-left: 3rem !important
}

.pl-a {
    padding-left: auto !important
}

.border {
    border-style: solid;
    border-width: .1rem;
    border-color: #dee2e6
}

.border-none {
    border-style: none
}

.border-dotted {
    border-style: dotted
}

.border-solid {
    border-style: solid
}

.border-double {
    border-style: double
}

.border-dashed {
    border-style: dashed
}

.rounded-0 {
    border-radius: 0
}

.rounded {
    border-radius: .4rem
}

.rounded-spacer {
    border-radius: 1rem
}

.rounded-circle {
    border-radius: 50%
}

.rounded-top {
    border-top-left-radius: .4rem !important;
    border-top-right-radius: .4rem !important
}

.rounded-bottom {
    border-bottom-left-radius: .4rem !important;
    border-bottom-right-radius: .4rem !important
}

.shadow {
    -webkit-box-shadow: 0 .5rem 1rem rgba(33, 37, 41, .125);
    box-shadow: 0 .5rem 1rem rgba(33, 37, 41, .125)
}

.shadow-hover {
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.shadow-hover:hover {
    -webkit-box-shadow: 0 1rem 3rem rgba(33, 37, 41, .125);
    box-shadow: 0 1rem 3rem rgba(33, 37, 41, .125)
}

.tooltip-qrcode {
    position: relative
}

.tooltip-qrcode>.tooltip {
    position: absolute;
    z-index: 9;
    bottom: 100%;
    left: 50%;
    background-color: #3385ff;
    border-radius: .4rem;
    width: 12.8rem;
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -16px);
    transform: translate(-50%, -16px);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.tooltip-qrcode>.tooltip::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #3385ff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -4px;
    margin-bottom: -4px
}

.tooltip-qrcode:hover>.tooltip {
    opacity: 1;
    -webkit-transform: translate(-50%, -8px);
    transform: translate(-50%, -8px)
}

.filter-gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: #808080;
    filter: #808080
}

:root {
    --docsearch-primary-color: #3385ff;
    --docsearch-text-color: #1c1e21;
    --docsearch-spacing: 1rem;
    --docsearch-icon-stroke-width: 1.4;
    --docsearch-highlight-color: var(--docsearch-primary-color);
    --docsearch-muted-color: #969faf;
    --docsearch-container-background: rgba(101, 108, 133, 0.8);
    --docsearch-logo-color: var(--docsearch-muted-color);
    --docsearch-modal-width: 560px;
    --docsearch-modal-height: 600px;
    --docsearch-modal-background: #f5f6f7;
    --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 #555a64;
    --docsearch-searchbox-height: 4rem;
    --docsearch-searchbox-background: #ebedf0;
    --docsearch-searchbox-focus-background: #fff;
    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
    --docsearch-hit-height: 4rem;
    --docsearch-hit-color: #444950;
    --docsearch-hit-active-color: #fff;
    --docsearch-hit-background: #fff;
    --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
    --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
    --docsearch-footer-height: 4rem;
    --docsearch-footer-background: #fff;
    --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12)
}

.search-input {
    padding: 0
}

.DocSearch-Button {
    border-radius: .4rem;
    padding: 0 1rem;
    margin: 0;
    height: 3.2rem
}

.DocSearch-Button-Keys {
    padding-right: 0;
    margin-right: -.4em
}

.DocSearch-Button-Keys .DocSearch-Button-Key:last-child {
    margin-right: 0
}

.admonition {
    margin: 1rem 0;
    padding: 1rem;
    overflow: hidden;
    page-break-inside: avoid;
    border-left: .3rem solid #00bf6f;
    border-radius: .4rem;
    background-color: #f8f9fa
}

.admonition .admonition-title {
    position: relative;
    margin: -1rem !important;
    margin-bottom: 1rem !important;
    padding: .5rem;
    padding-left: 3rem;
    background-color: rgba(0, 191, 111, .1);
    font-weight: 500;
    color: #00bf6f
}

.admonition .admonition-title::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #00bf6f
}

.admonition p {
    margin: 0 !important
}

.admonition.info {
    border-color: #59cbe8
}

.admonition.info .admonition-title {
    background-color: rgba(89, 203, 232, .1);
    color: #59cbe8
}

.admonition.info .admonition-title::before {
    background-color: #59cbe8
}

.admonition.todo {
    border-color: #59cbe8
}

.admonition.todo .admonition-title {
    background-color: rgba(89, 203, 232, .1);
    color: #59cbe8
}

.admonition.todo .admonition-title::before {
    background-color: #59cbe8
}

.admonition.warning {
    border-color: #ef8200
}

.admonition.warning .admonition-title {
    background-color: rgba(239, 130, 0, .1);
    color: #ef8200
}

.admonition.warning .admonition-title::before {
    background-color: #ef8200
}

.admonition.attention {
    border-color: #ef8200
}

.admonition.attention .admonition-title {
    background-color: rgba(239, 130, 0, .1);
    color: #ef8200
}

.admonition.attention .admonition-title::before {
    background-color: #ef8200
}

.admonition.caution {
    border-color: #ef8200
}

.admonition.caution .admonition-title {
    background-color: rgba(239, 130, 0, .1);
    color: #ef8200
}

.admonition.caution .admonition-title::before {
    background-color: #ef8200
}

.admonition.failure {
    border-color: #e8440a
}

.admonition.failure .admonition-title {
    background-color: rgba(232, 68, 10, .1);
    color: #e8440a
}

.admonition.failure .admonition-title::before {
    background-color: #e8440a
}

.admonition.missing {
    border-color: #e8440a
}

.admonition.missing .admonition-title {
    background-color: rgba(232, 68, 10, .1);
    color: #e8440a
}

.admonition.missing .admonition-title::before {
    background-color: #e8440a
}

.admonition.fail {
    border-color: #e8440a
}

.admonition.fail .admonition-title {
    background-color: rgba(232, 68, 10, .1);
    color: #e8440a
}

.admonition.fail .admonition-title::before {
    background-color: #e8440a
}

.admonition.error {
    border-color: #e8440a
}

.admonition.error .admonition-title {
    background-color: rgba(232, 68, 10, .1);
    color: #e8440a
}

.admonition.error .admonition-title::before {
    background-color: #e8440a
}

.lazyload,
.lazyloading {
    opacity: 0
}

.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity;
    transition: opacity
}

.works {
    position: relative;
    margin: 1rem 0
}

.works-logo {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(4, 1fr)
}

@media screen and (min-width:768px) {
    .works-logo {
        grid-template-columns: repeat(6, 1fr)
    }
}

@media screen and (min-width:992px) {
    .works-logo {
        grid-template-columns: repeat(5, 1fr)
    }
}

.works-logo-item {
    margin: 0 !important;
    border-width: .05rem !important;
    background-color: #fff
}

.swiper {
    position: relative
}

.swiper .swiper-slide {
    position: relative;
    height: 100vh;
    max-height: 768px;
    overflow: hidden
}

.swiper-slider-inset {
    position: relative;
    z-index: 1;
    height: 100%
}

.swiper-slider-media {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.safari {
    background-color: #f8f9fa;
    border-radius: .4rem
}

.safari,
.safari .safari-body,
.safari .safari-header {
    position: relative;
    overflow: hidden
}

.safari-example {
    height: 36rem;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    background-image: url("../images/example.png")
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2) {
    .safari-example {
        background-image: url("../images/example@2x.png")
    }
}

.safari-btns {
    position: relative;
    background-color: #eb6b60
}

.safari-btns,
.safari-btns:after,
.safari-btns:before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem
}

.safari-btns:after,
.safari-btns:before {
    content: '';
    position: absolute
}

.safari-btns:before {
    left: 1.5rem;
    background-color: #f4be4f
}

.safari-btns:after {
    left: 3rem;
    background-color: #66c655
}