body
 {
font-family:Montserrat;
color:#6d6d6d;
font-size:0.9em;
line-height:1.4;
margin-left:0px;
margin-right:0px;

    background-color: white;  
}
h1 {color:navy;}
h2 {color:navy;}

ul {list-style-type: none; text-align: center; background-color:#4d648d; padding-top:0; padding-left:5%; padding-right:5%; 
       width:100%; color:white; margin:0px; clear:both; }
li {list-style-type:none;  display:block; background-color: #4d648d; font-size: 14px; color:white; }
li a {list-style-type: none; color:white; text-decoration: none; display:block; padding:0px 0px 0px 0px;  }
li a:hover {background-color: #1e1f26; color: #a1d6e2;}



@media only screen and (min-width: 600px)
{
ul {float:left; list-style-type: none; background-color:#ecf2fc; padding-top:0; padding-left:5%; padding-right:6%; width:100%; position:sticky;  
         color:white; margin:0px; }
li {list-style-type:none; float:left; display:block; background-color: #4d648d; font-size: 12px; color:white;}
li a {list-style-type: none; color:white; text-decoration: none; display:block; padding:10px 8px 12px 8px;  }

}


@media only screen and (min-width: 1000px)
{

ul {float:left; list-style-type: none; text-align: center; background-color:#415689; padding-top:0; padding-left:0%; padding-right:10%; width:100%;   
         color:white; margin:0px; clear: both; position:sticky; top:0; }
li {list-style-type:none; float:right; display:block; background-color: #415689; font-size: 16px; color:white; padding-right:1%;}


li a {list-style-type: none; color:white; text-decoration: none; display:block; padding:2px 0px 2px 10px;  }

#left {float:left; width:15%; border-style:solid; border-color:#ecf2fc; padding:6px;}
#mid {float:left;  max-width:60%; padding:12px;}
#right {width:20%; float:right; background:#ecf2fc; padding:6px; }

.flexible {background-color:gray; display:flex; flex-direction:column;}
.flexible > div {border-style:solid; border-colour:blue;}


}