* {   box-sizing: border-box; }

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

[class*="col-"] {   float: left;   padding: 15px; }

html {   font-family: "Lucida Sans", sans-serif;  }
img{max-width: 100%; // height: auto; 
}
.header {   background-color: #2c3446;   color: #c4ff46;   padding: 15px; }
.notes1 {
  font-size:30px;                                
  color:rgb(159, 34, 34);
  padding: 2px 2px;
   }

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

.menu li {   padding: 8px;   margin-bottom: 7px;    background-color: #33b6e5a3;    color: navy; /* #33b6e5a3; */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

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

.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);  }

.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; }

/* For desktop: */
.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%;}

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