canvas{
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

body{
  background-color:rgba(0,0,0,0.25);
  margin:0;padding:0;
  overflow: hidden;
  font-family: helvetica;
  cursor: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#icon{
  z-index:9999;
  position:fixed;
  left:30px;top:30px;
  width:50px;
  pointer-events:none;
}

#canvas{
  z-index:-1;
  position:fixed;
  width:100%;height:100%;
  border:none;
}

#bg{
  position:fixed;
  z-index:-3;
  width:100%;
  height:100%;
  background-image:url("../assets/bg/10.jpg");
  background-position: center;
  background-size:500px;
  filter:brightness(0.9);
}



/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */


/* .button{
  border-radius:5px;

} */



/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */


.custom-cursor {
  position: absolute;
  z-index:9999;
  pointer-events:none;
}

#crosshair{
  width:40px;
  pointer-events:none;
}

/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */

#panels-holder{
  z-index:2;
  position:fixed;
  width:100%;
  height:100%;
  pointer-events:none;
}
.panel{
  z-index:0;
  position:absolute;
  height:50vh;
  /* width:40.5vh; */
  top:20vh;
  pointer-events:all;
  transform:skewX(0deg);
  margin-left:-20.25vh;
}
.p-prev{
  left:-50vw;
}
.p-current{
  left:50vw;
}
.p-next{
  left:150vw;
}

.no-touch{
  pointer-events:none;
  box-shadow:0vh 0.5vh 1vh 0.25vh rgba(0,0,0,0.2);
  border-radius:1.5vh;
}

/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */

.rail{
  z-index:2;
  position:fixed;
  left:0px;right:0px;
  height:1vh;
  width:100%;
  /* background-color:rgba(150,150,150,1); */
  background-image:url("../assets/bg/8.jpg");
  background-size: 100px;
  background-repeat: repeat-x;
  top:15vh;
  /* filter:brightness(0.8); */
}
.t-rail{
  margin-top:0vh;
}
.b-rail{
  margin-top:1.5vh;
}

.rail-holder{
  position:absolute;
  background-image:url("../assets/bg/8.jpg");
  background-size: 100px;
  background-repeat: repeat-x;
  top:17vh;
  height:3vh;
  width:1vh;
}
.rh1{
  margin-left:-1vw;
}
.rh2{
  margin-left:1vw
}
.r-h-c{
  left:49.5vw;
}
.r-h-p{
  left:-50.5vw;
}
.r-h-n{
  left:149.5vw;
}

/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */

.canvas-panel{
  z-index:9999;
  /* background-color:red; */
  width:40.5vh;
}

/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */

.move{
  position:fixed;
  z-index:6;
  top:0;bottom:0;
  margin:auto;
  width:70px;height:50px;
  background-color:rgba(50,50,50,1);
  box-shadow:0px 5px 0px 0px rgba(25,25,25,1);
  pointer-events:all;
}
/* .cursor-yes{
  cursor:pointer;
} */
.move-l{
  left:45px;

  background-color:rgba(230,50,50,1);
  box-shadow:0px 5px 0px 0px rgba(150,25,25,1);
}
.move-r{
  right:45px;

  background-color:rgba(100,50,230,1);
  box-shadow:0px 5px 0px 0px rgba(50,25,150,1);
}

.move-mobile{
  bottom:25px;
  top:auto;
}

.move-l-mobile{
  left:calc(10vw + 5px);
}
.move-r-mobile{
  right:calc(10vw + 5px);
}


.my-lock{
  pointer-events:none;
  opacity:0.5;
}

/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */
/* ////////////// */

#buttons-holder{
  z-index:5;
  position:fixed;
  bottom:25px;
  max-width:300px;
  width:90vw;
  /* background-color:yellow; */
  height:95px;
  left:0;right:0;margin:auto;
  /* display:none; */
}
.button{
  position:absolute;
  text-align:center;
  color:white;
  height:40px;
  font-weight: bold;
  line-height:40px;
  cursor:pointer;
  border-radius:5px;
  text-transform: uppercase;
  font-size:14px;

  /* background-color:rgba(50,50,50,1);
  box-shadow:0px 5px 0px 0px rgba(25,25,25,1); */ */
}
.buy-button{
  width:calc(100% - 10px);
  margin-left:5px;margin-right:5px;
  bottom:0px;
  background-color:rgba(240,240,20,1);
  color:black;
   box-shadow:0px 5px 0px 0px rgba(200,200,10,1);
   display:none;
  /* background-color:rgba(50,50,50,1);
  box-shadow:0px 5px 0px 0px rgba(25,25,25,1); */
}
.button-bottom{
  position:relative;
  width:calc(20% - 10px);
  margin-right:5px;
  margin-left:5px;
  float:left;
  display:none;
}
.button-s{
  background-color:rgba(245,50,0,1);
  box-shadow:0px 5px 0px 0px rgba(150,0,0,1);
}.button-m{
  background-color:rgba(50,0,245,1);
  box-shadow:0px 5px 0px 0px rgba(0,0,100,1);
}.button-l{
  background-color:rgba(250,100,0,1);
  box-shadow:0px 5px 0px 0px rgba(150,50,0,1);
}.button-xl{
  background-color:rgba(200,50,200,1);
  box-shadow:0px 5px 0px 0px rgba(150,25,150,1);
}.button-2x{
  background-color:rgba(0,175,50,1);
  box-shadow:0px 5px 0px 0px rgba(0,120,25,1);
}