*{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 */
}
html, body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
/* Chrome, Safari, and newer Edge */
html::-webkit-scrollbar, body::-webkit-scrollbar {
display: none;
}
/*chekbox and label-*/
input { visibility: hidden;position:fixed;top:-100%;}
label{ cursor: pointer;will-change:transform;}
:root { --c:#00B4FF;}
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:var(--c)!important; }
p{padding: 10px;}
#bg{background:#fff;position:fixed;left:0;top:0;width:120%;height:120%;will-change: transform;transition: .5s;
z-index:-9; 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,");
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: var(--c);
box-shadow:
9px 8.5px var(--c),
0px 8.5px var(--c),
0px 17px var(--c),
9px 0px var(--c),
-9px 0px var(--c),
9px 17px var(--c),
-9px 8.5px var(--c),
-9px 17px var(--c);
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, ");
z-index: 8;
}
#thumb-2:after {
content: url("data:image/svg+xml;utf8, ");
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, ");
transform:scale(1);
}
#info-btn:before{
content: url("data:image/svg+xml;utf8, ");
transform:scale(0);
}
/* playbtn---- */
#play-btn:before{
height: 0;
border-top: 11px solid transparent;
border-left: 22px solid var(--c);
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 var(--c);
border-left: 7px solid var(--c);
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;
}
/* 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 -------------------------------------------------*/
/**lightslider CORE MODDING &destroy modding-----------------------------*/
.Grab > * {cursor:grab;}
.Grabbing > * {cursor:grabbing;}
#picwrap{
position:fixed;
white-space: nowrap;
line-height: 0;
font-size: 0;
transition: 0.15s;
width: 100%;
}
.pic {
display: inline-block;
width: 33.33333%;
font-size: 0;
line-height: 0;
background-color: var(--c);
background-repeat: no-repeat;
background-position: 50% 45%;
background-image:url("data:image/svg+xml;utf8,");
}
.pic img { width: 100%; cursor:pointer;transition: 1s; }
.c img, .r img ,.l img{
position: fixed;
top:100px;
left:calc(50% - 37.5vh);
width:auto;
height:100%;
z-index: 9999;
transform: translate3d(0, -100px, 0);
transition: .08s;
will-change: transform;
}
.l img {left:-75.5vh;transform: translate3d(-75.5vh, -100px, 0);}
.r img {left: 100% ;transform: translate3d(75.5vh, -100px, 0);}
#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: 99;
background: white;
transition: 0.3s;
}
#left,#right{
position:fixed;height:100%;width:50%;
top: 8vh;
transform: translate(0,-150%);
opacity:0.5;
z-index:99999;
cursor:pointer;
}
#left{ left:0; }
#right{right:0; }
#left:before{ right: 40vh;transform: rotate(45deg);}
#right:after{ left: 40vh;transform: rotate(-135deg);}
/*end of insta galery*/
/* slider > arows---------------------------------------*/
#prev,#next {
position: fixed;
width:50%;
height:45.5vw;
opacity: 0.3;
z-index: 2;
transition: opacity 0.5s;
will-change: transform;
cursor: pointer;
}
#prev {left: 0;}
#next {right: 0;}
#prev:hover,#next:hover {opacity: 0.999999;}
/* Actual arrows----*/
#prev:before,#next:before,#left:before,#right: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;
}
#prev:before{left:13px;transform: rotate(45deg);}
#next:before{right:13px;transform: rotate(-135deg);}
/* arrows- end -----------------------*/
/* Pager */
#dots{
position: fixed;
white-space: nowrap;
width: 100%;
top: calc( 8vh + 45vw);
will-change: transform;
}
#dots img { width: 30px;}
#dots img:hover,.active{
transform:scale(1.2);
z-index: 9999;
box-shadow: 0px 0px 0px 2px #ff0000 ;
will-change: transform;
}
.dot {
display: inline-block;
margin:0 4px 0 4px;
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;
}
/*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 ~ p,
#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;position: relative;}
#cek-1:checked ~ #picwrap .pic{ width:16.4%;margin:0.06%;}
#cek-2:checked ~ #picwrap{ white-space: normal;position: relative;}
#cek-2:checked ~ #picwrap .pic{ width: 32.9%;margin-top: 1px; margin-right: 1px;}
#cek-1:checked ~ #next ,
#cek-1:checked ~ #prev {transform:translateY(-150%);}
#cek-2:checked ~ #next ,
#cek-2:checked ~ #prev {transform:translateY(-150%);}
#cek-1:checked ~ #dots {display:none;}
#cek-2:checked ~ #dots {display:none;}
/* specaila case for video and card.. .txt and width -----------------*/
#cek-2:checked ~ #picwrap .VIDEO,
#cek-2:checked ~ #picwrap .CARD {
width: 100%;
margin-top: 1px;
margin-right: 1px;
}
.pic:has(>.txt) {
background: none;
}
.txt {
font-size: 16px;
line-height: 16px;
padding: 10px;
}
/* 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;}
.play{ padding-top:60px;}
#cek-p:checked ~ #picwrap{ white-space: nowrap;}
#cek-p:checked ~ #picwrap .pic{ width:100%;margin-top: 0px; margin-right: 0px;}
/* General Layout */
body{padding-top:calc(80px + 16.6vw);/*topgap for header */
padding-bottom: 60px;
min-height:calc(133vw + 80px);
}
#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;
}
.cirkle{
position:relative;
width:100%;
height:100%;
margin-bottom:.25em;
border-radius:50%;
overflow:hidden;
z-index:0;
}
.cirkle:before{
content:"";
position:absolute;
top:0;
left:-50%;
width:200%;
height: 200%;
background:var(--c);
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-------------------------------------------*/
.pic{ width: 100%; }/*defoult wiew on mob */
.c img,.r img ,.l img{
top:156px;
left:0;
width: 100%;
height:auto;
background: var(--c);
transform: translate3d(-0%, -100px, 0);
will-change: transform;
}
.r img ,.l img{z-index: 9997;}
.l img {left:-100%;top:156px; transform: translate3d(-0%, -100px, 0);}
.r img {left:100%; top:156px;transform: translate3d(0%, -100px, 0);}
#left,#right{ top:60px;height:133.3333vw;transform:translate(0,-150%);}
#left:before {left:13px;}
#right:after {left: auto;right:13px;}
#prev,#next { height: 133.3vw;}
#dots{ top: calc(148vw + 88px); }
/*---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 : var(--c);
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: var(--c);
color: #fff;
cursor: pointer;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image:url("data:image/svg+xml;utf8,");
}
/** 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------*/
/**new conenipe css------*/
.text-content {
width: 150px;
min-height: 20px;
background: #333;
color: #fff !important;
padding: 5px;
border-radius: 5px;
overflow-wrap: break-word;
font-size: 14px;
line-height: 1.2;
overflow: visible;
}
iframe {
width: 100%;
height:600px;
}