.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl{
  display: none !important;
}

html{
  font-size: 16px;
}

@media  screen and (max-width: 1920px){
  html{
    font-size: 16px;
  }
}

@media  screen and (max-width: 1680px){
  html{
    font-size: 15px;
  }
}

@media  screen and (max-width: 1440px){
  html{
    font-size: 14px;
  }
}

@media  screen and (max-width: 1366px){
  html{
    font-size: 13px;
  }
}

@media  screen and (max-width: 1280px){
  html{
    font-size: 13px;
  }
  .hide-xl{
    display: none !important;
  }
  .show-xl{
    display: block !important;
  }
}

@media(max-width: 1024px){
  html{
    font-size: 12px;
  }
  .hide-lg{
    display: none !important;
  }
  .show-lg{
    display: block !important;
  }
}

@media(max-width: 960px){
  html{
    font-size: 12px;
  }
  .hide-lg{
    display: none !important;
  }
  .show-lg{
    display: block !important;
  }
}

@media(max-width: 840px){
  html{
    font-size: 12px;
  }
  .hide-md{
    display: none !important;
  }
  .show-md{
    display: block !important;
  }
}

@media(max-width: 600px){
  html{
    font-size: 12px;
  }
  .hide-sm{
    display: none !important;
  }
  .show-sm{
    display: block !important;
  }
  #messages{
    left: 1rem;
  }
}

@media(max-width: 480px){
  html{
    font-size: 12px;
  }
  .hide-xs{
    display: none !important;
  }
  .show-xs{
    display: block !important;
  }
  .modal.open{
    z-index: 1051;
  }
  .modal .modal-content{
    width: 100% !important;
    max-width: calc(100% - 5rem) !important;
  }
  .modal.center .modal-content{
    margin-left: 7rem !important;
    margin-right: 2rem !important;
  }
}