/*
* -------------------------------
* common 
* ------------------------------- 
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic');
* { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 12px; }
::-webkit-input-placeholder  { color:#7d7d7d; font-weight: normal; }
input:-moz-placeholder { color:#7d7d7d; font-weight: normal; }
a,
a:visited, 
a:hover,
a:active
{ text-decoration: none; outline: none; color: #000000}
a img { border: none; }
ul { list-style: none outside; display: block; }
p { padding-bottom: 0px;width: 100%;}
div { position:relative; }
fieldset { border:none; }
strong { font-weight: bold; }
body { background: #ffffff; }
.cleaner { display: block; height: 1px; clear: both; overflow: hidden; font-size: 1px; }

.col.w3 .input .field textarea,
.col.w3 .input .field input.field { width: 85%;  }

form .errors { border: 1px solid #dfc7c5; background: #f9e4e1; margin-bottom: 10px; }
form .errors li { padding: 5px 10px 5px 35px; background: url('images/exclamation.png') 10px 6px no-repeat;  }
form .errors li label {  }

form .success { border: 1px solid #c7dfc5; background: #e4f9e1; margin-bottom: 10px; }
form .success li { padding: 5px 10px 5px 35px; background: url('images/success.png') 10px 6px no-repeat;  }
form .success li label {  }

input.round { height: 35px; border: 1px solid #cccccc; border-radius: 5px; line-height: 35px; padding: 0px 15px; font-family: Tahoma; font-size: 16px; color: #7d7d7d; background: url('images/input-bg.png') repeat-x; }

/* Typography */
h1 { font-size: 36px; font-weight: 300; text-transform: uppercase; } 
h2 { font-size: 1.6em; } 
h3 { font-size: 1.4em; } 
h4 { font-size: 1.2em; } 
p { font-size: 1.2em ; color: #696969; }
label { font-size: 1em ; color: #696969; }
strong { color: #696969; }
.heading { min-height: 40px; line-height: 40px; text-align: center; background: #fff url('images/heading_gradient.png') 0 0 repeat; border: 1px solid #c0daff; color: #696969;  }
.heading.twolines { line-height: 20px;}

.button  { display: inline-block; height: 37px; padding: 0 0 0 5px; background: url('images/orange_button_l.png') 0 0 no-repeat; }
.button span { display: block; padding: 0 15px 0 10px; line-height: 37px;  color: #FFF; font-size: 16px; background: url('images/orange_button_r.png') top right no-repeat;}
.button.right { float: right; margin-left: 15px; }
.button.center { float: none; }
/* Layout */
.page_wrap { max-width: 1108px; margin:0 auto; overflow:hidden; padding: 0px 16px; }
.col { float:left; display:block; overflow:hidden; }
.inn { padding: 10px; }
.panel { background-color:#FFF; padding:10px; border-radius: 5px 5px; box-shadow: 1px 1px 3px #cacaca; }

.header { position:fixed; width: 100%; min-height: 160px; z-index: 100; top: 0px; background: #ffffff; }
.listen  { position:relative; width: 100%; min-height: 540px; background: #f5f5f5; margin-top: 160px; }
.listen h1 { color: #2e2e2e; width: 100%; text-align: center; line-height: 140px; } 
.apps  { position:relative; width: 100%; min-height: 660px; padding-top: 260px; background: url('images/apps.jpg') center 0 no-repeat; }
.about  { position:relative; width: 100%; min-height: 680px; padding-top: 240px; background: url('images/about.jpg') center 0 no-repeat, linear-gradient(to right, #b7000f 0%,#b7000f 50%,#b7000f 50%,#54087a 50%,#54087a 100%); }
.contact { position:relative; width: 100%; min-height: 540px; padding-top: 60px; padding-bottom: 40px; }

.page_wrap p { font-size: 23px; font-weight: 300; }
.page_wrap .separator { width: 63px; height: 3px; margin: 34px 0px 43px 0px; }

.white h1 { color: #2e2e2e; }
.white p { color: #5c5c5c; }
.white .separator { background: #e3000f; }

.color h1,
.color p {color: #ffffff; }
.color .separator { background: #ffffff; }

.apps h1 { max-width: 445px;}
.apps p {max-width: 540px; }
.apps .links { float: left; position: relative; margin: 40px 0px; }
.apps .links a.ios{ float: left; position: relative; width:219px; height: 65px; background: url('images/app-store-badge.svg') no-repeat; background-size: 219px 65px; background-position: center; padding: 16px; }
.apps .links a.android{ float: left; position: relative; width:250px; height: 97px; background: url('images/google-play-badge.png'); background-size: cover;}

.about h1,
.about .separator,
.about p {max-width: 540px; margin-left: 570px; }
.about p {width: 37%;}

.contact .info { position: relative; float: left; max-width: 344px; margin-right: 32px; }
.contact .form { position: relative; float: left; max-width: 732px; }

.contact input.field,
.contact textarea { border: 1px solid #f5f5f5; border-radius: 2px; background: #f5f5f5; color: #272727;; font-size: 13px; line-height: 23px; padding: 14px 20px; resize: none; }
.contact input.field:focus, 
.contact textarea:focus {outline: none; border-color: #272727; }

.contact .input { margin-bottom: 12px; float: left; position: relative;}
.contact .field { margin-bottom: 12px; float: left; position: relative;}

.contact .w1 { min-width: 692px; }
.contact .w2 { min-width: 308px; }
.contact .w2.left { margin-right: 32px; }

.contact input.button { text-transform: uppercase; font-size: 18px; color: #e3000f; background: #ffffff; border: 2px solid #e3000f; border-radius: 22px; height: 45px; padding: 11px 54px; }
.contact input:focus { outline: none; }

.order h1 { margin: 20px 0px 0px; }
.order h2 { margin: 0px 0px 10px; }
.order .w1 { width:50%; box-sizing: border-box; overfow: hidden; }
.order .w1.left { float: left; border-right: 16px solid transparent; }
.order .w1.right { float: right; border-left: 16px solid transparent; }
.logo { position: fixed; top:17px; left:20px; }
.header .right { float:right; margin: 30px 10px 10px 120px;}
.header .cleaner { clear: both;}
ul.menu { float: left; position: relative; margin: 17px 5px 5px 5px;}
ul.menu li { float: left; position: relative; }
ul.menu li a { font-size: 15px; color: #2e2e2e; line-height: 20px; text-transform: uppercase; padding: 24px 20px; display: block; }
ul.menu li a:hover,
ul.menu li a.selected { color: #e3000f; }
ul.menu li a.tunein, 
ul.menu li a.android, 
ul.menu li a.ios, 
ul.menu li a.wmp, 
ul.menu li a.winamp 
{ position: relative; float: left; display: block; width: 48px; height: 48px; text-indent: 1000px; background: url('images/playlist-download.png') no-repeat; background-position: 0px 0px; overflow: hidden; padding: 0px; white-space: nowrap; margin: 10px; }

ul.menu li a.wmp { background-position: -48px 0px; }
ul.menu li a.tunein { background-position: -96px 0px; } 
ul.menu li a.ios { background-position: -144px 0px; }
ul.menu li a.android { background-position: -192px 0px; } 

.header .station1, 
.header .station2 { float: left; width: 380px; height: 100px; margin: 5px 16px; }
.header a.facebook { position: relative; float: left; display: block; width: 70px; text-indent: 1000px; background: url('images/facebook.jpg') no-repeat; background-size: 34px 34px; background-position: center; overflow: hidden;}

.embed .header .station1, 
.embed .header .station2 { margin: 0px; }

.player { display: block; position: relative; float: left; width: 500px; }
/*
.player.playing h3 {  animation: scroll-horizontal 15s linear infinite; width: min-content; }
@keyframes scroll-horizontal {
 0%   { transform: translateX(0); }
 50% { transform: translateX(400px); }
 50.001%   { transform: translateX(-102%); }
 100%   { transform: translateX(0); }
}
*/
.players { position: relative; display:block; background: #ffffff; max-width: 820px; margin: 0 auto;}
.players .right { float: left; position: relative; display:block; background: #ffffff; }
.player  {float: left; position: relative; display:block; clear: left; padding: 28px 0px; }
.players .image {float: left; position: relative; display:block; width: 300px; height: 300px; padding: 10px 10px 11px 10px; background: #ffffff; }
.player.separator { height: 1px; background: #e8e8e8; width: 480px; margin: 0px 10px; padding: 0px;}
.player button.play { display: block; position: relative; float: left; height: 64px; width: 64px; margin: 20px 13px; background: url('images//playpause.png') -64px 0px no-repeat; border: none; cursor: pointer; }
.player button:focus { outline: none; }
.player button.sound { display: block; position: relative; float: left; height: 20px; width: 20px; background: url('images//sound.png') 0px 0px no-repeat; border: none; }
.player.playing button { background-position: 0px 0px; }
.player .controls { display: block; position: relative; float: left; width: 400px; overflow: hidden ;}
.player .volume-slider { margin: 0px 10px 0px 30px; max-width: 250px; }
.player h2 { font-size: 18px; font-weight: 700; text-transform: uppercase; color: #2e2e2e; }
.player h3 { font-size: 18px; font-weight: 300; line-height: 30px; height: 60px; display: table-cell; vertical-align: middle; white-space: normal; color: #2e2e2e; }


.header .player {  width: 380px; padding: 15px 0px; }
.header .player button.play { position: fixed;  height: 69px; width: 69px; background: url('images//playpause_small.png') -69px 0px no-repeat; margin: 0px 0px; z-index: 1;}
.header .player.playing button { background-position: 0px 0px; }
.header .player img { position: fixed;  height: 60px; width: 60px; display: block; z-index: 0; margin: 4.5px; }
.header .player h2 { font-size: 15px; font-weight: 400; margin-left: 85px; }
.header .player h3 { font-size: 14px; line-height: 15px; display: table-cell; vertical-align: middle; height: 30px; white-space: normal; padding-left: 85px; }
.header .player button.sound { margin-left: 85px; }
.header .player .volume-slider { margin: 2px 10px 0px 115px; max-width: 250px; }
.header .player .controls  { width: 370px; }

a.ui-slider-handle { background: #e5111f !important; width: 10px !important; height: 10px !important; border-radius: 6px; border: 1px solid #e5111f !important; top: 4px !important;}
a.ui-slider-handle:hover { cursor: pointer; }
.ui-slider-range-min { background: repeating-linear-gradient(
  to bottom,
  transparent,
  transparent 9px,
  #e5111f 9px,
  #e5111f 11px,
  transparent 11px,
  transparent 20px
) !important; }
.ui-slider-horizontal { background: repeating-linear-gradient(
  to bottom,
  transparent,
  transparent 9px,
  #e0e0e0 9px,
  #e0e0e0 11px,
  transparent 11px,
  transparent 20px
) !important; height: 20px !important; border: none;}

textarea.izbori_area {width: 250px; }