@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
 
/* 
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css?family=Jockey+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=VT323&display=swap');
*/

:root {
    --secondary: #192824;
    --green: #1FC11B;
    --yellow: #FFD913;
    --orange: #FF9C55;
    --selected: rgb(252, 63, 63);
    --background: #1d1d1d;
    --primary: rgb(235, 235, 235);
    --red: rgb(252, 63, 63);
    --blue: #10888a;
    --bottom-background-color: #111;
    --padding: 10px;
    --header_height: 50px;
    --player_height: 75px;
    --audioplayer_width: 75px;
    /* video aspect ratio 16:9 */
    --aspect_ratio_height: 1.7777;
    --aspect_ratio_width: 0.5625;
    --mini_video_width: calc(var(--player_height) * var(--aspect_ratio_height));
    /*--mini_video_height:var(--player_height);*/
    --vh: 100%;
    --vw: 100vw;
    --fullsize_video_width: var(--vw);
    
    /* no support for safai 10.3
    --fullsize_video_height: calc(var(--vw) * var(--aspect_ratio_width));
    --vh_with_mini_player: calc(var(--vh) - var(--player_height));
    --vh_with_fullsize_player: calc(var(--vh) - var(--fullsize_video_height) - var(--player_height));
    */

    --scrollbar-width:3px;
    --scrollbar-color:#80808080;
}

