/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; overflow: hidden; overflow: clip;}
.wrapper-container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper-container--main {padding: 0 var(--indent);}
.header {background-color: var(--bg); border-bottom: 1px solid var(--bdc); 
	padding-top: 15px; padding-bottom: 15px; margin-bottom: 30px; gap: 15px 30px;}
.content {min-height: 100vh; padding: 30px 0 50px;}
.cols {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 336px; 
	grid-template-areas: "main sidebar-right";}
.cols__main {grid-area: main;}
.cols__side-left {grid-area: sidebar-left; display: none;}
.cols__side-right {grid-area: sidebar-right;}
.footer {background-color: var(--bg-darker-2); border-top: 1px solid var(--bdc); 
	padding-top: 50px; padding-bottom: 50px; gap: 50px; --tt: var(--tt-colored);}

.rkl {height: 90px;}
.rkl--holder {border: 1px solid var(--bdc); text-align: center; min-height: 90px;
	display: flex; justify-content: center; align-items: center;}
.rkl-side {position: sticky; left: 0; top: 30px;}


/* HEADER
----------------------------------------------- */
.logo {display: block; position: relative; padding-left: 60px;}
.logo__title {text-transform: uppercase; font-size: 18px; font-weight: 600; color: var(---tt);}
.logo__subtitle {color: var(--tt-colored);}
.logo::before {content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 50px; aspect-ratio: 1 / 1; 
	background: url(../images/logo.svg) center center / contain no-repeat;}
.theme-toggle {background-color: var(--bg-darker); border-radius: 20px; gap: 5px; padding: 5px; color: var(--tt-fade);}
.theme-toggle::before, .theme-toggle span {display: grid; place-items: center; width: 30px; height: 30px; 
	border-radius: 50%; font-size: 14px;}
body:not(.dt-is-active) .theme-toggle::before, .dt-is-active .theme-toggle .fal {background-color: var(--accent); color: #fff;}
.header__btn-login {background-color: var(--bg-darker); color: var(--tt-fade);}

.search-block {position: relative;}
.search-block__input, .search-block__input:focus {border-radius: 5px; box-shadow: none; 
	border: 1px solid var(--bdc); height: 50px; line-height: 50px; padding: 0 50px 0 20px;}
.search-block__input:not(:focus)::placeholder {color: var(--tt-fade); opacity: 1; font-size: 16px;}
.search-block__btn {position: absolute; right: 5px; top: 5px; width: 40px; border-radius: 4px; font-size: 18px;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 50px;}
.sect__header {margin-bottom: 30px;}
.sect__title {font-size: 34px; font-weight: 500;}
.sect__btn {margin: 0 auto; margin-top: 30px; width: max-content; display: flex; height: 56px; 
	border-radius: 5px; font-size: 18px; font-weight: 600;}
.main-title {font-size: 45px; font-weight: 500; margin-bottom: 30px; text-transform: uppercase;}
.speedbar {font-size: 13px; margin-bottom: 15px;}
.cols__side-left .side-menu {background-color: var(--bg); box-shadow: var(--bsh); border-radius: 15px;
	position: sticky; left: 0; top: 30px; overflow: hidden; padding: 5px 0;}
.side-menu a {display: block; border-top: 1px solid var(--bdc); padding: 15px 20px; font-size: 16px; color: var(--tt-colored);}
.cols__side-left .side-menu li:first-child a {border: 0;}

.descr {display: grid; gap: 20px; line-height: 1.6; font-size: 14px;}
.descr :is(h1,h2,h3) {font-size: 20px; font-weight: 600; line-height: 1.3;}
.descr a {text-decoration: underline; color: var(--accent);}
.descr ul li {position: relative; padding-left: 25px; margin-left: 25px;}
.descr ul li::before {content:"\f00c"; font-weight: 300; font-family:'Font Awesome 5 Pro'; 
	color: var(--accent); position: absolute; left: 0; top: 0;}


/* SHORT STORY
----------------------------------------------- */
.item {border-radius: 15px; box-shadow: var(--bsh); background-color: var(--bg-darker); display: block;}
.item__img {border-radius: 15px 15px 0 0; overflow: hidden;}
.item__desc {padding: 15px; padding-bottom: 30px;}
.item__title {font-size: 22px; font-weight: 500;}
.item__subtitle {margin-top: 15px; color: var(--tt-colored);}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__top {gap: 40px 40px; border-bottom: 1px solid var(--bdc); margin-bottom: 30px; padding-bottom: 30px;}
.footer__menu {font-weight: 500; text-transform: uppercase; gap: 15px 40px;}
.footer__copyright {font-size: 14px; margin-right: 10px;}
.footer__copyright span {color: var(--tt);}

.pagination {gap: 20px;}
.pagination__pages a, .pagination__pages span {display: grid; place-items: center; height: 40px; min-width: 40px; 
	border: 1px solid var(--bdc); padding: 0 10px; border-radius: 4px;}
.pagination__btn-loader {width: 100%;}
.pagination__btn-loader span, .pagination__btn-loader:has(span) {display: none;}
.pagination__btn-loader a {height: 56px; border-radius: 5px; font-size: 18px; font-weight: 600;}
.pagination__pages {gap: 10px; font-size: 18px;}
.pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; border-color: var(--accent);}


