+++ /dev/null
-<!DOCTYPE HTML>\r
-<!--\r
- Editorial by HTML5 UP\r
- html5up.net | @ajlkn\r
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
--->\r
-<html>\r
- <head>\r
- <title>Elements - Editorial by HTML5 UP</title>\r
- <meta charset="utf-8" />\r
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />\r
- <link rel="stylesheet" href="assets/css/main.css" />\r
- </head>\r
- <body class="is-preload">\r
-\r
- <!-- Wrapper -->\r
- <div id="wrapper">\r
-\r
- <!-- Main -->\r
- <div id="main">\r
- <div class="inner">\r
-\r
- <!-- Header -->\r
- <header id="header">\r
- <a href="index.html" class="logo"><strong>Editorial</strong> by HTML5 UP</a>\r
- <ul class="icons">\r
- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>\r
- <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>\r
- <li><a href="#" class="icon fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>\r
- <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>\r
- <li><a href="#" class="icon fa-medium"><span class="label">Medium</span></a></li>\r
- </ul>\r
- </header>\r
-\r
- <!-- Content -->\r
- <section>\r
- <header class="main">\r
- <h1>Elements</h1>\r
- </header>\r
-\r
- <!-- Content -->\r
- <h2 id="content">Sample Content</h2>\r
- <p>Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing lorem ipsum dolor sit amet nullam veroeros adipiscing.</p>\r
- <div class="row">\r
- <div class="col-6 col-12-small">\r
- <h3>Sem turpis amet semper</h3>\r
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>\r
- </div>\r
- <div class="col-6 col-12-small">\r
- <h3>Magna odio tempus commodo</h3>\r
- <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan.</p>\r
- </div>\r
- <!-- Break -->\r
- <div class="col-4 col-12-medium">\r
- <h3>Interdum sapien gravida</h3>\r
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>\r
- </div>\r
- <div class="col-4 col-12-medium">\r
- <h3>Faucibus consequat lorem</h3>\r
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>\r
- </div>\r
- <div class="col-4 col-12-medium">\r
- <h3>Accumsan montes viverra</h3>\r
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>\r
- </div>\r
- </div>\r
-\r
- <hr class="major" />\r
-\r
- <!-- Elements -->\r
- <h2 id="elements">Elements</h2>\r
- <div class="row gtr-200">\r
- <div class="col-6 col-12-medium">\r
-\r
- <!-- Text stuff -->\r
- <h3>Text</h3>\r
- <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.\r
- This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.\r
- This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.\r
- Finally, this is a <a href="#">link</a>.</p>\r
- <hr />\r
- <h2>Heading Level 2</h2>\r
- <h3>Heading Level 3</h3>\r
- <h4>Heading Level 4</h4>\r
- <hr />\r
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>\r
-\r
- <!-- Lists -->\r
- <h3>Lists</h3>\r
- <div class="row">\r
- <div class="col-6 col-12-small">\r
-\r
- <h4>Unordered</h4>\r
- <ul>\r
- <li>Dolor etiam magna etiam.</li>\r
- <li>Sagittis lorem eleifend.</li>\r
- <li>Felis dolore viverra.</li>\r
- </ul>\r
-\r
- <h4>Alternate</h4>\r
- <ul class="alt">\r
- <li>Dolor etiam magna etiam.</li>\r
- <li>Sagittis lorem eleifend.</li>\r
- <li>Felis feugiat viverra.</li>\r
- </ul>\r
-\r
- </div>\r
- <div class="col-6 col-12-small">\r
-\r
- <h4>Ordered</h4>\r
- <ol>\r
- <li>Dolor etiam magna etiam.</li>\r
- <li>Etiam vel lorem sed viverra.</li>\r
- <li>Felis dolore viverra.</li>\r
- <li>Dolor etiam magna etiam.</li>\r
- <li>Etiam vel lorem sed viverra.</li>\r
- <li>Felis dolore viverra.</li>\r
- </ol>\r
-\r
- <h4>Icons</h4>\r
- <ul class="icons">\r
- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>\r
- <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>\r
- <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>\r
- <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>\r
- <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>\r
- <li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>\r
- </ul>\r
-\r
- </div>\r
- </div>\r
- <h4>Definition</h4>\r
- <dl>\r
- <dt>Item1</dt>\r
- <dd>\r
- <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>\r
- </dd>\r
- <dt>Item2</dt>\r
- <dd>\r
- <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>\r
- </dd>\r
- <dt>Item3</dt>\r
- <dd>\r
- <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>\r
- </dd>\r
- </dl>\r
-\r
- <h4>Actions</h4>\r
- <ul class="actions">\r
- <li><a href="#" class="button primary">Default</a></li>\r
- <li><a href="#" class="button">Default</a></li>\r
- </ul>\r
- <ul class="actions small">\r
- <li><a href="#" class="button primary small">Small</a></li>\r
- <li><a href="#" class="button small">Small</a></li>\r
- </ul>\r
- <div class="row">\r
- <div class="col-6 col-12-small">\r
- <ul class="actions stacked">\r
- <li><a href="#" class="button primary">Default</a></li>\r
- <li><a href="#" class="button">Default</a></li>\r
- </ul>\r
- </div>\r
- <div class="col-6 col-12-small">\r
- <ul class="actions stacked">\r
- <li><a href="#" class="button primary small">Small</a></li>\r
- <li><a href="#" class="button small">Small</a></li>\r
- </ul>\r
- </div>\r
- <div class="col-6 col-12-small">\r
- <ul class="actions stacked">\r
- <li><a href="#" class="button primary fit">Default</a></li>\r
- <li><a href="#" class="button fit">Default</a></li>\r
- </ul>\r
- </div>\r
- <div class="col-6 col-12-small">\r
- <ul class="actions stacked">\r
- <li><a href="#" class="button primary small fit">Small</a></li>\r
- <li><a href="#" class="button small fit">Small</a></li>\r
- </ul>\r
- </div>\r
- </div>\r
-\r
- <h4>Pagination</h4>\r
- <ul class="pagination">\r
- <li><span class="button disabled">Prev</span></li>\r
- <li><a href="#" class="page active">1</a></li>\r
- <li><a href="#" class="page">2</a></li>\r
- <li><a href="#" class="page">3</a></li>\r
- <li><span>…</span></li>\r
- <li><a href="#" class="page">8</a></li>\r
- <li><a href="#" class="page">9</a></li>\r
- <li><a href="#" class="page">10</a></li>\r
- <li><a href="#" class="button">Next</a></li>\r
- </ul>\r
-\r
- <!-- Blockquote -->\r
- <h3>Blockquote</h3>\r
- <blockquote>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</blockquote>\r
-\r
- <!-- Table -->\r
- <h3>Table</h3>\r
-\r
- <h4>Default</h4>\r
- <div class="table-wrapper">\r
- <table>\r
- <thead>\r
- <tr>\r
- <th>Name</th>\r
- <th>Description</th>\r
- <th>Price</th>\r
- </tr>\r
- </thead>\r
- <tbody>\r
- <tr>\r
- <td>Item1</td>\r
- <td>Ante turpis integer aliquet porttitor.</td>\r
- <td>29.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item2</td>\r
- <td>Vis ac commodo adipiscing arcu aliquet.</td>\r
- <td>19.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item3</td>\r
- <td> Morbi faucibus arcu accumsan lorem.</td>\r
- <td>29.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item4</td>\r
- <td>Vitae integer tempus condimentum.</td>\r
- <td>19.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item5</td>\r
- <td>Ante turpis integer aliquet porttitor.</td>\r
- <td>29.99</td>\r
- </tr>\r
- </tbody>\r
- <tfoot>\r
- <tr>\r
- <td colspan="2"></td>\r
- <td>100.00</td>\r
- </tr>\r
- </tfoot>\r
- </table>\r
- </div>\r
-\r
- <h4>Alternate</h4>\r
- <div class="table-wrapper">\r
- <table class="alt">\r
- <thead>\r
- <tr>\r
- <th>Name</th>\r
- <th>Description</th>\r
- <th>Price</th>\r
- </tr>\r
- </thead>\r
- <tbody>\r
- <tr>\r
- <td>Item1</td>\r
- <td>Ante turpis integer aliquet porttitor.</td>\r
- <td>29.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item2</td>\r
- <td>Vis ac commodo adipiscing arcu aliquet.</td>\r
- <td>19.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item3</td>\r
- <td> Morbi faucibus arcu accumsan lorem.</td>\r
- <td>29.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item4</td>\r
- <td>Vitae integer tempus condimentum.</td>\r
- <td>19.99</td>\r
- </tr>\r
- <tr>\r
- <td>Item5</td>\r
- <td>Ante turpis integer aliquet porttitor.</td>\r
- <td>29.99</td>\r
- </tr>\r
- </tbody>\r
- <tfoot>\r
- <tr>\r
- <td colspan="2"></td>\r
- <td>100.00</td>\r
- </tr>\r
- </tfoot>\r
- </table>\r
- </div>\r
-\r
- </div>\r
- <div class="col-6 col-12-medium">\r
-\r
- <!-- Buttons -->\r
- <h3>Buttons</h3>\r
- <ul class="actions">\r
- <li><a href="#" class="button primary">Primary</a></li>\r
- <li><a href="#" class="button">Default</a></li>\r
- </ul>\r
- <ul class="actions">\r
- <li><a href="#" class="button large">Large</a></li>\r
- <li><a href="#" class="button">Default</a></li>\r
- <li><a href="#" class="button small">Small</a></li>\r
- </ul>\r
- <ul class="actions">\r
- <li><a href="#" class="button primary large">Large</a></li>\r
- <li><a href="#" class="button primary">Default</a></li>\r
- <li><a href="#" class="button primary small">Small</a></li>\r
- </ul>\r
- <ul class="actions fit">\r
- <li><a href="#" class="button primary fit">Fit</a></li>\r
- <li><a href="#" class="button fit">Fit</a></li>\r
- </ul>\r
- <ul class="actions fit small">\r
- <li><a href="#" class="button primary fit small">Fit + Small</a></li>\r
- <li><a href="#" class="button fit small">Fit + Small</a></li>\r
- </ul>\r
- <ul class="actions">\r
- <li><a href="#" class="button primary icon fa-search">Icon</a></li>\r
- <li><a href="#" class="button icon fa-download">Icon</a></li>\r
- </ul>\r
- <ul class="actions">\r
- <li><span class="button primary disabled">Primary</span></li>\r
- <li><span class="button disabled">Default</span></li>\r
- </ul>\r
-\r
- <!-- Form -->\r
- <h3>Form</h3>\r
-\r
- <form method="post" action="#">\r
- <div class="row gtr-uniform">\r
- <div class="col-6 col-12-xsmall">\r
- <input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />\r
- </div>\r
- <div class="col-6 col-12-xsmall">\r
- <input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />\r
- </div>\r
- <!-- Break -->\r
- <div class="col-12">\r
- <select name="demo-category" id="demo-category">\r
- <option value="">- Category -</option>\r
- <option value="1">Manufacturing</option>\r
- <option value="1">Shipping</option>\r
- <option value="1">Administration</option>\r
- <option value="1">Human Resources</option>\r
- </select>\r
- </div>\r
- <!-- Break -->\r
- <div class="col-4 col-12-small">\r
- <input type="radio" id="demo-priority-low" name="demo-priority" checked>\r
- <label for="demo-priority-low">Low</label>\r
- </div>\r
- <div class="col-4 col-12-small">\r
- <input type="radio" id="demo-priority-normal" name="demo-priority">\r
- <label for="demo-priority-normal">Normal</label>\r
- </div>\r
- <div class="col-4 col-12-small">\r
- <input type="radio" id="demo-priority-high" name="demo-priority">\r
- <label for="demo-priority-high">High</label>\r
- </div>\r
- <!-- Break -->\r
- <div class="col-6 col-12-small">\r
- <input type="checkbox" id="demo-copy" name="demo-copy">\r
- <label for="demo-copy">Email me a copy</label>\r
- </div>\r
- <div class="col-6 col-12-small">\r
- <input type="checkbox" id="demo-human" name="demo-human" checked>\r
- <label for="demo-human">I am a human</label>\r
- </div>\r
- <!-- Break -->\r
- <div class="col-12">\r
- <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>\r
- </div>\r
- <!-- Break -->\r
- <div class="col-12">\r
- <ul class="actions">\r
- <li><input type="submit" value="Send Message" class="primary" /></li>\r
- <li><input type="reset" value="Reset" /></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </form>\r
-\r
- <!-- Image -->\r
- <h3>Image</h3>\r
-\r
- <h4>Fit</h4>\r
- <span class="image fit"><img src="images/pic11.jpg" alt="" /></span>\r
- <div class="box alt">\r
- <div class="row gtr-50 gtr-uniform">\r
- <div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>\r
- <!-- Break -->\r
- <div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>\r
- <!-- Break -->\r
- <div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>\r
- <div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>\r
- </div>\r
- </div>\r
-\r
- <h4>Left & Right</h4>\r
- <p><span class="image left"><img src="images/pic01.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>\r
- <p><span class="image right"><img src="images/pic02.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>\r
-\r
- <!-- Box -->\r
- <h3>Box</h3>\r
- <div class="box">\r
- <p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum.</p>\r
- </div>\r
-\r
- <!-- Preformatted Code -->\r
- <h3>Preformatted</h3>\r
- <pre><code>i = 0;\r
-\r
-while (!deck.isInOrder()) {\r
- print 'Iteration ' + i;\r
- deck.shuffle();\r
- i++;\r
-}\r
-\r
-print 'It took ' + i + ' iterations to sort the deck.';\r
-</code></pre>\r
-\r
- </div>\r
- </div>\r
-\r
- </section>\r
-\r
- </div>\r
- </div>\r
-\r
- <!-- Sidebar -->\r
- <div id="sidebar">\r
- <div class="inner">\r
-\r
- <!-- Search -->\r
- <section id="search" class="alt">\r
- <form method="post" action="#">\r
- <input type="text" name="query" id="query" placeholder="Search" />\r
- </form>\r
- </section>\r
-\r
- <!-- Menu -->\r
- <nav id="menu">\r
- <header class="major">\r
- <h2>Menu</h2>\r
- </header>\r
- <ul>\r
- <li><a href="index.html">Homepage</a></li>\r
- <li><a href="generic.html">Generic</a></li>\r
- <li><a href="elements.html">Elements</a></li>\r
- <li>\r
- <span class="opener">Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Etiam Dolore</a></li>\r
- <li><a href="#">Adipiscing</a></li>\r
- <li>\r
- <span class="opener">Another Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Maximus Erat</a></li>\r
- <li><a href="#">Sapien Mauris</a></li>\r
- <li><a href="#">Amet Lacinia</a></li>\r
- </ul>\r
- </nav>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Ante interdum</h2>\r
- </header>\r
- <div class="mini-posts">\r
- <article>\r
- <a href="#" class="image"><img src="images/pic07.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic08.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic09.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- </div>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Get in touch</h2>\r
- </header>\r
- <p>Sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin sed aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="contact">\r
- <li class="fa-envelope-o"><a href="#">information@untitled.tld</a></li>\r
- <li class="fa-phone">(000) 000-0000</li>\r
- <li class="fa-home">1234 Somewhere Road #8254<br />\r
- Nashville, TN 00000-0000</li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Footer -->\r
- <footer id="footer">\r
- <p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>\r
- </footer>\r
-\r
- </div>\r
- </div>\r
-\r
- </div>\r
-\r
- <!-- Scripts -->\r
- <script src="assets/js/jquery.min.js"></script>\r
- <script src="assets/js/browser.min.js"></script>\r
- <script src="assets/js/breakpoints.min.js"></script>\r
- <script src="assets/js/util.js"></script>\r
- <script src="assets/js/main.js"></script>\r
-\r
- </body>\r
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>\r
-<!--\r
- Editorial by HTML5 UP\r
- html5up.net | @ajlkn\r
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
--->\r
-<html>\r
- <head>\r
- <title>Generic - Editorial by HTML5 UP</title>\r
- <meta charset="utf-8" />\r
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />\r
- <link rel="stylesheet" href="assets/css/main.css" />\r
- </head>\r
- <body class="is-preload">\r
-\r
- <!-- Wrapper -->\r
- <div id="wrapper">\r
-\r
- <!-- Main -->\r
- <div id="main">\r
- <div class="inner">\r
-\r
- <!-- Header -->\r
- <header id="header">\r
- <a href="index.html" class="logo"><strong>Editorial</strong> by HTML5 UP</a>\r
- <ul class="icons">\r
- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>\r
- <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>\r
- <li><a href="#" class="icon fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>\r
- <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>\r
- <li><a href="#" class="icon fa-medium"><span class="label">Medium</span></a></li>\r
- </ul>\r
- </header>\r
-\r
- <!-- Content -->\r
- <section>\r
- <header class="main">\r
- <h1>Generic</h1>\r
- </header>\r
-\r
- <span class="image main"><img src="images/pic11.jpg" alt="" /></span>\r
-\r
- <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.</p>\r
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>\r
- <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>\r
-\r
- <hr class="major" />\r
-\r
- <h2>Interdum sed dapibus</h2>\r
- <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.</p>\r
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>\r
-\r
- <hr class="major" />\r
-\r
- <h2>Magna etiam veroeros</h2>\r
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>\r
- <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>\r
-\r
- <hr class="major" />\r
-\r
- <h2>Lorem aliquam bibendum</h2>\r
- <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.</p>\r
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>\r
-\r
- </section>\r
-\r
- </div>\r
- </div>\r
-\r
- <!-- Sidebar -->\r
- <div id="sidebar">\r
- <div class="inner">\r
-\r
- <!-- Search -->\r
- <section id="search" class="alt">\r
- <form method="post" action="#">\r
- <input type="text" name="query" id="query" placeholder="Search" />\r
- </form>\r
- </section>\r
-\r
- <!-- Menu -->\r
- <nav id="menu">\r
- <header class="major">\r
- <h2>Menu</h2>\r
- </header>\r
- <ul>\r
- <li><a href="index.html">Homepage</a></li>\r
- <li><a href="generic.html">Generic</a></li>\r
- <li><a href="elements.html">Elements</a></li>\r
- <li>\r
- <span class="opener">Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Etiam Dolore</a></li>\r
- <li><a href="#">Adipiscing</a></li>\r
- <li>\r
- <span class="opener">Another Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Maximus Erat</a></li>\r
- <li><a href="#">Sapien Mauris</a></li>\r
- <li><a href="#">Amet Lacinia</a></li>\r
- </ul>\r
- </nav>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Ante interdum</h2>\r
- </header>\r
- <div class="mini-posts">\r
- <article>\r
- <a href="#" class="image"><img src="images/pic07.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic08.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic09.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- </div>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Get in touch</h2>\r
- </header>\r
- <p>Sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin sed aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="contact">\r
- <li class="fa-envelope-o"><a href="#">information@untitled.tld</a></li>\r
- <li class="fa-phone">(000) 000-0000</li>\r
- <li class="fa-home">1234 Somewhere Road #8254<br />\r
- Nashville, TN 00000-0000</li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Footer -->\r
- <footer id="footer">\r
- <p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>\r
- </footer>\r
-\r
- </div>\r
- </div>\r
-\r
- </div>\r
-\r
- <!-- Scripts -->\r
- <script src="assets/js/jquery.min.js"></script>\r
- <script src="assets/js/browser.min.js"></script>\r
- <script src="assets/js/breakpoints.min.js"></script>\r
- <script src="assets/js/util.js"></script>\r
- <script src="assets/js/main.js"></script>\r
-\r
- </body>\r
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML>\r
-<!--\r
- Editorial by HTML5 UP\r
- html5up.net | @ajlkn\r
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
--->\r
-<html>\r
- <head>\r
- <title>Editorial by HTML5 UP</title>\r
- <meta charset="utf-8" />\r
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />\r
- <link rel="stylesheet" href="assets/css/main.css" />\r
- </head>\r
- <body class="is-preload">\r
-\r
- <!-- Wrapper -->\r
- <div id="wrapper">\r
-\r
- <!-- Main -->\r
- <div id="main">\r
- <div class="inner">\r
-\r
- <!-- Header -->\r
- <header id="header">\r
- <a href="index.html" class="logo"><strong>Editorial</strong> by HTML5 UP</a>\r
- <ul class="icons">\r
- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>\r
- <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>\r
- <li><a href="#" class="icon fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>\r
- <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>\r
- <li><a href="#" class="icon fa-medium"><span class="label">Medium</span></a></li>\r
- </ul>\r
- </header>\r
-\r
- <!-- Banner -->\r
- <section id="banner">\r
- <div class="content">\r
- <header>\r
- <h1>Hi, I’m Editorial<br />\r
- by HTML5 UP</h1>\r
- <p>A free and fully responsive site template</p>\r
- </header>\r
- <p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button big">Learn More</a></li>\r
- </ul>\r
- </div>\r
- <span class="image object">\r
- <img src="images/pic10.jpg" alt="" />\r
- </span>\r
- </section>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Erat lacinia</h2>\r
- </header>\r
- <div class="features">\r
- <article>\r
- <span class="icon fa-diamond"></span>\r
- <div class="content">\r
- <h3>Portitor ullamcorper</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- </div>\r
- </article>\r
- <article>\r
- <span class="icon fa-paper-plane"></span>\r
- <div class="content">\r
- <h3>Sapien veroeros</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- </div>\r
- </article>\r
- <article>\r
- <span class="icon fa-rocket"></span>\r
- <div class="content">\r
- <h3>Quam lorem ipsum</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- </div>\r
- </article>\r
- <article>\r
- <span class="icon fa-signal"></span>\r
- <div class="content">\r
- <h3>Sed magna finibus</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- </div>\r
- </article>\r
- </div>\r
- </section>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Ipsum sed dolor</h2>\r
- </header>\r
- <div class="posts">\r
- <article>\r
- <a href="#" class="image"><img src="images/pic01.jpg" alt="" /></a>\r
- <h3>Interdum aenean</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>\r
- <h3>Nulla amet dolore</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>\r
- <h3>Tempus ullamcorper</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>\r
- <h3>Sed etiam facilis</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>\r
- <h3>Feugiat lorem aenean</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic06.jpg" alt="" /></a>\r
- <h3>Amet varius aliquam</h3>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </article>\r
- </div>\r
- </section>\r
-\r
- </div>\r
- </div>\r
-\r
- <!-- Sidebar -->\r
- <div id="sidebar">\r
- <div class="inner">\r
-\r
- <!-- Search -->\r
- <section id="search" class="alt">\r
- <form method="post" action="#">\r
- <input type="text" name="query" id="query" placeholder="Search" />\r
- </form>\r
- </section>\r
-\r
- <!-- Menu -->\r
- <nav id="menu">\r
- <header class="major">\r
- <h2>Menu</h2>\r
- </header>\r
- <ul>\r
- <li><a href="index.html">Homepage</a></li>\r
- <li><a href="generic.html">Generic</a></li>\r
- <li><a href="elements.html">Elements</a></li>\r
- <li>\r
- <span class="opener">Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Etiam Dolore</a></li>\r
- <li><a href="#">Adipiscing</a></li>\r
- <li>\r
- <span class="opener">Another Submenu</span>\r
- <ul>\r
- <li><a href="#">Lorem Dolor</a></li>\r
- <li><a href="#">Ipsum Adipiscing</a></li>\r
- <li><a href="#">Tempus Magna</a></li>\r
- <li><a href="#">Feugiat Veroeros</a></li>\r
- </ul>\r
- </li>\r
- <li><a href="#">Maximus Erat</a></li>\r
- <li><a href="#">Sapien Mauris</a></li>\r
- <li><a href="#">Amet Lacinia</a></li>\r
- </ul>\r
- </nav>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Ante interdum</h2>\r
- </header>\r
- <div class="mini-posts">\r
- <article>\r
- <a href="#" class="image"><img src="images/pic07.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic08.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- <article>\r
- <a href="#" class="image"><img src="images/pic09.jpg" alt="" /></a>\r
- <p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore aliquam.</p>\r
- </article>\r
- </div>\r
- <ul class="actions">\r
- <li><a href="#" class="button">More</a></li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Section -->\r
- <section>\r
- <header class="major">\r
- <h2>Get in touch</h2>\r
- </header>\r
- <p>Sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin sed aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>\r
- <ul class="contact">\r
- <li class="fa-envelope-o"><a href="#">information@untitled.tld</a></li>\r
- <li class="fa-phone">(000) 000-0000</li>\r
- <li class="fa-home">1234 Somewhere Road #8254<br />\r
- Nashville, TN 00000-0000</li>\r
- </ul>\r
- </section>\r
-\r
- <!-- Footer -->\r
- <footer id="footer">\r
- <p class="copyright">© Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>\r
- </footer>\r
-\r
- </div>\r
- </div>\r
-\r
- </div>\r
-\r
- <!-- Scripts -->\r
- <script src="assets/js/jquery.min.js"></script>\r
- <script src="assets/js/browser.min.js"></script>\r
- <script src="assets/js/breakpoints.min.js"></script>\r
- <script src="assets/js/util.js"></script>\r
- <script src="assets/js/main.js"></script>\r
-\r
- </body>\r
-</html>
\ No newline at end of file
# Editorial
-This is Editorial, a news-oriented design built around a huge background
-image and scroll effects powered by Scrollex. Originally created by [@ajlkn](https://twitter.com/ajlkn) for [HTML5 UP](https://html5up.net) and later ported to [Ghost](https://ghost.org)
+This is Editorial, a news-oriented design built around a dynamic 'locking' sidebar (try the toggle to see it in action!) and purpose built for content-centric sites. Originally created by [@ajlkn](https://twitter.com/ajlkn) for [HTML5 UP](https://html5up.net) and later ported to [Ghost](https://ghost.org)
**Demo: https://editorial.ghost.io**
-@import url(font-awesome.min.css);
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
+@import url(font-awesome.min.css);@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}mark{background-color:transparent;color:inherit}input::-moz-focus-inner{border:0;padding:0}input,select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none}@-ms-viewport{width:device-width}body{-ms-overflow-style:scrollbar}@media screen and (max-width: 480px){html,body{min-width:320px}}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{background:#fff}body.is-preload *,body.is-preload *:before,body.is-preload *:after,body.is-resizing *,body.is-resizing *:before,body.is-resizing *:after{-moz-animation:none !important;-webkit-animation:none !important;-ms-animation:none !important;animation:none !important;-moz-transition:none !important;-webkit-transition:none !important;-ms-transition:none !important;transition:none !important}body,input,select,textarea{color:#7f888f;font-family:"Open Sans",sans-serif;font-size:13pt;font-weight:400;line-height:1.65}@media screen and (max-width: 1680px){body,input,select,textarea{font-size:11pt}}@media screen and (max-width: 1280px){body,input,select,textarea{font-size:10pt}}@media screen and (max-width: 360px){body,input,select,textarea{font-size:9pt}}a{-moz-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;-webkit-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;-ms-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;border-bottom:dotted 1px;color:#f56a6a;text-decoration:none}a:hover{border-bottom-color:#f56a6a;color:#f56a6a !important}a:hover strong{color:inherit}strong,b{color:#3d4449;font-weight:600}em,i{font-style:italic}p{margin:0 0 2em 0}h1,h2,h3,h4,h5,h6{color:#3d4449;font-family:"Roboto Slab",serif;font-weight:700;line-height:1.5;margin:0 0 1em 0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none;border-bottom:0}h1{font-size:4em;margin:0 0 .5em 0;line-height:1.3}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:0.9em}h6{font-size:0.7em}@media screen and (max-width: 1680px){h1{font-size:3.5em}}@media screen and (max-width: 980px){h1{font-size:3.25em}}@media screen and (max-width: 736px){h1{font-size:2em;line-height:1.4}h2{font-size:1.5em}}sub{font-size:0.8em;position:relative;top:0.5em}sup{font-size:0.8em;position:relative;top:-0.5em}blockquote{border-left:solid 3px rgba(210,215,217,0.75);font-style:italic;margin:0 0 2em 0;padding:.5em 0 .5em 2em}code{background:rgba(230,235,237,0.25);border-radius:.375em;border:solid 1px rgba(210,215,217,0.75);font-family:"Courier New",monospace;font-size:0.9em;margin:0 0.25em;padding:0.25em 0.65em}pre{-webkit-overflow-scrolling:touch;font-family:"Courier New",monospace;font-size:0.9em;margin:0 0 2em 0}pre code{display:block;line-height:1.75;padding:1em 1.5em;overflow-x:auto}hr{border:0;border-bottom:solid 1px rgba(210,215,217,0.75);margin:2em 0}hr.major{margin:3em 0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp{order:-1}.row>.col-1{width:8.33333%}.row>.off-1{margin-left:8.33333%}.row>.col-2{width:16.66667%}.row>.off-2{margin-left:16.66667%}.row>.col-3{width:25%}.row>.off-3{margin-left:25%}.row>.col-4{width:33.33333%}.row>.off-4{margin-left:33.33333%}.row>.col-5{width:41.66667%}.row>.off-5{margin-left:41.66667%}.row>.col-6{width:50%}.row>.off-6{margin-left:50%}.row>.col-7{width:58.33333%}.row>.off-7{margin-left:58.33333%}.row>.col-8{width:66.66667%}.row>.off-8{margin-left:66.66667%}.row>.col-9{width:75%}.row>.off-9{margin-left:75%}.row>.col-10{width:83.33333%}.row>.off-10{margin-left:83.33333%}.row>.col-11{width:91.66667%}.row>.off-11{margin-left:91.66667%}.row>.col-12{width:100%}.row>.off-12{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}@media screen and (max-width: 1680px){.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp-xlarge{order:-1}.row>.col-1-xlarge{width:8.33333%}.row>.off-1-xlarge{margin-left:8.33333%}.row>.col-2-xlarge{width:16.66667%}.row>.off-2-xlarge{margin-left:16.66667%}.row>.col-3-xlarge{width:25%}.row>.off-3-xlarge{margin-left:25%}.row>.col-4-xlarge{width:33.33333%}.row>.off-4-xlarge{margin-left:33.33333%}.row>.col-5-xlarge{width:41.66667%}.row>.off-5-xlarge{margin-left:41.66667%}.row>.col-6-xlarge{width:50%}.row>.off-6-xlarge{margin-left:50%}.row>.col-7-xlarge{width:58.33333%}.row>.off-7-xlarge{margin-left:58.33333%}.row>.col-8-xlarge{width:66.66667%}.row>.off-8-xlarge{margin-left:66.66667%}.row>.col-9-xlarge{width:75%}.row>.off-9-xlarge{margin-left:75%}.row>.col-10-xlarge{width:83.33333%}.row>.off-10-xlarge{margin-left:83.33333%}.row>.col-11-xlarge{width:91.66667%}.row>.off-11-xlarge{margin-left:91.66667%}.row>.col-12-xlarge{width:100%}.row>.off-12-xlarge{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}}@media screen and (max-width: 1280px){.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp-large{order:-1}.row>.col-1-large{width:8.33333%}.row>.off-1-large{margin-left:8.33333%}.row>.col-2-large{width:16.66667%}.row>.off-2-large{margin-left:16.66667%}.row>.col-3-large{width:25%}.row>.off-3-large{margin-left:25%}.row>.col-4-large{width:33.33333%}.row>.off-4-large{margin-left:33.33333%}.row>.col-5-large{width:41.66667%}.row>.off-5-large{margin-left:41.66667%}.row>.col-6-large{width:50%}.row>.off-6-large{margin-left:50%}.row>.col-7-large{width:58.33333%}.row>.off-7-large{margin-left:58.33333%}.row>.col-8-large{width:66.66667%}.row>.off-8-large{margin-left:66.66667%}.row>.col-9-large{width:75%}.row>.off-9-large{margin-left:75%}.row>.col-10-large{width:83.33333%}.row>.off-10-large{margin-left:83.33333%}.row>.col-11-large{width:91.66667%}.row>.off-11-large{margin-left:91.66667%}.row>.col-12-large{width:100%}.row>.off-12-large{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}}@media screen and (max-width: 980px){.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp-medium{order:-1}.row>.col-1-medium{width:8.33333%}.row>.off-1-medium{margin-left:8.33333%}.row>.col-2-medium{width:16.66667%}.row>.off-2-medium{margin-left:16.66667%}.row>.col-3-medium{width:25%}.row>.off-3-medium{margin-left:25%}.row>.col-4-medium{width:33.33333%}.row>.off-4-medium{margin-left:33.33333%}.row>.col-5-medium{width:41.66667%}.row>.off-5-medium{margin-left:41.66667%}.row>.col-6-medium{width:50%}.row>.off-6-medium{margin-left:50%}.row>.col-7-medium{width:58.33333%}.row>.off-7-medium{margin-left:58.33333%}.row>.col-8-medium{width:66.66667%}.row>.off-8-medium{margin-left:66.66667%}.row>.col-9-medium{width:75%}.row>.off-9-medium{margin-left:75%}.row>.col-10-medium{width:83.33333%}.row>.off-10-medium{margin-left:83.33333%}.row>.col-11-medium{width:91.66667%}.row>.off-11-medium{margin-left:91.66667%}.row>.col-12-medium{width:100%}.row>.off-12-medium{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}}@media screen and (max-width: 736px){.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp-small{order:-1}.row>.col-1-small{width:8.33333%}.row>.off-1-small{margin-left:8.33333%}.row>.col-2-small{width:16.66667%}.row>.off-2-small{margin-left:16.66667%}.row>.col-3-small{width:25%}.row>.off-3-small{margin-left:25%}.row>.col-4-small{width:33.33333%}.row>.off-4-small{margin-left:33.33333%}.row>.col-5-small{width:41.66667%}.row>.off-5-small{margin-left:41.66667%}.row>.col-6-small{width:50%}.row>.off-6-small{margin-left:50%}.row>.col-7-small{width:58.33333%}.row>.off-7-small{margin-left:58.33333%}.row>.col-8-small{width:66.66667%}.row>.off-8-small{margin-left:66.66667%}.row>.col-9-small{width:75%}.row>.off-9-small{margin-left:75%}.row>.col-10-small{width:83.33333%}.row>.off-10-small{margin-left:83.33333%}.row>.col-11-small{width:91.66667%}.row>.off-11-small{margin-left:91.66667%}.row>.col-12-small{width:100%}.row>.off-12-small{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}}@media screen and (max-width: 480px){.row{display:flex;flex-wrap:wrap;box-sizing:border-box;align-items:stretch}.row>*{box-sizing:border-box}.row.gtr-uniform>*>:last-child{margin-bottom:0}.row.aln-left{justify-content:flex-start}.row.aln-center{justify-content:center}.row.aln-right{justify-content:flex-end}.row.aln-top{align-items:flex-start}.row.aln-middle{align-items:center}.row.aln-bottom{align-items:flex-end}.row>.imp-xsmall{order:-1}.row>.col-1-xsmall{width:8.33333%}.row>.off-1-xsmall{margin-left:8.33333%}.row>.col-2-xsmall{width:16.66667%}.row>.off-2-xsmall{margin-left:16.66667%}.row>.col-3-xsmall{width:25%}.row>.off-3-xsmall{margin-left:25%}.row>.col-4-xsmall{width:33.33333%}.row>.off-4-xsmall{margin-left:33.33333%}.row>.col-5-xsmall{width:41.66667%}.row>.off-5-xsmall{margin-left:41.66667%}.row>.col-6-xsmall{width:50%}.row>.off-6-xsmall{margin-left:50%}.row>.col-7-xsmall{width:58.33333%}.row>.off-7-xsmall{margin-left:58.33333%}.row>.col-8-xsmall{width:66.66667%}.row>.off-8-xsmall{margin-left:66.66667%}.row>.col-9-xsmall{width:75%}.row>.off-9-xsmall{margin-left:75%}.row>.col-10-xsmall{width:83.33333%}.row>.off-10-xsmall{margin-left:83.33333%}.row>.col-11-xsmall{width:91.66667%}.row>.off-11-xsmall{margin-left:91.66667%}.row>.col-12-xsmall{width:100%}.row>.off-12-xsmall{margin-left:100%}.row.gtr-0{margin-top:0;margin-left:0em}.row.gtr-0>*{padding:0 0 0 0em}.row.gtr-0.gtr-uniform{margin-top:0em}.row.gtr-0.gtr-uniform>*{padding-top:0em}.row.gtr-25{margin-top:0;margin-left:-.375em}.row.gtr-25>*{padding:0 0 0 .375em}.row.gtr-25.gtr-uniform{margin-top:-.375em}.row.gtr-25.gtr-uniform>*{padding-top:.375em}.row.gtr-50{margin-top:0;margin-left:-.75em}.row.gtr-50>*{padding:0 0 0 .75em}.row.gtr-50.gtr-uniform{margin-top:-.75em}.row.gtr-50.gtr-uniform>*{padding-top:.75em}.row{margin-top:0;margin-left:-1.5em}.row>*{padding:0 0 0 1.5em}.row.gtr-uniform{margin-top:-1.5em}.row.gtr-uniform>*{padding-top:1.5em}.row.gtr-150{margin-top:0;margin-left:-2.25em}.row.gtr-150>*{padding:0 0 0 2.25em}.row.gtr-150.gtr-uniform{margin-top:-2.25em}.row.gtr-150.gtr-uniform>*{padding-top:2.25em}.row.gtr-200{margin-top:0;margin-left:-3em}.row.gtr-200>*{padding:0 0 0 3em}.row.gtr-200.gtr-uniform{margin-top:-3em}.row.gtr-200.gtr-uniform>*{padding-top:3em}}section.special,article.special{text-align:center}header p{font-family:"Roboto Slab",serif;font-size:1em;font-weight:400;letter-spacing:.075em;margin-top:-0.5em;text-transform:uppercase}header.major>:last-child{border-bottom:solid 3px #f56a6a;display:inline-block;margin:0 0 2em 0;padding:0 0.75em 0.5em 0}header.main>:last-child{margin:0 0 1em 0}form{margin:0 0 2em 0}label{color:#3d4449;display:block;font-size:0.9em;font-weight:600;margin:0 0 1em 0}input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;background:#fff;border-radius:.375em;border:none;border:solid 1px rgba(210,215,217,0.75);color:inherit;display:block;outline:0;padding:0 1em;text-decoration:none;width:100%}input[type="text"]:invalid,input[type="password"]:invalid,input[type="email"]:invalid,input[type="tel"]:invalid,input[type="search"]:invalid,input[type="url"]:invalid,select:invalid,textarea:invalid{box-shadow:none}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="search"]:focus,input[type="url"]:focus,select:focus,textarea:focus{border-color:#f56a6a;box-shadow:0 0 0 1px #f56a6a}select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210,215,217,0.75)' /%3E%3C/svg%3E");background-size:1.25em;background-repeat:no-repeat;background-position:calc(100% - 1em) center;height:2.75em;padding-right:2.75em;text-overflow:ellipsis}select option{color:#3d4449;background:#fff}select:focus::-ms-value{background-color:transparent}select::-ms-expand{display:none}input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],select{height:2.75em}textarea{padding:0.75em 1em}input[type="checkbox"],input[type="radio"]{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;display:block;float:left;margin-right:-2em;opacity:0;width:1em;z-index:-1}input[type="checkbox"]+label,input[type="radio"]+label{text-decoration:none;color:#7f888f;cursor:pointer;display:inline-block;font-size:1em;font-weight:400;padding-left:2.4em;padding-right:0.75em;position:relative}input[type="checkbox"]+label:before,input[type="radio"]+label:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}input[type="checkbox"]+label:before,input[type="radio"]+label:before{background:#fff;border-radius:.375em;border:solid 1px rgba(210,215,217,0.75);content:'';display:inline-block;height:1.65em;left:0;line-height:1.58125em;position:absolute;text-align:center;top:0;width:1.65em}input[type="checkbox"]:checked+label:before,input[type="radio"]:checked+label:before{background:#3d4449;border-color:#3d4449;color:#fff;content:'\f00c'}input[type="checkbox"]:focus+label:before,input[type="radio"]:focus+label:before{border-color:#f56a6a;box-shadow:0 0 0 1px #f56a6a}input[type="checkbox"]+label:before{border-radius:.375em}input[type="radio"]+label:before{border-radius:100%}::-webkit-input-placeholder{color:#9fa3a6 !important;opacity:1.0}:-moz-placeholder{color:#9fa3a6 !important;opacity:1.0}::-moz-placeholder{color:#9fa3a6 !important;opacity:1.0}:-ms-input-placeholder{color:#9fa3a6 !important;opacity:1.0}.box{border-radius:.375em;border:solid 1px rgba(210,215,217,0.75);margin-bottom:2em;padding:1.5em}.box>:last-child,.box>:last-child>:last-child,.box>:last-child>:last-child>:last-child{margin-bottom:0}.box.alt{border:0;border-radius:0;padding:0}.icon{text-decoration:none;border-bottom:none;position:relative}.icon:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}.icon>.label{display:none}.image{border-radius:.375em;border:0;display:inline-block;position:relative}.image img{border-radius:.375em;display:block}.image.left,.image.right{max-width:40%}.image.left img,.image.right img{width:100%}.image.left{float:left;padding:0 1.5em 1em 0;top:0.25em}.image.right{float:right;padding:0 0 1em 1.5em;top:0.25em}.image.fit{display:block;margin:0 0 2em 0;width:100%}.image.fit img{width:100%}.image.main{display:block;margin:0 0 3em 0;width:100%}.image.main img{width:100%}a.image{overflow:hidden}a.image img{-moz-transition:-moz-transform .2s ease;-webkit-transition:-webkit-transform .2s ease;-ms-transition:-ms-transform .2s ease;transition:transform .2s ease}a.image:hover img{-moz-transform:scale(1.075);-webkit-transform:scale(1.075);-ms-transform:scale(1.075);transform:scale(1.075)}ol{list-style:decimal;margin:0 0 2em 0;padding-left:1.25em}ol li{padding-left:0.25em}ul{list-style:disc;margin:0 0 2em 0;padding-left:1em}ul li{padding-left:0.5em}ul.alt{list-style:none;padding-left:0}ul.alt li{border-top:solid 1px rgba(210,215,217,0.75);padding:0.5em 0}ul.alt li:first-child{border-top:0;padding-top:0}dl{margin:0 0 2em 0}dl dt{display:block;font-weight:600;margin:0 0 1em 0}dl dd{margin-left:2em}ul.actions{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;cursor:default;list-style:none;margin-left:-1em;padding-left:0}ul.actions li{padding:0 0 0 1em;vertical-align:middle}ul.actions.special{-moz-justify-content:center;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;width:100%;margin-left:0}ul.actions.special li:first-child{padding-left:0}ul.actions.stacked{-moz-flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:0}ul.actions.stacked li{padding:1.3em 0 0 0}ul.actions.stacked li:first-child{padding-top:0}ul.actions.fit{width:calc(100% + 1em)}ul.actions.fit li{-moz-flex-grow:1;-webkit-flex-grow:1;-ms-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;-ms-flex-shrink:1;flex-shrink:1;width:100%}ul.actions.fit li>*{width:100%}ul.actions.fit.stacked{width:100%}ul.icons{cursor:default;list-style:none;padding-left:0}ul.icons li{display:inline-block;padding:0 1em 0 0}ul.icons li:last-child{padding-right:0}ul.icons li .icon{color:inherit}ul.icons li .icon:before{font-size:1.25em}ul.contact{list-style:none;padding:0}ul.contact li{text-decoration:none;border-top:solid 1px rgba(210,215,217,0.75);margin:1.5em 0 0 0;padding:1.5em 0 0 3em;position:relative}ul.contact li:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}ul.contact li:before{color:#f56a6a;display:inline-block;font-size:1.5em;height:1.125em;left:0;line-height:1.125em;position:absolute;text-align:center;top:1em;width:1.5em}ul.contact li:first-child{border-top:0;margin-top:0;padding-top:0}ul.contact li:first-child:before{top:0}ul.contact li a{color:inherit}ul.pagination{cursor:default;list-style:none;padding-left:0}ul.pagination li{display:inline-block;padding-left:0;vertical-align:middle}ul.pagination li>.page{-moz-transition:background-color .2s ease-in-out,color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out;border-bottom:0;border-radius:.375em;display:inline-block;font-size:0.8em;font-weight:600;height:2em;line-height:2em;margin:0 0.125em;min-width:2em;padding:0 0.5em;text-align:center}ul.pagination li>.page.active{background-color:#f56a6a;color:#fff !important}ul.pagination li>.page.active:hover{background-color:#f67878}ul.pagination li>.page.active:active{background-color:#f45c5c}ul.pagination li:first-child{padding-right:0.75em}ul.pagination li:last-child{padding-left:0.75em}@media screen and (max-width: 480px){ul.pagination li:nth-child(n+2):nth-last-child(n+2){display:none}ul.pagination li:first-child{padding-right:0}}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}table{margin:0 0 2em 0;width:100%}table tbody tr{border:solid 1px rgba(210,215,217,0.75);border-left:0;border-right:0}table tbody tr:nth-child(2n+1){background-color:rgba(230,235,237,0.25)}table td{padding:0.75em 0.75em}table th{color:#3d4449;font-size:0.9em;font-weight:600;padding:0 0.75em 0.75em 0.75em;text-align:left}table thead{border-bottom:solid 2px rgba(210,215,217,0.75)}table tfoot{border-top:solid 2px rgba(210,215,217,0.75)}table.alt{border-collapse:separate}table.alt tbody tr td{border:solid 1px rgba(210,215,217,0.75);border-left-width:0;border-top-width:0}table.alt tbody tr td:first-child{border-left-width:1px}table.alt tbody tr:first-child td{border-top-width:1px}table.alt thead{border-bottom:0}table.alt tfoot{border-top:0}input[type="submit"],input[type="reset"],input[type="button"],button,.button{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:background-color .2s ease-in-out,color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out;background-color:transparent;border-radius:.375em;border:0;box-shadow:inset 0 0 0 2px #f56a6a;color:#f56a6a !important;cursor:pointer;display:inline-block;font-family:"Roboto Slab",serif;font-size:0.8em;font-weight:700;height:3.5em;letter-spacing:.075em;line-height:3.5em;padding:0 2.25em;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,button:hover,.button:hover{background-color:rgba(245,106,106,0.05)}input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active,button:active,.button:active{background-color:rgba(245,106,106,0.15)}input[type="submit"].icon:before,input[type="reset"].icon:before,input[type="button"].icon:before,button.icon:before,.button.icon:before{margin-right:0.5em}input[type="submit"].fit,input[type="reset"].fit,input[type="button"].fit,button.fit,.button.fit{width:100%}input[type="submit"].small,input[type="reset"].small,input[type="button"].small,button.small,.button.small{font-size:0.6em}input[type="submit"].large,input[type="reset"].large,input[type="button"].large,button.large,.button.large{font-size:1em;height:3.65em;line-height:3.65em}input[type="submit"].primary,input[type="reset"].primary,input[type="button"].primary,button.primary,.button.primary{background-color:#f56a6a;box-shadow:none;color:#fff !important}input[type="submit"].primary:hover,input[type="reset"].primary:hover,input[type="button"].primary:hover,button.primary:hover,.button.primary:hover{background-color:#f67878}input[type="submit"].primary:active,input[type="reset"].primary:active,input[type="button"].primary:active,button.primary:active,.button.primary:active{background-color:#f45c5c}input[type="submit"].disabled,input[type="submit"]:disabled,input[type="reset"].disabled,input[type="reset"]:disabled,input[type="button"].disabled,input[type="button"]:disabled,button.disabled,button:disabled,.button.disabled,.button:disabled{pointer-events:none;opacity:0.25}.mini-posts article{border-top:solid 1px rgba(210,215,217,0.75);margin-top:2em;padding-top:2em}.mini-posts article .image{display:block;margin:0 0 1.5em 0}.mini-posts article .image img{display:block;width:100%}.mini-posts article:first-child{border-top:0;margin-top:0;padding-top:0}.features{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 2em -3em;width:calc(100% + 3em)}.features article{-moz-align-items:center;-webkit-align-items:center;-ms-align-items:center;align-items:center;display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;margin:0 0 3em 3em;position:relative;width:calc(50% - 3em)}.features article:nth-child(2n-1){margin-right:1.5em}.features article:nth-child(2n){margin-left:1.5em}.features article:nth-last-child(1),.features article:nth-last-child(2){margin-bottom:0}.features article .icon{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;display:block;height:10em;line-height:10em;margin:0 2em 0 0;text-align:center;width:10em}.features article .icon:before{color:#f56a6a;font-size:2.75rem;position:relative;top:0.05em}.features article .icon:after{-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:0.25rem;border:solid 2px rgba(210,215,217,0.75);content:'';display:block;height:7em;left:50%;margin:-3.5em 0 0 -3.5em;position:absolute;top:50%;width:7em}.features article .content{-moz-flex-grow:1;-webkit-flex-grow:1;-ms-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;-ms-flex-shrink:1;flex-shrink:1;width:100%}.features article .content>:last-child{margin-bottom:0}@media screen and (max-width: 980px){.features{margin:0 0 2em 0;width:100%}.features article{margin:0 0 3em 0;width:100%}.features article:nth-child(2n-1){margin-right:0}.features article:nth-child(2n){margin-left:0}.features article:nth-last-child(1),.features article:nth-last-child(2){margin-bottom:3em}.features article:last-child{margin-bottom:0}.features article .icon{height:8em;line-height:8em;width:8em}.features article .icon:before{font-size:2.25rem}.features article .icon:after{height:6em;margin:-3em 0 0 -3em;width:6em}}@media screen and (max-width: 480px){.features article{-moz-flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-moz-align-items:-moz-flex-start;-webkit-align-items:-webkit-flex-start;-ms-align-items:-ms-flex-start;align-items:flex-start}.features article .icon{height:6em;line-height:6em;margin:0 0 1.5em 0;width:6em}.features article .icon:before{font-size:1.5rem}.features article .icon:after{height:4em;margin:-2em 0 0 -2em;width:4em}}@media screen and (max-width: 480px){.features article .icon:before{font-size:1.25rem}}.posts{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 2em -6em;width:calc(100% + 6em)}.posts article{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:1;-webkit-flex-shrink:1;-ms-flex-shrink:1;flex-shrink:1;margin:0 0 6em 6em;position:relative;width:calc(33.33333% - 6em)}.posts article:before{background:rgba(210,215,217,0.75);content:'';display:block;height:calc(100% + 6em);left:-3em;position:absolute;top:0;width:1px}.posts article:after{background:rgba(210,215,217,0.75);bottom:-3em;content:'';display:block;height:1px;position:absolute;right:0;width:calc(100% + 6em)}.posts article>:last-child{margin-bottom:0}.posts article .image{display:block;margin:0 0 2em 0}.posts article .image img{display:block;width:100%}@media screen and (min-width: 1681px){.posts article:nth-child(3n+1):before{display:none}.posts article:nth-child(3n+1):after{width:100%}.posts article:nth-last-child(1),.posts article:nth-last-child(2),.posts article:nth-last-child(3){margin-bottom:0}.posts article:nth-last-child(1):before,.posts article:nth-last-child(2):before,.posts article:nth-last-child(3):before{height:100%}.posts article:nth-last-child(1):after,.posts article:nth-last-child(2):after,.posts article:nth-last-child(3):after{display:none}}@media screen and (max-width: 1680px){.posts article{width:calc(50% - 6em)}.posts article:nth-last-child(3){margin-bottom:6em}}@media screen and (min-width: 481px) and (max-width: 1680px){.posts article:nth-child(2n+1):before{display:none}.posts article:nth-child(2n+1):after{width:100%}.posts article:nth-last-child(1),.posts article:nth-last-child(2){margin-bottom:0}.posts article:nth-last-child(1):before,.posts article:nth-last-child(2):before{height:100%}.posts article:nth-last-child(1):after,.posts article:nth-last-child(2):after{display:none}}@media screen and (max-width: 736px){.posts{margin:0 0 2em -4.5em;width:calc(100% + 4.5em)}.posts article{margin:0 0 4.5em 4.5em;width:calc(50% - 4.5em)}.posts article:before{height:calc(100% + 4.5em);left:-2.25em}.posts article:after{bottom:-2.25em;width:calc(100% + 4.5em)}.posts article:nth-last-child(3){margin-bottom:4.5em}}@media screen and (max-width: 480px){.posts{margin:0 0 2em 0;width:100%}.posts article{margin:0 0 4.5em 0;width:100%}.posts article:before{display:none}.posts article:after{width:100%}.posts article:last-child{margin-bottom:0}.posts article:last-child:after{display:none}}#wrapper{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;-moz-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;min-height:100vh}#main{-moz-flex-grow:1;-webkit-flex-grow:1;-ms-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;-ms-flex-shrink:1;flex-shrink:1;width:100%}#main>.inner{padding:0 6em .1em 6em ;margin:0 auto;max-width:110em}#main>.inner>section{padding:6em 0 4em 0 ;border-top:solid 2px rgba(210,215,217,0.75)}#main>.inner>section:first-of-type{border-top:0 !important}@media screen and (max-width: 1680px){#main>.inner{padding:0 5em .1em 5em }#main>.inner>section{padding:5em 0 3em 0 }}@media screen and (max-width: 1280px){#main>.inner{padding:0 4em .1em 4em }#main>.inner>section{padding:4em 0 2em 0 }}@media screen and (max-width: 736px){#main>.inner{padding:0 2em .1em 2em }#main>.inner>section{padding:3em 0 1em 0 }}#search form{text-decoration:none;position:relative}#search form:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}#search form:before{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);color:#7f888f;content:'\f002';cursor:default;display:block;font-size:1.5em;height:2em;line-height:2em;opacity:0.325;position:absolute;right:0;text-align:center;top:0;width:2em}#search form input[type="text"]{padding-right:2.75em}#sidebar{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;-moz-transition:margin-left 0.5s ease,box-shadow 0.5s ease;-webkit-transition:margin-left 0.5s ease,box-shadow 0.5s ease;-ms-transition:margin-left 0.5s ease,box-shadow 0.5s ease;transition:margin-left 0.5s ease,box-shadow 0.5s ease;background-color:#f5f6f7;font-size:0.9em;position:relative;width:26em}#sidebar h2{font-size:1.38889em}#sidebar>.inner{padding:2.22222em 2.22222em 2.44444em 2.22222em ;position:relative;width:26em}#sidebar>.inner>*{border-bottom:solid 2px rgba(210,215,217,0.75);margin:0 0 3.5em 0;padding:0 0 3.5em 0}#sidebar>.inner>*>:last-child{margin-bottom:0}#sidebar>.inner>*:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}#sidebar>.inner>.alt{background-color:#eff1f2;border-bottom:0;margin:-2.22222em 0 4.44444em -2.22222em;padding:2.22222em;width:calc(100% + 4.44444em)}#sidebar .toggle{text-decoration:none;-moz-transition:left 0.5s ease;-webkit-transition:left 0.5s ease;-ms-transition:left 0.5s ease;transition:left 0.5s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);border:0;display:block;height:7.5em;left:26em;line-height:7.5em;outline:0;overflow:hidden;position:absolute;text-align:center;text-indent:7.5em;top:0;width:6em;z-index:10000}#sidebar .toggle:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}#sidebar .toggle:before{content:'\f0c9';font-size:2rem;height:inherit;left:0;line-height:inherit;position:absolute;text-indent:0;top:0;width:inherit}#sidebar.inactive{margin-left:-26em}@media screen and (max-width: 1680px){#sidebar{width:24em}#sidebar>.inner{padding:1.66667em 1.66667em 1.33333em 1.66667em ;width:24em}#sidebar>.inner>.alt{margin:-1.66667em 0 3.33333em -1.66667em;padding:1.66667em;width:calc(100% + 3.33333em)}#sidebar .toggle{height:6.25em;left:24em;line-height:6.25em;text-indent:5em;width:5em}#sidebar .toggle:before{font-size:1.5rem}#sidebar.inactive{margin-left:-24em}}@media screen and (max-width: 1280px){#sidebar{box-shadow:0 0 5em 0 rgba(0,0,0,0.175);height:100%;left:0;position:fixed;top:0;z-index:10000}#sidebar.inactive{box-shadow:none}#sidebar>.inner{-webkit-overflow-scrolling:touch;height:100%;left:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:0}#sidebar>.inner:after{content:'';display:block;height:4em;width:100%}#sidebar .toggle{text-indent:6em;width:6em}#sidebar .toggle:before{font-size:1.5rem;margin-left:-0.4375em}body.is-preload #sidebar{display:none}}@media screen and (max-width: 736px){#sidebar .toggle{text-indent:7.25em;width:7.25em}#sidebar .toggle:before{color:#7f888f;margin-left:-0.0625em;margin-top:-0.25em;font-size:1.1rem;z-index:1}#sidebar .toggle:after{background:rgba(222,225,226,0.75);border-radius:.375em;content:'';height:3.5em;left:1em;position:absolute;top:1em;width:5em}}#header{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex;border-bottom:solid 5px #f56a6a;padding:6em 0 1em 0;position:relative}#header>*{-moz-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-bottom:0}#header .logo{border-bottom:0;color:inherit;font-family:"Roboto Slab",serif;font-size:1.125em}#header .icons{text-align:right}@media screen and (max-width: 1680px){#header{padding-top:5em}}@media screen and (max-width: 736px){#header{padding-top:6.5em}#header .logo{font-size:1.25em;margin:0}#header .icons{height:5em;line-height:5em;position:absolute;right:-0.5em;top:0}}#banner{padding:6em 0 4em 0 ;display:-moz-flex;display:-webkit-flex;display:-ms-flex;display:flex}#banner h1{margin-top:-0.125em}#banner .content{-moz-flex-grow:1;-webkit-flex-grow:1;-ms-flex-grow:1;flex-grow:1;-moz-flex-shrink:1;-webkit-flex-shrink:1;-ms-flex-shrink:1;flex-shrink:1;width:50%}#banner .image{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;display:block;margin:0 0 2em 4em;width:50%}#banner .image img{height:100%;-moz-object-fit:cover;-webkit-object-fit:cover;-ms-object-fit:cover;object-fit:cover;-moz-object-position:center;-webkit-object-position:center;-ms-object-position:center;object-position:center;width:100%}@media screen and (orientation: portrait){#banner{-moz-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}#banner h1 br{display:none}#banner .content{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;width:100%}#banner .image{-moz-flex-grow:0;-webkit-flex-grow:0;-ms-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;margin:0 0 4em 0;height:25em;max-height:50vh;min-height:18em;width:100%}}@media screen and (orientation: portrait) and (max-width: 480px){#banner .image{max-height:35vh}}#footer .copyright{color:#9fa3a6;font-size:0.9em}#footer .copyright a{color:inherit}#menu ul{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:#3d4449;font-family:"Roboto Slab",serif;font-family:400;letter-spacing:.075em;list-style:none;margin-bottom:0;padding:0;text-transform:uppercase}#menu ul a,#menu ul span{border-bottom:0;color:inherit;cursor:pointer;display:block;font-size:0.9em;padding:0.625em 0}#menu ul a:hover,#menu ul span:hover{color:#f56a6a}#menu ul a.opener,#menu ul span.opener{-moz-transition:color .2s ease-in-out;-webkit-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0);position:relative}#menu ul a.opener:before,#menu ul span.opener:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:normal;text-transform:none !important}#menu ul a.opener:before,#menu ul span.opener:before{-moz-transition:color .2s ease-in-out,-moz-transform .2s ease-in-out;-webkit-transition:color .2s ease-in-out,-webkit-transform .2s ease-in-out;-ms-transition:color .2s ease-in-out,-ms-transform .2s ease-in-out;transition:color .2s ease-in-out,transform .2s ease-in-out;color:#9fa3a6;content:'\f078';position:absolute;right:0}#menu ul a.opener:hover:before,#menu ul span.opener:hover:before{color:#f56a6a}#menu ul a.opener.active+ul,#menu ul span.opener.active+ul{display:block}#menu ul a.opener.active:before,#menu ul span.opener.active:before{-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}#menu>ul>li{border-top:solid 1px rgba(210,215,217,0.75);margin:0.5em 0 0 0;padding:0.5em 0 0 0}#menu>ul>li>ul{color:#9fa3a6;display:none;margin:0.5em 0 1.5em 0;padding-left:1em}#menu>ul>li>ul a,#menu>ul>li>ul span{font-size:0.8em}#menu>ul>li>ul>li{margin:0.125em 0 0 0;padding:0.125em 0 0 0}#menu>ul>li:first-child{border-top:0;margin-top:0;padding-top:0}#header .logo{color:#3d4449;font-weight:bold}#header .logo.image{padding:0;border:none;display:inline-flex;height:28px}@media screen and (max-width: 736px){#header .logo.image{display:flex;justify-content:center;text-align:center}}#header .logo.image img{height:28px;transform:none !important}@media screen and (max-width: 736px){#sidebar:not(.inactive) .toggle:before{color:#fff}#sidebar:not(.inactive) .toggle:after{background:#f56a6a}}#banner{border-bottom:solid 2px rgba(210,215,217,0.75)}.content{max-width:700px;margin:0 auto}.pagination{display:flex;justify-content:space-between;align-items:center;width:100%;padding:3rem 0;border-top:solid 2px rgba(210,215,217,0.75)}.tag-header{padding:5em 0 2em 0;border-bottom:solid 2px rgba(210,215,217,0.75);text-align:center}.author-header{display:flex;flex-direction:column;align-items:center;padding:4em 0 3em 0;border-bottom:solid 2px rgba(210,215,217,0.75);text-align:center}.author-profile-image{flex-shrink:0;margin:0 0 15px 0;width:100px;height:100px;box-shadow:rgba(255,255,255,0.1) 0 0 0 6px;display:block;background:#222;border-radius:100%;object-fit:cover}.author-header h1{margin-bottom:0.5rem}.author-meta{display:flex;align-items:center}.author-meta .icon,.author-meta .bull{padding:5px 10px}.author-location:before{margin-right:10px}.post-footer{margin:4rem auto 0;max-width:700px}.authors{display:flex;justify-content:center;flex-wrap:wrap;margin:0 -40px}.author-box{flex:1 1 300px;display:inline-flex;align-items:flex-start;padding:5px 20px;margin:0 20px 20px;border:none}.author-box:hover{color:#212931 !important}.author-box:hover .author-box-name{color:#18bfef;transition:color 0.2s ease}.author-box .author-profile-image{height:60px;width:60px;margin-right:20px}.author-box-content{display:flex;flex-direction:column}.author-box-label{font-family:"Roboto Slab",serif;font-size:0.7rem;line-height:1em;font-weight:300;text-transform:uppercase;color:#999}.author-box-name{margin:3px 0;font-size:1.3rem;line-height:1.2em;transition:color 0.5s ease}.author-box p{margin:0;font-size:0.9rem;line-height:1.5em}.kg-image{max-width:100%}.kg-card{margin:0 0 2rem 0}.kg-embed-card{display:flex;flex-direction:column;align-items:center;min-width:100%}.kg-image{max-width:100%}.kg-card figcaption{font-size:0.8rem;line-height:1.4em;text-align:center}.kg-width-wide{position:relative;margin-left:-6rem;margin-right:-6rem;width:calc(100% + 12rem)}@media screen and (max-width: 1280px){.kg-width-wide{margin-left:-4rem;margin-right:-4rem;width:calc(100% + 8rem)}}@media screen and (max-width: 980px){.kg-width-wide{margin-left:-2rem;margin-right:-2rem;width:calc(100% + 4rem)}}@media screen and (max-width: 736px){.kg-width-wide{margin-left:0;margin-right:0;width:100%}}.kg-width-full{position:relative;margin-left:-14.1rem;margin-right:-14.1rem;width:calc(100% + 28.2rem)}@media screen and (max-width: 1280px){.kg-width-full{margin-left:-8rem;margin-right:-8rem;width:calc(100% + 16rem)}}@media screen and (max-width: 980px){.kg-width-full{margin-left:-4rem;margin-right:-4rem;width:calc(100% + 8rem)}}@media screen and (max-width: 736px){.kg-width-full{margin-left:-2rem;margin-right:-2rem;width:calc(100% + 4rem)}}.kg-gallery-container{display:flex;flex-direction:column;margin-left:-6rem;margin-right:-6rem;width:calc(100% + 12rem)}@media screen and (max-width: 1280px){.kg-gallery-container{margin-left:-4rem;margin-right:-4rem;width:calc(100% + 8rem)}}@media screen and (max-width: 980px){.kg-gallery-container{margin-left:-2rem;margin-right:-2rem;width:calc(100% + 4rem)}}@media screen and (max-width: 736px){.kg-gallery-container{margin-left:0;margin-right:0;width:100%}}.kg-gallery-row{display:flex;flex-direction:row;justify-content:center}.kg-gallery-image img{display:block;margin:0;width:100%;height:100%}.kg-gallery-row:not(:first-of-type){margin:0.75em 0 0 0}.kg-gallery-image:not(:first-of-type){margin:0 0 0 0.75em}.kg-gallery-card+.kg-image-card.kg-width-wide,.kg-gallery-card+.kg-gallery-card,.kg-image-card.kg-width-wide+.kg-gallery-card,.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide{margin:-2.25em 0 3em}.error-page{height:100%;display:flex;flex-direction:column}.error-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;height:100%;width:100%;padding-bottom:8rem !important;text-align:center}.error-code{margin:0}
-/*
- Editorial by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-*/
-
-html, body, div, span, applet, object,
-iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
-pre, a, abbr, acronym, address, big, cite,
-code, del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var, b,
-u, i, center, dl, dt, dd, ol, ul, li, fieldset,
-form, label, legend, table, caption, tbody,
-tfoot, thead, tr, th, td, article, aside,
-canvas, details, embed, figure, figcaption,
-footer, header, hgroup, menu, nav, output, ruby,
-section, summary, time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;}
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
- blockquote:before, blockquote:after, q:before, q:after {
- content: '';
- content: none;
- }
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-body {
- -webkit-text-size-adjust: none;
-}
-
-mark {
- background-color: transparent;
- color: inherit;
-}
-
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-input, select, textarea {
- -moz-appearance: none;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
-}
-
-/* Basic */
-
- @-ms-viewport {
- width: device-width;
- }
-
- body {
- -ms-overflow-style: scrollbar;
- }
-
- @media screen and (max-width: 480px) {
-
- html, body {
- min-width: 320px;
- }
-
- }
-
- html {
- box-sizing: border-box;
- }
-
- *, *:before, *:after {
- box-sizing: inherit;
- }
-
- body {
- background: #ffffff;
- }
-
- body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
- -moz-animation: none !important;
- -webkit-animation: none !important;
- -ms-animation: none !important;
- animation: none !important;
- -moz-transition: none !important;
- -webkit-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- }
-
-/* Type */
-
- body, input, select, textarea {
- color: #7f888f;
- font-family: "Open Sans", sans-serif;
- font-size: 13pt;
- font-weight: 400;
- line-height: 1.65;
- }
-
- @media screen and (max-width: 1680px) {
-
- body, input, select, textarea {
- font-size: 11pt;
- }
-
- }
-
- @media screen and (max-width: 1280px) {
-
- body, input, select, textarea {
- font-size: 10pt;
- }
-
- }
-
- @media screen and (max-width: 360px) {
-
- body, input, select, textarea {
- font-size: 9pt;
- }
-
- }
-
- a {
- -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
- -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
- -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
- transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
- border-bottom: dotted 1px;
- color: #f56a6a;
- text-decoration: none;
- }
-
- a:hover {
- border-bottom-color: #f56a6a;
- color: #f56a6a !important;
- }
-
- a:hover strong {
- color: inherit;
- }
-
- strong, b {
- color: #3d4449;
- font-weight: 600;
- }
-
- em, i {
- font-style: italic;
- }
-
- p {
- margin: 0 0 2em 0;
- }
-
- h1, h2, h3, h4, h5, h6 {
- color: #3d4449;
- font-family: "Roboto Slab", serif;
- font-weight: 700;
- line-height: 1.5;
- margin: 0 0 1em 0;
- }
-
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- color: inherit;
- text-decoration: none;
- border-bottom: 0;
- }
-
- h1 {
- font-size: 4em;
- margin: 0 0 0.5em 0;
- line-height: 1.3;
- }
-
- h2 {
- font-size: 1.75em;
- }
-
- h3 {
- font-size: 1.25em;
- }
-
- h4 {
- font-size: 1.1em;
- }
-
- h5 {
- font-size: 0.9em;
- }
-
- h6 {
- font-size: 0.7em;
- }
-
- @media screen and (max-width: 1680px) {
-
- h1 {
- font-size: 3.5em;
- }
-
- }
-
- @media screen and (max-width: 980px) {
-
- h1 {
- font-size: 3.25em;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- h1 {
- font-size: 2em;
- line-height: 1.4;
- }
-
- h2 {
- font-size: 1.5em;
- }
-
- }
-
- sub {
- font-size: 0.8em;
- position: relative;
- top: 0.5em;
- }
-
- sup {
- font-size: 0.8em;
- position: relative;
- top: -0.5em;
- }
-
- blockquote {
- border-left: solid 3px rgba(210, 215, 217, 0.75);
- font-style: italic;
- margin: 0 0 2em 0;
- padding: 0.5em 0 0.5em 2em;
- }
-
- code {
- background: rgba(230, 235, 237, 0.25);
- border-radius: 0.375em;
- border: solid 1px rgba(210, 215, 217, 0.75);
- font-family: "Courier New", monospace;
- font-size: 0.9em;
- margin: 0 0.25em;
- padding: 0.25em 0.65em;
- }
-
- pre {
- -webkit-overflow-scrolling: touch;
- font-family: "Courier New", monospace;
- font-size: 0.9em;
- margin: 0 0 2em 0;
- }
-
- pre code {
- display: block;
- line-height: 1.75;
- padding: 1em 1.5em;
- overflow-x: auto;
- }
-
- hr {
- border: 0;
- border-bottom: solid 1px rgba(210, 215, 217, 0.75);
- margin: 2em 0;
- }
-
- hr.major {
- margin: 3em 0;
- }
-
- .align-left {
- text-align: left;
- }
-
- .align-center {
- text-align: center;
- }
-
- .align-right {
- text-align: right;
- }
-
-/* Row */
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp {
- order: -1;
- }
-
- .row > .col-1 {
- width: 8.3333333333%;
- }
-
- .row > .off-1 {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2 {
- width: 16.6666666667%;
- }
-
- .row > .off-2 {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3 {
- width: 25%;
- }
-
- .row > .off-3 {
- margin-left: 25%;
- }
-
- .row > .col-4 {
- width: 33.3333333333%;
- }
-
- .row > .off-4 {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5 {
- width: 41.6666666667%;
- }
-
- .row > .off-5 {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6 {
- width: 50%;
- }
-
- .row > .off-6 {
- margin-left: 50%;
- }
-
- .row > .col-7 {
- width: 58.3333333333%;
- }
-
- .row > .off-7 {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8 {
- width: 66.6666666667%;
- }
-
- .row > .off-8 {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9 {
- width: 75%;
- }
-
- .row > .off-9 {
- margin-left: 75%;
- }
-
- .row > .col-10 {
- width: 83.3333333333%;
- }
-
- .row > .off-10 {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11 {
- width: 91.6666666667%;
- }
-
- .row > .off-11 {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12 {
- width: 100%;
- }
-
- .row > .off-12 {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- @media screen and (max-width: 1680px) {
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp-xlarge {
- order: -1;
- }
-
- .row > .col-1-xlarge {
- width: 8.3333333333%;
- }
-
- .row > .off-1-xlarge {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2-xlarge {
- width: 16.6666666667%;
- }
-
- .row > .off-2-xlarge {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3-xlarge {
- width: 25%;
- }
-
- .row > .off-3-xlarge {
- margin-left: 25%;
- }
-
- .row > .col-4-xlarge {
- width: 33.3333333333%;
- }
-
- .row > .off-4-xlarge {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5-xlarge {
- width: 41.6666666667%;
- }
-
- .row > .off-5-xlarge {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6-xlarge {
- width: 50%;
- }
-
- .row > .off-6-xlarge {
- margin-left: 50%;
- }
-
- .row > .col-7-xlarge {
- width: 58.3333333333%;
- }
-
- .row > .off-7-xlarge {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8-xlarge {
- width: 66.6666666667%;
- }
-
- .row > .off-8-xlarge {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9-xlarge {
- width: 75%;
- }
-
- .row > .off-9-xlarge {
- margin-left: 75%;
- }
-
- .row > .col-10-xlarge {
- width: 83.3333333333%;
- }
-
- .row > .off-10-xlarge {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11-xlarge {
- width: 91.6666666667%;
- }
-
- .row > .off-11-xlarge {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12-xlarge {
- width: 100%;
- }
-
- .row > .off-12-xlarge {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- }
-
- @media screen and (max-width: 1280px) {
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp-large {
- order: -1;
- }
-
- .row > .col-1-large {
- width: 8.3333333333%;
- }
-
- .row > .off-1-large {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2-large {
- width: 16.6666666667%;
- }
-
- .row > .off-2-large {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3-large {
- width: 25%;
- }
-
- .row > .off-3-large {
- margin-left: 25%;
- }
-
- .row > .col-4-large {
- width: 33.3333333333%;
- }
-
- .row > .off-4-large {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5-large {
- width: 41.6666666667%;
- }
-
- .row > .off-5-large {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6-large {
- width: 50%;
- }
-
- .row > .off-6-large {
- margin-left: 50%;
- }
-
- .row > .col-7-large {
- width: 58.3333333333%;
- }
-
- .row > .off-7-large {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8-large {
- width: 66.6666666667%;
- }
-
- .row > .off-8-large {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9-large {
- width: 75%;
- }
-
- .row > .off-9-large {
- margin-left: 75%;
- }
-
- .row > .col-10-large {
- width: 83.3333333333%;
- }
-
- .row > .off-10-large {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11-large {
- width: 91.6666666667%;
- }
-
- .row > .off-11-large {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12-large {
- width: 100%;
- }
-
- .row > .off-12-large {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- }
-
- @media screen and (max-width: 980px) {
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp-medium {
- order: -1;
- }
-
- .row > .col-1-medium {
- width: 8.3333333333%;
- }
-
- .row > .off-1-medium {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2-medium {
- width: 16.6666666667%;
- }
-
- .row > .off-2-medium {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3-medium {
- width: 25%;
- }
-
- .row > .off-3-medium {
- margin-left: 25%;
- }
-
- .row > .col-4-medium {
- width: 33.3333333333%;
- }
-
- .row > .off-4-medium {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5-medium {
- width: 41.6666666667%;
- }
-
- .row > .off-5-medium {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6-medium {
- width: 50%;
- }
-
- .row > .off-6-medium {
- margin-left: 50%;
- }
-
- .row > .col-7-medium {
- width: 58.3333333333%;
- }
-
- .row > .off-7-medium {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8-medium {
- width: 66.6666666667%;
- }
-
- .row > .off-8-medium {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9-medium {
- width: 75%;
- }
-
- .row > .off-9-medium {
- margin-left: 75%;
- }
-
- .row > .col-10-medium {
- width: 83.3333333333%;
- }
-
- .row > .off-10-medium {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11-medium {
- width: 91.6666666667%;
- }
-
- .row > .off-11-medium {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12-medium {
- width: 100%;
- }
-
- .row > .off-12-medium {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp-small {
- order: -1;
- }
-
- .row > .col-1-small {
- width: 8.3333333333%;
- }
-
- .row > .off-1-small {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2-small {
- width: 16.6666666667%;
- }
-
- .row > .off-2-small {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3-small {
- width: 25%;
- }
-
- .row > .off-3-small {
- margin-left: 25%;
- }
-
- .row > .col-4-small {
- width: 33.3333333333%;
- }
-
- .row > .off-4-small {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5-small {
- width: 41.6666666667%;
- }
-
- .row > .off-5-small {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6-small {
- width: 50%;
- }
-
- .row > .off-6-small {
- margin-left: 50%;
- }
-
- .row > .col-7-small {
- width: 58.3333333333%;
- }
-
- .row > .off-7-small {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8-small {
- width: 66.6666666667%;
- }
-
- .row > .off-8-small {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9-small {
- width: 75%;
- }
-
- .row > .off-9-small {
- margin-left: 75%;
- }
-
- .row > .col-10-small {
- width: 83.3333333333%;
- }
-
- .row > .off-10-small {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11-small {
- width: 91.6666666667%;
- }
-
- .row > .off-11-small {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12-small {
- width: 100%;
- }
-
- .row > .off-12-small {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- }
-
- @media screen and (max-width: 480px) {
-
- .row {
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- align-items: stretch;
- }
-
- .row > * {
- box-sizing: border-box;
- }
-
- .row.gtr-uniform > * > :last-child {
- margin-bottom: 0;
- }
-
- .row.aln-left {
- justify-content: flex-start;
- }
-
- .row.aln-center {
- justify-content: center;
- }
-
- .row.aln-right {
- justify-content: flex-end;
- }
-
- .row.aln-top {
- align-items: flex-start;
- }
-
- .row.aln-middle {
- align-items: center;
- }
-
- .row.aln-bottom {
- align-items: flex-end;
- }
-
- .row > .imp-xsmall {
- order: -1;
- }
-
- .row > .col-1-xsmall {
- width: 8.3333333333%;
- }
-
- .row > .off-1-xsmall {
- margin-left: 8.3333333333%;
- }
-
- .row > .col-2-xsmall {
- width: 16.6666666667%;
- }
-
- .row > .off-2-xsmall {
- margin-left: 16.6666666667%;
- }
-
- .row > .col-3-xsmall {
- width: 25%;
- }
-
- .row > .off-3-xsmall {
- margin-left: 25%;
- }
-
- .row > .col-4-xsmall {
- width: 33.3333333333%;
- }
-
- .row > .off-4-xsmall {
- margin-left: 33.3333333333%;
- }
-
- .row > .col-5-xsmall {
- width: 41.6666666667%;
- }
-
- .row > .off-5-xsmall {
- margin-left: 41.6666666667%;
- }
-
- .row > .col-6-xsmall {
- width: 50%;
- }
-
- .row > .off-6-xsmall {
- margin-left: 50%;
- }
-
- .row > .col-7-xsmall {
- width: 58.3333333333%;
- }
-
- .row > .off-7-xsmall {
- margin-left: 58.3333333333%;
- }
-
- .row > .col-8-xsmall {
- width: 66.6666666667%;
- }
-
- .row > .off-8-xsmall {
- margin-left: 66.6666666667%;
- }
-
- .row > .col-9-xsmall {
- width: 75%;
- }
-
- .row > .off-9-xsmall {
- margin-left: 75%;
- }
-
- .row > .col-10-xsmall {
- width: 83.3333333333%;
- }
-
- .row > .off-10-xsmall {
- margin-left: 83.3333333333%;
- }
-
- .row > .col-11-xsmall {
- width: 91.6666666667%;
- }
-
- .row > .off-11-xsmall {
- margin-left: 91.6666666667%;
- }
-
- .row > .col-12-xsmall {
- width: 100%;
- }
-
- .row > .off-12-xsmall {
- margin-left: 100%;
- }
-
- .row.gtr-0 {
- margin-top: 0;
- margin-left: 0em;
- }
-
- .row.gtr-0 > * {
- padding: 0 0 0 0em;
- }
-
- .row.gtr-0.gtr-uniform {
- margin-top: 0em;
- }
-
- .row.gtr-0.gtr-uniform > * {
- padding-top: 0em;
- }
-
- .row.gtr-25 {
- margin-top: 0;
- margin-left: -0.375em;
- }
-
- .row.gtr-25 > * {
- padding: 0 0 0 0.375em;
- }
-
- .row.gtr-25.gtr-uniform {
- margin-top: -0.375em;
- }
-
- .row.gtr-25.gtr-uniform > * {
- padding-top: 0.375em;
- }
-
- .row.gtr-50 {
- margin-top: 0;
- margin-left: -0.75em;
- }
-
- .row.gtr-50 > * {
- padding: 0 0 0 0.75em;
- }
-
- .row.gtr-50.gtr-uniform {
- margin-top: -0.75em;
- }
-
- .row.gtr-50.gtr-uniform > * {
- padding-top: 0.75em;
- }
-
- .row {
- margin-top: 0;
- margin-left: -1.5em;
- }
-
- .row > * {
- padding: 0 0 0 1.5em;
- }
-
- .row.gtr-uniform {
- margin-top: -1.5em;
- }
-
- .row.gtr-uniform > * {
- padding-top: 1.5em;
- }
-
- .row.gtr-150 {
- margin-top: 0;
- margin-left: -2.25em;
- }
-
- .row.gtr-150 > * {
- padding: 0 0 0 2.25em;
- }
-
- .row.gtr-150.gtr-uniform {
- margin-top: -2.25em;
- }
-
- .row.gtr-150.gtr-uniform > * {
- padding-top: 2.25em;
- }
-
- .row.gtr-200 {
- margin-top: 0;
- margin-left: -3em;
- }
-
- .row.gtr-200 > * {
- padding: 0 0 0 3em;
- }
-
- .row.gtr-200.gtr-uniform {
- margin-top: -3em;
- }
-
- .row.gtr-200.gtr-uniform > * {
- padding-top: 3em;
- }
-
- }
-
-/* Section/Article */
-
- section.special, article.special {
- text-align: center;
- }
-
- header p {
- font-family: "Roboto Slab", serif;
- font-size: 1em;
- font-weight: 400;
- letter-spacing: 0.075em;
- margin-top: -0.5em;
- text-transform: uppercase;
- }
-
- header.major > :last-child {
- border-bottom: solid 3px #f56a6a;
- display: inline-block;
- margin: 0 0 2em 0;
- padding: 0 0.75em 0.5em 0;
- }
-
- header.main > :last-child {
- margin: 0 0 1em 0;
- }
-
-/* Form */
-
- form {
- margin: 0 0 2em 0;
- }
-
- label {
- color: #3d4449;
- display: block;
- font-size: 0.9em;
- font-weight: 600;
- margin: 0 0 1em 0;
- }
-
- input[type="text"],
- input[type="password"],
- input[type="email"],
- input[type="tel"],
- input[type="search"],
- input[type="url"],
- select,
- textarea {
- -moz-appearance: none;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
- background: #ffffff;
- border-radius: 0.375em;
- border: none;
- border: solid 1px rgba(210, 215, 217, 0.75);
- color: inherit;
- display: block;
- outline: 0;
- padding: 0 1em;
- text-decoration: none;
- width: 100%;
- }
-
- input[type="text"]:invalid,
- input[type="password"]:invalid,
- input[type="email"]:invalid,
- input[type="tel"]:invalid,
- input[type="search"]:invalid,
- input[type="url"]:invalid,
- select:invalid,
- textarea:invalid {
- box-shadow: none;
- }
-
- input[type="text"]:focus,
- input[type="password"]:focus,
- input[type="email"]:focus,
- input[type="tel"]:focus,
- input[type="search"]:focus,
- input[type="url"]:focus,
- select:focus,
- textarea:focus {
- border-color: #f56a6a;
- box-shadow: 0 0 0 1px #f56a6a;
- }
-
- select {
- background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E");
- background-size: 1.25em;
- background-repeat: no-repeat;
- background-position: calc(100% - 1em) center;
- height: 2.75em;
- padding-right: 2.75em;
- text-overflow: ellipsis;
- }
-
- select option {
- color: #3d4449;
- background: #ffffff;
- }
-
- select:focus::-ms-value {
- background-color: transparent;
- }
-
- select::-ms-expand {
- display: none;
- }
-
- input[type="text"],
- input[type="password"],
- input[type="email"],
- input[type="tel"],
- input[type="search"],
- input[type="url"],
- select {
- height: 2.75em;
- }
-
- textarea {
- padding: 0.75em 1em;
- }
-
- input[type="checkbox"],
- input[type="radio"] {
- -moz-appearance: none;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
- display: block;
- float: left;
- margin-right: -2em;
- opacity: 0;
- width: 1em;
- z-index: -1;
- }
-
- input[type="checkbox"] + label,
- input[type="radio"] + label {
- text-decoration: none;
- color: #7f888f;
- cursor: pointer;
- display: inline-block;
- font-size: 1em;
- font-weight: 400;
- padding-left: 2.4em;
- padding-right: 0.75em;
- position: relative;
- }
-
- input[type="checkbox"] + label:before,
- input[type="radio"] + label:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- input[type="checkbox"] + label:before,
- input[type="radio"] + label:before {
- background: #ffffff;
- border-radius: 0.375em;
- border: solid 1px rgba(210, 215, 217, 0.75);
- content: '';
- display: inline-block;
- height: 1.65em;
- left: 0;
- line-height: 1.58125em;
- position: absolute;
- text-align: center;
- top: 0;
- width: 1.65em;
- }
-
- input[type="checkbox"]:checked + label:before,
- input[type="radio"]:checked + label:before {
- background: #3d4449;
- border-color: #3d4449;
- color: #ffffff;
- content: '\f00c';
- }
-
- input[type="checkbox"]:focus + label:before,
- input[type="radio"]:focus + label:before {
- border-color: #f56a6a;
- box-shadow: 0 0 0 1px #f56a6a;
- }
-
- input[type="checkbox"] + label:before {
- border-radius: 0.375em;
- }
-
- input[type="radio"] + label:before {
- border-radius: 100%;
- }
-
- ::-webkit-input-placeholder {
- color: #9fa3a6 !important;
- opacity: 1.0;
- }
-
- :-moz-placeholder {
- color: #9fa3a6 !important;
- opacity: 1.0;
- }
-
- ::-moz-placeholder {
- color: #9fa3a6 !important;
- opacity: 1.0;
- }
-
- :-ms-input-placeholder {
- color: #9fa3a6 !important;
- opacity: 1.0;
- }
-
-/* Box */
-
- .box {
- border-radius: 0.375em;
- border: solid 1px rgba(210, 215, 217, 0.75);
- margin-bottom: 2em;
- padding: 1.5em;
- }
-
- .box > :last-child,
- .box > :last-child > :last-child,
- .box > :last-child > :last-child > :last-child {
- margin-bottom: 0;
- }
-
- .box.alt {
- border: 0;
- border-radius: 0;
- padding: 0;
- }
-
-/* Icon */
-
- .icon {
- text-decoration: none;
- border-bottom: none;
- position: relative;
- }
-
- .icon:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- .icon > .label {
- display: none;
- }
-
-/* Image */
-
- .image {
- border-radius: 0.375em;
- border: 0;
- display: inline-block;
- position: relative;
- }
-
- .image img {
- border-radius: 0.375em;
- display: block;
- }
-
- .image.left, .image.right {
- max-width: 40%;
- }
-
- .image.left img, .image.right img {
- width: 100%;
- }
-
- .image.left {
- float: left;
- padding: 0 1.5em 1em 0;
- top: 0.25em;
- }
-
- .image.right {
- float: right;
- padding: 0 0 1em 1.5em;
- top: 0.25em;
- }
-
- .image.fit {
- display: block;
- margin: 0 0 2em 0;
- width: 100%;
- }
-
- .image.fit img {
- width: 100%;
- }
-
- .image.main {
- display: block;
- margin: 0 0 3em 0;
- width: 100%;
- }
-
- .image.main img {
- width: 100%;
- }
-
- a.image {
- overflow: hidden;
- }
-
- a.image img {
- -moz-transition: -moz-transform 0.2s ease;
- -webkit-transition: -webkit-transform 0.2s ease;
- -ms-transition: -ms-transform 0.2s ease;
- transition: transform 0.2s ease;
- }
-
- a.image:hover img {
- -moz-transform: scale(1.075);
- -webkit-transform: scale(1.075);
- -ms-transform: scale(1.075);
- transform: scale(1.075);
- }
-
-/* List */
-
- ol {
- list-style: decimal;
- margin: 0 0 2em 0;
- padding-left: 1.25em;
- }
-
- ol li {
- padding-left: 0.25em;
- }
-
- ul {
- list-style: disc;
- margin: 0 0 2em 0;
- padding-left: 1em;
- }
-
- ul li {
- padding-left: 0.5em;
- }
-
- ul.alt {
- list-style: none;
- padding-left: 0;
- }
-
- ul.alt li {
- border-top: solid 1px rgba(210, 215, 217, 0.75);
- padding: 0.5em 0;
- }
-
- ul.alt li:first-child {
- border-top: 0;
- padding-top: 0;
- }
-
- dl {
- margin: 0 0 2em 0;
- }
-
- dl dt {
- display: block;
- font-weight: 600;
- margin: 0 0 1em 0;
- }
-
- dl dd {
- margin-left: 2em;
- }
-
-/* Actions */
-
- ul.actions {
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- cursor: default;
- list-style: none;
- margin-left: -1em;
- padding-left: 0;
- }
-
- ul.actions li {
- padding: 0 0 0 1em;
- vertical-align: middle;
- }
-
- ul.actions.special {
- -moz-justify-content: center;
- -webkit-justify-content: center;
- -ms-justify-content: center;
- justify-content: center;
- width: 100%;
- margin-left: 0;
- }
-
- ul.actions.special li:first-child {
- padding-left: 0;
- }
-
- ul.actions.stacked {
- -moz-flex-direction: column;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-left: 0;
- }
-
- ul.actions.stacked li {
- padding: 1.3em 0 0 0;
- }
-
- ul.actions.stacked li:first-child {
- padding-top: 0;
- }
-
- ul.actions.fit {
- width: calc(100% + 1em);
- }
-
- ul.actions.fit li {
- -moz-flex-grow: 1;
- -webkit-flex-grow: 1;
- -ms-flex-grow: 1;
- flex-grow: 1;
- -moz-flex-shrink: 1;
- -webkit-flex-shrink: 1;
- -ms-flex-shrink: 1;
- flex-shrink: 1;
- width: 100%;
- }
-
- ul.actions.fit li > * {
- width: 100%;
- }
-
- ul.actions.fit.stacked {
- width: 100%;
- }
-
-/* Icons */
-
- ul.icons {
- cursor: default;
- list-style: none;
- padding-left: 0;
- }
-
- ul.icons li {
- display: inline-block;
- padding: 0 1em 0 0;
- }
-
- ul.icons li:last-child {
- padding-right: 0;
- }
-
- ul.icons li .icon {
- color: inherit;
- }
-
- ul.icons li .icon:before {
- font-size: 1.25em;
- }
-
-/* Contact */
-
- ul.contact {
- list-style: none;
- padding: 0;
- }
-
- ul.contact li {
- text-decoration: none;
- border-top: solid 1px rgba(210, 215, 217, 0.75);
- margin: 1.5em 0 0 0;
- padding: 1.5em 0 0 3em;
- position: relative;
- }
-
- ul.contact li:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- ul.contact li:before {
- color: #f56a6a;
- display: inline-block;
- font-size: 1.5em;
- height: 1.125em;
- left: 0;
- line-height: 1.125em;
- position: absolute;
- text-align: center;
- top: 1em;
- width: 1.5em;
- }
-
- ul.contact li:first-child {
- border-top: 0;
- margin-top: 0;
- padding-top: 0;
- }
-
- ul.contact li:first-child:before {
- top: 0;
- }
-
- ul.contact li a {
- color: inherit;
- }
-
-/* Pagination */
-
- ul.pagination {
- cursor: default;
- list-style: none;
- padding-left: 0;
- }
-
- ul.pagination li {
- display: inline-block;
- padding-left: 0;
- vertical-align: middle;
- }
-
- ul.pagination li > .page {
- -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- border-bottom: 0;
- border-radius: 0.375em;
- display: inline-block;
- font-size: 0.8em;
- font-weight: 600;
- height: 2em;
- line-height: 2em;
- margin: 0 0.125em;
- min-width: 2em;
- padding: 0 0.5em;
- text-align: center;
- }
-
- ul.pagination li > .page.active {
- background-color: #f56a6a;
- color: #ffffff !important;
- }
-
- ul.pagination li > .page.active:hover {
- background-color: #f67878;
- }
-
- ul.pagination li > .page.active:active {
- background-color: #f45c5c;
- }
-
- ul.pagination li:first-child {
- padding-right: 0.75em;
- }
-
- ul.pagination li:last-child {
- padding-left: 0.75em;
- }
-
- @media screen and (max-width: 480px) {
-
- ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
- display: none;
- }
-
- ul.pagination li:first-child {
- padding-right: 0;
- }
-
- }
-
-/* Table */
-
- .table-wrapper {
- -webkit-overflow-scrolling: touch;
- overflow-x: auto;
- }
-
- table {
- margin: 0 0 2em 0;
- width: 100%;
- }
-
- table tbody tr {
- border: solid 1px rgba(210, 215, 217, 0.75);
- border-left: 0;
- border-right: 0;
- }
-
- table tbody tr:nth-child(2n + 1) {
- background-color: rgba(230, 235, 237, 0.25);
- }
-
- table td {
- padding: 0.75em 0.75em;
- }
-
- table th {
- color: #3d4449;
- font-size: 0.9em;
- font-weight: 600;
- padding: 0 0.75em 0.75em 0.75em;
- text-align: left;
- }
-
- table thead {
- border-bottom: solid 2px rgba(210, 215, 217, 0.75);
- }
-
- table tfoot {
- border-top: solid 2px rgba(210, 215, 217, 0.75);
- }
-
- table.alt {
- border-collapse: separate;
- }
-
- table.alt tbody tr td {
- border: solid 1px rgba(210, 215, 217, 0.75);
- border-left-width: 0;
- border-top-width: 0;
- }
-
- table.alt tbody tr td:first-child {
- border-left-width: 1px;
- }
-
- table.alt tbody tr:first-child td {
- border-top-width: 1px;
- }
-
- table.alt thead {
- border-bottom: 0;
- }
-
- table.alt tfoot {
- border-top: 0;
- }
-
-/* Button */
-
- input[type="submit"],
- input[type="reset"],
- input[type="button"],
- button,
- .button {
- -moz-appearance: none;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
- -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
- background-color: transparent;
- border-radius: 0.375em;
- border: 0;
- box-shadow: inset 0 0 0 2px #f56a6a;
- color: #f56a6a !important;
- cursor: pointer;
- display: inline-block;
- font-family: "Roboto Slab", serif;
- font-size: 0.8em;
- font-weight: 700;
- height: 3.5em;
- letter-spacing: 0.075em;
- line-height: 3.5em;
- padding: 0 2.25em;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- white-space: nowrap;
- }
-
- input[type="submit"]:hover,
- input[type="reset"]:hover,
- input[type="button"]:hover,
- button:hover,
- .button:hover {
- background-color: rgba(245, 106, 106, 0.05);
- }
-
- input[type="submit"]:active,
- input[type="reset"]:active,
- input[type="button"]:active,
- button:active,
- .button:active {
- background-color: rgba(245, 106, 106, 0.15);
- }
-
- input[type="submit"].icon:before,
- input[type="reset"].icon:before,
- input[type="button"].icon:before,
- button.icon:before,
- .button.icon:before {
- margin-right: 0.5em;
- }
-
- input[type="submit"].fit,
- input[type="reset"].fit,
- input[type="button"].fit,
- button.fit,
- .button.fit {
- width: 100%;
- }
-
- input[type="submit"].small,
- input[type="reset"].small,
- input[type="button"].small,
- button.small,
- .button.small {
- font-size: 0.6em;
- }
-
- input[type="submit"].large,
- input[type="reset"].large,
- input[type="button"].large,
- button.large,
- .button.large {
- font-size: 1em;
- height: 3.65em;
- line-height: 3.65em;
- }
-
- input[type="submit"].primary,
- input[type="reset"].primary,
- input[type="button"].primary,
- button.primary,
- .button.primary {
- background-color: #f56a6a;
- box-shadow: none;
- color: #ffffff !important;
- }
-
- input[type="submit"].primary:hover,
- input[type="reset"].primary:hover,
- input[type="button"].primary:hover,
- button.primary:hover,
- .button.primary:hover {
- background-color: #f67878;
- }
-
- input[type="submit"].primary:active,
- input[type="reset"].primary:active,
- input[type="button"].primary:active,
- button.primary:active,
- .button.primary:active {
- background-color: #f45c5c;
- }
-
- input[type="submit"].disabled, input[type="submit"]:disabled,
- input[type="reset"].disabled,
- input[type="reset"]:disabled,
- input[type="button"].disabled,
- input[type="button"]:disabled,
- button.disabled,
- button:disabled,
- .button.disabled,
- .button:disabled {
- pointer-events: none;
- opacity: 0.25;
- }
-
-/* Mini Posts */
-
- .mini-posts article {
- border-top: solid 1px rgba(210, 215, 217, 0.75);
- margin-top: 2em;
- padding-top: 2em;
- }
-
- .mini-posts article .image {
- display: block;
- margin: 0 0 1.5em 0;
- }
-
- .mini-posts article .image img {
- display: block;
- width: 100%;
- }
-
- .mini-posts article:first-child {
- border-top: 0;
- margin-top: 0;
- padding-top: 0;
- }
-
-/* Features */
-
- .features {
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- -moz-flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin: 0 0 2em -3em;
- width: calc(100% + 3em);
- }
-
- .features article {
- -moz-align-items: center;
- -webkit-align-items: center;
- -ms-align-items: center;
- align-items: center;
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- margin: 0 0 3em 3em;
- position: relative;
- width: calc(50% - 3em);
- }
-
- .features article:nth-child(2n - 1) {
- margin-right: 1.5em;
- }
-
- .features article:nth-child(2n) {
- margin-left: 1.5em;
- }
-
- .features article:nth-last-child(1), .features article:nth-last-child(2) {
- margin-bottom: 0;
- }
-
- .features article .icon {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-shrink: 0;
- flex-shrink: 0;
- display: block;
- height: 10em;
- line-height: 10em;
- margin: 0 2em 0 0;
- text-align: center;
- width: 10em;
- }
-
- .features article .icon:before {
- color: #f56a6a;
- font-size: 2.75rem;
- position: relative;
- top: 0.05em;
- }
-
- .features article .icon:after {
- -moz-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- border-radius: 0.25rem;
- border: solid 2px rgba(210, 215, 217, 0.75);
- content: '';
- display: block;
- height: 7em;
- left: 50%;
- margin: -3.5em 0 0 -3.5em;
- position: absolute;
- top: 50%;
- width: 7em;
- }
-
- .features article .content {
- -moz-flex-grow: 1;
- -webkit-flex-grow: 1;
- -ms-flex-grow: 1;
- flex-grow: 1;
- -moz-flex-shrink: 1;
- -webkit-flex-shrink: 1;
- -ms-flex-shrink: 1;
- flex-shrink: 1;
- width: 100%;
- }
-
- .features article .content > :last-child {
- margin-bottom: 0;
- }
-
- @media screen and (max-width: 980px) {
-
- .features {
- margin: 0 0 2em 0;
- width: 100%;
- }
-
- .features article {
- margin: 0 0 3em 0;
- width: 100%;
- }
-
- .features article:nth-child(2n - 1) {
- margin-right: 0;
- }
-
- .features article:nth-child(2n) {
- margin-left: 0;
- }
-
- .features article:nth-last-child(1), .features article:nth-last-child(2) {
- margin-bottom: 3em;
- }
-
- .features article:last-child {
- margin-bottom: 0;
- }
-
- .features article .icon {
- height: 8em;
- line-height: 8em;
- width: 8em;
- }
-
- .features article .icon:before {
- font-size: 2.25rem;
- }
-
- .features article .icon:after {
- height: 6em;
- margin: -3em 0 0 -3em;
- width: 6em;
- }
-
- }
-
- @media screen and (max-width: 480px) {
-
- .features article {
- -moz-flex-direction: column;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -moz-align-items: -moz-flex-start;
- -webkit-align-items: -webkit-flex-start;
- -ms-align-items: -ms-flex-start;
- align-items: flex-start;
- }
-
- .features article .icon {
- height: 6em;
- line-height: 6em;
- margin: 0 0 1.5em 0;
- width: 6em;
- }
-
- .features article .icon:before {
- font-size: 1.5rem;
- }
-
- .features article .icon:after {
- height: 4em;
- margin: -2em 0 0 -2em;
- width: 4em;
- }
-
- }
-
- @media screen and (max-width: 480px) {
-
- .features article .icon:before {
- font-size: 1.25rem;
- }
-
- }
-
-/* Posts */
-
- .posts {
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- -moz-flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin: 0 0 2em -6em;
- width: calc(100% + 6em);
- }
-
- .posts article {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 1;
- -webkit-flex-shrink: 1;
- -ms-flex-shrink: 1;
- flex-shrink: 1;
- margin: 0 0 6em 6em;
- position: relative;
- width: calc(33.3333333333% - 6em);
- }
-
- .posts article:before {
- background: rgba(210, 215, 217, 0.75);
- content: '';
- display: block;
- height: calc(100% + 6em);
- left: -3em;
- position: absolute;
- top: 0;
- width: 1px;
- }
-
- .posts article:after {
- background: rgba(210, 215, 217, 0.75);
- bottom: -3em;
- content: '';
- display: block;
- height: 1px;
- position: absolute;
- right: 0;
- width: calc(100% + 6em);
- }
-
- .posts article > :last-child {
- margin-bottom: 0;
- }
-
- .posts article .image {
- display: block;
- margin: 0 0 2em 0;
- }
-
- .posts article .image img {
- display: block;
- width: 100%;
- }
-
- @media screen and (min-width: 1681px) {
-
- .posts article:nth-child(3n + 1):before {
- display: none;
- }
-
- .posts article:nth-child(3n + 1):after {
- width: 100%;
- }
-
- .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) {
- margin-bottom: 0;
- }
-
- .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before {
- height: 100%;
- }
-
- .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after {
- display: none;
- }
-
- }
-
- @media screen and (max-width: 1680px) {
-
- .posts article {
- width: calc(50% - 6em);
- }
-
- .posts article:nth-last-child(3) {
- margin-bottom: 6em;
- }
-
- }
-
- @media screen and (min-width: 481px) and (max-width: 1680px) {
-
- .posts article:nth-child(2n + 1):before {
- display: none;
- }
-
- .posts article:nth-child(2n + 1):after {
- width: 100%;
- }
-
- .posts article:nth-last-child(1), .posts article:nth-last-child(2) {
- margin-bottom: 0;
- }
-
- .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before {
- height: 100%;
- }
-
- .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after {
- display: none;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- .posts {
- margin: 0 0 2em -4.5em;
- width: calc(100% + 4.5em);
- }
-
- .posts article {
- margin: 0 0 4.5em 4.5em;
- width: calc(50% - 4.5em);
- }
-
- .posts article:before {
- height: calc(100% + 4.5em);
- left: -2.25em;
- }
-
- .posts article:after {
- bottom: -2.25em;
- width: calc(100% + 4.5em);
- }
-
- .posts article:nth-last-child(3) {
- margin-bottom: 4.5em;
- }
-
- }
-
- @media screen and (max-width: 480px) {
-
- .posts {
- margin: 0 0 2em 0;
- width: 100%;
- }
-
- .posts article {
- margin: 0 0 4.5em 0;
- width: 100%;
- }
-
- .posts article:before {
- display: none;
- }
-
- .posts article:after {
- width: 100%;
- }
-
- .posts article:last-child {
- margin-bottom: 0;
- }
-
- .posts article:last-child:after {
- display: none;
- }
-
- }
-
-/* Wrapper */
-
- #wrapper {
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- -moz-flex-direction: row-reverse;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- min-height: 100vh;
- }
-
-/* Main */
-
- #main {
- -moz-flex-grow: 1;
- -webkit-flex-grow: 1;
- -ms-flex-grow: 1;
- flex-grow: 1;
- -moz-flex-shrink: 1;
- -webkit-flex-shrink: 1;
- -ms-flex-shrink: 1;
- flex-shrink: 1;
- width: 100%;
- }
-
- #main > .inner {
- padding: 0 6em 0.1em 6em ;
- margin: 0 auto;
- max-width: 110em;
- }
-
- #main > .inner > section {
- padding: 6em 0 4em 0 ;
- border-top: solid 2px rgba(210, 215, 217, 0.75);
- }
-
- #main > .inner > section:first-of-type {
- border-top: 0 !important;
- }
-
- @media screen and (max-width: 1680px) {
-
- #main > .inner {
- padding: 0 5em 0.1em 5em ;
- }
-
- #main > .inner > section {
- padding: 5em 0 3em 0 ;
- }
-
- }
-
- @media screen and (max-width: 1280px) {
-
- #main > .inner {
- padding: 0 4em 0.1em 4em ;
- }
-
- #main > .inner > section {
- padding: 4em 0 2em 0 ;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- #main > .inner {
- padding: 0 2em 0.1em 2em ;
- }
-
- #main > .inner > section {
- padding: 3em 0 1em 0 ;
- }
-
- }
-
-/* Sidebar */
-
- #search form {
- text-decoration: none;
- position: relative;
- }
-
- #search form:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- #search form:before {
- -moz-transform: scaleX(-1);
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- color: #7f888f;
- content: '\f002';
- cursor: default;
- display: block;
- font-size: 1.5em;
- height: 2em;
- line-height: 2em;
- opacity: 0.325;
- position: absolute;
- right: 0;
- text-align: center;
- top: 0;
- width: 2em;
- }
-
- #search form input[type="text"] {
- padding-right: 2.75em;
- }
-
- #sidebar {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-shrink: 0;
- flex-shrink: 0;
- -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
- -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
- -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
- transition: margin-left 0.5s ease, box-shadow 0.5s ease;
- background-color: #f5f6f7;
- font-size: 0.9em;
- position: relative;
- width: 26em;
- }
-
- #sidebar h2 {
- font-size: 1.3888888889em;
- }
-
- #sidebar > .inner {
- padding: 2.2222222222em 2.2222222222em 2.4444444444em 2.2222222222em ;
- position: relative;
- width: 26em;
- }
-
- #sidebar > .inner > * {
- border-bottom: solid 2px rgba(210, 215, 217, 0.75);
- margin: 0 0 3.5em 0;
- padding: 0 0 3.5em 0;
- }
-
- #sidebar > .inner > * > :last-child {
- margin-bottom: 0;
- }
-
- #sidebar > .inner > *:last-child {
- border-bottom: 0;
- margin-bottom: 0;
- padding-bottom: 0;
- }
-
- #sidebar > .inner > .alt {
- background-color: #eff1f2;
- border-bottom: 0;
- margin: -2.2222222222em 0 4.4444444444em -2.2222222222em;
- padding: 2.2222222222em;
- width: calc(100% + 4.4444444444em);
- }
-
- #sidebar .toggle {
- text-decoration: none;
- -moz-transition: left 0.5s ease;
- -webkit-transition: left 0.5s ease;
- -ms-transition: left 0.5s ease;
- transition: left 0.5s ease;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- border: 0;
- display: block;
- height: 7.5em;
- left: 26em;
- line-height: 7.5em;
- outline: 0;
- overflow: hidden;
- position: absolute;
- text-align: center;
- text-indent: 7.5em;
- top: 0;
- width: 6em;
- z-index: 10000;
- }
-
- #sidebar .toggle:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- #sidebar .toggle:before {
- content: '\f0c9';
- font-size: 2rem;
- height: inherit;
- left: 0;
- line-height: inherit;
- position: absolute;
- text-indent: 0;
- top: 0;
- width: inherit;
- }
-
- #sidebar.inactive {
- margin-left: -26em;
- }
-
- @media screen and (max-width: 1680px) {
-
- #sidebar {
- width: 24em;
- }
-
- #sidebar > .inner {
- padding: 1.6666666667em 1.6666666667em 1.3333333333em 1.6666666667em ;
- width: 24em;
- }
-
- #sidebar > .inner > .alt {
- margin: -1.6666666667em 0 3.3333333333em -1.6666666667em;
- padding: 1.6666666667em;
- width: calc(100% + 3.3333333333em);
- }
-
- #sidebar .toggle {
- height: 6.25em;
- left: 24em;
- line-height: 6.25em;
- text-indent: 5em;
- width: 5em;
- }
-
- #sidebar .toggle:before {
- font-size: 1.5rem;
- }
-
- #sidebar.inactive {
- margin-left: -24em;
- }
-
- }
-
- @media screen and (max-width: 1280px) {
-
- #sidebar {
- box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- z-index: 10000;
- }
-
- #sidebar.inactive {
- box-shadow: none;
- }
-
- #sidebar > .inner {
- -webkit-overflow-scrolling: touch;
- height: 100%;
- left: 0;
- overflow-x: hidden;
- overflow-y: auto;
- position: absolute;
- top: 0;
- }
-
- #sidebar > .inner:after {
- content: '';
- display: block;
- height: 4em;
- width: 100%;
- }
-
- #sidebar .toggle {
- text-indent: 6em;
- width: 6em;
- }
-
- #sidebar .toggle:before {
- font-size: 1.5rem;
- margin-left: -0.4375em;
- }
-
- body.is-preload #sidebar {
- display: none;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- #sidebar .toggle {
- text-indent: 7.25em;
- width: 7.25em;
- }
-
- #sidebar .toggle:before {
- color: #7f888f;
- margin-left: -0.0625em;
- margin-top: -0.25em;
- font-size: 1.1rem;
- z-index: 1;
- }
-
- #sidebar .toggle:after {
- background: rgba(222, 225, 226, 0.75);
- border-radius: 0.375em;
- content: '';
- height: 3.5em;
- left: 1em;
- position: absolute;
- top: 1em;
- width: 5em;
- }
-
- }
-
-/* Header */
-
- #header {
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- border-bottom: solid 5px #f56a6a;
- padding: 6em 0 1em 0;
- position: relative;
- }
-
- #header > * {
- -moz-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin-bottom: 0;
- }
-
- #header .logo {
- border-bottom: 0;
- color: inherit;
- font-family: "Roboto Slab", serif;
- font-size: 1.125em;
- }
-
- #header .icons {
- text-align: right;
- }
-
- @media screen and (max-width: 1680px) {
-
- #header {
- padding-top: 5em;
- }
-
- }
-
- @media screen and (max-width: 736px) {
-
- #header {
- padding-top: 6.5em;
- }
-
- #header .logo {
- font-size: 1.25em;
- margin: 0;
- }
-
- #header .icons {
- height: 5em;
- line-height: 5em;
- position: absolute;
- right: -0.5em;
- top: 0;
- }
-
- }
-
-/* Banner */
-
- #banner {
- padding: 6em 0 4em 0 ;
- display: -moz-flex;
- display: -webkit-flex;
- display: -ms-flex;
- display: flex;
- }
-
- #banner h1 {
- margin-top: -0.125em;
- }
-
- #banner .content {
- -moz-flex-grow: 1;
- -webkit-flex-grow: 1;
- -ms-flex-grow: 1;
- flex-grow: 1;
- -moz-flex-shrink: 1;
- -webkit-flex-shrink: 1;
- -ms-flex-shrink: 1;
- flex-shrink: 1;
- width: 50%;
- }
-
- #banner .image {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-shrink: 0;
- flex-shrink: 0;
- display: block;
- margin: 0 0 2em 4em;
- width: 50%;
- }
-
- #banner .image img {
- height: 100%;
- -moz-object-fit: cover;
- -webkit-object-fit: cover;
- -ms-object-fit: cover;
- object-fit: cover;
- -moz-object-position: center;
- -webkit-object-position: center;
- -ms-object-position: center;
- object-position: center;
- width: 100%;
- }
-
- @media screen and (orientation: portrait) {
-
- #banner {
- -moz-flex-direction: column-reverse;
- -webkit-flex-direction: column-reverse;
- -ms-flex-direction: column-reverse;
- flex-direction: column-reverse;
- }
-
- #banner h1 br {
- display: none;
- }
-
- #banner .content {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-shrink: 0;
- flex-shrink: 0;
- width: 100%;
- }
-
- #banner .image {
- -moz-flex-grow: 0;
- -webkit-flex-grow: 0;
- -ms-flex-grow: 0;
- flex-grow: 0;
- -moz-flex-shrink: 0;
- -webkit-flex-shrink: 0;
- -ms-flex-shrink: 0;
- flex-shrink: 0;
- margin: 0 0 4em 0;
- height: 25em;
- max-height: 50vh;
- min-height: 18em;
- width: 100%;
- }
-
- }
-
- @media screen and (orientation: portrait) and (max-width: 480px) {
-
- #banner .image {
- max-height: 35vh;
- }
-
- }
-
-/* Footer */
-
- #footer .copyright {
- color: #9fa3a6;
- font-size: 0.9em;
- }
-
- #footer .copyright a {
- color: inherit;
- }
-
-/* Menu */
-
- #menu ul {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- color: #3d4449;
- font-family: "Roboto Slab", serif;
- font-family: 400;
- letter-spacing: 0.075em;
- list-style: none;
- margin-bottom: 0;
- padding: 0;
- text-transform: uppercase;
- }
-
- #menu ul a, #menu ul span {
- border-bottom: 0;
- color: inherit;
- cursor: pointer;
- display: block;
- font-size: 0.9em;
- padding: 0.625em 0;
- }
-
- #menu ul a:hover, #menu ul span:hover {
- color: #f56a6a;
- }
-
- #menu ul a.opener, #menu ul span.opener {
- -moz-transition: color 0.2s ease-in-out;
- -webkit-transition: color 0.2s ease-in-out;
- -ms-transition: color 0.2s ease-in-out;
- transition: color 0.2s ease-in-out;
- text-decoration: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- position: relative;
- }
-
- #menu ul a.opener:before, #menu ul span.opener:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-transform: none !important;
- }
-
- #menu ul a.opener:before, #menu ul span.opener:before {
- -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
- -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
- -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
- transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
- color: #9fa3a6;
- content: '\f078';
- position: absolute;
- right: 0;
- }
-
- #menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
- color: #f56a6a;
- }
-
- #menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
- display: block;
- }
-
- #menu ul a.opener.active:before, #menu ul span.opener.active:before {
- -moz-transform: rotate(-180deg);
- -webkit-transform: rotate(-180deg);
- -ms-transform: rotate(-180deg);
- transform: rotate(-180deg);
- }
-
- #menu > ul > li {
- border-top: solid 1px rgba(210, 215, 217, 0.75);
- margin: 0.5em 0 0 0;
- padding: 0.5em 0 0 0;
- }
-
- #menu > ul > li > ul {
- color: #9fa3a6;
- display: none;
- margin: 0.5em 0 1.5em 0;
- padding-left: 1em;
- }
-
- #menu > ul > li > ul a, #menu > ul > li > ul span {
- font-size: 0.8em;
- }
-
- #menu > ul > li > ul > li {
- margin: 0.125em 0 0 0;
- padding: 0.125em 0 0 0;
- }
-
- #menu > ul > li:first-child {
- border-top: 0;
- margin-top: 0;
- padding-top: 0;
- }
\ No newline at end of file
+/*# sourceMappingURL=main.css.map */
--- /dev/null
+// Main
+// --------------------------------------------
+
+#header .logo {
+ color: #3d4449;
+ font-weight: bold;
+}
+
+#header .logo.image {
+ padding: 0;
+ border: none;
+ display: inline-flex;
+ height: 28px;
+
+ @include breakpoint('<=small') {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ }
+}
+
+#header .logo.image img {
+ height: 28px;
+ transform: none !important;
+}
+
+@include breakpoint('<=small') {
+ #sidebar:not(.inactive) .toggle:before {
+ color: #fff;
+ }
+
+ #sidebar:not(.inactive) .toggle:after {
+ background: #f56a6a;
+ }
+}
+
+#banner {
+ border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+}
+
+
+.content {
+ max-width: 700px;
+ margin: 0 auto;
+}
+
+// Pagination
+// --------------------------------------------
+
+// Couple of alignment fixes cause we're not
+// using page numbers, just prev/next
+.pagination {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 3rem 0;
+ border-top: solid 2px rgba(210, 215, 217, 0.75);
+}
+
+
+// Tag Archive
+// --------------------------------------------
+
+.tag-header {
+ padding: 5em 0 2em 0;
+ border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+ text-align: center;
+}
+
+
+// Author Archive
+// --------------------------------------------
+
+.author-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4em 0 3em 0;
+ border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+ text-align: center;
+
+}
+
+.author-profile-image {
+ flex-shrink: 0;
+ margin: 0 0 15px 0;
+ width: 100px;
+ height: 100px;
+ box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
+ display: block;
+ background: #222;
+ border-radius: 100%;
+
+ object-fit: cover;
+}
+
+.author-header h1 {
+ margin-bottom: 0.5rem;
+}
+
+.author-meta {
+ display: flex;
+ align-items: center;
+}
+
+.author-meta .icon,
+.author-meta .bull {
+ padding: 5px 10px;
+}
+
+.author-location:before {
+ margin-right: 10px;
+}
+
+// Author Box
+// --------------------------------------------
+
+.post-footer {
+ margin: 4rem auto 0;
+ max-width: 700px;
+}
+
+.authors {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin: 0 -40px;
+}
+
+.author-box {
+ flex: 1 1 300px;
+ display: inline-flex;
+ align-items: flex-start;
+ padding: 5px 20px;
+ margin: 0 20px 20px;
+ border: none;
+}
+
+.author-box:hover {
+ color: #212931 !important;
+}
+
+.author-box:hover .author-box-name {
+ color: #18bfef;
+ transition: color 0.2s ease;
+}
+
+.author-box .author-profile-image {
+ height: 60px;
+ width: 60px;
+ margin-right: 20px;
+}
+
+.author-box-content {
+ display: flex;
+ flex-direction: column;
+}
+
+.author-box-label {
+ font-family: _font(family-heading);
+ font-size: 0.7rem;
+ line-height: 1em;
+ font-weight: 300;
+ text-transform: uppercase;
+ color: #999;
+}
+
+.author-box-name {
+ margin: 3px 0;
+ font-size: 1.3rem;
+ line-height: 1.2em;
+ transition: color 0.5s ease;
+}
+
+.author-box p {
+ margin: 0;
+ font-size: 0.9rem;
+ line-height: 1.5em;
+}
+
+.kg-image {
+ max-width: 100%;
+}
+
+// Content
+// --------------------------------------------
+
+.kg-card {
+ margin: 0 0 2rem 0;
+}
+
+.kg-embed-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 100%;
+}
+
+.kg-image {
+ max-width: 100%;
+}
+
+.kg-card figcaption {
+ font-size: 0.8rem;
+ line-height: 1.4em;
+ text-align: center;
+}
+
+.kg-width-wide {
+ position: relative;
+ margin-left: -6rem;
+ margin-right: -6rem;
+ width: calc(100% + 12rem);
+
+ @include breakpoint('<=large') {
+ margin-left: -4rem;
+ margin-right: -4rem;
+ width: calc(100% + 8rem);
+ }
+ @include breakpoint('<=medium') {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ width: calc(100% + 4rem);
+ }
+ @include breakpoint('<=small') {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ }
+}
+
+.kg-width-full {
+ position: relative;
+ margin-left: -14.1rem;
+ margin-right: -14.1rem;
+ width: calc(100% + 28.2rem);
+
+ @include breakpoint('<=large') {
+ margin-left: -8rem;
+ margin-right: -8rem;
+ width: calc(100% + 16rem);
+ }
+ @include breakpoint('<=medium') {
+ margin-left: -4rem;
+ margin-right: -4rem;
+ width: calc(100% + 8rem);
+ }
+ @include breakpoint('<=small') {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ width: calc(100% + 4rem);
+ }
+}
+
+.kg-gallery-container {
+ display: flex;
+ flex-direction: column;
+ margin-left: -6rem;
+ margin-right: -6rem;
+ width: calc(100% + 12rem);
+
+ @include breakpoint('<=large') {
+ margin-left: -4rem;
+ margin-right: -4rem;
+ width: calc(100% + 8rem);
+ }
+ @include breakpoint('<=medium') {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ width: calc(100% + 4rem);
+ }
+ @include breakpoint('<=small') {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ }
+}
+
+.kg-gallery-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.kg-gallery-image img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+ margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+ margin: 0 0 0 0.75em;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+ margin: -2.25em 0 3em;
+}
+
+// Error Pages
+// --------------------------------------------
+
+.error-page {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.error-wrapper {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ padding-bottom: 8rem !important;
+ text-align: center;
+}
+
+.error-code {
+ margin: 0;
+}
-@import 'libs/vars';\r
-@import 'libs/functions';\r
-@import 'libs/mixins';\r
-@import 'libs/vendor';\r
-@import 'libs/breakpoints';\r
-@import 'libs/html-grid';\r
-@import 'font-awesome.min.css';\r
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700');\r
-\r
-/*\r
- Editorial by HTML5 UP\r
- html5up.net | @ajlkn\r
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
-*/\r
-\r
-// Breakpoints.\r
-\r
- @include breakpoints((\r
- xlarge: ( 1281px, 1680px ),\r
- large: ( 981px, 1280px ),\r
- medium: ( 737px, 980px ),\r
- small: ( 481px, 736px ),\r
- xsmall: ( 361px, 480px ),\r
- xxsmall: ( null, 360px ),\r
- xlarge-to-max: '(min-width: 1681px)',\r
- small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)'\r
- ));\r
-\r
-// Base.\r
-\r
- @import 'base/reset';\r
- @import 'base/page';\r
- @import 'base/typography';\r
-\r
-// Component.\r
-\r
- @import 'components/row';\r
- @import 'components/section';\r
- @import 'components/form';\r
- @import 'components/box';\r
- @import 'components/icon';\r
- @import 'components/image';\r
- @import 'components/list';\r
- @import 'components/actions';\r
- @import 'components/icons';\r
- @import 'components/contact';\r
- @import 'components/pagination';\r
- @import 'components/table';\r
- @import 'components/button';\r
- @import 'components/mini-posts';\r
- @import 'components/features';\r
- @import 'components/posts';\r
-\r
-// Layout.\r
-\r
- @import 'layout/wrapper';\r
- @import 'layout/main';\r
- @import 'layout/sidebar';\r
- @import 'layout/header';\r
- @import 'layout/banner';\r
- @import 'layout/footer';\r
- @import 'layout/menu';
\ No newline at end of file
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+@import 'font-awesome.min.css';
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700');
+
+/*
+ Editorial by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+ @include breakpoints((
+ xlarge: ( 1281px, 1680px ),
+ large: ( 981px, 1280px ),
+ medium: ( 737px, 980px ),
+ small: ( 481px, 736px ),
+ xsmall: ( 361px, 480px ),
+ xxsmall: ( null, 360px ),
+ xlarge-to-max: '(min-width: 1681px)',
+ small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)'
+ ));
+
+// Base.
+
+ @import 'base/reset';
+ @import 'base/page';
+ @import 'base/typography';
+
+// Component.
+
+ @import 'components/row';
+ @import 'components/section';
+ @import 'components/form';
+ @import 'components/box';
+ @import 'components/icon';
+ @import 'components/image';
+ @import 'components/list';
+ @import 'components/actions';
+ @import 'components/icons';
+ @import 'components/contact';
+ @import 'components/pagination';
+ @import 'components/table';
+ @import 'components/button';
+ @import 'components/mini-posts';
+ @import 'components/features';
+ @import 'components/posts';
+
+// Layout.
+
+ @import 'layout/wrapper';
+ @import 'layout/main';
+ @import 'layout/sidebar';
+ @import 'layout/header';
+ @import 'layout/banner';
+ @import 'layout/footer';
+ @import 'layout/menu';
+ @import 'layout/ghost';
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
-{{!-- Main --}}
-<main id="main">
-
- {{!-- Author info --}}
- {{#author}}
- <header class="author-header">
- {{#if profile_image}}
- <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
- {{/if}}
- <h1><a href="{{url}}">{{name}}</a></h1>
- {{#if bio}}
- <p class="content">{{bio}}</p>
+{{!-- Author info --}}
+{{#author}}
+<header class="author-header">
+ {{#if profile_image}}
+ <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+ {{/if}}
+ <h1><a href="{{url}}">{{name}}</a></h1>
+ {{#if bio}}
+ <p class="content">{{bio}}</p>
+ {{/if}}
+ <div class="author-meta">
+ {{#if location}}
+ <div class="author-location icon fa-map-pin">{{location}} <span class="bull">•</span></div>
{{/if}}
- <div class="author-meta">
- {{#if location}}
- <div class="author-location icon fa-map-pin">{{location}} <span class="bull">•</span></div>
- {{/if}}
- <div class="author-stats">
- {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">•</span>
- </div>
- {{#if website}}
- <a href="{{url}}" class="icon fa-globe" title="Website"><span class="label">Website</span></a>
- {{/if}}
- {{#if twitter}}
- <a href="{{twitter_url}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a>
- {{/if}}
- {{#if facebook}}
- <a href="{{facebook_url}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a>
- {{/if}}
- <a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" class="icon fa-rss" target="_blank" rel="noopener"><span class="label" title="RSS">RSS</span></a>
+ <div class="author-stats">
+ {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">•</span>
</div>
- </header>
- {{/author}}
+ {{#if website}}
+ <a href="{{url}}" class="icon fa-globe" title="Website"><span class="label">Website</span></a>
+ {{/if}}
+ {{#if twitter}}
+ <a href="{{twitter_url}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a>
+ {{/if}}
+ {{#if facebook}}
+ <a href="{{facebook_url}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a>
+ {{/if}}
+ <a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" class="icon fa-rss" target="_blank" rel="noopener"><span class="label" title="RSS">RSS</span></a>
+ </div>
+</header>
+{{/author}}
- {{!-- Posts --}}
- <section class="posts">
+{{!-- Posts --}}
+<section>
+ <section class="posts">
{{#foreach posts}}
<article>
- <header>
- <span class="date">{{date format="MMM D, YYYY"}}</span>
- <h2><a href="{{url}}">{{title}}</a></h2>
- </header>
{{#if feature_image}}
<a href="{{url}}" class="image fit"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
{{/if}}
+ <h3><a href="{{url}}">{{title}}</a></h3>
<p>{{excerpt words="33"}}</p>
<ul class="actions special">
<li><a href="{{url}}" class="button">Full Story</a></li>
</ul>
</article>
{{/foreach}}
-
</section>
- {{!-- Pagination --}}
- {{pagination}}
+</section>
- </main>
\ No newline at end of file
+{{!-- Pagination --}}
+{{pagination}}
\ No newline at end of file
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "main/css/main.css"}}" />
- <noscript><link rel="stylesheet" href="{{asset "main/css/noscript.css"}}" /></noscript>
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
- {{#if @blog.cover_image}}
- <style>#wrapper>.bg {background-image: url({{asset "images/overlay.png"}}),linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url("{{img_url @blog.cover_image}}") }</style>
- {{/if}}
-
</head>
<body class="is-preload {{body_class}}">
- <div id="wrapper" {{#is "home"}}class="fade-in"{{/is}}>
-
- {{!-- Intro --}}
- {{#is "home"}}
- <div id="intro">
- <h1>{{@blog.title}}</h1>
- <p>{{@blog.description}}</p>
- <ul class="actions">
- <li><a href="#header" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
- </ul>
- </div>
- {{/is}}
-
- {{!-- Header --}}
- <header id="header">
- {{#if @blog.logo}}
- <a href="{{@blog.url}}" class="logo image"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
- {{else}}
- <a href="{{@blog.url}}" class="logo">{{@blog.title}}</a>
- {{/if}}
- </header>
-
- {{!-- Nav --}}
- {{#if @blog.navigation}}
- {{navigation}}
- {{/if}}
-
- {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
- {{{body}}}
-
- {{!-- The footer at the very bottom of the screen --}}
- <div id="copyright">
- <ul>
- <li>© {{@blog.title}}</li>
- <li>Design by <a href="https://html5up.net">HTML5 UP</a></li>
- <li>Published with <a href="https://ghost.org">Ghost</a></li>
- </ul>
- </div>
+ <div id="wrapper">
+ <main id="main">
+ <div class="inner">
+
+ {{!-- Header --}}
+ <header id="header">
+ {{#if @blog.logo}}
+ <a href="{{@blog.url}}" class="logo image"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+ {{else}}
+ <a href="{{@blog.url}}" class="logo">{{@blog.title}}</a>
+ {{/if}}
+ <ul class="icons">
+ {{#if @blog.twitter}}
+ <li><a href="{{twitter_url @blog.facebook}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a></li>
+ {{/if}}
+ {{#if @blog.facebook}}
+ <li><a href="{{facebook_url @blog.facebook}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a></li>
+ {{/if}}
+ <li><a href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" class="icon fa-rss" target="_blank" rel="noopener"><span class="label" title="RSS">RSS</span></a></li>
+ </ul>
+ </header>
+
+ {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+ {{{body}}}
+
+ </div>
+ </main>
+
+ {{!-- The left sidebar - partials/sidebar.hbs --}}
+ {{> sidebar}}
</div>
-
{{!-- Theme Scripts --}}
<script src="{{asset "main/js/jquery.min.js"}}"></script>
- <script src="{{asset "main/js/jquery.scrollex.min.js"}}"></script>
- <script src="{{asset "main/js/jquery.scrolly.min.js"}}"></script>
<script src="{{asset "main/js/browser.min.js"}}"></script>
<script src="{{asset "main/js/breakpoints.min.js"}}"></script>
<script src="{{asset "main/js/util.js"}}"></script>
+++ /dev/null
-{{!--
-This error template is used for all 404 errors, which might occur on your site.
-It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
---}}
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <title>{{meta_title}}</title>
- <meta name="HandheldFriendly" content="True" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
-</head>
-<body class="error-template">
- <div class="site-wrapper">
-
- <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
- <div class="inner">
- <nav class="site-nav-center">
- {{#if @blog.logo}}
- <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
- {{else}}
- <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
- {{/if}}
- </nav>
- </div>
- </header>
-
- <main id="site-main" class="site-main outer">
- <div class="inner">
-
- <section class="error-message">
- <h1 class="error-code">{{code}}</h1>
- <p class="error-description">{{message}}</p>
- <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
- </section>
- </div>
- </main>
-
- {{#get "posts" limit="3"}}
- <aside class="outer">
- <div class="inner">
- <div class="post-feed">
- {{#foreach posts}}
- {{> "post-card"}}
- {{/foreach}}
- </div>
- </div>
- </aside>
- {{/get}}
-
- </div>
-</body>
-</html>
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
+ <link rel="stylesheet" type="text/css" href="{{asset "main/css/main.css"}}" />
</head>
<body class="error-template">
- <div class="site-wrapper">
+ <div id="wrapper">
+ <main id="main">
+ <div class="error-page inner">
- <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
- <div class="inner">
- <nav class="site-nav-center">
+ <header id="header">
{{#if @blog.logo}}
- <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+ <a href="{{@blog.url}}" class="logo image"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{else}}
- <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+ <a href="{{@blog.url}}" class="logo">{{@blog.title}}</a>
{{/if}}
- </nav>
- </div>
- </header>
+ <ul class="icons">
+ {{#if @blog.twitter}}
+ <li><a href="{{twitter_url @blog.facebook}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a></li>
+ {{/if}}
+ {{#if @blog.facebook}}
+ <li><a href="{{facebook_url @blog.facebook}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a></li>
+ {{/if}}
+ <li><a href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" class="icon fa-rss" target="_blank" rel="noopener"><span
+ class="label" title="RSS">RSS</span></a></li>
+ </ul>
+ </header>
- <main id="site-main" class="site-main outer">
- <div class="inner">
+ <section class="error-wrapper">
- <section class="error-message">
- <h1 class="error-code">{{code}}</h1>
- <p class="error-description">{{message}}</p>
- <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
- </section>
+ <section class="error-message">
+ <h1 class="error-code">{{code}}</h1>
+ <p class="error-description">{{message}}</p>
+ <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+ </section>
- {{#if errorDetails}}
- <section class="error-stack">
- <h3>Theme errors</h3>
- <ul class="error-stack-list">
- {{#each errorDetails}}
- <li>
- <em class="error-stack-function">{{{rule}}}</em>
+ {{#if errorDetails}}
+ <section class="error-stack">
+ <h3>Theme errors</h3>
+ <ul class="error-stack-list">
+ {{#each errorDetails}}
+ <li>
+ <em class="error-stack-function">{{{rule}}}</em>
- {{#each failures}}
- <p><span class="error-stack-file">Ref: {{ref}}</span></p>
- <p><span class="error-stack-file">Message: {{message}}</span></p>
- {{/each}}
- </li>
- {{/each}}
- </ul>
- </section>
- {{/if}}
+ {{#each failures}}
+ <p><span class="error-stack-file">Ref: {{ref}}</span></p>
+ <p><span class="error-stack-file">Message: {{message}}</span></p>
+ {{/each}}
+ </li>
+ {{/each}}
+ </ul>
+ </section>
+ {{/if}}
+ </section>
</div>
</main>
</div>
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
-{{!-- Main --}}
-<main id="main">
-
- {{!-- Featured Post --}}
- {{#get "posts" filter="featured:true" limit="1" as |featured_post|}}
- {{#foreach featured_post}}
- <article class="post featured">
- <header class="major">
- <span class="date">{{date format="MMM D, YYYY"}}</span>
- <h2><a href="{{url}}">{{title}}</a></h2>
- <p>{{excerpt words="44"}}</p>
+
+{{!-- Featured Post --}}
+{{#is "home"}}
+{{#get "posts" filter="featured:true" limit="1" as |featured_post|}}
+ {{#foreach featured_post}}
+ <article id="banner">
+ <div class="content">
+ <header>
+ <h1><a href="{{url}}">{{title}}</a></h1>
+ {{#if custom_excerpt}}<p>{{custom_excerpt}}</p>{{/if}}
</header>
- {{#if feature_image}}
- <a href="{{url}}" class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
- {{/if}}
- <ul class="actions special">
- <li><a href="{{url}}" class="button large">Full Story</a></li>
+ {{content words="42"}}
+ <ul class="actions">
+ <li><a href="{{url}}" class="button big">Learn More</a></li>
</ul>
- </article>
- {{/foreach}}
- {{/get}}
+ </div>
+ {{#if feature_image}}
+ <a href="{{url}}" class="image object">
+ <img src="{{img_url feature_image}}" alt="{{title}}" />
+ </a>
+ {{/if}}
+ </article>
+ {{/foreach}}
+{{/get}}
+{{/is}}
- {{!-- Posts --}}
- <section class="posts">
+{{!-- Posts --}}
+<section>
+
+ <header class="major">
+ <h2>Recent posts</h2>
+ </header>
+ <section class="posts">
{{#foreach posts}}
<article>
- <header>
- <span class="date">{{date format="MMM D, YYYY"}}</span>
- <h2><a href="{{url}}">{{title}}</a></h2>
- </header>
{{#if feature_image}}
<a href="{{url}}" class="image fit"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
{{/if}}
+ <h3><a href="{{url}}">{{title}}</a></h3>
<p>{{excerpt words="33"}}</p>
<ul class="actions special">
<li><a href="{{url}}" class="button">Full Story</a></li>
</ul>
</article>
{{/foreach}}
-
</section>
- {{!-- Pagination --}}
- {{pagination}}
+</section>
+
+{{!-- Pagination --}}
+{{pagination}}
-</main>
\ No newline at end of file
"node-sass": "^4.10.0"
},
"config": {
- "posts_per_page": 12
+ "posts_per_page": 6
}
}
{{#post}}
{{!-- Everything inside the #post tags pulls data from the page --}}
-<main id="main">
- <section class="post">
- <header class="major">
- <h1>{{title}}</h1>
- </header>
+<section>
- {{#if feature_image}}
- <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
- {{/if}}
+ <header class="main content">
+ <h1>{{title}}</h1>
+ </header>
- <div class="content">
- {{content}}
- </div>
+ {{#if feature_image}}
+ <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
+ {{/if}}
+
+ <div class="content">
+ {{content}}
+ </div>
+
+</section>
- </section>
-</main>
{{/post}}
\ No newline at end of file
+++ /dev/null
-<section class="post-full-authors">
-
- <div class="post-full-authors-content">
- <p>This post was a collaboration between</p>
- <p>{{authors}}</p>
- </div>
-
- <ul class="author-list">
- {{#foreach authors}}
- <li class="author-list-item">
-
- <div class="author-card">
- <div class="basic-info">
- {{#if profile_image}}
- <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
- {{else}}
- <div class="author-profile-image">{{> "icons/avatar"}}</div>
- {{/if}}
- <h2>{{name}}</h2>
- </div>
- <div class="bio">
- {{#if bio}}
- <p>{{bio}}</p>
- <p><a href="{{url}}">More posts</a> by {{name}}.</p>
- {{else}}
- <p>Read <a href="{{url}}">more posts</a> by this author.</p>
- {{/if}}
- </div>
- </div>
-
- {{#if profile_image}}
- <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
- {{else}}
- <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
- {{/if}}
-
- </li>
- {{/foreach}}
-
- </ul>
-
-</section>
-
-{{#contentFor "scripts"}}
-<script>
-// Adds delay to author card dropups to disappear. This gives enough
-// time for the user to interact with the author card while they move
-// the mouse from the avatar to the card. Also makes space for the
-// interacted avatar.
-$(document).ready(function () {
-
- var hoverTimeout;
-
- $('.author-list-item').hover(function(){
- var $this = $(this);
-
- clearTimeout(hoverTimeout);
-
- $('.author-card').removeClass('hovered');
- $(this).children('.author-card').addClass('hovered');
-
- }, function() {
- var $this = $(this);
-
- hoverTimeout = setTimeout(function() {
- $this.children('.author-card').removeClass('hovered');
- }, 800);
- });
-
-});
-</script>
-{{/contentFor}}
+++ /dev/null
-{{!-- Everything inside the #author tags pulls data from the author --}}
-{{#primary_author}}
-
-<section class="author-card">
- {{#if profile_image}}
- <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
- {{else}}
- <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
- {{/if}}
- <section class="author-card-content">
- <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
- {{#if bio}}
- <p>{{bio}}</p>
- {{else}}
- <p>Read <a href="{{url}}">more posts</a> by this author.</p>
- {{/if}}
- </section>
-</section>
-<div class="post-full-footer-right">
- <a class="author-card-button" href="{{url}}">Read More</a>
-</div>
-
-{{/primary_author}}
-<nav id="nav">
+<nav id="menu">
+ <header class="major">
+ <h2>Menu</h2>
+ </header>
<ul class="links">
{{#foreach navigation}}
<li class="nav-{{slug}} {{#if current}}active{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
{{/foreach}}
</ul>
- <ul class="icons">
- {{#if @blog.twitter}}
- <li><a href="{{twitter_url @blog.facebook}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a></li>
- {{/if}}
- {{#if @blog.facebook}}
- <li><a href="{{facebook_url @blog.facebook}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a></li>
- {{/if}}
- <li><a href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" class="icon fa-rss" target="_blank" rel="noopener"><span class="label" title="RSS">RSS</span></a></li>
- </ul>
</nav>
\ No newline at end of file
-{{#is "paged"}}
<footer>
<nav class="pagination" role="navigation">
{{#if prev}}
<a class="page previous newer-posts" href="{{page_url prev}}">Newer Posts</a>
- {{else}}
- <div class="spacer"></div>
{{/if}}
<span class="page-number">Page {{page}} of {{pages}}</span>
{{#if next}}
<a class="page next older-posts" href="{{page_url next}}">Older Posts</a>
- {{else}}
- <div class="spacer"></div>
{{/if}}
</nav>
-</footer>
-{{/is}}
\ No newline at end of file
+</footer>
\ No newline at end of file
--- /dev/null
+<div id="sidebar">
+ <div class="inner">
+
+ {{!-- Nav - partials/navigation.hbs --}}
+ {{#if @blog.navigation}}
+ {{navigation}}
+ {{/if}}
+
+ {{!-- Recent posts --}}
+ <section>
+ <header class="major">
+ <h2>Recent Posts</h2>
+ </header>
+ <div class="mini-posts">
+ {{!-- We're just grabbing the 3 latest posts here but you can change
+ this to filter for a specific tag or order depending on what you want.
+ More info: https://docs.ghost.org/api/handlebars-themes/helpers/get/ --}}
+ {{#get "posts" limit="3" as |mini_post|}}
+ {{#foreach mini_post}}
+ <article>
+ <h3><a href="{{url}}">{{title}}</a></h3>
+ <p>{{excerpt words="15"}}</p>
+ </article>
+ {{/foreach}}
+ {{/get}}
+ </div>
+ </section>
+
+ {{!-- Contact --}}
+ {{#get "posts" slug="contact"as |contact|}}
+ {{#if contact}}{{#foreach contact}}
+ <section>
+ <header class="major">
+ <h2>{{title}}</h2>
+ </header>
+ {{content}}
+ </section>
+ {{/foreach}}{{/if}}
+ {{/get}}
+
+ {{!-- Footer --}}
+ <footer id="footer">
+ <p class="copyright">© {{@blog.title}} - All rights reserved<br>
+ Design: <a href="https://html5up.net" target="_blank" rel="noopener">HTML5 UP</a>, Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a></p>
+ </footer>
+
+ </div>
+</div>
\ No newline at end of file
{{#post}}
{{!-- Everything inside the #post tags pulls data from the post --}}
+<section>
-<main id="main">
-
- <section class="post">
-
- <header class="major">
- <span class="date">{{date format="MMMM D, YYYY"}}</span>
- <h1>{{title}}</h1>
- {{#if custom_excerpt}}
- <p class="content">{{custom_excerpt}}</p>
- {{/if}}
- </header>
-
- {{#if feature_image}}
- <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
+ <header class="main content">
+ <span class="date">{{date format="MMMM D, YYYY"}}</span>
+ <h1>{{title}}</h1>
+ {{#if custom_excerpt}}
+ <p class="content">{{custom_excerpt}}</p>
{{/if}}
+ </header>
- <div class="content">
- {{content}}
- </div>
+ {{#if feature_image}}
+ <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
+ {{/if}}
- {{!-- Email subscribe form at the bottom of the page --}}
- {{#if @labs.subscribers}}
- <section class="subscribe-form">
- <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
- <p>Get the latest posts delivered right to your inbox</p>
- {{subscribe_form placeholder="youremail@example.com"}}
- </section>
- {{/if}}
+ <div class="content">
+ {{content}}
+ </div>
- <footer class="post-footer">
+ {{!-- Email subscribe form at the bottom of the page --}}
+ {{#if @labs.subscribers}}
+ <section class="subscribe-form">
+ <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
+ <p>Get the latest posts delivered right to your inbox</p>
+ {{subscribe_form placeholder="youremail@example.com"}}
+ </section>
+ {{/if}}
+
+ <footer class="post-footer">
- <div class="authors">
- {{#foreach authors}}
- <a class="author-box" href="{{url}}">
- {{#if profile_image}}
- <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+ <div class="authors">
+ {{#foreach authors}}
+ <a class="author-box" href="{{url}}">
+ {{#if profile_image}}
+ <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+ {{/if}}
+ <section class="author-box-content">
+ <div class="author-box-label">Author</div>
+ <h5 class="author-box-name">{{name}}</h5>
+ {{#if bio}}
+ <p>{{bio}}</p>
+ {{else}}
+ <p>Read more posts by this author.</p>
{{/if}}
- <section class="author-box-content">
- <div class="author-box-label">Author</div>
- <h5 class="author-box-name">{{name}}</h5>
- {{#if bio}}
- <p>{{bio}}</p>
- {{else}}
- <p>Read more posts by this author.</p>
- {{/if}}
- </section>
- </a>
- {{/foreach}}
- </div>
+ </section>
+ </a>
+ {{/foreach}}
+ </div>
- </footer>
+ </footer>
- {{!--
- <section class="post-full-comments">
- If you want to embed comments, this is a good place to do it!
- </section>
- --}}
+ {{!--
+ <section class="post-full-comments">
+ If you want to embed comments, this is a good place to do it!
</section>
+ --}}
-</main>
-
+</section>
{{/post}}
<script>
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
-{{!-- Main --}}
-<main id="main">
+{{!-- Tag info --}}
+{{#tag}}
+<header class="tag-header">
+ <h1><a href="{{url}}">{{name}}</a></h1>
+ {{#if description}}
+ <p class="content">{{description}}</p>
+ {{else}}
+ <p>A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
+ {{/if}}
+ {{#if feature_image}}
+ <a href="{{url}}" class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
+ {{/if}}
+</header>
+{{/tag}}
- {{!-- Tag info --}}
- {{#tag}}
- <header class="tag-header">
- <h1><a href="{{url}}">{{name}}</a></h1>
- {{#if description}}
- <p class="content">{{description}}</p>
- {{else}}
- <p>A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
- {{/if}}
- {{#if feature_image}}
- <a href="{{url}}" class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
- {{/if}}
- </header>
- {{/tag}}
+{{!-- Posts --}}
+<section>
- {{!-- Posts --}}
<section class="posts">
-
{{#foreach posts}}
<article>
- <header>
- <span class="date">{{date format="MMM D, YYYY"}}</span>
- <h2><a href="{{url}}">{{title}}</a></h2>
- </header>
{{#if feature_image}}
<a href="{{url}}" class="image fit"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
{{/if}}
+ <h3><a href="{{url}}">{{title}}</a></h3>
<p>{{excerpt words="33"}}</p>
<ul class="actions special">
<li><a href="{{url}}" class="button">Full Story</a></li>
</ul>
</article>
{{/foreach}}
-
</section>
- {{!-- Pagination --}}
- {{pagination}}
+</section>
- </main>
\ No newline at end of file
+{{!-- Pagination --}}
+{{pagination}}