Viewing File: /home/maglabs/2vsa/wp-content/themes/cargohub/css/content.less

.site-content {
	padding-top: 80px;
	padding-bottom: 80px;
}

.container {
	padding-left: 0;
	padding-right: 0;

	.container {
		width: 100%;
	}
}

p {
	margin-bottom: 15px;
}


.page-template-template-homepage,
.page-template-template-fullwidth,
.single-service {
	.site-content {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.single-post,
.blog,
.category,
.tag {
	&.single-right,
	&.single-left {
		.site-content {
			padding-top: 0;
			padding-bottom: 0;
		}

		.content-area,
		.blog-sidebar .cargohub-widget {
			padding-top: 80px;
			padding-bottom: 80px;
		}
	}

	&.blog-grid {
		.site-main {
			margin-left: -15px;
			margin-right: -15px;

			.clearfix();
		}
	}
}

.single-left {
	.primary-sidebar {
		float: left;
	}

	.content-area {
		float: right;
	}

	&.single-post,
	&.blog,
	&.category,
	&.tag {
		.site-main {
			padding-left: 10px;
		}
	}
}

.single-right {
	.primary-sidebar {
		float: right;
	}

	.content-area {
		float: left;
	}

	&.single-post,
	&.blog,
	&.category,
	&.tag {
		.site-main {
			padding-right: 10px;
		}
	}
}

.entry-thumbnail {
	margin-bottom: 20px;
	position: relative;
}

.entry-meta {
	padding-bottom: 5px;

	a {
		color: #848484;
		font-weight: 400;

		&:hover {
			color: @primary-color;
		}
	}

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

		&:after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 17px;
			background-color: #949494;
		}

		&:first-child {
			padding-left: 0;
		}

		&:last-child:after {
			display: none;
		}

		&.views {
			cursor: pointer;
			transition: 0.5s;
			text-transform: capitalize;

			&:hover {
				color: @primary-color;
			}
		}

		&.author a {
			text-transform: capitalize;
		}
	}

	.fa {
		padding-right: 8px;
		color: @primary-color;
	}
}

.entry-title {
	font-size: 26px;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 10px;
	padding-bottom: 5px;
}

.entry-time {
	position: absolute;
	width: 55px;
	height: 55px;
	padding: 8px 0;
	top: 10px;
	left: 10px;
	background-color: @primary-color;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	font-family: @font-family-secondary;
	text-transform: uppercase;

	span {
		display: block;
		line-height: 1.2;
	}
}

.post-author {
	margin-top: 70px;

	.box-title {
		text-transform: capitalize;
		font-size: 30px;
		font-weight: 600;
		margin: 0 0 40px;
		padding-bottom: 15px;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			height: 1px;
			width: 70px;
			background-color: @primary-color;
			left: 0;
			bottom: 0;
		}

		&:before {
			content: '';
			position: absolute;
			height: 1px;
			width: 100%;
			background-color: #f6f6f6;
			left: 0;
			bottom: 0;
		}
	}

	.post-author-box {
		background-color: #f7f7f7;
		padding: 30px;

		.post-author-avatar {
			float: left;
			padding-right: 30px;
		}

		.author-name {
			margin: 0;
			font-weight: 600;
			font-size: 20px;
			color: @heading-color;
			text-transform: capitalize;
		}

		.post-author-info {
			p {
				font-size: 16px;
				margin-top: 10px;
				margin-bottom: 0;
			}
		}
	}
}

.post-password-form {
	input[type="password"] {
		border: 1px solid #f4f4f4;
		transition: 0.5s;
		outline: none;
		padding: 5px 10px;
		height: 40px;

		&:focus {
			border-color: #ececec;
			outline: none;
		}
	}

	input[type="submit"] {
		height: 40px;
		border: none;
		outline: none;

		&:focus {
			outline: none;
		}
	}
}

.single {
	.entry-content {
		&.no-title {
			padding-top: 10px;
		}
	}
}

