/* 
  -----------------------------------
  Quick Grid Magic - version: 1.1.3
  by Project Seven Development
  www.projectseven.com 
  -----------------------------------
*/

/*
--------------------------------------------------------
 Sample User Class Theme: 'blue-theme'
 Enter blue=theme into the User Class box
--------------------------------------------------------
*/

/* Outer Container */
.p7QGM.blue-theme {
	background-color: rgba(69,114,150,0.9);
}
/* Column Boxes */
.p7QGM.blue-theme > .qgm-grid > .qgm-col {
	background-color: rgba(140,188,208,0.9);
	color: #FFF;
}

/*
--------------------------------------------------------
 End of Sample User Class Theme: 'blue-theme'
--------------------------------------------------------
*/


/*
--------------------------------------------------------
 Sample custom styling for individual column
 this will apply custome styling to the 99th column
 in the first QGM instance on the page
--------------------------------------------------------
*/
#qgm-1-99 {
	background-color: #000;
	color: #FFF;
	padding: 10px;;
	border: 1px solid #000;
	border-radius: 6px;
}

/*
--------------------------------------------------------
 Thick Border User Class for columns: 'thick-border'
--------------------------------------------------------
*/
.p7QGM.thick-border > .qgm-grid > .qgm-col {
	border-width: 10px;
}

/*
--------------------------------------------------------
 User Class: 'full-scale' to allow image to fill container width
--------------------------------------------------------
*/
.p7QGM.full-scale .qgm-col img,
img.full-scale {
	height: auto;
	width: 100%;
	max-width: 100%;
}

/*
--------------------------------------------------------
 User Class: 'no-scaling' to prevent scaling for image
--------------------------------------------------------
*/
.p7QGM.no-scale .qgm-col img,
img.no-scaling {
	max-width: none !important;;
}

/*
--------------------------------------------------------
 End User Classes
--------------------------------------------------------
*/

/*
--------------------------------------------------------
 Outer Wrapper (Container) styling
--------------------------------------------------------
*/
.p7QGM {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}
.p7QGM,
.p7QGM * {
	box-sizing: border-box;
}
.p7QGM.qgm-pad {
	padding: 10px;
}

/*
--------------------------------------------------------
 Container Borders
--------------------------------------------------------
*/
.p7QGM.qgm-brd-all {
	border: 1px solid;
}
.p7QGM.qgm-brd-top {
	border-top: 1px solid;
}
.p7QGM.qgm-brd-right {
	border-right: 1px solid;
}
.p7QGM.qgm-brd-btm {
	border-bottom: 1px solid;
}
.p7QGM.qgm-brd-left {
	border-left: 1px solid;
}
.p7QGM.qgm-brd-left-right {
	border-left: 1px solid;
	border-right: 1px solid;
}
.p7QGM.qgm-brd-top-btm {
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.p7QGM.qgm-rounded,
.p7QGM.qgm-rounded img {
	border-radius: 6px;
}
.p7QGM.qgm-shadow,
.qgm-grid.qgm-col-shadow > .qgm-col {
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.6);
}

/*
--------------------------------------------------------
 Container Alignment
--------------------------------------------------------
*/
.p7QGM.qgm-align-left {
	margin: 0 auto 0 0;
}
.p7QGM.qgm-align-center {
	margin: 0 auto;
}
.p7QGM.qgm-align-right {
	margin: 0 0 0 auto;
}

/*
--------------------------------------------------------
 Container Widths
--------------------------------------------------------
*/
.p7QGM.qgm-max-200 {
	max-width: 200px;
}
.p7QGM.qgm-max-300 {
	max-width: 300px;
}
.p7QGM.qgm-max-450 {
	max-width: 450px;
}
.p7QGM.qgm-max-600 {
	max-width: 600px;
}
.p7QGM.qgm-max-800 {
	max-width: 800px;
}
.p7QGM.qgm-max-1200 {
	max-width: 1200px;
}
.p7QGM.qgm-max-1400 {
	max-width: 300px;
}

