*{margin:0; padding: 0;}
html, body {height: 100%;  max-width: 100%; min-width: 40%;}
body {position: relative; color: #aa254e; background-color: #cad1db; font-family: Arial, Helvetica, sans-serif;  
max-width: 100%;}
.all {position: relative; 
  min-height: 100%; 
  height: auto !important; 
  height: 100%; 
  margin: 0 auto -115px; 
  width:auto; 
  max-width:100%; 
  background: #cad1db; 
	background-color: #cad1db;
	background: url(img/bgm1.jpg) no-repeat top center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;	
}
.footer {position: absolute; width: 100%; bottom: 0px; float: left; }
.push {height: 100%; position: relative;}
.container {min-height: 280px; position: relative;}
.logo {width: 30%; top: 40px; min-width: 100px; max-width: 397px; padding: 0; overflow: visible; margin: auto 0; 
  position: absolute; left: 4%; background: url(img/myzza.png) top left no-repeat;background-size: 100%; 
}
#knopka {float: left; position: relative; width: 120px; height: 120px; margin-top: 10%; background:url(img/album_blue.png)}
#knopka img:hover {
	opacity:0;
}

.releases {width:340px; height:100px; padding: 0; overflow: visible; position: relative; }
.pic {width:100px; height: 100px;}
.cont { position:relative; width: 100px; height: 100px; float: left; margin-top: 10px; margin-right: 10px;
}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

.pad {position: relative; left:4%; width: 92%;}
.contacts { position: relative; float: right; padding-top:24px; padding-bottom:20px; height: 100%; right: 10px; text-align: right; font-weight: 100;}
.phone {color: #444b59; font-size: 100%;}
.email a {color: #aa254e; font-size: 80%;}
.vl0 {vertical-align: middle;}
.vl1 {margin-right:5px; vertical-align: middle;}
.vl2 {margin-right:10px; vertical-align: middle;}
.vocallab {display: inline-block; 
float; right; vertical-align: middle;}

.media {position: absolute; width:40; height: 340; right: 4%; top: 100px; z-index: 1;}

.anons1 p {width: 250px; padding-top: 40%; font-size: 140%; font-weight: 100; float: left; line-height: 1.3em; color: #687287}

.social_web {position: relative; margin: 0 auto;}
.social_list {display: inline-block; list-style-type: none; position: relative; margin-top:10px; /* left: 50%; margin-left: -200px; top: 30px; */}
.social_item {position: relative; float: left; width: 36px; height: 36px; margin-right: 5px; background: url(img/sprite.png) no-repeat;}
.social_item a {display: block; text-decoration: none; width: 34px; height: 34px;}
.social_item.vk {background-position: 0 -40px;}
.social_item.fb {background-position: -42px -40px;}
.social_item.odnkl {background-position: -84px -40px;}
.social_item.tw {background-position: -126px -40px;}
.social_item.insta {background-position: -168px -40px;;}
.social_item.ytb {background-position: -210px -40px;}
.social_item.lj {background-position: -252px -40px; width: 41px;}
.social_item.sndcld {background-position: -300px -40px;}
.social_item.promodj {background-position: -344px -40px;}
.social_item.periscope {background-position: -386px -40px;}

/* player */
.audioplayer {
	width: 25em;
	float: left;
	margin-left: 0.2em;
	color: #aa254e;
	font-family: Helvetica Light, sans-serif;
}
.audioplayer-time {font-size: 13px; line-height: 3.575em;}
.audioplayer-bar {margin-top:0;}
.audioplayer-volume-button {margin-top: 3px;}
.player {margin-right: 9%; float: left; margin-bottom: 15px;margin-top: 15px;}
.player, .social_web, .contacts {display: inline-block;}
.song_name {color: #aa254e; font-size: 13px; width: 100%; text-align: center;}

@media (max-width: 1000px){
.logo {top: 20px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 30%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 20px}
.media img {width:80%;height:80%;}

.releases {padding-top: 20px; width:180px; height:80px; padding: 0; overflow: visible; position: relative; }
.pic {width:80px; height: 80px;}
.cont { position:relative; width: 80px; height: 80px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

@media (max-width: 800px){
.logo {top: 20px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 35%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 20px}
.media img {width:80%;height:80%;}

.releases {width:140px; height:60px; padding: 0; overflow: visible; position: relative; }
.pic {width:60px; height: 60px;}
.cont { position:relative; width: 60px; height: 60px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

@media (max-width: 600px){
.logo {top: 20px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 35%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 20px}
.media img {width:80%;height:80%;}

.releases {width:120px; height:50px; padding: 0; overflow: visible; position: relative; }
.pic {width:50px; height: 50px;}
.cont { position:relative; width: 50px; height: 50px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

@media (max-width: 500px){
.logo {top: 20px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 35%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 20px}
.media img {width:80%;height:80%;}

.releases {width:110px; height:50px; padding: 0; overflow: visible; position: relative; }
.pic {width:50px; height: 50px;}
.cont { position:relative; width: 50px; height: 50px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

@media (max-width: 400px){
.logo {top: 10px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 35%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 10px}
.media img {width:80%;height:80%;}

.releases {width:30px; height:40px; padding: 0; overflow: visible; position: relative; }
.pic {width:30px; height: 30px;}
.cont { position:relative; width: 30px; height: 30px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}

@media screen and (max-device-width: 400px){
.logo {top: 10px; width:30%; background-size: 100%; }
.anons1 p {width: 40%;padding-top: 35%; font-size: 90%; font-weight: 100; line-height: 1.3em; color: #687287}
.media {top: 10px}
.media img {width:80%;height:80%;}

.releases {width:30px; height:70px; padding: 0; overflow: visible; position: relative; }
.pic {width:30px; height: 30px;}
.cont { position:relative; width: 30px; height: 30px; margin-top: 10px; margin-right: 10px;}
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; } 
.imgC1 { position:absolute; top: 0px; left: 0px; z-index: 6; display:none;} 
.cont:hover .imgC1 {
  display: block;
}