/* HOVER BLOCK */

.hover-block {
    position: absolute;
    top: 2em;
    left: 0;
    padding: 10px;
    transition: .5s;
    visibility: hidden;
    opacity: 0;
    transition-delay: .1s;
    z-index: 100
}

.hover-block-wrapper {

}

.hover-block-wrapper:hover .hover-block {
    visibility: visible;
    top: 2.5em;
    opacity: 1;
    transition-delay: .5s;
}

[data-id="copy"] {
    cursor: pointer;
}

/* AJAX PRELOADER */

.ajax-preloader {
    display: flex;
    width: 100%;
    height: 100%;
    background: #EDEDED url('../images/gallery-preloader.svg') no-repeat center;
    background-size: 150px 150px;
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 1;
    transition: .5s;
    z-index: 110;
}

.ajax-preloader.line {
    background-size: 1.5em 1.5em;
}

.ajax-preloader-hide {
    opacity: 0;
}

/* TABS */

.tabs-container {
    width: 100%
}


.tabs-container .tabs-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tabs-container .tabs-content .tab:not(.active) {
    display: none
}

.tabs-container .tab-name {
    cursor: pointer;
    line-height: 1.3em;
    white-space: nowrap;
}

.tabs-container .tab-name.active {
}

.tabs-container .tab-name.active:hover {
    cursor: text;
}

.tabs-container .tab-name:hover {
}


/* GLOBAL */


.wrapper {
    min-width: 640px;
}


.footer hr {
    border-color: inherit;
    opacity: .1;
}


.container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 80vh;
}

.container,
.width-limit {
    width: 1020px;
    max-width: 1020px;
}

.main {
    flex: 0 1 600px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    overflow: hidden;
}

.aside {
    flex: 0 0 400px;
}

#content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*align-items: stretch;*/
    gap: 20px;
}


.header, .footer {
    width: 100%;
}

.blocky {
    padding: 20px;
    background: white;
}

.positive:hover,
.negative:hover {
    opacity: .8;
}

.btn,
button,
.button,
input[type="button"],
input[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 1em;
    text-align: center;
    position: relative;
    text-transform: lowercase;
    overflow: hidden;
}

.buttons {
    display: flex;
    gap: 10px;
}

.button-large {
    padding: .5em 1em !important;
    font-size: 1.25rem !important;
}

.button-xlarge {
    padding: .5em 1em !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
}

.button-self {
    align-self: flex-start;
}


h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    line-height: inherit;
}

[data-move*="to-top"] {
    order: -1
}

form {
    width: 100%;
    padding: 0;
    margin: 0;
}

.wide {
    width: 100%
}

.arrow-down::after {
    display: inline;
    font-family: Fontawesome;
    padding-left: .5em;
    font-size: .75em;
    content: '\f078'; /* f309 f078 */
}

.arrow-right::after {
    display: inline;
    font-family: Fontawesome;
    padding-left: .5em;
    font-size: .75em;
    content: '\f054';
}


.shadow {
    position: absolute;
}

