/* 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:/bitrix/components/bitrix/menu/templates/catalog_vertical/themes/red/colors.min.css?1731988710578*/
.bx_vertical_menu_advanced.bx_red{border-left:7px solid #f0bdb5;background:#fbf1f0}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl>a{border-bottom:1px solid #f9e6e3}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a{color:#742b21}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent>a:hover{color:#742121}.bx_vertical_menu_advanced.bx_red .bx_hma_one_lvl .bx_children_container .bx_children_block li.parent ul a:hover{background:#f7f3e0;box-shadow:inset 0 1px 1px 0 #ebe9e3}
/* End */


/* Start:/local/templates/webaspro-3/styles.css?175685242355333*/
	/* ==================================================================== */
/* === НАЧАЛО: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================ */
/* ==================================================================== */

/*
   .video-player-by-kojro
   --------------------------------------------------------------------
   Главный контейнер, который оборачивает все элементы плеера.
*/
.video-player-by-kojro {
    position: relative;                                /* Устанавливает контекст позиционирования для дочерних элементов (оверлея, заголовка, кнопки). */
    width: 100%;                                       /* Занимает всю доступную ширину родительского элемента. */
    max-width: 800px;                                  /* Ограничивает максимальную ширину, чтобы плеер не был слишком большим на широких экранах. */
    margin: 40px auto;                                 /* Устанавливает отступы 40px сверху/снизу и автоматически центрирует плеер по горизонтали. */
    overflow: hidden;                                  /* Скрывает любые дочерние элементы, выходящие за его границы (важно для скругленных углов). */
    border-radius: 10px;                               /* Закругляет углы контейнера плеера на 10 пикселей. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);        /* Добавляет мягкую тень для придания объема (смещение по Y 10px, размытие 30px, цвет черный с 10% прозрачностью). */
}

/*
   .video-player-by-kojro video
   --------------------------------------------------------------------
   Стили для самого HTML-тега <video>.
*/
.video-player-by-kojro video {
    width: 100%;                                       /* Растягивает видео на всю ширину контейнера плеера, обеспечивая адаптивность. */
    display: block;                                    /* Убирает небольшой отступ снизу, который браузеры по умолчанию добавляют к inline-элементам. */
}

/*
   .video-player-by-kojro .video-overlay
   --------------------------------------------------------------------
   Полупрозрачный слой поверх видео, на котором находятся кнопка Play и заголовок.
*/
.video-player-by-kojro .video-overlay {
    position: absolute;                                /* Позиционирует оверлей абсолютно относительно родителя (.video-player-by-kojro). */
    top: 0;                                            /* Прижимает оверлей к верхнему краю родителя. */
    left: 0;                                           /* Прижимает оверлей к левому краю родителя. */
    width: 100%;                                       /* Растягивает оверлей на всю ширину родителя. */
    height: 100%;                                      /* Растягивает оверлей на всю высоту родителя. */
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%); /* Создает градиент для лучшей читаемости заголовка: от прозрачного сверху до темного снизу. */
    display: flex;                                     /* Включает Flexbox для удобного выравнивания дочерних элементов. */
    justify-content: center;                           /* Центрирует дочерние элементы (кнопку Play) по горизонтали. */
    align-items: center;                               /* Центрирует дочерние элементы (кнопку Play) по вертикали. */
    padding: 20px;                                     /* Добавляет внутренние отступы, чтобы контент не прилипал к краям. */
    box-sizing: border-box;                            /* Гарантирует, что padding не увеличивает общую ширину и высоту элемента. */
    pointer-events: none;                              /* Делает оверлей "прозрачным" для кликов мыши, чтобы можно было нажать на видео под ним. */
    opacity: 1;                                        /* Изначально оверлей полностью видим (непрозрачен). */
    transition: opacity 0.4s ease;                     /* Добавляет плавный переход для свойства opacity в течение 0.4 секунды. */
}

