/* ******************************** */
/*          CAROUSEL STYLING          */
/* ******************************** */

.splide__arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgb(1 1 1 / 40%);
   width: 24px;
   height: 72px;
   border: none;
   border-radius: 4px;
   z-index: 3;
}

.splide__arrow:hover,
.splide__arrow:focus {
   background-color: rgb(1 1 1 / 80%);
}

.splide__arrow--next {
   right: 0;
}

.splide__arrow::before {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-style: normal;
   display: inline-block;
   line-height: 1;
   font-size: 1rem;
   color: var(--dark-content)
}

.splide__arrow--prev::before {
   content: "\f104";
   /* fa-angle-left */
}

.splide__arrow--next::before {
   content: "\f105";
   /* fa-angle-right */
}

.splide__pagination {
   position: absolute;
   bottom: .75rem;
   left: 50%;
   transform: translateX(-50%);
   gap: .325rem;
}

.splide__pagination__page {
   border: 1.5px solid var(--dark-01);
   height: .325rem;
   width: 1rem;
   border-radius: 2px;
   background-color: var(--base-01);
   transition: var(--three);
}

.splide__pagination__page.is-active {
   background-color: var(--dark-01);
   width: 1.75rem;
}

.splide__arrow svg {
   display: none;
}

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

.horizontal-full.carousel-section {}

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

.content-carousel {
   position: relative;
}

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

.content-carousel #carousel-heading {
    font-weight: 600;
    font-size: var(--text-2xl);
    color: var(--base-emphasis);
    font-family: var(--heading-font);
    letter-spacing: 0.02rem;
}

.content-carousel .view-all-link {
    flex-shrink: 0;
    text-decoration: none;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 0 .75rem;
    border-radius: 0;
    font-size: var(--text-sm);
    height: 32px;
    display: flex
;
    justify-content: center;
    align-items: center;
    line-height: 0;
    font-weight: 600;
}

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

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

.content-carousel .splide__arrow--next {
    right: -.75rem;
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.content-carousel .splide__arrow {
    background-color: rgb(1 1 1 / 40%);
}

.content-carousel .splide__arrow--prev {
    left: -.75rem;
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.content-carousel .splide__arrow:hover {
    background-color: rgb(1 1 1 / 80%);
}

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

.content-carousel .splide__pagination {
   justify-content: end;
   position: relative;
}

.content-carousel .splide__pagination__page {
   border: 1.5px solid var(--base-content);
}

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

/* ******************************** */
/*            MEDIA STYLING         */
/* ******************************** */
.media-container, .person-container {
    position: relative;
    background-color: #f1f1f1;
    overflow: hidden;
    box-shadow: 0 2px 8px -2px rgb(0 45 93 / 15%);
    border-radius: .5rem;
    border: .2px solid var(--border-color);
    align-self: start;
    height: 100%;
    transform: scale(1.0);
    transition: 0.5s all ease-in-out;
}

.media-container:hover,
.person-container:hover {
       box-shadow: 0 2px 8px -2px rgb(0 45 93 / 66%);
}

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

.banner-stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
}

.media-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border-radius: 0rem;
   line-height: 1.3;
   display: block;
}

.article-Person .thumb-img-container {
   aspect-ratio: 1 / 1;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: 21.875%;
   margin-right: 21.875%;
   margin-top: .5rem;
}

.article-Person .thumb-img-container .thumb-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.person-carousel .content-carousel .splide__arrow {
   top: calc((100vw - 1.25rem) / 2);
}

.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);
}

.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: 1rem;
   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);
}

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

.content-carousel .btn-row {
    display: flex;
    gap: .5rem;
}

.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(--dark-01);
   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);
}

.article-Conference .thumb-img {
   object-fit: contain;
   background-color: white;
   width: 100%;
   height: 100%;
}

@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-base);
    color: var(--base-content);
    line-height: 1.3;
}

.media-container h3, .person-container h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark-01);
    margin-bottom: .5rem;
}

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

.splide__arrow:disabled {
   display: none !important;
}

.session-main .carousel {
   overflow: auto;
}

.session-main .carousel .content-carousel {
   width: 100%;
}

.content-carousel .splide__track {
   padding-bottom: 1rem;
}

li.selected article {
   background-color: var(--base-04);
   border: 1px solid var(--secondary);
   margin: -8px;
   padding: 7px;
   border-radius: .325rem;
}

.session-main .carousel .session-main h3 {
   padding: 0;
}

@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);
   }

   .person-carousel .content-carousel .splide__arrow {
      top: calc(((100vw - 2.25rem) / 2) / 2);
   }

   /* ******************************** */
   /*            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;
   }

   .content-carousel .splide__arrow--prev {
      left: -1.5rem;
   }

   .content-carousel .splide__arrow--next {
      right: -1.5rem;
   }

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

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

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

   .person-carousel .content-carousel .splide__arrow {
      top: calc(((100vw - 4rem) / 3) / 2);
   }

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

.media-container .thumb-img-overlay, .person-container .thumb-img-overlay {
    padding: .75rem;
}

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

.media-container p, .person-container p {
    font-size: var(--text-sm);
}
}

@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;
   }

    .content-carousel .splide__arrow--prev {
        left: -2.5rem;
    }

    .content-carousel .splide__arrow--next {
        right: -2.5rem;
    }

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

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

   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .person-carousel .content-carousel .splide__arrow {
      top: calc(((100vw - 7.25rem) / 4) / 2);
   }

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


   /* ******************************** */
   /*            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);
   }

   .person-carousel .content-carousel .splide__arrow {
      top: calc(((100vw - 8rem) / 5) / 2);
   }

   .content-carousel .splide__arrow {
      border-radius: 4px;
   }

   /* ******************************** */
   /*            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 {
    position: relative;
    padding: .75rem 1rem;
}

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

.media-options-btn {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: var(--text-base);
    color: var(--dark-content);
    background-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);
}