.shadow.right {
    right: 0;
    top: 0;
    height: 100%;
    width: 2em;
    background: linear-gradient(to right, transparent 50%, #fff);
}


.shadow.left {
    left: 0;
    top: 0;
    height: 100%;
    width: 2em;
    background: linear-gradient(to left, transparent 50%, #fff);
}


.shadow.top {
    left: 0;
    top: 0;
    width: 100%;
    height: 2em;
    background: linear-gradient(to top, transparent 50%, #fff);
}


.shadow.bottom {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2em;
    background: linear-gradient(to bottom, transparent 50%, #fff);
}

span.title {
    display: flex;
    line-height: 1.3em;
}

/* HOVER EFFECTS */

.cl-effect-1 {
}

.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}

.cl-effect-1 a::before {
    margin-right: 5px;
    content: '\2022';
    font-size: 1em;
    transform: translateX(20px);
}

.cl-effect-1 a::after {
    display: none;
    content: '';
    transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    transform: translateX(0px);
}

/* HEADER */

.header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.header hr {
    opacity: .1;
    border-color: #FFF
}

.header .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px 20px;
}

.header .row.line {
    padding: 0
}

.header .row-a,
.header .row-c {

}


.header .logo {
    flex: 0 0 200px;
    display: flex;
    overflow: hidden;
    height: 30px;
    background-image: url("../images/logo/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

.header .logo:hover {
    opacity: 0.8;
}


.header .header-nav {
    flex: 1 0 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.header-nav > .icons .icon {
    cursor: pointer;
}

/* SEARCH FIELD */

.search-field {
    flex: 0 1 200px
}

.search-field input[type="search"] {
    border: none;

}

.search-field .search-button {
    display: flex;
    align-items: center;
    border: none;
}

.search-field .search-button,
.search-field input[type="search"] {
    padding: 5px 10px
}


.search-field label[for=story] {
    display: flex;
}

.search-field input[type="search"]::placeholder {

}

/* FAST SEARCH */

.fast-search-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px;
    text-decoration: none;
    border-bottom: 1px solid #EDEDED;
}

.fast-search-result:hover {

}

.fast-search-result .title {
    font-weight: bold;
    line-height: 1.2em
}


.fast-search-result .text {
    margin-top: 5px;

}


/* LOGIN PANEL */

.login {

}

.login-panel {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
    white-space: nowrap;
}

.login-panel .login-links {
    flex: 0 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
}

.login-panel .login-links a:hover {
    text-decoration: underline;
    color: inherit !important;
}


/* MENU */

ul.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    flex: 0 1 max-content;
    list-style: none;
}

ul.menu > li {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

ul.menu .menu-link {
    display: flex;
    align-items: center;
    overflow: hidden;
}

ul.menu .menu-link *,
ul.menu .menu-link {

}

ul.menu .menu-link i {
    padding-top: 6px
}

ul.menu .menu-wrapper {
    display: flex;
    gap: 20px;
    width: max-content;
    transform: translateX(-348px); /* адаптировать под сайт */
    height: 210px;
    padding: 20px;
    align-items: stretch;
    opacity: 0; /* menu visibility */
    visibility: hidden;
}

/* MENU WRAPPER */

.menu-detailed {
    display: flex;
    gap: 20px;
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}

.menu-detailed .link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex: 0 0 160px;
    height: 170px;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px
}

.menu-detailed .active {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

.menu-detailed .name {
    font-weight: bold;
    z-index: 1;
    padding: 10px;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3em;
    flex: 0 0 auto;
}

.menu-detailed .image {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
}

.menu-detailed .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* MENU SIMPLE */

.menu-simple {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    overflow: hidden;
}

.menu-simple a {
    display: flex;
    flex: 0 0 auto;
    padding: 3px 10px;
    align-items: baseline;
    max-width: 180px;
}

.menu-simple a.is-children.active {
    font-weight: bold;
}


/* MENU ASIDE */

.menu-aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}

.menu-aside li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.menu-aside li > a {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.menu-aside li.is-children > a span {
    padding-left: 0
}


.menu-aside li > a span {
    flex: 1 1 100%;
    padding: 5px 0 5px 10px;
}

.menu-aside li > a i {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 30px;
}

.menu-aside li.active > a {
    font-weight: bold;
}

.menu-aside li.active > .sub-category {
    display: flex;
    height: auto;
}

.menu-aside li.active > .sub-category > li:first-child {
    margin-top: 5px;
}

.menu-aside li.active > .sub-category > li:last-child {
    margin-bottom: 5px;
}

.menu-aside .sub-category {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-left: 30px;
}


.menu-aside .sub-category {
    transition: height 1s;
    height: 0;
    display: none;
}

.menu-aside .sub-category.open {
    display: flex;
}


/* MENU COMMON */

.menu-common {
    flex: 1 0 100%;
    gap: 5px 20px;
    flex-wrap: wrap;
}

.menu-common > .item {
}

/* MENU MAIN */

.menu-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;
}

.menu-main > a {
    text-align: center;
    flex: 1 1 min-content;
    padding: 20px;
    font-weight: normal;
}

/* FOOTER */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.footer .row {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    overflow: hidden;
    justify-content: space-between;
}

.footer .column {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.footer .links {
    display: flex;
    gap: 5px 20px;
    white-space: nowrap;
}

.footer .links-column {
    flex-direction: column;
    align-items: flex-end;
}

.footer .links-row {
    flex-direction: row;
    flex-wrap: wrap;
}

.footer .title {
    text-transform: uppercase;
    font-weight: bold;
}

.footer .logo {
    width: 340px;
    aspect-ratio: 300 / 42; /* img w/h */
    background-image: url("../images/logo/bottom.svg");
    background-repeat: no-repeat;
    background-position: top left;
    overflow: hidden;
    background-size: contain;
}

.footer .logo.extra {
    width: 100%;
}

.footer .text {
    width: 340px;
}


.footer a:hover {
    text-decoration: underline;
    /*color: inherit !important;*/
}

.footer .text.copyright {
    width: 100%;
}


/* SHORTSTORY */
/*
-вынести общие классы
- сделать что нибудь с "обновлено"

*/

.shortstory {
    display: flex;
    overflow: hidden;
    position: relative;
}

.shortstory .title {
    align-self: flex-start;
    font-weight: bold;
}

.shortstory .fixed {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 12;
}


.shortstory .new {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    position: absolute;
    transform: rotate(-45deg);
    padding: 5px 10px;
    text-align: center;
    width: 150px;
    top: 10px;
    left: -50px
}


.shortstory .content-type {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 10
}

.shortstory a:hover {

}

.shortstory .rate {
    display: flex;
    flex: 0 0 min-content;
}

.shortstory .rate-wrapper {
    flex: 1 0 auto
}

.shortstory .icons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px 10px;
    flex-wrap: wrap;
    overflow: hidden;
}

.shortstory .icons > .item {
    display: flex;
    gap: 5px;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shortstory .text {
    overflow: hidden;
    position: relative;
}

.shortstory .category {

}

.shortstory .category .sep {
    display: none
}

.shortstory .category a {
    text-transform: lowercase;
    align-self: flex-start;
    border: 1px solid;
    padding: 0 10px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.shortstory .gradient {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2.5em;
    background: linear-gradient(to top, white 0, transparent 100%);
}

.shortstory [class^="aside-item"] {
    display: flex;
    flex-direction: column;
}

.shortstory .image {
    display: flex;
    overflow: hidden
}

.shortstory .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shortstory .tags {
    display: flex;
    gap: 10px;
    overflow: hidden;
}


.shortstory .tags .pre-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortstory .tags a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shortstory .tags a:hover {
    text-decoration: underline;
}


/* SHORTSTORY AUTHOR */

.shortstory .author {
    display: flex;
    overflow: hidden;
}

.shortstory .author .post-user {
    display: flex;
    align-items: center;
    gap: 10px
}

.shortstory .post-user .post-user-info .name {
    font-weight: bold;
    position: relative;
    align-self: flex-start;
}

.shortstory .post-user .post-user-avatar {
    display: flex;
    width: 48px;
    height: 48px;
    overflow: hidden;
}

.shortstory .post-user .post-user-info {
    display: flex;
    flex-direction: column;
}


.shortstory .post-user .name {
    display: flex;
    flex-direction: column;
}

.shortstory .tags {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}


.shortstory .tags .pre-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortstory .tags .tags-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 10px;
    height: 1.5em;
    overflow: hidden;
    position: relative;
    transition: .5s
}

.shortstory .tags .tags-links a:hover {
    text-decoration: underline;
}

.shortstory .tags .tags-links .tags-show-button {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: inherit;
    cursor: pointer;
    padding: 0 5px 0 20px;
    background: linear-gradient(to right, transparent 0, white 10px);
}

.shortstory .tags .tags-links .tags-show-button:hover {
    opacity: 0.8;
}

/* SHORTSTORY A */

.shortstory-a {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 0 0 calc(50% - 10px);
    padding: 0 0 10px 0;
}

.shortstory-a > .row {
    padding: 0 20px
}

.shortstory-a .story {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    flex: 1 0 auto
}

.shortstory-a .link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.shortstory-a .link:hover .image {
    opacity: .8;
}

.shortstory-a .text,
.shortstory-a .row-a,
.shortstory-a .row-c {

}


.shortstory-a .row-a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.shortstory-a .row-b {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
}

.shortstory-a .row-c {
    display: flex;
    gap: 10px 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.shortstory-a .title,
.shortstory-a .text,
.shortstory-a .author {
    padding: 0 20px
}

.shortstory-a .text {
    padding-bottom: 10px
}

.shortstory-a .image {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
}

/* SHORTSTORY AC */

.shortstory-ac {

}

.shortstory-ac .link {
    padding-top: 20px
}

.shortstory-ac .new {
    top: initial;
    left: initial;
    right: -50px;
    bottom: 10px;
    transform: rotate(-45deg);
}

/* SHORTSTORY AD */

.shortstory-ad {
    flex: 0 0 calc(100% / 3 - 40px / 3)
}

.shortstory-ad .image {
    aspect-ratio: 3/4
}

.shortstory-ad .title {
    display: inline;
    padding: 0;
    overflow: hidden;
    width: 100%;
}


.shortstory-ad .info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    gap: 5px;
    bottom: 5px;
    right: 5px;
    font-weight: bold;
}

.shortstory-ad .info > * {
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shortstory-ad .row-a {
    padding: 0;
    gap: 20px;
    justify-content: flex-start;
}

/* SHORTSTORY AQ for icons */

.shortstory-aq {
    flex: 0 0 calc(100% / 3 - 40px / 3);
}

.shortstory-aq .icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid;
    overflow: hidden;
    padding: 20px;
}

.shortstory-aq .icon img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 5px;
}

.shortstory-aq .title {
    align-self: stretch;
    font-weight: normal;
}

.shortstory-aq .text {
    max-height: 4.5em;
    overflow: hidden;
}

.shortstory-aq .icons {

}

/* SHORTSTORY AQA */

.shortstory-aqa .category a {
    flex: 0 1 min-content !important;
    font-size: .75rem !important;
}

.shortstory-aqa .category i {
    display: none;
}

.shortstory-aqa .icon {
    justify-content: flex-start;

}

.shortstory-aqa .icon img {
    width: 80px;
    aspect-ratio: 1/1;
}

.shortstory-aqa .new {
    left: initial;
    right: -50px;
    transform: rotate(45deg);
}

/* SHORTSTORY B */

.shortstory-b {
    flex: 1 0 100%;
    height: 260px;
}

.shortstory-b .column-a {
    flex: 0 0 200px;
    display: flex;
}

.shortstory-b .image {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.shortstory-b .column-b {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
    padding: 20px;
    gap: 10px;
    overflow: hidden;
}


.shortstory-b .link {
    display: flex;
    flex: 1 1 min-content;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.shortstory-b .link .title {
    flex: 0 0 auto;
    overflow: hidden;
    max-height: 3.75em;
}

.shortstory-b .link .text {
    flex: 1 1 auto;
    position: relative;
    margin-bottom: 10px;
}


.shortstory-b .row-a {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.shortstory-b .row-b {
    flex: 0 0 auto;
    display: flex;
    gap: 5px
}

.shortstory-b .row-c {
    flex: 0 0 auto;
    display: flex;
    gap: 10px 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.shortstory-b .fixed {
    right: initial;
    left: 0
}


/* SHORTSTORY BB */

.shortstory-bb {
    flex: 1 0 100%;
    height: 260px;
    overflow: visible;
}

.shortstory-bb::before {
    display: block;
    position: absolute;
    width: 3px;
    height: 20px;
    top: -20px;
    left: 20px;
    content: '';

}

.shortstory-bb:nth-of-type(1)::before {
    display: none;
}

.shortstory-bb .new {
    width: auto;
    transform: rotate(90deg);
    top: 15px;
    left: initial;
    right: -16px
}


.shortstory-bb .column-a {
    flex: 0 0 43px;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.shortstory-bb .column-b {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding: 20px;
    gap: 10px
}

.shortstory-bb .v-line {
    position: relative;
    flex: 0 0 3px;
}

.shortstory-bb .v-line .ball {
    position: absolute;
    display: block;
    top: 60px;
    left: -9px;
    z-index: 1;
    width: 20px;
    height: 20px;
}


.shortstory-bb .link {
    display: flex;
    flex: 1 1 min-content;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
    padding-right: 34px;
}

.shortstory-bb .title {
    flex: 0 0 auto;
    overflow: hidden;
    max-height: 3.75em;
}

.shortstory-bb .text {
    flex: 1 1 auto;
    position: relative;
    margin-bottom: 10px;
}


.shortstory-bb .row-a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

.shortstory-bb .row-c {
    flex: 0 0 auto;
    display: flex;
    gap: 10px 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* SHORTSTORY BC */

.shortstory-bc {
    flex-direction: column;
    align-items: stretch;
    flex: 1 0 100%;
    padding: 20px;
    gap: 10px;
}

.shortstory-bc .link {
    flex: 0 0 auto;
    display: flex;
    align-self: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-right: 10px
}

.shortstory-bc .row-a {
    flex: 0 0 auto;
    display: flex;
    gap: 20px;
}

.shortstory-bc .row-c {
    flex: 0 0 auto;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.shortstory-bc .new {
    left: initial;
    right: -45px;
    transform: rotate(45deg);
}


/* SHORTSTORY BD */

.shortstory-bd {
    flex: 1 0 100%;
    padding: 20px;
    height: 260px;
    overflow: hidden;
    gap: 20px
}

.shortstory-bd .column-a {
    flex: 0 0 160px;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}


.shortstory-bd .column-b {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.shortstory-bd .row-a,
.shortstory-bd .row-c {

}

.shortstory-bd .image {
    width: 100%;
    height: 100%;
}

.shortstory-bd .link {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    flex-direction: column;
    overflow: hidden;
}

.shortstory-bd .title {
    padding-right: 20px;
}

.shortstory-bd .row-a {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: space-between;
}

.shortstory-bd .row-c {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 10px 20px;
}

.shortstory-bd .text {
    flex: 1 1 auto;

}


/* SHORTSTORY C */

.shortstory-c {
    flex: 1 0 100%;
    padding: 20px 0;
    gap: 20px;
    flex-direction: column;
    align-items: stretch;
}

.shortstory-c .image {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    max-height: 80vh;
}

.shortstory-c .image-wide {
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-radius: 0; /*!!! */
}

.shortstory-c .image-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(40px);
}

.shortstory-c .image-background > img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shortstory-c .image .shrtimg {
    object-fit: contain;
    z-index: 2;
}

.shortstory-c .link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.shortstory-c .title {
    flex: 0 0 auto;
}

.shortstory-c .text {
    flex: 0 0 auto;
}

.shortstory-c .author {
    padding-right: 40px;
}

.shortstory-c .row {
    padding: 0 20px
}


.shortstory-c .row-a {
    flex: 0 0 auto;
}


.shortstory-c .row-c {
    flex: 0 0 auto;
    display: flex;
    gap: 10px 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.shortstory-c .row-d {
    flex: 0 0 auto;
}


.shortstory-c .reveal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2em 20px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    /*z-index: 10;*/
    background: linear-gradient(to top, white 50%, transparent 100%);
}

.shortstory-c .reveal-button span {
    flex: 1 1 100%;
    text-align: left;
    font-weight: bold;
}

/* SHORTSTORY CB */

.shortstory-cb .image {
    width: 100%;
}

/* SHORTSTORY D */

.shortstory-d {
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex: 0 0 calc(50% - 10px);
    aspect-ratio: 10/12;
    overflow: visible;
}

.shortstory-d .column {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    position: relative;
}

.shortstory-d .link {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 1;
}


.shortstory-d .summary {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 20px 10px 20px;
}

.shortstory-d .gradient {
    flex: 0 0 auto;
    width: 100%;
    height: 80px;
    position: static;
}

.shortstory-d .title {
    flex: 0 0 auto;
    overflow: hidden;
    max-height: 5.2em;
}

.shortstory-d .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    padding-bottom: 96px
}

.shortstory-d .icons {
    align-items: stretch;
    gap: 5px
}

.shortstory-d .icons > .item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;
    border: none;
}


.shortstory-d .rate-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 5px 10px;
}

/* SHORTSTORY DA */

.shortstory-da {
    aspect-ratio: 1/1;
}

.shortstory-da .title {
    text-align: center;
    align-self: center;
}


.shortstory-da .row {
    justify-content: center;
}

.shortstory-da .link {
    justify-content: stretch;
    align-items: stretch;
}

.shortstory-da .summary {
    padding: 20px;
    flex: 1 0 100%;
    justify-content: center;
    align-items: center;
}

/* SHORTSTORY V */

.shortstory-v {
    flex: 0 0 calc(50% - 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 10px;
}

.shortstory-v .link {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px
}

.shortstory-v .link:hover .image {
    opacity: .8;
}

.shortstory-v .image {
    aspect-ratio: 16/9;
    position: relative;
}

.shortstory-v .icon-play {
    position: absolute;
    width: 50px;
    height: auto;
    top: calc(50% - 18px);
    right: calc(50% - 25px);
}

.shortstory-v .icon-play img {
    object-fit: contain;
    width: 100%;
}

.shortstory-v .title {
    font-weight: normal;
    padding: 0 20px;
    max-height: 3.9em;
}


.shortstory-v .row-c {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 5px 20px
}

.shortstory-v .row-b {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
    padding: 0 20px
}

.shortstory-v .icons {
    flex: 0 0 auto;
}

.shortstory-v .date {
    flex: 1 1 auto;
    white-space: nowrap;
}

.shortstory-v .fixed {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* SHORTSTORY VB */


.shortstory-va {
    flex: 1 0 100%;
    aspect-ratio: 16/9;
    overflow: visible;
    justify-content: stretch;
    align-items: stretch;
}

.shortstory-va .column {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    position: relative;
    overflow: hidden;

}

.shortstory-va .link {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 1
}

.shortstory-va .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shortstory-va .icon-play {
    position: absolute;
    width: 60px;
    left: calc(50% - 30px);
    top: calc(50% - 23px);
}

.shortstory-va .title {
    padding: 10px 20px;
    margin: 10px;
    border-left: 5px solid
}


.shortstory-va .rate-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    padding: 5px 10px;
}

.shortstory-va .approve {
    position: absolute;
    top: 10px;
    left: 20px;
}


/* FULL CONTENT */

.fullstory {
    flex: 1 0 100%;
    overflow: hidden;
    gap: 40px;
    justify-content: flex-start;
    align-items: stretch;
}


/* FULL NAV */

.fullstory-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    overflow: hidden;
}


.fullstory-nav .fixed {

}

.fullstory-nav .new {
    padding: 0 10px;
}

.fullstory-nav .column-a {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    gap: 10px;
    overflow: hidden;
}

.fullstory-nav .column-b {
    display: flex;
    flex: 0 0 auto;
    overflow: hidden;
}

.fullstory-nav .img-icon {
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.fullstory-nav .column-a > .item {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    line-height: 1em;
    white-space: nowrap;
}


.fullstory-nav > .column-a .item a:hover {

}

.fullstory-nav .category {
    gap: 10px
}

.fullstory-nav .category > .item {
    align-items: center;
}

.fullstory-nav .info {
    gap: 20px;
    justify-content: space-between;
}

.fullstory-nav .category > .item,
.fullstory-nav .info > .item {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}


.fullstory-nav .info > .item {
    align-items: baseline;
    flex: 0 0 auto;
}


.fullstory-nav .info .date {
    /*flex: 1 1 100%;*/
}

/* .full-nav .category::after {
    font-family: "FontAwesome";
    content: "\f061";
    font-weight: 900;
} */

.fullstory-nav .category a {
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.fullstory-nav .category a:first-child {
    flex: 0 0 auto;
}

/* CONTENTS */

.hmenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 20px;
    position: relative;
}

.hmenu .h-background {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("../images/logo/logo.svg");
    background-repeat: no-repeat;
    background-position: calc(100% + 40px) calc(100% + 20px);
    background-size: 80%;
    z-index: 0;
    opacity: .1;
}


.hmenu .h-menu {
    display: flex;
    flex-direction: column;
    z-index: 1;
}


.hmenu .h-menu > .item .item {
    padding-left: 20px
}

/* FULLSTORY */

.fullstory-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fullstory-poll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

/* FS HEADER */

.fullstory-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    position: relative;
}

.fullstory-header .fullimg-block {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    margin-bottom: 20px
}

.fullstory-header .fullimg-block img {
    width: 100%;
    height: 100%;
    /* max-height: 200px; */
    object-fit: fill;
}


.fullstory-header .edit-date .span-date {
    text-transform: lowercase;
}

.fullstory-header .admin-bar {
    display: flex;
    gap: 20px;
}


/* POST INFO */

.post-info {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.post-info > .item {
    flex: 0 0 auto;
}

.post-info .post-user {
    display: flex;
    gap: 20px;
}

.post-info .post-user-info {
    display: flex;
    flex-direction: column;
}

.post-info .name {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    position: relative;
    align-self: flex-start;
}


.post-info .profile-link {
    font-weight: bold;
}

.post-info .post-user-avatar {
    display: flex;
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.post-info .post-user-data {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px 20px;
    padding: 20px;
    overflow: hidden;
}

.post-info .post-user-data i {
    padding-right: .5em
}

.post-info .icons {
    flex-wrap: wrap;
    gap: 10px 20px;
}

.post-info .icons > .item {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.post-info .post-user-descr {
    flex: 1 0 100%
}

.post-info .group img {
    width: 1em;
    height: 1em;
    display: flex;
    margin-right: .5em
}

/* ARTICLE FOOTER */

.fullstory-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fullstory-footer .tags {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}


.fullstory-footer .tags .pre-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fullstory-footer .tags .tags-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 10px;
    height: 1.5em;
    overflow: hidden;
    position: relative;
    transition: .5s
}

.fullstory-footer .tags .tags-links a:hover {
    text-decoration: underline;
}

.fullstory-footer .tags .tags-links .tags-show-button {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: inherit;
    cursor: pointer;
    padding: 0 5px 0 20px;
    background: linear-gradient(to right, transparent 0, white 10px);
}

.fullstory-footer .tags .tags-links .tags-show-button:hover {
    opacity: 0.8;
}

.fullstory-footer .rate {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.fullstory-footer .buttons {
    gap: 20px;
}

.fullstory-footer .buttons > * {
    display: flex;
}


/* FULL STORY */

.fullstory-text {
    width: 100%;
}

.fullstory-text h1,
.fullstory-text h2,
.fullstory-text h3,
.fullstory-text h4,
.fullstory-text h5,
.fullstory-text h6 {
    margin-top: 2.5rem
}

.fullstory-text h1 + h2,
.fullstory-text h2 + h3,
.fullstory-text h3 + h4,
.fullstory-text h4 + h5,
.fullstory-text h5 + h6,
.fullstory-text h6 + h6 {
    margin-top: .64rem /* все верно!!! */
}

.fullstory-text .dle-information-block,
.fullstory-text .dle-warning-block,
.fullstory-text .dle-error-block { /* colors blocks */
    box-shadow: none !important;
    border: none !important;
    padding: 20px !important;
    border-radius: 5px;
}

.fullstory-text .dle-gray-background,
.fullstory-text .dle-brown-background,
.fullstory-text .dle-blue-background,
.fullstory-text .dle-green-background,
.fullstory-text .dle-borders {
    border-radius: 5px;
}


.fullstory-text a:not(.attachment):not(.highslide):not(.pages a) {
    padding: 0 5px;
}

.fullstory-text a[rel~="external"]:after {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f35d';
    display: inline;
    padding-left: .5em;
    font-size: .875em;
}


.fullstory-text iframe {
    width: 100%;
    height: 360px;
}


.fullstory-text .image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 1.5em 0 0;
    overflow: hidden;
    width: 100%;
}

.fullstory-text .image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 360px;
}

.fullstory-text .image-container.thumb-image {
    width: 30%;
    height: auto;
}

.fullstory-text .image-container.thumb-image.left {
    float: left;
    margin: 0 1.5em 0 0;
}

.fullstory-text .image-container.thumb-image.right {
    float: right;
    margin: 0 0 0 1.5em;
}

.fullstory-text .image-container.medium-image,
.fullstory-text .image-container.original-image {
    width: 100%;
}

.fullstory-text .image-container.medium-image.left img,
.fullstory-text .image-container.original-image.left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fullstory-text .image-container.medium-image.right img,
.fullstory-text .image-container.original-image.right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: none;
}

.fullstory-text > * {
    margin-top: 1rem
}


.fullstory-text p {
    margin-top: 1em;
}

.fullstory-text p:first-child {
    margin-top: 0;
}


.fullstory-text > p:empty {
    display: none
}

.fullstory-text > p:first-child .image-container {
    margin-top: 0
}

.fullstory-text > .auto-gallery {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;
}

.fullstory-text > .auto-gallery .item-auto-gallery {
    display: flex;
    flex-direction: column;
    flex: 1 1 40%;
    overflow: hidden;
}

.fullstory-text > .auto-gallery .image-container {
    margin: 0;
    padding: 0;
}

.fullstory-text > div:not(.f-carousel) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fullstory-text > div > div {
    margin: 0
}

.fullstory-text > *:first-child {
    margin-top: 0
}

.fullstory-text > *:last-child {
    margin-bottom: 0
}


.fullstory-text .native-emoji {
    font-size: 1em;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols';
}


.fullstory-text .image-desc {
    margin: .5em 0 0 0 !important;
    display: flex;
}

.fullstory-text ul:not([class]):not(:first-child),
.fullstory-text ol:not([class]):not(:first-child) {
    margin-top: 1rem;
}

.fullstory-text ul:not([class]),
.fullstory-text ol:not([class]) {
    padding-left: 1rem
}

.fullstory-text ul:not([style]) {
    list-style: none
}

.fullstory-text > ul:not([class]):not(.xfieldimagegallery) > li:first-child {
    margin-top: 0
}

.fullstory-text > ul:not(.xfieldimagegallery) > li,
.fullstory-text > ol > li {
    margin-top: .5em
}

.fullstory-text ul:not([style]):not(.xfieldimagegallery) li:before {
    font-family: FontAwesome;
    font-weight: 900;
    content: '\f105';
    padding-right: .5em;
    font-size: .875em;
}

.fullstory-text ul.stats li:before {
    content: '\f200' !important;
}

/* OL LI */

.fullstory-text ol:not([class]) li > ol {
    margin-top: 0
}

/* TABLE */

.fullstory-text table > caption {
    margin-bottom: 1rem
}

.fullstory-text table td {
    line-height: 1.3em
}


/* QUOTE */

.fullstory-text .quote {
    display: flex;
    flex-direction: column;
    padding: 20px 0 20px 48px;
    position: relative;
    border-top: 3px solid;
    border-bottom: 3px solid;
}

.fullstory-text .quote:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f10d';
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 2em;
}

.fullstory-text .quote p:not(:first-child) {
    margin-top: 1em
}

/* HIDDEN */

.fullstory-text .quote.dlehidden {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 68px;
    position: relative;
    border: 3px solid;
}

.fullstory-text .quote.dlehidden:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f071';
    font-size: 2em;
    padding-left: 20px;
}

/* mce-accordion */

.mce-accordion {

}

.mce-accordion > *:not(:first-child) {
    padding-top: 10px;
}

.mce-accordion summary {
    cursor: pointer;
}

.mce-accordion summary::before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f054';
    margin-right: 10px;
}

.mce-accordion[open] summary::before {
    content: '\f078';
}

.mce-accordion summary::marker {
    display: none !important;
    list-style: none;
    content: ''
}

/* NEXT */

.next-url {
    padding: 20px;
}


.next-url a {

}

/* FULLSTORY VIDEO */

.fullstory-video .video-code {
    width: calc(100% + 40px);
    transform: translateX(-20px);
}

.fullstory-video .video-code iframe {
    border-radius: 0; /*!!! */
}


/* VIDEO */

.video-code {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.video-code iframe {
    overflow: hidden;
    width: 100%;
    height: 360px
}

.video-code.video {
    padding: 0;
    flex: 1 0 100%;
}

.video-code.video iframe {
}

/* FANCY GALLERY CAT */

.fullstory-gallery {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
}


/* FANCY GALLERY */

div.xfieldimagegallery {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-radius: 0; /*!!! */
    height: auto
}

div.xfieldimagegallery img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* UL GALLERY */

ul.xfieldimagegallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

ul.xfieldimagegallery li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    width: 160px;
}

ul.xfieldimagegallery img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* POLL */

.poll {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px
}

.poll .title {
    font-weight: bold;
}


.poll .pollprogress {
    overflow: hidden;
    height: 30px;
    min-width: 10px
}

.poll .pollprogress span {
    display: block;
    height: 30px;
    overflow: hidden;

    text-indent: -9999px;
}

.poll .closed {
    line-height: 1em;
}


/*VOTE*/

.votes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.votes form {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.votes > .title {
    font-weight: bold;
}


/* RATING LIKES DEFAULT */

.rate-wrapper {
    display: flex;
}

.rate-wrapper * {
    line-height: 1em;
}

.rate-wrapper .likes {
    display: flex;
    gap: 5px;
}

.rate-wrapper .likes > a {
    display: flex;
    font-size: 1.75rem;
}

.rate-wrapper .ratingtypeplus,
.rate-wrapper .ratingtypeplusminus,
.rate-wrapper span[data-likes-id],
.rate-wrapper span[data-dislikes-id] {
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    line-height: 1em;
}


.rate-wrapper .ratingtypeplus {
    font-size: 1.25rem;
    padding: 5px 10px
}


/* RATING LARGE */

.rate.large .rate-wrapper .likes {
    gap: 10px;
}

.rate.large .rate-wrapper .likes > a {
    font-size: 5rem;
}

.rate.large .rate-wrapper .ratingtypeplus,
.rate.large .rate-wrapper .ratingtypeplusminus,
.rate.large .rate-wrapper span[data-likes-id],
.rate.large .rate-wrapper span[data-dislikes-id] {
    font-size: 3.75rem;
    padding: 5px 20px
}


/* RATING NORMAL */

.rate.normal .rate-wrapper .likes {
    gap: 5px;
}

.rate.normal .rate-wrapper .likes > a {
    font-size: 2.25rem;
}

.rate.normal .rate-wrapper .ratingtypeplus,
.rate.normal .rate-wrapper .ratingtypeplusminus,
.rate.normal .rate-wrapper span[data-likes-id],
.rate.normal .rate-wrapper span[data-dislikes-id] {
    font-size: 1.5rem;
    padding: 5px 10px
}


/* RATING SMALL */

.rate.small .rate-wrapper .likes {
    gap: 4px;
}

.rate.small .rate-wrapper .likes > a {
    font-size: 1.5rem;
}

.rate.small .rate-wrapper .ratingtypeplus,
.rate.small .rate-wrapper .ratingtypeplusminus,
.rate.small .rate-wrapper span[data-likes-id],
.rate.small .rate-wrapper span[data-dislikes-id] {
    font-size: .75rem;
    padding: 4px 8px
}

/* RATING CLONE */

.rate-wrapper .likes > a {
    position: relative;
    overflow: visible;
}

.rate-clone {
    position: absolute;
    top: 0;
    left: 0;
    animation: rate-clone .5s linear both;
    transition: .5s all;
    z-index: 200 !important;
}


@keyframes rate-clone {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.0deg) scale(1);
        opacity: 1;
    }
    12.5% {
        transform: translate3d(10px, -16px, 0) rotate(-2deg) scale(1.01);
        opacity: 0.98;
    }
    25% {
        transform: translate3d(18px, -30px, 0) rotate(-3deg) scale(1.02);
        opacity: 0.95;
    }
    37.5% {
        transform: translate3d(8px, -44px, 0) rotate(-1.5deg) scale(1.01);
        opacity: 0.88;
    }
    50% {
        transform: translate3d(-6px, -56px, 0) rotate(0deg) scale(1.005);
        opacity: 0.75;
    }
    67.5% {
        transform: translate3d(-16px, -72px, 0) rotate(1.5deg) scale(1);
        opacity: 0.55;
    }
    85% {
        transform: translate3d(-6px, -88px, 0) rotate(2deg) scale(0.995);
        opacity: 0.25;
    }
    100% {
        transform: translate3d(-14px, -100px, 0) rotate(2.5deg) scale(0.99);
        opacity: 0;
    }
}

/* RATING STARS */

.unit-rating {
    font-size: 1.75rem
}

.rate.small .unit-rating {
    font-size: 1.25rem
}

.rate.normal .unit-rating {
    font-size: 2.5rem
}

.rate.large .unit-rating {
    font-size: 3.5rem
}

/* COMMENT SECTION */

.comments {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    position: relative;
}

.comments-bg {
    background-image: url('../images/categories/comments.svg');
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-position: calc(100% + 30px) -30px;
}

.comments > h2 {
    display: flex;
    position: relative;
    align-items: baseline;
}

.comments > h2 .num {
    display: flex;
    padding: 5px;
    overflow: hidden;
    font-weight: normal;
    line-height: 1em;
    margin-left: .5em;
    align-self: flex-start;
}

.comments .info-img {
    display: none
}

.comments .comments-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/* ADD COMMENT */

.addcomment {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}


.addcomment .subscribe-comments {
    display: flex;
    gap: 10px;
}

.addcomment .inputs {
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.addcomment .inputs input,
.addcomment .inputs button {
    flex: 1 1 100%;
    border-radius: 10px;
}


/* LAST  COMMENT */

.lastcomments + #content form #dle-comments-list {
    padding: 10px 20px;
    background: red;
}

.lastcomments + #content form #dle-comments-list [id^="comment-id"]:nth-of-type(2) .comment {
    border-top: none;
}

/* COMMENT */

[id*="comment-id"] {
    display: flex;
    flex-direction: column;
}

[id*="comment-id"]:nth-last-of-type(2) .comment {
    /* border-bottom: none; */
}

[id*='comm-id'] > div:not(:first-child) {
    margin-top: 10px
}

[id*='comm-id'] a.highslide {
    display: flex;
    margin-top: 10px
}

[id*='comm-id'] img {
    margin-left: 0 !important;
    max-width: 360px;
    max-height: 200px;
}

.comment {
    display: flex;
    width: 100%;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid;
}

.comment .com-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 100%;
    max-width: 100%;
}


.comment .com-post-link {
    display: flex;
    line-height: 1.3em;
    font-weight: bold;
}


.comment .com-rate {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.comment .com-text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.comment .com-actions {
    display: flex;
    align-items: center;
    gap: 40px
}

.comment .reply,
.comment .fast {

}

.comment a:hover > .reply,
.comment a:hover > .fast {

}

.comment .com-text p {
    margin-top: 10px
}

.comment .com-text p:first-child {
    margin-top: 0
}

.comment .com-text br {
    content: '';
    display: block;
    width: 100%;
    height: 5px
}

.comment .com-text [id*='comm-id'] > a:not(.highslide),
.comment .com-text [id*='comm-id'] > p a:not(.highslide) {
    padding: 0 5px;
}

.comment .com-text [id*='comm-id'] > a:hover:not(.highslide),
.comment .com-text [id*='comm-id'] > p a:hover:not(.highslide) {

}

.comment .com-text a[rel*='external']:after {
    font-family: FontAwesome;
    font-weight: 900;
    content: '\f35d';
    font-size: .75em;
    display: inline;
    padding-left: .5em
}

.comment .quote {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 10px 10px 44px;
    border: 1px solid;
    position: relative;
}

.comment .quote.dlehidden {
    background-color: lightgoldenrodyellow;
    border: none
}

.comment .quote.dlehidden::before {
    content: '\f070'
}

.comment .quote + br {
    display: none;
}

.comment .quote:nth-last-of-type(1) {
    margin-bottom: 10px
}

.comment .quote:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: '\f10d';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5em
}


.comment .title_quote {
    display: flex;
    gap: 10px;
    text-transform: lowercase;
}


.comment .com-signature {
    padding-top: 10px;
    border-top: 1px dashed;

}

.comment .com-signature img {
    display: flex;
    max-width: 100% !important;
    max-height: 150px !important;
}

.comment .com-signature img:not(:first-child) {
    margin-top: 10px
}

.com-control {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.com-control .item-ip {
    font-weight: bold;
}


.com-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    overflow: hidden;
}

.com-info .com-user-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: relative;
}

