/* ******************************** */
/*         CAROUSEL STYLING         */
/* ******************************** */
.splide__arrow svg {
   display: none;
}

.horizontal-full.carousel-section:nth-child(1) {
   padding-top: 1.5rem;
}


.horizontal-full.carousel-section:nth-last-child(1) {
   padding-bottom: 1.5rem;
}

.content-carousel {
   position: relative;
}

.content-carousel header {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: center;
   padding-bottom: 1rem;
}

.content-carousel #carousel-heading {
   font-weight: 700;
   font-size: var(--text-xl);
   color: var(--base-content);
   font-family: var(--heading-font);
}

.content-carousel .view-all-link {
   flex-shrink: 0;
   text-decoration: none;
   color: var(--base-emphasis);
   border: 1px solid var(--base-content);
   padding: .125rem .75rem;
   border-radius: 1.5rem;
   background-color: transparent;
   font-size: var(--text-sm);
   font-weight: 500;
}

.content-carousel .view-all-link:hover {
   background-color: var(--base-01);
}

.content-carousel .view-all-link i {
   margin-left: .25rem;
}

.content-carousel .splide__arrow--prev {
   left: 0;
}

.content-carousel .splide__arrow--next {
   right: 0;
}

.content-carousel:hover .splide__arrow {
   opacity: 1;
   visibility: visible;
}

.content-carousel .splide__arrow {
   position: absolute;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 4.5rem;
   width: 1.5rem;
   border-radius: .25rem;
   border: none;
   background-color: rgba(50, 64, 77, 0.40);
   color: var(--dark-content);
   opacity: 0;
   transition: var(--three);
   transform: translateY(-50%);
   top: calc(var(--image-height) / 2);
}

.content-carousel:hover .splide__arrow {
   background-color: rgba(50, 64, 77, 0.40);
}

.content-carousel .splide__arrow:hover {
   background-color: rgba(50, 64, 77, 0.40);
}

.content-carousel .splide__arrow i {
   color: var(--base-01);
}

.content-carousel .splide__track {
   transition: var(--three);
   padding-right: 0px !important;
}

.content-carousel .splide__pagination {
   justify-content: end;
   gap: .25rem;
}

.content-carousel .splide__pagination__page.is-active {
   background-color: var(--primary);
   width: 1.5rem
}

.content-carousel .splide__pagination__page {
   height: .25rem;
   width: .5rem;
   border-radius: .125rem;
   border: none;
   background-color: rgba(34, 38, 59, 0.5);
   transition: var(--five);
}

.horizontal-full {
   padding: .75rem;
}

/* ******************************** */
/*            MEDIA STYLING         */
/* ******************************** */

.splide__slide {
display: flex;
}
.media-container,
.person-container {
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--base-01);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.075);
    margin-bottom: 1rem;
    transition: 0.2s ease-in-out;
}

.media-details-container {
   margin-top: .5rem;
}

.media-container a,
.person-container a {
   text-decoration: none;
}


.media-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border-radius: 0rem;
   margin-bottom: .5rem;
   line-height: 1.3;
   display: block;
}
.article-Contributor .thumb-img-container,
.article-Speaker .thumb-img-container {
    aspect-ratio: 1;
    margin: 0 21.875%;
    border-radius: 100%;
    padding: .5rem .25rem 0;
}
.article-Contributor .thumb-img-overlay,
.article-Speaker .thumb-img-overlay {
   justify-content: center;
}
.person-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 1 / 1;
   border-radius: 100%;
   margin-bottom: .5rem;
   line-height: 1.3;
   border: 2px solid var(--base-05);
}
.media-container .thumb-img {
   object-fit: cover;
   height: 100%;
   width: 100%;
   transition: var(--three);
   transform: scale(1);
}

.media-container:hover .thumb-img {
   transform: scale(1.1);
}

.person-container .thumb-img-container .thumb-img {
   object-fit: cover;
   height: 100%;
   width: 100%;
}

.media-container:hover .thumb-img-overlay,
.person-container:hover .thumb-img-overlay {
   visibility: visible;
   opacity: 1;
}

.person-carousel .thumb-img-overlay {
   justify-content: center;
   border-radius: 100%;
   aspect-ratio: 1;
   height: 100%;
   margin: auto;
}

