@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz@8..60&display=swap');

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
}
.headline-font {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.widget-color-band {
    position: absolute;
    width: 100%;
    height: 56%;
}
.widget-wrapper {
    position: absolute;
    width: 96vw;
    height: 90vh;
    padding: 5vh 2vw;
    z-index: 100;
}
.widget-background {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.widget-heading {
    height: 20vh;
    text-align: center;
    color: #fff;
}
.widget-heading.dark {
    color: #000;
}
.widget-heading > h1 {
    margin: 0;
    padding-top: 4vh;
    font-weight: 400;
    font-size: 8vh;
}
.widget-heading > hr {
    border-style: solid;
    opacity: .50;
    border-width: .3vh;
    width: 14vh;
}

.play-pause-btn {
    position: absolute;
    top: 7.25vh;
    right: 4vh;
    background: rgba(255, 255, 255, 0.15);
    border: .3vh solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    width: 5.5vh;
    height: 5.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
}
.play-pause-btn svg {
    width: 2.8vh;
    height: 2.8vh;
    margin-left: 0.2vh;
}
.play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.widget-heading.dark .play-pause-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

a {
    text-decoration: none;
    color: #333;
}

.grad-overlay {
    position: absolute;
    width: 100%;
    height: 56%;
    background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%,rgba(255, 255, 255, 0.20) 100%);
    background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%,rgba(255, 255, 255, 0.20) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%,rgba(255, 255, 255, 0.20) 100%);
    z-index: 99;
}

.widget-data {
    width: 100%;
    height: 75vh;
    overflow: hidden;
    z-index: 999;
    position: relative;
}

#library-events {
    display: flex;
    flex-direction: row;
    height: 80vh;
    margin: 0;
    padding: 2vh;
    padding-bottom: 4vh;
    list-style: none;
    color: #333;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
#library-events::-webkit-scrollbar {
    display: none;
}

#library-events li {
    text-align: center;
    flex: 0 0 53vh;
    width: 53vh;
    overflow: hidden;
}

#library-events li.slide-in {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#library-events .card {
    width: 46vh;
    height: 78vh;
    margin: .8vh auto 0;
}

#library-events .cover {
    height: 60vh;
    box-shadow: 0 0 1.2vh .1vh rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.25s;
}

#library-events a > .cover:hover {
    -webkit-filter: brightness(.7);
    filter: brightness(.7);
}


#library-events img {
    width: 46vh;
    height: 60vh;
}
#library-events .audiobook img, #library-events .video img {
    width: 46vh;
    height: 46vh;
}
#library-events .img-error {
    padding: 2.5vh;
    width: 40vh;
    height: 40vh;
    font-size: 5.2vh;
    white-space: normal;
    overflow: hidden;
}
#library-events .dark .img-error {
    color: #f9f9f9;
}
#library-events .light .img-error {
    color: #010101;
}
#library-events .audiobook svg, #library-events .video svg {
    width: 100%;
    height: 12vh;
    display: block;
    margin: 0 auto;
}
#library-events .details {
    text-align: center;
    font-size: 3.5vh;
    margin-top: 1vh;
}
#library-events .details > div {
    white-space: nowrap;
    line-height: 4.8vh;
}
#library-events .details .availability {
    color: #707070;
    font-size: 3vh;
}

.title-text {
    position: relative;
    top: 2.1vh;
    display: table;
    width: 100%;
    height: 40vh;
}

.title-text p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.spinner {
    text-align: center;
    position: absolute;
    top: 66%;
    left: 50%;
    margin-left: -5vh;
    margin-top: -5vh;
}

.spinner > div {
    width: 1.8vh;
    height: 1.8vh;
    margin: 0 .5vh;
    background-color: #fff;
    border:.2vh solid rgba(0,0,0,.5);
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bounce 1.4s infinite ease-in-out both;
    animation: bounce 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bounce {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

.fade-in {
    display:block;
    animation-name: fade-in;
    -webkit-animation-name: fade-in;

    animation-duration: .5s;
    -webkit-animation-duration: .5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

    visibility: visible !important;
}

@keyframes fade-in {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity:1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity:1;
    }
}