*,
  ::before,
  ::after {box-sizing: border-box;margin: 0;padding: 0;}

/* SCROLL BAR */
#backtotop,
#works-parallaxed,
#more-parallaxed,
#neuraltotop{overflow-y: overlay;}  
#backtotop::-webkit-scrollbar,
#works-parallaxed::-webkit-scrollbar,
#more-parallaxed::-webkit-scrollbar,
#neuraltotop::-webkit-scrollbar{background-color: transparent;width:10px;border-radius: 10px;}
#backtotop::-webkit-scrollbar-track,
#works-parallaxed::-webkit-scrollbar-track,
#more-parallaxed::-webkit-scrollbar-track,
#neuraltotop::-webkit-scrollbar-track{border-radius: 10px;}
#backtotop::-webkit-scrollbar-thumb,
#works-parallaxed::-webkit-scrollbar-thumb,
#more-parallaxed::-webkit-scrollbar-thumb{background: var(--themecolor);border-radius: 10px;}   
#neuraltotop::-webkit-scrollbar-thumb {background: var(--color-alpha);border-radius: 10px;}
.flux-cap{width: 120%;margin-left: -10%;}
.flux-act{animation-name: flux-act !important;animation-iteration-count:3 !important;animation-duration: 0.5s !important;}
.flux-dot-act{animation-name: flux-dot !important;animation-iteration-count:3 !important;animation-duration: 0.5s !important;}
#time-1,#time-2,#time-3,.flux-dot {opacity:0;animation-duration: 0.5s;animation-timing-function: cubic-bezier(0.66, 0.03, 0.6, 0.51);animation-iteration-count:3;}
.flux-cap #time-1 {transform-origin: 100% 0%;transform: rotate(-135deg);}
.flux-cap #time-2 {transform-origin: 0% 100%;}
.flux-cap #time-3 {transform-origin:50% 0%;}
@keyframes flux-act {
	0% {opacity:0;}
	20% {opacity:1;}
	50% {opacity:1;height: 20%;}
	80% {opacity:1;}
	100% {opacity:0;}
}
@keyframes flux-dot {
	0% {opacity:0;}
	20% {opacity:0;}
	40% {opacity:1;}
	100% {opacity:0;}
}
@keyframes flux-dot-hover {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}
}


/* FONTS*/
@font-face{font-family:'Elektra';src:url(../font/elektra.woff2) format("woff2"),url(../font/elektra.woff) format("woff");font-weight:400;font-style:normal;font-display: swap;}
@font-face {font-family: 'Poppins';src: url('../font/poppins-extralight-webfont.woff2') format('woff2'),url('../font/poppins-extralight-webfont.woff') format('woff');font-weight: 200;font-style: normal;font-display: swap;}
@font-face {font-family: 'Poppins';src: url('../font/poppins-light-webfont.woff2') format('woff2'),url('../font/poppins-light-webfont.woff') format('woff');font-weight: 300;font-style: normal;font-display: swap;}
@font-face {font-family: 'Poppins';src: url('../font/poppins-regular-webfont.woff2') format('woff2'),url('../font/poppins-regular-webfont.woff') format('woff');font-weight: 400;font-style: normal;font-display: swap;}

