/**
* mx-grid
*
* This file is part of the Yamanu-Platform
* Copyright (c) 2019 Martin Bremm (Yamanu.[mb])
*/


/**
* M-X Grid: simple matrix (nestable grid)
*
* m-x: row
* m-y: col
*
* This allows the combination of ANY OTHER grid that usually uses row and col
*
*
****
* [width]
* m-50: 50%
* m-25: 25%
*
* e.g.
* class="m-x m-50" (row width 50%, default is 100%)
*
*
* == row 100% + 2-col 2/3:
*
* <div class="m-x">
* 		<div class="m-y m-67"> 2/3 left</div>
* 		<div class="m-y m-33"> 1/3 right</div>
* </div>
*
* ==
*
* available m-:
* [1,2,3,4,5,7,8,9,10,12,15,20, 25,28,29,30,35,40,45, 50,55,60,65,70,72,75, 80,85,88,90,99,100, 33,66]
*
* [max-width]
* mx-50: 50%
* mx-25: 25%
*
* [push-right] (margin-left)
* m-p3: 3%
* m-p10: 10%
*
* e.g. m-45 m-p5 (5% push, stay within 50%) or m-50 m-p25 (50% width, centered)
*
* available m-p:
* [1,2,3,5, 10,15,20,25,30,35,40,45, 50,55,60,65,70,75, 80,90,95, 99,100]
*
*
****
* [push-up, self] (- margin-top)
* mt-10: -10px
* mt-48: -48px
*
* [pull-up, next] (- margin-bottom)
* mb-10: -10px
* mb-48: -48px
*
* available:
* [5,10,20,24,30,36,40,48] (row correction for character size and icons)
*
*
****
* [pull-left] (- margin-right)
* mr-10: -10px
* mr-30: -30px
*
* available:
* [5,10,15,20,25,30]
*

 m-codes (responsive layouts, 8 break-points by EM)

	m-r.., m-s.., m-h..

  -r:responsive (100%), -s:show (on), -h:hide (off)

  r-33- (3rd)
  r-50- (half)
  r-25- (quarter)

  -0: 18em: 288px
  -1:	24em:	384px
  -2:	34em:	544px
  -3:	46em:	736px
  -4:	50em:	800px
  -5:	56em:	896px
  -6:	67em:	1072px
  -7:	73em:	1168px
  -8:	82em:	1312px

 e.g.

  m-33: 3 col, 33%
  m-50-6: 50% at 1072px (67em)
  m-r2: 100% at 544px (34em)

  m-h0: hide at 288px (18em)

  combine to switch at levels!

*
**/
.ymn.mx-lg .m-x .m-x { margin:  0 -1.5em; }
.ymn.mx-lg .m-y      { padding: 0  1.5em; }

.m-x .m-x { margin:  0 -0.5em; }
.m-y      { padding: 0  0.5em; }

.m-x:after {
	 content: "";
	 clear: both;
	 display: table;
}

.mx-body{
	margin: 0px 1.5em;
}
.mx-0{
	margin: 0px;
}

@media only screen { .m-y {
	 float: left;
	 width: 100%;
	 box-sizing: border-box;
}}

/* responsive base */

.mx h1, .mx .h1, .x-h1  {
	font-size: 2.2em;
}
.mx .hc{
	font-size: 1.8em;
}
.mx h2, .mx .h2, .x-h2 {
	font-size: 1.4em;
}
.mx h3, .mx .h3, .x-h3 {
	font-size: 1.0em;
}

.mx .ht{
	font-size:0.7em;
}

.mx h2, .mx h3, .mx h4, .mx .h2, .mx .h3, .mx .h4, .x-h2, .x-h3, .x-h4, .mx .hc {
	margin-top: 0;
}
.mx h3, .mx h4, .mx .h3, .mx .h4, .x-h3, .x-h4 {
	margin-bottom: 0.5em;
}

.mb0, .mx .mb0 h3, .mx .mb0.h3{
	margin-bottom: 0;
}


