/*
xsmall : 0px - 479px
small: 480px - 767px
medium: 768px - 1024px
large: 1025px - 1279px
xlarge: 1280px +
*/


/* CLASSES FOR SHOWING THINGS */

@media screen and (max-width: 479px) {
    .show-for-small {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .show-for-medium {
        display: none !important;
    }
}

@media screen and (max-width: 1024px) {
    .show-for-large {
        display: none !important;
    }
}

@media screen and (min-width: 479px) {
    .show-for-xsmall-only {
        display: none !important;
    }
}

@media screen and (max-width: 479px),
screen and (min-width: 768px) {
    .show-for-small-only {
        display: none !important;
    }
}

@media screen and (max-width: 767px),
screen and (min-width: 1024px) {
    .show-for-medium-only {
        display: none !important;
    }
}

@media screen and (max-width: 1025px),
screen and (min-width: 1279px) {
    .show-for-large-only {
        display: none !important;
    }
}

@media screen and (max-width: 1280px) {
    .show-for-xlarge-only,
    .show-for-xlarge {
        display: none !important;
    }
}


/* CLASSES FOR HIDING THINGS */

@media screen and (min-width: 480px) {
    .hide-for-small {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .hide-for-medium {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .hide-for-large {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .hide-for-xsmall-only {
        display: none !important;
    }
}

@media screen and (max-width: 767px) and (min-width: 480px) {
    .hide-for-small-only {
        display: none !important;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .hide-for-medium-only {
        display: none !important;
    }
}

@media screen and (max-width: 1279px) and (min-width: 1025px) {
    .hide-for-large-only {
        display: none !important;
    }
}

@media screen and (min-width: 1279px) {
    .hide-for-xlarge-only,
    .hide-for-xlarge {
        display: none !important;
    }
}


/* CLASSES FOR GENERAL HIDING */

.hide {
    display: none !important;
}

.invisible {
    visibility: hidden;
}


/* ORIENTATION */

@media screen and (orientation: landscape) {
    .show-for-landscape,
    .hide-for-portrait {
        display: none !important;
    }
}

@media screen and (orientation: portrait) {
    .hide-for-landscape,
    .show-for-portrait {
        display: block !important;
    }
}