/*===================================================================

		TABLE OF CONTENTS		
		
	Line 57: /*====CLEAR FIX
	Line 91: /*====MAIN LAYOUT
	Line 103: /*====BACKGROUND PATTERNS
	Line 106: /*====BODY BACKGROUNDS
	Line 121: /*====LEFT SIDE BACKGROUNDS
	Line 131: /*====RIGHT SIDE BACKGROUNDS
	Line 249: /*====MISCELANIOUS
	Line 355: /*====BUTTONS
	Line 400: /*====TABLES
	Line 436: /*====DROPCAPS
	Line 492: /*====NAVIGATION
	Line 540: /*====SOCIAL NETWORKS (MAIN)
	Line 639: /*====NIVO SLIDER
	Line 700: /*====NIVO SLIDER NAVIGATION
	Line 721: /*====CONTENT SLIDER (CYCLE)
	Line 737: /*====CONTENT SLIDER DESCRIPTION TEXT
	Line 782: /*====CONTENT SLIDER ARROWS
	Line 822: /*====TAGLINE
	Line 887: /*====GRID
	Line 943: /*====COLUMN TITLE
	Line 966: /*====BOXES DARK
	Line 1020: /*====BOXES-LIGHT
	Line 1040: /*====SKILLS
	Line 1085: /*====TEAM MEMBERS
	Line 1151: /*====PORTFOLIO TILES
	Line 1262: /*====BLOG
	Line 1376: /*====BLOG SHARE NETWORK
	Line 1438: /*====BLOG TYPES
	Line 1451: /*====BLOG COMMENTS
	Line 1539: /*====CONTACT
	Line 1620: /*====TWITTER FEED
	Line 1650: /*====TOGGLE AND ACCORDION PANELS
	Line 1690: /*===UNORDERED LIST STYLES
	Line 1739: /*====INFO BOXES
	
*========== MAIN COLOR #8cb4be ===========*/		
			
/********************BEGIN RESET********************/

html,body,p,div,img,h1,h2,h3,h4,h5,li,ul,ol,dl,dd,dt,form,pagele,td,tr,blockquote,iframe {
  margin:0px; 
  padding:0px; 
  border:0px; 
  border-collapse:separate; 
  border-spacing:0px;
}

* :focus { outline: 0; }

/*******************END RESET**************************-*/


/*====CLEAR FIX	- apply to any element that containes floating children which need to be cleared
=======================================================*/

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


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


/*====MAIN LAYOUT
=======================================================*/

html, body, #left-side, #right-side {
	height: auto;
}

html, body, #left-side {
	height: 100%;
	width: 100%;
}

/*====BACKGROUND PATTERNS
=======================================================*/

