.ep-accordion-container {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.ep-accordion-container ul {
width: 100%;
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.ep-accordion-container ul li {
flex-grow: 1;
position: relative;
width: 16.666%;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.ep-accordion-container ul li.active {
width: 100%;
}
.ep-accordion-container ul li.active span * {
opacity: 1;
transform: translateX(0);
}
.ep-accordion-container ul li.active span .ep-accordion-content a {
display: inline-block;
}
.ep-accordion-container ul li div {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.ep-accordion-container ul li div span {
display: table;
height: 100%;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
text-decoration: none;
transition: all 200ms ease;
}
.ep-accordion-container ul li div span * {
opacity: 0;
margin: 0;
width: 100%;
position: relative;
z-index: 5;
overflow: hidden;
transform: translateX(-100%);
transition: all 400ms ease;
}
.ep-accordion-container ul li div span .ep-accordion-content {
padding: 10px;
display: table-cell;
vertical-align: bottom;
}
.ep-accordion-container ul li div span .ep-accordion-content a {
display: none;
}
.ep-accordion-container ul:hover li,
.ep-accordion-container ul:focus-within li {
width: 8%;
}
.ep-accordion-container ul li:focus {
outline: none;
}
.ep-accordion-container ul:hover li:hover,
.ep-accordion-container ul li:focus,
.ep-accordion-container ul:focus-within li:focus {
width: 60%;
}
.ep-accordion-container ul:hover li:hover span *,
.ep-accordion-container ul li:focus span *,
.ep-accordion-container ul:focus-within li:focus span * {
opacity: 1;
transform: translateX(0);
}
.ep-accordion-container ul:hover li:hover span .ep-accordion-content a,
.ep-accordion-container ul li:focus span .ep-accordion-content a,
.ep-accordion-container ul:focus-within li:focus span .ep-accordion-content a {
display: inline-block;
}
.ep-accordion-container ul:hover li {
width: 8%;
}
.ep-accordion-container ul:hover li span * {
opacity: 0 !important;
}
.ep-accordion-container ul:hover li:hover {
width: 60%;
}
.ep-accordion-container ul:hover li:hover span * {
opacity: 1 !important;
transform: translateX(0);
}
.ep-accordion-container ul:hover li:hover span .ep-accordion-content a {
display: inline-block;
}
.ep-accordion-container ul:hover li span,
.ep-accordion-container ul:focus li span {
background: transparent;
}
@media screen and (max-width: 767px) {
.ep-accordion-container {
height: auto !important;
}
.ep-accordion-container ul {
flex-direction: column;
}
.ep-accordion-container ul li {
display: block;
width: 100%;
}
.ep-accordion-container ul:hover li:hover,
.ep-accordion-container ul li:focus,
.ep-accordion-container ul:focus-within li:focus {
width: 100%;
}
.ep-accordion-container ul:hover li {
width: 100%;
}
.ep-accordion-container ul:hover li:hover {
width: 100%;
}
}