* {   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-image: linear-gradient( #4f0b057b, #420802fa  );    color: #c4ff46;   padding: 15px;  } /*  background-color: #5e0d05;  #2c3446; */
.h1 { background-image: linear-gradient( #4f0b057b, #420802fa  );    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-image: radial-gradient( rgba(84, 104, 122, 0.315), rgba(255, 166, 0, 0.332)  );  
       color: black; /* #33b6e5a3; #ff8000; */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  }

.menu li:hover { background-image: radial-gradient(  #ff8000,#4f0b05  ); color: beige;}
.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-image: radial-gradient(  #ff8000,#4f0b05  );
     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: */