/* Animations */
.fadeIn { animation: fadeIn 0.5s ease-in both; -webkit-animation: fadeIn 0.5s ease-in both; }
@keyframes fadeIn { from { opacity: 0; } }
@-webkit-keyframes fadeIn { from { opacity: 0; } }

.fadeOut { animation: fadeOut 0.5s ease-out both; -webkit-animation: fadeOut 0.5s ease-out both; }
@keyframes fadeOut { to { opacity: 0; } }
@-webkit-keyframes fadeOut { to { opacity: 0; } }

.scaleIn { animation: scaleIn 0.5s ease-in both; -webkit-animation: scaleIn 0.5s ease-in both; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.5); } }
@-webkit-keyframes scaleIn { from { opacity: 0; -webkit-transform: scale(0.5); } }

.scaleOut { animation: scaleOut 0.5s ease-out both; -webkit-animation: scaleOut 0.5s ease-out both; }
@keyframes scaleOut { to { opacity: 0; transform: scale(0.5); } }
@-webkit-keyframes scaleOut { to { opacity: 0; -webkit-transform: scale(0.5); } }

.scaleUpIn { animation: scaleIn 0.5s ease-in both; -webkit-animation: scaleIn 0.5s ease-in both; }

.scaleUpOut { animation: scaleUpOut 0.5s ease-in both; -webkit-animation: scaleUpOut 0.5s ease-in both; }
@keyframes scaleUpOut { to { opacity: 0; transform: scale(1.2); } }
@-webkit-keyframes scaleUpOut { to { opacity: 0; -webkit-transform: scale(1.2); } }

.scaleDownIn { animation: scaleDownIn 0.5s ease-in both; -webkit-animation: scaleDownIn 0.5s ease-in both; }
@keyframes scaleDownIn { from { opacity: 0; transform: scale(1.2); } }
@-webkit-keyframes scaleDownIn { from { opacity: 0; -webkit-transform: scale(1.2); } }

.scaleDownOut { animation: scaleOut 0.5s ease-in both; -webkit-animation: scaleOut 0.5s ease-in both; }

.slideIn { animation: slideIn 0.5s ease-in both; -webkit-animation: slideIn 0.5s ease-in both; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-50%); } }
@-webkit-keyframes slideIn { from { opacity: 0; -webkit-transform: translateY(-50%); } }

.slideOut { animation: slideOut 0.5s ease-out both; -webkit-animation: slideOut 0.5s ease-out both; }
@keyframes slideOut { to { opacity: 0; transform: translateY(50%); } }
@-webkit-keyframes slideOut { to { opacity: 0; -webkit-transform: translateY(50%); } }

.slideLeftIn { animation: slideLeftIn 0.5s ease-in both; -webkit-animation: slideLeftIn 0.5s ease-in both; }
@keyframes slideLeftIn { from { opacity: 0; transform: translateX(-50%); } }
@-webkit-keyframes slideLeftIn { from { opacity: 0; -webkit-transform: translateX(-50%); } }

.slideLeftOut { animation: slideLeftOut 0.5s ease-out both; -webkit-animation: slideLeftOut 0.5s ease-out both; }
@keyframes slideLeftOut { to { opacity: 0; transform: translateX(50%); } }
@-webkit-keyframes slideLeftOut { to { opacity: 0; -webkit-transform: translateX(50%); } }

.flipLeftIn { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipLeftIn .5s both ease-out; -moz-animation: flipLeftIn .5s both ease-out; animation: flipLeftIn .5s both ease-out; }
@-webkit-keyframes flipLeftIn { from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: .2; } }
@keyframes flipLeftIn { from { transform: translateZ(-1000px) rotateY(90deg); opacity: .2; } }

.flipLeftOut { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipLeftOut .5s both ease-in; -moz-animation: flipLeftOut .5s both ease-in; animation: flipLeftOut .5s both ease-in; }
@-webkit-keyframes flipLeftOut { to { -webkit-transform: translateZ(1000px) rotateY(-90deg); opacity: 0; } }
@keyframes flipLeftOut { to { transform: translateZ(1000px) rotateY(-90deg); opacity: 0; } }

.flipRightIn { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipRightIn .5s both ease-out; -moz-animation: flipRightIn .5s both ease-out; animation: flipRightIn .5s both ease-out; }
@-webkit-keyframes flipRightIn { from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: .2; } }
@keyframes flipRightIn { from { transform: translateZ(-1000px) rotateY(-90deg); opacity: .2; } }

.flipRightOut { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipRightOut .5s both ease-in; -moz-animation: flipRightOut .5s both ease-in; animation: flipRightOut .5s both ease-in; }
@-webkit-keyframes flipRightOut { to { -webkit-transform: translateZ(1000px) rotateY(90deg); opacity: 0; } }
@keyframes flipRightOut { to { transform: translateZ(1000px) rotateY(90deg); opacity: 0; } }