.com-info .com-user-avatar .status {
    display: block;
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    overflow: hidden;
}

.com-info .com-user-name {
    font-weight: bold;
    flex: 0 1 auto;
    max-width: 180px;
}

.com-info .com-user-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 5px;

}


.com-info .com-i-author {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.com-info .com-date {
    flex: 0 0 auto;
    text-transform: lowercase;
}

.com-info .com-user-group.online {

}

.com-info .com-user-group i {
    margin-right: 5px;
}


.com-info .com-user-group img {
    width: 18px;
    height: 18px;
    margin-right: 5px
}

.com-info .icon i {

}

.com-info .icon:hover i {

}


.com-info .answer-count {
    font-weight: bold;
    padding: 0 5px;
}


/* COMMENT THREE LIST */


#dle-comments-list > .comments-tree-list {
    margin: 0;
    padding: 0;
}


#dle-comments-list > .comments-tree-list > .comments-tree-item:before {
    display: none;
}

.comments-tree-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 60px;
    list-style: none;
}

#dle-comments-list > .comments-tree-list > .comments-tree-item:first-child .comment {
    border: none
}

.comments-tree-item {
    position: relative;
}

.comments-tree-item:before {
    font-family: "FontAwesome";
    content: '\f175';
    font-weight: 900;
    position: absolute;
    top: 30px;
    left: -60px;
    font-size: 2rem;
    opacity: .5;

}


