@font-face {
    font-family: 'inter-regular';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'inter-bold';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'inter-extra-bold';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'inter-thin';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'source-serif';
    src: url('../fonts/source-serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'source-serif-italic';
    src: url('../fonts/source-serif-italic.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}


:root {
  --primary: #6E1FE6;
  --notaccent: #D8FF6A97;
  --accent: #D8FF6A;
  --sans: 'inter-regular', Arial, sans-serif;
  --bold: 'inter-bold', Arial, sans-serif;
  --extra: 'inter-extra-bold', Arial, sans-serif;
  --thin: 'inter-thin', Arial, sans-serif;
  --serif: 'source-serif', Georgia, serif;
  --italic: 'source-serif-italic', Georgia, serif;
  --120: #1d1e22;
  --110: #222222;
  --105: #2B22B2;
  --100: #333333;
  --95: #3C3C3C;
  --90: #454545;
  --85: #4F4F4F;
  --80: #585858;
  --75: #626262;
  --70: #6C6C6C;
  --65: #767676;
  --60: #818181;
  --55: #8B8B8B;
  --50: #969696;
  --45: #A0A0A0;
  --40: #ABABAB;
  --35: #B6B6B6;
  --30: #C1C1C1;
  --25: #CDCDCD;
  --20: #D8D8D8;
  --15: #E3E3E3;
  --10: #EFEFEF;
  --5: #F1F1F1;
  --0: #F7F7F7;
}
abbr,
acronym,
address,
applet,
article,
aside,
audio,
big,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
    font-family: var(--sans);
}
blockquote,
q {
    quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}
img {
    max-width: 100%;
}
html {
    box-sizing: border-box;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*,
:after,
:before {
    box-sizing: inherit;
}



a {
    background-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}

a.post-card-link, a.post-card-link:hover    {border: none;}

@media (max-width: 500px) {
    a.post-card-link:hover  {x-display: none;}
}


b,
strong {
    font-weight: 700;
}



h1 {
    margin: 0.67em 0;
    font-size: 2em;
}
small {
    font-size: 80%;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
mark {
    background-color: #fdffb6;
}
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
    margin: 0;
    color: inherit;
    font: inherit;
}
button {
    overflow: visible;
    border: none;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
input {
    line-height: normal;
}
input:focus {
    outline: none;
}
input[type="checkbox"],
input[type="r1adio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="search"] {
    box-sizing: content-box;
    -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
legend {
    padding: 0;
    border: 0;
}
textarea {
    overflow: auto;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td,
th {
    padding: 0;
}
html {
    overflow-y: scroll;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
html {
    overflow-x: hidden;
}
body {
    color: #454545;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.5rem;
    line-height: 1.6em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}
::-moz-selection {
    text-shadow: none;
    background: #cbeafb;
}
::selection {
    text-shadow: none;
    background: #cbeafb;
}
hr {
    position: relative;
    display: block;
    width: 100%;
    margin: 2.5em 0 3.5em;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #c3c3c3;
    width: 20%
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/** пост **/
/* менюшка */

.nav,
.site-head-left {
    display: -webkit-box;
    display: flex;
}

.nav {
        align-items: center;
}

.nav li a   {color: var(--100); opacity: 1;}

.site-head {
    position: relative;
    z-index: 300;
    margin-top: 0px;
    font-size: 1.35rem;
}

.site-head li {
}
.site-head-left a,
.site-head-right a {
    display: block;
    margin: 0;
    padding: 0;
    color: #131313;
    font-weight: normal;
    opacity: 1;
}
.nav-current a,
.site-head a:hover {
    text-decoration: none;
    opacity: 1;
    color: #6E1FE6;
}
.site-head-center {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
}
.site-head-logo {
    display: inline;
    width: fit-content;
}

@media (min-width: 1200px){
    .site-head-logo {   margin-right: 30px;} 
}


.site-head-logo:hover {
    text-decoration: none;
}

.site-head-logo img {
    display: block;
    width: auto;
    height: 50px;
    filter: grayscale(100%) brightness(0);
    opacity: 1;
    transition: 0.4s ease;
    z-index: 44;
    margin-top: 10px;
}

.site-head-logo img:hover   {filter: none; opacity: 1;}

.site-head-container {
    display: flex;
    flex-direction: row;    
    grid-template-columns: 1fr auto 1fr;
}

@media (max-width: 1200px){
    .site-head-logo img         {height: 60px;}
}


@media (max-width: 960px){
    .site-head-logo img {margin-top: 10px;         height: 50px;
        margin-right: 10px;}
    .site-head-container{flex-direction: row;}
}


@media (max-width: 640px){
    .site-head-logo img {height: 46px; margin-right: 10px;}
}


@media (max-width: 500px){
    .site-head                      {padding: 0; margin-top: 0;}
    .site-head-container            {display: flex; flex-direction: row; margin-top: 0px;}
    .site-head-logo                 {margin-top: 5px;}
    .1site-head li                   {padding: 0; padding-right: 10px; line-height: 2.2em;}

    .site-head-logo img             {height: 45px; top: unset; left: unset; position: relative; margin-top: 0px;}
}


/* главная */









#primary                        {   
                                position: relative;
                                width: 600px;
                                column-count: 4;
                                justify-content: space-between;
                                align-items: flex-start;
                                padding: 0; margin: 0;
                                list-style: none;
                                flex-wrap: wrap;}


#primary                        {margin-left: 0; column-count: 5;margin-top: 5px;}
#primary li                     {padding: 0; margin: 0 0 5px 0;}

#primary li, 
#secondary li                   {padding: 0; 
                                line-height: normal; 
                                font-size: 10pt; 
                                display: inline-block;}

#primary li, 
#secondary li                   {
                                padding: 3px 0 1px 0;
                                margin-bottom: 5px;}

#primary a li, 
#secondary a li                 {border-bottom: 1px solid;}                 

#primary a                      {padding: 5px 10px 5px 9px;}
#secondary a                    {padding: 3px 6px 3px 5px;}

#primary a:hover, 
#secondary a:hover,
#primary li b, 
#secondary li b,
#primary a.in,
#secondary a.in,
#primary li b,
#secondary li b                 {
                                border-bottom-color: var(--accent);
                                background-color: var(--accent);}



#primary a:hover li, 
#secondary a:hover li           {border-bottom-color: var(--accent) !important;}

#primary a.in:hover li,
#secondary a.in li              {border-bottom-color: var(--accent);}                       

#primary a.in li                {padding-bottom: 1px;}

#primary li b,
#secondary li b                 {
                                padding: 5px 10px 5px 9px;
                                font-family: var(--bold);
                                z-index: -1;
                                position: relative;}

#secondary li b                 {padding: 3px 6px 3px 5px;}



@media (min-width: 1200px){
    #primary                    {margin-left: 0px;}
    #primary .gh-search svg,
    #secondary .gh-search svg   {width: 30px; margin-top: 0px;}
}

@media (max-width: 1200px){
    #primary                    {column-count: 5;width: min-content;}
    #primary li,
    #secondary li               {line-height: normal;    font-size: 1.3rem;}


}

#primary .ac {background-color: var(--accent); font-weight: 800;}

#primary .se,
#secondary .se                  {
                                position: relative; 
                                top: -25px; left: 5px;
                                -webkit-animation:se .5s cubic-bezier(.25,.46,.45,.94) both;
                                animation:se .5s cubic-bezier(.25,.46,.45,.94) both;}

@media (max-width: 960px)       {

    #primary                    {justify-content: flex-start; 
                                padding-left: 0px;
                                width: 500px;}

    #primary li                 {
                                font-size: 1.2rem;
                                
                                line-height: normal;}
}

#primary .gh-icon-btn,
#secondary .gh-icon-btn        {display: block; 
                                padding: 6px 14px; 
                                height: unset; 
                                line-height: normal;}

#secondary .gh-icon-btn         {padding: 0px 14px;}

@media (max-width: 640px){
    #primary                    {width: 390px;}
    #primary li                 {font-size: 1.2rem;}
}

@media (max-width: 700px){

}

@media (max-width: 500px){
    #primary                {
                            width: 100%;
                            top: unset; 
                            left: unset; 
                            column-count: 4;
                            position: relative; 
                            padding: 0; 
                            justify-content: flex-start; 
                            margin-left: -8px;
                            padding-left: 0px;}

    #primary li             {font-size: 1.2rem; 
                            margin-right: 0px; 
                            display: inline-block;
                            padding-bottom: 0px;
                            line-height: 1.7;}

    #primary a li,
    #secondary a li           {margin: 4px 0; padding: 0 0 1px 0; line-height: normal;}

    #primary a {padding: 1px 10px 4px 9px;}

    #primary .se,
    #secondary .se{display: none;}


}




article#oc {max-width: 900px;}




#comments {display: none;}



/* списки */

article.post p + ul, 
article.post p + ol {
    padding: 0 0 0 10px;
    margin: -20px 0 60px 0px;
}

article.post li::marker {
    content: "♦";
    font-size: small;
}

article.post li,
.post-content-body li               {margin: 0 0 23px 0; padding-left: 15px; x-font-size: 14.2pt; x-line-height: 1;}

@media (max-width: 500px){
    article.post p + ul, 
    article.post p + ol {margin: -10px 0 40px 0px;}

    article.post li, 
    .post-content-body li{padding-left: 10px;}
}


/* текст в страницах */

article.page.post p,
article.page.post li                    {margin: 0px 0 20px 0; font-size: 13pt; line-height: 1.6;}

article.page.post ol,
article.page.post ul                    {margin: 0; padding: 0;}

article.page.post ul li               {padding-left: 10px; margin-left: 10px;}
article.page.post ul li::marker       {content: "•"; padding-left: 10px; margin-left: 10px;}

article.page.post ol li,
article.page.post ul ul li            {padding-left: 10px; margin-left: 25px;}

article.page.post li ul li::marker    {content: "—"; font-size: 1.2em;}

article.page.post ul li ul li         {padding-left: 10px;}
article.page.post ol ol               {list-style: upper-roman; padding-right: 0;}

article.page.post h3                  {margin-top: 40px; font-size: 3.9rem; letter-spacing: -2px;}

article.page.post h3 + h4             {margin-top: 10px;}

article.page.post h4                  {font-size: 2.6rem; margin: 50px 0 10px 0; letter-spacing: -1px;}

article.page.post h4:first-child      {margin-top: 20px;}


@media (max-width: 500px){
    article.page.post p, 
    article.page.post li  {font-size: 1.4rem; margin: 0px 0 10px 0;}

    article.page.post h3  {font-size: 2.8rem; letter-spacing: -1.4px;}
    article.page.post h4  {font-size: 2rem; margin: 40px 0 10px 0;}
    article.page.post ul ul {padding: 0 0 0 3px;}

    article.page.post ol, 
    article.page.post ul  {margin: 0; padding-right: 10px;}

}



/* заголовки  */