/*
--------------------------------------------------------
 Grid root
--------------------------------------------------------
*/
.p7QGM .qgm-grid {
	 display: grid;
}
.p7QGM .qgm-grid.qgm-gap {
	 gap: 10px 10px;
}

/*
--------------------------------------------------------
 Content Alignent
--------------------------------------------------------
*/

/* vertical center alignment ---------- */
.p7QGM .qgm-grid.qgm-v-center > .qgm-col {
	display: grid;
	grid-auto-flow: row;
	align-content: center;

}
/* ---------- horizontal center alignment */
.p7QGM .qgm-grid.qgm-h-center > .qgm-col {
	text-align: center;
}
.p7QGM .qgm-grid.qgm-h-center .qgm-col img {
	margin: 0 auto;
}

/* ----------  auto fit -wrapping ---------- */
.p7QGM .qgm-grid.qgm-wrap  {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ---------- overflow-hidden
              on column div to prevent blowout with horiz scrolling widgets ---------- */
.p7QGM .qgm-col.qgm-no-overflow {
	overflow: hidden;
}

/*
--------------------------------------------------------
 Image Scaling
--------------------------------------------------------
*/
.p7QGM .qgm-col img {
	height: auto;
	width: auto;
	max-width: 100%;
}

/*
--------------------------------------------------------
 Row Minimum Height Sizing
--------------------------------------------------------
*/
.p7QGM .qgm-grid.qgm-minh-50 {
	grid-auto-rows: minmax(50px, auto);
}
.p7QGM .qgm-grid.qgm-minh-100 {
	grid-auto-rows: minmax(100px, auto);
}
.p7QGM .qgm-grid.qgm-minh-150 {
	grid-auto-rows: minmax(150px, auto);
}
.p7QGM .qgm-grid.qgm-minh-200 {
	grid-auto-rows: minmax(200px, auto);
}
.p7QGM .qgm-grid.qgm-minh-300 {
	grid-auto-rows: minmax(300px, auto);
}
.p7QGM .qgm-grid.qgm-minh-25v {
	grid-auto-rows: minmax(25vh, auto);
}
.p7QGM .qgm-grid.qgm-minh-50v {
	grid-auto-rows: minmax(50vh, auto);
}
.p7QGM .qgm-grid.qgm-minh-75v {
	grid-auto-rows: minmax(75vh, auto);
}
.p7QGM .qgm-grid.qgm-minh-100v {
	grid-auto-rows: minmax(100vh, auto);
}

/*
--------------------------------------------------------
 Column Borders
--------------------------------------------------------
*/
.qgm-grid.qgm-b-all > .qgm-col { 
	border: 1px solid;
	margin:0 -1px -1px 0;
}
.qgm-grid.qgm-b-top > .qgm-col { 
	border-top: 1px solid;
}
.qgm-grid.qgm-b-right > .qgm-col { 
	border-right: 1px solid;
}
.qgm-grid.qgm-b-btm > .qgm-col { 
	border-bottom: 1px solid;
}
.qgm-grid.qgm-b-left > .qgm-col { 
	border-left: 1px solid;
}
.qgm-grid.qgm-b-left-right > .qgm-col { 
	border-left: 1px solid;
	border-right: 1px solid;
	margin:0 -1px 0 0;
}
.qgm-grid.qgm-b-top-btm > .qgm-col { 
	border-top: 1px solid;
	border-bottom: 1px solid;
	margin:0 0 -1px 0;
}
/* correct margin fix if gap is active */
.qgm-grid.qgm-gap  > .qgm-col {
	margin: 0px 0px 0px 0px !important;
}

/*
--------------------------------------------------------
 Column Styling
--------------------------------------------------------
*/
.qgm-grid .qgm-col {
	padding:0px;
}
.qgm-grid.qgm-col-pad .qgm-col {
	padding: 10px;	
}
.qgm-grid.qgm-col-rounded .qgm-col,
.qgm-grid.qgm-col-rounded .qgm-col img {
	border-radius: 6px;
}

/*
--------------------------------------------------------
 Grid Column Layouts
--------------------------------------------------------
*/
.qgm-grid.qgm-col-1 {
	grid-template-columns: 1fr;
}
.qgm-grid.qgm-col-2 {
	grid-template-columns: repeat(2, 1fr);
}
.qgm-grid.qgm-col-2-2575 {
	grid-template-columns: 1fr 3fr;
}
.qgm-grid.qgm-col-2-4060 {
	grid-template-columns: 2fr 3fr;
}
.qgm-grid.qgm-col-2-7525 {
	grid-template-columns: 3fr 1fr;
}
.qgm-grid.qgm-col-3 {
	grid-template-columns: repeat(3, 1fr);
}
.qgm-grid.qgm-col-3-255025 {
	grid-template-columns: 1fr 2fr 1fr;
}
.qgm-grid.qgm-col-3-202060 {
	grid-template-columns: 1fr 1fr 3fr;
}
.qgm-grid.qgm-col-3-602020 {
	grid-template-columns: 3fr 1fr 1fr;
}
.qgm-grid.qgm-col-4 {
	grid-template-columns: repeat(4, 1fr);
}
.qgm-grid.qgm-col-4-10404010 {
	grid-template-columns: 1fr 4fr 4fr 1fr;
}
.qgm-grid.qgm-col-5 {
	grid-template-columns: repeat(5, 1fr);
}
.qgm-grid.qgm-col-6 {
	grid-template-columns: repeat(6, 1fr);
}
.qgm-grid.qgm-col-7 {
	grid-template-columns: repeat(7, 1fr);
}
.qgm-grid.qgm-col-8 {
	grid-template-columns: repeat(8, 1fr);
}
.qgm-grid.qgm-col-9 {
	grid-template-columns: repeat(9, 1fr);
}
.qgm-grid.qgm-col-10 {
	grid-template-columns: repeat(10, 1fr);
}

/*
--------------------------------------------------------
 Background Colors
--------------------------------------------------------
*/

/* gray */
.p7QGM.qgm-bg-gray,
.qgm-grid.qgm-col-bg-gray > .qgm-col {
	background-color: rgb(134,134,134);
	color: #000;
}
.p7QGM.qgm-bg-gray.qgm-tpn,
.qgm-grid.qgm-col-bg-gray.qgm-col-tpn > .qgm-col {
	background-color: rgba(134,134,134,0.90);
	color: #000;
}
/* black */
.p7QGM.qgm-bg-black,
.qgm-grid.qgm-col-bg-black > .qgm-col {
	background-color: rgb(21,21,21);
	color: #FFF;
}
.p7QGM.qgm-bg-black.qgm-tpn,
.qgm-grid.qgm-col-bg-black.qgm-col-tpn > .qgm-col {
	background-color: rgba(21,21,21,0.90);
	color: #FFF;
}
/* white */
.p7QGM.qgm-bg-white,
.qgm-grid.qgm-col-bg-white > .qgm-col {
	background-color: rgb(255,255,255);
	color: #000;
}
.p7QGM.qgm-bg-white.qgm-tpn,
.qgm-grid.qgm-col-bg-white.qgm-col-tpn > .qgm-col {
	background-color: rgba(255,255,255,0.90);
	color: #000;
}
/* dark-sand */
.p7QGM.qgm-bg-darksand,
.qgm-grid.qgm-col-bg-darksand > .qgm-col {
	background-color: rgb(62,63,58);
	color: #FFF;
}
.p7QGM.qgm-bg-darksand.qgm-tpn,
.qgm-grid.qgm-col-bg-darksand.qgm-col-tpn > .qgm-col {
	background-color: rgba(62,63,58,0.90);
	color: #FFF;
}
/* sand */
.p7QGM.qgm-bg-sand,
.qgm-grid.qgm-col-bg-sand > .qgm-col {
	background-color:rgb(142,140,132);
	color: #FFF;
}
.p7QGM.qgm-bg-sand.qgm-tpn,
.qgm-grid.qgm-col-bg-sand.qgm-col-tpn > .qgm-col {
	background-color:rgba(142,140,132,0.90);
	color: #FFF;
}
/* light-sand */
.p7QGM.qgm-bg-lightsand,
.qgm-grid.qgm-col-bg-lightsand > .qgm-col {
	background-color: rgb(248,245,240);
	color: rgb(62,63,58);
}
.p7QGM.qgm-bg-lightsand.qgm-tpn,
.qgm-grid.qgm-col-bg-lightsand.qgm-col-tpn > .qgm-col {
	background-color: rgba(248,245,240,0.90);
	color: rgb(62,63,58);
}
/* coral */
.p7QGM.qgm-bg-coral,
.qgm-grid.qgm-col-bg-coral > .qgm-col {
	background-color: rgb(240,128,128);
	color: #FFF;
}
.p7QGM.qgm-bg-coral.qgm-tpn,
.qgm-grid.qgm-col-bg-coral.qgm-col-tpn > .qgm-col {
	background-color: rgba(240,128,128,0.90);
	color: #FFF;
}
/* slate */
.p7QGM.qgm-bg-slate,
.qgm-grid.qgm-col-bg-slate > .qgm-col {
	background-color: rgb(58,63,68);
	color: #FFF;
}
.p7QGM.qgm-bg-slate.qgm-tpn,
.qgm-grid.qgm-col-bg-slate.qgm-col-tpn > .qgm-col {
	background-color: rgba(58,63,68,0.90);
	color: #FFF;
}
/* light-slate */
.p7QGM.qgm-bg-lightslate,
.qgm-grid.qgm-col-bg-lightslate > .qgm-col {
	background-color: rgb(233,236,239);
	color: #3a3f44;
}
.p7QGM.qgm-bg-lightslate.qgm-tpn,
.qgm-grid.qgm-col-bg-lightslate.qgm-col-tpn > .qgm-col {
	background-color: rgba(233,236,239,0.90);
	color: #3a3f44;
}
/* deep blue */
.p7QGM.qgm-bg-deepblue,
.qgm-grid.qgm-col-bg-deepblue> .qgm-col {
	background-color: rgb(40,74,108);
	color: #FFF;
}
.p7QGM.qgm-bg-deepblue.qgm-tpn,
.qgm-grid.qgm-col-bg-deepblue.qgm-col-tpn > .qgm-col {
	background-color: rgba(40,74,108,0.90);
	color: #FFF;
}
/* bright blue */
.p7QGM.qgm-bg-brightblue,
.qgm-grid.qgm-col-bg-brightblue> .qgm-col {
	background-color: rgb(42,159,214);
	color: #FFF;
}
.p7QGM.qgm-bg-brightblue.qgm-tpn,
.qgm-grid.qgm-col-bg-brightblue.qgm-col-tpn > .qgm-col {
	background-color: rgba(42,159,214,0.90);
	color: #FFF;
}
/* light yellow */
.p7QGM.qgm-bg-lightyellow,
.qgm-grid.qgm-col-bg-lightyellow > .qgm-col {
	background-color: rgb(252,248,194);
	color: #000;
}
.p7QGM.qgm-bg-lightyellow.qgm-tpn,
.qgm-grid.qgm-col-bg-lightyellow.qgm-col-tpn > .qgm-col {
	background-color: rgba(252,248,194,0.90);
	color: #000;
}
/* yellow */
.p7QGM.qgm-bg-yellow,
.qgm-grid.qgm-col-bg-yellow > .qgm-col {
	background-color: rgb(254, 221, 0);
	color: #000;
}
.p7QGM.qgm-bg-yellow.qgm-tpn,
.qgm-grid.qgm-col-bg-yellow.qgm-col-tpn > .qgm-col {
	background-color: rgba(254,221,0,0.90);
	color: #000;
}
/* green */
.p7QGM.qgm-bg-green,
.qgm-grid.qgm-col-bg-green > .qgm-col {
	background-color: rgb(126,188,89);
	color: #FFF;
}
.p7QGM.qgm-bg-green.qgm-tpn,
.qgm-grid.qgm-col-bg-green.qgm-col-tpn > .qgm-col {
	background-color: rgba(126,188,89,0.90);
	color: #FFF;
}
/* mint */
.p7QGM.qgm-bg-mint,
.qgm-grid.qgm-col-bg-mint > .qgm-col {
	background-color: rgb(76,182,159);
	color: #000;
}
.p7QGM.qgm-bg-mint.qgm-tpn,
.qgm-grid.qgm-col-bg-mint.qgm-col-tpn > .qgm-col {
	background-color: rgba(76,182,159,0.90);
	color: #000;
}
/* blue */
.p7QGM.qgm-bg-blue,
.qgm-grid.qgm-col-bg-blue > .qgm-col {
	background-color: rgb(69,114,150);
	color: #FFF;
}
.p7QGM.qgm-bg-blue.qgm-tpn,
.qgm-grid.qgm-col-bg-blue.qgm-col-tpn > .qgm-col {
	background-color: rgba(69,114,150,0.90);
	color: #FFF;
}
/* red */
.p7QGM.qgm-bg-red,
.qgm-grid.qgm-col-bg-red > .qgm-col {
	background-color: rgb(251,11,11);
	color: #000;
}
.p7QGM.qgm-bg-red.qgm-tpn,
.qgm-grid.qgm-col-bg-red.qgm-col-tpn > .qgm-col {
	background-color: rgba(251,11,11,0.90);
	color: #000;
}
/* skyblue */
.p7QGM.qgm-bg-skyblue,
.qgm-grid.qgm-col-bg-skyblue > .qgm-col {
	background-color: rgb(140,188,208);
	color: #000;
}
.p7QGM.qgm-bg-skyblue.qgm-tpn,
.qgm-grid.qgm-col-bg-skyblue.qgm-col-tpn > .qgm-col {
	background-color: rgba(140,188,208,0.90);
	color: #000;
}
/* silver */
.p7QGM.qgm-bg-silver,
.qgm-grid.qgm-col-bg-silver > .qgm-col {
	background-color: rgb(230,219,201);
	color: #000;
}
.p7QGM.qgm-bg-silver.qgm-tpn,
.qgm-grid.qgm-col-bg-silver.qgm-col-tpn > .qgm-col {
	background-color: rgba(230,219,201,0.90);
	color: #000;
}
/* purple */
.p7QGM.qgm-bg-purple,
.qgm-grid.qgm-col-bg-purple > .qgm-col {
	background-color: rgb(17,28,48);
	color: #FFF;
}
.p7QGM.qgm-bg-purple.qgm-tpn,
.qgm-grid.qgm-col-bg-purple.qgm-col-tpn > .qgm-col {
	background-color: rgba(17,28,48,0.90);
	color: #FFF;
}
/* lavender */
.p7QGM.qgm-bg-lavender,
.qgm-grid.qgm-col-bg-lavender > .qgm-col {
	background-color: rgb(154,77,85);
	color: #FFF;
}
.p7QGM.qgm-bg-lavender.qgm-tpn,
.qgm-grid.qgm-col-bg-lavender.qgm-col-tpn > .qgm-col {
	background-color: rgba(154,77,85,0.90);
	color: #FFF;
}
/* beige */
.p7QGM.qgm-bg-beige,
.qgm-grid.qgm-col-bg-beige > .qgm-col {
	background-color: rgb(231,213,175);
	color: #000;
}
.p7QGM.qgm-bg-beige.qgm-tpn,
.qgm-grid.qgm-col-bg-beige.qgm-col-tpn > .qgm-col {
	background-color: rgba(231,213,175,0.90);
	color: #000;
}
/* wine */
.p7QGM.qgm-bg-wine,
.qgm-grid.qgm-col-bg-wine > .qgm-col {
	background-color: rgb(167,27,27);
	color: #FFF;
}
.p7QGM.qgm-bg-wine.qgm-tpn,
.qgm-grid.qgm-col-bg-wine.qgm-col-tpn > .qgm-col {
	background-color: rgba(167,27,27,0.90);
	color: #FFF;
}
/* forest */
.p7QGM.qgm-bg-forest,
.qgm-grid.qgm-col-bg-forest > .qgm-col {
	background-color: rgb(107,138,85);
	color: #FFF;
}
.p7QGM.qgm-bg-forest.qgm-tpn,
.qgm-grid.qgm-col-bg-forest.qgm-col-tpn > .qgm-col {
	background-color: rgba(107,138,85,0.90);
	color: #FFF;
}
/* mist */
.p7QGM.qgm-bg-mist,
.qgm-grid.qgm-col-bg-mist > .qgm-col {
	background-color: rgb(218,239,217);
	color: #000;
}
.p7QGM.qgm-bg-mist.qgm-tpn,
.qgm-grid.qgm-col-bg-mist.qgm-col-tpn > .qgm-col {
	background-color: rgba(218,239,217,0.90);
	color: #000;
}
/* rust */
.p7QGM.qgm-bg-rust,
.qgm-grid.qgm-col-bg-rust > .qgm-col {
	background-color: rgb(193,67,46);
	color: #FFF;
}
.p7QGM.qgm-bg-rust.qgm-tpn,
.qgm-grid.qgm-col-bg-rust.qgm-col-tpn > .qgm-col {
	background-color: rgba(193,67,46,0.90);
	color: #FFF;
}
/* silverblue */
.p7QGM.qgm-bg-silverblue,
.qgm-grid.qgm-col-bg-silverblue > .qgm-col {
	background-color: rgb(75,103,119);
	color: #FFF;
}
.p7QGM.qgm-bg-silverblue.qgm-tpn,
.qgm-grid.qgm-col-bg-silverblue.qgm-col-tpn > .qgm-col {
	background-color: rgba(75,103,119,0.90);
	color: #FFF;
}
/* gold */
.p7QGM.qgm-bg-gold,
.qgm-grid.qgm-col-bg-gold > .qgm-col {
	background-color: rgb(226,160,71);
	color: #000;
}
.p7QGM.qgm-bg-gold.qgm-tpn,
.qgm-grid.qgm-col-bg-gold.qgm-col-tpn > .qgm-col {
	background-color: rgba(226,160,71,0.90);
	color: #000;
}
/* orange */
.p7QGM.qgm-bg-orange,
.qgm-grid.qgm-col-bg-orange > .qgm-col {
	background-color: rgb(239,118,51);
	color: #FFF;
}
.p7QGM.qgm-bg-orange.qgm-tpn,
.qgm-grid.qgm-col-bg-orange.qgm-col-tpn > .qgm-col {
	background-color: rgba(239,118,51,0.90);
	color: #FFF;
}

/*
--------------------------------------------------------
 Media Query: Phones and narrow windows (screens less than 768px wide)
--------------------------------------------------------
*/
@media only screen and (min-width: 0px) and (max-width: 768px){
	.p7QGM.qgm-resp-1 > .qgm-grid {
		grid-template-columns: 1fr !important;
	}
	.p7QGM.qgm-resp-2 > .qgm-grid {
		grid-template-columns: 1fr 1fr !important;
	}
	.p7QGM.qgm-resp-3 > .qgm-grid {
		grid-template-columns: 1fr 1fr 1fr !important;
	}
	.p7QGM.qgm-resp-4 > .qgm-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}
}