/* bs5simplyblog theme for Bludit
 * Стиль приведён в соответствие со style.css:
 *  - Шрифт: "Open Sans", Helvetica, Arial, sans-serif
 *  - Основной акцент: #0776A0
 *  - Дополнительный акцент: #FF8800
 *  - Заголовки: жирные, чёрные, line-height 1.3
 *  - Ссылки: чёрные, dotted underline; hover — нижняя граница #FF8800
 */

/* ===== Brand palette (общие переменные) ===== */
:root {
    --brand-primary: #0776A0;
    --brand-accent:  #FF8800;
    --brand-primary-hover: #065e80;
    --brand-accent-hover:  #FF8800;
    --color-heading: #000;
    --color-text: #333;
    --color-muted: #888;
    --color-border-soft: #ebebeb;
    --font-base: "Open Sans", Helvetica, Arial, sans-serif;
}

[data-bs-theme=dark] {
    --color-navlink: var(--bs-warning-text-emphasis);
    --color-monostuff: var(--bs-dark-bg-subtle);
}
[data-bs-theme=light] {
    --color-navlink: var(--brand-primary);
    --color-monostuff: var(--bs-light-bg-subtle);
}

/* ===== Base typography ===== */
body, html {
    height: 100%;
    margin: 0;
}
body {
    font-family: var(--font-base);
    font-size: 0.875rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    font-weight: 700;
    line-height: 1.3;
    color: #000;
}
h1, h4, h5, h6 {
    margin: 0 0 20px;
    margin: 0 0 1.25rem;
}
h2, h3 {
    margin: 20px 0;
    margin: 1.25rem 0;
}
h1 {
    font-size: 32px;
    font-size: 2rem;
}
h2 {
    font-size: 24px;
    font-size: 1.5rem;
}
h3 {
    font-size: 20px;
    font-size: 1.25rem;
}
h4 {
    font-size: 18px;
    font-size: 1.125rem;
}
h5 {
    font-size: 20px;
    font-size: 1.25rem;
    color: #888;
}
h6 {
    font-size: 12px;
    font-size: 0.75rem;
    color: #888;
}
h5 a, h6 a { color: var(--color-muted); }

