*{margin:0; padding:0;}
html {height:100%;width:100%;overflow:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);scroll-behavior:smooth;}
body {width:100%;overflow-x: hidden; background:#000;color:#fff;
      padding-top:calc(8vh + 3px);
      font: 200 1.1em 'Raleway', Helvetica Neue,  Helvetica, Arial ;
      font-display: swap;
      text-align: center;
      user-select: none; -webkit-user-select: none; /* Safari */    
}
/*chekbox and label-*/
input { visibility: hidden;position:fixed;top:-1000px;}
label{  cursor: pointer;will-change:transform;}

img{max-width:100%; }
a ,a:link,a:visited,a:hover{color: #fff;outline: none;text-decoration:none; }
.current,.current a:visited ,.current a:link {color:#00B4FF!important; }

#bg{background:#fff;position:fixed;left:0;top:0;width:120%;height:120%;z-index:-1; will-change: transform;transition: .5s;  
    opacity:0;}
#spinner{
  position:fixed;
  top: 0;
  left:0;
  height:4px;
  width:100%;
  z-index:99999;
  background: #FF41B4;
  -webkit-animation: loading 1.7s infinite;
          animation: loading 1.7s infinite;
}
@-webkit-keyframes loading {
    from {transform: translate(-100%,0);}
      50% {transform: translate(0,0);}
      to {transform: translate( 100%,0);}
}
@keyframes loading {
    from {transform: translate(-100%,0);}
      50% {transform: translate(0,0);}
      to {transform: translate( 100%,0);}
}
/*heading-*/
#head {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 8vh;
  font-size: 2.1em;
  letter-spacing:-2px;
  background:rgba(0,0,0,0.96);
  transition: .5s;
  z-index: 8;
}
.h1{position:absolute;left:4px;bottom:1px; }
/* hamburger */
#m{
  position:fixed;
  top: calc(8% - 52px);
  right:50%;
  width:64px;
  height:62px;
  z-index:99;
  transition:.2s;
  transform: translate(50%, 0);
}
#m:before,#m:after{
  position:absolute;
  content:'';
  width: 32px;
  left: 15px;
  transition:.15s;
  z-index:9999999;
  will-change: transform;
}
#m:before{
top: 20px;
height:20px;
border-top:1.5px solid white;
border-bottom:1.5px solid white;
}
#m:after{top: 31px;border-top: 1.5px solid #fff;}

#cek-m:checked ~ #m:before {transform:scale(0.001);}
#cek-m:checked ~ #m:after {transform:scale(0.5);}
#cek-m:checked ~ #menu {transform: translate(0,0);}
/* Standard Nav Menu */
#menu {
  position: fixed;
  top:0;
  left:0;
  width: 40%;
  height: 100%;
  padding: 0% 30%;
  cursor: pointer;
  z-index: 9998;
  transition: .1s cubic-bezier(0.52, 0.16, 0.24, 1);
  transform: translate(-100%, -0%);
  will-change: transform;        
}
.nav {
  position: relative;
  display: block;
  float: left;
  top: 40%;
  transform: translate(0%,-25vh);
  width: 32.3%;
  margin: 0.5%;
  padding-top: 18%;
  padding-bottom: 18%;
  border-radius: 10px;
  font-size: 2.2vw;
  background: rgba(0,0,0,0.96);
  box-shadow: 1px 1px 10px #66666673;
  transition: .5s;
}
.nav:hover{transform: translate(0px,-25vh)scale(1.05);}/* Standard Nav Menu */
#menu2{display:none;}
/*BUTTONS--------------------------------------*/
#bg0:before,#bg0:after,#play-btn:before,#thumb-1:before,#thumb-1:after,#thumb-2:before,#thumb-2:after,#info-btn:before,#play-btn:after,#info-btn:after, #top:after ,#top:before {
  content: "";
  position: absolute;
  transition: .3s cubic-bezier(0.52, 0.16, 0.24, 1);
  will-change: transform; 
}
#bg0,#play-btn,#thumb-1, #thumb-2,#info-btn, #top{
  position:fixed;
  top:calc(8% - 50px);
  height: 38px;
  width:50px;
  padding-top: 20px;
  opacity: .95;
  transition:.3s;
  z-index:999;
  overflow: hidden;
}
#top{right:-205px;}
#bg0{right:205px;}
#info-btn{right:155px;}
#play-btn{right:105px;}
#thumb-2{right:55px;}
#thumb-1{right:5px;}

