//COMMON IMPORTS
@import "../config/imports";

$primary-font: 'Sintony', sans-serif;
$secondary-font: 'Playfair Display', serif;

h1, h2, h3, h4, h5, h6  {
	font-family: $secondary-font;
}

a, p, span, button, input, textarea {
	font-family: $primary-font;
}

// Custom Demo Margins
h2 {
	margin: 0 0 15px 0;
}

@media (max-width: 991px) {
	.custom-sm-margin-top {
		margin-top: 20px;
	}
}

// Fonts
.custom-primary-font {
	font-family: $primary-font;
}

.custom-secondary-font {
	font-family: $secondary-font;
}

// Custom Section Padding
.custom-section-padding {
	padding: 60px 0px;
}

.custom-section-padding-2 {
	padding-top: 60px;
}

.custom-opacity-font {
	opacity: 0.6;
	@include transition(ease all 300ms);
	&:hover {
		opacity: 1;
	}
}

// Custom Borders
.custom-border-radius {
	border-radius: 35px !important;
	padding: 11px 30px !important;
	&.custom-border-radius-small {
		padding: 7px 17px !important;
		font-size: 12px;
	}
}

.btn-borders.custom-border-width {
	border-width: 2px;
}

@media (min-width: 991px) {
	.custom-md-border-top {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

// Custom Position
.custom-position-1 {
	position: relative;
	margin-top: -177px;
}

@media (max-width: 991px) {
	.custom-position-1 {
		margin-top: 0;
		background: #101019;
	}
}

// Custom Colors
.custom-color-red {
	color: #fa4141;
}

// Rev Slider - Custom Arrows Style
.tp-leftarrow, .tp-rightarrow {
	&.custom-arrows-style-1 {
		width: 45px;
		height: 120px;
		background: rgba(16, 16, 25, 0.5);

		&:hover {
			background: rgba(16, 16, 25, 1);
		}

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 70%;
			width: 30px;
			height: 30px;
			border-top: 1px solid #FFF;
			border-left: 1px solid #FFF;
			@include transform(translate3d(-50%, -50%, 0) rotate(-45deg));
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 106%;
			top: 50%;
			width: 70px;
			border-top: 1px solid #FFF;
			@include transform(translate3d(-50%, -50%, 0));
		}
	}
}

@media (max-width: 767px) {
	.tp-leftarrow, .tp-rightarrow {
		&.custom-arrows-style-1 {
			width: 30px;
			height: 90px;

			&:before {
				width: 20px;
				height: 20px;
			}

			&:after {
				width: 50px;
			}
		}
	}
}

.tp-rightarrow {
	&.custom-arrows-style-1 {
		@include transform(rotate(180deg));
	}
}

// Owl Carousel - Fix
.owl-carousel {
	.owl-item {
		> div {
			width: calc(100% + 2px);
		}
	}
}

// Owl Carousel Custom Dots Position
.owl-carousel {
	&.custom-dots-position, &.custom-dots-position-2 {
		.owl-dots {
			position: absolute;
			top: 0;
			right: 0;
			margin-top: -45px !important;
			width: auto;
		}
	}

	&.custom-dots-position-2 {
		.owl-dots {
			width: 100%;
			max-width: 1170px;
			right: 50%;
			margin: 0 15px;
			text-align: right;
			@include transform(translateX(50%));
		}
	}
}

@media (min-width: 768px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 750px;
			}
		}
	}
}

@media (min-width: 992px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 970px;
			}
		}
	}
}

@media (min-width: 1200px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 1170px;
			}
		}
	}
}

// Owl Carousel - Custom Arrows Style 2
.owl-carousel {
	&.custom-arrows-style-2, &.custom-xs-arrows-style-2 {
		.owl-nav {
			.owl-prev, .owl-next {
				position: absolute;
				width: 30px;
				@include transition(ease all 300ms);

				&:before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					right: -2px;
					left: initial;
					width: 100%;
					border-top: 1px solid #4dbb6d;
					@include transform(translateY(-50%));
				}

				&:after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					right: 0;
					width: 15px;
					height: 15px;
					border-top: 1px solid #4dbb6d;
					border-right: 1px solid #4dbb6d;
					@include transform(translateY(-50%) rotate(45deg));
				}

				&.disabled {
					&:before {
						border-top: 1px solid #646466;
					}

					&:after {
						border-top: 1px solid #646466;
						border-right: 1px solid #646466;
					}
				}
			}

			.owl-prev {
				left: -95px;
				@include transform(rotate(-180deg));
			}
			
			.owl-next {
				right: 10px;
			}
		}

		&.show-nav-title {
			.owl-nav {
				margin-top: -52px;

				[class*="owl-"], [class*="owl-"]:hover, [class*="owl-"]:active {
					width: 30px;
				}
			}
		}
	}
}

