.flex-grid,
.flex-view .view-content{
	display:flex;
	flex-wrap:wrap;
	margin: -.75rem;
}
.flex-grid .item,
.flex-view .item{ 
	box-sizing: border-box;
	 -webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	padding: .75rem;
}
.flex-grid.loose,
.flex-view.loose .view-content{
	margin: -2rem;
}
.flex-grid.loose .item,
.flex-view.loose .item{ 
	padding: 2rem;
}
.flex-grid.tight,
.flex-view.tight .view-content{
	margin: -1%;
}
.flex-grid.tight .item,
.flex-view.tight .item{ 
	padding: 1%;
}
.flex-grid.xtight,
.flex-view.xtight .view-content{
	margin: -1px;
}
.flex-grid.xtight .item,
.flex-view.xtight .item{ 
	padding: 1px;
}
.flex-grid.xloose,
.flex-view.xloose .view-content{
	margin: -4rem;
}
.flex-grid.xloose .item,
.flex-view.xloose .item{ 
	padding: 4rem;
}

/* LARGE SCREEN COLUMN SIZES ---------------- */

.flex-grid.lg-1 .item,
.flex-view.lg-1 .item,
.item.lg-1 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.flex-grid.lg-2 .item,
.flex-view.lg-2 .item,
.item.lg-2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.flex-grid.lg-3 .item,
.flex-view.lg-3 .item,
.item.lg-3 {
  -ms-flex-preferred-size: 33.3333%;
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.flex-grid.lg-4 .item,
.flex-view.lg-4 .item,
.item.lg-4 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.flex-grid.lg-5 .item,
.flex-view.lg-5 .item,
.item.lg-5 {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}
.flex-grid.lg-6 .item,
.flex-view.lg-6 .item,
.item.lg-6 {
  -ms-flex-preferred-size: 16.6666%;
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}

/* LAPTOP SCREEN COLUMN SIZES ---------------- */

@media screen and (max-width: 1400px){

.flex-grid.lt-1 .item,
.flex-view.lt-1 .item,
.item.lt-1 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.flex-grid.lt-2 .item,
.flex-view.lt-2 .item,
.item.lt-2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.flex-grid.lt-3 .item,
.flex-view.lt-3 .item,	
.item.lt-3 {
  -ms-flex-preferred-size: 33.3333%;
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.flex-grid.lt-4 .item,
.flex-view.lt-4 .item,	
.item.lt-4 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.flex-grid.lt-5 .item,
.flex-view.lt-5 .item,	
.item.lt-5 {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}
.flex-grid.lt-6 .item,
.flex-view.lt-6 .item,	
.item.lt-6 {
  -ms-flex-preferred-size: 16.6666%;
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}
	
}

/* MEDIUM SCREEN COLUMN SIZES ---------------- */

@media screen and (max-width: 1150px){

.flex-grid.md-1 .item,
.flex-view.md-1 .item,
.item.md-1 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.flex-grid.md-2 .item,
.flex-view.md-2 .item,
.item.md-2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.flex-grid.md-3 .item,
.flex-view.md-3 .item,	
.item.md-3 {
  -ms-flex-preferred-size: 33.3333%;
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.flex-grid.md-4 .item,
.flex-view.md-4 .item,	
.item.md-4 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.flex-grid.md-5 .item,
.flex-view.md-5 .item,	
.item.md-5 {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}
.flex-grid.md-6 .item,
.flex-view.md-6 .item,	
.item.md-6 {
  -ms-flex-preferred-size: 16.6666%;
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}
	
}

/* SMALL SCREEN COLUMN SIZES ---------------- */

@media screen and (max-width: 850px){

.flex-grid.sm-1 .item,
.flex-view.sm-1 .item,	
.item.sm-1 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.flex-grid.sm-2 .item,
.flex-view.sm-2 .item,	
.item.sm-2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.flex-grid.sm-3 .item,
.flex-view.sm-3 .item,	
.item.sm-3 {
  -ms-flex-preferred-size: 33.3333%;
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.flex-grid.sm-4 .item,
.flex-view.sm-4 .item,	
.item.sm-4 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.flex-grid.sm-5 .item,
.flex-view.sm-5 .item,	
.item.lg-5 {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}
.flex-grid.sm-6 .item,
.flex-view.sm-6 .item,	
.item.sm-6 {
  -ms-flex-preferred-size: 16.6666%;
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}
	
}

/* EXTRA SMALL SCREEN COLUMN SIZES ---------------- */

@media screen and (max-width: 550px){

.flex-grid.xs-1 .item,
.flex-view.xs-1 .item,	
.item.xs-1 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}
.flex-grid.xs-2 .item,
.flex-view.xs-2 .item,		
.item.xs-2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
.flex-grid.xs-3 .item,
.flex-view.xs-3 .item,		
.item.xs-3 {
  -ms-flex-preferred-size: 33.3333%;
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.flex-grid.xs-4 .item,
.flex-view.xs-4 .item,		
.item.xs-4 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}
.flex-grid.xs-5 .item,
.flex-view.xs-5 .item,		
.item.xs-5 {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}
.flex-grid.xs-6 .item,
.flex-view.xs-6 .item,		
.item.xs-6 {
  -ms-flex-preferred-size: 16.6666%;
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}
	
}