@import url("css.css");

:root {
    --body-bg: #FCFCFC;
    --primary-color: #816bab;
    --primary-hover: #674e96;
    --primary-dark: #523c7f;
    --primary-reverse: #FFF;
    --secondary-color: #f7b748;
    --secondary-hover: #e39000;
    --secondary-reverse: #FFFFFF;
    --success-color: #22b544;
    --danger-color: #de3131;
    --warning-color: #f4bb0e;
    --info-color: #17c0db;
    --gray-color: #868e96;
    --dark-color: #343a40;
    --disable-color: #ebebeb;
    --success-light: #c1eecc;
    --danger-light: #fbbbbb;
    --warning-light: #ffdd75;
    --info-light: #a6eaf5;
    --gray-light: #d9dde1;
    --dark-light: #585C5F;
    --headlines-color: #1c1c1c;
    --typography-color: #555;
    --light-reverse: #000;
    --dark-reverse: #FFF;
    --primary-font: 'Roboto';
    --secondary-font: 'Roboto';
    --icons-font: "tornado-icons";
    --base-l-size: 16px;
    --base-m-size: 15px;
    --base-s-size: 14px;
    --line-height: 1.625;
    --normal-weight: 400;
    --medium-weight: 500;
    --strong-weight: 600;
    --component-background: #FFFFFF;
    --component-darker-bg: #f8f8f8;
    --component-color: var(--dark-color);
    --component-active-bg: var(--primary-color);
    --component-active-color: var(--primary-reverse);
    --component-border: 1px solid rgba(0, 0, 0, .10);
    --component-radius: 5px;
    --component-padding: 15px;
    --component-shadow: none
}

.form-ui [type="submit"]:not(.btn),
.form-ui [type="button"]:not(.btn),
.form-ui [type="radio"],
.form-ui [type="checkbox"],
.control-hint,
.tornado-select .selected-option.filter-select input,
.tornado-select .options-list,
.tornado-select .options-list li.filter-select input,
.advanced-uploader .files,
.dropdown .dropdown-list,
.pagination,
.navigation-menu ul,
.navigation-menu>ul li,
.navigation-menu>ul a,
.mobile-menu ul,
.nested-menu ul,
.tabs-menu,
.accordion,
.page-head .tabs-menu,
.main-footer ul,
.media-info,
.media-share,
.comments-list,
.chapters-list,
.download-list .content-box,
.media-player .server-list,
.widget-block ul,
.forums-list,
.topic-details .auther-side .auther-info,
.profile-menu .content-box .profile-info,
.profil-tabs {
    padding: 0;
    margin: 0;
    list-style: none
}