.page-head-title {
    margin: 0;
    font-size: 4.2rem;
    width: fit-content;
}

section{
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;    
}

section .page-head-title  {
    margin: 0;
    font-size: 80pt;
    font-family: var(--bold);
    text-align: left;
    letter-spacing: -8px;
}

@media (max-width: 960px){
    section .page-head-title {font-size: 7.4rem;    letter-spacing: -7px;}
}

section.page-head {
    padding: 0;
    margin-top: 130px;
    justify-content: flex-start;
    width: 100%;
    z-index: -1;
    max-width: 100%;
    position: relative;
    margin-bottom: -5px;
}

.page-head-description {
    margin: -20px 0;
    font-size: 5.2rem;
    letter-spacing: -5px;
    font-family: var(--thin);
    font-weight: 300;
    line-height: 1.35em;
}

@media (max-width: 960px){
    .page-head-description {font-size: 4.2rem; letter-spacing: -4px;}
}

@media (max-width: 500px) {
    section{margin: 0px 0 20px 0; padding-top: 20px;}
    p.page-head-description {
        font-size: 32pt;
        margin: -30px 0 1.6vw;
        letter-spacing: -6px;
    }
}

section small {
    position: absolute;
    top: 10px;
    margin-left: 120px;
    text-decoration: none;
    font-size: 8pt;
}

#jd{display: flex;}
#jd h1 {width: max-content;}
#jd p.page-head-description{margin-top: -40px;}


/** материалы **/
/* переключатель */

#switch         {display: flex; 
    margin-right: 10px;
    position: relative;
    margin-left: 10px;
    }

#switch .pics, #switch .list{cursor: pointer;}
#switch .pics,
#switch .list{padding: 3px;}


#switch .pics:hover,
#switch .list:hover  {    background-color: var(--accent); transition: all .2s;}
#switch .pics:hover svg path,
#switch .list:hover svg path {fill: var(--100); transition: all .2s;}

#switch .se{background: var(--accent); cursor: default;}

@media (max-width: 500px){
    #switch .pics,
    #switch .list{padding: 0;}
}



/* материалы списком */

.post-feed.lst {display: block;}

.post-feed.lst .post-card{
        background-image: none !important;
        width: unset; height: unset;
        display: block;
        overflow: unset;}

.post-feed.lst .post-card-content{
    opacity: 1 !important;
    display: block;
    position: relative;}

.post-feed.lst .post-card-content{background: unset;}




ul#lst, .post-feed.lst      {
            column-gap: 40px;
            column-width: 231px;
            column-rule-width: 1px;
            margin-top: -1vw;
            break-inside: avoid-column;
            column-rule-style: double;
            padding-top: 20px;
            }

ul#lst big,
.post-feed.lst .post-card-title {padding: 5px 0; font-size: 1.5rem;}

.post-feed.lst .post-card-title {
    text-align: left; 
    font-weight: 400;
    line-height: 1.8;
    border-bottom: 1px solid var(--85);}

.post-feed.lst a:hover{background: none;}
.post-feed.lst h2{display: inline;}

.post-feed.lst article a{padding-top: 4px;}

.post-feed article i,
.post-feed.lst article i {
    border: 1px solid;
    font-family: 'Inter';
    font-size: 8pt;
    border-radius: 4px;
    font-weight: 400;
    padding: 1px 5px;
    font-style: normal;
    margin-top: 4px;
    display: inline-block;
    line-height: 1.1;
    letter-spacing: 0px;

}

.post-feed.lst article i{
    margin-left: 10px;
    display: inline;
    padding: 1px 4px;}


ul#lst a:hover big,
ul#lst li:hover small,
.post-feed.lst article:hover h2,
.post-feed.lst article:hover a {background-color: var(--accent); border-bottom: 0;}
            
ul#lst li,
.post-feed.lst article      {list-style: none;
    margin-bottom: 15px;
    line-height: 1.7;
    margin: 0 0 35px 0;
    break-inside: avoid-column;
    }

ul#lst small {
    display: block;
    margin: 0;
    padding: 10px 0;
    font-size: 7pt;
    width: fit-content;
}

@media (max-width: 500px){
    ul#lst{padding: 0;}
    ul#lst big{font-size: 1.53rem}
    ul#lst li{margin-bottom: 35px;}
    ul#lst small{padding: 5px 0;}

    ul#lst, .post-feed.lst{
        column-width: auto;
        display: block;
        width: unset;}

    .post-feed.lst article{margin-bottom: 25px; font-size: 1.3rem;}
    .post-feed article i{font-size: 1rem; padding: 0px 4px;}
}

ul#lst li a,
ul#lst a big, 
#secondary ul li a,
#ghost-search-results a {color: #131313; 
                        border-bottom: 1px solid;
                        transition: 0.2s ease;
                        padding-bottom: 3px;
                        padding-top: 5px;
                        }

ul#lst li big{transition: none;}








@media (max-width: 480px){
    #primary{margin-left: 0; column-count: 3;}
    #primary li{line-height: 1.5;}

    #switch .list {padding: 0px;}
}







/* раздел списком */



ul#list {        z-index: 999;
            background: transparent;
            position: relative;
            break-after: avoid-column;
            column-count: 4;
            column-rule: 1px solid;
            column-gap: 70px;
            transform: none;
            margin: 0;
            padding: 0;
            display: block;
            width: 100%;}

ul#list  li {
            display: list-item;
            -webkit-column-break-inside: avoid;
            font-size: 12pt;
            line-height: 1.5;
            margin-bottom: 30px;
            height: auto; width: auto;
            aspect-ratio: unset;
            }

ul#list li a{padding-top: 2px;}

ul#list li a:hover {
            padding: 2px 0;
            }


@media (min-width: 1700px){
    ul#list {column-count: 5;}
}

@media (max-width: 960px){
    ul#list       {column-count: 3;}
    ul#list li    {font-size: 1.4rem;}
}

@media (max-width: 640px){
    ul#list       {column-count: 3; column-gap: 40px;}
    ul#list li    {font-size: 1.3rem; margin-bottom: 25px;}
}

@media (max-width: 480px){
    ul#list       {column-gap: 30px; column-count: 2;}
    ul#list  li   {}
}


@media (prefers-color-scheme: light) {
    ul#list li a {
                color: var(--100);
                border-bottom: 1px solid var(--30);
                }

    ul#list li a:hover {
                color: var(--100);
                background-color: var(--accent);}

    ul#list {column-rule: 1px solid var(--20);}
}

@media (prefers-color-scheme: dark) {
    ul#list li a {
                color: white;
                border-bottom: 1px solid var(--80);
                }

    ul#list {column-rule: 1px solid var(--100);}                

    ul#list li a:hover {
                color: var(--100);
                background-color: var(--accent);}
}







@media (max-width: 500px) {
    #jd{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: row-reverse;

    }

    section.page-head {
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-top: 90px;
    flex-direction: column-reverse;
    }

    .page-head section h1 {
    font-size: 31pt;
    letter-spacing: -4px;
    display: inline;
    line-height: 0.7;
    width: auto;
    }

    #jd p.page-head-description{margin-top: -24px;
    font-size: 3.3rem;}

    #jd small{display: none;}

    .page-head  {justify-content: flex-start; 
        max-width: 100%; 
        padding: 1vw 0 5vw 0; }

    section .page-head-title {
        font-size: 4.4rem;
        letter-spacing: -3.3px;}

    section .page-head-description {
        font-size: 2.7rem;
        letter-spacing: -2.5px;
        margin-top: -10px;}
}



/* плитки */
.post-card-title  {letter-spacing: -0.3px;}

.post-feed{    flex-wrap: wrap;}



.post-card,
.post-feed {
    display: -webkit-box;
    display: flex;
}

.post-card,
.post-card video {
    -webkit-box-flex: 1;
    flex: 0 0 14.28%;
    position: relative;
    aspect-ratio: 1 / 1;
    background: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    counter-increment: posts;
}

.post-card video{width: 100%;}
    
    
@media (min-width: 1600px){.post-card-title    {font-size: 1.46rem;}}

@media (max-width: 1600px){
    .post-card-title    {font-size: 1.36rem;}

    .post-card,
    .post-card video    {flex: 0 0 16.66%;}
}


/* видеоклипы */


#oc.tag-video .author-card,
#oc.tag-photo .author-card         {margin-top: 30px; flex-direction: column;}

#oc.tag-video .author-card .plu,
#oc.tag-photo .author-card .plu     {display: none;}

@media (min-width: 1200px){
    .post-feed.video article                        {flex: 0 0 12%; height: 9.1vw; width: 9.1vw;}
    .post-feed.video article .post-card-title       {max-width: 70%; font-size: 1.3rem;}
}


@media (max-width: 1200px){
    .post-card,
    .post-card video    {flex: 0 0 20%;}
    
    .post-card-title    {font-size: 1.26rem;}
    .post-feed.video article {height: 14vw;}
}


@media (max-width: 960px){
    .post-card-title    {font-size: 1.16rem; line-height: 1.1;    max-width: 80%;}
    .post-feed.video article {height: 18.49vw;}
}


/* плитки на планшетах */
@media (min-width: 800px) and (max-width: 870px) {
    .post-card,
    .post-card video    {flex: 0 0 25%;}
}


#site-main .post-template .post-card-title h2   {letter-spacing: 0;}


@media (max-width: 640px) {

    section .page-head-title        {font-size: 4.7rem; letter-spacing: -3px;}
    p.page-head-description         {font-size: 3.2rem; letter-spacing: -2px; margin-top: -19px;}

    .post-feed.video article        {height: 19vw;}

    .post-card,
    .post-card video {
        -webkit-box-flex: 1;
        flex: 0 0 25%;
    }
    
    .post-feed {
        width: 100vw;
        padding-bottom: 25px;
        transform: translateX(-50%);
        margin-left: 50%;
    }
    
}


@media (max-width: 480px){
    .post-feed.video article      {height: 26.3vw;}

    .post-card,
    .post-card video {
        -webkit-box-flex: 1;
        flex: 0 0 33.3%;
    }   
}

.post-card-large {

}
.post-card-link {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    display: block;
}
.post-card-content {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    background: var(--accent);
    opacity: 1;
    -webkit-transition: opacity 0.5s cubic-bezier(0.33, 0, 0.2, 1);
    transition: opacity 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}
.post-card.with-image .post-card-content {
    opacity: 0;
}
@media (max-width: 700px) {
    .post-card.with-image .post-card-content {
        opacity: 0;
    }
    
    .post-card-content {

    }
}
.post-card-link:hover .post-card-content {
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.33, 0, 0.2, 1);
    transition: opacity 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}
