@charset "utf-8";
#currentSong,
#icoradio,
#navnomradio,
#playstop,
#pub,
li.social {
    vertical-align: middle
}

#currentSong,
#icoradio {
    display: inline-block;
    padding-left: 15px
}

#logo,
#volume,
.jp-audio ul li>a,
h2 {
    text-align: center
}

#coversong,
#lastplay,
#mosaicradio {
    position: absolute
}

.jp-volume-bar-knob {
    position: absolute;
    right: 0;
    margin-top: -6px;
    z-index: 50
}

.ui-slider-horizontal {
    height: 0;
    border: transparent;
    width: 100%
}

h2 {
    font-size: 20px;
    text-transform: uppercase;
    Line-Height: 10px
}

#center,
#logo,
#nav {
    display: block
}

#playstop,
#pub {
    display: inline-block;
    width: 330px;
    margin-left: 20px
}

#center,
#pub {
    height: 275px
}

#divpub,
#playerall {
    background-position: center
}

#centerplaystop,
#divpub,
#logoradio,
#playerall,
#playstop {
    margin-left: auto;
    margin-right: auto
}

#nav,
#player {
    width: 300px;
}

#center,
#social {
   /* border-top: 1px solid #efefef */
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-repeat: repeat;
    padding: 0;
    margin: 0
}

#playerall {
    width: 300px;
    height: auto;
    background-image: url(../img/backplay.png)
}

#playercontent {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    height: auto
}

#nav {
    height: 50px;
    text-align: left
}

#currentSong {
    top: 100px;
    left: 52px;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#coversong {
    background-image: url(../img/nocover.png);
    background-position: center center;
    width: 105px;
    height: 105px;
    right: 25px;
    top: 10px;
    border-color: #FFF;
    border-style: solid
}

#albcov_wrt img {
    max-width: 100%;
    max-height: 100%
}

#logo {
    width: 770px;
    height: 80px;
    background-image: url(../img/header.png)
}

#center {
    width: 300px;
    background: url(../img/back0.png) center;
}

#playstop {
    height: 225px
}

#centerplaystop {
    width: auto;
    height: 250px
}

#logoradio {
    width: 320px;
    height: 222px;
    margin-top: 7%
}

#divpub {
    background-image: url(../img/antiab.png);
    width: 270px;
    height: 250px;
    margin-top: 3%
}

#player,
.jp-audio ul>li.volume {
    height: 50px;
    display: block
}

.jp-audio ul {
    padding: 0;
    margin: 0;
    width: 300px;
    list-style: none
}

.jp-audio ul>li {
    float: left;
    margin: 0 5px 0 0
}

.jp-audio ul li>a {
    display: block
}

#centervolume,
.jp-volume-bar {
    display: inline-block
}

.jp-audio ul li:last-child>a {
    border-right: none
}

.jp-audio ul li a>img {
    opacity: .8
}

.jp-audio ul li a>img:hover,
button:hover {
    opacity: 1
}

.jp-volume-bar {
    margin: 19px 5px 0;
    border-radius: 2px;
    padding: 2px;
    overflow: hidden;
    background: #000;
    width: 178px;
    height: 8px;
    cursor: pointer
}

li.social,
ul.social {
    padding-right: 0
}

.jp-volume-bar-value {
    width: 0;
    height: 8px
}

button {
    border: none;
    outline: 0;
    background: 0 0;
    cursor: pointer;
    opacity: .8
}

button img {
    height: 46px;
    width: auto
}

#volume {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    float: left
}

#social {
    display: block;
    width: 310px;
    height: auto;
    background-color: #CCC;
    text-align: right
}

.lpallelem,
li.social {
    display: inline-block
}

ul.social {
    list-style-type: none;
    margin: 5px 0 0
}

li.social img {
    height: 30px;
    width: auto
}

li.social a>img {
    opacity: .7
}

#mosaicradio li img:hover,
li.social a>img:hover {
    opacity: 1
}

#mobilemenu {
    visibility: hidden;
    height: 0
}

#lastplay {
    z-index: 100;
    top: 130px;
    height: 277px;
    background-color: rgba(239, 239, 239, .7);
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    -moz-transition: max-height .5s ease-in-out;
    -o-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out
}

#lastplay.closed,
#mosaicradio {
    -webkit-transition: max-height .5s ease-in-out;
    -moz-transition: max-height .5s ease-in-out;
    -o-transition: max-height .5s ease-in-out;
    overflow-y: hidden
}

#lastplay.closed {
    max-height: 750px;
    transition: max-height .5s ease-in-out
}

.alignlastplay {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px
}

.lpallelem {
    width: 124px;
    height: 235px;
    vertical-align: top;
    background-color: rgba(255, 255, 255, .99);
    padding: 10px;
    text-align: center;
    margin: 3px
}

#mosaicradio,
#mosaicradio.mosaicclosed,
.alignmosaicradio {
    margin-left: auto;
    margin-right: auto
}

.lpallelem img {
    max-width: 100%;
    max-height: 100%
}

.lptitle {
    font-size: 12px
}

.currentSong {
    font-weight: 700
}

#mosaicradio {
    z-index: 200;
    top: 0;
    height: 496px;
    background-color: rgba(239, 239, 239, .85);
    max-height: 0;
    transition: max-height .5s ease-in-out
}

