/*
* Theme: Hanna - Responsive HTML5 One-Page Portfolio Template
* Author: GuuThemes
* Author URL: www.guuhuu.com
* Version: 1.0
*/

/* Table of Contents
==================================================
	
1 - Reset & Basics
2 - Responsive 960 Grid
3 - Body (Global Styles)
4 - Page Styles
5 - Media Queries
6 - Font-Awesome (Icon Font)


/* 1 - Reset & Basics (Inspired by E. Meyers)
================================================== */
	
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; 
}

cite {
	text-align: right;
	margin-top: 10px;
}

table {
	border-collapse: collapse;
	border-spacing: 0; 
}
	
::-moz-selection {
	background: #71a4a1;
	color: #fff;
	text-shadow: none
}

::selection {
	background: #71a4a1;
	color: #fff;
	text-shadow: none
}

/* Typography
--------------------------------------------------*/
	
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	color: #333;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts for the headings. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	font-weight: normal; 
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a { 
	font-weight: inherit; 
}

h1 { 
	font-size: 30px; 
	line-height: 43px; 
	margin-bottom: 14px;
}

h2 { 
	font-size: 25px; 
	line-height: 40px; 
	margin-bottom: 10px; 
}

h3 { 
	font-size: 23px; 
	line-height: 34px; 
	margin-bottom: 8px; 
}

h4 { 
	font-size: 21px; 
	line-height: 30px; 
	margin-bottom: 4px; 
}

h5 { 
	font-size: 17px; 
	line-height: 24px; 
}

h6 { 
	font-size: 14px; 
	line-height: 21px; 
}

p { 
	margin: 0 0 20px 0; 
}

p img { 
	margin: 0; 
}

em { 
	font-style: italic;
}

strong { 
	font-weight: bold; 
	color: #333; 
}

small { 
	font-size: 80%; 
}

blockquote, 
blockquote p { 
	font-size: 17px; 
	line-height: 24px; 
	color: #777; 
	font-style: italic; 
}

blockquote { 
	margin: 0 0 20px; 
	padding: 9px 20px 0 19px; 
	border-left: 1px solid #999; 
}

blockquote cite { 
	display: block; 
	font-size: 12px; 
	color: #555; 
}

blockquote cite:before { 
	content: "\2014 \0020"; 
}

blockquote cite a, 
blockquote cite a:visited, 
blockquote cite a:visited { 
	color: #555; 
}

/* Links
--------------------------------------------------*/
	
a, 
a:visited { 
	color: #71a4a1; 
	text-decoration: underline; 
	outline: 0;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s; 
}

a:hover, 
a:focus { 
	color: #000; 
}

p a, 
p a:visited { 
	line-height: inherit; 
}

/* Lists
--------------------------------------------------*/
	
ul, 
ol { 
	margin-bottom: 20px; 
}

ul { 
	list-style: none outside; 
}

ol { 
	list-style: decimal; 
}

ol, 
ul.square, 
ul.circle, 
ul.disc { 
	margin-left: 30px; 
}

ul.square { 
	list-style: square outside; 
}

ul.circle { 
	list-style: circle outside; 
}

ul.disc { 
	list-style: disc outside; 
}

ul ul li, 
ul ol li,
ol ol li, 
ol ul li { 
	margin-bottom: 6px; 
}

li { 
	line-height: 18px; 
	margin-bottom: 12px; 
}

ul.large li { 
	line-height: 21px; 
}

li p { 
	line-height: 21px; 
}

/* Buttons
--------------------------------------------------*/

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	position: relative;
	background-color: #333;
	border: none!important;
	color: #f6f8f8;
	display: inline-block;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 5px;
	padding: 5px 10px;
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s;  
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: #71a4a1; 
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background-color: #71a4a1; 
}

.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center; 
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Forms
--------------------------------------------------*/

form {
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: left; 
}

fieldset {
	margin-bottom: 20px; 
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
	border: 1px solid #fff;
	padding: 6px 6px 6px 8px;
	outline: none;
	font: 12px/23px Georgia, serif;
	font-style: italic;
	color: #fff;
	margin: 0;
	width: 80%;
	display: block;
	margin-bottom: 20px;
	background-color: #333;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

select {
	padding: 0; 
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
	border: 1px solid #71a4a1;
	color: #fff;
}

textarea {
	min-height: 150px; 
}

label,
legend {
	display: block;
	font-weight: bold;
	font-size: 12px;
}

select {
	width: 220px;
	padding: 6px; 
}

input[type="checkbox"] {
	display: inline; 
}

label span,
legend span {
	font-weight: normal;
	font-size: 12px;
	color: #444;
}

input.error,
textarea.error {
	margin-bottom: 3px;
}
	
.error {
	color: #cc3333;
}
	
#response {
  margin-bottom: 20px;
  text-align: center;
}

#response .success {
  color: #70ae32;
}

#response .failure {
  color:  #cc3333;
}

/* 2 - Responsive 960 Grid (Inspired by Skeleton Framework - www.getskeleton.com)
================================================== */

/* Base 960 Grid
--------------------------------------------------*/

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.container .column,
.container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

.row { 
	margin-bottom: 20px; 
}

/* Nested Column Classes */

.column.alpha,
.columns.alpha { 
	margin-left: 0; 
}

.column.omega,
.columns.omega { 
	margin-right: 0; 
}

/* Base Grid */

.container .one.column,
.container .one.columns { 
	width: 40px; }

.container .two.columns { 
	width: 100px; 
}

.container .three.columns { 
	width: 160px; 
}

.container .four.columns { 
	width: 220px; 
}

.container .five.columns { 
	width: 280px; 
}

.container .six.columns { 
	width: 340px; 
}

.container .seven.columns { 
	width: 400px; 
}

.container .eight.columns { 
	width: 460px; 
}

.container .nine.columns { 
	width: 520px; 
}

.container .ten.columns { 
	width: 580px; 
}

.container .eleven.columns { 
	width: 640px; 
}

.container .twelve.columns { 
	width: 700px; 
}

.container .thirteen.columns { 
	width: 760px; 
}

.container .fourteen.columns { 
	width: 820px; 
}