// Show custom-xs-arrows-style-2
@media (max-width: 767px) {
	.owl-carousel {
		&.custom-xs-arrows-style-2 {
			.owl-nav {
				display: block;
			}

			.owl-dots {
				display: none;
			}
		}
	}
}

// Hide custom-xs-arrows-style-2
@media (min-width: 767px) {
	.owl-carousel {
		&.custom-xs-arrows-style-2 {
			.owl-nav {
				display: none;
			}
		}
	}
}

/*
* Header
*/
#header {
	&.custom-header-transparent-bottom-border {
		.header-body {
			.header-container {
				> .header-row {
						&:after {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						bottom: -8px;
						width: 100%;
						border-bottom: 1px solid rgba(255, 255, 255, 0.12);
					}
				}
			}
		}
	}
}

.sticky-header-active {
	#header {
		&.custom-header-transparent-bottom-border {
			.header-body {
				.header-container {
					> .header-row {
							&:after {
							content: none !important;
						}
					}
				}
			}
		}
	}
}

@media (min-width: 991px) {
	#header {
		.header-nav-main {
			margin-#{$right}: -15px;
			&.custom-header-nav-main-effect-1 {
				nav {
					> ul {
						> li {
							> a {
								@include transition(ease all 300ms);
							}
						}
						li.dropdown {
							> a.dropdown-toggle {
								&:after {
									@include transition(ease all 300ms);
									border-color: #fff transparent transparent;
									top: 36px !important;
								}
							}
							.dropdown-menu {
								top: initial;
								border-top: 0;
								margin-top: -1px;
								opacity: 0;
								visibility: hidden;
								@include transform(scale(0.7));
								@include transition(ease all 300ms);
								
								li.dropdown-submenu {
									.dropdown-menu {
										top: 0;
										border-top: 0;
										opacity: 0;
										visibility: hidden;
										@include transform(scale(0.7));
										@include transition(ease all 300ms);
									}

									&:hover {
										.dropdown-menu {
											opacity: 1;
											visibility: visible;
											@include transform(scale(1));
											@include transition(ease all 300ms);
										}
									}
								}
							}

							&:hover {
								.dropdown-menu {
									opacity: 1;
									visibility: visible;
									@include transform(scale(1));
									@include transition(ease all 300ms);
								}
							}
						}
					}
				}
			}

			nav {
				> ul {
					> li {
						> a {
							font-size: 13px;
							padding: 35px 20px 30px !important;
						}
					}
				}
			}
		}
	}	
}

/*
* Rev Slider
*/
@media (min-width: 991px) {
	.slider-container {
		height: 100vh !important;

		.slider {
			height: 100vh !important;
		}
	}
}

@media (max-width: 767px) {
	.slider-container {
		.btn {
			font-size: 12px !important;
		}
	}
}

// Custom Page Header
.custom-page-header {
	padding: 120px 0 35px;
	background: #1A1E2A !important;
	border-color: #1A1E2A !important;
	h1 {
		font-size: 2em;
	}
}

/*
* Looking For
*/
.looking-for {
	.container {
		padding: 30px;
	}

	.looking-for-box {
		h2 {
			color: #FFF;
			line-height: 1.2;
			margin-bottom: 0;
		}
	}
}

@media (max-width: 991px) {
	.looking-for {
		.looking-for-box {
			h2 {
				font-size: 2em;
			}
		}
	}
}

// Custom call to action
.custom-call-to-action {
	display: block;
	border-left: 2px solid #4a8961;
	padding-left: 10px;

	span {
		&:nth-child(2) {
			display: block;
			font-size: 1.8rem;
		}
	}

	&.white-border {
		border-color: #FFF !important;
	}
}