/*
   .video-player-by-kojro .video-title
   --------------------------------------------------------------------
   Стили для заголовка видео.
*/
.video-player-by-kojro .video-title {
    position: absolute;                                /* Позиционирует заголовок абсолютно относительно родителя. */
    bottom: 40px;                                      /* Размещает заголовок на 40px выше нижнего края плеера. */
    left: 50%;                                         /* Сдвигает левый край заголовка к центру родителя. */
    background: rgba(255, 255, 255, 0.15);             /* Полупрозрачный белый фон (15% непрозрачности) для эффекта "стекла". */
    color: #ffffff;                                    /* Устанавливает цвет текста на белый. */
    padding: 12px 20px;                                /* Внутренние отступы: 12px сверху/снизу, 20px слева/справа. */
    border-radius: 8px;                                /* Закругляет углы фона заголовка. */
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);            /* Добавляет тень к тексту для улучшения читаемости на светлом фоне. */
    -webkit-backdrop-filter: blur(10px);               /* Применяет эффект размытия фона за заголовком (для Safari). */
    backdrop-filter: blur(10px);                       /* Стандартное свойство для эффекта размытия фона ("матовое стекло"). */
    border: 1px solid rgba(255, 255, 255, 0.2);        /* Добавляет тонкую светлую рамку для подчеркивания эффекта стекла. */
    transform: translateX(-50%) scale(1);              /* Сдвигает заголовок влево на 50% его СОБСТВЕННОЙ ширины для идеального центрирования и задает начальный масштаб. */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех изменяемых свойств. */
    text-align: center;                                /* Выравнивает текст внутри заголовка по центру. */
    max-width: 99%;                                    /* Ограничивает ширину, чтобы заголовок не касался краев плеера и мог переноситься на новую строку. */
}

/*
   .video-player-by-kojro .play-button
   --------------------------------------------------------------------
   Стили для круглой кнопки "Play".
*/
.video-player-by-kojro .play-button {
    width: 70px;                                       /* Устанавливает ширину кнопки. */
    height: 70px;                                      /* Устанавливает высоту кнопки. */
    background: rgba(220, 38, 38, 0.8);                /* Красный полупрозрачный фон (80% непрозрачности). */
    border-radius: 50%;                                /* Делает элемент идеально круглым. */
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);      /* Добавляет тень под кнопкой для объема. */
    transform: scale(1);                               /* Устанавливает исходный масштаб кнопки (100%). */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех свойств. */
    display: flex;                                     /* Включает Flexbox для центрирования иконки-треугольника. */
    justify-content: center;                           /* Центрирует треугольник по горизонтали. */
    align-items: center;                               /* Центрирует треугольник по вертикали. */
}

/*
   .video-player-by-kojro .play-button::after
   --------------------------------------------------------------------
   Псевдоэлемент, который создает иконку-треугольник внутри кнопки "Play".
*/
.video-player-by-kojro .play-button::after {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    display: block;                                    /* Делает псевдоэлемент блочным, чтобы можно было задать размеры. */
    width: 0;                                          /* Ширина самого элемента равна нулю. */
    height: 0;                                         /* Высота самого элемента равна нулю. */
    border-style: solid;                               /* Устанавливает сплошной стиль для границ. */
    border-width: 12px 0 12px 20px;                    /* Создает треугольник: 12px верхняя и нижняя границы, 0 правая, 20px левая. */
    border-color: transparent transparent transparent #ffffff; /* Делает все границы прозрачными, кроме левой (белой), формируя видимый треугольник. */
    margin-left: 5px;                                  /* Небольшой сдвиг вправо для визуального центрирования треугольника в круге. */
}

/*
   :hover состояния для плеера
   --------------------------------------------------------------------
   Стили, которые применяются при наведении курсора на плеер.
*/
.video-player-by-kojro:hover .play-button {
    transform: scale(1.15);                            /* Увеличивает кнопку "Play" на 15% при наведении. */
    background: rgba(239, 68, 68, 0.95);               /* Делает фон кнопки ярче и менее прозрачным. */
}

