@font-face {
    font-family: 'Mj_Unique Bold Expanded';
    src: url('../fonts/Mj_Unique Bold Expanded.eot?#') format('eot'),  /* IE6–8 */ url('../fonts/Mj_Unique Bold Expanded.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/Mj_Unique Bold Expanded.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}


/* start##################### */
/*===== Presentational/layout stuff =====*/
.li_img_pey {
  position:relative;
  text-align:center;
  width:105px;
  float:left;
  margin-left:30px;
	list-style:none;
  /* Decrease this number to *increase* the 3D effect (and vice versa). */
  perspective:250 !important;
}
.icon {
	display:inline-block;
	height:110px;
	width:103px;  
	border:0px solid red;
	border-radius:6px;
}

.label {
  left:30px;
  position:absolute;
  top:40px;
  font-family:b yekan;
  font-size:9px;
  color:#002060;
  font-family: 'Mj_Unique Bold Expanded';
}

/*===== Animation (ie: the good stuff) =====*/
.li_img_pey:hover .icon, .label {
  transform:translateZ(-32px) rotateY(180deg);
  
  animation-duration:1.33s;
  animation-name:rotateOut;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.icon, .li_img_pey:hover .label {
  animation-duration:1.33s;
  animation-name:rotateIn;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.slow .icon, .slow .label,
.slow .li_img_pey:hover .icon, .slow .li_img_pey:hover .label {
  animation-duration:5s;
}

@keyframes rotateIn {
  0% {
    opacity:0;
		transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
  /*
    We need to reset it back to negative to avoid it flipping around like crazy
    Comment this line out to see what I mean.
  */
	1% {
		transform:translateZ(-100px) rotateY(-180deg);
	}
 
	50% {
		opacity:0.5;
		z-index:1;
	
		transform:translateZ(-50px) translateX(-25px) rotateY(-90deg);
	}

	100% {
		opacity:1;
		z-index:1;
	
		transform:translateZ(0) translateX(0) rotateY(0deg);
	}
}

@keyframes rotateOut {
	0% {
		opacity:1;
		
		transform:translateZ(0) translateX(0) rotateY(0deg);
	}
 
	50% {
		opacity:0.5;
		z-index:0;
		
		transform:translateZ(-50px) translateX(25px) rotateY(90deg);
	}

	100% {
		opacity:0;
		z-index:0;
		
		transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
}

/*===== Boring stuff =====*/


/*===== Presentational/layout stuff =====*/
.li_img_pey {
  position:relative;
  text-align:center;
  
  
  /* Decrease this number to *increase* the 3D effect (and vice versa). */
  -webkit-perspective:250 !important;
}


/*===== Animation (ie: the good stuff) =====*/
.li_img_pey:hover .icon, .label {
  -webkit-transform:translateZ(-32px) rotateY(180deg);
  
  -webkit-animation-duration:0.33s;
  -webkit-animation-name:rotateOut;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:forwards;
}

.icon, .li_img_pey:hover .label {
  -webkit-animation-duration:0.33s;
  -webkit-animation-name:rotateIn;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:forwards;
}

.slow .icon, .slow .label,
.slow .li_img_pey:hover .icon, .slow .li_img_pey:hover .label {
  -webkit-animation-duration:5s;
}

@-webkit-keyframes rotateIn {
  0% {
    opacity:0;
		-webkit-transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
  /*
    We need to reset it back to negative to avoid it flipping around like crazy
    Comment this line out to see what I mean.
  */
	1% {
		-webkit-transform:translateZ(-100px) rotateY(-180deg);
	}
 
	50% {
		opacity:0.5;
		z-index:1;
	
		-webkit-transform:translateZ(-50px) translateX(-25px) rotateY(-90deg);
	}

	100% {
		opacity:1;
		z-index:1;
	
		-webkit-transform:translateZ(0) translateX(0) rotateY(0deg);
	}
}

@-webkit-keyframes rotateOut {
	0% {
		opacity:1;
		
		-webkit-transform:translateZ(0) translateX(0) rotateY(0deg);
	}
 
	50% {
		opacity:0.5;
		z-index:0;
		
		-webkit-transform:translateZ(-50px) translateX(25px) rotateY(90deg);
	}

	100% {
		opacity:0;
		z-index:0;
		
		-webkit-transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
}

/*===== Boring stuff =====*/


/* end ###############*/
.li_img_pey{
	float:left;
	margin-left:24px;
	margin-top:40px;
	margin-bottom:10px;
	border:0px #fff solid;
	border-radius:10px;
	box-shadow: 0px 0px 5px 5px #CBD9EB;
	padding-top:13px;
	padding-right:13px;
	padding-left:13px;
}