*, ::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,#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;} #slider{width:8vw;height:1vw;background:transparent;border-radius: 50px;border:1px var(--themecolor) solid;margin-left:auto;margin-right:auto;overflow: hidden;} #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;} #elapsed {background: var(--themecolor);} .control-buttons{aspect-ratio: 1/1;position:absolute;width: 30%;margin-top: 35%;margin-left: 35%;} #play,#pause {position:absolute;} #playx,#pausex {transform:scale(0.9);} #play{width:100%;height:100%;x:0;y:0;margin-top:0;} #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;} #play, #pause, #playx, #pausex,.control-buttonsx {padding:0;margin: 0;} .control-buttonsx{width:100%;height:100%;} #play:hover, #playx:hover, #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%;} #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 #play, .play-toggle #playx {visibility:hidden;opacity:0;transform: rotate(90deg);} .play-toggle #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;} .play-toggle .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 #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, #play,#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);} /* ------------------MENU ------------------ */ .links-wrapper,.gears-wrapper,.links,.large-gear,.small-gear,.nav-music,.nav-menu,.nav-contact,.nav-about,.nav-neural{position:relative;} .menu-wrapper,.links-wrapper,.gears-wrapper{margin:0 auto;} .links-wrapper{text-align:center;width:50%;} .gears-wrapper{width:300px;height:300px;padding-top:5%;} .links{display:inline;opacity:1;text-shadow:none;} .links a{background:transparent;color:#D67500;font-size:2vw;text-decoration:none;padding:10px;font-weight: 300;} .links a:hover{background:#D67500;color:#450201;} .large-gear{background-image:url(../svg/menu/big.svg);background-repeat:no-repeat;background-size:100%;border-radius:50%;width:300px;height:300px;opacity:0;} .small-gear{background-image:url(../svg/menu/sm.svg);} .m-letter{position:absolute;/*background-image:url(../svg/menu/mletter.svg);*/z-index: 1;} .small-gear,.m-letter{background-size:100%;background-repeat:no-repeat;border-radius:50%;width:300px;height:300px;} .m-letter path{fill: #0c0301;transition: fill 0.5s;} #two:hover~.gears-wrapper>.gears>.m-letter path, #three:hover~.gears-wrapper>.gears>.m-letter path, #four:hover~.gears-wrapper>.gears>.m-letter path{fill:#D67500;} #one:hover~.gears-wrapper>.gears>.small-gear>.large-gear{-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-o-transform:rotate(50deg);-webkit-transform:rotate(50deg);opacity:1;transform:rotate(50deg);} #two:hover~.gears-wrapper .gears>.small-gear>.large-gear{-moz-transform:rotate(130deg);-ms-transform:rotate(130deg);-o-transform:rotate(130deg);-webkit-transform:rotate(130deg);opacity:1;transform:rotate(130deg);} #three:hover~.gears-wrapper .gears>.small-gear>.large-gear{-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);-webkit-transform:rotate(30deg);opacity:1;transform:rotate(30deg);} #four:hover~.gears-wrapper .gears>.small-gear>.large-gear{-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);-webkit-transform:rotate(20deg);opacity:1;transform:rotate(20deg);} #one:hover~.gears-wrapper .gears>.small-gear{-moz-transform:rotate(-30deg);-ms-transform:rotate(-30deg);-o-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);opacity:1;transform:rotate(-30deg);} #two:hover~.gears-wrapper .gears>.small-gear{-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-o-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);} #three:hover~.gears-wrapper .gears>.small-gear{-moz-transform:rotate(70deg);-ms-transform:rotate(70deg);-o-transform:rotate(70deg);-webkit-transform:rotate(70deg);transform:rotate(70deg);} #four:hover~.gears-wrapper .gears>.small-gear{-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);-webkit-transform:rotate(20deg);transform:rotate(20deg);} #one:hover~.gears-wrapper .gears>.small-gear>.large-gear>.arrow{filter:alpha(opacity=100);opacity:1;} #two:hover~.gears-wrapper .gears>.small-gear>.large-gear>.arrow{filter:alpha(opacity=100);opacity:1;} #three:hover~.gears-wrapper .gears>.small-gear>.large-gear>.arrow{filter:alpha(opacity=100);opacity:1;} #four:hover~.gears-wrapper .gears>.small-gear>.large-gear>.arrow{filter:alpha(opacity=100);opacity:1;} .menu-color{stroke:#FFF0B2;} .menu-fill-color{fill:#FFF0B2;} #workssvg path, #brainsvg path, #mesvg circle, #contactsvg path, #contactsvg line, #infosvg .st00045, #infosvg line, #infosvg .fill-color{-webkit-transition: fill 400ms cubic-bezier(0.68,0,0.265,1.55), stroke 400ms cubic-bezier(0.68,0,0.265,1.55);transition: fill 400ms cubic-bezier(0.68,0,0.265,1.55), stroke 400ms cubic-bezier(0.68,0,0.265,1.55);} #workssvg path, #brainsvg path, #mesvg circle, #contactsvg path, #contactsvg line, #infosvg .st00045, #infosvg line{fill: transparent;} /* MODES */ .modes{position:fixed;z-index:990;/* overflow:hidden; */-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;} /* TOGGLE BUTTON */ /*.modes:hover{transform:scale(1.2);}*/ .modes:hover .flux-dot {animation-name: flux-dot-hover;animation-iteration-count:infinite;animation-duration: 1s;} #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;} .toggleWrapper{position:absolute;width:100%;overflow:hidden;padding:0;background:transparent;} .modes input{position:absolute;} .toggle{cursor:pointer;display:inline-block;position:relative;background-color:transparent;border:none;} .moon-icon{position:absolute;opacity:1;} .sun-icon{position:absolute;opacity:0;} .toggle__handler{display:inline-block;position:relative;z-index:1;} .mode-text{margin-left:0;width: 100%;height: 50%;transition: all 0.7s cubic-bezier(0.68,-0.55,0.265,1.55);} .am-text,.pm-text{position:absolute;text-align:center;transition:opacity 0.3s ease-in-out;} .pm-text{color:#FFF0B2;} .am-text{color:#FFF0EA;opacity:0;margin-left:100%;} input:checked + label .mode-text .pm-text{opacity:0;} input:checked + label .mode-text .am-text{opacity:1;} input:checked + label .mode-text{transform: translateX(-100%);} /* WINTER CELEBRATIONS */ .winter-mode-pm {position:absolute;top:0;left:0;right:0;bottom:0;background-size: 100%;background-repeat: no-repeat;background-image:url(../svg/main/winter-mode.svg);} .winter-mode-am {position:absolute;top:0;left:0;right:0;bottom:0;background-size: 100%;background-repeat: no-repeat;background-image:url(../svg/main/winter-mode-am.svg);} .winter-mode {display:none;} .christmas-block {display: block;top: 82vw;left: 52vw;} .tree {top: 0;left: 0;background-size: 100%;background-repeat: no-repeat;} .christmas-block, .tree {position: absolute;width: 21vw;height: 32vw;} .christmas-block-mobile {display: block;top: 188vw;left: 13vw;} .christmas-block-mobile .tree {top: 0;left: 0;background-size: 100%;background-repeat: no-repeat;} .christmas-block-mobile, .christmas-block-mobile .tree {position: absolute;width: 32vw;height: 48vw;} .tree-pm {background-image:url(../svg/main/elements/tree/pm-tree.svg);} .tree-am {background-image:url(../svg/main/elements/tree/am-tree.svg);} .pm-bulbs-red {background-image:url(../svg/main/elements/tree/pm-bulbs-red.svg);} .pm-bulbs-yellow {background-image:url(../svg/main/elements/tree/pm-bulbs-yellow.svg);} .am-bulbs-red {background-image:url(../svg/main/elements/tree/pm-bulbs-red.svg);} .am-bulbs-yellow {background-image:url(../svg/main/elements/tree/pm-bulbs-yellow.svg);} .pm-bulbs-red,.am-bulbs-red {animation: bulbs 1s;animation-iteration-count: infinite;animation-delay: -0.5s;} .pm-bulbs-yellow,.am-bulbs-yellow {animation: bulbs 1s;animation-iteration-count: infinite;} @keyframes bulbs { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* PARALLAX */ /* MAIN PARALLAX */ .object-wrapper,.layer-back,.layer-front,.layer-text,.works-object-wrapper,.works-layer-back,.works-layer-middle,.works-layer-front,.more-object-wrapper,.more-layer-front,more-layer-back{position:absolute;} .parallax .object-wrapper .object{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;} .parallax-perspective{perspective:1px;-webkit-perspective:1px;-moz-perspective:1px;} .parallax{height: 100vh;overflow-x:hidden;overflow-y: scroll;-webkit-overflow-scrolling:touch;background: #000;} .object-wrapper{top:0;right: 0;bottom:0;left:0;justify-content:center;/* overflow: hidden; */} .speed-back{transform:translateZ(-4px) scale(5.1);-webkit-transform:translateZ(-4px) scale(5.1);-moz-transform:translateZ(-4px) scale(5.1);} .speed-front{transform:translateZ(0px) scale(1);-webkit-transform:translateZ(0px) scale(1);-moz-transform:translateZ(0px) scale(1);} .speed-text{transform:translateZ(0.5px) scale(0.5);-webkit-transform: translateZ(0.6px) scale(0.4);backface-visibility: hidden;/* overflow: hidden; */-moz-transform:translateZ(0.5px) scale(0.5);} .object{position:relative;overflow: hidden;} .layer-text{width:100vw;} .layer-front-bg,.layer-back-bg,.layer-front-bg-am,.layer-back-bg-am {position: absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;background-size:100%;} .layer-back-bg,.layer-front-bg{visibility:visible;opacity:1;} .layer-back-bg-am,.layer-front-bg-am{visibility:hidden;opacity:0;-webkit-transition: opacity 1.5s ease-in-out;transition: opacity 1.5s ease-in-out;} .am-mode-vis .layer-back-bg-am,.am-mode-vis .layer-front-bg-am{visibility:visible;} .am-mode .layer-back-bg-am,.am-mode .layer-front-bg-am{opacity:1 !important;} .pm-mode-novis .layer-back-bg,.pm-mode-novis .layer-front-bg{display:none;visibility:hidden;} /*.layer-back-bg{background-image:url(../svg/main/day-back.svg);}*/ .layer-back-bg::before,.layer-back-bg-am::before, .layer-back-bg::after,.layer-back-bg-am::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; z-index: -1; mix-blend-mode: darken; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: multiply; } .layer-back-bg::before,.layer-back-bg-am::before { background: #000; filter: url('../svg/filter.svg#external-noise-filter'); } .layer-back-bg::after { background-image:url(../svg/main/day-back.svg); background-repeat:no-repeat;background-size:100%; filter: contrast(100%) brightness(150%); } .layer-back-bg-am::after { background-image:url(../svg/main/day-back-am.svg); background-repeat:no-repeat;background-size:100%; filter: contrast(100%) brightness(150%); } .layer-front-bg{background-image:url(../svg/main/day-front.svg);} .layer-front-bg-am {background-image:url(../svg/main/day-front-am.svg);} /*.layer-back-bg-am {background-image:url(../svg/main/day-back-am.svg);}*/ /* NEURAL PARALLAX */ .neural-object-wrapper,.neural-layer-back,.neural-layer-middle,.neural-layer-front,.neural-layer-text,.neural-layer-middle{position:absolute;} .neural-parallax .neural-object-wrapper .neural-object{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;} .neural-parallax-perspective{perspective:1px;-webkit-perspective:1px;-moz-perspective:1px;} .neural-parallax{height:100vh;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:#000;} .neural-object-wrapper{top:0;right:0;bottom:0;left: 0;justify-content:center;} .neural-speed-back{transform:translateZ(-4px) scale(5.1);-webkit-transform:translateZ(-4px) scale(5.1);-moz-transform:translateZ(-4px) scale(5.1);} .neural-speed-middle{transform:translateZ(-2px) scale(3);-webkit-transform: translateZ(-2px) scale(3.1);-moz-transform:translateZ(-2px) scale(3);} .neural-speed-front{transform:translateZ(0px) scale(1);-webkit-transform:translateZ(0px) scale(1);-moz-transform:translateZ(0px) scale(1);} .neural-speed-text{transform:translateZ(0.5px) scale(0.5);-webkit-transform:translateZ(0.5px) scale(0.5);-moz-transform:translateZ(0.5px) scale(0.5);} .neural-object{position:relative;} .neural-layer-back,.neural-layer-middle,.neural-layer-front,.neural-layer-text{width:100vw;background-size: 100%;background-repeat:no-repeat;} .neural-layer-back{height:180vh;} .neural-layer-front{overflow:hidden;} .neural-layer-middle{height:180vh;} /* WORKS PARALLAX */ #works-parallaxed {scroll-behavior: smooth;} .works-parallax .works-object-wrapper .works-object{transform-style:preserve-3d;} .works-parallax-perspective{perspective:1px;-webkit-perspective:1px;-moz-perspective:1px;} .works-parallax{height:100vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;} .works-object-wrapper{top:0;right:0;bottom:0;left:0;} .works-speed-back{transform:translateZ(-3px) scale(4.1);-webkit-transform:translateZ(-3px) scale(4.1);-moz-transform:translateZ(-3px) scale(4.1);} .works-speed-middle{transform:translateZ(-2px) scale(3);-webkit-transform:translateZ(-2px) scale(3);-moz-transform:translateZ(-2px) scale(3);} .works-speed-front{transform:translateZ(0px) scale(1);-webkit-transform:translateZ(0px) scale(1);-moz-transform:translateZ(0px) scale(1);} .works-speed-text{transform:translateZ(0.5px) scale(0.5);-webkit-transform:translateZ(0.5) scale(1);-moz-transform:translateZ(0.5px) scale(0.5); pointer-events:none;} .works-object{position:relative;overflow: hidden;} .works-layer-back{width:100%;height:140vh;/*background-image:url(../svg/main/night-back.svg);background-size:100%;background-repeat:no-repeat;*/} .works-layer-middle{width:100%;height:400vh;/*background-image:url(../svg/main/night-middle.svg);background-size:100%;background-repeat:no-repeat;*/} .works-layer-middle img,.works-layer-back img{width:100%;top:0;left:0;} .works-layer-front{width:100vw;height:250vh;background-size:100%;background-repeat:no-repeat;} #neon-arrow{cursor:pointer;animation-duration:3s;animation-timing-function:linear;position:absolute;z-index:998;width:16vw;left:55.5vw;top:13.2vw} #neon-arrow-glow{pointer-events:none;position:absolute;opacity:0;z-index:999;width:16vw;left:55.5vw;top:13.2vw} #neon-arrow:hover ~ #neon-arrow-glow{opacity:1} #works-window-green,#works-window-orange,#works-window-red,#works-window-pink,#works-window-orange2,#works-window-yellow,#works-window-green2,#works-window-orange3{animation-duration:.5s;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;opacity:0;z-index:997} #works-window-green{animation-delay:1s;width:16vw;left:65.8vw;top:21.9vw} #works-window-orange{animation-delay:1.1s;width:1.5vw;left:53.89vw;top:41.5vw} #works-window-red{animation-delay:1.2s;width:1.2vw;left:59.2vw;top:44.8vw} #works-window-pink{animation-delay:1.3s;width:13vw;left:50.72vw;top:35.75vw} #works-window-orange2{animation-delay:1.4s;width:.5vw;left:74.4vw;top:40.6vw} #works-window-yellow{animation-delay:1.5s;width:1.2vw;left:66.53vw;top:53vw} #works-window-green2{animation-delay:1.6s;width:14.2vw;left:70vw;top:56.7vw} #works-window-orange3{animation-delay:1.7s;width:15.5vw;left:56.2vw;top:67.85vw} @keyframes neon-arrow-anim { 0%{opacity:0} 15%{opacity:0} 24%{opacity:1} 25%{opacity:0} 30%{opacity:0} 31%{opacity:1} 32%{opacity:0} 35%{opacity:0} 38%{opacity:1} } @keyframes works-window-anim { from{opacity:0} to{opacity:1} } /* MORE GALLERY PARALLAX */ .more-parallax .more-object-wrapper .more-object{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;} .parallax-perspective{-webkit-perspective:1px;-moz-perspective:1px;} .more-parallax{perspective:1px;height:100vh;overflow-x:hidden;overflow-y: scroll;-webkit-overflow-scrolling:touch;} .more-object-wrapper{top:0;right:0;bottom:0;left:0;justify-content:center;} .more-speed-back{transform:translateZ(-2px) scale(3);-webkit-transform:translateZ(-2px) scale(3);-moz-transform:translateZ(-2px) scale(3);} .more-speed-front{transform:translateZ(0px) scale(1);-webkit-transform:translateZ(0px) scale(1);-moz-transform:translateZ(0px) scale(1);} .more-object{position:relative;} .more-layer-front,.more-layer-back{width:100%;background-size:100%;background-repeat:no-repeat;} .more-layer-back{height:270vh;background-image:url(../svg/main/night-more-back.svg);} /* GALLERY */ /* GENERAL GALLERY STYLES */ .front-img,.text-blocks,.pie-icon-mobile{position:absolute;} .building-gallery-wrapper{width:100%;height:700vw;} .building-gallery-svg{width:100%;height:450vh;z-index:1;} .building-gallery-svg img{position:absolute;top:0;left:0;width:100%;} #navigate,.nav-icon,.nav-icon2,.nav-music,.nav-menu,.nav-contact,.nav-about,#menu-outer,.sidebarIconToggle,.menu-color,.meiconsvg,.worksiconsvg,.contacticonsvg,a,.m-neonsignbacklink,.mobile-led-sign-back{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;} /* COLOR SCHEMES */ .day-colour{/* color:#FFF0B2; */} .neural-colour{color:var(--color-alpha);} .night-colour{color:#9EC4D2;} /* BUILDING GALLERY */ .led-sign,.train-lights,.building-gallery-svg{position:absolute;} .led-sign{font-family:'Elektra';color:#ff9100;text-decoration:none;margin-top:227.2%;margin-left:50.5%;font-size:4vw;z-index:100;} #ledsignlink{text-decoration:none;color:#ff9100;} .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .train-lights{opacity:0;margin-top: 235.1%;z-index:999;width:100%;height:20vw;position:absolute;background-image:url(../svg/main/night-trainlights.svg);background-size:100%;background-repeat:no-repeat;} .led-sign:hover~#trainlights{opacity:1;} .led-sign:hover{cursor:pointer;} /* BUILDING GALLERY MOBILE */ .led-sign-mobile{position:absolute;} .led-sign-mobile{color:#ff9100;font-family:'Elektra';margin-left:43vw;font-size:9vw!important;letter-spacing:1vw;z-index:100;} .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .mobile-building-gallery-wrapper{width:100%;height:200vh;} /* MORE GALLERY */ .led-sign-back,.train-lights,.more-gallery-body,.more-gallery-svg,.more-gallery-window,.clipimg,.mobile-led-sign-back,.mobile-more-gallery-body,.mobile-more-gallery-svg,.mobile-more-gallery-window,.mobile-clipimg{position:absolute;} .led-sign-back{font-family:'Elektra';color:#ff9100;text-decoration:none;margin-top:251.5vw;margin-left:45vw;font-size:4vw;z-index:100;cursor:pointer;} #ledsignbacklink,#ledsignbacklinkmobile,#ledsignlink,#ledsignlinkmobile{color:#ff9100;text-decoration:none;} .led-sign:hover~#trainlights{opacity:1;} .led-sign:hover{cursor:pointer;} .more-gallery-wrapper{width:100%;} .more-gallery-svg{width:100vw;height:500vh;background-image:url(../svg/main/night-more-building.svg);background-size:100%;background-repeat:no-repeat;background-position:left top;z-index:1;} /* MORE GALLERY MOBILE */ .mobile-led-sign-back{font-family:'Elektra';color:#ff9100;text-decoration:none;margin-top: 420.5vw;margin-left: 40.5vw;font-size: 9vw;z-index:100;cursor:pointer;} .mobile-more-back{position:fixed;z-index:0;width:100%;height:100%;overflow:hidden;color:#FFF1B3;background-image:url(../svg/mobile/mobile-night-more-back.svg);background-repeat:no-repeat;background-position:left top;background-size:100vw;-webkit-transform: translateZ(-3px) scale(4.1);-moz-transform: translateZ(-3px) scale(4.1);} .mobile-more-gallery-body{z-index:900;width:100%;height:150vh;} .mobile-more-gallery-svg{z-index:100;top:0;width:100vw;height:550vw;background-image:url(../svg/mobile/mobile-night-more-building.svg);background-repeat:no-repeat;background-position:center top;background-size:cover;overflow: hidden;} .neonsignbacklink {position:absolute;width:23vw;height:6vw;top:7vw;left:38vw;z-index: 998;cursor: pointer;} .m-neonsignbacklink {position:absolute;width: 36vw;height: 10vw;top: 3vw;left: 31vw;z-index: 998;cursor: pointer;} .neon-back-flash {position:absolute;opacity:0;z-index: 997;pointer-events: none;background-image:url(../svg/back-neon-flash.svg);background-repeat:no-repeat;background-position:left top;background-size:cover;} .neonsignbacklink:hover .neon-back-flash {opacity:1;} .m-neonsignbacklink:hover .neon-back-flash {opacity:1;} /* GALLERY WINDOWS */ .video-fix,.mobile-video-fix{height: 100% !important;width: auto !important;} .w-1,.w-2,.w-3,.w-4,.w-5,.w-6,.w-7,.w-8,.w-9,.w-10,.w-11,.w-12,.w-13,.w-14,.w-15,.w-16 {position:absolute;overflow:hidden;} .th-1,.th-2,.th-3,.th-4,.th-5,.th-6,.th-7,.th-8,.th-9,.th-10,.th-11,.th-12,.th-13,.th-14,.th-15,.th-16,.shutter {position:absolute;} .w-16{margin-top:37.6vw;margin-left:19.2vw;width:10.1vw;height: 14.4vw;} .th-16{height:14.3vw;} .w-15{position:absolute;margin-top:34.6vw;margin-left:51.8vw;width:10vw;height: 17.4vw;} .th-15{height:17.4vw;} .w-14{margin-top:34.9vw;margin-left:78.4vw;width:14.4vw;height:14.5vw;} .th-14{width:14.4vw;} .w-13{margin-top: 63.1vw;margin-left:17.7vw;width:14.4vw;height:14.7vw;} .th-13{height:14.7vw;} .w-12{margin-top: 90.5vw;margin-left:17.7vw;width:14.4vw;height:14.7vw;} .th-12{height:14.7vw;} .w-11{margin-top:69.2vw;margin-left:46.8vw;width:14.5vw;height:9.5vw;} .th-11{height:9.5vw;} .w-10{margin-top:72.7vw;margin-left:77.2vw;width:14.5vw;height:24.4vw;} .th-10{height:24.4vw;} .w-9{margin-top:98.5vw;margin-left:51.8vw;width: 9.5vw;height:14.5vw;} .th-9{height: 15.5vw;} .w-8{margin-top:129.9vw;margin-left:24vw;width:11.4vw;height:14.5vw;} .th-8{height:14.5vw;} .w-7{margin-top:133.9vw;margin-left:51.9vw;width:11.4vw;height:10.8vw;} .th-7{height:10.8vw;} .w-6{margin-top:129.9vw;margin-left:78vw;width:14.5vw;height:9.5vw;} .th-6{width:14.5vw;} .w-5{margin-top:171.3vw;margin-left:24vw;width:11.3vw;height:10.7vw;} .th-5{width:11.3vw;} .w-4{margin-top:171.5vw;margin-left:52vw;width:11.4vw;height:14.9vw;} .th-4{width:11.4vw;} .w-3{margin-top:179.1vw;margin-left:79.4vw;width:11.3vw;height:10.7vw;} .th-3{width:11.3vw;} .w-2{margin-top:200.6vw;margin-left:32vw;width:20.1vw;height:11.8vw;} .th-2{width:20.1vw;} .w-1{margin-top:203.1vw;margin-left:64.3vw;width:14.5vw;height:9.5vw;} .th-1{height:9.5vw;} .hoverimg{opacity:0.4;filter: grayscale(50%);transform:scale(1);transition: all 0.5s cubic-bezier(0.54, -0.08, 0.51, 1);/* will-change: transform; */} .hoverimg:hover{opacity:1;filter: grayscale(0); transform:scale(1.2);} .led-sign,.train-lights,.building-gallery-svg,.building-gallery-body,.shutter,.pixelated,.gallery-window1,.gallery-window2,.gallery-window3,.gallery-window4,.gallery-window5,.gallery-window6,.gallery-window7,.gallery-window8,.gallery-window9{position:absolute;} .photoswipe-wrapper{position:absolute;z-index:995;} /* MORE GALLERY WINDOWS */ .mw-1,.mw-2,.mw-3,.mw-4,.mw-5,.mw-6,.mw-7,.mw-8,.mw-9,.mw-10,.mw-11,.mw-12,.mw-13,.mw-14,.mw-15,.mw-16,.mw-17,.mw-18 {position:absolute;overflow:hidden;width:15.1vw;height:14.9vw;} .mth-1,.mth-2,.mth-3,.mth-8,.mth-10,.mth-11,.mth-12,.mth-13,.mth-14,.mth-17,.mth-18{position:absolute;width:15.1vw;} .mth-4,.mth-5,.mth-6,.mth-7,.mth-9,.mth-15,.mth-16 {position:absolute;height:14.9vw;} .mw-16 .img-responsive{margin-left: -30%;} .mw-7 .img-responsive{margin-left: -17%;} .mw-1{margin-top:31.1vw;margin-left:17.2vw;} .mw-2{margin-top:31.1vw;margin-left:42.1vw;} .mw-3{margin-top:31.1vw;margin-left:66.9vw;} .mw-4{margin-top:55.9vw;margin-left:17.2vw;} .mw-5{margin-top:55.9vw;margin-left:42.1vw;} .mw-6{margin-top:55.9vw;margin-left:66.9vw;} .mw-7{margin-top:104.7vw;margin-left:17.2vw;} .mw-8{margin-top:104.7vw;margin-left:42.1vw;} .mw-9{margin-top:129.55vw;margin-left:17.2vw;} .mw-10{margin-top:129.55vw;margin-left:42.1vw;} .mw-11{margin-top:129.55vw;margin-left:66.9vw;} .mw-12{margin-top:154.4vw;margin-left:17.2vw;} .mw-13{margin-top:154.4vw;margin-left:42.1vw;} .mw-14{margin-top:154.4vw;margin-left:66.9vw;} .mw-15{margin-top:203vw;margin-left:17.2vw;} .mw-16{margin-top:104.7vw;margin-left:66.9vw;} .mw-17{margin-top:203vw;margin-left:42.1vw;} .mw-18{margin-top:203vw;margin-left:66.9vw;} /* TRANSITIONS */ .day-block{display:none;overflow-y: auto;min-height: -webkit-fill-available;} .neural-block{display:none;} .parallax-text{display:block;} .night-block{display:none;} .more-block{display:none;overflow-x: hidden;overflow-y: auto;} .more-block-mobile {overflow-x: hidden;overflow-y: scroll;height: 100vh;perspective: 1px;} .hide{display:none!important;} .show{display:block!important;} #fader{position:fixed;margin-top:-100vh;transform: translateY(0);width:100%;height:100vh;z-index: 999;background-color:#001;pointer-events:none;will-change: transform, background-color;} .transp{opacity:0;} .pagefader{animation-name:pagefader;animation-duration:1s;animation-timing-function:ease-in-out; animation-fill-mode:forwards;} @keyframes pagefader { 0%{transform: translateY(0);background-color: var(--startcolor);} 30%{transform: translateY(100vh);background-color: var(--startcolor);} 70%{transform: translateY(100vh); background-color: var(--endcolor);} 100%{transform: translateY(0);background-color: var(--endcolor);} } /* GALLERY ENGINE STYLES */ /* ENGINE VIDEO STYLES */ .pswp__zoom-wrap{text-align:center;} .pswp__zoom-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;} .wrapper{line-height:0;width:100%;max-width:900px;position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045;} .video-wrapper{position:relative;padding-bottom:56.25%;padding-top:10vh;height:auto;width:100%;text-align: center;} .video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;} /* ENGINE GENERAL STYLES */ .pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action: none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0;} .pswp *{-webkit-box-sizing:border-box;box-sizing:border-box;} .pswp img{max-width:none;} .pswp--animate_opacity{opacity:.001;will-change:opacity;} .pswp--open{display:block;} .pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in;} .pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;} .pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;} .pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-backface-visibility:hidden;will-change:opacity;} .pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;} .pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0;} .pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;} .pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;} .pswp__bg{will-change:opacity;} .pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden;} .pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;} .pswp__img{position:absolute;width:auto;height:auto;top:0;left:0;} .pswp__img--placeholder{-webkit-backface-visibility:hidden;} .pswp__img--placeholder--blank{background:#222;} .pswp--ie .pswp__img{width:100%!important;height:auto!important;left:0;top:0;} .pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#CCC;} .pswp__error-msg a{color:#CCC;text-decoration:underline;} .pswp--animate_opacity,.pswp__bg,.pswp__container,.pswp__zoom-wrap{will-change:auto;} /* UI STYLES */ .pswp__button{width:100px;height:100px;position:relative;background:none;cursor:pointer;overflow:visible;-webkit-appearance:none;display:block;border:0;padding:0;margin:0;float:right;opacity:1;-webkit-box-shadow:none;box-shadow:none;} .pswp__button:focus,.pswp__button:hover{opacity:1;} .pswp__button:active{outline:none;opacity:.9;} .pswp__button::-moz-focus-inner{padding:0;border:0;} .pswp__ui--over-close .pswp__button--close{opacity:1;} .pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background:url(../svg/psg-controls.svg) 0 0 no-repeat;width:88px;height:88px;} .pswp__button {background-size: 527px 176px;} .pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background-size: 532px 143px;} @media (-webkit-min-device-pixel-ratio: 1.1),(-webkit-min-device-pixel-ratio: 1.09375),(min-resolution: 105dpi),(min-resolution: 1.1dppx) { .pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before{background-image:url(../svg/psg-controls.svg);} .pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right{background: none;} } .pswp__button--close{background-position:0 -86px;} .pswp__button--share{background-position:-87px -86px;} .pswp__button--fs{display:none;} .pswp--supports-fs .pswp__button--fs{display:block;} .pswp--fs .pswp__button--fs{background-position:-90px 0;} .pswp__button--zoom{display:none;background-position:-175px 0;} .pswp--zoom-allowed .pswp__button--zoom{display:block;} .pswp--zoomed-in .pswp__button--zoom{background-position:-264px 0;} .pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden;} .pswp__button--arrow--left,.pswp__button--arrow--right{transform-origin: 40% 70%;background:none;top: 46%;margin-top:-50px;width:58px;height:100px;position:absolute;} .pswp__button--arrow--left{left:0;} .pswp__button--arrow--right{right:0;} .pswp__button--arrow--left:before,.pswp__button--arrow--right:before{content:'';top:35px;background-color:none);height:70px;width:47px;position:absolute;} .pswp__button--arrow--left:before{left:0;background-position:-272px -90px;} .pswp__button--arrow--right:before{right:0;background-position:-209px -90px;} .pswp__counter,.pswp__share-modal{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .pswp__share-modal{display:block;background:rgba(0,0,0,0.5);width:100%;height:100%;top:0;left:0;padding:10px;position:absolute;z-index:1600;opacity:0;-webkit-backface-visibility:hidden;will-change:opacity;} .pswp__share-modal--hidden{display:none;} .pswp__share-tooltip{z-index:1620;position:absolute;background:rgba(0,0,0, 0.5);top:7vw;display:block;width:auto;right:9vw;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.25);-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-backface-visibility:hidden;will-change:transform;} .pswp__share-tooltip a{display:block;padding:8px 12px;color:#9EC4D2;text-decoration:none;font-size: 1.8vh;line-height: 5vh;font-weight: 300;} .pswp__share-tooltip a:hover{text-decoration:none;color:#000;} .pswp__share-tooltip a:first-child{border-radius:2px 2px 0 0;} .pswp__share-tooltip a:last-child{border-radius:0 0 2px 2px;} .pswp__share-modal--fade-in{opacity:1;} .pswp__share-modal--fade-in .pswp__share-tooltip{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);} .pswp--touch .pswp__share-tooltip a{padding:16px 12px;} a.pswp__share--facebook:before{content:'';display:block;width:0;height:0;position:absolute;top:-12px;right:15px;border:6px solid transparent;border-bottom-color:#FFF;-webkit-pointer-events:none;-moz-pointer-events:none;pointer-events:none;} a.pswp__share--facebook:hover{background:#9EC4D2;color:#000;} a.pswp__share--twitter:hover{background:#9EC4D2;color:#000;} a.pswp__share--pinterest:hover{background:#9EC4D2;color:#000;} a.pswp__share--download:hover{background:#9EC4D2;} .pswp__counter{position:absolute;left:0;top:0;height:44px;font-size:13px;line-height:44px;color:#FFF;opacity:.75;padding:0 10px;} .pswp__caption{position:absolute;z-index: 999;} .pswp__caption__center{text-align:center;color:#9EC4D2;} .caption-link{cursor:pointer;background:#9EC4D2;color:#000;font-weight: 400;padding: 10px 14px;border-radius: 25px;margin-left: 10px;} figcaption {visibility:hidden;} .pswp__caption small{font-size:11px;color:#BBB;} .pswp__caption--empty{display:none;} .pswp__caption--fake{visibility:hidden;} .pswp__preloader{width:44px;height:44px;position:absolute;top:0;left:50%;margin-left:-22px;opacity:0;will-change:opacity;direction:ltr;} .pswp__preloader__icn{width:20px;height:20px;margin:12px;} .pswp__preloader--active{opacity:1;} .pswp__preloader--active .pswp__preloader__icn{background:url(../../img/preloader.gif) 0 0 no-repeat;} .pswp--css_animation .pswp__preloader--active{opacity:1;} .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{-webkit-animation:clockwise 500ms linear infinite;animation:clockwise 500ms linear infinite;} .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{-webkit-animation:donut-rotate 1000ms cubic-bezier(0.4,0,0.22,1) infinite;animation:donut-rotate 1000ms cubic-bezier(0.4,0,0.22,1) infinite;} .pswp--css_animation .pswp__preloader__icn{background:none;opacity:.75;width:14px;height:14px;position:absolute;left:15px;top:15px;margin:0;} .pswp--css_animation .pswp__preloader__cut{position:relative;width:7px;height:14px;overflow:hidden;} .pswp--css_animation .pswp__preloader__donut{-webkit-box-sizing:border-box;box-sizing:border-box;width:14px;height:14px;border:2px solid #FFF;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:none;margin:0;} @media screen and (max-width: 1024px) { .pswp__preloader{position:relative;left:auto;top:auto;margin:0;float:right;} } @-webkit-keyframes clockwise { 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);} } @keyframes clockwise { 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);} } @-webkit-keyframes donut-rotate { 0%{-webkit-transform:rotate(0);transform:rotate(0);} 50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg);} 100%{-webkit-transform:rotate(0);transform:rotate(0);} } @keyframes donut-rotate { 0%{-webkit-transform:rotate(0);transform:rotate(0);} 50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg);} 100%{-webkit-transform:rotate(0);transform:rotate(0);} } .pswp__ui{-webkit-font-smoothing:auto;visibility:visible;opacity:1;z-index:1550;} .pswp__top-bar{position:absolute;left:0;top:0;height:88px;width:100%;} .pswp__caption,.pswp__top-bar,.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{-webkit-backface-visibility:hidden;will-change:opacity;} .pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible;} .pswp__top-bar,.pswp__caption{background-color: rgba(0,0,0,0);} .pswp__ui--fit .pswp__top-bar,.pswp__ui--fit .pswp__caption{background-color:rgba(0,0,0,0.5);} .pswp__ui--idle .pswp__top-bar{opacity:0;} .pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right{opacity:0;} .pswp__ui--hidden .pswp__top-bar,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right{opacity:.001;} .pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none;} .pswp__element--disabled{display:none!important;} .pswp--minimal--dark .pswp__top-bar{background:none;} .pswp__button:hover, .pswp__button--arrow--left:hover, .pswp__button--arrow--right:hover, .pswp__button--share:hover, .pswp__button--zoom:hover, .pswp__button--fs:hover {transform: scale(1.2);} #lid path {animation-duration:6s;animation-delay:1s;animation-timing-function: ease-in-out;animation-iteration-count: infinite;fill: #000;stroke-linecap: round;stroke-linejoin: round;transition: d 0.2s;-webkit-transition: d 0.2s;transition: d 0.2s;} @-webkit-keyframes eyelid { 0% {} 4% { -webkit-d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 8% { -webkit-d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 50% { -webkit-d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 53% { -webkit-d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 56% { -webkit-d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 70% { -webkit-d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 74% { -webkit-d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 78% { -webkit-d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } } @keyframes eyelid { 0% {} 4% { d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 8% { d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 50% { d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 53% { d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 56% { d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 70% { d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 74% { d:path('M164.6,50.8c-3,3.9-28.6,35.9-72.8,36.3c-45.3,0.4-71.7-32.6-74.6-36.3 c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } 78% { d:path('M164.6,50.8c-20.5-14.8-47.3-22-73.7-22.1c-27.3-0.1-54.3,7.5-73.7,22.1c3.1-4,29.1-35.6,73.6-35.7C135.4,15,161.5,46.8,164.6,50.8z'); } } .neuralsvg{height:340vw; overflow:hidden;} .neuralmidsvg{height: 160vw;overflow:hidden;width: 100vw;} .neuralbacksvg{height:110vw;overflow:hidden;width: 100vw;} .neuralbacksvgmobile{height:370vw; overflow:hidden;} #playpointer,#playpointermobile,#tapepointer,#tapepointermobile {visibility:hidden;} .pointer #playpointer{transform-origin: 51.5% 12.9%;} .pointer #playpointermobile{transform-origin: 53.8% 17.2%;} .pointer #playpointer, .pointer #playpointermobile{visibility:visible;animation-name:playpointeran;animation-duration: 1.5s;animation-iteration-count:infinite;animation-timing-function: ease-in-out;} @keyframes playpointeran { 0%{opacity: 0;transform: scale(0.5);} 30%{opacity: 0.4;transform: scale(1.6);} 95%{opacity: 0;} 100%{transform: scale(0);} } .pointer #tapepointer {visibility:visible;animation-name:tapepointeran;animation-duration: 1.5s;transform-origin: 36.7% 29.1%;animation-iteration-count: infinite;animation-timing-function: ease-in-out;pointer-events: none;} @keyframes tapepointeran { 0%{opacity: 0;transform: scale(0.5);} 30%{opacity: 0.3;transform: scale(1.1);} 100%{transform: scale(0);} } .pointer #tapepointermobile {visibility:visible;animation-name: tapepointermobilean;animation-duration: 1.5s;transform-origin: 24% 53.1%;animation-iteration-count: infinite;animation-timing-function: ease-in-out;} @keyframes tapepointermobilean { 0%{opacity: 0;transform: scale(0.4);} 30%{opacity: 0.3;transform: scale(1.1);} 100%{transform: scale(0);} } #playtape:hover {transform: scale(1.5);cursor: pointer;} #playtape {transform-origin: 51.5% 12.9%;} #pausetape:hover {transform: scale(1.5);cursor: pointer;} #pausetape {transform-origin: 48.5% 12.9%;} #stopbutton,#stopbuttonbody,#playmobile,#pausetape {/* pointer-events:none; */} #playerbutton:hover > #recbuttonbody {fill: var(--color-alpha);cursor: pointer;} #playerbutton:hover > #recbutton {fill: #000;cursor: pointer;} #playerstopbutton:hover > #stopbuttonbody {fill: var(--color-alpha);cursor: pointer;} #playerstopbutton:hover > #stopbutton {fill: #000;cursor: pointer;} #bulbglow,#tobulb {opacity: 0;} #pausetape,#playerstopbutton,#stopbuttongmobile,#pausegmobile{pointer-events:none;} #stopbuttongmobile:hover > #stopbuttonbodymobile {fill: var(--color-alpha);cursor: pointer;} #stopbuttongmobile:hover > #stopbuttonmobile {fill: #000;cursor: pointer;} #menu-pointer-wrap,#menu-pointer {pointer-events: none;} #menu-pointer-wrap {position: fixed;z-index: 9999;width: 19vh;height: 19vh;margin-top: -4.1vh;margin-left: -4.3vh;} #menu-pointer {width:100%;height:100%;background: var(--themecolor);border-radius:50%;opacity: 0.6;animation-name: menupointeran;animation-duration: 2.5s;transform-origin: 50% 50%;animation-iteration-count: infinite;animation-timing-function: ease-in-out;} @keyframes menupointeran { 0%{opacity: 0;transform: scale(0);} 30%{opacity: 0.15;transform: scale(1);} 50%{transform: scale(0.3);opacity: 0;} 99%{transform: scale(0.3);opacity: 0;} 100%{transform: scale(0);opacity: 0;} } .overlaypass {position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999;background-color:transparent;padding:10% 0;-webkit-appearance: none;} .vortexspin {animation-name:vortexspin;} .vortexbackspin {animation-name:vortexbackspin;} @keyframes vortexspin { from{transform:rotate(0deg)} to{transform:rotate(71deg)} } @keyframes vortexbackspin { from{transform:rotate(71deg)} to{transform:rotate(142deg)} } /*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;} .menu-nav-area{position:absolute;width: 9%;background: #111;height: 2vh;top: -0vh;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)} /* QUERIES */ /* SQUARE */ @media screen and (min-aspect-ratio: 4/4) { .rescheck:before{content:"4 : 4";} .pswp__video{max-width: 95vw!important;max-height:71vh!important;} #navigate{opacity:1!important;transform: translateX(0vh) !important;} .desk-icon-scroll{display:none;} h1{font-size: 7vh;letter-spacing:.05em;} h2{font-size:2vw;letter-spacing:3px;} h3{font-size: 1.9vh;letter-spacing: .18em;} h4{font-size:1.3vw;} h5{font-size:1vw;} .main-title{line-height: 8.5vh;} .hello-block-wrapper{margin-top: 28%;margin-left: 14%;width: 35%;} .world-block-wrapper{margin: 37% 0 0 15%;text-align:center;width: 32%;} .graduation{width: 92%;padding:0 0 15% 10%;} .graduation section{padding:7%;} .future{width: 89%;padding:70% 0 15% 17%;} .future section{padding:7%;} .lines-icon{margin-top: 16%;width: 88%;} .lcs-icon{margin-top: 2%;margin-left: 4%;width: 18%;height:3%;} .analog-digital{margin-top:3%;margin-left:auto;margin-right:auto;width: 71%;height:auto;} .eye-icon{margin-top:7%;width: 46%;height:40%;} .player{height: 12vh;width: 12vh;margin-top: 47%;left:50%;border-radius: 1vw;} #slider{width: 92%;height: 1.5vh;} .info h4{margin-top: 102%;font-size: 1.6vh;} #menu-pointer-wrap{display: block;} .menu-box,.main-menu-box {visibility: visible;} .touch-scroll {visibility: hidden;} .about-wrap {margin-top: 5vh;} #context-menu {width: 9vw;} #context-menu .item {padding: 1.7vh 1vh;font-size: 1.5vh;} .works-textblock-wrap{margin: 33vh 0 0 15vh;width: 33vh;line-height: 4.3vh;} .pswp__video{max-width:900px!important;max-height:85vh!important;} .pswp__caption{left:0;top:0;bottom: auto;width:100%;min-height:44px;} .pswp__caption__center{margin:0 auto; padding:10px; padding-top:3vh; padding-bottom:3vh;} .pswp__top-bar{height:88px;} h2{font-size:2vw;} .night-block-mobile,.mobile-block-day,.mobile-block-neural{display:none;} #backtotop{display:block;} .neural-layer-back{height: 97vw;} .neural-layer-middle{height: 114vw;} .neural-block-desk{display:block;} .works-parallax{display:block;background: #000;} .works-layer-middle{height:130vw;} .works-layer-back{height:140vw;} .more-block-mobile{display:none;} .more-parallax{display:block;} .layer-front{height:788vw;} .layer-back{height:150vw;} .works-layer-front,.building-gallery-svg,.building-gallery-wrapper{height: 460vw!important;} .more-layer-back{height:140vw;} .more-gallery-svg,.more-layer-front{height:329vw!important;overflow: hidden;} /* POP UP */ .popup{width: 75vh;height: 75vh;margin: 10vh auto auto;border: 1px solid;} #about .popup{width: 51vh;height: 83vh;margin: 8vh auto auto;} form{width:70%;margin-top:12vh;} #name,#email,#subject{height:6vh;} textarea{height:20vh;} .close{top:2vh;right:2vh;width:6vh;} .feedback-input{font-size: 2vh;} [type="submit"]{font-size: 3.2vh;} .neural-eye{position:absolute;width:14.6vw;left:43.9vw;top:9.4vw;} .vortex{animation-duration: 1.5s;animation-iteration-count:1;animation-timing-function:ease-in-out;position:absolute;background-image:url(../svg/main/vortex.svg);background-repeat:no-repeat;background-size:100%;width:20vw;height:20vw;top:20vw;left:30vw;opacity:.5;} .neon-back-flash {width: 22vw;height: 8vw;top: -1vw;left: 0vw;} .pswp__caption__center{max-width:85vw;margin:0 auto;font-size:1.8vh;padding:10px; padding-top:3vh; padding-top:3vh; line-height:3vh;} .pswp__caption{left: 25%;top:0;width: 50%;min-height:44px;} .qr-code-wrap {width: 50%;} .about-wrap {width: 100%;height: 100%;} #drag-fixed {display:none;} #contact-error-msg {width: 50%;margin-left: 25%;} #contact-error-msg p {font-size: 2.3vh;padding: 3vh 5%;} #lock-wrapper {width: 32vh;} } /* LANDSCAPE */ @media screen and (min-aspect-ratio: 5/4) { .rescheck:before{content:"5 : 4";} .desk-icon-scroll{display:block;} .hello-block-wrapper{margin-top: 11%;margin-left: 12%;width: 33%;} .hello-block h1{padding-bottom: 4%;} .world-block-wrapper{margin: 70% 0 0 15%;width: 33%;} .graduation{width: 80%;} .future{width: 77%;padding:70% 0 15% 17%;} .player{height: 13vh;width: 13vh;margin-top: 155%;left:50%;border-radius: 1vw;} .info h4{margin-top: 102%;font-size: 1.8vh;} .lines-icon{margin-top: 16%;width: 70%;} .lcs-icon{width: 15%;margin-left: 6%;} .analog-digital{margin-top:3%;margin-left:auto;margin-right:auto;width: 71%;height:auto;} .eye-icon{margin-top:7%;width: 46%;height:40%;} .layer-front{height:775vw;} .layer-back{height:150vw;} .works-layer-back{height:130vw;background-image:url(../svg/main/night-back.svg);} .works-layer-middle{height:130vw;} .popup{/* width:75vh; *//* height:78vh; *//* margin: 10vh auto auto; */} form{width:70%;margin-top:12vh;} [type="submit"]{font-size: 3.2vh;} } @media screen and (min-aspect-ratio: 4/3) { .rescheck:before{content:"4 : 3";} .works-textblock-wrap{margin: 33vh 0 0 18vh;width: 33vh;line-height: 4.3vh;} .player{height: 13vh;width: 13vh;margin-top: 155%;} .info h4{margin-top: 102%;font-size: 1.6vh;} #slider{width: 92%;height: 1.5vh;border-radius: 50px;overflow: hidden;} .lcs-icon{margin-left: 6%;} #contact-error-msg {width: 44%;margin-left: 28%;} #contact-error-msg p {font-size: 2.5vh;padding: 5% 5%;} } @media screen and (min-aspect-ratio: 3/2) { .rescheck:before{content:"3 : 2";} h1{font-size: 8vh;letter-spacing:.05em;} h2{font-size:2vw;letter-spacing:3px;} h3{font-size: 2.1vh;letter-spacing: .1em;} h4{font-size:1.3vw;} h5{font-size:1vw;} .hello-block-wrapper{margin-top: 11%;margin-left: 12%;width: 25%;} .player{height: 14vh;width: 14vh;margin-top: 155%;} [type="submit"]{font-size: 3.2vh;} .feedback-input{/* font-size:2vh; */} } @media screen and (min-aspect-ratio: 16/10) { h3{font-size:1.5vw;} .rescheck:before{content:"16 : 10";} #menu-pointer-wrap {margin-top: -2.2vh;margin-left: -3.8vh;} #navigate{margin-top: 0;margin-left: 0;} .sidebarIconToggle{top: 3.7vh;left: 2.4vh;} #menu-outer{margin-top: 11vh;margin-left: 0.5vh;} .sidebarIconToggle:hover + .main-menu-box {transform: translateY(14.7vh);opacity: 1;} .mode-box-wrap {bottom: 3.4vh;left: 10.2vh;} .hello-block-wrapper{margin-left: 10%;width: 29%;} .works-textblock-wrap{margin: 33vh 0 0 22vh;width: 39vh;line-height: 5.3vh;} #quick-nav{right: 3vh;bottom: -2.8vh;} .modes{left: 2.9vh;bottom: 0.5vh;} .popup{margin: 10vh auto auto;} .desk-icon-scroll {width: 5vh;height: 8.5vh;margin-left: -2vh;margin-top: 24vh;} .desk-icon-scroll:before {width: 1.3vh;height: 1.3vh;margin-left: -0.65vh;top: 1vh;border-radius: 50px;} .c-range__holder {margin-left: -2vh;} #warning-icon {right: 7%;} #contact-error-msg {width: 40%;margin-left: 30%;} #contact-error-msg p {font-size: 2.3vh;padding: 3vh 5%;} } @media screen and (min-aspect-ratio: 16/9) { .rescheck:before{content:"16 : 9";} h1{font-size: 8.5vh;letter-spacing:.05em;} h2{font-size:2vw;letter-spacing:3px;} h3{font-size: 2.5vh;letter-spacing:.1em;} h4{font-size:1.3vw;} h5{font-size:1vw;} .hello-block-wrapper{margin-left: 10%;width: 29%;} .world-block-wrapper{margin: 70% 0 0 15%;width: 26%;} .graduation{width: 73%;} .future{width: 69%;padding: 57% 0 15% 17%;} .works-textblock-wrap{margin: 33vh 0 0 22vh;width: 54vh;line-height: 5.3vh;} .lines-icon{margin-top: 16%;width: 70%;} .lcs-icon{width: 13%;margin-left: 7%;} .analog-digital{margin-top:3%;margin-left:auto;margin-right:auto;width: 59%;height:auto;} .eye-icon{margin-top:7%;width: 39%;height:40%;} .player{height: 16vh;width: 16vh;margin-top: 155%;} .info h4{margin-top: 106%;font-size: 2.2vh;} #slider{width: 92%;height: 1.3vh;} .more-layer-back{height:120vw;} .more-gallery-svg,.more-layer-front{height:320vw!important;} .popup{margin: 10vh auto auto;} .close{top:2vh;right:2vh;} [type="submit"]{font-size:3vh;} .feedback-input{/* font-size:2vh; */} #contact-error-msg {width: 30%;margin-left: 35%;} #contact-error-msg p {font-size: 2.3vh;padding: 3vh 5%;} } @media screen and (min-aspect-ratio: 21/9) { .rescheck:before{content:"21 : 9";} .layer-front{height:775vw;} .layer-back{height:130vw;} } /*-------------MENU BAR QUERIES ----------------*/ @media only screen and (min-width: 300px) { .gears-wrapper,.large-gear,.small-gear,.m-letter{width:150px;height:150px;} } @media only screen and (min-width: 768px) { .gears-wrapper,.large-gear,.small-gear,.m-letter{width:200px;height:200px;} } @media only screen and (min-width: 1024px) { .gears-wrapper,.large-gear,.small-gear,.m-letter{width:250px;height:250px;} } @media only screen and (min-width: 1366px) { .gears-wrapper,.large-gear,.small-gear,.m-letter{width:300px;height:300px;} } @-webkit-keyframes desk-scroll { 0% {opacity: 0;} 30% {opacity: 1;} 100% {opacity: 0;transform: translateY(5vh);} } @keyframes desk-scroll { 0% {opacity: 0;} 30% {opacity: 1;} 100% {opacity: 0;transform: translateY(5vh);} }