// Convenient styles that apply to mobile devices.

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
	// Visibility

	[class~="m-hidden"] {
		display: none !important;
	}

	// Width

	[class~="m-width-quarter"] {
		width: 25% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[class~="m-width-half"] {
		width: 50% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[class~="m-width-three-quarter"] {
		width: 75% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[class~="m-width-80-percent"] {
		width: 80% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[class~="m-width-full"] {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	// Alignment

	[class~="m-left"] {
		text-align: left !important;

		img {
			display: inline-block !important;
		}
	}

	[class~="m-center"] {
		text-align: center !important;

		img {
			display: inline-block !important;
		}
	}

	[class~="m-right"] {
		text-align: right !important;

		img {
			display: inline-block !important;
		}
	}

	[class~="m-top"] {
		vertical-align: top !important;
	}

	[class~="m-middle"] {
		vertical-align: middle !important;
	}

	[class~="m-bottom"] {
		vertical-align: bottom !important;
	}

	// Baseline

	[class~="m-topline-quarter"] {
	  padding-top: @m-baseline * 0.25 !important;
	}

	[class~="m-topline-half"] {
	  padding-top: @m-baseline * 0.5 !important;
	}

	[class~="m-topline"] {
	  padding-top: @m-baseline !important;
	}

	[class~="m-topline-1_5x"] {
	  padding-top: @m-baseline * 1.5 !important;
	}

	[class~="m-topline-2x"] {
	  padding-top: @m-baseline * 2 !important;
	}

	[class~="m-topline-2_5x"] {
	  padding-top: @m-baseline * 2.5 !important;
	}

	[class~="m-topline-3x"] {
	  padding-top: @m-baseline * 3 !important;
	}

	//--

	[class~="m-baseline-quarter"] {
	  padding-bottom: @m-baseline * 0.25 !important;
	}

	[class~="m-baseline-half"] {
	  padding-bottom: @m-baseline * 0.5 !important;
	}

	[class~="m-baseline"] {
	  padding-bottom: @m-baseline !important;
	}

	[class~="m-baseline-1_5x"] {
	  padding-bottom: @m-baseline * 1.5 !important;
	}

	[class~="m-baseline-2x"] {
	  padding-bottom: @m-baseline * 2 !important;
	}

	[class~="m-baseline-2_5x"]{
	  padding-bottom: @m-baseline * 2.5 !important;
	}

	[class~="m-baseline-3x"] {
	  padding-bottom: @m-baseline * 3 !important;
	}

	// Padding

	[class~="m-padding-quarter"] {
		padding-left: @m-padding * 0.25 !important;
		padding-right: @m-padding * 0.25 !important;
	}

	[class~="m-padding-left-quarter"] {
		padding-left: @m-padding * 0.25 !important;
	}

	[class~="m-padding-right-quarter"] {
		padding-right: @m-padding * 0.25 !important;
	}

	//--

	[class~="m-padding-half"] {
		padding-left: @m-padding * 0.5 !important;
		padding-right: @m-padding * 0.5 !important;
	}

	[class~="m-padding-left-half"] {
		padding-left: @m-padding * 0.5 !important;
	}

	[class~="m-padding-right-half"] {
		padding-right: @m-padding * 0.5 !important;
	}

	//--

	[class~="m-padding"] {
		padding-left: @m-padding !important;
		padding-right: @m-padding !important;
	}

	[class~="m-padding-left"] {
		padding-left: @m-padding !important;
	}

	[class~="m-padding-right"] {
		padding-right: @m-padding !important;
	}

	//--

	[class~="m-padding-1_5x"] {
		padding-left: @m-padding * 1.5 !important;
		padding-right: @m-padding * 1.5 !important;
	}

	[class~="m-padding-left-1_5x"] {
		padding-left: @m-padding * 1.5 !important;
	}

	[class~="m-padding-right-1_5x"] {
		padding-right: @m-padding * 1.5 !important;
	}

	//--

	[class~="m-padding-2x"] {
		padding-left: @m-padding * 2 !important;
		padding-right: @m-padding * 2 !important;
	}

	[class~="m-padding-left-2x"] {
		padding-left: @m-padding * 2 !important;
	}

	[class~="m-padding-right-2x"] {
		padding-right: @m-padding * 2 !important;
	}

	//--

	[class~="m-padding-2_5x"] {
		padding-left: @m-padding * 2.5 !important;
		padding-right: @m-padding * 2.5 !important;
	}

	[class~="m-padding-left-2_5x"] {
		padding-left: @m-padding * 2.5 !important;
	}

	[class~="m-padding-right-2_5x"] {
		padding-right: @m-padding * 2.5 !important;
	}

	//--

	[class~="m-padding-3x"] {
		padding-left: @m-padding * 3 !important;
		padding-right: @m-padding * 3 !important;
	}

	[class~="m-padding-left-3x"] {
		padding-left: @m-padding * 3 !important;
	}

	[class~="m-padding-right-3x"] {
		padding-right: @m-padding * 3 !important;
	}

	//--

	[class~="m-padding-none-top"] {
		padding-top: 0 !important;
	}

	[class~="m-padding-none-right"] {
		padding-right: 0 !important;
	}

	[class~="m-padding-none-bottom"] {
		padding-bottom: 0 !important;
	}

	[class~="m-padding-none-left"] {
		padding-left: 0 !important;
	}

	[class~="m-padding-none"] {
		padding: 0 !important;
	}
}