VulpesOS/overrides/gallery.gaiamobile.org/style/gallery.css

* { -moz-box-sizing: border-box;
  /**
    By default do not allow any user text selection, only enable
    for certain parts on a per-element/region area
  */
    -moz-user-select: none;
}

html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 10px;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1rem;
  background-color: #0E1214;
  overflow: hidden;
}

section {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 1.4rem;
}

.large-only {
  display: none !important;
}

.hidden {
  display: none;
}

/* hide sections from screen reader when modal dialogs are showing */
body.showing-dialog > section {
  visibility: hidden;
}

/* All of the main views fill the screen */
#fullscreen-view, #edit-view, #crop-view, #thumbnail-views {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 2.1rem;
  /* display will be determined by LAYOUT_MODE */
  display: none;
}

/* Hide unresolved gaia-header elements */
gaia-header:unresolved {
  visibility:hidden;
}

#thumbnail-views > gaia-header {
  position: absolute;
  width: 100%;
  top: 0;
}

/* Bug 1111735 - !important is needed because of the shadow CSS polyfill */
.thumbnails-list, .thumbnails-select, .thumbnails-pick {
  /* display will be determined by LAYOUT_MODE */
  display: none !important;
}

body.thumbnailListView .thumbnails-list,
body.thumbnailSelectView .thumbnails-select,
body.pickView .thumbnails-pick {
  display: block !important;
}

body.thumbnailListView #thumbnail-views,
body.thumbnailSelectView #thumbnail-views,
body.pickView #thumbnail-views,
body.fullscreenView #fullscreen-view,
body.editView #edit-view,
body.cropView #crop-view {
  display: block;
}

/* Header in default thumbnail list in tablets only, see gallery_tablet.css */
body.thumbnailListView #thumbnails-list-top {
  display: none !important;
}

/*
 * The overlay content area holds the text of the overlay.
 * It has borders and a less transparent background so that
 * the overlay text shows up more clearly
 */
#overlay-content {
  background:
  image-set(url("images/ui/pattern.png") 1x, url("images/ui/pattern@1.5x.png") 1.5x, url("images/ui/pattern@2x.png") 2x, url("images/ui/pattern@2.25x.png") 2.25x) repeat left top,
  image-set(url("images/ui/gradient.png") 1x, url("images/ui/gradient@1.5x.png") 1.5x, url("images/ui/gradient@2x.png") 2x, url("images/ui/gradient@2.25x.png") 2.25x) no-repeat left top;
  background-size: auto auto, 100% 100%;
  /* We can't use shortand with background size because is not implemented yet:
  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
  created by white-spaces and break lines in the code betewen inline-block elements */
  color: #fff;
  padding: 11rem 2.5rem 0 2.5rem;
}

#overlay-title {
  font-weight: normal;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0.5rem 0 0.5rem;
  padding: 0;
}

#overlay-text {
  padding: 1rem 0.5rem 0 0.5rem;
  border-top: 0.1rem solid #686868;
  font-weight: 300;
  font-size: 2.5rem;
  color: #ebebeb;
}

#overlay-menu {
  z-index: 1;
}

/* For overriding the style from BB */
#overlay-menu.hidden {
  display: none;
}

#overlay-menu button.hidden {
  display: none;
}

#overlay-menu button.full {
  margin: 0;
}

/*
 * Thumbnails are implemented as <li> elements in a <ul> with background-image
 * set to display the image. We use background-size: cover to automatically
 * resize the image as needed.
 */

#thumbnails {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
  /* top and bottom are set depending on view below */
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  /*
   * the body background is black, but remind the UA of that here to
   * keep the thumbnail view opaque if possible.
   */
  background-color: #0E1214;
  will-change: scroll-position;
  /*
   * set it visible/hidden by LAYOUT_MODE
   */
  visibility: hidden;
  pointer-events: none;
}

/*
 * The thumbnail list appears in regular browsing mode, in selection mode,
 * and in pick mode.
 */
body.thumbnailSelectView #thumbnails,
body.pickView #thumbnails,
body.thumbnailListView #thumbnails {
  visibility: visible;
  pointer-events: auto;
  bottom: 0;
}

