/*--------------------------------------------------------------
#0.4	hero slider
--------------------------------------------------------------*/
.hero-slider {
	width: 100%;
	height: 700px;
	display: flex;
	position: relative;
	z-index: 0;

	@include media-query(991px) {
		height: 600px;
	}

	@include media-query(767px) {
		height: 500px;
	}
	
	.swiper-slide {
		overflow: hidden;
		color: #fff;
	}

	.swiper-container,
	.hero-container {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		overflow: inherit;
	}

	.slide-inner,
	.hero-inner {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: left;
	}


	// slider controls
	.swiper-button-prev,
	.swiper-button-next {
		background: rgba(255,255,255, 0.3);
		width: 60px;
		height: 60px;
		line-height: 60px;
		margin-top: -30px;
		text-align: center;
		border-radius: 60px;

		@include media-query(767px) {
			display: none;
		}
	} 

	.swiper-button-prev {
		left: 25px;

		&:before {
			font-family: "themify";
		    content: "\e629";
		    font-size: 20px;
		    color: #fff;
		}
	}

	.swiper-button-next {
		right: 25px;

		&:before {
			font-family: "themify";
		    content: "\e628";
		    font-size: 20px;
		    color: #fff;
		}
	}
}


/*--------------------------------------------------------------
	#hero-style-1
--------------------------------------------------------------*/
.hero-style-1 {
	height: calc(100vh - 160px);
	min-height: 627px;

	@include media-query(991px) {
		height: 500px;
		min-height: auto;
		text-align: center;
	}

	@include media-query(767px) {
		height: 400px;
	}

	.container-full {
		width: 100%;
		padding: 100px;

		@include media-query(767px) {
			padding: 0 25px;
		}
	}


	.slide-title {
		max-width: 655px;

		@include media-query(1300px) {
			max-width: 555px;
		}

		h2 {
			font-size: 100px;
			font-size: calc-rem-value(100);
			color: $white;
			margin: 0.2em 0 0.61em;
			line-height: 1em;

			@include media-query(1300px) {
				font-size: 75px;
				font-size: calc-rem-value(75);
			}

			@include media-query(991px) {
				font-size: 50px;
				font-size: calc-rem-value(50);
			}

			@include media-query(767px) {
				font-size: 40px;
				font-size: calc-rem-value(40);
			}

			@include media-query(450px) {
				font-size: 35px;
				font-size: calc-rem-value(35);
			}
		}
	}

	.slide-author {
		max-width: 655px;
		position: relative;
		
		img {
			border-radius: 50%;
		}

		p {
			font-size: 14px;
			font-size: calc-rem-value(14);
			color: $white;
			position: absolute;
			left: 80px;
			top: 22px;
			
			a {
				color: $white;
				text-decoration: underline;
			}

		}
	}

	.slide-btns {
		a {
			font-size: 14px;
			font-weight: 500;
			color: $white;
			text-transform: uppercase;

			@include media-query(767px) {
				font-size: 12px;
				font-size: calc-rem-value(12);
			}
		}

		a:hover {
			color: $theme-primary-color;

			path,
			g {
				fill: red;
				stroke: red;
			}
		}

		svg {
			position: relative;
			top: 1px;
			left: 3px;
		}
	}

	.container {
		position: relative;

		@include widther(992px) {
			padding-top: 77px;
		}
	}

	

	.swiper-button-next,
	.swiper-button-prev {
		display: none;
	}

	/*** swiper custom pagination ***/
	.swiper-cust-pagination { 
		width: 430px; 
		height: 100%;
		z-index: 2; 
		margin: 0; 
		position: absolute;
		right: 0;
		top: 0;
		left: auto;
		bottom: auto;

		@include media-query(1300px) {
			width: 400px;
		}

		> div + div {
			border-left: 1px solid transparentize($white, 0.8);
		}

		@include media-query(991px) {
			display: none;
		}
	}

	.swiper-pagination-bullet { 
		width: 100%; 
		height: 33.33%; 
		flex: 1; 
		background: transparentize($black, 0.6); 
		border-radius: 0; 
		padding: 0; 
		position: relative;
		font-size: 15px;
		font-size: calc-rem-value(15);
		padding: 40px 50px;
		opacity: 1;
		margin: 0 !important;
		display: table;
		border-bottom: 1px solid transparentize($white, 0.8);

		> div {
			display: table-cell;
			vertical-align: middle;
		}

		button {
			background: $white;
			font-size: 11px;
			font-weight: 500;
			color: $text-color;
			padding: 5px 15px;
			border-radius: 50px;
			text-transform: uppercase;
			border: 0;
		}

		h4 {
			font-size: 18px;
			margin: 1em 0 1em;
			line-height: 1.4em;
			color: $white;

			@include media-query(1300px) {
				font-size: 16px;
			}
		}

		ul {
			overflow: hidden;

			li {
				font-size: 12px;
				text-transform: uppercase;
				float: left;
				position:relative;
				color: $white;
			}

			li + li {
				margin-left: 40px;
				position: relative;

				&:before {
					content: "";
					background: $white;
					width: 5px;
					height: 5px;
					border-radius: 5px;
					position: absolute;
					left: -20px;
					top: 5px;
				}
			}
		}
	}

	.swiper-pagination-bullet-active { 
		opacity: 1;
		background: transparentize($white, 0.5);
		color: $white;
		border-left: 1px solid transparentize($white, 0.8);
	}
}