html {
    font-size: 20px;
    scroll-behavior: smooth;
	background: #ffca06;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@font-face {
    font-family: 'kinetikalight';
    src: url('font/Kinetika_Light.otf') format('otf'),
		 url('/font/kinetika_light-webfont.woff2') format('woff2'),
         url('/font/kinetika_light-webfont.woff') format('woff'),
         url('/font/kinetika_light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kinetikaultra';
    src: url('font/Kinetika_Ultra.otf') format('otf'),
		 url('/font/kinetika_ultra-webfont.woff2') format('woff2'),
         url('/font/kinetika_ultra-webfont.woff') format('woff'),
         url('/font/kinetika_ultra-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


h1 {
    padding-top: 60px;
    padding-bottom: 60px;
    font-family: 'kinetikaultra';
}


h2 {
    padding-top: 87px;
    padding-bottom: 10px;
    font-weight: 900;
    font-size: 2rem;
    font-family: 'kinetikaultra';
	margin-top: -50px;
}

.fon_fon {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.2);
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	opacity: 1;
	z-index: 1;
}

.glav__h2 {
    font-weight: 700;
    font-size: 2rem;
    text-transform: uppercase;
	font-family: 'kinetikaultra';
	text-align: center;
	
}

.glav__h2_line {
    font-weight: 700;
    font-size: 2rem;
    text-transform: uppercase;
	font-family: 'kinetikaultra';
	text-align: center;
	background: url(img/line_h2.png) no-repeat center;
}

@media only screen and (max-device-width: 700px) {
	.glav__h2 {
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
	font-family: 'kinetikaultra';
}
	.glav__h2_line {
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
	font-family: 'kinetikaultra';
	text-align: center;
	background: url(img/line_h2_m.png) no-repeat center;
}
}

.glav__h3 {
    font-weight: 700;
    font-size: 1rem;
    font-family: 'kinetikalight';
    text-transform: uppercase;
	margin-bottom: -3px;
	text-align: center;
}

.glav__h4 {
    font-weight: 700;
    font-size: 1rem;
    font-family: 'kinetikalight';
    text-transform: uppercase;
}


h2:first-of-type {
    margin-top: 0;
}

h3 {
    font-weight: 700;
    font-family: 'kinetikaultra';
}

h4 {
    font-weight: 200;
    font-family: 'kinetikaultra';
}

h5 {
    font-weight: 200;
    font-family: 'kinetikalight';
}

h6 {
    font-weight: 300;
    font-family: 'kinetikalight';
	color: #111;
}

a {
	-webkit-font-smoothing: antialiased;
	color: #ffca06;
}

a:hover  {
	color: #ffca06;
}
 
a.active {
    background: #ffca06 !important;
	border-radius: 5px;
}

p {
    font-family: 'kinetikalight';
}

body {
    font-family: 'kinetikalight', sans-serif;
}

.zagolovok {
	font-size: 35px;
	color: #000;
}

.zagolovok span {
	background: rgba(255,255,255,0.8);
	border-radius: 3px;
	margin-top: 5px;
	padding: 5px;
	font-size: 22px;
}


.iframe_chat {
	position: absolute;
	top: 50px;
	left: 0px;
	width: 100%;
	height: 85vh;
}

.yell_color {
    color: #ffca06;
}

.white_color {
    color: #fff;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.white_block {
	background: rgba(255,255,255,1.0);
	border-radius: 3px;
	margin-top: 5px;
	padding: 5px;
}

.white_block_7 {
	background: rgba(255,255,255,0.7);
	border-radius: 3px;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 5px;
}

.white_block_8 {
	background: rgba(255,255,255,0.8);
	border-radius: 3px;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 5px;
}

.white_block_8 a {
	background: #ffd745;
	color: #000;
	padding: 1px;
}

.white_block_8 a:hover {
	background: #ffd745;
	color: #000;
}

.yellow_block {
	background: rgba(255,226,119,1.0);
	border-radius: 3px;
	margin-top: 5px;
	padding: 5px;
}



/* Скрываем скролл на странице */

::-webkit-scrollbar {
  width: 0;
}


/* Аудиоплеер */

audio::-webkit-media-controls-panel {
	background-color: #ffd745;
}

audio::-webkit-media-controls-timeline {
	background-color: #ffca06;
	border-radius: 25px;
	margin-left: 10px;
	margin-right: 10px;
}

audio::-webkit-media-controls-play-button {
	background-color: #fff6d6;
	border-radius: 50%;
	transition-duration: .5s;
}

audio::-webkit-media-controls-play-button:hover {
	background-color: #bfa134;
	transition-duration: .5s;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
	font-family: 'kinetikalight', sans-serif;
	font-weight: 700;
	min-width: 10%;
}

audio::-webkit-media-controls-toggle-closed-captions-button {
	background-color: #bfa134;
}



/* Шапка */

.section.header__f {
	background: linear-gradient(-45deg, #af4035, #310062, #2e8b57, #dc143c, #a68302, #ffca06);
	background-size: 600% 600%;
	animation: gradient 15s ease infinite;
	height: 100vh;
	position: relative;
	width: 100%;
	overflow: hidden;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.section.header__f .container {
	position: relative;
	z-index: 2;
}

.section.header__f .fon_lines {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url('img/lines_fon.png') no-repeat top fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	opacity: 1;
	z-index: 1;
}

.section.header__vkapp {
	background: #ffca06;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	position: relative;
	min-height: 94vh;
	width: 100%;
	overflow: hidden;
}

@media only screen and (max-device-width: 800px) {
.section.header__f {
    background: #ffca06;
	z-index: 20;
	min-height: 85vh;
	max-height: 85vh;
	}
.fon_lines {
    display: none;
	}
}


/* Фон с диагоналями */

.diagonal {
	animation:slide 3s ease-in-out infinite alternate;
	background-image: linear-gradient(-60deg, #a68302 50%, #310062 50%);
	bottom:0;
	left:-50%;
	opacity:.5;
	position:fixed;
	right:-50%;
	top:0;
	z-index:0;
}

.diagonal2 {
	animation-direction:alternate-reverse;
	animation-duration:4s;
}

.diagonal3 {
	animation-duration:5s;
}

.diagonal4 {
	animation-duration:5s;
}

.diagonal5 {
	animation-direction:alternate-reverse;
	animation-duration:6s;
}

@keyframes slide {
	0% {
    transform:translateX(-25%);
	}
	100% {
    transform:translateX(25%);
	}
}


/* Фон с кругами */

g{
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	-webkit-animation: 'screen'  infinite;
  animation: 'screen'  infinite;
}

g:nth-child(1){
	top:20px;
	left:30px;
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(2,226,252,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #02e2fc;
	animation-duration: 5s;
}

g:nth-child(2){
	top:420px;
	left:30px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(250,160,2,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #faa002;
	animation-duration: 21s;
}

g:nth-child(3){
	top:550px;
	left:880px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(20,252,2,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #14fc02;
	animation-duration: 5s;
}

g:nth-child(4){
	top:5px;
	left:1030px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(252,2,196,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #fc02c4;
	animation-duration: 4s;
}

g:nth-child(5){
	top:280px;
	left:12px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(139,44,148,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #8b2c94;
	animation-duration: 5s;
}

g:nth-child(6){
	top:550px;
	left:30px;
background: -webkit-radial-gradient(center, ellipse cover,  rgba(251,184,41,0.65) 0%,rgba(0,0,0,0) 100%);
box-shadow:0px 0px 5px 0px #FBB829; 
	animation-duration: 6s;
}

g:nth-child(7){
	top:650px;
	left:50px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(195,255,104,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #C3FF68; 
	animation-duration: 15s;
}

g:nth-child(8){
	top:20px;
	left:860px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,0,102,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #FF0066; 
	animation-duration: 5s;
}
g:nth-child(9){
	top:896px;
	left:132px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,0,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #FFFF00; 
	animation-duration: 13s;
}

g:nth-child(10){
	top:578px;
	left:357px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(127,175,27,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #7FAF1B; 
	animation-duration: 4s;
}

g:nth-child(11){
	top:380px;
	left:230px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(1,210,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #01D2FF; 
	animation-duration: 5s;
}

g:nth-child(12){
	top:570px;
	left:1100px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(237,247,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #EDF7FF; 
	animation-duration: 6s;
}

g:nth-child(13){
	top:600px;
	left:600px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,255,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #00FFFF; 
	animation-duration: 7s;
}

g:nth-child(14){
	top:200px;
	left:520px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #0000FF; 
	animation-duration: 14s;
}

g:nth-child(15){
	top:370px;
	left:500px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(16,225,228,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #10e1e4; 
	animation-duration: 9s;
}

g:nth-child(16){
	top:620px;
	left:730px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,51,0,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow:0px 0px 5px 0px #FF3300; 
	animation-duration: 3s;
}

g:nth-child(17){
	top:62px;
	left:330px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,234,232,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FFEAE8;
	animation-duration: 4s;
}

g:nth-child(18){
	top:0px;
	left:250px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,229,0,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FFE500;
	animation-duration: 5s;
}

g:nth-child(19){
	top:600px;
	left:180px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,102,153,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FF6699;
	animation-duration: 6s;
}

g:nth-child(20){
	top:987px;
	left:13px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(84,156,204,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #549CCC;
	animation-duration: 7s;
}

g:nth-child(21){
	top:120px;
	left:930px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(184,175,3,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #B8AF03;
	animation-duration: 8s;
}

g:nth-child(22){
	top:80px;
	left:700px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(171,250,249,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #ABFAF9;
	animation-duration: 5s;
}

g:nth-child(23){
	top:350px;
	left:720px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(127,15,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #7F0FFF;
	animation-duration: 2s;
}

g:nth-child(24){
	top:997px;
	left:678px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(48,128,0,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #308000;
	animation-duration: 3s;
}

g:nth-child(25){
	top:714px;
	left:246px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,38,38,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FF2626;
	animation-duration: 4s;
}

g:nth-child(26){
	top:0px;
	left:480px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(15,29,215,0.65) 0%,rgba(0,0,0,0) 100%);
box-shadow: 0px 0px 5px 0px #0F1DD7;
	animation-duration: 5s;
}

g:nth-child(27){
	top:456px;
	left:1000px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(51,102,153,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #336699;
	animation-duration: 6s;
}

g:nth-child(28){
	top:350px;
	left:865px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(70,172,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #46ACFF;
	animation-duration: 7s;
}

g:nth-child(29){
	top:100px;
	left:100px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(222,4,5,0.65) 0%,rgba(0,0,0,0) 100%);
box-shadow: 0px 0px 5px 0px #DE0405;
	animation-duration: 8s;
}

g:nth-child(30){
	top:1087px;
	left:722px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(77,254,21,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #4DFE15;
	animation-duration: 9s;
}

g:nth-child(31){
	width:200px;
	height:200px;
	top:795px;
	left:605px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(243,10,70,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #F30A46;
	animation-duration: 1s;
}

g:nth-child(32){
	top:234px;
	left:678px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(245,253,45,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #F5FD2D;
	animation-duration: 2s;
}

g:nth-child(33){
	top:270px;
	left:1230px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(178,0,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #B200FF;
	animation-duration: 3s;
}
g:nth-child(34){
	width:200px;
	height:200px;
	top:1126px;
	left:332px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(102,204,255,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #66CCFF;
	webkit-animation-duration: 4s;
}

g:nth-child(35){
	top:407px;
	left:83px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(20,243,175,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #14F3AF;
	animation-duration: 5s;
}

g:nth-child(36){
	width:200px;
	height:200px;
	top:176px;
	left:297px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(100,245,102,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #64F566;
	animation-duration: 6s;
}

g:nth-child(37){
	width:300px;
	height:300px;
	top:820px;
	right:10px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(236,218,65,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #ECDA41;
	animation-duration: 7s;
}

g:nth-child(38){
	top:500px;
	left:500px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,61,45,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FF3D2D;
	animation-duration: 8s;
}

g:nth-child(39){
	top:20px;
	right:26px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(74,73,235,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #4A49EB;
	animation-duration: 9s;
}

g:nth-child(40){
	width:200px;
	height:200px;
	top:251px;
	left:1053px;
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,72,0,0.65) 0%,rgba(0,0,0,0) 100%);
	box-shadow: 0px 0px 5px 0px #FF4800;
	animation-duration: 10s;
}

@keyframes screen {
	from {
		opacity: 0;
	}

	25%{
		opacity: 0.3;
		transform: scale3d(3, 3, 4);
	}

	50%{
		opacity: 0.75;
	}

	75%{
		opacity: 1;

	}

	to{
		opacity: 0;
	}
}



#navbarNav {
    font-weight: bold;
    font-size: 0.8rem;
	font-family: 'kinetikalight';
}

.logo {
    width: 175px;
    height: 61px;
}

@media only screen and (max-device-width: 800px) {
.logo {
    width: 100px;
    height: 35px;
}
}

.logo_apps {
    width: 240px;
    height: 50px;
}

.logo_top_apps {
	background-color: #f8f9fa!important;
	padding: 0.4rem 1rem;
}

.playerTop {
	position: relative;
    display: inline-block;
    left: 225px;
    font-size: 0.9rem;
    white-space: nowrap;
	width: 50px;
	height: 35px;
	zoom: 1.4;
}

@media only screen and (max-device-width: 800px) {
.playerTop {
	display: none;
}
}

#song-top{
	position:fixed;
	left:260px;
	top:10px;
	color:#000;
}

/* Надпись LIVE */
.onair {
    text-align: center;
	font-family: 'kinetikalight';
	font-weight: 700;
	color: red;
	position: absolute;
    right: 180px;
    top: 4px;
}

/* Надпись LIVE в приложениях */
.onair_app {
	font-family: 'kinetikalight';
	font-size: 120%;
	color: red;
	position: absolute;
	right: 30px;
	top: 477px;
}

.onair_app_mob {
	font-family: 'kinetikalight';
	font-size: 100%;
	color: red;
	position: absolute;
	right: 7px;
}

.playstop {
	display: block;
}

@media only screen and (max-device-width: 800px) {
.playstop {
	display: none;
}
}

.playstop_mob {
	display: block;
}

@media only screen and (min-device-width: 800px) {
.playstop_mob {
	display: none;
}
}


/* Секции */

#play, #time, #about, #podcast, #mus, #faq {
	height: 100%;
}


/* Описание потока и плашки */

#whatsapp_widget {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	position: fixed; 
	left: 320px; 
	bottom: 20px; 
	width: 150px; 
	height: 50px;  
	background-color: #f1f1f1; 
	border-radius: 50px; 
	box-shadow: 0px 6px 25px rgb(0 0 0 / 50%);
	font-family: 'kinetikalight';
	transition: 0.3s;
}
@media only screen and (max-device-width: 800px) {
#whatsapp_widget {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; 
	top: -12px;
	left: 0;
	width: 150px; 
	height: 40px;  
	margin: 10px;
	z-index: 1;
	background-color: #f1f1f1; 
	border-radius: 50px; 
	font-family: 'kinetikalight';
	transition: 0.3s;
}
#whatsapp_widget img {
	width: 35px;
    top: 0px;
}
}
#whatsapp_widget:hover {
	background-color: #ffca06; 
	transition: 0.3s;
}
#whatsapp_widget img {
	position: relative;
    left: 25px;
    bottom: 25px;
}
#whatsapp_widget>span{
	color: #000; 
	margin-right: 10px; 
	font-size: 18.666666666667px;
}
#whatsapp_widget{
	width: unset; 
	padding: 0 0 0 15px;
}
@media only screen and (min-device-width: 800px) {
#whatsapp_widget {
	animation: 3s radial-pulse 10s infinite;
}
}
@keyframes radial-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
	} 
	50% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	} 
	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	} 
}

.on_air {
	display: flex;
	justify-content: left;
	align-items: center;
	z-index: 10;
	position: fixed; 
	left: 20px; 
	bottom: 20px; 
	width: 250px;
	height: 50px;
	padding-left: 10px;
	background-color: #f1f1f1; 
	border-radius: 50px; 
	border: 2px solid #ffca06;
	font-family: 'kinetikalight';
}

@media only screen and (max-device-width: 800px) {
.on_air {
	display: none;
}
}

#rj_krug {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	position: fixed; 
	left: 200px; 
	bottom: 20px; 
}

#rj_krug {
	animation: rotate 4s linear 2s infinite;
}
@keyframes rotate {
	0% {
		transform:rotate(0deg);
	} 
	10% {
		transform:rotate(0deg);
	} 
	20% {
		transform:rotate(30deg);
	} 
	30% {
		transform:rotate(0deg);
	} 
	40% {
		transform:rotate(0deg);
	} 
	50% {
		transform:rotate(0deg);
	} 
	60% {
		transform:rotate(0deg);
	} 
	70% {
		transform:rotate(-30deg);
	} 
	80% {
		transform:rotate(0deg);
	} 
	90% {
		transform:rotate(0deg);
	} 
	100% {
		transform:rotate(0deg);
	} 
}

@media only screen and (max-device-width: 800px) {
#rj_krug {
	display: none;
}
}


@media (max-width: 767px) {
.nav > li {
	float: left;
}
}

@media (max-width: 700px) {
.navbar-toggler {
	display: none;
}
}

@media (min-width: 768px) {
.nav > li:first-child  > a {
    padding-left: 0;
}
}
  
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
	border-radius: 0px;
}

.header__r {
    margin-top: 120px;
    margin-bottom: 15px;
}
@media (max-width: 700px) {
.header__r {
    margin-top: 20px;
    margin-bottom: 20px;
}
}

/* Название трека в шапке */

.title {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	width: 400px;
}

@media (max-width: 1500px) {
.title {
	width: 310px;
}
}

@media (max-width: 1400px) {
.title {
	width: 270px;
}
}

@media (max-width: 1350px) {
.title {
	width: 240px;
}
}

@media (max-width: 1300px) {
.title {
	width: 220px;
}
}

@media (max-width: 1250px) {
.title {
	width: 200px;
}
}

@media (max-width: 1230px) {
.title {
	width: 180px;
}
}

@media (max-width: 1200px) {
.title {
	width: 150px;
}
}

@media (max-width: 1150px) {
.title {
	width: 120px;
}
}

@media (max-width: 1100px) {
.title {
	width: 0px;
}
}

.artist {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	width: 400px;
}

@media (max-width: 1500px) {
.artist {
	width: 310px;
}
}

@media (max-width: 1400px) {
.artist {
	width: 270px;
}
}

@media (max-width: 1350px) {
.artist {
	width: 240px;
}
}

@media (max-width: 1300px) {
.artist {
	width: 220px;
}
}

@media (max-width: 1250px) {
.artist {
	width: 200px;
}
}

@media (max-width: 1230px) {
.artist {
	width: 180px;
}
}

@media (max-width: 1200px) {
.artist {
	width: 150px;
}
}

@media (max-width: 1150px) {
.artist {
	width: 120px;
}
}

@media (max-width: 1100px) {
.artist {
	width: 0px;
}
}

#cover {
	min-height: 428px;
	opacity: 1.0;
}

#cover:hover {
	opacity: 1.0;
}

@media (max-width: 700px) {
#cover {
	min-height: 330px;
}
}


/* Бегущая строка */

.marquee{
  width: 100%;
  margin:0 auto;
  position: absolute;
}

@media only screen and (max-device-width: 800px) {
.marquee {
	display: none;
}
}

.marquee h1{
  text-align:center;
  color:#fff6d6;
  padding-top: 300px;
  animation: text 17s infinite linear;
  padding-left: 100%;
  font-size: 200px;
  white-space: nowrap;
  opacity: 0.5;
}

.marquee h2{
  text-align:center;
  color:#ffe277;
  padding-top: 400px;
  animation: text 22s infinite linear;
  padding-left: 100%;
  font-size: 200px;
  white-space: nowrap;
  opacity: 0.5;
}

@keyframes text {
  0%{
    transform: translate(120, 0);
  }
  
  100%{
    transform: translate(-400%, 0);
  }
}


/* Кнопки соцсетей в приложениях, лого и прочее */

a.logo_app{
	background: url('img/logo_app.png');
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 100px;
}

a.vk_app{
	background: url('img/vk_app.png');
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 100px;
}

a.tg_app{
	background: url('img/telegram_app.png');
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 100px;
}

a.googleplay{
	background: url('img/google-play.png');
	display: block;
	width: 194px;
	height: 75px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3px;
	margin-bottom: 9px;
}

@media only screen and (max-device-width: 700px) {
a.googleplay{
	background: url('img/google-play.png');
	display: block;
	margin-left: auto;
    margin-right: auto;
}
}

table{
	font-family: 'kinetikalight';
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.streams {
    width: 165px;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    font-size: 21px;
	position: absolute;
	left: 30px;
    top: 3px;
	font-family: 'kinetikalight';
	font-weight: 700;
}

.streams-app {
    width: 235px;
    text-align: left;
    padding-right: 0;
    font-size: 21px;
	position: absolute;
	left: 10px;
    top: 7px;
	font-family: 'kinetikalight';
}

.m3ulink {
	color: #000;
}

@media only screen and (max-device-width: 700px) {
.m3ulink {
	display: none;
}
}


/* Модальное окно */

/* Контейнер для кнопки */
.css-modal-target-container {
    height: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* Кнопка для открытия */
.css-modal-open {
    margin: 10px;
    text-decoration: none;
    position: relative;
    line-height: 20px;
    padding: 12px 30px;
    font-family: 'kinetikalight';
    cursor: pointer;
    overflow: hidden;
    z-index: 1;    
	background-color: #fff;
    color: #000;
	font-size: 20px;
    border: 2px solid #ffca06;
	border-radius: 3px;
}
.css-modal-open:hover,
.css-modal-open:active,
.css-modal-open:focus {
    color: #FFF;
	text-decoration: none;
}
.css-modal-open:before {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-top: 50px solid #a68302;
    transition: transform 0.5s;
    transform: translateX(-100%);
    z-index: -1;
}
.css-modal-open:hover:before,
.css-modal-open:active:before,
.css-modal-open:focus:before {
    transform: translateX(0);
}
 
/* Контейнер, который затемняет страницу */
.css-modal-target {
    display: none;
}
.css-modal-target:target {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(0, 0, 0, 0.7);
}
 
/* Само модальное окно */
.css-modal-target .cmt {
    font-family: Verdana, sans-serif;  
    font-size: 16px;
    padding: 20px;
    width: 85%;
    z-index: 8;
    max-width: 630px;
    max-height: 70%;
    transition: 0.5s;
    border: 3px solid #ffca06;
    border-radius: 7px;
    background: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    text-align: center;
    overflow: auto;
    animation: scale 0.5s ease;
}
 
/* Кнопка с крестиком */
.css-modal-close {
    position: relative;
    display: block;
}
.css-modal-close:after {
    content: "";
    width: 50px;
    height: 50px;
    border: 3px solid #ffca06;
    border-radius: 7px;
    position: fixed;
    z-index: 10;
    top: 90px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
}
.css-modal-close:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    content: "";
    cursor: default;
}
 
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, 0.7);
    }
}


/* Слайдер Дайте Ротацию! */

.js-transitions-disabled * {
    transition: none !important;
}
.tabs3d {
    position: relative;
    height: 500px;
    perspective: 1500px;
    perspective-origin: 50% 50%;
}
.tabs3d-control {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    right: 30px;
    bottom: 38px;
    z-index: 1;
}
.tabs3d-control a {
    position: relative;
    font-family: 'kinetikalight';
    font-weight: bold; 
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px 8px;
	margin: 3px;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
    color: #FFF;
    transition: background 0.4s;
	border-radius: 5px;
}
.tabs3d-control a:hover {
    background-color: #000!important;
	text-decoration: none;
}
.tabs3d-control a.active,
.tabs3d-control a.active:hover {
    background-color: #FFF!important;
    color: #000;
}
.tabs3d-stage {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    margin: auto;
    transform-style: preserve-3d;
    transform: translateZ(-230px);
}
.spinner {
    position: absolute;
    width: 50%;
    height: 460px;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 0.7s;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transform: rotateX(0);
}
.js-spin-fwd .spinner {
    transform: rotateX(-90deg);
}
.js-spin-bwd .spinner {
    transform: rotateX(90deg);
}
.js-spin-fwd .spinner-right {
    transform: rotateX(90deg);
}
.js-spin-bwd .spinner-right {
    transform: rotateX(-90deg);
}
.spinner-right {
    right: 0;
    left: auto;
}
.spinner-face {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.spinner-face.js-next {
    display: block;
    transform: rotateX(90deg) translateZ(230px);
}
.spinner-right .spinner-face.js-next {
    transform: rotateX(270deg) translateZ(230px);
}
.js-spin-bwd .spinner-face.js-next {
    transform: rotateX(-90deg) translateZ(230px);
}
.js-spin-bwd .spinner-right .spinner-face.js-next {
    transform: rotateX(-270deg) translateZ(230px);
}
.js-active {
    display: block;
    transform: translateZ(230px);
}
.content {
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
}
.spinner-right .content {
    left: -100%;
}
.content-left,
.content-right {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
}
.content-right {
    right: 0;
 
    left: auto;
}
.content-left {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.content-left .content-title {
    position: absolute;
    bottom: 20px;
    right: 40px;
    text-align: right;
	text-shadow: 0px 4px 3px rgba(0,0,0,1.0),
				 0px 8px 13px rgba(0,0,0,1.0),
				 0px 12px 23px rgba(0,0,0,1.0);
    color: #fff;
    font-family: 'kinetikalight';
	line-height: 1.0;
}
.content-left .content-title div {
    font-size: 36px;
}
.content-left .content-title p {
    font-size: 22px;
    margin-top: 5px;
	margin-left: 10px;
}
.content-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
}
.content-right .content-main {
    position: absolute;
    max-height: 320px;
    overflow-x: auto;
    margin: 20px;
    padding: 0 20px;
}
.content-right .content-main p {
    margin: 0 0 14px 0;
    color: #000;
    font-family: 'kinetikalight';
    text-align: left;
    font-size: 22px;
    line-height: 1.35;
}
.content-right .content-main .content-autor {
    text-transform: uppercase;
    font-size: 13px;
    float: right;
    padding: 6px 6px 0 6px;
    display: inline-block;
    border-top: 1px solid #FFF;
    margin: 0;
}    
@media screen and (max-width:991px) {
    .tabs3d {
        height: auto;
        margin: 20px 0;
    }
    .tabs3d-control {
        position: relative;
        box-shadow: none;
        top: 0;
        left: 0;
		margin-top: 10px;
        margin-bottom: -30px;
		padding: 5px;
		background-color: #f0f0f0;
		border-radius: 5px;
        justify-content: center;
    }
    .spinner {
        position: static;
        width: 100%;
        height: 260px;
    }            
    .tabs3d-stage {
        position: static;
        transform-style: flat;
        transform: translateZ(0);
    }
    .content-right {
        padding-top: 0;
		padding-bottom: 0px;
    }
    .content-right .content-main {
        max-height: 290px;
		margin: 0;
    }
    .content-right .content-main p {
        font-size: 18px;
		margin: 10px 0 0 0;
		line-height: 1.2;
    }    
    .spinner-face.js-next {
        display: block;
        transform: rotateX(90deg) translateZ(130px);
    }
    .spinner-right .spinner-face.js-next {
        transform: rotateX(270deg) translateZ(130px);
    }
    .js-spin-bwd .spinner-face.js-next {
        transform: rotateX(-90deg) translateZ(130px);
    }
    .js-spin-bwd .spinner-right .spinner-face.js-next {
        transform: rotateX(-270deg) translateZ(130px);
    }
    .js-active {
        transform: translateZ(130px);
    }
}


/* Слайдер общий */

a.carousel-control-prev {
    border-radius: 50px;
    max-width: 50px;
    background: #a9a9a9;
    height: 50px;
    margin-top: 21%;
}

a.carousel-control-next {
    border-radius: 50px;
    max-width: 50px;
    background: #a9a9a9;
    height: 50px;
    margin-top: 21%;
}

@media only screen and (max-device-width: 800px) {
a.carousel-control-prev, a.carousel-control-next {
	display: none;
}
}


/* Вкладки с рубриками */

.tab-vertical .nav.nav-tabs {
    float: left;
    display: block;
    margin-right: 0px;
    border-bottom: 0;
	height: 370px;
}

.tab-vertical .nav.nav-tabs .nav-item {
    margin-bottom: 0px;
	height: 40px;
	line-height: 0.5;
	font-size: 0.9rem;
}

.tab-vertical .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background: #fff;
    padding: 12px 10px;
    color: #71748d;
    background-color: #f0f0f0;
    -webkit-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
	font-family: 'kinetikalight';
	font-weight: 500;
}

.tab-vertical .nav-tabs .nav-link.active {
    color: #111;
    background-color: #fff !important;
    border-color: transparent !important;
	font-family: 'kinetikalight';
	font-weight: 700;
}

.tab-vertical .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 0px !important
}

.tab-vertical .tab-content {
    overflow: auto;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
    background: #fff;
    padding: 30px;
	height: 315px;
}


/* Блоки с фотками ведущих */

.containerm {
    width: 100%;
	margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
	-moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

@media only screen and (max-device-width: 700px) {
.containerm, .containerm2 {
    display: none;
	}
}

.image {
    overflow: hidden;
    height: 250px;
    width: 250px;
    position: relative;
    cursor: pointer;
    margin: 0 0px;
    transition: .5s;
    background-color: #555;
	border-radius: 5px;
}

.image:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #bfa134;
    opacity: 0.8;
    border-radius: 50%;
    transition: .4s
}

.image:hover:after {
    transform: translate(-50%, -50%)
}

.image:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg)
}

