html {
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}

body {
margin:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display:block;
}

audio,canvas,progress,video {
display:inline-block;
vertical-align:baseline;
}

audio:not([controls]) {
display:none;
height:0;
}

[hidden],template {
display:none;
}

a {
background:transparent;
text-decoration:none;
color:inhert;
outline-style:none;
outline-width:0;
}

a:active,a:hover {
outline:0;
}

abbr[title] {
border-bottom:1px dotted;
}

b,strong {
font-weight:400;
}

dfn {
font-style:italic;
}

h1 {
font-size:2em;
margin:.67em 0;
}

mark {
background:#fff;
color:#fff;
}

small {
font-size:80%;
}

sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}

sup {
top:-.5em;
}

sub {
bottom:-.25em;
}

img {
border:0;
}

svg:not(:root) {
overflow:hidden;
}

figure {
margin:1em 40px;
}

hr {
box-sizing:content-box;
height:0;
}

code,kbd,pre,samp {
font-family:monospace,monospace;
font-size:1em;
}

button,input,optgroup,select,textarea {
color:inherit;
font:inherit;
margin:0;
}

button {
overflow:visible;
}

button,select {
text-transform:none;
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
-webkit-appearance:button;
cursor:pointer;
}

button[disabled],html input[disabled] {
cursor:default;
}

input {
line-height:normal;
}

input[type="checkbox"],input[type="radio"] {
box-sizing:border-box;
padding:0;
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
height:auto;
}

input[type="search"] {
-webkit-appearance:textfield;
box-sizing:content-box;
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}

fieldset {
border:1px solid #fff;
margin:0 2px;
padding:.35em .625em .75em;
}

optgroup {
font-weight:700;
}

table {
border-collapse:collapse;
border-spacing:0;
}

td,th {
padding:0;
}

body,html {
font-family:Roboto,sans-serif;
font-weight:300;
font-size:14px;
line-height:normal;
background-color:#transparent;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
margin:0;
padding:0;
}

.css-hint {
position:relative;
}

.css-hint:before {
bottom:-2px;
margin-bottom:-15px;
left:25px;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
margin-left:-5px;
z-index:14;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
border-color:transparent transparent rgba(0,0,0,0.85);
border-width:5px;
}

.css-hint:after {
background:rgba(0,0,0,0.85);
border-radius:3px;
color:#fff;
content:attr(data-title);
display:block;
left:0;
bottom:-28px;
position:absolute;
white-space:nowrap;
font-size:13px;
z-index:15;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
padding:6px 8px;
}

.css-hint:after,.css-hint:before {
transition:all 250ms ease-out;
-webkit-transition:all 250ms ease-out;
transform:scale(0.8);
-webkit-transform:scale(0.8);
opacity:0;
visibility:hidden;
pointer-events:none;
}

.css-hint:hover:before,.css-hint:hover:after {
transform:scale(1);
-webkit-transform:scale(1);
opacity:1;
visibility:visible;
}

.css-hint:hover:before {
margin-bottom:0;
}

.preloader {
display:block;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
font-size:14px;
color:#2f2f2f;
background:rgba(250,250,250,0.95);
transition:all 500ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:all 500ms cubic-bezier(0.25,0.8,0.25,1);
z-index:999;
}

.preloader.loadComplete {
opacity:0;
visibility:hidden;
}

.preloader .text_area {
display:block;
position:absolute;
height:50px;
left:0;
right:0;
top:40%;
margin-top:-25px;
}

.header {
display:block;
height:50px;
background:#62a8ea;
color:#fff;
}

.header .logo {
float:left;
display:inline-block;
height:50px;
line-height:50px;
margin:0 0 0 8px;
}

.header ul {
position:absolute;
list-style:none;
right:0;
font-size:0;
background:#fff;
margin:0;
padding:0;
}

.header ul>li {
position:relative;
display:inline-block;
margin:0;
padding:0;
}

.header ul>li>a {
display:inline-block;
width:55px;
height:50px;
transition:background-color 350ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:background-color 350ms cubic-bezier(0.25,0.8,0.25,1);
text-align:center;
line-height:50px;
}

.header ul>li>a:hover,.header ul>li>a.active {
background:#7db7ee;
}

