HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/magento/app/code/Infortis/Base/etc/importexport/cms/pages/
Current File : /home/htlwork.com/www/dev/magento/app/code/Infortis/Base/etc/importexport/cms/pages/demo1.xml
<root>
   <pages>
      <page>
         <identifier>about-us-page</identifier>
         <title>Ultimo About Us Page</title>
         <is_active>1</is_active>
         <page_layout>2columns-right</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<div class="page-title">
	<h1>About Us Page</h1>
</div>

	<h3 style="margin-bottom: 20px;">Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</h3>
	<img src="{{media url="wysiwyg/infortis/ultimo/custom/landing/category01.jpg"}}" title="You can edit this block or replace it with custom content" alt="Sample banner" />
	<br><br>
	<span class="divider"></span>
	<br>

<div class="grid12-4 no-left-gutter">
	<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta.</strong></p>
	<p>Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p>
	<p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</p>
</div>

<div class="grid12-4">
	<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit.</strong></p>
	<p>Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper. Phasellus id massa. Pellentesque nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc augue. Aenean sed justo non leo vehicula laoreet. Praesent ipsum libero, auctor ac, tempus nec, tempor nec, justo. </p>
	<p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus. Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi. Vestibulum sapien dolor, aliquet nec, porta ac, malesuada a, libero. Praesent feugiat purus eget est. Nulla facilisi. Vestibulum tincidunt sapien eu velit. Mauris purus. Maecenas eget mauris eu orci accumsan feugiat. Pellentesque eget velit. Nunc tincidunt.</p>
</div>

<div class="grid12-4 no-right-gutter">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p>
	<p><strong>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</strong></p>
	<p>Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi.</p>
	<div class="divider"></div>
	<p>To all of you, from all of us at Magento Store - Thank you and Happy eCommerce!</p>
	<p style="line-height:1.2em;"><strong style="font:italic 2em Georgia, serif;">John Doe</strong><br /><small>Some important guy</small></p>
</div>
]]></content>
      </page>
      <page>
         <identifier>magento-banner-slideshow</identifier>
         <title>magento-banner-slideshow</title>
         <is_active>1</is_active>
         <page_layout>1column-full-width</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<div> <!-- <div style="background-color: #fbfbfb;"> -->



	<div class="container" style="max-width: 1170px;">
		<div class="inner-container" style="background-color: #fff;">

			<br/>
			<br/>
			<br/>

			<h3>Breakpoint 1200, slideshow without additional side banners</h3>

{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_0" 
}}

			<br/>
			<br/>
			<br/>

		</div>
	</div>



	<div class="container" style="max-width: 1170px;">
		<div class="inner-container" style="background-color: #fff;">

			<h3>Breakpoint 1200, slideshow with additional side banners</h3>

{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_A" 
banner="sample_slideshow_additional_banners_a" 
banner_position="right"
}}

			<br/>
			<br/>
			<br/>

		</div>
	</div>



	<div class="container" style="max-width: 1170px;">
		<div class="inner-container" style="background-color: #fff;">

			<h3>Breakpoint 1200, slideshow with additional side banners, no gutter</h3>

{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_a" 
banner="sample_slideshow_additional_banners_a2" 
banner_position="right" 
gutter="0" 
}}

			<br/>
			<br/>
			<br/>

		</div>
	</div>



	<div class="container" style="max-width: 1380px;">
		<div class="inner-container" style="background-color: #fff;">

			<h3>Breakpoint 1440, slideshow with additional side banners</h3>


{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_B" 
banner="sample_slideshow_additional_banners_b" 
banner_position="right" 
}}

			<br/>
			<br/>
			<br/>

		</div>
	</div>



	<div class="container" style="max-width: 1500px;">
		<div class="inner-container" style="background-color: #fff;">

			<h3>Breakpoint 1680, slideshow with additional side banners</h3>


{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_C" 
banner="sample_slideshow_additional_banners_c" 
banner_position="right" 
}}

			<br/>
			<br/>
			<br/>

		</div>
	</div>



	<div class="container" style="max-width: none;">

			<h3>Full width, slideshow without additional side banners</h3>

{{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" 
slides="sample_slideshow_full_width" 
}}

			<br/>
			<br/>
			<br/>

	</div>



	<!-- <div class="container" style="max-width: 1170px;">
		<div class="inner-container" style="background-color: #fff;">

			<h3>Slideshow</h3>

			<br/>
			<br/>
			<br/>

		</div>
	</div> -->



</div>
]]></content>
      </page>
      <page>
         <identifier>magento-banners</identifier>
         <title>Magento banners</title>
         <is_active>1</is_active>
         <page_layout>2columns-right</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<br />
<h1>Banners with image, caption and hover effects</h1>

<p class="lead">Image banners can be useful in many different places in your Magento store. You can place banners just about anywhere using simple markup. With additional utility classes you can easily add caption and multiple hover effects to your banners.</p>



<!-- ############################################## -->
<h2 class="border-bottom">Simple image banner</h2>

<p>The image and the entire content of the banner is wrapped inside an element with the <code>ban</code> class. The image needs to be marked with the <code>image</code> class. Here's a minimal example to create a simple banner:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
		</div>
	</div>

</div>
<br />



<!-- ############################################## -->
<!-- <br />
<h2 class="border-bottom">Banner with simple caption</h2>

<p>To create a caption for the banner, add an element with the <code>cap</code> class inside the banner. Inside the caption you can add any text elements, such as headings or paragraphs of text. The caption will be displayed over the image with a color overlay.</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;div class="cap"&gt;
		&lt;h3&gt;Caption Example&lt;/h3&gt;
		&lt;p&gt;This is a sample text&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>This is a sample text</p>
			</div>
		</div>
	</div>

</div>

<br />
<br />
<p>You can extend this simple example with additional features:</p>
<ul class="disc">
	<li>by adding more of the predefined CSS classes</li>
	<li>by adding more HTML inside the caption</li>
</ul>
<p>Below on this page you can see examples of banners with many different combinations of hover effects and captions. All available features are described in the user guide. You can also import this sample page in your Magento and use one of the dozens of ready-to-use code examples.</p> -->



<!-- ############################################## -->
<br />
<h2 class="border-bottom">HTML elements for banners</h2>

<p>In our examples of banners and captions we are going to use a generic HTML element <code>&lt;div&gt;</code>, but you can as well use a HTML5 element <code>&lt;figure&gt;</code> for banners and <code>&lt;figcaption&gt;</code> for caption.</p>

<p>Note that if you decide to use these elements, the <code>&lt;figcaption&gt;</code> must be a direct child of the <code>&lt;figure&gt;</code>. Also, the <code>&lt;figcaption&gt;</code> must be its first or last child.</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;figure class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;figcaption class="cap"&gt;
		&lt;h3&gt;Caption Example&lt;/h3&gt;
		&lt;p&gt;This is a sample text&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;
	</code></pre>
</div>



<!-- ############################################## -->
<br />
<h2 class="border-bottom">Banner with hyperlink</h2>

<p>To create a banner with a hyperlink to other pages (or to locations within the same page), wrap the banner inside the anchor element <code>&lt;a&gt;</code>. Inside the <code>href=""</code> attribute put a URL that the hyperlink points to. You can wrap the entire banner, or only the caption.</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href="http://example.com"&gt;
	&lt;div class="ban"&gt;
		&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>



<!-- ############################################## -->
<br />
<h2 class="border-bottom">Banner with image hover effect</h2>

<p>To add a hover effect to the banner, add an effect class to the banner (to the element with the <code>ban</code> class). The following classes are available: <code>ban-effect-1</code>, <code>ban-effect-2</code>, <code>ban-effect-3</code>, <code>ban-effect-fade-out</code>, <code>ban-effect-grayscale-in</code>, <code>ban-effect-grayscale-out</code>, <code>ban-effect-blur-in</code>, <code>ban-effect-blur-out</code>.</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban ban-effect-1"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
		</div>
	</div>

</div>

<br />
<br />
<p>Below you can see more examples.</p>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Zoom in</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-1">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Zoom out</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-2">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-b.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Rotate</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-3">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-b.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Fade out</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Blur in</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-blur-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Blur out</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-blur-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Grayscale in</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-grayscale-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Grayscale out</h4>
		<br />
		<a href="#">
			<div class="ban ban-effect-grayscale-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<br />
<br />
<h2 class="border-bottom">Banner with color overlay</h2>

<p>To add a color overlay to the banner, add a caption but without any text. Captions are described later on this page, but in this section we will only use an <strong>empty</strong> caption element.</p>
<p>To add an empty caption to the banner, simply add an element with the <code>cap</code> class inside the banner: <code>&lt;div class="cap"&gt;&lt;/div&gt;</code>. The empty caption element will be displayed as a color overlay. Here's an example:</p>
<!-- <p>To add a color overlay to the banner, add a caption but without any text. Simply add an element with the <code>cap</code> class inside the banner: &lt;div class="cap"&gt;&lt;/div&gt;. The empty caption element will be displayed as a color overlay.</p> -->

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;div class="cap"&gt;&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
			<div class="cap"></div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Color of the overlay</h3>
<br />

<p>To change the color of the overlay, add an inline CSS to the caption element to override the default value of its <code>background-color</code> property. You can add semi-transparent color using the <code>rgba()</code> functional notation allowing specification of the opacity of a color. For example:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/wide02.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;div class="cap" style="background-color: rgba(135, 195, 30, 0.45);"&gt;&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
	<ul class="ic-ul">
		<li>
			<span class="ic ic-info ic-2x ic-li"></span>
			The default color of the overlay can be configured in the admin panel:<br/>
			<em>Theme Design > Colors</em>
		</li>
	</ul>
</div>
<br />

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/wide02.jpg"}}" alt="Banner" />
			<div class="cap" style="background-color: rgba(136, 30, 195, 0.35);"></div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Color overlay with fade in/out effect</h3>
<br />

<p>By default the color overlay (the caption element) covers the banner all the time. But you can change it with two useful classes. The <code>ban-caption-fade-out</code> class will make the overlay fade out on mouse hover over the banner. And the <code>ban-caption-fade-in</code> class will make the overlay fade in only on mouse hover over the banner.</p>

<br />
<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
	<ul class="ic-ul">
		<li>
			<span class="ic ic-info ic-2x ic-li"></span>
			Add these classes to the banner element, <br /><strong>not</strong> to the caption element.
		</li>
	</ul>
</div>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban ban-caption-fade-out"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample01.jpg"&rbrace;&rbrace;" alt="Banner1" /&gt;
	&lt;div class="cap" style="background-color: rgba(245, 88, 86, 0.75);"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="ban ban-caption-fade-in"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample01-c.jpg"&rbrace;&rbrace;" alt="Banner2" /&gt;
	&lt;div class="cap" style="background-color: rgba(0, 0, 0, 0.85);"&gt;&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner1" />
				<div class="cap" style="background-color: rgba(245, 88, 86, 0.75);"></div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner2" />
				<div class="cap" style="background-color: rgba(0, 0, 0, 0.85);"></div>
			</div>
		</a>
	</div>

</div>

<br />
<br />
<p>Below you can see more examples.</p>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Custom color and transparency level</h3>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: #f55856;">solid, #f55856</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);">rgba(91, 210, 236, 0.85)</div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(135, 195, 30, 0.45);">rgba(135, 195, 30, 0.45)</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(217, 152, 240, 0.15);">rgba(217, 152, 240, 0.15)</div>
			</div>
		</a>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Examples of banners with combined hover effect and color overlay</h3>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap"></div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);"></div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-effect-blur-in ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(245, 88, 86, 0.55);"></div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3 ban-effect-blur-in ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(245, 88, 86, 0.35);"></div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-blur-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-blur-out ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(255, 55, 15, 0.7);"></div>
			</div>
		</a>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<br />
<br />
<h2 class="border-bottom">Banner with caption</h2>

<p>To create a caption for the banner, add an element with the <code>cap</code> class inside the banner. Inside the caption you can add any text elements, such as headings or paragraphs of text. The caption will be displayed over the image with a color overlay (background color). Here's an example:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;div class="cap"&gt;
		&lt;h2&gt;Caption Example&lt;/h2&gt;
		&lt;p&gt;Create responsive banners in your Magento with ease. Add image, caption &lt;br /&gt;and hover effects. Add any content inside banner caption.&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
	<ul class="ic-ul">
		<li>
			<span class="ic ic-info ic-2x ic-li"></span>
			The default color of the overlay can be configured in the admin panel:<br/>
			<em>Theme Design > Colors</em>
		</li>
	</ul>
</div>
<br />

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
			<div class="cap">
				<h2>Caption Example</h2>
				<p>Create responsive banners in your Magento with ease. Add image, caption <br />
				and hover effects. Add any content inside banner caption.</p>
			</div>
		</div>
	</div>

</div>

<br />
<br />
<p>You can extend this simple example with additional features:</p>
<ul class="disc">
	<li>by adding more of the predefined CSS classes to the banner and the caption element</li>
	<li>by adding more HTML (e.g. icons) inside the caption</li>
</ul>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Inline styles</h3>
<br />

<p>If you want to change the style of the caption, e.g. change the font size or the color, you can do it with <strong>inline CSS styles</strong>. Add the <code>style</code> attribute to the caption element and specify values of selected properties such as <code>font-size</code>, <code>font-family</code>, <code>color</code>, <code>background-color</code> etc.</p>
<p>In the example below, we override the default values of the <code>color</code> and the <code>background-color</code> properties of the caption element and the <code>font-size</code> property of <code>&lt;h2&gt;</code> and <code>&lt;p&gt;</code> elements. To make the background color semi-transparent, use the <code>rgba()</code> functional notation.</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class=&quot;ban&quot;&gt;
	&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
	&lt;div class=&quot;cap&quot; style=&quot;color: #000; background-color: rgba(255, 254, 84, 0.6);&quot;&gt;
		&lt;h2 style=&quot;font-size: 32px;&quot;&gt;&lt;span class=&quot;ic ic-lightbulb&quot;&gt;&lt;/span&gt; Caption Example&lt;/h2&gt;
		&lt;p style=&quot;font-size: 18px;&quot;&gt;Create responsive banners in your Magento with ease.&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
			<div class="cap" style="color: #000; background-color: rgba(255, 254, 84, 0.6);">
				<h2 style="font-size: 32px;"><span class="ic ic-lightbulb"></span> Caption Example</h2>
				<p style="font-size: 18px;">Create responsive banners in your Magento with ease.</p>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Remove caption background color</h3>