/* MD-x */
.mx p, .mx ul {
	font-size: 1.0em;
	line-height: 1.5;
	margin: 0 0 0.5em;
}


/* responsive mx-container; add other elements to those breakpoints */

.mx.x-container {
	margin: 0 auto;
	max-width: 90em;
	padding: 1em; /* 0; keep border*/
}

.mx .wrap{
	margin: 0 auto;
	max-width: 90em;
}

.mx .footer {
	padding-top: 1.5em;
}
.mx .desc {
	color: #888;
}
.mx .intro {
	border-bottom: 1px dotted #bbb;
	padding-bottom: 1.5em;
}
.mx .social {
	border-top: 1px dotted #bbb;
	padding-top: 1.5em;
}

/* minor responsive adjustments */

.mx .footer {
	border-top: 1px dotted #aaa;
}
.mx .content {
	border-bottom: 1px dotted #aaa;
	margin-bottom: 1.5em;
}

/* blocks */

.m-s0, .m-s1, .m-s2, .m-s3, .m-s4, .m-s4, .m-s5, .m-s6, .m-s7,
.nav .m-s0, .nav .m-s1, .nav .m-s2, .nav .m-s3, .nav .m-s4,
.nav .m-s4, .nav .m-s5, .nav .m-s6, .nav .m-s7
{
	display:none;
}
.m-sb0, .m-sb1, .m-sb2, .m-sb3, .m-sb4, .m-sb5, .m-sb6{
	display:none;
}

.m-right-0, .m-right-1, .m-right-2, .m-right-3, .m-right-4,
.m-right-5, .m-right-6, .m-right-7, .m-right-8, .m-right-9,
.m-right-ws, .m-right-x {
	text-align: right;
}

.m-1{width: 1%;}
.m-2{width: 2%;}
.m-3{width: 3%;}
.m-4{width: 4%;}
.m-5{width: 5%;}
.m-7{width: 7%;}
.m-8{width: 8%;}
.m-9{width: 9%;}
.m-10{width: 10%;}
.m-12{width: 12%;}
.m-15{width: 15%;}
.m-20{width: 20%;}
.m-25{width: 25%;}
.m-28{width: 28%;}
.m-29{width: 29%;}
.m-30{width: 30%;}
.m-35{width: 35%;}
.m-40{width: 40%;}
.m-45{width: 45%;}
.m-50{width: 50%;}
.m-55{width: 55%;}
.m-60{width: 60%;}
.m-65{width: 65%;}
.m-70{width: 70%;}
.m-75{width: 75%;}
.m-72{width: 72%;}
.m-80{width: 80%;}
.m-85{width: 85%;}
.m-88{width: 88%;}
.m-90{width: 90%;}
.m-95{width: 95%;}
.m-99{width: 99%;}
.m-100{width: 100%;}

.m-33{	width: 33.33%;}
.m-67{ width: 66.66%;}

.mx-1{max-width: 1%;}
.mx-2{max-width: 2%;}
.mx-5{max-width: 5%;}
.mx-10{max-width: 10%;}
.mx-15{max-width: 15%;}
.mx-20{max-width: 20%;}
.mx-25{max-width: 25%;}
.mx-28{max-width: 28%;}
.mx-30{max-width: 30%;}
.mx-35{max-width: 35%;}
.mx-40{max-width: 40%;}
.mx-45{max-width: 45%;}
.mx-50{max-width: 50%;}
.mx-55{max-width: 55%;}
.mx-60{max-width: 60%;}
.mx-65{max-width: 65%;}
.mx-70{max-width: 70%;}
.mx-72{max-width: 72%;}
.mx-75{max-width: 75%;}
.mx-80{max-width: 80%;}
.mx-88{max-width: 88%;}
.mx-85{max-width: 85%;}
.mx-90{max-width: 90%;}
.mx-95{max-width: 95%;}
.mx-99{max-width: 99%;}
.mx-100{max-width: 100%;}

