/** 01. Imports */

	@import url('http://fonts.googleapis.com/css?family=Playfair+Display:400,700');
	@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
	@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore');
	@import './font-awesome/css/font-awesome.css';


/** 02. Grid system */

	.container {
		width: 85%;
		margin: 0 auto;
		position: relative
	}

	.column {
		float: left;
		padding: 0 15px;
		position: relative
	}

	.column:first-child { padding-left: 0 }
	.column:last-child { padding-right: 0 }
	.column.col-1 { width: 8.333% }
	.column.col-2 { width: 16.666% }
	.column.col-3 { width: 25% }
	.column.col-4 { width: 33.333% }
	.column.col-5 { width: 41.666% }
	.column.col-6 { width: 50% }
	.column.col-7 { width: 58.333% }
	.column.col-8 { width: 66.666% }
	.column.col-9 { width: 75% }
	.column.col-10 { width: 83.333% }
	.column.col-11 { width: 91.666% }
	.column.col-12 { width: 100% }

	.column.offset-by-1 { margin-left: 8.333% }
	.column.offset-by-2 { margin-left: 16.666% }
	.column.offset-by-3 { margin-left: 25% }
	.column.offset-by-4 { margin-left: 33.333% }
	.column.offset-by-5 { margin-left: 41.666% }
	.column.offset-by-6 { margin-left: 50% }
	.column.offset-by-7 { margin-left: 58.333% }
	.column.offset-by-8 { margin-left: 66.666% }
	.column.offset-by-9 { margin-left: 75% }
	.column.offset-by-10 { margin-left: 83.333% }
	.column.offset-by-11 { margin-left: 91.666% }

	.row { margin-bottom: 30px }
	.row:last-child { margin-bottom: 0 }

	.float-right { float: right }
	.float-left { float: left }

	.container::after,
	.row::after,
	.clearfix::after {
		content: '';
		display: block;
		clear: both
	}

	.mb-50 {
		margin-bottom: 50px
	}

	.mt-50 {
		margin-top: 50px
	}

	@media screen and (max-width:768px) {

	.column.col-sm-pull { float:left }
	.column.col-sm-push { float:right !important }

	}



/** 03. Basic settings */

	html { overflow-y: scroll }

	body {
		font-family: 'Playfair Display';
		color: #666;
		line-height: 1.8;
		background: #ededed;
		-webkit-font-smoothing: antialiased
	}

	*,
	::before,
	::after {
		margin: 0;
		padding: 0;
		outline: 0;
		border: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box
	}

	::selection {
		color: #9c9c9c;
		background: #9c9c9c
	}

	::-moz-selection {
		color: #9c9c9c;
		background: #9c9c9c
	}



/** 04. Typography */

	a {
		text-decoration: none;
		color: inherit;
		cursor: pointer
	}

	a.link { color: #9c9c9c }
	a.link:hover { color: #141516 }

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 400;
		font-style: normal;
		color: #141516;
		margin-bottom: 15px
	}

	h1:last-child,
	h2:last-child,
	h3:last-child,
	h4:last-child,
	h5:last-child,
	h6:last-child { margin-bottom: 0 }

	h1 { font-size: 50px }
	h2 { font-size: 42px }
	h3 { font-size: 36px }
	h4 { font-size: 30px }
	h5 { font-size: 24px }
	h6 { font-size: 18px }

	p { margin-bottom: 30px }
	p:last-child { margin-bottom: 0 }


/** 06. Misc */

	img { max-width: 100% }

	.small-title {
		text-transform: uppercase;
		font-family: 'Source Sans Pro';
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 15px
	}


/** 08. Header */

	#site-header { height: 150px }

	#header-logo { width:100%; margin-top: 65px; font-family: 'La Belle Aurore', cursive; font-size: 2em; text-align:center;}


/** 10. Main & sections */

	#site-main {
		max-width: 1200px;
		margin: 50px auto;
		background: #fff
	}

	#main-overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		background: rgba(20, 21, 22, .7);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out
	}

	#main-overlay.nav-open {
		opacity: 1;
		visibility: visible
	}

	.grey-section {
		padding: 100px 0;
		background: #f7f7f7
	}



/** 11. Headline */

	.headline {
		text-align: center;
		padding: 50px 0 100px
	}

	.headline-content {
		max-width: 500px;
		margin: 0 auto
	}

	.headline .title {
		font-size: 30px;
		color: #9c9c9c;
		margin-bottom: 15px
	}

	.headline .title.project-title { margin-bottom: 30px }
	.headline .title:last-child { margin-bottom: 0 }



/** 12. Hero */

	.hero { position: relative }

	.hero-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1
	}



/** 13. Grid */

	.entry-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1
	}



/** 14. Works */

	.works { background: #f7f7f7 }

	.work-entry .info {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: rgba(20, 21, 22, .75);
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out
	}

	.work-entry:hover .info { opacity: 1 }

	body.editMode .work-entry:hover .info { opacity: 0 !important}

	.work-entry .content {
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		z-index: 1;
		text-align: center;
		padding: 0 50px;
		-webkit-transform: translatey(-50%);
		transform: translatey(-50%)
	}

	.work-entry .title {
		letter-spacing: 2px;
		color: #fff;
		text-transform: uppercase;
		position: absolute;
		top:50%;
		z-index: 2;
		left:20%;
		font-size: 1.2em;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.73);
		max-width: 250px
	}

	.work-entry .content .cat {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: rgba(255, 255, 255, .7);
		top: 15px
	}

	.work-entry .content .title,
	.work-entry .content .cat {
		position: relative;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out
	}

	.work-entry:hover .content .title,
	.work-entry:hover .content .cat {
		top: 0;
		opacity: 1
	}

	body.editMode .work-entry:hover .content .title, body.editMode .work-entry:hover .content .cat { opacity: 0 !important}