body.thumbnailSelectView #thumbnails,
body.pickView #thumbnails {
  top: 5rem;
}

/*
 * Give the very last thumbnail a large bottom margin so that it doesn't
 * hide behind the overlaid toolbar in thumbnail list and select view.
 */
body.thumbnailSelectView #thumbnails > li:last-child .thumbnail:last-child,
body.thumbnailListView #thumbnails > li:last-child .thumbnail:last-child {
  margin-bottom: 4.5rem;
}

.thumbnail-group-header {
  font-size: 1.6rem;
  font-weight: 400;
  color: #8a9699;
  -moz-padding-start: 0.5rem;
  height: 4rem;
  line-height: 4rem;
  width:100%;
  float:left;
}

/* Bug 968311 - Keep Gallery in scrollable
 * background color. Need in all four
 * containers below.
 */
#thumbnails > li,
#thumbnails > li > ul,
.thumbnail-group-header,
.thumbnail-group-container {
  background-color: #0E1214;
}

.thumbnail-group-container {
  padding: 0;
}

#thumbnails>li {
  /* no list item bullets */
  list-style-type: none;
}

#thumbnails>li:first-child .thumbnail-group-header {
  border-top: 0.1rem solid;
  border-color:rgba(255,255,255, 0.1);
}

.thumbnail {
  -moz-margin-end: 0.1rem;
  margin-bottom: 0.1rem;
  padding: 0;
  /* default to left-to-right, but overridden for rtl languages below */
  float: left;
  /* don't let the user select the items */
  -moz-user-select: none;
  background-color: #444;

  /*
   * Here's the thumbnail size for portrait mode. We have 3 thumbnails
   * for each row. The size for landscape mode is handled below by
   * media query.
   * Padding-bottom is used here in order to set div height with respect
   * to device width.
   */
  width: calc((100% - 0.2rem) / 3 );
  height: 0;
  padding-bottom: calc((100% - 0.2rem) / 3 );
  outline: none;
}

.thumbnail:nth-child(3n) {
  -moz-margin-end: 0;
}

.thumbnailImage{
  width: 100%;
}

.thumbnailImage.selected {
  outline: solid #00aacc 0.3rem;
  outline-offset: -0.2rem;
}

/* RTL modifications */
html[dir=rtl] #thumbnails-number-selected {
  direction: rtl;
}

@media (orientation: landscape) {
  /* 4 thumbnails for each row in landscape mode. */
  .thumbnail {
    width: calc((100% - 0.3rem) / 4);
    padding-bottom: calc((100%  - 0.3rem) / 4);
  }
  .thumbnail:nth-child(3n) {
    -moz-margin-end: 0.1rem;
  }
  .thumbnail:nth-child(4n) {
    -moz-margin-end: 0;
  }
}

#fullscreen-back-button-tiny {
  /*
    these particular sizes, positions, and colors are chosen
    to line up with the focus mode button of the camera app
  */
  position: absolute;
  top: 2rem;
  left: 1.4rem;
  width: 5rem;
  height: 5rem;
  font-size: 0;
  border-radius: 50%;
  border: none;
  background: rgba(95, 95, 95, 0.3);
  color: inherit;
  transition: opacity 0.2s linear;
  z-index: 10;
}

/**
 * 1. Make sure icon is aligned inside circle
 */

#fullscreen-back-button-tiny:before {
  margin-left: -0.3rem; /* 1 */
}

#fullscreen-back-button-tiny:active {
  background-color: #008eab;
}

#frames {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  -moz-user-select: none;
  will-change: scroll-position;
}

.frame > .image-view {
  top: 0;  /* javascript modifies this position with a transform */
  left: 0;
  position: absolute;
  border-width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  -moz-user-select: none;
  transition: opacity 100ms ease-in;
}

.frame > video {
  transform-origin: 0 0;
}

/* localization */
body.hidden *[data-l10n-id] {
  visibility: hidden;
}

*[dir=rtl] .thumbnail {
  float: right;
}

/* the indeterminate progress bar displayed while scanning */
#throbber {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.3rem;
  border: none;
  overflow: hidden;
  background-size: 1rem;
  background-image: repeating-linear-gradient(135deg,
                                              #000 0%,  #000 42%,
                                              #32D1F2 42%, #32D1F2 57%,
                                              #000 57%, #000 100%);
  z-index: 10; /* has to be higher than pick-top */
}