/*** darkmode b */
#bg0:before {
  width: 17px;
  height: 16px;
  top:23px;
  left:calc(50% - 16px);
  border-radius: 100%;
  box-shadow: 6px 1px 0px 2.5px #777;
  transform:scale(0);
  will-change: transform;
}
#bg0:after{
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='gray' viewBox='0 0 24 24'><path d='M12 9c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm0-2c.34 0 .672.033 1 .08v-2.08h-2v2.08c.328-.047.66-.08 1-.08zm-4.184 1.401l-1.472-1.473-1.414 1.415 1.473 1.473c.401-.537.876-1.013 1.413-1.415zm9.782 1.414l1.473-1.473-1.414-1.414-1.473 1.473c.537.402 1.012.878 1.414 1.414zm-5.598 11.185c-.34 0-.672-.033-1-.08v2.08h2v-2.08c-.328.047-.66.08-1 .08zm4.185-1.402l1.473 1.473 1.415-1.415-1.473-1.472c-.403.536-.879 1.012-1.415 1.414zm-11.185-5.598c0-.34.033-.672.08-1h-2.08v2h2.08c-.047-.328-.08-.66-.08-1zm13.92-1c.047.328.08.66.08 1s-.033.672-.08 1h2.08v-2h-2.08zm-12.519 5.184l-1.473 1.473 1.414 1.414 1.473-1.473c-.536-.402-1.012-.877-1.414-1.414z'/></svg>");
  width: 32px;
  height: 32px;
  top: 17px;
  left:calc(50% - 16px);
  transform:scale(1);
  will-change: transform;
 }
/*** thumbnail */
#thumb-1:before,#thumb-1:after {
  height: 4px;
  width: 4px;
  left:calc(50% - 1.5px);
  border-radius: 50%;
  transition: .5s;
  will-change:transform;
}
#thumb-1:before{
  background: #777;
  box-shadow: 
  9px 8.5px #777,
  0px 8.5px #777,
   0px 17px #777, 
    9px 0px #777, 
   -9px 0px #777,
   9px 17px #777,
 -9px 8.5px #777, 
  -9px 17px #777; 
  z-index: 8;
}
#thumb-1:after{ 
  background: #00B4FF;
  box-shadow: 
    9px 8.5px #00B4FF,
    0px 8.5px  #00B4FF,
     0px 17px  #00B4FF, 
      9px 0px  #00B4FF, 
     -9px 0px  #00B4FF,
     9px 17px  #00B4FF,
   -9px 8.5px  #00B4FF, 
    -9px 17px  #00B4FF; 
    z-index: 9;  
    transform:scale(0);
}
#cek-1:checked ~ #thumb-1:after{transform:scale(1);}
/*** thumbnail2 */
#thumb-2:before ,#thumb-2:after{
  width: 29px;height:29px;
  top:17px;
  left:calc(50% - 14.5px);
  transition:.5s;
  will-change: transform;
}
#thumb-2:before {
  content: url("data:image/svg+xml;utf8, <svg clip-rule='evenodd'  fill='gray' width='29' height='29' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='m11 3h-7c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h7zm10 9.4h-8.6v8.6h7.6c.478 0 1-.379 1-1zm-8.6-9.4v8h8.6v-7c0-.478-.379-1-1-1z' fill-rule='nonzero'/></svg>");
  z-index: 8;
}
#thumb-2:after {
  content: url("data:image/svg+xml;utf8, <svg clip-rule='evenodd'  fill='rgb( 0, 180, 255 )' width='29' height='29' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='m11 3h-7c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h7zm10 9.4h-8.6v8.6h7.6c.478 0 1-.379 1-1zm-8.6-9.4v8h8.6v-7c0-.478-.379-1-1-1z' fill-rule='nonzero'/></svg>");
  z-index:9;
  transform:scale(0);
}
#cek-2:checked ~ #thumb-2:after{transform:scale(1);}

