* { box-sizing: border-box; }
.row::after { content: ""; clear: both; display: table; }
[class*="col-"] { float: left; padding: 15px; }
html { font-family: "Lucida Sans", sans-serif; }
img, video { width: 100%; height: auto; }
header { background-color: #9933cc; color: #fff; padding: 15px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
nav li:hover { background-color: #0099cc; }
aside { background-color: #33b5e5; padding: 15px; color: #fff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
footer { background-color: #0099cc; color: #fff; text-align: center; font-size: 12px; padding: 15px; }
[class*="col-"] { width: 100%; }
@media only screen and (min-width: 600px) { 
  .col-s-1{width:8.33%}.col-s-2{width:16.66%}.col-s-3{width:25%}.col-s-4{width:33.33%}.col-s-5{width:41.66%}.col-s-6{width:50%}.col-s-7{width:58.33%}.col-s-8{width:66.66%}.col-s-9{width:75%}.col-s-10{width:83.33%}.col-s-11{width:91.66%}.col-s-12{width:100%} 
}
@media only screen and (min-width: 768px) { 
  .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%} 
}