.container .fifteen.columns { 
	width: 880px; 
}

.container .sixteen.columns { 
	width: 940px; 
}

.container .one-third.column { 
	width: 300px; 
}

.container .two-thirds.column { 
	width: 620px; 
}

/* Offsets */

.container .offset-by-one { 
	padding-left: 60px; 
}

.container .offset-by-two { 
	padding-left: 120px; 
}

.container .offset-by-three { 
	padding-left: 180px; 
}

.container .offset-by-four { 
	padding-left: 240px; 
}

.container .offset-by-five { 
	padding-left: 300px; 
}

.container .offset-by-six { 
	padding-left: 360px; 
}

.container .offset-by-seven { 
	padding-left: 420px; 
}

.container .offset-by-eight { 
	padding-left: 480px; 
}

.container .offset-by-nine { 
	padding-left: 540px; 
}

.container .offset-by-ten { 
	padding-left: 600px; 
}

.container .offset-by-eleven { 
	padding-left: 660px; 
}

.container .offset-by-twelve { 
	padding-left: 720px; 
}

.container .offset-by-thirteen { 
	padding-left: 780px; 
}

.container .offset-by-fourteen { 
	padding-left: 840px; 
}

.container .offset-by-fifteen {
	padding-left: 900px; 
}

/* Tablet (Portrait)
--------------------------------------------------*/

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    
    .container { 
    	width: 768px 
    }
    
    .container .column,
    .container .columns {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .column.alpha,
    .columns.alpha {
        margin-left: 0;
        margin-right: 10px;
    }
    
    .column.omega,
    .columns.omega {
        margin-right: 0;
        margin-left: 10px;
    }
    
    .alpha.omega {
        margin-left: 0;
        margin-right: 0;
    }
    
    .container .one.column,
    .container .one.columns { 
    	width: 28px; 
    }
    
    .container .two.columns { 
    	width: 76px; 
    }
    
    .container .three.columns { 
    	width: 124px;
    }
    
    .container .four.columns { 
    	width: 172px; 
    }
    
    .container .five.columns { 
    	width: 220px;
    }
    
    .container .six.columns { 
    	width: 268px; 
    }
    
    .container .seven.columns { 
    	width: 316px; 
    }
    
    .container .eight.columns { 
    	width: 364px; 
    }
    
    .container .nine.columns { 
    	width: 412px; 
    }
    
    .container .ten.columns { 
    	width: 460px; 
    }
    
    .container .eleven.columns { 
    	width: 508px; 
    }
    
    .container .twelve.columns { 
    	width: 556px; 
    }
    
    .container .thirteen.columns { 
    	width: 604px; 
    }
    
    .container .fourteen.columns { 
    	width: 652px; 
    }
    
    .container .fifteen.columns { 
    	width: 700px; 
    }
    
    .container .sixteen.columns { 
    	width: 748px; 
    }
    
    .container .one-third.column { 
    	width: 236px; 
    }
    
    .container .two-thirds.column { 
    	width: 492px; 
    }
    
    /* Offsets */
    
    .container .offset-by-one { 
    	padding-left: 48px; 
    }
    
    .container .offset-by-two { 
    	padding-left: 96px; 
    }
    
    .container .offset-by-three { 
    	padding-left: 144px; 
    }
    
    .container .offset-by-four { 
    	padding-left: 192px; 
    }
    
    .container .offset-by-five { 
    	padding-left: 240px; 
    }
    
    .container .offset-by-six { 
    	padding-left: 288px; 
    }
    
    .container .offset-by-seven { 
    	padding-left: 336px; 
    }
    
    .container .offset-by-eight { 
    	padding-left: 384px; 
    }
    
    .container .offset-by-nine { 
    	padding-left: 432px; 
    }
    
    .container .offset-by-ten { 
    	padding-left: 480px; 
    }
    
    .container .offset-by-eleven { 
    	padding-left: 528px; 
    }
    
    .container .offset-by-twelve { 
    	padding-left: 576px; 
    }
    
    .container .offset-by-thirteen { 
    	padding-left: 624px; 
    }
    
    .container .offset-by-fourteen { 
    	padding-left: 672px; 
    }
    
    .container .offset-by-fifteen { 
    	padding-left: 720px; 
    }

}

/* Mobile (Portrait)
--------------------------------------------------*/

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    
    .container { 
    	width: 260px; 
    }
    
    .container .columns,
    .container .column { 
   		margin: 0; 
   	}

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { 
    	width: 260px; 
    }

    /* Offsets */
    .container .offset-by-one,
    .container .offset-by-two,
    .container .offset-by-three,
    .container .offset-by-four,
    .container .offset-by-five,
    .container .offset-by-six,
    .container .offset-by-seven,
    .container .offset-by-eight,
    .container .offset-by-nine,
    .container .offset-by-ten,
    .container .offset-by-eleven,
    .container .offset-by-twelve,
    .container .offset-by-thirteen,
    .container .offset-by-fourteen,
    .container .offset-by-fifteen { 
    	padding-left: 0;
    }

}

/* Mobile (Landscape)
--------------------------------------------------*/

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    .container { 
    	width: 300px; 
    }
    
    .container .columns,
    .container .column { 
    	margin: 0; 
    }

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column { 
    	width: 300px; 
    }

}

/* Clearing (Clearfix)
--------------------------------------------------*/

/* Self Clearing Goodness */

.container:after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  	content: '\0020';
  	display: block;
  	overflow: hidden;
  	visibility: hidden;
  	width: 0;
  	height: 0; 
}

.row:after,
.clearfix:after {
  	clear: both; 
}

.row,
.clearfix {
  	zoom: 1; 
}

/* You can also use a <br class="clear" /> to clear columns */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* 3 - Body (Global Styles)
================================================== */

