* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial';
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 15px 0;
}


:root {
--rub1: #0490c5;
--rub2: #025080;
--rub3: #056a66;
--rub4: #089d5b;
--rub5: #624138;
--rub6: #3c6090;
--rub7: #d5b36a;
--rub8: #0a264d;
--rub9: #034786;
--rub10: #828384;
--rub11: #1565aa;
--rub12: #3c1943;
--rub13: #B38FB1;
--rub14: #023d27;
--rub15: #d2535a;
--rub16: #f17e00;
--maincolor: #003252;
--water-is: #268bc1;
--water: #034c8f;
--energy: #f17e00;
--food: #79a12c;
--eco: #385c35;
--climate: #d5b36a;
--purple: #39185f;
--sand: #bb9b6a;
--turqoise: #296678;
--lightgreen: #8fc7c7;
--grey: #5c5a5d;
--grey1: #7b7b7c;
--white: #ffffff;
}

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

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

#palette li {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 2px #fff solid;
}

#palette li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    width: 100%;
    height: 100%;
    font-size: 22px;
    transition: 0.8s;
}


#palette li:hover {
background-color: var(--maincolor);
}

#palette li a:hover {
background-color: var(--maincolor);
transition: 0.8s;
border-radius: 8px;
}


#palette li:nth-child(1)
{background-color: var(--rub1); }

#palette li:nth-child(2)
{background-color: var(--rub2);}

#palette li:nth-child(3)
{background-color: var(--rub3);}

#palette li:nth-child(4)
{background-color: var(--rub4); }

#palette li:nth-child(5)
{background-color: var(--rub5);}

#palette li:nth-child(6) 
{background-color: var(--rub6);}

#palette li:nth-child(7)
{background-color: var(--rub7);}

#palette li:nth-child(8)
{background-color: var(--rub8);}

#palette li:nth-child(9) 
{background-color: var(--rub9);}

#palette li:nth-child(10)
{background-color: var(--rub10);}

#palette li:nth-child(11)
{background-color: var(--rub11);}

#palette li:nth-child(12)
{background-color: var(--rub12);}

#palette li:nth-child(13)
{background-color: var(--rub13);}

#palette li:nth-child(14)
{background-color: var(--rub14);}

#palette li:nth-child(15)
{background-color: var(--rub15);}

#palette li:nth-child(16)
{background-color: var(--rub16);}



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

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

.col-container {
display: table; 
max-width: 1200px;
}

.left { 
float: left;
width: 30%;
padding-top: 10px;
padding-left: 20px;
background-color: var(--grey1); 
display: table-cell;
}

.right {
float: left;
width: 70%;
padding: 10px;
display: table-cell;
}


@media screen and (max-width: 600px) {
.left, .right {
display: block;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
}

.left50 { 
float: left;
width: 60%;
display: flex;
justify-content: center;
align-items: center;
height: 250px;
}

.left50 h1 { 
color: var(--white);
font-size: 36pt;
line-height: 1.4;
padding: 20px;
font-weight: bold;
text-transform: uppercase; 
text-align: left;
}

.right25 {
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 0;
width: 20%;
height: 250px;
}

@media screen and (max-width: 600px) {
.left50 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.right25 {
width: 100%;
justify-content: center;
align-items: center;
padding-left: 20px;
padding-right: 20px;
height: auto;
}
.left50 h1 {
font-size: 24pt;
}
}

h4.wh {font-size: 17pt; color: #fff; line-height: 1.3em; margin-bottom: 10px; font-weight: bold;}

h4.bl {font-size: 17pt; color: #000; line-height: 1.3em; margin-bottom: 10px; font-weight: bold;}

.rub1 {
background-color: var(--rub1);
}

.rub2 {
background-color: var(--rub2);
}

.rub3 {
background-color: var(--rub3);
}

.rub4 {
background-color: var(--rub4);
}

.rub5 {
background-color: var(--rub5);
}

.rub6 {
background-color: var(--rub6);
}

.rub7 {
background-color: var(--rub7);
}

.rub8 {
background-color: var(--rub8);
}

.rub9 {
background-color: var(--rub9);
}

.rub10 {
background-color: var(--rub10);
}

.rub11 {
background-color: var(--rub11);
}

.rub12 {
background-color: var(--rub12);
}

.rub13 {
background-color: var(--rub13);
}

.rub14 {
background-color: var(--rub14);
}

.rub15 {
background-color: var(--rub15);
}

.rub16 {
background-color: var(--rub16);
}


a.sidemenu {
text-decoration:none;
text-transform: uppercase;
text-align:left;
font-weight: bold;
font-size: 12pt;
background-color: var(--grey1); 
color: var(--white);
display:block; 
padding: 3px;
border-bottom: var(--grey1) 2px solid;
margin-bottom: 3px;
transition: 0.5s;
}

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

a.sidemenu-current {
text-decoration:none;
text-transform: uppercase;
text-align: left;
font-weight: bold;
font-size: 12pt;
background-color: var(--grey1); 
border-bottom: var(--white) 2px solid;
color: var(--white);
display: block; 
padding: 3px;
margin-bottom: 3px;

}

.row_top{
display: flex;
justify-content: space-around;
align-items: start;

}



.m5 {display: block; font-size: 12pt; color: var(--white); text-decoration: none; background-color: var(--water); padding: 25px; margin-bottom: 20px; margin-left: auto; margin-right: auto; font-weight: bold; text-transform: uppercase;  text-align: center;  transition: background-color 0.5s; width: 400px;}

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


.m5r {display: block; font-size: 12pt; color: var(--white); text-decoration: none; background-color: var(--water); padding: 25px; margin-bottom: 20px; margin-left: auto; margin-right: auto; font-weight: bold; text-transform: uppercase;  text-align: center;  transition: background-color 0.5s;  width: 400px;}

a.m5r:hover {background-color: var(--water-is);}



@media screen and (max-width: 600px) {
.row_top{
flex-direction: column;
justify-content: center;
align-items: center;
}
.m5 {
width: 320px;
font-size: 12pt;
}
.m5r {
width: 320px;
font-size: 12pt;
margin-left: 10px;
}
}

.m5.active-yb {
background-color: var(--grey1);
text-decoration: none;
}

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

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



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


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

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

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