.mx-33{ max-width: 33.33%;}
.mx-67{ max-width: 66.66%;}

.m-px{margin-left: 0.5em;}

.m-p1{margin-left: 1%;}
.m-p2{margin-left: 2%;}
.m-p3{margin-left: 3%;}
.m-p5{margin-left: 5%;}
.m-p10{margin-left: 10%;}
.m-p15{margin-left: 15%;}
.m-p20{margin-left: 20%;}
.m-p25{margin-left: 25%;}
.m-p30{margin-left: 30%;}
.m-p35{margin-left: 35%;}
.m-p40{margin-left: 40%;}
.m-p45{margin-left: 45%;}
.m-p50{margin-left: 50%;}
.m-p55{margin-left: 55%;}
.m-p60{margin-left: 60%;}
.m-p65{margin-left: 65%;}
.m-p70{margin-left: 70%;}
.m-p75{margin-left: 75%;}
.m-p80{margin-left: 80%;}
.m-p85{margin-left: 85%;}
.m-p90{margin-left: 90%;}
.m-p95{margin-left: 95%;}
.m-p99{margin-left: 99%;}
.m-p100{margin-left: 100%;}

.m-p13, .m-p33{margin-left: 33.33%;}
.m-p23, .m-p67{margin-left: 66.66%;}

.mt33{margin-top: 33.33%;}
.mt12, .mt50{margin-top: 50%;}
.mt23, .mt67{margin-top: 66.66%;}

.mt-5{margin-top: -5px;}
.mt-10{margin-top: -10px;}
.mt-20{margin-top: -20px;}
.mt-24{margin-top: -24px;}
.mt-28{margin-top: -28px;}
.mt-30{margin-top: -30px;}
.mt-36{margin-top: -36px;}
.mt-40{margin-top: -40px;}
.mt-48{margin-top: -48px;}

.mb-5{margin-bottom: -5px;}
.mb-10{margin-bottom: -10px;}
.mb-20{margin-bottom: -20px;}
.mb-24{margin-bottom: -24px;}
.mb-28{margin-bottom: -28px;}
.mb-30{margin-bottom: -30px;}
.mb-36{margin-bottom: -36px;}
.mb-40{margin-bottom: -40px;}
.mb-48{margin-bottom: -48px;}

.mr-5{margin-right: -5px;}
.mr-10{margin-right: -10px;}
.mr-15{margin-right: -15px;}
.mr-20{margin-right: -20px;}
.mr-25{margin-right: -25px;}
.mr-30{margin-right: -30px;}

.ml-5{margin-left: -5px;}
.ml-10{margin-left: -10px;}
.ml-15{margin-left: -15px;}
.ml-20{margin-left: -20px;}
.ml-25{margin-left: -25px;}
.ml-30{margin-left: -30px;}

.ms-5{margin: -5px;}
.ms-10{margin: -10px;}
.ms-15{margin: -15px;}
.ms-20{margin: -20px;}
.ms-25{margin: -25px;}
.ms-30{margin: -30px;}

.m-center { text-align: center; }
.m-right { text-align: right; }

.m-pad5 {padding: 5px;}
.m-pad10 {padding: 10px;}
.m-pad15 {padding: 15px;}
.m-pad20 {padding: 20px;}
.m-pad25 {padding: 25px;}
.m-pad30 {padding: 30px;}

.m-l40 {padding-left: 40px;}
.m-l30, .m-l30-4  {
	padding-left: 30px;
}
.m-l20 {padding-left: 20px;}
.m-l15 {padding-left: 15px;}
.m-l10 {padding-left: 10px;}

.m-xtext{height: auto; float: left; margin: 0 15px 15px 0;}

@media only screen and (min-width: 24em) {
	.mx .ht{
		font-size:0.7em;
	}
}