p { margin: 0 0 1.25rem; }
hr { margin: 0 0 1.25rem; border: 0; border-top: 1px solid #dadada; }
mark { background-color: #fd5; }

/* ===== Links ===== */
a, a:visited, a:active {
    color: var(--brand-primary);
    text-decoration: none !important;
    text-underline-offset: 0.25em !important;
    border-bottom: 1px dotted;
    transition: color .2s ease, border-color .2s ease, background-color .25s ease-out;
}
a:hover {
    color: var(--brand-accent);
    text-decoration: none !important;
    border-bottom: 2px solid var(--brand-accent);
}

/* Сбрасываем подчёркивание для специальных bootstrap-ссылок */
a.nav-link, a.nav-link:visited {
    padding-left: 1px !important;
    color: var(--color-navlink);
    border-bottom: 0;
}
a.nav-link:hover {
    color: var(--brand-accent);
    text-decoration: none !important;
    font-weight: bold;
    border-bottom: 0;
}
.nav-item { padding-left: 1px !important; }

a.active-nav,
a.active-nav:visited,
a.active-nav:active {
    color: var(--brand-primary) !important;
    font-weight: bold !important;
    display: inline-block !important;
    border-bottom: 0;
}
a.active-nav:hover { text-decoration: none !important; }

a.badge, a.badge:hover, a.badge:visited {
    text-decoration: none !important;
    border-bottom: 0;
}

a.category-button {
    font-size: 0.9rem !important;
    font-weight: bold !important;
    text-decoration: none !important;
    color: var(--brand-primary) !important;
    border-bottom: 0;
}
a.category-button:hover {
    color: var(--brand-accent) !important;
    text-decoration: underline !important;
}
a.category-button:visited, a.category-button:active {
    text-decoration: none !important;
}

a.read-more {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    font-weight: 700;
    border-bottom: 0;
}
a.read-more:hover {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
}

/* ===== Layout-specific (logo / site header / slogan) ===== */
.bs5simplyblog-logo {}
.bs5simplyblog-logo-img {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
}
.bs5simplyblog-logo-img-header {
    width: 2.4rem !important;
    height: 2.4rem !important;
    min-width: 2.4rem !important;
    min-height: 2.4rem !important;
}
.bs5simplyblog-cover-img {
    padding: 0.25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto;
}
.bs5socialmedia-icon {
    width: 2rem !important;
    height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
}

h1.site-header a,
h1.site-header a:hover,
h1.site-header a:visited,
h1.site-header a:active {
    color: var(--brand-primary) !important;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    text-underline-offset: unset !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
}
.site-slogan {
    margin-top: -2px !important;
    padding-top: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    color: var(--brand-accent);
    border-top: 1px solid var(--color-border-soft);
    display: inline-block;
}

/* ===== Pagination / next-prev ===== */
.bs5simplyblog-nextprevpage { clear: both !important; }
.bs5simplyblog-nextprevpages {
    border-top: 2px dashed var(--brand-accent) !important;
}

/* ===== Menus (offcanvas / sidebar) ===== */
.bs5simplyblog-menu-header {
    font-size: 1.0rem;
    color: var(--brand-primary);
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 3px solid var(--brand-accent);
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.bs5simplyblog-menu-item {
    margin-left: 0 !important;
    margin-top: 2px !important;
    font-size: 1.3rem;
    font-weight: 700;
}
ul.bs5simplyblog-menu { list-style: none !important; }
li.bs5simplyblog-menu-item {
    margin-top: 0px !important;
    font-size: 0.9rem;
}
li.bs5simplyblog-menu-item a,
div.bs5simplyblog-menu-item a {
    text-decoration: none !important;
    color: var(--color-navlink) !important;
    border-bottom: 0;
}
li.bs5simplyblog-menu-item a:hover,
div.bs5simplyblog-menu-item a:hover {
    color: var(--brand-accent) !important;
    font-weight: bold !important;
}

.bs5offcanvas-section { margin-top: 1.6rem !important; }
.bs5offcanvas-section .h5 { font-size: 1.0rem !important; color: var(--brand-primary); }
.bs5offcanvas-section .plugin { margin-top: 1.5rem !important; }
.bs5offcanvas-section .plugin-content { margin-left: 1rem !important; }
.bs5offcanvas-section .plugin h2 {
    font-size: 1.0rem !important;
    color: var(--brand-primary);
    text-transform: uppercase;
    border-bottom: 3px solid var(--brand-accent);
    padding-bottom: 4px;
}
.bs5offcanvas-section .plugin .plugin-content { font-size: 0.9rem !important; }
.bs5offcanvas-section .plugin .plugin-label {
    font-size: 0.9rem !important;
    font-weight: bold !important;
}
.bs5offcanvas-section .plugin .plugin-content a {
    text-decoration: none !important;
    color: var(--color-navlink);
    border-bottom: 0;
}

.bs5offcanvas-section .plugin .plugin-content a:not([href]):not([class]),
.bs5offcanvas-section .plugin .plugin-content a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}
.bs5offcanvas-section .plugin .plugin-content ul {
    margin-left: 0.25rem !important;
    padding-left: 0 !important;
}
.bs5offcanvas-section .plugin .plugin-content li {
    list-style: none !important;
/*    margin-left: -1.1rem  !important;
    margin-bottom: 0.5rem !important;
*/
}
.bs5offcanvas-section .plugin-search { margin-bottom: 1.2rem !important; }
.bs5offcanvas-section .plugin-search .plugin-content input { padding: 0.5rem !important; }
.bs5offcanvas-section .plugin-search .plugin-content input[type=text] {
    font-size: 1.0rem !important;
    font-family: monospace !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 3px !important;
}

/* Теги */

.bs5offcanvas-section .plugin-tags ul {
  transform: translateX(-20px);
}

.bs5offcanvas-section .plugin-tags ul {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap; /* опционально: перенос на новую строку */
  margin-left: 0.25rem !important;
  padding-left: 0 !important;
  list-style: none;
}

.bs5offcanvas-section .plugin-tags li,
.bs5offcanvas-section .plugin-categories li {
  display: block;
  margin: 0;
  list-style: none;
}

.bs5offcanvas-section .plugin-tags li a,
.bs5offcanvas-section .plugin-categories li a {
  color: #fff !important;
  padding: 5px 10px;
  font-weight: 700;
  white-space: pre-line;
  background: #0776A0;
  border-bottom: 0 !important;
  display: inline-block;
}

.bs5offcanvas-section .plugin-tags li a,
.bs5offcanvas-section .plugin-categories li a,
.bs5offcanvas-section .plugin-tags li a:focus,
.bs5offcanvas-section .plugin-categories li a:focus,
.bs5offcanvas-section .plugin-tags li a:visited,
.bs5offcanvas-section .plugin-categories li a:visited {
  color: #fff !important;
}

.bs5offcanvas-section .plugin-tags a:hover,
.bs5offcanvas-section .plugin-categories a:hover {
  color: #fff !important;
  background: #f80;
}

/* News */

#nws {
  transform: translateX(-16px);
}

#nws li{
  padding-bottom: 5px;
}

