<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TacØ Modules - SASS - Trilix Responsive Grid System</title>
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/global/fontface/index.php' ?>

<link rel="stylesheet" href="/css/global.css" />

<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/global/favicon/index.php' ?>

<meta property="og:image" content="/images/open-graph/trlx.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="1500" />
<meta property="og:title" content="SASS - Trilix Responsive Grid System" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>" />
<meta property="og:site_name" content="SASS - Trilix Responsive Grid System" />

<style>
	.wrapper{
		padding: 5vw 0;
	}
</style>

</head>
<body class="tac0">
	<div id="wrapper" class="wrapper">
		<div class="module lead-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<h1>TacØ Modules</h1>
						<p>Nulla elit consectetur cillum eu eu dolor consequat aliqua cillum officia sit tempor proident proident elit ut exercitation qui ea sunt voluptate qui ut eu tempor id consequat culpa ullamco nostrud occaecat duis deserunt labore dolor. Lorem ipsum in adipisicing incididunt sit ut quis labore reprehenderit laborum qui ullamco consectetur ut dolor ut cillum dolor.</p>
					</div>
				</div>
			</div>
		</div>

		<div class="module image-module img-large">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/1300x900-test1.jpg"
								alt=""
							/>
						</figure>
					</div>
				</div>
			</div>
		</div>

		<div class="module text-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<h2>Mollit incididunt excepteur esse</h2>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
					
						<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="module text-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text module-background">
						<h2>Mollit incididunt excepteur esse</h2>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque?</p>
					</div>
				</div>
			</div>
		</div>

		<div class="module column-text-module">
			<div class="grid">
				<div class="module-content">
					<div class="nest">
						<div class="col-6">
							<div class="module-text module-background">
								<div class="column-content">
									<h3>Mollit incididunt excepteur esse</h3>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
								</div>
							</div>
						</div>
						<div class="col-6">
							<div class="module-text module-background">
								<div class="column-content">
									<h3>Mollit incididunt excepteur esse</h3>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam. Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="module column-text-module">
			<div class="grid">
				<div class="module-content">
					<div class="nest">
						<div class="col-4">
							<div class="module-text module-background">
								<div class="column-content">
									<h4>Mollit incididunt excepteur esse</h4>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
								</div>
							</div>
						</div>
						<div class="col-4">
							<div class="module-text module-background">
								<div class="column-content">
									<h4>Mollit incididunt excepteur esse</h4>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
								</div>
							</div>
						</div>
						<div class="col-4">
							<div class="module-text module-background">
								<div class="column-content">
									<h4>Mollit incididunt excepteur esse</h4>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
									<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="module img-txt-module left img-landscape">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale img-main"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/700x560-test.jpg"
								alt=""
							/>
						</figure>
						<figcaption><strong>Photo:</strong> Des Moines Register</figcaption>
					</div>
					<div class="module-text no-wrap">
						<h3>Mollit incididunt excepteur esse</h3>
						<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
					
						<h4>Mollit incididunt excepteur esse</h4>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores beatae, quis, debitis quaerat minus amet aliquid tempore exercitationem animi saepe optio ut non! Recusandae voluptate sit animi mollitia officia nostrum assumenda autem consequatur, eaque numquam! Amet eos quas autem nesciunt soluta modi iste, consequatur accusamus dolorum, temporibus voluptates, quam perspiciatis!</p>

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

		<section class="module gallery-grid-module">
		    <div class="grid">
		        <div class="module-content">
		            <ul class="img-grid-3">
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		                <li>
		                    <a href="/images/test/1000x520-test2.jpg" class="b-lazy mp-gallery" data-src="/images/test/1000x520-test2.jpg"></a>
		                    <figcaption>I am photo info</figcaption>
		                </li>
		            </ul>
		        </div>
		    </div>
		</section>

		<div class="module image-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/1100x575-test1.jpg"
								alt=""
							/>
						</figure>
					</div>
					<figcaption>Lorem ipsum eu nisi elit ut ad voluptate adipisicing aute tempor occaecat quis sint laboris nostrud qui sit reprehenderit id.</figcaption>
				</div>
			</div>
		</div>

		<div class="module link-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<h2>Mollit minim quis esse nostrud.</h2>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam. Irure voluptate labore incididunt voluptate proident cillum sint ullamco laborum commodo occaecat ex incididunt et eiusmod veniam dolore elit enim dolor amet dolor officia elit proident labore aliquip non do ullamco occaecat mollit aliqua ad magna.</p>
					</div>
					<nav class="module-links">
						<ul>
							<li><a href="#">I am a link</a></li>
							<li><a href="#.pdf">I am a document</a></li>
							<li><a href="#.docx">I am a document</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>

		<div class="module video-module">
			<div class="grid">
				<div class="module-content">
					<div class="video-container">
						<iframe src="https://www.youtube.com/embed/EorJ8cEzsZo" frameborder="0" allowfullscreen></iframe>
					</div>
				</div>
			</div>
		</div>

		<div class="module text-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<h2>Mollit incididunt excepteur esse</h2>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
					
						<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
					</div>
				</div>
			</div>
		</div>

		<div class="module banner-module">
			<div class="image-container b-lazy" data-src="/images/test/1500x750-2.jpg"></div>
		    <div class="grid">
		        <div class="module-content">
		            <div class="module-text">
		                <h2>Lorem ipsum dolor ut laborum.</h2>
		                <p>Ut ut exercitation ad ut ut ut voluptate ut veniam ex in labore duis in pariatur consectetur ex eiusmod fugiat ullamco dolor.</p>
		                <p class="action">
		                	<a href="#" class="button">Lorem Ipsum Dolor</a>
		                </p>
		            </div>
		        </div>
		    </div>
		</div>

		<div class="module slide-toggle-module">
			<div class="slide-trigger">
				<span>Slide Toggle Module Container<span class="icon"></span></span>
			</div>
			<div class="slide-toggle">
				<div class="module img-txt-module left img-landscape">
					<div class="grid">
						<div class="module-content">
							<div class="module-image">
								<figure>
									<img
										class="b-lazy scale"
										src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
										data-src="/images/test/700x560-test.jpg"
										alt=""
									/>
								</figure>
								<figcaption><strong>Photo:</strong> Des Moines Register</figcaption>
							</div>
							<div class="module-text">
								<h3>Mollit incididunt excepteur esse</h3>
								<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
							
								<h4>Mollit incididunt excepteur esse</h4>
								<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
				
		<div class="module img-txt-module right img-square">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/700x700-test.jpg"
								alt=""
							/>
						</figure>
						<figcaption><strong>Photo:</strong> Des Moines Register</figcaption>
					</div>
					<div class="module-text">
						<h3>Mollit incididunt excepteur esse</h3>
						<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
					
						<h4>Mollit incididunt excepteur esse</h4>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="module img-txt-module left img-portrait">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/560x700-test.jpg"
								alt=""
							/>
						</figure>
						<figcaption><strong>Photo:</strong> Des Moines Register</figcaption>
					</div>
					<div class="module-text">
						<h3>Mollit incididunt excepteur esse</h3>
						<p>Pariatur dolore dolore mollit laborum id ut eu occaecat sint nisi exercitation irure excepteur exercitation voluptate dolor dolore eu veniam minim esse nulla exercitation in velit irure eiusmod dolor aute aute dolor duis exercitation. Mollit nisi adipisicing nisi nulla qui sit amet sint reprehenderit pariatur.</p>
					
						<h4>Mollit incididunt excepteur esse</h4>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="module img-lead-module left img-landscape">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/700x560-test.jpg"
								alt=""
							/>
						</figure>
					</div>
					<div class="module-text">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum porttitor ante, id venenatis mauris egestas ac. Duis nunc neque, consequat sit amet hendrerit sit amet, viverra et nunc.&nbsp;</p>			
					</div>
				</div>
			</div>
		</div>

		<div class="module img-lead-module right img-square">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/700x700-test.jpg"
								alt=""
							/>
						</figure>
					</div>
					<div class="module-text">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum porttitor ante, id venenatis mauris egestas ac. Duis nunc neque, consequat sit amet hendrerit sit amet, viverra et nunc.&nbsp;</p>			
					</div>
				</div>
			</div>
		</div>

		<div class="module img-lead-module left img-portrait">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
							<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/560x700-test.jpg"
								alt=""
							/>
						</figure>
					</div>
					<div class="module-text">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum porttitor ante, id venenatis mauris egestas ac. Duis nunc neque, consequat sit amet hendrerit sit amet, viverra et nunc.&nbsp;</p>			
					</div>
				</div>
			</div>
		</div>

		<div class="module video-2up-module">
		    <div class="grid">
		        <div class="module-content">
		            <ul>
		            	<li>
		            		<div class="video-container">
								<iframe width="853" height="480" src="https://www.youtube.com/embed/EorJ8cEzsZo" frameborder="0" allowfullscreen></iframe>
							</div>
		            	</li>
		            	<li>
		            		<div class="video-container">
								<iframe width="853" height="480" src="https://www.youtube.com/embed/EorJ8cEzsZo" frameborder="0" allowfullscreen></iframe>
							</div>
		            	</li>
		            </ul>
		        </div>
		    </div>
		</div>

		<div class="module quote-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<blockquote>
							<p>"Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam."</p>
							<cite>Namey Mc Namerson</cite>
						</blockquote>
					</div>
				</div>
			</div>
		</div>

		<div class="module image-2up-module">
		    <div class="grid">
		        <div class="module-content">
		            <ul>
		            	<li>
		            		<figure>
		            			<img
									class="b-lazy scale"
									src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
									data-src="/images/test/cat-tax-1.jpg"
									alt=""
								/>
		           			</figure>
		            	</li>
		            	<li>
		            		<figure>
		            			<img
									class="b-lazy scale"
									src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
									data-src="/images/test/cat-tax-2.jpg"
									alt=""
								/>
		           			</figure>
		            	</li>
		            </ul>
		        </div>
		    </div>
		</div>

		<div class="module image-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-image">
						<figure>
		        			<img
								class="b-lazy scale"
								src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
								data-src="/images/test/1100x575-test2.jpg"
								alt=""
							/>
		       			</figure>
					</div>
				</div>
			</div>
		</div>

		<div class="module image-3up-module">
		    <div class="grid">
		        <div class="module-content">
		            <ul>
		            	<li>
		            		<figure>
		            			<img
									class="b-lazy scale"
									src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
									data-src="/images/test/cat-tax-1.jpg"
									alt=""
								/>
		           			</figure>
		            	</li>
		            	<li>
		            		<figure>
		            			<img
									class="b-lazy scale"
									src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
									data-src="/images/test/cat-tax-2.jpg"
									alt=""
								/>
		           			</figure>
		            	</li>
		            	<li>
		            		<figure>
		            			<img
									class="b-lazy scale"
									src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
									data-src="/images/test/cat-tax-1.jpg"
									alt=""
								/>
		           			</figure>
		            	</li>
		            </ul>
		        </div>
		    </div>
		</div>

		<section class="module seperator-module">
		    <div class="image-container b-lazy" data-src="/images/test/1000x520-test2.jpg">
		    </div>
		</section>

		<div class="module link-abstract-module">
			<div class="grid">
				<div class="module-content">
					<div class="module-text">
						<h2>Mollit incididunt excepteur esse</h2>
						<p>Elit ullamco est in in mollit est officia consequat esse pariatur aute commodo incididunt sunt aliquip nulla velit aliquip sunt veniam consequat veniam.</p>
					</div>
					<nav class="module-links">
						<ul>
							<li>
								<a href="http://www.google.com" class="title" target="_blank">Dolor enim non id cupidatat labore ut consequat deserunt consectetur</a>
								<div class="desc">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et rutrum justo. Sed dui libero, imperdiet quis euismod quis, dignissim euismod est. Maecenas quis turpis vulputate, volutpat quam ac, auctor leo. Curabitur sollicitudin velit eu dolor scelerisque pulvinar. Donec in finibus quam. Sed elementum neque arcu, nec tristique tortor commodo at.</p>		
								</div>
							</li>
							<li>
								<a href="http://www.yahoo.com" class="title" target="_blank">Lorem ipsum proident nostrud ut est duis amet in ut id esse dolore</a>
								<div class="desc">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et rutrum justo. Sed dui libero, imperdiet quis euismod quis, dignissim euismod est. Maecenas quis turpis vulputate, volutpat quam ac, auctor leo. Curabitur sollicitudin velit eu dolor scelerisque pulvinar. Donec in finibus quam. Sed elementum neque arcu, nec tristique tortor commodo at.</p>	
								</div>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	<?php /* WISTIA EMBED
	<div class="module video-module">
		<script src="//fast.wistia.com/embed/medias/<?php echo h($r['video']); ?>.jsonp" async></script>
		<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
			<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
				<div class="wistia_embed wistia_async_#?> videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
			</div>
		</div>
	</div> */ ?>
	</div>
	<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/global/responsive-nav/index.php' ?>
	<script src="/js/global.js"></script>
</body>
</html>