Tachyons module for styling nested elements

    that are generated by a cms.

*/

.nested-copy-line-height p, .nested-copy-line-height ul,

.nested-copy-line-height ol { line-height: 1.5; }

.nested-headline-line-height h1, .nested-headline-line-height h2,

.nested-headline-line-height h3, .nested-headline-line-height h4,

.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }

.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }

.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }

.nested-copy-separator p+p { margin-top: 1.5em; }

.nested-img img { width: 100%; max-width: 100%; display: block; }

.nested-links a { color: #357edd; transition: color .15s ease-in; }

.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }

.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }

/*

  STYLES

  Add custom styles here.

*/

/* Variables */

/* Importing here will allow you to override any variables in the modules */

/*

   Tachyons

   COLOR VARIABLES

   Grayscale

   - Solids

   - Transparencies

   Colors

*/

/*

  CUSTOM MEDIA QUERIES

  Media query values can be changed to fit your own content.

  There are no magic bullets when it comes to media query width values.

  They should be declared in em units - and they should be set to meet

  the needs of your content. You can also add additional media queries,

  or remove some of the existing ones.

  These media queries can be referenced like so:

  @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; }

 .bw0-ns { border-width: 0; }

 .bw1-ns { border-width: .125rem; }

 .bw2-ns { border-width: .25rem; }

 .bw3-ns { border-width: .5rem; }

 .bw4-ns { border-width: 1rem; }

 .bw5-ns { border-width: 2rem; }

 .bt-0-ns { border-top-width: 0; }

 .br-0-ns { border-right-width: 0; }

 .bb-0-ns { border-bottom-width: 0; }

 .bl-0-ns { border-left-width: 0; }

 .shadow-1-ns { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }

 .shadow-2-ns { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }

 .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }

 .shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }

 .shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }

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

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

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

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

 .top-1-ns { top: 1rem; }

 .left-1-ns { left: 1rem; }

 .right-1-ns { right: 1rem; }

 .bottom-1-ns { bottom: 1rem; }

 .top-2-ns { top: 2rem; }

 .left-2-ns { left: 2rem; }

 .right-2-ns { right: 2rem; }

 .bottom-2-ns { bottom: 2rem; }

 .top--1-ns { top: -1rem; }

 .right--1-ns { right: -1rem; }

 .bottom--1-ns { bottom: -1rem; }

 .left--1-ns { left: -1rem; }

 .top--2-ns { top: -2rem; }

 .right--2-ns { right: -2rem; }

 .bottom--2-ns { bottom: -2rem; }

 .left--2-ns { left: -2rem; }

 .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; }

 .cl-ns { clear: left; }

 .cr-ns { clear: right; }

 .cb-ns { clear: both; }

 .cn-ns { clear: none; }

 .dn-ns { display: none; }

 .di-ns { display: inline; }

 .db-ns { display: block; }

 .dib-ns { display: inline-block; }

 .dit-ns { display: inline-table; }

 .dt-ns { display: table; }

 .dtc-ns { display: table-cell; }

 .dt-row-ns { display: table-row; }