.rotateIn { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateIn .5s both ease-out; -moz-animation: rotateIn .5s both ease-out; animation: rotateIn .5s both ease-out; }
@-webkit-keyframes rotateIn { from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } }
@-moz-keyframes rotateIn { from { -moz-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } }
@keyframes rotateIn { from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } }

.rotateOut { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateOut .5s both ease-in; -moz-animation: rotateOut .5s both ease-in; animation: rotateOut .5s both ease-in; }
@-webkit-keyframes rotateOut { to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } }
@-moz-keyframes rotateOut { to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } }
@keyframes rotateOut { to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } }

.rotateCubeIn { -webkit-transform-origin: 50% 100%; -webkit-animation: rotateCubeIn .6s both ease-in; -moz-transform-origin: 50% 100%; -moz-animation: rotateCubeIn .6s both ease-in; transform-origin: 50% 100%; animation: rotateCubeIn .6s both ease-in; }
@-webkit-keyframes rotateCubeIn { 0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); } 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } }
@-moz-keyframes rotateCubeIn { 0% { opacity: .3; -moz-transform: translateY(-100%) rotateX(90deg); } 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } }
@keyframes rotateCubeIn { 0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); } 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } }

.rotateCubeOut { -webkit-transform-origin: 50% 0; -webkit-animation: rotateCubeOut .6s both ease-in; -moz-transform-origin: 50% 0; -moz-animation: rotateCubeOut .6s both ease-in; transform-origin: 50% 0; animation: rotateCubeOut .6s both ease-in; }
@-webkit-keyframes rotateCubeOut { 50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); } }
@-moz-keyframes rotateCubeOut { 50% { -moz-animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 100% { opacity: .3; -moz-transform: translateY(100%) rotateX(-90deg); } }
@keyframes rotateCubeOut { 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 100% { opacity: .3; transform: translateY(100%) rotateX(-90deg); } }

@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes rotate {from {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes calllink {0% {color: #eba11e; } 50% {color: #fff; } 100% {color: #ebfa48; } }

@keyframes spin{  to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes spin{  to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

@keyframes blink{  0%{opacity:1}  50%{opacity:0}  100%{opacity:1}}
@-webkit-keyframes blink{  0%{opacity:1}  50%{opacity:0}  100%{opacity:1}}

@keyframes shake-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg);transform:rotate(0) scale(1) skew(1deg)} 10%,30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)} 20%,40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)} 100%,50%{-moz-transform:rotate(0) scale(1) skew(1deg)} }
@-webkit-keyframes shake-anim{0%,100%,50%{-webkit-transform:rotate(0) scale(1) skew(1deg)} 10%,30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)} 20%,40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)} }

.hover_sang1{position:relative; overflow:hidden}
.hover_sang1:before{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.5);content: '';z-index:10;-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);
transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0)}
.hover_sang1:hover:before {-webkit-transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);transform: scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0)}
.hover_sang2{position:relative; overflow:hidden}
.hover_sang2:before{position: absolute;top: 0;left: -85%;z-index: 10;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg)}
.hover_sang2:hover:before {transition: 1s;left: 100%}

.scale-img{overflow:hidden;display:block;}
.scale-img img{-webkit-transform:scale(1,1);transform:scale(1,1)}
.scale-img:hover > img{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}

.hover_sang {position: relative; overflow: hidden; }
.hover_sang:before, .hover_sang:after {background: rgba(255,255,255,0.3) none repeat scroll 0 0; content: ""; height: 100%; position: absolute; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; width: 100%; z-index: 8; display: block; }
.hover_sang:before {left: -100%; top: -100%; }
.hover_sang:after {bottom: -100%; right: -100%; }
.hover_sang:hover:before {left: 0; top: 0; }
.hover_sang:hover:after {right: 0; bottom: 0; }

.cart-product p:hover::before {transform-origin: 100%; transform: scaleX(0); }

.hover_sang3 {position: relative; overflow: hidden; }
.hover_sang3::before {content: ""; background: rgba(255, 255, 255, 0.5); bottom: 0; left: 0; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 1; }
.hover_sang3::after {content: ""; background: rgba(255, 255, 255, 0.5); top: 0; right: 0; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 2; }
.hover_sang3:hover::before, .hover_sang3:hover::after {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition-duration: 1.3s; -moz-transition-duration: 1.3s; -ms-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; -khtml-opacity: 0; -o-opacity: 0; -ms-opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }


@keyframes shake {
    0% {
        transform: rotate(-15deg);
    }

    4% {
        transform: rotate(15deg);
    }

    8%, 24% {
        transform:  rotate(-18deg);
    }

    12%, 28% {
        transform:  rotate(18deg);
    }

    16% {
        transform:  rotate(-22deg);
    }

    20% {
        transform:  rotate(22deg);
    }

    32%{
        transform:  rotate(-12deg);
    }

    36%{
        transform: rotate(12deg);
    }

    40%, 100% {
        transform: rotate(0deg);
    }
}


@-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } }
  
@keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } }