@mixin bg-fraction($color, $fill-side, $column-span) {
	@supports ( background-size: calc(50%) ) {

			$column-span: -(($column-span * 8.333%)-100);
			background-image: 
				linear-gradient(to $fill-side, transparent 0, transparent $column-span, $color $column-span, $color 100%),
				linear-gradient(to $fill-side, $color 100%, $color 100%)
			;
			background-size: 100%, 100%;
			background-repeat: repeat-y;
			background-position: center center, $fill-side center;
			@media(min-width:$screen-sm) { 
				$offset: $screen-sm - $outside-gutter-width*2;
				$offset2: calc( 50% - (#{$screen-sm}/2 - #{$outside-gutter-width}) );
				background-size: $offset, $offset2;
			}
			@media(min-width:$screen-md) { 
				$offset: $screen-md - $outside-gutter-width*2;
				$offset2: calc( 50% - (#{$screen-md}/2 - #{$outside-gutter-width}) );
				background-size: $offset, $offset2;
			}
			@media(min-width:$screen-lg) { 
				$offset: $screen-lg - $outside-gutter-width*2;
				$offset2: calc( 50% - (#{$screen-lg}/2 - #{$outside-gutter-width}) );
				background-size: $offset, $offset2;
			}

	}// end @supports
}