@import '@{clear}';
@import 'backgroundanimation.n2less';

(~'div@{id}') {
  width: @width;
  float: left;

  html[dir="rtl"] & {
    float: right;
  }

  .n2-ss-slider-1 {
    position: relative;
    padding-top: @paddingt;
    padding-right: @paddingr;
    padding-bottom: @paddingb;
    padding-left: @paddingl;
    height: @inner1height;
    border-style: solid;
    border-width: @border;
    border-color: @borderhex;
    border-color: @borderrgba;

    border-radius: @borderRadius;
    background-clip: padding-box;

    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: @backgroundSize;
    background-attachment: @backgroundAttachment;
  }

  .n2-ss-slider-background-video-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .n2-ss-slider-background-video {

  }

  .n2-ss-slider-2 {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .x-firefox & .n2-ss-slider-2 {
    opacity: 0.99999;
  }

  .n2-ss-slider-3 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 1px solid rgba(0, 0, 0, 0);
    z-index: 10;
  }

  .n2-ss-slide-backgrounds,
  .n2-ss-slider-3 > .n-particles-js-canvas-el,
  .n2-ss-slider-3 > .n2-ss-divider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .n2-ss-slide-backgrounds {
    z-index: 10;
  }

  .n2-ss-slider-3 > .n-particles-js-canvas-el {
    z-index: 12;
  }

  .n2-ss-slide-backgrounds > * {
    overflow: hidden;
  }

  .n2-ss-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: block;
    -webkit-backface-visibility: hidden;
  }

  .n2-ss-layers-container {
    position: relative;
    width: @canvaswidth;
    height: @canvasheight;
  }

  .n2-ss-parallax-clip > .n2-ss-layers-container {
    position: absolute;
    right: 0;
  }

  .n2-ss-slide-active {
    z-index: 21;
  }
}
