/*

   This used to be a 960 pixel grid.
   Now it just contains the few classes that are still used.
   It's been adjusted so that it is responsive and percentage-based.

/*

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
   box-sizing: border-box;
   padding-left: var(--main-side-gutter); /* was 15 px */
   padding-right: var(--main-side-gutter);
   width:100%; 
}


/* Grid >> Global
----------------------------------------------------------------------------------------------------*/


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_6 {
	display:inline;
	float: left;
	position: relative;
   /*
	padding-left: 10px;
	padding-right: 10px;
   */
   box-sizing: border-box;
}



/* Grid >> 12 Columns 
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_3 {
	width:25%;
}

.container_12 .grid_4 {
	width:33%;
}

.container_12 .grid_6 {
	width:50%;
}

.container_12 .grid_12 {
   display: flex;
   gap: var(--column-gap);
}
.container_12 .grid_12 > div {
   flex: 1;
}




/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.gridclear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}