<br />

<p>To get rid of the background color from the caption, add the <code>cap-no-bg</code> class to the caption element. This will make the caption element transparent, only the text will be visible over the banner:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class=&quot;ban ban-effect-1&quot;&gt;
	&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
	&lt;div class=&quot;cap cap-no-bg&quot;&gt;
		&lt;h2 style=&quot;font-size: 32px;&quot;&gt;&lt;span class=&quot;ic ic-star&quot;&gt;&lt;/span&gt; Caption Example&lt;/h2&gt;
		&lt;p style=&quot;font-size: 18px;&quot;&gt;Create responsive banners in your Magento with ease.&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
			<div class="cap cap-no-bg">
				<h2 style="font-size: 32px;"><span class="ic ic-star"></span> Caption Example</h2>
				<p style="font-size: 18px;">Create responsive banners in your Magento with ease.</p>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption with fade in/out effect</h3>
<br />

<p>By default the caption element covers the banner all the time. But you can change it with two useful classes. The <code>ban-caption-fade-out</code> class will make the caption fade out on mouse hover over the banner. And the <code>ban-caption-fade-in</code> class will make the caption fade in on mouse hover over the banner.</p>
<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
	<ul class="ic-ul">
		<li>
			<span class="ic ic-info ic-2x ic-li"></span>
			Add these classes to the banner element, <br /><strong>not</strong> to the caption element.
		</li>
	</ul>
</div>
<br />
<p>Here's a code example of a caption with fade out effect:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href=&quot;#&quot;&gt;
	&lt;div class=&quot;ban ban-caption-fade-out&quot;&gt;
		&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample02.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
		&lt;div class=&quot;cap&quot;&gt;
			&lt;h4&gt;This caption will fade out on hover.&lt;/h4&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>

<br />
<p>Below you can see examples of both effects:</p>

<br />
<div class="row">

	<div class="col-md-6">
		<br />
		<h4>Fade out</h4>
		<br />
		<a href="#">
			<div class="ban ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
				<div class="cap">
					<h4>This caption will fade out on hover.</h4>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Fade in</h4>
		<br />
		<a href="#">
			<div class="ban ban-caption-fade-in">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
				<div class="cap">
					<h4>This caption will fade in on hover.</h4>
				</div>
			</div>
		</a>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Center caption</h2>
<br />

<p>To center the caption horizontally, add the <code>cap-center-horizontally</code> class to the caption element. To center the caption vertically, add the <code>cap-center-vertically</code> class to the caption element. Both classes can be used together.</p>
<p>Here's a code example of a caption centered vertically and horizontally:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class=&quot;ban ban-effect-1 ban-caption-fade-out&quot;&gt;
	&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample02.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
	&lt;div class=&quot;cap cap-center-vertically cap-center-horizontally&quot;&gt;
		&lt;h2&gt;Caption Example&lt;/h2&gt;
		&lt;p&gt;Create responsive banners in your Magento with ease&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Default (not centered)</h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap">
				<h2>Caption Example</h2>
				<p>Create responsive banners in your Magento with ease</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Center horizontally</h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-center-horizontally">
				<h2>Caption Example</h2>
				<p>Create responsive banners in your Magento with ease</p>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Center vertically</h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-center-vertically">
				<h2>Caption Example</h2>
				<p>Create responsive banners in your Magento with ease</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Center vertically and horizontally</h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-center-vertically cap-center-horizontally">
				<h2>Caption Example</h2>
				<p>Create responsive banners in your Magento with ease</p>
			</div>
		</div>
	</div>

</div>




<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Center vertically, full cover</h2>
<br />

<p>When the caption is centered vertically, if you want the caption to cover the entire banner, you need to use <strong>two nested caption elements</strong>. The <strong>inner</strong> caption element needs to have the <code>cap-center-vertically</code> class. The additional <code>cap-no-bg</code> class will remove the background color from the inner caption element.</p>
<p>Here's the code example of the inner caption element without the background color:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class=&quot;ban ban-effect-1 ban-caption-fade-out&quot;&gt;
	&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample02.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
	&lt;div class=&quot;cap&quot;&gt;
		&lt;div class=&quot;cap cap-center-vertically cap-center-horizontally cap-no-bg&quot;&gt;
			&lt;h2&gt;Caption Example&lt;/h2&gt;
			&lt;p&gt;Create responsive banners in your Magento with ease&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<p>Below you can see examples of the inner caption element with and without the <code>cap-no-bg</code> class:</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>Inner caption with <code>cap-no-bg</code></h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap">
				<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
					<h2>Caption Example</h2>
					<p>Create responsive banners in your Magento with ease</p>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>Inner caption without <code>cap-no-bg</code></h4>
		<br />
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap">
				<div class="cap cap-center-vertically cap-center-horizontally">
					<h2>Caption Example</h2>
					<p>Create responsive banners in your Magento with ease</p>
				</div>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Vertically centered icon</h3>
<br />

<!-- <p>When the caption is centered vertically and horizontally, you can create a banner with an icon aligned exactly in the center. Add an icon inside the inner caption element:</p> -->
<p>To create a banner with an icon aligned exactly in the center of the banner, make the caption element centered vertically and horizontally and add an icon inside the inner caption element:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href=&quot;#&quot;&gt;
	&lt;div class=&quot;ban ban-effect-1 ban-caption-fade-out&quot;&gt;
		&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample01.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
		&lt;div class=&quot;cap&quot; style=&quot;background-color: rgba(91, 210, 236, 0.85);&quot;&gt;
			&lt;div class=&quot;cap cap-center-vertically cap-center-horizontally cap-no-bg&quot;&gt;
				&lt;span class=&quot;ic ic-zoomin ic-4x&quot;&gt;&lt;/span&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>

<br />
<p>Below you can see some examples of banners with an icon aligned in the center:</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-zoomin ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-2 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(245, 88, 86, 0.75);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-zoomout ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-b.jpg"}}" alt="Banner" />
				<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
					<span class="ic ic-24hours ic-5x" style="color: rgb(0, 0, 0);"></span>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(100, 86, 245, 0.6);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-gift ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-effect-blur-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
				<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
					<span class="ic ic-heart-o ic-4x"></span>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-blur-out ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(0, 0, 0, 0.55);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-cart ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption - positioning</h2>
<br />

<p>To set the position of the caption, use the following classes: <code>cap-top</code>, <code>cap-bottom</code>, <code>cap-left</code>, <code>cap-right</code>, <code>cap-top-left</code>, <code>cap-top-right</code>, <code>cap-bottom-left</code>, <code>cap-bottom-right</code>.</p>

<p>Here's a code example of a caption placed at the bottom of the banner:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class="ban ban-effect-1 ban-caption-fade-out"&gt;
	&lt;img class="image" src="&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample02.jpg&quot;&rbrace;&rbrace;" alt="Banner" /&gt;
	&lt;div class="cap cap-bottom"&gt;
		&lt;h3 class="no-margin"&gt;Caption Example&lt;/h3&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<p>Below you can see examples of all available positions:</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-bottom">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-left">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-right">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top-left">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top-right">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-left cap-center-vertically">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-right cap-center-vertically">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-bottom-left">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1 ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-bottom-right">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption - precise positioning</h2>
<br />

<p>To position the caption with more precision, you can use the classes presented below. The number at the end of each class name indicates the value (percentage) by which the caption will be moved in the selected direction. In the <strong>vertical direction</strong> the percentage is calculated with respect to the height of the entire banner. In the <strong>horizontal direction</strong> the percentage is calculated with respect to the width of the entire banner.</p>
<p>For example, the <code>cap-push-down-10</code> class will push the caption down by 10%. Here's the list of all available classes:</p>
<br />
<div class="row">

	<div class="col-md-3 col-sm-6">
		<strong>Push down:</strong>
		<ul class="disc">
			<li><code>cap-push-down-5</code></li>
			<li><code>cap-push-down-10</code></li>
			<li><code>cap-push-down-15</code></li>
			<li><code>cap-push-down-20</code></li>
			<li><code>cap-push-down-25</code></li>
			<li><code>cap-push-down-30</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Push up:</strong>
		<ul class="disc">
			<li><code>cap-push-up-5</code></li>
			<li><code>cap-push-up-10</code></li>
			<li><code>cap-push-up-15</code></li>
			<li><code>cap-push-up-20</code></li>
			<li><code>cap-push-up-25</code></li>
			<li><code>cap-push-up-30</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Push left:</strong>
		<ul class="disc">
			<li><code>cap-push-left-5</code></li>
			<li><code>cap-push-left-10</code></li>
			<li><code>cap-push-left-15</code></li>
			<li><code>cap-push-left-20</code></li>
			<li><code>cap-push-left-25</code></li>
			<li><code>cap-push-left-30</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Push right:</strong>
		<ul class="disc">
			<li><code>cap-push-right-5</code></li>
			<li><code>cap-push-right-10</code></li>
			<li><code>cap-push-right-15</code></li>
			<li><code>cap-push-right-20</code></li>
			<li><code>cap-push-right-25</code></li>
			<li><code>cap-push-right-30</code></li>
		</ul>
	</div>

</div>

<br />
<p>Below you can see an example of a caption which is pushed up by 20% and pushed right by 15%.
</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href=&quot;#&quot;&gt;
	&lt;div class=&quot;ban ban-effect-1&quot;&gt;
		&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/wide01.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
		&lt;div class=&quot;cap cap-push-up-20 cap-push-right-15&quot; style=&quot;background-color: rgba(30, 195, 123, 0.7);&quot;&gt;
			&lt;h2&gt;Example of Banner Caption&lt;/h2&gt;
			&lt;p&gt;Create custom banners with captions&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-12">
		<a href="#">
			<div class="ban ban-effect-1">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/wide01.jpg"}}" alt="Banner" />
				<div class="cap cap-push-up-20 cap-push-right-15" style="background-color: rgba(30, 195, 123, 0.7);">
					<h2>Example of Banner Caption</h2>
					<p>Create custom banners with captions</p>
				</div>
			</div>
		</a>
	</div>

</div>

<br />
<p>Below you can see more examples of positioning.</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>down 10%, right 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-push-down-10 cap-push-right-10">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>down 10%, left 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-push-down-10 cap-push-left-10">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>right 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-center-vertically cap-push-right-10">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>left 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-center-vertically cap-push-left-10">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<br />
		<h4>up 10%, right 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-push-up-10 cap-push-right-10" style="background-color: rgba(245, 88, 86, 0.85);">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<br />
		<h4>up 10%, left 10%</h4>
		<br />
		<div class="ban ban-effect-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-push-up-10 cap-push-left-10" style="background-color: rgba(0, 0, 0, 0.6);">
				<h3 class="no-margin">Caption Example</h3>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption effects</h2>
<br />

<p>To add eye-catching hover effects for the caption, add classes listed below to the banner element:</p>

<br />
<div class="row">

	<div class="col-md-3 col-sm-6">
		<strong>Fade:</strong>
		<ul class="disc">
			<li><code>ban-caption-fade-out</code></li>
			<li><code>ban-caption-fade-in</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Slide:</strong>
		<ul class="disc">
			<li><code>ban-caption-slide-up</code></li>
			<li><code>ban-caption-slide-down</code></li>
			<li><code>ban-caption-slide-left</code></li>
			<li><code>ban-caption-slide-right</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Push:</strong>
		<ul class="disc">
			<li><code>ban-caption-push-up</code></li>
			<li><code>ban-caption-push-down</code></li>
		</ul>
	</div>
	<div class="col-md-3 col-sm-6">
		<strong>Hinge:</strong>
		<ul class="disc">
			<li><code>ban-caption-hinge-up</code></li>
			<li><code>ban-caption-hinge-down</code></li>
			<li><code>ban-caption-hinge-left</code></li>
			<li><code>ban-caption-hinge-right</code></li>
		</ul>
	</div>

</div>

<br />
<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
	<ul class="ic-ul">
		<li>
			<span class="ic ic-info ic-2x ic-li"></span>
			Add these classes to the banner element, <br /><strong>not</strong> to the caption element.
		</li>
	</ul>
</div>
<br />
<p>Here's a code example of a banner with caption "hinge up" effect:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;div class=&quot;ban ban-caption-hinge-up&quot;&gt;
	&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample01.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
	&lt;div class=&quot;cap&quot;&gt;
		&lt;h3&gt;Caption Example&lt;/h3&gt;
		&lt;p&gt;Create custom banners with captions&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
	</code></pre>
</div>

<br />
<p>Below you can see examples of all caption effects.</p>

<br />
<h4>Fade</h4>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-fade-out">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-fade-in">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>

<br />
<h4>Slide</h4>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-slide-up">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-slide-down">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-slide-left">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-slide-right">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>

<br />
<h4>Push</h4>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-push-up">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-push-down">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>

<br />
<h4>Hinge</h4>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-hinge-up">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-hinge-down">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-caption-hinge-left">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap" style="background-color: rgba(135, 195, 30, 0.85);">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-caption-hinge-right">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
			<div class="cap" style="background-color: rgba(0, 0, 0, 0.50);">
				<h3>Caption Example</h3>
				<p>Create custom banners with captions</p>
			</div>
		</div>
	</div>

</div>



<!-- ============================================== -->
<!-- <br />
<br />
<h3 class="border-bottom">Vertically centered icon</h3>
<br />

<p>When the caption is centered vertically, add an icon inside the inner caption element:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href=&quot;#&quot;&gt;
	&lt;div class=&quot;ban ban-effect-1 ban-caption-fade-out&quot;&gt;
		&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample01.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
		&lt;div class=&quot;cap&quot; style=&quot;background-color: rgba(91, 210, 236, 0.85);&quot;&gt;
			&lt;div class=&quot;cap cap-center-vertically cap-center-horizontally cap-no-bg&quot;&gt;
				&lt;span class=&quot;ic ic-zoomin ic-4x&quot;&gt;&lt;/span&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>