#thumb-1:focus,#thumb-2:focus{transform:scale(0.9);}/* onpress animation */
/* infobutton */
#info-btn:before,#info-btn:after {
  position:absolute;
  width: 24px;height:24px;
  left: calc(50% - 12px);
  transition: .4s;
  will-change: transform;
}
#info-btn:after{
  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='gray' viewBox='0 0 24 24'><path d='M12 3c5.514 0 10 3.592 10 8.007 0 4.917-5.144 7.961-9.91 7.961-1.937 0-3.384-.397-4.394-.644-1 .613-1.594 1.037-4.272 1.82.535-1.373.722-2.748.601-4.265-.837-1-2.025-2.4-2.025-4.872 0-4.415 4.486-8.007 10-8.007zm0-2c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 1.417.345 2.774.503 4.059.503 7.084 0 11.91-4.837 11.91-9.961-.001-5.811-5.702-10.006-12.001-10.006z'/></svg> ");
  transform:scale(1); 
}
#info-btn:before{
  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill=' rgb( 0, 180, 255 )' viewBox='0 0 24 24'><path d='M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.738 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 9.236 2.247 15.968-3.405 15.968-9.457 0-5.812-5.701-10.007-12-10.007zm0 14h-6v-1h6v1zm6-3h-12v-1h12v1zm0-3h-12v-1h12v1z'/></svg> ");
  transform:scale(0); 
}
/* playbtn---- */
#play-btn:before{
  height: 0;
  border-top: 11px solid transparent;
  border-left: 22px solid #00B4FF;
  border-bottom: 11px solid transparent;
  left:calc(50% - 11px);
  transform:scale(1) ;
  will-change: transform;
}
#play-btn:after{
  height: 23px;
  width:4px;
  left:calc(50% - 9px);
  border-right: 7px solid #00B4FF;
  border-left: 7px solid #00B4FF;
  transform: scale(0); 
  will-change: transform;
}
#cek-p:checked ~ #play-btn:before{transform:scale(0);}
#cek-p:checked ~ #play-btn:after{ transform:scale(1);}

#cek-1:checked ~ #play-btn:before{filter: grayscale(100%);}
#cek-2:checked ~ #play-btn:before{filter: grayscale(100%);}
/*** to top btn */
#top:before {
  display: block;
  height: 17px;
  width:17px;
  top:30px;
  left: calc(50% - 8.5px);
  border-left:2px solid gray;
  border-top:2px solid gray;
  transform: rotate(45deg);
  will-change: transform;
}
#top:after{
  top:20px;
  border-top:2px solid gray;
  width: 25px;
  left: calc(50% - 12px);
  transform:scale(0.4);
  will-change: transform;
}
#top:focus:after {transform:scale(1);}
#top:focus:before {transform: rotate(45deg); animation: totop .3s 2;}
@keyframes totop {
  from {transform: translate(0,0px)rotate(45deg);}
  50% {transform: translate(0,-4px)rotate(45deg);}
  to {transform: translate( 0,0px)rotate(45deg);}
}
/* END butons ---------------- */
/* PANELS */
#info-panel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width:100%;
  transform: translate(0,-108%);
  transition: .15s cubic-bezier(0.52, 0.16, 0.24, 1);
  will-change: transform;
  z-index:3;
}
#info{
  position: fixed;
  top: 8vh;
  width:92%;
  padding: 30px 4% 30px 4%;
  border-radius:0px 0px 15px 15px;
  background:rgba(0,0,0,0.96);
  box-shadow:  0px 0px 1px 1px #77777722;
}
/**-------------SLIDER CORE ---------------------------------**/
.lightSlider:before, .lightSlider:after ,.lSGallery:before,.lSGallery:after{content: " ";display: table;}
.lightSlider:after,.lSGallery:after  {clear: both;}
.lslide {float:left;}
.lSSlideWrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.lSSlide {will-change: transform;
-webkit-transition-timing-function: inherit !important;
        transition-timing-function: inherit !important;
       -webkit-transition-duration: inherit !important;
               transition-duration: inherit !important;
                 -webkit-transform: translate(0px, 0px);
                     -ms-transform: translate(0px, 0px);
                         transform: translate(0px, 0px);
}
.lSSlideWrapper{left: 0;right: 0;margin: auto;}/*center*/
/**End of core **/
/**lightslider CORE MODDING  &destroy modding-----------------------------*/
#picwrap{
  overflow-y:visible;
  overflow-x:visible;
  white-space: nowrap;
  line-height: 0;
  font-size: 0; 
}
.pic{
  display:inline-block;/* destroyed and for horizontal 3 */
  width:33.33333%;/* is destroyed-the img .pic */
  font-size: 0;
  line-height: 0;
  background: #00B4FF; 
  background-repeat: no-repeat;
  background-position: 50% 45%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='20' height='20'><circle cx='10' cy='10' r='5' /></svg>"); 
}
.lslide img {width: 100%!important;/*is slider -the img*/}
/**end lightslider MODDING  &destroy modding-----------------------------*/
/** Gallery sliding thumnails ----------------*/
.lSGallery { position: fixed;transform: translate(0,0); will-change:transform;}

