@media (min-width: 3000px) {
   #from a {
      left: 50.02%;
      bottom: 14.7% !important;
   }
   .mac {
      width: 45%;
      height: 90%;
   }
}

@media (min-width: 2000px) {
   .mouse {
      top: 44%;
      width: 12%;
      height: 34%;
   }
   #from a {
      height: 4.7%;
      bottom: 15%;
   }

}

/* width till 1480px ----------------------------------- */
@media (max-width: 1480px) {
   h1 {
      font-size: 76px;
      letter-spacing: -3px;
   }
   .wrapper span {font-size: 50px;}
   .wrapper h2 {font-size: 90px;}   
   #software .wrapper h3 {font-size: 80px;}
   #software .wrapper span {font-size: 50px;}
   form {padding: 10px 15px;}
   label {padding: 5px 0 0 0;}
   input, textarea {
      padding: 5px 15px;
      width: 70%;
   }
   textarea {height: 60px;}
   form span {padding: 5px 0;}
   button {
      padding: 8px 20px;
      font-size: 16px;
   }

}

@media (min-width: 843px) and (max-width: 1200px) and (orientation: landscape) {
   #from {height: 150vh;}
   #software .wrapper h3 {font-size: 70px;}
   #software .wrapper p {
      width: 90%;
      font-size: 20px;
   }
   .mac {
      width: 42%;
      right: 2%;
      bottom: 2%;
   }
}

@media (min-width: 481px) and (max-width: 842px) and (orientation: landscape) {
   #header {padding-top: 10px;}
   #header a {font-size: 40px;}
   h1 {
      font-size: 45px;
      letter-spacing: -3px;
   }
   h1 em {-webkit-text-stroke-width: 1px;}
   #banner a {
      width: 15%;
      height: 15%;
      transform: translate(-50%,0);
   }
   @keyframes vicemove {
       0%{transform: translate(-50%,0) scale(1,1);}
      30%{transform: translate(-50%,0) scale(1.2,1.2);}
      60%{transform: translate(-50%,0) scale(1,1);}
   }
   #from:before, #from a {display: none;}
   #from, #software {font-size: 18px;}
   #from .wrapper span, #software .wrapper span {font-size: 40px;}
   .mouse {height: 32%;}
   .mac {display: none;}
   #software .wrapper {width: 86%;}
   #software .wrapper h3 {font-size: 44px;}
   #software .wrapper p {
      width: 100%;
      margin: 10px 0;
   }
}


/* mobile width till 767px ----------------------------------- */
@media (max-width: 767px){
   
   h1 {
      font-size: 42px;
      letter-spacing: -3px;
   }
   h1 em {-webkit-text-stroke-width: 1px;}
   h1 em:before {
      top: -10px;
      left: -14px;
   }
   #banner a {
      width: 15%;
      height: 15%;
      transform: translate(-50%,0);
   }
   @keyframes vicemove {
       0%{transform: translate(-50%,0) scale(1,1);}
      30%{transform: translate(-50%,0) scale(1.2,1.2);}
      60%{transform: translate(-50%,0) scale(1,1);}
   }
   #from, #software {font-size: 18px;}
   #from .wrapper span, #software .wrapper span {font-size: 40px;}
   #from:before {
      bottom: 3%;
      width: 86%;
   }
   #from a {
      width: 2.8%;
      height: 1.7%;
      left: 68.5%;
      bottom: 5.3%;
   }
   #software .wrapper {width: 86%;}
   #software .wrapper h3 {font-size: 44px;}
   #software .wrapper p {
      width: 100%;
      margin: 10px 0;
   }
   .mac {z-index: 5;}
   .mac p {
      font-size: 10px;
      bottom: 0%;
      left: 11%;
      width: 80%;
      opacity: .7;
   }
   form {
      font-size: 12px;
      bottom: 0;
      left: -70%;
      width: 174%;
      z-index: 7;
      padding: 15px;
   }
   input, textarea {width: 100%;}
   footer {
      font-size: 12px;
      padding: 30px 0;
   }
   
}


/* mobile width min 420px to 667px ----------------------------------- */
@media (min-width: 420px) and (max-width: 667px) {
   #header {padding-top: 10px;}
   #header a {font-size: 40px;}
   #from:before, #from a {display: none;}
   .mac {background: none;}

}




/* ----------------------------------------------------------------- tom 2021 */