@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;

  @if $transition-timing == ease-out-quart {
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {
    -webkit-transition-timing-function:$transition-timing;
    -moz-transition-timing-function:$transition-timing;
    -o-transition-timing-function:$transition-timing;
    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;

//@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: 0.3s;
  $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: 0.3s;
    $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();

    .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;
        }
      }
    }
  }
  .box-main-media-con{

    max-width: 100%;

    .box-main-media{



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

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

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

      }
    }
  }

  .box-main-under{


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

    color: #222222;

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

    &:empty{
      display: none;
    }
  }

  .box-main.scroll-mode{
    top:0;
    transform: translate3d(-50%,0,0);
  }



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

  }

  &.close-btn-inset {

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

}










.dzsulb-main-con.transition-fade{

  .transition-target{

    opacity: 0;
    visibility: hidden;


    $transition-property: opacity,visibility;
    $transition-duration: 0.3s;
    $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: 0.3s;
    $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: 0.3s;
    $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: 0.3s;
    $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{
  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;
}









.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);
  }
}