@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');

@keyframes show {
from {opacity: 0;} 80% {opacity: 0;} to {opacity: 1;}
}

header {width: 100%; margin: 0 auto; top: -10px; position: fixed; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}

#logomenus {width: 100%; height: 32px; padding-top: 32px; text-align: center; display: block;} #logomenus img {height: 28px; }

#menu {
 width: 100%;
 height: 52px;
 max-width: none;
 left: 0;
 transform: none;
 margin-top: 70px;
 background: rgba(19, 19, 19, 0.8);
 backdrop-filter: blur(20px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 z-index: 999;
 transition: background 0.3s ease, backdrop-filter 0.3s ease, margin-top 0.3s ease;
}

#menu div {float: left;}
#amb1 {width: 20%; text-align: left; box-sizing: border-box; } #amb1 img {height: 24px; margin-top: 14px; margin-left: 24px;}
#amb2 {width: 60%; text-align: center; margin-top: 16px; box-sizing: border-box;} 
 #amb2 a {color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 15px; font-style: normal; font-weight: 500; line-height: 20px; margin: 6px;}
 #amb2 a:hover {color: rgba(255, 255, 255, 0.80);}
#amb3 {width: 20%; text-align: right; margin-top: 11px; padding-right: 24px; box-sizing: border-box; color: inherit; background: rgba(255, 255, 255, 0.00);}
  #amb3 a {color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 15px; font-style: normal; font-weight: 500; line-height: 18px; margin: 6px;}
 #amb3 a:hover {color: rgba(255, 255, 255, 0.80);}

@media screen and (max-width: 599px) {
 #menu {display: none;}
 #amb1 {display: none;}
 #amb2 {width: 100%}
 #amb3 {display: none;}
#menu.scrolled {margin-top: 30px;}
}

@media (min-width: 599px) {#logomenus {display: none;} }

#logo {background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border-radius: 12px; height: 48px; width: 178px; padding: 10px 12px 10px 10px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08);}
#logo img {height: 24px;}

 #mobilemenu {
 text-align: center;
 width: 100%;
 height: 60px;
 max-width: none;
 left: 0;
 transform: none;
 margin-top: 10px;
 background: rgba(19, 19, 19, 0.8);
 backdrop-filter: blur(20px);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 position: fixed;
 bottom: 0;
 justify-content: center; 
 display: flex;
 gap: 16%; 
z-index: 9999;
}

 #mobilemenu img {height: 28px; margin-top: 14px; opacity: 0.4;}

 #mobilemenu img:hover {opacity: 0.8; transition: filter 0.3s ease;}

.activeicon {opacity: 1 !important;}

