/* Helper classes for site builders https://jira.highwire.org/browse/SHASTA-880 */
/* Hide them all, show them in their respective CSS files. .mobile-only not defined since it should be included by default. It is hidden in respective CSS files */
.mobile-hidden,
.narrow-only,
.normal-only,
.wide-only {
  display: none;
}
@media all and (min-width: 768px) and (min-device-width: 768px), (max-device-width: 800px) and (min-width: 768px) and (orientation:landscape), all and (min-width: 1155px) {
  /* Now, override previously set classes. We have to hide .mobile-only and display mobile-hidden. */
  *.mobile-only {
    display: none;
  }
  [class^="grid-"].mobile-hidden,
  [class*=" grid-"].mobile-hidden,
  span.mobile-hidden,
  a.mobile-hidden {
    display: inline;
  }
  *.mobile-hidden {
    display: block;
  }
}
@media all and (min-width: 768px) and (min-device-width: 768px), (max-device-width: 800px) and (min-width: 768px) and (orientation:landscape) {
  /* Helper class for responsivity */
  /* This is the sheet for the narrow layout. It is loaded with global and default. */
  /* First show the .narrow-only class and hide the .narrow-hidden class */
  *.narrow-only {
    display: block;
  }
  [class^="grid-"].narrow-only,
  [class*=" grid-"].narrow-only,
  span.narrow-only,
  a.narrow-only {
    display: inline;
  }
  *.narrow-hidden {
    display: none;
  }
}
/*
@media @normal {
  // Helper class for responsivity
  // This is the sheet for the normal layout. It is loaded with global, default & narrow.

  
  // Override previously set classes. Because mobile styles were already overridden, we only need to reset the narrow styles. 
  *.narrow-only,
  [class^="grid-"].narrow-only,
  [class*=" grid-"].narrow-only,
  span.narrow-only,
  a.narrow-only {
    display: none;
  }
  [class^="grid-"].narrow-hidden,
  [class*=" grid-"].narrow-hidden,
  span.narrow-hidden,
  a.narrow-hidden {
    display: inline;
  }
  *.narrow-hidden {
    display: block;
  }
  
  // Show the .normal-only class and hide the .normal-hidden class
  *.normal-only {
    display: block;
  }
  
  [class^="grid-"].normal-only,
  [class*=" grid-"].normal-only,
  span.normal-only,
  a.normal-only {
    display: inline;
  }
  
  *.normal-hidden {
    display: none;
  }  
  
}
*/
@media all and (min-width: 1155px) {
  /* Override previously set classes. Because mobile styles and narrow were already overridden, we only need to reset the normal styles. */
  *.narrow-only,
  [class^="grid-"].narrow-only,
  [class*=" grid-"].narrow-only,
  span.narrow-only,
  a.narrow-only,
  *.normal-only,
  [class^="grid-"].normal-only,
  [class*=" grid-"].normal-only,
  span.normal-only,
  a.normal-only {
    display: none;
  }
  [class^="grid-"].normal-hidden,
  [class*=" grid-"].normal-hidden,
  span.normal-hidden,
  a.normal-hidden,
  [class^="grid-"].narrow-hidden,
  [class*=" grid-"].narrow-hidden,
  span.narrow-hidden,
  a.narrow-hidden {
    display: inline;
  }
  *.normal-hidden,
  *.narrow-hidden {
    display: block;
  }
  /* Helper class for wide-only display */
  *.wide-only {
    display: block;
  }
  [class^="grid-"].wide-only,
  [class*=" grid-"].wide-only,
  span.wide-only,
  a.wide-only {
    display: inline;
  }
  *.wide-hidden {
    display: none;
  }
}