#nws a:hover {
  color: var(--brand-accent);
}

/* Список */

.bs5offcanvas-section .plugin .plugin-content .counter {
    margin-left: 10px !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
    font-variant-numeric: oldstyle-nums slashed-zero !important;
    background: var(--color-border-soft);
    color: #666;
    border-radius: 2em;
}
.bs5offcanvas-section .plugin .plugin-content .counter:hover {
    background: var(--brand-accent);
    color: #fff;
    font-weight: bold !important;
}

/* ===== Footer ===== */
.bs5simplyblog-footer {
    font-size: 0.75em !important;
    margin-top: 75px !important;
    padding: 10px 25px;
    color: #fff;
    border-top: 3px solid var(--brand-accent);
}
.bs5simplyblog-footer a,
.bs5simplyblog-footer a:visited {
    color: #fff !important;
    border-bottom: 0;
}
.bs5simplyblog-footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
    border-bottom: 0;
}

.bs5simplyblog-more-menu {
    width: 300px !important;
    max-width: 300px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: scroll !important;
}

/* ===== Disable transitions ===== */
.bs5simplyblog-notransition,
.collapsing,
.collapse.show,
.collapse.collapsing,
.offcanvas-backdrop {
    transition-delay: 0ms !important;
    transition: none !important;
}

/* ===== Layout ===== */
.menu-area { height: 100%; overflow-y: auto; }
.content-area { height: 100%; overflow-y: auto; }
#content-area-inner { max-width: 1280px; }

.navbar-toggler-icon {
    width: 1rem !important;
    height: 1rem !important;
}