.pgtumb {display:inline-block;overflow:hidden;opacity: 1;}
.pgtumb .active, .pgtumb:hover {opacity: 0.5;}
/* Pager */
.dot {
  display: inline-block;
  margin:0 4px 0 4px;
  line-height: 8px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  color: rgba(255, 0, 0, 0);
  background:rgba(119, 119, 119, 0.8);
  cursor:pointer;
}
.dot:hover , .dot.active  {
  background: rgba(119, 119, 119, 0);
  color: #FF41B4;
}
/* slider > arows---------------------------------------*/
.lSPrev,.lSNext {
  position: absolute;
  top:0;
  width:25%;
  height:100%;
  opacity: 0.3;
  z-index: 2;
  background:rgba(128, 128, 128, 0);/*ie*/
  transition: 0.5s;
  will-change: transform;
  cursor: pointer;  
}
.lSPrev {left: 0;}
.lSNext {right: 0;}
.lSPrev:hover,.lSNext:hover {opacity: 0.999999;}
/* Actual arrows----*/
.lSPrev:before,.lSNext:before,#arrows:before,#arrows:after{
  position:absolute;
  content:'';
  top:calc(50% - 22px);
  width:45px;
  height:45px;
  border-bottom:1px solid #fff;
  border-left:1px solid #fff; 
  box-shadow: -1px 1px  #777;
}
.lSPrev:before{transform: rotate(45deg);left:13px;}
.lSNext:before{transform: rotate(-135deg);right:13px;}
/* arrows- end -----------------------*/
.lsGrab > * {cursor:grab;}
.lsGrabbing > * {cursor:grabbing;}
.rightEnd {position:relative;animation: rightEnd 0.3s;}
.leftEnd  {position:relative;animation: leftEnd 0.3s;}
@keyframes rightEnd{0%{left:0;}50%{left:-25px;}100%{left:0;}}
@keyframes leftEnd {0%{left:0;}50%{left: 25px;}100%{left:0;}}
/* js css classes */
.on{ transform: translate(0,0)!important}/*top:0;ie*/
.of{ transform: translate(0,-100%)!important;}
/* CHROME SCROLL-b */
.uiScrollableArea {background-color: transparent ;}
::-webkit-scrollbar {width: 7px ;height: 7px ;}
::-webkit-scrollbar-track-piece {background-color: transparent ;background: transparent;}
::-webkit-scrollbar-thumb {background-color: #444 ;border-radius: 5px ;}
::-webkit-scrollbar-thumb:hover {background-color: #777 ;}
::-webkit-scrollbar-thumb:active {background-color: #777 ;}
/*** slider insta -------------------------------------------------*/  
.pic img { width: 100%;transition: 0.3s; cursor:pointer;transition: 1s; } 
.pic:focus img{
  position: fixed;
  top:100px;
  left: calc(50% - 37.5vh);
  width:auto;
  height:100%;
  background:#00e0fd7c;
  z-index:9999;
  transition: .05s;  
  transform: translate(0%, -100px);
  opacity:1;
}
/*** prev img*/  
.pic:has(+ .pic:focus),
.pic:focus + .pic {
  position: fixed;
  top:8vh;
  width:50%!important;
  height:100%;
  z-index:999999;
  transition: 0s; 
  opacity:0;
  cursor: pointer;
}
/*** next img*/ 
.pic:has(+ .pic:focus){left:0;}
.pic:focus + .pic {right:0;}

.pic:focus + .pic img ,.pic:has(+ .pic:focus) img {position:fixed;top:100px;transition: 0s;  }
.pic:has(+ .pic:focus) img {  right: calc(50%) ;transform: translate(-100%, -100px);}
.pic:focus + .pic img  { left: calc(50% );transform: translate(100%, -100px);}
  
#ex{
position:fixed;
left:0;top:0;width:100%;height:100%;cursor:pointer;
background:rgba(255, 255, 255, 0.80);
z-index:9991;
will-change: transform;
transform:translate(0,-100%);
cursor: pointer;
}
#ex:after{
  content:'X'; 
  position: fixed;
  color:#777;
  font-size: 30px;
  line-height:56px;
  right: 0px;
  top: 0px;
  width:56px;
  height:56px;
  z-index: 9999999;
  background: white;
  will-change: transform;
  transform: translate(100%,0%);
  transition: 0.3s;  
}
#picwrap:focus-within  ~  #ex,
#picwrap:focus-within  ~  #ex:after,
#picwrap:focus-within  ~  #arrows{ transform:translate(0,0%);}

#arrows{ position:fixed;height:100%;width:100%;top:0;left:0;
  transform:translate(0,-100%);
  opacity:0.5;
  z-index:99999;
  cursor:pointer;
}
#arrows:before{ left: calc(50% - 45.5vh);transform: rotate(45deg);}
#arrows:after{ right: calc(50% - 45.5vh);transform: rotate(-135deg);}
/*end of insta galery*/
/*FUNCTIONS -----------------*/  

