/* wp 2023 */
* {
  box-sizing: border-box;
}
.container {
width: 100%;
position: relative;
} 
.responsiveimg {
width: 100%;
height: auto;
}
.responsiveprojectimg {
width: 100%;
max-width: 1000px;
height: auto;
max-height: 400px;
}
.responsivetxt {
/*width: 82%;  */
max-width: 1000px;
}
@media screen and (max-width: 1200px) { 
.responsivetxt {
width: 100%;  
}
}
.hrline{
	width: 86%;
	max-width: 1000px;
	text-align: left;
	margin-left: 0; 
	color: #f2f2f2;
	opacity: 0.5;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #f2f2f2;
color: #333333;
}
#maincontent{
position: fixed;
top: 0; 
left: 230px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
padding-right: 20px;
overflow: auto; 
background: #fff;
scroll-behavior: smooth;
font-size: 18px;
/*font-size: 1.1em;*/
} 
#homelinkbtn{
display: none;  
  color: #008CBA; 
    text-decoration: underline;  
}
#homelinkbtn:hover{
  color: #4CAF50;   
} 
/* breakpoints */
@media screen and (min-width: 2000px) { 
#maincontent { 
    left: 320px; 
}
#framecontent { 
    width: 240px; 
}
}
@media screen and (min-width: 1500px) { 
 .responsivetxt {
  /*width: 63%;  */
  padding-bottom: 5px;
}
#maincontent { 
    left: 260px; 
}
}
@media screen and (max-width: 1000px) {
#maincontent { 
    left: 200px; 
    margin-right: 10px;
}
}
@media screen and (max-width: 900px) {
 .responsivetxt {
 /* width: 96%; */ 
}
}
@media screen and (max-width: 600px) {
#framecontent{
display: none;
}
#maincontent{
left: 0;
padding-right: 4px;
margin-right: 0px;
}
#homelinkbtn{
 display: block;text-align: left;margin: 14px;
}
}
/* end breakpoints */

.footerlinks{
	margin: 15px;  
	margin-left: 0px; 
	text-align: left;
}
.copyright{
	margin: 30px; 
	margin-left: 10px; 
	font-size: 12px;
	text-align: left;
}
.scrollframe{
margin: 15px; /*Margins for inner DIV inside each DIV (padding)*/
}
.scrollframe { 
  overflow-y: auto;
  scroll-behavior: smooth;
}
.menuframe{
margin: 15px; /*Margins for inner DIV(padding)*/ 
  position: relative;
}  
ul.horizontal li {
    float: left;
}
ul.gray {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}
ul.horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
ul.detailsul {
  padding-left: 8px; 
  list-style-type: none; 
  font-size: 16px; 
}
ul.detailsul li:before { 
  content:"\2714\0020"; 
  color: #a8b1b2;
  list-style-type: none;  
}
ul.gray li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
} 
ul.horizontal li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
ul.ex {
    width: 100%; 
}
ul.vertical {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
ul.vertical a.active {
background-color: #04AA6D;
color: white;
text-decoration: none;
} 
ul.vertical li a {
display: block;
color: #008CBA; 
padding: 4px 0 8px 14px;
text-decoration: underline;
font-family: Verdana,sans-serif;
font-size: 16px;
line-height: 1.3;
}
ul.vertical li a:hover:not(.active) {
background-color: #555;
color: white;
text-decoration: none;
}   
ul.vertical li a.linkanchor{ 
color: #008CBA;  }
.actived { 
background-color: #cccccc;
color: #f2f2f2!important;
text-decoration: none!important;
 }
.backbutton{
color: #008CBA; 
text-decoration: underline; 
/* font-size: 12px;*/
}
.backbutton:hover{
color: #4CAF50;   
}
.logobtnp { text-align: center;} 
.logobtn { width: 80px; height: 80px;padding: 0;opacity: 1;} 
.logobtn:hover { opacity: 0.5;} 
/* :target { 
    background-color: #008CBA; 
 }*/
.greencolor{
color: #4CAF50;   
}
.redcolor{
color: #b64a4a;   
}
.bluebg{
background: #c9e7eb; 
}
.yellowbg{
background: #fbe880; 
}
.greybg{
background: #ebebeb; 
}
.skinbg{
background: #ffdbc1;
/*background: #f9cdaa; */
}
.orangebg{
background: #ff6e00; 
} 
::-moz-selection { /* Code for Firefox */
  color: #333333;
background: #fbe880; 
}
::selection {
  color: #333333;
background: #fbe880; 
}

h1 {
  font-size: 42px;  
/*background: #1DEBD9;
background: -webkit-linear-gradient(top left, #1DEBD9, #2355DA);
background: -moz-linear-gradient(top left, #1DEBD9, #2355DA);
background: linear-gradient(to bottom right, #1DEBD9, #2355DA);*/
/*background: #8DD4F4;
background: -webkit-linear-gradient(top left, #8DD4F4, #2CA8F4);
background: -moz-linear-gradient(top left, #8DD4F4, #2CA8F4);
background: linear-gradient(to bottom right, #8DD4F4, #2CA8F4);*/
/*  background: linear-gradient(to bottom right, #A22FCE, #FF7000);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}

.totopbtn{
color: #008CBA; 
text-decoration: none; 
margin-right: 20px;
}
.totopbtn:hover{
color: #4CAF50;   
}
.footerlinks a{
color: #008CBA; 
margin-bottom: 10px;
line-height: 2em;
}
.footerlinks a:hover{
color: #4CAF50;   
text-decoration: none; 
} 
.footerlinks a:visited{
    color: #4CAF50;
    text-decoration: none!important; 
} 
.footerlinks a:active {
    color: #4CAF50;
    text-decoration: none;
}
.sectiontitle{
font-weight: 100;
color: #bbbbbb;
}

.maintitle{ 
font-size: 2em;
}

/* Create three equal columns that floats next to each other */
.detailscolumn {
  float: left;
  width: 33.33%;
  color: #333333;
  padding-top: 0;
  margin-top: 0;
  padding-left: 10px;
} 
.detailsrow { 
  max-width: 1000px; 
  padding-top: 0;
  margin-top: 0;
  /*background-color:#ccc;*/
}
/* Clear floats after the columns */
.detailsrow:after {
  content: "";
  display: table;
  clear: both; 
}@media screen and (max-width: 600px) {
  .detailscolumn {
    width: 100%; 
  }
}  
  .detailscolumn h4{
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 16px;
  }
  .detailscolumn p{
    margin-top: 0px;
    padding-top: 5px;
    padding-right: 5px;
    font-size: 16px;
  }
  h4.subtitle {
    padding-bottom: 0px;
    margin-bottom: -9px;    
    font-size: 20px;/*h1-42/h2-26/h4-20*/
    /*font-size:1.38vw; */
  }
  
/* .info {width:84%;}
  .info img {float:right;padding-left: 20px;padding-bottom: 20px;max-width: 440px;}
 .info p {margin-right:60%;}*/

 #imgwrapper { 
  width: 100%;
  overflow: hidden; 
  max-width: 1000px;
}
#leftimg {
    width: 50%;
    float:left;  
}
#rightimg { 
    overflow: hidden;  
}
.lightbox{cursor: pointer;}
/* Create two equal columns that floats next to each other */
.twocolumndetails {
  float: left;
  width: 50%;
  color: #333333;
  padding-top: 0;
  margin-top: 0;
} 
.twocolumndetailsl { 
  color: #333333;
  padding-top: 0;
  margin-top: 0;
        width: auto;
        overflow: hidden;
} 
.twocolumndetailsr { 
  float: right;
  width: 50%;
  right: 0;
  color: #333333;
  padding-left: 25px;
  margin-top: 0;
} 
.twocolumnrow { 
  max-width: 1000px; 
  padding-top: 0;
  margin-top: 14px; 
  margin-bottom: 24px; 
  /*background-color:#ccc;*/
}
/* Clear floats after the columns */
.twocolumnrow:after {
  content: "";
  display: table;
  clear: both; 
}@media screen and (max-width: 600px) {
  .twocolumndetails {
    width: 100%;
  }
.twocolumndetailsr { 
    width: 100%;
  padding-left: 0px;
} 
}  
  .twocolumndetails h4{
    margin-bottom: 0px;
    padding-bottom: 0px;
    /*font-size: 18px;*/
  }
  .twocolumndetails p{
    margin-top: 0px;
    padding-top: 5px;
    padding-right: 5px;
    /*font-size: 16px;*/
  }

 .footerlinks{
  color: #cccccc;
 }