/* ===== Media (images, figures) ===== */
figure img,
.img-thumbnail {
    margin: 3px !important;
}
p img {
    padding: 0.25rem;
    margin: 3px !important;
    background-color: var(--bs-body-bg);
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== Blockquote ===== */
blockquote {
    margin-bottom: 1rem !important;
    margin-right: 2rem !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    border-left: 3px solid var(--brand-primary) !important;
    padding-left: 1rem !important;
    margin-left: 1rem !important;
}
blockquote > :last-child { margin-bottom: 0; }

/* ===== Code / pre / kbd ===== */
kbd, samp, pre, code {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
                 "Lucida Sans Typewriter", "DejaVu Sans Mono",
                 "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
                 Monaco, "Courier New", Courier, monospace !important;
}
pre, samp, code {
    font-size: 0.9em !important;
    line-height: 1.0em !important;
}
pre, code {
    white-space: pre-wrap !important;
    tab-width: 4 !important;
}
pre {
    background-color: var(--color-monostuff) !important;
    color: var(--bs-light-text-emphasis) !important;
    border: 1px solid var(--bs-light-border-subtle) !important;
    border-radius: .4rem !important;
    line-height: 1.4em !important;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    white-space: pre !important;
    padding: 0.6em 0.6em !important;
    overflow-x: auto !important;
}
div > code,
p > code,
li > code,
dd > code,
td > code {
    background-color: var(--color-monostuff) !important;
    color: var(--bs-light-text-emphasis) !important;
    border: 1px solid var(--bs-light-border-subtle) !important;
    border-radius: .4rem !important;
    word-wrap: break-word !important;
    page-break-inside: avoid !important;
    padding: .3rem .3rem .2rem !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    overflow-x: auto !important;
    white-space: pre !important;
}
p > code { border: 0 !important; }
div > code {
    display: block !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.6em !important;
    padding: 0.4rem !important;
    line-height: 1.3em !important;
}
kbd {
    padding: 2px 3px;
    color: #fff;
    background-color: var(--brand-primary);
    border-radius: 2px;
}

/* ===== Accordion ===== */
.accordion {
    --bs-accordion-bg: var(--bg-body-tertiary) !important;
    --bs-accordion-transition: none !important;
    --bs-accordion-border-width: 0 !important;
    --bs-accordion-btn-icon-transition: none !important;
    --bs-accordion-btn-icon-width: 1rem !important;
    --bs-accordion-body-padding-x: 1rem !important;
    --bs-accordion-body-padding-y: 0.2rem !important;
    border: 0;
}
.accordion-button:focus {
    box-shadow: 2px 0 var(--brand-accent) inset !important;
    border-radius: 0 !important;
}
.accordion-button:not(.collapsed) {
    color: var(--brand-primary) !important;
    background-color: inherit !important;
}
.accordion-button-active {
    box-shadow: 2px 0 var(--brand-accent) inset !important;
    border-radius: 0 !important;
}

/* ===== Page content headings ===== */
.bs5simplyblog-page-content h1 {
    color: var(--brand-primary);
}

.page-content h1, .page-content div.h1 {
    font-size: 1.6rem;
    margin-bottom: 0.1em !important;
}
.page-content h2, .page-content div.h2 {
    font-size: 1.3rem;
    margin-top: 1em !important;
    margin-bottom: 0.1em !important;
}
.page-content h3, .page-content div.h3 {
    font-size: 1.2rem;
    margin-top: 1em !important;
    margin-bottom: 0.1em !important;
}
.page-content h4, .page-content div.h4 {
    font-size: 1.1rem;
    margin-top: 1em !important;
    margin-bottom: 0.1em !important;
}
.page-content h5, .page-content div.h5 {
    font-size: 1.25rem;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.page-content h6, .page-content div.h6 {
    font-size: 0.75rem;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content div.h1,
.page-content div.h1 a,
.page-content div.h2,
.page-content div.h3,
.page-content div.h4 {
    color: #000 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}

.page-content h5,
.page-content h6,
.page-content div.h5,
.page-content div.h6  {
    color: #888 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}


.page-content p { line-height: 1.6; }


/* ===== Tags / badges ===== */
.post-tag {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 2px;
}
.post-tag:hover {
    background-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* ===== Tables ===== */
caption { margin-bottom: 1em; }
table {
    empty-cells: show;
    border: 1px solid var(--bs-secondary-bg);
    width: 100%;
    font-size: 0.9em;
    margin-bottom: 1.25rem;
}
thead {
    background-color: var(--brand-primary);
    color: #fff;
    text-align: left;
    vertical-align: bottom;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 0.5em 1em;
    font-variant-numeric: oldstyle-nums slashed-zero !important;
}

/* ===== Buttons (Bludit) ===== */
.btn-primary,
input[type=submit],
input[type=reset] {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color .25s ease-out;
}
.btn-primary:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* ===== highlight.js ===== */
code label {
    padding: 5px 3px 3px 5px !important;
    margin-top: -8px !important;
    margin-right: -9px !important;
    float: right;
    display: inline;
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    min-width: 75px !important;
    text-align: center;
    text-transform: uppercase;
}

[data-bs-theme=dark] {
    --color-hljs: #c9d1d9;
    --color-hljs-doctag: #ff7b72;
    --color-hljs-title: #d2a8ff;
    --color-hljs-attr: #79c0ff;
    --color-hljs-regexp: #a5d6ff;
    --color-hljs-built_in: #ffa657;
    --color-hljs-comment: #8b949e;
    --color-hljs-name: #7ee787;
    --color-hljs-subst: #c9d1d9;
    --color-hljs-section: #1f6feb;
    --color-hljs-bullet: #f2cc60;
    --color-hljs-emphasis: #c9d1d9;
    --color-hljs-strong: #c9d1d9;
    --color-hljs-addition: #aff5b4;
    --color-hljs-addition-bg: #033a16;
    --color-hljs-deletion: #ffdcd7;
    --color-hljs-deletion-bg: #67060c;
}
[data-bs-theme=light] {
    --color-hljs: #24292e;
    --color-hljs-doctag: #d73a49;
    --color-hljs-title: #6f42c1;
    --color-hljs-attr: var(--brand-primary);
    --color-hljs-regexp: #032f62;
    --color-hljs-built_in: var(--brand-accent);
    --color-hljs-comment: #6a737d;
    --color-hljs-name: #22863a;
    --color-hljs-subst: #24292e;
    --color-hljs-section: var(--brand-primary);
    --color-hljs-bullet: #735c0f;
    --color-hljs-emphasis: #24292e;
    --color-hljs-strong: #24292e;
    --color-hljs-addition: #22863a;
    --color-hljs-addition-bg: #f0fff4;
    --color-hljs-deletion: #b31d28;
    --color-hljs-deletion-bg: #ffeef0;
}

.hljs { color: var(--color-hljs); }
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword,
.hljs-template-tag, .hljs-template-variable, .hljs-type,
.hljs-variable.language_ { color: var(--color-hljs-doctag); }
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__,
.hljs-title.function_ { color: var(--color-hljs-title); }
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number,
.hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class,
.hljs-selector-id { color: var(--color-hljs-attr); }
.hljs-regexp, .hljs-string, .hljs-meta .hljs-string { color: var(--color-hljs-regexp); }
.hljs-built_in, .hljs-symbol { color: var(--color-hljs-built_in); }
.hljs-comment, .hljs-code, .hljs-formula { color: var(--color-hljs-comment); }
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: var(--color-hljs-name); }
.hljs-subst { color: var(--color-hljs-subst); }
.hljs-section { color: var(--color-hljs-section); font-weight: bold; }
.hljs-bullet { color: var(--color-hljs-bullet); }
.hljs-emphasis { color: var(--color-hljs-emphasis); font-style: italic; }
.hljs-strong { color: var(--color-hljs-strong); font-weight: bold; }
.hljs-addition { color: var(--color-hljs-addition); background-color: var(--color-hljs-addition-bg); }
.hljs-deletion { color: var(--color-hljs-deletion); background-color: var(--color-hljs-deletion-bg); }

/* ===== Мои изменения ===== */
.mb-5 { margin-bottom: 0rem !important; }

.page-content div.h3 a,
.page-content div.h3 a:visited,
.page-content div.h3 a:active {
font-size: 1rem;
color: var(--color-text) !important;
}

.p-3 {
    padding: 0 !important;
}

.m-0 {
    margin: 5px 0 !important;
}

.mt-1 {
    font-weight: 700;
    margin-top: 1rem !important;   
}

.mt-3 {
    margin-bottom: 1rem !important;
}

.border-bottom {
    border-bottom: 3px var(--bs-border-style) var(--brand-accent) !important;
}

.pagination {
    justify-content: center !important;
}

.pagination li a {
    background: #fff;
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    margin: 10px 3px;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination li a:hover {
	background: var(--brand-primary);
	color: white;
	border-color: var(--brand-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}


/* FLIP */
.flip {	width:100%; max-width: 640px; height: 200px; position: relative; transition:1s; transform-style: preserve-3d; 
   	-webkit-transition:1s;   	-webkit-transform-style: preserve-3d;  	-webkit-transform: rotateY(0deg);
   	-moz-transition:1s;  	-moz-transform-style: preserve-3d;  	-moz-transform: rotateY(0deg); 	}
.flip:hover { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);	}
.flip .front {position: absolute; 	width: 100%; height: 100%;   background:#2EBFBF; 	backface-visibility: hidden;	 -webkit-backface-visibility: hidden;  -moz-backface-visibility: hidden; }
.flip .front:before { content: "перевернуть"; font-size: 0.8em; text-align: left; color: #FFFFFF; padding-left: 10px; }
.flip .back {position: absolute; 	width: 100%; height: 100%;	background:#2BBB55; 	backface-visibility: hidden; transform: rotateY(180deg); 
	-webkit-backface-visibility: hidden; 	-webkit-transform: rotateY(180deg);
  	-moz-backface-visibility: hidden;	-moz-transform: rotateY(180deg); 	}
.flip p {font-size: 1.5em; text-align: left; font-weight: bold; color: #FFFFFF; padding: 10px 20px; position: absolute; top: 50%; transform: translateY(-50%);  }

.flip-container { perspective: 1000px}
.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
.flip-container, .front, .back {width:100%; max-width: 640px; height: 200px; }
.flipper {transition: 0.8s; transform-style: preserve-3d; position: relative;}
.front, .back {	backface-visibility: hidden;	position: absolute; top: 0; left: 0; background:#AAA;}
.front {z-index: 2;	transform: rotateY(0deg); }
.back {	transform: rotateY(180deg);}
.flip-container .front:before { content: "перевернуть"; font-size: 0.8em; text-align: left; color: #FFFFFF; padding-left: 10px; }
.flip-container p {font-size: 1.2em; text-align: left; font-weight: bold; color: #FFFFFF; padding: 10px 20px; position: absolute; top: 35%; transform: translateY(-50%); }

/** Текстовые кнопки **/
.txt-btn-brown a {font-size:1em; color: #ffffff  !important; padding: 10px; line-height: 50px; border: 1px solid #f80 !important; text-align: center; background-color: #f80; border-radius: 3px;  }
.txt-btn-brown a:hover {color: #f80  !important; background-color: #ffffff; text-decoration: none;}

/** Адаптивное видео **/
.vkvideo {
max-width: 100%; 
width: 100%;          
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.vkvideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
max-width: 100%;
}


/* Баннер */
@media (max-width: 480px) {#trntable-0{width: 100%; font-size: 11px; } #trntable-0 b{font-size: 52px; }}
@media (min-width: 481px) {#trntable-0{max-width: 600px; margin: auto; font-size: 14px; } #trntable-0 b{font-size: 64px; }}
#trntable {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4px; align-self: center;  justify-content: center; line-height: normal; text-align:center; color: #555; padding: 5px 5px; margin:0; list-style-type: none; }
#trntable li a{color: #FFF; text-decoration: none; border-bottom: 0 !important;}
#trntable .tr {color: #FFF; background: #0D52A5; border: 2px solid #0D52A5;}
#trntable .tr:hover {background: #FFF; color: #0D52A5; border: 2px solid #0D52A5; transition:0.5s}
#trntable .tr:hover a {color: #0D52A5;transition:0.5s}
#trntable .mf {color: #FFF; background: #FC9A00; border: 2px solid #FC9A00}
#trntable .mf:hover {background: #FFF; color: #FC9A00; border: 2px solid #FC9A00; transition:0.5s}
#trntable .mf:hover a {color: #FC9A00;transition:0.5s}
#trntable .cr {color: #FFF; background: #7641cc; border: 2px solid #7641cc}
#trntable .cr:hover {background: #FFF; color: #7641cc; border: 2px solid #7641cc; transition:0.5s}
#trntable .cr:hover a {color: #7641cc;transition:0.5s}