@media only screen and (max-width:1920px) and (min-width:1540px){
   .mobile-home-screen{
      display: none;
   }
   .home-screen{
   display: block;
   }
   .mobile-splash{
      display: none;
   }
   
   .home-screen{
      position: relative;
      top: 0;
      left: 0;
      
     
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-image: url(images/home-screen-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center ;
      object-fit: cover;
      background-color: black;
      background-attachment: fixed;
      animation: fadeIn 0.5s;
      
      opacity: 0;
   
      
    
   }

   .sock {
      position: absolute;
      width: 16%;
      height: auto;
      top: 4.6%;
      left: 18.5%;
      transition: opacity 0.5s ease;
   }

   .tele {
      position: absolute;
      width: 32%;
      bottom: 0;
      left: 0;
      transition: opacity 0.5s ease;
   }

   .sticky-1 {
      position: absolute;
      width: 14%;
      height: auto;
      top: 30%;
      left: 43%;
      transition: transform 0.5s ease-in-out;
      transform: scale(1);
   }

   .demo-folder {
      position: absolute;
      top: 360px;
      left: 40px;
      width: 190px;
      height: auto;
   }

   .power-off {
      position: absolute;
      bottom: 100px;
      right: 60px;
      width: 150px;
      height: auto;
  }

   .demos-popup {
      width: 75%;
      height: auto;
      position: fixed;
      top: 100%;
      left: 0;
      transition: top 0.5s ease;
      z-index: 20;
   }

   #demos-close img {
      width: 80px;
      height: auto;
   }

   #magazine-popup {
      width: 90%;
      height: auto;
      position: fixed;
      top: 100%;
      right: 0;
      display: flex;
      justify-content: end;
      align-items: start;
      transition: top 0.5s ease;
      z-index: 10;
   }

   #mag-cross {
      position: absolute;
      top: 6.5%;
      right: 15.5%;
   }

   #mag-cross img {
      width: 100%;
      height: auto;
   }

   #AppleMusic {
      position: absolute;
      top: 36%;
      left: 6%;
      width: 200px;
      height: auto;
   }

   #AppleMusic img {
      width: 100%;
      height: auto;
   }

   #YtMusic {
      position: absolute;
      top: 42%;
      left: 6%;
      width: 200px;
      height: auto;
   }

   #YtMusic img {
      width: 100%;
      height: auto;
   }

   #spotify {
      position: absolute;
      top: 48.5%;
      left: 6%;
      width: 200px;
      height: auto;
   }

   #spotify img {
      width: 100%;
      height: auto;
   }

   #amazonMusic {
      position: absolute;
      top: 54.5%;
      left: 6%;
      width: 200px;
      height: auto;
   }

   #amazonMusic img {
      width: 100%;
      height: auto;
   }

   #insta {
      position: absolute;
      top: 37.5%;
      left: 24%;
      width: 280px;
      height: auto;
   }

   #insta img {
      width: 100%;
      height: auto;
   }

   #fbAlt {
      position: absolute;
      top: 42.5%;
      left: 24%;
      width: 280px;
      height: auto;
   }

   #fbAlt img {
      width: 100%;
      height: auto;
   }

   #yt {
      position: absolute;
      top: 48.5%;
      left: 25%;
      width: 300px;
      height: auto;
   }

   #yt img {
      width: 100%;
      height: auto;
   }

   #disc {
      position: absolute;
      top: 53%;
      left: 25%;
      width: 300px;
      height: auto;
   }

   #disc img {
      width: 100%;
      height: auto;
   }

   .demo-folder {
      position: absolute;
      top: 360px;
      left: 40px;
      width: 190px;
      height: auto;
  }

   #demo1 {
      position: absolute;
      top: 22%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo2 {
      position: absolute;
      top: 22%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo3 {
      position: absolute;
      top: 22%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo4 {
      position: absolute;
      top: 22%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo5 {
      position: absolute;
      top: 22%;
      left: 82.5%;
      width: 11%;
      height: auto;
   }

   #demo6 {
      position: absolute;
      top: 50%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo7 {
      position: absolute;
      top: 50%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo8 {
      position: absolute;
      top: 50%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo9 {
      position: absolute;
      top: 50%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo10 {
      position: absolute;
      top: 50%;
      left: 82.5%;
      width: 11.5%;
      height: auto;
   }

   .demos:hover {
      transition: transform 0.3s ease-in-out;
      transform: scale(1.05);
   }
}



/* @media screen and (max-width:1920px) and (min-height:1200px) {
   .tele {
      position: absolute;
      width: 30%;
      bottom: 0;
      left: 0;
      transition: opacity 0.5s ease;
   }

   .sock {
      position: absolute;
      width: 18%;
      height: auto;
      top: 4.6%;
      left: 15%;
      transition: opacity 0.5s ease;
   }

   .demo-folder {
      position: absolute;
      top: 390px;
      left: 40px;
      width: 190px;
      height: auto;
   }

   #magazine-popup {
      width: 100%;
      height: auto;
      position: fixed;
      top: 100%;
      right: 0;
      display: flex;
      justify-content: end;
      align-items: start;
      transition: top 0.5s ease;
      z-index: 10;
   }
} */





@media only screen and (max-width:1440px) {
   .mobile-home-screen{
      display: none;
   }
   .home-screen{
   display: block;
   }
   .mobile-splash{
      display: none;
   }
   
   .home-screen{
      position: relative;
      top: 0;
      left: 0;
      
     
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-image: url(images/home-screen-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center ;
      object-fit: cover;
      background-color: black;
      background-attachment: fixed;
      animation: fadeIn 0.5s;
      opacity: 0;
   
      
    
   }

   .tele {
      position: absolute;
      width: 30%;
      bottom: 0;
      left: 0;
      transition: opacity 0.5s ease;
   }

   .sock {
      position: absolute;
      width: 15%;
      height: auto;
      top: 5%;
      left: 19%;
      transition: opacity 0.5s ease;
  }

   .sticky-1 {
      position: absolute;
      width: 12%;
      height: auto;
      top: 32%;
      left: 44%;
      transition: transform 0.5s ease-in-out;
      transform: scale(1);
      
   }

   .demo-folder {
      position: absolute;
      top: 270px;
      left: 30px;
      width: 140px;
      height: auto;
      transition: transform 0.3s ease-in-out;
   }

   #AppleMusic {
      position: absolute;
      top: 36%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #AppleMusic img {
      width: 100%;
      height: auto;
   }

   #YtMusic {
      position: absolute;
      top: 42%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #YtMusic img {
      width: 100%;
      height: auto;
   }

   #spotify {
      position: absolute;
      top: 48.5%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #spotify img {
      width: 100%;
      height: auto;
   }

   #amazonMusic {
      position: absolute;
      top: 54.5%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #amazonMusic img {
      width: 100%;
      height: auto;
   }

   #insta {
      position: absolute;
      top: 37.5%;
      left: 24%;
      width: 200px;
      height: auto;
   }

   #insta img {
      width: 100%;
      height: auto;
   }

   #fbAlt {
      position: absolute;
      top: 42.5%;
      left: 24%;
      width: 200px;
      height: auto;
   }

   #fbAlt img {
      width: 100%;
      height: auto;
   }

   #yt {
      position: absolute;
      top: 48.5%;
      left: 25%;
      width: 220px;
      height: auto;
   }

   #yt img {
      width: 100%;
      height: auto;
   }

   #disc {
      position: absolute;
      top: 53%;
      left: 25%;
      width: 220px;
      height: auto;
   }

   #disc img {
      width: 100%;
      height: auto;
   }

   #magazine-popup {
      width: 90%;
      height: auto;
      position: fixed;
      top: 100%;
      right: 0;
      display: flex;
      justify-content: end;
      align-items: start;
      transition: top 0.5s ease;
      z-index: 10;
   }

   #mag-cross {
      position: absolute;
      top: 6.5%;
      right: 14.2%;
   }

   #mag-cross img {
      width: 75%;
      height: auto;
   }

   .power-off {
      position: absolute;
      bottom: 80px;
      right: 60px;
      width: 110px;
      height: auto;
   }

   .demos-popup {
      width: 75%;
      height: auto;
      position: fixed;
      top: 100%;
      left: 0;
      transition: top 0.5s ease;
      z-index: 20;
   }
   #demos-close img {
      width: 60px;
      height: auto;
  }

   #demo1 {
      position: absolute;
      top: 22%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo2 {
      position: absolute;
      top: 22%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo3 {
      position: absolute;
      top: 22%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo4 {
      position: absolute;
      top: 22%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo5 {
      position: absolute;
      top: 22%;
      left: 82.5%;
      width: 11%;
      height: auto;
   }

   #demo6 {
      position: absolute;
      top: 50%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo7 {
      position: absolute;
      top: 50%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo8 {
      position: absolute;
      top: 50%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo9 {
      position: absolute;
      top: 50%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo10 {
      position: absolute;
      top: 50%;
      left: 82.5%;
      width: 11.5%;
      height: auto;
   }
}

@media only screen and (max-width:1360px)  {
   .mobile-home-screen{
      display: none;
   }
   .home-screen{
   display: block;
   }
   .mobile-splash{
      display: none;
   }
   
   .home-screen{
      position: relative;
      top: 0;
      left: 0;
      
     
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-image: url(images/home-screen-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center ;
      object-fit: cover;
      background-color: black;
      background-attachment: fixed;
      animation: fadeIn 0.5s;
      opacity: 0;
   
      
    
   }

   .tele {
      position: absolute;
      width: 32%;
      bottom: 0;
      left: 0;
      transition: opacity 0.5s ease;
   }

   .sock {
      position: absolute;
      width: 15%;
      height: auto;
      top: 5%;
      left: 19.5%;
      transition: opacity 0.5s ease;
  }

   .sticky-1 {
      position: absolute;
      width: 12%;
      height: auto;
      top: 32%;
      left: 44%;
      transition: transform 0.5s ease-in-out;
      transform: scale(1);
   }

   .demo-folder {
      position: absolute;
      top: 260px;
      left: 30px;
      width: 130px;
      height: auto;
      transition: transform 0.3s ease-in-out;
   }

   #AppleMusic {
      position: absolute;
      top: 36%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #AppleMusic img {
      width: 100%;
      height: auto;
   }

   #YtMusic {
      position: absolute;
      top: 42%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #YtMusic img {
      width: 100%;
      height: auto;
   }

   #spotify {
      position: absolute;
      top: 48.5%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #spotify img {
      width: 100%;
      height: auto;
   }

   #amazonMusic {
      position: absolute;
      top: 54.5%;
      left: 6%;
      width: 150px;
      height: auto;
   }

   #amazonMusic img {
      width: 100%;
      height: auto;
   }

   #insta {
      position: absolute;
      top: 37.5%;
      left: 24%;
      width: 200px;
      height: auto;
   }

   #insta img {
      width: 100%;
      height: auto;
   }

   #fbAlt {
      position: absolute;
      top: 42.5%;
      left: 24%;
      width: 200px;
      height: auto;
   }

   #fbAlt img {
      width: 100%;
      height: auto;
   }

   #yt {
      position: absolute;
      top: 48.5%;
      left: 25%;
      width: 220px;
      height: auto;
   }

   #yt img {
      width: 100%;
      height: auto;
   }

   #disc {
      position: absolute;
      top: 53%;
      left: 25%;
      width: 220px;
      height: auto;
   }

   #disc img {
      width: 100%;
      height: auto;
   }

   #magazine-popup {
      width: 90%;
      height: auto;
      position: fixed;
      top: 100%;
      right: 0;
      display: flex;
      justify-content: end;
      align-items: start;
      transition: top 0.5s ease;
      z-index: 10;
   }

   #mag-cross {
      position: absolute;
      top: 6.5%;
      right: 13.6%;
   }

   #mag-cross img {
      width: 70%;
      height: auto;
   }

   .power-off {
      position: absolute;
      bottom: 80px;
      right: 60px;
      width: 110px;
      height: auto;
   }

   .demos-popup {
      width: 70%;
      height: auto;
      position: fixed;
      top: 100%;
      left: 0;
      transition: top 0.5s ease;
      z-index: 20;
  }
  #demos-close img {
   width: 52px;
   height: auto;
}

   #demo1 {
      position: absolute;
      top: 22%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo2 {
      position: absolute;
      top: 22%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo3 {
      position: absolute;
      top: 22%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo4 {
      position: absolute;
      top: 22%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo5 {
      position: absolute;
      top: 22%;
      left: 82.5%;
      width: 11%;
      height: auto;
   }

   #demo6 {
      position: absolute;
      top: 50%;
      left: 22%;
      width: 11%;
      height: auto;
   }



   #demo7 {
      position: absolute;
      top: 50%;
      left: 37.5%;
      width: 11%;
      height: auto;

   }



   #demo8 {
      position: absolute;
      top: 50%;
      left: 52.5%;
      width: 11%;
      height: auto;
   }



   #demo9 {
      position: absolute;
      top: 50%;
      left: 67.5%;
      width: 11%;
      height: auto;
   }



   #demo10 {
      position: absolute;
      top: 50%;
      left: 82.5%;
      width: 11.5%;
      height: auto;
   }
}