.ex- {
    --hr-color: #57ADAF;                    /* Цвет разделительной полосы */
    --hr-len: 200px;                          /* Длина разделительной полосы */
    --h-img-color: #fff;                    /* Цвет текста на заголовочном фото */
    --h-img-color1: #FFCD05;                /* Цвет выделенного текста на заголовочном фото */
    --h2-color: #64397D;                    /* Цвет заголовков H2-4 */
    --publ-bg: #D3EDF7;                     /* Фон списка публикаций */
    --bg-tile: #D1EAEA;                     /* Фон текстовых блоков */
    --color-tile: #212121;                  /* Цвет текста текстовых блоков */
    --bg1-tabs-header: #FFCD05;             /* Фон 1 полосы вкладок */
    --bg1-tabs-header-a-hover: #FFF0AA;     /* Фон 1 hover-ссылки полосы вкладок */
    --bg2-tabs-header: #249697;             /* Фон 2 полосы вкладок */
    --bg2-tabs-header-a-hover: #39ADAF;     /* Фон 2 hover-ссылки полосы вкладок */
    --bg3-tabs-header: #81b8df;             /* Фон 3 полосы вкладок */
    --bg3-tabs-header-a-hover: #9DCBED;     /* Фон 3 hover-ссылки полосы вкладок */
    --bg4-tabs-header: #a6bac8;             /* Фон 4 полосы вкладок */
    --bg4-tabs-header-a-hover: #C4CED6;     /* Фон 4 hover-ссылки полосы вкладок */
    --bg2: #249697;                         /* Фон 2 */
    --bg2-color: #eee;                      /* Фон 2, цвет текста */
    --bg2-h2: #FFCD05;                      /* Фон 2, заголовки */
    --bg2-border: #FFCD05;                  /* Фон 2, боковые границы */
    --bg2-bg-tile: #D3EDF7;                 /* Фон 2. Фон текстовых блоков */
    --bg2-color-tile: #212121;              /* Фон 2. Цвет текста текстовых блоков */
    --bg2-bg-rows: #39AFB2;                 /* Фон 2. Фон текстовых блоков, 1 колонка */
    --bg2-color-rows: #eeeeee;              /* Фон 2. Цвет текста текстовых блоков, 1 колонка */
    --bg3: #FFF;                            /* Фон 3 */
    --tile-img-width: 250px;                  /* Ширина фото в списке текстовых блоков */
}

