/*- - - - - 100% height + centred content - - - - - */


* 				  {padding: 0; margin: 0;}
html, body  	  {height: 100%;}
body 			  {height: 100%; display: flex; justify-content: center !important; align-items: flex-start;}
#container  	  {min-height: 100vh; margin: 0 auto !important; overflow-x: hidden !important;}
* html #container {height: 100vh;}
#wrapper 		  {margin: 0 auto !important;}


/* - - - - - Column Control  - - - - - */


	/* Comment out these styles when not needed  
#wrapper 			{background-color: blue;}
.grid-container 	{background-color: chocolate;}
.grid-container > * {background-color: yellowgreen;} 

.grid-wrapper {width: 100%; display: block !important; min-height: 300px; background-color: yellow;} <-- DON'T NEED THIS ???

   /* Comment out these styles when not needed */



.grid-container  	{display: grid; grid-template-columns: repeat(12, 1fr);}


.grid-view {min-height: 200px !important;}


/* Resp */
.grid-6 .item1 {grid-column-start: 1; grid-column-end: 7;}
.grid-6 .item2 {grid-column-start: 7; grid-column-end: 13;}


.grid-12 .item1 {grid-column-start: 1; grid-column-end: 13;}

/* Resp */
.grid-2-8-2 .item1 {grid-column-start: 1; grid-column-end: 3;}
.grid-2-8-2 .item2 {grid-column-start: 3; grid-column-end: 11;}
.grid-2-8-2 .item3 {grid-column-start: 11; grid-column-end: 13;}

/* Resp */
.grid-3-6-3 .item1 {grid-column-start: 1; grid-column-end: 4;}
.grid-3-6-3 .item2 {grid-column-start: 4; grid-column-end: 10;}
.grid-3-6-3 .item3 {grid-column-start: 10; grid-column-end: 13;}


/* Resp */
.grid-1-10-1 .item1 {grid-column-start: 1; grid-column-end: 2;}
.grid-1-10-1 .item2 {grid-column-start: 2; grid-column-end: 12;}
.grid-1-10-1 .item3 {grid-column-start: 12; grid-column-end: 13;}


/* Resp */
.grid-1-4-2-4-1 .item1 {grid-column-start: 1; grid-column-end: 2;}
.grid-1-4-2-4-1 .item2 {grid-column-start: 2; grid-column-end: 6;}
.grid-1-4-2-4-1 .item3 {grid-column-start: 6; grid-column-end: 8;}
.grid-1-4-2-4-1 .item4 {grid-column-start: 8; grid-column-end: 12;}
.grid-1-4-2-4-1 .item5 {grid-column-start: 12; grid-column-end: 13;}


/* Resp */
.grid-3-9 .item1 {grid-column-start: 1; grid-column-end: 4;}
.grid-3-9 .item2 {grid-column-start: 4; grid-column-end: 13;}


/* Resp */
.grid-9-3 .item1 {grid-column-start: 1; grid-column-end: 10;}
.grid-9-3 .item2 {grid-column-start: 10; grid-column-end: 13;}



/* Small + Medium ----------- 
#container {background-color: blue;} 
*/

@media only screen 
and (min-width : 0px) 
and (max-width : 767px) {

	
#container	    {width: 100% !important;}
.fullWrap	    {padding: 0 24px 0 24px;}	
.grid-container	{min-width: calc(0px - 48px); max-width: calc(767px - 48px); grid-gap: 16px;}
	
footer .grid-container {min-width:0px; max-width: 767px;} /* Footer = Full bleed & zero margins */				
footer 			       {margin-left: -24px !important; width: calc(100% + 48px)!important;}
	

	
/* Resp */
.grid-6 .item1,
.grid-6 .item2    {grid-column-start: 1; grid-column-end: 13;}
	
	
/* Resp */
.grid-2-8-2 .item1,
.grid-2-8-2 .item2,
.grid-2-8-2 .item3 {grid-column-start: 1; grid-column-end: 13;}
	
	
/* Resp */	
.grid-3-6-3 .item1,
.grid-3-6-3 .item2,
.grid-3-6-3 .item3 {grid-column-start: 1; grid-column-end: 13;}

	
/* Resp */
.grid-1-10-1 .item1,
.grid-1-10-1 .item2,
.grid-1-10-1 .item3 {grid-column-start: 1; grid-column-end: 13;}

	
/* Resp */	
.grid-3-9 .item1,
.grid-3-9 .item2 {grid-column-start: 1; grid-column-end: 13;}

	
/* Resp */	
.grid-9-3 .item1,
.grid-9-3 .item2 {grid-column-start: 1; grid-column-end: 13;}

	
	
}




