*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

::-moz-selection {
    background: #353d4a;
    color: #ffffff;
}

::selection {
    background: #353d4a;
    color: #ffffff;
}

*:target:before {
    content: "";
    display: block;
    height: 2em;
    margin-top: -2em;
}

html, body {
    height: 100%;
    min-height: 100vh;
}

body {
    line-height: 1.4em;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    background:  #cdbeb2;
    background-attachment:fixed;
    margin: 0;
    padding: 0;
    background-repeat: repeat;
}

#body {
    width: 100%;
    max-width: 2500px;
    min-width: 240px;
    margin: 0 auto;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html, body, p, figure, figcaption, audio, video, span {
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font: inherit;
}

aside, footer, header, div, nav, section {
    display: block;
}

h1, h2, h3, h4, h5, h6 {clear: both;padding-bottom: 0;}

h1, h2, h3, h4, h5, h6{font-weight: 500;text-align:center; margin: 0; text-decoration: none; font-style: normal; line-height: 1.2;clear: both;}

h1 {font-size:26px; font-family: "Helvetica"; color: #000;}
h2 {font-size:24px; font-family: "Rockwell Bold"; color: #000; padding: 5px;}
h3 {font-size:22px; font-family: "FF Kava", serif; color: #000; padding: 0 20px;}
h4 {font-size:20px; font-family: "FF Kava", serif; color: #000; padding: 5px;}
h5 {font-size:18px; font-family: "Rockwell Bold"; color: #252525;}
h6 {font-size:16px; font-family: "Mistral", Courier, monospace; color: #fff;}
 p {font-size:16px; font-family: 'Playfair Display'; color: #000;line-height: 1.4em;}
 a {background: transparent; border: 0; font-size: 16px; margin: 0; outline: focus; padding: 0; vertical-align: baseline; transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;} 
 a:link  {text-decoration: none; color: #2E3F67;}
 a:visited {text-decoration: none; color: #2E3F67;} 
 a:active { text-decoration: none; color: #2E3F67;}
 a:hover {font-size:16px; text-decoration: underline; color: #000;}
 img {max-width: 100%; height: auto; }
video {width: 100%;height: auto;max-height: 100%;}
header {padding: 0;margin-bottom: 20px;}
table {border-collapse: collapse;border-spacing: 0;}
main {flex: 1;}
.clear {clear: both;display: block;content: " ";height: 0;visibility: hidden;}
* html .clearfix {height: 1%;}

th {
background: #9BDAD2;
color: #fff;
text-shadow: 0px 1px 1px #70a29c;
text-align: left;
padding: 8px 14px;
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
}

.css-style1 {
    font-family: GH Guardian Headline,Guardian Egyptian Web,Georgia,serif;
    font-size: 2.125rem;
    line-height: 1.15;
    font-weight: 700;
    color: #fff8e7;
}

/* блок гугл */
.inner_page {display: block;width:100%;padding: 20px;background: linear-gradient(135deg, #2a2320 0%, #3a2e28 50%, #4a3a30 100%);
    border-bottom: 3px solid;border-image: linear-gradient(90deg, #cc6666, #caa885, #b69e40, #cc6666) 1;}

.inner_page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.inner_page .col-sm-12 {
    align-items: center;
    justify-content: space-between;
}

.inner_page .column33 {
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 100%;
}

.inner_page .column66 {
    flex: 2 1 600px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;
    align-items: stretch;
}

.inner_page .column66 .col-sm-6 {
    flex: 1 1 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.inner_page .col-sm-6:first-child {
    margin-right: 10px;
}

.inner_page .col-sm-6:last-child {
    margin-left: 10px;
}
.ad-block {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(202, 168, 133, 0.3);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a49584;
    overflow: hidden;
}
.ad-badge {position: absolute;top: -8px;right: 15px;background: linear-gradient(135deg, #cc6666, #b35555);color: white;padding: 3px 10px;border-radius: 12px;
    font-size: 0.7em;font-weight: 600;}
  
/* реклама */
.adv {display: inline-block;width: 100%;height: auto;margin: 0 auto;font-size: 16px;}
.ad-modern {position: relative;background: rgba(255, 255, 255, 0.05);border-radius: 12px;padding: 15px;border: 1px solid rgba(202, 168, 133, 0.3);min-height: 90px; 
    max-height: 120px;display: flex;align-items: center;justify-content: center;margin: 10px 0;color: #a49584;overflow: hidden;}
/* конец реклама */

/* поиск */
.search-block {display: table; clear: both; width: 100%; height: 100%; margin: 10px auto;padding: 10px 0}
.search{display: block; float: right; min-width: 300px; width: 30%; margin: 0 auto; margin-left: 0px;}
.search-form {display: flex;width: 100%;min-width: 0;}
.search-modern {display: flex;flex-direction: column;gap: 8px;margin: 10px 0;width: 100%;}
.search-container {display: flex;background: rgba(255, 255, 255, 0.1);border-radius: 25px;padding: 5px;border: 1px solid rgba(202, 168, 133, 0.3);
    transition: all 0.3s ease;min-height: 50px;}
.search-container:focus-within {border-color: #cc6666;box-shadow: 0 0 15px rgba(204, 102, 102, 0.3);background: rgba(255, 255, 255, 0.15);}
.search-input {flex: 1;background: transparent;border: none;padding: 12px 20px;color: #ffffff;font-size: 0.95em;outline: none;
    border-radius: 25px 0 0 25px;overflow: hidden;}
.search-input::placeholder {color: #a49584;}
.search-btn {flex: 0 0 auto;background: linear-gradient(135deg, #cc6666, #b35555);border: none;width: 55px;height: auto;cursor: pointer;transition: all 0.3s ease;
    display: flex;align-items: center;justify-content: center;border-radius: 0 25px 25px 0;flex-shrink: 0;}   
.search-btn:hover {background: linear-gradient(135deg, #b35555, #cc6666);transform: scale(1.05);box-shadow: 0 5px 15px rgba(204, 102, 102, 0.4);}
.search-icon {font-size: 1.2em;}
.search-tags {display: flex;gap: 6px;justify-content: flex-end;flex-wrap: wrap;}
.search-tag {background: rgba(204, 102, 102, 0.2);color: #e8d5c4;padding: 3px 8px;border-radius: 12px;font-size: 0.75em;cursor: pointer;transition: all 0.3s ease;border: 1px solid transparent;}
.search-tag:hover {background: rgba(204, 102, 102, 0.4);color: #ffd700;border-color: #cc6666;}
/* конец поиск */
/* конец блок гугл */
.header-reset * {
    all: unset;
    box-sizing: border-box;
}
.header-container {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #2a2320 0%, #3a2e28 50%, #4a3a30 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #cc6666, #caa885, #b69e40, #cc6666) 1;
}
.header-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 33% / 66% */
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}
.header-logo {
    grid-column: 1;
}
.logo-modern {text-align: left;padding: 10px 0;}
.logo-main {font-size: 2.2em;font-weight: 900;color: #ffffff;line-height: 1;margin-bottom: 5px;font-family: 'Kurale', serif;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.logo-accent {color: #b69e40;background: linear-gradient(45deg, #b69e40, #ffd700);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.logo-dot {color: #cc6666;}
.logo-subtitle {color: #e8d5c4;font-size: 1em;font-weight: 500;margin-bottom: 8px;}
.highlight {color: #ffd700;font-weight: 600;}
.logo-stats {display: flex;gap: 10px;align-items: center;flex-wrap: wrap;}
.stat {color: #c4b5a3;font-size: 0.85em;font-weight: 500;}

/* Адаптивность */
@media (max-width: 1024px) {
    .header-columns {gap: 15px;}
    .logo-main {
        font-size: 1.9em;
    }
}

@media (max-width: 768px) {
    .inner_page {padding: 15px;}
    .inner_page .col-sm-12 {flex-direction: column;gap: 15px;align-items: stretch;}
    .inner_page .column33, .inner_page .column66 {width: 100%;flex: 1 1 auto;}
    .inner_page .column33 {width: 100%;flex: 1 1 100%;text-align: center;min-width: unset;}
    .inner_page .column66 {width: 100%;flex: 1 1 auto;display: flex;gap: 15px;flex-basis: 100% !important;align-items: stretch;flex-direction: column;}
    .inner_page .column66 .col-sm-6 {display: flex;flex-direction: column;flex: 0 0 auto;min-width: 0; box-sizing: border-box;margin: 0 !important; padding: 0 !important;
        width: 100% !important;max-width: 100%;}
    .inner_page .ad-modern:empty,.ad-modern:has(div:empty) {display: none;}
    .inner_page .col-sm-6:first-child:has(.ad-modern:empty) {display: none;}
    .inner_page .col-sm-6:last-child:only-child {width: 100%;}
    .inner_page .col-sm-6:first-child,.inner_page .col-sm-6:last-child {margin: 0 !important;padding: 0 !important;}
    .logo-main {font-size: 1.8em;}
    .logo-subtitle {font-size: 0.9em;}
    .logo-stats {flex-wrap: wrap;gap: 5px;}
    .search-modern {display: flex;flex-direction: column;align-items: flex-start;margin: 0 !important;padding: 0;width: 100%;}
    .search-container {border-radius: 12px;overflow: hidden;min-height: 45px;width: 100%;margin: 0;padding: 0;}
    .search-input {padding: 10px 15px;min-height: 35px;width: 100%;}
    .search-btn {width: 60px;flex-shrink: 0;min-height: 35px;border-radius: 0 12px 12px 0;}
    .search-tags {justify-content: center;gap: 6px;margin-top: 10px;width: 100%;padding: 0 5px;}
    .ad-modern {margin: 0 !important;width: 100%;min-height: 70px;}
}

@media (max-width: 480px) {
    .inner_page {padding: 10px;}
    .header-columns {gap: 10px;}
    .logo-main {font-size: 1.6em;}
    .logo-subtitle {font-size: 0.9em;}
    .search-container {min-height: 40px ;border-radius: 12px;}
    .search-input {min-height: 30px;padding: 4px 8px;font-size: 0.9em;}
    .search-btn {width: 50px;min-height: 30px;border-radius: 0 12px 12px 0;}
    .search-tags {flex-wrap: wrap;justify-content: center;gap: 6px;}
    .search-tag {font-size: 0.7em;padding: 3px 6px;}
    .search-form {flex-direction: row;}
    .logo-stats {font-size: 0.75em;}
}

/* Поддержка темной темы */
@media (prefers-color-scheme: dark) {
    .inner_page {
        background: linear-gradient(135deg, #1a1512 0%, #2a211c 50%, #3a2c24 100%);
    }
    
    .ad-modern {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(202, 168, 133, 0.2);
    }
    
    .search-container {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .search-input::placeholder {
        color: #8a7b6d;
    }
}

/* Плавная анимация при изменении размера */
.inner_page,
.adv,
.col-sm-12,
.column33,
.column66,
.col-sm-6,
.logo-modern,
.ad-modern,
.search-modern {
    transition: all 0.3s ease;
}

/* Улучшенная доступность для фокуса */
.search-input:focus,
.search-btn:focus {
    outline: 2px solid #cc6666;
    outline-offset: 2px;
}

.search-tag:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

/* Оптимизация для печати */
@media print {
    .inner_page {
        background: white !important;
        border-bottom: 1px solid #ccc;
    }
    
    .logo-main,
    .logo-subtitle,
    .logo-stats {
        color: black !important;
    }
    
    .ad-modern,
    .search-modern {
        display: none !important;
    }
}

.title-logo {display: inline-block;background: #fff;text-transform: uppercase;font-weight: 900;margin: 0 auto;padding: 10px 10px;box-shadow: 0px 0px 0px 2px #caa885;
    background: #cc6666;color: #fff;font-family: 'Kurale', serif;font-size: 20px;}

.col {display: table-cell;vertical-align: top;margin:0;}

.header-content{display:block;margin: 0 auto;max-width: 1280px;width:100%;}
.menu-box-wrapper {float: left; width:100%; margin-top: 8px;}
.menu-top-container {display: block;text-align: center;margin: auto;overflow: hidden;}
#navbar {display: flex;flex-wrap: wrap;position: relative;max-width: 1280px;width: 100%;float: left;padding: 0;min-height: 55px;background: linear-gradient(135deg, #b88f7a 0%, #a87e68 100%);
    font-family: 'Kurale', serif;font-weight: normal;text-align: center;border-radius: 0 0 12px 12px;box-shadow: 0 4px 15px rgba(151, 117, 99, 0.3);}
#navbar ul {position: relative;display: none;list-style: none;float: left;background: linear-gradient(135deg, #e8877a 0%, #e07569 100%);
    margin: 0 auto;padding: 0;border-radius: 0 0 8px 8px;}
#navbar li:hover ul {display: block; }
#navbar, #navbar ul {margin: 0;list-style-type: none;}
#navbar li {float: left;display: block;text-align: center;height: 100%;flex: 1;transition: all 0.3s ease;}
#navbar li a {float: none;display: flex;align-items: center;justify-content: center;color: #fff;text-decoration: none;text-align: center;font-size: 16px;
    text-transform: uppercase;height: 100%;padding: 15px 10px;transition: all 0.3s ease;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);}
#navbar a {display: flex;align-items: center;justify-content: center;color: #fff;text-decoration: none;text-align: center;margin: 0;padding: 15px 10px;height: 100%;}
#navbar ul li {float: none;}
#navbar ul li a {display: block;padding: 12px 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#navbar li:hover {background: linear-gradient(135deg, #cc7777 0%, #cc6666 100%);transform: translateY(-2px);}
#navbar ul li:hover {background: linear-gradient(135deg, #e9958a 0%, #e8877a 100%);} 
#navbar li a:hover {text-decoration: none;color: #fff;background: rgba(255, 255, 255, 0.1);transform: scale(1.05);}
#navbar .submenu {top: 100%;left: 0;width: 100%;z-index: 9999;transition: all 0.3s ease;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
/* Активный пункт меню */
#navbar li a[href="#"] {
    background: linear-gradient(135deg, #cc6666 0%, #b35555 100%);
    color: #ffd700;
    font-weight: 600;
}
/* Адаптивность для навбара */
@media (max-width: 768px) {
    #navbar {flex-direction: column;min-height: auto;border-radius: 0 0 8px 8px;}
    #navbar li {flex: none;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    #navbar li:last-child {border-bottom: none;}
    #navbar li a {padding: 12px 15px;font-size: 15px;}
    #navbar {padding: 0;}
}

@media (max-width: 480px) {
    #navbar li a {padding: 10px 12px;font-size: 14px;}
}

.grid-nav {display: inline-block;float: left;padding: 0 5%; border: 1px solid #ccc;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;
    border-width: 1px 0;font-size: 13px;}

.grid-nav span {float: none;display: inline;}
.grid-nav::after {content: ".";display: block;height: 0;font-size: 0;line-height: 0;visibility: hidden;}

#main {width: 100%;background: none;}
#container {margin: 10px auto 0;max-width: 1280px;width: 100%;background: #fff;padding: 0 ;height: 100%;}
#container:after, #main-content:after, header:after, .header-content:after, .menu-box-wrapper:after, #navbar:after, footer:after, #footer:after {content:"";display:table;clear:both}

#main #content{width: 100%;float: none;}

#content {
    width: calc(72% - 30px);
    float: left;
}

#breadcrumbs {margin-bottom: 10px;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;list-style: none;
    border-left: 2px solid #caa885;border-bottom: 2px solid #caa885;text-align: center;}
#breadcrumbs span {color: #818181;margin-left: 5px;}
#breadcrumbs a {font-size: 14px;margin: 0 auto;color: #333;font-weight: 600;}
#breadcrumbs a:hover {color: #cc6666}
#breadcrumbs .delimiter {padding: 0 3px; font-size: 14px;}
#breadcrumbs .active {color: grey;font-size: 14px;font-weight: 600;}
#breadcrumbs .active a:hover{color: grey;text-decoration: none;}

.breadcrumbs {font-size: 13px;color: #aaa;margin: 0 0 15px;border-bottom: 1px solid #e9ecef;border-radius: 0;}
.breadcrumbs {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;list-style: none;}
.breadcrumbs a {display: inline-block;color: #337AB7;transition: color .17s;}
.breadcrumbs a::before {content: '';margin-left: 5px;margin-right: 5px; color: #7f7f7f;}
.breadcrumbs a:first-child::before {content: ''; }

.breadcrumbs .active {color: grey;font-size: 13px;}
.breadcrumbs a:hover{color: #337AB7;}

.breadcrumbs .active a:hover{color: grey;text-decoration: none;}


.link {text-decoration: none;font-size: 14px;align-items: center;}

.active {color: #cc0000;font-size: 14px;text-decoration: none;}

@media screen and (min-width: 768px) {
 .breadcrumbs {
  font-size: 13px;
  line-height: 16px;
 }
}

/* ------------------------------------- */
.post {width: 90%;height: 90%;float: left;}

.view {width: 100%;height: 100%;overflow: hidden;position: relative;cursor: default;}

.view .content {display: grid;position: relative;height: 350px;overflow: hidden;background-color: #dbc1cc;margin: 1%;}

.view img {width: 100vw;height: 250px;max-width: 100%;min-height: 100%; object-fit: cover;}

.view-content {display: flex;width: 100%;height: 100%;padding: 0 1%;vertical-align: bottom;}

.view p {color: #498;text-align: left;font-size: 16px;line-height: 1em;margin: 0;padding: 1%;}

.view p a {color: #122;text-shadow: 0 1px 1px #fbbe18;text-decoration: none;}

.view p a:hover {color: #444;text-decoration: underline;}

.view a.info {display: inline-block;text-decoration: none;padding: 7px 14px;background: #f9f9f9;color: #333;text-transform: uppercase;
     -webkit-box-shadow: 0 0 1px #999;-moz-box-shadow: 0 0 1px #999;box-shadow: 0 0 1px #999;}

.view a.info:hover {
-webkit-box-shadow: 0 0 10px #fff;
-moz-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
}
.view-fourth img {
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.view-fourth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 10;
margin: 10% auto;
padding: 20px 20px 20px 20px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* --------------------------------- /and */

/* ------------------------------------ */
.grid {margin-bottom: 0;}
.grid-item {text-align: center;width: 100%;}
.grid-item a {
  display: inline-block;
}
.grid-item img {
    display: inline-block;
    width: 100%;
    height: 80px;
    object-fit: cover;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: .5s ease-in-out;
    border-radius: 6px;
    border: 2px solid transparent;
}
.grid-item img:hover {
    transform: scale(1.05);
    border-color: #cc6666;
    filter: grayscale(0%);
}
.grid-item a:hover img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
/* ------------------------/and */

/* --------- index ------- */
.category-wrapper {
  clear: both;
  margin-top: 10px;
  border: 1px solid #A6A6A6;
  margin-bottom: 20px;
  position: relative;
  border-radius: 0;
}

#cat2-feed {
  display: grid;
  grid-template-columns: 2fr 1px 1fr 1px 1fr;
  grid-template-rows: auto 1px auto;
  height: 300px;
  gap: 10px;
  padding: 25px 10px;
    padding-top: 25px;
    padding-bottom: 25px;
  
  
}

.article-description {
  font-size: 10pt;
  color: #646464;
  word-break: break-word;
  color: #808080;
}

#cat2-1-feed, #cat2-2-feed, #cat2-3-feed, #cat2-4-feed {
  display: flex;
  flex-direction: column;
}

.cat-pic {
  width: auto;
  height: 250px;
}

#cat2-2-feed .cat-pic, #cat2-3-feed .cat-pic, #cat2-4-feed .cat-pic {
  width: auto;
}

.cat-pic {
  width: 221px;
  height: 145px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
}

#cat2-1-feed .article-name-mini {
  font-size: 16pt;
}
.article-name-mini {
  color: #232323;
  font-size: 12pt;
  font-weight: bold;
  line-height: 22px;
  text-decoration: none;
  color: #232323;
}

#cat2-1-feed {
  grid-area: 1/ 1/ 4/ 2;
}

#cat2-2-feed {
  grid-area: 1/ 3/ 4/ 4;
}

#cat2-3-feed {
  grid-area: 1/ 5/ 2/ 6;
}

#cat2-4-feed {
  grid-area: 3/ 5/ 4/ 6;
}

#cat2-sep1 {
  grid-area: 1/ 2/ 4/ 3;
  border-right: 1px solid #d9d9d9;
}

#cat2-sep2 {
  grid-area: 1/ 4/ 4/ 5;
  border-right: 1px solid #d9d9d9;
}

#cat2-sep3 {
  grid-area: 2/ 5/ 3/ 6;
  border-bottom: 1px solid #d9d9d9;
}
/* ---------- and -------- */
row::after, .column-right::after {content: "";display: table;clear: both;}

/* Контейнер для всей боковой панели */
.sidebar-container {position: relative;height: 100%;}
/* End */

/* Рекламный блок в боковой панели */
.sidebar-ad {position: sticky;top: 20px;width: 100%;background: #fff;padding: 15px;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px dashed #caa885;margin-top: 20px;transition: all 0.3s ease;}

.sidebar-ad:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0,0,0,0.15);}

.ad-label {font-size: 0.8rem;color: #977563;text-align: center;margin-bottom: 10px;font-weight: bold;text-transform: uppercase;}
/* End */

.adv-container {display: flex; align-items: flex-start; width: 100%;}

.column25 {position: relative;width: 25%;}

.column33 {width: 33.3333333333%;float: left;position: relative;}

.column66 {width: 66.6666666667%;float:left}

.column75 {width: 75%;}
.content-row {display: flex;width: 100%;flex-wrap: wrap;}

.column99 {width: 99.9999999997%;float:left}

.row-inner {height: 100%;width: 100%;display: table;padding: 10px;position: relative;text-align: center;}

.row-inner:hover .hover-inner{opacity:1}

.hover-inner {position: absolute;top: 0;left: 0;width: 100%;height: inherit;display: table;opacity: 0;z-index: 3;}

.html-block {height: 500px;background: url(/images/gallery/muzyka.jpg) #fff;background-position: center;background-repeat: no-repeat;background-size: 90%;}

.block-beige{background: #77CFD0; padding:5px;text-align:center;}
.block-beige a {color: #8b9ab4}

.row a, .column-center div{display: table-cell; vertical-align: middle;color: #2c2f32;}
.row a.link-white{color:#fff;}
.row span{display:block;font-size:18px;font-weight:bold;}

.post-list {float: left;width: 100%; min-width: 240px; overflow: inherit;}

.post-view {display: block;overflow: hidden;background: #e5e7eb;padding: 14px;margin-top: 10px;border-bottom: solid 5px #1a73e8;border-top: solid 3px #1a73e8;}
.post-view h2 {color: #790000;font-family: "Rockwell Bold", serif; font-size: 26px; font-weight: bold;}
.post-view h3 {color: #ad0000;font-family: "Roboto", serif; font-size: 24px; font-weight: bold;}
.post-view ol {float: left;display: block;text-align: left;padding-left: 5%;}
.post-view p {color: #000;line-height: 1.4em;}
.post-view i {color: #007acc;line-height: 1.2em;}
.post-view .content {text-align: left; padding-bottom: 20px;color:#000;text-overflow: ellipsis;}
.post-view .color {color:#db4d3d; font-size:20px; padding:2% 0 0 2%;}
.post-view .size {font-size: 1.8rem;}
.post-image {display:block; float: none;width: 100%; min-height: 250px !important;overflow: hidden;margin-top: 10px;margin-bottom: 10px;position: relative;vertical-align: auto;
             background-position-x: center !important;background-position-y: center !important;background-size: cover !important;}
.post-thumb {position: relative;overflow: hidden;width: 100%;padding-bottom: 48.5%;background: #ddd;}
.post-thumb img {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;object-fit: cover;}
.post-view a {display: inline-block; line-height: 1em;vertical-align: baseline;text-decoration: none;color: #0047ab; position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
.post-view a:hover {text-decoration:none;color: #e37568;z-index:1;position:relative;}		
.post-view a::after{position: fixed;width: 100%;height: 100%;content: "";z-index:-1;top:0;left:0;pointer-events: none;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;opacity:0;}
.post-view a::before {position: absolute;top: 100%;right: 0;width: 100%;height:1px;background: #3399FF;content: '';opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;-webkit-transform: translateY(6px);-moz-transform: translateY(6px);transform: translateY(6px);
    pointer-events: none;}
.post-view a:hover::before, .post-view a:focus::before {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}
.anchorexason a:focus::after {background: #fbf8f9;opacity:0.7;}
             
.post-image a{display:block;margin: auto;background-position-x: center;background-position-y: center}

.img {display:inline-block; max-width: 100%; height:250px; object-fit: cover; object-position: center; transition: .5s ease-in-out; background-size: cover;}

@media only screen and (max-width: 480px) { 
 .post-image, .img { width: 240px;} 
}

.image {
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.tit {font-size: 1.7rem !important; color: #1d4b79;}

.post-view-info {float: left; width: 100%; text-overflow: ellipsis; display:flex; line-height: 21px;font-weight: 400;}
.post-text {overflow: hidden;margin-bottom: 5px; font-family: 'Montserrat', sans-serif;padding:1%;}
.post-content {position: relative; display: block; overflow: hidden; line-height: 1.2em; text-align: left;margin: 0;color: #5e5e5e;word-wrap: break-word; font-size: 15px;
 font-family:'Fira Sans Condensed', sans-serif;}

.post-txt p {text-align: left; font-family: 'Fira Sans Condensed', sans-serif;font-size: 1.2rem !important;}

.post-text a {display: inline-block;color: #111;}
.entry-title, .entry-title a {font-family: "Roboto" ,"Helvetica Neue", Helvetica, Arial, sans-serif;}
.entry-title {font-size: 18px;}
.entry-title a {color: rgb(230, 40, 27);text-align: left;text-decoration: none !important; font-weight: 700;font-size: 20px;line-height: 24px;
-webkit-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; padding:5px;}

.panel {float: left; margin: 10px auto 10px; padding:10px; width: 100%; line-height: 1em; border-radius: 5px; transition: all 500ms ease;  font-size:14px;
    background-color: #f0ece0; border: 1px solid rgba(0,0,0,0); border-radius: 4px; border-color: #1a73e8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
.panel p {font-size:14px;}
.panel a {display: inline-block; line-height: 1em;vertical-align: baseline;text-decoration: underline;color: #0047ab; position: relative;font-weight: 400;}
.img_style {display: block; float:left; margin: 1% 2% 1% 1%;}
/* ----------------------- главная ---------------------- */
.column-left{height:300px;background:#f59675; width: 100%;display: table-cell;padding:10px; vertical-align: middle;}
.column-left h1 {text-align:center;font-weight: 800; font-size: 30px;margin-bottom:5px;color: #2c2f32;}
.column-left em{color:#fff;font-style:normal;font-weight:bold}
.column-left a{text-align: center;}
.column-left:hover { background-color: #c04848;}
.column-left .hover {display: table; background: #cc6666;vertical-align: middle; padding:10px; font-size:16px;}
.column-left .hover h2 {font-size:20px; }
.column-left .hover p {font-size:16px;}

.center-block {height: 300px;background: url(/images/gallery/muzyka.jpg) #fff;background-position: center;background-repeat: no-repeat;background-size: 90%;}
.center-block p {color: #333}
.center-block h2 {font-weight: 500;color: #123}

.center-block h2, p, .column-right h2, p, .column-left-bottom h2, p, .zar-block h2, p {text-align:center;}

.column-right{height:300px;background:url(/images/gallery/foto.jpg) #790000;background-position:center;background-repeat:no-repeat;background-size:90%;}
.column-right p{color: #fff;}
.column-right h2{color: #fff;}

.column-left-bottom {height:300px; background: url(/images/gallery/video.png) #abd6cf; background-position:center;background-repeat:no-repeat;background-size:90%;}

.column-bottom{height:300px;background:#fff;width: 100%;display: table;padding:10px;}

.zar-block{height:300px;background:url(/images/shapka/bisnesonline.jpg) #E1DACA;background-position:center;background-repeat:no-repeat;background-size:90%;}
.zar-block p{text-align:center;color: #000;}

.block-zar{background: #cdc5c2;padding:10px;text-align:center;} 
.block-zar a {color: #333}
/* ----------------------- конец главная ------------------ */

.column-center{height:500px;background:#d4a281;width: 100%;display: table;padding:10px;}
.column-center h1 {font-weight: 700; font-size: 30px;margin-bottom:5px;}
.column-center em{color:#fff;font-style:normal;font-weight:bold}
.column-center a {text-align: center;}

.lessons-block{height:500px;background:url(/images/gallery/foto.jpg) #790000;background-position:center;background-repeat:no-repeat;background-size:90%;}
.lessons-block p{text-align:center;color: #fff;}
.lessons-block h2{text-align:center;color: #fff;}

.block-red{background: #c4df9b;padding:10px;text-align:center;} 
.block-red a {color: #333}

.height250 {height:250px;}

.css-block{background: white;}

.js-block{background: #CEC093;background-position:center;background-repeat:no-repeat;text-align:center;background-size:70%;}

.block-blue{background: #CEC093;background-position:center;padding:10px;text-align:center}
.block-blue:hover { background-color: #3498DB;}

.typo-block{background:white; text-align:center; padding:10px;}

.forum-block{height:400px;background:url(/images/gallery/video.png) #77CFD0;background-position:center;background-repeat:no-repeat;background-size:90%;}
.forum-block p{text-align:center;}
.block-sand{background: #E1DACA;padding:10px; text-align:center}

/* music---------------------------------------------------------------- */
.column-music{display: table-cell;height: 100%;background:#db3b8d; background:linear-gradient(235deg,#ffccbd 50%,#ecbc2d 50%);width: 100%;padding:10px;text-align: center;vertical-align: middle;}
.column-music h1 {font-weight: 800; font-size: 30px;margin-bottom:10px;}
.column-music h2 {font-weight: 500; font-size: 26px;margin-bottom:10px;}
.column-music em{color:#fff;font-style:normal;font-weight:bold}
.column-music a {text-align: center;}

.left-column-music, .center-column-music, .right-column-music {width: 100%;display: table; vertical-align: middle; background-size: 100%}
.left-column-music {background: linear-gradient(135deg, #f8f5f2 0%, #f0e6d8 100%);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(151, 117, 99, 0.1);}
.center-column-music {background:#ccc;}
.right-column-music {background: #f5e1d7;padding: 15px;position: relative;}

.html-block-music {display: block;width: 100%;background: #f5cfba;background-position: center; background-size: cover;padding: 15px;margin-bottom: 20px;float:none;}

.html-block-music h2 {font-weight: 500; font-size: 30px;margin-bottom:10px;}

@media screen and (max-width: 360px) {
    .left-column-music {
        max-width:320px;
        height:auto;
    }
}

/* foto----------------------------------------------------------------- */
.column-left-foto, .center-block-foto, .column-right-foto, .left-bottom-foto, .center-bottom-foto, .right-bottom-foto{
    background:#f59675; width: 90%;min-height:250px; height:auto; display: table-cell;padding:10px; vertical-align: middle;}
.center-block-foto{background:#fff;}
.column-right-foto{background:#edcd74;}
.left-bottom-foto {background: rgb(150, 230, 230);}
.center-bottom-foto {background:#fff;}
.right-bottom-foto {background:#fc4;}

.bottom-block {display: table-cell;height: 100%;background: #fff;background-position: center;vertical-align: top}
 
/* ------------ Grid ------------ */

#grid {
    display: grid;
    grid-gap: 2vw;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
#grid > div {
  font-size: 1vw;
  padding: .5em;
  text-align: center;
}

#grid > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* ------------ End ------------- */

.image-block {
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap;
    align-content: space-between;
}

.image-block img{
    max-width: 100%;
    width: 340px;
    height: 200px;
    display: flex;
    flex-flow: row wrap;
    float: left;
    
}

.size-page-image {
    float: left;
    width: auto;
    margin: 0 30px 20px 0;
    box-shadow: 0 0 0 2px #f5f5f5;
}

/* ------------------------------ Видео -------------------- */
.column-video{display: table; background:rgb(235, 248, 250);width: 100%;padding:10px auto;text-align: center;vertical-align: middle; }

.txt {background: linear-gradient(135deg, #f8f5f2 0%, #f0e6d8 100%);padding: 30px;border-radius: 12px;border-left: 4px solid #cc6666;margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(151, 117, 99, 0.1);position: relative;overflow: hidden;}
.txt::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, #cc6666, #caa885, #b69e40);}
.txt h1 {color: #5a4a3a;font-size: 2.2em;margin-bottom: 20px;text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background: linear-gradient(90deg, transparent, rgba(204, 102, 102, 0.1), transparent);padding: 10px 0;border-radius: 8px;text-align: center;}
.txt p {font-family: 'Muller', sans-serif;color: #6d5c4a;line-height: 1.7;font-size: 1.1em;
    background: linear-gradient(90deg, transparent, rgba(202, 168, 133, 0.05), transparent);padding: 15px;border-radius: 8px;margin: 10px 0;}
.h_2 {background: linear-gradient(135deg, #e8d5c4 0%, #d4bda3 100%);color: #5a4a3a;margin-bottom: 15px;padding: 12px 20px;border-radius: 8px;border-left: 4px solid #b69e40;
    font-size: 1.3em;font-weight: 600;}
.h_2a {
    background: linear-gradient(135deg, #e8d5c4 0%, #d4bda3 100%);
    color: #5a4a3a;
    margin: 10px 0 30px 0;
    padding: 18px 25px;
    border-radius: 12px;
    border-left: 4px solid #b69e40;
    font-size: 1.6em;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 15px rgba(151, 117, 99, 0.15);
}
.txt a {display: block;color: #cc6666;text-align: center;font-size: 1.1em;text-decoration: none;padding: 10px 15px;margin: 10px 0;background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;transition: all 0.3s ease;border: 1px solid rgba(204, 102, 102, 0.2);}
.txt a:hover {text-decoration: none;background: rgba(204, 102, 102, 0.1);color: #b35555;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(204, 102, 102, 0.2);}
/* Адаптивность */
@media (max-width: 768px) {
    .txt {padding: 20px;margin: 20px 10px;}
    .txt h1 {font-size: 1.8em;padding: 8px 0;}
    .txt p {font-size: 1em;padding: 12px;}
    .h_2 {font-size: 1.2em;padding: 10px 15px;}
    .h_2a {margin: 8px 0 25px 0;padding: 15px 20px;font-size: 1.4em;}
}

@media (max-width: 480px) {
    .txt {padding: 15px;}
    .txt h1 {font-size: 1.5em;}
    .txt p {font-size: 0.95em;padding: 10px;}
    .txt a {font-size: 1em;padding: 8px 12px;}
}
.column-video-rt{background: rgba(150, 230, 230, 0.5)}

/* -------------------------------- Основное ------------------ */
.left-column, .right-column {width: 100%;display: inline-block;padding:10px; vertical-align: middle;}
.left-column {background:#f59675;}
.right-column {background:#ecbc2d;}

.efect :hover {display: block; background: #dbc1cc;vertical-align: top; padding:1%; font-size:25px;}
.efect h2:hover {color: #498;}
.efect img:hover {opacity: 0.5;filter: alpha(opacity=50);}

.video {max-width: 100%;overflow: hidden;background: #001;height: 177px;display: flex;flex-direction: column-reverse;justify-content: center;}

.thumb-wrap {
  position: relative;
  padding-bottom: 50.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 10px;
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 0;
}

/* цитаты--------------------------------------------------------------- */
.blockquote {
background: #f4eedb;
height: 100%;
text-align: left;
position: relative;
color: #797568;
padding: 10px;
font-style: italic;
box-shadow: 0 0 30px 5px #d2c7ad inset;
border-radius: 5px;
margin: 10px 0;
}

.blockquote img {
  width: 30%;
  height: 30%;
  float: left;
  margin: 0 1em 1em 0;
}

.blockquote p {
font-size: 16px;
margin-top: 0;
margin-bottom: 10px;
text-align: left;
font-family: 'Philosopher';
}

.blockquote h3 {
font-size: 22px;
margin-top: 10px;
font-family: 'Regular', "roboto";
}

.blockquote h4 {
font-size: 20px;
}

.blockquote h5 {
font-size: 18px;
}

.blockquote h6 {
text-align: left;
}

.blockquote p:before {
font-size: 16px;
color: #EA6844;
font-family: serif;
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.blockquote a {display: inline-block; line-height: 1em;vertical-align: baseline;text-decoration: underline;color: #0047ab; position: relative;font-weight: 400;}
.blockquote a:hover {text-decoration:none;color: #e37568;z-index:1;position:relative;}		
.blockquote cite {font-style: normal;}

/* горизонт */
 nav {
  width: 100%;
  border: black 2px solid;
  margin-right: 10px;
  padding: 10px 20px;
}
 
 nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
}
 
 nav ul li {
  list-style-type: none;
}
/* end */

.navigation {height: 50px; list-style: none; text-align: center;margin: 30px auto;}
.navigation ul {font-size: 1.5em; line-height: 10px;}
.navigation li {display:inline-block; vertical-align: middle;margin: 10px auto;}
.navigation li a:hover, .navination li .active span {color: white;background: #e37568;text-decoration: none;}
.navigation li a, .navination li span {display: block;font-family: "seguibl", sans-serif;color: #fff ;font-size: 20px;text-align: center;width: 37px;height: 32px;line-height: 20px;
    border: 1px solid #a44699;transition: all 0.4s ease;text-decoration: none;}
.navigation li a{background: #9ca1a6; padding: 5px;}
.navigation li a:hover {color: #9ca1a6;}
.navigation li a:active {color: #fff;}
.navigation-active {display: none;color: #cc0000;font-size: 1.5em;text-align: center;}


.first  {
list-style: none;
padding: 0;
}
.first li {
padding: 10px 30px;
background: linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);
border-bottom: 1px solid grey;
color: #506a6b;
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 5px;
}
.first li:last-child {border-bottom: none;}

/* Стили для блока "Подборки и Ссылки" */
.links-item {
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.links-item:hover {
    transform: translateX(3px);
}

.links-item a {
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
}

.links-item a:hover {
    background: rgba(204, 102, 102, 0.1);
    color: #cc6666;
}

/* Секция партнеров */
.partners-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #9c99cc;
}

.partners-section h5 {
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1rem;
}

.partner-link {
    margin-bottom: 10px;
    text-align: center;
}

.partner-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.partner-image:hover {
    transform: scale(1.02);
    border-color: #cc6666;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Быстрые ссылки */
.quick-links {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #9c99cc;
}

.quick-links h5 {
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1rem;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quick-link {
    display: block;
    padding: 8px 5px;
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.quick-link:hover {
    background: rgba(204, 102, 102, 0.15);
    border-color: #cc6666;
    transform: translateY(-2px);
}

/* Адаптивность для быстрых ссылок */
@media (max-width: 480px) {
    .quick-links-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-link {
        padding: 6px 3px;
        font-size: 0.75rem;
    }
}

/* footer-------------------------------------------------------------- */

#wrapper-footer {background: linear-gradient(135deg, #2a2320 0%, #3a2e28 50%, #4a3a30 100%);color: #e8d5c4;margin-top: 60px;position: relative;overflow: hidden;}
#wrapper-footer::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, #cc6666, #caa885, #b69e40, #cc6666);
    background-size: 200% 100%;animation: gradientShift 3s ease infinite;}
@keyframes gradientShift {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}
#footer {max-width: 1200px;margin: 0 auto;padding: 40px 20px 20px;position: relative;}
.footer-main {display: grid;grid-template-columns: 2fr 3fr;gap: 40px;margin-bottom: 40px;}
.footer-sections-wrapper {display: grid;grid-template-columns: 1fr 1fr 1.5fr;gap: 40px;text-align: left; /* принудительно влево */}

.footer-section {text-align: left;}
.footer-section h4 {color: #ffd700;font-size: 1.2em;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid rgba(204, 102, 102, 0.3);font-weight: 600;}
.footer-logo {font-size: 2em;font-weight: bold;color: #ffffff;margin-bottom: 10px;}
.logo-accent {color: #b69e40;}
.footer-tagline {color: #c4b5a3;font-size: 1.1em;margin-bottom: 25px;line-height: 1.5;text-align: left;}
.footer-social {display: flex;gap: 15px;justify-content: flex-start; /* Выравниваем соцсети влево */}
.social-link {display: flex;align-items: center;justify-content: center;width: 45px;height: 45px;background: rgba(204, 102, 102, 0.2);border-radius: 50%;font-size: 1.2em;
    text-decoration: none;transition: all 0.3s ease;border: 2px solid transparent;}
.social-link:hover {background: rgba(204, 102, 102, 0.4);transform: translateY(-3px);border-color: #cc6666;box-shadow: 0 5px 15px rgba(204, 102, 102, 0.3);} 
.footer-links {display: flex;flex-direction: column;gap: 12px;}
.footer-links {
    align-items: flex-start;
}
.footer-link {color: #e8d5c4;text-decoration: none;padding: 8px 0;transition: all 0.3s ease;border-radius: 5px;padding-left: 10px;border-left: 2px solid transparent;}
.footer-link:hover {color: #ffd700;padding-left: 15px;border-left-color: #cc6666;background: rgba(204, 102, 102, 0.1);}
.footer-contacts {margin-bottom: 25px;}
.contact-item {display: flex;align-items: center;gap: 10px;margin-bottom: 12px;color: #c4b5a3;}
.contact-icon {font-size: 1.1em;}
.footer-newsletter p {color: #c4b5a3;margin-bottom: 15px;font-size: 0.95em;}
.newsletter-form {display: flex;gap: 8px;}
.newsletter-input {flex: 1;padding: 12px 15px;border: 1px solid rgba(202, 168, 133, 0.3);border-radius: 8px;background: rgba(255, 255, 255, 0.1);color: #ffffff;
    font-size: 0.9em;transition: all 0.3s ease;}
.newsletter-input:focus {outline: none;border-color: #cc6666;background: rgba(255, 255, 255, 0.15);box-shadow: 0 0 10px rgba(204, 102, 102, 0.3);}
.newsletter-input::placeholder {color: #a49584;}
.newsletter-btn {padding: 12px 18px;background: linear-gradient(135deg, #cc6666, #b35555);border: none;border-radius: 8px;color: white;cursor: pointer;
    font-size: 1.1em;transition: all 0.3s ease;}
.newsletter-btn:hover {background: linear-gradient(135deg, #b35555, #cc6666);transform: scale(1.05);box-shadow: 0 5px 15px rgba(204, 102, 102, 0.4);}
/* Нижняя часть подвала */
.footer-bottom {display: flex;justify-content: space-between;align-items: center;padding: 30px 0 20px;border-top: 1px solid rgba(202, 168, 133, 0.3);flex-wrap: wrap;gap: 20px;}
.footer-copyright {flex: 1;min-width: 300px;}
.footer-copyright p {color: #a49584;margin-bottom: 8px;font-size: 0.9em;line-height: 1.5;text-align: left;}
.copyright-link {color: #ffd700;text-decoration: none;font-weight: 600;}
.copyright-link:hover {color: #cc6666;}
/* Статистика */
.footer-stats {display: flex;gap: 30px;}
.stat-item {text-align: center;}
.stat-number {display: block;font-size: 1.8em;font-weight: bold;color: #ffd700;margin-bottom: 5px;}
.stat-label {font-size: 0.8em;color: #c4b5a3;text-transform: uppercase;letter-spacing: 1px;}

.liveinternet-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.liveinternet-counter a {
    display: block;
    text-decoration: none;
}

.liveinternet-counter img {
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(202, 168, 133, 0.3);
}

.liveinternet-counter img:hover {
    transform: scale(1.05);
    border-color: #cc6666;
    box-shadow: 0 4px 12px rgba(204, 102, 102, 0.2);
}

/* Музыкальная строка */
.footer-music {background: rgba(204, 102, 102, 0.1);padding: 15px 20px;border-radius: 10px;margin-top: 20px;border: 1px solid rgba(204, 102, 102, 0.2);}
.now-playing {display: flex;align-items: center;gap: 15px;color: #ffd700;font-weight: 500;}
.music-icon {font-size: 1.2em;animation: bounce 2s infinite;}
@keyframes bounce {0%, 20%, 50%, 80%, 100% { transform: translateY(0); }40% { transform: translateY(-3px); }60% { transform: translateY(-2px); }}
.music-text {font-size: 0.95em;}
/* Адаптивность */
@media (max-width: 1024px) {.footer-main {grid-template-columns: 1fr 1fr;gap: 30px;}
    .footer-sections-wrapper {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {.footer-main {grid-template-columns: 1fr;gap: 30px;text-align: left;}
    .footer-main {display: block !important; /* Меняем grid на block */}
    
    .footer-bottom {flex-direction: column;}
    .footer-copyright {min-width: auto;}
    .newsletter-form {flex-direction: column;}
}
@media (max-width: 480px) {
    #footer {padding: 30px 15px 15px;}
    .footer-stats {gap: 20px;}
    .stat-number {font-size: 1.5em;}
    .footer-logo {font-size: 1.6em;}
    .footer-section {padding: 5px 10px; /* Добавляем небольшие отступы по бокам */}
    .footer-links {gap: 8px; /* Уменьшаем расстояние между ссылками */}
    .footer-link {padding: 6px 0; /* Уменьшаем отступы ссылок */font-size: 0.9em; /* Немного уменьшаем шрифт */}
    .contact-item {justify-content: flex-start; /* Контакты выравниваем влево */}
    .newsletter-form {flex-direction: column; /* Форма в колонку на очень маленьких экранах */align-items: flex-start; /* Выравниваем влево */}
    .newsletter-input {width: 100%; /* Поле ввода на всю ширину */max-width: 250px; /* Но не шире 250px */}
}

.footer-widget-area a {color: white;display:inline-block;}
.footer-widget-area-1 {float: left;width: 50%; padding-left: 10px;}
.footer-widget-area-2 {float: right;width: 50%;}
.footer-widget-area-3 {width: 100%;}
.scroll-top {border: 4px solid white; cursor: pointer;height: 52px;line-height: 44px;width: 52px;position: absolute; top: -4px;right: 0px;text-align:center}
.scroll-top:before{content:"\f106";font-family:FontAwesome;color:white;font-size:30px;}
.footer-widget-area-3 li{display:inline-block;}
.footer-widget-area-3 .fa {font-size:20px;margin-left: 25px}
.hex_footer	{ float: left; margin-right: 5px; height: 40px; }

.tagcloud {padding-top: 10px;}
#footer .tagcloud {padding-top: 0;}
.tagcloud a {text-decoration: none;}
.tagcloud a:hover {text-decoration: underline;}
.sidebar-widget, .footer-widget {border: none;margin-right: 0;}
.sidebar-widget, .footer-widget {max-width: 100%; }
.sidebar-widget select {margin-top: 10px;width: 100%;}

.part {width: 100%;float: left;text-align: center;margin: 10px;}

.item {display: block;float: left;width: 100%;padding: 10px;margin: 10px;}

.item span {font-size:16px; background: #3498DB; border-radius: 5px; padding: 8px;outline: 2px dashed #2E3F67;}
.item span a {color: #fff;}
.item span a:hover {color: #db8;}

.item p {color: #db8;line-height: 1.2;text-align:center;font-size:13px; font-family: "Helvetica Neue", "Helvetica", sans-serif; padding: 10px 0;}

.item-1 {border-color: #52392e !important; }

.item-image {
position: relative;
top: 0;
}

.text {float: left; padding: 10px; font-size: 13px; font-family: "Sylfaen"; color: #fff;}
.text p{color: #fff;text-align:left}
.text a{font-size: 20px; color: rgb(150, 230, 230)}
.text a:hover,a:active{color:#db8}
.years {margin: 5px;padding: 3px;border-radius: 50px;background: #aaa;width: 50px;color: #cf4d35;display: inline-block;vertical-align: middle;
    text-align: center; font-size: 24px;}
    
.logo {font-size:30px; line-height: 1em; font-family: "Mistral", Courier, monospace; color: #fff;}

aside, div {font-size: 100%;}
    #section {display: block; margin: 0 auto; padding: 0;}
    .wrapper {min-width: 830px; margin: 0 20px 20px 20px; padding: 10px; background: #EEEEEE;}

    .conts {border: 0 none; width: 100%;}
 
    .i-table {display: block; border: 1px solid #019; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 5px; text-align: center;}
    
    #page {position: relative; max-width: 1260px; background-color: #cf4d35; height: 60px; margin: 0; padding: 0; border: groove 2px #BB8377;}

.area {text-align: center; font-size: 2.5em; color: #cf4d35; padding-top: 10px; letter-spacing: -6px; font-weight: 900; text-transform: uppercase; animation: blur 5.5s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;}

.sidebarForm {background: #4B565E; padding: 5px; border: groove 2px #FFBD40; border-radius: 15px 15px 0 15px;}

.menu-block {padding: 0; margin: 0;float: inherit;}

/*стили всего блока меню, пунктов и ссылок*/
.vertical-menu {position: relative;display: inline-block;background: #caa885;border: solid 1px #cc6666;border-radius: 5px;padding: 0;margin: 5px auto;width: 100%;}
.vertical-menu ul {position: absolute;display: block;float: left;list-style: none;}

.vertical-menu li {float: left;height: 100%;margin-bottom: 5px;}

.vertical-menu li {position: relative;list-style: none;outline: focus;background: #E3B287;border: solid 1px #cc6666;border-radius: 5px;padding: 0;margin: 2px;
/*анимация для пунктов*/
  -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.vertical-menu ul li { float: none;}
.vertical-menu ul li a{display: block;}

.vertical-menu a {display: block;background: #fff8e7;text-decoration: none;text-align: left;color: #333;box-shadow: none;padding: 8px 12px;border-radius: 5px;
    transition: all 0.3s ease;border-left: 3px solid transparent;margin: 0;}
    
.vertical-menu a:hover {background: rgba(255,255,255,0.9);text-decoration: underline; text-shadow: 1px 0 4px #ccf, 2px 0 7px #f90;}
/* вертикальное меню--------------------------------------------------------------- */

#menu-block {padding: 0;margin: 0;float: center;}
  
/*стили всего блока меню, пунктов и ссылок*/
.vertical-nav-menu {position: relative;display: inline-block;background: #caa885 transparent;border: none;;border-radius: 5px;padding: 0;margin: 5px auto;
    width: 100%; float: left;}
 
.vertical-nav-menu h3 {background: linear-gradient(90deg, transparent, #E3B287 50%, transparent);color: #5a4a3a;padding: 15px 20px;border-radius: 8px;margin: 25px 0 15px 0;
    font-size: 1.3em;} 

.vertical-nav-menu ul {position: absolute;display: block;float: left;}

.vertical-nav-menu li {position: relative;list-style: none;outline: focus;background: #caa885;font-size: 16px;border: solid 1px #e8d5c4;border-radius: 8px;
padding: 0;margin: 8px 0; transition: all 0.3s ease;
/*анимация для пунктов*/
  -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.vertical-nav-menu li a {font-size: 16px;}
.vertical-nav-menu li a span {font-size: 16px;}
.vertical-nav-menu a {display: block;text-decoration: none;text-align: left;color: rgb(35, 48, 50);font-size: 16px; box-shadow: none; padding: 5px;margin: 0;}
.vertical-nav-menu a:hover {color: #fff; text-shadow: 1px 0 4px #ccf, 2px 0 7px #445}

.vertical-nav-menu .right a {text-decoration: none;color: #fff;font-size: 16px; box-shadow: none; padding: 5px;margin: 0;}
.vertical-nav-menu .right a:hover {text-decoration: underline; color: #ffb; text-shadow: 1px 0 4px #ccf, 2px 0 7px #f90}
.vertical-nav-menu .css-color {color: #954;}

.sticky {
    position: sticky;
    background: #928e6f;
    position: fixed !important;
    margin-top: 71px;
}

/* --------------------------icon----------------------------- */


.plateItems {
    text-align: justify;
    font-size: 0;
    line-height: .1em;
    padding: 0;
    margin: 15px 0;
    clear: both;
}

.plateItems .item {
    position: relative;
    width: 100%;
    max-width: 170px;
    padding: 0;
    display: inline-block;
    background: none;
    margin: 15px 0 10px;
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

.plateItems .cover {
    position: relative;
    display: block;
    line-height: 0;
}

.plateItems .cover img {
    width: 170px;
    height: 150px;
    min-width: 98px;
    min-height: 78px;
    border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    -webkit-border-radius: 5px 5px;
}

.plateItems .item .title {
    display: inline-block;
    padding: 5px 3px;
    line-height: 1rem;
    max-height: 45px;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* --------------------------slider----------------------------- */
* {
    margin: 0; 
    padding: 0;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.slide-block{height:250px;background:#c9b0a1;background-position:center;background-repeat:no-repeat;background-size:100%;}

.accordian {display: flex;max-width: 1200px;min-width: 240px;width: 100%; height: 250px;overflow: hidden; margin: 20px auto;box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
   -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 100%;
    display: table; 
    table-layout: fixed;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}

.accordian ul li { 
          display: table-cell; 
          vertical-align: bottom; 
          position: relative; 
          width: 16.666%; 
          height: 250px; 
          background-repeat: no-repeat; 
          background-position: center; 
          transition: all 500ms ease; 
} 

.accordian ul li div { 
          display: block; 
          overflow: hidden; 
          width: 100%; 
} 



.accordian ul li div a h2 { 
          font-family: Montserrat, sans-serif; 
          text-overflow: clip; 
          font-size: 24px; 
          text-transform: uppercase; 
          margin-bottom: 2px; 
          top: 160px; 
} 

.accordian ul li div a p { 
          top: 160px; 
          font-size: 13.5px; 
}

.accordian ul:hover li { width: 10%; } 

.accordian ul:hover li:hover { width: 50%; } 

.accordian ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } 

.accordian ul:hover li:hover a * { 
          opacity: 1; 
          -webkit-transform: translateX(0); 
          transform: translateX(0); 
}

.accordian li {
    position: relative;
    display: block;
    width: 40px;
    
    float: left;
    
    border-left: 1px solid #888;
    
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.accordian li img {
    display: block;
}

.image_title {
    background: rgba(231, 0, 150, 0.4);
    position: absolute;
    left: 0; bottom: 0;	
    width: 240px;	

}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

@media screen and (max-width: 240px) {
    .accordion { height: auto; }
    .accordion ul li, 
    .accordian ul li:hover, 
    .accordian ul:hover li, 
    .accordian ul:hover li:hover { 
          position: relative; 
          display: table; 
          table-layout: fixed; 
          width: 100%; 
          -webkit-transition: none; 
          transition: none; 
    }
}

.brutal-carousel {
    position: relative;
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
    background: rgba(25, 20, 30, 0.85);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 15px;
}

.carousel-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.slide-content {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
    filter: brightness(0.9);
    transition: transform 1.2s ease, filter 0.6s ease;
}

.carousel-slide:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.image_title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(151, 117, 99, 0.8);
    padding: 12px 15px;
    z-index: 2;
}

.image_title a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.ad-slide {
    background: #2a2528;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-slide img {
    object-fit: contain;
    background: #1a1a1a;
    padding: 20px;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(151, 117, 99, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav:hover {
    background: #cc6666;
    transform: translateY(-50%) scale(1.1);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 8px;
}

.carousel-indicators span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3a3;
    margin: 0;
    cursor: pointer;
    transition: all 0.4s ease;
}

.carousel-indicators span.active {
    background: #cc6666;
    transform: scale(1.3);
}

@media (min-width: 768px) {
    .carousel-slide {
        flex: 0 0 50%;
    }
}

@media (min-width: 1024px) {
    .carousel-slide {
        flex: 0 0 33.33%;
    }
}


.block_item {
    background: #E3B287;
    height: auto;
    width: 100%;
    padding: 15px;
    display: block;
    border-radius: 5px;
    -webkit-box-shadow: 0px 6px 17px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 6px 17px -5px rgba(0, 0, 0, 0.75);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 2px solid #9c99cc;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.block_item h3 {
    text-align: left;
    font-size: 22px;
    font-weight: 500;
    font-family: 'GT Walsheim Pro', Arial, Helvetica, sans-serif;
    color: #44529d;
}

.block_item h3, .block_item h4 {
    color: #2c3e50;
    margin-bottom: 12px;
    border-bottom: 2px solid #cc6666;
    padding-bottom: 5px;}

.block_item p {
    text-align: left;
    font-weight: 300;
    font-family: 'GT Walsheim Pro', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.block_item a {display: inline-block; line-height: 1.1em;font-size: 16px;vertical-align: baseline;text-decoration: none;color: #261504; position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
.block_item a:hover {text-decoration:none;color: #e37;z-index:1;position:relative; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15);}

.block_item hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9c99cc, transparent);
    margin: 8px 0;
}

/* Стили для блока "Интересное" */
.interesting-item {
    transition: all 0.3s ease;
}

.interesting-item:hover {
    transform: translateX(5px);
}

.interesting-item a {
    display: block;
    padding: 8px 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.interesting-item a:hover {
    background: rgba(204, 102, 102, 0.1);
    color: #cc6666;
}

/* Адаптивность */
@media (max-width: 768px) {
    .sidebar-ad {
        position: relative;
        top: 0;
        margin: 20px 0;
    }
    
    .vertical-menu {
        max-height: 300px;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

@media (max-width: 480px) {
    .html-block-music,
    .right-column-music {
        padding: 10px;
    }
    
    .block_item {
        padding: 10px;
    }
    
    .grid-item img {
        height: 60px;
    }
}

.text_block {
    background: #fcfcfc;
    margin: 20px 0;
    padding: 1% 5%;
    border: 1px solid #797568;
    border-radius: 5px;
     box-shadow: 0 1px 1px rgba(0,0,0,.05);
    display: inline-block;
    height: auto;
    width: 50%;
}

.text_block ul {
    background: 0 0;
    list-style: none none;
    line-height: 1.6;
    margin: 0;
    overflow: hidden;
    z-index: 1;
}

.text_block ul li {
    position: relative;
    display: block;
    padding-left: 1%;
    list-style-type: none;
}

.text_block ul li a{
    position: relative;
    display: block;
    padding-bottom: 1%;
    list-style-type: none;
    line-height: 1.1em;
    font-size: 16px;
    background-color: transparent;
}

.show-more {
    display: table;
    background: #db8;
    height: auto;
    width: 30%;
    padding: 1%;
    border-radius: 5px;
    -webkit-box-shadow: 0px 6px 17px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 6px 17px -5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 6px 17px -5px rgba(0, 0, 0, 0.75);
    border: 2px solid #928e6f;
    transition: all 500ms ease;
    
}

.show-more p {
    text-align: center;
    font-weight: 300;
    font-family: 'GT Walsheim Pro', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.show-more a{
    display: inline-block;
    line-height: 1.1em;
    font-size: 16px;
    vertical-align: baseline;
    text-decoration: none;
    color: #0047ab;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.show-more a:hover {text-decoration:none;color: #e37568;z-index:1;position:relative;}


.dropbtn {
    padding: 5px;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
  display: table-cell;
  background: #e1daca;
  padding-left: 0;
  width: 40px;
  height: 40px;
  text-align: center
}

/* Links inside the dropdown */
.dropbtn a {
    color: black;
    padding: 0;
    text-decoration: none;
    display: inline-block;
}

/* cookie */
#cookie_notification {
    display: inline-block;
    background-color: white;
    justify-content: space-between;
    align-items: flex-end;
    position: fixed;
    transform: translate3d(-50%);
    min-width: 100%;
    height: auto;
    z-index: 100000;
    font-size: 13px;
    line-height: 20px;
    padding: 10px;
    color: #fff;
    left: 50%;
    bottom: 0;
    text-align: center;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}

#cookie_notification p{
  margin: 0;
  font-size: 0.7rem;
  text-align: left;
  color: $color_text;
}


@media (min-width: 576px){
  #cookie_notification.show{
    display: flex;
  }
  .cookie_accept{
    margin: 0 0 0 25px;
  }
}

@media (max-width: 575px){
  #cookie_notification.show{
    display: block;
    text-align: left;
  }
  .cookie_accept{
    margin: 10px 0 0 0;
  }
}

/* ============================================================
   СТИЛИ ДЛЯ ГЛОБАЛЬНОГО ПЛЕЕРА (адаптированы под ваш дизайн)
   ============================================================ */

/* ============================================================
   СТИЛИ ДЛЯ СОВРЕМЕННОГО ПЛЕЕРА И СПИСКА ТРЕКОВ
   (Добавить в конец style.css)
   ============================================================ */

/* ---- ПЛЕЕР ---- */
/* ============================================================
   ПЛЕЕР NAKEROSINE (адаптирован под стиль сайта)
   ============================================================ */

.nakerosine-player {
    background: linear-gradient(145deg, #1a1714 0%, #2a2320 100%);
    border-radius: 20px;
    padding: 24px 24px 20px;
    margin: 25px 0 35px;
    border: 1px solid rgba(202, 168, 133, 0.2);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    position: relative;
}

/* Декоративный фон */
.nakerosine-player::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(204, 102, 102, 0.06), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ---- ВЕРХНЯЯ ПАНЕЛЬ ---- */
.player-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.player-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CAF50;
    display: inline-block;
    animation: pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.status-dot.paused {
    background: #ff9800;
    animation: none;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.status-text {
    color: #a49584;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.player-volume-btn {
    color: #a49584;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.3s;
}

.player-volume-btn:hover {
    color: #caa885;
    background: rgba(202, 168, 133, 0.1);
}

/* ---- ДИСПЛЕЙ ТРЕКА ---- */
.player-display-area {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

.album-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(135deg, #caa885, #cc6666);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(204, 102, 102, 0.3);
}

.player-title {
    flex: 1;
    min-width: 0;
}

.track-name-main {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist-main {
    display: block;
    color: #a49584;
    font-size: 13px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    margin-top: 2px;
}

/* ---- ПРОГРЕСС ---- */
.player-progress-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.timer,
.duration {
    color: #a49584;
    font-size: 12px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    min-width: 38px;
    font-weight: 500;
}

.timer {
    text-align: right;
}

.progress-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s;
}

.progress-track:hover {
    height: 7px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #caa885, #cc6666);
    border-radius: 10px;
    transition: width 0.1s linear;
}

/* ---- КНОПКИ УПРАВЛЕНИЯ ---- */
.player-controls-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.ctrl-btn {
    background: transparent;
    border: none;
    color: #a49584;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.ctrl-btn svg {
    fill: #a49584;
    width: 18px;
    height: 18px;
    transition: all 0.3s;
}

.ctrl-btn:hover {
    background: rgba(202, 168, 133, 0.1);
    transform: translateY(-2px);
}

.ctrl-btn:hover svg {
    fill: #caa885;
}

.ctrl-btn:active {
    transform: scale(0.93);
}

.play-btn-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #caa885 0%, #cc6666 100%);
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 8px 30px rgba(204, 102, 102, 0.4);
    margin: 0 4px;
}

.play-btn-main:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 12px 40px rgba(204, 102, 102, 0.5);
    background: linear-gradient(135deg, #cc6666 0%, #caa885 100%);
}

.play-btn-main:hover svg {
    fill: #fff;
}

.play-btn-main #icon-play,
.play-btn-main #icon-pause {
    font-size: 24px;
    line-height: 1;
}

/* ---- ПЛЕЙЛИСТ ---- */
.playlist-ctn {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 300px;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.playlist-ctn::-webkit-scrollbar {
    width: 4px;
}

.playlist-ctn::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.playlist-ctn::-webkit-scrollbar-thumb {
    background: #caa885;
    border-radius: 4px;
}

.playlist-track-ctn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.playlist-track-ctn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(202, 168, 133, 0.2);
    transform: translateX(4px);
}

.playlist-track-ctn.active-track {
    background: rgba(204, 102, 102, 0.15);
    border-color: #cc6666;
}

.playlist-track-ctn.active-track .playlist-info-track {
    color: #caa885;
}

.playlist-info-track {
    flex: 1;
    color: #e8d5c4;
    font-size: 14px;
    font-weight: 500;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    pointer-events: none;
}

.playlist-info-track span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #a49584;
    margin-top: 2px;
}

.playlist-duration {
    color: #a49584;
    font-size: 13px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    pointer-events: none;
    padding-left: 12px;
    flex-shrink: 0;
}

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

@media (max-width: 600px) {
    .nakerosine-player {
        padding: 16px;
        border-radius: 16px;
        margin: 15px 0 25px;
    }

    .player-display-area {
        padding: 10px 14px;
        gap: 12px;
    }

    .album-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 10px;
    }

    .track-name-main {
        font-size: 14px;
    }

    .track-artist-main {
        font-size: 12px;
    }

    .player-controls-area {
        gap: 4px;
        flex-wrap: wrap;
    }

    .ctrl-btn {
        width: 34px;
        height: 34px;
        padding: 4px 6px;
    }

    .ctrl-btn svg {
        width: 14px;
        height: 14px;
    }

    .play-btn-main {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .play-btn-main #icon-play,
    .play-btn-main #icon-pause {
        font-size: 20px;
    }

    .player-progress-area {
        gap: 8px;
    }

    .timer,
    .duration {
        font-size: 11px;
        min-width: 32px;
    }

    .progress-track {
        height: 4px;
    }

    .playlist-track-ctn {
        padding: 8px 10px;
    }

    .playlist-info-track {
        font-size: 13px;
    }

    .playlist-info-track span {
        font-size: 11px;
    }

    .playlist-duration {
        font-size: 12px;
    }

    .player-header-bar {
        margin-bottom: 12px;
    }

    .status-text {
        font-size: 11px;
    }
}

/* ============================================================
   СПИСОК ТРЕКОВ
   ============================================================ */

.track-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 6px;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e8e0d8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.track-item:hover {
    background: #f8f5f2;
    transform: translateX(1px);
    box-shadow: 0 2px 10px rgba(151, 117, 99, 0.12);
    border-color: #caa885;
}

.track-item.active {
    background: #f0ede8;
    border-left: 4px solid #cc6666;
    border-color: #cc6666;
}

.track-item.active .track-name {
    color: #cc6666;
}

.track-num {
    color: #977563;
    font-size: 13px;
    min-width: 30px;
    font-weight: 700;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.track-icon {
    color: #977563;
    font-size: 18px;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.track-name {
    flex: 1;
    font-weight: 500;
    font-size: 15px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    color: #2d2a24;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 2;
}

.track-dur {
    color: #977563;
    font-size: 13px;
    min-width: 44px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    text-align: right;
    flex-shrink: 0;
    order: 3;
}

.track-btns {
    display: flex;
    gap: 6px;
    align-items: center;
    
    flex-shrink: 0;
}

.btn-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: rgba(202, 168, 133, 0.2);
    color: #5a4a3a;
    order: 1; /* Play слева */
    flex-shrink: 0;
}

.btn-play:hover {
    background: linear-gradient(135deg, #caa885, #cc6666);
    color: #fff;
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(204, 102, 102, 0.3);
}

.btn-play.active {
    background: linear-gradient(135deg, #caa885, #cc6666);
    color: #fff;
}

.btn-download {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    background: rgba(76, 175, 80, 0.12);
    color: #4CAF50;
    order: 4; /* Download справа */
    flex-shrink: 0;
    position: relative;
    /* Центрируем иконку */
    line-height: 1;
    text-align: center;
}

.btn-download::before {
    content: "";
    font-size: 22px;
    font-weight: 700;
    color: #1a81f6;
    transition: all 0.3s ease;
    line-height: 1;
}

.btn-download:hover {
    background: #4CAF50;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-download:hover::before {
    color: #ffffff;
    transform: translateY(2px);
}

.play-btn,
.download-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: transparent;
}

.play-btn {
    background: rgba(202, 168, 133, 0.2);
    color: #5a4a3a;
}

.play-btn:hover {
    background: linear-gradient(135deg, #caa885, #cc6666);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(204, 102, 102, 0.3);
}

.play-btn.active {
    background: linear-gradient(135deg, #caa885, #cc6666);
    color: #fff;
}

.download-btn {
    background: rgba(76, 175, 80, 0.12);
    color: #4CAF50;
}

.download-btn:hover {
    background: #4CAF50;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Заголовки жанров */
#menu-block h3 {
    background: linear-gradient(90deg, transparent, rgba(202, 168, 133, 0.15) 50%, transparent);
    color: #5a4a3a;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 25px 0 15px 0;
    font-size: 1.2em;
    font-weight: 700;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    text-align: left;
    border-left: 4px solid #cc6666;
}

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

@media (max-width: 600px) {
    .track-item {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .btn-play,
    .btn-download {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .track-name {
        font-size: 14px;
        min-width: 80px;
        white-space: normal;
        word-break: break-word;
        order: 3;
        width: 100%;
        flex: none;
        padding: 4px 0 0 0;
    }
    
    .track-dur {
        font-size: 12px;
        min-width: 36px;
        order: 2;
    }
    
    .btn-play {
        order: 1;
    }
    
    .btn-download {
        order: 4;
    }
    
    .genre-title {
        font-size: 17px;
        margin: 20px 0 10px 0;
        padding: 10px 0 8px 0;
    }
}