/* COMMENT RATING */

.com-rate .rate-me {
    text-align: center;
}

.com-rate .rate-likes {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s
}

.com-rate .rate-likes:hover {
    transform: scale(1.3);
    opacity: .8;
}

.com-rate .rate-count {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.com-rate .rate-count span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.com-rate .rate-count-plusminus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 0
}

.com-rate .ratingtypeplusminus {
    font-weight: bold;
    padding: 2px 5px;
}

.com-rate .rate-count-plusandminus {
    display: flex;
    justify-content: center;
    gap: 0;
}

.com-rate .rate-count-plusandminus span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding: 2px 5px;
}

.com-rate .rate-count-plusandminus span:nth-child(1) {
    border-radius: 5px 0 0 5px; /*!!! */
}

.com-rate .rate-count-plusandminus span:nth-child(2) {
    border-radius: 0 5px 5px 0; /*!!! */
}

.com-rate .ratingzero {

}

.com-rate .ratingplus {

}

.com-rate .ratingminus {

}


/* AUTH ICONS */

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-buttons .auth-text {
    flex: 1 0 auto;
    font-weight: bold;
}

.auth-buttons .auth-links {
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.auth-links {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.auth-links .icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.auth-links .icon:hover {
    opacity: 0.8;
}

.auth-links .icon img {
    width: 1em;
    height: 1em;
}

.icon.icon-vk {
    background-color: #0077FF;
}

.icon.icon-ok {
    background-color: #FF7700;
}

.icon.icon-ya {
    background-color: #F8604A;
}

.icon.icon-mail {
    background-color: #005FF9;
}

.icon.icon-google {
    background-color: #EA4335;
}

.icon.icon-facebook {
    background-color: #395693;
}


/* RELATED */

.related {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.related > .items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.relatednews {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 20px;
    border-bottom: 1px solid;
}

.relatednews:first-child {
    padding-top: 0
}

.relatednews:last-child {
    border: none
}

.relatednews .summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 100%;
}

.relatednews .link {
    display: flex;
    flex-direction: column;
}

.relatednews .title {
    font-weight: normal;
}

.relatednews .info {
    display: flex;
    justify-content: space-between;
}

/* RELATED A */

.relatednews-a {
    flex: 1 0 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.relatednews-a .new {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    position: absolute;
    transform: rotate(-45deg);
    padding: 5px 10px;
    text-align: center;
    width: 150px;
    top: 10px;
    left: -50px
}

.relatednews-a .column-a {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

.relatednews-a .column-b {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /*overflow: hidden;*/
}

.relatednews-a .image {
    width: 160px;
    flex: 1 1 100%;
    overflow: hidden;
}

.relatednews-a .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.relatednews-a .link {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    overflow: hidden;
}

.relatednews-a .title {
    flex: 0 0 auto;
    max-height: 2.6em;
    overflow: hidden;
}

.relatednews-a .text {
    flex: 1 1 auto;
}


.relatednews-a .icons {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px 20px;
    flex-wrap: wrap;
    overflow: hidden;
}

.relatednews-a .column-b .row-a,
.relatednews-a .column-b .row-c {
    flex: 0 0 auto;
}


.relatednews-a .column-b .row-a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.relatednews-a .column-b .row-c {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/*RELATED VIDEO*/

.related.video .post-a {
    flex: 0 1 calc(50% - 10px);
    border-top: none;
    padding: 0;
}

.related.video .post-a .image {
    position: relative;
}


.related.video .post-a .image .icon-play {
    width: 20px;
    z-index: 10;
    position: absolute;
    top: 30px;
    left: calc(50% - 10px);
}

/* USERINFO */

form#userinfo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.userinfo {
    display: flex;
    flex-direction: column;
    width: 100%
}

.profile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.profile-popup {
    padding: 0
}

.profile .row-header {
    display: flex;
    gap: 20px
}

.profile [class^="aside-item"] {
    display: flex;
    flex-direction: column;
}

.profile .column-a {
    flex: 0 1 100%;
    overflow: hidden;
    gap: 10px
}

.profile .column-b {
    gap: 20px;
    flex: 0 0 150px
}

.profile .avatar {
    display: flex;
}

.profile .avatar .img {
    width: 150px;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}

.profile .avatar .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile .status {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10
}

.profile .status.online {

}

.profile .status.offline {

}

.profile .user-group-icon {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
}

.profile .user-group-icon img {
    width: 50px;
    height: 50px;
}

.profile .utitle {
    display: flex;
    flex-direction: column;
    line-height: 1em;
}


.profile .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
    margin-top: 5px;
}

.profile .user-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 0 5px;
}

.profile .info > .item {
    display: flex;
    border-collapse: collapse;
    gap: 5px;
}

.profile .info .col-1 {
    flex: 0 0 120px;
    overflow: hidden;
}

.profile .info .col-2 {
    flex: 1 0 calc(100% - 120px - 20px);
    overflow: hidden;
}

.profile .info .user-group img,
.profile .info .user-group svg {
    width: 1em;
    height: 1em;
    margin-right: 5px
}

.profile .info .uname {
    text-transform: capitalize;
}

/* area-counts */

.profile .row-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px
}

.profile .row-counts [class^='rating'] {
    background: none !important;
}

.profile .row-counts > .item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
}