#cek-i:checked ~ #info-panel {transform: translate(0, 0);}
#cek-i:checked ~ #info-btn:after{transform:scale(0) rotate(-0deg);}
#cek-i:checked ~ #info-btn:before{transform:scale(1) rotate(-0deg);}

#cek-bg:checked ~ #bg {opacity:1;}

#cek-bg:checked ~ *,
#cek-bg:checked ~ #menu .nav,
#cek-bg:checked ~ #menu2 .nav2,
#cek-bg:checked ~ #head .h1{color:#000;}

#cek-bg:checked ~ .b ,
#cek-bg:checked ~ #info-panel #info,
#cek-bg:checked ~ #menu .nav,
#cek-bg:checked ~ #menu2 {background:#fff;color:#000;}

#cek-bg:checked ~ #m:after,
#cek-bg:checked ~ #m:before { border-top: 1.5px solid #000;}
#cek-bg:checked ~ #m:before {border-bottom: 1.5px solid #000;}

#cek-bg:checked ~ #bg0:before{transform:scale(1) rotate(360deg);}
#cek-bg:checked ~ #bg0:after{transform:scale(0) rotate(180deg);}

#cek-1:checked ~ #picwrap{ white-space: normal;}
#cek-1:checked ~ #picwrap .pic{ width:16.4%;margin:0.06%;}

#cek-2:checked ~ #picwrap{ white-space: normal;}
#cek-2:checked ~ #picwrap .pic{ width: 32.9%;margin-top: 1px; margin-right: 1px;}

/* END FUNCTIONS ? -----------------*/
/** MOBILE ---------------------------------------------------------------------------------------------------------------------------*/
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
/* Portrait */
@media screen and (orientation:portrait){

#cek-1:checked ~  #picwrap .pic{ width: 32.9%;margin-top: 1px; margin-right: 1px;}
#cek-2:checked ~  #picwrap .pic  {width:100%;margin-left: 0;}

/* General Layout */
body{padding-top: calc(16.667vw + 70px);padding-bottom: 50px;}/*topgap for header */
#head { height: 56px;font-size: 1.9em; box-shadow:  0px 0px 1px 1px #66666633;}
.h1{ left:2px;bottom:6px;}
/* ---------- menu ----------- */
#m, #menu{ display:none;}

#menu2{
  position: fixed;
  display: block;
	width:100%;
  top: 56px;
  background: rgba(0,0,0,0.96);
  font-size:11px;
  font-weight: bold;
  padding-bottom: 20px;
  transition: .5s,transform .1s;
  will-change: transform;
  z-index: 3;  
}
.nav2{ 
  float: left;
  width: calc(16.6% - 2px);
  height:calc(16.6vw - 2px);
	padding:0px 1px;
}
.buble{
	position:relative;
  width:calc(100% - 4px);
  height: calc(100% - 4px);
	border-radius:50%;
	padding:2px;
  z-index: 2;
}
 .current{ 
	position:relative;
	width:100%;
  height:100%;
	margin-bottom:.25em;
	border-radius:50%;
	overflow:hidden;	
	z-index:0;
}
 .current:before{
	content:"";
	position:absolute;
	top:0;
  left:-50%;
	width:200%;
  height: 200%;
	background:#00B4FF;
  transform-origin:50% 0px;
  transform: rotate(0deg);
  animation: draw .6s linear 1;
	will-change:transform;
	z-index:1;  
}
@keyframes draw { 
	0% {transform: rotate(-180deg);}
  100% {transform: rotate(0deg);}
}
/*** slider mob instag-------------------------------------------*/  
.no-marg{margin-right:0;}
#picwrap{ white-space:normal;overflow:hidden;}
.lSPrev,.lSNext { width:50%;}
.pic{ width: 32.9%;margin-top: 1px; margin-right: 1px; }/*  padding-bottom: 21.7%;} !important;/*4:3 DESTROYRD smal */
.pic img { width: 100%;transition: 0.3s;} 
.pic:focus img{
  position: fixed;
  top:156px;
  width: 100%;
  height:auto;
  left:0;
  background: #00B4FF;
}
.pic:has(+ .pic:focus),
.pic:focus + .pic {top:56px; height:133.3333vw }