/*  Large ----------- 
#container   {background-color: yellow;}	
*/

@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
	

	
#container	    {width: 100% !important;}
.fullWrap	    {padding: 0 48px 0 48px;}
.grid-container	{min-width: calc(768px - 96px); max-width: calc(1023px - 96px); grid-gap: 24px;}
	
footer .grid-container {min-width: 768px; max-width: 1023px;} /* Footer = Full bleed & zero margins */		
footer 			       {margin-left: -48px !important; width: calc(100% + 96px)!important;}
		
	
/* Resp */
.grid-2-8-2 .item1 {grid-column-start: 1; grid-column-end: 2;}
.grid-2-8-2 .item2 {grid-column-start: 2; grid-column-end: 12;}
.grid-2-8-2 .item3 {grid-column-start: 12; grid-column-end: 13;}
	
/* Resp */
.grid-3-6-3 .item1 {grid-column-start: 1; grid-column-end: 3;}
.grid-3-6-3 .item2 {grid-column-start: 3; grid-column-end: 11;}
.grid-3-6-3 .item3 {grid-column-start: 11; grid-column-end: 13;}	
	

/* Resp */
.grid-1-10-1 .item1,
.grid-1-10-1 .item2,
.grid-1-10-1 .item3 {grid-column-start: 1; grid-column-end: 13;}	
	
	
}



/* X-Large----------- 
#container {background-color: forestgreen;}	
*/

@media only screen 
and (min-width : 1024px)
and (max-width : 1279px) {
	
	
#container	    {width: 100% !important;}
.fullWrap	    {padding: 0 48px 0 48px;}
.grid-container	{min-width: calc(1024px - 96px); max-width: calc(1279px - 96px); grid-gap: 32px;}

footer .grid-container {min-width: 1024px; max-width: 1279px;} /* Footer = Full bleed & zero margins */		
footer 			       {margin-left: -48px !important; width: calc(100% + 96px)!important;}

	
/* Resp */
.grid-2-8-2 .item1 {grid-column-start: 1; grid-column-end: 2;}
.grid-2-8-2 .item2 {grid-column-start: 2; grid-column-end: 12;}
.grid-2-8-2 .item3 {grid-column-start: 12; grid-column-end: 13;}	
	

/* Resp */
.grid-1-10-1 .item1 {grid-column-start: 1; grid-column-end: 2;}
.grid-1-10-1 .item2 {grid-column-start: 2; grid-column-end: 12;}
.grid-1-10-1 .item3 {grid-column-start: 12; grid-column-end: 13;}		
	
}


/* XX-Large----------- 
#container	{background-color: coral;}	
*/

@media only screen 
and (min-width : 1280px)
and (max-width : 1599px)	{
	
	
#container		  {width: 100% !important; }
.fullWrap		  {padding: 0 64px 0 64px;}
.grid-container	  {min-width: calc(1280px - 128px); max-width: calc(1599px - 128px); grid-gap: 32px;}

footer .grid-container {min-width: 1280px; max-width: 1599px;} /* Footer = Full bleed & zero margins */		
footer 			       {margin-left: -64px !important; width: calc(100% + 128px) !important;}

}


/* XXX-Large----------- 
#container  {background-color: orchid ;}
*/

@media only screen 
and (min-width : 1600px)
	{
 	
#container  	  {width: 100% !important;}		
.fullWrap 		  {padding: 0px;}		
.grid-container   {width: calc(1600px - 128px); grid-gap: 32px; margin: 0 auto !important;}

footer .grid-container {width: 1600px !important;} /* Footer = Full bleed & zero margins */		
		
}