/* =======================
	Efectos CSS
========================*/


/* -- ef hay que ponerlo en todas -- */
.ef { transition:all .5s ease-in-out; }


.ef-rotar:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
.ef-desenfoque:hover { 	filter: blur(5px); }
.ef-gris:hover {filter: grayscale(80%);}
.ef-sepia:hover {filter: sepia(60%);}
.ef-saturacion:hover {filter: saturate(180%);}
.ef-transparencia:hover {filter: opacity(.5);}
.ef-negativo:hover { -webkit-filter: invert(100%); filter: invert(100%); }
.ef-rotarcolor:hover { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg); }
.ef-brillo:hover {  -webkit-filter: brightness(150%); filter: brightness(150%); }


.ef-agrandar-en-caja {overflow:hidden;}
.ef-agrandar:hover {-webkit-transform:scale(1.3);transform:scale(1.3);}
.ef-agrandarx2:hover {-webkit-transform:scale(2);transform:scale(2);}

.ef-contraer:hover {-webkit-transform:scale(0.7);transform:scale(0.7);}

.ef-girar:hover {-webkit-transform: rotate(360deg);transform: rotate(360deg);}


.ef-rotar:hover {
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;}


.ef-girar-y-redondear:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px #ec731e;
-webkit-box-shadow: 0px 0px 15px 15px #ec731e;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

.ef-redondear:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px #ec731e;
-webkit-box-shadow: 0px 0px 15px 15px #ec731e;
}


.ef-desplazar-derecha:hover { 
	transform: translate(600px,0);
    transition: all 2s ease-in-out;
}