1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / projects_sitereview / public / scss / components /
Filename : _site-blocks.scss
back
.retro-layout {
	.v-height {
		height: 240px;
	}
	.img {
		@include media-breakpoint-down(md) {
			height: 240px;
		}
	}
	.h-entry {
		display: block;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		.post-category {
			color: $white;
		}
		.featured-img {
			position: absolute;
			height: 100%;
			width: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			transform: scale(1.05);
			transition: .3s all ease;
		}
		&:hover {
			.featured-img {
				transform: scale(1.0);		
			}
		}
		&.mb-30 {
			margin-bottom: 30px;
		}
		.date {
			font-size: 15px;
		}
		

		&.gradient {
			position: relative;
			&:before {
				z-index: 1;
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
				background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
				background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
			}
		}
	}
	.text {
		position: absolute;
		bottom: 0;
		z-index: 10;
		padding: 20px;
		max-width: 350px;
		h2 {
			color: $white;
			font-size: 18px;
			line-height: 1.2;
			margin-bottom: 0;
		}
		span {
			color: rgba($white, .7);
			font-size: 12px;
			display: block;
			margin-bottom: 5px;
		}
		&.text-sm {
			h2 {
				font-size: 18px;
				line-height: 1.5;	
			}
		}
	}
	.gradient {
		position: relative;
		&:before {
			z-index: 1;
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
		}
	}

	.img-5 {
		@include media-breakpoint-down(md) {
			height: 240px!important;
			margin-bottom: 30px;
			margin-top: 30px;
		}
	}
}

.retro-layout-alt {


	.img-1 {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		@include media-breakpoint-down(md) {
			height: 240px!important;
			position: relative;
			margin-bottom: 30px;
		}
	}
	.img-2 {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		@include media-breakpoint-down(md) {
			height: 240px!important;
		}
	}
	

	.mb30 {
		margin-bottom: 30px;
	}
	.hentry {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: 10px;

		.featured-img {
			position: absolute;
			height: 100%;
			width: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			transform: scale(1.05);
			transition: .3s all ease;
		}
		&:hover {
			.featured-img {
				transform: scale(1.0);		
			}
		}

	}
	.gradient {
		position: relative;
		&:before {
			z-index: 1;
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
		}
	}
	.post-category {
		margin-left: 20px;
		margin-top: 10px;
	}
	.v-height {
		height: 300px;
	}
	.text {
		position: absolute;
		bottom: 0;
		z-index: 10;
		padding: 20px;
		max-width: 350px;
		h2 {
			color: $white;
			font-size: 26px;
		}
		span {
			color: rgba($white, .7);
		}
		&.text-sm {
			h2 {
				font-size: 18px;
				line-height: 1.5;	
			}
		}
	}
	.two-col {
		> a {
			width: calc(50% - 15px);
			float: left;
			@include media-breakpoint-down(sm) {
				width: 100%!important;
				float: none!important;
				margin-bottom: 30px;
			}
		}
	}
}

.posts-entry-title {
	text-transform: uppercase;
	font-size: 20px;
	color: $black;
	letter-spacing: .05rem;
}

