.notify-phone { animation: notifyPhone 1s infinite ease-in-out } 
@keyframes notifyPhone { 
 0% { transform: rotate(0) scale(1) skew(1deg) } 
 10% { transform: rotate(-25deg) scale(1) skew(1deg) } 
 20% { transform: rotate(25deg) scale(1) skew(1deg) } 
 30% { transform: rotate(-25deg) scale(1) skew(1deg) } 
 40% { transform: rotate(25deg) scale(1) skew(1deg) } 
 50% { transform: rotate(0) scale(1) skew(1deg) } 
 100% { transform: rotate(0) scale(1) skew(1deg) } 
 }
 @keyframes rotate { 
 0% { transform: rotate(0); } 
 100% { transform: rotate(360deg); } 
 }

 /* Menu Effects */
.centery, .centery-after:after, .centery-before:before { transform: translateY(-50%); } 
/* Transition Utility */
.ease-in-200 { transition: all 500ms ease-in; } 
/* Slide Down Animation */
@keyframes slideInDown1 { 
 0% { transform: translate3d(0,-30px,0); visibility: visible; } 
 100% { transform: translate3d(0,0,0); } 
 }
.slideInDown1 { animation-name: slideInDown1; } 
/* Fixed Header Styles */
.fixed, .fixed-res { position: fixed !important; left: 0; right: 0; top: 0; z-index: 999; } 
.fixed { animation: slideInDown1 1s 0s; } 
.fixed-res { animation: ease 0.3s; } 

/* Floating Shadow Hover Effect */
.hvr-float-shadow { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; transition: transform .3s; } 
.hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%); transition: transform .3s, opacity .3s; } 
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { transform: translateY(-5px); } 
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; transform: translateY(5px); } 

/* Button Sweep Center Animation */
.btn-sweep-center { position: relative; z-index: 10; color: var(--color-main); display: inline-block; overflow: hidden; text-transform: uppercase; border: 1px solid var(--color-main); } 
.btn-sweep-center:hover { color: #fff; } 
.btn-sweep-center:before, .btn-sweep-center:after { position: absolute; top: 50%; content: ""; width: 20px; height: 20px; background-color: var(--color-main); border-radius: 50%; z-index: -1; } 
.btn-sweep-center:before { left: -20px; transform: translate(-50%,-50%); } 
.btn-sweep-center:after { right: -20px; transform: translate(50%,-50%); } 
.btn-sweep-center:hover:before { animation: criss-cross-left 0.8s both alternate; } 
.btn-sweep-center:hover:after { animation: criss-cross-right 0.8s both alternate; } 
@keyframes criss-cross-left { 
 0% { left: -20px; } 
 50% { left: 50%; width: 20px; height: 20px; } 
 100% { left: 50%; width: 375px; height: 375px; } 
 }
@keyframes criss-cross-right { 
 0% { right: -20px; } 
 50% { right: 50%; width: 20px; height: 20px; } 
 100% { right: 50%; width: 375px; height: 375px; } 
 }

/* General Animations */
@keyframes spin { to { transform: rotate(360deg); } 
 }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } 
 }
@keyframes shake-anim { 0%,50%,100% { transform: rotate(0) scale(1) skew(1deg); } 
 10%,30% { transform: rotate(-25deg) scale(1) skew(1deg); } 
 20%,40% { transform: rotate(25deg) scale(1) skew(1deg); } 
 }
@keyframes rotate { 
 from { transform: rotate(0); } 
 to { transform: rotate(360deg); } 
 }
@keyframes fadeup { 
 from { opacity:0; transform:translateX(-20px); } 
 to { opacity:1; transform:translateX(0); } 
 }
@keyframes pulse-animation { 
 0% { transform: scale3d(1,1,1); opacity: 0; } 
 10% { transform: scale3d(1.1,1.1,1.1); opacity: 1; } 
 100% { transform: scale3d(1.6,1.6,1.6); opacity: 0; } 
 }
@keyframes border-animation { 
 0% { transform: scale3d(0.6,0.6,0.6); opacity: 0; } 
 20% { transform: scale3d(1.2,1.2,1.2); opacity: 1; } 
 100% { transform: scale3d(1.4,1.4,1.4); opacity: 0; } 
 }

