/* 
DH GRID-BASED COLUMNS
This column method the following advantages over the flexbox-based method:
	- partial rows wrap nicely from the left, rather than spacing out awkwardly

Differences/disadvantages of this method over the flexbox method:
	- For single row situations, there's no advantage of using this over the flexbox method; the advantages come when dealing with a multi-row grid
	- IE10/11 do not support CSS grid, so there's a fallback to the flexbox method, which means the last row might be different
*/

/* grid areas require a wrapper; these can be nested, but be aware that there may need to be some adjustments on the padding/margin when nested */
.dhgrid-wrap { display: grid; grid-gap: 1em calc(100% / 60); grid-template-columns: repeat(60, 1fr); min-width:0; }

/* columns - to use, add column class and width class defined below */
.dhgrid { width:auto!important; min-width:0; }
.dhgrid + hr { display: none; } /* only included to allow support for IE10/11 flexbox fallback */

/* remove outer margins from first and last inner elements */
.dhgrid > :first-child { margin-top: 0; }
.dhgrid > :last-child { margin-bottom: 0; }

/* default column style classes - based on 2.65% between columns */
.width-100 { grid-column: span 60; }
.width-90 { grid-column: span 54; }
.width-80 { grid-column: span 48; }
.width-75 { grid-column: span 45; }
.width-70 { grid-column: span 42; }
.width-67 { grid-column: span 40; }
.width-60 { grid-column: span 36; }
.width-50 { grid-column: span 30; }
.width-40 { grid-column: span 24; }
.width-33 { grid-column: span 20; }
.width-30 { grid-column: span 18; }
.width-25 { grid-column: span 15; }
.width-20 { grid-column: span 12; }
.width-17 { grid-column: span 10; }
.width-10 { grid-column: span 6; }


/* use additional class when it's useful to adjust at tablet sizes */
/* might need to adjust the media queries based on site design */
/* 782 based on WP mobile menu flip */
@media only screen and (max-width:782px) {

	.tablet-100 { grid-column: span 60; }
	.tablet-90 { grid-column: span 54; }
	.tablet-80 { grid-column: span 48; }
	.tablet-75 { grid-column: span 45; }
	.tablet-70 { grid-column: span 42; }
	.tablet-67 { grid-column: span 40; }
	.tablet-60 { grid-column: span 36; }
	.tablet-50 { grid-column: span 30; }
	.tablet-40 { grid-column: span 24; }
	.tablet-33 { grid-column: span 20; }
	.tablet-30 { grid-column: span 18; }
	.tablet-25 { grid-column: span 15; }
	.tablet-20 { grid-column: span 12; }
	.tablet-17 { grid-column: span 10; }
	.tablet-10 { grid-column: span 6; }

}

/* use additional class when it's useful to adjust at phone sizes */
/* might need to adjust the media queries based on site design */
/* 568 based on iphone 5 landscape */
@media only screen and (max-width:568px) {

	.phone-100 { grid-column: span 60; }
	.phone-90 { grid-column: span 54; }
	.phone-80 { grid-column: span 48; }
	.phone-75 { grid-column: span 45; }
	.phone-70 { grid-column: span 42; }
	.phone-67 { grid-column: span 40; }
	.phone-60 { grid-column: span 36; }
	.phone-50 { grid-column: span 30; }
	.phone-40 { grid-column: span 24; }
	.phone-33 { grid-column: span 20; }
	.phone-30 { grid-column: span 18; }
	.phone-25 { grid-column: span 15; }
	.phone-20 { grid-column: span 12; }
	.phone-17 { grid-column: span 10; }
	.phone-10 { grid-column: span 6; }

}



/* IE10/11 fixes - due to no CSS Grid support, we use flexbox instead - this means that the last line on IE10/11 won't sort to left nicely */
/* Note that this requires the IE10/11 fixes in the dhwp-cols-flex.css also, which are not repeated here */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

	.dhgrid-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; }
	.dhgrid { box-sizing: border-box; margin-bottom: 1em; }
	.dhgrid + hr { display:flex; width: 100%; border: none; height: 0; margin: 0; padding: 0; }

}

@media screen and (-ms-high-contrast: active) and (max-width: 800px), screen and (-ms-high-contrast: none) and (max-width: 800px) {

}

@media screen and (-ms-high-contrast: active) and (max-width: 800px), screen and (-ms-high-contrast: none) and (max-width: 600px) {

}