.post-card-title {
    margin: 0;
    display: inline-block;
    font-family: var(--bold);
    x-font-size: 1.46rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: 80%;
    text-align: center;
    -webkit-transition: all 0.3s cubic-bezier(0.33, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}

@media (max-width: 700px) {
    .post-card-title {
    font-size: 1.1rem;
    line-height: 1;
     max-width: 85%;
    }
}
.post-content {
    max-width: 900px;
    margin: 0 0 70px 0;
    position: relative;
}

@media (max-width: 1200px){
    .post-content {max-width: 900px;}
}

.post-content-header {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: left;
    align-items: left;
}





/* декор под меню */



/* заголовки */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    line-height: 1.1;
    font-weight: 700;
    x-color: #111;
    text-rendering: optimizeLegibility;
    font-family: var(--bold);
}



h1 {
    margin: 0 0 20px 0;
    font-family: var(--bold);
    font-size: 50pt;
    line-height: .8;
    letter-spacing: -4.5px;
}

.post-content-body h1   {    margin-bottom: 30px;}
.post-content-body h1 a{    text-decoration: underline; border-bottom: none; padding-bottom: 0; z-index: 2; position: relative;}

.post-content-title u {
    text-decoration: none;
    font-size: 20px;
    border: 1px solid;
    padding: 4px 8px;
    border-radius: 7px;
    letter-spacing: -1px;
    font-weight: 300;
    font-family: var(--thin);
    margin-left: 10px;
    vertical-align: super;
    top: 7px;
    position: relative;
}















#site-main{font-family: var(--sans); margin: 50px 0 100px;}

@media (max-width: 480px){
    #site-main {margin: 30px 0 100px;}
}

#oc.tag-photo h1 {
    margin: 0 0 20px 0;
    font-size: 44pt;
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -3px;
}

#oc .kg-header-card {background-color: transparent;}

#oc.tag-top h1 u {display: none;}

@media(max-width: 1200px){
    h1                          {font-size: 6.2rem; 
                                letter-spacing: -5px; 
                                width: 90%;}

    .post-content-title u       {font-size: 1.8rem;}
}

@media (max-width: 960px){
        h1{
            font-size: 5.8rem;
            letter-spacing: -4px;
            line-height: .8;
            margin-bottom: 10px;
            width: 95%;}
}

@media (max-width: 640px){
        h1{
            font-size: 4.2rem;
            letter-spacing: -2.5px;
            width: 95%;}

    #oc.tag-photo h1    {    font-size: 4.1rem;
    line-height: 0.9;    letter-spacing: -2px;}

    .post-content-title u{margin-left: 0;}

        #oc.tag-photo .post-content-body  p {
        line-height: 1.5;
        font-size: 1.42rem;
        }
}

@media (max-width: 500px) {
    h1 {
        font-size: 3.6rem;
        letter-spacing: -2.2px;
        margin-bottom: 5px;
        width: 100%;
        }

    .post-content-title u {
        font-size: 1.3rem;
        padding: 1px 6px;
        margin-left: 0px;
        }


    #oc.tag-photo h1   {
        font-size: 3.1rem;
        letter-spacing: -1.4px;
        line-height: .9;
        margin: 0 0 9px 0;}

    #oc.tag-photo h1 a {
        text-decoration: underline;
        border-bottom: none;
        padding-bottom: 0;
        z-index: 2;
        position: relative;
        text-decoration-thickness: 1px;
        text-decoration-color: #ffffff55;
        text-decoration-skip-ink: auto;
        }



    #oc.tag-photo .post-content-body {
        margin-top: 0px;
    }

    #oc.tag-photo .post-content-body em, 
    #oc.tag-photo .post-content-body i {
        font-size: 1.54rem;
    }

    #oc.tag-photo .post-content-body  p {
        line-height: 1.58;
        font-size: 1.34rem;
        margin-bottom: 20px;
        }

    #oc.tag-photo .post-content-body p a {
        margin-bottom: 0px;
        text-decoration: underline;
        text-decoration-color: #ffffff55;
        border: none;
    }

    #oc.tag-photo .kg-card {margin-top: 30px;}
}



h2  {
    line-height: 1;
    font-size: 5rem;
    padding-top: 10px;
    letter-spacing: -1.5px;
    margin: 0;
    color: #222;
    }

@media (max-width: 500px){
h2      {
        margin-bottom: 20px; 
        width: 100%; 
        padding: 0; 
        font-size: 3rem; 
        letter-spacing: -1.7px;}
}


/* автор и дата */

.author-card    {
    display: flex;
    width: 100%;
}

.author-card p  {margin-bottom: 0; margin-top: 3px;}
.author-card + .post-content-body   {margin-top: 2em;}

.arr, .plu  {color: #222; margin: -2px 5px 0 5px; }
.plu        {margin-right: 8px;}

header.tag-video + #oc .author-card     {margin-top: 30px;}
header.less + #oc .author-card          {flex-direction: column;}
header.less + #oc .author-card .plu     {display: none;}

@media (max-width: 500px) {
    .plu {display: none;}
    .author-card    {margin: 2px auto 20px;}
    .featured .author-card + .post-content-body h3:first-of-type    {margin-top:0em;}   
    .featured .author-card  {margin: 14px auto -10px;}

}

/* верхние теги */



/** обложка **/ 
.kg-image {
    height: auto;
    display: block;
    margin: 2.5em 0 0 0;
}

@media (max-width: 500px) {
    .kg-image {margin: 0;}

}

.post-content-image .kg-image   {margin: 0;}

@media (max-width: 1200px){
    .post-content-image .kg-image {margin: 0; width: 650px;}
}

.post-content-image{margin: 20px 0 50px;}

/* уголок картинки поста */
.t  {position: absolute; color: var(--10); margin-top: 0px; z-index: 8;
    width: 16px; height: 16px;}

@media (max-width: 960px){
    .post-content-image {width: 600px; margin: 20px 0 30px;}
}

@media (max-width: 700px){
    .post-content-image{width: 485px;}
}

@media (max-width: 500px){
    .t{width: 12px; height: 12px;}
}


/* текст */
p, li {
    margin: 0 0 2.5em 0;
    font-family: var(--sans);
    font-size: 14.2pt;
    letter-spacing: -0.1px;
    line-height:1.8;
    color: var(--100);
}

#oc.tag-photo p {
    line-height:1.6;
}

@media (max-width: 1400px){
    .post-content-body p,
    .post-content-body li {
    font-size: 1.72rem;
    line-height: 2;
    width: 90%;}
}

@media (max-width: 1200px){
    .post-content-body p,
    .post-content-body li {
    font-size: 1.74rem;
    line-height: 1.9;
    width: 80%;
    }
}

p:last-child,   
.post-content-body iframe[src*="soundcloud"]:last-child,
.kg-embed-card:last-child   {margin-bottom: 0 !important;}

.kg-embed-card:last-child figcaption {margin-bottom: 0 !important}

@media (madx-width: 1400px){
    .post-content{max-width: 850px;}
    .post-content-body p,
    .post-content-body li    {
        font-size: 1.6rem;
        line-height: 2;}
}

@media (max-width: 960px) {
    .post-content{max-width: 100%;
         margin-top: 0px;
         padding-right: 0;}

    .post-content-body p,
    .post-content-body li    {font-size: 1.72rem; line-height: 1.8; width: 83%;}
}

@media (max-width: 640px) {
    .post-content-body p,
    .post-content-body li    {font-size: 1.52rem; width: 95%;}    
}

@media (max-width: 500px) {

    .post-content-body p,
    .post-content-body li {
        width: 100%;
        margin: 0 0 1.8em;
        font-size: 1.44rem;
        line-height: 1.68;
        letter-spacing: 0;
        padding: 0;
    }

    .post-content-body li {margin: 0 0 1.2em;}
    .post-content-body ul{padding: 0 10px 0 20px;}
}


dd {
    position: absolute;
    right: -220px;
    font-family: var(--serif);
    width: 200px;
    line-height: 1.4;
    font-size: 10.4pt;
}


dfn, em, i {
    font-style: italic;
    font-family: var(--italic);
    font-size: 15.4pt;
    letter-spacing: 0px;
    line-height: 0.68;
    font-weight: 400;
}

html[lang="en"] dfn, em, i {font-size: 16pt;}

@media (max-width: 1400px){
    dfn, em, i {font-size: 14.7pt;}
}

@media (max-width: 1100px){
    dfn, em, i {font-size: 13.8pt; letter-spacing: 0;}
}

@media (max-width: 960px) {
    dfn, em, i  {font-size: 1.92rem;}
}

@media (max-width: 700px) {
    dfn, em, i  {font-size: 1.72rem;}
}

@media (max-width: 500px) {
    dfn, em, i  {font-size: 1.64rem;}
}






/* ссылки в тексте */

a   {text-decoration: none;}
a:hover {text-deocration: underline;}

article a {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 1px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}
article a:hover {
    color: #333;
    background-color: var(--accent);
    border-bottom-color: var(--accent);
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}


@media (max-width: 960px){
    article a {padding-bottom: 1px;   }
}



/* цитата  */
blockquote {
    margin: 1.5em 0;
    padding: 0 1.6em;
}
.post-content-body blockquote p {
    margin: 0 0 2.5em;
    font-family: var(--serif);
    font-size: 21pt;
    letter-spacing: -.4px;
    padding: .2em 0px .2em 70px;
    font-weight: 400;
    color: #222;
    line-height: 1.3;
}

    .post-content-body blockquote i, 
    .post-content-body blockquote em{
    font-size: 2.85rem; letter-spacing: -0.7px;}


@media (max-width: 1200px){
    .post-content-body blockquote p {font-size: 2.5rem; padding-left: 50px;line-height: 1.4;}
    .post-content-body blockquote i, 
    .post-content-body blockquote em {
    font-size: 2.52rem;}
}

.post1-content-body blockquote:last-child   {
    margin: 0;
    padding: 0 0 0 0px;
    width: 820px;}

.post-content-body blockquote + blockquote {
    padding: 0em 20px 3em 20px;
    margin: 1.8em 0 0 0;
}

.post-content-body blockquote + p {
    margin-top: 1.8em;
}



.post-content-body blockquote p a {padding-bottom: 0;}

.post-content-excerpt {
    font-size: 9pt;
    display: inline;
}

@media (max-width: 1200px){
    .post-content-excerpt{font-size: 1.2rem;}
}

@media (max-width: 1400px){
    .post-content-body blockquote {font-size: 17.7pt;
    line-height: 1.6;}
}


@media (max-width: 960px){
    .post-content-excerpt   {font-size: 1.1rem;}

    .post-content-body blockquote p {
    font-size: 2.56rem;
    padding: 0;
        width: 78vw;
    line-height: 1.3;
    }

    .post-content-body blockquote:last-child{width: unset; padding: 0 0 0 20px;}
    
    .post-content-body blockquote i, 
    .post-content-body blockquote em    {font-size: 2.72rem;}   

    .post-content-body blockquote,
    .post-content-body blockquote + blockquote {
    width: unset;
    padding: 0 0px 0em 40px;
    line-height: 1.5;
    margin: -10px 0 40px 0;
    }

    .post-content-body blockquote   {font-size: 2.4rem; line-height: 1.6;}
}