.pic:focus + .pic img ,.pic:has(+ .pic:focus) img {position:fixed;top:156px;transition: 0s;}

#arrows{ top:60px;height:133.3333vw;transform:translate(0,-150%);}
#arrows:before {left:13px;}
#arrows:after {right:13px;}
/*---end of insta galery------------------------*/
#bg0,#play-btn,#thumb-1,#thumb-2, #top{
  width:20%;
  bottom:-3px;
  top:auto;
  will-change: transform;
}
#bg0{right:80%;}
#info-btn{right:0%;top:-5px;}
#play-btn{right:40%;}
#thumb-1{right:20%;}
#thumb-2{right:60%;}
#top{right:0;}

#info-panel {
  bottom:0;
  top:auto;
  line-height: 1.6em;
  transform: translate(0,100%);
  will-change: transform;
  z-index:9991;
}
#info{ top:auto;bottom:0; border-radius:15px 15px 0px 0px;}

#bar{
  position:fixed;
  bottom:0px;
  width:100%;
  left:0;
  height:48px;
  border-radius: 15px ;
  background: rgba(0, 0, 0, 0.91);
  box-shadow:  0px 0px 1px 1px #77777722;
  will-change: transform;
  transition: .3s;
  z-index: 998;
}
#bar:after{
  content:" ";
  display:block;
  position: absolute;
  left:-50px;
  top: calc(50% - 3px);
  width:6px;
  height: 6px;
  border-radius: 50%;
  background : #00B4FF;
  z-index: 1;
  opacity:0.01;
  will-change: transform;
}
#top:focus ~ #bar:after{left:90%;background:#fff;animation: puls 1.5s 1;}
#bg0:focus ~ #bar:after{ left:10%;background:#fff;animation: puls 1.5s 1;}
#play-btn:focus ~ #bar:after{left:50%;animation: puls 1.5s 1;}
#thumb-2:focus ~ #bar:after{left:30%;animation: puls 1.5s 1;}
#thumb-1:focus ~ #bar:after{left:70%;animation: puls 1.5s 1;}
@keyframes puls{
  from{transform: scale(1);opacity:.5;}
  35%{transform: scale(30.5);opacity:0.001;} 
  to{transform: scale(0);opacity:0.001;} 
}

}/** MOBILE  end-------------------------------------*/
#ig {
  display: inline-block;
    font-weight: 400;
    padding: 10px 25px 10px 50px;
    margin: 15px 15px 0px 15px;
    border-radius: 10px;
    background: #00B4FF;
    color: #fff;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 15px 50%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'><path d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/></svg>");
}
 /** eggsssss css------*/
.e1,.e3{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transition: .6s;
  z-index: 99999;
  transform: scale(0.001);
}
.egg{transform: scale(1);}
.e,.e2{
  position: fixed;
  top:0; left:0;
  z-index: 10; 
}
.e1{z-index: 9992;}
.e2{z-index: 99999;}
.e3{z-index: 9994;}
  /**glich css------*/