body {
  color: #000000;
  background: black;
/*  background-image: url(""); */
  font-family: 'Montserrat', sans-serif;
}
.container {
  background: white;
}
/* clear-both **** used to clear the DIV floats ***** */

clear-both {
  clear: both;
}

img a {
  text-decoration: none;
}
a:link {
  /*font-weight: bold;*/
  color: blue;
  background: transparent;
  text-decoration: underline;
}
a:visited {
  /*font-weight: bold;*/
  color: blue;
  background: transparent;
  padding: 0px;
  text-decoration: underline;
}
a:hover {
  /*font-weight: bold;*/
  text-decoration: none;
  background: transparent;
  color: red;
  font-weight: bold;
}
a:active {
  /*font-weight: bold;*/
  text-decoration: underline;
  background: blue;
  color: blue;
}
/* ***** Start of custom classes ***** */

.rounded-corners {
  border-radius: 10px;
}

.top-rounded-corners {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
/*
.button {
  display: block;
  width: 115px;
  height: 25px;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}
*/

/* use to place a <button> element inside an <a> element so it will validate. */ 
.button-link {
    background-color: blue;
    color: white;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #007BFF;  /* Blue border */
    border-radius: 5px; 
    font-size: 16px;
    cursor: pointer; /* Pointer cursor for a button-like feel */
}
.button-link:hover {
    background-color: red;     /* Darker green on hover #45a049 */
    border-color: red; /* Update border color on hover #45a049 */
    color: white;
}
/* end of button validate */


/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
img.scalable {
  height: auto !important;
  width: auto !important;
  max-width: 100%;
}

.strike {
  color: red;
  text-decoration: line-through
}

.highlightyel {
  background-color: #FFFF40;
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
}

.inline {
  display: inline;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.top {
  vertical-align: top;
}
.justify {
  text-align: justify;
}
.bold {
  font-weight: bold;
}


/* centers a div based on max-width of div */
.divctr {
  margin-right: auto;
  margin-left: auto;
}

/* here are the standard 16 colors that the older 8-bit graphics cards supported */
.aqua {
  color: #00ffff;
}
.black {
  color: #000000;
}
.blue {
  color: #0000ff;
}
.fuchsia {
  color: #ff00ff;
}
.gray {
  color: #808080;
}
.green {
  color: #008000;
}
.lime {
  color: #00ff00;
}
.maroon {
  color: #800000;
}
.navy {
  color: #000080;
}
.olive {
  color: #808000;
}
.purple {
  color: #800080;
}
.red {
  color: #ff0000;
}
.silver {
  color: #c0c0c0;
}
.teal {
  color: #008080;
}
.white {
  color: #ffffff;
}
.yellow {
  color: #ffff00;
}

/* puts border around all table cells with a padding of 2 pixels */
.table_border table, td, th {
  border: 1px solid grey;
  padding: 2px;
}

/* ***** Makes a pretty table with borders ***** */
.pretty-table th[scope=col] {
  color: #000;
  background-color: #8fadcc;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}
.pretty-table th+th[scope=col] {
  color: #fff;
  background-color: #7d98b3;
  border-right: 1px dotted #666;
}
.pretty-table th[scope=row] {
  background-color: #b8cfe5;
  border-right: 2px solid #333;
}
.pretty-table tr.alt th, .pretty-table tr.alt td {
  color: #2a4763;
}
.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td {
  background-color: #cdaa7d;
  color: #000;
}
/* end of pertty-table */

/*  
Pure CSS read more toggle A PEN BY Kasper Mikiewicz https://codepen.io/Idered/pen/AeBgF   
*/   
.read-more-state {
  display: none;
}
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state~.read-more-trigger:before {
  content: 'Read more';
}
.read-more-state:checked~.read-more-trigger:before {
  content: 'Read less';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid red;
  border-radius: .25em;
}
.readhere {
  text-decoration: none;
  opacity: 1;
  font-size: inherit;
  font-weight: bold;
  max-height: 999em;
  padding: 0 4px 0 4px;
  border: 1px solid red;
  border-radius: 4px;
}

/* Style for the floating top-of-page button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 5px;  /* default 15px */
  border-radius: 4px;
}
#myBtn:hover {
  background-color: red;
}

/* Show larger image over smaller image on hover */
.image-container {
    position: relative;
    display: inline-block; /* Ensures it stays inline */
    width: 50px; /* Example width of the small image */
    vertical-align: middle; /* Aligns with the text */
}

.small-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.large-image {
    position: absolute;
    top: -100%; /* Adjust to position the large image above the text */
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Larger size of the image */
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
/*    pointer-events: none; */
}

.image-container:hover .large-image {
    opacity: 1;
}

.image-container:hover .small-image {
    opacity: 0;
}

/*
<!-- ***** Google language translator ***** -->
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

<!-- Hide the Google toolbar -->
.goog-te-gadget-icon {
  display: none !important;
}

<!-- Customize the dropdown -->
#google_translate_element select {
  color: red;  
  padding: 5px;
  background-color: #f1f1f1;  
  border: none;
  border-radius: 3px;
}
*/