/** Styles to set up the Playlist Carousel Panel on the Homepage **/

#block-playlist-carousel { width: 100%; padding: 0; margin-bottom: 50px; text-align: center; overflow: hidden;
    background-color: #FFFFFF; }
#block-playlist-carousel h2 { display: inline-block; margin: 0 auto 20px; text-align: center; height: 0; padding: 80px 20px 0 20px; width: 100%; max-width: 420px; overflow: hidden;
    background-color: transparent; background-image: url('../../images/sketched/fighter.png'); background-repeat: no-repeat; background-size: 100%; background-position: center center; }

.playlist-carousel .slick__slide .views-field-body { width: 100%; max-width: 380px; padding: 0 20px; }
.playlist-carousel .slick__slide .views-field-body iframe { width: 360px; }

#block-playlist-carousel nav.slick__arrow { position: absolute; width: 100%; bottom: auto; left: 0; top: 40%; height: 2px; margin-top: -1px; pointer-events: none; z-index: 2; }

#block-playlist-carousel nav.slick__arrow button { position: absolute; top: 50%; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 30px; font-size: 0; pointer-events: auto;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-size: 20px;
    -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; }

.slick__arrow .slick-prev { background-image: url('../../images/left.svg'); }
.slick__arrow .slick-next { background-image: url('../../images/right.svg'); }

.slick--optionset--playlist-carousel { position: relative; }
.slick--optionset--playlist-carousel .slick__arrow .slick-prev { float: left; left: 30px; }
.slick--optionset--playlist-carousel .slick__arrow .slick-next { float: right; right: 30px; }

#block-playlist-carousel nav.slick__arrow button:hover { background-color: #F7C9D0; cursor: pointer; }

#block-playlist-carousel ul.slick-dots { width: 100%; text-align: center; padding: 0 10%; margin: 50px 0 15px; }
#block-playlist-carousel ul.slick-dots li { display: inline-block; position: relative; height: 22px; width: 22px; overflow: hidden; margin: 0 10px 5px;cursor: pointer; border-radius: 12px; border: 2px solid #ffffff;
    background: #F7C9D0; }
#block-playlist-carousel ul.slick-dots li.slick-active { background: #000000;
    border: 2px solid #000000; }
#block-playlist-carousel ul.slick-dots li.slick-active button { pointer-events: none; }
#block-playlist-carousel ul.slick-dots li:hover { background: #000000;
    border: 2px solid #000000; }

#block-playlist-carousel ul.slick-dots li button { display: block; position: relative; padding: 0; margin: 0; font-family: 'eucmed', sans-serif; font-size: 11px; width: 22px; top: -2px; left: -2px; letter-spacing: normal; line-height: 22px; text-transform: uppercase; color: #ffffff; cursor: pointer; pointer-events: all;
    background-color: transparent;border: none; }