/*ony for one corner, use this variable several time for other corners*/
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.fade.in {
  opacity: 1;
}

.scale {
  scale: 0;
  -webkit-transition:scale 0.2s linear;
  -moz-transition: scale 0.2s linear;
  -ms-transition: scale 0.2s linear;
  -o-transition: scale 0.2s linear;
  transition: scale 0.2s linear;
}
.scale.in {
  scale: 1;
}

/**********************************************************
 * Images
 **********************************************************/

.view {
   width: 32px;
   height: 32px;
   margin: 0px;
   float: left;
   border: 0px solid #000;
   overflow: hidden;
   position: relative;
   cursor: default;		 
   border-radius: 2px 2px 2px 2px; 					

}
.view .mask,.view .content {
   width: 32px;
   height:32px;
   position: absolute;
   overflow: hidden; margin-top:0px;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}


/**********************************************************
 * HOVER
 **********************************************************/



.view-eff .mask {
   background-color: rgba(255, 255, 255, 0.9);
   top: -36px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;

   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   
/*   -webkit-border-radius:2px 2px 2px 2px; 	 				 
	 border-radius: 2px 2px 2px 2px; 					
	 -moz-border-radius-topleft:2px; 					
	 -moz-border-radius-topright:2px; 					
	 -moz-border-radius-bottomleft:2px; 					
	 -moz-border-radius-bottomright:2px;  */
}

.view-eff:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=0);
   opacity: 0;
   top: 0px;

   -webkit-transition: all 0.1s ease-in;
   -moz-transition: all 0.1s ease-in;
   -o-transition: all 0.1s ease-in;
   -ms-transition: all 0.1s ease-in;
   transition: all 0.1s ease-in;
   
/*   -webkit-border-radius:2px 2px 2px 2px; 	 				 
	 border-radius: 2px 2px 2px 2px; 					
	 -moz-border-radius-topleft:2px; 					
	 -moz-border-radius-topright:2px; 					
	 -moz-border-radius-bottomleft:2px; 					
	 -moz-border-radius-bottomright:2px; */ 
}


.view-eff a.info {
	transform: scale(0.8);
	transition: transform .2s ease-in-out;    
}
.view-eff:hover a.info{
    transform: scale(1.0);
}


/**********************************************************
 * WEBKIT timescaled Effect
 **********************************************************/
 

@-webkit-keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-webkit-keyframes fontbulger {
  0% {font-size: 20px;}
  30% { font-size: 25px;}
  100% { font-size: 20px;}
}
@-webkit-keyframes scale-grow {
   0%   { transform: scaleY(1.0); }
   35%  { transform: scaleY(0.8); } 
   68%  { transform: scaleY(1.2); }   
   100% { transform: scaleY(1.0); }
}
@-webkit-keyframes smartphony {		
        0% { transform: translateX(1px); animation-timing-function: ease-in-out; }
       25% { transform: translateX(-1px); animation-timing-function: ease-in-out; }
	   50% { transform: translateX(1px); animation-timing-function: ease-in-out; }
       75% { transform: translateX(-1px); animation-timing-function: ease-in-out; }
      100% { transform: translateX(1px);animation-timing-function: ease-in-out; }
}
@-webkit-keyframes heartbeating {		
        0% { transform: scale(1.0);  animation-timing-function: ease-in; }
       15% { transform: scale(1.06); animation-timing-function: ease-out; }
	   35% { transform: scale(1.0); animation-timing-function: ease-in; }
       50% { transform: scale(1.06); animation-timing-function: ease-out; }
      70% { transform: scale(1.0); animation-timing-function: ease-in-out; }
}
@-webkit-keyframes calling {		
        0% { transform: translateX(5px); animation-timing-function: ease-in-out; }
       25% { transform: translateX(-5px); animation-timing-function: ease-in-out; }
	   50% { transform: translateX(5px); animation-timing-function: ease-in-out; }
       75% { transform: translateX(-5px); animation-timing-function: ease-in-out; }
	   90% { transform: translateX(5px); animation-timing-function: ease-in-out; }
      100% { transform: translateX(-5px);animation-timing-function: ease-in-out; }
}

@-webkit-keyframes rot-eight {
     0%   { transform: rotate(0deg);
            animation-timing-function: ease-in-out; }
	 100% { transform: rotate(-8deg);
			animation-timing-function: ease-in-out;}
}

@-webkit-keyframes shake {
    0% {left: 0;}
    25% { left: 22px;}
    50% { left: 0;}
    75% { left: -22px;}
    100% { left:0;}
}

@-webkit-keyframes shifty {
     0% { transform: translateX(0px);
   		  animation-timing-function: ease-out; }
   100% { transform: translateX(5px);
  		  animation-timing-function: ease-in; }
}

@-webkit-keyframes vibe {
        0% { transform: translate3d(2px, 0px,0); 
             animation-timing-function: ease-out; }
       50% { transform: translate3d(-2px,0px,0); 
             animation-timing-function: ease-in; }
      100% { transform: translate3d(2px, 0px,0); }
}
	
	
@-webkit-keyframes falling {
   0% { transform: translateY(-500px) scaleY(1.2); }
   35% { transform: translateY(-450px) scaleY(1.2); } 
   65% { transform: translateY(0px) scaleY(1.2); }   
   67% { transform: translateY(10px) scaleY(0.8); }
   85% { transform: translateY(-30px) scaleY(1.2); }
   100% { transform: translateY(0px); }
}

