/*  =============================================================================
 *  BASE STYLES
 *  ============================================================================= */
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }

.text-plain { text-decoration: none; }
.list-plain { list-style-type: none; }
.list-horz li { display: inline-block; }

.assistive-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*
 *  LAYOUT & DISPLAY
 *  ============================================================================= */
.dn { display: none; }
.db { display: block; }
.dib { display: inline-block; }
.dt { display: table; }
.dtc { display: table-cell; }
.df { display: flex; }
.df-wrap { flex-wrap: wrap; }
.df-child { flex-basis:250px; flex-grow: 1; }

.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }
.top-0 { top: 0; }
.bot-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.right-half { right: 50%; }

.fl { float: left; }
.fr { float: right; }

.center { margin-left: auto; margin-right: auto; }
.vat { vertical-align: top; }
.vac { vertical-align: middle; }
.vab { vertical-align: bottom; }

.vam {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/*
 *  Display Types
 *  ============================================================================= */
.z-above { z-index: 10; }
.z-top { z-index: 999; }

.hidden { visibility: hidden; }
.opacity-0 { opacity: 0; }

.of-hidden { overflow-y: hidden; }

.default-cursor { cursor: default; }
.pointer-cursor { cursor: pointer; }
.text-cursor { cursor: text; }



/*
 * SHAPES
 * ============================================================================= */
button,
input[type="submit"] { border: none; background-color: transparent; }

input,
textarea { border: none; }


/* BORDER WIDTHS & STYLE ============================================================================= */
/* Create custom border colors in _styles.scss */
.ban { border: none !important; }
.bas { border-width: 1px; border-style: solid; }
.bls { border-left-width: 1px; border-left-style: solid; }
.brs { border-right-width: 1px; border-right-style: solid; }
.bts { border-top-width: 1px; border-top-style: solid; }
.bbs { border-bottom-width: 1px; border-bottom-style: solid; }
.br-s { border-radius: 3px; }
.br-m { border-radius: 5px; }





/*  GRID OF TWELVE   ============================================================================= */
/* Mobile First */
.wi-full,
.span_12_of_12 { width: 100%; }
.span_11_of_12 { width: 100%; }
.span_10_of_12 { width: 100%; }
.span_9_of_12  { width: 100%; }
.span_8_of_12  { width: 100%; }
.span_7_of_12  { width: 100%; }
.span_6_of_12  { width: 100%; }
.span_5_of_12  { width: 100%; }
.span_4_of_12  { width: 100%; }
.span_3_of_12  { width: 100%; }
.span_2_of_12  { width: 100%; }
.span_1_of_12  { width: 100%; }

.ht-full { height: 100%; }
.ht-vh { height: 100vh; }
.wi-half { width: 50%; }


/*  12 Column grid for bigger THAN 40em - 480 PIXELS wide */

@media only screen and (min-width: 40em) {
.wi-full,
.span_12_of_12 { width: 100%;   }
.span_11_of_12 { width: 91.667%; }
.span_10_of_12 { width: 83.333%;    }
.span_9_of_12  { width: 75%; }
.span_8_of_12  { width: 66.666%; }
.span_7_of_12  { width: 58.333%; }
.span_6_of_12  { width: 50%; }
.span_5_of_12  { width: 41.666%;  }
.span_4_of_12  { width: 33.333%; }
.span_3_of_12  { width: 25%; }
.span_2_of_12, .span_2_of_12-ns  { width: 16.667%; }
.span_1_of_12, .span_1_of_12-ns  { width: 8.333%;  }
}

/*
 *  OTHER PEOPLE'S CODE
 *  ============================================================================= */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before, .cf-ns:before,
.cf:after, .cf-ns:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after, .cf-ns:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf, .cf-ns {
    *zoom: 1;
}


/**
 * Paul Irish Border Box Sizing
 * Fixes padding, border, etc. so that they don't affect the elements' real width
 *
 */
* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.no-border-box {
  box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
}


/* SPACING  ============================================================================= */
/* Padding */

.pan  { padding: 0;      }
.paxs { padding: .25rem; }
.pas  { padding: .5rem;  }
.pam  { padding: 1rem;   }
.pal  { padding: 2rem;   }
.pax  { padding: 4rem;   }

.pln  { padding-left: 0;      }
.plxs { padding-left: .25rem; }
.pls  { padding-left: .5rem;  }
.plm  { padding-left: 1rem;   }
.pll  { padding-left: 2rem;   }
.plx  { padding-left: 4rem;   }

.prn  { padding-right: 0;      }
.prxs { padding-right: .25rem; }
.prs  { padding-right: .5rem;  }
.prm  { padding-right: 1rem;   }
.prl  { padding-right: 2rem;   }
.prx  { padding-right: 4rem;   }

.pbn  { padding-bottom: 0;      }
.pbxs { padding-bottom: .25rem; }
.pbs  { padding-bottom: .5rem;  }
.pbm  { padding-bottom: 1rem;   }
.pbl  { padding-bottom: 2rem;   }
.pbx  { padding-bottom: 4rem;   }

.ptn  { padding-top: 0;      }
.ptxs { padding-top: .25rem; }
.pts  { padding-top: .5rem;  }
.ptm  { padding-top: 1rem;   }
.ptl  { padding-top: 2rem;   }
.ptx  { padding-top: 4rem;   }

.pvn  { padding-top: 0;      padding-bottom: 0;      }
.pvxs { padding-top: .25rem; padding-bottom: .25rem; }
.pvs  { padding-top: .5rem;  padding-bottom: .5rem; }
.pvm  { padding-top: 1rem;   padding-bottom: 1rem; }
.pvl  { padding-top: 2rem;   padding-bottom: 2rem; }
.pvx  { padding-top: 4rem;   padding-bottom: 4rem; }

.phn  { padding-left: 0;      padding-right: 0;      }
.phxs { padding-left: .25rem; padding-right: .25rem; }
.phs  { padding-left: .5rem;  padding-right: .5rem;  }
.phm  { padding-left: 1rem;   padding-right: 1rem;   }
.phl  { padding-left: 2rem;   padding-right: 2rem;   }
.phx  { padding-left: 4rem;   padding-right: 4rem;   }


/* Margins */

.man  { margin: 0;       }
.maxs  { margin: .25rem; }
.mas  { margin: .5rem;   }
.mam  { margin: 1rem;    }
.mal  { margin: 2rem;    }
.max  { margin: 4rem;    }

.mln  { margin-left: 0;      }
.mlxs { margin-left: .25rem; }
.mls  { margin-left: .5rem;  }
.mlm  { margin-left: 1rem;   }
.mll  { margin-left: 2rem;   }
.mlx  { margin-left: 4rem;   }

.mrn  { margin-right: 0;      }
.mrxs { margin-right: .25rem; }
.mrs  { margin-right: .5rem;  }
.mrm  { margin-right: 1rem;   }
.mrl  { margin-right: 2rem;   }
.mrx  { margin-right: 4rem;   }

.mbn  { margin-bottom: 0;      }
.mbxs { margin-bottom: .25rem; }
.mbs  { margin-bottom: .5rem;  }
.mbm  { margin-bottom: 1rem;   }
.mbl  { margin-bottom: 2rem;   }
.mbx  { margin-bottom: 4rem;   }

.mtn  { margin-top: 0;      }
.mtxs { margin-top: .25rem; }
.mts  { margin-top: .5rem;  }
.mtm  { margin-top: 1rem;   }
.mtl  { margin-top: 2rem;   }
.mtx  { margin-top: 4rem;   }

.mvn  { margin-top: 0;      margin-bottom: 0;      }
.mvxs { margin-top: .25rem; margin-bottom: .25rem; }
.mvs  { margin-top: .5rem;  margin-bottom: .5rem;  }
.mvm  { margin-top: 1rem;   margin-bottom: 1rem;   }
.mvl  { margin-top: 2rem;   margin-bottom: 2rem;   }
.mvx  { margin-top: 4rem;   margin-bottom: 4rem;   }

.mhn  { margin-left: 0;      margin-right: 0;        }
.mhxs { margin-left: .25rem; margin-right: .25rem; }
.mhs  { margin-left: .5rem;  margin-right: .5rem;  }
.mhm  { margin-left: 1rem;   margin-right: 1rem;   }
.mhl  { margin-left: 2rem;   margin-right: 2rem;   }
.mhx  { margin-left: 4rem;   margin-right: 4rem;   }

/* SPACING  (bigger than phone screen size - ns) ============================================================================= */
/* Padding */

@media only screen and (min-width: 40em) {
.pan-ns  { padding: 0;      }
.paxs-ns { padding: .25rem; }
.pas-ns  { padding: .5rem;  }
.pam-ns  { padding: 1rem;   }
.pal-ns  { padding: 2rem;   }
.pax-ns  { padding: 4rem;   }

.pln-ns  { padding-left: 0;      }
.plxs-ns { padding-left: .25rem; }
.pls-ns  { padding-left: .5rem;  }
.plm-ns  { padding-left: 1rem;   }
.pll-ns  { padding-left: 2rem;   }
.plx-ns  { padding-left: 4rem;   }

.prn-ns  { padding-right: 0;      }
.prxs-ns { padding-right: .25rem; }
.prs-ns  { padding-right: .5rem;  }
.prm-ns  { padding-right: 1rem;   }
.prl-ns  { padding-right: 2rem;   }
.prx-ns  { padding-right: 4rem;   }

.pbn-ns  { padding-bottom: 0;      }
.pbxs-ns { padding-bottom: .25rem; }
.pbs-ns  { padding-bottom: .5rem;  }
.pbm-ns  { padding-bottom: 1rem;   }
.pbl-ns  { padding-bottom: 2rem;   }
.pbx-ns  { padding-bottom: 4rem;   }

.ptn-ns  { padding-top: 0;      }
.ptxs-ns { padding-top: .25rem; }
.pts-ns  { padding-top: .5rem;  }
.ptm-ns  { padding-top: 1rem;   }
.ptl-ns  { padding-top: 2rem;   }
.ptx-ns  { padding-top: 4rem;   }

.pvn-ns  { padding-top: 0;      padding-bottom: 0;      }
.pvxs-ns { padding-top: .25rem; padding-bottom: .25rem; }
.pvs-ns  { padding-top: .5rem;  padding-bottom: .5rem; }
.pvm-ns  { padding-top: 1rem;   padding-bottom: 1rem; }
.pvl-ns  { padding-top: 2rem;   padding-bottom: 2rem; }
.pvx-ns  { padding-top: 4rem;   padding-bottom: 4rem; }

.phn-ns  { padding-left: 0;      padding-right: 0;      }
.phxs-ns { padding-left: .25rem; padding-right: .25rem; }
.phs-ns  { padding-left: .5rem;  padding-right: .5rem;  }
.phm-ns  { padding-left: 1rem;   padding-right: 1rem;   }
.phl-ns  { padding-left: 2rem;   padding-right: 2rem;   }
.phx-ns  { padding-left: 4rem;   padding-right: 4rem;   }


/* Margins */

.man-ns  { margin: 0;       }
.maxs-ns  { margin: .25rem; }
.mas-ns  { margin: .5rem;   }
.mam-ns  { margin: 1rem;    }
.mal-ns  { margin: 2rem;    }
.max-ns  { margin: 4rem;    }

.mln-ns  { margin-left: 0;      }
.mlxs-ns { margin-left: .25rem; }
.mls-ns  { margin-left: .5rem;  }
.mlm-ns  { margin-left: 1rem;   }
.mll-ns  { margin-left: 2rem;   }
.mlx-ns  { margin-left: 4rem;   }

.mrn-ns  { margin-right: 0;      }
.mrxs-ns { margin-right: .25rem; }
.mrs-ns  { margin-right: .5rem;  }
.mrm-ns  { margin-right: 1rem;   }
.mrl-ns  { margin-right: 2rem;   }
.mrx-ns  { margin-right: 4rem;   }

.mbn-ns  { margin-bottom: 0;      }
.mbxs-ns { margin-bottom: .25rem; }
.mbs-ns  { margin-bottom: .5rem;  }
.mbm-ns  { margin-bottom: 1rem;   }
.mbl-ns  { margin-bottom: 2rem;   }
.mbx-ns  { margin-bottom: 4rem;   }

.mtn-ns  { margin-top: 0;      }
.mtxs-ns { margin-top: .25rem; }
.mts-ns  { margin-top: .5rem;  }
.mtm-ns  { margin-top: 1rem;   }
.mtl-ns  { margin-top: 2rem;   }
.mtx-ns  { margin-top: 4rem;   }

.mvn-ns  { margin-top: 0;      margin-bottom: 0;      }
.mvxs-ns { margin-top: .25rem; margin-bottom: .25rem; }
.mvs-ns  { margin-top: .5rem;  margin-bottom: .5rem;  }
.mvm-ns  { margin-top: 1rem;   margin-bottom: 1rem;   }
.mvl-ns  { margin-top: 2rem;   margin-bottom: 2rem;   }
.mvx-ns  { margin-top: 4rem;   margin-bottom: 4rem;   }

.mhn-ns  { margin-left: 0;      margin-right: 0;        }
.mhxs-ns { margin-left: .25rem; margin-right: .25rem; }
.mhs-ns  { margin-left: .5rem;  margin-right: .5rem;  }
.mhm-ns  { margin-left: 1rem;   margin-right: 1rem;   }
.mhl-ns  { margin-left: 2rem;   margin-right: 2rem;   }
.mhx-ns  { margin-left: 4rem;   margin-right: 4rem;   }
}

