/* separator between thumbnail list and preview picture */
body.thumbnailListView #fullscreen-toolbar-header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 5rem;
  width: 0.2rem;
  background: url("images/ui/tablet_section_divider.png") no-repeat left;
}

/* prevent user click on the preview in select mode */
body.thumbnailSelectView #fullscreen-view {
  pointer-events: none;
}

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

footer {
  background: rgba(28, 33, 36, 0.9);
  height: 6rem;
}

/* Frames */
#frames {
  top: 5rem;
  height: calc(100% - 5rem);
  background-color: #1c2124;
}

.frame {
  top: 0.2rem;
  left: 0.2rem;
  height: calc(100% - 0.4rem);
  width: calc(100% - 0.4rem);
}

body.fullscreenView #frames {
  height: 100%;
}

body.fullscreenView #frames .frame {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

body.fullscreenView #fullscreen-view.toolbar-hidden #fullscreen-toolbar-header {
  transform: translateY(-5rem);
}

/* player_mask for player footer */
body.thumbnailListView #fullscreen-view.toolbar-hidden:after {
  content: '';
  background: url("images/player_mask.png") repeat-x center center / 0.1rem;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  pointer-events: none;
}
body.thumbnailListView #frames:before {
  content: '';
  background: url("images/ui/pane_divider.png") no-repeat center center / 0.2rem;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0.2rem;
  pointer-events: none;
}

body.fullscreenView .videoPlayerFooter {
  background: url("images/player_mask.png") repeat-x center center / 0.1rem;
}

/* Thumbnails */
body.thumbnailListView #thumbnails {
  top: 5rem;
}

#thumbnails.offscreen {
  top: 5rem;
  visibility: visible;
}

/* Header in default thumbnail list appears in tablets only */
body.thumbnailListView #thumbnail-list-top {
  display: block !important;
}

#thumbnails.list {
  top: 5rem;
  bottom: 0;
}

.thumbnail.selected {
  outline: 0.2rem solid #0AC;
  box-shadow: 0 0 0 4px rgb(0, 202, 242) inset;
}

/* Fullscreen */
body.fullscreenView #fullscreen-toolbar-header > menu {
  display: block;
}

#fullscreen-back-button-large {
  display: none;
}

/* back button only shows in fullscreen */
body.fullscreenView #fullscreen-back-button-large {
  display: block;
}

#fullscreen-toolbar {
  display: none;
}

#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
  transform: translate(0, 6rem);
}

#fullscreen-camera-button-large > .icon-camera {
  background-image: image-set(url("images/iconaction_camera_30x30.png") 1x, url("images/iconaction_camera_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_30x30@2x.png") 2x, url("images/iconaction_camera_30x30@2.25x.png") 2.25x);
}

#fullscreen-edit-button-large > .icon-picedit {
  background-image: image-set(url("images/iconaction_camera_editphoto_30x30.png") 1x, url("images/iconaction_camera_editphoto_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_editphoto_30x30@2x.png") 2x, url("images/iconaction_camera_editphoto_30x30@2.25x.png") 2.25x);
}

#fullscreen-share-button-large > .icon-share {
  background-image: image-set(url("images/iconaction_share_30x30.png") 1x, url("images/iconaction_share_30x30@1.5x.png") 1.5x, url("images/iconaction_share_30x30@2x.png") 2x, url("images/iconaction_share_30x30@2.25x.png") 2.25x);
}

#fullscreen-info-button-large > .icon-info {
  background-image: image-set(url("images/iconaction_media_info_30x30.png") 1x, url("images/iconaction_media_info_30x30@1.5x.png") 1.5x, url("images/iconaction_media_info_30x30@2x.png") 2x, url("images/iconaction_media_info_30x30@2.25x.png") 2.25x);
}

#fullscreen-delete-button-large > .icon-delete {
  background-image: image-set(url("images/iconaction_delete_30x30.png") 1x, url("images/iconaction_delete_30x30@1.5x.png") 1.5x, url("images/iconaction_delete_30x30@2x.png") 2x, url("images/iconaction_delete_30x30@2.25x.png") 2.25x);
}