/** 15. Project */

	.project-categories span {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: #b3b3b3;
		margin-right: 15px
	}

	.project-categories span:last-child { margin-right: 0 }

	#project img {
		display: block;
		margin: 0 auto
	}



/** 16. Blog */

	.blog { background: #f7f7f7 }

	.blog-entry-info {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: rgba(20, 21, 22, .7)
	}

	.blog-entry-info .content {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1;
		padding: 50px
	}

	.blog-entry-info .content .date {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: rgba(255, 255, 255, .7)
	}

	.blog-entry-info .content .title {
		font-family: 'Source Sans Pro';
		font-size: 20px;
		font-weight: 600;
		color: #fff
	}

	.post-arrow {
		position: absolute;
		bottom: 50px;
		left: 50px;
		width: 20px;
		height: 2px;
		background: #fff;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out
	}

	.post-arrow::before {
		content: '';
		width: 10px;
		height: 10px;
		position: absolute;
		top: -4px;
		right: 0;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	.blog-entry-info:hover .post-arrow { width: 50px }

	.single-post { padding: 100px 0 }

	.post-header { margin-bottom: 50px }

	.post-header .title {
		font-size: 30px;
		color: #141516
	}

	.post-metas {
		padding-bottom: 15px;
		border-bottom: 3px solid #e6e6e6
	}

	.post-metas span {
		margin-right: 15px;
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: #b3b3b3
	}

	.post-footer { margin-top: 100px }

	.share-link {
		display: inline-block;
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		text-align: center;
		color: #fff;
		margin-right: 5px;
		background: #e6e6e6
	}

	.share-link.share-facebook { background: #4d70a8 }
	.share-link.share-twitter { background: #00bbf2 }
	.share-link.share-gplus { background: #e3401d }
	.share-link.share-pinterest { background: #cb3737 }

	.comments-title { margin-bottom: 50px }

	.comments-list {
		list-style: none;
		margin-bottom: 50px
	}

	.comments-list .comment { margin-bottom: 50px }

	.comments-list .comment:last-child { margin-bottom: 0 }

	.comments-list .comment .children {
		list-style: none;
		margin: 60px 0 0 50px
	}

	.comment-user {
		float: left;
		width: 100px;
		position: relative
	}

	.comment-user img { border-radius: 50% }

	.comment-content { margin-left: 120px }

	.comment-content .date {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: #b3b3b3
	}

	.comment-content .comment-text { margin-top: 15px }



/** 17. Contact */

	#contact-form { margin-top: 30px }

	#contact-messages {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: #b3b3b3
	}



/** 18. Footer */

	#site-footer {
		text-align: center;
		padding: 100px 0
	}

	.copy { font-size: 14px }

	.social { margin-top: 30px }
	.social .social-link { margin-right: 30px }
	.social .social-link:last-child { margin-right: 0 }
	.social .social-link:hover { color: #9c9c9c }



/** 19. Media */

	@media screen and (max-width:1024px) {
		.container { width: 90% };
	}

	@media screen and (max-width:768px) {
		#header-logo {font-size: 1.3em;}
		.headline {margin-top: 70px}

		.container { width: 70% }
		.column { width: 100% !important }
		.column { margin: 0 0 30px !important; padding: 0 }
		.column:last-child { margin-bottom: 0 }

		#site-main { margin: 0 }
		#site-header { height: 100px }
		#header-logo { margin-top: 28px }

		#burger {
		margin-top: 43px;
    	position: absolute;
		text-align: right;
		width:100%;
		border-bottom: 1px solid #9c9c9c;
		}

		#burger-icon {
			float:right
		}

		#header-logo {
		margin-top: 130px;
		}

		#header-logo { width:100%; text-align: center; }
	    #header-logo img { text-align: center; }

		#site-nav {
			width: 80%;
			right: -80%
		}

		.headline-content { max-width: 100% }

		form .row,
		form .row .column { margin-bottom: 15px !important }

		form .row:last-child,
		form .row .column:last-child { margin-bottom: 0 !important }

	}

	@media screen and (max-width:480px) {
		.container { width: 90% }

		#menu { padding: 30px }

		#nav-close { top: 30px; right: 30px }

		.blog-entry-info .content { padding: 30px }
		.post-arrow { bottom: 30px; left: 30px }

		.comment-user { width: 50px }
		.comment-content { margin-left: 70px }

	}

.stockist {
	text-align: center;
	padding:10px 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.header-alert {
	text-align: center;
	padding:10px 20px;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

.detail-wrap {
	margin-top: 40px;
	padding: 25px;
	border-top: 1px solid #9c9c9c;
	border-bottom: 1px solid #9c9c9c;
	max-width: 350px;
}

.works-desc {
	margin-top: 15px;
	font-size: .8em
}


.imageBG {
	background-position: center center;
}

.about-img .imageBG {
	background-position: center top !important;
}



.etabs { margin: 0; padding: 0; text-align: center }
.tab { display: inline-block; zoom:1; *display:inline; margin-bottom: 100px }
.tab a { font-size: 1.2em; line-height: 1.5em; display: block; padding: 0 20px; outline: none; text-decoration: none}
.tab a:hover {  text-decoration: none}
.tab.active {  position: relative; border-bottom: solid 1px #999; text-decoration: none}
.tab a.active { font-weight: bold; }
.tab-container .panel-container {}



hr {
	border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}