h1      {color:#002288; font-size:20pt; font-family:Arial,Helvetica,Verdana; padding: 6px 6px}
h2      {color:#002288; font-size:16pt; font-family:Arial,Helvetica,Verdana; padding: 4px 4px}
h3      {color:#002288; font-size:12pt; font-family:Arial,Helvetica,Verdana; padding: 2px 2px}
html, body {
    color: #001144;
    font-size: 10pt;
    font-family: Arial,Helvetica,Verdana;
    background-image: url('demo/background.png');
    background-repeat: repeat;
    background-position: center top;
}
table   {color:#666666; font-size:10pt; font-family:Arial,Helvetica,Verdana}
a           {color:#000099; font-weight:bold; text-decoration:none; font-size:14pt; font-family:Arial,Helvetica,Verdana}
a:hover     {color:#0000CC; font-weight:bold; text-decoration:none; font-size:14pt; font-family:Arial,Helvetica,Verdana}
a:active    {color:silver; font-weight:bold; text-decoration:none; font-size:14pt; font-family:Arial,Helvetica,Verdana}

.wrapper {
    display: block;
    padding: 0px;
    margin: auto;
    width: 600px;
}

.strong {
    font-size: 14pt;
    color: #003399;
}

/* ----------------------------- blink for clkick on demo ------------ */

.blink_text {

    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
    animation-duration: 2s;
    
     /* text-align: center; */
     color: red;
    }

    @-moz-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @-webkit-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }
     
/* ----------------------------- photo gallery for screenshots ------------ */

.galleryrow {
  padding: 10px;
}
.gallerycolumn0 {
  float: left;
  /* width: 31%; */
  max-width: 240px;
  /* height: 200px; */
  padding: 10px;
  vertical-align: middle;
  display: inline-block;
  /* overflow: hidden; */
}
.gallerycolumn1 {
  float: left;
  /* width: 31%; */
  max-width: 240px;
  /* height: 200px; */
  padding: 10px;
  vertical-align: middle;
  display: inline-block;
  /* overflow: hidden; */
}
.gallerycolumn0 img {
  opacity: 0.8; 
  cursor: pointer;
  vertical-align: middle;
  max-width: 240px;
  max-height: 200px;
  object-fit: contain; /* cover; */
  border-width: 0px;
}
.gallerycolumn1 img {
  opacity: 0.8; 
  cursor: pointer;
  vertical-align: middle;
  max-width: 240px;
  max-height: 200px;
  object-fit: contain; /* cover; */
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}
.gallerycolumn0  img:hover {
  opacity: 1;
}
.gallerycolumn1  img:hover {
  opacity: 1;
}
.galleryrow:after {
  content: "";
  display: table;
  clear: both;
}
.gallerydesc {
  padding: 6px;
  text-align: center;
  font-size: 80%;
}
.gallerycontainer0 {
  position: relative;
  display: none;
  /* border: 1px solid #ccc; */
  text-align: center;
  /* background-color:black; */
}
.gallerycontainer1 {
  position: relative;
  display: none;
  /* border: 1px solid #ccc; */
  text-align: center;
  /* background-color:black; */
}
.gallerycontainer0 img {
  max-width: 100%;
  max-height: 780px;
  border-width: 0px;
}
.gallerycontainer1 img {
  max-width: 100%;
  max-height: 780px;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}
div.imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}     

/* --------------------  footer  -------------------------- */
.footer {
    background-color: white;
    padding: 4px 6px;
}

.footer a {
    color: gray;
    font-size: 9pt;
    font-family: Arial,Helvetica,Verdana;
    padding: 0px;
}