/* 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;}
.player-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;}
.player-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;}
.player-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);}
}