@import "../../../TOKENS";


$transition-property: transform,left,opacity, visibility;
$transition-duration: 0.3s;
$transition-timing: ease-out;



.videogallery.mode-rotator3d .main-navigation .navMain{
  border:0;
}
.videogallery.mode-rotator3d .rotator3d-item{

}
.videogallery.mode-rotator3d .rotator3d-item.currItem.is_fullscreen{
  position: fixed;
  top:0%!important;
  left:0%!important;
  width:100%!important;
  height: 100%;
}


.videogallery.mode-rotator3d {

  background-color: transparent;

  $transition-property: transform,left,opacity, visibility;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  .gallery-buttons{
    display: none;
  }

  .rotator3d-item {


    top:10%!important;
    left:25%!important;
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin:0% 50%;
    -webkit-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    opacity:0;
    visibility: hidden;
    z-index: 25;
    position: absolute;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    height: 80%!important;


    $transition-property: opacity,visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    .previewImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      opacity: 1;
      visibility: visible;
      cursor: pointer;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }


    div.previewImg {
      background-size: cover;
      background-position: center center ;
    }

    .vp-inner{
      background-color: #444444;
    }
  }


  .rotator3d-item{
    &.prevItem:not(.a), &.nextItem:not(.a), &.currItem{

      top:10%!important;
      transform: scale(0.5);
      transform-style: preserve-3d;
      opacity:1;
      visibility: visible;
    }
  }
  .rotator3d-item.prevItem{
    left:5%!important;
    z-index: 28;
  }

  .rotator3d-item.nextItem{
    left:65%!important;
    z-index: 29;
  }

  .rotator3d-item.currItem{
    left:25%!important;
    position: absolute!important;
    transform: scale(1);
    z-index: 30;
  }
  .rotator3d-item.hide-preview-img{

    .previewImg{
      opacity:0;
      visibility: hidden;
    }
  }
}
@media (max-width: 480px) {
  .videogallery.mode-rotator3d {

  }
}