

/* ====================== [ Start Slider ] ====================== */

.slider {
	position: relative;

	&.fixed-slider {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.swiper-slide-active {
		z-index: 3;
	}

	.parallax-slider {
		position: relative;

		.swiper-slide {
			position: relative;
			overflow: hidden;
			width: 100%;
			min-height: 100vh;
			padding-bottom: 50px;

			.bg-img {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-size: cover;
			}
		}

		.swiper-slide-active {

			.caption {

				h1 {
					transition: all 0s;
					opacity: 1;
					visibility: visible;
					transform: translateY(0);

					.char {
						animation: fadeInUp .5s cubic-bezier(.3, 0, .7, 1) both;
						animation-delay: calc(60ms * var(--char-index));
					}
				}

				.thin,
				.btn-curve,
				p{
					opacity: 1;
					transform: translateY(0);
				}
			}
		}

		.caption {

			.thin {
				color: $main-color;
				font-size: 30px;
				font-weight: 300;
				text-transform: uppercase;
				letter-spacing: 8px;
				margin-bottom: 5px;
				opacity: 0;
				transform: translateY(-20px);
				transition: all .4s;
				transition-delay: .8s;

				span{
					color: $main-color;
				}
			}

			h1 {
				font-size: 65px;
				font-weight: 700;
				letter-spacing: 4px;
				color: #fff;
				opacity: 0;
				visibility: hidden;
				transition: opacity .5s,
							visibility .5s;

				span{
					font-weight: 700;
				}
			}

			p{
				color: #eee;
				opacity: 0;
				transform: translateY(20px);
				transition: all .4s;
				transition-delay: .8s;
			}

			.btn-curve{
				opacity: 0;
				transform: translateY(20px);
				transition: all .4s;
				transition-delay: 1s;
			}
		}

		.hmone{

			h1{

				.thin{
					font-size: 30px;
					margin-bottom: 20px;
				}
			}
		}
	}

	.caption.center{

		h1{
			font-size: 75px;
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 2px;
			margin-bottom: 20px;
		}
	}

	.setone{
		position: absolute;
		bottom: 8%;
		right: 40px;
		z-index: 8;

		.swiper-nav-ctrl{
			color: #ccc;
			font-size: 13px;
			width: 55px;
			height: 55px;
			line-height: 55px;
			text-align: center;
			margin: 5px 0;
			border: 1px solid rgba(255,255,255, .3);
			position: static;

			&:after{
				display: none;
			}
		}

		&.setwo{
			position: static;

			.swiper-nav-ctrl{
				border-radius: 50%;
			}

			.next-ctrl{
				position: absolute;
				top: 50%;
				right: 30px;
			}

			.prev-ctrl{
				position: absolute;
				top: 50%;
				left: 30px;
			}
		}
	}

	.swiper-pagination-fraction.top {
		position: absolute;
		right: 15%;
		left: auto;
		bottom: auto;
		top: 20%;
		width: auto;
		color: #fff;
		font-size: 40px;
		font-weight: 500;
	
		.swiper-pagination-current {
			font-size: 60px;
			font-weight: 700;
			position: relative;
			color: transparent;
    		-webkit-text-stroke: .5px #fff;
	
			&:after {
				content: '/';
				color: #fff;
				position: relative;
				margin: 0 10px;
				font-size: 12px;
				font-weight: 100;
			}
		}

		&.botm{
			top: auto;
			bottom: 40px;
			right: 40px;
		}
	}

	.social-icon{
		position: absolute;
		left: 40px;
		bottom: 40px;
		z-index: 8;

		a{
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255, .05);
			color: #fff;
			font-size: 13px;
		}
	}
}

