[ux_banner height="446px" bg="20" bg_overlay="rgba(0, 0, 0, 0.61)" bg_pos="58% 26%"]

[text_box width="100" width__sm="75" parallax="-1"]

<h6>Flatsome Grid System</h6>
<h1>Responsive Rows and Columns</h1>
<p class="lead">Create Amazing layouts by using Flatsome Row and Column System powered by<strong> Flexbox</strong></p>

[/text_box]

[/ux_banner]
[title style="center" text="Simple 4-column row"]

[row padding="30px"]

[col span="3" span__sm="6" bg_color="rgba(255, 0, 211, 0.96)" color="light" depth_hover="5"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Vertical Centered Row"]

[row v_align="middle" padding="30px"]

[col span="6" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Bottom Align Row"]

[row v_align="bottom" padding="30px"]

[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Equal aligned row"]

[row v_align="equal" padding="30px"]

[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>

[/col]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Rows With Drop shadow"]

[row padding="30px" depth="2" depth_hover="3"]

[col span="4" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>
<p><strong>You can set Column Depth for All columns or per column.</strong></p>

[/col]
[col span="4" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Divided row"]

[row style="large" col_style="divided"]

[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]

[/row]
[title style="center" text="Dashed Lined Row" margin_top="23px" size="undefined"]

[row col_style="dashed" padding="30px"]

[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]

[/row]
[title style="center" text="Solid Lined Row" margin_top="25px" size="undefined"]

[row col_style="solid" padding="30px"]

[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]

[/row]
[title style="center" text="Custom Background on a Column" margin_top="28px" size="undefined"]

[row padding="30px"]

[col span="5" span__sm="6" padding="30px 30px 30px 30px" bg_color="rgb(38, 65, 116)" color="light" depth="2"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="3" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]

[/row]
[title style="center" text="Full Width Row with Backgrounds"]

[row style="collapse" width="full-width" v_align="equal" padding="30px"]

[col span="4" span__sm="12" bg_color="rgb(0, 0, 0)" color="light"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="12" bg_color="rgb(153, 120, 222)" color="light"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]
[col span="4" span__sm="12" bg_color="rgb(120, 154, 222)" color="light"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>

[/col]

[/row]
[title style="center" text="Nested Rows"]

[row]

[col span="4" span__sm="12"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="8" span__sm="12"]

[row_inner]

[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]
[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]
[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]
[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]
[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]
[col_inner span="4" span__sm="6"]

<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col_inner]

[/row_inner]

[/col]

[/row]
[section bg_color="rgb(231, 231, 231)"]

[row v_align="middle"]

[col span="4" span__sm="6"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="6"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" padding="30px 30px 30px 30px" bg_color="rgb(255, 255, 255)" depth="3" depth_hover="5"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]

[/section]
[section bg_color="rgb(0, 0, 0)"]

[row style="small" v_align="middle"]

[col span="4" span__sm="12" padding="20px" bg_color="rgb(255, 255, 255)"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" color="light"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" color="light"]

<h3>Column with a drop shadow and white background</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]

[/section]
[section bg_color="rgb(231, 231, 231)"]

[row col_style="solid"]

[col span="4" span__sm="6" parallax="1"]

<h3>Parallax Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="6" parallax="2"]

<h3>Parallax Column</h3>
<p><span style="color: #555555; font-size: 14.4px; line-height: 1.5;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</span></p>

[/col]
[col span="4" span__sm="12" parallax="3"]

<h3>Parallax Column</h3>
<p><span style="color: #555555; font-size: 14.4px; line-height: 1.5;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</span></p>

[/col]

[/row]

[/section]
[row h_align="center"]

[col span="7" span__sm="10" align="center"]

<h3>A Centered Columns Row</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[title style="center" text="Animated Columns"]

[row]

[col span="4" span__sm="12" animate="fadeInUp"]

<h3>Fade In Up</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="fadeInDown"]

<h3>Fade In Down</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="fadeInLeft"]

<h3>Fade In Left</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="fadeInRight"]

<h3>Fade In Right</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="bounceIn"]

<h3>Bounce In</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="bounceInUp"]

<h3>Bounce In Up</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="bounceInDown"]

<h3>Bounce In Down</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="bounceInLeft"]

<h3>Bounce In Left</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="4" span__sm="12" animate="bounceInRight"]

<h3>Bounce In Right</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]
[row]

[col span="6" span__sm="12" animate="flipInY"]

<h3>Flip In Y</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="6" span__sm="12" animate="flipInX"]

<h3>Flip In X</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]
[col span="6" span__sm="12" animate="blurIn"]

<h3>Blur In</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>

[/col]

[/row]