/*#totopbtn {
  display: none;  
  position: fixed;  
  bottom: 20px;  
  right: 30px;  
  z-index: 99;  
  border: none;  
  outline: none;  
  background-color: red; 
  color: white;  
  cursor: pointer;  
  padding: 15px;  
  border-radius: 10px;  
  font-size: 18px;  
} 

#totopbtn:hover {
  background-color: #555;  
}*/
/*img.responsiveprojectimg {
    transition:transform 0.25s ease;
}

img.responsiveprojectimg:hover {
    -webkit-transform:scale(1.5);
    transform:scale(1.5);
}*/

/* START PIE */
  .piechartwrapper{
display: flex;
justify-content: center;
  }
  .piecharttxt{
text-align: center;
/*vertical-align: middle;*/
  }
  .piecharttxtcenter{
    text-align: center; 
  }
.piechart {
    margin-top: 12px; 
    width: 120px;
    height: 120px;
    border-radius: 50%;
       /*box-shadow: 0 0 0 3px #fefefe;*/
  } 
.piecolor1a{ 
    background-image: conic-gradient(
      #005b76 100deg,
      /*#cccccc 0 235deg,*/
      #F0F8FB 0);
  }
.piecolor1b{ 
    background-image: conic-gradient(
      #005b76 50deg, 
      #F0F8FB 0);
  }
.piecolor1c{ 
    background-image: conic-gradient(
      #005b76 160deg, 
      #F0F8FB 0);
  }
.piecolor3a{ 
    background-image: conic-gradient(
      #005594 100deg,
      /*#cccccc 0 235deg,*/
      #F0F8FB 0);
  }
.piecolor3b{ 
    background-image: conic-gradient(
      #005594 50deg, 
      #F0F8FB 0);
  }
.piecolor3c{ 
    background-image: conic-gradient(
      #005594 160deg, 
      #F0F8FB 0);
  }
.piecolor4a{ 
    background-image: conic-gradient(
      #005b76 100deg,
      /*#cccccc 0 235deg,*/
      #F0F8FB 0);
  }
.piecolor4b{ 
    background-image: conic-gradient(
      #005b76 50deg, 
      #F0F8FB 0);
  }
.piecolor4c{ 
    background-image: conic-gradient(
      #005b76 160deg, 
      #F0F8FB 0);
  }
.piecolor5a{ 
    background-image: conic-gradient(
      #73C7C6 100deg,
      /*#cccccc 0 235deg,*/
      #F0F8FB 0);
  }
.piecolor5b{ 
    background-image: conic-gradient(
      #73C7C6 50deg, 
      #F0F8FB 0);
  }
.piecolor5c{ 
    background-image: conic-gradient(
      #73C7C6 160deg, 
      #F0F8FB 0);
  }
/* END PIE */


/* END */