@media (max-width: 700px) {
    .post-content-body blockquote   {        padding: 0 0px 0em 20px;}
    .post-content-body blockquote p{font-size: 2.16rem;        width: 86vw;}
}


@media (max-width: 500px) {
    .post-content{margin-top: 20px;}
    .post-content-body blockquote p,
    .post-content-body blockquote:last-child  {
    font-size: 1.96rem;
    line-height: 1.34;
    padding: 4vw 0 1vw 0;
    letter-spacing: -0.2px;
    width: 100%;
    }
    .post-content-excerpt{font-size: 1.1rem;}

    .post-content {width: 100%; padding: 0vw 0 4vw 0; margin: 0 0 0px 0;}
    
    blockquote {padding: 1em 0 0 0;}

    .post-content-body blockquote {padding: .2em 0 0 0;}
    
    blockquote + .kg-image-card {
    margin-top: 0px;
    margin-bottom: 50px;
    }

    .post-content-body blockquote i, 
    .post-content-body blockquote em  {
        font-size: 2rem;         letter-spacing: 0;

    }

    .post-content-body blockquote + blockquote{padding: 0; margin: -30px 0 0 0;}
}






@media (max-width: 500px) {
    .post-content-body {
        font-size: 1.7rem;
        margin-top: 0px;
        width: 100%;
    }
}



/** картинки **/

/* обычная картинка */
.kg-card {margin: 65px 0;}

@media (max-width: 500px) {
    .kg-card {margin: 35px 0;}
    .featured .kg-card {margin: 0;}
}

@media (max-width: 960px) {
    .kg-embed-card + tt {padding: 10px 0 20px;}
}




/* большие и просто на весь экран */
.kg-width-wide {
    width: 75vw;
}

.kg-width-full,
.kg-width-wide {
    min-width: 100%;
    position: relative;
}

.kg-width-full {
    width: 75vw;
    margin: 3vw 0 3vw 0vw;
    transform: none;
}

.kg-width-full .kg-image,
.kg-width-wide .kg-image {
    margin: 2.5em 0 0 0;
}

@media (max-width: 960px) {
    .kg-width-full, .kg-width-wide {
        margin: 0 0 0 -20px; padding: 0 0 20px 0;
        min-width: 113%;
        -webkit-transform: translateX(calc(45vw - 50%));
        transform: translateX(calc(45vw - 50%));
        width: 100vw;
        }
}


@media (max-width: 500px) {
    .kg-width-full, .kg-width-wide  {min-width: 100%;}
    .kg-width-full {
    width: 100vw;
    margin: 3vw 0 3vw -19px;}
}

@media (max-width: 500px) {
    .kg-width-full, .kg-width-wide {margin: 0;}
}



/* галерея  */
#oc .kg-gallery-container {
    -webkit-box-orient: vertical;
    flex-direction: column;
    position: relative;
    max-width: 75vw;
    min-width: 100%;
}
#oc .kg-gallery-container,
#oc .kg-gallery-row {
    display: -webkit-box;
    align-items: flex-start;
    display: flex;
    -webkit-box-direction: normal;
}
#oc .kg-gallery-row {
    -webkit-box-orient: horizontal;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
}
#oc .kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}
#oc .kg-gallery-row:not(:first-of-type) {
    margin: 0;
}
#oc .kg-gallery-image:not(:first-of-type) {
    margin: 0;
}
#oc .kg-gallery-card + .kg-gallery-card,
#oc .kg-gallery-card + .kg-image-card.kg-width-wide,
#oc .kg-image-card.kg-width-wide + .kg-gallery-card,
#oc .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
    margin-top: calc(-7vw + 0.75em);
}

@media (max-width: 500px) {
    .kg-gallery-row {    flex-direction: column !important;}
    .kg-gallery-image:not(:first-of-type),
    .kg-gallery-row:not(:first-of-type) {margin: 0 !important;}
}

.kg-gallery-card {x-width: fit-content !important;}



    .site-wrapper {min-height: 100vh; padding: 0 40px;}

@media (max-width: 500px) {
    .site-wrapper {
        padding: 3vw 5vw 10vw;
    }
}



/* кто  */
.w svg  {margin-top: -249px;}
.w img, .w svg  {width: 120px; height: 120px;}
.w img  {grid-column: 1;}
.w .i   {width: 145px; height: 125px;}

.w tt       {font-size: 2.7rem; 
        font-family: var(--sans); 
        padding: 0 20px; 
        font-family: var(--extra);
        font-weight: 800; 
        grid-column: 2;
        grid-row: 2;
        color: #333;
        line-height: normal;
        letter-spacing: -0.5px;}

.w      {display: grid;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: start;
        align-items: center;
        padding: 30px 0 0 0;}
        
.w + p  {margin-top: 2.5em;}

.w dt   {display: block; width: 120px; height: 120px; margin-bottom: -120px; z-index: 1; position: relative;
background-image: url("data:image/svg+xml;utf8,<svg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M126 0H0V126H126V0ZM106.685 9.5916C77.5611 2.66327 48.4389 2.66327 19.3151 9.5916C15.0836 10.6375 10.6355 15.0871 9.59279 19.317C2.66287 48.4409 2.66287 77.5599 9.59279 106.684C10.6355 110.914 15.0852 115.363 19.3151 116.406C48.4389 123.338 77.5611 123.338 106.685 116.406C110.912 115.363 115.364 110.914 116.407 106.684C123.337 77.5599 123.337 48.4409 116.407 19.317C115.364 15.0871 110.912 10.6375 106.685 9.5916Z' fill='currentColor'/></svg>");}
        
.w i    {font-size: 1.5rem;
        font-family: var(--sans);
        grid-column: 2;
        display: block;
        font-style: normal;
        color: #888;
        grid-row: 2;
        padding: 0px 20px;
        letter-spacing: -.2px;
        margin-top: 40px;}


@media (max-width: 1200px){
    .w dt{width: 100px;
        height: 100px;
        background-size: 100px;
        margin-bottom: -100px;}

    .w img, .w svg {width: 100px; height: 100px;}
}


@media (max-width: 960px){

    .w tt    {font-size: 2.4rem;}
    .w i    {margin-top: 35px; font-size: 1.4rem;}
    .w dt{width: 100px; 
        height: 100px;
        margin-bottom: -100px;
        background-size: 100px;}

    .w img, .w svg {width: 100px; height: 100px;}
}


@media (max-width: 500px) {
    .w svg  {margin-top: -200px;}
    .w dt   {
    width: 110px;
    height: 110px;
    margin: 0 auto -110px;
    background-size: 110px;
    grid-column: 1;
    grid-row: 1;}
    
    .w img, .w svg  {height: 110px; width: 110px;
    grid-row: 1;
    margin: 0 auto;}
    
    .w tt       {font-size: 2.2rem;
    margin-top: 10px;
    width: auto;
    text-align: center;}
    
    .w i{margin-top: 5px; width: auto; text-align: center; font-size: 1.3rem;}
    .w{flex-direction: column; 
    align-items: center; 
    margin: 2em 0 0.5em 0; display: flex;
    padding: 0;}
}


/** фреймы **/

.kg-embed-card {
    width: 100%;
    position: relative;
}

.kg-embed-card iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}

@media (max-width: 500px) {
    .kg-embed-card  {
    width: 100vw;
    height: auto;
    position: relative;}

    .kg-embed-card + tt {
    font-style: normal;
    font-family: var(--sans);
    margin: -20px auto 0;
    padding: 0 7.5rem 20px;
    width: 100%;
    }
}


/* видео */
.post-content-body iframe {}

.post-content-body iframe[src*="youtube"]   {height: 460px;}

.post-content-body iframe[src*="youtube"] + figcaption  {margin-bottom: 60px !important;}


@media (min-width: 1000px){
.post-content-body .kg-card > iframe[src*="vimeo"] 
    {margin: -50px 0 0 0;}
    }

@media (max-width: 500px){
    .post-content-body iframe[src*="youtube"]   {
        height: 230px;}
    .post-content-body iframe[src*="youtube"] + figcaption {margin-bottom: unset !important;}
    }

.post-content-body .kg-embed-card iframe[src*="vimeo"] 
    {height: 45vw;}

.post-content-body .kg-embed-card iframe[src*="vimeo"] + figcaption{padding: 20px 0 0 0;}

.post-content-body .kg-embed-card:last-child iframe[src*="youtube"] + figcaption    {margin-bottom: 0px !important;}

.post-content-body iframe[src*="vk"],
.post-content-body iframe[src*="rutube"] {
    margin-bottom: 60px !important; 
    width: 100%; 
    height: unset; 
    background-image: url(/i/lo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90px;
    aspect-ratio: 16 / 9;}
.post-content-body iframe[src*="vk"] + figcaption {
    margin: -60px 0 0 0;
    /* padding: 0; */
}

@media (max-width: 960px){
    .post-content-body iframe[src*="vk"],
    .post-content-body iframe[src*="rutube"],
    .post-content-body iframe[src*="youtube"]{
        width: 90%;
        height: auto;
        max-width: 650px;
        aspect-ratio: 16 /9 ;
    }
}

@media (max-width: 640px){
    #oc.tag-video .post-content-body iframe {
        left: 50%;
        transform: translate(-50%);
        position: relative;
        width: 100vw;
    }
}

@media (max-width: 500px){
    .post-content-body .kg-embed-card iframe[src*="vimeo"] {}

    .post-content-body iframe[src*="youtube"]{width: 100%;}

    .kg-embed-card iframe,
    .post-content-body iframe[src*="vk"],
    .post-content-body iframe[src*="rutube"]    { position: relative;}

    .post-content-body iframe,
    .post-content-body iframe[src*="vk"],
    .post-content-body iframe[src*="rutube"]{
    width: 100vw; height: unset;
    padding: 0;
    transform: translateX(calc(45vw - 50%));
    }

    #oc.tag-video .post-content-body iframe{margin: 10px 0;}

}



.twov {    
    width: 100%;
    margin-bottom: 50px;
}

#oc .twov div       {display: flex; justify-content: space-between;}
#oc .twov iframe,
#oc .twov iframe[src*="vk"]             {width: 50%; margin-bottom: 0 !important;}

#oc .twov iframe[src*="facebook"]     {aspect-ratio: 1 / 0.60;}


@media (max-width: 640px){
    #oc .twov div {flex-direction: column;}
    #oc .twov iframe,
    #oc .twov iframe[src*="vk"]{width: 100%;}
}



/* звук */
.post-content-body iframe.sc    {margin-bottom: 60px !important;}

.post-content-body iframe[src*="soundcloud"],
.post-content-body iframe[src*="hearthis"],
.post-content-body iframe[src*="spotify"]
 {margin-bottom: 60px !important;}

 .post-content-body iframe[src*="hearthis"],
 .post-content-body iframe[src*="spotify"]{box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}

