*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}

/* подключение шрифтов. начало  - Стало ненужно с обновлением гугла подгружать шрифты последними - подключены в index.html 

@font-face {
    font-family: 'PressStart2PRegular';
        src: url('https://fontlibrary.org/assets/fonts/press-start-2p/6b0a4bbcec8eb53940cbfcb409a788ee/74496d9086d97aaeeafb3085e9957668/PressStart2PRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }

 
@font-face {
    font-family: 'Press Start 2P';
        src: url('https://fontlibrary.org//assets/fonts/press-start-2p/6b0a4bbcec8eb53940cbfcb409a788ee/74496d9086d97aaeeafb3085e9957668/PressStart2PRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }
  */
/* подключение шрифтов. конец */ 

/* feedback начало
-----------------------------------------------------------------------------*/




.form{
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 999;
}

#form-2{
	display: none;
}

#form-3{
	display: none;
}

#form-4{
	display: none;
}

/*  Всплывающие окно Конец*/

.form-s {
	left: 40%;
	bottom: 40%;
	position: fixed;
	background: #3c0101;
    width: 400px;
	border-style: solid;
	border-width: 2px;
	border-color:#de0c01;
	padding: 5px;
	font-family: 'Press Start 2P';
	font-size: 20px;
	text-align: center;
	color: white;
	line-height: 1.2;
	z-index: 99999;
}

.tow{
	background-color: #f30e7a;
	width: 100px;
	height: 30px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: bold;
	color: white;
}

.visible{
    display: block !important;
}

.form i{
    background: url("../img/close.png");
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    cursor: pointer;
    left: 48%;
    top: 51%;
    margin: -240px 0 0 270px
}

/* Всплывающие окно */
.form form  
{
    width: 485px;
    position: absolute;
    background: #3c0101;
    padding: 30px 30px 50px 30px;
    border: 3px solid #da0c01;
    box-sizing: border-box;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -242px;
}
/* формы заполнения mane & mail в окне */
.form form input{
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #dedddd;
    border-radius: 2px;
    box-shadow: 0px 0px 2px #dedddd;
    margin: 20px 0 0 0;
    color: #444444;
    font-size: 20px;
}
/* формf заполнения теста в окне */
.form form textarea{
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #dedddd;
    border-radius: 2px;
    box-shadow: 0px 0px 2px #dedddd;
    margin: 20px 0 0 0;
    color: #444444;
    font-size: 20px;
}
/* кнопка отправки */
.form form button{
    cursor: pointer;
    height: 50px;
    line-height: 30px;
    font-family: 'Press Start 2P';
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    background: #da0c01;
    text-transform: uppercase;
	text-shadow: 1px 1px 10px black;
    border: 3px solid #000000;
    padding: 0 75px;
    margin: 20px 0 0 0;
    display: inline-block;
}
/* feedback конец
-----------------------------------------------------------------------------*/

/* голова начало */



.botlogo img{ 
position: static; /* Если будет ехать Шапка - Я заменил Наташину position: relative; на static чтоб телевизор с бордер картинками был поверх с position:fixed */
alignment:center; 
height: 400px; 
width:600px; 
background-image: url(img/logo.gif);
background-size: contain;
background-position: 0% 100%;
background-repeat: no-repeat;
} 




.redLeft{ 
position: static; 
alignment:center;
background-image: url( ../img/logo-left2.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 400px;
 width:180px; } /* - Это левая часть от header Совет   ../img/footer.png  - относительная ссылка*/  

.redLeftpic img{ 
    margin-top: 330px;
    margin-left: 60px;
	height: 69px
} 
 
 
.redrigh {
position: static; 
alignment:center;
background-image: url( ../img/logo-right2.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 400px;
 width:180px; } /* - Это левая часть от header Совет   ../img/footer.png  - относительная ссылка*/ 
 
 .redrightpic img{
margin-top: 330px; 
 margin-left: 50px;
 height: 69px
 }
 
 /* голова конец */
 
/* кнопки*/
    div {
       
        float:left;
        
        text-align: center;
    }
    #main{
		background-image: url( ../img/bottunBG.png); 
		background-size: 100% 100%;
background-repeat: no-repeat;
        width: 962px;
        height: 69px;
        overflow: hidden;
		
    }
    #main>div{

        display: inline-block;
    }
