video {
  max-width: 100%;
}

/*LISO-1528 */
.block.block-html a {
    text-decoration: none;
}
.block.block-html a:hover {
    text-decoration: underline;
}
/*Some notes on the code:
•	You can change the colours to any colour you would like, provided CSS recognizes the colour code you or name you use
•	If you make any changes to this code, make sure to detail what the code pieces are doing by leaving a note (which needs to be sandwiched between /* text goes here */, otherwise CSS thinks you're typing code.  Example, if PIs select colour schemes etc;
*/

/* to change the colour of the link text on the page, and remove the underlines in the navigation bar when you hover */

a {
 color: black !important;
font-size: 18px;
text-decoration: none; !important
}
/*LISO-1528
a:hover{
text-decoration: underline;
}
*/
a:visited {
color: #676767;
font-family: "Arial, Helvetica, sans-serif"
text-decoration: none;
}

/* to create hoverable navigation bar and align the navigation bar at the bottom of the header image.  Note, you may have to mess with the "top" value if you change the background image  */

ul.navigation {
   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: black !important;
  font-weight: bold;
position: relative;
top: 158px;
background-color: black;
text-decoration: none;
}

ul.navigation li {
  float: left;
}

ul.navigation li a {
  display: block;
  color: white !important;
  text-align: center;
  padding: 5px 8px;
  text-decoration: none;
  font-family: Serif;
}

ul.navigation li a {
color: white !important;
}

/* Change the link color to different colour on hover */
ul.navigation li a:hover {
  background-color: rgb(128,0,0); /*this is the hover colour*/
  color: #F5F5F5 !important; /* this is the text colour*/
opacity: 100% !important;
 text-decoration: none;
}

/* To add the header image*/
header {
 background-image: url("https://docs.google.com/drawings/d/e/2PACX-1vTRqfCutC_Q0ezfjxEvbHNcW2pF5RfN53ylhRQ6ntTg5FG5zftvANTDRa1fQcKNR9DC_8hKmKpsTfeA/pub?w=965&h=414");
  height: 315px;
  width: 100%;
 }

/*This piece of code makes a larger title which sits on top of the header image.  We decided we didn't want this title to show, since we were going to add it in the HTML section of the page.  I have set the opacity to 0%, so that we can't see the title, but can always add it back in if we want later.*/

.site-title {
    font-size: 50px !important;
    text-transform: uppercase;
    letter-spacing: .125em;
    margin: 40px 0 0;
    display: block;
    text-align: center;
    position: relative;
    bottom: -100px;
    color: #F5F5F5 !important;
    font-weight: bold;
    opacity: 0;
  }

/* to set up columns */

.column {
  float: left;
  width: 33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}



.column img { 
  height: 225px;
  margin: 0 auto !important;
  display: block;
}
 /* to center titles on the column layout */
.column h4 {
  text-align: center;
}
/* to  change the font colour on the column layout */
.column h4 a {
  color:black;
}

/*to make hoverable links*/

h2 {
text-align: center;
color: black;
font-size: 37px;
}
/*LISO-1528 SAL*/
h2 a {
text-align: center;
float: center;
border: none;
font-size: 27px;
}

/*to fix issues with truncated footer*/

.browse .resource h4 a  {
color: black !important
}

.browse .resource h4 a:hover {
  background-color: rgb(128,0,0); /*this is the hover colour*/
  color: #F5F5F5 !important; /* this is the text colour*/
opacity: 100% !important;
 text-decoration: none;
}

 li.item.resource a {
color: black !important;
}

li.item.resource a:hover {
  background-color: rgb(128,0,0); /*this is the hover colour*/
  color: #F5F5F5 !important; /* this is the text colour*/
opacity: 100% !important;
 text-decoration: none;
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
   }