.media-container .thumb-img-overlay,
.person-container .thumb-img-overlay {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   align-items: end;
   padding: .5rem;
   gap: .25rem;
   background: rgb(34, 38, 72);
   background: -moz-linear-gradient(180deg, rgba(34, 38, 72, 0) 0%, rgba(34, 38, 72, 0.5) 80%);
   background: -webkit-linear-gradient(180deg, rgba(34, 38, 72, 0) 0%, rgba(34, 38, 72, 0.5) 80%);
   background: linear-gradient(180deg, rgba(34, 38, 72, 0) 0%, rgba(34, 38, 72, 0.5) 80%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222648", endColorstr="#222648", GradientType=1);
   transition: var(--three);
   z-index: 1;
}

.person-container .thumb-img-overlay {
   justify-content: center;
}

.media-container .thumb-img-overlay button,
.person-container .thumb-img-overlay button {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
   width: 2.5rem;
   height: 2.5rem;
   border: none;
   border-radius: 100%;
   color: var(--base-content);
   position: relative;
   background-color: var(--base-01);
   transition: var(--three);
}

.media-container .thumb-img-overlay button:hover,
.media-container .thumb-img-overlay button:focus,
.person-container .thumb-img-overlay button:hover,
.person-container .thumb-img-overlay button:focus {
   background-color: var(--border-color);
}

.media-container .thumb-img-overlay .favorite-btn i::before,
.person-container .thumb-img-overlay .favorite-btn i::before {
   transition: var(--three);
}

.media-container .thumb-img-overlay .favorite-btn.isfavorite i::before,
.person-container .thumb-img-overlay .favorite-btn.isfavorite i::before {
   font-weight: 900;
   transition: var(--three);
}

.media-container .thumb-img-overlay .favorite-btn.isfavorite,
.person-container .thumb-img-overlay .favorite-btn.isfavorite {
   animation: pop 0.3s ease;
   background-color: var(--base-02);
}

@keyframes pop {
   0% {
      transform: scale(1);
      /* Start at original size */
   }

   50% {
      transform: scale(1.1);
      /* Scale up to 110% */
   }

   100% {
      transform: scale(1);
      /* Scale back to original size */
   }
}

.duration-count-container {
   position: absolute;
   bottom: .5rem;
   right: .5rem;
   font-size: var(--text-xs);
   background-color: rgba(34, 38, 72, 0.66);
   color: var(--dark-content);
   padding: 4px 4px 4px 4px;
   border-radius: .25rem;
   line-height: 1;
   z-index: 1;
}

.media-container .progress-indicator-container,
.person-container .progress-indicator-container {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: .2rem;
   background-color: rgba(34, 38, 59, 0.5);
   z-index: 1;
}

.media-container .progress-indicator,
.person-container .progress-indicator {
   background-color: var(--primary);
   height: 100%;
}

.media-container p,
.person-container p {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   font-size: var(--text-xs);
   color: var(--base-mute);
   line-height: 1.3;
   margin-top: .175rem;
}

.media-container h3,
.person-container h3 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   font-size: var(--text-sm);
   font-weight: 600;
   line-height: 1.3;
}

.carousel {
   --padding: 1.5rem;
   --image-width: calc(100vw - var(--padding));
   --image-height: calc(var(--image-width) * 0.5625);
}

.splide__arrows {
   position: relative;
}

.splide__arrow:disabled {
   display: none;
}

.no-results-text {
   color: var(--base-mute);
   font-size: var(--text-sm);
}

@media only screen and (min-width: 360px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .carousel {
      --padding: 2.25rem;
      --image-width: calc((100vw - var(--padding)) / 2);
      --image-height: calc(var(--image-width) * 0.5625);
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
   .person-carousel .thumb-img-overlay {
      padding-bottom: .75rem
   }
}

@media only screen and (min-width: 500px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 640px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .horizontal-full {
      padding: 1.25rem 1.25rem;
   }

   .carousel {
      --padding: 3.25rem;
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 768px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .carousel {
      --padding: 4rem;
      --image-width: calc((100vw - var(--padding)) / 3);
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 1024px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .horizontal-full {
      padding: 1.5rem 2.5rem;
   }

   .carousel {
      --padding: 7.25rem;
      --image-width: calc((100vw - var(--padding)) / 4);
   }

   .carousel {
      --padding: 6.5rem;
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 1280px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel #carousel-heading {
      font-size: var(--text-xl);
   }

   button.splide__arrow.splide__arrow--prev {
      left: -2rem;
   }

   button.splide__arrow.splide__arrow--next {
      right: -2rem;
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
   .media-container h3,
   .person-container h3 {
      font-size: var(--text-base);
   }
}

@media only screen and (min-width: 1536px) {

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .carousel {
      --padding: 8rem;
      --image-width: calc((100vw - var(--padding)) / 5);
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

.progress_hide_0 {
   display: none;
}


/* ******************************** */
/*         ADDED BY CONRAD         */
/* ******************************** */

/*.media-options-container:NOT(.active) .media-options-menu {
    visibility: none;
    opacity: 0;
    transition: var(--three);
    bottom: unset;
}

.media-options-container.active .media-options-menu {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: var(--three);
    bottom: unset;
}*/

.media-details-container {
   display: flex;
   position: relative;
    padding: 0 1rem .75rem;
}
.media-container:hover {
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.125);

}

.media-options-container {
   width: 1.5rem;
}

.media-options-btn {
   width: 1.5rem;
   height: 1.5rem;
   background-color: var(--base-01);
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
   font-size: var(--text-sm);
   color: var(--base-mute);
}

.media-options-menu {
   position: absolute;
   right: 0;
   left: 0;
   z-index: 100;
   visibility: hidden;
   opacity: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--base-01);
   min-width: 160px;
   border-radius: 0.5rem;
   padding: 0;
   text-wrap: nowrap;
   border: 1px solid var(--dark-focus);
   box-shadow: 0px 0 50px 500px rgb(0 53 95 / 5%);
   overflow: hidden;
   transition: var(--three);
   bottom: -100%;
   top: 1.75rem;
}

.media-options-container.active .media-options-menu {
   visibility: visible;
   opacity: 1;
   transition: var(--three);
   bottom: unset;
}

.media-options-menu button {
   padding: .75rem 1rem;
   white-space: nowrap;
   text-decoration: none;
   display: flex;
   gap: .5rem;
   align-items: center;
   background-color: transparent;
   color: var(--dark-focus);
   font-weight: 500;
   font-size: var(--text-sm);
   width: 100%;
   border: none;
}

.media-options-menu button:hover {
   background-color: var(--base-02);
}