.slid-half{
	position: relative;

	.nofull {
		position: relative;
		overflow: hidden;
		background-color: #252531;
		background-image: url(../img/line-pattern1.png);
		background-repeat: repeat;
		height: 105vh;
		color: #fff;
	}

	.swiper-pagination-fraction.top {
		position: absolute;
		right: 15%;
		left: auto;
		bottom: auto;
		top: 20%;
		width: auto;
		color: #fff;
		font-size: 40px;
		font-weight: 500;
	
		.swiper-pagination-current {
			font-size: 60px;
			font-weight: 700;
			position: relative;
			color: transparent;
    		-webkit-text-stroke: .5px #fff;
	
			&:after {
				content: '/';
				color: #fff;
				position: relative;
				margin: 0 10px;
				font-size: 12px;
				font-weight: 100;
			}
		}
	}
}

.cta {

	&__slider-wrapper {
		position: relative;
		width: 100%;
		height: 105vh;
		overflow: hidden;

		.block {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0;
		}
	}

	&__slider {
		min-height: 105vh;

		.swiper-slide {
			overflow: hidden;
		}
	}

	//ARROWS
	&__slider-arrows {
		display: block;
		position: absolute;
		bottom: 40px;
		right: 40px;
		z-index: 2;
	}

	&__slider-arrow {
		width: 55px;
		height: 55px;
		text-align: center;
		line-height: 55px;
		font-size: 13px;
		border: 1px solid rgba(255,255,255, .3);
		display: block;
		cursor: pointer;

		//MODIFIERS
		&.cta__slider-arrow--previous {
			left: 0;
		}

		&.cta__slider-arrow--next {
			left: 50%;
		}
	}

	&__slider-item {
		position: relative;

		.media-wrapper {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;

			.bg-img {
				position: absolute;
				width: 70%;
				height: 100%;
				right: 0;
				top: 0;
			}
		}

		.container {
			position: relative;
			z-index: 4;
		}

		.caption {
			position: relative;

			.top-corn,
			.bottom-corn{
				position: absolute;
				left: -60px;
				top: -60px;
				opacity: .3;

				&:after,
				&:before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					background: $main-color;
				}

				&:after{
					width: 30px;
					height: 1px;
				}

				&:before{
					width: 1px;
					height: 30px;
				}
			}

			.bottom-corn{
				top: auto;
				bottom: -60px;

				&:before{
					top: auto;
					bottom: 0;
				}
			}

			h1 {
				font-size: 75px;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 4px;
				color: #fff;
				opacity: 0;
				visibility: hidden;
				transition: opacity .5s,
					visibility .5s;
			}

			.thin {
				color: $main-color;
				font-size: 20px;
				font-weight: 300;
				text-transform: uppercase;
				letter-spacing: 12px;
				margin-bottom: 5px;
				opacity: 0;
				transform: translateY(-20px);
				transition: all .4s;
				transition-delay: .8s;
			}

			p{
				color: #eee;
				font-weight: 300;
				font-size: 14px;
				opacity: 0;
				transform: translateY(-20px);
				transition: all .4s;
				opacity: 0;
				transform: translateY(20px);
				transition: all .4s;
				transition-delay: .8s;
			}

			.btn-curve{
				opacity: 0;
				transform: translateY(20px);
				transition: all .4s;
				transition-delay: 1s;
			}
		}

		&.swiper-slide-active{
		
			.caption{

				h1{
					transition: all 0s;
					opacity: 1;
					visibility: visible;
	
					.char {
						animation: fadeInUp .5s cubic-bezier(.3, 0, .7, 1) both;
						animation-delay: calc(60ms * var(--char-index));
					} 
				}

				.btn-curve,
				.thin,
				p{
					opacity: 1;
					transform: translateY(0);
				}
			}
		}
	}
}

.pages-header{
	height: 75vh;

	.cont{

		h1{
			font-size: 75px;
			margin-bottom: 20px;
		}

		.path{
			color: #fff;
			font-size: 17px;

			.active{
				color: $main-color;
			}

			span{
				margin: 0 20px;
				font-size: 10px;
			}
		}
	}
}

/* ====================== [ End Slider ] ====================== */