#throbber.throb {
  animation: throb 1s steps(10) infinite;
}

@keyframes throb {
  from { background-position: 0 0; }
  to   { background-position: -1rem 0; }
}

#spinner {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1.5rem);
  z-index: 1000;
}

/* override progress_activity.css */
#spinner.hidden {
  display: none;
}

/* buttons */
a.button {
  display: block;
  padding: 0;
  margin: 0;
  border-width: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;

  /* for buttons that display text */
  font-size: 1.4rem;
  text-align: center;
  line-height: 4.5rem;
}

a.button:active, a.button:focus {
  outline: none;
}

a.button.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.icon.icon-done {
  background: image-set(url("images/iconaction_done_30x30.png") 1x, url("images/iconaction_done_30x30@1.5x.png") 1.5x, url("images/iconaction_done_30x30@2x.png") 2x, url("images/iconaction_done_30x30@2.25x.png") 2.25x) no-repeat center center / 3rem !important;
}

footer {
  background: rgba(0, 0, 0, 0.75);
  height: 4.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
}

.icon.icon-done {
  background-image: image-set(url("images/iconaction_done_30x30.png") 1x, url("images/iconaction_done_30x30@1.5x.png") 1.5x, url("images/iconaction_done_30x30@2x.png") 2x, url("images/iconaction_done_30x30@2.25x.png") 2.25x) !important;
}

#thumbnails-camera-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  border-right: 0.1rem solid #000;
}

#thumbnails-select-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

#thumbnails-delete-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  border-right: 0.1rem solid #000;
}

#thumbnails-share-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

#fullscreen-toolbar {
  height: 4.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0;
  visibility: visible;
  direction: ltr; /* buttons in toolbar are not directional and stays LTR */

  /**
    Bug 991367 - This is a temporary workaround for an issue where
    the `tap` event on the video player "Pause" button causes a
    `click` event to bleed through to the "Camera" button on the
    toolbar. To get around this issue, we add 0.1s delay before
    restoring the toolbar from hidden state and transition the
    `visibility` property as well.
   */
  transition: visibility 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}

/* only for large screen */
#fullscreen-toolbar-header {
  display: none;
}

#fullscreen-toolbar-header > menu {
  display: none;
}

#fullscreen-toolbar > a {
  display: inline-block;
  width: 20%;
  height: 100%;
}

#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
  pointer-events: none;
  visibility: hidden;
  transform: translate(0, 4.5rem);
  transition-delay: 0s;
}

#fullscreen-view.toolbar-hidden #fullscreen-back-button-tiny {
  opacity: 0;
  pointer-events: none;
}

#pick-header {
  /*
   * we want the user to be able to push the close button even if
   * an overlay is displayed, so be sure that this titlebar/toolbar
   * is above the overlay
   */
  z-index: 2;
}

/* like .frame */
#crop-frame {
  position: absolute;
  top: 5rem;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  -moz-user-select: none;
}

#crop-image {
  top: 0;  /* javascript modifies this position with a transform */
  left: 0;
  position: relative;
  border-width: 0;
  padding: 0;
  margin: 0;
  transform-origin: 0 0;
  pointer-events: none;
  -moz-user-select: none;
}

#edit-preview-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 5rem;
  bottom: 4.5rem; /* 4.5rem for edit-toolbar */
}

#edit-preview-canvas {
  position: absolute;
  top: 1.5rem;
  left: 2.5rem;
  width: calc(100% - 5rem);  /* I can't do right: 2.5rem here. Bug? */
  height: calc(100% - 3rem);  /* can't just set bottom: 1.5rem here */
}

#edit-crop-canvas {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#edit-options {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5rem;
  bottom: 0;
  background: image-set(url("images/options-background.png") 1x, url("images/options-background@1.5x.png") 1.5x, url("images/options-background@2x.png") 2x, url("images/options-background@2.25x.png") 2.25x);
}

/* The progress has higer selectivity css in progress.css to control display.
 * The hidden attribute in progress is not working in this case. We need to use
 * css to override it. */
#save-progress.hidden {
  display: none;
}

