<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--<p>SOURCE: <a href="http://luiszuno.com/themes/modus/" target="_blank"><i><b>Modus – Responsive HTML 5 Template</b></i></a> by Luis Zuno, @ansimuz LuisZuno.com</p>-->
<html class="no-js">
<head>
<meta charset="utf-8"/>
<title>MODUS</title>
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" media="all" href="css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- JS -->
<script src="http://luiszuno.com/themes/modus/js/jquery-1.6.4.min.js"></script>
<!-- <script src="js/less-grid-4.js"></script> -->
<script src="http://luiszuno.com/themes/modus/js/custom.js"></script>
<script src="http://luiszuno.com/themes/modus/js/tabs.js"></script>
<!-- Masonry -->
<script src="js/masonry.min.js" ></script>
<script src="js/imagesloaded.js" ></script>
<!-- ENDS Masonry -->
<!-- Tweet -->
<link rel="stylesheet" href="http://luiszuno.com/themes/modus/css/jquery.tweet.css" media="all" />
<script src="http://luiszuno.com/themes/modus/js/tweet/jquery.tweet.js" ></script>
<!-- ENDS Tweet -->
<!-- superfish -->
<link rel="stylesheet" media="screen" href="http://luiszuno.com/themes/modus/css/superfish.css" />
<script src="http://luiszuno.com/themes/modus/js/superfish-1.4.8/js/hoverIntent.js"></script>
<script src="http://luiszuno.com/themes/modus/js/superfish-1.4.8/js/superfish.js"></script>
<script src="http://luiszuno.com/themes/modus/js/superfish-1.4.8/js/supersubs.js"></script>
<!-- ENDS superfish -->
<!-- prettyPhoto -->
<script src="http://luiszuno.com/themes/modus/js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="http://luiszuno.com/themes/modus/js/prettyPhoto/css/prettyPhoto.css" media="screen" />
<!-- ENDS prettyPhoto -->
<!-- poshytip -->
<link rel="stylesheet" href="http://luiszuno.com/themes/modus/js/poshytip-1.1/src/tip-twitter/tip-twitter.css" />
<link rel="stylesheet" href="http://luiszuno.com/themes/modus/js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css" />
<script src="http://luiszuno.com/themes/modus/js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
<!-- ENDS poshytip -->
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Allan:700' rel='stylesheet' type='text/css'>
<!-- Flex Slider -->
<link rel="stylesheet" href="http://luiszuno.com/themes/modus/css/flexslider.css" >
<script src="http://luiszuno.com/themes/modus/js/jquery.flexslider-min.js"></script>
<!-- ENDS Flex Slider -->
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6-hacks.css" media="screen" />
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('*');
</script>
<![endif]-->
<!-- Lessgrid -->
<link rel="stylesheet" media="all" href="http://luiszuno.com/themes/modus/css/lessgrid.css"/>
<!-- modernizr -->
<script src="http://luiszuno.com/themes/modus/js/modernizr.js"></script>
<!-- mobile-nav -->
<div id="mobile-nav-holder">
<div class="wrapper">
<ul id="mobile-nav">
<li class="current-menu-item"><a href="http://luiszuno.com/themes/modus/index.html">home</a></li>
<li><a href="http://luiszuno.com/themes/modus/blog.html">blog</a></li>
<li><a href="http://luiszuno.com/themes/modus/page.html">about</a>
<ul>
<li><a href="http://luiszuno.com/themes/modus/page-full.html">Fullwidth Page</a></li>
<li><a href="http://luiszuno.com/themes/modus/page-features.html">Features</a></li>
<li><a href="http://luiszuno.com/themes/modus/page-typography.html">Typography</a></li>
<li><a href="http://luiszuno.com/themes/modus/page-icons.html">Icons</a></li>
</ul>
</li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="http://luiszuno.com/blog/downloads/modus-html-template">Grab it!</a></li>
</ul>
<div id="nav-open"><a href="#">Menu</a></div>
</div>
</div>
<!-- ENDS mobile-nav -->
<header>
<div class="wrapper">
<a href="http://luiszuno.com/themes/modus/index.html" id="logo"><img src="http://luiszuno.com/themes/modus/img/logo.png" alt="Tandem"></a>
<nav>
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">home<span class="subheader">welcome</span></a></li>
<li><a href="blog.html">blog<span class="subheader">read me</span></a></li>
<li><a href="page.html">about<span class="subheader">great features</span></a>
<ul>
<li><a href="page-full.html">Fullwidth Page</a></li>
<li><a href="page-features.html">Features</a></li>
<li><a href="page-typography.html">Typography</a></li>
<li><a href="page-icons.html">Icons</a></li>
</ul>
</li>
<li><a href="portfolio.html">portfolio<span class="subheader">recent work</span></a></li>
<li><a href="contact.html">contact<span class="subheader">get in touch</span></a></li>
<li><a href="http://luiszuno.com/blog/downloads/modus-html-template">Grab it!<span class="subheader">Download it For Free</span></a></li>
</ul>
</nav>
<div class="clearfix"></div>
</div>
</header>
<!-- MAIN -->
<div id="main">
<!-- social -->
<div id="social-bar">
<ul>
<li><a href="http://www.facebook.com" title="Become a fan"><img src="http://luiszuno.com/themes/modus/img/social/facebook_32.png" alt="Facebook" /></a></li>
<li><a href="http://www.twitter.com" title="Follow my tweets"><img src="http://luiszuno.com/themes/modus/img/social/twitter_32.png" alt="Facebook" /></a></li>
<li><a href="http://www.google.com" title="Add to the circle"><img src="http://luiszuno.com/themes/modus/img/social/google_plus_32.png" alt="Facebook" /></a></li>
</ul>
</div>
<!-- ENDS social -->
<!-- Content -->
<div id="content">
<!-- slider -->
<div class="flexslider home-slider">
<ul class="slides">
<li>
<img src="http://luiszuno.com/themes/modus/img/slides/01.jpg" alt="alt text" />
<p class="flex-caption">Placeholder images by thebeaststudio.com </p>
</li>
<li>
<img src="http://luiszuno.com/themes/modus/img/slides/02.jpg" alt="alt text" />
<p class="flex-caption">Visit luiszuno.com for more freebies!</p>
</li>
<li>
<img src="http://luiszuno.com/themes/modus/img/slides/03.jpg" alt="alt text" />
</li>
</ul>
</div>
<div class="shadow-slider"></div>
<!-- ENDS slider -->
<!-- Headline -->
<div class="headline">
Modus is a FREE HTML 5 Template!
</div>
<!-- ENDS Headline -->
<!-- featured -->
<h1 class="home-block-heading">Features</h1>
<div class="featured">
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-1.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-1.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">Responsive Design</a>
It will fit your large desktop screen, all the way down to your iPhone and of any Tablet or iPad. Try resizng your browser window if you don't believe.
</div>
<a class="link" href="single.html"></a>
</figure>
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-2.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-2.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">Page layouts</a>
Modus comes with a set of various page layouts to help you build a complete site.
</div>
<a class="link" href="single.html"></a>
</figure>
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-3.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-3.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">Contact Form</a>
Working contact form made in PHP and Ajax, pretty easy to configure. Just enter your subject and email address.
</div>
<a class="link" href="single.html"></a>
</figure>
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-4.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-4.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">Portfolio Pages</a>
Need to showcase your work. No worries use the portfolio template and display your work on a professional way.
</div>
<a class="link" href="single.html"></a>
</figure>
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-5.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-5.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">Blog Templates</a>
Use the blog page templates to create a theme in wordpress, tumblr or a different blog plataform.
</div>
<a class="link" href="single.html"></a>
</figure>
<figure>
<a href="http://luiszuno.com/themes/modus/img/dummies/full-6.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/full-6.jpg" alt="Alt text" /></a>
<div>
<a href="single.html" class="heading">WordPress Version</a>
I'm working with a talented WordPress Developer to bring a theme out of this template <a href="http://www.luiszuno.com/blog/work" >stay tuned</a>.
</div>
<a class="link" href="single.html"></a>
</figure>
<div class="clearfix"></div>
</div>
<!-- ENDS featured -->
<!-- text-posts -->
<h1 class="home-block-heading">From the blog</h1>
<ul class="text-posts">
<li>
<a href="single.html" class="heading">Get more freebies!</a>
visit <a href="http://www.luiszuno.com" >luiszuno.com</a> and get more free items to help you create awesome sites.
</li>
<li>
<a href="single.html" class="heading">Buy Premium themes</a>
Check my portfolio and buy outstanding WordPress Themes. Visit my <a href="http://www.luiszuno.com/blog/work" >Online Portfolio</a> to learn more.
</li>
<li>
<a href="single.html" class="heading">Themeforest Themes</a>
Visit <a href="http://themeforest.net/?ref=ansimuz" >themeforest</a> and grab great themes at a great price!
</li>
<li>
<a href="single.html" class="heading">Get more freebies!</a>
visit <a href="http://www.luiszuno.com" >luiszuno.com</a> and get more free items to help you create awesome sites.
</li>
<li>
<a href="single.html" class="heading">Buy Premium themes</a>
Check my portfolio and buy outstanding WordPress Themes. Visit my <a href="http://www.luiszuno.com/blog/work" >Online Portfolio</a> to learn more.
</li>
<li>
<a href="single.html" class="heading">Themeforest Themes</a>
Visit <a href="http://themeforest.net/?ref=ansimuz" >themeforest</a> and grab great themes at a great price!
</li>
</ul>
<!-- ENDS text-posts -->
<!-- home-gallery -->
<h1 class="home-block-heading">From the gallery</h1>
<ul class="home-gallery">
<li><a href="http://luiszuno.com/themes/modus/img/dummies/featured-1.jpg" data-rel="prettyPhoto" class="thumb"><img src="img/dummies/featured-1.jpg" alt="Alt text" /></a></li>
<li><a href="http://luiszuno.com/themes/modus/img/dummies/featured-2.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/featured-2.jpg" alt="Alt text" /></a></li>
<li><a href="http://luiszuno.com/themes/modus/img/dummies/featured-3.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/featured-3.jpg" alt="Alt text" /></a></li>
<li><a href="http://luiszuno.com/themes/modus/img/dummies/featured-4.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/featured-4.jpg" alt="Alt text" /></a></li>
<li><a href="http://luiszuno.com/themes/modus/img/dummies/featured-4.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/featured-5.jpg" alt="Alt text" /></a></li>
<li><a href="img/dummies/featured-6.jpg" data-rel="prettyPhoto" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/featured-6.jpg" alt="Alt text" /></a></li>
</ul>
<div class="clearfix"></div>
<!-- ENDS home-gallery -->
</div>
<!-- ENDS content -->
<div class="clearfix"></div>
<div class="shadow-main"></div>
</div>
<!-- ENDS MAIN -->
<footer>
<div class="wrapper">
<ul id="footer-cols">
<li class="first-col">
<div class="widget-block">
<h4>Recent posts</h4>
<div class="recent-post">
<a href="#" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/54x54.gif" alt="Post" /></a>
<div class="post-head">
<a href="#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span>
</div>
</div>
<div class="recent-post">
<a href="#" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/54x54.gif" alt="Post" /></a>
<div class="post-head">
<a href="#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span>
</div>
</div>
<div class="recent-post">
<a href="#" class="thumb"><img src="http://luiszuno.com/themes/modus/img/dummies/54x54.gif" alt="Post" /></a>
<div class="post-head">
<a href="#">Pellentesque habitant morbi senectus</a><span>March 12, 2011</span>
</div>
</div>
</div>
</li>
<li class="second-col">
<div class="widget-block">
<h4>Dummy text</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ege. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
</div>
</li>
<li class="third-col">
<div class="widget-block">
<div id="tweets" class="footer-col tweet">
<h4>Twitter widget</h4>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="to-top"></div>
</footer>
/* Import other css */
@import url('reset.css');
@import url('social-icons.css');
@import url('comments.css');
@import url('elements.css');
/* GENERAL ------------------------------------------------------------*/
.clearfix{ clear:both; }
.wrapper,
#main{
margin: 0 auto;
position: relative;
}
body{
background: #ececec url(http://luiszuno.com/themes/modus/img/main-pattern.png);
color: #888;
}
body p{
margin-bottom: 21px;
}
body a{
text-decoration: none;
color: #444;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
body a:hover{
color: #fe8300;
}
#logo{
display: block;
padding-top: 97px;
float: left;
}
#logo:hover{ opacity: 0.8;}
.headline{
font-family: Allan, helvetica, arial, sans-serif;
font-size: 36px;
line-height: 1.5em;
text-align: center;
padding: 20px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 1);
margin-bottom: 50px;
background: #eaeaea;
color: #444;
}
#page-content{
float: left;
width: 528px;
margin-left: 24px;
margin-top: 24px;
padding-bottom: 60px;
}
#page-content-full{
margin-right: 24px;
margin-left: 24px;
margin-top: 24px;
padding-bottom: 60px;
}
.home-block-heading{
border-bottom: 1px solid #ccc;
color: #444;
padding-bottom: 20px;
margin-left: 24px;
margin-right: 24px;
margin-bottom: 32px;
}
.h-heading{
border-bottom: 1px solid #ccc;
color: #444;
padding-bottom: 20px;
margin-bottom: 32px;
}
.h-margin{
margin-bottom: 32px;
}
.block-divider{
margin-bottom: 120px;
}
.alignleft {
float: left;
margin: 5px 10px 5px 0;
}
/* MASTHEAD ------------------------------------------------------------*/
#masthead{
position: relative;
margin-top: -38px;
background: #1c1d1d;
padding-left: 24px;
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
box-shadow: 0px 0px 4px rgba(0,0,0,.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 1);
}
#masthead span{
line-height: 69px;
}
#masthead .head{
font-family: Allan, helvetica, arial, sans-serif;
font-size: 21px;
color: #ddd;
}
#masthead .subhead{
font-family: helvetica, arial, sans-serif;
font-size: 13px;
color: #888;
margin-left: 21px;
}
#masthead .breadcrumbs{
position: absolute;
overflow: hidden;
top: 24px;
right: 24px;
height: auto;
font-size: 11px;
color: #444;
}
#masthead .breadcrumbs a{
text-decoration: none;
color: #888;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#masthead .breadcrumbs a:hover{
color: #fe8300;
}
#masthead .breadcrumbs li{
display: inline;
}
/* HEADINGS ------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6{
font-family: Allan, helvetica, arial, sans-serif;
color: #444;
}
h1{ font-size: 36px; }
h2{ font-size: 24px; }
h3{ font-size: 21px; }
h4{ font-size: 18px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }
h1.heading, h2.heading, h3.heading, h4.heading, h5.heading, h6.heading{
margin-bottom: 21px;
}
/* HEADER ------------------------------------------------------------*/
header{
position: relative;
height: 225px;
background: url(http://luiszuno.com/themes/modus/img/header.png) repeat-x center center;
display: block;
}
/* NAVIGATION ------------------------------------------------------------*/
nav{
float: right;
line-height: 1.8em;
}
nav a{
text-decoration: none;
color: #acacac;
}
#nav{
margin-top: 97px;
}
#nav li{
display: inline;
font-size: 16px;
float: left;
}
#nav>li>a{
display: block;
overflow: hidden;
padding: 5px 10px 0px 10px;
color: #f5f5f5;
background: rgba(0,0,0,.0);
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav>li>a:hover,
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
background: #303232;
background: rgba(0,0,0,.2);
border-bottom: solid #1c1d1d 5px;
}
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #fe8300;
}
#nav>li>a>.subheader{
color: #717171;
display: block;
font-size: 11px;
margin-top: -8px;
font-weight: lighter;
}
#nav .sf-sub-indicator{
float: right;
}
#nav>li>a>.sf-sub-indicator{
display: none;
}
/* sub navigation -----------------------------------------------------*/
#nav>li ul{
display: block;
margin-top: 4px;
background: #1c1d1d;
}
#nav>li ul li a{
display: block;
padding: 10px 15px;
display: block;
font-size: 11px;
color: #717171;
text-decoration: none;
}
#nav>li ul li a span{
display: block;
}
#nav>li ul li a:hover{
background: #717171;
color: #1c1d1d;
}
/* MOBILE NAVIGATION ------------------------------------------------*/
#mobile-nav-holder{
z-index: 1000;
background: #191a1a;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
#mobile-nav{
display: none;
padding-top: 20px;
padding-bottom: 30px;
}
#mobile-nav-holder a{
display: block;
padding: 7px 14px;
text-decoration: none;
color: #f5f5f5;
font-size: 13px;
font-weight: lighter;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#mobile-nav-holder li a{
border-bottom: 1px solid #222;
}
#mobile-nav-holder li:last-child a,
#mobile-nav-holder li > ul a{
border: none;
}
#mobile-nav-holder li > ul a{
color: #888888;
margin-left: 30px;
}
#mobile-nav-holder a:hover,
#mobile-nav-holder a:focus {
background: #0d0d0d;
}
#mobile-nav-holder a:hover{
padding-left: 20px;
}
#mobile-nav-holder #nav-open{
background: #191a1a;
position: absolute;
right: 0px;
z-index: 2000;
}
#mobile-nav-holder #nav-open a{
display: block;
padding: 7px 14px;
}
#mobile-nav-holder #nav-open a:hover,
#mobile-nav-holder #nav-open a:focus{
background: #191a1a;
}
#mobile-nav-holder #nav-open:hover a{
color: #cccccc;
}
#mobile-nav > .current-menu-item > a,
#mobile-nav > .current_page_item > a{
color: #fe8300;
}
/* COLUMNS LAYOUT----------------------------------------------------------*/
.one-half,
.one-third{
float:left;
margin-bottom: 40px;
margin-right: 4.54%;
position:relative;
}
.one-half{
width: 47.72%;
}
.one-third{
width: 30.30%;
}
.last {
clear:right;
margin-right:0 !important;
}
/* MAIN ------------------------------------------------------------*/
#main{
}
#main #content{
position: relative;
display: block;
width: 852px;
float: left;
background: #f5f5f5;
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.1);
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.1);
box-shadow: 0px 0px 4px rgba(0,0,0,.1);
}
.shadow-main{
width: 852px;
height: 11px;
margin-left: 68px;
background: url(http://luiszuno.com/themes/modus/img/shadow-main.png) no-repeat top center;
}
/* SOCIAL --------------------------------------------------------*/
#social-bar{
display: block;
float: left;
width: 68px;
background: url(http://luiszuno.com/themes/modus/img/social-desktop.png) no-repeat bottom center;
padding: 10px 0px 20px 0px;
}
#social-bar ul{
display: block;
margin: 0 auto ;
width: 32px;
}
#social-bar li{
display: block;
padding: 0px;
margin: 3px 0px;
}
#social-bar a{ display: block; }
/* FEATURED ------------------------------------------------------------*/
.featured{ padding-bottom: 70px; }
.featured figure{
position: relative;
float: left;
width: 252px;
margin-left: 24px;
margin-bottom: 21px;
}
.featured figure .thumb{
display: block;
background: url(http://luiszuno.com/themes/modus/img/plus.png) no-repeat center center;
margin-bottom: 21px;
-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
-moz-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
box-shadow: 3px 3px 0px rgba(0,0,0,.2);
}
.featured figure .thumb:hover img{
opacity: 0.15;
}
.featured figure:hover .link{
display: block;
}
.featured figure img{
max-width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.featured figure .heading{
text-decoration: none;
font-style: normal;
font-weight: bold;
color: #444;
font-size: 16px;
display: block;
margin-bottom: 14px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.featured figure .heading:hover{
color: #fe8300;
}
.featured figure .link{
display: none;
position: absolute;
top: -2px;
right: 10px;
background: url(http://luiszuno.com/themes/modus/img/ribbon-link.png) no-repeat top left;
width: 33px;
height: 61px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.featured figure .link:hover{
top: 0px;
}
/* PORTFOLIO ------------------------------------------------------------*/
.featured.portfolio-list{
margin-top: 70px;
}
.project-heading{
margin: 44px 24px 44px 24px;
}
.project-heading h1{
float: left;
margin-right: 20px;
}
.project-heading .launch{
display: block;
float: left;
text-decoration: none;
color: #888;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.project-heading .launch:hover{
color: #fe8300;
}
.project-description{
float: left;
margin-left: 24px;
width: 528px;
margin-bottom: 40px;
}
.project-info{
float: left;
margin-left: 24px;
width: 252px;
margin-bottom: 40px;
}
.project-info strong{
color: #444;
}
.project-pager{
overflow: hidden;
margin: 0px 24px 0px 24px;
padding-bottom: 50px;
}
.project-pager a{
text-decoration: none;
color: #444;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.project-pager a:hover{
text-decoration: none;
color: #fe8300;
}
.project-pager .prev-project{
float: left;
}
.project-pager .next-project{
float: right;
}
/* RELATED PROJECTS ---------------------------------------------------*/
.related-projects{
display: block;
background:#eaeaea;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 24px 0px 50px 0px;
}
.related-heading{
font-weight: bold;
color: #444;
margin: 0px 0px 24px 24px;
}
.related-projects .related-list{
display: block;
}
.related-projects figure{
display: block;
float: left;
margin-left: 24px;
width: 252px;
}
.related-projects .thumb{
display: block;
background: url(http://luiszuno.com/themes/modus/img/plus.png) no-repeat center center;
margin-bottom: 21px;
-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
-moz-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
box-shadow: 3px 3px 0px rgba(0,0,0,.2);
}
.related-projects .thumb:hover img{
opacity: 0.15;
}
.related-projects figure img{
max-width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.related-projects .heading{
text-decoration: none;
font-style: normal;
color: #444;
text-align: center;
display: block;
margin-bottom: 14px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.related-projects .heading:hover{
color: #fe8300;
}
/* RETRACTIL SIDEBAR ------------------------------------------------------------*/
aside.retractil{
position: absolute;
top: 34px;
left: 0px;
background: #eaeaea;
width: 276px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,.5);
box-shadow: 0px 0px 2px rgba(0,0,0,.5);
}
aside.retractil #sidebar-opener{
cursor: pointer;
margin: 15px 24px;
color: #444;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
aside.retractil #sidebar-opener:hover{
color: #fe8300;
}
aside.retractil #sidebar-closer{
display: none;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
aside.retractil #sidebar-closer:hover{
opacity: 0.5;
}
aside.retractil #sidebar-content{
margin-left: 24px;
margin-right: 24px;
margin-bottom: 50px;
display: none;
}
aside.retractil #sidebar-content a{
text-decoration: none;
color: #888;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
aside.retractil #sidebar-content a:hover{
color: #444;
}
/* HOME-GALLERY ------------------------------------------------------------*/
.home-gallery{
display: block;
padding-bottom: 70px;
}
.home-gallery li{
display: block;
float: left;
margin-left: 24px;
margin-bottom: 21px;
width: 252px;
}
.home-gallery .thumb{
line-height: 0em;
display: block;
background: url(http://luiszuno.com/themes/modus/img/plus.png) no-repeat center center;
-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
-moz-box-shadow: 3px 3px 0px rgba(0,0,0,.2);
box-shadow: 3px 3px 0px rgba(0,0,0,.2);
}
.home-gallery img{
max-width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.home-gallery .thumb:hover img{
opacity: 0.15;
}
/* TEXT POSTS ------------------------------------------------------------*/
.text-posts{
overflow: hidden;
padding-bottom: 70px;
}
.text-posts li{
display: block;
float: left;
margin-left: 24px;
margin-bottom: 21px;
width: 252px;
}
.text-posts .heading{
display: block;
font-weight: bold;
font-size: 13px;
color: #444;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.text-posts .heading:hover{
color: #fe8300;
}
/* BLOG ------------------------------------------------------------*/
#posts-list,
#post-content{
width: 528px;
float: left;
margin-top: 24px;
margin-bottom: 24px;
margin-left: 24px;
}
#post-content .content-area{
padding-bottom: 50px;
}
#posts-list article{
margin-bottom: 80px;
}
#posts-list .feature-image,
#post-content .feature-image{
width: 100%;
margin-bottom: 21px;
background: url(http://luiszuno.com/themes/modus/img/plus.png) center center no-repeat;
line-height: 0em;
}
#posts-list .feature-image img,
#post-content .feature-image img{
max-width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#posts-list .feature-image:hover img,
#posts-content .feature-image:hover img{
opacity: 0.2;
}
#posts-list .post-heading,
#post-content .post-heading{
display: block;
text-decoration: none;
color: #444;
line-height: 1em;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#posts-list .post-heading:hover{
color: #fe8300;
}
#posts-list .meta,
#post-content .meta{
border-bottom: 1px solid #ccc;
margin-bottom: 11px;
padding-bottom: 11px;
font-style: italic;
font-size: 11px;
}
#posts-list .meta a,
#post-content .meta a{
color: #444;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#posts-list .meta a:hover,
#post-content .meta a:hover{
color: #fe8300;
}
#posts-list .excerpt{
margin-bottom: 21px;
}
#posts-list .read-more{
background: #eaeaea;
padding: 5px 10px;
text-decoration: none;
color: #888;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
box-shadow: 0px 0px 2px rgba(0,0,0,.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#posts-list .read-more:hover{
color: #fff;
background: #fe8300;
}
/* SIDEBAR ------------------------------------------------------------*/
#sidebar{
width: 252px;
float: left;
margin-top: 24px;
margin-bottom: 24px;
margin-left: 24px;
}
#sidebar a{
color: #444;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#sidebar a:hover{ color: #fe8300; }
#sidebar h4{
margin-bottom: 10px;
}
#sidebar .block{
padding: 16px;
background: #eaeaea;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,.2);
box-shadow: 0px 0px 2px rgba(0,0,0,.2);
margin-bottom: 24px;
}
/* PAGER ------------------------------------------------------------*/
.pager{
overflow: hidden;
display: block;
font-size: 11px;
margin: 0px 24px 0px 24px;
padding-bottom: 50px;
}
.pager li{
display: block;
margin-right: 5px;
float: left;
}
.pager li a{
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #484848;
width: 20px;
border: 1px solid #ccc;
line-height: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pager li.active a,
.pager li:hover a{
color: #fff;
background: #fe8300;
}
.pager .paged{
float:right;
font-style:italic;
}
/* CONTACT ------------------------------------------------------------*/
#map{
display: block;
height: 300px;
width: 100%;
margin-bottom: 24px;
}
.address-block li{
padding-left: 20px;
}
.address-block .address{ background: url(http://luiszuno.com/themes/modus/img/icon-address.png) no-repeat top left }
.address-block .phone{ background: url(http://luiszuno.com/themes/modus/img/icon-phone.png) no-repeat top left}
.address-block .mobile{ background: url(http://luiszuno.com/themes/modus/img/icon-mobile.png) no-repeat top left }
.address-block .email{ background: url(http://luiszuno.com/themes/modus/img/icon-email.png) no-repeat top left }
/* FOOTER ------------------------------------------------------------*/
footer{
background:
url(http://luiszuno.com/themes/modus/img/footer-line.png) repeat-x top left,
url(http://luiszuno.com/themes/modus/img/noise.png);
background-color: #e6e5e1;
min-height: 100px;
text-shadow: 0 1px rgba(255, 255, 255, .9);
}
footer a{
color: #444;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
footer a:hover{
color: #fe8300;
}
footer .wrapper{
margin-top: -60px;
padding-bottom: 60px;
}
#footer-cols{
padding-top: 100px;
}
#footer-cols>li{
display: block;
float: left;
margin-bottom: 20px;
}
#footer-cols>li{
display: block;
float: left;
width: 252px;
margin-left: 24px;
}
#footer-cols h4{
margin-bottom: 21px;
}
#footer-cols>li.first-col{
}
#footer-cols>li.second-col{
}
#footer-cols>li.third-col{ margin-right: 0px; }
footer #to-top{
display: none;
width: 68px;
height: 68px;
margin: 0 auto;
background: url(http://luiszuno.com/themes/modus/img/to-top.png) no-repeat;
cursor: pointer;
}
footer #to-top:hover{ opacity: 0.7 }
/* WIDGETS ------------------------------------------------------------*/
.recent-post{
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
.recent-post .thumb{
display: block;
float: left;
line-height: 0em;
background: #fff;
padding: 3px;
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.3);
box-shadow: 0px 0px 4px rgba(0,0,0,.3);
}
.recent-post .post-head{
float: left;
width: 184px;
margin-left: 7px;
font-size: 13px;
line-height: 1.5em;
}
.recent-post .post-head span{
display: block;
font-size: 11px;
color: #888888;
}
