/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.partner-banner.banner { padding: 10px 0; }
.partner-banner.banner .body { font-size: 14px; line-height: 3; margin-bottom: 0; }
.partner-banner.banner .body a { color: white; }
.partner-banner.banner .body a:visited { color: white; }

.partner-link-banner.banner { height: 50px; text-shadow: none; background: #7d828a; font-size: 15px; }
.partner-link-banner.banner .partner-enabled-text-container { color: white; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 14px; }
.partner-link-banner.banner .partner-link-top-banner { display: flex; justify-content: space-between; align-items: center; width: calc(100vw - 25em); margin: 0 auto; height: 100%; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-buttons { display: flex; justify-content: center; align-items: center; height: 100%; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-buttons .partner-button { margin-right: 0.6em; white-space: nowrap; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-link { font-size: 14px; text-decoration: none; color: white; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-link .current-partner { font-weight: bold; }
.partner-link-banner.banner .partner-link-top-banner .single-partner { color: white; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-blurb { display: none; }
.partner-link-banner.banner .partner-link-top-banner #jq-dropdown-partner { top: 35px !important; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container .partner-link-popup { position: absolute; z-index: 1000; color: black; background: white; border-radius: 3px; top: 1.5em; width: 5em; text-align: center; pointer-events: none; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container .partner-link-preview-popup { min-width: 15em; width: auto; }

/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.sticky-navbar .remind-me-icon-view { font-size: 24px; color: rgba(216, 216, 218, 0.5); }
.sticky-navbar .remind-me-icon-view .error-box { display: none; position: absolute; color: white; font-size: 14px; background: black; height: 40px; line-height: 40px; width: 300px; padding: 2px; border-radius: 3px; text-align: center; top: 42px; bottom: 0; }
.sticky-navbar .remindme-countdown-container { display: none; }

.countdown-timer .countdown-timer-counter { background-color: rgba(0, 0, 0, 0.1); color: white; display: inline-flex; flex-direction: column; justify-content: space-around; align-items: center; box-sizing: border-box; border-radius: 3px; padding: 5px; margin: 2px; width: 40px; height: 40px; }
.countdown-timer .countdown-timer-counter.ending-soon { background-color: #dc3f31; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.countdown-timer .countdown-timer-counter label { opacity: 0.2; font-size: 12px; }
.countdown-timer .countdown-timer-counter .countdown-timer-number { line-height: 1em; font-weight: bold; font-size: 18px; }

@media screen and (min-width: 70em) { .sticky-navbar .remindme-countdown-container { display: flex; } }
.button { outline: none; box-sizing: border-box; border: none; border-radius: 3px; color: white; cursor: pointer; display: inline-block; margin: 0; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease, background 0.2s ease; }

.button.large { line-height: 46px; font-size: 18px; padding: 0 25px; }

.button.green { background-color: #97b147; background-image: linear-gradient(-180deg, #97b147 0%, #7e992e 91%); text-align: center; border-radius: 3px; color: white; font-weight: bold; cursor: pointer; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); text-transform: uppercase; }
.button.green:hover { background-image: linear-gradient(-180deg, #aecc52 0%, #94b336 100%); }

.sticky-navbar { position: fixed; left: 0; right: 0; background-color: #494f5b; z-index: 200; height: 50px; transition: top 0.2s ease-in-out; }
.sticky-navbar.s-hidden { top: -50px; }
@media (max-width: 69.99em) { .sticky-navbar.s-fixed { top: 0; } }
.sticky-navbar .dd-navbar-row { display: flex; justify-content: space-between; }
.sticky-navbar .dd-navbar-button-list, .sticky-navbar .dd-navbar-product-name { float: left; max-height: 50px; overflow: hidden; }
.sticky-navbar .dd-navbar-button, .sticky-navbar .dd-navbar-product-name { color: #d8d8da; font-size: 14px; display: inline-block; height: 50px; line-height: 50px; box-sizing: border-box; padding: 0 20px; }
.sticky-navbar .dd-navbar-button { border-bottom: 0px solid #18a3ff; cursor: pointer; transition: border-bottom-width 0.2s ease-in-out; }
.sticky-navbar .dd-navbar-button .section-name { position: relative; transition: bottom 0.2s ease-in-out; }
.sticky-navbar .dd-navbar-product-name { display: none; }
.sticky-navbar .dd-navbar-button.s-selected { border-bottom-width: 5px; }
.sticky-navbar .dd-navbar-button.s-selected .section-name { bottom: 3px; }
.sticky-navbar .dd-navbar-purchase-button { float: right; height: 36px; line-height: 36px; margin-top: 7px; min-width: 180px; }

@media (max-width: 767px) { .sticky-navbar .dd-navbar-button-list { display: none; }
  .sticky-navbar .dd-navbar-product-name { display: block; } }
.js-dd-navbar-remindme-button { display: flex; }
.js-dd-navbar-remindme-button .remind-me-icon-view { margin: auto 16px; display: flex; flex-direction: column; justify-content: center; position: relative; }

.js-dd-navbar-countdown-view { display: flex; align-items: center; }
.js-dd-navbar-countdown-view .blocky-timer { font-size: 0.9em; }

.dd-availability-icon-popup { background-color: white; border-radius: 3px; color: #3b3e48; display: block; font-size: 14px; font-style: normal; font-weight: normal; left: 50%; line-height: 16px; margin: 0 0 0 -110px; opacity: 0; padding: 10px 10px 0px; position: absolute; text-shadow: none; top: 30px; transition: opacity 0.2s ease-in-out; visibility: hidden; width: 200px; }

.dd-availability-icon-popup:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: white; border-width: 9px; margin: 0 -9px; }

.dd-availability-icon-popup-row { color: #cb272c; padding-bottom: 10px; text-shadow: none; }

.dd-availability-icon-popup-row.s-available { color: #3b3e48; }

.dd-availability-icon-popup-text { font-size: 14px; font-style: italic; line-height: 16px; text-align: left; }

.dd-availability-icon-popup-row-img { margin-right: 2px; }

sup.partial-support { color: #ff9999; font-size: 14px; font-weight: bold; padding-left: 1px; vertical-align: super; }

.fi-row.desktop { margin: auto; max-width: 70%; padding-bottom: 60px; }
.fi-row.desktop .fi-image { display: inline-block; max-width: 20%; margin-right: 10px; vertical-align: top; }
.fi-row.desktop .fi-image img { vertical-align: middle; width: 100%; }
.fi-row.desktop .fi-content { display: inline-block; margin: auto 15px; vertical-align: top; width: 70%; }
.fi-row.desktop .fi-content .fi-content-header { color: #dd99ff; font-size: 14px; }
.fi-row.desktop .fi-content .fi-content-body { color: #d8d8da; padding-bottom: 10px; }
.fi-row.desktop .fi-content .fi-form .standard-signup-box { margin: 0; }
.fi-row.desktop .fi-content .fi-form .fi-subscribe-checkboxes { color: #bbbbbb; padding-top: 10px; }

.dd-header { margin: 0 0 25px; text-align: center; color: #d8d8da; flex-basis: 100%; }

.dd-header-headline { text-transform: uppercase; font-weight: bold; font-size: 24px; }

.dd-header-subheader { font-size: 15px; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.game-boxes { padding: 0; text-align: center; vertical-align: middle; margin: 0; display: inline-block; }
.game-boxes.bta { margin-top: 40px; }
.game-boxes li { display: inline-block; vertical-align: top; text-align: center; line-height: 16px; }
.game-boxes li .table-wrapper { display: table; }
.game-boxes li .table-wrapper a .standard-game-display { display: table-cell; }
.game-boxes li .table-wrapper a .standard-game-display.no-image { white-space: nowrap; }
.game-boxes li .table-wrapper .js-admin-edit { position: relative; }
.game-boxes li .table-wrapper .js-admin-edit .admin-tiny-link i { z-index: 1; left: -20px; }
.game-boxes li .no-platform-icons { margin-top: 24px; }
.game-boxes li .side-box-art-text { display: table-cell; font-weight: normal; vertical-align: top; text-align: left; padding-left: 20px; }
.game-boxes li .side-box-art-text p { color: #a1a7b2; font-weight: bold; }
.game-boxes li .side-box-art-text p strong { color: white; }
.game-boxes > li { padding: 10px; }
.game-boxes img { display: block; margin: 0 auto 14px auto; }
.game-boxes a, .game-boxes .item-title { color: #eeeeee; text-decoration: none; font-weight: bold; display: table-row; position: relative; }
.game-boxes .subtitle { display: block; font-size: 11px; font-weight: normal; color: #ef9841; }
.game-boxes .soundtrack-tiers { font-size: 80%; color: #dddddd; }

.dd-image-box-white { color: #e8e8e8; }

/* books */
.dd-image-box { position: relative; align-self: baseline; }

.dd-image-box-badge-holder { display: flex; position: absolute; top: -4px; right: -4px; z-index: 1; }

.dd-image-box-badge { width: 28px; height: 28px; margin-right: 1px; text-align: center; border-radius: 500px; background-color: #97b147; }
.dd-image-box-badge.earlyaccess { background-color: #4a91e2; }
.dd-image-box-badge.dlc { background-color: #dd99ff; }
.dd-image-box-badge.special_edition { background-color: #ef9841; }

.dd-image-box-badge-text { color: white; font-size: 14px; font-weight: bold; line-height: 28px; position: relative; text-shadow: none; }

.dd-image-box-figure { background-position: bottom; cursor: pointer; display: inline-block; position: relative; }

.hoverable .dd-image-box-figure { -webkit-transition: transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out; -o-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
.hoverable .dd-image-box-figure:hover, .hoverable .dd-image-box-figure:focus { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); z-index: 2; }

.dd-image-holder { position: relative; }

img.dd-image-box-figure-img { background-repeat: no-repeat; background-size: cover; bottom: 0px; display: block; margin: auto; max-height: 240px; max-width: 180px; width: 100%; }

.dd-image-box-caption-container { position: relative; }
.dd-image-box-caption-container .dd-captions { display: flex; flex-direction: column; }

.dd-image-box-caption { text-align: center; margin: 5px auto; max-width: 170px; word-wrap: break-word; }
.dd-image-box-caption .dd-caption-lock { display: inline; }

.dd-image-box-text { justify-self: flex-start; font-size: 15px; line-height: 22px; letter-spacing: .2px; }

.dd-callout { color: #ef9841; font-size: 13px; font-weight: bold; line-height: 16px; text-align: center; }

.dd-subtitle-html { color: #e8e8e8; font-size: 13px; font-style: italic; line-height: 18px; letter-spacing: .2px; font-weight: normal; text-align: center; }

@media screen and (max-width: 767px) { .dd-tooltip-wrapper, .dd-subscriber { display: none; } }
@media screen and (min-width: 768px) { .dd-tooltip-wrapper { justify-self: baseline; font-style: normal; text-align: center; color: #e8e8e8; position: relative; }
  .dd-reviewbox { border-radius: 3px; padding: 5px 0; cursor: pointer; }
  .dd-tooltip-wrapper .dd-tooltipcarrot { display: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid white; margin: auto; position: absolute; left: 0; right: 0; }
  .dd-tooltip-wrapper .dd-tooltiptext { position: absolute; height: 0px; font-size: 0; color: black; line-height: 1; border-radius: 3px; margin-top: 5px; }
  .dd-tooltip-wrapper:hover .dd-tooltipcarrot { display: block; }
  .dd-tooltip-wrapper:hover .dd-tooltiptext { height: auto; background-color: white; padding: 10px; font-size: inherit; } }
.accolade { color: #5db7e4; font-weight: bold; }

.dd-unavailable-in-region-text { display: none; color: white; position: absolute; width: 100%; font-weight: bold; font-size: 14px; padding: 10px; box-sizing: border-box; text-align: center; top: 10%; }

.s-region-locked .dd-unavailable-in-region-text, .s-sold-out .dd-unavailable-in-region-text { display: block; }
.s-region-locked .dd-image-box-figure img, .s-sold-out .dd-image-box-figure img { opacity: 0.3; }
.s-region-locked .dd-image-box-caption, .s-sold-out .dd-image-box-caption { text-decoration: line-through; }

.wide-game-image img.dd-image-box-figure-img { max-width: 308px; max-height: 177px; }
.wide-game-image .dd-image-box-text { line-height: normal; letter-spacing: normal; }
.wide-game-image .dd-image-box-caption { max-width: 308px; }

.steam-none { color: #929396; }

.steam-positive { color: #66c0f4; }

.steam-mixed { color: #b9a074; }

.steam-negative { color: #a34d25; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.dd-gradient-icons { position: absolute; bottom: 0; left: 0; color: #d5d9e1; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding: 5px 5px 0; box-sizing: border-box; text-shadow: black 0px 0px 2px; }

.dd-availability-icon-list, .dd-delivery-icon-list { position: absolute; bottom: 0; margin: 10px; }

.dd-availability-icon-list { left: 0; }

.dd-delivery-icon-list { right: 0; }

.dd-availability-icon { display: inline-table; margin: 1px 4px; position: relative; }

.dd-availability-icon-image { font-size: 19px; }
.dd-availability-icon-image.has-popup { cursor: help; }
.dd-availability-icon-image.hb-psthree, .dd-availability-icon-image.hb-psfour, .dd-availability-icon-image.hb-psvita { font-size: 16px; }

.dd-availability-continues { margin-left: -3px; font-weight: bold; display: inline-table; }

.rating { display: inline-block; width: 32px; height: 32px; margin-right: 5px; background-size: cover; vertical-align: middle; }

.rating.bbfc { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/633dd818d130dad5c999fd78b60d5209e45825e1.png"); }

.rating.bbfc.bbfc-u { background-position: -32px; }

.rating.bbfc.bbfc-12a { background-position: -64px; }

.rating.bbfc.bbfc-12 { background-position: -96px; }

.rating.bbfc.bbfc-15 { background-position: -128px; }

.rating.bbfc.bbfc-18 { background-position: -160px; }

.rating.bbfc.bbfc-r18 { background-position: -193px; }

.rating.cero { width: 26px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/7745217f293cb86bf37d1d91e9842450e6196f1d.png"); }

.rating.cero.cero-b { background-position: -26px; }

.rating.cero.cero-c { background-position: -51px; }

.rating.cero.cero-d { background-position: -77px; }

.rating.cero.cero-z { background-position: -102px; }

.rating.djctq { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a4972eb1ad5d672811c38df259d5df86b67b0376.png"); }

.rating.djctq.djctq-er { background-position: -32px; }

.rating.djctq.djctq-10 { background-position: -64px; }

.rating.djctq.djctq-12 { background-position: -96px; }

.rating.djctq.djctq-14 { background-position: -128px; }

.rating.djctq.djctq-16 { background-position: -160px; }

.rating.djctq.djctq-18 { background-position: -192px; }

.rating.esrb, .rating.pegi { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/61b488b704ac86ab2b7d15a43cb883632459301e.png"); }

.rating.esrb { width: 40px; height: 54px; }

.rating.esrb.esrb-e { background-position: -44px; }

.rating.esrb.esrb-e10 { background-position: -88px; }

.rating.esrb.esrb-t { background-position: -132px; }

.rating.esrb.esrb-m { background-position: -176px; }

.rating.esrb.esrb-a { background-position: -220px; }

.rating.esrb.esrb-rp { background-position: -264px; }

.rating.grb { width: 28px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/2177b52b6dac1a615d587ba6b1e41c347e41e05f.png"); }

.rating.grb.grb-12 { background-position: -28px; }

.rating.grb.grb-15 { background-position: -56px; }

.rating.grb.grb-18 { background-position: -84px; }

.rating.grb.grb-test { background-position: -110px; }

.rating.mda { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a5aa27a6fdeb68e07b049ca46f22a42998d5081f.png"); }

.rating.mda.mda-pg { background-position: -32px; }

.rating.mda.mda-pg13 { background-position: -64px; }

.rating.mda.mda-nc16 { background-position: -96px; }

.rating.mda.mda-m18 { background-position: -128px; }

.rating.oflc-au { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/f96f1a64b8140ef28eb38be8d4051c723c2845cd.png"); width: 64px; height: 64px; }

.rating.oflc-au.oflc-au-g { background-position: -64px; }

.rating.oflc-au.oflc-au-pg { background-position: -128px; }

.rating.oflc-au.oflc-au-m { background-position: -192px; }

.rating.oflc-au.oflc-au-ma15 { background-position: -256px; }

.rating.oflc-au.oflc-au-r18 { background-position: -320px; }

.rating.oflc-au.oflc-au-x18 { background-position: -384px; }

.rating.oflc-nz { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a0f3cdc96e331a832f18bb023be0681cd1894553.png"); width: 64px; height: 64px; }

.rating.oflc-nz.oflc-nz-pg { background-position: -64px; }

.rating.oflc-nz.oflc-nz-m { background-position: -128px; }

.rating.oflc-nz.oflc-nz-r { background-position: -192px; }

.rating.oflc-nz.oflc-nz-r13 { background-position: -256px; }

.rating.oflc-nz.oflc-nz-rp13 { background-position: -320px; }

.rating.oflc-nz.oflc-nz-r15 { background-position: -384px; }

.rating.oflc-nz.oflc-nz-r16 { background-position: -448px; }

.rating.oflc-nz.oflc-nz-r18 { background-position: -512px; }

.rating.pegi { width: 44px; height: 54px; }

.rating.pegi.pegi-3 { background-position: -308px; }

.rating.pegi.pegi-7 { background-position: -352px; }

.rating.pegi.pegi-12 { background-position: -396px; }

.rating.pegi.pegi-16 { background-position: -440px; }

.rating.pegi.pegi-18 { background-position: -484px; }

.rating.rar { width: 56px; height: 62px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/2117099bdaeef2d4f2be92e39b1d3cc25ae3c1a5.png"); }

.rating.rar.rar-6 { background-position: -56px; }

.rating.rar.rar-12 { background-position: -112px; }

.rating.rar.rar-16 { background-position: -168px; }

.rating.rar.rar-18 { background-position: -224px; }

.rating.usk { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/27c2a51e3a3b2ce9787289dc368f7d17e8a3aec6.png"); width: 64px; height: 64px; }

.rating.usk.usk-6 { background-position: -64px; }

.rating.usk.usk-12 { background-position: -128px; }

.rating.usk.usk-16 { background-position: -192px; }

.rating.usk.usk-18 { background-position: -256px; }

.dd-game-row { position: relative; }

.slideout-content-dev-anchor { text-decoration: none; border-bottom: 1px solid #ef9841; }

.slideout-content-dev-name { color: #ef9841; font-size: 14px; }

.slideout-content-developer-separator { color: white; }

.slideout-availability-icons { display: flex; flex-wrap: wrap; }

.slideout-availability-icon-container { display: flex; flex-flow: row nowrap; margin-bottom: 10px; margin-right: 10px; }

.slideout-availability-icon-wrapper { height: 38px; padding: 0 11px; background-color: #51565f; color: #e4e7ed; line-height: 38px; font-size: 20px; border-radius: 3px; border: 1px solid #a1a6b2; box-sizing: border-box; }
.slideout-availability-icon-wrapper.has-delivery-icons { border-radius: 3px 0 0 3px; border-right: none; }

.slideout-platforms { height: 38px; line-height: 38px; color: white; font-size: 16px; padding: 0 2px; border: 1px solid #a1a6b2; border-radius: 0 3px 3px 0; box-sizing: border-box; }
.slideout-platforms .tooltip-top:after { color: black; width: auto; white-space: nowrap; }

.slideout-platform { margin: 0 4px; }

.slideout-rating { display: flex; margin-bottom: 10px; }
.slideout-rating .rating-icon { width: 15%; }
.slideout-rating ul.rating-details { display: inline-block; list-style-type: none; padding: 0; margin: auto; vertical-align: middle; width: 85%; }
.slideout-rating ul.rating-details li { float: left; font-weight: bold; margin-left: 5px; max-width: 120px; width: 100%; }

.hover-black-overlay { background-color: #282c34; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; transition: visibility 0.1s ease-in-out; visibility: hidden; width: 100%; }

.hover-icon-holder { cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.hover-icon { color: white; font-size: 64px; opacity: 1; text-align: center; width: 100%; vertical-align: middle; visibility: hidden; transition: visibility 0.1s ease-in-out; }

.hoverable:hover .hover-black-overlay, .hoverable:hover .hover-icon { visibility: visible; }

.soundtracks-hidden { display: none; }

.soundtrack-listing-container { display: flex; flex-direction: row; flex-wrap: wrap; }

.track { display: flex; justify-content: space-between; padding: 1px 5px; width: calc(50% - 10px); }
.track .track-title { overflow: hidden; padding-right: 5px; text-overflow: ellipsis; white-space: nowrap; }
.track .track-title .track-play { cursor: pointer; padding-right: 2px; }
.track .track-title .track-play.hb-pause { color: #ef9841; }
.track .track-title .track-number { cursor: pointer; }
.track .track-length { align-self: center; color: #a1a7b2; margin-right: 15px; }

.jp-audio .jp-gui { background: #3b3e48; color: white; margin-left: auto; margin-right: auto; width: 240px; height: 20px; padding: 10px; }
.jp-audio .jp-play { color: white; font-size: 20px; display: inline-block; width: 20px; height: 20px; }
.jp-audio .jp-play.loading:before { content: url("//humblebundle-a.akamaihd.net/static/hashed/6f42c642858f68c80b4557c0a87c47e108ed8a97.gif"); }
.jp-audio .jp-details { display: inline-block; line-height: 10px; }
.jp-audio .jp-title { margin-left: 5px; width: 178px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-audio .jp-progress { display: inline-block; height: 3px; width: 178px; margin: 0 5px; vertical-align: middle; }
.jp-audio .jp-seek-bar { height: 100%; width: 100%; border: 1px solid #a1a7b2; border-radius: 10px; }
.jp-audio .jp-play-bar { height: 100%; background: #97b147; position: relative; left: -1px; }
.jp-audio .jp-play-dot { display: inline-block; position: relative; left: -3px; top: -7px; font-size: 10px; }
.jp-audio .jp-remaining { display: inline-block; width: 30px; margin-left: 2px; vertical-align: bottom; }
.jp-audio .jp-no-solution { color: white; display: none; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.slideout-holder { border-top: 1px solid rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.5); height: 100%; background-color: #282c34; display: none; margin-top: 30px; }
.slideout-holder a { color: #ef9841; }

.slideout-up-arrow { display: none; position: relative; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid rgba(0, 0, 0, 0.5); top: 0px; left: 0px; }
.slideout-up-arrow.animate { transition: left 0.25s ease-in-out; }
.slideout-up-arrow .slideout-inner-triangle { position: relative; top: 1px; left: -30px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #282c34; }

.desktop-slideout-container { position: relative; width: 100vw; }
.desktop-slideout-container .navigation-content, .desktop-slideout-container .close-slideout { background-color: #282c34; cursor: pointer; padding: 10px; position: absolute; transition: background-color 0.2s ease-in-out; }
.desktop-slideout-container .navigation-content:hover, .desktop-slideout-container .close-slideout:hover { background-color: rgba(255, 255, 255, 0.1); }
.desktop-slideout-container .navigation-content { bottom: 30px; color: #eeeeee; font-size: 48px; top: 30px; }
.desktop-slideout-container .navigation-content.left { left: 10px; }
.desktop-slideout-container .navigation-content.right { right: 10px; }
.desktop-slideout-container .navigation-content .center { bottom: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.desktop-slideout-container .close-slideout { border-radius: 50%; color: rgba(255, 255, 255, 0.3); font-size: 24px; top: 10px; text-align: center; width: 32px; right: 35px; }
.desktop-slideout-container .desktop-slideout-content-container { max-width: 1150px; margin: auto; height: 100%; overflow: hidden; width: 100%; }
.desktop-slideout-container .media-load-spinner { font-size: 75px; color: #3b3e48; position: absolute; text-align: center; width: 100%; }
.desktop-slideout-container .desktop-slideout-media { align-items: center; max-height: 350px; align-self: center; display: flex; flex-direction: column; max-width: 600px; position: relative; width: 65%; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-media { width: 100%; margin-bottom: 20px; } }
.desktop-slideout-container .desktop-slideout-media .slideout-image { margin: 0 auto; flex-shrink: 0; height: auto; max-width: 100%; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon { color: white; position: absolute; top: calc(50% - 95px); left: calc(50% - 95px); width: 190px; height: 70px; padding-top: 120px; text-align: center; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon-generic { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/fcaf5d01bf5ddc15b4493daf63965e28492ad93b.png"); }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon-pdf { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/d3b0ea5548d542d3a8dc68def4ccd70fdc7eddf6.png"); }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-text { display: block; font-size: 12px; font-weight: bold; margin: 0; padding: 0; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-size { font-size: 10px; }
.desktop-slideout-container .desktop-slideout-body { color: white; display: flex; flex-direction: column; margin-left: 3%; max-height: 350px; position: relative; }
.desktop-slideout-container .desktop-slideout-body.text-slideout { width: 35%; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-body.text-slideout { width: 100%; max-width: 600px; margin: auto; } }
.desktop-slideout-container .desktop-slideout-body.full-width { width: 100%; }
.desktop-slideout-container .desktop-slideout-content { display: flex; align-items: flex-start; justify-content: center; margin: auto; padding: 10px 55px 30px 55px; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-content { flex-wrap: wrap; flex-flow: column; align-items: center; } }
.desktop-slideout-container .desktop-slideout-content-heading { margin: 0; margin-bottom: 5px; }
.desktop-slideout-container .desktop-slideout-content-developers { margin: 0; margin-bottom: 10px; }
.desktop-slideout-container .desktop-slideout-text { flex-shrink: 10; overflow: auto; padding-bottom: 10px; scrollbar-base-color: #282c34; scrollbar-arrow-color: #3b3e48; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar { width: 10px; height: 10px; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar-thumb { background: #3b3e48; visibility: hidden; }
.desktop-slideout-container .desktop-slideout-text:hover::-webkit-scrollbar-thumb { visibility: visible; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar-track { background: #282c34; }
.desktop-slideout-container .desktop-slideout-text.fade:after { content: ' '; background-image: linear-gradient(to bottom, transparent 0%, #282c34 100%); bottom: -5px; display: block; height: 50px; left: 0; position: absolute; width: calc(100% - 13.5px); /* Decreasing width to exclude the scrollbar from being affected by the gradient */ }

/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.dd-game-row { padding: 75px 0 0; }

/* image_box extras */
.dd-image-box-list { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 60px; }

.dd-image-box { width: 180px; margin: 13px 10px 0; }

.dd-image-box.desktop .dd-image-box-badge .badge-info { background-color: #97b147; border: none; border-radius: 500px; font-size: 12px; left: 3px; line-height: 10px; opacity: 0; overflow: hidden; padding: 9px; padding-left: 27px; position: absolute; text-align: right; top: 0px; transition: opacity ease-in-out 0.3s; width: auto; white-space: nowrap; z-index: -1; }
.dd-image-box.desktop .dd-image-box-badge:hover .badge-info { opacity: 1; }
.dd-image-box.desktop .dd-image-box-badge.earlyaccess .badge-info { background-color: #4a91e2; }
.dd-image-box.desktop .dd-image-box-badge.dlc .dd-image-box-badge-text .hb-gamepad { font-size: 16px; }
.dd-image-box.desktop .dd-image-box-badge.dlc .badge-info { background-color: #dd99ff; }
.dd-image-box.desktop .dd-image-box-badge.special_edition .badge-info { background-color: #ef9841; }

.dd-image-box.wide-game-image { width: 308px; }
.dd-image-box.wide-game-image .dd-gradient-icons { height: 40px; }

/* availability_icon_list */
.dd-gradient-icons { height: 85px; background: none; /* For browsers that do not support gradients */ background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%); }

.dd-availability-icon:hover .dd-availability-icon-popup { opacity: 1; visibility: visible; }

.admin-quicklinks { list-style: none; z-index: 150; position: fixed; bottom: 75px; right: 10px; height: 45px; width: 47px; margin: 0; padding: 5px; border: 2px solid #dc3f31; border-radius: 5px; background: white; font-size: 12px; text-align: right; box-sizing: content-box; transition: height 200ms ease-out, width 200ms ease-out, padding 200ms ease-out; }
.admin-quicklinks .hb-bundle { position: fixed; color: #cb272c; right: 16px; font-size: 45px; }
.admin-quicklinks:hover { height: auto; width: auto; padding: 10px; }
.admin-quicklinks:hover .hb-bundle { display: none; }
.admin-quicklinks:hover .menu-item { display: block; width: auto; }
.admin-quicklinks .menu-item { display: none; width: 0; padding: 5px 0; }
.admin-quicklinks .quicklink { color: black; text-decoration: none; }

.admin-tiny-link { position: relative; overflow: visible; font-size: 12px; z-index: 100; text-decoration: none; }
.admin-tiny-link i { position: absolute; left: -10px; top: -10px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); transform: scale(1); transform-origin: center; transition: text-shadow .3s ease, transform .3s ease; }
.admin-tiny-link i:hover { text-shadow: 0 3px 5px rgba(0, 0, 0, 0.4); transform: scale(2); }
.admin-tiny-link.disabled { display: none; }

@media (min-width: 70em) { .admin-quicklinks { bottom: 10px; } }
.rounded-container { border-radius: 8px; }

.page-section { padding: 0 2rem; margin: 0 0 5em; }

.section-block { border-radius: 8px; max-width: 88.75em; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 1.875em 1.25em; background-image: radial-gradient(circle at 50% 0, #768095, #575c69); box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); }
.section-block a { color: inherit; }
.section-block .dot-arrow-nav .page-dot { color: #4c505d; }
.section-block .shadow-flexbox { display: flex; justify-content: space-between; margin-bottom: 2em; flex-direction: column; }
@media (min-width: 56em) { .section-block .shadow-flexbox { flex-direction: row; margin-bottom: 3em; } }
.section-block .shadow-flexbox .shadow-block { flex-basis: calc(100%/3 - 1.75em); margin-bottom: 2em; -ms-flex: 0 0 auto; }
.section-block .shadow-flexbox .shadow-block:last-child { margin-bottom: 0; }
@media (min-width: 56em) { .section-block .shadow-flexbox .shadow-block { font-size: 1.15em; margin-bottom: 0; -ms-flex: 0 0 25%; } }
.section-block .shadow-block { border-radius: 6px; padding: 1.75em; box-sizing: border-box; background-image: linear-gradient(to bottom, #515865, #484c57); text-align: center; color: #d3d8e3; }
.section-block .shadow-block .emphasis { display: block; font-size: 6em; font-weight: lighter; color: white; margin-bottom: 0.1em; }
.section-block .shadow-block .emphasis sup { font-size: .4em; position: relative; top: -1em; }
.section-block .shadow-block .emphasis .cancel-card-img { width: 0.8em; position: relative; top: 0.1em; }
.section-block .shadow-block .description { display: block; font-weight: bold; text-transform: uppercase; margin-bottom: 0.5em; }
@media (min-width: 56em) { .section-block .shadow-block { padding: 2em; } }
.section-block .footer-link { font-size: 0.93em; text-align: center; display: block; text-transform: uppercase; font-weight: bold; color: #d3d8e3; }
@media (min-width: 56em) { .section-block .footer-link { font-size: 1.125em; } }

.section-header { color: white; font-size: 1.75em; line-height: 1.2; text-align: center; text-transform: uppercase; margin: 0 0 0.5em; text-shadow: rgba(0, 0, 0, 0.21) 0 4px 0; }
@media (min-width: 48em) { .section-header { font-size: 2.125em; } }

.section-description { color: #d3d8e3; text-align: center; font-size: 1.125em; margin: 0 auto 3em; text-shadow: rgba(0, 0, 0, 0.2) 0 2px 0; }
@media (min-width: 90em) { .section-description { width: 75%; max-width: 53em; font-size: 1.15em; } }

.timer-section .hero-countdown-timer { margin-bottom: 1.25em; }
.timer-section .footnote { width: 80%; margin: 0 auto; font-size: .75em; text-transform: uppercase; font-weight: bold; text-align: left; line-height: 1.125; }
@media (min-width: 48em) { .timer-section { display: flex; flex-wrap: nowrap; align-items: center; }
  .timer-section .hero-countdown-timer { flex-shrink: 0; margin-right: 0.5em; margin-bottom: 0; font-size: 0.8em; }
  .timer-section .footnote { width: auto; margin: 0; flex-basis: 50%; text-align: left; } }

.slick-slider .slick-arrow { opacity: 1; transition: opacity 0.2s; }
.slick-slider .slick-arrow.disabled, .slick-slider .slick-arrow.slick-disabled { pointer-events: none; cursor: default; }
.slick-slider .slick-arrow.slick-disabled { opacity: 0; }
.slick-slider .arrow-button { cursor: pointer; position: absolute; color: #8a909e; font-size: 2em; padding: 0.7em 0.8em; border-radius: 14px; background: linear-gradient(to bottom, #494e5a, #3e4451); box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2); }
.slick-slider .arrow-button:hover { color: white; text-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4); background: linear-gradient(to bottom, #40444f, #323843); }
.slick-slider .arrow-button:active { background: #4e535f; color: #3c4049; }
.slick-slider .arrow-button.slick-prev, .slick-slider .arrow-button.slick-next { top: calc(50% - 2.7em); }
.slick-slider .arrow-button.slick-prev { left: -0.2em; }
.slick-slider .arrow-button.slick-next { right: -0.2em; }

.dot-arrow-nav { padding: 0; }
.dot-arrow-nav .slick-dots li { line-height: 1; }
.dot-arrow-nav .slick-dots li.slick-active { display: inline-block; }
.dot-arrow-nav .slick-dots li.slick-active .page-dot { color: white; }
.dot-arrow-nav .page-dot { transition: transform 0.5s ease; font-size: 3em; opacity: 1; color: #5c6270; font-style: normal; }

@media screen and (min-width: 48em) { .section-block:not(.subscribe-box) { padding: 2.5em; }
  .dot-arrow-nav .page-dot { font-size: 4em; } }
@media screen and (min-width: 64em) { .slick-slider .arrow-button { font-size: 2.1em; } }
.slick-dots { list-style: none; padding: 0; margin: 0; text-align: center; }
.slick-dots li { display: inline-block; padding: 0 5px; font-size: 10px; }
.slick-dots li.slick-active .page-dot { opacity: 1; }
.slick-dots .page-dot { color: white; cursor: pointer; opacity: 0.5; }
.slick-dots .page-dot:hover, .slick-dots .page-dot:focus { opacity: 0.75; outline: none; }

.slick-track { display: flex; }
.slick-track .slick-slide { height: unset; }
.slick-track .slick-slide:focus { outline: none; }

.dot-arrow-nav { display: flex; justify-content: center; align-items: center; }
.dot-arrow-nav .hb-chevron-right { order: 9999; }
.dot-arrow-nav .hb-chevron-left { order: -9999; }

@media (max-width: 1024px) { .slick-dots li { font-size: unset; } }
@media (max-width: 1024px) { .navbar.headroom--pinned ~ .monthly-navbar .sticky-navbar:not(.s-hidden) { top: 66px; } }
.sticky-navbar { white-space: nowrap; display: flex; padding: 0 16px; pointer-events: auto; transform: translateZ(0); }
.sticky-navbar.s-hidden { transition-property: opacity, top; transition-duration: .2s; opacity: 0; }
.sticky-navbar .u-navbar-constrain-width { margin: auto; width: 100%; }
.sticky-navbar .dd-navbar-row { align-items: center; }
.sticky-navbar .dd-navbar-button-list { flex: 10; }
.sticky-navbar .dd-navbar-button { font-weight: bold; text-transform: uppercase; padding: 0; margin: 0 10px; color: #a1a7b2; }
.sticky-navbar .dd-navbar-button.s-selected { color: white; border-bottom-width: 4px; }
.sticky-navbar .remind-me-icon-view, .sticky-navbar .blocky-timer { margin-right: 16px; }
.sticky-navbar .blocky-timer { font-size: 0.75em; }
.sticky-navbar .monthly-navbar-message { color: white; }
.sticky-navbar .subscribe-button .rectangular-button { min-width: 8em; text-align: center; }

@media (max-width: 1024px) { .sticky-navbar .blocky-timer { display: none; } }
/* Slider */
.slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

#hero { position: relative; margin-bottom: 5em; }
#hero .content-container { max-width: 88.75em; margin: 0 auto; position: relative; }
#hero .section-header { margin-top: 1em; text-align: left; font-size: 2.75em; }
#hero .section-description { text-align: left; margin: 0 0 1.8em; max-width: 35em; }
#hero .section-description .tooltip-bottom:after { color: black; text-shadow: none; }
#hero .early-unlocks-section { padding: 1.25em; background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); margin-bottom: 3.125em; }
#hero .early-unlocks-section strong { display: block; font-size: 1.125em; text-transform: uppercase; margin-bottom: 1.25em; line-height: 1.25; }
#hero .early-unlocks-section .early-unlock-images { max-width: 60em; }
#hero .early-unlocks-section .early-reveal-images { max-width: 60em; width: 82.5%; }
#hero .early-unlocks-section .early-unlock-video-view { flex-grow: 1; }
#hero .early-unlocks-section .early-unlock-image { position: relative; margin-bottom: 1.85em; border-radius: 5px; overflow: hidden; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
#hero .early-unlocks-section .early-unlock-image .img-wrapper { position: relative; width: 100%; height: 0; padding-bottom: calc(57.30519481% + 0em); }
#hero .early-unlocks-section .early-unlock-image .img-wrapper img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; }
#hero .early-unlocks-section .early-unlock-image .early-unlock-video:hover:after { content: ''; display: block; bottom: 0; left: 0; right: 0; top: 0; position: absolute; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/dcdeade872868e42ffc99487a32a40686df3c9f3.png"); background-position: right 4% bottom 4%; background-repeat: no-repeat; background-size: 20%; }
@media (hover: none) { #hero .early-unlocks-section .early-unlock-image .early-unlock-video:after { content: ''; display: block; bottom: 0; left: 0; right: 0; top: 0; position: absolute; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/dcdeade872868e42ffc99487a32a40686df3c9f3.png"); background-position: right 4% bottom 4%; background-repeat: no-repeat; background-size: 20%; } }
#hero .early-unlocks-section .early-unlock-image .delivery-methods { position: absolute; bottom: 0; margin: 0.625em; background-color: #2c333a; font-size: 0.85em; }
#hero .early-unlocks-section .early-unlock-image .delivery-methods .hb { padding: 0.66em; }
@media screen and (min-width: 30em) { #hero .early-unlocks-section .early-unlock-image .delivery-methods { font-size: 1.16em; } }
#hero .early-unlocks-section .early-unlock-image.early-reveal-image { background-color: #4b6584; border: 2px solid #4b6584; border-radius: 4px; text-align: center; box-sizing: border-box; }
#hero .early-unlocks-section .early-unlock-image.early-reveal-image span { text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); font-size: .75em; font-weight: bold; display: inline-block; margin: 0.25em 0 calc(.25em + 2px); }
#hero .lock-boxes { display: flex; flex-wrap: nowrap; overflow: hidden; margin: 0 -0.5em; position: relative; max-width: 50em; }
#hero .lock-boxes .lock-box { flex: 1; margin: 0 0.5em; border-radius: 2px; border-width: 2px; border-style: solid; border-image: linear-gradient(to bottom, #89acd5, #7b87a0) 30; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/6f303f16000246907b71d391bba659335f601efb.png"); background-repeat: no-repeat; background-position: center; background-size: 30%; background-color: rgba(0, 0, 0, 0.3); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1); }
#hero .lock-boxes .lock-box:after { display: block; content: ''; padding-top: calc(95/155 * 100%); }
#hero .lock-boxes .lock-box:last-child { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/d3b3abbc27fb3c7652c2b5ab7623ad0df33b870e.png"), linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); background-color: transparent; background-position: center, left center; background-size: 30%, 100%; border-image: linear-gradient(to right, #89acd5, transparent 60%) 30; box-shadow: none; }
#hero .lock-boxes .lock-box:first-child { display: none; }
#hero .promo-section { margin: 0 auto 3em; }
#hero .promo-section .monthly-promo-container { position: relative; border-radius: 5px; width: 100%; padding: 2.5em 0; background: url("//humblebundle-a.akamaihd.net/static/hashed/87ba1d8b60a505269f255ee60106b1fa617ec9a9.jpg"); background-size: cover; display: flex; justify-content: center; }
#hero .promo-section .monthly-promo-container .promo-image { max-width: 85%; display: flex; justify-content: center; }
#hero .promo-section .monthly-promo-container .promo-image img { max-width: 100%; }
#hero .promo-section .limited-callout { background: rgba(0, 0, 0, 0.25); border-radius: 5px; position: absolute; font-size: 0.8em; font-weight: bold; padding: .5em; left: .5em; top: .5em; }
#hero .cta-section { text-align: center; background-image: linear-gradient(to top, rgba(32, 36, 45, 0.4), rgba(0, 0, 0, 0.4)); border-radius: 6px; }
#hero .cta-section .subscribe-button .button-v2 { width: 100%; box-sizing: border-box; font-size: 1.25em; padding: 1.7em 0.8em; }
#hero .cta-section .timer-section { padding: 1em; }

@media screen and (max-width: 30em) { #hero .promo-cta-section .promo-section .monthly-promo-container { padding: 2.5em 0 1.5em; }
  #hero .promo-cta-section .promo-section .monthly-promo-container .promo-image { padding: .5em; }
  #hero .promo-cta-section .promo-section .monthly-promo-container .promo-image img { width: 100%; height: 100%; }
  #hero .promo-cta-section .limited-callout { top: 0; left: initial; width: 100%; padding: .5em 0; text-align: center; } }
@media screen and (min-width: 48em) { #hero .early-unlocks-section { padding: 1.75em; }
  #hero .early-unlocks-section .early-unlock-images, #hero .early-unlocks-section .early-reveal-images { display: flex; flex-direction: row; flex-wrap: wrap; margin: -1.1em -1.1em 0.75em; }
  #hero .early-unlocks-section .early-unlock-images .early-unlock-image, #hero .early-unlocks-section .early-reveal-images .early-unlock-image { flex-basis: calc(50% - 2.2em - 4px); margin: 1.1em; }
  #hero .lock-boxes { margin: 0 -1em; }
  #hero .lock-boxes .lock-box { margin: 0 1em; }
  #hero .lock-boxes .lock-box:first-child { display: block; }
  #hero .cta-section { max-width: 25em; } }
@media screen and (min-width: 48em) { #hero:before { display: block; content: ''; position: absolute; width: 50%; max-width: 55em; height: 100%; max-height: 50em; right: 0; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/99d537df3578bdeca0a1233687bae6acc02e0b99.svg"); background-position: right 3em; background-repeat: no-repeat; background-size: contain; }
  #hero .early-unlocks-section { margin-bottom: 2.5em; }
  #hero .early-unlocks-section .early-unlock-images .early-unlock-image { flex-grow: 1; flex-basis: auto; max-width: 38.5em; }
  #hero .early-unlocks-section .early-unlock-images .early-unlock-image .delivery-methods { font-size: 0.86em; }
  #hero .early-unlocks-section .early-reveal-images .early-unlock-image { flex-grow: 1; flex-basis: auto; max-width: 20em; }
  #hero .monthly-promo-container { padding: 3em 10em; } }
@media screen and (min-width: 64em) { #hero .promo-cta-section { display: flex; flex-direction: row; width: 100%; }
  #hero .promo-cta-section .cta-section { order: 1; }
  #hero .promo-cta-section .promo-section { margin: 0 auto 0 2em; flex: 1; order: 2; }
  #hero .promo-cta-section .promo-section .monthly-promo-container { padding: 3em 0; } }
/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
#previous-months { position: relative; overflow: hidden; margin-bottom: 0; padding-bottom: 5em; }

.previous-months-columns { display: flex; font-size: .75em; margin: 0 auto; justify-content: center; }
.previous-months-columns .slick-list { width: calc(100% + 2em); max-width: 90.75em; overflow: visible; }
.previous-months-columns .slick-list .slick-slide { margin: 0 1em; }
.previous-months-columns .slick-arrow { display: block; box-sizing: border-box; width: 12em; height: calc(100% + 2.5em); top: -1.25em; padding: 3em; position: absolute; z-index: 1; pointer-events: none; }
.previous-months-columns .slick-arrow:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; top: 0; opacity: .8; filter: blur(1em); }
.previous-months-columns .slick-arrow.prev-arrow-container { left: -2rem; }
.previous-months-columns .slick-arrow.prev-arrow-container:before { left: -2em; background-image: linear-gradient(to left, transparent, rgba(62, 66, 77, 0.53) 30%, #24262e); }
.previous-months-columns .slick-arrow.next-arrow-container { right: -2rem; }
.previous-months-columns .slick-arrow.next-arrow-container:before { right: -2em; background-image: linear-gradient(to right, transparent, rgba(62, 66, 77, 0.53) 30%, #24262e); }
.previous-months-columns .arrow-button { position: relative; padding: 1.75em 0.85em; pointer-events: auto; background: linear-gradient(to bottom, #b1b9ce, #8e94a4); color: white; }
.previous-months-columns .arrow-button:hover { background-image: linear-gradient(to bottom, #8e95a9, #565b67); text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); }
.previous-months-columns .arrow-button:active { background: #4e535f; color: #3c4049; }
.previous-months-columns .arrow-button.slick-prev, .previous-months-columns .arrow-button.slick-next { top: calc(50% - 1em); }

.previous-months-nav .slick-dots li { display: none; }
.previous-months-nav .slick-dots li.slick-active + li, .previous-months-nav .slick-dots li.slick-first-degree-sibling { display: inline-block; }
.previous-months-nav .slick-dots li.slick-active + li + li, .previous-months-nav .slick-dots li.slick-second-degree-sibling { display: inline-block; }

.previous-month-background { width: 100%; background-color: #5f6677; }
.previous-month-background .monthly-info { background-color: #9196a6; text-align: center; }
.previous-month-background .monthly-image-grid { display: flex; flex-flow: wrap; padding: 0.5em 0.5em 0; }
.previous-month-background .monthly-image-grid .monthly-image-grid-item-container { flex-basis: calc(50% - 1.1em); margin: 0.54em; }
.previous-month-background .monthly-image-grid .monthly-image-grid-item-container a { display: block; border-radius: 6px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px; }
.previous-month-background .monthly-image-grid .monthly-image-grid-item-container .monthly-image-grid-item { width: 100%; }

.month-details { flex: 1; }
.month-details a { color: inherit; text-decoration: none; }
.month-details .month-content { box-sizing: border-box; display: flex; flex-direction: column; padding: 1em; background-color: #5f6677; box-shadow: rgba(0, 0, 0, 0.2) 0 20px 40px; position: relative; align-items: center; min-width: 100%; }
.month-details .month-content .highlights-and-description { background-color: #b1b9ce; display: flex; flex-direction: column; text-align: center; padding: 0.75em; }
.month-details .month-content .highlights-and-description .highlight-container { color: #292b32; min-height: 1.5em; font-size: 1em; margin: 0; }
.month-details .month-content .highlights-and-description .highlight-container .highlight { text-shadow: none; }
.month-details .month-content .highlights-and-description .highlight-container .highlight:before { top: -0.1em; margin-left: 0.5em; vertical-align: middle; opacity: 1; color: #7d97a7; }
.month-details .month-content .charity-info { padding: 1.1em; }
.month-details .month-content .charity-info .charity-video-view { display: flex; align-items: center; }
.month-details .month-content .charity-info .charity-logo-container { width: 23.5%; margin-right: 1em; flex-shrink: 0; }
.month-details .month-content .charity-info .charity-logo-container .charity-logo { display: block; width: 100%; height: 0; padding-bottom: calc(147/260 * 100%); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 5px; position: relative; overflow: hidden; }
.month-details .month-content .charity-info .charity-logo-container .charity-logo:hover:after { content: ''; display: block; bottom: 0; left: 0; right: 0; top: 0; position: absolute; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/dcdeade872868e42ffc99487a32a40686df3c9f3.png"); background-color: rgba(0, 0, 0, 0.8); background-position: center; background-repeat: no-repeat; background-size: 65%; }
.month-details .month-content .charity-info .charity-description { font-size: .85em; margin: 0; font-weight: bold; text-transform: uppercase; line-height: 1.2; }
.month-details .month-content .month-header { font-size: 1.75em; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); text-transform: uppercase; margin: 0 0 .6em; }
.month-details .month-content .product-page-link { color: #292b32; text-transform: uppercase; font-weight: bold; display: inline-block; margin-bottom: 0.5em; padding: 0.4em 1.25em; border-radius: 6px; }
.month-details .month-content .product-page-link:hover { background-color: #b1b9ce; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); }
.month-details .month-content .product-page-link:active { background-color: #686f81; }

.month-details-wrap { position: relative; display: flex; }
.month-details-wrap .month-details { display: flex; justify-content: center; }

@media screen and (min-width: 48em) { .previous-months-columns { font-size: 1em; } }
/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.partner-banner.banner { padding: 10px 0; }
.partner-banner.banner .body { font-size: 14px; line-height: 3; margin-bottom: 0; }
.partner-banner.banner .body a { color: white; }
.partner-banner.banner .body a:visited { color: white; }

.partner-link-banner.banner { height: 50px; text-shadow: none; background: #7d828a; font-size: 15px; }
.partner-link-banner.banner .partner-enabled-text-container { color: white; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 14px; }
.partner-link-banner.banner .partner-link-top-banner { display: flex; justify-content: space-between; align-items: center; width: calc(100vw - 25em); margin: 0 auto; height: 100%; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-buttons { display: flex; justify-content: center; align-items: center; height: 100%; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-buttons .partner-button { margin-right: 0.6em; white-space: nowrap; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-link { font-size: 14px; text-decoration: none; color: white; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-link .current-partner { font-weight: bold; }
.partner-link-banner.banner .partner-link-top-banner .single-partner { color: white; }
.partner-link-banner.banner .partner-link-top-banner .partner-list-blurb { display: none; }
.partner-link-banner.banner .partner-link-top-banner #jq-dropdown-partner { top: 35px !important; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container .partner-link-popup { position: absolute; z-index: 1000; color: black; background: white; border-radius: 3px; top: 1.5em; width: 5em; text-align: center; pointer-events: none; }
.partner-link-banner.banner .partner-link-top-banner .partner-link-container .partner-link-preview-popup { min-width: 15em; width: auto; }

/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.sticky-navbar .remind-me-icon-view { font-size: 24px; color: rgba(216, 216, 218, 0.5); }
.sticky-navbar .remind-me-icon-view .error-box { display: none; position: absolute; color: white; font-size: 14px; background: black; height: 40px; line-height: 40px; width: 300px; padding: 2px; border-radius: 3px; text-align: center; top: 42px; bottom: 0; }
.sticky-navbar .remindme-countdown-container { display: none; }

.countdown-timer .countdown-timer-counter { background-color: rgba(0, 0, 0, 0.1); color: white; display: inline-flex; flex-direction: column; justify-content: space-around; align-items: center; box-sizing: border-box; border-radius: 3px; padding: 5px; margin: 2px; width: 40px; height: 40px; }
.countdown-timer .countdown-timer-counter.ending-soon { background-color: #dc3f31; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.countdown-timer .countdown-timer-counter label { opacity: 0.2; font-size: 12px; }
.countdown-timer .countdown-timer-counter .countdown-timer-number { line-height: 1em; font-weight: bold; font-size: 18px; }

@media screen and (min-width: 70em) { .sticky-navbar .remindme-countdown-container { display: flex; } }
.button { outline: none; box-sizing: border-box; border: none; border-radius: 3px; color: white; cursor: pointer; display: inline-block; margin: 0; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease, background 0.2s ease; }

.button.large { line-height: 46px; font-size: 18px; padding: 0 25px; }

.button.green { background-color: #97b147; background-image: linear-gradient(-180deg, #97b147 0%, #7e992e 91%); text-align: center; border-radius: 3px; color: white; font-weight: bold; cursor: pointer; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2); text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); text-transform: uppercase; }
.button.green:hover { background-image: linear-gradient(-180deg, #aecc52 0%, #94b336 100%); }

.sticky-navbar { position: fixed; left: 0; right: 0; background-color: #494f5b; z-index: 200; height: 50px; transition: top 0.2s ease-in-out; }
.sticky-navbar.s-hidden { top: -50px; }
@media (max-width: 69.99em) { .sticky-navbar.s-fixed { top: 0; } }
.sticky-navbar .dd-navbar-row { display: flex; justify-content: space-between; }
.sticky-navbar .dd-navbar-button-list, .sticky-navbar .dd-navbar-product-name { float: left; max-height: 50px; overflow: hidden; }
.sticky-navbar .dd-navbar-button, .sticky-navbar .dd-navbar-product-name { color: #d8d8da; font-size: 14px; display: inline-block; height: 50px; line-height: 50px; box-sizing: border-box; padding: 0 20px; }
.sticky-navbar .dd-navbar-button { border-bottom: 0px solid #18a3ff; cursor: pointer; transition: border-bottom-width 0.2s ease-in-out; }
.sticky-navbar .dd-navbar-button .section-name { position: relative; transition: bottom 0.2s ease-in-out; }
.sticky-navbar .dd-navbar-product-name { display: none; }
.sticky-navbar .dd-navbar-button.s-selected { border-bottom-width: 5px; }
.sticky-navbar .dd-navbar-button.s-selected .section-name { bottom: 3px; }
.sticky-navbar .dd-navbar-purchase-button { float: right; height: 36px; line-height: 36px; margin-top: 7px; min-width: 180px; }

@media (max-width: 767px) { .sticky-navbar .dd-navbar-button-list { display: none; }
  .sticky-navbar .dd-navbar-product-name { display: block; } }
.js-dd-navbar-remindme-button { display: flex; }
.js-dd-navbar-remindme-button .remind-me-icon-view { margin: auto 16px; display: flex; flex-direction: column; justify-content: center; position: relative; }

.js-dd-navbar-countdown-view { display: flex; align-items: center; }
.js-dd-navbar-countdown-view .blocky-timer { font-size: 0.9em; }

.dd-availability-icon-popup { background-color: white; border-radius: 3px; color: #3b3e48; display: block; font-size: 14px; font-style: normal; font-weight: normal; left: 50%; line-height: 16px; margin: 0 0 0 -110px; opacity: 0; padding: 10px 10px 0px; position: absolute; text-shadow: none; top: 30px; transition: opacity 0.2s ease-in-out; visibility: hidden; width: 200px; }

.dd-availability-icon-popup:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: white; border-width: 9px; margin: 0 -9px; }

.dd-availability-icon-popup-row { color: #cb272c; padding-bottom: 10px; text-shadow: none; }

.dd-availability-icon-popup-row.s-available { color: #3b3e48; }

.dd-availability-icon-popup-text { font-size: 14px; font-style: italic; line-height: 16px; text-align: left; }

.dd-availability-icon-popup-row-img { margin-right: 2px; }

sup.partial-support { color: #ff9999; font-size: 14px; font-weight: bold; padding-left: 1px; vertical-align: super; }

.fi-row.desktop { margin: auto; max-width: 70%; padding-bottom: 60px; }
.fi-row.desktop .fi-image { display: inline-block; max-width: 20%; margin-right: 10px; vertical-align: top; }
.fi-row.desktop .fi-image img { vertical-align: middle; width: 100%; }
.fi-row.desktop .fi-content { display: inline-block; margin: auto 15px; vertical-align: top; width: 70%; }
.fi-row.desktop .fi-content .fi-content-header { color: #dd99ff; font-size: 14px; }
.fi-row.desktop .fi-content .fi-content-body { color: #d8d8da; padding-bottom: 10px; }
.fi-row.desktop .fi-content .fi-form .standard-signup-box { margin: 0; }
.fi-row.desktop .fi-content .fi-form .fi-subscribe-checkboxes { color: #bbbbbb; padding-top: 10px; }

.dd-header { margin: 0 0 25px; text-align: center; color: #d8d8da; flex-basis: 100%; }

.dd-header-headline { text-transform: uppercase; font-weight: bold; font-size: 24px; }

.dd-header-subheader { font-size: 15px; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.game-boxes { padding: 0; text-align: center; vertical-align: middle; margin: 0; display: inline-block; }
.game-boxes.bta { margin-top: 40px; }
.game-boxes li { display: inline-block; vertical-align: top; text-align: center; line-height: 16px; }
.game-boxes li .table-wrapper { display: table; }
.game-boxes li .table-wrapper a .standard-game-display { display: table-cell; }
.game-boxes li .table-wrapper a .standard-game-display.no-image { white-space: nowrap; }
.game-boxes li .table-wrapper .js-admin-edit { position: relative; }
.game-boxes li .table-wrapper .js-admin-edit .admin-tiny-link i { z-index: 1; left: -20px; }
.game-boxes li .no-platform-icons { margin-top: 24px; }
.game-boxes li .side-box-art-text { display: table-cell; font-weight: normal; vertical-align: top; text-align: left; padding-left: 20px; }
.game-boxes li .side-box-art-text p { color: #a1a7b2; font-weight: bold; }
.game-boxes li .side-box-art-text p strong { color: white; }
.game-boxes > li { padding: 10px; }
.game-boxes img { display: block; margin: 0 auto 14px auto; }
.game-boxes a, .game-boxes .item-title { color: #eeeeee; text-decoration: none; font-weight: bold; display: table-row; position: relative; }
.game-boxes .subtitle { display: block; font-size: 11px; font-weight: normal; color: #ef9841; }
.game-boxes .soundtrack-tiers { font-size: 80%; color: #dddddd; }

.dd-image-box-white { color: #e8e8e8; }

/* books */
.dd-image-box { position: relative; align-self: baseline; }

.dd-image-box-badge-holder { display: flex; position: absolute; top: -4px; right: -4px; z-index: 1; }

.dd-image-box-badge { width: 28px; height: 28px; margin-right: 1px; text-align: center; border-radius: 500px; background-color: #97b147; }
.dd-image-box-badge.earlyaccess { background-color: #4a91e2; }
.dd-image-box-badge.dlc { background-color: #dd99ff; }
.dd-image-box-badge.special_edition { background-color: #ef9841; }

.dd-image-box-badge-text { color: white; font-size: 14px; font-weight: bold; line-height: 28px; position: relative; text-shadow: none; }

.dd-image-box-figure { background-position: bottom; cursor: pointer; display: inline-block; position: relative; }

.hoverable .dd-image-box-figure { -webkit-transition: transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out; -o-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
.hoverable .dd-image-box-figure:hover, .hoverable .dd-image-box-figure:focus { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); z-index: 2; }

.dd-image-holder { position: relative; }

img.dd-image-box-figure-img { background-repeat: no-repeat; background-size: cover; bottom: 0px; display: block; margin: auto; max-height: 240px; max-width: 180px; width: 100%; }

.dd-image-box-caption-container { position: relative; }
.dd-image-box-caption-container .dd-captions { display: flex; flex-direction: column; }

.dd-image-box-caption { text-align: center; margin: 5px auto; max-width: 170px; word-wrap: break-word; }
.dd-image-box-caption .dd-caption-lock { display: inline; }

.dd-image-box-text { justify-self: flex-start; font-size: 15px; line-height: 22px; letter-spacing: .2px; }

.dd-callout { color: #ef9841; font-size: 13px; font-weight: bold; line-height: 16px; text-align: center; }

.dd-subtitle-html { color: #e8e8e8; font-size: 13px; font-style: italic; line-height: 18px; letter-spacing: .2px; font-weight: normal; text-align: center; }

@media screen and (max-width: 767px) { .dd-tooltip-wrapper, .dd-subscriber { display: none; } }
@media screen and (min-width: 768px) { .dd-tooltip-wrapper { justify-self: baseline; font-style: normal; text-align: center; color: #e8e8e8; position: relative; }
  .dd-reviewbox { border-radius: 3px; padding: 5px 0; cursor: pointer; }
  .dd-tooltip-wrapper .dd-tooltipcarrot { display: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid white; margin: auto; position: absolute; left: 0; right: 0; }
  .dd-tooltip-wrapper .dd-tooltiptext { position: absolute; height: 0px; font-size: 0; color: black; line-height: 1; border-radius: 3px; margin-top: 5px; }
  .dd-tooltip-wrapper:hover .dd-tooltipcarrot { display: block; }
  .dd-tooltip-wrapper:hover .dd-tooltiptext { height: auto; background-color: white; padding: 10px; font-size: inherit; } }
.accolade { color: #5db7e4; font-weight: bold; }

.dd-unavailable-in-region-text { display: none; color: white; position: absolute; width: 100%; font-weight: bold; font-size: 14px; padding: 10px; box-sizing: border-box; text-align: center; top: 10%; }

.s-region-locked .dd-unavailable-in-region-text, .s-sold-out .dd-unavailable-in-region-text { display: block; }
.s-region-locked .dd-image-box-figure img, .s-sold-out .dd-image-box-figure img { opacity: 0.3; }
.s-region-locked .dd-image-box-caption, .s-sold-out .dd-image-box-caption { text-decoration: line-through; }

.wide-game-image img.dd-image-box-figure-img { max-width: 308px; max-height: 177px; }
.wide-game-image .dd-image-box-text { line-height: normal; letter-spacing: normal; }
.wide-game-image .dd-image-box-caption { max-width: 308px; }

.steam-none { color: #929396; }

.steam-positive { color: #66c0f4; }

.steam-mixed { color: #b9a074; }

.steam-negative { color: #a34d25; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.dd-gradient-icons { position: absolute; bottom: 0; left: 0; color: #d5d9e1; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding: 5px 5px 0; box-sizing: border-box; text-shadow: black 0px 0px 2px; }

.dd-availability-icon-list, .dd-delivery-icon-list { position: absolute; bottom: 0; margin: 10px; }

.dd-availability-icon-list { left: 0; }

.dd-delivery-icon-list { right: 0; }

.dd-availability-icon { display: inline-table; margin: 1px 4px; position: relative; }

.dd-availability-icon-image { font-size: 19px; }
.dd-availability-icon-image.has-popup { cursor: help; }
.dd-availability-icon-image.hb-psthree, .dd-availability-icon-image.hb-psfour, .dd-availability-icon-image.hb-psvita { font-size: 16px; }

.dd-availability-continues { margin-left: -3px; font-weight: bold; display: inline-table; }

.rating { display: inline-block; width: 32px; height: 32px; margin-right: 5px; background-size: cover; vertical-align: middle; }

.rating.bbfc { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/633dd818d130dad5c999fd78b60d5209e45825e1.png"); }

.rating.bbfc.bbfc-u { background-position: -32px; }

.rating.bbfc.bbfc-12a { background-position: -64px; }

.rating.bbfc.bbfc-12 { background-position: -96px; }

.rating.bbfc.bbfc-15 { background-position: -128px; }

.rating.bbfc.bbfc-18 { background-position: -160px; }

.rating.bbfc.bbfc-r18 { background-position: -193px; }

.rating.cero { width: 26px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/7745217f293cb86bf37d1d91e9842450e6196f1d.png"); }

.rating.cero.cero-b { background-position: -26px; }

.rating.cero.cero-c { background-position: -51px; }

.rating.cero.cero-d { background-position: -77px; }

.rating.cero.cero-z { background-position: -102px; }

.rating.djctq { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a4972eb1ad5d672811c38df259d5df86b67b0376.png"); }

.rating.djctq.djctq-er { background-position: -32px; }

.rating.djctq.djctq-10 { background-position: -64px; }

.rating.djctq.djctq-12 { background-position: -96px; }

.rating.djctq.djctq-14 { background-position: -128px; }

.rating.djctq.djctq-16 { background-position: -160px; }

.rating.djctq.djctq-18 { background-position: -192px; }

.rating.esrb, .rating.pegi { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/61b488b704ac86ab2b7d15a43cb883632459301e.png"); }

.rating.esrb { width: 40px; height: 54px; }

.rating.esrb.esrb-e { background-position: -44px; }

.rating.esrb.esrb-e10 { background-position: -88px; }

.rating.esrb.esrb-t { background-position: -132px; }

.rating.esrb.esrb-m { background-position: -176px; }

.rating.esrb.esrb-a { background-position: -220px; }

.rating.esrb.esrb-rp { background-position: -264px; }

.rating.grb { width: 28px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/2177b52b6dac1a615d587ba6b1e41c347e41e05f.png"); }

.rating.grb.grb-12 { background-position: -28px; }

.rating.grb.grb-15 { background-position: -56px; }

.rating.grb.grb-18 { background-position: -84px; }

.rating.grb.grb-test { background-position: -110px; }

.rating.mda { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a5aa27a6fdeb68e07b049ca46f22a42998d5081f.png"); }

.rating.mda.mda-pg { background-position: -32px; }

.rating.mda.mda-pg13 { background-position: -64px; }

.rating.mda.mda-nc16 { background-position: -96px; }

.rating.mda.mda-m18 { background-position: -128px; }

.rating.oflc-au { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/f96f1a64b8140ef28eb38be8d4051c723c2845cd.png"); width: 64px; height: 64px; }

.rating.oflc-au.oflc-au-g { background-position: -64px; }

.rating.oflc-au.oflc-au-pg { background-position: -128px; }

.rating.oflc-au.oflc-au-m { background-position: -192px; }

.rating.oflc-au.oflc-au-ma15 { background-position: -256px; }

.rating.oflc-au.oflc-au-r18 { background-position: -320px; }

.rating.oflc-au.oflc-au-x18 { background-position: -384px; }

.rating.oflc-nz { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a0f3cdc96e331a832f18bb023be0681cd1894553.png"); width: 64px; height: 64px; }

.rating.oflc-nz.oflc-nz-pg { background-position: -64px; }

.rating.oflc-nz.oflc-nz-m { background-position: -128px; }

.rating.oflc-nz.oflc-nz-r { background-position: -192px; }

.rating.oflc-nz.oflc-nz-r13 { background-position: -256px; }

.rating.oflc-nz.oflc-nz-rp13 { background-position: -320px; }

.rating.oflc-nz.oflc-nz-r15 { background-position: -384px; }

.rating.oflc-nz.oflc-nz-r16 { background-position: -448px; }

.rating.oflc-nz.oflc-nz-r18 { background-position: -512px; }

.rating.pegi { width: 44px; height: 54px; }

.rating.pegi.pegi-3 { background-position: -308px; }

.rating.pegi.pegi-7 { background-position: -352px; }

.rating.pegi.pegi-12 { background-position: -396px; }

.rating.pegi.pegi-16 { background-position: -440px; }

.rating.pegi.pegi-18 { background-position: -484px; }

.rating.rar { width: 56px; height: 62px; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/2117099bdaeef2d4f2be92e39b1d3cc25ae3c1a5.png"); }

.rating.rar.rar-6 { background-position: -56px; }

.rating.rar.rar-12 { background-position: -112px; }

.rating.rar.rar-16 { background-position: -168px; }

.rating.rar.rar-18 { background-position: -224px; }

.rating.usk { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/27c2a51e3a3b2ce9787289dc368f7d17e8a3aec6.png"); width: 64px; height: 64px; }

.rating.usk.usk-6 { background-position: -64px; }

.rating.usk.usk-12 { background-position: -128px; }

.rating.usk.usk-16 { background-position: -192px; }

.rating.usk.usk-18 { background-position: -256px; }

.dd-game-row { position: relative; }

.slideout-content-dev-anchor { text-decoration: none; border-bottom: 1px solid #ef9841; }

.slideout-content-dev-name { color: #ef9841; font-size: 14px; }

.slideout-content-developer-separator { color: white; }

.slideout-availability-icons { display: flex; flex-wrap: wrap; }

.slideout-availability-icon-container { display: flex; flex-flow: row nowrap; margin-bottom: 10px; margin-right: 10px; }

.slideout-availability-icon-wrapper { height: 38px; padding: 0 11px; background-color: #51565f; color: #e4e7ed; line-height: 38px; font-size: 20px; border-radius: 3px; border: 1px solid #a1a6b2; box-sizing: border-box; }
.slideout-availability-icon-wrapper.has-delivery-icons { border-radius: 3px 0 0 3px; border-right: none; }

.slideout-platforms { height: 38px; line-height: 38px; color: white; font-size: 16px; padding: 0 2px; border: 1px solid #a1a6b2; border-radius: 0 3px 3px 0; box-sizing: border-box; }
.slideout-platforms .tooltip-top:after { color: black; width: auto; white-space: nowrap; }

.slideout-platform { margin: 0 4px; }

.slideout-rating { display: flex; margin-bottom: 10px; }
.slideout-rating .rating-icon { width: 15%; }
.slideout-rating ul.rating-details { display: inline-block; list-style-type: none; padding: 0; margin: auto; vertical-align: middle; width: 85%; }
.slideout-rating ul.rating-details li { float: left; font-weight: bold; margin-left: 5px; max-width: 120px; width: 100%; }

.hover-black-overlay { background-color: #282c34; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; transition: visibility 0.1s ease-in-out; visibility: hidden; width: 100%; }

.hover-icon-holder { cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.hover-icon { color: white; font-size: 64px; opacity: 1; text-align: center; width: 100%; vertical-align: middle; visibility: hidden; transition: visibility 0.1s ease-in-out; }

.hoverable:hover .hover-black-overlay, .hoverable:hover .hover-icon { visibility: visible; }

.soundtracks-hidden { display: none; }

.soundtrack-listing-container { display: flex; flex-direction: row; flex-wrap: wrap; }

.track { display: flex; justify-content: space-between; padding: 1px 5px; width: calc(50% - 10px); }
.track .track-title { overflow: hidden; padding-right: 5px; text-overflow: ellipsis; white-space: nowrap; }
.track .track-title .track-play { cursor: pointer; padding-right: 2px; }
.track .track-title .track-play.hb-pause { color: #ef9841; }
.track .track-title .track-number { cursor: pointer; }
.track .track-length { align-self: center; color: #a1a7b2; margin-right: 15px; }

.jp-audio .jp-gui { background: #3b3e48; color: white; margin-left: auto; margin-right: auto; width: 240px; height: 20px; padding: 10px; }
.jp-audio .jp-play { color: white; font-size: 20px; display: inline-block; width: 20px; height: 20px; }
.jp-audio .jp-play.loading:before { content: url("//humblebundle-a.akamaihd.net/static/hashed/6f42c642858f68c80b4557c0a87c47e108ed8a97.gif"); }
.jp-audio .jp-details { display: inline-block; line-height: 10px; }
.jp-audio .jp-title { margin-left: 5px; width: 178px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-audio .jp-progress { display: inline-block; height: 3px; width: 178px; margin: 0 5px; vertical-align: middle; }
.jp-audio .jp-seek-bar { height: 100%; width: 100%; border: 1px solid #a1a7b2; border-radius: 10px; }
.jp-audio .jp-play-bar { height: 100%; background: #97b147; position: relative; left: -1px; }
.jp-audio .jp-play-dot { display: inline-block; position: relative; left: -3px; top: -7px; font-size: 10px; }
.jp-audio .jp-remaining { display: inline-block; width: 30px; margin-left: 2px; vertical-align: bottom; }
.jp-audio .jp-no-solution { color: white; display: none; }

/** Set the width and height properties to the same aspect-ratio as Steam's images
*/
/** Outputs the correct vertical dimension to maintain the same aspect-ratio as Steam's images, regardless of width. Arguments: - height-modifier (optional): A <length> value to adjust the vertical dimension if needed
*/
.slideout-holder { border-top: 1px solid rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.5); height: 100%; background-color: #282c34; display: none; margin-top: 30px; }
.slideout-holder a { color: #ef9841; }

.slideout-up-arrow { display: none; position: relative; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid rgba(0, 0, 0, 0.5); top: 0px; left: 0px; }
.slideout-up-arrow.animate { transition: left 0.25s ease-in-out; }
.slideout-up-arrow .slideout-inner-triangle { position: relative; top: 1px; left: -30px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #282c34; }

.desktop-slideout-container { position: relative; width: 100vw; }
.desktop-slideout-container .navigation-content, .desktop-slideout-container .close-slideout { background-color: #282c34; cursor: pointer; padding: 10px; position: absolute; transition: background-color 0.2s ease-in-out; }
.desktop-slideout-container .navigation-content:hover, .desktop-slideout-container .close-slideout:hover { background-color: rgba(255, 255, 255, 0.1); }
.desktop-slideout-container .navigation-content { bottom: 30px; color: #eeeeee; font-size: 48px; top: 30px; }
.desktop-slideout-container .navigation-content.left { left: 10px; }
.desktop-slideout-container .navigation-content.right { right: 10px; }
.desktop-slideout-container .navigation-content .center { bottom: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.desktop-slideout-container .close-slideout { border-radius: 50%; color: rgba(255, 255, 255, 0.3); font-size: 24px; top: 10px; text-align: center; width: 32px; right: 35px; }
.desktop-slideout-container .desktop-slideout-content-container { max-width: 1150px; margin: auto; height: 100%; overflow: hidden; width: 100%; }
.desktop-slideout-container .media-load-spinner { font-size: 75px; color: #3b3e48; position: absolute; text-align: center; width: 100%; }
.desktop-slideout-container .desktop-slideout-media { align-items: center; max-height: 350px; align-self: center; display: flex; flex-direction: column; max-width: 600px; position: relative; width: 65%; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-media { width: 100%; margin-bottom: 20px; } }
.desktop-slideout-container .desktop-slideout-media .slideout-image { margin: 0 auto; flex-shrink: 0; height: auto; max-width: 100%; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon { color: white; position: absolute; top: calc(50% - 95px); left: calc(50% - 95px); width: 190px; height: 70px; padding-top: 120px; text-align: center; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon-generic { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/fcaf5d01bf5ddc15b4493daf63965e28492ad93b.png"); }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-icon-pdf { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/d3b0ea5548d542d3a8dc68def4ccd70fdc7eddf6.png"); }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-text { display: block; font-size: 12px; font-weight: bold; margin: 0; padding: 0; }
.desktop-slideout-container .desktop-slideout-media .preview-overlay .preview-size { font-size: 10px; }
.desktop-slideout-container .desktop-slideout-body { color: white; display: flex; flex-direction: column; margin-left: 3%; max-height: 350px; position: relative; }
.desktop-slideout-container .desktop-slideout-body.text-slideout { width: 35%; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-body.text-slideout { width: 100%; max-width: 600px; margin: auto; } }
.desktop-slideout-container .desktop-slideout-body.full-width { width: 100%; }
.desktop-slideout-container .desktop-slideout-content { display: flex; align-items: flex-start; justify-content: center; margin: auto; padding: 10px 55px 30px 55px; }
@media screen and (max-width: 1000px) { .desktop-slideout-container .desktop-slideout-content { flex-wrap: wrap; flex-flow: column; align-items: center; } }
.desktop-slideout-container .desktop-slideout-content-heading { margin: 0; margin-bottom: 5px; }
.desktop-slideout-container .desktop-slideout-content-developers { margin: 0; margin-bottom: 10px; }
.desktop-slideout-container .desktop-slideout-text { flex-shrink: 10; overflow: auto; padding-bottom: 10px; scrollbar-base-color: #282c34; scrollbar-arrow-color: #3b3e48; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar { width: 10px; height: 10px; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar-thumb { background: #3b3e48; visibility: hidden; }
.desktop-slideout-container .desktop-slideout-text:hover::-webkit-scrollbar-thumb { visibility: visible; }
.desktop-slideout-container .desktop-slideout-text::-webkit-scrollbar-track { background: #282c34; }
.desktop-slideout-container .desktop-slideout-text.fade:after { content: ' '; background-image: linear-gradient(to bottom, transparent 0%, #282c34 100%); bottom: -5px; display: block; height: 50px; left: 0; position: absolute; width: calc(100% - 13.5px); /* Decreasing width to exclude the scrollbar from being affected by the gradient */ }

/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.dd-game-row { padding: 75px 0 0; }

/* image_box extras */
.dd-image-box-list { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 60px; }

.dd-image-box { width: 180px; margin: 13px 10px 0; }

.dd-image-box.desktop .dd-image-box-badge .badge-info { background-color: #97b147; border: none; border-radius: 500px; font-size: 12px; left: 3px; line-height: 10px; opacity: 0; overflow: hidden; padding: 9px; padding-left: 27px; position: absolute; text-align: right; top: 0px; transition: opacity ease-in-out 0.3s; width: auto; white-space: nowrap; z-index: -1; }
.dd-image-box.desktop .dd-image-box-badge:hover .badge-info { opacity: 1; }
.dd-image-box.desktop .dd-image-box-badge.earlyaccess .badge-info { background-color: #4a91e2; }
.dd-image-box.desktop .dd-image-box-badge.dlc .dd-image-box-badge-text .hb-gamepad { font-size: 16px; }
.dd-image-box.desktop .dd-image-box-badge.dlc .badge-info { background-color: #dd99ff; }
.dd-image-box.desktop .dd-image-box-badge.special_edition .badge-info { background-color: #ef9841; }

.dd-image-box.wide-game-image { width: 308px; }
.dd-image-box.wide-game-image .dd-gradient-icons { height: 40px; }

/* availability_icon_list */
.dd-gradient-icons { height: 85px; background: none; /* For browsers that do not support gradients */ background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%); }

.dd-availability-icon:hover .dd-availability-icon-popup { opacity: 1; visibility: visible; }

.admin-quicklinks { list-style: none; z-index: 150; position: fixed; bottom: 75px; right: 10px; height: 45px; width: 47px; margin: 0; padding: 5px; border: 2px solid #dc3f31; border-radius: 5px; background: white; font-size: 12px; text-align: right; box-sizing: content-box; transition: height 200ms ease-out, width 200ms ease-out, padding 200ms ease-out; }
.admin-quicklinks .hb-bundle { position: fixed; color: #cb272c; right: 16px; font-size: 45px; }
.admin-quicklinks:hover { height: auto; width: auto; padding: 10px; }
.admin-quicklinks:hover .hb-bundle { display: none; }
.admin-quicklinks:hover .menu-item { display: block; width: auto; }
.admin-quicklinks .menu-item { display: none; width: 0; padding: 5px 0; }
.admin-quicklinks .quicklink { color: black; text-decoration: none; }

.admin-tiny-link { position: relative; overflow: visible; font-size: 12px; z-index: 100; text-decoration: none; }
.admin-tiny-link i { position: absolute; left: -10px; top: -10px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); transform: scale(1); transform-origin: center; transition: text-shadow .3s ease, transform .3s ease; }
.admin-tiny-link i:hover { text-shadow: 0 3px 5px rgba(0, 0, 0, 0.4); transform: scale(2); }
.admin-tiny-link.disabled { display: none; }

@media (min-width: 70em) { .admin-quicklinks { bottom: 10px; } }
.rounded-container { border-radius: 8px; }

.page-section { padding: 0 2rem; margin: 0 0 5em; }

.section-block { border-radius: 8px; max-width: 88.75em; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 1.875em 1.25em; background-image: radial-gradient(circle at 50% 0, #768095, #575c69); box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); }
.section-block a { color: inherit; }
.section-block .dot-arrow-nav .page-dot { color: #4c505d; }
.section-block .shadow-flexbox { display: flex; justify-content: space-between; margin-bottom: 2em; flex-direction: column; }
@media (min-width: 56em) { .section-block .shadow-flexbox { flex-direction: row; margin-bottom: 3em; } }
.section-block .shadow-flexbox .shadow-block { flex-basis: calc(100%/3 - 1.75em); margin-bottom: 2em; -ms-flex: 0 0 auto; }
.section-block .shadow-flexbox .shadow-block:last-child { margin-bottom: 0; }
@media (min-width: 56em) { .section-block .shadow-flexbox .shadow-block { font-size: 1.15em; margin-bottom: 0; -ms-flex: 0 0 25%; } }
.section-block .shadow-block { border-radius: 6px; padding: 1.75em; box-sizing: border-box; background-image: linear-gradient(to bottom, #515865, #484c57); text-align: center; color: #d3d8e3; }
.section-block .shadow-block .emphasis { display: block; font-size: 6em; font-weight: lighter; color: white; margin-bottom: 0.1em; }
.section-block .shadow-block .emphasis sup { font-size: .4em; position: relative; top: -1em; }
.section-block .shadow-block .emphasis .cancel-card-img { width: 0.8em; position: relative; top: 0.1em; }
.section-block .shadow-block .description { display: block; font-weight: bold; text-transform: uppercase; margin-bottom: 0.5em; }
@media (min-width: 56em) { .section-block .shadow-block { padding: 2em; } }
.section-block .footer-link { font-size: 0.93em; text-align: center; display: block; text-transform: uppercase; font-weight: bold; color: #d3d8e3; }
@media (min-width: 56em) { .section-block .footer-link { font-size: 1.125em; } }

.section-header { color: white; font-size: 1.75em; line-height: 1.2; text-align: center; text-transform: uppercase; margin: 0 0 0.5em; text-shadow: rgba(0, 0, 0, 0.21) 0 4px 0; }
@media (min-width: 48em) { .section-header { font-size: 2.125em; } }

.section-description { color: #d3d8e3; text-align: center; font-size: 1.125em; margin: 0 auto 3em; text-shadow: rgba(0, 0, 0, 0.2) 0 2px 0; }
@media (min-width: 90em) { .section-description { width: 75%; max-width: 53em; font-size: 1.15em; } }

.timer-section .hero-countdown-timer { margin-bottom: 1.25em; }
.timer-section .footnote { width: 80%; margin: 0 auto; font-size: .75em; text-transform: uppercase; font-weight: bold; text-align: left; line-height: 1.125; }
@media (min-width: 48em) { .timer-section { display: flex; flex-wrap: nowrap; align-items: center; }
  .timer-section .hero-countdown-timer { flex-shrink: 0; margin-right: 0.5em; margin-bottom: 0; font-size: 0.8em; }
  .timer-section .footnote { width: auto; margin: 0; flex-basis: 50%; text-align: left; } }

.slick-slider .slick-arrow { opacity: 1; transition: opacity 0.2s; }
.slick-slider .slick-arrow.disabled, .slick-slider .slick-arrow.slick-disabled { pointer-events: none; cursor: default; }
.slick-slider .slick-arrow.slick-disabled { opacity: 0; }
.slick-slider .arrow-button { cursor: pointer; position: absolute; color: #8a909e; font-size: 2em; padding: 0.7em 0.8em; border-radius: 14px; background: linear-gradient(to bottom, #494e5a, #3e4451); box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2); }
.slick-slider .arrow-button:hover { color: white; text-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4); background: linear-gradient(to bottom, #40444f, #323843); }
.slick-slider .arrow-button:active { background: #4e535f; color: #3c4049; }
.slick-slider .arrow-button.slick-prev, .slick-slider .arrow-button.slick-next { top: calc(50% - 2.7em); }
.slick-slider .arrow-button.slick-prev { left: -0.2em; }
.slick-slider .arrow-button.slick-next { right: -0.2em; }

.dot-arrow-nav { padding: 0; }
.dot-arrow-nav .slick-dots li { line-height: 1; }
.dot-arrow-nav .slick-dots li.slick-active { display: inline-block; }
.dot-arrow-nav .slick-dots li.slick-active .page-dot { color: white; }
.dot-arrow-nav .page-dot { transition: transform 0.5s ease; font-size: 3em; opacity: 1; color: #5c6270; font-style: normal; }

@media screen and (min-width: 48em) { .section-block:not(.subscribe-box) { padding: 2.5em; }
  .dot-arrow-nav .page-dot { font-size: 4em; } }
@media screen and (min-width: 64em) { .slick-slider .arrow-button { font-size: 2.1em; } }
.trove-hero { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/1b52057e0b411d25ce7392a89781e0b6c8463d5f.jpg"), url("//humblebundle-a.akamaihd.net/static/hashed/1b52057e0b411d25ce7392a89781e0b6c8463d5f.jpg"); background-position: left top, right bottom; background-repeat: no-repeat; background-size: auto 50%, auto 50%; display: flex; align-items: center; margin-bottom: 6.25em; }
.trove-hero * { text-align: left; }
.trove-hero .content-container { width: 100%; max-width: 88.75em; margin: 0 auto; color: white; min-height: 26em; }
.trove-hero .wrap-with-underlay { position: relative; width: calc(100% + 4rem); height: 100%; left: -2rem; }
.trove-hero .wrap-with-underlay:before { position: absolute; content: ''; display: block; width: 100%; height: calc(100% + 4rem); filter: blur(2rem); background-color: rgba(64, 68, 86, 0.8); left: -2rem; top: -2rem; bottom: -2rem; right: -2rem; }
.trove-hero .content-wrap { position: relative; padding: 3rem 2rem; }
.trove-hero .section-description { margin: 0 0 1.5em; color: white; width: 100%; }
.trove-hero .trove-button { font-size: 1.25em; padding: 1.3em; width: 66%; max-width: 13.3em; text-align: center; margin-bottom: 1.5em; }

@media screen and (min-width: 48em) { .trove-hero { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/1b52057e0b411d25ce7392a89781e0b6c8463d5f.jpg"); background-size: cover; background-position: top center; } }
@media screen and (min-width: 64em) { .trove-hero .wrap-with-underlay { width: 65%; max-width: 41em; } }
/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.subscribe-box-promo-wrapper { font-size: 16px; }

.monthly-terms { margin: 2.5em; font-size: 0.86em; text-align: center; color: white; }

.plan-selector-header { margin: 0 1em; }
.plan-selector-header .section-header { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.21); font-size: 2.13em; font-weight: 900; color: #ededed; display: flex; justify-content: center; margin: 0; }
.plan-selector-header .section-description { margin-top: 0.88em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); text-align: center; color: #d3d8e3; }
.plan-selector-header .section-description .current-plan { font-weight: bold; color: white; }

.subscribe-box { color: white; text-align: center; text-transform: uppercase; font-weight: bold; z-index: 1; max-width: 30.5em; }
@media (min-width: 48em) { .subscribe-box { font-size: 0.8em; } }
@media (max-width: 77.99em) { .subscribe-box .mobile-promotion-info { background-color: #596072; font-size: 1em; text-transform: none; font-weight: normal; margin-top: 0.5em; padding: 0.5em; border-radius: 6px; } }
@media (min-width: 78em) { .subscribe-box .mobile-promotion-info { display: none; } }
@media (max-width: 1024px) { .subscribe-box .mobile-promotion-info { padding: 0.5em; } }
.subscribe-box.subscribe-box-promotion .slick-slider .arrow-button { padding: 0.35em 0.4em; }
@media (min-width: 22.51em) { .subscribe-box.subscribe-box-promotion .slick-slider .arrow-button.slick-prev { left: -2em; } }
@media (min-width: 22.51em) { .subscribe-box.subscribe-box-promotion .slick-slider .arrow-button.slick-next { right: -2em; } }
@media (min-width: 22.51em) { .subscribe-box.subscribe-box-promotion .slick-slider .arrow-button { padding: 0.7em 0.8em; } }
.subscribe-box .checkout-button-view { margin: 1.5em 0; }
@media (max-width: 1024px) { .subscribe-box .checkout-button-view { margin: 0.75em; } }
.subscribe-box .mobile-close { display: none; }
.subscribe-box .plan-selector-view { width: 100%; }
.subscribe-box .plan-selector-view legend { padding: 0; display: table; }
.subscribe-box .plan-selector-view fieldset { border: 0; padding: 0.01em 0 0 0; margin: 0; min-width: 0; }
.subscribe-box .plan-selector-view body:not(:-moz-handler-blocked) fieldset { display: table-cell; }
.subscribe-box .gift-selectors input[type=radio], .subscribe-box .plan-selectors input[type=radio] { width: 0; height: 0; margin: 0; padding: 0; opacity: 0; position: fixed; }
.subscribe-box .gift-selectors label, .subscribe-box .plan-selectors label { display: flex; justify-content: center; align-items: center; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: pointer; }
.subscribe-box .plan-selectors { margin: 0 0 1.7em; }
.subscribe-box .plan-selectors .slick-list:before, .subscribe-box .plan-selectors .slick-list:after { content: ''; display: block; width: 2em; height: 100%; position: absolute; top: 0; z-index: 1; }
.subscribe-box .plan-selectors .slick-list:before { left: 0; background-image: linear-gradient(to right, #717a8d, rgba(112, 121, 141, 0)); }
.subscribe-box .plan-selectors .slick-list:after { right: 0; background-image: linear-gradient(to left, #717a8d, rgba(112, 121, 141, 0)); }
.subscribe-box .plan-selectors .promo-details-label { background-color: #72ba6a; border-radius: 2px; font-size: 0.5em; margin-bottom: 8px; padding: 4px 8px; }
.subscribe-box .gift-selector, .subscribe-box .plan-selector { display: flex; flex: 1; }
.subscribe-box .gift-selector label, .subscribe-box .plan-selector label { font-size: 1.125em; color: #292b32; }
.subscribe-box .gift-selector label { width: 100%; color: #292b32; padding: 1.875em; color: #9ea6bc; background: linear-gradient(to bottom, #69707f, #575c69); }
.subscribe-box .gift-selector input[type=radio] { display: none; }
.subscribe-box .gift-selector input[type=radio]:checked + label { background: transparent; color: white; }
.subscribe-box .plan-selector { flex-direction: column; margin: 0 0.3em; }
.subscribe-box .plan-selector:focus { outline: none; }
.subscribe-box .plan-selector label { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15); text-shadow: none; padding: 0.9em 0; background-color: #95a0bb; border: 2px solid #95a0bb; margin-bottom: 0.5em; }
.subscribe-box .plan-selector label:hover { background-color: #a5aec5; border-color: #a5aec5; }
.subscribe-box .plan-selector.selected label { background-color: #353740; border-color: #353740; color: #ededed; }
.subscribe-box .plan-selector.selected label:hover { background-color: #41434e; border-color: #41434e; }
.subscribe-box .plan-selector.selected .plan-special-text { color: white; }
.subscribe-box .plan-selector.disabled label { color: white; border-color: #ef9841; background-color: #b6722d; pointer-events: none; }
.subscribe-box .plan-selector.disabled .plan-special-text { color: #ef9841; }
.subscribe-box .plan-selector .plan-special-text { color: #292b32; }
.subscribe-box .plan-detail { background-color: rgba(0, 0, 0, 0.2); border-radius: 6px; }
.subscribe-box .plan-detail-background { background: center no-repeat; background-size: auto 85%; padding-top: 80%; border-radius: 6px; }
.subscribe-box .plan-details { position: relative; }
.subscribe-box .plan-detail[data-machine-name=monthly_annual] .plan-detail-background { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/a18d57ae93d272bd2c2c12f7d02c4c3b01fbb069.svg"); }
.subscribe-box .plan-detail[data-machine-name=monthly_six_month] .plan-detail-background { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/702c06d7e840cb6a72b5d2dc366df48253d16ecd.svg"); }
.subscribe-box .plan-detail[data-machine-name=monthly_three_month] .plan-detail-background { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/82c7b550d306499e18c97cf2520884fdadb332f9.svg"); }
.subscribe-box .plan-detail[data-machine-name=monthly_basic] .plan-detail-background { background-image: url("//humblebundle-a.akamaihd.net/static/hashed/5057701a6fe9522d79fcf78a3b77f36d373f7576.svg"); background-position-x: 42%; }
.subscribe-box .plan-details-slider:not(.slick-initialized) .plan-detail .plan-detail-background { background-image: none; }
.subscribe-box .subscribe-link { font-size: 1.25em; padding: 1.7em; width: 100%; box-sizing: border-box; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); }
@media (max-width: 1024px) { .subscribe-box .subscribe-link { padding: 0.7em; } }
.subscribe-box .subscribe-link.disabled { opacity: 0.5; pointer-events: none; }
.subscribe-box .gift-toggle { margin: 1em 0 0.5em; }
.subscribe-box .gift-toggle input[type=checkbox] { display: inline-block; vertical-align: middle; margin-right: 0.3em; }
.subscribe-box .gift-selectors { display: flex; flex-wrap: nowrap; margin: -1.875em -1.25em 1.875em; border-radius: 8px 8px 0 0; overflow: hidden; }
.subscribe-box .subscribe-box-disclaimer { font-size: 1.2em; text-transform: initial; font-weight: normal; }
@media (max-width: 1024px) { .subscribe-box .subscribe-box-disclaimer { font-size: 0.75em; } }
.subscribe-box .plan-special-text { display: flex; justify-content: center; align-items: center; font-size: 0.875em; height: 1em; }
.subscribe-box .plan-price { font-size: 1.25em; margin-bottom: .3em; }
@media (max-width: 1024px) { .subscribe-box .plan-price { font-size: 0.8em; } }
.subscribe-box .plan-price .price-point { font-size: 1.5em; }
@media (max-width: 1024px) { .subscribe-box .plan-price .price-point { font-size: 1em; } }
.subscribe-box .plan-total-price { font-size: 1.25em; }
@media (max-width: 1024px) { .subscribe-box .plan-total-price { font-size: 0.85em; } }
.subscribe-box .plan-name { display: none; }
.subscribe-box .dot-arrow-nav { margin-bottom: 1em; padding-top: 0; }
.subscribe-box .slick-slider .arrow-button { z-index: 1; }
.subscribe-box .slick-slider .arrow-button.slick-prev { left: -1.5em; }
.subscribe-box .slick-slider .arrow-button.slick-next { right: -1.5em; }
@media (max-width: 1024px) { .subscribe-box .gift-selector { display: none; }
  .subscribe-box .gift-toggle { display: block; } }

.subscribe-box-promo-wrapper { display: flex; justify-content: center; position: relative; width: 100%; }
.subscribe-box-promo-wrapper img { max-width: 100%; }
@media (max-width: 77.99em) { .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper { display: none; } }
@media (min-width: 78em) { .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper { display: flex; flex-direction: column; justify-content: center; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info { width: 35.625em; position: relative; left: -0.5em; padding: 2.5em 5.5em 0 5em; border-radius: 8px; background-image: linear-gradient(to bottom, #515865, #484c57); box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); flex-grow: 0; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info.no-content-event { width: 27.625em; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info.no-content-event .promo-image img { border-radius: 8px; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image img { display: block; border-radius: 8px 0 0 8px; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-expander, .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-shrinker { margin-bottom: 2em; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-disclaimer-expanded { font-size: 0.75em; margin: 1em 0; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-expander, .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-shrinker { margin-top: 0.2em; font-size: 0.75em; text-decoration: underline; cursor: pointer; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .legal-disclaimer { font-size: 0.75em; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-heading { margin: 0; padding: 0; font-size: 2em; text-transform: uppercase; font-weight: 900; font-stretch: normal; line-height: normal; letter-spacing: normal; color: white; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.21); }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-description { margin-block-start: 0; margin-block-end: 0; font-size: 1.25em; margin: .75em 0 1em 0; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper { display: flex; justify-content: center; margin-bottom: 1em; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox { border-radius: 0 8px 8px 0; background-color: #393e47; width: 13.125em; display: flex; align-content: space-between; flex-direction: column; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-indicator { min-width: 12.14em; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.active .promo-checkbox-indicator .promo-checkbox-active { display: block; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.active .promo-checkbox-indicator .promo-checkbox-inactive { display: none; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.active .promo-checkbox-status { display: none; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.ineligible .promo-checkbox-status { pointer-events: none; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.ineligible .promo-checkbox-active { display: none; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox.ineligible .promo-checkbox-inactive { display: block; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-top { padding: 0.5625em 0; font-size: 1.125em; color: #d5d9e4; font-weight: bold; background-color: #2a2d33; text-transform: uppercase; text-align: center; border-radius: 0 8px 0 0; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-indicator { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-indicator .promo-checkbox-active { display: none; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-status { background-color: #2a2d33; font-size: 1.125em; font-weight: bold; margin: 0 1em 1em 1em; padding: 0.5625em; border-radius: 4px; text-transform: uppercase; text-align: center; color: #b8b8b8; cursor: pointer; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .promo-image-checkbox-wrapper .promo-checkbox .promo-checkbox-status:hover { color: white; }
  .subscribe-box-promo-wrapper .subscribe-box-promo-info-wrapper .subscribe-box-promo-info .timer { text-align: center; margin-bottom: 1em; } }

@supports (zoom: 1.5) { .gift-toggle input[type=checkbox] { zoom: 1.5; } }
@supports not (zoom: 1.5) { .gift-toggle input[type=checkbox] { transform: scale(1.5); } }
@media screen and (min-width: 48em) { .subscribe-box .plan-selectors { display: flex; flex-wrap: nowrap; margin: 0 -0.3em 1.7em; }
  .subscribe-box .subscribe-link { font-size: 1.5em; } }
.new-plan-selector-modal .humblemodal-modal { background-color: transparent; padding: 0; overflow: inherit; color: white; width: initial; }
.new-plan-selector-modal .close { color: white; background-color: #484e5b; padding: 0.2em 0.5em; border-radius: 6px; border: 3px solid rgba(160, 166, 177, 0.5); text-transform: uppercase; font-weight: bold; cursor: pointer; max-width: 4.5em; margin: 0 auto; margin-top: 0.5em; }

#how-it-works .monthly-info { max-width: 88.75em; width: 100%; margin: 0 auto; }
#how-it-works .flexbox { margin: 0 -1em; }
#how-it-works .flexbox .column { margin: 1em 1em 3em; font-size: 1.15em; line-height: 1.35; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); }
#how-it-works .column { background-image: radial-gradient(circle at 50% 0, #768095, #575c69); }
#how-it-works .column p { color: #d3d8e3; }
#how-it-works .column p strong { color: white; }
#how-it-works .column .imagery { overflow: hidden; }
#how-it-works .column .imagery img { display: block; width: 100%; }
#how-it-works .explanation { margin: 0; padding: 2em; }
#how-it-works .flexbox.originals .column { display: flex; flex-direction: column; }
#how-it-works .flexbox.originals .column .imagery { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0.5em; }
#how-it-works .flexbox.originals .column .imagery .original-img { border-radius: 5px; overflow: hidden; margin: 0.5em; width: calc(50% - 1em); box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.2); }
#how-it-works .flexbox.originals .column .explanation { padding: 1em; }
#how-it-works .flexbox.originals .column .explanation h3 { display: flex; flex-direction: column; align-items: center; line-height: 1.35; font-size: 1.5em; margin: 0 0 .5em; text-align: center; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.21) 0 4px 0; }
#how-it-works .flexbox.originals .column .explanation h3 img { margin-bottom: 0.5em; }
#how-it-works .flexbox.originals .column .explanation p { margin-bottom: 0; }

@media screen and (min-width: 48em) { #how-it-works .flexbox.originals .column { padding: 1em; }
  #how-it-works .flexbox.originals .column .imagery .original-img { width: calc(25% - 1em); }
  #how-it-works .flexbox.originals .column .explanation { padding: 2em; }
  #how-it-works .flexbox.originals .column .explanation h3 { flex-direction: row; justify-content: center; text-align: left; font-size: 2em; }
  #how-it-works .flexbox.originals .column .explanation h3 img { margin-bottom: 0; margin-right: 0.5em; } }
@media screen and (min-width: 64em) { #how-it-works .flexbox { display: flex; }
  #how-it-works .flexbox .column { flex: 1 1 calc(100/3 * 100%); margin: 1em; } }
@media screen and (min-width: 64em) and (-ms-high-contrast: active), screen and (min-width: 64em) and (-ms-high-contrast: none) { #how-it-works .flexbox .column { flex-grow: 1; flex-shrink: 1; flex-basis: calc(100/3 * 100%); } }

@media screen and (min-width: 90em) { #how-it-works .monthly-info .flexbox .column { font-size: 1em; }
  #how-it-works .flexbox.originals .column { padding: 0; flex-direction: row; align-items: center; }
  #how-it-works .flexbox.originals .column .imagery { flex-basis: 50%; flex-shrink: 0; order: 1; }
  #how-it-works .flexbox.originals .column .explanation { flex-direction: row; flex-basis: 50%; order: 2; }
  #how-it-works .flexbox.originals .column .explanation h3 { justify-content: flex-start; } }
#subscribe { display: flex; align-items: center; flex-direction: column; position: relative; }
#subscribe .subscribe-box-container { display: flex; flex-direction: column; width: 100%; align-items: center; position: relative; }

#press { position: relative; }
#press .press-quote { color: #d3d8e3; font-size: 1.375em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); text-align: center; }
#press .press-quote-author { color: inherit; display: block; }
#press .press-quote-author img { display: inline-block; max-width: 140px; }
#press .press-quotes-slider:not(.slick-initialized) .press-quote:not(:first-child) { display: none; }
#press .arrow-button { font-size: 1.9em; top: calc(50% - 1.3em); }
#press .arrow-button.slick-next { right: 0; }
#press .arrow-button.slick-prev { left: 0; }
#press .slick-track { display: flex; align-items: center; }

@media screen and (min-width: 48em) { #press .slick-list { width: 75%; max-width: 50em; margin: 0 auto; } }
@media screen and (min-width: 64.01em) { #press .press-quote { font-size: 1.75em; } }
@media only screen and (min-width: 30.0625em) { #special-offer .special-offer-banner { background-image: linear-gradient(to right, #cd91f5, #22b3fc); height: .5em; margin: 0 auto; max-width: 88.75em; } }
#special-offer .special-offer-banner .pin { align-items: center; display: flex; justify-content: center; }
@media only screen and (max-width: 30em) { #special-offer .special-offer-banner .pin { background-image: linear-gradient(to right, #cd91f5, #22b3fc); border-top-left-radius: 4px; border-top-right-radius: 4px; height: 2.1875em; width: 100%; } }
@media only screen and (min-width: 30.0625em) { #special-offer .special-offer-banner .pin { background-color: #c193f5; height: 2.9375em; left: 0; position: relative; top: 0; width: 9.5625em; } }
#special-offer .special-offer-banner .pin span { color: white; font-weight: bold; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); text-transform: uppercase; }
#special-offer .section-block { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 3em; }
@media only screen and (min-width: 30.0625em) and (max-width: 47.9375em) { #special-offer .section-block { padding-bottom: 2.75em; padding-left: 2.75em; padding-right: 2.75em; } }
@media only screen and (min-width: 48.0625em) and (max-width: 89.9375em) { #special-offer .section-block { padding-bottom: 3em; padding-left: 10vw; padding-right: 10vw; } }
@media only screen and (min-width: 90em) { #special-offer .section-block { padding-bottom: 3em; padding-left: 3em; padding-right: 3em; } }
#special-offer .section-block .section-header { padding-bottom: 1em; }
#special-offer .section-block .special-offer-container { background-image: linear-gradient(to bottom, #515865, #484c57); display: flex; border-radius: 8px; }
@media only screen and (max-width: 64em) { #special-offer .section-block .special-offer-container { flex-direction: column; } }
#special-offer .section-block .special-offer-container div.image { flex: 1; border-radius: 8px; }
#special-offer .section-block .special-offer-container div.image img { width: 100%; height: 100%; object-fit: cover; }
#special-offer .section-block .special-offer-container div.text { flex: 1; padding: 3em; }
#special-offer .section-block .special-offer-container div.text h2 { color: white; font-weight: 900; margin: 0; padding-bottom: 1.25em; text-align: left; text-rendering: optimizeLegibility; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.21); text-transform: uppercase; }
@media only screen and (max-width: 27.25em) { #special-offer .section-block .special-offer-container div.text h2 { font-size: 1.125em; } }
@media only screen and (min-width: 27.3125em) and (max-width: 47.9375em) { #special-offer .section-block .special-offer-container div.text h2 { font-size: 1.875em; } }
@media only screen and (min-width: 48.0625em) and (max-width: 89.9375em) { #special-offer .section-block .special-offer-container div.text h2 { font-size: 1.625em; } }
@media only screen and (min-width: 90em) { #special-offer .section-block .special-offer-container div.text h2 { font-size: 1.875em; } }
#special-offer .section-block .special-offer-container div.text p { color: #d5d9e4; line-height: 1.38; margin: 0; text-rendering: optimizeLegibility; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 27.25em) { #special-offer .section-block .special-offer-container div.text p { font-size: .875em; } }
@media only screen and (min-width: 27.3125em) and (max-width: 47.9375em) { #special-offer .section-block .special-offer-container div.text p { font-size: 1.25em; } }
@media only screen and (min-width: 90em) { #special-offer .section-block .special-offer-container div.text p { font-size: 1.25em; } }
#special-offer .section-block .special-offer-container div.text p .tooltip-bottom:after { color: black; text-shadow: none; width: 26em; }
@media only screen and (max-width: 30em) { #special-offer .section-block .special-offer-container div.text p .tooltip-bottom:after { width: 16em; } }

#newsletter { text-align: center; }
#newsletter form { font-size: 1.25em; }
#newsletter button { flex: 1; border-radius: 6px; }
#newsletter input { background-color: rgba(161, 167, 178, 0.5); border-radius: 6px; border: hidden; padding: .6em; flex: 3.5; margin-right: 0.25em; }
#newsletter input::placeholder { color: rgba(0, 0, 0, 0.9); opacity: 1; }
#newsletter input:focus { outline: none; }
#newsletter .input-container { width: 100%; display: inline-flex; flex-direction: row; justify-content: center; }

@media screen and (min-width: 48em) { #newsletter .input-container { width: 80%; max-width: 34em; }
  #newsletter input { margin-right: 1em; } }
#early-reveal-details .early-reveal-wrapper, #early-reveal-details .repeat-unlock-wrapper, #repeat-early-unlocks .early-reveal-wrapper, #repeat-early-unlocks .repeat-unlock-wrapper { display: flex; justify-content: center; align-items: center; padding: 0.75em; flex-direction: column; }
#early-reveal-details .art-section, #repeat-early-unlocks .art-section { display: flex; justify-content: center; margin-bottom: 0.8em; width: 100%; }
#early-reveal-details .art-section .art-wrapper, #repeat-early-unlocks .art-section .art-wrapper { display: block; margin: 0.75em; }
#early-reveal-details .art-section .art-wrapper .box-art, #repeat-early-unlocks .art-section .art-wrapper .box-art { display: block; width: 100%; max-width: 30em; border-radius: 6px; }
#early-reveal-details .info-section, #repeat-early-unlocks .info-section { padding-bottom: 0.5em; }
#early-reveal-details .info-section .info-heading, #repeat-early-unlocks .info-section .info-heading { text-align: center; line-height: 1; margin: 0 0 0.3em; font-size: 2.5em; text-transform: uppercase; }

.repeat-early-unlock-showcase { color: white; font-size: 14px; background: linear-gradient(to bottom, #2a2e38, #35363e); }
.repeat-early-unlock-showcase#repeat-early-unlocks .art-section { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 auto; width: 80%; max-width: none; }
.repeat-early-unlock-showcase#repeat-early-unlocks .art-section .early-unlocks-container { background: linear-gradient(to bottom, #768095, #575c69); border-radius: 8px; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2); }
.repeat-early-unlock-showcase#repeat-early-unlocks .art-section .early-unlocks-container .early-unlock-header-text { background: linear-gradient(to right, #555868, #464d5c); border-radius: 8px 8px 0 0; font-weight: bold; padding: 0.5em; }
.repeat-early-unlock-showcase#repeat-early-unlocks .art-section .early-unlocks-container .early-unlocks-art { display: flex; padding: 1em; justify-content: center; }
.repeat-early-unlock-showcase#repeat-early-unlocks .info-heading { margin: 0; padding: 0.7em; text-align: center; font-size: 3em; font-weight: bold; }
.repeat-early-unlock-showcase#repeat-early-unlocks .info-section { padding: 1.75em; }
.repeat-early-unlock-showcase#repeat-early-unlocks .info-section p { text-align: center; font-size: 1.3em; }

@media (min-width: 64em) { #early-reveal-details .early-reveal-wrapper { width: 80%; margin: 0 auto; }
  #early-reveal-details .art-section { justify-content: flex-end; width: 75%; max-width: 60em; }
  #early-reveal-details .info-heading { text-align: left; font-size: 3.5em; }
  #repeat-early-unlocks .repeat-unlock-wrapper { width: 80%; margin: 0 auto; }
  #repeat-early-unlocks .art-section { text-align: center; width: 75%; max-width: 60em; }
  #repeat-early-unlocks .info-heading { text-align: center; font-size: 3.5em; margin: 0.4em auto; } }
/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.display-modal-modal, .display-modal { position: fixed; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-y: auto; }

.display-modal-modal .close-modal, .close-button { color: white; position: absolute; top: 0.5em; right: 0.5em; font-size: 1.5em; padding: 1.25em; }
.display-modal-modal .close-modal:hover, .close-button:hover { color: grey; cursor: pointer; }

.display-modal-modal .content, .display-modal-inside { margin: auto; padding: 3em; max-width: 100%; max-height: 100vh; box-sizing: border-box; }
.display-modal-modal .content iframe, .display-modal-inside iframe { margin: 0 auto; display: block; }

.display-modal-wrapper, .display-modal-overlay { font-size: 16px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(40, 44, 52, 0.98); z-index: 9999; }

.display-modal { font-size: 16px; z-index: 10000; }

.image-container .content, .video-container .content { text-align: center; }
.image-container .close-modal, .video-container .close-modal { display: flex; align-items: center; justify-content: center; color: white; width: 1em; height: 1em; font-size: 2em; padding: 3px; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; border-radius: 1em; padding: 0.3em; position: absolute; top: 1em; right: 1em; }

.image-container .modal-image { background-repeat: no-repeat; background-size: contain; background-position: center; height: 95vmin; width: 95vmin; margin: auto; }

.video-container iframe { margin: 0 auto; max-width: 720px; max-height: 405px; width: 95vmin; height: calc(9/16 * 95vmin); }

body { background-color: #17283b; font-size: inherit; }

img.blur-on-large-screens { filter: blur(5px); }

.humble-monthly { max-width: 1920px; margin: 0 auto; background-color: #3f4552; color: white; font-family: 'Sofia Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-bottom: 30px; display: flex; display: -ms-flexbox; flex-direction: column; -ms-flex-direction: column; -webkit-text-size-adjust: 80%; -ms-text-size-adjust: 80%; text-size-adjust: 80%; }
.humble-monthly .highlight-container { font-weight: bold; font-size: 20px; color: white; }
.humble-monthly .highlight-container.hero-highlight { font-size: inherit; }
.humble-monthly .highlight-container i.hb-steam { opacity: 1; }
.humble-monthly .highlight-container .highlight { display: inline-block; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.65); text-transform: uppercase; white-space: nowrap; }
.humble-monthly .highlight-container .highlight:before { font-family: 'hb-icons'; margin: auto 0.75em; position: relative; top: -0.5em; opacity: 0.5; font-size: 0.5em; }
.humble-monthly .highlight-container .highlight:not(:first-child):before { content: '\f05f'; }
.humble-monthly .info-tooltip:after { font-size: 14px; color: black; white-space: pre-wrap; text-shadow: none; background-color: white; }
.humble-monthly .info-tooltip.tooltip-left:before, .humble-monthly .info-tooltip.tooltip-right:before { top: calc(50% - 0.5em); }
.humble-monthly .info-tooltip.tooltip-right:before { border-right-color: white; }
.humble-monthly .info-tooltip.tooltip-left:before { border-left-color: white; }
.humble-monthly .info-tooltip.tooltip-top:before { border-top-color: white; }
.humble-monthly .info-tooltip.tooltip-bottom:before { border-bottom-color: white; }
.humble-monthly .text-badge { background-color: rgba(0, 0, 0, 0.25); border: 2px solid rgba(141, 141, 141, 0.6); border-radius: 0.3em; display: inline-block; font-weight: bold; margin: 20px; padding: 0.5em 0.75em; text-rendering: optimizeLegibility; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.65); text-transform: uppercase; white-space: nowrap; }

.legal-text-container { width: 100%; background: #757b86; color: white; margin-bottom: -30px; }

.footer-legal-text { padding: .75em; max-width: 88.75em; width: calc(100vw - 4.5em); margin: auto; font-style: italic; }
.footer-legal-text a { color: white; }
.footer-legal-text a:hover { color: white; }
.footer-legal-text a:visited { color: white; }

.timeout-modal .humblemodal-modal { width: 30em; }

@media screen and (min-width: 48em) { .humble-monthly { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } }
@media screen and (min-width: 90em) { .humble-monthly { font-size: inherit; } }