@charset "utf-8";
html{
    background-color: #000;
}

body {
    margin: 0;
    padding: 0;
	margin: 0px 0px 0px 0px;
	font-family: Verdana, sans-serif; 
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
   	background: #292929 url('../../../img/backgrounds/1116631573.jpg?1735152414') no-repeat center center fixed; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
}

#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 {
    z-index: 50;
    position: absolute;
    right: 0;
    margin-top: -6px;
}

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

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

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

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

#center,
#pub {
    height: 275px;
}

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

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

#nav,
#player {
    width: 720px;
    background-color: #FFF;
    opacity: 0.8;
}

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

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

#playercontent {
    /* position: relative; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* width: 770px; */
    /* height: 480px; */
}

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

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

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

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

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

#center {
    width: 770px;
    /* background-image: url(../img/back.png); */
}

#playstop {
    height: 225px;
}

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

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

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

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

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

.jp-audio ul > li {
    float: left;
    margin: 0 0px 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 {
    width: 250px;
    height: 20px;
    margin: 13px 5px 0;
    padding: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: #e7e7e7;
    cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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;
    max-height: 0;
    overflow-y: hidden;
    background-color: rgba(239, 239, 239, .7);
    -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: 750px;
    transition: max-height .5s ease-in-out;
}

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

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

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

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

.lptitle {
    font-size: 12px;
}

.currentSong {
    font-weight: 700;
}

/* #mosaicradio { */
    /* z-index: 200; */
    /* top: 0; */
    /* height: 496px; */
    /* max-height: 0; */
    /* background-color: rgba(239, 239, 239, .85); */
    /* 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 { */
    /* padding-left: 0; */
    /* list-style-type: none; */
/* } */

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

/* #mosaicradio li img { */
    /* height: 150px; */
    /* -webkit-border-radius: 50%; */
    /* -moz-border-radius: 50%; */
    /* -khtml-border-radius: 50%; */
    /* border-radius: 50%; */
    /* 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-right: auto;
        margin-left: auto;
    }

    #logo,
    #nav,
    #pub {
        width: 100%;
        text-align: center;
    }

    #nav,
    #player {
        background-color: #FFF;
    }

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

    #playerall {
        width: 100%;
        height: 100%;
        /* background-image: url(../img/backplay.png); */
    }

    #playercontent {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    #nav {
        display: block;
        top: 0;
        height: 50px;
        overflow: hidden;
    }

    #icoradio {
        padding-left: 0;
        vertical-align: middle;
    }

    #playstop,
    li.social {
        display: inline-block;
        vertical-align: middle;
    }

    #currentSong {
        width: 97%;
        margin-top: 12px;
        text-overflow: ellipsis;
    }

    #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 {
        z-index: 100;
        width: 100%;
        height: 225px;
    }

    #centerplaystop {
        width: 360px;
        height: 222px;
        margin-top: 25px;
    }

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

    #pub {
        top: 400px;
        left: 0;
        height: 0;
        margin-left: 0;
        background-color: #fff;
    }

    #divpub {
        width: 300px;
        height: 250px;
    }

    #player {
        display: none;
        top: 400px;
        width: 100%;
        height: 50px;
    }

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

    .jp-volume-bar {
        width: 200px;
        height: 20px;
        margin: 13px 10px 0;
        cursor: pointer;
    }

    #volume,
    ul.social {
        margin-right: auto;
        margin-left: auto;
    }

    .jp-volume-bar-value {
        height: 20px;
    }

    #volume {
        width: 360px;
        height: 50px;
    }

    #social {
        top: 345px;
        width: 100%;
        height: auto;
        text-align: right;
        background-color: #CCC;
    }

    ul.social {
        padding: 0;
        text-align: center;
        list-style-type: none;
    }

    li.social {
        padding-right: 20px;
    }

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

    #lastplay,
    #mobilemenu {
        position: absolute;
        width: 100%;
    }

    li.social a > img {
        opacity: 1;
    }

    #mobilemenu {
        visibility: visible;
        top: 275px;
        height: 71px;
        text-align: center;
        background-color: #FFF;
    }

    #mobilemenu img {
        width: auto;
        height: 70px;
    }

    #lastplay {
        z-index: 100;
        top: 0;
        height: 277px;
        max-height: 0;
        overflow-y: hidden;
        background-color: rgba(239, 239, 239, .7);
        -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;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 1s;
}

.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;
}