* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
}

ul {
list-style: none;
}

body {
font-family: 'Arial';
}

:root {
--maincolor: #003366;
--blue: #12befc;
--orange: #ff9933;
--grey: #7a9ab1;
--white: #ffffff;

}

html {
scroll-behavior: smooth;
scroll-timeline: --page-scroll block;
}


/* Header */

header {
max-width: 100%;
background-color: var(--white);
padding: 15px 0;
margin-top: 5px;
}

.container {
max-width: 1200px;
width: 100%;
padding: 0;
margin: 0 auto;
overflow: hidden; 
}

.container img {
max-width: 100%;
height: auto; 
}


header .container {
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 10px;
overflow: hidden; 
}

header .container img {
max-width: 100%;
height: auto;
}

.hdr-l {
width: 30%;
float: left;
text-align: right;
padding-right: 10px;
}

.hdr-r {
width: 65%;
float: left;
text-align: left;
padding-left: 20px;
}

@media screen and (max-width: 600px) {
.hdr-l, .hdr-r { 
width: 100%;
text-align: center;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}
}



.lan {
max-width: 1200px;
width: 100%;
padding: 15px;
margin: 0 auto;
text-align: right;
}

a.lan {
color: var(--maincolor); 
text-decoration: none; 
font-weight: bold; 
font-size: 15px; 
text-transform: uppercase;
}

a:hover.lan {
color: var(--blue); 
}




/* Menu */

.topnav {
overflow: hidden;
background-color: var(--maincolor);
border-top: 1px solid var(--white);
border-bottom: 1px solid var(--white);
padding: 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}

.topnav a {
float: left;
display: block;
color: var(--white);
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
margin-left: 10px;
}

.topnav a:hover {
background-color: var(--grey);
}


.topnav a.active {
background-color: var(--blue);
color: #ffffff;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a {display: none;}

.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}

.topnav.responsive{
float: none;
position: relative;
display: block; 
width: 100%; 
text-align: left;
}
}

/* Main */

main {
max-width: 1200px;
margin: auto; 
overflow: hidden; 
padding: 0;
}

main img {
max-width: 100%;
height: auto; 
}

.row {
max-width: 1200px;
overflow: hidden; 
padding: 0;
}


.row img { 
max-width: 100%;
height: auto;
}

.row:after {
content: "";
display: table;
clear: both;
margin-bottom: 10px;
}


.row-n {
max-width: 100%;
padding: 0;
background-color: var(--maincolor);
}


.row-n img { 
max-width: 100%;
height: auto;
}

.row-n:after {
content: "";
display: table;
clear: both;
margin-bottom: 10px;
}


@media screen and (max-width: 600px) {
.row {
padding-left: 0;
}
}

.leftcolumn { 
float: left;
width: 50%;
padding: 5px;
}

.rightcolumn {
float: left;
width: 50%;
padding: 5px;
}


.leftcolumn img { 
max-width: 100%;
height: auto;
}

.rightcolumn img { 
max-width: 100%;
height: auto;
}

@media screen and (max-width: 600px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}



.leftcolumn70 { 
float: left;
width: 70%;
padding: 10px;
}

.rightcolumn30 {
float: left;
width: 30%;
padding: 10px;
}



.leftcolumn70 img { 
max-width: 100%;
height: auto;
}


.rightcolumn30 img { 
max-width: 100%;
height: auto;
}