/* All the effect options radio buttons share these styles */
#edit-effect-options a.radio.button {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-right: solid black 0.1rem;
  overflow: hidden;
}

#edit-effect-options a.selected.radio.button {
  outline: solid #00aacc 0.2rem;
  outline-offset: -0.2rem;
}

#edit-crop-options a.button {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  width: 20%;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-right: solid black 0.1rem;
  overflow: hidden;
  font-size: 1.4rem;
  background-position: center;
}

#edit-crop-options a.selected.radio.button {
  outline: solid #00aacc 0.2rem;
  outline-offset: -0.2rem;
}

#edit-crop-aspect-free {
  left: 0;
  background-image: image-set(url("images/iconaction_camera_freecrop_30x30.png") 1x, url("images/iconaction_camera_freecrop_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_freecrop_30x30@2x.png") 2x, url("images/iconaction_camera_freecrop_30x30@2.25x.png") 2.25x);
}
#edit-crop-aspect-portrait {
  left: 20%;
  background-image: image-set(url("images/iconaction_camera_crop2x3_30x30.png") 1x, url("images/iconaction_camera_crop2x3_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop2x3_30x30@2x.png") 2x, url("images/iconaction_camera_crop2x3_30x30@2.25x.png") 2.25x);
}
#edit-crop-aspect-landscape {
  left: 40%;
  background-image: image-set(url("images/iconaction_camera_crop3x2_30x30.png") 1x, url("images/iconaction_camera_crop3x2_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop3x2_30x30@2x.png") 2x, url("images/iconaction_camera_crop3x2_30x30@2.25x.png") 2.25x);
}
#edit-crop-aspect-square {
  left: 60%;
  background-image: image-set(url("images/iconaction_camera_crop1x1_30x30.png") 1x, url("images/iconaction_camera_crop1x1_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop1x1_30x30@2x.png") 2x, url("images/iconaction_camera_crop1x1_30x30@2.25x.png") 2.25x);
}

#edit-crop-aspect-more {
  left: 80%;
}

/* instead of using images inside the buttons above, just draw boxes */
#edit-free-frame {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  width: 3rem;
  height: 2.5rem;
  border: dotted white 0.1rem;
}

#edit-portrait-frame {
  margin-left: 1.1rem;
  margin-top: 0.6rem;
  width: 2.6rem;
  height: 3.9rem;
  border: solid white 0.1rem;
}

#edit-landscape-frame {
  margin-left: 0.5rem;
  margin-top: 1.2rem;
  width: 3.9rem;
  height: 2.6rem;
  border: solid white 0.1rem;
}

#edit-square-frame {
  margin-left: 0.8rem;
  margin-top: 0.9rem;
  width: 3.2rem;
  height: 3.2rem;
  border: solid white 0.1rem;
}

/* All the effects radio buttons share these styles */
#edit-effect-options > a.radio.button {
  width: 20%;
  padding-top: 1.5rem;
}

#edit-effect-none {
  left:0;
}
#edit-effect-bw {
  left:20%
}
#edit-effect-sepia {
  left:40%
}
#edit-effect-bluesteel {
  left:60%
}
#edit-effect-faded {
  left:80%
}
a.filter-bw {
  filter: url(../index.html#filter-bw);
}
a.filter-sepia {
  filter: url(../index.html#filter-sepia);
}
a.filter-bluesteel {
  filter: url(../index.html#filter-bluesteel);
}
a.filter-faded {
  filter: url(../index.html#filter-faded);
}

#edit-toolbar {
  height: 4.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0;
  transition: transform 0.2s linear;
  direction: ltr; /* buttons in toolbar are not directional and stays LTR */
}

/* all buttons in the toolbar share these styles */
#edit-toolbar > a {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  height: 100%;
}

#edit-toolbar > a.selected {
  color: #00CAF2;
}

#edit-exposure-button {
  left: 0;
}

#edit-crop-button {
  left: 20%;
}

#edit-effect-button {
  left: 40%;
}

#edit-border-button {
  left: 60%;
}

#edit-enhance-button {
  left: 80%;
}

