/* =========== © 2024 Centroarts.com =========== */

@media (min-width: 920px) {
	:root { scroll-padding-top: var(--header-height); }
}
:root {
	--wrp-padding: 16px;
	--grid-gap: 28px;
}
@media (min-width: 920px) {
	:root { --wrp-padding: 28px; }
}
@media (min-width: 576px) and (max-width: 1239px) {
	:root { --grid-gap: 16px; }
}

.wrp {
	width: 100%; max-width: var(--page-maxwidth);
	padding-left: var(--wrp-padding); padding-right: var(--wrp-padding);
	margin-left: auto; margin-right: auto;
}

@media (min-width: 576px) {
	.page-content { position: relative; padding: var(--wrp-padding) 0; }
}
@media (max-width: 575px) {
	.wrpcont { padding-left: 0; padding-right: 0; }
}

/* --- Header --- */
.header {
	position: relative; top: 0; left: 0; right: 0; z-index: 99; user-select: none;
	background-color: var(--header-color); color: var(--header-elements-color);
}
.header .wrp {
	display: flex; justify-content: space-between; align-items: center; height: var(--header-height);
	color: var(--header-elements-color);
}
.header svg { pointer-events: none; }

/* - Logo - */
.logo {
	display: flex; align-items: center; pointer-events: all;
	position: relative; color: inherit !important;
	text-decoration: none !important; width: var(--logo-width); height: var(--logo-height);
}
.logo svg { display: block; width: inherit; height: inherit; fill: currentColor; }

.h-first, .h-tools { display: flex; }
.h-first { align-items: center; pointer-events: none; }
.h-tools { justify-content: end; }
.h-tool > svg, .iswap * { pointer-events: none; }

/* - Menu - */
.h-menu { flex: 1 1 auto; }
.h-menu a { text-decoration: none !important; white-space: nowrap; }

.h-menu-links { font-weight: bold; }
.h-menu-links a { display: flex; align-items: center; color: inherit !important; }

.iswap * { pointer-events: none; }
.iswap, .iswap-ic { display: block; width: 24px; height: 24px; }
.iswap { display: block; }
.iswap-ic { position: absolute !important; }

.iswap-close, .iswap-ic { transition: opacity .2s ease, transform .2s ease; transform-origin: 50% 50%; }
.iswap-close { opacity: 0; transform: rotate(-180deg); }

/* User */
.h-login, .h-user {
	width: 40px; height: 40px; border-radius: 50%; margin-left: 12px;
	display: flex; align-items: center; justify-content: center; border: 0 none !important; color: inherit !important;
	background-color: rgba(var(--header-elements-color-rgb), 0.05);
	transition: background-color .2s ease;
}
.h-login { padding: 8px; }
.h-login:hover { background-color: rgba(var(--header-elements-color-rgb), 0.1); }

.h-user { background-color: rgba(var(--header-elements-color-rgb), 0.1); }
.h-user:hover { background-color: rgba(var(--header-elements-color-rgb), 0.15); }
.h-user .fit-cover { width: inherit; height: inherit; border-radius: inherit; display: block; }

