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

.col, .col-1, .col-2, .col-3, .col-4, .col-6, .col-8, .col-10, .col-12
.col-es-1, .col-es-2, .col-es-3, .col-es-4, .col-es-6, .col-es-8, .com-es-10, .com-es-12, 
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-6, .col-xs-8, .com-xs-10, .com-xs-12, 
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .com-sm-10, .com-sm-12, 
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .com-md-10, .com-md-12, 
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-6, .col-xl-8, .com-xl-10, .com-xl-12, 
.col-xs-auto, .col-sm-auto, .col-md-auto, .col-xl-auto, 
{
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
/*white-space: nowrap;*/
}

.col-1 {
	flex: 0 0 8%;
	max-width: 8%;
}

.col-2 {
	flex: 0 0 16%;
	max-width: 16%;
}

.col-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4 {
	flex: 0 0 33%;
	max-width: 33%;
}

.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-8 {
	flex: 0 0 66%;
	max-width: 66%;
}

.col-10 {
	flex: 0 0 75%;
	max-width: 75%;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media only screen and (max-width: 400px)
{
	.col-es-1 {
		flex: 0 0 8%;
		max-width: 8%;
	}

	.col-es-2 {
		flex: 0 0 16%;
		max-width: 16%;
	}

	.col-es-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-es-4 {
		flex: 0 0 33%;
		max-width: 33%;
	}

	.col-es-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-es-8 {
		flex: 0 0 66%;
		max-width: 66%;
	}

	.col-es-10 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-es-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.col-es-auto
	{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}
@media only screen and (max-width: 576px)
{
	.col-xs-1 {
		flex: 0 0 8%;
		max-width: 8%;
	}

	.col-xs-2 {
		flex: 0 0 16%;
		max-width: 16%;
	}

	.col-xs-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xs-4 {
		flex: 0 0 33%;
		max-width: 33%;
	}

	.col-xs-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-xs-8 {
		flex: 0 0 66%;
		max-width: 66%;
	}

	.col-xs-10 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-xs-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.col-xs-auto
	{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}
@media only screen and (min-width: 576px)
{
	.col-sm-1 {
		flex: 0 0 8%;
		max-width: 8%;
	}

	.col-sm-2 {
		flex: 0 0 16%;
		max-width: 16%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33%;
		max-width: 33%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-8 {
		flex: 0 0 66%;
		max-width: 66%;
	}

	.col-sm-10 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}


	.col-sm-auto
	{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

@media only screen and (min-width: 720px)
{
	.col-md-1 {
		flex: 0 0 8%;
		max-width: 8%;
	}

	.col-md-2 {
		flex: 0 0 16%;
		max-width: 16%;
	}

	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-md-4 {
		flex: 0 0 33%;
		max-width: 33%;
	}

	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-8 {
		flex: 0 0 66%;
		max-width: 66%;
	}

	.col-md-10 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-md-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.col-md-auto
	{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

@media only screen and (min-width: 940px)
{
	.col-xl-1 {
		flex: 0 0 8%;
		max-width: 8%;
	}

	.col-xl-2 {
		flex: 0 0 16%;
		max-width: 16%;
	}

	.col-xl-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xl-4 {
		flex: 0 0 33%;
		max-width: 33%;
	}

	.col-xl-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-xl-8 {
		flex: 0 0 66%;
		max-width: 66%;
	}

	.col-xl-10 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-xl-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}


	.col-xl-auto
	{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}