<br />
<p>Below you can see more examples with icons:</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-zoomin ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-2 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(245, 88, 86, 0.75);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-zoomout ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-b.jpg"}}" alt="Banner" />
				<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
					<span class="ic ic-24hours ic-5x" style="color: rgb(0, 0, 0);"></span>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-3 ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(100, 86, 245, 0.6);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-gift ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1 ban-effect-blur-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner" />
				<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
					<span class="ic ic-heart-o ic-4x"></span>
				</div>
			</div>
		</a>
	</div>

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-blur-out ban-caption-fade-out">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
				<div class="cap" style="background-color: rgba(0, 0, 0, 0.55);">
					<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
						<span class="ic ic-cart ic-4x"></span>
					</div>
				</div>
			</div>
		</a>
	</div>

</div> -->



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption with text background</h2>
<br />

<p>To create a caption with background color behind each block of text, you need to make a few steps:</p>
<p><strong>1.</strong> Mark each block of text inside the caption element with the <code>text</code> class.</p>
<p><strong>2.</strong> Add these two classes to the caption element:</p>
<ul class="disc">
	<li><code>cap-no-bg</code> class which removes the background color from the caption element</li>
	<li><code>cap-text-bg</code> class which adds the background color to text blocks</li>
</ul>
<p><strong>3.</strong> Add one of these classes to the caption element to choose the tone of the text background - dark (semi-transparent black) or light (semi-transparent white):</p>
<ul class="disc">
	<li><code>cap-text-bg-dark-1</code></li>
	<li><code>cap-text-bg-dark-2</code></li>
	<li><code>cap-text-bg-dark-3</code></li>
	<li><code>cap-text-bg-light-1</code></li>
	<li><code>cap-text-bg-light-2</code></li>
	<li><code>cap-text-bg-light-3</code></li>
</ul>

<br />
<p>Here's an example of a caption with dark text background:</p>

<br />
<div class="highlight">
	<pre><code class="html">
&lt;a href=&quot;#&quot;&gt;
	&lt;div class=&quot;ban&quot;&gt;
		&lt;img class=&quot;image&quot; src=&quot;&lbrace;&lbrace;media url=&quot;wysiwyg/infortis/banners/sample.jpg&quot;&rbrace;&rbrace;&quot; alt=&quot;Banner&quot; /&gt;
		&lt;div class=&quot;cap cap-no-bg cap-text-bg cap-text-bg-dark-3&quot;&gt;
			&lt;h2 class=&quot;text&quot;&gt;Caption Example&lt;/h2&gt;
			&lt;p class=&quot;text&quot;&gt;Create customizable banners with captions&lt;/p&gt;
			&lt;p class=&quot;text&quot;&gt;Responsive Magento theme&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/a&gt;
	</code></pre>
</div>

<br />
<div class="row">

	<div class="col-md-12">
		<a href="#">
			<div class="ban">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
				<div class="cap cap-no-bg cap-text-bg cap-text-bg-dark-3">
					<h2 class="text">Caption Example</h2>
					<p class="text">Create customizable banners with captions</p>
					<p class="text">Responsive Magento theme</p>
				</div>
			</div>
		</a>
	</div>

</div>

<br />
<p>Below you can see examples with different colors of text background.</p>

<br />
<br />
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-dark-1">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-dark-2">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-dark-3">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-light-1">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

</div>
<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-light-2">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="ban ban-effect-1">
			<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
			<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-light-3">
				<h3 class="text">Caption Example</h3>
				<p class="text">Create customizable banners with captions</p>
				<p class="text">Responsive Magento theme</p>
			</div>
		</div>
	</div>

</div>

<br />
<h4>Text background inside a link</h4>
<br />

<div class="row row-bottom-gutter">

	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
				<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-dark-1">
					<h3 class="text">Caption Example</h3>
					<p class="text">Create customizable banners with captions</p>
					<p class="text">Responsive Magento theme</p>
				</div>
			</div>
		</a>
	</div>
	<div class="col-md-6">
		<a href="#">
			<div class="ban ban-effect-1">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
				<div class="cap cap-top cap-no-bg cap-text-bg cap-text-bg-light-1">
					<h3 class="text">Caption Example</h3>
					<p class="text">Create customizable banners with captions</p>
					<p class="text">Responsive Magento theme</p>
				</div>
			</div>
		</a>
	</div>

</div>



<!-- ============================================== -->
<br />
<br />
<h3 class="border-bottom">Caption with complex content</h3>
<br />

<p>Inside the caption you can add any text elements, such as headings or paragraphs of text. You can also make it more complex by adding more elements inside the caption element, for example, a block of text with an icon and hover effect:</p>

<br />
<div class="row row-bottom-gutter">

	<div class="col-md-12">
		<a href="#">
			<div class="ban ban-effect-2">
				<img class="image" src="{{media url="wysiwyg/infortis/banners/wide01.jpg"}}" alt="Banner" />
				<div class="cap cap-top-right cap-push-down-10 cap-push-left-5 cap-no-bg" style="color: #000;">
					<div class="feature feature-icon-hover indent indent-size-xxxl">
						<span class="ic ic-2x ic-cart ib ib-size-xxl ib-ef-1 ib-ef-1b"></span>
						<h3 class="text" style="font-size: 36px;">Feature Title Example</h3>
						<p class="text" style="font-size: 22px;">Create responsive banners in your Magento with ease.<br />Add image, caption and hover effects.</p>
					</div>
				</div>
			</div>
		</a>
	</div>

</div>
]]></content>
      </page>
      <page>
         <identifier>magento-grid-system</identifier>
         <title>Responsive Grid system For Magento</title>
         <is_active>1</is_active>
         <page_layout>2columns-right</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<!-- Additional styles to for better presentation of grid examples -->

<style type="text/css">
h1 {
	margin-top: 40px;
}
h2, h3, h4 {
	margin-top: 25px;
}
.std > .row {
	/* Remove row outdent for this presentation */
	margin-left: 0;
	margin-right: 0;
}
.row {
	margin-bottom: 20px;
}
.row .row {
	margin-top: 10px;
	margin-bottom: 0;
}
.std [class*="col-"] {
	padding-top: 15px;
	padding-bottom: 15px;
	border: 1px solid #cadee2;
	border: 1px solid rgba(31, 68, 78, 0.15);
	background-color: #e8f9fd;
	/*box-shadow: inset 0 0 20px rgba(30, 59, 76, 0.1);*/
}
hr {
	margin-top: 40px;
	margin-bottom: 40px;
	border: 0;
	border-top: 1px solid #eee;
	height: 0;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
</style>

<div class="std">



	<!-- Examples from Bootstrap documentation: http://getbootstrap.com/css/#grid -->

	<br />
	<h1 style="margin-top: 0;" id="grid"><a class="anchorjs-link " href="#grid" aria-label="Anchor link for: grid" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Grid system</h1>

	<p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful utility classes for showing and hiding content by device via media query</p>


	<h2 id="grid-intro"><a class="anchorjs-link " href="#grid-intro" aria-label="Anchor link for: grid intro" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Introduction</h2>
	<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
	<ul class="disc">
			<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
			<li>Use rows to create horizontal groups of columns.</li>
			<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
			<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li>
			<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
			<li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
			<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
			<li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
			<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any <code>.col-md-*</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class is not present.</li>
	</ul>
	<p>Look to the examples for applying these principles to your code.</p>
	

	<h2 id="grid-options"><a class="anchorjs-link " href="#grid-options" aria-label="Anchor link for: grid options" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Grid options</h2>

	<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> <div class="table-responsive"> <table class="data-table table table-bordered table-striped"> <thead> <tr> <th></th> <th> Extra small devices <small>Phones (&lt;768px)</small> </th> <th> Small devices <small>Tablets (≥768px)</small> </th> <th> Medium devices <small>Desktops (≥992px)</small> </th> <th> Large devices <small>Desktops (≥1200px)</small> </th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row">Grid behavior</th> <td>Horizontal at all times</td> <td colspan="3">Collapsed to start, horizontal above breakpoints</td> </tr> <tr> <th class="text-nowrap" scope="row">Container width</th> <td>None (auto)</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th class="text-nowrap" scope="row">Class prefix</th> <td><code>.col-xs-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> </tr> <tr> <th class="text-nowrap" scope="row"># of columns</th> <td colspan="4">12</td> </tr> <tr> <th class="text-nowrap" scope="row">Column width</th> <td class="text-muted">Auto</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th class="text-nowrap" scope="row">Gutter width</th> <td colspan="4">30px (15px on each side of a column)</td> </tr> <tr> <th class="text-nowrap" scope="row">Nestable</th> <td colspan="4">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Offsets</th> <td colspan="4">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Column ordering</th> <td colspan="4">Yes</td> </tr> </tbody> </table> </div> 


	<h2 id="grid-example-basic"><a class="anchorjs-link " href="#grid-example-basic" aria-label="Anchor link for: grid example basic" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Example: Stacked-to-horizontal</h2> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p> <div class="row show-grid"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row show-grid"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row show-grid"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row show-grid"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 

	<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">&gt;</span>.col-md-8<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> 


	<!-- <h2 id="grid-example-fluid"><a class="anchorjs-link " href="#grid-example-fluid" aria-label="Anchor link for: grid example fluid" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Example: Fluid container</h2> <p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
		...
	  <span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure>  -->


	<h2 id="grid-example-mixed"><a class="anchorjs-link " href="#grid-example-mixed" aria-label="Anchor link for: grid example mixed" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Example: Mobile and desktop</h2> <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <div class="row show-grid"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row show-grid"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row show-grid"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12 col-md-8"</span><span class="nt">&gt;</span>.col-xs-12 .col-md-8<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>

	<span class="c">&lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>

	<span class="c">&lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-example-mixed-complete"><a class="anchorjs-link " href="#grid-example-mixed-complete" aria-label="Anchor link for: grid example mixed complete" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Example: Mobile, tablet, desktop</h2> <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <div class="row show-grid"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row show-grid"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12 col-sm-6 col-md-8"</span><span class="nt">&gt;</span>.col-xs-12 .col-sm-6 .col-md-8<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
	  <span class="c">&lt;!-- Optional: clear the XS cols if their content doesn't match in height --&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix visible-xs-block"</span><span class="nt">&gt;&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-example-wrapping"><a class="anchorjs-link " href="#grid-example-wrapping" aria-label="Anchor link for: grid example wrapping" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Example: Column wrapping</h2> <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p> <div class="row show-grid"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-9"</span><span class="nt">&gt;</span>.col-xs-9<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-4"</span><span class="nt">&gt;</span>.col-xs-4<span class="nt">&lt;br&gt;</span>Since 9 + 4 = 13 <span class="ni">&amp;gt;</span> 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;br&gt;</span>Subsequent columns continue along the new line.<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-responsive-resets"><a class="anchorjs-link " href="#grid-responsive-resets" aria-label="Anchor link for: grid responsive resets" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Responsive column resets</h2> <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p> <div class="row show-grid"> <div class="col-xs-6 col-sm-3"> .col-xs-6 .col-sm-3 <br> Resize your viewport or check it out on your phone for an example. </div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>

	  <span class="c">&lt;!-- Add the extra clearfix for only the required viewport --&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix visible-xs-block"</span><span class="nt">&gt;&lt;/div&gt;</span>

	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="../examples/grid/">the grid example</a>.</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-5 col-md-6"</span><span class="nt">&gt;</span>.col-sm-5 .col-md-6<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"</span><span class="nt">&gt;</span>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>

	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-lg-6"</span><span class="nt">&gt;</span>.col-sm-6 .col-md-5 .col-lg-6<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"</span><span class="nt">&gt;</span>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-offsetting"><a class="anchorjs-link " href="#grid-offsetting" aria-label="Anchor link for: grid offsetting" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Offsetting columns</h2> <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <div class="row show-grid"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row show-grid"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row show-grid"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4 col-md-offset-4"</span><span class="nt">&gt;</span>.col-md-4 .col-md-offset-4<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-3 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-3 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-6 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <p>You can also override offsets from lower grid tiers with <code>.col-*-offset-0</code> classes.</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-nesting"><a class="anchorjs-link " href="#grid-nesting" aria-label="Anchor link for: grid nesting" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Nesting columns</h2> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p> <div class="row show-grid"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row show-grid"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>
		Level 1: .col-sm-9
		<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
		  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-8 col-sm-6"</span><span class="nt">&gt;</span>
			Level 2: .col-xs-8 .col-sm-6
		  <span class="nt">&lt;/div&gt;</span>
		  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-4 col-sm-6"</span><span class="nt">&gt;</span>
			Level 2: .col-xs-4 .col-sm-6
		  <span class="nt">&lt;/div&gt;</span>
		<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> <h2 id="grid-column-ordering"><a class="anchorjs-link " href="#grid-column-ordering" aria-label="Anchor link for: grid column ordering" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Column ordering</h2> <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p> <div class="row show-grid"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-9 col-md-push-3"</span><span class="nt">&gt;</span>.col-md-9 .col-md-push-3<span class="nt">&lt;/div&gt;</span>
	  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-pull-9"</span><span class="nt">&gt;</span>.col-md-3 .col-md-pull-9<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/div&gt;</span></code></pre></figure> 





	<!-- Examples from Bootstrap: http://getbootstrap.com/examples/grid/ -->

	
	<h1>More grid examples</h1>
	<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>

	<h3>Three equal columns</h3>
	<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
	<div class="row">
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
	</div>

	<h3>Three unequal columns</h3>
	<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
	<div class="row">
		<div class="col-md-3">.col-md-3</div>
		<div class="col-md-6">.col-md-6</div>
		<div class="col-md-3">.col-md-3</div>
	</div>

	<h3>Two columns</h3>
	<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
	<div class="row">
		<div class="col-md-8">.col-md-8</div>
		<div class="col-md-4">.col-md-4</div>
	</div>

	<h3>Full width, single column</h3>
	<p class="text-warning">No grid classes are necessary for full-width elements.</p>

	<hr>

	<h3>Two columns with two nested columns</h3>
	<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
	<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
	<div class="row">
		<div class="col-md-8">
			.col-md-8
			<div class="row">
				<div class="col-md-6">.col-md-6</div>
				<div class="col-md-6">.col-md-6</div>
			</div>
		</div>
		<div class="col-md-4">.col-md-4</div>
	</div>

	<hr>

	<h3>Mixed: mobile and desktop</h3>
	<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
	<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
	<div class="row">
		<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	</div>
	<div class="row">
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	</div>
	<div class="row">
		<div class="col-xs-6">.col-xs-6</div>
		<div class="col-xs-6">.col-xs-6</div>
	</div>

	<hr>

	<h3>Mixed: mobile, tablet, and desktop</h3>
	<p></p>
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
		<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
	</div>
	<div class="row">
		<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
	</div>

	<hr>

	<h3>Column clearing</h3>
	<p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
	<div class="row">
		<div class="col-xs-6 col-sm-3">
			.col-xs-6 .col-sm-3
			<br>
			Resize your viewport or check it out on your phone for an example.
		</div>
		<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

		<!-- Add the extra clearfix for only the required viewport -->
		<div class="clearfix visible-xs"></div>

		<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
		<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
	</div>

	<hr>

	<h3>Offset, push, and pull resets</h3>
	<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
	<div class="row">
		<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
		<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
	</div>
	<div class="row">
		<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
		<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
	</div>

</div>
]]></content>
      </page>
      <page>
         <identifier>magento-icons</identifier>
         <title>Magento font icons</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<br />
