/*Logo 30 años Vidrios por metro */
@keyframes bounce{
    from,
    20%,
    53%,
    80%,
    to{
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    40%,
    43%{
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
                animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
                transform: translate3d(0, -30px, 0);
    }

    70%{
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
                animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
                transform: translate3d(0, -15px, 0);
    }

    90%{
        -webkit-transform: translate3d(0, -4px, 0);
                transform: translate3d(0, -4px, 0);
    }
}


/* Solicite aqui cotizacion VIDRIOS POR METRO  */

@-webkit-keyframes pulse{
    from{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }

    50%{
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
                transform: scale3d(1.05, 1.05, 1.05);
    }

    to{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse{
    from{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }

    50%{
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
                transform: scale3d(1.05, 1.05, 1.05);
    }

    to{
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}


/* ROTAR  */

@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;
    }
}


/* Animacion botones */

@keyframes boton{
    from{
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    to{
        -webkit-transform: rotateY(-360deg);
                transform: rotateY(-360deg);
    }
}

@-webkit-keyframes boton{
    from{
        -webkit-transform: rotateY(0deg);
    }
    to{
        -webkit-transform: rotateY(-360deg);
    }
}

/* The element to apply the animation to */

.boton:hover{
    -webkit-animation: boton 1s ease-in-out;
            animation: boton 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
    /*
-webkit-transform: translateY(-10px) ;
-ms-transform: translateY(-10px) ;
transform: translateY(-10px) ;*/
}

/* BOSPULSE */

@-webkit-keyframes boxPulse{
    from{
        -webkit-animation-timing-function: ease-out;
        height: 47px;
        left: -23px;
        top: -23px;
        width: 62px;
    }
    50%{
        height: 45px;
        top: -19px;
        width: 58px;
    }
    to{
        -webkit-animation-timing-function: ease-out;
        height: 47px;
        left: -23px;
        top: -23px;
        width: 62px;
    }
}

/* LOGO ANIMACION*/

@keyframes logo{
    10%{
        -webkit-transform: scale(1) rotate(-10deg) translateX(50px);
           -moz-transform: scale(1) rotate(-10deg) translateX(30px);
    }
    30%,
    50%,
    70%,
    90%{
        -webkit-transform: scale(1) rotate(10deg) translateX(-10px);
           -moz-transform: scale(1) rotate(10deg) translateX(-10px);
    }
    40%,
    60%,
    80%{
        -webkit-transform: scale(1) rotate(-10deg) translateX(50px);
           -moz-transform: scale(1) rotate(-10deg) translateX(30px);
    }
}

@-webkit-keyframes logo{
    10%{
        -webkit-transform: scale(1) rotate(-10deg) translateX(50px);
    }
    30%,
    50%,
    70%,
    90%{
        -webkit-transform: scale(1) rotate(10deg) translateX(-10px);
    }
    40%,
    60%,
    80%{
        -webkit-transform: scale(1) rotate(-10deg) translateX(50px);
    }
}

/*BANNER ANIMACION*/

@keyframes slidein{
    from{
        bottom: -100%;
    }
    to{
        bottom: 0;
    }
}

@-webkit-keyframes slidein{
    from{
        bottom: -100%;
    }
    to{
        bottom: 0;
    }
}

@keyframes slideinh3{
    from{
        left: -100%;
    }
    to{
        left: 0;
    }
}

@-webkit-keyframes slideinh3{
    from{
        left: -100%;
    }
    to{
        left: 0;
    }
}


/* HEADER*/