body {
	background: url('../images/body_background_pattern.png') #fff repeat;
	font: 13px/23px Georgia, serif;
	color: #444;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

body:before {
	content: ""; 
	position: fixed; 
	top: -10px; 
	left: 0; 
	width: 100%;
	height: 10px; 
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
	box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
	z-index: 1000;
}

/* 4 - Page Styles
================================================== */

/* Header (Global Header)
--------------------------------------------------*/

#header-global[role="banner"] {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	width: 100%;
	min-height: 115px;
	padding: 20px 0;
	background: url('../images/header_background_pattern.png') repeat;
	overflow: hidden;
	text-transform: uppercase;
	text-align: center;
	display: table;
	z-index: 1000;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
	box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
}

#header-global[role="banner"] .row {
	display: table-cell;
	vertical-align: middle;
}

#logo a {
	margin-top: 20px;
	display: inline-block;
}

#logo img {
	max-width: 100%;
	height: auto;
}

/* Footer (Global Footer)
--------------------------------------------------*/

#footer-global[role="contentinfo"] {
	border-top: 4px solid #2e2c2d;
	color: #fff;
	width: 100%;
	padding: 20px 0 10px 0;
	background: url('../images/black_grunge_background_pattern.png') repeat;
	text-align: center;
}

/* Header (Section Headings - Includes alternative for 'About' Section)
--------------------------------------------------*/

.section-heading {
	background: url('../images/section_heading_background_pattern.png') repeat-x;
	background-position: 0 15px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 30px;
}

#about .section-heading {
	background: url('../images/ornate_pattern_icon.png') no-repeat top center;
	padding-top: 110px;
}

/* Section Headings Typography 
--------------------------------------------------*/

#latest-work h1 span,
#recent-news h1 span,
#contact h1 span {
	background-color: rgba(51, 51, 51, .9);
	border: 4px double #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	background-color: none;
	color: #fff;
	padding: 2px;
	padding: 7px 15px;
	line-height: 1.3;
	display: inline-block;
}

/* Text/Image Mask (This enables a background image to be shown through your text) Only works in Webkit browsers currently. */

#latest-work .mask h1,
#recent-news .mask h1,
#contact .mask h1 {
	margin-top: -6px;
	width: 100%; 
	-webkit-mask-image: url(../images/mask.png); 
	-o-mask-image: url(../images/mask.png); 
	-moz-mask-image: url(../images/mask.png); 
	mask-image: url(../images/mask.png); 
}

/* Main Navigation 
--------------------------------------------------*/

#header-navigation[role="navigation"],
#right-navigation[role="navigation"] {
	margin-top: 25px;
	text-align: center;
}

#header-navigation[role="navigation"] ul,
#right-navigation[role="navigation"] ul {
	display: inline-block;
	margin-bottom: 0;
}

#header-navigation[role="navigation"] li,
#right-navigation[role="navigation"] li {
	float: left;
	text-shadow: 0 1px 1px #fff;
}

#header-navigation[role="navigation"] li a,
#right-navigation[role="navigation"] li a,
#header-navigation[role="navigation"] li a:visited,
#right-navigation[role="navigation"] li a:visited {
	border-left: 1px solid #999;
	color: #333;
	padding: 0 20px;
	text-decoration: none;
	zoom: 1;
}

#header-navigation[role="navigation"] li a:hover,
#right-navigation[role="navigation"] li a:hover,
#header-navigation[role="navigation"] li a:focus,
#right-navigation[role="navigation"] li a:focus {
	color: #71a4a1;
	text-decoration: none;
}

#header-navigation[role="navigation"] li.home a {
	border: none;
	padding-left: 0;
}

#header-navigation[role="navigation"] li a.active {
	color: #71a4a1;
}

/* Back to Top Link
--------------------------------------------------*/

.back-to-top {
	text-align: center;
}

.back-to-top .row {
	margin-bottom: 0;
}

a.back-to-top-link {
	color: #fff;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	text-transform: uppercase;
	display: inline-block;
	width: 156px; 
	height: 69px; 
	background: url('../images/back_to_top_background.png') no-repeat;
	text-decoration: none; 
}

a.back-to-top-link:hover {
	color: #71a4a1;
}

a.back-to-top-link span {
	line-height: 95px;
}

/* Read More Button
--------------------------------------------------*/

a.read-more-btn {
	position: relative;
	background-color: #333;
	border-bottom: none!important;
	color: #f6f8f8;
	display: inline-block;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	margin-top: 5px;
	padding: 5px 10px;
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px;
}

a.read-more-btn:hover {
	background-color: #71a4a1;
}

/* Content Slider
--------------------------------------------------*/

/* The Content Slider uses Flexslider. All styling for this can be found in /css/flexslider.css */


/* Isotope (Portfolio Filtering)
--------------------------------------------------*/

.isotope-item {
  z-index: 2;
}

.isotope-hidden .isotope-item {
  pointer-events: none;
  z-index: 1;
}

/* Isotope CSS3 transitions */

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/* disabling Isotope CSS3 transitions */

.isotope .no-transition,
.isotope .no-transition .isotope-item,
.isotope .isotope-item .no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* Latest Work/Portfolio Section
--------------------------------------------------*/

#latest-work {
	margin-top: 30px;
}

/* Filter Navigation */

#portfolio-filter {
	text-align: center;
}

#filter {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 -1px 0 #ccc, 0 1px 0 #fff;
	display: inline-block;
	margin-bottom: 0;
	padding-top: 10px;
}

#filter li {
	float: left;
	font-size: 12px;
	padding: 0 10px;
}

#filter li a {
	color: #666;
	text-decoration: none;
}

#filter li a:hover,
#filter li .current {
	color: #000;
}

#filter em {
	font-weight: 600;
	padding: 5px 0 10px 0;
	text-shadow: 0 1px 1px #fff;
}

/* Portfolio Items */

#portfolio-items .item img {
	position: relative;
}

.item {
	color: #212121;
	margin: 0;
	height: 330px;
	position: relative;
}

#portfolio-items .thumbnail {
	text-align: center;
	border: 4px solid #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#portfolio-items img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Portfolio Items - Image Rollover Effect */

.overlayer .overlay-default.portfolio {
	background: none;
}

.roll {
    background-color: #71a4a1;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.roll em {
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	margin-top: 95px;
	padding: 7px 9px 6px 8px;
	color: #fff;
	font-size: 14px;
	display: inline-block;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-style: normal;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s; 
}