.tornado-select .selected-option,
.advanced-uploader span,
.advanced-uploader .files li,
.tx-nowrap,
[class*="tooltip"]::after,
.classic-blog .info[class*="tooltip"]::after,
.media-block .info h3,
.media-block .info h4,
.main-footer .small-media .info h3,
.main-footer .small-media .info h4,
.main-footer .small-media .info .more-btn,
.widget-block .info-list li,
.topics-list h3,
.topic-details .content-box .title,
.profile-menu .content-box .profile-info li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.modal-box,
blockquote,
.breadcrumb.curving>a,
.breadcrumb.curving>span,
.breadcrumb.skewed>a,
.breadcrumb.skewed>span {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.form-ui [type="submit"]:not(.btn),
.form-ui [type="button"]:not(.btn),
.form-ui [type="radio"],
.form-ui [type="checkbox"],
.tornado-select .selected-option.filter-select input,
.tornado-select .options-list li.filter-select::before,
.tornado-select .options-list li.filter-select input,
.switch-control .switch,
.advanced-uploader .files li::before,
.btn,
.rating-control,
.rating-control .rate-icon,
.rating-control .text,
.navigation-menu>ul>li,
.navigation-menu>ul>li a,
.menu-btn[data-id],
.tornado-header .action-btns .icon-btn:not(.menu-btn) {
    display: inline-block;
    vertical-align: middle
}

.tns-slider.tns-horizontal.tns-no-subpixel:after,
.tns-slider.tns-horizontal.tns-no-subpixel.clear-after::after,
.classic-blog .tns-slider.tns-horizontal.tns-no-subpixel.info::after,
.tns-slider.tns-horizontal.tns-no-subpixel.clear-fix,
.clear-after::after,
.classic-blog .info::after,
.topic-details .content-box .title::after,
.clear-fix {
    content: '';
    display: block;
    clear: both
}

.row,
.flexbox,
.flex-box,
.flexbox.container,
.flex-box.container,
.form-repeater .repeater-item,
.form-group,
.navigation-menu .megamenu,
.modal-box,
.modal-box .modal-content .modal-footer,
.tornado-header .container,
.tornado-header .container-fluid,
.tornado-header .container-xl,
.media-object,
.jumbtron .action-area,
.card-block .content-box .card-media .hvr-component,
.card-block .content-box .action-footer,
.card-block .content-box .card-head,
.card-block .content-box.horizontal,
.card-block .content-box .btns-group,
.card-block.widget .content-box,
#lightbox-modal .modal-content,
.subscribe-cta .cta-column,
.page-head .page-controls,
.page-head .tabs-menu,
.main-footer .small-media,
.copyrights .container,
.filters-section .sorting-by,
.filters-section .alphabet-sorting,
.filters-section .advanced-search .advanced-search-form .buttons,
.media-statistic,
.chapters-list li,
.media-player .server-list,
.classic-blog,
.reader-wraper .reader-navigation,
.manga-read-btns,
.blog-details .blog-info,
.forums-list .forum-block,
.table-pagination,
.topic-details .auther-side,
.topic-details .auther-side .auther-name,
.topic-details .auther-side .auther-info,
.topic-details.topic-replay,
.profile-menu .content-box .user-name,
.profil-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.pagination li,
.badge {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear
}

.radio-button span:before,
.switch-control span:before,
.checkbox .tornado-select .selected-option span::after,
.tornado-select .selected-option .checkbox span::after,
.radio-button .tornado-select .selected-option span::after,
.tornado-select .selected-option .radio-button span::after,
.switch-control .tornado-select .selected-option span::after,
.tornado-select .selected-option .switch-control span::after,
.checkbox span:before,
.checkbox .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .checkbox span.dropdown-btn:not(.icon-btn)::after,
.radio-button .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .radio-button span.dropdown-btn:not(.icon-btn)::after,
.switch-control .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .switch-control span.dropdown-btn:not(.icon-btn)::after,
.checkbox span.ti-lead-pencil::before,
.radio-button span.ti-lead-pencil::before,
.switch-control span.ti-lead-pencil::before,
.switch-control .switch,
.advanced-uploader,
.progress-bar:not(.radial):not(.circle) svg,
.progress-bar:not(.radial):not(.circle) svg rect,
.btn,
.dropdown .dropdown-list li a:not(.btn),
.navigation-menu,
.navigation-menu>ul li,
.navigation-menu>ul a,
.navigation-menu>ul>li .dropdown-toggle:before,
.navigation-menu>ul>li .tornado-select .selected-option span.dropdown-toggle::after,
.tornado-select .selected-option .navigation-menu>ul>li span.dropdown-toggle::after,
.checkbox .navigation-menu>ul>li span.dropdown-toggle:before,
.navigation-menu>ul>li .advanced-uploader .files li.dropdown-toggle::before,
.advanced-uploader .files .navigation-menu>ul>li li.dropdown-toggle::before,
.navigation-menu>ul>li .dropdown .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.dropdown .navigation-menu>ul>li .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.navigation-menu>ul>li .tns-outer .tns-controls button.dropdown-toggle[data-controls="prev"]::before,
.tns-outer .tns-controls .navigation-menu>ul>li button.dropdown-toggle[data-controls="prev"]::before,
.navigation-menu>ul>li .tns-outer .tns-controls button.dropdown-toggle[data-controls="next"]::before,
.tns-outer .tns-controls .navigation-menu>ul>li button.dropdown-toggle[data-controls="next"]::before,
.navigation-menu>ul>li .dropdown-toggle.ti-lead-pencil::before,
.mobile-menu .overlay-close,
.mobile-menu .menu-content,
.mobile-menu ul .dropdown-toggle:before,
.mobile-menu ul .tornado-select .selected-option span.dropdown-toggle::after,
.tornado-select .selected-option .mobile-menu ul span.dropdown-toggle::after,
.mobile-menu ul .checkbox span.dropdown-toggle:before,
.checkbox .mobile-menu ul span.dropdown-toggle:before,
.mobile-menu ul .advanced-uploader .files li.dropdown-toggle::before,
.advanced-uploader .files .mobile-menu ul li.dropdown-toggle::before,
.mobile-menu ul .dropdown .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.dropdown .mobile-menu ul .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.mobile-menu ul .tns-outer .tns-controls button.dropdown-toggle[data-controls="prev"]::before,
.tns-outer .tns-controls .mobile-menu ul button.dropdown-toggle[data-controls="prev"]::before,
.mobile-menu ul .tns-outer .tns-controls button.dropdown-toggle[data-controls="next"]::before,
.tns-outer .tns-controls .mobile-menu ul button.dropdown-toggle[data-controls="next"]::before,
.mobile-menu ul .dropdown-toggle.ti-lead-pencil::before,
.nested-menu ul li,
.nested-menu ul li a,
.tns-outer .tns-controls button,
.tns-outer .tns-nav button,
.tabs-menu li,
.lined-tabs .tabs-menu li::after,
.accordion .accordion-item .accordion-title::before,
.modal-box,
.tornado-header,
.tornado-header .action-btns .icon-btn,
.badge.tag::after,
.badge[class*="pointing"]::after,
.badge.outline[class*="pointing"]::before,
.card-block .content-box .card-media.overlayed::after,
.card-block .content-box .card-media.overlayed .content,
.card-block .content-box .card-media .hvr-component,
.card-block.user-card .content-box .social-btns a,
[class*="tooltip"]::after,
.classic-blog .info[class*="tooltip"]::after,
[class*="tooltip"]:not([class*="ti-"])::before,
.tornado-header::before,
.tornado-header .navigation-menu>ul>li>a::after,
.tornado-header .classic-blog .navigation-menu>ul>li>a.info::after,
.tornado-header .search-box.form-ui input,
.tornado-header .search-box .search-btn,
.filters-section .sorting-by li a,
.filters-section .alphabet-sorting li a,
.filters-section .advanced-search h2 i,
.media-btns .media-btn,
.tags a,
.download-list .content-box li,
.media-player .server-list a,
.media-player .server-list li {
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear
}

.badge.pointing-top::after,
.badge.pointing-top.outline::before,
.badge.pointing-bottom::after,
.badge.pointing-bottom.outline::before,
.tooltip::after,
.classic-blog .tooltip.info::after,
.tooltip:not([class*="ti-"])::before,
.tooltip-bottom::after,
.classic-blog .tooltip-bottom.info::after,
.tooltip-bottom:not([class*="ti-"])::before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.switch-control .switch:before,
.switch-control .tornado-select .selected-option span.switch::after,
.tornado-select .selected-option .switch-control span.switch::after,
.switch-control .advanced-uploader .files li.switch::before,
.advanced-uploader .files .switch-control li.switch::before,
.switch-control .dropdown .switch.dropdown-btn:not(.icon-btn)::after,
.dropdown .switch-control .switch.dropdown-btn:not(.icon-btn)::after,
.switch-control .tns-outer .tns-controls button.switch[data-controls="prev"]::before,
.tns-outer .tns-controls .switch-control button.switch[data-controls="prev"]::before,
.switch-control .tns-outer .tns-controls button.switch[data-controls="next"]::before,
.tns-outer .tns-controls .switch-control button.switch[data-controls="next"]::before,
.switch-control .switch.ti-lead-pencil::before,
.progress-bar.circle .progress-num,
.progress-bar.radial .progress-num,
.tns-outer .tns-controls button,
.breadcrumb.curving>a:not(:last-child)::after,
.classic-blog .breadcrumb.curving>a.info:not(:last-child)::after,
.breadcrumb.curving>span:not(:last-child)::after,
.classic-blog .breadcrumb.curving>span.info:not(:last-child)::after,
.badge.tag::after,
.badge.tag::before,
.badge.pointing-start::after,
.badge.pointing-start.outline::before,
.badge.pointing-end::after,
.badge.pointing-end.outline::before,
.card-block .content-box .card-media.overlayed .content,
.tooltip-start::after,
.classic-blog .tooltip-start.info::after,
.tooltip-start:not([class*="ti-"])::before,
.tooltip-end::after,
.classic-blog .tooltip-end.info::after,
.tooltip-end:not([class*="ti-"])::before {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.widget-sidebar .poster::before {
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.breadcrumb>a:nth-child(1),
.breadcrumb>span:nth-child(1) {
    z-index: 25
}

.breadcrumb>a:nth-child(2),
.breadcrumb>span:nth-child(2) {
    z-index: 24
}

.breadcrumb>a:nth-child(3),
.breadcrumb>span:nth-child(3) {
    z-index: 23
}

.breadcrumb>a:nth-child(4),
.breadcrumb>span:nth-child(4) {
    z-index: 22
}

.breadcrumb>a:nth-child(5),
.breadcrumb>span:nth-child(5) {
    z-index: 21
}

.breadcrumb>a:nth-child(6),
.breadcrumb>span:nth-child(6) {
    z-index: 20
}

.breadcrumb>a:nth-child(7),
.breadcrumb>span:nth-child(7) {
    z-index: 19
}

.breadcrumb>a:nth-child(8),
.breadcrumb>span:nth-child(8) {
    z-index: 18
}

.breadcrumb>a:nth-child(9),
.breadcrumb>span:nth-child(9) {
    z-index: 17
}

.breadcrumb>a:nth-child(10),
.breadcrumb>span:nth-child(10) {
    z-index: 16
}

.breadcrumb>a:nth-child(11),
.breadcrumb>span:nth-child(11) {
    z-index: 15
}

.breadcrumb>a:nth-child(12),
.breadcrumb>span:nth-child(12) {
    z-index: 14
}

.breadcrumb>a:nth-child(13),
.breadcrumb>span:nth-child(13) {
    z-index: 13
}

.breadcrumb>a:nth-child(14),
.breadcrumb>span:nth-child(14) {
    z-index: 12
}

.breadcrumb>a:nth-child(15),
.breadcrumb>span:nth-child(15) {
    z-index: 11
}

.breadcrumb>a:nth-child(16),
.breadcrumb>span:nth-child(16) {
    z-index: 10
}

.breadcrumb>a:nth-child(17),
.breadcrumb>span:nth-child(17) {
    z-index: 9
}

.breadcrumb>a:nth-child(18),
.breadcrumb>span:nth-child(18) {
    z-index: 8
}

.breadcrumb>a:nth-child(19),
.breadcrumb>span:nth-child(19) {
    z-index: 7
}

.breadcrumb>a:nth-child(20),
.breadcrumb>span:nth-child(20) {
    z-index: 6
}

.breadcrumb>a:nth-child(21),
.breadcrumb>span:nth-child(21) {
    z-index: 5
}

.breadcrumb>a:nth-child(22),
.breadcrumb>span:nth-child(22) {
    z-index: 4
}

.breadcrumb>a:nth-child(23),
.breadcrumb>span:nth-child(23) {
    z-index: 3
}

.breadcrumb>a:nth-child(24),
.breadcrumb>span:nth-child(24) {
    z-index: 2
}

@-ms-viewport {
    width: device-width
}

*,
*:before,
.tornado-select .selected-option span::after,
.checkbox span:before,
.advanced-uploader .files li::before,
.dropdown *.dropdown-btn:not(.icon-btn)::after,
.tns-outer .tns-controls button[data-controls="prev"]::before,
.tns-outer .tns-controls button[data-controls="next"]::before,
*.ti-lead-pencil::before,
*:after,
*.tns-slider.tns-horizontal.tns-no-subpixel:after,
*.clear-after::after,
.classic-blog *.info::after,
.topic-details .content-box *.title::after,
*.clear-fix {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

article,
aside,
footer,
header,
nav,
section,
figcaption,
figure,
main {
    display: block
}

figure {
    margin: 0
}

hr,
.hr {
    display: block;
    background: rgba(0, 0, 0, 0.15);
    height: 1px;
    overflow: visible
}

pre {
    font-family: var(--secondary-font);
    font-size: 1rem
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    text-decoration: none;
    color: var(--primary-color)
}

a,
a:hover,
a:focus,
a:active,
button,
button:hover,
button:focus,
button:active {
    outline: 0 dotted rgba(0, 0, 0, 0)
}

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

b,
strong {
    font-weight: var(--strong-weight)
}

code,
kbd,
samp {
    font-family: var(--secondary-font);
    font-size: 1rem
}

dfn {
    font-style: italic
}

mark {
    background-color: var(--warning-light);
    color: var(--light-reverse)
}

small {
    font-size: 0.8rem
}

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

sub {
    bottom: -0.25rem
}

sup {
    top: -0.5rem
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none;
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle
}

svg:not(:root) {
    overflow: hidden
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

@font-face {
  font-family: 'iconfont';  /* Project id 4698678 */
  src: url('//at.alicdn.com/t/c/font_4698678_07xx0659a3vs.woff2?t=1727526872708') format('woff2'),
       url('//at.alicdn.com/t/c/font_4698678_07xx0659a3vs.woff?t=1727526872708') format('woff'),
       url('//at.alicdn.com/t/c/font_4698678_07xx0659a3vs.ttf?t=1727526872708') format('truetype');
}

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

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

fieldset {
    padding: 0.35rem 0.75rem 0.625rem
}

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

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"],
[type="radio"] {
    padding: 0
}

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

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

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

details,
menu {
    display: block
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template,
[hidden] {
    display: none
}

.reset-block {
    padding: 0;
    margin: 0;
    list-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: var(--secondary-font);
    font-size: 0.875rem;
    line-height: 1;
    margin: 0
}

select,
keygen {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat
}

select option,
keygen option {
    padding: 0 0.9375rem
}

select optgroup,
keygen optgroup {
    font-style: normal;
    padding: 0.9375rem
}

select optgroup option,
keygen optgroup option {
    margin: 0 -0.9375rem;
    padding: 0 0.9375rem
}

input[type="radio"],
input[type="checkbox"],
input[type="range"],
input[type="color"] {
    display: inline-block;
    width: auto;
    margin: auto;
    padding: 0;
    border: 0 none
}

.tns-outer .tns-controls button[data-controls="prev"]::before {
    content: "\e601";
    font-family: "iconfont" !important
}

.tns-outer .tns-controls button[data-controls="next"]::before {
    content: "\e600";
    font-family: "iconfont" !important
}
@font-face {
    font-family: 'iconfont';  /* Project id 4698678 */
    src: url('./iconfont.woff2?t=1727574213614') format('woff2'),
         url('.iconfont.woff?t=1727574213614') format('woff'),
         url('./iconfont.ttf?t=1727574213614') format('truetype');
  }

.dropdown .dropdown-btn:not(.icon-btn)::after {
    content: "\f10d"
}

.checkbox span:before {
    content: "\f150"
}

.tornado-select .selected-option span::after,
.dropdown .tornado-select .selected-option span.dropdown-btn:not(.icon-btn)::after,
.tornado-select .selected-option .dropdown span.dropdown-btn:not(.icon-btn)::after {
    content: "\f15f"
}

.checkbox span.ti-lead-pencil::before,
.advanced-uploader .files li.ti-lead-pencil::before,
.tns-outer .tns-controls button.ti-lead-pencil[data-controls="prev"]::before,
.tns-outer .tns-controls button.ti-lead-pencil[data-controls="next"]::before,
.ti-lead-pencil::before {
    content: "\f4ef"
}

blockquote:before,
.dropdown blockquote.dropdown-btn:not(.icon-btn)::after,
blockquote.ti-lead-pencil::before {
    content: "\f4f5"
}

.advanced-uploader .files li::before {
    content: "\f55b"
}

@-webkit-keyframes dropOpen {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes dropOpen {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes dropClose {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }
}

@keyframes dropClose {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@-webkit-keyframes shakeVertical {

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

    25%,
    75% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@keyframes shakeVertical {

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

    25%,
    75% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@-webkit-keyframes shakeHorizontal {

    0%,
    50%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25%,
    75% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
}

@keyframes shakeHorizontal {

    0%,
    50%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25%,
    75% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

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

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

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

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

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

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

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

@-webkit-keyframes fadeInEnd {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInEnd {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeOutEnd {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0)
    }
}

@keyframes fadeOutEnd {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0)
    }
}

@-webkit-keyframes fadeInStart {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInStart {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeOutStart {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0)
    }
}

@keyframes fadeOutStart {
    0% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0)
    }
}

@-webkit-keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@-webkit-keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes flash {

    from,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {

    from,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes jello {

    from,
    11.1%,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg)
    }

    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg)
    }
}

@keyframes jello {

    from,
    11.1%,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg)
    }

    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg)
    }
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    50% {
        opacity: 1
    }
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.container,
.container-fluid,
.container-xl {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px
}

.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%
}

.container-xl {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1400px
}

.row {
    margin-left: -15px;
    margin-right: -15px
}

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

.row>[class*="col-"],
.row>[class*="box-"] {
    padding-left: 15px;
    padding-right: 15px
}

[class*="masonry-"] {
    margin: -15px;
    word-spacing: -5px;
    -webkit-column-gap: 0;
    column-gap: 0
}

[class*="masonry-"]>.column {
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    word-spacing: normal;
    width: 100%
}

.col-1 {
    width: 8.33333%
}

.box-1x1 {
    width: 100%
}

.masonry-1x1 {
    -webkit-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    column-width: 100%
}

.col-2 {
    width: 16.66667%
}

.box-2x1 {
    width: 100%
}

.masonry-2x1 {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-width: 50%;
    column-width: 50%
}

.col-3 {
    width: 25%
}

.box-3x1 {
    width: 100%
}

.masonry-3x1 {
    -webkit-column-count: 3;
    column-count: 3;
    -webkit-column-width: 33.33333%;
    column-width: 33.33333%
}

.col-4 {
    width: 33.33333%
}

.box-4x1 {
    width: 100%
}

.masonry-4x1 {
    -webkit-column-count: 4;
    column-count: 4;
    -webkit-column-width: 25%;
    column-width: 25%
}

.col-5 {
    width: 41.66667%
}

.box-5x1 {
    width: 100%
}

.masonry-5x1 {
    -webkit-column-count: 5;
    column-count: 5;
    -webkit-column-width: 20%;
    column-width: 20%
}

.col-6 {
    width: 50%
}

.box-6x1 {
    width: 100%
}

.masonry-6x1 {
    -webkit-column-count: 6;
    column-count: 6;
    -webkit-column-width: 16.66667%;
    column-width: 16.66667%
}

.col-7 {
    width: 58.33333%
}

.box-7x1 {
    width: 100%
}

.masonry-7x1 {
    -webkit-column-count: 7;
    column-count: 7;
    -webkit-column-width: 14.28571%;
    column-width: 14.28571%
}

.col-8 {
    width: 66.66667%
}

.box-8x1 {
    width: 100%
}

.masonry-8x1 {
    -webkit-column-count: 8;
    column-count: 8;
    -webkit-column-width: 12.5%;
    column-width: 12.5%
}

.col-9 {
    width: 75%
}

.box-9x1 {
    width: 100%
}

.masonry-9x1 {
    -webkit-column-count: 9;
    column-count: 9;
    -webkit-column-width: 11.11111%;
    column-width: 11.11111%
}

.col-10 {
    width: 83.33333%
}

.box-10x1 {
    width: 100%
}

.masonry-10x1 {
    -webkit-column-count: 10;
    column-count: 10;
    -webkit-column-width: 10%;
    column-width: 10%
}

.col-11 {
    width: 91.66667%
}

.box-11x1 {
    width: 100%
}

.masonry-11x1 {
    -webkit-column-count: 11;
    column-count: 11;
    -webkit-column-width: 9.09091%;
    column-width: 9.09091%
}

.col-12 {
    width: 100%
}

.box-12x1 {
    width: 100%
}

.masonry-12x1 {
    -webkit-column-count: 12;
    column-count: 12;
    -webkit-column-width: 8.33333%;
    column-width: 8.33333%
}

@media (min-width: 576px) {
    .col-s-1 {
        width: 8.33333%
    }

    .masonry-s-1x1 {
        -webkit-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        column-width: 100%
    }

    .col-s-2 {
        width: 16.66667%
    }

    .masonry-s-2x1 {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-width: 50%;
        column-width: 50%
    }

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

    .masonry-s-3x1 {
        -webkit-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33.33333%;
        column-width: 33.33333%
    }

    .col-s-4 {
        width: 33.33333%
    }

    .masonry-s-4x1 {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-width: 25%;
        column-width: 25%
    }

    .col-s-5 {
        width: 41.66667%
    }

    .masonry-s-5x1 {
        -webkit-column-count: 5;
        column-count: 5;
        -webkit-column-width: 20%;
        column-width: 20%
    }

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

    .masonry-s-6x1 {
        -webkit-column-count: 6;
        column-count: 6;
        -webkit-column-width: 16.66667%;
        column-width: 16.66667%
    }

    .col-s-7 {
        width: 58.33333%
    }

    .masonry-s-7x1 {
        -webkit-column-count: 7;
        column-count: 7;
        -webkit-column-width: 14.28571%;
        column-width: 14.28571%
    }

    .col-s-8 {
        width: 66.66667%
    }

    .masonry-s-8x1 {
        -webkit-column-count: 8;
        column-count: 8;
        -webkit-column-width: 12.5%;
        column-width: 12.5%
    }

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

    .masonry-s-9x1 {
        -webkit-column-count: 9;
        column-count: 9;
        -webkit-column-width: 11.11111%;
        column-width: 11.11111%
    }

    .col-s-10 {
        width: 83.33333%
    }

    .masonry-s-10x1 {
        -webkit-column-count: 10;
        column-count: 10;
        -webkit-column-width: 10%;
        column-width: 10%
    }

    .col-s-11 {
        width: 91.66667%
    }

    .masonry-s-11x1 {
        -webkit-column-count: 11;
        column-count: 11;
        -webkit-column-width: 9.09091%;
        column-width: 9.09091%
    }

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

    .masonry-s-12x1 {
        -webkit-column-count: 12;
        column-count: 12;
        -webkit-column-width: 8.33333%;
        column-width: 8.33333%
    }

    .box-5x1,
    .box-7x1,
    .box-8x1 {
        width: 50%
    }

    .box-9x1,
    .box-10x1,
    .box-11x1 {
        width: 33.333%
    }
}

@media (min-width: 768px) {
    .col-m-1 {
        width: 8.33333%
    }

    .masonry-m-1x1 {
        -webkit-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        column-width: 100%
    }

    .col-m-2 {
        width: 16.66667%
    }

    .masonry-m-2x1 {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-width: 50%;
        column-width: 50%
    }

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

    .masonry-m-3x1 {
        -webkit-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33.33333%;
        column-width: 33.33333%
    }

    .col-m-4 {
        width: 33.33333%
    }

    .masonry-m-4x1 {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-width: 25%;
        column-width: 25%
    }

    .col-m-5 {
        width: 41.66667%
    }

    .masonry-m-5x1 {
        -webkit-column-count: 5;
        column-count: 5;
        -webkit-column-width: 20%;
        column-width: 20%
    }

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

    .masonry-m-6x1 {
        -webkit-column-count: 6;
        column-count: 6;
        -webkit-column-width: 16.66667%;
        column-width: 16.66667%
    }

    .col-m-7 {
        width: 58.33333%
    }

    .masonry-m-7x1 {
        -webkit-column-count: 7;
        column-count: 7;
        -webkit-column-width: 14.28571%;
        column-width: 14.28571%
    }

    .col-m-8 {
        width: 66.66667%
    }

    .masonry-m-8x1 {
        -webkit-column-count: 8;
        column-count: 8;
        -webkit-column-width: 12.5%;
        column-width: 12.5%
    }

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

    .masonry-m-9x1 {
        -webkit-column-count: 9;
        column-count: 9;
        -webkit-column-width: 11.11111%;
        column-width: 11.11111%
    }

    .col-m-10 {
        width: 83.33333%
    }

    .masonry-m-10x1 {
        -webkit-column-count: 10;
        column-count: 10;
        -webkit-column-width: 10%;
        column-width: 10%
    }

    .col-m-11 {
        width: 91.66667%
    }

    .masonry-m-11x1 {
        -webkit-column-count: 11;
        column-count: 11;
        -webkit-column-width: 9.09091%;
        column-width: 9.09091%
    }

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

    .masonry-m-12x1 {
        -webkit-column-count: 12;
        column-count: 12;
        -webkit-column-width: 8.33333%;
        column-width: 8.33333%
    }

    .box-5x1 {
        width: 33.333%
    }

    .box-7x1,
    .box-8x1 {
        width: 25%
    }

    .box-9x1,
    .box-10x1,
    .box-11x1 {
        width: 20%
    }
}

@media (min-width: 1200px) {
    .col-l-1 {
        width: 8.33333%
    }

    .box-1x1 {
        width: 100%
    }

    .masonry-l-1x1 {
        -webkit-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        column-width: 100%
    }

    .col-l-2 {
        width: 16.66667%
    }

    .box-2x1 {
        width: 50%
    }

    .masonry-l-2x1 {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-width: 50%;
        column-width: 50%
    }

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

    .box-3x1 {
        width: 33.33333%
    }

    .masonry-l-3x1 {
        -webkit-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33.33333%;
        column-width: 33.33333%
    }

    .col-l-4 {
        width: 33.33333%
    }

    .box-4x1 {
        width: 25%
    }

    .masonry-l-4x1 {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-width: 25%;
        column-width: 25%
    }

    .col-l-5 {
        width: 41.66667%
    }

    .box-5x1 {
        width: 20%
    }

    .masonry-l-5x1 {
        -webkit-column-count: 5;
        column-count: 5;
        -webkit-column-width: 20%;
        column-width: 20%
    }

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

    .box-6x1 {
        width: 16.66667%
    }

    .masonry-l-6x1 {
        -webkit-column-count: 6;
        column-count: 6;
        -webkit-column-width: 16.66667%;
        column-width: 16.66667%
    }

    .col-l-7 {
        width: 58.33333%
    }

    .box-7x1 {
        width: 14.28571%
    }

    .masonry-l-7x1 {
        -webkit-column-count: 7;
        column-count: 7;
        -webkit-column-width: 14.28571%;
        column-width: 14.28571%
    }

    .col-l-8 {
        width: 66.66667%
    }

    .box-8x1 {
        width: 12.5%
    }

    .masonry-l-8x1 {
        -webkit-column-count: 8;
        column-count: 8;
        -webkit-column-width: 12.5%;
        column-width: 12.5%
    }

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

    .box-9x1 {
        width: 11.11111%
    }

    .masonry-l-9x1 {
        -webkit-column-count: 9;
        column-count: 9;
        -webkit-column-width: 11.11111%;
        column-width: 11.11111%
    }

    .col-l-10 {
        width: 83.33333%
    }

    .box-10x1 {
        width: 10%
    }

    .masonry-l-10x1 {
        -webkit-column-count: 10;
        column-count: 10;
        -webkit-column-width: 10%;
        column-width: 10%
    }

    .col-l-11 {
        width: 91.66667%
    }

    .box-11x1 {
        width: 9.09091%
    }

    .masonry-l-11x1 {
        -webkit-column-count: 11;
        column-count: 11;
        -webkit-column-width: 9.09091%;
        column-width: 9.09091%
    }

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

    .box-12x1 {
        width: 8.33333%
    }

    .masonry-l-12x1 {
        -webkit-column-count: 12;
        column-count: 12;
        -webkit-column-width: 8.33333%;
        column-width: 8.33333%
    }
}

@media (min-width: 1366px) {
    .col-xl-1 {
        width: 8.33333%
    }

    .masonry-xl-1x1 {
        -webkit-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        column-width: 100%
    }

    .col-xl-2 {
        width: 16.66667%
    }

    .masonry-xl-2x1 {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-width: 50%;
        column-width: 50%
    }

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

    .masonry-xl-3x1 {
        -webkit-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33.33333%;
        column-width: 33.33333%
    }

    .col-xl-4 {
        width: 33.33333%
    }

    .masonry-xl-4x1 {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-width: 25%;
        column-width: 25%
    }

    .col-xl-5 {
        width: 41.66667%
    }

    .masonry-xl-5x1 {
        -webkit-column-count: 5;
        column-count: 5;
        -webkit-column-width: 20%;
        column-width: 20%
    }

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

    .masonry-xl-6x1 {
        -webkit-column-count: 6;
        column-count: 6;
        -webkit-column-width: 16.66667%;
        column-width: 16.66667%
    }

    .col-xl-7 {
        width: 58.33333%
    }

    .masonry-xl-7x1 {
        -webkit-column-count: 7;
        column-count: 7;
        -webkit-column-width: 14.28571%;
        column-width: 14.28571%
    }

    .col-xl-8 {
        width: 66.66667%
    }

    .masonry-xl-8x1 {
        -webkit-column-count: 8;
        column-count: 8;
        -webkit-column-width: 12.5%;
        column-width: 12.5%
    }

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

    .masonry-xl-9x1 {
        -webkit-column-count: 9;
        column-count: 9;
        -webkit-column-width: 11.11111%;
        column-width: 11.11111%
    }

    .col-xl-10 {
        width: 83.33333%
    }

    .masonry-xl-10x1 {
        -webkit-column-count: 10;
        column-count: 10;
        -webkit-column-width: 10%;
        column-width: 10%
    }

    .col-xl-11 {
        width: 91.66667%
    }

    .masonry-xl-11x1 {
        -webkit-column-count: 11;
        column-count: 11;
        -webkit-column-width: 9.09091%;
        column-width: 9.09091%
    }

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

    .masonry-xl-12x1 {
        -webkit-column-count: 12;
        column-count: 12;
        -webkit-column-width: 8.33333%;
        column-width: 8.33333%
    }
}

.col-auto,
.form-repeater .repeater-item .controls-wrap,
.page-head .page-controls>* {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.align-center-z,
.modal-box,
.card-block .content-box .card-media .hvr-component,
#lightbox-modal .modal-content {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.align-center-x,
.page-head .tabs-menu,
.filters-section .sorting-by,
.filters-section .alphabet-sorting {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

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

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

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

.align-between,
.form-repeater .repeater-item,
.modal-box .modal-content .modal-footer,
.tornado-header .container,
.tornado-header .container-fluid,
.tornado-header .container-xl,
.jumbtron .action-area,
.card-block .content-box .action-footer,
.card-block .content-box .card-head,
.card-block .content-box.horizontal,
.card-block .content-box .btns-group,
.copyrights .container,
.reader-wraper .reader-navigation,
.blog-details .blog-info,
.table-pagination,
.topic-details .auther-side {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

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

.align-center-y,
.tornado-header .container,
.tornado-header .container-fluid,
.tornado-header .container-xl,
.jumbtron .action-area,
.card-block .content-box .card-head,
.card-block.widget .content-box,
.main-footer .small-media,
.media-statistic,
.chapters-list li,
.classic-blog,
.blog-details .blog-info,
.forums-list .forum-block,
.table-pagination,
.topic-details .auther-side,
.topic-details .auther-side .auther-name,
.profile-menu .content-box .user-name {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

.hidden {
    display: none
}

@media (min-width: 576px) {
    .hidden-s-up {
        display: none !important
    }

    .show-s-up {
        display: block !important
    }
}

@media (max-width: 640px) {
    .hidden-s-down {
        display: none !important
    }

    .show-s-down {
        display: block !important
    }
}

@media (min-width: 768px) {
    .hidden-m-up {
        display: none !important
    }

    .show-m-up {
        display: block !important
    }
}

@media (max-width: 1100px) {
    .hidden-m-down {
        display: none !important
    }

    .show-m-down {
        display: block !important
    }
}

@media (min-width: 1200px) {
    .hidden-l-up {
        display: none !important
    }

    .show-l-up {
        display: block !important
    }
}

@media (max-width: 1600px) {
    .hidden-l-down {
        display: none !important
    }

    .show-l-down {
        display: block !important
    }
}

@media (min-width: 1366px) {
    .hidden-xl-up {
        display: none !important
    }

    .show-xl-up {
        display: block !important
    }
}

@media (max-width: 2500px) {
    .hidden-xl-down {
        display: none !important
    }

    .show-xl-down {
        display: block !important
    }
}

.no-gutter {
    margin: 0 0
}

.no-gutter>[class*="col-"],
.no-gutter>[class*="box-"] {
    padding-left: 0;
    padding-right: 0
}

.gutter-small>[class*="col-"],
.gutter-small>[class*="box-"],
.wrap-gutter-s {
    padding-left: 5px;
    padding-right: 5px
}

.gutter-medium>[class*="col-"],
.gutter-medium>[class*="box-"],
.wrap-gutter-m {
    padding-left: 10px;
    padding-right: 10px
}

.gutter-large>[class*="col-"],
.gutter-large>[class*="box-"],
.wrap-gutter-l {
    padding-left: 20px;
    padding-right: 20px
}

.gutter-small {
    margin-left: -10px;
    margin-right: -10px
}

.gutter-medium {
    margin-left: -10px;
    margin-right: -10px
}

.gutter-large {
    margin-left: -20px;
    margin-right: -20px
}

:root {
    --forms-bg: #FFF;
    --forms-color: var(--typography-color);
    --forms-radius: 5px;
    --forms-border: 1px solid rgba(0, 0, 0, 0.1);
    --forms-darker-bg: #ebebeb;
    --forms-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
    --forms-btns-shadow: none;
    --forms-height: 2.5rem;
    --forms-height-small: 2.25rem;
    --forms-height-large: 3rem;
    --forms-height-txarea: 6.25rem;
    --forms-padding: 0.9375rem;
    --forms-padding-large: 1.25rem;
    --forms-gutter: 1.25rem;
    --forms-alert: #c2c8cd
}

.form-control,
.file-input,
.form-ui input:not(.btn),
.form-ui .form-control,
.form-ui .file-input,
.form-ui textarea {
    background-color: var(--forms-bg);
    color: var(--forms-color);
    margin-bottom: var(--forms-gutter);
    border: var(--forms-border);
    border-radius: var(--forms-radius);
    font-size: 15px;
    box-shadow: var(--forms-shadow);
    display: block
}

.form-control:not([class*="col-"]),
.file-input:not([class*="col-"]),
.form-ui input:not([class*="col-"]):not(.btn),
.form-ui textarea:not([class*="col-"]) {
    width: 100%
}

.form-control:focus,
.file-input:focus,
.form-ui input:focus:not(.btn),
.form-ui textarea:focus {
    outline-width: 0
}

.success.form-control,
.success.file-input,
.form-ui input.success:not(.btn),
.form-ui textarea.success {
    border-color: var(--success-color);
    color: var(--success-color)
}

.error.form-control,
.error.file-input,
.form-ui input.error:not(.btn),
.form-ui textarea.error {
    border-color: var(--danger-color);
    color: var(--danger-color)
}

.warning.form-control,
.warning.file-input,
.form-ui input.warning:not(.btn),
.form-ui textarea.warning {
    border-color: var(--warning-color);
    color: var(--warning-color)
}

.disable.form-control,
.disable.file-input,
.form-ui input.disable:not(.btn),
.form-ui textarea.disable,
.form-control[disabled],
.file-input[disabled],
.form-ui input[disabled]:not(.btn),
.form-ui textarea[disabled] {
    color: rgba(0, 0, 0, 0.3);
    background-color: var(--disable-color)
}

.form-control~.badge,
.file-input~.badge,
.form-ui input:not(.btn)~.badge,
.form-ui .form-control~.badge,
.form-ui .file-input~.badge,
.form-ui textarea~.badge {
    margin-top: -var(--forms-gutter)
}

.form-control,
.file-input,
.form-ui input:not(.btn),
.form-ui .form-control,
.form-ui .file-input {
    height: var(--forms-height);
    padding-right: var(--forms-padding);
    padding-left: var(--forms-padding)
}

.form-ui textarea {
    height: var(--forms-height-txarea);
    padding: calc(var(--forms-padding) / 1.5) var(--forms-padding);
    line-height: var(--line-height)
}

.checkbox,
.radio-button,
.switch-control {
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    font-weight: var(--medium-weight);
    line-height: 2.25rem;
    font-size: 15px;
    cursor: pointer
}

.checkbox input,
.radio-button input,
.switch-control input {
    display: none !important
}

.checkbox span,
.radio-button span,
.switch-control span {
    display: block
}

.radio-button span:before,
.switch-control span:before,
.checkbox .tornado-select .selected-option span::after,
.tornado-select .selected-option .checkbox span::after,
.radio-button .tornado-select .selected-option span::after,
.tornado-select .selected-option .radio-button span::after,
.switch-control .tornado-select .selected-option span::after,
.tornado-select .selected-option .switch-control span::after,
.checkbox span:before,
.checkbox .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .checkbox span.dropdown-btn:not(.icon-btn)::after,
.radio-button .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .radio-button span.dropdown-btn:not(.icon-btn)::after,
.switch-control .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .switch-control span.dropdown-btn:not(.icon-btn)::after,
.checkbox span.ti-lead-pencil::before,
.radio-button span.ti-lead-pencil::before,
.switch-control span.ti-lead-pencil::before {
    font-family: var(--icons-font);
    margin-right: 5px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    top: -1px
}

label {
    font-size: 0.9375rem;
    margin-bottom: 10px;
    display: block;
    color: var(--forms-color);
    font-weight: var(--medium-weight)
}

label+.range-slider+.tornado-range-slider:not(.vertical) {
    margin-top: -5px
}

.form-control.large,
.large.file-input {
    height: var(--forms-height-large)
}

.form-control.small,
.small.file-input {
    height: var(--forms-height-small)
}

.form-control::placeholder,
.file-input::placeholder,
.form-control::-webkit-input-placeholder,
.file-input::-webkit-input-placeholder,
.form-control:-ms-input-placeholder,
.file-input:-ms-input-placeholder,
.form-control::-ms-input-placeholder,
.file-input::-ms-input-placeholder,
.form-control::-webkit-input-placeholder,
.file-input::-webkit-input-placeholder {
    opacity: 1;
    color: inherit
}

.form-ui input:not(.btn)::placeholder,
.form-ui input:not(.btn)::-webkit-input-placeholder,
.form-ui input:not(.btn):-ms-input-placeholder,
.form-ui input:not(.btn)::-ms-input-placeholder,
.form-ui input:not(.btn)::-webkit-input-placeholder,
.form-ui .form-control::placeholder,
.form-ui .file-input::placeholder,
.form-ui .form-control::-webkit-input-placeholder,
.form-ui .file-input::-webkit-input-placeholder,
.form-ui .form-control:-ms-input-placeholder,
.form-ui .file-input:-ms-input-placeholder,
.form-ui .form-control::-ms-input-placeholder,
.form-ui .file-input::-ms-input-placeholder,
.form-ui .form-control::-webkit-input-placeholder,
.form-ui .file-input::-webkit-input-placeholder,
.form-ui .file-input::placeholder,
.form-ui .file-input::-webkit-input-placeholder,
.form-ui .file-input:-ms-input-placeholder,
.form-ui .file-input::-ms-input-placeholder,
.form-ui .file-input::-webkit-input-placeholder {
    opacity: 1;
    color: inherit
}

.form-ui.large input:not(.btn),
.form-ui.large .form-control,
.form-ui.large .file-input,
.form-ui.large .file-input {
    height: var(--forms-height-large);
    padding-right: var(--forms-padding-large);
    padding-left: var(--forms-padding-large)
}

.form-ui.large .file-input {
    line-height: var(--forms-height-large)
}

.form-ui.small input:not(.btn),
.form-ui.small .form-control,
.form-ui.small .file-input,
.form-ui.small .file-input {
    height: var(--forms-height-small)
}

.form-ui.small .file-input {
    line-height: var(--forms-height-small)
}

.form-ui textarea::placeholder,
.form-ui textarea::-webkit-input-placeholder,
.form-ui textarea:-ms-input-placeholder,
.form-ui textarea::-ms-input-placeholder,
.form-ui textarea::-webkit-input-placeholder {
    opacity: 1;
    color: inherit
}

.form-ui [type="submit"]:not(.btn),
.form-ui [type="button"]:not(.btn),
.form-ui [type="radio"],
.form-ui [type="checkbox"] {
    width: auto;
    height: auto
}

.control-hint {
    font-size: 0.8125rem;
    position: relative;
    bottom: calc(var(--forms-gutter) / 1.5);
    color: var(--gray-color)
}

.control-hint.success {
    color: var(--success-color)
}

.control-hint.error {
    color: var(--danger-color)
}

.control-hint.warning {
    color: var(--warning-color)
}

.control-hint.disable,
.control-hint[disabled] {
    color: #cfcfcf
}

.tornado-select {
    color: var(--typography-color);
    position: relative;
    margin-bottom: var(--forms-gutter);
    text-align: left
}

.tornado-select .arrow-icon {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px;
    text-align: center;
    line-height: var(--forms-height)
}

.tornado-select .arrow-icon svg {
    vertical-align: middle;
    display: inline-block
}

.tornado-select .arrow-icon .arrow-color {
    fill: var(--gray-color)
}

.tornado-select .selected-option {
    cursor: pointer;
    margin-bottom: 0;
    line-height: calc(var(--forms-height) - 3px);
    background-position: right 10px center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: left
}

.tornado-select .selected-option.large,
.tornado-select .selected-option.large+.arrow-icon {
    line-height: calc(var(--forms-height-large) - 3px)
}

.tornado-select .selected-option.small,
.tornado-select .selected-option.small+.arrow-icon {
    line-height: calc(var(--forms-height-small) - 3px)
}

.tornado-select .selected-option span {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    background: var(--primary-color);
    color: var(--primary-reverse);
    height: 24px;
    line-height: 24px;
    border-radius: var(--forms-radius);
    position: relative;
    top: -2px;
    font-size: 0.7em;
    margin-right: 5px
}

.tornado-select .selected-option span::after {
    font-family: var(--icons-font);
    padding-left: 5px;
    font-size: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    display: inline-block
}

.tornado-select .selected-option.filter-select::before {
    display: none
}

.tornado-select .selected-option.filter-select input {
    vertical-align: middle;
    width: auto;
    height: auto;
    border: 0 none;
    word-spacing: normal;
    box-shadow: unset;
    display: inline-block
}

.tornado-select .options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999999;
    background: var(--forms-bg);
    border: var(--forms-border);
    border-radius: var(--forms-radius);
    max-height: 280px;
    overflow-y: auto
}

.tornado-select .options-list.reverse-pos {
    top: auto;
    bottom: 100%
}

.tornado-select .options-list:hover,
.tornado-select .options-list.active {
    display: block
}

.tornado-select .options-list li {
    margin-bottom: 0;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer
}

.tornado-select .options-list li:not(:last-child) {
    border-bottom: var(--forms-border)
}

.tornado-select .options-list li.filter-select {
    padding: 5px 15px;
    word-spacing: -5px
}

.tornado-select .options-list li.filter-select::before {
    line-height: 28px;
    width: 20px;
    font-size: 14px;
    color: var(--gray-color);
    position: relative;
    top: -1px
}

.tornado-select .options-list li.filter-select input {
    width: calc(100% - 20px);
    height: 32px;
    border: 0 none;
    word-spacing: normal;
    box-shadow: unset
}

.file-input {
    position: relative;
    overflow: hidden;
    line-height: calc(var(--forms-height) - 3px)
}

.file-input::before {
    content: attr(data-text);
    line-height: inherit
}

.file-input::after,
.classic-blog .file-input.info::after {
    content: attr(data-btn);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 1.563rem;
    background-color: var(--primary-color);
    color: var(--primary-reverse);
    line-height: calc(var(--forms-height) - 3px)
}

.file-input input[type="file"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.checkbox {
    margin-bottom: calc(var(--forms-gutter) / 2)
}

.checkbox+.checkbox:not(.block-lvl) {
    margin-left: 10px
}

.checkbox .tornado-select .selected-option span::after,
.tornado-select .selected-option .checkbox span::after,
.checkbox span:before,
.checkbox .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .checkbox span.dropdown-btn:not(.icon-btn)::after,
.checkbox span.ti-lead-pencil::before {
    top: -2px;
    width: 20px;
    height: 20px;
    color: var(--disable-color);
    background-color: var(--forms-bg);
    line-height: 19px;
    font-size: 10px;
    border: var(--forms-border);
    border-radius: calc(var(--forms-radius) / 2)
}

.checkbox .tornado-select .selected-option input:checked+span::after,
.tornado-select .selected-option .checkbox input:checked+span::after,
.checkbox input:checked+span:before,
.checkbox .dropdown input:checked+span.dropdown-btn:not(.icon-btn)::after,
.dropdown .checkbox input:checked+span.dropdown-btn:not(.icon-btn)::after,
.checkbox input:checked+span.ti-lead-pencil::before {
    border-color: var(--success-color);
    color: var(--success-color)
}

.radio-button {
    margin-bottom: calc(var(--forms-gutter) / 2)
}

.radio-button+.radio-button:not(.block-lvl) {
    margin-left: 10px
}

.radio-button span:before,
.radio-button .tornado-select .selected-option span::after,
.tornado-select .selected-option .radio-button span::after,
.radio-button .dropdown span.dropdown-btn:not(.icon-btn)::after,
.dropdown .radio-button span.dropdown-btn:not(.icon-btn)::after,
.radio-button span.ti-lead-pencil::before {
    content: '';
    top: -2px;
    width: 18px;
    height: 18px;
    box-shadow: inset 0 0 0 4px var(--forms-bg);
    border-radius: 50%;
    background-color: #c3c3c3;
    border: var(--forms-border)
}

.radio-button input:checked+span:before,
.radio-button .tornado-select .selected-option input:checked+span::after,
.tornado-select .selected-option .radio-button input:checked+span::after,
.radio-button .checkbox input:checked+span:before,
.radio-button .dropdown input:checked+span.dropdown-btn:not(.icon-btn)::after,
.dropdown .radio-button input:checked+span.dropdown-btn:not(.icon-btn)::after,
.radio-button input:checked+span.ti-lead-pencil::before {
    border-color: var(--success-color);
    background-color: var(--success-color);
    color: var(--success-color)
}

.switch-control {
    margin-bottom: calc(var(--forms-gutter) / 2)
}

.switch-control+.switch-control:not(.block-lvl) {
    margin-left: 10px
}

.switch-control .switch {
    height: 6px;
    width: 40px;
    border-radius: 6px;
    margin: 0 5px;
    background: #c3c3c3;
    position: relative;
    top: -1px
}

.switch-control .switch:before,
.switch-control .tornado-select .selected-option span.switch::after,
.tornado-select .selected-option .switch-control span.switch::after,
.switch-control .advanced-uploader .files li.switch::before,
.advanced-uploader .files .switch-control li.switch::before,
.switch-control .dropdown .switch.dropdown-btn:not(.icon-btn)::after,
.dropdown .switch-control .switch.dropdown-btn:not(.icon-btn)::after,
.switch-control .tns-outer .tns-controls button.switch[data-controls="prev"]::before,
.tns-outer .tns-controls .switch-control button.switch[data-controls="prev"]::before,
.switch-control .tns-outer .tns-controls button.switch[data-controls="next"]::before,
.tns-outer .tns-controls .switch-control button.switch[data-controls="next"]::before,
.switch-control .switch.ti-lead-pencil::before {
    content: '';
    border: 0 none;
    position: absolute;
    left: 0;
    top: 50%;
    background: #acacac;
    border-radius: 50%;
    width: 15px;
    height: 15px
}

.switch-control input:checked+.switch {
    background: var(--success-color)
}

.switch-control input:checked+.switch:before,
.switch-control .tornado-select .selected-option input:checked+span.switch::after,
.tornado-select .selected-option .switch-control input:checked+span.switch::after,
.switch-control .checkbox input:checked+span.switch:before,
.switch-control .advanced-uploader .files input:checked+li.switch::before,
.advanced-uploader .files .switch-control input:checked+li.switch::before,
.switch-control .dropdown input:checked+.switch.dropdown-btn:not(.icon-btn)::after,
.dropdown .switch-control input:checked+.switch.dropdown-btn:not(.icon-btn)::after,
.switch-control .tns-outer .tns-controls input:checked+button.switch[data-controls="prev"]::before,
.tns-outer .tns-controls .switch-control input:checked+button.switch[data-controls="prev"]::before,
.switch-control .tns-outer .tns-controls input:checked+button.switch[data-controls="next"]::before,
.tns-outer .tns-controls .switch-control input:checked+button.switch[data-controls="next"]::before,
.switch-control input:checked+.switch.ti-lead-pencil::before {
    left: 100%;
    margin-left: -0.9375rem;
    background: var(--success-color)
}

.control-icon {
    position: relative
}

.control-icon::before {
    position: absolute;
    top: 1px;
    left: 10px;
    text-align: center;
    width: 20px;
    height: calc(var(--forms-height) - 2px);
    line-height: calc(var(--forms-height) - 0.2rem);
    color: var(--forms-color);
    font-size: 15px;
    z-index: 5
}

.control-icon input:not(.btn),
.control-icon .form-control,
.control-icon .file-input,
.control-icon .file-input {
    padding-left: calc(var(--forms-height) - 5px)
}

.control-icon.labeled::before {
    left: 1px;
    width: var(--forms-height);
    border-right: var(--forms-border);
    background-color: var(--forms-darker-bg);
    border-radius: var(--forms-radius) 0 0 var(--forms-radius)
}

.control-icon.labeled input:not(.btn),
.control-icon.labeled .form-control,
.control-icon.labeled .file-input,
.control-icon.labeled .file-input {
    padding-left: calc(var(--forms-height) + 0.5rem)
}

.control-icon.small::before {
    width: 20px;
    height: var(--forms-height-small);
    line-height: calc(var(--forms-height-small) - 0.2rem);
    font-size: 15px
}

.control-icon.small input:not(.btn),
.control-icon.small .form-control,
.control-icon.small .file-input,
.control-icon.small .file-input {
    padding-left: calc(var(--forms-height-small) / 1.2)
}

.control-icon.small.labeled::before {
    width: var(--forms-height-small)
}

.control-icon.small.labeled input:not(.btn),
.control-icon.small.labeled .form-control,
.control-icon.small.labeled .file-input,
.control-icon.small.labeled .file-input {
    padding-left: calc(var(--forms-height-small) + 0.5rem)
}

.control-icon.large::before {
    left: 15px;
    width: 25px;
    height: var(--forms-height-large);
    line-height: calc(var(--forms-height-large) - 0.2rem);
    font-size: 17px
}

.control-icon.large input:not(.btn),
.control-icon.large .form-control,
.control-icon.large .file-input,
.control-icon.large .file-input {
    padding-left: calc(var(--forms-height-large) / 1.2)
}

.control-icon.large.labeled::before {
    width: var(--forms-height-large);
    left: 0
}

.control-icon.large.labeled input:not(.btn),
.control-icon.large.labeled .form-control,
.control-icon.large.labeled .file-input,
.control-icon.large.labeled .file-input {
    padding-left: calc(var(--forms-height-large) + 0.5rem)
}

.control-icon.floating-end::before {
    left: auto;
    right: 10px
}

.control-icon.floating-end.labeled::before {
    right: 0;
    border-right: 0 none;
    border-left: 1px solid rgba(0, 0, 0, 0.15)
}

.control-icon.floating-end input:not(.btn),
.control-icon.floating-end .form-control,
.control-icon.floating-end .file-input,
.control-icon.floating-end .file-input {
    padding-left: var(--forms-padding)
}

.advanced-uploader {
    position: relative;
    margin-bottom: var(--forms-gutter);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 30px;
    background-color: var(--forms-darker-bg);
    text-align: center;
    font-size: 13px
}

.advanced-uploader input[type="file"] {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    cursor: pointer;
    margin: 0;
    width: auto;
    height: 88px;
    max-height: 100%;
    z-index: 5;
    opacity: 0
}

.advanced-uploader::after,
.classic-blog .advanced-uploader.info::after {
    position: absolute;
    z-index: 1;
    content: '';
    display: block;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
    max-height: 95px;
    border: var(--forms-border)
}

.advanced-uploader::before {
    display: block;
    margin: auto;
    font-size: 1.75rem;
    width: 40px;
    height: 40px;
    line-height: 40px
}

.advanced-uploader span {
    display: block;
    height: 25px
}

.advanced-uploader.highlight {
    background-color: #fff;
    color: var(--primary-color)
}

.advanced-uploader.highlight::after {
    border-color: var(--primary-color)
}

.advanced-uploader.image-mode::before,
.advanced-uploader.image-mode span,
.advanced-uploader.image-mode::after,
.advanced-uploader.video-mode::before,
.advanced-uploader.video-mode span,
.advanced-uploader.video-mode::after {
    display: none
}

.advanced-uploader.image-mode[data-size="hd"],
.advanced-uploader.video-mode[data-size="hd"] {
    padding-bottom: 56.25%
}

.advanced-uploader.image-mode[data-size="square"],
.advanced-uploader.video-mode[data-size="square"] {
    padding-bottom: 100%
}

.advanced-uploader.image-mode[data-size],
.advanced-uploader.video-mode[data-size] {
    height: 125px
}

.advanced-uploader.image-mode[data-size] input[type="file"],
.advanced-uploader.video-mode[data-size] input[type="file"] {
    height: 100%
}

.advanced-uploader.image-mode[data-size] .files,
.advanced-uploader.video-mode[data-size] .files {
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    margin: 0
}

.advanced-uploader.image-mode[data-size] .files li,
.advanced-uploader.video-mode[data-size] .files li {
    padding: 0 15px
}

.advanced-uploader.video-mode {
    overflow: hidden
}

.advanced-uploader.video-mode video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 100%;
    object-fit: cover
}

.advanced-uploader .files {
    margin: 0 -15px;
    margin-bottom: -25px;
    margin-top: 25px
}

.advanced-uploader .files li {
    text-align: left;
    line-height: 25px;
    color: var(--primary-color);
    background-color: #fff;
    padding: 0;
    margin-bottom: 10px
}

.advanced-uploader .files li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.advanced-uploader .files li::before {
    font-family: var(--icons-font);
    margin-right: 5px;
    position: relative;
    top: -1px
}

.form-repeater {
    position: relative
}

.form-repeater .repeater-item .controls-wrap {
    padding-right: 15px
}

.form-repeater .repeater-item .add-item,
.form-repeater .repeater-item .remove-item {
    width: var(--forms-height);
    height: var(--forms-height);
    line-height: var(--forms-height);
    text-align: center;
    border-radius: var(--forms-radius);
    color: #FFF
}

.form-repeater .repeater-item .add-item::before,
.form-repeater .repeater-item .remove-item::before {
    top: -2px
}

.form-repeater .repeater-item .add-item {
    background: var(--success-color)
}

.form-repeater .repeater-item .remove-item {
    background: var(--danger-color)
}

.form-repeater.large .repeater-item .add-item,
.form-repeater.large .repeater-item .remove-item {
    width: var(--forms-height-large);
    height: var(--forms-height-large);
    line-height: var(--forms-height-large)
}

.form-repeater.small .repeater-item .add-item,
.form-repeater.small .repeater-item .remove-item {
    width: var(--forms-height-small);
    height: var(--forms-height-small);
    line-height: var(--forms-height-small)
}

.alert {
    position: relative;
    padding: 0.9375rem 1.25rem;
    background: var(--forms-alert);
    color: var(--forms-color);
    font-size: 0.9375rem;
    margin-bottom: 15px;
    border-radius: var(--forms-radius)
}

.alert p {
    margin: 0;
    padding: 0
}

.alert .remove-item {
    position: absolute;
    right: 0;
    top: 0;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.9375rem;
    text-align: center;
    background: transparent;
    border: 0 none;
    cursor: pointer
}

.alert.dark {
    background: var(--dark-light);
    color: var(--dark-reverse)
}

.alert.dark .remove-item {
    color: var(--dark-reverse)
}

.alert.success {
    background: var(--success-light);
    color: var(--light-reverse)
}

.alert.danger {
    background: var(--danger-light);
    color: var(--light-reverse)
}

.alert.warning {
    background: var(--warning-light);
    color: var(--light-reverse)
}

.alert.info {
    background: var(--info-light);
    color: var(--light-reverse)
}

.progress-bar {
    display: block;
    position: relative
}

.progress-bar[data-title]::before {
    content: attr(data-title);
    display: block;
    position: absolute
}

.progress-bar .progress-num {
    position: absolute;
    display: block
}

.progress-bar:not(.radial):not(.circle) {
    height: 24px;
    background-color: var(--forms-darker-bg);
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 23px
}

.progress-bar:not(.radial):not(.circle) svg rect {
    fill: var(--gray-color)
}

.progress-bar:not(.radial):not(.circle)[data-title] {
    margin-top: 30px
}

.progress-bar:not(.radial):not(.circle)[data-title]::before {
    height: 25px;
    font-size: 13px;
    line-height: 25px;
    font-weight: var(--strong-weight);
    left: 0;
    width: 100%;
    bottom: 100%
}

.progress-bar:not(.radial):not(.circle) .progress-num {
    color: #FFF;
    height: 100%;
    top: 0;
    bottom: 0;
    padding: 0 15px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.progress-bar:not(.radial):not(.circle).primary svg rect {
    fill: var(--primary-color)
}

.progress-bar:not(.radial):not(.circle).secondary svg rect {
    fill: var(--secondary-color)
}

.progress-bar:not(.radial):not(.circle).success svg rect {
    fill: var(--success-color)
}

.progress-bar:not(.radial):not(.circle).danger svg rect {
    fill: var(--danger-color)
}

.progress-bar:not(.radial):not(.circle).warning svg rect {
    fill: var(--warning-color)
}

.progress-bar:not(.radial):not(.circle).info svg rect {
    fill: var(--info-color)
}

.progress-bar.circle svg,
.progress-bar.radial svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.progress-bar.circle .progress-num,
.progress-bar.radial .progress-num {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    font-weight: var(--strong-weight);
    text-align: center;
    font-size: 2rem
}

.progress-bar.circle {
    padding-bottom: 100%;
    margin-bottom: 30px
}

.progress-bar.circle svg {
    height: 100%;
    padding: 5px
}

.progress-bar.circle svg path {
    stroke: var(--gray-color);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100
    }
}

.progress-bar.circle[data-title]::before {
    top: 100%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: var(--strong-weight);
    font-size: 15px
}

.progress-bar.circle .progress-num {
    top: 50%;
    font-size: 2rem
}

.progress-bar.circle.primary .progress-num {
    color: var(--primary-color)
}

.progress-bar.circle.primary svg path {
    stroke: var(--primary-color)
}

.progress-bar.circle.secondary .progress-num {
    color: var(--secondary-color)
}

.progress-bar.circle.secondary svg path {
    stroke: var(--secondary-color)
}

.progress-bar.circle.success .progress-num {
    color: var(--success-color)
}

.progress-bar.circle.success svg path {
    stroke: var(--success-color)
}

.progress-bar.circle.danger .progress-num {
    color: var(--danger-color)
}

.progress-bar.circle.danger svg path {
    stroke: var(--danger-color)
}

.progress-bar.circle.warning .progress-num {
    color: var(--warning-color)
}

.progress-bar.circle.warning svg path {
    stroke: var(--warning-color)
}

.progress-bar.circle.info .progress-num {
    color: var(--info-color)
}

.progress-bar.circle.info svg path {
    stroke: var(--info-color)
}

.progress-bar.radial {
    padding-bottom: 90%
}

.progress-bar.radial svg path {
    will-change: auto;
    stroke-width: 15px;
    stroke-miterlimit: round;
    transition: stroke-dashoffset 850ms ease-in-out
}

.progress-bar.radial[data-title]::before {
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    font-weight: var(--strong-weight)
}

.progress-bar.radial .progress-num {
    color: var(--gray-color);
    top: 55%
}

.progress-bar.radial svg .progress-bg {
    stroke: var(--forms-darker-bg)
}

.progress-bar.radial svg .progress {
    stroke: var(--gray-color)
}

.progress-bar.radial.primary .progress-num {
    color: var(--primary-color)
}

.progress-bar.radial.primary svg .progress {
    stroke: var(--primary-color)
}

.progress-bar.radial.secondary .progress-num {
    color: var(--secondary-color)
}

.progress-bar.radial.secondary svg .progress {
    stroke: var(--secondary-color)
}

.progress-bar.radial.success .progress-num {
    color: var(--success-color)
}

.progress-bar.radial.success svg .progress {
    stroke: var(--success-color)
}

.progress-bar.radial.danger .progress-num {
    color: var(--danger-color)
}

.progress-bar.radial.danger svg .progress {
    stroke: var(--danger-color)
}

.progress-bar.radial.warning .progress-num {
    color: var(--warning-color)
}

.progress-bar.radial.warning svg .progress {
    stroke: var(--warning-color)
}

.progress-bar.radial.info .progress-num {
    color: var(--info-color)
}

.progress-bar.radial.info svg .progress {
    stroke: var(--info-color)
}

.btn {
    padding: 0 var(--forms-padding);
    height: var(--forms-height);
    line-height: var(--forms-height);
    color: var(--forms-color);
    background-color: var(--forms-bg);
    font-size: 14px;
    font-weight: var(--strong-weight);
    text-align: center;
    border-radius: var(--forms-radius);
    border: 0 none;
    box-shadow: var(--forms-btns-shadow) rgba(0, 0, 0, 0.05)
}

.btn.default {
    border: var(--forms-border);
    border-width: 2px
}

.btn.rounded {
    border-radius: 50px
}

.btn.outline {
    background: transparent;
    color: var(--typography-color);
    line-height: calc(var(--forms-height) - 3px);
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--forms-btns-shadow) rgba(0, 0, 0, 0.05)
}

.btn.small {
    height: var(--forms-height-small);
    line-height: var(--forms-height-small)
}

.btn.small.outline {
    line-height: calc(var(--forms-height-small) - 3px)
}

.btn.large {
    height: var(--forms-height-large);
    line-height: var(--forms-height-large);
    font-size: 1rem
}

.btn.large.outline {
    line-height: calc(var(--forms-height-large) - 2px)
}

.btn.circle {
    border-radius: 50%;
    width: var(--forms-height);
    padding: 0
}

.btn.circle.small {
    width: var(--forms-height-small)
}

.btn.circle.large {
    width: var(--forms-height-large)
}

.btn.square {
    width: var(--forms-height);
    padding: 0
}

.btn.square.small {
    width: var(--forms-height-small)
}

.btn.square.large {
    width: var(--forms-height-large)
}

.btn.btn-icon::before {
    margin-right: 5px;
    line-height: var(--forms-height);
    height: 100%
}

.btn.btn-icon.small::before {
    line-height: var(--forms-height-small)
}

.btn.btn-icon.large::before {
    line-height: var(--forms-height-large)
}

.btn.btn-icon.labeled {
    overflow: hidden;
    padding-left: 0
}

.btn.btn-icon.labeled::before {
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-right: var(--forms-padding);
    width: var(--forms-height)
}

.btn.btn-icon.labeled.outline:not(:hover)::before {
    background-color: transparent;
    border-right-width: 1px;
    border-right-style: solid
}

.btn.btn-icon.labeled.small::before {
    width: var(--forms-height-small);
    line-height: calc(var(--forms-height-small) - 3px)
}

.btn.btn-icon.labeled.large::before {
    margin-left: -var(--forms-padding-large);
    margin-right: var(--forms-padding-large);
    width: var(--forms-height-large);
    line-height: calc(var(--forms-height-large) - 3px)
}

.btn.btn-icon-after::before {
    top: 0;
    margin-left: 5px;
    height: 100%;
    line-height: var(--forms-height);
    float: right
}

.btn.btn-icon-after.small::before {
    line-height: var(--forms-height-small)
}

.btn.btn-icon-after.large::before {
    line-height: var(--forms-height-large)
}

.btn.btn-icon-after.labeled {
    overflow: hidden;
    padding-right: 0
}

.btn.btn-icon-after.labeled::before {
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-left: var(--forms-padding);
    width: var(--forms-height);
    line-height: calc(var(--forms-height) - 3px)
}

.btn.btn-icon-after.labeled.outline:not(:hover)::before {
    background-color: transparent;
    border-left-width: 1px;
    border-left-style: solid
}

.btn.btn-icon-after.labeled.small::before {
    width: var(--forms-height-small);
    line-height: calc(var(--forms-height-small) - 3px)
}

.btn.btn-icon-after.labeled.large::before {
    margin-left: var(--forms-padding-large);
    margin-right: -var(--forms-padding-large);
    width: var(--forms-height-large);
    line-height: calc(var(--forms-height-large) - 3px)
}

.btn.primary {
    background: var(--primary-color);
    color: var(--primary-reverse);
    box-shadow: var(--forms-btns-shadow) var(--primary-color)
}

.btn.primary:hover {
    background: var(--primary-hover)
}

.btn.primary.outline {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: none
}

.btn.primary.outline::before {
    border-color: var(--primary-color)
}

.btn.primary.outline:hover {
    background: var(--primary-color);
    color: var(--primary-reverse);
    box-shadow: var(--forms-btns-shadow) var(--primary-color)
}

.btn.secondary {
    background: var(--secondary-color);
    color: var(--secondary-reverse);
    box-shadow: var(--forms-btns-shadow) var(--secondary-color)
}

.btn.secondary:hover {
    background: var(--secondary-hover)
}

.btn.secondary.outline {
    background: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    box-shadow: none
}

.btn.secondary.outline::before {
    border-color: var(--secondary-color)
}

.btn.secondary.outline:hover {
    background: var(--secondary-color);
    color: var(--secondary-reverse);
    box-shadow: var(--forms-btns-shadow) var(--secondary-color)
}

.btn.success {
    background: var(--success-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--success-color)
}

.btn.success.outline {
    background: transparent;
    border-color: var(--success-color);
    color: var(--success-color);
    box-shadow: none
}

.btn.success.outline::before {
    border-color: var(--success-color)
}

.btn.success.outline:hover {
    background: var(--success-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--success-color)
}

.btn.danger {
    background: var(--danger-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--danger-color)
}

.btn.danger.outline {
    background: transparent;
    border-color: var(--danger-color);
    color: var(--danger-color);
    box-shadow: none
}

.btn.danger.outline::before {
    border-color: var(--danger-color)
}

.btn.danger.outline:hover {
    background: var(--danger-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--danger-color)
}

.btn.warning {
    background: var(--warning-color);
    color: var(--dark-color);
    box-shadow: var(--forms-btns-shadow) var(--warning-color)
}

.btn.warning.outline {
    background: transparent;
    border-color: var(--warning-color);
    color: var(--warning-color);
    box-shadow: none
}

.btn.warning.outline::before {
    border-color: var(--warning-color)
}

.btn.warning.outline:hover {
    background: var(--warning-color);
    color: var(--dark-color);
    box-shadow: var(--forms-btns-shadow) var(--warning-color)
}

.btn.info {
    background: var(--info-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--info-color)
}

.btn.info.outline {
    background: transparent;
    border-color: var(--info-color);
    color: var(--info-color);
    box-shadow: none
}

.btn.info.outline::before {
    border-color: var(--info-color)
}

.btn.info.outline:hover {
    background: var(--info-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--info-color)
}

.btn.gray {
    background: var(--gray-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--gray-color)
}

.btn.gray.outline {
    background: transparent;
    border-color: var(--gray-color);
    color: var(--gray-color);
    box-shadow: none
}

.btn.gray.outline::before {
    border-color: var(--gray-color)
}

.btn.gray.outline:hover {
    background: var(--gray-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--gray-color)
}

.btn.dark {
    background: var(--dark-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--dark-color)
}

.btn.dark.outline {
    background: transparent;
    border-color: var(--dark-color);
    color: var(--dark-color);
    box-shadow: none
}

.btn.dark.outline::before {
    border-color: var(--dark-color)
}

.btn.dark.outline:hover {
    background: var(--dark-color);
    color: var(--dark-reverse);
    box-shadow: var(--forms-btns-shadow) var(--dark-color)
}

.btn.light {
    background: var(--dark-reverse);
    color: var(--dark-color);
    box-shadow: var(--forms-btns-shadow) var(--dark-color)
}

.btn.light.outline {
    background: transparent;
    border-color: var(--dark-reverse);
    color: var(--dark-reverse);
    box-shadow: none
}

.btn.light.outline::before {
    border-color: var(--dark-reverse)
}

.btn.light.outline:hover {
    background: var(--dark-reverse);
    color: var(--dark-color);
    box-shadow: var(--forms-btns-shadow) var(--dark-color)
}

.dropdown {
    display: inline-block;
    position: relative
}

.dropdown .dropdown-btn:not(.icon-btn)::after {
    position: relative;
    font-family: var(--icons-font);
    margin-left: 5px;
    font-size: 0.9em;
    vertical-align: middle;
    top: -2px
}

.dropdown .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-animation: dropClose 0.5s both;
    animation: dropClose 0.5s both;
    visibility: hidden;
    background: var(--forms-bg);
    min-width: 190px;
    width: 100%;
    border: var(--forms-border);
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1)
}

.dropdown .dropdown-list::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 7px solid transparent;
    border-bottom-color: var(--forms-bg)
}

