/* =============================================================================

Standard Mobile App CSS

============================================================================= */

.mobile *,
.mobile *:before,
.mobile *:after {
  box-sizing: inherit;
}

.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
}

.column {
  display: inline-block; /* so labels use also realy 100% width */
}

/* remove mobile default styling */
.mobile {
	box-sizing: border-box;

	padding: 0;
	margin: 0;


	-webkit-appearance : none;
	-webkit-border-radius:0;
	border-radius      : 0;

	-webkit-text-size-adjust: none;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-before: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	-webkit-padding-after: 0;
}
	.mobile input,
	.mobile select {
		/* remove ipad default styling */
		-webkit-appearance: none;
		-webkit-border-radius: 0;
		border-radius: 0;
	}

	.mobile fieldset {
		width: 100%;

		/* remove mobile default styling */
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		-webkit-padding-before: 0;
		-webkit-padding-start: 0;
		-webkit-padding-end: 0;
		-webkit-padding-after: 0;
	}

	.mobile .image {
		width: 100%;

		padding: 1%; /* so checked blue outline does not touch the image (svg is a bit inside the white background) */

		background-color: white; /* svg transparent need white for 'checked' blue outline */

		background-size: contain;
		background-position: center;
		background-position-x: center;
		background-position-y: center;

		display: block; /* centers image in surrounding element */
	}

	.mobile .plant_image {
		margin: 10px; /* small border arround the background image */

		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
		/* grayed out element */
		.mobile .plant_image.grayed_image {
			-webkit-filter: grayscale(100%);
			   -moz-filter:	grayscale(100%);
				 -o-filter:	grayscale(100%);
				-ms-filter:	grayscale(100%);
					filter:	grayscale(100%);
			}

	.mobile .radiobutton {
		visibility: hidden;
	}

	.mn_radiobutton {
		padding: 2px; /* small border, gets "selecetd" outline if element is checked */

		margin: 10px; /* spacing between buttons, because radiobuttons are never alone and so they have a bit spacing between them */

		background-color: white; /* white normal background */
	}

/* ===   Changed standard CSS   ============================================= */

/* overide set pixel width */
.fullscreen #content_container_full_width {
	width: 100%;
	max-width: 100%;
}

/* override fucking min-width */
.fullscreen #page {
	min-width: 100%;
}

 /* general styling */
fullscreen,
#top.fullscreen,
#body.fullscreen,
#page.fullscreen,
.header_body.fullscreen {
	background: none;
}

.fullscreen .corners {
	display: none;
}

.fullscreen #main,
.fullscreen #content {
	padding: 0;
	margin: 0;
	width: 100%;
}

/* ===   blue "loading" overlay   */

/* the container for the blue saving overlay for the slide */
.mobile_layer_container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	vertical-align: middle;
}

.mobile_layer_container .save_layer .status_message {
	background: none;
	background-color: #163970;

	width: 50%;
	height: auto;
}

.mobile_layer_container  .save_layer .status_message .status_text {
	width: 100%;

	font-size: 16px;
	line-height: 19px;
}


/* =============================================================================

MN App CSS

============================================================================= */


/* ===   Placeholder styling ================================================ */

/* hidde placholder, they get visible for errors */
.mobile ::placeholder {
	opacity: 0.0;
}

	/* needs to be set seperately for every vendor
	 * see https://stackoverflow.com/questions/22199047/placeholder-css-not-being-applied-in-ie-11/30827689#30827689
	 */

	/* - Chrome ≤56,
	   - Safari 5-10.0
	   - iOS Safari 4.2-10.2
	   - Opera 15-43
	   - Opera Mobile >12
	   - Android Browser 2.1-4.4.4
	   - Samsung Internet
	   - UC Browser for Android
	   - QQ Browser */
	.mobile ::-webkit-input-placeholder {
		opacity: 0.0;
	}

	 /*Firefox 4-18*/
	.mobile :-moz-placeholder {
		opacity: 0.0;
	}

	 /*Firefox 19-50*/
	.mobile ::-moz-placeholder {
		opacity: 0.0;
	}

	/* - Internet Explorer 10–11
	   - Internet Explorer Mobile 10-11*/
	.mobile :-ms-input-placeholder {
		opacity: 0.0;
	}

	 /*Edge (also supports ::-webkit-input-placeholder)*/
	.mobile ::-ms-input-placeholder {
		opacity: 0.0;
	}

	 /*CSS Working Draft*/
	.mobile ::placeholder {
		opacity: 0.0;
	}