.roll em:hover {
	border-left: 1px solid #9cccc9;
	border-right: 1px solid #9cccc9;
}

.roll [class^="icon-"] {
	color: #fff;
	display: inline-block;
	text-align: center;
	margin-right: 5px;
}

/* Portfolio Items - Typography */

.item h2 {
	font-family: Georgia, serif;
	font-size: 16px;
	font-style: italic;
	margin-top: 10px;
	text-align: left;
	text-transform: uppercase;
	text-shadow: 0 1px 1px #fff;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	-o-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
}

.item h2 a {
	color: #333;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts for the headings. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	font-size: 15px;
	font-style: normal;
	text-decoration: none;
}

.item h2 a:hover {
	color: #71a4a1;
}

.item p {
	color: #666;
	font-size: 11px;
	font-style: italic;
	text-align: left;
}

/* Services Section
--------------------------------------------------*/

#services {
	text-align: center;
}

#services h3 {
	text-transform: uppercase;
	text-shadow: 0 1px 1px #fff;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	-o-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
	padding-bottom: 10px;
	display: inline-block;
}

#services [class^="icon-"] {
	font-size: 30px;
	margin-bottom: 15px;
	display: block;
}

/* Latest Quotes Section
--------------------------------------------------*/

#latest-quotes {
	border-top: 4px solid #2e2c2d;
	border-bottom: 4px solid #2e2c2d;
	background: url('../images/black_grunge_background_pattern.png') repeat;
	text-align: center;
	padding: 30px 0;
}

#latest-quotes #quotes {
	background: url('../images/ornate_pattern_icon.png') no-repeat top center;
	padding-top: 110px;
	height: 150px; 
	height: auto!important;
	min-height: 150px;
}

#latest-quotes blockquote {
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 38px;
	margin-top: 15px;
	text-shadow: 0 2px 2px #000;
}

#latest-quotes cite {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	color: #ccc;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	font-size: 18px;
	margin-top: 5px;
	display: inline-block;
	padding: 9px 0;
	text-transform: uppercase;
}

#latest-quotes blockquote span {
	color: #999;
}

/* Recent News Section
--------------------------------------------------*/

#recent-news {
	margin-top: 40px;
}

#recent-news a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

#recent-news img {
	max-width: 100%;
	height: auto;
}

/* Featured Article */

#featured {
	text-align: left;
	margin-bottom: 30px;
}

#featured p:first-of-type:first-line {
	font-weight: bold;
	letter-spacing: 0.1em;
}

#featured p:first-of-type:first-letter {
    font-size: 4em;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1em;
    padding: 0;
    margin-right: 5px;
}

#featured img {
	border: 6px solid #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 2px 2px 4px 1px #ccc;
	-webkit-box-shadow: 2px 2px 4px 1px #ccc;
	box-shadow: 2px 2px 4px 1px #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.featured-image {
	position: relative;
}

/* Featured Ribbon */

.featured-ribbon {
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts for the headings. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	position: absolute;
	bottom: 340px;
	left: -11px;
	width: 35%;
	font-size: 18px;
	padding: 8px 22px 8px 25px;
	color: #fff;
	background-color: #71a4a1;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
	text-transform: uppercase;
	text-align: center;
}

.featured-ribbon:before, 
.featured-ribbon:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

.featured-ribbon:before {
	width: 30px;
	left: -30px;
	top: 12px;
	border-width: 15px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

.featured-ribbon:before {
	display: none;
}

.featured-ribbon:after {
	left: 0px;
	top: 100%;
	border-width: 5px 5px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

.post-title {
	text-shadow: 1px 1px 0 #fafafa, 2px 2px 0 rgba(153, 153, 153, 1), 0 0 1px #fafafa;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.post-title a {
	color: #333;
	border-bottom: none!important;
}

.post-title a:hover {
	color: #71a4a1;
}

.meta-date {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 -1px 0 #ccc, 0 1px 0 #fff;
	display: inline-block;
	padding: 5px 0;
}

.meta-category {
	display: block;
	font-style: italic;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
}

.meta-category .comment-count {
	float: right;
}

.meta-category .comment-count a {
	border-bottom: none!important;
	font-size: 17px;
}

/* Article (Homepage) */

.article {
	color: #212121;
	float: left;
	margin-right: 10px;
	margin-bottom: 90px;
	text-align: left;
}

.article .thumbnail {
	border: 4px solid #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

.article .thumbnail a {
	border-bottom: none!important;
}

.article img {
	display: block;
}

.article h3 {
	margin-top: 20px;
	text-shadow: 1px 1px 0 #fafafa, 1px 2px 0 rgba(153, 153, 153, 1), 0 0 1px #fafafa;
	text-transform: uppercase;
}

.article h3 a {
	color: #333;
	border-bottom: none!important;
}

.article h3 a:hover {
	color: #71a4a1;
}

.article .meta {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
	font-style: italic;
}

/* Article Items - Image Rollover Effect */

.overlayer .overlay-default.article {
	background: none;
}

/* About Section
--------------------------------------------------*/

#about {
	border-top: 4px solid #2e2c2d;
	border-bottom: 4px solid #2e2c2d;
	background: url('../images/black_grunge_background_pattern.png') repeat;
	text-align: left;
	padding: 30px 0;
	text-shadow: 0 2px 2px #000;
}

#about img {
	max-width: 100%;
	height: auto; 
}

#about .section-heading h1 {
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff; 
	color: #fff;
	display: inline-block;
	text-shadow: none;
}

#about h2 {
	color: #fff;
	text-transform: uppercase;
}

#about #logos-heading {
	color: #999;
	text-align: center;
	text-transform: uppercase;
}

#about-headshot {
	border: 6px solid #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 2px 2px 4px 1px #000;
	-webkit-box-shadow: 2px 2px 4px 1px #000;
	box-shadow: 2px 2px 4px 1px #000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}

#about p {
	color: #fff;
	text-align: left;
}

#about p:first-of-type:first-line {
	font-weight: bold;
	letter-spacing: 0.1em;
}

#about p:first-of-type:first-letter {
    font-size: 4em;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1em;
    padding: 0;
    margin-right: 5px;
}