/* Override the styles from shared/styles/status.css */
#edit-copy-save-banner.banner, #edit-enhance-banner.banner {
  position: absolute;
  left: 0;
  bottom: 4.5rem;
  background-color: #0E1214;
}

#edit-copy-save-banner > p, #edit-enhance-banner > p {
  text-align: center;
}

#edit-effect-button {
  background-image: image-set(url("images/actionicon_gallery_edit_effects_30x30.png") 1x, url("images/actionicon_gallery_edit_effects_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_effects_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_effects_30x30@2.25x.png") 2.25x);
}

#edit-border-button {
  background-image: url('images/actionicon_gallery_edit_borders_30x30.png');
}

#edit-enhance-button {
  background-image: image-set(url("images/actionicon_gallery_edit_enhance_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_30x30@2.25x.png") 2.25x);
}

#edit-enhance-button.on {
  background-image: image-set(url("images/actionicon_gallery_edit_enhance_on_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_30x30@2.25x.png") 2.25x);
}

/*
 * All of these slider styles are for the exposure compensation slider
 * If this app ever needs another slider, we'll have lots of name
 * collisions.  Ideally, this slider stuff should all be packaged up
 * into a reusable component. But this is one-off for now
 */
#exposure-slider {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5rem;
  font-size: 1.4rem;
}

#sliderbar {
  position: relative;
  height: 2.6rem;
  padding: 0;
  margin: 0;
  background: image-set(url("images/slider-background.png") 1x, url("images/slider-background@1.5x.png") 1.5x, url("images/slider-background@2x.png") 2x, url("images/slider-background@2.25x.png") 2.25x);
}

#sliderline {
  position: absolute;
  height: 0.5rem;
  top: 1rem;
  left: 3.5rem;
  right: 3.5rem;
  margin: 0;
  border-radius: 3px;
  background: image-set(url("images/slider-line.png") 1x, url("images/slider-line@1.5x.png") 1.5x, url("images/slider-line@2x.png") 2x, url("images/slider-line@2.25x.png") 2.25x) repeat-x;
  border: none;
}

#sliderthumb {
  position: absolute;
  width: 3.6rem;
  height: 2.6rem;
  -moz-margin-start: calc(3.9rem - 1.8rem);
  background: image-set(url("images/slider-scrubber.png") 1x, url("images/slider-scrubber@1.5x.png") 1.5x, url("images/slider-scrubber@2x.png") 2x, url("images/slider-scrubber@2.25x.png") 2.25x) no-repeat center center / 100%;
  font: 0/0 a;
}

#sliderthumb.active {
  background-image: image-set(url("images/slider-scrubber-active.png") 1x, url("images/slider-scrubber-active@1.5x.png") 1.5x, url("images/slider-scrubber-active@2x.png") 2x, url("images/slider-scrubber-active@2.25x.png") 2.25x);
}

#sliderlabels {
  position: relative;
  height: 3rem;
  padding: 0;
  margin: 0;
  color: white;
}

.sliderlabel {
  position: absolute;
  top: -0.2rem;
  height: 0.8rem;
  background: image-set(url("images/slider-marker.png") 1x, url("images/slider-marker@1.5x.png") 1.5x, url("images/slider-marker@2x.png") 2x, url("images/slider-marker@2.25x.png") 2.25x) no-repeat top left;
  color: #8a9699;
  font-size: 1.5rem;
}

html[dir="rtl"] .sliderlabel {
  background: image-set(url("images/slider-marker.png") 1x, url("images/slider-marker@1.5x.png") 1.5x, url("images/slider-marker@2x.png") 2x, url("images/slider-marker@2.25x.png") 2.25x) no-repeat top right;
}

.sliderlabel:after {
  content: attr(data-label);
  position: relative;
  text-align: center;
  top: 0.9rem;
  width: 1rem;
  margin: 0 calc(-50% + 0.1rem);

  /* Slider labels are numbers */
  direction: ltr;
  unicode-bidi: -moz-isolate;
}

#slider-3 {
  -moz-margin-start: 3.9rem;
}
#slider-2 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) / 6);
}
#slider-1 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 2 / 6);
}
#slider0 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 3 / 6);
  color: #fff;
}
#slider1 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 4 / 6);
}
#slider2 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 5 / 6);
}
#slider3 {
  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem));
}