@media only screen and (min-width: 320px) and (max-width: 768px) {

    html, body {
        overflow-x:hidden;
      } 

      body {
        font-family: 'Inter', sans-serif;
        background-color: #fff;
        outline: none !important;
        font-weight: 300;
        color: #000 !important;
        -webkit-transition: all 0.2s ease-in-out;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none;
        margin: auto;
        direction:ltr;
        overflow-x: hidden !important;
    }


    .left{
      float: none !important;
      width: 100%;
      height: 600px;
      background-image: url(../images/leftbg-mobil.jpg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      box-shadow: inset -20px -20px 50px 0 rgba(0, 0, 0, 0.1);
     }
  
     .right{
      float: none !important;
      width: 100%;
      height: 550px;
      padding-top: 40px;
      background-color: #fff;
      position: relative;
     }
  
     .right-content{
      width: 90%;
      height: auto;
      left:0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
     }
  
     .dewards-logo{
      width: 105px;
      height: 30px;
      position: absolute;
      left:0px;
      right: 0px;
      margin: auto;
      top: 10px;
      opacity: 0.4;
      cursor: pointer;
      transition: 0.7s;
     }
  
     .dewards-logo:hover{
      transition: 0.2s;
      opacity: 1;
      cursor: pointer;
     }
  
     .left-title{
      left:0px;
      right: 0px;
      top: 15%;
      width: 70%;
      height: 300px;
      position: absolute;
      margin: auto;
      text-align: center;
     }
  
     h1{
      font-size: 30px !important;
      font-weight: 700 !important;
      letter-spacing: -1px !important;
      color: #3578f5 !important;
      margin-top: 0px !important;
      padding-top: 0px !important;
      line-height: 25px !important;
      display: block !important;
     }
  
     h2{
      font-size: 20px !important;
      font-weight: 700 !important;
      letter-spacing: -1px !important;
      color: #000 !important;
      margin-top: 0px !important;
      padding-top: 0px !important;
      line-height: 20px !important;
      display: block !important;
     }
  
     h3{
      font-size: 35px !important;
      font-weight: 700 !important;
      letter-spacing: -1px !important;
      color: #000 !important;
      margin-top: 0px !important;
      padding-top: 0px !important;
      line-height: 30px !important;
      display: block !important;
     }
  
     h4{
      font-size: 16px !important;
      font-weight: 500 !important;
      letter-spacing: -0.5px !important;
      color: #999 !important;
      margin-top: 0px !important;
      padding-top: 0px !important;
      line-height:20px !important;
      display: block !important;
     }
  
     .stroke{
      width: 100px;
      height: 5px;
      background: rgb(71,118,237);
  background: linear-gradient(-90deg, rgba(71,118,237,1) 0%, rgba(4,45,151,1) 100%);
      border-radius: 10px;
     }
  
  
     .user-area{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px;
      width: auto;
      display: inline-block;
      margin: 10px auto auto auto;
      height: auto;
      padding: 10px 20px 10px 10px;
      background-color: #fff;
      text-align: left;
      border-radius: 15px;
     }
  
  
     .user-area2{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px;
      width: auto;
      width: 300px;
      margin: 10px auto auto auto;
      text-align: center;
      height: auto;
      padding: 10px 15px;
      background-color: #2453c9;
      text-align: center;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      border-radius: 15px;
     }
  
     .user-ico{
      width: 120px;
      margin: auto;
      height: auto;
      filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.15));
     }
  
     .user-title{
      width: 100%
      height: 40px;
      text-align: center;
      margin-top: 10px;
     }
  
     .clear{
      clear: both;
     }
  
     user-subtitle{
      color: #999;
      font-size: 15px;
      display: block;
      font-weight: 500;
      line-height: 16px;
      letter-spacing: -0.5px;
     }
  
     user-maintitle{
      color: #333;
      font-size: 17px;
      display: block;
      font-weight: 700;
      letter-spacing: -0.5px;
      line-height: 24px;
     }
  
  
     .field-label{
      font-size: 14px;
      color: rgba(0,0,0,0.6);
      font-weight: 500;
      margin-left: 10px;
      margin-bottom: 4px;
     }
  
     .field{
      border: 1px solid #ccc;
      border-radius: 15px;
      width: 100%;
      padding: 16px 25px 16px 45px;
      background-image: url(../images/user-ico-field.svg);
      background-repeat: no-repeat;
      background-position: left 15px center;
      background-size: auto 44%;
      transition: 0.2s;
      font-size: 17px;
     }
  
     .field:focus{
      padding: 16px 25px 16px 25px;
      border: 1px solid #2453c9;
      outline: 3px solid #4776ed;
      background-position: left -110px center;
      transition: 0.2s;
     }
  
     .field::placeholder{
      font-size: 14px;
      color: rgba(0,0,0,0.3);
     }
  
     .field2{
      border: 1px solid #ccc;
      border-radius: 15px;
      width: 100%;
      padding: 16px 25px 16px 45px;
      background-image: url(../images/pass-ico-field.svg);
      background-repeat: no-repeat;
      background-position: left 15px center;
      background-size: auto 40%;
      transition: 0.2s;
      font-size: 17px;
     }
  
     .field2:focus{
      padding: 16px 25px 16px 25px;
      border: 1px solid #2453c9;
      outline: 3px solid #4776ed;
      background-position: left -110px center;
      transition: 0.2s;
     }
  
     .field2::placeholder{
      font-size: 14px;
      color: rgba(0,0,0,0.3);
     }
  
  
     .send-button{
      border-radius: 15px;
      background-color: #2453c9;
      color: #fff;
      padding: 16px 20px 16px 20px;
      cursor: pointer;
      width: 100%;
      text-align: center;
      margin-top: 20px;
      display: inline-block;
      font-weight: 600;
     }
  
     .send-button:hover{
      background-color: #396ef4;
      cursor: pointer;
     }
  
     .send-button:active{
      background-color: #333;
      cursor: pointer;
     }


     .copyright{
      width: 100%;
      height: auto;
      padding: 30px;
      position: absolute;
      font-size: 13px;
      color: #999;
      left:0px;
      right: 0px;
      bottom: 0px;
      text-align: center;
     }
  


}