@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;


  @if $transition-timing == ease-out-quart {
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {
    transition-timing-function: $transition-timing;
  }
}

@mixin boxsizing() {
  box-sizing: border-box;
}




@mixin centerit() {

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


$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;






@import "cssinc/playlist/gallery_main";
@import "cssinc/navigation/navigation";
@import "cssinc/nav_outer";


.videogallery {
  direction: ltr;
  color: #eee7df;
}

@import "cssinc/misc/misc_rtl";


.videogallery.transition-slideup {

  .sliderCon > .vplayer {
    top: 100%;
  }

  .sliderCon > .vplayer.transition-slideup-gotoTop {
    top: -100%;
  }

  .sliderCon > .vplayer.currItem {
    top: 0;
  }
}


.videogallery.nav-thumbs .main-navigation.menu-top .navMain .videogallery--navigation-container, .videogallery.nav-thumbs .main-navigation.menu-bottom .navMain .videogallery--navigation-container {
  width: auto;
}





.videogallery {
  opacity: 0;
  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);



  .imgblock {
    float: left;
    margin-right: 10px;
    width: 50px;
    height: 50px;


    border: 2px solid rgba(0, 0, 0, 0.3);
  }

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



  &.ad-blocked-navigation:not(.pretime-ad-setuped) {
    .videogallery--navigation-container {
      -webkit-filter: grayscale(60%);
      filter: grayscale(60%) blur(1px);
      pointer-events: none;
    }
  }


}

.videogallery.dzsvg-loaded {
  opacity: 1;
}



div.videogallery {
  word-wrap: break-word;
  font-size: 11px;
  font-size: 0.7rem;
  line-size: 0.8rem;
}




.videogallery .thumb-round {
  width: 90px;
  height: 90px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}




.videogallery .thumb-square {
  width: 90px;
  height: 90px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@import "cssinc/navigation/nav-skins/nav_skin_default";


$cssselector: ".videogallery .dzs-navigation--item.active";
$direction: "left";
$arrow-size: 5px;
$border-width: 1px;
$arrow-mainc: #fff;
$border_color: #eee;


@import "cssinc/misc/misc_shadows";

.gallery-precon {
  clear: both;
}





@import "cssinc/misc/misc_laptop";







.videogallery.try-height-as-window {
  height: 100vh;
}


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



.videogallery {
  max-width: 100vw;
}










.videogallery-con {


  $transition-property: opacity, display, visibility, transform;
  $transition-duration: 1s;
  $transition-timing: ease-out;

  .css-preloader {

    width: 50px;
    height: 50px;

    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    left: 50%;


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


    .the-icon {

      width: 50px;
      height: 50px;

      background: transparent url(./img/preloader.png) center no-repeat;


      -webkit-apply_transition: rotating 0.9s ease-out infinite;
      -moz-apply_transition: rotating 0.9s linear infinite;
      -ms-apply_transition: rotating 0.9s linear infinite;
      -o-apply_transition: rotating 0.9s linear infinite;
      apply_transition: rotating 0.9s ease-out infinite;
    }
  }
}


.vplayer-tobe {

  .subtitles-con-input {
    display: none;
  }

  .menuDescription {
    display: none;
  }

  > .adSource {
    display: none;
  }

  > .videoDescription {
    display: none;
  }


  > .dzstag-tobe {
    display: none;
  }
}









.vplayer {
  opacity: 0;
  visibility: hidden;


  position: relative;
  width: 100%;
  height: 300px;
  transform-origin: 0% 0%;

  @include boxsizing();

  $transition-property: opacity, visibility, top, height;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  * {
    @include boxsizing();
  }

  > object {
    width: 100%;
    height: 100% !important;
  }

  > video {
    visibility: visible;
  }


  &.has-custom-controls {
    video::-webkit-media-controls {
      display: none !important;
    }

    video::-webkit-media-controls-enclosure {
      display: none !important;
    }
  }






  > .vp-inner {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;


    > div.div-full-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background-size: cover;
      background-position: center center;
    }
  }


  > .touch-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75px;
    height: 75px;

    cursor: pointer;

    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    transform: translate(-50%, -50%);

    opacity: 1;
    visibility: visible;


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

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

  > .touch-play-btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-left: 30px solid #222222;

    margin-top: -20px;
    margin-left: -10px;


  }


  .timetext {
    bottom: auto;
    right: auto;
  }

  > .videoDescription {
    display: none;
  }

  .cmedia-con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    > iframe {
      width: 100% !important;
      height: 100% !important;
    }
  }

  .background {
    position: absolute;
    width: 100%;
  }



  .subtitles-con-input {
    display: none;
  }

  .dzstag.subtitle-tag {
    top: auto;
    bottom: 48px;
    width: 90%;
    left: 5%;


    background-color: rgba(20, 20, 20, 0.8);
    color: #fff;
    padding: 5px 10px;
    text-align: center;
  }


  .big-play-btn {
    @include centerit();
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);

    cursor: pointer;
    $transition-property: opacity, visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    > svg {

      width: 40px;
      height: 40px;

      @include centerit();

      path {
        fill: #444;
      }
    }
  }


  &.is-playing {

    .big-play-btn {
      opacity: 0;
      visibility: hidden;
    }
  }


  .video-description {
    opacity: 1;
    visibility: visible;


    $transition-property: opacity, visibility;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }


  > .vp-inner {
    > .video-description.video-description-style-gradient {
      width: 70%;
      height: 100%;
      top: 0;
      left: 0;

      padding: 30px;

      display: flex;
      align-items: center;

      color: #444444;;
      overflow: hidden;
      pointer-events: none;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.79) 75%, rgba(255, 255, 255, 0) 100%);


        transform: translate3d(0, 0, 0);

        $transition-property: transform;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);

      }

      > div {

        pointer-events: auto;
        max-width: 50%;
        position: relative;
        transform: translate3d(0, 0, 0) scale(1);

        $transition-property: transform;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
  }

  &.is-playing {
    .vp-inner {


      .video-description {
        opacity: 0;
        visibility: hidden;
      }

      .video-description-style-gradient {
        &:before {

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

        > div {

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

  &.under-420 {

  }

  .vp-h3 {
    font-size: 21px;
    font-size: 1.5vw;
    line-height: 1.4;
  }

  &.under-600 {
    .vp-h3 {
      font-size: 16px;
    }
  }

  &.under-420 {
    .vp-h3 {
      font-size: 12px;
    }

    .vp-inner > .video-description.video-description-style-gradient {

      > div {

        max-width: 120%;
      }
    }
  }

  &.pattern-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    video {
      width: auto;
      height: auto;
    }
  }

  .controls-right {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
  }

  .dzsvg-player-button {

    cursor: pointer;


    width: 20px;
    height: 20px;
    position: relative;
    margin-right: 10px;

    .the-icon {
      width: 100%;
      height: 100%;

    }

    .dzsvg-tooltip {
      position: absolute;

      right: -15px;

      bottom: 30px;

      padding: 0px;
      $color_bg: #dddddd;
      $color_text: #444;


      color: $color_text;

      border-radius: 5px;

      background-color: $color_bg;

      &:before {
        content: "";
        display: block;

        position: absolute;
        top: 100%;
        right: 19px;
        border-top: 5px solid $color_bg;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
      }

      .quality-option {
        padding: 10px 40px;

        text-align: center;

        &:hover, &.active {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }


      transform: scale(0);
      opacity: 0;
      visibility: hidden;
      transform-origin: bottom right;


      $transition-property: all;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }

    &:hover {
      .dzsvg-tooltip {

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

    &.show-only-when-multiple-qualities {
      transform: scale(0);
      max-width: 0;
      max-height: 0;
      opacity: 0;


      $transition-property: all;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }

  &.has-multiple-quality-levels {
    .dzsvg-player-button {

      &.show-only-when-multiple-qualities {
        transform: scale(1);
        max-width: 100px;
        max-height: 100px;
        opacity: 1;


      }
    }
  }


  .vp-inner {
    > iframe {
      width: 100% !important;;
      height: 100% !important;;
    }
  }
  .dzsvg-video-container{
    position: relative;    width: 100%;
    height: 100%;
    >*{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #383838;

    }
  }
}


.feed-dzsvg {
  display: none;
}

.vplayer, .vplayer-tobe {

  > div[class^="feed-menu-"] {
    display: none;
  }

  .dzsvg-feed {
    display: none;
  }


}

@import "cssinc/player-controls-basic-setup";

@import "cssinc/plugin360";

.vplayer.disable-volume {
  .volumecontrols:not(.a):not(.b):not(.c) {
    display: none;
  }
}

.vplayer:not(.skin_reborn) {

  .info {
    background: url('img/info.png');
  }

  .infoText {
  }

  .descriptionText {
  }

  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;



  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  .fscreencontrols {

    width: 23px;
    height: 16px;
  }

  .full {
  }

  .fullHover {
  }


  .video-description {
    position: absolute;
    max-width: 90%;
  }


  .cover-image > .the-div-image {

    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #444;

    opacity: 0;
    $transition-property: opacity;
    $transition-duration: 0.15s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  &.cover-image-loaded {
    .the-div-image {
      opacity: 1;
    }
  }


}

$color_highlight: #dbb2a0;
@import "cssinc/player-skins/player_skin_default";

.vplayer.is-touch {
  .cover-image {
  }
}

.vplayer.is-ad.is-touch-device.type-youtube {
  .controls {
    pointer-events: none;
  }
}

.vplayer.safe, .vplayer.dzsvp-loaded {
  opacity: 1;
  visibility: visible;
}


.vplayer.dzsvp-really-loaded {
  .dzsvg-preloader {
    opacity: 0;
    visibility: hidden;
  }
}

.vplayer.currItem {
  opacity: 1;
}


.vplayer .cover-image > img {
  display: block;
  width: 100%;
  height: 100%;
}

.vplayer[data-type="dash"] {
  background-color: #222222;
}


.vplayer.is_fullscreen {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #222222;

  z-index: 5557;
}

.vplayer .infoText {
  position: absolute;
  opacity: 0;
}


.vplayer .volume_active {
  overflow: hidden;
  position: absolute;


  $transition-property: width;
  $transition-duration: 0.15s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

.vplayer .volume_cut {
  overflow: hidden;
  visibility: hidden;
  position: absolute;
}

.vplayer .menuDescription {
  display: none;
}


.vplayer .audioImg {
  top: 0;
  left: 0;
  position: absolute;
}


.vplayer > .adSource {
  display: none;
}





.vplayer .playcontrols:hover .pauseHover, .vplayer .playcontrols:hover .playHover {
  opacity: 1;
}


/******* scrub *********/


/******* timing *********/

/******* volume *********/

.volumecontrols {
  cursor: pointer;
  position: relative;

}


.vplayer .fscreencontrols:hover .fullHover {
  opacity: 1;
}



.vplayer .video-description {
  top: 10px;
  left: 10px;

}

.vplayer .video-description .video-subdescription {
  position: absolute;
  top: 42px;
  left: 0px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.5);
  color: #111;
  font-size: 11px;
}

@import "cssinc/player_tags";


@import "cssinc/navigation/nav-skins/nav_skin_navtransparent";
@import "cssinc/navigation/nav-skins/nav_skin_boxy";

@import "cssinc/ad-functions/ad-functions";

.vplayer.first-played {
  .scrubBox-prog {

    opacity: 0.9;
    visibility: visible;
  }
}

body .categories-videogallery .the-categories-con .a-category.active {
  background-color: #1a4e7b;
}

.vplayer.disable-volume {

  .hdbutton-con {

  }
}


.vplayer.disable-volume.under-420 {
  .controls {

    .hdbutton-con {
    }
  }
}

@import "cssinc/navigation/navigation_search";


@import "cssinc/navigation/nav-skins/nav_skin_pro";
@import "cssinc/playlist/gallery_skin_aurora";


@import "cssinc/player-skins/skin_pro";


.no-mouse-out .vplayer.skin_pro.mouse-is-out .controls {
  bottom: 0;
}


/* ===========video player - skin_pro END */


@import "cssinc/player-skins/skin_bigplay";

/* ===========video player - skin_bigplay */


/* ===========video player - skin_bigplay END */

/* ===========video player - skin_bigplay_pro */


/* ===========video player - skin_bigplay END */


.vplayer.skin_noskin {
  .controls {
    display: none;
  }
}


/* ===========video player - skin aurora */


@import "cssinc/player-skins/skin_aurora";

/* start skin_bluescrubtop */
@import "cssinc/player-skins/skin_bluescrubtop";
/* end skin_bluescrubtop */

$color_highlight: #59c8ef;

/* start skin_avanti */
@import "cssinc/player-skins/skin_avanti";
/* end skin_avanti */

/*----  thumbs ----*/

$color_highlight: #98c2d1;

/* start skin_white */
@import "cssinc/player-skins/skin_white";
/* end skin_white */

/* start skin_reborn */
@import "cssinc/player-skins/skin_reborn";
/* end skin_reborn */


.vplayer.skin_reborn, .vplayer.skin_white {

  .volumecontrols {
    width: 57px;
    height: 14px;

  }

  .volume_static {
    position: absolute;
    top: 0;
    left: 0;
    background-image: none;
    width: 100%;
    height: 100%;

    white-space: nowrap;

    .volbar {
      position: relative;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background-color: #FFFFFF;
      margin-right: 3px;
      display: inline-block;

      opacity: 0.4;


      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

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

    }

    .volbar.active {
      opacity: 1;
    }
  }
}

.is-single-video-player {
  &[data-type="vimeo"] {
    background-color: #444444;
  }
}

.vimeo-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vimeo-chromeless {
  .scrub {

    $transition-property: width;
    $transition-duration: 0.4s;
    $transition-timing: linear;

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

/* skin_bluescrubtop END */

$aux: 14px;

/**
deprecated
 */
.thumb20 {
  display: inline-block;
  width: $aux;
  height: $aux;
  position: relative;
  top: 2px;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  @include boxsizing();
}


/* -- categories setup START */


@import "cssinc/playlist/gallery_categories";

/* -- categories setup END */


@import "cssinc/playlist/gallery_navigation_outer";
@import "cssinc/nav_thumbsandarrows";


.wall-close {
  position: fixed;
  top: 0;
  right: 75px;
  z-index: 50006;
  background-color: rgba(50, 50, 50, 0.7);
  color: #eee;
  padding: 15px;

  cursor: pointer;

  font-size: 11px;
  font-weight: bold;
}

body.admin-bar .wall-close {
  top: 35px;
}


@import "cssinc/playlist/pagination";
@import "cssinc/misc/misc_classes";
.extra-btns-con {
  margin-top: 10px;
}



@import "css_common/_dzs_social.scss";


@import "cssinc/misc/misc_themefixes";


.mainvp-con {
  > .extra-html {
    opacity: 1;
    visibility: visible;

    .counter-hits {
      i, .the-label {
        font-size: 11px;
        display: inline-block;
        vertical-align: middle;

        margin-right: 5px;
      }

      .the-label {
        font-size: 13px;
      }
    }
  }
}

.item-meta-list {
  margin-bottom: 10px;

  .counter-hits {
    float: none;

    i, .the-label {
      display: inline-block;
      vertical-align: middle;
      font-size: 13px;
    }

    i {
      font-size: 11px;
      margin-right: 5px;
    }
  }
}


@import "cssinc/layouts";


/* videogallery transitions */
@import "cssinc/playlist/gallery_transitionSlideIn";

@import "cssinc/shared/preloader";
@import "cssinc/misc/misc_lightbox";

.real-media .hidden-content-for-zoombox, .real-media > .hidden-content {
  display: block !important;
}

.the-item.ajax-content {
  > .dzsas-second-con, > .extra-btns-con {
    display: none;
  }
}




.field-for-view {
  background-color: #f0f0f0;
  line-height: 1;
  color: #555;
  padding: 8px;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Monospaced', Arial;
}

textarea.field-for-view {
  width: 100%;
  white-space: pre-line;
  line-height: 1.75;
}

.dzsvg-container-phone {
  position: relative;

  > .the-bg {
    svg {
      width: 100%;

      path {
        //fill: #d0d2d3;
      }
    }
  }

  > .vplayer, .vplayer-tobe {

    position: absolute;
    left: 5.3%;
    top: 12.1%;
    height: 75.98%;
    width: 89.41%;
  }
}

@import "css_common/dzs_common";

.nav-outer {
  .divimage {

    //todo: why ?
    & + .the-title, & ~ .paragraph {
      margin-top: 5px;
      text-align: center;
    }
  }
}

@import "cssinc/colors";


