/* Start:/bitrix/templates/first_layers/template_styles.css?177497261317972*/
/*
*{
padding: 0px;
border: 0px;
margin: 0px;
border: none;
}
*/


html {scroll-behavior: smooth;
letter-spacing: .02em;
}


body {
background-color: #f1f1f1;
font-family: Tahoma;
padding: 0px;
margin: 0;
}

table {
font-size: 15px;
color: #000000;
}

h1 {	position:absolute;
top:-30px;
margin: 0;
padding-top: 0;
font-size: 25px;
z-index: 0;
float: left;}

p.first {
font-size: 18px;
font-weight: normal;
margin-top: 0px;
padding-top: 10px;
}

h2 {
text-align: center;
padding: 10px 0 10px 0;
border: 0px;
margin: 0px;
border: none;
font-size: 30px;}

h3 {
text-align: center;
padding: 10px 0 10px 0;
border: 0px;
margin: 0px;
border: none;
font-size: 18px;}

a {
text-decoration: none;
color: #000000;
cursor: pointer;}

a:hover {
color: #d12a22;
}

img {
padding: 0px;
border: 0px;
margin: 0px;
border: none;
}


p {		
padding: 0px;
border: 0px;
margin: 10px 0 10px 0;
border: none;}

#varisco {border-color: #fff;}

div.menu {
position: relative;
display: block;
height: auto;
width: 25px;
float: left;
color: #d12a22;
top: 1px;
padding: 0px;
margin: 0px;
border: 0px;
}


/* Весь сайт */

#background {
position: absolute;
width: 100%;
height: 733px;
background: #f1f1f1 url(//promnasos.com/images/templates/vertical_long2.png) repeat-x;
}

#site {
position: absolute;
margin-left: -560px;
left: 50%;
width: 1120px;
}


/* Самая рабочая область */


#content {
position: relative;
left: 40px;
top: 10px;
width: 1040px;
height: auto;
color: #000000;
font-size: 15px;
padding: 0px;
border: none;}


/* Белое рабочее поле */


#work_zone {
width: 1120px;
height: 100%;
position: relative;
background-color: white;
padding: 0px;
margin: 0px;
}

#left_shadow_light_grey {
background: url(//promnasos.com/images/templates/left_shadow_light_grey.jpg) repeat-y;
position: absolute;
width: 10px;
height: 100%;
}		

#right_shadow_light_grey {
background: url(//promnasos.com/images/templates/right_shadow_light_grey.jpg) repeat-y;
width: 10px;
height: 100%;
position: absolute;
left: 1110px;
}		


/* Логотип */


#logo {
display: block;
background-image: url(//promnasos.com/images/templates/layers1120.jpg);
width: 1120px;
height: 106px;
position: relative;
background-position: 0px 0px;
}

a.logo {
display: block;
width: 346px;
height: 76px;
position: absolute;
left: 30px;
cursor: pointer;
top:13px;
border-bottom-width:10px;
border-bottom-color:white;

}

img.logo  {
display: block;
width: 346px;
height: 76px;
position: absolute;
cursor: pointer;
border-bottom-width:10px;
border-bottom-color:white;
}

a.logo2 {
display: block;
width: 250px;
height: 43px;
position: absolute;
left: 840px;
cursor: pointer;
border: none;
color: #d12a22;
text-decoration: none;
font-size: 23.5px;
background-color: #f1f1f1;
font-weight: bold;
top: 10px;
text-shadow: #b9b9b9 2px 2px 4px;
}

a.logo3 {
display: block;
width: 250px;
height: 30px;
position: absolute;
left: 842px;
cursor: pointer;
border: none;
color: #d12a22;
text-decoration: none;
font-size: 22px;
background-color: #f1f1f1;
font-weight: bold;
top: 44px;
text-shadow: #b9b9b9 2px 2px 4px;
}


/* Форма поиска */

#search_form {
position: absolute;
width: 238px;
height: 26px;
top: 46px;
left: 674px;
}


/* Слой с кнопками */


#buttons {
width: 1120px;
height: 53px;
background-color: white;}

#left_buttons_1 {
background-image: url(//promnasos.com/images/templates/left_side_under_head.jpg);
width: 10px;
height: 53px;
position: absolute;
}

#right_buttons_1 {
background-image: url(//promnasos.com/images/templates/right_side_under_head.jpg);
width: 10px;
height: 53px;
position: absolute;
left: 1110px;	
}


/* Кнопки */


a.button1 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -636px;
position: absolute;
left: 40px;	
}

a.button1:hover {
background-position: 0px -689px;	
}

