@mixin doanimation($transition-property, $transition-duration, $transition-timing) {
transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-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;
}


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

/*functional styling*/
#{$classmain}{
	position: relative;
        width:100%;
        display:block;
}
#{$classmain} .toggle-title{
    cursor:pointer;
    }
$transition-property: height,opacity,visibility,transform;
$transition-duration: 0.3s;
$transition-timing: ease-out;
#{$classmain} .toggle-content{
        width:100%;
	position: relative;
        @include boxsizing();
    @include doanimation($transition-property, $transition-duration, $transition-timing);
        display:none;
    }
#{$classmain}.active .toggle-content{
    display:block;
    }
/*estethic styling*/
#{$classmain}{
    margin:10px 0;
    }
$transition-property: padding,background;
$transition-duration: 0.3s;
$transition-timing: ease-out;
#{$classmain} .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);
    }
#{$classmain} .toggle-content{
        background: #fff;
        margin:15px 0;
        padding:5px 12px;
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}
#{$classmain}.active .toggle-content{
    }


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

#{$classmain} .toggle-content:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #fff;
	border-width: 5px;
	left: 20px;
	margin-left: -5px;
}
#{$classmain} .toggle-content: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;
}
$classmain : ".dzstoggle.skin-default";
#{$classmain} .toggle-content{
    display: block;
    height:0;
        transform: scale(0);
        -webkit-transform: scale(0);
        transform-origin:0% 0%;
        -webkit-transform-origin:0% 0%;
        opacity:0;
    }
#{$classmain}.active .toggle-content{
        opacity:1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
#{$classmain} .toggle-title{
    }
#{$classmain}.active .toggle-title{
        padding-left:0;
    background-position: -50px center;
    }