.single-post {
	.hentry {
		border: 1px solid #eee;

		&.no-thumb {
			.entry-header {
				padding-top: 30px;
			}
		}
	}

	.entry-thumbnail {
		overflow: hidden;
		position: relative;

		img {
			transition: 0.5s;
		}

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: @secondary-color;
			transition: 0.5s;
			opacity: 0;
			z-index: 99;
		}

		&:hover {
			img {
				transform: scale(1.06);
			}

			&:before {
				opacity: 0.7;
			}
		}
	}

	.entry-title,
	.entry-header .entry-meta,
	.entry-content,
	.entry-footer {
		margin-left: 30px;
		margin-right: 30px;
	}

	.entry-title {
		display: none;
	}

	&.no-sidebar {
		.entry-thumbnail {
			text-align: center;
		}
	}
}

.no-thumb {
	.entry-thumbnail {
		margin: 0;
		display: none;

		i {
			display: none;
		}
	}
}

.entry-content {
	padding-bottom: 0;
}

.entry-footer {
	padding: 20px 0;
	border-top: 1px solid #f6f6f6;
}

.blog-wrapper {
	border: 1px solid #ececec;
	margin-bottom: 60px;

	.entry-thumbnail {
		overflow: hidden;
		margin-bottom: 15px;

		a {
			display: inline-block;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: @secondary-color;
				transition: 0.5s;
				opacity: 0;
				z-index: 99;
			}

			img {
				transition: 0.5s;
			}
		}
	}

	&.no-thumb {
		.wrapper {
			padding-top: 30px;
		}
	}

	.entry-footer {
		border: none;
		padding-top: 3px;
		padding-bottom: 23px;

		a {
			font-weight: 500;
			font-family: @font-family-secondary;
			color: @primary-color;
		}
	}

	&:hover {
		.entry-thumbnail {
			a:before {
				opacity: 0.7;
			}

			img {
				transform: scale(1.06);
			}
		}
	}

	&.sticky {
		.entry-title {
			&:before {
				content: '\f02e';
				font-family: FontAweSome;
				padding-right: 5px;
				color: @primary-color;
			}
		}
	}
}

.blog-classic {
	.blog-wrapper {
		.entry-header,
		.entry-content,
		.entry-footer {
			margin-left: 30px;
			margin-right: 30px;
		}
	}
}

.blog-grid {
	.blog-wrapper {
		padding-bottom: 0;
		margin-bottom: 55px;
		border: 0;

		&.no-thumb {
			.wrapper {
				padding-top: 0;
			}
		}

		.wrapper {
			border: none;
		}

		.entry-title,
		.entry-content {
			padding-left: 0;
			padding-right: 0;
		}

		.entry-content {
			display: none;
		}

		.entry-title {
			font-size: 22px;
			margin-bottom: 0;
		}

		.entry-footer {
			border: none;
			padding: 0;
			transition: 0.5s;
		}

		&.col-md-6:nth-child(2n+1),
		&.col-md-4:nth-child(3n+1),
		&.col-md-3:nth-child(4n+1) {
			clear: left;
		}

		&.col-3,
		&.col-4 {
			.entry-title {
				font-size: 20px;
			}
		}
	}
}

.socials-share {
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
	display: inline-block;

	li {
		display: inline-block;
		padding: 0 5px;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: 0;
		}
	}

	a {
		color: #848484;
		font-size: 14px;
		display: inline-block;
		width: 39px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		background-color: #f4f4f4;
		border-radius: 50%;
		transition: 0.5s;
		position: relative;

		&:hover {
			background-color: @primary-color;
			color: #fff;
		}
	}
}

// Service

.tax-service_category,
.post-type-archive-service {
	.site-content {
		padding-top: 80px;
		padding-bottom: 40px;
	}
}

.service {
	.service-inner {
		margin-bottom: 40px;
		transition: 0.5s;
	}

	.service-summary {
		margin-bottom: 0;

		h2 {
			font-size: 20px;
			font-weight: 500;
			margin-top: 0;
			margin-bottom: 5px;
		}

		p {
			margin-bottom: 0;
		}
	}

	.service-thumbnail {
		margin-bottom: 27px;
		overflow: hidden;
		display: inline-block;

		a {
			position: relative;
			display: block;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: @secondary-color;
				opacity: 0;
				transition: 0.5s;
				z-index: 99;
			}
		}

		img {
			transition: 0.5s;
		}
	}

	&.col-md-4:nth-child(3n+1) {
		clear: left;
	}

	&:hover {
		.service-thumbnail {
			a:before {
				opacity: 0.7;
			}

			img {
				transform: scale(1.06);
			}
		}

		.service-inner {
			border-color: @primary-color;
		}

		.service-title a {
			color: @primary-color;
		}
	}
}

