slider.html

<div class="custom-homepage-hero-bg-overlay" style="background-image: 
url(https://rps.charcoal.website/wp-content/uploads/2021/05/rps-arrow-fixed.png); 
background-size: cover !important; 
background-position: top right !important;">
</div>
<video class="custom-homepage-hero-bg" src="https://rps.charcoal.website/wp-content/uploads/2021/03/iStock-1175940323.mp4" autoplay loop playsinline muted>
</video>
<div class="custom-homepage-hero">
	<div class="homepage-slider-container hidden">
		
		<!-- Slides -->
		<div class="homepage-slide">
			<div class="container">
				<h3>
					<strong>RPS Composites</strong> manufactures and services high-performance corrosion resistant tanks, vessels, and piping systems for industrial customers who need to transport, store or process corrosive fluids.
				</h3>
			</div>
		</div>
		<div class="homepage-slide">
			<div class="container">
				<h3>
					<strong>Products</strong>
				</h3>
				<h3>
					Inherently corrosion resistant and designed for high performance, choosing RPS products means longer life and lower lifecycle costs.
				</h3>
				<a style="margin-left: 6.5em !important; z-index: 2;" class="qodef-shortcode qodef-m qodef-button qodef-layout--filled qodef-html--link" href="/products-overview" target="_self" style="background-color: #73CBEA">	<span class="qodef-m-text">
					More
					<svg class="qodef-m-arrowline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63 20" xml:space="preserve">
						<line x1="61.6" y1="10" x2="61.6" y2="10"></line>
						<line x1="62" y1="10" x2="61.6" y2="10"></line>
						<line x1="61.6" y1="10" x2="1" y2="10"></line>
						<path d="M61.6,10"></path>
						<line x1="61.6" y1="10" x2="61.6" y2="10"></line>
						<line class="arrow-up" x1="56.7" y1="5.1" x2="61.6" y2="10"></line>
						<path d="M61.6,10"></path>
						<line x1="61.6" y1="10" x2="61.6" y2="10"></line>
						<line class="arrow-down" x1="61.6" y1="10" x2="56.7" y2="14.9"></line>
						</svg>
					</span>
					</a>	
			</div>
		</div>
		<div class="homepage-slide">
			<div class="container">
				<h3>
					<strong>SERVICES</strong> Available 24/7 for emergency call outs as well as for scheduled turnarounds, sub-contracting, and Long TermService Agreements.
				</h3>
			</div>
		</div>
	</div>
	<div class="hero-footer">
		<a class="slick-left" id="left-arrow">
			<img class="arrow-default" src="/wp-content/uploads/2021/05/leftarrow.png">
			<img class="arrow-secondary" src="/wp-content/uploads/2021/05/leftarrowblue.png">
		</a>
		<div class="direct-links">
			<a class="col-1 slick-nav-1" id="home-link">
				ENGINEERING AND TECHNICAL CENTER
			</a>
			<a class="col-2 slick-nav-2" id="products-link">
				PRODUCTS
			</a>
			<a class="col-3 slick-nav-3" id="services-link">
				SERVICES
			</a>
		</div>
		<a class="slick-right" id="right-arrow">
			<img class="arrow-default" src="/wp-content/uploads/2021/05/rightarrow.png">
			<img class="arrow-secondary" src="/wp-content/uploads/2021/05/rightarrowblue.png">
		</a>
	</div>
</div>
<style>
	.direct-links {
		display: flex;
		width: calc(100vw - 180px);
	}
	.slick-left {
		border-right-style: solid;
		border-right-width: 1px;
		border-right-color: #7e8a9e;
		display: block;
		width: 82px;
	}
	.slick-right {
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: #7e8a9e;
		display: block;
		width: 82px;
	}
	.slick-left img {
		height: 100%;
		width:100%;
		padding: 0px;
		margin: 0px;
	}
	.slick-right img {
		height: 100%;
		width:100%;
		padding: 0px;
		margin: 0px;
	}
	.slick-left:hover .arrow-secondary {
		display:block;
	}
	.slick-left:hover .arrow-default {
		display:none;
	}
	.slick-left .arrow-secondary {
		display:none;
	}
	.slick-right:hover .arrow-secondary {
		display:block;
	}
	.slick-right:hover .arrow-default {
		display:none;
	}
	.slick-right .arrow-secondary {
		display:none;
	}
	@media only screen and (max-width: 1024px) {
		.slick-right {
			display: none;
		}
		.slick-left {
			display: none;
		}
		.hero-footer {
			display: block;
		}
		.hero-footer .col-1 {
			width: 100vw;
			border-right-style: none;
			padding: .5em;
		}
		.hero-footer .col-2 {
			width: 100vw;
			border-right-style: none;
			padding: .5em;
			display: block;
		}
		.hero-footer .col-3 {
			width: 100vw;
			padding: .5em;
		}
		.direct-links {
			width: 100vw;
			display: block;
		}
		.custom-homepage-hero {
			padding-top: 200px;
		}
	}
</style>