@bbc/storyplayer
Version:
StoryPlayer - reference player for BBC Research & Development's object-based media schema (https://www.npmjs.com/package/@bbc/object-based-media-schema)
6 lines (3 loc) • 43.2 kB
CSS
.romper-share-list{display:inline-flex;margin-top:0;padding-left:0}.romper-share-list li{border:1px solid rgba(0,0,0,0);list-style:none;padding:0.5em}.romper-share-list li:hover{border:1px solid #fff}.romper-share-list li button{background-color:rgba(0,0,0,0);background-position:center;background-repeat:no-repeat;background-size:contain;border:0;height:3vw;max-height:3em;max-width:3em;min-height:2em;min-width:2em;width:3vw}.romper-share-list li.email button{background-image:url(images/envelope-closed.svg)}.romper-share-list li.twitter button{background-image:url(images/Twitter_Social_Icon_Circle_Color.svg)}.romper-share-list li.twitter.white button{background-image:url(images/Twitter_Social_Icon_Circle_White.svg)}.romper-share-list li.facebook button{background-image:url(images/f_logo_RGB-Blue_250.png)}.romper-share-list li.facebook.white button{background-image:url(images/f_logo_RGB-White_250.png)}.romper-share-list li.facebook.black button{background-image:url(images/f_logo_RGB-Black_250.png)}.romper-share-list li.facebook.grey button{background-image:url(images/f_logo_RGB-Grey_250.png)}.social-share{display:inline;min-height:6em}.romper-media-element-queued{display:none}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.romper-warning{display:table;height:100%;width:100%}.romper-warning div{color:#fff;display:table-cell;padding:20px;text-align:center;vertical-align:middle}.romper-target{height:100%;min-width:320px;width:100%}.romper-threejs{position:absolute}#p_pluginContainer .romper-player{display:unset;flex-direction:unset;height:100%;justify-content:unset;left:0;position:absolute;top:0;width:100%}.romper-player{color:#fff;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.romper-player *{box-sizing:content-box}.romper-player.romper-player-fullscreen{-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:100%}.romper-player .romper-background,.romper-player .romper-media,.romper-player .romper-gui{bottom:0;left:0;position:absolute;right:0;top:0}.romper-player .romper-gui.overflowing-text{bottom:0;height:max(20%,11.5rem);left:0;position:absolute;top:calc(100% - max(20%, 11.5rem))}.romper-player .romper-dog{background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none;position:absolute;z-index:101}.romper-player .romper-error{-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);background-color:rgba(0,0,0,0.4);border:1px solid #fff;height:auto;left:50%;padding:10px;position:absolute;text-align:center;top:25%;transform:translateX(-50%) translateY(-50%);width:auto;z-index:105}.romper-player .romper-error.hide{display:none;height:0%;width:0%}.romper-player .romper-media{background-color:#000}.romper-player .romper-media.romper-prestart .romper-start-image{visibility:visible}.romper-player .romper-media.romper-prestart div{visibility:hidden}.romper-player .romper-media.romper-prestart .romper-privacy-notice{background:linear-gradient(rgba(0,0,0,0) 0%, rgba(36,36,36,0.8) 30%, rgba(36,36,36,0.8) 100%);bottom:0;height:150px;left:0;position:absolute;right:0;visibility:visible;z-index:10}.romper-player .romper-media.romper-prestart .romper-privacy-notice a{color:#3cffd5}.romper-player .romper-media.romper-prestart .romper-privacy-notice>p{bottom:10px;left:0;margin-top:50px;padding:0 5%;position:absolute;right:0;text-align:center}.romper-player .romper-loading{background-color:#000;height:100%;position:absolute;width:100%}.romper-player .romper-loading-inner{background-color:rgba(0,0,0,0);background-image:url(images/loading.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;height:2.5em;left:calc(50% - 1.25em);margin:0;padding:0;position:absolute;top:calc(50% - 1.25em);width:2.5em}.romper-player .romper-video-element{height:100%;position:absolute;top:0;width:100%}.romper-player .a-enter-vr.embedded{height:25px;top:0;width:25px}.romper-player .a-enter-vr-button{bottom:inherit;height:25px;top:5px}.romper-player .romper-audio-element{background:#000;background-image:url(images/volume-high.svg);background-position:50%;background-repeat:no-repeat;background-size:30%;height:100%;position:absolute;width:100%}.romper-player .romper-text-element{background:#000;color:#fff;font-size:1.8rem;height:64.5%;margin:0;overflow:hidden;padding:10%;position:absolute;text-align:center;width:80%}.romper-player .romper-text-element.overflowing-text{height:unset;overflow:auto;padding-bottom:2em;padding-top:2em}.romper-player .romper-inactive{display:none ;visibility:collapse }.romper-player .romper-unavailable{cursor:not-allowed;opacity:0.5;pointer-events:none}.romper-player .romper-control-selected>.romper-icon{background-color:#3cffd5}.romper-player .romper-icon-control,.romper-player .romper-representation-control{background-color:rgba(0,0,0,0);border:0}.romper-player .romper-no-icon{background-color:rgba(0,0,0,0);background-image:url(images/no-asset.svg);background-position:center;background-repeat:no-repeat;background-size:contain}.romper-player .romper-button-icon-div{opacity:1}.romper-player .romper-play-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-play-button:hover,.romper-player .romper-play-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-play-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-play-button div{background-color:rgba(0,0,0,0);background-image:url(images/media-play.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-pause-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-pause-button:hover,.romper-player .romper-pause-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-pause-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-pause-button div{background-color:rgba(0,0,0,0);background-image:url(images/media-pause.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-seek-fwd-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-seek-fwd-button:hover,.romper-player .romper-seek-fwd-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-seek-fwd-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-seek-fwd-button div{background-color:rgba(0,0,0,0);background-image:url(images/seek-forward-40.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-seek-back-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-seek-back-button:hover,.romper-player .romper-seek-back-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-seek-back-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-seek-back-button div{background-color:rgba(0,0,0,0);background-image:url(images/seek-back-40.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-volume-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-volume-button:hover,.romper-player .romper-volume-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-volume-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-volume-button div{background-color:rgba(0,0,0,0);background-image:url(images/volume-high.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-start-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;margin-right:20px;padding:0}.romper-player .romper-start-button:hover,.romper-player .romper-start-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-start-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-start-button .romper-button-icon-div{background-color:rgba(0,0,0,0);background-image:url(images/media-play.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%}.romper-player .romper-representation-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-representation-button:hover,.romper-player .romper-representation-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-representation-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-representation-button div{background-color:rgba(0,0,0,0);background-image:url(images/layers.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:60%;width:60%}.romper-player .romper-icon-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-icon-button:hover,.romper-player .romper-icon-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-icon-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-icon-button div{background-color:rgba(0,0,0,0);background-image:url(images/list.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:60%;width:60%}.romper-player .romper-fullscreen-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-fullscreen-button:hover,.romper-player .romper-fullscreen-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-fullscreen-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-fullscreen-button div{background-color:rgba(0,0,0,0);background-image:url(images/fullscreen-enter.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-buttons-fullscreen .romper-fullscreen-button div{background-color:rgba(0,0,0,0);background-image:url(images/fullscreen-exit.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-back-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-back-button:hover,.romper-player .romper-back-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-back-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-back-button div{background-color:rgba(0,0,0,0);background-image:url(images/media-step-backward.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-next-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;margin-right:auto}.romper-player .romper-next-button:hover,.romper-player .romper-next-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-next-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-next-button div{background-color:rgba(0,0,0,0);background-image:url(images/media-step-forward.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-timer{display:inline-flex;height:40px;padding-left:10px;padding-right:20px;padding-top:20px}.romper-player .romper-subtitles-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px}.romper-player .romper-subtitles-button:hover,.romper-player .romper-subtitles-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-subtitles-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-subtitles-button div{background-color:rgba(0,0,0,0);background-image:url(images/subtitles.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;height:25px;width:25px}.romper-player .romper-subtitles-button.romper-control-disabled{display:none}.romper-player .romper-mute-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;margin-right:auto;margin-top:0;padding:3px}.romper-player .romper-mute-button:hover,.romper-player .romper-mute-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-mute-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-mute-button div{background-color:rgba(0,0,0,0);background-image:url(images/volume-high.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;background-size:80%}.romper-player .romper-muted-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;margin-right:auto;margin-top:0;padding:3px}.romper-player .romper-muted-button:hover,.romper-player .romper-muted-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-muted-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-muted-button:hover,.romper-player .romper-muted-button:focus{background-color:initial;filter:none}.romper-player .romper-muted-button div{background-color:rgba(0,0,0,0);background-image:url(images/volume-off.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%;background-size:80%}.romper-player .romper-muted-button div:hover,.romper-player .romper-muted-button div:focus{background-color:initial;filter:none}.romper-player .romper-error-message{padding:1em}.romper-player .romper-error-buttons.hide{display:none}.romper-player .romper-error-buttons .romper-next-button{display:inline-flex}.romper-player .romper-error-buttons .romper-ignore-button,.romper-player .romper-error-buttons .romper-next-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;border:1px solid #fff;color:#fff;line-height:25px;margin:1em;width:5em}.romper-player .romper-error-buttons .romper-ignore-button:hover,.romper-player .romper-error-buttons .romper-ignore-button:focus,.romper-player .romper-error-buttons .romper-next-button:hover,.romper-player .romper-error-buttons .romper-next-button:focus{background-color:#c3002a;filter:invert(100%)}.romper-player .romper-error-buttons .romper-ignore-button.romper-button-selected,.romper-player .romper-error-buttons .romper-next-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.romper-player .romper-error-buttons .romper-ignore-button div,.romper-player .romper-error-buttons .romper-next-button div{height:25px;width:25px}.romper-player .romper-volume-overlay{align-items:center;background-color:rgba(170,170,170,0.6);display:flex;max-height:70%;max-width:60%;opacity:0.9;overflow-y:auto;padding:13px;z-index:4;background-color:#000;bottom:104px;flex-direction:column;left:10%;max-height:unset;position:absolute}.romper-player .romper-volume-overlay>*{padding:5px}.romper-player .romper-volume-overlay .romper-volume-control{align-items:center;display:block;flex:none;flex-direction:row;font-size:smaller;justify-content:center;width:100%}.romper-player .romper-volume-overlay .romper-volume-control.romper-muted .romper-volume-level,.romper-player .romper-volume-overlay .romper-volume-control.romper-muted .romper-volume-range{opacity:0.4}.romper-player .romper-volume-overlay .romper-volume-control .romper-control-line{display:inline-flex}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-level{align-self:center;padding-left:15px;width:1.2em}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-label{margin-right:1em;overflow-x:hidden;padding-bottom:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:8em}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-range{-webkit-appearance:none;background-color:rgba(0,0,0,0);margin-left:5px;margin-top:5px;outline:none;width:100%}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-range::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:#fff;height:1px}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-range::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;border-radius:50%;height:12px;margin-top:-5px;width:12px}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-range::-moz-range-progress{background-color:#3cffd5}.romper-player .romper-volume-overlay .romper-volume-control .romper-volume-range::-moz-range-track{background-color:rgba(0,0,0,0)}.romper-player .romper-volume-overlay.count-1 .romper-volume-label{display:none}.romper-player .romper-representation-overlay{align-items:center;background-color:rgba(170,170,170,0.6);display:flex;max-height:70%;max-width:60%;opacity:0.9;overflow-y:auto;padding:13px;z-index:4;background-color:#000;bottom:104px;flex-wrap:wrap;justify-content:center;max-height:unset;position:absolute;right:10%;transition:opacity 1s ease}.romper-player .romper-representation-overlay>*{padding:5px}.romper-player .romper-representation-overlay .romper-representation-icon{width:3em}.romper-player .romper-icon-overlay{align-items:center;background-color:rgba(170,170,170,0.6);display:flex;max-height:70%;max-width:60%;opacity:0.9;overflow-y:auto;padding:13px;z-index:4;background-color:#000;bottom:104px;flex-wrap:wrap;justify-content:center;max-height:unset;position:absolute;right:10%;transition:opacity 1s ease}.romper-player .romper-icon-overlay>*{padding:5px}.romper-player .romper-icon-overlay .romper-icon{width:3em}@keyframes appear{0%{opacity:0}35%{opacity:0.35}100%{opacity:1}}@keyframes countdown{0%{border-bottom-color:inherit;border-bottom-width:10px;padding-bottom:3px}100%{border-bottom-color:transparent;border-bottom-width:1px;padding-bottom:12px}}.romper-player .romper-link-choice-overlay{background:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.9) 100%);bottom:0;display:flex;left:0;min-height:10%;min-width:0;padding:3% 10%;pointer-events:none;position:absolute;width:80%;z-index:15}.romper-player .romper-link-choice-overlay.fullscreen-choice-icons,.romper-player .romper-link-choice-overlay.fullscreen-icons{background:none;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;height:100%;padding:0;width:100%}.romper-player .romper-link-choice-overlay.fullscreen-choice-icons.tworow,.romper-player .romper-link-choice-overlay.fullscreen-icons.tworow{grid-template-rows:50% 50%}.romper-player .romper-link-choice-overlay.fullscreen-choice-icons.threerow,.romper-player .romper-link-choice-overlay.fullscreen-icons.threerow{grid-template-rows:33% 33% 33%}.romper-player .romper-link-choice-overlay.fullscreen-choice-icons .romper-link-icon-container,.romper-player .romper-link-choice-overlay.fullscreen-choice-icons .romper-text-link-container,.romper-player .romper-link-choice-overlay.fullscreen-icons .romper-link-icon-container,.romper-player .romper-link-choice-overlay.fullscreen-icons .romper-text-link-container{height:100%;margin:0;width:100%}.romper-player .romper-link-choice-overlay.romper-icon-fade .romper-control-selected{opacity:0;pointer-events:none;transition:opacity 0.2s 1.3s ease}.romper-player .romper-link-choice-overlay.romper-icon-fade .romper-control-unselected{opacity:0;pointer-events:none;transition:opacity 0.2s ease}.romper-player .romper-link-choice-overlay.romper-icon-fade>button:focus{border-left:unset;border-right:unset;border-top:unset}.romper-player .romper-link-choice-overlay .romper-link-control{background:none;border-bottom-color:rgba(0,0,0,0);border-bottom-style:solid;border-bottom-width:4px;border-left:2px solid transparent;border-right:2px solid transparent;border-top:2px solid transparent;color:inherit;cursor:pointer;flex:1 1 0;font-family:inherit;font-size:100%;height:calc(100% - 8px);margin:0;padding:0;pointer-events:all;width:calc(100% - 8px)}.romper-player .romper-link-choice-overlay .romper-link-control:focus{border:2px solid rgba(170,170,170,0.6);outline:none}.romper-player .romper-link-choice-overlay .romper-control-selected.text{border-bottom:4px solid #3cffd5}.romper-player .romper-link-choice-overlay .romper-control-selected .romper-link-icon-container{border:4px solid #3cffd5}.romper-player .romper-link-choice-overlay .romper-control-unselected.default.text{border-bottom:4px solid rgba(170,170,170,0.6)}.romper-player .romper-link-choice-overlay .romper-control-unselected.default .romper-link-icon-container{border:4px solid rgba(170,170,170,0.6)}.romper-player .romper-link-choice-grid-cell{opacity:1}.romper-link-icon-container{align-items:center;border:4px solid rgba(0,0,0,0);display:flex;height:8em;justify-content:center;margin-bottom:5px;margin-left:auto;margin-right:auto;width:8em}.romper-link-icon-container img{height:80%;object-fit:contain;width:80%}.romper-text-link-container{display:flex;flex-direction:column;height:8em;justify-content:center;margin-bottom:5px}.romper-link-text-icon{font-size:180%;margin:10px;text-align:center}.romper-player>.romper-gui .romper-start-button{bottom:calc(50% - 7.5vw);display:grid;height:15vw;left:calc(50% - 7.5vw);margin:0;position:absolute;width:15vw;z-index:101}.romper-player>.romper-gui .romper-start-button:hover,.romper-player>.romper-gui .romper-start-button:focus{background-color:rgba(0,0,0,0)}.romper-player>.romper-gui .romper-start-button:hover>div,.romper-player>.romper-gui .romper-start-button:focus>div{background-color:#c3002a}.romper-player>.romper-gui .romper-start-button .romper-start-button-icon{background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:50%;height:11.25vw;margin-bottom:auto;margin-left:auto;margin-right:auto;margin-top:auto;max-height:170px;max-width:170px;width:11.25vw}.romper-player>.romper-gui .romper-start-button .romper-start-button-icon-div{height:11.25vw;margin-left:auto;margin-top:0;max-height:170px;max-width:100px;width:9vw}.romper-player>.romper-gui .romper-start-button .romper-start-button-text-div{color:#fff;font-size:48px;font-weight:bold;line-height:25px;margin-top:10px;text-align:center}.romper-player>.romper-gui>.romper-buttons{background:linear-gradient(rgba(0,0,0,0) 0, #000 70%, #000 100%);bottom:0;display:flex;height:100%;max-height:11.25em;opacity:0;padding-bottom:1em;pointer-events:none;position:absolute;transition:all 1s ease;z-index:10}.romper-player>.romper-gui>.romper-buttons.romper-buttons-smp{background:unset}.romper-player>.romper-gui>.romper-buttons.icons-showing{background:linear-gradient(rgba(0,0,0,0) 0, #000 30%, #000 100%)}.romper-player>.romper-gui>.romper-buttons .left,.romper-player>.romper-gui>.romper-buttons .right{display:flex;flex:1 1 auto;padding-top:10px;width:15%}.romper-player>.romper-gui>.romper-buttons .center{flex:0 0 auto;padding-top:10px}.romper-player>.romper-gui>.romper-buttons>.romper-media-transport{display:flex;flex-direction:row;height:74px;margin-left:auto;margin-right:auto;margin-top:auto;width:80%}.romper-player>.romper-gui>.romper-buttons>.romper-media-transport>div{border-top:1px solid #fff}.romper-player>.romper-gui>.romper-buttons.show{opacity:1;pointer-events:all}.romper-player>.romper-gui>.romper-buttons .romper-icon-label{display:none}.romper-player>.romper-gui .romper-narrative-element-transport{bottom:4em;display:flex;height:100%;margin-left:auto;margin-right:auto;opacity:1;transition:all 1s ease;z-index:30}.romper-player>.romper-gui .romper-narrative-element-transport.show{opacity:1}.romper-player>.romper-gui .romper-button{margin:10px 5px}.romper-player>.romper-gui>.romper-overlays{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;height:calc(100% - 120px);justify-content:center;width:100%}.romper-player>.romper-gui>.romper-overlays.buttons-showing .romper-link-choice-overlay{bottom:8em;transition:all 0.5s ease}.romper-player>.romper-gui>.romper-buttons-activate-area{bottom:0;display:block;height:150px;max-height:120px;opacity:0;position:absolute;width:100%;z-index:10}.romper-player>.romper-gui>.romper-buttons-activate-area.hide{display:hidden;height:0%;width:0%}.romper-player>.romper-gui>.romper-buttons-activate-area.disabled{pointer-events:none}.romper-overlay-controls{display:inherit;margin-left:auto}.romper-control-disabled{opacity:0.2}.romper-scrub-bar{bottom:83px;display:block;height:10px;left:10%;margin:0;outline:none;position:absolute;right:0;width:80%;z-index:5}.romper-scrub-bar.romper-control-disabled{pointer-events:none;visibility:hidden}.romper-scrub-bar[type='range']{-webkit-appearance:none;background-color:rgba(0,0,0,0)}.romper-scrub-bar[type='range']::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:rgba(0,0,0,0)}.romper-scrub-bar[type='range']::-moz-range-progress{background-color:#3cffd5}.romper-scrub-bar[type='range']::-moz-range-track{background-color:rgba(0,0,0,0)}.romper-scrub-bar[type='range']::-ms-fill-lower{background-color:#3cffd5}.romper-scrub-bar[type='range']::-ms-fill-upper{background-color:rgba(0,0,0,0)}.romper-image-overlay,.romper-behaviour-modal{position:absolute}.romper-image-overlay,.romper-start-image,.romper-render-image{height:100%;left:0;max-height:100%;max-width:100%;object-fit:contain;object-position:center;position:absolute;top:0;width:100%;z-index:1}.romper-render-image{background-color:#000}.romper-behaviour-modal{background-color:rgba(36,36,36,0.8);border-radius:0.5em;color:#fff;padding:1%;z-index:15}.romper-behaviour-modal .title{font-size:120%;font-weight:bold;padding-bottom:0.5em;padding-right:1.5em}.romper-behaviour-modal a:visited{color:inherit}.romper-behaviour-modal.text-overlay{align-items:center;display:flex;font-size:150%;text-align:center}.romper-behaviour-modal.text-overlay>div{width:100%}.romper-close-button{background-color:rgba(0,0,0,0);background-image:url(images/circle-x.svg);background-position:center;background-repeat:no-repeat;background-size:contain;filter:invert(100%);height:1em;position:absolute;right:0.5em;top:0.5em;width:1em}.romper-close-button:hover,.romper-close-button:focus{background-color:#fff;border:1px solid #fff;border-radius:0.5em;filter:none}.romper-start-image{background-color:#000;left:0;max-height:100%;max-width:100%;position:absolute;top:0;z-index:2}.romper-variable-panel{background:linear-gradient(rgba(0,0,0,0) 0%, rgba(36,36,36,0.8) 10%, rgba(36,36,36,0.8) 100%);bottom:0;color:rgba(255,255,255,0.8);display:flex;flex-direction:column;left:0;opacity:0;padding-bottom:0;position:absolute;right:0;text-align:center;top:40%;transition:opacity 0.5s ease;z-index:2}.romper-variable-panel.active{opacity:1;transition:opacity 0.7s ease;z-index:12}.romper-var-form-title{font-size:120%;padding:5% 25px 1%}.romper-var-form-var-containers{flex-grow:1;height:50%}.romper-var-form-carousel{display:flex;flex-direction:row;flex-grow:1}.romper-variable-form-item{display:flex;height:30%;margin:0.5%;opacity:1;padding-left:10%;pointer-events:all;position:absolute;transition:margin 0.5s ease, opacity 0.5s 0.5s ease;width:80%}.romper-variable-form-item.left{margin-left:-100%;opacity:0;pointer-events:none;transition:margin 0.5s 0.2s ease, opacity 0.5s ease}.romper-variable-form-item.right{margin-left:100%;opacity:0;pointer-events:none;transition:margin 0.5s 0.2s ease, opacity 0.5s ease}.romper-var-form-input-container{display:flex;width:100%}.romper-var-form-button-div{display:inline-flex;padding-left:10vw;width:100%}.romper-var-form-button-div button{background-color:rgba(0,0,0,0);border:0;color:rgba(255,255,255,0.8);cursor:pointer;font-size:80%;margin-bottom:2%;margin-right:10%;min-width:2em}.romper-var-form-button-div button.selected{border-bottom:2px solid #fff}.romper-var-form-slider-input{margin-left:10%}.romper-var-form-range-output{background:rgba(170,170,170,0.6);border:1px solid #fff;border-radius:3px;font-size:65%;left:7vw;opacity:0.8;padding:0 5px;position:absolute;top:-20px}.romper-var-form-range-output::after{border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:10px solid #fff;content:'';height:0;left:50%;margin-left:-5px;margin-top:0;position:absolute;top:100%;width:0}.romper-var-form-answer-cont{display:table;height:100%;padding:0 2%;width:50%}.romper-var-form-answer-cont-inner{display:table-cell;height:100%;vertical-align:middle}.romper-var-form-label-div{display:table;height:100%;text-align:left;width:50%}.romper-var-form-label-div span{display:table-cell;vertical-align:middle}.romper-var-form-list-input select{border:0;color:#37566a;font-size:100%;height:3vw;text-align:left;width:80%}.romper-var-form-number-input{display:table-cell;width:100%}.romper-var-form-number-input>div{display:flex}.romper-var-form-number-input input{border:0;border-radius:5px;color:#37566a;height:2.5vw;text-align:center}.romper-var-form-number-input input.romper-var-form-slider-input{background:#000;margin-left:0;margin-top:1vw;width:60%}.romper-var-form-number-input input.romper-var-form-slider{margin-left:1vw;margin-right:1vw;width:12vw}.romper-var-form-number-input span{font-size:75%;line-height:2.5vw;margin-bottom:-1vw;width:50%}.romper-var-form-number-input span.min{text-align:left}.romper-var-form-number-input span.max{text-align:right}.romper-var-form-button-container{display:inline-flex;margin-left:10%;padding:2% 0;position:relative;text-align:center;width:80%}.romper-var-form-button-container .var-back{background:url(images/media-step-backward.svg) no-repeat left;background-size:contain;margin-right:auto;text-align:right;visibility:hidden}.romper-var-form-button-container .var-back.active{visibility:visible}.romper-var-form-button-container .var-count{font-size:80%;line-height:40px}.romper-var-form-button-container .var-next{background:url(images/media-step-forward.svg) no-repeat right;background-size:contain;margin-left:auto;text-align:left}.romper-var-form-button{background-color:rgba(0,0,0,0);border-radius:3px;color:rgba(255,255,255,0.8);cursor:pointer;font-size:80%;max-height:40px;padding:1%;width:15%}.romper-var-form-feedback{bottom:5.25em;font-size:80%;margin:0;position:absolute;right:2%}.romper-ux-divider{border-bottom:1px solid #fff;display:none;height:2px;left:10%;pointer-events:none;position:absolute;top:20px;width:80%;z-index:16}.romper-ux-divider.show{display:initial}.romper-ux-countdown{background:#3cffd5;height:2px;margin-left:0%;width:100%}.noselect{-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.continue-modal{background-color:rgba(0,0,0,0.4);bottom:0;display:none;left:0;position:inherit;right:0;top:0}.continue-modal .modal-inner-content{border-bottom:1px solid #fff;margin-bottom:1em;padding-bottom:1em}.continue-modal .continue-modal-content{bottom:auto;display:none;height:50%;margin-left:auto;margin-right:auto;padding:2%;position:relative;text-align:center;top:5%;width:30%}.continue-modal .continue-modal-content.show{display:block;z-index:1010}.continue-modal .continue-modal-content.hide{display:none;height:0%;width:0%}.continue-modal .continue-modal-content .romper-continue-controls{align-items:center;display:flex;flex-direction:row;justify-content:center}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control{align-items:center;display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;justify-content:center;margin:0 1em}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button{background-color:rgba(0,0,0,0);background-image:url(images/reload.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button{background-color:rgba(0,0,0,0);background-image:url(images/media-play.svg);background-position:center;background-repeat:no-repeat;background-size:contain;height:100%;margin-left:auto;margin-right:auto;width:100%}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button{background-color:rgba(0,0,0,0);border:0;height:25px;margin:5px 0 0;outline:none;padding:4px;vertical-align:top;width:25px;background-size:80%;border:1px solid #fff;border-radius:50%;height:unset;margin:0;padding:100% 0 0;width:100%}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button:hover,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button:focus,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button:hover,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button:focus{background-color:#c3002a;filter:invert(100%)}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button.romper-button-selected,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button.romper-button-selected{border-bottom:4px solid #3cffd5;padding-bottom:0}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button:hover,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-resume-button:focus,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button:hover,.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .romper-restart-button:focus{background-color:#c3002a}.continue-modal .continue-modal-content .romper-continue-controls .romper-continue-control .button-label{color:#fff}.continue-modal.show{display:block;z-index:1010}.continue-modal.hide{display:none;height:0%;width:0%}@media (min-width: 1281px){.romper-player>.romper-gui>.romper-buttons{width:100%}}@media (min-width: 1025px) and (max-width: 1280px){.romper-player>.romper-gui>.romper-buttons{width:100%}}@media (min-width: 768px) and (max-width: 1024px){.romper-player>.romper-gui>.romper-buttons{width:100%}.romper-behaviour-modal>div{font-size:80%}.romper-link-text-icon{font-size:120%}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){.romper-player>.romper-gui>.romper-buttons{width:100%}.romper-behaviour-modal>div{font-size:80%}}@media (min-width: 320px) and (orientation: portrait){.ios-fullscreen-container{left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.ios-target-fullscreen{background-color:#000;right:0;width:100vw;z-index:1}.ios-target-fullscreen .romper-buttons{width:100%}.ios-target-fullscreen .romper-media-transport{height:80px }}@media (min-width: 320px) and (orientation: landscape){.ios-target-fullscreen{background-color:#000;bottom:0;height:100vh;left:0;position:fixed;right:0;top:0;width:100vw;z-index:1}.ios-target-fullscreen .romper-media-transport{height:80px }}@media (min-width: 320px) and (max-width: 500px), (max-height: 450px){.romper-behaviour-modal>div{font-size:80%}.romper-player>.romper-media.romper-prestart>.romper-privacy-notice{font-size:70%;height:75px}.romper-player>.romper-media.romper-prestart>.romper-privacy-notice>p{bottom:0;margin-bottom:3px;padding:0 2%}}@media (min-width: 320px) and (max-width: 767px), (max-height: 450px){.romper-scrub-bar{bottom:85px;font-size:100%;left:0;width:100%}.romper-link-text-icon{font-size:80%}.romper-text-link-container{height:6em}.romper-behaviour-modal>div{font-size:65%}.romper-variable-panel{font-size:80%}.romper-var-form-button{max-height:15px}.romper-var-form-button-container>.var-count{line-height:20px}.romper-player>.romper-gui>.romper-buttons{padding-bottom:0;width:100%}.romper-player>.romper-gui>.romper-buttons .romper-button{margin:0}.romper-player>.romper-gui>.romper-buttons .romper-media-transport{height:40px;width:100%}.romper-player>.romper-gui>.romper-buttons .romper-media-transport>div{border:0}.romper-player>.romper-gui>.romper-buttons .romper-media-transport>.center{border-top:1px solid #fff;bottom:40px;height:40px;padding:10px 0 0;position:absolute;width:100%}.romper-player>.romper-gui>.romper-buttons .romper-media-transport>.center .romper-narrative-element-transport{justify-content:space-between;min-width:165px;width:50%}.romper-player>.romper-gui>.romper-buttons .romper-media-transport>.left,.romper-player>.romper-gui>.romper-buttons .romper-media-transport .right{padding-top:0}}.details-overlay{background-color:#000;color:#fff;display:flex;flex-direction:row;font-size:1em;left:0;overflow:scroll;position:absolute;top:2%;z-index:2000}.details-overlay .detail{padding-left:0.5em}.details-overlay .detail-input{background:#000;border:0;color:#fff}.ua-debug{height:200px;overflow:scroll}.webview-error{height:100%;text-align:center}.webview-error-div{-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);margin:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.screenreader-only{opacity:0;transform:translate(-10000px, -10000px)}
.controlsFadedOut .chapter-button{display:none}.controlsFadedOut .volume-button{opacity:0}.controlsFadedOut .romper-buttons-smp .romper-overlay{display:none}.controlsFadedOut .smp-volume{opacity:0;pointer-events:none}.controlsFadedIn .chapter-button{right:0;top:0}.controlsFadedIn .chapter-button.romper-inactive{opacity:0;pointer-events:none}.controlsFadedIn .volume-button{bottom:16px;left:8px}.controlsFadedIn .volume-button.romper-inactive{opacity:0;transition:opacity 0.4s ease-out}.controlsFadedIn .smp-volume{background-color:#000;bottom:0;height:147px;left:0;margin:0 14px 44px 0;opacity:1;padding:8px 8px 0;pointer-events:all;position:absolute;transition:opacity 0.4s ease-out;width:216px;z-index:172}.controlsFadedIn .smp-volume>.triangle{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #000;height:0;margin-left:8px;margin-top:23px;pointer-events:none;width:0}.controlsFadedIn .smp-volume>.audio-volume-box{height:36px;padding:7px 9px 15px 14px}.controlsFadedIn .smp-volume>.audio-volume-box:first-child{margin:0 0 8px}.controlsFadedIn .smp-volume>.audio-volume-box:last-child{margin:0 0 8px}.controlsFadedIn .smp-volume>.audio-volume-box .volume-label{color:#d8d8d8;display:inline-flex;font-family:'ReithSans';font-size:14px;font-stretch:normal;font-style:normal;font-weight:normal;padding-left:12px}.controlsFadedIn .smp-volume>.audio-volume-box.romper-disabled{opacity:0.5;pointer-events:none}.controlsFadedIn .smp-volume.romper-inactive{opacity:0;pointer-events:none}.controlsFadedIn .smp-volume .audio-slider{-webkit-appearance:none;background-color:rgba(0,0,0,0);height:13px;margin-top:5px;outline:none;width:160px}.controlsFadedIn .smp-volume .audio-slider::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:#fff;height:1px}.controlsFadedIn .smp-volume .audio-slider::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;border-radius:50%;height:12px;margin-top:-5px;width:12px}.controlsFadedIn .smp-volume .audio-slider::-moz-range-progress{background-color:#3cffd5}.controlsFadedIn .smp-volume .audio-slider::-moz-range-track{background-color:rgba(0,0,0,0)}.controlsFadedIn .smp-volume .audio-slider-label{color:#d8d8d8;font-family:'ReithSans';font-size:14px;font-stretch:normal;font-style:normal;font-weight:normal;height:18px;letter-spacing:normal;line-height:1.29;margin:0 74px 0 0}.controlsFadedIn .smp-volume.muted .audio-slider{pointer-events:none}.controlsFadedIn .smp-volume.muted .audio-slider::-webkit-slider-thumb{opacity:0.3}.controlsFadedIn .smp-volume.muted .audio-slider::-moz-range-thumb{opacity:0}.chapter-icon{left:0;margin:10px;top:0}.romper-player>.romper-gui>.romper-buttons-smp{bottom:0;display:flex;height:100%;opacity:0;padding-bottom:0;pointer-events:none;position:absolute;transition:all 1s ease;width:100%}.romper-player>.romper-gui>.romper-buttons-smp.show{opacity:1;pointer-events:all}.romper-player>.romper-gui>.romper-buttons-smp .romper-icon-label{display:none}.romper-player>.romper-gui>.romper-buttons-smp .romper-icon-overlay{bottom:unset;top:0}@media (max-width: 599px){.controlsFadedIn .volume-button{bottom:0;left:8px}.controlsFadedIn .smp-volume{height:135px;padding:5px 8px 0}.controlsFadedIn .smp-volume .triangle{margin-top:11px}}@media (min-width: 600px) and (max-width: 959px){.controlsFadedIn .volume-button{bottom:8px;left:8px}}@media (min-width: 1140ps){.volume-button{bottom:40px;left:82px}}
/*# sourceMappingURL=storyplayer.css.map*/