@font-face {
    font-family: 'ComfortAA Bold';    	
	src: url('../fonts/Comfortaa_Bold.ttf');	
}

header, nav, menu, main, section, article, aside, address, footer {
  display: block;
}

a {
	text-decoration: underline;
	color: #3399ff;
}

	a:hover {
		text-decoration: none;
	}



body {
	font: normal normal 16px/24px PT Sans, sans-serif;
	color: #333;		
	height: 100%;
	width: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
/*    overflow: hidden;*/
	/* background: url('../img/bg.jpg') center top no-repeat; */
}

input::-moz-placeholder {
	color: #a39f91;
    opacity: 1;
}
input:-ms-input-placeholder {
    color: #a39f91;
}
input::-webkit-input-placeholder {
    color: #a39f91;
}
textarea::-moz-placeholder {
	color: #a39f91;
    opacity: 1;
}
textarea:-ms-input-placeholder {
    color: #a39f91;
}
textarea::-webkit-input-placeholder {
    color: #a39f91;
}


							.htdb_block {
								width:380px;
								height: 140px;
								float: left;
								margin: 0 16px 0 0;								
								position: relative;
							}
							
							.pause_play2 i{
								position: absolute;
								top: -165%;
								left: -3%;
								margin: 2px 0 0 18px;
								width: 350px;
								height: 222px;
/*							    background: url('../images/Cassette.gif'); */
							    background: url('../images/volnad2.gif') no-repeat;
							}
							
							#player_shell, .player_shell {
								background: url('../images/play2.png') no-repeat;
								margin:  220px 12px 0 0;
							}
							
								#player_shell a#play, .player_shell a.play {
									width: 253px;
									height: 62px;
									display: block;
									float: left;
									padding: 0 0 0 78px;
									background: url('../images/pause_play.png') 29px 23px no-repeat;
/*									font: 18px/62px 'ComfortAA Bold', Arial, monospace; */
									font: 18px/62px 'PT Sans', sans-serif;
									color: #0061ab;
									text-decoration: none;
									text-transform: uppercase;
									letter-spacing: 0.1em;
								}

								
									#player_shell a#play:hover, .player_shell a.play:hover {
										text-decoration: underline;
									}
									
								#player, .player {
									margin: 5px 0 0 12px;
									width: 378px;
									height: 50px;
									position: relative;
								}
								
								.player {
									margin: 0;
									padding: 5px 0 0 12px;
									width: 275px;
									height: 57px;									
								}
								
								
									.pause_play {
										width: 50px;
										height: 50px;
										margin: 0 11px 0 0;										
										float: left;
										display: block;
										position: relative;
									}
									
										.pause_play i{ 
											position: absolute;
											top: 12%;
										   left: 15%;
											margin: 0px 0 0 154px;
											width: 35px;
											height: 42px;
											background: url('../images/pause_play.png');
										}
										
									    .pause_play#player_play i, .pause_play.player_play i {
											background-position: 0 42px;
										}
										
										.pause_play2#player_play i, .pause_play.player_play i {
											background-position: 0 -223px;
										}
									
									#player_stop, .player_stop {
										width: 64px;
										height: 60px;
										margin: 30px 0px 0px 74px;
										background: url('../images/stop.png') no-repeat;
										float: left;
										display: block;
									}
									

									
										#ps_nosound, .ps_nosound {
											width: 38px;
											height: 56px;
											margin: 30px 8px 0 0;
											background: url('../imgmobil/viklvolum.png') no-repeat;
											float: left;
											display: block;
										}
										

										
										#ps_sound, .ps_sound {
											width: 39px;
											height: 57px;
											margin: 30px 0 0 0px;
											background: url('../imgmobil/vklvol.png') no-repeat;
											float: left;
											display: block; 
										}
									
									#player_settings {
										width: 64px;										
										margin: 30px 0 0 40px;										
										float: left;
										position: relative;										
										font: 9px/28px Arial, monospace;								
									}
									
										#player_settings a{
											color: #ffffff;
											text-decoration: none;
											background: url('../images/setting.png') no-repeat;
											padding: 50px 0 0 9px;
											display: block;
											float: left;
										}
										
											#player_settings a:hover{
												text-decoration: underline;
											}
									
										#settings_dropdown {
											display: none;
											position: absolute;
											top: 26px;
											left: 10px;
											padding: 12px 0 9px 12px;
											width: 73px;
											background: #f4f4ef;
											border: 1px solid #ccc;
										}
										
											#settings_dropdown ul {
										
											}
											
												#settings_dropdown ul li {
													width: 100%;
													white-space: nowrap;
													margin: 0 0 3px;
													color: #a09e90;
													font: 9px/11px Arial, monospace;
													float: left;
												}
												
													#settings_dropdown ul li a{
														color: #a09e90;
														background: transparent;
														padding: 0;
													}
													
													#settings_dropdown ul li a:hover{
														color: #3761a7;
													}


	#rw_recent {
		width: 370px;
		float: left;
		margin: 0 0 22px;
	}
	
		#rwr_header {
			width: 296px;
			float: left;
			margin: 0 0 22px 74px;
			font: 12px/14px Arial, monospace;
			color: #a3bad7;
		}
		
		#rwr_body {
			width: 370px;
			float: left;		
		}
		
			#rwr_body ul {
		
			}
			
				#rwr_body ul li{
					width: 370px;
					float: left;
					margin: 0 0 3px;
					font: 12px/14px Arial, monospace;
			
				}
				
					.rwr_time{
						float: left;
						margin: 0 12px 0 0;
						width: 61px;
						color: #a3bad7;
						text-align: right;
					}
					
					.rwr_time2{
						float: left;
						margin: 0 12px 0 0;
						font: normal normal 18px/24px PT Sans, sans-serif;
						font-weight: 700;
						width: 61px;
						color: #0061ab;
						text-align: right;
					}
					
					.rwr_song{
						float: left;
						margin: 0 15px 0 0;
						width: 282px;
						color: #0061ab;
					}
					
					.rwr_song2{
						float: left;
						text-align: left;
						font: normal normal 18px/24px PT Sans, sans-serif;
						font-weight: 700;
						margin: 0 15px 0 0;
						width: 282px;
						color: #0061ab;
					}
					
					.rwr_song3{
						float: left;
						text-align: left;
						font: normal normal 16px/24px PT Sans, sans-serif;
						font-weight: 700;
						margin: 0 15px 0 0;
						width: 282px;
						color: #0061ab;
					}
	
									#player_social_tel, .player_social_tel {
										width: 22px;
										height: 22px;
										margin: 13px 0px 0px 120px;
										background: url('../images/tel.png') no-repeat;
										float: left;
										display: block;
									}
									
									
									#player_social_mail, .player_social_mail {
										width: 22px;
										height: 22px;
										margin: 13px 0px 0px 26px;
										background: url('../images/mail.png') no-repeat;
										float: left;
										display: block;
									}
									
									
									#player_social_vk, .player_social_vk {
										width: 22px;
										height: 22px;
										margin: 13px 122px 0px 0px;
										background: url('../images/vk.png') no-repeat;
										float: right;
										display: block;
									}
									
									
									
