In this tutorial, we are going to cover the basics on how to convert a modern elagant looking Html 5 template to a wordpress theme. Creating a theme can be hard for a lot of beginners that why this tutorial is going to cover basic concepts to get a quick wordpress theme running on your browser and enjoy all the plugins that comes with wordpress.
Converting an HTML 5 modern template into a WordPress theme is actually not that difficult. Its a lot of knowing where to copy and paste the codes, with screenshot guides and the codes am pasting below, you’ll learn easier.
Step 1.
Step 2.
Lets start buy adding content to our header.php file, copy the following html code from our template and paste it the header file
-we have to change css file directory with the simple php code <?php bloginfo(‘stylesheet_url’); ?>
[html]<!DOCTYPE HTML>
<!– Retrospect by kedevelopers templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license) –>
<html>
<head>
<title>Retrospect by kedevelopers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!–here, we replace the directory for our css file to match as per wordpress guidelines–>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>"/>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/font-awesome.min.css"></link>
<!—-here, we replace the directory for our css file to match as per wordpress guidelines—->
</head>
<body class="landing">
<!– Header –>
<header id="header" class="alt">
<h1><a href="home">kucsa</a></h1>
<a href="#nav">Menu</a>
</header>
<!– Nav –>
<nav id="nav">
<ul class="links">
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="more">More</a></li>
</ul>
</nav>
[/html]
Step 3.
Next we copy paste the footer code to the footer.php file
Change the directory for our javascript file with the simple php code <?php echo get_template_directory_uri(); ?>
[html] <!– Footer –>
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon fa-facebook">
<span class="label">Facebook</span>
</a></li>
<li><a href="#" class="icon fa-twitter">
<span class="label">Twitter</span>
</a></li>
<li><a href="#" class="icon fa-instagram">
<span class="label">Instagram</span>
</a></li>
<li><a href="#" class="icon fa-linkedin">
<span class="label">LinkedIn</span>
</a></li>
</ul>
<ul class="copyright">
<li>© Untitled.</li>
<li>Images: <a href="http://twitter.com/@_b_e_n_b_e_n_">clubs</a>.</li>
<li>Design: <a href="http://kedevelopers.com">kedevelopers</a>.</li>
</ul>
</div>
</footer>
<!– Scripts –>
<!–Telling wordpress where to find our .js files –>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/skel.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/util.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/assets/js/main.js"></script>
</body>
</html>[/html]
Step 4.
Next copy paste the rest of the code to our front/home page file
Note add the code <?php get_header(); ?> in the beginning of the file to include all header content and <?php get_footer(); ?> for the footer section and replace all the assets directory with the code <?php echo get_template_directory_uri(); ?>
[html]<?php get_header(); ?>
<!– Banner –>
<section id="banner">
<i class="icon fa-diamond"></i>
<h2>wordpress Theme</h2>
steps on creating a modern theme from scrach
by kedevelopers
<ul class="actions">
<li><a href="#" class="button big special">Learn More</a></li>
</ul>
</section>
<!– One –>
<section id="one" class="wrapper style1">
<div class="inner">
<article class="feature left">
<span class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic01.jpg" alt="" /></span>
<div class="content">
<h2>You can place a news article here</h2>
Article’s details should be placed here, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.
<ul class="actions">
<li>
<a href="#" class="button alt">More</a>
</li>
</ul>
</div>
</article>
<article class="feature right">
<span class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic02.jpg" alt="" /></span>
<div class="content">
<h2>You can place another news article here</h2>
rticle’s details should be placed here, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.
<ul class="actions">
<li>
<a href="#" class="button alt">More</a>
</li>
</ul>
</div>
</article>
</div>
</section>
<!– Two –>
<section id="two" class="wrapper special">
<div class="inner">
<header class="major narrow">
<h2>A small gallery</h2>
Clubs meetings,events and modules
</header>
<div class="image-grid">
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic03.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic04.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic05.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic06.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic07.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic08.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic09.jpg" alt="" /></a>
<a href="#" class="image"><img src="<?php echo get_template_directory_uri(); ?>/images/pic10.jpg" alt="" /></a>
</div>
<ul class="actions">
<li><a href="#" class="button big alt">Tempus Aliquam</a></li>
</ul>
</div>
</section>
<!– Three –>
<section id="three" class="wrapper style3 special">
<div class="inner">
<header class="major narrow ">
<h2>Paralax effect</h2>
Ipsum dolor tempus commodo turpis adipiscing Tempor placerat sed amet accumsan
</header>
<ul class="actions">
<li><a href="#" class="button big alt">Magna feugiat</a></li>
</ul>
</div>
</section>
<!– Four –>
<section id="four" class="wrapper style2 special">
<div class="inner">
<header class="major narrow">
<h2>Get in touch</h2>
Ipsum dolor tempus commodo adipiscing
</header>
<form action="#" method="POST">
<div class="container 75%">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u$ 12u$(xsmall)">
<input name="email" placeholder="Email" type="email" />
</div>
<div class="12u$">
<textarea name="message" placeholder="Message" rows="4"></textarea>
</div>
</div>
</div>
<ul class="actions">
<li><input type="submit" class="special" value="Submit" /></li>
<li><input type="reset" class="alt" value="Reset" /></li>
</ul>
</form>
</div>
</section>
<?php get_footer(); ?>[/html]
Step 5.
Next we create the about page , and the template name as shown in the code //Template Name:About, which you have to tell wordpress where it exist, view the youtube video upthere for more info
[html]<?php get_header(); //Template Name:About ?>
<!– Banner –>
<section id="banner">
<i class="icon fa-diamond"></i>
</section>
<!– Main –>
<section id="main" class="wrapper">
<div class="container">
<header class="major special">
<h2>Generic</h2>
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
</header>
<a href="#" class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic11.jpg" alt="" /></a>
Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.
Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat placerat arcu commodo lobortis adipiscing semper ornare pellentesque.
Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet blandit adipiscing arcu ante.
</div>
</section>
<?php get_footer(); ?>[/html]
step 6.
creating the more page is the same as about page, copy and paste the code below
[php]<?php get_header(); //Template Name:more ?>
<!– Banner –>
<section id="banner">
<i class="icon fa-diamond"></i>
</section>
<!– Main –>
<section id="main" class="wrapper">
<div class="container">
<header class="major special">
<h2>Elements</h2>
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
</header>
<!– Text –>
<section>
<h3>Text</h3>
This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { … }</code>. Finally, <a href="#">this is a link</a>.
<hr />
<header>
<h3>Heading with a Subtitle</h3>
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
</header>
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.
<header>
<h4>Heading with a Subtitle</h4>
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
</header>
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.
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<h4>Blockquote</h4>
<blockquote>Fringilla nisl. Donec 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 faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
</blockquote>
<h4>Preformatted</h4>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print ‘Iteration ‘ + i;
deck.shuffle();
i++;
}
print ‘It took ‘ + i + ‘ iterations to sort the deck.’;</code></pre>
</section>
<!– Lists –>
<section>
<h3>Lists</h3>
<div class="row">
<div class="6u 12u$(xsmall)">
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Sagittis adipiscing lorem eleifend.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Sagittis adipiscing lorem eleifend.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ul>
</div>
<div class="6u$ 12u$(xsmall)">
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Etiam vel felis at lorem sed viverra.</li>
<li>Felis enim feugiat dolore viverra.</li>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Etiam vel felis at lorem sed viverra.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
</ul>
</div>
</div>
<h4>Actions</h4>
<ul class="actions">
<li><a href="#" class="button special">Special</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt">Alternate</a></li>
</ul>
<ul class="actions small">
<li><a href="#" class="button special small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
<div class="row">
<div class="3u 6u(small) 12u$(xsmall)">
<ul class="actions vertical">
<li><a href="#" class="button special">Vertical</a></li>
<li><a href="#" class="button">Vertical</a></li>
<li><a href="#" class="button alt">Vertical</a></li>
</ul>
</div>
<div class="3u 6u$(small) 12u$(xsmall)">
<ul class="actions vertical small">
<li><a href="#" class="button special small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
</div>
<div class="3u 6u(small) 12u$(xsmall)">
<ul class="actions vertical">
<li><a href="#" class="button special fit">Fit</a></li>
<li><a href="#" class="button fit">Fit</a></li>
<li><a href="#" class="button alt fit">Fit</a></li>
</ul>
</div>
<div class="3u$ 6u$(small) 12u$(xsmall)">
<ul class="actions vertical small">
<li><a href="#" class="button special small fit">Small</a></li>
<li><a href="#" class="button small fit">Small</a></li>
<li><a href="#" class="button alt small fit">Small</a></li>
</ul>
</div>
</div>
</section>
<!– Table –>
<section>
<h3>Table</h3>
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item 2</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item 3</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item 4</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item 5</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item 2</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item 3</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item 4</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item 5</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<!– Buttons –>
<section>
<h3>Buttons</h3>
<ul class="actions">
<li><a href="#" class="button special">Special</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt">Alternate</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button special big">Big</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
<div class="row">
<div class="6u 12u$(xsmall)">
<ul class="actions fit">
<li><a href="#" class="button fit">Fit</a></li>
<li><a href="#" class="button alt fit">Fit</a></li>
</ul>
</div>
<div class="6u$ 12u$(xsmall)">
<ul class="actions fit small">
<li><a href="#" class="button fit small">Fit + Small</a></li>
<li><a href="#" class="button alt fit small">Fit + Small</a></li>
</ul>
</div>
</div>
<ul class="actions">
<li><a href="#" class="button special icon fa-download">Icon</a></li>
<li><a href="#" class="button icon fa-download">Icon</a></li>
<li><a href="#" class="button alt icon fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button special disabled">Special</span></li>
<li><span class="button disabled">Default</span></li>
<li><span class="button alt disabled">Alternate</span></li>
</ul>
</section>
<!– Form –>
<section>
<h3>Form</h3>
<form method="post" action="#">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="6u$ 12u$(xsmall)">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="12u$">
<div class="select-wrapper">
<select name="category" id="category"><option value="">- Category -</option><option value="1">Manufacturing</option><option value="1">Shipping</option><option value="1">Administration</option><option value="1">Human Resources</option></select>
</div>
</div>
<div class="4u 12u$(xsmall)">
<input type="radio" id="priority-low" name="priority" checked>
<label for="priority-low">Low Priority</label>
</div>
<div class="4u 12u$(xsmall)">
<input type="radio" id="priority-normal" name="priority">
<label for="priority-normal">Normal Priority</label>
</div>
<div class="4u$ 12u$(xsmall)">
<input type="radio" id="priority-high" name="priority">
<label for="priority-high">High Priority</label>
</div>
<div class="6u 12u$(small)">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Email me a copy of this message</label>
</div>
<div class="6u$ 12u$(small)">
<input type="checkbox" id="human" name="human" checked>
<label for="human">I am a human and not a robot</label>
</div>
<div class="12u$">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Send Message" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!– Image –>
<section>
<h3>Image</h3>
<h4>Fit</h4>
<div class="box alt">
<div class="row 50% uniform">
<div class="12u$"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic11.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic03.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic04.jpg" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic05.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic05.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic03.jpg" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic04.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic04.jpg" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic05.jpg" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="<?php echo get_template_directory_uri(); ?>/images/pic03.jpg" alt="" /></span></div>
</div>
</div>
<h4>Left & Right</h4>
<span class="image left"><img src="<?php echo get_template_directory_uri(); ?>/images/pic06.jpg" alt="" /></span>Fringilla nisl. Donec 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 in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec 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 in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
<span class="image right"><img src="<?php echo get_template_directory_uri(); ?>/images/pic06.jpg" alt="" /></span>Fringilla nisl. Donec 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 in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec 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 in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
</section>
</div>
</section>
<?php get_footer(); ?>[/php]
step 7.
copy paste the 404 code
[php]<?php get_header();?>
<h2>404 SORRY PAGE NOT FOUND </h2>
<?php get_footer();?>
[/php]
step 8.
copy and paste the .css content file from here, I made few changes to enable it to function correctly
[css]@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Raleway:400,500,700");
/*
Template Name: personalTheme
Retrospect by Kedevelopers
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/* Reset */
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;
}
/* Box Model */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container.\37 5\25 {
width: 60em;
}
.container.\35 0\25 {
width: 40em;
}
.container.\32 5\25 {
width: 20em;
}
.container {
width: 80em;
}
@media screen and (max-width: 1680px) {
.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container.\37 5\25 {
width: 60em;
}
.container.\35 0\25 {
width: 40em;
}
.container.\32 5\25 {
width: 20em;
}
.container {
width: 80em;
}
}
@media screen and (max-width: 1280px) {
.container.\31 25\25 {
width: 100%;
max-width: 81.25em;
min-width: 65em;
}
.container.\37 5\25 {
width: 48.75em;
}
.container.\35 0\25 {
width: 32.5em;
}
.container.\32 5\25 {
width: 16.25em;
}
.container {
width: 65em;
}
}
@media screen and (max-width: 980px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
@media screen and (max-width: 736px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
/* Grid */
.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row > * {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row:after, .row:before {
content: ”;
display: block;
clear: both;
height: 0;
}
.row.uniform > * > :first-child {
margin-top: 0;
}
.row.uniform > * > :last-child {
margin-bottom: 0;
}
.row.\30 \25 > * {
padding: 0 0 0 0em;
}
.row.\30 \25 {
margin: 0 0 -1px 0em;
}
.row.uniform.\30 \25 > * {
padding: 0em 0 0 0em;
}
.row.uniform.\30 \25 {
margin: 0em 0 -1px 0em;
}
.row > * {
padding: 0 0 0 2em;
}
.row {
margin: 0 0 -1px -2em;
}
.row.uniform > * {
padding: 2em 0 0 2em;
}
.row.uniform {
margin: -2em 0 -1px -2em;
}
.row.\32 00\25 > * {
padding: 0 0 0 4em;
}
.row.\32 00\25 {
margin: 0 0 -1px -4em;
}
.row.uniform.\32 00\25 > * {
padding: 4em 0 0 4em;
}
.row.uniform.\32 00\25 {
margin: -4em 0 -1px -4em;
}
.row.\31 50\25 > * {
padding: 0 0 0 3em;
}
.row.\31 50\25 {
margin: 0 0 -1px -3em;
}
.row.uniform.\31 50\25 > * {
padding: 3em 0 0 3em;
}
.row.uniform.\31 50\25 {
margin: -3em 0 -1px -3em;
}
.row.\35 0\25 > * {
padding: 0 0 0 1em;
}
.row.\35 0\25 {
margin: 0 0 -1px -1em;
}
.row.uniform.\35 0\25 > * {
padding: 1em 0 0 1em;
}
.row.uniform.\35 0\25 {
margin: -1em 0 -1px -1em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.5em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.5em;
}
.row.uniform.\32 5\25 > * {
padding: 0.5em 0 0 0.5em;
}
.row.uniform.\32 5\25 {
margin: -0.5em 0 -1px -0.5em;
}
.\31 2u, .\31 2u\24 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u, .\31 1u\24 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u, .\31 0u\24 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u, .\39 u\24 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u, .\38 u\24 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u, .\37 u\24 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u, .\36 u\24 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u, .\35 u\24 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u, .\34 u\24 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u, .\32 u\24 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u, .\31 u\24 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24 + *,
.\31 1u\24 + *,
.\31 0u\24 + *,
.\39 u\24 + *,
.\38 u\24 + *,
.\37 u\24 + *,
.\36 u\24 + *,
.\35 u\24 + *,
.\34 u\24 + *,
.\33 u\24 + *,
.\32 u\24 + *,
.\31 u\24 + * {
clear: left;
}
.\-11u {
margin-left: 91.66667%;
}
.\-10u {
margin-left: 83.33333%;
}
.\-9u {
margin-left: 75%;
}
.\-8u {
margin-left: 66.66667%;
}
.\-7u {
margin-left: 58.33333%;
}
.\-6u {
margin-left: 50%;
}
.\-5u {
margin-left: 41.66667%;
}
.\-4u {
margin-left: 33.33333%;
}
.\-3u {
margin-left: 25%;
}
.\-2u {
margin-left: 16.66667%;
}
.\-1u {
margin-left: 8.33333%;
}
@media screen and (max-width: 1680px) {
.row > * {
padding: 0 0 0 2em;
}
.row {
margin: 0 0 -1px -2em;
}
.row.uniform > * {
padding: 2em 0 0 2em;
}
.row.uniform {
margin: -2em 0 -1px -2em;
}
.row.\32 00\25 > * {
padding: 0 0 0 4em;
}
.row.\32 00\25 {
margin: 0 0 -1px -4em;
}
.row.uniform.\32 00\25 > * {
padding: 4em 0 0 4em;
}
.row.uniform.\32 00\25 {
margin: -4em 0 -1px -4em;
}
.row.\31 50\25 > * {
padding: 0 0 0 3em;
}
.row.\31 50\25 {
margin: 0 0 -1px -3em;
}
.row.uniform.\31 50\25 > * {
padding: 3em 0 0 3em;
}
.row.uniform.\31 50\25 {
margin: -3em 0 -1px -3em;
}
.row.\35 0\25 > * {
padding: 0 0 0 1em;
}
.row.\35 0\25 {
margin: 0 0 -1px -1em;
}
.row.uniform.\35 0\25 > * {
padding: 1em 0 0 1em;
}
.row.uniform.\35 0\25 {
margin: -1em 0 -1px -1em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.5em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.5em;
}
.row.uniform.\32 5\25 > * {
padding: 0.5em 0 0 0.5em;
}
.row.uniform.\32 5\25 {
margin: -0.5em 0 -1px -0.5em;
}
.\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u\28xlarge\29, .\39 u\24\28xlarge\29 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u\28xlarge\29, .\38 u\24\28xlarge\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u\28xlarge\29, .\37 u\24\28xlarge\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u\28xlarge\29, .\36 u\24\28xlarge\29 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u\28xlarge\29, .\35 u\24\28xlarge\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u\28xlarge\29, .\34 u\24\28xlarge\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u\28xlarge\29, .\33 u\24\28xlarge\29 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u\28xlarge\29, .\32 u\24\28xlarge\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u\28xlarge\29, .\31 u\24\28xlarge\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24\28xlarge\29 + *,
.\31 1u\24\28xlarge\29 + *,
.\31 0u\24\28xlarge\29 + *,
.\39 u\24\28xlarge\29 + *,
.\38 u\24\28xlarge\29 + *,
.\37 u\24\28xlarge\29 + *,
.\36 u\24\28xlarge\29 + *,
.\35 u\24\28xlarge\29 + *,
.\34 u\24\28xlarge\29 + *,
.\33 u\24\28xlarge\29 + *,
.\32 u\24\28xlarge\29 + *,
.\31 u\24\28xlarge\29 + * {
clear: left;
}
.\-11u\28xlarge\29 {
margin-left: 91.66667%;
}
.\-10u\28xlarge\29 {
margin-left: 83.33333%;
}
.\-9u\28xlarge\29 {
margin-left: 75%;
}
.\-8u\28xlarge\29 {
margin-left: 66.66667%;
}
.\-7u\28xlarge\29 {
margin-left: 58.33333%;
}
.\-6u\28xlarge\29 {
margin-left: 50%;
}
.\-5u\28xlarge\29 {
margin-left: 41.66667%;
}
.\-4u\28xlarge\29 {
margin-left: 33.33333%;
}
.\-3u\28xlarge\29 {
margin-left: 25%;
}
.\-2u\28xlarge\29 {
margin-left: 16.66667%;
}
.\-1u\28xlarge\29 {
margin-left: 8.33333%;
}
}
@media screen and (max-width: 1280px) {
.row > * {
padding: 0 0 0 1.5em;
}
.row {
margin: 0 0 -1px -1.5em;
}
.row.uniform > * {
padding: 1.5em 0 0 1.5em;
}
.row.uniform {
margin: -1.5em 0 -1px -1.5em;
}
.row.\32 00\25 > * {
padding: 0 0 0 3em;
}
.row.\32 00\25 {
margin: 0 0 -1px -3em;
}
.row.uniform.\32 00\25 > * {
padding: 3em 0 0 3em;
}
.row.uniform.\32 00\25 {
margin: -3em 0 -1px -3em;
}
.row.\31 50\25 > * {
padding: 0 0 0 2.25em;
}
.row.\31 50\25 {
margin: 0 0 -1px -2.25em;
}
.row.uniform.\31 50\25 > * {
padding: 2.25em 0 0 2.25em;
}
.row.uniform.\31 50\25 {
margin: -2.25em 0 -1px -2.25em;
}
.row.\35 0\25 > * {
padding: 0 0 0 0.75em;
}
.row.\35 0\25 {
margin: 0 0 -1px -0.75em;
}
.row.uniform.\35 0\25 > * {
padding: 0.75em 0 0 0.75em;
}
.row.uniform.\35 0\25 {
margin: -0.75em 0 -1px -0.75em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.375em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.375em;
}
.row.uniform.\32 5\25 > * {
padding: 0.375em 0 0 0.375em;
}
.row.uniform.\32 5\25 {
margin: -0.375em 0 -1px -0.375em;
}
.\31 2u\28large\29, .\31 2u\24\28large\29 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u\28large\29, .\31 1u\24\28large\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u\28large\29, .\31 0u\24\28large\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u\28large\29, .\39 u\24\28large\29 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u\28large\29, .\38 u\24\28large\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u\28large\29, .\37 u\24\28large\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u\28large\29, .\36 u\24\28large\29 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u\28large\29, .\35 u\24\28large\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u\28large\29, .\34 u\24\28large\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u\28large\29, .\33 u\24\28large\29 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u\28large\29, .\32 u\24\28large\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u\28large\29, .\31 u\24\28large\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24\28large\29 + *,
.\31 1u\24\28large\29 + *,
.\31 0u\24\28large\29 + *,
.\39 u\24\28large\29 + *,
.\38 u\24\28large\29 + *,
.\37 u\24\28large\29 + *,
.\36 u\24\28large\29 + *,
.\35 u\24\28large\29 + *,
.\34 u\24\28large\29 + *,
.\33 u\24\28large\29 + *,
.\32 u\24\28large\29 + *,
.\31 u\24\28large\29 + * {
clear: left;
}
.\-11u\28large\29 {
margin-left: 91.66667%;
}
.\-10u\28large\29 {
margin-left: 83.33333%;
}
.\-9u\28large\29 {
margin-left: 75%;
}
.\-8u\28large\29 {
margin-left: 66.66667%;
}
.\-7u\28large\29 {
margin-left: 58.33333%;
}
.\-6u\28large\29 {
margin-left: 50%;
}
.\-5u\28large\29 {
margin-left: 41.66667%;
}
.\-4u\28large\29 {
margin-left: 33.33333%;
}
.\-3u\28large\29 {
margin-left: 25%;
}
.\-2u\28large\29 {
margin-left: 16.66667%;
}
.\-1u\28large\29 {
margin-left: 8.33333%;
}
}
@media screen and (max-width: 980px) {
.row > * {
padding: 0 0 0 1.5em;
}
.row {
margin: 0 0 -1px -1.5em;
}
.row.uniform > * {
padding: 1.5em 0 0 1.5em;
}
.row.uniform {
margin: -1.5em 0 -1px -1.5em;
}
.row.\32 00\25 > * {
padding: 0 0 0 3em;
}
.row.\32 00\25 {
margin: 0 0 -1px -3em;
}
.row.uniform.\32 00\25 > * {
padding: 3em 0 0 3em;
}
.row.uniform.\32 00\25 {
margin: -3em 0 -1px -3em;
}
.row.\31 50\25 > * {
padding: 0 0 0 2.25em;
}
.row.\31 50\25 {
margin: 0 0 -1px -2.25em;
}
.row.uniform.\31 50\25 > * {
padding: 2.25em 0 0 2.25em;
}
.row.uniform.\31 50\25 {
margin: -2.25em 0 -1px -2.25em;
}
.row.\35 0\25 > * {
padding: 0 0 0 0.75em;
}
.row.\35 0\25 {
margin: 0 0 -1px -0.75em;
}
.row.uniform.\35 0\25 > * {
padding: 0.75em 0 0 0.75em;
}
.row.uniform.\35 0\25 {
margin: -0.75em 0 -1px -0.75em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.375em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.375em;
}
.row.uniform.\32 5\25 > * {
padding: 0.375em 0 0 0.375em;
}
.row.uniform.\32 5\25 {
margin: -0.375em 0 -1px -0.375em;
}
.\31 2u\28medium\29, .\31 2u\24\28medium\29 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u\28medium\29, .\31 1u\24\28medium\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u\28medium\29, .\31 0u\24\28medium\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u\28medium\29, .\39 u\24\28medium\29 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u\28medium\29, .\38 u\24\28medium\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u\28medium\29, .\37 u\24\28medium\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u\28medium\29, .\36 u\24\28medium\29 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u\28medium\29, .\35 u\24\28medium\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u\28medium\29, .\34 u\24\28medium\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u\28medium\29, .\33 u\24\28medium\29 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u\28medium\29, .\32 u\24\28medium\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u\28medium\29, .\31 u\24\28medium\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24\28medium\29 + *,
.\31 1u\24\28medium\29 + *,
.\31 0u\24\28medium\29 + *,
.\39 u\24\28medium\29 + *,
.\38 u\24\28medium\29 + *,
.\37 u\24\28medium\29 + *,
.\36 u\24\28medium\29 + *,
.\35 u\24\28medium\29 + *,
.\34 u\24\28medium\29 + *,
.\33 u\24\28medium\29 + *,
.\32 u\24\28medium\29 + *,
.\31 u\24\28medium\29 + * {
clear: left;
}
.\-11u\28medium\29 {
margin-left: 91.66667%;
}
.\-10u\28medium\29 {
margin-left: 83.33333%;
}
.\-9u\28medium\29 {
margin-left: 75%;
}
.\-8u\28medium\29 {
margin-left: 66.66667%;
}
.\-7u\28medium\29 {
margin-left: 58.33333%;
}
.\-6u\28medium\29 {
margin-left: 50%;
}
.\-5u\28medium\29 {
margin-left: 41.66667%;
}
.\-4u\28medium\29 {
margin-left: 33.33333%;
}
.\-3u\28medium\29 {
margin-left: 25%;
}
.\-2u\28medium\29 {
margin-left: 16.66667%;
}
.\-1u\28medium\29 {
margin-left: 8.33333%;
}
}
@media screen and (max-width: 736px) {
.row > * {
padding: 0 0 0 1.25em;
}
.row {
margin: 0 0 -1px -1.25em;
}
.row.uniform > * {
padding: 1.25em 0 0 1.25em;
}
.row.uniform {
margin: -1.25em 0 -1px -1.25em;
}
.row.\32 00\25 > * {
padding: 0 0 0 2.5em;
}
.row.\32 00\25 {
margin: 0 0 -1px -2.5em;
}
.row.uniform.\32 00\25 > * {
padding: 2.5em 0 0 2.5em;
}
.row.uniform.\32 00\25 {
margin: -2.5em 0 -1px -2.5em;
}
.row.\31 50\25 > * {
padding: 0 0 0 1.875em;
}
.row.\31 50\25 {
margin: 0 0 -1px -1.875em;
}
.row.uniform.\31 50\25 > * {
padding: 1.875em 0 0 1.875em;
}
.row.uniform.\31 50\25 {
margin: -1.875em 0 -1px -1.875em;
}
.row.\35 0\25 > * {
padding: 0 0 0 0.625em;
}
.row.\35 0\25 {
margin: 0 0 -1px -0.625em;
}
.row.uniform.\35 0\25 > * {
padding: 0.625em 0 0 0.625em;
}
.row.uniform.\35 0\25 {
margin: -0.625em 0 -1px -0.625em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.3125em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.3125em;
}
.row.uniform.\32 5\25 > * {
padding: 0.3125em 0 0 0.3125em;
}
.row.uniform.\32 5\25 {
margin: -0.3125em 0 -1px -0.3125em;
}
.\31 2u\28small\29, .\31 2u\24\28small\29 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u\28small\29, .\31 1u\24\28small\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u\28small\29, .\31 0u\24\28small\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u\28small\29, .\39 u\24\28small\29 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u\28small\29, .\38 u\24\28small\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u\28small\29, .\37 u\24\28small\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u\28small\29, .\36 u\24\28small\29 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u\28small\29, .\35 u\24\28small\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u\28small\29, .\34 u\24\28small\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u\28small\29, .\33 u\24\28small\29 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u\28small\29, .\32 u\24\28small\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u\28small\29, .\31 u\24\28small\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24\28small\29 + *,
.\31 1u\24\28small\29 + *,
.\31 0u\24\28small\29 + *,
.\39 u\24\28small\29 + *,
.\38 u\24\28small\29 + *,
.\37 u\24\28small\29 + *,
.\36 u\24\28small\29 + *,
.\35 u\24\28small\29 + *,
.\34 u\24\28small\29 + *,
.\33 u\24\28small\29 + *,
.\32 u\24\28small\29 + *,
.\31 u\24\28small\29 + * {
clear: left;
}
.\-11u\28small\29 {
margin-left: 91.66667%;
}
.\-10u\28small\29 {
margin-left: 83.33333%;
}
.\-9u\28small\29 {
margin-left: 75%;
}
.\-8u\28small\29 {
margin-left: 66.66667%;
}
.\-7u\28small\29 {
margin-left: 58.33333%;
}
.\-6u\28small\29 {
margin-left: 50%;
}
.\-5u\28small\29 {
margin-left: 41.66667%;
}
.\-4u\28small\29 {
margin-left: 33.33333%;
}
.\-3u\28small\29 {
margin-left: 25%;
}
.\-2u\28small\29 {
margin-left: 16.66667%;
}
.\-1u\28small\29 {
margin-left: 8.33333%;
}
}
@media screen and (max-width: 480px) {
.row > * {
padding: 0 0 0 1.25em;
}
.row {
margin: 0 0 -1px -1.25em;
}
.row.uniform > * {
padding: 1.25em 0 0 1.25em;
}
.row.uniform {
margin: -1.25em 0 -1px -1.25em;
}
.row.\32 00\25 > * {
padding: 0 0 0 2.5em;
}
.row.\32 00\25 {
margin: 0 0 -1px -2.5em;
}
.row.uniform.\32 00\25 > * {
padding: 2.5em 0 0 2.5em;
}
.row.uniform.\32 00\25 {
margin: -2.5em 0 -1px -2.5em;
}
.row.\31 50\25 > * {
padding: 0 0 0 1.875em;
}
.row.\31 50\25 {
margin: 0 0 -1px -1.875em;
}
.row.uniform.\31 50\25 > * {
padding: 1.875em 0 0 1.875em;
}
.row.uniform.\31 50\25 {
margin: -1.875em 0 -1px -1.875em;
}
.row.\35 0\25 > * {
padding: 0 0 0 0.625em;
}
.row.\35 0\25 {
margin: 0 0 -1px -0.625em;
}
.row.uniform.\35 0\25 > * {
padding: 0.625em 0 0 0.625em;
}
.row.uniform.\35 0\25 {
margin: -0.625em 0 -1px -0.625em;
}
.row.\32 5\25 > * {
padding: 0 0 0 0.3125em;
}
.row.\32 5\25 {
margin: 0 0 -1px -0.3125em;
}
.row.uniform.\32 5\25 > * {
padding: 0.3125em 0 0 0.3125em;
}
.row.uniform.\32 5\25 {
margin: -0.3125em 0 -1px -0.3125em;
}
.\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 {
width: 100%;
clear: none;
margin-left: 0;
}
.\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}
.\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}
.\39 u\28xsmall\29, .\39 u\24\28xsmall\29 {
width: 75%;
clear: none;
margin-left: 0;
}
.\38 u\28xsmall\29, .\38 u\24\28xsmall\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}
.\37 u\28xsmall\29, .\37 u\24\28xsmall\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}
.\36 u\28xsmall\29, .\36 u\24\28xsmall\29 {
width: 50%;
clear: none;
margin-left: 0;
}
.\35 u\28xsmall\29, .\35 u\24\28xsmall\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}
.\34 u\28xsmall\29, .\34 u\24\28xsmall\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}
.\33 u\28xsmall\29, .\33 u\24\28xsmall\29 {
width: 25%;
clear: none;
margin-left: 0;
}
.\32 u\28xsmall\29, .\32 u\24\28xsmall\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.\31 u\28xsmall\29, .\31 u\24\28xsmall\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}
.\31 2u\24\28xsmall\29 + *,
.\31 1u\24\28xsmall\29 + *,
.\31 0u\24\28xsmall\29 + *,
.\39 u\24\28xsmall\29 + *,
.\38 u\24\28xsmall\29 + *,
.\37 u\24\28xsmall\29 + *,
.\36 u\24\28xsmall\29 + *,
.\35 u\24\28xsmall\29 + *,
.\34 u\24\28xsmall\29 + *,
.\33 u\24\28xsmall\29 + *,
.\32 u\24\28xsmall\29 + *,
.\31 u\24\28xsmall\29 + * {
clear: left;
}
.\-11u\28xsmall\29 {
margin-left: 91.66667%;
}
.\-10u\28xsmall\29 {
margin-left: 83.33333%;
}
.\-9u\28xsmall\29 {
margin-left: 75%;
}
.\-8u\28xsmall\29 {
margin-left: 66.66667%;
}
.\-7u\28xsmall\29 {
margin-left: 58.33333%;
}
.\-6u\28xsmall\29 {
margin-left: 50%;
}
.\-5u\28xsmall\29 {
margin-left: 41.66667%;
}
.\-4u\28xsmall\29 {
margin-left: 33.33333%;
}
.\-3u\28xsmall\29 {
margin-left: 25%;
}
.\-2u\28xsmall\29 {
margin-left: 16.66667%;
}
.\-1u\28xsmall\29 {
margin-left: 8.33333%;
}
}
/* Basic */
@-ms-viewport {
width: device-width;
}
body {
-ms-overflow-style: scrollbar;
}
@media screen and (max-width: 480px) {
html, body {
min-width: 320px;
}
}
body {
background: #fff;
}
body.is-loading *, body.is-loading *:before, body.is-loading *: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 {
background-color: #fff;
color: #777;
}
body, input, select, textarea {
font-family: "Raleway", Helvetica, sans-serif;
font-size: 13pt;
font-weight: 400;
line-height: 2em;
}
@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: 11pt;
}
}
@media screen and (max-width: 980px) {
body, input, select, textarea {
font-size: 12pt;
}
}
@media screen and (max-width: 736px) {
body, input, select, textarea {
font-size: 12pt;
}
}
@media screen and (max-width: 480px) {
body, input, select, textarea {
font-size: 12pt;
}
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
strong, b {
font-weight: 700;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 2em 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1em;
margin: 0 0 1em 0;
text-transform: uppercase;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}
h2 {
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
}
h4 {
font-size: 1.1em;
line-height: 1.5em;
}
h5 {
font-size: 0.9em;
line-height: 1.5em;
}
h6 {
font-size: 0.7em;
line-height: 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-style: solid;
border-left-width: 4px;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
code {
border-radius: 4px;
border-style: solid;
border-width: 1px;
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.75em;
padding: 1em 1.5em;
overflow-x: auto;
}
hr {
border: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 2em 0;
}
hr.major {
margin: 3em 0;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
input, select, textarea {
color: #25383B;
}
a {
color: #51BAA4;
}
strong, b {
color: #25383B;
}
h1, h2, h3, h4, h5, h6 {
color: #25383B;
}
blockquote {
border-left-color: rgba(144, 144, 144, 0.25);
}
code {
background: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}
hr {
border-bottom-color: rgba(144, 144, 144, 0.25);
}
/* Section/Article */
section.special, article.special, header.special {
text-align: center;
}
header p {
margin: 0 0 1.5em 0;
position: relative;
text-transform: uppercase;
}
header h2 + p {
font-size: 1.25em;
margin-top: -1em;
line-height: 1.85em;
}
header h3 + p {
font-size: 1.1em;
margin-top: -0.8em;
line-height: 1.5em;
}
header h4 + p,
header h5 + p,
header h6 + p {
font-size: 0.9em;
margin-top: -0.6em;
line-height: 1.5em;
}
header.major {
margin-bottom: 4em;
}
header.major h2 {
font-size: 2.5em;
}
header.narrow {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1280px) {
header.narrow {
max-width: 75%;
}
}
@media screen and (max-width: 980px) {
header.narrow {
max-width: 100%;
}
header.major {
margin-bottom: 2em;
}
header.major h2 {
font-size: 2em;
}
}
@media screen and (max-width: 736px) {
header.major h2 {
font-size: 1.5em;
}
header.major p {
font-size: 1em;
}
}
header p {
color: #25383B;
}
/* Form */
form {
margin: 0 0 2em 0;
}
form ul.actions {
margin-top: 4em;
}
@media screen and (max-width: 736px) {
form ul.actions {
margin-top: 2em;
}
}
label {
display: block;
font-size: 0.9em;
font-weight: 700;
margin: 0 0 1em 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 4px;
border-style: solid;
border-width: 1px;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
.select-wrapper {
text-decoration: none;
display: block;
position: relative;
}
.select-wrapper:before {
content: "?";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.select-wrapper:before {
display: block;
height: 3.5em;
line-height: 3.5em;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 3.5em;
}
.select-wrapper select::-ms-expand {
display: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 3.5em;
}
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;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 400;
padding-left: 2.85em;
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 {
border-radius: 4px;
border-style: solid;
border-width: 1px;
content: ”;
display: inline-block;
height: 2.1em;
left: 0;
line-height: 2.0125em;
position: absolute;
text-align: center;
top: 0;
width: 2.1em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
content: ‘\f00c’;
}
input[type="checkbox"] + label:before {
border-radius: 4px;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
::-webkit-input-placeholder {
opacity: 1.0;
}
:-moz-placeholder {
opacity: 1.0;
}
::-moz-placeholder {
opacity: 1.0;
}
:-ms-input-placeholder {
opacity: 1.0;
}
.formerize-placeholder {
opacity: 1.0;
}
label {
color: #25383B;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
background-color: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
color: inherit;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.select-wrapper:before {
color: rgba(144, 144, 144, 0.25);
}
input[type="checkbox"] + label,
input[type="radio"] + label {
color: #777;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background-color: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background-color: rgba(144, 144, 144, 0.075);
border-color: #51BAA4;
color: #25383B;
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
::-webkit-input-placeholder {
color: #999 !important;
}
:-moz-placeholder {
color: #999 !important;
}
::-moz-placeholder {
color: #999 !important;
}
:-ms-input-placeholder {
color: #999 !important;
}
.formerize-placeholder {
color: #999 !important;
}
form.alt input[type="text"],
form.alt input[type="password"],
form.alt input[type="email"],
form.alt select,
form.alt textarea {
background-color: transparent;
}
/* Box */
.box {
border-radius: 4px;
border-style: solid;
border-width: 1px;
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;
}
.box {
border-color: rgba(144, 144, 144, 0.25);
}
/* 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;
border: 0;
display: inline-block;
position: relative;
}
.image img {
border-radius: 0;
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%;
}
/* 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-style: solid;
border-top-width: 1px;
padding: 0.5em 0;
}
ul.alt > li:first-child {
border-top: 0;
padding-top: 0;
}
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:before {
font-size: 2em;
}
ul.actions {
cursor: default;
list-style: none;
padding-left: 0;
}
ul.actions > li {
display: inline-block;
padding: 0 1em 0 0;
vertical-align: middle;
}
ul.actions > li:last-child {
padding-right: 0;
}
ul.actions.small > li {
padding: 0 0.5em 0 0;
}
ul.actions.vertical > li {
display: block;
padding: 1em 0 0 0;
}
ul.actions.vertical > li:first-child {
padding-top: 0;
}
ul.actions.vertical > li > * {
margin-bottom: 0;
}
ul.actions.vertical.small > li {
padding: 0.5em 0 0 0;
}
ul.actions.vertical.small > li:first-child {
padding-top: 0;
}
ul.actions.fit {
display: table;
margin-left: -1em;
padding: 0;
table-layout: fixed;
width: calc(100% + 1em);
}
ul.actions.fit > li {
display: table-cell;
padding: 0 0 0 1em;
}
ul.actions.fit > li > * {
margin-bottom: 0;
}
ul.actions.fit.small {
margin-left: -0.5em;
width: calc(100% + 0.5em);
}
ul.actions.fit.small > li {
padding: 0 0 0 0.5em;
}
@media screen and (max-width: 480px) {
ul.actions {
margin: 0 0 2em 0;
}
ul.actions > li {
padding: 1em 0 0 0;
display: block;
text-align: center;
width: 100%;
}
ul.actions > li:first-child {
padding-top: 0;
}
ul.actions > li > * {
width: 100%;
margin: 0 !important;
}
ul.actions > li > *.icon:before {
margin-left: -2em;
}
ul.actions.small > li {
padding: 0.5em 0 0 0;
}
ul.actions.small > li:first-child {
padding-top: 0;
}
}
dl {
margin: 0 0 2em 0;
}
dl > dt {
display: block;
font-weight: 700;
margin: 0 0 1em 0;
}
dl > dd {
margin-left: 2em;
}
ul.alt > li {
border-top-color: rgba(144, 144, 144, 0.25);
}
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
table {
margin: 0 0 2em 0;
width: 100%;
}
table tbody tr {
border-style: solid;
border-width: 1px;
border-left: 0;
border-right: 0;
}
table td {
padding: 0.75em 0.75em;
}
table th {
font-size: 0.9em;
font-weight: 700;
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}
table thead {
border-bottom-style: solid;
border-bottom-width: 2px;
}
table tfoot {
border-top-style: solid;
border-top-width: 2px;
}
table.alt {
border-collapse: separate;
}
table.alt tbody tr td {
border-style: solid;
border-width: 1px;
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;
}
table tbody tr {
border-color: rgba(144, 144, 144, 0.25);
}
table tbody tr:nth-child(2n + 1) {
background-color: rgba(144, 144, 144, 0.075);
}
table th {
color: #25383B;
}
table thead {
border-bottom-color: rgba(144, 144, 144, 0.25);
}
table tfoot {
border-top-color: rgba(144, 144, 144, 0.25);
}
table.alt tbody tr td {
border-color: rgba(144, 144, 144, 0.25);
}
/* 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;
border-radius: 2.5em;
border: 0;
cursor: pointer;
display: inline-block;
font-weight: 700;
height: 2.85em;
line-height: 2.95em;
min-width: 10em;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}
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 {
display: block;
margin: 0 0 1em 0;
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
font-size: 0.8em;
}
input[type="submit"].big,
input[type="reset"].big,
input[type="button"].big,
button.big,
.button.big {
font-size: 1.2em;
height: 3.25em;
line-height: 3.25em;
padding: 0 2.5em;
}
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 {
cursor: default;
opacity: 0.25;
}
@media screen and (max-width: 980px) {
input[type="submit"].big,
input[type="reset"].big,
input[type="button"].big,
button.big,
.button.big {
font-size: 1em;
}
}
@media screen and (max-width: 480px) {
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
padding: 0;
}
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
background-color: #25383B;
box-shadow: none;
color: #fff !important;
}
input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
color: #999;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
background-color: #2f474b;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
background-color: #1b292b;
}
input[type="submit"].special,
input[type="reset"].special,
input[type="button"].special,
button.special,
.button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}
input[type="submit"].special:hover,
input[type="reset"].special:hover,
input[type="button"].special:hover,
button.special:hover,
.button.special:hover {
background-color: #63c1ae;
}
input[type="submit"].special:active,
input[type="reset"].special:active,
input[type="button"].special:active,
button.special:active,
.button.special:active {
background-color: #45ad97;
}
input[type="submit"].alt,
input[type="reset"].alt,
input[type="button"].alt,
button.alt,
.button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #51BAA4;
color: #51BAA4 !important;
}
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
input[type="button"].alt:hover,
button.alt:hover,
.button.alt:hover {
background-color: rgba(144, 144, 144, 0.075);
}
input[type="submit"].alt:active,
input[type="reset"].alt:active,
input[type="button"].alt:active,
button.alt:active,
.button.alt:active {
background-color: rgba(144, 144, 144, 0.2);
}
/* Feature */
.feature {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
margin-bottom: 6em;
}
.feature:last-child {
margin-bottom: 2em;
}
.feature.left {
-moz-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.feature.right {
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.feature .image {
width: 48%;
}
.feature .image img {
max-width: 100%;
}
.feature .content {
padding: 2em 3em 0.1em 3em;
width: 52%;
}
@media screen and (max-width: 1280px) {
.feature {
margin-bottom: 4em;
}
.feature .content {
padding: 1em 2em 0.1em 2em;
}
}
@media screen and (max-width: 980px) {
.feature.left, .feature.right {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.feature .image {
width: 100%;
}
.feature .image img {
width: 100%;
}
.feature .content {
padding: 2em 2em 0.1em 2em;
width: 100%;
}
}
@media screen and (max-width: 736px) {
.feature {
margin-bottom: 2em;
}
.feature .content {
padding: 2em 1em 0.1em 1em;
}
}
.feature {
background-color: rgba(144, 144, 144, 0.075);
}
/* Image Grid */
.image-grid {
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-bottom: 4em;
}
.image-grid .image {
margin: 0;
width: 25%;
}
.image-grid .image img {
width: 100%;
}
@media screen and (max-width: 980px) {
.image-grid {
margin-bottom: 3em;
}
.image-grid .image {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.image-grid {
margin-bottom: 2em;
}
.image-grid .image {
width: 100%;
}
}
/* Wrapper */
.wrapper {
padding: 8em 0 6em 0;
position: relative;
}
.wrapper > .inner {
margin: 0 auto;
width: 70em;
}
.wrapper.style1 {
background-color: #EEE;
color: #777;
}
.wrapper.style1 input, .wrapper.style1 select, .wrapper.style1 textarea {
color: #555;
}
.wrapper.style1 a {
color: #51BAA4;
}
.wrapper.style1 strong, .wrapper.style1 b {
color: #555;
}
.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
color: #555;
}
.wrapper.style1 blockquote {
border-left-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 code {
background: #fff;
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 hr {
border-bottom-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 header p {
color: #555;
}
.wrapper.style1 .feature {
background-color: #fff;
}
.wrapper.style1 label {
color: #555;
}
.wrapper.style1 input[type="text"],
.wrapper.style1 input[type="password"],
.wrapper.style1 input[type="email"],
.wrapper.style1 select,
.wrapper.style1 textarea {
background-color: #fff;
border-color: rgba(144, 144, 144, 0.25);
color: inherit;
}
.wrapper.style1 input[type="text"]:focus,
.wrapper.style1 input[type="password"]:focus,
.wrapper.style1 input[type="email"]:focus,
.wrapper.style1 select:focus,
.wrapper.style1 textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style1 .select-wrapper:before {
color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 input[type="checkbox"] + label,
.wrapper.style1 input[type="radio"] + label {
color: #777;
}
.wrapper.style1 input[type="checkbox"] + label:before,
.wrapper.style1 input[type="radio"] + label:before {
background-color: #fff;
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 input[type="checkbox"]:checked + label:before,
.wrapper.style1 input[type="radio"]:checked + label:before {
background-color: #fff;
border-color: #51BAA4;
color: #555;
}
.wrapper.style1 input[type="checkbox"]:focus + label:before,
.wrapper.style1 input[type="radio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style1 ::-webkit-input-placeholder {
color: #bbb !important;
}
.wrapper.style1 :-moz-placeholder {
color: #bbb !important;
}
.wrapper.style1 ::-moz-placeholder {
color: #bbb !important;
}
.wrapper.style1 :-ms-input-placeholder {
color: #bbb !important;
}
.wrapper.style1 .formerize-placeholder {
color: #bbb !important;
}
.wrapper.style1 form.alt input[type="text"],
.wrapper.style1 form.alt input[type="password"],
.wrapper.style1 form.alt input[type="email"],
.wrapper.style1 form.alt select,
.wrapper.style1 form.alt textarea {
background-color: transparent;
}
.wrapper.style1 ul.alt > li {
border-top-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 table tbody tr {
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 table tbody tr:nth-child(2n + 1) {
background-color: #fff;
}
.wrapper.style1 table th {
color: #555;
}
.wrapper.style1 table thead {
border-bottom-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 table tfoot {
border-top-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 table.alt tbody tr td {
border-color: rgba(144, 144, 144, 0.25);
}
.wrapper.style1 input[type="submit"],
.wrapper.style1 input[type="reset"],
.wrapper.style1 input[type="button"],
.wrapper.style1 button,
.wrapper.style1 .button {
background-color: #555;
box-shadow: none;
color: #EEE !important;
}
.wrapper.style1 input[type="submit"].icon:before,
.wrapper.style1 input[type="reset"].icon:before,
.wrapper.style1 input[type="button"].icon:before,
.wrapper.style1 button.icon:before,
.wrapper.style1 .button.icon:before {
color: #bbb;
}
.wrapper.style1 input[type="submit"]:hover,
.wrapper.style1 input[type="reset"]:hover,
.wrapper.style1 input[type="button"]:hover,
.wrapper.style1 button:hover,
.wrapper.style1 .button:hover {
background-color: #626262;
}
.wrapper.style1 input[type="submit"]:active,
.wrapper.style1 input[type="reset"]:active,
.wrapper.style1 input[type="button"]:active,
.wrapper.style1 button:active,
.wrapper.style1 .button:active {
background-color: #484848;
}
.wrapper.style1 input[type="submit"].special,
.wrapper.style1 input[type="reset"].special,
.wrapper.style1 input[type="button"].special,
.wrapper.style1 button.special,
.wrapper.style1 .button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}
.wrapper.style1 input[type="submit"].special:hover,
.wrapper.style1 input[type="reset"].special:hover,
.wrapper.style1 input[type="button"].special:hover,
.wrapper.style1 button.special:hover,
.wrapper.style1 .button.special:hover {
background-color: #63c1ae;
}
.wrapper.style1 input[type="submit"].special:active,
.wrapper.style1 input[type="reset"].special:active,
.wrapper.style1 input[type="button"].special:active,
.wrapper.style1 button.special:active,
.wrapper.style1 .button.special:active {
background-color: #45ad97;
}
.wrapper.style1 input[type="submit"].alt,
.wrapper.style1 input[type="reset"].alt,
.wrapper.style1 input[type="button"].alt,
.wrapper.style1 button.alt,
.wrapper.style1 .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #51BAA4;
color: #51BAA4 !important;
}
.wrapper.style1 input[type="submit"].alt:hover,
.wrapper.style1 input[type="reset"].alt:hover,
.wrapper.style1 input[type="button"].alt:hover,
.wrapper.style1 button.alt:hover,
.wrapper.style1 .button.alt:hover {
background-color: #fff;
}
.wrapper.style1 input[type="submit"].alt:active,
.wrapper.style1 input[type="reset"].alt:active,
.wrapper.style1 input[type="button"].alt:active,
.wrapper.style1 button.alt:active,
.wrapper.style1 .button.alt:active {
background-color: rgba(144, 144, 144, 0.2);
}
.wrapper.style2 {
background-color: #1E2832;
color: rgba(255, 255, 255, 0.75);
}
.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
color: #fff;
}
.wrapper.style2 a {
color: #51BAA4;
}
.wrapper.style2 strong, .wrapper.style2 b {
color: #fff;
}
.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
color: #fff;
}
.wrapper.style2 blockquote {
border-left-color: transparent;
}
.wrapper.style2 code {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.wrapper.style2 hr {
border-bottom-color: transparent;
}
.wrapper.style2 header p {
color: #fff;
}
.wrapper.style2 .feature {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style2 label {
color: #fff;
}
.wrapper.style2 input[type="text"],
.wrapper.style2 input[type="password"],
.wrapper.style2 input[type="email"],
.wrapper.style2 select,
.wrapper.style2 textarea {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
color: inherit;
}
.wrapper.style2 input[type="text"]:focus,
.wrapper.style2 input[type="password"]:focus,
.wrapper.style2 input[type="email"]:focus,
.wrapper.style2 select:focus,
.wrapper.style2 textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style2 .select-wrapper:before {
color: transparent;
}
.wrapper.style2 input[type="checkbox"] + label,
.wrapper.style2 input[type="radio"] + label {
color: rgba(255, 255, 255, 0.75);
}
.wrapper.style2 input[type="checkbox"] + label:before,
.wrapper.style2 input[type="radio"] + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.wrapper.style2 input[type="checkbox"]:checked + label:before,
.wrapper.style2 input[type="radio"]:checked + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: #51BAA4;
color: #fff;
}
.wrapper.style2 input[type="checkbox"]:focus + label:before,
.wrapper.style2 input[type="radio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style2 ::-webkit-input-placeholder {
color: #a5a9ad !important;
}
.wrapper.style2 :-moz-placeholder {
color: #a5a9ad !important;
}
.wrapper.style2 ::-moz-placeholder {
color: #a5a9ad !important;
}
.wrapper.style2 :-ms-input-placeholder {
color: #a5a9ad !important;
}
.wrapper.style2 .formerize-placeholder {
color: #a5a9ad !important;
}
.wrapper.style2 form.alt input[type="text"],
.wrapper.style2 form.alt input[type="password"],
.wrapper.style2 form.alt input[type="email"],
.wrapper.style2 form.alt select,
.wrapper.style2 form.alt textarea {
background-color: transparent;
}
.wrapper.style2 ul.alt > li {
border-top-color: transparent;
}
.wrapper.style2 table tbody tr {
border-color: transparent;
}
.wrapper.style2 table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style2 table th {
color: #fff;
}
.wrapper.style2 table thead {
border-bottom-color: transparent;
}
.wrapper.style2 table tfoot {
border-top-color: transparent;
}
.wrapper.style2 table.alt tbody tr td {
border-color: transparent;
}
.wrapper.style2 input[type="submit"],
.wrapper.style2 input[type="reset"],
.wrapper.style2 input[type="button"],
.wrapper.style2 button,
.wrapper.style2 .button {
background-color: #fff;
box-shadow: none;
color: #1E2832 !important;
}
.wrapper.style2 input[type="submit"].icon:before,
.wrapper.style2 input[type="reset"].icon:before,
.wrapper.style2 input[type="button"].icon:before,
.wrapper.style2 button.icon:before,
.wrapper.style2 .button.icon:before {
color: #a5a9ad;
}
.wrapper.style2 input[type="submit"]:hover,
.wrapper.style2 input[type="reset"]:hover,
.wrapper.style2 input[type="button"]:hover,
.wrapper.style2 button:hover,
.wrapper.style2 .button:hover {
background-color: white;
}
.wrapper.style2 input[type="submit"]:active,
.wrapper.style2 input[type="reset"]:active,
.wrapper.style2 input[type="button"]:active,
.wrapper.style2 button:active,
.wrapper.style2 .button:active {
background-color: #f2f2f2;
}
.wrapper.style2 input[type="submit"].special,
.wrapper.style2 input[type="reset"].special,
.wrapper.style2 input[type="button"].special,
.wrapper.style2 button.special,
.wrapper.style2 .button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}
.wrapper.style2 input[type="submit"].special:hover,
.wrapper.style2 input[type="reset"].special:hover,
.wrapper.style2 input[type="button"].special:hover,
.wrapper.style2 button.special:hover,
.wrapper.style2 .button.special:hover {
background-color: #63c1ae;
}
.wrapper.style2 input[type="submit"].special:active,
.wrapper.style2 input[type="reset"].special:active,
.wrapper.style2 input[type="button"].special:active,
.wrapper.style2 button.special:active,
.wrapper.style2 .button.special:active {
background-color: #45ad97;
}
.wrapper.style2 input[type="submit"].alt,
.wrapper.style2 input[type="reset"].alt,
.wrapper.style2 input[type="button"].alt,
.wrapper.style2 button.alt,
.wrapper.style2 .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #fff;
color: #fff !important;
}
.wrapper.style2 input[type="submit"].alt:hover,
.wrapper.style2 input[type="reset"].alt:hover,
.wrapper.style2 input[type="button"].alt:hover,
.wrapper.style2 button.alt:hover,
.wrapper.style2 .button.alt:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style2 input[type="submit"].alt:active,
.wrapper.style2 input[type="reset"].alt:active,
.wrapper.style2 input[type="button"].alt:active,
.wrapper.style2 button.alt:active,
.wrapper.style2 .button.alt:active {
background-color: rgba(255, 255, 255, 0.1);
}
.wrapper.style3 {
background-color: #1E2832;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed;
background-image: url("images/overlay.png"), url("images/pic11.jpg");
background-size: cover;
}
.wrapper.style3 input, .wrapper.style3 select, .wrapper.style3 textarea {
color: #fff;
}
.wrapper.style3 a {
color: #51BAA4;
}
.wrapper.style3 strong, .wrapper.style3 b {
color: #fff;
}
.wrapper.style3 h1, .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
color: #fff;
}
.wrapper.style3 blockquote {
border-left-color: transparent;
}
.wrapper.style3 code {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.wrapper.style3 hr {
border-bottom-color: transparent;
}
.wrapper.style3 header p {
color: #fff;
}
.wrapper.style3 .feature {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style3 label {
color: #fff;
}
.wrapper.style3 input[type="text"],
.wrapper.style3 input[type="password"],
.wrapper.style3 input[type="email"],
.wrapper.style3 select,
.wrapper.style3 textarea {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
color: inherit;
}
.wrapper.style3 input[type="text"]:focus,
.wrapper.style3 input[type="password"]:focus,
.wrapper.style3 input[type="email"]:focus,
.wrapper.style3 select:focus,
.wrapper.style3 textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style3 .select-wrapper:before {
color: transparent;
}
.wrapper.style3 input[type="checkbox"] + label,
.wrapper.style3 input[type="radio"] + label {
color: rgba(255, 255, 255, 0.75);
}
.wrapper.style3 input[type="checkbox"] + label:before,
.wrapper.style3 input[type="radio"] + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.wrapper.style3 input[type="checkbox"]:checked + label:before,
.wrapper.style3 input[type="radio"]:checked + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: #51BAA4;
color: #fff;
}
.wrapper.style3 input[type="checkbox"]:focus + label:before,
.wrapper.style3 input[type="radio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}
.wrapper.style3 ::-webkit-input-placeholder {
color: #a5a9ad !important;
}
.wrapper.style3 :-moz-placeholder {
color: #a5a9ad !important;
}
.wrapper.style3 ::-moz-placeholder {
color: #a5a9ad !important;
}
.wrapper.style3 :-ms-input-placeholder {
color: #a5a9ad !important;
}
.wrapper.style3 .formerize-placeholder {
color: #a5a9ad !important;
}
.wrapper.style3 form.alt input[type="text"],
.wrapper.style3 form.alt input[type="password"],
.wrapper.style3 form.alt input[type="email"],
.wrapper.style3 form.alt select,
.wrapper.style3 form.alt textarea {
background-color: transparent;
}
.wrapper.style3 ul.alt > li {
border-top-color: transparent;
}
.wrapper.style3 table tbody tr {
border-color: transparent;
}
.wrapper.style3 table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style3 table th {
color: #fff;
}
.wrapper.style3 table thead {
border-bottom-color: transparent;
}
.wrapper.style3 table tfoot {
border-top-color: transparent;
}
.wrapper.style3 table.alt tbody tr td {
border-color: transparent;
}
.wrapper.style3 input[type="submit"],
.wrapper.style3 input[type="reset"],
.wrapper.style3 input[type="button"],
.wrapper.style3 button,
.wrapper.style3 .button {
background-color: #fff;
box-shadow: none;
color: #1E2832 !important;
}
.wrapper.style3 input[type="submit"].icon:before,
.wrapper.style3 input[type="reset"].icon:before,
.wrapper.style3 input[type="button"].icon:before,
.wrapper.style3 button.icon:before,
.wrapper.style3 .button.icon:before {
color: #a5a9ad;
}
.wrapper.style3 input[type="submit"]:hover,
.wrapper.style3 input[type="reset"]:hover,
.wrapper.style3 input[type="button"]:hover,
.wrapper.style3 button:hover,
.wrapper.style3 .button:hover {
background-color: white;
}
.wrapper.style3 input[type="submit"]:active,
.wrapper.style3 input[type="reset"]:active,
.wrapper.style3 input[type="button"]:active,
.wrapper.style3 button:active,
.wrapper.style3 .button:active {
background-color: #f2f2f2;
}
.wrapper.style3 input[type="submit"].special,
.wrapper.style3 input[type="reset"].special,
.wrapper.style3 input[type="button"].special,
.wrapper.style3 button.special,
.wrapper.style3 .button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}
.wrapper.style3 input[type="submit"].special:hover,
.wrapper.style3 input[type="reset"].special:hover,
.wrapper.style3 input[type="button"].special:hover,
.wrapper.style3 button.special:hover,
.wrapper.style3 .button.special:hover {
background-color: #63c1ae;
}
.wrapper.style3 input[type="submit"].special:active,
.wrapper.style3 input[type="reset"].special:active,
.wrapper.style3 input[type="button"].special:active,
.wrapper.style3 button.special:active,
.wrapper.style3 .button.special:active {
background-color: #45ad97;
}
.wrapper.style3 input[type="submit"].alt,
.wrapper.style3 input[type="reset"].alt,
.wrapper.style3 input[type="button"].alt,
.wrapper.style3 button.alt,
.wrapper.style3 .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #fff;
color: #fff !important;
}
.wrapper.style3 input[type="submit"].alt:hover,
.wrapper.style3 input[type="reset"].alt:hover,
.wrapper.style3 input[type="button"].alt:hover,
.wrapper.style3 button.alt:hover,
.wrapper.style3 .button.alt:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.wrapper.style3 input[type="submit"].alt:active,
.wrapper.style3 input[type="reset"].alt:active,
.wrapper.style3 input[type="button"].alt:active,
.wrapper.style3 button.alt:active,
.wrapper.style3 .button.alt:active {
background-color: rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1280px) {
.wrapper {
padding: 6em 0 4em 0;
}
.wrapper > .inner {
width: 65em;
}
}
@media screen and (max-width: 980px) {
.wrapper {
padding: 5em 3em 3em 3em;
}
.wrapper > .inner {
width: 100%;
}
}
@media screen and (max-width: 736px) {
.wrapper {
padding: 3em 2em 1em 2em;
}
}
@media screen and (max-width: 480px) {
.wrapper {
padding: 2em 1em 0.1em 1em;
}
}
/* Header */
body {
padding-top: 3.125em;
}
body.landing {
padding-top: 0;
}
@media screen and (max-width: 980px) {
body {
padding-top: 44px;
}
}
#header {
background: #07090c;
color: rgba(255, 255, 255, 0.75);
cursor: default;
height: 3.25em;
left: 0;
line-height: 3.25em;
position: fixed;
text-align: right;
top: 0;
width: 100%;
z-index: 10001;
}
#header > h1 {
color: #fff;
display: inline-block;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#header > h1 a {
font-size: 1.25em;
}
#header a {
-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;
color: #fff;
display: inline-block;
margin-right: 1.25em;
text-decoration: none;
}
#header a[href="#nav"] {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
#header a[href="#nav"]:before {
content: "?";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#header a[href="#nav"]:before {
margin: 0 0.5em 0 0;
}
#header a + a[href="#nav"]:last-child {
border-left: solid 1px transparent;
padding-left: 1.25em;
margin-left: 0.5em;
}
#header.alt {
background-color: transparent;
font-size: 1.25em;
padding: 1em 2em;
position: absolute;
}
#header.alt > h1 {
color: inherit;
position: static;
float: left;
}
#header.alt a[href="#nav"] {
margin-right: 0;
}
@media screen and (max-width: 980px) {
body {
padding-top: 44px;
}
#header {
height: 44px;
line-height: 44px;
}
#header > h1 {
left: 1em;
}
#header > h1 a {
font-size: 1em;
}
#header.alt {
font-size: 1em;
}
}
@media screen and (max-width: 480px) {
#header {
min-width: 320px;
}
#header > h1 {
left: 1em;
}
#header.alt {
padding: 0.5em 1em;
}
}
/* Nav */
#nav {
-moz-transform: translateX(20em);
-webkit-transform: translateX(20em);
-ms-transform: translateX(20em);
transform: translateX(20em);
-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
-webkit-overflow-scrolling: touch;
background: #07090c;
box-shadow: none;
color: #fff;
height: 100%;
max-width: 80%;
overflow-y: auto;
padding: 3em 2em;
position: fixed;
right: 0;
text-transform: uppercase;
top: 0;
visibility: hidden;
width: 20em;
z-index: 10002;
}
#nav > ul {
margin: 0 0 1em 0;
}
#nav > ul.links {
list-style: none;
padding: 0;
}
#nav > ul.links > li {
padding: 0;
}
#nav > ul.links > li > a:not(.button) {
border: 0;
border-top: solid 1px transparent;
color: inherit;
display: block;
line-height: 3.5em;
text-decoration: none;
}
#nav > ul.links > li > .button {
display: block;
margin: 0.5em 0 0 0;
}
#nav > ul.links > li:first-child > a:not(.button) {
border-top: 0 !important;
}
#nav .close {
text-decoration: none;
-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;
-webkit-tap-highlight-color: transparent;
border: 0;
color: #a5a9ad;
cursor: pointer;
display: block;
height: 3.25em;
line-height: 3.25em;
padding-right: 1.25em;
position: absolute;
right: 0;
text-align: right;
top: 0;
vertical-align: middle;
width: 7em;
}
#nav .close:before {
content: "?";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#nav .close:before {
font-size: 1.25em;
}
#nav .close:hover {
color: #fff;
}
@media screen and (max-width: 736px) {
#nav .close {
height: 4em;
line-height: 4em;
}
}
#nav.visible {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
visibility: visible;
}
@media screen and (max-width: 736px) {
#nav {
padding: 2.5em 1.75em;
}
}
/* Banner */
#banner {
padding: 8em 0 6em 0;
background-color: #1E2832;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed;
background-image: url("images/overlay.png"), url("images/banner.jpg");
background-size: cover;
text-align: center;
}
#banner input, #banner select, #banner textarea {
color: #fff;
}
#banner a {
color: #51BAA4;
}
#banner strong, #banner b {
color: #fff;
}
#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
color: #fff;
}
#banner blockquote {
border-left-color: transparent;
}
#banner code {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
#banner hr {
border-bottom-color: transparent;
}
#banner input[type="submit"],
#banner input[type="reset"],
#banner input[type="button"],
#banner button,
#banner .button {
background-color: #fff;
box-shadow: none;
color: #1E2832 !important;
}
#banner input[type="submit"].icon:before,
#banner input[type="reset"].icon:before,
#banner input[type="button"].icon:before,
#banner button.icon:before,
#banner .button.icon:before {
color: #a5a9ad;
}
#banner input[type="submit"]:hover,
#banner input[type="reset"]:hover,
#banner input[type="button"]:hover,
#banner button:hover,
#banner .button:hover {
background-color: white;
}
#banner input[type="submit"]:active,
#banner input[type="reset"]:active,
#banner input[type="button"]:active,
#banner button:active,
#banner .button:active {
background-color: #f2f2f2;
}
#banner input[type="submit"].special,
#banner input[type="reset"].special,
#banner input[type="button"].special,
#banner button.special,
#banner .button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}
#banner input[type="submit"].special:hover,
#banner input[type="reset"].special:hover,
#banner input[type="button"].special:hover,
#banner button.special:hover,
#banner .button.special:hover {
background-color: #63c1ae;
}
#banner input[type="submit"].special:active,
#banner input[type="reset"].special:active,
#banner input[type="button"].special:active,
#banner button.special:active,
#banner .button.special:active {
background-color: #45ad97;
}
#banner input[type="submit"].alt,
#banner input[type="reset"].alt,
#banner input[type="button"].alt,
#banner button.alt,
#banner .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #fff;
color: #fff !important;
}
#banner input[type="submit"].alt:hover,
#banner input[type="reset"].alt:hover,
#banner input[type="button"].alt:hover,
#banner button.alt:hover,
#banner .button.alt:hover {
background-color: rgba(255, 255, 255, 0.05);
}
#banner input[type="submit"].alt:active,
#banner input[type="reset"].alt:active,
#banner input[type="button"].alt:active,
#banner button.alt:active,
#banner .button.alt:active {
background-color: rgba(255, 255, 255, 0.1);
}
#banner h2 {
font-size: 2.5em;
margin: 0 0 0.5em 0;
padding: 0;
}
#banner p {
color: #fff;
font-size: 1.5em;
margin-bottom: 1.75em;
text-transform: uppercase;
}
#banner .icon {
border-radius: 100%;
border: solid 2px #fff;
color: #fff;
display: inline-block;
font-size: 3em;
height: 2.25em;
line-height: 1.25em;
margin-bottom: 0.5em;
padding: 0.5em;
width: 2.25em;
}
@media screen and (max-width: 1680px) {
#banner {
padding: 11em 0 9em 0;
}
}
@media screen and (max-width: 1280px) {
#banner {
padding: 9em 0 7em 0;
}
#banner h2 {
font-size: 2em;
}
}
@media screen and (max-width: 980px) {
#banner {
padding: 8em 2em 6em 2em;
}
}
@media screen and (max-width: 736px) {
#banner {
padding: 5em 2em 3em 2em;
}
#banner h2 {
font-size: 1.5em;
}
#banner p {
font-size: 1em;
}
#banner .icon {
font-size: 2em;
}
}
@media screen and (max-width: 480px) {
#banner {
padding: 5em 2em 3em 2em;
}
#banner .icon {
font-size: 1.5em;
}
}
/* Main */
#main {
padding: 5em 0 3em 0;
}
@media screen and (max-width: 1280px) {
#main {
padding: 4em 0 2em 0;
}
}
@media screen and (max-width: 980px) {
#main {
padding: 3em 0 1em 0;
}
}
@media screen and (max-width: 736px) {
#main {
padding: 2em 0 0.1em 0;
}
}
/* Footer */
#footer {
background-color: #1E2832;
color: rgba(255, 255, 255, 0.75);
text-align: center;
}
#footer input, #footer select, #footer textarea {
color: #fff;
}
#footer a {
color: #51BAA4;
}
#footer strong, #footer b {
color: #fff;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
color: #fff;
}
#footer blockquote {
border-left-color: transparent;
}
#footer code {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
#footer hr {
border-bottom-color: transparent;
}
#footer a {
-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;
color: #a5a9ad;
}
#footer a:active, #footer a:focus, #footer a:hover {
color: #fff;
}
#footer .inner {
padding: 6em 0 4em 0;
border-top: solid 1px rgba(255, 255, 255, 0.1);
margin: 0 auto;
width: 75%;
}
#footer ul.icons li {
padding-right: 2.5em;
}
#footer ul.icons li:last-child {
padding-right: 0;
}
#footer .copyright {
color: #a5a9ad;
font-size: 0.9em;
margin: 0 0 2em 0;
padding: 0;
text-transform: uppercase;
}
#footer .copyright li {
display: inline-block;
list-style: none;
margin: 0 0.1em;
}
@media screen and (max-width: 980px) {
#footer .inner {
padding: 5em 0 3em 0;
width: 100%;
}
}
@media screen and (max-width: 736px) {
#footer .inner {
padding: 3em 0 1em 0;
}
#footer .copyright li {
display: block;
margin: 0;
}
#footer ul.icons li {
font-size: 0.9em;
}
}
@media screen and (max-width: 480px) {
#footer .inner {
padding: 2em 0 0.1em 0;
}
}[/css]
Conclusion
Wordpress theme design is challenging at first but becomes easy with continuous efforts. More features such as
creating drag and drop menu, search, blog, custom pages, dashboard theme and more features will be covered soon, check out kedevelopers
made websites for some implemented functionalities