@media only screen and (min-width: 34em) {
	/* MD-x
	.mx p, .mx ul {
		font-size: 1.0em;
	}
	*/
	.mx .feature:first-child,
	.mx .sbinfo:first-child {
		border-right: 1px dotted #aaa;
	}
	.mx.x-container {
		padding: 1em;
	}
	.mx h1, .mx .h1, .x-h1 {
		font-size: 2.6em;
	}
	.mx .hc{
		font-size: 2.0em;
	}
	.mx .ht{
		font-size:0.8em;
	}
	.mx h2, .mx .h2, .x-h2 {
		font-size: 1.4em;
	}
	.mx h3, .mx .h3, .x-h3{
		font-size: 1.2em;
	}
	.mx p {
		font-size: 1.1em;
	}
}

@media only screen and (min-width: 54em) {
	.mx .content {
		border: none;
		border-right: 1px dotted #aaa;
		margin-bottom: 0;
	}
	.mx .sbinfo:first-child {
		border: none;
	}
	.mx h1, .mx .h1, .x-h1 {
		font-size: 3em;
	}
	.mx .hc{
		font-size: 2.2em;
	}
	.mx .ht{
		font-size:0.9em;
	}
	.mx h2, .mx .h2, .x-h2 {
		font-size: 1.6em;
	}
	.mx h3, .mx .h3, .x-h3 {
		font-size: 1.3em;
	}
	.mx p {
		font-size: 1.2em;
	}
}

@media only screen and (min-width: 76em) {
	.mx .sbinfo:first-child {
		border-right: 1px dotted #aaa;
	}
	.mx h1, .mx .h1, .x-h1 {
		font-size: 3.2em;
	}
	.mx .hc{
		font-size: 2.4em;
	}
	.mx .ht{
		font-size:1.0em;
	}

	.mx h2, .mx .h2, .x-h2 {
		font-size: 1.7em;
	}
	.mx h3, .mx .h3, .x-h3 {
		font-size: 1.4em;
	}
	.mx p {
		font-size: 1.3em;
	}
}


/* ========= defaults, override in forms ====== */
/* 34, 54, 76 for pages, 34, 44, 56 for container */

.mx.x-container { max-width: 90em; }

@media only screen and (min-width: 34em) {
	.mx .feature, .mx .sbinfo { width: 50%; }
}

@media only screen and (min-width: 54em) {
	.mx .content { width: 66.66%; }
	.mx .sidebar { width: 33.33%; }
	.mx .sbinfo    { width: 100%;   }
}

@media only screen and (min-width: 76em) {
	.mx .content { width: 58.33%; } /* 7/12 */
	.mx .sidebar { width: 41.66%; } /* 5/12 */
	.mx .sbinfo    { width: 50%;    }
}

/*== container ==*/
/*
$bp-small : 	24em;
$bp-small-2 : 	29.75em;
$bp-small-3 : 	39.8em;
$bp-med : 		46.8em;
$bp-med-2 : 	48em;
$bp-large : 	50em;
$bp-large-2 : 	54.5em;
$bp-xl : 		60em;
$bp-xl-2 : 		67em;
---
$bp-small : 	24em;
$bp-med : 		46.8em;
$bp-large : 	50em;
$bp-xl : 		73em;
---
max-width at 	90em

http://pxtoem.com/  (use base: 16px/12pt)
*/

/*
 m-codes
  -r:responsive (100%), -s:show (on), -h:hide (off)
  r-33- (3rd)
  r-50- (half)
  r-25- (quarter)

  -0: 18em: 288px
  -1:	24em:	384px
  -2:	34em:	544px
  -3:	46em:	736px
  -4:	50em:	800px
  -5:	56em:	896px
  -6:	67em:	1072px
		73em:	1168px	/was -7 //78: 1248
  ?
  -7:	80em: 1280px	//-0.5
		82em: 1312px
		85em: 1360px
  -8:	90em: 1440px	//-0.5

		100em: 1600
		105em: 1680
  -9:	120em: 1980	//-0.5

  -ws	130em: ~2100

  m-33: 3 col
  m-50-6: 50% at 1072px
  m-r2: 100% at 544px

  combine to switch at levels!
*/

