/** 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. */
.sk-circle { margin: 6px auto; width: 30px; height: 30px; position: relative; }

.sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #a1a7b2; border-radius: 100%; -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }

.sk-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }

.sk-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }

.sk-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

.sk-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); }

.sk-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); }

.sk-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.sk-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); }

.sk-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); }

.sk-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }

.sk-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); }

.sk-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }

.sk-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }

.sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }

.sk-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.sk-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

.sk-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }

.sk-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }

.sk-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }

.sk-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }

.sk-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }

.sk-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }

.sk-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1); transform: scale(1); } }
/** 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
*/
.green-button { background-image: linear-gradient(to bottom, #e1ffc2 0%, #b1e37f 100%); border: 1px solid #a7c28c; border-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 white; color: #42661e; cursor: pointer; display: inline-block; font-weight: bold; margin: 0 0 0 5px; min-width: 50px; padding: 5px 8px 5px 8px; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.green-button:hover:not(disabled) { background: #b1e37f; }
.green-button:disabled, .green-button.disabled { cursor: default; opacity: 0.4; }

.gray-button { background-image: linear-gradient(to bottom, whitesmoke 0%, #dedede 100%); border: 1px solid #bbbbbb; border-radius: 4px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 white; color: #444444; cursor: pointer; display: inline-block; font-weight: bold; margin: 0 0 0 5px; min-width: 50px; padding: 5px 8px 5px 8px; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.6); }

a:hover .gray-button { background: #e4e4e4; }

.button-link { cursor: pointer; text-decoration: none; }
.button-link:disabled, .button-link.disabled { pointer-events: none; }

input[type="number"].classy-input, input[type="password"].classy-input, input[type="tel"].classy-input, input[type="text"].classy-input { border: 1px solid #cccccc; box-shadow: inset 0 1px 0 #eeeeee, white 0 1px 0; margin: 0; padding: 7px; border-radius: 3px; background-color: white; color: #999999; }

.classy-input[disabled='disabled'] { background: #cccccc; color: #333333; }

.info-tooltip > i { font-size: .8em; opacity: 0.7; transition: all 0.1s linear; }
.info-tooltip:hover > i, .info-tooltip:focus > i { opacity: 1; }

.disabled.gray-button { background: #e4e4e4; cursor: default; }

.generic-popup { font-size: 16px; }

.generic-popup a { color: #535353; }

.generic-popup.outer-shadow { box-shadow: 0 -1px 25px rgba(0, 0, 0, 0.3); left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; position: absolute; z-index: 9999; border-radius: 7px; display: none; }

.generic-popup.content { border-radius: 7px; color: #999999; padding: 20px; background: whitesmoke; width: 360px; position: relative; text-align: center; }
.generic-popup.content .description { padding: 4px 0 25px 0; }

.generic-popup .no-center { max-width: 360px; text-align: right; position: relative; }

.generic-popup.content h1 { font-size: 24px; text-shadow: 0 0 1px #eeeeee; color: #666666; margin-bottom: 5px; }

.generic-popup.content h1.noimg { margin-right: 0; line-height: 32px; }

.generic-popup.content h1 img { position: relative; top: 5px; margin-right: 15px; }

.generic-popup.content h1 span { display: inline-block; height: 25px; width: 25px; margin-right: 15px; position: relative; top: 5px; }

.generic-popup.content h2 { font-size: 14px; font-weight: 300; text-shadow: 0 0 1px #eeeeee; margin: 20px 0 0 0; color: #666666; }

.generic-popup.content .split-left { color: #666666; display: inline-block; text-align: left; width: 180px; }

.generic-popup.content .split-right { color: #666666; display: inline-block; text-align: right; width: 180px; }

.generic-popup input[type='text'], .generic-popup input[type='password'], .generic-popup input[type='email'] { background: none; border: 1px solid #cccccc; border-top: 1px solid #999999; border-radius: 3px; box-shadow: 0 1px 2px #bbbbbb inset; padding: 9px; font-size: 16px; color: #333333; display: block; width: 342px; margin: 0; }
.generic-popup input[type='text'].inline-input, .generic-popup input[type='password'].inline-input, .generic-popup input[type='email'].inline-input { width: 150px; display: inline; }

@-moz-document url-prefix() { .generic-popup input[type='text'], .generic-popup input[type='password'], .generic-popup input[type='email'] { padding-top: 7px; } }
.generic-popup form p { text-align: left; position: relative; }

.account-infield { color: #999999; font-size: 16px; font-weight: normal; position: absolute; top: 8px; left: 10px; }

.account-input { position: relative; }
.account-input.always-caps { text-transform: uppercase; }

.generic-popup .suggest-holder { color: #cc6666; display: block; font-size: 90%; margin-top: -28px; position: absolute; right: 0; width: 284px; }

.generic-popup .suggest-holder a { color: #cc6666; }

.small-link, .link-holder { font-size: 12px; font-weight: normal; line-height: 20px; }

.generic-popup .small-link { margin: .3em; text-decoration: underline; }

.link-holder { text-align: left; position: absolute; left: 2px; top: -2px; height: 20px; width: 200px; }

.link-holder a, .generic-popup .small-link { color: #888888; }

.link-holder a { text-decoration: none; }

.generic-popup .clearfix { clear: both; }

.generic-popup .center { float: none; left: 0; }

.generic-popup.content h2.subtitle { padding-bottom: 12px; text-align: center; margin-top: 0px; }

.generic-popup .button-holder { margin-top: 20px; }

.subtitle.warning { font-weight: bold; }

.generic-popup .error-holder { color: #333333; font-size: 14px; padding: 0 4px; position: absolute; left: -280px; text-align: right; display: none; }

.error-holder .errorlist { margin: 0; padding: 0 0 0 30px; }

.arrow-holder { position: absolute; left: -525px; top: 0; width: 500px; height: 42px; }

.arrow-error { float: right; padding: 12px 0 16px 16px; background: url("//humblebundle-a.akamaihd.net/static/hashed/2d10ad27ca2af9ebcc54fd4322657696e5e50dec.png") no-repeat; margin-right: -5px; margin-top: -2px; font-size: 14px; color: white; font-weight: bold; text-align: right; display: none; position: absolute; right: 0; }

.arrow-error-right { background: url("//humblebundle-a.akamaihd.net/static/hashed/d00e64d9e0b5a925c42404a41014b85aecb2f0ea.png") no-repeat; width: 26px; height: 45px; position: absolute; right: -26px; top: 0; }

.arrow-error a { color: white; }

#email-errors { top: 155px; }

.generic-popup .errorlist .error-item { color: #cc6666; text-decoration: none; }

.generic-popup .message-holder { margin-bottom: 20px; line-height: 22px; font-weight: normal; }

.generic-popup p { margin: 0 0 20px 0; padding: 0; }

.header-text { text-transform: uppercase; font-weight: bold; font-size: 15px; }

.account-switch { background: #dddddd; border-top: 1px solid #cccccc; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; margin: 20px -20px -22px; font-weight: normal; font-size: 14px; color: #333333; }

.account-switch .account-creation { color: #333333; display: block; padding: 12px; text-decoration: none; }
.account-switch .account-creation:hover { cursor: pointer; }

.button-holder-msg { top: 0px; font-size: 12px; margin-top: 10px; margin-bottom: -10px; color: red; }
.button-holder-msg .arrow-error-right { display: none; }

.account-switch .account-creation .create-inner { font-weight: bold; text-decoration: underline; }

.grayout, .generic-bbm-wrapper { background: url("//humblebundle-a.akamaihd.net/static/hashed/cb322c1cdfcdae03f826d02c39b7d998800d15c6.png"); }

.grayout { position: fixed; top: 0; left: 0; z-index: 9999; right: 0; bottom: 0; background: rgba(40, 44, 52, 0.85); display: none; }

.grayout-inner { position: relative; width: 100%; height: 100%; }

.slide-down { display: none; }

.above-text-label { display: block; text-align: left; margin-bottom: 8px; }

/* Modal positioning */
.generic-bbm-wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.5); overflow-x: auto; overflow-y: auto; }

.generic-bbm-modal { position: relative; top: calc(50% - 250px); left: calc(50% - 200px); width: 276px; }

.generic-bbm-modal.eula-modal { top: calc(50% - 360px); left: calc(50% - 300px); width: 600px; }
.generic-bbm-modal.eula-modal .generic-popup.content { width: 100%; height: 100%; }
.generic-bbm-modal.eula-modal .generic-popup.content .message-holder { max-height: 500px; text-align: left; white-space: pre-line; overflow-x: hidden; overflow-y: scroll; }
.generic-bbm-modal.eula-modal .generic-popup.content .noimg { font-size: 22px; margin: 0.25em 0; }

.generic-bbm-views { width: 100%; }

/* Modal theme */
.generic-bbm-wrapper { -webkit-transition: background-color 0.3s; }

.generic-bbm-modal { border-radius: 3px; box-shadow: 0 -1px 25px rgba(0, 0, 0, 0.3); box-sizing: initial; }

/* Animations */
/* Open modal */
@keyframes generic-bbm-open { 0% { transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813); opacity: 0.1259; }
  4% { transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809); opacity: 0.29544; }
  8% { transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922); opacity: 0.46703; }
  12% { transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355); opacity: 0.61908; }
  16% { transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991); opacity: 0.74284; }
  20% { transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067); opacity: 0.83724; }
  24% { transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658); opacity: 0.90523; }
  28% { transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049); opacity: 0.9515; }
  32% { transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675); opacity: 0.98107; }
  36% { transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966); opacity: 0.99852; }
  40% { transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361); opacity: 1.00766; }
  44% { transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08); opacity: 1.01143; }
  48% { transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394); opacity: 1.01199; }
  52% { transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589); opacity: 1.01084; }
  56% { transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265); opacity: 1.00895; }
  60% { transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833); opacity: 1.0069; }
  64% { transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518); opacity: 1.00503; }
  68% { transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421); opacity: 1.00346; }
  72% { transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567); opacity: 1.00224; }
  76% { transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941); opacity: 1.00134; }
  80% { transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506); opacity: 1.00072; }
  84% { transform: matrix(1, 0, 0, 1, 0, 50.00223); opacity: 1.00032; }
  88% { transform: matrix(1, 0, 0, 1, 0, 50.0005); opacity: 1.00007; }
  92% { transform: matrix(1, 0, 0, 1, 0, 49.99956); opacity: 0.99994; }
  96% { transform: matrix(1, 0, 0, 1, 0, 49.99913); opacity: 0.99988; }
  100% { transform: matrix(1, 0, 0, 1, 0, 50); opacity: 1; } }