/* INNER PAGE
----------------------------------------------- */
.page__mtitle {font-size: 45px; font-weight: 500; line-height: 1.16; margin-bottom: 15px;}
.page__mtitle a {font-size: 16px; margin-left: 10px;}
.page__intro {line-height: 1.4; font-size: 20px; margin-bottom: 30px; color: var(--tt-colored);}
.page__img {padding-top: 58%; border-radius: 15px;}
.page__img-caption {font-size: 12px; color: var(--tt-colored); margin-top: 15px; text-align: center;}
.page__cols {margin-top: 25px; padding-bottom: 30px;}
.page__cols-left {width: 300px; margin-right: 25px;}

.page__gallery {margin-top: 30px;}
.page__prev-next {gap: 25px 90px; margin-top: 30px;}
.page__prev-next-link div:first-child {width: 100%; color: var(--tt-colored); font-size: 12px; 
	justify-content: flex-start; margin-bottom: 6px; font-weight: 600; text-transform: uppercase;}
.page__prev-next-link + .page__prev-next-link {text-align: right;}
.page__prev-next-link + .page__prev-next-link div:first-child {justify-content: flex-end;}

.contents {background-color: var(--bg); box-shadow: var(--bsh); border-radius: 15px;
	position: sticky; left: 0; top: 30px; overflow: hidden;}
.contents__header {height: 60px; display: flex; justify-content: center; align-items: center; font-size: 18px;}
.contents__list {counter-reset: n;}
.contents__list a {
	display: block;
	border-top: 1px solid var(--bdc);
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 0 20px;
	font-size: 16px;
	color: var(--tt-colored);
	}
.contents__list a span{padding: 10px 0;}
.contents__list a::before {content: counter(n,decimal-leading-zero); counter-increment: n; 
	font-size: 15px; opacity: 0.6; width: 36px;}
.contents__btn {border-radius: 0; border-top: 1px solid var(--bdc); 
	background: none; color: var(--tt); width: 100%; height: 60px; font-size: 16px;}

.page__footer {margin-top: 20px; border-top: 1px solid var(--bdc); padding-top: 30px;}
.page__rating a {margin-right: 10px; display: flex; align-items: center; height: 36px; padding: 0 10px; 
	border: 1px solid var(--bdc); box-shadow: 0 1px 3px 0 rgba(0,0,0,.06);
	background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 30%, var(--bg-darker) 100%);}
.page__rating a > span:last-child {display: inline-block; border-left: 1px solid var(--bdc); 
	padding-left: 10px; margin-left: 10px; font-weight: 400;}
