@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-ms-transition-property:$transition-property;
  -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;


}
@mixin boxsizing() {
-moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}
@mixin centerit() {
  position: absolute; top:50%;left:50%; transform: translate3d(-50%,-50%,0);
}



$color_highlight: #cb1919;




$transition-property: color;
$transition-duration: 0.3s;
$transition-timing: ease-in;

$animation_time: 0.3s;

//@include apply_transition($transition-property, $transition-duration, $transition-timing);


html.ultibox-opened{
  overflow: hidden;
}


.dzsulb-main-con{


  z-index: 5555;
  position: fixed;
  width: 100%;
  height: 100%;

  opacity: 0;
  visibility: hidden;

  top:0; left:0;


  $transition-property: opacity,visibility;
  $transition-duration: $animation_time;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);



  .overlay-background{
    background-color: rgba(50,50,50,0.5);

    position: absolute;
    width: 100%;
    height: 100%;


  }

  .dzsulb-preloader{

    opacity: 0;
    visibility: hidden;


    animation-delay: 3s;


    $transition-property: opacity,visibility;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .box-mains-con{

    position: absolute;
    width: 100%;
    height: 100%;

    top:0;
    left:0;

    pointer-events: none;
  }

  .box-main{

    pointer-events: auto;

    max-width: 100%;
    @include centerit();


    $transition-property: left,opacity;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    .close-btn-con{
      position: absolute;
      right: -15px;
      top:-15px;
      z-index: 5;

      cursor: pointer;


      width: 30px;
      height: 30px;
      &:before{
        content: "";

        position: absolute;
        top:8%; left:8%;
        width: 84%; height: 84%;

        background-color: rgba(200,200,200,0.95);
        border-radius: 50%;
      }
      svg{
        position: absolute;
        right: 0; top:0; width: 100%; height: 100%;

        path{
          fill: #444444;
        }
      }
    }

    &.gallery-transitioning-out{
      left:0;
      opacity: 0;
    }

    &.gallery-preparing-transitioning-in{
      left:100%;
      opacity: 0;
    }

    &.gallery-transitioning-in{
      left:50%;

      opacity: 1;
    }
  }
  .box-main-media-con{

    max-width: 100%;

    .box-main-media{



      $transition-property: width, height;
      $transition-duration: $animation_time;
      $transition-timing: ease-out;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);

      >.real-media{
        width: 100%;
        height: 100%;

      }

      &.type-audio{
        padding: 30px;
      }
      &.type-inlinecontent{

        .row-for-ultibox{

          padding: 15px 30px ;
          color: #444444;
        }
      }
    }
  }

  .box-main-under{


    background-color: #ffffff;
    padding: 10px 20px;

    color: #222222;

    >h3:first-child{
      margin-top: 0;
    }

    &:empty{
      display: none;
    }
  }

  .ultibox-gallery-arrow{
    position: absolute;
    left: 100%;

    margin-left: 15px;
    top:50%;


    $size: 45px;
    width: $size;
    height: $size;

    cursor: pointer;

    background-color: #eeeeee;
    border-radius: 50%;

    transform: translate3d(0%,-50%,0);

    >svg{

      @include centerit();

      $size: 20px;
      width: $size;
      height: $size;
      transform: translate3d(-50%,-50%,0) rotate(180deg);
    }
  }


  &:not(.has-gallery){
    .ultibox-gallery-arrow{
      display: none;
    }
  }

  .ultibox-gallery-arrow--left{
    left: auto;
    right: 100%;
    margin-left:0;
    margin-right: 15px;

    >svg{
      transform: translate3d(-50%,-50%,0) rotate(0deg);
    }
  }

  .box-main.scroll-mode{
    top:30px;
    transform: translate3d(-50%,0,0);
    max-height: 100%;



    $transition-property: top,left,opacity;
    $transition-duration: $animation_time;
    $transition-timing: ease-int;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }



  /* -- enabled from js */
  &.responsive-mode{

  }

  &.close-btn-inset {

    .close-btn-con {
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }

}

.dzsulb-main-con.gallery-direction-reverse{

  .box-main{

    &.gallery-transitioning-out{
      left:100%;
    }

    &.gallery-preparing-transitioning-in{
      left:0;
    }
    &.gallery-transitioning-in{
      left:50%;
    }

  }
}








