/*fadeIn*/
@-webkit-keyframes fadeIn{
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.proyectos,
.fadeIn{
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
}
/* SPAN TEXTO APARECE */
span{
    -webkit-transition: all .27s;
            transition: all .27s;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}
span:hover{
    -webkit-animation: catchFocus .3s linear .2s 1;
            animation: catchFocus .3s linear .2s 1;
    background-color: white;
    color: #f17d00;
    -webkit-transition: all .4s;
            transition: all .4s;
    -webkit-transition-delay: .3s;
            transition-delay: .3s;
}
@-webkit-keyframes catchFocus{
    0%{
        text-shadow: none;
    }
    70%{
        text-shadow: 0 -22px 0 #f17d00;
    }
    100%{
        text-shadow: 0 0 0 #f17d00, 0 0 0 rgba(0, 0, 0, .5);
    }
}
@keyframes catchFocus{
    0%{
        text-shadow: none;
    }
    70%{
        text-shadow: 0 -22px 0 #f17d00;
    }
    100%{
        text-shadow: 0 0 0 #f17d00, 0 0 0 rgba(0, 0, 0, .5);
    }
}

/* REDES SOCIALES */
.redes a:hover{
    -webkit-animation: redes .3s linear .2s 1;
            animation: redes .3s linear .2s 1;
}
@-webkit-keyframes redes{
    0%{
        box-shadow: none;
    }
    70%{
        box-shadow: 0 -22px 0 #f17d00;
    }
    100%{
        box-shadow: 0 0 0 #f17d00, 0 0 0 rgba(0, 0, 0, .1);
    }
}
@keyframes redes{
    0%{
        box-shadow: none;
    }
    70%{
        box-shadow: 0 -22px 0 #f17d00;
    }
    100%{
        box-shadow: 0 0 0 #f17d00, 0 0 0 rgba(0, 0, 0, .1);
    }
}

/*IMAGENES INDEX */
/*Ejemplo 2*/
.ejemplo-2 img{
    -webkit-transition: all .2s ease-in;
            transition: all .2s ease-in;
}
.ejemplo-2 .mascara{
    background-color: rgba(0, 0, 0, .8);
    height: 300px;
    opacity: 1;
    padding: 60px;
    -webkit-transform: translate(300px, 200px) rotate(45deg);
            transform: translate(300px, 200px) rotate(45deg);
    -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
    width: 300px;
}
.ejemplo-2 h2{
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    margin: 20px 40px 0 40px;
    -webkit-transform: translate(200px, -200px);
            transform: translate(200px, -200px);
    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.ejemplo-2 p{
    -webkit-transform: translate(-200px, 200px);
            transform: translate(-200px, 200px);
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}
.ejemplo-2 a.link{
    -webkit-transform: translate(0px, 100px);
            transform: translate(0px, 100px);
    -webkit-transition: all .3s .1s ease-in-out;
            transition: all .3s .1s ease-in-out;
}

.ejemplo-2:hover .mascara{
    opacity: 1;
    -webkit-transform: translate(-100px, -120px) rotate(45deg);
            transform: translate(-100px, -120px) rotate(45deg);
}
.ejemplo-2:hover h2{
    -webkit-transform: translate(0px,0px);
            transform: translate(0px,0px);
    -webkit-transition-delay: .3s;
            transition-delay: .3s;
}
.ejemplo-2:hover p{
    -webkit-transform: translate(0px,0px);
            transform: translate(0px,0px);
    -webkit-transition-delay: .4s;
            transition-delay: .4s;
}
.ejemplo-2:hover a.link{
    -webkit-transform: translate(0px,0px);
            transform: translate(0px,0px);
    -webkit-transition-delay: .5s;
            transition-delay: .5s;
}

/* EFECTO IMAGENES */
#revealAnim .images-container img{
    -webkit-transition: -webkit-transform .6s .9s;
            transition: -webkit-transform .6s .9s;
            transition:         transform .6s .9s;
            transition:         transform .6s .9s, -webkit-transform .6s .9s;
}
.img-boton,
#revealAnim .images-container .back{
    -webkit-transform: translate3d(-40%, 0, 0);
            transform: translate3d(-40%, 0, 0);
    z-index: 2;
}
#revealAnim .images-container .front{
    -webkit-transform: translate3d(61.6%, 0, 0);
            transform: translate3d(61.6%, 0, 0);
}
#revealAnim .images-container .side{
    -webkit-transform: translate3d(-338%, 0, 0);
            transform: translate3d(-338%, 0, 0);
}
.viewing-page-2 #revealAnim .images-container img{
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
}

/* IMAGEN EN EN FONDO */
.img-footer .img a:hover{
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-name: zoomOutLeft; /* Chrome, Safari, Opera */
    -webkit-animation-name: zoomOutLeft;
            animation-name: zoomOutLeft;
    cursor: pointer;
}
@-webkit-keyframes zoomOutLeft{
    40%{
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }
    100%{
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
                transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
                transform-origin: left center;
    }
}
@keyframes zoomOutLeft{
    40%{
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
                transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }
    100%{
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
                transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
                transform-origin: left center;
    }
}

