@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:370px;
	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:770px;
	background-color:#FFF
}
#center,#social {
	border-top:1px solid #efefef
}
body {
	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
	background-image:url(../img/bg.png);
	background-repeat:repeat;
	padding:0;
	margin:0
}
#playerall {
	width:770px;
	height:485px;
	background-image:url(../img/backplay.html)
}
#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;
	font-size:18px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:70%;
}
#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
}
#wrt_covers img {
	max-width:100%;
	max-height:100%
}
#logo {
	width:770px;
	height:56px;
	font-size:28px;
	text-align:left;
	padding-top:24px;
}
#center {
	width:770px;
	background-image:url(../img/back.png);
	background-position:center;
	background-size:cover;
	display:block;
}
#playstop {
	height:225px
}
#centerplaystop {
	width:300px;
	height:250px
}
#logoradio {
	width:320px;
	height:222px;
	margin-top:7%
}
#divpub {
	background-image:url(../img/antiab.html);
	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:560px;
	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:#e7e7e7;
	width:300px;
	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:770px;
	float:left
}
#social {
	display:block;
	width:770px;
	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.html)
	}
	#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;
	}
	#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
	}
	#divpub {
	    display:none;
	    
	}
}
.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
}