/* Hover Sweep Background Effects */
.hvr-sweep-to-top, .hvr-sweep-to-right { display: inline-block; vertical-align: middle; transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; transition: color .3s; } 
.hvr-sweep-to-top:before, .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; transition: transform .3s cubic-bezier(.39,.575,.565,1); } 
.hvr-sweep-to-top:before { background: #3a0304; transform: scaleY(0); transform-origin: 50% 100%; } 
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color: #fff; } 
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { transform: scaleY(1); } 
.hvr-sweep-to-right:before { background: #33cbcc; transform: scaleX(0); transform-origin: 0 50%; } 
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff; } 
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { transform: scaleX(1); } 

/* Button Hover Shine Effect */
.btn-hover { position: relative; padding: 10px 20px; border-radius: 7px; border: 1px solid rgb(61,106,255); font-size: 14px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; background: transparent; color: #fff; overflow: hidden; box-shadow: 0 0 0 0 transparent; transition: all 0.2s ease-in; } 
.btn-hover:hover { background: rgb(61,106,255); box-shadow: 0 0 30px 5px rgba(0,142,236,0.815); transition: all 0.2s ease-out; } 
.btn-hover:active { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s ease-in; } 
.btn-hover::before { content: ''; display: block; width: 0; height: 86%; position: absolute; top: 7%; left: 0; opacity: 0; background: #fff; box-shadow: 0 0 50px 30px #fff; transform: skewX(-20deg); } 
.btn-hover:hover::before { animation: sh02 0.5s linear; } 
@keyframes sh02 { 
 from { opacity: 0; left: 0; } 
 50% { opacity: 1; } 
 to { opacity: 0; left: 100%; } 
 }

/* Animated Gradient Border Button (Codepen Style) */
.codepen-button { display: block; cursor: pointer; color: #fff; margin: 0 auto; position: relative; text-decoration: none; font-weight: 600; border-radius: 6px; overflow: hidden; padding: 3px; isolation: isolate; } 
.codepen-button::before { content: ""; position: absolute; top: 0; left: 0; width: 400%; height: 100%; background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); background-size: 25% 100%; animation: codepen-border .75s linear infinite; animation-play-state: paused; translate: -5% 0; transition: translate .25s ease-out; } 
.codepen-button:hover::before { animation-play-state: running; transition-duration: .75s; translate: 0 0; } 
@keyframes codepen-border { to { transform: translateX(-25%); } 
 }
.codepen-button span { position: relative; display: block; padding: 1rem 1.5rem; font-size: 1.1rem; background: #000; border-radius: 3px; height: 100%; } 

/* Box Border Grow Animation */
.box { position: relative; transition: 0.5s; } 
.box::before, .box::after { pointer-events: none; border-radius: 0.5rem; width: 100%; height: 100%; z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; transform: scale(0); transition: 0.5s; } 
.foo::before { border-radius: 0.5rem; border-bottom: 3px solid var(--color-main-v2); border-left: 3px solid var(--color-main-v2); transform-origin: 0 100%; } 
.foo::after { border-radius: 0.5rem; border-top: 3px solid var(--color-main-v2); border-right: 3px solid var(--color-main-v2); transform-origin: 100% 0%; } 
.box:hover::after, .box:hover::before { transform: scale(1); } 

/* Shine Hover Effect (Diagonal Light) */
.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: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%); transform: skewX(-25deg); } 
.hover_sang2:hover:before { transition: 1s; left: 100%; } 
/* Shine Hover Effect (Full Cover) */
.hover_sang { display: block; position: relative; overflow: hidden; } 
.hover_sang:before, .hover_sang:after { display: block; background: rgba(255,255,255,0.3); content: ""; height: 100%; position: absolute; transition: all 0.5s ease; width: 100%; z-index: 8; } 
.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; } 
.hover_sang img { transition: 0.7s; } 
.hover_sang:hover img { transform: scale(1.2); } 

/* Gray Overlay Hover Effect */
.hover_xam { position: relative; overflow: hidden; } 
.hover_xam::before, .hover_xam::after { content: ""; background: rgba(255,255,255,.5); position: absolute; transform: rotate(90deg); opacity: 1; width: 0; height: 0; z-index: 2; } 
.hover_xam::before { bottom: 0; left: 0; } 
.hover_xam::after { top: 0; right: 0; } 
.hover_xam:hover::before, .hover_xam:hover::after { transform: rotateY(180deg); opacity: 0; height: 100%; width: 100%; transition-duration: 1.3s; } 

/* Animate.css Helper Classes */
.animate__infinite { animation-iteration-count: infinite; } 
.animate__tada { animation-name: tada; } 
.animate__animated { animation-duration: var(--animate-duration,1s); animation-fill-mode: both; } 

/* Loading Overlay and Animation */
.mask { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999999999; overflow: hidden; } 
.mask span { width: 100%; position: absolute; right: 0; background: linear-gradient(90deg,#fff 0,#fff 100%); transition: width .9s ease-in-out; } 
.mask span:nth-child(1) { height: 30vh; top: 0; transition-delay: .3s; } 
.mask span:nth-child(2) { height: 40vh; top: 30vh; transition-delay: .5s; } 
.mask span:nth-child(3) { height: 30vh; top: 70vh; transition-delay: .6s; } 
.mask.hideg span { width: 0; } 
.mask.hideg { pointer-events: none; } 
.loadicon { position: fixed; top: 50%; left: 50%; width: 200px; height: 140px; margin: -70px 0 0 -100px; z-index: 110000; } 
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; } 
#loading.finish { z-index: -9999; } 
#loading.finish .logo_2 span, #loading.finish .logo_2 img { display: none; } 
#loading .logo_2 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all ease 0.5s; } 
#loading .logo_2 span { display: block; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); box-shadow: 0 0 20px rgba(255,255,255,0.5); animation: Ani 2s infinite; width: 120px; height: 120px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 9999999999; } 
#loading .logo_2 img { position: relative; max-width: 80px; z-index: 4; } 



.mask-loading { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999999999; overflow: hidden; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; pointer-events: none } 
.mask-loading.hideg { pointer-events: none; } 


.mask-loading span:nth-child(2) { height: 40vh; top: 30vh; -webkit-transition-delay: .5s; transition-delay: .5s; } 
.mask-loading span:nth-child(3) { height: 30vh; top: 70vh; -webkit-transition-delay: .6s; transition-delay: .6s; } 
.mask-loading span { width: 100%; position: absolute; right: 0; background: -webkit-linear-gradient(90deg,#000 0,#000 100%); background: linear-gradient(90deg,#000 0,#000 100%); -webkit-transition: width .9s ease-in-out; transition: width .9s ease-in-out; } 
.mask-loading.hideg span { width: 0; } 
.mask-loading.hideg { pointer-events: none; } 
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; background: #000; } 
#loading.finish { z-index: -9999; } 
#loading.finish .logo_2 span, #loading.finish .logo_2 img { display: none; } 
#loading .logo_2 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all ease 0.5s; } 
#loading .logo_2 span { display: block; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.5); -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-animation: Ani 2s infinite; animation: Ani 2s infinite; width: 120px; height: 120px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 2; z-index: 9999999999; } 
#loading .logo_2 img { position: relative; max-width: 80px; z-index: 4; } 

.wheel-and-hamster { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 14px; } 
 
 .wheel,
 .hamster,
 .hamster div,
 .spoke { position: absolute; } 
 
 .wheel,
 .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; } 
 
 .wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; } 
 
 .hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; } 
 
 .hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; } 
 
 .hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; } 
 
 .hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; } 
 
 .hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; } 
 
 .hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; } 
 
 .hamster__limb--fr,
 .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; } 
 
 .hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); } 
 
 .hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); } 
 
 .hamster__limb--br,
 .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; } 
 
 .hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); } 
 
 .hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); } 
 
 .hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; } 
 
 .spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
 linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; } 
 
 /* Animations */
 @keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 
 
 50% { transform: rotate(0) translate(-0.8em,1.85em); } 
 }
 
 @keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } 
 }
 
 @keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 
 
 95% { transform: scaleY(0); } 
 }
 
 @keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } 
 }
 
 @keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } 
 }
 
 @keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } 
 }
 
 @keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } 
 }
 
 @keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } 
 }
 
 @keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } 
 }
 
 @keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 
 
 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } 
 }
 
 @keyframes spoke { 
 from { transform: rotate(0); } 
 
 to { transform: rotate(-1turn); } 
 }


 @keyframes bounce { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.6; } 