@media (min-width: 620px) {
	.h-tools { margin-left: 56px; }
}
@media (min-width: 620px) and (max-width: 919px) {
	.header .wrp { justify-content: flex-start; }
	.h-first { margin-right: auto; margin-left: 24px; }
}
@media (min-width: 920px) {
	.header { position: sticky; }
	.h-first { margin-right: 56px; }
	.h-first, .h-tools { flex: 1; max-width: var(--logo-width); }

	.h-menu a { color: inherit !important; }

	.h-menu { font-size: var(--hmenu-font-size); display: block !important; overflow: hidden; height: var(--header-height); }
	.h-menu-over, .h-menu-tools { padding: 16px 0; height: inherit; }
	.h-menu-tools, .h-menu-over { transform: translateY(-100%); transition: transform .4s cubic-bezier(.17,.67,.44,.91), opacity .3s cubic-bezier(.17,.67,.44,.91); }

	.h-menu-links { display: flex; }
	.h-menu-links a {
		padding: 10px 16px; line-height: 20px; border-radius: 20px; margin-right: 4px;
		transition: opacity .15s ease;
	}
	.h-menu-links a.active { background-color: rgba(var(--header-elements-color-rgb), 0.05); opacity: 1 !important; }
	.h-menu-links a:hover { opacity: .8; }
	.h-menu-links a .badge { margin-left: 6px; margin-right: -6px; }

	.badge {
		height: 20px; line-height: 16px; font-size: 12px; font-style: normal; padding: 2px 6px 2px 4px;
		border-radius: 10px; background-color: var(--header-elements-color); color: var(--header-color);
	}
	.badge:empty { display: none; }
	
	html.qs .h-menu-tools, html.qs .h-menu-over { transform: translateY(0%); }
	html.qs .h-menu-over, html:not(.qs) .h-menu-tools { opacity: 0; }

	.qsearch-field-btn { padding: 10px 16px !important; opacity: 1; }
	.qsearch-field-btn::before { content: attr(title); }
	.qsearch-field-btn svg { display: none; }
	.qsearch-field-btn:hover { opacity: .8; }

	html.qs .h-tool-search .iswap-close { opacity: 1; transform: translateY(0); }
	html.qs .h-tool-search .iswap-ic { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 919px) {
	.h-burger {
		display: flex !important; align-items: center; justify-content: center; border: 0 none !important;
		background: none !important; width: 40px; height: 40px; padding: 8px; color: var(--header-elements-color);
	}
	.qsearch-close, .h-menu-search { display: none !important; }

	html.mm body { padding-top: var(--header-height); overflow: hidden; }
	html.mm .header { position: fixed; left: 0; top: 0; min-width: var(--page-minwidth); }
	html.mm .h-menu { display: flex !important; right: 0; }

	.header.open .h-burger .iswap-close { opacity: 1; transform: rotate(0); }
	.header.open .h-burger .iswap-ic { opacity: 0; transform: rotate(180deg); }

	.h-menu {
		position: fixed; z-index: 100; top: var(--header-height); left: 0;
		flex-direction: column; overflow: hidden;
		background-color: var(--drop-dark-color);
		color: var(--text-dark-color);
	}
	.h-menu-over {
		flex: 1 1 auto; overflow: hidden; opacity: 1; transition: opacity .2s ease, transform .4s ease;
		overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(8px);
	}
	.header.open .h-menu-over { opacity: 1; transform: translateY(0); }
	.h-menu-tools {
		padding: 0 20px 12px 20px; position: relative; z-index: 2;
		background-color: var(--header-menu-color);
		box-shadow: 0 -5px 0 0 var(--header-menu-color);
	}
	.h-menu-tools .langs { margin-top: 12px; display: flex !important; justify-content: space-between; height: 40px; }
	.h-menu-soc, .h-menu-add, .h-menu-sublinks { display: block !important; }

	.h-menu-links { padding: 16px 0; }
	.h-menu-links a { height: 56px; padding: 12px 24px; font-size: 20px; line-height: 32px; }
	.h-menu-links a .badge { margin-left: auto; }
	/* .badge { font-style: normal; font-size: var(--fs-sm); color: var(--link-color); } */
	.badge {
		height: 20px; line-height: 16px; font-size: 12px; font-style: normal; padding: 2px 6px 2px 4px;
		border-radius: 10px; background-color: var(--header-elements-color); color: var(--header-color);
	}
	.badge:empty { display: none; }

	.h-menu-add { padding: 20px; }
	.h-menu-links + .h-menu-add, .h-menu-add + .h-menu-sublinks { margin-top: -16px; }

	.h-menu-sublinks, .h-menu-soc { border-top: 1px solid rgba(var(--text-color-rgb),0.07); }
	.h-menu-sublinks { column-count: 2; padding: 24px 20px; }
	.h-menu-sublinks a { display: block; line-height: 24px; font-size: 15px; padding: 6px 4px; color: inherit !important; }

	.h-menu-add + .h-menu-sublinks { border-top-width: 0 !important; }

	.h-menu-soc { padding: 0 24px; }
	.h-menu-soc .social-links { padding: 16px 0; }
	.h-menu-soc .social-links > a { padding: 12px; height: 56px; flex: 1; }
}
@media (max-width: 619px) {
	.h-first {
		position: absolute; left: 0; top: 0; bottom: 0; right: 0;
		flex: 1 1 auto; justify-content: center; overflow: hidden;
	}

	.h-darkmod { position: absolute; left: 50%; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; }
	.logo, .h-darkmod { transition: transform .2s ease, opacity .2s ease !important; }
	html.mm .logo { pointer-events: none; }
	html:not(.mm) .h-darkmod { display: none !important; }
	html.mm .h-darkmod { pointer-events: all; }
	.header.open .logo { opacity: 0; transform: translateY(-24px); }
	.header.open .h-darkmod { transform: translate(-50%, 0%); opacity: 1; }
}
@media (max-width: 575px) {
	html.mm .h-tool-user, html.mm .h-tool-login,
	html:not(.mm) .h-menu-mod { display: none !important; }
}
@media (min-width: 500px) and (max-width: 919px) {
	.h-menu {
		border-radius: var(--drop-radius); margin: 8px;
		box-shadow: var(--drop-shadow);
	}
}
@media (max-height: 767px) {
	.h-menu { bottom: 0; }
}
@media (max-width: 499px) {
	.h-menu { right: 0; bottom: 0; }
	html.mm .header { background-color: var(--header-menu-color); }
}

/* - qSearch - */
.qsearch { display: flex; }
.qsearch-field {
	display: flex; flex: 1 1 auto; line-height: 24px; height: 44px; position: relative;
}
.qsearch-field-input, .qsearch-field-btn, .qsearch-close {
	line-height: inherit !important; height: inherit !important; color: inherit !important;
	background: none !important; border: 0 none !important;
}
.qsearch-field-input { padding: 10px 4px !important; }
.qsearch-field-btn {
	text-transform: uppercase; font-weight: bold;
	font-size: var(--fs-sm); transition: opacity .15s ease;
	padding: 10px 16px !important;
}
.qsearch-field-btn:hover { opacity: .8; }
.qsearch-field-btn:active { opacity: .6; }

.qsearch-field-input { flex: 1 1 auto; }
.qsearch-field-input::placeholder { color: var(--header-elements-color); opacity: 0.3; }
.qsearch-field-line {
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none;
	border: 0 solid; border-width: 0 0 1px 0; opacity: .1; transition: opacity .2s ease;
}
.qsearch-field-input:focus ~ .qsearch-field-line { opacity: .2; }

.qsearch-close:hover { box-shadow: inset 0 0 0 1px rgba(var(--header-elements-color-rgb),0.2); }
.qsearch-close:active { transform: scale(0.95) !important; }

@media (max-width: 919px) {
	.qsearch-field-btn { margin-right: -12px; }
}
@media (min-width: 920px) {
	.qsearch-field { height: 40px; }
	.qsearch-field-line { border-radius: 20px; border-width: 1px; }
	.qsearch-field-btn, .qsearch-field-input { padding: 8px 16px !important; }

	.qsearch-close {
		display: flex; align-items: center; justify-content: center;
		width: 40px; padding: 8px; border-radius: 50%; margin-left: 8px; transform: scale(.5); opacity: 0;
		box-shadow: inset 0 0 0 1px rgba(var(--header-elements-color-rgb),0.1);
		transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
	}
	html.qs .qsearch-close { transform: scale(1); opacity: 1; }
}

/* - Dark Mod Switch - */
.h-darkmod {
	display: flex; align-items: center; height: 40px; border-radius: 20px; padding: 4px; cursor: pointer;
	border: 0 none !important; user-select: none; color: inherit !important;
	background-color: rgba(var(--header-elements-color-rgb), 0.05);
	transition: background-color .2s ease;
}
.h-darkmod-in { display: flex; position: relative; padding: 4px; }
.h-darkmod-in::after {
	content: ""; position: absolute; left: 0; top: 0; border-radius: 50%;
	width: 32px; height: 32px; transform: translateX(0); opacity: .1;
	box-shadow: inset 0 0 0 1px var(--header-elements-color);
	transition: transform .25s ease, opacity .25s ease;
}
.h-darkmod-in svg { fill: currentColor; transition: opacity .25s ease; }
.h-darkmod-in svg + svg { margin-left: 8px; }
.h-darkmod-in svg.mod-dark { opacity: .2; }

html.dark .h-darkmod-in::after { transform: translateX(100%); }
html.dark .h-darkmod-in svg.mod-light { opacity: .2; }
html.dark .h-darkmod-in svg.mod-dark { opacity: 1; }

@media (min-width: 992px) {
	.h-darkmod:hover { background-color: rgba(var(--header-elements-color-rgb), 0.1); }
	.h-darkmod:hover .h-darkmod-in::after { opacity: .2; }
}

/* --- Footer --- */
.footer {
	margin-top: auto; font-size: var(--footer-font-size); user-select: none;
	background-color: var(--footer-color); color: var(--text-color);
}
.footer a { color: inherit !important; text-decoration: none !important; }

.foot-main { flex: 1 1 auto; }
.foot-copy { display: block; line-height: 20px; margin-bottom: 8px; font-weight: bold; font-size: var(--body-font-size); }
.foot-links { display: flex; flex-wrap: wrap; margin: -6px -12px; }
.foot-links a { padding: 6px 12px; }

/* Social Links */
.social-links { display: flex; }
.social-links > a { display: block; height: 40px; padding: 4px; color: inherit; transition: opacity .2s ease; }
.social-links > a + a { margin-left: 12px; }
.social-links > a:hover { opacity: .8; }
.social-links > a svg { fill: currentColor; width: 32px; height: 32px; display: block; margin: 0 auto; }

.foot-second { display: flex; align-items: center; padding: 20px 0; height: 81px; border-top: 1px solid rgba(var(--text-color-rgb),0.1); }

@media (max-width: 919px) {
	.footer { --wrp-padding: 24px; }
}
@media (max-width: 767px) {
	.foot-main { padding: 32px 0; }
	.footer .social-links { padding: 16px 0; border-top: 1px solid rgba(var(--text-color-rgb),0.1); }
	.footer .social-links > a { padding: 12px; height: 56px; flex: 1; }
}
@media (max-width: 459px) {
	.foot-copy { line-height: 24px; margin-bottom: 12px; }
	.foot-links a { flex: 0 0 50%; }
}
@media (min-width: 768px) {
	.foot-first { padding: 32px 0; display: flex; align-items: center; }
}
@media (min-width: 920px) {
	.foot-first { padding: 32px 0; display: flex; }
	.footer .langs { display: flex !important; margin-right: auto; margin-left: -8px; }
	.foot-links a { transition: opacity .2s ease; }
	.foot-links a:hover { opacity: .7; }
}

/* Designed By Centroarts */
.ca {
	display: flex; align-items: center; font-size: var(--fs-sm); white-space: nowrap; 
	color: inherit !important; text-decoration: none !important; opacity: .5;
	transition: opacity .2s ease;
}
.ca:hover { opacity: .7; }
.ca-icon { margin-right: 16px; }
.ca-text > * { font-style: normal; }
.ca-text::before { content: attr(title)" "; }

@media (max-width: 499px) {
	.ca-text::before { display: block; }
}
@media (min-width: 500px) {
	.ca-icon { width: 24px; height: 24px; margin-right: 12px; }
}
@media (min-width: 920px) {
	.ca-icon { order: 13; margin-left: 12px; margin-right: 0; }
}
@media (min-width: 920px) and (max-width: 1379px) {
	html.scroll .centroarts { transform: translateX(-48px); transition: transform .2s ease; }
}

/* Langs */
.langs { display: flex; }
.langs > button { padding: 8px; border: 0 none; background: none !important; }
.langs > button > i {
	width: 24px; height: 24px; display: block; border-radius: 50%; cursor: pointer;
	background-image: url(../images/flags.webp);
	background-size: auto 100%;
}

/* - Кнопка наверх - Сбоку - */
.fly-scroll-up { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
html.scroll .fly-scroll-up { opacity: 1; visibility: visible; }
.fly-scroll-up { display: flex !important; }
.fly-scroll-up > a { display: flex; justify-content: center; }

@media (max-width: 1379px) {
	.fly-scroll-up { position: fixed; z-index: 99; right: 0; bottom: 0; margin: 16px; }
	.fly-scroll-up > a {
		width: 48px; height: 48px; padding: 8px; border-radius: 50%; align-items: center;
		background-color: var(--scroll-fly-bg); color: var(--scroll-fly-icon-color);
		backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	}
}
@media (min-width: 1380px) {
	.fly-scroll-up { position: absolute; align-items: flex-end; left: 0; bottom: 0; top: 0; z-index: 99; width: 72px; }
	.fly-scroll-up > a {
		position: sticky; bottom: 0; align-items: flex-end;
		padding: 32px 16px; height: 80vh; color: var(--link-color);
		background-image: linear-gradient(180deg, rgba(var(--link-color-rgb), 0) 36.53%, rgba(var(--link-color-rgb), 0.05) 100%);
	}
	.fly-scroll-up > a .ic { transition: transform .2s ease; }
	.fly-scroll-up > a:hover .ic { transform: translateY(-3px); }

	.footer .upper {
		display: flex !important; align-items: center; font-weight: bold; margin-left: 56px;
		line-height: 24px; padding: 8px 0; text-decoration: none !important;
	}
	.footer .upper::before {
		content: attr(title); margin-right: 8px; opacity: .7;
		transition: opacity .2s ease;
	}
	.footer .upper > svg { display: block; width: 24px; height: 24px; }
	.footer .upper:hover::before { opacity: 1; }
}

/* - Sidebar - */
@media (min-width: 992px) {
	.str { display: flex; }
	.str-side { min-width: 300px; max-width: 300px; margin-left: var(--grid-gap); display: block !important; }
	.str-cont { flex: 1 1 auto; min-width: 0; max-width: 936px; }
	.sticky { 
		position: sticky; display: flex; align-items: center; justify-content: center; top: calc(var(--gap) + var(--header-height));
		max-width: 300px; flex-flow: wrap;
	}
	.str-side .block { overflow-x: hidden; }
	.block + .block { margin-top: var(--wrp-padding); }
}
@media (min-width: 1200px) {
	.str-cont { max-width: 856px; }
	.str-side { min-width: 380px; max-width: 380px; }
	.sticky { max-width: 380px; }
}

/* - Block - */
.cbox {
	background-color: var(--post-bg-color); min-width: 0;
}
@media (min-width: 576px) {
	.cbox { border-radius: var(--post-radius); }
}

#adfox_desktop_3 { max-width: 380px; max-height: 80vh; overflow: hidden; }