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

a {
text-decoration: none;
}

ul {
list-style: none;
}

body {
font-family: 'Arial';
background-color: #e9e9e9;
}


:root {
--grey: #c6bfb9;
--blue: #24559a;
--lightblue: #01a5cb;
--white: #ffffff;
--brown: #9d8b75;
}

.btn {
text-transform: uppercase;
}


.cawi {
max-width: 1200px;
background-color: transparent;
margin: 0 auto;
padding: 0;
overflow: hidden; 
border: 0;
}


.cawi-left {
width: 48%;
float: left;
border: 0;
margin-top: 7px;
margin-bottom: 7px;
}

.cawi-right {
width: 48%;
float: right;
border: 0;
padding-top: 30px;
text-align: right;
}

.cawi-left  img {max-width: 100%; }


@media screen and (max-width: 600px) {
.cawi-left, .cawi-right {
width: 100%;
height: 110px;
text-align: center;
vertical-align: middle;
}
}


a.cawi {color: var(--white); text-decoration: none;  font-size: 20pt; text-transform: uppercase; background-color: var(--lightblue); padding: 10px;}

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

a.cawi1 {color: var(--white); text-decoration: none; font-size: 26pt; text-transform: uppercase; background-color: var(--blue); padding-top: 30px; padding-bottom: 30px; display: block; border-radius: 10px; text-align: center;}

a:hover.cawi1 {background-color: var(--lightblue);}



.hdr {
width: 100%;
height: 350px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
background-color: var(--grey);
text-align: center;
position: relative; 
}


.hdr img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  }

@media screen and (max-width: 600px) {
  .hdr {
    height: 200px;
  }
  }



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


.topnav {
overflow: hidden;
background-color: var(--blue);
}

.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 19px;
transition: 0.5s;
}

.topnav a.lan {
float: right;
display: block;
background-color: var(--lightblue);
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 19px;
}


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

.active {
background-color: var(--lightblue);
color: #fff;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
margin: 0;
transition: 0.5s;
}

.dropbtn-active {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: var(--lightblue);
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: var(--lightblue);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
 color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 19px;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: var(--brown);
color: #fff;
}

.dropdown-content a:hover {
background-color: var(--grey);
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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 .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}



h1 {font-size: 28pt; color: var(--blue); text-align: center; padding-left: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 20px;}

h1.rec {font-size: 28pt; background-color: var(--lightblue); color: var(--white); text-align: center; padding: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 10px;}

h2 {font-size: 26pt; color: var(--lightblue); text-align: center; font-weight: bold; padding-left: 10px; padding-right: 10px;  line-height: 1.3em; margin-top: 25px; margin-bottom: 15px; display:block; border-bottom: 1px var(--tide) solid;}

h3 {font-size: 18pt; color: var(--brown); text-align: left; font-weight: bold; padding-left: 10px; padding-right: 10px; line-height: 1.3em; margin-top: 7px; margin-bottom: 7px;}

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


.text {max-width: 1200px; text-align: left; overflow:hidden; background: transparent; margin-top: 10px; margin-bottom: 10px; }

