pre {
    box-shadow: 0 2px 4px 3px rgba(0,0,0,0.2);
    transition: 0.5s;
}
pre:hover {
    box-shadow: 0 4px 8px 6px rgba(0,0,0,0.2);
}
code {
  
}
.breadcrumbs__item_home .breadcrumbs__link:before,
.close-button:after,
.code-tabs__button_download:before,
.code-tabs__button_edit:before,
.code-tabs__button_external:before,
.code-tabs__scroll-button_left:before,
.code-tabs__scroll-button_right:before,
.comments__header-title:before,
.course-feedback__add-comment:after,
.course-feedback_not-public:after,
.courses-feedback-control_left .courses-feedback-control__button:after,
.courses-feedback-control_right .courses-feedback-control__button:after,
.courses-feedback-slides__open-feedback:after,
.courses-materials__delete-action:after,
.courses-table__status_ended:before,
.courses-table__status_started:before,
.courses-table__status_verified:before,
.donate-button:before,
.donate-links__link:after,
.feedback-policy__link:after,
.important_ok .important__type:before,
.important_ponder .important__type:before,
.important_smart .important__type:before,
.important_warn .important__type:before,
.invoice-table__info-link:after,
.invoice-table__settings-participant .text-input_approved_no .text-input__status:after,
.invoice-table__settings-participant .text-input_approved_yes .text-input__status:after,
.lessons-list_screencast .lessons-list__download:before,
.lessons-list_screencast .lessons-list__lesson>a:before,
.link__type[data-url^="mailto:"]:before,
.link__type[data-url^='/play/']:before,
.main__anchor:before,
.main__footer-star:before,
.main ul.courses-features__features>li.courses-features__feature_guarantees:before,
.main ul.courses-features__features>li.courses-features__feature_online:before,
.main ul.courses-features__features>li.courses-features__feature_quality:before,
.main ul.courses-features__features>li.courses-features__feature_result:before,
.main ul.courses-features__features>li.courses-features__feature_support:before,
.map:before,
.notification__close:before,
.page__nav_next .page__nav-text:before,
.page__nav_prev .page__nav-text:before,
.page_ebook a[href*='://']:not([href*='javascript.']):after,
.participants-logos__arr_left:after,
.participants-logos__arr_right:after,
.phone-toggler:after,
.photo-cut__rotate:after,
.profile-field_editable .profile-field__value:after,
.profile-field_editable.profile-field_password:after,
.profile-photo__upic-edit:before,
.profile__linked-provider-remove:after,
.quote__footer:before,
.receipts__edit:after,
.share_fb:after,
.share_gp:after,
.share_tw:after,
.share_vk:after,
.sidebar__toggle:before,
.sitetoolbar__dropdown-button:after,
.sitetoolbar__login:after,
.sitetoolbar__nav-toggle:before,
.sitetoolbar__search-toggle:before,
.sitetoolbar__user:after,
.social-login_facebook:before,
.social-login_github:before,
.social-login_google:before,
.social-login_vkontakte:before,
.social-login_yandex:before,
.spoiler.closed .spoiler__button:after,
.spoiler__button:after,
.tablet-ebook:before,
.task__open-link:before,
.tasks .tasks__title:before,
.toolbar__button_download:before,
.toolbar__button_edit:before,
.toolbar__button_external:before,
.toolbar__button_run:before,
.tutorial-map__item>.tutorial-map__link:before,
.tutorial-map__multicol:after,
.tutorial-map__singlecol:after,
ul>li.rating-stars__star:after {
    font-family: FontIcons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.no-icons .breadcrumbs__item_home .breadcrumbs__link:before,
.no-icons .close-button:after,
.no-icons .code-tabs__button_download:before,
.no-icons .code-tabs__button_edit:before,
.no-icons .code-tabs__button_external:before,
.no-icons .code-tabs__scroll-button_left:before,
.no-icons .code-tabs__scroll-button_right:before,
.no-icons .comments__header-title:before,
.no-icons .course-feedback__add-comment:after,
.no-icons .course-feedback_not-public:after,
.no-icons .courses-feedback-control_left .courses-feedback-control__button:after,
.no-icons .courses-feedback-control_right .courses-feedback-control__button:after,
.no-icons .courses-feedback-slides__open-feedback:after,
.no-icons .courses-materials__delete-action:after,
.no-icons .courses-table__status_ended:before,
.no-icons .courses-table__status_started:before,
.no-icons .courses-table__status_verified:before,
.no-icons .donate-button:before,
.no-icons .donate-links__link:after,
.no-icons .feedback-policy__link:after,
.no-icons .important_ok .important__type:before,
.no-icons .important_ponder .important__type:before,
.no-icons .important_smart .important__type:before,
.no-icons .important_warn .important__type:before,
.no-icons .invoice-table__info-link:after,
.no-icons .invoice-table__settings-participant .text-input_approved_no .text-input__status:after,
.no-icons .invoice-table__settings-participant .text-input_approved_yes .text-input__status:after,
.no-icons .lessons-list_screencast .lessons-list__download:before,
.no-icons .lessons-list_screencast .lessons-list__lesson>a:before,
.no-icons .link__type[data-url^="mailto:"]:before,
.no-icons .link__type[data-url^='/play/']:before,
.no-icons .main__anchor:before,
.no-icons .main__footer-star:before,
.no-icons .main ul.courses-features__features>li.courses-features__feature_guarantees:before,
.no-icons .main ul.courses-features__features>li.courses-features__feature_online:before,
.no-icons .main ul.courses-features__features>li.courses-features__feature_quality:before,
.no-icons .main ul.courses-features__features>li.courses-features__feature_result:before,
.no-icons .main ul.courses-features__features>li.courses-features__feature_support:before,
.no-icons .map:before,
.no-icons .notification__close:before,
.no-icons .page__nav_next .page__nav-text:before,
.no-icons .page__nav_prev .page__nav-text:before,
.no-icons .page_ebook a[href*='://']:not([href*='javascript.']):after,
.no-icons .participants-logos__arr_left:after,
.no-icons .participants-logos__arr_right:after,
.no-icons .phone-toggler:after,
.no-icons .photo-cut__rotate:after,
.no-icons .profile-field_editable .profile-field__value:after,
.no-icons .profile-field_editable.profile-field_password:after,
.no-icons .profile-photo__upic-edit:before,
.no-icons .profile__linked-provider-remove:after,
.no-icons .quote__footer:before,
.no-icons .receipts__edit:after,
.no-icons .share_fb:after,
.no-icons .share_gp:after,
.no-icons .share_tw:after,
.no-icons .share_vk:after,
.no-icons .sidebar__toggle:before,
.no-icons .sitetoolbar__dropdown-button:after,
.no-icons .sitetoolbar__login:after,
.no-icons .sitetoolbar__nav-toggle:before,
.no-icons .sitetoolbar__search-toggle:before,
.no-icons .sitetoolbar__user:after,
.no-icons .social-login_facebook:before,
.no-icons .social-login_github:before,
.no-icons .social-login_google:before,
.no-icons .social-login_vkontakte:before,
.no-icons .social-login_yandex:before,
.no-icons .spoiler.closed .spoiler__button:after,
.no-icons .spoiler__button:after,
.no-icons .tablet-ebook:before,
.no-icons .task__open-link:before,
.no-icons .tasks .tasks__title:before,
.no-icons .toolbar__button_download:before,
.no-icons .toolbar__button_edit:before,
.no-icons .toolbar__button_external:before,
.no-icons .toolbar__button_run:before,
.no-icons .tutorial-map__item>.tutorial-map__link:before,
.no-icons .tutorial-map__multicol:after,
.no-icons .tutorial-map__singlecol:after,
.no-icons ul>li.rating-stars__star:after {
    visibility: hidden
}
.spoiler__button:after {
    content: '\25B4'
}
.notification__close:before {
    content: '\E80D'
}
.phone-toggler:after,
.sitetoolbar__dropdown-button:after,
.sitetoolbar__user:after,
.spoiler.closed .spoiler__button:after,
.tutorial-map__item>.tutorial-map__link:before {
    content: '\25BE'
}
.main__footer-star:before,
ul>li.rating-stars__star:after {
    content: '\2605'
}
.important_warn .important__type:before {
    content: '\26A0'
}
.link__type[data-url^="mailto:"]:before {
    content: '\E810'
}
.code-tabs__button_edit:before,
.link__type[data-url^='/play/']:before,
.toolbar__button_edit:before {
    content: '\270D'
}
.courses-table__status_verified:before,
.important_ok .important__type:before,
.invoice-table__settings-participant .text-input_approved_yes .text-input__status:after,
.tasks .tasks__title:before {
    content: '\2714'
}
.important_ponder .important__type:before,
.invoice-table__settings-participant .text-input_approved_no .text-input__status:after {
    content: '\E81E'
}
.feedback-policy__link:after,
.important_smart .important__type:before {
    content: '\E705'
}
.code-tabs__button_external:before,
.courses-feedback-slides__open-feedback:after,
.invoice-table__info-link:after,
.page_ebook a[href*='://']:not([href*='javascript.']):after,
.task__open-link:before,
.toolbar__button_external:before {
    content: '\E715'
}
.code-tabs__button_download:before,
.toolbar__button_download:before {
    content: '\E805'
}
.code-tabs__scroll-button_left:before,
.courses-feedback-control_left .courses-feedback-control__button:after,
.page__nav_prev .page__nav-text:before,
.participants-logos__arr_left:after {
    content: '\E80E'
}
.code-tabs__scroll-button_right:before,
.courses-feedback-control_right .courses-feedback-control__button:after,
.page__nav_next .page__nav-text:before,
.participants-logos__arr_right:after {
    content: '\E807'
}
.lessons-list_screencast .lessons-list__lesson>a:before,
.toolbar__button_run:before {
    content: '\F00F'
}
.comments__header-title:before,
.course-feedback__add-comment:after {
    content: '\F4AC'
}
.sitetoolbar__search-toggle:before {
    content: '\E81B'
}
.sitetoolbar__login:after {
    content: '\1F464'
}
.profile-field_editable .profile-field__value:after,
.profile-field_editable.profile-field_password:after,
.receipts__edit:after {
    content: '\E803'
}
.courses-materials__delete-action:after,
.profile__linked-provider-remove:after {
    content: '\E804'
}
.sidebar__toggle:before,
.sitetoolbar__nav-toggle:before {
    content: '!'
}
.main__anchor:before {
    content: '\E80C'
}
.profile-photo__upic-edit:before {
    content: '\E812'
}
.breadcrumbs__item_home .breadcrumbs__link:before {
    content: '\E813'
}
.map:before {
    content: '\E814'
}
.close-button:after {
    content: '\E815'
}
.share_tw:after {
    content: '\E808'
}
.share_fb:after,
.social-login_facebook:before {
    content: '\E809'
}
.share_gp:after,
.social-login_google:before {
    content: '\E80A'
}
.share_vk:after,
.social-login_vkontakte:before {
    content: '\E80B'
}
.social-login_github:before {
    content: '\E80F'
}
.social-login_yandex:before {
    content: '\E806'
}
.tutorial-map__singlecol:after {
    content: '\E816'
}
.tutorial-map__multicol:after {
    content: '\E817'
}
.quote__footer:before {
    content: '\E81A'
}
.lessons-list_screencast .lessons-list__download:before {
    content: '\E81C'
}
.tablet-ebook:before {
    content: '\E81D'
}
.main ul.courses-features__features>li.courses-features__feature_quality:before {
    content: '\E81F'
}
.main ul.courses-features__features>li.courses-features__feature_online:before {
    content: '\E823'
}
.main ul.courses-features__features>li.courses-features__feature_support:before {
    content: '\E820'
}
.main ul.courses-features__features>li.courses-features__feature_result:before {
    content: '\E822'
}
.main ul.courses-features__features>li.courses-features__feature_guarantees:before {
    content: '\E821'
}
.courses-table__status_ended:before {
    content: '\E824'
}
.courses-table__status_started:before {
    content: '\E825'
}
.photo-cut__rotate:after {
    content: '\E826'
}
.donate-button:before,
.donate-links__link:after {
    content: '\E827'
}
.course-feedback_not-public:after {
    content: '\E828'
}
.main__anchor:before {
    content: '\E82B'
}
.complex-form__step,
.course-feedback,
.login-form_inline .login-form__body,
.participant-application {
    border-radius: 10px;
    border: 3px solid #f2e7b3
}
.tablet-only {
    display: none
}
@media (max-width: 840px) {
    .tablet-only {
        display: block
    }
}
.phone-only {
    display: none
}
@media (max-width: 568px) {
    .phone-only {
        display: block
    }
}

address,
blockquote,
body,
dd,
dl,
fieldset,
figcaption,
figure,
form,
h1,
code, 
h2,
h3,
h4,
h5,
h6,
legend,
ol,
p,
td,
th,
ul {
    margin: 0;
    padding: 0;
}

pre {
    padding: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}
a img {
    border: 0
}

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

ul {
    list-style: none
}
p {
    margin: 18px 0
}
.invisible {
    visibility: hidden
}
.close-button,
.code-tabs__scroll-button,
.course-feedback-comment-form__item-cancel,
.course-feedback__add-comment,
.courses-materials__delete-action,
.error__button-link,
.login-form__button-link,
.notification__close,
.number-input__btn,
.photo-cut__rotate,
.profile-field__action,
.profile-field__cancel,
.profile__action,
.profile__linked-provider-remove,
.search-form__type,
.sidebar .sidebar__toggle,
.sitetoolbar__dropdown-button,
.sitetoolbar__login,
.sitetoolbar__nav-toggle,
.sitetoolbar__search-toggle,
.sitetoolbar__user,
.social-login,
.spoiler__button,
.task__solution,
.task__step-show {
    border: 0;
    background: none;
    display: inline;
    margin: 0;
    padding: 0;
    cursor: pointer
}
.close-button::-moz-focus-inner,
.code-tabs__scroll-button::-moz-focus-inner,
.course-feedback-comment-form__item-cancel::-moz-focus-inner,
.course-feedback__add-comment::-moz-focus-inner,
.courses-materials__delete-action::-moz-focus-inner,
.error__button-link::-moz-focus-inner,
.login-form__button-link::-moz-focus-inner,
.notification__close::-moz-focus-inner,
.number-input__btn::-moz-focus-inner,
.photo-cut__rotate::-moz-focus-inner,
.profile-field__action::-moz-focus-inner,
.profile-field__cancel::-moz-focus-inner,
.profile__action::-moz-focus-inner,
.profile__linked-provider-remove::-moz-focus-inner,
.search-form__type::-moz-focus-inner,
.sidebar .sidebar__toggle::-moz-focus-inner,
.sitetoolbar__dropdown-button::-moz-focus-inner,
.sitetoolbar__login::-moz-focus-inner,
.sitetoolbar__nav-toggle::-moz-focus-inner,
.sitetoolbar__search-toggle::-moz-focus-inner,
.sitetoolbar__user::-moz-focus-inner,
.social-login::-moz-focus-inner,
.spoiler__button::-moz-focus-inner,
.task__solution::-moz-focus-inner,
.task__step-show::-moz-focus-inner {
    border: none;
    padding: 0
}
.close-button:focus,
.code-tabs__scroll-button:focus,
.course-feedback-comment-form__item-cancel:focus,
.course-feedback__add-comment:focus,
.courses-materials__delete-action:focus,
.error__button-link:focus,
.login-form__button-link:focus,
.notification__close:focus,
.number-input__btn:focus,
.photo-cut__rotate:focus,
.profile-field__action:focus,
.profile-field__cancel:focus,
.profile__action:focus,
.profile__linked-provider-remove:focus,
.search-form__type:focus,
.sidebar .sidebar__toggle:focus,
.sitetoolbar__dropdown-button:focus,
.sitetoolbar__login:focus,
.sitetoolbar__nav-toggle:focus,
.sitetoolbar__search-toggle:focus,
.sitetoolbar__user:focus,
.social-login:focus,
.spoiler__button:focus,
.task__solution:focus,
.task__step-show:focus {
    outline: 0
}
.balance:after,
.donate-list:after,
.lessons-list:after,
.main .clearfix:after,
.main__footer:after,
.quote:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both
}
.error__button-link,
.login-form__button-link,
.social-login,
.task__solution {
    font: inherit;
    color: #0059b2;
    box-sizing: content-box
}
.working-hover .error__button-link:hover,
.working-hover .login-form__button-link:hover,
.working-hover .social-login:hover,
.working-hover .task__solution:hover {
    text-decoration: underline;
    color: #ba1000
}
.columns {
    display: table;
    width: 100%;
    table-layout: fixed
}
.columns__col {
    display: table-cell;
    vertical-align: top
}
.columns_2 .columns__col {
    width: 50%
}
.columns_3 .columns__col {
    width: 33%
}
.columns_3 .columns__col:nth-child(2) {
    width: 34%
}
.columns_4 .columns__col {
    width: 25%
}
.columns_5 .columns__col {
    width: 20%
}
@font-face {
    font-family: FontIcons;
    src: url(/pack/modules/styles/blocks/font/icons.a8657b673a3d968cef54bd6a9f1cf146.woff) format('woff'), url(/pack/modules/styles/blocks/font/icons.36019e00a1fc7adc093ef71c16be4d00.otf) format("opentype");
    font-weight: 400;
    font-style: normal
}
.font-test {
    font-family: FontIcons, serif;
    position: fixed;
    top: -100px;
    left: -100px
}
.font-test:after {
    content: '!'
}
.text-input {
    display: inline-block;
    width: 100%
}
.text-input__control {
    box-shadow: inset 1px 1px 5px 0 #eee;
    box-sizing: border-box;
    line-height: 16px;
    font-size: 16px;
    padding: 8px 4px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    width: 100%;
    margin: 0;
    height: 34px
}
.text-input__control:disabled {
    border-color: #c6c6c6;
    background: #f5f2f0;
    color: #999
}
.text-input__control:focus {
    border-color: #8eb0d2;
    box-shadow: inset 1px 1px 5px 0 #e1edf2;
    outline: 0
}
.text-input__control_big {
    padding: 10px 4px;
    height: 38px;
    vertical-align: middle
}
.text-input__clear {
    position: absolute;
    right: 7px;
    top: 6px;
    color: #ccc;
    font-size: 20px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    display: none
}
.text-input__clear:active {
    position: absolute
}
.text-input__err {
    display: block;
    visibility: hidden;
    color: #c55b4a;
    font-size: 12px;
    padding: 4px 0 0
}
.text-input__control.ng-invalid.ng-dirty,
.text-input_invalid .text-input__control {
    border-color: #cc5b4d;
    box-shadow: inset 1px 1px 5px 0 #f2e7e7
}
.text-input__control.ng-invalid.ng-dirty+.text-input__err,
.text-input_invalid .text-input__err {
    visibility: visible
}
.text-input_with-aside .text-input__control {
    padding-right: 85px
}
.text-input_with-aside .text-input__aside {
    position: absolute;
    top: 0;
    right: 10px
}
.text-input_small .text-input__control {
    height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 14px
}
.text-input_clear-button .text-input__control {
    padding-right: 30px
}
.text-input_clear-button .text-input__clear {
    display: block
}
.text-input-button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.text-input-button__input {
    -ms-flex-preferred-size: 150px;
    flex-basis: 150px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-bottom: 5px;
    box-sizing: border-box;
    padding-right: 20px
}
.text-input-button__input .text-input {
    width: 100%
}
@media (max-width: 690px) {
    .text-input-button,
    .text-input-button__button,
    .text-input-button__input {
        display: block
    }
    .text-input-button__input {
        padding-right: 0
    }
    .text-input-button__input .text-input__err {
        display: none
    }
    .text-input-button__input .text-input_invalid .text-input__err {
        display: block
    }
    .text-input-button__button {
        margin-top: 10px
    }
    .text-input-button__button .button,
    .text-input-button__button .button__text {
        display: block;
        width: 100%
    }
}
.input-select {
    box-sizing: border-box;
    position: relative;
    line-height: 16px;
    font-size: 16px;
    padding: 8px 4px 25px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-image: linear-gradient(180deg, #ccc 0, #ccc), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+U2xpY2UgMTwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0ibm9uZSI+PGcgZmlsbD0iIzU1NSI+PHBhdGggZD0iTTMgMGwzIDVIMHoiLz48cGF0aCBkPSJNMyAxMmwzLTVIMHoiLz48L2c+PC9nPjwvc3ZnPg=="), linear-gradient(180deg, #dcdcdc 0, #f9f9f9 80%, #f0f0f0);
    background-position: calc(100% - 20px) 0, calc(100% - 7px) 50%, 0 0;
    background-repeat: no-repeat;
    background-size: 1px 100%, auto, auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .2s, background-image .2s
}
.input-select:focus {
    background-image: linear-gradient(180deg, #8eb0d2 0, #8eb0d2), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+U2xpY2UgMTwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0ibm9uZSI+PGcgZmlsbD0iIzU1NSI+PHBhdGggZD0iTTMgMGwzIDVIMHoiLz48cGF0aCBkPSJNMyAxMmwzLTVIMHoiLz48L2c+PC9nPjwvc3ZnPg=="), linear-gradient(180deg, #dcdcdc 0, #f9f9f9 80%, #f0f0f0);
    border-color: #8eb0d2;
    box-shadow: inset 1px 1px 5px 0 #e1edf2;
    outline: 0
}
.input-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}
.input-select_big {
    width: 83px;
    margin-left: 10px;
    padding: 10px 4px 10px 10px;
    vertical-align: middle
}
.input-select_small {
    line-height: 14px;
    font-size: 14px;
    padding: 0 25px 0 10px;
    height: 32px
}
.textarea-input {
    box-shadow: inset 1px 1px 5px 0 #eee;
    box-sizing: border-box;
    line-height: 1;
    font-size: 100%;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    width: 100%
}
.textarea-input__err {
    font-size: 12px;
    display: none;
    padding: 4px 0 0;
    color: #c55b4a
}
.textarea-input_invalid {
    border-color: #cc5b4d;
    box-shadow: inset 1px 1px 5px 0 #f2e7e7
}
.textarea-input_invalid+.textarea-input__err {
    display: block
}
.textarea-input_color_red {
    color: #b80000
}
.label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666
}
.switch {
    display: inline-table
}
.switch__option {
    display: table-cell;
    position: relative;
    overflow: hidden
}
.switch__control {
    position: absolute;
    top: -99px
}
.switch__label {
    display: inline-block;
    color: #8b8987;
    border: solid #e2e2e2;
    border-width: 1px 0 1px 1px;
    text-align: center;
    cursor: pointer
}
.switch__option:first-child .switch__label {
    border-radius: 4px 0 0 4px
}
.switch__option:last-child .switch__label {
    border-width: 1px;
    border-radius: 0 4px 4px 0
}
.switch__control:checked+.switch__label {
    color: #fff;
    background: #8b8987;
    border-color: #8b8987
}
.modal:before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
.modal__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9999
}
button.modal__close {
    position: absolute;
    top: -15px;
    right: -15px;
    display: none
}
a.modal__close,
a.modal__close:visited {
    color: #0059b2
}
.modal__has-close .modal__close {
    display: block
}
.modal-overlay_dark:after,
.modal-overlay_light:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100000
}
.modal-overlay_light:after {
    background: #fff;
    opacity: .35
}
.modal-overlay_dark:after {
    background: #000;
    opacity: .2
}
.switch-input {
    position: relative;
    overflow: hidden;
    display: inline-block;
    min-width: 60px;
    vertical-align: bottom;
    border-radius: 4px;
    background: #d4d4d4
}
.switch-input__bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 50%;
    height: 100%;
    border-radius: 4px;
    transition: left .2s, right .5s, background-color .2s
}
.switch-input__checkbox {
    position: absolute;
    right: 110%
}
.switch-input__label {
    font-size: 12px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    display: block;
    line-height: 28px;
    color: #fff;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px
}
.switch-input__off,
.switch-input__on {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    text-align: center;
    border-radius: 4px
}
.switch-input__checkbox~.switch-input__bg {
    background: #555
}
.switch-input__checkbox:checked~.switch-input__bg {
    left: 50%;
    right: 0;
    background: #ffaa42;
    transition: left .5s, right .2s, background-color .2s
}
.switch-input__checkbox:checked~.switch-input__label .switch-input__off,
.switch-input__checkbox~.switch-input__label .switch-input__on {
    visibility: hidden
}
.switch-input__checkbox:checked~.switch-input__label .switch-input__on,
.switch-input__checkbox~.switch-input__label .switch-input-input__off {
    visibility: visible
}
.switch-input__checkbox:disabled~.switch-input__label {
    opacity: .5;
    cursor: default
}
.switch-input__checkbox:disabled~.switch-input__bg {
    background: #555;
    opacity: .5
}
.number-input {
    position: relative;
    display: inline-block;
    white-space: nowrap
}
.number-input__btn {
    font: 23px/25px Open Sans, Arial, Helvetica, sans-serif;
    width: 35px;
    padding: 0 0 2px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background: #999;
    border-radius: 3px
}
.number-input__btn:disabled {
    opacity: .3;
    cursor: default
}
.number-input__text {
    width: 38px;
    margin: 0 5px;
    vertical-align: middle
}
.number-input__text .number-input__input {
    text-align: center;
    font-size: 14px
}
.number-input__text .text-input__err {
    font-size: 11px;
    line-height: 12px;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: normal;
    width: 100%
}
.number-input__text .number-input__input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}
.number-input__text .number-input__input::-webkit-inner-spin-button,
.number-input__text .number-input__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}
.button {
    font: 700 14px/32px Open Sans, sans;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    padding: 0 28px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer
}
.button::-moz-focus-inner {
    border: 0
}
.button .spinner_small {
    display: none
}
.button:disabled {
    pointer-events: none;
    opacity: .5
}
.working-hover .button:hover {
    text-decoration: none
}
.button_common,
.button_common:link,
.button_common:visited {
    color: #333939;
    text-decoration: none;
    border-color: #cfcecd;
    background: linear-gradient(180deg, #ededed 0, #cecece)
}
.working-hover .button_common:hover {
    color: #333939;
    background: linear-gradient(180deg, #f5f5f5 0, #e6e6e6)
}
.button_common:focus {
    outline: none;
    border-color: #d4be4b;
    box-shadow: 0 0 3px rgba(213, 191, 76, .7)
}
.button_common:active,
.button_common:focus:active {
    outline: none;
    border-color: #cfcecd;
    background: linear-gradient(180deg, #e3e3e3 0, #e3e3e3 2px, #f5f5f5 0, #e6e6e6);
    box-shadow: none
}
.button_action,
.button_action:link,
.button_action:visited {
    padding: 1px 29px;
    border: 0;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #579b74 0, #498161)
}
.working-hover .button_action:hover {
    color: #fff;
    background: linear-gradient(180deg, #67b689 0, #4da975)
}
.button_action:focus {
    padding: 0 28px;
    outline: none;
    border: 1px solid #d4be4b;
    box-shadow: 0 0 3px rgba(213, 191, 76, .7)
}
.button_action:active,
.button_action:focus:active {
    padding: 0 28px;
    outline: none;
    border: 1px solid #488060;
    background: linear-gradient(180deg, #5ea97f 0, #5ea97f 2px, #65b588 0, #4faa76);
    box-shadow: none
}
.button_loading .spinner_small {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    margin-top: -6px
}
.button_loading .button__text,
.spinner {
    visibility: hidden
}
.spinner {
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    display: inline-block
}
.spinner_active {
    visibility: visible
}
.spinner__dot {
    background-color: #fff;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.spinner_small .spinner__dot {
    width: 12px;
    height: 12px;
    margin: 0 1px
}
.spinner_medium .spinner__dot {
    width: 18px;
    height: 18px;
    margin: 0 2px
}
.spinner_large .spinner__dot {
    width: 24px;
    height: 24px;
    margin: 0 3px
}
.spinner__dot_1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}
.spinner__dot_2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}
@-webkit-keyframes bouncedelay {
    0%, 80%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes bouncedelay {
    0%, 80%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.progress {
    position: relative;
    width: 5em;
    height: 5em;
    margin: 0 .5em;
    font-size: 12px;
    text-indent: 999em;
    overflow: hidden;
    -webkit-animation: spin 1s infinite steps(8);
    animation: spin 1s infinite steps(8)
}
.small.progress {
    font-size: 6px
}
.large.progress {
    font-size: 24px
}
.progress:after,
.progress:before,
.progress>div:after,
.progress>div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25em;
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    background: #eee;
    box-shadow: 0 3.5em #eee;
    -webkit-transform-origin: 50% 2.5em;
    transform-origin: 50% 2.5em
}
.progress:before {
    background: #555
}
.progress:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #777
}
.progress>div:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background: #999
}
.progress>div:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    background: #bbb
}
@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
.close-button {
    line-height: 32px;
    cursor: pointer;
    text-align: center;
    color: #999;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 32px;
    position: relative
}
.close-button:after {
    z-index: 1;
    position: relative
}
.close-button:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 7px;
    left: 7px
}
.simple-button {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none!important;
    border-radius: 4px;
    background: hsla(0, 0%, 100%, 0);
    border: 2px solid hsla(0, 0%, 100%, .5);
    transition: background-color .5s
}
.simple-button__text {
    font-size: 20px;
    font-weight: 700;
    display: block;
    color: #dfc374;
    transition: #333 .5s
}
.simple-button__accent {
    color: #cc5b4d
}
.simple-button__description {
    font-size: 14px;
    color: hsla(0, 0%, 100%, .6);
    transition: #333 .5s
}
.simple-button__description-accent {
    transition: #333 .5s
}
.working-hover .simple-button:hover {
    background: #fff
}
.working-hover .simple-button:hover .simple-button__description,
.working-hover .simple-button:hover .simple-button__text {
    color: #0f201c
}
.working-hover .simple-button:hover .simple-button__description-accent {
    color: #c13335
}
.tabbed-pane {
    margin-top: 40px
}
.tabbed-pane li.tabbed-pane__tab,
.tabbed-pane ul.tabbed-pane__tabs {
    padding: 0;
    margin: 0;
    list-style: none
}
.tabbed-pane li.tabbed-pane__tab:before {
    display: none;
    content: ''
}
.tabbed-pane ul.tabbed-pane__tabs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    text-align: center;
    overflow: hidden;
    border-radius: 5px 5px 0 0
}
.tabbed-pane li.tabbed-pane__tab {
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
    font-size: 19px;
    line-height: normal;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 20px 30px;
    cursor: pointer;
    background: #ddd
}
.working-hover .tabbed-pane li.tabbed-pane__tab:hover {
    color: #b20600
}
.tabbed-pane__body {
    display: none;
    padding: 25px;
    text-align: left;
    border: 10px solid #eee;
    border-radius: 0 0 5px 5px
}
.tabbed-pane__body p:first-child {
    margin-top: 0
}
.tabbed-pane_01 .tabbed-pane__body_01,
.tabbed-pane_02 .tabbed-pane__body_02,
.tabbed-pane_03 .tabbed-pane__body_03,
.tabbed-pane_04 .tabbed-pane__body_04,
.tabbed-pane_05 .tabbed-pane__body_05,
.tabbed-pane_06 .tabbed-pane__body_06,
.tabbed-pane_07 .tabbed-pane__body_07 {
    display: block
}
.tabbed-pane_01 li.tabbed-pane__tab_01,
.tabbed-pane_02 li.tabbed-pane__tab_02,
.tabbed-pane_03 li.tabbed-pane__tab_03,
.tabbed-pane_04 li.tabbed-pane__tab_04,
.tabbed-pane_05 li.tabbed-pane__tab_05,
.tabbed-pane_06 li.tabbed-pane__tab_06,
.tabbed-pane_07 li.tabbed-pane__tab_07 {
    color: #b20600;
    background: #eee
}
@media (max-width: 568px) {
    .tabbed-pane ul.tabbed-pane__tabs {
        display: none
    }
    .main .tabbed-pane h2.tabbed-pane__title {
        font: normal 14px Open Sans, Arial, Helvetica, sans-serif;
        line-height: normal;
        margin: 0 -20px;
        padding: 10px 20px;
        text-align: left;
        border-bottom: 2px solid #f3f2f1;
        background: #fbfafa!important
    }
    .tabbed-pane li.tabbed-pane__tab:first-child {
        border-top: 2px solid #f3f2f1
    }
    .tabbed-pane__body {
        display: block!important;
        padding: 0 20px;
        margin: 0 -10px;
        text-align: left;
        border: none;
        border-bottom: 2px solid #f3f2f1;
        border-radius: initial;
        background: #fbfafa
    }
    .tabbed-pane_01 li.tabbed-pane__tab_01,
    .tabbed-pane_02 li.tabbed-pane__tab_02,
    .tabbed-pane_03 li.tabbed-pane__tab_03,
    .tabbed-pane_04 li.tabbed-pane__tab_04,
    .tabbed-pane_05 li.tabbed-pane__tab_05,
    .tabbed-pane_06 li.tabbed-pane__tab_06,
    .tabbed-pane_07 li.tabbed-pane__tab_07 {
        font-weight: 700;
        color: #333;
        background: none
    }
}
body,
html {
    height: 100%
}
body {
    font: 14px/18px Open Sans, Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    color: #333;
    background: #fff;
    margin: 0
}
@media print {
    body {
        color: #000
    }
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -100px
}
.page-wrapper:after {
    content: "";
    display: block;
    z-index: -1;
    height: 100px
}
.page-wrapper~.page-footer {
    transition: margin .2s
}
.page-wrapper_sidebar_on .page-wrapper:after,
.page-wrapper_sidebar_on~.page-footer {
    margin-left: 250px
}
@media (max-width: 840px) {
    .page-wrapper {
        min-height: 0;
        margin-bottom: auto
    }
    .page-wrapper:after {
        content: none
    }
    .page-wrapper_sidebar_on~.page-footer {
        margin-left: 0
    }
}
.page {
    position: relative;
    z-index: 0;
    padding: 0
}
.page_sidebar_on {
    padding-left: 250px
}
.page__sidebar {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}
.page__inner {
    margin: 0;
    padding: 0 120px
}
.page_sidebar-animation-on {
    transition: padding .2s
}
.page_sidebar-animation-on .page__inner {
    transition: margin-top .2s
}
.page_sidebar-animation-on .page__sidebar {
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}
.page_sidebar_on .page__sidebar {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}
.page__nav {
    position: fixed;
    top: 50%;
    width: 81px;
    height: 90px;
    margin-top: -45px;
    outline: 0
}
.page .page__nav {
    color: #7d7d7d
}
.working-hover .page__nav:hover {
    text-decoration: none
}
.page__nav_prev {
    left: 0;
    transition: top .2s, -webkit-transform .2s;
    transition: transform .2s, top .2s;
    transition: transform .2s, top .2s, -webkit-transform .2s
}
.page__nav-text {
    font-size: 13px;
    position: absolute;
    top: 50%;
    margin-top: -33px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    white-space: nowrap
}
.page__nav-text-shortcut {
    color: #c1c1c0;
    visibility: hidden
}
.page__nav-text-arr {
    position: relative;
    top: -1px
}
.working-hover .page__nav:hover .page__nav-text-shortcut {
    visibility: visible
}
.page__nav-text:before {
    display: block;
    margin-bottom: 5px;
    font-size: 36px;
    min-height: 68px;
    line-height: 64px;
    color: #7e7e7e
}
.working-hover .page__nav:hover .page__nav-text:before {
    background: hsla(0, 0%, 85%, .3)
}
.page__nav-text-alternate {
    display: none
}
.page_sidebar_on .page__nav_prev {
    -webkit-transform: translateX(250px);
    transform: translateX(250px)
}
.page__nav_next {
    right: 0;
    transition: top .2s
}
.page_ebook .page__inner {
    padding: 0
}
.page_ebook .code-example .line-numbers-rows {
    display: none
}
.page_ebook .code-example pre.line-numbers {
    padding-left: 10px
}
.page_ebook .code-example code[class*=language-],
.page_ebook .code-example pre[class*=language-] {
    font: 10px/12px Consolas, Lucida Console, Menlo, Monaco, monospace!important
}
.page_ebook .toolbar {
    display: none
}
.page .page-break {
    page-break-after: always
}
.page_contains_header .page__inner {
    padding: 0
}
.page_contains_header .main_width-limit {
    max-width: none
}
@media print {
    .page_ebook .code-example code[class*=language-],
    .page_ebook .code-example pre[class*=language-] {
        font: 12px/14px Consolas, Lucida Console, Menlo, Monaco, monospace!important
    }
}
@media (max-width: 840px) {
    .page,
    .page_sidebar_on {
        padding: 0
    }
    .page .page__inner:after,
    .page .page__sidebar {
        display: none
    }
    .page__inner {
        padding: 0 10px
    }
    .page .page__tutorial-map {
        left: 20px;
        right: 20px
    }
    .page__nav-wrap {
        position: relative;
        display: block;
        white-space: nowrap;
        margin: 20px 0
    }
    .page__nav-wrap:after {
        position: absolute;
        left: 50%;
        top: 0;
        width: 3px;
        height: 100%;
        background: #f5f2f0;
        content: ''
    }
    .page__nav {
        position: relative;
        top: 0;
        display: inline-block;
        box-sizing: border-box;
        width: 50%;
        height: auto;
        padding: 17px 0;
        margin-top: auto;
        border: 3px solid #f5f2f0;
        text-align: center;
        white-space: normal
    }
    .page__nav-wrap:active:after {
        background: #7e7e7e
    }
    .page__nav:active {
        border-color: #7e7e7e
    }
    .page__nav_prev {
        padding-left: 30px;
        border-right-width: 0;
        border-radius: 6px 0 0 6px
    }
    .page__nav_next {
        padding-right: 30px;
        border-left-width: 0;
        border-radius: 0 6px 6px 0
    }
    .page__nav_next:only-child {
        display: block;
        margin: 0 0 0 auto
    }
    .page .page__nav {
        -webkit-transform: none;
        transform: none
    }
    .page__nav-text {
        top: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        width: 30px;
        white-space: nowrap;
        text-align: center
    }
    .page__nav_prev .page__nav-text {
        left: 0;
        right: auto
    }
    .page__nav_next .page__nav-text {
        right: 0;
        left: auto
    }
    .page__nav-text:after {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content: ''
    }
    .page__nav-text:before {
        display: inline-block;
        margin-bottom: 0;
        min-height: 0;
        width: 30px;
        line-height: 1;
        vertical-align: middle
    }
    .working-hover .page__nav:hover .page__nav-text:before {
        background: none
    }
    .page__nav-text-shortcut {
        display: none
    }
    .page__nav-text-alternate {
        display: block;
        color: #333;
        white-space: nowrap
    }
}
@media (max-width: 480px) {
    .page__nav-text-alternate {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis
    }
}
.anchor,
.comments__header-write:link,
.pseudo,
.working-hover .spoiler__button:hover u {
    text-decoration: none;
    border-bottom: 1px dashed transparent
}
.working-hover .anchor:hover,
.working-hover .comments__header-write:link:hover,
.working-hover .pseudo:hover,
.working-hover .spoiler__button:hover u:hover {
    border-bottom: 1px dashed;
    text-decoration: none
}
.link__type[data-tooltip],
.link__type[data-url$=".doc"],
.link__type[data-url$=".docx"],
.link__type[data-url$=".pdf"],
.link__type[data-url$=".xls"],
.link__type[data-url$=".xlsx"],
.link__type[data-url$=".zip"],
.link__type[data-url*='wikipedia.org'],
.link__type[data-url^="mailto:"],
.link__type[data-url^='/play/'],
.link__type[data-url^='http://dev.w3.org'],
.link__type[data-url^='http://developer.mozilla.org'],
.link__type[data-url^='http://es5.github.com'],
.link__type[data-url^='http://msdn.microsoft.com'],
.link__type[data-url^='http://w3.org'],
.link__type[data-url^='http://wikipedia.org'],
.link__type[data-url^='http://www.w3.org'],
.link__type[data-url^='https://developer.mozilla.org'],
.link__type[data-url^='https://msdn.microsoft.com'],
.link__type[data-url^='https://w3.org'],
.link__type[data-url^='https://www.w3.org'] {
    position: fixed;
    color: #fff;
    background: #5c626a;
    padding: 0 9px;
    border-radius: 2px;
    font: 10px/19px Open Sans, Arial, Helvetica, sans-serif;
    letter-spacing: .1ex;
    white-space: nowrap
}
.pseudo {
    cursor: pointer;
    color: #0059b2
}
.working-hover .pseudo:hover {
    color: #ba1000
}
:link {
    color: #0059b2
}
:visited {
    color: #551a8b
}
@media print {
    a:visited {
        color: #0059b2
    }
}
:link,
:visited {
    text-decoration: none
}
.working-hover a:hover,
a:active {
    color: #ba1000;
    text-decoration: underline
}
.link-ref {
    vertical-align: super;
    font-size: 90%
}
.link__type[data-tooltip]:before {
    content: attr(data-tooltip)
}
.link__type[data-url^="mailto:"]:before,
.link__type[data-url^='/play/']:before {
    font-size: 12px
}
.link__type[data-url$=".doc"]:before,
.link__type[data-url$=".docx"]:before {
    content: 'DOC'
}
.link__type[data-url$=".zip"]:before {
    content: 'ZIP'
}
.link__type[data-url$=".xls"]:before,
.link__type[data-url$=".xlsx"]:before {
    content: 'XLS'
}
.link__type[data-url$=".pdf"]:before {
    content: 'PDF'
}
.link__type[data-url^='http://developer.mozilla.org']:before,
.link__type[data-url^='https://developer.mozilla.org']:before {
    content: 'MDN'
}
.link__type[data-url^='http://msdn.microsoft.com']:before,
.link__type[data-url^='https://msdn.microsoft.com']:before {
    content: 'MSDN'
}
.link__type[data-url*='wikipedia.org']:before,
.link__type[data-url^='http://wikipedia.org']:before {
    content: 'WIKI'
}
.link__type[data-url^='http://dev.w3.org']:before,
.link__type[data-url^='http://w3.org']:before,
.link__type[data-url^='http://www.w3.org']:before,
.link__type[data-url^='https://w3.org']:before,
.link__type[data-url^='https://www.w3.org']:before {
    content: 'W3C'
}
.link__type[data-url^='http://es5.github.com']:before {
    content: 'ECMA'
}
html:not(.working-hover) .link__type {
    display: none
}
.main .plain,
.task .task__open-link,
.toolbar .toolbar__button,
body .code-tabs .code-tabs__button {
    padding: 0;
    background-image: none
}
.page_ebook a[href*='://']:not([href*='javascript.']) {
    padding-right: 1.25em
}
.page_ebook a[href*='://']:not([href*='javascript.']):after {
    position: absolute;
    margin: .1em 0 0 .5em;
    font-size: 75%;
    text-decoration: none
}
.main__loud,
.main__strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    margin: 1em 0
}
.main {
    margin: auto;
    padding: 0 0 35px
}
.main_width-limit {
    max-width: 800px
}
.main_width-limit-wide {
    max-width: 1000px
}
.main:before,