.profile .row-counts > .item .col-1 {

}

.profile .row-counts > .item .col-2,
.profile .row-counts > .item .col-2 span {
    line-height: 1em;
}


/* area-buttons */

.profile .buttons {
    flex-wrap: wrap;
}

.profile .buttons a {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: .5em 1em;
}


.profile .buttons a i {
    padding-right: .5em
}

.profile .buttons .active {

}

.profile .buttons a:hover {
    opacity: .8;

}

.profile .buttons .vk {
    color: #4b719e;
    border-color: #4b719e !important;;
}

.donate,
.donate:hover {
    background-color: #FFC107 !important;
}

/* USERTABS */

.user-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.user-tabs .tabs-panel {
    display: flex;
    gap: 20px;
    overflow: hidden;
    padding: 10px 20px 20px
}


.user-tabs .tab {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px
}

.user-tabs .user-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.user-tabs .user-comments {
    padding: 0 20px;
}

.user-tabs .user-comments .comment:first-child {
    border-top: none;
}

.user-tabs .tab-navigation {
    width: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: baseline;
}

.user-tabs .tab-navigation a {
    flex: 1 0 100%;
    text-align: center;
    padding: 10px 0;
}

.user-tabs .tab-navigation i {
    font-size: .75em;
}

/* USERTABS FLOWMENU */

