/********** Utility Class **********/
@media (max-width: 419px) {
  .visible-xs-a {
    display: block !important;
  }
  table.visible-xs-a {
    display: table !important;
  }
  tr.visible-xs-a {
    display: table-row !important;
  }
  th.visible-xs-a,
  td.visible-xs-a {
    display: table-cell !important;
  }
  .visible-xs-a-block {
    display: block !important;
  }
  .visible-xs-a-inline {
    display: inline !important;
  }
  .visible-xs-a-inline-block {
    display: inline-block !important;
  }
  .hidden-xs-a{
    display: none !important;
  }
}
@media (min-width: 420px) and (max-width: 599px) {
  .visible-xs-b {
    display: block !important;
  }
  table.visible-xs-b {
    display: table !important;
  }
  tr.visible-xs-b {
    display: table-row !important;
  }
  th.visible-xs-b,
  td.visible-xs-b {
    display: table-cell !important;
  }
  .visible-xs-b-block {
    display: block !important;
  }
  .visible-xs-b-inline {
    display: inline !important;
  }
  .visible-xs-b-inline-block {
    display: inline-block !important;
  }
  .hidden-xs-b{
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .visible-xs-c {
    display: block !important;
  }
  table.visible-xs-c {
    display: table !important;
  }
  tr.visible-xs-c {
    display: table-row !important;
  }
  th.visible-xs-c,
  td.visible-xs-c {
    display: table-cell !important;
  }
  .visible-xs-c-block {
    display: block !important;
  }
  .visible-xs-c-inline {
    display: inline !important;
  }
  .visible-xs-c-inline-block {
    display: inline-block !important;
  }
  .hidden-xs-c{
    display: none !important;
  }
}

/* table style helper class */
.col-xs-table{
  display: table;
  width: 100%;
  height: 100%;
}
.col-xs-table-cell{
  display: table-cell;
  float: none;
  vertical-align: middle;
  height: 100%;
}
.col-xs-a-table{
  display: table;
  width: 100%;
  height: 100%;
}
.col-xs-a-table-cell{
  display: table-cell;
  float: none;
  vertical-align: middle;
  height: 100%;
}
@media (min-width: 420px){
  .col-xs-b-table{
    display: table;
    width: 100%;
    height: 100%;
  }
  .col-xs-b-table-cell{
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}
@media (min-width: 600px){
  .col-xs-c-table{
    display: table;
    width: 100%;
    height: 100%;
  }
  .col-xs-c-table-cell{
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}
@media (min-width: 768px){
  .col-sm-table{
    display: table;
    width: 100%;
    height: 100%;
  }
  .col-sm-table-cell{
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}
@media (min-width: 992px){
  .col-md-table{
    display: table;
    width: 100%;
    height: 100%;
  }
  .col-md-table-cell{
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}
@media (min-width: 1200px){
  .col-lg-table{
    display: table;
    width: 100%;
    height: 100%;
  }
  .col-lg-table-cell{
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}