/*
Import utils and fonts
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-and-max-screen($min, $max, $orientation)
 * $min - required
 * $max - required
 * $orientation - optional
 * Ex: @include min-and-max-screen(768px, 1024px, landscape) { ... }
 */
/* max-screen($max, $orientation)
 * $max - required
 * $orientation - optional
 * Ex #1: @include max-screen(768px, landscape) { ... }
 * Ex #2: @include max-screen(768px) { ... }
 */
/* min-screen($min, $orientation)
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
/* NYPL HOMEPAGE COLOR PALETTE
 * ---------------------------
 * For reference, go to https://bitbucket.org/NYPL/dgx-ethyl-style-guide
 * and set up the Ethyl Style Guide application.
*/
/* NYPL Primary Red */
/* Secondry Red Color */
/* Coolgray*/
/* Reusable Utility Color Classes for Fonts/Background Color */
.bgPrimaryLibraryRed {
  background-color: #E32B31; }

.bgSecondaryLibraryRed {
  background-color: #B80F15; }

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden; }

.displayVisuallyHidden {
  position: relative;
  left: 0;
  height: auto;
  width: 100%; }

/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('Kievit-Regular', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* FONT DEFINITIONS
 * ---------------------------
*/
/* KIEVIT */
/* Kievit Light */
@font-face {
  font-family: Kievit-Light;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.ttf") format("truetype"); }

/* Kievit Book */
@font-face {
  font-family: Kievit-Book;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.ttf") format("truetype"); }

/* Kievit Book Italic */
@font-face {
  font-family: Kievit-Book-Italic;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.ttf") format("truetype"); }

/* Kievit Medium */
@font-face {
  font-family: Kievit-Medium;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.ttf") format("truetype"); }

/* Kievit Meduim Italic */
@font-face {
  font-family: Kievit-Medium-Italic;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.ttf") format("truetype"); }

/* Kievit Bold */
@font-face {
  font-family: Kievit-Bold;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.ttf") format("truetype"); }

/* KIEVIT Small Caps */
/* MILO */
/* Milo Slab Light */
@font-face {
  font-family: Milo-Light;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.ttf") format("truetype"); }

/* Milo Slab Light Italic */
@font-face {
  font-family: Milo-Light-Italic;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.ttf") format("truetype"); }

/* Milo Slab Regular */
@font-face {
  font-family: Milo-Regular;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.ttf") format("truetype"); }

/* Milo Slab Regular Italic */
@font-face {
  font-family: Milo-Regular-Italic;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.ttf") format("truetype"); }

/* Milo Slab Medium  */
@font-face {
  font-family: Milo-Medium;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.ttf") format("truetype"); }

/* KIEVIT INCLUDES */
/* MILO INCLUDES */
/*
Import singularity and breakpoints
*/
/*
Import Normalize and Grid settings for nyplHomepage App
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

/*
 * Set up grid
 */
.nyplGrid, .nyplGrid-fullWidth {
  max-width: 1313px;
  padding: 0 14px;
  display: block;
  /* Mobile Layout (1 Column) */
  /* Tablet Portrait Layout (7 Columns) */
  /* Tablet Landscape Layout (9 Columns) */
  /* Desktop Layout (9 Columns) */ }
  @media only screen and (min-width: 768px) {
    .nyplGrid, .nyplGrid-fullWidth {
      padding: 0 36px; } }
  @media only screen and (min-width: 1024px) {
    .nyplGrid, .nyplGrid-fullWidth {
      padding: 0 20px; } }
  .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  @media (min-width: 768px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 11.36364%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 85.22727%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1024px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 9.22509%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 88.65314%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1313px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 9.22509%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 88.65314%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

.nyplGrid {
  margin: 15px auto; }
  .nyplGrid-fullWidth {
    margin: 0 auto; }

/*
Import style rules from NYPL React module components
*/
/* VENDOR PREFIXER
*
*   Params:
*   @name: The name of the property to be prefixed
*      ex: transform
*   @value: The value supplied
*       ex: rotate(42.5deg)
*/
/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('System-Book', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* BORDER RADIUS MIXIN
 * -------------------
 * Usage: @include border-radius(5px);
 * Desc: Creates a border radius
*/
/* OPACITY MIXIN
 * ---------------
 * Usage: @include opacity(0.8);
 * Desc: Supports cross-browser Opacity rules
*/
/* UP ARROW MIXIN
 * ---------------
 * Usage: @include up-arrow(#EEE);
 * Desc: Creates a CSS3 arrow using pseudo :before,:after
 * Params: @color - HEX,RGB color of arrow
 *         @left - Distance from the left of the parent wrapper
 *         @bottom-or-top - String representation of either distance from the TOP or BOTTOM
 *         @distance - Distance from either TOP or BOTTOM
 *         @border-width - pixel width of arrow
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* VALUE CALCULATION MIXIN
 * -----------------------
 * Usage: Makes the properties of an element
 * can be defined by both percentage
 * and pixels.
*/
/* TRANSITION MIXIN
 * ----------------
 * Usage: Applies set argument transition across
 * various browser prefixes.
*/
/* FOCUS RINGS
 * ----------------
 *
 *
*/
/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); }

/* FONT DEFINITIONS
 * ---------------------------
*/
/* MILO INCLUDES */
/* Milo Slab Light */
@font-face {
  font-family: Milo-Light;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.ttf") format("truetype"); }

/* Milo Slab Light Italic */
@font-face {
  font-family: Milo-Light-Italic;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.ttf") format("truetype"); }

/* Milo Slab Regular */
@font-face {
  font-family: Milo-Regular;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.ttf") format("truetype"); }

/* Milo Slab Regular Italic */
@font-face {
  font-family: Milo-Regular-Italic;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.ttf") format("truetype"); }

/* Milo Slab Medium  */
@font-face {
  font-family: Milo-Medium;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.ttf") format("truetype"); }

/* System MIXINS */
/* MILO MIXINS */
/* NYPL ICON FONT RULES */
@font-face {
  font-family: 'nypl-moon';
  src: url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.eot?viik85");
  src: url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.eot?viik85#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.woff2?viik85") format("woff2"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.ttf?viik85") format("truetype"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.woff?viik85") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.svg?viik85#nypl-moon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="nypl-icon-"], [class*=" nypl-icon-"] {
  font-family: 'nypl-moon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.nypl-icon-arrow-meganav-large:before {
  content: "\E801"; }

.nypl-icon-arrow-meganav:before {
  content: "\E800"; }

.nypl-icon-card:before {
  content: "\E623"; }

.nypl-icon-book:before {
  content: "\E624"; }

.nypl-icon-play-large:before {
  content: "\E625"; }

.nypl-icon-play-med:before {
  content: "\E626"; }

.nypl-icon-play-small:before {
  content: "\E603"; }

.nypl-icon-headphones:before {
  content: "\E627"; }

.nypl-icon-solo-x:before {
  content: "\E611"; }

.nypl-icon-mail:before {
  content: "\E61C"; }

.nypl-icon-login:before {
  content: "\E61D"; }

.nypl-icon-logo-mark:before {
  content: "\E61E"; }

.nypl-icon-logo-type:before {
  content: "\E61F"; }

.nypl-icon-locator-no-dot:before {
  content: "\E620"; }

.nypl-icon-locator-small:before {
  content: "\E616"; }

.nypl-icon-locator-large:before {
  content: "\E615"; }

.nypl-icon-burger-nav:before {
  content: "\E614"; }

.nypl-icon-wedge-right:before {
  content: "\E621"; }

.nypl-icon-wedge-left:before {
  content: "\E622"; }

.nypl-icon-wedge-down:before {
  content: "\E600"; }

.nypl-icon-wedge-up:before {
  content: "\E601"; }

.nypl-icon-magnifier-thin:before {
  content: "\E617"; }

.nypl-icon-magnifier-fat:before {
  content: "\E609"; }

.nypl-icon-magnifier-circle:before {
  content: "\E602"; }

.nypl-icon-facebook-circle:before {
  content: "\E62E"; }

.nypl-icon-facebook-circle-large:before {
  content: "\E62C"; }

.nypl-icon-facebook-circle-hover:before {
  content: "\E630"; }

.nypl-icon-twitter-circle:before {
  content: "\E62F"; }

.nypl-icon-twitter-circle-large:before {
  content: "\E62D"; }

.nypl-icon-twitter-circle-hover:before {
  content: "\E631"; }

.nypl-icon-facebook:before {
  content: "\E604"; }

.nypl-icon-twitter:before {
  content: "\E605"; }

.nypl-icon-tumblr:before {
  content: "\E606"; }

.nypl-icon-instagram:before {
  content: "\E618"; }

.nypl-icon-soundcloud:before {
  content: "\E619"; }

.nypl-icon-itunes:before {
  content: "\E61A"; }

.nypl-icon-youtube:before {
  content: "\E61B"; }

.nypl-icon-bldg:before {
  content: "\E607"; }

.nypl-icon-equals-small:before {
  content: "\E608"; }

.nypl-icon-arrow-up:before {
  content: "\E60A"; }

.nypl-icon-arrow-down:before {
  content: "\E629"; }

.nypl-icon-arrow-left:before {
  content: "\E62A"; }

.nypl-icon-arrow-right:before {
  content: "\E62B"; }

.nypl-icon-circle-arrow-left:before {
  content: "\E60B"; }

.nypl-icon-circle-arrow-right:before {
  content: "\E60C"; }

.nypl-icon-circle-wedge-left:before {
  content: "\E60D"; }

.nypl-icon-circle-wedge-right:before {
  content: "\E60E"; }

.nypl-icon-circle-more:before {
  content: "\E60F"; }

.nypl-icon-more-dots:before {
  content: "\E610"; }

.nypl-icon-circle-x:before {
  content: "\E612"; }

.nypl-icon-circle-check:before {
  content: "\E613"; }

.nypl-icon-check-solo:before {
  content: "\E628"; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/* GLOBAL VARIABLE DEFINITIONS
 * ---------------------------
*/
/* DESKTOP VARIABLES */
/* TABLET VARIABLES */
/* SEARCH ICON OFFSET MARGIN */
/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-and-max-screen($min, $max, $orientation)
 * $min - required
 * $max - required
 * $orientation - optional
 * Ex: @include min-and-max-screen(768px, 1024px, landscape) { ... }
 */
/* max-screen($max, $orientation)
 * $max - required
 * $orientation - optional
 * Ex #1: @include max-screen(768px, landscape) { ... }
 * Ex #2: @include max-screen(768px) { ... }
 */
/* min-screen($min, $orientation)
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
/* landscape()
 * Ex: @include landscape() { ... }
 */
/* portrait()
 * Ex: @include portrait() { ... }
 */
/* VENDOR PREFIXER
*
*   Params:
*   @name: The name of the property to be prefixed
*      ex: transform
*   @value: The value supplied
*       ex: rotate(42.5deg)
*/
/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('System-Book', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* BORDER RADIUS MIXIN
 * -------------------
 * Usage: @include border-radius(5px);
 * Desc: Creates a border radius
*/
/* OPACITY MIXIN
 * ---------------
 * Usage: @include opacity(0.8);
 * Desc: Supports cross-browser Opacity rules
*/
/* UP ARROW MIXIN
 * ---------------
 * Usage: @include up-arrow(#EEE);
 * Desc: Creates a CSS3 arrow using pseudo :before,:after
 * Params: @color - HEX,RGB color of arrow
 *         @left - Distance from the left of the parent wrapper
 *         @bottom-or-top - String representation of either distance from the TOP or BOTTOM
 *         @distance - Distance from either TOP or BOTTOM
 *         @border-width - pixel width of arrow
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* VALUE CALCULATION MIXIN
 * -----------------------
 * Usage: Makes the properties of an element
 * can be defined by both percentage
 * and pixels.
*/
/* TRANSITION MIXIN
 * ----------------
 * Usage: Applies set argument transition across
 * various browser prefixes.
*/
/* FOCUS RINGS
 * ----------------
 *
 *
*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
/* NYPL Animations based on DOM Element */
.animateHover {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animateMegaMenuEnter {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animateMegaMenuArrowEnter {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animatedFast {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center; }

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInSlow {
  from {
    opacity: .1; }
  to {
    opacity: 1; } }

@keyframes fadeInSlow {
  from {
    opacity: .1; }
  to {
    opacity: 1; } }

.fadeInSlow {
  -webkit-animation-name: fadeInSlow;
  animation-name: fadeInSlow; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn; }

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown; }

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight; }

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp; }

@-webkit-keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut; }

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown; }

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft; }

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight; }

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp; }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp; }

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

/* SEARCH BOX KEYWORDS FIELD ANIMATION
 * -----------------------------------
 * Usage: The two different kind of 
 * pulse animations for no keywords
 * input.
*/
@media only screen and (min-width: 769px) {
  .keywords-pulse-fade-in {
    -webkit-animation-name: keywordsPulseFadeIn;
    animation-duration: 0.2s;
    animation-name: keywordsPulseFadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out; } }

@-webkit-keyframes keywordsPulseFadeIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 0; }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
    opacity: 0.3; }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1; } }

@keyframes keywordsPulseFadeIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 0; }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
    opacity: 0.3; }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1; } }

@media only screen and (min-width: 769px) {
  .keywords-pulse {
    -webkit-animation-name: keywordsPulse;
    animation-duration: 0.2s;
    animation-name: keywordsPulse;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out; } }

@-webkit-keyframes keywordsPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes keywordsPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

/* Dots Loader Animation
 * -----------------------------------
 * Usage: Used for Loading
*/
.DotsLoader li {
  animation: dotsLoader 2s infinite; }
  .DotsLoader li:nth-child(1n) {
    animation-delay: 0s;
    margin-right: 5px; }
  .DotsLoader li:nth-child(2n) {
    margin-right: 5px;
    animation-delay: 0.25s; }
  .DotsLoader li:nth-child(3n) {
    animation-delay: 0.5s; }

@keyframes dotsLoader {
  0% {
    transform: scale(0.5);
    background: white; }
  50% {
    transform: scale(1);
    background: #1B7FA7; }
  100% {
    transform: scale(0.5);
    background: white; } }

/* NYPL HEADER
 * -----------
 * -- Following BEM naming convention
 * -- Mobile First approach
*/
.header {
  font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
  font-weight: 400;
  background-color: #FFF;
  width: 100%;
  /* Global rules for repetitive link elements */
  /* MOBILE HEADER
   * -------------
  */
  /* DESKTOP HEADER WRAPPER
   * ----------------------
   * Sets the max-width on a desktop and up device.
  */
  /* DESKTOP LOGO
   * ------------
   * Defined width for desktop.
   * position adjustments left.
  */
  /* TOP HEADER BUTTONS (excludes subscribe)
 * ---------------------------------------
 * - Library Card
 * - Donate
*/
  /* Skip Navigation
   * ---------------
   */
  /* Global Alerts
   * -------------
  */
  /* EMAIL SUBSCRIBE BUTTON/FORM
   * ---------------------------
   * - Includes Button rules (also for MyNYPL)
   * - Includes Email Signup rules
  */
  /* MYNYPL LOGIN BUTTON
   * ---------------------------
   * - Includes MyNypl Login rules
  */
  /* MAIN NAVIGATION
   * ---------------
   * - Includes MegaMenu's
   * - Includes Logo text for mobile
   * - Arrows on NavMenu Top Links
  */
  /*
  This is the Mobile (i.e. min-screen(769px)) instance of NavMenu
*/
  /*
  This is the Desktop instance of NavMenu
*/ }
  .header a {
    text-decoration: none; }
  .header a:focus,
  .header button:focus,
  .header input:focus {
    box-shadow: 1px 1px 2px 2px #0f465c;
    outline: 0;
    outline: #135772 solid 3px; }
  .header-mobile {
    min-width: 320px;
    display: block;
    /* Hide MobileHeader on Tablet larger viewports */ }
    @media only screen and (min-width: 769px) {
      .header-mobile {
        display: none; } }
    .header-mobile-logo {
      width: 50px;
      height: 55px; }
    .header-mobile ul button {
      border-radius: 0; }
    .header-mobile-searchForm {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: #1B7FA7; }
      .header-mobile-searchForm fieldset {
        border: none;
        padding: 0;
        margin: 0; }
      .header-mobile-searchForm-inputBox {
        margin: 20px 15px;
        display: block;
        overflow: hidden;
        position: relative; }
        .header-mobile-searchForm-inputBox > input {
          width: 100%;
          height: 66px;
          padding: 0 0 0 25px;
          font-size: 18px;
          font-style: normal;
          line-height: normal !important;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 300; }
        .header-mobile-searchForm-inputBox svg {
          fill: #1da1d4;
          height: 20px;
          left: 0;
          position: absolute;
          top: 24px; }
      .header-mobile-searchForm-mobileControls {
        border-top-style: solid;
        border-color: rgba(102, 102, 102, 0.21);
        border-width: 1px; }
        .header-mobile-searchForm-mobileControls button {
          border: none;
          background-color: transparent;
          color: #FFF;
          padding: 20px 0px;
          text-align: center;
          text-transform: uppercase;
          display: inline-block;
          line-height: normal;
          width: 50%; }
          .header-mobile-searchForm-mobileControls button:first-child {
            border-color: rgba(102, 102, 102, 0.21);
            border-right-style: solid;
            border-width: 1px; }
        .header-mobile-searchForm-mobileControls .label {
          display: inline-block;
          margin: 0 20px 0 0;
          vertical-align: middle;
          font-size: 16px;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400; }
        .header-mobile-searchForm-mobileControls .icon {
          display: inline-block;
          color: #78CCED;
          font-size: 30px;
          vertical-align: middle;
          line-height: normal; }
        .header-mobile-searchForm-mobileControls svg {
          vertical-align: middle;
          fill: #78CCED;
          height: 30px;
          width: 30px; }
    .header-mobile-wrapper {
      width: 100%;
      position: absolute;
      left: 0; }
  .header-wrapper {
    position: relative;
    border-bottom: 2px solid #ED1C24; }
  .header-topWrapper {
    display: none; }
    @media only screen and (min-width: 769px) {
      .header-topWrapper {
        display: block;
        max-width: 1312px;
        margin: 0px 20px;
        min-height: 160px; } }
    @media only screen and (min-width: 1025px) {
      .header-topWrapper {
        margin: 0px auto; } }
  .header-logo {
    overflow: hidden; }
    @media only screen and (min-width: 769px) {
      .header-logo {
        display: block;
        position: relative;
        margin: 0;
        max-width: 90px; } }
    @media only screen and (min-width: 1025px) {
      .header-logo {
        max-width: 260px;
        left: 27px;
        top: 20px; } }
    .header-logo .nyplLionLogo {
      width: 200px;
      height: 112px; }
      @media only screen and (min-width: 1025px) {
        .header-logo .nyplLionLogo {
          width: 225px;
          height: 126px; } }
      @media only screen and (min-width: 769px) {
        .header-logo .nyplLionLogo-text {
          display: none; } }
      @media only screen and (min-width: 1025px) {
        .header-logo .nyplLionLogo-text {
          display: block; } }
  .header-buttons ul {
    margin: 0;
    list-style-type: none; }
    .header-buttons ul li {
      display: inline-block;
      margin-right: 0.18em; }
  .header-buttons li > a,
  .header-buttons > a {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    margin: 0 10px 0 0; }
    .header-buttons li > a:visited,
    .header-buttons > a:visited {
      color: #000; }
    .header-buttons li > a:last-child,
    .header-buttons > a:last-child {
      margin: 0; }
    .header-buttons li > a:focus,
    .header-buttons > a:focus {
      box-shadow: 1px 1px 1px 1px #135772;
      -webkit-outline-color: #135772;
      -moz-outline-color: #135772;
      -ms-outline-color: #135772;
      -o-outline-color: #135772;
      outline-color: #135772;
      outline-style: solid;
      outline-width: 0.1875em;
      padding: 12px; }
  @media only screen and (min-width: 769px) {
    .header-buttons {
      right: 0px; } }
  @media only screen and (min-width: 1025px) {
    .header-buttons {
      right: 20px; } }
  .header-buttons .subscribeButton,
  .header-buttons .myNyplButton {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    font-size: 13px;
    color: #000;
    background-color: #FFF;
    letter-spacing: .04em; }
    .header-buttons .subscribeButton.active,
    .header-buttons .myNyplButton.active {
      -webkit-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -moz-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -ms-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -o-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      background-color: #135772;
      color: #FFF; }
      .header-buttons .subscribeButton.active:visited,
      .header-buttons .myNyplButton.active:visited {
        color: #FFF; }
    .header-buttons .subscribeButton:focus,
    .header-buttons .myNyplButton:focus {
      box-shadow: 1px 1px 1px 1px #135772;
      -webkit-outline-color: #135772;
      -moz-outline-color: #135772;
      -ms-outline-color: #135772;
      -o-outline-color: #135772;
      outline-color: #135772;
      outline-style: solid;
      outline-width: 0.1875em; }
    .header-buttons .subscribeButton:visited,
    .header-buttons .myNyplButton:visited {
      color: #000; }
    .header-buttons .subscribeButton .icon,
    .header-buttons .myNyplButton .icon {
      opacity: 0.8;
      filter: alpha(opacity=80); }
  .header-buttons .donateButton {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-clip: padding-box; }
  .header-buttons .shopTopLink {
    display: none; }
    @media only screen and (min-width: 860px) {
      .header-buttons .shopTopLink {
        display: inline-block; } }
  .header-buttons .dropDownIcon {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    height: 12px;
    -webkit-background-clip: padding-box;
    /* IOS fix */
    background-clip: padding-box;
    /* IOS fix */ }
  .header .emailSubscription-socialMediaLinksWidget ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .header .emailSubscription-socialMediaLinksWidget ul li {
      display: inline-block;
      margin: 0 5px 0 0;
      line-height: 0; }
      .header .emailSubscription-socialMediaLinksWidget ul li:last-child {
        margin-right: 0; }
        .header .emailSubscription-socialMediaLinksWidget ul li:last-child svg {
          margin-left: 10px; }
      .header .emailSubscription-socialMediaLinksWidget ul li a {
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 50px; }
      .header .emailSubscription-socialMediaLinksWidget ul li svg {
        fill: #fff;
        height: 30px;
        width: 30px; }
  .header #skip ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .header #skip a {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    background-color: #FFFFFF;
    color: #1B7FA7;
    display: block;
    font-size: 13px;
    font-weight: 400;
    height: 1px;
    left: -10000px;
    line-height: 22px;
    margin: 5px;
    overflow: hidden;
    padding: 5px 10px;
    position: absolute;
    text-transform: uppercase;
    top: auto;
    width: 1px;
    z-index: 1000; }
    .header #skip a:focus, .header #skip a:active {
      box-shadow: 1px 1px 2px 2px #0c3646;
      height: auto;
      left: auto;
      outline: 0;
      overflow: visible;
      top: 10px;
      width: auto; }
      @media only screen and (min-width: 769px) {
        .header #skip a:focus, .header #skip a:active {
          top: auto; } }
  .header-globalAlerts {
    position: relative;
    border-bottom: 1px solid #908034;
    /* No red bottom-border on tablet and up */ }
    @media only screen and (min-width: 769px) {
      .header-globalAlerts {
        border-bottom: none; } }
    .header-globalAlerts.hide {
      display: none; }
    .header-globalAlerts-box {
      position: relative;
      margin: .5em 1.2em .5em 1.2em;
      text-align: center; }
      .header-globalAlerts-box-item {
        font-size: 16px;
        margin: .5em 0;
        line-height: 1.2em; }
        .header-globalAlerts-box-item p {
          display: block;
          line-height: 1.2em;
          font-size: 16px;
          max-width: 100% !important; }
        .header-globalAlerts-box-item a {
          text-decoration: underline;
          color: #333; }
          .header-globalAlerts-box-item a:visited, .header-globalAlerts-box-item a:active {
            color: #333; }
        .header-globalAlerts-box-item strong {
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 700;
          font-weight: normal; }
        .header-globalAlerts-box-item * {
          font-size: 16px;
          margin: 0;
          padding: 0; }
  .header .emailSubscription-wrapper {
    text-transform: none;
    display: none; }
    .header .emailSubscription-wrapper.active {
      display: block; }
    .header .emailSubscription-wrapper .emailSubscription-pp-link {
      bottom: 11px;
      left: 60px; }
      .header .emailSubscription-wrapper .emailSubscription-pp-link:focus {
        box-shadow: 0; }
    .header .emailSubscription-wrapper .emailSubscription-sc-link {
      bottom: 33px;
      left: 140px; }
    .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox {
      width: 85%; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox:focus {
        outline: #135772 solid 3px; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-eyebrow {
        border-top: 2px solid #FFF;
        color: #fff;
        margin-bottom: 10px;
        width: 25px; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-title {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        color: #fff;
        font-size: 20px;
        font-weight: normal;
        letter-spacing: .03em;
        line-height: 1.2em; }
        .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-title-bestNYPL {
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 500;
          font-weight: normal; }
    .header .emailSubscription-wrapper .emailSubscription-alreadySubscribed ~ .emailSubscription-sc-link {
      left: 140px;
      top: 70px; }
    .header .emailSubscription-wrapper .emailSubscription-alreadySubscribed ~ .emailSubscription-pp-link {
      left: 60px;
      top: 95px; }
    .header .emailSubscription-wrapper .emailSubscription-newEmail {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      display: block;
      font-size: 14px;
      margin-top: 20px; }
      .header .emailSubscription-wrapper .emailSubscription-newEmail a {
        border-bottom: 1px solid #fff;
        color: #fff; }
    .header .emailSubscription-wrapper .emailSubscription-followUs {
      color: #fff;
      text-transform: uppercase;
      margin-top: 40px;
      font-size: 14px; }
    .header .emailSubscription-wrapper .emailSubscription-misc-error {
      color: #fff;
      font-size: 20px;
      line-height: 1.2em;
      padding-top: 40px;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400; }
      .header .emailSubscription-wrapper .emailSubscription-misc-error a {
        border-radius: 20px; }
      .header .emailSubscription-wrapper .emailSubscription-misc-error .icon {
        vertical-align: middle;
        font-size: 25px;
        margin-right: 5px; }
    .header .emailSubscription-wrapper .emailSubscription-newEmail button {
      background-color: transparent;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 2px solid #FFF;
      color: #FFF;
      font-size: 1.125em;
      height: 1.5em;
      padding: 0 0 2px 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-error {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      display: none;
      position: absolute;
      margin-top: 15px;
      margin-left: 0;
      font-size: 13px;
      color: #fff; }
      .header .emailSubscription-wrapper .emailSubscribeForm-error.active {
        display: block; }
      .header .emailSubscription-wrapper .emailSubscribeForm-error .x-icon {
        height: 20px;
        vertical-align: middle;
        margin-right: 0px;
        fill: #fff; }
    .header .emailSubscription-wrapper .emailSubscribeForm-input {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      border: 3px solid #1B7FA7;
      border-radius: 5px;
      color: #776e64;
      display: table-cell;
      font-size: 1em;
      height: 35px;
      margin: 10px 0 0 -3px;
      padding: 2px 5px 2px 11px;
      width: 95%; }
      .header .emailSubscription-wrapper .emailSubscribeForm-input:focus, .header .emailSubscription-wrapper .emailSubscribeForm-input:active {
        background-color: #e6e6e6;
        border-radius: 0;
        box-shadow: inset 0 0 0 0.23438em #135772;
        color: #000;
        outline: 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-submit input {
      border-radius: 20px; }
      .header .emailSubscription-wrapper .emailSubscribeForm-submit input:focus {
        box-shadow: 1px 1px 2px 2px #0f465c;
        outline: 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-submit .check-solo-icon {
      fill: #fff;
      height: 25px;
      margin-top: 66px;
      margin-left: 4px;
      position: absolute; }
  .header .myNyplButton {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
    font-size: 13px;
    color: #000;
    display: block;
    letter-spacing: .04em;
    background-color: #FFF; }
    .header .myNyplButton.loggedIn {
      color: #000; }
    .header .myNyplButton.active {
      -webkit-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -moz-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -ms-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -o-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      background-color: #135772;
      color: #FFF; }
      .header .myNyplButton.active:visited {
        color: #FFF; }
    .header .myNyplButton:visited {
      color: #000; }
    .header .myNyplButton .icon {
      opacity: 0.8;
      filter: alpha(opacity=80); }
  .header .myNypl-wrapper {
    text-transform: none;
    display: none;
    box-sizing: content-box;
    min-height: 180px; }
    .header .myNypl-wrapper.loggedInHeight {
      min-height: 250px; }
    .header .myNypl-wrapper.active {
      display: block; }
    .header .myNypl-wrapper .myNypl-Links {
      color: #fff; }
    .header .myNypl-wrapper .myNypl-eyebrow {
      border-top: 2px solid #FFF;
      color: #fff;
      margin-bottom: 10px;
      width: 25px; }
    .header .myNypl-wrapper .myNypl-title {
      color: #fff;
      font-size: 20px;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      font-weight: normal;
      line-height: 1.2em; }
    .header .myNypl-wrapper .myNypl-patron-greeting {
      color: #fff;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      font-weight: normal;
      letter-spacing: .03em;
      line-height: 1.2em;
      margin: 0;
      text-align: left; }
      .header .myNypl-wrapper .myNypl-patron-greeting.login-indication {
        margin: 0 0 6px 0; }
    .header .myNypl-wrapper .myNypl-login-list {
      text-align: left;
      list-style: none;
      padding: 0px;
      margin: 0px; }
      .header .myNypl-wrapper .myNypl-login-list li a {
        border-radius: 28px;
        box-sizing: content-box; }
        .header .myNypl-wrapper .myNypl-login-list li a:focus {
          box-shadow: 1px 1px 2px 2px #0f465c;
          outline: 0; }
      .header .myNypl-wrapper .myNypl-login-list li svg {
        vertical-align: middle;
        width: 28px;
        padding-right: 5px;
        height: 28px; }
    .header .myNypl-wrapper .myNypl-catalog-btn {
      min-width: 170px; }
    .header .myNypl-wrapper .myNypl-catalog-link:focus {
      box-shadow: 1px 1px 2px 2px #0f465c;
      outline: 0; }
    .header .myNypl-wrapper .myNypl-research-btn {
      min-width: 265px; }
    .header .myNypl-wrapper .myNypl .icon {
      font-size: 25px;
      color: rgba(255, 255, 255, 0.6);
      vertical-align: middle;
      margin-right: 5px; }
    .header .myNypl-wrapper .myNypl .bldgIcon {
      fill: #fff;
      margin: 2px 0;
      height: 20px; }
    .header .myNypl-wrapper .myNypl .logoutIcon {
      fill: #1B7FA7;
      margin: 0 10px 0 0;
      vertical-align: -11px;
      height: 1.3rem;
      width: 1.3rem;
      margin: 5px 10px 5px 0; }
    .header .myNypl-wrapper .myNypl .patron-greeting-wrapper:focus {
      box-shadow: 1px 1px 2px 2px #0f465c;
      outline: 0; }
  .header .mobileMyNypl-wrapper {
    display: inline-block;
    position: inherit; }
    .header .mobileMyNypl-wrapper.active {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header .mobileMyNypl-wrapper.active {
          display: none; } }
  .header .loginIcon.active {
    stroke: none; }
  .header .loginIcon-loggedIn {
    fill: #000;
    stroke: none; }
    .header .loginIcon-loggedIn.active {
      fill: #FFF;
      opacity: 1; }
  .header .myNyplButton.loginIcon-loggedIn {
    height: 20px;
    left: 143px;
    position: absolute;
    top: 7px; }
  .header .myNyplButton-iconWrapper {
    margin: 0 0 0 22px; }
  .header .mobileMyNypl {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1000; }
    .header .mobileMyNypl.active {
      box-shadow: 2px 2px 3px 4px rgba(100, 100, 100, 0.25);
      display: flex;
      flex-flow: row wrap; }
    .header .mobileMyNypl-greeting {
      box-sizing: content-box;
      color: #FFF;
      flex: 1 100%;
      padding: 22px 0 0 11px;
      position: absolute;
      text-align: left; }
      .header .mobileMyNypl-greeting .login-indication {
        margin: 0 0 30px; }
      .header .mobileMyNypl-greeting:focus {
        -webkit-outline-color: #fff;
        -moz-outline-color: #fff;
        -ms-outline-color: #fff;
        -o-outline-color: #fff;
        outline-color: #fff;
        outline: inset;
        outline-style: solid;
        outline-width: 0.1875em; }
    .header .mobileMyNypl a:focus {
      -webkit-outline-color: #fff;
      -moz-outline-color: #fff;
      -ms-outline-color: #fff;
      -o-outline-color: #fff;
      outline-color: #fff;
      outline: inset;
      outline-style: solid;
      outline-width: 0.1875em;
      position: relative; }
    .header .mobileMyNypl a:first-child svg {
      vertical-align: bottom;
      margin-top: 5px; }
    .header .mobileMyNypl .bldgIcon {
      fill: #fff;
      height: 25px;
      margin: 5px 0; }
    .header .mobileMyNypl .catalogLink {
      border-right: solid 2px #2b2b2b;
      flex: 1 1 40%;
      margin: 0 1px 50px 2px; }
    .header .mobileMyNypl .researchLink {
      flex: 1 1 40%;
      margin: 0 1px 50px 2px; }
      .header .mobileMyNypl .researchLink + .mobileMyNypl-catalog-link {
        border-bottom: 2px solid #000;
        margin-bottom: 0; }
  .header .login-indication {
    font-style: italic; }
  .header-mobile-navMenu {
    position: relative;
    display: block; }
    .header-mobile-navMenu-searchBox-wrapper {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-searchBox-wrapper {
          display: inline-table;
          vertical-align: middle;
          margin: 0 10px 0 5px; } }
      @media only screen and (min-width: 792px) {
        .header-mobile-navMenu-searchBox-wrapper {
          margin: 0 10px; } }
    .header-mobile-navMenu-searchButton {
      display: none;
      position: relative;
      background-color: transparent;
      border: none;
      color: #1B7FA7;
      background-color: #FFF;
      padding: 10px 10px 12px;
      margin: 3px 0 0;
      line-height: normal !important;
      white-space: normal !important;
      -webkit-border-radius: 0;
      border-radius: 0;
      background-clip: padding-box;
      /* ACTIVE STATE */ }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-searchButton {
          display: block; } }
      .header-mobile-navMenu-searchButton:hover {
        border: none !important; }
      .header-mobile-navMenu-searchButton.active {
        background-color: #1B7FA7;
        color: #FFFFFF;
        -webkit-transition: background-color 0.35s linear 0.08s;
        -moz-transition: background-color 0.35s linear 0.08s;
        -ms-transition: background-color 0.35s linear 0.08s;
        -o-transition: background-color 0.35s linear 0.08s;
        transition: background-color 0.35s linear 0.08s; }
        .header-mobile-navMenu-searchButton.active .svgIcon {
          fill: #FFF; }
      .header-mobile-navMenu-searchButton-text {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        display: inline-block;
        font-size: 18px;
        line-height: 1em;
        padding: 0 20px 0 0;
        border-bottom: 3px solid #1B7FA7; }
      .header-mobile-navMenu-searchButton-icon {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 8px;
        fill: #1B7FA7; }
    .header-mobile-navMenu-desktopSearchBox {
      display: none;
      background-color: #1B7FA7;
      color: #000000;
      left: 0px;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 999;
      /* Rules for Desktop Open State */ }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-desktopSearchBox {
          display: block;
          top: 44px; } }
      .header-mobile-navMenu-desktopSearchBox .desktopSearch-form {
        position: relative;
        margin: 0 auto;
        max-width: 1312px;
        height: 100%;
        padding: 0; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form fieldset {
          border: none;
          padding: 0;
          margin: 0;
          line-height: normal; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
          display: block;
          text-align: left;
          margin: 50px 0px 25px 20px;
          padding: 0;
          overflow: hidden; }
          @media only screen and (min-width: 1025px) {
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
              margin-left: 140px; } }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox label {
            color: #FFF;
            display: inline-block;
            font-size: 18px;
            margin: 0 0 10px 0;
            padding: 0 !important;
            line-height: normal; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input {
            font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
            font-weight: 400;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-clip: padding-box;
            background-color: #fff;
            border: 0;
            color: #000;
            display: block;
            font-size: 22px;
            font-style: normal;
            font-weight: 400;
            height: 100%;
            line-height: normal;
            margin: 0;
            min-height: 2em;
            padding: 10px 0 10px 20px;
            width: 85%; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:focus, .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:active {
              background-color: #e6e6e6;
              border-radius: 0;
              box-shadow: inset 0 0 0 0.1875em #135772;
              outline: 0; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox svg {
            display: none; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
          display: block;
          margin: 0 0 40px 20px;
          text-align: left; }
          @media only screen and (min-width: 1025px) {
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
              margin-left: 140px; } }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label {
            position: relative;
            display: inline-block;
            margin: 0 0 0 -10px;
            padding: 2px;
            color: #FFF;
            font-size: 18px; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label:before {
              background-color: #FFFFFF;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              background-clip: padding-box;
              content: '';
              display: inline-block;
              height: 10px;
              left: 0;
              margin-right: 10px;
              position: relative;
              width: 10px;
              top: 1px;
              text-align: center; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio] {
            /* Hide original inputs, but still accessible for input related functions */
            opacity: 0;
            filter: alpha(opacity=0); }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:checked + label:before {
            content: '\2022';
            color: #000000;
            font-size: 18px;
            line-height: 11px; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:focus + label {
            box-shadow: 1px 1px 1px 1px #135772;
            -webkit-outline-color: #135772;
            -moz-outline-color: #135772;
            -ms-outline-color: #135772;
            -o-outline-color: #135772;
            outline-color: #135772;
            outline-style: solid;
            outline-width: 0.1875em; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls .catalogOption {
            margin-right: 25px; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button {
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-clip: padding-box;
            background-color: transparent;
            background: transparent;
            border: 2px solid #FFF;
            height: 72px;
            line-height: normal;
            position: absolute;
            padding: 18px;
            margin: 0 20px 0 0;
            right: 0px;
            top: 67px;
            width: 72px; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button:focus {
              box-shadow: 0px 0px 1px 4px #135772;
              outline: 0; }
    .header-mobile-navMenu-wrapper {
      /* Controls the display of Mobile View */ }
      .header-mobile-navMenu-wrapper.mobileActive {
        box-shadow: 0 6px 4px rgba(100, 100, 100, 0.4);
        line-height: normal;
        margin-top: -2.5px;
        position: absolute;
        width: 100%;
        z-index: 1000;
        /* Displays NavMenu on Mobile with proper class on parent */
        /* Only display Logo Text on Mobile */
        /* Only display BottomButtons on Mobile */ }
        @media only screen and (min-width: 769px) {
          .header-mobile-navMenu-wrapper.mobileActive {
            position: initial;
            margin-top: 0px;
            width: initial; } }
        .header-mobile-navMenu-wrapper.mobileActive #navMenu-List {
          display: block;
          line-height: normal; }
        .header-mobile-navMenu-wrapper.mobileActive svg {
          display: block; }
        .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons {
          display: block; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons a:focus {
            -webkit-outline-color: #fff;
            -moz-outline-color: #fff;
            -ms-outline-color: #fff;
            -o-outline-color: #fff;
            outline-color: #fff;
            outline: inset;
            outline-style: solid;
            outline-width: 0.1875em;
            position: relative; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .subscribeLink svg {
            height: 20px;
            margin-left: 10px;
            width: 30px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .shopLink {
            width: 98.5%; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons svg {
            fill: #fff;
            height: 20px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .library-card-icon {
            height: 20px;
            margin-left: 10px;
            width: 33px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .shopping-bag-icon {
            height: 25px;
            width: 30px; }
        .header-mobile-navMenu-wrapper.mobileActive .nyplLionLogo {
          top: 20px;
          left: -110px;
          fill: #fff;
          position: absolute;
          height: 120px; }
          .header-mobile-navMenu-wrapper.mobileActive .nyplLionLogo-lion {
            display: none; }
    .header-mobile-navMenu-list {
      display: none;
      background-color: #2B2B2B;
      padding: 10px 0;
      margin: 0;
      list-style-type: none;
      text-align: right;
      vertical-align: middle; }
      .header-mobile-navMenu-list .navMenuItem {
        padding: 8px 0;
        margin: 3.5px 15px 0px 0;
        display: block; }
        @media only screen and (min-width: 769px) {
          .header-mobile-navMenu-list .navMenuItem {
            display: inline-block;
            padding: 0;
            line-height: normal !important;
            margin: 0 0 0 15px; }
            .header-mobile-navMenu-list .navMenuItem:first-child {
              margin-left: 0px; } }
        .header-mobile-navMenu-list .navMenuItem-link {
          position: relative;
          display: inline-block;
          padding: 0;
          margin: 0;
          color: #FFF;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400;
          font-size: 18px; }
          .header-mobile-navMenu-list .navMenuItem-link:hover {
            cursor: pointer; }
          .header-mobile-navMenu-list .navMenuItem-link:visited, .header-mobile-navMenu-list .navMenuItem-link:active, .header-mobile-navMenu-list .navMenuItem-link:focus, .header-mobile-navMenu-list .navMenuItem-link:hover {
            text-decoration: none; }
          .header-mobile-navMenu-list .navMenuItem-link:focus {
            box-shadow: 1px 1px 1px 1px #fff;
            -webkit-outline-color: #fff;
            -moz-outline-color: #fff;
            -ms-outline-color: #fff;
            -o-outline-color: #fff;
            outline-color: #fff;
            outline-style: solid;
            outline-width: 0.1875em; }
  .header-navMenu {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0px; }
    @media only screen and (min-width: 1025px) {
      .header-navMenu {
        position: relative;
        width: auto;
        bottom: inherit; } }
    .header-navMenu-searchBox-wrapper {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header-navMenu-searchBox-wrapper {
          display: inline-table;
          vertical-align: middle;
          margin: 0 10px 0 5px; } }
      @media only screen and (min-width: 792px) {
        .header-navMenu-searchBox-wrapper {
          margin: 0 10px; } }
    .header-navMenu-searchButton {
      display: none;
      position: relative;
      background-color: transparent;
      border: none;
      color: #1B7FA7;
      background-color: #FFF;
      padding: 10px 10px 12px;
      margin: 3px 0 0;
      line-height: normal !important;
      white-space: normal !important;
      -webkit-border-radius: 0;
      border-radius: 0;
      background-clip: padding-box;
      /* ACTIVE STATE */ }
      @media only screen and (min-width: 769px) {
        .header-navMenu-searchButton {
          display: block; } }
      .header-navMenu-searchButton:hover {
        border: none !important; }
      .header-navMenu-searchButton.active {
        background-color: #1B7FA7;
        color: #FFFFFF;
        -webkit-transition: background-color 0.35s linear 0.08s;
        -moz-transition: background-color 0.35s linear 0.08s;
        -ms-transition: background-color 0.35s linear 0.08s;
        -o-transition: background-color 0.35s linear 0.08s;
        transition: background-color 0.35s linear 0.08s; }
        .header-navMenu-searchButton.active .svgIcon {
          fill: #FFF; }
      .header-navMenu-searchButton-text {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        display: inline-block;
        font-size: 18px;
        line-height: 1em;
        padding: 0 20px 0 0;
        border-bottom: 3px solid #1B7FA7; }
      .header-navMenu-searchButton-icon {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 8px;
        fill: #1B7FA7; }
    .header-navMenu-desktopSearchBox {
      display: none;
      background-color: #1B7FA7;
      color: #000000;
      left: 0px;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 999;
      /* Rules for Desktop Open State */ }
      @media only screen and (min-width: 769px) {
        .header-navMenu-desktopSearchBox {
          display: block;
          top: 44px; } }
      .header-navMenu-desktopSearchBox .desktopSearch-form {
        position: relative;
        margin: 0 auto;
        max-width: 1312px;
        height: 100%;
        padding: 0; }
        .header-navMenu-desktopSearchBox .desktopSearch-form fieldset {
          border: none;
          padding: 0;
          margin: 0;
          line-height: normal; }
        .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
          display: block;
          text-align: left;
          margin: 50px 0px 25px 20px;
          padding: 0;
          overflow: hidden; }
          @media only screen and (min-width: 1025px) {
            .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
              margin-left: 140px; } }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox label {
            color: #FFF;
            display: inline-block;
            font-size: 18px;
            margin: 0 0 10px 0;
            padding: 0 !important;
            line-height: normal; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input {
            font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
            font-weight: 400;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-clip: padding-box;
            background-color: #fff;
            border: 0;
            color: #000;
            display: block;
            font-size: 22px;
            font-style: normal;
            font-weight: 400;
            height: 100%;
            line-height: normal;
            margin: 0;
            min-height: 2em;
            padding: 10px 0 10px 20px;
            width: 85%; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:focus, .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:active {
              background-color: #e6e6e6;
              border-radius: 0;
              box-shadow: inset 0 0 0 0.1875em #135772;
              outline: 0; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox svg {
            display: none; }
        .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
          display: block;
          margin: 0 0 40px 20px;
          text-align: left; }
          @media only screen and (min-width: 1025px) {
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
              margin-left: 140px; } }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label {
            position: relative;
            display: inline-block;
            margin: 0 0 0 -10px;
            padding: 2px;
            color: #FFF;
            font-size: 18px; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label:before {
              background-color: #FFFFFF;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              background-clip: padding-box;
              content: '';
              display: inline-block;
              height: 10px;
              left: 0;
              margin-right: 10px;
              position: relative;
              width: 10px;
              top: 1px;
              text-align: center; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio] {
            /* Hide original inputs, but still accessible for input related functions */
            opacity: 0;
            filter: alpha(opacity=0); }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:checked + label:before {
            content: '\2022';
            color: #000000;
            font-size: 18px;
            line-height: 11px; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:focus + label {
            box-shadow: 1px 1px 1px 1px #135772;
            -webkit-outline-color: #135772;
            -moz-outline-color: #135772;
            -ms-outline-color: #135772;
            -o-outline-color: #135772;
            outline-color: #135772;
            outline-style: solid;
            outline-width: 0.1875em; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls .catalogOption {
            margin-right: 25px; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button {
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-clip: padding-box;
            background-color: transparent;
            background: transparent;
            border: 2px solid #FFF;
            height: 72px;
            line-height: normal;
            position: absolute;
            padding: 18px;
            margin: 0 20px 0 0;
            right: 0px;
            top: 67px;
            width: 72px; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button:focus {
              box-shadow: 0px 0px 1px 4px #135772;
              outline: 0; }
    .header-navMenu-wrapper {
      max-width: 1312px;
      text-align: right;
      margin: 0 auto; }
      .header-navMenu-wrapper .mobileBottomButtons {
        /* Hide on all viewports, trigger display based on class */
        display: none; }
      .header-navMenu-wrapper .nyplLionLogo {
        display: none; }
    .header-navMenu-list {
      display: none;
      list-style-type: none;
      text-align: right;
      vertical-align: middle;
      margin: 0;
      background-color: #FFF;
      padding: 0; }
      @media only screen and (min-width: 769px) {
        .header-navMenu-list {
          display: inline-table; } }
      .header-navMenu-list .navMenuItem {
        display: inline-block;
        padding: 0;
        line-height: normal !important;
        margin: 0 0 0 15px; }
        .header-navMenu-list .navMenuItem:first-child {
          margin-left: 0px; }
        .header-navMenu-list .navMenuItem-link {
          position: relative;
          display: inline-block;
          margin: 0;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400;
          font-size: 18px;
          color: #000;
          padding: 2px 0;
          border-bottom: 3px solid transparent;
          -webkit-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -moz-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -ms-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -o-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s; }
          .header-navMenu-list .navMenuItem-link:hover {
            cursor: pointer; }
          .header-navMenu-list .navMenuItem-link:visited, .header-navMenu-list .navMenuItem-link:active, .header-navMenu-list .navMenuItem-link:focus, .header-navMenu-list .navMenuItem-link:hover {
            text-decoration: none; }
          .header-navMenu-list .navMenuItem-link:active, .header-navMenu-list .navMenuItem-link:hover, .header-navMenu-list .navMenuItem-link:focus {
            border-color: #E32B31;
            color: #E32B31; }
  .header .fundraisingBanner {
    max-height: 0;
    visibility: hidden;
    overflow: hidden; }
    .header .fundraisingBanner * {
      margin-top: 0;
      margin-bottom: 0; }
    .header .fundraisingBanner.show {
      max-height: 300px;
      display: block;
      visibility: visible;
      -webkit-transition: max-height 0.75s linear;
      -moz-transition: max-height 0.75s linear;
      -ms-transition: max-height 0.75s linear;
      -o-transition: max-height 0.75s linear;
      transition: max-height 0.75s linear; }
    .header .fundraisingBanner-wrapper {
      position: relative;
      display: block;
      height: 200px; }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-wrapper {
          max-width: 1312px;
          margin: 0 20px;
          height: 205px; } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-wrapper {
          margin: 0 auto; } }
      .header .fundraisingBanner-wrapper > a {
        display: block;
        width: 100%;
        height: 100%; }
    .header .fundraisingBanner-imageWrapper {
      display: none;
      line-height: 0; }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-imageWrapper {
          display: inline-block;
          width: 250px;
          position: absolute;
          bottom: -4px; } }
      .header .fundraisingBanner-imageWrapper img {
        max-width: 100%; }
    .header .fundraisingBanner-headline, .header .fundraisingBanner-description {
      display: block;
      color: #FFF;
      text-shadow: 2px 2px 5px rgba(100, 100, 100, 0.75); }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-headline, .header .fundraisingBanner-description {
          display: inline-block;
          position: absolute; } }
    .header .fundraisingBanner-headline {
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      text-align: center;
      padding: 32px 0 0;
      line-height: normal; }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-headline {
          padding-top: 30px;
          font-size: 28px; } }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-headline {
          width: 75%;
          text-align: left;
          padding: 0;
          font-size: 32px;
          top: 20%;
          left: 200px;
          transform: translate(0, -20%); } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-headline {
          width: 63%;
          top: 25%;
          left: 210px;
          transform: translate(0, -25%);
          font-size: 42px; } }
      @media only screen and (min-width: 1120px) {
        .header .fundraisingBanner-headline {
          width: 66%;
          top: 35%;
          left: 55%;
          transform: translate(-55%, -35%); } }
    .header .fundraisingBanner-description {
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
      padding: 5px 5px 10px 5px;
      line-height: normal; }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-description {
          font-size: 22px; } }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-description {
          width: 75%;
          text-align: left;
          padding: 0;
          font-size: 24px;
          top: 49%;
          left: 200px;
          transform: translate(0, -49%); } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-description {
          width: 63%;
          font-size: 30px;
          top: 65%;
          left: 210px;
          transform: translate(0, -65%); } }
      @media only screen and (min-width: 1120px) {
        .header .fundraisingBanner-description {
          width: 66%;
          top: 78%;
          left: 55%;
          transform: translate(-55%, -78%); } }
    .header .fundraisingBanner-button {
      line-height: normal;
      color: #FFF;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 700;
      background-color: #E32B31;
      padding: 10px 20px;
      text-transform: uppercase;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      background-clip: padding-box;
      border: 3px solid #FFF;
      font-size: 18px;
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%, -5%); }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-button {
          padding: 15px 30px;
          font-size: 22px; } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-button {
          left: 98%;
          bottom: 50%;
          transform: translate(-98%, 50%); } }
    .header .fundraisingBanner-closeButton {
      position: absolute;
      top: 2%;
      right: 2%;
      background-color: #07818d;
      color: #FFF;
      border: none;
      font-size: 12px;
      padding: 5px 7px !important;
      line-height: normal;
      -webkit-transition: unset;
      -moz-transition: unset;
      -ms-transition: unset;
      -o-transition: unset;
      transition: unset;
      -webkit-border-radius: 0px;
      border-radius: 0px;
      background-clip: padding-box; }
      .header .fundraisingBanner-closeButton:hover {
        background-color: #07818d;
        border: none;
        color: #FFF; }

#logoutIframe {
  display: none; }

/* CSS for Screen Reader Texts */
.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }
  .visuallyHidden:focus, .visuallyHidden:active {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.dropDownIcon {
  width: 15px;
  vertical-align: middle;
  margin: 0 0 0 5px;
  padding-bottom: 3px; }

/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('Kievit-Regular', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* VISUALLY HIDE ELEMENTS
 * ---------------------
 * Usage: Visually hides an element from the screen
 * but is still readable by screen readers for accessibility.
*/
/* DISPLAY VISUALLY HIDDEN ELEMENTS
 * ---------------------
 * Usage: Displays an element that is visually hidden.
*/
/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-screen($min, $orientation) 
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
.footer {
  background: #54514A;
  clear: both;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 360px;
  padding: 15px 20px 100px;
  position: relative; }
  .footer a {
    color: #fff;
    font-weight: 400;
    margin: 0 0.2rem;
    text-decoration: none; }
    .footer a:hover {
      text-decoration: underline; }
    .footer a:focus {
      background-color: #54514A;
      outline: solid 2px #fff; }
  .footer .svgIcon {
    fill: #fff; }
  .footer .logoText {
    position: absolute;
    top: 20px; }
    .footer .logoText .nyplTextLogo {
      height: 94px;
      width: 115px; }
    @media only screen and (min-width: 768px) {
      .footer .logoText {
        top: 20px;
        left: 6%; } }
    @media only screen and (min-width: 1024px) {
      .footer .logoText {
        top: 35px; } }
  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 75px; }
    .footer-content .footerLinks {
      font-size: 16px;
      line-height: 35px;
      margin: 0;
      padding: 0;
      order: 2;
      list-style: none;
      text-align: right;
      width: 100%; }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks {
          width: auto; } }
      .footer-content .footerLinks .linkItemList {
        list-style-type: none; }
        .footer-content .footerLinks .linkItemList li {
          position: absolute;
          left: -10000px;
          top: auto;
          width: 1px;
          height: 1px;
          overflow: hidden; }
          .footer-content .footerLinks .linkItemList li:first-child {
            position: relative;
            left: 0;
            height: auto;
            width: 100%; }
          @media only screen and (min-width: 768px) {
            .footer-content .footerLinks .linkItemList li {
              position: relative;
              left: 0;
              height: auto;
              width: 100%; } }
      .footer-content .footerLinks ul {
        padding: 0; }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks li {
          float: left;
          width: 135px; }
          .footer-content .footerLinks li:first-child {
            width: 110px; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .footerLinks li {
          width: 155px; }
          .footer-content .footerLinks li:first-child {
            margin-right: 110px; }
          .footer-content .footerLinks li:nth-child(2) {
            margin-right: 60px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .footerLinks li:first-child, .footer-content .footerLinks li:nth-child(2) {
          width: 155px;
          margin-right: 0; } }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks {
          order: 1;
          margin: 0;
          font-size: 13px;
          line-height: 25px;
          text-align: left; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .footerLinks {
          font-size: 14px;
          font-weight: 400;
          line-height: 30px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .footerLinks {
          margin-right: 70px;
          order: 2; } }
    .footer-content .socialMedia {
      order: 1;
      margin: 20px 0 15px 0;
      list-style-type: none;
      text-align: right;
      width: 200px; }
      .footer-content .socialMedia li {
        display: inline-block;
        width: 45px; }
        .footer-content .socialMedia li a {
          display: block;
          color: #FFF;
          font-size: 40px;
          line-height: 45px;
          text-decoration: none; }
          .footer-content .socialMedia li a svg {
            width: 36px;
            height: 36px; }
          @media only screen and (min-width: 768px) {
            .footer-content .socialMedia li a {
              font-size: 50px; } }
        .footer-content .socialMedia li [class^="icon-"],
        .footer-content .socialMedia li [class*=" icon-"] {
          padding: 0; }
        .footer-content .socialMedia li [data-icon]:before,
        .footer-content .socialMedia li [class^="icon-"]:before,
        .footer-content .socialMedia li [class*=" icon-"]:before {
          margin: 0 5px 0 0 !important; }
      @media only screen and (min-width: 768px) {
        .footer-content .socialMedia {
          margin-top: 30px; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .socialMedia {
          margin-top: 30px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .socialMedia {
          margin-top: 0;
          width: 280px; } }
    @media only screen and (min-width: 768px) {
      .footer-content {
        margin: 0;
        right: 6%;
        position: absolute;
        align-items: flex-end; } }
    @media only screen and (min-width: 1500px) {
      .footer-content {
        flex-direction: row-reverse;
        align-items: flex-start; } }
  @media only screen and (min-width: 768px) {
    .footer-content--secondary {
      position: absolute;
      left: 6%;
      top: 140px;
      width: 400px; } }
  @media only screen and (min-width: 1024px) {
    .footer-content--secondary {
      top: 170px; } }
  @media only screen and (min-width: 1500px) {
    .footer-content--secondary {
      top: 140px; } }
  .footer-content--secondary .facade img {
    width: 100%;
    height: auto; }
  .footer-content--secondary .copyright {
    margin: 35px 0 0 0;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    text-align: right; }
    @media only screen and (min-width: 768px) {
      .footer-content--secondary .copyright {
        font-size: 11px; } }
    @media only screen and (min-width: 1024px) {
      .footer-content--secondary .copyright {
        font-size: 13px; } }
  @media only screen and (min-width: 768px) {
    .footer {
      padding: 15px 0; } }
  @media only screen and (min-width: 1024px) {
    .footer {
      padding: 30px 0; } }

/* NYPL ICON FONT RULES */
@font-face {
  font-family: 'nypl-moon';
  src: url("//ux-static.nypl.org/nypl-moon/nypl-moon.eot?viik85");
  src: url("//ux-static.nypl.org/nypl-moon/nypl-moon.eot?viik85#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.woff2?viik85") format("woff2"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.ttf?viik85") format("truetype"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.woff?viik85") format("woff"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.svg?viik85#nypl-moon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="nypl-icon-"], [class*=" nypl-icon-"] {
  font-family: 'nypl-moon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.nypl-icon-circle-wedge-left:before {
  content: "\E60D"; }

.nypl-icon-circle-wedge-right:before {
  content: "\E60E"; }

.book-cover {
  height: 280px;
  display: inline-block;
  position: relative; }
  .book-cover img {
    max-height: 250px; }
  .book-cover .itemOverlay {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background-color: #333333;
    height: 150px; }
    .book-cover .itemOverlay p {
      color: #fff;
      padding: 0 15px;
      margin: 0; }
    .book-cover .itemOverlay .title {
      padding-top: 15px;
      text-align: right; }
    .book-cover .itemOverlay .details {
      margin: 10px 0;
      position: absolute;
      bottom: 0;
      width: 100%; }
      .book-cover .itemOverlay .details svg {
        margin-left: -5px;
        height: 32px;
        width: 32px; }
      .book-cover .itemOverlay .details-author {
        font-size: 16px;
        margin-bottom: 10px; }
      .book-cover .itemOverlay .details-genre, .book-cover .itemOverlay .details-audience {
        text-transform: uppercase;
        font-size: 12px; }

.slick-slider {
  margin-bottom: 0px !important; }

.slick-track {
  height: 310px; }

.slick-book-item {
  margin-right: 15px; }

.slick-prev {
  left: 36%; }
  .slick-prev:before {
    content: "\E60D" !important; }

.slick-next {
  left: 52%; }
  .slick-next:before {
    content: "\E60E" !important; }

.slick-prev, .slick-next {
  display: block;
  width: 35px;
  height: 35px;
  top: 335px; }
  .slick-prev:before, .slick-next:before {
    font-size: 35px;
    font-family: 'nypl-moon' !important;
    opacity: 1; }
  .slick-prev:focus, .slick-next:focus {
    outline: 3px auto #3b99fc; }

.slick-disabled {
  display: none !important; }

/*
Import style rules from App components
*/
.hpRow .leftColumn {
  border-top: 2px solid #E32B31;
  position: relative; }
  .hpRow .leftColumn > h2 {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    color: #E32B31;
    font-size: 20px;
    font-weight: normal;
    line-height: 1em;
    margin: 15px 0;
    padding: 0; }
    .hpRow .leftColumn > h2 a {
      color: #E32B31;
      display: block;
      text-decoration: none; }
    .hpRow .leftColumn > h2 :hover {
      color: #1B7FA7; }
    .hpRow .leftColumn > h2 :focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }

.hpRow .seeMoreWrapper {
  clear: both;
  height: 65px;
  margin: 0;
  text-align: center; }
  .hpRow .seeMoreWrapper .seeMoreLink {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    border: 2px solid #E32B31;
    border-radius: 22px;
    color: #E32B31;
    padding: 14px 18px 12px 14px;
    position: relative;
    text-decoration: none;
    width: 25px; }
    .hpRow .seeMoreWrapper .seeMoreLink:hover {
      border: 2px solid #1B7FA7;
      color: #1B7FA7; }
      .hpRow .seeMoreWrapper .seeMoreLink:hover svg {
        fill: #1B7FA7; }
    .hpRow .seeMoreWrapper .seeMoreLink:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
    .hpRow .seeMoreWrapper .seeMoreLink svg {
      fill: #E32B31;
      height: 25px;
      position: relative;
      top: 8px;
      width: 25px; }

@media (min-width: 768px) {
  .hpRow .leftColumn {
    text-align: right; }
    .hpRow .leftColumn > h2 {
      padding: 0;
      margin: 8px 0 12px; }
    .hpRow .leftColumn .seeMoreWrapper .seeMoreLink {
      position: relative;
      top: initial; } }

.staffPicksRow .leftColumn > h2 a, .bookListRow .leftColumn > h2 a {
  color: #FFF;
  text-decoration: none; }
  .staffPicksRow .leftColumn > h2 a:hover, .bookListRow .leftColumn > h2 a:hover {
    color: #FFF; }

.staffPicksRow .seeMoreWrapper .seeMoreLink, .bookListRow .seeMoreWrapper .seeMoreLink {
  font-family: "Kievit-Medium", "Helvetica", "arial";
  border: 2px solid #FFF;
  border-radius: 22px;
  color: #FFF;
  padding: 14px 18px 12px 14px;
  position: relative;
  text-decoration: none;
  width: 25px; }
  .staffPicksRow .seeMoreWrapper .seeMoreLink svg, .bookListRow .seeMoreWrapper .seeMoreLink svg {
    fill: #FFF; }
  .staffPicksRow .seeMoreWrapper .seeMoreLink:hover, .bookListRow .seeMoreWrapper .seeMoreLink:hover {
    border: 2px solid #FFF;
    color: #FFF; }
    .staffPicksRow .seeMoreWrapper .seeMoreLink:hover svg, .bookListRow .seeMoreWrapper .seeMoreLink:hover svg {
      fill: #FFF; }

@media (min-width: 1024px) {
  .whatsHappeningRow .leftColumn {
    margin-top: 48px; } }

@media only screen and (min-width: 768px) {
  .bookListRow .leftColumn > h2 {
    letter-spacing: -.04em;
    margin-top: 15px; } }

@media only screen and (min-width: 1024px) {
  .bookListRow .leftColumn > h2 {
    margin-top: 15px;
    letter-spacing: normal; } }

@media only screen and (min-width: 1313px) {
  .bookListRow .leftColumn > h2 {
    margin-top: 30px; } }

.hpContentBanner {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  padding-bottom: 10px; }
  @media only screen and (min-width: 768px) {
    .hpContentBanner {
      margin-bottom: 15px;
      padding-bottom: 0px; } }
  @media only screen and (min-width: 1313px) {
    .hpContentBanner {
      margin-bottom: 30px; } }
  .hpContentBanner a {
    text-decoration: none; }
  .hpContentBanner-wrapper img.loaded {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1; }
  .hpContentBanner-wrapper img.notLoaded {
    opacity: 0; }
  .hpContentBanner-imageBox {
    background-color: #89806F;
    height: 220px;
    margin: 0;
    padding: 0; }
    @media only screen and (min-width: 480px) {
      .hpContentBanner-imageBox {
        height: 330px; } }
    @media only screen and (min-width: 560px) {
      .hpContentBanner-imageBox {
        height: 390px; } }
    @media only screen and (min-width: 768px) {
      .hpContentBanner-imageBox {
        height: 320px; } }
    @media only screen and (min-width: 1313px) {
      .hpContentBanner-imageBox {
        height: 400px; } }
    .hpContentBanner-imageBox > img {
      max-width: 100%;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: center 0;
      object-position: center 0; }
  .hpContentBanner-content {
    max-width: 1313px;
    padding: 0 14px;
    margin: 15px auto 0px;
    display: block;
    line-height: normal;
    white-space: normal;
    color: #000; }
    @media only screen and (min-width: 768px) {
      .hpContentBanner-content {
        max-width: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 18%;
        top: 30px;
        color: #FFF; } }
    @media only screen and (min-width: 1025px) {
      .hpContentBanner-content {
        max-width: 1313px;
        width: 100%;
        margin: 0 auto;
        left: 10px;
        right: 0; } }
    @media only screen and (min-width: 1313px) {
      .hpContentBanner-content {
        top: 60px;
        left: 0; } }
    .hpContentBanner-content a {
      background-color: #FFF;
      color: #FFF;
      display: block;
      width: 62%; }
      .hpContentBanner-content a:focus, .hpContentBanner-content a:hover {
        outline: #135772 solid 3px;
        box-shadow: 1px 1px 2px 2px #0f465c; }
        .hpContentBanner-content a:focus h1, .hpContentBanner-content a:hover h1 {
          text-decoration: underline; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content a:focus .seeMoreLink, .hpContentBanner-content a:hover .seeMoreLink {
            border: 2px solid #FFF; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content a {
          background-color: #333;
          padding: 15px;
          width: 55%; } }
      @media only screen and (min-width: 1025px) {
        .hpContentBanner-content a {
          margin-left: 11.5%;
          width: 40%; } }
    .hpContentBanner-content-tag {
      color: #070707;
      margin: 15px 0 0 0;
      font-family: "Kievit-Medium", "Helvetica", "arial";
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.05em; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-tag {
          color: #FFF;
          margin: 0; } }
    .hpContentBanner-content-title {
      margin: 15px 0 0 0;
      color: #070707;
      font-family: "Milo-Regular", "serif";
      font-size: 27px;
      font-weight: 400; }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-title {
          font-size: 36px; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-title {
          color: #FFF;
          margin-top: 10px; } }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-title {
          font-size: 36px;
          max-width: 100%; } }
    .hpContentBanner-content-details {
      margin: 20px 0 30px 0;
      color: #070707; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-details {
          color: #FFF;
          margin: 25px 20px 0 0; } }
    .hpContentBanner-content-date {
      font-family: "Kievit-Medium", "Helvetica", "arial";
      font-weight: normal;
      display: block;
      margin: 0 0 7.5px; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-date {
          margin-bottom: 12.5px; } }
    .hpContentBanner-content-location {
      font-family: "Kievit-Book", "Helvetica", "arial";
      font-weight: normal;
      display: block;
      margin: 7.5px 0 0; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-location {
          margin-top: 12.5px; } }
    .hpContentBanner-content-description {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      margin: 20px 0 30px 0;
      color: #070707; }
      .hpContentBanner-content-description > p {
        font-family: "Kievit-Book", "Helvetica", "arial";
        font-size: 16px;
        font-weight: 300;
        letter-spacing: .03em;
        line-height: 24px;
        margin-bottom: 0;
        margin-top: 10px; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-description {
          position: relative;
          left: 0;
          height: auto;
          width: 100%;
          color: #FFF;
          width: auto;
          margin: 0; }
          .hpContentBanner-content-description p {
            width: 90%; } }
      @media only screen and (min-width: 1025px) {
        .hpContentBanner-content-description {
          max-width: 80%; }
          .hpContentBanner-content-description p {
            width: 100%; } }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-description {
          margin-top: 0;
          max-width: 300px; } }
    .hpContentBanner-content .seeMoreLink-container {
      position: relative;
      height: 0; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content .seeMoreLink-container {
          height: 40px; } }
    .hpContentBanner-content .seeMoreLink {
      top: -3.5rem;
      right: -7rem;
      font-family: "Kievit-Medium", "Helvetica", "arial";
      border: 2px solid #E32B31;
      border-radius: 27px;
      color: #000;
      background: #FFF;
      text-decoration: none;
      position: absolute;
      height: 27px;
      padding: 3px 4px;
      text-align: center;
      vertical-align: middle;
      font-size: 1rem; }
      @media only screen and (min-width: 370px) {
        .hpContentBanner-content .seeMoreLink {
          right: -8rem; } }
      @media only screen and (min-width: 480px) {
        .hpContentBanner-content .seeMoreLink {
          right: -10rem; } }
      @media only screen and (min-width: 600px) {
        .hpContentBanner-content .seeMoreLink {
          right: -12rem; } }
      @media only screen and (min-width: 800px) {
        .hpContentBanner-content .seeMoreLink {
          top: -3rem;
          right: -15.5rem; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content .seeMoreLink {
          border: 2px solid #333;
          background: #333;
          border-radius: 27px;
          color: #FFF;
          float: right;
          right: auto;
          position: relative;
          top: auto; } }
      .hpContentBanner-content .seeMoreLink span {
        padding: 0 5px;
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content .seeMoreLink span {
            top: -7px;
            position: relative;
            left: 0;
            height: auto;
            width: 100%; } }
      .hpContentBanner-content .seeMoreLink svg {
        fill: #E32B31;
        height: 25px;
        position: relative;
        top: 1px;
        width: 25px; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content .seeMoreLink svg {
            fill: #FFF; } }

.hpWhatsHappening-section {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
  color: #000; }
  .hpWhatsHappening-section .eventItem + .eventItem {
    display: none; }
  .hpWhatsHappening-section a {
    text-decoration: none; }
  .hpWhatsHappening-section h3 {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    color: #E32B31;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    margin: 10px 0;
    letter-spacing: 0.05em; }
    .hpWhatsHappening-section h3:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpWhatsHappening-section ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .hpWhatsHappening-section .eventItem {
    display: inline-block;
    font-family: "Kievit-Medium", "Helvetica", "arial"; }
    .hpWhatsHappening-section .eventItem:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
    .hpWhatsHappening-section .eventItem img {
      width: 28.57143%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .hpWhatsHappening-section .eventItem-title {
      width: 64.28571%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none;
      color: #000;
      line-height: 22px;
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-weight: normal; }
    .hpWhatsHappening-section .eventItem p {
      width: 64.28571%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none;
      font-size: 12px;
      line-height: 20px;
      margin: 5px 0 0 0; }
    .hpWhatsHappening-section .eventItem .eventItem-date {
      text-transform: uppercase; }
    .hpWhatsHappening-section .eventItem .eventItem-location {
      margin-top: 0; }
    .hpWhatsHappening-section .eventItem a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }

.hpWhatsHappening-titleWrapper {
  display: none; }
  @media (min-width: 768px) {
    .hpWhatsHappening-titleWrapper {
      display: block; } }
  @media (min-width: 1024px) {
    .hpWhatsHappening-titleWrapper {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

@media (min-width: 1024px) {
  .hpWhatsHappening-titleWrapper::before {
    width: 38.77551%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    content: '';
    height: 48px;
    border-bottom: 2px solid #E32B31; } }

@media (min-width: 1313px) {
  .hpWhatsHappening-titleWrapper::before {
    width: 51.49254%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; } }

.hpWhatsHappening .titleTabs {
  color: #000;
  display: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-family: "Kievit-Medium", "Helvetica", "arial"; }
  @media (min-width: 768px) {
    .hpWhatsHappening .titleTabs {
      display: table;
      margin: 0 0 20px 0;
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpWhatsHappening .titleTabs li {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        padding: 10px 26px;
        font-size: 12px;
        width: 75px;
        font-weight: 400;
        line-height: 14px;
        border-bottom: 2px solid #E32B31; }
        .hpWhatsHappening .titleTabs li:first-child.active {
          background-color: #FFF; }
        .hpWhatsHappening .titleTabs li.active {
          border: 2px solid #E32B31;
          border-bottom: none;
          color: #E32B31; }
        .hpWhatsHappening .titleTabs li:focus {
          outline: #135772 solid 3px;
          box-shadow: 1px 1px 2px 2px #0f465c; } }
  @media (min-width: 1024px) {
    .hpWhatsHappening .titleTabs {
      width: 61.53846%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1313px) {
    .hpWhatsHappening .titleTabs {
      width: 48.71795%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

@media (min-width: 768px) {
  .hpWhatsHappening-section {
    min-height: 195px;
    display: none;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
    .hpWhatsHappening-section h3 {
      display: none; }
    .hpWhatsHappening-section.active {
      display: block; }
      .hpWhatsHappening-section.active .eventItem {
        display: block;
        margin-bottom: 10px; }
        .hpWhatsHappening-section.active .eventItem-title {
          font-size: 18px; }
        .hpWhatsHappening-section.active .eventItem p {
          font-size: 12px;
          line-height: 21px; }
        .hpWhatsHappening-section.active .eventItem:nth-child(odd) {
          width: 48.27586%;
          clear: right;
          float: left;
          margin-left: 0;
          margin-right: 3.44828%;
          clear: both; }
        .hpWhatsHappening-section.active .eventItem:nth-child(even) {
          width: 48.27586%;
          clear: right;
          float: right;
          margin-right: 0; }
        .hpWhatsHappening-section.active .eventItem:focus {
          outline: #135772 solid 3px;
          box-shadow: 1px 1px 2px 2px #0f465c; } }

@media (min-width: 1024px) {
  .hpWhatsHappening-section {
    min-height: 320px; }
    .hpWhatsHappening-section.active .eventItem {
      margin-bottom: 15px; }
      .hpWhatsHappening-section.active .eventItem p, .hpWhatsHappening-section.active .eventItem-title {
        margin: 10px 0 0 0; }
      .hpWhatsHappening-section.active .eventItem:nth-child(n) {
        width: 61.53846%;
        clear: right;
        float: right;
        margin-right: 0; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) img {
          width: 23.07692%;
          float: left;
          margin-right: -100%;
          margin-left: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) p,
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-title {
          width: 74.35897%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-title,
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-date {
          margin-top: 5px;
          width: 74.35897%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-location {
          font-size: 12px;
          line-height: 21px;
          margin-top: 0; }
      .hpWhatsHappening-section.active .eventItem:nth-child(1) {
        width: 35.89744%;
        float: left;
        margin-right: -100%;
        margin-left: 0;
        clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) p,
        .hpWhatsHappening-section.active .eventItem:nth-child(1) img,
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
          width: 100%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
          font-size: 26px;
          line-height: 28px; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-date {
          font-size: 13px;
          margin-top: 15px;
          line-height: 17px;
          width: 100%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-location {
          font-size: 13px;
          line-height: 17px;
          margin-top: 5px;
          text-transform: none; } }

@media (min-width: 1313px) {
  .hpWhatsHappening-section.active .eventItem:nth-child(n) {
    width: 48.71795%;
    clear: right;
    float: right;
    margin-right: 0; }
    .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-date {
      font-size: 13px;
      margin-top: 5px; }
    .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-location {
      font-size: 12px;
      line-height: 17px;
      margin-top: 0;
      text-transform: none;
      width: 74.35897%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
  .hpWhatsHappening-section.active .eventItem:nth-child(1) {
    width: 48.71795%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) p,
    .hpWhatsHappening-section.active .eventItem:nth-child(1) img,
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-date {
      line-height: 16px; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-location {
      font-size: 14px;
      line-height: 20px;
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

.hpLearn {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .hpLearn-wrapper {
    margin-bottom: 5%; }
  .hpLearn a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-decoration: none; }
    .hpLearn a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpLearn img {
    width: 33%;
    height: auto; }
  .hpLearn h2, .hpLearn-title {
    font-family: "Kievit-Book", "Helvetica", "arial";
    color: #333;
    font-size: 18px;
    flex: 1 1 66%;
    margin-left: 5%; }
  .hpLearn p {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  @media (min-width: 768px) {
    .hpLearn-wrapper {
      flex: 0 48%;
      margin-bottom: 2%;
      /* (100-48*2)/2 */ }
      .hpLearn-wrapper a {
        display: block; }
      .hpLearn-wrapper img {
        width: 100%; }
      .hpLearn-wrapper h2,
      .hpLearn-wrapper .hpLearn-title {
        font-size: 20px;
        line-height: 20px;
        margin-top: 12px; } }
  @media (min-width: 1024px) {
    .hpLearn-wrapper {
      flex: 0 32%;
      margin-bottom: 2%;
      /* (100-32*3)/2 */ }
      .hpLearn-wrapper h2,
      .hpLearn-wrapper .hpLearn-title {
        font-size: 20px;
        font-weight: 400;
        line-height: 18px;
        margin-top: 15px; } }
  @media (min-width: 1313px) {
    .hpLearn-wrapper {
      flex: 0 23%;
      margin-bottom: 4%;
      /* (100-23*3)/2 */ } }

.bookListRow .leftColumn {
  border: none; }

.bookListRow .rightColumn {
  margin-bottom: 30px;
  color: #FFFFFF; }
  @media only screen and (min-width: 768px) {
    .bookListRow .rightColumn {
      margin-top: 15px;
      margin-bottom: 10px; } }
  @media only screen and (min-width: 1024px) {
    .bookListRow .rightColumn {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1313px) {
    .bookListRow .rightColumn {
      margin-top: 30px; } }

.hpBookList .slick {
  /* -- Tablet Portrait Layout --
     * NOTE: Made the whole right side one column and let the plugin/css
     * create the width of the carousel.
    */
  /* -- Tablet Landscape Layout -- */
  /* -- Tablet Landscape Layout -- */ }
  .hpBookList .slick-track {
    height: 350px; }
  .hpBookList .slick-slide .book-cover .itemOverlay {
    font-family: "Kievit-Book", "Helvetica", "arial";
    background-color: #E32B31;
    bottom: -30px;
    font-weight: 400;
    height: 130px; }
    .hpBookList .slick-slide .book-cover .itemOverlay .title {
      text-align: left;
      font-weight: 400; }
    .hpBookList .slick-slide .book-cover .itemOverlay .details {
      margin: 10px 0 5px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .details-author {
        font-size: 16px;
        margin-bottom: 15px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .details-audience, .hpBookList .slick-slide .book-cover .itemOverlay .details-genre {
        font-size: 12px;
        margin-bottom: 5px; }
  .hpBookList .slick-slide .book-cover:focus {
    outline: #135772 solid 3px;
    box-shadow: 1px 1px 2px 2px #0f465c; }
  @media (min-width: 768px) {
    .hpBookList .slick {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpBookList .slick-track {
        height: 300px; }
      .hpBookList .slick-slide .book-cover .itemOverlay {
        bottom: 0px;
        height: 140px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .title {
          font-weight: 400;
          font-size: 18px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .details-author {
          font-size: 16px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .details-audience, .hpBookList .slick-slide .book-cover .itemOverlay .details-genre {
          font-size: 12px; }
      .hpBookList .slick-book-item {
        margin-right: 20px; }
        .hpBookList .slick-book-item img {
          max-height: 216px; }
      .hpBookList .slick-prev, .hpBookList .slick-next {
        top: 144px; }
      .hpBookList .slick-prev {
        left: -16%; }
      .hpBookList .slick-next {
        left: -9%; } }
  @media (min-width: 1024px) {
    .hpBookList .slick {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpBookList .slick-slide .book-cover .itemOverlay {
        bottom: -50px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .title {
          font-size: 20px; }
      .hpBookList .slick-track {
        height: 330px; }
      .hpBookList .slick-book-item {
        margin-right: 33px; }
        .hpBookList .slick-book-item img {
          max-height: 289px; }
      .hpBookList .slick-prev {
        left: -12%; }
      .hpBookList .slick-next {
        left: -6%; } }
  @media (min-width: 1313px) {
    .hpBookList .slick-track {
      height: 340px; }
    .hpBookList .slick-slide .book-cover .itemOverlay {
      bottom: -60px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .title {
        font-size: 22px; }
    .hpBookList .slick-book-item img {
      max-height: 360px; }
    .hpBookList .slick-prev {
      left: -10%; }
    .hpBookList .slick-next {
      left: -6%; } }

.staffPicksRow {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }
  @media only screen and (min-width: 768px) {
    .staffPicksRow {
      position: relative;
      left: 0;
      height: auto;
      width: 100%;
      padding-top: 15px;
      min-height: 350px; } }
  @media only screen and (min-width: 1024px) {
    .staffPicksRow {
      padding-top: 30px;
      min-height: 375px; } }
  @media only screen and (min-width: 1313px) {
    .staffPicksRow {
      min-height: 520px; } }
  .staffPicksRow .leftColumn {
    border-top: 2px solid #FFF; }
  .staffPicksRow .seeMoreWrapper {
    margin-top: 30px; }

@media (min-width: 768px) {
  .hpStaffPicks-wrapper:first-child {
    width: 48.27586%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .hpStaffPicks-wrapper:last-child {
    width: 48.27586%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .hpStaffPicks-pick {
    display: block;
    height: 200px;
    width: 100%;
    color: #000;
    position: relative; }
    .hpStaffPicks-pick .quoteBackground {
      display: block;
      width: auto;
      height: 100%;
      margin: 0 55px 0 0;
      background: #fff;
      z-index: 0; }
      .hpStaffPicks-pick .quoteBackground:after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 30px;
        border-width: 20px 20px 0 0;
        border-style: solid;
        border-color: #fff transparent;
        display: block;
        width: 0; }
    .hpStaffPicks-pick .description {
      font-family: "Milo-Light-Italic", "serif";
      position: absolute;
      left: 0;
      bottom: 10%;
      width: auto;
      z-index: 100;
      margin: 0;
      padding: 0 120px 0 15px;
      color: #000;
      font-size: 20px;
      font-weight: normal;
      line-height: 22px; }
    .hpStaffPicks-pick .link {
      display: block;
      z-index: 101;
      position: absolute;
      right: 0;
      bottom: 0; }
      .hpStaffPicks-pick .link img {
        max-height: 175px;
        max-width: 115px;
        padding: 0;
        margin: 0;
        border: 0;
        float: left; }
      .hpStaffPicks-pick .link:focus {
        outline: #135772 solid 3px;
        box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpStaffPicks-staff {
    color: #fff;
    margin-top: 15px; }
    .hpStaffPicks-staff img {
      height: 60px;
      width: 60px;
      float: left; }
    .hpStaffPicks-staff .svgIcon {
      fill: #c51d12;
      float: left;
      height: 50px;
      width: 50px;
      margin: 12px 10px 0 0; }
    .hpStaffPicks-staff .name {
      margin: 0;
      font-size: 18px;
      padding-top: 20px;
      padding-bottom: 4px;
      font-weight: 400;
      font-family: "Kievit-Book", "Helvetica", "arial"; }
    .hpStaffPicks-staff .title {
      font-size: 15px;
      margin: 0;
      font-weight: 400;
      font-family: "Kievit-Book", "Helvetica", "arial"; } }

@media (min-width: 1024px) {
  .hpStaffPicks-pick {
    height: 264px; }
    .hpStaffPicks-pick .quoteBackground {
      margin-right: 75px; }
    .hpStaffPicks-pick .description {
      font-size: 27px;
      line-height: 32px;
      padding-right: 157px; } }
    @media only screen and (min-width: 1024px) and (min-width: 1140px) {
      .hpStaffPicks-pick .description {
        line-height: 35px; } }
    @media only screen and (min-width: 1024px) and (min-width: 1234px) {
      .hpStaffPicks-pick .description {
        line-height: 37px; } }

@media (min-width: 1024px) {
    .hpStaffPicks-pick .link img {
      max-height: 233px;
      max-width: 153px; }
  .hpStaffPicks-staff {
    margin-left: 15px; }
    .hpStaffPicks-staff .name {
      padding-top: 20px;
      font-size: 16px; } }

@media (min-width: 1313px) {
  .hpStaffPicks-pick {
    height: 374px; }
    .hpStaffPicks-pick .quoteBackground {
      margin-right: 105px; }
    .hpStaffPicks-pick .description {
      font-size: 38px;
      line-height: 38px;
      padding: 0 220px 0 30px;
      bottom: 13%; }
    .hpStaffPicks-pick .link img {
      max-height: 320px;
      max-width: 212px; }
  .hpStaffPicks-staff {
    margin-top: 20px;
    margin-left: 5px; }
    .hpStaffPicks-staff .svgIcon {
      height: 60px;
      width: 60px;
      margin: 22px 10px 0 0; }
    .hpStaffPicks-staff .name {
      padding-top: 34px;
      font-size: 20px; }
    .hpStaffPicks-staff .title {
      font-size: 15px; } }

.ofNoteRow .seeMoreWrapper {
  margin-top: 30px; }

.ofNoteRow .hpOfNote {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .ofNoteRow .hpOfNote-wrapper {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 15px; }
  .ofNoteRow .hpOfNote a {
    text-decoration: none; }
    .ofNoteRow .hpOfNote a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .ofNoteRow .hpOfNote img {
    width: 28.57143%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .ofNoteRow .hpOfNote h2, .ofNoteRow .hpOfNote-title {
    width: 64.28571%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial";
    font-size: 18px; }
  .ofNoteRow .hpOfNote p {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial"; }
  @media (min-width: 768px) {
    .ofNoteRow .hpOfNote-wrapper:first-child {
      width: 48.27586%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper:last-child {
      width: 48.27586%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper img {
      width: 64.28571%;
      clear: right;
      float: left;
      margin-left: 0;
      margin-right: 7.14286%;
      clear: both; }
    .ofNoteRow .hpOfNote-wrapper h2,
    .ofNoteRow .hpOfNote-wrapper .hpOfNote-title {
      width: 28.57143%;
      clear: right;
      float: right;
      margin-right: 0;
      line-height: 20px;
      font-size: 18px;
      margin: 5px 0 15px; } }
  @media (min-width: 1024px) {
    .ofNoteRow .hpOfNote-wrapper:first-child {
      width: 48.71795%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper:last-child {
      width: 48.71795%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper img {
      width: 44.44444%;
      clear: right;
      float: left;
      margin-left: 0;
      margin-right: 11.11111%;
      clear: both; }
    .ofNoteRow .hpOfNote-wrapper h2,
    .ofNoteRow .hpOfNote-wrapper .hpOfNote-title {
      width: 44.44444%;
      clear: right;
      float: right;
      margin-right: 0;
      font-size: 18px;
      font-weight: 400;
      line-height: 19px; }
    .ofNoteRow .hpOfNote-wrapper p {
      position: relative;
      left: 0;
      height: auto;
      width: 100%;
      width: 44.44444%;
      clear: right;
      float: right;
      margin-right: 0;
      font-size: 15px;
      font-weight: 400;
      line-height: 19px;
      margin: 0 0 15px 0; } }

.blogsRow .seeMoreWrapper {
  margin-top: 30px; }

.blogsRow .hpBlogs-item {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  margin-bottom: 15px; }
  .blogsRow .hpBlogs-item:last-child {
    margin-bottom: 0px; }

.blogsRow .hpBlogs-imageBox {
  width: 28.57143%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none; }
  .blogsRow .hpBlogs-imageBox .rectangularImage {
    max-width: 100%; }

.blogsRow .hpBlogs-contentBox {
  width: 64.28571%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none; }

.blogsRow .hpBlogs-title {
  font-size: 18px;
  color: #333;
  margin: 0;
  line-height: 1.25em;
  font-family: "Milo-Regular", "serif"; }

.blogsRow .hpBlogs-description {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: #333;
  font-family: "Kievit-Book", "Helvetica", "arial"; }

.blogsRow .hpBlogs-authorBox {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }
  .blogsRow .hpBlogs-authorBox-name, .blogsRow .hpBlogs-authorBox-title {
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial"; }
  .blogsRow .hpBlogs-authorBox-image {
    width: 50px;
    height: 50px;
    padding: 0;
    float: left;
    margin: 0px 10px 0 0;
    border-radius: 50%; }
  .blogsRow .hpBlogs-authorBox .svgIcon {
    padding: 0;
    stroke: transparent;
    fill: #7b7b7b;
    opacity: 0.3;
    height: 50px;
    width: 50px;
    margin: 0px 10px 0 0;
    float: left; }

.blogsRow .hpBlogs a:focus {
  outline: #135772 solid 3px;
  box-shadow: 1px 1px 2px 2px #0f465c; }

@media (min-width: 768px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-imageBox {
    width: 48.27586%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .blogsRow .hpBlogs-contentBox {
    width: 48.27586%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-title {
    font-size: 24px;
    line-height: 1.15em; }
  .blogsRow .hpBlogs-authorBox {
    position: relative;
    left: 0;
    height: auto;
    width: 100%;
    margin-top: 10px; }
    .blogsRow .hpBlogs-authorBox-name {
      margin: 5px 0 0 0;
      font-size: 18px; }
    .blogsRow .hpBlogs-authorBox-title {
      margin: 5px 0 0 0;
      font-size: 13px; } }

@media (min-width: 1024px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 30px; }
  .blogsRow .hpBlogs-imageBox {
    width: 35.89744%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .blogsRow .hpBlogs-contentBox {
    width: 61.53846%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-description {
    position: relative;
    left: 0;
    height: auto;
    width: 100%;
    margin: 10px 0 0 0;
    font-size: 15px;
    line-height: 1.35em; } }

@media (min-width: 1313px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 45px; }
  .blogsRow .hpBlogs-imageBox {
    width: 48.71795%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    text-align: right; }
    .blogsRow .hpBlogs-imageBox .rectangularImage {
      max-width: 448px; }
  .blogsRow .hpBlogs-contentBox {
    width: 48.71795%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; } }

/*
Import utils and fonts
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-and-max-screen($min, $max, $orientation)
 * $min - required
 * $max - required
 * $orientation - optional
 * Ex: @include min-and-max-screen(768px, 1024px, landscape) { ... }
 */
/* max-screen($max, $orientation)
 * $max - required
 * $orientation - optional
 * Ex #1: @include max-screen(768px, landscape) { ... }
 * Ex #2: @include max-screen(768px) { ... }
 */
/* min-screen($min, $orientation)
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
/* NYPL HOMEPAGE COLOR PALETTE
 * ---------------------------
 * For reference, go to https://bitbucket.org/NYPL/dgx-ethyl-style-guide
 * and set up the Ethyl Style Guide application.
*/
/* NYPL Primary Red */
/* Secondry Red Color */
/* Coolgray*/
/* Reusable Utility Color Classes for Fonts/Background Color */
.bgPrimaryLibraryRed {
  background-color: #E32B31; }

.bgSecondaryLibraryRed {
  background-color: #B80F15; }

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden; }

.displayVisuallyHidden {
  position: relative;
  left: 0;
  height: auto;
  width: 100%; }

/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('Kievit-Regular', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* FONT DEFINITIONS
 * ---------------------------
*/
/* KIEVIT */
/* Kievit Light */
@font-face {
  font-family: Kievit-Light;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Light.ttf") format("truetype"); }

/* Kievit Book */
@font-face {
  font-family: Kievit-Book;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Book.ttf") format("truetype"); }

/* Kievit Book Italic */
@font-face {
  font-family: Kievit-Book-Italic;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-BookIta.ttf") format("truetype"); }

/* Kievit Medium */
@font-face {
  font-family: Kievit-Medium;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Medi.ttf") format("truetype"); }

/* Kievit Meduim Italic */
@font-face {
  font-family: Kievit-Medium-Italic;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-MediIta.ttf") format("truetype"); }

/* Kievit Bold */
@font-face {
  font-family: Kievit-Bold;
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.eot");
  src: url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.woff") format("woff"), url("//ux-static.nypl.org/ff_kievit_web/KievitWeb-Bold.ttf") format("truetype"); }

/* KIEVIT Small Caps */
/* MILO */
/* Milo Slab Light */
@font-face {
  font-family: Milo-Light;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.ttf") format("truetype"); }

/* Milo Slab Light Italic */
@font-face {
  font-family: Milo-Light-Italic;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.ttf") format("truetype"); }

/* Milo Slab Regular */
@font-face {
  font-family: Milo-Regular;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular/MiloSlabWebPro.ttf") format("truetype"); }

/* Milo Slab Regular Italic */
@font-face {
  font-family: Milo-Regular-Italic;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.ttf") format("truetype"); }

/* Milo Slab Medium  */
@font-face {
  font-family: Milo-Medium;
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot");
  src: url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot?#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff"), url("//ux-static.nypl.org/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.ttf") format("truetype"); }

/* KIEVIT INCLUDES */
/* MILO INCLUDES */
/*
Import singularity and breakpoints
*/
/*
Import Normalize and Grid settings for nyplHomepage App
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

/*
 * Set up grid
 */
.nyplGrid, .nyplGrid-fullWidth {
  max-width: 1313px;
  padding: 0 14px;
  display: block;
  /* Mobile Layout (1 Column) */
  /* Tablet Portrait Layout (7 Columns) */
  /* Tablet Landscape Layout (9 Columns) */
  /* Desktop Layout (9 Columns) */ }
  @media only screen and (min-width: 768px) {
    .nyplGrid, .nyplGrid-fullWidth {
      padding: 0 36px; } }
  @media only screen and (min-width: 1024px) {
    .nyplGrid, .nyplGrid-fullWidth {
      padding: 0 20px; } }
  .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  @media (min-width: 768px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 11.36364%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 85.22727%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1024px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 9.22509%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 88.65314%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1313px) {
    .nyplGrid .leftColumn, .nyplGrid-fullWidth .leftColumn {
      width: 9.22509%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .nyplGrid .rightColumn, .nyplGrid-fullWidth .rightColumn, .nyplGrid .seeMoreWrapper, .nyplGrid-fullWidth .seeMoreWrapper {
      width: 88.65314%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

.nyplGrid {
  margin: 15px auto; }
  .nyplGrid-fullWidth {
    margin: 0 auto; }

/*
Import style rules from NYPL React module components
*/
/* VENDOR PREFIXER
*
*   Params:
*   @name: The name of the property to be prefixed
*      ex: transform
*   @value: The value supplied
*       ex: rotate(42.5deg)
*/
/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('System-Book', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* BORDER RADIUS MIXIN
 * -------------------
 * Usage: @include border-radius(5px);
 * Desc: Creates a border radius
*/
/* OPACITY MIXIN
 * ---------------
 * Usage: @include opacity(0.8);
 * Desc: Supports cross-browser Opacity rules
*/
/* UP ARROW MIXIN
 * ---------------
 * Usage: @include up-arrow(#EEE);
 * Desc: Creates a CSS3 arrow using pseudo :before,:after
 * Params: @color - HEX,RGB color of arrow
 *         @left - Distance from the left of the parent wrapper
 *         @bottom-or-top - String representation of either distance from the TOP or BOTTOM
 *         @distance - Distance from either TOP or BOTTOM
 *         @border-width - pixel width of arrow
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* VALUE CALCULATION MIXIN
 * -----------------------
 * Usage: Makes the properties of an element
 * can be defined by both percentage
 * and pixels.
*/
/* TRANSITION MIXIN
 * ----------------
 * Usage: Applies set argument transition across
 * various browser prefixes.
*/
/* FOCUS RINGS
 * ----------------
 *
 *
*/
/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); }

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); }

/* FONT DEFINITIONS
 * ---------------------------
*/
/* MILO INCLUDES */
/* Milo Slab Light */
@font-face {
  font-family: Milo-Light;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light/MiloSlabWebPro-Light.ttf") format("truetype"); }

/* Milo Slab Light Italic */
@font-face {
  font-family: Milo-Light-Italic;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-light-italic/MiloSlabWebPro-LightItalic.ttf") format("truetype"); }

/* Milo Slab Regular */
@font-face {
  font-family: Milo-Regular;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular/MiloSlabWebPro.ttf") format("truetype"); }

/* Milo Slab Regular Italic */
@font-face {
  font-family: Milo-Regular-Italic;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-regular-italic/MiloSlabWebPro-Italic.ttf") format("truetype"); }

/* Milo Slab Medium  */
@font-face {
  font-family: Milo-Medium;
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot");
  src: url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.eot?#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.woff") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/milo-web/milo-slab-pro-medium/MiloSlabWebPro-Medium.ttf") format("truetype"); }

/* System MIXINS */
/* MILO MIXINS */
/* NYPL ICON FONT RULES */
@font-face {
  font-family: 'nypl-moon';
  src: url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.eot?viik85");
  src: url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.eot?viik85#iefix") format("embedded-opentype"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.woff2?viik85") format("woff2"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.ttf?viik85") format("truetype"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.woff?viik85") format("woff"), url("//d2znry4lg8s0tq.cloudfront.net/nypl-moon/nypl-moon.svg?viik85#nypl-moon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="nypl-icon-"], [class*=" nypl-icon-"] {
  font-family: 'nypl-moon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.nypl-icon-arrow-meganav-large:before {
  content: "\E801"; }

.nypl-icon-arrow-meganav:before {
  content: "\E800"; }

.nypl-icon-card:before {
  content: "\E623"; }

.nypl-icon-book:before {
  content: "\E624"; }

.nypl-icon-play-large:before {
  content: "\E625"; }

.nypl-icon-play-med:before {
  content: "\E626"; }

.nypl-icon-play-small:before {
  content: "\E603"; }

.nypl-icon-headphones:before {
  content: "\E627"; }

.nypl-icon-solo-x:before {
  content: "\E611"; }

.nypl-icon-mail:before {
  content: "\E61C"; }

.nypl-icon-login:before {
  content: "\E61D"; }

.nypl-icon-logo-mark:before {
  content: "\E61E"; }

.nypl-icon-logo-type:before {
  content: "\E61F"; }

.nypl-icon-locator-no-dot:before {
  content: "\E620"; }

.nypl-icon-locator-small:before {
  content: "\E616"; }

.nypl-icon-locator-large:before {
  content: "\E615"; }

.nypl-icon-burger-nav:before {
  content: "\E614"; }

.nypl-icon-wedge-right:before {
  content: "\E621"; }

.nypl-icon-wedge-left:before {
  content: "\E622"; }

.nypl-icon-wedge-down:before {
  content: "\E600"; }

.nypl-icon-wedge-up:before {
  content: "\E601"; }

.nypl-icon-magnifier-thin:before {
  content: "\E617"; }

.nypl-icon-magnifier-fat:before {
  content: "\E609"; }

.nypl-icon-magnifier-circle:before {
  content: "\E602"; }

.nypl-icon-facebook-circle:before {
  content: "\E62E"; }

.nypl-icon-facebook-circle-large:before {
  content: "\E62C"; }

.nypl-icon-facebook-circle-hover:before {
  content: "\E630"; }

.nypl-icon-twitter-circle:before {
  content: "\E62F"; }

.nypl-icon-twitter-circle-large:before {
  content: "\E62D"; }

.nypl-icon-twitter-circle-hover:before {
  content: "\E631"; }

.nypl-icon-facebook:before {
  content: "\E604"; }

.nypl-icon-twitter:before {
  content: "\E605"; }

.nypl-icon-tumblr:before {
  content: "\E606"; }

.nypl-icon-instagram:before {
  content: "\E618"; }

.nypl-icon-soundcloud:before {
  content: "\E619"; }

.nypl-icon-itunes:before {
  content: "\E61A"; }

.nypl-icon-youtube:before {
  content: "\E61B"; }

.nypl-icon-bldg:before {
  content: "\E607"; }

.nypl-icon-equals-small:before {
  content: "\E608"; }

.nypl-icon-arrow-up:before {
  content: "\E60A"; }

.nypl-icon-arrow-down:before {
  content: "\E629"; }

.nypl-icon-arrow-left:before {
  content: "\E62A"; }

.nypl-icon-arrow-right:before {
  content: "\E62B"; }

.nypl-icon-circle-arrow-left:before {
  content: "\E60B"; }

.nypl-icon-circle-arrow-right:before {
  content: "\E60C"; }

.nypl-icon-circle-wedge-left:before {
  content: "\E60D"; }

.nypl-icon-circle-wedge-right:before {
  content: "\E60E"; }

.nypl-icon-circle-more:before {
  content: "\E60F"; }

.nypl-icon-more-dots:before {
  content: "\E610"; }

.nypl-icon-circle-x:before {
  content: "\E612"; }

.nypl-icon-circle-check:before {
  content: "\E613"; }

.nypl-icon-check-solo:before {
  content: "\E628"; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/* GLOBAL VARIABLE DEFINITIONS
 * ---------------------------
*/
/* DESKTOP VARIABLES */
/* TABLET VARIABLES */
/* SEARCH ICON OFFSET MARGIN */
/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-and-max-screen($min, $max, $orientation)
 * $min - required
 * $max - required
 * $orientation - optional
 * Ex: @include min-and-max-screen(768px, 1024px, landscape) { ... }
 */
/* max-screen($max, $orientation)
 * $max - required
 * $orientation - optional
 * Ex #1: @include max-screen(768px, landscape) { ... }
 * Ex #2: @include max-screen(768px) { ... }
 */
/* min-screen($min, $orientation)
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
/* landscape()
 * Ex: @include landscape() { ... }
 */
/* portrait()
 * Ex: @include portrait() { ... }
 */
/* VENDOR PREFIXER
*
*   Params:
*   @name: The name of the property to be prefixed
*      ex: transform
*   @value: The value supplied
*       ex: rotate(42.5deg)
*/
/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('System-Book', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* BORDER RADIUS MIXIN
 * -------------------
 * Usage: @include border-radius(5px);
 * Desc: Creates a border radius
*/
/* OPACITY MIXIN
 * ---------------
 * Usage: @include opacity(0.8);
 * Desc: Supports cross-browser Opacity rules
*/
/* UP ARROW MIXIN
 * ---------------
 * Usage: @include up-arrow(#EEE);
 * Desc: Creates a CSS3 arrow using pseudo :before,:after
 * Params: @color - HEX,RGB color of arrow
 *         @left - Distance from the left of the parent wrapper
 *         @bottom-or-top - String representation of either distance from the TOP or BOTTOM
 *         @distance - Distance from either TOP or BOTTOM
 *         @border-width - pixel width of arrow
*/
/* CLEARFIX EXTEND MIXIN
 * ---------------------
 * Usage: @extend %clearfix;
 * Desc: Provides IE6 and up support
 * to clear floated elements.
*/
.nyplGrid, .nyplGrid-fullWidth, .header, .hpContentBanner {
  *zoom: 1; }
  .nyplGrid:before, .nyplGrid-fullWidth:before, .header:before, .hpContentBanner:before, .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    content: " ";
    display: table; }
  .nyplGrid:after, .nyplGrid-fullWidth:after, .header:after, .hpContentBanner:after {
    clear: both; }

/* VALUE CALCULATION MIXIN
 * -----------------------
 * Usage: Makes the properties of an element
 * can be defined by both percentage
 * and pixels.
*/
/* TRANSITION MIXIN
 * ----------------
 * Usage: Applies set argument transition across
 * various browser prefixes.
*/
/* FOCUS RINGS
 * ----------------
 *
 *
*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
/* NYPL Animations based on DOM Element */
.animateHover {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animateMegaMenuEnter {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animateMegaMenuArrowEnter {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animatedFast {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  from, 50%, to {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    -webkit-transform: none;
    transform: none; } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none; }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center; }

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInSlow {
  from {
    opacity: .1; }
  to {
    opacity: 1; } }

@keyframes fadeInSlow {
  from {
    opacity: .1; }
  to {
    opacity: 1; } }

.fadeInSlow {
  -webkit-animation-name: fadeInSlow;
  animation-name: fadeInSlow; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn; }

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown; }

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight; }

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp; }

@-webkit-keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut; }

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown; }

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft; }

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight; }

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp; }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp; }

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

/* SEARCH BOX KEYWORDS FIELD ANIMATION
 * -----------------------------------
 * Usage: The two different kind of 
 * pulse animations for no keywords
 * input.
*/
@media only screen and (min-width: 769px) {
  .keywords-pulse-fade-in {
    -webkit-animation-name: keywordsPulseFadeIn;
    animation-duration: 0.2s;
    animation-name: keywordsPulseFadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out; } }

@-webkit-keyframes keywordsPulseFadeIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 0; }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
    opacity: 0.3; }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1; } }

@keyframes keywordsPulseFadeIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 0; }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
    opacity: 0.3; }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1; } }

@media only screen and (min-width: 769px) {
  .keywords-pulse {
    -webkit-animation-name: keywordsPulse;
    animation-duration: 0.2s;
    animation-name: keywordsPulse;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out; } }

@-webkit-keyframes keywordsPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes keywordsPulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

/* Dots Loader Animation
 * -----------------------------------
 * Usage: Used for Loading
*/
.DotsLoader li {
  animation: dotsLoader 2s infinite; }
  .DotsLoader li:nth-child(1n) {
    animation-delay: 0s;
    margin-right: 5px; }
  .DotsLoader li:nth-child(2n) {
    margin-right: 5px;
    animation-delay: 0.25s; }
  .DotsLoader li:nth-child(3n) {
    animation-delay: 0.5s; }

@keyframes dotsLoader {
  0% {
    transform: scale(0.5);
    background: white; }
  50% {
    transform: scale(1);
    background: #1B7FA7; }
  100% {
    transform: scale(0.5);
    background: white; } }

/* NYPL HEADER
 * -----------
 * -- Following BEM naming convention
 * -- Mobile First approach
*/
.header {
  font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
  font-weight: 400;
  background-color: #FFF;
  width: 100%;
  /* Global rules for repetitive link elements */
  /* MOBILE HEADER
   * -------------
  */
  /* DESKTOP HEADER WRAPPER
   * ----------------------
   * Sets the max-width on a desktop and up device.
  */
  /* DESKTOP LOGO
   * ------------
   * Defined width for desktop.
   * position adjustments left.
  */
  /* TOP HEADER BUTTONS (excludes subscribe)
 * ---------------------------------------
 * - Library Card
 * - Donate
*/
  /* Skip Navigation
   * ---------------
   */
  /* Global Alerts
   * -------------
  */
  /* EMAIL SUBSCRIBE BUTTON/FORM
   * ---------------------------
   * - Includes Button rules (also for MyNYPL)
   * - Includes Email Signup rules
  */
  /* MYNYPL LOGIN BUTTON
   * ---------------------------
   * - Includes MyNypl Login rules
  */
  /* MAIN NAVIGATION
   * ---------------
   * - Includes MegaMenu's
   * - Includes Logo text for mobile
   * - Arrows on NavMenu Top Links
  */
  /*
  This is the Mobile (i.e. min-screen(769px)) instance of NavMenu
*/
  /*
  This is the Desktop instance of NavMenu
*/ }
  .header a {
    text-decoration: none; }
  .header a:focus,
  .header button:focus,
  .header input:focus {
    box-shadow: 1px 1px 2px 2px #0f465c;
    outline: 0;
    outline: #135772 solid 3px; }
  .header-mobile {
    min-width: 320px;
    display: block;
    /* Hide MobileHeader on Tablet larger viewports */ }
    @media only screen and (min-width: 769px) {
      .header-mobile {
        display: none; } }
    .header-mobile-logo {
      width: 50px;
      height: 55px; }
    .header-mobile ul button {
      border-radius: 0; }
    .header-mobile-searchForm {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: #1B7FA7; }
      .header-mobile-searchForm fieldset {
        border: none;
        padding: 0;
        margin: 0; }
      .header-mobile-searchForm-inputBox {
        margin: 20px 15px;
        display: block;
        overflow: hidden;
        position: relative; }
        .header-mobile-searchForm-inputBox > input {
          width: 100%;
          height: 66px;
          padding: 0 0 0 25px;
          font-size: 18px;
          font-style: normal;
          line-height: normal !important;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 300; }
        .header-mobile-searchForm-inputBox svg {
          fill: #1da1d4;
          height: 20px;
          left: 0;
          position: absolute;
          top: 24px; }
      .header-mobile-searchForm-mobileControls {
        border-top-style: solid;
        border-color: rgba(102, 102, 102, 0.21);
        border-width: 1px; }
        .header-mobile-searchForm-mobileControls button {
          border: none;
          background-color: transparent;
          color: #FFF;
          padding: 20px 0px;
          text-align: center;
          text-transform: uppercase;
          display: inline-block;
          line-height: normal;
          width: 50%; }
          .header-mobile-searchForm-mobileControls button:first-child {
            border-color: rgba(102, 102, 102, 0.21);
            border-right-style: solid;
            border-width: 1px; }
        .header-mobile-searchForm-mobileControls .label {
          display: inline-block;
          margin: 0 20px 0 0;
          vertical-align: middle;
          font-size: 16px;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400; }
        .header-mobile-searchForm-mobileControls .icon {
          display: inline-block;
          color: #78CCED;
          font-size: 30px;
          vertical-align: middle;
          line-height: normal; }
        .header-mobile-searchForm-mobileControls svg {
          vertical-align: middle;
          fill: #78CCED;
          height: 30px;
          width: 30px; }
    .header-mobile-wrapper {
      width: 100%;
      position: absolute;
      left: 0; }
  .header-wrapper {
    position: relative;
    border-bottom: 2px solid #ED1C24; }
  .header-topWrapper {
    display: none; }
    @media only screen and (min-width: 769px) {
      .header-topWrapper {
        display: block;
        max-width: 1312px;
        margin: 0px 20px;
        min-height: 160px; } }
    @media only screen and (min-width: 1025px) {
      .header-topWrapper {
        margin: 0px auto; } }
  .header-logo {
    overflow: hidden; }
    @media only screen and (min-width: 769px) {
      .header-logo {
        display: block;
        position: relative;
        margin: 0;
        max-width: 90px; } }
    @media only screen and (min-width: 1025px) {
      .header-logo {
        max-width: 260px;
        left: 27px;
        top: 20px; } }
    .header-logo .nyplLionLogo {
      width: 200px;
      height: 112px; }
      @media only screen and (min-width: 1025px) {
        .header-logo .nyplLionLogo {
          width: 225px;
          height: 126px; } }
      @media only screen and (min-width: 769px) {
        .header-logo .nyplLionLogo-text {
          display: none; } }
      @media only screen and (min-width: 1025px) {
        .header-logo .nyplLionLogo-text {
          display: block; } }
  .header-buttons ul {
    margin: 0;
    list-style-type: none; }
    .header-buttons ul li {
      display: inline-block;
      margin-right: 0.18em; }
  .header-buttons li > a,
  .header-buttons > a {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    margin: 0 10px 0 0; }
    .header-buttons li > a:visited,
    .header-buttons > a:visited {
      color: #000; }
    .header-buttons li > a:last-child,
    .header-buttons > a:last-child {
      margin: 0; }
    .header-buttons li > a:focus,
    .header-buttons > a:focus {
      box-shadow: 1px 1px 1px 1px #135772;
      -webkit-outline-color: #135772;
      -moz-outline-color: #135772;
      -ms-outline-color: #135772;
      -o-outline-color: #135772;
      outline-color: #135772;
      outline-style: solid;
      outline-width: 0.1875em;
      padding: 12px; }
  @media only screen and (min-width: 769px) {
    .header-buttons {
      right: 0px; } }
  @media only screen and (min-width: 1025px) {
    .header-buttons {
      right: 20px; } }
  .header-buttons .subscribeButton,
  .header-buttons .myNyplButton {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    font-size: 13px;
    color: #000;
    background-color: #FFF;
    letter-spacing: .04em; }
    .header-buttons .subscribeButton.active,
    .header-buttons .myNyplButton.active {
      -webkit-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -moz-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -ms-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -o-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      background-color: #135772;
      color: #FFF; }
      .header-buttons .subscribeButton.active:visited,
      .header-buttons .myNyplButton.active:visited {
        color: #FFF; }
    .header-buttons .subscribeButton:focus,
    .header-buttons .myNyplButton:focus {
      box-shadow: 1px 1px 1px 1px #135772;
      -webkit-outline-color: #135772;
      -moz-outline-color: #135772;
      -ms-outline-color: #135772;
      -o-outline-color: #135772;
      outline-color: #135772;
      outline-style: solid;
      outline-width: 0.1875em; }
    .header-buttons .subscribeButton:visited,
    .header-buttons .myNyplButton:visited {
      color: #000; }
    .header-buttons .subscribeButton .icon,
    .header-buttons .myNyplButton .icon {
      opacity: 0.8;
      filter: alpha(opacity=80); }
  .header-buttons .donateButton {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-clip: padding-box; }
  .header-buttons .shopTopLink {
    display: none; }
    @media only screen and (min-width: 860px) {
      .header-buttons .shopTopLink {
        display: inline-block; } }
  .header-buttons .dropDownIcon {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    height: 12px;
    -webkit-background-clip: padding-box;
    /* IOS fix */
    background-clip: padding-box;
    /* IOS fix */ }
  .header .emailSubscription-socialMediaLinksWidget ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .header .emailSubscription-socialMediaLinksWidget ul li {
      display: inline-block;
      margin: 0 5px 0 0;
      line-height: 0; }
      .header .emailSubscription-socialMediaLinksWidget ul li:last-child {
        margin-right: 0; }
        .header .emailSubscription-socialMediaLinksWidget ul li:last-child svg {
          margin-left: 10px; }
      .header .emailSubscription-socialMediaLinksWidget ul li a {
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 50px; }
      .header .emailSubscription-socialMediaLinksWidget ul li svg {
        fill: #fff;
        height: 30px;
        width: 30px; }
  .header #skip ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .header #skip a {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    background-color: #FFFFFF;
    color: #1B7FA7;
    display: block;
    font-size: 13px;
    font-weight: 400;
    height: 1px;
    left: -10000px;
    line-height: 22px;
    margin: 5px;
    overflow: hidden;
    padding: 5px 10px;
    position: absolute;
    text-transform: uppercase;
    top: auto;
    width: 1px;
    z-index: 1000; }
    .header #skip a:focus, .header #skip a:active {
      box-shadow: 1px 1px 2px 2px #0c3646;
      height: auto;
      left: auto;
      outline: 0;
      overflow: visible;
      top: 10px;
      width: auto; }
      @media only screen and (min-width: 769px) {
        .header #skip a:focus, .header #skip a:active {
          top: auto; } }
  .header-globalAlerts {
    position: relative;
    border-bottom: 1px solid #908034;
    /* No red bottom-border on tablet and up */ }
    @media only screen and (min-width: 769px) {
      .header-globalAlerts {
        border-bottom: none; } }
    .header-globalAlerts.hide {
      display: none; }
    .header-globalAlerts-box {
      position: relative;
      margin: .5em 1.2em .5em 1.2em;
      text-align: center; }
      .header-globalAlerts-box-item {
        font-size: 16px;
        margin: .5em 0;
        line-height: 1.2em; }
        .header-globalAlerts-box-item p {
          display: block;
          line-height: 1.2em;
          font-size: 16px;
          max-width: 100% !important; }
        .header-globalAlerts-box-item a {
          text-decoration: underline;
          color: #333; }
          .header-globalAlerts-box-item a:visited, .header-globalAlerts-box-item a:active {
            color: #333; }
        .header-globalAlerts-box-item strong {
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 700;
          font-weight: normal; }
        .header-globalAlerts-box-item * {
          font-size: 16px;
          margin: 0;
          padding: 0; }
  .header .emailSubscription-wrapper {
    text-transform: none;
    display: none; }
    .header .emailSubscription-wrapper.active {
      display: block; }
    .header .emailSubscription-wrapper .emailSubscription-pp-link {
      bottom: 11px;
      left: 60px; }
      .header .emailSubscription-wrapper .emailSubscription-pp-link:focus {
        box-shadow: 0; }
    .header .emailSubscription-wrapper .emailSubscription-sc-link {
      bottom: 33px;
      left: 140px; }
    .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox {
      width: 85%; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox:focus {
        outline: #135772 solid 3px; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-eyebrow {
        border-top: 2px solid #FFF;
        color: #fff;
        margin-bottom: 10px;
        width: 25px; }
      .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-title {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        color: #fff;
        font-size: 20px;
        font-weight: normal;
        letter-spacing: .03em;
        line-height: 1.2em; }
        .header .emailSubscription-wrapper .emailSubscription .subscribeMessageBox-title-bestNYPL {
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 500;
          font-weight: normal; }
    .header .emailSubscription-wrapper .emailSubscription-alreadySubscribed ~ .emailSubscription-sc-link {
      left: 140px;
      top: 70px; }
    .header .emailSubscription-wrapper .emailSubscription-alreadySubscribed ~ .emailSubscription-pp-link {
      left: 60px;
      top: 95px; }
    .header .emailSubscription-wrapper .emailSubscription-newEmail {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      display: block;
      font-size: 14px;
      margin-top: 20px; }
      .header .emailSubscription-wrapper .emailSubscription-newEmail a {
        border-bottom: 1px solid #fff;
        color: #fff; }
    .header .emailSubscription-wrapper .emailSubscription-followUs {
      color: #fff;
      text-transform: uppercase;
      margin-top: 40px;
      font-size: 14px; }
    .header .emailSubscription-wrapper .emailSubscription-misc-error {
      color: #fff;
      font-size: 20px;
      line-height: 1.2em;
      padding-top: 40px;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400; }
      .header .emailSubscription-wrapper .emailSubscription-misc-error a {
        border-radius: 20px; }
      .header .emailSubscription-wrapper .emailSubscription-misc-error .icon {
        vertical-align: middle;
        font-size: 25px;
        margin-right: 5px; }
    .header .emailSubscription-wrapper .emailSubscription-newEmail button {
      background-color: transparent;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 2px solid #FFF;
      color: #FFF;
      font-size: 1.125em;
      height: 1.5em;
      padding: 0 0 2px 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-error {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      display: none;
      position: absolute;
      margin-top: 15px;
      margin-left: 0;
      font-size: 13px;
      color: #fff; }
      .header .emailSubscription-wrapper .emailSubscribeForm-error.active {
        display: block; }
      .header .emailSubscription-wrapper .emailSubscribeForm-error .x-icon {
        height: 20px;
        vertical-align: middle;
        margin-right: 0px;
        fill: #fff; }
    .header .emailSubscription-wrapper .emailSubscribeForm-input {
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      border: 3px solid #1B7FA7;
      border-radius: 5px;
      color: #776e64;
      display: table-cell;
      font-size: 1em;
      height: 35px;
      margin: 10px 0 0 -3px;
      padding: 2px 5px 2px 11px;
      width: 95%; }
      .header .emailSubscription-wrapper .emailSubscribeForm-input:focus, .header .emailSubscription-wrapper .emailSubscribeForm-input:active {
        background-color: #e6e6e6;
        border-radius: 0;
        box-shadow: inset 0 0 0 0.23438em #135772;
        color: #000;
        outline: 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-submit input {
      border-radius: 20px; }
      .header .emailSubscription-wrapper .emailSubscribeForm-submit input:focus {
        box-shadow: 1px 1px 2px 2px #0f465c;
        outline: 0; }
    .header .emailSubscription-wrapper .emailSubscribeForm-submit .check-solo-icon {
      fill: #fff;
      height: 25px;
      margin-top: 66px;
      margin-left: 4px;
      position: absolute; }
  .header .myNyplButton {
    font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
    font-weight: 700;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
    font-size: 13px;
    color: #000;
    display: block;
    letter-spacing: .04em;
    background-color: #FFF; }
    .header .myNyplButton.loggedIn {
      color: #000; }
    .header .myNyplButton.active {
      -webkit-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -moz-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -ms-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      -o-transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
      background-color: #135772;
      color: #FFF; }
      .header .myNyplButton.active:visited {
        color: #FFF; }
    .header .myNyplButton:visited {
      color: #000; }
    .header .myNyplButton .icon {
      opacity: 0.8;
      filter: alpha(opacity=80); }
  .header .myNypl-wrapper {
    text-transform: none;
    display: none;
    box-sizing: content-box;
    min-height: 180px; }
    .header .myNypl-wrapper.loggedInHeight {
      min-height: 250px; }
    .header .myNypl-wrapper.active {
      display: block; }
    .header .myNypl-wrapper .myNypl-Links {
      color: #fff; }
    .header .myNypl-wrapper .myNypl-eyebrow {
      border-top: 2px solid #FFF;
      color: #fff;
      margin-bottom: 10px;
      width: 25px; }
    .header .myNypl-wrapper .myNypl-title {
      color: #fff;
      font-size: 20px;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      font-weight: normal;
      line-height: 1.2em; }
    .header .myNypl-wrapper .myNypl-patron-greeting {
      color: #fff;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 400;
      font-weight: normal;
      letter-spacing: .03em;
      line-height: 1.2em;
      margin: 0;
      text-align: left; }
      .header .myNypl-wrapper .myNypl-patron-greeting.login-indication {
        margin: 0 0 6px 0; }
    .header .myNypl-wrapper .myNypl-login-list {
      text-align: left;
      list-style: none;
      padding: 0px;
      margin: 0px; }
      .header .myNypl-wrapper .myNypl-login-list li a {
        border-radius: 28px;
        box-sizing: content-box; }
        .header .myNypl-wrapper .myNypl-login-list li a:focus {
          box-shadow: 1px 1px 2px 2px #0f465c;
          outline: 0; }
      .header .myNypl-wrapper .myNypl-login-list li svg {
        vertical-align: middle;
        width: 28px;
        padding-right: 5px;
        height: 28px; }
    .header .myNypl-wrapper .myNypl-catalog-btn {
      min-width: 170px; }
    .header .myNypl-wrapper .myNypl-catalog-link:focus {
      box-shadow: 1px 1px 2px 2px #0f465c;
      outline: 0; }
    .header .myNypl-wrapper .myNypl-research-btn {
      min-width: 265px; }
    .header .myNypl-wrapper .myNypl .icon {
      font-size: 25px;
      color: rgba(255, 255, 255, 0.6);
      vertical-align: middle;
      margin-right: 5px; }
    .header .myNypl-wrapper .myNypl .bldgIcon {
      fill: #fff;
      margin: 2px 0;
      height: 20px; }
    .header .myNypl-wrapper .myNypl .logoutIcon {
      fill: #1B7FA7;
      margin: 0 10px 0 0;
      vertical-align: -11px;
      height: 1.3rem;
      width: 1.3rem;
      margin: 5px 10px 5px 0; }
    .header .myNypl-wrapper .myNypl .patron-greeting-wrapper:focus {
      box-shadow: 1px 1px 2px 2px #0f465c;
      outline: 0; }
  .header .mobileMyNypl-wrapper {
    display: inline-block;
    position: inherit; }
    .header .mobileMyNypl-wrapper.active {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header .mobileMyNypl-wrapper.active {
          display: none; } }
  .header .loginIcon.active {
    stroke: none; }
  .header .loginIcon-loggedIn {
    fill: #000;
    stroke: none; }
    .header .loginIcon-loggedIn.active {
      fill: #FFF;
      opacity: 1; }
  .header .myNyplButton.loginIcon-loggedIn {
    height: 20px;
    left: 143px;
    position: absolute;
    top: 7px; }
  .header .myNyplButton-iconWrapper {
    margin: 0 0 0 22px; }
  .header .mobileMyNypl {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1000; }
    .header .mobileMyNypl.active {
      box-shadow: 2px 2px 3px 4px rgba(100, 100, 100, 0.25);
      display: flex;
      flex-flow: row wrap; }
    .header .mobileMyNypl-greeting {
      box-sizing: content-box;
      color: #FFF;
      flex: 1 100%;
      padding: 22px 0 0 11px;
      position: absolute;
      text-align: left; }
      .header .mobileMyNypl-greeting .login-indication {
        margin: 0 0 30px; }
      .header .mobileMyNypl-greeting:focus {
        -webkit-outline-color: #fff;
        -moz-outline-color: #fff;
        -ms-outline-color: #fff;
        -o-outline-color: #fff;
        outline-color: #fff;
        outline: inset;
        outline-style: solid;
        outline-width: 0.1875em; }
    .header .mobileMyNypl a:focus {
      -webkit-outline-color: #fff;
      -moz-outline-color: #fff;
      -ms-outline-color: #fff;
      -o-outline-color: #fff;
      outline-color: #fff;
      outline: inset;
      outline-style: solid;
      outline-width: 0.1875em;
      position: relative; }
    .header .mobileMyNypl a:first-child svg {
      vertical-align: bottom;
      margin-top: 5px; }
    .header .mobileMyNypl .bldgIcon {
      fill: #fff;
      height: 25px;
      margin: 5px 0; }
    .header .mobileMyNypl .catalogLink {
      border-right: solid 2px #2b2b2b;
      flex: 1 1 40%;
      margin: 0 1px 50px 2px; }
    .header .mobileMyNypl .researchLink {
      flex: 1 1 40%;
      margin: 0 1px 50px 2px; }
      .header .mobileMyNypl .researchLink + .mobileMyNypl-catalog-link {
        border-bottom: 2px solid #000;
        margin-bottom: 0; }
  .header .login-indication {
    font-style: italic; }
  .header-mobile-navMenu {
    position: relative;
    display: block; }
    .header-mobile-navMenu-searchBox-wrapper {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-searchBox-wrapper {
          display: inline-table;
          vertical-align: middle;
          margin: 0 10px 0 5px; } }
      @media only screen and (min-width: 792px) {
        .header-mobile-navMenu-searchBox-wrapper {
          margin: 0 10px; } }
    .header-mobile-navMenu-searchButton {
      display: none;
      position: relative;
      background-color: transparent;
      border: none;
      color: #1B7FA7;
      background-color: #FFF;
      padding: 10px 10px 12px;
      margin: 3px 0 0;
      line-height: normal !important;
      white-space: normal !important;
      -webkit-border-radius: 0;
      border-radius: 0;
      background-clip: padding-box;
      /* ACTIVE STATE */ }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-searchButton {
          display: block; } }
      .header-mobile-navMenu-searchButton:hover {
        border: none !important; }
      .header-mobile-navMenu-searchButton.active {
        background-color: #1B7FA7;
        color: #FFFFFF;
        -webkit-transition: background-color 0.35s linear 0.08s;
        -moz-transition: background-color 0.35s linear 0.08s;
        -ms-transition: background-color 0.35s linear 0.08s;
        -o-transition: background-color 0.35s linear 0.08s;
        transition: background-color 0.35s linear 0.08s; }
        .header-mobile-navMenu-searchButton.active .svgIcon {
          fill: #FFF; }
      .header-mobile-navMenu-searchButton-text {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        display: inline-block;
        font-size: 18px;
        line-height: 1em;
        padding: 0 20px 0 0;
        border-bottom: 3px solid #1B7FA7; }
      .header-mobile-navMenu-searchButton-icon {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 8px;
        fill: #1B7FA7; }
    .header-mobile-navMenu-desktopSearchBox {
      display: none;
      background-color: #1B7FA7;
      color: #000000;
      left: 0px;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 999;
      /* Rules for Desktop Open State */ }
      @media only screen and (min-width: 769px) {
        .header-mobile-navMenu-desktopSearchBox {
          display: block;
          top: 44px; } }
      .header-mobile-navMenu-desktopSearchBox .desktopSearch-form {
        position: relative;
        margin: 0 auto;
        max-width: 1312px;
        height: 100%;
        padding: 0; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form fieldset {
          border: none;
          padding: 0;
          margin: 0;
          line-height: normal; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
          display: block;
          text-align: left;
          margin: 50px 0px 25px 20px;
          padding: 0;
          overflow: hidden; }
          @media only screen and (min-width: 1025px) {
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
              margin-left: 140px; } }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox label {
            color: #FFF;
            display: inline-block;
            font-size: 18px;
            margin: 0 0 10px 0;
            padding: 0 !important;
            line-height: normal; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input {
            font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
            font-weight: 400;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-clip: padding-box;
            background-color: #fff;
            border: 0;
            color: #000;
            display: block;
            font-size: 22px;
            font-style: normal;
            font-weight: 400;
            height: 100%;
            line-height: normal;
            margin: 0;
            min-height: 2em;
            padding: 10px 0 10px 20px;
            width: 85%; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:focus, .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:active {
              background-color: #e6e6e6;
              border-radius: 0;
              box-shadow: inset 0 0 0 0.1875em #135772;
              outline: 0; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-inputBox svg {
            display: none; }
        .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
          display: block;
          margin: 0 0 40px 20px;
          text-align: left; }
          @media only screen and (min-width: 1025px) {
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
              margin-left: 140px; } }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label {
            position: relative;
            display: inline-block;
            margin: 0 0 0 -10px;
            padding: 2px;
            color: #FFF;
            font-size: 18px; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label:before {
              background-color: #FFFFFF;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              background-clip: padding-box;
              content: '';
              display: inline-block;
              height: 10px;
              left: 0;
              margin-right: 10px;
              position: relative;
              width: 10px;
              top: 1px;
              text-align: center; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio] {
            /* Hide original inputs, but still accessible for input related functions */
            opacity: 0;
            filter: alpha(opacity=0); }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:checked + label:before {
            content: '\2022';
            color: #000000;
            font-size: 18px;
            line-height: 11px; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:focus + label {
            box-shadow: 1px 1px 1px 1px #135772;
            -webkit-outline-color: #135772;
            -moz-outline-color: #135772;
            -ms-outline-color: #135772;
            -o-outline-color: #135772;
            outline-color: #135772;
            outline-style: solid;
            outline-width: 0.1875em; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls .catalogOption {
            margin-right: 25px; }
          .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button {
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-clip: padding-box;
            background-color: transparent;
            background: transparent;
            border: 2px solid #FFF;
            height: 72px;
            line-height: normal;
            position: absolute;
            padding: 18px;
            margin: 0 20px 0 0;
            right: 0px;
            top: 67px;
            width: 72px; }
            .header-mobile-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button:focus {
              box-shadow: 0px 0px 1px 4px #135772;
              outline: 0; }
    .header-mobile-navMenu-wrapper {
      /* Controls the display of Mobile View */ }
      .header-mobile-navMenu-wrapper.mobileActive {
        box-shadow: 0 6px 4px rgba(100, 100, 100, 0.4);
        line-height: normal;
        margin-top: -2.5px;
        position: absolute;
        width: 100%;
        z-index: 1000;
        /* Displays NavMenu on Mobile with proper class on parent */
        /* Only display Logo Text on Mobile */
        /* Only display BottomButtons on Mobile */ }
        @media only screen and (min-width: 769px) {
          .header-mobile-navMenu-wrapper.mobileActive {
            position: initial;
            margin-top: 0px;
            width: initial; } }
        .header-mobile-navMenu-wrapper.mobileActive #navMenu-List {
          display: block;
          line-height: normal; }
        .header-mobile-navMenu-wrapper.mobileActive svg {
          display: block; }
        .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons {
          display: block; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons a:focus {
            -webkit-outline-color: #fff;
            -moz-outline-color: #fff;
            -ms-outline-color: #fff;
            -o-outline-color: #fff;
            outline-color: #fff;
            outline: inset;
            outline-style: solid;
            outline-width: 0.1875em;
            position: relative; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .subscribeLink svg {
            height: 20px;
            margin-left: 10px;
            width: 30px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .shopLink {
            width: 98.5%; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons svg {
            fill: #fff;
            height: 20px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .library-card-icon {
            height: 20px;
            margin-left: 10px;
            width: 33px; }
          .header-mobile-navMenu-wrapper.mobileActive .mobileBottomButtons .shopping-bag-icon {
            height: 25px;
            width: 30px; }
        .header-mobile-navMenu-wrapper.mobileActive .nyplLionLogo {
          top: 20px;
          left: -110px;
          fill: #fff;
          position: absolute;
          height: 120px; }
          .header-mobile-navMenu-wrapper.mobileActive .nyplLionLogo-lion {
            display: none; }
    .header-mobile-navMenu-list {
      display: none;
      background-color: #2B2B2B;
      padding: 10px 0;
      margin: 0;
      list-style-type: none;
      text-align: right;
      vertical-align: middle; }
      .header-mobile-navMenu-list .navMenuItem {
        padding: 8px 0;
        margin: 3.5px 15px 0px 0;
        display: block; }
        @media only screen and (min-width: 769px) {
          .header-mobile-navMenu-list .navMenuItem {
            display: inline-block;
            padding: 0;
            line-height: normal !important;
            margin: 0 0 0 15px; }
            .header-mobile-navMenu-list .navMenuItem:first-child {
              margin-left: 0px; } }
        .header-mobile-navMenu-list .navMenuItem-link {
          position: relative;
          display: inline-block;
          padding: 0;
          margin: 0;
          color: #FFF;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400;
          font-size: 18px; }
          .header-mobile-navMenu-list .navMenuItem-link:hover {
            cursor: pointer; }
          .header-mobile-navMenu-list .navMenuItem-link:visited, .header-mobile-navMenu-list .navMenuItem-link:active, .header-mobile-navMenu-list .navMenuItem-link:focus, .header-mobile-navMenu-list .navMenuItem-link:hover {
            text-decoration: none; }
          .header-mobile-navMenu-list .navMenuItem-link:focus {
            box-shadow: 1px 1px 1px 1px #fff;
            -webkit-outline-color: #fff;
            -moz-outline-color: #fff;
            -ms-outline-color: #fff;
            -o-outline-color: #fff;
            outline-color: #fff;
            outline-style: solid;
            outline-width: 0.1875em; }
  .header-navMenu {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0px; }
    @media only screen and (min-width: 1025px) {
      .header-navMenu {
        position: relative;
        width: auto;
        bottom: inherit; } }
    .header-navMenu-searchBox-wrapper {
      display: block; }
      @media only screen and (min-width: 769px) {
        .header-navMenu-searchBox-wrapper {
          display: inline-table;
          vertical-align: middle;
          margin: 0 10px 0 5px; } }
      @media only screen and (min-width: 792px) {
        .header-navMenu-searchBox-wrapper {
          margin: 0 10px; } }
    .header-navMenu-searchButton {
      display: none;
      position: relative;
      background-color: transparent;
      border: none;
      color: #1B7FA7;
      background-color: #FFF;
      padding: 10px 10px 12px;
      margin: 3px 0 0;
      line-height: normal !important;
      white-space: normal !important;
      -webkit-border-radius: 0;
      border-radius: 0;
      background-clip: padding-box;
      /* ACTIVE STATE */ }
      @media only screen and (min-width: 769px) {
        .header-navMenu-searchButton {
          display: block; } }
      .header-navMenu-searchButton:hover {
        border: none !important; }
      .header-navMenu-searchButton.active {
        background-color: #1B7FA7;
        color: #FFFFFF;
        -webkit-transition: background-color 0.35s linear 0.08s;
        -moz-transition: background-color 0.35s linear 0.08s;
        -ms-transition: background-color 0.35s linear 0.08s;
        -o-transition: background-color 0.35s linear 0.08s;
        transition: background-color 0.35s linear 0.08s; }
        .header-navMenu-searchButton.active .svgIcon {
          fill: #FFF; }
      .header-navMenu-searchButton-text {
        font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
        font-weight: 400;
        display: inline-block;
        font-size: 18px;
        line-height: 1em;
        padding: 0 20px 0 0;
        border-bottom: 3px solid #1B7FA7; }
      .header-navMenu-searchButton-icon {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 8px;
        fill: #1B7FA7; }
    .header-navMenu-desktopSearchBox {
      display: none;
      background-color: #1B7FA7;
      color: #000000;
      left: 0px;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 999;
      /* Rules for Desktop Open State */ }
      @media only screen and (min-width: 769px) {
        .header-navMenu-desktopSearchBox {
          display: block;
          top: 44px; } }
      .header-navMenu-desktopSearchBox .desktopSearch-form {
        position: relative;
        margin: 0 auto;
        max-width: 1312px;
        height: 100%;
        padding: 0; }
        .header-navMenu-desktopSearchBox .desktopSearch-form fieldset {
          border: none;
          padding: 0;
          margin: 0;
          line-height: normal; }
        .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
          display: block;
          text-align: left;
          margin: 50px 0px 25px 20px;
          padding: 0;
          overflow: hidden; }
          @media only screen and (min-width: 1025px) {
            .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox {
              margin-left: 140px; } }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox label {
            color: #FFF;
            display: inline-block;
            font-size: 18px;
            margin: 0 0 10px 0;
            padding: 0 !important;
            line-height: normal; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input {
            font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
            font-weight: 400;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-clip: padding-box;
            background-color: #fff;
            border: 0;
            color: #000;
            display: block;
            font-size: 22px;
            font-style: normal;
            font-weight: 400;
            height: 100%;
            line-height: normal;
            margin: 0;
            min-height: 2em;
            padding: 10px 0 10px 20px;
            width: 85%; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:focus, .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox input:active {
              background-color: #e6e6e6;
              border-radius: 0;
              box-shadow: inset 0 0 0 0.1875em #135772;
              outline: 0; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-inputBox svg {
            display: none; }
        .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
          display: block;
          margin: 0 0 40px 20px;
          text-align: left; }
          @media only screen and (min-width: 1025px) {
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls {
              margin-left: 140px; } }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label {
            position: relative;
            display: inline-block;
            margin: 0 0 0 -10px;
            padding: 2px;
            color: #FFF;
            font-size: 18px; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls label:before {
              background-color: #FFFFFF;
              -webkit-border-radius: 50%;
              border-radius: 50%;
              background-clip: padding-box;
              content: '';
              display: inline-block;
              height: 10px;
              left: 0;
              margin-right: 10px;
              position: relative;
              width: 10px;
              top: 1px;
              text-align: center; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio] {
            /* Hide original inputs, but still accessible for input related functions */
            opacity: 0;
            filter: alpha(opacity=0); }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:checked + label:before {
            content: '\2022';
            color: #000000;
            font-size: 18px;
            line-height: 11px; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls input[type=radio]:focus + label {
            box-shadow: 1px 1px 1px 1px #135772;
            -webkit-outline-color: #135772;
            -moz-outline-color: #135772;
            -ms-outline-color: #135772;
            -o-outline-color: #135772;
            outline-color: #135772;
            outline-style: solid;
            outline-width: 0.1875em; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls .catalogOption {
            margin-right: 25px; }
          .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button {
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-clip: padding-box;
            background-color: transparent;
            background: transparent;
            border: 2px solid #FFF;
            height: 72px;
            line-height: normal;
            position: absolute;
            padding: 18px;
            margin: 0 20px 0 0;
            right: 0px;
            top: 67px;
            width: 72px; }
            .header-navMenu-desktopSearchBox .desktopSearch-form-desktopControls button:focus {
              box-shadow: 0px 0px 1px 4px #135772;
              outline: 0; }
    .header-navMenu-wrapper {
      max-width: 1312px;
      text-align: right;
      margin: 0 auto; }
      .header-navMenu-wrapper .mobileBottomButtons {
        /* Hide on all viewports, trigger display based on class */
        display: none; }
      .header-navMenu-wrapper .nyplLionLogo {
        display: none; }
    .header-navMenu-list {
      display: none;
      list-style-type: none;
      text-align: right;
      vertical-align: middle;
      margin: 0;
      background-color: #FFF;
      padding: 0; }
      @media only screen and (min-width: 769px) {
        .header-navMenu-list {
          display: inline-table; } }
      .header-navMenu-list .navMenuItem {
        display: inline-block;
        padding: 0;
        line-height: normal !important;
        margin: 0 0 0 15px; }
        .header-navMenu-list .navMenuItem:first-child {
          margin-left: 0px; }
        .header-navMenu-list .navMenuItem-link {
          position: relative;
          display: inline-block;
          margin: 0;
          font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
          font-weight: 400;
          font-size: 18px;
          color: #000;
          padding: 2px 0;
          border-bottom: 3px solid transparent;
          -webkit-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -moz-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -ms-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          -o-transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s;
          transition: border-color 0.1s linear 0.05s, color 0.1s linear 0.05s; }
          .header-navMenu-list .navMenuItem-link:hover {
            cursor: pointer; }
          .header-navMenu-list .navMenuItem-link:visited, .header-navMenu-list .navMenuItem-link:active, .header-navMenu-list .navMenuItem-link:focus, .header-navMenu-list .navMenuItem-link:hover {
            text-decoration: none; }
          .header-navMenu-list .navMenuItem-link:active, .header-navMenu-list .navMenuItem-link:hover, .header-navMenu-list .navMenuItem-link:focus {
            border-color: #E32B31;
            color: #E32B31; }
  .header .fundraisingBanner {
    max-height: 0;
    visibility: hidden;
    overflow: hidden; }
    .header .fundraisingBanner * {
      margin-top: 0;
      margin-bottom: 0; }
    .header .fundraisingBanner.show {
      max-height: 300px;
      display: block;
      visibility: visible;
      -webkit-transition: max-height 0.75s linear;
      -moz-transition: max-height 0.75s linear;
      -ms-transition: max-height 0.75s linear;
      -o-transition: max-height 0.75s linear;
      transition: max-height 0.75s linear; }
    .header .fundraisingBanner-wrapper {
      position: relative;
      display: block;
      height: 200px; }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-wrapper {
          max-width: 1312px;
          margin: 0 20px;
          height: 205px; } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-wrapper {
          margin: 0 auto; } }
      .header .fundraisingBanner-wrapper > a {
        display: block;
        width: 100%;
        height: 100%; }
    .header .fundraisingBanner-imageWrapper {
      display: none;
      line-height: 0; }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-imageWrapper {
          display: inline-block;
          width: 250px;
          position: absolute;
          bottom: -4px; } }
      .header .fundraisingBanner-imageWrapper img {
        max-width: 100%; }
    .header .fundraisingBanner-headline, .header .fundraisingBanner-description {
      display: block;
      color: #FFF;
      text-shadow: 2px 2px 5px rgba(100, 100, 100, 0.75); }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-headline, .header .fundraisingBanner-description {
          display: inline-block;
          position: absolute; } }
    .header .fundraisingBanner-headline {
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      text-align: center;
      padding: 32px 0 0;
      line-height: normal; }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-headline {
          padding-top: 30px;
          font-size: 28px; } }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-headline {
          width: 75%;
          text-align: left;
          padding: 0;
          font-size: 32px;
          top: 20%;
          left: 200px;
          transform: translate(0, -20%); } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-headline {
          width: 63%;
          top: 25%;
          left: 210px;
          transform: translate(0, -25%);
          font-size: 42px; } }
      @media only screen and (min-width: 1120px) {
        .header .fundraisingBanner-headline {
          width: 66%;
          top: 35%;
          left: 55%;
          transform: translate(-55%, -35%); } }
    .header .fundraisingBanner-description {
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      text-align: center;
      padding: 5px 5px 10px 5px;
      line-height: normal; }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-description {
          font-size: 22px; } }
      @media only screen and (min-width: 769px) {
        .header .fundraisingBanner-description {
          width: 75%;
          text-align: left;
          padding: 0;
          font-size: 24px;
          top: 49%;
          left: 200px;
          transform: translate(0, -49%); } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-description {
          width: 63%;
          font-size: 30px;
          top: 65%;
          left: 210px;
          transform: translate(0, -65%); } }
      @media only screen and (min-width: 1120px) {
        .header .fundraisingBanner-description {
          width: 66%;
          top: 78%;
          left: 55%;
          transform: translate(-55%, -78%); } }
    .header .fundraisingBanner-button {
      line-height: normal;
      color: #FFF;
      font-family: "system-ui", "Segoe UI", Tahoma, "Helvetica", "arial";
      font-weight: 700;
      background-color: #E32B31;
      padding: 10px 20px;
      text-transform: uppercase;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      background-clip: padding-box;
      border: 3px solid #FFF;
      font-size: 18px;
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%, -5%); }
      @media only screen and (min-width: 425px) {
        .header .fundraisingBanner-button {
          padding: 15px 30px;
          font-size: 22px; } }
      @media only screen and (min-width: 1025px) {
        .header .fundraisingBanner-button {
          left: 98%;
          bottom: 50%;
          transform: translate(-98%, 50%); } }
    .header .fundraisingBanner-closeButton {
      position: absolute;
      top: 2%;
      right: 2%;
      background-color: #07818d;
      color: #FFF;
      border: none;
      font-size: 12px;
      padding: 5px 7px !important;
      line-height: normal;
      -webkit-transition: unset;
      -moz-transition: unset;
      -ms-transition: unset;
      -o-transition: unset;
      transition: unset;
      -webkit-border-radius: 0px;
      border-radius: 0px;
      background-clip: padding-box; }
      .header .fundraisingBanner-closeButton:hover {
        background-color: #07818d;
        border: none;
        color: #FFF; }

#logoutIframe {
  display: none; }

/* CSS for Screen Reader Texts */
.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }
  .visuallyHidden:focus, .visuallyHidden:active {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.dropDownIcon {
  width: 15px;
  vertical-align: middle;
  margin: 0 0 0 5px;
  padding-bottom: 3px; }

/* FONT FACE MIXIN
 * ---------------
 * Usage: @include font-face('Kievit-Regular', 'http://...');
 * Desc: Do not include the font file extension, this mixin
 * will generate the proper extensions.
*/
/* VISUALLY HIDE ELEMENTS
 * ---------------------
 * Usage: Visually hides an element from the screen
 * but is still readable by screen readers for accessibility.
*/
/* DISPLAY VISUALLY HIDDEN ELEMENTS
 * ---------------------
 * Usage: Displays an element that is visually hidden.
*/
/* --- Media Query Generator ---
 * Reusable mixin used to generate
 * variations of media query properties.
 */
/* min-screen($min, $orientation) 
 * $min - required
 * $orientation - optional
 * Ex #1: @include min-screen(768px, landscape) { ... }
 * Ex #2: @include min-screen(768px) { ... }
 */
.footer {
  background: #54514A;
  clear: both;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 360px;
  padding: 15px 20px 100px;
  position: relative; }
  .footer a {
    color: #fff;
    font-weight: 400;
    margin: 0 0.2rem;
    text-decoration: none; }
    .footer a:hover {
      text-decoration: underline; }
    .footer a:focus {
      background-color: #54514A;
      outline: solid 2px #fff; }
  .footer .svgIcon {
    fill: #fff; }
  .footer .logoText {
    position: absolute;
    top: 20px; }
    .footer .logoText .nyplTextLogo {
      height: 94px;
      width: 115px; }
    @media only screen and (min-width: 768px) {
      .footer .logoText {
        top: 20px;
        left: 6%; } }
    @media only screen and (min-width: 1024px) {
      .footer .logoText {
        top: 35px; } }
  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 75px; }
    .footer-content .footerLinks {
      font-size: 16px;
      line-height: 35px;
      margin: 0;
      padding: 0;
      order: 2;
      list-style: none;
      text-align: right;
      width: 100%; }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks {
          width: auto; } }
      .footer-content .footerLinks .linkItemList {
        list-style-type: none; }
        .footer-content .footerLinks .linkItemList li {
          position: absolute;
          left: -10000px;
          top: auto;
          width: 1px;
          height: 1px;
          overflow: hidden; }
          .footer-content .footerLinks .linkItemList li:first-child {
            position: relative;
            left: 0;
            height: auto;
            width: 100%; }
          @media only screen and (min-width: 768px) {
            .footer-content .footerLinks .linkItemList li {
              position: relative;
              left: 0;
              height: auto;
              width: 100%; } }
      .footer-content .footerLinks ul {
        padding: 0; }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks li {
          float: left;
          width: 135px; }
          .footer-content .footerLinks li:first-child {
            width: 110px; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .footerLinks li {
          width: 155px; }
          .footer-content .footerLinks li:first-child {
            margin-right: 110px; }
          .footer-content .footerLinks li:nth-child(2) {
            margin-right: 60px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .footerLinks li:first-child, .footer-content .footerLinks li:nth-child(2) {
          width: 155px;
          margin-right: 0; } }
      @media only screen and (min-width: 768px) {
        .footer-content .footerLinks {
          order: 1;
          margin: 0;
          font-size: 13px;
          line-height: 25px;
          text-align: left; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .footerLinks {
          font-size: 14px;
          font-weight: 400;
          line-height: 30px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .footerLinks {
          margin-right: 70px;
          order: 2; } }
    .footer-content .socialMedia {
      order: 1;
      margin: 20px 0 15px 0;
      list-style-type: none;
      text-align: right;
      width: 200px; }
      .footer-content .socialMedia li {
        display: inline-block;
        width: 45px; }
        .footer-content .socialMedia li a {
          display: block;
          color: #FFF;
          font-size: 40px;
          line-height: 45px;
          text-decoration: none; }
          .footer-content .socialMedia li a svg {
            width: 36px;
            height: 36px; }
          @media only screen and (min-width: 768px) {
            .footer-content .socialMedia li a {
              font-size: 50px; } }
        .footer-content .socialMedia li [class^="icon-"],
        .footer-content .socialMedia li [class*=" icon-"] {
          padding: 0; }
        .footer-content .socialMedia li [data-icon]:before,
        .footer-content .socialMedia li [class^="icon-"]:before,
        .footer-content .socialMedia li [class*=" icon-"]:before {
          margin: 0 5px 0 0 !important; }
      @media only screen and (min-width: 768px) {
        .footer-content .socialMedia {
          margin-top: 30px; } }
      @media only screen and (min-width: 1024px) {
        .footer-content .socialMedia {
          margin-top: 30px; } }
      @media only screen and (min-width: 1500px) {
        .footer-content .socialMedia {
          margin-top: 0;
          width: 280px; } }
    @media only screen and (min-width: 768px) {
      .footer-content {
        margin: 0;
        right: 6%;
        position: absolute;
        align-items: flex-end; } }
    @media only screen and (min-width: 1500px) {
      .footer-content {
        flex-direction: row-reverse;
        align-items: flex-start; } }
  @media only screen and (min-width: 768px) {
    .footer-content--secondary {
      position: absolute;
      left: 6%;
      top: 140px;
      width: 400px; } }
  @media only screen and (min-width: 1024px) {
    .footer-content--secondary {
      top: 170px; } }
  @media only screen and (min-width: 1500px) {
    .footer-content--secondary {
      top: 140px; } }
  .footer-content--secondary .facade img {
    width: 100%;
    height: auto; }
  .footer-content--secondary .copyright {
    margin: 35px 0 0 0;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    text-align: right; }
    @media only screen and (min-width: 768px) {
      .footer-content--secondary .copyright {
        font-size: 11px; } }
    @media only screen and (min-width: 1024px) {
      .footer-content--secondary .copyright {
        font-size: 13px; } }
  @media only screen and (min-width: 768px) {
    .footer {
      padding: 15px 0; } }
  @media only screen and (min-width: 1024px) {
    .footer {
      padding: 30px 0; } }

/* NYPL ICON FONT RULES */
@font-face {
  font-family: 'nypl-moon';
  src: url("//ux-static.nypl.org/nypl-moon/nypl-moon.eot?viik85");
  src: url("//ux-static.nypl.org/nypl-moon/nypl-moon.eot?viik85#iefix") format("embedded-opentype"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.woff2?viik85") format("woff2"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.ttf?viik85") format("truetype"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.woff?viik85") format("woff"), url("//ux-static.nypl.org/nypl-moon/nypl-moon.svg?viik85#nypl-moon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="nypl-icon-"], [class*=" nypl-icon-"] {
  font-family: 'nypl-moon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.nypl-icon-circle-wedge-left:before {
  content: "\E60D"; }

.nypl-icon-circle-wedge-right:before {
  content: "\E60E"; }

.book-cover {
  height: 280px;
  display: inline-block;
  position: relative; }
  .book-cover img {
    max-height: 250px; }
  .book-cover .itemOverlay {
    position: absolute;
    bottom: -30px;
    width: 100%;
    background-color: #333333;
    height: 150px; }
    .book-cover .itemOverlay p {
      color: #fff;
      padding: 0 15px;
      margin: 0; }
    .book-cover .itemOverlay .title {
      padding-top: 15px;
      text-align: right; }
    .book-cover .itemOverlay .details {
      margin: 10px 0;
      position: absolute;
      bottom: 0;
      width: 100%; }
      .book-cover .itemOverlay .details svg {
        margin-left: -5px;
        height: 32px;
        width: 32px; }
      .book-cover .itemOverlay .details-author {
        font-size: 16px;
        margin-bottom: 10px; }
      .book-cover .itemOverlay .details-genre, .book-cover .itemOverlay .details-audience {
        text-transform: uppercase;
        font-size: 12px; }

.slick-slider {
  margin-bottom: 0px !important; }

.slick-track {
  height: 310px; }

.slick-book-item {
  margin-right: 15px; }

.slick-prev {
  left: 36%; }
  .slick-prev:before {
    content: "\E60D" !important; }

.slick-next {
  left: 52%; }
  .slick-next:before {
    content: "\E60E" !important; }

.slick-prev, .slick-next {
  display: block;
  width: 35px;
  height: 35px;
  top: 335px; }
  .slick-prev:before, .slick-next:before {
    font-size: 35px;
    font-family: 'nypl-moon' !important;
    opacity: 1; }
  .slick-prev:focus, .slick-next:focus {
    outline: 3px auto #3b99fc; }

.slick-disabled {
  display: none !important; }

/*
Import style rules from App components
*/
.hpRow .leftColumn {
  border-top: 2px solid #E32B31;
  position: relative; }
  .hpRow .leftColumn > h2 {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    color: #E32B31;
    font-size: 20px;
    font-weight: normal;
    line-height: 1em;
    margin: 15px 0;
    padding: 0; }
    .hpRow .leftColumn > h2 a {
      color: #E32B31;
      display: block;
      text-decoration: none; }
    .hpRow .leftColumn > h2 :hover {
      color: #1B7FA7; }
    .hpRow .leftColumn > h2 :focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }

.hpRow .seeMoreWrapper {
  clear: both;
  height: 65px;
  margin: 0;
  text-align: center; }
  .hpRow .seeMoreWrapper .seeMoreLink {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    border: 2px solid #E32B31;
    border-radius: 22px;
    color: #E32B31;
    padding: 14px 18px 12px 14px;
    position: relative;
    text-decoration: none;
    width: 25px; }
    .hpRow .seeMoreWrapper .seeMoreLink:hover {
      border: 2px solid #1B7FA7;
      color: #1B7FA7; }
      .hpRow .seeMoreWrapper .seeMoreLink:hover svg {
        fill: #1B7FA7; }
    .hpRow .seeMoreWrapper .seeMoreLink:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
    .hpRow .seeMoreWrapper .seeMoreLink svg {
      fill: #E32B31;
      height: 25px;
      position: relative;
      top: 8px;
      width: 25px; }

@media (min-width: 768px) {
  .hpRow .leftColumn {
    text-align: right; }
    .hpRow .leftColumn > h2 {
      padding: 0;
      margin: 8px 0 12px; }
    .hpRow .leftColumn .seeMoreWrapper .seeMoreLink {
      position: relative;
      top: initial; } }

.staffPicksRow .leftColumn > h2 a, .bookListRow .leftColumn > h2 a {
  color: #FFF;
  text-decoration: none; }
  .staffPicksRow .leftColumn > h2 a:hover, .bookListRow .leftColumn > h2 a:hover {
    color: #FFF; }

.staffPicksRow .seeMoreWrapper .seeMoreLink, .bookListRow .seeMoreWrapper .seeMoreLink {
  font-family: "Kievit-Medium", "Helvetica", "arial";
  border: 2px solid #FFF;
  border-radius: 22px;
  color: #FFF;
  padding: 14px 18px 12px 14px;
  position: relative;
  text-decoration: none;
  width: 25px; }
  .staffPicksRow .seeMoreWrapper .seeMoreLink svg, .bookListRow .seeMoreWrapper .seeMoreLink svg {
    fill: #FFF; }
  .staffPicksRow .seeMoreWrapper .seeMoreLink:hover, .bookListRow .seeMoreWrapper .seeMoreLink:hover {
    border: 2px solid #FFF;
    color: #FFF; }
    .staffPicksRow .seeMoreWrapper .seeMoreLink:hover svg, .bookListRow .seeMoreWrapper .seeMoreLink:hover svg {
      fill: #FFF; }

@media (min-width: 1024px) {
  .whatsHappeningRow .leftColumn {
    margin-top: 48px; } }

@media only screen and (min-width: 768px) {
  .bookListRow .leftColumn > h2 {
    letter-spacing: -.04em;
    margin-top: 15px; } }

@media only screen and (min-width: 1024px) {
  .bookListRow .leftColumn > h2 {
    margin-top: 15px;
    letter-spacing: normal; } }

@media only screen and (min-width: 1313px) {
  .bookListRow .leftColumn > h2 {
    margin-top: 30px; } }

.hpContentBanner {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  padding-bottom: 10px; }
  @media only screen and (min-width: 768px) {
    .hpContentBanner {
      margin-bottom: 15px;
      padding-bottom: 0px; } }
  @media only screen and (min-width: 1313px) {
    .hpContentBanner {
      margin-bottom: 30px; } }
  .hpContentBanner a {
    text-decoration: none; }
  .hpContentBanner-wrapper img.loaded {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1; }
  .hpContentBanner-wrapper img.notLoaded {
    opacity: 0; }
  .hpContentBanner-imageBox {
    background-color: #89806F;
    height: 220px;
    margin: 0;
    padding: 0; }
    @media only screen and (min-width: 480px) {
      .hpContentBanner-imageBox {
        height: 330px; } }
    @media only screen and (min-width: 560px) {
      .hpContentBanner-imageBox {
        height: 390px; } }
    @media only screen and (min-width: 768px) {
      .hpContentBanner-imageBox {
        height: 320px; } }
    @media only screen and (min-width: 1313px) {
      .hpContentBanner-imageBox {
        height: 400px; } }
    .hpContentBanner-imageBox > img {
      max-width: 100%;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: center 0;
      object-position: center 0; }
  .hpContentBanner-content {
    max-width: 1313px;
    padding: 0 14px;
    margin: 15px auto 0px;
    display: block;
    line-height: normal;
    white-space: normal;
    color: #000; }
    @media only screen and (min-width: 768px) {
      .hpContentBanner-content {
        max-width: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 18%;
        top: 30px;
        color: #FFF; } }
    @media only screen and (min-width: 1025px) {
      .hpContentBanner-content {
        max-width: 1313px;
        width: 100%;
        margin: 0 auto;
        left: 10px;
        right: 0; } }
    @media only screen and (min-width: 1313px) {
      .hpContentBanner-content {
        top: 60px;
        left: 0; } }
    .hpContentBanner-content a {
      background-color: #FFF;
      color: #FFF;
      display: block;
      width: 62%; }
      .hpContentBanner-content a:focus, .hpContentBanner-content a:hover {
        outline: #135772 solid 3px;
        box-shadow: 1px 1px 2px 2px #0f465c; }
        .hpContentBanner-content a:focus h1, .hpContentBanner-content a:hover h1 {
          text-decoration: underline; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content a:focus .seeMoreLink, .hpContentBanner-content a:hover .seeMoreLink {
            border: 2px solid #FFF; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content a {
          background-color: #333;
          padding: 15px;
          width: 55%; } }
      @media only screen and (min-width: 1025px) {
        .hpContentBanner-content a {
          margin-left: 11.5%;
          width: 40%; } }
    .hpContentBanner-content-tag {
      color: #070707;
      margin: 15px 0 0 0;
      font-family: "Kievit-Medium", "Helvetica", "arial";
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.05em; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-tag {
          color: #FFF;
          margin: 0; } }
    .hpContentBanner-content-title {
      margin: 15px 0 0 0;
      color: #070707;
      font-family: "Milo-Regular", "serif";
      font-size: 27px;
      font-weight: 400; }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-title {
          font-size: 36px; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-title {
          color: #FFF;
          margin-top: 10px; } }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-title {
          font-size: 36px;
          max-width: 100%; } }
    .hpContentBanner-content-details {
      margin: 20px 0 30px 0;
      color: #070707; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-details {
          color: #FFF;
          margin: 25px 20px 0 0; } }
    .hpContentBanner-content-date {
      font-family: "Kievit-Medium", "Helvetica", "arial";
      font-weight: normal;
      display: block;
      margin: 0 0 7.5px; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-date {
          margin-bottom: 12.5px; } }
    .hpContentBanner-content-location {
      font-family: "Kievit-Book", "Helvetica", "arial";
      font-weight: normal;
      display: block;
      margin: 7.5px 0 0; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-location {
          margin-top: 12.5px; } }
    .hpContentBanner-content-description {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      margin: 20px 0 30px 0;
      color: #070707; }
      .hpContentBanner-content-description > p {
        font-family: "Kievit-Book", "Helvetica", "arial";
        font-size: 16px;
        font-weight: 300;
        letter-spacing: .03em;
        line-height: 24px;
        margin-bottom: 0;
        margin-top: 10px; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content-description {
          position: relative;
          left: 0;
          height: auto;
          width: 100%;
          color: #FFF;
          width: auto;
          margin: 0; }
          .hpContentBanner-content-description p {
            width: 90%; } }
      @media only screen and (min-width: 1025px) {
        .hpContentBanner-content-description {
          max-width: 80%; }
          .hpContentBanner-content-description p {
            width: 100%; } }
      @media only screen and (min-width: 1313px) {
        .hpContentBanner-content-description {
          margin-top: 0;
          max-width: 300px; } }
    .hpContentBanner-content .seeMoreLink-container {
      position: relative;
      height: 0; }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content .seeMoreLink-container {
          height: 40px; } }
    .hpContentBanner-content .seeMoreLink {
      top: -3.5rem;
      right: -7rem;
      font-family: "Kievit-Medium", "Helvetica", "arial";
      border: 2px solid #E32B31;
      border-radius: 27px;
      color: #000;
      background: #FFF;
      text-decoration: none;
      position: absolute;
      height: 27px;
      padding: 3px 4px;
      text-align: center;
      vertical-align: middle;
      font-size: 1rem; }
      @media only screen and (min-width: 370px) {
        .hpContentBanner-content .seeMoreLink {
          right: -8rem; } }
      @media only screen and (min-width: 480px) {
        .hpContentBanner-content .seeMoreLink {
          right: -10rem; } }
      @media only screen and (min-width: 600px) {
        .hpContentBanner-content .seeMoreLink {
          right: -12rem; } }
      @media only screen and (min-width: 800px) {
        .hpContentBanner-content .seeMoreLink {
          top: -3rem;
          right: -15.5rem; } }
      @media only screen and (min-width: 768px) {
        .hpContentBanner-content .seeMoreLink {
          border: 2px solid #333;
          background: #333;
          border-radius: 27px;
          color: #FFF;
          float: right;
          right: auto;
          position: relative;
          top: auto; } }
      .hpContentBanner-content .seeMoreLink span {
        padding: 0 5px;
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content .seeMoreLink span {
            top: -7px;
            position: relative;
            left: 0;
            height: auto;
            width: 100%; } }
      .hpContentBanner-content .seeMoreLink svg {
        fill: #E32B31;
        height: 25px;
        position: relative;
        top: 1px;
        width: 25px; }
        @media only screen and (min-width: 768px) {
          .hpContentBanner-content .seeMoreLink svg {
            fill: #FFF; } }

.hpWhatsHappening-section {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
  color: #000; }
  .hpWhatsHappening-section .eventItem + .eventItem {
    display: none; }
  .hpWhatsHappening-section a {
    text-decoration: none; }
  .hpWhatsHappening-section h3 {
    font-family: "Kievit-Medium", "Helvetica", "arial";
    color: #E32B31;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    margin: 10px 0;
    letter-spacing: 0.05em; }
    .hpWhatsHappening-section h3:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpWhatsHappening-section ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .hpWhatsHappening-section .eventItem {
    display: inline-block;
    font-family: "Kievit-Medium", "Helvetica", "arial"; }
    .hpWhatsHappening-section .eventItem:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
    .hpWhatsHappening-section .eventItem img {
      width: 28.57143%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .hpWhatsHappening-section .eventItem-title {
      width: 64.28571%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none;
      color: #000;
      line-height: 22px;
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-weight: normal; }
    .hpWhatsHappening-section .eventItem p {
      width: 64.28571%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none;
      font-size: 12px;
      line-height: 20px;
      margin: 5px 0 0 0; }
    .hpWhatsHappening-section .eventItem .eventItem-date {
      text-transform: uppercase; }
    .hpWhatsHappening-section .eventItem .eventItem-location {
      margin-top: 0; }
    .hpWhatsHappening-section .eventItem a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }

.hpWhatsHappening-titleWrapper {
  display: none; }
  @media (min-width: 768px) {
    .hpWhatsHappening-titleWrapper {
      display: block; } }
  @media (min-width: 1024px) {
    .hpWhatsHappening-titleWrapper {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

@media (min-width: 1024px) {
  .hpWhatsHappening-titleWrapper::before {
    width: 38.77551%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    content: '';
    height: 48px;
    border-bottom: 2px solid #E32B31; } }

@media (min-width: 1313px) {
  .hpWhatsHappening-titleWrapper::before {
    width: 51.49254%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; } }

.hpWhatsHappening .titleTabs {
  color: #000;
  display: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-family: "Kievit-Medium", "Helvetica", "arial"; }
  @media (min-width: 768px) {
    .hpWhatsHappening .titleTabs {
      display: table;
      margin: 0 0 20px 0;
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpWhatsHappening .titleTabs li {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        padding: 10px 26px;
        font-size: 12px;
        width: 75px;
        font-weight: 400;
        line-height: 14px;
        border-bottom: 2px solid #E32B31; }
        .hpWhatsHappening .titleTabs li:first-child.active {
          background-color: #FFF; }
        .hpWhatsHappening .titleTabs li.active {
          border: 2px solid #E32B31;
          border-bottom: none;
          color: #E32B31; }
        .hpWhatsHappening .titleTabs li:focus {
          outline: #135772 solid 3px;
          box-shadow: 1px 1px 2px 2px #0f465c; } }
  @media (min-width: 1024px) {
    .hpWhatsHappening .titleTabs {
      width: 61.53846%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }
  @media (min-width: 1313px) {
    .hpWhatsHappening .titleTabs {
      width: 48.71795%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

@media (min-width: 768px) {
  .hpWhatsHappening-section {
    min-height: 195px;
    display: none;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
    .hpWhatsHappening-section h3 {
      display: none; }
    .hpWhatsHappening-section.active {
      display: block; }
      .hpWhatsHappening-section.active .eventItem {
        display: block;
        margin-bottom: 10px; }
        .hpWhatsHappening-section.active .eventItem-title {
          font-size: 18px; }
        .hpWhatsHappening-section.active .eventItem p {
          font-size: 12px;
          line-height: 21px; }
        .hpWhatsHappening-section.active .eventItem:nth-child(odd) {
          width: 48.27586%;
          clear: right;
          float: left;
          margin-left: 0;
          margin-right: 3.44828%;
          clear: both; }
        .hpWhatsHappening-section.active .eventItem:nth-child(even) {
          width: 48.27586%;
          clear: right;
          float: right;
          margin-right: 0; }
        .hpWhatsHappening-section.active .eventItem:focus {
          outline: #135772 solid 3px;
          box-shadow: 1px 1px 2px 2px #0f465c; } }

@media (min-width: 1024px) {
  .hpWhatsHappening-section {
    min-height: 320px; }
    .hpWhatsHappening-section.active .eventItem {
      margin-bottom: 15px; }
      .hpWhatsHappening-section.active .eventItem p, .hpWhatsHappening-section.active .eventItem-title {
        margin: 10px 0 0 0; }
      .hpWhatsHappening-section.active .eventItem:nth-child(n) {
        width: 61.53846%;
        clear: right;
        float: right;
        margin-right: 0; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) img {
          width: 23.07692%;
          float: left;
          margin-right: -100%;
          margin-left: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) p,
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-title {
          width: 74.35897%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-title,
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-date {
          margin-top: 5px;
          width: 74.35897%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-location {
          font-size: 12px;
          line-height: 21px;
          margin-top: 0; }
      .hpWhatsHappening-section.active .eventItem:nth-child(1) {
        width: 35.89744%;
        float: left;
        margin-right: -100%;
        margin-left: 0;
        clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) p,
        .hpWhatsHappening-section.active .eventItem:nth-child(1) img,
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
          width: 100%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
          font-size: 26px;
          line-height: 28px; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-date {
          font-size: 13px;
          margin-top: 15px;
          line-height: 17px;
          width: 100%;
          float: right;
          margin-left: 0;
          margin-right: 0;
          clear: none; }
        .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-location {
          font-size: 13px;
          line-height: 17px;
          margin-top: 5px;
          text-transform: none; } }

@media (min-width: 1313px) {
  .hpWhatsHappening-section.active .eventItem:nth-child(n) {
    width: 48.71795%;
    clear: right;
    float: right;
    margin-right: 0; }
    .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-date {
      font-size: 13px;
      margin-top: 5px; }
    .hpWhatsHappening-section.active .eventItem:nth-child(n) .eventItem-location {
      font-size: 12px;
      line-height: 17px;
      margin-top: 0;
      text-transform: none;
      width: 74.35897%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
  .hpWhatsHappening-section.active .eventItem:nth-child(1) {
    width: 48.71795%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) p,
    .hpWhatsHappening-section.active .eventItem:nth-child(1) img,
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-title {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-date {
      line-height: 16px; }
    .hpWhatsHappening-section.active .eventItem:nth-child(1) .eventItem-location {
      font-size: 14px;
      line-height: 20px;
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; } }

.hpLearn {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .hpLearn-wrapper {
    margin-bottom: 5%; }
  .hpLearn a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-decoration: none; }
    .hpLearn a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpLearn img {
    width: 33%;
    height: auto; }
  .hpLearn h2, .hpLearn-title {
    font-family: "Kievit-Book", "Helvetica", "arial";
    color: #333;
    font-size: 18px;
    flex: 1 1 66%;
    margin-left: 5%; }
  .hpLearn p {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  @media (min-width: 768px) {
    .hpLearn-wrapper {
      flex: 0 48%;
      margin-bottom: 2%;
      /* (100-48*2)/2 */ }
      .hpLearn-wrapper a {
        display: block; }
      .hpLearn-wrapper img {
        width: 100%; }
      .hpLearn-wrapper h2,
      .hpLearn-wrapper .hpLearn-title {
        font-size: 20px;
        line-height: 20px;
        margin-top: 12px; } }
  @media (min-width: 1024px) {
    .hpLearn-wrapper {
      flex: 0 32%;
      margin-bottom: 2%;
      /* (100-32*3)/2 */ }
      .hpLearn-wrapper h2,
      .hpLearn-wrapper .hpLearn-title {
        font-size: 20px;
        font-weight: 400;
        line-height: 18px;
        margin-top: 15px; } }
  @media (min-width: 1313px) {
    .hpLearn-wrapper {
      flex: 0 23%;
      margin-bottom: 4%;
      /* (100-23*3)/2 */ } }

.bookListRow .leftColumn {
  border: none; }

.bookListRow .rightColumn {
  margin-bottom: 30px;
  color: #FFFFFF; }
  @media only screen and (min-width: 768px) {
    .bookListRow .rightColumn {
      margin-top: 15px;
      margin-bottom: 10px; } }
  @media only screen and (min-width: 1024px) {
    .bookListRow .rightColumn {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1313px) {
    .bookListRow .rightColumn {
      margin-top: 30px; } }

.hpBookList .slick {
  /* -- Tablet Portrait Layout --
     * NOTE: Made the whole right side one column and let the plugin/css
     * create the width of the carousel.
    */
  /* -- Tablet Landscape Layout -- */
  /* -- Tablet Landscape Layout -- */ }
  .hpBookList .slick-track {
    height: 350px; }
  .hpBookList .slick-slide .book-cover .itemOverlay {
    font-family: "Kievit-Book", "Helvetica", "arial";
    background-color: #E32B31;
    bottom: -30px;
    font-weight: 400;
    height: 130px; }
    .hpBookList .slick-slide .book-cover .itemOverlay .title {
      text-align: left;
      font-weight: 400; }
    .hpBookList .slick-slide .book-cover .itemOverlay .details {
      margin: 10px 0 5px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .details-author {
        font-size: 16px;
        margin-bottom: 15px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .details-audience, .hpBookList .slick-slide .book-cover .itemOverlay .details-genre {
        font-size: 12px;
        margin-bottom: 5px; }
  .hpBookList .slick-slide .book-cover:focus {
    outline: #135772 solid 3px;
    box-shadow: 1px 1px 2px 2px #0f465c; }
  @media (min-width: 768px) {
    .hpBookList .slick {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpBookList .slick-track {
        height: 300px; }
      .hpBookList .slick-slide .book-cover .itemOverlay {
        bottom: 0px;
        height: 140px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .title {
          font-weight: 400;
          font-size: 18px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .details-author {
          font-size: 16px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .details-audience, .hpBookList .slick-slide .book-cover .itemOverlay .details-genre {
          font-size: 12px; }
      .hpBookList .slick-book-item {
        margin-right: 20px; }
        .hpBookList .slick-book-item img {
          max-height: 216px; }
      .hpBookList .slick-prev, .hpBookList .slick-next {
        top: 144px; }
      .hpBookList .slick-prev {
        left: -16%; }
      .hpBookList .slick-next {
        left: -9%; } }
  @media (min-width: 1024px) {
    .hpBookList .slick {
      width: 100%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
      .hpBookList .slick-slide .book-cover .itemOverlay {
        bottom: -50px; }
        .hpBookList .slick-slide .book-cover .itemOverlay .title {
          font-size: 20px; }
      .hpBookList .slick-track {
        height: 330px; }
      .hpBookList .slick-book-item {
        margin-right: 33px; }
        .hpBookList .slick-book-item img {
          max-height: 289px; }
      .hpBookList .slick-prev {
        left: -12%; }
      .hpBookList .slick-next {
        left: -6%; } }
  @media (min-width: 1313px) {
    .hpBookList .slick-track {
      height: 340px; }
    .hpBookList .slick-slide .book-cover .itemOverlay {
      bottom: -60px; }
      .hpBookList .slick-slide .book-cover .itemOverlay .title {
        font-size: 22px; }
    .hpBookList .slick-book-item img {
      max-height: 360px; }
    .hpBookList .slick-prev {
      left: -10%; }
    .hpBookList .slick-next {
      left: -6%; } }

.staffPicksRow {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }
  @media only screen and (min-width: 768px) {
    .staffPicksRow {
      position: relative;
      left: 0;
      height: auto;
      width: 100%;
      padding-top: 15px;
      min-height: 350px; } }
  @media only screen and (min-width: 1024px) {
    .staffPicksRow {
      padding-top: 30px;
      min-height: 375px; } }
  @media only screen and (min-width: 1313px) {
    .staffPicksRow {
      min-height: 520px; } }
  .staffPicksRow .leftColumn {
    border-top: 2px solid #FFF; }
  .staffPicksRow .seeMoreWrapper {
    margin-top: 30px; }

@media (min-width: 768px) {
  .hpStaffPicks-wrapper:first-child {
    width: 48.27586%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .hpStaffPicks-wrapper:last-child {
    width: 48.27586%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .hpStaffPicks-pick {
    display: block;
    height: 200px;
    width: 100%;
    color: #000;
    position: relative; }
    .hpStaffPicks-pick .quoteBackground {
      display: block;
      width: auto;
      height: 100%;
      margin: 0 55px 0 0;
      background: #fff;
      z-index: 0; }
      .hpStaffPicks-pick .quoteBackground:after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 30px;
        border-width: 20px 20px 0 0;
        border-style: solid;
        border-color: #fff transparent;
        display: block;
        width: 0; }
    .hpStaffPicks-pick .description {
      font-family: "Milo-Light-Italic", "serif";
      position: absolute;
      left: 0;
      bottom: 10%;
      width: auto;
      z-index: 100;
      margin: 0;
      padding: 0 120px 0 15px;
      color: #000;
      font-size: 20px;
      font-weight: normal;
      line-height: 22px; }
    .hpStaffPicks-pick .link {
      display: block;
      z-index: 101;
      position: absolute;
      right: 0;
      bottom: 0; }
      .hpStaffPicks-pick .link img {
        max-height: 175px;
        max-width: 115px;
        padding: 0;
        margin: 0;
        border: 0;
        float: left; }
      .hpStaffPicks-pick .link:focus {
        outline: #135772 solid 3px;
        box-shadow: 1px 1px 2px 2px #0f465c; }
  .hpStaffPicks-staff {
    color: #fff;
    margin-top: 15px; }
    .hpStaffPicks-staff img {
      height: 60px;
      width: 60px;
      float: left; }
    .hpStaffPicks-staff .svgIcon {
      fill: #c51d12;
      float: left;
      height: 50px;
      width: 50px;
      margin: 12px 10px 0 0; }
    .hpStaffPicks-staff .name {
      margin: 0;
      font-size: 18px;
      padding-top: 20px;
      padding-bottom: 4px;
      font-weight: 400;
      font-family: "Kievit-Book", "Helvetica", "arial"; }
    .hpStaffPicks-staff .title {
      font-size: 15px;
      margin: 0;
      font-weight: 400;
      font-family: "Kievit-Book", "Helvetica", "arial"; } }

@media (min-width: 1024px) {
  .hpStaffPicks-pick {
    height: 264px; }
    .hpStaffPicks-pick .quoteBackground {
      margin-right: 75px; }
    .hpStaffPicks-pick .description {
      font-size: 27px;
      line-height: 32px;
      padding-right: 157px; } }
    @media only screen and (min-width: 1024px) and (min-width: 1140px) {
      .hpStaffPicks-pick .description {
        line-height: 35px; } }
    @media only screen and (min-width: 1024px) and (min-width: 1234px) {
      .hpStaffPicks-pick .description {
        line-height: 37px; } }

@media (min-width: 1024px) {
    .hpStaffPicks-pick .link img {
      max-height: 233px;
      max-width: 153px; }
  .hpStaffPicks-staff {
    margin-left: 15px; }
    .hpStaffPicks-staff .name {
      padding-top: 20px;
      font-size: 16px; } }

@media (min-width: 1313px) {
  .hpStaffPicks-pick {
    height: 374px; }
    .hpStaffPicks-pick .quoteBackground {
      margin-right: 105px; }
    .hpStaffPicks-pick .description {
      font-size: 38px;
      line-height: 38px;
      padding: 0 220px 0 30px;
      bottom: 13%; }
    .hpStaffPicks-pick .link img {
      max-height: 320px;
      max-width: 212px; }
  .hpStaffPicks-staff {
    margin-top: 20px;
    margin-left: 5px; }
    .hpStaffPicks-staff .svgIcon {
      height: 60px;
      width: 60px;
      margin: 22px 10px 0 0; }
    .hpStaffPicks-staff .name {
      padding-top: 34px;
      font-size: 20px; }
    .hpStaffPicks-staff .title {
      font-size: 15px; } }

.ofNoteRow .seeMoreWrapper {
  margin-top: 30px; }

.ofNoteRow .hpOfNote {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .ofNoteRow .hpOfNote-wrapper {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 15px; }
  .ofNoteRow .hpOfNote a {
    text-decoration: none; }
    .ofNoteRow .hpOfNote a:focus {
      outline: #135772 solid 3px;
      box-shadow: 1px 1px 2px 2px #0f465c; }
  .ofNoteRow .hpOfNote img {
    width: 28.57143%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .ofNoteRow .hpOfNote h2, .ofNoteRow .hpOfNote-title {
    width: 64.28571%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial";
    font-size: 18px; }
  .ofNoteRow .hpOfNote p {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial"; }
  @media (min-width: 768px) {
    .ofNoteRow .hpOfNote-wrapper:first-child {
      width: 48.27586%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper:last-child {
      width: 48.27586%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper img {
      width: 64.28571%;
      clear: right;
      float: left;
      margin-left: 0;
      margin-right: 7.14286%;
      clear: both; }
    .ofNoteRow .hpOfNote-wrapper h2,
    .ofNoteRow .hpOfNote-wrapper .hpOfNote-title {
      width: 28.57143%;
      clear: right;
      float: right;
      margin-right: 0;
      line-height: 20px;
      font-size: 18px;
      margin: 5px 0 15px; } }
  @media (min-width: 1024px) {
    .ofNoteRow .hpOfNote-wrapper:first-child {
      width: 48.71795%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper:last-child {
      width: 48.71795%;
      float: right;
      margin-left: 0;
      margin-right: 0;
      clear: none; }
    .ofNoteRow .hpOfNote-wrapper img {
      width: 44.44444%;
      clear: right;
      float: left;
      margin-left: 0;
      margin-right: 11.11111%;
      clear: both; }
    .ofNoteRow .hpOfNote-wrapper h2,
    .ofNoteRow .hpOfNote-wrapper .hpOfNote-title {
      width: 44.44444%;
      clear: right;
      float: right;
      margin-right: 0;
      font-size: 18px;
      font-weight: 400;
      line-height: 19px; }
    .ofNoteRow .hpOfNote-wrapper p {
      position: relative;
      left: 0;
      height: auto;
      width: 100%;
      width: 44.44444%;
      clear: right;
      float: right;
      margin-right: 0;
      font-size: 15px;
      font-weight: 400;
      line-height: 19px;
      margin: 0 0 15px 0; } }

.blogsRow .seeMoreWrapper {
  margin-top: 30px; }

.blogsRow .hpBlogs-item {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  margin-bottom: 15px; }
  .blogsRow .hpBlogs-item:last-child {
    margin-bottom: 0px; }

.blogsRow .hpBlogs-imageBox {
  width: 28.57143%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none; }
  .blogsRow .hpBlogs-imageBox .rectangularImage {
    max-width: 100%; }

.blogsRow .hpBlogs-contentBox {
  width: 64.28571%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none; }

.blogsRow .hpBlogs-title {
  font-size: 18px;
  color: #333;
  margin: 0;
  line-height: 1.25em;
  font-family: "Milo-Regular", "serif"; }

.blogsRow .hpBlogs-description {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: #333;
  font-family: "Kievit-Book", "Helvetica", "arial"; }

.blogsRow .hpBlogs-authorBox {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }
  .blogsRow .hpBlogs-authorBox-name, .blogsRow .hpBlogs-authorBox-title {
    color: #333;
    font-family: "Kievit-Book", "Helvetica", "arial"; }
  .blogsRow .hpBlogs-authorBox-image {
    width: 50px;
    height: 50px;
    padding: 0;
    float: left;
    margin: 0px 10px 0 0;
    border-radius: 50%; }
  .blogsRow .hpBlogs-authorBox .svgIcon {
    padding: 0;
    stroke: transparent;
    fill: #7b7b7b;
    opacity: 0.3;
    height: 50px;
    width: 50px;
    margin: 0px 10px 0 0;
    float: left; }

.blogsRow .hpBlogs a:focus {
  outline: #135772 solid 3px;
  box-shadow: 1px 1px 2px 2px #0f465c; }

@media (min-width: 768px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-imageBox {
    width: 48.27586%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .blogsRow .hpBlogs-contentBox {
    width: 48.27586%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-title {
    font-size: 24px;
    line-height: 1.15em; }
  .blogsRow .hpBlogs-authorBox {
    position: relative;
    left: 0;
    height: auto;
    width: 100%;
    margin-top: 10px; }
    .blogsRow .hpBlogs-authorBox-name {
      margin: 5px 0 0 0;
      font-size: 18px; }
    .blogsRow .hpBlogs-authorBox-title {
      margin: 5px 0 0 0;
      font-size: 13px; } }

@media (min-width: 1024px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 30px; }
  .blogsRow .hpBlogs-imageBox {
    width: 35.89744%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none; }
  .blogsRow .hpBlogs-contentBox {
    width: 61.53846%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }
  .blogsRow .hpBlogs-description {
    position: relative;
    left: 0;
    height: auto;
    width: 100%;
    margin: 10px 0 0 0;
    font-size: 15px;
    line-height: 1.35em; } }

@media (min-width: 1313px) {
  .blogsRow .hpBlogs-item {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 45px; }
  .blogsRow .hpBlogs-imageBox {
    width: 48.71795%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    text-align: right; }
    .blogsRow .hpBlogs-imageBox .rectangularImage {
      max-width: 448px; }
  .blogsRow .hpBlogs-contentBox {
    width: 48.71795%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; } }

/*# sourceMappingURL=styles.css.map*/