/*====BODY BACKGROUNDS
=======================================================*/
.pattern-1 {background: url(../img/backgrounds/body/pattern-1.png) fixed center #f7f7f7;}
.pattern-2 {background: url(../img/backgrounds/body/pattern-2.jpg) fixed center #f7f7f7;}
.pattern-3 {background: url(../img/backgrounds/body/pattern-3.png) fixed center #f7f7f7;}
.pattern-4 {background: url(../img/backgrounds/body/pattern-4.png) fixed center #f7f7f7;}
.pattern-5 {background: url(../img/backgrounds/body/pattern-5.png) fixed center #f7f7f7;}
.pattern-6 {background: url(../img/backgrounds/body/pattern-6.png) fixed center #f7f7f7;}
.pattern-7 {background: url(../img/backgrounds/body/pattern-7.png) fixed center #f7f7f7;}
.pattern-8 {background: url(../img/backgrounds/body/pattern-8.png) fixed center #f7f7f7;}
.pattern-9 {background:#000000}
.pattern-10 {background: url(../img/backgrounds/body/pattern-10.jpg) fixed center #f7f7f7;}
.pattern-11 {background: url(../img/backgrounds/body/pattern-11.jpg) no-repeat center fixed #f7f7f7;}
.pattern-12 {background: url(../img/backgrounds/body/pattern-12.jpg) no-repeat fixed #f7f7f7;}

/*====LEFT SIDE BACKGROUNDS
=======================================================*/
.pattern-13 {background: url(../img/backgrounds/left/pattern-2.png) #f7f7f7;}
.pattern-14 {background: url(../img/backgrounds/left/pattern-3.png) #f7f7f7;}
.pattern-15 {background: url(../img/backgrounds/left/pattern-4.png) #f7f7f7;}
.pattern-16 {background: url(../img/backgrounds/left/pattern-5.png) #f7f7f7;}
.pattern-17 {background: url(../img/backgrounds/left/pattern-6.png) #f7f7f7;}
.pattern-18 {background: url(../img/backgrounds/left/pattern-7.png) #f7f7f7;}
.pattern-19 {background: url(../img/backgrounds/left/pattern-1.png) #f7f7f7;}

/*====RIGHT SIDE BACKGROUNDS
=======================================================*/
.pattern-20 {background: url(../img/backgrounds/right/pattern-2.png) #f7f7f7;}
.pattern-21 {background: url(../img/backgrounds/right/pattern-3.png) #f7f7f7;}
.pattern-22 {background: url(../img/backgrounds/right/pattern-4.png) #f7f7f7;}
.pattern-23 {background: url(../img/backgrounds/right/pattern-5.png) #f7f7f7;}
.pattern-24 {background: url(../img/backgrounds/right/pattern-6.png) #f7f7f7;}
.pattern-25 {background: url(../img/backgrounds/right/pattern-7.png) #f7f7f7;}
.pattern-26 {background: url(../img/backgrounds/right/pattern-8.png) #f7f7f7;}
.pattern-27 {background: url(../img/backgrounds/right/pattern-1.png) #f7f7f7;}

.display_none {display:none}

body {
	color: #747474;
	font-size: 12px;
	font-family: Arial, sans-serif;
	line-height: 20px;
}

#container {
	margin: 0 auto;	
	width: 1060px;
	height: 100%;
	overflow: visible;
}

#left-side {
	width: 310px;
	position: fixed;
	-moz-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);
	box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);	
}

#left-inner {
	height: 100%;
	background: url(../img/backgrounds/vertical-lines.png) repeat-y top right;	
	padding: 40px 10px 0 0;
}

#right-side {
	width: 690px;
	float: right;
	padding: 0 30px;
	-webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
}

.page {
	padding-top: 50px;
	margin-bottom: 300px;
	width: 690px;
}

h1, h2, h3, h4, h5, h6  {
	font-family: Yanone, Arial, sans-serif;
	font-weight: normal;
	margin-bottom: 15px;
}

h1 {
	font-size: 50px;
	line-height: 40px;
	color: #8cb4be;
}

h2 {
	font-size: 36px;
	color: #3f3f3f;
	text-transform: uppercase;
}

h3 {
	color: #3f3f3f;
	font-size: 23px;
	font-weight: normal;
	line-height: 22px;
}

h4 {
	color: #8cb4be;
	font-size: 20px; 
	font-weight: normal;
}

h5 {
	font-size: 18px; 
}

h6 {
	font-size: 16px; 
	letter-spacing: 0.5px;
	margin-top: 0;
}

p {
	padding-bottom: 15px;
}

a {
	color: #8cb4be;
	text-decoration: none;
	-webkit-transition: color .1s linear;
	-moz-transition: color .1s linear;
	-o-transition: color .1s linear;
	-ms-transition: color .1s linear;
	transition: color .1s linear;
}

a:hover {
	color: #1f1f1f;
}

ul {
	list-style: none;
}


/*====MISCELANIOUS
=======================================================*/

.separator {
	background: url(../img/separator.png) no-repeat center;
	height: 22px;
	margin-bottom: 30px;
	margin-top: 0;
	border: none;
	clear: both;
}

.left-img {
	float: left;
	margin-right: 15px;
	margin-bottom: 0;
}

.right-img {
	float: right;
	margin-left: 15px;
	margin-bottom: 0;
}

#copyright {
	position: absolute;
	bottom: 15px;
	right: 40px;
	font-size: 10px;
}
	
.tooltip {
	display: none;
	background: #2f2f2f;
	font-size: 11px;
	padding: 5px 12px;
	color: #fff;	
}

blockquote  {
	background: url(../img/quotes.png) no-repeat;
	font-size: 13px;
	font-style: italic;
	padding-left: 40px;
	margin: 20px 0 20px 20px;
}

.author {
	text-align: right;
	font-size: 12px;
	font-style: normal;
	color: #8cb4be;
}

.quote-left {
	float: left;
	width: 255px;
	margin-right: 20px;
}

.quote-right {
	float: right;
	width: 255px;
	margin-left: 20px;
}

.highlight-1, .highlight-2, .highlight-3 {
	padding: 1px 5px;
}

.highlight-1 {
	color: #2f2f2f;
	background: #ccff00;
}

.highlight-2 {
	color: #f7f7f7;
	background: #2f2f2f;
}

.highlight-3 {
	color: #f7f7f7;
	background: #8cb4be;
}

abbr, acronym { 
	border-bottom: 1px solid #929292; 
}

del {
	color:#929292; 
}

pre,code,tt   { 
	font-family: 'lucida console', monospace; 
	color:#929292; 
}

ol li {
	font-size: 12px;
}

strong {
	color: #3f3f3f;
}

/*====BUTTONS
=======================================================*/

.button {
	color: #f7f7f7;	
	background: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
	display: inline-block;
	margin-bottom: 15px;
}

.button:hover {
	background: #2f2f2f;
	color: #f7f7f7;
}

.tiny-btn {
	font-size: 8px;
	padding: 2px 6px; 
	text-transform: uppercase;
}

.small-btn {
	font-size: 10px;
	padding: 3px 8px; 
	text-transform: uppercase;
}

.medium-btn {
	font-size: 12px;
	padding: 5px 10px; 
	text-transform: uppercase;
}

.large-btn {
	font-size: 14px;
	padding: 8px 12px; 
	text-transform: uppercase;
}


/*====TABLES
=======================================================*/

table { 
	width: 100%; 
	text-align: left; 
	border-collapse: collapse;
	border: 1px solid #d1d1d1;
	margin-bottom: 15px;
}

th   { 
	color: #8cb4be;
	background: #ededed; 
	text-align: center;
}

thead ,th ,tfoot {
	font-weight: normal;
}

th,td,caption { 
	padding: 7px; 
	border-bottom: 1px solid #d1d1d1;	
	text-align: center;
}

tr.even td  {
	background: #ededed; 
}

caption     {
	color: #8cb4be;
	border-collapse: collapse;
}

/*====DROPCAPS
=======================================================*/

.dropcap-1 {
	display: block;
	float: left;
	font-size: 36px;
	line-height: 36px;
	margin: 2px 8px 0 0;
	color: #8cb4be;
}

.dropcap-2 {
	display: block;
	color: #f7f7f7;
	font-size: 23px;
	padding-top: 7px;
	width: 33px;
	height: 27px;
	text-align: center;
	border-radius: 50%;
	background-color: #2f2f2f;
	float:left;
	margin: 4px 8px 0 0;
}

.title {
	font-size: 44px;
	color: #3f3f3f;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 15px;
}

.page-subtitle {
	text-align: center;
	color: #767676;
	font-family: Yanone, Tahoma Arial, sans-serif;
	font-size: 24px;
	margin-bottom: 35px;
}

.subtitle {
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: block;
}

#logo {
	float: right;
	margin-right: 30px;	
	padding-bottom: 30px;
}


/*====NAVIGATION
=======================================================*/

#navigation select {
	display: none;
}

.nav {
	clear: both;
	text-align: right;
	font-family: Yanone, Tahoma Arial, sans-serif;
	border-bottom: 1px solid #d9d9d9;
	border-top: 1px solid #fff;
}

.nav li {
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #fff;
}

.nav li a {
	font-size: 22px;
	color: #3f3f3f;
	text-transform: uppercase;
	display: block;
	padding: 12px 30px 12px 0;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;	
}

.nav li.active a {
	background: #2f2f2f;
	border-right: 4px solid;
	border-color: #8cb4be;
	color: #f7f7f7;
	padding-right: 26px;
}

.nav li a:hover {
	padding-right: 26px;
	background: #f7f7f7;
	border-right: 4px solid #d3d3d3;
	color: #3f3f3f;
}

/*====SOCIAL NETWORKS (MAIN)
=======================================================*/

#social-networks {
	position: absolute;
	bottom: 30px;
	right: 40px;
}

#social-networks h3 {
	font-family: Yanone, Tahoma, Arial, sans-serif;
	font-size: 22px;
	color: #929292;
	text-align: right;
	margin-bottom: 10px;
}

#social-links li {
	cursor: pointer;
	float: right;
	margin-left: 8px;
	margin-bottom: 8px;
	height: 24px;
	width: 24px;
	background-position: bottom;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	-ms-transition: background-position .1s linear;
	transition: background-position .1s linear;	
}

#social-links li a {
	height: 24px;
	width: 24px;
	display: block;
	text-indent: -9999px;
}

 #social-links li:hover {
	background-position: top;
}

/*

SOCIAL ICONS WITH BACKGROUND - used on the left side under the navigation  

*/
.facebook-bg { background: url(../img/social/facebook.png) no-repeat; }		
.blogger-bg { background: url(../img/social/blogger.png) no-repeat; }		
.delicious-bg { background: url(../img/social/delicious.png) no-repeat; }		
.deviant-bg { background: url(../img/social/deviant.png) no-repeat; }		
.digg-bg { background: url(../img/social/digg.png) no-repeat; }	
.dribbble-bg { background: url(../img/social/dribbble.png) no-repeat; }	
.flickr-bg { background: url(../img/social/flickr.png) no-repeat; }		
.google-bg { background: url(../img/social/google.png) no-repeat;}		
.forrst-bg { background: url(../img/social/forrst.png) no-repeat;}		
.lastfm-bg {	background: url(../img/social/lastfm.png) no-repeat; }		
.linkedin-bg { background: url(../img/social/linkedin.png) no-repeat; }		
.pinterest-bg { background: url(../img/social/pinterest.png) no-repeat; }		
.rss-bg { background: url(../img/social/rss.png) no-repeat; }	
.skype-bg { background: url(../img/social/skype.png) no-repeat; }	
.stumble-bg { background: url(../img/social/stumbleupon.png) no-repeat; }		
.technocrati-bg { background: url(../img/social/technocrati.png) no-repeat; }	
.tumblr-bg { background: url(../img/social/tumblr.png) no-repeat; }		
.twitter-bg { background: url(../img/social/twitter.png) no-repeat; }		
.vimeo-bg { background: url(../img/social/vimeo.png) no-repeat; }		
.yahoo-bg { background: url(../img/social/yahoo.png) no-repeat; }	
.youtube-bg { background: url(../img/social/youtube.png) no-repeat; }	 

/*

SOCIAL ICONS WITH TRANSPARENT BACKGROUND - used for the blog share networks and team members' social profiles  

*/
.facebook-tran { background: url(../img/member-social/facebook.png) no-repeat center; }
.blogger-tran { background: url(../img/member-social/blogger.png) no-repeat center; }
.delicious-tran { background: url(../img/member-social/delicious.png) no-repeat center; }		
.deviant-tran { background: url(../img/member-social/deviant.png) no-repeat center; }		
.digg-tran { background: url(../img/member-social/digg.png) no-repeat center; }	
.dribbble-tran { background: url(../img/member-social/dribbble.png) no-repeat center; }	
.flickr-tran { background: url(../img/member-social/flickr.png) no-repeat center; }		
.google-tran { background: url(../img/member-social/google.png) no-repeat center;}		
.forrst-tran { background: url(../img/member-social/forrst.png) no-repeat center;}		
.lastfm-tran {	background: url(../img/member-social/lastfm.png) no-repeat center; }		
.linkedin-tran { background: url(../img/member-social/linkedin.png) no-repeat center; }		
.pinterest-tran { background: url(../img/member-social/pinterest.png) no-repeat center; }		
.rss-tran { background: url(../img/member-social/rss.png) no-repeat center; }	
.skype-tran { background: url(../img/member-social/skype.png) no-repeat center; }	
.stumble-tran { background: url(../img/member-social/stumbleupon.png) no-repeat center; }		
.technocrati-tran { background: url(../img/member-social/technocrati.png) no-repeat center; }	
.tumblr-tran { background: url(../img/member-social/tumblr.png) no-repeat center; }		
.twitter-tran { background: url(../img/member-social/twitter.png) no-repeat center; }		
.vimeo-tran { background: url(../img/member-social/vimeo.png) no-repeat center; }		
.yahoo-tran { background: url(../img/member-social/yahoo.png) no-repeat center; }	
.youtube-tran { background: url(../img/member-social/youtube.png) no-repeat center; }       
 


/*====NIVO SLIDER
=======================================================*/

#featured {
	position: relative;
}

#slider-container {
	width: 690px;
	height: 340px;
	position: relative;
	overflow: hidden;
}

#nivo-slider {
	position: absolute;
	width: 690px;
	height: 343px;	
	overflow: hidden;
	top: 0;
	left: 0;
}

.nivo-directionNav a {
	width: 36px;
	height: 36px;
	position:absolute;
	z-index:9;
	cursor:pointer;
	text-indent: -9999px;
	bottom: 3px;
}

.nivo-prevNav {
	right: 68px;
	background: url(../img/arrow-left.png) no-repeat center;
}

.nivo-nextNav {
	right: 30px;
	background: url(../img/arrow-right.png) no-repeat center;
}


.nivo-caption h3 {
	color: #f7f7f7;
	font-size: 24px;
	background: #8cb4be;
	display: inline-block;
	padding: 12px 20px;
	margin-bottom: 5px;
}

.nivo-caption p {
	background: #f7f7f7;
	color: #444;
	width: 325px;
	padding: 20px;
	margin-bottom: 15px;
}

/*====NIVO SLIDER NAVIGATION
=======================================================*/

.nivo-directionNav a {
	background-color: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

.nivo-directionNav a:hover {
	background-color: #2f2f2f;
}

.nivo-controlNav a.active {
	background: #2f2f2f;
}


/*====CONTENT SLIDER (CYCLE)
=======================================================*/

#content-slider-container {
	width: 690px;
	height: 310px;
	position: relative;
	overflow: hidden;
}

#content-slider {
	height: 310px;
	width: 690px;
	position: relative;
}

/*====CONTENT SLIDER DESCRIPTION TEXT
=======================================================*/

.description {
	margin: 15px 30px 15px 0;
	width: 450px;
	float: left;
}

.slider-img {
	width: 210px;
	margin: 15px 30px 15px 0;	
	float: left;
}

.top-text {
	font-size: 24px;	
	color: #363636;
	font-family: Yanone, Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 28px;
}

.bottom-text{
	font-size: 32px;
	color: #363636;
	font-family: Yanone, Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 36px;
	margin-bottom: 20px;
	display: block;
}

.description h2 {
	font-size: 62px;
	line-height: 44px;
	margin-bottom: 2px;
	color: #8cb4be;
}

.description .button {
	margin-top: 5px;
}


/*====CONTENT SLIDER ARROWS
=======================================================*/

.back {
	left: 30px;
	background: url(../img/arrow-left.png) no-repeat center;
}

.forward {
	left: 66px;
	background: url(../img/arrow-right.png) no-repeat center;
}

.arrow {
	display: block;
	position: absolute;
	outline: 0;
	width: 34px;
	height: 34px;
	background-color: #8cb4be;	
	bottom: 0;
	-webkit-transition: background-color .1s linear;
	-moz-transition: background-color .1s linear;
	-o-transition: background-color .1s linear;
	-ms-transition: background-color .1s linear;
	transition: background-color .1s linear;
	text-indent: -9999px;
}

.arrow a {
	display: block;
	width: 34px;
	height: 34px;
}

.arrow:hover {
	background-color: #2f2f2f;
}


/*====TAGLINE
=======================================================*/

.tagline {
	background: #2f2f2f;
	color: #d6d6d6;
	padding: 25px 20px 8px 20px;
	border-top: 6px solid #8cb4be;
	margin-bottom: 30px;
}

.tagline h2 {
	color: #d6d6d6;
	font-size: 25px;
	text-align: left;
	margin-bottom: 10px;
}

.tagline h2 span {
	color: #8cb4be;
}

.tagline-text {
	width: 625px;
	float: left;
}

.tagline-btn {
	float: right;			
	margin-top: -5px;
	margin-right: 40px;
}

.tagline-btn a {	
	color: #f7f7f7;
	font-size: 11px;
	text-transform: uppercase;
	width: 64px;
	height: 64px;
	display: block;
	text-align: center;
}

.buy-btn {
	background: url(../img/box-icons/dark/dollar.png) no-repeat center #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
	width: 64px;
	height: 64px;
	display: block;
	border-radius: 50%;	
}

.btn-text {
	margin-top: -1px;
}

.buy-btn:hover {
	background-color: #2f2f2f;
}


/*====GRID
=======================================================*/

.one-third, .two-third, .one-half, .one-fifth, 
.two-fifth, .three-fifth, .one-sixth, .five-sixth {
	float: left;
	margin: 0 30px 15px 0;
}

.last {
	margin-right: 0 !important;
}

.one-half {
	width: 330px;
}

.one-third {
	width: 210px;
}

.two-third {
	width: 450px;
}

.full-width {
	width: 690px;
	clear: both;
}

.full-width-margin {
	width: 690px;
	clear: both;
	margin-bottom: 15px;
}

.one-fifth {
	width: 114px;
}

.two-fifth {
	width: 258px;
}

.three-fifth {
	width: 402px;
}

.one-sixth {
	width: 90px;
}

.five-sixth {
	width: 570px;
}

/*====COLUMN TITLE
=======================================================*/

.col-title {
	border-left: 4px solid;
	border-color: #8cb4be;
	padding-left: 10px;
	padding-bottom: 2px;
	margin-bottom: 15px;
}

.col-title h3 {
	font-size: 21px;
	color: #3f3f3f;
	margin-bottom: 2px;
}

.col-title .subtitle {
	color: #717171;
	margin-bottom: 0;
	line-height: 11px;
}

/*====BOXES DARK
=======================================================*/

.boxes-dark, .boxes-light {
	margin-bottom: 15px;
}

.boxes-dark .box {
	float: left;
	color: #f7f7f7;
	text-align: center;
	background-color: #2f2f2f;
	-webkit-transition: background-color .4s ease;
	-moz-transition: background-color .4s ease;
	-o-transition: background-color .4s ease;
	-ms-transition: background-color .4s ease;
	transition: background-color .4s ease;
	padding: 25px 15px 10px 15px;
}

.boxes-dark .box h3 {
	margin-bottom: 1px;
	color: #f7f7f7;
}

.boxes-dark .box img {
	-moz-opacity: 0.20;
	opacity: 0.20;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=20);
}

.boxes-dark .box a {
	background: #3f3f3f;
	color: #f7f7f7;
	padding: 4px 8px;
	font-size: 9px;
	text-transform: uppercase;
	display: inline-block;
	margin: 10px 0 15px 0;
}

.boxes-dark .box .subtitle {
	color: #646464;	
	margin-bottom: 3px;
}

.boxes-dark .box:hover {
	background-color: #8cb4be;
	padding-top: 20px;
	border-top: 5px solid #2f2f2f;
	background-position: top center;
}


/*====BOXES-LIGHT
=======================================================*/

.boxes-light .box {
	float: left;
	text-align: center;
}

.boxes-light .box h3 {
	margin-bottom: 1px;
	color: #2f2f2f;
}

.boxes-light .box .subtitle {
	color: #646464;	
	padding-bottom: 3px;
	border-bottom: 2px solid #8cb4be;	
}


/*====SKILLS
=======================================================*/

.skills {
	padding-bottom: 15px;
}

.skills li {
	display: block;
	font-size: 11px;
	color: #f7f7f7;
	text-transform: uppercase;
	background: #2f2f2f;
	margin-bottom: 1px;	
	position: relative;
}

.skills p {
	background: #8cb4be;
	display: block;
	border-left: 4px solid #2f2f2f;
	height: 34px;
	padding-bottom: 0;
}

.skills p span {	
	margin-bottom: 0;
	position: absolute;
	top: 7px;
	left: 14px;
}

/*Skill Percentage*/
	.skill-50 { width: 50%; }
	.skill-60 { width: 60%; }
	.skill-65 { width: 65%; }
	.skill-70 { width: 70%; }
	.skill-75 { width: 75%; }
	.skill-80 { width: 80%; }
	.skill-85 { width: 85%; }
	.skill-90 { width: 90%; }
	.skill-95 { width: 95%; }
	.skill-100 { width: 100%; }


/*====TEAM MEMBERS
=======================================================*/

.team {
	width: 720px;
}

.member {
	width: 210px;
	margin: 0 30px 15px 0;
	float: left;
}

.member-social {
	float: left;
	width: 30px;
}

.team .member-social li {
	display: block;
	width: 30px;
	height: 30px;
	background-color: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

.member-social li:hover {
	background-color: #2f2f2f;
}

.member-social li a {
	text-indent: -9999px;
	height: 30px;
	width: 30px;
	display: block;
}

.member-details {
	width: 180px;
	float: left;
}

.member-name {
	border-top: 4px solid #8cb4be;
	background: #2f2f2f;
	padding: 10px;
	margin-top: -6px;
	margin-bottom: 15px;
}

.member-name h4 {
	font-size: 20px;
	margin-bottom: 3px;
	color: #f7f7f7;
}

.member-name .subtitle {
	margin-bottom: 0;
	line-height: 11px;
}


/*====PORTFOLIO TILES
=======================================================*/

.filter {
	float: right;
}

.filter li {
	float: left;
	margin-left: 3px;
}

.filter li a {
	color: #f7f7f7;	
	background: #2f2f2f;	
	transition: background-color .2s linear;
	display: inline-block;
	margin-bottom: 15px;
	padding: 2px 8px;
	font-size: 10px;
	text-transform: uppercase;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
}

.filter li a:hover, .filter li a.current {
	color: #f7f7f7;	
	background: #8cb4be;
}

.portfolio-thumbs {
	width: 693px;
	overflow: hidden;
}

.portfolio-thumbs li {
	display: block-inline;
	float: left;
	width: 228px;
	height: 228px;
	overflow: hidden;
	position: relative;
	border-bottom: 3px solid #f7f7f7;
	border-right: 3px solid #f7f7f7;
}

.overlay {
	width: 170px;
	height: 170px;
	position: absolute;
	bottom: 228px;
	background-color: #2f2f2f;
	text-align: center;
	padding: 30px 30px 26px 30px;
	color: #b7b7b7;
	border-bottom: 4px solid #8cb4be; 
}

.overlay h5 {
	font-family: Yanone, Tahoma, Arial, sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: #f7f7f7;
	letter-spacing: 1px;
	margin-bottom: 15px;
}

.overlay p {
	padding-bottom: 27px;
}

.portfolio-buttons {
	margin: 0 auto;
	width: 94px;
	overflow: hidden;
}

.portfolio-buttons a {
	width: 44px;
	height: 44px;
	background-color: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
	border-radius: 50%;
	display: block;
	float: left;
	margin-right: 6px;
}

.portfolio-buttons a:hover {
	background-color: #202020;
}

.link {background: url(../img/portfolio-icons/link.png) no-repeat center;}
.zoom {background: url(../img/portfolio-icons/zoom.png) no-repeat center;}
.article {background: url(../img/portfolio-icons/article.png) no-repeat center;}
.play {background: url(../img/portfolio-icons/video.png) no-repeat center;}
.external {background: url(../img/portfolio-icons/external.png) no-repeat center;}

#load-more {	
	display: table;
	margin: 30px auto 0 auto;
}



/*====BLOG
=======================================================*/

.blog-post {
	margin-bottom: 15px;
}

.meta {
	float: left;
	width: 48px;
	position: relative;
	overflow: hidden;
}

.date {
	background: #2f2f2f;
	color: #f7f7f7;
	text-align: center;
	padding: 6px 5px 3px 5px;
}

.date span {
	display: block;
}

.date .day {
	font-family: Yanone, Tahoma, Arial, sans-serif;
	font-size: 24px;
	margin-top: 3px;
}

.date .month {
	font-size: 10px;
	text-transform: uppercase;
	
}

.blog-preview {
	float: right;
	width: 632px;
	position: relative;
}

.blog-preview img {
	display: block;
}

.blog-preview iframe {
	display: block;
	margin-bottom: 0;
}

.img-link {
	background: #2f2f2f;
	display: block;
}

.blog-title {
	background: #2f2f2f;
	padding: 15px 20px;
	border-top: 4px solid #8cb4be;
	color: #f7f7f7;
	margin-bottom: 15px;
}

.blog-title h3 {
	margin-bottom: 5px;
}

.blog-title h3 a {
	color: #f7f7f7;
	font-size: 23px;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	-o-transition: color .2s linear;
	-ms-transition: color .2s linear;
	transition: color .2s linear;
}

.blog-title h3 a:hover {
	color: #8cb4be;
}

.blog-title .tags a {
	color: #8cb4be;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	-o-transition: color .2s linear;
	-ms-transition: color .2s linear;
	transition: color .2s linear;
}

.blog-title .tags a:hover {
	color: #f7f7f7;
} 

.blog-btn {
	color: #f7f7f7;
	font-size: 10px;
	text-transform: uppercase;
	background: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
	padding: 6px 8px; 	
}

.blog-btn:hover {
	background: #2f2f2f;
}


/*====BLOG SHARE NETWORK
=======================================================*/

.share-post {
	margin-top: 1px;
}

.share-btn {
	color: #f7f7f7;
	font-size: 10px;	
	display: block;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

.closed:hover {
	background: #8cb4be;
	color: #f7f7f7;
}

.closed {
	background: #2f2f2f;
}

.opened {
	background: #8cb4be;
}

.opened:hover {
	background: #2f2f2f;
	color: #f7f7f7;
}

.share-networks li {
	display: block;
	width: 48px;
	height: 48px;
	background-color: #8cb4be;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

.share-networks li:hover {
	background-color: #2f2f2f;
}

.share-networks li a {
	text-indent: -9999px;
	height: 48px;
	width: 48px;
	display: block;
}


/*====BLOG TYPES
=======================================================*/

.text-post {background: url(../img/blog/icons/text.png) no-repeat center;}
.photo-post {background: url(../img/blog/icons/photo.png) no-repeat center;}
.video-post {background: url(../img/blog/icons/video.png) no-repeat center;}
	
.blog-type {
	width: 48px;
	height: 48px;
	background-color: #8cb4be;
}

/*====BLOG COMMENTS
=======================================================*/
.comment {
	background: #f8f8f8;
	position: relative;
	padding: 15px 15px 0 15px;	
	-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 30px;
	border-bottom: 1px solid #8d8d8d;
}

.comment-text {
	margin-left: 90px;
}

.comments-section h3 {
	font-size: 22px;
	font-family: 'Yanone', Arial, sans-serif;
	color: #b5b5b5;
	margin-bottom: 30px;
}

.comment-reply {
	margin-left: 60px;
}

.avatar {
	float: left;
	margin-right: 20px;
}

.avatar img {
	border: 1px solid #e1e1e1;
	padding: 4px;
}

.comment-avatar {
	position: absolute;
	top: 15px;
	left: 15px;
}

.comment-date {
	margin-bottom: 10px;
	margin-top: -3px;
	display: block;
	font-size: 11px;
}

.comment-author {
	color: #8cb4be;
	text-transform: uppercase;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
}

.reply {
	position: absolute;
	top: 15px;
	right: 15px;
}

.post-author h4 {
	color: #f7f7f7;
	margin: 0 0 15px 0;
}

.post-author {
	background: #2f2f2f;
	padding: 20px 20px 20px 16px;
	color: #b5b5b5;
	border-left: 4px solid #8cb4be;
	margin: 30px 0;
}

.post-author strong {
	font-size: 12px;
	font-style: italic;
	color: #c7c7c7;
}

.post-author .avatar img {
	border: 1px solid #454545;
}

/*====CONTACT
=======================================================*/
#google-map {
	border: 5px solid #f7f7f7;
	margin-bottom: 30px;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
	box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);	
	overflow:hidden;
}

form {			
	width: 450px;
	margin-top: 15px;
}
				
.textbox {
	color: #747474;
	width: 316px;
	margin-bottom: 15px;
	padding: 10px;
	background-color: #f7f7f7;
	border: 1px solid #c3c3c3;
	font-family: inherit;
	font-size: inherit;
}

label {
	padding-top: 6px;
	float: left;
	width: 111px;
	overflow:hidden;
}

#check {
	width: 60px;
	color: #747474;
	margin-bottom: 15px;
	padding: 10px;
	background-color: #f7f7f7;
	border: 1px solid #c3c3c3;
	font-family: inherit;
	font-size: inherit;
}

#message, #comment-message {
	height: 135px;
	width: 316px;
	margin-top: 2px;
	margin-bottom: 8px;
}

#submit, #post-comment {	
	margin-left: 111px;
	margin-bottom: 15px;
	float: left;
	cursor: pointer;	
	padding: 6px 10px;
	border: none;
}

#submit:hover, #post-comment:hover {
	background: #2f2f2f;
}

#message-outcome {
	clear: both;
	margin-left: 111px;
	padding: 15px;
	background: #f1d76e;
	color: #746417;
	display: none;
	border: 1px dashed #bbb63b;
}

.contact-details {
	font-weight: bold;
	color: #2f2f2f;
	display: block;
}

/*====TWITTER FEED
=======================================================*/

.twitter-feed {
	text-align: center;
	font-family: Yanone, Tahoma, Arial, sans-serif;
	font-size: 20px;
	line-height: 30px;
}

.twitter-separator {
	display: block;
	background: url(../img/twitter.png) no-repeat center;
	height: 22px;
	margin-bottom: 15px;
	margin-top: 0;
	border: none;
	clear: both;
}

.tweet_list li {
	margin-bottom: 15px;
}

.tweet_time {
	display: inline-block;
	margin-left: 15px;
}


/*====TOGGLE AND ACCORDION PANELS
=======================================================*/

.toggle-header, .accordion-header {
	border-bottom: 0px dashed #c5c5c5;
	padding-bottom: 10px;
	margin-bottom: 5px;
}

.toggle-header h4, .accordion-header h4 {
	margin-bottom: 0;
	font-size: 18px;
}

.toggle-header h4 a, .accordion-header h4 a {
	color: #5f5f5f;
}

.toggle-header h4 a:hover, .accordion-header h4 a:hover {
	color: #8cb4be;
}

.toggle-header h4 a span, .accordion-header h4 a span {
	height: 19px;
	width: 19px;
	float: right;
	margin-right: 10px;
	margin-top: 1px;
	display: block;
	border-radius: 50%;
}

.tog-open span, .acc-open span {
	background: url(../img/toggle.png) no-repeat top center #8cb4be;
}

.tog-close span, .acc-close span {
	background: url(../img/toggle.png) no-repeat bottom center #8cb4be;
}

/*===UNORDERED LIST STYLES
=======================================================*/

.preview-lists ul, .preview-lists ol {
	float: left;
	margin-right: 40px;
}

ul.custom-list, ol.custom-list {
	list-style: none;
	margin-bottom: 15px;
}

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

ul.custom-list ul , ol.custom-list ul {
	margin-bottom: 0;
}

ol li {
	list-style: decimal inside none;
}

.check li {
	background: url(../img/bullets/check.png) no-repeat 0px 3px;
	padding-left: 20px;	
}

.crossed li {
	background: url(../img/bullets/crossed.png) no-repeat 0px 3px;
	padding-left: 20px;	
}

.arrows li {
	background: url(../img/bullets/arrow.png) no-repeat 0px 6px;
	padding-left: 15px;	
}

.square li {
	list-style: square inside none;
}

.disc li {
	list-style: disc inside none;
}


/*====INFO BOXES
=======================================================*/

.info-box {
	padding: 15px 15px 0 15px;
	margin-bottom: 15px;
	position: relative;
}

.info-close {
	font-size: 10px;
	text-transform: uppercase;
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: center;
	height: 19px;
	width: 19px;
	line-height: 20px;
}

.info-box h4 {
	font-size: 20px;
	margin-bottom: 10px;
}

.yellow-info {
	background: #fff6bf;
	color: #62523a;
	border: 1px solid #e0d594;
}

.yellow-info .info-close {
	color: #62523a;
	border: 1px solid #e0d594;
}

.yellow-info h4 {
	color: #62523a;
}

.green-info {
	background: #bbdd8c;
	color: #404e2e;
	border: 1px solid #a0c272;
}

.green-info .info-close {
	color: #404e2e;
	border: 1px solid #a0c272;
}

.green-info h4 {
	color: #404e2e;
}

.red-info {
	background: #f1d5d6;
	color: #5f393a;
	border: 1px solid #f2b1b4;
}

.red-info .info-close {
	color: #5f393a;
	border: 1px solid #f2b1b4;
}

.red-info h4 {
	color: #5f393a;
}

.blue-info {
	background: #c2e1ee;
	color: #4c6671;
	border: 1px solid #9fc6d7;
}

.blue-info .info-close {
	color: #4c6671;
	border: 1px solid #9fc6d7;
}

.blue-info h4 {
	color: #4c6671;
}