.post-content-body iframe[src*="yandex.ru"] {margin-bottom: 50px !important; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
.post-content-body iframe:last-child[src*="yandex.ru"] {margin-bottom: 0 !important;}

@media(max-width: 500px){
    .post-content-body iframe[src*="yandex.ru"],
    .post-content-body iframe[src*="spotify"]{width: 100vw !important;}
}


/* последние  */
.post-content-body iframe[src*="vk"]:last-child,
.post-content-body iframe[src*="spotify"]:last-child,
.post-content-body iframe[src*="soundcloud"]:last-child,
.post-content-body iframe[src*="hearthis"]:last-child,
.post-content-body iframe[src*="youtube"]:last-child {margin-bottom: 0 !important;}


/* подписи */

.kg-card figcaption span, .kg-card figcaption i, .kg-card figcaption em {display: block;}

.twov figcaption,
.kg-card figcaption, 
.kg-card figcaption span, 
.kg-card figcaption a {
    font-size: 10.4pt;
    line-height: 1.36em;
    x-color: #a9a9a9;
    width: 90%;
}



.kg-card figcaption a {display: inline; padding-bottom: 1px;}

.kg-card figcaption em,
.kg-card figcaption i,
.kg-card figcaption strong,
.kg-card figcaption b {font-weight: normal;}

.kg-card figcaption em {font-size: 11.5pt;}

@media (max-width: 500px){
.kg-card figcaption em {font-size: 10.4pt;}    
}

@media (max-width: 960px){
.kg-card figcaption em {font-size: 11.4pt;}    
}

/* подпись к широкоформатной картинке */
.kg-width-wide figcaption {
    width: 60vw;
    }

.kg-width-full figcaption {
    padding-left: 0;
    padding-right: 0;
    width: 80%;
    margin-left: 0vw;
    text-align: left;
}

@media (max-width: 1200px){
    .kg-card figcaption{font-size: 10.4pt;}
}

@media (max-width: 1100px){
    .kg-card figcaption{font-size: 10pt;}
}

@media (max-width: 960px) {
    .kg-card figcaption, 
    .kg-card figcaption span,
    .kg-card figcaption a {
        padding: 20px 0px;
        font-size: 1.3rem;
        line-height: 1.5;
        width: 75%;
        margin: 0;
        text-align: left;
        }

    .k1g-width-full figcaption,
    .k1g-width-wide figcaption {padding-left: 60px;}

    .kg-card figcaption a{padding: 0 0 1px 0;}

}


@media (max-width: 960px) {
    .kg-card figcaption {        width: 85%;}
}







/* файлы */


#oc .kg-card.kg-file-card{margin: 0; padding: 0;}
#oc .kg-file-card-container {
    display: flex;
    flex-direction: row-reverse;
    padding: 0;
    margin: 0 0 -1px 0;
    text-align: left;
    text-decoration: none;
    border: 0;
    justify-content: flex-end;
    width: fit-content;
}


#oc .kg-file-card-title{font-size: 16pt;     
    line-height: 1.3; 
    border-bottom: 1px solid #dadada;}

#oc .kg-file-card-contents{
    padding: 10px 70px 10px 10px;
}

#oc .kg-file-card-icon {
    padding: 15px 5px 0px 10px;
    margin-right: -1px;
    position: relative;
    display: block;
    width: unset; min-width: unset; height: unset;
}

#oc .kg-file-card-icon:before,
#oc .kg-file-card-filesize:before{display: none;}

#oc .kg-file-card-icon svg  {width: 30px; height: 30px;}

#oc .kg-file-card-metadata  {opacity: .5; margin-top: 5px; font-size: 10pt;}
#oc .kg-file-card-metadata div {display: block; padding: 10px 0;}

#oc .kg-file-card-contents,
#oc .kg-file-card-icon {x-border: 1px solid #ccc;}

#oc .kg-file-card-container:hover .kg-file-card-title,
#oc .kg-file-card-container:hover .kg-file-card-icon {border-color: var(--accent);}

#oc .kg-file-card a.kg-file-card-container  {background: transparent;}
#oc .kg-file-card-filename  {}


@media (max-width: 640px){
    #oc .kg-file-card-metadata  {font-size: 1.3rem;}
}

@media (max-width: 500px){
    #oc .kg-file-card-icon svg  {width: 26px; height: 26px;}
    #oc .kg-file-card-icon      {padding: 10px 2px 10px 10px;}
    #oc .kg-file-card-contents  {padding: 10px 10px 10px 10px;}
    #oc .kg-file-card-title     {font-size: 1.4rem; line-height: 1.5; padding-bottom: 3px;}
    #oc .kg-file-card-metadata  {font-size: 1.1rem;}

    #oc .kg-file-card-metadata div {display: block; padding: 8px 0;}
    #oc .kg-file-card-filename  {margin-top: 6px;}
    #oc .kg-file-card-filesize  {margin-top: 0px;}
}




/* нижние теги */

.tags   {width: 100%;
        text-align: left;
        margin: 30px auto 3vh;
        }
        
.htags  {display: flex; margin-top: 1px;}


#oc .tags {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
    margin-left: 0px;
    width: 200px;
    flex-wrap: wrap;
}


@media (max-width: 1200px){
    #oc {flex-direction: column;}
    #oc .tags{margin-left: 0px;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;}


}



.htags a, #oc .tags a       {border: 1px solid var(--20); 
                font-size: 9pt; 
                display: inline-block; 
                padding: 6px 7px 5px 7px; 
                margin-bottom: -1px;
                x-border-right: 0;
                line-height: .9;
                color: #2222229e;               
                border-radius: 4px;
                margin-right: -1px;
                transition: all .2s;}

@media (max-width: 1200px){
        .htags a, #oc .tags a{
        font-size: 1.1rem;
        padding-bottom: 6px;
        padding-top: 6px;}

}

@media (max-width: 960px){
    #oc .tags{flex-direction: row; 
        margin: 40px 0 0 0; 
        width: 100%;
        justify-content: flex-start;
        }


    .htags a, #oc .tags {font-size: 1.1rem; padding-bottom: 6px;}
}

@media (max-width: 700px){
    #oc .tags a{margin-right: 10px;}
}

                
#oc .tags a:last-child  {margin-bottom: 0;}
#oc .tags a:hover, .htags a:hover   {color: #444; 
                    border-color: var(--accent); 
                    background: var(--accent);
                    z-index: 2;
                    }

.htags a    {margin-right: -1px;}
                
