// Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual 
// values from Gantry 5 template.

// commonly used media queries

//  typically min 75rem 
@include breakpoint(large-desktop-range) {
    .g-block.visible-desktop {
        display: block !important;
    }
}
// typically range 60rem to 74.938rem 
@include breakpoint(desktop-range) {
    .g-block.visible-desktop {
        display: block !important;
    }
}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {
    .g-block.visible-desktop {
        display: none !important;
    }
}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {
    .g-block.visible-desktop {
        display: none !important;
    }
}
// typically max 30rem
@include breakpoint(small-mobile-range) {
    .g-block.visible-desktop {
         display: none !important;
    }
}

// Less commonly used media queries

// typically min 60rem
@include breakpoint(desktop-only) {

}
// typically min 48rem
@include breakpoint(no-mobile) {

}
// typically max 47.938 rem
@include breakpoint(mobile-only) {

}
// typically max 59.938rem
@include breakpoint(no-desktop) {

}

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 

}

@import "nucleus/mixins/breakpoints";