.navbar-burger, body, html {
    padding: 0;
    margin: 0
}

body, code {
    font-weight: 400
}

.navbar-burger, .navbar-link, a, a.navbar-item {
    cursor: pointer
}

.navbar-link:not(.is-arrowless)::after {
    border: 3px solid transparent;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: .625em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    width: .625em
}

.level:not(:last-child), .notification:not(:last-child), .w-tabs:not(:last-child) {
    margin-bottom: 1.5rem
}

.navbar-burger {
    color: currentColor;
    font-family: inherit;
    font-size: 1em
}



button, input, select, textarea {
    margin: 0
}

html {
    box-sizing: border-box;
    background-color: hsl(0deg, 0%, 100%);
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%
}

.notification, code {
    background-color: hsl(0deg, 0%, 96%)
}

*, ::after, ::before {
    box-sizing: inherit
}

img, video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article, aside, figure, footer, header, hgroup, section {
    display: block
}

body, button, input, optgroup, select, textarea {
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

code, pre {
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: auto;
    font-family: "Georgia", serif, monospace;
    color: #6a2cce;
}

body {
    color: hsl(0deg, 0%, 29%);
    font-size: 1em;
    line-height: 1.4
}

code, small {
    font-size: .875em
}

a {
    color: hsl(229deg, 53%, 53%);
    text-decoration: none
}

a strong {
    color: currentColor
}

code {
    color: #da1039;
    padding: .25em .5em
}

input[type=checkbox], input[type=radio] {
    vertical-align: baseline
}

.level img, .w-tabs a, table td, table th {
    vertical-align: top
}

span {
    font-style: inherit;
    font-weight: inherit
}

strong {
    font-weight: 700
}

fieldset {
    border: none
}

table td:not([align]), table th:not([align]) {
    text-align: inherit
}

.container {
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: auto
}

.container.is-fluid {
    max-width: none !important;
    padding-left: 32px;
    padding-right: 32px;
    width: 100%
}

@media screen and (min-width: 1024px) {
    .container {
        max-width: 960px
    }
}

@media screen and (max-width: 1215px) {
    .container.is-widescreen:not(.is-max-desktop) {
        max-width: 1152px
    }
}

@media screen and (max-width: 1407px) {
    .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 1344px
    }
}

@media screen and (min-width: 1216px) {
    .container:not(.is-max-desktop) {
        max-width: 1152px
    }
}

@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 1344px
    }

    .columns.is-variable.is-0-fullhd {
        --columnGap: 0rem
    }
}

.notification {
    border-radius: 4px;
    position: relative;
    padding: 1.25rem 2.5rem 1.25rem 1.5rem
}

.notification a:not(.button):not(.dropdown-item) {
    color: currentColor;
    text-decoration: underline
}

.notification strong {
    color: currentColor
}

.notification code, .notification pre {
    background: hsl(0deg, 0%, 100%)
}

.notification pre code {
    background: 0 0
}

.notification > .delete {
    right: .5rem;
    position: absolute;
    top: .5rem
}

.notification .content, .notification .subtitle, .notification .title {
    color: currentColor
}

.notification.is-white {
    background-color: hsl(0deg, 0%, 100%);
    color: hsl(0deg, 0%, 4%)
}

.notification.is-black {
    background-color: hsl(0deg, 0%, 4%);
    color: hsl(0deg, 0%, 100%)
}

.notification.is-light {
    background-color: hsl(0deg, 0%, 96%);
    color: rgba(0, 0, 0, .7)
}

.notification.is-dark {
    background-color: hsl(0deg, 0%, 21%);
    color: #fff
}

.notification.is-primary {
    background-color: hsl(171deg, 100%, 41%);
    color: #fff
}

.notification.is-primary.is-light {
    background-color: #ebfffc;
    color: #00947e
}

.notification.is-link {
    background-color: hsl(229deg, 53%, 53%);
    color: #fff
}

.notification.is-link.is-light {
    background-color: #eff1fa;
    color: #3850b7
}

.notification.is-info {
    background-color: hsl(207deg, 61%, 53%);
    color: #fff
}

.notification.is-info.is-light {
    background-color: #eff5fb;
    color: #296fa8
}

.notification.is-success {
    background-color: hsl(153deg, 53%, 53%);
    color: #fff
}

.notification.is-success.is-light {
    background-color: #effaf5;
    color: #257953
}

.notification.is-warning {
    background-color: hsl(44deg, 100%, 77%);
    color: rgba(0, 0, 0, .7)
}

.notification.is-warning.is-light {
    background-color: #fffaeb;
    color: #946c00
}

.notification.is-danger {
    background-color: hsl(348deg, 86%, 61%);
    color: #fff
}

.notification.is-danger.is-light {
    background-color: #feecf0;
    color: #cc0f35
}

.navbar, .navbar.is-white {
    background-color: hsl(0deg, 0%, 100%)
}

.level {
    align-items: center;
    justify-content: space-between
}

.level code {
    border-radius: 4px
}

.level img {
    display: inline-block
}

.level.is-mobile, .level.is-mobile .level-left, .level.is-mobile .level-right {
    display: flex
}

.level.is-mobile .level-left + .level-right {
    margin-top: 0
}

.level.is-mobile .level-item:not(:last-child) {
    margin-bottom: 0;
    margin-right: .75rem
}

.level.is-mobile .level-item:not(.is-narrow) {
    flex-grow: 1
}

@media screen and (min-width: 769px), print {
    .level {
        display: flex
    }

    .level > .level-item:not(.is-narrow) {
        flex-grow: 1
    }

    .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) {
        margin-right: .75rem
    }
}

.level-item {
    align-items: center;
    display: flex;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center
}

.level-item .subtitle, .level-item .title {
    margin-bottom: 0
}

.level-left, .level-right {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0
}

.level-left .level-item.is-flexible, .level-right .level-item.is-flexible {
    flex-grow: 1
}

.level-left {
    align-items: center;
    justify-content: flex-start
}

@media screen and (max-width: 768px) {
    .level-item:not(:last-child) {
        margin-bottom: .75rem
    }

    .level-left + .level-right {
        margin-top: 1.5rem
    }
}

.level-right {
    align-items: center;
    justify-content: flex-end
}

@media screen and (min-width: 769px), print {
    .level-left, .level-right {
        display: flex
    }
}

.navbar {
    min-height: 3.25rem;
    position: relative;
    z-index: 30
}

.navbar.is-white, .navbar.is-white .navbar-brand .navbar-link, .navbar.is-white .navbar-brand > .navbar-item {
    color: hsl(0deg, 0%, 4%)
}

.navbar.is-white .navbar-brand .navbar-link.is-active, .navbar.is-white .navbar-brand .navbar-link:focus, .navbar.is-white .navbar-brand .navbar-link:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, .navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover {
    background-color: #f2f2f2;
    color: hsl(0deg, 0%, 4%)
}

.navbar.is-white .navbar-brand .navbar-link::after {
    border-color: hsl(0deg, 0%, 4%)
}

.navbar.is-white .navbar-burger {
    color: hsl(0deg, 0%, 4%)
}

@media screen and (min-width: 1024px) {
    .navbar.is-white .navbar-end .navbar-link.is-active, .navbar.is-white .navbar-end .navbar-link:focus, .navbar.is-white .navbar-end .navbar-link:hover, .navbar.is-white .navbar-end > a.navbar-item.is-active, .navbar.is-white .navbar-end > a.navbar-item:focus, .navbar.is-white .navbar-end > a.navbar-item:hover, .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-white .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-white .navbar-start .navbar-link.is-active, .navbar.is-white .navbar-start .navbar-link:focus, .navbar.is-white .navbar-start .navbar-link:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, .navbar.is-white .navbar-start > a.navbar-item:focus, .navbar.is-white .navbar-start > a.navbar-item:hover {
        background-color: #f2f2f2;
        color: hsl(0deg, 0%, 4%)
    }

    .navbar.is-white .navbar-end .navbar-link, .navbar.is-white .navbar-end > .navbar-item, .navbar.is-white .navbar-start .navbar-link, .navbar.is-white .navbar-start > .navbar-item {
        color: hsl(0deg, 0%, 4%)
    }

    .navbar.is-white .navbar-end .navbar-link::after, .navbar.is-white .navbar-start .navbar-link::after {
        border-color: hsl(0deg, 0%, 4%)
    }

    .navbar.is-white .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 100%);
        color: hsl(0deg, 0%, 4%)
    }
}

.navbar.is-black {
    background-color: hsl(0deg, 0%, 4%);
    color: hsl(0deg, 0%, 100%)
}

.navbar.is-black .navbar-brand .navbar-link, .navbar.is-black .navbar-brand > .navbar-item {
    color: hsl(0deg, 0%, 100%)
}

.navbar.is-black .navbar-brand .navbar-link.is-active, .navbar.is-black .navbar-brand .navbar-link:focus, .navbar.is-black .navbar-brand .navbar-link:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, .navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover {
    background-color: #000;
    color: hsl(0deg, 0%, 100%)
}

.navbar.is-black .navbar-brand .navbar-link::after {
    border-color: hsl(0deg, 0%, 100%)
}

.navbar.is-black .navbar-burger {
    color: hsl(0deg, 0%, 100%)
}

@media screen and (min-width: 1024px) {
    .navbar.is-black .navbar-end .navbar-link.is-active, .navbar.is-black .navbar-end .navbar-link:focus, .navbar.is-black .navbar-end .navbar-link:hover, .navbar.is-black .navbar-end > a.navbar-item.is-active, .navbar.is-black .navbar-end > a.navbar-item:focus, .navbar.is-black .navbar-end > a.navbar-item:hover, .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-black .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-black .navbar-start .navbar-link.is-active, .navbar.is-black .navbar-start .navbar-link:focus, .navbar.is-black .navbar-start .navbar-link:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, .navbar.is-black .navbar-start > a.navbar-item:focus, .navbar.is-black .navbar-start > a.navbar-item:hover {
        background-color: #000;
        color: hsl(0deg, 0%, 100%)
    }

    .navbar.is-black .navbar-end .navbar-link, .navbar.is-black .navbar-end > .navbar-item, .navbar.is-black .navbar-start .navbar-link, .navbar.is-black .navbar-start > .navbar-item {
        color: hsl(0deg, 0%, 100%)
    }

    .navbar.is-black .navbar-end .navbar-link::after, .navbar.is-black .navbar-start .navbar-link::after {
        border-color: hsl(0deg, 0%, 100%)
    }

    .navbar.is-black .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 4%);
        color: hsl(0deg, 0%, 100%)
    }
}

.navbar-divider, .navbar.is-light {
    background-color: hsl(0deg, 0%, 96%)
}

.navbar.is-light, .navbar.is-light .navbar-brand .navbar-link, .navbar.is-light .navbar-brand > .navbar-item {
    color: rgba(0, 0, 0, .7)
}

.navbar.is-light .navbar-brand .navbar-link.is-active, .navbar.is-light .navbar-brand .navbar-link:focus, .navbar.is-light .navbar-brand .navbar-link:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover {
    background-color: #e8e8e8;
    color: rgba(0, 0, 0, .7)
}

.navbar.is-light .navbar-brand .navbar-link::after {
    border-color: rgba(0, 0, 0, .7)
}

.navbar.is-light .navbar-burger {
    color: rgba(0, 0, 0, .7)
}

@media screen and (min-width: 1024px) {
    .navbar.is-light .navbar-end .navbar-link.is-active, .navbar.is-light .navbar-end .navbar-link:focus, .navbar.is-light .navbar-end .navbar-link:hover, .navbar.is-light .navbar-end > a.navbar-item.is-active, .navbar.is-light .navbar-end > a.navbar-item:focus, .navbar.is-light .navbar-end > a.navbar-item:hover, .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-light .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-light .navbar-start .navbar-link.is-active, .navbar.is-light .navbar-start .navbar-link:focus, .navbar.is-light .navbar-start .navbar-link:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover {
        background-color: #e8e8e8;
        color: rgba(0, 0, 0, .7)
    }

    .navbar.is-light .navbar-end .navbar-link, .navbar.is-light .navbar-end > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-start > .navbar-item {
        color: rgba(0, 0, 0, .7)
    }

    .navbar.is-light .navbar-end .navbar-link::after, .navbar.is-light .navbar-start .navbar-link::after {
        border-color: rgba(0, 0, 0, .7)
    }

    .navbar.is-light .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 96%);
        color: rgba(0, 0, 0, .7)
    }
}

.navbar.is-dark .navbar-brand .navbar-link::after, .navbar.is-info .navbar-brand .navbar-link::after, .navbar.is-link .navbar-brand .navbar-link::after, .navbar.is-primary .navbar-brand .navbar-link::after, .navbar.is-success .navbar-brand .navbar-link::after {
    border-color: #fff
}

.navbar.is-dark {
    background-color: hsl(0deg, 0%, 21%);
    color: #fff
}

.navbar.is-dark .navbar-brand .navbar-link, .navbar.is-dark .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-dark .navbar-brand .navbar-link.is-active, .navbar.is-dark .navbar-brand .navbar-link:focus, .navbar.is-dark .navbar-brand .navbar-link:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, .navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover {
    background-color: #292929;
    color: #fff
}

.navbar.is-dark .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-dark .navbar-end .navbar-link.is-active, .navbar.is-dark .navbar-end .navbar-link:focus, .navbar.is-dark .navbar-end .navbar-link:hover, .navbar.is-dark .navbar-end > a.navbar-item.is-active, .navbar.is-dark .navbar-end > a.navbar-item:focus, .navbar.is-dark .navbar-end > a.navbar-item:hover, .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-dark .navbar-start .navbar-link.is-active, .navbar.is-dark .navbar-start .navbar-link:focus, .navbar.is-dark .navbar-start .navbar-link:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, .navbar.is-dark .navbar-start > a.navbar-item:focus, .navbar.is-dark .navbar-start > a.navbar-item:hover {
        background-color: #292929;
        color: #fff
    }

    .navbar.is-dark .navbar-end .navbar-link, .navbar.is-dark .navbar-end > .navbar-item, .navbar.is-dark .navbar-start .navbar-link, .navbar.is-dark .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-dark .navbar-end .navbar-link::after, .navbar.is-dark .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 21%);
        color: #fff
    }
}

.navbar.is-primary {
    background-color: hsl(171deg, 100%, 41%);
    color: #fff
}

.navbar.is-primary .navbar-brand .navbar-link, .navbar.is-primary .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-primary .navbar-brand .navbar-link.is-active, .navbar.is-primary .navbar-brand .navbar-link:focus, .navbar.is-primary .navbar-brand .navbar-link:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover {
    background-color: #00b89c;
    color: #fff
}