::-webkit-scrollbar,
::-webkit-scrollbar-button {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border: none;
  border-radius: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb:hover {
  background: #fcfcfc;
}
::-webkit-scrollbar-thumb:active {
  background: #ffffff;
}
::-webkit-scrollbar-track {
  border:none;
  border-radius: var(--scrollbar-width);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:active,
::-webkit-scrollbar-track:active,
::-webkit-scrollbar-track:hover {
  background: var(--background);
}
::-webkit-scrollbar-corner {
  background: transparent;
}


/* using Modernizer CSS classes to detect if browser supports the W3C Touch Events API */

:host-context(.mod-touchevents) [md-button]:hover::after,
[md-icon-button]:hover::after {
    content: none;
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    margin: 0;
    /* cant't use vh vw because IOS overlaps the Browser bottom bar */
    height: var(--vh);
    width: 100%;
}

body {
    /*-webkit-font-smoothing: antialiased;*/
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    /* font-family: 'VT323', monospace;*/
    line-height: auto;
    background-color: var(--background);
    color: var(--primary);
    font-weight: 500;
    /*position: fixed; geht nicht weil FF dann position stiky nicht korrect berechnen kann */
    overflow: hidden;
    /*text-shadow: 0px 0px 0px var(--primary);*/
    text-rendering: optimizeLegibility;
    /* Removing touch highlights on iOS smartphones */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
    /* CSS Code für hochauflösende Displays */
    body {
        font-weight: 100!important;
        text-shadow: none;
    }
}

header {
    top: -50px;
    left: 0;
    right: 0;
    height: var(--header_height);
    background-color: var(--red);
    position: fixed;
    box-sizing: border-box;
    overflow: hidden;
    transition: top 0.08s;
    max-height: var(--vh);
}
header .header-wrapper,
header .header-body .header-wrapper,
.bottom-wrapper {
    max-width: calc(500px + (var(--padding)*2));
    margin: auto;
    position: relative;
}



header .header-body .header-wrapper,
.bottom-wrapper {
    max-width: 500px;
}

header.open {
    height: auto !important;
}

header.open,
body.showheader header {
    top: 0px;
}

.playershow header {
    /*max-height: var(--vh_with_mini_player); no support for safai 10.3 */
    max-height:calc(var(--vh) - var(--player_height));
}

.playershow.fullsize header {
    /*max-height: var(--vh_with_fullsize_player); no support for safai 10.3 */
    max-height: calc(var(--vh) - (var(--vw) * var(--aspect_ratio_width)) - var(--player_height));
}

header.open .header-body {
    overflow-y: auto;
    max-height: calc(var(--vh) - var(--header_height));
    padding: 10px;
    box-sizing: border-box;
}

.playershow header.open .header-body {
    /*max-height: calc(var(--vh_with_mini_player) - var(--header_height)); no support for safai 10.3 */
    max-height: calc(var(--vh) - var(--player_height) - var(--header_height));
}

.playershow.fullsize header.open .header-body {
    /*max-height: calc(var(--vh_with_fullsize_player) - var(--header_height)); no support for safai 10.3*/
    max-height: calc(var(--vh) - (var(--vw) * var(--aspect_ratio_width)) - var(--player_height) - var(--header_height));
}

.logo {
    position: absolute;
    left: 18px;
    top: 12px;
    height: 60px;
    width: 107px;
    /*z-index: -1;*/
    /* transform: rotate(-4deg);*/
    background-image: url(icons/iiwii-logo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    display:block;
}
.logo-link {
    position: absolute;
    display:block;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 107px;
    overflow: hidden;
    text-decoration: none;
    padding-top:500px;
}

header .header-menu {
    height: var(--header_height);
}

header .header-menu:after {
    content: '';
    display: block;
    clear: both;
}

header .header-menu .btn {
    float: right;
    color: blanchedalmond !important;
    line-height: 60px;
    width: 50px;
    font-size: 25px;
}

header .header-body .submenu ul {
    padding: 0;
}

header .header-body .submenu ul:after {
    content: '';
    display: block;
    clear: both;
}

header .header-body .submenu ul,
header .header-body .submenu li {
    display: inline;
}

header .header-body .submenu a {
    color: inherit;
    text-decoration: none;
}

header .header-body .pages .page {
    padding-top:10px;
}

header .header-body .pages,
header .header-body .filters,
header .header-body .pages .page {
    display: none;
}

header.open[type="pages"] .header-body .pages,
header.open[type="filters"] .header-body .filters,
header.open[type="pages"] .header-body .pages .page.selected {
    display: block;
}

/* content */
.playershow .content-wrapper {
    /*height: var(--vh_with_mini_player); no support for safai 10.3 */
    /*height:calc(var(--vh) - var(--player_height));*/
    padding-bottom:var(--player_height);
}
.playershow.fullsize .content-wrapper {
    /*height: var(--vh_with_fullsize_player); no support for safai 10.3 */
    /*height:calc(var(--vh) - (var(--vw) * var(--aspect_ratio_width)) - var(--player_height));*/
    padding-bottom:calc((var(--vw) * var(--aspect_ratio_width)) + var(--player_height));
}


/* show filter on if filter attribute is not empty */
header .btn.filter{
    display: none;
    font-size: 17px;
    width: auto;
    line-height: inherit;
    border-radius: 20px;
    padding: 1px 8px;
    height: auto;
    margin-top: 14px;
    background-color: rgba(0, 0, 0, 0.1);
}
body.filters-ready .btn.filter{
    display: block;
}
header.open[type='filters'] .btn.filter{
    color:#000!important;
    background-color: #FFF;
}
/*body[filter] header .btn.filter:after {
    content: 'on';
    display: inline-block;
    height: 10px;
    text-align: center;
    line-height: 10px;
    color: #fff;
    position: absolute;
    right: calc(50% - 15px);
    top: 10px;
    background-color: rgb(0, 0, 0) !important;
    padding: 0px 2px;
    font-size: 9px;
    z-index: 1;
    font-weight: bold;
}
body[filter=''] header .btn.filter:after{
    display:none;
}*/
body[filter] header .btn.filter .count {
    height: 10px;
    text-align: center;
    line-height: 10px;
    color: #fff;
    position: absolute;
    right: 0;
    top: -9px;
    background-color: rgb(0, 0, 0) !important;
    padding: 3px 5px;
    font-size: 13px;
    border-radius: 50px;
    z-index: 1;
    font-weight: bold;
    min-width: 6px; /* when = 1 */
}
header[type]:not([type='']):not([type='filters']) .btn.filter,
body[filter=''] header .btn.filter .count,
header .btn.filter .apply{
    display:none;
}
body[filter]:not([filter='']) header.open[type="filters"] .btn.filter .apply{
    display:inline;
}
/*
header .btn.filter.icons-filter:before {
    line-height: 19px;
    vertical-align: bottom;
    display:none;
}*/

.bottom,
header {
    -webkit-box-shadow: 0px 0px 25px -9px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 25px -9px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 25px -9px rgba(0, 0, 0, 0.75);
    z-index: 100;
}

.top header:not(.open) {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.content-wrapper {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-top: 50px;
    overflow: hidden;
    overflow-y: auto;
    height: var(--vh);

    /* experimental Firefox Scroll bar styling */
    scrollbar-color: var(--scrollbar-color) var(--background);
    scrollbar-width: thin;

    -webkit-transition: height .1s ease-out;
    -moz-transition:    height .1s ease-out;
    -o-transition:      height .1s ease-out;
    -ms-transition:     height .1s ease-out;
    transition:         height .1s ease-out;
}

/* no scrollbar on deviced smaler thann 500px width */
@media screen and (max-width:500px) {

    /* experimental Firefox Scroll bar styling */
    .content-wrapper{
        scrollbar-width: none;
    }
    :root{
        --scrollbar-width:0px;
    }
}

.content {
    width: 100%;
    box-sizing: border-box;
    max-width: 500px;
    margin: auto;
    position:relative;
}


/* message style */

.message {
    padding: var(--padding);
    padding-bottom: 10px;
    padding-top: 4px;
    position: relative;
    margin-bottom: 5px;
}

/* pseudo to fix space on top */
.message:before{
    content:'';
    display: block;
    margin-top: -1px;
}

.message .buttons {
    position: absolute;
    top: 0;
    right: 0;
}

.message .btn {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #000!important;
    height: 40px;
    margin-left: 5px;
}

.message.filter{
    display:none;
}

.message.blue {
    background: var(--blue);
}
.message.blue h1,
.message.blue h2{
    background: var(--primary)!important;
    color: #000!important;
}


/* the dsgvo alert if user wants to play a video */

.bounce-wrapper{
    position: absolute;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}
.bounce-wrapper.shake {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}
.bounce-wrapper .message{
    margin: auto;
    max-width: 500px;
    box-sizing: border-box;
}

/* Firefox hack to fix top padding */
@-moz-document url-prefix() {
    .bounce-wrapper .message:before{
        margin-top: -2px;
    }
}



@keyframes shake {
    50% {
        transform: translate(0px, -20px)
    }
    100% {
        transform: translate(0px, 0px)
    }
}

.message.filter,
.message.wellcome {
    background-color: var(--red);
    background-image: url(icons/icon-wellcome.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 102px 56px;
    /*padding-top: 0;*/
}

.message.textcontent {
    padding-left: 0;
    padding-right: 0;
    margin-left: var(--padding);
    margin-right: var(--padding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 100;
    /*text-shadow: 0 0 0.2em rgb(0, 0, 0), 0 0 0.2em #8877FF;*/
    font-size: 5em;
}

header .header-body .page h1 {
    font-size: 1.8em;
}

h1,h2 {
    font-size: 1.9em;
}

/* break line 
header .header-body h1:after,
header .header-body h2:after,
header .header-body h3:after,
.message h1:after,
.message h2:after,
.message h3:after{
    content: "\A";
    white-space: pre-line;
}*/

/*
.entry .overlay > *:not(:last-child)::after{
    content: "\A";
    white-space: pre-line;
}
*/

header .header-body .page h1,
header .header-body .page h2,
.filter-section h2{
    font-size: 1.6em;
    font-weight: 200;
}
.filter-section h2{
    font-size: 1.4em;
}

h3 {
    font-size: 1.2em;
}

header .header-body .page h3 {
    font-size: 1.2em;
}

p {
    line-height: 1.3em;
    /*text-align: justify;*/
}
.entry-body p:not(.description) {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
p:empty {
    display:none;
}
p a {
    color: inherit;
}

header .header-body .page ul {
    padding-inline-start: 23px;
}

.bottom {
    position: -webkit-sticky;
    position: sticky;
    /*position:absolute;*/
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bottom-background-color);
    color: var(--orange);
    /*font-family: Arial, Helvetica, sans-serif;*/
    width: 100%;
    /*transition: height 0.2s;*/
    /*display:none;*/

    -webkit-transition: height .1s ease-out;
    -moz-transition:    height .1s ease-out;
    -o-transition:      height .1s ease-out;
    -ms-transition:     height .1s ease-out;
    transition:         height .1s ease-out;
}
body:not(.visible) .bottom,
body.fullsize .bottom{
    background-color: transparent;
}

/* bottom background color */
/*.bottom .player .info,
.bottom .player .controll{
    background-color: #111;
}*/


/* prevent body scroll while info is open */

body.open,
body.fullscreen {
    overflow: hidden;
}

body.open .bottom {
    height: calc(var(--vh) - 80px);
}


/*
        iOS Safari shit: 
        1st tab shows the bottom navigation when clicked 10% close to bottom of the page
        only 2nd tab will be let through to the page whitch is the player navigation
        solution: we'll use a scrollable div as contant so the browsernav will be visible all the time
        todo: css for PWA
        */


/* @supports (-webkit-overflow-scrolling: touch) {*/


/*}*/

.player {
    height: var(--player_height);
    position: relative;
    display: none;
}

.playershow .player {
    display: block;
}


/* .player .prev,
        .player .play,
        .player .next,
        .player .random,
        .player .loop,
        .player .timeline,
        .player .artwork,
        .player .like,
        .player .open,
        .player .info {
            background-color: rgba(137, 43, 226, 0.226);
        }*/

.description .more,
.player .timeline {
    cursor: pointer;
}

.btn {
    height: 35px;
    width: 50px;
    display: block;
    line-height: 50px;
    text-align: center;
    float: left;
    position: relative;
    background-size: contain;
    font-size: 20px;
    line-height: 45px;
    cursor: pointer;
}

.player .controll>.btn {
    max-width: 50px;
}

.player .controll>.btn.skip:before {
    transform: scale(-1, 1);
    display: inline-block;
}

.player .controll>.btn.skip:after {
    content: '15';
    font-size: 8px;
    position: absolute;
    left: -2px;
    right: 0;
    top: -1.5px;
}


/* hide fullscreen button if not a video */

.bottom.video.live .player .skip, 
.bottom:not(.video) .player .full {
    display: none;
}


/*.bottom.audio .controll>.btn {
            width: calc(100% / 5);
        }*/

.bottom.video .controll>.btn {
    width: calc(100% / 6);
}


/* player submenu */

.player .preferences:hover .submenu {
    display: block;
}

.player .preferences .submenu {
    position: absolute;
    bottom: 0;
    right: 0px;
    left: 0px;
    margin: auto;
    display: none;
    background-color: rgba(10, 10, 10, 0.7);
    z-index: 500;
    border-radius: 3px;
    max-width: 35px;
}

.player .preferences .submenu .btn {
    width: 100%;
}

.player .controll>.preferences {
    display: none;
}

@media screen and (max-width:400px) {
    /*
    .bottom.video .player .preferences {
        display: block;
    }*/
    body:not(.fullsize) .bottom.video .player .controll>.prev {
        display: none;
    }
    .bottom.audio .controll>.btn {
        width: calc(100% / 5);
    }
    body:not(.fullsize) .bottom.video .controll>.btn {
        width: calc(100% / 5);
    }
}

.bottom.random .player .controll .preferences:before,
.bottom.random .player .controll .random {
    color: var(--selected);
}

.bottom.loop-all .player .controll .loop,
.bottom.loop-one .player .controll .loop,
.bottom.loop-all .player .controll .preferences:before,
.bottom.loop-one .player .controll .preferences:before {
    color: var(--selected);
}


/* loop one */

.bottom.loop-one .player .controll .loop:after {
    content: '1';
    display: block;
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    color: #000;
    position: absolute;
    right: calc(50% - 15px);
    top: 9px;
    background-color: var(--selected);
    border-radius: 50%;
    font-size: 9px;
    z-index: -1;
    font-weight: bold;
}

.player .timeline {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: calc(var(--player_height) - 2px);
    z-index: 10;
    /*background-color: rgba(137, 43, 226, 0.226);*/
}


/* hide timeline stuff on fullsize */

.fullsize .bottom.video .player .timeline {
    height: 1px;
}

.bottom.video.live .player .timeline,
.fullsize .bottom.video .player .timeline .time,
.fullsize .bottom.video .player .timeline .duration {
    display: none;
}


/*.player .timeline::before {
            content: '';
            width: 100%;
            height: 1px;
            background-color: rgba(138, 138, 138, 0.267);
            display: block;
            position: absolute;
            top: calc(50% - 1px);
        }*/

.player:not(.loading) .timeline .indicator {
    width: 0%;
    height: 1px;
    background-color: var(--red);
    display: block;
    position: absolute;
    bottom: 1px;
    overflow: visible;
}


/*.player:hover*/

.player:not(.loading)
/*:hover*/

.timeline .indicator::after {
    content: '';
    width: 7px;
    height: 7px;
    /*background-color: var(--red);*/
    display: block;
    position: absolute;
    right: -4px;
    top: -3px;
    border-radius: 50%;
    box-sizing: border-box;
}

.player .time,
.player .duration {
    font-size: 13px;
    position: absolute;
    background-color: #FFF;
    line-height: 1em;
    padding: 2px;
    /*border-radius: 3px;*/
    font-weight: bold;
    font-size: 11px;
    color: #222;
    display: none;
}

.player .time,
.player .duration {
    display: block;
}


/* hide time on... */

.bottom .player.loading .time,
.player .time:empty,
.player .duration:empty {
    display: none;
}

.player .duration {
    /*right: 4px;
            bottom: 13px;*/
    right: 0px;
    bottom: 2px;
}

.player .time {
    /*top: -24px;*/
    bottom: 1px;
}

.player.playing .play:before {
    content: "\70";
    text-indent: 0px;
}

.bottom.audio .player .controll,
.bottom.audio .player .info {
    left: var(--audioplayer_width);
}

.bottom.video .player .controll,
.bottom.video .player .info {
    left: var(--mini_video_width);
}

.fullsize .bottom.video .player .controll,
.fullsize .bottom.video .player .info {
    left: 0;
}

.fullsize .bottom.video .player .controll .full {
    color: var(--selected);
}


.visualizer-inner{
    margin: auto;
    max-width: 500px;
    height:100%;
}
body:not(.visible) .visualizer-inner,
body.fullsize .visualizer-inner{
    padding-right: var(--scrollbar-width);
    position: relative;
}

/* visualizer default */
.visualizer,
.visualizer .visualizer-media,
.visualizer .visualizer-media iframe{
    visibility:hidden;
    background-size: cover;
    background-position: center;
}
/*.visualizer .visualizer-media iframe{
    display:none;
}
body.playershow.video .visualizer .visualizer-media iframe{
    display:block;
}*/
/* show visualizer when player is visible */
body.playershow .visualizer,
/*body.playershow.video .visualizer,*/
body.playershow.playing .visualizer .visualizer-media,
body.playershow.video.playing .visualizer .visualizer-media iframe,
body.playershow.fullsize.video:not(.playing) .visualizer .visualizer-media iframe,
body.playershow.fullsize.video:not(.playing) .visualizer-media{
    visibility:visible;
}

/* visualizer in bottom, outside the entry */
.visualizer{
    position: fixed;
    z-index: 5;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bottom-background-color);
}
/* reset placement */
body:not(.open):not(.fullsize):not(.visible) .visualizer{
    top: auto!important;
    height: var(--player_height)!important;
}
body.open:not(.fullsize):not(.visible) .visualizer{
    top: auto!important;
}
/*.visualizer-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}*/
.visualizer-media{
    width: var(--audioplayer_width);
    height: var(--player_height);
    position: relative;
}
body.video .visualizer-media{
    width: var(--mini_video_width);
}
body.video.playing:not(.fullsize) .visualizer-media{
    background-image: none!important;
}
body:not(.open).fullsize.video .visualizer {
    top: auto!important;
    height: calc((var(--vw) * var(--aspect_ratio_width)) + var(--player_height))!important;
}
body.open .visualizer {
    top: auto!important;
    height: calc(var(--vh) - 80px)!important;
}
body.fullsize.video .visualizer-media {
    width: var(--fullsize_video_width);
    height:calc(var(--vw) * var(--aspect_ratio_width));
}

/* inside the entry */
body:not(.fullsize).visible .visualizer{
    position: absolute;
    z-index: -1;
    height: calc(var(--vw) * var(--aspect_ratio_width));
    top: 0;
    background-color: transparent;
}
body:not(.fullsize).visible.audio .visualizer{
    height: var(--vw);
}
body:not(.fullsize).visible .visualizer-media{
    width: 100%;
    height: 100%;
    left: 0;
}
/* hide entry image when video is playing inside entry */
body:not(.fullsize).visible.video.playing .entry.playing .image-wrapper img:first-child{
    visibility:hidden;
}

.visualizer-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* pointer-events: none;*/
}

/* swipe area in top the video, so we can swipe down */
.fullsize .bottom.video .player .visualizer:after {
    content:'';
    display: block;
    position: absolute;
    top:0;
    left:60px;
    right:60px;
    z-index: 2;
    /*background-color: #10888a;*/
    /*height: calc(var(--fullsize_video_height)/2.2); no support for safai 10.3 */
    height:calc((var(--vw) * var(--aspect_ratio_width)) / 2.2);
}

.fullsize .bottom.video .player {
    /*height: calc(var(--fullsize_video_height) + var(--player_height)); no support for safai 10.3*/
    height:calc((var(--vw) * var(--aspect_ratio_width)) + var(--player_height));
}



.player .info {
    text-align: left;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 13px 17px;
}

.player .title,
.player .artist {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player .artist {
    font-weight: bold;
}

.player .controll {
    position: absolute;
    right: 0;
    bottom: 40px;
    pointer-events: all;
}

.player .controll .open {
    float: right;
}


/* close icon */
header.open .btn.pages:before,
body.open .bottom .controll .open:before{
    content: '\61';
}


.player .controll:after,
.clear {
    content: '';
    display: block;
    clear: both;
}

.bottom .detail {
    padding: var(--padding);
    display: none;
    overflow-y: auto;
    height: calc(var(--vh) - 80px - var(--player_height) - (var(--padding)*2));
    color: var(--primary);
    pointer-events: all;
}

.fullsize .bottom .detail {
    /*height: calc(100% - var(--fullsize_video_height) - var(--player_height) - (var(--padding)*2)); no support for safai 10.3*/
    height: calc(var(--vh) - 80px - (var(--vw) * var(--aspect_ratio_width)) - var(--player_height) - (var(--padding)*2));
    
}

body.open .bottom .detail {
    display: block;
}

.bottom .artwork:before {
    /*
    line-height: 50px;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    margin-top: calc((var(--player_height) - 50px) / 2);
    */
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.78);
    font-size: 35px;
    line-height: 80px;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.1);
    margin: auto;
    color: #FFF;
    display: block;
    text-indent: 3px;
}

.player .open,
.player .random,
.player .full {
    font-size: 17px;
}

.entry,
.image-wrapper,
.frame-wrapper{
    position: relative;
}

.image-wrapper {
    /* min-height: calc(80vw);*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.75+0,0.14+18,0+35 */
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bf000000', endColorstr='#00000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    /* fallback if the image cant't be loaded */
    /*background-image: url(placeholder.jpg);
            background-size: cover;*/
}

/* entry indiscator */
.entry .image-wrapper img {
    background: #ffffff12;
}
/*
.entry .circle-spin,
.entry .image-wrapper:after {
    content: '\6f';
    font-family: "icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    position: absolute;
    display: block;
    line-height: 90px;
    font-size: 80px;
    text-align: center;
    color: var(--red);
    text-indent: 5px;
    left: calc(var(--padding) - 25px);
    bottom: 20%;
    border: 5px solid var(--red);
    box-sizing: border-box;
}*/
.entry .circle-spin,
.entry:not(.initial) .image-wrapper:after {
    content:'';
    font-family: "icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    position: absolute;
    display: block;
    line-height: 90px;
    font-size: 80px;
    text-align: center;
    color: var(--red);
    text-indent: 5px;
    left: calc(var(--padding) - 25px);
    bottom: 20%;
    border: 5px solid var(--red);
    box-sizing: border-box;
}
.entry:not(.initial) .image-wrapper:after{
    background-image: url('icons/play.svg');
}



.entry.playing .image-wrapper:after {
    background:none;
    content: '\70';
    text-indent: 0px;
    font-size: 60px;
    line-height: 87px;
}


/* firefox only 
korrection of interpretation of the icon font line-height 
*/

@-moz-document url-prefix() {
    .entry .image-wrapper:after {
        line-height: 85px;
    }
    .entry.playing .image-wrapper:after {
        line-height: 84px;
    }
}

.entry.loading .image-wrapper:after,
.entry.playing .image-wrapper:after {
    border-color: transparent;
}

.circle-spin {
    border: none!important;
    text-indent: 0!important;
    display: none;
}

.entry.loading .image-wrapper .circle-spin,
.entry.playing .image-wrapper .circle-spin {
    -webkit-animation: spin 8s linear infinite;
    -moz-animation: spin 8s linear infinite;
    animation: spin 8s linear infinite;
    display: block;
}

.entry .image-wrapper .click-area {
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor:pointer;
}

.entry .circle-spin svg {
    width: 100%;
    height: 100%;
    display:none;
}
.entry.loading .circle-spin svg,
.entry.playing .circle-spin svg {
    display:block;
}

.circle-spin circle {
    stroke-width: 5;
    stroke-dasharray: 9.5;
    fill: none;
    stroke: var(--red);
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*
        --green: #1FC11B;
            --yellow: #FFD913;
            --orange: #FF9C55;
            --red: #FF5555;
        
        */

.entry .image-wrapper>img {
    width: 100%;
    max-width: 500px;
    z-index: -2;
    position: relative;
    display: block;
}


/* lazy-loading fallback 
set min-height so the images wont beloaded all together
*/

.entry.audio .image-wrapper>img {
    height: 100vw;
    max-height: 500px;
}

.entry.video .image-wrapper>img {
    /*height: calc(100vw - (500px - 375px));
    max-height: 375px;*/
    height: 100vw;
    max-height:280px;
    object-fit: cover;
}




.entry.audio .overlay {
    position: absolute;
    padding-top: 7.8%;
    top: 0;
    left: var(--padding);
    right: var(--padding);
}

.entry.video .overlay {
    padding-left: var(--padding);
    padding-right: var(--padding);
    /*position: relative;*/
    position: absolute;
    margin-top: 3%;
    top: 0;
    width:100%;
}

/*
.entry.video .image-wrapper {
    margin-top: -50px;
}*/

header .header-body .page h1,
header .header-body .page h2,
.filter-section h2,
.message h1,
.message h2,
.entry .artist,
.entry .overlay .title,
.entry .overlay .liveinfo{
   /* padding: 5px 10px;*/
    padding: 5px 0;
    padding-top: 5px;
    line-height: 1.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    /*background-color: rgba(0, 0, 0, 0.95);*/
    background: linear-gradient(transparent, transparent 0%, #000 0, #000 100%, transparent 0) no-repeat;
    background-size: 100% 100%;
    border-left: 10px solid black;
    border-right: 10px solid black;
    display: inline; 
    margin-left: calc(var(--padding) * -1);
    color: #FFF;
    /*position: relative;*/
}
.entry .artist{
    line-height: 1.5em;
}
.entry .overlay .liveinfo {
    background-color:var(--blue);
    display: inline-block;
    transform: rotate(-1deg);
}
.entry .overlay .liveinfo:before,
.entry .overlay .liveinfo:after{
    padding: 5px 10px;
    padding-top: 4px;
    line-height: 1.4em;
}

.entry .overlay .artist{
    z-index: 1;
}

.entry .artist:empty,
.entry .title:empty {
    display: none;
}

.entry .overlay a{
    color:inherit;
    text-decoration: none;
}

.entry-body {
    margin: var(--padding);
    margin-bottom: calc(var(--padding) + 20px);
}

.description {
    word-break: break-word;
    /*margin-top: 20px;*/
}

.detail .description,

/* linebreaks in feed only when opened */

.description .open,
.description.open {
    white-space: pre-line;
}

.description a {
    color: var(--primary);
    text-decoration: none;
}
.description ul {
    list-style: none;
    padding:0;
    margin-left:0;
}

.description .more {
    color: var(--orange);
}

.description.open .more,
.description .hidden {
    display: none;
}

.description.open .hidden {
    display: inline;
}

.entry-info:after {
    content: '';
    display: block;
    clear: both;
}

.date {
    float: right;
}

.like {
    float: right;
    cursor: pointer;
    padding-top: 9px!important;
    padding-bottom: 3px!important;
    padding-right: 0px!important;
}

.like:before {
    font-size: 19px!important;
}

.entry.liked .like:before {
    content: "\68"!important;
    color: var(--red);
}

.genre {
    float: left;
    text-transform: capitalize;
    position: relative;
}

.like,
.date,
.genre {
    padding: 7px 8px;
    background-color: #000;
}

.like:not(.icon):empty,
.date:not(.icon):empty,
.genre:not(.icon):empty {
    display: none;
}

.icons-play,
.icons-download {
    cursor: pointer;
    min-height: 16px;
}

.left-wapper .icons-download {
    padding-left: 2px!important;
    padding-top: 8px!important;
    padding-bottom: 3px!important;
    color: inherit;
    text-decoration: none;
}

.entry-info {
    position: absolute;
    bottom: 0;
    left: var(--padding);
    right: var(--padding);
}

.entry .entry-info .left-wapper {
    float: right;
    background-color: #000;
    z-index: 2;
    position: relative;
}

.entry .entry-info .icon:before {
    display: block;
    font-size: 16px;
    line-height: 16px;
}

.partisipant {
    height: 26px;
    width: 26px;
    float: left;
    border-radius: 50%;
    background-size: cover;
    object-fit: cover;
    margin-right: -4px;
}

@-webkit-keyframes slide {
    0% {
        background-position: -56px 0;
    }
    100% {
        background-position: 0px 0;
    }
}

@-moz-keyframes slide {
    0% {
        background-position: -56px 0;
    }
    100% {
        background-position: 0px 0;
    }
}

@keyframes slide {
    0% {
        background-position: -56px 0;
    }
    100% {
        background-position: 0px 0;
    }
}

.player .timeline .loading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 4px;
    overflow: hidden;
}

.subtrack.row.loading .title,
.player.loading .loading {
    z-index: -1;
    background: repeating-linear-gradient(-45deg, var(--red), var(--red) 10px, transparent 10px, transparent 20px);
    background-size: 56px 56px;
    /* This is unique for this background, need to find a pattern and develop a formula */
    -webkit-animation: slide 1s infinite linear forwards;
    -moz-animation: slide 1s infinite linear forwards;
    animation: slide 1s infinite linear forwards;
}

.fullscreen .bottom,
.fullscreen .player,
.fullscreen .visualizer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    height: var(--vh) !important;
}


/* bottom artwork */
body.fullscreen .bottom .player .artwork,
body.fullsize .bottom .player.paused .artwork,
body.fullsize .bottom .player.playing .artwork {
    display: none;
}
.bottom .artwork {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--audioplayer_width);
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.bottom.video .artwork {
    width: var(--mini_video_width);
}
body.fullsize .bottom.video{
    pointer-events: none;
}
body.fullsize .bottom.video .artwork {
    display:none;
}

/* hide artwork when playing on bottom */
body:not(.visible) .bottom .player.playing .artwork {
    background-size: 0 0 !important;
}

/* on video show pause icon only on hover */
.bottom.video .player.loading .artwork:before,
.bottom .player.playing .artwork:before {
    display: none;
}

.bottom .player.playing:hover .artwork:before {
    display: block;
}


.debug {
    position: fixed;
    left: 0;
    right: 0;
    top: 50px;
    background-color: rgba(10, 10, 10, 0.7);
    color: #FFF;
    z-index: 1000000;
    max-height: 100px;
    overflow: auto;
    /*display: none;*/
}

.end {
    height: 10px;
    /*background-color: red;*/
}


/*
    filter section --------------------------------------------------------
 */

header .header-body .filter-section-title{
    padding-bottom: 10px;
}

.pages .submenu li .filters {
    margin-top: 20px;
}
.filter-section:not(.selected){
    padding-bottom: 15px;
}
.filter-section.selected{
    padding-top: 10px;
}
.filter-section:after {
    content: '';
    display: block;
    clear: both;
}

.pages .submenu li a,
.filter-btn {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.1); 
    padding: 6px 10px;
    border-radius: 20px;
    position: relative;
}
.filter-btn {
    display: table; 
}
.filter-btn .text {
    display: table-cell;
    padding-right: 4px;
}
.filter-btn .count {
    border-left: 1px solid rgba(253, 253, 253 , 0.2);
    background-color: transparent;
    padding: 0px 0px 0px 4px;
    display: table-cell;
    vertical-align: middle;
}
.filter-btn .count[class^="icons-"]:before,
.filter-btn .count[class*=" icons-"]:before{
    vertical-align: middle;
}

.filter-btn[type="like"] {
    padding-left: 26px
}

.filter-btn[type="like"]:before {
    content: "\68";
    font-family: "icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 17px;
}

.pages .submenu li.selected a {
    background-color: #222;
    border-color: transparent;
}

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

.subtracks {
    margin-bottom: 10px;
}

.subtracks,
.subtracks .cell {
    width: 100%;
    padding: 1px 2px 2px 0px;
}


/*
.subtracks .row:first-child .cell {
    border-top: 1px solid #333;
}*/

.subtrack .title {
    position: relative;
    color: #FFF;
    line-height: 25px;
    font-size: 13px;
    display: inline;
    padding: 6px 10px;
    line-height: 1.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-color: rgba(0, 0, 0, 0.95);
    cursor: pointer; 
}


.subtrack .title:before {
    content: '\6f';
    font-family: "icons" !important;
    -webkit-font-smoothing: antialiased;
    margin-right: 4px;
    vertical-align: middle;
}

.subtrack.row.playing .title:before {
    content: '\70';
}

.subtracks .waveform {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #ff958a;
    filter: invert(94%);
    z-index: -1;
}

.subtracks .download {
    text-align: right;
    font-size: 16px;
    padding-right: 8px;
}

.subtrack .title a,
.subtrack .title div,
.subtracks .download{
    text-decoration: none;
    color:inherit;
    display:inline;
}

.subtracks .download:before {
    line-height: 30px;
}

.subtracks .cell.empty:after {
    content: '\00a0';
    line-height: 32px;
    height: 20px;
    display: inline-block;
}

.subtrack.row.playing .title {
    background-color: var(--red);
}


/*
    make description fit to content when screen is wider than 500
*/

@media (min-width: 510px) {
    .message.textcontent,
    .message.textcontent h1,
    .message.textcontent h2,
    .header-body h1,
    .header-body h2,
    .entry-body {
        margin-left: 0!important;
        /*margin-right: 0!important;*/
    }
    .bottom .detail {
        padding-left: 0;
        padding-right: 0;
    }
    /*.subtracks .download {
        padding-right: 17px;
    }*/
    /* remove padding left on destop */
    .fullsize .bottom.video .info {
        padding-left: 0;
    }

    .message h1,
    .message h2,
    .entry .artist,
    .entry .overlay .title,
    .entry .overlay .liveinfo{
        margin-left: calc(var(--padding) * -2);
    }

    /* scrollbar fix */
    header .header-wrapper,
    header .header-body .header-wrapper,
    .bottom-wrapper,
    body>.bounce-wrapper{
        padding-right: var(--scrollbar-width);
    }
}

.message .loading:before,
.image-wrapper.loading:before,
header .header-body .pages .page:empty:after,
header .header-body .filters:empty:after {
    content: '';
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    border: 4px solid transparent;
    border-top: 4px solid #FFF;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    -webkit-animation: 2s spin linear infinite;
    animation: 2s spin linear infinite;
    margin-top: 20px;
    margin-bottom: 10px;
}

.entry .image-wrapper.loading:before {
    left: calc((100% - 30px)/ 2);
    top: calc((100% - 30px)/ 2);
    position: absolute;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}




/* on event */
.event .overlay{
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 10px;
}

/* on event mobile or destop */
body .event-title-sitename{
    display:none;
}
@media screen and (max-width:500px) {
    body:not([filter]) .event .event-title-sitename,
    body[filter]:not([filter=""]) .event .event-title-eventname{
        display:inline;
    }
    body:not([filter=""]) .event .event-title-eventname{
        display:none;
    }
    body[event] .message.wellcome{
        display:none;
    }
}

/* on fullpage event */
@media screen and (min-width:501px) {
    body[event].fullsize-event .message.wellcome{
        z-index:2;
    }
    body[event].fullsize-event #eventframe{
        margin-left: calc(((100vw - 500px) / 2) * -1);
        /*margin-top: -41px;*/
        width: 100vw!important;
    }
}




/* glitch */
/*.glitch:before, .glitch:after {
    display: block;
    content: attr(data-glitch);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
  }
  .glitch:after {
    color: #f0f;
    z-index: -2;
    -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  }
  .glitch:before {
    color: #0ff;
    z-index: -1;
    -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
            animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  }

  @-webkit-keyframes glitch {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-1px, 1px);
              transform: translate(-1px, 1px);
    }
    40% {
      -webkit-transform: translate(-1px, -1px);
              transform: translate(-1px, -1px);
    }
    60% {
      -webkit-transform: translate(1px, 1px);
              transform: translate(1px, 1px);
    }
    80% {
      -webkit-transform: translate(1px, -1px);
              transform: translate(1px, -1px);
    }
    to {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  @keyframes glitch {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-1px, 1px);
              transform: translate(-1px, 1px);
    }
    40% {
      -webkit-transform: translate(-1px, -1px);
              transform: translate(-1px, -1px);
    }
    60% {
      -webkit-transform: translate(1px, 1px);
              transform: translate(1px, 1px);
    }
    80% {
      -webkit-transform: translate(1px, -1px);
              transform: translate(1px, -1px);
    }
    to {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }*/

.glitch{
    /*animation: glitch-skew 1s infinite linear alternate-reverse;*/
}

  .glitch {
    
  }
  .glitch::before,
  .glitch::after {
    content: attr(data-glitch);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: black;*/
  }
  .glitch::before {
    left: 2px;
    text-shadow: -2px 0 #49FC00;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
  }
  .glitch::after {
    left: -2px;
    text-shadow: -2px 0 #b300fc;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
  }
  
  @keyframes glitch-anim {
    0% {
      clip: rect(45px, 9999px, 42px, 0);
    }
    4.166666666666666% {
      clip: rect(120px, 9999px, 31px, 0);
    }
    8.333333333333332% {
      clip: rect(132px, 9999px, 126px, 0);
    }
    12.5% {
      clip: rect(10px, 9999px, 122px, 0);
    }
    16.666666666666664% {
      clip: rect(93px, 9999px, 5px, 0);
    }
    20.833333333333336% {
      clip: rect(9px, 9999px, 111px, 0);
    }
    25% {
      clip: rect(33px, 9999px, 79px, 0);
    }
    29.166666666666668% {
      clip: rect(46px, 9999px, 85px, 0);
    }
    33.33333333333333% {
      clip: rect(64px, 9999px, 87px, 0);
    }
    37.5% {
      clip: rect(54px, 9999px, 21px, 0);
    }
    41.66666666666667% {
      clip: rect(108px, 9999px, 84px, 0);
    }
    45.83333333333333% {
      clip: rect(87px, 9999px, 134px, 0);
    }
    50% {
      clip: rect(42px, 9999px, 55px, 0);
    }
    54.166666666666664% {
      clip: rect(35px, 9999px, 11px, 0);
    }
    58.333333333333336% {
      clip: rect(120px, 9999px, 106px, 0);
    }
    62.5% {
      clip: rect(113px, 9999px, 100px, 0);
    }
    66.66666666666666% {
      clip: rect(93px, 9999px, 96px, 0);
    }
    70.83333333333334% {
      clip: rect(0px, 9999px, 73px, 0);
    }
    75% {
      clip: rect(103px, 9999px, 58px, 0);
    }
    79.16666666666666% {
      clip: rect(15px, 9999px, 128px, 0);
    }
    83.33333333333334% {
      clip: rect(121px, 9999px, 88px, 0);
    }
    87.5% {
      clip: rect(86px, 9999px, 67px, 0);
    }
    91.66666666666666% {
      clip: rect(15px, 9999px, 143px, 0);
    }
    95.83333333333334% {
      clip: rect(79px, 9999px, 134px, 0);
    }
    100% {
      clip: rect(43px, 9999px, 108px, 0);
    }
  }
  
  @keyframes glitch-anim-2 {
    6.666666666666667% {
      clip: rect(130px, 9999px, 85px, 0);
    }
    10% {
      clip: rect(119px, 9999px, 80px, 0);
    }
    13.333333333333334% {
      clip: rect(21px, 9999px, 144px, 0);
    }
    16.666666666666664% {
      clip: rect(29px, 9999px, 41px, 0);
    }
    20% {
      clip: rect(87px, 9999px, 49px, 0);
    }
    23.333333333333332% {
      clip: rect(89px, 9999px, 25px, 0);
    }
    26.666666666666668% {
      clip: rect(150px, 9999px, 104px, 0);
    }
    30% {
      clip: rect(15px, 9999px, 47px, 0);
    }
    33.33333333333333% {
      clip: rect(19px, 9999px, 50px, 0);
    }
    36.666666666666664% {
      clip: rect(133px, 9999px, 106px, 0);
    }
    40% {
      clip: rect(119px, 9999px, 139px, 0);
    }
    43.333333333333336% {
      clip: rect(3px, 9999px, 19px, 0);
    }
    46.666666666666664% {
      clip: rect(95px, 9999px, 56px, 0);
    }
    50% {
      clip: rect(59px, 9999px, 122px, 0);
    }
    53.333333333333336% {
      clip: rect(95px, 9999px, 5px, 0);
    }
    56.666666666666664% {
      clip: rect(36px, 9999px, 73px, 0);
    }
    60% {
      clip: rect(35px, 9999px, 51px, 0);
    }
    63.33333333333333% {
      clip: rect(117px, 9999px, 110px, 0);
    }
    66.66666666666666% {
      clip: rect(65px, 9999px, 84px, 0);
    }
    70% {
      clip: rect(27px, 9999px, 51px, 0);
    }
    73.33333333333333% {
      clip: rect(149px, 9999px, 3px, 0);
    }
    76.66666666666667% {
      clip: rect(5px, 9999px, 69px, 0);
    }
    80% {
      clip: rect(88px, 9999px, 121px, 0);
    }
    83.33333333333334% {
      clip: rect(18px, 9999px, 94px, 0);
    }
    86.66666666666667% {
      clip: rect(42px, 9999px, 22px, 0);
    }
    90% {
      clip: rect(136px, 9999px, 143px, 0);
    }
    93.33333333333333% {
      clip: rect(101px, 9999px, 28px, 0);
    }
    96.66666666666667% {
      clip: rect(49px, 9999px, 74px, 0);
    }
    100% {
      clip: rect(95px, 9999px, 88px, 0);
    }
  }