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

layerz

	- Project: Margo
	- Version: 1.0
	- Last change: 08/04/2017

==========

TABLE OF CONTENT

	- loading
	- nav
	- site main
	- header
	- headline
	- heros
	- gallery
	- works
	- blog
	- contact
	- footer
	- misc

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


/** loading
==================== **/

	#site-loading {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0.9);

		transition: all 0.7s cubic-bezier(0.7, 0.3, 0.1, 1) 0.3s;
	}

	#site-loading.hide {
		height: 0;
		visibility: hidden;
	}

	.loader {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 3px solid #ffffff;
		border-top: 3px solid transparent;
		position: absolute;
		bottom: 100px;
		left: 50%;
		margin-left: -9px;

		animation: loading 0.7s linear infinite;
		transition: all 0.3s ease-in-out;
	}

	#site-loading.hide .loader {
		bottom: -18px;
		visibility: hidden;
	}

	@keyframes loading {
		100% { transform: rotate(360deg); }
	}


/** nav
==================== **/

	#site-nav {
		width: 35%;
		height: 100%;
		position: fixed;
		top: 0;
		right: -35%;
		margin-right: -17px;
		z-index: 10;
		overflow: auto;
		background: #ffffff;
		padding: 80px;

		transition: all 0.7s cubic-bezier(0.7, 0.3, 0.1, 1);
	}

	#site-nav.nav-open { right: 0; }

	/** close */

	#nav-close {
		width: 20px;
		height: 20px;
		cursor: pointer;
		position: relative;
	}

	#nav-close::before,
	#nav-close::after {
		content: '';
		width: 100%;
		height: 2px;
		background: #000000;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -1px;

		transition: transform 0.3s ease 0.5s;
	}

	#site-nav.nav-open #nav-close::before { transform: rotate(45deg); }
	#site-nav.nav-open #nav-close::after { transform: rotate(-45deg); }

	/** menu */

	#menu {
		list-style: none;
		text-align: right;
		line-height: 1;
	}

	#menu li { margin-bottom: 50px; }
	#menu li:last-child { margin-bottom: 0; }

	#menu li a {
		position: relative;
		font-size: 24px;
		color: #c7ac75;
	}

	#menu li .submenu {
		list-style: none;
		position: relative;
		line-height: 1.6;
		margin-top: 10px;
	}

	#menu li .submenu li { margin-bottom: 0; }

	#menu li .submenu li a {
		font-family: 'Source Sans Pro';
		font-size: 14px;
		color: #666666;
	}


/** site main
==================== **/

	#site-main {
		position: relative;
		padding-top: 150px;
		background: #ffffff;
	}

	/** overlay */

	#main-overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		cursor: pointer;

		transition: all 0.5s ease-in-out;
	}

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


/** header
==================== **/

	#site-header {
		width: 100%;
		height: 150px;
		position: absolute;
		top: 0;
		left: 0;
	}

	#site-header .container {
		height: 100%;
		padding-top: 55px;
		padding-bottom: 55px;
	}

	/** logo */

	#header-logo { line-height: 40px; }
	#header-logo a img { max-height: 100px; }

	/** burger */

	#burger {
		width: 20px;
		height: 14px;
		position: relative;
		top: 50%;
		cursor: pointer;

		transform: translateY(-50%);
	}

	#burger-icon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}

	#burger-icon .icon-bar {
		width: 100%;
		height: 2px;
		position: absolute;
		right: 0;
		background: #000000;
	}

	#burger-icon .icon-bar.top { top: 0; }
	#burger-icon .icon-bar.middle { top: 50%; margin-top: -1px; }
	#burger-icon .icon-bar.bottom { bottom: 0; width: 70%; }


/** headline
==================== **/

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

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

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

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


/** heros
==================== **/

	.hero { position: relative }

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


/** gallery
==================== **/

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


/** works
==================== **/

	.works { background: #f7f7f7; }

	.work-entry { overflow: hidden; }

	.work-entry .reveal {
		width: 100%;
		height: 100%;
	}

	.work-entry .info {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.9);
		opacity: 0;

		transition: all .3s ease-in-out;
	}

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

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

		transform: translatey(-50%);
	}

	.work-entry .content .title {
		font-family: 'Source Sans Pro';
		font-weight: 600;
		color: #ffffff;
		top: -15px;
	}

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

	.work-entry .content .title,
	.work-entry .content .cat {
		position: relative;
		opacity: 0;

		transition: all 0.3s ease-in-out;
	}

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

	/** 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 }


/** blog
==================== **/

	.blog { background: #f7f7f7; }

	.blog-entry-info {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.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, 0.7);
	}

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

	.post-arrow {
		position: absolute;
		bottom: 50px;
		left: 50px;
		width: 20px;
		height: 2px;
		background: #ffffff;

		transition: all 0.3s ease-in-out;
	}

	.post-arrow::before {
		content: '';
		width: 10px;
		height: 10px;
		position: absolute;
		top: -4px;
		right: 0;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;

		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: #000000;
	}

	.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; }


/** contact
==================== **/

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

	#contact-form .column { padding: 0 15px; }
	#contact-form .column:first-child { padding-left: 0; }
	#contact-form .column:last-child { padding-right: 0; }

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


/** 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: #c7ac75; }


/** misc
==================== **/

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

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

	/** reveal */

	.reveal {
		position: relative;
		top: 100px;
		opacity: 0;

		transition: all 0.5s ease;
	}

	.reveal.reveal-in {
		top: 0;
		opacity: 1;
	}