.navbar.is-primary .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-primary .navbar-end .navbar-link.is-active, .navbar.is-primary .navbar-end .navbar-link:focus, .navbar.is-primary .navbar-end .navbar-link:hover, .navbar.is-primary .navbar-end > a.navbar-item.is-active, .navbar.is-primary .navbar-end > a.navbar-item:focus, .navbar.is-primary .navbar-end > a.navbar-item:hover, .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-primary .navbar-start .navbar-link.is-active, .navbar.is-primary .navbar-start .navbar-link:focus, .navbar.is-primary .navbar-start .navbar-link:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover {
        background-color: #00b89c;
        color: #fff
    }

    .navbar.is-primary .navbar-end .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-primary .navbar-end .navbar-link::after, .navbar.is-primary .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(171deg, 100%, 41%);
        color: #fff
    }
}

.navbar.is-link {
    background-color: hsl(229deg, 53%, 53%);
    color: #fff
}

.navbar.is-link .navbar-brand .navbar-link, .navbar.is-link .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-link .navbar-brand .navbar-link.is-active, .navbar.is-link .navbar-brand .navbar-link:focus, .navbar.is-link .navbar-brand .navbar-link:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, .navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover {
    background-color: #3a51bb;
    color: #fff
}

.navbar.is-link .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-link .navbar-end .navbar-link.is-active, .navbar.is-link .navbar-end .navbar-link:focus, .navbar.is-link .navbar-end .navbar-link:hover, .navbar.is-link .navbar-end > a.navbar-item.is-active, .navbar.is-link .navbar-end > a.navbar-item:focus, .navbar.is-link .navbar-end > a.navbar-item:hover, .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-link .navbar-start .navbar-link.is-active, .navbar.is-link .navbar-start .navbar-link:focus, .navbar.is-link .navbar-start .navbar-link:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, .navbar.is-link .navbar-start > a.navbar-item:focus, .navbar.is-link .navbar-start > a.navbar-item:hover {
        background-color: #3a51bb;
        color: #fff
    }

    .navbar.is-link .navbar-end .navbar-link, .navbar.is-link .navbar-end > .navbar-item, .navbar.is-link .navbar-start .navbar-link, .navbar.is-link .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-link .navbar-end .navbar-link::after, .navbar.is-link .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-link .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(229deg, 53%, 53%);
        color: #fff
    }
}

.navbar.is-info {
    background-color: hsl(207deg, 61%, 53%);
    color: #fff
}

.navbar.is-info .navbar-brand .navbar-link, .navbar.is-info .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-info .navbar-brand .navbar-link.is-active, .navbar.is-info .navbar-brand .navbar-link:focus, .navbar.is-info .navbar-brand .navbar-link:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, .navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover {
    background-color: #3082c5;
    color: #fff
}

.navbar.is-info .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-info .navbar-end .navbar-link.is-active, .navbar.is-info .navbar-end .navbar-link:focus, .navbar.is-info .navbar-end .navbar-link:hover, .navbar.is-info .navbar-end > a.navbar-item.is-active, .navbar.is-info .navbar-end > a.navbar-item:focus, .navbar.is-info .navbar-end > a.navbar-item:hover, .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-info .navbar-start .navbar-link.is-active, .navbar.is-info .navbar-start .navbar-link:focus, .navbar.is-info .navbar-start .navbar-link:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, .navbar.is-info .navbar-start > a.navbar-item:focus, .navbar.is-info .navbar-start > a.navbar-item:hover {
        background-color: #3082c5;
        color: #fff
    }

    .navbar.is-info .navbar-end .navbar-link, .navbar.is-info .navbar-end > .navbar-item, .navbar.is-info .navbar-start .navbar-link, .navbar.is-info .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-info .navbar-end .navbar-link::after, .navbar.is-info .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-info .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(207deg, 61%, 53%);
        color: #fff
    }
}

.navbar.is-success {
    background-color: hsl(153deg, 53%, 53%);
    color: #fff
}

.navbar.is-success .navbar-brand .navbar-link, .navbar.is-success .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-success .navbar-brand .navbar-link.is-active, .navbar.is-success .navbar-brand .navbar-link:focus, .navbar.is-success .navbar-brand .navbar-link:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, .navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover {
    background-color: #3abb81;
    color: #fff
}

.navbar.is-success .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-success .navbar-end .navbar-link.is-active, .navbar.is-success .navbar-end .navbar-link:focus, .navbar.is-success .navbar-end .navbar-link:hover, .navbar.is-success .navbar-end > a.navbar-item.is-active, .navbar.is-success .navbar-end > a.navbar-item:focus, .navbar.is-success .navbar-end > a.navbar-item:hover, .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-success .navbar-start .navbar-link.is-active, .navbar.is-success .navbar-start .navbar-link:focus, .navbar.is-success .navbar-start .navbar-link:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, .navbar.is-success .navbar-start > a.navbar-item:focus, .navbar.is-success .navbar-start > a.navbar-item:hover {
        background-color: #3abb81;
        color: #fff
    }

    .navbar.is-success .navbar-end .navbar-link, .navbar.is-success .navbar-end > .navbar-item, .navbar.is-success .navbar-start .navbar-link, .navbar.is-success .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-success .navbar-end .navbar-link::after, .navbar.is-success .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-success .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(153deg, 53%, 53%);
        color: #fff
    }
}

.navbar.is-warning {
    background-color: hsl(44deg, 100%, 77%);
    color: rgba(0, 0, 0, .7)
}

.navbar.is-warning .navbar-brand .navbar-link, .navbar.is-warning .navbar-brand > .navbar-item {
    color: rgba(0, 0, 0, .7)
}

.navbar.is-warning .navbar-brand .navbar-link.is-active, .navbar.is-warning .navbar-brand .navbar-link:focus, .navbar.is-warning .navbar-brand .navbar-link:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover {
    background-color: #ffd970;
    color: rgba(0, 0, 0, .7)
}

.navbar.is-warning .navbar-brand .navbar-link::after {
    border-color: rgba(0, 0, 0, .7)
}

.navbar.is-warning .navbar-burger {
    color: rgba(0, 0, 0, .7)
}

@media screen and (min-width: 1024px) {
    .navbar.is-warning .navbar-end .navbar-link.is-active, .navbar.is-warning .navbar-end .navbar-link:focus, .navbar.is-warning .navbar-end .navbar-link:hover, .navbar.is-warning .navbar-end > a.navbar-item.is-active, .navbar.is-warning .navbar-end > a.navbar-item:focus, .navbar.is-warning .navbar-end > a.navbar-item:hover, .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-warning .navbar-start .navbar-link.is-active, .navbar.is-warning .navbar-start .navbar-link:focus, .navbar.is-warning .navbar-start .navbar-link:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover {
        background-color: #ffd970;
        color: rgba(0, 0, 0, .7)
    }

    .navbar.is-warning .navbar-end .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-start > .navbar-item {
        color: rgba(0, 0, 0, .7)
    }

    .navbar.is-warning .navbar-end .navbar-link::after, .navbar.is-warning .navbar-start .navbar-link::after {
        border-color: rgba(0, 0, 0, .7)
    }

    .navbar.is-warning .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(44deg, 100%, 77%);
        color: rgba(0, 0, 0, .7)
    }
}

.navbar.is-danger {
    background-color: hsl(348deg, 86%, 61%);
    color: #fff
}

.navbar.is-danger .navbar-brand .navbar-link, .navbar.is-danger .navbar-brand > .navbar-item {
    color: #fff
}

.navbar.is-danger .navbar-brand .navbar-link.is-active, .navbar.is-danger .navbar-brand .navbar-link:focus, .navbar.is-danger .navbar-brand .navbar-link:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, .navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover {
    background-color: #ef2e55;
    color: #fff
}

.navbar.is-danger .navbar-brand .navbar-link::after {
    border-color: #fff
}

.navbar.is-danger .navbar-burger {
    color: #fff
}

@media screen and (min-width: 1024px) {
    .navbar.is-danger .navbar-end .navbar-link.is-active, .navbar.is-danger .navbar-end .navbar-link:focus, .navbar.is-danger .navbar-end .navbar-link:hover, .navbar.is-danger .navbar-end > a.navbar-item.is-active, .navbar.is-danger .navbar-end > a.navbar-item:focus, .navbar.is-danger .navbar-end > a.navbar-item:hover, .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-danger .navbar-start .navbar-link.is-active, .navbar.is-danger .navbar-start .navbar-link:focus, .navbar.is-danger .navbar-start .navbar-link:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, .navbar.is-danger .navbar-start > a.navbar-item:focus, .navbar.is-danger .navbar-start > a.navbar-item:hover {
        background-color: #ef2e55;
        color: #fff
    }

    .navbar.is-danger .navbar-end .navbar-link, .navbar.is-danger .navbar-end > .navbar-item, .navbar.is-danger .navbar-start .navbar-link, .navbar.is-danger .navbar-start > .navbar-item {
        color: #fff
    }

    .navbar.is-danger .navbar-end .navbar-link::after, .navbar.is-danger .navbar-start .navbar-link::after {
        border-color: #fff
    }

    .navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(348deg, 86%, 61%);
        color: #fff
    }
}

.navbar > .container {
    align-items: stretch;
    display: flex;
    min-height: 3.25rem;
    width: 100%
}

.navbar.has-shadow {
    box-shadow: 0 2px 0 0 hsl(0deg, 0%, 96%)
}

.navbar.is-fixed-bottom, .navbar.is-fixed-top {
    left: 0;
    position: fixed;
    right: 0;
    z-index: 30
}

.navbar.is-fixed-bottom {
    bottom: 0
}

.navbar.is-fixed-bottom.has-shadow {
    box-shadow: 0 -2px 0 0 hsl(0deg, 0%, 96%)
}

.navbar.is-fixed-top {
    top: 0
}

body.has-navbar-fixed-top, html.has-navbar-fixed-top {
    padding-top: 3.25rem
}

body.has-navbar-fixed-bottom, html.has-navbar-fixed-bottom {
    padding-bottom: 3.25rem
}

.navbar-brand, .navbar-tabs {
    align-items: stretch;
    display: flex;
    flex-shrink: 0;
    min-height: 3.25rem
}

.navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover {
    background-color: transparent
}

.navbar-tabs {
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden
}

.navbar-burger {
    color: hsl(0deg, 0%, 29%);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: 0 0;
    border: none;
    display: block;
    height: 3.25rem;
    position: relative;
    width: 3.25rem;
    margin-left: auto
}

.navbar-burger span {
    background-color: currentColor;
    display: block;
    height: 1px;
    left: calc(50% - 8px);
    position: absolute;
    transform-origin: center;
    transition-duration: 86ms;
    transition-property: background-color, opacity, transform;
    transition-timing-function: ease-out;
    width: 16px
}

.navbar-burger span:nth-child(1) {
    top: calc(50% - 6px)
}

.navbar-burger span:nth-child(2) {
    top: calc(50% - 1px)
}

.navbar-burger span:nth-child(3) {
    top: calc(50% + 4px)
}

.navbar-burger:hover {
    background-color: rgba(0, 0, 0, .05)
}

.navbar-burger.is-active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg)
}

.navbar-burger.is-active span:nth-child(2) {
    opacity: 0
}

.navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg)
}

.navbar-menu {
    display: none
}

.navbar-item, .navbar-link {
    color: hsl(0deg, 0%, 29%);
    display: block;
    line-height: 1.5;
    padding: .5rem .75rem;
    position: relative
}

.navbar-item .icon:only-child, .navbar-link .icon:only-child {
    margin-left: -.25rem;
    margin-right: -.25rem
}

.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
    background-color: hsl(0deg, 0%, 98%);
    color: hsl(229deg, 53%, 53%)
}

.navbar-item {
    flex-grow: 0;
    flex-shrink: 0
}

.navbar-item img {
    max-height: 1.75rem
}

.navbar-item.has-dropdown {
    padding: 0
}

.navbar-item.is-expanded {
    flex-grow: 1;
    flex-shrink: 1
}

.navbar-item.is-tab {
    border-bottom: 1px solid transparent;
    min-height: 3.25rem;
    padding-bottom: calc(.5rem - 1px)
}

.navbar-item.is-tab.is-active, .navbar-item.is-tab:focus, .navbar-item.is-tab:hover {
    background-color: transparent;
    border-bottom-color: hsl(229deg, 53%, 53%)
}

.navbar-item.is-tab.is-active {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    color: hsl(229deg, 53%, 53%);
    padding-bottom: calc(.5rem - 3px)
}

.navbar-content {
    flex-grow: 1;
    flex-shrink: 1
}

.navbar-link:not(.is-arrowless) {
    padding-right: 2.5em
}

.navbar-link:not(.is-arrowless)::after {
    border-color: hsl(229deg, 53%, 53%);
    margin-top: -.375em;
    right: 1.125em
}

.navbar-dropdown {
    font-size: .875rem;
    padding-bottom: .5rem;
    padding-top: .5rem
}

.navbar-dropdown .navbar-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.navbar-divider {
    border: none;
    display: none;
    height: 2px;
    margin: .5rem 0
}

@media screen and (max-width: 1023px) {
    .navbar > .container {
        display: block
    }

    .navbar-brand .navbar-item, .navbar-tabs .navbar-item {
        align-items: center;
        display: flex
    }

    .navbar-link::after {
        display: none
    }

    .navbar-menu {
        background-color: hsl(0deg, 0%, 100%);
        box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
        padding: .5rem 0
    }

    .navbar-menu.is-active {
        display: block
    }

    .navbar.is-fixed-bottom-touch, .navbar.is-fixed-top-touch {
        left: 0;
        position: fixed;
        right: 0;
        z-index: 30
    }

    .navbar.is-fixed-bottom-touch {
        bottom: 0
    }

    .navbar.is-fixed-bottom-touch.has-shadow {
        box-shadow: 0 -2px 3px rgba(10, 10, 10, .1)
    }

    .navbar.is-fixed-top-touch {
        top: 0
    }

    .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu {
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 3.25rem);
        overflow: auto
    }

    body.has-navbar-fixed-top-touch, html.has-navbar-fixed-top-touch {
        padding-top: 3.25rem
    }

    body.has-navbar-fixed-bottom-touch, html.has-navbar-fixed-bottom-touch {
        padding-bottom: 3.25rem
    }
}