.video-player-by-kojro:hover .video-title {
    transform: translateX(-50%) scale(1.05) translateY(-10px); /* Увеличивает заголовок на 5% и приподнимает его на 10px. */
    background: rgba(255, 255, 255, 0.25);             /* Делает фон заголовка немного светлее. */
}

/*
   .is-playing состояние
   --------------------------------------------------------------------
   Стиль для оверлея, когда видео воспроизводится (класс добавляется через JS).
*/
.video-player-by-kojro.is-playing .video-overlay {
    opacity: 0;                                        /* Делает оверлей полностью прозрачным (невидимым), когда видео проигрывается. */
}

/* ==================================================================== */
/* === КОНЕЦ: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" (СИНИЙ ДИЗАЙН) ============== */
/* ==================================================================== */
.subscribe-button-kojro {
    position: absolute;                                /* Позиционирует кнопку абсолютно относительно родителя (.video-player-by-kojro). */
    top: 20px;                                         /* Отступ 20px от верхнего края плеера. */
    right: 20px;                                       /* Отступ 20px от правого края плеера. */
    z-index: 10;                                       /* Устанавливает слой выше других элементов. */
    display: flex;                                     /* Включает Flexbox для выравнивания иконки и текста в одну строку. */
    align-items: center;                               /* Выравнивает иконку и текст по вертикали. */
    
    /* 🔥 ИСПРАВЛЕНО: Фон заменен на синий градиент в стиле Telegram для эффекта цветного стекла. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.25), rgba(0, 136, 204, 0.15));
    -webkit-backdrop-filter: blur(12px);               /* Применяет эффект размытия фона за кнопкой (для Safari). */
    backdrop-filter: blur(12px);                       /* Стандартное свойство для эффекта "матового стекла". */
    
    color: #ffffff;                                    /* Устанавливает белый цвет текста. */
    font-size: 14px;                                   /* Устанавливает размер шрифта. */
    font-weight: 500;                                  /* Устанавливает среднюю жирность шрифта. */
    text-decoration: none;                             /* Убирает подчеркивание у ссылки. */
    padding: 8px 16px;                                 /* Внутренние отступы: 8px сверху/снизу, 16px слева/справа. */
    border-radius: 5px;                                /* Скругляет углы кнопки. */
    
    /* 🔥 ИСПРАВЛЕНО: Рамка и тень также используют синий оттенок для целостности стиля. */
    border: 1px solid rgba(0, 136, 204, 0.4);          /* Добавляет тонкую синюю рамку. */
    box-shadow: 0 8px 32px 0 rgba(0, 136, 204, 0.2);   /* Добавляет мягкую синюю тень для объема. */
    
    transition: all 0.3s ease;                         /* Добавляет плавную анимацию для всех изменяемых свойств. */
    pointer-events: auto;                              /* Явно указывает, что на кнопку можно нажимать. */
}

/*
   Стили для иконки Telegram внутри кнопки
*/
.subscribe-button-kojro .video-telegram-icon {
    width: 20px;                                       /* Устанавливает ширину иконки. */
    height: 20px;                                      /* Устанавливает высоту иконки. */
    margin-right: 8px;                                 /* Добавляет отступ справа от иконки, чтобы отделить ее от текста. */
    transition: transform 0.3s ease;                   /* Добавляет плавную анимацию для свойства transform. */
}