.dropdown .dropdown-list::before {
    content: '';
    position: absolute;
    bottom: 100%;
    margin-bottom: 1px;
    left: 12px;
    border: 7px solid transparent;
    border-bottom-color: var(--forms-darker-bg)
}

.dropdown .dropdown-list li {
    font-size: 0.875rem;
    font-weight: var(--medium-weight);
    padding: 8px 15px;
    border-bottom: var(--forms-border);
    margin-bottom: 0;
    color: var(--gray-color)
}

.dropdown .dropdown-list li:last-child {
    border-bottom: 0 none
}

.dropdown .dropdown-list li a:not(.btn) {
    display: block;
    color: inherit
}

.dropdown .dropdown-list li a:not(.btn):hover {
    color: var(--primary-color)
}

.dropdown.active,
.dropdown[data-event="hover"]:hover {
    z-index: 999
}

.dropdown.active .dropdown-list,
.dropdown[data-event="hover"]:hover .dropdown-list {
    -webkit-animation: dropOpen 0.5s both;
    animation: dropOpen 0.5s both;
    visibility: visible
}

.rating-control {
    position: relative;
    height: var(--forms-height);
    line-height: var(--forms-height)
}

.rating-control input:not(.btn),
.rating-control .form-control,
.rating-control .file-input,
.rating-control .file-input {
    display: none
}

.rating-control .rate-icon,
.rating-control .text {
    color: var(--gray-color);
    font-size: 17px;
    margin-right: 5px
}

.rating-control .rate-icon::before,
.rating-control .text::before {
    top: -3px
}

.rating-control .rate-icon.active,
.rating-control .text.active {
    color: var(--warning-color)
}

.rating-control.small {
    height: var(--forms-height-small);
    line-height: var(--forms-height-small);
    font-size: 15px
}

.rating-control.large {
    height: var(--forms-height-large);
    line-height: var(--forms-height-large);
    font-size: 20px
}

.form-group input:not(.btn),
.form-group .form-control,
.form-group .file-input,
.form-group .file-input,
.form-group .btn {
    border-radius: 0
}

.form-group>input:not(.btn):first-child,
.form-group .form-control:first-child,
.form-group .file-input:first-child,
.form-group .file-input:first-child,
.form-group>.btn:first-child {
    border-radius: 0 var(--forms-radius) var(--forms-radius) 0
}

.form-group>input:not(.btn):last-child,
.form-group .form-control:last-child,
.form-group .file-input:last-child,
.form-group .file-input:last-child,
.form-group>.btn:last-child {
    border-radius: 0 var(--forms-radius) var(--forms-radius) 0
}

.form-group .control-icon:first-child input:not(.btn),
.form-group .control-icon .form-control,
.form-group .control-icon .file-input,
.form-group .control-icon .file-input {
    border-radius: 0 var(--forms-radius) var(--forms-radius) 0
}

.form-group .control-icon:last-child input:not(.btn),
.form-group .control-icon .form-control,
.form-group .control-icon .file-input,
.form-group .control-icon .file-input {
    border-radius: 0 var(--forms-radius) var(--forms-radius) 0
}

.pagination {
    word-spacing: -5px
}

.pagination li {
    word-spacing: normal;
    display: inline-block;
    padding: 0 12px;
    height: var(--forms-height);
    line-height: var(--forms-height);
    font-size: 15px;
    color: var(--forms-color);
    background: var(--forms-bg);
    text-align: center;
    font-weight: var(--strong-weight);
    border: var(--forms-border)
}

.pagination li span,
.pagination li a {
    color: inherit;
    display: block;
    padding: 0 0.9375rem;
    margin: 0 -0.9375rem
}

.pagination li.current,
.pagination li.active,
.pagination li:hover {
    background: var(--primary-color);
    color: var(--dark-reverse)
}

.pagination.separate {
    word-spacing: 10px
}

.pagination.circles {
    word-spacing: 10px
}

.pagination.circles li {
    padding: 0;
    width: var(--forms-height);
    line-height: var(--forms-height);
    border-radius: 50%
}

.pagination.circles [class^="ti-"]::before,
.pagination.circles [class*=" ti-"]::before {
    top: -2px
}

.pagination:not(.circles):not(.separate) li:not(:last-child) {
    border-right: 0 none
}

.pagination.small li {
    height: var(--forms-height-small);
    line-height: calc(var(--forms-height-small) - 2px);
    padding: 0 12px;
    font-size: 14px
}

.pagination.small.circel li {
    width: var(--forms-height-small);
    line-height: var(--forms-height-small);
    padding: 0
}

.navigation-menu {
    position: relative;
    z-index: 99;
    background: var(--component-background);
    border: var(--component-border);
    padding: 0 var(--component-padding);
    margin-bottom: 30px;
    box-shadow: var(--component-shadow)
}

@media (max-width: 1100px) {
    .navigation-menu {
        display: none
    }
}

.navigation-menu.collapsed {
    display: none
}

.navigation-menu>ul {
    word-spacing: -5px
}

.navigation-menu>ul>li {
    word-spacing: normal;
    position: relative
}

.navigation-menu>ul>li a {
    color: inherit;
    font-weight: inherit;
    font-family: inherit
}

.navigation-menu>ul>li .dropdown-toggle:before,
.navigation-menu>ul>li .tornado-select .selected-option span.dropdown-toggle::after,
.tornado-select .selected-option .navigation-menu>ul>li span.dropdown-toggle::after,
.checkbox .navigation-menu>ul>li span.dropdown-toggle:before,
.navigation-menu>ul>li .advanced-uploader .files li.dropdown-toggle::before,
.advanced-uploader .files .navigation-menu>ul>li li.dropdown-toggle::before,
.navigation-menu>ul>li .dropdown .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.dropdown .navigation-menu>ul>li .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.navigation-menu>ul>li .tns-outer .tns-controls button.dropdown-toggle[data-controls="prev"]::before,
.tns-outer .tns-controls .navigation-menu>ul>li button.dropdown-toggle[data-controls="prev"]::before,
.navigation-menu>ul>li .tns-outer .tns-controls button.dropdown-toggle[data-controls="next"]::before,
.tns-outer .tns-controls .navigation-menu>ul>li button.dropdown-toggle[data-controls="next"]::before,
.navigation-menu>ul>li .dropdown-toggle.ti-lead-pencil::before {
    float: right;
    margin-left: 5px;
    position: relative;
    line-height: inherit;
    font-size: 0.8em;
    top: 0
}

.navigation-menu>ul>li>ul {
    top: 100%;
    left: 0
}

.navigation-menu>ul>li>ul li {
    position: relative;
    font-weight: normal;
    padding: 0 0.9375rem
}

.navigation-menu>ul>li>ul li a {
    display: block
}

.navigation-menu>ul>li>ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15)
}

.navigation-menu>ul>li>ul li ul {
    top: 0;
    left: 100%
}

.navigation-menu>ul>li:last-child>ul {
    left: auto;
    right: 0
}

.navigation-menu>ul>li:last-child>ul li ul {
    left: auto;
    right: 100%
}

.navigation-menu>ul li:hover>ul,
.navigation-menu>ul li:hover>.megamenu {
    -webkit-animation: dropOpen 0.5s both;
    animation: dropOpen 0.5s both;
    visibility: visible
}

.navigation-menu>ul li>ul,
.navigation-menu>ul li>.megamenu {
    width: 100%;
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.15);
    visibility: hidden;
    -webkit-animation: dropClose 0.5s both;
    animation: dropClose 0.5s both
}

.navigation-menu>ul li>ul:not(.megamenu),
.navigation-menu>ul li>.megamenu:not(.megamenu) {
    width: 220px
}

.navigation-menu .megamenu {
    padding: 25px 5px;
    padding-bottom: 20px;
    top: 100%;
    left: 15px
}

.navigation-menu .megamenu .col-12 {
    padding: 0 15px
}

