@mixin doanimation($transition-property, $transition-duration, $transition-timing) {
transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;
}
@mixin boxsizing() {
-moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}


$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;
$classmain : ".dzstoggle";
$classcon : ".videogallery-con";



/*functional styling*/
.dzstoggle{

  position: relative;
  width:100%;
  display:block;

  .toggle-title{
  cursor:pointer;
} .toggle-content{
    width:100%;
    position: relative;
    @include boxsizing();
    @include doanimation($transition-property, $transition-duration, $transition-timing);
    display:none;
    overflow: hidden;
  }

  &.active .toggle-content{
    display:block;
  }
}


/*estethic styling*/
.dzstoggle{

  margin:10px 0;
  $transition-property: padding,background;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  .toggle-title{
  padding-left:20px;
  font-family:  Verdana, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url(styleimg/arrow-down.png);
  @include doanimation($transition-property, $transition-duration, $transition-timing);
}

  .toggle-content{
    background: #fff;
    margin:15px 0;
    padding:5px 12px;
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);

    &:after{
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #fff;
        border-width: 5px;
        left: 20px;
        margin-left: -5px;

    }
    &:before{
      border-color: rgba(194, 225, 245, 0);
      border-bottom-color: rgba(0,0,0,0.1);
      border-width: 7px;
      left: 20px;
      margin-left: -7px;


    }
  }

  .toggle-content:after, .toggle-content:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

}





.dzstoggle.skin-default{
  .toggle-content{
    display: block;
    height:0;
    transform: scale(0);
    -webkit-transform: scale(0);
    transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    opacity:0;
  }

  &.active .toggle-content{
    opacity:1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  &.active .toggle-title{
    padding-left:0;
    background-position: -50px center;
  }
}