.generic-bbm-modal--open { animation-duration: 0.3s; animation-name: generic-bbm-open; animation-timing-function: linear; animation-fill-mode: both; transform-origin: 50% 50%; backface-visibility: hidden; }

/* Open a stacked modal */
@-webkit-keyframes generic-bbm-stacked { 0% { -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187); opacity: 0.93705; }
  4% { -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192); opacity: 0.85228; }
  8% { -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078); opacity: 0.76648; }
  12% { -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645); opacity: 0.69046; }
  16% { -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009); opacity: 0.62858; }
  20% { -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933); opacity: 0.58138; }
  24% { -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342); opacity: 0.54739; }
  28% { -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951); opacity: 0.52425; }
  32% { -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325); opacity: 0.50946; }
  36% { -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034); opacity: 0.50074; }
  40% { -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639); opacity: 0.49617; }
  44% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001); opacity: 0.49429; }
  48% { -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606); opacity: 0.494; }
  52% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411); opacity: 0.49458; }
  56% { -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736); opacity: 0.49553; }
  60% { -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167); opacity: 0.49655; }
  64% { -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482); opacity: 0.49749; }
  68% { -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579); opacity: 0.49827; }
  72% { -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433); opacity: 0.49888; }
  76% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059); opacity: 0.49933; }
  80% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494); opacity: 0.49964; }
  84% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777); opacity: 0.49984; }
  88% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995); opacity: 0.49996; }
  92% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044); opacity: 0.50003; }
  96% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088); opacity: 0.50006; }
  100% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43); opacity: 0.5; } }