/* Skill Bars */

.skill-bar {
	width: 278px;
	margin: 0;
	position: relative;
	float: left;
	font-size: 12px;
	line-height: 2em;
	padding: 5px 0 30px;
}

.col { 
	width:280px; 
	}

#skill { 
	color: #fff;
	list-style: none; 
	padding-top: 30px;
}

#skill li { 
	margin-bottom: 40px; 
	background: #000; 
	height: 5px; 
	border-radius: 3px; 
	border-left: 1px solid #111; 
	border-top: 1px solid #111; 
	border-right: 1px solid #333; 
	border-bottom: 1px solid #333;  
}

#skill li em { 
	position: relative; 
	top: -25px;
}

.expand { 
	height: 3px; 
	margin: 2px 0; 
	background: #71a4a1; 
	position: absolute;
}

.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
.jquery      { width:50%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
.coffee   { width:80%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;   }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes coffee   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes coffee   { 0%  { width:0px;} 100%{ width:80%;}  }

/* Client Logos */

.logos {
	text-align: center;
}

#client-logos {
	display: inline-block;
	margin-top: 20px;
}

#client-logos li {
	float: left;
	padding: 0 20px;
}

/* Contact Section
--------------------------------------------------*/

#contact {
	margin-top: 40px;
	text-align: center;
}

#contact h3 {
	text-transform: uppercase;
}

#contact p {
	text-align: left;
}

#contact p:first-of-type:first-line {
	font-weight: bold;
	letter-spacing: 0.1em;
}

#contact p:first-of-type:first-letter {
    font-size: 4em;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1em;
    padding: 0;
    margin-right: 5px;
}

/* Contact Details */

#contact-details {
	text-align: left;
}

#contact-details a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

/* Google Map */

#map {
	width: 100%;
	height: 350px;
	margin-bottom: 40px;
	border: 6px solid #fff;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.map-overlay {
	width: 100%;	
	display: block;
	text-align: center;
	background-color: #333;
	background-color: none;
	color: #fff;
	padding: 10px 15px;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 1px 1px 8px 1px #666;
	-webkit-box-shadow: 1px 1px 8px 1px #666;
	box-shadow: 1px 1px 8px 1px #666;
}

.map-overlay_arrow {
	left: 50%;
	width: 0;
	height: 0;
	position: absolute;
}

.map-overlay_arrow.above {
	bottom: -16px;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 16px solid #333;
}

.map-overlay_arrow.below {
	top: -16px;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-bottom: 16px solid #333;
}

/* Social Media Icons */

#social-icons {
	display: inline-block;
	margin-top: 20px;
}

#social-icons li {
	float: left;
	padding: 0 15px;
	opacity: 1;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s;
}

#social-icons li:hover {
	opacity: .8;
}

/* Blog Page (Single Article Page)
--------------------------------------------------*/

#single-article p:first-of-type:first-line {
	font-weight: bold;
	letter-spacing: 0.1em;
}

#single-article p:first-of-type:first-letter {
    font-size: 4em;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1em;
    padding: 0;
    margin-right: 5px;
}

#single-article img {
	margin-top: 10px;
	margin-bottom: 20px;
	border: 7px solid #fff;
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	-moz-box-shadow: 2px 2px 4px 1px #ccc;
	-webkit-box-shadow: 2px 2px 4px 1px #ccc;
	box-shadow: 2px 2px 4px 1px #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#single-article .single-thumbnail {
	border-bottom: none!important;
}

/* Comments */

#comments {
	margin-top: 20px;
	margin-left: 0;
}

#comments h4 {
	padding-bottom: 20px;
	text-transform: uppercase;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
}

.comments-list {
    border-bottom: 1px solid #666;
    margin: 36px 0 40px;
    padding: 0 0 10px;
}

.comment {
    border-top: 1px solid #666;
    display: inline-block;
    margin-top: 10px;
    padding-top: 30px;
}

.comment .children .comment {
    margin-top: 10px;
    padding-top: 30px;
}

.comment:first-child {
    border-top: none;
    margin: 0;
    padding: 0;
}

.comment > div {
    display: inline-block;
}

.comment .avatar {
    display: block;
    float: left;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    border: 2px solid #fff;
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
}

.comment .comment-entry, 
.comment .comment-meta {
    float: right;
    width: 100%;
}

.comment .comment-meta {
    margin-top: -4px;
}

.comment .author {
    font-size: 14px;
    margin: 0;
    text-transform: uppercase;
}

.comment .author .reply {
    color: #959595;
    font-size: 11px;
    text-transform: uppercase;
}

.comment .author .reply:hover {
    color: #d73300;
    font-size: 11px;
}

.comment .date {
    color: #959595;
    margin: 1px 0 8px;
}

.comment .children {
    padding-left: 60px;
}

.comment .children .comment {
    border-top: 1px solid #666;
    position: relative;
}

.comment .children .comment-entry, 
.comment .children .comment-meta {
    width: 100%;
}

.comment .children .children .comment-entry, 
.comment .children .children .comment-meta {
    width: 100%;
}
	
/* Comment Form */

#respond {
	margin-bottom: 20px;
	margin-left: 0;
}

#respond h3 {
	margin-bottom: 20px;
	text-transform: uppercase;
}

/* Blog Sidebar
--------------------------------------------------*/

#sidebar h4 {
	text-transform: uppercase;
	line-height: 20px;
	margin-top: 10px; 
	margin-bottom: 4px;
}

#sidebar h5 {
	display: block;
	font-family: Georgia, serif;
	font-size: 11px;
	font-style: italic;
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-transform: lowercase;
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
}

.widget {
	margin-bottom: 30px;
}

/* Flickr Feed Widget */

.flickrbadge {
	margin: 0;
	padding: 0;
 	list-style: none;
	border: none;
}

.flickrbadge ul ul {
    padding: 0;
    margin: 0;
}

.flickrbadge {
    font-size: 120%;
	width: 100%;
	position: relative;
	text-align: left;
	margin: 0;
}

.flickrbadge a {
	display: block;
	border-bottom: none!important;
	font-size: 1em;
	color: #369;
	text-align: right;
	font-weight: bold;
	text-decoration: none;
}