/*
   :hover состояние для кнопки "Подписаться"
*/
.subscribe-button-kojro:hover {
    /* 🔥 ИСПРАВЛЕНО: Фон становится чуть "плотнее" и ярче, сохраняя синий оттенок. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.35), rgba(0, 136, 204, 0.25));
    /* 🔥 ИСПРАВЛЕНО: Рамка становится ярче (белая для контраста). */
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);                       /* Слегка приподнимает кнопку на 3px вверх. */
}
/* ==================================================================== */
/* === КОНЕЦ: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" =============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АНИМАЦИЯ ДЛЯ КНОПКИ (СИНЯЯ ВЕРСИЯ) ====================== */
/* ==================================================================== */
/*
   Псевдоэлемент для создания анимированной "волны"
*/
.subscribe-button-kojro::before {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    position: absolute;                                /* Позиционирует псевдоэлемент абсолютно относительно кнопки. */
    z-index: -1;                                       /* Размещает псевдоэлемент ПОД основным контентом кнопки. */
    top: -1px;                                         /* Сдвигает вверх на 1px, чтобы компенсировать рамку. */
    left: -1px;                                        /* Сдвигает влево на 1px, чтобы компенсировать рамку. */
    width: calc(100% + 2px);                           /* Делает ширину на 2px больше, чтобы анимация выходила за рамку. */
    height: calc(100% + 2px);                          /* Делает высоту на 2px больше. */
    border-radius: 5px;                                /* Скругляет углы волны так же, как у кнопки. */
    /* 🔥 ИСПРАВЛЕНО: Применяется новая анимация с синей волной. */
    animation: pulse-wave-blue 3s infinite ease-out;
}