a.button2 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -106px;
position: absolute;
left: 181px;	
}

a.button2:hover {
background-position: 0px -159px;	
}

a.button3 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -212px;
position: absolute;
left: 322px;	
}

a.button3:hover {
background-position: 0px -265px;	
}

a.button4 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -318px;
position: absolute;
left: 463px;
}

a.button4:hover {
background-position: 0px -371px;	
}

a.button5 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -424px;
position: absolute;
left: 604px;	
}

a.button5:hover {
background-position: 0px -477px;	
}

a.button6 {
display: block;
width: 140px;
height: 53px;
background-image: url(//promnasos.com/images/templates/buttons.jpg);
background-position: 0px -530px;
position: absolute;
left: 745px;	
}

a.button6:hover {
background-position: 0px -583px;	
}



/* Слайдшоу */


#slideshow_all {
height: 421px;
width: 1120px;
background-color: white;
position: relative;}

#left_shadow_grey {
background: url(//promnasos.com/images/templates/left_shadow_grey.jpg) repeat-y;
width: 10px;
height: 421px;
position: absolute;
}

#right_shadow_grey {
background: url(//promnasos.com/images/templates/right_shadow_grey.jpg) repeat-y;
width: 10px;
height: 421px;
position: absolute;
left: 1110px;
}

#slideshow-container {
width: 1040px;
height: 391px;
padding: 0px;
border: 0px;
margin: 0px auto;
cursor:pointer;
position: absolute;
top: 12px;
left: 40px;
}

#slideshow-containerIE {
width: 1040px;
height: 391px;
padding: 0px;
border: 0px;
margin: 0px auto;
cursor:pointer;
position: absolute;
top: 12px;
left: 40px;
}

img.slide {
width: 1040px;
height: 391px;
}

div#slideshow {
width: 1040px;
height: 391px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */ 
position: absolute;
z-index: 5;
}



/* Красная зона */


#red_white_1 {
position: relative;
background-image: url(//promnasos.com/images/templates/layers1120.jpg);
width: 1120px;
height: 28px;
background-position: 0px -106px;
}


#red {
position: relative;
width: 1120px;
height: 77px;
background-color: #db2d24;
}

#red_content {
left: 40px;
position: absolute;
width: 1040px;
height: auto;
margin: 0 0 10px 0;}

#left_shadow_red {
background: url(//promnasos.com/images/templates/left_shadow_red.jpg) repeat-y;
height: 77px;
width: 10px;
position: absolute;
}

#right_shadow_red {
background: url(//promnasos.com/images/templates/right_shadow_red.jpg) repeat-y;
height: 77px;
width: 10px;
position: absolute;
left: 1110px;
}

#red_white_2 {
position: relative;
background-image: url(//promnasos.com/images/templates/layers1120.jpg);
width: 1120px;
height: 28px;
background-position: 0px -134px;
}

/* Конец */


#end {
background-image: url(//promnasos.com/images/templates/layers1120.jpg);
width: 1120px;
height: 38px;
background-position: 0px -162px;
}

#copyright {
width: 1120px;
position: relative;
font-size: 12px;
text-align: center;
color: #686868;
top: -10px;
padding: 0px;
margin: 0px;}




/* Выезжающее меню */

div.invisible {
position: relative;
display: none;
padding: 0;
margin: 0;}

div.visible {
position: relative;}

div.invisible_image {
display: none;}

div.visible_image {}

div.invisible_table {
display: none;}

div.visible_table {}

div.visible, div.invisible, div.invisible_image, div.visible_image, div.invisible_table, div.visible_table, div.menu {
padding: 0px;
margin: 0px;
border: 0px;
}



span.mission {color: white; font-size: 17px; word-spacing: 2px; letter-spacing: 0.3px; line-height: 19px; text-shadow: #444444 1px 1px 2px;}

a.but {
display:block;
width:131px;
height:30px;
background-color: #db2d24;
color: #ffffff;
font-size: 18px;
box-shadow: 3px 3px 5px #aaaaaa;
float:left;
text-align:center;
padding-top: 8px;
text-decoration: none;
text-shadow: #222222 1px 1px 2px ;
border-radius: 7px;
transition: background-color 0.3s ease, color 0.3s ease;
}

a.but:hover {
background-color: #e2e2e2;
color: #000000;
text-shadow: #666666 2px 2px 6px ;
transition: background-color 0.3s ease, color 0.3s ease;

}

div.but-space {
display:block;
height:38px;
width:20px;
float:left;

}

div.buttons2 {
position: absolute;
left: 40px;
display:block;
height:38px
}


.mobile {
padding-top: 3rem;
}

/* вкнипка верх*/

#back-to-top {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 9999;
width: 50px;
height: 50px;
text-align: center;
line-height: 46px;
background: #d12a22;
color: white;
cursor: pointer;
border-radius: 50%;
text-decoration: none;
/* Оставляем анимацию только для фона */
transition: background 0.3s; 
font-size: 30px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
display: none; /* jQuery сам включит нужную прозрачность */
}