.post-type-archive-service,
.tax-service_category {
	.site-content {
		.content-area {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.single-service {

	.aligncenter {
		display: none;
	}

	blockquote {
		padding: 20px 75px;
		background-color: #f4f4f4;
		border-left: 1px solid @primary-color;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			width: 1px;
			height: 92%;
			left: 3px;
			top: 0;
			background-color: @primary-color;
		}

		&:after {
			content: '\e914';
			font-family: 'factoryhub';
			position: absolute;
			top: 22px;
			left: 22px;
			color: #e6e6e6;
			font-style: normal;
			font-size: 32px;
		}
	}

	cite {
		display: block;
		font-size: 16px;
		font-style: normal;
		padding-top: 10px;
		color: @heading-color;

		span {
			color: @primary-color;
		}
	}
}

// Project

.single-project {
	.single-project {
		padding-bottom: 70px;
	}

	.entry-thumbnail {
		margin-bottom: 35px;
		position: relative;

		.owl-dots {
			position: absolute;
			left: 0;
			bottom: 30px;
			width: 100%;
			text-align: center;

			.owl-dot {
				span {
					width: 12px;
					height: 12px;
					border: 4px solid #fff;
					background-color: transparent;
				}

				&:hover,
				&.active {
					span {
						border-color: @primary-color;;
					}
				}
			}
		}
	}

	.entry-content {
		padding-right: 30px;
		border-right: 1px solid #f4f4f4;
	}

	.single-project-title {
		font-size: 30px;
		font-weight: 500;
		padding-bottom: 20px;
		margin-bottom: 30px;
		margin-top: 0;
		position: relative;
		text-transform: capitalize;

		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 67px;
			height: 2px;
			background-color: @primary-color;
		}
	}

	.project-socials {
		padding-top: 20px;
	}
}

.metas {
	padding-left: 30px;

	h4 {
		font-size: 16px;
		font-weight: 500;
		margin: 0;
		line-height: 1;
		display: inline-block;
		padding-right: 10px;
	}

	a,p {
		color: #848484;
		font-size: 16px;
		margin-bottom: 0;
	}

	.meta {
		padding-bottom: 19px;

		&:last-child {
			padding-bottom: 0;
		}
	}

	i {
		font-size: 14px;
		color: @primary-color;
	}
}

.list-project {
	margin-left: -15px;
	margin-right: -15px;
}

.all-project {
	ul.filter {
		margin-bottom: 43px;
		list-style: none;
		text-align: center;
		display: inline-block;
		position: relative;
		padding-left: 0;

		li {
			font-size: 16px;
			color: @heading-color;
			font-weight: 500;
			font-family: @font-family-secondary;
			display: inline-block;
			cursor: pointer;
			position: relative;
			padding: 0 15px;
			transition: all 0.5s;

			a {
				color: @heading-color;
				font-weight: 500;
			}

			&.active,
			&:hover {
				color: @primary-color;

				a {
					color: @primary-color;
				}
			}

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}
	}
}

.project-wrapper {
	margin-bottom: 30px;
	text-align: center;

	.project-thumbnail {
		position: relative;
		overflow: hidden;

		.pro-link {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: @secondary-color;
			opacity: 0;
			transition: 0.5s;
			z-index: 99;
		}

		img {
			transition: 0.5s;
		}

		.project-button {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			transform: scale(0.6) translateY(-50%);
			transition: 0.5s;
			opacity: 0;
			z-index: 100;

			.button-link {
				width: 45px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				color: #fff;
				font-size: 16px;
				background-color: transparent;
				border: 1px solid #fff;
				border-radius: 50%;
				display: inline-block;
				margin: 0 3px;
				transition: 0.5s;

				&:hover {
					background-color: @primary-color;
					border-color: @primary-color;
				}
			}
		}
	}

	&:hover {
		.project-thumbnail {
			.pro-link {
				opacity: 0.7;
			}

			img {
				transform: scale( 1.06 );
			}

			.project-button {
				transform: scale(1) translateY(-50%);
				opacity: 1;
			}
		}
	}
}

// Search No Results
.search-no-results {
	.no-results {

		.page-header {
			background-color: transparent;
		}

		h2 {
			margin-bottom: 30px;
			color: @heading-color;
		}

		.search-form {
			font-size: 16px;
			position: relative;
			color: #a8a8a8;
			padding: 0 5px;
			border: 1px solid #f4f4f4;
			margin-top: 20px;

			&:before {
				content: '\f002';
				position: absolute;
				top: 50%;
				right: 16px;
				color: @heading-color;
				font-family: FontAwesome;
				font-size: 14px;
				z-index: 99;
				transform: translateY(-50%);
			}

			.screen-reader-text {
				display: none;
			}

			::-webkit-input-placeholder {
				color: #a8a8a8;
			}

			:-moz-placeholder {
				color: #a8a8a8;
			}

			::-moz-placeholder {
				color: #a8a8a8;
			}

			:-ms-input-placeholder {
				color: #a8a8a8;
			}

			.search-submit {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
				height: 50px;
				opacity: 0;
				z-index: 9999;
			}

			label {
				width: 100%;
				margin-bottom: 0;
				input {
					height: 50px;
					line-height: 50px;
					width: 100%;
					padding: 0 35px 0 15px;
					border: 0;
					background-color: transparent;
					font-weight: 400;

					&:focus {
						outline: none;
					}
				}
			}
		}
	}
}

// 404 page
.error404 {
	.site-content {
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.error-404 {
		text-align: left;
		color: @heading-color;

		.page-header {
			margin-top: 0;
			padding-bottom: 0;
			margin-bottom: 45px;
			border: 0;
			background-color: transparent;

			p {
				line-height: 1;

				&.line-1 {
					font-size: 20px;
					text-transform: uppercase;
					padding-bottom: 15px;
				}

				&.line-2 {
					font-size: 18px;
				}
			}
		}

		h1 {
			font-size: 150px;
			font-weight: 600;
			color: @heading-color;
			margin: 0;
			line-height: 1;
			padding-bottom: 5px;
		}

		.search-field {
			background-color: #fff;
			font-weight: 400;
			border: none;
		}

		.search-form {
			font-size: 16px;
			position: relative;
			color: #848484;
			padding: 0 5px;
		    width: 430px;
			border: 1px solid #ececec;
			background-color: #fff;

			&:before {
				content: '\f002';
				position: absolute;
				top: 50%;
				right: 7px;
				color: @heading-color;
				font-family: FontAwesome;
				font-size: 14px;
				z-index: 99;
				transform: translateY(-50%);
			}

			&:after {
				content: '';
				position: absolute;
				top: -1px;
			    right: -11px;
			    width: 50px;
			    height: 52px;
				background-color: #fafafa;
				z-index: 9;
				border: 1px solid #ececec;
			}

			.screen-reader-text {
				display: none;
			}

			::-webkit-input-placeholder {
				color: #9e9e9e;
			}

			:-moz-placeholder {
				color: #9e9e9e;
			}

			::-moz-placeholder {
				color: #9e9e9e;
			}

			:-ms-input-placeholder {
				color: #9e9e9e;
			}

			.search-submit {
				position: absolute;
			    top: 1px;
    			right: -10px;
				width: 50px;
				height: 50px;
				opacity: 0;
				z-index: 9999;
			}

			label {
				width: 100%;
				margin-bottom: 0;
				input {
					height: 50px;
					line-height: 50px;
					width: 100%;
					padding: 0 0 0 15px;

					&:focus {
						outline: none;
					}
				}
			}
		}

		.back-home {
			margin-top: 25px;

			a {
				color: #fff;
				font-size: 16px;
				font-weight: 600;
				font-family: @font-family-secondary;
				text-transform: uppercase;
			}
		}
	}

	&.error404-no-bg {
		.error-404 {
			div[class*="col-"] {
				width: 100%;
				text-align: center;
			}

			.search-form {
				margin: 0 auto;
			}
		}
	}
}

// Back to top
.backtotop {
	display: inline-block;
	position: fixed;
	bottom: 60px;
	right: 60px;
	width: 60px;
	height: 60px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	border: 3px solid @primary-color;
	color: @primary-color;
	font-size: 30px;
	background-color: #160f09;
	opacity: 0;
	transition: 0.5s;
	z-index: 9999;

	.fa {
		color: @primary-color;
	}

	&:hover {
		color: @primary-color;

		.fa {
			color: @primary-color;
		}
	}

	&.show-scroll {
		opacity: 1;
	}
}