/*
   🔥 ИСПРАВЛЕНО: Описание самой анимации 'pulse-wave-blue'
*/
@keyframes pulse-wave-blue {
    0% {                                               /* Начало анимации. */
        transform: scale(0.95);                        /* Элемент немного сжат. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);     /* Тень-обводка синяя и видима. */
    }
    70% {                                              /* 70% времени анимации. */
        transform: scale(1.05);                        /* Элемент немного расширен. */
        box-shadow: 0 0 0 15px rgba(0, 136, 204, 0);    /* Тень-обводка расширилась и стала полностью прозрачной. */
    }
    100% {                                             /* Конец анимации. */
        transform: scale(0.95);                        /* Элемент возвращается в сжатое состояние. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0);       /* Тень остается невидимой, готовясь к новому циклу. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АНИМАЦИЯ ДЛЯ КНОПКИ ====================================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ===================== */
/* ==================================================================== */
/*
   Медиа-запрос: эти стили применяются только на экранах с шириной 640px или меньше.
*/
@media (max-width: 640px) {
    /*
       Уменьшаем кнопку "Play" для маленьких экранов.
    */
    .video-player-by-kojro .play-button {
        width: 60px;                                   /* Уменьшаем ширину кнопки. */
        height: 60px;                                  /* Уменьшаем высоту кнопки. */
    }
    /*
       Адаптируем заголовок для маленьких экранов.
    */
    .video-player-by-kojro .video-title {
        font-size: 1rem;                               /* Уменьшаем размер шрифта (1rem обычно равен 16px). */
        padding: 8px 15px;                             /* Уменьшаем внутренние отступы. */
        bottom: 20px;                                  /* Поднимаем заголовок чуть выше. */
        white-space: normal;                           /* Разрешает тексту переноситься на новую строку. */
        line-height: 1.4;                              /* Увеличивает межстрочный интервал для лучшей читаемости. */
        text-align: center;                            /* Центрирует текст. */
        width: 90%;                                    /* Ограничивает ширину до 90% от ширины плеера. */
        max-width: none;                               /* Сбрасывает max-width, чтобы свойство width работало корректно. */
    }
    /*
       Адаптируем кнопку "Подписаться" для маленьких экранов.
    */
    .subscribe-button-kojro {
        top: 10px;                                     /* Уменьшаем отступ сверху. */
        right: 10px;                                   /* Уменьшаем отступ справа. */
        padding: 6px 12px;                             /* Уменьшаем внутренние отступы. */
        font-size: 12px;                               /* Уменьшаем размер шрифта. */
    }

    .subscribe-button-kojro .video-telegram-icon {
        width: 16px;                                   /* Уменьшаем размер иконки. */
        height: 16px;                                  /* Уменьшаем размер иконки. */
        margin-right: 6px;                             /* Уменьшаем отступ от текста. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ======================= */
/* ==================================================================== */
/* ================================================
   1. Сброс отступов и установка box-sizing
   ================================================ */
.kojro-b-articles-recommended,
.kojro-b-articles-recommended * {
  box-sizing: border-box;  /* ширина/высота включают padding и border */
  margin: 0;               /* убираем внешние отступы */
  padding: 0;              /* убираем внутренние отступы */
}

/* ================================================
   2. Заголовок блока <h2> внутри грида
   ================================================ */
.kojro-b-articles-recommended > h2 {
  grid-column: 1 / -1;     /* растянуть от первой до последней колонки */
  font-size: 18px;         /* размер шрифта заголовка */
  font-weight: 700;        /* жирное начертание */
  color: #333;             /* цвет текста */
  margin-bottom: 15px;     /* отступ снизу перед карточками */
}

/* ================================================
   3. Основной контейнер карточек — адаптивный Grid
   ================================================ */
.kojro-b-articles-recommended {
  display: grid;                                            /* включаем grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* создаём адаптивные колонки */
  gap: 20px;                                                /* расстояние между строками и колонками */
  width: 100%;                                              /* ширина контейнера 100% */
  max-width: 1200px;                                        /* ограничиваем максимальную ширину */
  margin: 0 auto;                                           /* центрируем контейнер по горизонтали */
  padding: 20px 10px;                                       /* внутренние отступы по краям */
  font-family: Arial, sans-serif;                           /* задаём шрифты для текста */
}

/* ================================================
   4. Карточка — ссылка и её базовый стиль
   ================================================ */
.kojro-b-articles-recommended__item-link {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* картинка сверху, тело карточки снизу */
  background: #fff;                                         /* белый фон карточки */
  border-radius: 8px;                                       /* скруглённые углы */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);                   /* лёгкая тень под карточкой */
  overflow: hidden;                                         /* обрезаем выступающие части внутренних элементов */
  text-decoration: none;                                    /* убираем подчёркивание у ссылки */
  color: inherit;                                           /* наследуем цвет текста из родителя */
  height: 100%;                                             /* растягиваемся на всю высоту grid-ячейки */
  position: relative;                                       /* для абсолютного псевдоэлемента эффекта волны */
  transition: transform .3s ease,                           /* плавное изменение трансформации */
              box-shadow .3s ease;                         /* плавное изменение тени */
}
/* Hover-эффект «парения» */
.kojro-b-articles-recommended__item-link:hover {
  transform: translateY(-5px);                              /* поднимаем карточку вверх */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);                  /* усиливаем тень при hover */
}

/* ================================================
   5. Эффект «волны» при наведении
   ================================================ */
.kojro-b-articles-recommended__item-link {
  position: relative;                                       /* дублируем для уверенности */
  overflow: hidden;                                         /* обрезаем за границами */
}
.kojro-b-articles-recommended__item-link::after {
  content: '';                                              /* создаём пустой псевдоэлемент */
  position: absolute;                                       /* позиционируем поверх карточки */
  inset: 0;                                                 /* растягиваем на всю область */
  pointer-events: none;                                     /* не мешаем кликам */
  opacity: 0;                                               /* по умолчанию невидим */
  transition: opacity 0.3s;                                 /* плавное появление/исчезновение */
  background: radial-gradient(                              /* градиент для волны */
    circle at 50% 50%,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.5) 70%,
    rgba(255,255,255,0) 100%
  );
}
.kojro-b-articles-recommended__item-link:hover::after {
  opacity: 1;                                               /* волна становится видимой */
  animation: kojro-wave 0.6s ease-out forwards;             /* проигрываем анимацию волны */
}
@keyframes kojro-wave {
  0%   { transform: scale(0.7); opacity: 0.5; }             /* стартовый размер и прозрачность */
  60%  { transform: scale(1.2); opacity: 0.8; }             /* разворот и максимум видимости */
  100% { transform: scale(1.6); opacity: 0.1; }             /* размытая финальная фаза */
}

/* ================================================
   6. Обёртка для картинки — поддерживаем соотношение 16:9
   ================================================ */
.kojro-b-articles-recommended__item-img-wrapper {
  width: 100%;                                              /* ширина на 100% контейнера */
  height: 0;                                                /* обнуляем высоту для расчёта через padding */
  padding-top: 56.25%;                                      /* соотношение 16:9: (9/16)*100% */
  position: relative;                                       /* для абсолютного позиционирования img */
  overflow: hidden;                                         /* обрезаем выступающие части картинки */
}
.kojro-b-articles-recommended__item-img {
  position: absolute;                                       /* позиционируем внутри обёртки */
  top: 0;                                                   /* привязываем к верхнему краю */
  left: 0;                                                  /* привязываем к левому краю */
  width: 100%;                                              /* растягиваем по ширине */
  height: 100%;                                             /* растягиваем по высоте */
  object-fit: cover;                                        /* обрезаем/масштабируем картинку по пропорциям */
  transition: transform .3s ease;                           /* плавное увеличение при hover */
}
/* Лёгкое увеличение картинки при hover */
.kojro-b-articles-recommended__item-link:hover
  .kojro-b-articles-recommended__item-img {
  transform: scale(1.03);                                   /* чуть увеличиваем картинку */
}

/* ================================================
   7. Блок с текстом внутри карточки — flex для равной высоты
   ================================================ */
.kojro-b-articles-recommended__item-body {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* располагаем элементы по вертикали */
  flex: 1;                                                  /* растягиваем тело, чтобы заполнить пространство */
  padding: 15px;                                            /* внутренние отступы вокруг текста */
}
.kojro-b-articles-recommended__item-body header {
  margin-bottom: 8px;                                       /* отступ между заголовком и остальным текстом */
}
.kojro-b-articles-recommended__item-title {
  font-size: 16px;                                          /* размер шрифта заголовка статьи */
  font-weight: 700;                                         /* жирное начертание */
  color: #333;                                              /* цвет текста */
  line-height: 1.3;                                         /* межстрочный интервал */
}
.kojro-b-articles-recommended__item-text {
  font-size: 14px;                                          /* размер шрифта основного текста */
  color: #666;                                              /* цвет текста */
  line-height: 1.5;                                         /* межстрочный интервал */
  margin-top: auto;                                         /* прижимает текст к низу карточки */
}

/* ================================================
   8. Медиа-запрос для очень узких экранов (<480px)
   ================================================ */
@media (max-width: 480px) {
  .kojro-b-articles-recommended {
    padding: 10px;                                          /* уменьшаем внутренние отступы */
    gap: 15px;                                              /* уменьшаем расстояние между элементами */
  }
  .kojro-b-articles-recommended__item-title {
    font-size: 15px;                                        /* уменьшаем размер заголовка */
  }
  .kojro-b-articles-recommended__item-text {
    font-size: 13px;                                        /* уменьшаем размер основного текста */
  }
}

.copi { 
	-ms-user-select: all; 
	-moz-user-select: all; 
	-webkit-user-select: all; 
	user-select: all; 
}

/* Начало кода таблицы */
    /* Стили таблицы */
    .kojro-table-container {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
      padding: 0 10px;
    }
    
    .kojro-custom-table {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      border: 1px solid #ddd;
      table-layout: auto;
      margin: 0 auto;
    }
    
    .kojro-custom-table th,
    .kojro-custom-table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
      vertical-align: middle;
      word-break: break-word;
    }
    
    /* Фиксируем ширину столбца с цифрами */
    .kojro-custom-table th:first-child,
    .kojro-custom-table td:first-child {
      white-space: nowrap;
      width: 30px;
    }
    
    .kojro-custom-table th {
      background-color: #4CAF50;
      color: #fff;
      font-weight: bold;
    }
    
    .kojro-custom-table tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    .kojro-custom-table tr:hover {
      background-color: #e9e9e9;
      transition: background-color 0.2s ease;
    }
    
    /* Рукописный стиль */
    .kojro-custom-table .handwriting {
      font-family: 
        'Segoe Script', 'Brush Script MT',
        'Apple Chancery', cursive;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.3;
      color: #333;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 600px) {
      .kojro-custom-table th,
      .kojro-custom-table td {
        padding: 8px 6px;
        font-size: 14px;
      }
      
      .kojro-custom-table .handwriting {
        font-size: 16px;
      }
      
      /* Уменьшаем ширину первых двух столбцов */
      .kojro-custom-table th:nth-child(1),
      .kojro-custom-table td:nth-child(1),
      .kojro-custom-table th:nth-child(2),
      .kojro-custom-table td:nth-child(2) {
        width: auto;
        min-width: 30px;
      }
    }