.ex- { line-height: 30px; font-size: 16px; }
.ex- h2, .ex- h3 { text-align: center; }
.ex- img { margin: 0; }
.ex- hr { border: none; color: var(--hr-color); background-color: var(--hr-color); width: var(--hr-len); height: 2px; margin: 30px auto; }
.ex- .text { margin: 10px auto 20px; width: 80%; overflow: auto; }
.ex- .text img { margin: 10px; }
.ex- a.open-more-text { display: block; text-align: right; font-size: 14px; }
.ex- a.more { display: inline-block; background: #64397C; color: #ffcd05; padding: 2px 30px; text-decoration: none; border-radius: 3px; }
.ex- a.more:hover { color: #fff; }
.ex- h2, .ex- h3, .ex- h4 { color: var(--h2-color); }

.ex- .h-img { width: 100%; color: var(--h-img-color); text-align: center; background-size: cover; margin-bottom: 40px;
    background-position: center center; text-shadow: 1px 1px 4px #333, -1px -1px 4px #333;}
.ex- .h-img .info { height: 100%; }
.ex- .h-img .info h2 { margin-top: 120px; font-size: 40px; font-weight: normal; color: var(--h-img-color); }
.ex- .h-img .info h2 b { color: var(--h-img-color1); }

.ex- .publ-container { background-color: var(--publ-bg); padding: 30px 0 25px; }
.ex- .publ-container .publ-slider { height: 405px; }

.ex- .bg2 { padding: 20px 0; background-color: var(--bg2); color: var(--bg2-color); overflow: hidden; }
.ex- .bg2 h2, .ex- .bg2 h3 { color: var(--bg2-h2); }
.ex- .bg2 .lr-border { padding: 10px 50px; border-left: 2px solid var(--bg2-border); border-right: 2px solid var(--bg2-border); width: 80%; margin: 0 auto; }
.ex- .bg2 .lr-border.text { width: 70%; }

.ex- .bg3 { background-color: var(--bg3); /*padding: 20px; box-shadow: 0px 0px 7px 0px #bbb;*/ margin-bottom: 20px; }

.ex- ul.tile { list-style: none; margin: 0; padding: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; }
.ex- ul.tile > li { display: flex; flex-direction: column; background-color: var(--bg-tile); color: var(--color-tile); margin: 10px; overflow: auto; }
.ex- ul.tile-2 > li { flex-basis: calc(50% - 20px); }
.ex- .bg3 ul.tile-2 > li { padding: 10px; flex-basis: calc(50% - 40px); }
.ex- ul.tile-3 > li { flex-basis: calc(33% - 20px); }
.ex- .bg3 ul.tile-3 > li { padding: 10px; flex-basis: calc(33% - 40px); }
.ex- .bg2 ul.tile > li { background-color: var(--bg2-bg-tile); color: var(--bg2-color-tile); }
.ex- .bg3 ul.tile > li { background-color: var(--bg3); box-shadow: 1px 1px 3px 1px #bbb; }
.ex- ul.tile li > img { width: 100%; }
.ex- ul.tile li .info { padding: 20px; }
.ex- .bg3 ul.tile li .info { padding: 10px; }

.ex- ul.rows { list-style: none; margin: 0; }
.ex- ul.rows > li { display: flex; align-items: center; background: var(--bg-tile); color: var(--color-tile); margin: 10px 0; border-radius: 5px; }
.ex- .bg2 ul.rows > li { background: var(--bg2-bg-rows); color: var(--bg2-color-rows); }
.ex- .bg3 ul.rows > li { background-color: var(--bg3); border: 1px solid #bbb; border-radius: 1px; }
.ex- ul.rows > li img { display: block; width: var(--tile-img-width); flex: 0 0 auto; }
.ex- ul.rows > li .info { padding: 20px; overflow-y: auto; flex-grow: 1; }
.ex- ul.rows > li p { margin: 0; }

.ex- ul.poster { list-style: none; margin: 0 0 30px; }
.ex- .bg3 ul.poster { margin: 0; }
.ex- .ex-tab-content ul.poster { margin: 0; }
.ex- ul.poster li.slide { display: flex; background-color: var(--bg-tile); color: var(--color-tile); box-sizing: border-box;
    padding: 0; overflow: hidden; line-height: 22px; height: 100%; margin-right: 20px; text-align: center; }
.ex- ul.poster li.slide-1 { flex-direction: row; width: calc(100% - 10px); }
.ex- ul.poster li.slide-2 { flex-direction: row; width: calc(50% - 10px); }
.ex- ul.poster li.slide-3 { flex-direction: row; width: calc(33% - 10px); }
.ex- ul.poster li.slide-2, .ex- ul.poster li.slide-3 { flex-direction: column; }
.ex- .bg2 ul.poster li.slide { border-color: var(--bg2);}
.ex- .bg3 ul.poster li.slide { background-color: var(--bg3); border: 1px solid #bbb; }
.ex- ul.poster li.slide img { display: block; }
.ex- ul.poster li.slide img.img-1 { height: 100%; }
.ex- ul.poster li.slide img.img-2 { width: 100%; }
.ex- ul.poster li.slide img.img-3 { width: 100%; }
.ex- ul.poster li.slide .info-1 { padding: 20px; overflow: auto; }
.ex- ul.poster li.slide .info-2 { overflow: auto; padding: 20px; text-align: left; }
.ex- ul.poster li.slide .info-3 { overflow: auto; padding: 20px; text-align: left; }

.ex- ul.e-masonry { list-style: none; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ex- ul.e-masonry li.slide { display: block; box-sizing: border-box; margin: 10px 0; background-color: var(--bg-tile); color: var(--color-tile); }
.ex- .bg3 ul.e-masonry li.slide { padding: 10px; }
.ex- ul.e-masonry.col-1 li.slide { width: calc(50% - 10px); }
.ex- ul.e-masonry.col-2 li.slide { width: calc(33% - 10px); }
.ex- ul.e-masonry.col-3 li.slide { width: calc(25% - 11px); }
.ex- .bg2 ul.e-masonry li.slide { background: var(--bg2-bg-rows); color: var(--bg2-color-rows); }
.ex- .bg3 ul.e-masonry li.slide { background-color: var(--bg3); border-radius: 1px; box-shadow: 1px 1px 3px 1px #bbb; }
.ex- ul.e-masonry li.slide img { width: 100%; }
.ex- ul.e-masonry li.slide .info { padding: 10px; }

.ex- .flickity-prev-next-button { background: rgba(255,205,5,.6); width: 50px; height: 50px; padding: 10px; border: none; border-radius: 50%;
    position: absolute; }
.ex- .flickity-prev-next-button .arrow { fill: rgba(255,255,255,.8); }
.ex- .flickity-prev-next-button:hover { background: rgba(255,205,5,1); }
.ex- .flickity-prev-next-button:hover .arrow { fill: rgba(255,255,255,1); }
.ex- .flickity-prev-next-button.previous { left: -30px; top: 50%; }
.ex- .flickity-prev-next-button.next { right: -30px; top: 50%; }

.ex- .page-list-arrow-container { display: flex;  justify-content: center; flex-wrap: wrap; }
.ex- .page-list-arrow { width: 494px; height: 111px; position: relative; }
.ex- .page-list-arrow:nth-child(odd) { background-image: url(/templates/main/images/ex/arrow-left.png); }
.ex- .page-list-arrow:nth-child(even) { background-image: url(/templates/main/images/ex/arrow-right.png); }
.ex- .page-list-arrow a { position: absolute; top: 0; bottom: 0; width: 38%; height: 76%; margin: auto 0;
    display: flex; flex-direction: column; justify-content: center;
    color: #444; text-transform: uppercase; text-decoration: none; }
.ex- .page-list-arrow a span { display: block; line-height: normal; }
.ex- .page-list-arrow a:hover span { color: #000; }
.ex- .page-list-arrow:nth-child(odd) a { left: 57%; }
.ex- .page-list-arrow:nth-child(even) a { left: 10%; }
.ex- .page-list-arrow .empty-img, .ex- .page-list-arrow img { position: absolute; width: 70px; height: 70px; top: 21px; }
.ex- .page-list-arrow:nth-child(odd) .empty-img, .ex- .page-list-arrow:nth-child(odd) img { left: 21px;}
.ex- .page-list-arrow:nth-child(even) .empty-img, .ex- .page-list-arrow:nth-child(even) img { right: 21px;}
.ex- .page-list-arrow:nth-child(odd) .empty-img { background: url(/templates/main/images/ex/ico-arrow-left.png) no-repeat center center; }
.ex- .page-list-arrow:nth-child(even) .empty-img { background: url(/templates/main/images/ex/ico-arrow-right.png) no-repeat center center; }
.ex- .page-list-arrow .page-list-note { display: none; position: absolute; width: 328px; top: 102px; color: #fff; line-height: normal;
    box-sizing: border-box; font-size: 14px; padding: 30px 20px 20px;
    z-index: 2; }
.ex- .page-list-arrow:nth-child(odd) .page-list-note { right: 9px; border-radius: 0 0 20px 0;
    background: #8D75A5 url(/templates/main/images/ex/note-left.jpg?2) no-repeat top center; }
.ex- .page-list-arrow:nth-child(even) .page-list-note { left: 9px; border-radius: 0 0 0 20px;
    background: #8D75A5 url(/templates/main/images/ex/note-right.jpg?2) no-repeat top center; }
.ex- .page-list-arrow:hover .page-list-note { display: block; }

.ex- .ex-tab { margin-bottom: 30px; }
.ex- .ex-tab-control a { display: inline-block; margin: 0 0 0 10px; padding: 1px 7px; text-decoration: none; border-radius: 5px 5px 0 0; }
.ex- .ex-tab-control.tab-bg1 a { color: #212121; background: var(--bg1-tabs-header); }
.ex- .ex-tab-control.tab-bg2 a { color: var(--bg2-color); background: var(--bg2-tabs-header); }
.ex- .ex-tab-control.tab-bg3 a { color: #212121; background: var(--bg3-tabs-header); }
.ex- .ex-tab-control.tab-bg4 a { color: #212121; background: var(--bg4-tabs-header); }
.ex- .ex-tab-control.tab-bg1 a:hover { background: var(--bg1-tabs-header-a-hover); }
.ex- .ex-tab-control.tab-bg2 a:hover { background: var(--bg2-tabs-header-a-hover); }
.ex- .ex-tab-control.tab-bg3 a:hover { background: var(--bg3-tabs-header-a-hover); }
.ex- .ex-tab-control.tab-bg4 a:hover { background: var(--bg4-tabs-header-a-hover); }
.ex- .ex-tab-content { margin: 0; background-color: var(--bg3); }

@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1200px) {
    .ex- .page-list-arrow { width: 50%; height: 0; padding-bottom: 11%; background-size: 100% 100%; }
    .ex- .page-list-arrow .empty-img, .ex- .page-list-arrow img { width: 14%; height: 63%; top: 0; bottom: 0; margin: auto 0; background-size: 100% 100%; }
    .ex- .page-list-arrow .page-list-note { width: 66.5%; top: 92%; }
    .ex- .page-list-arrow:nth-child(odd) .page-list-note { right: 2%; }
    .ex- .page-list-arrow:nth-child(even) .page-list-note { left: 2%; }
    .ex- ul.e-masonry.col-3 li.slide { width: calc(33% - 11px); }
}
@media screen and (max-width: 1024px) {
    .ex- .bg2 .lr-border { padding: 10px 30px; }
    .ex- .page-list-arrow { width: 494px; height: 111px; padding-bottom: 0; }
    .ex- .page-list-arrow:hover .page-list-note { display: none; }
    .ex- ul.poster li.slide-3 { width: calc(50% - 10px); }
    .ex- ul.tile-3 > li { flex-basis: calc(50% - 20px); }
    .ex- .bg3 ul.tile-3 > li { flex-basis: calc(50% - 40px); }
    .ex- ul.e-masonry.col-2 li.slide, .ex- ul.e-masonry.col-3 li.slide { width: calc(50% - 11px); }
}
@media screen and (max-width: 768px) {
    .ex- ul.poster li.slide { align-items: flex-start; }
    .ex- ul.poster li.slide img.img-1 { height: auto; max-width: 50%; max-height: 100%; }
    .ex- ul.poster li.slide .info-1 { height: 100%; }
    .ex- ul.rows > li img { width: calc(var(--tile-img-width) - 100px); }
}
@media screen and (max-width: 640px) {
    .ex- { line-height: 24px; }
    .ex- .text { width: 90%; }
    .ex- ul.poster li.slide-1 { flex-direction: column; }
    .ex- ul.poster li.slide { align-items: center; }
    .ex- ul.poster li.slide img.img-1, .ex- ul.poster li.slide img.img-2, .ex- ul.poster li.slide img.img-3 { width: auto; max-height: 50%; }
    .ex- ul.poster li.slide-2, .ex- ul.poster li.slide-3 { width: calc(100% - 10px); }
    .ex- ul.tile { display: block; }
    .ex- ul.e-masonry li.slide, .ex- ul.e-masonry.col-2 li.slide, .ex- ul.e-masonry.col-3 li.slide { width: calc(100% - 10px); }
}
@media screen and (max-width: 525px) {
    .ex- .page-list-arrow { width: 100%; height: 0; padding-bottom: 22%; }
    .ex- .page-list-arrow a span { font-size: 14px; }
    .ex- ul.rows > li { flex-direction: column; }
    .ex- ul.rows > li img { width: auto; max-width: 100%; max-height: 50%; }
    .ex- .text img { max-width: calc(100% - 20px)!important; }
}
@media screen and (max-width: 480px) {
    .ex- .bg2 .lr-border { padding: 10px 20px; }
}
@media screen and (max-width: 360px) {
    .ex- .bg2 .lr-border { padding: 10px 15px; }
}