/*base class*/
.wbt {
	opacity:0;
	transform: 
		rotate( var( --rotate, 0 ) ) 
		scale( var( --scale, 1 ) ) 
		translateX( var( --transx, 0 ) ) 
		translateY( var( --transy, 0 ) );
}


/*right to left*/
.wbt-l {
	--transx:100px;
}

/*lower right to upper left*/
.wbt-lu {
	--transx:75px;
	--transy:75px;
}

/*upper right to lower left*/
.wbt-ld {
	--transx:75px;
	--transy:-75px;
}

/*letf to right*/
.wbt-r {
	--transx:-100px;
}

/*lower left to upper right*/
.wbt-ru {
	--transx:-75px;
	--transy:75px;
}

/*upper left to lower right*/
.wbt-rd {
	--transx:-75px;
	--transy:-75px;
}

/*down to up*/
.wbt-u {
	--transy:100px;
}

/*up to down*/
.wbt-d {
	--transy:-100px;
}

/* out to in*/
.wbt-i {
	--scale:1.3;
}

/* in to out */
.wbt-o {
	--scale:.7;
}

.wbt-ro-22 {
	--rotate:22deg;
}

.wbt-ro-45 {
	--rotate:45deg;
}

.wbt-ro-90 {
	--rotate:90deg;
}

.wbt-ro-180 {
	--rotate:180deg;
}

.wbt-ro-n22 {
	--rotate:-22deg;
}

.wbt-ro-n45 {
	--rotate:-45deg;
}

.wbt-ro-n90 {
	--rotate:-90deg;
}

.wbt-ro-n180 {
	--rotate:-180deg;
}



.wbt.active {
	opacity:1!important;
	transform:scale(1,1) translate(0,0) rotate(0deg)!important;
}