/* Конец код таблицы*/
.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 */


/* Start:/local/templates/webaspro-3/template_styles.css?17555126478468*/
        /* Kojro Pure CSS FAQ Styles - START */
        /*Обновленные стили FAQ на чистом CSS (желтый фон, черный текст, крупнее шрифт) */
        :root {
            --page-bg-color: #f0f2f5; /* Очень светлый серо-синий для фона страницы */
            --card-bg-color: #ffffff; /* Белый для отдельных элементов FAQ */
            --question-bg-yellow: #FFD700; /* Золотисто-желтый для фона вопроса */
            --question-bg-yellow-hover: #FFC000; /* Чуть темнее желтый для наведения */
            --question-text-black: #000000; /* Черный текст вопроса */
            --answer-bg-color: #f9f9f9; /* Слегка не совсем белый для фона ответа */
            --border-color: #e0e0e0; /* Светлая граница */
            --shadow-color: rgba(0, 0, 0, 0.08); /* Мягкая тень */
            --hover-shadow-color: rgba(0, 0, 0, 0.15); /* Чуть более сильная тень при наведении */
            --transition-speed: 0.3s; /* Скорость перехода для анимаций */
            --border-radius: 12px; /* Радиус скругления углов */
        }

        body {
            background-color: var(--page-bg-color);
            margin: 0;
            padding: 0;
        }

        .kojro-faq {
            max-width: 800px;
            margin: 40px auto;
            font-family: sans-serif; /* Использование общего системного шрифта */
            padding: 20px;
            background-color: var(--page-bg-color);
        }

        .kojro-faq-title {
            text-align: center;
            margin-bottom: 40px;
            /* Остальные стили для заголовка будут наследоваться с сайта */
        }

        .kojro-faq-item {
            margin-bottom: 20px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 20px var(--shadow-color);
            transition: all var(--transition-speed) ease;
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
        }

        .kojro-faq-item:hover {
            box-shadow: 0 8px 30px var(--hover-shadow-color);
            transform: translateY(-3px);
        }

        .kojro-faq-input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .kojro-faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--question-bg-yellow); /* Желтый фон */
            color: var(--question-text-black); /* Черный текст */
            padding: 20px 25px;
            cursor: pointer;
            font-weight: 700; /* Жирный шрифт для "популярного черного" */
            font-size: 1.6rem; /* Увеличенный размер шрифта для десктопа */
            transition: all var(--transition-speed) ease;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Тонкая темная внутренняя граница */
        }

        .kojro-faq-question:hover {
            background: var(--question-bg-yellow-hover); /* Чуть темнее желтый при наведении */
        }

        .kojro-faq-question::after {
            content: '';
            width: 10px;
            height: 10px;
            border-right: 2px solid var(--question-text-black); /* Черная иконка */
            border-bottom: 2px solid var(--question-text-black); /* Черная иконка */
            transform: rotate(45deg);
            transition: transform var(--transition-speed) ease;
            margin-left: 15px;
            flex-shrink: 0;
        }

        .kojro-faq-input:checked + .kojro-faq-question::after {
            transform: rotate(-135deg);
        }

        .kojro-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
            background-color: var(--answer-bg-color);
            border-top: 1px solid var(--border-color);
        }

        .kojro-faq-input:checked ~ .kojro-faq-answer {
            max-height: 500px;
            padding: 20px 25px;
        }

        .kojro-faq-answer-content {
            /* Стили для содержимого ответа будут наследоваться с сайта */
        }

        /* 📱 Медиазапросы для адаптивности */
        @media (max-width: 768px) {
            .kojro-faq {
                margin: 20px auto;
                padding: 15px;
            }
            .kojro-faq-title {
                margin-bottom: 30px;
            }
            .kojro-faq-question {
                font-size: 1.2rem; /* Увеличенный размер шрифта для планшетов */
                padding: 18px 20px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 18px 20px;
            }
        }

        @media (max-width: 480px) {
            .kojro-faq {
                padding: 10px;
            }
            .kojro-faq-title {
                margin-bottom: 25px;
            }
            .kojro-faq-question {
                font-size: 1.1rem; /* Увеличенный размер шрифта для мобильных */
                padding: 15px 15px;
            }
            .kojro-faq-question::after {
                width: 8px;
                height: 8px;
                margin-left: 10px;
            }
            .kojro-faq-input:checked ~ .kojro-faq-answer {
                padding: 15px 15px;
            }
        }
        /* Kojro Pure CSS FAQ Styles - END */



