* {   box-sizing: border-box; }

.row::after { content: "";  clear: both;  display: block; }

[class*="col-"] {   float: left;   padding: 5px; }
.col-6{padding-left: 12px;}
html {   font-family: "Lucida Sans", sans-serif;  }
img{  max-width: 100%; height: auto; }
.header {   background-color: #2c3446;   color: #c4ff46;   padding: 15px; }

.menu ul {   list-style-type: none;   margin: 0;   padding: 0; }

.menu li { padding-left: 15px; ;  padding-top: 7px;  margin-bottom: 7px;    background-color: #33b6e52b;    color: navy;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
  font-size: 15px; }

.menu li:hover {  background-color: #0099cc;  }

.dk li { float: right;  padding: 1px;   margin-bottom: 1px;    background-color: #33b6e5a3;    color: navy;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
align-self: flex-end;
}

.aside { background-color: #33b6e528;  padding: 2px;  color: #ec0c0c;  text-align: center;  font-size: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  }

.notes1 {
  font-size:32px;                                
  color:rgb(159, 34, 34);
  padding: 2px 2px;
   }

.footer { background-color: #363e4f;  color: whitesmoke;  text-align: center;  font-size: 12px;  padding: 6px; }

.content-navy {  color: navy  ;}

.hide {   display: none; }
.myDIV:hover + .hide {   display: block;
  color: green; }

.col-1 {width: 10%;  }  /* background-color: pink;*/ 
.col-2 {width: 20%;  }
.col-3 {width: 21.66%;  }
.col-4 {width: 33.33%;  }
.col-5 {width: 41.66%;  }  
.col-6 {width: 59%; }
.col-7 {width: 59.33%;  }
.col-8 {width: 61.66%;  }
.col-9 {width: 75%;  }
.col-10 {width: 83.33%;  } 
.col-11 {width: 91.66%;  }
.col-12 {width: 100%;  }

@media only screen and (max-width: 768px) { [class*="col-"] { width: 100%; }  }    /* For mobile phones: */