/*GENERIC STYLES */
:root{--m-fill: #D67500;--themecolor: #FFF0B2;--hue: 50;--color-alpha: hsl(var(--hue), 100%, 60%);}
.p-none{pointer-events:none !important;}
.p-all{pointer-events:all !important;}
.no-disp {display:none !important;}
.disp {display:block !important;}
.no-opac {opacity:0;}
.blend-mode {mix-blend-mode: difference;}

/* THEMES */
.stroke-color{stroke: var(--themecolor) !important;}
.mob-color{color: var(--themecolor) !important;}
.fill-color{fill: var(--themecolor) !important;}
.main-theme{color:#FFF0B2!important;}
.main-stroke-theme{stroke:#FFF0B2;}
.works-theme{color:#9EC4D2!important;}
.works-fill-theme{fill:#9EC4D2!important;}
.works-stroke-theme{stroke:#9EC4D2!important;}
html,body,.works-textblock-wrap,.feedback-input,[type="submit"],.links a,.hititle,.subtitle,.hint,.about-block,.this-block,.cls-block,.edu-block,.fin-block,.contact-error-msg p,.pswp__share-tooltip a {font-family: 'Poppins';-webkit-font-smoothing: antialiased;text-rendering:optimizelegibility;-webkit-text-rendering:optimizelegibility;letter-spacing: 0.3vh;}
body {min-height: 100vh;min-height: -webkit-fill-available;}
html {height: -webkit-fill-available;overflow:hidden;}
div#preloadsvgs,.generic-preloads {display:none;}
.bgpreload{display:none;background-image:url(../svg/main/day-back.svg);background-image:url(../svg/main/day-front.svg);background-image:url(../svg/main/day-back-am.svg);background-image:url(../svg/main/day-front-am.svg);}
::-webkit-input-placeholder {color: var(--themecolor) !important;}
h1,h2,h3,h4,h5,.works-textblock-wrap,.hititle,.about-block,.this-block,.cls-block,.edu-block,.fin-block,.am-text,.pm-text,.subtitle,.hint,.touch-scroll-text,.works-block2 section h3, .drag-text h3 {font-weight: 200;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-shadow: 4px 5px 7px rgba(0,0,0,0.31);color: var(--themecolor) !important;}
.rescheck,.scroll-text,.feedback-input{font-weight: 200;}

/*NAVIGATION TEXT*/
.main-menu-box,
.mode-box-wrap,
.menu-box {font-family: 'Poppins';-webkit-font-smoothing: antialiased;text-rendering:optimizelegibility;-webkit-text-rendering:optimizelegibility;letter-spacing: 0;font-size: 1.4vh;font-weight: 300;line-height:1.7vh;}
.mode-box-wrap{height: 12vh;width: 1.5vh;letter-spacing: 0.4vh;white-space:nowrap;position:absolute;overflow:hidden;bottom:2.5vh;left:10.5vh;color:var(--themecolor);background:0 0;text-align:center;opacity:1;z-index:999}
.main-menu-box{height:15%;width:14%;white-space:nowrap;position:absolute;margin-top: -11vh;margin-left:100%;color:var(--themecolor);background:0 0;text-align:center;opacity:0;border-radius:none}
#menu-main,#mode-box{word-wrap:break-word;white-space:pre-wrap;text-align:center;position:absolute;opacity:1;width:100%}
#mode-box{overflow:hidden;transform:translateY(13vh)}
.modes:hover+.mode-box-wrap #mode-box{transform:translateY(2.5vh);opacity:1}
.sidebarIconToggle:hover+.main-menu-box{transform:translateY(13vh);opacity:1}
.sidebarIconToggle:hover+.main-menu-box #menu-main{opacity:1}
.menu-box{position:absolute;word-wrap:break-word;white-space:pre-wrap;margin-top:-42.5vh;margin-left:103%;color:var(--themecolor);background:0 0;text-align:center;opacity:0;border-radius:2vw;height:10vh;width: 0.8vh;}
#menu-about,#menu-contact,#menu-me,#menu-neural,#menu-works{word-wrap:break-word;white-space:pre-wrap;text-align:center;position:absolute;margin-top:0;opacity: 0;width: 100%;}
.menu-works svg::after{content:"hey";width:200%;height:200%;color:red;background:red}
.menu-me:hover~.menu-box{transform:translateY(3.8vh);opacity:1}
.menu-me:hover~li #menu-about{opacity:1}
.menu-works:hover~.menu-box{transform:translateY(5.1vh);opacity:1}
.menu-works:hover~li #menu-works{opacity:1}
.menu-neural:hover~.menu-box{transform:translateY(13.7vh);opacity:1}
.menu-neural:hover~li #menu-neural{opacity:1}
.menu-contact:hover~.menu-box{transform:translateY(17.8vh);opacity:1}
.menu-contact:hover~li #menu-contact{opacity:1}
.menu-me2:hover~.menu-box{transform:translateY(27.7vh);opacity:1}
.menu-me2:hover~li #menu-me{opacity:1}
.nav-menu:hover #workssvg path{fill:var(--themecolor)}
.nav-neural:hover #brainsvg path{fill:var(--themecolor)}
.nav-music:hover #mesvg circle{fill:var(--themecolor)}
.nav-contact:hover #contactsvg path{fill:var(--themecolor)}
.nav-contact:hover #contactsvg line{stroke:#111}
.nav-about:hover .infosvg circle{fill:var(--themecolor)}
.nav-about:hover .infosvg .infodot{fill:#111 !important}
.nav-about:hover .infosvg line{stroke:#111 !important}


/*SCROLL ICON MOBILE*/
.desk-icon-scroll, .desk-icon-scroll:before, .neon-back-flash,#neon-arrow-glow {-webkit-transition: opacity 0.3s ease-in-out;transition: opacity 0.3s ease-in-out;}
.icon-scroll,
.icon-scroll:before {position: fixed;left: 50%;bottom: 2vh;}
.icon-scroll{content:'';width:20px;height:20px;background:var(--themecolor);margin-left:-4px;bottom:14vh;border-radius:50%;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:touchscroll;animation-name:touchscroll}

@-webkit-keyframes touchscroll{
0%{opacity:0;transform:translateY(0)}
50%{opacity:1}
100%{opacity:0;transform:translateY(90px)}
}
@keyframes touchscroll{
0%{opacity:0;transform:translateY(0)}
50%{opacity:1}
100%{opacity:0;transform:translateY(90px)}
}

/*DESK SCROLL ICON */
.desk-icon-scroll,
.desk-icon-scroll:before {position: absolute;left: 50%;}
.desk-icon-scroll {width: 4vh;height: 7vh;margin-left: -2vh;top: 45%;margin-top: 21vh;box-shadow: inset 0 0 0 1px var(--themecolor);border-radius: 25px;}
.desk-icon-scroll:before {content: '';width: 1vh;height: 1vh;background: var(--themecolor);margin-left: -0.5vh;top: 1vh;border-radius: 5px;-webkit-animation-duration: 1.5s;animation-duration: 1.5s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-name: desk-scroll;animation-name: desk-scroll;}
@-webkit-keyframes desk-scroll {
  0% {opacity: 0;}
  30% {opacity: 1;}
  100% {opacity: 0;transform: translateY(4vh);}
}
@keyframes desk-scroll {
  0% {opacity: 0;}
  30% {opacity: 1;}
  100% {opacity: 0;transform: translateY(4vh);}
}

/* ABOUT */
.about-wrap{height:124%;margin-right:auto;margin-left:auto}
.qr-code-wrap{aspect-ratio:1/1}
.qr-code-generic,.qr-code-detailed,.qrcv{position:absolute;width:100%;height:100%}
.qr-code-wrap{position:relative;z-index:9998;margin-left:auto;margin-right:auto;width:26vh}
.qrcv{z-index:10000}
#protect-overlay{position:relative;width:100%;height:10vh}
#protect-overlay input[type=text]{font-size:1.8vh;border:2px solid var(--themecolor);background-color:transparent;padding:15px;margin-bottom:0;width:100%;height:6vh;box-sizing:border-box;outline:0;color:var(--themecolor);font-weight:200;letter-spacing:.2em;margin-left:auto;margin-right:auto;text-align:center}
#protect-overlay form{margin-top:0;width:80%;margin-left:auto;margin-right:auto}
#protect-overlay button{background-color:var(--themecolor);position:relative;margin-left:0;margin-top:0;font-size:2.1vh}
#protect-overlay button[type="submit"]{margin-left:0;height:6vh;padding:0;font-weight:600}
#protect-overlay input::placeholder{opacity:.5}
.qr-code-generic{z-index:9998}
.qr-code-detailed{animation-name:qr-anim;animation-duration:5s;animation-iteration-count:infinite;z-index:9999;opacity:0}
@keyframes qr-anim {
0%{opacity:0}
5%{opacity:0}
6%{opacity:1}
7%{opacity:0}
15%{opacity:0}
16%{opacity:1}
17%{opacity:0}
21%{opacity:0}
22%{opacity:1}
40%{opacity:1}
41%{opacity:0}
42%{opacity:1}
44%{opacity:0}
45%{opacity:1}
46%{opacity:0}
48%{opacity:1}
71%{opacity:1}
73%{opacity:0}
75%{opacity:1}
85%{opacity:1}
87%{opacity:0}
100%{opacity:0}
}
.credits-block{position:relative;margin-left:auto;margin-right:auto;margin-top:3vh;width:100%;text-align:center;letter-spacing:.3em;line-height:3vh;font-weight:200;font-size:1.6vh}
.credits-block span{font-weight:500}
.about-wrap h3{font-size:2.2vh;text-align:center;padding:4vh 0 0;line-height:4vh;letter-spacing:.3vh;font-weight:300}
#lock-wrapper{width:31vh;margin-left:auto;margin-right:auto}
#pass-info{margin-top:20px;padding:20px}
#pass-result.success{color:green}
#pass-result.failure{color:red}
.lock-dot{fill:#fff}
svg.pattern-lock g.lock-lines line{stroke-width:1.5;stroke:var(--themecolor);opacity:.2}
svg.pattern-lock g.lock-dots circle{stroke:transparent;fill:var(--themecolor);stroke-width:13.5}
svg.pattern-lock g.lock-actives circle {fill: var(--themecolor);opacity: .2;animation: lock-activate-dot .25s 0s ease-out 1;transform-origin: center;}
svg.pattern-lock g.lock-lines line {stroke-width: 1.5;stroke-linecap: round;}
svg.pattern-lock.success g.lock-actives circle {fill: green;}
svg.pattern-lock.error g.lock-actives circle {fill: red;}
@keyframes lock-activate-dot {
0% {transform: scale(0);opacity:0;}
40% {opacity:0;}
60% {transform: scale(1.1);}
100% {transform: scale(1.0);opacity:0.5;}
}

/* CONTEXT MENU */

#context-menu {position: fixed;z-index: 997;background: rgba(0,0,0, 0.5);transform: scale(0);transform-origin: top left;border: 1px var(--themecolor) solid;}
#context-menu.visible {display: block;transform: scale(1);}
#context-menu .item {text-align: center;color: var(--themecolor);cursor: pointer;}
#context-menu .item:hover {background: var(--themecolor);color: #000;}
#context-me {pointer-events:none;}
#contactlink {text-decoration: none;}

/* RESOLUTION CHECK */
.rescheck{position:fixed;right: 35vw;top: 1vw;background:transparent;height:100px;width: 110px;z-index:99999;color:#FFF1B3;text-align:left;}

/* GENERAL */
html,body{margin:0;padding:0;overflow-x:hidden;}
html{overflow-x:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;}
body{overflow: hidden;/* height:100%; */background:#001;}
.menu-wrapper,.text-wrapper-3,.hello-block,.gen-block-3,.works-textblock-wrap,.works-block-1,.works-block2-wrap,.works-block2{position:relative;}
.lcs-icon,.pie-icon,.desk-scroll,.scroll-text,.lines-icon
.analog-digital{position:absolute;}

/* SIZES */
h1,h2,h3,h4,h5{margin-block-start:0;margin-block-end:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:antialiased;text-rendering: optimizeLegibility;-webkit-text-rendering: optimizeLegibility;color: var(--themecolor);}
h1{font-size:4vw;letter-spacing:.05em;}
h2{font-size:2vw;letter-spacing:3px;}
h3{font-size:1.4vw;letter-spacing:.1em;}
h4{font-size:1.3vw;}
h5{font-size:1vw;}
.main-title{line-height:4.5vw;}
/* SIZES END */

/* MAIN TEXT BLOCK */
.menu-wrapper{padding-top:330%;z-index:100;width:100%;}
.text-wrapper-3{margin:0 0 0 auto;padding:50% 45% 0 0;width:50%;background:transparent;}
.hello-block-wrapper{margin-top:12%;margin-left:11%;width:30%;}
.hello-block{padding-bottom:50%;}
.pie-block,.graduation section,.colours,.divTableBody{background:transparent;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:30px;}
.hello-block section,.world-block section,.colours-lines-block section,.pie-block section,.pie-title section,.graduation section,.future section{color:var(--themecolor);}
.hello-block,.world-block,.colours-lines-block,.graduation,.future{text-align: justify;hyphens: auto;-webkit-hyphens: auto;word-spacing: -0.05em;line-height:2.3;}
.world-block-wrapper{margin:60% 0 0 8%;text-align:center;width:30%;}
.gen-block-3{display:block;}

/* COLOURS */
.main-colour{color:#FFF1B3;}
.colours{margin: 30% 0 0;margin-left:20%;width:27%;padding:2% 0;}
.colours section{text-align:center;}
.colours-lines-block{padding-bottom: 25%;}
.lcs-icon{margin-top:2%;margin-left:6%;width:15%;height: 2%;}
/* COLOURS END */

/* PIE */
.pie{width:27%;margin-top:35%;margin-left:15%;}
.pie-block{padding:3% 0 95%;text-align:center;}
.pie-title{text-align:center;padding-bottom:5%;}
.pie-icon{margin-top:2%;margin-left:3%;width:21%;height:100%;}
.skillbox{margin-top:2%;margin-left:3%;width:100%;height:20vw;}
.skill-block section{color:#FFF1B3;}
/* PIE END */

.gen-block-3{display:block;margin-top: 30%;margin-left:5%;width:50%;}
/* SKILLS */
.graduation{width:79%;padding:0 0 15% 10%;}
.graduation section{padding:7%;}
.future{width:65%;padding:70% 0 15% 17%;}
.future section{padding:7%;}
.skills{width:40%;margin-left:9%;margin-top:20%;text-align:center;}
.skill-title{padding-bottom:5%;}
.skill-title section{color:#FFF1B3;}
/* SKILLS END */

/* ICONS */
.eye-icon{margin-top:7%;margin-left:auto;margin-right:auto;width:40%;height:40%;}
.desk-scroll{-moz-transform:scale(1);margin-top:15%;margin-left:40%;width:20%;height:20%;}
.scroll-text{margin-top:35%;margin-left:42.5%;width:15%;height:15%;text-align:center;font-size:1vw;letter-spacing:.1em;line-height:1.5vw;}
.lines-icon{margin-top:12%;margin-left:auto;margin-right:auto;width:60%;height:auto;}
.analog-digital{margin-top:3%;margin-left:auto;margin-right:auto;width:55%;height:auto;}

/* TO TOP BUTTON */
#quick-nav{opacity: 0;position:fixed;z-index: 990;}
.totopsvg:hover{transform: translateY(-2vh);}
#quick-nav-link:hover + #quick-controls{transform: translateY(-2vh);}
.play-mini,.pause-mini{margin-right:auto;margin-left:auto;}
#quick-nav-link{pointer-events:none;}

/* WORKS TEXT BLOCKS */
.works-textblock-wrap{margin:13% 0 0 11%;width:25%;background:transparent;text-align:justify;text-justify:auto;line-height:2.3;color:#9EC4D2;}
.works-block1{margin:0;width:100%;background:transparent;}
.works-block-1{color:#FFF1B3;}

.works-block2{padding-top:4vw;margin:0;width:100%;}
.works-block-2{color:#FFF1B3;}

/* PLAYER */
.player,.play-mini,.pause-mini,.player-pause,.quick-controls{position:absolute;}
.player{height:14vw;width:10vw;background:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:150%;left: 48%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);border: var(--themecolor) 0px solid;border-radius:1vw;}
.player ul{list-style:none;}
.player ul li{display:inline-block;}
.info{text-align:center;}
.info h5{margin-top:100%;color: var(--themecolor)}
.info h4{margin-top:100%;color: var(--themecolor);letter-spacing: 0.1vh;}
.player-slider{width:8vw;height:1vw;background:transparent;border-radius: 50px;border:1px var(--themecolor) solid;margin-left:auto;margin-right:auto;overflow: hidden;}
.player-slider div{width:0%;height: 100%;margin-top:0;background:var(--themecolor);border-radius: 50px 0 0 50px;}
#timer{color: var(--themecolor);line-height:0;font-size:9pt;float:right;font-family:Arial,Sans-Serif;}
.player-elapsed {background: var(--themecolor);}
.control-buttons{aspect-ratio: 1/1;position:absolute;width: 30%;margin-top: 35%;margin-left: 35%;}
.player-play,.player-pause {position:absolute;}
#playx,#pausex {transform:scale(0.9);}
.player-play{width:100%;height:100%;x:0;y:0;margin-top:0;}
.player-pause{visibility:hidden;opacity:0;width:100%;height:100%;cursor:pointer;margin-top:0;transform: rotate(-90deg);}
#pausex{visibility:hidden;opacity:0;transform: rotate(-90deg);}
.controls{margin-top:1vw;}
.controls svg:nth-child(2){margin-left:5px;margin-right:5px;}
#playx:active{padding:0;}
.player-play,.player-pause,#playx,#pausex,.control-buttonsx {padding:0;margin: 0;}
.control-buttonsx{width:100%;height:100%;}
.player-play:hover,#playx:hover,.player-pause:hover,#pausex:hover,.control-buttons:hover,.control-buttonsx:hover{cursor:pointer;}
.control-buttons:hover, .control-buttonsx:hover {transform:scale(1.2);}
@keyframes vinylspin {
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
.vinyl-head{animation-duration: 0.9s;animation-fill-mode: forwards;animation-timing-function:ease-in-out;transform-origin: 27% 92%;position:absolute;width:30%;height: 83%;bottom: 0%;right: -19%;}
.player-elapsed {animation-duration:105s;animation-iteration-count:infinite;animation-timing-function: linear;}
@keyframes vinylelapsed {
from {width:0%;}
to {width:100%;}
}

/*MAIN PLAY MODE */
.play-toggle .player-play,
.play-toggle #playx {visibility:hidden;opacity:0;transform: rotate(90deg);}
.play-toggle .player-pause,
.play-toggle #pausex {visibility:visible;opacity:1;transform: rotate(0deg);}

.vinyl {position:absolute;height: 100%;width:100%;transform:scale(1);animation-name:vinylspin;animation-duration: 2s;animation-iteration-count:infinite;animation-timing-function: linear;animation-play-state: paused;}
.vinyl-spin-active .vinyl {animation-play-state:running;}
.vinyl-head-play{animation-name:vinylheadplay;}
.vinyl-head-pause{animation-name:vinylheadpause;}
@keyframes vinylheadplay {
from{transform:rotate(0deg)}
to{transform: rotate(-36deg);}
}
@keyframes vinylheadpause {
from{transform:rotate(-36deg)}
to{transform: rotate(0deg);}
}
.play-toggle .player-elapsed {animation-name: vinylelapsed;}
/* PLAYER END */

/* CONTACT */
@-webkit-keyframes progressFill {
  from {background-position: right bottom;}
  to {background-position: left bottom;}
}
@-moz-keyframes progressFill {
  from {background-position: right bottom;}
  to {background-position: left bottom;}
}
@keyframes progressFill {
  from {background-position: right bottom;}
  to {background-position: left bottom;}
}

#submit {transition: all 0.3s ease 0s;border: 1px var(--themecolor) solid;color: #000;}
#submit.is-loading {background: linear-gradient(to right, var(--themecolor) 50%, transparent 50%);background-size: 200% 100%;background-position: right bottom;pointer-events:none;animation: progressFill 1.5s 0s ease-in-out forwards;}
#submit {background-color: var(--themecolor);color: #000;border-radius: 0px;-webkit-appearance: none;}
#submit:hover {background-color: transparent; color: var(--themecolor);font-weight:200;}
[type="submit"] {border: 1px var(--themecolor) solid;}
[type="submit"]{width:100%;height: 40%;background:transparent;border-radius: 0;cursor:pointer;font-size: 3.3vh;font-weight: 500;padding-top: 15px;padding-bottom:15px;-webkit-appearance: none;letter-spacing:0.25vh;color: black;}
.popup{background:transparent;position:relative;/* pointer-events: none; */}
form{margin-left:auto;margin-right:auto;}
textarea{line-height:170%;resize:none;}
.close{position:absolute;}
.contact-color-only {color:var(--themecolor) !important;}
.contact-color{color:var(--themecolor);border: 1px solid var(--themecolor);}

.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background: rgba(0,0,0,0.92);visibility:hidden;opacity:0;z-index: 1001;}
.overlay:target{visibility:visible;opacity:1;}
.popup .close:hover{transform:scale(1.2);}
.popup .content{max-height:100%;}
.feedback-input{font-size: 2.2vh;/* line-height: 22px; */background-color:transparent;padding: 1.8vh;margin-bottom: 1.6vh;width:100%;box-sizing:border-box;outline:0;letter-spacing: 0.3vh;}
#contact-error-wrap {position: fixed;width: 100%;height: 100%;z-index:9999;background: transparent;pointer-events:none;}
.contact-error-msg {position: absolute;z-index:1;transform: translateY(-105%);background: var(--themecolor);color: #000;transition: all 0.3s ease-in-out;animation-name: c-error-msg;animation-duration: 3s;animation-fill-mode: forwards;animation-timing-function:ease-in-out;}
.contact-error-msg p {text-align: center;font-weight: 400;font-size: 2.5vh;text-shadow: none;}
@keyframes c-error-msg {
	0% {transform: translateY(-105%);}
	10% {transform: translateY(0%);}
	90% {transform: translateY(0%);}
	100% {transform: translateY(-105%);}
}

/* TRANSITIONS */
.photoswipe-item {transition: opacity 1s ease;}
.pace{transition:all .3s ease-in-out;}
.pace .pace-progress{transition:all .3s ease-in-out;}
.menu-box, #context-menu.visible, #playtape,#pausetape,
.modes {-webkit-transition:all 300ms cubic-bezier(0.68,0,0.265,1.55);transition:all 300ms cubic-bezier(0.68,0,0.265,1.55);}
pausemobile {transition: fill 333ms cubic-bezier(0.4,0,0.22,1);}
.hoverimg,.th-{-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;-ms-transition:opacity .4s ease-in-out;-o-transition:opacity .4s ease-in-out;transition: opacity .4s ease-in-out;}
.train-lights{-webkit-transition:opacity .4 ease-in-out;-moz-transition:opacity .4 ease-in-out;-ms-transition:opacity .4 ease-in-out;-o-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out;}
.meiconsvg,.neuraliconsvg,.worksiconsvg,.contacticonsvg,.parallax,.neural-parallax,.more-parallax{transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;}
.layer-back,.layer-front,.layer-text,.neural-layer-text{-webkit-transition:background .5s linear;transition:background .5s linear;}
input[type=checkbox]{transition:all .3s;}
[type="submit"]{transition:opacity 500ms,color 500ms,background-color 500ms;}
.overlay{transition: visibility linear .4s,opacity cubic-bezier(0.65, 0.05, 0.36, 1) .4s;}
.close{transition:all 400ms cubic-bezier(0.68,-0.55,0.265,1.55), visibility linear .1s,opacity .6s;}
.sidebarIconToggle,
.mainInner,
.nav-icon2,
.nav-music,
.nav-menu,
.nav-contact,
.nav-about,
.nav-neural,
#menu-outer,
.mode-box-wrap,
#mode-box,
.main-menu-box,
#menu-box,
#menu-about,
#menu-neural,
#menu-works,
#menu-contact,
#menu-me,
#menu-main,
.totopsvg,
.quick-controls,
.player-play,.player-pause,
#playx,
#pausex,
.control-buttons,
.control-buttonsx,
.pswp__button,
.pswp__button--fs,
.pswp__button--zoom,
.pswp__button--arrow--left,
.pswp__button--arrow--right,
#navigate,
.nav-icon,
.main,
.menu-color,
.cv-button a,
.cv-button,
#quick-nav,
#lock,
#warning-icon,
#warning-close {transition: all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-moz-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-ms-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-o-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
#sumbit {-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

.works-block-transition{transition:opacity .3s ease-in;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;}
#quick-nav1{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.small-gear,.m-letter, .large-gear, .links a {transition:all 600ms cubic-bezier(0.46, 0.06, 0.2, 1.01);-webkit-transition:all .6s cubic-bezier(0.46, 0.06, 0.2, 1.01);-moz-transition:all .6s cubic-bezier(0.46, 0.06, 0.2, 1.01);-ms-transition:all .6s cubic-bezier(0.68,-0.55,0.265,1.55);-o-transition:all .6s cubic-bezier(0.46, 0.06, 0.2, 1.01);}
.sun-icon,.moon-icon,.toggle__handler {transition:all 400ms cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-transition: all 0.9s cubic-bezier(0.67, -0.02, 0.26, 1.47);-moz-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-ms-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);-o-transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);}
.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none;}
.pswp--animate_opacity{-webkit-transition:opacity 333ms ease-in-out;transition:opacity 333ms ease-in-out;}
.pswp__zoom-wrap{-webkit-transition:-webkit-transform 333ms ease-in-out;transition:transform 333ms ease-in-out;}
.pswp__bg{-webkit-transition:opacity 333ms ease-in-out;transition:opacity 333ms ease-in-out;}
/*.pswp__button{-webkit-transition:opacity .2s;transition:opacity .2s;} */
.pswp__share-modal{-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;}
.pswp__share-tooltip{-webkit-transition:-webkit-transform .25s;transition:transform .25s;}
.pswp__preloader{-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;}
.mode-am,
.mode-pm,
.pswp__button,
.pswp__button--fs,
.pswp__button--zoom,
pswp__button--arrow--left,
.pswp--has_mouse,
.pswp__button--arrow--right{transition: all .3s cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55);-moz-transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55);-ms-transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55);-o-transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-tap-highlight-color:rgba(0,0,0,0);}