/* 
DH FLEXBOX-BASED COLUMNS
This column method the following advantages over the float-based method:
	- <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

Differences/disadvantages of this method over the float method:
	- unlike the float method, this requires a container
	- because rows aren't explicitly defined with <br>, you may have to be careful when using 10% columns, especially in multiple rows:
		- flex will attempt to fit anything that doesn't add up to more than 100% flex-basis
		- that means that starting a row with a small column, could end up causing that column to appear in the previous row and mess up the spacing
		- if you want, you can add a <hr> to force a break. However, use sparingly, since this is a bit hacky

*/

/* flexbox 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 */
.dhflex-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; }

/* columns - to use, add column class and width class defined below */
.dhflex { box-sizing: border-box; margin: 0 0 1em 0; overflow: hidden; }
.dhflex + hr { width: 100%; border:none; height:0; margin:0; padding:0; }

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


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

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

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

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


/* 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 { flex-basis: 100%; }

	.tablet-90 { flex-basis: 89.833%; }
	.tablet-80 { flex-basis: 79.666%; }
	.tablet-70 { flex-basis: 69.5%; }
	.tablet-60 { flex-basis: 59.333%; }
	.tablet-40 { flex-basis: 39%; }
	.tablet-30 { flex-basis: 28.833%; }
	.tablet-20 { flex-basis: 18.666%; }
	.tablet-10 { flex-basis: 8.5%; }

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

	.tablet-75 { flex-basis: 74.583%; }
	.tablet-50 { flex-basis: 49.166%; }
	.tablet-25 { flex-basis: 23.75%; }

}

/* 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 { flex-basis: 100%; }

	.phone-90 { flex-basis: 89.833%; }
	.phone-80 { flex-basis: 79.666%; }
	.phone-70 { flex-basis: 69.5%; }
	.phone-60 { flex-basis: 59.333%; }
	.phone-40 { flex-basis: 39%; }
	.phone-30 { flex-basis: 28.833%; }
	.phone-20 { flex-basis: 18.666%; }
	.phone-10 { flex-basis: 8.5%; }

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

	.phone-75 { flex-basis: 74.583%; }
	.phone-50 { flex-basis: 49.166%; }
	.phone-25 { flex-basis: 23.75%; }

}


/* IE10/11 fixes - due to broken box model */
/* Without this fix, adding padding to a column would cause the box to expand and eventually break the row */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

	.width-100 { max-width:100%; }

	.width-90 { max-width: 89.833%; }
	.width-80 { max-width: 79.666%; }
	.width-70 { max-width: 69.5%; }
	.width-60 { max-width: 59.333%; }
	.width-40 { max-width: 39%; }
	.width-30 { max-width: 28.833%; }
	.width-20 { max-width: 18.666%; }
	.width-10 { max-width: 8.5%; }

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

	.width-75 { max-width: 74.583%; }
	.width-50 { max-width: 49.166%; }
	.width-25 { max-width: 23.75%; }

}

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

	.tablet-100 { max-width: 100%; }

	.tablet-90 { max-width: 89.833%; }
	.tablet-80 { max-width: 79.666%; }
	.tablet-70 { max-width: 69.5%; }
	.tablet-60 { max-width: 59.333%; }
	.tablet-40 { max-width: 39%; }
	.tablet-30 { max-width: 28.833%; }
	.tablet-20 { max-width: 18.666%; }
	.tablet-10 { max-width: 8.5%; }

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

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

}

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

	.phone-100 { max-width: 100%; }

	.phone-90 { max-width: 89.833%; }
	.phone-80 { max-width: 79.666%; }
	.phone-70 { max-width: 69.5%; }
	.phone-60 { max-width: 59.333%; }
	.phone-40 { max-width: 39%; }
	.phone-30 { max-width: 28.833%; }
	.phone-20 { max-width: 18.666%; }
	.phone-10 { max-width: 8.5%; }

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

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

}