/* Datalife Engine template by: redissx (ICQ: 275116000, E-mail: redissx@gmail.com, Website: webrambo.ru )  */

/* SET BASE
----------------------------------------------- */
* {background: transparent;margin:0;padding:0;outline:none;border: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
body {font: 14px Arial, Helvetica, sans-serif; line-height:normal; padding:0; margin:0;        
color: #333; background:#f4f5f6 url(../images/bg.png); height:100%; width:100%; font-weight:normal;}
img {max-width:100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}
a {color: #333; text-decoration: none;}
a:hover, a:focus, .news-link {color:#16A1E7; text-decoration: none;}
h1, h2, h3, h4, h5 {font-weight:400; font-size:18px;}

.form-wrap {}
.sub-title h1 {margin-bottom:15px; font-size:24px; font-weight:700;}
.pm-page, .search-page, .static-page, .tags-page, .form-wrap {}


/*--- SET ---*/
.button, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button, button:not(.color-btn):not([class*=fr]), 
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a {
padding:0 30px; display:inline-block; height:40px; line-height:40px; border-radius:0px; cursor:pointer; 
background-color:#16A1E7; color:#fff; text-align:center; text-transform:uppercase; font-weight:700;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
button[disabled], input[disabled] {cursor:default;}
.button:hover, .up-second li a:hover, .usp-edit a:hover, .qq-upload-button:hover, .pagi-load a:hover, .usp-btn a:hover,
button:not(.color-btn):hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .meta-fav a:hover 
{background-color:#2d547d; color:#fff;}
button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active 
{box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);}
input[type="submit"].bbcodes, input[type="button"].bbcodes, input.bbcodes, .ui-button 
{font-size: 12px !important; height: 30px !important; line-height:30px !important; padding: 0px 10px; border-radius:3px;}

input[type="text"], input[type="password"] {display:block; width:100%; height:40px; line-height:40px; padding:0 15px;
color:#000000; background-color:#f8f8f8; border-radius:0px; -webkit-appearance: none; 
box-shadow:0 0 0 1px #EDEDED,inset 1px 1px 3px 0 rgba(0,0,0,0.1);}
input[type="text"]:focus {}

input:focus::-webkit-input-placeholder {color: transparent}
input:focus::-moz-placeholder {color: transparent}
input:focus:-moz-placeholder {color: transparent}
input:focus:-ms-input-placeholder {color: transparent} 

select {height:40px; border:1px solid #e3e3e3; background-color:#FFF;}
textarea {display:block; width:100%; padding:10px; border:1px solid #e3e3e3; background-color:#F8F8F8; 
border-radius:0; overflow:auto; vertical-align:top; resize:vertical; 
box-shadow:0 0 0 1px #EDEDED,inset 1px 1px 3px 0 rgba(0,0,0,0.1);}

.img-box, .img-wide, .img-resp-h, .img-resp-v, .img-resp-sq {overflow:hidden; position:relative;}
.img-resp-h {padding-top:60%;}
.img-resp-v {padding-top:130%;}
.img-resp-sq {padding-top:100%;}
.img-box img, .img-resp-h img, .img-resp-v img, .img-resp-sq img {width:100%; min-height:100%; display:block;}
.img-resp-h img, .img-resp-v img, .img-resp-sq img {position:absolute; left:0; top:0;}
.img-wide img {width:100%; display:block;}
.img-square img {width:150%; max-width:150%; margin-left:-25%;}
.nowrap {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
button {transition: all .3s;}
.button, .side-item-img, .news-item-img, .main-item-img {transition: color .3s, background-color .3s, opacity .3s;}
.ps-link {cursor:pointer;}
.icon-l .fa {margin-right:10px;}
.icon-r .fa {margin-left:10px;}

.fx-row {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.fx-center{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-between{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.fx-stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}
.fx-top{-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.fx-middle{-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-bottom{-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}
.fx-col{display:-ms-flexbox;display:-webkit-flex;display:flex; 
-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.fx-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}



/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px; overflow:hidden; position:relative;}
.center {max-width:1200px; margin:0 auto; position:relative; z-index:20;}
.block {background-color:#FFF; padding: 20px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);}
.header {}
.cols {border: 1px solid #e3e3e3; margin: 20px 0;}
.side {width: 340px; padding: 20px; border-left: 1px solid #e3e3e3;}
.main {min-height: 100vh; padding: 20px; width: calc(100% - 340px); width: -webkit-calc(100% - 340px);}
.footer {background-color: #f3f3f3; border: 1px solid #e3e3e3; padding: 20px;}

#gotop {background-color: #fff; width: 50px; height: 50px; text-align: center; 
	line-height: 50px; display: none; cursor: pointer; position: fixed; bottom: 40px; right: 40px; 
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); z-index: 999;}
	.rkl-bx {overflow:hidden; margin-bottom:20px; text-align:center;}


/* HEADER
----------------------------------------------- */
.h-inf {height: 100px; border: 1px solid #e3e3e3; padding: 20px;}
.h-nav {height: 55px; background-color: #f3f3f3; border-bottom: 5px solid #16A1E7;}
.logo {width: calc(100% - 340px); width: -webkit-calc(100% - 340px); display: block; 
	overflow: hidden; text-shadow: 0.1px 1px 2px #888888; font-size: 12px;}
.logo p {font-size: 24px; font-weight: 700; margin-bottom: 5px;}
.search-box {width:300px;}
.search-field {width:100%; position:relative;}
.search-field input, .search-field input:focus {width:100%; padding:0 100px 0 10px; border-radius:0px; 
background-color:#fff; color:#333; height:40px; line-height:40px; box-shadow:inset 0 0 0 1px #e3e3e3;}
.search-box button {position:absolute; right:0; top:0; padding:0 15px !important;}

.h-nav li {display: inline-block;}
.h-nav a {display: block; padding: 0 20px; line-height: 50px; text-transform: uppercase; font-size:12px;}
.h-nav a:hover, .h-nav a.is-active {color: #fff; background-color: #16A1E7;}


/* NEWS
----------------------------------------------- */
.news-item {padding-left:225px;}
.news-item + .news-item {margin-top:20px; padding-top:20px; border-top:1px solid #e3e3e3;}
.news-item-img {float:left; margin-left:-225px; display:block; width:210px;}
.news-item-date {opacity:0.6; margin-bottom:5px; font-size:12px;}
.news-item-title {display:block; font-size:18px; font-weight:700; margin-bottom:10px;}
.news-item-text {opacity:0.6; margin-bottom: 10px;}
.news-item-img:hover {opacity:0.8;}


/* SIDE, FOOTER
----------------------------------------------- */
.side-bt {padding: 10px 20px; font-size: 18px; background-color: #f3f3f3;}
.side-bc {padding: 20px 0;}
ul.side-bc {padding-top: 0;}
ul.side-bc a {display: block; padding: 10px 0; border-bottom: 1px solid #e3e3e3; font-size:12px;}
.side-item + .side-item {margin-top:10px; padding-top:10px; border-top:1px solid #e3e3e3;}
.side-item-date {opacity:0.6; font-size:14px; margin-bottom:6px;}
.side-item-link {display:block;}

.ft-copyr {font-size: 12px;margin-top: 10px;}


/* BOTTOM NAVIGATION
----------------------------------------------- */
.bottom-nav {line-height:40px; text-align:center; padding:40px 0 0 0;}
.pagi-nav {max-width:100%; display:inline-block;}
.pagi-nav > span {display:inline-block;}
.pprev, .pnext {}
.pprev {}
.pnext a, .pprev a, .pprev > span, .pnext > span {display:block; width:46px; text-align:center;}
.navigation {text-align:center;}
.navigation a, .navigation span, .pnext a, .pprev a, .pprev > span, .pnext > span {display:inline-block; padding:0 10px; 
background-color:#fff; margin:5px 2px 0 0; border-radius:4px; border:0px solid #ddd; 
box-shadow:0 3px 5px 0 rgba(0,1,1,0); font-size:18px;}
.navigation span, .pagi-nav a:hover {background-color:#16A1E7; color:#fff;}
.navigation span.nav_ext {background-color:#fff; color:#888;}
.pagi-nav a:hover {background-color:#16A1E7; color:#fff;}
.dle-comments-navigation .pagi-nav {margin-bottom:0;}


/* SECTION
----------------------------------------------- */
.sect {margin-bottom:30px;}
.sect-t {margin-bottom:30px; font-size: 18px; font-weight: 700;}

.speedbar {border-bottom:1px dashed #ccc; color:#888; font-size:13px; padding:0 0 20px 0; margin:0 0 20px 0;}
.speedbar a {color:#5e90d5;}


/* FULL
----------------------------------------------- */
.full h1 {font-size:24px; margin-bottom:10px; font-weight: 700;}
.full h1 .fa {font-size:16px; margin-left:10px; vertical-align:middle;}
.full-meta {margin-bottom:20px; height:26px; padding:3px; overflow:hidden; line-height:20px;}
.full-meta .main-item-date {float:left; margin-right:15px;}
.full-meta .main-item-date.to-fav {float:right; margin:0;}
.full-meta .main-item-date.frate {margin:0 0 0 10px; position:relative; top:1px;}
.main-item-date:not(.frate) {opacity: 0.5;font-size: 12px;}

.rels {padding-top:30px; border-top:4px solid #5e90d5;}
.rels-in {width:300px; padding:15px; float:left; margin:0 30px 15px 0; display:none; 
border:1px solid #e3e3e3; border-top:4px solid #3c6695;}
.full-text .rels-in {display:block;}
.rels-in-title {margin:-15px -15px 15px -15px; padding:10px 15px; background-color:#ebeef3; font-size:18px;}
.rels-in a {text-decoration:none !important; color:#2a2a2a !important;}
.rels-in a:hover {text-decoration:underline !important; color:#3c6695 !important;}
.rels-in .row-item-date {display:block; margin:0;}
.rels-in + .quote {margin-left:330px;}

.fbtm {margin-bottom:30px; color:#888}
.error-text {font-size:14px; width:300px;}
.error-text .fa {font-size:18px; vertical-align:top; margin-right:10px;}
.error-text:after {content:attr(data-text);}



/* FULL STORY STATIC
----------------------------------------------- */
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame 
{width:100%; max-width:100% !important; height:400px; display:block; margin:0 auto;}
.mejs-container {max-width:100% !important;}
.full-text {color:#363636; font-size:15px; line-height:27px; padding-bottom:30px; font-family:Arial, Helvetica, sans-serif;}
.full-text img:not(.emoji) {max-width:100%; margin:10px 0;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text a {text-decoration:underline; color:#3c6695;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0; font-size:24px; font-weight:400; color:#000000;}
.full-text p {margin-bottom:10px;}
.full-text > ul, .full-text > ol {margin:10px 0;}
.full-text > ul li {list-style:disc; margin-left:40px; position:relative;}
.full-text2 > ul li:before {content: "\f00c"; font-family: 'FontAwesome';
position:absolute; top:0px; left:-25px; width:8px; height:8px;
color:#9cce43; border-radius:0;}
.full-text > ol li {list-style:decimal; margin-left:40px;}

.full-text table {width:100%; text-align:left; margin:10px 0;}
.full-text table tr td {padding:10px; border:2px solid #fff;}
.full-text table tr:nth-child(2n+1) {background-color:#f5f5f5;} 
.full-text table tr:nth-child(1) {background-color:#0297dc !important; color:#FFF; font-size:14px !important;}
.full-text table img {display:block; margin:0; border:0; max-width:350px}
.attach {line-height:40px; background-color:#f5f5f5; padding:0 15px 0 0; border-radius:4px; margin:10px 0; overflow:hidden;}
.attach .download-link {color:#FFF !important; text-decoration:none !important; margin-right:15px; float:left; 
display:inline-block; padding:0 15px; background:#3c6695;}
.attach-info {float:right;}
.attach i {margin-right:5px;}
.dcont {border:1px solid #e3e3e3; padding:0 15px 15px 15px; margin:0 0 20px 0; line-height:20px;}
.polltitle {display:block; padding:5px 15px; margin:0 -15px 15px -15px; font-size:18px; background-color:#f5f5f5; line-height:normal;}
.full-taglist a {color:#3c6695;}
.full-taglist {margin:0 0 30px 0;}
.full-taglist span:not(:last-child):not(.fa) a:after {content:","; margin-right:3px;}


/* COMMENTS ----------------------------------------------- */
 .full-comms {
}
 .comms-head {
     margin-bottom:20px;
}
 .comms-title {
     font-size:14px;
     float:left;
     line-height:40px;
}
 .comms-title sup {
     color:#fe023d;
}
 .add-commbtn {
     float:right;
}
 .comms-head + form #add-comm-form {
     display:none;
     margin:20px 0;
}
 .add-comm-form {
     margin:0 0 20px 0;
     background-color:#fafafa;
     padding:20px 20px 10px 140px;
     position:relative;
     border:1px solid #ededed;
}
 .ac-av {
     width:80px;
     height:80px;
     border-radius:50%;
     position:absolute;
     top:20px;
     left:30px;
     background:#CCC url(../dleimages/noavatar.png) no-repeat;
     background-size:contain;
}
 .ac-title {
     font-weight:700;
     margin-bottom:10px;
     font-size:16px;
}
 .ac-inputs input {
     width:49%;
     float:left;
}
 .ac-inputs input:last-child {
     float:right;
}
 .ac-inputs, .ac-textarea {
     margin-bottom:15px;
}
 .ac-textarea textarea {
     height:85px;
}
 .ac-submit {
     position:absolute;
     top:120px;
     left:0;
     width:140px;
     text-align:center;
}
 .sec-answer + .sec-label {
     margin-top:10px;
}
 .add-com-but + form #addcform {
     display:none;
     margin:20px 0;
}
 .ac-protect {
     margin-top:-10px;
}
 .ac-protect .label {
     font-size:12px;
}
 .ac-protect .sep-input {
     padding:10px 10px 10px 160px;
}
 .add-comm-form .login-social {
     position:absolute;
     right:17px;
     top:10px;
}
 .mass_comments_action {
     text-align:right;
     padding:5px 15px;
     background-color:#f0f0f0;
     margin:20px 0;
}
 .last-comm-link {
     font-size:16px;
     margin-bottom:10px;
}
 .last-comm-link a {
     text-decoration:underline;
     color:#06c;
}
 .comments-items {
     margin:20px 0;
}
 .comm-item {
     margin-bottom:20px;
     padding-left:90px;
     position:relative;
     min-height:80px;
}
 .comm-one {
     position:relative;
     height:40px;
}
 .comm-one > div {
     height:100%;
     float:left;
     margin-right:20px;
     line-height:20px;
}
 .comm-item:before {
     content:"";
     width:8px;
     height:8px;
     position:absolute;
     left:-2px;
     top:70px;
     background-color:#ccc;
     border-radius:50%;
}
 .status-online:before {
     background-color:#3C0;
}
 .comm-av {
     width:80px;
     border-radius:50%;
     height:80px;
     position:absolute;
     left:0;
     top:0;
}
 .comm-author, .comm-author a {
     color:#333a4c;
     text-transform:uppercase;
}
 .comm-author a:hover {
     text-decoration:underline;
}
 .comm-date, .comm-num {
     font-size:12px;
     color:#888;
}
 .comm-one > div.comm-ratebox {
     float:right;
     margin-right:0;
}
 .comm-two {
     background-color:#fafafa;
     padding:10px;
     border:1px solid #ededed;
     margin:10px 0;
}
 .signature {
     font:italic 11px Georgia, "Times New Roman", Times, serif;
     margin-top:10px;
     padding-top:10px;
     border-top:1px dashed #e3e3e3;
}
 .comm-three ul {
     text-align:right;
     text-transform:uppercase;
}
 .comm-three ul li {
     margin-left:5px;
     display:inline-block;
}
 .comm-three li:first-child, .comm-three li.comm-q {
     float:left;
     margin-left:0;
     margin-right:10px;
}
 .comm-three ul li a {
     font-size:10px;
     color:#333a4c;
}
 .comm-three ul li span.fa {
     margin-right:10px;
     color:#888;
}
 .comm-three a:hover {
     text-decoration:underline;
}
 .comments-tree-list .comments-tree-list {
}
 .comm-rate {
     background-color:#f5f5f5;
     background: linear-gradient(to bottom, #f9f9f9 0%,#f5f5f5 100%);
     border-radius:4px;
     overflow:hidden;
     box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2);
     height:24px;
     line-height:24px;
     position:relative;
     padding:0 30px;
     text-align:center;
}
 .comm-rate a {
     display:block;
     color:#fff;
     background-color:#7db625;
     width:24px;
     height:24px;
     position:absolute;
     top:0;
     left:0px;
     line-height:24px;
     font-size:12px;
}
 .comm-rate a:nth-child(2) {
     background-color:#cd3560;
     left:auto;
     right:0;
}
 .comm-rate a:hover {
     opacity:0.7;
}
 .comm-rate > span > span.ratingzero {
     color: #444444;
}
 .comm-rate > span > span.ratingtypeplus {
     color: #06b601;
}
 .comm-rate > span > span.ratingplus {
     color: #95c613;
}
 .comm-rate > span > span.ratingminus {
     color: #ff0e0e;
}

/* LOGIN ----------------------------------------------- */
 .login-box {
     width:320px;
     background-color:#FFF;
}
 .login-box a {
     font-size:14px;
     color:#9D9C9C;
     text-transform:none;
}
 .login-input {
     margin-bottom:20px;
}
 .login-button button {
     display:block;
     text-align:center;
     font-size:14px;
     width:100%;
     height:40px;
     line-height:40px;
}
 .login-button button:hover {
}
 .login-checkbox {
     font-size:10px;
     margin:10px 0;
     color:#888;
     font-family:'Open Sans';
}
 .login-checkbox input {
     display:none;
}
 .login-checkbox input + label:before {
     width:10px;
     height:10px;
     margin-right:5px;
     cursor:pointer;
     position:relative;
     top:2px;
     border-radius:3px;
     border:1px solid #ccc;
     content:"";
     background-color:#f6f6f6;
     display:inline-block;
}
 .login-checkbox input:checked + label:before {
     background-color:#c9282d;
}
 .login-links {
     text-align:center;
     line-height:30px;
}
 .login-links a {
     float:left;
     text-decoration:underline;
}
 .login-links a:last-child {
     float:right;
}
 .login-links a:hover {
     text-decoration:none;
}
 .login-social {
     text-align:center;
}
 .login-social:before {
     content:attr(data-label);
     display:inline-block;
     vertical-align:top;
     line-height:30px;
     margin-right:10px;
}
 .login-social a {
     display:inline-block;
     margin:0 3px 10px 3px;
}
 .login-social img {
     display:block;
     width:30px;
}
 .login-social a:hover img {
     transform:scale(1.1);
}
 .login-avatar {
     text-align:center;
}
 .avatar-box {
     display:inline-block;
     width:80px;
     height:80px;
     border-radius:0;
     overflow:hidden;
}
 .avatar-box img {
     width:100%;
     min-height:100%;
}
 .avatar-box + a {
     display:block;
     margin-top:5px;
     text-decoration:underline;
}
 .login-menu {
     margin-top:20px;
}
 .login-menu a {
     display: block;
     height: 25px;
     padding: 0 10px;
     line-height: 24px;
     background-color: #f5f5f5;
     margin-bottom: 5px;
}
 .login-menu a:hover {
     color:#fff;
     background-color:#9D9C9C;
}


/* ADAPTIVE
----------------------------------------------- */
.btn-menu {display:none;}
.side-panel {width:260px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#fff; 
padding:0 10px; z-index:888; position:fixed; left:-260px; top:0; transition:left .4s; -webkit-transition:left .4s;}
.side-panel.active {left:0;}
.close-overlay {width:100%; height:100%; background-color:rgba(0,0,0,0.5); 
position:fixed; left:0; top:0; z-index:887; display:none;}
.side-panel a {display:block; padding:10px 50px 10px 0; font-size:14px; border-bottom:1px solid #e3e3e3;}


@media screen and (max-width: 1220px) {
.center {max-width:1000px;}
.block, .footer, .h-inf {padding: 20px 10px;}
.block {padding: 10px;}
.error-text {display:none;}
}

@media screen and (max-width: 950px) {
.center {max-width:768px;}
.h-inf {height:auto;}
.side {display:none;}
.main {padding: 20px 10px; width: 100%;}
.logo {width: 100%; text-align:center; margin-bottom:10px;}
.logo p {font-size: 16px;}
.h-nav {display:none;}
.search-box {width:200px;}

.btn-menu {background-color:#16A1E7; color:#FFF; width:40px; height:40px; line-height:40px; text-align:center; 
font-size:24px; display:block; cursor:pointer;}
}

@media screen and (max-width: 760px) {
.center2 {max-width:640px;}

.full h1 {font-size:20px;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size:18px;}
.full-text .rels-in {width:100%; margin-right:0; float:none; display:none;}

.comm-three li:not(:first-child) {display:none;}
.dcont button {font-size:12px; padding:0 15px !important;}
.ac-protect {margin-top:0px;}
.comments-tree-list .comments-tree-list {padding-left:0px !important;}
.comments-tree-list .comments-tree-list:before {display:none;}
.mass_comments_action {display:none;}
.sub-title h1 {font-size:18px; line-height:24px;}
}

@media screen and (max-width: 590px) {
.center2 {max-width:480px;}
.news-item {padding-left:0;}
.news-item-img {float:none; margin:0 auto 20px auto;}
.ft-left {width:100%; margin-bottom:10px;}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:300px;}

.ac-soc {position:static;}
.ac-inputs input {width:100%; margin-top:10px;}
.ac-protect {width:100%; float:none; margin:0;}
.ui-dialog {width:100% !important;}
.upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
.upop-left {margin-bottom:10px; text-align:center;}
.ui-dialog-buttonset button {display:block; margin:0 0 5px 0; width:100%;}
#dofullsearch, #searchsuggestions span.seperator {display:none !important;}
.attach .download-link {margin:0 -15px 0 0; float:none; display:block; padding:0 10px;}
.attach-info {float:none;}
}

@media screen and (max-width: 470px) {
.center2 {max-width:320px;}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
}

.frate {height:40px; line-height:24px; width:200px; position:relative; opacity:0; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.frate.done {opacity:1;}
.rate-data {display:none;}
.rate-plus, .rate-minus {cursor:pointer;}
.frate .fa {color:#3c0; display:inline-block; vertical-align:top; font-size: 24px; margin-right:10px;}
.rate-minus .fa {color:#f20404; position: relative;}
.frate div:hover .fa {animation: bounceRate  0.3s infinite linear; animation-direction: alternate;}
.rbar {height:6px; overflow:hidden; background-color:#f20404; border-radius:3px; position:absolute; left:0; bottom:0; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#3c0; transition:width 1s linear;}
.rate-perc {font-size: 18px; font-weight: 700;}
.rate-perc.high {color:#3c0;}
.rate-perc.low {color:#f20404;}

@keyframes bounceRate {
  from {transform: translate(0,0%);}
  to {transform: translate(0,-50%);}
}


.ac-title {font-weight:700; margin-bottom:15px; text-transform:uppercase;}
.ac-inputs input {width:49%; background-color:#FFF}
.ac-textarea textarea {height:85px; background-color:#FFF}
.ac-submit {}
.sec-answer + .sec-label {margin-top:10px;}
.ac-protect {margin-top:-10px; display:none;}
.ac-protect .label {font-size:12px;}
.ac-protect .sep-input {padding:10px 10px 10px 160px;}
.ac-protect input { background-color:#FFF}
.comm-item2 {margin-bottom:20px;}
.comm-right {}

.comm-one2 {font-size:14px; height:18px; line-height:18px; overflow:hidden; margin-bottom:6px;}
.comm-one2 > span:last-child {color:#bcbcbc; float:right; margin-right:0;}
.comm-one2 > span {float:left; margin-right:15px;}
.comm-author2 {font-weight:700;}
.comm-author2 a {color:#6382b1;}
.comm-two2 {color:#4c4c4c; line-height:20px; padding-bottom:0; font-size:14px;}
.signature {margin-top:10px; padding-top:5px; font-size:12px; font-style:italic; color:#888; border-top:1px dashed #e3e3e3;}
.comm-three {margin-top:6px; font-size:12px; text-align:right;}
.comm-three li {display:inline-block; margin-left:10px;}
.comm-three a {color:#6382b1;}
.comm-three li:first-child {margin-left:0px; float:left;}

/*--- SET ---*/
 .button, .up-second li a, .up-edit a, .qq-upload-button, button:not(.color-btn), html input[type="button"], input[type="reset"], input[type="submit"] {
     padding:0 20px;
     color:#fff;
     display:inline-block;
     cursor:pointer;
    /*text-transform:uppercase;
    */
     height: 40px;
     line-height: 40px;
}
 button::-moz-focus-inner, input::-moz-focus-inner {
     border:0;
     padding:0;
}
 button[disabled], input[disabled] {
     cursor:default;
}
 .button:hover, .up-second li a:hover, .up-edit a:hover, .qq-upload-button:hover, button:not(.color-btn):hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
     color:#fff;
}
 button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
     box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);
}
 input[type="submit"].bbcodes, input[type="button"].bbcodes, input.bbcodes, .ui-button {
     font-size: 12px !important;
     height: 30px !important;
     line-height:30px !important;
     padding: 0px 10px;
     border-radius:3px;
}
 input[type="text"], input[type="password"] {
     display:block;
     width:100%;
     height:40px;
     line-height:40px;
     padding:0 15px;
     color:#000000;
     background-color:#f5f5f5;
     border-radius:0px;
     -webkit-appearance: none;
     box-shadow:0 0 0 1px #EDEDED;
}
 input[type="text"]:focus {
}
 input:focus::-webkit-input-placeholder {
     color: transparent 
}
 input:focus::-moz-placeholder {
     color: transparent 
}
 input:focus:-moz-placeholder {
     color: transparent 
}
 input:focus:-ms-input-placeholder {
     color: transparent 
}
 select {
     border:1px solid #e3e3e3;
     background-color:#FFF;
}
 textarea {
     display:block;
     width:100%;
     padding:10px;
     border:1px solid #e3e3e3;
     background-color:#FFF;
     border-radius:0 0 6px 6px;
     box-shadow:inset 0 0 4px 0 rgba(0,0,0,0.1);
     overflow:auto;
     vertical-align:top;
     resize:vertical;
}
 .nowrap {
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}
 button, .show-login {
     transition: all .3s;
}
 a, .ser-i:before, .news-i:before, .ser-i .fa, .news-i .fa, .ps-link, .short-mask, .rel:before, .highslide:before {
     transition: color .3s, background-color .3s, opacity .3s;
}
 .flex-row {
     display:flex;
     flex-flow:row wrap;
     justify-content:space-between;
}
 .flex-col {
     display:flex;
     flex-direction:column;
     justify-content:center;
}
 .ic-l span.fa {
     margin-right:10px;
}
 .ic-r span.fa {
     margin-left:10px;
}
 .ps-link, .ps-link2 {
     cursor:pointer;
}
 .titles-up, h1, h2, h3, h4, h5, .menus a, .side-bt, .b-col p, .head-menu, .rel-t, .comms-title {
}
 .color1, h1, h2, h3, h4, h5, .side-bt, .ser-s, .tops-l > a, .short-t, .screens-t, .rel-t, .comms-title, .voices {
     color:#333a4c;
}

.raz div {
  float: right; /* блок занимает ширину содержимого, max-width её ограничивает */
  max-width: 8em;
  min-height: 2em;
}

/* Стили для краткой новости */
.short-item { margin-bottom: 20px; }
.s-card { 
    display: flex; 
    gap: 20px; 
    background: #fff; 
    padding: 15px; 
    border-radius: 10px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}
.s-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* --- Исправленный блок постера для краткой новости --- */
.s-poster { 
    position: relative; 
    flex-shrink: 0; 
    width: 240px; /* Фиксированная ширина как в полной новости (можно менять) */
    overflow: hidden; 
    border-radius: 8px; 
    display: flex;
    align-items: flex-start; /* Прижимаем к верху, чтобы не тянулась */
}

.s-poster img { 
    width: 100%; 
    height: auto; /* Высота подстраивается автоматически под пропорции */
    display: block;
    object-fit: contain; /* Картинка не искажается */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.s-content { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    min-width: 0; /* Защита от вылета текста */
}

/* ============================================================
   ИСПРАВЛЕННАЯ АДАПТИВНОСТЬ (Для мобильных)
   ============================================================ */
@media (max-width: 768px) {
    /* Складываем карточку в колонку */
    .f-main-grid, .s-card { 
        flex-direction: column !important; 
        align-items: center !important; 
        padding: 10px !important;
    }

    /* Исправляем контейнер картинки */
    .f-poster-img, .s-poster { 
        width: 100% !important; 
        max-width: 350px !important; /* Ограничиваем, чтобы не была на весь экран гигантской */
        height: auto !important; /* Убираем фикс высоту */
        margin-bottom: 15px;
        display: block !important;
    }

    /* Исправляем саму картинку */
    .f-poster-img img, .s-poster img { 
        width: 100% !important; 
        height: auto !important; /* Картинка сохраняет пропорции и не обрезается */
        object-fit: contain !important; /* Гарантирует, что всё изображение влезет */
        border-radius: 8px;
    }

    /* Растягиваем контент на всю ширину */
    .f-info-col, .s-content { 
        width: 100% !important; 
    }

    /* На мобилках лучше скрыть пунктир или сделать его проще */
    .f-specs li, .s-specs li { 
        font-size: 13px; 
        flex-wrap: wrap; /* Если текст длинный, перенесет на новую строку */
    }
}



/* Контентная часть */
.s-content { flex-grow: 1; display: flex; flex-direction: column; }
.s-title { font-size: 19px; font-weight: bold; color: #222; text-decoration: none; margin-bottom: 12px; display: block; line-height: 1.3; }
.s-title:hover { color: #3498db; }
.s-v-badge { background: #e74c3c; color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 5px; }
.s-platform { color: #888; font-size: 14px; font-weight: normal; }

/* Список характеристик */
.s-specs { list-style: none; padding: 0; margin: 0 0 15px 0; flex-grow: 1; }
.s-specs li { font-size: 13px; padding: 4px 0; border-bottom: 1px dashed #eee; display: flex; justify-content: space-between; }
.s-specs b { color: #666; font-weight: 500; }

/* Футер карточки */
.s-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #f5f5f5; }
.s-meta { font-size: 12px; color: #999; display: flex; gap: 12px; }
.s-btn { 
    background: #3498db; color: #fff; padding: 6px 15px; border-radius: 5px; 
    text-decoration: none; font-size: 13px; font-weight: bold; transition: 0.3s;
}
.s-btn:hover { background: #2980b9; }

/* Мобильная адаптация */
@media (max-width: 600px) {
    .s-card { flex-direction: column; }
    .s-poster { width: 100%; height: 200px; }
    .s-specs li { justify-content: flex-start; gap: 10px; }
}

/* --- Глобальные стили (можно перенести в main.css) --- */
.full-article { max-width: 1100px; margin: 0 auto; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
.fa { margin-right: 8px; }

/* --- Заголовок и мета-информация --- */
.f-header { border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 15px; }
.f-title { font-size: 28px; margin: 5px 0; color: #222; }
.v-badge { background: #e74c3c; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 14px; vertical-align: middle; }
.f-meta { display: flex; gap: 15px; color: #777; font-size: 13px; flex-wrap: wrap; }
.f-fav-tools { margin-left: auto; }

/* --- Основной контент: Сетка Постер + Характеристики --- */
.f-main-grid { display: flex; gap: 25px; margin-bottom: 30px; flex-wrap: wrap; }
.f-poster-col { /* Занимает фиксированное место на десктопе */ }
.f-poster-img img { width: 300px; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.f-info-col { flex-grow: 1; /* Главное изменение: позволяет блоку заполнить оставшееся место */ }

/* --- Список характеристик (где были проблемы с линиями) --- */
.f-specs { list-style: none; padding: 0; margin: 0; }
.f-specs li { padding: 8px 0; border-bottom: 1px dashed #ddd; display: flex; justify-content: space-between; align-items: center; }
.f-specs b { color: #555; }
.size-badge { background: #27ae60; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 14px; }

/* --- Описание и требования --- */
.f-subtitle { font-size: 20px; border-left: 4px solid #3498db; padding-left: 15px; margin: 25px 0 15px; }
.f-text-content, .f-sys-box { line-height: 1.6; color: #444; padding: 0 15px; }

/* --- Скачивание и Футер --- */
.f-download-section { background: #f9f9f9; border: 2px solid #3498db; border-radius: 10px; padding: 20px; text-align: center; margin: 30px 0; }
.f-dl-button { margin-top: 15px; }
.f-footer-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #eee; }
.f-rate-box { display: flex; gap: 10px; }
.r-plus, .r-minus { cursor: pointer; padding: 5px 10px; background: #eee; border-radius: 4px; }
.r-plus:hover { background: #2ecc71; color: #fff; }
.r-minus:hover { background: #e74c3c; color: #fff; }
.f-nav-links { display: flex; justify-content: space-between; margin: 20px 0; }
.nav-btn { background: #eee; padding: 8px 15px; border-radius: 4px; color: #333; text-decoration: none; }
    
/* --- Медиа-запрос для мобильных устройств (убирает 2 колонки в 1) --- */
@media (max-width: 768px) {
    .f-main-grid { flex-direction: column; }
    .f-poster-img img { width: 100%; } /* Изображение занимает всю ширину на мобилке */
    .f-poster-col, .f-info-col { /* Убираем специфичные настройки ширины */ }
    .f-text-content, .f-sys-box { padding: 0; } /* Убираем внутренние отступы, если нужно */
}

/* ============================================================
   БОКОВАЯ ПАНЕЛЬ (SIDEBAR) - ПОЛНЫЙ СТИЛЬ
   ============================================================ */

/* Контейнер сайдбара */
.side { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* Основной блок (виджет) */
.side-bx {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

/* Заголовки блоков */
.side-bt {
    background: #f8f9fa;
    padding: 12px 15px;
    font-weight: bold;
    color: #2c3e50;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    border-left: 4px solid #3498db; /* Синий акцент */
    display: flex;
    align-items: center;
}

/* Контент внутри блоков */
.side-bc { 
    padding: 15px; 
}

/* --- Стилизация меню (Категории, Разделы и т.д.) --- */
/* Класс to-mob оставлен для работы мобильного скрипта */
.side-menu, .to-mob { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: block; 
}

.side-menu li a, .to-mob li a {
    display: block;
    padding: 11px 15px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f7f7f7;
    transition: all 0.2s ease-in-out;
    font-size: 14px;
    line-height: 1.4;
}

/* Эффект при наведении на пункт меню */
.side-menu li a:hover, .to-mob li a:hover {
    background: #f1f7fd;
    color: #3498db;
    padding-left: 22px; /* Мягкий сдвиг вправо */
}

/* Убираем нижнюю линию у последнего пункта */
.side-menu li:last-child a, .to-mob li:last-child a { 
    border-bottom: none; 
}

/* --- Дополнительные элементы --- */

/* Кнопка "Все комментарии" */
.side-btn-more {
    display: block;
    text-align: center;
    background: #f8f9fa;
    color: #3498db;
    padding: 10px;
    margin: 5px 15px 15px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #eef2f7;
    transition: 0.3s ease;
}

.side-btn-more:hover {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}

/* Рекламный блок */
.side-ads { 
    text-align: center; 
    margin: 10px 0; 
    max-width: 100%;
    overflow: hidden;
}

/* Блок профиля (если там текст) */
.profile-box .side-bc {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

/* --- Адаптивность --- */
@media (max-width: 950px) {
    .side { 
        margin-top: 25px; 
    }
    
    /* Если на мобилках ссылки должны быть крупнее для удобства нажатия пальцем */
    .side-menu li a, .to-mob li a {
        padding: 14px 15px;
        font-size: 15px;
    }
}

/* ============================================================
   СТИЛИ ПРОФИЛЯ В САЙДБАРЕ
   ============================================================ */

/* Контейнер авторизованного юзера */
.lb-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

/* Аватарка */
.lb-ava img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Круглая ава */
    object-fit: cover;
    border: 2px solid #3498db;
    padding: 2px;
}

/* Имя и ссылка на админку */
.lb-name { font-weight: bold; color: #2c3e50; font-size: 15px; line-height: 1.2; }
.lb-name a { 
    display: block; 
    font-size: 11px; 
    color: #e74c3c; 
    text-transform: uppercase; 
    margin-top: 4px;
}

/* Меню профиля */
.lb-menu { list-style: none; padding: 0; margin: 0; }
.lb-menu li a {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}
.lb-menu li a .fa {
    width: 20px;
    color: #3498db;
    font-size: 14px;
    margin-right: 10px;
    text-align: center;
}
.lb-menu li a:hover { color: #3498db; transform: translateX(5px); }

/* --- Форма входа (для гостей) --- */
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input[type="text"], 
.login-box input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    box-sizing: border-box; /* Чтобы не вылазило за края */
}
.login-box button {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.login-box button:hover { background: #2980b9; }

/* Чекбокс и ссылки */
.lb-check { font-size: 12px; color: #777; display: flex; align-items: center; gap: 5px; }
.lb-lnk { 
    display: flex; 
    justify-content: space-between; 
    font-size: 12px; 
    margin-top: 5px; 
}
.lb-lnk a { color: #3498db; text-decoration: none; }
.log-register { font-weight: bold; color: #27ae60 !important; }

/* ============================================================
   АДАПТАЦИЯ САЙДБАРА ДЛЯ МОБИЛЬНЫХ
   ============================================================ */

@media (max-width: 950px) {
    /* 1. Скрываем все блоки сайдбара, кроме профиля */
    .side .side-bx {
        display: none;
    }

    /* 2. Показываем только блок профиля */
    .side .side-bx.profile-box {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box;
    }

    /* 3. Скрываем текстовое меню внутри профиля на мобилках (опционально) */
    /* Если нужно оставить только аватарку и имя, раскомментируйте строку ниже: */
    /* .side .profile-box .lb-menu { display: none; } */

    /* 4. Растягиваем форму входа (для гостей) на всю ширину */
    .side .profile-box .side-bc {
        width: 100%;
        box-sizing: border-box;
    }

    /* 5. Убираем лишние внешние отступы у контейнера сайдбара */
    .side {
        padding: 0;
        gap: 0;
    }
}

/* --- Стилизация ТОП программ --- */
.top-container {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.top-header {
    border-bottom: 2px solid #f4f6f8;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.top-title {
    font-size: 22px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.top-static-text { color: #666; font-size: 14px; line-height: 1.5; }

/* Таблица */
.top-table-scroll { overflow-x: auto; } /* Скролл для мобилок */

.top-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #3e4347;
}

.top-table thead th {
    background: #f8f9fa;
    color: #2c3e50;
    text-align: left;
    padding: 12px 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #3498db; /* Синий акцент */
}

.top-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f2f5;
    transition: 0.2s;
}

.top-table tbody tr:hover td {
    background: #f1f7fd; /* Подсветка строки при наведении */
}

/* Ссылки на программы */
.top-table td a {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
}
.top-table td a:hover { text-decoration: underline; }

/* Бейдж рейтинга */
.top-rate-val {
    background: #27ae60;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .top-container { padding: 10px; }
    .top-table thead th, .top-table tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }
    .t-year { display: none; } /* Скрываем год на мелких экранах для компактности */
}

/* Контейнер статистики */
.stats-container { background: #fff; border-radius: 10px; padding: 25px; border: 1px solid #e0e4e8; }
.stats-title { font-size: 24px; color: #2c3e50; margin-bottom: 30px; border-bottom: 2px solid #f4f6f8; padding-bottom: 15px; }

/* Диаграммы */
.stats-charts { display: flex; justify-content: space-around; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.chart-item { text-align: center; }

.chart-circle {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
                conic-gradient(var(--clr) calc(var(--perc) * 1%), #eee 0);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.chart-num { font-size: 20px; font-weight: 800; color: #2c3e50; }
.chart-label { font-size: 14px; font-weight: 600; color: #7f8c8d; text-transform: uppercase; }

/* Сетка карточек */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stats-card { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #f0f0f0; }
.stats-card h3 { margin-top: 0; font-size: 16px; color: #3498db; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.stats-card ul { list-style: none; padding: 0; margin: 0; }
.stats-card li { padding: 8px 0; border-bottom: 1px dashed #ddd; display: flex; justify-content: space-between; font-size: 14px; }
.stats-card li:last-child { border: none; }

/* Ссылки и акценты */
.stats-link { color: #3498db; text-decoration: none; font-weight: 600; }
.text-red { color: #e74c3c; }

/* Адаптивность */
@media (max-width: 600px) {
    .stats-charts { flex-direction: column; align-items: center; }
    .chart-circle { width: 100px; height: 100px; }
}

/* --- Форма комментариев --- */
.add-comm-container {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.ac-header { border-bottom: 2px solid #f4f6f8; margin-bottom: 20px; padding-bottom: 10px; }
.ac-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 0; }

/* Блок гостя */
.ac-guest-box { margin-bottom: 20px; }
.ac-social-login { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.ac-social-login span { font-size: 13px; color: #888; }
.soc-icons { display: flex; gap: 8px; }
.soc-icons img { width: 24px; height: 24px; transition: 0.3s; filter: grayscale(20%); }
.soc-icons img:hover { transform: translateY(-3px); filter: grayscale(0); }

/* Поля ввода (Имя, Почта) */
.ac-inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ac-field input, .ac-secure-item input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}
.ac-field input:focus, .ac-secure-item input:focus { border-color: #3498db; box-shadow: 0 0 8px rgba(52,152,219,0.1); }

/* Редактор */
.ac-editor-box { margin-bottom: 20px; }
.ac-editor-box .bb-editor { border-radius: 5px; overflow: hidden; border: 1px solid #ddd; }

/* Защита */
.ac-protection-box { 
    background: #f8f9fa; 
    padding: 15px; 
    border-radius: 6px; 
    margin-bottom: 20px; 
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.ac-secure-item label { display: block; font-size: 13px; margin-bottom: 5px; color: #555; }
.cap-flex { display: flex; align-items: center; gap: 10px; }
.cap-img img { border-radius: 4px; cursor: pointer; }

/* Кнопка отправки */
.ac-footer { text-align: right; }
.ac-btn-submit {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}
.ac-btn-submit:hover { background: #2980b9; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(52,152,219,0.2); }

/* Адаптивность */
@media (max-width: 600px) {
    .ac-inputs-grid { grid-template-columns: 1fr; }
    .ac-btn-submit { width: 100%; }
    .ac-social-login { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Форма комментариев для гостя */
.ac-inputs-grid {
    display: flex !important;
    flex-wrap: wrap !important; /* Если не влезает — переносим на новую строку */
    gap: 10px !important;
}

.ac-inputs-grid input {
    flex: 1 1 200px !important; /* Минимальная ширина 200px, дальше перенос */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Блок соцсетей (иконки в ряд) */
.ac-soc, .ac-social-login {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Фикс для гостевых инпутов, чтобы не раздували сетку */
.safe-inputs {
    display: flex !important;
    flex-wrap: wrap !important; /* Ключевой момент: перенос строки */
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.safe-inputs .ac-field {
    flex: 1 1 250px !important; /* Если ширина меньше 250px, инпут уйдет на новую строку */
    min-width: 0 !important; /* Запрещаем инпуту диктовать ширину родителю */
}

.safe-inputs input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Дополнительная защита для блока соцсетей */
.ac-social-login, .ac-soc {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px;
}

/* Контейнер для SEO описаний */
.content-box.seo-block {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
    line-height: 1.7;
    color: #444;
}

/* Заголовок блока */
.sect-t h1 {
    font-size: 26px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0 0 20px 0;
    border-bottom: 2px solid #f4f6f8;
    padding-bottom: 15px;
}

/* Оформление текста внутри */
.text-content h2, .text-content h3 {
    margin: 25px 0 15px 0;
    color: #2c3e50;
}

.text-content p {
    margin-bottom: 15px;
}

/* Красивый список вместо стандартных точек */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.custom-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.custom-list li::before {
    content: "\f00c"; /* Иконка галочки FontAwesome */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    color: #3498db;
    font-size: 14px;
}

/* Адаптивность для текста */
@media (max-width: 768px) {
    .content-box.seo-block {
        padding: 20px;
        font-size: 14px;
    }
    .sect-t h1 {
        font-size: 20px;
    }
}

/* Исправление навигации в шапке */
.h-nav-bar {
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #e0e4e8;
    width: 100%;
    overflow: hidden; /* Скрываем вылеты */
}

.h-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Разрешаем горизонтальный скролл на мобилках */
    overflow-x: auto; 
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    scrollbar-width: none; /* Убираем полосу прокрутки в Firefox */
}

/* Убираем полосу прокрутки в Chrome/Safari */
.h-nav::-webkit-scrollbar {
    display: none;
}

.h-nav li {
    flex-shrink: 0; /* Запрещаем пунктам сжиматься */
}

.h-nav li a {
    display: block;
    padding: 12px 18px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap; /* ЗАПРЕТ ПЕРЕНОСА ТЕКСТА */
    transition: 0.2s;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .h-nav li a {
        padding: 12px 15px; /* Чуть меньше отступы на мобилках */
        font-size: 12px;
    }
    
    /* Добавляем тень справа, чтобы было понятно, что есть еще пункты */
    .h-nav-bar {
        position: relative;
    }
    .h-nav-bar::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 30px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
        pointer-events: none;
    }
}

.footer {
    background: #f8f9fa; /* Светлый фон */
    padding: 40px 0;
    border-top: 1px solid #eaeaea;
    color: #666;
    font-family: 'Inter', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.ft-links {
    margin-bottom: 10px;
}

.ft-link {
    text-decoration: none;
    color: #222;
    font-weight: 500;
    transition: color 0.3s;
}

.ft-link:hover {
    color: #007bff; /* Цвет при наведении */
}

.ft-divider {
    margin: 0 10px;
    color: #ccc;
}

.ft-copyr {
    font-size: 0.85rem;
    color: #999;
}

.ft-copyr span {
    font-weight: bold;
    color: #444;
}