/**********All styles popup**********/
.popup {
padding:5px 15px 15px;
position:fixed;
top:300px;
left:53%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}

.popup h2 {
font:bold 18px/32px Arial, san-serif;
}
.popup a.close, .modal-wrapper .close {
	width:16px;
	height:16px;
	display:block;
	text-indent:-9999px;
	position:absolute;
	top:10px;
	right:10px;
	background:url(../images/close.png) no-repeat;
	cursor: pointer;
}

/**********popup with form**********/
.tel_form {
margin-left:-200px;
width:266px;
}
.tel_form form {
margin-top:10px;
}
.tel_form label {
width:200px;
height:26px;
font:bold 12px/26px Arial, san-serif;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.tel_form input[type=text], .tel_form input[type=password] {
margin-bottom:10px;
padding:0 3px;
width:274px;
height:22px;
font:bold 12px/26px Arial, san-serif;
border:1px solid #ccc;
}
.tel_form input[type=submit] {
margin:10px 15px 0 0;
padding:3px 10px;
float:right;
background:#ccc;
border:0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:bold 10px Arial, san-serif;
text-transform:uppercase;
position:relative;
cursor:pointer;
behavior: url(PIE.htc);
}
.tel_form input[type=submit]:hover {
color:#fff;
}

  a.btn {
/*  width: 200px;
  padding: 18px 0;
  position: absolute;*/
/*  top: 50%; 
  left: 50%; */
/*  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;*/
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}
.modal {
  width: 500px;
  display: block;
  margin: 30% 0 0 -250px;
  position: relative;
  top: 50%; 
  left: 50%;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #fafafa;
}
.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}
.head{
  width: 100%;
  height: 100%;
  margin: 0 0 14px;
  padding: 5px 30px;
  overflow: hidden;
  position: absolute;
}
.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}
.modal .content {
  padding: 0 0 20px 0;
}
.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 45px;
}
.form_modal_window{
  max-width: 70%;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.modal .content .text{
  /*background: url("../Bright-Purple-Wallpaper-59-images.jpg");*/
  color: #fff;
  padding: 10px;
  margin: 20px 0;
}
.modal .content .text h2{
  margin:0;
  font-size: 35px;
}
.modal .content .text p{
  margin:0;
  font-size: 14px;
}
.modal-wrapper{
  margin: 0 0 20px 0;
}
.modal .content form input {
  color: #000;
  padding: 15px;
  border: none;
  margin-bottom: 15px;
  box-shadow: 0px 1px 3px 1px #e9e9e9;
  font-size: 15px;
}
.modal .content form textarea {
  color: #000;
  padding: 15px;
  border: none;
  margin-bottom: 15px;
  box-shadow: 0px 1px 3px 1px #e9e9e9;
  font-size: 17px;
}
.modal .content form input[type=submit]{
  padding: 10px 40px;
  max-width: 200px;
  margin: 10px 0 0 60px;
  border-radius: 54px;
  color: #fff;
  background: #f7b231;
  background: -moz-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: -webkit-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: linear-gradient(to bottom, #ffc281 0%, #ff8c97 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-yellow', endColorstr='$color-pink', GradientType=0);
  font-size: 15px;
  text-shadow: 0px 0px 6px #e54242;
  display: inline-block;
  border: none;
  outline: none;
}

@media screen  and (max-width: 576px) {
	.modal {
		width: 320px;
		margin: 33% 0 0 -160px;
	}

	.modal-wrapper.open .modal {
		margin-top: -70%;
	}
}