.img-boton{
    display: inline;
    height: 228px;
    width: 456px;
    z-index: 2;
}

/* ROTAR  */
@-webkit-keyframes rotar{
    0%{
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
                transform: rotate3d(0, 0, 1, -200deg);
        -webkit-transform-origin: center;
                transform-origin: center;
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        -webkit-transform-origin: center;
                transform-origin: center;
    }
}

@-webkit-keyframes rotar{
    0%{
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
                transform: rotate3d(0, 0, 1, -200deg);
        -webkit-transform-origin: center;
                transform-origin: center;
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        -webkit-transform-origin: center;
                transform-origin: center;
    }
}

@keyframes rotar{
    0%{
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
                transform: rotate3d(0, 0, 1, -200deg);
        -webkit-transform-origin: center;
                transform-origin: center;
    }

    100%{
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        -webkit-transform-origin: center;
                transform-origin: center;
    }
}


/* rubberBandY*/
@-webkit-keyframes rubberBandY{
    0%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30%{
        -webkit-transform: scale3d(.75, 1.25, 1);
                transform: scale3d(.75, 1.25, 1);
    }
    40%{
        -webkit-transform: scale3d(1.25, .75, 1);
                transform: scale3d(1.25, .75, 1);
    }
    50%{
        -webkit-transform: scale3d(.85, 1.15, 1);
                transform: scale3d(.85, 1.15, 1);
    }
    65%{
        -webkit-transform: scale3d(1.05, .95, 1);
                transform: scale3d(1.05, .95, 1);
    }
    75%{
        -webkit-transform: scale3d(.95, 1.05, 1);
                transform: scale3d(.95, 1.05, 1);
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes rubberBandY{
    0%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30%{
        -webkit-transform: scale3d(.75, 1.25, 1);
                transform: scale3d(.75, 1.25, 1);
    }
    40%{
        -webkit-transform: scale3d(1.25, .75, 1);
                transform: scale3d(1.25, .75, 1);
    }
    50%{
        -webkit-transform: scale3d(.85, 1.15, 1);
                transform: scale3d(.85, 1.15, 1);
    }
    65%{
        -webkit-transform: scale3d(1.05, .95, 1);
                transform: scale3d(1.05, .95, 1);
    }
    75%{
        -webkit-transform: scale3d(.95, 1.05, 1);
                transform: scale3d(.95, 1.05, 1);
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBandY{
    0%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30%{
        -webkit-transform: scale3d(.75, 1.25, 1);
                transform: scale3d(.75, 1.25, 1);
    }
    40%{
        -webkit-transform: scale3d(1.25, .75, 1);
                transform: scale3d(1.25, .75, 1);
    }
    50%{
        -webkit-transform: scale3d(.85, 1.15, 1);
                transform: scale3d(.85, 1.15, 1);
    }
    65%{
        -webkit-transform: scale3d(1.05, .95, 1);
                transform: scale3d(1.05, .95, 1);
    }
    75%{
        -webkit-transform: scale3d(.95, 1.05, 1);
                transform: scale3d(.95, 1.05, 1);
    }
    100%{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}
.rebotar1:hover,
.rebotar:hover{
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-name: rubberBandY;
            animation-name: rubberBandY;
}

/*TEXTO EMERGENTE AL PASAR CURSOR POR IMAGEN */
a .text-e{
    color: transparent;
    height: 133px;
    line-height: 0;
    -webkit-transition: all .5s ease;
            transition: all .5s ease;
    width: 730px;
}
a .text-e:hover{
    clear: both;
    color: #575858;
    height: auto;
    line-height: 30px;
    width: auto;
}
a .text-e img{
    float: left;
    margin: 0 15px;
}


/*EFECTOS IMAGENES*/
.Crooked-photo{
    border: 5px solid #eee;
    box-shadow: 4px 4px 4px rgba(0,0,0,.2);
    margin: 20px;
    -webkit-transition: all .5s ease-out;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
}

.Crooked-photo:hover{
    -webkit-transform: rotate(-7deg);
       -moz-transform: rotate(-7deg);
         -o-transform: rotate(-7deg);
}

.Fade-in-and-reflect{
    border: 10px solid #eee;
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,.1)));
    margin: 25px;
    opacity: .8;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
}

.Fade-in-and-reflect:hover{
    -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,.4)));
    box-shadow: 0 0 20px rgba(255,255,255,.8);
    opacity: 1;
}


.Bumb-up{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin .5s ease-out;
       -moz-transition: margin .5s ease-out;
         -o-transition: margin .5s ease-out;
}

.Bumb-up:hover{
    margin-top: 2px;
}
/*Efecto ampliación o escalado*/
escalado:hover{
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}
/*Efecto Stack & Grow*/

.Stack{
    height: 100px;
    margin: 15px 0;
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
    width: 300px;
}

.Stack:hover{
    height: 133px;
    margin-left: -50px;
    width: 400px;
}