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

// Backgrounds
.custom-bg-color-grey-1 {
	background-color: #f8f9fb;
}

// Overlay
.overlay-tertiary:before {
	background: var(--tertiary);
}

// Fonts
.custom-font-size-1 {
	font-size: 80px;
}

p {
	color: #999;
}

.custom-heading-1 {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: var(--grey-500);
    white-space: nowrap;
    font-size: 80px;
    font-weight: bold;
    letter-spacing: 1px;
    @media (max-width: 991px) {
    	font-size: 50px;
    }
}

// Text Effect
.custom-stroke-text-effect-1 {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--light);
	white-space: nowrap;
}

// Text Position
.custom-text-pos-1 {
	left: -80px;
}

.custom-text-pos-2 {
	right: -80px;
}

.custom-text-pos-3 {
	left: -10%;
	top: 45%;
}

// Element Position
.custom-el-pos-1 {
	margin-top: -160px;
}

.custom-el-pos-2 {
	margin-top: -73px;
}

.custom-el-pos-3 {
	margin-top: -73px;
}

// Drop Caps
.custom-drop-caps {
	.custom-drop-caps-number {
		font-weight: bold;
		float: left;
		font-size: 90px;
		line-height: 90px;
		padding: 0;
		margin-right: 15px;
		margin-top: 0;
	}
}

// VR
.custom-vr-1 {
	width: 6px;
	height: 70px;
}

// Header
#header {
	.header-logo {
		@media (max-width: 991px) {
			img {
				max-width: 245px;
				height: auto;
			}
		}
	}
}

// Sections
.section-intro {
	background: url(../../img/demos/transportation-logistic/generic/generic-1.png) no-repeat 12% 100%;
	min-height: 400px;
}

// Carousel
.custom-carousel-1-wrapper {
	margin-top: -48px;
	@media (min-width: 992px) {
    	margin-top: -143px;
    }
   	margin-bottom: -100px;
    position: relative;
    z-index: 1;
    min-height: 300px;
}

.custom-carousel-1 {
	.owl-stage-outer {
		.owl-item {
			padding: 20px 2px 40px 18px;
			.card {
				transition: all 0.1s ease-in-out;
			}
			&.active {
				.card {
					box-shadow: 0 0px 20px rgba(0,0,0,.05);
				}
			}
		}
	}
	.owl-carousel.nav-bottom.nav-bottom-align-left {
		@media (max-width: 991px) {
			position: relative;
			top: 20px;
			width: 100% !important;
			padding-right: 20px;
		}
		.owl-nav {
			position: absolute;
			top: 73px;
			left: -78px;
		}
	}
}

// Parallax
.custom-parallax-1 {
	@media (min-width: 1200px) {
		.parallax-background {
			background-size: 100% !important;
		}
	}
}