.image img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .6s
}

.image i {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .4s;
    transition-timing-function: ease-in;
	font-family: 'kinetikalight';
	font-size: 2rem;
	font-weight: 300;
	text-align: left!important;
}

.image:hover i {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
}

.image small {
    position: absolute;
    z-index: 2;
    bottom: 15%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .4s;
    transition-timing-function: ease-in;
	font-family: 'kinetikalight';
	font-size: 0.7rem;
	text-align: left!important;
}

.image:hover small {
    transform: translate(-50%, -50%);
    transition-timing-function: ease;
}


/* Кнопки соцсетей */

.button {
    border: none;
    border-radius: 3px;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	font-family: 'kinetikalight';
    font-size: 18px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button_small {
    border: none;
    border-radius: 3px;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	font-family: 'kinetikalight';
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button_vk {
    background-color: #0077FF;
    color: white;
    border: 2px solid #0077FF;
	width: 122px;
}

.button_vk:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #0077FF;
}

.button_vk_lg {
    background-color: #0077FF;
    color: white;
	font-size: 22px;
    border: 2px solid #0077FF;
	width: 200px;
}

.button_vk_lg:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #0077FF;
}

.button_tg {
    background-color: #0088CC;
    color: white;
    border: 2px solid #0088CC;
	width: 122px;
}

