ICONS & BOXES

<!--
LTR INFO: box-icon-left or box-icon-right - are the same on LTR
-->


<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-left box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<!--
LTR INFO: box-icon-left or box-icon-right - are the same on LTR
-->


<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-left">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-left">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="b-0 fa fa-tablet" style="background-color:#ee7954; color:#fff;"></i>
				<h2>Fully Reposnive</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="b-0 fa fa-random" style="background-color:#f06793; color:#fff;"></i>
				<h2>Clean Design</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="b-0 fa fa-tint" style="background-color:#ebba63; color:#fff;"></i>
				<h2>Reusable Elements</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-transparent box-icon-large">
			<a class="box-icon-title" href="#">
				<i class="b-0 fa fa-cogs" style="background-color:#ab71bd; color:#fff;"></i>
				<h2>Multipurpose</h2>
			</a>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			<a class="box-icon-more font-lato fw-300" href="#">Learn More</a>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<div class="box-icon-title">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<div class="box-icon-title">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<div class="box-icon-title">
				<i class="fa fa-tint"></i>
				<h2>Reusable Elements</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large">
			<div class="box-icon-title">
				<i class="fa fa-cogs"></i>
				<h2>Multipurpose</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-4">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa">1</i>
				<h2>PRODUCT VIEW</h2>
			</div>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa">2</i>
				<h2>SHOP CART</h2>
			</div>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa">3</i>
				<h2>CHECKOUT</h2>
			</div>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-6">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

	<div class="col-md-6">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa fa-random"></i>
				<h2>Clean Design</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-12">

		<div class="box-icon box-icon-center box-icon-round box-icon-transparent box-icon-large box-icon-content">
			<div class="box-icon-title">
				<i class="fa fa-tablet"></i>
				<h2>Fully Reposnive</h2>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-4">

		<div class="box-video text-center">

			<div class="embed-responsive embed-responsive-16by9">
				<iframe class="embed-responsive-item" src="http://player.vimeo.com/video/8408210" width="800" height="450"></iframe>
			</div>

			<a class="box-video-title" href="#">
				<h2>VIMEO EMBED VIDEO</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
			<a class="btn btn-default" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-video text-center">

			<div class="embed-responsive embed-responsive-16by9">
				<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/watch?v=W7Las-MJnJo"></iframe>
			</div>

			<a class="box-video-title" href="#">
				<h2>YOUTUBE EMBED VIDEO</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
			<a class="btn btn-default" href="#">Learn More</a>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-video text-center">

			<iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154936822&color=a94545&auto_play=false&hide_related=false&visual=true"></iframe>

			<a class="box-video-title" href="#">
				<h2>AUDIO EMBED MUSIC</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
			<a class="btn btn-default" href="#">Learn More</a>
		</div>

	</div>

</div>

IMAGE LIGHTBOX

Nullam id dolor id nibh ultricies vehicula ut id elit.

LINK IMAGE

Nullam id dolor id nibh ultricies vehicula ut id elit.

VIDEO LIGHTBOX

Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="row">

	<div class="col-md-4">

		<div class="box-image text-center">
			<a class="image-hover lightbox" href="demo_files/images/1200x800/15-min.jpg" data-plugin-options='{"type":"image"}'>
				<img class="img-fluid" src="demo_files/images/600x400/15-min.jpg" alt="" />
			</a>

			<a class="box-image-title" href="#">
				<h2>IMAGE LIGHTBOX</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-image text-center">
			<a class="image-hover" href="#">
				<img class="img-fluid" src="demo_files/images/600x400/20-min.jpg" alt="" />
			</a>

			<a class="box-image-title" href="#">
				<h2>LINK IMAGE</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-image text-center">
			<a class="image-hover lightbox" href="http://vimeo.com/56624256" href="" data-plugin-options='{"type":"iframe"}'>
				<img class="img-fluid" src="demo_files/images/600x400/25-min.jpg" alt="" />
			</a>

			<a class="box-image-title">
				<h2>VIDEO LIGHTBOX</h2>
			</a>
			<p class="font-lato fw-300">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		</div>

	</div>