.page__rating .fal {font-size: 18px; color: #27ae60;}
.page__rating a + a .fal {color: #e74c3c;}
.page__rating a:hover {background: linear-gradient(to top, var(--bg) 0%, var(--bg) 30%, var(--bg-darker) 100%);}
.page__fav a {padding-left: 50px; position: relative; display: block; 
	color: var(--tt-fade); line-height: 1.3; font-size: 14px;}
.page__fav .fal {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; 
	border: 1px solid var(--bdc); border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -20px;}
	

/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.full-text {line-height: 1.6; font-size: 16px; word-wrap: break-word; color: #335875;}
.full-text a {text-decoration: underline; color: var(--accent);}
.full-text img:not(.emoji) {border-radius: 15px;}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; 
	border: 3px solid var(--accent); position: absolute; top: 5px; left: 34px;}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {content: counter(num); counter-increment: num; background-color: var(--accent); color: #fff; 
	position: absolute; top: -3px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 600;
	display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;}
.full-text > ol li:after {content: ''; border: 10px solid transparent; border-left-color: var(--accent); 
	position: absolute; left: 41px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text table, .video-inside > * {width:100%;}
.full-text table tr td {padding:10px; border:2px solid var(--bh);}
.full-text table tr:nth-child(2n+1) {background-color:var(--bg-darker-2);}
.full-text table img:not(.emoji) {margin:0; max-width:350px}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {padding-top: 60%; position: relative;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 34px; 
	font-weight: 500; margin-bottom: 20px; color: var(--tt);}
.full-text h3, .full-text h4, .full-text h5 {font-size: 27px;}
.full-text iframe {width: 100%; height: 400px; margin-bottom: 20px;}


/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 0px; border-top: 1px solid var(--bdc); padding-top: 30px;}
.page__comments-title {font-size: 24px;}
.page__comments-info {color: var(--tt-fade); display: block; margin: 5px 0 20px;}
.page__comments-info::before {color: var(--ui-red); margin-right: 10px;}
.ac-form {margin-bottom: 30px;}
.ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;}
.ac-form__btn {padding: 0 60px;}
.ac-form__bottom {gap: 25px;}
.confidential-check {font-size: 14px;}
.ac-form__header > span {margin-left: 15px;}
.ac-form .comments_subscribe {margin-top: 0px;}

.ac-form__editor .bb-editor textarea, .ac-form__editor .fr-wrapper {height: 150px !important;}
.ac-form__editor .fr-view {min-height: 130px !important;}
.ac-form .tox-tinymce {height: 210px !important;}
.comments_subscribe + br, .ac-form .bb-editor + br {display: none;}
.ac-form input {box-shadow: none; height: 50px; line-height: 50px;}
.ac-form__bottom button {height: 50px; font-size: 16px;}
.ac-form textarea, .ac-form .bb-pane {box-shadow: none;}

.mass_comments_action, .ac-form__bottom .comments_subscribe1 {display: none;}
.comm__title {font-size: 18px; margin-bottom: 20px;}

.comm {margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--bdc);}
.comm__img {width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;}
.comm__letter {width: 100%; height: 100%; text-transform: uppercase; border-radius: inherit;
	position: absolute; left: 0; top: 0; color: #fff; font-size: 18px; font-weight: var(--ui-fw-bolder);}
.comm__author, .comm__author a {color: var(--tt); font-weight: 500; font-size: 14px;}
.comm__date {color: var(--tt-fade); font-size: 13px; margin-top: 2px;}
.comm__main {margin: 15px 0 15px 0;}
.comm__action {gap: 20px; font-size: 14px;}
.comm__action li, .comm__action li a {color: var(--tt-fade); cursor: pointer; gap: 8px;}
.comm__rating {gap: 10px; font-size: 14px;}
.comm__rating::before {content: attr(data-text); display: inline;}
.comm__rating > * {display: flex; gap: 5px;}
.comm__rating > * > span:first-child {text-decoration: underline; color: var(--ui-green);}
.comm__rating > * + * > span:first-child {color: var(--ui-red);}
.comm__ctrl, .comm__ctrl a {font-size: 15px; gap: 10px 15px; color: var(--tt-fade);}
.comm__ctrl li.has-checkbox {display: none;}
.comm__ctrl li:empty {display: none;}


/* LOGIN
----------------------------------------------- */
.login {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow-y: auto;
	background-color: var(--ui-bg); width: 440px; border: 10px solid var(--ui-bg-darker); display: none;
	box-shadow: 0 15px 45px rgba(0,0,0,0.5); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);}
.login__header {padding: 20px 50px 25px 50px; border-bottom: 1px solid var(--ui-bdc); position: relative;}
.login__title {font-size: 24px; font-weight: var(--ui-fw-bolder);}
.login__caption {font-size: 13px; color: var(--ui-tt-fade); margin-top: 3px;}
.login__close {font-size: 23px; position: absolute; right: 10px; top: 10px; padding: 0; width: 40px; height: 40px;}
.login__content {display: grid; gap: 20px; padding: 25px 50px; padding-bottom: 30px; position: relative;}
.login__row, .login__row.fal, .login__row.fas {position: relative; display: grid; gap: 10px; justify-content: stretch;}
.login__row-caption a, .login__caption a {margin-left: 10px;}
.login__row::before {position: absolute; left: 2px; bottom: 0; width: 40px; height: 50px; 
	display: grid; place-items: center; opacity: 0.4; font-size: 18px;}
.login__input input {padding-left: 40px; border-radius: 4px; height: 50px; line-height: 48px;}
.login__row button {width: 100%; height: 40px; border-radius: 4px;}
.login__social {padding-top: 10px; text-align: center; gap: 10px;}
.login__social-caption {font-size: 13px; color: var(--ui-tt-fade); width: 100%;}
.login__social a, .login__social img {display: block; width: 34px; height: 34px;}
.login--logged .login__header {padding-left: 115px;}
.login__avatar {width: 50px; height: 50px; position: absolute; left: 50px; top: 25px;}
.login__menu a {border-bottom: 1px solid var(--ui-bdc); padding: 10px 0; width: 100%; justify-content: flex-start;}
.login__menu li:last-child a {border: 0;}
.login__menu a::before {width: 20px; font-size: 18px; text-align: center; color: var(--accent); margin-right: 10px;}


