/*!
 * JGN 
 */



html,body {font-family: "arial", "verdana", sans-serif;font-size:15px;line-height:1.5}
html{overflow-x:hidden}
h1{font-size:36px;color:white;padding-top:8px;padding-bottom:8px}
h2{font-size:30px;color:white}
h3{font-size:24px;color:white}
h4{font-size:20px;color:white;padding-top:5px;padding-bottom:5px}
h5{font-size:18px;color:white;padding-top:5px;padding-bottom:5px}
h6{font-size:16px;color:white;padding-top:5px;padding-bottom:5px}

figure {
  background-color: #4dabf6;
  border: 1px black solid;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

figcaption {
  color: black;
  font-size:1.2em;
  font-style: italic;
  text-align: center;
}


.j-sidebar{display:none}
.j-sidebar{display:block!important;display:none;height:100%;width:200px;background-color:#4dabf6;z-index:1;overflow:auto}
.j-sidebar{display:block!important}

.j-hide-small{display:none!important}

.j-bar-block{width:100%;text-align:center;padding:10px 10px 10px 0px}


.j-content{margin-left:auto;margin-right:auto;max-width:480px}
.j-justify{text-align:justify!important}
.j-center{text-align:center!important}


.j-div{margin-left:auto;
margin-right:auto;
max-width:980px;
text-align:center;
color:white;
padding: 5px 5px;
/*! border:1px solid red;

*/

}

.jbutton{
  background-color: #808080;
  border-style:solid;
  border-width: 5px;
  border-color: black;
  color: white;
  text-decoration: none;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.j2button{
  margin-left:auto;margin-right:auto; width:80%;
position:relative;
  background-color: #808080;
  border-style:solid;
  border-width: 5px;
  border-color: black;
  color: white;
  text-decoration: none;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.center {
  display: flex;
  justify-content: center;

  height: 200px;
 
}


a:jlink {
  color: white;
}

.jlink:hover {
  background-color: #0080ff;
  color: white;
}


/* Use a media query to add a break point at 400px: */
@media screen and (max-width: 800px) 
  .footerleft, .footercentre, .footerright 
 {
    width: 50%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
.jgn-hover:hover{color:#fff!important;background-color:#000!important} 

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #4dabf6;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #0080ff;}

.dropdown:hover .dropdown-content {display: block;}

.j-blue{color:#fff!important;background-color:#0080ff!important}
.j-light-blue {color:#000!important;background-color:#4dabf6!important}


.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}



<div class="j-sidebar j-bar-block j-light-blue w3-hide-small j-center" style="position:fixed; top:0px; left:0px" id="sidebar">
  <!-- Logo in top left corner -->
  <div style="margin-left:10px;margin-right:auto;width:180px;border-style:solid;border-width:1px;">