.generic-bbm-modal--stacked { -webkit-animation-duration: 0.43333s; -webkit-animation-name: generic-bbm-stacked; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; }

/* Close a stacked modal */
@-webkit-keyframes generic-bbm-stacked-reverse { 0% { -webkit-transform: matrix(0.99123, 0, 0, 0.99123, 0, 43.86266); opacity: 0.56162; }
  4% { -webkit-transform: matrix(0.99293, 0, 0, 0.99293, 0, 45.05306); opacity: 0.64665; }
  8% { -webkit-transform: matrix(0.99465, 0, 0, 0.99465, 0, 46.25785); opacity: 0.7327; }
  12% { -webkit-transform: matrix(0.99618, 0, 0, 0.99618, 0, 47.32543); opacity: 0.80896; }
  16% { -webkit-transform: matrix(0.99742, 0, 0, 0.99742, 0, 48.19443); opacity: 0.87103; }
  20% { -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.8572); opacity: 0.91837; }
  24% { -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33456); opacity: 0.95247; }
  28% { -webkit-transform: matrix(0.99951, 0, 0, 0.99951, 0, 49.65946); opacity: 0.97568; }
  32% { -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8671); opacity: 0.99051; }
  36% { -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98963); opacity: 0.99926; }
  40% { -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05377); opacity: 1.00384; }
  44% { -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08024); opacity: 1.00573; }
  48% { -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08419); opacity: 1.00601; }
  52% { -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07612); opacity: 1.00544; }
  56% { -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06284); opacity: 1.00449; }
  60% { -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04848); opacity: 1.00346; }
  64% { -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03529); opacity: 1.00252; }
  68% { -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02428); opacity: 1.00173; }
  72% { -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01572); opacity: 1.00112; }
  76% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00944); opacity: 1.00067; }
  80% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00508); opacity: 1.00036; }
  84% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223); opacity: 1.00016; }
  88% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005); opacity: 1.00004; }
  92% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956); opacity: 0.99997; }
  96% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99912); opacity: 0.99994; }
  100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50); opacity: 1; } }