.tags a + svg line  {transition: 0.4s ease;}
.tags a + svg circle{transition: 0.4s ease;}
.tago   {color: #222;}


.tags a:hover   {border: 1px solid #6E1FE6; border-right: 0; color: #6E1FE6;}
.tags a:hover + svg line    {stroke: #6E1FE6; x-transition: 0.4s ease;}
.tags a:hover + svg circle  {stroke: #6E1FE6; x-transition: 0.4s ease;}


.tags svg       {margin: -3px 10px -1px -2px;}
.tags svg:last-child        {margin-right: 0;}






@media (max-width: 500px) {
    .tags   {width: 100%; margin-top: 10px;}
    .tags a {font-size: 1.4rem; padding: 1px 7px 1px 7px;}


    .htags  {display: none;}
    

    #oc.tag-photo .htags,
    #oc.tag-video .htags           {display: block;}
    
    #oc.tag-photo .htags a,
    #oc.tag-photo .author-card p    {font-size: 1.1rem;}

    #oc .tags a         {font-size: 1.1rem; margin-right: -1px; padding-bottom: 5px;}
    #oc .tags           {flex-direction: row;
                        align-items: flex-start;
                        justify-content: flex-start;
                        margin-top: 20px;
                        flex-wrap: wrap;
                        }

    #oc {flex-direction: column;}
    
    .site-head-open .site-head-logo img
    {opacity: 1; filter: none;}
}


/* шильд */
#sch                    {width: 900px; margin: 30px 0;}
#sch svg                {margin: 0px auto; display: block;}

@media (max-width: 1200px){
    #sch{width: 90%;}
}

@media(max-width: 960px){
    #sch svg{width: 30px; height: 30px;}
}

@media (max-width: 700px){
    #sch{width: 93%;}
    #sch svg{margin: 40px auto; width: 30px; height: 30px;}
}

@media (max-width: 500px){
    #sch{width: 100%;}
    #sch svg{margin: 20px auto; width: 22px;}
}





/* предыдущий и следующий пост */

#prxt           {display: flex; 
    margin-top: 0px; padding-bottom: 0px;}
.prev, .next    {
    width: 450px;
    padding: 9px 10px;
    text-align: right;
    font-family: var(--sans);
}

#prxt a             {x-border: 1px solid #d6d6d6; transition: all .2s; border-radius: 3px;}
#prxt a:last-child  {margin-left: -1px;}
#prxt a:hover       {border-color: var(--accent); background: var(--accent);}

.prev               {border-right: 0; text-align: left;}
.prev svg           {transform: rotate(-180deg); }

#prxt svg           {color: #333; margin-top: 4px;}
#prxt a:first-child {border-right: 1px solid #d6d6d6;}
#prxt a:first-child:hover {border-right-color: var(--accent);}

.prev cat, .next cat  {font-size: 12pt; color: #333; padding-right: 6px;}
.prev svg, .next svg{
    border-left: 1px solid;
    height: 20px;
    width: 22px;
    transition: all .2s;
    padding-left: 7px;
}

.next {margin-left: -1px;}
.prev, .next{display: flex;}

.prev cat{padding-left: 8px;}
.next cat{padding-right: 8px;}

@media (min-width: 1200px){
    .prev cat{padding-right: 100px;}
    .next cat{padding-left: 100px;} 
}

.prev:hover svg, .next:hover svg{border-left-color: #999;}
#prxt cat {display: inline-block; width: 100%; line-height: 1.3; x-padding: 4px 8px;}

#prxt a.stop:hover {background: unset;}
a.stop .prev svg,
a.stop .next svg{
    transform: rotate(-90deg);
    border: none;
    border-bottom: 1px solid #d6d6d6;}

a.stop .next svg{
    border-top: 1px solid #d6d6d6;}

@media (max-width: 1200px){   
    .prev cat, .next cat{font-size: 11pt;}
    #prxt {    padding-bottom: 50px;}
}

@media (max-width: 960px){
    
    #prxt svg {margin-top: 5px;}
    .prev svg, .next svg{height: 19px;}
    .prev cat, .next cat {font-size: 1.4rem;}

    .prev, .next {width: 325px;}
    #prxt{margin: 80px 0; padding-bottom: 0;}
}

@media (max-width: 700px){
    .prev, .next {width: 275px;}
    #prxt{margin: 60px 0 0;     padding-bottom: 0px;}
}

@media (max-width: 500px){
    #prxt{margin: 60px 0 0; padding-bottom: 0px;}
    #prxt a{width: 50%;}
    .prev, .next {width: unset;}
    .prev cat {padding-left: 0px;}
    .prev cat, .next cat {font-size: 1.2rem; line-height: 1.3;}
    #prxt svg {margin-top: 4px;}

    #prxt .prev{flex-direction: column;}
    #prxt .next{flex-direction: column-reverse; align-items: flex-end;}
    #prxt .prev svg, #prxt .next svg{height: 13px; width: 18px;}

    .prev {    padding: 9px 10px 9px 0px;}
    .next {    padding: 9px 0px 9px 10px;}

}




/** подвал **/
#fo {display: flex; align-items: flex-start;}

@media (max-width: 960px){
    #fo{flex-direction: column-reverse;}
}

@media (max-width: 500px){
    #fo{flex-direction: column-reverse; margin-top: -40px;}
}


/* подписка */
.subscribe  {

    max-width: 800px;

    margin-bottom: 0px;

    margin-left: 80px;
}

@media (max-width: 960px){
    .subscribe{width:100%;
        margin-right: 0;
        margin-left: 0px;}
}

.subscribe form{
    margin: 40px auto 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.subscribe svg  {width: 70px;
    x-text-align: center;
    margin: 10px 0 0;
    display: block;
    background: white;
    color: #6C2CCC;}

.data-members-error{display: none;}

.subscribe small {
    font-size: 10.4pt;
    text-align: left;
    display: block;
    margin: 20px 0 0 0;
    line-height: 1.8;
    width: 670px;
    padding: 0;
    color: #999;
    }

.subscribe  form    {
    width: 100%; 
    margin: 0 auto;
    font-size: 2.4rem;
    x-padding: 0 0.8em;
    }

.subscribe input,
input[type="email"] {
    float: left;
    height: 80px;
    width: 69%;
    background: none;
    border: none;
    border-bottom: 1px solid #c3c3c3;
    border-radius: 0;
    font-size: 26pt;
    padding: 0;
    outline: none;
    }

.subscribe input::placeholder,
input[type="email"]::placeholder    {color: #888; letter-spacing: -1px;}
    
.subscribe button   {
    height: unset;
    font-size: 18pt;
    padding: 8px 26px;
    font-weight: 600;
    letter-spacing: -.2px;
    width: auto;
    outline: none;
    color: white;
    background: #6E1FE6;
    border-radius: 10px;
    box-shadow: unset;
    }

.subscribe input:focus,
input[type="email"]:focus{border-bottom: 1px solid #444; box-shadow: none;}

.subscribe  button:hover    {background: var(--accent); color: #444;}

    
#fo form p  {
    color: #ff5970; 
    font-size: 1.7rem; 
    text-align: center;
    margin-top: 10px;
    }   

    
.subscribe form.loading button  {
    color: white !important;
    background-image: url(https://12edit.com/stuff/i/loader.gif);
    background-position: center;
    background-size: 18%;
    cursor: default;
    z-index: 2;
    font-size: 0%;
    width: 206px;
    background-repeat: no-repeat;
    }
    
.subscribe form.success button  {
    background-image: url(https://12edit.com/stuff/i/done.gif);
    background-position: center;
    background-size: 58%;
    cursor: default;
    z-index: 2;
    font-size: 0%;
    width: 206px;
    background-repeat: no-repeat;
    background-color: white;
    x-box-shadow: inset 0 0 0 2px #4CAF50;
    }
    
.subscribe form.loading button:hover, 
.subscribe form.success button:hover    {
    background-color: white; outline: none;
}
    
@media (max-width: 500px) {
    .subscribe  {
    padding: 0;
    margin: 0px 0;
    width: 100%;
    }

    .subscribe svg{width: 50px;}



    .subscribe small    {font-size: 1.2rem; line-height: 1.6; width: 90%;}
    .subscribe img  {margin-bottom: 20px; margin-top: 20px;}

    .subscribe  button  {
    width: 100%; 
    padding: 1rem 4rem;
    display: block;
    margin: -1x auto 0;
    font-size: 2.2rem;
    border-radius: .5rem;   
    }
    
    .subscribe input    {
     width: 100%;
     font-size: 2.7rem;
     height: 70px;
     margin-bottom: 15px;
    float: none;
    }
    
    .subscribe form {
        margin: 30px auto;}
}

.subscribe-button {
    display: block;
    padding: 4px 10px;
    border: 1px solid #131313;
    color: #131313;
    font-size: 1.2rem;  
    line-height: 1em;
    border-radius: 10px;
    opacity: 0.8;
}

.subscribe-button:hover {
    text-decoration: none;
    opacity: 1;
}



/* соцсети */
#social {text-align: center; display: flex; width: 100%; margin: 30px 0 50px -25px;}

@media (min-width: 1200px){
    #social {margin: 30px 0 50px -25px;}
}
#so {}



#social a   {
            width: 14%; 
            width: 7%; 
            height: 62px; 
            border: 0px solid #E0E0E0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: -1px;                 
            }

#social svg {width: auto;height: 54px;}


#social a:last-child    {}

#social a path.w, #social div circle.w {color: #fff;}
#social a path, #social div circle {color: #222;}

#social a:hover path, #social div:hover circle  {color: #222; }
#social a:hover path.w{color: var(--accent);}

#social a:hover {background: var(--accent); 
    border-color: var(--accent); 
    transition: all .2s;}



@media (min-width: 960px){
    #so h2  {font-size: 14pt; letter-spacing: -1px;}
}


@media (max-width: 960px){
    #social{margin-top: 20px; flex-wrap: wrap; width: 100%; margin-left: -35px;}
    #social a {width: 14%;margin-left: -1px;}
    #social a:last-child{}
}

@media (max-width: 700px){
    #social{flex-wrap: wrap; margin-top: 0px;}
    #social a{margin-right: 0; width: 18%; height: 70px;}
    #social svg {scale: 0.85;}
}


@media (max-width: 640px){
    #social {        margin-left: -20px;}
    #social svg {scale: 0.85;    height: 48px;}
    #social a {    height: 60px;        width: 14%;}
}


@media (max-width: 500px){
    #social{
        display: flex; 
        flex-wrap: wrap; 
        width: 100%; margin: 0 0 40px -20px;
        }

    #so{margin-top: 50px;}
    #social a{width: 66px; 
        height: 66px; 
        margin-left: 0px;
        margin-top: -1px;
        x-border-bottom: 1px solid #E0E0E0;}
    #social svg {height: 64px; scale: 0.85;}

    #social a:nth-child(1),
    #social a:nth-child(2),
    #social a:nth-child(3),
    #social a:nth-child(5),
    #social a:nth-child(6){x-border-right: none;}

    #social a:nth-child(5),
    #social a:nth-child(6),
    #social a:nth-child(7){x-border-top: none;}
}

/* подвал  */

footer{ text-align: left;
        padding-bottom: 50px !important;
        color: #ababab;
        x-padding-top: 20px !important;
        }

@media (max-width: 960px){
    footer{margin: 60px 0px 20px 0px;}     
}



footer a {
    color: #ababab;
    border-bottom: 1px solid #dadada;
    transition: 0.2s ease;
    padding: 4px 0;
}

footer a:hover  {border-bottom: 1px solid var(--accent); color: #222;
background-color: var(--accent);}

footer p{display: inline-block; 
    font-size: 9pt;
    padding: 0;
    margin: 0 30px 0 0;}


@media (max-width: 960px) {
    footer  {padding: 0; margin: 0;}
}

@media (max-width: 500px){
    footer{background: none; display: flex; flex-direction: column;}     
    footer p{font-size: 1.2rem;        line-height: 2.1;        margin-bottom: 6px;}
    footer a{font-size:1.2rem; border-bottom-color: #d7d7d7;}
}


@media (prefers-color-scheme: light){
    footer p,
    footer a{color: var(--65); border-bottom-color: var(--35);}
}

@media (prefers-color-scheme: dark){
    footer p,
    footer a{color: var(--45);}
}


nav{margin: 0 0 80px 0;}

@media (max-width: 640px){
    nav{margin: 0 0 50px 0;}
}


#secondary      {
    width: fit-content;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;}

@media(min-width: 640px){
    #secondary      {
    width: 500px;
    column-count: 5;
    flex-direction: row;}
}

#secondary li {
    margin: 0;
    margin-bottom: 12px;
    font-size: 10pt;
    list-style: none;
}

#secondary li:last-child{margin-right: 0;}

@media (max-width: 960px){
    #secondary {width: 70%; display: flex; gap: 20px; justify-content: flex-start; flex-wrap: wrap;}
    #secondary li{margin-right: 40px; margin-top: 0; line-height: 1;margin-bottom: 0px;}
    #secondary .gh-search {padding: 0; margin: 0;}
    #secondary .gh-search svg{margin: 0;}
}



@media (max-width: 640px){
        #secondary {gap: 15px; width: 90%;}
    #secondary li {font-size: 1.2rem;}
}



@media (max-width: 500px){
    #secondary {width: 100%; 
        margin-top: 0px;
        margin-bottom: 30px; 
x-column-count: 5;
        gap: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;}

    #secondary li{margin-right: 22px; font-size: 1.2rem; x-padding: 11px 0;    margin-bottom: 7px;}
    #secondary li:last-child{padding: 4px 0px; margin: 0;}

    .gh-search{height: 2rem; padding: 0px; line-height: unset;}
    .gh-search svg{width: 16px;}

    html[lang="en"] #primary .gh-search{margin-top: 0px;}
    html[lang="ru"] #primary .gh-search,
    html[lang="ru"] #secondary .gh-search {height: unset; margin-top: 0; padding: 6px 10px;}
}











/** paywall **/

.gh-post-upgrade-cta::before{
    z-index: 0;
    position: absolute;
    content: "";
    right: 0;
    bottom: 0px;
    left: 0;
    height: min(100%,808px);
    background: linear-gradient(transparent, var(--5) 50%);
}

#site-main .gh-post-upgrade-cta-content{
    position: relative; 
    z-index: 1; 
    background-color: var(--ghost-accent-color); 
    border-radius: 0 !important;}

#oc .gh-post-upgrade-cta a{
    text-decoration: none; 
    border-bottom: 1px dotted white;}

#site-main .gh-post-upgrade-cta small {color: white;}
#site-main .gh-post-upgrade-cta a:hover{
    background: white; 
    opacity: 1 !important;}

.gh-post-upgrade-cta-content { margin-top: -50px;}

#site-main .gh-post-upgrade-cta h2 {
    color: #ffffff;
    font-size: 50px;
    letter-spacing: -2.5px;
    margin: 0;
    padding: 0;
    x-width: 80%;
    width: 90%;
    margin-bottom: 20px;
}


html[lang="en"] #site-main .gh-post-upgrade-cta h2  {width: 80%;}
html[lang="ru"] #site-main .gh-post-upgrade-cta h2  {width: 70%; line-height: 0.9;}



#site-main .gh-post-upgrade-cta a.gh-btn {
    display: block;
    background: #ffc439;
    color: var(--100) !important;
    border: 0;
    text-decoration: none;
    margin: 0;
    padding: 28px 28px;
    border-radius: 38px;
    font-size: 26px;
    font-weight: 600;
    font-family: 'Inter';
}

#site-main .gh-post-upgrade-cta a.gh-btn:hover{
    background: white; 
    color: var(--100) !important;}