.button_tg:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #0088CC;
}

.button_tg_lg {
    background-color: #0088CC;
    color: white;
	font-size: 22px;
    border: 2px solid #0088CC;
	width: 200px;
}

.button_tg_lg:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #0088CC;
}

.button_site {
    background-color: #a68302;
    color: white;
    border: 2px solid #a68302;
	width: 122px;
}

.button_site:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #a68302;
}

.button_site_lg {
    background-color: #a68302;
    color: white;
	font-size: 22px;
    border: 2px solid #a68302;
	width: 200px;
}

.button_site_lg:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #a68302;
}

.button_site_lg_square {
    background-color: #a68302;
    color: white;
	font-size: 22px;
    border: 2px solid #a68302;
	width: 45px;
}

.button_site_lg_square:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #a68302;
}

.button_android {
    background-color: #A4C639;
    color: white;
    border: 2px solid #A4C639;
	width: 122px;
}

.button_android:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #A4C639;
}

.button_android_lg {
    background-color: #A4C639;
    color: white;
	font-size: 22px;
    border: 2px solid #A4C639;
	width: 200px;
}

.button_android_lg:hover {
    background-color: white; 
    color: black; 
    border: 2px solid #A4C639;
}

  
@media only screen and (max-device-width: 800px) {
	.button {
    font-size: 16px;
	}
	.soc_buttons_mob {
	margin-left: auto;
    margin-right: auto;
	background: #fff6d6;
    padding: 5px;
	border-radius: 5px;
	}
}

