body { font-family: Helvetica,Arial,sans-serif; font-size: calc(12px + 1.8vw); max-width: 960px}
    @media (min-device-width: 480px) {
      body {font-family: Helvetica,Arial,sans-serif; font-size: calc(10px + 1.4vw); max-width: 960px }}
    @media (min-width: 1020px) {
      body {font-family: Helvetica,Arial,sans-serif; font-size: calc(10px + 0.9vw); max-width: 960px }}
    @media (max-width: 479px) {
      body {font-family: Helvetica,Arial,sans-serif; font-size: calc(10px + 0.9vw); max-width: 479px }}

    table, th, td {font-size: calc(12px + 1.8vw); }
    @media (min-device-width: 480px) {
      table, th, td {font-size: calc(10px + 1.4vw); }}
    @media (min-width: 1020px) {
      table, th, td {font-size: calc(10px + 0.7vw); }}
    @media (max-width: 479px) {
      table, th, td {font-size: calc(10px + 0.7vw); }}

    .hide { display: inline-block; }
   @media (max-width: 600px) {
      .hide { display: none; } }
   @media (max-device-width: 479px) {
      .hide { display: none; } }

    .button {
        display: inline-block;
        padding: 15px 30px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #007f00;
        border-radius: 30px;
        outline: none;
        transition: 0.3s;
        border: 3px solid #009900;
      }
   @media (max-width: 479px) {
      .button { 
          padding: 5px 10px;
          border-radius: 10px; } }
    .button:hover {
        background-color: #00bb00;
        border-color: #000000;
      }
    .button2 {
        display: inline-block;
        padding: 15px 30px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #00007f;
        border-radius: 30px;
        outline: none;
        transition: 0.3s;
        border: 3px solid transparent;
      }
   @media (max-width: 479px) {
      .button2 { 
          padding: 5px 10px;
          border-radius: 10px; } }
    .button2:hover {
        background-color: #0000ee;
        border-color: #000000;
      }
    .buttonsmall {
        display: inline-block;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #007f00;
        border-radius: 20px;
        outline: none;
        transition: 0.3s;
        border: 3px solid #009900;
      }
   @media (max-width: 479px) {
      .buttonsmall { 
          padding: 3px 6px;
          border-radius: 10px; } }
    .buttonsmall:hover {
        background-color: #00bb00;
        border-color: #000000;
      }

      .responsive160 {
        width: 100%;
        max-width: 160px;
        height: auto;  }

    #myBtn {
      display: inline-block;
      position: fixed;
      bottom: 50px;
      right: 30px;
      z-index: 99;
      border: 3px solid transparent;
      outline: none;
      background-color: #dd0000;
      transition: 0.3s;
      color: white;
      cursor: pointer;
      padding: 10px 22px;
      border-radius: 50%;
}

    #myBtn:hover {
      background-color: #ff6666;
      border-color: #000000;
}


   .transparent1 {background: rgba(255,255,255,0.4);}
   .transparent2 {background: rgba(255,255,220,0.5);}
   .tr {  display:table; text-align:center; background-color: rgba(255, 255, 255, 0.5); }


/* START RESPONSIVE COLUMNS */
/* such as used in intro.htm */

/* Float two columns side by side */

    * {
      box-sizing: border-box;
    }

    /* Create two unequal columns that float next to each other */
    .column {
      float: left;
      padding: 15px 15px;
      text-align: center;
      font-style: normal;
    }
    .left25 {width: 25%}
    .left50 {width: 50%}
    .left75 {width: 75%}
    .right25 {width: 25%;}
    .right50 {width: 50%;}
    .right75 {width: 75%;}

    /* Remove extra left and right margins, due to padding */
    .row {margin: -5px -5px;}

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .crd {
      padding: 8px;
      text-align: left;
      font-style: normal;
      height: 180px;
    }

/* END RESPONSIVE COLUMNS */


/* START RESPONSIVE CARDS */
/* such as used in culture.html */

/* Float two columns side by side */

* {
  box-sizing: border-box;
}

.columncards {
  float: left;
  width: 50%;
  max-width: 480px;
  padding: 20px 20px;
}

/* Remove extra left and right margins, due to padding */
.rowcards {margin: -5px -5px;}

/* Clear floats after the columns */
.rowcards:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
   @media (max-width: 699px) {
  .columncards {
    width: 80%;
    max-width: 960px;
    display: block;
    margin-bottom: 20px; 
  }
}
   @media (max-device-width: 479px) {
  .columncards {
    float: center;
    width: 80%;
    max-width: 960px;
    font-size: calc(12px + 2.2vw);
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 4px;
  text-align: center;
  font-style: normal;
  border-radius: 30px;
  background: rgba(220,220,220,0.8);
}

/* END RESPONSIVE CARDS */

/* And Another set for responsive buttons */
/* such as used in photos.php */

/* Float four columns side by side */

.columncards2 {
  float: left;
  width: 25%;
  max-width: 240px;
}

/* Remove extra left and right margins, due to padding */
/* .rowcards2 {margin: -5px -5px;} */

/* Clear floats after the columns */
.rowcards2:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card2 {

  text-align: center;
  font-style: normal;
  background: transparent;
}

/* END RESPONSIVE CARDS2 */