/* when a error happend we show the placeholder so the user knows what to put into the field */
.mobile .error .mn_input::placeholder {
	opacity: 0.5;/* placeholder text in input should be faint visible */
	color: #ff0000;
}
	/* needs to be set seperately for every vendor
	 * see https://stackoverflow.com/questions/22199047/placeholder-css-not-being-applied-in-ie-11/30827689#30827689
	 */

	/* - Chrome ≤56,
	   - Safari 5-10.0
	   - iOS Safari 4.2-10.2
	   - Opera 15-43
	   - Opera Mobile >12
	   - Android Browser 2.1-4.4.4
	   - Samsung Internet
	   - UC Browser for Android
	   - QQ Browser */
	.mobile .error .mn_input::-webkit-input-placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

	/* Firefox 4-18 */
	.mobile .error .mn_input:-moz-placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

	/* Firefox 19-50 */
	.mobile .error .mn_input ::-moz-placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

	/* - Internet Explorer 10–11
	   - Internet Explorer Mobile 10-11 */
	.mobile .error .mn_input:-ms-input-placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

	/* Edge (also supports ::-webkit-input-placeholder) */
	.mobile .error .mn_input::-ms-input-placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

	/* CSS Working Draft */
	.mobile .error .mn_input::placeholder {
		opacity: 0.5;
		color: #ff0000;
	}

/* ===   MN Font/Text   ===================================================== */

.mn_font {
	font-family:"proxima-nova-soft",sans-serif;
}

.icon_header_on.mn_text_small {
	padding-left: 20px; /* text next to icon */
}

.tk-proxima-nova-soft {
	font-family:"proxima-nova-soft",sans-serif;
}

@font-face{font-family:tk-proxima-nova-soft-n4;src:url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;}@font-face{font-family:tk-proxima-nova-soft-n5;src:url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("opentype");font-weight:500;font-style:normal;}@font-face{font-family:tk-proxima-nova-soft-n6;src:url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("opentype");font-weight:600;font-style:normal;}@font-face{font-family:tk-proxima-nova-soft-n7;src:url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;}

@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("opentype");font-weight:500;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("opentype");font-weight:600;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;}

@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/b3e05d/00000000000000000001743c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/d3baab/00000000000000000001743d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("opentype");font-weight:500;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff"),url(https://use.typekit.net/af/efaba0/00000000000000000001743e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("opentype");font-weight:600;font-style:normal;}@font-face{font-family:proxima-nova-soft;src:url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/ebe88b/00000000000000000001743f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;}

.mn_text {
	color: #646363;

	font-size: 16px;
	line-height: 19px;
}

	.mn_text_small {
		color: #646363;

		font-size: 13px;
		line-height: 15px;
	}

/* background for price text, like button element */
.mn_image_price_bg {
	padding: 0px 5px;

	border: 1px solid #FAB512;
	background-color: #FAB512;

	/* remove ipad default styling */
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}

.mn_image_text
, .mn_image_price {
	color: #FFFFFF;

	font-size: 13px;
	line-height: 15px;
	height: 30px; /* 2 lines so 15px*2 */

	/* black border, repeated for better effect */
	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}

	.grayed_image .mn_image_text
	, .grayed_image .mn_image_price {
		color: #000000;

		/* white border, repeated for better effect */
		text-shadow: #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px;
	}

/* ===   MN padding   ======================================================= */

.mn_padding {
		padding: 0.6% 6.66% 0.8% 6.66%;
}

	.mn_input_padding {
		padding: 1.05% 9.6% 0.67% 2.3%;
	}