/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.6; background-color: #000; cursor: pointer; display: none;}
.mobile-menu {width: 340px; height: 100%; overflow-x: hidden; overflow-y: auto;
	z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; 
	background-color: var(--bg); visibility: hidden;}
.mobile-menu.is-active {left: 0; visibility: visible;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}
.mobile-menu__header {padding: 20px; gap: 10px;}
.mobile-menu__btn-close {font-size: 24px; margin-right: -10px; width: 30px; height: 30px; padding: 0;}

@media screen and (min-width: 1580px) {
	.cols__side-left {display: block;}
	.cols {grid-template-columns: 240px minmax(0,1fr) 336px; 
		grid-template-areas: "sidebar-left main sidebar-right";}
}
@media screen and (max-width: 1580px) {
	.header__btn-mobmenu {display: flex; font-size: 24px; height: 50px; width: 50px;}
}

@media screen and (max-width: 1220px) {
	:root {--indent-negative: -20px; --indent: 20px;}
	.wrapper-container {max-width:1000px;}
	.cols {display: block;}
	.cols__side-right {display: none;}
}

@media screen and (max-width: 950px) {
	.wrapper-container {max-width:768px;}
	.header {gap: 15px 20px;}
	.grid-items {gap: 20px;}
	.item__title {font-size: 18px;}
	.footer__top {justify-content: center;}
	.footer__menu {justify-content: center; width: 100%;}
	.header {gap: 15px 10px;}
	.header__logo {width: calc(100% - 60px); order: 1;}
	.header__btn-mobmenu {order: 2; width: 40px; height: 40px; font-size: 18px;}
	.header__search {min-width: calc(100% - 140px); order: 3;}
	.theme-toggle {order: 4;}
	.header__btn-login {order: 5; padding: 0; font-size: 18px; width: 40px;}
	.header__btn-login span {display: none;}
	.search-block__input, .search-block__input:focus {height: 40px; line-height: 40px; padding: 0 50px 0 10px;}
	.search-block__btn {right: 0; top: 0;}
	.search-block__input:not(:focus)::placeholder {font-size: 14px;}

	.page__cols-left {width: 100%; margin: 0; margin-bottom: 25px; min-height: 300px;}
	.page__contents.nl:has(li:nth-child(4)) li:nth-child(3) ~ li {display: none;}
	.page__contents:has(li:nth-child(4)) .contents__btn {display: flex;}
}

@media screen and (max-width: 760px) {
	.wrapper-container {max-width:640px;}
	.pagination__pages > * {flex-grow: 1;}
	.pagination__pages, .pagination__btn-loader a {width: 100%;}

	.main-title {font-size: 34px;}
	.sect__title {font-size: 28px;}
	.item {display: flex;}
	.item__img {padding: 0; width: 130px; min-height: 130px; border-radius: 15px 0 0 15px;}
	.item__desc {flex: 1 1 0; max-width: 100%; min-width: 50px; padding: 15px 20px;
		display: flex; flex-direction: column; justify-content: center;}
	.item__title {font-size: 16px;}
	.grid-items {grid-template-columns: repeat(1,minmax(0,1fr));}

	.page__mtitle {font-size: 28px;}
	.page__intro {font-size: 16px;}
	.page__prev-next-link {min-width: 100%;}
	.page__title, .full-text h1, .full-text h2 {font-size: 24px; line-height: 1.3;}
	.full-text h3, .full-text h4, .full-text h5 {font-size: 20px;}
	.full-text {font-size: 15px;}
	
	.ac-form__bottom {gap: 10px;}
	.ac-form__bottom button {padding: 0 20px;}
	.ac-form__header input + input, .ac-form__bottom button {min-width: 100%; order: 10;}
	.ac-form__header > span, .comm__rating::before {display: none;}
}

@media screen and (max-width: 590px) {
	.wrapper-container {max-width:480px;}
}

@media screen and (max-width: 470px) {
	.wrapper-container123 {max-width:360px;}
	.main-title {font-size: 28px;}
	.login__header, .login__content {padding-left: 20px; padding-right: 20px;}
	.login--logged .login__header {padding-left: 85px;}
	.login__avatar {left: 20px;}
	.login__title span {display: none;}
	.login__input input, .login__row::before {height: 40px; line-height: 38px;}
	.login__menu {margin: -15px 0;}
	.page__fav a {width: 40px; height: 40px; margin: -5px 0; padding-left: 45px; overflow: hidden;}
	
	.full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -20px;}
}

/* image-download-button */
.image-download-button-box {
 	display: flex;
    padding: 10px 0px;
    justify-content: center;
}
.image-download-button {
    color: #fff !important;
    background-color: #ef574a;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size: 1.125em;
    text-decoration: none !important;
}