
/*=========================================================
Image
//=======================================================*/
div.image, figure.image{
    padding: 2px;
}
div.image img, figure.image img{
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	display: block;
}
div.banner {
	overflow: hidden;
	vertical-align: middle;
}
div.banner img{
	vertical-align: middle;
	width: 100%;
	margin-bottom: 10px;
}

div.uploadimg img{
	max-height: 150px;
}

.fig{overflow: hidden;}
.fig img, .fig div{	-webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; width:100%}

.fig .zoom_in{-webkit-transform: scale(1);transform: scale(1);}
.fig .zoom_in:hover{-webkit-transform: scale(1.3);transform: scale(1.3);}

.fig .zoom_out{-webkit-transform: scale(1.3);transform: scale(1.3);}
.fig .zoom_out:hover{-webkit-transform: scale(1);transform: scale(1);}

.fig .slide_left{margin-left: 30px;-webkit-transform: scale(1.5);	transform: scale(1.5);}
.fig .slide_left:hover{margin-left: 0;}

.fig .slide_right{margin-left: 0;-webkit-transform: scale(1.5);	transform: scale(1.5);}
.fig .slide_right:hover{margin-left: 30px;}

.fig .slide_down{margin-top: 0;-webkit-transform: scale(1.5);	transform: scale(1.5);}
.fig .slide_down:hover{margin-top: 30px; margin-bottom: -30px;}

.fig .slide_up{margin-top: 0; -webkit-transform: scale(1.5);	transform: scale(1.5);}
.fig .slide_up:hover{margin: -30px 0 30px 0;}

.fig .rotate{-webkit-transform: rotate(15deg) scale(1);transform: rotate(15deg) scale(1);}
.fig .rotate:hover{-webkit-transform: rotate(0) scale(1);transform: rotate(0) scale(1);}

.fig .rotate_in{-webkit-transform: rotate(15deg) scale(1.6);transform: rotate(15deg) scale(1.6);}
.fig .rotate_in:hover{-webkit-transform: rotate(0) scale(1);transform: rotate(0) scale(1);}

.fig .rotate_out{-webkit-transform: rotate(15deg) scale(0.8);transform: rotate(15deg) scale(0.8);}
.fig .rotate_out:hover{-webkit-transform: rotate(0) scale(1);transform: rotate(0) scale(1);}

.fig .blur{-webkit-filter: blur(2px);filter: blur(2px);}
.fig .blur:hover{-webkit-filter: blur(0);filter: blur(0);}

.fig .on_blur{-webkit-filter: blur(0);filter: blur(0);}
.fig .on_blur:hover{-webkit-filter: blur(10px);filter: blur(10px);}

.fig .gray{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.fig .gray:hover{-webkit-filter: grayscale(0);filter: grayscale(0);}

.fig .on_gray{-webkit-filter: grayscale(0);filter: grayscale(0);}
.fig .on_gray:hover{-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.fig .sepia{-webkit-filter: sepia(100%);filter: sepia(100%);}
.fig .sepia:hover{-webkit-filter: sepia(0);filter: sepia(0);}

.fig .on_sepia{-webkit-filter: sepia(0);filter: sepia(0);}
.fig .on_sepia:hover{-webkit-filter: sepia(100%);filter: sepia(100%);}

.fig .opacity{ opacity:1;}
.fig .opacity:hover {opacity: 0.5;}

.fig_flash:hover{opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s;}
@-webkit-keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4;}	100% {opacity: 1;}}

.fig_shine {position: relative;}
.fig_shine:hover::before {
	position: absolute; z-index: 2;top: 0;left: -75%;display: block;content: '';width: 50%;height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {100% {left: 125%;	}}
@keyframes shine {	100% {left: 125%;}}

.fig_circle  {position: relative;}
.fig_circle:hover::before {
	position: absolute;	top: 50%;left: 50%;	z-index: 2;	display: block;	content: '';width: 0;height: 0;
	background: rgba(255, 255, 255, .2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {	0% {opacity: 1;	}40% {opacity: 1;} 100% {width: 200%;height: 200%;opacity: 0;}}
@keyframes circle {	0% {opacity: 1;}40% {opacity: 1;}100% {width: 200%;	height: 200%;opacity: 0;}}