@media only screen and (min-device-width: 700px) {
.soc_buttons_mob {
	display: none;
}
}

.soc_buttons {
	margin-top: 30px;
	margin-left: auto;
    margin-right: auto;
	background: rgba(255,255,255,0.8);
    padding: 5px;
	border-radius: 5px;
	}


/* Выезжающая панель с историей треков */

#side-checkbox {
    display: none;
}

.side-panel {
    position: fixed;
    z-index: 1200;
    bottom: 0;
    left: -32%;
    background: #f8f9fa;
    transition: all 0.5s;   
    width: 30%;
    height: 92vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #000;
	background: #f8f9fa url(img/lines.png) no-repeat center left;
    padding: 10px 10px;
	font-family: 'kinetikalight';
}

@media only screen and (max-device-width: 700px) {
.side-panel {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: -110%;
    background: #f8f9fa;
    transition: all 0.5s;   
    width: 100%;
    height: 100vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #000;
    padding: 10px 10px;
	font-family: 'kinetikalight';
}
}

.side-title {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ffca06;
	font-family: 'kinetikalight';
}

.side-button-1-wr {
    text-align: center;
}
.side-button-1 .side-b {
    position: fixed;
    left: 0;
	top: 40%;
	bottom: 60%;
	background: rgba(255, 202, 6, 0.7);
    width: 50px;
    height: 240px;
    font-family: 'kinetikalight';
	font-size: 22px;
	line-height: 1.2;
    text-align: center;
    padding: 12px 0px 10px 0px;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
	z-index: 10;
}
@media only screen and (max-device-width: 700px) {
.side-button-1 .side-b_mob {
    text-decoration: none;
    position: fixed;
	top: 8px;
	left: 180px;
	z-index: 1100;
    font-size: 22px;
    line-height: 20px;
    padding: 9px 10px;
    color: #000;
    text-transform: uppercase; 
    font-family: 'kinetikalight';
    background: #fff;
    cursor: pointer; 
    border: 1px solid #ffca06;
	border-radius: 50%;
}
.side-b {
	display: none;
}
.side-button-1-wr {
    text-align: center;
	height: 0px;
}
}
@media only screen and (min-device-width: 700px) {
.side-b_mob {
	display: none;
}
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
    color: #fff;
	background: rgba(255, 202, 6, 1.0);
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}

