.hero-2 {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	position: relative;
	&.overlay {
		&:before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba($black, .6);
			z-index: 1;
		}
	}
	& > .container {
		position: relative;
		z-index: 2;
	}
	&, & > .container > .row {
		height: 100vh;
		min-height: 670px;
	}

	h1 {
		font-size: 50px;
		color: $white;
		text-transform: uppercase;
		font-weight: bold;
		@include media-breakpoint-down(md) {
			font-size: 30px;
		}
	}
	.intro-desc {
		position: absolute;
		bottom: 20px;
		right: 20px;
		@include media-breakpoint-down(md) {
			left: 20px;
		}
		max-width: 450px;
		p {
			color: rgba($white, .8);
		}
	}
}

.play-vid {
	.play {
		display: inline-block;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 1px solid rgba($white, .2);
		position: relative;
		span {
			position: absolute;
			top: 50%;
			left: 52%;
			transform: translate(-50%, -50%);
			color: $white;
			font-size: 18px;
		}
		&:hover {
			border: 1px solid rgba($white, .7);

		}
	}
}

.line {
	width: 50px;
	height: 1px;
	background: $white;
	margin-bottom: 10px;
}

.sec-1 {
	.heading {
		margin-bottom: 70px;
		font-weight: bold;
		position: relative;
		display: inline-block;
		@include media-breakpoint-down(md) {
			font-size: 30px;
			margin-bottom: 30px;
		}
		&:after {
			content: "";
			position: absolute;
			height: 1px;
			width: 300%;
			background: $black;
			right: 0;
			bottom: 0;
		}
	}
	.img-r {
		position: relative;
		right: -100px;
		@include media-breakpoint-down(md) {
			right: auto!important;
		}
	}
}

.section {
	padding: 7rem 0;
	.heading {
		font-size: 40px;
		font-weight: bold;
		text-transform: uppercase;
	}
	@include media-breakpoint-down(md) {
		padding: 2rem 0;
	}
}

.sec-2 {
	.heading {
		margin-bottom: 60px;
		position: relative;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 5px;
		display: inline-block;
		@include media-breakpoint-down(md) {
			font-size: 24px;
			margin-bottom: 30px;
		}
		&:after {
			content: "";
			position: absolute;
			height: 1px;
			width: 300%;
			background: $black;
			left: 0;
			bottom: 0;
		}
	}
}

.sec-3 {
	.heading {
		margin-bottom: 60px;
		position: relative;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 5px;
		display: inline-block;
		@include media-breakpoint-down(md) {
			font-size: 24px;
			margin-bottom: 30px;
		}
		&:before {
			content: "";
			position: absolute;
			height: 1px;
			width: 300%;
			background: $black;
			right: 0;
			bottom: 0;
		}
	}
}

.accordion-1 {
	.accordion-item {
		button {
			background-color: transparent!important;
			color: $black;
			outline: none;
			box-shadow: none;
			border-color: rgba($black, .1);
				// border-color: $black;
				border-bottom: none;
			// border-top: none;
			text-transform: uppercase;
			font-size: 12px;
			padding-left: 0;
			padding-right: 0;
			font-weight: bold;
			color: $primary;
			&:after {
				filter: brightness(0.5) sepia(1) hue-rotate(29deg) saturate(6);
			}
			&.collapsed {
				background-color: transparent!important;
				border-color: rgba($black, .1);
				// border: none;
				box-shadow: none;
				color: $black;

			}
		}
	}
	.accordion-collapse {
		border-top: none;
	}
	.accordion-body {
		padding-left: 0;
		padding-top: 0;
		padding-right: 0;
	}
}

.more-2 {
	position: relative;
	padding-right: 30px;
	display: inline-block;
	span {
		position: absolute;
		top: 50%;
		right: 0;
		font-size: 12px;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		background: transparent;
		color: $primary;
		line-height: 1.6;
		text-align: center;
		transition: .3s all ease;
	}
	&:hover {
		color: $primary;
		span {
			background: $primary;
			color: $white;
		}
	}

	&.dark {
		color: $black;
		> span {
			color: $black;
		}
		&:hover {
			color: $primary;
			span {
				color: $white;
				background: $primary;
			}
		}
	}
}