.navigation-menu .megamenu h3,
.navigation-menu .megamenu h2,
.navigation-menu .megamenu h4 {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.navigation-menu .megamenu h3::before,
.navigation-menu .megamenu h2::before,
.navigation-menu .megamenu h4::before {
    font-size: 1.1em;
    margin-right: 5px
}

.navigation-menu .megamenu h3::after,
.navigation-menu .megamenu h2::after,
.navigation-menu .megamenu h4::after {
    display: block;
    content: '';
    height: 3px;
    width: 45px;
    background-color: var(--primary-color);
    margin-top: 10px;
    margin-bottom: -2px
}

.navigation-menu .megamenu ul {
    margin-bottom: 0
}

.navigation-menu .megamenu ul li {
    margin-bottom: 0;
    border-bottom: varr(--component-border);
    color: var(--gray-color);
    font-weight: normal;
    line-height: 32px;
    font-size: 14px
}

.navigation-menu .megamenu ul li:hover {
    color: var(--primary-color)
}

.navigation-menu>ul>li {
    font-size: 16px;
    font-weight: var(--strong-weight);
    color: var(--component-color);
    line-height: 44px;
    padding: 0 10px
}

.navigation-menu>ul>li:hover,
.navigation-menu>ul>li.active,
.navigation-menu>ul>li.current-menu-parent,
.navigation-menu>ul>li.current-menu-item {
    color: var(--component-active-bg);
    background: rgba(0, 0, 0, 0)
}

.navigation-menu li>ul,
.navigation-menu .megamenu {
    background: var(--component-background)
}

.navigation-menu li>ul>li,
.navigation-menu .megamenu>li {
    font-size: 14px;
    line-height: 36px;
    color: var(--component-color);
    padding: 0 10px
}

.navigation-menu li>ul>li:hover,
.navigation-menu li>ul>li.active,
.navigation-menu li>ul>li.current-menu-parent,
.navigation-menu li>ul>li.current-menu-item,
.navigation-menu .megamenu>li:hover,
.navigation-menu .megamenu>li.active,
.navigation-menu .megamenu>li.current-menu-parent,
.navigation-menu .megamenu>li.current-menu-item {
    background: var(--component-active-bg);
    color: var(--component-active-color)
}

.navigation-menu .megamenu li {
    font-size: 14px;
    line-height: 36px;
    color: var(--component-color)
}

.navigation-menu.primary {
    background-color: var(--primary-color);
    border: 0 none
}

.navigation-menu.primary>ul>li {
    color: var(--primary-reverse)
}

.navigation-menu.primary>ul>li:hover,
.navigation-menu.primary>ul>li.active,
.navigation-menu.primary>ul>li.current-menu-parent,
.navigation-menu.primary>ul>li.current-menu-item {
    color: var(--primary-reverse);
    background: var(--primary-hover)
}

.navigation-menu.primary li>ul,
.navigation-menu.primary .megamenu {
    background: var(--primary-color)
}

.navigation-menu.primary li>ul>li,
.navigation-menu.primary .megamenu>li {
    color: var(--primary-reverse)
}

.navigation-menu.primary li>ul>li:hover,
.navigation-menu.primary li>ul>li.active,
.navigation-menu.primary li>ul>li.current-menu-parent,
.navigation-menu.primary li>ul>li.current-menu-item,
.navigation-menu.primary .megamenu>li:hover,
.navigation-menu.primary .megamenu>li.active,
.navigation-menu.primary .megamenu>li.current-menu-parent,
.navigation-menu.primary .megamenu>li.current-menu-item {
    background: var(--primary-hover);
    color: var(--primary-reverse)
}

.navigation-menu.primary .megamenu li {
    color: var(--primary-reverse)
}

.navigation-menu.dark {
    background-color: var(--dark-color);
    border: 0 none
}

.navigation-menu.dark>ul>li {
    color: var(--dark-reverse)
}

.navigation-menu.dark>ul>li:hover,
.navigation-menu.dark>ul>li.active,
.navigation-menu.dark>ul>li.current-menu-parent,
.navigation-menu.dark>ul>li.current-menu-item {
    color: var(--dark-reverse);
    background: var(--primary-color)
}

.navigation-menu.dark li>ul,
.navigation-menu.dark .megamenu {
    background: var(--primary-color)
}

.navigation-menu.dark li>ul>li,
.navigation-menu.dark .megamenu>li {
    color: var(--dark-reverse)
}

.navigation-menu.dark li>ul>li:hover,
.navigation-menu.dark li>ul>li.active,
.navigation-menu.dark li>ul>li.current-menu-parent,
.navigation-menu.dark li>ul>li.current-menu-item,
.navigation-menu.dark .megamenu>li:hover,
.navigation-menu.dark .megamenu>li.active,
.navigation-menu.dark .megamenu>li.current-menu-parent,
.navigation-menu.dark .megamenu>li.current-menu-item {
    background: var(--dark-color);
    color: var(--dark-reverse)
}

.navigation-menu.dark .megamenu li {
    color: var(--dark-reverse)
}

@media (min-width: 1200px) {
    .menu-btn[data-id]:not(.collapsed) {
        display: none
    }
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    visibility: hidden
}

.mobile-menu .overlay-close {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0
}

.mobile-menu .menu-content {
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    z-index: 2;
    margin: 0
}

.mobile-menu.active {
    visibility: visible
}

.mobile-menu.active .overlay-close {
    opacity: 1
}

.mobile-menu.active ul li.active ul,
.mobile-menu.active ul li.active .megamenu {
    margin-top: 0;
    margin-bottom: 0
}

.mobile-menu.active ul li.active .megamenu {
    padding: 0 15px
}

.mobile-menu ul li {
    position: relative;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.mobile-menu ul li a {
    display: block;
    color: inherit;
    font-weight: inherit;
    font-family: inherit
}

.mobile-menu ul li.active {
    border-bottom-width: 0
}

.mobile-menu ul li:not(.active) ul,
.mobile-menu ul li:not(.active) .megamenu {
    display: none
}

.mobile-menu ul .dropdown-toggle:before,
.mobile-menu ul .tornado-select .selected-option span.dropdown-toggle::after,
.tornado-select .selected-option .mobile-menu ul span.dropdown-toggle::after,
.mobile-menu ul .checkbox span.dropdown-toggle:before,
.checkbox .mobile-menu ul span.dropdown-toggle:before,
.mobile-menu ul .advanced-uploader .files li.dropdown-toggle::before,
.advanced-uploader .files .mobile-menu ul li.dropdown-toggle::before,
.mobile-menu ul .dropdown .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.dropdown .mobile-menu ul .dropdown-toggle.dropdown-btn:not(.icon-btn)::after,
.mobile-menu ul .tns-outer .tns-controls button.dropdown-toggle[data-controls="prev"]::before,
.tns-outer .tns-controls .mobile-menu ul button.dropdown-toggle[data-controls="prev"]::before,
.mobile-menu ul .tns-outer .tns-controls button.dropdown-toggle[data-controls="next"]::before,
.tns-outer .tns-controls .mobile-menu ul button.dropdown-toggle[data-controls="next"]::before,
.mobile-menu ul .dropdown-toggle.ti-lead-pencil::before {
    float: right;
    margin-left: 5px;
    position: relative;
    line-height: inherit;
    font-size: 0.8em;
    top: 0
}

.mobile-menu *[calss*="col-"],
.mobile-menu *[calss*="box-"] {
    width: 100%
}

.mobile-menu .menu-content {
    width: 280px;
    background: var(--component-background);
    margin: auto;
    margin-right: -280px
}

.mobile-menu .logo {
    border-bottom: var(--component-border)
}

.mobile-menu.active .menu-content {
    margin-right: 0
}

.mobile-menu ul [class*="ti-"]:not(.dropdown-toggle)::before {
    margin-left: -1.25rem;
    font-size: 1.25rem
}

.mobile-menu ul li {
    padding: 0 1.25rem;
    border-bottom: var(--component-border);
    line-height: 2.875rem
}

.mobile-menu ul li.active {
    background: var(--component-active-bg);
    color: var(--component-active-color)
}

.mobile-menu ul li.active ul,
.mobile-menu ul li.active .megamenu {
    background: var(--component-darker-bg);
    color: var(--component-color);
    margin-top: .625rem;
    margin-bottom: -.625rem;
    border-top: var(--component-border)
}

.mobile-menu ul li.active ul li,
.mobile-menu ul li.active .megamenu li {
    line-height: 2.875rem;
    font-size: .9rem
}

.mobile-menu ul .dropdown-toggle {
    height: 2.875rem;
    line-height: 2.875rem
}

.mobile-menu ul ul,
.mobile-menu ul .megamenu {
    margin-left: -1.25rem;
    margin-right: -1.25rem
}

.mobile-menu.overlaps ul ul,
.mobile-menu.overlaps ul .megamenu {
    left: -100%
}

.mobile-menu.overlaps ul .dropdown-item.active>ul,
.mobile-menu.overlaps ul .dropdown-item.active .megamenu {
    left: 10%;
    background: var(--component-background)
}

.mobile-menu.overlaps ul .dropdown-item.active .dropdown-toggle {
    left: 0;
    background: var(--danger-color);
    color: var(--dark-reverse)
}

.nested-menu {
    background: var(--component-background);
    box-shadow: var(--component-shadow);
    border: var(--component-border)
}

.nested-menu .title {
    margin: 0;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: var(--medium-weight);
    background: rgba(0, 0, 0, 0.03);
    border-bottom: var(--component-border);
    line-height: 42px;
    text-transform: uppercase;
    color: var(--primary-color)
}

.nested-menu ul li {
    margin-bottom: 0
}

.nested-menu ul li:not(:last-child) {
    border-bottom: var(--component-border)
}

.nested-menu ul li a {
    display: block;
    color: inherit;
    font-weight: inherit;
    font-family: inherit
}

.nested-menu ul li:not(.active)>ul {
    display: none
}

.nested-menu ul li ul li:first-child {
    border-top: var(--component-border)
}

.nested-menu ul li ul li>a::before {
    content: '-';
    padding-right: 5px
}

.nested-menu ul li .submenu::before {
    float: right
}

.nested-menu>ul>li {
    font-size: .9375rem;
    line-height: 42px;
    color: var(--component-color);
    padding: 0 20px
}

.nested-menu>ul>li .submenu::before {
    line-height: 42px;
    font-size: 0.8em
}

.nested-menu>ul>li:hover {
    color: var(--component-active-bg);
    background: rgba(0, 0, 0, 0)
}

.nested-menu>ul>li ul {
    background-color: var(--component-darker-bg);
    margin: 0 -20px
}

.nested-menu>ul>li ul li {
    color: var(--component-color);
    padding: 0 20px;
    font-size: .875rem;
    line-height: 34px
}

.nested-menu>ul>li ul li:hover {
    color: var(--component-active-color);
    background: var(--component-active-bg)
}

.nested-menu.primary {
    background: var(--primary-color)
}

.nested-menu.primary .title {
    color: var(--dark-reverse)
}

.nested-menu.primary>ul>li {
    color: var(--dark-reverse)
}

.nested-menu.primary>ul>li .submenu::before {
    font-size: 0.8em
}

.nested-menu.primary>ul>li:hover {
    color: var(--dark-reverse)
}

.nested-menu.primary>ul>li ul li {
    color: var(--dark-reverse)
}

.nested-menu.primary>ul>li ul li:hover {
    color: var(--dark-reverse)
}

.nested-menu.dark {
    background: var(--dark-color)
}

.nested-menu.dark .title {
    color: var(--dark-reverse)
}

.nested-menu.dark>ul>li {
    color: var(--dark-reverse)
}

.nested-menu.dark>ul>li .submenu::before {
    font-size: 0.8em
}

.nested-menu.dark>ul>li:hover {
    color: var(--dark-reverse)
}

.nested-menu.dark>ul>li ul li {
    color: var(--dark-reverse)
}

.nested-menu.dark>ul>li ul li:hover {
    color: var(--dark-reverse)
}

.nested-menu.gray {
    background: var(--gray-color)
}

.nested-menu.gray .title {
    color: var(--light-reverse)
}

.nested-menu.gray>ul>li {
    color: rgba(0, 0, 0, 0.75)
}

.nested-menu.gray>ul>li .submenu::before {
    font-size: 0.8em
}

.nested-menu.gray>ul>li:hover {
    color: var(--light-reverse)
}

.nested-menu.gray>ul>li ul li {
    color: var(--light-reverse)
}

.nested-menu.gray>ul>li ul li:hover {
    color: var(--light-reverse)
}

.tns-outer {
    padding: 0;
    position: relative;
    direction: ltr
}

.tns-outer [hidden] {
    display: none
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
    cursor: pointer
}

.tns-outer .row {
    margin: 0
}

.tns-outer.grid-mode {
    margin-right: -15px;
    margin-left: -15px
}

.tns-outer .tns-visually-hidden {
    display: none
}

.tns-outer .tns-item {
    direction: ltr
}

.tns-slider {
    -webkit-transition: all 0s;
    transition: all 0s
}

.tns-slider>.tns-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.tns-slider.tns-horizontal.tns-subpixel {
    white-space: nowrap;
    overflow: hidden
}

.tns-slider.tns-horizontal.tns-subpixel>.tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal
}

.tns-slider.tns-horizontal.tns-no-subpixel>.tns-item {
    float: left
}

.tns-slider.tns-horizontal.tns-carousel .tns-no-subpixel>.tns-item {
    margin-right: -100%
}

.tns-slider.tns-no-calc {
    position: relative;
    left: 0
}

.tns-slider.tns-gallery {
    position: relative;
    left: 0;
    min-height: 1px
}

.tns-slider.tns-gallery>.tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s
}

.tns-slider.tns-gallery>.tns-slide-active {
    position: relative;
    left: auto !important
}

.tns-slider.tns-gallery>.tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s
}

.tns-autowidth {
    display: inline-block
}

.tns-ah {
    -webkit-transition: height 0s;
    -moz-transition: height 0s;
    transition: height 0s
}

.tns-vpfix {
    white-space: nowrap
}

.tns-vpfix>div,
.tns-vpfix>li {
    display: inline-block
}

.tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0
}

.tns-normal,
.tns-fadeOut {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1
}

.tns-t-subp2 {
    margin: 0 auto;
    width: 310px;
    position: relative;
    height: 10px;
    overflow: hidden
}

.tns-t-ct {
    width: 2333.33333%;
    width: -webkit-calc(100% * 70 / 3);
    width: -moz-calc(100% * 70 / 3);
    width: calc(100% * 70 / 3);
    position: absolute;
    right: 0
}

.tns-t-ct:after,
.tns-t-ct.tns-slider.tns-horizontal.tns-no-subpixel:after,
.tns-t-ct.clear-after::after,
.classic-blog .tns-t-ct.info::after,
.topic-details .content-box .tns-t-ct.title::after,
.tns-t-ct.clear-fix {
    content: '';
    display: table;
    clear: both
}

.tns-t-ct>div {
    width: 1.42857%;
    width: -webkit-calc(100% / 70);
    width: -moz-calc(100% / 70);
    width: calc(100% / 70);
    height: 10px;
    float: left
}

.tns-ovh {
    overflow: hidden
}

.tns-visually-hidden {
    position: absolute;
    left: -10000em
}

.tns-transparent {
    opacity: 0;
    visibility: hidden
}

.tns-outer .tns-controls button {
    width: var(--forms-height);
    height: var(--forms-height);
    line-height: calc(var(--forms-height) - 2px);
    font-size: 17px;
    background: var(--primary-color);
    color: var(--primary-reverse);
    opacity: 0;
    border-radius: 50%;
    text-align: center;
    border: 0 none;
    position: absolute;
    top: 50%;
    z-index: 98;
    cursor: pointer
}

.tns-outer .tns-controls button::before {
    font-family: var(--icons-font)
}

.tns-outer .tns-controls button:hover {
    background: var(--dark-reverse);
    color: var(--primary-color)
}

.tns-outer .tns-controls button[data-controls="prev"] {
    left: 15px
}

.tns-outer .tns-controls button[data-controls="next"] {
    right: 15px
}

.tns-outer:hover .tns-controls button {
    opacity: 1
}

.tns-outer .tns-nav {
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 98
}

.tns-outer .tns-nav button {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 0 none;
    padding: 0;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--gray-color)
}

.tns-outer .tns-nav button.tns-nav-active {
    background: var(--primary-color)
}

:root {
    --table-background: #FFFFFF;
    --table-head-bg: #f4f4f4;
    --table-striped: #f4f4f4;
    --table-border: 1px solid rgba(0, 0, 0, 0.1);
    --table-padding: 15px
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    margin-bottom: 30px
}

.table tr td,
.table tr th {
    padding-top: calc(var(--table-padding) / 2);
    padding-bottom: calc(var(--table-padding) / 2);
    border-bottom: var(--table-border);
    text-align: left
}

.table thead th {
    font-weight: var(--strong-weight);
    text-align: inherit
}

.table.bordered,
.table.striped {
    background-color: var(--table-background)
}

.table.bordered td,
.table.bordered th,
.table.striped td,
.table.striped th {
    padding: calc(var(--table-padding) / 2) var(--table-padding);
    border-bottom: 0 none
}

.table.striped tbody tr:not([class*="-bg"]):nth-child(odd) td,
.table.striped tbody tr:not([class*="-bg"]):nth-child(odd) th {
    background: var(--table-striped)
}

.table.bordered {
    border: var(--table-border)
}

.table.bordered td,
.table.bordered th {
    border: var(--table-border)
}

.table.bordered thead tr:not([class*="-bg"]) td,
.table.bordered thead tr:not([class*="-bg"]) th {
    background: var(--table-head-bg)
}

.table.bordered.striped thead tr:not([class*="-bg"]):nth-child(odd) td,
.table.bordered.striped thead tr:not([class*="-bg"]):nth-child(odd) th {
    background: var(--table-head-bg)
}

.responsive-table,
.responsive-sm-table {
    overflow: auto;
    margin-bottom: 30px
}

.responsive-table .table,
.responsive-sm-table .table {
    margin-bottom: 0
}

@media (max-width: 1100px) {
    .responsive-table .table {
        width: 970px
    }
}

@media (max-width: 640px) {
    .responsive-sm-table .table {
        width: 768px
    }
}

.data-table-wrap .sort-table {
    cursor: pointer
}

.data-table-wrap .sort-table .sort-icon {
    float: left;
    font-size: 13px;
    color: inherit;
    margin-left: -5px;
    margin-right: 3px;
    opacity: 0.5
}

.data-table-wrap .sort-table .sort-icon::before {
    top: 0
}

.data-table-wrap .sort-table.active .sort-icon {
    opacity: 1
}

.data-table-wrap .sort-table.desc-sort .sort-icon::before {
    transform: rotate(180deg);
    top: 1px
}

.data-table-nav {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: var(--table-border)
}

.data-table-nav .form-control:not(.selected-option),
.data-table-nav .file-input:not(.selected-option),
.data-table-nav .tornado-select,
.data-table-nav label {
    margin-bottom: 0;
    width: auto;
    display: inline-block;
    vertical-align: middle
}

.data-table-nav .table-filters label {
    margin-right: 5px;
    text-transform: uppercase
}

.data-table-nav .table-filters label.backspace {
    margin-left: -5px;
    margin-right: 10px
}

.data-table-nav .table-filters .form-control:not(.selected-option):not(.table-search),
.data-table-nav .table-filters .file-input:not(.selected-option):not(.table-search),
.data-table-nav .table-filters .tornado-select {
    margin-right: 10px
}

.data-table-nav .table-filters .form-control,
.data-table-nav .table-filters .file-input {
    padding: 0 12px
}

.data-table-nav .table-filters .perpage+.tornado-select {
    width: 90px
}

.data-table-nav .table-filters .perpage+.tornado-select .filter-select {
    display: none
}

.data-table-pagi {
    margin-top: -20px;
    margin-bottom: 30px
}

.data-table-pagi p {
    margin: 0;
    font-size: 14px;
    color: var(--gray-color)
}

.data-table-pagi .pagination li {
    cursor: pointer;
    margin-bottom: 0
}

.tab-content {
    padding: 15px 0;
    margin-bottom: 1.875rem;
    display: none
}

.tab-content.active {
    display: block
}

.tabs-menu li {
    margin-bottom: 0;
    word-spacing: normal;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    padding: 0 var(--component-padding);
    line-height: var(--forms-height-small);
    font-weight: var(--medium-weight);
    color: var(--component-color);
    border-radius: var(--component-radius)
}

.tabs-menu li a {
    color: inherit
}

.tabs-menu li:hover,
.tabs-menu li.active {
    background: var(--component-active-bg);
    color: var(--component-active-color)
}

.dialog-tabs .tabs-menu {
    border: var(--component-border);
    background: var(--component-darker-bg);
    border-radius: var(--component-radius) var(--component-radius) 0 0;
    overflow: hidden;
    word-spacing: -5px
}

.dialog-tabs .tabs-menu li {
    color: var(--component-color);
    border-right: var(--component-border);
    border-radius: 0;
    padding: 2.5px calc(var(--component-padding) + 2.5px)
}

.dialog-tabs .tabs-menu li:hover,
.dialog-tabs .tabs-menu li.active {
    background: var(--component-background);
    color: var(--component-active-bg)
}

.dialog-tabs .tab-content {
    padding: var(--component-padding);
    border: var(--component-border);
    background: var(--component-background);
    border-top: 0 none;
    border-radius: 0 0 var(--component-radius) var(--component-radius)
}

.tabular-tabs .tabs-menu li {
    color: var(--component-color);
    position: relative;
    top: 2px;
    padding: 2.5px calc(var(--component-padding) + 2.5px)
}

.tabular-tabs .tabs-menu li.active,
.tabular-tabs .tabs-menu li:hover {
    border: var(--component-border);
    background: var(--component-background);
    color: var(--component-active-bg);
    border-radius: var(--component-radius) var(--component-radius) 0 0;
    border-bottom: 0 none
}

.tabular-tabs .tab-content {
    padding: var(--component-padding);
    border: var(--component-border);
    background: var(--component-background);
    border-radius: 0 var(--component-radius) var(--component-radius) var(--component-radius)
}

.lined-tabs .tabs-menu {
    border-bottom: var(--component-border)
}

.lined-tabs .tabs-menu li {
    padding: 0 calc(var(--component-padding) / 2);
    color: var(--component-color);
    position: relative;
    border-radius: 0
}

.lined-tabs .tabs-menu li::after {
    position: absolute;
    content: '';
    bottom: -2px;
    left: 0;
    width: 0px;
    height: 3px;
    background: var(--component-active-bg);
    display: block
}

.lined-tabs .tabs-menu li.active,
.lined-tabs .tabs-menu li:hover {
    color: var(--component-active-bg);
    background: transparent
}

.lined-tabs .tabs-menu li.active::after,
.lined-tabs .tabs-menu li:hover::after {
    width: 100%
}

.accordion {
    margin-bottom: 1.875rem
}

.accordion .accordion-item {
    font-size: 0.875rem;
    margin-bottom: 0
}

.accordion .accordion-item .accordion-title {
    font-size: 1rem;
    line-height: 2.2;
    cursor: pointer
}

.accordion .accordion-item .accordion-title::before {
    font-size: 0.6875rem;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.accordion .accordion-item:not(.active) .accordion-content {
    display: none
}

.accordion .accordion-item.active .accordion-title::before {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.accordion.tornado-accordion {
    border: var(--component-border);
    border-bottom: 0 none
}

.accordion.tornado-accordion .accordion-item {
    background: var(--component-background)
}

.accordion.tornado-accordion .accordion-item .accordion-title {
    margin-bottom: 0;
    padding: 0 calc(var(--component-padding) + 5px);
    font-size: 0.9375rem;
    line-height: 2.875rem;
    border-bottom: var(--component-border)
}

.accordion.tornado-accordion .accordion-item .accordion-title::before {
    float: right;
    line-height: 2.875rem;
    font-size: 0.875rem;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.accordion.tornado-accordion .accordion-item .accordion-content {
    padding: 1.25rem
}

.accordion.tornado-accordion .accordion-item:not(:last-child) {
    border-bottom: var(--component-border)
}

.accordion.tornado-accordion .accordion-item.active .accordion-title {
    background: var(--component-darker-bg)
}

.accordion.tornado-accordion .accordion-item.active .accordion-title::before {
    line-height: 2.875rem
}

.modal-box {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
    opacity: 0
}

.modal-box.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}

.modal-box .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1
}

.modal-box .modal-content {
    position: relative;
    z-index: 100;
    background: var(--component-background);
    width: 670px;
    border-radius: 5px
}

@media (max-width: 640px) {
    .modal-box .modal-content {
        width: 90%
    }
}

.modal-box .modal-content .close-modal {
    cursor: pointer
}

.modal-box .modal-content .modal-head {
    padding: 0.75rem 1.25rem;
    border-bottom: var(--component-border);
    font-weight: var(--medium-weight);
    font-size: 1rem
}

.modal-box .modal-content .modal-head .close-modal {
    padding: 0;
    float: right;
    font-size: 14px;
    line-height: 1.74rem;
    height: 1.25rem;
    border: 0 none;
    color: var(--gray-color);
    background: transparent;
    text-align: center;
    width: 1.25rem
}

.modal-box .modal-content .modal-body {
    padding: 1.25rem;
    overflow: auto;
    max-height: calc(100vh - 11.875rem)
}

.modal-box .modal-content .modal-footer {
    padding: 0.625rem 1.25rem;
    border-top: var(--component-border)
}

.modal-box .modal-content .modal-footer .btn {
    margin: 0
}

.cta-modal .modal-content {
    padding: 1.875rem;
    text-align: center
}

.cta-modal .modal-content .close-modal:not(.btn) {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 14px;
    line-height: 1.875rem;
    height: 1.875rem;
    color: var(--danger-color);
    text-align: center;
    width: 1.875rem
}

.cta-modal .modal-content .large-icon {
    display: inline-block;
    font-size: 4.375rem;
    margin-bottom: 0.625rem;
    line-height: 1
}

.cta-modal .modal-content h3 {
    font-size: 1.375rem;
    margin-bottom: 5px;
    color: var(--component-color)
}

.cta-modal .modal-content .rating-control {
    margin-bottom: 0.625rem
}

.cta-modal .modal-content .rating-control .rate-icon {
    font-size: 1.8rem;
    vertical-align: middle
}

.cta-modal .modal-content .rating-control .text {
    font-size: 1.25rem;
    vertical-align: middle
}

.cta-modal .modal-content .social-btns {
    margin-bottom: 5px
}

.cta-modal .modal-content .social-btns .btn {
    margin: 5px
}

.cta-modal .modal-content .modal-footer {
    border: 0 none;
    padding: 0
}

.cta-modal.dark .modal-content {
    background: var(--dark-color);
    color: var(--dark-reaverse)
}

.cta-modal.dark .modal-content .close-modal:not(.btn),
.cta-modal.dark .modal-content h3,
.cta-modal.dark .modal-content p {
    color: var(--dark-reaverse)
}

.cta-modal.success .modal-content {
    background: var(--success-color);
    color: var(--dark-reverse)
}

.cta-modal.success .modal-content .close-modal:not(.btn),
.cta-modal.success .modal-content h3,
.cta-modal.success .modal-content p {
    color: var(--dark-reverse)
}

.cta-modal.danger .modal-content {
    background: var(--danger-color);
    color: var(--dark-reverse)
}

.cta-modal.danger .modal-content .close-modal:not(.btn),
.cta-modal.danger .modal-content h3,
.cta-modal.danger .modal-content p {
    color: var(--dark-reverse)
}

.cta-modal.warning .modal-content {
    background: var(--warning-color);
    color: var(--light-reverse)
}

.cta-modal.warning .modal-content .close-modal:not(.btn),
.cta-modal.warning .modal-content h3,
.cta-modal.warning .modal-content p {
    color: var(--light-reverse)
}

.cta-modal.info .modal-content {
    background: var(--info-color);
    color: var(--dark-reverse)
}

.cta-modal.info .modal-content .close-modal:not(.btn),
.cta-modal.info .modal-content h3,
.cta-modal.info .modal-content p {
    color: var(--dark-reverse)
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: var(--base-s-size);
    line-height: var(--line-height)
}

@media (min-width: 768px) {
    html {
        font-size: var(--base-m-size)
    }
}

@media (min-width: 1200px) {
    html {
        font-size: var(--base-l-size)
    }
}

body {
    font-family: var(--secondary-font);
    color: var(--typography-color)
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--primary-font);
    font-weight: var(--strong-weight);
    color: var(--headlines-color);
    margin: 0 auto
}

p {
    padding: 0;
    margin: 0;
    margin-bottom: 15px
}

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

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

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

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

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

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

.display-h0 {
    font-size: 5rem
}

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

.display-h2 {
    font-size: 3rem
}

.display-h3 {
    font-size: 2rem
}

.large-text {
    font-size: 1.125rem
}

.medium-text {
    font-size: 1rem
}

.small-text {
    font-size: 0.875rem
}

.tx-uppercase,
.navigation-menu .megamenu h3,
.navigation-menu .megamenu h2,
.navigation-menu .megamenu h4,
.featured-media .vertical-title,
.subscribe-cta h2,
.subscribe-cta p,
.subscribe-cta .cta-column .step,
.subscribe-cta .cta-column h3,
.counter-cta h3,
.counter-cta h2,
.counter-cta h4,
.counter-cta .btn,
.area-head h2,
.area-title,
.media-story h3,
.page-head h1,
.page-head .tabs-menu li,
.media-block .info h3,
.media-block .info h4,
.media-block .rating span,
.main-footer .col-12>h3,
.main-footer .small-media .info h3,
.main-footer .small-media .info h4,
.main-footer .small-media .info .more-btn,
.main-footer .navigation-menu>ul>li,
.copyrights p,
.filters-section .sorting-by,
.filters-section .alphabet-sorting,
.filters-section .advanced-search h2,
.media-title h1,
.media-statistic h4,
.media-btns .media-btn,
.chapters-list li h3,
.download-list .content-box li.title,
.classic-blog .btn,
.widget-block.weakly-blog .btn,
.profile-menu .content-box .user-name .username .btn,
.profile-menu .content-box .profile-info li .btn,
.profil-tabs li {
    text-transform: uppercase
}

.tx-capitalize {
    text-transform: capitalize
}

.tx-line-through {
    text-decoration: line-through
}

.tx-align-start {
    text-align: start
}

.tx-align-end {
    text-align: end
}

.tx-align-right {
    text-align: right
}

.tx-align-left {
    text-align: left
}

.tx-align-center {
    text-align: center
}

.tx-align-justify {
    text-align: justify
}

.strong-weight {
    font-weight: var(--strong-weight)
}

.medium-weight {
    font-weight: var(--medium-weight)
}

.normal-weight {
    font-weight: var(--normal-weight)
}

.lineheight-1 {
    line-height: 1
}

.lineheight-130 {
    line-height: 1.3
}

.lineheight-150 {
    line-height: 1.5
}

.lineheight-160 {
    line-height: 1.6
}

ul,
ol,
dl {
    display: block;
    padding: 0;
    margin: auto;
    padding-left: 15px;
    margin-bottom: 30px
}

ul ul,
ul ol,
ol ul,
ol ol,
dl ul,
dl ol {
    padding: 0;
    margin: 0;
    padding-left: 15px
}

ul li,
ol li,
dl li {
    font-size: 0.9375rem;
    margin-bottom: 5px
}

dl dt {
    font-weight: var(--strong-weight)
}

dl dt:not(:first-child) {
    margin-top: 5px
}