.side-button-1 .side-b:before {
    top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
    width: 100%;
    left: 0;
}

.panel_time {
	position: absolute;
	width: 63px;
	height: 27px;
	background: #ffe277;
	border-radius: 3px;
	padding: 0px 5px;
	margin-left: auto;
    margin-right: auto;
	font-weight: 600;
}

.panel_title {
	margin-left: 66px;
}

.side-button-1 .side-close {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
    display: block;
}
#side-checkbox:checked + .side-panel {
    left: 0;
}

.side-button-2 {
    font-size: 80px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: -35px;
    right: 8px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #ffca06;    
    transition: all 280ms ease-in-out;    
}
.side-button-2_app {
    font-size: 80px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: -35px;
    right: 100px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #ffca06;    
    transition: all 280ms ease-in-out;  
}
.side-button-2:hover {
    transform: rotate(45deg) scale(1.1);    
    color: #000;
}


/* Выезжающая панель с чатом */

#chat-checkbox {
    display: none;
}

.chat-panel {
    position: fixed;
    z-index: 1200;
    bottom: 0;
    right: -32%;
    background: #f8f9fa;
    transition: all 0.5s;   
    width: 30%;
    height: 92vh;
    box-shadow: 0 10px 20px 10px rgba(0,0,0,0.4);
    color: #000;
    padding: 5px 10px;
	font-family: 'kinetikalight';
}

