/* ---------------------------------------
	RESPONSIVE GRID
-----------------------------------------*/
.gridContainerResponsive {display:grid; grid-gap:1em; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-items: start;}

/* ---------------------------------------
	FIXED 12 COLUMN GRID
-----------------------------------------*/

.gridContainer12col {display:grid; row-gap: 1em; column-gap: 1em; grid-template-columns: repeat(12, minmax(0,1fr)); justify-items: start;}

@media (max-width: 767px) {
	.gridContainer12col {grid-template-columns: 1fr;} 
}

/*---GRID ITEMS---*/

.gridItem {padding:0; width:100%;}


/*---GRID COLUMNS---*/

.colSpan2 {grid-column: span 2;}
.colSpan3 {grid-column: span 3;}
.colSpan4 {grid-column: span 4;}
.colSpan5 {grid-column: span 5;}
.colSpan6 {grid-column: span 6;}
.colSpan7 {grid-column: span 7;}
.colSpan8 {grid-column: span 8;}
.colSpan9 {grid-column: span 9;}
.colSpan10 {grid-column: span 10;}
.colSpan11 {grid-column: span 11;}
.colSpan12 {grid-column: span 12;}

@media (max-width: 767px) {	
.colSpan2, .colSpan3, .colSpan4, .colSpan5, .colSpan6, .colSpan7, .colSpan8, .colSpan9, .colSpan10, .colSpan11 {grid-column: span 12;}
}

/*---GRID ROWS---*/

.rowSpan2 {grid-row: span 2;}
.rowSpan3 {grid-row: span 3;}
.rowSpan4 {grid-row: span 4;}
.rowSpan5 {grid-row: span 5;}
.rowSpan6 {grid-row: span 6;}
.rowSpan7 {grid-row: span 7;}
.rowSpan8 {grid-row: span 8;}
.rowSpan9 {grid-row: span 9;}
.rowSpan10 {grid-row: span 10;}
.rowSpan11 {grid-row: span 11;}
.rowSpan12 {grid-row: span 12;}

@media (max-width: 767px) {	
.rowSpan2, .rowSpan3, .rowSpan4, .rowSpan5, .rowSpan6, .rowSpan7, .rowSpan8, .rowSpan9, .rowSpan10, .rowSpan11, .rowSpan12 {grid-row: span 1;}
}

/*---GRID ROWS---*/

.gridItem.row2 {grid-row: 2;}

/*---GRID ROWS---*/


/*---STLES AND NESTED ALIGNMENT---*/

.boxed {padding:1em; background-color: var(--light-gray); margin:1em 0; }
.boxedOutline {padding:1em; border: 2px solid var(--light-green); margin:1em 0; }

@media (min-width: 992px) {	
.nestedGrid {display:grid;}
.alignEnd {align-self: end;}
}


/* ---------------------------------------
	FLEX
-----------------------------------------*/

/*---Use this to force a panel full width outside of a container---*/
.forceFullWidthWrap {
	background:var(--light-gray); 
	width: 100vw;
 	position: relative;
 	margin-left: -50vw;
 	left: 50%;}
/*---Force Width END ---*/
	
.flexContainer{
	display: flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	gap:1em;
	/*padding:1em;*/
}

@media (max-width: 767px) {.flexContainer {flex-direction:column;}}


.flexCol {flex:1;}
.flexCol.borderedPanel {border:2px solid var(--light-gray); padding:1em; border-radius: 0px 20px;}

/* ---------------------------------------
	BOOTSTRAP 2 LEGACY LAYOUT TO FLEX
-----------------------------------------*/
.row {
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 1em;
	margin:0;
}

@media (max-width: 767px) {.row {flex-direction:column;}}

.span3, .span4, .span6, .span8, .span9 {

	flex: 1 ;
}

.span2, .span3 {flex: 1 1 0;}

.span4, .span5 {flex: 2 1 0;}

.span7 .span8, .span9, .span10 {flex: 3 1 0;}

.pull-left.item-image {
  padding-right: 10px;
}

.pull-left {
  float: left;
}