/********************************** RESPONSIVE DESIGN **********************************/
/* Note - grid layout with 12 columns */

* {
  box-sizing: border-box;
}

/* For mobile/smart phones */
[class*="col-"] {
  width: 100%;
}

.tabnav {
  font-size: 0.8125em;
  padding-bottom: 15px;
  text-align: center;
}

/* For tablets & small devices */
@media only screen and (min-width: 768px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
      .col-1-9 {width: 11.11%;}
      .tabnav {font-size: 0.7em;}
}

/* For medium devices */
@media only screen and (min-width: 992px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
      .col-1-9 {width: 11.11%;}
      .tabnav {font-size: 0.7em;}
}

/* For large devices */
@media only screen and (min-width: 1200px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
      .col-1-9 {width: 11.11%;}
      .tabnav {font-size: 0.7em;}
}

/* Float all columns to the left with padding */
[class*="col-"] {
  float: left;
  padding: 15px;
}

/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. */
/* To prevent this, add a style that clears the flow: */
.row::after, .rowblack::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  background-color: white;
}

.responsive {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.responsive2 {
  width: 100%;
  max-width: 450px;
  height: auto;
}

/********************************** RESPONSIVE DESIGN **********************************/

/*************************************** ANCHORS ***************************************/

a {
  color: rgb(0, 60, 161);
}

a:link, a:visited {
  color: rgb(0, 60, 161);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*************************************** ANCHORS ***************************************/

/***************************************** TAGS *****************************************/

html {
  background-color: black;
  color: black;
  font-family: arial;
  font-size: 1.2em;
}

h1 {
  color: white;
  font-size: 1.875em;
  text-align: center;
}

h2 {
  color: rgb(0, 60, 161);
  font-size: 1.375em;
  text-align: center;
}

h3 {
  color: rgb(0, 60, 161);
  text-align: center;
}

hr {
  background-color: gray;
  border: 0 none;
  color: gray;
  height: 2px;
  Margin-top: 15px;
}

img {
  border: 0;
  Max-width: 100%;
}

/***************************************** TAGS *****************************************/

/**************************************** CLASSES ****************************************/

.bold {
  font-weight: bold;
}

.blue {
  color: rgb(0, 60, 161);
}

.box {
  border: 3px solid gray;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.boxshaded {
  background-color: #e0e0e0;
  border: 3px solid gray;
  border-radius: 10px;
  padding: 8px;
}

.centre {
  text-align: center;
}

.footer {
  color: rgb(0, 60, 161);
  font-size: 0.6875em;
}

.italic {
  font-style: italic;
}

/**************************************** CLASSES ****************************************/

/************************************ NAVIGATION MENU ************************************/

/* all menu item links are white without underline */
.menu a:link, .menu a:visited {
  color: white;
  padding: 5px;
  text-decoration: none;
}

/* all menu item links are white with underline on mouse over */
.menu a:hover {
  color: gold;
  text-decoration: underline;
}

/* selected menu item links are gold without underline */
.selected a:link, .selected a:visited {
  color: gold;
  padding: 5px;
  text-decoration: none;
}

/* selected menu item links are gold without underline on mouse over */
.selected a:hover {
  color: gold;
}

/************************************ NAVIGATION MENU ************************************/