.header-1 * {transition:.3s;}
.header-1 {position:relative; z-index:10;}
.header-1 #logo {display:block;}
.header-1 #logo:hover {opacity:.75;}
.header-1 #logo img {}

.header-1 #header_items {margin:.5rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.header-1 #header_items .logo svg path {fill: var(--color-base);}
.header-1 #header_items .logo svg path.arrow {fill: var(--color-body);}

.header-1 #top_menu {}
.header-1 #top_menu ul {display:flex; padding: 0; flex-wrap:wrap; margin:0;}
.header-1 #top_menu ul li {position: relative; flex: auto; text-align: center; display:block;}
.header-1 #top_menu ul li a {display:block; padding:1rem;}
.header-1 #top_menu ul li ul {display:none; position:absolute; top:100%; left:0; background:#fff; text-align:left; box-shadow: 0 6px 12px rgb(0 0 0 / 18%); white-space: nowrap;}
.header-1 #top_menu ul li ul li {text-align:left; border-bottom:1px solid #ddd; position: unset; max-width: 60rem;}
.header-1 #top_menu ul li ul li a {color: var(--color-text) !important;}
.header-1 #top_menu ul li ul li:hover > a {background:#ddd;}
.header-1 #top_menu ul li ul li ul li:hover a {box-shadow: 0 6px 12px rgb(0 0 0 / 18%);}
.header-1 #top_menu ul li:hover > ul {display: block;}
.header-1 #top_menu ul li ul li ul {display: none; top: 0; left: 100%; min-height: 100%;}
.header-1 #top_menu ul li ul li.parent > a {padding-right:2rem; position:relative;}
.header-1 #top_menu ul li ul li.parent > a::before {content: '\27A4'; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);}

