html {box-sizing: border-box; }
*, 
*:before, 
*:after {box-sizing: inherit;}

.flex-wrapper { margin: auto; max-width:75rem; position:relative; } /* ~1170px wide*/
.flex-grid { display:flex; justify-content:space-between; flex-flow:row wrap; }
.flex-grid .col { padding:.6rem 15px; position:relative; margin:0 0 .5em 0; }
.flex-grid .flex-grid { justify-content:flex-start; margin:0 -15px; }
.flex-grid .flex-grid .col { margin-bottom:1em; }
.card { min-height:100%; }
.col { transition: width .5s ease-in-out; }
/******DESKTOP*******************/
@media screen and (min-width: 961px) {
	.flex-grid .col { }
	.col.d-1 { width: 8.3%; }/*not recommended*/
	.col.d-2 { width: 16.6%; }
	.col.d-3 { width: 25%; }
	.col.d-4 { width: 33.3%; }
	.col.d-5 { width: 39.8%; }
	.col.d-6 { width: 50%; }
	.col.d-7 { width: 60.1%; }
	.col.d-8 { width: 66.6%; }
	.col.d-9 { width: 75%; }
	.col.d-10 { width: 83.4%; }
	.col.d-11 { width: 91.7%; }
	.col.d-12 { width: 100%; }
}
@media screen and (min-width: 961px) and (max-width: 1060px) {
	.col .col.d-4 { width:40%; min-width:300px; }
}
/********TABLET****************/
@media screen and (min-width: 750px) and (max-width: 960px) {
	.col.t-1 { width: 8.3%; }/*not recommended*/
	.col.t-2 { width: 16.6%;}/*not recommended*/
	.col.t-3 { width: 25%; }
	.col.t-4 { width: 33.3%; }
	.col.t-5 { width: 39.8%; }
	.col.t-6 { width: 50%; }
	.col.t-7 { width: 60.1%; }
	.col.t-8 { width: 66.6%; }
	.col.t-9 { width: 75%; }
	.col.t-10 { width: 83.4%; }
	.col.t-11 { width: 91.7%; }
	.col.t-12 { width: 100%; }
}
@media screen and (min-width: 750px) and (max-width: 860px) {
.col.d-9 .col.t-6 { padding:.6rem 5px .6rem 18px; }
}
/********MOBILE**************/

@media screen and (min-width: 0px) and (max-width: 750px) { 
	.flex-wrapper {  max-width:600px; margin-left: auto; margin-right: auto; }
	#header .flex-wrapper { max-width:100%; }
	.flex-grid .col { margin-left:auto; margin-right:auto; }
	.m-4 { width: 33%!important; }
	.m-6 { width: 50%!important; }
	.m-12 { width: 100%!important; }
	.flex-grid .flex-grid:last-child {  }
	.col .col.m-12 { width: 100%!important; margin-top:.3rem; margin-bottom:1.75rem; }
}
/*@media screen and (min-width: 0px) and (max-width: 500px) { 
	.flex-wrapper { max-width:340px; }
}*/