@media screen and (min-width: 1024px) {
    .navbar, .navbar-end, .navbar-menu, .navbar-start {
        align-items: stretch;
        display: flex
    }

    .navbar {
        min-height: 3.25rem
    }

    .navbar.is-spaced {
        padding: 1rem 2rem
    }

    .navbar.is-spaced .navbar-end, .navbar.is-spaced .navbar-start {
        align-items: center
    }

    .navbar.is-spaced .navbar-link, .navbar.is-spaced a.navbar-item {
        border-radius: 4px
    }

    .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link, .navbar.is-transparent .navbar-link.is-active, .navbar.is-transparent .navbar-link:focus, .navbar.is-transparent .navbar-link:hover, .navbar.is-transparent a.navbar-item.is-active, .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover {
        background-color: transparent !important
    }

    .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
        background-color: hsl(0deg, 0%, 96%);
        color: hsl(0deg, 0%, 4%)
    }

    .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 96%);
        color: hsl(229deg, 53%, 53%)
    }

    .navbar-burger {
        display: none
    }

    .navbar-item, .navbar-link {
        align-items: center;
        display: flex
    }

    .navbar-item.has-dropdown {
        align-items: stretch
    }

    .navbar-item.has-dropdown-up .navbar-link::after {
        transform: rotate(135deg) translate(.25em, -.25em)
    }

    .navbar-item.has-dropdown-up .navbar-dropdown {
        border-bottom: 2px solid hsl(0deg, 0%, 86%);
        border-radius: 6px 6px 0 0;
        border-top: none;
        bottom: 100%;
        box-shadow: 0 -8px 8px rgba(10, 10, 10, .1);
        top: auto
    }

    .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
        display: block
    }

    .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0)
    }

    .navbar-menu {
        flex-grow: 1;
        flex-shrink: 0
    }

    .navbar-start {
        justify-content: flex-start;
        margin-right: auto
    }

    .navbar-end {
        justify-content: flex-end;
        margin-left: auto
    }

    .navbar-dropdown {
        background-color: hsl(0deg, 0%, 100%);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 2px solid hsl(0deg, 0%, 86%);
        box-shadow: 0 8px 8px rgba(10, 10, 10, .1);
        display: none;
        font-size: .875rem;
        left: 0;
        min-width: 100%;
        position: absolute;
        top: 100%;
        z-index: 20
    }

    .navbar-dropdown .navbar-item {
        padding: .375rem 1rem;
        white-space: nowrap
    }

    .navbar-dropdown a.navbar-item {
        padding-right: 3rem
    }

    .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
        background-color: hsl(0deg, 0%, 96%);
        color: hsl(0deg, 0%, 4%)
    }

    .navbar-dropdown a.navbar-item.is-active {
        background-color: hsl(0deg, 0%, 96%);
        color: hsl(229deg, 53%, 53%)
    }

    .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-dropdown {
        border-radius: 6px;
        border-top: none;
        box-shadow: 0 8px 8px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
        display: block;
        opacity: 0;
        pointer-events: none;
        top: calc(100% + (-4px));
        transform: translateY(-5px);
        transition-duration: 86ms;
        transition-property: opacity, transform
    }

    .navbar-dropdown.is-right {
        left: auto;
        right: 0
    }

    .navbar-divider {
        display: block
    }

    .container > .navbar .navbar-brand, .navbar > .container .navbar-brand {
        margin-left: -.75rem
    }

    .container > .navbar .navbar-menu, .navbar > .container .navbar-menu {
        margin-right: -.75rem
    }

    .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop {
        left: 0;
        position: fixed;
        right: 0;
        z-index: 30
    }

    .navbar.is-fixed-bottom-desktop {
        bottom: 0
    }

    .navbar.is-fixed-bottom-desktop.has-shadow {
        box-shadow: 0 -2px 3px rgba(10, 10, 10, .1)
    }

    .navbar.is-fixed-top-desktop {
        top: 0
    }

    body.has-navbar-fixed-top-desktop, html.has-navbar-fixed-top-desktop {
        padding-top: 3.25rem
    }

    body.has-navbar-fixed-bottom-desktop, html.has-navbar-fixed-bottom-desktop {
        padding-bottom: 3.25rem
    }

    body.has-spaced-navbar-fixed-top, html.has-spaced-navbar-fixed-top {
        padding-top: 5.25rem
    }

    body.has-spaced-navbar-fixed-bottom, html.has-spaced-navbar-fixed-bottom {
        padding-bottom: 5.25rem
    }

    .navbar-link.is-active, a.navbar-item.is-active {
        color: hsl(0deg, 0%, 4%)
    }

    .navbar-link.is-active:not(:focus):not(:hover), a.navbar-item.is-active:not(:focus):not(:hover) {
        background-color: transparent
    }

    .navbar-item.has-dropdown.is-active .navbar-link, .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link {
        background-color: hsl(0deg, 0%, 98%)
    }
}

.w-tabs a, .w-tabs ul {
    border-bottom-style: solid;
    border-bottom-width: 1px
}

.hero.is-fullheight-with-navbar {
    min-height: calc(100vh - 3.25rem)
}

.w-tabs {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: auto
}

.w-tabs a {
    align-items: center;
    border-bottom-color: hsl(0deg, 0%, 86%);
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    padding: .5em 1em
}

.w-tabs a:hover {
    border-bottom-color: hsl(0deg, 0%, 21%);
    color: hsl(0deg, 0%, 21%)
}

.w-tabs a.is-active {
    border-bottom-color: hsl(229deg, 53%, 53%);
    color: hsl(229deg, 53%, 53%)
}

.w-tabs li {
    display: block
}

.w-tabs ul {
    align-items: center;
    border-bottom-color: hsl(0deg, 0%, 86%);
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start
}

.w-tabs ul.is-left {
    padding-right: .75em
}

.w-tabs ul.is-center {
    flex: none;
    justify-content: center;
    padding-left: .75em;
    padding-right: .75em
}

.w-tabs ul.is-right {
    justify-content: flex-end;
    padding-left: .75em
}

.w-tabs .icon:first-child {
    margin-right: .5em
}

.w-tabs .icon:last-child {
    margin-left: .5em
}

.w-tabs.is-centered ul {
    justify-content: center
}

.w-tabs.is-right ul {
    justify-content: flex-end
}

.w-tabs.is-boxed a {
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0
}

.w-tabs.is-boxed a:hover {
    background-color: hsl(0deg, 0%, 96%);
    border-bottom-color: hsl(0deg, 0%, 86%)
}

.w-tabs.is-boxed li.is-active a {
    background-color: hsl(0deg, 0%, 100%);
    border-color: hsl(0deg, 0%, 86%);
    border-bottom-color: transparent !important
}

.w-tabs.is-fullwidth li {
    flex-grow: 1;
    flex-shrink: 0
}

.w-tabs.is-toggle a {
    border-color: hsl(0deg, 0%, 86%);
    border-style: solid;
    border-width: 1px;
    margin-bottom: 0;
    position: relative
}

.w-tabs.is-toggle a:hover {
    background-color: hsl(0deg, 0%, 96%);
    border-color: hsl(0deg, 0%, 71%);
    z-index: 2
}

.w-tabs.is-toggle li + li {
    margin-left: -1px
}

