File: /home/thuexe247c/public_html/wp-content/plugins/sliderkits/assets/css/widgets/accordion-slider.css
.sk-vertical-accordion {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.sk-vertical-accordion .sk-item__container {
position: relative;
z-index: 1;
}
.sk-vertical-accordion .sk-overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}
.sk-vertical-accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.sk-vertical-accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 450px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: all 500ms ease;
}
.sk-vertical-accordion ul li div.sk-item__container {
display: block;
overflow: hidden;
width: 100%;
}
.sk-vertical-accordion ul li div.sk-item__container {
display: block;
height: auto;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
transition: all 200ms ease;
}
.sk-vertical-accordion ul li .sk-item__container * {
opacity: 1;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.sk-vertical-accordion ul li .sk-heading {
text-overflow: clip;
font-size: 24px;
margin-bottom: 2px;
}
.sk-vertical-accordion ul li .sk-heading:before {
content: attr(data-short);
font-size: 32px;
}
.sk-vertical-accordion ul li .sk-heading span {
display: none;
}
.sk-vertical-accordion ul li .sk-content {
font-size: 14px;
}
.sk-vertical-accordion ul:hover li, .sk-vertical-accordion ul:focus-within li {
width: 8%;
}
.sk-vertical-accordion ul li:focus {
outline: none;
}
.sk-vertical-accordion ul:hover li:hover,
.sk-vertical-accordion ul li:focus, .sk-vertical-accordion ul:focus-within li:focus {
width: 60%;
}
.sk-vertical-accordion ul:hover li:hover .sk-heading span,
.sk-vertical-accordion ul li:focus .sk-headingspan,
.sk-vertical-accordion ul:focus-within li:focus .sk-heading span{
display: block;
}
.sk-vertical-accordion ul:hover li:hover .sk-heading:before,
.sk-vertical-accordion ul li:focus .sk-heading:before,
.sk-vertical-accordion ul:focus-within li:focus .sk-heading:before{
display: none;
}
.sk-vertical-accordion ul:hover li:hover a,
.sk-vertical-accordion ul li:focus a, .sk-vertical-accordion ul:focus-within li:focus a {
background: rgba(0, 0, 0, 0.4);
}
.sk-vertical-accordion ul:hover li {
width: 8%;
}
.sk-vertical-accordion ul:hover li:hover {
width: 60%;
transition: all 500ms ease;
}
.sk-vertical-accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 767px) {
.sk-vertical-accordion ul li{
position: relative;
height: auto;
display: block;
}
.sk-vertical-accordion ul li a {
background-color: rgba(0,0,0,.4);
}
.sk-vertical-accordion ul li .sk-item__container {
padding: 50px 20px;
}
.sk-vertical-accordion ul:hover li:hover {
height: 450px;
transition: all 500ms ease;
}
.sk-vertical-accordion ul:hover li:hover div a {
padding: 20px 20px;
}
.sk-vertical-accordion ul li,
.sk-vertical-accordion ul:hover li:hover,
.sk-vertical-accordion ul:hover li,
.sk-vertical-accordion ul:focus-within li {
width: 100%;
}
}