/*Creating a responsive design layout using the grid view Gary S. Traub, Ph.D.*/

body{
	background:blue;
	margin: 0;						/*browsers have their own margins and padding so this code is to break that default behavior*/
	padding: 0;
}

*{
	box-sizing: border-box;
}

div.box1{
	height: 150px;
	border: 1px solid green;
}

div.box2{
	height: 150px;
	border: 1px solid yellow;
	padding: 20px;
}

[class*="col-"]{
	float: left;
	padding: 10px;
	border: 1px solid green;
}

.row::after{
	comtent: "";
	clear: both;
	display: table;
}

/*Beginning of the grid view set up*/

.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.67%;}
.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%;}
.col-13{width: 20%;}


/*Beginning of the media queries*/
/*For mobile and small devices - tells it that for [hones everything should be 100% */
[class*="col-"]{
	width: 100%;
}

@media only screen and (min-width: 600px){
	/*For tablets*/
	.col-m-1{width: 8.33%;}
	.col-m-2{width: 16.66%;}
	.col-m-3{width: 25%;}
	.col-m-4{width: 33.33%;}
	.col-m-5{width: 41.67%;}
	.col-m-6{width: 50%;}
	.col-m-7{width: 58.33%;}
	.col-m-8{width: 66.66%;}
	.col-m-9{width: 75%;}
	.col-m-10{width: 83.33%;}
	.col-m-11{width: 91.66%;}
	.col-m-12{width: 100%;}
	.col-m-13{width: 20%;}
}

@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.67%;}
	.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%;}
	.col-13{width: 20%;}
}


img{
	max-width:100%;
}