// background overlay for a div with 2 rotated grey blocks in the bottom

$bg-overlay-color: rgba(0, 0, 0, 0.3);
$bg-overlay-offset-height: 80px;
$bg-overlay-offset-width: 215px;

.bg-overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;

	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: $bg-overlay-offset-height;
		background-color: $bg-overlay-color;
	}

	.top {
		position: absolute;
		left: 0;
		bottom: $bg-overlay-offset-height;
		right: 0;
		top: 0;
		overflow: hidden;
		
		&:before {
			content: "";
			position: absolute;
			right: calc(50% + #{$bg-overlay-offset-width});
			bottom: -2000px;
			height: 2000px;
			width: 200%;
			background-color: $bg-overlay-color;
			@include transform(rotate(18deg));

			// somehow @include messes this one up
			transform-origin: 100% 0%;
			-ms-transform-origin: 100% 0%;
			-moz-transform-origin: 100% 0%;
			-webkit-transform-origin: 100% 0%;
		}

		&:after {
			content: "";
			position: absolute;
			left: calc(50% - #{$bg-overlay-offset-width});
			bottom: -2000px;
			height: 2000px;
			width: 200%;
			background-color: $bg-overlay-color;
			@include transform(rotate(-18deg));

			// somehow @include messes this one up
			transform-origin: 0% 0%;
			-ms-transform-origin: 0% 0%;
			-moz-transform-origin: 0% 0%;
			-webkit-transform-origin: 0% 0%;
		}
	}
}

@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {

	$bg-overlay-offset-width-mobile: 100px;
	$bg-overlay-offset-height: 20px;

	.bg-overlay {

		.bottom {
			height: $bg-overlay-offset-height;
		}

		.top {
			bottom: $bg-overlay-offset-height;

			&:before {
				right: calc(50% + #{$bg-overlay-offset-width-mobile});
			}

			&:after {
				left: calc(50% - #{$bg-overlay-offset-width-mobile});
			}
		}
	}
}