@media (max-width: 991px) {
	.custom-call-to-action {
		span {
			&:nth-child(2) {
				font-size: 1.6rem;
			}
		}
	}
}

@media (max-width: 767px) {
	.custom-call-to-action {
		span {
			&:nth-child(2) {
				font-size: 2rem;
			}
		}
	}
}

/*
* About Us
*/
.about-us {
	.btn {
		margin-top: 15px;
		margin-left: 15px;
	}
}

// Custom Content Grid
.custom-content-grid {
	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		box-shadow: 0px 0px 97px 70px rgba(152, 152, 152, 0.1);
		@include transform(translate(-50%, -50%));
	}

	.content-grid-item {
		&:before {
			left: 0px;
		}

		&:after {
			z-index: 1;
		}
	}

	.counters {
		.counter {
			margin-left: 80px;
			text-align: left;

			&.margin-style-2 {
				margin-left: 55px;
			}

			.counter-icon {
				float: left;
				margin-left: -50px;
				margin-top: 8px;
			}

			label {
				font-weight: normal;
				letter-spacing: -1px;
				color: #1e1e24;
			}
		}

		strong {
			font-size: 45px;
		}
	}
}

@media (max-width: 991px) {
	.custom-content-grid {
		&:before {
			content: none;
		}

		.counters {
			.counter.custom-sm-counter-style {
				margin-left: 0;
				text-align: center;
				padding-left: 40px;

				&.margin-style-2 {
					margin-left: 0;
				}

				.counter-icon {
					float: initial;
					margin-left: 0;
					position: absolute;
					top: 50px;
					left: 17%;
				}
			}
		}
	}
}

// Custom List Icons
.list.list-icons.list-icons-style-3 li > .fa:first-child, 
.list.list-icons.list-icons-style-3 li > .icons:first-child, 
.list.list-icons.list-icons-style-3 li a:first-child > .fa:first-child, 
.list.list-icons.list-icons-style-3 li a:first-child > .icons:first-child {
	font-size: 0.7em;
	padding: 10px;
	padding-top: 8px;
}

/*
* Expertise
*/
// Custom Feature Box
.feature-box {
	&.custom-feature-box {
		padding: 20px 10px;

		&.custom-feature-box-active, &:hover {
			.feature-box-icon {
				box-shadow: 0px 0px 40px 4px rgba(200, 200, 200, 0.5);

				img {
					@include transform(translate3d(-50%, -50%, 0) scale(1.1));
				}
			}
		}
		
		.feature-box-icon {
			background: transparent;
			width: 100px;
			position: relative;
			height: 100px;
			border: 6px solid #FFF;
			border-radius: 100%;
			padding: 5px;
			margin-top: 0;
			margin-bottom: 20px;
			margin-right: 20px;
			overflow: hidden;
			z-index: 1;
			@include transition(ease box-shadow 300ms);

			img {
				position: absolute;
				width: 113%;
				top: 50%;
				left: 50%;
				z-index: 0;
				@include transform(translate3d(-50%, -50%, 0) scale(1));
				@include transition(ease transform 300ms);
			}
		}
	}
}

@media (max-width: 991px) {
	.col-md-12 .feature-box.feature-box-style-2.custom-feature-box {
		.feature-box-info {
	    	padding-left: 115px;
	    }
	}
}

/*
* Our Strategy
*/
.custom-step-item {
	.step {
		position: relative;
		text-align: center;
		clear: both;
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 600;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: -20px;
			height: 63px;
			border-left: 1px solid #e4e4e4;
		}

		.step-number {
			display: block;
			font-size: 3em;
			font-weight: 700;
			letter-spacing: -4px;
			line-height: 1;
		}
	}

	.step-content {
		margin-left: 80px;
	}
}