<h1>Magento font icons usage and examples</h2>

<p class="lead">Icons are a simple and effective way to draw users into the content of your website. They can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page.</p>



<!-- ############################################## -->
<br />
<h2 class="border-bottom">Icons</h2>

<p>With icons you can quickly sum up what your text is about. Use an icon that encapsulates the point you are trying to get across in your paragraph. This will make the text more accessible to your readers.</p>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Create an icon</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-star"></span> example of a simple icon</p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>You can place icons just about anywhere using simple markup. We are going to use an inline HTML element such as <code>&lt;span&gt;</code> and add appropriate classes to it. These are required classes: <code>ic</code> and the icon's name prefixed with <code>ic-</code>, for example <code>ic-star</code>. Here's an example of the code which will add a star icon:</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-star"&gt;&lt;/span&gt; example of a simple icon
			</code></pre>
		</div>
		<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
			<ul class="ic-ul">
				<li>
					<span class="ic ic-info ic-2x ic-li"></span>
					If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.
				</li>
			</ul>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h3 class="border-bottom">Icon size</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-star" aria-hidden="true"></span></p>
		<p><span class="ic ic-star ic-lg" aria-hidden="true"></span> ic-lg</p>
		<p><span class="ic ic-star ic-2x" aria-hidden="true"></span> ic-2x</p>
		<p><span class="ic ic-star ic-3x" aria-hidden="true"></span> ic-3x</p>
		<p><span class="ic ic-star ic-4x" aria-hidden="true"></span> ic-4x</p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>To increase icon size relative to the font-size of the icon's container, use the following classes: <code>ic-lg</code> (increases the size of the icon by 33%), <code>ic-2x</code>, <code>ic-3x</code>, <code>ic-4x</code>, <code>ic-5x</code>, <code>ic-6x</code>, <code>ic-7x</code> or <code>ic-8x</code>.</p>
		<div class="highlight">
			<pre><code class="html">
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ic ic-star"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ic ic-star ic-lg"</span><span class="nt">&gt;&lt;/span&gt;</span> ic-lg
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ic ic-star ic-2x"</span><span class="nt">&gt;&lt;/span&gt;</span> ic-2x
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ic ic-star ic-3x"</span><span class="nt">&gt;&lt;/span&gt;</span> ic-3x
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"ic ic-star ic-4x"</span><span class="nt">&gt;&lt;/span&gt;</span> ic-4x
			</code></pre>
		</div>
		<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
			<ul class="ic-ul">
				<li>
					<span class="ic ic-info ic-2x ic-li"></span>
					If your icons are getting chopped off on top and bottom,<br/>make sure you have sufficient line-height.
				</li>
			</ul>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Inline styles</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-heart-o ic-3x"></span></p>
		<p><span class="ic ic-heart-o ic-3x" style="color: #e91e8f;"></span></p>
		<p><span class="ic ic-heart-o ic-3x" style="color: #95dc24;"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>Now you can start having more fun with icons. By default all icons have the same color as text, but if you want to change the color of selected icon, you can do it with <strong>inline CSS styles</strong>. Add the <code>style</code> attribute to the icon element and specify the color.</p>
		<p>You can add inline styles to icons the same way as to any other HTML elements in a HTML document. The <code>style</code> attribute can contain any CSS property, such as <code>color</code>, <code>font-size</code>, <code>text-shadow</code> etc. </p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-heart-o ic-3x"&gt;&lt;/span&gt;
&lt;span class="ic ic-heart-o ic-3x" style="color: #e91e8f;"&gt;&lt;/span&gt;
&lt;span class="ic ic-heart-o ic-3x" style="color: #95dc24;"&gt;&lt;/span&gt;
			</code></pre>
		</div>
	</div>

</div>




<!-- ############################################## -->
<br />
<h3 class="border-bottom">Animated icon</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-star ic-2x ic-spin" style="color: #be64e4;"></span></p>
		<p><span class="ic ic-reload ic-2x ic-spin" style="color: #5bd2ec;"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>Use the <code>ic-spin</code> class to get any icon to rotate.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-star ic-2x ic-spin" style="color: #be64e4;"&gt;&lt;/span&gt;
&lt;span class="ic ic-reload ic-2x ic-spin" style="color: #5bd2ec;"&gt;&lt;/span&gt;
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h3 class="border-bottom">Examples of icons</h3>
<br />

<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-anchor"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ic-lg"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ic-2x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ic-3x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ic-4x" style="color: #e91e8f;"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ic-5x"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-heart-o"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-heart-o ic-lg"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-heart-o ic-2x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-heart-o ic-3x" style="color: #36d9ff;"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-heart-o ic-4x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-heart-o ic-5x"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-star"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-phone ic-lg"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-tag ic-2x" style="color: #be64e4;"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-pin ic-3x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-alarm ic-4x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-microscope ic-5x"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-heart"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-search ic-lg" style="color: #FF9800;"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-instagram ic-2x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-mobile ic-3x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-stopwatch ic-4x"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-credit ic-5x"></span>
	</div>

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



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Iconboxes</h2>
<br />



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Simple iconbox</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-star ib ib-hover"></span> &nbsp;example of an iconbox</p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>To display an icon inside a box with background color (we call it an <strong>iconbox</strong>), add the <code>ib</code> class to the icon element. With the optional class <code>ib-hover</code>, the color of the iconbox will change on mouse hover over the iconbox.</p>
		<p>Background color will be automatically added to the icon element. Make sure to leave the <code>&lt;span&gt;</code> tag empty – otherwise the contents of the tag will be displayed together with the icon and any additional space can dislocate the icon.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-star ib ib-hover"&gt;&lt;/span&gt; &amp;nbsp;example of an iconbox
			</code></pre>
		</div>
		<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
			<ul class="ic-ul">
				<li>
					<span class="ic ic-info ic-2x ic-li"></span>
					The default background color and color of the icon can be configured in the admin panel:<br/>
					<em>Theme Design > Colors > Iconbox</em>
				</li>
			</ul>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Iconbox size</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-heart-o ib ib-hover"></span> &nbsp;</p>
		<p><span class="ic ic-heart-o ic-lg ib ib-hover ib-size-l"></span></p>
		<p><span class="ic ic-heart-o ic-lg ib ib-hover ib-size-xl"></span></p>
		<p><span class="ic ic-heart-o ic-2x ib ib-hover ib-size-xxl"></span></p>
		<p><span class="ic ic-heart-o ic-3x ib ib-hover ib-size-xxxl"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>To increase iconbox size, use the following classes: <code>ib-size-l</code>, <code>ib-size-xl</code>, <code>ib-size-xxl</code>, <code>ib-size-xxxl</code>.</p>
		<p>The icon size is independent of the iconbox size and can be increased with classes which were described earlier. For example, add class <code>ic-lg</code> to make the icon a little bit bigger.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-heart-o ib ib-hover"&gt;&lt;/span&gt; &amp;nbsp; 
&lt;span class="ic ic-heart-o ic-lg ib ib-hover ib-size-l"&gt;&lt;/span&gt; 
&lt;span class="ic ic-heart-o ic-lg ib ib-hover ib-size-xl"&gt;&lt;/span&gt; 
&lt;span class="ic ic-heart-o ic-2x ib ib-hover ib-size-xxl"&gt;&lt;/span&gt; 
&lt;span class="ic ic-heart-o ic-3x ib ib-hover ib-size-xxxl"&gt;&lt;/span&gt; 
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Iconbox shape</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-star ic-lg ib ib-hover ib-size-l"></span></p>
		<p><span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-rounded"></span></p>
		<p><span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-square"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>To change the shape of the iconbox, use one of the following classes: <code>ib-circle</code>, <code>ib-rounded</code>, <code>ib-square</code>. By default the iconbox is always circular.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-star ic-lg ib ib-hover ib-size-l"&gt;&lt;/span&gt; 
&lt;span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-rounded"&gt;&lt;/span&gt; 
&lt;span class="ic ic-star ic-lg ib ib-hover ib-size-l ib-square"&gt;&lt;/span&gt; 
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Iconbox effects</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1a"></span></p>
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1b"></span></p>
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2a"></span></p>
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2b"></span></p>
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3a"></span></p>
		<p><span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3b"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>To add eye-catching hover effects to the iconbox, use one of the following combinations of classes. Note that in each case the combination consists of two classes:</p>
		<ul class="disc">
			<li><code>ib-ef-1 ib-ef-1a</code></li>
			<li><code>ib-ef-1 ib-ef-1b</code></li>
			<li><code>ib-ef-2 ib-ef-2a</code></li>
			<li><code>ib-ef-2 ib-ef-2b</code></li>
			<li><code>ib-ef-3 ib-ef-3a</code></li>
			<li><code>ib-ef-3 ib-ef-3b</code></li>
		</ul>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1a"&gt;&lt;/span&gt; 
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-1 ib-ef-1b"&gt;&lt;/span&gt; 
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2a"&gt;&lt;/span&gt; 
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-2 ib-ef-2b"&gt;&lt;/span&gt; 
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3a"&gt;&lt;/span&gt; 
&lt;span class="ic ic-plane ic-lg ib ib-size-l ib-ef-3 ib-ef-3b"&gt;&lt;/span&gt; 
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h3 class="border-bottom">Examples of iconboxes</h3>
<br />

<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-hover"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-hover"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-hover ib-size-l"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-hover ib-size-xl"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-hover ib-size-xxl"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-hover ib-size-xxxl"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-1 ib-ef-1a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-1 ib-ef-1a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-1 ib-ef-1a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-1 ib-ef-1a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-1 ib-ef-1a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-1 ib-ef-1a"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-1 ib-ef-1b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-1 ib-ef-1b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-1 ib-ef-1b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-1 ib-ef-1b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-1 ib-ef-1b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-1 ib-ef-1b"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-2 ib-ef-2a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-2 ib-ef-2a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-2 ib-ef-2a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-2 ib-ef-2a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-2 ib-ef-2a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-2 ib-ef-2a"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-2 ib-ef-2b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-2 ib-ef-2b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-2 ib-ef-2b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-2 ib-ef-2b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-2 ib-ef-2b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-2 ib-ef-2b"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-3 ib-ef-3a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-3 ib-ef-3a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-3 ib-ef-3a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-3 ib-ef-3a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-3 ib-ef-3a"></span>
	</div>

</div>
<div class="row row-no-outdent row-center-vertically row-checkered-even">

	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-3 ib-ef-3b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-anchor ib ib-ef-3 ib-ef-3b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-l ib-ef-3 ib-ef-3b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xl ib-ef-3 ib-ef-3b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxl ib-ef-3 ib-ef-3b"></span>
	</div>
	<div class="col-sm-2">
		<span class="ic ic-lg ic-anchor ib ib-size-xxxl ib-ef-3 ib-ef-3b"></span>
	</div>

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


<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Blocks of text with icon</h2>

<p>Icons can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page and with icons you can quickly sum up what your text is about. For example, when you build lists, instead of using standard bullets, you can use icons to draw attention to paragraphs and other blocks of content.</p>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Simple block with icon</h3>
<br />

<div class="row">

	<div class="col-md-4 col-sm-5">
		<div class="feature">
			<span class="left ic ic-star ic-2x" style="color: #5bd2ec;"></span>
			<h4>Heading Example</h4>
			<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...</p>
		</div>
		<br /><br />
	</div>

	<div class="col-md-8 col-sm-7">
		<p>To create a simple block of text with an icon, wrap your text inside a <code>&lt;div&gt;</code> element with the <code>feature</code> class. Here's a minimal example:</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature"&gt;
	&lt;span class="left ic ic-star ic-2x" style="color: #5bd2ec;"&gt;&lt;/span&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;p&gt;This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...&lt;/p&gt;
&lt;/div&gt;
			</code></pre>
		</div>
		<p>If you add <code>left</code> or <code>right</code> class to the icon, the icon will be taken from the normal flow and placed along the left or right side of its container, and text will wrap around it.</p>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Indented block</h3>
<br />

<div class="row">

	<div class="col-md-4 col-sm-5">
		<div class="feature feature-icon-hover indent">
			<span class="left ic ic-star ic-2x" style="color: #de2666;"></span>
			<h4>Heading Example</h4>
			<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
		</div>
		<br /><br />
	</div>

	<div class="col-md-8 col-sm-7">
		<p>To display a block with indentation on the left side, add the <code>indent</code> class to the block element:</p>
		<p>To increase the size of the indentation, use the following classes together with the <code>indent</code> class: <code>indent-size-l</code>, <code>indent-size-xl</code>, <code>indent-size-xxl</code>, <code>indent-size-xxxl</code>.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature feature-icon-hover indent"&gt;
	&lt;span class="left ic ic-star ic-2x" style="color: #de2666;"&gt;&lt;/span&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;p&gt;This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.&lt;/p&gt;