/* Кнопка 1 */
.knopka1 { height: 69px;width: 168px; }	
	
.knopka11 {

   
display: inline-block;
height: 59px;
width: 163px;

	border-style: solid;
    border-width: 5px;
	border-color: #000;	
	
	
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;

	
}	



.knopka11 p{
text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 10px;

	text-align: center ;
	text-shadow: 4px -3px 1px black; /* Параметры тени */
	
}
/* Чёрный текст Кнопки */
/* Кнопка 2 */
.knopka2 { height: 69px;width: 197px; }		
.knopka22 {

   
display: inline-block;
height: 59px;
width: 192px;


	border-style: solid;
    border-width: 5px;
	border-color: #000;	
	
	    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}	
/* Чёрный текст Кнопки */
.knopka22 p{
text-align:left; color:#000;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 10px;

	text-align: center ;
	
}
/* Кнопка 3 */
.knopka3 { height: 69px;width: 244px; }		
.knopka33 {

   
display: inline-block;
height: 59px;
width: 239px;


	border-style: solid;
    border-width: 5px;
	border-color: #000;
	
	    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
	
}	
/* Белый текст Кнопки */
.knopka33 p{
text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 10px;

	text-align: center ;
	text-shadow: 4px -3px 1px black; /* Параметры тени */
}


/* Кнопка 4 */
.knopka4 { height: 69px;width: 195px; }		
.knopka44 {

   
display: inline-block;
height: 59px;
width: 190px;

 
	border-style: solid;
    border-width: 5px;
	border-color: #000;	
	
	    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
	
}	

/* Белый текст Кнопки */
.knopka44 p { 
text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    padding-left: 19px;

    margin-top: 10px;

	text-align: center ;
	text-shadow: 4px -3px 1px black; /* Параметры тени */
}
/* Кнопка 5 */
.knopka5 { height: 69px;width: 155px; }		
.knopka55 {

   
display: inline-block;
height: 59px;
width: 150px;

	border-style: solid;
    border-width: 5px;
	border-color: #000;	
	    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
	
}	
/* Белый текст Кнопки */
.knopka55 p{
text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 10px;

	text-align: center ;
	text-shadow: 4px -3px 1px black; /* Параметры тени */
}

/* glitch Кнопки  начало*/
.btn-glitch {
  transform: translateZ(0);
  overflow: visible;
}
.btn-glitch.btn-glitch-active {
  -webkit-filter: url("#filter");
  filter: url("#filter");
}
.btn-glitch.btn-glitch-active::after, .btn-glitch.btn-glitch-active::before {
  content: '';
  width: 1px;
  position: absolute;
  top: -1px;
  bottom: -1px;
}
.btn-glitch.btn-glitch-active::after {
  left: -2px;
  background-color: #ff536b;
  animation: colorshift-red 2.6s infinite;
  animation-timing-function: step-end;
}
.btn-glitch.btn-glitch-active::before {
  right: -2px;
  background-color: #3ffeff;
  animation: colorshift-blue 2.6s infinite;
  animation-timing-function: step-end;
}


@keyframes colorshift-red {
  0%, 7% {
    background-color: #ff536b;
  }
  8%, 18% {
    background-color: transparent;
  }
  19% {
    background-color: #ff536b;
    width: 2px;
  }
  23%, 100% {
    background-color: transparent;
  }
}
@keyframes colorshift-blue {
  0%, 7% {
    background-color: #3ffeff;
  }
  8%, 18% {
    background-color: transparent;
  }
  19% {
    background-color: #3ffeff;
    width: 2px;
  }
  23%, 100% {
    background-color: transparent;
  }
}
/* glitch Кнопки  конец*/
/* кнопки конец */


/*  NEWS Начало*/

#test17 {     width: 960px;
    height: 750px;
    
     background-image: url( ../img/menu333.gif);   
 background-repeat: round;

		left: 73px;}
	