.dzsulb-main-con.transition-fade{

  .transition-target{

    opacity: 0;
    visibility: hidden;


    $transition-property: opacity,visibility;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
}

.dzsulb-main-con.transition-fade.loaded-item{

  .transition-target{

    opacity: 1;
    visibility: visible;
  }
}

.dzsulb-main-con.transition-scaleup{

  .transition-target{

    opacity: 0;
    visibility: hidden;

    transform: scale(0);


    $transition-property: all;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
}

.dzsulb-main-con.transition-scaleup.loaded-item,.dzsulb-main-con.transition-scaledown.loaded-item{

  .transition-target{

    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

.dzsulb-main-con.transition-scaledown{

  .transition-target{

    opacity: 0;
    visibility: hidden;

    transform: scale(1.3);


    $transition-property: all;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
}

.dzsulb-main-con.transition-slideup{

  .transition-target{

    opacity: 0;
    visibility: hidden;

    transform: translate3d(0,50px,0);


    $transition-property: all;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
}

.dzsulb-main-con.transition-slideup.loaded-item{

  .transition-target{

    opacity: 1;
    visibility: visible;
    transform: translate3d(0,0,0);
  }

}

.ultibox-item,.ultibox-item-delegated{
  cursor: pointer;
}




.dzsulb-main-con.loading-item{

  opacity: 1;
  visibility: visible;



  .dzsulb-preloader{

    opacity: 1;
    visibility: visible;
  }

}
.dzsulb-main-con.loaded-item{

  opacity: 1;
  visibility: visible;



  .dzsulb-preloader{

    opacity: 0;
    visibility: hidden;
  }

}


.feed-ultibox{
  display: none;
}


.dzs-center-flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
.dzsulb-main-con{
  .show-in-ultibox{
    display: block;
  }
}





.dzsulb-main-con.skin-default{

  .box-main:not(.with-description){
     .real-media{
       border-radius: 5px;
     }
  }
}







.preloader-fountain{
  position:absolute;
  width:70px;
  height:14px;
  margin:auto;

  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.fountainG{
  display: inline-block;
  position: static;

  background-color:rgb(0,0,0);
  width:14px;
  height:14px;
  animation-name:bounce_fountainG;
  -o-animation-name:bounce_fountainG;
  -webkit-animation-name:bounce_fountainG;
  animation-duration:1.2s;
  -webkit-animation-duration:1.2s;
  animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  animation-direction:normal;
  -o-animation-direction:normal;
  -webkit-animation-direction:normal;
  -moz-animation-direction:normal;
  transform:scale(.3);
  -webkit-transform:scale(.3);
  border-radius:9px;
}

#fountainG_1{
  animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}

#fountainG_2{
  animation-delay:0.75s;
  -webkit-animation-delay:0.75s;
}

#fountainG_3{
  animation-delay:0.9s;
  -webkit-animation-delay:0.9s;
}

#fountainG_4{
  animation-delay:1.05s;
  -webkit-animation-delay:1.05s;
}



@keyframes bounce_fountainG{
  0%{
    transform:scale(1);
    background-color:rgb(0,0,0);
  }

  100%{
    transform:scale(.3);
    background-color:rgb(100,100,100);
  }
}


@-webkit-keyframes bounce_fountainG{
  0%{
    -webkit-transform:scale(1);
    background-color:rgb(0,0,0);
  }

  100%{
    -webkit-transform:scale(.3);
    background-color:rgb(50,50,50);
  }
}














/* -- gallery skins */



.dzsulb-main-con.has-gallery{

  $gallery_size: 120px;
  $thumb_width: 120px;
  $thumb_height: 80px;

  .box-mains-con{
    height: calc(100% - #{$gallery_size});
  }

  .gallery-clip-con{
    position: absolute;
    bottom: 0;
    height: $gallery_size;
    left:0;
    width: 100%;

    text-align: center;

    .gallery-items-con{
      display: inline-block;

      white-space: nowrap;

      position: relative;
      left:0;


      &.scroll-mode{

        $transition-property: left;
        $transition-duration: $animation_time;
        $transition-timing: ease-in;

        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
      //left:50%;

      //transform: translate3d(-50%, 0, 0);

      .gallery-thumb{
        display: inline-block;
        vertical-align: bottom;

        width:$thumb_width;
        height:$thumb_height;

        margin-top: ($gallery_size - $thumb_height)/2;

        position: relative;

        margin-right: 15px;

        opacity: 0;

        transform: translate3d(0,-5px,0) scale(0.5);

        $transition-property: opacity,transform,width, height;
        $transition-duration: $animation_time;
        $transition-timing: ease-out;

        @include apply_transition($transition-property, $transition-duration, $transition-timing);


        .gallery-thumb--image{

          position: absolute;
          top:0; left:0;
          width: 100%; height: 100%;
          background-size: cover;
          background-position: center center;

          border-radius: 5px;


          transform: scale(1);
          box-shadow: 0 0 3px 0 rgba(50,50,50,0.2);

          $transition-property: transform,box-shadow;
          $transition-duration: $animation_time;
          $transition-timing: ease-out;

          @include apply_transition($transition-property, $transition-duration, $transition-timing);

        }
        svg{

          transform: scale(1) translate3d(-50%,-50%,0);
          transform-origin: top left;
          $transition-property: transform,box-shadow;
          $transition-duration: $animation_time;
          $transition-timing: ease-out;
          //@include apply_transition($transition-property, $transition-duration, $transition-timing);

        }

        &:last-child{
          margin-right: 0;
        }

        &:hover,&.active{
          .gallery-thumb--image{

            transform: scale(1.07);
            box-shadow: 0 0 12px 0 rgba(50,50,50,0.4);

          }

          .gallery-thumb--icon{

            border: 3px solid rgba(255,255,255,0.2);
          }
          svg{

          }
        }

        $delay : 0s;
        $delay_increment: 0.05s;
        $i: 1;

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }

        $delay: $delay+$delay_increment;
        $i: $i+1;
        &:nth-child(#{$i}){
          transition-delay: $delay;
        }
      }
    }


    &.gallery-loaded{

      .gallery-items-con {
        .gallery-thumb {
          height: $thumb_height;
          width: $thumb_width;
          opacity: 1;

          transform: translate3d(0, 0, 0) scale(1);
        }
      }
    }

  }


  $size: 30px;
  .gallery-thumb--icon{
    border-radius: 50%;
    width: $size;
    height: $size;

    border: 3px solid rgba(255,255,255,0.7);
    background-color: rgba(255,255,255,0.25);
    @include centerit();
    box-shadow:  0 0 2px 0 rgba(30,30,30,0.3);
    $transition-property: transform,border;
    $transition-duration: $animation_time;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    svg{

      @include centerit();

      path{
        fill: rgba(255,255,255,0.7);
      }
    }

    &:empty{
      display: none;
    }
  }
}

.dzsulb-main-con.gallery-skin-default{


  &.has-gallery{

  }

  .box-main-media{
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  }

}