&lt;/div&gt;
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Block with iconbox and hover effect</h3>
<br />

<div class="row">

	<div class="col-md-4 col-sm-5">
		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="left ic ic-star ic-lg ib ib-size-xl"></span>
			<h4>Heading Example</h4>
			<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
		</div>
		<br /><br />
	</div>

	<div class="col-md-8 col-sm-7">
		<p>To change the background color of the iconbox on mouse hover over the entire block, add the <code>feature-icon-hover</code> class to the block element.</p>
		<p>If you increase the iconbox size (by adding a class such as <code>ib-size-xl</code>), you will also need to add corresponding class (in this case: <code>indent-size-xl</code>) to the block element. It will adjust the size of the indentation.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature feature-icon-hover indent indent-size-xl"&gt;
	&lt;span class="left ic ic-star ic-lg ib ib-size-xl"&gt;&lt;/span&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;p&gt;This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.&lt;/p&gt;
&lt;/div&gt;
			</code></pre>
		</div>
		<div class="alert alert-info" style="padding: 25px 25px 25px 35px; background-color: #e4f7fc; color: #12829b;">
			<ul class="ic-ul">
				<li>
					<span class="ic ic-info ic-2x ic-li"></span>
					The default background color and color of the icon can be configured in the admin panel:<br/>
					<em>Theme Design > Colors > Iconbox</em>
				</li>
			</ul>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">More complex example</h3>
<br />

<div class="row">

	<div class="col-md-4 col-sm-5">
		<div class="feature indent indent-size-xl">
			<span class="left ic ic-home ic-lg ib ib-size-xl" style="background-color: #ffb13e;"></span>
			<h6 class="above-heading">Above heading</h6>
			<h4>Heading Example</h4>
			<h6 class="below-heading">Text below heading</h6>
			<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
			<div class="feature feature-icon-hover indent">
				<span class="ic ic-char ib">1</span>
				<p>Lorem ipsum dolor sit, consectetur adipiscing elit.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ic ic-char ib">2</span>
				<p>Lid est laborum et dolorum fuga et harum quidem.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ic ic-char ib">3</span>
				<p>Seq et perspser iciatis unde omnis iste nautis.</p>
			</div>
			<p>Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.</p>
			<a href="#">Read more...</a>
		</div>
		<br /><br />
	</div>

	<div class="col-md-8 col-sm-7">
		<p>Here's another, more complex example with additional headings and nested blocks. To change the background color of the iconbox you can use <strong>inline styles</strong>. Add the <code>style</code> attribute to the iconbox element and specify the background color.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature indent indent-size-xl"&gt;
	&lt;span class="left ic ic-home ic-lg ib ib-size-xl" style="background-color: #ffb13e;"&gt;&lt;/span&gt;
	&lt;h6 class="above-heading"&gt;Above heading&lt;/h6&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;h6 class="below-heading"&gt;Text below heading&lt;/h6&gt;
	&lt;p&gt;This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.&lt;/p&gt;
	&lt;div class="feature feature-icon-hover indent"&gt;
		&lt;span class="ic ic-char ib"&gt;1&lt;/span&gt;
		&lt;p&gt;Lorem ipsum dolor sit, consectetur adipiscing elit.&lt;/p&gt;
	&lt;/div&gt;
	&lt;div class="feature feature-icon-hover indent"&gt;
		&lt;span class="ic ic-char ib"&gt;2&lt;/span&gt;
		&lt;p&gt;Lid est laborum et dolorum fuga et harum quidem.&lt;/p&gt;
	&lt;/div&gt;
	&lt;div class="feature feature-icon-hover indent"&gt;
		&lt;span class="ic ic-char ib"&gt;3&lt;/span&gt;
		&lt;p&gt;Seq et perspser iciatis unde omnis iste nautis.&lt;/p&gt;
	&lt;/div&gt;
	&lt;p&gt;Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.&lt;/p&gt;
	&lt;a href="#"&gt;Read more...&lt;/a&gt;
&lt;/div&gt;
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Centered block</h3>
<br />

<div class="row">

	<div class="col-md-4 col-sm-5">
		<div class="feature centered">
			<span class="ic ic-lightbulb ic-2x ib ib-size-xl" style="background-color: #bf78dd;"></span>
			<h4>Heading Example</h4>
			<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
		</div>
		<br /><br />
	</div>

	<div class="col-md-8 col-sm-7">
		<p>To align elements of the block to the center, use the <code>centered</code> class.</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature centered"&gt;
	&lt;span class="ic ic-lightbulb ic-2x ib ib-size-xl" style="background-color: #bf78dd;"&gt;&lt;/span&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;p&gt;This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.&lt;/p&gt;
&lt;/div&gt;
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<div class="fontawesome-enabled">

<br />
<br />
<h2 class="border-bottom">Font Awesome icons</h2>

<p>Font Awesome is a font and icon toolkit based on CSS. It offers a collection of more than 600 vector icons which can be easily customized (the same as other font icons available in the theme).</p>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Basic Font Awesome icons</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<p><span class="fa fa-flag fa-3x" style="color: #1b926c;"></span></p>
	</div>

	<div class="col-md-9 col-sm-8">
		<p>Use the <code>fa</code> class and the icon's name with an inline HTML element <code>span</code>. Here's an example of the code which will create a flag icon:</p>
		<div class="highlight">
			<pre><code class="html">
&lt;span class="fa fa-flag fa-3x" style="color: #1b926c;"&gt;&lt;/span&gt;
			</code></pre>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<h3 class="border-bottom">Use Font Awesome icons with other icon classes</h3>
<br />

<div class="row">

	<div class="col-md-3 col-sm-4">
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-2x ib ib-size-l left fa fa-flag" style="background-color: #71d1b3;"></span>
			<h4>Heading Example</h4>
			<p>This is a short paragraph of sample text inside a block.</p>
		</div>
		<br /><br />
	</div>

	<div class="col-md-9 col-sm-8">
		<p>You can use Font Awesome icons together with other icon classes described in this document. Here's an example of an iconbox element (the <code>ib</code> class) with Font Awesome icon inside a block</p>
		<div class="highlight">
			<pre><code class="html">
&lt;div class="feature feature-icon-hover indent indent-size-l"&gt;
	&lt;span class="ic ic-2x ib ib-size-l left <span style="color: #de003f;">fa fa-flag</span>" style="background-color: #71d1b3;"&gt;&lt;/span&gt;
	&lt;h4&gt;Heading Example&lt;/h4&gt;
	&lt;p&gt;This is a short paragraph of sample text inside a block.&lt;/p&gt;
&lt;/div&gt;
			</code></pre>
		</div>
	</div>

</div>

</div> <!-- end: fontawesome-enabled -->



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Examples of block with icon</h2>
<br />

<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-paint" style="color:#5bd2ec;"></span>
			<h3>Unlimited Colors</h3>
			<p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-smartphones" style="color:#5bd2ec;"></span>
			<h3>Responsive Layout</h3>
			<p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-menu" style="color:#5bd2ec;"></span>
			<h3>Mega Menu</h3>
			<p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>
<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-microscope" style="color:#5bd2ec;"></span>
			<h3>Font Icons</h3>
			<p>Font icons give you more control over the visual appearance of the icons. Add anywhere you want and customize to your needs...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-lightbulb" style="color:#5bd2ec;"></span>
			<h3>Easy to Customize</h3>
			<p>Use as a starting point for your custom projects. Create multiple child themes (theme variants) with ease...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-4x ic-anchor" style="color:#5bd2ec;"></span>
			<h3>50+ CMS Blocks</h3>
			<p>You can use content placeholders to display custom content in almost every part of the store. Import sample CMS blocks from the demo...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Examples of block with iconbox</h2>
<br />

<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-paint ib ib-size-xl"></span>
			<h3>Unlimited Colors</h3>
			<p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-smartphones ib ib-size-xl"></span>
			<h3>Responsive Layout</h3>
			<p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-menu ib ib-size-xl"></span>
			<h3>Mega Menu</h3>
			<p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>
<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-microscope ib ib-size-xl"></span>
			<h3>Font Icons</h3>
			<p>Font icons give you more control over the visual appearance of the icons. Add anywhere you want and customize to your needs...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-lightbulb ib ib-size-xl"></span>
			<h3>Easy to Customize</h3>
			<p>Use as a starting point for your custom projects. Create multiple child themes (theme variants) with ease...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-anchor ib ib-size-xl"></span>
			<h3>50+ CMS Blocks</h3>
			<p>You can use content placeholders to display custom content in almost every part of the store. Import sample CMS blocks from the demo...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Block with iconbox + iconbox effects</h2>
<br />

<div class="row row-bottom-gutter">

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-1 ib-ef-1a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-1 ib-ef-1a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-1 ib-ef-1b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-1 ib-ef-1b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-2 ib-ef-2a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-2 ib-ef-2a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-2 ib-ef-2b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-2 ib-ef-2b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-3 ib-ef-3b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="feature feature-icon-hoverR indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-3 ib-ef-3b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Paragraph - with and without indentation</h2>
<br />

<div class="row row-bottom-gutter">

	<div class="col-sm-5">

		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-anchor ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-lg ic-lastminute ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Sample Title</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-lg ic-heart-o ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-lg ic-tag ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>

	</div>
	<div class="col-sm-6 col-md-push-1" style="border-left: 1px solid #f5f5f5;">

		<div class="feature feature-icon-hover">
			<span class="ic ic-anchor ib ib-size-l left"></span>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover">
			<span class="ic ic-lg ic-lastminute ib ib-size-l left"></span>
			<h3>Sample Title</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover">
			<span class="ic ic-lg ic-heart-o ib ib-size-l left"></span>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover">
			<span class="ic ic-lg ic-tag ib ib-size-l left"></span>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Paragraph - indentation adjusted to iconbox size</h2>
<br />

<div class="row row-bottom-gutter">

	<div class="col-sm-5">


		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-lg ic-tag ib ib-size-xxxl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-lg ic-heart-o ib ib-size-xxl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-lg ic-lastminute ib ib-size-xl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Sample Title</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-lg ic-star ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-anchor ib"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis...</p>
			<a href="#">Read more...</a>
		</div>

	</div>
	<div class="col-sm-6 col-md-push-1" style="border-left: 1px solid #f5f5f5;">

		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-lg ic-tag ib ib-size-xxxl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xxl">
			<span class="ic ic-lg ic-heart-o ib ib-size-xxl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-lg ic-lastminute ib ib-size-xl"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Sample Title</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-lg ic-star ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l">
			<span class="ic ic-anchor ib"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Block with headings, iconboxes and nested paragraphs</h2>
<br />

<div class="row row-bottom-gutter">
	
	<div class="col-sm-6">

		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-1 ib-ef-1b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3 class="heading">Feature Title Example</h3>
			<h6 class="below-heading">Text below heading</h6>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<p>Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<p>Sinlgle line of text, short paragraph.</p>
		</div>
		<div class="feature indent indent-size-xxxl">
			<div class="feature feature-icon-hover indent first">
				<span class="ib ic ic-char">1</span>
				<p class="no-margin">Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis, nullam ornare. </p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">2</span>
				<p class="no-margin">Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio nam libero eligendi.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">3</span>
				<p class="no-margin">Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste dolores sadips.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">4</span>
				<p class="no-margin">Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, nobis est optio cumque</p>
			</div>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
		</div>

	</div>
	<div class="col-sm-6">

		<div class="feature feature-icon-hover indent indent-size-xxxl">
			<span class="ic ic-2x ic-heart-o ib ib-size-xxl ib-ef-2 ib-ef-2b"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3 class="heading">Feature Title Example</h3>
			<h6 class="below-heading">Text below heading</h6>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<p>Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<p>Sinlgle line of text, short paragraph.</p>
		</div>
		<div class="feature indent indent-size-xxxl">
			<div class="feature feature-icon-hover indent first">
				<span class="ib ic ic-char">1</span>
				<p class="no-margin">Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis, nullam ornare. </p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">2</span>
				<p class="no-margin">Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio nam libero eligendi.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">3</span>
				<p class="no-margin">Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste dolores sadips.</p>
			</div>
			<div class="feature feature-icon-hover indent">
				<span class="ib ic ic-char">4</span>
				<p class="no-margin">Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, nobis est optio cumque</p>
			</div>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Blocks - separated with border</h2>
<br />

<div class="row row-bottom-gutter">

	<div class="col-sm-5">

		<div class="feature feature-icon-hover indent indent-size-xxxl border-separated">
			<img class="image left" src="{{media url="wysiwyg/infortis/banners/thumbnail01.jpg"}}" alt="Banner" style="width: 120px;" />
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>

		<div class="feature feature-icon-hover indent indent-size-xxxl border-separated">
			<img class="image left" src="{{media url="wysiwyg/infortis/banners/thumbnail02.jpg"}}" alt="Banner" style="width: 120px;" />
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>

		<div class="feature feature-icon-hover indent indent-size-xxxl border-separated">
			<img class="image left" src="{{media url="wysiwyg/infortis/banners/thumbnail01.jpg"}}" alt="Banner" style="width: 120px;" />
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>

		<div class="feature feature-icon-hover indent indent-size-xxxl border-separated">
			<img class="image left" src="{{media url="wysiwyg/infortis/banners/thumbnail02.jpg"}}" alt="Banner" style="width: 120px;" />
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
			<a href="#">Read more...</a>
		</div>

	</div>
	<div class="col-sm-5 col-md-push-1" style="border-left: 1px solid #f5f5f5;">

		<div class="feature feature-icon-hover indent indent-size-l border-separated">
			<span class="ic ic-anchor ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l border-separated">
			<span class="ic ic-lg ic-lastminute ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Sample Title</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l border-separated">
			<span class="ic ic-lg ic-heart-o ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>
		<br/>
		<div class="feature feature-icon-hover indent indent-size-l border-separated">
			<span class="ic ic-lg ic-tag ib ib-size-l"></span>
			<h6 class="above-heading">The Secondary Heading</h6>
			<h3>Feature Title Example</h3>
			<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>