/*  NEWS MENU Начало*/
.NewsBlackBg { 
 	
    width: 945px;
    height: 730px;
     background-image: url( ../img/newsBg.png);   
background-repeat: no-repeat;
}


/*  NEWS MENU КОНЕЦ*/	
/*  NEWS Конец*/

/*  Player Детали Начало*/
.shartitle {background-color: #da0c01;	
height: 353px;
 width:665px; 	
}
.albo { /* Задний фот от албома и артиста*/
position: static; 
background-image: url( ../img/albom.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
height: 302px;
 width:665px; } /* картинка плэй  ../img/122.png  - относительная ссылка*/
 

.alboom { /* Клетка для обложки альбома*/
position: static; 
float: right;
height: 302px;
width:322px;
background-color:black;	
}

.audio-block__inner-thumb { /* Настройка обложки альбома*/
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#kast-nowplaying { /* Название Артиста и Песня*/
width: 343px!important;
    height: 100px;padding-left: 0px!important;
	}
	
	
 #kast-np-title /* Название  Песня*/
 { width: 643px!important; text-align:center; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    background-color: #0000009e;font-size: 33.1pt!important;padding: 10px!important;  margin-top: 60px;  }
   
  #kast-np-artist /* Название Артиста*/
  { width: 643px!important;margin-top: 10px; text-align:center; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    background-color:#0000009e;font-size: 33.1pt!important ; padding: 10px!important;    }

 
 .songtxt /* Подпись артист и песня статичные*/
 {	 float:left;
	 font-style:normal;
	 background-color: #0000009e;
	 font-size: 12.1pt;
	 font-weight: normal;
	 text-align:left;
	 color: white;
	 font-family: 'Press Start 2P'; 
	 margin-top: 20px;
	 padding: 10px;
	 }  
   .VKshar 	{ cursor: pointer;width: 330px; height: 50px;
    background-color: #da0c01;    margin-top: 2px; 	border-style: solid;
    border-width: 5px;
	border-color: black;} /* нижнее меню с проигрывателями*/
   .FBshar { cursor: pointer;width: 330px; height: 50px;
    background-color: #da0c01;    margin-top: 2px; 	border-style: solid;
    border-width: 5px;
	border-color: black;    margin-left: 5px;} /* нижнее меню с проигрывателями*/
   
	
.VKshar p{
text-align:left; color:#000;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 5px;

	text-align: center ;
	
}
.FBshar p{
text-align:left; color:#000;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	
    margin-top: 5px;

	text-align: center ;
	
}

    #menu1{
        width: 675px;
        height: 363px;
		 margin-top: 7px;
		  margin-right: 7px;
    background-color: black;
	float:left;
	border-style: solid;
    border-width: 5px;
	border-color: #da0c01;

	
    }
/* #3c0101 Настройки от самописного текста - тут статья   http://gnatkovsky.com.ua/effekt-pechati-teksta-ili-plavnoe-poyavlenie-teksta-po-bukvam.html*/	
#example{padding:20px 20px 0px 20px;display:none;font-size: 0.9vw ;}
#example .new{opacity: 0;color: #a70f0f;font-family: 'Press Start 2P';/* Параметры тени text-shadow: 4px -3px 1px black; */}
#example .div_opacity{
  -webkit-transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -ms-transition: opacity .1s ease-in-out;
  -o-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
  opacity: 1;}

  .autotext {text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;   background-color: black; font-size: 12.95pt;
   }
  

 
/* Player Детали конец */

/* Электро щит*/

    #player{
        width: 270px;
        height: 363px;
		 margin-top: 7px;
		  margin-right: 7px;
    background-color: #da0c01;
	float:right;
	border-style: solid;
    border-width: 5px;
	border-color: #da0c01;
    }
.textp{ text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;    background-color: black;font-size: 12.1pt ; }
.textp2 { text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;   background-color: black; font-size: 12.1pt }