@media only screen and (min-width: 79em) {
	.m-rx .mxr{max-width: none;}
	.m-rx{margin-left:0; width: 100%;}
	.m-hx, div.col.m-hx {display:none;}
	.m-sx{display:inline-block;}
	.m-sbx{display:block;}
	.m-right-x{text-align: unset;}
	.m-80-x{margin-left:0; width: 80%;}
	.m-75-x{margin-left:0; width: 75%;}
	.m-67-x{margin-left:0; width: 67%;}
	.m-50-x{margin-left:0; width: 50%;}
	.m-33-x{margin-left:0; width: 33%;}
	.m-25-x{margin-left:0; width: 25%;}
	.m-20-x{margin-left:0; width: 20%;}
}

@media only screen and (max-width: 130em) {
	.m-rws .mxr{max-width: none;}
	.m-rws{margin-left:0; width: 100%;}
	.m-hws, div.col.m-hws {display:none;}
	.m-sws{display:inline-block;}
	.m-sbws{display:block;}
	.m-right-ws{text-align: unset;}
	/*
	.m-90-8{margin-left:0; width: 90%;}
	.m-80-8{margin-left:0; width: 80%;}
	.m-75-8{margin-left:0; width: 75%;}
	.m-72-8{margin-left:0; width: 72%;}
	.m-67-8{margin-left:0; width: 67%;}
	.m-60-8{margin-left:0; width: 60%;}
	.m-50-8{margin-left:0; width: 50%;}
	.m-40-8{margin-left:0; width: 40%;}
	.m-33-8{margin-left:0; width: 33%;}
	.m-25-8{margin-left:0; width: 25%;} */
	.m-90-ws{width: 90%;}
	.m-80-ws{width: 80%;}
	.m-75-ws{width: 75%;}
	.m-72-ws{width: 72%;}
	.m-67-ws{width: 67%;}
	.m-60-ws{width: 60%;}
	.m-50-ws{width: 50%;}
	.m-40-ws{width: 40%;}
	.m-33-ws{width: 33%;}
	.m-25-ws{width: 25%;}

	.m-20-ws{margin-left:0; width: 20%;}
	.m-28-ws{margin-left:0; width: 28%;}

	.m-15-ws{margin-left:0; width: 15%;}
	.m-10-ws{margin-left:0; width: 10%;}
	.m-12-ws{margin-left:0; width: 12%;}
}

@media only screen and (max-width: 119.5em) {
	.m-r9 .mxr{max-width: none;}
	.m-r9{margin-left:0; width: 100%;}
	.m-h9, div.col.m-h8 {display:none;}
	.m-s9{display:inline-block;}
	.m-sb9{display:block;}
	.m-right-9{text-align: unset;}
	/*
	.m-90-9{margin-left:0; width: 90%;}
	.m-80-9{margin-left:0; width: 80%;}
	.m-75-9{margin-left:0; width: 75%;}
	.m-72-9{margin-left:0; width: 72%;}
	.m-67-9{margin-left:0; width: 67%;}
	.m-60-9{margin-left:0; width: 60%;}
	.m-50-9{margin-left:0; width: 50%;}
	.m-40-9{margin-left:0; width: 40%;}
	.m-33-9{margin-left:0; width: 33%;}
	.m-25-9{margin-left:0; width: 25%;} */
	.m-90-9{width: 90%;}
	.m-80-9{width: 80%;}
	.m-75-9{width: 75%;}
	.m-72-9{width: 72%;}
	.m-67-9{width: 67%;}
	.m-60-9{width: 60%;}
	.m-50-9{width: 50%;}
	.m-40-9{width: 40%;}
	.m-33-9{width: 33%;}
	.m-25-9{width: 25%;}

	.m-20-9{margin-left:0; width: 20%;}
	.m-28-9{margin-left:0; width: 28%;}

	.m-15-9{margin-left:0; width: 15%;}
	.m-10-9{margin-left:0; width: 10%;}
	.m-12-9{margin-left:0; width: 12%;}
}