.main__header {
    background: url("../img/article_header_bg.png") repeat;
    color: #fff;
    padding: 15px 0;
    position: relative;
    min-height: 150px;
    text-align: center;
    padding-top: 50px;
}

.main__header_subtitle {
    color: #fff;
    padding-top: 10px;
}

.main__lesson-nav {
    display: table;
    float: right
}
.main__lesson-nav-next,
.main__lesson-nav-prev {
    display: table-cell
}
.main__lesson-nav-prev {
    padding-right: 15px;
    border-right: 2px solid #f5f2f0
}
.main__lesson-nav-next {
    padding-left: 15px
}
.main__lesson-nav-prev:last-child {
    border: none;
    padding-right: 0
}
.main__lesson-nav kbd {
    font-size: 11px;
    color: #999;
    font: inherit
}
.main__lesson-nav-arr {
    position: relative;
    top: -.1em
}
.main__lesson-nav-link {
    color: #656565;
    text-decoration: underline
}
.main ol,
.main ul {
    padding-left: 21px;
    margin: 22px 0
}
.main ol>li,
.main ul>li {
    margin: .3em 0
}
.main ol ol,
.main ol ul,
.main ul ol,
.main ul ul {
    margin-top: 0;
    margin-bottom: 0
}
.main ul>li:before {
    content: "\25CF";
    float: left;
    margin-left: -20px;
    color: #b2c1c1
}
.main h1 {
    margin-bottom: .5em
}
.main h2 {
    margin: 36px 0 22px;
    font-size: 185%;
    line-height: 150%;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    position: relative
}
.main h3,
.main h4 {
    margin: 30px 0 22px
}
.main h3 {
    font-size: 128%;
    line-height: 120%
}
.main h4 {
    font-size: 114%;
    line-height: 125%
}
.main h5 {
    font-size: 110%;
    line-height: 125%
}
.main h2+h3,
.main h3+h4 {
    margin-top: -8px
}
.main h2,
.main h3,
.main h4 {
    position: relative
}
h2 .main__anchor,
h3 .main__anchor,
h4 .main__anchor {
    transition: color .2s
}
.working-hover h2 .main__anchor:hover,
.working-hover h3 .main__anchor:hover,
.working-hover h4 .main__anchor:hover {
    color: #666
}
.main h1 a,
.main h1 code,
.main h2 a,
.main h2 code,
.main h3 a,
.main h3 code,
.main h4 a,
.main h4 code {
    font: inherit;
    color: inherit;
    text-decoration: none
}
.main h1,
.main h2,
.main h3,
.main h4,
.main h5 {
    page-break-after: avoid
}
.main h1+p,
.main h2+p,
.main h3+p,
.main h4+p,
.main h5+p {
    page-break-before: avoid
}
.main .format_error {
    color: red
}
.main div.format_error {
    border: 1px solid red;
    padding: 5px
}
.main .admin_link {
    float: right;
    color: gray
}
.main__anchor {
    outline: 0
}
.main__anchor:before {
    position: absolute;
    right: 100%;
    width: 30px;
    text-align: left;
    outline: 0;
    color: #d8d8d8;
    font-size: 90%;
    line-height: inherit;
    font-weight: 400;
    opacity: 0;
    transition: opacity .2s
}
.working-hover .main__anchor:hover:before {
    opacity: 1
}
.main__anchor_noicon:before {
    display: none
}
.main code {
    font-family: Consolas, Lucida Console, Menlo, Monaco, monospace
}
.main code.pattern {
    border-bottom: 1px solid red
}
.main code.subject {
    border-bottom: 1px solid #00f
}
.main code.match {
    border-bottom: 1px solid green
}
.main span.shortcut {
    white-space: nowrap
}
.main span.shortcut code {
    border: 1px solid #333;
    padding: 0 1px;
    display: inline-block;
    margin: 1px 0
}
.main p {
    margin: 22px 0
}
.main dl {
    margin: 1em 0
}
.main dt {
    font-weight: 700
}
.main dd {
    margin: 8px 0 22px
}
.main__strong {
    font-style: italic;
    color: #8c0000
}
.main__footer {
    background: #f5f5f2;
    margin: 30px 0 27px;
    padding: 16px 40px 9px
}
.main__footer .rating {
    margin-right: 22px
}
.main__footer .social {
    float: right
}
.main__footer-author,
.main__footer-author a,
.main__footer-date {
    color: #444;
    font: 13px Arial, Helvetica, sans-serif
}
.main__footer-date {
    margin-right: 15px
}
.main__footer-author {
    margin-right: 10px
}
.main__footer-star {
    position: absolute;
    font-size: 18px;
    color: #bbb;
    margin: 0 10px
}
.main__footer-star:before {
    display: inline-block;
    vertical-align: middle;
    min-width: 17px;
    min-height: 19px
}
@media (max-width: 840px) {
    .main {
        padding: 0 0 35px
    }
}
@media (max-width: 568px) {
    .main {
        padding-bottom: 0
    }
    .main .main__header-title {
        font-size: 34px
    }
}
@media (min-width: 1120px) {
    .main {
        line-height: 19px
    }
}
@media (min-width: 1170px) {
    .main {
        line-height: 20px
    }
}
@media (min-width: 1220px) {
    .main {
        line-height: 22px
    }
}
@media (min-width: 1420px) {
    .main {
        font-size: 16px
    }
}
.content:before {
    content: "";
    display: table
}
.content_center {
    text-align: center
}
figure .image {
    display: block;
    position: relative;
    max-width: 100%
}
figure .image__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.share {
    font-size: 22px;
    color: #7e7e7e;
    vertical-align: middle
}
.share,
.share:after {
    display: inline-block
}
.share:after {
    vertical-align: bottom;
    min-height: 20px;
    min-width: 20px
}
.working-hover .share:hover {
    text-decoration: none
}
.share_tw {
    color: #71baf2
}
.working-hover .share_tw:hover {
    color: #2092eb
}
.share_fb {
    color: #8c9cc2
}
.working-hover .share_fb:hover {
    color: #576ea4
}
.share_fb:after {
    min-width: 12px
}
.share_gp {
    color: #e99587
}
.working-hover .share_gp:hover {
    color: #db5039
}
.share_vk {
    color: #9badc3
}
.working-hover .share_vk:hover {
    color: #6480a2
}
.share_vk:after {
    min-width: 27px
}
.donate-button {
    background: linear-gradient(180deg, #eee, #ccc);
    display: inline-block;
    color: #333939;
    border: 1px solid #cfcecd;
    margin: 10px 0;
    font: 700 14px Open Sans, Arial, Helvetica, sans-serif;
    line-height: 30px;
    padding: 0 16px 0 8px;
    height: 32px;
    border-radius: 4px
}
.donate-button:focus {
    outline: 0
}
.working-hover .donate-button:hover {
    background: linear-gradient(180deg, #ddd, #bbb);
    border-color: #bebdbc
}
.donate-button:before {
    color: rgba(184, 0, 0, .5);
    display: inline-block;
    vertical-align: bottom;
    min-height: 20px;
    min-width: 20px;
    margin-right: 10px;
    font-size: 16px
}
.donate-links {
    display: inline-block
}
.donate-links__title {
    display: inline-block;
    margin-right: 10px;
    color: #c4c2c0;
    font-size: 12px
}
.donate-links__link {
    color: #fffb9d;
    margin-right: 20px;
    transition: color .2s;
    font-size: 16px
}
.working-hover .donate-links__link:hover {
    color: #fff;
    text-decoration: none
}
.donate-links__link:after {
    display: inline-block;
    vertical-align: bottom;
    min-height: 20px;
    min-width: 20px
}
.sidebar {
    width: 249px;
    background: #f5f2f0;
    border-right: 1px solid #d5d2d0
}
.sidebar__inner {
    overflow: auto;
    height: 100%
}
.sidebar__content {
    margin: 23px 30px 0;
    position: relative
}
.sidebar_sticky-footer .sidebar__content {
    min-height: calc(100% - 85px);
    padding-bottom: 62px
}
.sidebar_sticky-footer .sidebar__section:last-child {
    position: absolute;
    bottom: 0
}
.sidebar .map,
.sidebar .sidebar__toggle {
    position: absolute;
    top: 12px;
    left: 100%;
    margin-left: 19px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer
}
.sidebar .map {
    text-align: center;
    line-height: 44px;
    top: 80px;
    transition: -webkit-transform .2s .2s;
    transition: transform .2s .2s;
    transition: transform .2s .2s, -webkit-transform .2s .2s
}
.sidebar .sidebar__toggle:active {
    position: absolute
}
.sidebar .map:focus,
.sidebar__toggle:focus {
    outline: 0
}
.working-hover .sidebar .map:hover,
.working-hover .sidebar__toggle:hover {
    background: #f4f4f4
}
.sidebar__toggle:before {
    font-size: 22px;
    color: #8b8987
}
.sidebar__section {
    margin: 22px 0;
    padding: 0 2px;
    position: relative
}
.sidebar__section_separator_before {
    margin-top: 29px
}
.sidebar__section_separator_before:before {
    content: "";
    position: absolute;
    top: -12px;
    width: 35px;
    border-top: 1px solid #d7d7d4
}
.sidebar__section_share {
    margin-top: 18px
}
.sidebar__section-title {
    color: #c4c2c0;
    font-weight: 400;
    margin: 12px 0
}
.sidebar__link {
    color: #696664
}
.working-hover .sidebar__link:hover {
    text-decoration: none
}
.sidebar__navigation-link {
    margin: 12px 0;
    line-height: 1.25
}
.sidebar__navigation-link_active {
    color: #ba1000
}
.sidebar__share {
    margin: 8px 20px 0 0
}
@media (max-width: 840px) {
    .sidebar__toggle {
        display: none
    }
}
.sidebar_compact .sidebar__section {
    margin: 15px 0
}
.sidebar_compact.sidebar_sticky-footer .sidebar__section:last-child {
    margin: 22px 0
}
.sidebar_compact .sidebar__section_separator_before {
    margin-top: 24px
}
.sidebar_compact .sidebar__section-title {
    margin: 8px 0
}
.sidebar_compact .sidebar__navigation-link {
    line-height: 1.1;
    margin: 8px 0
}
@media (max-height: 600px) {
    .sidebar_sticky-footer .sidebar__content {
        padding-bottom: 38px;
        min-height: calc(100% - 62px)
    }
    .sidebar_compact.sidebar_sticky-footer .sidebar__section:last-child,
    .sidebar_sticky-footer .sidebar__section:last-child {
        margin: 10px 0
    }
}
.breadcrumbs {
    list-style: none;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #888
}
.breadcrumbs .breadcrumbs__item {
    display: inline-block;
    margin: 0
}
.breadcrumbs .breadcrumbs__item:after {
    content: "\2192";
    font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;
    color: #a9a9a9;
    display: inline-block;
    margin: 0 9px 0 7px
}
.breadcrumbs .breadcrumbs__item:last-child:after,
.breadcrumbs__hidden-text {
    display: none
}
.breadcrumbs__item_home .breadcrumbs__link:before {
    display: inline;
    min-width: 17px;
    font-size: 18px;
    color: #999;
    vertical-align: -1px
}
.working-hover .breadcrumbs__item_home .breadcrumbs__link:hover {
    text-decoration: none
}
.working-hover .breadcrumbs__item_home .breadcrumbs__link:hover:before {
    color: inherit
}
.breadcrumbs__link {
    color: #0059b2
}
.working-hover .breadcrumbs__link:hover {
    color: #ba1000
}
.important {
    margin: 30px 0;
    border: 3px solid #f5f2f0;
    border-radius: 6px
}
.important__header {
    margin: 0;
    padding: 21px 25px 0;
    border: none
}
.important__type {
    font-weight: 700;
    font-size: 17px
}
.important__type:before {
    display: inline-block;
    min-width: 30px;
    font-size: 20px
}
.important__title {
    display: inline;
    margin: 0;
    font-size: 128%;
    font-weight: 700
}
.important__title a,
.important__title a u {
    color: inherit;
    text-decoration: none
}
.working-hover .important__title a:hover u {
    text-decoration: underline
}
.important__content {
    margin: 12px 25px 22px
}
.important__content>.spoiler {
    border: 0;
    background: none;
    margin: 15px 0;
    padding: 10px 20px 10px 0
}
.important__content>.spoiler+.spoiler {
    margin-top: -15px
}
.important__content .spoiler__button {
    color: #747361
}
.important_warn .important__type:before {
    color: #ffb200
}
.important_smart .important__type:before {
    color: #0083b3
}
.important_ponder .important__type:before {
    color: #ba6eff
}
.important_ok .important__type:before {
    color: #83b100
}
@media (max-width: 840px) {
    .important__header {
        margin: 0;
        padding: 10px 12px 0;
        border: none
    }
    .important__content {
        margin: 6px 12px 11px
    }
}
@media print {
    .important {
        page-break-inside: avoid
    }
}
.summary {
    background: #f5f2f0;
    margin: 12px 0;
    border: 1px solid #dfdfd0
}
.summary__content {
    margin: 22px
}
.summary_noborder {
    border: 0;
    padding: 1px 0;
    border-radius: 4px
}
@media print {
    .summary {
        page-break-inside: avoid
    }
}
.shortcut {
    background: #f6f4f2;
    border: 1px solid #e8e6e5;
    border-radius: 3px;
    padding: 1px 2px 0;
    font-family: Consolas, Lucida Console, Menlo, Monaco, monospace;
    line-height: inherit;
    word-spacing: -.4ex
}
.shortcut__plus {
    color: #b8b7b7
}
.spoiler {
    background: #f5f2f0;
    border-top: 1px solid #d9d7d6;
    margin: 20px 0;
    padding: 15px 20px 20px
}
.spoiler__button {
    color: #0059b2;
    position: relative;
    font: 14px/18px Open Sans, Arial, Helvetica, sans-serif;
    padding: 1px 1px 1px 0;
    outline: none
}
.spoiler__button,
.spoiler__button u {
    text-decoration: none
}
.working-hover .spoiler__button:hover {
    color: #ba1000
}
.spoiler__button:after {
    margin-left: 1ex;
    display: inline-block;
    vertical-align: middle;
    min-width: 9px;
    min-height: 18px
}
.spoiler__content {
    margin-top: 20px
}
.spoiler+.spoiler {
    margin-top: -20px
}
.spoiler.closed .spoiler__content {
    display: none
}
.toolbar {
    display: table-row
}
.toolbar__tool {
    display: table-cell;
    padding-left: 1px
}
.toolbar .toolbar__button {
    display: inline-block;
    vertical-align: bottom;
    width: 30px;
    height: 30px;
    background: #c4c2c0;
    text-align: center;
    line-height: 30px;
    font-size: 16px
}
.toolbar__button:active,
.toolbar__button:link,
.toolbar__button:visited,
.working-hover .toolbar__button:hover {
    color: #fff;
    text-decoration: none
}
.working-hover .toolbar__button:hover {
    background: #95928e
}
.codebox {
    position: relative;
    margin: 1.5em 0;
    overflow: auto
}
.codebox__toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    opacity: .8
}
.codebox__code,
.codebox__code pre {
    width: 100%;
    height: 100%
}
.codebox__code pre {
    box-sizing: border-box
}
.code-result {
    position: relative;
    border: 1px solid #e7e5e3;
    margin: 22px 0
}
.code-result__toolbar {
    position: absolute;
    top: 0;
    right: 0
}
.code-result__iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100px
}
.code-example {
    margin: 22px 0
}
.code-example__codebox,
.code-example__codebox pre[class*=language-] {
    margin-bottom: 0
}
.code-example__codebox {
    width: 100%;
    height: 100%
}
.code-example__result {
    margin-top: 0
}
.code-tabs {
    margin: 22px 0
}
.code-tabs__tools {
    display: table;
    background: #f5f2f0;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
    position: relative;
    z-index: 99;
    width: 100%
}
.code-tabs_result_on .code-tabs__tools {
    box-shadow: none
}
.code-tabs__buttons,
.code-tabs__switches-wrap {
    display: table-cell;
    white-space: nowrap;
    vertical-align: top
}
.code-tabs__scroll-wrap {
    width: 0;
    display: none
}
.code-tabs_scroll .code-tabs__scroll-wrap {
    display: table-cell
}
.code-tabs__buttons {
    background: #f0edeb
}
.code-tabs__scroll-button {
    width: 17px;
    padding: 0 1px;
    background: #d8d8d8;
    height: 49px;
    color: #fff;
    line-height: 49px;
    font-size: 18px
}
.working-hover .code-tabs__scroll-button:hover {
    background: #e1d8cd
}
.code-tabs__scroll-button[disabled] {
    background: #d8d8d8;
    color: #ebebeb;
    cursor: default
}
.code-tabs__switches-wrap {
    width: 100%
}
.code-tabs__switches {
    height: 59px;
    margin-bottom: -10px;
    overflow: hidden;
    position: relative
}
.code-tabs__switches-items {
    position: absolute;
    transition: .1s ease-in-out
}
.code-tabs__switch {
    color: #656565;
    background: #f5f2f0;
    text-align: center;
    padding: 12px 15px;
    line-height: 25px;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 15px;
    display: inline-block;
    vertical-align: bottom
}
.working-hover .code-tabs__button:hover,
.working-hover .code-tabs__switch:hover {
    background: #e6e6e6
}
.code-tabs__switch_current,
.working-hover .code-tabs__switch_current:hover {
    background: #c4c2c0;
    color: #fff;
    position: relative
}
.code-tabs__switch_current {
    cursor: default
}
.code-tabs__switch_current:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-top: 8px solid #c4c2c0;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent
}
body .code-tabs .code-tabs__button {
    display: inline-block;
    font-size: 18px;
    padding: 12px;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #999;
    outline: 0
}
.code-tabs__button,
.working-hover .code-tabs__button:hover {
    text-decoration: none
}
.code-tabs__content {
    overflow: auto;
    box-sizing: border-box
}
.code-tabs_result_on .code-tabs__content {
    border: solid #f5f2f0;
    border-width: 0 3px 3px;
    padding: 15px 0 0 15px
}
.code-tabs__dropdown {
    background: #fff;
    font-size: 13px;
    border: solid #e0dbd7;
    border-width: 0 1px 1px;
    box-sizing: border-box;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    position: absolute;
    z-index: 99;
    display: none;
    min-width: 111px
}
.code-tabs__section {
    display: none;
    height: 100%;
    position: relative
}
.code-tabs__section_current {
    display: block
}
.code-tabs .code-tabs__section pre[class*=language-] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 0
}
.code-tabs .code-tabs__section pre[class*=language-] .line-numbers-rows {
    bottom: 0
}
.code-tabs__result {
    display: block;
    border: 0;
    width: 100%;
    height: 100%
}
.balance {
    position: relative;
    margin: 38px 0;
    border: 4px solid #f5f2f0;
    border-radius: 2px
}
.balance .balance__title {
    margin: 0 0 14px;
    font-size: 128%;
    line-height: 120%;
    font-weight: 700
}
.balance .balance__list {
    padding-left: 19px
}
.balance li {
    margin: 12px 0
}
.balance__minuses,
.balance__pluses {
    float: left;
    width: 50%;
    box-sizing: border-box
}
.balance__pluses .balance__content {
    margin: 20px 35px 30px 23px
}
.balance__minuses .balance__content {
    margin: 20px 23px 30px 35px
}
.balance__minuses:before {
    content: "";
    border-left: 2px solid #f5f2f0;
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 50%;
    margin-left: -1px
}
.balance_single .balance__minuses:before {
    display: none
}
.balance_single .balance__minuses,
.balance_single .balance__pluses {
    width: 100%
}
.balance_single .balance__minuses .balance__content,
.balance_single .balance__pluses .balance__content {
    margin: 20px 35px 30px 23px
}
.balance .balance__pluses li:before {
    color: #8dc082
}
.balance .balance__minuses li:before {
    color: #c13335
}
.balance__content,
.balance__content .code-example,
.balance__content .code-tabs,
.balance__content .codebox,
.balance__content figure,
.balance__content ol,
.balance__content p,
.balance__content ul {
    margin: 14px 0
}
.page_ebook .balance {
    backround: #fcc
}
.page_ebook .balance .balance__minuses,
.page_ebook .balance .balance__pluses {
    float: none;
    width: 100%
}
.page_ebook .balance .balance__minuses:before {
    display: none
}
.page_ebook .balance .balance__content {
    margin: 20px 23px 30px
}
@media print {
    .page_ebook .balance .balance__minuses,
    .page_ebook .balance .balance__pluses {
        float: left;
        width: 50%;
        box-sizing: border-box
    }
    .page_ebook .balance .balance__pluses .balance__content {
        margin: 20px 35px 30px 23px
    }
    .page_ebook .balance .balance__minuses .balance__content {
        margin: 20px 23px 30px 35px
    }
    .page_ebook .balance .balance__minuses:before {
        display: block
    }
    .page_ebook .balance_single .balance__minuses:before {
        display: none
    }
    .page_ebook .balance_single .balance__minuses,
    .page_ebook .balance_single .balance__pluses {
        width: 100%
    }
    .page_ebook .balance_single .balance__minuses .balance__content,
    .page_ebook .balance_single .balance__pluses .balance__content {
        margin: 20px 35px 30px 23px
    }
}
@media (max-width: 840px) {
    .balance__minuses,
    .balance__pluses {
        float: none;
        width: 100%
    }
    .balance__minuses:before {
        display: none
    }
    .balance .balance__content {
        margin: 20px 23px 30px
    }
}
.comments {
    margin-top: 35px;
    padding-bottom: 30px;
    border-bottom: 2px solid #eee
}
.comments__header {
    position: relative
}
.comments__read-before {
    position: absolute;
    top: 10px;
    right: 0
}
.comments__read-before-link {
    position: relative;
    z-index: 9999;
    cursor: pointer;
    color: #999
}
.working-hover .comments__read-before-link:hover {
    color: #c13335
}
.comments__read-before-popup {
    position: fixed;
    left: 3000px;
    z-index: 9998;
    opacity: 0;
    min-width: 590px;
    padding-top: 45px;
    transition: opacity .2s ease-out .2s
}
.comments__read-before-popup-i {
    position: relative;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    background: #f7f6ea
}
.comments__read-before-popup-i:after {
    position: absolute;
    right: 70px;
    top: -7px;
    width: 15px;
    height: 15px;
    background: #f7f6ea;
    -webkit-transform: rotate(55deg) skew(25deg);
    transform: rotate(55deg) skew(25deg);
    content: ''
}
.comments__read-before-popup ul {
    margin: 0
}
.working-hover .comments__read-before:hover .comments__read-before-popup {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    opacity: 1
}
.comments .comments__header-title {
    border-bottom: 0;
    display: inline;
    margin-right: 16px;
    color: #333;
    font: 30px/36px Open Sans Condensed, Arial, Helvetica, sans-serif
}
.comments__header-title:before {
    display: inline-block;
    line-height: 1;
    font-size: 80%;
    color: #eee;
    margin-right: 8px;
    min-width: 26px;
    min-height: 25px
}
.comments__header-number {
    color: #aaa
}
.comments__header-number:before {
    content: "("
}
.comments__header-number:after {
    content: ")"
}
.comments__header-write:link {
    color: #666;
    font-size: 12px;
    vertical-align: .4em;
    position: relative;
    display: inline-block;
    line-height: 1
}
.comments__header-write:after {
    content: "\2193";
    position: absolute;
    margin-left: 3px;
    vertical-align: middle
}
@media (max-width: 840px) {
    .comments__read-before {
        position: static;
        -webkit-transform: none;
        transform: none
    }
    .comments__read-before-link {
        display: none
    }
    .comments__read-before-popup {
        position: static;
        opacity: 1;
        min-width: 0;
        padding-top: 0;
        transition: none
    }
    .comments__read-before-popup-i {
        position: static;
        padding: 20px;
        box-shadow: none;
        background: #fff
    }
    .comments__read-before-popup-i:after {
        content: none
    }
    .working-hover .comments__read-before:hover .comments__read-before-popup {
        position: static
    }
}
.banner-bottom {
    position: relative;
    display: none;
    border: 1px solid #cfcfcf;
    margin-top: 40px
}
.banner-bottom__link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none!important
}
.banner-bottom__logo,
.banner-bottom__slogan {
    margin: 20px 0
}
.banner-bottom__logo {
    width: 411px;
    height: 75px
}
.banner-bottom__slogan {
    font: 500 30px/31px Open Sans, sans-serif;
    color: #2788b5;
    text-align: center
}
.banner-bottom__slogan strong {
    display: block
}
.banner-bottom__disable {
    font-size: 12px;
    position: absolute;
    top: -20px;
    right: 0;
    color: #93918f
}
.submit-button {
    background: linear-gradient(180deg, #579c75, #488060);
    display: inline-block;
    color: #fff;
    border: solid #66a983;
    border-width: 3px 0 0;
    margin: 10px 0;
    font: 700 14px Open Sans, Arial, Helvetica, sans-serif;
    line-height: 30px;
    padding: 0 14px 4px;
    height: 37px;
    border-radius: 4px
}
.submit-button_small {
    height: 30px;
    line-height: 24px;
    padding-bottom: 3px
}
.submit-button:focus {
    outline: 0
}
.working-hover .submit-button:hover {
    background: linear-gradient(180deg, #66b588, #51a876);
    border-top: 3px solid #76bd95
}
.submit-button:disabled {
    background: linear-gradient(180deg, #acacac, #a0a0a0);
    border-top: 3px solid #b5b5b5
}
.submit-button__spinner {
    vertical-align: middle
}
.submit-button__spinner .loader__dot {
    background-color: #fff
}
.submit-button_progress .submit-button__text {
    overflow: hidden;
    height: 0;
    display: block
}
.page-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    margin-top: 30px;
    padding: 0 48px;
    color: #9d9d9d;
    background: #fbfafa;
    border-top: 2px solid #f3f2f1
}
.page-footer:after {
    display: table;
    content: ""
}
.page-footer__link {
    color: #3b86c4
}
.page-footer__slack {
    color: #3b86c4;
    background: url(/pack/modules/styles/blocks/page-footer/slack.8559a3750105522de87657cad56c63d1.svg) 0 no-repeat;
    background-size: 16px;
    padding-left: 20px;
    margin-left: -4px
}
.page-footer__left {
    -ms-flex-positive: 1;
    flex-grow: 1
}
.page-footer__item {
    display: inline-block;
    margin-right: 15px
}
.page-footer__item:not(:last-child):after {
    margin-left: 15px;
    content: '|'
}
@media (max-width: 840px) {
    .page-footer {
        display: block;
        height: auto;
        margin-top: 0;
        text-align: center
    }
    .page-footer__item {
        display: block;
        margin: 20px 0
    }
    .page-footer__item:after {
        display: none
    }
}
.main table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 30px 0
}
.main table tbody {
    border: 0
}
.main table tr {
    border-bottom: 1px solid #ccc
}
.main table th {
    text-align: left
}
.main table caption,
.main table td,
.main table th {
    padding: 2px 1em 2px 5px
}
.main table tr:nth-child(even) {
    background: #f9f9f9
}
.main table code {
    font-weight: inherit
}
.main table tr:first-child th {
    border-bottom: 3px solid #ccc;
    vertical-align: bottom
}
.main table caption {
    text-align: left
}
@media (min-width: 1420px) {
    .main table {
        font-size: 15px
    }
}
.corrector {
    padding: 18px 0;
    color: #999;
    font-style: italic
}
.main .quote p {
    margin: 0
}
.quote {
    padding: 25px;
    border: 4px solid #fcf8ec;
    border-radius: 2px
}
.quote__i {
    float: left;
    box-sizing: border-box;
    width: 75%;
    padding-right: 70px
}
.quote__text {
    font: italic 16px/20px Georgia, "serif";
    color: #ae8f4b
}
.quote__author {
    font-size: 14px;
    line-height: 20px;
    font-style: normal
}
.quote__footer {
    float: right;
    position: relative;
    box-sizing: border-box;
    width: 20%
}
.quote__footer:before {
    font-size: 17px;
    line-height: 40px;
    position: absolute;
    left: -53px;
    top: -8px;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #ccc
}
.lessons-list {
    margin: 22px 0;
    border-radius: 6px;
    border: 4px solid #f5f2f0;
    background: #fff
}
ol.lessons-list__lessons {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: lesson
}
.lessons-list li.lessons-list__lesson {
    margin: 0;
    position: relative
}
.lessons-list__lesson {
    font: 16px/20px Open Sans, Arial, Helvetica, sans-serif;
    padding: 16px 20px 14px 55px;
    border-bottom: 1px solid #ede8e0
}
.lessons-list__lessons .lessons-list__lessons {
    max-height: 0;
    overflow: hidden
}
.lessons-list__lesson_open .lessons-list__lessons {
    max-height: 1500px
}
.lessons-list__lesson:last-child {
    border: 0
}
.lessons-list__lesson:before {
    content: counter(lesson) '.';
    counter-increment: lesson;
    font: 16px/20px Open Sans Condensed, Arial, Helvetica, sans-serif;
    color: #959595;
    position: absolute;
    left: 10px;
    top: 16px;
    min-width: 30px;
    min-height: 22px;
    text-align: right
}
.lessons-list__lesson[data-section-number]:before {
    content: attr(data-section-number) '.' counter(lesson)
}
.lessons-list__link {
    color: #2974bb
}
.lessons-list__lesson_level_1 {
    background: #faf8f7;
    padding-left: 46px
}
.lessons-list__lesson_level_1>.lessons-list__link {
    font-weight: 600
}
.lessons-list__lesson_level_1:before {
    content: counter(lesson) '.';
    left: 5px;
    min-width: 27px
}
.lessons-list__lesson_level_1 .lessons-list__lessons {
    margin: 14px -20px -14px -46px
}
.lessons-list__lesson_level_2 {
    background: #fff;
    padding-left: 71px
}
.lessons-list__lesson_level_2:first-child {
    border-top: 1px solid #ede8e0
}
.lessons-list__lesson_level_2:before {
    content: counters(lesson, '.');
    left: 35px
}
.lessons-list_screencast .lessons-list__download {
    position: absolute;
    right: 25px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .4s
}
.lessons-list_screencast .lessons-list__download:before {
    font-size: 20px;
    color: #7e7e7e
}
.working-hover .lessons-list_screencast .lessons-list__lesson:hover .lessons-list__download {
    opacity: 1
}
.lessons-list_screencast .lessons-list__popup {
    position: absolute;
    right: -80px;
    top: 0;
    z-index: 10;
    display: none;
    width: 180px;
    padding-top: 30px
}
.lessons-list_screencast .lessons-list__popup-list {
    position: relative;
    margin: 0!important;
    padding: 10px!important;
    border-radius: 4px;
    border: 2px solid #c6c6c6;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .13)
}
.lessons-list_screencast .lessons-list__popup-list:before {
    position: absolute;
    left: 50%;
    top: -7px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 2px solid #c6c6c6;
    border-right: 0;
    border-bottom: 0;
    background: #fff;
    content: ""
}
.working-hover .lessons-list_screencast .lessons-list__download:hover .lessons-list__popup {
    display: block
}
.lessons-list_screencast .lessons-list__popup-item {
    font-size: 14px;
    line-height: 22px;
    list-style: none!important;
    margin: 0!important;
    padding: 0!important
}
.lessons-list_screencast .lessons-list__popup-item a {
    color: #000;
    white-space: nowrap
}
.working-hover .lessons-list_screencast .lessons-list__popup-item a:hover {
    color: #c13335
}
.lessons-list_screencast .lessons-list__popup-item:before {
    display: none
}
.lessons-list_screencast .lessons-list__lesson>a:before {
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -12px;
    opacity: 0;
    font-size: 15px;
    width: 21px;
    height: 23px;
    line-height: 23px;
    padding-left: 3px;
    text-align: center;
    color: #7e7e7e;
    border: 1px solid;
    background: #fff;
    border-radius: 50%;
    transition: opacity .4s
}
.working-hover .lessons-list_screencast .lessons-list__lesson:hover a:before {
    opacity: 1
}
.working-hover .lessons-list_screencast .lessons-list__lesson a:hover:before {
    color: #c13335
}
@media (max-width: 1100px) {
    .lessons-list_screencast .lessons-list__download {
        right: 30px
    }
    .lessons-list_screencast .lessons-list__popup {
        position: absolute;
        right: -20px
    }
    .lessons-list_screencast .lessons-list__popup-list:before {
        left: auto;
        right: 20px;
        top: -7px
    }
}
@media (max-width: 840px) {
    .lessons-list__lesson:before {
        top: 10px;
        left: 5px
    }
    .lessons-list__lesson {
        padding: 10px 10px 9px 43px
    }
}
.extract {
    max-width: 615px;
    margin: 0 auto;
    padding: 0 0 30px;
    text-align: left
}
.extract_small {
    font-size: 13px;
    padding: 8px 23px 11px;
    line-height: 19px;
    border-radius: 0
}
.extract__item {
    position: relative;
    cursor: pointer
}
.extract .extract__header {
    background: #ddd;
    text-align: center;
    color: #191e1e;
    margin-bottom: 21px;
    font-size: 28px;
    padding: 7px 27px 14px;
    border-radius: 3px 3px 0 0
}
h3.extract__title {
    color: #b20600;
    font: 17px Open Sans Condensed, Arial, Helvetica, sans-serif;
    margin: 0
}
.extract__title label {
    cursor: pointer
}
.extract__dates {
    font-weight: 700;
    margin: 0 27px;
    line-height: 26px
}
.extract_small .extract__dates,
.extract_small .extract__info {
    margin: 0
}
.extract__wrap {
    display: table;
    width: 100%;
    min-height: 79px;
    margin-top: 2px;
    background: #f5f2f0;
    transition: background-color .2s
}
.extract__input {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px
}
.extract__aside,
.extract__content,
.extract__input-wrap {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 0
}
.extract__aside {
    white-space: nowrap;
    border-right: 2px solid transparent
}
.extract__input:checked~.extract__wrap {
    background: #f9edbf
}
.extract__content {
    padding-left: 20px;
    padding-right: 10px
}
.extract__aside_price {
    width: .1%;
    padding-right: 4em;
    font-size: 14px
}
.extract__input-wrap {
    width: 36px
}
.extract__aside_price .price__secondary {
    position: absolute;
    left: 100%;
    bottom: 0;
    margin: 0 0 3px 7px;
    white-space: nowrap
}
.extract__aside_center {
    text-align: center
}
.extract__price {
    margin-top: 3px;
    position: relative
}
body .grayed-list {
    max-width: 620px;
    padding: 0 20px;
    margin: 0 auto
}
.grayed-list .grayed-list__item {
    font: 27px/1.2 Open Sans Condensed, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 22px 25px 28px;
    text-align: center;
    color: #e7e5e3;
    background: #f5f2f0;
    border-top: 2px solid #e7e5e3
}
.grayed-list .grayed-list__item:before {
    display: none
}
.grayed-list .grayed-list__item:first-child {
    border-top: 0
}
.grayed-list .grayed-list__item:last-child {
    border-radius: 0 0 10px 10px
}
@media (max-width: 840px) {
    .grayed-list {
        display: none
    }
}
.search-form {
    border: solid #eee;
    border-width: 1px 0 0;
    padding-top: 24px
}
.search-form_fixed {
    border-color: #c5c5c5;
    border-width: 0 0 1px;
    background: #eee;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 120px;
    z-index: 9999;
    box-shadow: 0 0 3px #c5c5c5
}
.search-form_hidden {
    visibility: hidden
}
.search-form__content {
    display: table;
    border-collapse: collapse;
    width: 100%
}
.search-form_fixed .search-form__content {
    margin: auto;
    max-width: 800px
}
.search-form__line {
    display: table-row
}
.search-form__option-wrap,
.search-form__query-wrap,
.search-form__send-wrap,
.search-form__status {
    display: table-cell;
    vertical-align: middle
}
.search-form__query-wrap {
    width: 100%
}
.search-form__send-wrap {
    white-space: nowrap
}
.search-form__query-wrap {
    padding-right: 20px
}
.search-form__query {
    width: 100%
}
.search-form__query .text-input__control {
    font: normal 14px/38px Open Sans, Arial, Helvetica, sans-serif;
    height: 38px;
    padding-left: 10px
}
.search-form__send {
    line-height: 36px;
    margin: 0;
    min-width: 140px;
    padding-left: 43px;
    padding-right: 43px
}
.search-form__footer {
    padding-top: 16px
}
.search-form__types {
    border-bottom: 1px solid #eee
}
.search-form__type {
    font: 15px Open Sans, Arial, Helvetica, sans-serif;
    padding: 9px 18px 12px;
    margin-bottom: -1px;
    color: #0059b2
}
.search-form__type[disabled] {
    border: 1px solid #eee;
    border-bottom-color: #fff;
    color: #727272;
    border-radius: 3px 3px 0 0;
    cursor: default
}
.search-form__status_notfound {
    font: 21px Open Sans Condensed, Arial, Helvetica, sans-serif;
    padding-right: 160px
}
.search-form__marked {
    color: #bb1000;
    background: none
}
@media (max-width: 568px) {
    .search-form_fixed {
        display: none
    }
}
.search-results {
    counter-reset: result-item;
    margin-top: 22px
}
.search-results__result {
    margin-bottom: 20px;
    margin-left: 27px
}
.search-results__title {
    font: 21px/1 Open Sans Condensed, Arial, Helvetica, sans-serif;
    counter-increment: result-item;
    position: relative
}
.search-results__title:before {
    content: counter(result-item);
    position: absolute;
    right: 100%;
    min-width: 22px;
    padding-right: 5px;
    font-size: 12px;
    line-height: 25px;
    color: #bbb
}
.search-results__count-note {
    color: #727272
}
.search-results__title-link {
    color: #2974bb
}
.search-results__extract {
    margin: 10px 0 3px
}
.search-results .search-results__path {
    margin: 0;
    padding: 0;
    color: #49916a;
    font-size: 12px
}
.search-results .search-results__path-step {
    display: inline-block;
    margin: 0 15px 0 0
}
.search-results .search-results__path-step:before {
    content: "/";
    color: inherit;
    margin-left: -9px
}
.search-results .search-results__path-step:first-child:before {
    display: none
}
.search-results__path-link {
    color: inherit
}
.search-results__marked {
    color: inherit;
    background: #ffffb7
}
.task__header {
    margin: 40px 0 12px
}
.task__title-wrap {
    padding-right: 45px
}
.task .task__title {
    margin: 0;
    line-height: 1;
    display: inline;
    font-size: 128%;
    font-weight: 700
}
.task .task__title a {
    font: inherit;
    color: inherit;
    text-decoration: none
}
.task__header-note {
    margin-top: 6px
}
.task .task__open-link {
    text-decoration: none;
    margin-left: 20px;
    outline: 0;
    position: absolute;
    line-height: 18px
}
.task__open-link:before {
    font-size: 16px;
    display: inline-block;
    min-width: 16px
}
.task__importance {
    color: #999;
    margin-right: 30px
}
.task__answer_open .task__solution {
    position: relative;
    background: #568dca;
    color: #fff;
    text-decoration: none;
    line-height: 18px;
    padding: 4px 15px;
    margin: -4px -15px;
    border-radius: 12px
}
.working-hover .task__answer_open .task__solution:hover {
    color: #fff
}
.task__answer_open .task__solution:after {
    content: "";
    position: absolute;
    border-bottom: 14px solid #f7f6ea;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    width: 0;
    height: 0;
    top: 100%;
    left: 50%;
    margin: 4px 0 0 -7px
}
.task__content,
.task__content .code-example,
.task__content .code-tabs,
.task__content .codebox,
.task__content figure,
.task__content ol,
.task__content p,
.task__content ul {
    margin: 18px 0
}
.task__content {
    line-height: 140%;
    margin-bottom: 21px
}
.task__answer {
    border: 3px solid #f7f6ea;
    margin: 20px 0 14px;
    position: relative;
    display: none
}
.task__answer-content {
    margin: 25px 30px
}
.task__answer-close,
.task__answer-close:active {
    position: absolute;
    top: -17px;
    right: -17px
}
.task__answer_open .task__answer {
    display: block
}
.task__step-show {
    background: #f7f6ea;
    display: block;
    width: 100%;
    height: 55px;
    text-align: left;
    padding: 0 30px;
    font: 700 114% Open Sans, Arial, Helvetica, sans-serif;
    color: inherit;
    position: relative
}
.task__step-show:before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    right: -3px;
    border-top: 1px solid #edece2
}
.task__step .task__answer-content,
.task__step:first-child .task__step-show:before,
.task__step_open+.task__step .task__step-show:before {
    display: none
}
.task__step_open .task__answer-content {
    display: block
}
.task__step_open .task__step-show {
    display: none
}
.task .task__step-title {
    margin: 25px 0 14px
}
.task-single {
    margin: 22px 0
}
.task-single__back {
    font-size: 14px
}
.task-single__back span,
.working-hover .task-single__back:hover {
    text-decoration: none
}
.working-hover .task-single__back:hover span {
    text-decoration: underline
}
.task-single__back:before {
    content: '\2190   '
}
.task-single__task {
    border-top: 1px solid #eee;
    margin-top: 17px
}
.task-single__task .task__header {
    margin-top: 24px
}
.task-single__task .task__title-wrap {
    padding: 0
}
.task-single__task .task__header-note {
    margin-top: 14px
}
.task-single__task .task__solution:after {
    margin-top: 6px
}
.task-single__task .task__content,
.task-single__task .task__content .code-example,
.task-single__task .task__content .code-tabs,
.task-single__task .task__content .codebox,
.task-single__task .task__content figure,
.task-single__task .task__content ol,
.task-single__task .task__content p,
.task-single__task .task__content ul {
    margin: 22px 0
}
.task-single__task .task__content .code-example .codebox {
    margin: 0
}
.tasks {
    margin-bottom: 60px
}
.tasks .tasks__title {
    font-size: 28px;
    margin-bottom: 10px
}
.tasks__title:before {
    transition: color .2s;
    display: inline-block;
    width: 35px;
    color: #80bd57;
    right: auto;
    left: 0;
    opacity: 1
}
.working-hover .tasks__title:hover:before {
    color: #a0ce81
}
.tasks__task {
    border-top: 3px solid #eee;
    margin: 20px 0 40px
}
.page_ebook .tasks .tasks__title {
    font-size: 20px
}
.intro {
    color: #51513f;
    font-size: 16px;
    margin-bottom: 19px;
    text-align: center
}
@media (max-width: 568px) {
    .intro {
        font-size: 14px;
        line-height: normal
    }
}
.course-search {
    background: #eee;
    border-radius: 4px;
    padding: 30px 40px 40px
}
.course-search__form {
    display: table;
    width: 100%
}
.course-search__input-wrap {
    display: table-cell;
    vertical-align: middle
}
.course-search__input-wrap_text,
.course-search__query {
    width: 100%
}
.course-search__query .text-input__control {
    font: normal 14px/38px Open Sans, Arial, Helvetica, sans-serif;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px
}
.course-search__input-wrap_submit {
    padding-left: 25px
}
.course-search__input-wrap_submit .button_action {
    line-height: 36px;
    min-width: 140px;
    padding-left: 43px;
    padding-right: 43px
}
@media (max-width: 840px) {
    .course-search {
        padding: 10px 15px 15px
    }
}
@media (max-width: 690px) {
    .course-search {
        display: none
    }
}
.course-info {
    border-radius: 4px;
    line-height: 1.3;
    margin-top: 22px;
    background: #f7f6ea;
    position: relative
}
.course-info .course-info__header {
    margin: 0;
    border-radius: 4px 4px 0 0;
    background: #f0efe4;
    padding: 9px 50px 12px
}
.course-info .course-info__header-title {
    font: 28px Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-align: center;
    margin: 0
}
.course-info__col {
    border-left: 1px solid #dfdfd0
}
.course-info__col:first-child {
    border: 0
}
.course-info__content {
    margin: 20px 35px 35px
}
.course-info__title-note {
    color: #656565;
    text-align: center;
    font-size: 12px
}
.course-info .map {
    position: absolute;
    top: 8px;
    right: 20px;
    cursor: pointer;
    color: #2974bb;
    font-size: 14px;
    vertical-align: middle
}
.course-info .course-info__title {
    font: 700 22px/1.2 Open Sans, Arial, Helvetica, sans-serif;
    color: #333;
    text-align: center;
    margin: 0 0 25px;
    padding: 0
}
.course-info .course-info__title_alternate {
    color: #b20600
}
.course-info_program .course-info__content {
    text-align: left
}
.course-info_program .course-info__content ol li {
    margin-top: 10px;
    color: #999
}
.course-info_program .course-info__content .course-info__text {
    color: #333
}
@media (max-width: 840px) {
    .course-info {
        border-radius: initial;
        margin-left: -10px;
        margin-right: -10px
    }
    .course-info_program {
        background: none
    }
    .course-info__body {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column
    }
    .course-info .course-info__col {
        display: block;
        width: auto;
        border: none
    }
    .course-info .course-info__col:last-child {
        border-top: 1px solid #dfdfd0
    }
    .course-info_program .course-info__col:last-child {
        -ms-flex-order: -1;
        order: -1;
        background: #f7f6ea;
        border: none
    }
    .course-info .map__text {
        display: none
    }
    .course-info__content {
        margin: 20px 15px 35px
    }
}
.main .special-links-list,
.special-links-list {
    padding: 0
}
.special-links-list .special-links-list__item {
    font: 400 16px Open Sans, Arial, Helvetica, sans-serif;
    margin: .2em 0
}
.special-links-list__item:before {
    content: "";
    display: none
}
.special-links-list .special-links-list__link {
    color: #2974bb
}
.working-hover .special-links-list .special-links-list__link:hover {
    color: #ba1000
}
.course-bricks .course-bricks__title {
    font: 200% Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-align: center;
    margin: 39px 0 4px
}
.course-bricks__brick-title .main__anchor:before {
    z-index: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 22px;
    line-height: 25px
}
.course-bricks .course-bricks__title~p {
    color: #999;
    text-align: center;
    margin-top: 0;
    margin-bottom: 36px
}
.course-bricks__container {
    font-size: 14px;
    margin: 0 -30px;
    -webkit-columns: 200px 3;
    -moz-columns: 200px 3;
    columns: 200px 3
}
.course-bricks__brick {
    margin: 0 30px;
    padding-bottom: 20px;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid
}
.main ul.course-bricks__chapters-list {
    margin: 0
}
.course-bricks__chapters-list .course-bricks__item {
    margin: .3em 0;
    line-height: 18px
}
.course-bricks__col:first-child .course-bricks__brick {
    margin: 0 18px 0 0
}
.course-bricks__col:last-child .course-bricks__brick {
    margin: 0 0 0 18px
}
.main .course-bricks .course-bricks__brick-title {
    font: 18px Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    margin: 0 0 10px!important
}
.working-hover .course-bricks .course-bricks__brick-title-link:hover {
    color: #666
}
.course-bricks__brick-content,
.course-bricks__brick-content p {
    margin: 12px 0
}
.error {
    margin-top: 100px;
    text-align: center
}
.error .error__type {
    font: 200% Open Sans Condensed, Arial, Helvetica, sans-serif;
    color: #b20600;
    margin: 0
}
.error .error__request {
    color: #b20600
}
.error__code {
    font-size: 860%;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 45px
}
.error__text {
    font-size: 115%;
    margin-bottom: 23px
}
.error__search {
    width: 435px;
    display: table;
    margin: auto
}
.error__search-query-wrap,
.error__search-submit-wrap {
    display: table-cell;
    vertical-align: middle
}
.error__search-query,
.error__search-query-wrap {
    width: 100%
}
.error__search-submit {
    margin: 0 0 0 7px
}
@media (max-width: 840px) {
    .tablet-menu {
        position: absolute;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        border: 0;
        border-radius: 0;
        background: #f5f2f0;
        box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .2)
    }
    .tablet-menu__line {
        display: table;
        width: 100%;
        border-top: 1px solid #e7e5e3
    }
    .tablet-menu__aside,
    .tablet-menu__content,
    .tablet-menu__title {
        display: table-cell;
        height: 60px;
        vertical-align: middle
    }
    .tablet-menu__header {
        white-space: nowrap
    }
    .tablet-menu__content {
        width: 100%;
        padding: 0 20px
    }
    .tablet-menu__content .map,
    .tablet-menu__content .tablet-ebook {
        color: #7e7e7e
    }
    .tablet-menu__aside {
        white-space: nowrap;
        padding: 0 20px 0 0
    }
    .tablet-menu__nav {
        width: 100%
    }
}
@media (max-width: 840px) {
    .search-paranja {
        position: fixed;
        z-index: 10;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: .6
    }
    body.paranja-open {
        overflow: hidden
    }
}
.map {
    font-size: 14px;
    color: #2974bb;
    text-decoration: none;
    white-space: nowrap
}
.map,
.map:before {
    vertical-align: middle
}
.map:before {
    font-size: 22px;
    line-height: 44px;
    color: #8b8987
}
.working-hover .map:hover {
    text-decoration: none
}
.map__text {
    margin-left: 14px;
    vertical-align: middle
}
.tablet-ebook {
    font-size: 14px;
    color: #2974bb;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap
}
.tablet-ebook:before {
    font-size: 22px;
    line-height: 44px;
    vertical-align: middle;
    color: #8b8987
}
.working-hover .tablet-ebook:hover {
    text-decoration: none
}
.tablet-ebook__text {
    margin-left: 14px;
    vertical-align: middle
}
.tablet-ebook__note {
    margin-left: 10px;
    opacity: .5
}
.tutorial-map {
    margin: 20px 20px 0;
    padding: 70px 40px 0;
    background: #fff;
    outline: none
}
.tutorial-map__filter {
    position: fixed;
    top: 0;
    left: 50px;
    right: 50px;
    z-index: 1;
    background: #fff;
    padding: 20px 10px
}
.tutorial-map__filter-t {
    display: table;
    width: 100%
}
.tutorial-map__filter .text-input__control::-webkit-input-placeholder {
    color: #7e7e7e;
    font: 14px/16px Open Sans, Arial, Helvetica, sans-serif;
    opacity: .5;
    padding-top: 2px
}
.tutorial-map__filter .text-input__control::-moz-placeholder {
    color: #7e7e7e;
    font: 14px/16px Open Sans, Arial, Helvetica, sans-serif;
    opacity: .5
}
.tutorial-map__filter .text-input__control:-ms-input-placeholder {
    color: #7e7e7e;
    font: 14px/16px Open Sans, Arial, Helvetica, sans-serif;
    opacity: .5
}
.tutorial-map__filter .text-input__control {
    font: 14px/16px Open Sans, Arial, Helvetica, sans-serif
}
.tutorial-map__filter.sticky .switch__label,
.tutorial-map__filter.sticky .text-input__control {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}
.tutorial-map__input-wrap,
.tutorial-map__layout,
.tutorial-map__option {
    display: table-cell;
    vertical-align: middle
}
.tutorial-map__input-wrap {
    width: 100%
}
.tutorial-map__option {
    white-space: nowrap;
    padding: 0 25px 0 40px
}
.tutorial-map__option-control {
    position: absolute;
    top: 50%;
    right: 100%;
    margin: 0;
    -webkit-transform: translateY(-50%) scale(1.25);
    transform: translateY(-50%) scale(1.25);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}
