/* 
  -----------------------------------
  Quick Grid Magic and Harmony - extra css, CMH AUG2022
  -----------------------------------
*/
/*
--------------------------------------------------------
 Set font for all body elements and for headings
--------------------------------------------------------
*/
body {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 110%;
}
.hmy-section h1, 
.hmy-section h2, 
.hmy-section h3, 
.hmy-section h4, 
.hmy-section h5 {
	font-family: Alegreya, serif;;
	font-weight: 400;
}
strong, b {font-weight: 500;}

/*
--------------------------------------------------------
 Set font-sizes for various elements
--------------------------------------------------------
*/
.hmy-section h1 {font-size: 200%;}
.hmy-section h2 {font-size: 180%}
.hmy-section h3 {font-size: 155%;}
.hmy-section h4, .hmy-section h5 {font-size: 138%;}

.footer {font-size: 80%;}
.note p {font-size: 95%;
	line-height: 1.4;}
.price {font-size: 18px;
	 font-weight: 500;
}
.price-description {font-size: 12px;
	 font-weight: 40;
	 line-height:: 2.5em;
}
.product-description {font-size: 12px;
	 font-weight: 400;
	 line-height:: 1.1em;
}
/*
--------------------------------------------------------
 Example style rules to change width/height of some cols/rows
      Enter mod-span into the User Class box
--------------------------------------------------------
*/
.mod-span .qgm-grid > .qgm-col:nth-child(1) {
	grid-row: span 2;
}
/*.mod-span .qgm-grid > .qgm-col:nth-child(1) {
	grid-row: span 6;
}
.mod-span .qgm-grid > .qgm-col:nth-child(5) {
	grid-column: span 2;
	grid-row: span 3;
}
.mod-span .qgm-grid > .qgm-col:nth-child(9) {
	grid-column: span 3
}
.mod-span .qgm-grid > .qgm-col:nth-child(20) {
	grid-column: span 5;
}
.mod-span .qgm-grid > .qgm-col:nth-child(23) {
	grid-row: span 3;
}*/

.colspan-2 .qgm-grid > .qgm-col:nth-child(5){
    grid-column: span 2;
}
.colspan-2-1 .qgm-grid > .qgm-col:nth-child(1){
    grid-column: span 2;
}
.colspan-2-1 .qgm-grid > .qgm-col:nth-child(4){
    grid-column: span 2;
}
.blue-box .qgm-grid > .qgm-col:nth-child(2){
    background-color: rgb(92,143,160);
    color: #e3f2fd;
}

h1.light {
	font-family: Alegreya, serif;
	font-weight: bold;
	font-size: 2.5em;
	color: #233656;
}

h3.hdg1 {
	font-family: Alegreya, serif;
	font-weight: bold;
	font-size: 2em;
	color: #666699;
}

/*
--------------------------------------------------------
 Example style rules to change colour of some cols/rows
      Enter spearmint into the User Class box
	    and set both color boxes to none
	   (any name can be used)
--------------------------------------------------------
*/
/*.p7QGM.spearmint {
	background-color: #d9ffdc;
	color: #34bd3e;
}
.p7QGM.spearmint.qgm-pad {
    padding: 15px;
}
.p7QGM.spearmint > .qgm-grid > .qgm-col {
	background-color: #ceefe4;
	color: #1c6121;
	border-color: #34bd3e;
}
.p7QGM.spearmint .qgm-grid.qgm-gap {
    gap: 6px 10px;
}*/
.p7QGM.bord-blue > .qgm-grid > .qgm-col {
	/*background-color: #CCCCCC;*/
	color: #1c6121;
	border-color: #6699FF;
}
/*
--------------------------------------------------------
 For small screens, undo the altered span
     (width only. Do not need for changed height)
--------------------------------------------------------
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
  .qgm-grid > .qgm-col { 
      grid-column: span 1 !important;
  }
}

@media only screen and (min-width: 0px) and (max-width: 768px){
      .colspan-upd > .qgm-grid > .qgm-col:nth-child(1){
            grid-column: span 1 !important;
     }
}