.shdw {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.69) 90%, rgba(0, 0, 0, 0.9) 100%) !important;
}

.current {
    position: relative;
}

.episode-list-container {
    margin: 10px;
    border-radius: 2px;
    clear: both;
}

@media (max-width: 480px) {
    .episode-list-container {
        margin-bottom: 0;
    }
}

.episode-container {
    width: 100%;
    box-sizing: border-box;
}

.episode-slider-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.episode-slider-wrapper span {
    font-size: 18px;
}
#episode_slider,
#episode_slider-xxx {
    position: relative;
    height: 250px;
    padding: 0;
    overflow: hidden;
}

#episode_slider li,
#episode_slider-xxx li {
    width: 168px;
    max-width: 100%;
    position: absolute;
    list-style: none;
    transition: left 0.75s;
}

#episode_slider article img,
#episode_slider-xxx article img {
    width: 168px;
    height: 250px;
    border-radius: 4px;
    z-index: 1;
}

article .overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(144, 144, 144, 0.5);
    height: 100%;
    width: 100%;
}

article.current .overlay {
    z-index: 6;
    display: block;
}

.carousel-item .overlay p {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    margin-top: -15px;
}

.episodic-control-buttons a {
    position: absolute;
    font-size: 4rem;
    z-index: 10;
    text-align: center;
    color: white;
}

.episodic-control-buttons a:hover,
.episodic-control-buttons a:focus,
.episodic-control-buttons a:active {
    color: #d25c5c;
    text-decoration: none;
    border: none;
    outline: none;
    box-shadow: none;
}

.episodic-control-buttons .control-prev,
.episodic-control-buttons .control-prev-xxx {
    left: 0;
    width: 40px;
    top: 0;
    height: 250px;
    padding-top: 4rem;
    text-decoration: none;
}

.episodic-control-buttons .control-next,
.episodic-control-buttons .control-next-xxx {
    right: 0;
    width: 40px;
    top: 0;
    height: 250px;
    padding-top: 4rem;
    text-decoration: none;
}

.episodic-control-buttons .control-prev:hover,
.episodic-control-buttons .control-prev-xxx:hover,
.episodic-control-buttons .control-next:hover,
.episodic-control-buttons .control-next-xxx:hover {
  background-color: #3f3f3f;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.episodic-control-buttons .control-prev.disabled,
.episodic-control-buttons .control-prev-xxx.disabled,
.episodic-control-buttons .control-next.disabled,
.episodic-control-buttons .control-next-xxx.disabled {
  background-color: #cccccc;
  color: #999999;
  cursor: not-allowed;
}

/* Disable hover effect for disabled buttons */
.episodic-control-buttons .control-prev.disabled:hover,
.episodic-control-buttons .control-prev-xxx.disabled:hover,
.episodic-control-buttons .control-next.disabled:hover,
.episodic-control-buttons .control-next-xxx.disabled:hover {
  background-color: #cccccc;
  color: #999999;
  cursor: not-allowed;
}