// main: style.scss
/* Page Related
------------------------------*/
.page-title-wrap {
	border-bottom: 1px solid $border;
	border-top: 1px solid $border;
	padding: 40px 0px;
	background: $meta;
	h1 {
		font-weight: bold;
		text-transform: uppercase;
	}
	* {
		margin-bottom: 0px;
	}
	a.btn {
		margin-right: 0px;
	}
}
.page-title-wrap-none {
	display: block;
	border-bottom: 1px solid $border;
}
@include for(screens-medium) {
	.page-title-has-button {
		text-align: center;
		.left, .right {
			float: none;
			text-align: center;
		}
	}
	.page-title-has-button .page-entry-title.left {
		float: none;
		display: block;
		margin-bottom: 30px;

	}
}
.medium-heading-inverted {
	text-transform: uppercase;
	font-weight: normal;
	color: #FFFFFF;
	margin-bottom: 10px;
}
.large-heading-inverted {
	margin-left: -2px;
	color: #FFFFFF;
	text-transform: uppercase;
}

/* Pages Header
------------------------------*/
.page-header-wrap {
	position: relative;
	padding: 60px 0px;
	color: #CCCCCC;
	border-bottom: 1px solid $border;
	h1 {
		font-weight: bold;
		color: #FFFFFF;
		margin: -5px 0px 2px -2px;
		letter-spacing: -0.7px;
		font-size: 30px;
		line-height: 1.3;
		text-transform: uppercase;
		letter-spacing: 0;
		@include for(medium-screens) {
			font-size: 45px;
		}
	}
	.page-subtitle {
		font-size: 17px;
		display: inline-block;
		font-weight: 300;
	}
	.container {
		z-index: 10;
	}
	.wpc_parallax_bg {
		background-size: cover;
	}
}

/* 404 - Not Found
------------------------------*/
.error404 .site-header, .error404 .site-footer, .error404 .footer-connect, .error404 .site-topbar {
	display: none;
}

.error404, .error404 .site-content {
	background: #f1f1f1;
	width: 100%;
	height: 100%;
}

.error-page-wrapper {
	width: 100%;
	display: block;
	margin: 0 auto;
	height: 100%;
	position: fixed;
	left: 0;
}

.error-box-wrap {
	height: auto;
	width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	@include for(small-screens) {
		width: 60%;
	}
	@include for(medium-screens) {
		width: 50%;
	}
	@include for(large-screens) {
		width: 40%;
	}
}

.heading-404 {
	font-size: 80px;
	font-family: $monaco;
	font-weight: 900;
	color: $primary;
	letter-spacing: 2px;
	i {
		margin-right: 20px;
	}
	@include for(medium-screens) {
		letter-spacing: 20px;
		font-size: 120px;
	}
}

.error-box {
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
	overflow: hidden;
	padding: 30px 35px 10px;
	h3 {
		letter-spacing: 2px;
		@include for(medium-screens) {
			letter-spacing: 10px;
		}
	}
	p {
		margin-bottom: 30px;
	}
}

.error-action {
	.error-previous {
		float: none;
		margin-bottom: 30px;
		@include for(large-screens) {
			float: left;
		}
	}
	.error-home {
		float: none;
		margin-bottom: 30px;
		@include for(large-screens) {
			float: right;
		}
	}
}

/* Grid Page
------------------------------*/
.grid-item {
	margin-bottom: 40px;
	.grid-thumbnail {
		margin-bottom: 20px;
		img {
			&:hover {
				opacity: 0.9;
			}
		}
	}
	.grid-title {
		margin-bottom: 10px;
		a {
			&:hover {
				color: $primary;
				text-decoration: none;
			}
		}
	}
	.grid-more {
		text-transform: uppercase;
		text-decoration: none;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.3px;
		&:hover {
			text-decoration: underline;
		}
	}
}

/* Single Portfolio
------------------------------*/
.portfolio-prev,
.portfolio-next
{
	i {
		font-family: 'FontAwesome';
		font-weight: normal;
		border: 2px solid $border;
	    color: #cccccc;
	    font-size: 22px;
	    height: 1.8em;
	    line-height: 1.6em;
	    padding: 0;
	    text-align: center;
	    width: 1.8em;
	    margin-top: 4px;
	    @include border-radius(2px);
	    &:hover {
	    	color: #555555;
	    	border-color: #aaaaaa;
	    }
	}
}
.portfolio-next {
	margin-left: 6px;
}