#fullscreen-view a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Edit */
#save-progress {
  position: absolute;
  top: 5rem;
  z-index: 10;
}

#edit-preview-area {
  background-color: #1c2124;
  /* 100% - header 5rem
   *      - margin between edit options and edit button 0.2rem
   *      - edit button 6rem
   *      - edit option 14.4rem
   */
  height: calc(100%  - 5rem - 0.2rem - 6rem - 14.4rem);
}

/* Edit - toolbar */
#edit-toolbar {
  height: 6rem;
}

#edit-toolbar > .button {
  font-size: 1.8rem;
  line-height: 7rem;
}

#edit-toolbar a.selected.radio.button {
  outline: none;
  outline-offset: 0;
}

#edit-options {
  background: url("images/slider-bg.png") repeat-x scroll 0 0 #1c2124;
  bottom: 6.2rem;
  height: 14.4rem;
}

#edit-effect-options > a.radio.button {
  padding-top: 0;
}

#edit-effect-none:before,
#edit-border-none:before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  background: url("images/selection_mask_L.png") repeat-y scroll 0 0 transparent;
  height: 100%;
  width: 5rem;
}

#edit-border-thick-black:after,
#edit-effect-faded:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  background: url("images/selection_mask_R.png") repeat-y scroll 0 0 transparent;
  height: 100%;
  width: 5rem;
}

/* Edit - slider */
#exposure-slider {
  top: 7rem;
  height: 10rem;
  font-size: 1.8rem;
}

#sliderthumb {
  width: 5.4rem;
  top: -5.4rem;
  height: 8rem;
  left: calc(100% - 3rem);
  padding-top: 3.6rem;
  font-size: 1.8rem;
  text-align: center;
  background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
}

#sliderthumb.active {
  background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
}

#sliderbar {
  position: static;
  height: 1.9rem;
  background: none;
}

#sliderline {
  top: 0;
  background: white;
  height: 0.4rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

#sliderlabels {
  top: -1.5rem;
  height: auto;
}

.sliderlabel {
  height: 1rem;
  font-size: 1.8rem;
}

.sliderlabel:after {
  top: 1.5rem;
}

/*
 * It replaces 'save' text with image and also keep the press effect from
 * building block.
 */
#crop-done-button:after,
#edit-save-button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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;
}
#crop-done-button,
#edit-save-button {
  font-size: 0;
}

/* Edit - effect buttons */
#edit-exposure-button {
  background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-exposure-button.selected {
  background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

#edit-crop-button {
  background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-crop-button.selected {
  background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

#edit-effect-button {
  background: 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) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-effect-button.selected {
  background: 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) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

#edit-border-button {
  background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-border-button.selected {
  background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

#edit-enhance-button {
  background: image-set(url("images/actionicon_gallery_edit_enhance_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-enhance-button.on {
  background: image-set(url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
}

#edit-enhance-button.selected {
  background: image-set(url("images/actionicon_gallery_edit_enhance_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

#edit-enhance-button.selected.on {
  background: image-set(url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
}

/*
 * Dialog. Since delete dialog in select mode and loading dialog
 * are managed by gallery app itself, we need aditional style here.
 * We'll modify it until 934326 is landed.
 */
#overlay,
#confirm-dialog {
  background: rgb(51, 51, 51);
}

#overlay section,
#confirm-dialog section {
  position: absolute;
  padding: 1rem 6rem 0;
  left: calc((100% - 68rem) / 2);
  top: calc((100% - 53rem) / 2);
  width: 68rem;
  height: 46rem;
  box-shadow: 0 0 1rem #000;
  border: 0.1rem #000;
  font-size: 2rem;
  background-color: #333333;
}

#overlay > section > p {
  padding: 1rem 1rem 0;
  margin: 0;
}

#confirm-dialog > section > p {
  margin-top: 20rem;
}

#overlay > section > h1 {
  line-height: 6rem;
  margin: 1rem 0 0;
}

#overlay > menu,
#confirm-dialog > menu {
  position: absolute;
  left: calc((100% - 68rem) / 2);
  top: calc((100% - 53rem) / 2 + 46rem);
  width: 68rem;
  background: #2d2d2d;
  padding: 1.5rem 14rem;
  height: 7rem;
  bottom: 0;
  box-shadow: 0 0 1rem #000;
}