@-webkit-keyframes falling-out {
   0% { transform: translateX(200px); }
   100% { transform: translateX(0px);}

}

@-webkit-keyframes fade-late {
   0% { filter: alpha(opacity=0); }
   90% { filter: alpha(opacity=0);}
   100% { filter: alpha(opacity=100);}

}

@-webkit-keyframes scale-fade {
   0% { 
   transform: translateX(0px) translateY(0px)scale(1.0); 
   filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   }
   10% { 
   transform: translateX(-10px) translateY(10px)scale(1.1); 
   filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   }
   100% { 
   transform: translateX(50px) translateY(-50px) scale(0.5); 
   filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0; display:none;
   }
}


/**********************************************************
 * VIBING Effect
 **********************************************************/
 

@-webkit-keyframes vibing {
    00% { -webkit-transform: translateY(-8px); 
		  -webkit-animation-timing-function: ease-in; }
    40% { -webkit-transform: translateY(-3px);
		  -webkit-animation-timing-function: ease-out;}
	60% { -webkit-transform: translateY(0px);
		  -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateY(-8px);
		   -webkit-animation-timing-function: ease-in; }

}

@-moz-keyframes vibing {
    00% { -webkit-transform: translateY(-8px); 
		  -webkit-animation-timing-function: ease-in; }
    40% { -webkit-transform: translateY(-3px);
		  -webkit-animation-timing-function: ease-out;}
	60% { -webkit-transform: translateY(0px);
		  -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateY(-8px);
		   -webkit-animation-timing-function: ease-in; }

}
@keyframes vibing {
    00% { -webkit-transform: translateY(-8px); 
		  -webkit-animation-timing-function: ease-in; }
    40% { -webkit-transform: translateY(-3px);
		  -webkit-animation-timing-function: ease-out;}
	60% { -webkit-transform: translateY(0px);
		  -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateY(-8px);
		   -webkit-animation-timing-function: ease-in; }

}

/**********************************************************
 * SLIDING Effect
 **********************************************************/
@-webkit-keyframes sliding {
    00% { -webkit-transform: translateX(-20px); 
		  -webkit-animation-timing-function: ease-in; }
    40% { -webkit-transform: translateX(-8px);
		  -webkit-animation-timing-function: ease-out;}
	60% { -webkit-transform: translateX(-0px);
		  -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateX(-20px);
		   -webkit-animation-timing-function: ease-out; }

}

@-webkit-keyframes slidingup {
    00% { -webkit-transform: translateY(-20px); 
		  -webkit-animation-timing-function: ease-in; }
    40% { -webkit-transform: translateY(-8px);
		  -webkit-animation-timing-function: ease-out;}
	60% { -webkit-transform: translateY(-0px);
		  -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translateY(-20px);
		   -webkit-animation-timing-function: ease-out; }

}


/**********************************************************
 * ANIMATION
 **********************************************************/
#pic-move1 {
   display: block;  position: relative; z-index:700;
   -webkit-animation: sliding 6s linear infinite;
} 
.pic-move1 {
   top:-120px; left:-10px; height:280px; width: 440px;
   background: url("../img/slider/item-01.png") 0px 0px no-repeat;
  
}
#pic-move2 {
   display: block;  position: relative; z-index:700;
  -webkit-animation: sliding 4s linear infinite; 
}
.pic-move2 {
  top:-120px; left:0px; height:280px; width: 440px;
  background: url("../img/slider/item-02.png") 0px 0px no-repeat;
}

#pic-move3 {
   display: block; position: relative; z-index:700;
  -webkit-animation: sliding 6s linear infinite; 
}
.pic-move3 {
  top:-120px; left:0px; height:280px; width: 440px;
  background: url("../img/slider/item-03.png") 0px 0px no-repeat;
}

#pic-move4 {
   display: block; position: relative; z-index:700;
  -webkit-animation: sliding 8s linear infinite; 
}
.pic-move4 {
  top:-120px; left:50px; height:280px; width: 440px;
  background: url("../img/slider/item-04.png") 0px 0px no-repeat;
}

#pic-move5 {
   display: block; position: relative; z-index:700;
  -webkit-animation: slidingup 5s linear infinite; 
}
.pic-move5 {
  top:-220px; left:230px; height:280px; width: 440px;
  background: url("../img/slider/item-05.png") 0px 0px no-repeat;
}
#pic-move6 {
   display: block; position: relative; z-index:700;
  -webkit-animation: slidingup 7s linear infinite; 
}
.pic-move6 {
  top:-260px; left:210px; height:280px; width: 440px;
  background: url("../img/slider/item-06.png") 0px 0px no-repeat;
}

#pic-move7 {
   display: block; position: relative; z-index:700;
  -webkit-animation: sliding 6s linear infinite; 
}
.pic-move7 {
  top:-120px; left:320px; height:280px; width: 440px;
  background: url("../img/slider/item-07.png") 0px 0px no-repeat;
}

#pic-move8 {
   display: block; position: relative; z-index:700;
  -webkit-animation: sliding 6s linear infinite; 
}
.pic-move8 {
  top:-120px; left:-50px; height:280px; width: 440px;
  background: url("../img/slider/item-08.png") 0px 0px no-repeat;
}