/* ===   MN general styling   =============================================== */

.mn_form_frame {
	padding-top: 3.9%;
	width: 100%;
	background-color: #F7F7F7; /* light gray */
}

.mn_input,
.standard_form .mn_input {
	width: 100%;
	color: #646363;
	border: none;

	background-color: inherit;
	position: relative;
	top: 20px;
	border-bottom:1px solid #757575;

	padding: 0; /* remove default browser style */
}
	.mn_input:focus {
		border-color: #FAB512;
	}

.mn_select {
	/* remove default styling */
	width: 100%;
	border: none;
	background: none;
	padding: 0; /* remove default browser style */

	position: relative;
	top: 20px;
	border-bottom:1px solid #757575;
}

.mn_input_label {
  color:#999;
  font-size:18px;
  font-weight:normal;

  pointer-events: none; /* should be clickable but is not !!! ??? */

  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;

  position: relative;
}

.mn_select_label {
	color:#999; /* same as input fields */
}
	/* active state */
	.mn_select_label,
	.mn_input:focus ~ .mn_input_label,
	.mn_input:valid ~ .mn_input_label,
	.error .mn_input + .mn_input_label {
	  top:-20px; /* move label above input element */
	  font-size:14px;

	  position: relative;
	}

	.mn_input:focus ~ .mn_input_label {
		color:#FAB512;
		/* yellow color on focus for label so the text above
		 * and the line below are yellow when the input has focus
		*/
	}

	/* in case of an error we set label to red */
	.error .mn_input + .mn_input_label {
		color: #ff0000;
	}


.mn_input_div {
	width: 100%;
	/*padding: 1.05% 9.6% 0.67% 2.3%;*/
	border-radius: 2px;
	/*background-color: #FFFFFF;*/
	height: 100%;
}

.mn_input_row {
	/*position: relative;*/
	background-color: #F7F7F7;

	height: 45px; /* input element and label + 7px*/

	margin-bottom: 10px; /* so we have some room to the next row of inputs */
}

.mn_headline_h1 {
	/* other styles override general 0 setting */
	margin: 0;
	padding: 0;

	color: #163970;
	text-align: center;

	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
}

.mn_headline_h2 {
	color: #FAB512; /* yellow */

	margin: 0 0 26px 6.4%;

	font-size: 25px;
	line-height: 30px;
	font-weight: 600;
}

.mn_headline_h3 {
	margin: 0 0 9px 6.4%;

	color: #273B6E;

	font-size: 16px;
	line-height: 19px;
	font-weight: 600;
}

/* selected image gets a blue outline */
input[type=radio]:checked + .mn_radiobutton {
	/* yellow checked outline instead of blue since paypal is blue
	 * and so the default first selected elemet would not look like it is selected */
	background: #FAB512;
}

/* back link */
a.mn_back {
	margin-left: 5.47%; /* left side space */

	height: 22px; /* line height of h1 next to it */
    width: 11px;

	text-decoration: none;
	float: left;
}
	.mn_back .mn_back_image {
		width: 100%;
		height: 100%;
	}

	a.mn_back ~ div {
		margin-left: 15%;
		margin-right: 15%;
	}

.mn_button_div {
	padding: 0% 26% 0% 26%;
}

	.mn_button{
		text-transform: uppercase; /* upper case all letter */

		min-height: 36px; /* at least this height has the button to be, can be more if text is to much and creates a new line */
		min-width: 100%; /* 100% centered in surrounding element, but if text is to long button will expand to show all */
		white-space: normal; /* sets words in a new line if text gets to long */

		border: 1px solid #FAB512;
		background-color: #FAB512;

		color: #FFFFFF;

		font-size: 16px; /* big text */
		line-height: 18px; /* bigger line then text size so text has some padding to the border */

		font-weight: 600;
		text-align: center;

		/* remove ipad default styling */
		-webkit-appearance: none;
		-webkit-border-radius: 0;
		border-radius: 0;
	}

