@media (--breakpoint-not-small) {

    .medium-and-larger-specific-style {

      background-color: red;

    }

  }

  @media (--breakpoint-medium) {

    .medium-screen-specific-style {

      background-color: red;

    }

  }

  @media (--breakpoint-large) {

    .large-and-larger-screen-specific-style {

      background-color: red;

    }

  }

*/

/* Media Queries */

/* Debugging */

/*

  DEBUG CHILDREN

  Docs: http://tachyons.io/docs/debug/

  Just add the debug class to any element to see outlines on its

  children.

*/

.debug * { outline: 1px solid gold; }

.debug-white * { outline: 1px solid white; }

.debug-black * { outline: 1px solid black; }

/*

   DEBUG GRID

   http://tachyons.io/docs/debug-grid/

   Can be useful for debugging layout issues

   or helping to make sure things line up perfectly.

   Just tack one of these classes onto a parent element.

*/

.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; }

.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left; }

.debug-grid-8-solid { background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left; }

.debug-grid-16-solid { background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left; }

/* Uncomment out the line below to help debug layout issues */

@media screen and (min-width: 30em) {

 .aspect-ratio-ns { height: 0; position: relative; }

 .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }

 .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }

 .aspect-ratio--4x3-ns { padding-bottom: 75%; }

 .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }

 .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }

 .aspect-ratio--4x6-ns { padding-bottom: 150%; }

 .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }

 .aspect-ratio--5x8-ns { padding-bottom: 160%; }

 .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }

 .aspect-ratio--5x7-ns { padding-bottom: 140%; }

 .aspect-ratio--1x1-ns { padding-bottom: 100%; }

 .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

 .cover-ns { background-size: cover !important; }

 .contain-ns { background-size: contain !important; }

 .bg-center-ns { background-repeat: no-repeat; background-position: center center; }

 .bg-top-ns { background-repeat: no-repeat; background-position: top center; }

 .bg-right-ns { background-repeat: no-repeat; background-position: center right; }

 .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; }

 .bg-left-ns { background-repeat: no-repeat; background-position: center left; }

 .outline-ns { outline: 1px solid; }

 .outline-transparent-ns { outline: 1px solid transparent; }

 .outline-0-ns { outline: 0; }

 .ba-ns { border-style: solid; border-width: 1px; }

 .bt-ns { border-top-style: solid; border-top-width: 1px; }

 .br-ns { border-right-style: solid; border-right-width: 1px; }

 .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }

 .bl-ns { border-left-style: solid; border-left-width: 1px; }

 .bn-ns { border-style: none; border-width: 0; }

 .br0-ns { border-radius: 0; }

 .br1-ns { border-radius: .125rem; }

 .br2-ns { border-radius: .25rem; }

 .br3-ns { border-radius: .5rem; }

 .br4-ns { border-radius: 1rem; }

 .br-100-ns { border-radius: 100%; }

 .br-pill-ns { border-radius: 9999px; }

 .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }

 .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

 .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }

 .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }

 .br-inherit-ns { border-radius: inherit; }

 .br-initial-ns { border-radius: initial; }

 .br-unset-ns { border-radius: unset; }

 .b--dotted-ns { border-style: dotted; }

 .b--dashed-ns { border-style: dashed; }

 .b--solid-ns { border-style: solid; }

 .b--none-ns { border-style: none; }