@import "base";

@include font-face("Fontello", font-files('fontello.eot', 'fontello.woff','fontello.ttf','fontello.svg') ) ;

$loaderBG: #FFFFFF;
$loaderGif: 'f-loader.gif';

.ss-oh {
  margin:0 auto;
  @include holder( relative );
  @include user-select(none);
  &.init {
    height:auto;
    overflow:hidden;
    &:before {
      content:'';
      display:block;
      position:relative;
      left:0;
      top:0;
      width:100%;
      height:100%;
      min-height:200px;
      background: {
        color: $loaderBG;
        image: image-url( '#{$loaderGif}' );
        repeat: no-repeat;
        position: center center;
      };
      z-index:999;
    }
    & * {
      opacity:0;
    }
  }
}
.ss-ih,
.ss-iw {
  @include holder( relative );
  @include user-select(none);
  @include transition-duration(inherit);
}
.ss-slide {
  @include holder( absolute );
  top:0;
  left:0;
  &.in,
  &.out {
    @include transition-duration(inherit);
  }
  > .img {
    @include image( 2 );
    background-position: center center;
    @include background-size(cover);
  }
  > img {
    @include image( 1 );
  }
}

.ss-ih {
  & .nav-bullet-holder {
    position:absolute;
    bottom:10px;
    width:100%;
    text-align:center;
    z-index: 2;
    & > .nav-bullet {
      display:inline-block;
      opacity:0.6;
      cursor:pointer;
      overflow:hidden;
      @include single-transition( opacity,300ms,ease-in-out );
      &.active,
      &:hover {
        opacity:1;
        @include single-transition( opacity,300ms,ease-in-out );
      }
    }
  }
  & .nav-arrow {
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0.6;
    @include single-transition( opacity,300ms,ease-in-out );
    &:hover {
      opacity:1;
      @include single-transition( opacity,300ms,ease-in-out );
    }
    &.l {
      left:0;
    }
    &.r {
      right:0;
    }
  }
  & .font-icon {
    position: relative;
    display:inline-block;
    top: 50%;
    @include transform( translateY(-50%) );
    font-family: 'Fontello','Sylfaen',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:inherit;
    line-height:inherit;
  }
}

@import "transitions/default";
@import "transitions/carousel";
@import "transitions/scaleout";
@import "transitions/scalein";