.mn_center_text_big{
		white-space: normal; /* sets words in a new line if text gets to long */

		font-size: 20px; /* big text */
		line-height: 22px; /* bigger line then text size so text has some padding to the border */

		font-weight: 600;

		text-align: center;
	}

/* =============================================================================

CSS based on widht of device

============================================================================= */

/* normal smartphone screens */
@media only screen and (max-width: 767px) {
	.one,
	/*.one-third,*/
	.two-thirds,
	.one-fourth,
	.half {
	  width: 100% ;
	}

	/* in small devices 1/3 should be 2 elements in a row because 3 below each other is to much */
	.one-third {
		width: 45% ;
	}

	/*.mobile input*/
	.mobile .field  {
		width: 100%;
		height: 100%;
		background: none;
	}

	/* test hide elements */
	.mobile label.display_label {
		display: none
	}

	.mobile .image {
		height: 100px; /* nice big images for one column style */
	}

	/* small device so small plant select */
	.mobile .plant_image {
		height: 100px;
	}

	.mn_image_text {
		padding-top: 55px; /* 70px would be bottom for 100px image (30px element height) so we go up 15px to leave a gap 70-15 = 55 */
		padding-left: 10px; /* just some little padding */
	}

	.mn_image_price {
		float: right;
		text-align: right;
		/*padding-top: 55px; not needed since mn_image_text does that already for the same line */
		padding-right: 10px; /* just some little padding */
	}
}

/*
* Any styling that should be applied to screen widths larger
* than a mobile device: tablet, laptop, desktop, etc.
*/

@media only screen and (min-width: 768px) {
	.one {
	  width: 100% ;
	}
	.half {
	  width: calc(100% / 2) ;
	}
	.one-third {
	  width: calc(100% / 3) ;
	}
	.one-fourth {
	  width: calc(100% / 4) ;
	}
	.two-thirds {
	  width: calc(100% / 3 * 2) ;
	}
	.column {
	  float: left;
	}

	.mobile .image {
		height: 100px;  /* nice packed images for 3 column style */
	}

	/* wide device so we use it for the image */
	.mobile .plant_image {
		height: 300px;
	}

	.mn_image_text
	, .mn_image_price {
		font-size: 20px;
		line-height: 22px;
		height: 44px; /* 2 lines so 15px*2 */
	}

	.mn_image_text {
		padding-top: 248px; /* 270px would be bottom for 300px image (30px element height) so we go up 22px to leave a gap 270-22 = 248 */
		padding-left: 10px; /* just some little padding */
	}

	.mn_image_price {
		float: right;
		text-align: right;
		/*padding-top: 55px; not needed since mn_image_text does that already for the same line */
		padding-right: 10px; /* just some little padding */
	}

	/*
     * this was a test and not used at the moment but could be
     */

	/* general padding need to be more if more columns in one row */
	.half .mn_input_padding {
		padding: calc(1.05%*2) calc(9.6%*2) calc(0.67%*2) calc(2.3%*2);
	}
	.one-third .mn_input_padding {
		padding: calc(1.05%*3) calc(9.6%*3) calc(0.67%*3) calc(2.3%*3);
	}
	/* first and last column have to have diverent spacing to match one column style
	 * inner columns have half of 'one' padding multiplied by their number, e.g. 4 would be one-fourth
	 */
	.row .half:first-child .mn_padding {
		padding: calc(0.6%*2) calc(3.33%*2) calc(0.8%*2)  calc(6.66%*2);
	}
	.row .half:last-child .mn_padding {
		padding: calc(0.6%*2) calc(6.66%*2) calc(0.8%*2) calc(3.33%*2);
	}

 	.row .one-third:first-child .mn_padding {
		padding: calc(0.6%*3) calc(2.22%*3) calc(0.8%*3) calc(6.66%*3);
	}
	.row .one-third .mn_padding {
		padding: calc(0.6%*3)  calc(2.22%*3) calc(0.8%*3) calc(2.22%*3);
	}
	.row .one-third:last-child .mn_padding {
		padding: calc(0.6%*3)  calc(6.66%*3) calc(0.8%*3) calc(2.22%*3);
	}
}