.posts-entry {
	
	.blog-entry {
		.img-link {
			position: relative;
			overflow: hidden;
			display: inline-block;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		h2 {
			line-height: 1.3;
			font-size: 26px;
			a {
				color: $secondary;
			}
		}
	}
	.btn-sm {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.blog-entry-sm {
		li {
			margin-bottom: 20px;
		}
		h3 {
			font-size: 20px;
			a {
				color: $secondary;
			}
		}
	}
	&.posts-entry-sm {
		.blog-entry {
			h2 {
				font-size: 18px;
			}
		}
	}

	.blog-entry-search-item {
		margin-bottom: 30px;
		.img-link {
			
			width: 280px;
			border-radius: 0;
			img {
				margin-bottom: 0;
				border-radius: 10px;
			}
		}
	}
}

.read-more {
	border-bottom: 2px solid $primary;
}

.post-entry-alt {
	
	h2 {
		font-size: 18px;
		margin-bottom: 20px;
		a {
			color: $secondary;
		}
	}
	
	.excerpt {
		padding-left: 20px;
		padding-right: 20px;

	}
	

	.img-link {
		position: relative;
		display: inline-block;
		overflow: hidden;
		border-radius: 10px;
		margin-bottom: 10px;
		img {
			margin-bottom: 0;
		}
	}
}

.post-meta {
	color: lighten($black, 50%);
	font-size: 13px;
	width: 100%;
	display: block;
	margin-bottom: 20px;
	a {
		color: $black;
	}
	.author-figure {
		img {
			width: 30px;
			border-radius: 50%;
		}
	}
}

.blog-entries {
	.blog-entry {
		display: block;
		transition: .3s all ease;
		margin-bottom: 30px;

		position: relative;
		&:hover, &:focus {
			opacity: .7;
			top: -1px;
			box-shadow: 0 3px 50px -2px rgba(0,0,0,.2)!important;
		}
		.blog-content-body {
			padding: 20px;
			border: 1px solid #efefef;
			border-top: none;
		}
		img {
			max-width: 100%;
		}

		h2 {
			font-size: 18px;
			line-height: 1.5;

		}
		p {
			font-size: 13px;
			color: lighten($black, 50%);
		}
	}
	.post-meta {
		font-size: 14px;
		color: lighten($black, 70%);
		.author {
			img {
				width: 30px;
				border-radius: 50%;
				display: inline-block;
			}
		}
	}
}

.custom-pagination {
	span, a {
		text-align: center; 
		display: inline-block;
		height: 40px;
		width: 40px;
		line-height: 40px;
		border-radius: 50%;
	}
	a {
		background: $primary;
		color: $white;
		&:hover {
			background: $primary;
		}
	}
}


// sidebar
.sidebar {
	padding-left: 5em;
	@include media-breakpoint-down(md) {
		padding-left: 15px;
	}
}
.sidebar-box {
	margin-bottom: 4em;
	font-size: 15px;
	width: 100%;
	
	float: left;
	
	background: $white;
	*:last-child {
		margin-bottom: 0;
	}
	.heading {
		font-size: 18px;
		color: $black;
		font-weight: 400;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid lighten($black, 90%);
	}
}
.comment-wrap, .search-result-wrap {
	.heading {
		font-size: 18px;
		color: $black;
		font-weight: 400;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid lighten($black, 90%);
	}
}

.tags {
	padding: 0;
	margin: 0;
	font-weight: 400;
	li {
		padding: 0;
		margin: 0 4px 4px 0;
		float: left;
		display: inline-block;
		a {
			float: left;
			display: block;
			border-radius: 4px;
			padding: 2px 6px;
			color: lighten($black, 50%);
			background: lighten($black, 95%);
			&:hover {
				color: $white;
				background: $primary;
			}
		}
	}
}
.pagination {
	margin-bottom: 5em;
	text-align: center!important;
	display: block;
	li {
		margin-right: 2px;
		margin-bottom: 3px;
		display: inline-block;
		a {

			// border: none;
			border-radius: 50%!important;
			width: 40px;
			height: 40px;
			line-height: 40px;
			padding: 0;
			margin: 0;
			display: inline-block;
			// float: left;
			text-align: center;
			&:focus, &:active {
				box-shadow: none!important;
			}
			&:hover {
				background: $primary;
				color: $white;
				border: 1px solid transparent;
			}
		}
		&.active {
			a {
				border: 1px solid transparent!important;
			}
		}
	}
}
.categories, .sidelink {
	padding: 0;
	margin: 0;
	font-weight: 400;
	li {
		padding: 0;
		margin: 0;
		position: relative;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dotted gray('300');
		list-style: none;
		&:last-child {
			margin-bottom: 0;
			border-bottom: none;
			padding-bottom: 0;
		}
		a {

			display: block;
			font-size: 16px;
			span {
				position: absolute;
				right: 0;
				top: 0;
				color: #ccc;
				transition: .3s all ease;
			}
			&:hover {
				span {
					color: $black;
				}
			}
		}
		&.active {
			a {
				color: $black;
				font-style: italic;
			}
		}
	}
}

.comment-form-wrap {
	clear: both;
}

.comment-list {
	padding: 0;
	margin: 0;
	.children {
		padding: 50px 0 0 40px;
		margin: 0;
		float: left;
		width: 100%;
	}
	li {
		padding: 0;
		margin: 0 0 30px 0;
		float: left;
		width: 100%;
		clear: both;
		list-style: none;
		.vcard {
			width: 80px;
			float: left;
			img {
				width: 50px;
				border-radius: 50%;
			}
		}
		.comment-body {
			float: right;
			width: calc(100% - 80px);
			h3 {
				font-size: 20px;
				color: $black;
			}
			.meta {
				text-transform: none;
				color: #ccc;
			}
			.reply {
				padding: 3px 10px;
				background: lighten($black, 95%);
				color: $black;
				font-size: 13px;
				&:hover {
					color: $black;
					background: lighten($black, 89%);
				}
			}
		}
	}
}


.post-entry-sidebar, .post-entry-footer {
	.post-meta {
		font-size: 14px;
		color: lighten($black, 70%);
	}
	ul {
		padding: 0;
		margin: 0;
		li {
			list-style: none;
			padding: 0 0 20px 0;
			margin: 0 0 20px 0;
			a {
				display: table;
				color: $secondary;
				img {
					width: 90px;

				}
				img, .text {
					display: table-cell;
					vertical-align: middle;
				}
				.text {
					h4 {
						font-size: 18px;
					}
				}
			}

		}
	}
}

.post-entry-footer {
	ul {
		li {
			margin-bottom: 0;
			a {
				color: $white;
			}
		}
	}
}

.search-form-wrap {
	margin-bottom: 5em;
	display: block;
	.sidebar-search-form {
		.form-group {
			position: relative;
			#s {
				background: lighten($black, 97%);
				padding: 15px 15px;
				padding-left: 50px;
			}
		}
		[class^="bi-"] {
			position: absolute;
			color: $black;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
		}
	}

}


.bio {
	img {
		max-width: 150px;
		border-radius: 50%;
	}

	.bio-body {
		h2 {
			color: $black;
			font-size: 20px;
		}
	}
}

.site-cover {
	background-size: cover;
	background-position: top center;
	position: relative;
	> .container {
		position: relative;
		z-index: 2;
	}
	&.overlay {
		&:before {
			background: rgba(0,0,0,.6);
			position: absolute;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}
	}
	.post-meta {
		color: $white;
	}
	&, .same-height {
		padding: 3em 0;
	}
	&.single-page {
		h1 {
			color: $white;
			font-size: clamp(2rem, 3vw, 5rem);
		}
	}
}

.contact-info {
	i {
		font-size: 20px;
		float: left;
		width: 44px;
		height: 44px;
		background: $primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50px;
		transition: all 0.3s;
		color: $white;
	}	
	h4 {
		font-size: 16px;
		padding: 0 0 0 60px;
		color: $primary;
	}
	p {
		padding: 0 0 0 60px;
		margin-bottom: 0;
		font-size: 14px;
	}
}


.sec-features {
	background-color: $primary;
	.feature {
		[class^="bi-"] {
			flex: 0 0 60px;
			font-size: 50px;
			position: relative;
			margin-right: 10px;

			&:before {

				color: $white;

				z-index: 2;
				position: relative;
			}
			&:after {
				content: "";
				position: absolute;
				z-index: 1;
				left: -10px;

				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: rgba($secondary, .1);
			}
		}
		h3 {
			font-size: 18px;
			font-weight: 400;
			color: $white;
		}
		p {
			color: rgba($white, .7);
			&:last-child {
				margin-bottom: 0;
			}
		}
		
	}
}


.service-alt {
	[class^="bi-"] {
		color: $primary;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 22px;
		margin-bottom: 0;
		background: $white;
		display: inline-block;
		text-align: center;
		border-radius: 4px;
		box-shadow: 0 5px 30px -5px rgba($black, .1);
	}
	h3 {
		font-size: 20px;
		color: $black;
	}
}


.sec-halfs {
	.half-content {
		> div {
			width: 50%;
			@include media-breakpoint-down(lg) {
				width: 100%;
			}
		}
		.img {
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			@include media-breakpoint-down(lg) {
				height: 450px;
			}
		}
		.text {
			padding: 90px;
			@include media-breakpoint-down(lg) {
				padding: 30px;
			}
		}
		.heading {
			font-weight: 600;
		}
	}
}

.testimonial-half {
	> div {
		width: 50%;
		@include media-breakpoint-down(lg) {
			width: 100%;
		}
	}
	.img {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		@include media-breakpoint-down(lg) {
			height: 250px;
		}
	}
	.text {
		padding: 90px;
		@include media-breakpoint-down(lg) {
			padding: 30px;
		}
		blockquote {
			p {
				color: $black;
				font-size: 18px;
				font-family: 'Georgia', serif;
				font-style: italic;
			}
		}
		.author {
			margin-top: 50px;
			strong {
				color: $black;
			}
		}
	}
}