.sec-4, .sec-5, .sec-news {
	
	.heading {
		margin-bottom: 70px;
		font-weight: bold;
		position: relative;
		display: inline-block;
		@include media-breakpoint-down(md) {
			margin-bottom: 30px;
		}
		&:after {
			content: "";
			position: absolute;
			height: 1px;
			width: 300%;
			background: $black;
			right: 0;
			bottom: 0;
		}
	}
}


.testimonial-item {
	text-align: center;
	.testimonial-item-inner {		
		padding: 50px 30px;
		background: $white;
		border-radius: 10px;
		transition: .3s all ease;
	}
	.testimonial-heading {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 30px;
	}
	blockquote {
		font-size: 18px;
		font-style: italic;
		color: #777;
		margin-bottom: 30px;
	}
	.testimonial-author {
		text-anchor: center;
		img {
			width: 80px;
			margin: 0 auto 20px auto;
			border-radius: 50%;
		}
		strong {
			font-size: 16px;
			font-weight: 400;
			color: $black;
		}
		span {
			font-size: 14px;
		}
	}
}

.testimonial-slide-center-wrap {
	position: relative;
	.tns-outer .tns-inner {
		padding-bottom: 100px!important;
	}

	
	.tns-item {
		opacity: .3;
		transition: .3s all ease;
		transform: scale(0.9);
		
	}


	.tns-item:not(.tns-slide-active) + .tns-slide-active + .tns-slide-active { 
		opacity: 1; 

		transform: scale(1.0);
		.testimonial-item-inner {
			background: $black;

			strong {
				color: $white;
			}

		}

	}	

	.tns-item:not(.tns-slide-active) + .tns-slide-active {
		@include media-breakpoint-down(md) {
			opacity: 1; 
		}

	}

	.tns-nav {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0px;
		z-index: 2;
		button {
			background: none;
			border: none;
			display: inline-block;
			margin: 2px;
			position: relative;
			&:active, &:focus {
				outline: none;
			}
			&:before {
				position: absolute;
				content: "";
				width: 7px;
				height: 7px;
				border-radius: 50%;
				background-color: rgba($black, .2);
				right: 0;
				transition: .3s all ease;
			}
			&.tns-nav-active {
				&:before {
					background-color: $primary;
				}
			}
		}
	}

}



.custom-card {
	.img {
		flex: 0 0 50px;
		margin-right: 30px;
		[class^="flaticon-"] {
			font-size: 50px;
			color: $primary;
		}
	}
}



.video-wrap {
	position: relative;
	display: block;
	[class^="icon-"] {
		position: absolute;
		z-index: 9;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		background-color: rgba($white, 1);
		text-align: center;
	}
	img {
		position: relative;
		z-index: 1;
	}
	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background: rgba($black, .5);
	}
}


.sec-news {

}

.post-entry-1 {
	.meta {
		color: #ccc;
	}
	.post-entry-1-contents {
		background: $white;
		padding: 30px;
		h2 {
			font-size: 20px;
			margin-bottom: 20px;
			font-weight: bold;
			a {
				color: $black;
				&:hover {
					color: $primary;
				}
			}
		}
	}

	&.person-1 {
		text-align: center;
		img {
			width: 90px;
			border-radius: 50%;
			margin: 0 auto -45px auto;
		}
		.post-entry-1-contents {
			padding-top: 4rem;
		}

	}

}


// sidebar
.sidebar-box {
	margin-bottom: 30px;
	padding: 25px;
	font-size: 15px;
	width: 100%;
	float: left;
	background: $white;
	*:last-child {
		margin-bottom: 0;
	}
	h3 {
		font-size: 18px;
		margin-bottom: 15px;
	}
}

