@charset "utf-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	border: 0;
}






/* HTML5 RESET
--------------------------------------------------------------------------------------------- */










/* GENERAL GRID STYLING
--------------------------------------------------------------------------------------------- */
.container, .row {
	display: block;
}

.container {
	margin: 0 auto;
}

.row {
	margin-bottom: 0px; /* Remove or customize this margin when using in actual live website */
}

/* Target below targets all classes containing the word "span" */
[class*="span"] {
	float: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.span {
	
}

.span1 {
	width: 8.3333333333%;
}

.span2 {
	width: 16.6666666666%;
}

.span3 {
	width: 25%;
}

.span4 {
	width: 33.3333333333%;
}

.span5 {
	width: 41.6666666666%;
}

.span6 {
	width: 50%;
	
}

.span7 {
	width: 58.3333333333%;
}

.span8 {
	width: 66.6666666666%;
}


.span9 {
	width: 75%;
}

.span10 {
	width: 83.3333333333%;
}

.span11 {
	width: 91.6666666666%;
}

.span12 {
	width: 100%;
}


/* SPAN STYLING
--------------------------------------------------------------------------------------------- */
[class*="span"] {
	padding: 0px;
	background: rgba(204,204,204,0);
	border: 0px solid rgba(255,255,255,0);
	text-align: center;
	background-clip: padding-box;
}

.span, .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
	float: left;
}






/* TYPOGRAPHY
--------------------------------------------------------------------------------------------- */






/* RESPONSIVE STYLING
--------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
container: {
	width: 750px;
}
}

@media screen and (min-width: 980px) {
container: {
	width: 960px;
}
}

@media screen and (min-width: 1200px) {
container: {
	width: 1170px;
}
}

@media screen and (max-width: 767px) {
[class*="span"] {
	width: 100%;
	float: none;
}
}