html {
 font-size: 14px;
}

body {
 font-family: 'Roboto', sans-serif;
 background-color: #212121;
 margin: 0;
 line-height: 1.75em;
 color: #d6d6d6;
}

img {
 display: block;
}

hr {
 border: 0;
 height: 1px;
 background: #222;
}

/* Typography */

a {
 text-decoration: none;
 color: #d6d6d6;
}

a:hover {
 color: #fff;
}

h1,
h2,
h3,
h4,
h5,
.block-header,
.title {
 font-size: 1.2rem;
 margin: .7em 0;
}

h4 {
 font-size: 1.1rem;
}

.block-header,
.title {
 font-weight: 700;
}

/* Header & Footer */

.secondary-flex {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
}

.footer-flex {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: 92%;
 margin: auto;
 padding-top: .3em;
}

.footer-flex ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

footer {
 background-color: #181818;
 margin-top: .7em;
}

.footer-info p {
 margin: 0;
}

.footer-copyright {
 text-align: center;
 padding: 1em;
}

@media (min-width: 640px) {
 .secondary-flex {
 flex-direction: row;
 align-items: center;
 }
 
 .footer-flex {
 flex-direction: row;
 width: 100%;
 }
 
 .footer-info {
 width: 65%;
 }
}

header {
 background: rgba(25, 25, 25, .85);
 text-align: center;
 position: fixed;
 z-index: 999;
 width: 100%;
 padding: .7em 0;
}

/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
 position: absolute !important;
 top: -9999px !important;
 left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
 outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
 position: absolute;
 top: 0;
 left: 0;
 margin-left: 1em;
 height: 100%;
 display: flex;
 align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
 display: block;
 background: white;
 height: 3px;
 width: 2em;
 border-radius: 2px;
 position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
 content: '';
 position: absolute;
}

.nav-toggle-label span::before {
 bottom: 7px;
}

.nav-toggle-label span::after {
 top: 7px;
}

nav {
 position: absolute;
 text-align: left;
 top: 100%;
 left: 0;
 background: rgba(25, 25, 25, .85);
 width: 100%;
 transform: scale(1, 0);
 transform-origin: top;
 transition: transform 400ms ease-in-out;
}

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav li {
 margin-bottom: 1em;
 margin-left: 1em;
}

nav a {
 color: #d6d6d6;
 text-decoration: none;
 font-size: 1.2rem;
 font-weight: 700;
 /* text-transform: uppercase; */
 opacity: 0;
 transition: opacity 150ms ease-in-out;
}

nav a:hover {
 color: #fff;
}

.nav-toggle:checked ~ nav {
 transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
 opacity: 1;
 transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 640px) {
 .nav-toggle-label {
 display: none;
 }
 
 nav {
 // all: unset; /* this causes issues with Edge, since it's unsupported */
 
 /* the following lines are not from my video, but add Edge support */
 position: relative;
 text-align: left;
 transition: none;
 transform: scale(1,1);
 background: none;
 top: initial;
 left: initial;
 /* end Edge support stuff */
 
 display: flex;
 justify-content: flex-end;
 align-items: center;
 }
 
 nav ul {
 display: flex;
 }
 
 nav li {
 margin-left: 3em;
 margin-bottom: 0;
 }
 
 nav a {
 opacity: 1;
 position: relative;
 }
 
 nav a::before {
 content: '';
 display: block;
 height: 5px;
 background: white;
 position: absolute;
 top: -.75em;
 left: 0;
 right: 0;
 transform: scale(0, 1);
 transition: transform ease-in-out 250ms;
 }
 
 nav a:hover::before {
 transform: scale(1,1);
 }
}

/* Main Content */

aside {
 margin-top: 0.7em;
}

.container {
 width: 95%;
 max-width: 935px;
 margin: 0 auto;
}

.container-flex {
 display: flex;
 flex-direction: column;
 padding-top: 4.7em;
}

.block {
 padding: 1.1em;
 background-color: #181818;
 border-radius: 10px;
}

blockquote {
 border: 4px dashed #3f3f3f;
 padding: 1em;
 border-radius: 10px;
 margin: 0;
 color: #9c9c9c;
}

@media (min-width: 640px) {
 .container-flex {
 flex-direction: row;
 }
 
 main {
 width: 78%;
 margin-right: 0.7em;
 }
 
 aside {
 width: 22%;
 margin: 0;
 }
}

/* Aside */

