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

@media (max-width: 992px) {
	.gridContainerResponsive {grid-template-columns: 1fr; column-gap:0;} 
}

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

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

@media (max-width: 992px) {
	.gridContainer12col {grid-template-columns: 1fr; column-gap:0;} 
}

/*---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: 992px) {	
.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: 992px) {	
.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:2em; margin-bottom:0 0 1em 0; border-radius:10px; position:relative; }

.grayBox {background-color: var(--light-gray); color:var(--dark-blue);}
.lblueBox {background-color: var(--lighter-blue); color:var(--dark-blue);}

.boxedCol {padding:2em; background-color: var(--light-gray); margin:0 0 1em 0; align-self:start;}
.boxedOutline {padding:1em; border: 2px solid var(--light-gray); margin:1em 0; }

ul.boxedList {font-weight:600;margin-top:20px;color: var(--dark-blue);}
ul.boxedList li {margin-bottom:10px;}

.priceBox {text-align:center; color: var(--dark-blue);}
.priceBox .heading {font-weight:600; font-size:1.2em;}
.priceBox .price, .price {font-weight:600; font-size:1.5em;}

@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;}


/* ---------------------------------------
	SECTIONS
-----------------------------------------*/

/*---TEXT IMAGE---*/
section.textImage {display:grid; row-gap: 1em; column-gap: 2em; grid-template-columns: repeat(12, minmax(0,1fr)); justify-items: start;}

section#first.textImage.textImage {margin:2em 0 2em 0!important;}
section#last.textImage.textImage {margin:2em 0 2em 0!important;}
section.textImage {margin:2em 0; align-items: center;}
section.textImage h4 {padding-bottom:1em; margin-bottom:1em; border-bottom:1px solid var(--light-blue); }

section.textImage div#text {padding:1em 2em;position:relative;}
section.textImage div#image {text-align:center;}
section.textImage div#image img, .image img {border-radius:10px; object-fit:cover; width:100%; height:100%;}

.colorBlock {background-color:var(--light-gray); border-radius:10px;}

p.caption {font-family: var(--serif-font-family); font-size:.8em; margin-bottom:5px!important; }

/*---BLOCK LINKS - REMEMBER TO INCLUDE 2 LINKS IN THE ARTICLE ONE FOR ARROW - ONE FOR BLOCK ---*/

section.textImage a.blockLink, .boxed a.blockLink {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 21;}
section.textImage a.arrow, .boxed a.arrow {position: relative; z-index: 22;}

@media (max-width: 992px) {
	section.textImage {grid-template-columns: 1fr; column-gap:0;} 
	section.textImage div#text {order:1;}
	section.textImage div#image {order:2;}
	

/*---TEXT END---*/