@media screen and (max-width: 600px) {
.leftcolumn70, .rightcolumn30 {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}

.row-ch {
max-width: 100%;
padding: 0;
margin-top: 25px;
border: 1px solid var(--blue);
border-radius: 10px;
}
 
.leftcolumn35 {
float: left;
width: 200px;
height: 200px;
padding: 10px;
background-color: var(--blue);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
border-radius: 10px;
}

.leftcolumn35 p {
font-size: 20pt; font-weight: bold; color: #fff; line-height: 1.5em; 
}

.rightcolumn65 {
float: left;
width: 60%;
padding: 10px;
display: flex;
justify-content: center;
text-align: left;
}

.rightcolumn65 p {
font-size: 18pt; color: #000; line-height: 1.5em; 
}


@media screen and (max-width: 600px) {
.leftcolumn35, .rightcolumn65 {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}







.row-g {
max-width: 1200px;
overflow: hidden; 
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}



.column33 { 
float: left;
width: 33%;
padding: 5px;
}


.column33-1 { 
float: left;
width: 380px;
min-height: 500px;
padding: 5px;
}

.column33 img { 
max-width: 100%;
height: auto;
}

.column33-n { 
float: left;
width: 390px;
}

.column33-n img { 
width: 100%;
height: auto;
}

.column25 { 
float: left;
width: 24%;
}

@media screen and (max-width: 600px) {
.column33, .column33-1, .column33-n, .column25 {
width: 100%;
height: auto;
padding-left: 10px;
padding-right: 10px;
}

.column33-n img { 
width: 100%9:45 05.02.2025;
height: auto;
}

}



a.m {color: #000; text-decoration: underline; font-size: 20px;}

a:hover.m {text-decoration: none;}

a.m2 {font-size: 20px; color: #000; text-decoration: underline; padding: 2px;}

a.m2:hover {text-decoration: none; color: var(--white); background-color: var(--grey); padding: 2px;}

a.m3 {font-size: 22px; color: #000; text-decoration: none; padding: 2px;}

a.m3:hover {color: var(--white); background-color: var(--grey); padding: 2px;}

a.m4 {font-size: 22px; color: var(--white); background-color: var(--maincolor); text-decoration: none; padding: 10px; }

a.m4:hover {color: #dadada;}

a.m5 {font-size: 24px; color: var(--white); background-color: var(--maincolor); text-decoration: none; padding: 15px 30px; border-radius: 10px;}

a.m5:hover {background-color: var(--blue);}


h1 {
color: var(--maincolor);
font-size: 32px; 
text-align: center; 
margin-bottom: 20px;
}


h2.news {
color: var(--grey); 
font-size: 28px; 
text-align: left; 
display: block; 
margin-bottom: 20px;
}

h2 {
color: var(--blue);
font-size: 28px; 
text-align: left; 
font-weight: bold; 
margin-bottom: 20px;
}


h3 {
color: var(--maincolor);
font-size: 24px; 
text-align: left; 
font-weight: bold; 
margin-top: 40px;
margin-bottom: 20px;
}

h3.n {
background-color: var(--grey);
color: var(--white);
font-size: 24px; 
text-align: left; 
padding: 10px;
font-weight: bold; 
margin-top: 10px;
margin-bottom: 10px;
}


h3.w {
color: var(--white);
font-size: 24px; 
text-align: left; 
font-weight: bold; 
margin-top: 20px;
margin-bottom: 20px;
}


@media screen and (max-width: 600px) {
h1, h2, h2.news, h3, h3.w {
text-align: center; 
}
}


p {font-size: 20px; font-style: normal; color: #000; line-height: 1.5em; margin-bottom: 15px;}

p.txt20 {font-size: 20px; font-style: normal; color: #000; line-height: 1.5em; margin-bottom: 15px; padding-left: 20px;}

p.txt40 {font-size: 20px; font-style: normal; color: #000; line-height: 1.5em; margin-bottom: 15px; padding-left: 40px;}

p.txt60 {font-size: 20px; font-style: normal; color: #000; line-height: 1.5em; margin-bottom: 15px; padding-left: 60px;}

p.mc {font-size: 23px; font-style: normal; color: var(--maincolor); line-height: 1.5em; margin-bottom: 15px;}



p.date {font-size: 16px; font-style: normal;color: var(--maincolor); line-height: 1.5em; margin-bottom: 10px;}

p.date-w {font-size: 16px; font-style: normal;color: var(--white); line-height: 1.5em; margin-bottom: 10px;}

p.wht {font-size: 20px; font-style: normal; color: var(--white); line-height: 1.5em; margin-bottom: 15px;}

.row, .leftcolumn, .rightcolumn, .leftcolumn70, .rightcolumn30, .column33, .column33-1 ul {font-size: 20px; color: #000; line-height: 1.5em; margin-bottom: 15px;}

.row, .leftcolumn, .rightcolumn, .leftcolumn70, .rightcolumn30, .column33, .column33-1 li {list-style-type: disc; padding-left: 5px; font-size: 20px; color: #000; line-height: 1.5em; margin-bottom: 15px;}

p.center {
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}

p.right {
text-align: right; 
padding-right: 15px;
}




a.sml {font-family: arial; font-size: 18px; color: var(--grey); text-align: left; font-weight: bold; text-decoration: none;}

a:hover.sml {color: #86a9c2; }


a.sidemenu { 
text-decoration:none;
font-size: 18px; 
color: #fff; 
text-align: left;
display:block; 
padding:15px;
margin-bottom: 5px;
border: 0;
background: var(--orange);
}

a:hover.sidemenu {
color: #fff;
background: var(--grey);
}

a.sidemenuactive {
text-decoration:none;
font-size: 18px; 
color: #fff; 
text-align: left;
display:block; 
padding:15px;
margin-bottom: 5px;
background: var(--grey);
}


a.sidemenu2 { 
text-decoration:none;
font-size: 18px; 
color: #fff; 
text-align: left;
display:block; 
padding:15px;
margin-bottom: 5px;
border: 0;
background: var(--blue);
}

a:hover.sidemenu2 {
color: #fff;
background: var(--maincolor);
}

a.sidemenu3 { 
text-decoration:none;
font-size: 18px;
color: #fff; 
text-align: left;
display:block; 
padding:15px;
margin-bottom: 5px;
border: 0;
background: var(--maincolor);
}

a:hover.sidemenu3 {
background: var(--grey);
}

a.sidemenu4 { 
text-decoration:none;
font-size: 20px;
font-weight: bold;
color: var(--white); 
text-align: center;
display:block; 
padding:15px;
margin-bottom: 2px;
border-right: 3px solid var(--white);
background: #116466;
height: 100%;
width: 100%;
}

a.sidemenu4 span { 
font-size: 15px;
}

a:hover.sidemenu4 {
background: var(--grey);
}

a.sidemenuactive4 {
font-size: 20px;
font-weight: bold;
color: var(--white); 
text-align: center;
display:block; 
padding:15px;
margin-bottom: 2px;
border-right: 3px solid var(--white);
background: var(--grey);
height: 100%;
width: 100%;
}


a.sidemenuactive4 span { 
font-size: 15px;
}


a.minute { 
text-decoration:none;
font-size: 18px;
font-weight: bold;
color: var(--white); 
text-align: left;
display:block; 
padding:15px;
margin-bottom: 5px;
border: 0;
background: #12befc;
width: 200px;
}

a:hover.minute {
background: #036;
}




/* Footer */

footer {
max-width: 100%;
background-color: var(--maincolor);
margin-top: 5px;
overflow: hidden; 
border-top: 8px solid var(--blue);
}

.container-ft {
max-width: 1200px;
margin: 0 auto;
padding: 15px 0;
overflow: hidden; 
 }
 
.f-left { 
float: left;
width: 20%;
text-align: left;
}

.f-left p {
font-size: 25px;
font-style: normal;
color: var(--white);
margin-top: 10px;
}

.f-left p span {
font-size: 15px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-left a {
font-size: 25px;
font-style: normal;
color: var(--white);
margin-bottom: 7px;
text-decoration: none;
display: block;
border-left: 2px solid var(--maincolor);
padding-left: 10px;
}

.f-left a:hover {
border-left: 2px solid var(--white);
}

.f-left a span {
font-size: 15px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-left1 { 
float: left;
width: 35%;
text-align: left;
padding-top: 15px;
}

.f-left1 img { 
max-width: 100%;
height: auto;
float: left;
}

.f-right {
float: right;
width: 40%;
text-align: left;
}

.f-right p {
font-size: 16px;
font-style: normal;
color: var(--white);
line-height: 1.4em; 
margin-bottom: 7px;
}

.f-right a {
font-size: 16px;
font-style: normal;
color: var(--white);
background-color: var(--maincolor);
padding: 2px;
}

.f-right a:hover {
font-size: 16px;
font-style: normal;
color: var(--maincolor);
background-color: var(--white);
padding: 2px;
}


@media screen and (max-width: 600px) {
.f-left,.f-left1, .f-right { 
width: 100%;
text-align: center;
margin-bottom: 30px;
}
}

.footer_h4 {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: var(--white);
margin-bottom: 7px;
}



/**/


table.rp {border: 1px solid var(--grey); border-collapse: collapse; width: 99%; }

td.rp {border: 1px solid #aaa; background-color: var(--white); padding: 10px; font-family: arial; color: #aaa; font-size: 13pt; text-align: center; vertical-align: middle; width: 33%; height: 50px; }

td.rpt {border: 1px solid #aaa; background-color: #f8f6e0; font-family: arial; color: #000; font-size: 13pt; font-weight: bold; text-align: center; vertical-align: middle; height: 50px; }


a.ta {color: #000; text-decoration: underline; font-size: 13pt;}
a:hover.ta {text-decoration: none; color: var(--maincolor);}


p.year {font-size: 30pt; color: var(--blue); text-align: left; margin-top: 30px; margin-bottom: 10px;}








.collapsible {
background-color: var(--orange);
color: #fff; 
font-size: 26px; 
cursor: pointer;
padding: 18px;
width: 99%;
border: none;
text-align: left;
outline: none;
border-bottom: 2px solid var(--white);
margin-top: 10px;
 }

.active-yb, .collapsible:hover {
background-color: var(--grey);
color: var(--white); 
}

.content {
padding-top: 10px;
display: none;
overflow: hidden;
background-color: var(--white);
}



img.lnk {
box-shadow: none;
}


img:hover.lnk {
-moz-box-shadow:0 0 20px #999;
-webkit-box-shadow:0 0 20px #999;

}


.flex-container {
display: flex;
background-color: var(--white);
margin-bottom: 2px;
width: 100%;
}

.flex-container > div {
background-color: var(--white);
width: 200px;
margin: 0;
padding: 0;

}


.flex-cont {
flex: 1;
background-color: var(--white);
margin: 0;
padding: 0;
width: 33%;
}

@media screen and (max-width: 600px) {
.flex-container {
height: 120px;
}
}

.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Контейнер слайд-шоу */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}

/* Вперед и назад кнопки */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}


.next {
right: 0;
border-radius: 3px 0 0 3px;
}


.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}


.text {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}


.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Точки/пули/индикаторы */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}


.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}






.m7 {
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: block;
  width: 300px;
  padding: 5px;
  text-decoration: underline;
  transition: background-color 0.3s;
}


.m7.active-yb {
  background-color: var(--blue);
  color: #fff;
  text-decoration: none;
}

.popup-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: #f9f9f9;
  padding: 0 18px;
}

.popup-content.open {
  max-height: 300px; 
  padding: 10px 18px;
}

.popup {
position: relative;
display: inline-block;
cursor: pointer;
margin-bottom: 7px;
margin-left: 7px;
}

/* .popup-content {
display: none;
position: absolute;
z-index: 1;
top: -50px;
left: 150px;
background-color: #fff;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 10px;
border: 2px solid #ddd;
border-radius: 10px;
} */

/* .popup:hover .popup-content {
display: block;
} */

.popup-content p {font-size: 20px; color: #000; margin-bottom: 5px;}

a.pl {font-size: 18px; display: block; color: #000; background-color: #f0f0f0; text-align: left; text-decoration: none; padding: 10px; }

a:hover.pl {color: #fff; background-color: #242627; }


#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 140px;
    right: 130px;
    z-index: 99;
    font-size: 24px;
    background-color: var(--blue);
border: 1px var(--white) solid;
    color: white;
    padding: 12px 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

#scrollTopBtn:hover {
background-color: #333;
border: 1px var(--white) solid;
}

@media screen and (max-width: 600px) {
#scrollTopBtn {
  bottom: 50px;
  right: 50px;
}
}


.container-bz {
    max-width: 1200px;
    width: 100%;
    padding: 5px;
    margin: 0 auto;
    background-color: #fff;
}

#palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: 0;
    list-style: none;
}

#palette li {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 0;
}

@media (max-width: 768px) {
#palette {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 500px) {
#palette {
grid-template-columns: 1fr;
}
}