/* responsiveStyle.css */
* {
	box-sizing: border-box;
}
/*The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other
elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:*/
.row::after {
	content: "";
	clear: both;
	display: table;
}
[class*="col-"] {
	float: left;
	padding: 15px;
}
img {
	width: 100%;
	height: auto;
}
video {
	width: 100%;
	height: auto;
}
html {
	font-family: "Lucida Sans", sans-serif;
}
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;
}
* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* 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%;}
}