.text p {font-size: 15pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text ul {font-size: 15pt; color: #000; text-align: left; list-style-type: disc; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}

.text ol {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}


.text p.txt1 {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt2 {font-size: 15pt; color: #000; text-align: left; padding-left: 70px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt3 {font-size: 15pt; color: #000; text-align: left; padding-left: 90px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.center {font-size: 13pt; color: #000; text-align: center; line-height: 1.4em; margin-bottom: 15px;}

.text p {font-size: 17pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.p40 {font-size: 17pt; color: #000; text-align: left; padding-left: 40px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.p60 {font-size: 17pt; color: #000; text-align: left; padding-left: 60px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}


.text img {max-width: 100%; }


a.tt {color: #4c362a; text-decoration: none;  font-size: 15pt;}
a:hover.tt {color: var(--blue); text-decoration: underline;}

a.tt2 {color: #4c362a; text-decoration: none;  font-size: 17pt;}
a:hover.tt2 {color: var(--blue); text-decoration: underline;}

a.tt3 {color: #4c362a; text-decoration: underline;  font-size: 15pt;}
a:hover.tt3 {color: var(--blue); text-decoration: none;}

a.m {color: #000; text-decoration: underline; font-size: 15pt;}
a:hover.m {text-decoration: none;}

a.ll {color: var(--blue); text-decoration: none;  font-size: 15pt; border-bottom: 1px var(--blue) solid;  border-top: 1px var(--blue) solid; }
a:hover.ll {border-bottom: 0;border-top: 0; }

a.l-center {color: #4c362a; text-decoration: underline; font-size: 13pt;}
a:hover.l-center {color: var(--blue); text-decoration: none;}


.raw {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 5px; }

.raw1 {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 2px; }

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

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


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

.leftcolumn p {font-size: 15pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.leftcolumn p.p40 {font-size: 15pt; color: #000; text-align: left; padding-left: 40px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.leftcolumn p.p60 {font-size: 15pt; color: #000; text-align: left; padding-left: 60px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}


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


.rightcolumn p {font-size: 15pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.rightcolumn p.p40 {font-size: 15pt; color: #000; text-align: left; padding-left: 40px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.rightcolumn p.p60 {font-size: 15pt; color: #000; text-align: left; padding-left: 60px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

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



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

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



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



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


.pub-left { 
float: left;
width: 30%;
padding: 5px;
text-align: center;
}

.pub-right {
float: left;
width: 65%;
padding: 5px;
text-align: left; 
}


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

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


.pub-right p {font-size: 15pt; color: #000; line-height: 1.4em; margin-bottom: 15px;}

@media screen and (max-width: 600px) {
.pub-left, .pub-right {
width: 100%;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
}












.cell-l { 
float: left;
width: 49%;
height: 300px;
background: url('../i/amud.png') center no-repeat; 
border-radius: 15px;
margin-bottom: 10px;
}

.cell-r {
float: right;
width: 49%;
height: 300px;
background: url('../i/syrd.png') center no-repeat; 
border-radius: 15px;
margin-bottom: 10px;
}


.cell-l1 { 
float: left;
width: 49%;
height: 300px;
background: url('../i/water1.png') center no-repeat; 
border-radius: 15px;
}

.cell-r1 {
float: right;
width: 49%;
height: 300px;
background: url('../i/water2.png') center no-repeat; 
border-radius: 15px;
}


@media screen and (max-width: 600px) {
.cell-l,.cell-l1, .cell-r, .cell-r1 { 
width: 95%;
text-align: center;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
}
}


.celltext {max-width: 580px; overflow:hidden; text-align: center; vertical-text-align: middle; margin-top: 100px; z-index: 100;}

.celltext p {
font-size: 28pt; 
font-style: normal; 
color: var(--white); 
font-weight: bold; 
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/* Footer */


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

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

.f-left p {
font-size: 15px;
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: 15px;
font-style: normal;
color: var(--white);
margin-bottom: 7px;
text-decoration: none;
padding-left: 10px;
}

.f-left a:hover {
text-decoration: underline;
}

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

.f-right {
float: right;
width: 50%;
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);
text-decoration: none;
}

.f-right a:hover {
 text-decoration: underline;
}

@media screen and (max-width: 600px) {
.f-left, .f-right { 
width: 100%;
padding-left: 20px;
padding-right: 20px;
text-align: center;
margin-bottom: 50px;
}
.f-left p {
font-size: 13px;
}
.f-left a {
font-size: 13px;
}
}

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




.collapsible {
  background-color: var(--blue);
  color: var(--white); 
  font-size: 26pt; 
  cursor: pointer;
  padding: 18px;
  width: 100%;
  height: 200px;
  border: 12px double var(--white); 
  text-align: center;
  outline: none;
  margin-top: 10px;
  border-radius: 10px;
 }

.active-yb, .collapsible:hover {
background-color:var(--brown);
transition: 1.5s;
}

.content {
  padding: 10px;
  display: none;
  overflow: hidden;
  background-color: transparent;
  transform: translateY(-20%);
  animation: ani 1s forwards;
}

@keyframes ani {
  0% {transform: translateY(-20%);}
  100% {transform: translateY(0);}
}


.column33 {   
float: left;
width: 33%;
height: 250px;
padding: 10px;
background-color: var(--blue);
border: 4px solid #e9e9e9;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
border-radius: 15px;
}

.column33:hover {
background-color: var(--brown);
transition: background-color 1s;
}

.text2 {
 display: none;
}

.column33:hover .text1 {
 display: none;
}

.column33:hover .text2 {
display: block;
transition: 1s;
}



.column33-1 {   
float: left;
width: 33%;
height: 350px;
padding: 10px;
}

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


@media screen and (max-width: 600px) {
.column33, .column33-1 {
width: 100%;
height: 250px;
padding: 20px;
}
}



a.c33  {
font-size: 26pt; 
color: var(--white); 
font-weight: bold; 
}

a.c33 span {
font-size: 18pt; 
color: var(--white); 
}












.table-container {
    max-inline-size: 100%;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
}

.table-container th,
.table-container td {
    scroll-snap-align: start;
    padding: var(--metric-box-spacing);
}


td.bord {
border:1px #dadada solid;
}

td.kl2 {
border: 1px solid #000; background: #fff; font-family: arial; font-size: 15pt; 
font-style: normal; color: #000; text-align: center; vertical-align: middle; padding: 4px; }

th.kl2 {
border: 1px solid #000; background: #b0d8ff; font-family: arial; font-size: 15pt; 
font-style: normal; color: #000; text-align: center; vertical-align: middle; padding: 4px; }

table.kl1 {
border: 1px solid #000; border-collapse: collapse; 
}