<div class="content-wrapper">
		<h1>Any title</h1>
		<p>
			Any text goes here
		</p>
		<a href="#" class="btn btn-primary btn-default">Read More</a>
	</div>

	<!-- gray background -->
	<div class="content-wrapper bg-sand">
		any content goes here ...
	</div>

	<!-- background color -->
	<div class="content-wrapper bg-custom bg-primary">
		any content goes here ...
	</div>

	<!-- background Image -->
	<div class="content-wrapper bg-image shadow">
		<div class="overlay">
			Overlay content goes here
		</div>
	</div>

	<!-- video background -->
	<div class="bg-video bg-custom">
		<video poster="source/to/poster.img" playsinline autoplay muted loop>
			<source src="source/to/video.file"" type="video/mp4">
		</video>
		<div class="overlay">
			<h1>You Owe Yourself <br>
				This Moment</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
			</p>
			<a href="#" class="btn btn-primary btn-default">Read More</a>
		</div>
	</div>

	<!-- pattern background -->
	<div class="content-wrapper pattern-01">
		
	</div>

						

How to use

• By default any wrapper have the light background.
• For gray backgroud color you can use .bg-sand
• Like .bg-custom class, use any custom class to overwrite style of the elements inherite it
• Use any background color css or color class for particular background color
• The .bg-image class is to set any background image. To set a shadow over image use .shadow with .bg-image
• To use video in the background use .bg-video wrapper followed by video element. The content you want to set over image wrap into .overlay wrapper.
• For pattern background set any pattern image as background image or class like .pattern-01