Header niet mee laten scrollen

Status
Niet open voor verdere reacties.
A

Appelmoesje

Gebruiker
Lid geworden
16 jan 2013
Berichten
42
Een vraagje, op deze (test)-site http://www.marcvanzuylen.nl/wsc/index.html zie je bovenin een afbeelding van een aantal wielrenners met daaronder het menu.

Als je nu naar beneden scrollt zie je in eerste instantie dit gedeelte 'meescrollen' tot een bepaald punt en dan staat het weer volledig boven in beeld.

Weet iemand hoe ik er voor kan zorgen dat dit gedeelte niet 'meescrollt' maar gewoon altijd bovenin blijft staan?
 
Dag Rick,

Ik begrijp helaas niet precies wat u bedoelt.

Dit is niet echt gebruiksvriendelijk voor degene die de website bekijkt naar mijn mening.
Wat is niet echt gebruiksvriendelijk? De situatie zoals die nu is, of de situatie zoals ik die graag zou willen hebben?


Hier heeft u echter een werkend voorbeeld: http://jsfiddle.net/ianclark001/wELFH/
Dit lijkt op de situatie zoals deze nu is. En dat is nu juist niet de situatie die ik wil hebben. Ik wil juist dat de header continu in beeld blijft, dus niet verdwijnt en weer tevoorschijn komt tijdens het scrollen.

P.s. wel alvast bedankt voor het reageren.
 
Ik doelde op de situatie zoals die nu is blijkbaar haha. Ik had het even verkeerd om.

om een div aan de bovenkant van de pagina te houden dient u de volgende css erop toe tr passen:
Code: 
.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
 
Laatst bewerkt door een moderator:
Okay, bedankt,

maar moet ik dit dan in de 'style.css' aanpassen? En zo ja, zou je me kunnen laten zien hoe (of waar) ik dat moet doen. De 'style.css' ziet er momenteel zo uit:
Code: 
/* -------------------------------------------------------------------
Stylesheet Guide
----------------------------------------------------------------------

01. Reset

02. Basic Elements
	1. Clearfix
	2. General Classes
	3. Typography
	4. Dropcap
	5. Font Awesome
	6. Images
	7. Fluid Width Video
	8. Dividers
	9. Forms
	10. Contact and Comments Form
	11. Buttons

03. Wrapper

04. Header
	1. Logo
	2. Social Icons
	3. Main Navigation
	4. Search

05. Slider

06. Page Header

07. Content
	1. Main
		- Detail Columns
		- Project Carousel
		- Team
		- 404 Page
		- Clients
		- Pricing Tables

08. Blog
	1. Image Post Slider
	2. Page Navigation
	3. About Author
	4. Comments

09. Portfolio
	1. Portfolio Filter
	2. Portfolio Items
	3. Portfolio Controls
	4. Isotope Styles

10. Sidebar
	1. Widgets
		- Default Widgets
		- Popular Posts
		- Tags Cloud

11. Footer 
	1. Widgets
		- Flickr
		- Address Info
	2. Copyright

12. Widgets + Shortcodes
	1. Accordion and Toggle
	2. Testimonials
	3. Tabs
	4. Info Box
	5. Notifications
	6. List
	7. Map
	8. Tooltip

13. Other
	1. Services
	2. Back To Top

14. Styling


 */

/* ---------------------------------------------------------------------- */
/*	Reset
/* ---------------------------------------------------------------------- */
	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

ul {
    list-style: none outside;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
	outline: none;
	text-decoration:none;
    background:transparent;
	vertical-align:baseline;
}

a, a > * {
	text-decoration: none;
    color: #373737;
}

