@media only screen and (max-height: 900px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (max-height: 800px) {
  html {
    font-size: 14px;
  }
}
@media only screen and (max-height: 700px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-height: 600px) {
  html {
    font-size: 12px;
  }
}

@media only screen and (max-height: 500px) {
  html {
    font-size: 9px;
  }
}

@media only screen and (max-height: 400px) {
  html {
    font-size: 8px;
  }
}

@media only screen and (max-height: 300px) {
  html {
    font-size: 7px;
  }
}

/** Width based font sizes **/
@media only screen and (max-width: 1400px) and (min-height: 900px) {
  html {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1200px) and (min-height: 900px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (max-width: 1100px) and (min-height: 700px) {
  html {
    font-size: 13px;
  }

  .box-content .leftcontent-container {
    padding-right: 7.5rem;
  }
}

@media only screen and (max-width: 900px) and (min-height: 600px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (max-width: 800px) and (min-height: 500px) {
  html {
    font-size: 9px;
  }
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 11px;
  }
}

@media only screen and (max-width: 400px) and (max-height: 650px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (max-width: 320px) {
  html {
    font-size: 9px;
  }
}