.grid-con{
	width: 100%;
	max-width: 1640px;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	box-sizing: border-box;
}

.grid-con.full-width{
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.grid-con.full-width .grid-row, .grid-con.full-width div[class *= clmn]{
	padding: 0;
}

.grid-row{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.centered{
	justify-content: center;
}

[class *= clmn]
{
	padding: 0 15px;
}

[class *= clmn] [class *= clmn],
[class *= clmn] [class *= grid-row],
[class *= clmn] [class *= grid-con]{
	padding: 0;
}

.clmn-1{
	width: calc(100% / 12);
}

.clmn-2{
	width: calc(100% / 12 * 2);
}

.clmn-3{
	width: calc(100% / 12 * 3);
}

.clmn-4{
	width: calc(100% / 12 * 4);
}

.clmn-5{
	width: calc(100% / 12 * 5);
}

.clmn-6{
	width: calc(100% / 2);
}

.clmn-7{
	width: calc(100% / 12 * 7);
}

.clmn-8{
	width: calc(100% / 12 * 8);
}

.clmn-9{
	width: calc(100% / 12 * 9);
}

.clmn-10{
	width: calc(100% / 12 * 10);
}

.clmn-11{
	width: calc(100% / 12 * 11);
}

.clmn-12{
	width: 100%;
}

@media only screen and (max-width: 980px){
	.clmn-3{
		width: calc(100% / 3);
	}

	.clmn-4{
		width: 50%;
	}

	.clmn-8,
	.clmn-9,
	.clmn-10,
	.clmn-11{
		width: 100%;
	}
}

@media only screen and (max-width: 750px){
	.clmn-3{
		width: 50%;
	}
}

@media only screen and (max-width: 560px){
	.clmn-3{
		width: 100%;
	}

	.clmn-4,
	.clmn-5,
	.clmn-6,
	.clmn-7{
		width: 100%;
	}
}

@media only screen and (max-width: 450px){
	.clmn-1,
	.clmn-2{
		width: 100%;
	}
}