/* ------------------------------------------------------------------------- . . M= . ..M... . . ..M..M7. 7M .M.$M.. ..M=.M.MZ .. NM~M?M. . ..,MMMM8... ...MMMM .. ... MMMM . . .8MMMMM.. .MMMMMM~ MMMMMMMM . ?MMMM$MMMZ .MMMMM.MMMM. DMMMM$.MMMMM . ..MMMMM: NMMMM ... . DMMNM7. =MZMMM, . . :MMM~M....MIMMMM.. . .MMM7DM. MM=MMM7 . IMMM8MZ.. ?MZMMMM . .OMMM:OM. MN MMMN. ... .MMMD OM. MM.$MMM, . MMMM. M8 7M .?MMM . . +MMMMO.M~ .M~7MMMM$ . ..MMMM DMM. .MMNI,MMM 8MMM, .MM. OM DMMN . ..MMM .. M=. .,M, ..MMM~ MMMMMZ IM . MO .NMMMM . .+MMM.=NMMM . .. 8MMM7.MMM$. ... MMM: ..MI. . ~MM . .MMMD . DMMN. . +M.. . .MM. .8MMM, . . ,MMMMM,..MM . MMMMMM. MM=..NMMMMM.. ..DMMN:MM$.MO. . . IM$?MM=OMMM: MMMM. ..NMM: ... .NMM,. .MMMM. . =MMM$ . .$M . :MMMMMM7 . =M. . +MMMI .. MMMMM,...=MN MMMMMMMM:. MI.. .MMMMM .. . ZMMM,~MMI.DM=..ZMMMMMMMMM. MM.=MM?.NMMN . . . ..MMMN ...MMMM. .MMMMMMMMMM . ?MMM,... MMM:. . . . .... ..MMMO... ,MM .MMMMMMMMMM . M+ .. .IMMM. . . ?NDDDDDDDDDDDDMMMM... .OM? ,MMMMMMMMMM=. .MM . ..?MMNDNNDDDDDDDDDD . .MMM= =MM?..M8 7MMMMMMMMMMO. .IM .~MMM,:MMM. .. . . OMMM. ..MM8M:. MMMMMMMMMMMM .M8MM,. ..DMMN, . . . ..MMM~ ..... DM. . MMMMMMMMMMMM . MM.... .,MMMM . ..MMMMMZ, . MN .MMMMMMMMMMMM~. ZM . ?MMMMMD . ..8MMMMM=..M=. IMMMMMMMMMMMMO. ,M, :8MMMMN... . ..IMMMMMNM ...MMMMMMMMMMMMMM=. .MNMMMMMZ. .. .. . .OMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM~. .. . =MMMMMMMMMMMMMMMMMMMMMMMMMMI .. . . . . . . * Author: Instrument * www.weareinstrument.com * * Digital Craft * Made In Portland, Oregon * */ /* normalize.css v1.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* Prevents modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, and Safari 4. Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using `em` units. 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* Addresses `font-family` inconsistency between `textarea` and other form elements. */ html, button, input, select, textarea { font-family: sans-serif; } /* Addresses margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* Addresses font sizes and margins set differently in IE 6/7. Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } /* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /* Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* Addresses styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /* Addresses margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: "courier new", monospace; font-size: 1em; } /* Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* Addresses CSS quotes not supported in IE 6/7. */ q { quotes: none; } /* Addresses `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /* Addresses inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* Addresses margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /* Addresses paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* Corrects list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. 2. Improves image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /* Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* Corrects margin displayed oddly in IE 6/7. */ form { margin: 0; } /* Define consistent border, margin, and padding. */ fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* 1. Corrects color not being inherited in IE 6/7/8/9. 2. Corrects text not wrapping in Firefox 3. 3. Corrects alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /* 1. Corrects font size not being inherited in all browsers. 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, and Chrome. 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ button, input { line-height: normal; } /* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Corrects inability to style clickable `input` types in iOS. 3. Improves usability and consistency of cursor style between image-type `input` and others. 4. Removes inner spacing in IE 7 without affecting normal text inputs. Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /* Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* 1. Addresses box sizing set to content-box in IE 8/9. 2. Removes excess padding in IE 8/9. 3. Removes excess padding in IE 7. Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* Removes inner padding and search cancel button in Safari 5 and Chrome on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* 1. Removes default vertical scrollbar in IE 6/7/8/9. 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* The general purpose retina sprite mixin. @include retina-sprite(name, $spritemap1, $spritemap2) @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0]) If `dimensions` is true, then width/height will also be set. if `pad` is non-zero, then that's how much padding the element will have (requires $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger. */ /* Create a reference to the sprites. */ /**/ /**/ /* Save the URLs. Otherwise, two maps will be created per sprite. */ .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00000, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00000 { background-position: 0 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00001, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00001 { background-position: 0 -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00002, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00002 { background-position: 0 -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00003, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00003 { background-position: 0 -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00004, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00004 { background-position: 0 -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00005, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00005 { background-position: 0 -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00006, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00006 { background-position: 0 -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00007, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00007 { background-position: 0 -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00008, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00008 { background-position: 0 -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00009, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00009 { background-position: 0 -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00010, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00010 { background-position: 0 -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00011, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00011 { background-position: 0 -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00012, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00012 { background-position: -572px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00013, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00013 { background-position: -572px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00014, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00014 { background-position: -572px -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00015, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00015 { background-position: -572px -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00016, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00016 { background-position: -572px -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00017, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00017 { background-position: -572px -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00018, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00018 { background-position: -572px -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00019, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00019 { background-position: -572px -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00020, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00020 { background-position: -572px -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00021, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00021 { background-position: -572px -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00022, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00022 { background-position: -572px -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00023, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00023 { background-position: -572px -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00024, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00024 { background-position: -1144px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00025, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00025 { background-position: -1144px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00026, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00026 { background-position: -1144px -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00027, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00027 { background-position: -1144px -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00028, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00028 { background-position: -1144px -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00029, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00029 { background-position: -1144px -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00030, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00030 { background-position: -1144px -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00031, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00031 { background-position: -1144px -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00032, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00032 { background-position: -1144px -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00033, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00033 { background-position: -1144px -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00034, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00034 { background-position: -1144px -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00035, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00035 { background-position: -1144px -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00036, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00036 { background-position: -1716px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00037, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00037 { background-position: -1716px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00038, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00038 { background-position: -1716px -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00039, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00039 { background-position: -1716px -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00040, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00040 { background-position: -1716px -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00041, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00041 { background-position: -1716px -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00042, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00042 { background-position: -1716px -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00043, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00043 { background-position: -1716px -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00044, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00044 { background-position: -1716px -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00045, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00045 { background-position: -1716px -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00046, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00046 { background-position: -1716px -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00047, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00047 { background-position: -1716px -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00048, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00048 { background-position: -2288px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00049, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00049 { background-position: -2288px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00050, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00050 { background-position: -2288px -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00051, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00051 { background-position: -2288px -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00052, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00052 { background-position: -2288px -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00053, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00053 { background-position: -2288px -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00054, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00054 { background-position: -2288px -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00055, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00055 { background-position: -2288px -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00056, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00056 { background-position: -2288px -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00057, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00057 { background-position: -2288px -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00058, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00058 { background-position: -2288px -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00059, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00059 { background-position: -2288px -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00060, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00060 { background-position: -2860px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00061, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00061 { background-position: -2860px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00062, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00062 { background-position: -2860px -334px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00063, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00063 { background-position: -2860px -501px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00064, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00064 { background-position: -2860px -668px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00065, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00065 { background-position: -2860px -835px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00066, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00066 { background-position: -2860px -1002px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00067, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00067 { background-position: -2860px -1169px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00068, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00068 { background-position: -2860px -1336px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00069, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00069 { background-position: -2860px -1503px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00070, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00070 { background-position: -2860px -1670px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00071, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00071 { background-position: -2860px -1837px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00072, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00072 { background-position: -3432px 0; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00073, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00073 { background-position: -3432px -167px; width: 522px; height: 117px; } .page-holder.video .buffer-scrim .buffer .buffer-animation.bike_loader_00074, .page-holder.choose .buffer-scrim .buffer .buffer-animation.bike_loader_00074 { background-position: -3432px -334px; width: 522px; height: 117px; } /* -------------------------------- */ /* Universal Classes */ /* -------------------------------- */ .hidden { display: none; } /* -------------------------------- */ /* Colors */ /* -------------------------------- */ /* -------------------------------- */ /* Font Definitions */ /* -------------------------------- */ @font-face { font-family: 'MenschRegular'; src: url("../font/mensch-wf.eot"); src: url("../font/mensch-wf.eot?#iefix") format("embedded-opentype"), url("../font/mensch-wf.woff") format("woff"), url("../font/mensch-wf.ttf") format("truetype"), url("../font/mensch-wf.svg#MenschMenschRegular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'CenturyItalicMedium'; src: url("../font/centuryitalic-webfont.eot"); src: url("../font/centuryitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/centuryitalic-webfont.woff") format("woff"), url("../font/centuryitalic-webfont.ttf") format("truetype"), url("../font/centuryitalic-webfont.svg#centuryitalicmedium") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'InterstateMedium'; src: url("../font/interstatehandrawn-webfont.eot"); src: url("../font/interstatehandrawn-webfont.eot?#iefix") format("embedded-opentype"), url("../font/interstatehandrawn-webfont.woff") format("woff"), url("../font/interstatehandrawn-webfont.ttf") format("truetype"), url("../font/interstatehandrawn-webfont.svg#interstatehandrawnmedium") format("svg"); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'MenschBold'; src: url('mensch-bold-wf.eot'); src: url('mensch-bold-wf.eot?#iefix') format('embedded-opentype'), url('mensch-bold-wf.woff') format('woff'), url('mensch-bold-wf.ttf') format('truetype'), url('mensch-bold-wf.svg#MenschMenschBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MenschBoldInline'; src: url('mensch-inline-wf.eot'); src: url('mensch-inline-wf.eot?#iefix') format('embedded-opentype'), url('mensch-inline-wf.woff') format('woff'), url('mensch-inline-wf.ttf') format('truetype'), url('mensch-inline-wf.svg#MenschMenschBoldInline') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MenschThin'; src: url('mensch-thin-wf.eot'); src: url('mensch-thin-wf.eot?#iefix') format('embedded-opentype'), url('mensch-thin-wf.woff') format('woff'), url('mensch-thin-wf.ttf') format('truetype'), url('mensch-thin-wf.svg#MenschMenschThin') format('svg'); font-weight: normal; font-style: normal; } */ /* -------------------------------- */ /* Mixins Definitions */ /* -------------------------------- */ /* -------------------------------- */ /* Los Styles */ /* -------------------------------- */ html * { -moz-user-select: none; -webkit-user-select: none; } html { width: 100%; height: 100%; } body { background: black url("/images/build_bg_tile.jpg"); color: #fff; font-family: "MenschRegular",sans-serif; overflow: hidden; padding: 0px; margin: 0px; width: 100%; height: 100%; } body .main-preloader { pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; /*background: #00f;*/ text-align: center; } body .main-preloader #seabiscuit { width: 750px; height: 45px; line-height: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0; text-align: center; } body .main-preloader.fade { opacity: 0; } body .main-preloader.remove { display: none; } body .main-preloader #loader-dial { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 5000; height: 177px; width: 211px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -636px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { body .main-preloader #loader-dial { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2486.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 177px; width: 211px; } } body .main-preloader #loader-dial #loader-needle { z-index: 5100; height: 38px; width: 180px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4026px; background-repeat: no-repeat; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 85px; left: 15px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { body .main-preloader #loader-dial #loader-needle { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3912.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 38px; width: 180px; } } .hover { -webkit-transition: opacity; -moz-transition: opacity; -o-transition: opacity; transition: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; opacity: 0; } .hover:hover { opacity: 1; } #sotd { position: absolute; top: 0; right: 0; z-index: 1000; } #content { width: 100%; height: 100%; position: relative; overflow: hidden; } #content .page-holder { height: 100%; position: absolute; overflow: hidden; width: 100%; opacity: 1; } #preloader { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; -webkit-transition: opacity, 0.5s; -moz-transition: opacity, 0.5s; -o-transition: opacity, 0.5s; transition: opacity, 0.5s; } #preloader.loading { opacity: 0.5; } #pausemenu { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; z-index: 100000; } #pausemenu #graph-details { -webkit-transition: bottom 0.3s; -moz-transition: bottom 0.3s; -o-transition: bottom 0.3s; transition: bottom 0.3s; -webkit-transition: left 0.25s; -moz-transition: left 0.25s; -o-transition: left 0.25s; transition: left 0.25s; position: absolute; display: none; width: 160px; color: #f4f0e9; } #pausemenu #graph-details .graph-row { display: block; height: 20px; overflow: hidden; -webkit-transition: height 0.25s; -moz-transition: height 0.25s; -o-transition: height 0.25s; transition: height 0.25s; } #pausemenu #graph-details .graph-row.collapse { height: 0px; } #pausemenu #graph-details .graph-row .count { display: inline-block; width: 50px; text-align: right; padding-right: 3px; } #pausemenu #graph-details .graph-row .label { display: inline-block; width: 100px; padding-left: 3px; text-align: left; } #pausemenu .pause-container { position: absolute; top: 50%; height: 175px; width: 700px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #pausemenu .pause-container div .off, #pausemenu .pause-container div .on { -webkit-transition: opacity; -moz-transition: opacity; -o-transition: opacity; transition: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; position: absolute; top: 0; left: 0; } #pausemenu .pause-container div .off { opacity: 1; } #pausemenu .pause-container div:hover .off { opacity: 0; } #pausemenu .pause-container div .on { opacity: 0; } #pausemenu .pause-container div:hover .on { opacity: 1; } #pausemenu .pause-container div#share-snapshot { position: absolute; cursor: pointer; left: 40px; top: 40px; width: 162px; height: 92px; background-image: url(/images/social/camera/camera_0.png); background-size: cover; } #pausemenu .pause-container div#share-snapshot .off { height: 92px; width: 162px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3078px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-snapshot .off { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3271.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 92px; width: 162px; } } #pausemenu .pause-container div#share-snapshot .on { height: 92px; width: 162px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -2985px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-snapshot .on { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2978px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 92px; width: 162px; } } #pausemenu .pause-container div#share-social { position: absolute; width: 300px; height: 280px; top: -25px; left: 230px; background-image: url(/images/social/hand/hand_0.png); background-size: 121px 175px; background-repeat: no-repeat; background-position: center top; } #pausemenu .pause-container div#share-social #share-social-icon { position: absolute; left: 90px; } #pausemenu .pause-container div#share-social #share-social-icon .off { height: 175px; width: 121px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -2531px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-social #share-social-icon .off { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2664px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 175px; width: 121px; } } #pausemenu .pause-container div#share-social #share-social-icon .on { height: 175px; width: 121px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -2355px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-social #share-social-icon .on { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2172.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 175px; width: 121px; } } #pausemenu .pause-container div#share-social:hover #share-options { opacity: 1; } #pausemenu .pause-container div#share-social #share-options { -webkit-transition: opacity; -moz-transition: opacity; -o-transition: opacity; transition: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; position: absolute; left: 45px; width: 250px; top: 190px; opacity: 0; } #pausemenu .pause-container div#share-social #share-options div { float: left; margin-right: 20px; cursor: pointer; } #pausemenu .pause-container div#share-heart { position: absolute; cursor: pointer; right: 0; top: 9px; width: 102px; height: 138px; background-image: url(/images/social/heart/heart_0.png); background-size: cover; } #pausemenu .pause-container div#share-heart .off { height: 138px; width: 102px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -2707px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-heart .off { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2839.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 138px; width: 102px; } } #pausemenu .pause-container div#share-heart .on { height: 138px; width: 102px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -2846px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #pausemenu .pause-container div#share-heart .on { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -2348px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 138px; width: 102px; } } #share-email { height: 32px; width: 45px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3646px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-email { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3772.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 31.5px; width: 44.5px; } } #share-email .hover { height: 32px; width: 45px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3903px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-email .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3880.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 31.5px; width: 44.5px; } } #share-facebook { height: 30px; width: 15px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4065px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-facebook { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4433px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 15px; } } #share-facebook .hover { height: 30px; width: 15px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4350px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-facebook .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4280.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 15px; } } #share-twitter { height: 36px; width: 50px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3719px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-twitter { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3844px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 36px; width: 50px; } } #share-twitter .hover { height: 36px; width: 50px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3976px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-twitter .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4040px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 36px; width: 50px; } } #share-pinterest { height: 39px; width: 39px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3679px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-pinterest { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3804.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 39px; width: 39px; } } #share-pinterest .hover { height: 39px; width: 39px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3936px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #share-pinterest .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3951px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 39px; width: 39px; } } .home { background-color: #333; } .video { background-color: #666; } .video video { position: absolute; height: 100%; } video.extras { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); } #app-frame-container { left: 0; position: absolute; overflow: hidden; } #app-frame-container #app-frame { position: absolute; overflow: hidden; } /****************************************************************************** scrubber bar styles *******************************************************************************/ #footer { position: absolute; z-index: 50; width: 100%; height: 200px; opacity: 0; } #footer #progress-bar-container { position: absolute; background: #303030; height: 1px; top: 1px; -webkit-transition: height 1s; -moz-transition: height 1s; -o-transition: height 1s; transition: height 1s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -o-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); transition-timing-function: cubic-bezier(0, 0.8, 0, 1); } #footer #progress-bar-container #progress-bar { height: 100%; background-color: #f8d25f; position: absolute; top: 0px; left: 0px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -o-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); transition-timing-function: cubic-bezier(0, 0.8, 0, 1); } #footer #progress-bar-container #progress-bar .hash-mark { background: black; width: 2px; height: 100%; position: absolute; left: 0px; top: 0px; } #footer #scrubber { position: absolute; width: 100%; } #footer #scrubber * { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); webkit-backface-visibility: hidden; } #footer #scrubber #thumbnails { position: absolute; bottom: 0px; width: 100%; background: black; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden; } #footer #scrubber .scrubber-container { position: absolute; overflow: hidden; height: 100%; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } #footer #scrubber .scrubber-container .progress { position: absolute; overflow: hidden; background-color: #f8d25f; height: 1px; bottom: 0px; width: 100%; z-index: 200; } #footer #scrubber .scrubber-container .thumbnail-container { position: absolute; overflow: hidden; } #footer #scrubber .scrubber-container .thumbnail-container .thumbnail { position: absolute; overflow: hidden; width: 100%; height: 100%; } #footer #scrubber .scrubber-container .thumbnail-container .thumbnail .thumbnail-sheet { overflow: hidden; position: absolute; width: 100%; height: 100%; } #footer #scrubber .scrubber-container .thumbnail-container .thumbnail .thumbnail-sheet IMG { position: absolute; top: 0px; left: 0px; width: 100%; } #footer #scrubber #scrubber-details { /*background-color: red;*/ position: absolute; letter-spacing: 1px; font-size: 12px; bottom: 0px; left: 0px; height: 30px; width: 100px; padding-top: 14px; text-align: center; -webkit-transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transition-timing-function: cubic-bezier(0, 0.7, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0.7, 0, 1); -o-transition-timing-function: cubic-bezier(0, 0.7, 0, 1); transition-timing-function: cubic-bezier(0, 0.7, 0, 1); } #footer #scrubber #scrubber-details .inactive { color: #aca99c; } #footer #scrubber #scrubber-details .active { color: #f8d25f; } #footer #scrubber #scrubber-details #scrubber-story-link { -webkit-transition: color, 0.2s; -moz-transition: color, 0.2s; -o-transition: color, 0.2s; transition: color, 0.2s; cursor: pointer; } #footer #scrubber #scrubber-details #scrubber-chapter-index { -webkit-transition: color, 0.2s; -moz-transition: color, 0.2s; -o-transition: color, 0.2s; transition: color, 0.2s; cursor: pointer; } #footer #footer-content { text-align: center; margin-top: 32px; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; } #footer #footer-content #footer-explore { margin-bottom: 38px; margin-right: 20px; display: inline-block; cursor: pointer; height: 19px; width: 75px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4157px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-explore { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4349.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 18.5px; width: 74.5px; } } #footer #footer-content #footer-explore:hover { height: 19px; width: 75px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4137px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-explore:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4076.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 18.5px; width: 74.5px; } } #footer #footer-content #footer-logo { display: inline-block; cursor: pointer; height: 100px; width: 154px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3272px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-logo { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3171px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 100px; width: 153.5px; } } #footer #footer-content #footer-logo:hover { height: 100px; width: 154px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3171px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-logo:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3070.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 100px; width: 153.5px; } } #footer #footer-content #footer-credits { margin-left: 20px; margin-bottom: 41px; display: inline-block; cursor: pointer; height: 15px; width: 69px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4190px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-credits { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4463.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 14.5px; width: 68.5px; } } #footer #footer-content #footer-credits:hover { height: 15px; width: 69px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4206px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #footer #footer-content #footer-credits:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4181.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 14.5px; width: 68.5px; } } #header { opacity: 0; height: 32px; width: 100%; position: absolute; letter-spacing: 2px; font-size: 14px; color: #f4f0e9; } #header #title-left { position: absolute; bottom: 10px; left: 10px; } #header #title-left.clickable { cursor: pointer; } #header #title-left.clickable:hover { color: #f8d25f; } #header #title-center { position: absolute; bottom: 10px; width: 100%; text-align: center; } #header #controls { position: absolute; bottom: 10px; right: 10px; } #header #controls #sound-control { float: left; padding-right: 8px; height: 15px; width: 13px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4467px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #sound-control { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4810px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 15px; width: 13px; } } #header #controls #sound-control .hover { height: 15px; width: 13px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4413px; background-repeat: no-repeat; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #sound-control .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4506px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 15px; width: 13px; } } #header #controls #sound-control.mute { height: 15px; width: 13px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4397px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #sound-control.mute { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4794.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 15px; width: 13px; } } #header #controls #sound-control.mute .hover { height: 15px; width: 13px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4381px; background-repeat: no-repeat; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #sound-control.mute .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4490.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 15px; width: 13px; } } #header #controls #full-screen-control { float: left; height: 16px; width: 17px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4916px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #full-screen-control { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4833px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 16px; width: 17px; } } #header #controls #full-screen-control .hover { height: 16px; width: 17px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4442px; background-repeat: no-repeat; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #full-screen-control .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4550px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 16px; width: 17px; } } #header #controls #full-screen-control.fullscreen { height: 16px; width: 17px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4933px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #full-screen-control.fullscreen { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4849.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 16px; width: 17px; } } #header #controls #full-screen-control.fullscreen .hover { height: 16px; width: 17px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4483px; background-repeat: no-repeat; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #header #controls #full-screen-control.fullscreen .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4521.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 16px; width: 17px; } } /****************************************************************************** intro/chooser styles *******************************************************************************/ #chooser { position: absolute; z-index: 100; width: 100%; height: 100%; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); webkit-backface-visibility: hidden; } #chooser .pane { position: absolute; overflow: hidden; width: 100%; height: 100%; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); webkit-backface-visibility: hidden; } #chooser .pane IMG { height: 100%; position: absolute; top: 0px; left: 0px; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); webkit-backface-visibility: hidden; } #chooser .pane VIDEO { position: absolute; height: 100%; display: block; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); webkit-backface-visibility: hidden; } #chooser .logo { position: absolute; width: 450px; height: 323px; z-index: 2000; } #chooser #logo-intro { width: 557px; height: 442px; cursor: pointer; } #chooser #pane-casey, #chooser #pane-thor, #chooser #pane-james { display: none; } #chooser #chooser-controls { position: absolute; width: 100%; height: 100%; display: none; } #chooser #next { position: absolute; right: 0px; height: 100%; width: 200px; cursor: pointer; } #chooser #next.hidden { display: block; cursor: default; } #chooser #next.hidden:hover .icon { right: -40px; } #chooser #next .icon { -webkit-transition: right 0.8s; -moz-transition: right 0.8s; -o-transition: right 0.8s; transition: right 0.8s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; position: absolute; top: 50%; right: -40px; height: 30px; width: 31px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4828px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #next .icon { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4707px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 31px; } } #chooser #next:hover .icon { height: 30px; width: 31px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4797px; background-repeat: no-repeat; right: 50px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #next:hover .icon { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4676.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 31px; } } #chooser #previous { position: absolute; left: 0px; height: 100%; width: 200px; cursor: pointer; text-align: center; } #chooser #previous.hidden { display: block; cursor: default; } #chooser #previous.hidden:hover .icon { left: -40px; } #chooser #previous .icon { -webkit-transition: left 0.8s; -moz-transition: left 0.8s; -o-transition: left 0.8s; transition: left 0.8s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; top: 50%; left: -40px; position: absolute; height: 30px; width: 31px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4319px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #previous .icon { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4737.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 31px; } } #chooser #previous:hover .icon { height: 30px; width: 31px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4261px; background-repeat: no-repeat; left: 50px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #previous:hover .icon { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4250px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 31px; } } #chooser #play-button-container { position: absolute; overflow: hidden; width: 100%; bottom: 40px; height: 100px; z-index: 1000; text-align: center; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } #chooser #play-button-container.hide { height: 0px; } #chooser #play-film { position: relative; z-index: 10000; display: inline-block; cursor: pointer; margin-top: 0px; height: 30px; width: 235px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3373px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #play-film { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3548.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 235px; } } #chooser #play-film .hover { position: absolute; top: 0; left: 0; height: 30px; width: 235px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3521px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #play-film .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3518px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 30px; width: 235px; } } #chooser #label-container { overflow: hidden; position: absolute; z-index: 20000; width: 100%; bottom: 40px; /*height:100px;*/ height: 0px; text-align: center; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } #chooser #label-container.hide { height: 0px; } #chooser #play-bolt { height: 12px; width: 11px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4950px; background-repeat: no-repeat; -webkit-transition: top 0.75s; -moz-transition: top 0.75s; -o-transition: top 0.75s; transition: top 0.75s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; margin: 0 auto; position: relative; top: 25px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #play-bolt { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4881px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 12px; width: 11px; } } #chooser #play-bolt.show { top: 0px; } #chooser #story-label { position: relative; top: 25px; display: inline-block; cursor: pointer; opacity: 1; } #chooser #story-label .hover { position: absolute; top: 0; left: 0; } #chooser #story-label.james { height: 20px; width: 251px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3500px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.james { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3456.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19.5px; width: 251px; } } #chooser #story-label.james .hover { height: 20px; width: 251px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3756px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.james .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3752.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19.5px; width: 251px; } } #chooser #story-label.casey { height: 20px; width: 270px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3458px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.casey { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3364px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19.5px; width: 270px; } } #chooser #story-label.casey .hover { height: 20px; width: 270px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3604px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.casey .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3713px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19.5px; width: 270px; } } #chooser #story-label.thor { height: 20px; width: 252px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3479px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.thor { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3384px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19px; width: 252px; } } #chooser #story-label.thor .hover { height: 20px; width: 252px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3625px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { #chooser #story-label.thor .hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3733px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 19px; width: 252px; } } /****************************************************************************** Video styles *******************************************************************************/ .page-holder.video.buffering .end-of-chapter-choices, .page-holder.choose.buffering .end-of-chapter-choices { display: none; } .page-holder.video.buffering .chapter-logo, .page-holder.choose.buffering .chapter-logo { display: none; } .page-holder.video .buffer-scrim, .page-holder.choose .buffer-scrim { position: absolute; background-color: rgba(0, 0, 0, 0.6); top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; display: none; -webkit-transition: opacity, 1s; -moz-transition: opacity, 1s; -o-transition: opacity, 1s; transition: opacity, 1s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .page-holder.video .buffer-scrim.loading, .page-holder.choose .buffer-scrim.loading { display: block; opacity: 1; } .page-holder.video .buffer-scrim .buffer, .page-holder.choose .buffer-scrim .buffer { position: absolute; top: 50%; left: 50%; width: 512px; height: 350px; /*.buffer-animation { background: url(/images/buffer-animation.png) no-repeat top left; position: absolute; width: 512px; height: 117px; margin-left: -172px; margin-top: -59px; }*/ } .page-holder.video .buffer-scrim .buffer div, .page-holder.choose .buffer-scrim .buffer div { background: none !important; width: 512px; height: 350px; margin-left: -256px; margin-top: -175px; } .page-holder.video .resume-playback-button, .page-holder.choose .resume-playback-button { position: absolute; cursor: pointer; right: 20px; top: 20px; height: 26px; width: 25px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4859px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .page-holder.video .resume-playback-button, .page-holder.choose .resume-playback-button { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4768px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 26px; width: 25px; } } .page-holder.video .resume-playback-button:hover, .page-holder.choose .resume-playback-button:hover { height: 26px; width: 25px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4292px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .page-holder.video .resume-playback-button:hover, .page-holder.choose .resume-playback-button:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4323px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 26px; width: 25px; } } .page-holder.video .chapter-logo, .page-holder.choose .chapter-logo { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute; width: 450px; height: 323px; } .page-holder.video .chapter-logo .title, .page-holder.choose .chapter-logo .title { letter-spacing: 2px; margin-top: 20px; text-align: center; } .end-of-chapter-choices { position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.5); } .end-of-chapter-choices #extras-logo { text-align: center; position: absolute; width: 100%; top: 50%; } .end-of-chapter-choices #extras-logo.hide { display: none; } .end-of-chapter-choices #extras-logo canvas { margin-top: -150px; display: inline-block; cursor: pointer; } .end-of-chapter-choices .choice-story-end { position: absolute; width: 100%; top: 50%; text-align: center; } .end-of-chapter-choices .choice-story-end .watch-from-beginning { display: inline-block; cursor: pointer; height: 26px; width: 332px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3431px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .end-of-chapter-choices .choice-story-end .watch-from-beginning { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3403.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 26px; width: 332px; } } .end-of-chapter-choices .choice-story-end .watch-from-beginning:hover { height: 26px; width: 332px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3404px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .end-of-chapter-choices .choice-story-end .watch-from-beginning:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3430px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 26px; width: 332px; } } .end-of-chapter-choices .choice-story-end .watch-from-beginning.hidden { display: none; } .end-of-chapter-choices .choice-story-end .divider-wrench { margin-top: 20px; margin-bottom: 20px; display: inline-block; height: 7px; width: 35px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -4459px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .end-of-chapter-choices .choice-story-end .divider-wrench { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -4825.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 7px; width: 35px; } } .end-of-chapter-choices .choice-story-end .divider-wrench.hidden { display: none; } .end-of-chapter-choices .choice-story-end .resume-playback { display: inline-block; cursor: pointer; height: 25px; width: 262px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3578px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .end-of-chapter-choices .choice-story-end .resume-playback { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3646px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 25px; width: 261.5px; } } .end-of-chapter-choices .choice-story-end .resume-playback:hover { height: 25px; width: 262px; background-image: url('/images/desktop/sprite_pieces-s6ed86c9377.png'); background-position: 0 -3552px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) { .end-of-chapter-choices .choice-story-end .resume-playback:hover { background-image: url('/images/desktop/sprite_pieces2x-se4eb8a5ea0.png'); background-position: 0 -3620.5px; -webkit-background-size: 332px auto; -moz-background-size: 332px auto; -o-background-size: 332px auto; background-size: 332px auto; height: 25px; width: 261.5px; } } .end-of-chapter-choices .choice-story-end .resume-playback.hidden { display: none; } /****************************************************************************** styles for behind the scenes *******************************************************************************/ .behind-the-scenes video { position: absolute; } .behind-the-scenes .pause-scrim { position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.5); opacity: 0; } .behind-the-scenes #bts-progress-container { height: 30px; cursor: pointer; width: 100%; position: absolute; bottom: 0px; } .behind-the-scenes #bts-progress-container #bts-progress { width: 100%; background: #303030; height: 1px; position: absolute; bottom: 0px; -webkit-transition: height 1s; -moz-transition: height 1s; -o-transition: height 1s; transition: height 1s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -o-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); transition-timing-function: cubic-bezier(0, 0.8, 0, 1); } .behind-the-scenes #bts-progress-container #bts-progress #bts-progress-amount { height: 100%; background-color: #f8d25f; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); -o-transition-timing-function: cubic-bezier(0, 0.8, 0, 1); transition-timing-function: cubic-bezier(0, 0.8, 0, 1); } .behind-the-scenes #bts-progress-container:hover #bts-progress { height: 4px; } /******************************************************************************