.plup { 
position: static; 
background-image: url( ../img/123.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 270px;
 width:259px; } /* картинка плэй  ../img/122.png  - относительная ссылка*/
.audio-block__info {
	width: 1px;
    height: 1px;
} /* каая-то хуйня от плэира*/

.audio-block__info button  /* круг проигрывателя*/
{  
  display: block;
  background-color: transparent; /* transparent прозрачный фон*/
  border: 0;
  padding: 25px; /* Жирнота круга*/
  outline: none;
  border-radius: 50%;
  cursor: pointer;
  position:relative;
z-index:1;
  transition: all 0.2s;
    	width: 150px;
    height: 150px;
  margin-left: 47px;
    margin-top: 60px;
}




/* кнопка плэй стоп конец*/

.pllogo 	{ width: 260px; height: 50px;
    background-color: #da0c01;    margin-top: 2px; 	border-style: solid;
    border-width: 5px;
	border-color: black;} /* нижнее меню с проигрывателями*/
	
	

	
.pllogo img { width: 40px; height: 40px; } 
.pllogo1 {	float:left;cursor: pointer; pointer; z-index:1;    position: relative;}
.pllogo2 {	margin-left: 25px; float:left;cursor: pointer; z-index:1;    position: relative;}
.pllogo3 {	margin-left: 25px; float:left;cursor: pointer; pointer; z-index:1;    position: relative;}
.pllogo4 {	margin-left: 25px; float:left;cursor: pointer; pointer; z-index:1;    position: relative;}

/* Электро щит Конец*/

/* Recently Played Начало*/




    #menu3{
        width: 800px;
        height: 570px;
		 margin-top: 7px;
		  margin-right: 7px;
    background-color: #3c0101;
	float:left;

	margin-bottom: 10px;
	overflow: hidden; /* команда скрытия объекты торчащие за облость объекта */
    }

.textrp {  color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;   background-color: #de0c01; font-size: 33.1pt;
    padding-top: 5px;
    padding-bottom: 5px;
	text-align: center ;
	text-shadow: 9px -3px 1px black; /* Параметры тени */
 }
 .backimg2{ 
 height: 44px;
 width:800px;position: absolute; } 
 .menu3bg { /* задний фон анимация */
position: static; 
background-image: url( ../img/menu333.gif);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 570px;
 width:800px; }/* картинка плэй  ../img/122.png  - относительная ссылка*/
 
 

/* 5 песен Начало */
	
 
#kast-bottom {/* Общий контейнер отыграных песен */
	margin-top: 33.1pt;
    padding-left: 0px!important;
    padding-right: 0px!important;
	padding-top: 16px!important;
	color:white;font-family: 'Press Start 2P'; 
	        
    width: 800px;
    height: 570px;
    }

[ng-repeat="track in trackList"]  {
	background-color:black;
	display: inline-block;
	float: left;
    width: 100%;
    margin: 0 0 20px;
	padding-bottom: 20px;
	padding-top: 20px;
font-size: 33.1pt;
	}

	



/* 5 песен Конец */
/* Параметры рамки альбома исполнителя - нет возможности настроить - НАЧАЛО */


 .kast-p-art {
    background-size: cover;
    background-position: 50% 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
 margin: 0 20px 0 0;}
 
 i.kast-mdi-album:before {
    content: "\e900";
	
}
 
/* Параметры рамки альбома исполнителя - нет возможности настроить - КОНЕЦ */ 
 
/* Recently Played конец */

/* Партнёры и поддержка начало*/
    #menu4{
        width: 390px;
        height: 370px;
		 margin-top: 7px;
		  margin-right: 7px;
    background-color: #da0c01;
	float:right;
	border-style: solid;
    border-width: 5px;
	border-color: #da0c01;
	margin-bottom: 10px;
	
    }
.textps { text-align:left; color: white;font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal;   background-color: black; font-size: 12.95pt;
    padding-top: 5px;
    padding-bottom: 5px;
	text-align: center ;

 
 }
.backimg { 
position: static; 
background-image: url( ../img/menu444.gif);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 332px;
 width:380px; } /* картинка плэй  ../img/122.png  - относительная ссылка*/

 /* Партнёры и поддержка конец*/