<!-- ############################################## -->
<br />
<br />
<h2 class="border-bottom">Iconbox - centered</h2>
<br />

<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover centered">
			<span class="ic ic-3x ic-paint ib ib-size-xxl"></span>
			<h3>Unlimited Colors</h3>
			<p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover centered">
			<span class="ic ic-3x ic-smartphones ib ib-size-xxl"></span>
			<h3>Responsive Layout</h3>
			<p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
			<a href="#">Read more...</a>
		</div>

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

		<div class="feature feature-icon-hover centered">
			<span class="ic ic-3x ic-menu ib ib-size-xxl"></span>
			<h3>Mega Menu</h3>
			<p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
			<a href="#">Read more...</a>
		</div>

	</div>

</div>
]]></content>
      </page>
      <page>
         <identifier>magento-responsive-utilities</identifier>
         <title>Responsive Utilities</title>
         <is_active>1</is_active>
         <page_layout>2columns-right</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<!-- Additional styles for responsive tests -->

<style type="text/css">
/* Responsive (scrollable) doc tables */
.table-responsive .highlight pre {
	white-space: normal;
}

/* Utility classes table  */
.bs-table th small,
.responsive-utilities th small {
	display: block;
	font-weight: normal;
	color: #999;
}
.responsive-utilities tbody th {
	font-weight: normal;
}
.responsive-utilities td {
	text-align: center;
}
.responsive-utilities td.is-visible {
	color: #468847;
	background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
	color: #ccc;
	background-color: #f9f9f9 !important;
}

/* Responsive tests */
.responsive-utilities-test {
	margin-top: 5px;
}
.responsive-utilities-test .col-xs-6 {
	margin-bottom: 10px;
}
.responsive-utilities-test span {
	display: block;
	padding: 15px 10px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	border-radius: 4px;
}
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
	color: #999;
	border: 1px solid #ddd;
}
.visible-on .col-xs-6 .visible-xs-block,
.visible-on .col-xs-6 .visible-sm-block,
.visible-on .col-xs-6 .visible-md-block,
.visible-on .col-xs-6 .visible-lg-block,
.hidden-on .col-xs-6 .visible-xs-block,
.hidden-on .col-xs-6 .visible-sm-block,
.hidden-on .col-xs-6 .visible-md-block,
.hidden-on .col-xs-6 .visible-lg-block {
	color: #468847;
	background-color: #dff0d8;
	border: 1px solid #d6e9c6;
}
</style>





	<!-- Examples from Bootstrap documentation: http://getbootstrap.com/css/#responsive-utilities -->

	<br />
	<h1 class="page-header" id="responsive-utilities">Responsive utilities</h1>

	<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
	<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
	<br/>
	
	<h2 id="responsive-utilities-classes"><a class="anchorjs-link " href="#responsive-utilities-classes" aria-label="Anchor link for: responsive utilities classes" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Available classes</h2>
	<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
	<div class="table-responsive">
		<table class="data-table data-table-bordered table table-bordered table-striped responsive-utilities">
			<thead>
				<tr>
					<th></th>
					<th> Extra small devices <small>Phones (&lt;768px)</small> </th>
					<th> Small devices <small>Tablets (≥768px)</small> </th>
					<th> Medium devices <small>Desktops (≥992px)</small> </th>
					<th> Large devices <small>Desktops (≥1200px)</small> </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row"><code>.visible-xs-*</code></th>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
				</tr>
				<tr>
					<th scope="row"><code>.visible-sm-*</code></th>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
				</tr>
				<tr>
					<th scope="row"><code>.visible-md-*</code></th>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
				</tr>
				<tr>
					<th scope="row"><code>.visible-lg-*</code></th>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
				</tr>
			</tbody>
			<tbody>
				<tr>
					<th scope="row"><code>.hidden-xs</code></th>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
				</tr>
				<tr>
					<th scope="row"><code>.hidden-sm</code></th>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
				</tr>
				<tr>
					<th scope="row"><code>.hidden-md</code></th>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
				</tr>
				<tr>
					<th scope="row"><code>.hidden-lg</code></th>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
	<div class="table-responsive">
		<table class="data-table table table-bordered table-striped">
			<thead>
				<tr>
					<th>Group of classes</th>
					<th>CSS <code>display</code></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row"><code>.visible-*-block</code></th>
					<td><code>display: block;</code></td>
				</tr>
				<tr>
					<th scope="row"><code>.visible-*-inline</code></th>
					<td><code>display: inline;</code></td>
				</tr>
				<tr>
					<th scope="row"><code>.visible-*-inline-block</code></th>
					<td><code>display: inline-block;</code></td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
	<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
	<br/>

	<h2 id="responsive-utilities-print"><a class="anchorjs-link " href="#responsive-utilities-print" aria-label="Anchor link for: responsive utilities print" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Print classes</h2>
	<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
	<div class="table-responsive">
		<table class="data-table data-table-bordered table table-bordered table-striped responsive-utilities">
			<thead>
				<tr>
					<th>Classes</th>
					<th>Browser</th>
					<th>Print</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row"> <code>.visible-print-block</code>
						<br> <code>.visible-print-inline</code>
						<br> <code>.visible-print-inline-block</code> </th>
					<td class="is-hidden">Hidden</td>
					<td class="is-visible">Visible</td>
				</tr>
				<tr>
					<th scope="row"><code>.hidden-print</code></th>
					<td class="is-visible">Visible</td>
					<td class="is-hidden">Hidden</td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
	<br/>

	<h2 id="responsive-utilities-tests"><a class="anchorjs-link " href="#responsive-utilities-tests" aria-label="Anchor link for: responsive utilities tests" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Test cases</h2>
	<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
	<br/>

	<h3 id="visible-on">1. Visible on...</h3>
	<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
	<div class="row responsive-utilities-test visible-on">
		<div class="col-xs-6 col-sm-3"> <span class="hidden-xs">Extra small</span> <span class="visible-xs-block">✔ Visible on x-small</span> </div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-sm">Small</span> <span class="visible-sm-block">✔ Visible on small</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-md">Medium</span> <span class="visible-md-block">✔ Visible on medium</span> </div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-lg">Large</span> <span class="visible-lg-block">✔ Visible on large</span> </div>
	</div>
	<div class="section-line" style="margin: 20px 0 40px;"></div>
	<div class="row responsive-utilities-test visible-on">
		<div class="col-xs-6"> <span class="hidden-xs hidden-sm">Extra small and small</span> <span class="visible-xs-block visible-sm-block">✔ Visible on x-small and small</span> </div>
		<div class="col-xs-6"> <span class="hidden-md hidden-lg">Medium and large</span> <span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6"> <span class="hidden-xs hidden-md">Extra small and medium</span> <span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span> </div>
		<div class="col-xs-6"> <span class="hidden-sm hidden-lg">Small and large</span> <span class="visible-sm-block visible-lg-block">✔ Visible on small and large</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6"> <span class="hidden-xs hidden-lg">Extra small and large</span> <span class="visible-xs-block visible-lg-block">✔ Visible on x-small and large</span> </div>
		<div class="col-xs-6"> <span class="hidden-sm hidden-md">Small and medium</span> <span class="visible-sm-block visible-md-block">✔ Visible on small and medium</span> </div>
	</div>
	<br/>

	<h3 id="hidden-on"></a>2. Hidden on...</h3>
	<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
	<div class="row responsive-utilities-test hidden-on">
		<div class="col-xs-6 col-sm-3"> <span class="hidden-xs">Extra small</span> <span class="visible-xs-block">✔ Hidden on x-small</span> </div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-sm">Small</span> <span class="visible-sm-block">✔ Hidden on small</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-md">Medium</span> <span class="visible-md-block">✔ Hidden on medium</span> </div>
		<div class="col-xs-6 col-sm-3"> <span class="hidden-lg">Large</span> <span class="visible-lg-block">✔ Hidden on large</span> </div>
	</div>
	<div class="section-line" style="margin: 20px 0 40px;"></div>
	<div class="row responsive-utilities-test hidden-on">
		<div class="col-xs-6"> <span class="hidden-xs hidden-sm">Extra small and small</span> <span class="visible-xs-block visible-sm-block">✔ Hidden on x-small and small</span> </div>
		<div class="col-xs-6"> <span class="hidden-md hidden-lg">Medium and large</span> <span class="visible-md-block visible-lg-block">✔ Hidden on medium and large</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6"> <span class="hidden-xs hidden-md">Extra small and medium</span> <span class="visible-xs-block visible-md-block">✔ Hidden on x-small and medium</span> </div>
		<div class="col-xs-6"> <span class="hidden-sm hidden-lg">Small and large</span> <span class="visible-sm-block visible-lg-block">✔ Hidden on small and large</span> </div>
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6"> <span class="hidden-xs hidden-lg">Extra small and large</span> <span class="visible-xs-block visible-lg-block">✔ Hidden on x-small and large</span> </div>
		<div class="col-xs-6"> <span class="hidden-sm hidden-md">Small and medium</span> <span class="visible-sm-block visible-md-block">✔ Hidden on small and medium</span> </div>
	</div>

]]></content>
      </page>
      <page>
         <identifier>magento-typography</identifier>
         <title>Typography | Ultimo - Responsive Magento Theme</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<div class="grid12-6">
	<span class="section-title">Sample of basic typography</span>
	<h1>H1 Heading</h1>
	<h2>H2 Heading</h2>
	<h3>H3 Heading</h3>
	<h4>H4 Heading</h4>
	<h5>H5 Heading</h5>
	<h6>H6 Heading</h6>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad.</p>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<ul class="disc">
		<li><a href="#">Sample Link</a></li>
		<li><a href="#">Lectus vitae ligula tempus</a></li>
		<li><a href="#">Vitae lorem ipsum dolor sit amet</a></li>
		<li><a href="#">Sample lectus vitae ligula tempus</a></li>
		<li><a href="#">Meat Our Best Partners</a></li>
		<li><a href="#">Our Other Projects</a></li>
		<li><a href="#">One Click To Join Us</a></li>
		<li><a href="#">Follow Us On Twitter</a></li>
		<li><a href="http://infortis-themes.com/">Magento Themes</a></li>
	</ul>
	<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
</div>

<div class="grid12-6">
	<h1 class="border-bottom">H1 Heading</h1>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<h2 class="border-bottom">H2 Heading</h2>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<h3 class="border-bottom">H3 Heading</h3>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<h4 class="border-bottom">H4 Heading</h4>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<h5 class="border-bottom">H5 Heading</h5>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
	<h6 class="border-bottom">H6 Heading</h6>
	<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
</div>










<br/>
<br/>
<br/>
<div class="grid12-6">

<span class="section-title">Sample of basic typography</span>
<br/>

<h1>H1 Heading</h1>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
<div style="margin-top: 40px;"></div>
<h2>H2 Heading</h2>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
<div style="margin-top: 40px;"></div>
<h3>H3 Heading</h3>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
<div style="margin-top: 40px;"></div>
<h4>H4 Heading</h4>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
<div style="margin-top: 40px;"></div>
<h5>H5 Heading</h5>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>
<div style="margin-top: 40px;"></div>
<h6>H6 Heading</h6>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.</p>






</div>
<div class="grid12-6">

	<span class="section-title">Paragraphs with icons</span>
	<br/>

	<div class="feature feature-icon-hover indent indent-size-l">
		<span class="ic ic-lg ic-anchor ib ib-size-l"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Sample Heading</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
		<a href="#" class="go">Read more</a>
	</div>
	<br/>
	<div class="feature feature-icon-hover indent indent-size-l">
		<span class="ic ic-lg ic-star ib ib-size-l"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Feature Title</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
		<a href="#" class="go">Read more</a>
	</div>
	<br/>
	<div class="feature feature-icon-hover indent indent-size-l">
		<span class="ic ic-lg ic-lastminute ib ib-size-l"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Sample Title</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
		<a href="#" class="go">Read more</a>
	</div>
	<br/>
	<div class="feature feature-icon-hover indent indent-size-l">
		<span class="ic ic-lg ic-heart-o ib ib-size-l"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Feature Title</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit</p>
		<a href="#" class="go">Read more</a>
	</div>

</div>
<div class="clearer"></div>



<br/>
<br/>
<span class="section-title">Ordered  and unordered lists</span>
<br/>

<div class="grid12-3">

	<ul class="bullet">
		<li><a href="#">Sample Link</a></li>
		<li><a href="#">Lectus vitae ligula tempus</a></li>
		<li><a href="#">Vitae lorem ipsum dolor sit amet</a></li>
		<li><a href="#">Sample lectus vitae ligula tempus</a></li>
		<li><a href="#">Meat Our Best Partners</a></li>
		<li><a href="#">Our Other Projects</a></li>
		<li><a href="#">One Click To Join Us</a></li>
		<li><a href="#">Follow Us On Twitter</a></li>
		<li><a href="http://infortis-themes.com/">Magento Themes</a></li>
	</ul>

</div>
<div class="grid12-3">

	<ul class="disc">
		<li><a href="#">Sample Link</a></li>
		<li><a href="#">Lectus vitae ligula tempus</a></li>
		<li><a href="#">Vitae lorem ipsum dolor sit amet</a></li>
		<li><a href="#">Sample lectus vitae ligula tempus</a></li>
		<li><a href="#">Meat Our Best Partners</a></li>
		<li><a href="#">Our Other Projects</a></li>
		<li><a href="#">One Click To Join Us</a></li>
		<li><a href="#">Follow Us On Twitter</a></li>
		<li><a href="http://infortis-themes.com/">Magento Themes</a></li>
	</ul>