/* начало авторского кода таблица английский алфавит */
.kojro-table-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  /* на мобильных добавим небольшие отступы */
  padding: 0 10px;
}

.kojro-custom-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 0.5px solid #ddd;
}

/* Заголовки и ячейки */
.kojro-custom-table th,
.kojro-custom-table td {
  padding: 16px;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
  /* позволим тексту переноситься, чтобы не ломать верстку */
  word-wrap: break-word;
}

/* Фон заголовков */
.kojro-custom-table th {
  background-color: #4CAF50;
  color: #fff;
  font-weight: bold;
}

/* Чётные строки */
.kojro-custom-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Hover-эффект */
.kojro-custom-table tr:hover {
  background-color: #ddd;
  transition: background-color 0.2s ease;
}

/* Рукописный шрифт */
.kojro-custom-table .handwriting {
  font-family: 
    'Segoe Script', 
    'Brush Script MT', 
    'Apple Chancery',
    'Bradley Hand', 
    'Snell Roundhand', 
    'URW Chancery L',
    'Lucida Calligraphy', 
    'Lucida Handwriting', 
    'Comic Sans MS',
    'Marker Felt', 
    cursive !important;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #333;
  text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.1);
}

/* Адаптив для экранов до 600px */
@media (max-width: 600px) {
  .kojro-custom-table th,
  .kojro-custom-table td {
    padding: 8px;
    font-size: 14px;
  }
  .kojro-custom-table .handwriting {
    font-size: 16px;
  }
}
/* конец авторского кода таблица английский алфавит */
@media (max-width: 600px) {
  .kojro-footer-div {
    color: #f0f0f0;         /* чуть темнее белого */
    font-size: 16px;        /* оптимально для мобильных */
    line-height: 1.5;
    padding: 12px;
    text-align: center;
    /* Можно добавить ещё */
  }
}
/* 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 */
/* /bitrix/components/bitrix/menu/templates/catalog_vertical/themes/red/colors.min.css?1731988710578 */
/* /local/templates/webaspro-3/styles.css?175685242355333 */
/* /local/templates/webaspro-3/template_styles.css?17555126478468 */