@media only screen and (max-width: 89.5em) {
	.m-r8 .mxr{max-width: none;}
	.m-r8{margin-left:0; width: 100%;}
	.m-h8, div.col.m-h8 {display:none;}
	.m-s8{display:inline-block;}
	.m-sb8{display:block;}
	.m-right-8{text-align: unset;}
	/*
	.m-90-8{margin-left:0; width: 90%;}
	.m-80-8{margin-left:0; width: 80%;}
	.m-75-8{margin-left:0; width: 75%;}
	.m-72-8{margin-left:0; width: 72%;}
	.m-67-8{margin-left:0; width: 67%;}
	.m-60-8{margin-left:0; width: 60%;}
	.m-50-8{margin-left:0; width: 50%;}
	.m-40-8{margin-left:0; width: 40%;}
	.m-33-8{margin-left:0; width: 33%;}
	.m-25-8{margin-left:0; width: 25%;} */
	.m-90-8{width: 90%;}
	.m-80-8{width: 80%;}
	.m-75-8{width: 75%;}
	.m-72-8{width: 72%;}
	.m-67-8{width: 67%;}
	.m-60-8{width: 60%;}
	.m-50-8{width: 50%;}
	.m-40-8{width: 40%;}
	.m-33-8{width: 33%;}
	.m-25-8{width: 25%;}

	.m-20-8{margin-left:0; width: 20%;}
	.m-28-8{margin-left:0; width: 28%;}

	.m-15-8{margin-left:0; width: 15%;}
	.m-10-8{margin-left:0; width: 10%;}
	.m-12-8{margin-left:0; width: 12%;}
}