</div>

Flip Boxes

<div class="row">

	<div class="col-md-4">

		<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1">
					<div class="box-icon-title">
						<i class="fa fa-tint"></i>
						<h2>Fully Reposnive</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1">
					<div class="box-icon-title">
						<i class="fa fa-random"></i>
						<h2>Clean Design</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

	<div class="col-md-4">

		<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1">
					<div class="box-icon-title">
						<i class="fa fa-cogs"></i>
						<h2>Multipurpose</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-static box-border-top">
			<div class="box-title">
				<h4>Color Flip Boxes</h4>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p>
			<p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1" style="background-color:#a0ce4e;">
					<div class="box-icon-title">
						<i class="fa fa-refresh fa-spin"></i>
						<h2>Fully Reposnive</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2" style="background-color:#a0ce4e;">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1" style="background-color:#cb9536;">
					<div class="box-icon-title">
						<i class="fa fa-random"></i>
						<h2>Clean Design</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2" style="background-color:#cb9536;">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1" style="background-color:#73b9dc;">
					<div class="box-icon-title">
						<i class="fa fa-cogs"></i>
						<h2>Multipurpose</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2" style="background-color:#73b9dc;">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="btn btn-translucid btn-lg btn-block">PURCHASE NOW</a>
				</div>
			</div>
		</div>

	</div>

</div>

Image Flip Boxes

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.

Jessica Doe

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

Jessica Doe

---

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

Felicia Doe

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

Felicia Doe

---

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

Delia Doe

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

Delia Doe

---

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere

<div class="row">

	<div class="col-md-3">

		<div class="box-static box-border-top">
			<div class="box-title">
				<h4>Image Flip Boxes</h4>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p>
			<p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1 box-danger">
					<div class="box-icon-title">
						<img class="img-fluid" src="demo_files/images/600x400/16-min.jpg" alt="" />
						<h2>Fully Reposnive</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2 box-danger">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="social-icon social-facebook">
						<i class="fa fa-facebook"></i>
						<i class="fa fa-facebook"></i>
					</a>
					<a href="#" class="social-icon social-twitter">
						<i class="fa fa-twitter"></i>
						<i class="fa fa-twitter"></i>
					</a>
					<a href="#" class="social-icon social-linkedin">
						<i class="fa fa-linkedin"></i>
						<i class="fa fa-linkedin"></i>
					</a>
				</div>
			</div>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1 box-warning">
					<div class="box-icon-title">
						<img class="img-fluid" src="demo_files/images/600x400/19-min.jpg" alt="" />
						<h2>Clean Design</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2 box-warning">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="social-icon social-facebook">
						<i class="fa fa-facebook"></i>
						<i class="fa fa-facebook"></i>
					</a>
					<a href="#" class="social-icon social-twitter">
						<i class="fa fa-twitter"></i>
						<i class="fa fa-twitter"></i>
					</a>
					<a href="#" class="social-icon social-linkedin">
						<i class="fa fa-linkedin"></i>
						<i class="fa fa-linkedin"></i>
					</a>

				</div>
			</div>
		</div>

	</div>

	<div class="col-md-3">

		<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1 box-info">
					<div class="box-icon-title">
						<img class="img-fluid" src="demo_files/images/600x400/31-min.jpg" alt="" />
						<h2>Multipurpose</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2 box-info">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
					<a href="#" class="social-icon social-facebook">
						<i class="fa fa-facebook"></i>
						<i class="fa fa-facebook"></i>
					</a>
					<a href="#" class="social-icon social-twitter">
						<i class="fa fa-twitter"></i>
						<i class="fa fa-twitter"></i>
					</a>
					<a href="#" class="social-icon social-linkedin">
						<i class="fa fa-linkedin"></i>
						<i class="fa fa-linkedin"></i>
					</a>

				</div>
			</div>
		</div>

	</div>

