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

.custom-font-size-1 {
	font-size: 0.6em;
}

@media(min-width: 1200px) {
	.custom-big-font-size-1 {
		font-size: 6.9rem !important;
	}
}

@media(min-width: 1600px) {
	.custom-big-font-size-1 {
		font-size: 8.5rem !important;
	}
}

.custom-blockquote-style-1 {
	border-left-width: 12px;
	border-left-color: #f3f3f3;
}

.custom-bg-color-grey-1 {
	background-color: #5a6267;
}

.custom-border-color-grey-1 {
	border-color: #404040 !important;
}

@media(max-width: 991px) {
	.custom-ws-mobile-wrap {
		white-space: normal !important;
	}
}

.custom-box-shadow-1 {
	box-shadow: 0 0px 40px 0px rgba(187, 187, 187, 0.3);
}

/*
* Text Background
*/
@media(min-width: 992px) {
	.custom-text-background {
		background-repeat: no-repeat;
		background-size: 100%;
	    background-position: 20% 30%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
@media(max-width: 991px) {
	.custom-text-background {
		background-image: none !important;
	}
}

/*
* Text Highlight
*/
.custom-highlight-text-1 {
	position: relative;
	&:before {
	    content: '';
	    position: absolute;
	    bottom: 5px;
	    left: 0;
	    width: 100%;
	    border-bottom: 7px solid #d20d0d;
	    opacity: 0.2;
	    z-index: 0;
	}
}

/*
* Buttons
*/
.custom-btn-style-1 {
	position: relative;
	transition: ease transform 300ms;
	> span {
		position: relative;
		z-index: 1;
	}
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		opacity: 0.7;
		border-radius: inherit;
		transform: translate3d(5px, 5px, 0);
		transition: ease transform 300ms;
		z-index: 0;
	}
	&:hover {
		transform: translate3d(2.5px, 2.5px, 0);
		&:before {
			transform: translate3d(0, 0, 0);
		}
	}
}

/*
* Crooked Line
*/
.custom-crooked-line {
	display: inline-block;
	width: 77px;
	overflow: hidden;
}

/*
* Custom Link Effects
*/
@keyframes crookedLineAnim {
	from {
	    transform: translate3d(0, 0, 0);
	}

	to {
		@include if-ltr() {
		    transform: translate3d(-48%, 0, 0);
		}
		@include if-rtl() {
		    transform: translate3d(48%, 0, 0);
		}
	}
}

.custom-link-hover-effects {
	.custom-view-more {
		svg {
			@include if-rtl() {
				transform: rotate(180deg);
			}
			transition: ease transform 300ms;
		}
	}
	&:hover {
		.custom-crooked-line {
			svg {
				animation-name: crookedLineAnim;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			    animation-timing-function: linear;
			}
		}
		.custom-view-more {
			svg {
				@include if-ltr() {
					transform: translate3d(7px, 0, 0);
				}
				@include if-rtl() {
					transform: rotate(180deg) translate3d(7px, 0, 0);
				}
			}
		}
		.custom-date-style-1 {
			transform: translate3d(2.5px, 2.5px, 0);
			&:before {
				transform: translate3d(0, 0, 0);
			}
		}
	}
}

/*
* Header
*/
.custom-header-top-nav-background {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		#{$right}: 0;
		width: 100vw;
		height: 100%;
		background: #CCC;
		transform: skewX(-25deg);
		z-index: 1;
	}
	&:after {
		content: '';
		position: absolute;
		top: 7px;
		#{$right}: -7px;
		width: 100vw;
		height: 100%;
		background: #CCC;
		transform: skewX(-25deg);
		z-index: 0;
	}
}

@media(min-width: 992px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
						    padding: 0px 1.2rem !important;
						    font-size: 16px;
						}
					}
				}
			}
		}
	}
}

/*
* Carousel
*/
.custom-carousel-box-shadow-1 {
	position: relative;
	&:before {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 65%;
	    height: 0px;
	    box-shadow: 0 40px 40px 120px rgba(0, 0, 0, 0.03);
	    transform: translate3d(-50%, -50%, 0);
	    z-index: 0;
	}
}

.custom-dots-style-1,
.custom-dots-style-2 {
	.owl-dots {
		margin-top: 30px !important;
		.owl-dot {
			> span {
				background: #9e9e9e !important;
				transition: ease all 300ms;
			}
			&.active {
				> span {
					background: #3e3e3e !important;
					width: 18px;
				}
			}
		}
	}
}

@media(max-width: 991px) {
	.custom-dots-style-2 {
		.owl-dots {
			transform: translate3d(0, -50px, 0);
		}
	}
}

.custom-carousel-vertical-center-items {
	.owl-stage {
		display: flex;
		align-items: center;
	}
}

.custom-nav-style-1 {
	.owl-nav {
		left: 50%;
		width: 105%;
	    transform: translate3d(-50%, -50%, 0);
	}
}

.owl-carousel {
	&.carousel-center-active-item {
		.owl-item {
			opacity: 0.4;
		}	
	}
}

/*
* Tabs
*/
.custom-tabs-style-1 {
	.nav-tabs {
		border-bottom: 1px solid #f1f1f1 !important;
		margin-bottom: 35px !important;
		> li {
			margin-bottom: 0 !important;
			.nav-link {
				border-bottom-width: 1px !important;
				&.active {
					border-bottom-width: 2px !important;
				}
			}
		}
	}
}

/*
* Accordion
*/
.custom-accordion-style-1 {
	> .card {
		border: 1px solid transparent !important;
		transition: ease border-color 300ms;
		.card-header {
			a {
				position: relative;
				padding: 23px 30px;
				background-color: #f4f4f4;
				transition: ease background-color 300ms, ease color 300ms;
				&:after {
					content: '+';
					position: absolute;
					top: 50%;
					#{$right}: 25px;
					font-size: inherit;
					font-weight: inherit;
					transform: translate3d(0, -50%, 0) rotate(45deg);
					transform-origin: 50% 50%;
					transition: ease transform 300ms;
				}

				&.collapsed {
					&:after {
						transform: translate3d(0, -50%, 0) rotate(0deg);
					}
				}
			}

			& + .collapse.show,
			& + .collapsing {
				border: 1px solid #efefef;
			    border-top: 0;
			}
		}

		& + .card {
			margin-top: 17px;
		}
	}
}

/*
* Read More
*/
.custom-read-more-style-1 {
	.readmore-overlay {
		background: linear-gradient(rgba(2, 0, 36, 0) 0%, rgb(255, 255, 255) 60%) !important;
	}
}

/*
* Blog Post Date
*/
.custom-date-style-1 {
	position: relative;
	transition: ease transform 300ms;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		opacity: 0.7;
		transform: translate3d(5px, 5px, 0);
		transition: ease transform 300ms;
		z-index: 0;
	}
}

/*
* Footer
*/
#footer {
	p, li, a:not(.btn):not(.no-footer-css), span {
		color: #999;
	}
	.footer-copyright {
		p {
			color: #999;
		}
	}
}