.generic-bbm-modal--stacked-reverse { -webkit-animation-duration: 0.43333s; -webkit-animation-name: generic-bbm-stacked-reverse; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; }

/* Close a modal */
@-webkit-keyframes generic-bbm-close { 0% { -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187); opacity: 0.8741; }
  4% { -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192); opacity: 0.70456; }
  8% { -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078); opacity: 0.53297; }
  12% { -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645); opacity: 0.38092; }
  16% { -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009); opacity: 0.25716; }
  20% { -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933); opacity: 0.16276; }
  24% { -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342); opacity: 0.09477; }
  28% { -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951); opacity: 0.0485; }
  32% { -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325); opacity: 0.01893; }
  36% { -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034); opacity: 0.00148; }
  40% { -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639); opacity: -0.00766; }
  44% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001); opacity: -0.01143; }
  48% { -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606); opacity: -0.01199; }
  52% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411); opacity: -0.01084; }
  56% { -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736); opacity: -0.00895; }
  60% { -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167); opacity: -0.0069; }
  64% { -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482); opacity: -0.00503; }
  68% { -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579); opacity: -0.00346; }
  72% { -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433); opacity: -0.00224; }
  76% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059); opacity: -0.00134; }
  80% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494); opacity: -0.00072; }
  84% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777); opacity: -0.00032; }
  88% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995); opacity: -7e -5; }
  92% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044); opacity: 6.0e-05; }
  96% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088); opacity: 0.00012; }
  100% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43); opacity: 0; } }
.generic-bbm-modal--close { -webkit-animation-duration: 0.43333s; -webkit-animation-name: generic-bbm-close; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .generic-bbm-modal--open, .generic-bbm-modal--stacked, .generic-bbm-modal--stacked-reverse, .generic-bbm-modal--destroy { -webkit-animation: none !important; } }
.inline-view { display: inline; }

