a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*font size*/
h1 {
  font-size: 110%;
}

h2 {
  font-size: 120%;
}

h3 {
  font-size: 130%;
}

h4 {
  font-size: 110%;
  font-weight: normal
}

h5 {
  font-size: 120%;
  font-weight: normal
}

h6 {
  font-size: 130%;
  font-weight: normal
}

.main {
  width: 93%;
}

@media only screen and (max-width:280px) and (min-width:300px) {
  body {
    font-size: 12px !important
  }

  .viewport {
    max-width: 320px
  }
}

@media only screen and (max-width:360px) and (min-width:320px) {
  body {
    font-size: 13px !important
  }

  .viewport {
    max-width: 320px
  }
}

@media only screen and (max-width:360px) and (min-width:350px) {
  body {
    font-size: 13px !important
  }

  .viewport {
    max-width: 360px
  }
}

@media only screen and (max-width:480px) and (min-width:380px) {
  body {
    font-size: 14px !important;
  }

  .viewport {
    max-width: 360px
  }
}

@media only screen and (max-width:480px) and (min-width:470px) {
  body {
    font-size: 14.5px !important;
  }

  .viewport {
    max-width: 320px
  }
}

@media only screen and (max-width:560px) and (min-width:480px) {
  body {
    font-size: 18px !important;
  }

  .viewport {
    max-width: 480px
  }
}

@media only screen and (max-width:560px) and (min-width:540px) {
  body {
    font-size: 18px !important;
  }

  .viewport {
    max-width: 540px
  }
}

@media only screen and (max-width:570px) and (min-width:560px) {
  body {
    font-size: 18px !important
  }

  .viewport {
    max-width: 480px
  }
}

@media only screen and (max-width:640px) and (min-width:570px) {
  body {
    font-size: 18px
  }

  .viewport {
    max-width: 480px
  }
}

@media only screen and (max-width:640px) and (min-width:630px) {
  body {
    font-size: 18px !important;
  }

  .viewport {
    max-width: 480px
  }
}

@media only screen and (max-width:710px) and (min-width:640px) {
  body {
    font-size: 24px !important
  }

  .viewport {
    max-width: 640px
  }

}