.user-tabs .flowmenu-parent .flowmenu-nav i {
    padding-top: 0
}

.user-tabs .flowmenu-parent .flowmenu-nav.right .icon {
    padding-right: 20px
}

.user-tabs .flowmenu-parent .flowmenu-nav.left .icon {
    padding-left: 20px;
}

/* EDIT PROFILE */

.profile-edit {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
}

.profile-edit .ui-form {
    width: 80%;
}


.profile-edit .auth-links {
    justify-content: flex-start;
}

.profile-edit .ignore-users {
    flex-direction: row !important;
    flex-wrap: wrap;
}

.profile-edit .ignore-users span:first-child {
    padding-right: 1em;
}

.profile-edit .ignore-users span {

    text-transform: lowercase
}

.profile-edit .ignore-users span svg {
    width: 1em;
    height: 1em
}


/* CAT HEADER */

.cat-header {
    width: 100%;
    flex: 1 0 100%;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

.cat-header.blocky {
    padding-left: 40px;
}

.cat-header h1 {
    display: flex;
    align-items: center;
}

.cat-header h1 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-header .info {
    display: flex;
    flex-direction: column;
    flex: 1 1 60%;
    overflow: hidden;
    gap: 10px;
}

.cat-header .sort {
    flex: 0 0 auto;
}

.cat-header .description {

}


/* TAGS CLOUD */

.tags-cloud {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 20px;
    white-space: nowrap;
}

.tags-cloud span a,
.tags-cloud span {
    display: flex;
    line-height: 1em;
    /*font-size: 1rem;*/
}

.tags-cloud span a:hover {
    text-decoration: underline;
}


/* SORT */

.sort-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    position: relative;
}