.categories,
.sidelink {
	li {
		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;
			span {
				position: absolute;
				right: 0;
				top: 0;
				color: #ccc;
			}
		}
		&.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: 16px;
				font-weight: bold;
				color: $black;
			}
			.meta {
				text-transform: uppercase;
				font-size: 13px;
				letter-spacing: .1em;
				color: #ccc;
				margin-bottom: 20px;
			}
			.reply {
				padding: 5px 10px;
				background: lighten($black, 90%);
				color: $black;
				text-transform: uppercase;
				font-size: 14px;
				&:hover {
					color: $black;
					background: lighten($black, 89%);
				}
			}
		}
	}
}

.search-form {
	background: lighten($black, 97%);
	padding: 10px;
	.form-group {
		position: relative;
		input {
			padding-right: 50px;
		}
	}
	.icon {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
}

.post-meta {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .2em;
	a {
		color: $white;
		border-bottom: 1px solid rgba($white, .5);
	}
}


.custom-pagination {
	a {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-weight: 700;
		border-radius: 50%;
		background: rgba($primary, .1);
		color: $primary;
		text-align: center;
		&:hover, &.active {
			background: $primary;
			color: $white;
		}
	}

}


// sidebar
.sidebar-box {
	margin-bottom: 30px;
	padding: 25px;
	font-size: 15px;
	width: 100%;
	float: left;
	background: $white;
	*:last-child {
		margin-bottom: 0;
	}
	h3 {
		font-size: 18px;
		margin-bottom: 15px;
	}
}

.categories,
.sidelink {
	li {
		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;
			span {
				position: absolute;
				right: 0;
				top: 0;
				color: #ccc;
			}
		}
		&.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: uppercase;
				font-size: 13px;
				letter-spacing: .1em;
				color: #ccc;
			}
			.reply {
				padding: 5px 10px;
				background: lighten($black, 90%);
				color: $black;
				text-transform: uppercase;
				font-size: 14px;
				&:hover {
					color: $black;
					background: lighten($black, 89%);
				}
			}
		}
	}
}

.search-form {
	background: lighten($black, 97%);
	padding: 10px;
	.form-group {
		position: relative;
		input {
			padding-right: 50px;
		}
	}
	.icon {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
}

.post-meta {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .2em;
	a {
		color: $white;
		border-bottom: 1px solid rgba($white, .5);
	}
}

.single-portfolio{
	border-radius:5px;
	overflow: hidden;
	color: $white;
	> a {
		overflow: hidden;
		position: relative;
		display: block;
		
		&:before {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			opacity: 0;
			visibility: hidden;
			height: 100%;
			z-index: 2;
			transition: .3s all ease;
			background: rgba($black,.5);
		}

		.contents {
			
			margin-top: 20px;
			visibility: visible;
			margin-top: 20px;
			z-index: 3;
			h3 {
				font-size: 16px;
				font-weight: bold;
				color: $white;

			}
		}

		img {
			transition: .3s all ease;
			transform: scale(1.0);
		}
		&:hover {
			&:before {
				visibility: visible;
				opacity: 1;
			}
			img {
				transform: scale(1.05);
			}
			.contents {
				margin-top: 0px;
				opacity: 1;
				visibility: visible;
				
			}
		}
	}

	.contents {


		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -50%);
		text-align: center;
		transition: .3s all ease;
		h3 {
			color: $white
		}
		.cat {
			color: rgba($white, .5);
		}
	}
}


.person {
	h3 {
		font-size: 20px;
	}
}
.social-2 {
	li {
		display: inline-block;
		a {
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: rgba($black, .02);
			border-radius: 50%
		}
	}
}

#testimonial-nav {
	position: absolute;
	z-index: 1;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	> span {
		border: 1px solid rgba($black, .1);
		border-radius: 4px;
	}
	span {
		cursor: pointer;
		display: inline-block;
		padding: 10px;

	}
}