scss/_site-blocks.scss

.untree_co-section {
	padding: 7rem 0;

	.heading, .subheading {
		color: $black;
		strong {
			font-weight: 700;
		}
	}
	.heading {
		font-size: 40px;
	}
	.subheading {
		font-size: 18px;
		font-family: $font-family-sans-serif;
	}
}

.section-heading {
	font-size: 30px;
	color: $black;
}

.item { 
	border: none;
	margin-bottom: 30px;
	border-radius: 4px;
	a {
		display: block;
		overflow: hidden;
		position: relative;
		border-radius: 4px;
		img {
			position: relative;
			transform: scale(1.0);
			transition: .3s all ease-in-out;
		}
	}
	.item-wrap {
		display: block;
		position: relative;
		&:after {
			z-index: 2;
			position: absolute;
			content: "";
			top: 0; left: 0; right: 0; bottom: 0;
			background: rgba($black, .4);
			visibility: hidden;
			opacity: 0;
			transition: .3s all ease-in-out;
		}
		> span {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 3;
			transform: translate(-50%, -50%) scale(0.0);
			color: $white;
			font-size: 1.7rem;
			opacity: 0;
			visibility: hidden;
			// margin-top: 10px;
			transition: .3s all ease;
		}
		&:hover {
			&:after {
				opacity: 1;
				visibility: visible;
			}
			span {
				margin-top: 0px;
				opacity: 1;
				visibility: visible;
				transform: translate(-50%, -50%) scale(1.0);
			}
		}
	}

	&:hover {
		a {
			img {
				transform: scale(1.05);
				transition: .3s all ease-in-out;
			}
		}
	}
}

.gsap-reveal-img {


	line-height: 0;
	.reveal-wrap {
		position: relative;
		overflow: hidden;
		.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #eeeeee;
			margin-left: -100%;
			z-index: 9;
		}
		.reveal-content {
			opacity: 0;
			visibility: hidden;
			img {

			}

			.portfolio-item-content {
				h3 {
					margin-bottom: 10px;
					font-size: 16px;
					font-weight: bold;
				}
			}
		}
	}

}


.gsap-reveal {
	position: relative;
	display: inline-block;
	overflow: hidden;
	&.gsap-reveal-filter {
		@include media-breakpoint-down(md) {
			overflow: visible!important;
		}
	}
	.cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba($black, 1);
	}
}

.gsap-reveal-hero {
	line-height: 0;
	.reveal-wrap {
		position: relative;
		overflow: hidden;
		display: inline-block;

		.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			// background: rgba($primary, 1);
			background: #eeeeee;
			margin-left: -100%;
			z-index: 2;
		}
		.reveal-content {
			line-height: 1.5;
			z-index: 1;
			display: inline-block;
			transform: translateX(-100%);
		}
	}
}


/* circle progress bar*/
.progressbar {
	display: inline-block;
	margin: 25px;
	.caption {
		font-size: 14px;
	}
	.number {
		font-size: 16px;
	}
}
.circle {
	width: 100%;
	margin: 0 auto;
	margin-top: 10px;
	display: inline-block;
	position: relative;
	text-align: center;

}
.circle canvas {
	vertical-align: middle;
	margin-bottom: 20px;
}
.circle div {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
}
.circle strong i {
	font-style: normal;
	font-size: 0.6em;
	font-weight: normal;
}
.circle span {
	display: block;
	// color: #aaa;
	margin-top: 12px;
}

.wave {
	margin-bottom: 10px;
	svg {
		width: 90px;
		height: 20px;

	}

	path {
		stroke: $primary;
		stroke-width: 2px;
		stroke-linecap: round;
		fill: none;
	}
}
.testimonial-wrap {
	.owl-stage-outer {
		padding-top: 7rem;
		padding-bottom: 7rem;
	}
}

.testimonial-v1 {
	text-align: center;
	padding: 20px;
	border: 1px solid $light;
	transition: .3s all ease;
	position: relative;
	border-radius: 10px;
	img {
		width: 80px!important;
		border-radius: 50%;
		margin: 0 auto 20px auto;
		margin-top: -70px;
	}
	h3 {
		font-size: 16px;
		font-weight: 700;
		color: $black;
		line-height: 1;
	}
	p {
		font-size: 14px;
	}
	.caption {
		// color: #aaa;
		font-size: 13px;
	}
	&:hover {

		border-color: $primary;
	}
}

.owl-3-slider, .single-slider {
	.owl-nav {
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		@include media-breakpoint-down(sm) {
			display: none;
		}
		.owl-next, .owl-prev {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			span {
				font-size: 1.2rem;
			}
		}
		.owl-prev {
			transition: .3s all ease;
			left: -30px;
			&:hover {
				left: -35px;
				color: $primary;
			}
		}
		.owl-next {
			right: -30px;
			transition: .3s all ease;
			span {
				display: block;
				transform: rotate(-180deg);
			}
			&:hover {
				right: -35px;
				color: $primary;
			}
		}
	}
}


figure{
	&.dotted-bg {
		position: relative;
		&:before {
			z-index: -1;
			content: "";
			position: absolute;
			top: -50px;
			right: -50px;
			width: 268px;
			height: 224px;
			background-image: url('../images/dots.png');
			background-repeat: no-repeat;
			@include media-breakpoint-down(md) {
				right: 0px;
			}
		}
	}
}
.experience-wrap {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	.experience {
		background: $primary;
		padding: 20px;
		color: $white;
		padding-left: 30px;

		> span {
			font-size: 20px;
		}
		> a {
			display: block;
			color: $white;
		}
	}
}



