/*MODES*/
.modes{left: 1.9vh;bottom: 0vh;}
.modes,.sun-icon,.moon-icon,.toggle__handler,.am-text,.pm-text{width: 100%;height: 50%;}
.sun-icon,.moon-icon,.toggle__handler{height: 50%;}
.sun-icon,.moon-icon {width: 100%;height: 100%;}
.modes,.toggle{height: 13vh;width: 7vh;}
.toggle__handler{/* top:1.5vw; */}
.am-text,.pm-text{/* bottom: 2vh; */font-size: 2.5vh;font-weight: 200;}
.modes input{left:-99em;}
.modes:hover{transform:scale(1.15);}
.am-mode .small-gear{background-image: url('../svg/menu/sm-am.svg');}
.am-mode .large-gear{background-image: url('../svg/menu/big-am.svg');}
.am-mode .links a {color: #C7D1D8;}
.am-mode .links a:hover{background:#C7D1D8;color:#000;}
.am-mode #two:hover~.gears-wrapper>.gears>.m-letter path,
.am-mode #three:hover~.gears-wrapper>.gears>.m-letter path,
.am-mode #four:hover~.gears-wrapper>.gears>.m-letter path{fill:#C7D1D8;}

/*NAVIGATION*/
.nav-icon{width:100%;height:100%;position:absolute;}
.nav-icon2{width:100%;height:100%;position:absolute;top:0;opacity:0;transform: scale(0);}
.sidebarIconToggle:hover .nav-icon .nav-icon2{opacity:1; transform: scale(1.1);}
.main-menu{width:10vw;height:10vw;}
.nav-music:hover,.nav-menu:hover,.nav-contact:hover,.nav-neural:hover,.nav-about:hover{transform:scale(1.2);}
#navigate{position:fixed;z-index:999;}
#navigate{width:10vh;height: 10vh;}
.sidebarIconToggle{box-sizing:border-box;cursor:pointer;position:fixed;height:10vw;width:10vw;top:2vw;left:1vw;z-index:9999;}
input[type=checkbox]:checked~.sidebarIconToggle{box-sizing:border-box;transform:rotate(-60deg);}
input[type=checkbox]:not(:checked)~.sidebarIconToggle{box-sizing:border-box;transform:rotate(0deg);}
input[type=checkbox]{box-sizing:border-box;display:none;}
.sidebarIconToggle{height: 6.5vh;width: 6.5vh;top: 2vh;left: 1.9vh;}
#menu-outer{position:fixed;width: 10vh;height: 37vh;margin-top: 11vh;left: 1vh;z-index:998;transform: translateX(-10vh);}
.menu-me,.menu-works,.menu-neural,.menu-contact,.menu-me2 {width: 75%;height: 21.3%;padding-left: 9%;}
.nav-music,.nav-menu,.nav-contact,.nav-about,.nav-neural{width: 100%;height: 90%;margin-left: 0;}
.nav-music,.nav-menu,.nav-contact,.nav-about,.nav-neural{cursor:pointer;}
li{list-style-type:none;}
.nav-music{margin-top:0;}
.menu-works{margin-top: -6%;}
input[type="checkbox"]:checked~#menu-outer{transform:translateX(0);}

/*TOP BUTTON*/
.totopsvg{width:100%;height:100%;}
.totop{right:3vw;bottom:2vh;height:7vh;width:12vw;}
#quick-nav{right: 2.8vh;bottom: -2vh;height: 11vh;width: 5.50vh;}
.quick-controls{top: 40.5%;width: 100%;height: 51%;}
.play-mini,.pause-mini{width: 100%;height: 100%;}

/* MAIN PAGE ANIMATION */
.soul-neon{position:absolute;width: 43vw;height: 17vw;z-index:900;margin-top: 93.7%;margin-left: 8.9%;animation-duration: 8s;}
.u-neon{position:absolute;width: 17vw;height: 17vw;z-index:900;margin-top: 203.9%;margin-left: 43.2%;animation-duration: 4s;}
.u-neon-anim {animation-name: uneon;animation-iteration-count: infinite;
}
@keyframes uneon {
30%{opacity: 1;}
31%{opacity: 0;}
32%{opacity: 1;}
34%{opacity: 0;}
40%{opacity: 0;}
42%{opacity: 1;}
53%{opacity: 1;}
54%{opacity: 0;}
64%{opacity: 0;}
65%{opacity: 1;}
67%{opacity: 0;}
68%{opacity: 1;}
78% {opacity: 1;}
79%{opacity: 0;}
81%{opacity: 1;}
82%{opacity: 0;}
83%{opacity: 1;}
92%{opacity: 0;}
92.5%{opacity: 1;}
}

/* ------INTERSECTION AREAS------- */
.quick-nav-area{position:absolute;width: 10%;background: #111;height: 200%;top: 148vh;z-index:99999;}
.area-40 {height:200% !important;}
.area-70 {height:200% !important;}
.area-100 {height:200% !important;}

/* --------HUE SLIDER--------- */

#warning-icon{position:absolute;opacity:1;width:65%;right:17%;top:45%;height:28%;z-index:999;pointer-events:all;cursor:pointer}
#warning-icon:hover{transform:scale(1.2)}
#warning-icon:hover #lock{transform:translateY(-10%)}
#warning-message{pointer-events:none;opacity:0;position:absolute;z-index:999;width:26vh;bottom:19vh;left:1vh;text-align:center;padding:5vh 3vh 4vh;box-shadow:1px 0 17px rgb(0 0 0 / 40%);border-radius:0 0 0 0;background:var(--color-alpha);transform:translateX(-120%);transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);-moz-transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);-ms-transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);-o-transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55)}
#warning-message h2{color:#000!important;text-shadow:none;padding:11%;font-size:2.4vh;font-weight:400;user-select:none}
#warning-message span{font-weight:300;line-height:2.4vh;user-select:none}
#warning-close{position:absolute;width:15%;height:14%;top:3%;right:5%;cursor:pointer;pointer-events:all}
#warning-close:hover{transform:scale(1.1)}
.warning-on{opacity:1!important;transform:scale(1)!important}
.warning-icon-off{transform:scale(0)!important;opacity:0}
.hue-slider{width:9vh;height:21vh;z-index:996;bottom:0;left:0;position:fixed;pointer-events:none;visibility:hidden}
.c-range,.c-range__holder,.c-range-slider{pointer-events:all}
.c-range{position:absolute;bottom:34vw;margin-left:2vw;width:2.3vw;height:9vw;background:transparent;pointer-events:all}
.c-range__holder{display:flex;width:15vh;height:3.5vh;margin-top:10vh;margin-left:-3vh;position:absolute;transform-origin:0 0;border-radius:50px}
.c-range__slider{border:2px var(--color-alpha) solid;transform:rotate(-90deg);width:100%;margin:0;padding:0;background:transparent;outline:none}
.c-range__output{opacity:0;position:absolute;margin-left:2.5vh;top:0;width:6vh;font-family:"Poppins";font-weight:300;font-size:2.5vh;text-align:center;color:var(--color-alpha);transition:all .3s ease-in-out}
input[type=range]{-webkit-appearance:none;width:100%;background:#000;border-radius:50px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;transform:scale(0.75);background:var(--color-alpha);width:2.9vh;height:2.9vh;border-radius:50px;transition:transform 300ms cubic-bezier(0.68,-0.55,0.265,1.55);cursor:default}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
input[type=range]::-webkit-slider-thumb:active{cursor:grab}
.c-range__holder:hover + .c-range__output{opacity:1;transition:opacity 400ms cubic-bezier(0.68,-0.55,0.265,1.55)}