aside img {
 opacity: .5;
 transition: all 200ms ease-in-out;
 max-width: 170px;
 width: 100%;
 -webkit-user-drag: none;
 margin: auto;
}

aside img:hover {
 opacity: 1;
}

aside .navigation-item {
 margin-top: 1em;
}

aside .navigation-item:first-child {
 margin: 0;
}

#uidLogForm {
 margin-top: 1em;
}

/* Entries */

.article-entry {
 border-bottom: 1px solid #222;
 padding: 1em 0;
}

#allEntries div:last-child .article-entry {
 border-bottom: 0;
 padding-bottom: 0;
}

.article-entry-flex {
 display: flex;
 flex-direction: column;
}

.article-entry-main {
 order: 2;
}

.article-entry-body {
 margin-bottom: 0;
}

.article-entry-secondary {
 order: 1;
}

.article-entry-image {
 width: 100%;
}

.article-entry-secondary img,
.entry-info-img img {
 object-fit: cover;
 width: 100%;
 height: 133px;
 border-radius: 5px;
}

.article-entry-info {
 margin-top: .6em;
}

.article-entry-info span,
.article-entry-info a {
 margin-top: 0.4em;
}

@media (min-width: 750px) {
 .article-entry-flex {
 flex-direction: row;
 justify-content: space-between;
 }
 
 .article-entry-main,
 .entry-info-text {
 width: 69%;
 }
 
 .article-entry-title {
 margin: 0;
 }
 
 .article-entry-secondary,
 .entry-info-img {
 width: 29%;
 }
}

/* Buttons */

.a-button,
.swchItemA1,
.swchItem1,
.swchItemA,
.swchItem,
.article-entry-info a,
.article-entry-info span {
 background-color: #101010;
 padding: 0.5em 0.7em;
 border-radius: 5px;
 font-size: 0.95rem;
 display: inline-block;
}

span.a-button:hover,
.swchItemA:hover,
.swchItemA1:hover,
.swchItemDots:hover,
.article-entry-info span:hover {
 cursor: default;
}

.download-button {
 background: #E51C3F;
 font-size: 1.2rem;
 font-weight: 700;
 padding: .9em 1.3em;
 margin-bottom: 1em;
 color: white;
 border-radius: 5px;
 display: inline-block;
}

.download-button:hover {
 background: #EA4863;
 transition: .2s ease;
}

.download-text::before {
 content: "|";
 color: white;
 padding: 0 .3em;
}

/* Sections */

.section {
 border-bottom: 1px solid #222;
 padding-bottom: 1em;
}

.section:last-child {
 border-bottom: 0;
 padding-bottom: 0;
}

/* Lists */

ul.entries-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.entries-list li {
 margin: 1em 0;
}

ul.entries-list li:last-child {
 margin-bottom: 0;
}

aside ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

aside li {
 margin: .5em 0;
}

aside li a {
 display: block;
}

aside li:first-child {
 margin-top: 1em;
}

aside li:last-child {
 margin-bottom: 0;
}

/* CATEGORIES */

.page-selector {
 text-align: center;
 margin-top: 1em;
 padding-top: 1em;
 border-top: 1px solid #222;
}

input,
textarea,
select {
 background-color: #101010;
 border-radius: 10px;
 border: 0;
 color: #d6d6d6;
 font-family: 'Roboto', sans-serif;
 font-size: 100%;
 font-weight: 400;
 padding: .6em;
 box-sizing: border-box;
}

.queryField {
 width: 100%;
 text-align: center;
 margin-bottom: 0.7em;
}

.cut {
 white-space: nowrap;
 width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 display: block;
}

.catsTd a,
.catsTdI a {
 background-color: #101010;
 padding: .5em .8em;
 border-radius: 5px;
 display: block;
}

.catsTable {
 margin-bottom: -.5em;
 border-spacing: 0;
}

td.catsTdI,
td.catsTd {
 padding-bottom: .5em;
 padding-left: .5em;
}

td.catsTdI:first-child,
td.catsTd:first-child {
 padding-left: 0;
}

/* СКРИНШОТЫ */

