* {   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; }

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

.menu li { padding-left: 18px; ;  padding: 4px;   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); }

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

.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: 10%;}
.col-2 {width: 20%;}
.col-3 {width: 30%;}
.col-4 {width: 40%;}
.col-5 {width: 50%;}
.col-6 {width: 60%;}
.col-7 {width: 70%;}
.col-8 {width: 80%;}
.col-9 {width: 90%;}
.col-10 {width: 100%;}

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