/* 
DH FLOAT-BASED COLUMNS
This should seldom be used and considered deprecated. Instead use flexbox-based columns, which have the following advantages:
	- <br> isn't necessary to separate rows and determine margins
	- matchHeight JS isn't necessary, since all columns stretch vertically to fit the size of the tallest one
	- flexbox is far better at converting to different widths for responsive

One advantage of this method over the flex method is that it doesn't require a container to work.
*/


/* columns - to use, add column class and width class defined below */
.dhcolumn { float: left; box-sizing: border-box; margin: 0 0 1em 0; vertical-align: top; }
.dhcolumn + .dhcolumn { margin-left: calc(100% / 60); }

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

/* can use a <br> tag to separate column rows */
.dhcolumn + br,
.dhcolumn + p { clear: left; }

/* default column style classes - based on 2.65% between columns */
.width-100 { width:100%; }

.width-90 { width: 89.833%; }
.width-80 { width: 79.666%; }
.width-70 { width: 69.5%; }
.width-60 { width: 59.333%; }
.width-40 { width: 39%; }
.width-30 { width: 28.833%; }	/* same process as width-20 */
.width-20 { width: 18.666%; }	/* 2 width-10 columns + 1 grid-gap (100%/60) */
.width-10 { width: 8.5%; }		/* 10% - (100%/60 * 9 / 10) -- determined based on margin-left (100%/60) */

.width-67 { width: 66.108%; }
.width-33 { width: 32.220%; }	/* same process as width-20, but using width-17 as base */
.width-17 { width: 15.277%; }	/* 16.666% - (100%/60 * 5 / 6) -- determined based on margin-left */

.width-75 { width: 74.583%; }
.width-50 { width: 49.166%; }	/* same process as width-20, but using width-25 as base */
.width-25 { width: 23.75%; }	/* 25% - (100%/60 * 3 / 4) -- determined based on margin-left */


/* 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) {

	/* anything can be converted into a 100% column (the margin is removed) */
	.tablet-100 { width: 100%; }
	.dhcolumn.tablet-100 { margin-left: 0; }

	/* corrects for new margins due to rows of 3, 4, 5 or 6 becoming rows of 2 (note that <br> will still cause a row break, so conversion may not be perfect) */
	.tablet-50 { width: 49.166%; }
	.dhcolumn.tablet-50:nth-of-type(2n + 0) { margin-left: 0; }

	/* intended to convert 30/70, 25/75, 20/80, 10/90 columns to wider small column (existing <br> row breaks still apply) */
	.tablet-90 { width: 89.833%; }
	.tablet-80 { width: 79.666%; }
	.tablet-70 { width: 69.5%; }
	.tablet-60 { width: 59.333%; }
	.tablet-40 { width: 39%; }
	.tablet-30 { width: 28.833%; }
	.tablet-20 { width: 18.666%; }
	.tablet-10 { width: 8.5%; }

	.tablet-67 { width: 66.108%; }
	.tablet-33 { width: 32.220%; }
	.tablet-17 { width: 15.277%; }

	.tablet-75 { width: 74.583%; }
	.tablet-25 { width: 23.75%; }

	/* corrects for new margins due to rows of 4, 5 or 6 becoming rows of 3 (note that <br> will still cause a row break, so conversion may not be perfect) */
	.dhcolumn.tablet-33:nth-of-type(4n + 0) { margin-left: 0; }

}

/* 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) {
	/* anything can be converted into a 100% column (the margin is removed) */
	.phone-100 { width: 100%; }
	.dhcolumn.phone-100 { margin-left: 0; }

	/* corrects for new margins due to rows of 3, 4, 5 or 6 becoming rows of 2 (note that <br> will still cause a row break, so conversion may not be perfect) */
	.phone-50 { width: 49.166%; }
	.dhcolumn.phone-50:nth-of-type(2n + 0) { margin-left: 0; }

	/* intended to convert 30/70, 25/75, 20/80, 10/90 columns to wider small column (existing <br> row breaks still apply) */
	.phone-90 { width: 89.833%; }
	.phone-80 { width: 79.666%; }
	.phone-70 { width: 69.5%; }
	.phone-60 { width: 59.333%; }
	.phone-40 { width: 39%; }
	.phone-30 { width: 28.833%; }
	.phone-20 { width: 18.666%; }
	.phone-10 { width: 8.5%; }

	.phone-67 { width: 66.108%; }
	.phone-33 { width: 32.220%; }
	.phone-17 { width: 15.277%; }

	.phone-75 { width: 74.583%; }
	.phone-25 { width: 23.75%; }

	/* corrects for new margins due to rows of 4, 5 or 6 becoming rows of 3 (note that <br> will still cause a row break, so conversion may not be perfect) */
	.dhcolumn.phone-33:nth-of-type(4n + 0) { margin-left: 0; }

}