.img-container {
 display: grid;
 grid-gap: .35em;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.grid-categories {
 display: grid;
 grid-gap: .5em;
 grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}

.entry-grid-info {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
 column-gap: .7em;
}

.grid-list {
 display: grid;
 grid-gap: .5em;
 grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
}

.img-container img {
 object-fit: cover;
 width: 100%;
 height: 140px;
 border-radius: 5px;
}

.loginDiv,
.passwordDiv,
.securityDiv,
.rememberDiv,
.loginLinks {
 margin-top: .7em;
}

.buttonDiv {
 margin-top: .7em;
}

.buttonDiv input {
 width: 100%;
}

.logLnkSep {
 display: none;
}

.logLnkRem,
.logLnkReg,
.grid-categories a,
.grid-list a,
aside li a {
 background-color: #101010;
 padding: .5em .8em;
 border-radius: 5px;
}

.a-button:hover,
.swchItemA1:hover,
.swchItem1:hover,
.swchItemA:hover,
.swchItem:hover,
.article-entry-info a:hover,
.article-entry-info span:hover,
.logLnkRem:hover,
.logLnkReg:hover,
.grid-categories a:hover,
.grid-list a:hover,
aside li a:hover,
.catsTd a:hover,
.catsTdI a:hover {
 background-color: #E51C3F;
 color: white;
 transition: .2s ease;
}

.entry-grid-info span,
.moder-panel {
 padding: .6em 0;
 border-bottom: 1px solid #222;
}

.logLnkRem,
.logLnkReg {
 display: block;
}

.logLnkRem {
 margin-bottom: .5em;
}

.loginDiv input,
.passwordDiv input,
.buttonDiv input {
 border-radius: 5px;
 display: block;
 width: 100%;
}

.table-responsive {
 overflow-x: auto;
 overflow-y: hidden;
}

.uSpoilerButton {
 width: 100%;
}

.uSpoilerText,
#vk_comments {
 margin-top: .7em;
}

.flex-page-selector {
 display: flex;
 flex-direction: column;
}

.flex-num {
 display: flex;
}

.flex-num h5 {
 margin-left: .7em;
 opacity: .6;
}

@media (min-width: 750px) {
 .flex-page-selector {
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 }
}

.entry {
 display: flex;
 flex-direction: column;
 border-bottom: 1px solid #222;
}

.entry-info {
 order: 1;
 display: flex;
 flex-direction: column;
 margin-bottom: 1em;
}

@media (min-width: 750px) {
 .entry-info {
 flex-direction: row;
 justify-content: space-between;
 }
}

.u-mpanel.up-right {
 margin: 0 79px 0 0 !important;
}

.entry-rating-flex {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 1em;
 margin-bottom: .4em;
}

@media (min-width: 640px) {
 .entry-rating-flex {
 margin-top: 0;
 }
}

.entry-download {
 text-align: center;
 order: 2;
}

.entry-message {
 order: 3;
}

.entry-message p:first-of-type,
.no-margin-top {
 margin-top: 0;
}

.entry-message img {
 border-radius: 5px;
}

.cat-descr {
 margin: 0;
 background-color: #101010;
 padding: .5em .8em;
 border-radius: 5px;
}

.sorting-menu {
 text-align: center;
 padding: 1em 0;
 border-bottom: 1px solid #222;
}

.entry-message h2 {
 border-bottom: 4px dashed #3f3f3f;
}

.entry-message a {
 color: #0A8DFF;
}

.entry-message img {
 max-width: 100%;
}

.entry-message iframe {
 width: 100%;
}

.text-opacity {
 opacity: .6;
}

.to-right {
 float: right;
}

.user-list .uTopTd,
.user-list .uTd:not(:first-of-type) {
 text-align: left !important;
}

/* TABLE IN PUBL */

.publTable {
 width: 100%;
}

.publTable tr {
 border-bottom: 1px solid #222;
}

.publTable tr:last-child {
 border-bottom: 0;
}

.publTable td {
 padding: .5em 0;
}

/* Ad */

#yandex_rtb_R-A-2794185-1,
#yandex_rtb_R-A-2794185-2,
#yandex_rtb_R-A-2794185-5 {
 margin-top: 1em;
}

/* Ajax */

.xw-plain {
 box-shadow: 2px 2px 4px rgba(0,0,0,.25) !important;
}

.xw-plain img,
.profile img {
 display: inline;
}

.xw-plain .xw-bl, .xw-plain .xw-ml, .xw-plain .xw-tl {
 background-color: #181818 !important;
}

.myWinCont {
 font: 1em/1.1 'Roboto', sans-serif !important;
}

.js-teasers-wrapper, .js-teasers-wrapper-down {
    display: none;
}

form {
    display: none;
}

.ya-share2__item_service_twitter, #vk_comments {
    display:none!important;
}

a {
    text-decoration: underline;
}
.entry-download a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}