@media (min-width: 600px) {#mobilemenu {display: none;} #logomenus {display: none;} }
@media (max-width: 599px) {#adminmenu {display: none;} #start {height: 60px;} }


#pages {background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; height: 48px; width: 280px; text-align: center; padding-top: 12px; }
#pages a {padding: 6px; color: #95979F; font-family: Manrope; font-weight: 500; font-size: 12pt;}
.active {text-decoration: none; color: #fff !important; border-bottom: 2px solid rgba(255, 255, 255, 1); padding: 0 !important; padding-bottom: 13px !important; margin: 6px;}

#telegram {background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; height: 48px; width: 178px; text-align: left; overflow: hidden;}
#telegram a {padding: 6px; color: #fff; font-family: Manrope; font-weight: 500; font-size: 12pt;}

#mainhead {padding-top: 10px; text-align: center; height: 400px; border-radius: 0px 0px 64px 64px; color: #fff; animation: show 2.5s; animation-timing-function: linear;  animation-delay: -1s; }

#track {float: left; width: 50%;}
 #radiostat {margin: 0 auto; width: 100%; font-family: Manrope; font-weight: 500; font-size: 20pt; line-height: 40px; margin-top: 16px; margin-bottom: 12px; letter-spacing: 0.005em; color: #000; text-align: center;}
 #live {float: left; width: 40%;}
 #liveinfo {font-family: Manrope; font-weight: 500; font-size: 30pt; line-height: 46px; margin-top: 8px; letter-spacing: 0.005em; color: #000; }

#fixedplay {position: fixed; bottom: 50px; width: auto; height: 40px; border-radius: 100px; box-sizing: border-box; text-align: center; float: left; display: inline-block; left: 50%; transform: translate(-50%);}

#fixedplay img {padding: 10px;}

#startplay {width: 100%; height: 500px; text-align: center; background: #141414; }
body {margin: 0 auto; background: #000 url() no-repeat; background-attachment: fixed; background-size: 100%;}
#content {width: 90%; margin: 0 auto; max-width: 1600px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 15, 15, 0.80); padding: 12px; border-radius: 24px; overflow: auto; }
#content_page {width: 90%; margin: 0 auto; max-width: 1600px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 15, 15, 0.80); border-radius: 16px; overflow: auto; color: #fff; margin-top: 24px; }

#styles {text-align: center; width: 100%; height: 58px; }
#styles a {margin: 3px; padding: 8px 16px 8px 16px; background: rgba(25, 25, 25, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 16px;}
#styles a:hover {background: rgba(25, 25, 25, 1); color: rgba(255, 255, 255, 0.8); transition: filter 0.3s ease;}

#content_podcast {width: calc(90%); margin: 0 auto; max-width: 1600px; overflow: auto; background: rgba(40, 40, 40, 0.40); backdrop-filter: blur(30px); padding: 12px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 24px; }
#contentfree {width: 90%; margin: 0 auto; max-width: 1600px; overflow: auto; display: flex; align-items: center; gap: 24px; margin-bottom: 32px}
#podcast {float: left; width: 25%; min-height: 280px; height: auto; overflow: auto; padding: 12px; display: block; }
#podcastposter {height:0; width:100% ;padding-bottom: 100%;; background: rgba(255, 255, 255, 0.03); border-radius: 16px; margin-bottom: 12px; } #podcastposter img {display: block} 
#freeb {background: rgba(40, 40, 40, 0.40); backdrop-filter: blur(30px); float: left; width: 33.3%; padding: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08);}
#freeb div {float: left; margin-right: 24px; color: #fff; overflow-wrap: normal; max-width: 264px; }
#freeb img {width: 128px; border-radius: 12px; display: block; }
#oblozinfo {max-width: 400px; overflow-wrap: normal;}
.ptitle {width: 100%; max-width: 400px; font-family: Manrope; font-weight: 600; font-size: 16pt; line-height: 28px; margin-top: 6px; color: #fff; }
.ptitle_w {width: 100%; max-width: 400px; font-family: Manrope; font-weight: 600; font-size: 16pt; line-height: 28px; margin-top: 6px; color: #fff; }
.poption {width: 100%; min-height: 64px; font-family: Manrope; font-weight: 500; font-size: 12pt; line-height: 24px; color: #B5B5B5; margin-top: 4px; letter-spacing: 0.01em; }
#podcast img {width: 100%; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); }
.nota {opacity: 0.4;}

#freebigb {background: rgba(20, 20, 20, 0.40); backdrop-filter: blur(30px); float: left; width: 50%; padding: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; display: none; }

.play1 {background: rgba(30, 30, 30, 0.40) url(/images/nov_select.png) no-repeat 50% !important; background-attachment: fixed; background-size: 100% 100%; min-height: 500px; text-color: #fff; display: none;}
.play2 {background: rgba(30, 30, 30, 0.40)  url(https://storage.arenaradio.ru/podcastlist/bigblock_2.png) no-repeat 50% !important; background-attachment: fixed; background-size: 100%; min-height: 500px; color: #fff; display: none;}

#bigh1 {width: 90%; margin: 0 auto; max-width: 1600px; font-family: Manrope; font-weight: 800; font-size: 80pt; line-height: 120px; color: #fff; padding-top: 64px; padding-bottom: 64px; text-transform: uppercase; }
#bigh1 p {width: 100%; }

#footer {width: 90%; margin: 0 auto; max-width: 1600px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 12px; margin-top: 48px; border-radius: 0; overflow: auto; margin-bottom: 64px; padding: 6px; color: #95979F; font-family: Manrope; font-weight: 500; font-size: 12pt;}
#footer div {width: 25%; float: left; color: #fff; padding-top: 36px; padding-right: 36px; overflow: hidden; }
#footer div a {display: block; width: 600px; padding-top: 6px; color: rgba(255, 255, 255, 0.60);}
#footer img {max-width: 158px; padding-top: 4px; padding-bottom: 12px; }


#podcastlist {width: 100%; overflow: auto; }
#pod_list {width: 100%; margin-bottom: 24px;}
#pod_list div {float: left; width: auto; max-width: 220px; color: #fff; padding-right: 16px; }
#pod_list img {border-radius: 12px; }

hr {width: 100%; border-color: #ffffff14; border-width: 0.5px; border-style: solid; margin-top: 20px; margin-bottom: 20px;}

@media screen and (max-width: 1240px) {
#podcast {width: 33.3%; }
}

@media screen and (max-width: 600px) {
#trackid {width: auto !important; }
header {margin: 0 auto; top: 0; padding-top: 32px; padding: 0; position: fixed; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}
#menublocks {width: 94%; margin: 0 auto; overflow: auto; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; margin-top: 72px; }
#menublocks div {float: left; padding: auto; color: #fff; margin-top: 0; }
#logo {display: none}
#pages {width: 280px; text-align: center; }
#pages a {padding: 6px; color: #fff; font-family: Manrope; font-weight: 500; font-size: 12pt;}
#telegram {display: none}


 #mainhead {padding-top: 10px; text-align: center; height: 400px; border-radius: 0px 0px 64px 64px; color: #fff;}
 
 #content_podcast {width: 94%; padding: 0px; margin-bottom: 12px; }
 #content {width: 96%; padding: 6px; }
 #contentfree {width: 100%; margin: 0 auto; overflow: hidden; display: block; margin-bottom: 16px; box-sizing: border-box;} 
 #content_page {width: 96%; margin: 0 auto; }
 #freeb {float: left; width: 94%; padding: 12px; margin: 12px; border-radius: 24px; overflow: hidden; box-sizing: border-box; margin-bottom: 6px; }
 #freebigb {width: 100%; margin: 0 auto; }
#freeb div {float: left; margin-right: 24px; color: #fff; overflow-wrap: normal; max-width: 180px; }
#freeb img {width: 100px; border-radius: 8px;}
 
 #podcast {float: left; width: 50%; height: 250px !important; overflow: hidden; padding: 12px; display: block; }
 .ptitle {font-size: 12pt; line-height: 20px; }
 .poption {font-size: 10pt; line-height: 18px; }
 
 #bigh1 {width: 96%; margin: 0 auto; font-family: Manrope; font-weight: 800; font-size: 32pt; line-height: 48px; color: #fff; padding: 6px; padding-top: 16px; padding-bottom: 24px; text-transform: uppercase; }
#bigh1 p {width: 100%; }

#footer {width: 96%; margin: 0 auto; padding: 6px; padding-top: 24px; overflow: hidden; padding-bottom: 32px;}
#footer div {width: 100%; float: left; color: #fff; padding-bottom: 16px; }
#footer div a {display: block; width: 600px; padding-top: 6px; color: rgba(255, 255, 255, 0.60);}
#footer img {max-width: 150px; padding-top: 4px; padding-bottom: 12px; }
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox */
html {
  scrollbar-color: #333 #000;
  scrollbar-width: thin;
}