.header ul>li>ul {
position:absolute;
z-index:99;
top:75%;
right:0;
background:#7db7ee;
min-width:200px;
font-size:13px;
opacity:0;
visibility:hidden;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
transition:top 250ms cubic-bezier(0.25,0.8,0.25,1),opacity 350ms cubic-bezier(0.25,0.8,0.25,1),visibility 350ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:top 250ms cubic-bezier(0.25,0.8,0.25,1),opacity 350ms cubic-bezier(0.25,0.8,0.25,1),visibility 350ms cubic-bezier(0.25,0.8,0.25,1);
box-shadow:0 3px 5px rgba(0,0,0,0.15);
overflow-y:auto;
overflow-x:hidden;
max-height:180px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}

.header ul>li>ul.active {
visibility:visible;
opacity:1;
top:100%;
}

.header ul>li>ul li {
display:block;
margin:0;
padding:0;
}

.header ul>li>ul li>a {
display:block;
line-height:normal;
width:auto;
height:auto;
text-align:left;
color:#e9f3fc;
text-decoration:none;
white-space:nowrap;
padding:10px 15px;
}

.header ul>li>ul li>a:hover {
background:rgba(255,255,255,0.15);
}

.header ul>li>ul li>a.active {
color:#fff;
font-weight:400;
}

.stats {
display:block;
text-align:center;
margin:40px 0 35px;
}

.stats .artist-image {
display:inline-block;
position:relative;
width:140px;
height:140px;
vertical-align:middle;
overflow:hidden;
box-shadow:2px 2px 5px rgba(0,0,0,0.1);
margin:0 10px;
}

.stats .artist-image .share-area {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
bottom:0;
opacity:0;
visibility:hidden;
background:rgba(255,255,255,0.85);
transition:all 200ms ease-out;
-webkit-transition:all 200ms ease-out;
transform:scale(1.5);
-webkit-transform:scale(1.5);
}

.stats .artist-image .share-area a {
transition:opacity 200ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:opacity 200ms cubic-bezier(0.25,0.8,0.25,1);
opacity:0.75;
margin:0 3px;
}

.stats .artist-image .share-area a:hover {
opacity:1;
}

.stats .artist-image .share-area a.facebook {
position:absolute;
left:-100px;
transition:left 400ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:left 400ms cubic-bezier(0.25,0.8,0.25,1);
}

.stats .artist-image .share-area a.twitter {
position:absolute;
right:-100px;
transition:right 400ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:right 400ms cubic-bezier(0.25,0.8,0.25,1);
}

.stats .artist-image .share-area span {
display:block;
font-size:15px;
text-align:center;
margin:40px 0 10px;
}

.stats .artist-image .artist-img {
z-index:1;
position:absolute;
top:0;
transition:all 400ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:all 400ms cubic-bezier(0.25,0.8,0.25,1);
}

.stats .artist-image:hover .share-area {
opacity:1;
visibility:visible;
transform:scale(1);
-webkit-transform:scale(1);
}