/* Account Modal */
.humblemodal-wrapper.account-modal .humblemodal-modal { width: 100%; height: 80vh; max-width: 375px; max-height: 675px; overflow-y: auto; overflow-x: hidden; background-image: url("//humblebundle-a.akamaihd.net/static/hashed/68472f40232b1a949f998b169972fe01072d5cb4.jpg"); background-position: center top; transition: opacity .2s ease-in; opacity: 0; padding: 0; }
.humblemodal-wrapper.account-modal .humblemodal-modal.humblemodal-modal--open { opacity: 1; }
.humblemodal-wrapper.account-modal .account-modal-outer { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; background: linear-gradient(rgba(40, 44, 52, 0.4), #282c34); }
.humblemodal-wrapper.account-modal .account-modal-outer .close-modal { font-size: 40px; padding: 0 15px; color: white; }
.humblemodal-wrapper.account-modal .account-modal-outer .full-logo { max-width: 70%; padding: 20px; margin: auto; }
.humblemodal-wrapper.account-modal .account-modal-inner { display: flex; flex-direction: column; }
.humblemodal-wrapper.account-modal .account-confirmation h1 { text-transform: uppercase; font-weight: bold; }
.humblemodal-wrapper.account-modal .account-confirmation .account-success { padding: 0 30px; line-height: 2; }
.humblemodal-wrapper.account-modal .account-confirmation .account-success a { text-decoration: none; font-weight: bold; color: white; }

.account-view { font-size: 14px; padding: 40px; box-sizing: border-box; color: white; }
.account-view .account-back-arrow { position: absolute; left: 0; top: calc(50% - 40px); cursor: pointer; font-size: 30px; padding: 20px 20px 20px 10px; }
.account-view .account-input { height: 50px; line-height: 50px; font-size: 16px; border: none; border-radius: 3px; padding: 0 10px; background: rgba(161, 167, 178, 0.3); }
.account-view .suggestion-popup { position: absolute; background: #97b147; width: 100%; bottom: 43px; padding: 10px 40px; box-sizing: border-box; display: none; }
.account-view .suggestion-popup .email-suggestion:hover { cursor: pointer; }
.account-view .account-label { padding: 5px 10px; text-align: left; }
.account-view .account-label .password-min { font-size: 0.8em; }
.account-view .checkbox { font-size: 13px; }
.account-view .account-information { padding: 15px 10px; }
.account-view .account-information h1 { text-transform: uppercase; font-weight: bold; }
.account-view .account-information a, .account-view .account-information span { text-decoration: none; color: #a1a7b2; }
.account-view .account-information a:hover, .account-view .account-information span:hover { color: white; cursor: pointer; }
.account-view .account-fine-print { font-size: 11px; color: white; }
.account-view .account-fine-print a { font-weight: bold; color: white; }
.account-view .account-fine-print a:hover { color: #a1a7b2; }
.account-view .account-cta { text-transform: uppercase; font-weight: bold; font-size: 15px; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); width: 100%; }
.account-view .account-cta:disabled { border: 3px #a1a7b2 solid; border-radius: 6px; color: #a1a7b2; background: transparent; font-size: 15px; line-height: 40px; /* balance out the 6px of border radius */ height: 46px; }
.account-view .account-support { padding: 5px 10px 15px; }
.account-view .account-support-split { display: flex; justify-content: space-between; }
.account-view .account-input-group { display: flex; flex-direction: column; position: relative; }
.account-view .account-input-group .error-triangle { color: #ff7c7a; position: absolute; right: 10px; bottom: 14px; font-size: 14px; display: none; }
.account-view .account-input-group .error-triangle:hover { cursor: pointer; }
.account-view .error-box { background: #ff7c7a; height: 0; position: absolute; margin: 0 -40px; bottom: 0; width: 100%; overflow-y: hidden; display: flex; justify-content: center; align-items: center; transition: height .3s ease-in-out; text-transform: uppercase; font-weight: bold; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); padding: 0 60px; box-sizing: border-box; font-size: 16px; }
.account-view .error-box.slide-up { height: 90px; }
.account-view .error-box .close-message { position: absolute; top: 5px; right: 8px; font-size: 22px; }
.account-view .error-box .close-message:hover { cursor: pointer; }