@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,900);
h1 {
    font-size: 40px;
    color:#00f
}

@media (min-width: 0) and(max-width: 700px) {
    h1 {
        font-size:20px
    }
}

h2 {
    font-size: 30px;
    color:#00f
}

@media (min-width: 0) and(max-width: 700px) {
    h2 {
        font-size:16px
    }
}

a {
    color:#00f
}

* {
    box-sizing:border-box
}

body {
    padding: 0;
    margin:0
}

h1, h2, h3, h4 {
    margin:0
}

page, section, text {
    display:block
}

body {
    font-family: Oswald;
    line-height: 1.5;
    background-color:#282b45
}

.player-wrapper {
    max-width: 450px;
    max-height: 100vh;
    margin: 0 auto;
    overflow-y:auto
}

.theme-slamfm .player-wrapper {
    background:#282b45}

.theme-honderdnl .player-wrapper {
    background:#000000
}

.full-width {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-left: 16px;
    padding-right:16px
}

page {
    display:none
}

.triton-pixel {
    position: absolute;
    top: 0;
    left:0
}

.loading_container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content:center
}

.loading_container .loading {
    position: relative;
    width: 64px;
    height:64px
}

.loading_container .loading div {
    box-sizing: border-box;
    display: block;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-self: center;
    position: absolute;
    border: 6px solid #ffffff;
    border-radius: 50%;
    -webkit-animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    border-color:#000000 transparent transparent transparent
}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .loading_container .loading div {
        margin:-32px
    }
}

.loading_container .loading div:nth-child(1) {
    -webkit-animation-delay: -.45s;
    animation-delay:-.45s
}

.loading_container .loading div:nth-child(2) {
    -webkit-animation-delay: -.3s;
    animation-delay:-.3s
}

.loading_container .loading div:nth-child(3) {
    -webkit-animation-delay: -.15s;
    animation-delay:-.15s
}

@-webkit-keyframes lds-ring {
    0% {
        -webkit-transform: rotate(0);
        transform:rotate(0)
    }

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

@keyframes lds-ring {
    0% {
        -webkit-transform: rotate(0);
        transform:rotate(0)
    }

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

.button {
    display: block;
    cursor:pointer
}

.button.mute {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .3);
    color:#fff
}

.button.close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    background:0 0
}

.button:hover {
    opacity:.8
}

.icon, icon {
    display:block
}

.icon.play_s, icon.play_s {
    width: 12px;
    height:14px
}

.theme-honderdnl .icon.play_s, .theme-honderdnl icon.play_s {
    background:url(images/icons/listen.svg) no-repeat center center/contain
}

.theme-slamfm .icon.play_s, .theme-slamfm icon.play_s {
    background:url(images/icons/play_s.svg) no-repeat center center/contain
}

.theme-honderdnl .icon.play, .theme-honderdnl icon.play {
    width: 28px;
    height: 33px;
    background:url(images/icons/listen.svg) no-repeat center center/contain
}

.theme-slamfm .icon.play, .theme-slamfm icon.play {
    width: 90px;
    height: 90px;
    background:url(images/icons/play.svg) no-repeat center center/contain
}

.icon.watch, icon.watch {
    width: 16px;
    height: 16px;
    background:url(images/icons/watch.svg) no-repeat center center/contain
}

.icon.stream, icon.stream {
    width: 16px;
    height: 13px;
    background:url(images/icons/icon-menu.svg) no-repeat center center/contain
}

.icon.prev, icon.prev {
    width: 23px;
    height: 22px;
    background:url(images/icons/next-copy-2.svg) no-repeat center center/contain
}

.icon.next, icon.next {
    width: 23px;
    height: 22px;
    background:url(images/icons/next-copy.svg) no-repeat center center/contain
}

.icon.pause, icon.pause {
    width: 24px;
    height: 34px;
    background:url(images/icons/pause.svg) no-repeat center center/contain
}

.icon.dislike, icon.dislike {
    width: 16px;
    height: 16px;
    background: url(images/icons/icon-thumbup.svg) no-repeat center center/contain;
    -webkit-transform: scaleY(-1);
    transform:scaleY(-1)
}

.icon.like, icon.like {
    width: 16px;
    height: 16px;
    background:url(images/icons/icon-thumbup.svg) no-repeat center center/contain
}

.icon.sound, icon.sound {
    width: 16px;
    height: 16px;
    background:url(images/icons/icon-sound.svg) no-repeat center center/contain
}

nav {
    height:80px
}

.theme-slamfm nav {
    background:#000000
}

.theme-slamfm nav .logo {
    max-width: 235px;
    background-image:url(images/logowebb.png)
}

.theme-slamfm nav .button {
    border-radius:3px
}

.theme-honderdnl nav {
    background:#f79393
}

.theme-honderdnl nav .logo {
    max-width: 164px;
    background-image:url(images/logos/black.svg)
}

nav .nav-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    height: 80px;
    width:100%
}

nav .nav-holder .logo {
    width: 100%;
    height: 100%;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: left center;
    background-size:100%
}

nav .nav-holder .button-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:row
}

nav .nav-holder .button-holder .button {
    margin-left:8px
}

section.topbar {
    width: 100%;
    height: 56px;
    background: rgba(7, 7, 8, .3);
    color: #ffffff;
    font-weight:900
}

.theme-slamfm section.topbar .item.active {
    box-shadow:inset 0 -4px 0 0 #65a1b3
}