</div>

Image Flip Boxes

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.

Jessica Doe

Jessica Doe

---

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.

Felicia Doe

Felica Doe

---

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.

<div class="row">

	<div class="col-md-3">

		<div class="box-static box-border-top">
			<div class="box-title">
				<h4>Image Flip Boxes</h4>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p>
			<p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p>
		</div>

	</div>

	<div class="col-md-9">
		<div class="row">

			<div class="col-md-6">

				<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
					<div class="front">
						<div class="box1">
							<div class="box-icon-title">
								<img class="img-fluid" src="demo_files/images/600x400/27-min.jpg" alt="" />
								<h2>Jessica Doe</h2>
							</div>
						</div>
					</div>

					<div class="back">
						<div class="box2">
							<h4>Jessica Doe</h4>
							<hr />
							<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.</p>
							<a href="#" class="social-icon social-facebook">
								<i class="fa fa-facebook"></i>
								<i class="fa fa-facebook"></i>
							</a>
							<a href="#" class="social-icon social-twitter">
								<i class="fa fa-twitter"></i>
								<i class="fa fa-twitter"></i>
							</a>
							<a href="#" class="social-icon social-linkedin">
								<i class="fa fa-linkedin"></i>
								<i class="fa fa-linkedin"></i>
							</a>
						</div>
					</div>
				</div>

			</div>

			<div class="col-md-6">

				<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
					<div class="front">
						<div class="box1">
							<div class="box-icon-title">
								<img class="img-fluid" src="demo_files/images/600x400/26-min.jpg" alt="" />
								<h2>Felicia Doe</h2>
							</div>
						</div>
					</div>

					<div class="back">
						<div class="box2">
							<h4>Felica Doe</h4>
							<hr />
							<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere.</p>
							<a href="#" class="social-icon social-facebook">
								<i class="fa fa-facebook"></i>
								<i class="fa fa-facebook"></i>
							</a>
							<a href="#" class="social-icon social-twitter">
								<i class="fa fa-twitter"></i>
								<i class="fa fa-twitter"></i>
							</a>
							<a href="#" class="social-icon social-linkedin">
								<i class="fa fa-linkedin"></i>
								<i class="fa fa-linkedin"></i>
							</a>
						</div>
					</div>
				</div>

			</div>


		</div>
	</div>
</div>

<div class="row">

	<div class="col-md-3">

		<div class="box-static box-border-top">
			<div class="box-title">
				<h4>Image Flip Boxes</h4>
			</div>
			<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus.</p>
			<p><small>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.</small></p>
		</div>

	</div>

	<div class="col-md-9">

		<div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
			<div class="front">
				<div class="box1">
					<div class="box-icon-title">
						<i class="fa fa-check"></i>
						<h2>Full Width</h2>
					</div>
					<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>
				</div>
			</div>

			<div class="back">
				<div class="box2">
					<h4>BACK SIDE</h4>
					<hr />
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.</p>
				</div>
			</div>
		</div>

	</div>
</div>

<!-- BOX 1 -->
<div class="box-static box-border-top p-30">

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 1</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 1 -->


<!-- BOX 2 -->
<div class="box-static box-transparent box-border-top p-30">

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 2</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 2 -->


<!-- BOX 3 -->
<div class="box-static box-transparent p-30">

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 3</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 3 -->


<!-- BOX 4 -->
<div class="box-static box-transparent box-bordered p-30 relative">
	<div class="ribbon"><!-- ribbon inside relative box -->
		<div class="ribbon-inner">POPULAR</div>
	</div><!-- /ribbon -->

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 4</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 4 -->


<!-- BOX 5 -->
<div class="box-static box-border-top box-dark p-30">

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 5</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 5 -->


<!-- BOX 6 -->
<div class="box-static box-border-top box-color p-30">

	<div class="box-title mb-30">
		<h2 class="fs-20">Box 6</h2>
	</div>
	
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium. 
</div>
<!-- /BOX 6 -->