:root {
--eplistingcarousel-height: 500px;
}
@media (max-width: 768px) {
:root {
--eplistingcarousel-height: 300px;
}
} .eplistingcarousel {
position: relative;
}  .is-control {
background: none;
color: rgba(0,0,0,.7);
border: 0;
cursor: pointer;
transition: all .2s linear;
}
.is-control:focus {
outline: none;
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
} .rotation-button {
position: absolute;
bottom: 5px;
left: 5px;
padding: 10px 15px;
z-index: 1;
font-size: 20px;    
border-radius: 5px;
}
.rotation-button .pause-container, 
.rotation-button .resume-container {
display: none;
}
.rotation-button .pause-container.is-visible, 
.rotation-button .resume-container.is-visible {
display: block;
} .previous-button {
position: absolute;
left: 0;
top: calc(var(--eplistingcarousel-height)/2 - 40px);
padding: 5px 15px;
z-index: 1;
font-size: 40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: 0;
} .next-button {
position: absolute;
right: 0;
top: calc(var(--eplistingcarousel-height)/2 - 40px);
padding: 5px 15px;
z-index: 1;
font-size: 40px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: 0;
} .eplistingslides {
overflow: hidden;
border-radius:20px;
}
.eplistingslides:focus {
outline: none;
}
.eplistingslides:focus:before {
content: '';
display: block;
width: 100%;
height: 100%;
z-index: 100;
outline: 2px solid royalblue;
outline-offset: 2px;
}
.eplistingslides .slide {
position: relative;
height: var(--eplistingcarousel-height);
width: 100%;
}
.eplistingslides .slide.is-hidden {
visibility: hidden;
}
.eplistingslides .slide .background-image {
width: 100%;
height: 100%;
object-fit: cover;
} .navigation {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;  
list-style: none;
margin: 0;
padding: 0;
}
.navigation .dot {
display: inline;
margin: 0 4px;
} .navigation .eplistingdot-button {
background-color: rgba(0,0,0,.3);
border: 0;
width: 15px!important;
height: 15px!important;
border-radius: 15px;
cursor: pointer;
opacity: .7;
transition: transform .2s linear;
} .navigation .eplistingdot-button:focus {
box-shadow: 0 0 0 1px white, 0 0 0 4px hsl(204, 86%, 53%);
outline: none;
} .navigation .eplistingdot-button:hover {
opacity: 1;
} .navigation .dot .eplistingdot-button[aria-current="true"] {
background-color: rgba(0,0,0,1);
transform: scale(1.4);
} .credits {
margin-top: 20px;
float: right;
opacity: 1;
}