@media only screen and (max-width: 79.5em) {
	.m-r7 .mxr{max-width: none;}
	.m-r7{margin-left:0; width: 100%;}
	.m-h7, .nav .m-h7, div.col.m-h7 {display:none;}
	.m-s7, .nav .m-s7{display:inline-block;}
	.m-sb7{display:block;}
	.m-right-7{text-align: unset;}
	/*
	.m-90-7{margin-left:0; width: 90%;}
	.m-80-7{margin-left:0; width: 80%;}
	.m-75-7{margin-left:0; width: 75%;}
	.m-72-7{margin-left:0; width: 72%;}
	.m-67-7{margin-left:0; width: 67%;}
	.m-60-7{margin-left:0; width: 60%;}
	.m-50-7{margin-left:0; width: 50%;}
	.m-40-7{margin-left:0; width: 40%;}
	.m-33-7{margin-left:0; width: 33%;}
	.m-25-7{margin-left:0; width: 25%;} */
	.m-90-7{width: 90%;}
	.m-80-7{width: 80%;}
	.m-75-7{width: 75%;}
	.m-72-7{width: 72%;}
	.m-67-7{width: 67%;}
	.m-60-7{width: 60%;}
	.m-50-7{width: 50%;}
	.m-40-7{width: 40%;}
	.m-33-7{width: 33%;}
	.m-25-7{width: 25%;}

	.m-20-7{margin-left:0; width: 20%;}
	.m-28-7{margin-left:0; width: 28%;}

	.m-15-7{margin-left:0; width: 15%;}
	.m-12-7{margin-left:0; width: 12%;}
	.m-10-7{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 67em) {
	.m-r6 .mxr{max-width: none;}
	.m-r6{margin-left:0; width: 100%;}
	.m-h6, .nav .m-h6, div.col.m-h6 {display:none;}
	.m-s6, .nav .m-s6{display:inline-block;}
	.m-sb6{display:block;}
	.m-right-6{text-align: unset;}
	.m-99-6{margin-left:0; width: 99%;}
	.m-90-6{margin-left:0; width: 90%;}
	.m-80-6{margin-left:0; width: 80%;}
	.m-75-6{margin-left:0; width: 75%;}
	.m-67-6{margin-left:0; width: 67%;}
	.m-60-6{margin-left:0; width: 60%;}
	.m-50-6{margin-left:0; width: 50%;}
	.m-40-6{margin-left:0; width: 40%;}
	.m-33-6{margin-left:0; width: 33%;}
	.m-25-6{margin-left:0; width: 25%;}
	.m-20-6{margin-left:0; width: 20%;}
	.m-15-6{margin-left:0; width: 15%;}
	.m-10-6{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 56em) {
	.m-r5 .mxr{max-width: none;}
	.m-r5{margin-left:0; width: 100%;}
	.m-h5, .nav .m-h5, div.col.m-h5 {display:none;}
	.m-s5, .nav .m-s5{display:inline-block;}
	.m-sb5{display:block;}
	.m-right-5{text-align: unset;}
	.m-99-5{margin-left:0; width: 99%;}
	.m-90-5{margin-left:0; width: 90%;}
	.m-80-5{margin-left:0; width: 80%;}
	.m-75-5{margin-left:0; width: 75%;}
	.m-67-5{margin-left:0; width: 67%;}
	.m-60-5{margin-left:0; width: 60%;}
	.m-50-5{margin-left:0; width: 50%;}
	.m-40-5{margin-left:0; width: 40%;}
	.m-33-5{margin-left:0; width: 33%;}
	.m-25-5{margin-left:0; width: 25%;}
	.m-20-5{margin-left:0; width: 20%;}
	.m-15-5{margin-left:0; width: 15%;}
	.m-10-5{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 50em) {
	.m-r4 .mxr{max-width: none;}
	.m-r4{margin-left:0; width: 100%;}
	.m-h4, .nav .m-h4, div.col.m-h4 {display:none;}
	.m-s4, .nav .m-s4{display:inline-block;}
	.m-sb4{display:block;}
	.m-right-4{text-align: unset;}
		.m-l30-4{padding-left: 5px;}
	.m-99-4{margin-left:0; width: 99%;}
	.m-90-4{margin-left:0; width: 90%;}
	.m-80-4{margin-left:0; width: 80%;}
	.m-75-4{margin-left:0; width: 75%;}
	.m-67-4{margin-left:0; width: 67%;}
	.m-60-4{margin-left:0; width: 60%;}
	.m-50-4{margin-left:0; width: 50%;}
	.m-40-4{margin-left:0; width: 40%;}
	.m-33-4{margin-left:0; width: 33%;}
	.m-25-4{margin-left:0; width: 25%;}
	.m-20-4{margin-left:0; width: 20%;}
	.m-15-4{margin-left:0; width: 15%;}
	.m-10-4{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 46em) {
	.m-r3 .mxr{max-width: none;}
	.m-r3{margin-left:0; width: 100%;}
	.m-h3, .nav .m-h3, div.col.m-h3 {display:none;}
	.m-s3, .nav .m-s3{display:inline-block;}
	.m-sb3{display:block;}
	.m-right-3{text-align: unset;}
	.m-99-3{margin-left:0; width: 99%;}
	.m-90-3{margin-left:0; width: 90%;}
	.m-80-3{margin-left:0; width: 80%;}
	.m-75-3{margin-left:0; width: 75%;}
	.m-67-3{margin-left:0; width: 67%;}
	.m-60-3{margin-left:0; width: 60%;}
	.m-50-3{margin-left:0; width: 50%;}
	.m-40-3{margin-left:0; width: 40%;}
	.m-33-3{margin-left:0; width: 33%;}
	.m-25-3{margin-left:0; width: 25%;}
	.m-20-3{margin-left:0; width: 20%;}
	.m-15-3{margin-left:0; width: 15%;}
	.m-10-3{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 34em) {
	.m-r2 .mxr{max-width: none;}
	.m-r2{margin-left:0; width: 100%;}
	.m-h2, .nav .m-h2, div.col.m-h2 {display:none;}
	.m-s2, .nav .m-s2{display:inline-block;}
	.m-sb2{display:block;}
	.m-right-2{text-align: unset;}
	.m-99-2{margin-left:0; width: 99%;}
	.m-90-2{margin-left:0; width: 90%;}
	.m-80-2{margin-left:0; width: 80%;}
	.m-75-2{margin-left:0; width: 75%;}
	.m-67-2{margin-left:0; width: 67%;}
	.m-60-2{margin-left:0; width: 60%;}
	.m-50-2{margin-left:0; width: 50%;}
	.m-40-2{margin-left:0; width: 40%;}
	.m-33-2{margin-left:0; width: 33%;}
	.m-25-2{margin-left:0; width: 25%;}
	.m-20-2{margin-left:0; width: 20%;}
	.m-15-2{margin-left:0; width: 15%;}
	.m-12-2{margin-left:0; width: 12%;}
	.m-10-2{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 24em) {
	.m-r1 .mxr{max-width: none;}
	.m-r1{margin-left:0; width: 100%;}
	.m-h1, .nav .m-h1, div.col.m-h1 {display:none;}
	.m-s1, .nav .m-s1{display:inline-block;}
	.m-sb1{display:block;}
	.m-right-1{text-align: unset;}
	.m-90-1{margin-left:0; width: 90%;}
	.m-80-1{margin-left:0; width: 80%;}
	.m-75-1{margin-left:0; width: 75%;}
	.m-67-1{margin-left:0; width: 67%;}
	.m-60-1{margin-left:0; width: 60%;}
	.m-50-1{margin-left:0; width: 50%;}
	.m-40-1{margin-left:0; width: 40%;}
	.m-33-1{margin-left:0; width: 33%;}
	.m-25-1{margin-left:0; width: 25%;}
	.m-20-1{margin-left:0; width: 20%;}
	.m-15-1{margin-left:0; width: 15%;}
	.m-12-1{margin-left:0; width: 12%;}
	.m-10-1{margin-left:0; width: 10%;}
}
@media only screen and (max-width: 18em) {
	.m-r0 .mxr{max-width: none;}
	.m-r0{margin-left:0; width: 100%;}
	.m-h0, .nav .m-h0, div.col.m-h0 {display:none;}
	.m-s0, .nav .m-s0{display:inline-block;}
	.m-sb0{display:block;}
	.m-right-0{text-align: unset;}
	.m-80-0{margin-left:0; width: 80%;}
	.m-75-0{margin-left:0; width: 75%;}
	.m-67-0{margin-left:0; width: 67%;}
	.m-60-0{margin-left:0; width: 60%;}
	.m-50-0{margin-left:0; width: 50%;}
	.m-40-0{margin-left:0; width: 40%;}
	.m-33-0{margin-left:0; width: 33%;}
	.m-25-0{margin-left:0; width: 25%;}
	.m-20-0{margin-left:0; width: 20%;}
	.m-15-0{margin-left:0; width: 15%;}
	.m-12-0{margin-left:0; width: 12%;}
	.m-10-0{margin-left:0; width: 10%;}
}

/*hide/show permanently but allow toggle*/

.m-hp{display:none;}
.m-sp{display:inline-block;}
.m-sb{display:block;}

.mx-debug .x-container, .mx-debug.x-container{
	 border: 1px solid #0b49b580; /* dotted #0b49b5; */
	 margin: -10px;
	 padding: 4px;
}

.mx-debug .x-container div, .mx-debug.x-container div{
	border: 1px  dotted #ddd;
	margin: 0px;
	padding: 5px;
}

.mx-debug.ext .x-container div, .mx-debug.ext.x-container div{
	margin: 3px;
}

.mx-debug div.m-x { border-top: 1px solid red; }
.mx-debug div.m-y { border-left: 1px solid red; }

.mx-debug2 div.m-x { border-top: 1px dotted #c0ccfe;; }
.mx-debug2 div.m-y { border-left: 1px dotted #c0ccfe; }