.btn-slider {
display: inline-block;
padding: 10px 30px;
font-size: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: .3125rem;
background-color: #377dff;
color: #ffffff;
box-shadow: 0 4px 11px rgba(55,125,255,.35);
}
.btn-slider:hover {
background-color:#EBF2FF;
color: #377dff;
}
.slideshow {
overflow: hidden;
position: relative;
width: 100%;
height: 70vh;
margin-top: 95px;
}
.slideshow .slideshow-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slideshow .slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slideshow .slide {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.slideshow .slide.is-active {
display: block;
}
.slideshow .slide.is-loaded {
opacity: 1;
}
.slideshow .slide .caption {
padding: 0 100px;
}
.slideshow .slide .image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
z-index: 1;
background-size: cover;
image-rendering: optimizeQuality;
}
.slideshow .slide .image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.slideshow .slide .image {
width: 100%;
width: 100%;
object-fit: cover;
height: 100%;
}
.slideshow .slide-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow .slide .title {
margin: 0 auto 15px;
max-width: 1000px;
font-size: 36px;
font-weight: 700;
border-bottom: 2px solid #fdb913;
padding-bottom: 15px;
}
.slideshow .slide .subtitle {
margin: 0 auto 15px;
max-width: 1000px;
font-size: 20px;
font-weight: normal!important;
}
.slideshow .slide .text {
margin: 0 auto;
max-width: 1000px;
font-size: 18px;
line-height: 1.4;
}
.slideshow .pagination {
height: 12px;
cursor: default;
z-index: 2;
text-align: center;
width: calc(100px - 30px);
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 30%;
}
.slideshow .pagination .item {
display: inline-block;
padding: 15px 10px;
position: relative;
width: 15px;
height: 15px;
border-radius: 50%;
cursor: pointer;
text-indent: -999em;
z-index: 1;
}
.slideshow .pagination .item+.page {
margin-left: -2px;
}
.slideshow .pagination .item::before {
content: "";
display: block;
position: absolute;
top: 15px;
left: 5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transition: background 0.2s ease;
}
.slideshow .pagination .item::after {
width: 0;
background: #fff;
z-index: 2;
transition: width 0.2s ease;
}
.slideshow .pagination .item:hover::before,
.slideshow .pagination .item.is-active::before {
background-color: #fff;
}
.slideshow .arrows .arrow {
margin: -33px 0 0;
padding: 20px;
position: absolute;
top: 50%;
cursor: pointer;
z-index: 3;
}
.slideshow .arrows .prev {
left: 30px;
}
.slideshow .arrows .prev:hover .svg {
left: -10px;
}
.slideshow .arrows .next {
right: 30px;
}
.slideshow .arrows .next:hover .svg {
left: 10px;
}
.slideshow .arrows .svg {
position: relative;
left: 0;
width: 14px;
height: 26px;
fill: #fff;
transition: left 0.2s ease;
}