/**
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries, regardless of screen size.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable got to your theme settings and
 * look under the "CSS" settings tab.
 */

/* Some basic examples of cascading media queries. */

/* Really small screens and up 
@media only screen and (min-width: 220px) {
}
*/

/* Smartphone sizes and up 
@media only screen and (min-width: 320px) {
}
*/

/* Smartphone sizes and down */
@media only screen and (max-width: 480px) {
  
  /*
    Float Region blocks example:
    In smaller screen sizes we can remove the float and widths so all blocks
    stack instead of displaying horizonally. The selector used here is an
    "attribute selector" which will match on any float block class. Use your
    inspector or Firebug to get the classes from the page output if you need
    more granular control over block alignment and stacking.
    
    "Float Region blocks" is an extension for floating blocks in regions, see
    your themes appearance settings, under the Extensions tab.
  */
  .region[class*="float-blocks"] .block {
    float: none;
    width: 100%;
  }

}

/* Tablet sizes and up 
@media only screen and (min-width: 768px) {
}
*/

/* Desktops/laptops and up 
@media only screen and (min-width: 1025px) {
}
*/
