﻿/*my_glass*/
.my_glass{position: relative;display: block;}
.my_glass:after{content:"";position:absolute;top:0px;left:0px;width:0%;height:100%;background-color:rgba(255,255,255,0.7);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
.my_glass:hover:after{width:120%;background-color:rgba(255,255,255,0);-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}
/*my_glass2*/
.my_glass2{position: relative;display: block;overflow: hidden;}
.my_glass2:after{content:"";position:absolute;top:0px;left:-100%;width:100%;height:100%;background-image:url(images/glass.png);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;background-size: auto 100%;background-repeat: no-repeat;}
.my_glass2:hover:after{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out;left:100%;}
/*my_glass3*/
.my_glass3{position: relative;overflow:hidden;}
.my_glass3::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
.my_glass3:hover::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
/*rd50*/
.my_rd50{position: relative;display: block;overflow: hidden;-webkit-transition:all 0.5s;transition:all 0.5s;}
.my_rd50:hover{border-radius: 50%;}
/*rtt360*/
.my_rtt360{position: relative;display: block;overflow: hidden;-webkit-transition:all 0.5s;transition:all 0.5s;}
.my_rtt360:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
.my_rtt360l{position: relative;display: inline-block;overflow: hidden;-webkit-transition:all 0.5s;transition:all 0.5s;}
.my_rtt360l:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
/*scale12*/
.my_scale12{position: relative;display: block;-webkit-transition:all 0.5s;transition:all 0.5s;}
.my_scale12:hover{-webkit-transform:scale(1.2,1.2);transform:rotate(1.2,1.2);}
/*cir fade*/
.cir_fade{display:block;}
.cir_fade:after{content: "";width: 400px;height: 400px;box-sizing:border-box;border:180px solid rgba(97,41,3,0.5);position: absolute;top:50%;left: 50%;-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);border-radius: 50%;margin-left: -200px;margin-top:-200px;opacity: 1;}
.cir_fade:hover:after{
-webkit-transform:scale(3,3);-moz-transform:scale(3,3);-o-transform:scale(3,3);-ms-transform:scale(3,3);transform:scale(3,3);-webkit-transition:all 2s;transition:all 2s;opacity: 0;}

@keyframes color_trans{
	0% {color:#000000}
	10% {color:#0000ff}
	20% {color:#00ffff}
	30% {color:#ff0000}
	40% {color:#ff0000}
	60% {color:#0fc3ac}
	70% {color:#da0ef2}
	80% {color:#f20e8f}
	90% {color:#f8eb60}
	100% {color:#000000}
}

@-webkit-keyframes color_trans{
	0% {color:#000000}
	10% {color:#0000ff}
	20% {color:#00ffff}
	30% {color:#ff0000}
	40% {color:#ff0000}
	60% {color:#0fc3ac}
	70% {color:#da0ef2}
	80% {color:#f20e8f}
	90% {color:#f8eb60}
	100% {color:#000000}
}



.text_color_trans{
	color:#000;
	animation-name:color_trans;
	-webkit-animation-name:color_trans;
	
	animation-duration:5s;
	-webkit-animation-duration:5s;
	
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	
}

.zoom_img{overflow: hidden;position: relative;}
.zoom_img img{-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;}
.zoom_img:hover img{-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);}