.theme-honderdnl section.topbar .item.active {
    box-shadow:inset 0 -4px 0 0 #ff8100
}

section.topbar .topbar-holder {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height:100%
}

section.topbar .topbar-holder .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor:pointer
}

section.topbar .topbar-holder .item icon {
    margin-right:12px
}

.theme-slamfm section.player .loading_container {
    position: relative;
    width: 114px;
    height: 114px;
    display: flex;
    justify-content: center;
    align-items:center
}

.theme-slamfm section.player .item.dislike, .theme-slamfm section.player .item.like {
    border-radius: 3px;
    cursor:pointer
}

.theme-slamfm section.player .item.play {
    background: #3a08b8;;
    border-radius:60px
}

.theme-slamfm section.player .item.play .play-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 114px;
    height: 114px;
    background: #120fc5;
    border-radius: 60px;
    border:4px solid rgba(255, 255, 255, 0.8)
}

.theme-slamfm section.player.audio .player-holder .thumbnail-holder .thumbnail {
    border-radius:6px
}

.theme-honderdnl section.player .item.about .title {
    color:#ff8100
}

.theme-honderdnl section.player .item.play {
    background:#ffffff
}

.theme-honderdnl section.player .loading_container {
    position: relative;
    width: 114px;
    height: 114px;
    display: flex;
    justify-content: center;
    align-items:center
}

section.player .player-holder .thumbnail-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    position: relative;
    overflow:hidden
}

section.player .player-holder .thumbnail-holder .thumbnail {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15);
    z-index:999
}

section.player .player-holder #player_radiocorp {
    background-color: #000000;
    min-height:200px
}

section.player .player-holder .about-holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 24px 16px 36px;
    text-align: center;
    box-shadow:0 1px 0 0 rgba(255, 255, 255, .15), 0 -1px 0 0 rgba(255, 255, 255, .15)
}

section.player .player-holder .about-holder .item {
    width: 40px;
    height:40px
}

section.player .player-holder .about-holder .item.dislike, section.player .player-holder .about-holder .item.like {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, .25);
    border:1px solid rgba(255, 255, 255, .5)
}

.theme-slamfm section.player .player-holder .about-holder .item.dislike.voted, .theme-slamfm section.player .player-holder .about-holder .item.like.voted {
    background-color:#e61873
}

.theme-honderdnl section.player .player-holder .about-holder .item.dislike.voted, .theme-honderdnl section.player .player-holder .about-holder .item.like.voted {
    background-color:#ff8100
}

section.player .player-holder .about-holder .item.about {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    color:#ffffff
}

section.player .player-holder .about-holder .item.about .title {
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom:12px
}

section.player .player-holder .about-holder .item.about .artist {
    font-size: 18px;
    opacity: .75;
    line-height:1.11
}

section.player .player-holder .controls-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding:36px 16px
}

section.player .player-holder .controls-holder .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    cursor: pointer;
    outline:0
}

section.player .player-holder .controls-holder .item.play {
    width: 120px;
    height: 120px;
    margin: 0 12px;
    border: 0;
    padding: 0;
    flex-shrink:0
}

section.youtube-video {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    z-index:999
}

section.youtube-video .close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor:pointer
}

section.youtube-video .youtube-holder {
    margin-top: 90px;
    position: relative;
    padding-bottom: 52%;
    padding-top: 25px;
    height:0
}

section.youtube-video .youtube-holder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.theme-honderdnl section.list .item.active {
    background-color: #13a537;
    border:0
}

.theme-slamfm section.list .item {
    border-radius:3px
}

.theme-slamfm section.list .item.active {
    background-color: #65a1b3;
    box-shadow: 0 0 12px 0 rgba(2, 100, 191, 0.5);
    border:0
}

section.list .list-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:24px 0
}

section.list .list-holder .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    cursor:pointer
}

section.list .list-holder .item.watch .thumbnail {
    height:70px
}

section.list .list-holder .item.watch .thumbnail img {
    border-radius:3px 0 0 3px
}

section.list .list-holder .item.watch .list-about {
    padding: 12px 12px 12px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2
}

section.list .list-holder .item.watch .list-about .title {
    overflow:hidden
}

section.list .list-holder .item.stream {
    padding:16px 12px
}

section.list .list-holder .item.stream .thumbnail {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-right:12px
}

section.list .list-holder .item.stream .thumbnail icon {
    width: 16px;
    height:17px
}

section.list .list-holder .item.stream .list-about {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
}

section.list .list-holder .item .thumbnail {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:12px
}

section.list .list-holder .item .list-about .title {
    font-weight: 900;
    line-height:1.3
}

section.list .list-holder .item .list-about .description {
    opacity:.75
}

footer {
    padding:24px 0 16px
}

.theme-slamfm footer {
    background:url(images/background.png) no-repeat center center/cover
}

.theme-honderdnl footer {
    background-color: #e3e3e9;
    background-image: url(images/background_pattern_white.png);
    background-position:50%
}

footer .view-holder {
    margin: 0 auto;
    max-width: 320px;
    width: 100%;
    height:100px
}

footer .view-holder .view {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius:3px
}

page.watch {
    min-height: 500px;
    position:relative
}

page.watch section {
    display:none
}

.livestream-iframe {
    width: 100%;
    height:200px
}

page.streams {
    min-height: 500px;
    position: relative
}