dl dd {
    padding: 0;
    margin: 0;
    padding-left: 0.625rem
}

dl dd:before,
dl .dropdown dd.dropdown-btn:not(.icon-btn)::after,
.dropdown dl dd.dropdown-btn:not(.icon-btn)::after,
dl dd.ti-lead-pencil::before {
    content: '_';
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -7px
}

blockquote {
    margin: 0;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 30px;
    font-size: 1rem;
    font-style: italic;
    color: var(--typography-color)
}

blockquote:before,
.dropdown blockquote.dropdown-btn:not(.icon-btn)::after,
blockquote.ti-lead-pencil::before {
    font-family: var(--icons-font);
    position: absolute;
    font-size: 2.125rem;
    color: var(--component-color);
    opacity: 0.3;
    left: 0;
    top: 0;
    font-style: normal;
    line-height: 1;
    z-index: -1
}

blockquote .quote-name {
    font-size: 0.875rem;
    font-weight: var(--strong-weight);
    display: block;
    margin-top: 0.625rem;
    font-style: normal
}

blockquote .quote-name:before,
blockquote .tornado-select .selected-option span.quote-name::after,
.tornado-select .selected-option blockquote span.quote-name::after,
blockquote .advanced-uploader .files li.quote-name::before,
.advanced-uploader .files blockquote li.quote-name::before,
blockquote .dropdown .quote-name.dropdown-btn:not(.icon-btn)::after,
.dropdown blockquote .quote-name.dropdown-btn:not(.icon-btn)::after,
blockquote .tns-outer .tns-controls button.quote-name[data-controls="prev"]::before,
.tns-outer .tns-controls blockquote button.quote-name[data-controls="prev"]::before,
blockquote .tns-outer .tns-controls button.quote-name[data-controls="next"]::before,
.tns-outer .tns-controls blockquote button.quote-name[data-controls="next"]::before,
blockquote .quote-name.ti-lead-pencil::before {
    content: '-';
    display: inline-block;
    margin-right: 5px;
    z-index: -1
}

blockquote.theme-2 {
    padding: 2rem;
    background: var(--component-background);
    border: var(--component-border);
    -webkit-box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.04)
}

blockquote.theme-2:before,
.dropdown blockquote.theme-2.dropdown-btn:not(.icon-btn)::after,
blockquote.theme-2.ti-lead-pencil::before {
    top: auto;
    bottom: 1.563rem;
    font-size: 2.875rem;
    left: auto;
    right: 1.563rem;
    text-shadow: -2px -2px 0 rgba(0, 0, 0, 0.1), 2px -2px 0 rgba(0, 0, 0, 0.1), -2px 2px 0 rgba(0, 0, 0, 0.1), 2px 2px 0 rgba(0, 0, 0, 0.1)
}

blockquote.theme-3 {
    padding: 0 1.25rem;
    border-left: 5px solid var(--component-darker-bg)
}

blockquote.theme-3::before {
    display: none
}

blockquote.theme-4 {
    padding: 1.5rem 2rem;
    padding-right: 3rem;
    background: var(--component-background);
    border: var(--component-border);
    -webkit-box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.04)
}

blockquote.theme-4:before,
.dropdown blockquote.theme-4.dropdown-btn:not(.icon-btn)::after,
blockquote.theme-4.ti-lead-pencil::before {
    top: 1rem;
    left: auto;
    right: 1rem;
    font-size: 2rem
}

.tornado-header {
    box-shadow: var(--component-shadow);
    z-index: 100;
    position: relative;
    background: var(--component-background);
    color: var(--component-color)
}

.tornado-header .container,
.tornado-header .container-fluid,
.tornado-header .container-xl {
    min-height: 64px
}

.tornado-header .navigation-menu {
    background-color: transparent;
    border: 0 none;
    margin: 0
}

.tornado-header .navigation-menu>ul>li {
    font-size: .9375rem;
    color: var(--component-color);
    line-height: 64px
}

.tornado-header .navigation-menu>ul>li:hover,
.tornado-header .navigation-menu>ul>li.active,
.tornado-header .navigation-menu>ul>li.current-menu-parent,
.tornado-header .navigation-menu>ul>li.current-menu-item {
    color: var(--component-active-bg);
    background: rgba(0, 0, 0, 0)
}

.tornado-header .navigation-menu li>ul,
.tornado-header .navigation-menu .megamenu {
    background: var(--component-background)
}

.tornado-header .navigation-menu li>ul>li,
.tornado-header .navigation-menu .megamenu>li {
    color: var(--component-color)
}

.tornado-header .navigation-menu li>ul>li:hover,
.tornado-header .navigation-menu li>ul>li.active,
.tornado-header .navigation-menu li>ul>li.current-menu-parent,
.tornado-header .navigation-menu li>ul>li.current-menu-item,
.tornado-header .navigation-menu .megamenu>li:hover,
.tornado-header .navigation-menu .megamenu>li.active,
.tornado-header .navigation-menu .megamenu>li.current-menu-parent,
.tornado-header .navigation-menu .megamenu>li.current-menu-item {
    background: var(--component-active-bg);
    color: var(--component-active-color)
}

.tornado-header .navigation-menu .megamenu li {
    color: var(--component-color)
}

.tornado-header .action-btns .icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: 1.25rem;
    background: rgba(0, 0, 0, 0);
    color: var(--component-color)
}

.tornado-header .container::after,
.tornado-header .container-fluid::after,
.tornado-header .container-xl::after {
    display: none
}

.tornado-header .logo {
    color: inherit
}

.tornado-header .logo h1 {
    font-size: 1.5rem;
    font-weight: var(--medium-weight);
    text-transform: uppercase;
    color: inherit
}

.tornado-header .logo img {
    max-height: 3rem
}

.tornado-header .action-btns .icon-btn {
    text-align: center
}

.tornado-header .action-btns .btn {
    margin-left: 15px
}

.tornado-header .action-btns .dropdown .dropdown-list {
    left: auto;
    right: 0
}

.tornado-header .action-btns .dropdown .dropdown-list::after,
.tornado-header .action-btns .dropdown .dropdown-list::before {
    left: auto;
    right: 12px
}

@media (max-width: 640px) {
    .tornado-header .action-btns .dropdown {
        position: static
    }

    .tornado-header .action-btns .dropdown .dropdown-list {
        margin-top: -1.125rem;
        width: 100%
    }

    .tornado-header .action-btns .dropdown .dropdown-list::before {
        display: none
    }

    .tornado-header .action-btns .dropdown .dropdown-list::after {
        display: none
    }
}

.tornado-header .search-box {
    display: inline-block;
    position: relative
}

@media (min-width: 768px) {
    .tornado-header .search-box {
        width: 14.38rem
    }
}

.tornado-header .search-box.form-ui input {
    margin-bottom: 0
}

.tornado-header .search-box .search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    color: var(--forms-color);
    width: 2.375rem;
    border: 0 none;
    cursor: pointer
}

.breadcrumb {
    margin-bottom: 1.875rem;
    background-color: var(--component-background);
    padding: 0.6875rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--component-color);
    font-size: .9375rem;
    line-height: 1.875rem
}

.breadcrumb>a,
.breadcrumb>span {
    display: inline-block;
    color: inherit
}

.breadcrumb>a:not(:last-child)::after,
.classic-blog .breadcrumb>a.info:not(:last-child)::after,
.breadcrumb>span:not(:last-child)::after,
.classic-blog .breadcrumb>span.info:not(:last-child)::after {
    padding: 0 5px;
    content: '/'
}

.breadcrumb [class*="ti-"]::before {
    margin-right: 5px;
    position: relative
}

.breadcrumb.pointing {
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    height: 3.125rem;
    word-spacing: -5px
}

.breadcrumb.pointing>a,
.breadcrumb.pointing>span {
    word-spacing: normal;
    padding: 0 1.25rem;
    line-height: 3.125rem;
    position: relative
}

.breadcrumb.pointing>a:last-child,
.breadcrumb.pointing>span:last-child {
    padding-left: 2.188rem
}

.breadcrumb.pointing>a::after,
.classic-blog .breadcrumb.pointing>a.info::after,
.breadcrumb.pointing>a::before,
.breadcrumb.pointing>span::after,
.classic-blog .breadcrumb.pointing>span.info::after,
.breadcrumb.pointing>span::before {
    content: '';
    position: absolute;
    border: 25px solid transparent;
    left: 100%;
    -webkit-transform: translateX(-14px);
    transform: translateX(-14px);
    top: 0
}

.breadcrumb.pointing>a::before,
.breadcrumb.pointing>span::before {
    border-left-color: rgba(0, 0, 0, 0.25);
    -webkit-transform: translateX(-13px);
    transform: translateX(-13px)
}

.breadcrumb.pointing>a:nth-last-child(2),
.breadcrumb.pointing>span:nth-last-child(2) {
    padding-right: 5px
}

.breadcrumb.pointing>a:nth-last-child(2)::after,
.classic-blog .breadcrumb.pointing>a.info:nth-last-child(2)::after,
.breadcrumb.pointing>span:nth-last-child(2)::after,
.classic-blog .breadcrumb.pointing>span.info:nth-last-child(2)::after {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.breadcrumb.pointing>a:nth-last-child(2)::before,
.breadcrumb.pointing>span:nth-last-child(2)::before {
    -webkit-transform: translateX(1px);
    transform: translateX(1px)
}

.breadcrumb.pointing>a:last-child::before,
.breadcrumb.pointing>a:last-child::after,
.classic-blog .breadcrumb.pointing>a.info:last-child::after,
.breadcrumb.pointing>span:last-child::before,
.breadcrumb.pointing>span:last-child::after,
.classic-blog .breadcrumb.pointing>span.info:last-child::after {
    display: none
}

.breadcrumb.curving {
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    height: 3.125rem;
    word-spacing: -5px
}

.breadcrumb.curving>a,
.breadcrumb.curving>span {
    word-spacing: normal;
    color: var(--component-color);
    padding-right: 0.625rem;
    padding-left: 1.25rem;
    line-height: 3.125rem;
    position: relative
}

.breadcrumb.curving>a:not(:first-child),
.breadcrumb.curving>span:not(:first-child) {
    padding-left: 1.875rem
}

.breadcrumb.curving>a:not(:last-child)::after,
.classic-blog .breadcrumb.curving>a.info:not(:last-child)::after,
.breadcrumb.curving>span:not(:last-child)::after,
.classic-blog .breadcrumb.curving>span.info:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    width: 6.25rem;
    height: 6.25rem;
    right: -0.625rem;
    top: 50%;
    border-radius: 50%;
    z-index: -1;
    border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.breadcrumb.skewed {
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    height: 3.125rem;
    word-spacing: -5px
}

.breadcrumb.skewed>a,
.breadcrumb.skewed>span {
    word-spacing: normal;
    padding-right: 0.625rem;
    padding-left: 1.25rem;
    line-height: 3.125rem;
    position: relative
}

.breadcrumb.skewed>a:not(:first-child),
.breadcrumb.skewed>span:not(:first-child) {
    padding-left: 1.875rem
}

.breadcrumb.skewed>a:not(:last-child)::after,
.classic-blog .breadcrumb.skewed>a.info:not(:last-child)::after,
.breadcrumb.skewed>span:not(:last-child)::after,
.classic-blog .breadcrumb.skewed>span.info:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    right: -0.625rem;
    top: 0;
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
    z-index: -1;
    border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.breadcrumb.dotted {
    background: transparent;
    border: 0 none;
    padding: 0;
    border-bottom: var(--component-border);
    word-spacing: -5px
}

.breadcrumb.dotted a {
    word-spacing: normal;
    padding-right: 25px;
    position: relative;
    line-height: 3.125rem
}

.breadcrumb.dotted a::after,
.breadcrumb.dotted .classic-blog a.info::after,
.classic-blog .breadcrumb.dotted a.info::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    background: var(--primary-color);
    height: 1px
}

.breadcrumb.dotted a::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    bottom: -5px;
    left: 50%;
    margin-left: -14px;
    background: var(--primary-color);
    border-radius: 50%
}

.breadcrumb.dotted a:last-child {
    color: var(--component-color)
}

.breadcrumb.dotted a:last-child::after,
.breadcrumb.dotted a:last-child::before {
    background: var(--component-color)
}

.breadcrumb [class*="ti-"]::before {
    font-size: 1rem
}