#overlay:after,
#confirm-dialog:after {
  content: '';
  position: absolute;
  width: 68rem;
  top: calc((100% - 53rem) / 2 + 45rem);
  left: calc((100% - 68rem) / 2);
  height: 1rem;
  background-color: #333;
}
/* video player */
body.fullscreenView .videoPlayerFullscreenButton,
body.thumbnailSelectView .videoPlayerFullscreenButton {
  display: none;
}

/* We don't want the controller of videoplayer hide in preview mode */
body.thumbnailListView #fullscreen-view.toolbar-hidden .videoPlayerFooter.hidden {
  display: block;
  opacity: 1;
}

/* XXX: Below css will move to building block til bug905065 is closed */

/*
 * 1. Introduced by bug 1059748
 * In bug 1019841 we introduced !important for .large-only styles to hide
 * tablet layout on phone devices, which will cause regression on tablet.
 * We have to use !important here to override styles from phone layout.
 */
#fullscreen-toolbar-header {
  display: block !important; /* 1 */
}

@media (min-width: 768px) and (min-height: 768px) {
  section[role="region"].skin-organic > header:first-child h1,
  .skin-organic section[role="region"] > header:first-child h1,
  section[role="region"].skin-dark > header:first-child,
  .skin-dark section[role="region"] > header:first-child {
    color: white;
  }

  section[role="region"] > header:first-child h1 {
    font-size: 2.4rem;
    line-height: 5rem;
    color: #fff;
    padding: 0 1rem 0 2rem;
  }

  section[role="region"] > header:first-child menu[type="toolbar"] a,
  section[role="region"] > header:first-child menu[type="toolbar"] button {
    width: 8.2rem;
  }

  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:after,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:after  {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 5rem;
    width: 8.2rem;
    background: url("images/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
  }

  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
  section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
  section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active,
  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
  section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
  section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active {
    background: url("images/ui/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
  }

  section[role="region"] > header:first-child > button,
  section[role="region"] > header:first-child > a {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: none;
    float: left;
    overflow: visible;
    margin: 0;
  }

  section[role="region"] > header:first-child > button:after,
  section[role="region"] > header:first-child > a:after {
    width: 5.2rem;
    height: 5rem;
  }

  section[role="region"] > header:first-child .icon {
    width: 5rem;
  }

  section[role="region"] > header:first-child .icon.icon-back,
  section[role="region"].skin-organic > header:first-child .icon.icon-back,
  .skin-organic section[role="region"] > header:first-child .icon.icon-back,
  section[role="region"].skin-dark > header:first-child .icon.icon-back,
  .skin-dark section[role="region"] > header:first-child .icon.icon-back {
    background-image: url("images/back.png");
  }

  section[role="region"] > header:first-child .icon.icon-close,
  section[role="region"].skin-organic > header:first-child .icon.icon-close,
  .skin-organic section[role="region"] > header:first-child .icon.icon-close,
  section[role="region"].skin-dark > header:first-child .icon.icon-close,
  .skin-dark section[role="region"] > header:first-child .icon.icon-close {
    background-image: url("images/actionicon_cancel.png");
  }

  section[role="region"].skin-dark  > header:first-child,
  .skin-dark  section[role="region"] > header:first-child,
  section[role="region"].skin-organic > header:first-child,
  .skin-organic section[role="region"] > header:first-child {
    background: url("images/ui/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
  }

  section[role="region"].skin-dark > header:first-child a:after,
  .skin-dark section[role="region"] > header:first-child a:after,
  section[role="region"].skin-dark > header:first-child button:after,
  .skin-dark section[role="region"] > header:first-child button:after,
  section[role="region"].skin-organic > header:first-child a:after,
  .skin-organic section[role="region"] > header:first-child a:after,
  section[role="region"].skin-organic > header:first-child button:after,
  .skin-organic section[role="region"] > header:first-child button:after {
    background: url("images/ui/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
  }
}

section[role="region"] > header:first-child menu[type="toolbar"] a:after,
section[role="region"] > header:first-child menu[type="toolbar"] button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 5rem;
  width: 8.2rem;
  background: url("images/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
}

@media (orientation: landscape) {
  /* we have both thumbnail list and preview together when in landscape */
  body.thumbnailListView #fullscreen-view,
  body.thumbnailSelectView #fullscreen-view {
    display: block;
    width: calc(100% - 40rem);
    left: 40rem;
  }

  body.thumbnailListView #thumbnail-views,
  body.thumbnailSelectView #thumbnail-views {
    visibility: visible;
    width: 40rem;
  }

  /* outline the picture we're focusing on in preview mode */
  body.thumbnailListView .thumbnail.focus {
    outline: solid #00aacc 0.3rem;
    outline-offset: -0.2rem;
  }

  /* rewrite thumbnail's original size */
  .thumbnail {
    width: calc((100% - 0.4rem) / 3);
    padding: 0 0 calc((100% - 0.4rem) / 3);
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .thumbnail:nth-child(4n) {
    margin-right: 0.2rem;
  }

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

  /* we don't have preview screen when in picking */
  body.pickView #thumbnails {
    width: 100%;
  }

  body.pickView #thumbnails .thumbnail {
    width: calc((100% - 1rem) / 6);
    padding: 0 0 calc((100% - 1em) / 6);
    margin-bottom: 0.2rem;
  }

  body.pickView #thumbnails .thumbnail:nth-child(3n) {
    margin-right: 0.2rem;
  }

  body.pickView #thumbnails .thumbnail:nth-child(4n) {
    margin-right: 0.2rem;
  }

  body.pickView #thumbnails .thumbnail:nth-child(6n) {
    margin-right: 0;
  }

  /*
   * slider
   * We have 7 steps located from the center of sliderline
   */
  #sliderline {
    width: 90rem;
    left: calc(50% - 45rem);
  }

  #slider-3 {
    left: calc(50% - 45rem);
  }

  #slider-2 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) / 6);
  }

  #slider-1 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 2 / 6);
  }

  #slider0 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 3 / 6);
    color: #fff;
  }

  #slider1 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 4 / 6);
  }

  #slider2 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 5 / 6);
  }

  #slider3 {
    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)));
  }

  /* video player */
  body:not(.fullscreenView) .videoPlayerPauseButton {
    width: 9rem;
  }

  body:not(.fullscreenView) .videoPlayerSlider {
    left: 10rem;
  }

  body:not(.fullscreenView) .videoPlayerProgress {
    left: 7rem;
    right: 15rem;
  }

  body:not(.fullscreenView) .videoPlayerSlider .videoPlayerDurationText {
    text-align: center;
    right: 8rem;
    width: 5rem;
  }
}
@media (orientation: portrait) {
  .thumbnail:nth-child(3n) {
    margin-right: 0.2rem;
  }

  .thumbnail {
    width: calc((100% - 0.6rem) / 4);
    padding: 0 0 calc((100% - 0.6rem) / 4);
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .thumbnail:nth-child(4n) {
    margin-right: 0;
  }

  /* slider */
  #sliderline {
    width: 60rem;
    left: calc(50% - 30rem);
  }

  #slider-3 {
    left: calc(50% - 30rem);
  }

  #slider-2 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) / 6);
  }

  #slider-1 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 2 / 6);
  }

  #slider0 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 3 / 6);
    color: #fff;
  }

  #slider1 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 4 / 6);
  }

  #slider2 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 5 / 6);
  }

  #slider3 {
    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)));
  }
}