@media(max-width: 640px){
    #site-main .gh-post-upgrade-cta h2 { font-size: 3.7rem;
    letter-spacing: -1px;}
}

@media(max-width: 480px){
    #site-main .gh-post-upgrade-cta::before     {height: min(100%, 606px); width: 100vh; left: -100px;}
    #site-main .gh-post-upgrade-cta h2          {font-size: 3.4rem; letter-spacing: -1.5px; width: 90% !important; }
    #site-main .gh-post-upgrade-cta small       {font-size: 13px;}
    #site-main .gh-post-upgrade-cta a.gh-btn    {padding: 24px 22px; font-size: 22px;}
    #site-main .gh-post-upgrade-cta::before     {bottom: 100px;}
    #site-main .gh-post-upgrade-cta-content     {margin-top: -30px;}   
}


@media (prefers-color-scheme: dark) {
    #oc .gh-post-upgrade-cta a{color: white;}
    #oc .gh-post-upgrade-cta a:hover{color: var(--primary);}
}

@media (prefers-color-scheme: light) {
    #oc .gh-post-upgrade-cta a{color: white;}
    #oc .gh-post-upgrade-cta a:hover{color: var(--primary);}
}



blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    opacity: 0.8;
}
blockquote small:before {
    content: "\2014 \00A0";
}
blockquote cite {
    font-weight: 700;
}
blockquote cite a {
    font-weight: 400;
}




.site-wrapper {padding: 0 60px;}

@media (max-width: 960px){
    .site-wrapper  {padding: 0 40px;}
}

@media (max-width: 640px){
    .site-wrapper {padding: 0 20px;}
}

@media (max-width: 500px) {
    .site-wrapper  {padding: 0 20px;}
    h2 {font-size: 3rem; letter-spacing: -1.7px;
    }
}


h3 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    padding-top: 20px;
    line-height: 1.2;
    letter-spacing: -1px;
    x-font-family: 'Inter', Arial, sans-serif;
}

h3 a {padding-bottom: 0;}

#oc .featured  h3 a {
    x-color: #131313;
    x-padding-bottom: 5px;
    x-border-bottom: 1px solid #dadada;
    }
    
#oc .featured  h3 a:hover   {
    x-padding-bottom: 4px;
    x-border-bottom: 2px solid #656565;
    }

#oc .featured  h3   {margin-top: 3.5em; x-margin-bottom: -40px;}
#oc .featured h3 + .kg-image-card   {margin-bottom: 35px;}


@media (max-width: 960px){
    h3  {font-size: 2.9rem; 
        margin-top: 60px;
        margin-bottom: 0;}
}

@media (max-width: 500px) {

    h3  {
        font-size: 2.4rem;
        margin-bottom: 5px;
        letter-spacing: -1px;
        margin-top: 45px;
        padding: 0;
        }
    
    h3 a    {padding-bottom: 3px; border-bottom: 1px solid #656565;}
    
    .featured  h3 a {
    x-color: #131313;
    padding-bottom: 2px;
    border-bottom: 1px solid #969696;
    }
    
    #oc .featured  h3   
    {margin-top: 70px; margin-bottom: 18px;}
    
    #oc .featured h3 + .kg-image-card   
    {margin-bottom: 35px;}
}







/** декор **/

/* точки */
@media (max-width: 500px){
    #side,
    #d0t {display: none;}
    }

.dt2    {position: absolute; 
    top: 30px; 
    left: -15px;
    -webkit-animation:dt2 2s linear both;
    animation:dt2 2s linear both;}

.dt1    {position: absolute; 
    top: -50px; 
    left: -15px;}









#ok hr  {border-top: 1px solid #d6d6d6; margin: -57px 0 5.5em; width: 100%;}

#ok big     {
        font-size: 2rem;
        display: block;
        margin: 2em auto;
        text-align: center;
        background: white;
        z-index: 1;
        font-weight: 800;
        width: 218px;
        padding: 0 20px;
        position: relative;
        }
    
#ok big a   {
        color: #353535;
    /* background: white; */
        padding: 10px 0px;
        border-bottom: 1px solid #d5d5d5;
        }
        
#ok big a:hover {
                border-bottom: 2px solid #454545; 
                transition: 0.2s ease;
                padding-bottom: 8px;}
        
    
@media (max-width: 500px) {
        big {
        font-size: 1.8rem;
        margin-top: 3em;
        margin-bottom: 1.5em;
        }
}





/* жанры */
#genres {background: #6C2CCC; width: 100%; padding: 50px; display:flex;}
#genres ul      {list-style: none; padding: 0;     width: 70%;}
#genres ul {display: block; margin: 40px 0;}
#genres ul li{
            color: #8541ED;
            display: inline-block;
            margin: 0;
            font-family: 'oswald';
            line-height: 2;
            font-size: 2.4rem;
            letter-spacing: -0.3px;
            background-image: url(/i/ln.png);
            background-repeat: repeat-x;
            padding: 0px 50px 0 0px;
            background-position: 0 30px;}
#genres ul li a{color: white; border-bottom: 1px solid #9B63F0; background-color: #6C2CCC; padding-bottom: 2px; transition: .2s all;}
#genres ul li a:hover{color: white; border-bottom-color: white;}
#genres ul li s{text-decoration: none; background-color: #6C2CCC;}
#genres ul li:last-child{padding-right: 0;}
#genres b{}

#genres ul:first-child        {margin-top: 0;}
#genres b{
    color: #6e1fe6;
    background-color: white;
    font-weight: 200;
    width: 210px;
    line-height: 1;
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0;
    width: 155px;}

@media (max-width: 1200px){
    #genres ul{width: 90%;}
}

@media (max-width: 960px){
    #genres{padding: 40px 20px 20px; display:block;}
    #genres ul li{font-size: 2rem; background-position: 0 23px;}
}

@media (max-width: 500px){
    #genres ul{width: 100%;}
    #genres ul li{font-size: 1.6rem; padding: 0px 30px 0 0px; background-position: 0px 18px;}
}




/* отступы */
p, 
.w, 
.w + p,
.kg-card,
blockquote,
.post-content-body blockquote + blockquote,
.post-content-body blockquote + p {margin: 0 0 50px 0; padding: 0;}

#oc .h3{margin-top: 100px;}

/* большие */

#oc.featured h2{margin-top: 90px;}
#oc.featured h3{margin-top: 90px;}
#oc.featured h2 + h3 {margin: 20px 0 0 0;}
#oc.featured h3:first-child{margin-top: 0;}

.kg-card.kg-embed-card {margin: 60px 0;}

#oc.tag-video .kg-card.kg-embed-card {margin: 0;}

.w:last-child {margin: 0;}



@media (min-width: 1200px){
    .twov figcaption,
    .kg-image > figcaption, 
    .kg-gallery-card > figcaption,
    .kg-card figcaption {margin: 0; padding: 20px 0 0 0;}
}

@media (max-width: 1200px){
    p, 
    .w, 
    .w + p,
    .kg-card,
    blockquote,
    .post-content-body blockquote + p {margin: 0 0 40px 0; padding: 0;}

        .kg-image > figcaption, 
    .kg-gallery-card > figcaption,
    .kg-card figcaption {margin: 0; padding: 20px 0 0 0;}
}

@media (max-width: 960px){
    p, 
    .w, 
    .w + p,
    .kg-card,
    blockquote,
    .kg-card.kg-embed-card,
    .post-content-body blockquote + p {margin: 0 0 45px 0; padding: 0;}

    .kg-image > figcaption, 
    .kg-gallery-card > figcaption {margin: 0; padding: 10px 0px 0;}

    .kg-width-wide > figcaption,
    .kg-width-full figcaption {margin: 0; padding: 10px 40px 0;}
}

@media (max-width: 700px){
    .kg-image > figcaption, 
    .kg-gallery-card > figcaption,
    .kg-card figcaption {margin: 0; padding: 20px 0 0 0;}
}

@media (max-width: 640px) {
    .kg-card figcaption, 
    .kg-card figcaption span,
    .kg-card figcaption a {
        padding: 10px 0px;
        font-size: 1.2rem;
        line-height: 1.4;
        width: 95%;
        margin: 0;
        text-align: left;
        }

    #oc.tag-photo .kg-card{
        margin: 0 0 15px 0;
        width: 100vw;
        left: 50%;
        transform: translate(-50%, 0%);
        position: relative;
    }

    #oc.tag-photo .author-card {   margin-top: 0;}

    #oc.tag-photo .kg-card.kg-image-card figcaption {
    padding: 10px 20px;
    width: 100%;}
}

@media (max-width: 500px){
    .post-content-body p, 
    .w, 
    .w + p,
    .kg-card,
    .post-content-body blockquote p, 
    .kg-card.kg-embed-card,
    .post-content-body blockquote + p  {margin: 0 0 30px 0; padding: 0;}

    .kg-embed-card figcaption,
    .twov figcaption,
    .kg-card figcaption,
    .kg-card figcaption span,
    .kg-card figcaption span p    {padding: 0; margin: 0; width: 100%; font-size: 1.1rem; line-height: 1.46;}

    .kg-card.kg-image-card figcaption{padding: 10px 0;}
    .kg-card figcaption,
    .kg-card figcaption span,
    .kg-card.kg-width-wide figcaption,
    .kg-card.kg-width-full figcaption,
    .kg-card figcaption span p{width: 85%; padding: 10px 5vw;}
    .kg-card figcaption span {padding: 0;}

    .twov figcaption,
    .kg-embed-card figcaption     {padding: 10px 0;}

    #oc.tag-video .kg-card.kg-embed-card{left: 50%; transform: translate(-50%);}
}