// Owl Carousel Dots - Numbered Dots Style
.owl-carousel {
	&.numbered-dots {
		.owl-dots {
			display: inline-block;
			counter-reset: dots;
			margin-left: 70px;
		}

		.owl-dot {
			span {
				width: 30px;
				height: 30px;

				&:before {
					counter-increment:dots;
					content: counter(dots);
					color: #245432;
					font-weight: bold;
					line-height: 2.2;
				}
			}

			&.active, &:hover {
				span {
					&:before {
						color: #FFF;
					}
				}
			}

			&:hover {
				opacity: 0.5;
			}
		}
	}

	&.owl-theme {
		.owl-dot {
			span {
				background: #eef4f2;
			}
		}
	}
}

/*
* Frequently Asked Questions
*/
.custom-accordion-style-1 {
	.panel {
		position: relative;
		margin-top: 0 !important;
		border-right: 0;
		border-bottom: 1px solid #e4e4e4;
		border-top: 0;
		box-shadow: none;

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

		.panel-title {
			> a {
				font-size: 14px !important;

				&.accordion-toggle {
					color: #4dbb6d;
					border-bottom: 1px solid #e4e4e4;

					&:before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						border-left: 1px solid #4dbb6d;
					}

					.custom-accordion-plus {
						&:after {
							border-top: 2px solid #4dbb6d;
							@include transform(translate3d(-50%, -50%, 0) rotate(0deg));
						}
					}
				}

				&.collapsed {
					color: #1e1e24 !important;
					border-bottom: 0;

					&:before {
						content: none;
					}

					.custom-accordion-plus {
						&:after {
							border-top: 2px solid #1e1e24;
							@include transform(translate3d(-50%, -50%, 0) rotate(90deg));
						}
					}
				}

				.custom-accordion-plus {
					position: absolute;
					top: 23px;
					right: 3px;
					width: 15px;

					&:before, &:after {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 100%;
						border-top: 2px solid #1e1e24;
						@include transform(translate3d(-50%, -50%, 0));
						@include transition(ease all 300ms);
					}
				}
			}
		}

		.panel-body {
			padding: 15px 15px 35px;
		}
	}
}

/*
* Our Cases
*/
// Custom Thumb Info Style
.thumb-info.custom-thumb-info-style-1 {
	border: none;

	&:hover {
		.thumb-info-caption {
			background: #4dbb6d !important;

			.custom-thumb-info-title {
				span {
					color: #FFF !important;
				}
			}

			.custom-arrow {
				width: 55px;

				&:before {
					border-top: 1px solid #FFF;
				}

				&:after {
					border-top: 1px solid #FFF;
					border-right: 1px solid #FFF;
				}
			}
		}
	}

	.thumb-info-caption {
		position: relative;
		padding: 25px;
		display: block;
		@include transition(ease background 300ms, ease width 300ms);

		.custom-thumb-info-title {
			span {
				color: #777;
			}

			.custom-thumb-info-name {
				display: block;
			}
		}

		.custom-arrow {
			position: absolute;
			top: 50%;
			right: 15px;
			width: 40px;
			@include transform(translateY(-50%));
			@include transition(ease all 300ms);

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: -2px;
				width: 100%;
				border-top: 1px solid #1e1e24;
				@include transform(translateY(-50%));
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 0;
				width: 15px;
				height: 15px;
				border-top: 1px solid #1e1e24;
				border-right: 1px solid #1e1e24;
				@include transform(translateY(-50%) rotate(45deg));
			}
		}
	}
}

// Owl Carousel - Custom Both Sides Shadow Style / Custom Dots Style 1
.owl-carousel {
	&.custom-both-sides-shadow {
		.owl-stage-outer {
			&:before, &:after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				box-shadow: 0px 0px 140px 220px rgba(255, 255, 255, 0.8);
				z-index: 1;
				@include transition(ease opacity 300ms);
			}

			&:after {
				left: initial;
				right: 0;
			}

			&:hover {
				&:before, &:after {
					opacity: 0;
				}
			}
		}
	}

	&.custom-dots-style-1 {
		.owl-dots {
			margin-top: 30px;
		}

		.owl-dot {
			span {
				width: 12px;
				height: 12px;
				border: 2px solid black;
				background: transparent !important;
			}

			&.active, &:hover {
				span {
					position: relative;
					border: 2px solid #4dbb6d;
					background: transparent;

					&:before {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 3px;
						height: 3px;
						border-radius: 100%;
						background: #4dbb6d;
						@include transform(translate3d(-50%, -50%, 0));
					}
				}
			}

			&:hover {
				opacity: 0.5;
			}
		}
	}
}