.sort-wrapper > i:hover,
.sort-wrapper > i.active {

    cursor: pointer;
}

.sort-wrapper ul.sort {
    display: none
}

/* LOGIN */

.login-modal {

}

.login-contain {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    width: 400px;
}

.login-contain .title {
    font-weight: bold;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: baseline;
    overflow: hidden;
}

.login-contain .ui-form {
    align-items: stretch;
    gap: 10px;
}

.login-contain button {
    align-self: stretch;
}

.login-contain .links {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

/* FANCY MODAL */

.fancy-modal {
    background-color: white !important;

}

.fancy-modal form {
    display: contents;
}

.fancy-modal .fancy-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}


/* SPEEDBAR */

.speedbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.speedbar a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.speedbar a:hover {

}

/* INFO */

.info-message {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.info-message-text ul {
    padding-left: 20px;
}

.info-message-text a {
    font-weight: bold;
}

.info-message.error {
    background-color: pink;
}

.info-message.warning {
    background-color: lightgoldenrodyellow;
}

.info-message.success {
    background-color: #d9efd9;
}

.info-message.normal {
    background-color: whitesmoke;
}

.info-img {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}


/* SEARCH PAGE */

.search-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.search-page .search-text {
    display: flex;
}

.search-page .search-text input[type='text'] {

}

.search-page .search-button {

}

.search-page #searchinput {
    width: 100%;
    padding: 10px 20px
}

.search-page select {
    text-transform: lowercase;
}

/* ASIDE */

.aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    overflow: hidden;
}

.aside > :last-child {
    position: sticky;
    top: 20px
}

.aside-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px
}

.aside-item > .title {
    font-weight: bold;
}

.aside-item > .items {
    display: flex;
}


/* ASIDE NAV PROFILE */


.nav-profile-items > .item {
    padding: 5px 15px;
    align-self: stretch;
    overflow: hidden;
    white-space: nowrap;
}

.nav-profile-items > .item span {
    text-overflow: ellipsis;
}

.nav-profile-items > .item:hover {

}

/* ASIDE TAGS */

.aside-tags {
    flex-wrap: wrap
}


.aside-tags .items {
    gap: 5px;
    flex-wrap: wrap;
}

.aside-tags .items a {
    padding: 2px 10px;
}

.aside-tags span {
    transform: none
}


/* ASIDE ARCHIVE */

.archive {
}

.archive .items {
    gap: 10px 20px;
    flex-wrap: wrap;
}

/* ASIDE TOPNEWS */

.topnews {
}

.top-news-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 10px 0;
}

.top-news-item:hover {

}

.top-news-item .title {
    line-height: 1.3em
}


/* CUSTOM related */

.related .shortstory-bd {
    box-shadow: none !important;
    padding: 0;
    height: 200px
}

.related .items > hr:last-child {
    display: none
}

.related .shortstory .title {
    font-weight: normal
}

/* CUSTOM POST-A */

.post-a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-top: 1px solid;
    padding-top: 10px;
    padding-bottom: 10px;
}

.post-a:first-child {
    border-top: none;
}

.post-a .link {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.post-a .link:hover .image {
    opacity: .8;
}

.post-a .image {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
}

.post-a .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-a .text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
    gap: 5px;
}

.post-a .title {
    line-height: 1.3em;
}


.post-a .icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.post-a .icons a:hover {

}

.post-a .icons > .item {
    display: flex;
    align-items: baseline;
}


/* CUSTOM COMMENTS */

.aside-comments {
}

.aside-comments .items {
    max-height: 70vh;
    overflow-y: auto;
}

.custom-comment {
}

.custom-comment .com-text a:not(.highslide) {
    padding: 0 5px;
    border-radius: 3px;
}

.custom-comment:first-child {
    border-top: none;
}

.custom-comment .com-post-link a {
    font-weight: bold;
}


/* CUSTOM AB-noimage*/

.custom-ab-noimage .link {
    padding-top: 20px
}

/* CUSTOM TAPE*/

.tape.item {
    display: flex;
    flex: 1 0 100%;
}


.tape.item a {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.tape.item .com-icon {
    white-space: nowrap;
}

/* CUSTOM RATE */

.post-rate {
    height: 200px;
    box-shadow: none !important;
    padding: 0;
    overflow: visible;
}

.post-rate .number {
    flex: 0 0 auto;
    position: absolute;
    top: -30px;
    left: -20px;
    z-index: 2;
}

.post-rate .column-a {
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

.post-rate .image {
    flex: 1 1 100%;
    width: 160px;
}


.post-rate .column-b {
    display: flex;
    flex: 1 1 100%;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
}

.post-rate .number {
    flex: 0 0 auto;
}


.post-rate .number::before {
    text-shadow: 4px 4px 0 #000;
    display: flex;
    line-height: 1em;
    counter-increment: section;
    content: counter(section);
    font-weight: bold;
    opacity: 1;
    z-index: 110;
    font-size: 6rem;
}


/* COMMON BLOCKS */

.common {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}


.common > h1,
.common > h2,
.common > h3,
.common > h4 {
    align-self: flex-start;
}


.common h1 a,
.common h2 a,
.common h3 a,
.common h4 a {
    line-height: 1.3em;
}

.common > .items {
    display: flex;
    flex-wrap: wrap;
    /*overflow: hidden;*/
}

.common.blocky > .items > * {
    box-shadow: none !important;
}

/* CATEGORY */

.categories-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.categories-list .category {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
}

.categories-list .category .summary {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    gap: 10px;
    padding: 20px
}

.categories-list .category .icon {
    display: flex;
    flex: 0 0 100px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.categories-list .category .icon img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    position: absolute;
    top: -30px;
    right: -30px;
    opacity: 0.6;
}

.categories-list .category .summary a::after {
    display: inline;
    font-family: Fontawesome;
    padding-left: .5em;
    font-size: .75em
}

.categories-list .category .summary a::after {
    content: '\f054'; /* f30b f054 */
}


/* common READ MORE */

.common .read-more {
    display: flex;
    flex: 1 0 100%;
    gap: 10px;
}

.common .read-more a {
    display: flex;
    align-items: baseline;
    font-weight: bold;
}

.common .read-more i {
    font-size: .75em;
}

/* MAIN MINI BLOCK */

.mini-block {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    padding: 20px;
    gap: 20px
}

.mini-block .image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 100%;
}

.mini-block .image img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.mini-block .summary {
    flex: 1 0 100%;
    line-height: 1.3em;
    text-align: center;
}


.mini-block.horizontal {
    flex-wrap: nowrap;
    align-items: center;
}

.mini-block.horizontal .image {
    flex: 0 0 80px;
}

.mini-block.horizontal .summary {
    text-align: left;
    flex: 1 1 100%;
}


.mini-block.horizontal .image img {
    height: 80px
}


/* independent INFO */

.common-info {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    height: 400px;
    overflow: hidden;
}

.common-info .summary {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
    justify-content: space-between;
    z-index: 1;
    gap: 20px
}

.common-info .image {
    display: flex;
    flex: 0 1 50%;
    position: relative;
}

.common-info .image img {
    width: 300px;
    height: 300px;
    position: absolute;
    top: -10%;
    right: -10%
}

/* SPLIT NAVIGATION  */

.split-nav {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 20px;
    overflow: hidden;
    line-height: 1em;
}

.split-nav > span {
    line-height: 1em;
}

.split-nav .pages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.split-nav .pages > * {
    padding: 10px 15px;
    line-height: 1em;
}

.split-nav .pages > span {

}

/* COMMENT NAVIGATION  */

.dle-comments-navigation {
    display: flex;
    width: 100%;
}


/* NAVIGATION  */

.navigation {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 0 100%;
    overflow: hidden;
}

.navigation-trigger {
    width: 100%;
    visibility: hidden;
}

.navigation .pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px
}