.w-tabs.is-toggle li:first-child a {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.w-tabs.is-toggle li:last-child a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.w-tabs.is-toggle li.is-active a {
    background-color: hsl(229deg, 53%, 53%);
    border-color: hsl(229deg, 53%, 53%);
    color: #fff;
    z-index: 1
}

.w-tabs.is-toggle ul {
    border-bottom: none
}

.w-tabs.is-toggle.is-toggle-rounded li:first-child a {
    border-bottom-left-radius: 9999px;
    border-top-left-radius: 9999px;
    padding-left: 1.25em
}

.w-tabs.is-toggle.is-toggle-rounded li:last-child a {
    border-bottom-right-radius: 9999px;
    border-top-right-radius: 9999px;
    padding-right: 1.25em
}

.w-tabs.is-small {
    font-size: .75rem
}

.w-tabs.is-medium {
    font-size: 1.25rem
}

.w-tabs.is-large {
    font-size: 1.5rem
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: .75rem
}

.columns.is-mobile > .column.is-0 {
    flex: none;
    width: 0%
}

.columns.is-mobile > .column.is-offset-0 {
    margin-left: 0
}

.columns.is-mobile > .column.is-1 {
    flex: none;
    width: 8.33333337%
}

.columns.is-mobile > .column.is-offset-1 {
    margin-left: 8.33333337%
}

.columns.is-mobile > .column.is-2 {
    flex: none;
    width: 16.66666674%
}

.columns.is-mobile > .column.is-offset-2 {
    margin-left: 16.66666674%
}

.columns.is-mobile > .column.is-3 {
    flex: none;
    width: 25%
}

.columns.is-mobile > .column.is-offset-3 {
    margin-left: 25%
}

.columns.is-mobile > .column.is-4 {
    flex: none;
    width: 33.33333337%
}

.columns.is-mobile > .column.is-offset-4 {
    margin-left: 33.33333337%
}

.columns.is-mobile > .column.is-5 {
    flex: none;
    width: 41.66666674%
}

.columns.is-mobile > .column.is-offset-5 {
    margin-left: 41.66666674%
}

.columns.is-mobile > .column.is-6 {
    flex: none;
    width: 50%
}

.columns.is-mobile > .column.is-offset-6 {
    margin-left: 50%
}

.columns.is-mobile > .column.is-7 {
    flex: none;
    width: 58.33333337%
}

.columns.is-mobile > .column.is-offset-7 {
    margin-left: 58.33333337%
}

.columns.is-mobile > .column.is-8 {
    flex: none;
    width: 66.66666674%
}

.columns.is-mobile > .column.is-offset-8 {
    margin-left: 66.66666674%
}

.columns.is-mobile > .column.is-9 {
    flex: none;
    width: 75%
}

.columns.is-mobile > .column.is-offset-9 {
    margin-left: 75%
}

.columns.is-mobile > .column.is-10 {
    flex: none;
    width: 83.33333337%
}

.columns.is-mobile > .column.is-offset-10 {
    margin-left: 83.33333337%
}

.columns.is-mobile > .column.is-11 {
    flex: none;
    width: 91.66666674%
}

.columns.is-mobile > .column.is-offset-11 {
    margin-left: 91.66666674%
}

.columns.is-mobile > .column.is-12 {
    flex: none;
    width: 100%
}

.columns.is-mobile > .column.is-offset-12 {
    margin-left: 100%
}

@media screen and (max-width: 768px) {
    .column.is-0-mobile {
        flex: none;
        width: 0%
    }

    .column.is-offset-0-mobile {
        margin-left: 0
    }

    .column.is-1-mobile {
        flex: none;
        width: 8.33333337%
    }

    .column.is-offset-1-mobile {
        margin-left: 8.33333337%
    }

    .column.is-2-mobile {
        flex: none;
        width: 16.66666674%
    }

    .column.is-offset-2-mobile {
        margin-left: 16.66666674%
    }

    .column.is-3-mobile {
        flex: none;
        width: 25%
    }

    .column.is-offset-3-mobile {
        margin-left: 25%
    }

    .column.is-4-mobile {
        flex: none;
        width: 33.33333337%
    }

    .column.is-offset-4-mobile {
        margin-left: 33.33333337%
    }

    .column.is-5-mobile {
        flex: none;
        width: 41.66666674%
    }

    .column.is-offset-5-mobile {
        margin-left: 41.66666674%
    }

    .column.is-6-mobile {
        flex: none;
        width: 50%
    }

    .column.is-offset-6-mobile {
        margin-left: 50%
    }

    .column.is-7-mobile {
        flex: none;
        width: 58.33333337%
    }

    .column.is-offset-7-mobile {
        margin-left: 58.33333337%
    }

    .column.is-8-mobile {
        flex: none;
        width: 66.66666674%
    }

    .column.is-offset-8-mobile {
        margin-left: 66.66666674%
    }

    .column.is-9-mobile {
        flex: none;
        width: 75%
    }

    .column.is-offset-9-mobile {
        margin-left: 75%
    }

    .column.is-10-mobile {
        flex: none;
        width: 83.33333337%
    }

    .column.is-offset-10-mobile {
        margin-left: 83.33333337%
    }

    .column.is-11-mobile {
        flex: none;
        width: 91.66666674%
    }

    .column.is-offset-11-mobile {
        margin-left: 91.66666674%
    }

    .column.is-12-mobile {
        flex: none;
        width: 100%
    }

    .column.is-offset-12-mobile {
        margin-left: 100%
    }

    .columns.is-variable.is-0-mobile {
        --columnGap: 0rem
    }
}

@media screen and (min-width: 769px), print {
    .column.is-0, .column.is-0-tablet {
        flex: none;
        width: 0%
    }

    .column.is-offset-0, .column.is-offset-0-tablet {
        margin-left: 0
    }

    .column.is-1, .column.is-1-tablet {
        flex: none;
        width: 8.33333337%
    }

    .column.is-offset-1, .column.is-offset-1-tablet {
        margin-left: 8.33333337%
    }

    .column.is-2, .column.is-2-tablet {
        flex: none;
        width: 16.66666674%
    }

    .column.is-offset-2, .column.is-offset-2-tablet {
        margin-left: 16.66666674%
    }

    .column.is-3, .column.is-3-tablet {
        flex: none;
        width: 25%
    }

    .column.is-offset-3, .column.is-offset-3-tablet {
        margin-left: 25%
    }

    .column.is-4, .column.is-4-tablet {
        flex: none;
        width: 33.33333337%
    }

    .column.is-offset-4, .column.is-offset-4-tablet {
        margin-left: 33.33333337%
    }

    .column.is-5, .column.is-5-tablet {
        flex: none;
        width: 41.66666674%
    }

    .column.is-offset-5, .column.is-offset-5-tablet {
        margin-left: 41.66666674%
    }

    .column.is-6, .column.is-6-tablet {
        flex: none;
        width: 50%
    }

    .column.is-offset-6, .column.is-offset-6-tablet {
        margin-left: 50%
    }

    .column.is-7, .column.is-7-tablet {
        flex: none;
        width: 58.33333337%
    }

    .column.is-offset-7, .column.is-offset-7-tablet {
        margin-left: 58.33333337%
    }

    .column.is-8, .column.is-8-tablet {
        flex: none;
        width: 66.66666674%
    }

    .column.is-offset-8, .column.is-offset-8-tablet {
        margin-left: 66.66666674%
    }

    .column.is-9, .column.is-9-tablet {
        flex: none;
        width: 75%
    }

    .column.is-offset-9, .column.is-offset-9-tablet {
        margin-left: 75%
    }

    .column.is-10, .column.is-10-tablet {
        flex: none;
        width: 83.33333337%
    }

    .column.is-offset-10, .column.is-offset-10-tablet {
        margin-left: 83.33333337%
    }

    .column.is-11, .column.is-11-tablet {
        flex: none;
        width: 91.66666674%
    }

    .column.is-offset-11, .column.is-offset-11-tablet {
        margin-left: 91.66666674%
    }

    .column.is-12, .column.is-12-tablet {
        flex: none;
        width: 100%
    }

    .column.is-offset-12, .column.is-offset-12-tablet {
        margin-left: 100%
    }

    .columns:not(.is-desktop) {
        display: flex
    }
}

@media screen and (max-width: 1023px) {
    .column.is-0-touch {
        flex: none;
        width: 0%
    }

    .column.is-offset-0-touch {
        margin-left: 0
    }

    .column.is-1-touch {
        flex: none;
        width: 8.33333337%
    }

    .column.is-offset-1-touch {
        margin-left: 8.33333337%
    }

    .column.is-2-touch {
        flex: none;
        width: 16.66666674%
    }

    .column.is-offset-2-touch {
        margin-left: 16.66666674%
    }

    .column.is-3-touch {
        flex: none;
        width: 25%
    }

    .column.is-offset-3-touch {
        margin-left: 25%
    }

    .column.is-4-touch {
        flex: none;
        width: 33.33333337%
    }

    .column.is-offset-4-touch {
        margin-left: 33.33333337%
    }

    .column.is-5-touch {
        flex: none;
        width: 41.66666674%
    }

    .column.is-offset-5-touch {
        margin-left: 41.66666674%
    }

    .column.is-6-touch {
        flex: none;
        width: 50%
    }

    .column.is-offset-6-touch {
        margin-left: 50%
    }

    .column.is-7-touch {
        flex: none;
        width: 58.33333337%
    }

    .column.is-offset-7-touch {
        margin-left: 58.33333337%
    }

    .column.is-8-touch {
        flex: none;
        width: 66.66666674%
    }

    .column.is-offset-8-touch {
        margin-left: 66.66666674%
    }

    .column.is-9-touch {
        flex: none;
        width: 75%
    }

    .column.is-offset-9-touch {
        margin-left: 75%
    }

    .column.is-10-touch {
        flex: none;
        width: 83.33333337%
    }

    .column.is-offset-10-touch {
        margin-left: 83.33333337%
    }

    .column.is-11-touch {
        flex: none;
        width: 91.66666674%
    }

    .column.is-offset-11-touch {
        margin-left: 91.66666674%
    }

    .column.is-12-touch {
        flex: none;
        width: 100%
    }

    .column.is-offset-12-touch {
        margin-left: 100%
    }

    .columns.is-variable.is-0-touch {
        --columnGap: 0rem
    }
}

@media screen and (min-width: 1024px) {
    .column.is-0-desktop {
        flex: none;
        width: 0%
    }

    .column.is-offset-0-desktop {
        margin-left: 0
    }

    .column.is-1-desktop {
        flex: none;
        width: 8.33333337%
    }

    .column.is-offset-1-desktop {
        margin-left: 8.33333337%
    }

    .column.is-2-desktop {
        flex: none;
        width: 16.66666674%
    }

    .column.is-offset-2-desktop {
        margin-left: 16.66666674%
    }

    .column.is-3-desktop {
        flex: none;
        width: 25%
    }

    .column.is-offset-3-desktop {
        margin-left: 25%
    }

    .column.is-4-desktop {
        flex: none;
        width: 33.33333337%
    }

    .column.is-offset-4-desktop {
        margin-left: 33.33333337%
    }

    .column.is-5-desktop {
        flex: none;
        width: 41.66666674%
    }

    .column.is-offset-5-desktop {
        margin-left: 41.66666674%
    }

    .column.is-6-desktop {
        flex: none;
        width: 50%
    }

    .column.is-offset-6-desktop {
        margin-left: 50%
    }

    .column.is-7-desktop {
        flex: none;
        width: 58.33333337%
    }

    .column.is-offset-7-desktop {
        margin-left: 58.33333337%
    }

    .column.is-8-desktop {
        flex: none;
        width: 66.66666674%
    }

    .column.is-offset-8-desktop {
        margin-left: 66.66666674%
    }

    .column.is-9-desktop {
        flex: none;
        width: 75%
    }

    .column.is-offset-9-desktop {
        margin-left: 75%
    }

    .column.is-10-desktop {
        flex: none;
        width: 83.33333337%
    }

    .column.is-offset-10-desktop {
        margin-left: 83.33333337%
    }

    .column.is-11-desktop {
        flex: none;
        width: 91.66666674%
    }

    .column.is-offset-11-desktop {
        margin-left: 91.66666674%
    }

    .column.is-12-desktop {
        flex: none;
        width: 100%
    }

    .column.is-offset-12-desktop {
        margin-left: 100%
    }

    .columns.is-desktop {
        display: flex
    }
}

@media screen and (min-width: 1216px) {
    .column.is-0-widescreen {
        flex: none;
        width: 0%
    }

    .column.is-offset-0-widescreen {
        margin-left: 0
    }

    .column.is-1-widescreen {
        flex: none;
        width: 8.33333337%
    }

    .column.is-offset-1-widescreen {
        margin-left: 8.33333337%
    }

    .column.is-2-widescreen {
        flex: none;
        width: 16.66666674%
    }

    .column.is-offset-2-widescreen {
        margin-left: 16.66666674%
    }

    .column.is-3-widescreen {
        flex: none;
        width: 25%
    }

    .column.is-offset-3-widescreen {
        margin-left: 25%
    }

    .column.is-4-widescreen {
        flex: none;
        width: 33.33333337%
    }

    .column.is-offset-4-widescreen {
        margin-left: 33.33333337%
    }

    .column.is-5-widescreen {
        flex: none;
        width: 41.66666674%
    }

    .column.is-offset-5-widescreen {
        margin-left: 41.66666674%
    }

    .column.is-6-widescreen {
        flex: none;
        width: 50%
    }

    .column.is-offset-6-widescreen {
        margin-left: 50%
    }

    .column.is-7-widescreen {
        flex: none;
        width: 58.33333337%
    }

    .column.is-offset-7-widescreen {
        margin-left: 58.33333337%
    }

    .column.is-8-widescreen {
        flex: none;
        width: 66.66666674%
    }

    .column.is-offset-8-widescreen {
        margin-left: 66.66666674%
    }

    .column.is-9-widescreen {
        flex: none;
        width: 75%
    }

    .column.is-offset-9-widescreen {
        margin-left: 75%
    }

    .column.is-10-widescreen {
        flex: none;
        width: 83.33333337%
    }

    .column.is-offset-10-widescreen {
        margin-left: 83.33333337%
    }

    .column.is-11-widescreen {
        flex: none;
        width: 91.66666674%
    }

    .column.is-offset-11-widescreen {
        margin-left: 91.66666674%
    }

    .column.is-12-widescreen {
        flex: none;
        width: 100%
    }

    .column.is-offset-12-widescreen {
        margin-left: 100%
    }

    .columns.is-variable.is-0-widescreen {
        --columnGap: 0rem
    }
}

.columns {
    margin-left: -.75rem;
    margin-right: -.75rem;
    margin-top: -.75rem
}

.columns:last-child {
    margin-bottom: -.75rem
}

.columns:not(:last-child) {
    margin-bottom: calc(1.5rem - .75rem)
}

.columns.is-centered {
    justify-content: center
}

.columns.is-gapless {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0
}

.columns.is-gapless > .column {
    margin: 0;
    padding: 0 !important
}

.columns.is-gapless:not(:last-child) {
    margin-bottom: 1.5rem
}

.columns.is-gapless:last-child {
    margin-bottom: 0
}

.columns.is-mobile {
    display: flex
}

.columns.is-multiline {
    flex-wrap: wrap
}

.columns.is-vcentered {
    align-items: center
}

.columns.is-variable {
    --columnGap: 0.75rem;
    margin-left: calc(-1 * var(--columnGap));
    margin-right: calc(-1 * var(--columnGap))
}

.columns.is-variable > .column {
    padding-left: var(--columnGap);
    padding-right: var(--columnGap)
}

.columns.is-variable.is-0 {
    --columnGap: 0rem
}

.columns.is-variable.is-1 {
    --columnGap: 0.25rem
}

.columns.is-variable.is-2 {
    --columnGap: 0.5rem
}

.columns.is-variable.is-3 {
    --columnGap: 0.75rem
}

.columns.is-variable.is-4 {
    --columnGap: 1rem
}

.columns.is-variable.is-5 {
    --columnGap: 1.25rem
}

.columns.is-variable.is-6 {
    --columnGap: 1.5rem
}

.columns.is-variable.is-7 {
    --columnGap: 1.75rem
}

.columns.is-variable.is-8 {
    --columnGap: 2rem
}

.is-block {
    display: block !important
}

@media screen and (max-width: 768px) {
    .columns.is-variable.is-1-mobile {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-mobile {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-mobile {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-mobile {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-mobile {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-mobile {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-mobile {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-mobile {
        --columnGap: 2rem
    }

    .is-block-mobile {
        display: block !important
    }
}

@media screen and (min-width: 769px), print {
    .columns.is-variable.is-0-tablet {
        --columnGap: 0rem
    }

    .columns.is-variable.is-1-tablet {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-tablet {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-tablet {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-tablet {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-tablet {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-tablet {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-tablet {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-tablet {
        --columnGap: 2rem
    }

    .is-block-tablet {
        display: block !important
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .columns.is-variable.is-0-tablet-only {
        --columnGap: 0rem
    }

    .columns.is-variable.is-1-tablet-only {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-tablet-only {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-tablet-only {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-tablet-only {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-tablet-only {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-tablet-only {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-tablet-only {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-tablet-only {
        --columnGap: 2rem
    }

    .is-block-tablet-only {
        display: block !important
    }
}

@media screen and (max-width: 1023px) {
    .columns.is-variable.is-1-touch {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-touch {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-touch {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-touch {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-touch {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-touch {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-touch {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-touch {
        --columnGap: 2rem
    }

    .is-block-touch {
        display: block !important
    }
}

@media screen and (min-width: 1024px) {
    .columns.is-variable.is-0-desktop {
        --columnGap: 0rem
    }

    .columns.is-variable.is-1-desktop {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-desktop {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-desktop {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-desktop {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-desktop {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-desktop {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-desktop {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-desktop {
        --columnGap: 2rem
    }

    .is-block-desktop {
        display: block !important
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .columns.is-variable.is-0-desktop-only {
        --columnGap: 0rem
    }

    .columns.is-variable.is-1-desktop-only {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-desktop-only {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-desktop-only {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-desktop-only {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-desktop-only {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-desktop-only {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-desktop-only {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-desktop-only {
        --columnGap: 2rem
    }

    .is-block-desktop-only {
        display: block !important
    }
}

@media screen and (min-width: 1216px) {
    .columns.is-variable.is-1-widescreen {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-widescreen {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-widescreen {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-widescreen {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-widescreen {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-widescreen {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-widescreen {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-widescreen {
        --columnGap: 2rem
    }

    .is-block-widescreen {
        display: block !important
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .columns.is-variable.is-0-widescreen-only {
        --columnGap: 0rem
    }

    .columns.is-variable.is-1-widescreen-only {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-widescreen-only {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-widescreen-only {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-widescreen-only {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-widescreen-only {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-widescreen-only {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-widescreen-only {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-widescreen-only {
        --columnGap: 2rem
    }

    .is-block-widescreen-only {
        display: block !important
    }
}

@media screen and (min-width: 1408px) {
    .columns.is-variable.is-1-fullhd {
        --columnGap: 0.25rem
    }

    .columns.is-variable.is-2-fullhd {
        --columnGap: 0.5rem
    }

    .columns.is-variable.is-3-fullhd {
        --columnGap: 0.75rem
    }

    .columns.is-variable.is-4-fullhd {
        --columnGap: 1rem
    }

    .columns.is-variable.is-5-fullhd {
        --columnGap: 1.25rem
    }

    .columns.is-variable.is-6-fullhd {
        --columnGap: 1.5rem
    }

    .columns.is-variable.is-7-fullhd {
        --columnGap: 1.75rem
    }

    .columns.is-variable.is-8-fullhd {
        --columnGap: 2rem
    }

    .is-block-fullhd {
        display: block !important
    }

    .is-flex-fullhd {
        display: flex !important
    }
}

.is-flex {
    display: flex !important
}

@media screen and (max-width: 768px) {
    .is-flex-mobile {
        display: flex !important
    }
}

@media screen and (min-width: 769px), print {
    .is-flex-tablet {
        display: flex !important
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .is-flex-tablet-only {
        display: flex !important
    }
}

@media screen and (max-width: 1023px) {
    .is-flex-touch {
        display: flex !important
    }
}

@media screen and (min-width: 1024px) {
    .is-flex-desktop {
        display: flex !important
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .is-flex-desktop-only {
        display: flex !important
    }
}

@media screen and (min-width: 1216px) {
    .is-flex-widescreen {
        display: flex !important
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .is-flex-widescreen-only {
        display: flex !important
    }

    .is-hidden-widescreen-only {
        display: none !important
    }
}

.is-hidden {
    display: none !important
}

.is-sr-only {
    border: none !important;
    clip: rect(0, 0, 0, 0) !important;
    height: .01em !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: .01em !important
}

.is-invisible {
    visibility: hidden !important
}

@media screen and (max-width: 768px) {
    .is-hidden-mobile {
        display: none !important
    }

    .is-invisible-mobile {
        visibility: hidden !important
    }
}

@media screen and (min-width: 769px), print {
    .is-hidden-tablet {
        display: none !important
    }

    .is-invisible-tablet {
        visibility: hidden !important
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .is-hidden-tablet-only {
        display: none !important
    }

    .is-invisible-tablet-only {
        visibility: hidden !important
    }
}

@media screen and (max-width: 1023px) {
    .is-hidden-touch {
        display: none !important
    }

    .is-invisible-touch {
        visibility: hidden !important
    }
}

@media screen and (min-width: 1024px) {
    .is-hidden-desktop {
        display: none !important
    }

    .is-invisible-desktop {
        visibility: hidden !important
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .is-hidden-desktop-only {
        display: none !important
    }

    .is-invisible-desktop-only {
        visibility: hidden !important
    }
}

@media screen and (min-width: 1216px) {
    .is-hidden-widescreen {
        display: none !important
    }

    .is-invisible-widescreen {
        visibility: hidden !important
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .is-invisible-widescreen-only {
        visibility: hidden !important
    }
}

@media screen and (min-width: 1408px) {
    .is-hidden-fullhd {
        display: none !important
    }

    .is-invisible-fullhd {
        visibility: hidden !important
    }
}

.w-title, .w-toolbar {
    border-bottom: 1px solid #e4e7ea
}

#block-breadcrumbs ol, .w-toolbar-icons {
    padding: 0;
    margin: 0
}

.w-dropdown, .w-header-main, .w-search-bar {
    position: relative
}

.icon-search::before, .w-search-button::before {
    content: "\e800"
}

@font-face {
    font-family: "PT Sans";
    src: url(/static/fonts/PTSans-Italic.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "PT Sans";
    src: url(/static/fonts/PTSans-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: fontello;
    src: url(/static/fonts/fontello.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

body {
    font-family: "PT Sans", Verdana, sans-serif
}

.visually-hidden {
    display: none
}

li {
    margin-bottom: .5rem
}

a {
    color: #207bbd
}

a:visited {
    color: #8e44ad
}

a:hover {
    color: #f05347
}

.w-toolbar {
    background-color: #f5f6f8
}

.w-toolbar .column, .w-toolbar .columns {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0
}

.w-toolbar-icons {
    display: flex;
    list-style: none
}

.w-toolbar-icons a {
    color: #848994;
    padding: 5px 10px;
    display: block
}

.w-toolbar-icons a:hover {
    color: #50a2de
}

.w-toolbar-icons li {
    border-right: 1px solid #e4e7ea
}

.w-toolbar-icons li:first-child {
    border-left: 1px solid #e4e7ea
}

.w-logo, .w-menu-main {
    padding: .4rem 0
}

.w-header-main {
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15)
}

.w-header-main .column, .w-header-main .columns {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0
}

.w-search-button {
    margin-left: 1em;
    cursor: pointer
}

.w-search-button:hover {
    color: #f05347
}

.w-search-button::before {
    font-family: fontello
}

#block-breadcrumbs li:first-child::before, .w-about-author-info-social a[href*="//"]::after {
    content: none
}

.w-search-input {
    position: absolute;
    z-index: 10;
    width: 30rem;
    right: 0;
    padding: 10px;
    background: #50a2de
}

.w-logo {
    font-size: 1.8rem;
    margin-right: 2rem
}

.w-logo .w-logo-p1 {
    color: #3b4550
}

.w-logo .w-logo-p2 {
    color: #50a2de;
    font-weight: 700
}

.w-title {
    padding: 1rem 0;
    background-color: #f5f6f8
}

.w-title h1 {
    font-size: 1.6rem;
    font-weight: 400;
    color: #3b4550;
    margin: 0
}

#block-breadcrumbs li {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    margin: 1rem auto
}

#block-breadcrumbs li::before {
    content: "в–є";
    font-size: .6rem;
    padding: 0 .5rem
}

footer {
    margin-top: 2rem
}

footer .w-logo {
    color: #8f98a2;
    margin: .5rem 0 1rem
}

footer .counter {
    margin-top: .5rem
}

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

.w-footer-top {
    background: #f3f4f4;
    border-top: 1px solid #d1d7df;
    padding-bottom: 1rem
}

.w-footer-top h3 {
    font: 400 1.4rem/1.2 "PT Sans", sans-serif;
    color: #293848;
    margin: 1rem 0 .5rem
}

.w-footer-editor {
    margin: 0
}

.w-footer-about, .w-footer-address {
    margin-bottom: .5rem
}

.w-footer-bottom {
    background: #141c23;
    color: #ccc;
    padding-bottom: .5rem
}

.w-footer-bottom a, .w-footer-bottom a:visited {
    color: #a9b5bd
}

.w-footer-bottom a:hover {
    color: #50a2de
}

.w-footer-bottom h3 {
    font: 400 1.2rem/1.2 "PT Sans", sans-serif;
    color: #fff;
    border-bottom: 1px solid #3c4247;
    padding-bottom: .5rem;
    margin: 0 0 .5rem
}

.w-footer-copyright, .w-footer-hosting {
    background: #141c23;
    padding: 1rem 0;
    border-top: 1px solid #3c4247
}

.w-footer-copyright {
    color: #ccc
}

.w-footer-copyright a {
    color: #a9b5bd;
    text-decoration: underline
}

.w-footer-copyright a:hover {
    color: #50a2de
}

.w-footer-hosting {
    text-align: center;
    color: #ccc
}

.w-footer-hosting p {
    margin: 0
}

.w-footer-hosting a {
    color: #a9b5bd;
    text-decoration: underline
}

.w-footer-hosting a:hover {
    color: #50a2de
}

.w-footer-hosting .hosting-logo {
    vertical-align: middle;
    margin-right: 2ch
}

.w-footer-menu i, .w-footer-reference i {
    display: inline-block;
    width: 1.6rem
}

.w-footer-menu img, .w-footer-reference img {
    margin-right: 6px;
    vertical-align: middle
}

.w-menu-main a, .w-menu-main a:visited {
    color: #3e8ed0
}

.w-menu-main a:hover {
    color: #f05347
}

.w-menu-main a.is-active {
    color: #000;
    font-weight: 700
}

.w-menu-main a.is-active:hover {
    background-color: transparent
}

.w-menu-main .navbar-dropdown, .w-menu-main span, .w-menu-main span:hover {
    color: #848994
}

.w-menu-main .navbar-dropdown a.is-active, .w-menu-main span a.is-active {
    color: #000
}

.w-menu-main .navbar-link::after {
    border-color: #50a2de
}

.toc ul, .w-dropdown ul {
    border: 1px solid #ebebeb
}

.w-dropdown span {
    color: #848994;
    font-weight: 600;
    cursor: pointer
}

.w-dropdown span::after {
    content: "в–ј";
    padding-left: 5px
}

.w-dropdown ul {
    position: absolute;
    margin: 0;
    display: none;
    padding: 5px;
    background: #fff;
    min-width: 7rem;
    z-index: 3
}

.w-dropdown ul li {
    white-space: nowrap;
    display: block
}

.example-row-highlight-fail, .example-row-highlight-fix {
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal
}

.w-dropdown ul li a {
    display: block;
    width: 100%
}

.w-dropdown:hover ul {
    display: block
}

.w-region-sidebar-toc {
    position: sticky;
    top: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem
}

.w-category-parent {
    margin-top: 50px
}

.w-category-grid {
    border: 1px solid #e9eaec;
    padding: 1rem;
    height: 100%;
    position: relative
}

.w-category-grid-img {
    position: absolute;
    left: calc(50% - 45px);
    top: -45px;
    background-color: #5bd4b6;
    border-radius: 50%;
    padding: 20px;
    font-size: 0
}

.w-category-grid-title {
    text-align: center;
    padding-top: 40px;
    line-height: 1.1;
    margin-bottom: .5rem
}

#w-course h2.w-list-title, .info, .note, .w-tabs, h1.title-404, pre {
    margin-bottom: 1rem
}

.w-category-grid-descr {
    font-size: .94rem;
    line-height: 1.2
}

.w-type-quiz .w-category-grid-img {
    background-color: #50c5de
}

.w-type-course .w-category-grid-img {
    background-color: #5fcbcd
}

#w-course h2.w-list-title {
    text-align: center;
    background: #f0f0f0;
    padding: .5rem
}

p.support {
    border-top: 3px double;
    border-bottom: 3px double;
    text-align: center
}

.profmarkup {
    border: 1px solid #000;
    clear: both;
    margin-bottom: 1em
}

.profmarkup h4 {
    margin: 0;
    background: #000;
    color: #fff;
    padding: 5px 10px
}

.profmarkup .inner {
    background: url(/assets/images/diveintohtml5/little_professor.png) 100% 100% no-repeat;
    min-height: 280px;
    padding-top: 20px;
    margin-right: 10px
}

.profmarkup p {
    padding-right: 200px;
    margin-left: 3em
}

.profmarkup span.q {
    float: left;
    font-size: 2em;
    display: block;
    margin: -.2em 5px 0 -1.3em
}

.leftpic {
    float: left;
    margin: 0 20px 10px 0;
    text-align: center
}

#toc-html, .is-pulled-right, .rightpic, .toc {
    float: right
}

.rightpic {
    margin: 0 0 10px 20px;
    text-align: center
}

.accordion-example .accordion .baffle-inner :first-child, .example-table-layout p, h1.title-404 {
    margin-top: 0
}

.example-display .example-content * {
    background: #eee;
    border: .125em solid;
    margin-bottom: .5em;
    padding: .5em
}

.example-row-highlight-fail .example-row:hover, .example-row-highlight-fix .example-row:hover {
    background: #ccc
}

.example-display .example-content .block {
    display: block
}

.example-display .example-content .inline {
    display: inline
}

.example-display .example-content .inline-block {
    display: inline-block
}

.example-row-highlight-fail .example-row {
    display: block
}

.example-row-highlight-fix .inline-block {
    display: inline-block
}

.example-row-highlight-fix .example-row {
    display: block
}

.example-text-align-justify {
    max-width: 100%
}

.example-text-align-justify .grid {
    border: .125rem solid;
    text-align: justify;
    font-size: 0;
    padding: 4%
}

.accordion-example .accordion label, .branding-color h2, .button, .fig, .figsign, .page-up, .typography-example-1, .typography-example-2, .typography-example-3, .w-help-grid-img, table td.text-center {
    text-align: center
}

.example-text-align-justify .box {
    font-size: 1rem;
    display: inline-block;
    background: #eee;
    border: .125em solid;
    width: 30%;
    padding: 2%
}

.example-text-align-justify .box:nth-last-child(n+5) {
    margin-bottom: 4%
}

.example-text-align-justify .break {
    display: inline-block;
    width: 30%;
    height: 0
}

.example-table-layout table {
    background: 0 0;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em
}

.example-table-layout table td {
    border: .125em solid #ccc
}

.example-table-layout a {
    text-shadow: none
}

.example-table-layout-sized-percent table tr td:nth-child(1) {
    width: 20%
}

.example-table-layout-sized-percent table tr td:nth-child(2) {
    width: 50%
}

.example-table-layout-sized table tr td:nth-child(1) {
    width: 400px
}

.example-table-layout-sized table tr td:nth-child(2) {
    width: 70%
}

.branding-color {
    border-radius: .1875em;
    margin-bottom: .25rem;
    display: inline-block
}

.branding-color h2 {
    padding: 0 1em;
    display: inline-block;
    color: #fff;
    font-weight: 400;
    opacity: 0;
    transition: opacity .3s;
    cursor: default;
    font-size: 1.2em;
    margin: 1em 0;
    line-height: .8em
}

.branding-color:hover h2 {
    opacity: 1
}

.typography-example {
    line-height: normal;
    margin: 2rem 0;
    position: relative
}

.typography-example, .typography-example * {
    cursor: default
}

.typography-example:before {
    content: "Наведите для просмотра перехода";
    text-transform: uppercase;
    position: absolute;
    top: .625rem;
    left: .625rem;
    font-size: .625rem;
    letter-spacing: .1em;
    transition: opacity .2s;
    transition-delay: 2s
}

.typography-example:hover:before {
    transition-delay: 0s;
    opacity: 0
}

.typography-example-1 {
    background-image: linear-gradient(135deg, #723362, #9d223c);
    background-color: #9d223c;
    color: #fff;
    padding: 1em 0 1em .4em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .4em;
    font-size: 1.8em
}

.typography-example-1 span {
    opacity: 0;
    transition: opacity 1.3s
}

.typography-example-1 span:nth-child(1) {
    transition-delay: .2s
}

.typography-example-1 span:nth-child(2) {
    transition-delay: 1.2s
}

.typography-example-1 span:nth-child(3) {
    transition-delay: .8s
}

.typography-example-1 span:nth-child(4) {
    transition-delay: .3s
}

.typography-example-1 span:nth-child(5) {
    transition-delay: .7s
}

.typography-example-1 span:nth-child(6) {
    transition-delay: .6s
}

.typography-example-1 span:nth-child(7) {
    transition-delay: .4s
}

.typography-example-1 span:nth-child(8) {
    transition-delay: .9s
}

.typography-example-1 span:nth-child(9) {
    transition-delay: .7s
}

.typography-example-1 span:nth-child(10) {
    transition-delay: 50ms
}

.typography-example-1:hover span {
    opacity: 1
}

.typography-example-2 {
    background: #fff;
    border: .5em solid #000;
    color: #000;
    padding: 1em 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5em;
    overflow: hidden
}

.typography-example-2 .title2 {
    display: block;
    letter-spacing: .4em;
    padding-left: .4em
}

.typography-example-2 .author2 {
    font-style: italic;
    font-weight: 300;
    color: #888;
    font-size: .7em;
    text-transform: none;
    letter-spacing: .12em;
    padding-left: .12em
}

.typography-example-2 .author2 span, .typography-example-2 .title2 span {
    display: inline-block;
    opacity: 0;
    transition: transform .8s, opacity .8s
}

.typography-example-2 .title2 span {
    transform: translateZ(0) translateY(-6rem)
}

.typography-example-2 .author2 span {
    transform: translateZ(0) translateY(6rem)
}

.typography-example-2:hover .author2 span, .typography-example-2:hover .title2 span {
    opacity: 1;
    transition: transform .8s, opacity 1.2s;
    transform: translateZ(0) translateY(0)
}

.typography-example-2 .title2 span:nth-child(1) {
    transition-delay: 360ms, .3s
}

.typography-example-2 .title2 span:nth-child(2) {
    transition-delay: 420ms, .3s
}

.typography-example-2 .title2 span:nth-child(3) {
    transition-delay: 480ms, .3s
}

.typography-example-2 .title2 span:nth-child(4) {
    transition-delay: 540ms, .3s
}

.typography-example-2 .title2 span:nth-child(5) {
    transition-delay: .6s, .3s
}

.typography-example-2 .title2 span:nth-child(6) {
    transition-delay: 660ms, .3s
}

.typography-example-2 .author2 span:nth-child(1) {
    transition-delay: 420ms, 0s
}

.typography-example-2 .author2 span:nth-child(2) {
    transition-delay: 390ms, 0s
}

.typography-example-2 .author2 span:nth-child(3) {
    transition-delay: 360ms, 0s
}

.typography-example-2 .author2 span:nth-child(4) {
    transition-delay: 330ms, 0s
}

.typography-example-2 .author2 span:nth-child(5) {
    transition-delay: .3s, 0s
}

.typography-example-2 .author2 span:nth-child(6) {
    transition-delay: 270ms, 0s
}

.typography-example-2 .author2 span:nth-child(7) {
    transition-delay: 240ms, 0s
}

.typography-example-2 .author2 span:nth-child(8) {
    transition-delay: 210ms, 0s
}

.typography-example-2 .author2 span:nth-child(9) {
    transition-delay: 180ms, 0s
}

.typography-example-2 .author2 span:nth-child(10) {
    transition-delay: 150ms, 0s
}

.typography-example-2 .author2 span:nth-child(11) {
    transition-delay: 120ms, 0s
}

.typography-example-2 .author2 span:nth-child(12) {
    transition-delay: 90ms, 0s
}

.typography-example-2 .author2 span:nth-child(13) {
    transition-delay: 60ms, 0s
}

.typography-example-2:hover .author2 span, .typography-example-2:hover .title2 span {
    transition-delay: 0;
}

.typography-example-3 {
    border: .2em solid #ff4136;
    font-size: 3em;
    padding: .2em;
    color: #fff
}

.typography-example-3 .letter {
    display: inline-block;
    width: 20%;
    padding: .8125rem;
    position: relative;
    perspective: 20rem
}

.typography-example-3 .letter:before {
    content: "В "
}

.typography-example-3 .back, .typography-example-3 .front {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1.75em;
    backface-visibility: hidden;
    transition: -webkit-transform .8s
}

.typography-example-3 .letter:nth-child(1) .front {
    background: #ff4136
}

.typography-example-3 .letter:nth-child(2) .front {
    background: #ff851b
}

.typography-example-3 .letter:nth-child(3) .front {
    background: #2ecc40
}

.typography-example-3 .letter:nth-child(4) .front {
    background: #0074d9
}

.typography-example-3 .letter:nth-child(5) .front {
    background: #b10dc9
}

.typography-example-3 .back {
    border: .5rem solid;
    background: #fff;
    color: #000;
    transform: translateZ(0) rotateY(-180deg);
    line-height: 1.5em
}

.typography-example-3 .letter:nth-child(1) .back {
    border-color: #ff4136
}

.typography-example-3 .letter:nth-child(2) .back {
    border-color: #ff851b
}

.typography-example-3 .letter:nth-child(3) .back {
    border-color: #2ecc40;
    background: #2ecc40;
    color: #fff
}

.typography-example-3 .letter:nth-child(4) .back {
    border-color: #0074d9;
    background: #0074d9;
    color: #fff
}

.typography-example-3 .letter:nth-child(5) .back {
    border-color: #b10dc9;
    background: #b10dc9;
    color: #fff
}

.typography-example-3:hover .back {
    transform: translateZ(0) rotateY(0)
}

.typography-example-3:hover .front {
    transform: translateZ(0) rotateY(180deg)
}

.typography-example-3 .letter:nth-child(1) span {
    transition-delay: .2s
}

.typography-example-3 .letter:nth-child(2) span {
    transition-delay: .4s
}

.typography-example-3 .letter:nth-child(3) span {
    transition-delay: .6s
}

.typography-example-3 .letter:nth-child(4) span {
    transition-delay: .8s
}

.typography-example-3 .letter:nth-child(5) span {
    transition-delay: 1s
}

.typography-example-3:before {
    background: #ff4136;
    z-index: 1
}

.accordion-example .accordion input[type=radio] {
    position: absolute;
    left: -9999rem
}

.accordion-example .accordion label {
    display: block;
    background: #4f6f8b;
    color: #fff;
    padding: 1rem 0 1rem .13em;
    font-size: .8em;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    height: 3.3rem;
    font-weight: 300;
    transition: background .4s, color .4s, border-radius .4s
}

.accordion-example .accordion label:hover {
    background: #385670
}

.accordion-example .accordion .baffle {
    position: relative;
    height: 3.3rem;
    overflow: hidden;
    transition: height .4s;
    transform: translateZ(0)
}

.accordion-example .accordion .baffle-inner {
    padding: 1.25rem;
    background: #eee;
    position: absolute;
    top: 3.3rem;
    left: 0;
    height: 13.5rem;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden
}

.accordion-example .accordion .baffle:first-of-type label {
    border-radius: .25rem .25rem 0 0
}

.accordion-example .accordion .baffle:last-of-type .baffle-inner, .accordion-example .accordion .baffle:last-of-type label {
    border-radius: 0 0 .25rem .25rem
}

.accordion-example .accordion .baffle-inner :last-child {
    margin-bottom: 0
}

.accordion-example .accordion input[type=radio]:checked + .baffle {
    height: 16.8rem
}

.accordion-example .accordion input[type=radio]:checked + .baffle label {
    background: #eee;
    color: inherit;
    box-shadow: inset 0 -1px rgba(0, 0, 0, .15);
    font-weight: 300
}

.accordion-example .accordion input[type=radio]:checked + .baffle:not(:first-of-type) label {
    border-radius: 0
}

.accordion-example .accordion input[type=radio]:not(:checked) + .baffle + input[type=radio]:not(:checked) + .baffle label {
    box-shadow: inset 0 1px rgba(0, 0, 0, .15)
}

.accordion-example ::-webkit-scrollbar {
    width: .9375rem
}

.accordion-example ::-webkit-scrollbar-thumb {
    background: #849cb1;
    border: solid #eee;
    border-width: .375rem .375rem .375rem 0;
    border-radius: 0 .375rem .375rem 0
}

.accordion-example ::-webkit-scrollbar-thumb:window-inactive {
    background: #aaa
}

.w-similar {
    column-count: 3
}

.gsc-search-button gsc-search-button-v2 {
    padding: 5px 9px 4px
}

figure.youtube-container {
    margin: 0
}

.w-content-404 {
    padding-top: 3rem
}

h1.title-404 {
    font-size: 3rem
}

h2.title-404 {
    margin-top: 1rem
}

.err403 {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.err403 p {
    width: 400px;
    padding: 20px;
    background: #e23b30;
    border: 2px solid #333;
    color: #fff;
    font-size: 1.2em
}

.w-tabs ul {
    margin: 0;
    padding: 0
}

.w-tabs li {
    margin-bottom: 0
}

.w-tabs-browser {
    display: block
}

.w-tabs-browser ul {
    margin-bottom: 1em
}

h2, h3 {
    margin-top: 2rem;
    margin-bottom: -.5rem
}

.w-tabs-item {
    display: none
}

.w-tabs-item.is-active {
    display: block
}

h2 {
    font-size: 1.6rem;
    font-weight: 400
}

.w-category-grid h2, .w-help-grid-descr h2 {
    margin-top: 0
}

.fig {
    margin-bottom: .5rem
}

.figsign {
    font: italic 1rem Georgia, Times, serif;
    margin: .3rem 0 1.3rem !important
}

main a.ext::after, main a[href*="//"]::after {
    font-family: fontello;
    content: "\e805";
    font-size: 10px;
    position: relative;
    top: -1px;
    padding-left: 4px;
    white-space: nowrap
}

.value {
    color: #31a354
}

.exampleTitle {
    font-weight: 700;
    color: #685c53;
    margin-bottom: 0
}

.w-tag-item {
    display: inline-block;
    margin-right: 20px
}

.w-tag-item::before {
    font-family: fontello;
    content: "\e809";
    padding-right: 5px;
    color: #71757f
}

@font-face {
    font-family: "Fira Mono";
    src: local("Fira Mono"), local("FiraMono"), url(/themes/webref/font/FiraMono.eot#iefix) format("embedded-opentype"), url(/static/fonts/FiraMono-Bold.woff) format("woff"), url(/static/fonts/FiraMono-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

.w-example {
    background: #3b444a;
    padding: 4px;
    margin: .5rem 0
}

.w-example pre {
    margin-bottom: 0;
    border: none;
    border-bottom: 2px solid #333;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 400px
}

.w-example .column {
    display: flex
}

.w-example.no-result {
    padding: 1px
}

@media screen and (min-width: 1024px) {
    .w-example pre {
        border: none;
        margin-top: 0
    }
}

.w-example-toolbar {
    background: #3b444a;
    overflow: hidden;
    padding-bottom: 3px;
    color: #b1c0c9
}

.w-example-toolbar span {
    padding: 3px 5px;
    cursor: pointer
}

.w-example-toolbar span:hover {
    color: #ffb01f
}

.is-pulled-left {
    float: left
}

.w-example-result {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #fff;
    display: block
}

.multipane {
    display: flex
}

.pane {
    position: relative;
    z-index: 1
}

.pane-l-desktop {
    width: 40%
}

.pane-l-mobile {
    width: 100%
}

.pane-r-desktop {
    flex-grow: 1
}

.multipane-resizer {
    position: relative;
    width: 5px;
    cursor: col-resize;
    z-index: 2
}

.multipane-vertical {
    flex-direction: column
}

.multipane-vertical .pane-l-desktop {
    border-bottom: 2px solid #333
}

.multipane-horizontal .pane-l-desktop {
    min-width: 20%;
    max-width: 80%
}

@media screen and (max-width: 1023px) {
    .multipane {
        display: block
    }

    .pane-mobile {
        width: 100%;
        max-width: 100%
    }
}

code {
    border: none;
    background: 0 0;
    color: inherit;
    padding: 0
}

pre {
    background: #f8f7f7;
    color: #333;
    border: 1px solid #e9e8e8;
    border-radius: 3px;
    word-wrap: break-word;
    padding: 6px 10px;
    line-height: 1.1rem;
    font-size: .94rem;
    overflow: auto;
    font-family: "Fira Mono", "Courier New", Courier, monospace
}

pre code {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-family: "Fira Mono", "Courier New", Courier, monospace
}

.comment {
    color: #998;
    font-style: italic
}

.support {
    color: #756bb1
}

.tag, .tag-name {
    color: #3182bd
}

.tag {
    color: navy
}

.css-property, .support.namespace, .vendor-prefix {
    color: #e6550d
}

.constant.numeric, .css-value, .hex-color, .keyword.unit, .value {
    color: #31a354
}

.entity.function, .entity.id {
    color: #900
}

.attribute, .variable {
    color: #e6550d
}

.string, .support.value {
    color: #31a354
}

.regexp {
    color: #009926
}

.var {
    font: .94em Consolas, Courier, Menlo, monospace;
    color: #666
}

.class {
    background: #f5f6f8;
    padding: 0 2px;
    border-radius: 2px
}

.entity.class {
    background: 0 0;
    padding: 0;
    color: inherit
}

mark {
    background: #dce6ed
}

.attribute {
    white-space: nowrap
}

.menuitem {
    background: #f8f6e3;
    padding: 0 2px
}

kbd {
    color: #444;
    text-shadow: 0 1px 0 #fff;
    padding: .15em .45em;
    border-radius: 3px;
    border: 1px solid #bbb;
    background-color: #f7f7f7
}

table {
    width: 100%;
    margin: auto;
    border: 1px solid #e4e7ea
}

table td, table th {
    padding: .5rem
}

tr:nth-child(even) {
    background-color: #f1f1f1
}

caption {
    padding: .5rem .625rem .625rem;
    font-weight: 700
}

a.button {
  display: inline-block;
  background: #2196f3;
  color: #fff;
  padding: 12px;
  border-radius: 3px;
  text-decoration: none;
  font-family: Tahoma;
  font-size: 18px;
  line-height: 1;
  font-weight: 100;
}

.button[disabled] {
    cursor: not-allowed;
    opacity: .6
}

a.button {
    display: inline-block
}

.button.is-primary {
    background: linear-gradient(#fdfefe, #f5f6f6);
    border: 1px solid #e9eaec;
    color: #50a2de
}

.button.is-primary:hover {
    background: #f05347;
    color: #fff;
    border-color: #f05347
}

.button.is-link {
    background-color: transparent;
    border-color: transparent
}

.info, .note {
    background: #fff3d9;
    padding: 10px;
    border-left: 3px solid #ffae00
}

.info {
    background-color: #def0fc;
    border-left: 3px solid #3498db
}

.w-help-grid-img {
    background: #7f8c8d
}

.w-help-grid-img img {
    padding: 1rem;
    box-sizing: content-box
}

.toc, .toc > li {
    position: relative;
    padding: 3px
}

#toc-html {
    margin: 0 0 20px 10px;
    width: 200px;
    position: relative;
    z-index: 10
}

.toc {
    font-size: .9rem;
    margin: 0 0 1rem;
    z-index: 10
}

.system-main .menu > li > a {
    display: inline
}

.toc > li {
    background: #f5f6f8;
    cursor: pointer
}

.toc > li::after {
    content: "в–ј";
    padding-left: 4px
}

.toc > li:hover ul {
    display: block
}

.toc li {
    list-style: none;
    white-space: nowrap
}

.toc a {
    padding: 0
}

.toc ul {
    position: absolute;
    left: 0;
    margin: 0;
    display: none;
    padding: 5px;
    background: #f8f8f8
}

.page-next a, .page-previous a, .practice, .w-autocomplete {
    position: relative
}

.toc ul a {
    display: block
}

.w-book-navigation {
    margin-bottom: 2rem
}

.page-next, .w-credit-changed {
    text-align: right
}

.page-next a, .page-previous a {
    display: inline-block;
    vertical-align: middle;
    padding: .43em .7em;
    line-height: 1.7em;
    margin-left: .9375em;
    transition: .3s;
    border-radius: 0 4px 4px 0
}

.page-next a:hover, .page-previous a:hover {
    background: #f05347;
    color: #fff !important
}

.page-next a {
    margin-right: .9375em;
    border-radius: 4px 0 0 4px
}

.page-next a::after, .page-previous a::after {
    content: "";
    position: absolute;
    background: 0 0;
    height: 0;
    width: 0;
    border: 1.25em solid;
    top: 50%;
    margin-top: -1.25em;
    right: 100%;
    transition: .3s;
    border-color: transparent #f05347 transparent transparent
}

.page-next a::after {
    left: 100%;
    border-color: transparent transparent transparent #f05347
}

.page-previous a:hover::after {
    border-color: transparent #f05347 transparent transparent
}

.page-next a:hover::after {
    border-color: transparent transparent transparent #f05347
}

.book {
    background: #F6F1DA;
    padding: 5px 20px;
    margin-bottom: 20px
}

.navigation-tooltip {
    display: inline-block;
    margin: 10px 26px 0;
    word-spacing: 3px
}

.field-label-inline {
    margin-bottom: 1rem
}

.field-label-inline div {
    display: inline
}

.w-credit {
    font-size: .9em;
    color: #333;
    background: #f8f8f8;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 2.5rem 0 1.5rem;
    opacity: .9;
    border-radius: 3px
}

.w-about-author {
    margin-top: 2rem
}

.w-about-author h2 {
    font-size: 18px;
    margin-top: 0;
    text-transform: uppercase;
    word-spacing: .3em
}

.w-about-author-photo img {
    width: 120px;
    border-radius: 50%;
    border: 3px solid #e4e7ea
}

.w-about-author-info-social a {
    background-color: #e4e7ea;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #9fa4af;
    border-radius: 50%;
    margin-right: 10px;
    transition: background-color .3s
}

.w-about-author-info-social a:hover {
    background-color: #f05347;
    color: #fff
}

.w-book-toc {
    background: #f5f6f8;
    border-top: 1px solid #e9eaec;
    margin: 2rem 0 0;
    padding: 1rem 0
}

.w-book-toc .w-block-menu {
    font-size: 1rem
}

.w-book-toc .w-block-menu li {
    list-style: disc inside
}

.w-book-toc .w-block-menu a {
    display: inline-block;
    padding: 0
}

.w-book-toc .w-block-title {
    margin-top: 0;
    margin-bottom: .5rem
}

.w-sidebar .w-block {
    margin-bottom: 20px;
    padding: 15px 15px 10px;
    border: 1px solid #e4e7ea;
    border-radius: 5px;
    min-width: 250px
}

.w-sidebar h3 {
    margin-bottom: .3rem
}

.w-block-title {
    font: 700 1.1rem PTSans, sans-serif;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e4e7ea
}

.w-block-menu {
    padding: 0;
    margin: 0;
    font-size: .9rem
}

.w-block-menu li {
    list-style: none;
    margin: 0
}

.w-block-menu a {
    display: block;
    padding: 3px 0
}

.w-block-menu a.is-active {
    margin: 0 -15px;
    padding: 5px 5px 5px 15px;
    background: #73ab16;
    color: #fff;
    text-decoration: none
}

.w-block-menu a.is-active:hover {
    color: #fff
}

.w-block-menu a.is-active.is-parent {
    background: 0 0;
    color: #207bbd
}

.w-block-menu a.is-active.is-parent:hover {
    color: #f05347
}

.w-block-menu a.is-active.is-parent:visited {
    color: #8e44ad
}

#block-css-fun .w-block-menu a.is-active {
    margin-right: 0
}

.w-block-menu-2 {
    padding-left: 20px
}

.w-block-menu-2 a.is-active {
    margin: 0 -15px 0 -35px;
    padding-left: 35px
}

#block-html-css-search {
    padding: 0;
    border: none
}

#block-css-fun, #block-css-ref, #block-html-attr, #block-html-element, .w-sidebar #block-book-toc {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden
}

#block-css-fun::-webkit-scrollbar, #block-css-ref::-webkit-scrollbar, #block-html-attr::-webkit-scrollbar, #block-html-element::-webkit-scrollbar, .w-sidebar #block-book-toc::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

#block-css-fun::-webkit-scrollbar-thumb, #block-css-ref::-webkit-scrollbar-thumb, #block-html-attr::-webkit-scrollbar-thumb, #block-html-element::-webkit-scrollbar-thumb, .w-sidebar #block-book-toc::-webkit-scrollbar-thumb {
    background: #7f8c8d
}

#block-css-fun::-webkit-scrollbar-track-piece, #block-css-ref::-webkit-scrollbar-track-piece, #block-html-attr::-webkit-scrollbar-track-piece, #block-html-element::-webkit-scrollbar-track-piece, .w-sidebar #block-book-toc::-webkit-scrollbar-track-piece {
    background: #ebedf1
}

.recommend-course {
    display: flex;
    margin-bottom: 5px
}

.recommend-course-img {
    background: #5fcbcd;
    padding: 7px;
    margin-right: 10px
}

.recommend-course-img img {
    width: 30px;
    height: 30px;
    display: block
}

.recommend-course-title {
    align-self: center;
    font-size: .9rem
}

[class*=" icon-"]::before, [class^=icon-]::before {
    font-family: fontello;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    text-decoration: inherit;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em
}

.icon-ie::before {
    content: "\e801"
}

.icon-ios::before {
    content: "\e802"
}

.icon-warning::before {
    content: "\e803"
}

.icon-chrome::before {
    content: "\e804"
}

.icon-popup::before {
    content: "\e805"
}

.icon-jsfiddle::before {
    content: "\e806"
}

.icon-rss::before {
    content: "\e807"
}

.icon-codepen::before {
    content: "\e808"
}

.icon-tag::before {
    content: "\e809"
}

.icon-android::before {
    content: "\e80a"
}

.icon-play::before {
    content: "\e80b"
}

.autocomplete-result .html span::before, .icon-html5::before {
    content: "\e80c"
}

.icon-github::before {
    content: "\e80d"
}

.icon-trash::before {
    content: "\e80e"
}

.icon-book::before {
    content: "\e80f"
}

.icon-gear::before {
    content: "\e810"
}

.icon-safari::before {
    content: "\e811"
}

.icon-opera::before {
    content: "\e812"
}

.icon-layout::before {
    content: "\e813"
}

.icon-calendar::before {
    content: "\e814"
}

.icon-firefox::before {
    content: "\e816"
}

.icon-pencil::before {
    content: "\e817"
}

.icon-doc-text::before {
    content: "\e818"
}

.icon-user::before {
    content: "\e819"
}

.icon-users::before {
    content: "\e81a"
}

.icon-ok::before {
    content: "\e81b"
}

.icon-cancel::before {
    content: "\e81c"
}

.icon-help::before {
    content: "\e81d"
}

.icon-mobile::before {
    content: "\e81e"
}

.icon-twitter::before {
    content: "\e81f"
}

.icon-vertical-split::before {
    content: "\e820"
}

.icon-right-open::before {
    content: "\e821"
}

.icon-left-open::before {
    content: "\e822"
}

.icon-horizontal-split::before {
    content: "\e823"
}

.icon-facebook::before {
    content: "\e824"
}

.icon-vk::before {
    content: "\e825"
}

.icon-linkedin::before {
    content: "\e826"
}

.icon-email::before {
    content: "\e827"
}

.icon-home::before {
    content: "\e829"
}

.icon-css3::before {
    content: "\e82a"
}

.icon-edge::before {
    content: "\e82b"
}

.icon-bookmark::before {
    content: "\e82c"
}

.icon-youtube::before {
    content: "\e82d"
}

.icon-desktop::before {
    content: "\e82e"
}

.icon-copy::before {
    content: "\f0c5"
}

.input, .textarea {
    box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
    max-width: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    color: #363636;
    border: 1px solid #dbdbdb;
    padding: .5em .75em;
    font-size: 1rem
}

input[type=search] {
    border-radius: 5px;
    background-color: #f8f7f7;
    display: block;
    width: 100%;
    padding: .5rem;
    border: 1px solid #cacaca;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
    transition: box-shadow .5s, border-color .25s ease-in-out
}

input[type=search]:focus {
    outline: 0;
    border: 1px solid #8a8a8a;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow .5s, border-color .25s ease-in-out
}

.w-autocomplete.open .autocomplete-result {
    display: block
}

.autocomplete-result {
    position: absolute;
    display: none;
    width: 100%;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
    background: #fff;
    text-align: left;
    max-height: 400px;
    overflow: auto;
    padding: 5px;
    margin: 0;
    list-style: none
}

.autocomplete-result li {
    padding: 3px;
    display: block
}

.autocomplete-result li.active {
    background: #f5f6f8
}

.autocomplete-result span {
    cursor: pointer;
    display: block
}

.autocomplete-result .html span::before {
    font-family: fontello;
    padding-right: 10px;
    color: #ec642a
}

.autocomplete-result .css span::before {
    font-family: fontello;
    content: "\e82a";
    padding-right: 10px;
    color: #1572b6
}

#block-similar-block .w-block-title, #block-similar-practice .w-block-title, #block-similar-recipe .w-block-title, .w-ref-section {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    font-weight: 400
}

#tag-filter {
    margin-bottom: 10px;
    border: 1px solid #ebedf1;
    padding: 10px;
    user-select: none
}

#tag-filter .t-html5 i::before, li.t-html5::after {
    color: #ec642a;
    content: "\e80c";
    font-family: fontello;
    margin-left: 10px;
    font-style: normal
}

#tag-filter .t-nonstandart::before, li.t-nonstandart::after {
    color: #666;
    content: "\e80e";
    font-family: fontello;
    margin-left: 10px;
    font-style: normal
}

.tag-alpha {
    margin: 1rem 0;
    padding: 0
}

.tag-alpha li {
    display: inline-block
}

.tag-alpha a {
    background: #f8f8f8;
    padding: 1px 7px;
    margin-right: 5px;
    margin-bottom: 10px
}

.html-heading h3 {
    display: inline-block;
    background: #ebedf1;
    padding: 5px;
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 1.5rem
}

.css-col, .html-col {
    columns: 4 120px;
    margin-left: 0;
    list-style: none
}

.css-col li, .html-col li {
    margin-bottom: .2rem
}

table.data, table.spec {
    width: auto;
    margin: 0
}

table.spec {
    font-size: .9rem
}

table.spec th {
    text-align: left
}

.attr-HTML4-Obsolete::before, .attr-HTML4::before, .attr-HTML5-Obsolete::before, .attr-HTML5::before, .attr-NonStandard::before, .attr-Obsolete::before, .attr-Required::before, .spec-CR::before, .spec-Draft::before, .spec-ED::before, .spec-Living::before, .spec-PR::before, .spec-REC::before, .spec-Standard::before, .spec-WD::before {
    font-size: .7em;
    font-weight: 700;
    min-width: 20px;
    border-radius: 2px;
    letter-spacing: 1px;
    margin: .2em .6em 0 0;
    padding: .45em .35em .35em
}

.attr-HTML4-Obsolete::before, .attr-HTML4::before, .attr-HTML5-Obsolete::before, .attr-HTML5::before, .attr-NonStandard::before, .attr-Obsolete::before, .attr-Required::before {
    font-weight: 400;
    letter-spacing: 0
}

.spec-CR::before {
    content: "CR";
    background-color: rgba(0, 151, 142, .25);
    border-left: 4px solid #00978e;
    color: #00978e
}

.spec-REC::before {
    content: "REC";
    background-color: rgba(48, 156, 64, .25);
    border-left: 4px solid #309c40;
    color: #309c40
}

.spec-ED::before {
    content: "ED";
    background-color: rgba(230, 25, 25, .25);
    border-left: 4px solid #e61919;
    color: #e61919
}

.spec-WD::before {
    content: "WD";
    background-color: rgba(230, 110, 51, .25);
    border-left: 4px solid #e66e33;
    color: #e66e33
}

.spec-PR::before {
    content: "PR";
    background-color: rgba(114, 172, 53, .25);
    border-left: 4px solid #72ac35;
    color: #72ac35
}

.spec-Living::before {
    content: "LS";
    background-color: rgba(0, 83, 159, .25);
    border-left: 4px solid #00539f;
    color: #00539f
}

.spec-Draft::before {
    content: "D";
    background-color: rgba(230, 110, 51, .25);
    border-left: 4px solid #e66e33;
    color: #e66e33
}

.spec-ED {
    color: #e61919
}

.spec-WD {
    color: #e66e33
}

.spec-CR {
    color: #00978e
}

.spec-PR {
    color: #72ac35
}

.spec-REC {
    color: #309c40
}

.spec-Living {
    color: #00539f
}

.spec-Draft {
    color: #e66e33
}

.attr-HTML4::before, .attr-HTML5::before {
    content: "Только для HTML4";
    background-color: #bfd4e7;
    background-color: rgba(0, 83, 159, .25);
    border-left: 4px solid #00539f;
    color: #00539f
}

.attr-HTML5::before {
    content: "HTML5"
}

.attr-HTML4-Obsolete::before, .attr-HTML5-Obsolete::before, .attr-NonStandard::before, .attr-Obsolete::before {
    content: "Устарел";
    background-color: #f9dbcc;
    background-color: rgba(230, 110, 51, .25);
    border-left: 4px solid #e66e33;
    color: #e66e33
}

.attr-HTML4-Obsolete::before {
    content: "Осуждается в HTML4"
}

.attr-HTML5-Obsolete::before {
    content: "Устарел в HTML5"
}

.attr-NonStandard::before {
    content: "Нестандартный"
}

.attr-Required::before {
    content: "Обязательный";
    background-color: #cbe6cf;
    background-color: rgba(48, 156, 64, .25);
    border-left: 4px solid #309c40;
    color: #309c40
}

table.browser {
    width: 100%;
    border-spacing: 2px;
    border-collapse: separate;
    border: 1px solid #e9e8e8
}

.browser td {
    text-align: center
}

.no span::before, .warn span::before, .x3 span::before, .yes span::before {
    font-family: fontello;
    min-height: 16px
}

.yes {
    background: #cee2d3;
    text-align: center
}

.no {
    background: #f2c8c8;
    text-align: center
}

.warn, .x3 {
    background: #f9e497
}

.yes span::before {
    content: "\e81b";
    color: #4b846a;
    padding-right: 5px
}

.no span::before {
    content: "\e81c";
    color: #ce3045;
    padding-right: 3px !important
}

.warn span::before {
    content: "\e803";
    color: #f7941e;
    padding-right: 5px
}

.x3 span::before {
    content: "\e81d"
}

tr.br td {
    background-color: #FAF3D2;
    vertical-align: middle;
    text-align: center
}

tr.sp td {
    text-align: center
}

.w-practice-toolbar.is-right, .w-quiz-progress {
    text-align: right
}

.an::before, .cr::before, .ed::before, .fx::before, .ie::before, .ip::before, .op::before, .sa::before {
    min-height: 16px;
    font-family: fontello;
    font-size: 24px;
    color: #333
}

.ie::before {
    content: "\e801"
}

.ed::before {
    content: "\e82b"
}

.cr::before {
    content: "\e804"
}

.sa::before {
    content: "\e811"
}

.op::before {
    content: "\e812"
}

.fx::before {
    content: "\e816"
}

.an::before {
    content: "\e80a"
}

.browser th {
    padding: 3px
}

td.browser {
    background: #FAF3D2
}

.w-html-category-icon {
    vertical-align: middle;
    margin-right: 4px
}

#block-css-fun .w-block-menu, #block-css-value .w-block-menu {
    columns: 2 110px
}

#block-css-unit .w-block-menu {
    column-count: 3
}

.w-css-playground .columns {
    margin: 0
}

.playground-result {
    transition: 1s
}

.playground-active {
    color: #f05347
}

.playground-result, .playground-values {
    border: 1px solid #e9e8e8;
    border-radius: 3px;
    margin-bottom: 1rem
}

.playground-values label {
    line-height: 1.4;
    display: block
}

.playground-values label > [type=checkbox], .playground-values label > [type=radio] {
    margin-right: .5rem
}

.playground-code {
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0
}

.playground-code pre {
    margin-top: 0
}

.w-tag-list {
    margin-top: 1rem
}

.w-hint-ref {
    cursor: pointer
}

#w-quiz {
    max-width: 60em;
    margin: auto
}

.w-quiz-progress {
    margin: 0 0 .5rem
}

h2.w-quiz-header {
    margin: 0
}

.w-quiz-question, .w-quiz-task {
    font-size: 1.3em;
    margin-bottom: 1rem
}

.w-quiz-answer-code code, .w-quiz-code code {
    font-size: 1em
}

.w-quiz-answer {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: .5em;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: .3s
}

.w-quiz-answer.w-quiz-image {
    text-align: center;
    margin-bottom: 0
}

.w-quiz-code, .w-quiz-img {
    margin-bottom: 1.5rem
}

.w-quiz-answer:hover {
    background-color: rgba(0, 0, 0, .1)
}

.w-quiz-img {
    max-width: 500px
}

.w-quiz-answer-code {
    margin: 0
}

.w-inter-select, .w-modal-button, .w-quiz-input, .w-task-input {
    font-size: 1rem
}

.w-quiz-answer.is-selected {
    background-color: #fda61f;
    border-color: #f29305
}

.w-quiz-answer:active {
    transform: scaleX(.98)
}

.w-center {
    text-align: center
}

.fade-enter-active {
    transition: opacity 1s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}

.w-quiz-slider {
    margin-bottom: 2rem
}

.practice_browser, .practice_css + .CodeMirror, .w-quiz-summary {
    margin-bottom: 1rem
}

.slide-enter-active {
    animation: bounceInRight .8s ease-in-out
}

.w-quiz-summary {
    padding: 1em;
    border-radius: 5px
}

.w-inter-draggable-list, .w-task-write {
    margin: 1rem 0
}

.w-answer-correct {
    background-color: #effaf5;
    border-left: 3px solid #48c78e
}

.w-answer-wrong {
    background-color: #feecf0;
    border-left: 3px solid #f03a5f
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }
    60% {
        opacity: 1;
        transform: translateX(-40px)
    }
    80% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    60% {
        opacity: 0;
        transform: translateX(-40px)
    }
    80% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(-100%)
    }
}

.w-answer-empty {
    border: 1px solid #f14668
}

.w-answer-fill {
    border: 1px solid #48c78e
}

.w-task-input {
    width: 100%;
    padding: 10px
}

.w-quiz-input {
    font-family: "Fira Mono", "Courier New", Courier, monospace;
    width: 16ch
}

.w-drop-zone {
    background: #cee0f4;
    border-radius: 4px;
    display: inline-block;
    width: 100px;
    height: 1.4em;
    overflow: hidden;
    padding: 0 4px;
    vertical-align: middle
}

.w-drop-zone.dragover {
    background-color: rgba(128, 0, 128, .7)
}

.w-drop-zone-fill {
    height: auto;
    width: auto
}

.w-inter-drag-el {
    font-family: monospace;
    cursor: grab;
    border-radius: .25em;
    padding: .1em .6em;
    margin-right: 1em;
    display: inline-block;
    border: .1em solid #c6c6c6;
    overflow: hidden;
    background: #ddd;
    box-shadow: 0 0 .3em rgba(0, 0, 0, .2);
    user-select: none
}

.w-inter-drag-el:hover {
    color: #636;
    background: #edd6e9
}

.w-drag {
    cursor: move
}

.w-inter-text {
    font-size: 1em;
    line-height: 1.5;
    user-select: none
}

.w-answer-pre-correct {
    background-color: #48c78e;
    color: #fff;
    padding: 0 6px;
    border-radius: 3px
}

.w-answer-pre-wrong {
    background-color: #f14668;
    color: #fff;
    padding: 0 6px;
    border-radius: 3px
}

.front-app, .front-vk {
    background: #f49500;
    border: 1px solid #da8500;
    padding: 1rem;
    box-sizing: border-box
}

.front-app a, .front-app a:hover, .front-app h2, .front-vk a, .front-vk a:hover, .front-vk h2 {
    color: #fff
}

.front-app p, .front-vk p {
    margin-bottom: 0
}

.front-vk {
    background: #0f1e31;
    border: none
}

.youtube-field-player {
    width: 100%;
    min-height: 600px
}

.w-frontpage {
    margin-top: 2rem
}

.w-frontpage #block-css-ref, .w-frontpage #block-html-element {
    display: inline-block;
    width: 49%;
    min-width: auto
}

.w-frontpage .w-category-grid-img {
    background: #50c5de
}

.w-content .w-practice-list, .w-content .w-recipe-list {
    column-count: 2
}

.w-recipe-list li {
    margin-bottom: 0
}

.w-list-title {
    font-size: 1.4rem
}

.w-sidebar .w-individual-list, .w-sidebar .w-metki-list, .w-sidebar .w-practice-list, .w-sidebar .w-recipe-list {
    margin: 0;
    padding: 0
}

.w-sidebar .w-individual-item, .w-sidebar .w-metki-item, .w-sidebar .w-practice-item, .w-sidebar .w-recipe-item {
    display: inline-block;
    margin-bottom: 0
}

.w-sidebar .w-individual-item a, .w-sidebar .w-metki-item a, .w-sidebar .w-practice-item a, .w-sidebar .w-recipe-item a {
    background-color: #f5f6f8;
    font-size: .9rem;
    display: block;
    padding: 3px 9px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
    margin-right: .5rem;
    margin-bottom: .4rem;
    transition: .3s
}

.w-sidebar .w-individual-item a:hover, .w-sidebar .w-metki-item a:hover, .w-sidebar .w-practice-item a:hover, .w-sidebar .w-recipe-item a:hover {
    background: #f05347;
    border-color: transparent;
    color: #fff
}

.w-sidebar .w-individual-item a.active, .w-sidebar .w-metki-item a.active, .w-sidebar .w-practice-item a.active, .w-sidebar .w-recipe-item a.active {
    background: #293a49;
    color: #fff;
    border-color: transparent
}

.w-content .w-individual-list, .w-content .w-practice-list {
    column-count: 3
}

.w-practice-list {
    list-style: none;
    padding-left: 1rem
}

.w-practice-list li {
    margin-bottom: 0
}

.w-practice-list .icon {
    padding-right: .3rem
}

.w-practice-list .icon-html5 {
    color: #ec642a
}

.w-practice-list .icon-css3 {
    color: #1572b6
}

.w-practice-list .icon-css3::before {
    font-size: .85em
}

#block-practice-popular .w-practice-list {
    padding-left: 0
}

.CodeMirror {
    border: 1px solid #ddd;
    font-size: 14px;
    height: 200px
}

.practice_browser::after, .practice_css + .CodeMirror::after, .practice_html + .CodeMirror::after {
    content: "HTML";
    font-size: 10px;
    padding: 2px 5px;
    position: absolute;
    background: rgba(0, 0, 0, .1);
    border-radius: 3px;
    right: 20px;
    bottom: 10px;
    z-index: 100
}

.practice_browser, .practice_css, .practice_html {
    position: relative
}

.practice_css + .CodeMirror::after {
    content: "CSS"
}

.practice_browser {
    height: 100%;
    border: 1px solid #ddd
}

.practice_browser iframe {
    height: 100%;
    width: 100%;
    border: none
}

.practice_browser::after {
    content: "Результат"
}

.w-practice-toolbar {
    margin-bottom: -.5rem
}

.w-practice-toolbar button {
    margin-bottom: 0
}

.w-practice-toolbar .is-primary {
    margin-right: .5em
}

.practice_task {
    padding: 10px;
    margin-bottom: 1rem
}

.practice_task.alert::before, .practice_task.success::before {
    font-family: fontello;
    padding-right: .5rem
}

.practice_task.alert::before {
    content: "\e81c";
    color: #d32f2f
}

.practice_task.success::before {
    content: "\e81b";
    color: #009688
}

.w-practice-description .icon-html5 {
    color: #ec642a
}

.w-practice-description .icon-css3 {
    color: #1572b6
}

@keyframes shake {
    from, to {
        transform: translate3d(0, 0, 0)
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    animation: 1s shake
}

[v-cloak] {
    display: none
}

.message {
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border: 1px solid rgba(10, 10, 10, .25);
    color: #0a0a0a
}

.message.success {
    background-color: #e1faea;
    color: #0a0a0a
}

.message.alert {
    background-color: #f7e4e1;
    color: #0a0a0a
}

.w-modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 10000;
    opacity: 1;
    transition: opacity .3s;
    text-align: center
}

.w-modal-overlay::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.w-modal {
    opacity: 1;
    box-sizing: border-box;
    animation: showSweetAlert .3s;
    will-change: transform;
    width: 478px;
    background-color: #fff;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
    display: inline-block;
    vertical-align: middle;
    z-index: 10001;
    text-align: left
}

.w-modal-info {
    width: 600px
}

.w-modal-icon {
    width: 80px;
    height: 80px;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    padding: 0;
    position: relative;
    box-sizing: content-box;
    margin: 20px auto
}

.w-modal-icon.w-modal-icon--info {
    border-color: #50c5de
}

.w-modal-icon.w-modal-icon--info::after, .w-modal-icon.w-modal-icon--info::before {
    content: "";
    position: absolute;
    left: 50%;
    background-color: #50c5de
}

.w-modal-icon.w-modal-icon--info::before {
    width: 5px;
    height: 29px;
    bottom: 17px;
    border-radius: 2px;
    margin-left: -2px
}

.w-modal-icon.w-modal-icon--info::after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -3px;
    top: 19px
}

.w-modal-icon.w-modal-icon--success {
    border-color: #5bd4b6
}

.w-modal-icon.w-modal-icon--success::after, .w-modal-icon.w-modal-icon--success::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 120px;
    background: #fff
}

.w-modal-icon.w-modal-icon--success::before {
    border-radius: 120px 0 0 120px;
    top: -7px;
    left: -33px;
    transform: rotate(-45deg);
    transform-origin: 60px 60px
}

.w-modal-icon.w-modal-icon--success::after {
    border-radius: 0 120px 120px 0;
    top: -11px;
    left: 30px;
    transform: rotate(-45deg);
    transform-origin: 0 60px;
    animation: rotatePlaceholder 4.25s ease-in
}

.w-modal-icon .w-modal-icon--success__line {
    height: 5px;
    background-color: #5bd4b6;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 2
}

.w-modal-icon .w-modal-icon--success__line--long {
    width: 47px;
    right: 8px;
    top: 38px;
    transform: rotate(-45deg);
    animation: animateSuccessLong .75s
}

.w-modal-icon .w-modal-icon--success__line--tip {
    width: 25px;
    left: 14px;
    top: 46px;
    transform: rotate(45deg);
    animation: animateSuccessTip .75s
}

.w-modal-icon .w-modal-icon--success__ring {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(91, 212, 182, .4);
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2
}

.w-modal-icon .w-modal-icon--success__hide-corners {
    width: 5px;
    height: 90px;
    background-color: #fff;
    padding: 1px;
    position: absolute;
    left: 28px;
    top: 8px;
    z-index: 1;
    transform: rotate(-45deg)
}

.w-modal-button, .w-modal-button[disabled]:hover {
    background-color: #848994
}

.w-modal-title {
    text-align: center;
    margin-bottom: 1rem
}

.w-modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem
}

.w-modal-button {
    color: #fff;
    border-color: transparent;
    padding: .5rem 1rem;
    cursor: pointer;
    border-radius: .375em;
    box-shadow: none;
    transition: .3s
}

.w-modal-button:hover {
    background-color: #f05347
}

.w-modal-button:visited {
    color: #fff
}

.w-modal-button--next {
    background-color: #1779ba
}

@keyframes showSweetAlert {
    0%, to {
        transform: scale(1)
    }
    1% {
        transform: scale(.5)
    }
    45% {
        transform: scale(1.05)
    }
    80% {
        transform: scale(.95)
    }
}

@keyframes animateSuccessTip {
    0%, 54% {
        width: 0;
        left: 1px;
        top: 19px
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px
    }
    to {
        width: 25px;
        left: 14px;
        top: 45px
    }
}

@keyframes animateSuccessLong {
    0%, 65% {
        width: 0;
        right: 46px;
        top: 54px
    }
    84% {
        width: 55px;
        right: 0;
        top: 35px
    }
    to {
        width: 47px;
        right: 8px;
        top: 38px
    }
}

.w-individual-popular-list, .w-recipe-popular-list {
    padding-left: 1.25em;
    line-height: 1.2
}

.w-individual-popular-list li, .w-recipe-popular-list li {
    margin-bottom: .2rem
}

@media (prefers-color-scheme: dark) {
    .navbar, body {
        background-color: #1f2d3b
    }

    body {
        color: #8694a4
    }

    a {
        color: #50a2de;
        transition: .3s
    }

    a:visited {
        color: #AF0171
    }

    a:hover {
        color: #d9534f
    }

    .w-logo .w-logo-p1 {
        color: #f0ad4e
    }

    .navbar-burger {
        color: #f5f6f8
    }

    .w-menu-main a.is-active {
        color: #fff
    }

    .w-title {
        background-color: #2b3e50;
        border-bottom-color: #4e5d6c
    }

    .w-title h1 {
        color: #8694a4
    }

    .w-footer-top {
        background-color: #2b3e50;
        border-top-color: #1f2d3b
    }

    .w-footer-top h3 {
        color: #dee5ed
    }

    .w-category-grid, .w-sidebar .w-block {
        border-color: #4e5d6c
    }

    .w-sidebar .w-individual-item a, .w-sidebar .w-metki-item a, .w-sidebar .w-practice-item a, .w-sidebar .w-recipe-item a {
        background-color: #2b3e50;
        border-color: transparent
    }

    .w-sidebar .w-individual-item a:hover, .w-sidebar .w-metki-item a:hover, .w-sidebar .w-practice-item a:hover, .w-sidebar .w-recipe-item a:hover {
        background-color: #d9534f
    }

    .w-block-title {
        border-bottom-color: #4e5d6c
    }

    .w-book-toc {
        background-color: #2b3e50;
        border-top-color: #4e5d6c
    }

    .w-about-author-info-social a {
        background-color: #2b3e50;
        color: #8694a4
    }

    .w-example, .w-example-toolbar {
        background-color: #18181a
    }

    .exampleTitle {
        color: #dee5ed
    }

    pre {
        background-color: #232327;
        color: #fbebd4;
        border-color: #2b3e50
    }

    .w-tabs ul, .w-tabs.is-boxed a:hover {
        border-bottom-color: #4e5d6c
    }

    .comment {
        color: #aeaeae;
        font-style: italic
    }

    .support {
        color: grey
    }

    .tag, .tag-name {
        color: #569cd6
    }

    .css-property, .support.namespace, .vendor-prefix {
        color: #d7ba7d
    }

    .css-value, .value {
        color: #ce9178
    }

    .constant.numeric, .hex-color, .keyword.unit {
        color: #b5cea8
    }

    .entity.function, .entity.id {
        color: #900
    }

    .attribute, .variable {
        color: #9cdcfe
    }

    .string, .support.value {
        color: #ce9178
    }

    .regexp {
        color: #009926
    }

    .class {
        background: #f5f6f8;
        padding: 0 2px;
        border-radius: 2px
    }

    .entity.class {
        background: 0 0;
        padding: 0;
        color: inherit
    }

    mark {
        background: #dce6ed
    }

    .class, .w-credit {
        background-color: #2b3e50
    }

    .attribute {
        white-space: nowrap
    }

    .variable {
        color: #9cdcfe
    }

    .note {
        color: #1f2d3b
    }

    .var {
        font: .94em Consolas, Courier, Menlo, monospace;
        color: #848994
    }

    .html-heading h3, .navbar-dropdown, .navbar-item.has-dropdown:hover .navbar-link, .tag-alpha a, a.navbar-item:hover {
        background: #2b3e50
    }

    .navbar-dropdown a.navbar-item:hover {
        color: #d9534f;
        background: #1f2d3b
    }

    .navbar-dropdown {
        border-top-color: #1f2d3b
    }

    .tag-alpha a:visited {
        color: #50a2de
    }

    .w-html-category-icon img {
        filter: invert(.8)
    }

    .w-tabs.is-boxed li.is-active a {
        background-color: #1f2d3b;
        border-color: #4e5d6c
    }

    #w-course h2.w-list-title, .w-tabs.is-boxed a:hover {
        background-color: #4e5d6c
    }

    .w-tabs a, .w-tabs a:hover {
        color: #dee5ed
    }

    .browser td {
        color: #2b3e50
    }

    .w-credit {
        border-color: #4e5d6c;
        color: #8694a4
    }

    .w-quiz-answer.is-selected {
        background-color: #f0ad4e;
        color: #1f2d3b
    }

    .w-quiz-summary {
        color: #1f2d3b
    }

    .page-previous a::after, .page-previous a:hover::after {
        border-right-color: #df691a
    }

    .page-next a::after, .page-next a:hover::after {
        border-left-color: #df691a
    }

    .page-next a:hover, .page-previous a:hover {
        background-color: #df691a
    }

    .w-block-menu a.is-active {
        background-color: #5cb85c
    }

    table {
        border-color: #4e5d6c
    }

    tr:nth-child(2n) {
        background-color: #2b3e50
    }

    .w-practice-toolbar .button.is-link {
        color: #50a2de
    }

    .w-practice-toolbar .button.is-link:hover {
        color: #d9534f
    }

    .w-practice-toolbar .button.is-primary {
        background: #2b3e50;
        border-color: #4e5d6c
    }

    .w-practice-toolbar .button.is-primary:hover {
        background: #d9534f;
        border-color: #d9534f
    }

    #practice_browser {
        background: #fff
    }
}

pre,
code {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  font-weight: 400;
  line-height: 1.4;
  -webkit-user-modify: read-only;
  box-sizing: inherit;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: left;
  font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
  font-size: 100%;
  font-weight: bold;
  tab-size: 3;
  tab-size: 3;
  padding: 34px 16px 32px 32px;
  min-height: 1em;
  color: rgb(55, 53, 47);
  white-space: pre;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

p.link-read-post {
    text-align: right;
}

p.link-read-post a {
	padding: 10px;
	min-width: 100px;
	background: #333671;
	color: #fff;
	text-decoration: none;
}