.chat-title {
    font-size: 16px;
	height: 6vh;
    padding-bottom: 10px;
    margin-bottom: 20px;
	font-family: 'kinetikalight';
}

.chat-button-1-wr {
    text-align: center;
}
.chat-button-1 .chat-b {
	position: fixed;
    right: 0;
	top: 40%;
	bottom: 60%;
    background: rgba(255, 202, 6, 0.7);
    width: 50px;
    height: 240px;
    font-family: 'kinetikalight';
	font-size: 28px;
	line-height: 1.2;
    text-align: center;
    padding: 45px 0px 10px 0px;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
	z-index: 10;
}

.chat-button-1 .chat-b:hover,
.chat-button-1 .chat-b:active,
.chat-button-1 .chat-b:focus {
    color: #fff;
	background: rgba(255, 202, 6, 1.0);
}
.chat-button-1 .chat-b:after,
.chat-button-1 .chat-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}

.chat-button-1 .chat-b:before {
    top: -6px;
}
.chat-button-1 .chat-b:hover:after,
.chat-button-1 .chat-b:hover:before {
    width: 100%;
    left: 0;
}

.chat-button-1 .chat-close {
    display: block;
	position: fixed;
    right: -55px;
	top: 15%;
	bottom: 60%;
	height: 60px;
	-webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
}
#chat-checkbox:checked + .chat-panel + .chat-button-1-wr .chat-button-1 .chat-open {
    display: none;
}
#chat-checkbox:checked + .chat-panel + .chat-button-1-wr .chat-button-1 .chat-close {
    display: block;
	position: fixed;
    right: 30%;
	top: 15%;
	bottom: 60%;
	height: 60px;
	transition: all 1.2s;
	font-size: 24px;
	line-height: 1.0;
	padding: 20px 0px 10px 0px;
}
#chat-checkbox:checked + .chat-panel {
    right: 0;
}

