/**
 * Lamark
 *
 * Creative Portfolio Template
 *
 * v1.2
 * By Amcode
 */



/**
 * [TABLE OF CONTENTS]
 *
 * - PRELOADER
 * - HEADER
 *    - Logo
 *    - Menu
 *    - Trigger
 * - HEROS
 * - SECTIONS
 * - PORTFOLIO
 *    - Filters
 *    - Grid
 * - ABOUT
 * - CONTACT
 * - BLOG
 * - PAGINATIONS
 * - SHARE
 * - FOOTER
 * - MISC
 *    - Images
 *    - Vertical center
 */



/** == PRELOADER == */
/** ================================================== */

	.preloader {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: #FFFFFF;
	}

	.loader {
		width: 32px;
		height: 32px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -16px 0 0 -16px;
		border: 4px solid #E1E1E1;
		border-top: 4px solid #1E2023;
		border-radius: 50%;

		-webkit-animation: preloader-anim 0.5s infinite linear;
		animation: preloader-anim 0.5s infinite linear;
	}

	@-webkit-keyframes preloader-anim {
		from { -webkit-transform: rotate(0deg); }
		to { -webkit-transform: rotate(360deg); }
	}

	@keyframes preloader-anim {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}



/** == HEADER == */
/** ================================================== */

	.site-header {
		display: table;
		width: 100%;
		height: 80px;
		position: relative;
		z-index: 3;
		background: #FFFFFF;
	}

	.header-inner {
		display: table-cell;
		vertical-align: middle;
	}

	/** Logo */
	.site-logo {
		text-transform: uppercase;
		font-size: 1.4em;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0.3em;
	}

	/** Menu */
	.site-menu li {
		display: inline-block;
		position: relative;
		margin-left: 50px;
		line-height: 30px;
	}

	.site-menu li:first-child { margin-left: 0; }

	.site-menu li a {
		text-transform: uppercase;
		font-size: 0.8em;
		letter-spacing: 0.3em;

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

	.site-menu li a:hover { opacity: 0.5; }

	.site-menu li ul {
		display: none;
		width: 180px;
		position: absolute;
		top: 100%;
		left: 0;
		margin: 0;
		padding: 10px 0;
		background: #000000;
	}

	.site-menu li:hover ul { display: block; }

	.site-menu li ul li {
		display: block;
		line-height: normal;
		margin: 0;
	}

	.site-menu li ul li a {
		display: block;
		color: #FFFFFF;
		font-weight: 400;
		padding: 10px 25px;
	}

	.site-menu li ul li a.active { opacity: 0.5; }

	/** Trigger */
	.trigger-nav {
		width: 30px;
		height: 30px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
	}

	.trigger-nav .inner {
		width: 18px;
		height: 18px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -9px 0 0 -9px;
	}

	.trigger-nav .inner .icon-bar {
		width: 20px;
		height: 2px;
		position: absolute;
		left: 0;
		background: #1E2023;

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

	.trigger-nav .inner .icon-bar.top { top: 0; }
	.trigger-nav .inner .icon-bar.middle { top: 8px; }
	.trigger-nav .inner .icon-bar.bottom { bottom: 0; }

	.trigger-nav.open-nav .inner .icon-bar.middle { opacity: 0; }

	.trigger-nav.open-nav .inner .icon-bar.top {
		top: 8px;

		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.trigger-nav.open-nav .inner .icon-bar.bottom {
		bottom: 8px;

		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}



/** == HEROS == */
/** ================================================== */

	.hero { position: relative; }

	.hero-image,
	.hero-content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.hero-header {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 75px;
		background: rgba(255, 255, 255, 0.9);
		outline: 4px double #FFFFFF;
		outline-offset: 8px;

		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}

	.hero-header-title {
		text-transform: uppercase;
		font-size: 1.8em;
		font-weight: 700;
		letter-spacing: 0.3em;
	}

	.hero-header-subtitle {
		text-transform: uppercase;
		font-size: 0.8em;
		margin-top: 5px;
		letter-spacing: 0.3em;
	}



/** == SECTIONS == */
/** ================================================== */

	.sections { position: relative; }
	.sections.padding-size-s { padding: 25px 0; }
	.sections.padding-size-m { padding: 50px 0; }
	.sections.padding-size-l { padding: 75px 0; }



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

	/** Filters */
	.filters {
		text-align: center;
		margin-bottom: 50px;
	}

	.filters li {
		display: inline-block;
		position: relative;
	}

	.filters li a {
		text-transform: uppercase;
		font-size: 0.8em;
		padding: 5px 15px;
	}

	.filters li a.active {
		color: #FFFFFF;
		background: #1E2023;
	}

	/** Grid */
	.grid .entry {
		float: left;
		position: relative;
	}

	.entry-image,
	.entry-hover {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-position: center center;
	}

	.entry-hover {
		visibility: hidden;
		opacity: 0;
		background: rgba(255, 255, 255, 0.9);

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

	.entry:hover .entry-hover {
		visibility: visible;
		opacity: 1;
	}

	.entry-title {
		text-transform: uppercase;
		font-size: 1.2em;
		font-weight: 700;
		position: relative;
		top: -15px;
		opacity: 0;

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

	.entry-subtitle {
		font-size: 0.8em;
		position: relative;
		bottom: -15px;
		opacity: 0;

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

	.entry:hover .entry-title,
	.entry:hover .entry-subtitle { opacity: 1; }
	.entry:hover .entry-title { top: 0; }
	.entry:hover .entry-subtitle { bottom: 0; }

	.entry-fix-caption {
		padding: 15px 25px;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		background: #FFFFFF;
	}



/** == ABOUT == */
/** ================================================== */



/** == CONTACT == */
/** ================================================== */

	#messages {
		display: none;
		margin-top: 25px;
	}

	#messages .error {
		padding: 15px 25px;
		color: #999999;
		background: #F1F1F1;
	}

	#messages .success {
		text-align: center;
		padding: 25px;
		color: #999999;
		background: #F1F1F1;
	}



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

	.blog-tag a {
		display: inline-block;
		padding: 2px 10px;
		background: #F1F1F1;

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

	.blog-tag a:hover {
		color: #FFFFFF;
		background: #1E2023;
	}

	.blog-tag i {
		color: #999999;
		margin-right: 15px;
	}

	.blog-search { margin-bottom: 25px; }

	input.blog-search-input {
		height: 60px;
		line-height: 52px;
		border: 4px solid #F1F1F1;
	}

	.blog-search-btn {
		height: 60px;
		line-height: 60px;
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		font-size: 1em;
		color: #1E2023;
		background: #F1F1F1;
	}

	.share-blog {
		display: block;
		padding: 25px 0;
		margin: 50px 0;
		border-top: 2px solid #E1E1E1;
		border-bottom: 2px solid #E1E1E1;
	}

	.comment { margin-top: 50px; }

	.comment-meta {
		display: table;
		margin-left: 25px;
		height: 60px;
	}

	.comment-meta-inner {
		display: table-cell;
		vertical-align: middle;
	}

	.comment-date {
		font-size: 0.8em;
		color: #999999;
	}

	.comment-content {
		padding: 15px;
		margin-top: 15px;
		border-radius: 5px;
		border: 1px solid #E1E1E1;
		position: relative;
	}

	.comment-content:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #E1E1E1;
		position: absolute;
		top: -8px;
		left: 22px;
	}

	.comment-form { margin-top: 50px; }



/** == PAGINATIONS == */
/** ================================================== */

	.paginations { position: relative; }

	.paginations:before {
		content: '';
		width: 20px;
		height: 2px;
		background: #1E2023;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -10px;
	}

	.project-pagination {
		width: 210px;
		height: 40px;
		margin: 0 auto 25px;
	}

	.blog-pagination {
		width: 140px;
		height: 40px;
		margin: 0 auto 25px;
	}

	.project-pagination li,
	.blog-pagination li {
		display: block;
		float: left;
		width: 60px;
		height: 40px;
		line-height: 40px;
		position: relative;
		margin: 0 5px;
		background: #F1F1F1;
		cursor: pointer;

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

	.project-pagination li:hover,
	.blog-pagination li:hover {
		color: #FFFFFF;
		background: #1E2023;
	}

	.project-pagination li a,
	.blog-pagination li a {
		display: block;
		text-align: center;
	}



/** == SHARE == */
/** ================================================== */

	.share li {
		display: inline-block;
		position: relative;
	}

	.share.share-project li { margin: 0 15px; }
	.share.share-blog li { margin: 0 5px; }

	.share li.share-title {
		text-transform: uppercase;
		font-size: 0.8em;
		color: #999999;
	}

	.share.share-project li.share-title { display: block; }
	.share.share-blog li.share-title { margin-left: 0; }

	.share li a {
		text-transform: uppercase;
		font-size: 0.8em;

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

	.share.share-project li a:hover { opacity: 0.5; }

	.share.share-blog li a {
		display: block;
		padding: 5px 10px;
		background: #F1F1F1;
	}

	.share.share-blog li a:hover {
		color: #FFFFFF;
		background: #1E2023;
	}



/** == FOOTER == */
/** ================================================== */

	.site-footer { background: #F1F1F1; }
	.footer-inner { padding: 50px 0; }

	.copy {
		font-size: 0.8em;
		color: #999999;
	}

	.copy a,
	.copy span { color: #1E2023; }

	.back2top {
		width: 40px;
		height: 40px;
		position: absolute;
		top: -20px;
		right: 50px;
		background: #1E2023;
		cursor: pointer;
		text-align: center;
		color: #FFFFFF;
		line-height: 40px;
	}



/** == MISC == */
/** ================================================== */

	/** Images */
	.iBG {
		background-size: cover;
		background-repeat: no-repeat;
	}

	.img-responsive {
		display: block;
		min-width: 100%;
		max-width: 100%;
	}

	.img-rounded { border-radius: 50%; }

	.parallax { background-attachment: fixed; }

	/** Vertical center */
	.vcenter { position: relative; }