/****** image hover ******/

.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.image-hover {
    position:relative;
    width:450px;
    display:inline-block;
    overflow:hidden;
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)
}

.image-hover a {
    text-decoration:none
}

.image-hover img {
    margin:-100px 0px 0px -100px
}


/*** effect - shadow 1 ***/


.img-shadow-1 {
-webkit-box-shadow: 0 28px 16px -26px black;
-moz-box-shadow: 0 28px 16px -26px black;
box-shadow: 0 28px 16px -26px black;
}

.img-shadow-1:hover {
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);

-webkit-box-shadow: 0 58px 36px -56px black;
-moz-box-shadow: 0 58px 36px -56px black;
box-shadow: 0 58px 36px -56px black;
}

.img-shadow-1 {
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}

.img-shadow-1:hover{
transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-ms-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
}

.cajita {
    background-color: #2F2023;
    border-radius: 50px;
    color: #FFF;
  }
  .cajita:hover {
      -webkit-animation-name: shakeme;
    -webkit-animation-duration: 2s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
  }
  @-webkit-keyframes shakeme {
                  0% { transform: translate(2px, 1px) rotate(0deg); }
                  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
                  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
                  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
                  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
                  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
                  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
                  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
                  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
                  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
                  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
              }


    .cajita2 {
        background-color: #FED10B;
        border-radius: 50px;
        color: #2F2023;
    }
    .cajita2:hover {
        -webkit-animation-name: shakeme;
    -webkit-animation-duration: 2s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    }
    @-webkit-keyframes shakeme {
                    0% { transform: translate(2px, 1px) rotate(0deg); }
                    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
                    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
                    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
                    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
                    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
                    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
                    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
                    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
                    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
                    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
                }