.computer{
    z-index:1;
    width:150px;
    height:180px;
    position:absolute;
    left:calc(75% - 75px);
    top:calc(60vh - 90px);
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:rotatex(-30deg) rotatey(45deg);
    -ms-transform:rotatex(-30deg) rotatey(45deg);
    -o-transform:rotatex(-30deg) rotatey(45deg);
    -webkit-transform:rotatex(-30deg) rotatey(45deg);
    transform: rotateX(-30deg) rotateY(45deg) scale(1.5);

  }
  .screen{
    z-index:1;
    width:150px;
    height:130px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(0px);
    -ms-transform:translatey(0px);
    -o-transform:translatey(0px);
    -webkit-transform:translatey(0px);
    transform:translatey(0px);
  }
  .square{
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  .front{
    -moz-transform:translateZ(75px);
    -ms-transform:translateZ(75px);
    -o-transform:translateZ(75px);
    -webkit-transform:translateZ(75px);
    transform:translateZ(75px);
    background-color:#c6b5a4;
  }
  .back{
    -moz-transform:translateZ(-75px);
    -ms-transform:translateZ(-75px);
    -o-transform:translateZ(-75px);
    -webkit-transform:translateZ(-75px);
    transform:translateZ(-75px);
    background-color:#dbc6b5;
  }
  .top{
    -moz-transform:rotatex(90deg) translatez(75px);
    -ms-transform:rotatex(90deg) translatez(75px);
    -o-transform:rotatex(90deg) translatez(75px);
    -webkit-transform:rotatex(90deg) translatez(75px);
    transform:rotatex(90deg) translatez(75px);
    background-color:#EEDEC8;
    width:100%;
    height:150px;
  }
  .left{
    -moz-transform: rotatey(-90deg) translatez(55px);
    -ms-transform: rotatey(-90deg) translatez(55px);
    -o-transform: rotatey(-90deg) translatez(55px);
    -webkit-transform: rotatey(-90deg) translatez(55px);
    transform: rotatey(-90deg) translatez(55px);
    background-color:#282828;
  }
  .right{
    -moz-transform: rotatey(-90deg) translatez(-75px);
    -ms-transform: rotatey(-90deg) translatez(-75px);
    -o-transform: rotatey(-90deg) translatez(-75px);
    -webkit-transform: rotatey(-90deg) translatez(-75px);
    transform: rotatey(-90deg) translatez(-75px);
    background-color:#c6b5a4;
    padding:15%;
    box-sizing:border-box;
  }
  .intake{
    width:5%;
    height:80%;
    float:left;
    background-color:#B4A495;
    margin:0 2.5%;
  }
  .left1{
    width:130px;
    height:110px;
    -moz-transform: rotatey(-90deg) translatez(70px);
    -ms-transform: rotatey(-90deg) translatez(70px);
    -o-transform: rotatey(-90deg) translatez(70px);
    -webkit-transform: rotatey(-90deg) translatez(70px);
    transform: rotatey(-90deg) translatez(70px);
    background-color:transparent;
    border:solid 10px #4d4d4d;
  }
  .progressbar{
    width:50px;
    height:6px;
    background-color:transparent;
    position:absolute;
    top:calc(50% - 7px);
    left:calc(50% - 29px);
    border:2px solid #E9C46A;
  }
  .progressbar:after{
    content:"";
    width:60%;
    height:100%;
    background-color:#E9C46A;
    position:absolute;
    top:0;
    left:0;
  }
  .back1{
    width:15px;
    height:110px;
    -moz-transform:translateZ(-65px) translatey(10px) translatex(5px);
    -ms-transform:translateZ(-65px) translatey(10px) translatex(5px);
    -o-transform:translateZ(-65px) translatey(10px) translatex(5px);
    -webkit-transform:translateZ(-65px) translatey(10px) translatex(5px);
    transform:translateZ(-65px) translatey(10px) translatex(5px);
    background-color:#4d4d4d;
  }
  .front1{
    width:15px;
    height:110px;
    -moz-transform:translateZ(65px) translatey(10px) translatex(5px);
    -ms-transform:translateZ(65px) translatey(10px) translatex(5px);
    -o-transform:translateZ(65px) translatey(10px) translatex(5px);
    -webkit-transform:translateZ(65px) translatey(10px) translatex(5px);
    transform:translateZ(65px) translatey(10px) translatex(5px);
    background-color:#454545;
  }
  .bottom1{
    -moz-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -ms-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -o-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -webkit-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    transform:rotatex(90deg) translatez(-55px) translatex(5px);
    background-color:#565656;
    width:15px;
    height:130px;
  }
  .top1{
    -moz-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -ms-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -o-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    -webkit-transform:rotatex(90deg) translatez(-55px) translatex(5px);
    transform:rotatex(90deg) translatez(55px) translatex(5px);
    background-color:#454545;
    width:15px;
    height:130px;
  }
  .screenbottom{
    z-index:0;
    width:150px;
    height:40px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(130px);
    -ms-transform:translatey(130px);
    -o-transform:translatey(130px);
    -webkit-transform:translatey(130px);
    transform:translatey(130px);
  }
  .front2{
    -moz-transform:translateZ(75px);
    -ms-transform:translateZ(75px);
    -o-transform:translateZ(75px);
    -webkit-transform:translateZ(75px);
    transform:translateZ(75px);
    background-color:#c6b5a4;
  }
  .top2{
    -moz-transform:rotatex(90deg) translatez(75px);
    -ms-transform:rotatex(90deg) translatez(75px);
    -o-transform:rotatex(90deg) translatez(75px);
    -webkit-transform:rotatex(90deg) translatez(75px);
    transform:rotatex(90deg) translatez(75px);
    background-color:#eedec8;
    width:100%;
    height:150px;
  }
  .left2{
    -moz-transform: rotatey(-90deg) translatez(75px);
    -ms-transform: rotatey(-90deg) translatez(75px);
    -o-transform: rotatey(-90deg) translatez(75px);
    -webkit-transform: rotatey(-90deg) translatez(75px);
    transform: rotatey(-90deg) translatez(75px);
    background-color:#dbc6b5;
  }
  .right2{
    -moz-transform: rotatey(-90deg) translatez(-75px);
    -ms-transform: rotatey(-90deg) translatez(-75px);
    -o-transform: rotatey(-90deg) translatez(-75px);
    -webkit-transform: rotatey(-90deg) translatez(-75px);
    transform: rotatey(-90deg) translatez(-75px);
    background-color:#c6b5a4;
  }
  .back2{
    -moz-transform:translateZ(-75px);
    -ms-transform:translateZ(-75px);
    -o-transform:translateZ(-75px);
    -webkit-transform:translateZ(-75px);
    transform:translateZ(-75px);
    background-color:#dbc6b5;
  }
  .bottom2{
    -moz-transform:rotatex(90deg) translatez(35px);
    -ms-transform:rotatex(90deg) translatez(35px);
    -o-transform:rotatex(90deg) translatez(35px);
    -webkit-transform:rotatex(90deg) translatez(35px);
    transform:rotatex(90deg) translatez(35px);
    background-color:#B4A495;
    width:100%;
    height:150px;
  }
  .screenbottombottom{
    z-index:2;
    width:130px;
    height:20px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(170px) translatex(10px);
    -ms-transform:translatey(170px) translatex(10px);
    -o-transform:translatey(170px) translatex(10px);
    -webkit-transform:translatey(170px) translatex(10px);
    transform:translatey(170px) translatex(10px);
  }
  .bottom3{
    -moz-transform:rotatex(90deg) translatez(45px);
    -ms-transform:rotatex(90deg) translatez(45px);
    -o-transform:rotatex(90deg) translatez(45px);
    -webkit-transform:rotatex(90deg) translatez(45px);
    transform:rotatex(90deg) translatez(45px);
    background-color:#65504d;
    box-shadow:
      1px 1px 0px #65504d,
      2px 2px 0px #65504d,
      3px 3px 0px #65504d,
      4px 4px 0px #65504d,
      5px 5px 0px #65504d,
      6px 6px 0px #65504d,
      7px 7px 0px #65504d,
      8px 8px 0px #65504d,
      9px 9px 0px #65504d,
      10px 10px 0px #65504d,
      11px 11px 0px #65504d,
      12px 12px 0px #65504d,
      13px 13px 0px #65504d,
      14px 14px 0px #65504d,
      15px 15px 0px #65504d,
      16px 16px 0px #65504d,
      17px 17px 0px #65504d,
      18px 18px 0px #65504d,
      19px 19px 0px #65504d,
      20px 20px 0px #65504d,
      21px 21px 0px #65504d,
      22px 22px 0px #65504d,
      23px 23px 0px #65504d,
      24px 24px 0px #65504d,
      25px 25px 0px #65504d,
      26px 26px 0px #65504d,
      27px 27px 0px #65504d,
      28px 28px 0px #65504d,
      29px 29px 0px #65504d;
    width:100%;
    height:130px;
  }
  .front3{
    -moz-transform:translateZ(65px);
    -ms-transform:translateZ(65px);
    -o-transform:translateZ(65px);
    -webkit-transform:translateZ(65px);
    transform:translateZ(65px);
    background-color:#bcac9c;
  }
  .back3{
    -moz-transform:translateZ(-65px);
    -ms-transform:translateZ(-65px);
    -o-transform:translateZ(-65px);
    -webkit-transform:translateZ(-65px);
    transform:translateZ(-65px);
    background-color:#d0bcac;
  }
  .left3{
    -moz-transform: rotatey(-90deg) translatez(65px);
    -ms-transform: rotatey(-90deg) translatez(65px);
    -o-transform: rotatey(-90deg) translatez(65px);
    -webkit-transform: rotatey(-90deg) translatez(65px);
    transform: rotatey(-90deg) translatez(65px);
    background-color:#d0bcac;
  }
  .right3{
    -moz-transform: rotatey(-90deg) translatez(-65px);
    -ms-transform: rotatey(-90deg) translatez(-65px);
    -o-transform: rotatey(-90deg) translatez(-65px);
    -webkit-transform: rotatey(-90deg) translatez(65px);
    transform: rotatey(-90deg) translatez(-65px);
    background-color:#bcac9c;
  }
  .keyboard{
    z-index:0;
    width:80px;
    height:20px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(170px) translatex(-120px);
    -ms-transform:translatey(170px) translatex(-120px);
    -o-transform:translatey(170px) translatex(-120px);
    -webkit-transform:translatey(170px) translatex(-120px);
    transform:translatey(170px) translatex(-120px);
  }
  .front4{
    -moz-transform:translateZ(75px);
    -ms-transform:translateZ(75px);
    -o-transform:translateZ(75px);
    -webkit-transform:translateZ(75px);
    transform:translateZ(75px);
    background-color:#c6b5a4;
  }
  .back4{
    -moz-transform:translateZ(-75px);
    -ms-transform:translateZ(-75px);
    -o-transform:translateZ(-75px);
    -webkit-transform:translateZ(-75px);
    transform:translateZ(-75px);
    background-color:#dbc6b5;
  }
  .bottom4{
    -moz-transform:rotatex(90deg) translatez(55px);
    -ms-transform:rotatex(90deg) translatez(55px);
    -o-transform:rotatex(90deg) translatez(55px);
    -webkit-transform:rotatex(90deg) translatez(55px);
    transform:rotatex(90deg) translatez(55px);
    background-color:#65504d;
    box-shadow:1px 1px 0px #65504d,2px 2px 0px #65504d,3px 3px 0px #65504d,4px 4px 0px #65504d,5px 5px 0px #65504d,6px 6px 0px #65504d,7px 7px 0px #65504d,8px 8px 0px #65504d,9px 9px 0px #65504d,10px 10px 0px #65504d;
    width:100%;
    height:150px;
  }
  .top4{
    -moz-transform:rotatex(90deg) translatez(75px);
    -ms-transform:rotatex(90deg) translatez(75px);
    -o-transform:rotatex(90deg) translatez(75px);
    -webkit-transform:rotatex(90deg) translatez(75px);
    transform:rotatex(90deg) translatez(75px);
    background-color:#eedec8;
    width:100%;
    height:150px;
  }
  .left4{
    -moz-transform: rotatey(-90deg) translatez(75px);
    -ms-transform: rotatey(-90deg) translatez(75px);
    -o-transform: rotatey(-90deg) translatez(75px);
    -webkit-transform: rotatey(-90deg) translatez(75px);
    transform: rotatey(-90deg) translatez(75px);
    background-color:#dbc6b5;
    width:150px;
  }
  .right4{
    -moz-transform: rotatey(-90deg) translatez(-5px);
    -ms-transform: rotatey(-90deg) translatez(-5px);
    -o-transform: rotatey(-90deg) translatez(-5px);
    -webkit-transform: rotatey(-90deg) translatez(-5px);
    transform: rotatey(-90deg) translatez(-5px);
    background-color:#c6b5a4;
    width:150px;
  }
  .keyboardkeys{
    z-index:0;
    width:60px;
    height:10px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(160px) translatex(-110px) translatez(-20px);;
    -ms-transform:translatey(160px) translatex(-110px) translatez(-20px);;
    -o-transform:translatey(160px) translatex(-110px) translatez(-20px);;
    -webkit-transform:translatey(160px) translatex(-110px) translatez(-20px);;
    transform:translatey(160px) translatex(-110px) translatez(-20px);
  }
  .bottom5{
    -moz-transform:rotatex(90deg) translatez(30px);
    -ms-transform:rotatex(90deg) translatez(30px);
    -o-transform:rotatex(90deg) translatez(30px);
    -webkit-transform:rotatex(90deg) translatez(30px);
    transform:rotatex(90deg) translatez(30px);
    background-color:transparent;
    box-shadow:1px 1px 0px #b4a998,2px 2px 0px #b4a998,3px 3px 0px #b4a998,4px 4px 0px #b4a998,5px 5px 0px #b4a998;
    width:100%;
    height:80px;
  }
  .front5{
    -moz-transform:translateZ(40px);
    -ms-transform:translateZ(40px);
    -o-transform:translateZ(40px);
    -webkit-transform:translateZ(40px);
    transform:translateZ(40px);
    background-color:#454545;
  }
  .back5{
    -moz-transform:translateZ(-40px);
    -ms-transform:translateZ(-40px);
    -o-transform:translateZ(-40px);
    -webkit-transform:translateZ(-40px);
    transform:translateZ(-40px);
    background-color:#4d4d4d;
  }
  .top5{
    -moz-transform:rotatex(90deg) translatez(40px);
    -ms-transform:rotatex(90deg) translatez(40px);
    -o-transform:rotatex(90deg) translatez(40px);
    -webkit-transform:rotatex(90deg) translatez(40px);
    transform:rotatex(90deg) translatez(40px);
    background-color:#565656;
    width:100%;
    height:80px;
  }
  .left5{
    -moz-transform: rotatey(-90deg) translatez(40px);
    -ms-transform: rotatey(-90deg) translatez(40px);
    -o-transform: rotatey(-90deg) translatez(40px);
    -webkit-transform: rotatey(-90deg) translatez(40px);
    transform: rotatey(-90deg) translatez(40px);
    background-color:#4d4d4d;
    width:80px;
  }
  .right5{
    -moz-transform: rotatey(-90deg) translatez(-20px);
    -ms-transform: rotatey(-90deg) translatez(-20px);
    -o-transform: rotatey(-90deg) translatez(-20px);
    -webkit-transform: rotatey(-90deg) translatez(-20px);
    transform: rotatey(-90deg) translatez(-20px);
    background-color:#454545;
    width:80px;
  }
  .numpad{
    z-index:0;
    width:60px;
    height:10px;
    position:absolute;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-transform:translatey(160px) translatex(-110px) translatez(45px);
    -ms-transform:translatey(160px) translatex(-110px) translatez(45px);
    -o-transform:translatey(160px) translatex(-110px) translatez(45px);
    -webkit-transform:translatey(160px) translatex(-110px) translatez(45px);
    transform:translatey(160px) translatex(-110px) translatez(45px);
  }
  .bottom6{
    -moz-transform:rotatex(90deg) translatez(5px);
    -ms-transform:rotatex(90deg) translatez(5px);
    -o-transform:rotatex(90deg) translatez(5px);
    -webkit-transform:rotatex(90deg) translatez(5px);
    transform:rotatex(90deg) translatez(5px);
    background-color:transparent;
    box-shadow:1px 1px 0px #b4a998,2px 2px 0px #b4a998,3px 3px 0px #b4a998,4px 4px 0px #b4a998,5px 5px 0px #b4a998;
    width:100%;
    height:30px;
  }
  .front6{
    -moz-transform:translateZ(15px);
    -ms-transform:translateZ(15px);
    -o-transform:translateZ(15px);
    -webkit-transform:translateZ(15px);
    transform:translateZ(15px);
    background-color:#454545;
  }
  .back6{
    -moz-transform:translateZ(-15px);
    -ms-transform:translateZ(-15px);
    -o-transform:translateZ(-15px);
    -webkit-transform:translateZ(-15px);
    transform:translateZ(-15px);
    background-color:#4d4d4d;
  }
  .top6{
    -moz-transform:rotatex(90deg) translatez(15px);
    -ms-transform:rotatex(90deg) translatez(15px);
    -o-transform:rotatex(90deg) translatez(15px);
    -webkit-transform:rotatex(90deg) translatez(15px);
    transform:rotatex(90deg) translatez(15px);
    background-color:#565656;
    width:100%;
    height:30px;
  }
  .left6{
    -moz-transform: rotatey(-90deg) translatez(15px);
    -ms-transform: rotatey(-90deg) translatez(15px);
    -o-transform: rotatey(-90deg) translatez(15px);
    -webkit-transform: rotatey(-90deg) translatez(15px);
    transform: rotatey(-90deg) translatez(15px);
    background-color:#4d4d4d;
    width:30px;
  }
  .right6{
    -moz-transform: rotatey(-90deg) translatez(-45px);
    -ms-transform: rotatey(-90deg) translatez(-45px);
    -o-transform: rotatey(-90deg) translatez(-45px);
    -webkit-transform: rotatey(-90deg) translatez(-45px);
    transform: rotatey(-90deg) translatez(-45px);
    background-color:#454545;
    width:30px;
  }
  .brownpart{
    position:absolute;
    width:130px;
    left:10px;
    top:10px;
    height:20px;
    background-color:#E76F51;
  }
  .disc{
    position:absolute;
    width:30px;
    left:10px;
    top:calc(50% - 2.5px);
    height:5px;
    background-color:#282828;
  }
  .ui{
    position:absolute;
    left:calc(75% - 250px);
    top:calc(58% - 200px);
    z-index:9999;
    width:500px;
    height:400px;
  }
  #rotatex{
    position:absolute;
    right:-150px;
    top:50%;
    -webkit-transform:rotate(270deg); 
    -moz-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    transform:rotate(270deg);
  }
  #rotatey{
    position:absolute;
    left:calc(50% - 150px);
  }
  input[type="range"]{ 
    -webkit-appearance: none;
    cursor: pointer;
    width: 300px;  
    background-color: rgba(255,255,255,0.2); 
       
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none; 
    width: 10px; 
    height: 10px; 
    background-color:#565656;   
  
  }