.chat-button-2 {
    font-size: 80px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: -35px;
    right: 8px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #ffca06;    
    transition: all 280ms ease-in-out;    
}
.chat-button-2:hover {
    transform: rotate(45deg) scale(1.1);    
    color: #000;
}


/* Таймлайн */

#timeline *, 
#timeline *:before, 
#timeline *:after {
    box-sizing: border-box;
}    
#timeline .timeline-item:after, 
#timeline .timeline-item:before {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}
#timeline {
    max-width: 1100px;
    width: 100%;
	padding: 0px;
    margin: auto;
    position: absolute;
	left: -30px;
    transition: all 0.4s ease;
}
#timeline:before {
    content: "";
    width: 0px;
    height: 100%;
    background: #ffca06;
    left: 0;
    top: 7px;
    position: absolute;
}
#timeline:after {
    content: "";
    clear: both;
    display: table;
    width: 100%;
}
#timeline .timeline-item {
    margin-bottom: 10px;
    position: relative;
	font-size: 14px;
}
#timeline .timeline-icon {
	font-size: 16px;
}
#timeline .timeline-item .timeline-icon {
    background: #ffca06;
    color: #FFF;
    text-align: center;
    line-height: 4px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 49%;
    overflow: hidden;
    margin-left: -5px;
    border-radius: 50%;
}
#timeline .timeline-item .timeline-icon i {
    line-height: 30px;
}
#timeline .timeline-item .timeline-content {
    width: 90%;
    background: #fff;
    padding: 0.1px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 3px;
    transition: all 0.3s ease;
	float: right;
	margin-bottom: 30px;
}

