.splide{
position: relative;
height: 360px;
width: 1800px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.splide__slide{
height: 400px;
position: relative;
}
.slide-container{
position: relative;
height: 100%;
}
.slide-content{
position: absolute;
width: 66%;
left: 177px;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-shadow: 1.05px 1.05px 0 rgba(0,0,0,1);
z-index: 5;
}
.slide-content h1{
color: #fff;
margin: 0 0 10px;
font-weight: 800;
line-height: 47px;
font-size: 44px;
padding-bottom: 6px;
border-bottom: 10px solid #fff;
display: table;
}
.slide-content p{
color: #fff;
line-height: 32px;
font-size: 17px;
margin: 0;
font-weight: 600;
}
.slide-content p strong{
color: #ffbc2c;
}
.slide-content a,
.slide-button{
display: inline-block;
margin: 4px auto 0 auto;
color: #F7A900;
background-color: rgba(0,0,0,.7);
font-weight: 600;
padding: 2px 12px;
text-decoration: none;
}
.slide-content a:hover,
.slide-button:hover{
color: #F7A900;
text-decoration: underline;
}
.splide__slide.slide1,
.splide__slide--clone.slide1{
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.8)), url("/img/coffee/etyurdfhgjdfghdfghggg.jpg") 50% 50% / cover;
}
.splide__slide.slide2,
.splide__slide--clone.slide2{
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.8)), url("/img/kayak/yellow-kayak-1st-person.jpg") 50% 0% / cover;
}
.splide__slide.slide3,
.splide__slide--clone.slide3{
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.8)), url("/img/atv-ai.webp") 50% 0% / cover;
}
.splide__slide.slide4,
.splide__slide--clone.slide4{
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.8)), url("/departments/llcc/img/llcc-lodge-lq.webp") 50% 50% / cover;
}
.splide__arrows{
z-index: 10;
}
.splide__arrow{
width: 119px;
height: 119px;
background: rgba(255,255,255,.3);
border: 1px solid rgba(255,255,255,.18);
opacity: 1;
border-radius: 0;
top: 50%;
transform: translateY(-50%);
padding: 26px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 60px;
background-origin: content-box;
outline: none;
box-sizing: border-box;
}
.splide__arrow svg{
display: none;
}
.splide__arrow--prev{
left: 28px;
background-image: url("/img/arrows/thin/left-arrow.png");
}
.splide__arrow--next{
right: 28px;
background-image: url("/img/arrows/thin/right-arrow.png");
}
.splide__arrow:hover{
background-color: rgba(255,255,255,.4);
}
.splide__pagination{
margin: 0;
bottom: 5px;
padding: 0;
position: absolute;
width: 100%;
display: flex;
justify-content: center;
gap: 5px;
z-index: 1;
}
.splide__pagination button,
.splide__pagination__page{
display: inline-block;
width: 67px;
height: 67px;
background-color: rgba(0,0,0,.3);
border: 1px solid rgba(0,0,0,.3);
margin: 0;
position: relative;
border-radius: 0;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.splide__pagination button:hover,
.splide__pagination__page:hover{
background: rgba(0,0,0,.7);
transform: none;
}
.splide__pagination button::after,
.splide__pagination__page::after{
content: '';
border: 4px solid rgba(255,255,255,.4);
border-radius: 0;
height: 11px;
width: 11px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.splide__pagination button.is-active,
.splide__pagination__page.is-active{
background: rgba(0,0,0,.8);
transform: none;
}
.splide__pagination button.is-active::after,
.splide__pagination__page.is-active::after{
border-color: rgba(255,255,255,1);
}
.official-website{
text-align: center;
position: absolute;
width: calc(100% - 24px);
background-color: rgba(0,0,0,.5);
padding: 7px 12px;
color: #fff;
font-weight: 800;
text-transform: uppercase;
font-size: 15px;
z-index: 1;
top: 0;
}