/*! CSS compiled on: 2017-03-20 09:41:20 -0700 */

/*
includes: core shared mixins, variables, grid
*/
/*********************************************************************
 * STYLE GUIDE COLORS
**********************************************************************/
.flip-card .close-card:before {
  font-family: 'utility-icons' !important;
  speak: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.flip-card .close-card:before {
  content: "\e601"; }

/* Bourbon: Bitters & visual grid are controlled by styles.scss */
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* Custom lulu*/
/***************************************************
"grid-wrapper" mixin:
- Change the container column span for every break-point
- Each parameter contains a list of values reading from mobile -> desktop size (wrapped in brackets)
- Optionally specify the column span for "tile" elements within this container (defaults to no tiles)
- Set $container to modify the total Neat grid context; example Neat output: span-columns(4 of 14). See http://thoughtbot.github.io/neat-docs/latest/#shift-in-context

Example usage:

// Default values only
@include grid-wrapper($grid, $query, $container);

// Default container grid values with tile element sizing
// Reads as: xs 10 columns; sm 5 columns; md 4 columns; lg 3 columns
@include grid-wrapper($grid, $query, $container, (10, 5, 4, 3));

// Custom grid values
// Reads as: xs 10 columns; sm 5 columns; md 4 columns; lg 3 columns
@include grid-wrapper((10, 5, 4, 3), $query, $container);

// Custom container context
// Will output as  span-columns(__ of 12) and shift(__ of 12)
@include grid-wrapper((10, 5, 4, 3), $query, 12);

// Skip a breakpoint if you want
// Eg: skip mobile/xs breakpoint
@include grid-wrapper((10, 5, 4), ($sm, $md, $lg-bp), $container, (2, 4, 5));
***************************************************/
/***************************************************
	LAYOUT
***************************************************/
/***************************************************
	NEW FONT STYLES
***************************************************/
/***************************************************
	FONT FAMILY
***************************************************/
/***************************************************
	HEADINGS
***************************************************/
/***************************************************
	SUB-HEADINGS & PRICES
***************************************************/
/***************************************************
	BODY COPY
***************************************************/
/***************************************************
	UI ELEMENTS
***************************************************/
/***************************************************
	EVENT DATE TYPE
***************************************************/
/***************************************************
	UTILITIES
***************************************************/
/***************************************************
	CHECKOUT
***************************************************/
/***********************************************
    FILTERS
************************************************/
/***************************************************
	TYPOGRAPHY	
***************************************************/
.gift-card-page .gift-card-tiles .tile h2 {
  line-height: 1;
  letter-spacing: normal;
  text-transform: none; }

.gift-card-page .cta-panel h3.balance {
  /* font-family: Calibre semibold */
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase; }

.gift-card-page .gift-card-tiles .tile h2 {
  /* font-family: Calibre light */
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: 300; }

.gift-card-page .gift-card-tiles .tile h3, .gift-card-page .transaction-history table th {
  /* font-family: Calibre semibold */
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase; }

.flip-card table td {
  /* font-family: Calibre medium */
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase; }

@keyframes stayvisible {
  from {
    visibility: visible; }

  to {
    visibility: visible; } }

.flip-card {
  perspective: 1000px; }
  .card-parent.active .flip-card .card-inner {
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .card-parent.active .flip-card .card-front {
    position: absolute;
    top: 0px;
    left: 0px;
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden; }
  .card-parent.active .flip-card .card-back {
    position: relative;
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible; }
  .flip-card .parsley-errors-list {
    display: none;
    text-align: center; }
  .flip-card .close-card {
    display: block;
    text-align: right; }
  .flip-card .card-inner {
    position: relative;
    transition: all 0.4s;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .flip-card .card-front {
    position: relative;
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
    z-index: 2;
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background-color: #fff; }
  .flip-card .card-back {
    position: absolute;
    top: 0px;
    left: 0px;
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #fff;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); }
  .flip-card table {
    margin-bottom: 20px; }
    .flip-card table th {
      border-bottom: 1px solid #ddd; }
    .flip-card table tbody tr {
      border-top: 1px solid #ddd;
      height: 38px; }
      .flip-card table tbody tr:first-child {
        border-top: 0px; }
    .flip-card table td {
      text-align: left;
      font-size: 12px;
      color: #777;
      border-bottom: 0px; }
      @media screen and (min-width: 64em)  {
        .flip-card table td {
          font-size: 13px; } }
      .flip-card table td:last-child {
        text-align: right; }
      @media screen and (min-width: 64em)  {
        .flip-card table td span {
          display: block; } }

.gift-card-page .hero-image {
  margin-top: 80px;
  margin-bottom: 50px; }
.gift-card-page .heading-wrapper.section {
  margin-bottom: 0; }
.gift-card-page .gift-card-tiles {
  width: auto;
  margin-left: 0;
  margin-right: 0; }
  .gift-card-page .gift-card-tiles #gift-card-number {
    margin-top: 10px; }
  @media screen and (min-width: 64em)  {
    .gift-card-page .gift-card-tiles .tile-wrapper {
      float: left;
      display: block;
      margin-right: 1.7816%;
      width: 85.4598%;
      margin-left: 7.2701%; }
      .gift-card-page .gift-card-tiles .tile-wrapper:last-child {
        margin-right: 0; }
    .gift-card-page .gift-card-tiles .tile {
      float: left;
      display: block;
      margin-right: 2.0848%;
      width: 31.9435%; }
      .gift-card-page .gift-card-tiles .tile:last-child {
        margin-right: 0; }
      .gift-card-page .gift-card-tiles .tile.card-parent {
        padding-top: 0; }
    .gift-card-page .gift-card-tiles form button {
      display: block;
      margin: 0 auto; } }
  @media screen and (min-width: 768px) and (max-width: 1023px)  {
    .gift-card-page .gift-card-tiles .tile-wrapper {
      border-bottom: 1px solid #ddd; }
    .gift-card-page .gift-card-tiles form button {
      display: block;
      margin: 0 auto; }
    .gift-card-page .gift-card-tiles td:nth-child(2n) {
      text-align: center; }
    .gift-card-page .gift-card-tiles .tile-wrapper {
      float: left;
      display: block;
      margin-right: 1.7816%;
      width: 85.4598%;
      margin-left: 7.2701%; }
      .gift-card-page .gift-card-tiles .tile-wrapper:last-child {
        margin-right: 0; }
    .gift-card-page .gift-card-tiles .tile {
      float: left;
      display: block;
      margin-right: 2.0848%;
      width: 48.9576%; }
      .gift-card-page .gift-card-tiles .tile:last-child {
        margin-right: 0; }
      .gift-card-page .gift-card-tiles .tile:nth-child(2) {
        margin-right: 0; }
      .gift-card-page .gift-card-tiles .tile.card-parent {
        width: 100%; } }
  @media screen and (max-width: 767px)  {
    .gift-card-page .gift-card-tiles .tile-wrapper {
      float: left;
      display: block;
      margin-right: 2.0848%;
      width: 100%; }
      .gift-card-page .gift-card-tiles .tile-wrapper:last-child {
        margin-right: 0; }
    .gift-card-page .gift-card-tiles .tile {
      float: left;
      display: block;
      margin-right: 2.0848%;
      width: 100%;
      margin-right: 0; }
      .gift-card-page .gift-card-tiles .tile:last-child {
        margin-right: 0; }
    .gift-card-page .gift-card-tiles .gift-card-balance {
      float: left;
      display: block;
      margin-right: 2.0848%;
      width: 100%;
      margin-right: 0; }
      .gift-card-page .gift-card-tiles .gift-card-balance:last-child {
        margin-right: 0; } }
  .gift-card-page .gift-card-tiles .tile h2 {
    font-size: 20px; }
    @media screen and (min-width: 64em)  {
      .gift-card-page .gift-card-tiles .tile h2 {
        font-size: 25px; } }
  .gift-card-page .gift-card-tiles .tile h3 {
    font-size: 12px; }
    @media screen and (min-width: 64em)  {
      .gift-card-page .gift-card-tiles .tile h3 {
        font-size: 13px; } }
  .gift-card-page .gift-card-tiles .tile.card-parent {
    box-shadow: none;
    padding-bottom: 0px; }
  @media screen and (min-width: 64em)  {
    .gift-card-page .gift-card-tiles .gift-card-balance {
      height: 500px; }
      .gift-card-page .gift-card-tiles .gift-card-balance .flip-card, .gift-card-page .gift-card-tiles .gift-card-balance .card-inner, .gift-card-page .gift-card-tiles .gift-card-balance .card-back {
        height: 100%; }
    .gift-card-page .gift-card-tiles .transaction-history {
      height: 272px;
      padding-bottom: 0px; }
      .gift-card-page .gift-card-tiles .transaction-history > div {
        overflow-y: scroll;
        height: 100%; } }
  .gift-card-page .gift-card-tiles .gift-card-balance .card-front {
    padding: 30px; }
    @media screen and (min-width: 64em)  {
      .gift-card-page .gift-card-tiles .gift-card-balance .card-front {
        padding: 0 30px;
        top: 50%;
        -ms-transform: translateY(-117px);
        transform: translateY(-117px); } }
    .gift-card-page .gift-card-tiles .gift-card-balance .card-front input {
      max-width: 400px; }
    .gift-card-page .gift-card-tiles .gift-card-balance .card-front .parsley-errors-list {
      max-width: 400px;
      margin: 0 auto; }
    .gift-card-page .gift-card-tiles .gift-card-balance .card-front button {
      margin-top: 15px; }
  .gift-card-page .gift-card-tiles .gift-card-balance .card-back {
    padding: 30px 15px 15px 15px;
    width: 100%; }
    .gift-card-page .gift-card-tiles .gift-card-balance .card-back h2 {
      margin-bottom: 7px; }
    .gift-card-page .gift-card-tiles .gift-card-balance .card-back .close-card {
      position: absolute;
      top: 20px;
      right: 15px; }
.gift-card-page .transaction-history {
  padding-top: 42px;
  position: relative;
  padding-bottom: 145px; }
  .gift-card-page .transaction-history > div {
    padding-left: 25px;
    padding-right: 25px; }
  .gift-card-page .transaction-history table {
    margin-top: 0px;
    margin-bottom: 0px; }
    .gift-card-page .transaction-history table thead {
      position: absolute;
      display: table;
      top: 0px;
      left: 25px;
      background-color: #fff;
      width: calc(100% - 50px); }
    .gift-card-page .transaction-history table th {
      text-align: center;
      font-size: 10px;
      padding-bottom: 12px;
      padding-top: 15px; }
      @media screen and (min-width: 37.5em)  {
        .gift-card-page .transaction-history table th {
          font-size: 11px; } }
.gift-card-page .cta-panel {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 145px;
  background-color: #f2f2f2;
  border-top: #e6e6e6 1px solid;
  padding-top: 30px; }
  .gift-card-page .cta-panel h3.balance {
    font-size: 12px;
    margin-bottom: 30px; }
    @media screen and (min-width: 600px) and (max-width: 1023px)  {
      .gift-card-page .cta-panel h3.balance {
        font-size: 13px; } }
    @media screen and (min-width: 64em)  {
      .gift-card-page .cta-panel h3.balance {
        font-size: 15px; } }

/*! CSS compiled on: 2017-03-20 09:41:20 -0700 */