@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('OpenSans-Bold'),
        url(/i/fonts/Open_Sans/OpenSans-Bold.eot) format('embedded-opentype'),
        url(/i/fonts/Open_Sans/OpenSans-Bold.woff) format('woff'),
        url(/i/fonts/Open_Sans/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('OpenSans-Regular'),
        url(/i/fonts/Open_Sans/OpenSans-Regular.eot) format('embedded-opentype'),
        url(/i/fonts/Open_Sans/OpenSans-Regular.woff) format('woff'),
        url(/i/fonts/Open_Sans/OpenSans-Regular.ttf) format('truetype');
}


.iosblur {-webkit-filter: blur(18px); -moz-filter: blur(18px); -o-filter: blur(18px); -ms-filter: blur(18px); filter: blur(18pxz-index: 30;); opacity: 0.6; }
* { padding:0; margin:0; }
html, body, main { width: 100%; height: 100%; overflow: hidden; }
main { }
main .image-wrapper { width: 100%; height: 80%; overflow: hidden; position: relative; }
main .fake-heading { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-size: cover; background-position: center center; z-index: 1; }
main .image-toner { position: absolute; width: 100%; height: 100%; z-index: 2; opacity: 0.6; }

main .image-wrapper:hover .fake-heading.hovered {
	-webkit-animation: blurredback 300ms; /* Safari 4+ */
	-moz-animation:    blurredback 300ms; /* Fx 5+ */
	-o-animation:      blurredback 300ms; /* Opera 12+ */
	animation:         blurredback 300ms; /* IE 10+, Fx 29+ */
	-webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6pxz-index: 30;);
}
main .controlls { width: 100%; height: 100%; position: relative; z-index: 10; font-size: 42px; }
main .controlls > div { cursor: pointer; opacity: 0.6; color: rgba(255,255,255, 0.8); font-size: 8vw; }
main .controlls:hover > div {
	-webkit-animation: controlls 300ms; /* Safari 4+ */
	-moz-animation:    controlls 300ms; /* Fx 5+ */
	-o-animation:      controlls 300ms; /* Opera 12+ */
	animation:         controlls 300ms; /* IE 10+, Fx 29+ */
	opacity: 1;
}
main .controlls:hover > div:nth-child(2n-1) {
	-webkit-animation: controlls 300ms; /* Safari 4+ */
	-moz-animation:    controlls 300ms; /* Fx 5+ */
	-o-animation:      controlls 300ms; /* Opera 12+ */
	animation:         controlls 300ms; /* IE 10+, Fx 29+ */
	opacity: 1;
}
main .controlls:hover > div:nth-child(2) {
	-webkit-animation: controlls 300ms; /* Safari 4+ */
	-moz-animation:    controlls 300ms; /* Fx 5+ */
	-o-animation:      controlls 300ms; /* Opera 12+ */
	animation:         controlls 300ms; /* IE 10+, Fx 29+ */
	opacity: 1;
}
main .controlls > div:hover { color: #FFAE00; }
main .controlls > div:nth-child(1) { left: 10%; top: 50%; position: relative; margin-top: -4vw; }
main .controlls > div:nth-child(3) { right: 10%; top: 50%; position: relative; margin-top: -4vw; }
main .controlls > div:nth-child(2) { color: white; top: 50%; position: absolute; left: 50%; margin-left: -6vw; margin-top: -6vw; font-size: 14vw; }
main .controlls > div:hover:nth-child(2) {color: #FFAE00; }
main .trackinfo { width: 100%; height: 20%; font-family: 'Open Sans'; font-size: 4vh; overflow: hidden; position: relative; z-index: 30; }
main .trackinfo > div { width: 100%; margin: 0 2%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main .trackinfo .current-station-name { font-size: 5vh; font-weight: bold; color: white; }
main #nowplay-title { margin-top: -2px; }

@-webkit-keyframes blurredback {
	0%	{ -webkit-filter: blur(0); }
	100% { -webkit-filter: blur(6px); }
}
@-moz-keyframes blurredback {
	0%	{ -moz-filter: blur(0); }
	100% { -moz-filter: blur(6px); }
}
@-o-keyframes blurredback {
	0%	{ -o-filter: blur(0); }
	100% { -o-filter: blur(6px); }
}
@keyframes blurredback {
	0%	{ filter: blur(0pxz-index: 30;); }
	100% { filter: blur(18pxz-index: 30;); }
}


@-webkit-keyframes controlls {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@-moz-keyframes controlls {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@-o-keyframes controlls {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@keyframes controlls {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

@-webkit-keyframes buttons-margin {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@-moz-keyframes buttons-margin {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@-o-keyframes buttons-margin {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
@keyframes buttons-margin {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

.pull-left {
    float: left!important;
}
.pull-right {
    float: right!important;
}


/*Звучок*/
main .trackinfo > div{
      width: initial;
      margin: 0 2%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 100px;
  }

  main .trackinfo a{
    color: white;
    text-decoration: none;
  }

  main #volume-slider { 
    outline: none;
      position: absolute;
      right: 3%;
      cursor: pointer;
      width: 300px;
      height: 1%;
      background: #121315;
      border-radius: 5px;
      bottom: 9%;
      z-index: 200;
      max-width: 20%;
  }
  main #volume-slider .ui-slider-range { height: 100%; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: #FFAE00;     position: inherit;}
  main #volume-slider .ui-slider-range::after {
      content: '';
      height: 500%;
      display: block;
      width: 100%;
  }
  main #volume-slider .ui-slider-handle { 
    position: absolute;
      border: 1px solid rgb(211, 211, 211);
      font-weight: normal;
      color: rgb(85, 85, 85);
      height: 500%;
      top: -200%;
      width: 2%;
      background-color: rgb(211, 216, 209);
      outline: none;
  }
  main .ui-slider-range {background: #FFAE00; position: absolute; border: 0; bottom: 0; width: 100%;}