.flickrbadge a.flickrlink {
	padding-top: .3em;
	text-align: left;
}

.flickritems {
    position: relative;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 30px;
	float: left;
}

.flickritems li {
    float: left;
    padding: 0 10px 10px 0;
    margin-bottom: 0;
}

.flickritems li img {
    display: block;
	border: 2px solid #fff;
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	transition: all .4s; 
	opacity: .9;
}

.flickritems li img:hover {
	opacity: 1;
}

/* Accordion Widget */

#accordion-container {
	font-size: 13px;
	padding: 0 0 10px 0;
}

.accordion-header {
	border-bottom: 1px solid #999;
	font-size: 16px;
	margin: 0;
	padding: 0 20px;
	cursor: pointer;
	color: #666666;
	text-transform: uppercase;
}

.active-header {
	background: url('../images/active-header.gif');
	background-repeat: no-repeat;
	background-position: left 50%;
	color: #71a4a1;
}

.active-header:hover {
	background: url('../images/active-header.gif');
	background-repeat: no-repeat;
	background-position: left 50%;
}

.inactive-header {
	background: url('../images/inactive-header.gif');
	background-repeat: no-repeat;
	background-position: left 50%;
}

.inactive-header:hover {
	background: url('../images/inactive-header.gif');
	background-repeat: no-repeat;
	background-position: left 50%;
}

.accordion-content {
	display: none;
	padding: 5px 0 5px 20px;
	border-top: 0;
}

/* Tabbed Content Widget */

ul.tabs {
	margin: 10px 0 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
	
ul.tabs li {
	float: left;
	font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts for the headings. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
	text-transform: uppercase;
	margin: 0;
	cursor: pointer;
	padding: 0px 21px ;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	overflow: hidden;
	position: relative;
}
	
ul.tabs li:hover {
	background: #ccc;
}	
	
ul.tabs li.active{
	background: #fff;
	border-bottom: 1px solid #fff;
}
	
.tab_container {
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	min-height: 200px;
	height: auto;
}
	
.tab_content {
	padding: 20px 20px 20px 0;
	display: none;
}

.posts li {
	float: left;
}

.posts img {
	float: left;
	display: block;
	margin-right: 10px;
}
	
.posts .entry {
	display: block;
}

/* Section Dividers (Horizontal Rules)
--------------------------------------------------*/

.double {
	margin: 1px 0;
	padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
}

/* Vintage Image Effect Loader
--------------------------------------------------*/

.vintage-loader {
	color: #fff;
    position: absolute;
    height: 60px;
    width: 180px;
    margin-left: -90px;
    margin-top: -20px;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    text-align: left;
    text-indent: 60px;
    font-size: 20px;
    font-family: 'Oswald', sans-serif; /* This theme uses Google Web Fonts for the headings. To change this font, go to http://www.google.com/webfonts/ and follow the instructions there. */
    text-transform: uppercase;
}

.vintage-loader.error {
    color: #900;
    font-size: 12px;
    line-height: 16px;
    text-indent: 0;
    background-image: none;
    padding: 10px;
    height: auto;
    margin-left: -100px;
}

/* Twitter (Latest Tweets Widget)
--------------------------------------------------*/

.tweet,
.query {
	font-size: 13px;
}

.tweet_list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
}

.tweet_list li {
	border-bottom: 1px solid #999;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 0 20px 0;
	list-style-type: none;
	line-height: 23px;
}

.tweet_list li a {
	color: #71a4a1;
}

.tweet_list li a:hover {
	color: #000;
}

.tweet_list .tweet_avatar {
	border-bottom: none!important;
	padding-right: 15px; 
	float: left;
}

.tweet_list .tweet_avatar img {
	vertical-align: middle;
	border: 2px solid #fff;
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px;
	-moz-box-shadow: 1px 1px 4px 1px #ccc;
	-webkit-box-shadow: 1px 1px 4px 1px #ccc;
	box-shadow: 1px 1px 4px 1px #ccc;
}

/* 5 - Media Queries
================================================== */

	@media only screen and (min-width: 768px) {
	
		#header-navigation .responsive-nav {
			display: none;
		}
	
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
		.flex-title {
			bottom: 30%;
			font-size: 20px!important;
			letter-spacing: 1px!important;
		}
		
		.item {
			height: 280px;
		}
		
		.roll em {
			margin-top: 70px;
		}
		
		.featured-ribbon {
			bottom: 150px;
			width: 45%;
		}	
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		#sidebar {
			margin-bottom: 40px;
		}
	
		#latest-work h1,
		#recent-news h1,
		#about h1,
		#contact h1 {
			font-size: 20px;
		}
		
		#latest-work .mask h1,
		#recent-news .mask h1,
		#contact .mask h1 {
			margin-top: 1px;
		}
	
		.flex-title,
		.flex-direction-nav a {
			display: none!important;
		}
		
		.flexslider .slides img {
			border-top: 2px solid #2e2c2d;
			border-bottom: 2px solid #2e2c2d;
		}
		
		.article {
			padding-bottom: 50px;
		}
		
		.post-title {
			margin-top: 10px;
		}
		
		.featured-ribbon {
			bottom: 120px;
			width: 55%;
		}
		
		#about-headshot {
			margin-bottom: 10px;
		}
		
		.meta-category .comment-count {
			display: block;
		}
		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

		#header-navigation[role="navigation"] {
			text-align: center;
		}
		
		#header-navigation[role="navigation"] li {
			float: none;
		}
		
		#header-navigation[role="navigation"] li a,
		#header-navigation[role="navigation"] li a:visited {
			border-left: none;
			border-bottom: 1px solid #999;
			padding-bottom: 5px;
		}
		
		#header-navigation[role="navigation"] li.home a {
			padding-left: 20px;
		}
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		#portfolio-filter li {
			float: none;
		}
		
		#header-navigation[role="navigation"] {
			text-align: center;
		}
		
		#header-navigation[role="navigation"] li {
			float: none;
		}
		
		#header-navigation[role="navigation"] li a,
		#header-navigation[role="navigation"] li a:visited {
			border-left: none;
			border-bottom: 1px solid #999;
			padding-bottom: 5px;
		}
		
		#header-navigation[role="navigation"] li.home a {
			padding-left: 20px;
		}
		
		.isotope {
			overflow: visible!important;
			position: relative!important;
		}
		
		.roll em {
			margin-top: 85px;
		}
		
		#client-logos li {
			float: none;
		}
	
	}


