/**
 * Fairy / Flatsome breakpoint compatibility layer
 * Mobile:  0-639px
 * Tablet:  640-1024px
 * Desktop: 1025px+
 */

/* Custom responsive visibility helpers. */
.fairy-only-mobile,
.fairy-only-tablet,
.fairy-only-desktop {
    display: none !important;
}

@media screen and (max-width: 639px) {
    .fairy-only-mobile {
        display: block !important;
    }

    .fairy-hide-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    .fairy-only-tablet {
        display: block !important;
    }

    .fairy-hide-tablet {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .fairy-only-desktop {
        display: block !important;
    }

    .fairy-hide-desktop {
        display: none !important;
    }
}

/*
 * Flatsome small compatibility band.
 * Flatsome normally changes from small at 550px. Keep its small visibility
 * rules active through 639px.
 */
@media screen and (min-width: 550px) and (max-width: 639px) {
    .hide-for-small,
    [data-hide-for="small"] {
        display: none !important;
    }

    .show-for-small,
    [data-show-for="small"] {
        display: block !important;
    }

    .small-text-center {
        text-align: center !important;
    }

    .small-text-left {
        text-align: left !important;
    }

    .small-text-right {
        text-align: right !important;
    }
}

/*
 * Flatsome medium compatibility band.
 * Flatsome normally switches to desktop at 850px. Keep medium/mobile-header
 * visibility active through 1024px.
 */
@media screen and (min-width: 850px) and (max-width: 1024px) {
    .hide-for-medium,
    [data-hide-for="medium"] {
        display: none !important;
    }

    .show-for-medium,
    [data-show-for="medium"] {
        display: block !important;
    }

    .medium-text-center {
        text-align: center !important;
    }

    .medium-text-left {
        text-align: left !important;
    }

    .medium-text-right {
        text-align: right !important;
    }

    /* Common Flatsome header visibility classes. */
    #header .header-main .hide-for-medium {
        display: none !important;
    }

    #header .header-main .show-for-medium {
        display: block !important;
    }
}

/* Optional state hooks applied to body by fairy-breakpoints.js. */
body.fairy-viewport-mobile .fairy-desktop-or-tablet,
body.fairy-viewport-tablet .fairy-mobile-or-desktop,
body.fairy-viewport-desktop .fairy-mobile-or-tablet {
    display: none !important;
}