

/* Start:/local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/style.min.css?173385745310544*/
.bx-top-nav-container{margin-top:15px;padding:0 10px;color:#fff;border-radius:2px;position:relative;font-family:var(--ui-font-family-primary,var(--ui-font-family-helvetica))}.bx-top-nav-container .bx-nav-list-1-lvl{margin:0;padding:0;list-style:none}.bx-top-nav-container .bx-nav-1-lvl{float:left;position:relative}.bx-top-nav-container .bx-nav-1-lvl>a{color:#fff;font-weight:var(--ui-font-weight-bold);display:block;text-decoration:none;text-transform:uppercase;border-radius:1px;padding-top:6px;padding-bottom:2px;border-bottom:0}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:10px 14px 14px;display:block}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.hover>a{z-index:250;box-shadow:0 6px 13px 0 rgba(0,0,0,.13)}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a span,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.hover>a span{background:#fff}.bx-top-nav-container .bx-nav-parent-arrow{display:none}.bx-top-nav-container .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-2-lvl-container{z-index:999;display:none;opacity:0;padding:9px 0 5px;box-shadow:0 6px 13px 0 rgba(0,0,0,.13);border-top:0;min-width:100%;color:#000}.bx-top-nav-container .bx-nav-2-lvl-container-advanced:before,.bx-top-nav-container .bx-nav-2-lvl-container:before{position:absolute;content:" ";display:block;height:5px;background:#fff;top:-5px;left:0;right:0}.bx-top-nav-container .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.hover .bx-nav-2-lvl-container{opacity:1;display:block;position:absolute;top:100%;z-index:999;background:#fff}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:56px;margin-left:-10px}.bx-top-nav-container>ul{box-sizing:border-box}.bx-top-nav-container .bx-nav-list-2-lvl{margin:0;padding:5px 0 12px}.bx-top-nav-container .bx-nav-2-lvl{display:block;min-width:180px;padding:0 10px;box-sizing:border-box}.bx-top-nav-container .bx-nav-2-lvl>a{padding:5px 15px 5px;color:#20394c;font-size:13px;line-height:16px;text-decoration:none;font-weight:var(--ui-font-weight-bold);border-bottom:0;display:block}.bx-top-nav-container .bx-nav-list-2-lvl .bx-nav-2-lvl:first-child a{border-top:0;margin-top:0}.bx-top-nav-container .bx-nav-3-lvl{padding:5px 0;margin:0}.bx-top-nav-container .bx-nav-3-lvl-container-advanced:before,.bx-top-nav-container .bx-nav-3-lvl-container:before{position:absolute;content:" ";display:block;height:5px;background:#fff;top:-5px;left:0;right:0}.bx-top-nav-container .bx-nav-list-3-lvl{margin:0;padding:0 0 14px 7px}.bx-top-nav-container .bx-nav-3-lvl{display:block;min-width:180px;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-top-nav-container .bx-nav-3-lvl a{padding:3px 15px;color:#555;font-size:13px;line-height:14px;text-decoration:none;border-bottom:0;display:block}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container{min-width:200px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:100%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-1-col .bx-nav-catinfo-back{width:100%;background:#fff}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container{min-width:400px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:50%;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-2-col .bx-nav-catinfo-back{width:50%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container{min-width:600px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;min-width:200px;width:33.33333%;float:left}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-3-col .bx-nav-catinfo-back{width:33.33333%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col{position:static}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced{top:100%;left:0;right:0}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container{min-width:100%}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced .bx-nav-list-2-lvl,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-2-lvl-container .bx-nav-list-2-lvl{display:block;width:25%;float:left}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col .bx-nav-catinfo-back{width:25%}.bx-top-nav-container .bx-nav-catinfo{padding:5px 15px 5px;z-index:120;position:relative}.bx-top-nav-container .bx-nav-catinfo img{box-sizing:border-box;border:1px solid #e7e9ea;width:auto;max-width:100%;height:auto;max-height:100%}.bx-top-nav-container .bx-nav-catinfo p{padding:20px 5px 0;font-size:13px}.bx-top-nav-container .bx-nav-catinfo-back{position:absolute;display:block;content:' ';top:-5px;right:0;bottom:0;background:#f7fafb;z-index:100;border-left:1px solid #ecefef}.bx-aside-nav-control{font-size:28px;position:fixed;width:40px;height:40px;top:5px;left:5px;line-height:40px;cursor:pointer;z-index:1750;color:#fff;text-align:center}body>.bx-aside-nav-control{-webkit-transition:left .15s linear;-moz-transition:left .15s linear;-ms-transition:left .15s linear;-o-transition:left .15s linear;transition:left .15s linear}.bx-aside-nav-control .fa{line-height:40px;vertical-align:middle}.bx-wrapper,.bx-aside-nav{-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-ms-transition:-ms-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear}.bx-logo{z-index:1700 !important}.bx-opened .bx-footer,.bx-opened .workarea{display:none !important}.bx-aside-nav{display:none;padding-top:50px;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);width:100%;background:#4c5c65;position:fixed;top:0;bottom:0;left:0;z-index:1600}.bx-aside-nav.bx-opened{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);overflow-y:scroll}.bx-aside-nav ul{list-style:none;margin:0;padding:0}.bx-aside-nav a{color:#fff;vertical-align:middle;line-height:48px;height:48px;font-size:16px;display:block;border-bottom:1px solid #3d4b53;padding-left:15px;max-width:100%;overflow:hidden;white-space:nowrap;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.bx-aside-nav a{text-decoration:none}.bx-nav-1-lvl.bx-opened,.bx-aside-nav .bx-nav-1-lvl:hover>a,.bx-aside-nav .bx-nav-1-lvl.bx-hover>a{background:#44535c}.bx-aside-nav .bx-nav-list-2-lvl{background:#44535c}.bx-aside-nav .bx-nav-2-lvl>a{padding-left:30px}.bx-aside-nav .bx-nav-3-lvl>a{padding-left:45px}.bx-aside-nav .bx-nav-4-lvl a{padding-left:60px}.bx-aside-nav .bx-nav-parent{position:relative}.bx-aside-nav .bx-nav-parent-arrow{position:absolute;right:0;top:0;margin-top:6px;width:46px;height:34px;text-align:center;border-left:1px solid #5a6971;z-index:200}.bx-aside-nav .bx-nav-parent-arrow i{line-height:34px;font-size:17px;font-style:normal;color:#fff}.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-parent-arrow i{-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-ms-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear}.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container-advanced,.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container,.bx-aside-nav .bx-nav-parent>ul{overflow:hidden;height:0}.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container-advanced,.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container,.bx-aside-nav .bx-nav-parent.bx-opened>ul{height:auto}.bx-aside-nav .bx-nav-catinfo,.bx-aside-nav .bx-nav-catinfo-back{display:none}@media(min-width:1200px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:15px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:12px 14px 15px}}@media(min-width:992px) and (max-width:1199px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:13px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:9px 11px 12px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:47px}}@media(min-width:768px) and (max-width:991px){.bx-top-nav-container .bx-nav-1-lvl>a{font-size:11px}.bx-top-nav-container .bx-nav-1-lvl>a span{padding:5px 6px 9px}.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container-advanced,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.bx-hover .bx-nav-2-lvl-container,.bx-top-nav-container .bx-nav-1-lvl.bx-nav-list-4-col.hover .bx-nav-2-lvl-container{top:37px}}@media(min-width:768px){.bx-aside-nav-control,.bx-aside-nav{display:none}.bx-top-nav-container{display:block}}@media(max-width:767px){.bx-aside-nav-control,.bx-aside-nav{display:block}.bx-top-nav-container{display:none}.bx-aside-nav .bx-nav-parent-arrow{display:block}.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent>a>span>.fa{display:none}}
/* End */


/* Start:/local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/themes/red/colors.min.css?1733857453817*/
.bx-red.bx-top-nav .bx-top-nav-container{background:#e22b2b}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-hover>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-active>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl:hover>a{background:#e95c5c;border-bottom:0}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent.bx-hover>a,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-1-lvl.bx-nav-parent:hover>a{color:#e22b2b;background-color:transparent}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-2-lvl>a.bx-active,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-2-lvl>a:hover{color:#e22b2b;background:#f0f0f0}.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-3-lvl a.bx-active,.bx-red.bx-top-nav .bx-top-nav-container .bx-nav-3-lvl a:hover{color:#e22b2b;background:#f0f0f0}
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/catalog_vertical/style.min.css?17319887105844*/
.bx_vertical_menu_advanced{border-left:7px solid #e3eaef;background:#f1f4f7;border-radius:4px;position:relative;box-shadow:0 0 1px 1px #dcdcdc}.bx_vertical_menu_advanced>ul{display:block;margin:0 0 10px 0;padding:0;width:100%;border-radius:5px;background:#fff;list-style:none}.bx_vertical_menu_advanced .bx_hma_one_lvl{display:block;padding:0}.bx_vertical_menu_advanced .bx_hma_one_lvl>a{position:relative;z-index:105;display:block;padding:10px 0 10px 12px;border-bottom:1px solid #e3eaef;color:#000;vertical-align:middle;text-align:left;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.8);font-size:14px;line-height:16px}.bx_vertical_menu_advanced .bx_hma_one_lvl:first-child,.bx_vertical_menu_advanced .bx_hma_one_lvl:first-child>a{border-radius:0 4px 0 0}.bx_vertical_menu_advanced .bx_hma_one_lvl:last-child,.bx_vertical_menu_advanced .bx_hma_one_lvl:last-child>a{border-radius:0 0 4px 0}.bx_vertical_menu_advanced ul:last-child .bx_hma_one_lvl:last-child>a{border-bottom:0}.bx_vertical_menu_advanced .bx_hma_one_lvl>a{-webkit-transition:border-color 0 ease;-moz-transition:border-color 0 ease;-o-transition:border-color 0 ease;-ms-transition:border-color 0 ease;transition:border-color 0 ease}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover{padding:1px 0 0;border:0}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover>a{margin-left:-11px;padding:10px 0 10px 12px;width:100%;border:0;border-right:2px;background:#fff;box-shadow:-1px 2px 3px 0 rgba(1,1,1,.22);font-weight:bold;line-height:16px;box-sizing:content-box}.bx_vertical_menu_advanced .bx_hma_one_lvl.dropdown.hover>a{z-index:1500}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container{position:absolute;top:-1px;left:100%;z-index:1300;display:none;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-top:1px solid rgba(1,1,1,.1);border-radius:2px;background:#fff;box-shadow:0 5px 10px 0 rgba(1,1,1,.29)}.bx_vertical_menu_advanced .bx_hma_one_lvl.hover .bx_children_container{display:block}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block{float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:-20000px;padding:10px 12px;padding-bottom:20000px;min-width:130px;max-width:280px;border-left:1px solid #f2f2f2;background:#fff}.bx_shadow_fix{display:none}.bx_vertical_menu_advanced .dropdown:hover .bx_shadow_fix,.bx_vertical_menu_advanced .dropdown.hover .bx_shadow_fix{position:absolute;top:-1px;right:-2px;bottom:0;z-index:1500;display:block;width:5px;background:#fff;opacity:1}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b1{min-width:180px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b2{min-width:360px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b3{min-width:540px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b4{min-width:720px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block:first-child{border-left:0}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b1 .bx_children_block{width:100%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b2 .bx_children_block{width:50%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b3 .bx_children_block{width:33.3%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container.b4 .bx_children_block{width:25%}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block.advanced{border-left:0;background:#f7fafb;box-shadow:inset 5px 0 7px -5px rgba(0,0,0,.12)}.bx_vertical_menu_advanced .bx_hma_one_lvl ul{display:block;margin:0;padding:0 0 14px 0;list-style:none}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel{display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a{display:block;padding:5px 10px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul{border-bottom:1px solid #f2f2f2}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent:last-child ul{border-bottom:0}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul li{line-height:24px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul a{display:block;padding:5px 10px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_advanced_panel{display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_block.advanced .bx_children_advanced_panel{display:block !important}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width:100%;max-height:220px;border:1px solid #e7e9ea}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel .bx_item_description{max-width:100%;max-height:220px;color:#000;text-align:left;white-space:normal;font-weight:normal;font-size:12px;line-height:18px}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block>ul>li{display:block;background:#fff}.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container .bx_children_block>ul>li>a{display:block;color:#20394c;text-decoration:none;font-weight:bold;font-size:15px;line-height:23px}.bx_vertical_menu_advanced .bx_hma_one_lvl ul li ul li a{color:#000;text-decoration:none;font-size:13px;line-height:16px}@media(max-width:569px){.bx_vertical_menu_advanced{display:none}.header_inner_bottom_line{overflow:hidden;height:auto}}
/* End */


/* Start:/local/templates/webaspro-3/styles.css?175091599419781*/
.copi { 
	-ms-user-select: all; 
	-moz-user-select: all; 
	-webkit-user-select: all; 
	user-select: all; 
}


.vit-custom-table-container {
    overflow-x: auto; /* Добавлено для горизонтальной прокрутки */
    -webkit-overflow-scrolling: touch; /* Для плавного скроллинга на iOS */
}

.vit-custom-table {
    width: 100%; /* Ширина таблицы 100% от родительского контейнера */
    border-collapse: collapse; /* Объединение границ ячеек */
    border-spacing: 0; /* Убираем промежутки между ячейками */
    background-color: #fff; /* Фоновый цвет таблицы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для таблицы */
    border: 0.5px solid #ddd; /* Тонкая граница таблицы */
}

.vit-custom-table th, .vit-custom-table td {
    padding: 16px; /* Увеличиваем внутренние отступы ячеек для высоты */
    text-align: center; /* Выравнивание текста по центру ячеек */
    border: 1px solid #ddd; /* Тонкая граница ячеек */
}

.vit-custom-table th {
    background-color: #4CAF50; /* Фоновый цвет заголовков таблицы */
    color: white; /* Цвет текста заголовков */
}

.vit-custom-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Фоновый цвет для четных строк */
}

.vit-custom-table tr:hover {
    background-color: #ddd; /* Фоновый цвет строки при наведении */
}

.vit-custom-table .handwriting {
    font-family: 'Brush Script MT', cursive; /* Шрифт для элементов с классом handwriting */
    font-size: 20px; /* Размер шрифта */
}

/* Адаптивный стиль для экранов меньше 500px */
@media (max-width: 500px) {
    .vit-custom-table th, .vit-custom-table td {
        font-size: 14px; /* Уменьшение размера шрифта на маленьких экранах */
        padding: 10px; /* Уменьшение отступов для ячеек на маленьких экранах */
    }
}
.responsive-image {
width: 100%; /* Изображение занимает 100% ширины родительского контейнера */
height: auto; /* Высота автоматически подстраивается под ширину */
}


body {
    margin: 0; /* Убираем отступы */
    font-family: Arial, sans-serif; /* Основной шрифт */
	-ms-user-select: none; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	user-select: none; 
}

.container {
    width: 100%; /* Ширина контейнера */
    max-width: 1400px; /* Максимальная ширина */
    margin: 0 auto; /* Центрируем контейнер */
    padding: 0 15px; /* Добавляем внутренние отступы */
}

header {
    position: relative;
    background: linear-gradient(to bottom, rgba(120, 120, 120, 0.8), rgba(51, 51, 51, 0.8));
    color: #fff;
    padding: 20px 0; /* Отступы для регулировки высоты */
    height: 150px; /* Фиксированная высота хедера */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #444;
}

header nav {
    margin-top: 10px; /* Отступ сверху для меню */
}

header nav a {
    color: #fff; /* Белый цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    margin-right: 10px; /* Расстояние между ссылками */
}

main {
    display: flex; /* Используем flexbox для колонок */
    flex-wrap: wrap; /* Позволяем колонкам переноситься */
    margin: 20px 0; /* Отступ сверху и снизу */
}

main .left, main .right {
    width: 19%; /* Левая и правая колонка занимают 25% ширины */
    padding: 10px; /* Внутренние отступы */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

main .center {
    width: 62%; /* Центральная колонка занимает 50% */
    padding: 10px;
    box-sizing: border-box;
}

footer {
    background: #333; /* Темный фон футера */
    color: #fff; /* Белый текст */
    text-align: center; /* Центрируем текст */
    padding: 20px 0; /* Отступы сверху и снизу */
}

/* Адаптивность */
@media (max-width: 768px) { /* Для экранов шириной 768px и меньше */
    main .left, main .right {
        width: 100%; /* Левая и правая колонка занимают 100% */
    }

    main .center {
        width: 100%; /* Центральная колонка занимает 100% */
    }
}

/* Основной стиль кнопки Telegram */
.telegram-button {
    background: #0088cc; /* Синий фон кнопки */
    border: 3px solid #007bb8; /* Синяя рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(0, 136, 204, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 18%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для кнопки Telegram */
}

.telegram-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.telegram-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.telegram-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #00bfff; /* Цвет текста (светло-синий) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 13px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.telegram-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.telegram-button:hover .telegram-icon {
    display: none; /* Иконка исчезает */
    color: #0088cc; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.telegram-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении Telegram */
@-webkit-keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .telegram-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 120px; /* Отступ кнопки справа от экрана */
    }
}

/* Основной стиль кнопки WhatsApp */
.whatsapp-button {
    background: #25D366; /* Зеленый фон кнопки */
    border: 3px solid #1cc15a; /* Зелёная рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 5%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для кнопки WhatsApp */
}

.whatsapp-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.whatsapp-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.whatsapp-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #23a455; /* Цвет текста (тёмно-зелёный) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 10px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.whatsapp-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.whatsapp-button:hover .whatsapp-icon {
    display: none; /* Иконка исчезает */
    color: #25D366; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.whatsapp-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении WhatsApp */
@-webkit-keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .whatsapp-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 30px; /* Отступ кнопки справа от экрана */
    }
}

/* End */
/* /local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/style.min.css?173385745310544 */
/* /local/templates/webaspro-3/components/bitrix/menu/catalog_horizontal1/themes/red/colors.min.css?1733857453817 */
/* /bitrix/components/bitrix/menu/templates/catalog_vertical/style.min.css?17319887105844 */
/* /local/templates/webaspro-3/styles.css?175091599419781 */