</div>
<div class="grid12-3">

	<ul class="ic-ul">
		<li><span class="ic ic-star ic-li"></span>Some text example</li>
		<li><span class="ic ic-tag ic-li"></span>Lectus vitae ligula tempus</li>
		<li><span class="ic ic-arrow-right ic-li"></span>Vitae lorem ipsum dolor sit amet</li>
		<li><span class="ic ic-letter ic-li"></span>Sample lectus vitae ligula tempus</li>
		<li><span class="ic ic-star ic-li"></span>Some text example</li>
		<li><span class="ic ic-tag ic-li"></span>Lectus vitae ligula tempus</li>
		<li><span class="ic ic-arrow-right ic-li"></span>Vitae lorem ipsum dolor sit amet</li>
		<li><span class="ic ic-letter ic-li"></span>Sample lectus vitae ligula tempus</li>
		<li><span class="ic ic-bell ic-li"></span>Our Other Projects</li>
	</ul>

</div>
<div class="grid12-3">

		<div class="feature indent first">
			<span class="ic ic-char ib">A</span>
			<p class="no-margin">Unlimited colors, dozens of customizable elements</p>
		</div>
		<div class="feature indent">
			<span class="ic ic-char ib">B</span>
			<p class="no-margin ">Customizable responsive layout based on fluid grid</p>
		</div>
		<div class="feature indent">
			<span class="ic ic-char ib">C</span>
			<p class="no-margin ">50+ placeholders to display custom content</p>
		</div>
		<div class="feature indent">
			<span class="ic ic-char ib">D</span>
			<p class="no-margin ">Create your custom sub-themes (variants)</p>
		</div>

</div>
<div class="clearer"></div>



<br/>
<br/>
<span class="section-title">System messages</span>
<br/>

<ul class="messages">

	<li class="success-msg">
		<ul><li><span>These are sample system messages displayed by Magento.</span></li></ul>
	</li>
	<li class="error-msg">
		<ul><li><span>The maximum quantity allowed for purchase is 10.</span></li></ul>
	</li>
	<li class="notice-msg">
		<ul><li><span>Please specify the product's option(s).</span></li></ul>
	</li>
	
</ul>



<br/>
<br/>
<span class="section-title">Paragraphs with icons</span>
<br/>

<div class="grid12-4">

	<div class="feature feature-icon-hover">
		<span class="left ic ic-3x ic-lightbulb ib ib-size-xxxl"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Block Heading Example</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
	</div>

</div>
<div class="grid12-4">

	<div class="feature feature-icon-hover">
		<span class="left ic ic-3x ic-microscope ib ib-size-xxxl"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Block Heading Example</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
	</div>

</div>
<div class="grid12-4">

	<div class="feature feature-icon-hover">
		<span class="left ic ic-3x ic-globe ib ib-size-xxxl"></span>
		<h6 class="above-heading">The Secondary Heading</h6>
		<h3>Block Heading Example</h3>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
		<p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...</p>
	</div>

</div>
<div class="clearer"></div>



<br />
<br />
<h3 class="section-title" id="banners">Sample Custom Banners</h3>
<br />

<p>Here you can see some examples of banners.<br />
Banners can be placed on any CMS page, and in any CMS block. Each banner is a simple image inside a link.</p>
<br />

<div class="nested-container hide-below-1280">

    <div class="page-banners grid-container">
        <div class="grid12-6 banner">
            <a href="{{store direct_url="#"}}" title="Replace this image with your own" class="fade-on-hover" >
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-6 banner">
            <a href="{{store direct_url="#"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
    </div>

</div>


<div class="nested-container hide-below-960">

    <div class="page-banners grid-container">
        <div class="grid12-4 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-4 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-4 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
    </div>

</div>


<div class="nested-container hide-below-768">

    <div class="page-banners grid-container">
        <div class="grid12-3 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/11.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-3 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/11.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-6 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/03.png"}}" alt="Sample banner" />
            </a>
        </div>
    </div>

</div>


<div class="nested-container">

    <div class="page-banners grid-container">
        <div class="grid12-3 banner hide-below-768">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-3 banner hide-below-480">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
       	</div>
        <div class="grid12-3 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
        <div class="grid12-3 banner">
            <a href="{{store direct_url="about-magento-demo-store"}}" title="Replace this image with your own">
                <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/01.png"}}" alt="Sample banner" />
            </a>
        </div>
    </div>

</div>]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-01</identifier>
         <title>Ultimo Home Page 1</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<br/>
<br/>
<br/>

<div class="row row-bottom-gutter">

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-paint ib ib-size-xl ib-ef-1 ib-ef-1a"></span>
			<h6 class="above-heading">Customizable design</h6>
			<h3>Unlimited Colors</h3>
			<p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
			<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-smartphones ib ib-size-xl ib-ef-1 ib-ef-1a"></span>
			<h6 class="above-heading">12-column grid</h6>
			<h3>Responsive Layout</h3>
			<p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
			<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
		</div>

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

		<div class="feature feature-icon-hover indent indent-size-xl">
			<span class="ic ic-2x ic-menu ib ib-size-xl ib-ef-1 ib-ef-1a"></span>
			<h6 class="above-heading">Customizable drop-down menu</h6>
			<h3>Mega Menu</h3>
			<p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content to any category in the catalog...</p>
			<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
		</div>

	</div>

</div>

<br/>





{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5], [1200, 6]" pagination="1" centered="1" hide_button="1" block_name="Our Featured Products"}}
<br/>
<br/>


<div class="grid12-6 no-left-gutter">
{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="4" product_count="8" breakpoints="[0, 1], [320, 2], [480, 3], [768, 2], [992, 2], [1200, 3]"  timeout="4000" centered="1" hide_button="1" block_name="Recommended Shoes"}}
</div>
<div class="grid12-6 no-right-gutter">
{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="5" product_count="8" breakpoints="[0, 1], [320, 2], [480, 3], [768, 2], [992, 2], [1200, 3]" timeout="4000" centered="1" hide_button="1" block_name="Recommended Bags"}}
</div>

<div class="clearer"></div>
<br/>
<br/>
<br/>





    <div class="grid-container page-banners">
        <div class="grid12-4 no-left-gutter banner">

            <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/2a.png"}}" alt="Sample banner" />
            <br/><br/>

        </div>
        <div class="grid12-4">

            <div class="feature feature-icon-hover indent first">
                <span class="ic ic-char ib" style="background-color: #ddd;">1</span>
                <h4>Responsive Layout</h4>
                <p>Ultimo can be displayed on any screen. <span class="hide-below-1280">It is based on fluid grid system lorem ipsum dolor sit.</span> <span class="hide-below-960">If screen is resized, layout will be automat...</span></p>
            </div>
            <div class="feature feature-icon-hover indent">
                <span class="ic ic-char ib" style="background-color: #ddd;">2</span>
                <h4>Responsive Layout</h4>
                <p>Ultimo can be displayed on any screen. <span class="hide-below-1280">It is based on fluid grid system lorem ipsum dolor sit.</span> <span class="hide-below-960">If screen is resized, layout will be automat...</span></p>
            </div>
            <div class="feature feature-icon-hover indent last">
                <span class="ic ic-char ib" style="background-color: #ddd;">3</span>
                <h4>Responsive Layout</h4>
                <p>Ultimo can be displayed on any screen. <span class="hide-below-1280">It is based on fluid grid system lorem ipsum dolor sit.</span> <span class="hide-below-960">If screen is resized, layout will be automat...</span></p>
            </div>

        </div>
        <div class="grid12-4 no-right-gutter hide-below-768">

            <div class="page-banners grid-container-spaced">
                <div class="grid12-12 no-gutter banner fade-on-hover">
                    <a href="#">
                        <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/3a.jpg"}}" alt="Sample banner" />
                    </a>
                </div>
                <div class="grid12-6 no-left-gutter banner fade-on-hover">
                    <a href="#">
                        <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/3b.jpg"}}" alt="Sample banner" />
                    </a>
                </div>
                <div class="grid12-6 no-right-gutter banner fade-on-hover">
                    <a href="#">
                        <img src="{{media url="wysiwyg/infortis/ultimo/custom/banners/3c.jpg"}}" alt="Sample banner" />
                    </a>
                </div>
            </div>

        </div>
    </div>

<br/>
<br/>





<h4 class="border-bottom">Sample Custom Banners</h4>
<br />
<div class="nested-container">

    <div class="page-banners grid-container">
      <div class="grid12-3 mobile-grid banner">
        <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
          <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-01.png}}" alt="Sample banner" />
        </a>
      </div>
      <div class="grid12-3 mobile-grid banner">
        <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
          <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-02.png}}" alt="Sample banner" />
        </a>
      </div>
      <div class="grid12-3 mobile-grid banner">
        <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
          <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-03.png}}" alt="Sample banner" />
        </a>
      </div>
      <div class="grid12-3 mobile-grid banner">
        <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
          <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-04.png}}" alt="Sample banner" />
        </a>
      </div>
    </div>

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




{{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" breakpoints="[0, 1], [320, 2], [480, 2], [768, 3], [992, 4], [1200, 5]" timeout="6000" move="1" pagination="0" block_name="Our Brands"}}
<br/>
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-02</identifier>
         <title>Ultimo Home Page 2</title>
         <is_active>1</is_active>
         <page_layout>1column-full-width</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[<div style="background-color: #fbfbfb; margin-top: -20px;">
	<div class="container">
		<div class="inner-container">

			<br/>
			<br/>
			<br/>
			<br/>
			<br/>

			<div class="row row-bottom-gutter">

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

					<div class="feature feature-icon-hover indent indent-size-xxl">
						<span class="ic ic-2x ic-paint ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
						<h6 class="above-heading">Customizable design</h6>
						<h3>Unlimited Colors</h3>
						<p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
						<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
					</div>

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

					<div class="feature feature-icon-hover indent indent-size-xxl">
						<span class="ic ic-2x ic-smartphones ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
						<h6 class="above-heading">12-column grid</h6>
						<h3>Responsive Layout</h3>
						<p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
						<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
					</div>

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

					<div class="feature feature-icon-hover indent indent-size-xxl">
						<span class="ic ic-2x ic-menu ib ib-size-xxl ib-ef-3 ib-ef-3a"></span>
						<h6 class="above-heading">Customizable drop-down menu</h6>
						<h3>Mega Menu</h3>
						<p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content to any category in the catalog...</p>
						<a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
					</div>

				</div>
			
			</div>

			<br/>
			<br/>
			<br/>

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



<div class="container">
  <div class="inner-container">

    <br/>
    <br/>
    <br/>
    <br/>

    {{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12" breakpoints="[0, 1], [480, 2], [640, 3], [992, 4]" img_width="274" timeout="0" pagination="1" centered="1" hide_button="1" sort_by="name" sort_direction="ASC" block_name="Our Featured Products"}}

    <br/>
    <br/>
    <br/>
    <br/>

  </div>
</div>



<div style="background-color: #f5f5f5;">
  <div class="container">
    <div class="inner-container">

      <br/>
      <br/>
      <br/>
      <br/>
      <h2>More features than you could wish for</h2>
      <br/>
      <p style="font-size: 16px; color: #999; line-height: 23px;">Ultimo is a premium Magento theme with advanced admin module. It’s extremely customizable, easy to use and fully responsive. Suitable for every type of store, optimized for SEO. Great as a starting point for your custom projects. You can change visual appearance of almost every element. No coding needed, all can be edited directly in admin panel. </p>

      <br/>
      <br/>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-paint" style="color:#fd517f;"></span>
          <h3>Unlimited Colors</h3>
          <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-smartphones" style="color:#fd517f;"></span>
          <h3>Responsive Layout</h3>
          <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-menu" style="color:#fd517f;"></span>
          <h3>Mega Menu</h3>
          <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>

      <div class="clearer"></div>
      <br/>
      <br/>

      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-microscope" style="color:#fd517f;"></span>
          <h3>Font Icons</h3>
          <p>Font icons give you more control over the visual appearance of the icons. Add anywhere you want and customize to your needs...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-lightbulb" style="color:#fd517f;"></span>
          <h3>Easy to Customize</h3>
          <p>Use as a starting point for your custom projects. Create multiple child themes (theme variants) with ease...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-anchor" style="color:#fd517f;"></span>
          <h3>50+ CMS Blocks</h3>
          <p>You can use content placeholders to display custom content in almost every part of the store. Import sample CMS blocks from the demo...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="clearer"></div>
      <br/>
      <br/>
      <br/>
      <br/>

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




<div style="background: center center; background-image: url({{media url='wysiwyg/infortis/ultimo/custom/pattern.jpg'}});">
  <div class="container">
    <div class="inner-container"  style="text-align: center;">

      <div style="display: inline-block; padding:91px 0; color: #26525F;">

          <h1 style="font-size: 40px;">Responsive Magento Theme</h1>
          <h2 style="font-size: 20px;">Extremely Customizable</h2>

      </div>

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



<div style="background-color: #fafafa;">
  <div class="container">
    <div class="inner-container">

      <br/>
      <br/>
      <br/>
      <br/>
      <h2>Our Product Brands</h2>
      {{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" breakpoints="[0, 1], [320, 2], [480, 2], [768, 3], [992, 4], [1200, 5]" timeout="6000" move="1" pagination="0"}}
      <br/>
      <br/>
      <br/>
      <br/>

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



<div style="background-color: #fff;">
  <div class="container">
    <div class="inner-container">

      <div>

        <br/>
        <br/>
        <br/>
        <br/>
        <h2>Beautiful & Fully Customizable Design</h2>
        <br/>
        <p style="font-size: 16px; color: #999; line-height: 23px;">You can create any imaginable design or layout with Ultimo, and you don’t need to know absolutely anything about coding. All the options you could ever want are right there in our admin panel.</p>

      </div>

      <br/>
      <br/>
      <br/>
      <br/>
      <div class="nested-container">

        <div class="page-banners grid-container">
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-01.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-02.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-03.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-04.png}}" alt="Sample banner" />
            </a>
          </div>
        </div>

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

    </div>
  </div>
</div>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-03</identifier>
         <title>Ultimo Home Page 3</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<span class="section-line"></span>
<br/>
<div class="grid12-4">

  <div class="feature feature-icon-hover indent indent-size-xl">
    <span class="ic ic-2x ic-paint ib ib-size-xl"></span>
    <h6 class="above-heading">Customizable design</h6>
    <h3>Unlimited Colors</h3>
    <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover indent indent-size-xl">
    <span class="ic ic-2x ic-smartphones ib ib-size-xl"></span>
    <h6 class="above-heading">12-column grid</h6>
    <h3>Responsive Layout</h3>
    <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover  indent indent-size-xl">
    <span class="ic ic-2x ic-star ib ib-size-xl"></span>
    <h6 class="above-heading">Content placeholders</h6>
    <h3>50+ CMS blocks</h3>
    <p>You can use content placeholders to display custom content in almost every part of the store. Import sample CMS blocks from the demo...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="clearer"></div>





<br/>
<br/>
{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5], [1200, 6]" centered="0" hide_button="1" block_name="Our Featured Products"}}

{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="4" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5], [1200, 6]" centered="0" hide_button="1" block_name="New in Store"}}





<span class="section-title">Sample Custom Banners</span>
<br />

  <!-- First banner has a link which adds a product to the cart (link was copied from product's button "Add to cart") -->
  <div class="page-banners grid-container">
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url='checkout/cart/add/uenc/aHR0cDovL2xvY2FsaG9zdC5jb20vbTE3MDItMDF1bHRpbW8vZGVmYXVsdC8,/product/30/'}}" title="Click to add sample product to your cart">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1a.png"}}" alt="Add product to cart" />
      </a>
    </div>
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url='checkout/cart/'}}" title="Click to go to cart page">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1b.png"}}" alt="Go to Magento cart page" />
      </a>
    </div>
    <div class="grid12-6 banner">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1c.png"}}" alt="Magento discount code" title="Use discount code/coupon on cart page" />
    </div>
  </div>