#mosaicradio.mosaicclosed {
    max-height: 100%;
    overflow-y: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    -moz-transition: max-height .5s ease-in-out;
    -o-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out;
    cursor: grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: -webkit-grab
}

#mosaicradio ul {
    list-style-type: none;
    padding-left: 0
}

#mosaicradio li {
    display: inline;
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 5px solid #fff
}

#mosaicradio li img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    height: 150px;
    opacity: .8
}

.alignmosaicradio {
    width: 750px;
    padding: 10px;
    text-align: center;
    Line-Height: 10px
}

.alignmosaicradio button {
    padding: 20px
}
/*
@media only screen and (min-device-width: 320px) and (max-device-width: 480px),
screen and (max-device-width: 700px),
screen and (min-device-width: 768px) and (max-device-width: 1024px),
screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2),
screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3),
screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3),
screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3),
screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3),
screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    #center,
    #logo,
    #nav,
    #player,
    #pub,
    #social {
        position: absolute
    }
    #icoradio,
    #navnomradio {
        display: none
    }
    #center,
    #logo,
    #playerall {
        background-position: center
    }
    #centerplaystop,
    #playstop {
        margin-left: auto;
        margin-right: auto
    }
    #logo,
    #nav,
    #pub {
        width: 100%;
        text-align: center
    }
    #nav,
    #player {
        background-color: #FFF
    }
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        background-color: #323232;
        padding: 0;
        margin: 0
    }
    #playerall {
        width: 100%;
        height: 100%;
        background-image: url(../img/backplay.png)
    }
    #playercontent {
        position: relative;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
    #nav {
        top: 0;
        display: block;
        height: 50px;
        overflow: hidden
    }
    #icoradio {
        vertical-align: middle;
        padding-left: 0
    }
    #playstop,
    li.social {
        display: inline-block;
        vertical-align: middle
    }
    #currentSong {
        margin-top: 12px;
        text-overflow: ellipsis;
        width: 97%
    }
    #coversong {
        visibility: hidden
    }
    #logo {
        top: 45px;
        height: 80px;
        background-image: url(../img/headermobile.png)
    }
    #center {
        top: 125px;
        width: 100%;
        background-image: url(../img/backmobile.png)
    }
    #playstop {
        width: 100%;
        height: 225px;
        z-index: 100
    }
    #centerplaystop {
        width: 360px;
        height: 222px;
        margin-top: 25px
    }
    #logoradio {
        margin-top: 30px;
        width: 320px;
        height: 222px
    }
    #pub {
        top: 400px;
        margin-left: 0;
        left: 0;
        height: 0;
        background-color: #fff
    }
    #divpub {
        width: 300px;
        height: 250px
    }
    #player {
        top: 400px;
        width: 100%;
        height: 50px;
        display: none
    }
    .jp-audio ul {
        padding: 0;
        margin: 0 0 0 15px;
        width: 100%;
        list-style: none
    }
    .jp-volume-bar {
        margin: 13px 10px 0;
        width: 200px;
        height: 20px;
        cursor: pointer
    }
    #volume,
    ul.social {
        margin-left: auto;
        margin-right: auto
    }
    .jp-volume-bar-value {
        height: 20px
    }
    #volume {
        width: 360px;
        height: 50px
    }
    #social {
        top: 345px;
        width: 100%;
        height: auto;
        background-color: #CCC;
        text-align: right
    }
    ul.social {
        list-style-type: none;
        text-align: center;
        padding: 0
    }
    li.social {
        padding-right: 20px
    }
    li.social img {
        height: 50px;
        width: auto
    }
    #lastplay,
    #mobilemenu {
        width: 100%;
        position: absolute
    }
    li.social a>img {
        opacity: 1
    }
    #mobilemenu {
        visibility: visible;
        top: 275px;
        background-color: #FFF;
        text-align: center;
        height: 71px
    }
    #mobilemenu img {
        height: 70px;
        width: auto
    }
    #lastplay {
        z-index: 100;
        top: 0;
        height: 277px;
        background-color: rgba(239, 239, 239, .7);
        max-height: 0;
        overflow-y: hidden;
        -webkit-transition: max-height .5s ease-in-out;
        -moz-transition: max-height .5s ease-in-out;
        -o-transition: max-height .5s ease-in-out;
        transition: max-height .5s ease-in-out
    }
    #lastplay.closed,
    #mosaicradio {
        overflow-y: hidden;
        -webkit-transition: max-height .5s ease-in-out;
        -moz-transition: max-height .5s ease-in-out;
        -o-transition: max-height .5s ease-in-out
    }
    #lastplay.closed {
        max-height: 755px;
        transition: max-height .5s ease-in-out
    }
    .alignlastplay {
        width: 755px
    }
    #mosaicradio {
        z-index: 200;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(239, 239, 239, .85);
        transition: max-height .5s ease-in-out
    }
    #mosaicradio.mosaicclosed {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        -webkit-transition: max-height .5s ease-in-out;
        -moz-transition: max-height .5s ease-in-out;
        -o-transition: max-height .5s ease-in-out;
        transition: max-height .5s ease-in-out
    }
    .alignmosaicradio {
        width: auto;
        height: auto
    }
}*/

.animated {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes tada {
    0%,
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
}

@keyframes tada {
    0%,
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

a{text-decoration:none;}