@media only screen and (min-device-width: 700px) {
#timeline .timeline-content:hover {
    background: #fff6d6;
}
}

#timeline .timeline-item .timeline-content h4 {
    padding: 5px 20px;
    background: #bfa134;
    color: #fff;
    margin: -20px -20px 10px -20px;
    font-family: 'kinetikalight';
	font-size: 18px;
    border-radius: 3px 3px 0 0;
}
#timeline .timeline-item .timeline-content:before {
    content: '';
    position: absolute;
    left: 45%;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ffca06;
}
#timeline .timeline-item:nth-child(even) .timeline-content {
    float: right;
}
#timeline .timeline-item:nth-child(even) .timeline-content:before {
    content: '';
    right: 45%;
    left: inherit;
    border-left: 0;
}
#timeline .timeline-item .timeline-content:before, 
#timeline .timeline-item:nth-child(even) .timeline-content:before {
    left: 10%;
    margin-left: -6px;
    border-left: 0;
}
#timeline .timeline-item .timeline-icon {
    left: -3%;
}
	
@media screen and (max-width: 700px) {
    #timeline {
        padding: 0px;
        width: 90%;
    }
    #timeline:before {
        left: 3px;
    }
    #timeline .timeline-item .timeline-content {
        width: 90%;
        float: right;
		margin-bottom: 30px;
		font-size: 20px;
    }
}



.slider {
 overflow: hidden;
 width: 100vw;
 height: 100vh;
 position: fixed;
}
 
.slider .slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-position: center;
 animation: slider 55s infinite;
}
 
.slider .slide:nth-child(1) {
   background-image: url('img/fon/001.jpg');
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   background-image: url('img/fon/002.jpg');
   animation-delay: -11s;
}

.slider .slide:nth-child(3) {
   background-image: url('img/fon/003.jpg');
   animation-delay: -22s;
}

.slider .slide:nth-child(4) {
   background-image: url('img/fon/004.jpg');
   animation-delay: -33s;
}

.slider .slide:nth-child(5) {
   background-image: url('img/fon/005.jpg');
   animation-delay: -44s;
}


@keyframes slider {
  0%, 18%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  98% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}