.header-1 .mobile-window {}
.header-1 .mobile-window .bg {position:fixed; background:rgba(0,0,0,.5); top:0; left:0; right:100%; bottom:0; border-radius:0 100% 100% 0;}
.header-1 .mobile-window .window {width:0; background:#fff; position:fixed; top:0; left:0; bottom:0; border-radius:0 100% 100% 0; opacity:0; padding:0; overflow:auto; display:flex; flex-direction: column; text-align: center;}
.header-1 .mobile-window .close {position:fixed; top:0; left:300px; margin:1rem; font-size:0; color:#fff; cursor:pointer;}
.header-1 .mobile-window .close:hover {opacity:.7;}
.header-1 .mobile-window .window > div {margin:1rem 0;}
.header-1 .mobile-window .mobile_menu {background:var(--color-base); text-align:left; margin-bottom:auto;}
.header-1 .mobile-window .mobile_menu ul {display:block; margin:0; padding:0;}
.header-1 .mobile-window .mobile_menu ul li {display:block; margin:0; padding:0; border-bottom:1px solid #ddd; position:relative;}
.header-1 .mobile-window .mobile_menu ul li a {color: var(--color-base-text); display:block; padding:.5rem;}
.header-1 .mobile-window .mobile_menu ul li ul li {display:none; background:rgba(255,255,255,.3); padding-left:.5rem;}
.header-1 .mobile-window .mobile_menu ul li ul.active > li {display:block;}
.header-1 .mobile-window .mobile_menu ul li.parent ul::before {content:'\f107'; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; background:#fff; padding:0 .5rem; top: .5rem; right:.5rem; cursor:pointer;}

body.active-menu {overflow:hidden;}
body.active-menu .header-1 .mobile-window {display:block;}
body.active-menu .header-1 .mobile-window .bg {right:0; border-radius:0;}
body.active-menu .header-1 .mobile-window .close {font-size:3rem;}
body.active-menu .header-1 .mobile-window .window {width:300px; border-radius:0; opacity:1; padding:1rem;}


[data-color="#000000FF"] {color:#000000FF}

.articles-1 .main {position: relative; z-index: 2;}
.articles-1 .main table tbody tr:nth-child(1) td:nth-last-child(1) {display: none;}

.articles-1 .bg {background: var(--color-inverse);}
.articles-1 .speaker-img {position:relative; overflow:hidden; border-radius:.5rem;}
.articles-1 .speaker-img img {width:100%;}
/* Если у спикера залит ролик — он показывается вместо фото: сам <video> лежит
   в разметке после <a> с картинкой, поэтому прячем ссылку через :has().
   В браузерах без :has() (Safari до 15.4) фото просто останется над видео. */
.articles-1 .speaker-img:has(video) > a {display:none;}
/* фон виден, пока ролик грузится, и по краям кадра в полноэкранном contain */
.articles-1 .speaker-img video {display:block; width:100%; height:30vh; max-height:30vh; object-fit:cover; background:var(--color-inverse); cursor:pointer;}
.articles-1 .nav {position: relative; z-index: 1;}
.articles-1 .wrap .header {display: none;}
.articles-1 .wrap .card.active {border-bottom-left-radius: 0; border-top-left-radius: 0;}
.articles-1 .wrap .card.active,
.articles-1 .wrap .card:hover {background: var(--color-inverse); cursor: pointer; position: relative;}
.articles-1 .wrap .city {font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.articles-1 .wrap .city i {color: var(--color-base); font-size: .8em;}
.articles-1 .wrap .title,
.articles-1 .wrap .speakers { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.articles-1 .main .speakers .speaker {cursor: pointer;}
.articles-1 .main .speakers .speaker.active {border-bottom: 3px dashed var(--color-base); }

.articles-1 .nav {padding-left: calc(var(--bs-gutter-x) * .5);}

.articles-1 .wrap::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
	background: var(--color-inverse);
}
.articles-1 .wrap::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--color-base);
}

@media (max-width: 576px) {
	.articles-1 .speaker-img img {background:#fff;}
	.articles-1 .speaker-img img {max-height:25vh;  min-height:0; object-fit:contain; background:#fff; margin:0 auto; }
	/* !important — в шаблоне на блоке висит утилита Bootstrap .position-sticky,
	   а на телефоне колонка во всю ширину и прилипание съедало пол-экрана */
	.articles-1 .speaker-img {position:static !important;}
	/* На узком экране кадр при cover обрезался почти до полосы — показываем
	   его целиком, поля закрывает фон, как у фото спикера рядом */
	.articles-1 .speaker-img video {object-fit:contain; background:#fff;}
	.articles-1 table,
	.articles-1 tbody,
	.articles-1 tr,
	.articles-1 td {display:block;}
	.articles-1 tr {margin-bottom:2rem;}
}
@media (min-width: 960px) {
	/* на компьютере ролик вдвое выше, чем на телефоне */
	.articles-1 .speaker-img video {height:60vh; max-height:60vh;}
	.articles-1 .wrap .card.active::before {content:''; display:block; position: absolute; top:0; bottom: 0; right:100%; width:2rem; background: var(--color-inverse);}
	.articles-1 .wrap {position: absolute; height:100%; overflow: auto; left:-2rem; right:calc(var(--bs-gutter-x) * .5); padding-left:2rem; padding-right: 1rem;}
	.articles-1 .nav {padding-left: 0}
	.articles-1 .wrap .header {display: block; position: sticky; top:0; z-index: 10; background: #fff;}
}

[data-color="#000000FF"] {color:#000000FF}
[data-color="#FFFFFFFF"] {color:#FFFFFFFF}

.sections-1 .row {}
.sections-1 img {width: 100%; height: 100%; object-fit: cover;}


.module.sections-1 {padding:100px 0;}
[data-color="#000000FF"] {color:#000000FF}

.texts-1 .text {background-color: var(--color-inverse); border-radius: 1rem; padding: 1rem}
@media (min-width: 768px) {
	.texts-1 .text {border-radius: 1rem; padding: 3rem 3rem 3rem 40%;}
	.texts-1 .container > img {position: absolute; left:50%; margin-left: -960px; top:50%; transform: translateY(-50%);}
}

.module.texts-1 {padding:100px 0;}
[data-color="#000000FF"] {color:#000000FF}

.footer-1 {padding:3rem 0;}
.footer-1 ul {display:block; margin:0; padding:0;}
.footer-1 ul li {display:block; margin:0; padding:0; border-bottom:1px solid var(--color-inverse);}
.footer-1 ul li a {display:block; margin:0; padding:.3rem 1rem;}
.footer-1 .zerro-author {display: flex; color:#A2A2A2;}
.footer-1 .zerro-author:hover {color:#A2A2A2;}
.footer-1 .zerro-author::before {content: url('/assets/images/zerro.svg'); margin-right:1rem; filter:grayscale(1) invert(1);}
.footer-1 .row:nth-child(1) {padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid #a2a2a2;}
.footer-1 .row:nth-child(2) a:hover {filter:contrast(3);}


[data-color="#ffffffFF"] {color:#ffffffFF}
[data-color="#A2A2A2"] {color:#A2A2A2}