/* responsiveStyle.css */

/* ensure that all HTML elements have the box-sizing property set to border-box */
* {
  box-sizing: border-box;
}

/* clear floats after rows */
.row::after {
  content: "";
  clear: both;
  display: table;
}

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

/* typography */
html {
  font-family: "Lucida Sans", sans-serif;
}

/* responsive media */
img {
  width: 100%;
  height: auto;
}
video {
  width: 100%;
  height: auto;
}

/* basic layout colors */
header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

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

nav li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  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: #ffffff;
  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: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* Mobile-first: default for phones */
[class*="col-"] {
  width: 100%;
}

/* Tablets (>= 600px) */
@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%; }
}

/* Desktop (>= 768px) */
@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%; }
}