/* Эффект при наведении — теперь сработает четко */
#back-to-top:hover {
opacity: 1 !important; 
background: #333;
}

#back-to-top.show {
opacity: 0.8;
visibility: visible;
}

@media (max-width: 1120px){
#back-to-top {
bottom: 20px;
left: 20px; 
width: 40px;
height: 40px;
line-height: 38px;
font-size: 24px;
}
}


/* --- НИЖЕ: добавляем только эти правила — никаких правок старому коду --- */
.desktop { display: block; }
.mobile  { display: none; }

@media (max-width: 1120px){
.desktop { display: none !important; }
.mobile { 
display: block !important; 
padding-top: 50px !important;
}

/* === ЗОЛОТОЙ СТАНДАРТ ШРИФТОВ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ === */

/* 1. Базовый текст (описание, текст в карточках товаров) */
p, li, .card p, #content p, #content li {
font-size: 16px !important; 
line-height: 1.3 !important; 
}

/* 2. Иерархия заголовков */
h1 { font-size: 1.75rem !important; line-height: 1.2 !important; } 
h2, .catalog h2 { 
font-size: 1.5rem !important; /* ~24px */
line-height: 1.25 !important; 
font-weight: bold !important; 
padding-bottom: 5px !important; 
text-align: center;
margin-bottom: 1rem;
} 
h3 { font-size: 1.25rem !important; line-height: 1.3 !important; } 

/* 3. Футер и второстепенные элементы */
.site-footer {
font-size: 0.875rem !important; /* ~14px. Было 8px, что абсолютно нечитаемо */
line-height: 1.4 !important;
}


/* Сбрасываем жёсткие ширины */
#site,
#work_zone,
#slideshow_all,
#red,
#red_white_1,
#red_white_2,
#end,
#copyright {
max-width: 100%;
width: 100%;
margin: 0;
position: relative;
}


/* Слайдер */
.hero { padding: 0; }
#slideshow-all, #slideshow-container {
width: 100% !important;
max-width: none !important;
position: static !important;
margin: 0;
}


/* Убираем боковые тени */
#left_shadow_grey,
#right_shadow_grey,
#left_shadow_light_grey,
#right_shadow_light_grey,
#left_shadow_red,
#right_shadow_red {
display: none !important;
}




/* 2) Адаптивные картинки */
img {
display: block;
width: 100% !important;
height: auto !important;
}


.catalog {
/* две колонки по 200px + gap между ними (0.5rem) */
max-width: calc(200px * 2 + 2rem);
margin: 0 auto;        /* по центру экрана */
padding: 1rem 0;       /* чуть сверху/снизу */
background: #f1f1f1;
}


.catalog-grid {
display: grid;
grid-template-columns: repeat(2, 200px);
gap: 2rem;
grid-auto-rows: 1fr;
}

.card {
max-width: 200px;
width: 100%;
margin: 0 auto;
display: flex; flex-direction: column; height: 100%;}

.card:hover {
transform: translateY(-4px);
}

.image-box {
border-radius: 14px;
overflow: hidden;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background: #fff;
transition: box-shadow 0.3s;
padding: 15px 10px 5px 10px;
flex-grow: 1; display: flex; flex-direction: column;
}

.image-box-name {
border-radius: 14px;
overflow: hidden;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background: #fff;
transition: box-shadow 0.3s;
padding: 15px 10px 5px 10px;
}

.image-box img {
display: block;
width: 100%;
height: auto;
padding-top:20px;
border-radius: 0; /* не нужно — контейнер скруглён */
}

.card:hover .image-box {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card p {
margin-top: 0.5rem;
font-size: 1rem;
font-weight: 500;
text-align: center;
margin-top: auto;
}

.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #f1f1f1;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 0.5rem 0.7rem;
box-sizing: border-box !important;
height: 50px;
display: flex;
align-items: center;
border-bottom: 1px solid #aaa;
}


.top-row {
display: flex;
align-items: center;
width: 100%;
gap: 0.5rem; /* Единый зазор для всех страниц */
}


.hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0; 
width: 30px;
height: 44px;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: transform 0.3s ease-in-out;
font-size:1.5rem;
}


.hamburger.is-active {transform: rotate(90deg);}

.contact {
display: flex;
gap: 0.5rem;
white-space: nowrap;
margin-left: auto;
font-size: clamp(0.75rem, -0.15rem + 4.5vw, 1.2rem);
}

.contact a {
color: #000;
text-decoration: none;
}

/* === УМНОЕ МЕНЮ (ИДЕНТИЧНОЕ) === */
.main-nav {
position: absolute;
top: 50px;
left: -400px;
background: #f1f1f1;
z-index: 999;
transition: left 0.3s ease-in-out;
}

.main-nav.open {
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  left: 0px;
  transition: left 0.3s ease-in-out;
}

.main-nav ul {
display: flex;
flex-direction: column;
max-height: 0;
opacity: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}

.main-nav.open ul {
max-height: 1000px;
opacity: 1;
margin: 0;
padding: 0.5rem 0 0.5rem 0;
}

.main-nav ul li {
margin: 0;
justify-content: center;
padding: 0.5rem 1rem 0.5rem 1rem;
}

.main-nav ul li a {
font-size: 1.2rem;
text-decoration: none;
display: block;
color: #000;
}

/* Отключаем прыжок карточки и тень */
.card:hover { transform: none !important; }
.card:hover .image-box { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; }

/* Отключаем смену цвета ссылок и ячеек при тапе */
#content a:hover, 
#content table td a:hover {
text-shadow: none !important;
color: inherit !important;
}
table.catalog tr td:hover {
background-color: transparent !important;
}

}


@media (max-width: 480px){
.catalog-grid {
display: grid;
/* БЫЛО: grid-template-columns: repeat(2, 180px); */
/* СТАЛО: Две равные колонки, которые сами ужмутся */
grid-template-columns: 1fr 1fr; 
gap: 10px; /* Чуть уменьшим дырку между ними */
}

.catalog {
/* БЫЛО: max-width: calc(180px * 2 + 1rem); */
/* СТАЛО: */
max-width: 100%;
padding: 10px; /* Отступы от краев экрана */
box-sizing: border-box; /* Важно, чтобы padding не расширял блок */
}

/* Также поправьте картинки, чтобы они не вылезали */
.image-box {
padding: 5px !important; /* Чуть меньше отступов внутри */
}

}

/* Включаем 3 колонки, когда экран шире 699 px */
@media (min-width: 699px){
.catalog {
/* Контейнер теперь может вместить 3 карточки */
max-width: 699px; 
margin: 0 auto;
}

.catalog-grid {
display: grid;
/* Переключаемся на 3 колонки по 200,0 px */
grid-template-columns: repeat(3, 200px);
gap: 2,0rem;

/* ВОТ ЭТО РЕШАЕТ ПРОБЛЕМУ: Центрируем колонки внутри сетки */
justify-content: center; 
}
}

/* --- ПЛАВНЫЕ ПЕРЕХОДЫ ДЛЯ ВСЕХ ССЫЛОК В КОНТЕНТЕ (КАК В ОСНОВНОМ CSS) --- */
#content a {
transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* --- ДЕСКТОПНЫЕ ЭФФЕКТЫ (только ширина > 940px) --- */

/* 1. Ховер для ссылок в таблице с картинками */
#content table td a:hover {
color: #d12a22;
}

/* 2. Убираем возможное обрезание картинки */
#content table td a div {
overflow: visible;
}

/* 3. Картинка: плавное увеличение строго вниз */
#content table td a img {
transition: transform 0.3s ease;
transform-origin: top center;
display: block; /* убивает лишний отступ снизу */
}

/* 4. Само увеличение */
#content table td a:hover img {
transform: scale(1.05);
}

.center {
text-align: center;
}

/* Правило для картинок — оставляем как есть */
.center img,
.center video {
margin-inline: auto;
display: block;
}

/* Правило для таблиц — ИСПРАВЛЯЕМ ТУТ */
.center table {
margin-inline: auto;
display: table; /* Вернули таблице её истинную природу */
}


@media (max-width: 359px) {
    .catalog-grid {
        grid-template-columns: 1fr; /* одна колонка */
    }
    .catalog {
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
	.image-box {padding: 15px 10px 5px 10px;}
	.card {
        max-width: 300px;
	
}

/* НОВОСТИ */

div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}
}

.red {color: #d12a22;}

/* End */
/* /bitrix/templates/first_layers/template_styles.css?177497261317972 */