/* Подвал*/

.fot { 
position: static; 
alignment:center;
background-image: url( ../img/footer.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 140px;
 width:960px; } /* Совет   ../img/footer.png  - относительная ссылка*/  

.fotpic { margin-left: 150px;}

.fotpic img {height: 140px}
.fotpic1 {margin-left: 220px;
}
.fotpic1 img {height: 140px}

/* Подвал конец*/

/* Ховер для кнопок

.knopka:hover a img {display:none;}height: 363px;*/

/* код вертикальный Слайдер Начало*/
.slide-box {
  display: block;

         width: 665px;
        
  padding: 0;
  position: relative;
}

#slider {
  display: block;
 
  width: 100%;
  height: 353px;
  margin: 0;
  padding: 0;
  position: relative;
}

.slide {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.5s linear;
}

.slide-section {
  display:block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  transition: all 0.5s linear;
}

.active .slide-section {
  top: 0;
}

.top-slide .slide-section {
  top: -40px !important;
}

.slide-section h1 {
	padding: 20px 20px 0px 20px;
  display: block;
  width: 100%;
  text-align: center;
  color:#a70f0f;
  font-size: 0.9vw;
  font-family: 'Press Start 2P'; 
   font-weight: normal; 
   font-style: normal; 
}

.slider .active {
  opacity: 1;
  z-index: 10;
}

.active .before-slide {
  top: -20px;
}

.active .after-slide {
  top: 20px;
}

.slide-select/* код превращающий область в кнопку*/
{ cursor: pointer;} 



.controls {
  display: inline-block;
  position: absolute;
  right:  -30px;
  top: 40px;
}

/* код вертикальный Слайдер Конец*/

/* Телефонная версия НАЧАЛО*/

/* Шапка НАЧАЛО*/

.Botface_GG {
	    width: 800px;
    height: 500px;
background-size: 100% 100%;
background-image: url(img/logo.gif);
}
.Botface{
position: static; 
    width: 800px;
    height: 500px;
background-size: 100% 100%;
background-image: url(../img/win2.png);	
z-index:100;

background-repeat: no-repeat;}

.Botface_Player {
	
}


/* Шапка КОНЕЦ*/


/* ТЕЛО начало*/

/* Клетка для обложки альбома */
.Botface_alboom { /* Клетка для обложки альбома*/
position: static;
float: right;
    height: 790px;
    width: 790px;
background-color:black;	
}

@media screen and (min-device-width: 1920px) { /* Для коректного отображения Албома изменил эти значения в ксс jquery.kast-1.2.min */
#kast,#kast-top {width: 780px ;
    height: 780px ;}	
#kast.kast-transparent.kast-current {
	height: 780px;
}
}


/* Кнопка её Размер и расположение*/



#menu0{
	width: 800px;
    height: 800px;
    margin-top: 7px;
    margin-right: 7px;
    background-color: black;
    float: left;
    border-style: solid;
    border-width: 5px;
    border-color: #da0c01;
}

#BoTbuttonTest, .plbutton {
	
    width: 790px;
    height: 790px;
	    margin-left: 0px;
    margin-top: 0px;
}
/* ТАйТЛЫ  Размер и расположение*/
#kast-nowplaying, .songboxer {
	
margin-top: 300px;

}

#kast-nowplaying, .songboxer p{
    float: left;
    font-style: normal;
    
    font-size: 33.1pt;
    font-weight: normal;
    text-align: left;
    color: white;
    font-family: 'Press Start 2P';
    
    padding: 10px;
}

#kast-np-artist, .ng-binding p{
	font-size: 36px;

	width: 790px;
}

/* ТЕЛО КОНЕЦ*/

.fotM { /* Футер мобильный - задаёт ширину таблицы*/
position: static; 
alignment:center;
background-image: url( ../img/footer.png);   
background-size: 100% 100%;
background-repeat: no-repeat;
 height: 140px;
 width:600px; } /* Совет   ../img/footer.png  - относительная ссылка*/  


/* Телефонная версия КОНЕЦ*/