:root {
--foxico-thumb-height: 500px; }
.upk-foxico-slider-wrap {
position: relative;
overflow: hidden; }
.upk-foxico-slider-wrap .upk-main-slide .swiper-container {
height: 80vh;
overflow: hidden;
position: relative; }
.upk-foxico-slider-wrap .upk-main-slide .upk-content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 30px 0 70px;
display: inline-flex;
flex-direction: column;
justify-content: center;
overflow: hidden; }
.upk-foxico-slider-wrap .upk-image-wrap {
width: 100%;
height: 100%;
overflow: hidden; }
.upk-foxico-slider-wrap .upk-image-wrap::before {
position: absolute;
content: '';
width: 100%;
height: 100%; }
.upk-foxico-slider-wrap .upk-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle; }
.upk-foxico-slider-wrap .upk-thumbs-slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
height: 100%;
overflow: hidden;
z-index: 1;
display: none; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-content-image-wrap {
position: absolute;
top: 50%;
transform: translateY(-50%); }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-image-wrap {
position: relative; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-image-wrap::before {
height: 0;
bottom: 0;
z-index: 1;
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-image-wrap {
position: relative;
border-radius: 10px;
overflow: hidden; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-img {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 10px; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item {
display: flex;
flex-direction: column; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item.swiper-slide-active .upk-image-wrap::before {
height: 100%;
transition-delay: 1s; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item.swiper-slide-active .upk-img {
transition-delay: .5s; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item.swiper-slide-active .upk-content {
opacity: 1; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
display: inline-flex;
justify-content: space-between;
flex-direction: column;
overflow: hidden;
opacity: 0;
z-index: 1;
padding: 40px; }
.upk-foxico-slider-wrap .upk-pagination-line {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: inline-flex;
justify-content: center;
flex-direction: column;
grid-row-gap: 55px;
z-index: 1;
margin-left: 20px;
width: auto !important; }
.upk-foxico-slider-wrap .upk-pagination-line:before {
position: absolute;
content: '';
top: 0;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.522);
height: 100%;
width: 1px;
z-index: -1; }
.upk-foxico-slider-wrap .upk-pagination-line .swiper-pagination-bullet {
font-size: 6px;
color: #fff;
display: flex;
align-items: center;
font-weight: 700;
justify-content: center;
padding: 7px;
background: #818a91;
opacity: 1;
z-index: 2;
transform: scale(0.5);
transition: all .3s ease-in-out; }
.upk-foxico-slider-wrap .upk-pagination-line .swiper-pagination-bullet.swiper-pagination-bullet-active {
transform: scale(2.5); }
.upk-foxico-slider-wrap .upk-category {
overflow: hidden; }
.upk-foxico-slider-wrap .upk-meta {
overflow: hidden; }
.upk-foxico-slider-wrap .upk-title {
font-size: 35px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 12px; }
.upk-foxico-slider-wrap .upk-title a {
color: #fff;
text-decoration: none;
transition: all .3s ease-in-out; }
.upk-foxico-slider-wrap .upk-title a:hover {
color: rgba(223, 7, 7, 0.959); }
.upk-foxico-slider-wrap .upk-text {
font-size: 12px;
color: #c7d2e5;
line-height: 1.9;
margin-bottom: 20px; }
.upk-foxico-slider-wrap .upk-text p {
margin: 0; }
.upk-foxico-slider-wrap .upk-link-btn a {
text-decoration: none;
color: #fff;
padding: 12px 24px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
display: inline-flex;
align-items: center;
position: relative;
background-color: #000000;
border-radius: 80px;
overflow: hidden; }
.upk-foxico-slider-wrap .upk-link-btn a::before {
content: '';
position: absolute;
transition: all 300ms ease;
background-color: rgba(223, 7, 7, 0.959);
left: 0;
top: 0;
width: 0px;
height: 100%; }
.upk-foxico-slider-wrap .upk-link-btn a::after {
content: '';
position: absolute;
transition: all 300ms ease; }
.upk-foxico-slider-wrap .upk-link-btn a:hover::before {
width: 100%; }
.upk-foxico-slider-wrap .upk-link-btn a:hover span {
transform: translateX(-10px); }
.upk-foxico-slider-wrap .upk-link-btn a:hover span:before {
transition-delay: 200ms; }
.upk-foxico-slider-wrap .upk-link-btn a:hover span::after, .upk-foxico-slider-wrap .upk-link-btn a:hover span:before {
opacity: 1;
transform: translate(0px, -50%) rotate(45deg); }
.upk-foxico-slider-wrap .upk-link-btn a span {
transition: all 300ms ease;
position: relative;
z-index: 99; }
.upk-foxico-slider-wrap .upk-link-btn a span:before, .upk-foxico-slider-wrap .upk-link-btn a span::after {
content: '';
position: absolute;
transition: all 300ms ease;
top: 50%;
width: 7px;
height: 7px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: translate(20px, -50%) rotate(45deg);
opacity: 0; }
.upk-foxico-slider-wrap .upk-link-btn a span::before {
right: -15px; }
.upk-foxico-slider-wrap .upk-link-btn a span::after {
right: -10px; }
.upk-foxico-slider-wrap .upk-category a {
color: #f6f5fd;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
font-weight: 500;
transition: all .3s ease-in-out; }
.upk-foxico-slider-wrap .upk-category a:hover {
color: rgba(223, 7, 7, 0.959); }
.upk-foxico-slider-wrap .upk-category a + a {
margin-left: 8px; }
.upk-foxico-slider-wrap .upk-meta {
color: #b2aecf;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
font-weight: 500; }
.upk-foxico-slider-wrap .upk-meta .upk-date {
opacity: 0.7;
margin-top: 10px; }
.upk-foxico-slider-wrap .upk-author-wrap a {
color: #f3f2f8;
text-decoration: none;
transition: all .3s ease-in-out; }
.upk-foxico-slider-wrap .upk-author-wrap a:hover {
color: rgba(223, 7, 7, 0.959); }
.upk-foxico-slider-wrap .bdt-nav-and-pg-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
margin: 0 40px 40px 0px;
display: inline-flex;
align-items: center;
justify-content: space-between; }
.upk-foxico-slider-wrap .upk-thumb-pagination {
color: rgba(255, 255, 255, 0.493);
font-size: 18px;
position: relative;
display: flex;
grid-column-gap: 55px; }
.upk-foxico-slider-wrap .upk-thumb-pagination::before {
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 1px;
background: rgba(255, 255, 255, 0.493); }
.upk-foxico-slider-wrap .upk-thumb-pagination .upk-current-count {
color: #fff; }
.upk-foxico-slider-wrap .upk-navigation-wrap {
display: inline-flex;
grid-column-gap: 10px;
flex-direction: row-reverse; }
.upk-foxico-slider-wrap .upk-navigation-button {
background: #818a91;
padding: 14px 18px;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: all .3s ease; }
.upk-foxico-slider-wrap .upk-navigation-button:hover {
background-color: rgba(223, 7, 7, 0.959); }
.upk-foxico-slider-wrap .upk-navigation-button svg {
color: #fff;
width: 20px;
height: 20px;
vertical-align: middle; }
.upk-foxico-slider-wrap .upk-number-pagination {
position: absolute;
bottom: 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.493);
letter-spacing: 2px;
display: none;
z-index: 11;
transform: rotate(-90deg);
left: -20px;
width: 50px; }
.upk-foxico-slider-wrap .upk-number-pagination .swiper-pagination-current {
color: #fff; }
.upk-foxico-slider-wrap .upk-number-pagination span {
margin: 0 5px; }
@media (min-width: 768px) {
.upk-foxico-slider-wrap .upk-pagination-line {
margin-left: 50px; }
.upk-foxico-slider-wrap .upk-main-slide .swiper-container {
height: 90vh; }
.upk-foxico-slider-wrap .upk-main-slide .upk-content {
padding-left: 115px;
width: calc(100% - var(--upk-thumbs-width, 40%)); }
.upk-foxico-slider-wrap .upk-thumbs-slide {
display: inherit;
width: var(--upk-thumbs-width, 40%); }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-img {
height: 280px; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item.swiper-slide-active .upk-img {
height: 380px; }
.upk-foxico-slider-wrap .upk-text {
font-size: 15px;
margin-bottom: 40px; }
.upk-foxico-slider-wrap .upk-title {
font-size: 48px;
margin: 0 0 20px; }
.upk-foxico-slider-wrap .upk-link-btn a {
padding: 12px 30px;
font-size: 14px; }
.upk-foxico-slider-wrap .upk-number-pagination {
margin: 0 58px 40px;
display: flex; } }
@media (min-width: 1024px) {
.upk-foxico-slider-wrap .upk-pagination-line {
margin-left: 40px; }
.upk-foxico-slider-wrap .upk-main-slide .swiper-container {
height: 100vh; }
.upk-foxico-slider-wrap .upk-main-slide .upk-content {
padding-left: 100px; }
.upk-foxico-slider-wrap .bdt-nav-and-pg-wrap {
margin: 0 70px 70px 0px; }
.upk-foxico-slider-wrap .upk-number-pagination {
margin: 0 50px 70px; } }
@media (min-width: 1440px) {
.upk-foxico-slider-wrap .upk-pagination-line {
margin-left: 100px; }
.upk-foxico-slider-wrap .upk-main-slide .upk-content {
padding-left: 260px; }
.upk-foxico-slider-wrap .upk-title {
font-size: 115px; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-img {
height: 430px; }
.upk-foxico-slider-wrap .upk-thumbs-slide .upk-item.swiper-slide-active .upk-img {
height: 500px; }
.upk-foxico-slider-wrap .upk-number-pagination {
margin: 0 107px 77px; } }