<br/>
<div class="grid12-3">

  <div class="feature feature-icon-hover">
    <span class="left ic ic-lg ic-anchor ib"></span>
    <h6 class="above-heading">Secondary Heading</h6>
    <h3>Sample Heading</h3>
    <p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit rory solare de equis.</p>
    <a href="#" class="go">Read more</a>
  </div>

</div>
<div class="grid12-3">

  <div class="feature feature-icon-hover">
    <span class="left ic ic-lg ic-gift ib"></span>
    <h6 class="above-heading">Secondary Heading</h6>
    <h3>Feature Title</h3>
    <p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis.</p>
    <a href="#" class="go">Read more</a>
  </div>

</div>
<div class="grid12-3 hide-below-768">

  <div class="feature feature-icon-hover">
    <span class="left ic ic-lg ic-edit2 ib"></span>
    <h6 class="above-heading">Secondary Heading</h6>
    <h3>Sample Title</h3>
    <p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis.</p>
    <a href="#" class="go">Read more</a>
  </div>

</div>
<div class="grid12-3 hide-below-768">

  <div class="feature feature-icon-hover">
    <span class="left ic ic-lg ic-alarm ib"></span>
    <h6 class="above-heading">Secondary Heading</h6>
    <h3>Feature Title</h3>
    <p>Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis.</p>
    <a href="http://themeforest.net/item/fortis-flexible-magento-theme/1744309?ref=infortis" class="go">Read more</a>
  </div>

</div>
<div class="clearer"></div>





<br/>
<br/>
{{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" breakpoints="[0, 1], [320, 2], [480, 2], [768, 3], [992, 4], [1200, 5]" move="1" pagination="1" block_name="Product Brands"}}
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-04</identifier>
         <title>Ultimo Home Page 4</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<div class="nested-container">

  <div class="page-banners grid-container">
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1a.png"}}" alt="Sample banner" />
      </a>
    </div>
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1b.png"}}" alt="Sample banner" />
      </a>
    </div>
    <div class="grid12-6 banner">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1c.png"}}" alt="Sample banner" />
      </a>
    </div>
  </div>

</div>
<span class="clearer"></span>





<br/>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-paint ib ib-size-xxxl"></span>
    <h6 class="above-heading">Customizable design</h6>
    <h3>Unlimited Colors</h3>
    <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-smartphones ib ib-size-xxxl"></span>
    <h6 class="above-heading">12-column grid</h6>
    <h3>Responsive Layout</h3>
    <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-menu ib ib-size-xxxl"></span>
    <h6 class="above-heading">Customizable drop-down menu</h6>
    <h3>Mega Menu</h3>
    <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="clearer"></div>
<br/>
<br/>
<br/>





{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5]" size="size-s" move="1" pagination="1" centered="1" hide_button="1" block_name="New in Store"}}
<br/>

{{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" pagination="1" block_name="Product Brands"}}
<br/>

{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="4" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5]" size="size-s" pagination="1" centered="1" hide_button="1" block_name="Our Featured Products"}}
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-05</identifier>
         <title>Ultimo Home Page 5</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<br/>
<br/>
<br/>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-paint ib ib-size-xxxl"></span>
    <h3>Unlimited Colors</h3>
    <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-smartphones ib ib-size-xxxl"></span>
    <h3>Responsive Layout</h3>
    <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover centered">
    <span class="ic ic-3x ic-menu ib ib-size-xxxl"></span>
    <h3>Mega Menu</h3>
    <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="clearer"></div>
<br/>
<br/>
<br/>





<h4 class="border-bottom">Our Featured Products</h4>

{{block class="Magento\Catalog\Block\Product\ListProduct" template="product/list.phtml" category_id="3" grid_column_count="3" img_width="300" img_height="300"}}
<br/>
<br/>





{{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" pagination="1" block_name="Product Brands"}}
<br/>
<br/>





<h4 class="border-bottom">Sample Custom Banners</h4>
<br />
<div class="nested-container">

  <div class="page-banners grid-container">
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1a.png"}}" alt="Sample banner" />
      </a>
    </div>
    <div class="grid12-3 banner fade-on-hover hide-below-768">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1b.png"}}" alt="Sample banner" />
      </a>
    </div>
    <div class="grid12-6 banner">
      <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
        <img class="fade-on-hover" src="{{media url="wysiwyg/infortis/ultimo/custom/banners/1c.png"}}" alt="Sample banner" />
      </a>
    </div>
  </div>

</div>
<span class="clearer"></span>
<br/>
<br/>
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-06</identifier>
         <title>Ultimo Home Page 6</title>
         <is_active>1</is_active>
         <page_layout>1column</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<br/>
<br/>
<br/>
<div class="grid12-4">

  <div class="feature feature-icon-hover indent indent-size-xxxl">
    <span class="ic ic-3x ic-paint ib ib-size-xxxl ib-square"></span>
    <h6 class="above-heading">Customizable design</h6>
    <h3>Unlimited Colors</h3>
    <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover indent indent-size-xxxl">
    <span class="ic ic-3x ic-smartphones ib ib-size-xxxl ib-square"></span>
    <h6 class="above-heading">12-column grid</h6>
    <h3>Responsive Layout</h3>
    <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="grid12-4">

  <div class="feature feature-icon-hover indent indent-size-xxxl">
    <span class="ic ic-3x ic-menu ib ib-size-xxxl ib-square"></span>
    <h6 class="above-heading">Customizable drop-down menu</h6>
    <h3>Mega Menu</h3>
    <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
    <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
  </div>

</div>
<div class="clearer"></div>
<br/>
<br/>
<br/>




{{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12" breakpoints="[0, 1], [320, 2], [480, 3], [768, 4], [992, 5], [1200, 6]" pagination="1" centered="1" hide_button="1" block_name="Recommended Products"}}
<br/>
<br/>



{{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" breakpoints="[0, 1], [320, 2], [480, 2], [768, 3], [992, 4], [1200, 5]" timeout="6000" move="1" pagination="1" block_name="Product Brands"}}
<br/>
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-07</identifier>
         <title>Ultimo Home Page 7</title>
         <is_active>1</is_active>
         <page_layout>2columns-left</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<br/>
{{block class="Magento\Catalog\Block\Product\ListProduct" template="product/list.phtml" category_id="27" grid_column_count="3" img_width="300" img_height="300"}}
<br/>
<br/>
]]></content>
      </page>
      <page>
         <identifier>ultimo-home-page-08</identifier>
         <title>Ultimo Home Page 8</title>
         <is_active>1</is_active>
         <page_layout>1column-full-width</page_layout>
         <stores><item>0</item></stores>
         <content><![CDATA[
<div class="container">
  <div class="inner-container">

    <br/>
    <br/>
    <br/>
    <br/>

    {{block class="Infortis\UltraSlideshow\Block\Slideshow" template="slideshow.phtml" slides="sample_slideshow_8"}}

    <br/>
    <br/>
    <br/>

  </div>
</div>



<div style="background-color: #fbfbfb;">
  <div class="container">
    <div class="inner-container">

      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xxxl">
          <span class="ic ic-2x ic-paint square ib ib-size-xxxl"></span>
          <h6 class="above-heading">Customizable design</h6>
          <h3>Unlimited Colors</h3>
          <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xxxl">
          <span class="ic ic-2x ic-smartphones square ib ib-size-xxxl"></span>
          <h6 class="above-heading">12-column grid</h6>
          <h3>Responsive Layout</h3>
          <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xxxl">
          <span class="ic ic-2x ic-menu square ib ib-size-xxxl"></span>
          <h6 class="above-heading">Customizable drop-down menu</h6>
          <h3>Mega Menu</h3>
          <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content to any category in the catalog...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="clearer"></div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>

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



<div class="container">
  <div class="inner-container">

    <br/>
    <br/>
    <br/>
    <br/>

    <h2  style="text-align: center;">Our Products</h2>
    {{block class="Infortis\Base\Block\Product\ProductList\Featured" template="product/list_featured_slider.phtml" category_id="3" product_count="12"  breakpoints="[0, 1], [480, 2], [640, 3], [992, 4]" img_width="274" timeout="0" pagination="1" centered="1" hide_button="1" sort_by="name" sort_direction="DESC" block_name=""}}

    <br/>
    <br/>
    <br/>
    <br/>

  </div>
</div>



<div style="background-color: #f5f5f5;">
  <div class="container">
    <div class="inner-container">

      <br/>
      <br/>
      <br/>
      <br/>
      <h2  style="text-align: center;">More features than you could wish for</h2>
      <br/>
      <p   style="text-align: center; font-size: 16px; color: #999; line-height: 23px;">Ultimo is a premium Magento theme with advanced admin module. It’s extremely customizable, easy to use and fully responsive. Suitable for every type of store, optimized for SEO. Great as a starting point for your custom projects. You can change visual appearance of almost every element. No coding needed, all can be edited directly in admin panel. </p>

      <br/>
      <br/>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-paint" style="color:#30a5ff;"></span>
          <h3>Unlimited Colors</h3>
          <p>You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-smartphones" style="color:#30a5ff;"></span>
          <h3>Responsive Layout</h3>
          <p>Ultimo can be displayed on any screen. It is based on fluid grid system. If screen is resized, layout will be automatically adjusted...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-menu" style="color:#30a5ff;"></span>
          <h3>Mega Menu</h3>
          <p>Two styles: wide mega menu or classic drop-down menu. You can add any custom content (images, text, HTML) to any category in the catalog...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>

      <div class="clearer"></div>
      <br/>
      <br/>

      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-microscope" style="color:#30a5ff;"></span>
          <h3>Font Icons</h3>
          <p>Font icons give you more control over the visual appearance of the icons. Add anywhere you want and customize to your needs...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-lightbulb" style="color:#30a5ff;"></span>
          <h3>Easy to Customize</h3>
          <p>Use as a starting point for your custom projects. Create multiple child themes (theme variants) with ease...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="grid12-4">

        <div class="feature feature-icon-hover indent indent-size-xl">
          <span class="ic ic-4x ic-anchor" style="color:#30a5ff;"></span>
          <h3>50+ CMS Blocks</h3>
          <p>You can use content placeholders to display custom content in almost every part of the store. Import sample CMS blocks from the demo...</p>
          <a href="{{store url='ultimo-responsive-magento-theme'}}" class="go">See all features</a>
        </div>

      </div>
      <div class="clearer"></div>
      <br/>
      <br/>
      <br/>
      <br/>

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




<div style="background-color: #30A5FF; background: radial-gradient(ellipse at center, rgba(48,165,255,1) 0%, rgba(48,165,255,1) 41%, rgba(25,141,230,1) 100%);">
  <div class="container">
    <div class="inner-container"  style="text-align: center;">

      <div style="display: inline-block; padding:100px 0; color: #DEF0FF;">

          <span class="ic ic-3x ic-smartphones ib ib-hover ib-size-xxxl" style="background-color: rgba(31, 92, 137, 1); margin-bottom: 20px;"></span>
          <h1 style="font-size: 40px;">Responsive Magento Theme</h1>
          <h2 style="font-size: 20px;">Extremely Customizable</h2>

      </div>

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



<div style="background-color: #fafafa;">
  <div class="container">
    <div class="inner-container">

      <br/>
      <br/>
      <br/>
      <br/>
      <h2  style="text-align: center;">Our Brands</h2>
      {{block class="Infortis\Brands\Block\Brands" template="brand_slider.phtml" breakpoints="[0, 1], [320, 2], [480, 2], [768, 3], [992, 4], [1200, 5]" timeout="6000" move="1" pagination="0"}}
      <br/>
      <br/>
      <br/>
      <br/>

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



<div style="background-color: #fff;">
  <div class="container">
    <div class="inner-container">

      <div>

        <br/>
        <br/>
        <br/>
        <br/>
        <h2  style="text-align: center;">Beautiful & Fully Customizable Design</h2>
        <br/>
        <p   style="text-align: center; font-size: 16px; color: #999; line-height: 23px;">You can create any imaginable design or layout with Ultimo, and you don’t need to know absolutely anything about coding. All the options you could ever want are right there in our admin panel.</p>

      </div>

      <br/>
      <br/>
      <br/>
      <br/>
      <div class="nested-container">

        <div class="page-banners grid-container">
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-01.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-02.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-03.png}}" alt="Sample banner" />
            </a>
          </div>
          <div class="grid12-3 mobile-grid banner">
            <a href="{{store direct_url="about-us"}}" title="Replace this image with your own">
              <img src="{{media url="wysiwyg/infortis/ultimo/banners/square-04.png}}" alt="Sample banner" />
            </a>
          </div>
        </div>

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

    </div>
  </div>
</div>
]]></content>
      </page>
   </pages>
</root>