.breadcrumb.pointing {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.pointing>a,
.breadcrumb.pointing>span {
    vertical-align: middle;
    color: var(--component-color);
    background-color: var(--component-background)
}

.breadcrumb.pointing>a::after,
.classic-blog .breadcrumb.pointing>a.info::after,
.breadcrumb.pointing>span::after,
.classic-blog .breadcrumb.pointing>span.info::after {
    border-left-color: var(--component-background)
}

.breadcrumb.pointing>a:last-child,
.breadcrumb.pointing>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.curving {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.curving>a,
.breadcrumb.curving>span {
    vertical-align: middle;
    color: var(--component-color);
    background-color: var(--component-background)
}

.breadcrumb.curving>a::after,
.classic-blog .breadcrumb.curving>a.info::after,
.breadcrumb.curving>span::after,
.classic-blog .breadcrumb.curving>span.info::after {
    background-color: var(--component-background)
}

.breadcrumb.curving>a:last-child,
.breadcrumb.curving>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.skewed {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.skewed>a,
.breadcrumb.skewed>span {
    vertical-align: middle;
    color: var(--component-color);
    background-color: var(--component-background)
}

.breadcrumb.skewed>a::after,
.classic-blog .breadcrumb.skewed>a.info::after,
.breadcrumb.skewed>span::after,
.classic-blog .breadcrumb.skewed>span.info::after {
    background-color: var(--component-background)
}

.breadcrumb.skewed>a:last-child,
.breadcrumb.skewed>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.dark {
    background-color: var(--dark-color);
    border: 0 none;
    color: var(--dark-reverse)
}

.breadcrumb.dark.pointing {
    color: var(--dark-reverse)
}

.breadcrumb.dark.pointing>a,
.breadcrumb.dark.pointing>span {
    vertical-align: middle;
    color: var(--dark-reverse);
    background-color: var(--dark-color)
}

.breadcrumb.dark.pointing>a::after,
.classic-blog .breadcrumb.dark.pointing>a.info::after,
.breadcrumb.dark.pointing>span::after,
.classic-blog .breadcrumb.dark.pointing>span.info::after {
    border-left-color: var(--dark-color)
}

.breadcrumb.dark.pointing>a:last-child,
.breadcrumb.dark.pointing>span:last-child {
    color: var(--dark-reverse)
}

.breadcrumb.dark.curving {
    color: var(--dark-reverse)
}

.breadcrumb.dark.curving>a,
.breadcrumb.dark.curving>span {
    vertical-align: middle;
    color: var(--dark-reverse);
    background-color: var(--dark-color)
}

.breadcrumb.dark.curving>a::after,
.classic-blog .breadcrumb.dark.curving>a.info::after,
.breadcrumb.dark.curving>span::after,
.classic-blog .breadcrumb.dark.curving>span.info::after {
    background-color: var(--dark-color)
}

.breadcrumb.dark.curving>a:last-child,
.breadcrumb.dark.curving>span:last-child {
    color: var(--dark-reverse)
}

.breadcrumb.dark.skewed {
    color: var(--dark-reverse)
}

.breadcrumb.dark.skewed>a,
.breadcrumb.dark.skewed>span {
    vertical-align: middle;
    color: var(--dark-reverse);
    background-color: var(--dark-color)
}

.breadcrumb.dark.skewed>a::after,
.classic-blog .breadcrumb.dark.skewed>a.info::after,
.breadcrumb.dark.skewed>span::after,
.classic-blog .breadcrumb.dark.skewed>span.info::after {
    background-color: var(--dark-color)
}

.breadcrumb.dark.skewed>a:last-child,
.breadcrumb.dark.skewed>span:last-child {
    color: var(--dark-reverse)
}

.breadcrumb.primary {
    background-color: var(--primary-color);
    border: 0 none;
    color: var(--primary-reverse)
}

.breadcrumb.primary.pointing {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.pointing>a,
.breadcrumb.primary.pointing>span {
    vertical-align: middle;
    color: var(--primary-reverse);
    background-color: var(--primary-color)
}

.breadcrumb.primary.pointing>a::after,
.classic-blog .breadcrumb.primary.pointing>a.info::after,
.breadcrumb.primary.pointing>span::after,
.classic-blog .breadcrumb.primary.pointing>span.info::after {
    border-left-color: var(--primary-color)
}

.breadcrumb.primary.pointing>a:last-child,
.breadcrumb.primary.pointing>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.curving {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.curving>a,
.breadcrumb.primary.curving>span {
    vertical-align: middle;
    color: var(--primary-reverse);
    background-color: var(--primary-color)
}

.breadcrumb.primary.curving>a::after,
.classic-blog .breadcrumb.primary.curving>a.info::after,
.breadcrumb.primary.curving>span::after,
.classic-blog .breadcrumb.primary.curving>span.info::after {
    background-color: var(--primary-color)
}

.breadcrumb.primary.curving>a:last-child,
.breadcrumb.primary.curving>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.skewed {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.skewed>a,
.breadcrumb.primary.skewed>span {
    vertical-align: middle;
    color: var(--primary-reverse);
    background-color: var(--primary-color)
}

.breadcrumb.primary.skewed>a::after,
.classic-blog .breadcrumb.primary.skewed>a.info::after,
.breadcrumb.primary.skewed>span::after,
.classic-blog .breadcrumb.primary.skewed>span.info::after {
    background-color: var(--primary-color)
}

.breadcrumb.primary.skewed>a:last-child,
.breadcrumb.primary.skewed>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary {
    background-color: var(--secondary-color);
    border: 0 none;
    color: var(--secondary-reverse)
}

.breadcrumb.secondary.pointing {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary.pointing>a,
.breadcrumb.secondary.pointing>span {
    vertical-align: middle;
    color: var(--secondary-reverse);
    background-color: var(--secondary-color)
}

.breadcrumb.secondary.pointing>a::after,
.classic-blog .breadcrumb.secondary.pointing>a.info::after,
.breadcrumb.secondary.pointing>span::after,
.classic-blog .breadcrumb.secondary.pointing>span.info::after {
    border-left-color: var(--secondary-color)
}

.breadcrumb.secondary.pointing>a:last-child,
.breadcrumb.secondary.pointing>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary.curving {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary.curving>a,
.breadcrumb.secondary.curving>span {
    vertical-align: middle;
    color: var(--secondary-reverse);
    background-color: var(--secondary-color)
}

.breadcrumb.secondary.curving>a::after,
.classic-blog .breadcrumb.secondary.curving>a.info::after,
.breadcrumb.secondary.curving>span::after,
.classic-blog .breadcrumb.secondary.curving>span.info::after {
    background-color: var(--secondary-color)
}

.breadcrumb.secondary.curving>a:last-child,
.breadcrumb.secondary.curving>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary.skewed {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.secondary.skewed>a,
.breadcrumb.secondary.skewed>span {
    vertical-align: middle;
    color: var(--secondary-reverse);
    background-color: var(--secondary-color)
}

.breadcrumb.secondary.skewed>a::after,
.classic-blog .breadcrumb.secondary.skewed>a.info::after,
.breadcrumb.secondary.skewed>span::after,
.classic-blog .breadcrumb.secondary.skewed>span.info::after {
    background-color: var(--secondary-color)
}

.breadcrumb.secondary.skewed>a:last-child,
.breadcrumb.secondary.skewed>span:last-child {
    background-color: var(--component-background);
    color: var(--component-color)
}

.breadcrumb.primary.dark,
.breadcrumb.secondary.dark {
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.pointing,
.breadcrumb.secondary.dark.pointing {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.pointing>a,
.breadcrumb.primary.dark.pointing>span,
.breadcrumb.secondary.dark.pointing>a,
.breadcrumb.secondary.dark.pointing>span {
    vertical-align: middle;
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.pointing>a:last-child,
.breadcrumb.primary.dark.pointing>span:last-child,
.breadcrumb.secondary.dark.pointing>a:last-child,
.breadcrumb.secondary.dark.pointing>span:last-child {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.curving,
.breadcrumb.secondary.dark.curving {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.curving>a,
.breadcrumb.primary.dark.curving>span,
.breadcrumb.secondary.dark.curving>a,
.breadcrumb.secondary.dark.curving>span {
    vertical-align: middle;
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.curving>a:last-child,
.breadcrumb.primary.dark.curving>span:last-child,
.breadcrumb.secondary.dark.curving>a:last-child,
.breadcrumb.secondary.dark.curving>span:last-child {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.skewed,
.breadcrumb.secondary.dark.skewed {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.skewed>a,
.breadcrumb.primary.dark.skewed>span,
.breadcrumb.secondary.dark.skewed>a,
.breadcrumb.secondary.dark.skewed>span {
    vertical-align: middle;
    color: var(--dark-reverse)
}

.breadcrumb.primary.dark.skewed>a:last-child,
.breadcrumb.primary.dark.skewed>span:last-child,
.breadcrumb.secondary.dark.skewed>a:last-child,
.breadcrumb.secondary.dark.skewed>span:last-child {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.media-object {
    margin-bottom: 30px
}

.media-object:not(.boxed) {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.media-object .media {
    width: 80px;
    height: 80px
}

.media-object .media img {
    width: 100%
}

.media-object .media-content {
    width: calc(100% - 80px);
    padding-left: 1.25rem
}

.media-object .media-content p {
    margin: 0;
    margin-top: 5px
}

.media-object.boxed {
    padding: var(--component-padding);
    background: var(--component-background);
    border: var(--component-border)
}

.media-object .media-object {
    margin-top: 30px
}

.media-object.nested-level {
    margin-left: 10%
}

.jumbtron {
    padding: 2.813rem;
    background: var(--component-background);
    -webkit-box-shadow: 0px 0px 0.5rem 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0.5rem 0px rgba(0, 0, 0, 0.1);
    color: var(--component-color)
}

.jumbtron h1,
.jumbtron h2,
.jumbtron h3,
.jumbtron h4,
.jumbtron h5,
.jumbtron h6 {
    color: inherit
}

.jumbtron .action-area {
    width: 100%;
    padding: 0.9375rem 0;
    padding-bottom: 0;
    border-top: var(--component-border);
    margin-top: var(--component-padding)
}

.jumbtron .btn {
    min-width: 9.375rem
}

.jumbtron .btn:nth-child(even) {
    margin-left: 0.9375rem
}

.jumbtron.primary {
    background: var(--primary-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--primary-color);
    box-shadow: 0px 0px 0.5rem 0px var(--primary-color);
    color: var(--primary-reverse)
}

.jumbtron.secondary {
    background: var(--secondary-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--secondary-color);
    box-shadow: 0px 0px 0.5rem 0px var(--secondary-color);
    color: var(--secondary-reverse)
}

.jumbtron.success {
    background: var(--success-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--success-color);
    box-shadow: 0px 0px 0.5rem 0px var(--success-color);
    color: var(--dark-reverse)
}

.jumbtron.danger {
    background: var(--danger-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--danger-color);
    box-shadow: 0px 0px 0.5rem 0px var(--danger-color);
    color: var(--dark-reverse)
}

.jumbtron.warning {
    background: var(--warning-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--warning-color);
    box-shadow: 0px 0px 0.5rem 0px var(--warning-color);
    color: var(--dark-reverse)
}

.jumbtron.info {
    background: var(--info-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--info-color);
    box-shadow: 0px 0px 0.5rem 0px var(--info-color);
    color: var(--dark-reverse)
}

.jumbtron.dark {
    background: var(--dark-color);
    -webkit-box-shadow: 0px 0px 0.5rem 0px var(--dark-color);
    box-shadow: 0px 0px 0.5rem 0px var(--dark-color);
    color: var(--dark-reverse)
}

@media (max-width: 1100px) {
    .jumbtron {
        padding: 2rem
    }
}

@media (max-width: 640px) {
    .jumbtron {
        padding: 30px 0
    }
}

.badge {
    display: inline-block;
    padding: 0 0.8125rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.8125rem;
    color: var(--dark-color);
    cursor: pointer;
    background: var(--gray-light);
    text-align: center;
    border-radius: 5px;
    vertical-align: middle;
    position: relative;
    margin: 5px
}

.badge.outline {
    background: transparent;
    color: var(--dark-color);
    border: 1px solid var(--gray-light);
    height: calc($height - 2px)
}

.badge.tag {
    height: 1.875rem;
    line-height: 1.75rem;
    font-size: 13px;
    border-radius: 0;
    margin-left: 1.563rem
}

.badge.tag::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 0.9375rem solid transparent;
    border-right-color: var(--gray-light);
    top: 50%;
    right: 100%
}

.badge.tag::before {
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    top: calc(50% - 1px);
    background: var(--dark-reverse);
    border-radius: 50%;
    right: calc(100%);
    z-index: 1
}

.badge.rounded {
    border-radius: 9.375rem
}

.badge.circle {
    border-radius: 100%;
    padding: 0;
    width: 1.75rem
}

.badge.dismiss i,
.badge.dismiss a {
    font-style: normal;
    font-size: 0.7em;
    line-height: inherit;
    float: right;
    margin-left: 8px;
    position: relative;
    top: -1px
}

.badge[class*="pointing"].outline {
    background: var(--dark-reverse)
}

.badge[class*="pointing"]::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0.5em solid transparent
}

.badge[class*="pointing"].outline::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0.5em solid transparent
}

.badge.pointing-top::after {
    bottom: 100%;
    left: 50%;
    border-bottom-color: var(--gray-light)
}

.badge.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.pointing-top.outline::before {
    bottom: 100%;
    left: 50%;
    margin-bottom: 1px;
    border-bottom-color: var(--gray-light)
}

.badge.pointing-top:hover::after {
    border-bottom-color: #f7f7f7
}

.badge.pointing-bottom::after {
    top: 100%;
    left: 50%;
    border-top-color: var(--gray-light)
}

.badge.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.pointing-bottom.outline::before {
    top: 100%;
    left: 50%;
    margin-top: 1px;
    border-top-color: var(--gray-light)
}

.badge.pointing-start::after {
    top: 50%;
    right: 100%;
    border-right-color: var(--gray-light)
}

.badge.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.pointing-start.outline::before {
    top: 50%;
    right: calc(100% + 1px);
    border-right-color: var(--gray-light)
}

.badge.pointing-end::after {
    top: 50%;
    left: 100%;
    border-left-color: var(--gray-light)
}

.badge.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.pointing-end.outline::before {
    top: 50%;
    left: calc(100% + 1px);
    border-left-color: var(--gray-light)
}

.badge.primary {
    background: var(--primary-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.primary.tag::after {
    border-right-color: var(--primary-color)
}

.badge.primary.outline {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.badge.primary.pointing-top::after {
    border-bottom-color: var(--primary-color)
}

.badge.primary.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.primary.pointing-top.outline::before {
    border-bottom-color: var(--primary-color)
}

.badge.primary.pointing-bottom::after {
    border-top-color: var(--primary-color)
}

.badge.primary.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.primary.pointing-bottom.outline::before {
    border-top-color: var(--primary-color)
}

.badge.primary.pointing-start::after {
    border-right-color: var(--primary-color)
}

.badge.primary.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.primary.pointing-start.outline::before {
    border-right-color: var(--primary-color)
}

.badge.primary.pointing-end::after {
    border-left-color: var(--primary-color)
}

.badge.primary.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.primary.pointing-end.outline::before {
    border-left-color: var(--primary-color)
}

.badge.secondary {
    background: var(--secondary-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.secondary.tag::after {
    border-right-color: var(--secondary-color)
}

.badge.secondary.outline {
    background: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color)
}

.badge.secondary.pointing-top::after {
    border-bottom-color: var(--secondary-color)
}

.badge.secondary.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.secondary.pointing-top.outline::before {
    border-bottom-color: var(--secondary-color)
}

.badge.secondary.pointing-bottom::after {
    border-top-color: var(--secondary-color)
}

.badge.secondary.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.secondary.pointing-bottom.outline::before {
    border-top-color: var(--secondary-color)
}

.badge.secondary.pointing-start::after {
    border-right-color: var(--secondary-color)
}

.badge.secondary.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.secondary.pointing-start.outline::before {
    border-right-color: var(--secondary-color)
}

.badge.secondary.pointing-end::after {
    border-left-color: var(--secondary-color)
}

.badge.secondary.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.secondary.pointing-end.outline::before {
    border-left-color: var(--secondary-color)
}

.badge.success {
    background: var(--success-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.success.tag::after {
    border-right-color: var(--success-color)
}

.badge.success.outline {
    background: transparent;
    color: var(--success-color);
    border: 1px solid var(--success-color)
}

.badge.success.pointing-top::after {
    border-bottom-color: var(--success-color)
}

.badge.success.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.success.pointing-top.outline::before {
    border-bottom-color: var(--success-color)
}

.badge.success.pointing-bottom::after {
    border-top-color: var(--success-color)
}

.badge.success.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.success.pointing-bottom.outline::before {
    border-top-color: var(--success-color)
}

.badge.success.pointing-start::after {
    border-right-color: var(--success-color)
}

.badge.success.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.success.pointing-start.outline::before {
    border-right-color: var(--success-color)
}

.badge.success.pointing-end::after {
    border-left-color: var(--success-color)
}

.badge.success.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.success.pointing-end.outline::before {
    border-left-color: var(--success-color)
}

.badge.danger {
    background: var(--danger-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.danger.tag::after {
    border-right-color: var(--danger-color)
}

.badge.danger.outline {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color)
}

.badge.danger.pointing-top::after {
    border-bottom-color: var(--danger-color)
}

.badge.danger.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.danger.pointing-top.outline::before {
    border-bottom-color: var(--danger-color)
}

.badge.danger.pointing-bottom::after {
    border-top-color: var(--danger-color)
}

.badge.danger.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.danger.pointing-bottom.outline::before {
    border-top-color: var(--danger-color)
}

.badge.danger.pointing-start::after {
    border-right-color: var(--danger-color)
}

.badge.danger.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.danger.pointing-start.outline::before {
    border-right-color: var(--danger-color)
}

.badge.danger.pointing-end::after {
    border-left-color: var(--danger-color)
}

.badge.danger.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.danger.pointing-end.outline::before {
    border-left-color: var(--danger-color)
}

.badge.warning {
    background: var(--warning-color);
    color: var(--dark-color);
    border: 0 none
}

.badge.warning.tag::after {
    border-right-color: var(--warning-color)
}

.badge.warning.outline {
    background: transparent;
    color: var(--warning-color);
    border: 1px solid var(--warning-color)
}

.badge.warning.pointing-top::after {
    border-bottom-color: var(--warning-color)
}

.badge.warning.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.warning.pointing-top.outline::before {
    border-bottom-color: var(--warning-color)
}

.badge.warning.pointing-bottom::after {
    border-top-color: var(--warning-color)
}

.badge.warning.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.warning.pointing-bottom.outline::before {
    border-top-color: var(--warning-color)
}

.badge.warning.pointing-start::after {
    border-right-color: var(--warning-color)
}

.badge.warning.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.warning.pointing-start.outline::before {
    border-right-color: var(--warning-color)
}

.badge.warning.pointing-end::after {
    border-left-color: var(--warning-color)
}

.badge.warning.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.warning.pointing-end.outline::before {
    border-left-color: var(--warning-color)
}

.badge.info {
    background: var(--info-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.info.tag::after {
    border-right-color: var(--info-color)
}

.badge.info.outline {
    background: transparent;
    color: var(--info-color);
    border: 1px solid var(--info-color)
}

.badge.info.pointing-top::after {
    border-bottom-color: var(--info-color)
}

.badge.info.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.info.pointing-top.outline::before {
    border-bottom-color: var(--info-color)
}

.badge.info.pointing-bottom::after {
    border-top-color: var(--info-color)
}

.badge.info.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.info.pointing-bottom.outline::before {
    border-top-color: var(--info-color)
}

.badge.info.pointing-start::after {
    border-right-color: var(--info-color)
}

.badge.info.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.info.pointing-start.outline::before {
    border-right-color: var(--info-color)
}

.badge.info.pointing-end::after {
    border-left-color: var(--info-color)
}

.badge.info.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.info.pointing-end.outline::before {
    border-left-color: var(--info-color)
}

.badge.gray {
    background: var(--gray-color);
    color: var(--dark-reverse)
}

.badge.gray.tag::after {
    border-right-color: var(--gray-color)
}

.badge.gray.outline {
    background: transparent;
    color: var(--gray-color);
    border: 1px solid var(--gray-color)
}

.badge.gray.pointing-top::after {
    border-bottom-color: var(--gray-color)
}

.badge.gray.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.gray.pointing-top.outline::before {
    border-bottom-color: var(--gray-color)
}

.badge.gray.pointing-bottom::after {
    border-top-color: var(--gray-color)
}

.badge.gray.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.gray.pointing-bottom.outline::before {
    border-top-color: var(--gray-color)
}

.badge.gray.pointing-start::after {
    border-right-color: var(--gray-color)
}

.badge.gray.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.gray.pointing-start.outline::before {
    border-right-color: var(--gray-color)
}

.badge.gray.pointing-end::after {
    border-left-color: var(--gray-color)
}

.badge.gray.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.gray.pointing-end.outline::before {
    border-left-color: var(--gray-color)
}

.badge.dark {
    background: var(--dark-color);
    color: var(--dark-reverse);
    border: 0 none
}

.badge.dark.tag::after {
    border-right-color: var(--dark-color)
}

.badge.dark.outline {
    background: transparent;
    color: var(--dark-color);
    border: 1px solid var(--dark-color)
}

.badge.dark.pointing-top::after {
    border-bottom-color: var(--dark-color)
}

.badge.dark.pointing-top.outline::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.dark.pointing-top.outline::before {
    border-bottom-color: var(--dark-color)
}

.badge.dark.pointing-bottom::after {
    border-top-color: var(--dark-color)
}

.badge.dark.pointing-bottom.outline::after {
    border-top-color: var(--dark-reverse)
}

.badge.dark.pointing-bottom.outline::before {
    border-top-color: var(--dark-color)
}

.badge.dark.pointing-start::after {
    border-right-color: var(--dark-color)
}

.badge.dark.pointing-start.outline::after {
    border-right-color: var(--dark-reverse)
}

.badge.dark.pointing-start.outline::before {
    border-right-color: var(--dark-color)
}

.badge.dark.pointing-end::after {
    border-left-color: var(--dark-color)
}

.badge.dark.pointing-end.outline::after {
    border-left-color: var(--dark-reverse)
}

.badge.dark.pointing-end.outline::before {
    border-left-color: var(--dark-color)
}

.badge.light {
    background: var(--dark-reverse);
    color: var(--dark-color);
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.badge.light.tag::after {
    border-right-color: var(--dark-reverse)
}

.badge.light.outline {
    background: transparent;
    color: var(--dark-reverse);
    border: 1px solid var(--dark-reverse)
}

.badge.light.pointing-top::after {
    border-bottom-color: var(--dark-reverse)
}

.badge.light.pointing-bottom::after {
    border-top-color: var(--dark-reverse)
}

.badge.light.pointing-start::after {
    border-right-color: var(--dark-reverse)
}

.badge.light.pointing-end::after {
    border-left-color: var(--dark-reverse)
}

.card-block {
    margin-bottom: 30px
}

.card-block .content-box {
    padding: var(--component-padding);
    background: var(--component-background);
    border: var(--component-border);
    -webkit-box-shadow: var(--component-shadow);
    box-shadow: var(--component-shadow);
    height: 100%
}

.card-block .content-box .card-media {
    display: block;
    position: relative;
    padding-bottom: 78.13%;
    margin-bottom: calc(var(--component-padding) - 5px)
}

.card-block .content-box .card-media iframe,
.card-block .content-box .card-media video,
.card-block .content-box .card-media audio,
.card-block .content-box .card-media embed,
.card-block .content-box .card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none;
    margin: 0;
    padding: 0
}

.card-block .content-box .card-media.full {
    margin: calc(-1 * var(--component-padding));
    margin-bottom: calc(var(--component-padding) - 5px)
}

.card-block .content-box .card-media.overlayed {
    margin-bottom: 0;
    overflow: hidden
}

.card-block .content-box .card-media.overlayed+.action-footer {
    margin-top: 0
}

.card-block .content-box .card-media.overlayed::after {
    content: '';
    position: absolute;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0
}

.card-block .content-box .card-media.overlayed .content {
    position: absolute;
    top: 50%;
    width: 100%;
    left: -50%;
    opacity: 0;
    text-align: center;
    padding: 0 var(--component-padding);
    color: #FFF;
    z-index: 5
}

.card-block .content-box .card-media.overlayed .content .title,
.card-block .content-box .card-media.overlayed .content p {
    color: #FFF
}

.card-block .content-box .card-media.overlayed:hover .content {
    left: 0;
    opacity: 1
}

.card-block .content-box .card-media.overlayed:hover::after {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1
}

.card-block .content-box .card-media .hvr-component {
    opacity: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.75)
}

.card-block .content-box .card-media .hvr-component .icon-btn {
    font-size: 1.25rem;
    background: #FFF;
    width: 2.813rem;
    height: 2.813rem;
    border-radius: 50%;
    line-height: 2.688rem;
    color: var(--danger-color);
    text-align: center;
    margin: 0 0.625rem
}

.card-block .content-box .card-media:hover .hvr-component {
    opacity: 1
}

.card-block .content-box .title {
    font-size: 1rem;
    color: var(--component-color);
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.6
}

.card-block .content-box .title.overflow-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.card-block .content-box p {
    font-size: 0.9375rem;
    margin: 0;
    opacity: 0.9;
    margin-bottom: 15px;
    color: var(--component-color)
}

.card-block .content-box .action-footer {
    margin: calc(-1 * var(--component-padding));
    margin-top: calc(var(--component-padding) - 5px);
    padding: 0 var(--component-padding);
    font-size: 0.875rem;
    line-height: 3.125rem;
    font-weight: var(--medium-weight);
    color: var(--component-color);
    border-top: var(--component-border)
}

.card-block .content-box .action-footer [class*="ti-"]::before {
    font-size: 1rem;
    margin-right: 5px
}

.card-block .content-box .action-footer .info span {
    margin-left: 0.9375rem;
    opacity: 0.9
}

.card-block .content-box .action-footer .more-btn {
    text-transform: uppercase
}

.card-block .content-box .action-footer .more-btn::before {
    position: relative;
    top: -2px
}

.card-block .content-box .action-footer .price {
    margin: 0;
    margin-left: 0.9375rem;
    font-size: 1rem;
    font-weight: var(--medium-weight);
    color: var(--primary-color)
}

.card-block .content-box .action-footer .price i {
    font-size: 0.9375rem;
    font-weight: normal;
    color: #b8b8b8;
    text-decoration: line-through
}

.card-block .content-box .card-head {
    margin: calc(-1 * var(--component-padding));
    padding: 0 0.9375rem;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: var(--component-border);
    margin-bottom: var(--component-padding);
    height: 3.125rem
}

.card-block .content-box .card-head .title {
    margin: 0;
    font-size: 0.875rem;
    color: var(--primary-color);
    text-transform: none;
    font-weight: normal
}

.card-block .content-box .card-head img {
    max-width: 1.875rem;
    max-height: 1.875rem;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px
}

.card-block .content-box .card-head .date {
    font-size: 0.8125rem;
    color: var(--component-color);
    opacity: 0.9
}

.card-block .content-box.horizontal {
    padding: 0
}

.card-block .content-box.horizontal .card-media {
    width: 33.333%;
    margin: 0
}

@media screen and (min-width: 500px) {
    .card-block .content-box.horizontal .card-media {
        padding: 0
    }
}

@media screen and (max-width: 480px) {
    .card-block .content-box.horizontal .card-media {
        width: 100%;
        margin-bottom: calc(var(--component-padding) - 5px)
    }
}

.card-block .content-box.horizontal .content-wrap {
    padding: var(--component-padding);
    width: 66.666%
}

@media screen and (max-width: 480px) {
    .card-block .content-box.horizontal .content-wrap {
        width: 100%
    }
}

.card-block .content-box .btns-group .btn {
    width: 50%;
    margin: 0;
    padding: 0 0.9375rem;
    text-transform: uppercase
}

.card-block .content-box .btns-group.gutter-on .btn {
    width: calc(50% - 1.25rem)
}

.card-block .content-box .btns-group [class*="ti-"]::before {
    margin-right: 5px;
    font-size: 1.2em
}

.card-block .content-box .btns-group:not(.gutter-on) .btn:first-child {
    border-radius: var(--component-radius) 0 0 var(--component-radius)
}

.card-block .content-box .btns-group:not(.gutter-on) .btn:last-child {
    border-radius: 0 var(--component-radius) var(--component-radius) 0
}

.card-block.product-card .floating-content,
.card-block.product-card .hvr-component {
    padding: 1.25rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.card-block.product-card .floating-content .overlay-link,
.card-block.product-card .hvr-component .overlay-link {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1
}

.card-block.product-card .floating-content .overlay-link~*,
.card-block.product-card .hvr-component .overlay-link~* {
    position: relative;
    z-index: 2
}

.card-block.product-card .floating-content .floating-drt,
.card-block.product-card .hvr-component .floating-drt {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem
}

.card-block.product-card .floating-content .floating-dt,
.card-block.product-card .hvr-component .floating-dt {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem
}

.card-block.product-card .floating-content .floating-drb,
.card-block.product-card .hvr-component .floating-drb {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem
}

.card-block.product-card .floating-content .floating-db,
.card-block.product-card .hvr-component .floating-db {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem
}

.card-block.product-card .floating-content .badge,
.card-block.product-card .hvr-component .badge {
    line-height: 1.875rem;
    height: 1.875rem;
    margin-bottom: 15px
}

.card-block.product-card .stars {
    display: block;
    color: var(--component-color);
    height: 1.875rem;
    line-height: 1;
    font-size: 0.9375rem;
    padding-top: 2px;
    opacity: 0.9
}

.card-block.product-card .stars .active {
    color: var(--warning-color);
    opacity: 1
}

.card-block.product-card .btn.price {
    font-size: 18px
}

.card-block.product-card .btn.price i {
    color: #7d7f81;
    text-decoration: line-through;
    font-size: 1.063rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    font-weight: normal;
    position: relative;
    top: -3px
}

.card-block.product-card .btn.price:hover i {
    color: #FFF
}

.card-block.user-card .content-box .card-media {
    padding-bottom: 50%;
    margin-bottom: 0
}

.card-block.user-card .content-box .card-media [class*="floating-"] {
    padding: 0.625rem 1.25rem
}

.card-block.user-card .content-box .info-span {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: var(--medium-weight);
    margin-right: 0.9375rem;
    color: #FFF
}

.card-block.user-card .content-box .info-span::before {
    margin-right: 5px
}

.card-block.user-card .content-box .avatar {
    margin: auto;
    margin-top: -60px;
    width: 11.25rem;
    height: 11.25rem;
    display: block;
    border-radius: 50%;
    border: var(--component-border);
    position: relative;
    z-index: 2
}

.card-block.user-card .content-box .avatar img {
    width: 11.25rem;
    height: 11.25rem;
    border-radius: 50%
}

.card-block.user-card .content-box .title {
    margin-top: 1.25rem;
    color: var(--primary-color);
    text-align: center
}

.card-block.user-card .content-box .subtitle {
    font-size: 0.9375rem;
    font-weight: normal;
    margin: 0;
    margin-top: -5px;
    color: var(--component-color);
    opacity: 0.9;
    text-align: center;
    margin-bottom: 0.625rem
}

.card-block.user-card .content-box .social-btns {
    text-align: center;
    word-spacing: -5px;
    margin-top: -5px;
    margin-bottom: 10px
}

.card-block.user-card .content-box .social-btns a {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--component-color);
    opacity: 0.9;
    width: 1.875rem;
    height: 1.875rem;
    line-height: 1.75rem;
    margin: 5px;
    background: #eaeaea
}

.card-block.user-card .content-box .social-btns a.circle {
    border-radius: 50%
}

.card-block.user-card .content-box .btns-group .btn {
    margin-bottom: 0
}

.card-block.widget .content-box {
    padding: 1.25rem;
    height: auto;
    position: relative
}

.card-block.widget .content-box .icon-btn {
    width: 1.875rem;
    height: 1.875rem;
    color: #6e6d6d;
    text-align: center;
    line-height: 1.75rem;
    border-radius: 50%;
    display: inline-block;
    padding: 0
}

.card-block.widget .content-box .icon-btn::before {
    font-size: 0.875rem;
    display: inline;
    margin: 0
}

.card-block.widget .content-box .icon-btn.primary {
    background: var(--primary-color);
    color: var(--dark-reverse)
}

.card-block.widget .content-box .icon-btn.secondary {
    background: var(--secondary-color);
    color: var(--dark-reverse)
}

.card-block.widget .content-box .widget-image {
    display: block;
    width: 4.375rem;
    height: 4.375rem
}

.card-block.widget .content-box .widget-image img {
    width: 4.375rem;
    height: 4.375rem
}

.card-block.widget .content-box .widget-image.circle {
    border-radius: 50%
}

.card-block.widget .content-box .widget-image.circle img {
    border-radius: 50%
}

.card-block.widget .content-box .widget-content {
    width: calc(100% - 4.375rem);
    padding-left: 0.9375rem
}

.card-block.widget .content-box .widget-content h3 {
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--primary-color);
    margin: 0;
    padding: 0
}

.card-block.widget .content-box .widget-content h2 {
    font-size: 1rem;
    line-height: 1;
    color: var(--primary-color);
    margin: 0;
    padding: 0
}

.card-block.widget .content-box .widget-content h2 span {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--component-color);
    opacity: 0.9;
    font-weight: normal
}

.card-block.widget .content-box .widget-content p {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--component-color);
    opacity: 0.9;
    margin: 0;
    padding: 0;
    margin-top: 8px
}

.card-block.widget .content-box .action-footer {
    width: calc(100% + 2.5rem);
    margin: -1.25rem;
    margin-top: 1.25rem
}

.card-block.widget .content-box .floating-drt {
    position: absolute;
    top: 5px;
    right: 5px
}

.card-block.widget .content-box .floating-drt.primary,
.card-block.widget .content-box .floating-drt.secondary {
    top: 0.9375rem;
    right: 0.9375rem
}

.card-block.widget .content-box .floating-dt {
    position: absolute;
    top: 5px;
    left: 5px
}

.card-block.widget .content-box .floating-dt.primary,
.card-block.widget .content-box .floating-dt.secondary {
    top: 0.9375rem;
    right: 0.9375rem
}

.card-block.widget .content-box .floating-drb {
    position: absolute;
    bottom: 5px;
    right: 5px
}

.card-block.widget .content-box .floating-drb.primary,
.card-block.widget .content-box .floating-drb.secondary {
    bottom: 0.9375rem;
    right: 0.9375rem
}

.card-block.widget .content-box .floating-db {
    position: absolute;
    bottom: 5px;
    left: 5px
}

.card-block.widget .content-box .floating-db.primary,
.card-block.widget .content-box .floating-db.secondary {
    bottom: 0.9375rem;
    right: 0.9375rem
}

body {
    margin: 0;
    padding: 0;
    direction: ltr;
    background: var(--body-bg);
    position: relative
}

iframe {
    max-width: 100%;
    border: 0 none
}

.no-padding {
    padding: 0
}

.fluid,
.block-lvl,
.fluid-block,
.line-break {
    width: 100%;
    display: block
}

.block-center {
    margin-right: auto;
    margin-left: auto
}

.inline-block {
    display: inline-block
}

.display-block {
    display: block
}

.float-start {
    float: left
}

.float-end {
    float: right
}

[class*="tooltip"] {
    position: relative
}

[class*="tooltip"]::after,
.classic-blog .info[class*="tooltip"]::after {
    content: attr(data-title);
    position: absolute;
    font-size: 12px;
    line-height: 27px;
    background: rgba(0, 0, 0, 0.75);
    color: #FFF;
    padding: 0 15px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0
}

[class*="tooltip"]:hover::after {
    visibility: visible;
    opacity: 1
}

[class*="tooltip"]:not([class*="ti-"])::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    visibility: hidden;
    opacity: 0
}

[class*="tooltip"]:not([class*="ti-"]):hover::before {
    visibility: visible;
    opacity: 1
}

.tooltip::after,
.classic-blog .tooltip.info::after {
    left: 50%;
    bottom: 100%;
    max-width: 300px
}

.tooltip:not([class*="ti-"])::after {
    margin-bottom: 5px
}

.tooltip:not([class*="ti-"])::before {
    left: 50%;
    bottom: 100%;
    margin-bottom: -5px;
    border-top-color: rgba(0, 0, 0, 0.75)
}

.tooltip-bottom::after,
.classic-blog .tooltip-bottom.info::after {
    left: 50%;
    top: 100%;
    max-width: 300px
}

.tooltip-bottom:not([class*="ti-"])::after {
    margin-top: 5px
}

.tooltip-bottom:not([class*="ti-"])::before {
    margin-top: -5px;
    left: 50%;
    top: 100%;
    border-bottom-color: rgba(0, 0, 0, 0.75)
}

.tooltip-start::after,
.classic-blog .tooltip-start.info::after {
    right: 100%;
    top: 50%;
    max-width: 300px
}

.tooltip-start:not([class*="ti-"])::after {
    margin-right: 5px
}

.tooltip-start:not([class*="ti-"])::before {
    margin-right: -5px;
    right: 100%;
    top: 50%;
    border-left-color: rgba(0, 0, 0, 0.75)
}

.tooltip-end::after,
.classic-blog .tooltip-end.info::after {
    left: 100%;
    top: 50%;
    max-width: 300px
}

.tooltip-end:not([class*="ti-"])::after {
    margin-left: 5px
}

.tooltip-end:not([class*="ti-"])::before {
    margin-left: -4px;
    left: 100%;
    top: 50%;
    border-right-color: rgba(0, 0, 0, 0.75)
}

.tooltip-responsive::not([class*="ti-"])::before {
    display: none
}

.responsive-element {
    display: block;
    position: relative;
    padding-bottom: 75%
}

.responsive-element.square-size {
    padding-bottom: 100%
}

.responsive-element.hd-size {
    padding-bottom: 56.25%
}

.responsive-element.classic-size {
    padding-bottom: 66.64%
}

.responsive-element.cinema-size {
    padding-bottom: 42.81%
}

.responsive-element>iframe,
.responsive-element>video,
.responsive-element>.element-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.responsive-element>video {
    -o-object-fit: fill;
    object-fit: fill
}

[data-src] {
    display: block;
    background-size: cover;
    background-position: center;
    position: relative;
    background-repeat: no-repeat
}

.lazyloader {
    object-fit: contain;
    background-size: auto 100%;
    background-color: #F1F2F3
}

[data-sticky="inner"].is-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

[data-sticky="absolute"].is-sticky {
    position: fixed;
    top: 0
}

[data-sticky="absolute"].is-sticky.tornado-header {
    left: 0;
    right: 0;
    width: 100%
}

.view-status {
    visibility: hidden;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.view-status.view-active {
    visibility: visible
}

.mb5 {
    margin-bottom: 5px
}

.mb10 {
    margin-bottom: 10px
}

.mb15 {
    margin-bottom: 15px
}

.mb20 {
    margin-bottom: 20px
}

.mb30 {
    margin-bottom: 30px
}

.mb35 {
    margin-bottom: 35px
}

.mb40 {
    margin-bottom: 40px
}

.mb50 {
    margin-bottom: 50px
}

.mt5 {
    margin-top: 5px
}

.mt10 {
    margin-top: 10px
}

.mt15 {
    margin-top: 15px
}

.mt20 {
    margin-top: 20px
}

.mt30 {
    margin-top: 30px
}

.mt35 {
    margin-top: 35px
}

.mt40 {
    margin-top: 40px
}

.mt50 {
    margin-top: 50px
}

.ms-auto {
    margin-left: auto
}

.ms5 {
    margin-left: 5px
}

.ms10 {
    margin-left: 10px
}

.ms15 {
    margin-left: 15px
}

.ms20 {
    margin-left: 20px
}

.ms30 {
    margin-left: 30px
}

.ms35 {
    margin-left: 35px
}

.ms40 {
    margin-left: 40px
}

.ms50 {
    margin-left: 50px
}

.me-auto {
    margin-right: auto
}

.me5 {
    margin-right: 5px
}

.me10 {
    margin-right: 10px
}

.me15 {
    margin-right: 15px
}

.me20 {
    margin-right: 20px
}

.me30 {
    margin-right: 30px
}

.me35 {
    margin-right: 35px
}

.me40 {
    margin-right: 40px
}

.me50 {
    margin-right: 50px
}

.pt10 {
    padding-top: 10px
}

.pt15 {
    padding-top: 15px
}

.pt30 {
    padding-top: 30px
}

.pt50 {
    padding-top: 50px
}

.pt70 {
    padding-top: 70px
}

.pt100 {
    padding-top: 100px
}

.pb10 {
    padding-bottom: 10px
}

.pb15 {
    padding-bottom: 15px
}

.pb30 {
    padding-bottom: 30px
}

.pb50 {
    padding-bottom: 50px
}

.pb70 {
    padding-bottom: 70px
}

.pb100 {
    padding-bottom: 100px
}

.section-small {
    padding: 50px 0
}

@media screen and (max-width: 1024px) {
    .section-small {
        padding: 30px 0
    }
}

.section-medium {
    padding: 70px 0
}

@media screen and (max-width: 1024px) {
    .section-medium {
        padding: 50px 0
    }
}

.section-large {
    padding: 100px 0
}

@media screen and (max-width: 1366px) {
    .section-large {
        padding: 70px 0
    }
}

@media screen and (max-width: 980px) {
    .section-large {
        padding: 50px 0
    }
}

#lightbox-modal .modal-content {
    width: auto;
    max-width: 90%;
    background-color: transparent
}

#lightbox-modal .modal-content .item {
    background-repeat: no-repeat;
    background-position: center
}

#lightbox-modal .modal-content .item img {
    max-height: calc(100vh - 30px);
    display: block;
    margin: auto
}

#lightbox-modal .modal-content .tns-controls button {
    opacity: 1
}

.ltr {
    direction: ltr
}

.rtl {
    direction: rtl
}

.overflow {
    overflow: hidden
}

.color-inherit {
    color: inherit
}

.mxw-1024 {
    max-width: 1024px
}

.mxw-768 {
    max-width: 768px
}

.mxw-640 {
    max-width: 640px
}

.mxw-480 {
    max-width: 480px
}

.mxw-360 {
    max-width: 360px
}

.mxw-200 {
    max-width: 200px
}

.mxw-180 {
    max-width: 180px
}

.mxw-120 {
    max-width: 120px
}

.miw-1024 {
    min-width: 1024px
}

.miw-768 {
    min-width: 768px
}

.miw-640 {
    min-width: 640px
}

.miw-480 {
    min-width: 480px
}

.miw-360 {
    min-width: 360px
}

.miw-200 {
    min-width: 200px
}

.miw-180 {
    min-width: 180px
}

.miw-120 {
    min-width: 120px
}

[class*="overlay-"] {
    position: relative
}

[class*="overlay-"]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.overlay-dark::before {
    background-color: #000;
    opacity: 0.25
}

.overlay-light::before {
    background-color: #000;
    opacity: 0.25
}

.overlay-darker::before {
    background-color: #000;
    opacity: 0.5
}

.overlay-lighter::before {
    background-color: #000;
    opacity: 0.5
}

.wp-admin .view-status {
    visibility: visible
}

.success-border {
    border-color: var(--success-color)
}

.danger-border {
    border-color: var(--danger-color)
}

.warning-border {
    border-color: var(--warning-color)
}

.primary-border {
    border-color: var(--primary-color)
}

.secondary-border {
    border-color: var(--secondary-color)
}

.light-border {
    border-color: var(--dark-reverse)
}

.info-border {
    border-color: var(--info-color)
}

.gray-border {
    border-color: var(--gray-color)
}

.dark-border {
    border-color: var(--dark-color)
}

.facebook-border {
    border-color: #505cd6
}

.twitter-border {
    border-color: #1da1f2
}

.google-plus-border {
    border-color: #ea4335
}

.youtube-border {
    border-color: #e43e3c
}

.tumblr-border {
    border-color: #35465c
}

.instagram-border {
    border-color: #d43f8d
}

.android-border {
    border-color: #a4c639
}

.snapchat-border {
    border-color: #e2e62c
}

.whatsapp-border {
    border-color: #10d058
}

.pinterest-border {
    border-color: #bd081c
}

.linkedin-border {
    border-color: #0077b5
}

.behance-border {
    border-color: #1769ff
}

.apple-border {
    border-color: #dbebfa
}

.cloudflare-border {
    border-color: #faae40
}

.dribbble-border {
    border-color: #ea4c89
}

.envato-border {
    border-color: #82b541
}

.flicker-border {
    border-color: #0063dc
}

.github-border {
    border-color: #f5f5f5
}

.white-border {
    border-color: #FFF
}

.success-color {
    color: var(--success-color)
}

.danger-color {
    color: var(--danger-color)
}

.warning-color {
    color: var(--warning-color)
}

.primary-color {
    color: var(--primary-color)
}

.secondary-color {
    color: var(--secondary-color)
}

.light-color {
    color: var(--dark-reverse)
}

.info-color {
    color: var(--info-color)
}

.gray-color {
    color: var(--gray-color)
}

.dark-color {
    color: var(--dark-color)
}

.facebook-color {
    color: #505cd6
}

.twitter-color {
    color: #1da1f2
}

.google-plus-color {
    color: #ea4335
}

.youtube-color {
    color: #e43e3c
}

.tumblr-color {
    color: #35465c
}

.instagram-color {
    color: #d43f8d
}

.android-color {
    color: #a4c639
}

.snapchat-color {
    color: #e2e62c
}

.whatsapp-color {
    color: #10d058
}

.pinterest-color {
    color: #bd081c
}

.linkedin-color {
    color: #0077b5
}

.behance-color {
    color: #1769ff
}

.apple-color {
    color: #dbebfa
}

.cloudflare-color {
    color: #faae40
}

.dribbble-color {
    color: #ea4c89
}

.envato-color {
    color: #82b541
}

.flicker-color {
    color: #0063dc
}

.github-color {
    color: #f5f5f5
}

.white-color {
    color: #FFF
}

.success-bg {
    background-color: var(--success-color);
    color: var(--dark-reverse)
}

.danger-bg {
    background-color: var(--danger-color);
    color: var(--dark-reverse)
}

.warning-bg {
    background-color: var(--warning-color);
    color: var(--dark-reverse)
}

.primary-bg {
    background-color: var(--primary-color);
    color: var(--dark-reverse)
}

.secondary-bg {
    background-color: var(--secondary-color);
    color: var(--dark-reverse)
}

.light-bg {
    background-color: var(--dark-reverse);
    color: var(--dark-color)
}

.info-bg {
    background-color: var(--info-color);
    color: var(--dark-reverse)
}

.gray-bg {
    background-color: var(--gray-color);
    color: var(--dark-reverse)
}

.dark-bg {
    background-color: var(--dark-color);
    color: var(--dark-reverse)
}

.facebook-bg {
    background-color: #505cd6;
    color: var(--dark-reverse)
}

.twitter-bg {
    background-color: #1da1f2;
    color: var(--dark-reverse)
}

.google-plus-bg {
    background-color: #ea4335;
    color: var(--dark-reverse)
}

.youtube-bg {
    background-color: #e43e3c;
    color: var(--dark-reverse)
}

.tumblr-bg {
    background-color: #35465c;
    color: var(--dark-reverse)
}

.instagram-bg {
    background-color: #d43f8d;
    color: var(--dark-reverse)
}

.android-bg {
    background-color: #a4c639;
    color: var(--dark-reverse)
}

.snapchat-bg {
    background-color: #e2e62c;
    color: var(--dark-reverse)
}

.whatsapp-bg {
    background-color: #10d058;
    color: var(--dark-reverse)
}

.pinterest-bg {
    background-color: #bd081c;
    color: var(--dark-reverse)
}

.linkedin-bg {
    background-color: #0077b5;
    color: var(--dark-reverse)
}

.behance-bg {
    background-color: #1769ff;
    color: var(--dark-reverse)
}

.apple-bg {
    background-color: #dbebfa;
    color: var(--dark-color)
}

.cloudflare-bg {
    background-color: #faae40;
    color: var(--dark-reverse)
}

.dribbble-bg {
    background-color: #ea4c89;
    color: var(--dark-reverse)
}

.envato-bg {
    background-color: #82b541;
    color: var(--dark-reverse)
}

.flicker-bg {
    background-color: #0063dc;
    color: var(--dark-reverse)
}

.github-bg {
    background-color: #f5f5f5;
    color: var(--dark-color)
}

.offwhite-smoke-bg {
    background-color: #F5F5F5;
    color: var(--dark-color)
}

.offwhite-snow-bg {
    background-color: #FFFAFA;
    color: var(--dark-color)
}

.offwhite-honeydew-bg {
    background-color: #F0FFF0;
    color: var(--dark-color)
}

.offwhite-mintcream-bg {
    background-color: #F5FFFA;
    color: var(--dark-color)
}

.offwhite-azure-bg {
    background-color: #F0FFFF;
    color: var(--dark-color)
}

.offwhite-aliceblue-bg {
    background-color: #F0F8FF;
    color: var(--dark-color)
}

.offwhite-ghost-bg {
    background-color: #F8F8FF;
    color: var(--dark-color)
}

.offwhite-seashell-bg {
    background-color: #FFF5EE;
    color: var(--dark-color)
}

.offwhite-beige-bg {
    background-color: #F5F5DC;
    color: var(--dark-color)
}

.offwhite-oldlace-bg {
    background-color: #FDF5E6;
    color: var(--dark-color)
}

.offwhite-floral-bg {
    background-color: #FFFAF0;
    color: var(--dark-color)
}

.offwhite-ivory-bg {
    background-color: #FFFFF0;
    color: var(--dark-color)
}

.offwhite-antique-bg {
    background-color: #FAEBD7;
    color: var(--dark-color)
}

.offwhite-linen-bg {
    background-color: #FAF0E6;
    color: var(--dark-color)
}

.offwhite-lavenderblush-bg {
    background-color: #FFF0F5;
    color: var(--dark-color)
}

.success-bg-light {
    background-color: var(--success-light);
    color: rgba(0, 0, 0, 0.5)
}

.danger-bg-light {
    background-color: var(--danger-light);
    color: rgba(0, 0, 0, 0.5)
}

.warning-bg-light {
    background-color: var(--warning-light);
    color: rgba(0, 0, 0, 0.5)
}

.info-bg-light {
    background-color: var(--info-light);
    color: rgba(0, 0, 0, 0.5)
}

.white-bg {
    background: #FFF;
    color: var(--dark-color)
}

.transparent {
    background-color: transparent
}

.tornado-header {
    width: 100%;
    position: relative;
    z-index: 100;
    background: var(--primary-dark)
}

.tornado-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../image/pattren-top.png") top center repeat-x;
    mix-blend-mode: soft-light
}

@media screen and (min-width: 1600px) {
    .tornado-header::before {
        background-size: 100% auto
    }
}

.tornado-header .container,
.tornado-header .container-fluid,
.tornado-header .container-xl {
    z-index: 2;
    position: relative
}

.tornado-header .container+hr,
.tornado-header .container-fluid+hr,
.tornado-header .container-xl+hr {
    margin: 0
}

.tornado-header .container.navigation-menu,
.tornado-header .container-fluid.navigation-menu,
.tornado-header .container-xl.navigation-menu {
    min-height: 0
}

.tornado-header .navigation-menu {
    z-index: 0;
    margin: auto
}

.tornado-header .navigation-menu>ul>li {
    font-size: 1rem;
    color: var(--dark-reverse)
}

.tornado-header .navigation-menu>ul>li:hover,
.tornado-header .navigation-menu>ul>li.active,
.tornado-header .navigation-menu>ul>li.current-menu-parent,
.tornado-header .navigation-menu>ul>li.current-menu-item {
    color: var(--dark-reverse);
    background: rgba(0, 0, 0, 0)
}

.tornado-header .navigation-menu li>ul,
.tornado-header .navigation-menu .megamenu {
    background: var(--dark-reverse)
}

.tornado-header .navigation-menu li>ul>li,
.tornado-header .navigation-menu .megamenu>li {
    color: var(--dark-color)
}

.tornado-header .navigation-menu li>ul>li:hover,
.tornado-header .navigation-menu li>ul>li.active,
.tornado-header .navigation-menu li>ul>li.current-menu-parent,
.tornado-header .navigation-menu li>ul>li.current-menu-item,
.tornado-header .navigation-menu .megamenu>li:hover,
.tornado-header .navigation-menu .megamenu>li.active,
.tornado-header .navigation-menu .megamenu>li.current-menu-parent,
.tornado-header .navigation-menu .megamenu>li.current-menu-item {
    background: var(--primary-color);
    color: var(--dark-reverse)
}

.tornado-header .navigation-menu .megamenu li {
    color: var(--dark-color)
}

.tornado-header .navigation-menu>ul {
    margin: 0 auto
}

.tornado-header .navigation-menu>ul>li {
    text-transform: uppercase;
    font-weight: normal;
    color: #FFF
}

.tornado-header .navigation-menu>ul>li>a::after,
.tornado-header .classic-blog .navigation-menu>ul>li>a.info::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #FFF;
    top: -15px;
    position: relative
}

.tornado-header .navigation-menu>ul>li.active>a::after,
.tornado-header .classic-blog .navigation-menu>ul>li.active>a.info::after,
.tornado-header .navigation-menu>ul>li>a:hover::after,
.tornado-header .classic-blog .navigation-menu>ul>li>a.info:hover::after,
.tornado-header .navigation-menu>ul>li.current-menu-parent>a::after,
.tornado-header .classic-blog .navigation-menu>ul>li.current-menu-parent>a.info::after,
.tornado-header .navigation-menu>ul>li.current-menu-item>a::after,
.tornado-header .classic-blog .navigation-menu>ul>li.current-menu-item>a.info::after {
    width: 70%
}

.tornado-header .logo img {
    max-height: 44px
}

@media (max-width: 1100px) {
    .tornado-header .logo img {
        max-width: 150px
    }
}

@media (max-width: 640px) {
    .tornado-header .logo img {
        max-width: 120px
    }
}

.tornado-header .action-btns .icon-btn {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
    line-height: 43px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    margin-left: 10px;
    position: relative;
    color: #FFF
}

@media (min-width: 1200px) {
    .tornado-header .action-btns .icon-btn.menu-btn:not(.collapsed) {
        display: none
    }
}

.tornado-header .action-btns .icon-btn[data-notifications]::after {
    content: attr(data-notifications);
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--dark-color);
    position: absolute;
    top: 50%;
    left: -5px
}

.tornado-header .action-btns .icon-btn:hover {
    background: var(--primary-color)
}

@media (max-width: 640px) {
    .tornado-header .action-btns .icon-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        line-height: 33px
    }
}

.tornado-header .dropdown .dropdown-list {
    left: auto;
    right: 0
}

.tornado-header .dropdown .dropdown-list::after,
.tornado-header .dropdown .dropdown-list::before {
    left: auto;
    right: 12px
}

@media (min-width: 768px) {
    .tornado-header .dropdown:hover .dropdown-list {
        -webkit-animation: dropOpen 0.5s both;
        animation: dropOpen 0.5s both;
        visibility: visible
    }
}

@media (max-width: 640px) {
    .tornado-header .dropdown {
        position: static
    }

    .tornado-header .dropdown .dropdown-list {
        margin-top: -1.125rem;
        width: 100%
    }

    .tornado-header .dropdown .dropdown-list::before {
        display: none
    }

    .tornado-header .dropdown .dropdown-list::after {
        display: none
    }
}

.tornado-header .search-box {
    display: inline-block;
    position: relative
}

@media (min-width: 768px) {
    .tornado-header .search-box {
        width: 270px
    }
}

@media (max-width: 640px) {
    .tornado-header .search-box {
        display: none
    }
}

.tornado-header .search-box.form-ui input {
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    color: #FFF;
    border-radius: 60px;
    padding-left: 40px;
    font-size: 14px
}

.tornado-header .search-box.form-ui input:focus {
    box-shadow: 0 0 10px var(--primary-color);
    transform: scale(1.04)
}

.tornado-header .search-box.form-ui input:focus+.search-btn {
    left: -5px
}

.tornado-header .search-box .search-btn {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 2px;
    background: transparent;
    color: var(--dark-reverse);
    width: 40px;
    border: 0 none;
    cursor: pointer;
    font-size: 15px;
    text-align: right
}

.tornado-header .btn {
    margin-left: 15px
}

.tornado-header .notifications-dropdown .dropdown-list {
    width: 260px;
    color: var(--typo-color);
    border: 0 none
}

.tornado-header .notifications-dropdown .dropdown-list li a {
    color: var(--primary-color)
}

.tornado-header .notifications-dropdown .dropdown-list .danger {
    color: var(--dark-color);
    background: var(--danger-light)
}

.tornado-header .notifications-dropdown .dropdown-list .warning {
    color: var(--dark-color);
    background: var(--warning-light)
}

.tornado-header.is-sticky .menu-btn {
    display: inline-block !important
}

.tornado-header.is-sticky .navigation-menu,
.tornado-header.is-sticky hr {
    display: none
}

@media (max-width: 1100px) {
    .tornado-header .navigation-menu {
        display: none
    }
}

.home-header {
    background: linear-gradient(var(--primary-hover), var(--primary-dark));
    position: relative
}

.home-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../image/pattren-top.png") 0 0 repeat-x;
    -webkit-animation: backgroundX 300s linear both infinite;
    animation: backgroundX 300s linear both infinite;
    mix-blend-mode: soft-light;
    z-index: 0
}

.home-header::after,
.classic-blog .home-header.info::after {
    content: '';
    background: #FFF;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    position: absolute
}

.home-header .tornado-header:not(.is-sticky) {
    background-color: transparent
}

.home-header .tornado-header:not(.is-sticky)::before {
    opacity: 0
}

.home-header+.media-section {
    padding-top: 30px
}

.featured-media {
    position: relative;
    z-index: 5
}

.featured-media .vertical-title {
    color: #FFF;
    line-height: 30px;
    font-size: 1.438rem;
    position: absolute;
    top: 0;
    border: 2px solid var(--dark-reverse);
    border-top: 0 none;
    border-bottom: 0 none;
    font-weight: 300;
    width: 2.1rem;
    text-align: center;
    left: -2.2rem
}

@media screen and (max-width: 1200px) {
    .featured-media .vertical-title {
        display: none
    }
}

@media screen and (max-width: 1280px) {
    .featured-media .vertical-title {
        left: -1.7rem
    }
}

@media screen and (max-width: 1024px) {
    .featured-media .vertical-title {
        left: 10px
    }
}

@media screen and (max-width: 1280px) {
    .featured-media {
        padding-left: 20px
    }
}

@media screen and (max-width: 1024px) {
    .featured-media {
        padding-left: 55px
    }
}

@media (max-width: 1100px) {
    .featured-media {
        padding: 0
    }
}

.subscribe-cta {
    padding-top: 50px;
    padding-bottom: 20px;
    background: var(--primary-color);
    color: #FFF;
    position: relative
}

.subscribe-cta::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../image/pattren-2.png") 0 0 repeat-x;
    mix-blend-mode: soft-light;
    z-index: 0
}

@media screen and (min-width: 1600px) {
    .subscribe-cta::before {
        background-size: 100% auto
    }
}

.subscribe-cta h2 {
    font-size: 1.875rem;
    border-bottom: 2px solid #FFF;
    line-height: 1.3;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
    color: inherit
}

.subscribe-cta p {
    font-size: 1.063rem;
    margin-bottom: 0;
    line-height: 1.3
}

.subscribe-cta p strong {
    font-size: 1rem;
    display: block
}

.subscribe-cta .cta-column::before {
    width: 100%;
    display: block;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 5px;
    padding-left: 5px
}

.subscribe-cta .cta-column .step {
    width: 35px;
    font-size: 1.875rem;
    line-height: 1.3;
    text-align: center;
    font-weight: var(--strong-weight)
}

.subscribe-cta .cta-column .step i {
    border-top: 2px solid #FFF;
    padding-top: 5px;
    display: block;
    font-size: 14px;
    font-weight: normal;
    font-style: normal
}

.subscribe-cta .cta-column h3 {
    font-size: 1.875rem;
    line-height: 1.3;
    width: calc(100% - 35px);
    padding-left: 15px;
    color: inherit
}

.subscribe-cta .cta-column h3 span {
    display: block;
    font-size: 1.188rem;
    font-weight: 300
}

.subscribe-cta .col-12 {
    margin-bottom: 30px
}

.media-section {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #FFF
}

.media-section.light-gray {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fcfcfc
}

.counter-cta {
    text-align: center;
    padding-top: 50px;
    background: url("../image/cbg.png") no-repeat center;
    background-size: cover;
    color: #FFF;
    border-bottom: 15px solid #f8b745
}

.counter-cta h3 {
    font-size: 1.5rem;
    font-weight: var(--medium-weight);
    line-height: 1.3;
    margin-bottom: 0;
    color: inherit
}

.counter-cta h2 {
    font-size: 1.75rem;
    font-weight: var(--normal-weight);
    line-height: 1.3;
    margin-bottom: 0;
    color: inherit
}

.counter-cta h2 strong {
    font-weight: var(--strong-weight)
}

.counter-cta h4 {
    font-size: 1.25rem;
    font-weight: var(--normal-weight);
    line-height: 1.3;
    margin-bottom: 0;
    color: inherit
}

.counter-cta .btn {
    margin-top: 20px;
    min-width: 200px;
    border-radius: 60px 60px 0 0;
    position: relative;
    top: 14px;
    background: #f8b745;
    font-size: 1rem
}

.area-head {
    margin-bottom: 20px
}

.area-head h2 {
    font-size: 1.3rem;
    line-height: 1.3;
    padding-top: 5px;
    padding-left: 10px;
    font-weight: normal;
    position: relative
}

.area-head h2::after,
.area-head .classic-blog h2.info::after,
.classic-blog .area-head h2.info::after {
    content: '';
    position: absolute;
    border-top: 2px solid var(--dark-color);
    border-left: 2px solid var(--dark-color);
    width: 25px;
    height: 27px;
    top: 0;
    left: 0
}

.media-slider-outer.tns-outer .tns-controls,
.related-slider-outer.tns-outer .tns-controls {
    position: absolute;
    bottom: 100%;
    right: 15px;
    transform: translateY(-55%)
}

@media (max-width: 1100px) {

    .media-slider-outer.tns-outer .tns-controls,
    .related-slider-outer.tns-outer .tns-controls {
        display: none
    }
}

.media-slider-outer.tns-outer .tns-controls button,
.related-slider-outer.tns-outer .tns-controls button {
    position: static;
    transform: unset;
    opacity: 1;
    width: 28px;
    height: 28px;
    padding: 0;
    padding-top: 5px;
    background: transparent;
    border-radius: 0;
    line-height: 1;
    color: var(--dark-color);
    border: 0 none
}

.media-slider-outer.tns-outer .tns-controls button::before,
.related-slider-outer.tns-outer .tns-controls button::before {
    font-size: 14px
}

.media-slider-outer.tns-outer .tns-controls button[data-controls="prev"],
.related-slider-outer.tns-outer .tns-controls button[data-controls="prev"] {
    border-top: 2px solid var(--dark-color);
    border-left: 2px solid var(--dark-color);
    padding-left: 5px;
    margin-right: 8px
}

.media-slider-outer.tns-outer .tns-controls button[data-controls="next"],
.related-slider-outer.tns-outer .tns-controls button[data-controls="next"] {
    border-top: 2px solid var(--dark-color);
    border-right: 2px solid var(--dark-color);
    padding-right: 5px
}

.related-slider-outer .media-block {
    margin-bottom: 30px
}

.area-title,
.media-story h3 {
    font-size: 1.375rem;
    margin-bottom: 20px
}

.page-head {
    text-align: center;
    background: #FFF;
    padding: 30px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.page-head h1 {
    font-size: 1.75rem;
    line-height: 1.5
}

.page-head .page-controls {
    max-width: 570px;
    margin: auto;
    margin-top: 15px
}

.page-head .page-controls span {
    background-color: #f5f5f5
}

.page-head .page-controls .btn:not(:nth-child(2)) {
    max-width: 150px
}

.page-head .page-controls .btn:first-child {
    border-radius: 50px 0 0 50px
}

.page-head .page-controls .btn:last-child {
    border-radius: 0 50px 50px 0
}

.page-head .tabs-menu {
    margin-bottom: -30px;
    margin-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.page-head .tabs-menu li {
    font-size: 15px;
    line-height: 25px;
    height: auto;
    padding: 5px;
    padding-top: 10px;
    margin-right: 20px
}

.page-head .tabs-menu li a {
    color: inherit
}

.page-head .tabs-menu li.active,
.page-head .tabs-menu li:hover {
    border-bottom: 5px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: var(--strong-weight);
    background-color: transparent
}

.media-block {
    position: relative
}

.media-block:not(.tns-item) {
    margin-bottom: 30px
}

@media screen and (min-width: 550px) and (max-width: 640px) {
    .media-block:not(.tns-item) {
        width: 50%
    }
}

.media-block .info,
.media-block .rating {
    position: absolute;
    z-index: 3
}

.media-block .image {
    padding-bottom: 150%;
    position: relative
}

.media-block .image::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: 100%;
    background: linear-gradient(transparent, #000);
    z-index: 1
}

.media-block .image::before {
    display: block;
    width: 42px;
    height: 42px;
    line-height: 40px;
    background: var(--secondary-color);
    font-size: 1rem;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    top: 15px;
    right: 15px;
    color: #FFF;
    text-align: center
}

.media-block .image.ti-file-photo::before {
    font-size: 1.3rem
}

.media-block .info {
    z-index: 2;
    padding: 1rem;
    color: #FFF;
    bottom: 0;
    left: 15px;
    right: 15px
}

.media-block .info h3,
.media-block .info h4 {
    font-size: 1rem;
    color: #FFF;
    line-height: 1
}

.media-block .info h3 {
    padding-bottom: 7px;
    border-bottom: 1px solid var(--dark-reverse);
    display: inline-block;
    max-width: 100%
}

.media-block .info h4 {
    font-weight: 300;
    padding-top: 1px
}

.media-block .rating {
    width: 90px;
    height: 92px;
    position: absolute;
    top: 0;
    left: 15px;
    color: var(--dark-reverse);
    background-size: 100% auto;
    font-size: 1.625rem;
    line-height: 1;
    padding-top: 15px;
    padding-left: 10px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="89px" height="92px"><path fill-rule="evenodd" fill="rgba(0,0,0,0.7)" d="M89.000,-0.001 C89.000,-0.001 79.359,34.696 57.214,57.587 C34.860,80.695 -0.000,91.999 -0.000,91.999 L-0.000,-0.001 L89.000,-0.001 Z"/></svg>')
}

.media-block .rating span {
    font-size: 13px;
    display: block;
    margin-bottom: 5px
}

.media-block.no-padding .rating {
    left: 0
}

.media-block.no-padding .info {
    right: 0;
    left: 0
}

.featured-media .media-block .image::before {
    bottom: 20px;
    right: 20px;
    top: auto;
    background: var(--primary-color)
}

.featured-media .media-block .info {
    padding: 30px;
    left: 0;
    right: 0
}

.featured-media .media-block h3,
.featured-media .media-block h4 {
    font-size: 1.125rem
}

.featured-media .media-block .rating {
    left: 0;
    color: var(--dark-reverse);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="89px" height="92px"><path fill-rule="evenodd" fill="rgba(var(--secondary-color), 0.98)" d="M89.000,-0.001 C89.000,-0.001 79.359,34.696 57.214,57.587 C34.860,80.695 -0.000,91.999 -0.000,91.999 L-0.000,-0.001 L89.000,-0.001 Z"/></svg>')
}

.relted-mb .media-block {
    margin-bottom: 30px
}

.blog-block:not(.tns-item) {
    margin-bottom: 30px
}

.blog-block .content-box {
    position: relative;
    background-color: #FFF;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 100%
}

.blog-block .content-box .image {
    padding-bottom: 76.36%;
    margin-bottom: 15px
}

.blog-block .content-box h3 {
    font-size: 1rem;
    color: var(--dark-color);
    line-height: 1.4;
    margin-bottom: 5px;
    max-height: 45px;
    overflow: hidden
}

.blog-block .content-box p {
    font-size: 15px;
    line-height: 22px;
    color: var(--gray-color);
    margin-bottom: 0;
    max-height: 66px;
    overflow: hidden
}

.blog-block .content-box .date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="76px" height="88px"><path fill-rule="evenodd"  opacity="0.902" fill="rgba(var(--primary-color), 0.9)" d="M-0.000,-0.000 L75.689,-0.000 C75.689,-0.000 78.955,36.539 63.738,61.307 C44.971,91.852 -0.000,87.818 -0.000,87.818 L-0.000,57.993 L-0.000,-0.000 Z"/></svg>');
    background-size: 100%;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 12px;
    padding-bottom: 20px;
    text-align: center;
    color: #FFF;
    font-size: 1.3rem;
    line-height: 1
}

.blog-block .content-box .date span {
    display: block;
    font-size: 0.9rem
}

.main-footer {
    background: #473273 url("../image/footer.png") repeat-x top center;
    background-blend-mode: soft-light;
    color: #FFF;
    padding-top: 50px
}

.main-footer .col-12>h3 {
    margin-bottom: 30px;
    font-size: 1.3rem;
    line-height: 1.3;
    padding-top: 5px;
    padding-left: 10px;
    font-weight: normal;
    position: relative;
    display: inline-block;
    color: inherit
}

.main-footer .col-12>h3::after,
.main-footer .classic-blog .col-12>h3.info::after {
    content: '';
    position: absolute;
    border-top: 2px solid var(--dark-reverse);
    border-left: 2px solid var(--dark-reverse);
    width: 25px;
    height: 27px;
    top: 0;
    left: 0
}

.main-footer .col-12>h3::before {
    content: '';
    width: 65px;
    height: 1px;
    background: #FFF;
    position: absolute;
    top: 100%;
    margin-top: 5px;
    right: 0
}

.main-footer ul {
    margin-bottom: 30px
}

.main-footer .small-media {
    margin-bottom: 15px
}

.main-footer .small-media .image {
    width: 60px;
    height: 60px
}

.main-footer .small-media .info {
    width: calc(100% - 60px);
    padding-left: 10px
}

.main-footer .small-media .info h3,
.main-footer .small-media .info h4,
.main-footer .small-media .info .more-btn {
    font-weight: normal;
    color: #FFF;
    line-height: 1
}

.main-footer .small-media .info h3 {
    font-size: 15px;
    margin-bottom: 7px
}

.main-footer .small-media .info h4,
.main-footer .small-media .info .more-btn {
    font-size: 14px
}

.main-footer .small-media .info .more-btn {
    color: var(--secondary-color)
}

.main-footer .navigation-menu {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent;
    padding: 0;
    margin: 0
}

.main-footer .navigation-menu .logo {
    display: none
}

.main-footer .navigation-menu ul {
    margin: 0
}

.main-footer .navigation-menu>ul>li {
    color: #FFF
}

.main-footer .navigation-menu>ul>li a {
    color: inherit
}

@media (max-width: 640px) {
    .main-footer {
        padding-bottom: 30px
    }
}

.main-footer .banner {
    display: block
}

@media screen and (min-width: 550px) and (max-width: 640px) {
    .main-footer .col-12 {
        width: 50%
    }
}

.copyrights {
    background: #1b1b1b;
    color: #FFF;
    padding: 10px 0
}

.copyrights .container {
    line-height: 32px
}

.copyrights p {
    margin: 0;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle
}

@media (max-width: 640px) {
    .copyrights p {
        display: none
    }
}

.copyrights img {
    max-height: 30px
}

@media (max-width: 640px) {
    .copyrights .tooltip {
        margin: auto;
        display: block
    }
}

.copyrights .tooltip::after {
    right: 0;
    left: auto;
    transform: translate(0)
}

.filters-section {
    padding-top: 30px;
    background: #FFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.filters-section .sorting-by,
.filters-section .alphabet-sorting {
    font-size: 1.063rem;
    line-height: 1.063rem;
    color: #7a7a7b;
    margin-bottom: 15px
}

.filters-section .sorting-by li,
.filters-section .alphabet-sorting li {
    padding: 0 15px;
    margin-bottom: 5px
}

.filters-section .sorting-by li:not(:last-child),
.filters-section .alphabet-sorting li:not(:last-child) {
    border-right: 1px solid #c7c7c7
}

.filters-section .sorting-by li a,
.filters-section .alphabet-sorting li a {
    color: inherit
}

.filters-section .sorting-by li a:hover,
.filters-section .alphabet-sorting li a:hover {
    color: var(--primary-color)
}

@media (max-width: 1100px) {

    .filters-section .sorting-by li,
    .filters-section .alphabet-sorting li {
        margin-bottom: 10px
    }
}

.filters-section .sorting-by.alphabet-sorting,
.filters-section .alphabet-sorting.alphabet-sorting {
    margin-bottom: 25px
}

.filters-section .sorting-by.alphabet-sorting li,
.filters-section .alphabet-sorting.alphabet-sorting li {
    padding: 0
}

.filters-section .sorting-by.alphabet-sorting li a,
.filters-section .alphabet-sorting.alphabet-sorting li a {
    padding: 0 10px
}

.filters-section .advanced-search {
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.filters-section .advanced-search h2 {
    font-size: 1rem;
    line-height: 52px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center
}

.filters-section .advanced-search h2 i {
    padding: 0 5px;
    font-size: 14px;
    position: relative;
    top: -3px;
    display: inline-block;
    vertical-align: middle
}

.filters-section .advanced-search h2.active i {
    transform: rotate(180deg);
    top: 1px
}

.filters-section .advanced-search .advanced-search-form {
    display: none;
    padding: 30px 15px;
    transition: padding 0.3s linear
}

.filters-section .advanced-search .advanced-search-form input:not(.btn),
.filters-section .advanced-search .advanced-search-form .form-control,
.filters-section .advanced-search .advanced-search-form .file-input {
    border-radius: 52px
}

.filters-section .advanced-search .advanced-search-form .buttons .btn {
    width: 50%
}

.filters-section .advanced-search .advanced-search-form .buttons .btn:first-child {
    border-radius: 52px 0 0 52px
}

.filters-section .advanced-search .advanced-search-form .buttons .btn:last-child {
    border-radius: 0 52px 52px 0
}

@media screen and (min-width: 550px) and (max-width: 640px) {
    .filters-section .advanced-search .advanced-search-form .col-12 {
        width: 50%
    }
}

.fake-box {
    height: 200px;
    background: #FFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: -200px
}

.fake-box.h100 {
    height: 150px;
    margin-bottom: -150px
}

.media-details {
    position: relative
}

.media-details .page-content {
    position: static
}

.widget-sidebar .poster {
    padding-bottom: 150%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0 none;
    position: relative
}

.widget-sidebar .poster::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    line-height: 110px;
    font-size: 50px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #FFF;
    text-align: center
}

@media (max-width: 640px) {
    .widget-sidebar .poster::before {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 25px
    }
}

.widget-sidebar .poster.ti-file-play::before {
    background: var(--primary-color)
}

@media (min-width: 768px) {
    .widget-sidebar {
        max-width: 340px
    }
}

.media-info {
    font-size: 15px;
    line-height: 24px;
    background: #FFF;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.media-info li {
    padding: 10px 20px;
    color: var(--gray-color);
    font-weight: var(--strong-weight);
    margin: 0
}

.media-info li span {
    color: var(--secondary-color)
}

.media-info li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.media-share {
    margin-bottom: 15px
}

.media-share>li {
    color: #FFF;
    font-size: 15px;
    line-height: 46px;
    margin-bottom: 5px
}

.media-share>li:not(.chapter-select) {
    padding-right: 20px
}

.media-share>li a {
    color: inherit;
    display: block;
    line-height: inherit
}

.media-share>li a::before {
    display: inline-block;
    width: 52px;
    height: 46px;
    line-height: inherit;
    background: rgba(0, 0, 0, 0.05);
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    margin-right: 20px
}

.media-share>li.chapter-select select {
    margin-bottom: 5px;
    background-color: var(--secondary-color)
}

.media-title {
    padding-top: 25px;
    padding-bottom: 25px;
    margin-bottom: 15px;
    max-width: 400px
}

.media-title h1 {
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: var(--strong-weight)
}

.media-title h3 {
    font-size: 1.125rem;
    color: var(--gray-color);
    line-height: 1.5;
    font-weight: normal
}

.media-title .media-rating {
    font-size: 18px;
    color: #dbdbdb;
    line-height: 1;
    word-spacing: 5px
}

.media-title .media-rating .active {
    color: var(--secondary-color)
}

.media-statistic {
    background: var(--primary-color);
    color: #FFF;
    border-radius: 10px
}

.media-statistic.secondary {
    background-color: var(--secondary-color)
}

.media-statistic h4 {
    position: relative;
    padding: 25px 20px;
    font-size: 1.9rem;
    text-align: center;
    line-height: 1;
    font-weight: var(--normal-weight);
    color: inherit
}

@media screen and (max-width: 1200px) {
    .media-statistic h4 {
        padding: 15px
    }
}

.media-statistic h4 span {
    display: block;
    font-size: 1.125rem;
    margin-top: 5px
}

.media-statistic h4::before {
    font-size: 60px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.1
}

@media screen and (max-width: 1200px) {
    .media-statistic h4::before {
        top: 10px
    }
}

@media (min-width: 1200px) {
    .media-statistic {
        position: absolute;
        top: 50px;
        right: 0;
        padding: 5px 50px;
        border-radius: 150px 0 0 150px
    }
}

.media-story {
    padding-top: 40px
}

.media-story h3 {
    margin-bottom: 10px
}

.media-story p {
    font-size: 1rem;
    margin-bottom: 30px
}

.media-btns {
    margin-bottom: 15px
}

.media-btns .media-btn {
    margin-bottom: 15px;
    padding: 15px 20px;
    margin-right: 15px;
    line-height: 1;
    font-size: 14px;
    font-weight: var(--strong-weight);
    color: #FFF;
    text-align: center;
    display: inline-block;
    vertical-align: middle
}

.media-btns .media-btn::before {
    display: block;
    line-height: 32px;
    font-size: 25px;
    margin-bottom: 5px
}

.media-btns .media-btn.love-bg {
    background-color: #f96565
}

.media-btns .media-btn.checked-bg {
    background-color: #6ed37a
}

.media-btns .media-btn.blue-bg {
    background-color: #65b8f9
}

.media-btns .media-btn.active {
    background-color: #dcdcdc;
    color: var(--gray-color)
}

.tags {
    margin-bottom: 20px
}

.tags h3.area-title,
.tags .media-story h3,
.media-story .tags h3 {
    margin-bottom: 15px
}

.tags a {
    padding: 0 15px;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--typography-color);
    margin-bottom: 10px;
    margin-right: 5px;
    line-height: 36px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle
}

.tags a:hover {
    background: var(--primary-color);
    color: #FFF
}

.comments-form {
    margin-bottom: 30px
}

.comments-form input:not(.btn),
.comments-form select {
    border-radius: 52px
}

.comments-form textarea {
    max-height: 100px;
    height: 120px;
    border-radius: 15px
}

.comments-list {
    margin-bottom: 10px
}

.comments-list .comment-block {
    margin-bottom: 20px;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px
}

.comments-list .comment-block .info {
    margin: -20px;
    margin-bottom: 20px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.comments-list .comment-block .info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle
}

.comments-list .comment-block .info h3 {
    display: inline-block;
    font-size: 14px;
    color: var(--primary-color);
    line-height: 1.5;
    vertical-align: middle
}

.comments-list .comment-block .info h3 span {
    display: block;
    font-weight: normal;
    color: var(--gray-color)
}

.comments-list .comment-block p {
    margin-bottom: 0;
    font-size: 15px;
    color: var(--gray-color);
    line-height: 1.5
}

.chapters-list {
    margin-bottom: 30px;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.chapters-list li {
    padding: 15px 20px;
    margin: 0
}

.chapters-list li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.chapters-list li .title {
    display: block;
    width: calc(100% - 72px)
}

.chapters-list li h3 {
    margin: 0;
    font-size: 1.063rem;
    color: var(--dark-color);
    line-height: 1.5
}

.chapters-list li h3 span {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-color);
    font-weight: normal;
    text-transform: none
}

.chapters-list li .read-btn {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 30px;
    font-size: 22px;
    color: var(--typography-color)
}

.chapters-list+.pagination {
    margin-bottom: 25px
}

.download-list {
    margin-bottom: 30px
}

@media screen and (min-width: 550px) and (max-width: 640px) {
    .download-list {
        width: 50%
    }
}

.download-list.green .content-box {
    background-color: #6ed37a
}

.download-list.blue .content-box {
    background-color: #65b8f9
}

.download-list.primary .content-box {
    background-color: var(--primary-color)
}

.download-list.secondary .content-box {
    background-color: var(--secondary-color)
}

.download-list .content-box {
    color: #FFF
}

.download-list .content-box li {
    font-size: 15px;
    line-height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0
}

.download-list .content-box li:hover {
    background-color: rgba(0, 0, 0, 0.03)
}

.download-list .content-box li a {
    color: inherit;
    display: block;
    line-height: inherit
}

.download-list .content-box li.title {
    text-align: center;
    font-size: 19px;
    font-weight: var(--strong-weight)
}

.media-player {
    margin-bottom: 30px
}

.media-player .server-list {
    font-size: 15px;
    line-height: 48px;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 0 none;
    border-bottom: 0 none;
    color: #717171
}

.media-player .server-list a {
    color: inherit
}

.media-player .server-list li {
    padding: 0 20px;
    margin: 0
}

.media-player .server-list li.active,
.media-player .server-list li:hover {
    background: var(--primary-color);
    color: #FFF
}

@media (max-width: 640px) {
    .media-player .server-list li {
        width: 33.333%;
        flex-grow: 1;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center
    }
}

@media (max-width: 480px) {
    .media-player .server-list li {
        width: 50%
    }
}

.media-player .episode-list {
    background: var(--primary-color);
    border-top: 1px solid #FFF
}

.media-player .episode-list .search-wraper {
    position: relative;
    background-color: rgba(0, 0, 0, 0.2)
}

.media-player .episode-list .search-wraper input {
    height: 48px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 15px;
    color: #FFF;
    padding-left: 40px
}

.media-player .episode-list .search-wraper::before {
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    line-height: 46px;
    height: 48px;
    width: 48px;
    text-align: center
}

.media-player .episode-list .episodes a {
    display: block;
    padding: 0 20px;
    font-size: 15px;
    line-height: 42px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #FFF
}

.media-player .episode-list .episodes a.active {
    background-color: var(--secondary-color)
}

@media (max-width: 1100px) {
    .media-player .col-l-3 {
        display: none
    }

    .media-player .col-l-9 {
        width: 100%
    }
}

.classic-blog {
    margin-bottom: 30px;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px
}

.classic-blog .image {
    width: 100%;
    padding-bottom: 100%
}

@media (min-width: 768px) {
    .classic-blog .image {
        width: 350px;
        padding-bottom: 42.5%
    }
}

@media (min-width: 768px) {
    .classic-blog .info {
        width: calc(100% - 350px);
        padding-left: 20px
    }
}

.classic-blog .info h3 {
    font-size: 1.188rem;
    line-height: 1.875rem;
    margin-bottom: 10px;
    max-height: 3.4rem;
    overflow: hidden;
    color: var(--dark-color)
}

.classic-blog .info p {
    font-size: 15px;
    line-height: 24px;
    max-height: 192px;
    overflow: hidden;
    color: var(--gray-color)
}

.classic-blog .blog-info {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    padding: 5px 25px;
    font-weight: var(--strong-weight);
    background: #ededed;
    color: var(--gray-color);
    border-radius: 80px
}

.classic-blog .blog-info span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.classic-blog .blog-info span::before {
    position: relative;
    top: -2px;
    font-size: 16px;
    margin-right: 5px
}

.classic-blog .btn {
    line-height: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    min-width: 100px;
    float: right
}

.fakeScroll__scope {
    overflow: visible !important;
    position: relative
}

.fakeScroll__wrap {
    overflow: hidden;
    height: 100%;
    position: relative;
    z-index: 1
}

.fakeScroll__content {
    right: 0;
    height: 100%;
    width: calc(100% + 18px);
    position: relative;
    overflow: auto;
    box-sizing: border-box
}

.fakeScroll__track {
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    cursor: default;
    background-color: rgba(0, 0, 0, 0.5)
}

.fakeScroll__bar {
    position: relative;
    background: var(--secondary-color);
    width: 100%;
    right: 0;
    top: 0;
    z-index: 0;
    transition: background 0.1s;
    cursor: -webkit-grab
}

.fakeScroll__bar:hover {
    background: rgba(0, 0, 0, 0.2)
}

.fakeScroll__bar.fakeScroll--grabbed {
    cursor: -webkit-grabbing;
    background: white
}

body.fakeScroll--grabbed {
    cursor: -webkit-grabbing;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.reader-wraper {
    position: relative
}

@media (max-width: 1100px) {
    .reader-wraper {
        margin-bottom: 30px
    }
}

.reader-wraper .reader-navigation {
    font-size: 15px;
    line-height: 52px;
    color: #FFF;
    background-color: var(--primary-color);
    padding: 0 5px
}

.reader-wraper .reader-navigation a {
    color: inherit;
    padding: 0 15px;
    display: inline-block
}

.reader-wraper .reader-navigation a::before {
    position: relative;
    top: -2px;
    line-height: inherit
}

.reader-wraper .reader-navigation a.prev-btn::before {
    margin-right: 5px
}

.reader-wraper .reader-navigation a.next-btn::before {
    margin-left: 5px;
    float: right;
    top: 0
}

.reader-wraper .reader-list img {
    width: 100%
}

@media (min-width: 1200px) {
    .reader-wraper .col-l-3 {
        max-width: 300px
    }

    .reader-wraper .col-l-9 {
        flex-grow: 1
    }
}

.reader-wraper.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
    padding: 30px
}

.reader-wraper.full-screen .reader-list {
    height: calc(100vh - 164px);
    overflow-x: hidden;
    overflow-y: auto
}

.reader-wraper .tornado-select {
    margin-bottom: 0
}

.manga-read-btns {
    width: 100%
}

.manga-read-btns>li {
    width: 100%
}

@media (max-width: 1100px) {
    .manga-read-btns>li {
        width: 33.333%
    }
}

@media (max-width: 640px) {
    .manga-read-btns>li {
        width: 50%
    }
}

@media screen and (max-width: 360px) {
    .manga-read-btns>li {
        width: 100%
    }
}

.manga-read-btns>li .tornado-select .form-control,
.manga-read-btns>li .tornado-select .file-input {
    border-radius: 0;
    line-height: 46px;
    height: 46px;
    background-color: var(--secondary-color);
    color: #FFF
}

.manga-read-btns>li .tornado-select .arrow-icon {
    line-height: 46px
}

.manga-read-btns>li .tornado-select .arrow-icon svg .arrow-color {
    fill: #FFF
}

.manga-read-btns>li .tornado-select .options-list li {
    line-height: 1.5
}

.blog-details {
    padding: 25px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 30px
}

.blog-details .cover-image {
    margin-bottom: 20px;
    display: block
}

.blog-details .blog-info {
    background-color: #ededed;
    font-size: 14px;
    color: #a3a3a3;
    line-height: 40px;
    border-radius: 80px;
    padding: 0 25px
}

.blog-details .blog-info .info span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.blog-details .blog-info .info span::before {
    position: relative;
    top: -2px;
    margin-right: 5px
}

.blog-details .blog-info .social-share {
    font-size: 15px;
    line-height: 40px
}

.blog-details .blog-info .social-share a {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
    color: inherit
}

.blog-details .blog-info .social-share a::before {
    position: relative;
    top: -2px
}

@media (max-width: 480px) {
    .blog-details .blog-info {
        display: none
    }
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5 {
    margin-bottom: 10px;
    line-height: 1.4
}

.rich-content ul:not(.check-list),
.rich-content ol:not(.check-list),
.rich-content ol.tornado-ui:not(.check-list),
.rich-content ul.tornado-ui:not(.check-list) {
    margin-right: 15px;
    margin-left: 15px;
    padding: 0 15px;
    font-weight: var(--strong-weight)
}

@media (max-width: 640px) {
    .rich-content p {
        font-size: 15px
    }
}

.rich-content .wp-block-paragraph.hidden,
.rich-content h2.hidden,
.rich-content h3.hidden,
.rich-content h4.hidden {
    display: block;
    padding: 0;
    margin: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden
}

.rich-content .social-btns {
    padding: 15px 30px;
    margin: -30px -30px;
    margin-top: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center
}

.rich-content .social-btns strong {
    font-size: 15px;
    line-height: 38px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.rich-content .social-btns>a {
    margin: 0 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px
}

.rich-content .tags-wraper {
    margin: 0 -30px;
    padding: 15px 30px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.rich-content .tags-wraper h3 {
    font-size: 1.25rem;
    margin-bottom: 5px
}

.rich-content .tags-wraper .badge {
    margin-right: 10px;
    margin-bottom: 10px
}

.widget-block {
    margin-bottom: 30px;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px
}

.widget-block .widget-title {
    font-size: 1rem;
    line-height: 48px;
    margin: -20px;
    margin-bottom: 20px;
    color: #FFF;
    background: var(--primary-color);
    padding: 0 20px
}

.widget-block ul {
    margin: -20px;
    font-size: 15px;
    line-height: 40px
}

.widget-block ul li {
    padding: 0 20px;
    color: var(--dark-color)
}

.widget-block ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.widget-block ul li a {
    color: inherit
}

.widget-block ul li.blog-item {
    line-height: 1.5;
    padding: 10px 20px
}

.widget-block ul li.blog-item h3 {
    font-size: 15px;
    font-weight: var(--strong-weight)
}

.widget-block ul li.blog-item span {
    font-size: 13px;
    line-height: 25px;
    color: var(--gray-color);
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.widget-block ul li.blog-item span::before {
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px
}

.widget-block.weakly-blog .image {
    padding-bottom: 75%;
    margin-bottom: 10px
}

.widget-block.weakly-blog h3 {
    font-size: 15px;
    font-weight: var(--strong-weight)
}

.widget-block.weakly-blog span {
    font-size: 13px;
    line-height: 25px;
    color: var(--gray-color);
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.widget-block.weakly-blog span::before {
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px
}

.widget-block.weakly-blog .btn {
    margin-top: 8px;
    height: 36px;
    line-height: 36px;
    font-size: 14px
}

.widget-block .search-box .input-wrap {
    position: relative
}

.widget-block .search-box .input-wrap input:not(.btn) {
    border-radius: 60px;
    margin-bottom: 0
}

.widget-block .search-box .input-wrap button,
.widget-block .search-box .input-wrap .btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 3px;
    width: 40px;
    border: 0 none;
    background-color: transparent;
    color: var(--gray-color);
    cursor: pointer
}

.widget-block .info-list {
    font-size: 14px;
    line-height: 22px;
    padding: 15px
}

.widget-block .info-list li {
    position: relative;
    padding: 6px 0;
    padding-left: 25px;
    color: var(--gray-color)
}

.widget-block .info-list li a {
    color: var(--primary-color)
}

.widget-block .info-list li:not(:last-child) {
    border: 0 none
}

.widget-block .info-list li::before {
    position: absolute;
    top: 6px;
    left: 0;
    width: 20px;
    text-align: center;
    line-height: inherit
}

.widget-block .info-list li.ti-lead-pencil::before {
    top: 7px
}

.forums-list .forum-block {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #FFF
}

.forums-list .forum-block:not(:last-child) {
    border-bottom: 0 none
}

.forums-list .forum-block .image {
    width: 60px;
    margin-bottom: 15px
}

.forums-list .forum-block .image img {
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.forums-list .forum-block .title {
    width: calc(100% - 60px);
    padding-left: 15px;
    margin-bottom: 15px
}

.forums-list .forum-block .title h3 {
    font-size: 1rem;
    color: var(--dark-color)
}

.forums-list .forum-block .title p {
    font-size: 15px;
    color: var(--gray-color);
    margin-bottom: 0
}

.forums-list .forum-block .info {
    background-color: #ededed;
    font-size: 14px;
    color: #a3a3a3;
    line-height: 36px;
    border-radius: 80px;
    padding: 0 25px;
    width: 100%
}

@media (max-width: 640px) {
    .forums-list .forum-block .info {
        display: none
    }
}

.forums-list .forum-block .info span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.forums-list .forum-block .info span::before {
    position: relative;
    top: -2px;
    margin-right: 5px
}

.tabel-note {
    font-size: 14px;
    color: var(--gray-color)
}

.topics-list {
    margin-bottom: 30px
}

.topics-list img {
    width: 20px;
    height: 20px;
    border-radius: 50%
}

.topics-list .table {
    background-color: #fff
}

.topics-list table td:nth-child(1) {
    width: calc(60% - 100px)
}

.topics-list table td:nth-child(4) {
    width: calc(40% - 100px)
}

.topics-list table td:nth-child(2),
.topics-list table td:nth-child(3) {
    width: 100px;
    text-align: center;
    font-weight: var(--strong-weight);
    font-size: 20px;
    color: var(--gray-color);
    line-height: 40px
}

.topics-list table.bordered thead:not([class*="-bg"]) td:not([class*="-bg"]) {
    padding: 10px 15px;
    line-height: 20px;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--gray-color);
    background-color: #f8f8f8;
    font-weight: normal
}

.topics-list h3 {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
    font-weight: normal
}

.topics-list h3+.author {
    font-size: 13px
}

.topics-list .author,
.topics-list .time {
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-color);
    display: block
}

.topics-list .author:not(:last-child),
.topics-list .time:not(:last-child) {
    margin-bottom: 5px
}

.topics-list .time {
    color: var(--primary-color)
}

.topics-list .badge {
    font-size: 12px;
    line-height: 19px;
    height: 20px;
    padding: 0 10px
}

.topics-list .pinned-topic td:first-child {
    padding-left: 35px;
    position: relative
}

.topics-list .pinned-topic td:first-child .ti-bookmark::before {
    position: absolute;
    top: 0.6rem;
    font-size: 1rem;
    left: 15px;
    color: var(--secondary-color)
}

@media (max-width: 640px) {
    .topics-list .table.bordered {
        width: 100%
    }

    .topics-list .table.bordered td:nth-child(4) {
        display: none
    }

    .topics-list .table.bordered td:nth-child(1) {
        width: calc(100% - 200px)
    }
}

@media screen and (max-width: 480px) {
    .topics-list .table.bordered {
        width: 100%
    }

    .topics-list .table.bordered td:nth-child(2),
    .topics-list .table.bordered td:nth-child(3) {
        display: none
    }

    .topics-list .table.bordered td:nth-child(1) {
        width: 100%
    }
}

.topic-details {
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 30px
}

.topic-details .auther-side {
    padding: 20px 25px;
    background-color: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.topic-details .auther-side .auther-name .avatar {
    width: 100px
}

.topic-details .auther-side .auther-name .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%
}

.topic-details .auther-side .auther-name .username {
    padding-left: 15px;
    text-align: center
}

.topic-details .auther-side .auther-name .username h5 {
    font-size: 18px;
    color: var(--primary-color)
}

.topic-details .auther-side .auther-name .username span {
    display: block
}

.topic-details .auther-side .auther-name .username span:not(.btn) {
    font-size: 13px
}

.topic-details .auther-side .auther-name .username .btn {
    line-height: 30px;
    height: 30px
}

.topic-details .auther-side .auther-info {
    max-width: 300px;
    font-size: 14px;
    line-height: 25px;
    color: var(--gray-color)
}

.topic-details .auther-side .auther-info li {
    width: 50%
}

.topic-details .auther-side .auther-info span {
    color: var(--primary-color)
}

@media (max-width: 640px) {
    .topic-details .auther-side .auther-info {
        display: none
    }
}

.topic-details .content-box {
    padding: 25px;
    font-size: 15px
}

.topic-details .content-box p:last-child {
    margin-bottom: 0
}

.topic-details .content-box .title {
    margin: -25px;
    margin-bottom: 25px;
    padding: 10px 25px;
    font-size: 15px;
    line-height: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.topic-details .content-box .title span {
    float: right;
    line-height: inherit;
    font-size: 13px;
    color: var(--gray-color)
}

@media (max-width: 640px) {
    .topic-details .content-box .title span {
        display: none
    }
}

.topic-details .content-box .title span::before {
    margin-right: 5px;
    top: -2px
}

.topic-details.topic-replay .auther-side {
    width: 100%
}

.topic-details.topic-replay .content-box {
    width: 100%
}

@media (min-width: 768px) {
    .topic-details.topic-replay .auther-side {
        width: 200px;
        align-content: flex-start;
        border-bottom: 0 none;
        border-right: 1px solid rgba(0, 0, 0, 0.1)
    }

    .topic-details.topic-replay .auther-side .avatar {
        text-align: center;
        margin: auto;
        margin-bottom: 15px
    }

    .topic-details.topic-replay .auther-side .auther-name,
    .topic-details.topic-replay .auther-side .auther-info,
    .topic-details.topic-replay .auther-side .auther-info li {
        width: 100%
    }

    .topic-details.topic-replay .auther-side .auther-name {
        margin-bottom: 15px
    }

    .topic-details.topic-replay .auther-side .auther-name h5 {
        font-size: 1rem
    }

    .topic-details.topic-replay .auther-side .auther-name .username {
        padding: 0
    }

    .topic-details.topic-replay .content-box {
        width: calc(100% - 200px)
    }
}

.replay-editor {
    margin-top: 30px
}

.replay-editor .action-btns {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0 none;
    font-size: 15px;
    line-height: 46px;
    color: var(--dark-color);
    padding: 0 10px
}

.replay-editor .action-btns a {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    width: 32px;
    text-align: center
}

.replay-editor textarea {
    border-radius: 0;
    height: 90px
}

.profile-menu {
    margin-bottom: 30px;
    max-width: 330px
}

.profile-menu .content-box {
    padding: 20px 25px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.profile-menu .content-box .user-name {
    margin-bottom: 20px
}

.profile-menu .content-box .user-name .avatar {
    width: 70px
}

.profile-menu .content-box .user-name .avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%
}

.profile-menu .content-box .user-name .username {
    max-width: calc(100% - 70px);
    padding-left: 15px;
    text-align: center
}

.profile-menu .content-box .user-name .username h5 {
    font-size: 16px;
    color: var(--primary-color)
}

.profile-menu .content-box .user-name .username span {
    display: block
}

.profile-menu .content-box .user-name .username span:not(.btn) {
    font-size: 13px
}

.profile-menu .content-box .user-name .username .btn {
    line-height: 28px;
    height: 28px;
    font-size: 13px;
    padding: 0 15px
}

.profile-menu .content-box .profile-info {
    margin: -20px -25px;
    margin-top: 0;
    font-size: 14px;
    line-height: 25px;
    color: var(--gray-color);
    font-weight: var(--medium-weight)
}

.profile-menu .content-box .profile-info li {
    padding: 10px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.profile-menu .content-box .profile-info li span {
    color: var(--primary-color)
}

.profile-menu .content-box .profile-info li .btn {
    font-size: 14px
}

.profil-tabs {
    font-size: 15px;
    line-height: 25px;
    margin-top: 60px;
    margin-bottom: 30px
}

.profil-tabs li {
    padding: 5px;
    margin-right: 10px
}

.profil-tabs li a {
    color: inherit
}

.profil-tabs li.active {
    border-bottom: 5px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: var(--strong-weight)
}

@media (max-width: 1100px) {
    .sidebar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 30px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .sidebar>* {
        width: calc(50% - 15px)
    }

    .sidebar .media-share {
        display: none
    }
}

@media screen and (max-width: 480px) {
    .sidebar>* {
        width: 100%
    }
}

.page-content {
    padding-top: 50px;
    padding-bottom: 50px
}

.login .content-box {
    padding: 25px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.login .content-box hr {
    opacity: 0.1
}

/*# sourceMappingURL=tornado.css.map */