.navigation .pages > * {
    padding: 10px 12px;
    line-height: 1em;
}

.navigation .pages > span {

}

.navigation > span,
.navigation > a {
    display: flex;
    padding: .4em 0;
}

.navigation.numbers {
    padding: 20px
}

.navigation.numbers > span:last-child,
.navigation.numbers > a:last-child {
    margin-left: auto;
}

.navigation > span { /*неактивная стрелка */

}

.navigation > a { /* активная стрелка */

}

/* NAVIGATION ONE */

.navigation.one {
    justify-content: center;
}

.navigation.one > * {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex: 1 0 100%;

}

.navigation.one > * i {
    font-size: .75em;
}

/* ANIMATION **/

.animation-float {
    animation-name: animation-float;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

@keyframes animation-float {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10px, 20px);
    }
    50% {
        transform: translate(0, 40px);
    }
    75% {
        transform: translate(-10px, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* ADDNEWS */

.add-news {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px
}

.add-news .text {

}

.add-news .admintag {
    gap: 10px;
    padding: 10px 0
}

.add-news .xfieldsnote {
    display: none;
}

.add-news .ui-form {
    gap: 20px;
}


/*OFFLINE*/

.page-offline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 400px;
    min-height: 100vh;
    margin: auto;
}

.page-offline .image {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.page-offline .image img {
    width: 250px;
    object-fit: contain;
}

.page-offline h3 {
    text-align: center;
}

.page-offline .text {
    text-align: center;
}

/*ATTACH*/

.attachment {
    flex: 0 1 calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
}

.attachment.download > *:not(i) {
    padding-left: 60px
}

.attachment.download i {
    display: flex;
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 3em
}

.attachment.allow-online {
    flex: 0 0 auto;
    justify-content: center;
}


.attachment .name {
    flex: 0 1 auto;
    line-height: 1.3em;
}

.attachment .count {
    flex: 0 0 auto;
}

/*PM*/

.pm-page {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

.pm-menu {
    display: flex;
    gap: 10px;
}

.pm-menu a {
    padding: 2px 10px;
    line-height: 1em;
    text-transform: lowercase;
}


.pm-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pm-status {
    display: flex;
    gap: 20px;
    border: 1px solid;
    padding: 10px 20px
}

.pm-status .pm-limit {
    flex: 0 0 auto;
}

.pm-status .pm_progress_bar {
    flex: 1 1 100%;
}

.pm_progress_bar > span {
    padding: 0 10px;
    display: block;
}

.pm-list,
.pm-list form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pm-list form {
    gap: 20px;
}

.pm-list .pm {
    border-collapse: separate;
    border-spacing: 20px 10px;
    border: 1px solid
}

.pm-list .pm thead {
    text-transform: lowercase;
}

.pm-list .pm thead .pm_icon:before {
    font-family: FontAwesome;
    content: '\f078';
    font-weight: 900
}

.pm-list .pm tbody {
    vertical-align: top;
}

.pm-list .pm th.pm_checkbox {
    width: 20px;
}

.pm-list .pm tbody td.pm_subj {
    display: flex;
    flex-direction: column;
}

.pm-list .pm tbody div.pm_subj {
    display: flex;
    margin-bottom: 5px
}

.pm-list .pm tbody .pm_subj {
    text-transform: lowercase;
}

.pm-list .pm tbody .pm_subj .pm_list,
.pm-list .pm tbody .pm_subj .pm_list * {
    line-height: 1.2em !important;
}


/*pm read */

.pm-read {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


.pm-read > *:not([id^="dle"]) {
    margin-top: 20px
}

.pm-read > *:first-child {
    margin-top: 0
}

.pm-read [id^="message-id"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pm-read .pm-message {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-end;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid;
    width: 80%;
}

.pm-read .pm-message.pm-author {
    align-self: flex-start;
}


.pm-read .title {
    display: flex;
    gap: 20px;
    border: 1px solid;
    border-left: 10px solid;
    padding: 10px 20px;
    font-weight: bold;
}

.pm-read .pm-control {
    display: flex;
    gap: 10px;
}


/* LONG TAPE */

.long-tape {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20px;
    flex: 1 0 100%;
    position: relative;
}

.long-tape .name {
    flex: 0 0 auto;
    font-weight: bold;
}

.long-tape .items {
    flex: 1 1 100%;
    display: flex;
}

.long-tape .items > .item {
    flex: 0 1 auto;
    display: flex;
}

.long-tape .items a {
    display: flex;
    padding: 15px 10px;
    flex: 0 0 auto;
    max-width: 250px;
    overflow: hidden;
}

.long-tape .nav {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
}

.long-tape .link-shadow {
    height: 100%;
    width: 2em;
    background: linear-gradient(to right, transparent 50%, #fff);
}

.long-tape .link {
    width: 3em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.long-tape .nav .link a {
    width: 100%;
    height: 100%;
}

/* REGISTER */

form#dle-lostpassword,
form[name="registration"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: auto;
}

form[name="registration"] .lostpassword,
form[name="registration"] .registration {

}

form#dle-lostpassword .lostpassword h1,
form[name="registration"] .registration h1 {

}

p + form[name="registration"] {
    margin-top: 40px;
}

p + form[name="registration"] .buttons > input.bbcodes {
    flex: 1 1 auto;
}

/* OL COUNTER */

ol.counter {
    counter-reset: count;
    list-style-type: none;
}

ol.counter ol {
    counter-reset: count;
    list-style-type: none;
    margin: 0
}

ol.counter > li {
    margin-top: 1em
}

ol.counter > li:first-child {
    margin-top: 0
}

ol.counter,
ol.counter > li,
ol.counter > li > ol {
    padding-left: 0
}

ol.counter li:before {
    counter-increment: count;
    content: counters(count, ".") ". ";
}

/* STATS */

.stats {

}

.stats .stat-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats .stats-blocks {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
}

.stats .stats-blocks > .item {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(100% / 2 - 10px);
    padding: 20px
}

.stats .stats-blocks > .item.table {
    gap: 5px;
}

.stats .stats-blocks .count,
.stats .stats-blocks .time {
    font-weight: bold;
}

.stats .stats-blocks .name {
    font-weight: bold;
}

.stats .stats-blocks .summary {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}