.stats .artist-image:hover .share-area a.facebook {
left:25px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

.stats .artist-image:hover .share-area a.twitter {
right:25px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

.stats .artist-image:hover .artist-img {
transform:scale(1.25);
-webkit-transform:scale(1.25);
}

.stats .artist-image .artist-preload {
position:absolute;
right:0;
left:0;
height:4px;
bottom:0;
z-index:6;
background-color:#159756;
-webkit-animation:preloaderbackground linear 3s infinite;
animation:preloaderbackground linear 3s infinite;
}

.stats .artist-image .artist-preload:after,.stats .artist-image .artist-preload:before {
display:block;
position:absolute;
bottom:0;
z-index:9;
width:0;
height:4px;
background:#afa;
-webkit-animation:preloaderfront ease-in 3s infinite;
animation:preloaderfront ease-in 3s infinite;
content:'';
}

.stats .artist-image .artist-preload:after {
right:50%;
}

.stats .artist-image .artist-preload:before {
left:50%;
}

.stats .onair {
display:inline-block;
vertical-align:middle;
text-align:left;
color:#414141;
font-weight:400;
margin:0 10px;
}

.stats .onair a {
color:#414141;
}

.stats .onair .artist {
font-size:20pt;
}

.stats .onair .title {
font-size:16pt;
}

.stats .onair .time {
color:#454545;
font-weight:300;
font-size:11pt;
margin:4px 0 0;
}

.player {
max-width:550px;
height:68px;
position:relative;
margin:0 auto;
padding:5px 0;
}

.player .playback {
position:absolute;
left:0;
width:68px;
height:68px;
text-align:center;
padding:0 10px;
}

.player .playback .play,.player .playback .stop {
cursor:pointer;
float:left;
}

.player .playback .play circle,.player .playback .stop circle {
fill:red;
transition:fill 200ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:fill 200ms cubic-bezier(0.25,0.8,0.25,1);
stroke-width:0;
}

.player .playback .play path,.player .playback .stop path {
fill:#fff;
}

.player .playback .play:hover circle,.player .playback .stop:hover circle {
fill:#117DD4;
}

.player .volume-control {
position:absolute;
vertical-align:middle;
left:0;
right:0;
height:28px;
margin:0 20px 0 90px;
padding:20px 10px;
}

.player .volume-control .volume-icon {
position:absolute;
left:10px;
vertical-align:middle;
cursor:pointer;
height:28px;
}

.player .volume-control .volume-slider {
position:absolute;
vertical-align:middle;
left:40px;
right:0;
top:50%;
margin-top:-2px;
}

.player .volume-control .volume-slider .vol-progress {
width:100%;
height:4px;
background:#ccc;
cursor:pointer;
margin:0 5px;
}

.player .volume-control .volume-slider .vol-progress .vol-bar {
position:relative;
display:block;
height:100%;
background:#117DD4;
width:50%;
}

.player .volume-control .volume-slider .vol-progress .circle-control {
position:absolute;
top:-4px;
right:-4px;
display:block;
width:11px;
height:11px;
background:#000;
border-radius:50%;
transition:transform 250ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:transform 250ms cubic-bezier(0.25,0.8,0.25,1);
}

.player .volume-control .volume-slider .vol-progress:hover .circle-control {
cursor:pointer;
transform:scale(1.4);
-webkit-transform:scale(1.4);
}

.player .volume-control .volume-slider .player-status {
color:#6f6f6f;
font-size:10pt;
position:absolute;
text-align:center;
width:100%;
top:100%;
margin-top:10px;
}

.player .playlists {
display:inline-block;
vertical-align:middle;
width:220px;
float:right;
height:55px;
text-align:center;
margin:6px 5px 0 0;
}

.player .playlists span {
color:#6f6f6f;
display:block;
font-size:10pt;
margin:0 0 8px;
}

.player .playlists a {
display:inline-block;
position:relative;
top:0;
transition:all 200ms cubic-bezier(0.25,0.8,0.25,1);
-webkit-transition:all 200ms cubic-bezier(0.25,0.8,0.25,1);
opacity:0.75;
margin:0 6px;
}

.player .playlists a:hover {
opacity:1;
transform:scale(1.05);
-webkit-transform:scale(1.05);
top:-4px;
}

24.9% {
width:50%;
background-color:#da4733;
}

25% {
width:0;
background-color:#3b78e7;
}

100% {
width:50%;
background-color:#159756;
}

pre,textarea {
overflow:auto;
}

button::-moz-focus-inner,input::-moz-focus-inner,legend {
border:0;
padding:0;
}

.header .logo img,.header ul>li>a img {
vertical-align:middle;
}

25%,49.9%,50%,74.9%,75%,100% {
background-color:#fff;
}

49.9%,74.9% {
width:50%;
background-color:#fff;
}

50%,75% {
width:0;
background-color:#fff;
}

@media max-width 620px{
.stats {
margin:20px 0 15px;
}

.stats .artist-image {
margin:0 0 10px;
}

.stats .onair {
display:block;
text-align:center;
margin:0 5px 10px;
}

.stats .onair .artist:after {
content:' - ';
}

.stats .onair .time {
display:none;
}

.stats .onair .artist,.stats .onair .title {
display:inline;
font-size:16px;
}
}

@media min-height 125px and max-height 339px and min-width 620px{
.stats {
margin:20px 0 15px;
}

.stats .artist-image {
width:120px;
height:120px;
}

.stats .artist-image img#artist-img {
width:120px!important;
height:120px!important;
}

.stats .artist-image:hover .share-area a.facebook {
left:18px;
}

.stats .artist-image:hover .share-area a.twitter {
right:18px;
}

.player {
padding:0;
}
}

@media max-height 125px{
body,html {
overflow:hidden;
}

.stats,.header {
display:none;
}
}

@media min-height 340px and min-width 720px{
body,html {
overflow:hidden;
}
}

@media max-width 520px{
.player .volume-control {
margin:0 225px 0 80px;
}

.player .volume-control .volume-slider .player-status {
display:none;
}
}

@media max-width 400px{
.player .volume-control {
display:none;
}
}