.tutorial-map__option-label {
    color: #7e7e7e;
    position: relative;
    padding-left: 11px
}
.tutorial-map__multicol,
.tutorial-map__singlecol {
    width: 33px;
    line-height: 32px
}
.tutorial-map__input {
    width: 100%;
    position: relative
}
.tutorial-map .tutorial-map__col-title {
    font: 18px Open Sans Condensed, Arial, Helvetica, sans-serif;
    line-height: 1.3;
    margin: 0 0 27px;
    padding: 0
}
.tutorial-map ol,
.tutorial-map ul {
    padding-left: 21px;
    margin: 22px 0
}
.tutorial-map ol>li,
.tutorial-map ul>li {
    margin: .3em 0
}
.tutorial-map .tutorial-map__col-title,
.tutorial-map .tutorial-map__items {
    padding-right: 25px
}
.tutorial-map .tutorial-map__items {
    margin-top: 27px;
    padding-left: 10px
}
.tutorial-map .tutorial-map__item {
    font-weight: 700;
    margin-top: 22px
}
.tutorial-map__item>.tutorial-map__link {
    position: relative;
    padding-left: 5px;
    margin-left: -5px
}
.tutorial-map__item>.tutorial-map__link:before {
    position: absolute;
    height: 14px;
    width: 16px;
    text-align: center;
    line-height: 14px;
    padding: 2px 0 0;
    color: #0059b2;
    font-size: 16px;
    right: 100%
}
.tutorial-map__item .tutorial-map__link_active {
    color: #b20600
}
.tutorial-map__item_collapsed>.tutorial-map__link:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.tutorial-map__item_collapsed .tutorial-map__sub-items {
    display: none
}
.tutorial-map .tutorial-map__sub-items {
    margin-top: 10px;
    padding-left: 15px
}
.tutorial-map .tutorial-map__sub-item {
    font-weight: 400;
    font-size: 13px;
    margin: 5px 0
}
.tutorial-map .tutorial-map__sub-item:before {
    content: "\2022";
    color: #bbb;
    font-size: 25px;
    position: absolute;
    margin: 0 0 0 -15px
}
.tutorial-map .tutorial-map__sub-sub-items {
    display: none;
    padding: 0 0 0 15px;
    margin: 0
}
.tutorial-map .tutorial-map__sub-sub-item {
    margin: 3px 0
}
.tutorial-map .tutorial-map__sub-sub-item:before {
    position: absolute;
    content: "\2713";
    color: #66ba7a;
    font-size: inherit;
    margin: 0 0 0 -14px
}
.tutorial-map__note {
    font-size: 85%;
    color: #656565
}
.tutorial-map_singlecol .tutorial-map__section.columns__col {
    display: block;
    width: auto
}
@media (max-width: 840px) {
    .tutorial-map {
        margin: 0 20px 20px
    }
    .tutorial-map__input {
        margin-top: 12px
    }
    .tutorial-map__option-control {
        margin-left: 0
    }
    .tutorial-map__filter,
    .tutorial-map__input-wrap,
    .tutorial-map__option {
        display: block
    }
    .modal .tutorial-map__input-wrap {
        width: calc(100% - 50px)
    }
    .tutorial-map__option {
        padding: 10px 0 0 16px
    }
    .tutorial-map__layout {
        display: none
    }
    .tutorial-map__section:not(:first-child) {
        margin-top: 30px
    }
    .tutorial-map .tutorial-map__section.columns__col {
        display: block;
        width: auto
    }
    .tutorial-map .tutorial-map__col-title {
        margin-bottom: 15px
    }
    .tutorial-map .tutorial-map__item,
    .tutorial-map .tutorial-map__items {
        margin-top: 25px
    }
}
.tutorial-map_show-tasks .tutorial-map__sub-sub-items {
    display: block
}
.tutorial-map-overlay {
    position: fixed;
    background: hsla(0, 0%, 100%, .96);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    overflow: auto
}
.tutorial-map-overlay__close,
.tutorial-map-overlay__close:active {
    position: fixed;
    top: 30px;
    right: 25px;
    z-index: 2;
    font-size: 42px;
    line-height: 42px;
    width: 42px;
    height: 42px;
    color: #fff
}
.tutorial-map-overlay__close:before {
    width: 25px;
    height: 25px;
    background: #999
}
.tutorial-map-overlay .tutorial-map {
    background: none;
    padding-top: 105px;
    padding-bottom: 50px
}
.tutorial-map-overlay .tutorial-map:after {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff 80%);
    content: ''
}
.tutorial-map-overlay .tutorial-map__filter {
    left: 0;
    right: 0;
    padding: 35px 0 10px
}
.tutorial-map-overlay .tutorial-map__filter-t {
    padding: 0 140px 0 40px;
    box-sizing: border-box
}
.tutorial-map_on {
    overflow: hidden
}
.tutorial-map_on .modal:before {
    background: none
}
.tutorial-map_on .modal .spinner__dot {
    background: #999
}
.tutorial-map_on .modal-dialog {
    -webkit-transform: none;
    transform: none
}
.notification {
    position: relative
}
.notification__content {
    margin: 22px 45px 22px 22px;
    color: #333;
    font: 400 14px/16px Open Sans, Arial, Helvetica, sans-serif;
    white-space: normal
}
.notification__content p {
    margin: 10px 0
}
.notification_message,
.notification_popup {
    border: 1px solid;
    border-radius: 4px
}
.notification_message {
    margin: 22px 0
}
.notification_popup {
    border: 1px solid;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .25);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 630px;
    transition: all .3s ease-out;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    box-sizing: border-box
}
.notification_top {
    min-height: 60px;
    display: inline-block;
    width: 100%;
    vertical-align: bottom
}
.notification_top .notification__content {
    text-align: center
}
.notification_error {
    background: #f2dede;
    border-color: #e7c9c9
}
.notification_error .notification__cause {
    color: #b20600
}
.notification_error .notification__close {
    color: #a86464
}
.working-hover .notification_error .notification__close .notification:hover {
    color: #b98383
}
.notification_warning {
    background: #fcf8e1;
    border-color: #ece6c4
}
.notification_warning .notification__close {
    color: #a99e62
}
.working-hover .notification_warning .notification__close .notification:hover {
    color: #bab181
}
.notification_info {
    background: #d9edf8;
    border-color: #c8e0ed
}
.notification_info .notification__close {
    color: #5c879f
}
.working-hover .notification_info .notification__close .notification:hover {
    color: #7c9fb3
}
.notification_success {
    background: #dff0d6;
    border-color: #d1e7c6
}
.notification_success .notification__close {
    color: #699552
}
.working-hover .notification_success .notification__close .notification:hover {
    color: #85b06f
}
.notification__close {
    position: absolute;
    right: 18px;
    top: 22px;
    width: 14px;
    height: 14px
}
.notification__close:active {
    position: absolute
}
.notification__close:before {
    vertical-align: middle;
    line-height: 1;
    font-size: 15px
}
code[class*=language-],
pre[class*=language-] {
    color: #000;
    text-shadow: 0 1px #fff;
    font-family: Consolas, Lucida Console, Menlo, Monaco, monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative
}
@media print {
    code[class*=language-],
    pre[class*=language-] {
        text-shadow: none
    }
}
pre[class*=language-] {
    padding: 1em;
    margin: 1.5em 0;
    overflow: auto;
    background: #f5f2f0
}
:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #708090
}
.token.punctuation {
    color: #999
}
.namespace {
    opacity: .7
}
.token.boolean,
.token.number,
.token.property,
.token.tag {
    color: #905
}
.token.attr-name,
.token.selector,
.token.string {
    color: #690
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
    color: #a67f59
}
.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a
}
.token.important,
.token.regex {
    color: #e90
}
.token.important {
    font-weight: 700
}
.token.entity {
    cursor: help
}
.inline-highlight {
    position: absolute;
    pointer-events: none;
    line-height: inherit;
    white-space: pre;
    left: 0;
    top: -2px;
    z-index: -1
}
.inline-highlight .mask {
    background: #f5e7c6;
    outline: 2px solid #f5e7c6
}
.block-highlight {
    top: -1px;
    margin-top: 1em;
    pointer-events: none;
    line-height: inherit;
    white-space: pre
}
.block-highlight,
.block-highlight .mask {
    display: block;
    position: absolute;
    left: 0;
    right: 0
}
.block-highlight .mask {
    background: #f5e7c6;
    outline: 1px solid #f5e7c6
}
pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber
}
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.line-numbers-rows>span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber
}
.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: .8em;
    text-align: right
}
code[class*=language-],
pre[class*=language-] {
    font: 14px/17px Consolas, Lucida Console, Menlo, Monaco, monospace;
    z-index: 0;
    text-shadow: none;
    margin: 0
}
pre[class*=language-] {
    position: relative
}
pre[class*=language-]>code.language-markup {
    color: inherit;
    position: relative
}
pre.line-numbers {
    padding-left: 3.2em
}
.line-numbers .line-numbers-rows {
    left: 0;
    top: 0;
    padding: 1em 0;
    border: 0;
    background: #e7e5e3;
    width: auto
}
.line-numbers .line-numbers-rows:after {
    width: auto;
    display: block;
    visibility: hidden;
    margin-top: -1.2em;
    content: '222'
}
.line-numbers-rows>span:before,
.line-numbers .line-numbers-rows:after {
    padding: 0 .7em 0 .8em;
    background: #e7e5e3;
    text-shadow: none
}
@media (min-width: 1420px) {
    code[class*=language-],
    pre[class*=language-] {
        font-size: 16px;
        line-height: 19px
    }
}
.domtree {
    border: 1px solid #f5f2f0;
    border-radius: 4px
}
.tutorial-progress {
    display: none
}
.tutorial-progress[value] {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: #e1e0de;
    border: none
}
.tutorial-progress[value]::-webkit-progress-bar {
    background: #e1e0de
}
.tutorial-progress[value]::-webkit-progress-value {
    background: #b8d0b1
}
.tutorial-progress[value]::-moz-progress-bar {
    background: #b8d0b1
}
.tutorial-progress[value]::-ms-fill {
    border: none;
    background: #b8d0b1
}
.article-tablet-foot__layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: baseline;
    align-items: baseline;
    white-space: nowrap
}
.article-tablet-foot .share-icons {
    -ms-flex-positive: 1;
    flex-grow: 1
}
.article-tablet-foot__map .map,
.article-tablet-foot__map .map__text {
    vertical-align: baseline
}
.share-icons__title {
    display: inline-block;
    margin-right: 10px;
    color: #c4c2c0
}
.share-icons .share {
    margin-right: 20px
}
.faq-cite {
    margin-bottom: 30px
}
.faq-cite__list dl {
    margin: 0
}
@media (max-width: 1250px) {
    .faq-cite__list {
        margin: auto!important
    }
}
@media (max-width: 840px) {
    .faq-cite__list {
        padding-left: 10px;
        padding-right: 10px
    }
}
.jetbrains-form__form {
    display: inline-block;
    min-width: 350px;
    padding: 25px 25px 35px;
    margin-top: 15px;
    text-align: left;
    border-radius: 3px;
    background: #eee
}
.jetbrains-form .input-select,
.jetbrains-form .text-input {
    width: 100%
}
.jetbrains-form__line {
    margin-top: 25px
}
.jetbrains-form__line:first-child {
    margin-top: 0
}
.jetbrains-form__line:last-child {
    margin-top: 30px
}
.jetbrains-form__label {
    display: block;
    color: #666
}
.jetbrains-form__note {
    font-size: 12px;
    color: #333;
    margin: 12px auto 0;
    line-height: 16px;
    width: 250px
}
.flex-column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}
.image-with-text {
    display: table;
    width: 100%
}
.image-with-text__img,
.image-with-text__text {
    display: table-cell;
    vertical-align: top
}
.image-with-text__img {
    padding: 0 20px 20px 0
}
@media (max-width: 1000px) {
    .image-with-text {
        display: block;
        width: auto
    }
    .image-with-text__img,
    .image-with-text__text {
        display: block
    }
}
.fixed-tab {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    z-index: 1
}
.rating {
    color: #999
}
.rating__star {
    font-size: 24px;
    line-height: 24px;
    font-style: normal
}
.rating_1 .rating__star:nth-child(1),
.rating_2 .rating__star:nth-child(1),
.rating_2 .rating__star:nth-child(2),
.rating_3 .rating__star:nth-child(1),
.rating_3 .rating__star:nth-child(2),
.rating_3 .rating__star:nth-child(3),
.rating_4 .rating__star:nth-child(1),
.rating_4 .rating__star:nth-child(2),
.rating_4 .rating__star:nth-child(3),
.rating_4 .rating__star:nth-child(4),
.rating_5 .rating__star {
    color: #f8ab47
}
.section {
    display: block;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 40px
}
.section__content {
    max-width: 85%;
    margin: 0 auto
}
.section .section__title {
    margin-top: 0
}
.section_color_gray {
    background: #eee
}
.section_color_yellow {
    background: #f6f4eb
}
.section_color_green {
    background: #e7f3ec
}
.section_color_red {
    background: rgba(184, 0, 0, .1)
}
ul.rating-stars {
    margin: 0;
    padding: 0
}
ul>li.rating-stars__star {
    display: inline-block;
    vertical-align: top;
    margin: 0 2px 0 0
}
ul>li.rating-stars__star:before {
    display: none
}
ul>li.rating-stars__star:after {
    font-size: 16px;
    color: #999
}
ul>li.rating-stars__star_active:after {
    color: #f8ab47
}
.auth-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-left: -200px;
    margin-top: -150px;
    background: #fff;
    border: 1px solid #000;
    z-index: 10000
}
.auth-modal .progress {
    margin: 100px auto 0
}
.photo-cut {
    padding: 25px 35px 35px;
    background: #fff
}
.photo-cut__canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none
}
.photo-cut__title {
    font: 700 28px/40px Open Sans Condensed, Arial, Helvetica, sans-serif
}
.photo-cut__layout {
    margin-top: 30px;
    white-space: nowrap;
    border: 2px solid #e0e0e0
}
.photo-cut__main {
    display: inline-block;
    width: 300px;
    height: 300px;
    text-align: center;
    white-space: normal;
    background: #f5f2f0
}
.photo-cut__canvas-wrapper {
    position: relative;
    left: -5px;
    top: -5px;
    display: inline-block;
    vertical-align: top
}
.photo-cut__rotate {
    position: absolute;
    right: 12px;
    top: 10px
}
.photo-cut__rotate:after {
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    color: #fff;
    opacity: .8;
    text-shadow: 0 0 4px rgba(0, 0, 0, .5)
}
.photo-cut__result {
    display: inline-block;
    width: 180px;
    text-align: center;
    white-space: normal;
    vertical-align: top
}
.photo-cut__selection-canvas {
    border-radius: 50%;
    width: 146px;
    height: 146px;
    margin-top: 50px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1)
}
.photo-cut__selection-canvas_small {
    width: 36px;
    height: 36px;
    margin-top: 35px
}
.photo-cut__submit {
    margin-top: 36px
}
.photo-cut__submit .button {
    margin-right: 25px
}
.photo-cut a.photo-cut__close-link {
    display: inline
}