/*********************
  Media Query Classes
**********************/




.phone-only {
    @include tablet-and-up {
        display: none !important;
    }
}
.tablet-and-up-only {
    @include tablet-and-down {
        display: none !important;
    }
}
.tablet-and-down-only {
    @include tablet-and-up {
        display: none !important;
    }
}
.desktop-and-up-only {
    @include tablet-and-up {
        display: none !important;
    }
}
.desktop-and-down-only {
    @include large-desktop-and-up {
        display: none !important;
    }
}
.large-desktop-and-up-only {
    @include desktop-and-up {
        display: none !important;
    }
}
.large-desktop-and-down-only {
    @include desktop-and-up {
        display: none !important;
    }
}












.hide-on-small-only, .hide-on-small-and-down {
  @media #{$small-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-down {
  @media #{$medium-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-up {
  @media #{$medium-and-up} {
    display: none !important;
  }
}
.hide-on-med-only {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: none !important;
  }
}
.hide-on-large-only {
  @media #{$large-and-up} {
    display: none !important;
  }
}
.show-on-large {
  @media #{$large-and-up} {
    display: block !important;
  }
}
.show-on-medium {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: block !important;
  }
}
.show-on-small {
  @media #{$small-and-down} {
    display: block !important;
  }
}
.show-on-medium-and-up {
  @media #{$medium-and-up} {
    display: block !important;
  }
}
.show-on-medium-and-down {
  @media #{$medium-and-down} {
    display: block !important;
  }
}


// Center text on mobile
.center-on-small-only {
  @media #{$small-and-down} {
    text-align: center;
  }
}