/* GRID ARCHITECTURE */

.flex-grid {
	display: flex;
	flex-wrap: wrap;
}

.flex-grid .grid-cell {
	margin-bottom: 10px;
}

.flex-grid .grid-cell .article-block,
.flex-grid .grid-cell .whiteboard {
	height: 100%;
}

.grid-pad {
	padding: 20px;
}

@media (min-width: 577px) {
	.grid-pad {
		padding: 30px;
	}
}

@media (min-width: 1025px) {
	.grid-pad {
		padding: 35px;
	}
}

.grid-pad h1:first-child,
.grid-pad h2:first-child,
.grid-pad h3:first-child,
.grid-pad h4:first-child,
.grid-pad h5:first-child,
.grid-pad h6:first-child {
	margin-top: 0;
}

.grid-pad-light {
	padding: 10px;
}

.grid-pad-light h1:first-child,
.grid-pad-light h2:first-child,
.grid-pad-light h3:first-child,
.grid-pad-light h4:first-child,
.grid-pad-light h5:first-child,
.grid-pad-light h6:first-child {
	margin-top: 0;
}

@media (min-width: 577px) {
	.grid-pad-light {
		padding: 20px;
	}
}

@media (min-width: 1025px) {
	.grid-pad-light {
		padding: 25px;
	}
}

.grid-pad-header {
	padding: 0;
}

@media (min-width: 577px) {
	.grid-pad-header {
		padding: 0 30px;
	}
}

@media (min-width: 1025px) {
	.grid-pad-header {
		padding: 0 35px;
	}
}

.grid-row,
.row-fluid {
	letter-spacing: -0.31em;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 577px) {
	.grid-row,
	.row-fluid {
		margin-left: -5px;
		margin-right: -5px;
	}
}

@media (min-width: 1025px) {
	.grid-row,
	.row-fluid {
		margin-left: -5px;
		margin-right: -5px;
	}
}

.grid-cell,
.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	padding: 0;
}

@media (min-width: 577px) {
	.grid-cell,
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		padding: 0 5px;
	}
}

@media (min-width: 1025px) {
	.grid-cell,
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		padding: 0 5px;
	}
}

.cell-2of12 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-2of12 {
		width: 33.3333333%;
	}
}

@media (min-width: 1025px) {
	.cell-2of12 {
		width: 16.6666666%;
	}
}

.cell-3of12 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-3of12 {
		width: 50%;
	}
}

@media (min-width: 1025px) {
	.cell-3of12 {
		width: 25%;
	}
}

.cell-4of12 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-4of12 {
		width: 33.3333333%;
	}
}

.cell-5of12 {
	width: 100%;
}

@media (min-width: 1025px) {
	.cell-5of12 {
		width: 41.6666666%;
	}
}

.cell-6of12,
.span6 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-6of12,
	.span6 {
		width: 50%;
	}
	.cell-6of12.parent,
	.span6.parent {
		width: 100%;
	}
}

@media (min-width: 1025px) {
	.cell-6of12,
	.span6 {
		width: 50%;
	}
	.cell-6of12.parent,
	.span6.parent {
		width: 50%;
	}
}

.cell-7of12 {
	width: 100%;
}

@media (min-width: 1025px) {
	.cell-7of12 {
		width: 58.3333333%;
	}
}

.cell-8of12 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-8of12 {
		width: 66.6666666%;
	}
}

.cell-9of12 {
	width: 100%;
}

@media (min-width: 577px) {
	.cell-9of12 {
		width: 50%;
	}
}

@media (min-width: 1025px) {
	.cell-9of12 {
		width: 75%;
	}
}

.cell-12of12 {
	width: 100%;
}

#addcustomer .grid-cell {
    vertical-align: middle;
}