/* 6 - Font Awesome (Icon Font)
================================================== */

/* Font Awesome:http://fortawesome.github.com/Font-Awesome/
License
-------------------------------------------------------
The Font Awesome webfont,CSS,and LESS files are licensed under CC BY 3.0:http://creativecommons.org/licenses/by/3.0/ A mention of 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable source code is considered acceptable attribution (most common on the web).
If human readable source code is not available to the end user,a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software). */

@font-face{ 
	font-family:'FontAwesome';
	src:url('../fonts/font-awesome/fontawesome-webfont.eot');
	src:url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font-awesome/fontawesome-webfont.woff') format('woff'),
		url('../fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'),
		url('../fonts/font-awesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}

/*  Font Awesome styles
------------------------------------------------------- */

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  //vertical-align: top;
  font-size: 1.3333333333333333em;
}
.btn [class^="icon-"], .btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */

  line-height: .9em;
}
li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
	/* 1.5 increased font size for icon-large * 1.25 width */

	width: 25px;
}
li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.3333333333333333em;
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }
.icon-search:before               { content: "\f002"; }
.icon-envelope:before             { content: "\f003"; }
.icon-heart:before                { content: "\f004"; }
.icon-star:before                 { content: "\f005"; }
.icon-star-empty:before           { content: "\f006"; }
.icon-user:before                 { content: "\f007"; }
.icon-film:before                 { content: "\f008"; }
.icon-th-large:before             { content: "\f009"; }
.icon-th:before                   { content: "\f00a"; }
.icon-th-list:before              { content: "\f00b"; }
.icon-ok:before                   { content: "\f00c"; }
.icon-remove:before               { content: "\f00d"; }
.icon-zoom-in:before              { content: "\f00e"; }

.icon-zoom-out:before             { content: "\f010"; }
.icon-off:before                  { content: "\f011"; }
.icon-signal:before               { content: "\f012"; }
.icon-cog:before                  { content: "\f013"; }
.icon-trash:before                { content: "\f014"; }
.icon-home:before                 { content: "\f015"; }
.icon-file:before                 { content: "\f016"; }
.icon-time:before                 { content: "\f017"; }
.icon-road:before                 { content: "\f018"; }
.icon-download-alt:before         { content: "\f019"; }
.icon-download:before             { content: "\f01a"; }
.icon-upload:before               { content: "\f01b"; }
.icon-inbox:before                { content: "\f01c"; }
.icon-play-circle:before          { content: "\f01d"; }
.icon-repeat:before               { content: "\f01e"; }

/* \f020 doesn't work in Safari. all shifted one down */
.icon-refresh:before              { content: "\f021"; }
.icon-list-alt:before             { content: "\f022"; }
.icon-lock:before                 { content: "\f023"; }
.icon-flag:before                 { content: "\f024"; }
.icon-headphones:before           { content: "\f025"; }
.icon-volume-off:before           { content: "\f026"; }
.icon-volume-down:before          { content: "\f027"; }
.icon-volume-up:before            { content: "\f028"; }
.icon-qrcode:before               { content: "\f029"; }
.icon-barcode:before              { content: "\f02a"; }
.icon-tag:before                  { content: "\f02b"; }
.icon-tags:before                 { content: "\f02c"; }
.icon-book:before                 { content: "\f02d"; }
.icon-bookmark:before             { content: "\f02e"; }
.icon-print:before                { content: "\f02f"; }

.icon-camera:before               { content: "\f030"; }
.icon-font:before                 { content: "\f031"; }
.icon-bold:before                 { content: "\f032"; }
.icon-italic:before               { content: "\f033"; }
.icon-text-height:before          { content: "\f034"; }
.icon-text-width:before           { content: "\f035"; }
.icon-align-left:before           { content: "\f036"; }
.icon-align-center:before         { content: "\f037"; }
.icon-align-right:before          { content: "\f038"; }
.icon-align-justify:before        { content: "\f039"; }
.icon-list:before                 { content: "\f03a"; }
.icon-indent-left:before          { content: "\f03b"; }
.icon-indent-right:before         { content: "\f03c"; }
.icon-facetime-video:before       { content: "\f03d"; }
.icon-picture:before              { content: "\f03e"; }

.icon-pencil:before               { content: "\f040"; }
.icon-map-marker:before           { content: "\f041"; }
.icon-adjust:before               { content: "\f042"; }
.icon-tint:before                 { content: "\f043"; }
.icon-edit:before                 { content: "\f044"; }
.icon-share:before                { content: "\f045"; }
.icon-check:before                { content: "\f046"; }
.icon-move:before                 { content: "\f047"; }
.icon-step-backward:before        { content: "\f048"; }
.icon-fast-backward:before        { content: "\f049"; }
.icon-backward:before             { content: "\f04a"; }
.icon-play:before                 { content: "\f04b"; }
.icon-pause:before                { content: "\f04c"; }
.icon-stop:before                 { content: "\f04d"; }
.icon-forward:before              { content: "\f04e"; }

.icon-fast-forward:before         { content: "\f050"; }
.icon-step-forward:before         { content: "\f051"; }
.icon-eject:before                { content: "\f052"; }
.icon-chevron-left:before         { content: "\f053"; }
.icon-chevron-right:before        { content: "\f054"; }
.icon-plus-sign:before            { content: "\f055"; }
.icon-minus-sign:before           { content: "\f056"; }
.icon-remove-sign:before          { content: "\f057"; }
.icon-ok-sign:before              { content: "\f058"; }
.icon-question-sign:before        { content: "\f059"; }
.icon-info-sign:before            { content: "\f05a"; }
.icon-screenshot:before           { content: "\f05b"; }
.icon-remove-circle:before        { content: "\f05c"; }
.icon-ok-circle:before            { content: "\f05d"; }
.icon-ban-circle:before           { content: "\f05e"; }