@media (prefers-color-scheme: light) {
    .t{color: var(--10);}

    body,
    .post-card,
    .post-feed{background-color: var(--5);}

    p,
    li,
    dl,
    big,
    abbr,
    .w tt,
    small,
    #prxt svg,
    article a,
    .page-head,
    #primary li a,
    #secondary li a,
    .post-feed.lst h2,
    #prxt a.stop:hover svg,
    #prxt a.stop:hover cat,
    .page-head-description,
    .prev cat, .next cat,
    .post-content-body blockquote p{color: var(--100);}

    .post-content-excerpt {color: var(--60);}


    /* меню */
    #primary li a,
    #secondary li a {border-bottom-color: var(--40);}

    #primary li b,
    #secondary li b,
    #primary li a.in,
    #secondary li a.in,
    #primary li:hover a,
    #secondary li:hover a{color: var(--110);}

    #primary .se,
    #secondary .se {color: var(--50);}

    h1, h2, h3, h4, h5, h6 {color: var(--100);}

    .arr path{fill: var(--55);}

    .post-content-body article a,
    .post-content-body article:hover a{color: var(--120);}

    article a {border-bottom-color: var(--30);}

    .post-content-title u {border-color: var(--45); color: var(--65);}

    /* приветствие */
    #oi, #oi a {color: var(--120);}
    #oi a,
    #oi a[data-ghost-search]{border-color: var(--70);}
    #oi a:hover{color: var(--90);}

    /* список материалов */
    ul#lst, .post-feed.lst{background-color: none; column-rule-color: var(--25);}
    ul#lst small{color: var(--55);}

    .post-feed article:hover a{color: var(--120);}
    .post-feed article i,
    .post-feed.lst article i{
        border-right-color: var(--85);
        border-left-color: var(--85);
        color: var(--75);
        border-top: none;
        border-bottom: none;
    }

    #switch .pics svg path {fill: var(--90);}
    #switch .list svg path.lines {stroke: var(--70);}
    #switch .pics,
    #switch .list {background-color: var(--0);}

    #switch .pics.se svg path {fill: var(--120);}
    #switch .list.se svg path.lines {stroke: var(--120);}
    
    #switch .pics.se,
    #switch .list.se {background-color: var(--accent);}

    .prev svg, .next svg{border-color: var(--25);}


    #sch path{fill: var(--20);}

    .twov figcaption,
    .kg-card figcaption, 
    .kg-card figcaption span, 
    .kg-card figcaption a{color: var(--50);}


    /* кто */
    .w dt{filter: invert(98%) sepia(28%) saturate(45%) hue-rotate(259deg) brightness(97%) contrast(96%);}

    /* декор */
    .bc path {fill: var(--50);}
    .bc path.ex{fill: var(--0);}


}


@media (prefers-color-scheme: dark) {
    .t{color: var(--120);}

    body,
    .post-card,
    .post-feed {background-color: var(--120);}

    /* текст */
    p,
    li,
    big,
    abbr,
    .w tt,
    small,
    #prxt svg,
    article a,
    .page-head,
    #primary a li,
    #secondary a li,
    .post-feed.lst h2,
    #prxt a.stop:hover svg,
    #prxt a.stop:hover cat,
    .page-head-description,
    .prev cat, .next cat,
    #oc .kg-file-card-title,
    #oc .kg-file-card-metadata div,
    .post-content-body blockquote p {color: var(--10);}

    #prxt a            {border-color: var(--95);}
    #prxt a:first-child {border-right: 1px solid var(--95);}

    .gh-post-upgrade-cta::before{background: linear-gradient(transparent, var(--120) 50%);}

    .post-content-title u {border-color: var(--65); color: var(--45);}

    .post-content-excerpt {color: var(--45);}



    /* меню */
    #primary a li,
    #secondary a li {border-bottom-color: var(--70);}
    #primary a.in li{border-bottom-color: var(--80);}

    #primary li b,
    #secondary li b,
    #primary a.in li,
    #secondary a.in li,
    #oc article a:hover,
    #oc article a:hover .kg-file-card-title,
    #oc article a:hover .kg-file-card-metadata div,
    #primary a:hover li,
    #secondary a:hover li {color: var(--110);}



    #primary .se,
    #secondary .se {color: var(--50);}

    h1, h2, h3, h4, h5, h6 {color: var(--10);}
    h2.post-card-title{color: var(--90); font-family: var(--bold);}

    .arr,
    .plu{color: var(--45);}

    .arr path{fill: var(--45);}


    /*файлы*/
    #oс .kg-file-card .kg-file-card-title{color: var(--70);}
    

    .htags a, #oc .tags a{border-color: var(--95); color: var(--45);}

    .site-head-logo img{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(158deg) brightness(113%) contrast(101%);}

    /* приветствие */
    #oi, #oi a {color: var(--0);}
    #oi a,
    #oi a[data-ghost-search]{border-color: var(--70);}
    #oi a:hover{color: var(--90);}


    /* список материалов */
    ul#lst, .post-feed.lst{background-color: none; column-rule-color: var(--95);}
    ul#lst small{color: var(--55);}

    .post-feed article:hover a{color: var(--120);}
    .post-feed article i,
    .post-feed.lst article i{
        border-right-color: var(--85);
        border-left-color: var(--85);
        color: var(--75);
        border-top: none;
        border-bottom: none;
    }

    .post-feed.lst article i{color: var(--55);}

    article a,
    ul#lst a big {border-bottom-color: var(--80);}  

    .bc path {fill: var(--50);}
    .bc path.ex{fill: var(--120);}

    #switch .pics svg path {fill: var(--10);}
    #switch .list svg path.lines {stroke: var(--70);}
    #switch .pics,
    #switch .list {background-color: var(--95);}

    #switch .pics.se svg path {fill: var(--120);}
    #switch .list.se svg path.lines {stroke: var(--120);}
    
    #switch .pics.se,
    #switch .list.se {background-color: var(--accent);}

    .twov figcaption,
    .twov figcaption a,
    .kg-card figcaption, 
    .kg-card figcaption span, 
    .kg-card figcaption a{color: var(--45);}







    /* туда-сюда */
    #prxt a, 
    #prxt a.stop:hover,
    #prxt a.stop:hover svg {border-color: var(--95);}
    #ll{border-right-color: #444;}
    #prxt a:hover cat,
    #prxt a:hover svg {color: var(--90);}

    #prxt a:hover svg, #prxt a:hover svg{border-color: var(--90);}



    .prev svg, .next svg{border-color: var(--75);}


    /* подвал */
    footer{background: var(--120);}
    footer a{border-color: var(--85);}
    #social a{border-color: var(--95);}
    #social a path, #social div circle{color: var(--10);}



    /* кто */
    .w dt{filter: invert(11%) sepia(3%) saturate(1906%) hue-rotate(191deg) brightness(95%) contrast(97%);}

}

    input{color: var(--0);}

    .gh-search {color: var(--50);}
    .gh-search:hover{color: var(--accent);}

/* чтоб никаких выделений */
    p::selection,
    a::selection,
    h1::selection,
    h2::selection,
    h3::selection,
    h4::selection,
    h5::selection,
    h6::selection,
    li::selection,
    nobr::selection,
    small::selection,
    .w tt::selection,
    article a::selection,
    figcaption::selection,
    b::selection, strong::selection,
    dfn::selection, em::selection, i::selection,
    .post-content-body blockquote p::selection {color: var(--100); background-color: var(--accent);}










/* формы */



label {
    color: #3eb0ef;
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    margin: 0 0 (2rem * 0.5);
}

input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    background: #f8f8f8;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 0.6em;
    text-decoration: none;
    width: 100%;
}
input[type="email"]:invalid,
input[type="password"]:invalid,
input[type="search"]:invalid,
input[type="tel"]:invalid,
input[type="text"]:invalid,
input[type="url"]:invalid,
select:invalid,
textarea:invalid {
    box-shadow: none;
}
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: #3eb0ef;
    box-shadow: 0 0 0 1px #3eb0ef;
}
select {
    height: 4rem;
    padding-right: 4rem;
    text-overflow: ellipsis;
}
select option {
    color: #3eb0ef;
    background: #f8f8f8;
}
select:focus::-ms-value {
    background-color: transparent;
}
select::-ms-expand {
    display: none;
}
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select {
    height: 7rem;
}
textarea {
    padding: 0.3em 0.6em;
    resize: vertical;
}
input[type="checkbox"],
input[type="r1adio"] {
    display: block;
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
}
input[type="checkbox"] + label,
input[type="r1adio"] + label {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #131313;
    cursor: pointer;
    font-size: 1em;
    font-weight: 400;
    padding-left: calc(2.4rem + 0.75em);
    padding-right: 2rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    background: #f8f8f8;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
    content: "";
    display: inline-block;
    height: 2.4rem;
    line-height: 2.24rem;
    text-align: center;
    width: 2.4rem;
    margin-right: 1rem;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background: #3eb0ef;
    border-color: #3eb0ef;
    color: #f8f8f8;
    content: "вњ“";
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border-color: #3eb0ef;
    box-shadow: 0 0 0 1px #3eb0ef;
}
input[type="checkbox"] + label:before {
    border-radius: 0.5rem;
}
input[type="radio"] + label:before {
    border-radius: 100%;
}
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display: inline-block;
    height: 4rem;
    padding: 0 2rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 4rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}
.button.fit,
button.fit,
input[type="button"].fit,
input[type="reset"].fit,
input[type="submit"].fit {
    width: 100%;
}
.button.small,
button.small,
input[type="button"].small,
input[type="reset"].small,
input[type="submit"].small {
    height: 3.6rem;
    line-height: 3.6rem;
    padding: 0 1.5rem;
    font-size: 1.2rem;
}
.button.large,
button.large,
input[type="button"].large,
input[type="reset"].large,
input[type="submit"].large {
    height: 4.56rem;
    line-height: 4.56rem;
    padding: 0 3rem;
    font-size: 1.6rem;
}
.button.disabled,
.button:disabled,
button.disabled,
button:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="submit"].disabled,
input[type="submit"]:disabled {
    pointer-events: none;
    opacity: 0.4;
}
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: transparent;
}
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    text-decoration: none;
    x-color: #118dd0 !important;
    x-box-shadow: inset 0 0 0 2px #139de7;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
.button.primary,
button.primary,
input[type="button"].primary,
input[type="reset"].primary,
input[type="submit"].primary {
    color: #fff !important;
    background-color: #6E1FE6;
    box-shadow: none;
}
.button.primary:hover,
button.primary:hover,
input[type="button"].primary:hover,
input[type="reset"].primary:hover,
input[type="submit"].primary:hover {
    background-color: #139de7;
}


article#oc .kg-audio-player-container .kg-audio-seek-slider::before, 
article#oc .kg-audio-player-container .kg-audio-volume-slider::before {
    background-color: var(--primary) !important;
}

article#oc .kg-audio-card + .kg-card-hascaption {margin-top: -40px !important;}

@media (max-width: 500px){
   article#oc .kg-audio-card ~ .kg-card-hascaption {
        margin-top: -20px !important;
    }
}
.post-content-title h1  {width: 111%;}




@media (max-w2idth: 1200px){header ul li {display: inline !important; }}


.post-content-excerpt:nth-child(2):before {
    content: "\2022";
    padding-left: 5px;
    padding-right: 8px;
}



@media (max-width: 500px) {
/*  .post-content-title {width: 100%; letter-spacing: -2.2px;}
    
    .post-content-excerpt {
        padding: 0;
        font-size: 1.2rem;
    }
}*/
.post-content-image {
    position: relative;
    width: 75vw;
    min-width: 100%;
    margin-bottom: 7vw;
    x-margin: 4vw calc(50% - 50vw);
    x-webkit-transform: translateX(calc(50vw - 50%));
    x-transform: translateX(calc(50vw - 50%));
}
.post-content-body {
    x-font-size: 2.1rem;
    x-line-height: 1.65em;
    width: 830px;
}

@media (max-width: 960px){
    .post-content-body{width: unset;}
}