// Loader
.loader-portfolio-wrap {
	text-align: center;

	display: none;
	opacity: 0;
	visibility: hidden;
	left: 50%;
	top: 0px;
	transform: translateX(-50%);
	position: absolute;
}
.loader-portfolio, .site-loader {
	width: 2rem;
	height: 2rem;
	margin: 2rem auto;
	border-radius: 50%;
	border: 0.3rem solid rgba($white, 0.3);
	border-top-color: $white;
	animation: 1.5s spin infinite linear;
	&.dark {
		border: 0.3rem solid rgba($black, 0.3);
		border-top-color: $black;
	}
}



@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}


.portfolio-single-inner {
	.heading-portfolio-single-h2 {
		margin-bottom: 40px;
		font-weight: 900;
		@include media-breakpoint-down(md) {
			font-size: 30px;
		}
	}
}



#portfolio-single-holder {
	.portfolio-single-inner {
		position: relative;
		opacity: 0;
		display: none;
	}
}

.unslate_co--close-portfolio {
	position: absolute;
	top: -10px;
	cursor: pointer;
	z-index: 9;
	padding: 10px 10px 10px 10px;
	right: -10px;
	border: 2px solid transparent;
	// background-color: #212121;
	border-radius: 30px;
	transition: .3s all ease;
	.close-portfolio-label {
		font-size: 14px;
		top: 25px;
		right: -10px;
		width: 150px;
		// display: none;
		position: absolute;
		transform: translateY(-50%);
		opacity: 0;
		visibility: hidden;
		transition: .3s all ease;
	}
	.wrap-icon-close {
		font-size: 30px;
		position: relative;
		transition: .3s all ease;
	}
	&:hover {
		.wrap-icon-close {
			transform: rotate(90deg);
		}
		.close-portfolio-lanel {
			opacity: 1;
			left: -10px;
			visibility: visible;
		}	
	}
	&:hover, &:focus {
		// border-color: lighten(#212121, 7%);
		// background-color: lighten(#212121, 5%);
		.close-portfolio-label {
			right: 20px;
			opacity: 1;
			visibility: visible;
		}
	}
}

.close-portfolio--content {
	right: 50%;
	transform: translateX(50%);
	.close-portfolio-label {
		right: 50%!important;
		transform: translateX(50%);
		top: 50px;
	}
}


.detail-v1 {
	.detail-label {
		display: block;
		font-size: 11px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: .1rem;
	}	
	.detail-val {
		font-size: 16px;
		a {
		}
	}
}


.position-relative {
	position: relative;
}

.work-experience {
	margin-bottom: 30px;
	position: relative;
	padding-left: 40px;

	&:before {
		font-family: 'icomoon';
		content: "\e8f7";
		color: #ccc;
		font-size: 20px;
		position: absolute;
		left: 0;
		top: 0;
		line-height: 1.2;
		transition: .3s all ease;
	}
	&:hover {
		&:before {
			color: $primary;
		}
	}
	.position {
		font-size: 16px;
		font-weight: 700;
		color: $black;
		margin-bottom: 0;
	}
	.company {
		font-size: 16px;
	}
	.year {
		display: block;
		font-size: 13px;
		// color: #aaa;
	}
}

.service {

	[class*="icon-"] {
		font-size: 50px;
		position: relative;
		display: inline-block;
		img {
			width: 50px;
		}
		&:after {
			position: absolute;
			content: "";
			border-radius: 50%;
			width: 35px;
			height: 35px;
			background: rgba($primary, .2);
			bottom: -0px;
			right: -0px;
			z-index: -1;
		}
	}
	h3 {
		font-size: 16px;
		font-weight: 700;
		color: $black;
	}
	p {
		// color: #aaa;
	}
}

#map {
	position: relative;
	iframe {
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		min-height: 400px;
		height: 100%;
		position: absolute;
		@include media-breakpoint-down(md) {
			position: relative;
		}

	}
}


.post-entry {
	.thumb {
		display: block;
		margin-bottom: 30px;
		overflow: hidden;
		border-radius: 4px;
		img {
			transition: .15s all ease;
		}
		&:hover {
			img {
				transform: scale(1.02);
			}
		}
	}
	
	h3 {
		font-size: 18px;
		margin-bottom: 0;
		a {
			color: $black;
		}
		font-weight: 700;
	}
	.post-meta {
		font-size: 14px;
		// color: #aaa;
		a {
			color: $black;
		}
	}
}

.lines-wrap {
	position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	@include media-breakpoint-down(sm) {
		display: none;
	}
	.lines-inner {
		position: absolute;
		width: 1140px;
		left: 50%;
		margin-left: -570px;
		top: 0;
		height: 100%;
		border-left: 1px solid #efefef;
		border-right: 1px solid #efefef;
		.lines {
			position: absolute;
			left: 33.333333%;
			right: 33.333333%;
			height: 100%;
			border-left: 1px solid #efefef;
			border-right: 1px solid #efefef;
		}
	}
}


#about-section {
	margin-top: 7rem;
	.container {
		background: $primary;
		padding-top: 50px;
		padding-bottom: 50px;
		padding-left: 50px;
		padding-right: 50px;
		.author-wrap {
			margin-top: -150px;
		}
	}
}