40% { transform: scale(1.4); opacity: 1; } 
 }
 
/*Fly*/
.img-product-fly { position:absolute; z-index:99999999; width:50px; height:50px; object-fit:cover; border-radius:100%; border:2px solid var(--color-main); transition:all 1s ease; animation:MyAnimation 1.5s infinite; } 
@keyframes MyAnimation { 
 0% { transform:scale(0.5) } 
 25% { transform:scale(1) } 
 75% { transform:scale(1) } 
 100% { transform:scale(0) } 
 }


/* Animated Line Underline */
.animate-border { position: relative; display: block; width: 100px; margin-top: 10px !important; height: 3px; background: var(--color-main); overflow: hidden; } 
.animate-border:after { position: absolute; content: ""; width: 30px; height: 100%; left: -15px; bottom: 0; border-left: 10px solid #fff; border-right: 10px solid #fff; animation: animborder 2s linear infinite; } 
@keyframes animborder { 
 0% { transform: translateX(0); } 
 100% { transform: translateX(113px); } 
 }

/* Category Dropdown Styles */
.hdanhmucdrops { position: relative; width: 240px; z-index: 19; border-radius: 20px 20px 0 0; } 
.hdanhmucdrops > .nicescl { display: none; top: 100%; position: relative; box-shadow: 0 0 10px #ccc; } 

/* Hover Effect */
.product .i_left { position: absolute; height: 0; -webkit-border-radius: 0 50px; -moz-border-radius: 0 50px; border-radius: 0 50px; width: 2px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 2px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 2px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 2px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.product:hover .i_top { width: 100%; left: 0 } 
.product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.product:hover .i_bottom { width: 100%; right: 0; left: inherit }