@media (max-width: 991px) {
	.owl-carousel {
		&.custom-both-sides-shadow {
			.owl-stage-outer {
				&:before, &:after {
					box-shadow: none;
				}
			}
		}
	}
}

/*
* Testimonials
*/
// Custom Image Rounded
.custom-rounded-image {
	border-radius: 100%;
}

// Custom Testimonial Style 
.testimonial.custom-testimonial-style-1 {
	blockquote {
		background: transparent;
		padding: 40px 20px 40px 0px;

		&:before {
			left: 0;
			font-size: 60px;
			color: #1e1e24;
		}

		&:after {
			font-size: 60px;
			color: #1e1e24;
		}

		p {
			color: #777;
			font-family: $primary-font;
			font-style: normal;
			font-size: 1em;
			line-height: 1.8;
			padding: 0px;
		}
	}

	.testimonial-author {
		p {
			position: relative;
			margin: 0;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 18px;
				border-top: 2px solid #1e1e24;
			}
		}
	}
}

/*
* Our Team
*/
.team-item {
	padding: 0px 10px;

	&:hover {
		.image-wrapper {
			img {
				@include transform(scale(1.1));
			}
		}
	}

	.image-wrapper {
		display: block;
		overflow: hidden;

		img {
			@include transition(ease transform 300ms);
		}
	}

	.team-infos {
		position: relative;
		background: #FFF;
		padding: 25px;

		.share {
			position: absolute;
			bottom: calc(100% - 22px);
			right: 15px;
			width: 42px;
			overflow: hidden;
			z-index: 1;
			@include transition(ease height 300ms);

			&:hover {
				.share-icons {
					@include transform(translateY(0));
				}

				i {
					&.fa-share-alt {
						background: #4dbb6d;
					}
				}
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #FFF;
				width: 100%;
				height: 22px;
			}

			.share-icons {
				text-align: center;
				padding-bottom: 42px;
				border-radius: 50px;
				@include transform(translateY(100%));
				@include transition(ease transform 300ms);
			}

			i {
				display: block;
				color: #FFF;
				padding: 15px;
				opacity: 0.5;
				@include transition(ease opacity 300ms);

				&.fa-share-alt {
					position: absolute;
					background: #58605a;
					bottom: 0;
					left: 0;
					border-radius: 50px;
					opacity: 1;
					z-index: 1;
				}

				&.fa-facebook {
					color: #4d70a8;
				}

				&.fa-instagram {
					color: #964b00;
				}

				&.fa-linkedin {
					color: #0077b5;
				}

				&:hover {
					opacity: 1;
				}
			}
		}

		.team-member-desc {
			display: block;
			color: #777;
		}
	}
}

/*
* Our Blog
*/
article.blog-post {
	.blog-post-image-wrapper {
		img {
			max-width: 95%;
		}

		.blog-post-date {
			position: absolute;
			top: 65%;
			right: 10px;
			font-size: 3em;
			text-align: center;
			line-height: 1;
			padding: 25px 15px;
			@include transform(translateY(-50%));

			.month-year {
				display: block;
				font-size: 0.4em;
			}
		}
	}
}

/*
* Contact Us
*/
.custom-call-to-action-2 {
	.info {
		display: block;
	}
}

// Custom Social Icons Style
.custom-social-icons-style-1 {
	li {
		border: 2px solid #FFF;

		a {
			background: transparent;
			color: #FFF !important;
		}
	}
}

// Custom Contact Form Style
.custom-contact-form-style-1 {
	.custom-input-box {
		position: relative;

		.icons {
			position: absolute;
			top: 16px;
			left: 16px;
			font-size: 1.3em;
		}

		.form-control {
			border-radius: 2px;
			height: 50px;
			padding-left: 50px;
		}

		textarea.form-control {
			padding-top: 14px;
			height: 0;
			min-height: 130px;
		}
	}
}

/*
* Footer
*/
#footer {
	background: #1A1E2A;
	border-top: 1px solid #3c3e49;
	margin-top: 0;
	padding: 20px 0 0;

	p {
		color: #a8b1b8;
		margin-bottom: 0;
	}
}