<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Crunchy Responsive Creative Template</title>
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/screen.css" />
<link rel="stylesheet" href="css/mediaelementplayer.css" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Fonts
================================================== -->
<link href='http//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css' />
<!-- Scripts
================================================== -->
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
<script src="js/ddsmoothmenu.js" type="text/javascript"></script>
<script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
<script src="js/jquery.fitvids.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script src="js/screen.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- Site Backgrounds
================================================== -->
<!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
<div class="poswrapheaderline wide"><div class="headerline full"></div></div>
<!-- Remove or uncomment depending on if you want a background image or tile -->
<!--div class="tiledbackground"></div-->
<img src="images/backgrounds/bg8.jpg" alt="" id="background" />
<!-- Remove the bgoverlay div if you don't want the dark pattern overlay above the image -->
<div class="bgoverlay"></div>
<!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
<div class="poswrapper"><div class="whitebackground"></div></div>
<div class="container main portfolio4column">
<!-- Header | Logo, Menu
================================================== -->
<div class="sixteen columns header">
<a href="index.html" class="logohover"><div class="logo"></div></a>
<div class="mainmenu">
<div id="mainmenu" class="ddsmoothmenu">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="index.html">Home Layout</a></li>
<li><a href="index_alternative.html">Portfolio Layout Example</a></li>
<li><a href="index_noslider.html">Video Layout</a></li>
</ul>
</li>
<li><a href="#">Features</a>
<ul>
<li><a href="page_shortcodes.html">Shortcodes</a></li>
<li><a href="page_clients.html">Clients</a></li>
<li><a href="page_full.html">Typography Full Page</a></li>
<li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
<li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
<li><a href="#">Another Menu Level</a>
<ul>
<li><a href="#">Menu Entry One</a></li>
<li><a href="#">Menu Entry Two</a></li>
<li><a href="#">Menu Entry Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
<li><a href="portfolio_1column_full.html">Portfolio One Column</a></li>
<li><a href="portfolio_single.html">Project Detail Page</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="blog_overview.html">Blog Overview</a></li>
<li><a href="blog_single.html">Single Blog Post</a></li>
<li><a href="blog_overview_full.html">Blog Overview Full</a></li>
<li><a href="blog_single_full.html">Single Blog Post Full</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<br style="clear: left" />
</div>
<!-- Responsive Menu -->
<form id="responsive-menu" action="#" method="post" />
<select>
<option value="" />Navigation
</select>
</form>
</div>
</div>
<!-- Page Title And Social
================================================== -->
<div class="pagetitle">
<div class="pagetitleholder"><h1>A single blog post<br />stay <span style="color:#ffd200;">informed</span>.</h1></div>
<div class="socialholder">
<ul class="socialicons">
<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
<li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
<li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
<li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
<li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
<li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
<li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
<li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
</ul>
</div>