.icon-arrow-left:before           { content: "\f060"; }
.icon-arrow-right:before          { content: "\f061"; }
.icon-arrow-up:before             { content: "\f062"; }
.icon-arrow-down:before           { content: "\f063"; }
.icon-share-alt:before            { content: "\f064"; }
.icon-resize-full:before          { content: "\f065"; }
.icon-resize-small:before         { content: "\f066"; }
.icon-plus:before                 { content: "\f067"; }
.icon-minus:before                { content: "\f068"; }
.icon-asterisk:before             { content: "\f069"; }
.icon-exclamation-sign:before     { content: "\f06a"; }
.icon-gift:before                 { content: "\f06b"; }
.icon-leaf:before                 { content: "\f06c"; }
.icon-fire:before                 { content: "\f06d"; }
.icon-eye-open:before             { content: "\f06e"; }

.icon-eye-close:before            { content: "\f070"; }
.icon-warning-sign:before         { content: "\f071"; }
.icon-plane:before                { content: "\f072"; }
.icon-calendar:before             { content: "\f073"; }
.icon-random:before               { content: "\f074"; }
.icon-comment:before              { content: "\f075"; }
.icon-magnet:before               { content: "\f076"; }
.icon-chevron-up:before           { content: "\f077"; }
.icon-chevron-down:before         { content: "\f078"; }
.icon-retweet:before              { content: "\f079"; }
.icon-shopping-cart:before        { content: "\f07a"; }
.icon-folder-close:before         { content: "\f07b"; }
.icon-folder-open:before          { content: "\f07c"; }
.icon-resize-vertical:before      { content: "\f07d"; }
.icon-resize-horizontal:before    { content: "\f07e"; }

.icon-bar-chart:before            { content: "\f080"; }
.icon-twitter-sign:before         { content: "\f081"; }
.icon-facebook-sign:before        { content: "\f082"; }
.icon-camera-retro:before         { content: "\f083"; }
.icon-key:before                  { content: "\f084"; }
.icon-cogs:before                 { content: "\f085"; }
.icon-comments:before             { content: "\f086"; }
.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-down:before          { content: "\f088"; }
.icon-star-half:before            { content: "\f089"; }
.icon-heart-empty:before          { content: "\f08a"; }
.icon-signout:before              { content: "\f08b"; }
.icon-linkedin-sign:before        { content: "\f08c"; }
.icon-pushpin:before              { content: "\f08d"; }
.icon-external-link:before        { content: "\f08e"; }

.icon-signin:before               { content: "\f090"; }
.icon-trophy:before               { content: "\f091"; }
.icon-github-sign:before          { content: "\f092"; }
.icon-upload-alt:before           { content: "\f093"; }
.icon-lemon:before                { content: "\f094"; }
.icon-phone:before                { content: "\f095"; }
.icon-check-empty:before          { content: "\f096"; }
.icon-bookmark-empty:before       { content: "\f097"; }
.icon-phone-sign:before           { content: "\f098"; }
.icon-twitter:before              { content: "\f099"; }
.icon-facebook:before             { content: "\f09a"; }
.icon-github:before               { content: "\f09b"; }
.icon-unlock:before               { content: "\f09c"; }
.icon-credit-card:before          { content: "\f09d"; }
.icon-rss:before                  { content: "\f09e"; }

.icon-hdd:before                  { content: "\f0a0"; }
.icon-bullhorn:before             { content: "\f0a1"; }
.icon-bell:before                 { content: "\f0a2"; }
.icon-certificate:before          { content: "\f0a3"; }
.icon-hand-right:before           { content: "\f0a4"; }
.icon-hand-left:before            { content: "\f0a5"; }
.icon-hand-up:before              { content: "\f0a6"; }
.icon-hand-down:before            { content: "\f0a7"; }
.icon-circle-arrow-left:before    { content: "\f0a8"; }
.icon-circle-arrow-right:before   { content: "\f0a9"; }
.icon-circle-arrow-up:before      { content: "\f0aa"; }
.icon-circle-arrow-down:before    { content: "\f0ab"; }
.icon-globe:before                { content: "\f0ac"; }
.icon-wrench:before               { content: "\f0ad"; }
.icon-tasks:before                { content: "\f0ae"; }

.icon-filter:before               { content: "\f0b0"; }
.icon-briefcase:before            { content: "\f0b1"; }
.icon-fullscreen:before           { content: "\f0b2"; }

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

.icon-magic:before                { content: "\f0d0"; }
.icon-truck:before                { content: "\f0d1"; }
.icon-pinterest:before            { content: "\f0d2"; }
.icon-pinterest-sign:before       { content: "\f0d3"; }
.icon-google-plus-sign:before     { content: "\f0d4"; }
.icon-google-plus:before          { content: "\f0d5"; }
.icon-money:before                { content: "\f0d6"; }
.icon-caret-down:before           { content: "\f0d7"; }
.icon-caret-up:before             { content: "\f0d8"; }
.icon-caret-left:before           { content: "\f0d9"; }
.icon-caret-right:before          { content: "\f0da"; }
.icon-columns:before              { content: "\f0db"; }
.icon-sort:before                 { content: "\f0dc"; }
.icon-sort-down:before            { content: "\f0dd"; }
.icon-sort-up:before              { content: "\f0de"; }

.icon-envelope-alt:before         { content: "\f0e0"; }
.icon-linkedin:before             { content: "\f0e1"; }
.icon-undo:before                 { content: "\f0e2"; }
.icon-legal:before                { content: "\f0e3"; }
.icon-dashboard:before            { content: "\f0e4"; }
.icon-comment-alt:before          { content: "\f0e5"; }
.icon-comments-alt:before         { content: "\f0e6"; }
.icon-bolt:before                 { content: "\f0e7"; }
.icon-sitemap:before              { content: "\f0e8"; }
.icon-umbrella:before             { content: "\f0e9"; }
.icon-paste:before                { content: "\f0ea"; }

.icon-user-md:before              { content: "\f200"; }