b { color: #383838; }

.not-ie a {
	-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	   -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		 -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
			transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
}

img {
    border: 0;
	height: auto;
	max-width: 100%;
	-ms-interpolation-mode: bicubic;
}

.map img,
.google_map img { max-width: none; }

.box {
	margin-bottom: 90px;
}


/* ---------------------------------------------------------------------- */
/*	Basic Elements
/* ---------------------------------------------------------------------- */

body {
	background-color: #fff;
	color: #828282;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
	font: 12px/1.5 'Open Sans', Arial;
}

body.boxed { background-attachment: fixed; }

.boxed.pattern-1  { background-image: url(../images/patterns/pattern-1.png); }


	/* -------------------------------------------------- */
	/*	Clearfix
	/* -------------------------------------------------- */

	.clear {   
		clear: both;
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		width: 0;
	}
	
	.clearfix:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: ".";
	}
	
	/* -------------------------------------------------- */
	/*	General Classes
	/* -------------------------------------------------- */
	
	.align-center { text-align: center; }
	.align-left	  { text-align: left; }
	.align-right  { text-align: right; }
	
	.alignleft { float: left; }
	.alignright { float: right; }

	.bwWrapper.alignleft,
	img.alignleft { margin-right: 20px; }
	.bwWrapper.alignright,
	img.alignright { margin-left: 20px; }
	
	.padd-left { padding-left: 10px; }
	.padd-right { padding-right: 10px; }
	
	.hide { display: none; }

	.show { display: block; }

	.invisible { visibility: hidden; }

	.affix { position: fixed; }

	/* -------------------------------------------------- */
	/*	Typography
	/* -------------------------------------------------- */

	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 15px;
		color: #373737;
		font-family: 'Sanchez', serif;
		font-weight: 400;
		line-height: 1.15;
	}

	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	h6 { font-size: 14px; }

	.title {
		line-height: 1.25;
		margin-bottom: 20px;
	}
	
	::-moz-selection {
		color: #fff;
		text-shadow: none;
	}

	::selection {
		color: #fff;
		text-shadow: none;
	}
	
	.highlight {
		padding: 0 3px;
		color: #fff;
		text-shadow: none;
	}
	
	a.highlight:hover {
		color: #fff !important;
	}

	p {
		margin: 0 0 1.2em;
		padding: 0;
		line-height: 1.7em;
	}
	
	blockquote {
		padding: 0 0 0 45px;
		background-image: url(../images/icons/quotes.png);
		background-position: 0 8px;
		background-repeat: no-repeat;
		color: #b2b2b2;
		font-weight: 600;
		font-style: italic;
		font-size: 14px;
		font-family: 'Open Sans', Arial;
	}
	
		blockquote p { margin: .7em 0; }	
	
	/* -------------------------------------------------- */
	/*	Dropcap
	/* -------------------------------------------------- */	

	.dropcap {
		display: block;
		float: left;
		margin: 5px 9px 0 0;
		width: 50px;
		height: 50px;
		color: #373737;
		text-align: center;
		text-shadow: none;
		font-size: 60px;
		line-height: 50px;
	}
	
	.dropcap.rounded {
		border-radius: 20%;
	}
	
	.dropcap.dark {
		background-color: #373737;
		color: #fff;
		font-size: 30px;
	}

	.dropcap.color {
		color: #fff;
		font-size: 30px;
	}

	.dropcap.circle {
		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
				border-radius: 50%;
	}
	
	.dropcaprounded {
		display: inline-block;
		float: left;
		margin: 0 15px 0 0;
		width: 39px;
		height: 39px;
		border-radius: 20%;
		background-color: #373737;
		color: #ffffff;
		text-align: center;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 18px;
		font-family: 'Open Sans', Arial;
		line-height: 39px;
	}
	
		.dropcaprounded + h6, .iconcircle + h6, .icondisk + h6 {
		font-size: 15px;
		margin-top: 11px;
		margin-bottom: 20px;
	}
	
	.iconcircle + h3, .icondisk + h3 {
		margin-top: 11px;
		margin-bottom: 12px;
	}

	/* -------------------------------------------------- */
	/*	Font Awesome
	/* -------------------------------------------------- */
		
	.the-icons li i {
		color: #000;
	}
	
	.iconcircle, .icondisk {
		display: inline-block;
		float: left;
		margin: 0 15px 0 0;
		width: 38px;
		height: 38px;
		border-radius: 20%;
		background-color: #373737;
		color: #ffffff;
		text-align: center;
		font-size: 20px;
		font-family: 'FontAwesome';
		line-height: 36px;

			
		-webkit-transition: all .50s ease-in;
		   -moz-transition: all .50s ease-in;
			-ms-transition: all .50s ease-in;
			 -o-transition: all .50s ease-in;
				transition: all .50s ease-in;
	}
	
	.icondisk {
		background-color: transparent;
		color: #373737;
		border: solid 2px #373737;
	}
	
	.iconcircle:hover, .icondisk:hover {
		border-radius: 50%;
		
		-webkit-transition: all .20s ease-in;
		   -moz-transition: all .20s ease-in;
			-ms-transition: all .20s ease-in;
			 -o-transition: all .20s ease-in;
				transition: all .20s ease-in; 
	}
	
	.icondisk:hover {
		border-color: transparent;
		color: #fff;
	}

	
	/* -------------------------------------------------- */
	/*	Images
	/* -------------------------------------------------- */
	
	.single-image {
		position: relative;
		display: block;
		margin-bottom: 15px;
		cursor: pointer;
		font-size: 0;
	}
	
	.bwWrapper {
		position: relative;
		overflow: hidden;
		display: block;
	}

	.curtain {
		position: absolute;
		z-index: 5;
		top: -80%;
		left: 50%;
		margin: 0 0 0 -45%;
		display: block;
		overflow: hidden;
		width: 90%;
		height: 80%;
		text-align: center;
		opacity: 0;
		filter: alpha(opacity = 0);
		
		-webkit-transform: scale(0)
		   				   rotateX(0deg);
		   -moz-transform: scale(0)
		   				   rotateX(0deg);
			-ms-transform: scale(0)
		   				   rotateX(0deg);
			 -o-transform: scale(0)
		   				   rotateX(0deg);
				transform: scale(0)
		   				   rotateX(0deg);
		
		-webkit-transition: all .50s ease-in;
		   -moz-transition: all .50s ease-in;
			-ms-transition: all .50s ease-in;
			 -o-transition: all .50s ease-in;
				transition: all .50s ease-in;  
	}
	
	.single-image .curtain:after {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -15px 0 0 -15px;
		width: 30px;
		height: 30px;
		color: #fff;
		content: "";
		text-align: center;
		zoom: 1;
	}
	
	.single-image.link-icon .curtain:after  { background-image: url(../images/icons/link-icon.png);  }
	.single-image.zoom-icon .curtain:after  { background-image: url(../images/icons/zoom-icon.png);	 }
	.single-image.video-icon .curtain:after { background-image: url(../images/icons/video-icon.png); }
	
	.single-image:hover .curtain {
		top: 10%;
		opacity: 0.60;
		filter: alpha(opacity = 60);
		
		-webkit-transform: scale(1)
		   				   rotateX(360deg);
		   -moz-transform: scale(1)
		   				   rotateX(360deg);
			-ms-transform: scale(1)
		   				   rotateX(360deg);
			 -o-transform: scale(1)
		   				   rotateX(360deg);
				transform: scale(1)
		   				   rotateX(360deg);
	}

	/* -------------------------------------------------- */
	/*	Fluid Width Video
	/* -------------------------------------------------- */

	.video-container iframe,  
	.video-container object,  
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

		video {
			max-width: 100%;
			height: auto;
		}
	
	/* -------------------------------------------------- */
	/*	Dividers
	/* -------------------------------------------------- */
	
	.divider-solid, .divider-half-solid {
		margin-bottom: 90px;
		margin-left: 10px;
		margin-right: 10px;
		clear: both;
	}
	.divider-half-solid {
		margin-bottom: 45px;
	}
	
	#main .divider-solid {
		margin-left: 0;
		margin-right: 0;
	}
	
	.white-space {
		clear: both;
		padding: 20px 0;
	}
	
	/* -------------------------------------------------- */
	/*	Forms
	/* -------------------------------------------------- */

	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		cursor: pointer;
		-webkit-appearance: button;
	}
	
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  padding: 0;
	  border: 0;
	}

	button,
	input,
	select,
	textarea {
		margin: 0;
		border: none;
		vertical-align: baseline;
		font-size: 100%;
	}
	
	button {
		display: inline-block;
		margin-bottom: 15px;
		padding: 6px 13px;
		outline: none;
		background-color: #000;
		color: #fff;
		vertical-align: baseline;
		text-align: center;
		text-decoration: none;
		font: 11px/1.5 'Open Sans', Arial;
		cursor: pointer;
	}

	label { 
		display: inline-block; 
		cursor: pointer;
	}
	
	.not-ie input,
	.not-ie textarea,
	.not-ie select,
	.not-ie button {
		-webkit-transition: all .25s linear;
		   -moz-transition: all .25s linear;
			-ms-transition: all .25s linear;
			 -o-transition: all .25s linear;
				transition: all .25s linear;	
	}
	
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	textarea, select {
		display: inline-block;
		color: #9e9e9e;
		font-size: 12px;
		font-family: 'Open Sans', Arial, sans-serif;
		padding: 6px 8px 7px;
		width: 100%;
		border-width: 1px;
		border-style: solid;
		border-color: transparent;
		background-color: #ebebeb;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		-webkit-border-radius: 0;
				border-radius: 0;
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				box-shadow: none;				
		-webkit-appearance: none;	
		outline: none;
	}
	
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="datetime"]:focus,
	input[type="datetime-local"]:focus,
	input[type="date"]:focus,
	input[type="month"]:focus,
	input[type="time"]:focus,
	input[type="week"]:focus,
	input[type="number"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	input[type="search"]:focus,
	input[type="tel"]:focus,
	input[type="color"]:focus,
	textarea:focus,
	select:focus {
		border-color: #b4b4b4;
		background-color: #fdfdfd;
		-webkit-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,.1);
		   -moz-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,.1);
				box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,.1);
		-webkit-appearance: none;			
	}
	
	.ie7 input[type="text"],
	.ie7 input[type="password"],
	.ie7 textarea,
	.ie7 select,
	.ie8 input[type="text"],
	.ie8 input[type="password"],
	.ie8 textarea,
	.ie8 select { line-height: 1.3em; }
	
	textarea {
		resize: both;
		min-height: 100px;
	}
	
	select {
		background-image: url(../images/icons/select-arrows.png);
		background-position: 95% bottom;
		background-repeat: no-repeat;
	}
	
	input[type="radio"],
	input[type="checkbox"] {
	  margin: 4px 0 0;
	  line-height: normal;
	}

	input[type="image"],
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	input[type="radio"],
	input[type="checkbox"] { width: auto; }

	.wrong-data { border-color: #fe5214; }

	/* Fix for Mobile Safari */
	input[type="checkbox"]	{ -webkit-appearance: checkbox; }
	input[type="radio"]		{ -webkit-appearance: radio; }

	/* Chrome, Safari */
	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder { color: #9e9e9e; }

	/* Firefox */
	input:-moz-placeholder,
	textarea:-moz-placeholder { color: #9e9e9e; }
	
	/* ---------------------------------------- */
	/*	Contact and Comments Forms
	/* ---------------------------------------- */
	
	.comment-form-author,
	.comment-form-email,
	.comment-form-url,
	.comment-form-comment,
	
	.message-form-name,
	.message-form-email,
	.message-form-url,
	.message-form-message,
	.form-submit {
		position: relative;
		margin-bottom: 10px;
	}

		.message-form-name:before,
		.message-form-email:before,
		.message-form-url:before,
		.message-form-message:before,
		.comment-form-author:before, 
		.comment-form-email:before,
		.comment-form-url:before,
		.comment-form-comment:before
		{
			top: 28px;
			display: inline-block;
			color: #b4b4b4;
			font-weight: normal;
			font-style: normal;
			font-family: 'FontAwesome';
			font-size: 14px;
		}

		.message-form-name:before,
		.message-form-email:before,
		.message-form-url:before,
		.message-form-message:before,
		.comment-form-author:before,
		.comment-form-email:before,
		.comment-form-url:before,
		.comment-form-comment:before
		{
			position: absolute;
			left: 8px;
		}

		.message-form-name:before,
		.comment-form-author:before  { content: "\f007"; }

		.message-form-email:before,
		.comment-form-email:before   { content: "\f0e0"; }

		.message-form-url:before,
		.comment-form-url:before	 { content: "\f0ac"; }

		.message-form-message:before,
		.comment-form-comment:before { content: "\f040"; }

			.contact-form {
				margin-top: 20px;
			}
			
			.comments-form input,
			.contact-form input { 
				width: 35%;
				padding-left: 30px;
			}
			
			.comments-form textarea,
			.contact-form textarea,
			.widget_contact_form textarea { width: 80%; }
			
			.contact-form textarea { width: 90%; }
			
			.comments-form textarea,
			.contact-form textarea {
				padding-left: 30px;
				min-height: 150px; 
			}
			
			.comments-form label,
			.contact-form label { display: block; }

				.comments-form .required,
				.contact-form .required {
					color: #b2b2b2;
					font-style: italic;
					font-size: 11px;
				}
				
				.comments-form input,
				.contact-form input,
				.widget_contact_form input {
					-webkit-box-shadow: none;
					   -moz-box-shadow: none;
							box-shadow: none;
				}
				
				/* Widget Contact Form */

				.widget_contact_form input,
				.widget_contact_form textarea { padding-left: 32px; }
				
				
		/* HTML5 Validation Styles */	
		
		.comments-form input:required:valid,
		.contact-form input:required:valid,
		.comments-form textarea:required:valid,
		.contact-form textarea:required:valid,
		.widget_contact_form input:required:valid,
		.widget_contact_form textarea:required:valid { border-color: #000; }
		
		.comments-form input:focus:invalid,
		.contact-form input:focus:invalid,
		.comments-form textarea:focus:invalid,
		.contact-form textarea:focus:invalid,
		.widget_contact_form input:focus:invalid,
		.widget_contact_form textarea:focus:invalid { border-color: #e27152; }

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

	.button {
		display: inline-block;
		margin-bottom: 15px;
		padding: 6px 13px;
		outline: medium none;
		color: #fff;
		vertical-align: baseline;
		text-align: center;
		text-decoration: none;
		font-family: 'Open Sans', Arial, sans-serif;
		cursor: pointer;

		-webkit-transition: all 0.2s linear 0s;
		   -moz-transition: all 0.2s linear 0s;
			-ms-transition: all 0.2s linear 0s;
			 -o-transition: all 0.2s linear 0s;
				transition: all 0.2s linear 0s;
	}

	.button.small { padding: 6px 13px; } 

	.button.medium {
		padding: 8px 20px;
		font-size: 13px;
	} 

	.button.big {
		padding: 10px 23px;
		font-size: 14px;
	} 
	
	.button.frame {
		border: solid 1px #828282;
	}
	
	.button.default		{ background-color: #828282; }
	.button.orange		{ background-color: #f99200; }
	.button.olive		{ background-color: #abbd38; }
	.button.green		{ background-color: #9bce29; }
	.button.blue		{ background-color: #169fe6; }
	.button.yellow		{ background-color: #e8bf00; }
	.button.red			{ background-color: #ff1414; }
	.button.cherry		{ background-color: #9f1854; }
	.button.gray  		{ background-color: #828282; }


	.button.orange:hover,
	.button.olive:hover,	
	.button.green:hover,	
	.button.blue:hover, 
	.button.yellow:hover,	
	.button.red:hover,
	.button.cherry:hover, 
	.button.gray:hover { background-color: #373737; }
	
	.button.color:hover { background-color: #373737 !important;	}


/* ---------------------------------------------------------------------- */
/*	Wrapper
/* ---------------------------------------------------------------------- */


.boxed #wrapper {
	margin: 0 auto;
	width: 1000px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
			box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.wide #wrapper { background-color: #fff; }

/* ---------------------------------------------------------------------- */
/*	Header
/* ---------------------------------------------------------------------- */

	#header {
		z-index: 99;
		padding-top: 50px;
		background-color: #fff;
		background-image: url(../images/shadow_top.png);
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	
	.fixed#header {
		position: fixed;
		top: 0;
		left: 0;
		padding: 12px 0 8px;
		width: 100%;
		background-color: #fff;
		background-color: rgba(255,255,255,.95);
		
		-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.2);
		   -moz-box-shadow: 0 2px 3px rgba(0,0,0,.2);
				box-shadow: 0 2px 3px rgba(0,0,0,.2);
	}

	/* -------------------------------------------------- */
	/*	Logo
	/* -------------------------------------------------- */

		#logo {
	width: 900px;
	height: 156px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/logo/logo_orange.jpg);
	display: block;
	float: left;
	line-height: 0;
	margin-top: 0;
		}
		
		.fixed#header .eight #logo   { display: none; }
		.fixed#header .sixteen #logo { margin: 4px 0 8px; }
		
	
	
	/* -------------------------------------------------- */
	/*	Social Icons
	/* -------------------------------------------------- */

	#header ul.social-icons		  { float: right; }
	.fixed#header ul.social-icons { display: none; }
	
	ul.social-icons {
		margin-top: 3px;
		font-size: 0;
	}

		ul.social-icons li {
			display: inline-block; 
			margin-right: 2px; 
			margin-bottom: 2px; 
			vertical-align: top;
			background-color: #d4d4d4;
			border-radius: 15% 0 15% 15%;

			-webkit-transition: all .2s linear;
			   -moz-transition: all .2s linear;
				-ms-transition: all .2s linear;
				 -o-transition: all .2s linear;
					transition: all .2s linear;
		}
		
		#footer ul.social-icons li { background-color: #555; }
		
		
		#header ul.social-icons li:last-child { margin-right: 0; }

			ul.social-icons li a {
	position: relative;
	display: block;
	width: 31px;
	height: 31px;
	background-image: url(../images/icons/social-icons.png);
	background-repeat: no-repeat;
	font: 0/0 a;
	cursor: pointer;
	-webkit-transition: all 0.25s linear 0s;
	-moz-transition: all 0.25s linear 0s;
	-ms-transition: all 0.25s linear 0s;
	-o-transition: all 0.25s linear 0s;
	transition: all 0.25s linear 0s;
			}
			
			ul.social-icons li.twitter a	  { background-position: 0 0; }
			ul.social-icons li.facebook a	  { background-position: -31px 0; }
			ul.social-icons li.dribble a	  { background-position: -62px 1px; }
			ul.social-icons li.vimeo a		  { background-position: -94px 1px; }
			ul.social-icons li.youtube a	  { background-position: -126px 1px; }
			ul.social-icons li.rss a		  { background-position: -155px 1px; }
			ul.social-icons li.picasa a		  { background-position: -186px 2px; }
			ul.social-icons li.stubleupon a	  { background-position: -217px 2px; }
			ul.social-icons li.skype a		  { background-position: -248px 2px; }
			ul.social-icons li.dropbox a	  { background-position: -279px 2px; }
			ul.social-icons li.cat a		  { background-position: -310px 1px; }
			ul.social-icons li.linkedin a	  { background-position: -341px 1px; }
			ul.social-icons li.plus a		  { background-position: -372px 1px; }
			ul.social-icons li.pinterest a	  { background-position: -403px 2px; }
			ul.social-icons li.blogger a	  { background-position: -434px 1px; }
			ul.social-icons li.flickr a		  { background-position: -464px -1px; }
			ul.social-icons li.delicious a	  { background-position: -495px 1px; }
			ul.social-icons li.yahoo a		  { background-position: -526px 1px; }
			ul.social-icons li.evernote a	  { background-position: -557px 2px; }
			ul.social-icons li.apple a		  { background-position: -588px 1px; }
			ul.social-icons li.behance a	  { background-position: -620px 1px; }
			ul.social-icons li.gplus a		  { background-position: -651px 2px; }
			ul.social-icons li.digg a		  { background-position: -682px 1px; }
			ul.social-icons li.lastfm a		  { background-position: -713px 0px; }
			ul.social-icons li.myspace a	  { background-position: -745px 1px; }
			ul.social-icons li.deviantart a	  { background-position: -776px -1px; }
			ul.social-icons li.wordpress a    { background-position: -806px 2px; }
			ul.social-icons li.mail a		  { background-position: -838px 0px; }

			#wrapper ul.social-icons .twitter:hover    { background-color: #47c0d8; }
			#wrapper ul.social-icons .facebook:hover   { background-color: #49699f; }
			#wrapper ul.social-icons .dribble:hover    { background-color: #e65992; }
			#wrapper ul.social-icons .vimeo:hover      { background-color: #568799; }
			#wrapper ul.social-icons .youtube:hover    { background-color: #b72d24; }
			#wrapper ul.social-icons .rss:hover        { background-color: #fe9900; }
			#wrapper ul.social-icons .picasa:hover     { background-color: #535353; }
			#wrapper ul.social-icons .stubleupon:hover { background-color: #eb4924; }
			#wrapper ul.social-icons .skype:hover      { background-color: #24b0e4; }
			#wrapper ul.social-icons .dropbox:hover    { background-color: #5da3e8; }
			#wrapper ul.social-icons .cat:hover        { background-color: #7292a2; }
			#wrapper ul.social-icons .linkedin:hover   { background-color: #2c7cb7; }
			#wrapper ul.social-icons .plus:hover       { background-color: #629e61; }
			#wrapper ul.social-icons .pinterest:hover  { background-color: #c21c21; }
			#wrapper ul.social-icons .blogger:hover    { background-color: #f38f33; }
			#wrapper ul.social-icons .flickr:hover     { background-color: #b5c2d2; }
			#wrapper ul.social-icons .delicious:hover  { background-color: #3975be; }
			#wrapper ul.social-icons .yahoo:hover      { background-color: #a55bbe; }
			#wrapper ul.social-icons .evernote:hover   { background-color: #606060; }
			#wrapper ul.social-icons .apple:hover      { background-color: #fe9900; }
			#wrapper ul.social-icons .behance:hover    { background-color: #18a3fe; }
			#wrapper ul.social-icons .gplus:hover      { background-color: #2882c6; }
			#wrapper ul.social-icons .digg:hover       { background-color: #2882c6; }
			#wrapper ul.social-icons .lastfm:hover     { background-color: #be0607; }
			#wrapper ul.social-icons .myspace:hover    { background-color: #1b61b0; }
			#wrapper ul.social-icons .deviantart:hover { background-color: #5f7162; }
			#wrapper ul.social-icons .wordpress:hover  { background-color: #33759d; }
			#wrapper ul.social-icons .mail:hover	   { background-color: #65a413; }

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

	.menu-container {
		margin-top: 33px;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #ebebeb;
	}
	
	
	.fixed#header .menu-container {
		float: right;
		margin: 0;
		border-top-width: 0;
		border-bottom-width: 0;
	}
	
		.menu-container .navigation { float: left; }
	
			.navigation > div > ul > li {
				position: relative; 
				display: block;
				float: left;
			}
			
				.navigation > div > ul > li > a {
					display: block;
					margin: 0;
					padding: 17px 40px 18px 0;
					color: #919191;
					font-size: 14px;
				}
				.fixed#header .navigation > div > ul > li > a {
					padding: 17px 0 18px 40px;
				}
				
				
				.navigation a { 
					font-family: 'Sanchez', serif;
				}


				.ie7 .navigation > div > ul > li > a,
				.ie8 .navigation > div > ul > li > a { font-weight: 400; }
				
				.navigation > div > ul > li:first-child > a { border-left-width: 0; }

				.navigation > div > ul > li:hover > a,
				.navigation > div > ul > li.current-menu-item > a,
				.navigation > div > ul > li.current-menu-parent > a,
				.navigation > div > ul > li.current-menu-ancestor > a,
				.navigation > div > ul > li.current_page_item > a,
				.navigation > div > ul > li.current_page_parent > a,
				.navigation > div > ul > li.current_page_ancestor > a { color: #fff; }
				
	
	/* Dropdown */

	 .navigation ul ul {
		position: absolute;
		z-index: 9999;
		display: none;
		margin-top: 1px;
		width: 180px;
		background-color: #fff;
		-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025);
		   -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025);
				box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025);
		opacity: 1;
	}

		.navigation ul ul li {
			position: relative; 
			margin-top: -1px;
			border: 1px solid #eaeaea;
			background-color: #f1f1f1;
		}
		
		.navigation > div > ul ul li:hover,
		.navigation > div > ul ul li.current-menu-item,
		.navigation > div > ul ul li.current-menu-parent,
		.navigation > div > ul ul li.current-menu-ancestor,
		.navigation > div > ul ul li.current_page_item,
		.navigation > div > ul ul li.current_page_parent,
		.navigation > div > ul ul li.current_page_ancestor { 
			border-left-color: transparent;
			border-right-color: transparent;
			background-color: #f9f9f9;
		}
		
			.navigation ul ul li a {
				display: block;
				padding: 6px 20px;
				color: #818181;
				font-size: 13px;
			}
			
			.navigation ul ul li a:active {
				-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.05);
				   -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.05);
						box-shadow: inset 0 0 2px rgba(0,0,0,.05);
			}
			
			.navigation > div > ul ul li:hover > a,
			.navigation > div > ul ul li.current-menu-item > a,
			.navigation > div > ul ul li.current-menu-parent > a,
			.navigation > div > ul ul li.current-menu-ancestor > a,
			.navigation > div > ul ul li.current_page_item > a,
			.navigation > div > ul ul li.current_page_parent > a,
			.navigation > div > ul ul li.current_page_ancestor > a { background-color: #f9f9f9; }
			
				.navigation ul ul li .rightarrowclass:before {
					position: absolute;
					top: 9px;
					right: 10px;
					color: #ccc;
					content: "\f054";
					font-weight: 100;
					font-style: normal;
					font-size: 9px;
					font-family: 'FontAwesome', Arial;
				}
				
				.navigation ul ul li:hover > a .rightarrowclass:before { color: #ccc; }
		
	/* Sub Dropdown */	

	.navigation ul ul ul {
		left: 178px;
		top: -1px;
	}
	
	/* Responsive Select */
	
	.responsive-nav { 
		display: none;
		margin-bottom: 25px;
		background-color: transparent;
		background-image: url(../images/icons/select-arrows.png);
		background-position: 98% top;
		border-width: 1px 0 1px 0;
		border-style: solid;
		border-color: #ebebeb transparent #ebebeb transparent;
	}
	
	.responsive-nav:focus {
		background-color: transparent;
		background-position: 98% bottom;
		border-color-top: #ebebeb;
		border-color-bottom: #ebebeb;
		border-color-left: transparent;
		border-color-right: transparent;
		
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				box-shadow: none;
	}
	
	/* -------------------------------------------------- */
	/*	Search
	/* -------------------------------------------------- */

	.search-wrapper {
		position: relative;
		overflow: hidden;
		float: right;
		padding-left: 0;
		padding-right: 35px;
		padding-top: 7px;
		padding-bottom: 7px;
		margin-top: 9px;
		width: 0;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #ebebeb;
		
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}
	

	.fixed#header .search-wrapper { display: none; }
	
		.search-wrapper p { margin: 0; }

			.search-wrapper input[type="text"] {
				margin: 0 0 0 7px;
				padding: 2px 5px;
				font-size: 11px;
			}

			.search-wrapper .submit-search {
				position: absolute;
				z-index: 3;
				top: 0;
				right: 0;
				margin: 0;
				padding: 0;
				width: 34px;
				height: 34px;
				font: 0/0 a;
				border: none;
				background-color: #fff;
			}
			
			.search-wrapper .submit-search:after {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 4;
				width: 34px;
				height: 34px;
				color: #b2b2b2;
				content: "\f002";
				font-size: 14px;
				font-family: 'FontAwesome';
				line-height: 34px;
				text-align: center;
			}
			
			.ie7 .search-wrapper .submit-search:after,
			.ie8 .search-wrapper .submit-search:after { line-height: 0;  }

			.search-wrapper .submit-search:hover:after,
			.search-wrapper .submit-search.active:after { color: #373737; }
		
/* ---------------------------------------------------------------------- */
/*	Slider
/* ---------------------------------------------------------------------- */

.slider {
	position: relative;
	margin-top: 0;
	margin-bottom: 10px;
	height: auto;
	zoom: 1;
}

.menu-shadow-slider, .menu-shadow {
	width: 100%;
	height: 47px;
	left: 0;
	background-image: url(../images/shadow_slider.png);
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	opacity: 0.5;
	z-index: 1000;
}

#layerslider {
	background-image: url(../images/gradient.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #f1f1f1;
}

#layerslider .inline-h2-dark {
	background-color: #373737;
	color: #fff;
}

.flexslider .caption  { background-color: rgba(0,0,0, .7);  }


/* ---------------------------------------------------------------------- */
/*	Page Header
/* ---------------------------------------------------------------------- */


.page-header {
	margin: 0 10px 60px;
	padding: 45px 0 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ebebeb;
	background-image: url(../images/bg_page-header.png);
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
}


	.page-header h1 {
		margin: 0;
		color: #686868;
		font-size: 25px;
		text-transform: uppercase;
		line-height: 1.25;
	}
	
/* ---------------------------------------------------------------------- */
/*	Content
/* ---------------------------------------------------------------------- */

#content {
	margin-bottom: 10px;
}

	.slogan {  
		display: block; 
		margin: -25px 10px 70px 10px;
		padding: 0;
		text-align: center; 
		line-height: 1.25;
		zoom: 1;
	}
	
	.slogan h6 {
		color: #828282;
	}
	
	.text-bar {
	background-image: url(../images/bg-text-bar.png);
	background-repeat: no-repeat;
	height: auto;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 80px;
	margin-left: 10px;
	padding-top: 25px;
	padding-right: 80px;
	padding-bottom: 25px;
	padding-left: 30px;
	}
	
	.text-bar h2 {
		color: #555;
		margin-bottom: 10px;
	}
	
	.text-bar button {
		margin: -57px 13px 0 13px;
	}
	
	.ie7 .slogan,
	.ie8 .slogan { font-weight: 400; }
	
	.content-title { 
		margin: 0 10px 20px 10px;
		font-family: 'Sanchez', serif;
		color: #505050;
	}
	
	.columns .content-title,
	.column .content-title { margin: 0 0 20px 0; }

	.section-title { margin-bottom: 22px; }

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

	.sbr #main { float: left; }
	.sbl #main { float: right; }
	

	/* -------------------------------------------------- */
	/*	Detail Columns
	/* -------------------------------------------------- */
	
	.detail-box {
		position: relative;
		margin-bottom: 90px;
		padding: 20px 25px 10px;
		border-width: 1px;
		border-style: solid;
		border-color: #ebebeb;
		text-align: center;
		border-radius: 35px 0 0 0;
	}
	
	
		.detail-entry { 
			position: relative; 
			z-index: 2;
		}
		
		.detail-box.stateColor .detail-entry,
		.detail-box.defaultState .detail-entry { color: #fff; }


			.detail-box h5 {
				margin-bottom: 20px;
			}
			
			.detail-box h5 a {
				margin-bottom: 20px;
				color: #373737;
			}

			.detail-box.stateColor h5,
			.detail-box.defaultState h5 { color: #fff; }
			
			.detail-box.stateColor h5 a,
			.detail-box.defaultState h5 a { color: #fff; }
	
		.detail-box .transform {
			position: absolute;
			bottom: 50%;
			left: 50%;
			right: 0;
			width: 0;
			height: 0;
			opacity: 0;
			background-repeat: repeat;
			background-attachment: fixed;
			
			-webkit-transition: all .4s linear;
			   -moz-transition: all .4s linear;
				-ms-transition: all .4s linear;
				 -o-transition: all .4s linear;
					transition: all .4s linear;
		}
		
/*		.detail-box.stateColor .transform {
			-webkit-transition: none;
			   -moz-transition: none;
				-ms-transition: none;
				 -o-transition: none;
					transition: none;		
		}*/

		
		.detail-box.stateColor .transform,
		.detail-box.defaultState .transform,
		.touched .transform { 
			width: 100%;
			bottom: 0;
			left: 0;
			opacity: 1;
			border-radius: 35px 0 0 0;
		}
		
	/* -------------------------------------------------- */
	/*	Project Carousel
	/* -------------------------------------------------- */
	
	.jcarousel-container { 
		position: relative;
		margin-left: 0;
		margin-right: 0;
	}
	
	.sixteen.columns .jcarousel-container {
		margin-left: -10px;
		margin-right: -10px;
	}
	
		.jcarousel-clip {
			overflow: hidden;
			width: 100%;
		}

			.projects-carousel li .project-meta { background-color: #f5f5f5; }
			.projects-carousel li:hover .project-meta { background-color: #fff; }

				.projects-carousel h6 {
					margin-bottom: 5px;
					color: #373737;
					font-size: 12px;
					font-family: 'Open Sans', Arial, sans-serif;
				}

				.projects-carousel .project-meta {
					display: block;
					margin-bottom: 20px;
				}
				
				.projects-carousel img { display: block; }
				

	/* Controls */
		
	.jcarousel-prev,
	.jcarousel-next {
		position: absolute;
		top: 1px;
		right: 10px;
		overflow: hidden;
		width: 22px;
		height: 22px;
		background-color: #373737;
		cursor: pointer;
		border-radius: 0 10% 10% 0;
		
		-webkit-transition: all .2s linear;
		   -moz-transition: all .2s linear;
			-ms-transition: all .2s linear;
			 -o-transition: all .2s linear;
				transition: all .2s linear;
	}
	
	.jcarousel-prev { right: 35px; border-radius: 10% 0 0 10%; }
	.jcarousel-next:after { background-position: right top; }

	
	.jcarousel-prev:after,
	.jcarousel-next:after {
		position: absolute;
		width: 21px;
		height: 21px;
		background-image: url(../images/icons/small-arrows.png);
		background-repeat: no-repeat;
		content: "";
	}
	
	.jcarousel-next-disabled,
	.jcarousel-next-disabled:hover,
	.jcarousel-next-disabled:focus,
	.jcarousel-next-disabled:active,
	.jcarousel-prev-disabled,
	.jcarousel-prev-disabled:hover,
	.jcarousel-prev-disabled:focus,
	.jcarousel-prev-disabled:active {
		background-color: #373737 !important;
		cursor: auto;
		opacity: .75;
	}
	
	/* -------------------------------------------------- */
	/* Team
	/* -------------------------------------------------- */	

	.team-member { margin-bottom: 25px; }

		.team-entry {
			position: relative;
			padding-bottom: 15px;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #ebebeb;
			border-radius: 5%;
			
			 -webkit-transition: all .4s linear;
				-moz-transition: all .4s linear;
				 -ms-transition: all .4s linear;
				  -o-transition: all .4s linear;
					 transition: all .4s linear;  
		}


			.team-entry .team-name {
				margin-top: 10px;
				color: #383838;
				font-weight: 700;
				font-size: 12px;
				font-family: 'Open Sans', Arial, sans-serif;
			}

			.team-entry .job-title {
				display: block;
				margin-bottom: 5px;
				color:#b2b2b2;
				font-size: 11px;
			}

			.team-entry ul.social-icons {
				margin-top: 10px;
				margin-bottom: 20px;
			}
			
	/* -------------------------------------------------- */
	/* 404 Page
	/* -------------------------------------------------- */	

	.e404 {padding: 50px 0 160px 0;}

		.e404 h1 {
			display: inline-block;
			float: left;
			margin-right: 50px;
			padding-right: 70px;
			font-weight: 600;
			font-size: 200px;
			font-family: 'Open Sans', Arial, sans-serif;
			line-height: .8;
		}

		.e404 h2 { 
			margin-top: 10px;
			margin-bottom: 30px;
			font-weight: 400;
			font-size: 25px;
			line-height: 1.2;	
		}	
		
	/* -------------------------------------------------- */
	/*	Clients
	/* -------------------------------------------------- */			
					
	ul.clients-items { padding: 10px 0 0; }
	
		ul.clients-items li { 
			float: left; 
			width: 20%;
			padding: 0 30px;
			
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
				     box-sizing: border-box;
		}
		
			ul.clients-items .bwWrapper {
				position: relative;
				display: block;
			}
			
	/* -------------------------------------------------- */
	/* Pricing Tables
	/* -------------------------------------------------- */	
	
	.simple-pricing-table { margin: 0 10px; }
	
	#main .simple-pricing-table { margin: 0; }
	
		.container .simple-pricing-table .column {
			position: relative;
			margin-left: 0;
			margin-right: 0;
			text-align: center;
			
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
			   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
					box-shadow: 0 1px 1px rgba(0,0,0,.2);
			
			-webkit-transition: margin .25s linear;
			   -moz-transition: margin .25s linear;
				-ms-transition: margin .25s linear;
				 -o-transition: margin .25s linear;
					transition: margin .25s linear;
		}
		
		.container .simple-pricing-table .column.featured,
		.container .simple-pricing-table .column:hover {
			z-index: 3;
			margin-top: -10px;
			
			-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3);
			   -moz-box-shadow: 0 2px 2px rgba(0,0,0,.3);
					box-shadow: 0 2px 2px rgba(0,0,0,.3);
		}
		
			.simple-pricing-table .title { margin: 0; }

			.simple-pricing-table.type-1 .title {
				padding: 15px 15px 13px;
				color: #fff;
			}
			
			.simple-pricing-table.type-2 .title {
				padding: 11px 0;
				background-color: #f6f6f6;
				text-transform: uppercase;
				font-size: 15px;
			}
			
			.simple-pricing-table.type-1 .featured .title {
				padding-top: 15px;
				padding-bottom: 13px;
				background-color: #373737 !important;
			}
			
			.simple-pricing-table.type-2 .featured .title {
				padding-top: 16px;
				padding-bottom: 16px;
				background-color: #f4f4f4;
				color: #373737;
			}
			
			.simple-pricing-table.type-1 .column:hover .title {
				padding-top: 15px;
				padding-bottom: 13px;
			}
			
			.simple-pricing-table.type-2 .column:hover .title{
				padding-top: 16px;
				padding-bottom: 16px;
			}
			
			.simple-pricing-table .price { padding: 18px 0 15px; }
			
			.simple-pricing-table.type-1 .price { background-color: #e6e6e6; }
			.simple-pricing-table.type-2 .price { background-color: #828282; }
			
			
			.simple-pricing-table.type-1 .featured .price { background-color: #f4f4f4; }
			
				.simple-pricing-table .cost { 
					margin: 0;
					font-weight: 400; 
					font-size: 36px;
				}
				
				.simple-pricing-table.type-2 .cost { 
					color: #373737;
					text-shadow: 1px 1px rgba(255,255,255,.5);
				}
				
				.simple-pricing-table.type-2 .cost { 
					color: #fff;
					text-shadow: -1px -1px rgba(0,0,0,.2);
				}
				
				.simple-pricing-table .description {
					font-size: 15px;
					font-family: 'Open Sans', Arial, sans-serif;
					font-style: italic;
				}
				
				.simple-pricing-table.type-1 .description {
					color: #505050;
					text-shadow: 1px 1px rgba(255,255,255,.5);
				}
				
				.simple-pricing-table.type-2 .description {
					color: #f6f6f6;
					text-shadow: 1px 1px rgba(0,0,0,.2);
				}
				
		.simple-pricing-table .features {
			border-top: 1px solid #d7d7d7;
			border-bottom: 1px solid #d7d7d7;
		}	
				
			.simple-pricing-table .features li {
				position: relative;
				padding: 10px 20px;
				border-top-width: 1px;
				border-top-style: solid;
				border-top-color: #e6e6e6;
				background-color: #f6f6f6;
				text-align: center;
			}
			
			.simple-pricing-table .features li:first-child { border-top: none; }
			
			.simple-pricing-table .featured .features li { background-color: #fefefe; }
			
		.simple-pricing-table .footer { 
			padding: 25px 20px 25px;
			background-color: #e6e6e6;
		}
		
		.simple-pricing-table .featured .footer { 
			padding: 25px 20px 25px;
			background-color: #f4f4f4; 
		}
		
		.simple-pricing-table .column:hover .footer { padding: 25px 20px 25px; }
		
			.simple-pricing-table .footer .button { margin: 0; }

		.simple-pricing-table .title,
		.simple-pricing-table .footer {
			-webkit-transition: all .25s linear;
			   -moz-transition: all .25s linear;
				-ms-transition: all .25s linear;
				 -o-transition: all .25s linear;
					transition: all .25s linear;
		}
	
/* ---------------------------------------------------------------------- */
/*	Blog
/* ---------------------------------------------------------------------- */

.entry {
	margin-bottom: 40px;
    border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #ebebeb;
}

.item {
	float: left;
	margin-bottom: 75px;
	margin-left: 10px;
	margin-right: 10px;
	width: 213px;
}


		.entry-title .title { 
			margin-bottom: 14px; 
			line-height: 1;
		}
		
			.entry-title h2 a { color: #373737; }
			
		.item .title { 
			margin-bottom: 7px;
			font-size: 13px; 
			font-family: 'Open Sans', Arial, sans-serif;
		}

			.item .title a { color: #383838; }
			
	.entry-meta {
	   display: inline-block;
	   margin-bottom: 15px;
	   padding: 2px 0 4px;
	   width: 100%;
	   border-top-width: 1px;
	   border-top-style: solid;
	   border-top-color: #ebebeb;
	   border-bottom-width: 1px;
	   border-bottom-style: solid;
	   border-bottom-color: #ebebeb;
	}
	
	
	.item .entry-meta {
		margin: 0;
		padding: 0;
		border-top-width: 0;
		border-bottom-width: 0;
	}

		.entry-meta span {
			display: block;
			float: left;
			margin-right: 20px;
		}
		
		.item .entry-meta span { margin-right: 15px; }

		.entry-meta span:before {
			margin-right: 5px;
			font-size: 14px;
			font-family: 'FontAwesome';
		}

		.entry-meta .date:before	 { content: "\f073"; }
		.entry-meta .author:before   { content: "\f007"; }
		.entry-meta .tag:before		 { content: "\f02b"; }
		.entry-meta .comments:before { content: "\f086"; }

			.entry-meta a {
				color: #b2b2b2;
				font-size: 11px;
			}
			
	.entry-body { margin-bottom: 24px; }
	
	.rel-posts .item {
		margin-bottom: 0;
	}
	
	/* -------------------------------------------------- */
	/*	Image Post Slider
	/* -------------------------------------------------- */

	.image-post-slider,
	.image-gallery-slider {
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.column .image-post-slider,
	.columns .image-post-slider,
	.column .image-gallery-slider,
	.columns .image-gallery-slider {
		margin-left: 0;
		margin-right: 0;
	}

		.image-post-slider > ul > li,
		.image-gallery-slider > ul > li { width: 0; display: block !important;}

		.image-post-slider > ul > li:first-child,
		.image-gallery-slider > ul > li:first-child { 
			width: 100%;
		}

			.image-post-slider a,
			.image-gallery-slider a { margin: 0; }

		.post-slider-nav,
		.gallery-slider-nav {
			position: absolute;
			right: 15px;
			bottom: 50%;
			margin-bottom: -15px;
			z-index: 100;
			width: 65px;
		}

			.post-slider-nav a,
			.gallery-slider-nav a {
				position: relative;
				display: block;
				width: 30px;
				height: 30px;
				font: 0/0 a;
				cursor: pointer;
				background-color: #000;
				background-color: rgba(0,0,0,.8);
				border-radius: 0 10% 10% 0;

				-webkit-transition: all .2s linear;
				   -moz-transition: all .2s linear;
					-ms-transition: all .2s linear;
					 -o-transition: all .2s linear;
						transition: all .2s linear;
			}

			.post-slider-nav a:after,
			.gallery-slider-nav a:after {
				position: absolute;
				left: 0;
				top: 0;
				width: 30px;
				height: 30px;
				background-image: url(../images/icons/medium-arrows.png);
				background-repeat: no-repeat;
				content: "";
			}


			.post-slider-nav .prevBtn,
			.gallery-slider-nav .prevBtn { 
				left: 0;
				float: left;
				border-radius: 10% 0 0 10%;
			}

			.post-slider-nav .nextBtn,
			.gallery-slider-nav .nextBtn {
				right: 0;
				float: right;
			}

			.post-slider-nav .nextBtn:after,
			.gallery-slider-nav .nextBtn:after { background-position: right; }
		
	/* -------------------------------------------------- */
	/*	Pagenavi
	/* -------------------------------------------------- */
	
		.pagenavi .page-numbers {
			display: block;
			float: left;
			margin-right: 2px;
			width: 31px;
			height: 31px;
			background-color: #e9e9e9;
			color: #373737;
			text-align: center;
			line-height: 31px;
		}
		

		.pagenavi .current { color: #fff; }

		.pagenavi a:hover {
			background-color: #373737;
			color: #fff !important;
		}

			.pagenavi .prev,
			.pagenavi .next { 
				font-size: 15px;
				vertical-align: middle;
			}

			.pagenavi .prev:after { content: "←"; }
			.pagenavi .next:after { content: "→"; }
	
	/* -------------------------------------------------- */
	/*	About Author
	/* -------------------------------------------------- */

	.author-about {
		margin-bottom: 40px;
		padding: 20px;
		background-color: #f5f5f5;
		overflow: hidden;
	}


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

		.author-entry { display: table; }

			.author-entry h5 {
				font-weight: 400;
				font-size: 18px;
			}
	
	/* -------------------------------------------------- */
	/*	Comments
	/* -------------------------------------------------- */

	#comments h6 {
	}


	.comments-list {
		margin-top: 10px;
		margin-bottom: 40px;
		overflow: hidden;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		border-bottom-color: #ebebeb;
	}


		.comment {
			list-style: none;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #ebebeb;
			padding-top: 40px;
		}
		

		.comments-list .comment:first-child { border-top-width: 0; }

			.comment > article { margin-bottom: 20px; }

				.comment .gravatar {
					float: left;
					margin-right: 10px;
				}

				.comment-body { display: table; }

					.comment .comment-meta { zoom: 1; }

							.comment .comment-author a {
								color: #383838;
								font-weight: 700;
							}

						.comment .comment-date { float: left; }

							.comment .comment-date a {
								margin-right: 10px;
								color: #b2b2b2;
								font-size: 11px;
							}

						.comment-reply-link {
							padding: 0 6px;
							font-size: 11px;
						}

						.comment-reply-link:hover { background-color: #038ca9; }

			/* Children */

			.comment .children {
				margin: 0;
				padding-left: 70px;
			}

				.children .comment {
					padding-top: 40px;
					border-top-width: 1px;
					border-top-style: solid;
					border-top-color: #ebebeb;
				}
				
				.normal .children .comment {
					border-top: 1px solid #ebebeb;
				}
				

	/* Respond */

	#respond { width: 100%; }
	
		#respond h6 { margin-bottom: 20px; }

		
/* ---------------------------------------------------------------------- */
/*	Portfolio
/* ---------------------------------------------------------------------- */

	/* -------------------------------------------------- */
	/*	Portfolio Filter
	/* -------------------------------------------------- */

	.portfolio-filter {
		margin: 0 10px 35px;
		text-align: left;
		text-transform: uppercase;
	}

		.portfolio-filter li {
			display: block;
			float: left;
			margin-right: 20px;
		}

			.portfolio-filter li a {
				color: #383838;
				font-weight: 600;
				font-size: 11px;
				font-family: 'Open Sans', Arial, sans-serif;
				cursor: pointer;
			}
			
			.ie7 .portfolio-filter li a,
			.ie8 .portfolio-filter li a { font-weight: 400; }

	/* -------------------------------------------------- */
	/*	Portfolio Items
	/* -------------------------------------------------- */
	
	.portfolio-items { font-size: 0; }

		.container .portfolio-items article {
			position: relative;
			display: inline-block;
			float: none;
			vertical-align: top;
			margin-bottom: 40px;
		}

		.portfolio-items article .single-image,
		.jcarousel-container .single-image { margin: 0; }
		
			.single-image img { display: block; }
			
			.preloader {
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.preloader.loader { background-image: url(../images/preloader.gif); }
			
				.preloader img:not(.BWFilter) {
					opacity: 0;
					-webkit-transition: all .25s linear;
					   -moz-transition: all .25s linear;
							transition: all .25s linear;
				}

				.preloader .fadein { opacity: 1 !important; }

		.project-meta {
			position: relative;
			display: block;
			padding-top: 20px;
			padding-bottom: 20px;
			text-align: center;
			font-size: 11px;
			background-color: #f5f5f5;
			border-bottom-width: 2px;
			border-bottom-style: solid;
			border-bottom-color: #ebebeb;
			border-radius: 0 0 20% 20%;
		}


		.portfolio-items article:hover .project-meta { background-color: #fff; }

			.project-meta .title { 
				margin-bottom: 5px;
				color: #373737;
				font-size: 12px;
				font-family: 'Open Sans', Arial, sans-serif;
			} 
			
			.project-meta .categories { display: block; }
			
			.project-meta span {
					color: #828282;
			}
			
	/* -------------------------------------------------- */
	/*	Portfolio Controls
	/* -------------------------------------------------- */	
			
	.portfolio-controls { 
		padding: 20px 0 5px;
		font-size: 0; 
	}

		.portfolio-controls a {
			display: inline-block;
			overflow: hidden;
			margin-left: 2px;
			width: 21px;
			height: 21px;
			background-color: #373737;
			background-image: url(../images/icons/controls.png);
			background-repeat: no-repeat;
			font: 0/0 a;
			cursor: pointer;
			border-radius: 0 10% 10% 0;
			
			-webkit-transition: all .2s linear;
			   -moz-transition: all .2s linear;
				-ms-transition: all .2s linear;
				 -o-transition: all .2s linear;
					transition: all .2s linear;
		}
		
		.portfolio-controls .controls-all  { background-position: center; }
		.portfolio-controls .controls-next { background-position: right; }
		.portfolio-controls .controls-prev { border-radius: 10% 0 0 10%; }
		
		/* Isotope */

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

		.isotope, .isotope .isotope-item {
			-webkit-transition-duration: .6s;
			   -moz-transition-duration: .6s;
				-ms-transition-duration: .6s;
				 -o-transition-duration: .6s;
					transition-duration: .6s;
			z-index: 2;
		}

		.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:		 top, left, opacity;
				 -o-transition-property:		 top, left, opacity;
					transition-property:		 transform, opacity;
		}

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

.sbr #sidebar { float: right; }
.sbl #sidebar { float: left;  }

	/* -------------------------------------------------- */
	/*	Widgets
	/* -------------------------------------------------- */

		#sidebar .widget { margin-bottom: 40px; }
		
			#sidebar .widget-title {
				margin-bottom: 20px;
				font-size: 15px;
				margin-bottom: 20px;
			}
			
				.widget .post-date { 
					display: block;
					font-size: 11px;
					font-style: italic;
					color: #b2b2b2;
				}

			
			.ie8 #sidebar .widget-title { font-weight: 400; }

		/* ---------------------------------------- */
		/*	Default Widgets
		/* ---------------------------------------- */
		
		/* read-more links */
		.more-link {}
		
		/* blogroll links */
		.linkcat {}
		.blogroll {}
		
		/* text widget */
		.textwidget {}
		.widget_text {}
		.textwidget p {}
		
		.widget .sub-menu { padding-top: 5px; }
		
		.widget_categories ul li,
		.widget_archive ul li, 
		.widget_links ul li,
		.widget_meta ul li,
		.widget_pages ul li,
		.widget_recent_entries ul li {
			position: relative;
			padding: 6px 0 6px 15px;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #e8e8e8;
			list-style: none;
		}
		
		#footer .widget_categories ul li,
		#footer .widget_archive ul li, 
		#footer .widget_links ul li,
		#footer .widget_meta ul li,
		#footer .widget_pages ul li,
		#footer .widget_recent_entries ul li {
			border-top-color: #464545;
		}
	

		.widget_categories ul li:first-child, 
		.widget_archive ul li:first-child,
		.widget_links ul li:first-child, 
		.widget_meta ul li:first-child,
		.widget_pages ul li:first-child,
		.widget_recent_entries ul li:first-child { border-top-width: 0; }
		
			.widget_categories li a,
			.widget_archive li a, 
			.widget_links li a, 
			.widget_meta li a,
			.widget_pages li a,
			.widget_recent_entries li a {
				position: relative;
				display: inline-block;
				color: #969696;
			}
		
			.widget_categories li a:before,
			.widget_archive li a:before, 
			.widget_links li a:before, 
			.widget_meta li a:before,
			.widget_pages li a:before,
			.widget_recent_entries li a:before {
				position: absolute;
				left: -15px;
				top: 0;
				width: 4px;
				height: 100%;
				display: block;
				background-image: url(../images/icons/arrow-black.png);
				background-position: 0 center;
				background-repeat: no-repeat;
				content: "";
				
				-webkit-transition: left .2s linear;
				   -moz-transition: left .2s linear;
					-ms-transition: left .2s linear;
					 -o-transition: left .2s linear;
						transition: left .2s linear;  	
			}
		
			#footer .widget_categories li a:before,
			#footer .widget_archive li a:before, 
			#footer .widget_nav_menu li a:before,
			#footer .widget_links li a:before, 
			#footer .widget_meta li a:before,
			#footer .widget_pages li a:before,
			#footer .widget_recent_entries li a:before {
				background-image: url(../images/icons/arrow-light.png);
			}
		
			.widget_categories li a:hover:before,
			.widget_archive li a:hover:before, 
			.widget_links li a:hover:before, 
			.widget_meta li a:hover:before,
			.widget_pages li a:hover:before,
			.widget_recent_entries li a:hover:before { left: -10px; }
			
			/* Widget Nav Menu for Footer */
			
			#footer .widget_nav_menu ul li {
				position: relative;
				padding: 6px 0 6px 15px;
				border-top-width: 1px;
				border-top-style: solid;
				border-top-color: #e8e8e8;
				list-style: none;
			}	
			
			#footer .widget_nav_menu ul li:first-child { border-top-width: 0; }

			
				#footer .widget_nav_menu li a {
					position: relative;
					display: inline-block;
					color: #969696;
				}

				#footer .widget_nav_menu li a:hover:before{ left: -10px; }

				#footer .widget_nav_menu li a:before {
					position: absolute;
					left: -15px;
					top: 0;
					width: 4px;
					height: 100%;
					display: block;
					background-image: url(../images/icons/arrow-black.png);
					background-position: 0 center;
					background-repeat: no-repeat;
					content: "";

					-webkit-transition: left .2s linear;
					   -moz-transition: left .2s linear;
						-ms-transition: left .2s linear;
						 -o-transition: left .2s linear;
							transition: left .2s linear;  	
				}
				
				/* Widget Nav Menu */
				
				.widget_nav_menu .menu {
					margin-bottom: 40px;
					border-bottom: 1px solid #ebebeb;
				}
				
					.widget_nav_menu li { position: relative; }
					
					.widget_nav_menu li:after {
						position: absolute;
						top: 13px;
						right: 11px;
						display: block;
						width: 14px;
						height: 14px;
						background-image: url(../images/icons/ajax-nav-row.png);
						background-repeat: no-repeat;
						content: "";
						-webkit-transition: right .25s linear;
								transition: right .25s linear;
					} 
					
					.widget_nav_menu li:hover:after,
					.widget_nav_menu .current-menu-item:after,
					.widget_nav_menu .current_page_item:after { 
						right: 4px; 
						background-position: bottom;
					}
					
					.widget_nav_menu li:hover:before,
					.widget_nav_menu .current-menu-item:before,
					.widget_nav_menu .current_page_item:before {
						position: absolute;
						top: 1px;
						right: -14px;
						display: block;
						width: 0;
						height: 0;
						border-top: 21px solid transparent !important;
						border-bottom: 21px solid transparent !important;
						border-left-width: 15px;
						border-left-style: solid;
						content: "";
					}

						.widget_nav_menu li a {
							display: block;
							padding: 11px 30px 11px 10px;
							border-top: 1px solid #ebebeb;
							border-right: 1px solid #ebebeb;
							color: #383838;
							-webkit-transition: none;
									transition: none;
						}
						
						.widget_nav_menu li:hover > a,
						.widget_nav_menu .current-menu-item > a,
						.widget_nav_menu .current_page_item > a { color: #fff !important; }
						
		/* ---------------------------------------- */
		/*	Popular Posts
		/* ---------------------------------------- */

		.widget_popular_posts li { margin-bottom: 20px; }
		
		.widget_popular_posts li:after {
			clear: both;
			display: block;
			visibility: hidden;
			height: 0;
			content: ".";
		}

			.widget_popular_posts .preloader {
				float: left;
				margin-right: 10px;
			}
			
			.widget_popular_posts .post-holder { display: table; }

				.widget_popular_posts h6 {
					 margin-bottom: 5px;
					 font-family: 'Open Sans', Arial, sans-serif;
					 font-weight: 400;
					 line-height: 1.3;
				}
				
				.widget_popular_posts p { 
					margin-bottom: 5px;
					font-size: 11px;
				}

				.widget_popular_posts span {
					display: block;
					color: #b2b2b2;
					font-style: italic;
					font-size: 11px;
				}
			
		/* ---------------------------------------- */
		/*	Tags Cloud
		/* ---------------------------------------- */		
			
		.widget_tag_cloud .tagcloud a {
			display: inline-block;
			margin-right: 0px;
			margin-bottom: 3px;
			padding: 5px;
			color: #fff !important;
			font-size: 12px !important;
		}
		
		#sidebar .widget_tag_cloud .tagcloud a { background-color: #c0c0c0; }
		
		#footer .widget_tag_cloud .tagcloud a {
			background-color: #676767;
			color: #d4d4d4 !important;
		}

		
		#sidebar .widget_tag_cloud .tagcloud a:hover { background-color: #444 !important; }
		
		#footer .widget_tag_cloud .tagcloud a:hover { 
			background-color: #c2c2c2 !important;
			color: #383838 !important;
		}

/* ---------------------------------------------------------------------- */
/*	Footer
/* ---------------------------------------------------------------------- */

#footer {
    background-color: #373737;  
	padding: 35px 0 40px;
	color: #969696;
	border-radius: 15% 15% 0 0;
}


	#footer a { color: #969696; }

	/* -------------------------------------------------- */
	/*	Widgets
	/* -------------------------------------------------- */

	#footer .widget {
	margin-bottom: 5px;
}
	
		#footer .widget-title {
			color: #ebebeb; 
			font-size: 15px;
			margin-bottom: 20px;
		}

		
		.ie7 #footer .widget-title,
		.ie8 #footer .widget-title { font-weight: 400; }

		/* ---------------------------------------- */
		/*	Flickr
		/* ---------------------------------------- */

		.flickr-badge li {
			position: relative;
			float: left;
			margin-bottom: 10px;
			margin-right: 10px;
		}
		
		.flickr-badge li:nth-of-type(3n) { margin-right: 0; }
		
			.flickr-badge li a {
				position: relative;
				display: block;
				height: 65px;
				width: 65px;
			}
			
			.flickr-badge li a:after {
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: "";

				-webkit-transition: all .2s linear;
				   -moz-transition: all .2s linear;
					-ms-transition: all .2s linear;
					 -o-transition: all .2s linear;
						transition: all .2s linear;
						
				-webkit-box-shadow: inset 0 0 0 0 transparent;	
				   -moz-box-shadow: inset 0 0 0 0 transparent;	
						box-shadow: inset 0 0 0 0 transparent;	
			}
			
			
		/* ---------------------------------------- */
		/*	Address Info
		/* ---------------------------------------- */
		
			.address-info {
				margin-top: 17px;
			}
			.contact-info {
				font-style: italic;
			}

	/* -------------------------------------------------- */
	/*	Copyright
	/* -------------------------------------------------- */	

	.adjective {
		padding-top: 25px;
		border-top-width: 3px;
		border-top-style: dashed;
		border-top-color: #4a4a4a;
		font-size: 11px;
	}
	
	
		.copyright { float: left; }
		.footer-bottom-right { float: right; }
		
			.copyright a,
			.developed a { color: #969696; }

/* ---------------------------------------------------------------------- */
/*	Widgets + Shortcodes
/* ---------------------------------------------------------------------- */		

	/* -------------------------------------------------- */
	/*	Accordion and Toggle
	/* -------------------------------------------------- */
		
	.acc-box { margin-bottom: 90px; }

		.acc-trigger {
			position: relative;
			display: block;
			padding: 15px 15px 15px 35px;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #ebebeb;
		}
		
		
		.acc-box .acc-trigger:first-child { border-top-width: 0; }

		.acc-trigger:before {
			position: absolute;
			top: 50%;
			left: 0;
			display: block;
			margin-top: -13px;
			width: 25px;
			height: 25px;
			background-color: #373737;
			background-image: url(../images/icons/collapse.png);
			cursor: pointer;
			content: "";
			border-radius: 10%;
		}


		.acc-trigger.active:before { background-position: bottom; }  

			.acc-trigger a {
				color: #828282;
				text-transform: uppercase;
				font-size: 11px;
				font-weight: 600;
				font-family: 'Open Sans', Arial, sans-serif;
			}


			.ie7 .acc-trigger a,
			.ie8 .acc-trigger a { font-weight: 400; }

			.acc-trigger:hover a,
			.acc-trigger.active a { color: #373737; }

				.acc-trigger.active + .acc-container p { margin: 0 0 10px 0; }

		.acc-container { display: none; }
	
	/* -------------------------------------------------- */
	/*	Testimonials
	/* -------------------------------------------------- */
	
	.quote-box {
		position: relative;
		margin-bottom: 90px;
	}

		.testimonials > li { margin-right: 15px; }

			.quote-text {
				position: relative;
				margin-bottom: 5px;
				padding: 20px 15px;
				padding-bottom: 20px;
				border-width: 1px;
				border-style: solid;
				background: #f5f5f5;
				border-color: #ebebeb;
				font-style: italic;
				color: #828282;
				border-radius: 10% 0 10% 10%;
			}
			
			
			.quote-text:before {
				position: absolute;
				z-index: 99;
				bottom: -31px;
				left: 45px;
				display: block;
				width: 31px;
				height: 31px;
				background-image: url(../images/quote-arrow.png);
				content: "";
			}

			
				.quote-author { 
					display: block;
					margin-left: 85px;
					padding-bottom: 10px;
				}
				
					.quote-author span { color: #828282; }
					
	/* Quote Navigation */

	.quotes-nav {
		position: absolute;
		right: 0;
		top: -40px;
		z-index: 100;
		width: 44px;
	}

		.quotes-nav a {
			position: relative;
			display: block;
			width: 21px;
			height: 21px;
			opacity: 1;
			cursor: pointer;
			background-color: #000;
			background-color: rgba(0,0,0,.8);
			font: 0/0 a;
		}
		
		.quotes-nav a:after {
			position: absolute;
			width: 21px;
			height: 21px;
			background-image: url(../images/icons/small-arrows.png);
			background-repeat: no-repeat;
			content: "";
		}


		.quotes-nav .prevBtn { float: left; }
		.quotes-nav .nextBtn { float: right; }
		
		.quotes-nav .nextBtn:after { background-position: right; }

	/* -------------------------------------------------- */
	/*	Tabs
	/* -------------------------------------------------- */

	.content-tabs {
		margin-bottom: 90px;
	}

		.tabs-nav {
			clear: both;
			margin: 0;
			width: 100%;
		}

			.tabs-nav li {
				position: relative;
				float: left;
				margin-right: -1px;
				border-top-width: 2px;
				border-top-style: solid;
				border-top-color: #ebebeb;
				border-left-width: 1px;
				border-left-style: solid;
				border-left-color: #ebebeb !important;
				border-right-width: 1px;
				border-right-style: solid;
				border-right-color: #ebebeb !important;
				background-color: #fafafa;
				height: 34px;
			}

			
			.tabs-nav li:first-child { border-left-width: 1px; }
			
				.tabs-nav li a {
					display: inline-block;
					padding: 10px 16px;
					outline: none;
					color: #828282;
					vertical-align: baseline;
					text-align: center;
					text-transform: uppercase;
					font-size: 11px;
					cursor: pointer;
				}
				
				.tabs-nav li a:hover {
					color: #373737;
				}

				.tabs-nav .active a {
					background-color: #fff;
					color: #373737;
				}

		.tabs-container {
			margin: 0 0 20px;
			overflow: hidden;
			background-color: #fff;
			border-width: 1px;
			border-style: solid;
			border-color: #ebebeb;
			width: 100%;
			border-radius: 0 10% 10% 10%;
		}


			.tab-content { 
				display: none;
				padding: 20px 20px 10px;
			}
			
			.tab-content:first-child { display: block;}

	/* -------------------------------------------------- */
	/*	Info Box
	/* -------------------------------------------------- */

	.info-box {
		margin-bottom: 90px;
		padding: 25px 20px 10px;
		border-width: 1px;
		border-style: solid;
		border-color: #ebebeb;
		border-radius: 20%;
	}


	/* -------------------------------------------------- */
	/*	Notifications
	/* -------------------------------------------------- */

	.error, .success, .info, .notice {
		border-style: solid;
		border-width: 1px;
		display: block;
		font-size: 14px;
		padding: 8px 15px 8px 20px;
		position: relative;
	}


	.error {
		background-color: #f9bcc3;
		border-color: #f09da7;
		color: #b76973;
	}

	.success {
		background-color: #d8efc1;
		border-color: #b4d892;
		color: #79985b;
	}

	.info {
		background-color: #b8e1f1;
		border-color: #a1c7d5;
		color: #52889b;
	}

	.notice {
		background-color: #feebb7;
		border-color: #e7d195;
		color:#b49133;
	}
	
		.alert-close {
			position: absolute;
			top: 50%;
			right: 10px;
			margin-top: -7px;
			line-height: 1;
		}

		.alert-close:before {
			font-size: 13px;
			font-family: 'FontAwesome'; 
			content: "\f00d";
		}
		
		.error .alert-close   { color: #b76973; }
		.success .alert-close { color: #79985b; }
		.info .alert-close    { color: #52889b; }
		.notice .alert-close  { color: #b49133; }

	/* -------------------------------------------------- */
	/*	List
	/* -------------------------------------------------- */

	ul.list { margin-bottom: 20px; }
	
		.list li { margin-bottom: 6px; }
		
		ul.list [class^="icon-"]:before, 
		ul.list [class*=" icon-"]:before {
			color: #373737;
			font-size: 15px;
		}

			i.small-arrows {
				position: relative;
				display: inline-block;
				margin-right: 10px;
				width: 21px;
				height: 21px;
				vertical-align: middle;
			}
			
			i.small-arrows:before {
				position: absolute;
				left: 0;
				top: 3px;
				margin-top: -3px;
				width: 21px;
				height: 21px;
				background-image: url(../images/icons/small-arrows.png);
				background-position: right;
				background-repeat: no-repeat;
				content: "";
			}
			
	
	/* -------------------------------------------------- */
	/*	Map
	/* -------------------------------------------------- */
	
	.google_map { 
		display: block;
		margin-bottom: 30px;
	}
	
	#content .google_map { 
		width: 100%;
		height: 400px;
	}
	
	/* -------------------------------------------------- */
	/*	Tooltip
	/* -------------------------------------------------- */

	.tooltip { position: relative; }
	
	.tooltip:after,
	.tooltip:before {
		-webkit-transition: all .25s linear;
		   -moz-transition: all .25s linear;
			-ms-transition: all .25s linear;
			 -o-transition: all .25s linear;
				transition: all .25s linear;
	}

	.tooltip:after {
		position: absolute;
		bottom: 20px;
		left: 0;
		z-index: 98;
		padding: 5px;
		width: 100px;
		border-radius: 3px;
		background-color: #373737;
		background-image: url(../images/tooltip.png);
		color: #fff;
		content: attr(data-tooltip);
		opacity: 0;
	}

	.tooltip:before {
		position: absolute;
		bottom: 16px;
		left: 50%;
		z-index: 99;
		border-width: 6px 6px 0;
		border-style: solid;
		border-color: #373737 transparent;
		content: "";
		opacity: 0;
	}
	
	.tooltip:hover:after,
	.tooltip:hover:before { opacity: 1; }
	
	.ie8 .tooltip:after,
	.ie8 .tooltip:before { display: none; }
	
	.ie8 .tooltip:hover:after,
	.ie8 .tooltip:hover:before { display: block; }
	
/* ---------------------------------------------------------------------- */
/*	Other
/* ---------------------------------------------------------------------- */

	/* -------------------------------------------------- */
	/*	Ajax Navigation
	/* -------------------------------------------------- */

	.ajax-nav {
		margin-bottom: 40px;
		border-bottom: 1px solid #ebebeb;
	}

		.ajax-nav li { position: relative; }

			.ajax-nav li a {
				display: block;
				padding: 11px 30px 11px 10px;
				border-top: 1px solid #ebebeb;
				border-right: 1px solid #ebebeb;
				color: #919191;
				font-family: 'Sanchez', serif;
				font-size: 14px;
				font-weight: 400;
				-webkit-transition: none;
						transition: none;
			}

			.ajax-nav li:hover > a {
				background-image: url(../images/bg-side-nav.png);
				color: #919191;
			}
			
			
			.ajax-nav .current a { color: #fff !important; }
			
			.ajax-nav .current a:hover {
				background: none;
			}
	
	.ajax-navigation-item { display: none; }
	.ajax-navigation-item:first-child { display: block; }
	
	/* -------------------------------------------------- */
	/*	Services
	/* -------------------------------------------------- */
	
	.title-service { 
		margin-bottom: 25px; 
		line-height: 2;
	}

		.title-service i { float: left;}

		.title-service:hover i { 
			-webkit-transform: translateY(-5px);
			   -moz-transform: translateY(-5px);
				-ms-transform: translateY(-5px);
				 -o-transform: translateY(-5px);
					transform: translateY(-5px);
		}

		.title-service i:before {
			position: absolute;
			display: block;
			margin-top: 38px;
			width: 47px;
			height: 7px;
			background-image: url(../images/shadow.png);
			opacity: 0;
			filter: alpha(opacity = 0);
			content: "";

			-webkit-transition: all .2s linear;
			   -moz-transition: all .2s linear;
				-ms-transition: all .2s linear;
				 -o-transition: all .2s linear;
					transition: all .2s linear;  
		}
		
		.ie7 .title-service i:before,
		.ie8 .title-service i:before { display: none; }

		.title-service:hover i:before { 
			margin-top: 43px;
			opacity: 1;
			filter: alpha(opacity = 100);
		}

		.title-service a {
			display: table;
			padding-top: 5px;
			text-transform: uppercase;
			font-size: 15px;
			color: #373737;
		}
		
	/* -------------------------------------------------- */
	/*	Back Top
	/* -------------------------------------------------- */

	#back-top {
		position: fixed;
		right: 20px;
		bottom: 20px;
		z-index: 999;
		display: none;
		width: 40px;
		height: 40px;
		background-color: #918F89;
		text-align: center;
		font: 0/0 a;

		-webkit-transition: background-color .2s linear;
		   -moz-transition: background-color .2s linear;
			-ms-transition: background-color .2s linear;
			 -o-transition: background-color .2s linear;
				transition: background-color .2s linear; 
	}
	
	#back-top:after {
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 40px;
		background-image: url(../images/back-to-top.png);
		background-position: center center;
		background-repeat: no-repeat;
		content: "";
	}
 
Laatst bewerkt door een moderator:
Het is wellicht handig de css in code tags te zetten :)

Zo te zien aan je css kan je de header fixed maken door er simpelweg class = "fixed" van te maken, je krijgt dan:

Code: 
<header id="header" class="fixed" style="display: block;">
 
Mmmmmm.......kom er niet uit.

Kan in de style.css nergen vinden waar ik onderstaande kan wijzigen. Waar zie jij dit dan staan?

<header id="header" class="fixed" style="display: block;">
 
Dit zou in de html code staan. Op de voorbeeldsite heet dit bestand "index.html"
 
Gevonden en gewijzigd, echter als ik nu de index-pagina open zie ik de foto van de wielrenners niet meer. Ik zie wel het menu, maar de afbeelding van de wielrenners zie ik dus niet meer. Scroll ik dan naar beneden een paar keer en dan weer naar boven verschijnt de afbeelding van de wielrenners wel weer maar is dus niet fixed. Hij blijft nog steeds op en neer bewegen.
 
U zal ook de rest van de pagina moeten aanpassen zofat deze overeenkomt met de nieuwe header stijl.

en inderdaad zal er nog wat javascript / jquery weggehaald moeten worden om ervoor tr zorgen dat de header niet terug gaat naar zijn zwevende positie gaat.

als u de projectbestanden even wilt zippen dan kan ik een stuk grmakkelijker een kijkjr nemen.
 
Dag Rick, wat je hebt aangepast op je voorbeeldsite is precies wat we zoeken. Perfekt !
 
Voor degene die met hetzelfde probleem zitten:

Ik heb de functie:

[JS] $.fn.headerToFixed = function (options) {

var defaults = {
speed : 300,
windowWidth : $(win).width(),
scrollTop : $(win).scrollTop()
}, o = $.extend({}, defaults, options), $this = $(this), $clone = $('#logo').clone(), heightHeader = $this.height();

if (o.windowWidth > 767) {
if (o.scrollTop > heightHeader) {
if (!$this.hasClass('fixed')) {
$this.find('.sixteen').prepend($clone);
$this.slideUp(o.speed).addClass('fixed').stop(true, true).slideDown(o.speed);
}
} else {
if ($this.hasClass('fixed')) {
$this.stop(true, true).slideUp(o.speed).stop(true, true).removeClass('fixed').slideDown(o.speed);
$this.find('.sixteen #logo').fadeOut(o.speed).remove();
}
}
}
};

[/JS]

Uit custom.js gehaald

Verder tegen de slider en content divs gezecht dat ze 300px moeten vrijlaten boven zich (zodat ze onder de footer komen te staan.)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan